Travaux pratiques
TROISIÈME PARTIE
160
tableaux, de langages comme JavaScript ou de plug-ins comme Flash. On peut
l’organiser sous forme de liste d’entrées disposées en colonne (menu vertical) ou
d’éléments placés à la suite les uns des autres (menu horizontal). Ses briques élémentaires seront de simples liens, des puces décoratives, ou des boutons cliquables.
L’emploi de CSS pour la mise en forme de menus produira un code simple et concis,
dont il sera facile de modifier l’apparence sans intervenir sur la structure ou le contenu de la partie HTML.
Utilisation de listes non ordonnées
Un menu est évidemment constitué de liens hypertextes, pointant vers d’autres pages
web du site ou vers des parties spécifiques d’une page web. Comme précédemment,
on adoptera un codage reflétant cette sémantique et ne tenant pas compte de la
représentation recherchée.
Une telle structure sera donc traduite en HTML sous forme de liste, ordonnée
(
TROISIÈME PARTIE
160
tableaux, de langages comme JavaScript ou de plug-ins comme Flash. On peut
l’organiser sous forme de liste d’entrées disposées en colonne (menu vertical) ou
d’éléments placés à la suite les uns des autres (menu horizontal). Ses briques élémentaires seront de simples liens, des puces décoratives, ou des boutons cliquables.
L’emploi de CSS pour la mise en forme de menus produira un code simple et concis,
dont il sera facile de modifier l’apparence sans intervenir sur la structure ou le contenu de la partie HTML.
Utilisation de listes non ordonnées
Un menu est évidemment constitué de liens hypertextes, pointant vers d’autres pages
web du site ou vers des parties spécifiques d’une page web. Comme précédemment,
on adoptera un codage reflétant cette sémantique et ne tenant pas compte de la
représentation recherchée.
Une telle structure sera donc traduite en HTML sous forme de liste, ordonnée
(
- ) ou, le plus souvent, non ordonnée (
- ). Même sur les navigateurs en mode
texte et autres programmes incapables d’interpréter le CSS (ou dont l’utilisateur a
choisi de désactiver cette fonctionnalité), un menu programmé sous forme de liste
apparaîtra clairement.
Reprendre le même code HTML tout au long du chapitre mettra mieux en évidence
le rôle et l’influence des feuilles de styles CSS qui lui seront associées. C’est le menu
suivant que nous mettrons en forme de diverses manières :
Il s’agit, comme annoncé, d’une simple liste d’éléments. Tous sont des liens hypertextes (élément ) ; l’identifiant menu distingue ce menu de navigation des éventuelles autres listes de la page web. Sans mise en forme particulière, ce menu de navigation apparaîtra tel qu’en figure 12-1.
La présentation par défaut n’est guère amène : des puces rondes préfixent les éléments de menu ; les liens sont bleus, soulignés, et d’un aspect très sobre. Des feuilles
de styles habilleront ce code de base pour produire un résultat bien plus plaisant.
HTML