Transcription
Apprenez à créervotre site web avecHTML5 et CSS3Par Mathieu Nebra (M@teo21)www.siteduzero.comLicence Creative Commons BY-NC-SA 2.0Dernière mise à jour le 27/07/2012
2/250SommaireSommaire . 2Lire aussi . 4Apprenez à créer votre site web avec HTML5 et CSS3 . 6Partie 1 : Les bases de HTML5 . 8Comment fait-on pour créer des sites web ? . 8Le fonctionnement des sites web . 8HTML et CSS : deux langages pour créer un site web . 10Les rôles de HTML et CSS . 10Les différentes versions de HTML et CSS . 12L'éditeur de texte . 12Sous Windows . 13Sous Mac OS X . 15Sous Linux . 15Les navigateurs . 16Pourquoi le navigateur est important . 16Les navigateurs sur ordinateur . 16Les navigateurs sur mobile . 18En résumé . 19Votre première page web en HTML . 20Créer une page web avec l'éditeur . 20Les balises et leurs attributs . 24Les balises . 24Les attributs . 25Structure de base d'une page HTML5 . 26Le doctype . 27La balise /html . 28L'en-tête head et le corps body . 28Les commentaires . 30Insérer un commentaire . 30Tout le monde peut voir vos commentaires et tout votre code HTML ! . 31En résumé . 32Organiser son texte . 33Les paragraphes . 33Sauter une ligne . 33Les titres . 36La mise en valeur . 37Mettre un peu en valeur . 37Mettre bien en valeur . 38Marquer le texte . 38N'oubliez pas : HTML pour le fond, CSS pour la forme . 39Les listes . 39Liste non ordonnée . 39Liste ordonnée . 41En résumé . 42Créer des liens . 42Un 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é .43444445464748484848494949Les images . 50Les différents formats d'images . 51Le JPEG . 51Le PNG . 52Le GIF . 53Il existe un format adapté à chaque image . 53Les erreurs à éviter . 53Insérer une image . 53Insertion d'une image . 53Ajouter une infobulle . 54Miniature cliquable . 55Les figures . 55Création d'une figure . 55Bien comprendre le rôle des figures . 56En résumé . 57Partie 2 : Les joies de la mise en forme avec CSS . 58www.siteduzero.com
Sommaire3/250Mettre en place le CSS . 58La petite histoire du CSS . 58Petit rappel : à quoi sert CSS ? . 58CSS : des débuts difficiles . 59CSS : la prise en charge des navigateurs . 59Où écrit-on le CSS ? . 60Dans un fichier .css (recommandé) . 60Dans l'en-tête head du fichier HTML . 63Directement dans les balises (non recommandé) . 64Quelle méthode choisir ? . 65Appliquer un style : sélectionner une balise . 66Appliquer un style à plusieurs balises . 69Des commentaires dans du CSS . 70Appliquer un style : class et id . 71Les balises universelles . 73Appliquer un style : les sélecteurs avancés . 74Les sélecteurs que vous connaissez déjà . 74Les sélecteurs avancés . 75D'autres sélecteurs existent ! . 77En résumé . 78Formatage du texte . 79La 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é .797980818183858586868788899090La couleur et le fond . 91Couleur du texte . 92Indiquer le nom de la couleur . 92La notation hexadécimale . 94La méthode RGB . 95Et en Bonus Track . 96Couleur de fond . 97Le CSS et l'héritage . 98Exemple d'héritage avec la balise mark . 99Images de fond . 100Appliquer une image de fond . 100Options disponibles pour l'image de fond . 101Combiner les propriétés . 103Plusieurs images de fond . 104La transparence . 105La propriété opacity . 105La notation RGBa . 106En résumé . 107Les bordures et les ombres . 108Bordures standard . 108En haut, à droite, à gauche, en bas . 109Bordures arrondies . 109Les ombres . 112box-shadow : les ombres des boîtes . 112text-shadow : l'ombre du texte . 114En résumé . 115Création d'apparences dynamiques . 116Au survol . 116Au clic et lors de la sélection . 117:active : au moment du clic . 117:focus : lorsque l'élément est sélectionné . 118Lorsque le lien a déjà été consulté . 118En résumé .
Apprenez à créer votre site web avec HTML5 et CSS3 Par Mathieu Nebra (M@teo21) www.siteduzero.co
