Apprenez à créer votre site web avec HTML5 et CSS3 Par Mathieu Nebra (M@teo21)

Ce PDF vous est offert par

www.supinternet.fr

www.siteduzero.com Licence Creative Commons 6 2.0 Dernière mise à jour le 21/12/2012

2/250

Sommaire Sommaire ........................................................................................................................................... 2 Lire aussi ............................................................................................................................................ 4 Apprenez à créer votre site web avec HTML5 et CSS3 ..................................................................... 6 Partie 1 : Les bases de HTML5 ........................................................................................................... 8 Comment fait-on pour créer des sites web ? .................................................................................................................... 8 Le fonctionnement des sites web ................................................................................................................................................................................ 8 HTML et CSS : deux langages pour créer un site web ............................................................................................................................................. 10 Les rôles de HTML et CSS ........................................................................................................................................................................................ 10 Les différentes versions de HTML et CSS ................................................................................................................................................................ 12 L'éditeur de texte ....................................................................................................................................................................................................... 12 Sous Windows .......................................................................................................................................................................................................... 13 Sous Mac OS X ......................................................................................................................................................................................................... 15 Sous Linux ................................................................................................................................................................................................................. 15 Les navigateurs ......................................................................................................................................................................................................... 16 Pourquoi le navigateur est important ........................................................................................................................................................................ 16 Les navigateurs sur ordinateur .................................................................................................................................................................................. 16 Les navigateurs sur mobile ....................................................................................................................................................................................... 18 En résumé ................................................................................................................................................................................................................. 19

Votre première page web en HTML ................................................................................................................................ 20 Créer une page web avec l'éditeur ............................................................................................................................................................................ 20 Les balises et leurs attributs ...................................................................................................................................................................................... 24 Les balises ................................................................................................................................................................................................................ 24 Les attributs ............................................................................................................................................................................................................... 25 Structure de base d'une page HTML5 ....................................................................................................................................................................... 26 Le doctype ................................................................................................................................................................................................................. 27 La balise ....................................................................................................................................................................................................... 28 L'en-tête et le corps ......................................................................................................................................................................... 28 Les commentaires ..................................................................................................................................................................................................... 30 Insérer un commentaire ............................................................................................................................................................................................ 30 Tout le monde peut voir vos commentaires… et tout votre code HTML ! .................................................................................................................. 31 En résumé ................................................................................................................................................................................................................. 32

Organiser son texte ......................................................................................................................................................... 33 Les paragraphes ....................................................................................................................................................................................................... 33 Sauter une ligne ........................................................................................................................................................................................................ 33 Les titres .................................................................................................................................................................................................................... 36 La mise en valeur ...................................................................................................................................................................................................... 37 Mettre un peu en valeur ............................................................................................................................................................................................ 37 Mettre bien en valeur ................................................................................................................................................................................................. 38 Marquer le texte ........................................................................................................................................................................................................ 38 N'oubliez pas : HTML pour le fond, CSS pour la forme ............................................................................................................................................. 39 Les listes ................................................................................................................................................................................................................... 39 Liste non ordonnée .................................................................................................................................................................................................... 39 Liste ordonnée ........................................................................................................................................................................................................... 41 En résumé ................................................................................................................................................................................................................. 42

Créer des liens ................................................................................................................................................................ 42 Un lien vers un autre site .......................................................................................................................................................................................... Un lien vers une autre page de son site .................................................................................................................................................................... Deux pages situées dans un même dossier ............................................................................................................................................................. Deux pages situées dans des dossiers différents ..................................................................................................................................................... Résumé en images ................................................................................................................................................................................................... Un lien vers une ancre .............................................................................................................................................................................................. Lien vers une ancre située dans une autre page ...................................................................................................................................................... Cas pratiques d'utilisation des liens .......................................................................................................................................................................... Un lien qui affiche une infobulle au survol ................................................................................................................................................................. Un lien qui ouvre une nouvelle fenêtre ...................................................................................................................................................................... Un lien pour envoyer un e-mail ................................................................................................................................................................................. Un lien pour télécharger un fichier ............................................................................................................................................................................ En résumé .................................................................................................................................................................................................................

43 44 44 45 46 47 48 48 48 48 49 49 49

Les images ...................................................................................................................................................................... 50 Les différents formats d'images ................................................................................................................................................................................ 51 Le JPEG .................................................................................................................................................................................................................... 51 Le PNG ...................................................................................................................................................................................................................... 52 Le GIF ....................................................................................................................................................................................................................... 53 Il existe un format adapté à chaque image ............................................................................................................................................................... 53 Les erreurs à éviter ................................................................................................................................................................................................... 53 Insérer une image ..................................................................................................................................................................................................... 53 Insertion d'une image ................................................................................................................................................................................................ 53 Ajouter une infobulle ................................................................................................................................................................................................. 54 Miniature cliquable .................................................................................................................................................................................................... 55 Les figures ................................................................................................................................................................................................................. 55 Création d'une figure ................................................................................................................................................................................................. 55 Bien comprendre le rôle des figures ......................................................................................................................................................................... 56 En résumé ................................................................................................................................................................................................................. 57

Partie 2 : Les joies de la mise en forme avec CSS ........................................................................... 58 Ce PDF vous est offert par SUP'Internet, l'éc ole supérieure des métiers de l'Internet www.supinternet.f r

www.siteduzero.com

Sommaire

3/250

Mettre en place le CSS ................................................................................................................................................... 58 La petite histoire du CSS .......................................................................................................................................................................................... Petit rappel : à quoi sert CSS ? ................................................................................................................................................................................. CSS : des débuts difficiles ........................................................................................................................................................................................ CSS : la prise en charge des navigateurs ................................................................................................................................................................. Où écrit-on le CSS ? ................................................................................................................................................................................................. Dans un fichier .css (recommandé) .......................................................................................................................................................................... Dans l'en-tête du fichier HTML ..................................................................................................................................................................... Directement dans les balises (non recommandé) ..................................................................................................................................................... Quelle méthode choisir ? .......................................................................................................................................................................................... Appliquer un style : sélectionner une balise .............................................................................................................................................................. Appliquer un style à plusieurs balises ....................................................................................................................................................................... Des commentaires dans du CSS .............................................................................................................................................................................. Appliquer un style : class et id ................................................................................................................................................................................... Les balises universelles ............................................................................................................................................................................................ Appliquer un style : les sélecteurs avancés .............................................................................................................................................................. Les sélecteurs que vous connaissez déjà ................................................................................................................................................................. Les sélecteurs avancés ............................................................................................................................................................................................. D'autres sélecteurs existent ! .................................................................................................................................................................................... En résumé .................................................................................................................................................................................................................

58 58 59 59 60 60 63 64 65 66 69 70 71 73 74 74 75 77 78

Formatage du texte ......................................................................................................................................................... 79 La taille ...................................................................................................................................................................................................................... Une taille absolue ...................................................................................................................................................................................................... Une valeur relative .................................................................................................................................................................................................... La police .................................................................................................................................................................................................................... Modifier la police utilisée ........................................................................................................................................................................................... Utiliser une police personnalisée avec @font-face ................................................................................................................................................... Italique, gras, souligné… ........................................................................................................................................................................................... Mettre en italique ....................................................................................................................................................................................................... Mettre en gras ........................................................................................................................................................................................................... Soulignement et autres décorations .......................................................................................................................................................................... L'alignement .............................................................................................................................................................................................................. Les flottants ............................................................................................................................................................................................................... Faire flotter une image .............................................................................................................................................................................................. Stopper un flottant ..................................................................................................................................................................................................... En résumé .................................................................................................................................................................................................................

79 79 80 81 81 83 85 85 86 86 87 88 89 90 90

La couleur et le fond ........................................................................................................................................................ 91 Couleur du texte ........................................................................................................................................................................................................ 92 Indiquer le nom de la couleur .................................................................................................................................................................................... 92 La notation hexadécimale ......................................................................................................................................................................................... 94 La méthode RGB ....................................................................................................................................................................................................... 95 Et en Bonus Track… ................................................................................................................................................................................................. 96 Couleur de fond ......................................................................................................................................................................................................... 97 Le CSS et l'héritage .................................................................................................................................................................................................. 98 Exemple d'héritage avec la balise ................................................................................................................................................................ 99 Images de fond ....................................................................................................................................................................................................... 100 Appliquer une image de fond .................................................................................................................................................................................. 100 Options disponibles pour l'image de fond ............................................................................................................................................................... 101 Combiner les propriétés .......................................................................................................................................................................................... 103 Plusieurs images de fond ........................................................................................................................................................................................ 104 La transparence ...................................................................................................................................................................................................... 105 La propriété opacity ................................................................................................................................................................................................. 105 La notation RGBa .................................................................................................................................................................................................... 106 En résumé ............................................................................................................................................................................................................... 107

Les bordures et les ombres ........................................................................................................................................... 108 Bordures standard ................................................................................................................................................................................................... 108 En haut, à droite, à gauche, en bas… ..................................................................................................................................................................... 109 Bordures arrondies .................................................................................................................................................................................................. 109 Les ombres .............................................................................................................................................................................................................. 112 box-shadow : les ombres des boîtes ....................................................................................................................................................................... 112 text-shadow : l'ombre du texte ................................................................................................................................................................................. 114 En résumé ............................................................................................................................................................................................................... 115

Création d'apparences dynamiques .............................................................................................................................. 116 Au survol .................................................................................................................................................................................................................. 116 Au clic et lors de la sélection ................................................................................................................................................................................... 117 :active : au moment du clic ...................................................................................................................................................................................... 117 :focus : lorsque l'élément est sélectionné ................................................................................................................................................................ 118 Lorsque le lien a déjà été consulté .......................................................................................................................................................................... 118 En résumé ............................................................................................................................................................................................................... 119

Partie 3 : Mise en page du site ........................................................................................................ 120 Structurer sa page ......................................................................................................................................................... 120 Les balises structurantes de HTML5 .......................................................................................................................................................................

: l'en-tête .................................................................................................................................................................................................