-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex-fr.html
More file actions
1526 lines (1386 loc) · 77.1 KB
/
index-fr.html
File metadata and controls
1526 lines (1386 loc) · 77.1 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
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ladies Learning Code - HTML + CSS</title>
<meta name="viewport" content="width=1280">
<!-- CoderDeck core and extension CSS files -->
<link rel="stylesheet" href="src/deck.js/core/deck.core.css" type="text/css">
<link rel="stylesheet" href="src/deck.js/extensions/navigation/deck.navigation.css">
<link rel="stylesheet" href="src/deck.js/extensions/status/deck.status.css">
<link rel="stylesheet" href="src/deck.js/extensions/hash/deck.hash.css">
<link rel="stylesheet" href="src/deck.js/extensions/menu/deck.menu.css">
<link rel="stylesheet" href="src/css/prettify.css">
<link rel="stylesheet" href="src/css/deck.coder.css">
<link rel="stylesheet" href="src/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="src/codemirror/theme/default.css">
<link rel="stylesheet" href="src/prism.css">
<!-- Custom for LLC -->
<link href='http://fonts.googleapis.com/css?family=Istok+Web' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Podkova' rel='stylesheet' type='text/css'>
<link rel="stylesheet" id='style-theme-link' href="src/css/coderdeck.css" type="text/css" >
<style type="text/css">
</style>
<script type="text/javascript">
function showHint(answerContainerId) {
var preTags = document.getElementById(answerContainerId).style.display = "block";
}
</script>
</head>
<body class="deck-container">
<script type='text/coderdeck' id='coderdeck-default'>
<html>
<head>
<script src='src/jquery.min.js'>SCRIPTEND</head>
<body>CODE</body>
</html>
</script>
<script type='text/coderdeck' id='coderdeck-style-example'>
<html>
<title>test</title>
<style>CODE</style>
<body>
<h1>I'm a H1 heading</h1>
<h2>I'm a H2 heading</h2>
<p>Pargraph of text <p> here</p>
<div class='stuff'>I'm a div <div> with class "stuff"</div>
<div id='my-div'>I'm a <div> with id "my-div"</div>
</body>
</html>
</script>
<div id="presentation">
<!-- **************************************** -->
<!-- SLIDE: Workshop intro -->
<article class='slide slide-title'>
<div class="workshop_title">
<h2>Bienvenues à l'intruduction de Ladies Learning Code</h2>
<h1>HTML & CSS</h1>
</div>
<br clear="left" />
<p style="padding-top: 55px; margin-bottom: 0; font-size: 0.9em; color: #999;">
( Interactive code slides thanks to
<a href="http://cykod.github.com/CoderDeck/" target="_blank" style="color: #999;">CoderDeck</a>. Also, thanks to <a href="http://twitter.com/pearlchen">Pearl Chen</a> and <a href="http://twitter.com/markreale">Mark Reale</a> for creating the foundation for today's content. )</p>
</article>
<!-- SLIDE: Today's project -->
<article class='slide slide-list'>
<h2>Voici le projet que vous aurez à réaliser aujourd'hui</h2>
<a href="http://#"><img src="assets/project_screenshot.jpg"></a>
<p><a href="http://tessalt.github.io/LLC-HTML-CSS/Project/final.html" target="_blank">Cliquez ici</a> pour découvrir le projet</p>
</article>
<!-- SLIDE: Course Outline -->
<article class='slide slide-list'>
<h2>Plan de cours</h2>
<h3 style="margin-top: 1em;">Avant-midi</h3>
<ul>
<li>Introduction au langage HTML</li>
<li>Écrire le code HTML de votre projet</li>
<li>Introduction au langage CSS</li>
</ul>
<h3 style="margin-top: 1em;">Après-midi</h3>
<ul>
<li>Plus de CSS</li>
<li>Touche finale</li>
<li>Fin ! Et autres étapes...</li>
</ul>
</article>
<!-- SLIDE: Set up -->
<article class='slide slide-list'>
<h2>Préparations</h2>
<p>Vous devriez avoir téléchargé les items suivants :</p>
<ul>
<li><strong>Sublime Text</strong> (<a href="http://www.sublimetext.com/">lien</a>) - un éditeur de texte très populaire pour ses multiples fonctionnalités.</li>
<li><strong>Google Chrome</strong> (<a href="https://www.google.com/intl/en/chrome/browser/">lien</a>) - Choisir un navigateur web moderne qui possède de bons outils de développement pour vous aider à construire des pages web plus facilement. <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a> est aussi une option gagnante ! Un de ces navigateurs doit devenir le vôtre <em>par défaut.</em> <a href="https://support.google.com/chrome/answer/95417?hl=en">Voici la marche à suivre</a>.</li>
<li><strong>La présentation et les fichiers nécessaires aujourd'hui </strong> (<a href="https://github.com/tessa-lt/LLC-HTML-CSS">lien</a>). Cliquez sur le bouton en bas à droite de la page pour accéder au dossier compressé en .zip. Pour l'ouvrir, il faut le décompresser le dossier (sur Windows, faites un clique droit et sélectionner « Extraire Tous »). Faites un clique droit sur <strong>index.html</strong> ou <strong>index</strong> et <strong>Ouvrir avec Chrome</strong>.</li>
</ul>
</article>
<!-- SLIDE: Opening HTML files in your browser, Part 1 -->
<article class='slide slide-list'>
<h1>Ouvrir un fichier HTML dans un navigateur</h1>
</article>
<!-- SLIDE: Opening HTML files in your browser, Part 2 -->
<article class='slide slide-list'>
<h2>Qu'est-ce qu'un navigateur ?</h2>
<p>La fonction principale d'un navigateur est de présenter la <strong>ressource web</strong> de votre choix dans la fenêtre de navigation lorsque vous sollicitez un serveur web. La ressource web est généralement un document HTML, mais il peut s'agir d'un PDF, d'une image ou d'un autre type de document.<p>
</article>
<!-- SLIDE: Opening HTML files in your browser, Part 3 -->
<article class='slide slide-list'>
<h2> Qu'est-ce qu'un document HTML?</h2>
<p>Nous aborderons ce sujet bientôt. Pour l'instant, veuillez jeter un oeil à notre exemple. Allez sur <a href="http://ladieslearningcode.com">http://ladieslearningcode.com</a>. Faites un clique droit et sélectionnez <strong>Afficher le code source de la page</strong>. Ce que vous verrez est du HTLM.</p>
<p>Nous apprendrons aujourd'hui comment écrire notre propre HTML. Pour l'instant, nous apprendrons comment ouvrir un document HTML (comme ceux que nous créerons plus tard) dans notre navigateur.</p>
<ol>
<li>Ouvrez Sublime Text et allez dans <strong>Fichier-> Ouvrir /"File -> Open"</strong>.</li>
<li>Naviguez jusqu'au dossier appelé <strong>Projet</strong> dans le dossier de préparation que vous aviez préalablement téléchargé pour aujourd'hui.</li>
<li>Sélectionnez tous les fichiers du dossier et cliquez <strong>Ouvrir /"Open"</strong></li>
<li>Maintenant que le dossier est ouvert dans Sublime, cliquez sur <strong>blank.html</strong> pour qu'il remplisse l'écran. Ensuite, faites un clique droit et sélectionnez <strong>Ouvrir dans le navigateur/"Open in Browser"</strong>.<a href="https://support.google.com/chrome/answer/95417?hl=en">Si votre navigateur par défaut n'est pas Chrome, voici la marche à suivre</a>.)</li>
</ol>
</article>
<!-- SLIDE: Opening HTML files in your browser, Part 4 -->
<article class='slide slide-list'>
<h2>Vous devriez obtenir un résultat comme celui-ci:</h2>
<div class="centered">
<img src="assets/blank_output.jpg">
</div>
</article>
<!-- SLIDE: Opening HTML files in your browser, Part 5 -->
<article class='slide slide-list'>
<h1>Maintenant, modifions notre fichier et réouvrons-le dans notre navigateur</h1>
</article>
<!-- SLIDE: Opening HTML files in your browser, Part 6 -->
<article class='slide slide-list'>
<h2>Retournons à Sublime Text...</h2>
<ol>
<li>Modifier. par exemple, modifiez le texte entre les balises <p> et </p> </li>
<li>Sauvegardez votre fichier (CMD + S or CONTROL + S)</li>
<li>Faites un clique-droit et sélectionnez <strong>Ouvrir dans le navigateur/Open in Browser</strong>.</li>
<li>Modifiez un autre élément et ouvrez-le à nouveau dans le navigateur, seulement pour vous assurez que tout est en place !</li>
<li>Après la sauvegarde, vous pouvez aussi rafraichir votre page (plutôt que d'ouvrir le fichier chaque fois dans une nouvelle fenêtre!)</li>
</ol>
</article>
<!-- SLIDE: You won't break anything -->
<article class='slide slide-list'>
<h2>Prenez note : ne craignez pas de mal faire ou de briser quoi que ce soit. Ce que nous ferons aujourd'hui, les ordinateurs sont faits pour ca!<br /><br /> Sentez-vous bien à l'aise de vous amuser, de prendre des risques et de faire des erreurs, c'est la meilleure façon d'apprendre !</h2>
</article>
<!-- new slide -->
<article class='slide slide-subhead'>
<h1>HTML & CSS: Qu'est-ce que c'est ?</h1>
</article>
<article class='slide slide-subhead'>
<h1>Débutons avec le HTML...</h1>
<p>C'est le contenu de votre page</p>
</article>
<!-- new slide -->
<article class='slide slide-list'>
<h2>Les pages web sont faites de HTML (HyperText Markup Language) </h2>
<p>Nous utilisons le HTML pour décrire chaque partie de la page web au navigateur pour que notre contenu soit présenté comme nous le souhaitons. Nous aidons le navigateur à comprendre comment nous voulons que le contenu soit présenté en utilisant des balises/ des tags. Voici quelques exemples de balises que vous avez sûrement déjà vus auparavant :</p>
<ul>
<li><h1> et </h1></li>
<li><p> et </p></li>
<li><strong> et </strong></li>
</ul>
<p>Pour créer un fichier HTML ce dernier doit être composé de la l'extension .hmtl ( comme un fichier PDF possède l'extension .pdf à la fin du document).</p>
</article>
<!-- new slide -->
<article class='slide slide-list'>
<h2>Petit exercice rapide : Enregistrons un nouveau fichier HTML</h2>
<ol>
<li>Dans Sublime Text, cliquez sur <strong>Fichier -> Nouveau fichier <br />/ File -> New File</strong></li>
<li>Par défaut, le type de fichier sera <strong>Plain Text</strong> pas HTML</li>
<li>Vous avez 2 choix pour sauver vos fichiers : </li>
<ul>
<li>Dans le coin en bas à droite, vous devriez voir l'inscription <strong>Plain Text</strong>. Cliquez sur ces mots et sélectionnez HTML dans la liste des options. Sauvegardez le fichier grâce à CMD + S ou CONTROL + S. Donnez-lui n'importe quel nom, sauvez-le n'importe où, nous ne l'utiliserons pas. </li>
<li>Cliquez sur <strong>Fichier -> Enregistrez-sous / File -> Save As</strong>. Donnez-lui un nom et ajoutez .html à la fin (par exemple : « projet.html » ). Donnez-lui n'importe quel nom, sauvez-le n'importe où, nous ne l'utiliserons pas.</li>
</ul>
</ol>
</article>
<!-- new slide -->
<article class='slide slide-list'>
<h2>Les rouages du HTML</h2>
<p>Quand nous écrivons du HTML, nous créons des éléments HTML en mettant notre contenu entre des balises (<em>tags</em>, en anglais). Ces balises décrivent la disposition du contenu, pas leur apparence ni leur style. Nous utilisons différentes balises pour créer de multiples éléments et ensemble deviennent notre document HTML. </p>
<p>Il est important de saisir que le HTML est important pour la structure du document et qu'il a très peu avoir avec le visuel du résultat final. Les éléments de style, c'est avec le CSS que nous les créerons.</p>
</article>
<!-- new slide -->
<article class='slide slide-list'>
<h2>Les balises proscrites !</h2>
<p>Il est important de créer un code HTML clair et cohérent dans sa sémantique et sa structure avant d'entreprendre quoi que ce soit d'autre. Quand on écrit du HTML on structure le projet et on y incorpore le contenu, nous n'en sommes pas à l'étape du design ni du style (cela sera le rôle du CSS).</p>
<p>Voici donc quelques balises que vous ne devriez JAMAIS utiliser :</p>
<ul>
<li><b>Je suis du texte en caractère gras !</b></li>
<li><i>Je suis du texte en italique !</i></li>
<li><u>Je suis du texte souligné !</u></li>
<li><marquee>On souvient de la balise marquee ?</marquee></li>
<li><font size="large">IMMENSE TEXTE !</font></li>
<li><center>Je suis un texte centré !</center></li>
</ul>
<h3>S.V.P n'utilisez plus jamais ces balises !</h3>
</article>
<!-- new slide -->
<article class='slide slide-subhead'>
<h1>En parlant du CSS…</h1>
<p>C'est ce qui rendra votre site plaisant au regard !</p>
</article>
<!-- new slide -->
<article class='slide slide-list'>
<h2>Qu'est-ce le CSS?</h2>
<p>CSS (Cascading Style Sheets) est ce qui rendra votre site agréable à regarder.</p>
<p>Pendant que le HTML définit la structure des différentes pages de votre site, le CSS indique l'emplacement et le look des différents éléments qui le constituent.</p>
<p>Par exemple, p signifie paragraphe en HTML. Si nous voulons que tous nos paragraphes soient rouge et soulignés, nous devrons écrire ceci : </p>
<pre><code class="language-css">
p {
color: red;
text-decoration: underline;
}
</code></pre>
</article>
<!-- new slide -->
<article class='slide slide-list'>
<h2>Ajoutons ceci à notre document HTML </h2>
<p>Pour indiquer que nous ajoutons du CSS à notre fichier blank.html nous devons trouver les balises <code><style></code> ouvrantes et fermantes entre les balises <code><head></code> ouvrantes et fermantes.</p>
<pre class="language-markup"><code class="">
<!doctype html>
<head>
<title>Ladies Learning Code HTML and CSS</title>
<style>
p {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<p>Ceci est un paragraphe</p>
</body>
</html>
</code></pre>
</article>
<!-- new slide -->
<article class='slide slide-subhead'>
<h1>Ta-da!</h1>
<p>Vous venez de réaliser votre première page web !</p>
<p>HTML + CSS = page web</p>
</article>
<!-- new slide -->
<article class='slide slide-list'>
<h2>À propos du HTML et du CSS...</h2>
<p>Le HTML et le CSS sont comme des langues et tout comme le Français ou l'Italien, ces langues ont leurs propres règles. Bien sûr il faut du temps pour bien maîtriser ces langues. Ne vous en faites pas si vous ne comprenez pas tout du premier coup ! </p>
</article>
<!-- SLIDE: Websites without CSS -->
<article class='slide slide-list'>
<h2>Site web sans CSS...</h2>
<p>Ceci:</p>
<img src="assets/llc_site_with_css.jpg">
</article>
<!-- SLIDE: Websites without CSS -->
<article class='slide slide-list'>
<h2>Site web sans CSS...</h2>
<p>Deviens cela:</p>
<img src="assets/llc_site_without_css.jpg">
</article>
<!-- SLIDE: What is a website? -->
<article class='slide slide-subhead'>
<h1>Pourquoi est-ce ainsi ?</h1>
<h2>Parce que le HTML définit le contenu et que le CSS définit l'apparence et la disposition (ce qui rend le web joli).</h2>
</article>
<!-- SLIDE: What is a website? -->
<article class='slide slide-subhead'>
<h1>D'abord, concentrons-nous sur le HTML</h1>
<p>Il est temps d'écrire un peu de HTML (ce que nous appelons le <em>markup</em>).</p>
<p>Vous pouvez enlever ce que nous avons écrit entre les balises <style> et </style> pour l'instant. Gardez <style> et </style> ici!</p>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Les balises HTML</h2>
<p>La structure d'une page web est définie par des balises HTML. Des chevrons simples définissent les balises, comme ceci :</p>
<p class="centered" style="font-size: 3em;"><code><Balise></code></p>
<p class="centered sidenote">Imaginez que les balises HTML sont comme les poutres structurales d'une maison. C'est ce qui construit et structure la page web.</p>
<p class="centered"><img src="assets/house_beam.jpg" width="300" height="232" alt="house beam" /></p>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Les balises HTML</h2>
<p>Les balises HTML viennent généralement par <strong>paires</strong> -- donc une balises ouvrante et une balise fermante avec une barre oblique.</p>
<p class="centered" style="font-size: 3em;"><code><balise></balise></code></p>
<p class="sidenote">Un exemple que vous avez déjà vu :</p>
<pre class="language-markup"><code>
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
</code>
</pre>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list' >
<h2>Les balises HTML</h2>
<p>Les balises peuvent être imbriquées les unes dans les autres, comme ici :</p>
<p class="centered" style="font-size: 2.5em;"><code><balise><span style="font-size: 1.3em; color: purple;"><balise></balise></span></balise></code></p>
<p class="centered sidenote">(On réfère souvent à ce genre de situation en terme d'élément parent et d'élément enfant/ <em>parent node</em> & <em>child nodes</em>.)</p>
<br />
<p class="sidenote" style="margin-bottom: 0px;">Dans l'exemple ci-dessous :</p>
<ul class="sidenote">
<li><code><title></code> est imbriqué entre les balises <code><head></code> ouvrantes et fermantes. Ainsi on peut dire que la balise <code><head></code> est un élément parent et que la balise <code><title></code> est un élément enfant.</li>
<li>Plus spécifiquement, la balise <code><head></code>est aussi en même temps un élément enfant de la balise <code><html></code>.</li>
<li>Pendant que la balise <code><html></code> est toujours l'élément racine, il ne possède <strong>pas</strong> d'élément parent. </li>
<li>Remarquez aussi que la balise <code><head></code> et la balise <code><body></code> sont au même niveau. Elles sont tous les deux des éléments enfant de la balise<code><html></code>. Elles sont comme des soeurs !</li>
</ul>
<pre style="width: 45%; float: left;">
<!DOCTYPE html>
<html>
<head>
<strong><title></strong> <strong></title></strong>
</head>
<body>
</body>
</html></pre>
<pre style="width: 45%; float: right;">
<!DOCTYPE html>
<html>
<strong><head></strong>
<title> </title>
<strong></head></strong>
<body>
</body>
</html></pre>
<br clear="all" />
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Quels éléments vont dans le <code><head></code> et dans le <code><body></code>?</h2>
<p>La principale différence est que les éléments que vous placerez dans le <code><body></code> apparaîtrons sur votre page web. Les éléments que vous mettrez dans le <code><head></code> ne seront jamais visible sur votre page web. Vous pouvez imaginer que ce que vous écrirez dans le <code><head></code> est une façon de communiquer secrètement avec le navigateur. Par exemple, la feuille de style de votre page web s'inscrit à cet endroit puisque nous ne voulons pas que le code du style apparaisse sur la page, mais nous souhaitons que le navigateur l'interprète et l'applique adéquatement. </p>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Exercice : Ouvrir le fichier « blank.html » avec Sublime Text</h2>
<ol>
<li>Changez le contenu entre les balises <code><title></code> et observez les changements dans votre navigateur.</li>
<li>Ajoutez un paragraphe.</li>
<li>Ajoutez quelques titres à votre page; au-dessus de chaque paragraphe. Un conseil : vous aurez besoin de ces balises : <code><h1></code> et<code></h1></code>, <code><h2></code> et <code></h2></code> et vous pouvez même expérimenter avec h3, h4, h5 et h6 si vous le souhaitez.</li>
<li>Ajoutez 3 hyperliens. Le code pour créer un hyperlien ressemble à celui-ci :<br><code><a href="http://link.com">Cliquez ici !</a></code>
</ol>
<p>Ne vous en faites pas trop avec l'ordre de votre code pour l'instant. L'important est de coder !</p>
<p>N'oubliez pas de sauvegarder votre fichier et de rafraîchir souvent la page affichée dans votre navigateur pour votre code en action !</p>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Un mot au sujet des attributs</h2>
<p>Les attributs sont une autre partie très importante du code HTML.</p>
<p>Un attribut HTML modifie un élément HMTL. Il est composé d'un nom et d'une valeur séparée par un = et écrit à l'intérieur des chevrons de la balise ouvrante, après le nom de la balise.</p>
<pre><code><balise attribut="valeur">(contenu modifié par la valeur)</balise></code></pre>
<p>Ici, <strong>balise</strong> représente l'élément HTML et <strong>attribut</strong> représente le nom de l'attribut.</p>
<p>Voici un exemple d'un attribut que nous avons déjà vu aujourd'hui :</p>
<pre><code><a href="link.com">Cliquez ici !</a></code></pre>
<p>Dans ce cas, <strong>a</strong> est la balise d'hyperlien, <strong>href</strong> est l'attribut et <strong>http://link.com</strong> est la valeur.</p>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Exercice : Écrivons le <em>markup</em> pour notre projet final</h2>
<p>L'<em>output</em>, (le résultat que vous obtiendrez dans votre navigateur) pour cet exercice est sur la prochaine diapo. Écrivez le HTML:</p>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Écrivez le HTML pour obtenir ce résultat</h2>
<img src="assets/step_1_output.jpg">
<p>Un conseil : vous devriez utiliser <code><h1></code> et <code></h1></code> qu'une seule fois, <code><h2></code> et <code></h2></code> trois fois, <code><h3></code> et <code></h3></code> qu'une seule fois.</p>
<p>Vous pouvez générer votre propre faux texte ici:<a href="http://www.lipsum.com/">http://www.lipsum.com</a>. Ou encore, essayez <a href="http://cupcakeipsum.com/">Cupcake Ipsum</a> ou <a href="http://baconipsum.com/">Bacon Ipsum</a>, pour faire différent.
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Ajouter des images</h2>
<p>Apprenons comment ajouter des images à notre page web. Vous remarquerez que les balises d'image sont particulières dans la mesure où elles sont autofermantes/ <em>self-closing</em>. La balise d'image ne possède pas de balise fermante.</p>
<p>Débutons en ajoutant une image déjà en ligne. Voici le code :</p>
<pre><code class="language-markup">
<img src="http://placekitten.com/g/200/200">
</code></pre>
<p>Essayez de copier/coller cette ligne de code dans votre projet juste sous la balise ouvrante <code><body></code>.</p>
<p>Ensuite, essayez de trouver différentes images sur internet et remplacez celle du chaton.</p>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Ajouter des images, seconde partie</h2>
<p>Il existe une autre façon d'ajouter des images si vos images ne sont pas déjà en ligne et qu'elles sont dans un fichier dans votre ordinateur.</p>
<p>Dans votre dossier de projet, au même niveau que votre fichier <strong>blank.html</strong> vous trouverez une image appelée <strong>logo.png</strong>. Pour ajouter cette image sur votre page web vous devrez inscrire ce code : </p>
<pre><code class="language-markup">
<img src="logo.png">
</code></pre>
<p>Copiez/collez cette ligne de code dans votre projet, juste sous la balise ouvrante <code><body></code>.</p>
<p>Ensuite, remplacez cette image avec une des images du dossier <strong>images</strong> dans le dossier du projet. Un conseil : la solution est semblable, mais vous devrez ajouter <strong>" images/ "</strong> devant le nom de l'image. ( Puisqu'<strong>images</strong> est le nom du dossier, on doit avertir le navigateur pour qu'il sache où trouver le fichier). </p>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Exercice : Ajouter un logo et un avatar à votre projet</h2>
<p>L'<em>output</em>, (le résultat que vous obtiendrez dans votre navigateur) pour cet exercice est sur la prochaine diapo. Écrivez le HTML:</p>
<p><strong>Un conseil : l’image du logo s'appelle « logo.png » et l'exemple d'avatar s'appelle « profile.jpg ». Vous les trouverez tous les deux dans le dossier « images ».</strong></p>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Écrivez le HTML pour obtenir ce résultat :</h2>
<img src="assets/step_2_output.jpg">
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Rapide précision sur les types d'images :</h2>
<p>Il y a 3 principaux types d'images : jpg, png et gif. Voici comment on les utilise : </p>
<ul>
<li>Pour une très grande image ou une photo : choisissez jpg</li>
<li>Pour les icônes, les logos, du texte ou tout ce qui requière un fond en transparence : choisissez png</li>
<li>Pour des animations, particulièrement si elle contient des chats : choisissez gif (pour les chats, c'est une blague!)</li>
</ul>
<div class="centered">
<img src="http://1-ps.googleusercontent.com/h/www.catgifpage.com/gifs/182.gif.pagespeed.ce.S3pBqCa_-u.gif">
</div>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Exercice : ajouter quelques images</h2>
<p>L'<em>output</em>, (le résultat que vous obtiendrez dans votre navigateur) pour cet exercice est sur la prochaine diapo.</p>
<ul>
<li>Ajoutez l'image de quelque chose que vous aimez (jetez un oeil <a href="http://tessalt.github.io/LLC-HTML-CSS/Project/final.html">à ce lien</a> et faites dérouler pour comprendre). Évitez de prendre de grosses images pour l'instant, vous apprendrez comment redimensionner les images avec du CSS plus tard).</li>
<li>Ajouter les icônes de Twitter, Facebook et Linkedin aux liens - vous devrez utiliser des balises imbriquées pour ceci afin que les images soient cliquables ! Vous trouverez les logos que vous pouvez utiliser dans le dossier <strong>projet/images</strong>.</li>
</ul>
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Écrivez le HTML pour obtenir ce résultat : </h2>
<img src="assets/step_3_output.jpg">
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>Et voilà !</h2>
<p> Vous avez écrit tout le HTML nécessaire au projet d'aujourd'hui ! Votre <em>markup</em> devrait ressembler à ceci :</p>
<img src="assets/result_after_step_3.jpg">
</article>
<!-- SLIDE: HTML -->
<article class='slide slide-list'>
<h2>À propos de l'organisation</h2>
<p>Avez-vous remarqué comment le <em>markup</em> de la diapo précédente était vraiment clair et facile à lire ? Tout à été pensé en conséquence !</p>
<p>Prenez un moment pour mettre de l'ordre dans votre code pour qu'il soit identique à celui présenté en exemple. Quand nous aurons débuté le CSS, vous en serez heureux.</p>
<p><strong>Débutons enfin le CSS!</strong></p>
</article>
<!-- END OF HTML SECTION -->
<!-- SLIDE: CSS Basics -->
<article class='slide slide-subhead'>
<h1>CSS : la base</h1>
</article>
<!-- SLIDE: CSS and HTML -->
<article class="slide slide-subhead">
<h1>Le CSS va de pair avec le HTML</h1>
<h2>Le CSS ne fait rien par lui même, c'est la couche de présentation par dessus celle du contenu. </h2>
<h2>Si le HTML est la structure de la maison, le CSS est l'aménagement et la décoration.</h2>
</article>
<!-- SLIDE: CSS Syntax 1 -->
<article class="slide slide-list">
<h2>La syntaxe du CSS</h2>
<p>Le CSS est fait de <strong>règles</strong> en symbiose avec les éléments du HTML (les balises comme <code><p></code> et <code><ul></code>), pour définir leur style, leur apparence. </p>
<p>Une règle CSS est composée d'un <strong>sélecteur</strong> et d'une ou plusieurs <strong>déclarations</strong></p>
<p>Un <strong>sélecteur</strong> aide le navigateur à déterminer quel élément sera modifié.</p>
<p>Ça ressemble à ceci :</p>
<pre><code class="language-css">h2 {}</code></pre>
<p>Le sélecteur si dessus sélectionne tous les éléments de type <code><h2></code> et y applique un ou des styles. Les styles doivent être mentionnés entre les 2 accolades.</p>
</article>
<!-- SLIDE: CSS Syntax 2 -->
<article class="slide slide-list">
<h2>La syntaxe du CSS</h2>
<p>Une <strong>déclaration</strong> dicte au navigateur quel style nous voulons donner à nos éléments.</p>
<p>Une déclaration est toujours composée de 2 parties : une <strong>propriété</strong> et une <strong>valeur</strong>.</p>
<p>Une <strong>propriété</strong> dicte au navigateur qu'est-ce que nous allons modifier (par exemple : la police de caractère, une couleur, une taille, etc.)</p>
<p>Une <strong>valeur</strong> dicte au navigateur quelle sera la modification (par exemple : Arial, vert, petit, etc.)</p>
<p>une <strong>déclaration</strong> ressemble à ceci:</p>
<pre><code class="language-css">background-color: green;</code></pre>
</article>
<!-- SLIDE CSS Syntax 2.1 -->
<article class="slide slide-list">
<h2>La syntaxe du CSS</h2>
<pre><code class="language-css">background-color: green;</code></pre>
<p>La <strong>valeur</strong> (la partie <em>après</em> les deux-points) est spécifique au type de propriété.</p>
<p>Par exemple : les propriétés reliées à une taille(<code>height, width</code>) sont généralement exprimées en <code>px</code> (nombre de pixels) alors que les propriétés reliées à une couleur seront spécifiées avec le nom de la couleur ou son code ______.</p>
<p>Il est primordial de respecter la syntaxe du code que vous écrivez : un deux point après le nom de la propriété et un point-virgule après la valeur.</p>
</article>
<!-- SLIDE Adding Style Tags -->
<article class="slide slide-list">
<h2>Ajouter du CSS au HTML</h2>
<p>Vous devez rédiger votre CSS entre 2 balises <code><style></style></code>.</p>
<p>Vous devez ajouter ces balises dans le <code><head></code> de votre document HTML, comme ceci :</p>
<pre><code class="language-markup">
<html>
<head>
<style>
h2 {
background-color: green;
}
</style>
</head>
<body>
</body>
</html>
</code></pre>
</ul>
</article>
<!-- SLIDE: CSS Syntax 3 -->
<article class="slide slide-list">
<h2>La syntaxe du CSS</h2>
<p>Lorsque nous rassemblons le sélecteur et les déclarations, cela nous donne une règle CSS, comme ceci: </p>
<pre><code class="language-css">
h2 {
background-color: green;
}
</code></pre>
<p>Cette règle sélectionnera tous les éléments de type <code><h2></code> pour modifier leur arrière-plan afin qu'il soit vert.</p>
<p>Essayer de copier/coller ce code entre les balises <code><style></code> de votre projet et rafraîchissez la page dans votre navigateur.</p>
</article>
<!-- SLIDE: CSS Syntax 4 -->
<article class="slide slide-list">
<h2>La syntaxe du CSS</h2>
<p>Il est possible d'ajouter plusieurs déclarations (propriétés: valeurs; sets) à un des sélecteurs pour modifier plusieurs propriétés: </p>
<pre><code class="language-css">
h2 {
background-color: green;
font-size: 28px;
}
</code></pre>
<p>Soyez certains que vous terminez chaque déclaration par un point-virgule !</p>
<p>Essayez de remplacer la règle précédente pour le <code><h2></code> avec celle-ci et rafraîchissez la page dans votre navigateur.</p>
<p>Ensuite, enlevez tous le code que vous avez ajouté entre les balises <code><style></code>. Nous en ajouterons d'autres bientôt !</p>
</article>
<!-- SLIDE CSS First -->
<article class="slide slide-list">
<h2>Exercice: First CSS Rule</h2>
<ul>
<li>Trouvez les balises <code><style></code> entre les balises <code><head></code> de votre fichier <strong>blank.html</strong></li>
<li>Entre les deux balises, écrivez un sélecteur pour la balise <code><body></code></li>
<li>Puis, ajoutez une propriété de couleur/ <code>color: </code> avec une la valeur bleue/ <code>blue;</code></li>
<pre><code class="language-css">
body {
color: blue;
}
</code></pre>
</ul>
<p>Tout le texte de la page est maintenant bleu puisque la balise <code><body></code> est la plus haute dans la hiérarchie que l'on peut observer sur notre page. Ainsi, la propriété de couleur/ <code>color</code> s'applique sur le <code><body></code> ET tous ses éléments enfants incluant tous les titres, les paragraphes et les listes.</p>
</article>
<!-- SLIDE CSS Color Change -->
<article class="slide slide-list">
<h2>Utiliser les codes HEX</h2>
<p>Changeons la couleur du texte pour qu'il soit plus facile à lire.</p>
<p>Nous devrons utiliser un <strong>code hex</strong>, qui est un code à 6 caractères qui décrit une couleur.</p>
<p>Il n'est pas nécessaire de savoir comment ce code se compose, souvenez-vous simplement qu'il doit toujours débuter par un signe <code>#</code>. Il peut être pratique de vous souvenir que quelques codes HEX pour certaines couleurs de bases:</p>
<ul>
<li>Blanc: <code>#FFFFFF</code></li>
<li>Noir: <code>#000000</code></li>
<li>Rouge: <code>#FF0000</code></li>
<li>Vert: <code>#00FF00</code></li>
<li>Bleu: <code>#0000FF</code></li>
</ul>
<p>Le code pour un joli gris foncé est le <code>#444444</code>. Ajoutons-le !</p>
<pre><code class="language-css">
body {
color: #444444;
}
</code></pre>
<p>Jetez un oeil à <a href="http://www.colorpicker.com/">http://colorpicker.com</a> pour une multitude d'autres couleurs !</p>
</article>
<!-- SLIDE CSS Fonts -->
<article class="slide slide-list">
<h2>Enjolivez vos caractères typographyques avec le CSS</h2>
<p>Il existe plusieurs propriétés CSS qui nous permettent de modifier l'apparence de notre texte en HTML:</p>
<ul>
<li>La taille de la police/ <code>font-size</code></li>
<li>L'épaisseur de la police(normal, gras, très gras)/ <code>font-weight</code></li>
<li>Le style de la police/ <code>font-style</code></li>
<li>Le nom de la police/ <code>font-family</code></li>
<li>La couleur/ <code>color</code></li>
<li>La hauteur de l'alignement/<code> line-height</code></li>
</ul>
</article>
<!-- SLIDE CSS Fonts 2 -->
<article class="slide slide-list">
<h2>Enjolivez vos caractères avec le CSS, 2e partie</h2>
<p>Modifions notre police de caractère pour Helvetica linéal (sans-sérif): </p>
<pre><code class="language-css">
body {
color: #444444;
font-family: Helvetica, Arial, sans-serif;
}
</code></pre>
<p>La propriété <strong>font-family</strong> (famille de police) accepte une liste de type de polices: le premier est votre premier choix de police, les autres paraîtrons seulement si le premier choix (dans l'ordre) n'est pas disponible. Toutes les polices ne sont pas disponibles, autant que possible choisissez-en une qui sera <em>web-safe</em>.</p>
<ul>
<li style="font-family: Arial;">Arial</li>
<li style="font-family: Verdana;">Verdana</li>
<li style="font-family: 'Times New Roman';">Times New Roman</li>
<li style="font-family: Georgia;">Georgia</li>
<li style="font-family: Courier;">Courier</li>
</ul>
</article>
<!-- SLIDE CSS Fonts 2 -->
<article class="slide slide-list">
<h2>Modifier une <code>Font-size</code></h2>
<p>Si nous voulions que nos balises <code><h1></code> et <code><h2></code> soient plus grosses, nous écrirons:</p>
<pre><code class="language-css">
h1 {
font-size: 48px;
}
h2 {
font-size: 32px;
}
</code></pre>
</article>
<!-- SLIDE CSS Fonts 4 -->
<article class="slide slide-list">
<h2>Modifier le <code>Line-Height</code></h2>
<p>Nous pouvons modifier la hauteur de l'alignement du texte /<em>line height (ou leading)</em> avec la propriété <code>line-height</code></p>
<p><code>line-height</code> spécifie une hauteur équivalente au multiple de la taille de la police choisie. Donc, une valeur de <code>1.4</code> signifierait que les lignes seraient <code>1.4</code> fois plus hautes que le texte.</p>
<pre><code class="language-css">
p {
line-height: 1.4;
}
</code></pre>
</ul>
</article>
<!-- SLIDE CSS Images 1 -->
<article class="slide slide-list">
<h2>Modifier des images</h2>
<p>Ajoutons des bordures autour de votre photo de profil, votre <code><img></code></p>
<pre><code class="language-css">
img {}
</code></pre>
<p>La propriété de la bordure/<code>border</code> possède 3 paramètres importants: la largeur/<em>width</em>, le style/<em>style</em> et la couleur/<em>colour</em>. Donc, si nous voulons une bordure large d'1px, <em>solid</em>(c-a-d une ligne pleine), grise, nous devrons écrire:
<pre><code class="language-css">
img {
border: 1px solid grey;
}
</code></pre>
</ul>
</article>
<!-- SLIDE CSS Classes 1 -->
<article class="slide slide-list">
<h2>Plus précisément</h2>
<p>Nos bordures sont maintenant appliquées sur <strong>toutes</strong> les images de notre page, incluant notre logo. Ce n'est pas ce que nous voulons, nous voudrons donc trouver une façon de sélectionner <strong>seulement</strong> la photo de profil. </p>
<p>Le HTML nous permet d'ajouter des identificateurs à nos balises pour que nous puissions ensuite les sélectionner. Nous les appelons des classes/ <code>class</code>.</p>
<p>Les <code>class</code> sont des attributs que nous ajoutons aux balises.</p>
<pre><code class="language-markup">
<p class="classname"></p>
</code></pre>
</article>
<!-- SLIDE CSS Classes 2 -->
<article class="slide slide-list">
<h2>Cibler un élément avec une « classe »</h2>
<p><p>Nous pouvons écrire un sélecteur dans notre CSS pour cibler l'élément auquel nous avons ajouté une classe en utilisant:<code> . </code></p><code> . </code></p>
<pre><code class="language-css">
p.classname {}
</code></pre>
<p>Et ajouter le style désiré uniquement à l'item choisi avec la classe:</p>
<pre><code class="language-css">
p.classname {
color: red;
}
</code></pre>
</article>
<!-- SLIDE CSS Classes Exercise -->
<article class="slide slide-list">
<h2>Exercice: Styliser votre photo de profil </h2>
<ul>
<li>Stylez votre photo</li>
<li>Ajouter une classe <code>profile</code> à la balise correspondante à votre image de profil</li>
<li>Cibler cette classe dans votre CSS avec le sélecteur <code>img.profile</code></li>
<li>Ajoutez-y une bordure de la couleur de votre choix</li>
<li>Si votre image est trop grande, vous pouvez la redimensionner avec les propriétés <code>width</code> et <code>height</code>, qui doivent être en <code>px</code> (pixels). Essayez 200 x 200 px. Voici un exemple de comment utiliser le <code>width</code> et le <code>height</code> ci-dessous:</li>
<pre><code class="language-css">
img {
width: 200px;
height: 200px;
}
</code></pre>
</ul>
</article>
<!-- SLIDE CSS Classes Exercise Solution -->
<article class="slide slide-list">
<h2>Résultat: Styliser votre photo de profil</h2>
<p>Votre HTML devrait ressemble à ceci: </p>
<pre><code class="language-markup">
<img class="profile" src="images/profile.jpg">
</code></pre>
<p>Et votre CSS devrait ressemble à cela:</p>
<pre><code class="language-css">
img.profile {
border: 1px solid grey;
width: 200px;
height:200px;
}
</code></pre>
</article>
<!-- SLIDE CSS Classes on multiple elements -->
<article class="slide slide-list">
<h2>Ajouter plus de classes</h2>
<p>Nous pouvons faire la même chose pour styliser nos images d'objets favoris.</p>
<p>Comme nous voudrons probablement obtenir le même style pour nos 4 images, nous devrons leur ajouter le même nom de classe.</p>
<p>Ajoutez la classe « <em>favorite</em> » à chaque image.</p>
<pre><code class="language-markup">
<img class="favourite" src="images/kitten.jpg" >
</code></pre>
<p>Ajouter du style à vos images, faites varier leurs <code>width</code>, <code>height</code>, et <code>border</code>.</p>
</article>
<!-- SLIDE CSS Classes on fav images -->
<article class="slide slide-list">
<h2>Faites-en plus!</h2>
<ul>
<li>Essayez des choses amusantes comme un <code>border-radius: 50%;</code></li>
<li>Une <code>border: 3px dotted pink;</code></li>
<li>Ou encore <code>box-shadow: 0 0 4px grey;</code></li>
<li>Votre CSS devrait ressembler à ceci:</li>
<pre><code class="language-css">
img.favourite {
border: 1px solid grey;
width: 200px;
height: 200px;
border-radius: 50%;
}
</code></pre>
</ul>
</article>
<!-- SLIDE CSS Properties -->
<article class="slide slide-subhead">
<h1>Ne vous souciez pas d'avoir à retenir toutes ces propriétés CSS. Comme il y en a beaucoup, même les pros doivent consulter des références de temps à autre :)</h1>
</article>
<!-- SLIDE CSS Box Model -->
<article class="slide slide-list">
<h2>Le <em>Box Model</em></h2>
<h3>Voici une partie plus complexe du CSS, ne vous en faites pas si elle vous semble complexe à première vue !</h3>
<p>Le <strong>Box Model</strong> décrit la façon dont le CSS style les dimensions et l'espacement entre les éléments HTML.</p>
<p>Pour comprendre le <strong>Box Model</strong>, nous devons comprendre comment les navigateurs <em>voient</em> ces éléments HTML.</p>
<p>Pour le navigateur, <strong>tous</strong> les éléments HTML sont des boîtes rectangulaires.</p>
<p>Si nous montrions les contours de chaque élément d'un document HTML, cela ressemblerait un peu à la prochaine diapo:</p>
</article>
<!-- SLIDE CSS Box Model 2 -->
<article class="slide slide-list">
<img src="assets/redboxes.png"></li>
</article>
<!-- SLIDE CSS Box Model 3 -->
<article class="slide slide-list">
<h2>Le <em>Box Model</em></h2>
<p>En CSS il existe 5 propriétés pour déterminer les dimensions et l'espacement entre ces boîtes:</p>
<ul>
<li><code>Margin</code>, <code>padding</code>, <code>border</code>, <code>width</code>, et <code>height</code> (marges, marge intérieure ou rembourrage, largeur et hauteur)</li>
<li>Ces 5 propriétés sont les fondements du <strong>Box Model</strong>.</li>
<img src="assets/border-box-model.gif">
</ul>
</article>
<!-- SLIDE CSS Box Model: Margin & Padding -->
<article class="slide slide-list">
<h2><em>Margins</em> et <em>Paddings</em></h2>
<ul>
<li>Disons que nous avons 3 éléments dans notre document HTML: un <code><p></code>, un <code><h2></code>, et un autre <code><p></code></li>
<li>Ajoutons une bordure rouge autour d'un <code><h2></code> et ajouter un arrière-plan rose:</li>
<pre><code class="language-css">
h2 {
border: 1px solid red;
background: pink;
}
</code></pre>
<li>Jusqu'à présent, le résultat n'est pas joli. Tous les éléments sont trop rapprochés !</li>
<img src="assets/bm1.png">
</ul>
</article>
<!-- SLIDE CSS Box Model: Margin-->
<article class="slide slide-list">
<h2><em>Margins</em></h2>
<p>Il y a 2 propriétés CSS pour ajouter des espaces autour des éléments: <code>margin</code>, et <code>padding</code></p>
<p>La propriété <code>margin</code> ajoute de l'espace <em>autour</em> de l'element, en dehors de la bordure :</p>
<pre><code class="language-css">
h2 {
margin: 40px;
}
</code></pre>
<p>Ce code ajoute 40px d'espace de chaque côté de l'élément.</p>
<img src="assets/bm2.png" alt="">
</ul>
</article>
<!-- SLIDE CSS Box Model: Padding -->
<article class="slide slide-list">
<h2><em>Padding</em></h2>
<p>Si nous voulons ajouter de l'espace à <em>l'intérieur</em> de la bordure, nous utiliserons la propriété <code>padding</code>:</li>
<pre><code class="language-css">
h2 {
margin: 40px;
padding: 40px;
}
</code></pre>
<p>Ce code ajoute 40px d'espace de chaque côté de l'élément, mais à l'intérieur de la bordure.</p>
<img src="assets/bm3.png" alt="">
</ul>
</article>
<!-- SLIDE CSS Box Model: Margin & Padding -->
<article class="slide slide-list">
<h2><em>Margin vs. Padding</em></h2>
<p>Ajouter du <code>padding</code> sur un élément, le rendra <strong>plus gros</strong>, alors qu'ajouter de la <code>margin</code> ajoutera de l'espace autour de l'élément. </p>
<p>Si vous créez un élément large de 100px et ajoutez 40px de <code>padding</code>, l'élément aura, au final, 180px de largeur. </p>
<p>Si vous ajouter 40px de <code>margin</code> à un élément large de 100px, il demeurera large de 100px au final.</p>
<p>Si vous ajoutez une <code>border</code> large d'1px à un élément large de 100px, il deviendra large de 102px.</p>
<p>Si votre élément n'a pas de bordure ou d'arrière-plan, vous ne serez peut-être pas capable de percevoir la différence entre les <code>margin</code> et le <code>padding</code>.</p>
<!-- TODO: diagram of h2 thing -->
</article>
<!-- SLIDE CSS Box Mdoel: Margin & Padding Sides -->
<article class="slide slide-list">
<h2>Plus sur les <em>margins</em> et <em>padding</em></h2>
<p>Vous pouvez spécifier de quel côté vous voulez ajouter votre margin ou padding avec les propriétés: <code>margin-top, margin-right, margin-bottom</code>, et <code>margin-left</code> properties:</p>
<pre><code class="language-css">
h2 {
margin-top: 40px;
margin-bottom: 40px;
}
</code></pre>
<p>il en va de même pour <code>padding</code> et le <code>border</code>:</p>
<pre><code class="language-css">
h2 {
padding-bottom: 40px;
border-left: 1px solid red;
}
</code></pre>
</article>
<!-- SLIDE CSS Box Model Exercise -->
<article class="slide slide-list">
<h2>Exercice: <em>Box Model</em></h2>
<ul>
<li>Ajoutez du <code>padding</code> à votre image de profil. Ceci devrait ajouter de l'espace entre l'image et la bordure. Essayez avec 5px.</li>
<li>Ajoutez du <code>padding</code> et de la <code>margin</code> à vos images «favourite things ». Essayez 5px pour le <code>padding</code> et 10px pour les <code>margin.</code></li>
</ul>
</article>
<!-- SLIDE CSS Box Model Answer -->
<article class="slide slide-list">
<h2>Résultats: « Box Model »</h2>
<p>Votre code devrait ressemble à ceci:</p>
<pre><code class="language-css">
img.profile {
padding: 5px;
}
img.favourite {
padding: 5px;
margin: 10px;
}
</code></pre>
</article>
<!-- SLIDE CSS Box Model: Center logo -->
<article class="slide slide-list">
<h2>Centrer le logo</h2>
<p>Pour centrer un élément en CSS, nous déclarerons les marges de côté à <code>auto</code>, ce qui indiquera au navigateur de calculer automatiquement la marge nécessaire à ajouter pour que l'élément soit centré horizontalement. </p>
<p>Au lieu de spécifier les marges de gauches et les marges de droite appropriées (<code>margin-left</code> et <code>margin-right</code>), nous pouvons utiliser ce raccourci:</p>
<pre><code class="language-css">
img {
margin: 0 auto;
}
</code></pre>
<p>Le <code>0</code> indique la mesure de la marge du haut et du bas (<code>margin-top & margin-bottom</code>), tandis qu’auto indique autant la marge de gauche que celle de droite (<code>margin-left & margin-right</code>).</p>
</article>
<!-- SLIDE CSS Box Model: Center Logo 2 -->
<article class="slide slide-list">
<h2>Centrer le logo</h2>
<p>Nous avons besoin de cibler notre élément logo pour ne pas centrer toutes les images.</p>
<p>Ajoutons la classe <code>logo</code> à votre balise <code><img></code> correspondante à votre logo:</p>
<pre><code class="language-markup">
<img class="logo" src="images/logo.png">
</code></pre>
<p>Puis, écrivez un sélecteur dans votre CSS et appliquez la propriété <code>margin</code>:</p>
<pre><code class="language-css">
img.logo {
margin: 0 auto;
}
</code></pre>
</article>
<!-- SLIDE CSS Box Model: Center logo 3 -->
<article class="slide slide-list">
<h2>Il ne s'est rien passé!</h2>
<p>Revenons de quelques étapes:</p>
<p>Vous vous souvenez des boîtes aux bordures rouges ?</p>
<img src="assets/redboxes.png" width="400px;">
<p>Aviez-vous remarqué que les bordures rouges autour des images ne s'étiraient pas d'un bout à l'autre de l'écran comme les autres boîtes? </p>
</article>
<!-- SLIDE CSS Box Model: Block vs. Inline -->
<article class="slide slide-list">
<h2>Il ne s'est rien passé, la suite !</h2>
<p>Ce résultat est dû au fait que les balises <code><img></code> sont des éléments <em>inline</em>. Les éléments <em>inline</em> ne prennent <strong>pas</strong> la pleine largeur de la page, ils prennent seulement l'espace requis par leur contenant.</p>
<p>La plupart des éléments, comme les <code><h2>, <p></code>, ou <code><ul></code> éléments sont de type <em>block</em>.</p>
<p>Parce que votre élément logo est aussi large que l'image, nous ne pouvons pas le centrer dans la page. Heureusement, il est facile de remédier à cette situation: dites à la balise <code><img></code> de se comporter comme un élément <em>block</em> en utilisant la propriété <code>display</code>.</p>
<pre><code class="language-css">
img.logo {
margin: 0 auto;
display: block;
}
</code></pre>
</article>
<!-- SLIDE CSS Box Model: Inline -->
<article class="slide slide-list">
<h2>D'autres éléments « inline » </h2>
<p>D'autres éléments communs sont de type <em>inline</em> comme le <code><a>, <strong></code>, et <code><em></code>.</p>
<p>les éléments <em>inline</em> ne créent pas de saut de ligne, ainsi vous les retrouverez souvent à l'intérieur d'un paragraphe ou dans le milieu d'une phrase.</p>
</article>
<!-- SLIDE CSS Layout Intro -->
<article class="slide slide-list">
<h2>Canevas: Section par Section</h2>
<p>Notre site a beaucoup plus d'allure maintenant, il donc temps de styliser les différentes sections.</p>
<p>Nous aurons besoin d'une façon de cibler chaque section individuellement, regroupant les éléments à l'intérieur d'une même section pour créer un canevas.</p>
<p>Heureusement, le HTML possède une balise <code><section></code> . Nous engloberons chaque section avec une balise <code><section></code> et ajouter une classe à chacune d'entre elles, ainsi nous pourrons les styliser individuellement avec le CSS.</li>
</article>
<!-- SLIDE CSS Layout -->