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 17/10/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 0 : ............................................................................................................................................. 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 ....................................................................................................................................................................................................... 13 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 ................................................................................................................................ 20 Créer une page web avec l'éditeur ............................................................................................................................................................................ 26 Les balises et leurs attributs ...................................................................................................................................................................................... 26 Les balises ................................................................................................................................................................................................................ 27 Les attributs ............................................................................................................................................................................................................... 28 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 .......................................................................................................................................................................................... 47 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 ................................................................................................................................................................................................... 51 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 qui de téléchargement d'un fichier ................................................................................................................................................................ 54 Les images ...................................................................................................................................................................... 56 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 ................................................................................................................................................................................................... 60 Insérer une image ..................................................................................................................................................................................................... 60 Insertion d'une image ................................................................................................................................................................................................ 60 Ajouter une infobulle ................................................................................................................................................................................................. 61 Miniature cliquable .................................................................................................................................................................................................... Sommaire 1/271 www.siteduzero.com 62 Les figures ................................................................................................................................................................................................................. 63 Création d'une figure ................................................................................................................................................................................................. 64 Bien comprendre le rôle des figures ......................................................................................................................................................................... 66 Partie 1 : Les joies de la mise en forme avec CSS ........................................................................... 66 Mettre en place le CSS ................................................................................................................................................... 66 Où mettre du CSS ? .................................................................................................................................................................................................. 70 Résumé visuel ........................................................................................................................................................................................................... 73 Appliquer un style : sélectionner une balise .............................................................................................................................................................. 75 Appliquer un style à plusieurs balises ....................................................................................................................................................................... 76 Des commentaires dans du CSS .............................................................................................................................................................................. 77 Appliquer un style : class et id ................................................................................................................................................................................... 80 Les balises universelles ............................................................................................................................................................................................ 81 Formatage du texte en CSS (partie 1/2) ......................................................................................................................... 83 Taille du texte ............................................................................................................................................................................................................ 85 Polices ....................................................................................................................................................................................................................... 87 Alignement ................................................................................................................................................................................................................ 88 Alignements simples ................................................................................................................................................................................................. 89 L'indentation .............................................................................................................................................................................................................. 90 Formatage du texte en CSS (partie 2/2) ......................................................................................................................... 91 Effets de style ............................................................................................................................................................................................................ 91 Mettre en italique ....................................................................................................................................................................................................... 92 Mettre en gras ........................................................................................................................................................................................................... 92 Les majuscules en CSS ............................................................................................................................................................................................ 93 Un peu de déco ? ...................................................................................................................................................................................................... 95 Les couleurs .............................................................................................................................................................................................................. 95 Indiquer le nom de la couleur .................................................................................................................................................................................... 96 La notation hexadécimale ......................................................................................................................................................................................... 97 La méthode RGB ....................................................................................................................................................................................................... 98 Et en Bonus Track... .................................................................................................................................................................................................. 99 Le fond ...................................................................................................................................................................................................................... 100 La couleur de fond ................................................................................................................................................................................................... 101 L'image de fond ....................................................................................................................................................................................................... 105 Les pseudo-formats ....................................................................................................................................................... 106 Des liens sympas .................................................................................................................................................................................................... 106 Au passage de la souris .......................................................................................................................................................................................... 107 Au moment du clic ................................................................................................................................................................................................... 108 Lorsque le lien est sélectionné ................................................................................................................................................................................ 109 Quand la page a déjà été vue... .............................................................................................................................................................................. 110 Première lettre et première ligne ............................................................................................................................................................................. 111 La première lettre .................................................................................................................................................................................................... 111 La première ligne ..................................................................................................................................................................................................... 112 Avant / Après ........................................................................................................................................................................................................... 113 Une image au lieu du texte ? .................................................................................................................................................................................. 114 Partie 2 : XHTML & CSS, toujours plus forts ! ................................................................................. 115 Les listes à puces .......................................................................................................................................................... 116 Différents types de listes (XHTML) ......................................................................................................................................................................... 116 Liste non ordonnée .................................................................................................................................................................................................. 117 Liste ordonnée ......................................................................................................................................................................................................... 117 Liste de définitions .................................................................................................................................................................................................. 118 Décorez vos listes (CSS) ........................................................................................................................................................................................ 119 Retrait des listes ...................................................................................................................................................................................................... 120 Représentation de la puce ...................................................................................................................................................................................... 123 Changer l'image de la puce ..................................................................................................................................................................................... 124 Mise en boîte (partie 1/2) .............................................................................................................................................. 125 Block et Inline c'est pas pareil ! ............................................................................................................................................................................... 126 Quelques exemples ................................................................................................................................................................................................ 126 Les balises universelles .......................................................................................................................................................................................... 127 Respectez la sémantique ! ...................................................................................................................................................................................... 127 La taille .................................................................................................................................................................................................................... 129 Minimum et maximum ............................................................................................................................................................................................. 129 "Couper" un block avec un overflow ........................................................................................................................................................................ 131 Les bordures ........................................................................................................................................................................................................... 132 En haut, à droite, à gauche, en bas... ..................................................................................................................................................................... 133 Ca marche aussi sur des balises inline ! ................................................................................................................................................................. 135 Les marges .............................................................................................................................................................................................................. 136 En haut, à droite, à gauche, en bas... Et on recommence ! .................................................................................................................................... 138 Centrer des blocks .................................................................................................................................................................................................. 138 Mise en boîte (partie 2/2) .............................................................................................................................................. 140 Transformer un inline en block (et vice-versa) ........................................................................................................................................................ 142 Les flottants ............................................................................................................................................................................................................. 142 Faire flotter une image ............................................................................................................................................................................................ 143 Créer une lettrine (exercice) .................................................................................................................................................................................... 145 Stopper un flottant ................................................................................................................................................................................................... Sommaire 2/271 www.siteduzero.com 146 Positionnement absolu, fixe et relatif ...................................................................................................................................................................... 147 Le positionnement absolu ....................................................................................................................................................................................... 149 Le positionnement fixe ............................................................................................................................................................................................ 150 Le positionnement relatif ......................................................................................................................................................................................... 151 Créons le design de votre site web ! ............................................................................................................................. 152 Bon, par quoi on commence ? ................................................................................................................................................................................ 153 Design fixe ou extensible ? ..................................................................................................................................................................................... 154 Primo, le XHTML ..................................................................................................................................................................................................... 155 La structure générale .............................................................................................................................................................................................. 156 L'en-tête .................................................................................................................................................................................................................. 157 Menu et sous-menus ............................................................................................................................................................................................... 160 Le corps ................................................................................................................................................................................................................... 160 Allez le dernier : le pied de page ............................................................................................................................................................................. 161 Le code XHTML final ............................................................................................................................................................................................... 164 Secundo, le CSS ..................................................................................................................................................................................................... 164 Centrer le design ..................................................................................................................................................................................................... 165 L'en-tête .................................................................................................................................................................................................................. 166 Le menu .................................................................................................................................................................................................................. 169 Le corps ................................................................................................................................................................................................................... 173 Le pied de page (et on a fini !) ................................................................................................................................................................................. 175 Attendez, c'est pas fini ! .......................................................................................................................................................................................... 176 Rappel : insérer un CSS dans le XHTML ................................................................................................................................................................ 176 Changez le CSS, changez le design ! ..................................................................................................................................................................... 178 Laissez le visiteur choisir le design ......................................................................................................................................................................... 179 Les tableaux .................................................................................................................................................................. 179 Un tableau simple ................................................................................................................................................................................................... 181 La ligne d'en-tête ..................................................................................................................................................................................................... 183 Titre du tableau ....................................................................................................................................................................................................... 183 Des tableaux plus élaborés ..................................................................................................................................................................................... 184 Diviser un gros tableau ........................................................................................................................................................................................... 185 3, 2, 1... Fusioooon ! ................................................................................................................................................................................................ 188 Et avec un peu de CSS... ........................................................................................................................................................................................ 188 Rien qu'avec des propriétés CSS connues ............................................................................................................................................................. 190 Quelques nouvelles propriétés CSS ....................................................................................................................................................................... 192 Les formulaires .............................................................................................................................................................. 192 Créer un formulaire ................................................................................................................................................................................................. 194 Les zones de saisie ................................................................................................................................................................................................. 195 Zone de texte à une ligne ........................................................................................................................................................................................ 195 Les labels ................................................................................................................................................................................................................ 196 Quelques attributs supplémentaires ........................................................................................................................................................................ 197 Zone de mot de passe ............................................................................................................................................................................................. 197 Zone de texte multiligne .......................................................................................................................................................................................... 200 Eléments d'options .................................................................................................................................................................................................. 200 Les cases à cocher ................................................................................................................................................................................................. 201 Les zones d'options ................................................................................................................................................................................................. 202 Les listes déroulantes ............................................................................................................................................................................................. 205 Un formulaire accessible et design ? ...................................................................................................................................................................... 205 Définir un ordre de tabulation .................................................................................................................................................................................. 206 Définir des touches de raccourci ............................................................................................................................................................................. 207 Organiser le formulaire en plusieurs zones ............................................................................................................................................................. 208 Gouache time ! ........................................................................................................................................................................................................ 209 Y'a plus qu'à appuyer sur le bouton ! ...................................................................................................................................................................... 211 Et maintenant, on fait quoi ? (Conclusion) .................................................................................................................... 213 L'heure du bilan a sonné ......................................................................................................................................................................................... 213 Résumons ce qu'on a vu ......................................................................................................................................................................................... 214 Ce qu'on n'a pas vu ................................................................................................................................................................................................. 215 On va quand même pas s'arrêter là ? ..................................................................................................................................................................... 216 Un langage client : le Javascript ............................................................................................................................................................................. 217 Un langage serveur : le PHP ................................................................................................................................................................................... 219 Partie 3 : Annexes ........................................................................................................................... 220 Envoyez votre site sur le web ....................................................................................................................................... 220 Le nom de domaine ................................................................................................................................................................................................. 221 Réserver un nom de domaine ................................................................................................................................................................................. 222 L'hébergeur ............................................................................................................................................................................................................. 224 Le rôle de l'hébergeur ............................................................................................................................................................................................. 224 Trouver un hébergeur .............................................................................................................................................................................................. 227 Commander un hébergement pour votre site web .................................................................................................................................................. 228 Utiliser un client FTP ............................................................................................................................................................................................... 229 Installer un client FTP ............................................................................................................................................................................................. 230 Configurer le client FTP ........................................................................................................................................................................................... 231 Transférer les fichiers .............................................................................................................................................................................................. 232 Gagner de l'argent grâce à la publicité ......................................................................................................................... 234 Qu'est-ce qu'une bonne publicité ? ......................................................................................................................................................................... 234 Principe n°1 : ne pas gêner la navigation ............................................................................................................................................................... Informations sur le tutoriel 3/271 www.siteduzero.com 235 Principe n°2 : une publicité ciblée .......................................................................................................................................................................... 236 Installation d'une bannière publicitaire .................................................................................................................................................................... 236 Les avantages d'AdFever ........................................................................................................................................................................................ 236 S'inscrire à AdFever ................................................................................................................................................................................................ 237 L'interface d'AdFever ............................................................................................................................................................................................... 239 Le vocabulaire de la pub ......................................................................................................................................................................................... 241 Vos questions courantes ......................................................................................................................................................................................... 242 Le W3C et les standards du web .................................................................................................................................. 243 L'histoire du web ..................................................................................................................................................................................................... 245 Du HTML au XHTML ............................................................................................................................................................................................... 245 Et le CSS ? .............................................................................................................................................................................................................. 245 Votre site est-il valide ? ........................................................................................................................................................................................... 246 Le validateur XHTML ............................................................................................................................................................................................... 248 Le validateur CSS ................................................................................................................................................................................................... 249 Liste des balises XHTML ............................................................................................................................................... 249 Balises de premier niveau ....................................................................................................................................................................................... 250 Le uploads/s3/ apprenez-a-creer-votre-site-web-avec-html5-et-css3 1 .pdf