Ajouter un menu

• But du cours
• Web et standards
• Fondamentaux

• Première page en XHTML
• Organiser le contenu
• Contenu dans notre page
• Ajouter un menu
• Ajouter un formulaire

• Première feuille de style
• Les sélecteurs
• Les unités
• Typographie
• Zones principales
• Taille des boites
• Positionnement
• Mise en forme du menu
• Images d'arrière plan

On va maintenant ajouter un menu de navigation dans notre site (certes encore rudimentaire). La place et l'apparence du menu seront réglables en utilisant CSS. On pourra ainsi faire un menu vertical comme celui de gauche ou un menu horizontal comme celui qui est en haut à de cette page. Mais interessons nous à la manière de coder un menu en XHTML

Un menu : une simple liste de liens

D'un point de vue sémantique, un menu n'est rien qu'une liste de lien. On va donc utiliser les balises XHTML qui identifient les éléments d'une liste, et la balise de lien

Des liens avant tout !

Tout d'abord, traitons le cas des liens : on utilise la balise a. L'exemple du dessous montre comment se servir de cette balise

<a href="http://www.google.fr">Lien vers Google</a>

Résultat :

Lien vers Google

Quelques remarques :

• L'atttribut obligatoire href renseigne l'URI de la cible du lien. L'adresse peut être :
  • Absolue : par exemple "http://www.google.fr". Ne pas oublier http://
  • Relative : par exemple "../page2.html" qui désigne le document page2.html dans le répertoire parent
  • Un lien vers une adresse mail : "mailto:toto@nullpart.earth" : le meilleur moyen de recevoir du spam...
• <a> est une balise de type en ligne
• L'apparence des liens est personalisable via CSS (couleur, police, surlignage, soulignement ..) : pas besoin d'ajouter du code

Créer une liste

Il existe plusieurs types de listes, mais celui qui est le plus adapté dans ce cas est aussi celui qui est le plus utilisé : la liste ordonnée non numérotée

Démonstration par l'exemple :

<ul>
    <li> Element 1</li>
    <li> Element 2</li>
    <li> Element 3</li>
    <li> Element 1</li>
</ul>

Résultat :

• Element 1
• Element 2
• Element 3
• Element 1

Donner un titre au menu

Lorsqu'on veut ajouter un titre à notre menu, on peut utiliser alors un autre type de listes : les listes de définition.

Exemple :

<dl>
	<dt>Mes liens préférés</dt>
	<dd><a href='http://webghusse.free.fr'>Lien 1</a></dd>
	<dd><a href='http://ghusse.free.fr'>Lien 2</a></dd>
</dl>

Exercice

Ajouter un menu à 5 éléments dans la page précedemment créée pour que votre page ressemble à ça : Résultat de l'ajout
Session 2 : Fichier à obtenir
Je vous vois venir vous : ne regardez pas le code source !!!!!