Créer un site web avec HTML5 et CSS3 - Cours pour débutants
Telechargé par
adjadinourou
Sommaire
2Sommaire ...........................................................................................................................................
4Lire aussi ............................................................................................................................................
6 Apprenez à créer votre site web avec HTML5 et CSS3 .....................................................................
8Partie 1 : Les bases de HTML5 ...........................................................................................................
8Comment fait-on pour créer des sites web ? ....................................................................................................................
8Le fonctionnement des sites web ................................................................................................................................................................................
10HTML et CSS : deux langages pour créer un site web .............................................................................................................................................
10Les rôles de HTML et CSS ........................................................................................................................................................................................
12Les différentes versions de HTML et CSS ................................................................................................................................................................
12L'éditeur de texte .......................................................................................................................................................................................................
13Sous Windows ..........................................................................................................................................................................................................
15Sous Mac OS X .........................................................................................................................................................................................................
15Sous Linux .................................................................................................................................................................................................................
16Les navigateurs .........................................................................................................................................................................................................
16Pourquoi le navigateur est important ........................................................................................................................................................................
16Les navigateurs sur ordinateur ..................................................................................................................................................................................
18Les navigateurs sur mobile .......................................................................................................................................................................................
19En résumé .................................................................................................................................................................................................................
20Votre première page web en HTML ................................................................................................................................
20Créer une page web avec l'éditeur ............................................................................................................................................................................
24Les balises et leurs attributs ......................................................................................................................................................................................
24Les balises ................................................................................................................................................................................................................
25Les attributs ...............................................................................................................................................................................................................
26Structure de base d'une page HTML5 .......................................................................................................................................................................
27Le doctype .................................................................................................................................................................................................................
28La balise </html> .......................................................................................................................................................................................................
28L'en-tête <head> et le corps <body> .........................................................................................................................................................................
30Les commentaires .....................................................................................................................................................................................................
30Insérer un commentaire ............................................................................................................................................................................................
31Tout le monde peut voir vos commentaires… et tout votre code HTML ! ..................................................................................................................
32En résumé .................................................................................................................................................................................................................
33Organiser son texte .........................................................................................................................................................
33Les paragraphes .......................................................................................................................................................................................................
33Sauter une ligne ........................................................................................................................................................................................................
36Les titres ....................................................................................................................................................................................................................
37La mise en valeur ......................................................................................................................................................................................................
37Mettre un peu en valeur ............................................................................................................................................................................................
38Mettre bien en valeur .................................................................................................................................................................................................
38Marquer le texte ........................................................................................................................................................................................................
39N'oubliez pas : HTML pour le fond, CSS pour la forme .............................................................................................................................................
39Les listes ...................................................................................................................................................................................................................
39Liste non ordonnée ....................................................................................................................................................................................................
41Liste ordonnée ...........................................................................................................................................................................................................
42En résumé .................................................................................................................................................................................................................
42Créer des liens ................................................................................................................................................................
43Un lien vers un autre site ..........................................................................................................................................................................................
44Un lien vers une autre page de son site ....................................................................................................................................................................
44Deux pages situées dans un même dossier .............................................................................................................................................................
45Deux pages situées dans des dossiers différents .....................................................................................................................................................
46Résumé en images ...................................................................................................................................................................................................
47Un lien vers une ancre ..............................................................................................................................................................................................
48Lien vers une ancre située dans une autre page ......................................................................................................................................................
48Cas pratiques d'utilisation des liens ..........................................................................................................................................................................
48Un lien qui affiche une infobulle au survol .................................................................................................................................................................
48Un lien qui ouvre une nouvelle fenêtre ......................................................................................................................................................................
49Un lien pour envoyer un e-mail .................................................................................................................................................................................
49Un lien pour télécharger un fichier ............................................................................................................................................................................
49En résumé .................................................................................................................................................................................................................
50Les images ......................................................................................................................................................................
51Les différents formats d'images ................................................................................................................................................................................
51Le JPEG ....................................................................................................................................................................................................................
52Le PNG ......................................................................................................................................................................................................................
53Le GIF .......................................................................................................................................................................................................................
53Il existe un format adapté à chaque image ...............................................................................................................................................................
53Les erreurs à éviter ...................................................................................................................................................................................................
53Insérer une image .....................................................................................................................................................................................................
53Insertion d'une image ................................................................................................................................................................................................
54Ajouter une infobulle .................................................................................................................................................................................................
55Miniature cliquable ....................................................................................................................................................................................................
55Les figures .................................................................................................................................................................................................................
55Création d'une figure .................................................................................................................................................................................................
56Bien comprendre le rôle des figures .........................................................................................................................................................................
57En résumé .................................................................................................................................................................................................................
58Partie 2 : Les joies de la mise en forme avec CSS ...........................................................................
2/249
www.openclassrooms.com
58Mettre en place le CSS ...................................................................................................................................................
58La petite histoire du CSS ..........................................................................................................................................................................................
58Petit rappel : à quoi sert CSS ? .................................................................................................................................................................................
59CSS : des débuts difficiles ........................................................................................................................................................................................
59CSS : la prise en charge des navigateurs .................................................................................................................................................................
60Où écrit-on le CSS ? .................................................................................................................................................................................................
60Dans un fichier .css (recommandé) ..........................................................................................................................................................................
63Dans l'en-tête <head> du fichier HTML .....................................................................................................................................................................
64Directement dans les balises (non recommandé) .....................................................................................................................................................
65Quelle méthode choisir ? ..........................................................................................................................................................................................
66Appliquer un style : sélectionner une balise ..............................................................................................................................................................
69Appliquer un style à plusieurs balises .......................................................................................................................................................................
70Des commentaires dans du CSS ..............................................................................................................................................................................
71Appliquer un style : class et id ...................................................................................................................................................................................
73Les balises universelles ............................................................................................................................................................................................
74Appliquer un style : les sélecteurs avancés ..............................................................................................................................................................
74Les sélecteurs que vous connaissez déjà .................................................................................................................................................................
75Les sélecteurs avancés .............................................................................................................................................................................................
77D'autres sélecteurs existent ! ....................................................................................................................................................................................
78En résumé .................................................................................................................................................................................................................
79Formatage du texte .........................................................................................................................................................
79La taille ......................................................................................................................................................................................................................
79Une taille absolue ......................................................................................................................................................................................................
80Une valeur relative ....................................................................................................................................................................................................
81La police ....................................................................................................................................................................................................................
81Modifier la police utilisée ...........................................................................................................................................................................................
83Utiliser une police personnalisée avec @font-face ...................................................................................................................................................
85Italique, gras, souligné… ...........................................................................................................................................................................................
85Mettre en italique .......................................................................................................................................................................................................
86Mettre en gras ...........................................................................................................................................................................................................
86Soulignement et autres décorations ..........................................................................................................................................................................
87L'alignement ..............................................................................................................................................................................................................
88Les flottants ...............................................................................................................................................................................................................
89Faire flotter une image ..............................................................................................................................................................................................
90Stopper un flottant .....................................................................................................................................................................................................
90En résumé .................................................................................................................................................................................................................
92La couleur et le fond ........................................................................................................................................................
92Couleur du texte ........................................................................................................................................................................................................
92Indiquer le nom de la couleur ....................................................................................................................................................................................
94La notation hexadécimale .........................................................................................................................................................................................
95La méthode RGB .......................................................................................................................................................................................................
96Et en Bonus Track… .................................................................................................................................................................................................
97Couleur de fond .........................................................................................................................................................................................................
98Le CSS et l'héritage ..................................................................................................................................................................................................
99Exemple d'héritage avec la balise <mark> ................................................................................................................................................................
100Images de fond .......................................................................................................................................................................................................
100Appliquer une image de fond ..................................................................................................................................................................................
101Options disponibles pour l'image de fond ...............................................................................................................................................................
103Combiner les propriétés ..........................................................................................................................................................................................
104Plusieurs images de fond ........................................................................................................................................................................................
105La transparence ......................................................................................................................................................................................................
105La propriété opacity .................................................................................................................................................................................................
106La notation RGBa ....................................................................................................................................................................................................
107En résumé ...............................................................................................................................................................................................................
107Les bordures et les ombres ...........................................................................................................................................
108Bordures standard ...................................................................................................................................................................................................
109En haut, à droite, à gauche, en bas… .....................................................................................................................................................................
109Bordures arrondies ..................................................................................................................................................................................................
112Les ombres ..............................................................................................................................................................................................................
112box-shadow : les ombres des boîtes .......................................................................................................................................................................
114text-shadow : l'ombre du texte .................................................................................................................................................................................
115En résumé ...............................................................................................................................................................................................................
115Création d'apparences dynamiques ..............................................................................................................................
116Au survol ..................................................................................................................................................................................................................
117Au clic et lors de la sélection ...................................................................................................................................................................................
117:active : au moment du clic ......................................................................................................................................................................................
118:focus : lorsque l'élément est sélectionné ................................................................................................................................................................
118Lorsque le lien a déjà été consulté ..........................................................................................................................................................................
119En résumé ...............................................................................................................................................................................................................
119Partie 3 : Mise en page du site ........................................................................................................
120Structurer sa page .........................................................................................................................................................
120Les balises structurantes de HTML5 .......................................................................................................................................................................
120<header> : l'en-tête .................................................................................................................................................................................................
121<footer> : le pied de page .......................................................................................................................................................................................
122<nav> : principaux liens de navigation ....................................................................................................................................................................
123<section> : une section de page .............................................................................................................................................................................
124<aside> : informations complémentaires ................................................................................................................................................................
125<article> : un article indépendant ............................................................................................................................................................................
126Résumé ...................................................................................................................................................................................................................
127Exemple concret d'utilisation des balises ................................................................................................................................................................
128Assurer la compatibilité avec IE ..............................................................................................................................................................................
129En résumé ...............................................................................................................................................................................................................
Sommaire 3/249
www.openclassrooms.com
130Le modèle des boîtes ....................................................................................................................................................
131Les balises de type block et inline ...........................................................................................................................................................................
132Quelques exemples ................................................................................................................................................................................................
132Les balises universelles ..........................................................................................................................................................................................
132Respectez la sémantique ! ......................................................................................................................................................................................
132Les dimensions .......................................................................................................................................................................................................
134Minimum et maximum .............................................................................................................................................................................................
135Les marges .............................................................................................................................................................................................................
138En haut, à droite, à gauche, en bas… Et on recommence ! ...................................................................................................................................
139Centrer des blocs ....................................................................................................................................................................................................
140Quand ça dépasse… ...............................................................................................................................................................................................
140overflow : couper un bloc ........................................................................................................................................................................................
143word-wrap : couper les textes trop larges ...............................................................................................................................................................
144En résumé ...............................................................................................................................................................................................................
145Le positionnement en CSS ...........................................................................................................................................
145Le positionnement flottant .......................................................................................................................................................................................
148Transformez vos éléments avec display .................................................................................................................................................................
149Le positionnement inline-block ................................................................................................................................................................................
152inline-block et compatibilité Internet Explorer ..........................................................................................................................................................
153Les positionnements absolu, fixe et relatif ..............................................................................................................................................................
153Le positionnement absolu .......................................................................................................................................................................................
156Le positionnement fixe ............................................................................................................................................................................................
157Le positionnement relatif .........................................................................................................................................................................................
158En résumé ...............................................................................................................................................................................................................
158TP : création d'un site pas à pas ...................................................................................................................................
159Maquettage du design .............................................................................................................................................................................................
161Organiser le contenu en HTML ...............................................................................................................................................................................
165Mettre en forme en CSS ..........................................................................................................................................................................................
165Les polices personnalisées .....................................................................................................................................................................................
166Définition des styles principaux ...............................................................................................................................................................................
168En-tête et liens de navigation ..................................................................................................................................................................................
170La bannière .............................................................................................................................................................................................................
172Le corps ...................................................................................................................................................................................................................
174Le pied de page .......................................................................................................................................................................................................
176Assurer la compatibilité avec IE ..............................................................................................................................................................................
179Faire fonctionner les balises structurantes de HTML5 ............................................................................................................................................
179Régler le positionnement inline-block .....................................................................................................................................................................
180Vérifier la validité .....................................................................................................................................................................................................
181Le code final ............................................................................................................................................................................................................
182Partie 4 : Fonctionnalités évoluées .................................................................................................
183Les tableaux ..................................................................................................................................................................
183Un tableau simple ...................................................................................................................................................................................................
185La ligne d'en-tête .....................................................................................................................................................................................................
186Titre du tableau .......................................................................................................................................................................................................
187Un tableau structuré ................................................................................................................................................................................................
187Diviser un gros tableau ...........................................................................................................................................................................................
1883, 2, 1… Fusioooon ! ...............................................................................................................................................................................................
190En résumé ...............................................................................................................................................................................................................
191Les formulaires ..............................................................................................................................................................
191Créer un formulaire .................................................................................................................................................................................................
192Les zones de saisie basiques .................................................................................................................................................................................
192Zone de texte monoligne .........................................................................................................................................................................................
193Les libellés ..............................................................................................................................................................................................................
194Quelques attributs supplémentaires ........................................................................................................................................................................
194Zone de mot de passe ............................................................................................................................................................................................
195Zone de texte multiligne ..........................................................................................................................................................................................
196Les zones de saisie enrichies .................................................................................................................................................................................
196E-mail ......................................................................................................................................................................................................................
197Une URL ..................................................................................................................................................................................................................
197Numéro de téléphone ..............................................................................................................................................................................................
198Nombre ....................................................................................................................................................................................................................
198Un curseur ...............................................................................................................................................................................................................
199Couleur ....................................................................................................................................................................................................................
199Date .........................................................................................................................................................................................................................
199Recherche ...............................................................................................................................................................................................................
199Les éléments d'options ............................................................................................................................................................................................
199Les cases à cocher .................................................................................................................................................................................................
200Les zones d'options .................................................................................................................................................................................................
202Les listes déroulantes .............................................................................................................................................................................................
204Finaliser et envoyer le formulaire ............................................................................................................................................................................
204Regrouper les champs ............................................................................................................................................................................................
205Sélectionner automatiquement un champ ...............................................................................................................................................................
205Rendre un champ obligatoire ..................................................................................................................................................................................
206Le bouton d'envoi ....................................................................................................................................................................................................
207En résumé ...............................................................................................................................................................................................................
207La vidéo et l'audio .........................................................................................................................................................
208Les formats audio et vidéo ......................................................................................................................................................................................
208Les formats audio ....................................................................................................................................................................................................
208Les formats vidéo ....................................................................................................................................................................................................
209Insertion d'un élément audio ...................................................................................................................................................................................
211Insertion d'une vidéo ...............................................................................................................................................................................................
213En résumé ...............................................................................................................................................................................................................
Sommaire 4/249
www.openclassrooms.com
213Mise en page adaptative avec les Media Queries ........................................................................................................
214Mise en place des media queries ............................................................................................................................................................................
214Appliquer une media query .....................................................................................................................................................................................
215Les règles disponibles .............................................................................................................................................................................................
216Tester les media queries .........................................................................................................................................................................................
217Mise en pratique des media queries sur le design ..................................................................................................................................................
219La page ...................................................................................................................................................................................................................
219Le menu de navigation ............................................................................................................................................................................................
220La bannière .............................................................................................................................................................................................................
220Le bloc « À propos de l'auteur » ..............................................................................................................................................................................
221Le résultat ................................................................................................................................................................................................................
221Media queries et navigateurs mobiles .....................................................................................................................................................................
222En résumé ...............................................................................................................................................................................................................
222Aller plus loin .................................................................................................................................................................
223Du site web à l'application web (JavaScript, AJAX…) .............................................................................................................................................
224Technologies liées à HTML5 (Canvas, SVG, Web Sockets…) ...............................................................................................................................
225Les sites web dynamiques (PHP, JEE, ASP .NET…) .............................................................................................................................................
226Partie 5 : Annexes ...........................................................................................................................
227Envoyez votre site sur le Web .......................................................................................................................................
227Le nom de domaine ................................................................................................................................................................................................
227Réserver un nom de domaine .................................................................................................................................................................................
228L'hébergeur .............................................................................................................................................................................................................
228Le rôle de l'hébergeur .............................................................................................................................................................................................
229Trouver un hébergeur ..............................................................................................................................................................................................
230Commander un hébergement pour votre site web ..................................................................................................................................................
232Utiliser un client FTP ...............................................................................................................................................................................................
232Installer un client FTP ..............................................................................................................................................................................................
233Configurer le client FTP ...........................................................................................................................................................................................
234Transférer les fichiers ..............................................................................................................................................................................................
235En résumé ...............................................................................................................................................................................................................
236Mémento des balises HTML ..........................................................................................................................................
236Mémento .................................................................................................................................................................................................................
236Balises de premier niveau .......................................................................................................................................................................................
236Balises d'en-tête ......................................................................................................................................................................................................
236Balises de structuration du texte .............................................................................................................................................................................
238Balises de listes ......................................................................................................................................................................................................
238Balises de tableau ...................................................................................................................................................................................................
238Balises de formulaire ...............................................................................................................................................................................................
238Balises sectionnantes .............................................................................................................................................................................................
239Balises génériques ..................................................................................................................................................................................................
240Mémento des propriétés CSS .......................................................................................................................................
240Mémento .................................................................................................................................................................................................................
240Propriétés de mise en forme du texte .....................................................................................................................................................................
240Propriétés de couleur et de fond .............................................................................................................................................................................
241Propriétés des boîtes ..............................................................................................................................................................................................
242Propriétés de positionnement et d'affichage ...........................................................................................................................................................
242Propriétés des listes ................................................................................................................................................................................................
243Propriétés des tableaux ...........................................................................................................................................................................................
243Autres propriétés .....................................................................................................................................................................................................
244Gérer la compatibilité entre les navigateurs ..................................................................................................................
244Les commentaires conditionnels .............................................................................................................................................................................
244La syntaxe des commentaires conditionnels ..........................................................................................................................................................
245Utilité des commentaires conditionnels ...................................................................................................................................................................
246Les hacks CSS ........................................................................................................................................................................................................
246Les outils de débogage ...........................................................................................................................................................................................
246La couleur de fond pour marquer les éléments .......................................................................................................................................................
247Les outils de débogage ...........................................................................................................................................................................................
Lire aussi 5/249
www.openclassrooms.com
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
1
/
248
100%
