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ée
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 numérotée
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 numérotée commençant à 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, créez 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
Solution HTML :
<ul>
    <li>Ligne 1
        <ul>
            <li>Ligne 1.1</li>
            <li>Ligne 1.2</li>
            <li>Ligne 1.3</li>
        </ul>
    </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>

À la suite du contenu de la page2.html, ajoutez la liste imbriquée suivante :

Listes divers imbriquées
Solution HTML :
<ol>
    <li>Ligne 1
        <ul>
            <li>Ligne 1.1
                <ul>
                    <li>Ligne 1.1.1</li>
                    <li>Ligne 1.1.2</li>
                    <li>Ligne 1.1.3</li>
                </ul>
            </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>
    </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>

Sauf mention contraire*, l'article Les listes en HTML [HTML07] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

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
Commentaires en ligne
Afficher tous les commentaires