3. Développement Web - XHTML





3.1. XML / XHTML

XHTML ou eXtensible HyperText Markup Language est un langage à/de balises issu de XML, qui dérive lui-même des concepts du SGML (Standard Generalized Markup Language) conçu à partir de 1969 par Charles Goldfarb travaillant à l'époque chez IBM. SGML est employé dans les industries de la documentation et de l'édition.

La compréhension d'une langue (français, anglais, ...) repose sur au moins deux points :

L'idée fondamentale soutendue par XML est l'utilisation de balises pour ajouter un contenu sémantique à un texte. Par exemple, la phrase Le lion mange la gazelle peut être agrémentée de balises :

Le lion mange la gazelle
sujet verbe complément
  1. <phrase>
  2.     <sujet>
  3.         <article genre="masculin" nombre="singulier"> le </article>
  4.         <nom type="animal, domestique"> chat </nom>
  5.     </sujet>
  6.     <verbe groupe="premier" personne="troisieme"
  7.         nombre="singulier" racine="manger"
  8.         temps="indicatif-présent"> mange </verbe>
  9.     <complement>
  10.         <article genre="feminin" nombre="singulier"> la </article>
  11.         <nom type="animal, rongeur"> souris </nom>
  12.     </complement>
  13. </phrase>
  14.  
  15.  

On retrouve la phrase initiale agrémentée d'informations complémentaires :

Le langage XHTML est l'application de ce principe à la description de pages web.

Ainsi, à partir d'un ensemble de textes, on pourrait en déduire le régime alimentaire des lions. Il suffirait d'utiliser un outil d'interrogation de fichiers XML en cherchant, dans toutes les phrases, le mot lion/lionne dans le sujet et mange/dévore au niveau du verbe. Le complément doit alors contenir un animal que les lions mangent.

XHTML 1.0 (2001) est une évolution de HTML version 4.01 basée sur XML. La version XHTML 2.0 qui a été développée pendant près de 8 ans a été abandonnée en 2009 à la faveur de XHTML 5 (2012). XHTML 2.0 n'était pas rétro-compatible avec HTML 4.

Aujourd'hui on parle de manière équivalente de HTML 5 ou XHTML 5. XHTML est simplement plus restrictif dans sa syntaxe. On parle alors de (X)HTML.

Parmi les principaux éléments liés à XHTML 5, on note :

Les conventions sont les suivantes :

  • balises et attributs sont écrits en minuscule
  • une balise est toujours fermée : <p> ... </p>, sauf les balises auto-fermantes (cf. plus avant)
  • certaines balises qui ne peuvent être fermées comme break rule, passage à la ligne, s'écrivent <br />
  • les valeurs des attributs sont données entre double quotes attribut="valeur"

3.1.1. DTD

On associe généralement à un fichier XML un fichier DTD (pour Document Type Definition), qui décrit la grammaire du document :

Une DTD permet notamment grâce à des outils spécifiques de vérifier qu'un fichier XML suit l'organisation de la grammaire, on vérifie donc la conformité de la syntaxe.

Dans l'exemple qui suit, on définit un système qui permet de déclarer des classes pour, par la suite, générer le code C++ ou Java correspondant. On dit par exemple en ligne 1 que la balise ezxml2code contient une ou plusieurs (+) balises class. En ligne 3, on indique qu'une balise class contient éventuellement (?) une balise import, suivie d'une balise attributes, suivie éventuellement d'une balise methods.

En ligne 5, on déclare l'attibut name associé à la balise class. Cet attribut est de type chaîne de caractère (CDATA) et il est nécessaire de le déclarer (#REQUIRED).

  1. <!ELEMENT ezxml2code (class+) >
  2.  
  3. <!ELEMENT class (class_comments?, import?, attributes?, methods?) >
  4. <!ATTLIST class name CDATA #REQUIRED >
  5. <!ATTLIST class inherit CDATA #IMPLIED >
  6.  
  7. <!ELEMENT class_comments ANY >
  8.  
  9. <!ELEMENT import (#PCDATA) >
  10.  
  11. <!ELEMENT attributes (attribute+) >
  12.  
  13. <!ELEMENT attribute EMPTY >
  14. <!ATTLIST attribute name CDATA #REQUIRED >
  15. <!ATTLIST attribute type CDATA #REQUIRED >
  16. <!ATTLIST attribute subtype CDATA #IMPLIED >
  17. <!ATTLIST attribute access (public|private|protected) "private" >
  18. <!ATTLIST attribute in_constructor (yes|no) "yes" >
  19.  
  20. <!ELEMENT methods (constructors?, getters?, setters?, user_defined_methods?) >
  21.  
  22. <!ELEMENT constructors EMPTY >
  23. <!ATTLIST constructors type (all|default) "all" >
  24.  
  25. <!ELEMENT getters EMPTY>
  26. <!ATTLIST getters except CDATA #IMPLIED >
  27. <!ELEMENT setters EMPTY>
  28. <!ATTLIST setters except CDATA #IMPLIED >
  29.  
  30. <!ELEMENT user_defined_methods (method+) >
  31. <!ELEMENT method (comments?, parameters?, code?) >
  32. <!ATTLIST method name CDATA #REQUIRED >
  33. <!ATTLIST method type CDATA #IMPLIED >
  34. <!ATTLIST method static (yes|no) "no" >
  35.  
  36. <!ELEMENT code ANY >
  37. <!ELEMENT comments ANY >
  38. <!ELEMENT parameters (parameter*) >
  39. <!ELEMENT parameter EMPTY>
  40. <!ATTLIST parameter name CDATA #REQUIRED >
  41. <!ATTLIST parameter type CDATA #REQUIRED >
  42. <!ATTLIST parameter access (in|out|inout) "in" >
  43.  
  44.  
  1. <?xml version="1.0" encoding="utf-8" ?>
  2.  
  3. <!DOCTYPE ezxml2code
  4. SYSTEM "https://leria-info.univ-angers.fr/~jeanmichel.richer/xml/xml2code.dtd">
  5.  
  6. <ezxml2code>
  7.  
  8.     <!-- Class description -->
  9.     <class name="NameOfClass">
  10.         <import>
  11.         import java.util.*;
  12.         </import>
  13.                
  14.         <attributes>
  15.             <attribute name="StringAttribute" type="String" access="private" />
  16.             <attribute name="integerAttribnte" type="int" access="protected" />
  17.             <attribute name="floatAttribute" type="float" access="public" />
  18.             <attribute name="FloatObjectAttribute" type="Float" />
  19.             <attribute name="ArrayAttribute" type="ArrayList" subtype="Integer" />
  20.         </attributes>
  21.  
  22.         <methods>
  23.             <constructors type="all"/>
  24.             <getters except="" />
  25.             <setters except="floatAttribute, ArrayAttribute" />
  26.            
  27.             <user_defined_methods>
  28.            
  29.                 <method name="AUserMethod" type="float">
  30.                     <comments>
  31.                     WHAT
  32.                    
  33.                     what the method does
  34.                    
  35.                     HOW
  36.                    
  37.                     How does it do its job
  38.                     </comments>
  39.                     <code>
  40.                         // Java code here
  41.                         return 0.0f;
  42.                     </code>
  43.                 </method>
  44.                
  45.             </user_defined_methods>
  46.         </methods>
  47.    
  48.     </class>       
  49.        
  50. </ezxml2code>
  51.  

3.1.2. extensions de fichiers

Les fichier (X)HTML prennent l'extension .html ou (parfois .htm), il existe d'autres extensions notamment lorsque l'on utilise des langages de script pour dynamiser les pages web :

3.2. Organisation d'une page XHTML

L'organisation (ou la structure) d'une page web est la suivante :

3.2.1. Meta et viewport

Il existe pour la balise meta, attribut name de valeur viewport et dont l'attribut content contient une valeur qui permet d'optimiser l'affichage sur portable ou tablette.

On peut par exemple ajouter :

  

<meta name="viewport" content="width=device-width, initial-scale=1" />

Ces dernières années, les résolutions d'écran ont atteint une taille telle que les pixels individuels sont difficiles à distinguer à l'œil nu. Par exemple, les smartphones récents ont généralement un écran de 5 pouces avec des résolutions supérieures à 1920-1080 pixels (~400 dpi). Pour cette raison, de nombreux navigateurs peuvent afficher leurs pages dans une taille physique plus petite en convertissant plusieurs pixels matériels pour chaque « pixel » CSS. Au départ, cela a causé des problèmes de convivialité et de lisibilité sur de nombreux sites Web optimisés pour le tactile.

Voir cette page pour un aperçu plus détaillé.

3.2.2. une page simple en XHTML 5

Voici un exemple de page :

  1. <!DOCTYPE html>
  2. <html dir="ltr" lang="fr-FR">
  3. <!-- entete -->
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title>XHTML 5</title>
  7. </head>
  8. <!-- contenu de la page -->
  9. <body>
  10.     <h1>Ma première page</h1>
  11.    
  12.     <p>Bonjour !</p>
  13.        
  14. </body>
  15. </html>
  16.  

On notera la définition de l'encodage des caractères est assez simple. Il existe une autre manière de faire en utilisant le code suivant :

  

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- Préférer la méthode ci-dessous --> 
<meta charset="utf-8" >

3.3. Eléments structurants de la page

Parmi les balises XHTML qui permettent de décrire le contenu d'une page dans body, on trouve les balises structurantes, c'est-à-dire celles qui permettent d'organiser la page en différentes parties :

Si on suit une organisation classique d'une page, on trouve :

Il est à noter que les balises section et article sont interchangeables : une section peut contenir des articles qui peuvent contenir des sections et inversement. La balise main pourra donc contenir plusieurs sections ou articles.

3.3.1. Autre balise structurante

La balise div est également souvent utilisée pour introduire des éléments structurants qui ne correspondraient pas à l'un des éléments précédents.

On donne généralement un attribut identifiant id à ces balises div afin de pouvoir leur appliquer un style ou modifier leur contenu (cf. CSS, Javascript).

3.4. Eléments non structurants de la page

Nous allons à présent nous intéresser aux balises liées au texte, aux listes, aux tableaux.

3.4.1. Eléments liés au texte

Les deux éléments principaux liés au texte sont les titres et les paragraphes :

  1. <!DOCTYPE html>
  2.  
  3. <!-- langue utilisée -->
  4. <html lang="fr">
  5.  
  6. <!-- entete -->
  8.  
  9.     <!-- titre de la page affiché dans un des onglets du navigateur -->
  10.     <title>Balises h1 à h6</title>
  11.    
  12.     <!-- encodage des caractères -->
  13.     <meta charset="utf-8">
  14.    
  15.     <!-- description de la page, optionnel -->
  16.     <meta name="author" content="Jean-Michel Richer">
  17.     <meta name="description" content="Une page web avec balise h1 à h6">
  18.     <meta name="keywords" content="page, web, création">
  19.  
  20. </head>
  21.  
  22. <!-- contenu de la page -->
  24.  
  25.     <h1>Balise h1</h1>
  26.     <h2>Balise h2</h2>
  27.     <h3>Balise h3</h3>
  28.     <h4>Balise h4</h4>
  29.     <h5>Balise h5</h5>
  30.     <h6>Balise h6</h6>
  31.     <p>un paragraphe.</p>
  32. </body>
  33.  
  34. </html>
  35.  
  36.  

D'autres balises à l'intérieur d'un titre ou d'un paragraphe permette de modifier l'apparence de celui-ci :

Il est recommandé de ne plus utiliser certaines de ces balises comme b, u, i, s (et de passer par le CSS) même si elles restes utilisables et bien pratiques.

Voici un exemple qui utilise le style (CSS) défini pour cette page :

Titre h1

Titre h2

Voici un texte en gras, en emphase, souligné.

  

<h1>Titre h1</h1>
<h2>Titre h2</h2>
<p>Voici un texte <b>en gras</b>, <em>en emphase</em>, <u>souligné</u>. </p>

3.4.2. La balise liées aux hyperliens

3.4.2.a  Naviguer entre pages

Les balises <a>...</a> sont l'élément essentiel des documents (X)HTML car elles permettent la navigation de page en page.

Un lien ou hyperlien est défini par :

Bonjour, ceci est ma première page web !

  

<p>Bonjour, ceci est ma première 
<a href="http://leria-info.univ-angers.fr/~jeanmichel.richer/">page</a> web !</p>

3.4.2.b  Naviguer vers un endroit de la page

On peut, en outre, ajouter une référence dans la page grâce au caractère # que l'on ajoute à la fin de l'URL.

Mais il faudra également ajouter la définition de ce lien dans la page :

Je veux aller au second paragraphe de la page

Un second paragraphe

  

<p>Je veux aller au <a href="#SECOND_PARAGRAPHE">second paragraphe</a> de la page</p>
 
<a name="SECOND_PARAGRAPHE"></a>
<p>Un second paragraphe</p>

Attention : aujourd'hui il est recommandé de définir un id sur le paragraphe et de faire référence à cet id dans le href.

Je veux aller au second paragraphe de la page

Un second paragraphe

  

<p>Je veux aller au <a href="#JE_VEUX_ALLER_LA">second paragraphe</a> de la page</p>
 
<p id="JE_VEUX_ALLER_LA">Un second paragraphe</p>

3.4.2.c  Ouvrir un nouvel onglet

On peut également ouvrir une page dans un nouvel onglet en ajoutant l'attribut target. On recommande d'ajouter rel="noopener noreferrer" pour des raisons de sécurité :

Se rendre sur Yahoo en ouvrant un nouvel onglet.

  

<p>Se rendre sur <a href="http://yahoo.fr" target="_blank" 
	rel="noopener noreferrer">Yahoo</a> en ouvrant un nouvel onglet.</p>

Enfin, on peut ouvrir une URL dans une nouvelle fenêtre :

Ouvrir une nouvelle fenêtre vers Yahoo.

  

<p>Ouvrir une nouvelle fenêtre vers <a href="http://yahoo.fr" target="_parent"
	 onclick="window.open('http://yahoo.fr', name='_blank', 
	 'width=600, height=400, toolbar=yes, resizable=no'); return false;">Yahoo</a>.</p>

3.4.3. Les images

Il existe une seule balise auto fermante appelée <img> pour insérer des images. Elle dispose de plusieurs attributs comme :

structure des répertoires sous Linux

  

<p class="center">
	<img  
         src="ens/l1/img/bi2_part_2.png" 
	     alt="structure des répertoires sous Linux"
	     width="400" height="300" />
</p>

Deux nouvelles balises ont été introduites afin de gérer les images :

3.4.4. Eléments liés aux listes

Il existe trois types de listes :

Pour les listes ul et ol, la balise li (list item) permet de définir un élément de la liste.

Pour les listes dl on utilise deux autres balises :

L'exemple qui suit montre comment utiliser ces listes :

Liste non numérotée
  • premier élément
  • second élément
Liste numérotée
  1. premier élément
  2. second élément
Liste de descriptions
Nos Cafés
Cappuccino
Latté
Latté Machiatto
Nos Thés
English Breakfast
Chaï
Combinaison de listes
Nos Cafés
Capuccino
  • classique
  • lait d'amande
  • lait de coco
Latté
Latté Machiatto
Nos Thés
English Breakfast
  1. Darjeeling
  2. Russian
Chaï

  

	<!-- liste non numérotée -->	
	<h5>Liste non numérotée</h5>
 
	<ul>
		<li>premier élément</li>
		<li>second élément</li>
	</ul>
 
	<!-- liste numérotée -->
	<h5>Liste numérotée</h5>
 
	<ol>
		<li>premier élément</li>
		<li>second élément</li>
	</ol>
 
	<!-- liste de descriptions -->
	<h5>Liste de descriptions</h5>
 
	<dl>
		<dt>Nos Cafés</dt>
			<dd>Cappuccino</dd>
			<dd>Latté</dd>
			<dd>Latté Machiatto</dd>
		<dt>Nos Thés</dt>
			<dd>English Breakfast</dd>
			<dd>Chaï</dd>	
	</dl>
 
	<!-- Combinaison de listes -->
	<h5>Combinaison de listes</h5>
 
	<dl>
		<dt>Nos Cafés</dt>
			<dd> Capuccino
				<ul>
					<li>classique</li>
					<li>lait d'amande</li>
					<li>lait de coco</li>
				</ul>	 
			</dd>
			<dd>Latté</dd>
			<dd>Latté Machiatto</dd>
		<dt>Nos Thés</dt>
			<dd>English Breakfast
				<ol>
					<li>Darjeeling</li>
					<li>Russian</li>
				</ol>
			</dd>
			<dd>Chaï</dd>	
	</dl>

Concernant les listes, on pourra modifier le style de numérotation ou le symbole utilisé pour les listes non numérotées qui peut être un carré, un cercle ou une image.

3.4.4.a  listes non numérotées

On utilise la propriété list-style-type qui peut prendre les valeurs suivantes :

Remarque : ces valeurs peuvent aussi s'appliquer à des listes numérotées.

3.4.4.b  listes numérotées

On modifie le type de numérotation en utilisant la même propriété mais en utilisant les valeurs :

3.4.4.c  listes avec image

Il est possible de remplacer les cercles ou carrés par une image en définissant la propriété list-style-image. Cependant le texte ne sera pas centré verticalement par rapport à l'image. Il est donc préférable de suivre ce qui est fait dans l'exemple suivant.

3.4.5. Eléments liés aux tableaux

les tableaux sont introduits par la balise table (voir la documentation W3C Tables Module).

De nouvelles balises ont été introduites en XHTML afin de pouvoir afiner les styles des tableaux :

Les balises classiques sont les suivantes :

Ma première table
Month Savings
Sum $180
January $100
February $80

  

<table style="border-collapse: collapse;" width="350" class="center">
 
	<caption>Ma première table</caption>
 
	<!-- l'entête avec les titres des colonnes -->
	<thead>
		<tr>
    	  	<th>Month</th>
      		<th>Savings</th>
		</tr>
	</thead>
 
	<!-- éventuellement le bas de tableau avec des données récapitulatives -->
	<tfoot>
		<tr style="background: wheat; font-weight: bold;">
			<td>Sum</td>
			<td class="right">$180</td>
		</tr>
	</tfoot>
 
	<!-- le corps avec les données -->
	<tbody>
		<tr>
		  	<td>January</td>
		  	<td class="right">$100</td>
		</tr>
		<tr>
		  	<td>February</td>
		  	<td class="right">$80</td>
		</tr>
	</tbody>
 
 
</table>

Deux attributs sont également utilisés pour les balises td :

Voici un exemple avec une table de 4 lignes par 3 colonnes :

fusion de deux colonnes 2
3 4 5
fusion de
deux lignes 		7 8
9 10
Ma table

  

<table style="border-collapse: collapse;" class="center">
 
	<!-- le corps avec les données -->
	<tbody>
		<tr>
		  	<td colspan="2"> fusion de deux colonnes </td>
		  	<td>2</td>
		</tr>
		<tr>
		  	<td>3</td>
		  	<td>4</td>
		  	<td>5</td>
		</tr>
		<tr>
			<td rowspan="2"> fusion de<br />deux lignes </td>
			<td>7</td>
			<td>8</td>
		</tr>
		<tr>
			<td>9</td>
			<td>10</td>
		</tr>
 
	</tbody>
 
	<caption>Ma table</caption>
</table>

Voici un exemple assez simple d'une commande de produits : table sans mise en forme et le même exemple avec mise en forme.

3.5. Les formulaires

Les formulaires permettent de saisir des informations qui seront envoyées au serveur pour y être traitées : il peut s'agir de faire un calcul, d'insérer ou d'extraire des informations d'une base de données.

3.5.1. La balise form

Les formulaires débutent par la balise <form>...</form>, cette balise contient trois attributs :

Si les données sont envoyées au format get, elles seront ajoutées à l'URL fournie dans l'attribut action.

  1. <!DOCTYPE html>
  2.  
  3. <!-- langue utilisée -->
  4. <html lang="fr">
  5.  
  6. <!-- entete -->
  8.  
  9.     <!-- titre de la page affiché dans un des onglets du navigateur -->
  10.     <title>Un formulaire simple</title>
  11.    
  12.     <!-- encodage des caractères -->
  13.     <meta charset="utf-8">
  14.    
  15.     <!-- description de la page -->
  16.     <meta name="description" content="Mon premier formulaire">
  17.  
  18.        
  19. </head>
  20.  
  21. <!-- contenu de la page -->
  23.  
  24.     <!-- balise d'entête -->
  25.     <h1>Informations personnelles</h1>
  26.  
  27.     <form action="" method="post" name="mon_formulaire">
  28.    
  29.     <label>Nom :</label>
  30.     <input type="text" name="nom" /><br />
  31.     <label>Prénom :</label>
  32.     <input type="text" name="prenom" /><br />
  33.     <label>Année de naissance :</label>
  34.     <input type="text" name="annee" /><br />
  35.     <br />
  36.     <label>&nbsp; </label>
  37.     <input type="submit" value="Soumettre" onclick="return false;"/><br />
  38.     </form>
  39.    
  40. </body>
  41.  
  42. </html>
  43.  
  44.  

Ce formulaire ressemble sans style CSS à cela.

Voici le même formulaire avec un style (CSS) : formulaire avec style.

3.5.2. Les éléments de base

Les différents éléments de base qui composent les formulaires sont les suivants :

Nous allons passer en revue ces différents éléments afin de voir comment les utiliser.

3.5.3. Les labels

Le label permet de définir du texte associé à un élément de saisie d'information.

Il dispose d'un attribut for qui spécifie à quel élément le label est associé au travers d'un id ce qui autorise le focus sur l'élément de saisie en cliquant sur le label : "nom (label avec for)".




    jsfiddle

<form name="label1" method="post" action="">
 
	<label for="nom">nom (label avec for)</label>
	<input type="text" name="nom" value="" id="nom"/>
	<br />
 
	<label>prénom (label sans for)</label>
	<input type="text" name="prenom" value="" id="prenom"/>
	<br />
 
	<br />
 
	<label> &nbsp; </label>
	<input type="submit" value="Submit" onclick="return _label1();" />
 
</form>

3.5.4. Les champs input

Les champs input permettent de saisir de l'information textuelle en précisant éventuellement un format de saisie.

On doit définir les attibuts suivants pour ce genre de champs :

L'attribut type peut prendre plusieurs valeurs :






  

<form name="input1" method="post" action="">
 
	<label for="login">login</label>
	<input type="text" name="login" value=""  id="login"/>
	<br />
 
	<label>password</label>
	<input type="password" name="password" value="" id="password"/>
	<br />
 
	<label>email</label>
	<input type="email" name="email" value="" id="email"/>
	<br />
 
	<label>immatriculation</label>
	<input type="text" name="immatriculation" value="" id="immatriculation"
		pattern="^[A-Z]{2}-[0-9]{3}-[A-Z]{2}$"  placehodler="XY-012-ZT"/>
	<br />
 
	<br />
 
	<label> &nbsp; </label>
	<input type="submit" value="Submit" onclick="return _input1();" />
 
</form>


19







  

  

<form name="input2" method="post" action="">
 
	<label>number</label>
	<input type="number" name="number_2" value="3" id="number_2"/>
	<br />
 
	<br />
	<label for="range_2">range</label>
	 <input type="range" name="range_2" value="19" id="range_2" 
	 	min="10" max="31" step="3"
	 	oninput="this.nextElementSibling.value = this.value" />
	 	<output>19</output>
	<br />
	<br />
 
	<label>date</label>
	<input type="date" name="date_2" value="1970-09-30" id="date_2" />
	<br />
 
	<label>time</label>
	<input type="time" name="time_2" value="23:30" /id="time_2" /> 
	<br />
 
	<label for="tel_2">telephone</label>
	<input type="tel" 
        name="tel_2" 
        value="" 
		id="tel_2" 
        pattern="\d{2}-\d{2}-\d{2}-\d{2}-\d{2}" 
		placeholder="XX-XX-XX-XX-XX" 
        required >
	<br />
 
	<label>file</label>
	<input type="file" value="" name="file_2" id="file_2" />
	<br />
 
	<label>color</label>
	<input type="color" value="#80A0F0" name="color_2" id="color_2" />
	<br />
 
 
	<br />
 
	<label> &nbsp; </label>
	<input type="submit" value="Submit" >
    &nbsp&nbsp;
    <button onclick="return _input2();">View</button>
 
</form>

Attention : si on définit un onclick pour le bouton Submit, la validation du téléphone ne fonctionnera pas.






<< Réseau         CSS>>