├── README.md
├── flex.css
├── flex.html
├── form.css
├── form.html
├── img
├── a_inline.png
├── balises_html.png
├── dev_tools.png
├── flex_img_gallery.png
├── flex_multi_line_align_content_center.png
├── flex_multi_line_align_items_center.png
├── flex_one_line_align_items_center.png
├── h1_block.png
├── hex.png
├── html_box.png
├── rgb.png
├── rgba.png
└── schema_client_serveur.png
├── img_gallery.css
├── img_gallery.html
├── index.html
├── navigation.css
├── navigation.html
├── page.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # STUDI - HTML/CSS
2 |
3 | - [Introduction](#introduction)
4 | - [La communication client / serveur](#la-communication-client--serveur)
5 | - [Le contenu HTML](#le-contenu-html)
6 | - [Votre premier fichier HTML](#votre-premier-fichier-html)
7 | - [Structure des balises HTML](#structure-des-balises-html)
8 | - [Balises doubles](#balises-doubles)
9 | - [Balises simples (ou auto-fermantes)](#balises-simples-ou-auto-fermantes)
10 | - [Attributs](#attributs)
11 | - [L'inspecteur d'éléments](#linspecteur-déléments)
12 | - [Le cache du navigateur](#le-cache-du-navigateur)
13 | - [Les balises head et body](#les-balises-head-et-body)
14 | - [Les balises de titres](#les-balises-de-titres)
15 | - [Lien hypertexte](#lien-hypertexte)
16 | - [Faire un lien interne à la page](#faire-un-lien-interne-à-la-page)
17 | - [Les commentaires](#les-commentaires)
18 | - [Les images](#les-images)
19 | - [Les chemins relatifs et absolus](#les-chemins-relatifs-et-absolus)
20 | - [Chemin absolu](#chemin-absolu)
21 | - [Chemin relatif](#chemin-relatif)
22 | - [div : la balise de division de contenu](#div--la-balise-de-division-de-contenu)
23 | - [Les types de balises](#les-types-de-balises)
24 | - [Les balises block](#les-balises-block)
25 | - [Les balises inline](#les-balises-inline)
26 | - [CSS](#css)
27 | - [Syntaxe générale](#syntaxe-générale)
28 | - [Liaison avec un fichier HTML](#liaison-avec-un-fichier-html)
29 | - [Couleurs (texte, arrière-plan)](#couleurs-texte-arrière-plan)
30 | - [Un nom](#un-nom)
31 | - [RGB](#rgb)
32 | - [RGBA](#rgba)
33 | - [HEX](#hex)
34 | - [Les sélecteurs](#les-sélecteurs)
35 | - [Les pseudo-classes](#les-pseudo-classes)
36 | - [La différence entre une classe et un id](#la-différence-entre-une-classe-et-un-id)
37 | - [id](#id)
38 | - [Classe](#classe)
39 | - [Les balises HTML : des boîtes](#les-balises-html--des-boîtes)
40 | - [Les unités de mesure](#les-unités-de-mesure)
41 | - [px : Pixels](#px--pixels)
42 | - [em & rem](#em--rem)
43 | - [% : le pourcentage](#--le-pourcentage)
44 | - [vw & vh : Viewport width & Viewport height](#vw--vh--viewport-width--viewport-height)
45 | - [Le positionnement](#le-positionnement)
46 | - [Une navigation collée en haut de l'écran (sticky)](#une-navigation-collée-en-haut-de-lécran-sticky)
47 | - [Le modèle Flexbox](#le-modèle-flexbox)
48 | - [Le conteneur](#le-conteneur)
49 | - [Les enfants](#les-enfants)
50 | - [Le ratio des images](#le-ratio-des-images)
51 | - [Formulaires : introduction](#formulaires--introduction)
52 | - [Les labels](#les-labels)
53 | - [La validation](#la-validation)
54 |
55 | ## Introduction
56 |
57 | **HTML** = HyperText Markup Language
58 | **CSS** = Cascading Style Sheet
59 |
60 | ### La communication client / serveur
61 |
62 | 
63 |
64 | Le **client**, un navigateur web, va communiquer avec un **serveur** via le protocole **HTTP**.
65 |
66 | Le serveur, en réponse, va lui envoyer une réponse **HTML**.
67 |
68 | Cette réponse peut être issue d'un document HTML **statique**, tel que ceux que nous allons réaliser ensemble tout au long de ce module, ou bien issue d'une application web plus complexe, et plus **dynamique** : dans ce cas, la réponse est adaptée au contexte dans lequel on se trouve (si je suis connecté, alors je vois _mon feed_ et pas celui d'un autre...).
69 |
70 | ### Le contenu HTML
71 |
72 | Sur n'importe quel site, vous pouvez consulter le code HTML de la page, en faisant un clic droit n'importe où sur la page et en cliquant sur "Inspecter".
73 |
74 | > Vous pouvez également utiliser la touche _F12_ pour ouvrir l'inspecteur d'éléments, sous Windows, ou encore _Command+Shift+C_ sur Mac
75 |
76 | Sur toutes les pages qu'on va visiter, nous aurons au minimum cette **structure** dans les outils de développement (inspecteur d'éléments) :
77 |
78 | ```html
79 |
80 |
81 |
82 |
83 |
84 | ```
85 |
86 | > Le contenu HTML d'une page représente sa structure, c'est-à-dire l'ensemble des éléments qui composent la page
87 |
88 | ### Votre premier fichier HTML
89 |
90 | Pour pouvoir créer et éditer votre premier fichier HTML, vous allez installer un **IDE** : Integrated Development Environment.
91 |
92 | Dans ce module, j'utiliserai [Visual Studio Code](https://code.visualstudio.com/).
93 |
94 | Vous pouvez reprendre le [replay du live n°1](https://app.studi.fr/#/dashboard/events/26365/replay) pour avoir les détails d'installation et de configuration, ainsi que les extensions à installer.
95 |
96 | Dans Visual Studio Code, on va ouvrir un dossier en passant par le menu ou en utilisant le raccourci _Ctrl+K Ctrl+O_.
97 |
98 | Le fait d'ouvrir un dossier nous permet de nous placer dans un **environnement de travail**. C'est dans ce dossier qu'on pourra créer nos différents fichiers.
99 |
100 | Une fois dans ce dossier, on va créer un fichier `index.html`, et y inscrire ce contenu :
101 |
102 | ```html
103 |
104 |
105 |
106 |
107 | Coucou
108 |
109 |
110 | ```
111 |
112 | Ensuite, on va se rendre dans un navigateur, puis ouvrir ce fichier directement avec le raccourci _Ctrl+O_.
113 |
114 | On doit normalement voir apparaître "Coucou" à l'écran.
115 |
116 | ## Structure des balises HTML
117 |
118 | Lors de la réalisation de nos maquettes HTML, nous utiliserons 2 types de balises :
119 |
120 | - Les balises doubles
121 | - Les balises simples (ou auto-fermantes)
122 |
123 | ### Balises doubles
124 |
125 | La structure est très simple :
126 |
127 | ```html
128 | ...
129 | ```
130 |
131 | Le principe est d'avoir un "tag" d'ouverture et un autre de fermeture. Ainsi, on peut y inscrire du contenu supplémentaire.
132 |
133 | Exemple :
134 |
135 | ```html
136 |
137 | Le titre de ma page qui s'affichera dans l'onglet
138 |
139 | ```
140 |
141 | Ici, nous avons utilisé 2 balises doubles : les balises `head` et `title`.
142 |
143 | ### Balises simples (ou auto-fermantes)
144 |
145 | La syntaxe est légèrement différente, mais très simple à retenir :
146 |
147 | ```html
148 |
149 | ```
150 |
151 | Pour le moment nous n'en avons pas encore utilisé concrètement, mais nous en verrons plusieurs.
152 |
153 | A titre d'exemple, tout de même, si vous voulez faire un retour à la ligne dans une page, vous pouvez utiliser la balise `br` :
154 |
155 | ```html
156 |
157 | ```
158 |
159 | Une petite note supplémentaire sur la syntaxe des balises simples : ça fonctionne aussi sans le `/`, donc sous la forme ``. Mais personnellement, j'utilise beaucoup plus souvent la syntaxe avec le `/` pour l'auto-fermeture.
160 |
161 | 
162 |
163 | > Important : chaque balise HTML a un rôle précis, on n'utilise pas les balises au hasard. On vient de découvrir, notamment, que la balise `title` sert à définir le titre de la page, qui apparaîtra dans l'onglet du navigateur par exemple. Ou encore `br`, qui est une balise simple, pour faire un retour à la ligne
164 |
165 | ### Attributs
166 |
167 | Dans toutes les balises, on peut ajouter des attributs sous la forme suivante :
168 |
169 | ```html
170 |
171 |
172 | ```
173 |
174 | Par exemple, dans la balise ``, on retrouve l'élément `lang` avec la valeur `fr` :
175 |
176 | ```html
177 |
178 | ...
179 |
180 | ```
181 |
182 | ## L'inspecteur d'éléments
183 |
184 | Dans votre navigateur, vous pouvez **inspecter** le contenu de la page que vous avez à l'écran. En gros, vous pouvez explorer son code source (et son CSS, on le verra plus tard) :
185 |
186 | 
187 |
188 | Vous pouvez également modifier le code se trouvant dans la partie "Elements".
189 |
190 | > Attention, si vous réalisez un changement, cela ne signifie pas que vous avez modifié le site, vous avez seulement changé l'apparence dans votre navigateur, donc pour vous uniquement. Si je change "Coucou" en un autre texte, cela n'aura pas modifié mon fichier dans VSCode
191 |
192 | ## Le cache du navigateur
193 |
194 | Le cache du navigateur permet au navigateur, quand il affiche une page, de stocker les fichiers (images, CSS, etc...) associés à cette page. Ainsi, si vous souhaitez consulter la même page un peu plus tard, il n'est pas obligé d'aller demander au serveur, il peut vous afficher de nouveau la même page.
195 |
196 | > Pensez, quand vous voulez faire des changements dans votre page HTML et que vous l'avez correctement enregistré dans VSCode, à rafraîchir avec le raccourci `Ctrl+R` ou `Ctrl+Shift+R` au lieu de `F5`. Cela est censé vider le cache pour la page que vous voulez rafraîchir
197 |
198 | ## Les balises `head` et `body`
199 |
200 | Les balises `head` et `body` sont **indispensables** dans toute page web.
201 |
202 | Elles se trouvent toutes les deux en-dessous de la balise **racine**, la balise `html`.
203 |
204 | - La balise `head` permet de décrire au navigateur les **métadonnées** concernant la page qu'on souhaite afficher. Par exemple, quand on utilise la balise `title`, alors on doit l'inscrire dans la balise `head` et pas ailleurs. Son rôle est d'indiquer au navigateur le titre de la page. Mais ce titre n'est pas forcément celui qui apparaîtra dans la page. En l'occurence, on voit que le navigateur s'en sert pour l'afficher dans l'onglet
205 |
206 | - La balise `body`, comme son nom l'indique, représente le **corps** de la page : c'est ce qu'on va voir à l'écran
207 |
208 | ## Les balises de titres
209 |
210 | Les balises de `h1` à `h6` permettent, dans le body, d'indiquer au navigateur des titres d'importances variées. Le niveau 1 sera le plus important, on essayera donc de n'avoir qu'une seule balise `h1` sur notre page. Les niveaux de 1 à 6 vont du plus important au moins important.
211 |
212 | ## Lien hypertexte
213 |
214 | La balise `a` est une **balise double**, elle doit avoir au moins un attribut pour nous permettre de naviguer : `href`.
215 |
216 | ```html
217 | Cliquez ici pour aller sur Github
218 | ```
219 |
220 | On a également vu qu'on pouvait forcer l'ouverture du lien dans un nouvel onglet, en ajoutant l'attribut `target` avec la valeur `_blank` :
221 |
222 | ```diff
223 | -Cliquez ici pour aller sur Github
224 | +Un clic sur ce lien s'ouvrira dans un nouvel onglet
225 | ```
226 |
227 | ### Faire un lien interne à la page
228 |
229 | On peut également créer un lien qui pointe vers un autre élément de la page.
230 |
231 | Pour ce faire, il faut commencer par donner un **identifiant unique** à l'élément. Nous utilisons l'attribut `id` pour ça :
232 |
233 | ```html
234 |
235 | ...
236 |
237 | ```
238 |
239 | Ensuite, dans notre balise de lien, nous pouvons pointer vers cet élément à l'aide d'un `#` suivi de l'identifiant cible :
240 |
241 | ```html
242 | Lien vers le paragraphe important
243 | ```
244 |
245 | Lors du clic, le navigateur se positionnera à hauteur de l'élément important.
246 |
247 | > On peut également pointer un identifiant d'une autre page en indiquant le nom de la page puis `#identifiant`. L'attribut href prendrait alors la valeur `pagecible.html#identifiant`
248 |
249 | ## Les commentaires
250 |
251 | Les commentaires, dans n'importe quel langage de programmation, permettent d'écrire du contenu qui sera ignoré par l'interpréteur (votre navigateur) ou le compilateur (s'il s'agit d'un langage compilé).
252 |
253 | En HTML, la syntaxe est la suivante :
254 |
255 | ```html
256 |
257 | ```
258 |
259 | On doit donc encadrer un commentaire par ``.
260 |
261 | On peut également l'écrire sur plusieurs lignes :
262 |
263 | ```html
264 |
271 | ```
272 |
273 | On peut par exemple utiliser les commentaires pour décrire une partie du code qu'on a écrit :
274 |
275 | ```html
276 |
277 |
Coucou
278 |
Coucou
279 |
Coucou
280 | ```
281 |
282 | Alors, à l'écran, on ne verra pas la première ligne, mais seulement les titres.
283 |
284 | > Attention, tout commentaire HTML apparaît quand même dans la source de la page, donc dans vos outils de développement si vous les ouvrez ! Veillez donc à ne pas indiquer d'informations sensibles ou confidentielles dans les commentaires HTML
285 |
286 | On peut aussi utiliser les commentaires pour désactiver une partie de notre code :
287 |
288 | ```html
289 |
290 | Lorem ipsum dolor sit amet
291 |
292 | Pariatur perspiciatis maxime cupiditate, facere illo at eum explicabo nemo
293 | et veritatis!
294 |
295 | ```
296 |
297 | Dans l'exemple ci-dessus, la balise ` ` sera ignorée par le navigateur, bien que le commentaire apparaisse quand même dans le code source de la page.
298 |
299 | ## Les images
300 |
301 | Avec la balise **simple** ``, nous avons la possibilité d'intégrer des images dans nos pages.
302 |
303 | Nous devons simplement définir au minimum 2 attributs à cette balise : la source de l'image à afficher, et un texte alternatif décrivant l'image si celle-ci n'a pas pu être chargée.
304 |
305 | ```html
306 |
307 | ```
308 |
309 | ## Les chemins relatifs et absolus
310 |
311 | Dans la section ci-dessus, décrivant la balise `img`, on a indiqué dans l'attribut `src` un chemin vers l'image à afficher.
312 |
313 | Ce chemin peut être soit **absolu**, soit **relatif**.
314 |
315 | ### Chemin absolu
316 |
317 | Un chemin absolu désigne un chemin **complet** vers une ressource.
318 |
319 | Le terme complet signifie que les éléments inclus dans le chemin vont de la **racine** jusqu'au nom du fichier.
320 |
321 | Exemple :
322 |
323 | ```html
324 |
325 | ```
326 |
327 | Ici, j'utilise un chemin local, donc sur ma machine. La racine désigne la lettre du lecteur, puis l'ensemble du chemin à parcourir jusqu'au fichier.
328 |
329 | On peut également définir des chemins absolus se trouvant sur internet :
330 |
331 | ```html
332 |
333 | ```
334 |
335 | > Note : il est possible que Google retire cette image plus tard, puisqu'elle fait référence à un événement particulier, le nouvel an chinois de 2022. C'est donc normal si en suivant ce lien plus tard qu'en Février 2022, le fichier n'existe plus
336 |
337 | Ici, la racine de mon chemin est `https://www.google.com/`, puis l'ensemble des dossiers à parcourir pour aller chercher le fichier d'extension `.gif`.
338 |
339 | ### Chemin relatif
340 |
341 | Un chemin relatif, quant à lui, n'inclura pas l'ensemble du chemin du fichier.
342 |
343 | A la place, on va désigner un chemin **relativement au répertoire courant**.
344 |
345 | Comment déduire le répertoire courant ?
346 |
347 | Par exemple, si je me trouve dans le fichier `index.html` et que je souhaite intégrer une image, alors je vais regarder le répertoire dans lequel se trouve `index.html` : c'est mon répertoire courant.
348 |
349 | Ensuite, si j'ai dans le même répertoire un dossier `img/`, comme c'est notre cas ici, je peux le désigner directement, puis indiquer l'image se trouvant dans `img/` :
350 |
351 | ```html
352 |
353 | ```
354 |
355 | Alors, lorsqu'on va afficher la page, le navigateur va **résoudre** automatiquement le chemin en partant de notre répertoire courant. Pour ce faire, il prend en compte le fichier que nous sommes en train de consulter, et résout le chemin vers l'image.
356 |
357 | > Les chemins relatifs sont donc _généralement_ à privilégier : ce sera plus utile pour déployer une maquette en ligne, car elle pourra fonctionner de la même façon que votre version locale
358 |
359 | ## `div` : la balise de division de contenu
360 |
361 | Nous avons déjà vu ensemble quelques balises et leur utilité. En réalité, il existe une autre balise à vocation plus généraliste : la balise `div`.
362 |
363 | Elle va vous permettre de déclarer des conteneurs (c'est une balise double), mais sans leur donner une signification particulière dans le code HTML. En gros, si vous n'avez pas besoin d'un titre, d'un paragraphe, d'un lien, etc...mais que vous avez quand même besoin d'occuper un espace, pour un contenu, alors vous pouvez utiliser une div.
364 |
365 | La syntaxe est très simple, comme une balise double :
366 |
367 | ```html
368 |
369 |
370 |
371 | ```
372 |
373 | > Pourquoi on parle de cette balise qui semble ne servir à rien, au premier abord ? Parce qu'en réalité, c'est l'une des balises les plus utilisées sur le web
374 |
375 | ## Les types de balises
376 |
377 | Nous allons voir ensemble les 2 types principaux de balises HTML, et leur différence fondamentale. Nous avons déjà vu maintes fois que le fait d'écrire du HTML permettait de parler à un navigateur, qui peut comprendre, interpréter notre code.
378 |
379 | Selon les balises qu'on va utiliser, le navigateur va, par défaut, les afficher différemment.
380 |
381 | ### Les balises block
382 |
383 | La caractéristique des balises `block` est qu'elles vont occuper tout l'espace horizontal disponible.
384 |
385 | Exemple : h1, h2, h3, h4, h5, h6, div, p...
386 |
387 | 
388 |
389 | Ainsi, à l'écran, dans un navigateur, elles vont systématiquement se placer sous la balise précédente, et au-dessus de la balise suivante. Car en occupant tout l'espace horizontal disponible, alors elles repoussent la balise suivante sur une nouvelle ligne.
390 |
391 | ### Les balises inline
392 |
393 | Les balises `inline`, quant à elle, n'occupent que l'espace horizontal nécessaire à leur affichage.
394 |
395 | Exemple : a, img...
396 |
397 | 
398 |
399 | ## CSS
400 |
401 | CSS est l'acronyme de **Cascading Style Sheet**.
402 |
403 | Nous avons vu ensemble que HTML permettait de définir le **squelette**, ou encore le **corps** de la page. CSS, quant à lui, définit l'habillage, l'apparence des éléments de notre page.
404 |
405 | ### Syntaxe générale
406 |
407 | Comme tout langage, CSS a sa syntaxe.
408 |
409 | Globalement, pour appliquer une apparence à un élément de la page, cela se déroulera en 2 temps : on indique un sélecteur, pour pouvoir cibler l'élément qu'on veut styliser, puis on applique des valeurs à des règles (ou propriétés) CSS, entre des accolades.
410 |
411 | Exemple :
412 |
413 | ```css
414 | h1 { /* <-- Sélecteur : toutes les balises h1 */
415 | color: blue; /* <-- Règle : couleur du texte, Valeur : bleu */
416 | }
417 | ```
418 |
419 | > Note : vous constatez qu'on peut également écrire des commentaire en CSS avec la syntaxe `/* ... */`
420 |
421 | Chaque règle a un nom et un but bien particulier. Nous pouvons donc déclarer plusieurs règles, les unes à la suite des autres, pour un sélecteur donné. Chaque ligne spécifiant une valeur pour une règle donnée doit être terminée par un point-virgule.
422 |
423 | Autre exemple :
424 |
425 | Nous parlions plus tôt des types de balises (block, inline). La règle CSS associée à ces valeurs est `display`.
426 |
427 | Ainsi, pour un élément donné, qui serait par exemple `inline` par défaut, on peut tout à fait changer sa propriété CSS `display` pour le passer en `block` :
428 |
429 | ```css
430 | a { /* <-- a est un élément inline par défaut */
431 | display: block;
432 | }
433 | ```
434 |
435 | ### Liaison avec un fichier HTML
436 |
437 | Lorsque vous avez déclaré un ensemble de règles et les valeurs à associer pour des sélecteurs donnés, vous souhaitez appliquer cette **feuille de styles** à un document HTML.
438 |
439 | Pour ce faire, il suffit de vous rendre dans votre document HTML, et d'utiliser une balise `link` dans la partie `head` de votre page :
440 |
441 | ```html
442 |
443 |
444 |
445 |
446 |
447 | ```
448 |
449 | ### Couleurs (texte, arrière-plan)
450 |
451 | La propriété de couleur de texte en CSS est `color`. Pour la couleur d'arrière-plan, on peut utiliser `background-color`.
452 |
453 | Dans les deux cas, ces propriétés attendent une valeur représentant une couleur, afin que le navigateur puisse l'appliquer sur l'élément cible.
454 |
455 | En CSS, on peut représenter une couleur de façons différentes.
456 |
457 | #### Un nom
458 |
459 | On peut spécifier une couleur avec un nom : `white`, `blue`, `yellow`, ...
460 |
461 | #### RGB
462 |
463 | RGB est l'acronyme de **Red, Green, Blue**. Quand vous définissez une couleur en RGB, vous définissez la quantité de bleu, vert et rouge que vous allez inclure dans votre couleur finale. Cela va nous permettre de définir des couleurs plus fines que `blue`, si vous voulez un bleu un peu plus clair par exemple.
464 |
465 | 
466 |
467 | #### RGBA
468 |
469 | RGBA ajoute une notion de transparence dans la couleur, avec un paramètre supplémentaire (alpha).
470 |
471 | 
472 |
473 | #### HEX
474 |
475 | Vous pouvez également spécifier une valeur en **hexadécimal**. Dans ce cas, vous allez utiliser une base 16 et non plus une base 10.
476 |
477 | La base 10 permet de compter de 0 jusqu'à 9, puis de 10 jusqu'à 19, etc...10 par 10.
478 |
479 | En base 16, on va compter de 0 jusqu'à 9, puis de A jusqu'à F :
480 |
481 | |Base 16 |0 |1 |2 |3 |4 |5 |6 |7 |8 |9 |A |B |C |D |E |F |
482 | |---------|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
483 | |Base 10 |0 |1 |2 |3 |4 |5 |6 |7 |8 |9 |10 |11 |12 |13 |14 |15 |
484 |
485 | 
486 |
487 | Une couleur en hexadécimal est représentée sur 6 caractères. En réalité, si on divise par 3, alors on peut retrouver notre RVB (ou RGB en anglais).
488 |
489 | Dans l'image ci-dessus, nous avons la valeur `#5f5fff`. Il s'agit de la représentation hexadécimale de notre précédent exemple en RGB.
490 |
491 | Prenons les 2 premiers caractères, `5f`. Il doit s'agir, logiquement, de la quantité de R, donc rouge, dans notre couleur.
492 |
493 | Dans la représentation RGB, nous avions `95` pour le rouge, donc en base 10.
494 |
495 | Si nous comptons, à la place, en base 16, alors logiquement nous devrions avoir le tableau de comparaison base 10 et base 16 ci-dessus, de 0 jusqu'à 15, puis, 16 en base 10 équivaut donc à 10 en base 16.
496 |
497 | Donc si nous allons de 16 en 16 :
498 |
499 | |Base 10 |16 |...|32 |...|48 |...|64 |...|80 |
500 | |---------|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
501 | |Base 16 |10 |...|20 |...|30 |...|40 |...|50 |
502 |
503 | Puis :
504 |
505 | |Base 10 |81 |82 |83 |84 |85 |86 |87 |88 |89 |90 |91 |92 |93 |94 |95 |
506 | |---------|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
507 | |Base 16 |51 |52 |53 |54 |55 |56 |57 |55 |59 |5A |5B |5C |5D |5E |5F |
508 |
509 | On retrouve donc bien l'équivalent `5F` en base 16, pour la valeur `95` qu'on trouvait en base 10 dans notre couleur représentée en RGB initialement.
510 |
511 | La couleur noire sera donc `#000000` et la couleur blanche `#FFFFFF`.
512 |
513 | > Note : On peut raccourcir la représentation hexadécimale si les caractères sont les mêmes : `#000000` peut être `#000`, `#FFFFFF` sera `#FFF`, `#FF0000` devient `#F00`, etc...
514 |
515 | ### Les sélecteurs
516 |
517 | Les sélecteurs CSS nous permettent de cibler, dans le fichier HTML où notre fichier CSS sera inclus, des éléments précis de l'arborescence.
518 |
519 | Pour chacun des éléments correspondants, le navigateur appliquera l'ensemble des règles CSS indiquées.
520 |
521 | |Sélecteur|Syntaxe (exemple)|Description (ce qui est sélectionné)|
522 | |---|---|---|
523 | |Balise HTML| p {} | Toutes les balises HTML correspondant au nom indiqué|
524 | |Classe| .nomDuneClasse {} | Toutes les balises HTML ayant un attribut `class` contenant le nom indiqué|
525 | |Identifiant| #identifiant {} | Toutes les balises HTML ayant un attribut `id` correspondant au nom indiqué|
526 | |sélecteur dans sélecteur|nav ul {}| Ici par exemple, toutes les balises `ul` qui se trouvent à l'intérieur d'une balise `nav` (un espace pour séparer)|
527 | |enfant direct|nav > ul {}| Ici par exemple, toutes les balises `ul` qui se trouvent à l'intérieur d'une balise `nav`, mais qui en sont les **enfants directs**, donc qui se trouvent juste en-dessous, à un niveau d'indentation supplémentaire seulement|
528 |
529 | > Je rajouterai dans ce tableau les sélecteurs que nous aurons découverts au cours de notre apprentissage
530 |
531 | #### Les pseudo-classes
532 |
533 | Les pseudo-classes s'appliquent sur des sélecteurs CSS : on ajoute `:` puis le nom de la pseudo-classe. Cela nous permettra, pour un sélecteur donné, de cibler un sous-ensemble des éléments correspondants par exemple, ou bien un état précis de l'élément (souris qui passe dessus, clic, ...)
534 |
535 | |Sélecteur|Syntaxe (exemple)|Description (ce qui est sélectionné)|
536 | |---|---|---|
537 | |N'est pas| :not() | élément qui n'est pas ce qui est indiqué entre parenthèses|
538 | |Dernier enfant| :last-child| Au sein de plusieurs enfants, cibler le dernier de leur parent|
539 | |nth-of-type|.container > div:nth-of-type(even)| Dans l'exemple ci-contre, sélectionne tous les éléments se trouvant aux positions paires qui sont des `div` se trouvant être les enfants directs d'un élément portant la classe `container`|
540 |
541 | ### La différence entre une classe et un id
542 |
543 | Pour n'importe quelle balise dans notre `body`, nous pouvons spécifier un identifiant ou bien une classe.
544 |
545 | #### id
546 |
547 | Un identifiant peut servir à plusieurs choses :
548 |
549 | - Mettre un repère dans une page pour faire un lien vers celle-ci (voir la section sur les liens)
550 | - Pouvoir désigner un élément de formulaire quand on veut lui associer un libellé (nous verrons ça plus tard avec les formulaires)
551 | - Pouvoir récupérer un élément de la page avec du Javascript
552 |
553 | Dans ces 3 exemples, une caractéristique qui ressort, et qui doit être respectée, est **l'unicité** du nom.
554 |
555 | Un identifiant, dans une page, doit être unique. On ne donnera donc pas le même identifiant à 2 balises HTML différentes.
556 |
557 | #### Classe
558 |
559 | Une classe peut être vue, du point de vue CSS, comme une _classe d'affichage_.
560 |
561 | Par exemple, nous avons défini une classe `.important` dans notre CSS, car nous souhaitions pouvoir afficher en gras le ou les textes que nous jugeons importants.
562 |
563 | Contrairement à l'identifiant, le nom de classe peut donc être **réutilisé** dans une même page, sur plusieurs balises.
564 |
565 | Par ailleurs, il est possible de **cumuler** plusieurs classes sur une balise. Voir pour ça l'exemple de notre texte important que nous avons passé en rouge :
566 |
567 | Dans notre CSS :
568 |
569 | ```css
570 | p {
571 | color: #6b8aaa;
572 | }
573 |
574 | .important {
575 | font-weight: bold;
576 | }
577 |
578 | .red {
579 | color: red;
580 | }
581 | ```
582 |
583 | Et notre HTML :
584 |
585 | ```html
586 |
587 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, quidem
588 | voluptatem? Obcaecati a distinctio ullam quisquam?
589 |
590 |
591 | ```
592 |
593 | > Ci-dessus, on définit que les balises `p` doivent être colorées avec le code couleur `#6b8aaa`, mais nous indiquons ensuite que les éléments portant la classe `red` doivent être colorés en rouge. A l'écran, dans le navigateur, le texte est affiché en rouge : la règle déclarée dans la classe `red` a pris le dessus. Si on voulait que la règle déclarée dans la balise `p` garde le dessus, on pourrait utiliser `!important` : `color: #6b8aaa !important;`. Mais c'est une pratique dont il ne faut pas abuser, au risque de perdre en cohérence
594 |
595 | ### Les balises HTML : des boîtes
596 |
597 | Chaque balise HTML interprétée et affichée par le navigateur est en fait comme une **boîte**.
598 |
599 | Elle va avoir un contenu, des bordures, etc...
600 |
601 | Sa structure peut être visible dans l'inspecteur d'éléments, dans la partie CSS :
602 |
603 | 
604 |
605 | Depuis l'intérieur vers l'extérieur :
606 |
607 | - Contenu de la balise : c'est là-dedans que s'affichera le texte, les images, etc...
608 | - **padding** : marge intérieure de l'élément, entre le contenu et la bordure
609 | - **border** : bordures de l'élément
610 | - **margin** : marge extérieure de l'élément
611 |
612 | > Les 3 mots en gras sont des termes à retenir. En HTML, si on parle de _margin_, alors on parle de la marge **extérieure**, et inversement pour le _padding_
613 |
614 | Chacun de ces nouveaux termes peut être décliné sur chaque côté de l'élément. Ainsi, on pourra définir une marge extérieure supérieure sur un élément en utilisant la règle `margin-top`, ou bien une bordure inférieure avec `border-bottom`.
615 |
616 | Si on utilise `margin: 15px;`, alors on définit une marge extérieure de 15 pixels pour les 4 côtés de l'élément en même temps.
617 |
618 | > Sur la capture d'écran ci-dessus, on voit que l'élément a une marge extérieure de 8 pixels. En fait, l'élément en question est le `body`. Le navigateur applique par défaut une marge extérieure de 8 pixels sur cet élément
619 |
620 | ### Les unités de mesure
621 |
622 | Quand on veut définir une règle sur un élément, comme une marge ou une bordure, on peut indiquer l'épaisseur voulue, ou la largeur par exemple avec la règle CSS `width`.
623 |
624 | Dans ce cas, on va utiliser une unité de mesure pour indiquer au navigateur comment afficher l'élément et appliquer la règle.
625 |
626 | #### px : Pixels
627 |
628 | L'unité de mesure en pixels est très précise.
629 |
630 | Par exemple, si je souhaite appliquer une bordure sur un élément, je peux utiliser la règle `border` :
631 |
632 | ```css
633 | /* Bordure de 2px de large, en ligne pleine, de couleur noire */
634 | border: 2px solid black;
635 | ```
636 |
637 | Le désavantage de cette règle, cependant, est qu'il s'agit d'une unité de mesure **absolue**. 2 pixels, c'est 2 pixels, et ça ne bougera pas. Ainsi, notre layout (disposition de notre page) n'est pas très **flexible**. Donc c'est précis, mais moins flexible que des unités de mesure **relatives**.
638 |
639 | #### em & rem
640 |
641 | Comme vu précédemment, si on veut définir une bordure par exemple, on peut tout à fait utiliser une valeur absolue. L'unité de mesure en pixels est loin d'être inutile.
642 |
643 | En revanche, si on souhaite dimensionner un texte par exemple, nous aurons probablement plus besoin d'une unité de mesure **relative**.
644 |
645 | Alors, relative à quoi ? Regardons un exemple.
646 |
647 | Quand j'utilise une balise `h1`, le navigateur applique un style par défaut :
648 |
649 | ```css
650 | h1 {
651 | display: block;
652 | font-size: 2em; /* <-- Taille du texte, unité de mesure en 'em' */
653 | margin-block-start: 0.67em;
654 | margin-block-end: 0.67em;
655 | margin-inline-start: 0px;
656 | margin-inline-end: 0px;
657 | font-weight: bold;
658 | }
659 | ```
660 |
661 | L'utilisation de l'unité `em` permet ici de dire au navigateur "applique une taille de texte 2 fois plus grande que la première taille de texte que tu trouveras plus haut dans l'arborescence".
662 |
663 | > Généralement, l'élément `h1` se trouve assez haut dans l'arborescence, donc on va souvent hériter de la taille de texte définie sur le `body` par exemple (par défaut : 16px)
664 |
665 | Donc par défaut, notre `h1` possèderait une taille de police de 32px, dans ce cas.
666 |
667 | Maintenant, si je souhaite appliquer, par exemple, un `margin` sur mon `h1`, je peux utiliser une taille relative également :
668 |
669 | ```css
670 | h1 {
671 | margin: 3em;
672 | }
673 | ```
674 |
675 | Or, dans ce cas, la marge appliquée par le navigateur sera de **96px**. C'est en fait 3 fois la `font-size` appliquée sur notre `h1` !
676 |
677 | Si on veut conserver une taille relative à la taille **de base**, alors on doit utiliser `rem` comme unité de mesure. On indique ainsi au navigateur d'utiliser le **root em**, donc de se référer à la racine.
678 |
679 | ```css
680 | h1 {
681 | margin: 3rem;
682 | }
683 | ```
684 |
685 | Avec l'unité `rem`, on aura bien une marge de **48px**, soit 16px x 3.
686 |
687 | Ainsi, on peut donc décider, par la suite, de faire évoluer notre taille de police de base. L'élément racine étant `html`, on peut tout à fait décider que la taille de police de base n'est plus 16px mais 20px :
688 |
689 | ```css
690 | html {
691 | font-size: 20px;
692 | }
693 | ```
694 |
695 | Alors, dans ce cas, toutes les règles que nous avons définies comme relatives suivront : notre layout est plus flexible.
696 |
697 | #### % : le pourcentage
698 |
699 | On peut également utiliser le pourcentage comme unité de mesure relative.
700 |
701 | Par exemple, pour définir la largeur d'un conteneur :
702 |
703 | ```css
704 | .monConteneur {
705 | width: 50%;
706 | }
707 | ```
708 |
709 | Alors, relativement à son **parent**, il devrait occuper 50% de l'espace.
710 |
711 | #### vw & vh : Viewport width & Viewport height
712 |
713 | `vw` et `vh` permettent d'indiquer la largeur ou la hauteur d'un élément par rapport au **viewport** : la zone affichée à l'écran. Elle agit comme un pourcentage (`100vh` = 100% de la hauteur de la zone affichée à l'écran).
714 |
715 | ### Le positionnement
716 |
717 | Du point de vue du navigateur, chaque élément a un **positionnement** (en CSS, règle : `position`).
718 |
719 | Le positionnement par défaut est `static`. Suivant le type de l'élément (`block` ou `inline`), le navigateur le positionne à la suite des autres, sans adaptation particulière.
720 |
721 | Les principaux positionnements utilisés sont :
722 |
723 | - relative
724 | - absolute
725 | - fixed
726 | - sticky
727 |
728 | #### Une navigation collée en haut de l'écran (sticky)
729 |
730 | Dans l'exemple `navigation.html`, on réalise une barre de navigation collée en haut de l'écran quand on scrolle.
731 |
732 | Pour ce faire, on va appliquer à notre balise `nav` un positionnement `sticky`, et indiquer au navigateur ou positionner l'élément :
733 |
734 | ```css
735 | nav {
736 | position: sticky;
737 | top: 0px;
738 | }
739 | ```
740 |
741 | La règle `top` va simplement indiquer au navigateur où positionner l'élément. Relativement au haut (`top` en anglais) de la fenêtre, on le mettra à 0px. Donc collé, tout en haut.
742 |
743 | ### Le modèle Flexbox
744 |
745 | Nous avons vu que les éléments HTML pouvaient être de type `block` ou `inline`.
746 |
747 | La règle CSS correspondant à ce type d'affichage est `display`.
748 |
749 | On peut également utiliser `display` pour d'autres types d'affichages. Nous allons parler du type `flex`.
750 |
751 | Le modèle Flexbox permet, quand il est appliqué sur un conteneur, d'indiquer au navigateur comment distribuer les éléments qui se trouvent dans ce conteneur.
752 |
753 | On va donc pouvoir distributer les enfants d'un conteneur de manière beaucoup plus aisée grâce aux règles CSS utilisables soit sur le conteneur, soit sur les enfants.
754 |
755 | #### Le conteneur
756 |
757 | Au niveau du conteneur, on va dire au navigateur qu'on souhaite appliquer Flexbox avec `display: flex;`.
758 |
759 | Quand on applique cette règle sur un conteneur, alors le navigateur, par défaut, va distribuer les enfants de ce conteneur sur un **axe principal** : horizontal (ou `row`).
760 |
761 | Il est possible d'indiquer au navigateur d'utiliser l'axe vertical comme axe principal avec la règle `flex-direction: column`.
762 |
763 | Par la suite, il est donc possible d'indiquer au navigateur comment aligner les enfants sur l'axe principal, mais également sur l'**axe secondaire**.
764 |
765 | > Donc, si par défaut, l'axe principal est `row`, donc l'axe horizontal, alors l'axe secondaire sera l'axe vertical, et l'inverse avec `flex-direction: column`
766 |
767 | Pour aligner les enfants sur l'axe principal, on utilisera la règle `justify-content` **toujours au niveau du conteneur** :
768 |
769 | ```css
770 | /* Pour distribuer les éléments d'une liste par exemple */
771 | nav ul {
772 | display: flex;
773 | justify-content: center;
774 | }
775 | ```
776 |
777 | On utilisera généralement `flex-start`, `flex-end`, `space-around`, `space-between`, `space-evenly`, `center` comme valeurs de cette règle.
778 |
779 | Au niveau de l'axe secondaire, on pourra utiliser `align-items` ou `align-content`.
780 |
781 | `align-items` va nous permettre d'aligner les **éléments**, au sein d'une ligne, par rapport à l'axe secondaire.
782 |
783 | La différence avec `align-content` concerne les lignes. `align-content` n'aura aucun effet sur une ligne seule. Elle aura un effet sur l'alignement de **plusieurs lignes** par rapport à l'axe secondaire.
784 |
785 | ##### align-items sur une ligne
786 |
787 | 
788 |
789 | ##### align-items sur plusieurs lignes
790 |
791 | 
792 |
793 | ##### align-content sur plusieurs lignes
794 |
795 | 
796 |
797 | #### Les enfants
798 |
799 | Les règles CSS précédemment vues s'appliquent sur le **conteneur**.
800 |
801 | Les éléments contenus dans ce conteneur, donc les enfants, peuvent également recevoir des règles CSS.
802 |
803 | Par exemple, dans le fichier `img_gallery.css`, on réalise une galerie d'images avec Flexbox :
804 |
805 | 
806 |
807 | On peut indiquer au navigateur d'autoriser les enfants à s'élargir si besoin avec la règle `flex-grow`, à appliquer au niveau des enfants.
808 |
809 | Par défaut, `flex-grow` est à 0, donc si nous ne l'appliquions pas sur notre galerie, les images ne prendraient pas toute la largeur disponible.
810 |
811 | Les 3 règles principalement utilisées sur les enfants permettent de fixer une valeur de base, la possibilité de s'élargir et la possibilité de se rétrécir.
812 |
813 | - `flex-grow` : possibilité de s'élargir (par défaut : 0, donc pas possible)
814 | - `flex-shrink` : possibilité de rétrécir l'élément (par défaut : 1)
815 | - `flex-basis` : largeur de base pour ensuite déterminer la largeur finale (par défaut : auto)
816 |
817 | Il est également possible d'utiliser la règle `flex` sur les enfants, comme un raccourci de `flex-grow`, `flex-shrink` et `flex-basis` :
818 |
819 | ```css
820 | element {
821 | /* --- Premier exemple --- */
822 | flex: 1;
823 | /*
824 | Equivaut à :
825 | flex-grow: 1;
826 | flex-shrink: 1;
827 | flex-basis: 0%;
828 | */
829 | /* --- Second exemple --- */
830 | flex: 1 0;
831 | /*
832 | Equivaut à :
833 | flex-grow: 1;
834 | flex-shrink: 0;
835 | flex-basis: 0%;
836 | */
837 | /* --- Troisième exemple --- */
838 | flex: 1 auto;
839 | /*
840 | Equivaut à :
841 | flex-grow: 1;
842 | flex-shrink: 1;
843 | flex-basis: auto;
844 | */
845 | /* --- Quatrième exemple --- */
846 | flex: 1 0 auto;
847 | /*
848 | Equivaut à :
849 | flex-grow: 1;
850 | flex-shrink: 0;
851 | flex-basis: auto;
852 | */
853 | }
854 | ```
855 |
856 | ### Le ratio des images
857 |
858 | Dans la galerie d'images `img_gallery.html`, pour éviter que les images soient déformées, on applique la règle CSS `object-fit` avec la valeur `cover`.
859 |
860 | Ainsi, il est possible que l'image soit légèrement rognée sur les bords mais le ratio reste correct.
861 |
862 | ## Formulaires : introduction
863 |
864 | Un formulaire aura toujours pour balise racine la balise `form` :
865 |
866 | ```html
867 |
870 | ```
871 |
872 | Une fois qu'on a ouvert notre formulaire, on va ajouter des champs dedans :
873 |
874 | ```html
875 |
876 |
880 | ```
881 |
882 | >Les balises `input` sont auto-fermantes
883 |
884 | La balise `input` peut recevoir de nombreux types, entre autres : `text`, `email`, `password`, `number`...
885 |
886 | ### Les labels
887 |
888 | Il est possible d'accompagner un champ d'un **texte descriptif**. Par ailleurs, le clic sur le texte descriptif peut provoquer le **focus** sur le champ de formulaire associé : le curseur va se placer directement dans le champ.
889 |
890 | Un texte descriptif peut être placé dans la page avec la balise double `label` :
891 |
892 | ```html
893 |
894 |
899 | ```
900 |
901 | Dans ce cas, on voit que pour pouvoir cibler un élément de formulaire, il faut pouvoir **l'identifier**, d'où l'utilisation de l'attribut `id` dans l'input.
902 |
903 | > Rappelez-vous qu'un identifiant doit être unique !
904 |
905 | ### La validation
906 |
907 | On peut également ajouter dans les différentes balises de formulaire des attributs de validation : indiquer qu'un champ doit être renseigné obligatoirement, ou bien qu'il doit avoir un format d'email, ou des limites inférieures et supérieures, etc...
908 |
909 | Exemples :
910 |
911 | ```html
912 |
913 |
920 |
921 |
922 |
929 |
930 |
931 |
938 | ```
939 |
940 | Attention, la validation côté HTML, donc côté client, doit **toujours** être complétée par une validation côté serveur.
941 |
942 | En effet, n'importe qui disposant d'une page web affichée dans son navigateur peut en modifier la source pour enlever ou modifier les contraintes de validation. Ainsi, il faut davantage considérer la validation côté client comme un **confort d'utilisation** pour l'utilisateur final : on peut le prévenir que l'email a un format invalide par exemple, afin d'empêcher la soumission du formulaire et avoir une saisie erronée par exemple.
943 |
944 | > Prévoyez toujours une validation côté client et une validation côté serveur
945 |
--------------------------------------------------------------------------------
/flex.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | }
8 |
9 | /* Container : donc je définis flexbox là-dessus, ainsi que l'espacement entre les enfants */
10 | .container {
11 | height: 100vh; /* vh = viewport height */
12 | display: flex;
13 | gap: 1em;
14 | flex-wrap: wrap;
15 | justify-content: center;
16 | align-content: center;
17 | }
18 |
19 | .container > div {
20 | padding: 2em;
21 | background-color: #555;
22 | color: white;
23 | }
24 |
25 | .container > div:nth-of-type(even) {
26 | background-color: rgb(255, 90, 117);
27 | }
28 |
--------------------------------------------------------------------------------
/flex.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Flexbox
9 |
10 |
11 |
24 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, quidem
25 | voluptatem? Obcaecati a distinctio ullam quisquam? Voluptate laudantium
26 | sunt repudiandae deserunt rerum voluptatem obcaecati nobis, repellat
27 | voluptas laboriosam ut consequatur ea placeat laborum blanditiis autem
28 | quis, reiciendis dignissimos debitis in! Ullam provident optio, rem
29 | aliquid placeat corrupti nam. Adipisci illo dicta id molestiae! Vel enim
30 | nisi dolorum cumque labore facilis!
31 |
32 | Pariatur perspiciatis maxime cupiditate, facere illo at eum explicabo nemo
33 | et veritatis! Minus, deserunt omnis, commodi, ipsa odit facilis recusandae
34 | assumenda in consequuntur animi illum ducimus accusamus itaque asperiores!
35 | Numquam molestias aspernatur tenetur blanditiis provident facilis aliquid
36 | repudiandae rerum voluptates.
37 |
38 |
39 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui aut tempora
40 | repellat neque dolorem dolorum vitae dicta, modi eius placeat dignissimos
41 | nemo culpa quibusdam quos fugiat dolor sequi quasi eos molestias aliquam
42 | debitis! Asperiores distinctio aliquam temporibus voluptates harum
43 | laudantium eum placeat dolor enim ullam dignissimos corporis ab assumenda
44 | labore atque culpa magnam at voluptatum, amet voluptatem. Eius officiis
45 | delectus cupiditate eligendi autem. Eaque facilis quibusdam fuga iure
46 | consectetur labore molestias iste veniam tempore sint beatae fugit quis ea
47 | id voluptatibus commodi quo minima recusandae deleniti incidunt, qui
48 | excepturi molestiae eos quasi? Accusamus illum voluptate sint vel ullam
49 | sit nam! Laborum voluptatibus quaerat delectus ex quos perferendis ipsam a
50 | magnam quidem ab odit ducimus natus, voluptates sunt voluptatem cum,
51 | voluptas neque eos? A pariatur, obcaecati, molestiae impedit autem
52 | quibusdam veritatis rerum placeat natus esse unde repellendus repellat
53 | ipsam incidunt consequuntur et dolor neque provident, deserunt explicabo
54 | vero. Vel debitis incidunt distinctio dolore, molestiae quos labore dolor.
55 | Eum ratione sit possimus, placeat adipisci, vel voluptas corrupti
56 | molestiae repellat modi a asperiores doloremque doloribus mollitia velit
57 | minima cum, consequatur nobis! Esse consequuntur quis suscipit totam
58 | officiis cumque repellendus, cum aperiam ea facilis nostrum consectetur
59 | nisi inventore blanditiis culpa voluptas sed velit iure?
60 |
61 |
62 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique soluta
63 | quos in adipisci odio necessitatibus alias numquam eligendi distinctio
64 | minima accusamus eaque beatae, officiis pariatur voluptate quaerat sed et
65 | quidem molestias voluptatum voluptas asperiores error dolorem veritatis!
66 | Incidunt fuga nulla consequatur ipsum laborum, debitis voluptate inventore
67 | assumenda maxime? Quidem ut eum maxime numquam vitae blanditiis quaerat,
68 | fugit dolore vero illo laudantium, similique quibusdam in voluptatum eos
69 | corrupti dignissimos. Laudantium repellendus, assumenda quasi cumque fuga
70 | architecto rem? Inventore quod qui nesciunt iste, dolor minus eius, vel
71 | adipisci quasi at explicabo quaerat expedita quam consequatur! Amet nemo
72 | doloribus exercitationem enim pariatur laborum, voluptate numquam possimus
73 | commodi maxime delectus et incidunt deserunt officia obcaecati similique
74 | ipsum, provident placeat a natus excepturi. Tempora numquam illo hic
75 | expedita iste minima exercitationem mollitia dolorem placeat perferendis
76 | quae debitis nam obcaecati libero repudiandae aut, laborum porro delectus
77 | iure. Doloremque ducimus obcaecati quae dolorum fugiat cupiditate ipsum
78 | maxime?
79 |
80 |
81 | Nostrum, nobis iure? Velit similique dolorem, sapiente porro omnis nisi
82 | provident quos! Quam quasi ipsa numquam quae nam officiis dolores officia.
83 | Officiis earum sequi corporis similique debitis expedita excepturi quasi,
84 | quisquam natus atque veniam fugit alias temporibus enim exercitationem
85 | perferendis porro laboriosam aut maiores cum nemo aperiam! Ipsam explicabo
86 | doloremque a ab iusto reprehenderit suscipit soluta quo maxime qui, dolor
87 | deserunt officia consequatur, inventore deleniti molestiae nostrum
88 | repudiandae illo! Architecto corporis suscipit consequuntur? Quae
89 | praesentium temporibus sapiente repudiandae tempora! Quod, vero
90 | perferendis. Fugit blanditiis inventore, voluptatum similique quos quasi
91 | eos in itaque minima laborum earum optio totam tenetur culpa illum nulla,
92 | aspernatur ratione neque recusandae! Assumenda eveniet molestiae
93 | laudantium dignissimos, dolor enim ut cumque nostrum. Sint vel vero velit
94 | ratione unde autem odit nulla molestiae ad, possimus numquam nam voluptate
95 | quod ipsam perferendis modi aut ut rem amet. Magnam enim maxime suscipit
96 | eum in blanditiis doloremque velit perspiciatis fuga expedita.
97 |
98 |
99 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi dolores
100 | nulla eos aliquid voluptate obcaecati aperiam quae asperiores totam
101 | facilis. Explicabo quibusdam id ex dicta, sequi architecto qui porro
102 | minima molestiae non voluptatum commodi esse. Ipsum omnis excepturi,
103 | corrupti eum consectetur fugiat inventore at eius hic tenetur minus
104 | pariatur nobis illum dolor! Iusto incidunt fugit placeat iste sapiente,
105 | quos perferendis maiores quia blanditiis ducimus quo illum commodi hic
106 | quam magnam distinctio! Repellendus id atque, reiciendis iste temporibus
107 | cum ea suscipit! Laudantium sint doloremque, ea dignissimos velit
108 | doloribus illum aliquid quasi eum accusantium rem eius dicta error neque
109 | sequi iusto sapiente?
110 |
111 |
112 | Laboriosam porro animi deleniti, aut quas molestiae nobis illum nulla
113 | nesciunt esse corporis iure maiores voluptatum amet? Deserunt temporibus
114 | eveniet amet dolorem maxime ipsa dolores incidunt, voluptatum quasi
115 | expedita, illum assumenda nesciunt aliquid sint autem vero! Et, porro
116 | harum voluptatem maxime rerum, saepe iste provident, officia numquam
117 | suscipit inventore asperiores. Fugiat sapiente quos incidunt quas
118 | consequatur blanditiis qui perferendis nemo ea in esse laboriosam, ipsam
119 | voluptatibus suscipit cum eum maxime quisquam animi ex quidem alias!
120 | Illum, explicabo? Id porro laboriosam nesciunt atque ex asperiores et
121 | magnam nisi totam tempore suscipit impedit sed iure facilis, tenetur quam
122 | molestias illo, iusto commodi.
123 |
124 |
125 |
126 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
127 | architecto debitis. Neque saepe natus culpa sapiente, rerum non expedita
128 | voluptas adipisci asperiores deleniti molestias sequi quos laborum
129 | aspernatur suscipit totam! Dolorem molestias qui, ab, possimus assumenda
130 | quibusdam beatae adipisci ex quidem veritatis soluta dolores doloribus
131 | asperiores! Quibusdam voluptas sequi sapiente qui quisquam sint velit
132 | reprehenderit. Consequatur at fuga ducimus natus amet voluptates sapiente
133 | illo quas sed, alias iste accusamus. Quidem veritatis fugiat quis
134 | necessitatibus labore dolor debitis eos, aliquid qui quod quasi at modi
135 | porro totam facilis minima error, illum maiores culpa sint architecto
136 | doloremque recusandae in laboriosam. Harum cum dolor, eos earum corporis
137 | reiciendis saepe optio enim nisi nihil ab et sint animi nulla perspiciatis
138 | in porro tenetur accusamus eius quo, aspernatur beatae quibusdam esse!
139 | Voluptatibus sequi nemo, expedita ab ducimus fugiat, sit labore animi iste
140 | consequatur mollitia suscipit veniam, harum porro neque? Et, fuga
141 | voluptatum voluptate dolor laborum nam tempore, eaque quas, ad accusamus
142 | assumenda quia! Hic at illo, magnam unde ducimus id. Ipsa, odio
143 | aspernatur? Vel nisi, fugiat alias qui architecto repudiandae porro
144 | voluptatibus optio dolores nemo suscipit aliquam reiciendis tenetur, nulla
145 | rerum corporis atque totam asperiores maiores ipsum voluptates? Error
146 | impedit, deserunt aliquid nulla harum accusamus.
147 |
39 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim beatae
40 | recusandae tenetur impedit natus voluptatum nulla provident! Est,
41 | officia incidunt. Vero dolor fuga consequuntur, iure voluptatibus sint
42 | sapiente quo temporibus ipsam, nobis architecto deserunt. Unde hic
43 | autem quas a at eveniet assumenda voluptatem, laboriosam quos quia
44 | architecto magni est voluptas voluptatibus optio vitae alias
45 | consequuntur ab? Laborum eaque dolorum dignissimos culpa maiores
46 | repellat fuga repudiandae similique soluta at, quia magni vitae
47 | suscipit, harum sit cupiditate ipsam. Ad voluptatum vero quo
48 | laboriosam et suscipit hic, iste consequuntur quos pariatur,
49 | reiciendis ab aspernatur. Dolore officia ipsa exercitationem,
50 | voluptates voluptatibus sapiente eligendi natus?
51 |
52 |
53 | Sit deleniti adipisci saepe voluptate blanditiis officia non,
54 | molestiae eaque. Autem, similique. Suscipit fugit enim exercitationem
55 | voluptatum natus, nisi incidunt cum! Alias distinctio provident labore
56 | eligendi explicabo cupiditate, corporis maiores atque rem rerum sed
57 | quae sapiente reprehenderit eos. Exercitationem ipsum quas laborum
58 | repellat, autem neque quasi dolorum accusantium adipisci et pariatur
59 | voluptate distinctio amet recusandae architecto, cupiditate id numquam
60 | ipsa voluptatibus dicta, asperiores molestiae. Necessitatibus, sit
61 | quasi debitis accusantium ipsa dolor consequatur voluptatibus laborum
62 | ad in quo iusto. Accusantium magni fugit alias dolores ipsa quidem a
63 | iste obcaecati doloribus, quas omnis at rem quod aliquid nisi ea nulla
64 | et libero?
65 |
66 |
67 | Pariatur impedit aspernatur reiciendis molestias, obcaecati iusto
68 | optio autem adipisci qui necessitatibus nemo esse numquam non velit
69 | eligendi, provident eaque totam, distinctio minima consequuntur
70 | dolores. Maxime neque laudantium accusantium odit cumque quasi quo
71 | eligendi explicabo inventore velit error id ipsum expedita doloribus,
72 | omnis dolor asperiores iure sapiente consectetur at! Ullam blanditiis
73 | sed soluta minus amet obcaecati velit ducimus porro, rem animi, nihil
74 | in ut explicabo quo autem magni tempora odio dolorum rerum ad id
75 | maxime eum sit. Culpa aspernatur sit error vitae dignissimos fugit
76 | ratione minus voluptate aperiam quam suscipit cupiditate mollitia in
77 | atque consectetur exercitationem qui, tenetur enim ullam!
78 |
11 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis atque
12 | facilis possimus enim itaque natus nisi explicabo! Eveniet dignissimos
13 | tempora inventore. Eius laboriosam expedita sint iste, odio voluptatum
14 | nesciunt veniam quidem! Ab tempora voluptates perferendis corrupti
15 | reprehenderit ullam illum maxime accusantium? Id sapiente quibusdam
16 | temporibus itaque in totam quasi corporis distinctio dolores magni
17 | officiis animi voluptate impedit doloribus beatae sequi voluptatum modi
18 | voluptates repellat illo quae quod dicta, ipsa esse. Voluptatem quam aut
19 | perferendis eos doloribus saepe quod iure architecto id, officiis
20 | laboriosam error nam pariatur, at sunt eius hic! Alias accusamus inventore
21 | aliquid ipsa aliquam praesentium fugit eius repellendus commodi magnam,
22 | iusto officiis dolorum itaque sequi exercitationem velit aut architecto
23 | blanditiis. Dolor vel quae quam alias similique, odio sint maxime dolores
24 | tempore dolore iure iste recusandae facere inventore maiores tenetur eum
25 | voluptatem libero itaque mollitia consequuntur ratione placeat pariatur
26 | qui. Dolores blanditiis repudiandae ducimus sunt, deserunt dolorem debitis
27 | inventore aspernatur consequuntur rerum molestias? Animi, neque
28 | consequuntur error aspernatur perferendis quod ipsam consectetur cumque
29 | nemo dolores ratione incidunt debitis doloribus accusantium a! Amet
30 | facilis, tempore doloremque laborum ad exercitationem eveniet! Illum
31 | eligendi ab recusandae sed, nemo consectetur modi incidunt asperiores unde
32 | cupiditate in iure fuga rem enim nisi harum! Facere!
33 |
34 |
35 | Molestiae ipsam illum ratione ea nulla fugiat, facilis quisquam dolorem,
36 | aliquid rem, alias aut? Officia debitis quae eum accusantium pariatur
37 | quisquam? Sequi error minus aspernatur dignissimos voluptates maiores
38 | sint, velit qui incidunt id porro vero iusto rem nostrum ipsam tenetur
39 | fuga unde quidem earum repellat nobis non? Reprehenderit minus porro
40 | tenetur vero cum, temporibus earum dicta. Eum quia rem sit mollitia at,
41 | natus distinctio minus quod repellat aspernatur adipisci necessitatibus,
42 | minima quam, possimus nisi dolores veritatis consequuntur quaerat enim.
43 | Asperiores, voluptatibus repellat iure molestias velit natus accusantium
44 | obcaecati officiis sapiente laudantium atque magni, debitis illum. Ut
45 | dolores aliquid in incidunt quis consequuntur recusandae debitis omnis
46 | voluptatem rerum ipsam id tempore atque quidem, eius doloribus at
47 | molestiae voluptates commodi. Nisi esse deserunt modi iste accusantium
48 | tenetur alias ipsa ipsum minus, et provident aspernatur itaque amet
49 | repellat incidunt mollitia ducimus veritatis quas quos obcaecati odio
50 | enim. Repellendus facilis corporis molestias dolorem, quae adipisci ex!
51 | Consectetur dolorum ipsa eveniet nihil reprehenderit at? Laudantium nam
52 | consectetur sapiente quaerat minus modi nisi a, magnam recusandae,
53 | dignissimos ex ad error iure vitae provident quidem labore debitis esse
54 | eaque suscipit itaque. Labore non est sint eius perferendis. Blanditiis
55 | vitae amet impedit neque rem quidem vel aut voluptatibus.
56 |
57 |
58 | Voluptates neque incidunt cumque dicta voluptatibus, qui cupiditate
59 | tempora, et expedita ipsa sapiente rerum perferendis, fuga commodi!
60 | Adipisci provident quasi eum suscipit ipsa esse praesentium minus?
61 | Corrupti quia nisi doloribus libero eveniet obcaecati aut molestiae rem
62 | placeat error, mollitia dolorum, soluta delectus facere magni quas
63 | repellendus. Aut rerum illum, quasi sapiente mollitia, tempora quae
64 | perferendis velit deleniti possimus magni facilis! Esse obcaecati saepe
65 | ipsum nemo dolor ipsa quo facere commodi illum atque reiciendis odio
66 | aliquam nobis, culpa, at vel nostrum eos ab ea ad adipisci maiores aut
67 | fuga! Mollitia ullam optio eveniet hic, amet deleniti dolorem vero fugiat
68 | fugit voluptatibus quod ut esse eum quidem cumque aut perspiciatis est
69 | aperiam eaque accusantium sit nihil, dolorum earum? Possimus, iure
70 | doloremque? In ipsa voluptatum eius, porro optio tempora quia deleniti
71 | natus officiis accusantium tenetur vel, repellat nulla excepturi
72 | architecto reprehenderit velit culpa quis eos cumque facere. Maxime
73 | consequuntur alias quibusdam aspernatur libero amet, eligendi ex
74 | exercitationem natus possimus. Exercitationem praesentium ratione
75 | recusandae vitae natus vero beatae quia blanditiis distinctio cupiditate
76 | in unde molestias quasi ab aliquam facilis explicabo suscipit nemo aliquid
77 | quibusdam, impedit cum commodi a! Voluptas aperiam similique non a
78 | ratione? In vero eos aliquid optio illum ullam unde voluptatibus eligendi?
79 |
80 |
81 | Quia reprehenderit, voluptatum non error magnam sed, harum, sapiente
82 | placeat quae molestias necessitatibus soluta fuga. Laudantium aliquid
83 | vitae consectetur atque repudiandae, explicabo amet quia dolorem laborum
84 | iure odio vel neque labore tempore illo ea fugit at modi doloribus dolores
85 | blanditiis inventore vero, officiis possimus? Quia, voluptates? Doloremque
86 | incidunt magni et alias laborum suscipit perspiciatis velit iste repellat,
87 | itaque, modi nulla dolores quia, ut assumenda. Mollitia cumque dolore odit
88 | magnam et recusandae ducimus illum aperiam. Optio reprehenderit veritatis
89 | architecto ea corrupti quasi, aperiam explicabo a molestiae? Asperiores ut
90 | sapiente veniam? Perspiciatis nulla ipsum quo tenetur ea! Hic esse
91 | explicabo, iste unde soluta quis deserunt, odio sit expedita nulla, dolor
92 | autem porro? Quos ex a quae enim eligendi dicta labore possimus earum
93 | distinctio. Nulla reprehenderit repellat iusto corrupti possimus suscipit,
94 | numquam non illo dolores ex voluptatibus ut, inventore voluptate omnis
95 | necessitatibus sed velit rerum praesentium cupiditate fuga. Nulla
96 | cupiditate sint odio consectetur suscipit maxime, dignissimos quas fugit
97 | similique minima libero ullam ducimus quisquam, laborum omnis voluptates
98 | pariatur fugiat. Dignissimos modi incidunt beatae quidem, maxime dolore
99 | fugit quibusdam ipsum unde quaerat autem ut distinctio delectus nihil eum.
100 | Consectetur voluptates cupiditate ducimus nobis, impedit, minima dolores
101 | error veritatis qui harum adipisci odio consequuntur ipsum.
102 |
103 |
104 | Ut corporis delectus quia ducimus corrupti explicabo harum placeat
105 | voluptatibus a consectetur modi amet eius, temporibus et quasi,
106 | repudiandae sapiente nesciunt itaque sit? Sunt rerum consectetur corrupti
107 | vel, sed quaerat possimus, sint nihil aliquam ex numquam eaque, odio
108 | voluptas nisi reiciendis voluptates voluptatibus doloremque illo soluta
109 | corporis! Assumenda et molestiae distinctio aperiam! Accusantium
110 | voluptatem architecto, nisi doloribus est, itaque saepe voluptatum
111 | consequatur animi neque inventore laudantium aut perspiciatis aspernatur
112 | maiores exercitationem mollitia, hic obcaecati dignissimos incidunt ad
113 | atque! Quisquam accusamus, molestias laudantium aut provident dolore ut
114 | quae non reprehenderit officia ratione eum ab natus quos nihil vel dolorum
115 | blanditiis incidunt, architecto dolorem odit animi laborum! Ut, voluptate,
116 | aspernatur explicabo iusto dicta ipsum quasi nam possimus placeat ipsa
117 | eligendi eveniet consectetur? Ipsa, iure ullam dicta reprehenderit
118 | veritatis esse rem laborum est odit, sequi fuga eos magni nobis nam. Harum
119 | voluptatibus nemo numquam eveniet ut molestias maxime, commodi mollitia
120 | soluta sed, doloribus unde rem recusandae reprehenderit repudiandae
121 | blanditiis, assumenda voluptates dolore saepe! Veritatis fuga, nostrum at
122 | corrupti reiciendis ratione tempore ut eum fugit nam modi commodi
123 | accusantium consequatur ipsum, quo reprehenderit eligendi nihil assumenda
124 | minima magnam accusamus doloribus? Dolore similique officia dolores. Id at
125 | iste qui eveniet provident voluptatem vero temporibus modi.
126 |
127 |
128 | Illum consectetur ut delectus, dolorem quasi fugiat sunt architecto nihil
129 | minus dolor corporis libero alias eveniet obcaecati vel natus quidem!
130 | Ducimus sed ipsum porro laboriosam at optio fugit expedita saepe earum
131 | tempore cupiditate quasi fuga architecto laudantium eveniet aliquid,
132 | veritatis consequatur consectetur minus maxime perferendis eius.
133 | Cupiditate aperiam itaque tempora similique explicabo nisi, voluptatibus
134 | veritatis, soluta doloribus consectetur ea laborum eligendi recusandae.
135 | Dignissimos commodi vitae sed neque similique officia quas eum beatae?
136 | Quos temporibus earum labore ad placeat incidunt odit debitis quas. Veniam
137 | itaque officia, in iste fuga suscipit ullam. Temporibus, praesentium
138 | voluptatum dolor necessitatibus repellat odit eius. Minus molestiae
139 | ratione iure quisquam magnam tenetur quaerat illum quae neque porro,
140 | officiis soluta alias, nobis fuga accusantium id laborum veniam! Numquam
141 | esse nostrum ut saepe et magnam harum nisi mollitia voluptate debitis,
142 | maxime, aperiam qui odio recusandae totam beatae cum facere incidunt illo
143 | velit? Illum, quasi vitae voluptate, rerum numquam soluta reprehenderit
144 | blanditiis, asperiores consequatur optio nihil incidunt repudiandae labore
145 | temporibus neque. Corporis, ratione eaque. Cumque delectus ullam, aliquam
146 | perspiciatis assumenda consequatur, repellendus nam autem explicabo
147 | ducimus, fuga nobis tenetur. Adipisci, porro officia temporibus
148 | perferendis ad animi consectetur, aspernatur dignissimos distinctio earum
149 | soluta rerum similique? Facilis reprehenderit aspernatur libero impedit
150 | quaerat.
151 |
152 |
153 | Nostrum quia nam, voluptate perspiciatis laboriosam saepe et aliquid
154 | ducimus ratione nulla ex dolore consectetur quaerat distinctio. Expedita
155 | magnam explicabo, aliquid soluta vero odio harum, nihil eveniet id est eum
156 | dignissimos unde corporis. Esse nostrum laboriosam culpa quis atque sunt
157 | molestiae aperiam facilis reprehenderit reiciendis dolorem excepturi
158 | placeat tempora debitis rerum voluptatibus sint, eaque, praesentium
159 | perspiciatis at minima dicta numquam! Cumque itaque natus dignissimos
160 | perferendis! Quo tenetur quae natus facilis illum nulla, at maxime sit
161 | provident dolore ullam magnam beatae. Et aperiam magnam earum nihil
162 | necessitatibus blanditiis ipsa veritatis molestias impedit architecto
163 | iusto ut velit magni, delectus assumenda consectetur optio odio ullam quia
164 | commodi tempore nemo nostrum. Voluptate culpa vitae ex. Sint, qui.
165 | Repellat consectetur assumenda molestias consequatur ducimus nemo, iure
166 | dolorum eius laboriosam rem, repellendus unde incidunt dignissimos facilis
167 | eos minima ut distinctio totam fuga aliquid libero officia. Nulla
168 | necessitatibus accusantium error deserunt! Alias incidunt expedita non,
169 | quam, temporibus id excepturi quod amet delectus obcaecati iusto commodi!
170 | Corrupti maxime, quo repellendus quos iusto nesciunt perferendis quis,
171 | obcaecati quibusdam cum reprehenderit facere ratione ad quae perspiciatis
172 | nisi repudiandae ducimus voluptatem, facilis ex qui consectetur? Corporis,
173 | eaque. Consequatur ducimus cum beatae laudantium delectus ullam aut atque.
174 | Veritatis totam inventore similique necessitatibus!
175 |
176 |
177 | Dolorem quisquam culpa distinctio quos. Incidunt eum nesciunt nam odio.
178 | Ullam aliquam provident ab quis. Ad debitis voluptates fugit animi neque.
179 | Suscipit officiis magnam hic amet culpa explicabo nihil quis numquam,
180 | earum, tempore eius laborum officia, dolorum repellat nobis qui. Nam
181 | dolore nemo sunt magni. Deserunt repellendus, dicta illum saepe fugit
182 | reprehenderit modi doloremque exercitationem esse debitis impedit nulla
183 | numquam sequi neque quam vero ipsa hic quos accusantium. Rerum ratione
184 | labore quas ullam. Fugit error architecto, reiciendis delectus harum id,
185 | nobis minima voluptate reprehenderit, amet eum dolor quas! Exercitationem
186 | necessitatibus nesciunt sed, nostrum omnis aliquid ipsum, repellat iure
187 | et, totam sint atque itaque quas amet facere rerum. Beatae ipsum aliquam
188 | repudiandae quidem quaerat dolorem veritatis officia magni ex aut quisquam
189 | pariatur possimus omnis fuga, voluptas nulla architecto quam, totam
190 | dolorum? Veniam, quaerat explicabo. A provident dolores fuga sint veniam
191 | enim! Saepe consectetur quod ea sunt sapiente maxime quidem quae
192 | voluptatibus nulla libero enim quos doloribus a laboriosam error optio
193 | corrupti, repellat velit nemo alias veritatis reprehenderit quo officia
194 | accusantium? Dolores repellendus dolorem corporis ut adipisci tenetur
195 | nihil accusantium, ducimus consequatur natus quis optio eveniet sed odit
196 | asperiores, cumque velit hic mollitia sequi at esse exercitationem
197 | pariatur. Odit dolorem iure deserunt?
198 |
199 |
200 | Deleniti doloribus maiores commodi, odit, iste incidunt ullam consequuntur
201 | cumque quidem iusto eum laboriosam quos eius minus tempora quas ratione
202 | cupiditate laborum impedit officia itaque reprehenderit quam aliquam. Eius
203 | qui et iusto culpa pariatur animi, odio nemo perspiciatis esse eligendi
204 | aperiam explicabo. Tempora rem nemo labore repellendus ducimus nesciunt
205 | provident tempore mollitia optio, porro eligendi voluptatum distinctio
206 | laboriosam eos inventore, incidunt at non eaque reiciendis aut et
207 | pariatur! Quas, ea magni totam repudiandae harum tempore, consequuntur
208 | illo, vitae cum culpa ipsa numquam quae ex rem corporis. Itaque quo ut
209 | pariatur, veniam quod, dignissimos quasi iste eos minima natus iure eius
210 | maiores asperiores quas similique eum, tenetur laborum perspiciatis ad
211 | soluta quisquam magni reiciendis omnis. Est, molestiae nihil! Minus nam,
212 | voluptas natus culpa esse dolorum quas iusto porro ratione iure impedit
213 | nesciunt ipsa dolores accusantium quidem, quo inventore ipsam laborum
214 | temporibus dolorem est fuga obcaecati! Unde nostrum porro odio in nam
215 | quia! Suscipit reiciendis sunt fugit aliquam! Commodi veniam recusandae
216 | iure iusto eos ab earum, neque est dolorem ea at culpa ratione nobis
217 | distinctio quod molestias blanditiis beatae amet adipisci labore suscipit
218 | enim? Eligendi quam libero quibusdam molestias? Eaque tempore esse quis
219 | sequi molestias consequuntur quas eveniet odit veniam rerum. Laborum.
220 |
221 |
222 | Error eligendi delectus, magnam laboriosam ex quisquam. Officiis, ad fuga?
223 | Dolorem corrupti voluptas voluptatibus magnam maiores consectetur quisquam
224 | minus dolor aperiam ullam corporis, officia in iure ducimus nisi adipisci
225 | obcaecati nobis fugiat perspiciatis ipsum iusto commodi tempora provident
226 | ab? Perspiciatis quae et, quos deleniti ullam sint est cum iusto
227 | voluptates voluptate aperiam nostrum eaque illo, recusandae maiores!
228 | Eligendi ea odit officiis facere ut pariatur perspiciatis sint modi dolore
229 | iusto, ratione distinctio molestiae, repellendus voluptates. Nostrum quasi
230 | necessitatibus dolore id pariatur sunt nam sed. Nostrum at corrupti
231 | itaque, molestiae harum, recusandae adipisci earum debitis deleniti
232 | eligendi necessitatibus mollitia rerum, consectetur aliquid incidunt vel.
233 | Animi temporibus velit quasi, soluta adipisci fugiat! Nulla labore ipsa,
234 | in vitae nostrum libero quis voluptates odit voluptate. Ratione iusto
235 | soluta molestias impedit. Aspernatur iste at nesciunt quam laboriosam
236 | possimus. Dolorum, laboriosam assumenda, tenetur, ipsam non consectetur
237 | quam sint at aliquid impedit quis distinctio? Veniam ad aperiam nam
238 | pariatur neque. Omnis tenetur saepe et dicta nulla ea asperiores illo
239 | accusantium minus. Excepturi est ullam ex eligendi rem, quae itaque,
240 | minima expedita beatae laboriosam cumque rerum accusantium blanditiis
241 | dolore quia, laborum atque dolores soluta sunt. Ex omnis eius vel, quasi
242 | est libero facere ut, accusamus culpa temporibus tenetur dicta!
243 |
244 |
245 | Error neque culpa assumenda rerum eos autem quos iste molestias nisi
246 | sapiente at repudiandae eveniet illum minus debitis possimus magnam
247 | maiores, delectus aut, voluptates eligendi? Tempore explicabo expedita
248 | possimus quasi neque aliquam in tenetur assumenda commodi placeat omnis
249 | ullam ea ad vitae eum illum facere praesentium, cupiditate officia
250 | mollitia aspernatur facilis eaque consectetur. Rerum animi dicta ea at
251 | corporis. Tenetur fugiat incidunt possimus reprehenderit rerum porro
252 | consequatur, explicabo odio iure sed placeat a vero dolores! Officiis
253 | vitae inventore libero odit, quod minus? Officiis assumenda qui, alias
254 | repudiandae ducimus corrupti accusamus aspernatur debitis et maxime modi
255 | nulla laborum tempore! Maiores sequi nesciunt sapiente culpa suscipit,
256 | officia consectetur quae officiis commodi nisi saepe, animi, voluptas
257 | dicta voluptates ut? Exercitationem voluptates earum, dicta et, officiis
258 | eum debitis porro repellendus, deleniti laborum nihil? Expedita excepturi
259 | ipsam nobis repellat amet? Rem ipsum exercitationem laboriosam
260 | voluptatibus asperiores magnam ratione consequuntur sint labore
261 | repellendus deserunt ad nisi recusandae, tempore doloribus ex quidem nam
262 | autem corrupti sequi sapiente quis! Incidunt veniam porro tempore
263 | asperiores ad laudantium non voluptates corrupti ullam, adipisci illum
264 | rerum voluptatem quaerat quis laborum temporibus sunt totam? Enim
265 | explicabo voluptatum ullam id doloremque maxime, iste exercitationem
266 | possimus accusantium, molestias cum placeat dolor sed eum eos?
267 |
268 |
269 | Cum, ad aut. Aliquam eaque deleniti veritatis tenetur omnis! Beatae,
270 | adipisci eveniet culpa numquam praesentium repudiandae quaerat voluptate
271 | sit nisi reprehenderit odio, quas, maxime vel quisquam dolorem ipsam vero
272 | modi dicta? Nobis, voluptatem quod? Velit, ipsum odio aperiam assumenda
273 | quae debitis, incidunt magni ullam reprehenderit et facilis voluptate
274 | accusamus nobis aut voluptates cum iste quis corrupti sunt perferendis.
275 | Quos possimus, a officiis qui, aliquam amet inventore officia, totam
276 | itaque dolore accusamus corrupti animi atque aperiam consectetur nisi cum
277 | blanditiis vel deserunt delectus! Enim, repudiandae asperiores! Soluta
278 | velit nesciunt, quaerat natus ut cum pariatur dolore dicta aut harum
279 | tempora beatae amet tempore asperiores laborum quia temporibus, corporis
280 | sit veritatis tenetur. Ea iusto eveniet reiciendis nulla, quis itaque
281 | adipisci repellat ipsa animi quam maxime sequi sed voluptatum deleniti,
282 | dolores ad soluta harum ab. Praesentium earum eligendi, repellendus quod
283 | rerum placeat molestiae eveniet vitae vel odit ullam expedita commodi
284 | ducimus cumque dolor dolorem nemo amet cupiditate perferendis beatae
285 | aspernatur sunt recusandae! Dolorem corrupti maiores deleniti cumque quam
286 | obcaecati suscipit nemo consequatur hic sapiente, excepturi asperiores
287 | mollitia earum saepe? Impedit mollitia consequatur dignissimos dolor sint
288 | eligendi facilis suscipit delectus quis. Blanditiis sapiente perspiciatis
289 | quaerat iusto ipsum maxime mollitia optio alias voluptate reprehenderit,
290 | magni corporis!
291 |
292 |
293 | Ab placeat eligendi hic eaque vel! Dignissimos laboriosam, praesentium vel
294 | rerum harum nobis aspernatur similique at corrupti officia ratione ipsam
295 | fugiat, facere ut hic sint inventore eius iusto ex impedit ducimus esse
296 | repellat optio vero? Non, quod voluptas! Excepturi numquam dolores ullam
297 | perspiciatis placeat illum nostrum? Adipisci eos, ipsum cum unde
298 | reprehenderit sed deserunt reiciendis assumenda facilis modi incidunt!
299 | Magnam, numquam est! Ex ducimus quasi explicabo in, consectetur cumque
300 | officia nulla voluptas aliquam unde quia illo fuga a possimus impedit quis
301 | ad assumenda quae maxime culpa at. Deserunt optio voluptatum culpa at
302 | voluptatibus recusandae eligendi, pariatur beatae suscipit nesciunt,
303 | molestiae laboriosam impedit, quod dolor debitis. Dignissimos unde
304 | molestiae consequatur, quae maiores, aperiam ducimus tempore dolor dolores
305 | corrupti aut perferendis distinctio velit doloremque cumque magnam fugit
306 | quisquam? Suscipit dolore mollitia perferendis ducimus earum vitae
307 | perspiciatis ullam ut dignissimos eligendi tenetur ex provident molestias
308 | pariatur dolorum exercitationem voluptatum aperiam accusantium accusamus
309 | blanditiis, aliquam similique sunt. Error vero expedita aliquam rerum
310 | quidem necessitatibus fugit optio fugiat minima eos obcaecati quibusdam
311 | excepturi illo, odit commodi explicabo porro. Quibusdam tempora voluptatum
312 | placeat, fugit atque id magni veniam harum libero ratione iusto odit
313 | pariatur quod ad eum! Quae rem aperiam perferendis. Hic nisi magnam ipsum
314 | fuga.
315 |
316 |
317 | Esse magni nam at eum est officia minus nihil impedit, modi laborum porro
318 | magnam autem expedita? Quas ratione obcaecati adipisci. Eveniet
319 | perferendis, nostrum fugiat repudiandae voluptatum nam iure natus quas
320 | asperiores maxime cupiditate velit sed consequatur perspiciatis, at fuga
321 | quia sint aliquam aut mollitia delectus aliquid alias tempore. Iste
322 | eligendi in nisi doloremque voluptate repellat asperiores, recusandae
323 | ratione! Blanditiis voluptatem ipsum perspiciatis odio quis provident,
324 | similique ea sint minima fuga illum aut vero magnam, nam, ex aliquid omnis
325 | inventore iusto nihil! Labore odit commodi esse. Laudantium earum commodi
326 | officiis maiores esse quod ex eum rem quis ea fugiat voluptatibus alias
327 | dolor labore, nulla sunt omnis non molestias. Recusandae accusantium nulla
328 | voluptatibus aspernatur facilis totam quidem vitae magni voluptate odit
329 | molestias dolorum cupiditate nesciunt tempore labore explicabo, suscipit
330 | incidunt ad error aliquam illum aperiam debitis hic fugit! Provident illum
331 | architecto animi. Earum quos officiis inventore fugit neque dolor, officia
332 | consequuntur nemo est blanditiis provident voluptate, sed explicabo amet
333 | dicta nulla eveniet! Debitis, repellendus? Impedit neque odit debitis
334 | repellendus cum consectetur exercitationem voluptates deserunt commodi
335 | labore perspiciatis, magnam qui fugiat itaque omnis voluptatibus quisquam
336 | error inventore. Consectetur dicta vero officia quam magni aperiam id
337 | placeat assumenda nesciunt voluptatibus, doloremque suscipit sint
338 | possimus?
339 |
340 |
341 | Error excepturi recusandae ipsa voluptatem a quam possimus officia sequi
342 | sunt nulla laboriosam obcaecati, officiis quod quo? Excepturi eligendi
343 | quae numquam? Sit accusamus vel, temporibus atque rerum, iure nihil
344 | aliquid aliquam ut molestias esse amet voluptatum, magni rem quae labore
345 | doloribus! Sed voluptatum non accusantium aliquam sapiente itaque
346 | excepturi nihil nobis. Totam rem ex nostrum magnam obcaecati, quam, quas
347 | commodi consequatur soluta fugit incidunt! At ducimus autem ut quae ullam
348 | obcaecati velit qui vel! Modi harum, corrupti autem aliquid consectetur,
349 | deserunt distinctio et ab voluptas soluta cupiditate omnis fugiat
350 | blanditiis accusamus, sequi quis unde quae eius impedit ut tempora amet
351 | odio esse maxime. Non quisquam minima nisi, exercitationem sequi
352 | repudiandae quam recusandae voluptate enim! Voluptatibus quasi
353 | consequuntur repudiandae, officia totam aliquid nesciunt perspiciatis
354 | earum dolorem blanditiis assumenda adipisci incidunt est, excepturi at
355 | iusto ullam facere deleniti architecto. In hic eligendi tempore expedita
356 | quis aperiam. Eum molestias exercitationem earum facere sunt voluptatibus,
357 | rerum tempora consequatur atque similique libero voluptates quisquam.
358 | Tempore nobis commodi amet velit nisi ea quasi magnam voluptatem laborum
359 | sunt facilis, molestiae nesciunt aperiam a rem est illum sequi pariatur
360 | saepe at eius culpa. Veritatis temporibus soluta inventore alias voluptate
361 | magnam quod, repellat perferendis maiores porro ad eos optio!
362 |
307 | ```
308 |
309 | ## Les chemins relatifs et absolus
310 |
311 | Dans la section ci-dessus, décrivant la balise `img`, on a indiqué dans l'attribut `src` un chemin vers l'image à afficher.
312 |
313 | Ce chemin peut être soit **absolu**, soit **relatif**.
314 |
315 | ### Chemin absolu
316 |
317 | Un chemin absolu désigne un chemin **complet** vers une ressource.
318 |
319 | Le terme complet signifie que les éléments inclus dans le chemin vont de la **racine** jusqu'au nom du fichier.
320 |
321 | Exemple :
322 |
323 | ```html
324 | 
325 | ```
326 |
327 | Ici, j'utilise un chemin local, donc sur ma machine. La racine désigne la lettre du lecteur, puis l'ensemble du chemin à parcourir jusqu'au fichier.
328 |
329 | On peut également définir des chemins absolus se trouvant sur internet :
330 |
331 | ```html
332 | 
333 | ```
334 |
335 | > Note : il est possible que Google retire cette image plus tard, puisqu'elle fait référence à un événement particulier, le nouvel an chinois de 2022. C'est donc normal si en suivant ce lien plus tard qu'en Février 2022, le fichier n'existe plus
336 |
337 | Ici, la racine de mon chemin est `https://www.google.com/`, puis l'ensemble des dossiers à parcourir pour aller chercher le fichier d'extension `.gif`.
338 |
339 | ### Chemin relatif
340 |
341 | Un chemin relatif, quant à lui, n'inclura pas l'ensemble du chemin du fichier.
342 |
343 | A la place, on va désigner un chemin **relativement au répertoire courant**.
344 |
345 | Comment déduire le répertoire courant ?
346 |
347 | Par exemple, si je me trouve dans le fichier `index.html` et que je souhaite intégrer une image, alors je vais regarder le répertoire dans lequel se trouve `index.html` : c'est mon répertoire courant.
348 |
349 | Ensuite, si j'ai dans le même répertoire un dossier `img/`, comme c'est notre cas ici, je peux le désigner directement, puis indiquer l'image se trouvant dans `img/` :
350 |
351 | ```html
352 | 
353 | ```
354 |
355 | Alors, lorsqu'on va afficher la page, le navigateur va **résoudre** automatiquement le chemin en partant de notre répertoire courant. Pour ce faire, il prend en compte le fichier que nous sommes en train de consulter, et résout le chemin vers l'image.
356 |
357 | > Les chemins relatifs sont donc _généralement_ à privilégier : ce sera plus utile pour déployer une maquette en ligne, car elle pourra fonctionner de la même façon que votre version locale
358 |
359 | ## `div` : la balise de division de contenu
360 |
361 | Nous avons déjà vu ensemble quelques balises et leur utilité. En réalité, il existe une autre balise à vocation plus généraliste : la balise `div`.
362 |
363 | Elle va vous permettre de déclarer des conteneurs (c'est une balise double), mais sans leur donner une signification particulière dans le code HTML. En gros, si vous n'avez pas besoin d'un titre, d'un paragraphe, d'un lien, etc...mais que vous avez quand même besoin d'occuper un espace, pour un contenu, alors vous pouvez utiliser une div.
364 |
365 | La syntaxe est très simple, comme une balise double :
366 |
367 | ```html
368 | 