### Imbrication de listes

Les listes peuvent être imbriquées : les lignes d'une liste contiennent à leur tout une liste qui éventuellement contiennent à leur tour une liste qui etc.
N'importe quel type de liste peut contenir n'importe quel autre type.

Exemple : imbrication de listes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Imbrication de listes</title> </head> <body> <p>Tutoriel HTML</p> <ul> <li>Document et en-tête <ul> <li>Doctype</li> <li>Eléments d'en-tête</li> </ul> </li> <li>Structure <ul> <li>Page type</li> <li>Eléments de structure</li> <li>Exemples et exercices</li> </ul> </li> <li>Groupe <ul> <li>Paragraphe</li> <li>div</li> <li>Les listes <ul> <li>Liste non ordonnée</li> <li>Liste ordonnée</li> <li>Liste de définitions</li> <li>Imbrication de listes</li> <li>Tableaux</li> </ul> </li> </ul> </li> <li>Embarqué</li> <li>Texte</li> <li>Formulaire</li> </ul> </body> </html>

### Listes imbriquées ordonnées

listes imbriquées ordonnées - page à obtenir

Reprenez l'exemple précédent et changez les listes en listes ordonnées pour obtenir le résultat ci-contre :

- les items de premier niveaux sont numérotés A, B, C, etc
- les items de deuxième niveaux sont numérotés 1, 2, 3, etc
- les items de troisième niveaux sont numérotés a, b, c, etc

Code à compléter

Exercice : listes imbriquées ordonnées
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Imbrication de listes</title> </head> <body> <p>Tutoriel HTML</p> <ul> <li>Document et en-tête <ul> <li>Doctype</li> <li>Eléments d'en-tête</li> </ul> </li> <li>Structure <ul> <li>Page type</li> <li>Eléments de structure</li> <li>Exemples et exercices</li> </ul> </li> <li>Groupe <ul> <li>Paragraphe</li> <li>div</li> <li>Les listes <ul> <li>Liste non ordonnée</li> <li>Liste ordonnée</li> <li>Liste de définitions</li> <li>Imbrication de listes</li> <li>Tableaux</li> </ul> </li> </ul> </li> <li>Embarqué</li> <li>Texte</li> <li>Formulaire</li> </ul> </body> </html>

Une solution possible

Exercice : listes imbriquées ordonnées
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Imbrication de listes</title> </head> <body> <p>Tutoriel HTML</p> <ol type="A"> <li>Document et en-tête <ol type="1"> <li>Doctype</li> <li>Eléments d'en-tête</li> </ol> </li> <li>Structure <ol type="1"> <li>Page type</li> <li>Eléments de structure</li> <li>Exemples et exercices</li> </ol> </li> <li>Groupe <ol type="1"> <li>Paragraphe</li> <li>div</li> <li>Les listes <ol type="a"> <li>Liste non ordonnée</li> <li>Liste ordonnée</li> <li>Liste de définitions</li> <li>Imbrication de listes</li> <li>Tableaux</li> </ol> </li> </ol> </li> <li>Embarqué</li> <li>Texte</li> <li>Formulaire</li> </ol> </body> </html>

### Listes de liens

Réalisez des listes de liens pour obtenir le résultat ci-contre. Les pages sur lesquelles pointent les liens se trouvent dans l'arborescence suivante : arborescence de l'exercice Les pages HTML concernant "Le Seigneur des Anneaux" se trouvent dans le dossier `lord_rings`. Les pages HTML concernant "La Guerre des Etoiles" se trouvent dans le dossier `star_wars`. Les pages s'appellent du nom du personnage, tout en minuscules, et les espaces éventuels remplacés par un _ (underscore). L'extension du fichier est `.html` | listes de liens - page à obtenir
Les images s'appellent toutes deux `logo_petit.png` et se trouvent dans les dossiers `images` correspondants.

Code à compléter

Exercice : listes de liens
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Listes de liens</title> </head> <body> <h3>Anneaux ou Etoiles ?</h3> </body> </html>

Une solution possible

Exercice : listes de liens
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Listes de liens</title> </head> <body> <h3>Anneaux ou Etoiles ?</h3> <ol> <li><img src="../exemples/lord_rings/images/logo_petit.png"> <ul> <li>Les gentils <ol> <li><a href="../exemples/lord_rings/gandalf.html">Gandalf</a></li> <li><a href="../exemples/lord_rings/frodon.html">Frodon</a></li> <li><a href="../exemples/lord_rings/gimli.html">Gimli</a></li> </ol> </li> <li>Les méchants <ol> <li><a href="../exemples/lord_rings/sauron.html">Sauron</a></li> <li><a href="../exemples/lord_rings/saroumane.html">Saroumane</a></li> <li><a href="../exemples/lord_rings/gollum.html">Gollum</a></li> </ol> </li> </ul> </li> <li><img src="../exemples/star_wars/images/logo_petit.png"> <ul> <li>Les gentils <ol> <li><a href="../exemples/star_wars/yoda.html">Yoda</a></li> <li><a href="../exemples/star_wars/luke_skywalker.html">Luke Skywalker</a></li> <li><a href="../exemples/star_wars/chewbacca.html">Chewbacca</a></li> </ol> </li> <li>Les méchants <ol> <li><a href="../exemples/star_wars/palpatine.html">Palpatine</a></li> <li><a href="../exemples/star_wars/dark_vador.html">Dark Vador</a></li> <li><a href="../exemples/star_wars/comte_dooku.html">Comte Dooku</a></li> </ol> </li> </ul> </li> </ol> </body> </html>