Les listes
Les listes en HTML et création d'un menu de navigation
Notions théoriques
Les listes sont un outil essentiel pour organiser l'information sur une page Web.
En HTML, nous avons 2 types principaux de listes :
- les listes à puces
<ul>, - et les listes ordonnées
<ol>.
Liste à puces
Dans une liste à puces <ul>, chaque élément de la liste est marqué par un point <li> :
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>
- Premier élément
- Deuxième élément
- Troisième élément
Liste ordonnée
Dans une liste ordonnée <ol>, chaque élément est numéroté <li> :
<ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol>
- Premier élément
- Deuxième élément
- Troisième élément
astuce
Un menu de navigation est généralement une liste de liens vers les principales sections d'un site. Il est souvent créé en utilisant une liste à puces avec des liens.
Exemple pratique
Supposons que vous voulez ajouter un menu de navigation à votre site sur votre jeu vidéo préféré. Vous pouvez le faire avec une liste et des liens.
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="histoire.html">Histoire du jeu</a></li>
<li><a href="personnages.html">Personnages</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
Les balises à connaître
<ol>: Crée une liste ordonnée (ordered list).<ul>: Crée une liste à puces (unordered list).<li>: Définit un élément de liste (list item).
Test de mémorisation/compréhension
TP pour réfléchir et résoudre des problèmes
Pour ce TP, vous allez créer un menu de navigation pour votre site sur votre jeu vidéo préféré.
Le menu doit contenir des liens vers les principales sections de votre site.
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="histoire.html">Histoire du jeu</a></li>
<li><a href="personnages.html">Personnages</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
Une solution
Dans index.html :
<!DOCTYPE html>
<html>
<head>
<title>Accueil</title>
<style>
...
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
}
li a {
color: #e85d04;
text-decoration: none;
font-size: 1.2em;
}
li a:hover {
color: #e85d04;
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="histoire.html">Histoire du jeu</a></li>
<li><a href="personnages.html">Personnages</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<h1 class="titre-jeu">The Legend of Zelda: Breath of the Wild</h1>
</header>
...
<img src="images/zelda-cover.jpg" alt="Couverture de The Legend of Zelda" width="300" height="400">
<p><a href="contact.html">Contactez-moi</a> si vous voulez discuter de ce jeu fantastique !</p>
</body>
</html>
Dans histoire.html :
<div class="container">
<h1 class="titre-jeu">The Legend of Zelda</h1>
<img src="images/zelda-cover.jpg" alt="Couverture de The Legend of Zelda" width="400" height="225">
<section>
<h2>Histoire</h2>
<p>
The Legend of Zelda est une série de jeux vidéo d'action-aventure produite par Nintendo et créée par les concepteurs de jeux Shigeru Miyamoto et Takashi Tezuka. Apparu pour la première fois en 1986, The Legend of Zelda raconte l'histoire de Link, un jeune héros de la terre d'Hyrule chargé de sauver la Princesse Zelda et de combattre le maléfique Ganon.
</p>
</section>
<section>
<h2>Jeux</h2>
<table>
<tr>
<th>Titre</th>
<th>Date de sortie</th>
</tr>
<tr>
<td>The Legend of Zelda</td>
<td>1986</td>
</tr>
<tr>
<td>Zelda II: The Adventure of Link</td>
<td>1987</td>
</tr>
<!-- Continuez à ajouter des lignes pour chaque jeu -->
</table>
</section>
<footer>
<p><a href="contact.html">Contactez-moi</a> si vous voulez discuter de ce jeu fantastique !</p>
<p>© 2023 The Legend of Zelda</p>
</footer>
</div>
Dans personnages.html :
<div class="container">
<h1 class="titre-jeu">Personnages de The Legend of Zelda</h1>
<section>
<h2>Link</h2>
<p>
Link est le protagoniste principal de The Legend of Zelda. Il est souvent représenté en train de porter une tunique verte et un bonnet pointu. Link est un héros courageux et déterminé qui est souvent chargé de sauver la Princesse Zelda et Hyrule du maléfique Ganon.
</p>
</section>
<section>
<h2>Zelda</h2>
<p>
La Princesse Zelda est le personnage éponyme de The Legend of Zelda. Elle est souvent enlevée par Ganon, bien qu'elle soit également une puissante magicienne. Dans certaines histoires, elle se déguise en une guerrière appelée Sheik.
</p>
</section>
<section>
<h2>Ganon</h2>
<p>
Ganon, également connu sous le nom de Ganondorf, est l'antagoniste principal de The Legend of Zelda. Il est un puissant sorcier qui cherche à s'emparer de la Triforce pour dominer Hyrule.
</p>
</section>
<footer>
<p><a href="contact.html">Contactez-moi</a> si vous voulez discuter de ce jeu fantastique !</p>
<p>© 2023 The Legend of Zelda</p>
</footer>
</div>
Dans contact.html :
<div class="container">
<img src="images/zelda-cover.jpg" alt="Couverture de The Legend of Zelda" width="800" height="450">
<h1>Contact</h1>
<p>Vous pouvez me joindre à cette adresse email : monemail@example.com</p>
</div>