13666 apprenez a creer votre site web avec html5 et css3.pdf


Aperçu du fichier PDF 13666-apprenez-a-creer-votre-site-web-avec-html5-et-css3.pdf - page 4/249

Page 1 2 3 456249



Aperçu texte


Sommaire

4/250

Le modèle des boîtes .................................................................................................................................................... 131
Les balises de type block et inline ........................................................................................................................................................................... 131
Quelques exemples ................................................................................................................................................................................................ 132
Les balises universelles .......................................................................................................................................................................................... 132
Respectez la sémantique ! ...................................................................................................................................................................................... 132
Les dimensions ....................................................................................................................................................................................................... 132
Minimum et maximum ............................................................................................................................................................................................. 134
Les marges ............................................................................................................................................................................................................. 135
En haut, à droite, à gauche, en bas… Et on recommence ! ................................................................................................................................... 138
Centrer des blocs .................................................................................................................................................................................................... 139
Quand ça dépasse… ............................................................................................................................................................................................... 140
overflow : couper un bloc ........................................................................................................................................................................................ 140
word-wrap : couper les textes trop larges ............................................................................................................................................................... 143
En résumé ............................................................................................................................................................................................................... 144

Le positionnement en CSS ........................................................................................................................................... 144
Le positionnement flottant .......................................................................................................................................................................................
Transformez vos éléments avec display .................................................................................................................................................................
Le positionnement inline-block ................................................................................................................................................................................
inline-block et compatibilité Internet Explorer ..........................................................................................................................................................
Les positionnements absolu, fixe et relatif ..............................................................................................................................................................
Le positionnement absolu .......................................................................................................................................................................................
Le positionnement fixe ............................................................................................................................................................................................
Le positionnement relatif .........................................................................................................................................................................................
En résumé ...............................................................................................................................................................................................................

145
148
149
152
153
153
156
157
158

TP : création d'un site pas à pas ................................................................................................................................... 158
Maquettage du design ............................................................................................................................................................................................. 159
Organiser le contenu en HTML ............................................................................................................................................................................... 161
Mettre en forme en CSS .......................................................................................................................................................................................... 165
Les polices personnalisées ..................................................................................................................................................................................... 165
Définition des styles principaux ............................................................................................................................................................................... 166
En-tête et liens de navigation .................................................................................................................................................................................. 168
La bannière ............................................................................................................................................................................................................. 170
Le corps ................................................................................................................................................................................................................... 172
Le pied de page ....................................................................................................................................................................................................... 174
Assurer la compatibilité avec IE .............................................................................................................................................................................. 176
Faire fonctionner les balises structurantes de HTML5 ............................................................................................................................................ 179
Régler le positionnement inline-block ..................................................................................................................................................................... 179
Vérifier la validité ..................................................................................................................................................................................................... 180
Le code final ............................................................................................................................................................................................................ 181

Partie 4 : Fonctionnalités évoluées ................................................................................................. 183
Les tableaux .................................................................................................................................................................. 183
Un tableau simple ...................................................................................................................................................................................................
La ligne d'en-tête .....................................................................................................................................................................................................
Titre du tableau .......................................................................................................................................................................................................
Un tableau structuré ................................................................................................................................................................................................
Diviser un gros tableau ...........................................................................................................................................................................................
3, 2, 1… Fusioooon ! ...............................................................................................................................................................................................
En résumé ...............................................................................................................................................................................................................

183
185
186
187
187
188
190

Les formulaires .............................................................................................................................................................. 190
Créer un formulaire ................................................................................................................................................................................................. 191
Les zones de saisie basiques ................................................................................................................................................................................. 192
Zone de texte monoligne ......................................................................................................................................................................................... 192
Les libellés .............................................................................................................................................................................................................. 193
Quelques attributs supplémentaires ........................................................................................................................................................................ 194
Zone de mot de passe ............................................................................................................................................................................................ 194
Zone de texte multiligne .......................................................................................................................................................................................... 195
Les zones de saisie enrichies ................................................................................................................................................................................. 196
E-mail ...................................................................................................................................................................................................................... 196
Une URL .................................................................................................................................................................................................................. 197
Numéro de téléphone .............................................................................................................................................................................................. 197
Nombre .................................................................................................................................................................................................................... 198
Un curseur ............................................................................................................................................................................................................... 198
Couleur .................................................................................................................................................................................................................... 198
Date ......................................................................................................................................................................................................................... 199
Recherche ............................................................................................................................................................................................................... 199
Les éléments d'options ............................................................................................................................................................................................ 199
Les cases à cocher ................................................................................................................................................................................................. 199
Les zones d'options ................................................................................................................................................................................................. 200
Les listes déroulantes ............................................................................................................................................................................................. 202
Finaliser et envoyer le formulaire ............................................................................................................................................................................ 204
Regrouper les champs ............................................................................................................................................................................................ 204
Sélectionner automatiquement un champ ............................................................................................................................................................... 205
Rendre un champ obligatoire .................................................................................................................................................................................. 205
Le bouton d'envoi .................................................................................................................................................................................................... 206
En résumé ............................................................................................................................................................................................................... 207

La vidéo et l'audio ......................................................................................................................................................... 208
Les formats audio et vidéo ......................................................................................................................................................................................
Les formats audio ....................................................................................................................................................................................................
Les formats vidéo ....................................................................................................................................................................................................
Insertion d'un élément audio ...................................................................................................................................................................................
Insertion d'une vidéo ...............................................................................................................................................................................................
En résumé ...............................................................................................................................................................................................................
Ce PDF vous est offert par SUP'Internet, l'éc ole supérieure des métiers de l'Internet
www.supinternet.f r

208
208
208
209
211
213

www.siteduzero.com