-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (113 loc) · 4.32 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../css/styles.css">
<title>Les listes</title>
<meta name="desctiption" content="Exercice sur les listes de base en HTML">
<meta name="keywords" content="listes, liste, listes base, base liste">
<meta name="author" content="arwen">
</head>
<body>
<h1 aria-level="1" role="heading">
Les listes
</h1>
<section>
<h2 aria-level="2" role="heading">
Les listes ordonnées
</h2>
<p>
Une liste ordonnée (<i lang="en">ordered list</i> en anglais) est équipée de puces numérotées automatiquement par le navigateur. Le conteneur <code><ol></code> est toujours parent de zéro ou plusieurs éléments de liste <code><li></code>.
</p>
<section>
<h3 aria-level="3" role="heading">
Mes jeux vidéos favoris
</h3>
<ol lang="en">
<li>Final Fantasy VII</li>
<li>Batman Arkham Knight</li>
<li>Grand Theft Auto 5</li>
<li>Minecraft</li>
<li>Metal slug</li>
</ol>
</section>
<section>
<h3 aria-level="3" role="heading">
Les 5 dernières équipes de curling d'Houtsiplou
</h3>
<ol reversed>
<li>Les petits canards</li>
<li>Les gratteurs-flotteyrs</li>
<li>Les mangoustes chauves</li>
<li>Billy et les billettes</li>
<li>Les rois de la banquise</li>
</ol>
</section>
<!-- Il y avait une faute d'orthographe (tout les temps au lieu de tous les temps) donc j'ai pris la liberté de le corriger sur mon travail -->
<section>
<h3 aria-level="3" role="heading">
Le décompte du nouvel an le plus saugrenu de tous les temps
</h3>
<ol start="-0" reversed >
<li>S'allonger par terre</li>
<li>Manger une banane sans la peler</li>
<li>Se raser les sourcils</li>
<li>Faire un cumulet</li>
<li>Affoner le premier verre à votre portée</li>
<li>Bonne Année !</li>
</ol>
</section>
</section>
<section>
<h2 aria-level="2" role="heading">
Les listes non-ordonnées
</h2>
<p>La liste non ordonnée (<i lang="en">unordered list</i> en anglais) <ul> partage le podium avec <code><ol></code> bien qu'elle soit plus fréquemment utilisée. Comme son nom l'indique, son contenu n'est pas spécialement trié et son ordre peut être changé sans altérer significativement son sens.
</p>
<h3>
Ma liste de course
</h3>
<ul>
<li>Beurre</li>
<li>Pain</li>
<li>Edam tranché</li>
<li>Carottes</li>
<li>Patates douces</li>
<li>Œufs</li>
<li>Potimarron</li>
<li>Salade</li>
<li>Curcuma</li>
<li>Cumin</li>
</ul>
</section>
<section>
<h2>
Les listes de définitions
</h2>
<p>
La liste de définitions <code><dl></code> (<i lang="en">desctiption list</i> en anglais) répond au besoin de lister des paires de termes et de descriptions qui leur sont liées.
</p>
<p>
On peut la comparer à un dictionnaire associant la définition <code><dd></code> au mot <code><dt></code>. Aucun tri alphabétique n'est cependant à l'œuvre, il appartient à l'auteur de la liste de l'ordonner dans le code source.
</p>
<section>
<h3 aria-level="2" role="heading">
Les outils pour une meilleure vie privée
</h3>
<dl>
<dt>
Firefox <br>
<img src="../img/firefox-logo-2019.svg" alt="Logo de Firefox" width="70" height="70">
</dt>
<dd>Firefox est un navigateur Web libre, open-source, multi-plateforme développé par la Mozilla Corporation et des centaines de volontaires. Il est conseillé d'installer les extentions afin de renforcer, encore, la qualité du navigateur. Vous pouvez télécharger la configuration de <a href="">Arkenfox, sur son github.</a> </dd>
<dt>
ProtonMail <br>
<img src="../img/proton-mail-badge.svg" alt="Logo de ProtonMail" width="70" height="70">
</dt>
<dd>ProtonMail est une messagerie chiffrée basée en Suisse. Disponible en version gratuite et payante, ce service inclu le criptage point à point, le cryptage zero-access, un service anti-phishing, un service anti-spam et une authentification à deux facteurs. Disponible sur Android, iOS et en interface web.</dd>
</dl>
</section>
</section>
</body>
</html>