Une solution
La seule "difficulté" est d'imbriquer correctement les balises.
Pour vous aider dans une imbrication correcte, rappelons qu'une indentation pour chaque niveau est une aide considérable pour la lisibilité.
45
1
<!DOCTYPE html>2
<html lang="fr">3
4
<head>5
<meta charset="utf-8">6
<title> liste </title>7
</head>8
9
<body>10
<h1>Éléments HTML</h1>11
<ol type="A">12
<li>Document et en-tête13
<ol type="1">14
<li>Doctype</li>15
<li>head</li>16
</ol>17
</li>18
<li>Structure19
<ol type="1">20
<li>header </li>21
<li>article</li>22
<li>section</li>23
<li> footer</li>24
</ol>25
</li>26
<li>Groupes27
<ol type="1">28
<li>Paragraphe</li>29
<li>div</li>30
<li>Les listes31
<ol type="a">32
<li>Liste non ordonnée</li>33
<li>Liste ordonnée</li>34
<li>Liste de définitions</li>35
</ol>36
</li>37
<li>Tableaux</li> 38
</ol>39
</li>40
<li> Éléments embarqués</li>41
<li>Texte</li>42
<li>Formulaires</li> 43
</ol>44
</body>45
</html>Liste avec puce image
Compléter le code pour obtenir la liste telle que présentée ci-dessous.
liste à obtenir
L'image pour la puce est la suivante : 
.
Avec firefox, un clic droit sur cette image (puis choisir "informations sur l'image") vous permet d'obtenir l'url.
Code à modifier
15
1
<!DOCTYPE html>2
<html lang="fr">3
4
<head>5
<meta charset="utf-8">6
<title> structure 2 </title>7
<style>8
/* style pour la puce */9
</style>10
</head>11
12
<body>13
<!-- code pour la liste -->14
</body>15
</html>Une solution
18
1
<!DOCTYPE html>2
<html lang="fr">3
4
<head>5
<meta charset="utf-8">6
<title> structure 2 </title>7
<style>8
ul{list-style : url("ul_images/panda.png");}9
</style>10
</head>11
12
<body>13
<ul>14
<li>Au secours du petit panda - 1995 </li>15
<li>Kung Fu Panda (1) - 2008 </li>16
</ul>17
</body>18
</html>Liste horizontale.
Chercher sur la toile comment afficher une liste horizontalement. Mettre en oeuvre ci-dessous.
code à compléter
15
1
<!DOCTYPE html>2
<html lang="fr">3
4
<head>5
<meta charset="utf-8">6
<title> liste horizontale </title>7
<style>8
/* code pour liste horizontale */9
</style>10
</head>11
12
<body>13
<!-- code de la liste -->14
</body>15
</html>Une solution avec display: inline-block;
35
1
<!DOCTYPE html>2
<html lang="fr">3
4
<head>5
<meta charset="utf-8">6
<title> liste horizontale </title>7
<style>8
li{ display: inline-block;}9
</style>10
</head>11
12
<body>13
<h2> Liste ul </h2>14
15
<ul>16
<li> item 1 </li>17
<li> item 2 </li>18
<li> item 3 </li>19
<li> item 4 </li>20
<li> item 5 </li>21
</ul> 22
23
24
<h2> Liste ol </h2>25
26
<ol type="i">27
<li> item 1 </li>28
<li> item 2 </li>29
<li> item 3 </li>30
<li> item 4 </li>31
<li> item 5 </li>32
</ol> 33
34
</body>35
</html>Un effet secondaire : suppression des puces et numéros.
Une solution avec float
36
1
<!DOCTYPE html>2
<html lang="fr">3
4
<head>5
<meta charset="utf-8">6
<title> liste horizontale </title>7
<style>8
li{ float:left; margin-right: 3em;}9
h2{clear:both;}10
</style>11
</head>12
13
<body>14
<h2> Liste ul </h2>15
16
<ul>17
<li> item 1 </li>18
<li> item 2 </li>19
<li> item 3 </li>20
<li> item 4 </li>21
<li> item 5 </li>22
</ul> 23
24
25
<h2> Liste ol </h2>26
27
<ol type="i">28
<li> item 1 </li>29
<li> item 2 </li>30
<li> item 3 </li>31
<li> item 4 </li>32
<li> item 5 </li>33
</ol> 34
35
</body>36
</html>Une solution avec display: flex;
38
1
<!DOCTYPE html>2
<html lang="fr">3
4
<head>5
<meta charset="utf-8">6
<title> liste horizontale </title>7
<style>8
ul, ol{display: flex;}9
li{margin: 2em;}10
11
</style>12
</head>13
14
<body>15
<h2> Liste ul </h2>16
17
<ul>18
<li> item 1 </li>19
<li> item 2 </li>20
<li> item 3 </li>21
<li> item 4 </li>22
<li> item 5 </li>23
</ul> 24
25
26
<h2> Liste ol </h2>27
28
<ol type="i">29
<li> item 1 </li>30
<li> item 2 </li>31
<li> item 3 </li>32
<li> item 4 </li>33
<li> item 5 </li>34
<li> effet bizarre ici sur la numérotation?</li>35
</ol> 36
37
</body>38
</html>