Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Apprenez à créer votre site web avec HTML5 et CSS3 Par M@teo21 www.siteduzero.c

Apprenez à créer votre site web avec HTML5 et CSS3 Par M@teo21 www.siteduzero.com Dernière mise à jour le 15/12/2011 Sommaire 1 Sommaire ........................................................................................................................................... 3 Informations sur le tutoriel ................................................................................................................... 5 Apprenez à créer votre site web avec HTML5 et CSS3 ...................................................................... 5 Informations sur le tutoriel ................................................................................................................................................. 6 Partie 1 : Les bases de HTML5 ........................................................................................................... 6 Comment fait-on pour créer des sites web ? .................................................................................................................... 6 Comment fonctionnent les sites web ? ....................................................................................................................................................................... 10 HTML et CSS : deux langages pour créer un site web ............................................................................................................................................. 10 Le rôle de HTML et CSS ........................................................................................................................................................................................... 11 Les différentes versions de HTML et CSS ................................................................................................................................................................ 12 L'éditeur de texte ....................................................................................................................................................................................................... 14 Sous Windows .......................................................................................................................................................................................................... 15 Sous Mac OS X ......................................................................................................................................................................................................... 15 Sous Linux ................................................................................................................................................................................................................ 16 Les navigateurs ......................................................................................................................................................................................................... 17 Pourquoi le navigateur est important ........................................................................................................................................................................ 17 Les navigateurs sur ordinateur .................................................................................................................................................................................. 19 Les navigateurs sur mobile ....................................................................................................................................................................................... 20 Votre première page web en HTML ................................................................................................................................ 21 Créer une page web avec l'éditeur ............................................................................................................................................................................ 25 Les balises et leurs attributs ...................................................................................................................................................................................... 26 Les balises ................................................................................................................................................................................................................ 27 Les attributs ............................................................................................................................................................................................................... 27 Structure de base d'une page HTML5 ...................................................................................................................................................................... 29 Le doctype ................................................................................................................................................................................................................. 29 La balise <html> ........................................................................................................................................................................................................ 29 L'en-tête <head> et le corps <body> ......................................................................................................................................................................... 32 Les commentaires ..................................................................................................................................................................................................... 32 Insérer un commentaire ............................................................................................................................................................................................ 32 Tout le monde peut voir vos commentaires... et tout votre code HTML ! .................................................................................................................. 34 Organiser son texte ......................................................................................................................................................... 34 Les paragraphes ....................................................................................................................................................................................................... 35 Sauter une ligne ........................................................................................................................................................................................................ 37 Les titres .................................................................................................................................................................................................................... 39 La mise en valeur ...................................................................................................................................................................................................... 40 Mettre un peu en valeur ............................................................................................................................................................................................ 40 Mettre bien en valeur ................................................................................................................................................................................................. 41 Marquer le texte ........................................................................................................................................................................................................ 41 N'oubliez pas : HTML pour le fond, CSS pour la forme ............................................................................................................................................ 43 Les listes à puces ...................................................................................................................................................................................................... 43 Liste non ordonnée .................................................................................................................................................................................................... 44 Liste ordonnée ........................................................................................................................................................................................................... 44 Créer des liens ................................................................................................................................................................ 45 Un lien vers un autre site .......................................................................................................................................................................................... 46 Un lien vers une autre page de son site .................................................................................................................................................................... 47 Deux pages situées dans un même dossier ............................................................................................................................................................. 48 Deux pages situées dans des dossiers différents ..................................................................................................................................................... 49 Résumé en images ................................................................................................................................................................................................... 50 Un lien vers une ancre .............................................................................................................................................................................................. 52 Lien vers une ancre située dans une autre page ...................................................................................................................................................... 52 Cas pratiques d'utilisation des liens .......................................................................................................................................................................... 53 Un lien qui affiche une infobulle au survol ................................................................................................................................................................. 53 Un lien qui ouvre une nouvelle fenêtre ...................................................................................................................................................................... 54 Un lien pour envoyer un e-mail ................................................................................................................................................................................. 54 Un lien pour télécharger un fichier ............................................................................................................................................................................ 54 Les images ...................................................................................................................................................................... 55 Les différents formats d'images ................................................................................................................................................................................ 56 Le JPEG .................................................................................................................................................................................................................... 57 Le PNG ...................................................................................................................................................................................................................... 58 Le GIF ....................................................................................................................................................................................................................... 58 Il existe un format adapté à chaque image ............................................................................................................................................................... 58 Les erreurs à éviter ................................................................................................................................................................................................... 59 Insérer une image ..................................................................................................................................................................................................... 60 Insertion d'une image ................................................................................................................................................................................................ 60 Ajouter une infobulle ................................................................................................................................................................................................. 61 Miniature cliquable .................................................................................................................................................................................................... Sommaire 1/286 www.siteduzero.com 63 Les figures ................................................................................................................................................................................................................. 63 Création d'une figure ................................................................................................................................................................................................. 64 Bien comprendre le rôle des figures ......................................................................................................................................................................... 66 Partie 2 : Les joies de la mise en forme avec CSS ........................................................................... 66 Mettre en place le CSS ................................................................................................................................................... 66 La petite histoire du CSS .......................................................................................................................................................................................... 67 Petit rappel : à quoi sert CSS ? ................................................................................................................................................................................. 67 CSS : des débuts difficiles ........................................................................................................................................................................................ 68 CSS : le support des navigateurs .............................................................................................................................................................................. 70 Où écrit-on le CSS ? ................................................................................................................................................................................................. 70 Dans un fichier .css (recommandé) .......................................................................................................................................................................... 73 Dans l'en-tête <head> du fichier HTML ..................................................................................................................................................................... 73 Directement dans les balises (non recommandé) ..................................................................................................................................................... 74 Quelle méthode choisir ? .......................................................................................................................................................................................... 75 Appliquer un style : sélectionner une balise .............................................................................................................................................................. 78 Appliquer un style à plusieurs balises ....................................................................................................................................................................... 79 Des commentaires dans du CSS .............................................................................................................................................................................. 81 Appliquer un style : class et id ................................................................................................................................................................................... 83 Les balises universelles ............................................................................................................................................................................................ 85 Appliquer un style : les sélecteurs avancés .............................................................................................................................................................. 85 Les sélecteurs que vous connaissez déjà ................................................................................................................................................................. 85 Les sélecteurs avancés ............................................................................................................................................................................................. 88 D’autres sélecteurs existent ! .................................................................................................................................................................................... 88 Formatage du texte ......................................................................................................................................................... 89 La taille ...................................................................................................................................................................................................................... 89 Une taille absolue ...................................................................................................................................................................................................... 90 Une valeur relative .................................................................................................................................................................................................... 92 La police .................................................................................................................................................................................................................... 92 Modifier la police utilisée ........................................................................................................................................................................................... 94 Utiliser une police personnalisée avec @font-face ................................................................................................................................................... 96 Italique, gras, souligné... ........................................................................................................................................................................................... 97 Mettre en italique ....................................................................................................................................................................................................... 97 Mettre en gras ........................................................................................................................................................................................................... 98 Soulignement et autres décorations .......................................................................................................................................................................... 99 L'alignement .............................................................................................................................................................................................................. 101 Les flottants ............................................................................................................................................................................................................. 102 Faire flotter une image ............................................................................................................................................................................................ 103 Stopper un flottant ................................................................................................................................................................................................... 104 La couleur et le fond ...................................................................................................................................................... 105 Couleur du texte ...................................................................................................................................................................................................... 105 Indiquer le nom de la couleur .................................................................................................................................................................................. 106 La notation hexadécimale ....................................................................................................................................................................................... 107 La méthode RGB ..................................................................................................................................................................................................... 109 Et en Bonus Track... ................................................................................................................................................................................................ 110 Couleur de fond ....................................................................................................................................................................................................... 111 Le CSS et l'héritage ................................................................................................................................................................................................ 111 Exemple d'héritage avec la balise <mark> .............................................................................................................................................................. 112 Images de fond ........................................................................................................................................................................................................ 113 Appliquer une image de fond .................................................................................................................................................................................. 114 Options disponibles pour l'image de fond ............................................................................................................................................................... 116 Combiner les propriétés .......................................................................................................................................................................................... 117 Plusieurs images de fond ........................................................................................................................................................................................ 119 La transparence ...................................................................................................................................................................................................... 119 La propriété opacity ................................................................................................................................................................................................. 120 La notation RGBa .................................................................................................................................................................................................... 121 Les bordures et les ombres ........................................................................................................................................... 121 Bordures standard ................................................................................................................................................................................................... 123 En haut, à droite, à gauche, en bas... ..................................................................................................................................................................... 123 Bordures arrondies .................................................................................................................................................................................................. 126 Les ombres .............................................................................................................................................................................................................. 127 box-shadow : les ombres des boîtes ....................................................................................................................................................................... 129 text-shadow : l'ombre du texte ................................................................................................................................................................................ 130 Création d'apparences dynamiques .............................................................................................................................. 132 Au survol ................................................................................................................................................................................................................. 134 Au clic et lors de la sélection ................................................................................................................................................................................... 134 :active : au moment du clic ...................................................................................................................................................................................... 134 :focus : lorsque l'élément est sélectionné ................................................................................................................................................................ 134 Lorsque le lien a déjà été visité ............................................................................................................................................................................... 135 Partie 3 : Mise en page du site ........................................................................................................ 136 Structurer sa page ......................................................................................................................................................... 137 Les balises structurantes de HTML5 ....................................................................................................................................................................... 137 <header> : l'en-tête ................................................................................................................................................................................................. 137 <footer> : le pied de page ....................................................................................................................................................................................... Sommaire 2/286 www.siteduzero.com 138 <nav> : principaux liens de navigation .................................................................................................................................................................... 139 <section> : une section de page ............................................................................................................................................................................. 140 <aside> : informations complémentaires ................................................................................................................................................................ 141 <article> : un article indépendant ............................................................................................................................................................................ 142 Résumé ................................................................................................................................................................................................................... 143 Exemple concret d'utilisation des balises ................................................................................................................................................................ 146 Assurer la compatibilité avec IE .............................................................................................................................................................................. 147 Le modèle de boîte ........................................................................................................................................................ 148 Les balises de type block et inline ........................................................................................................................................................................... 148 Quelques exemples ................................................................................................................................................................................................ 149 Les balises universelles .......................................................................................................................................................................................... 149 Respectez la sémantique ! ...................................................................................................................................................................................... 150 Les dimensions ....................................................................................................................................................................................................... 151 Minimum et maximum ............................................................................................................................................................................................. 152 Les marges .............................................................................................................................................................................................................. 156 En haut, à droite, à gauche, en bas... Et on recommence ! .................................................................................................................................... 157 Centrer des blocs .................................................................................................................................................................................................... 158 Quand ça dépasse... ............................................................................................................................................................................................... 159 overflow : couper un bloc ........................................................................................................................................................................................ 161 word-wrap : couper les textes trop larges ............................................................................................................................................................... 162 Le positionnement en CSS ........................................................................................................................................... 163 Le positionnement flottant ....................................................................................................................................................................................... 167 Transformez vos éléments avec display ................................................................................................................................................................. 169 Le positionnement inline-block ................................................................................................................................................................................ 171 inline-block et compatibilité Internet Explorer .......................................................................................................................................................... 172 Les positionnements absolu, fixe et relatif .............................................................................................................................................................. 173 Le positionnement absolu ....................................................................................................................................................................................... 176 Le positionnement fixe ............................................................................................................................................................................................ 177 Le positionnement relatif ......................................................................................................................................................................................... 178 TP : création d'un site pas à pas ................................................................................................................................... 178 Maquettage du design ............................................................................................................................................................................................. 181 Organiser le contenu en HTML ............................................................................................................................................................................... 187 Mettre en forme en CSS .......................................................................................................................................................................................... 187 Les polices personnalisées ..................................................................................................................................................................................... 188 Définition des styles principaux ............................................................................................................................................................................... 189 En-tête et liens de navigation .................................................................................................................................................................................. 191 La bannière ............................................................................................................................................................................................................. 193 Le corps ................................................................................................................................................................................................................... 195 Le pied de page ....................................................................................................................................................................................................... 197 Assurer la compatibilité avec IE .............................................................................................................................................................................. 200 Faire fonctionner les balises structurantes de HTML5 ............................................................................................................................................ 200 Régler le positionnement inline-block ..................................................................................................................................................................... 201 Vérifier la validité ..................................................................................................................................................................................................... 203 Le code final ............................................................................................................................................................................................................ 205 Partie 4 : Fonctionnalités évoluées ................................................................................................. 205 Les tableaux .................................................................................................................................................................. 205 Un tableau simple ................................................................................................................................................................................................... 208 La ligne d'en-tête ..................................................................................................................................................................................................... 209 Titre du tableau ....................................................................................................................................................................................................... 210 Un tableau structuré ................................................................................................................................................................................................ 211 Diviser un gros tableau ........................................................................................................................................................................................... 212 3, 2, 1... Fusioooon ! ................................................................................................................................................................................................ 215 Les formulaires .............................................................................................................................................................. 215 Créer un formulaire ................................................................................................................................................................................................. 217 Les zones de saisie basiques ................................................................................................................................................................................. 218 Zone de texte monoligne ......................................................................................................................................................................................... 219 Les libellés .............................................................................................................................................................................................................. 219 Quelques attributs supplémentaires ........................................................................................................................................................................ 220 Zone de mot de passe ............................................................................................................................................................................................. 221 Zone de texte multiligne .......................................................................................................................................................................................... 223 Les zones de saisie enrichies ................................................................................................................................................................................. 223 E-mail ...................................................................................................................................................................................................................... 223 Une URL .................................................................................................................................................................................................................. 224 Numéro de téléphone .............................................................................................................................................................................................. 224 Nombre .................................................................................................................................................................................................................... 225 Un curseur ............................................................................................................................................................................................................... 225 Couleur .................................................................................................................................................................................................................... 226 Date ......................................................................................................................................................................................................................... 226 Recherche ............................................................................................................................................................................................................... 227 Les éléments d'options ............................................................................................................................................................................................ 227 Les cases à cocher ................................................................................................................................................................................................. 228 Les zones d'options ................................................................................................................................................................................................. 229 Les listes déroulantes ............................................................................................................................................................................................. 231 Finaliser et envoyer le formulaire ............................................................................................................................................................................ Informations sur le tutoriel 3/286 www.siteduzero.com 232 Regrouper les champs ............................................................................................................................................................................................ 233 Sélectionner automatiquement un champ ............................................................................................................................................................... 233 Rendre un champ obligatoire .................................................................................................................................................................................. 234 Le bouton d'envoi .................................................................................................................................................................................................... 235 La vidéo et l'audio ......................................................................................................................................................... 236 Les formats audio et vidéo ...................................................................................................................................................................................... 236 Les formats audio .................................................................................................................................................................................................... 236 Les formats vidéo .................................................................................................................................................................................................... 238 Insertion d'un élément audio ................................................................................................................................................................................... 240 Insertion d'une vidéo ............................................................................................................................................................................................... 243 Aller plus loin ................................................................................................................................................................. 243 Du site web à l'application web (Javascript, AJAX...) .............................................................................................................................................. 245 Technologies liées à HTML5 (Canvas, SVG, Web Sockets...) ............................................................................................................................... 247 Les sites web dynamiques (PHP, JEE, ASP .NET...) ............................................................................................................................................. 249 Partie 5 : Annexes ........................................................................................................................... 250 Envoyez votre site sur le web ....................................................................................................................................... 250 Le nom de domaine ................................................................................................................................................................................................. 251 Réserver un nom de domaine ................................................................................................................................................................................. 252 L'hébergeur ............................................................................................................................................................................................................. 254 Le rôle de l'hébergeur ............................................................................................................................................................................................. 254 Trouver un hébergeur .............................................................................................................................................................................................. uploads/s3/ apprenez-a-creer-votre-site-web-avec-html5-et-css3 2 .pdf