IUT de Bobigny 2015-2016 Licence CIWM-I TD n 3 Conception de Pages Web orientée Client Table des matières 1 En route vers HTML 5 et CSS3 1 1.1 La structure d un document HTML 5.................... 2 1.2 Les nouvelles balises de structure en HTML 5............... 2 1.3 Les background multiples en CSS3..................... 3 1.4 Transformer un document XHTML en HTML 5.............. 3 2 Les tableaux en (X)HTML 4 2.1 Construire un tableau............................ 4 2.2 Les regroupements de contenu........................ 5 2.3 Fusionner des lignes et des colonnes d un tableau............. 5 2.4 Exercice.................................... 6 3 Les sélecteurs en CSS 6 3.1 CSS Niveau 1................................. 6 3.2 CSS Niveau 2................................. 7 3.2.1 Le sélecteur universel......................... 7 3.2.2 Les sélecteurs d enfant........................ 7 3.2.3 Le sélecteur d éléments frères adjacents............... 7 3.2.4 Les sélecteurs d attribut....................... 8 3.2.5 Les pseudo-classes.......................... 8 3.2.6 Les pseudo-éléments......................... 9 3.3 CSS Niveau 3................................. 9 3.3.1 Le sélecteur général d éléments frères................ 10 3.3.2 Les sélecteurs d attribut....................... 10 3.3.3 Les pseudo-classes.......................... 10 3.3.4 Exercices............................... 11 1 En route vers HTML 5 et CSS3 Comme vous avez pu le constater dans l exercice 3 du document précédent, la réalisation d un design complexe n est pas forcément évidente. Que ce soit pour le positionnement des différents éléments ou pour la mise en place d images de fond, il est nécessaire d avoir recours à l élément div à de nombreuses reprises. Il arrive même que sa présence dans le document soit inutile pour la structuration du contenu et qu elle soit uniquement motivée par des besoins de mise en forme. 1
Nous allons voir maintenant que le langage HTML 5 et certaines propriétés de CSS3 permettent de remédier en partie à ce constat. 1.1 La structure d un document HTML 5 La déclaration du DOCTYPE est extrêmement simplifiée : <!DOCTYPE html> Vous remarquerez que cette déclaration ne fait référence à aucun numéro de version. Autrement dit, vous ne précisez pas que vous faites du HTML 5 mais que votre document intègre les dernières évolutions du langage. La déclaration de l encodage dans l en-tête du document à l aide de l élément meta est également largement simplifiée. Par exemple, pour déclarer que votre fichier source est encodé en UTF8, vous écrirez : <meta charset="utf-8"> Il n est plus obligatoire de donner la valeur "text/css" à l attribut type de l élément link pour faire référence à une feuille de style externe. On écrit : <link rel="stylesheet" href="monfichier.css"> Voici à quoi ressemble le squelette d un document HTML 5 : <!DOCTYPE html> <html lang="fr"> <head> <title>mon titre</title> <meta charset="utf-8"> <link rel="stylesheet" href="monfichier.css"> </head> <body> </body> </html> 1.2 Les nouvelles balises de structure en HTML 5 L utilisation presque abusive de l élément div a entraîné l introduction de nouvelles balises pour structurer son document, chacune d entre elles possédant une sémantique bien particulière et parfois très subtile. L élément section représente un bloc dont le contenu aborde la même thématique. Il représente un bloc autonome de contenu. Un document peut contenir une ou plusieurs sections, chacune pouvant contenir des titres, des paragraphes etc. L élément article désigne un bloc de contenu potentiellement autonome dans le sens où ce contenu peut être repris ou réutilisé seul. Il convient donc parfaitement pour une brève d un flux RSS, un billet de blog etc. 2
L élément header, comme son nom l indique, permet de regrouper les éléments d entête d un document ou d une partie d un document. Une section ou un article peuvent chacun contenir un élément header. C est un bloc de contenu spécifique, alors que section reste un bloc de contenu générique. Comme header, l élément footer peut apparaître à divers endroits d un document. Son utilisation n est pas exclusivement réservée à contenir les informations d un pied de page, il peut apparaître dans une section ou un article. Son rôle est de regrouper les informations concernant l auteur, les mentions légales, les liens vers des contenus apparentés, etc. C est un bloc de contenu spécifique. L élément aside doit être utilisé pour du contenu indirectement apparenté. Il peut, par exemple, permettre de faire des encadrés, des citations, un bloc d archives relatives au contenu précédent etc. L élément nav a pour rôle de regrouper des informations de navigations, donc des liens, qu ils soient internes ou externes à la page. Il convient d utiliser nav pour des informations de navigations jugées comme majeures ou suffisamment pertinentes. 1.3 Les background multiples en CSS3 Parmi les nombreuses améliorations et nouveautés apportées par CSS3 figure la possibilité de définir plusieurs images de fond à un même élément de la page. Cela évite d avoir recours à la superposition de plusieurs éléments (en particulier des div) pour simuler la présence simultanée de plusieurs images de fond sur un même élément. Pour cela, on utilise les mêmes propriétés qu en CSS2 mais il est maintenant possible de définir plusieurs valeurs, séparées par une virgule, chacune de ces valeurs s appliquant à une des images de fond. L ordre de déclaration de ces valeurs est donc très important. Par exemple, si l on veut que la boîte d un élément p dispose d une image de fond dans le coin supérieur gauche et d une autre dans le coin inférieur droit, nous définirons les règles CSS suivantes : p { background-image : url("image1.png"), url("image2.png"); background-position : left top, right bottom; background-repeat : no-repeat; Vous noterez que, lorsqu une propriété est commune (ici no-repeat), il est inutile de la définir pour les deux images. 1.4 Transformer un document XHTML en HTML 5 Exercice 1: Vous allez maintenant transformer la page réalisée dans l exercice 3 du document 2 en utilisant HTML 5 et CSS3. 1. Modifier la structure du document de façon à ne conserver qu un seul élément div (id="page"), les autres étant remplacés par de nouvelles balises HTML 5 ou supprimés car devenus inutiles. 3
2. Modifier le CSS en conséquence 3. Le résultat final doit passer le test de validation HTML 5 du W3C. 2 Les tableaux en (X)HTML 2.1 Construire un tableau La création d un tableau commence par l élément table. Il a pour but de prévenir l ouverture d un tableau. Si l on ne va pas plus loin, rien ne sera affiché par le navigateur. L élément tr permet de créer une ligne de tableau. Pour ajouter des lignes, il suffit de répéter <tr>...</tr> autant de fois que nécessaire. L élément td régit la distribution des cellules à l intérieur d une ligne. On peut répéter cet élément autant de fois que nécessaire à l intérieur de l élément tr. Voici un exemple de tableau à 3 lignes contenant chacune 3 cellules : <table> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr> </table> Si vous testez ce code, vous verrez que votre navigateur n affiche sans doute pas les bordures. CSS va s en charger à l aide des propriétés destinées à gérer les bordures. Les possibilités de personnalisation du tableau sont immenses (largeur, hauteur des cellules, style des caractères, couleur ou image de fond etc...) Il existe également des propriétés CSS destinées uniquement aux tableaux car l on peut choisir de faire fusionner les bordures des cellules ou non. On utilise alors la propriété border-collapse. Les valeurs possibles sont separate ou collapse. Dans le cas où les bordures sont séparées, on peut définir leur espacement à l aide de la propriété border-spacing qui prend une longueur comme valeur. Retournons maintenant du côté du XHTML car on peut aller encore plus loin dans la structuration de notre tableau : Un en-tête de tableau (élément th) affiche un titre en tête d une ligne ou d une colonne. Il s utilise de la même manière que l élément td. Exemple : <table> <tr><th>première ligne</th><td>1</td><td>2</td><td>3</td></tr> <tr><th>deuxième ligne</th><td>4</td><td>5</td><td>6</td></tr> <tr><th>troisième ligne</th><td>7</td><td>8</td><td>9</td></tr> </table> Le tableau peut-être pourvu d un titre global au moyen de l élément caption : <table> <caption>un exemple de tableau</caption> <tr><th>première ligne</th><td>1</td><td>2</td><td>3</td></tr> <tr><th>deuxième ligne</th><td>4</td><td>5</td><td>6</td></tr> 4
<tr><th>troisième ligne</th><td>7</td><td>8</td><td>9</td></tr> </table> 2.2 Les regroupements de contenu Il est possible de faire des regroupements de lignes à l aide des éléments thead, tfoot et tbody. Cela permet de créer, lorque cela est nécessaire, un en-tête de tableau, un pied de tableau et un (ou plusieurs) corps de tableau. En fait, tout tableau devrait au moins comporter un tbody : <table> <caption>un exemple de tableau</caption> <thead> <tr><th>première ligne</th><td>1</td><td>2</td><td>3</td></tr> </thead> <tfoot> <tr><th>deuxième ligne</th><td>4</td><td>5</td><td>6</td></tr> </tfoot> <tbody> <tr><th>troisième ligne</th><td>7</td><td>8</td><td>9</td></tr> </tbody> </table> Je vous conseille fortement de regarder dans votre navigateur l effet que le code précédent va avoir sur l ordre des lignes. 2.3 Fusionner des lignes et des colonnes d un tableau Nous pouvons faire fusionner plusieurs lignes en une seule au moyen de l attribut rowspan de l élément td ou th : <table> <caption>un exemple de tableau</caption> <tr><th>première ligne</th><td rowspan="2">1 et 4</td><td>2</td><td>3</td></tr> <tr><th>deuxième ligne</th><td>5</td><td>6</td></tr> <tr><th>troisième ligne</th><td>7</td><td>8</td><td>9</td></tr> </table> De la même façon, nous pouvons réunir plusieurs colonnes en une seule au moyen de l attribut colspan de l élément td ou th : <table> <caption>un exemple de tableau</caption> <tr><th>première ligne</th><td colspan="2">1 et 2</td><td>3</td></tr> <tr><th>deuxième ligne</th><td>4</td><td>5</td><td>6</td></tr> <tr><th>troisième ligne</th><td>7</td><td>8</td><td>9</td></tr> </table> 5
2.4 Exercice Exercice 2: Récupérer l archive nommée seance3-exercice2.documents.zip. Elle contient les documents nécessaires à la réalisation de l exercice. Dans Firefox, vous devez obtenir un résultat identique à celui de l image exercice2.tableaux.png. La feuille de style exercice2.css est donnée et vous ne devez pas la modifier. Vous devez écrire le fichier exercice2.html conforme au résultat attendu et valide en XHTML Strict ou HTML5. 3 Les sélecteurs en CSS Parmi tous les modules qui composent la spécification CSS Level 3, l un des plus avancé est celui décrivant l utilisation des sélecteurs en CSS. À l heure actuelle, le document du W3C est au stade de Proposed Recommandation. Tous les navigateurs récents sont entièrement compatibles. Il est possible de tester la compatibilité d un navigateur avec la spécification du W3C à l URL suivante : http://www.css3.info/selectors-test/. Les différents niveaux de CSS se construisent comme des couches s ajoutant aux précédentes. Ainsi, CSS Niveau 3 est entièrement compatible avec les autres niveaux. Il ne fait qu ajouter des possibilités supplémentaires. Il existe néanmoins une petite exception. CSS Level 3 fait une distinction nouvelle entre les pseudo-classes préfixées par le caractère : (exemple : :hover ) et les pseudoéléments préfixés par les caractères :: (exemple : ::first-line ). Les pseudo-classes ciblent des éléments du document à partir d un contexte (clic de souris, survol de la souris etc.). Les éléments ciblés ne peuvent pas être identifiés avant certaines actions de l utilisateur sur le document. Les pseudo-éléments concernent des éléments parfaitement identifiables dans l arborescence du document. Ils ne dépendent pas d un contexte particulier. Néanmoins, dans un soucis de compatibilité, les pseudo-éléments déjà présents dans les niveaux précédents de CSS peuvent s écrire avec l ancienne syntaxe qui ne faisait pas cette distinction. (exemple : :first-line ). 3.1 CSS Niveau 1 La spécification CSS Level 1 fournissait assez peu de possibilités en matière de sélecteurs : Le sélecteur de type qui permet de sélectionner tous les éléments d un type donné dans un document (X)HTML à partir de leur nom de balise. Exemple : h1 {... Le sélecteur de classe qui permet de sélectionner des éléments à partir de la valeur de l attribut class. Dans le sélecteur, le nom de la classe doit être préfixé par le caractère. 6
Lesélecteur d IDquipermet desélectionner deséléments àpartirdelavaleurde l attribut id. Cette valeur ne doit être utilisée qu une seule fois dans le document (X)HTML. Dans le sélecteur, le nom de l ID doit être préfixé par le caractère # La combinaison d éléments descendants (descendant combinator). On utilise le caractère d espacement entre deux ou plusieurs sélecteurs simples. Par exemple, la combinaison A B sélectionne tout élément B descendant de l élément A dans l arborescence du document (X)HTML. Les pseudo-classes de lien :link, :active, :visited. Elles s adressent aux éléments a du document. Les pseudo-éléments ::first-line et ::first-letter qui permettent de sélectionner la première ligne ou le premier caractère du contenu d un élément du document. 3.2 CSS Niveau 2 La spécification CSS Level 2 ajoute beaucoup de possibilités en matière de sélecteurs. 3.2.1 Le sélecteur universel Signalons l apparition du sélecteur universel. Il est représenté par le caractère*. Utilisé seul, il permet de sélectionner tous les éléments du document. 3.2.2 Les sélecteurs d enfant Il est possible de sélectionner un élément E qui est un enfant d un élément F. La syntaxe est la suivante : E > F Dans l exemple suivant, on sélectionne tous les paragraphes qui sont des enfants de l élément body et on met le texte en gris. body > p { color : #666666; Les éléments p qui se trouveraient, par exemple, à l intérieur d un élément div ne sont pas concernés puisqu ils ne sont pas des enfants directs de l élément body. 3.2.3 Le sélecteur d éléments frères adjacents Les sélecteurs d enfants adjacents suivent une syntaxe de cette forme : E1 + E2 où E2 est le sujet du sélecteur. Celui-ci est vérifié quand E1 et E2 ont le même parent dans l arbre du document et quand E1 y précède immédiatement E2. L exemple suivant produit une réduction de l espace vertical entre un élément h1 et l élément h2 qui le suit juste après : h1 + h2 { margin-top : -5mm; 7
3.2.4 Les sélecteurs d attribut Les sélecteurs d attribut permettent de sélectionner des éléments à partir de leur attribut, de la valeur de cet attribut, ou seulement à partir d une partie de cette valeur. Il existe quatre syntaxes. Par exemple : Le sélecteur p[title] sélectionne tous les éléments possédant un attribut title quelle que soit sa valeur. De la même manière, le sélecteur p[title] sélectionne tous les éléments p possédant un attribut title. Le sélecteur p[title="information"] sélectionne tous les éléments p possédant un attribut title dont la valeur est "information". Le sélecteur p[title ="information"] sélectionne tous les éléments p possédant un attribut title dont la valeur contient au moins le mot "information" séparé des autres par des espaces. Le sélecteur p[title ="info"] sélectionne tous les éléments p possédant un attribut title dont la valeur est une chaîne commençant par les caractères info suivi du caractère -. Notons qu il est possible de cumuler plusieurs sélecteurs d attribut qui se réfèrent à plusieurs attributs d un même élément, ou même, plusieurs fois au même attribut. Par exemple : img[class="vignette"][alt="portrait"]{ border : 1px solid green; Cette règle aura pour effet d ajouter une bordure verte autour des éléments d image à condition que leur attribut class ait pour valeur "vignette" et que leur attribut alt ait pour valeur "portrait". 3.2.5 Les pseudo-classes La pseudo-classe :hover est appliquée lorsque l utilisateur survole la boîte produite par un élément au moyen de la souris sans l activer. L exemple suivant permet de changer l apparence du curseur de la souris au survol des liens (éléments a) : a:hover { cursor: crosshair; La pseudo-classe :focus s applique quand un élément reçoit l attention (celui-ci acceptant les événements du clavier ou d autres formes d entrées de texte). Selon la spécification, seuls les éléments (X)HTML acceptant l attribut tabindex sont concernés, c est-à-dire a, area, button, input, object, select et textarea. L exemple suivant permet aux éléments input de type text et password recevant le focus d avoir une couleur de fond rouge : input[type="text"]:focus, input[type="password"]:focus{ background-color : red; 8
Vous pouvez essayer la règle CSS précédente sur la mire de login réalisée dans l exercice 2 de ce document. La pseudo-classe :first-child permet de cibler le premier élément enfant au sein d un élément. Par exemple, li:first-child qualifie le premier élément li d une liste. ul li {border-top : 1px solid green; ul li:first-child {border-top : none; La pseudo-classe :lang() permet de cibler un élément dont la langue correspond à une certaine valeur indiquée entre parenthèses. Son utilisation possède un intérêt limité pour les sites monolingues. Signalons que la pseudo-classe :lang() hérite de la langue du parent ou de l ancêtre. Pour le code suivant : <div lang="fr"> <p> Du contenu... </p> </div> le sélecteur p:lang(fr) cible correctement l élément p contenu dans l élément div. 3.2.6 Les pseudo-éléments Les pseudo-éléments ::before et ::after permettent de générer du contenu au début ou à la fin de la boîte de contenu de l élément ciblé. Ils s utilisent conjointement à la propriété content qui peut prendre un certain nombre de valeurs dont : Toute chaîne de caractère placée entre guillemets. Une image via la syntaxe url("chemin de l image") La valeur d un attribut en utilisant la syntaxe attr(nom de l attribut). les valeurs open-quote (guillemets de citation ouvrants) et close-quote (guillemets de citation fermants). Exemple d utilisation : a:after { content : "(" attr(href) ")"; On peut compléter la règle précédente en utilisant des propriétés pour styler le contenu généré. Il existe de nombreuses autres valeurs possibles pour la propriété content. Vous pouvez vous référer à la traduction du document du W3C : http://www.yoyodesign.org/doc/w3c/css2/generate.html 3.3 CSS Niveau 3 9
3.3.1 Le sélecteur général d éléments frères Le sélecteur d éléments frères adjacents, dont la syntaxe est E + F, existe depuis le niveau 2 de CSS. Il cible l élément F directement adjacent à l élément frère E. Le sélecteur général d éléments frères élargit ce principe. En utilisant la syntaxe E F, il est maintenant possible de cibler un élément F toujours frère de E dans l arborescence du document mais les 2 éléments nesont plus forcément des frères directs. Ils ne sont plus dans l obligation de se suivre directement, d autres éléments frères peuvent s intercaler entre E et F. 3.3.2 Les sélecteurs d attribut Afin de faciliter le ciblage de certains éléments d un document, CSS Level 3 offre de nouvelles possibilités concernant les sélecteurs d attribut. [attribut^="toto"] permet de cibler les éléments dont l attribut attribut commence exactement par la chaîne "toto". [attribut$="toto"] permet de cibler les éléments dont l attribut attribut finit exactement par la chaîne "toto". [attribut*="toto"] permet de cibler les éléments dont l attribut attribut contient au moins une fois la sous-chaîne "toto". 3.3.3 Les pseudo-classes Les sélecteurs W3C introduisent la notion de pseudo-classes structurelles qui permettent la sélection d éléments sur la base d informations supplémentaires se trouvant dans l arborescence du document mais qui ne peuvent être ciblées par des sélecteurs plus simples. La pseudo-classe :root cible l élément racine du document. Son intérêt est extrêment limité en XHTML puisque cet élément racine est toujours html. Son utilisation devient intéressante dès lors que l on utilise le langage CSS pour styler un document écrit dans un autre dialecte XML. E:nth-child(n) s applique au nème enfant d un élément, s il est de type E. Autrement dit, l élément E doit posséder n-1 frères avant lui dans l arborescence du document. Les valeurs contenues dans les parenthèses peuvent-être : Un entier positif ou négatif, le premier enfant correspondant à la valeur 1. Une expression de la forme an+b où a et b sont des entiers. L entier n prendra toutes les valeurs à partir de zéro. Les valeurs particulières even et odd qui s appliqueront à tous les éléments pairs (even) ou impairs (odd). Notons que even aura le même effet que l expression 2n et odd aura le même effet que 2n+1. li:nth-child(2){... /* le 2ème enfant d une liste s il s agit d un li */ li:nth-child(even){... /* les li pairs */ li:nth-child(2n+3){... /* le 3ème, le 5ème, le 7ème etc. */ li:nth-child(-n+3){... /* les 3 premiers seulement */ E:nth-last-child(n) s applique au nème enfant d un élément, s il est de type E mais en commençant par le dernier. Autrement dit, l élément E doit posséder n-1 frères après lui dans l arborescence du document. Cette pseudo-classe accepte les 10
mêmes valeurs dans les parenthèses que :nth-child(). La pseudo-classe E:nth-of-type(n) cible le nème frère dans l arborecence du document du même type que lui. Contrairement à :nth-child(), cette pseudoclasse ne prend pas en compte tous les frères quels que soient leur type mais seulement les frères de type E. Les valeurs dans les parenthèses sont les mêmes que pour :nth-child(). E:nth-last-of-type(n) se comporte comme la pseudo-classe précédente mais la numérotation commence par la fin. L élément E ciblé doit donc posséder n-1 frères du même type après lui dans l arborescence du document. E:last-child cible le dernier frère de l élément E dans l arborecence du document. Cette pseudo-classe est donc équivalente à E:nth-last-child(1). :first-of-type ciblelepremier élément desontypeparmisesfrères.équivalente à E:nth-of-type(1). :last-of-type cible le dernier élément de son type parmi ses frères. Équivalente à E:nth-last-of-type(1). :only-child cible les éléments qui n ont aucun frère dans l arborescence du document. :only-of-type cible tous les éléments qui sont les seuls de leur type parmi leurs frères. E:empty cible un élément de type E qui n a aucun enfant, y compris du contenu textuel. Si votre page contient des ancres internes, c est-à-dire des éléments nommés par des attributs id, et des liens pointant vers ces éléments, alors la pseudo-classe :target désigne l élément ciblé par l ancre en question. Vous trouverez un exemple d utilisation de cette pseudo-classe dans l exercice 4. Les pseudo-classes :enabled, :disabled et :checked permettent de cibler des éléments d un formulaire selon leur contexte. La première pseudo-classe permet de cibler les éléments actifs d un formulaire, la deuxième les éléments inactifs et la dernière les éléments cochés. Pour finir, signalons la présence de la pseudo-classe de négation :not(s) qui cible un élément qui ne correspond pas au sélecteur simple s placé entre parenthèses. Par exemple, pour affecter une couleur de fond à tous les éléments d une liste sauf le premier, nous pouvons écrire : li:not(:first-child){ background-color : #CC9966; 3.3.4 Exercices Exercice 3: Dans l archive seance3-exercice3-documents.zip, vous trouverez un document XHTML avec 3 blocs contenant chacun un titre et un paragraphe. Sans toucher à ce 11
fichier, vous devez : 1. Fixer la largeur des blocs à 600px, affecter une bordure aux paragraphes, centrer le texte des titres et aligner les blocs les uns sous les autres à une distance de 250px du bord gauche de la page. 2. Placer le menu en position fixe dans l espace libre à gauche de la page. Que se passe-til lorqu on clique sur l un des items de ce menu? Affecter une couleur différente à chaque item du menu et attribuer la même couleur au titre correspondant et à la bordure du paragraphe correspondant. 3. Modifier la feuille CSS de manière à ce que les 3 paragraphes disparaissent du flux du document. 4. Lorsque vous cliquez maintenant sur l un des items du menu, seul le paragraphe correspondant doit s afficher dans votre page. Exercice 4: Vous devez récupérer l archive seance3-exercice4-documents.zip et obtenir le résultat correspondant à la capture d écran fournie (obtenue sous FF3.6) sans modifier le fichier (X)HTML donné. Pour information, l attribut hreflang de l élément a permet de préciser la langue du document pointé par l attribut href. Exercice 5: L archive seance3-exercice5-documents.zip contient le code d un tableau XHTML. Il vous est demandé de réaliser la présentation visible dans le sous-répertoire capture en minimisant le nombre de règles CSS à écrire et en ne modifiant pas le fichier XHTML. Exercice 6: Vous devez récupérer l archive seance3-exercice6-documents.zip et obtenir le résultat correspondant à la capture d écran fournie (obtenue sous FF3.6) toujours sans modifier le fichier (X)HTML donné. De plus : Le menu doit être centré sur la page. Aucune bordure ne doit faire plus de 1px d épaisseur. L ajout ou le retrait d un menu dans le fichier XHTML ne doit pas affecter la mise en forme du menu. L ajout ou le retrait d un sous-menu dans le fichier XHTML ne doit pas affecter la mise en forme générale et la présence de l image de la flèche doit rester conditionnée à l existence d au moins un sous-menu. On doit pouvoir changer l ordre des menus dans le fichier XHTML. La mise en forme doit rester cohérente et continuer à respecter les consignes précédentes. 12