HTML - Listes non ordonnées

Salut à toi, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le merveilleux monde des listes non ordonnées en HTML. En tant que votre professeur d'informatique du coin, je suis excité de vous guider dans cette aventure. Faites-moi confiance, à la fin de ce tutoriel, vous serez capable de créer des listes comme un pro !

HTML - Unordered Lists

Qu'est-ce qu'une liste non ordonnée ?

Avant de nous lancer dans le code, comprenons ce qu'est une liste non ordonnée. En HTML, une liste non ordonnée est une collection d'items liés qui n'ont pas un ordre particulier. Pensez à une liste de courses - vous n'avez pas nécessairement besoin d'acheter du pain avant le lait, ou des pommes avant les bananes. L'ordre n'a pas d'importance, mais ils font tous partie de la même liste.

En HTML, nous créons des listes non ordonnées en utilisant la balise <ul>, et chaque item de la liste est entouré par des balises <li>. Jetons un coup d'œil à un exemple simple :

<ul>
<li>Pommes</li>
<li>Bananes</li>
<li>Oranges</li>
</ul>

Ce code se rendra comme ceci :

Pommes
Bananes
Oranges

Voyez comme c'est simple ? Le navigateur ajoute automatiquement des puces à chaque item. Mais que faire si vous voulez changer ces puces ? Et bien, c'est là que notre prochaîne section entre en jeu !

Liste non ordonnée HTML - Choisir le marqueur d'item de liste

Maintenant, rendons les choses un peu plus intéressantes. HTML nous permet de changer le style de nos puces, ou comme on les appelle dans le jargon, "marqueurs d'item de liste". Nous avons trois options principales :

disc (par défaut)
circle
square

Pour changer le marqueur, nous utilisons l'attribut type dans la balise <ul>. Voyons comment cela fonctionne :

<ul type="disc">
<li>Cette liste utilise le marqueur disc par défaut</li>
</ul>

<ul type="circle">
<li>Cette liste utilise un marqueur cercle</li>
</ul>

<ul type="square">
<li>Cette liste utilise un marqueur carré</li>
</ul>

Ce code se rendra comme ceci :

• Cette liste utilise le marqueur disc par défaut

○ Cette liste utilise un marqueur cercle

■ Cette liste utilise un marqueur carré

Cool, n'est-ce pas ? C'est comme donner à votre liste un mini-relooking !

Exemples de liste non ordonnée

Maintenant que nous avons les bases, regardons quelques exemples plus complexes. Souvenez-vous, la pratique rend parfait, alors n'hésitez pas à copier ces exemples et à les essayer vous-même !

Listes non ordonnées imbriquées

Parfois, vous pourriez vouloir créer une liste à l'intérieur d'une autre liste. Nous appelons cela une liste imbriquée. Voici comment vous pouvez le faire :

<ul>
<li>Café</li>
<li>Thé
<ul>
<li>Thé noir</li>
<li>Thé vert</li>
<li>Thé à base de plantes</li>
</ul>
</li>
<li>Lait</li>
</ul>

Cela se rendra comme ceci :

Café
Thé
Thé noir
Thé vert
Thé à base de plantes
Lait

Notez comment la liste imbriquée est indentée ? C'est la manière dont HTML montre que ces items sont des sous-catégories de "Thé".

Liste non ordonnée avec des liens

Les listes ne sont pas seulement pour du texte simple. Vous pouvez inclure d'autres éléments HTML à l'intérieur de vos items de liste. Par exemple, créons une liste de sites web favoris :

<ul>
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.wikipedia.org">Wikipedia</a></li>
<li><a href="https://www.github.com">GitHub</a></li>
</ul>

Cela créera une liste clickable de sites web :

Liste non ordonnée avec des images

Allons encore plus loin et ajoutons des images à notre liste :

<ul>
<li><img src="apple.jpg" alt="Apple"> Pomme</li>
<li><img src="banana.jpg" alt="Banana"> Banane</li>
<li><img src="orange.jpg" alt="Orange"> Orange</li>
</ul>

Ce code affichera une liste avec de petites images à côté de chaque nom de fruit. C'est une excellente façon de rendre vos listes plus visuellement attractives !

Résumé des méthodes de liste non ordonnée

Voici un tableau pratique résumant les méthodes que nous avons apprises pour créer et personnaliser des listes non ordonnées :

Méthode	Syntaxe	Description
Liste non ordonnée de base	`<ul><li>Item</li></ul>`	Crée une liste non ordonnée de base
Changer le marqueur de liste	`<ul type="circle">`	Change le style du marqueur d'item de liste
Liste imbriquée	`<ul><li><ul><li>Item imbriqué</li></ul></li></ul>`	Crée une liste à l'intérieur d'une liste
Liste avec des liens	`<ul><li><a href="url">Lien</a></li></ul>`	Crée une liste de liens cliquables
Liste avec des images	`<ul><li><img src="image.jpg"> Item</li></ul>`	Ajoute des images aux items de la liste

Et voilà, les amis ! Vous êtes maintenant bien équipés pour créer et personnaliser des listes non ordonnées en HTML. Souvenez-vous, la clé pour maîtriser ces compétences est la pratique. Alors, continuez à expérimenter avec ces exemples et n'ayez pas peur de faire preuve de créativité !

Pour conclure, je suis rappelé d'une petite blague de codage : Pourquoi le développeur a-t-il démissionné ? Parce qu'il ne obtenait pas de tableaux ! ? Ne vous inquiétez pas, nous en parlerons un autre jour. Pour l'instant, continuez à lister et à coder !

Credits: Image by storyset

Tutoriel précédent:

HTML - Listes

Tutoriel suivant:

HTML - Listes ordonnées