-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
692 lines (666 loc) · 34.9 KB
/
Copy pathindex.html
File metadata and controls
692 lines (666 loc) · 34.9 KB
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="normalize.css"> <!-- Classic normalize for lazy CSS -->
<link rel="stylesheet" href="style.css"> <!-- Generated CSS -->
<title>Exposé SI28 - HTML/CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css">
<!-- Syntax coloration style -->
<link rel="stylesheet" href="https://use.typekit.net/jvx6bxh.css"> <!-- Custom font -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Navigation icons -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<!-- Syntax coloration script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- JQuery for lazy JS -->
</head>
<body>
<header>
<!-- Presentation section, with chapter selection -->
<h1>Exposé SI28 - HTML/CSS</h1>
<nav>
<ul>
<li>Histoire
<div class="detail">
<ul>
<li>Partie 1</li>
<li>Partie 2</li>
<li>Partie 3</li>
</ul>
</div>
</li>
<li>HTML
<div class="detail">
<ul>
<li>Partie 1</li>
<li>Partie 2</li>
<li>Partie 3</li>
</ul>
</div>
</li>
<li>CSS
<div class="detail">
<ul>
<li>Partie 1</li>
<li>Partie 2</li>
<li>Partie 3</li>
</ul>
</div>
</li>
</ul>
</nav>
</header>
<main>
<!-- Each article is a slide, add a specific class or id to create css for a specific slide -->
<article>
<div class="slide-title">La petite histoire du HTML</div>
<div class="long-text">
<p>
L'hypertexte Markup Language ou généralement abrégée «HTML» est un langage de balise permettant la
création d'un site. Dans les années 1989-1990, un informaticien Tim Berners-Lee invente le Worl Wide
Web. Le HTML est une des trois inventions issus du WWW avec le Hypertext Transfer Protocol (HTTP) et
les
adresses web. La première version du HTML comprend le titre du document, la structuration du texte
en
titres, sous-titres, listes ou texte brut, les hyperliens mais aussi un principe de référencement.
Tim
Berners Lee base le html sur le SGML (Standard Generalized Markup Language) qui est un langage
généralisé des balises standardisées afin d'attirer les entreprise sur le html.
</p>
<p>
À la fin des années 1993, le HTML qui est alors a sa version 1 voit un effet de normalisation. On
l'appelle dorénavant HTML +. Malheureusement, jusqu'à la fin des années 1990 le html est défini par
les
implémentations des navigateurs. L'arrivé du navigateur NCSA Mosaic amène deux éléments majeurs :
l'insertion des images et l'introduction des formulaires.
</p>
<p>
Le 13 novembre 1993, l'apparition du nouveau navigateur Netscape Navigator 0.9 permet l'ajout de
nombreux éléments : attributs de texte, centrage etc. Maintenant le html et les navigateurs prennent
en
compte le design et même élargissent ses capacités notamment avec le CSS. Le protocole décrivant
HTML
2.0 est finalisé à la fin de l'année 1995. Il décrit le HTML d'avant juin 1994 c'est à dire sans les
nombreuses mise à jour dû au navigateur Netscape Navigator 0.9. Dan Conelly est le principal
rédacteur
de ce document.
</p>
<p>
En décembre 1997 le W3C ( World Wide Web Consortium ) fondé par Tim Berners-Lee en 1994 publie le
HTML4.0. Les principales nouveautés sont la séparation remarquable entre la structure et la
présentation
du document mais aussi la standardisation des éléments de style et des scripts. D' autres éléments
sont
ajoutés notamment la balise framset, transitional ou encore strict. Dans les années 2000, les
informaticiens préfèrent s'atteler au XHTML et oublient le HTML. Ce n'est qu'en mars 2007 que la W3C
décide de relancer le développement du html, avec à la tête des recherches Chris Wilson (Microsoft).
</p>
</div>
</article>
<article>
<div class="slide-title">L'historique du CSS</div>
<div class="long-text">
<p>Le CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui permet
la
mise en forme d'une page web. Créé par la W3C dans les années 1990 , il est totalement pris en
charge
par les navigateurs dans les annés 2000. La première réelle proposition de feuilles de style est
proposée par Hakon Wium Lie. Très vite, Dave Raggett qui est alors le principal éditeur du projet de
spécification HTML3 publie un document évoquant le travail de Hakon Wium Lie. La spécification CSS1
finale est publiée le 17 décembre 1996. La première version du CSS ne permet pas une mise en page
mais
seulement une "mise en style" ( police,couleur, caractère...).
</p>
<p>
En 1997, l'etude du CSS est confiée à une équipe du W3C presidé par Chris Lilley. Ce groupe contient
des
representants des plus grands navigateurs.
</p>
<p>
C'est en mai 1998 que la seconde version du CSS, avec ses 70 nouvelles propriétés, apparaît. Des
problèmes d'implémentation du CSS conduise le W3C à sortir en 2001 une version revue du CSS2. Le
développement du CSS3 débute dès 1999. Cependant le développement est très difficile avec les
problèmes
de mise à jour et d'implémentation. L'évolution du CSS est constante et il a fallu plus de 10 années
pour finaliser sa version 3.
</p>
</div>
</article>
<article>
<div class="slide-title">L'historique du CSS</div>
<div class="long-text">
<p>CSS (Cascading Style Sheets ou en français "Feuilles de style en cascade") est utilisé pour styliser
et
mettre en page des pages Web - par exemple, pour modifier la police, la couleur, la taille et
l'espacement de votre contenu, le scinder en plusieurs colonnes ou ajouter des animations et autres
éléments décoratifs. Ce module vous permet de commencer en douceur votre chemin vers la maîtrise de
CSS
avec les bases de son fonctionnement, de sa syntaxe et de la façon dont vous pouvez commencer à
l'utiliser pour ajouter du style au HTML.
</p>
</div>
</article>
<article>
<div class="slide-title">Ajouter CSS à notre document</div>
<div class="long-text">
<p>Pour commencer, on doit signaler au document HTML qu'on souhaite utiliser des règles CSS. Vous
rencontrerez trois possibilités pour appliquer CSS à un document HTML. Nous nous contenterons de
présenter la méthode la plus utilisée qui est aussi la plus utile — créer un lien vers la feuille de
style CSS depuis l'en-tête du document HTML.
</p>
<p>
Avec votre éditeur de code, dans le dossier où se trouve le document HTML, créez un fichier et
sauvez le sous le nom styles.css. L'extension .css indique que c'est un fichier CSS.
</p>
<p>
Pour lier styles.css à index.html ajoutez la ligne suivante dans la section
<code><head></code> du document HTML :
</p>
<p style="text-align: center;">
<code><link rel="stylesheet" href="styles.css"></code>
</p>
<p>Cet élément <code><link></code> indique au navigateur la présence d'une feuille de style, grâce
à l'attribut
<code>rel</code> ; la valeur de l'attribut href donne la localisation du fichier CSS.
</p>
</div>
</article>
<article>
<div class="slide-title">La propriété "display"</div>
<div class="long-text">
<p>
La propriété CSS display est la plus importante pour contrôler la mise en page. Chaque élément a une
valeur display par défaut dépendante du type de l'élément. Les valeurs par défaut de la plupart des
éléments sont block ou inline. Un élément block est souvent appelé un élément block-level. Un
élément inline n'est jamais appelé autrement qu'un élément inline.
</p>
<h2>block</h2>
<p style="border: 2px solid black;">
div est l'élément block-level standard. Un élément block-level commence sur une nouvelle ligne et
s'étire autant qu'il peut sur la gauche et la droite. D'autres éléments block-level courant sont p
et form, et les nouveaux en HTML5 sont header, footer, section, et plus.
</p>
<h2>inline</h2>
<p>
<code>span</code> est l'élément inline standard. Un élément inline peut encadrer du texte dans un
paragraphe <span><code><span>comme ceci <span></code></span> sans
interrompre le flux de ce paragraphe. L'élément <code>a</code> est l'élément
inline le plus courant, puisque vous l'utilisez pour vos liens.
</p>
<h2>none</h2>
<p>
Une autre valeur display courante est <code>none</code>. Quelques éléments spéciaux comme
<code>script</code> l'utilisent par
défaut. <code>display: none;</code> est très utile pour masquer ou afficher facilement des éléments
en CSS ou en
Javascripts sans avoir à les supprimer et les recréer dans le DOM.
</p>
<p>
La différence entre <code>display: none;</code> et <code>visibility: hidden;</code> est que
<code>display: none; </code> masque totalement l'élément et annule des propriétés telles que margin,
padding, width, height...tandis que <code>visibility: hidden;</code> masque seulement l'élément, ce
qui peut laisser des espaces vides.
</p>
</div>
</article>
<article>
<div class="slide-title">position</div>
<div class="long-text">
<p>
Pour des mise en page plus complexes, nous devons parler de la propriété CSS <code>position</code>.
Elle a plusieurs
valeurs possibles.
</p>
<h2>static</h2>
<pre>
.static{
posision: static;
}
</pre>
<p style="position: static; border: 5px solid green;">
<code class="code_title"><div class="static"></code> <br>
static est la valeur par défaut de tous les éléments. Un élément avec <code>position: static;</code>
n'est positionné d'aucune manière spéciale. Un élément static est dit non positionné et un élément
avec une propriété position ayant une valeur autre que static est dit positionné.
</p>
</div>
</article>
<article>
<div class="slide-title">position</div>
<div class="long-text">
<h2>relative</h2>
<pre>
.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -30px;
left: 30px;
background-color: white;
width: 500px;
}
</pre>
<p class="relative1" style="border: 5px solid green;">
<code class="code_title"><div class="relative1"></code><br>
relative se comporte de la même façon que static sauf si vous ajoutez quelques propriétés en plus.
<br><br>
</p>
<p class="relative2" style="border: 5px solid purple;">
<code class="code_title"><div class="relative2"></code><br>
Ajouter les propriétés <code>top</code> ,<code>right</code> , <code>bottom</code> et
<code>left</code> à un élément positionné en relative va le placer ailleurs que sa position normale.
Le reste du contenu ne sera pas ajusté pour prendre la place dans l'espace laissé par l'élément.
</p>
</div>
</article>
<article>
<div class="slide-title">position</div>
<div class="long-text">
<h2>fixed</h2>
<p>Un élément positionné en fixed est positionné par rapport a la fenêtre du navigateur, ce qui signifie
qu'il reste toujours à la même place même si la page défile. De la même manière qu'avec un élément
positionné en relative, nous pouvons utiliser les propriétés <code>top</code>, <code>right</code>,
<code>bottom</code> et <code>left</code>.
</p>
</div>
</article>
<article>
<div class="slide-title">position</div>
<div class="long-text">
<p>
<code>absolute</code> est la valeur la plus délicate. <code>absolute</code> se comporte comme fixed
sauf que son positionnement
est relatif à l'élément parent positionné le plus proche au lieu d'être relatif à la fenêtre du
navigateur. Si un élément positionné en absolute n'à aucun élément parent positionné, il utilise le
corps du document et se déplace avec le document au défilement de la page. N'oubliez-pas qu'un
élément
"positionné" est un élément dont la position est tout sauf <code>static</code>.
</p>
<p>
Voici un exemple simple :
</p>
<pre>
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}
</pre>
<div class="relative" style="border: 4px solid green;">
<code class="code_title"><div class="relative"></code><br>
Cet élément est positionné en relative. S'il était positionné en <code>position: static;</code> son
élément
enfant positionné en absolute s'échapperait et serait positionné de manière relative au corps du
document.
<div class="absolute" style="border: 4px solid purple;">
<code class="code_title"><div class="absolute"></code><br>
Cet élément est positionné en absolute. Sa position est relative à son parent.
</div>
</div>
</div>
</article>
<article>
<div class="slide-title">float</div>
<div class="long-text">
<p>Une autre propriété CSS utilisée pour la mise en page est float.
Float est prévu pour entourer une image avec du texte, comme ceci :
</p>
<pre>
img {
float: right;
margin: 0 0 1em 1em;
}
</pre>
<p class="thin">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQT_pmvrfR4g_-QH-Lh7fISrW0qisAp42Ge25HTbG2GaT8FGQXs&usqp=CAU"
alt="image">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore architecto expedita a ipsam ducimus
nihil hic asperiores accusantium ullam doloremque quisquam tempora modi, sunt dolore corporis totam
esse, assumenda nisi. <br>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus repellendus animi nobis sed
debitis pariatur nam itaque similique, blanditiis, id nostrum vero nihil, quis natus magnam expedita
harum quibusdam aspernatur?<br>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus architecto odio amet rem
provident ducimus reprehenderit reiciendis accusantium facere molestiae culpa nulla, laboriosam
debitis placeat corporis voluptas, qui mollitia magnam! <br>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed, eaque neque! Perferendis totam, illo
magnam, sunt obcaecati, molestias repellendus voluptates possimus aut dolores quasi nemo. Excepturi
amet odio sapiente incidunt.
</p>
</div>
</article>
<article>
<div class="slide-title">exemple de mise en page avec float</div>
<div class="long-text">
<p>C'est très courant de faire des mise en page entières en utilisant float. Voici une mise en page
en utilisant float.
</p>
<pre>
.clearfix {
overflow: auto;
}
nav {
float: left;
width: 200px;
}
section {
margin-left: 200px;
}
</pre>
<code class="code_title"
style="background: rgb(134, 208, 134);"><div class="clearfix"></code><br>
<div class="clearfix">
<nav>
<code class="code_title" style="background: pink;"><nav></code><br>
<li> <a href="http://papertoilet.com/" target="_blank">Gérer ses comptes</a> </li>
<li> <a href="https://play2048.co/" target="_blank">Empunter</a></li>
<li> <a href="http://radio.garden/visit/paris/B7DS4V1m">Assurer et sécuriser</a></li>
<li> <a href="https://29a.ch/sandbox/2011/neonflames/">Épargner</a></li>
<li> <a href="https://www.mapcrunch.com/">Nous contacter</a></li>
</nav>
<section>
<code class="code_title" style="background: yellow;"><section></code><br>
Remarquez que nous avons mis un clearfix sur le
conteneur. Ce n'est pas nécessaire dans cet exemple, mais ça le serait si la <code>nav</code>
était plus
longue que le contenu non flottant
</section>
<section>
<code class="code_title" style="background: yellow;"><section></code><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint molestiae quidem reiciendis eum
id! Nihil corporis eveniet reiciendis veniam dolorum ratione necessitatibus corrupti aperiam
eligendi dolore nesciunt, soluta obcaecati aut.
</section>
</div>
</div>
</article>
<article>
<div class="slide-title">Largeur en pourcent</div>
<div class="long-text">
<p>
Le pourcent est une unité de mesure relative au block conteneur. C'est génial pour les images : ici
nous avons une image qui a toujours 50% de la largeur de son conteneur. Essayez de réduire la taille
de la page pour voir.
</p>
<pre>
clearfix img {
float: right;
width: 50%;
}
</pre>
<code class="code_title"
style="background: rgb(134, 208, 134);"><div class="clearfix"></code><br>
<div class="clearfix">
<img src="https://www.peta.org/wp-content/uploads/2017/11/iStock-805170532_absolutimages-668x336.jpg?20190103112626"
alt="a cat">
Vous pouvez même utiliser min-width et max-width pour limiter la largeur maximale ou minimale de
l'image.
</div>
</div>
</article>
<article>
<div class="slide-title">Les sélecteurs CSS</div>
<div class="long-text">
<p>
Il existe de nombreux sélecteurs en CSS, parmis ceux-là, on retrouve des sélecteurs très spécifiques,
tels les sélecteurs de voisins directs.
</p>
<p>
<code>div + .voisin</code> correspondra à tout les éléments avec
la classe <code>voisin</code> suivant directement un <code>div</code>.
</p>
<p>
<code>div ~ .voisins</code> correspondra à tout les éléments avec
la classe <code>voisins</code> suivant directement <u>ou non</u> un <code>div</code>.
</p>
<p>
<code>div > .fils</code> correspondra à tout les fils directs de <code>div</code> avec
la classe <code>fils</code>.
</p>
<p>
<code>div .fils</code> correspondra à tout les fils directs <u>ou non</u> de <code>div</code> avec
la classe <code>fils</code>.
</p>
<p>
<code>div:first-child</code> sélectionnera le premier enfant de <code>div</code>.
</p>
<p>
<code>:empty</code> sélectionnera tout les éléments sans enfants.
</p>
<p>
<code>:checked</code> sélectionnera tout les éléments "cochés" (<code>checkbox</code>,
<code>radio</code>, <code>option</code> d'un <code>select</code>)
</p>
<p>
Et bien plus encore. Vous pouvez les retrouver tous <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes">ICI</a>.
</p>
</div>
</article>
<article>
<div class="slide-title">mise en page avec une largeur en pourcent</div>
<div class="long-text">
<p>Vous pouvez utiliser le pourcent pour votre mise en page, mais cela peut demander un peu de travail.
Dans cet exemple, le contenu de la nav s'agence de manière désagréable quand la fenêtre est trop
étroite. Cela se réduit à ce qui marche le mieux pour votre contenu.
</p>
<pre>
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
</pre>
<code class="code_title"
style="background: rgb(134, 208, 134);"><div class="container"></code><br>
<div class="clearfix">
<nav>
<code class="code_title" style="background: pink;"><nav></code><br>
<li> <a href="http://papertoilet.com/" target="_blank">Gérer ses comptes</a> </li>
<li> <a href="https://play2048.co/" target="_blank">Empunter</a></li>
<li> <a href="http://radio.garden/visit/paris/B7DS4V1m">Assurer et sécuriser</a></li>
<li> <a href="https://29a.ch/sandbox/2011/neonflames/">Épargner</a></li>
<li> <a href="https://www.mapcrunch.com/">Nous contacter</a></li>
</nav>
<section>
<code class="code_title" style="background: yellow;"><section></code><br>
Quand cette mise en page est trop étroite, la nav est écrasée. Pire, vous ne pouvez pas utiliser
<code>min-width</code> sur la nav pour empêcher cela, parce que la colonne de droite ne le respecterait pas.
</section>
<section>
<code class="code_title" style="background: yellow;"><section></code><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint molestiae quidem reiciendis eum
id! Nihil corporis eveniet reiciendis veniam dolorum ratione necessitatibus corrupti aperiam
eligendi dolore nesciunt, soluta obcaecati aut.
</section>
</div>
</div>
</article>
<article>
<div class="slide-title">Les sélecteurs CSS</div>
<div class="long-text">
<p>
Il existe de nombreux sélecteurs en CSS, parmis ceux-là, on retrouve des sélecteurs très
spécifiques,
tels les sélecteurs de voisins directs.
</p>
<p>
<code>div + .voisin</code> correspondra à tout les éléments avec
la classe <code>voisin</code> suivant directement un <code>div</code>.
</p>
<p>
<code>div ~ .voisins</code> correspondra à tout les éléments avec
la classe <code>voisins</code> suivant directement <u>ou non</u> un <code>div</code>.
</p>
<p>
<code>div > .fils</code> correspondra à tout les fils directs de <code>div</code> avec
la classe <code>fils</code>.
</p>
<p>
<code>div .fils</code> correspondra à tout les fils directs <u>ou non</u> de <code>div</code> avec
la classe <code>fils</code>.
</p>
<p>
<code>div:first-child</code> sélectionnera le premier enfant de <code>div</code>.
</p>
<p>
<code>:empty</code> sélectionnera tout les éléments sans enfants.
</p>
<p>
<code>:checked</code> sélectionnera tout les éléments "cochés" (<code>checkbox</code>,
<code>radio</code>, <code>option</code> d'un <code>select</code>)
</p>
<p>
Et bien plus encore. Vous pouvez les retrouver tous <a
href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes" target="_blank">ICI</a>.
</p>
</div>
</article>
<article>
<div class="slide-title">Les animations</div>
<div class="long-text">Quelques exemples d'animations.</div>
<div class="g2-2">
<div class="hover-example">
:hover
</div>
<div>
<input type="checkbox" name="transition-checked" id="transition-checked">
<label for="transition-checked">:checked</label>
</div>
<div class="rotate-constant">
Constant
</div>
<div id="fill-me-correctly-div">
<label for="fill-me-correctly">Entre une adresse email valide</label>
<input type="email" name="fill-me-correctly" id="fill-me-correctly">
<p>Cette adresse est correcte !</p>
</div>
</div>
</article>
<aside class="hidden">
<!-- Hidden code, will be used later in the presentation -->
<ul id="tree">
<!-- Html as a tree, for a latter use -->
<li>!DOCTYPE html</li>
<li><span class="caret">html lang</span>
<ul class="nested">
<li><span class="caret">head</span>
<ul class="nested">
<li>meta charset</li>
<li>meta viewport</li>
<li>link stylesheet</li>
<li>title</li>
</ul>
</li>
<li><span class="caret">body</span>
<ul class="nested">
<li><span class="caret">header</span>
<ul class="nested">
<li>h1</li>
<li><span class="caret">nav</span>
<ul class="nested">
<li>li</li>
<li>...</li>
</ul>
</li>
</ul>
</li>
<li><span class="caret">main</span>
<ul class="nested">
<li><span class="caret">article</span>
<ul class="nested">
<li>section</li>
<li>...</li>
</ul>
</li>
<li>aside</li>
</ul>
</li>
<li><span class="caret">footer</span>
<ul class="nested">
<li><span class="caret">nav</span>
<ul class="nested">
<li>li</li>
<li>...</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<pre><code class="html"> <!-- HTML5 template formatted code -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<header>Titre de la page</header>
<nav>
<li>lien</li>
<li>lien</li>
<li>lien</li>
</nav>
</header>
<main>
<article>
<section>
</section>
<section>
</section>
</article>
<aside>
</aside>
</main>
<footer>
<nav>
<li>lien</li>
<li>lien</li>
<li>lien</li>
</nav>
</footer>
</body>
</html>
</code></pre>
</aside>
</main>
<footer>
<!-- Navigation button -->
<nav>
<i class="material-icons" id="start_btn">skip_previous</i>
<i class="material-icons" id="prev_btn">navigate_before</i>
<i class="material-icons" id="next_btn">navigate_next</i>
<i class="material-icons" id="end_btn">skip_next</i>
</nav>
</footer>
<script> // Code for the tree
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function () {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
</script>
<script>hljs.initHighlightingOnLoad();</script> <!-- Syntax coloration -->
<script src="script.js"></script> <!-- Navigation script -->
</body>
</html>