Les listes en HTML HTML07

Cet exercice consiste à créer et à personnaliser des listes à puces ou des listes numérotées en HTML.

Consignes de l’exercice

Créez un nouveau dossier racine nommé html07-racine afin de stocker les fichiers de l’exercice.

Créez une nouvelle page HTML sous le nom page1.html en prenant soin de bien placer votre fichier dans le dossier racine créé précédemment.

Saisissez la structure de base suivante dans la page que vous venez de créer :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Titre de la page</title>
	</head>
	<body>
	</body>
</html>

Modifiez la page page1.html pour lui ajouter la liste à puce suivante :

Liste non ordonnées de trois lignes
Solution HTML :
<ul>
    <li>Ligne 1</li>
    <li>Ligne 2</li>
    <li>Ligne 2</li>
</ul>

À la suite du contenu de la page1.html, ajoutez la liste numérotée suivante :

Liste ordonnées (numérotées) de trois lignes
Solution HTML :
<ol>
    <li>Ligne 1</li>
    <li>Ligne 2</li>
    <li>Ligne 2</li>
</ol>

À la suite du contenu de la page1.html, ajoutez la liste numérotée suivante :

Liste ordonnées (numérotées) de trois lignes démarrant à 36
Solution HTML :
<ol start="36">
    <li>Ligne 1</li>
    <li>Ligne 2</li>
    <li>Ligne 2</li>
</ol>

Créez une nouvelle page html avec le nom page2.html.

Modifiez le fichier page2.html afin de créer la liste imbriquée ci-dessous. Ne vous préoccupez pas de l’aspect visuel des puces (point noir, cercle blanc, carré, etc.) qui peut varier.

Listes non ordonnées imbriquées
Aide :

Pensez bien que chaque niveau correspond à une liste séparée. Vous devez donc créer trois listes : une liste principale et deux sous-listes.

Notez également que les sous-listes doivent être placées complétement à l’intérieur des boîtes <li></li> correspond au niveau supérieur.

Listes non ordonnées imbriquées avec des couleurs
Solution HTML :
<!-- Début de la liste principale -->
<ul>
    <li>Ligne 1
        <!-- Début de la première sous-liste -->
        <ul>
            <li>Ligne 1.1</li>
            <li>Ligne 1.2</li>
            <li>Ligne 1.3</li>
        </ul>
        <!-- Fin de la première sous-liste -->
    </li>
    <li>Ligne 2</li>
    <li>Ligne 3 
        <ul>
            <li>Ligne 3.1</li>
            <li>Ligne 3.2</li>
            <li>Ligne 3.3</li>
        </ul>
    </li>
</ul>
<!-- Fin de la liste principale -->

À la suite du contenu de la page2.html, ajoutez la liste imbriquée ci-dessous. Notez bien qu’il s’agit d’imbriquer des listes numérotées et des listes à puce.

Aide :

Voici une version colorée de la liste permettant de bien mettre en valeur les différents niveaux de liste. Les premières lignes sont représentées par les cadres de couleur.

Solution HTML :
<!-- Début de la liste principale de niveau 1-->
<ol>
    <li>Ligne 1
        <!-- Début de la première liste de niveau 2 -->
        <ul>
            <li>Ligne 1.1
                <!-- Début de la première liste de niveau 3 -->
                <ul>
                    <li>Ligne 1.1.1</li>
                    <li>Ligne 1.1.2</li>
                    <li>Ligne 1.1.3</li>
                </ul>
                <!-- Fin de la première liste de niveau 3 -->
            </li>
            <li>Ligne 1.2</li>
            <li>Ligne 1.3
                <ul>
                    <li>Ligne 1.3.1</li>
                    <li>Ligne 1.3.2</li>
                </ul>
            </li>
        </ul>
        <!-- Fin de la première liste de niveau 2 -->
    </li>
    <li>Ligne 2</li>
    <li>Ligne 3 
        <ul>
            <li>Ligne 3.1</li>
            <li>Ligne 3.2
                <ul>
                    <li>Ligne 3.2.1</li>
                    <li>Ligne 3.2.2</li>
                    <li>Ligne 3.2.3</li>
                </ul>
            </li>
            <li>Ligne 3.3</li>
        </ul>
    </li>
</ol>
<!-- Fin de la liste principale de niveau 1 -->
S’abonner
Notification pour
guest

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

0 Commentaires
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires