Réalisez votre site web avec HTML5 et CSS3

Auteur(s) :

Nebra, Mathieu (1985-....) Découvrir l'auteur

Résumé

Ce guide, conçu pour les débutants, permet de découvrir HTML5 et CSS3, les dernières technologies en matière de création de sites Internet. L'auteur aborde la structure, la mise en page et l'hébergement du site sur le web à travers des travaux pratiques. Avec des vidéos de démonstration accessibles en ligne.

Éditeur(s)
- Éditions Eyrolles
Date
- DL 2023
Langues
- Français
Description matérielle
- 1 vol. (XV-287 p.) : ill. en coul. ; 24 cm
Collections
- Open classrooms
Sujet(s)
ISBN
- 978-2-416-00975-4
Indice
- 681.226 HTML, CSS, XML, XSLT
Quatrième de couverture
- Réalisez votre site web avec HTML 5 et CSS 3
  3^e édition
  Vous rêvez d'apprendre à créer des sites web mais vous avez peur que ce soit compliqué car vous débutez ? Ce livre est fait pour vous ! Conçu pour les débutants, il vous permettra de découvrir HTML 5 et CSS 3, les dernières technologies en matière de création de sites web, de façon progressive et sans aucun prérequis, si ce n'est de savoir allumer son ordinateur !
Tables des matières
- - Réalisez votre site web avec HTML 5 et CSS 3
  - 3e édition
  - Mathieu Nebra
  - Éditions Eyrolles
  - Première partie - Les bases de HTML 51
  - 1 Fonctionnement des sites web 3
  - Le fonctionnement des sites web3
  - HTML et CSS : deux langages pour créer un site web6
  - Les rôles de HTML et CSS 6
  - Les différentes versions de HTML et CSS 7
  - L'éditeur de texte8
  - Sublime Text 9
  - Sous Windows 10
  - Sous macOS 10
  - Sous Linux 11
  - Les navigateurs11
  - Pourquoi le navigateur est-il important ? 11
  - Les navigateurs sur ordinateur 11
  - Les navigateurs sur mobile 14
  - En résumé 15
  - 2 Votre première page web en HTML 17
  - Créer une page web avec l'éditeur18
  - Les balises et leurs attributs20
  - Les balises 20
  - Les attributs 21
  - Structure de base d'une page HTML 522
  - Le doctype 23
  - La balise <html> 24
  - L'en-tête <head> et le corps <body> 24
  - Les commentaires25
  - Insérer un commentaire 26
  - Votre code HTML est public 26
  - En résumé28
  - 3 Organiser son texte 29
  - Les paragraphes29
  - Sauter une ligne 30
  - Les titres32
  - La mise en valeur34
  - Mettre un peu en valeur 34
  - Mettre bien en valeur 35
  - Marquer le texte 35
  - N'oubliez pas : HTML pour le fond, CSS pour la forme 36
  - Les listes37
  - Liste non ordonnée 37
  - Liste ordonnée 38
  - Exercice pratique39
  - En résumé40
  - 4 Créer des liens 41
  - Un lien vers un autre site41
  - Un lien vers une autre page de son site42
  - Deux pages situées dans un même dossier 43
  - Deux pages situées dans des dossiers différents 43
  - Résumé en images 44
  - Un lien vers une ancre45
  - Lien vers une ancre située dans une autre page 46
  - Cas pratiques d'utilisation des liens47
  - Un lien qui affiche une infobulle au survol 47
  - Un lien qui ouvre une nouvelle fenêtre 47
  - Un lien pour envoyer un courriel 48
  - Un lien pour télécharger un fichier 48
  - En résumé48
  - 5 Les images 49
  - Les différents formats d'images49
  - Le JPEG 50
  - Le PNG 51
  - Le GIF 52
  - Il existe un format adapté à chaque image 52
  - Les erreurs à éviter 52
  - Insérer une image53
  - Ajouter une infobulle 53
  - Miniature diquable 54
  - Les figures55
  - Création d'une figure 55
  - Bien comprendre le rôle des figures 56
  - Exercice pratique56
  - En résumé57
  - Deuxième partie - Les joies de la mise en forme avec les CSS59
  - 6 Mettre en place les CSS 61
  - La petite histoire du CSS61
  - Petit rappel : à quoi sert CSS ? 61
  - CSS : des débuts difficiles 62
  - CSS : la prise en charge des navigateurs 63
  - Où écrit-on le CSS ?64
  - Dans un fichier .css 64
  - Dans l'en-tête <head> du fichier HTML 66
  - Directement dans les balises (déconseillé) 67
  - Quelle méthode choisir ? 68
  - Appliquer un style : sélectionner une balise69
  - Appliquer un style à plusieurs balises 71
  - Des commentaires dans du CSS 72
  - Appliquer un style : class et id73
  - Les balises universelles 75
  - Appliquer un style : les sélecteurs avancés76
  - Les sélecteurs déjà connus 76
  - Les sélecteurs avancés 77
  - D'autres sélecteurs existent 79
  - En résumé79
  - 7 Formater le texte 81
  - La taille81
  - Une taille absolue 82
  - Une valeur relative 83
  - La police84
  - Modifier la police utilisée 84
  - Utiliser une police personnalisée avec @font-face 86
  - Italique, gras, souligné88
  - Mettre en italique 88
  - Mettre en gras 89
  - Souligner et agrémenter le texte 89
  - L'alignement90
  - Les flottants92
  - Faire flotter une image 92
  - Stopper un flottant 93
  - En résumé94
  - 8 La couleur et le fond 95
  - Couleur du texte95
  - Indiquer le nom de la couleur 96
  - La notation hexadécimale 97
  - La méthode RGB 98
  - Et en bonus 99
  - Couleur de fond100
  - Le CSS et l'héritage 101
  - Exemple d'héritage avec la balise <mark> 102
  - Images de fond103
  - Appliquer une image de fond 103
  - Options disponibles pour l'image de fond 104
  - Combiner les propriétés 106
  - Plusieurs images de fond 107
  - La transparence108
  - La propriété opacity 108
  - La notation RGBa 109
  - En résumé110
  - 9 Les bordures et les ombres 111
  - Bordures standards111
  - En haut, à droite, à gauche, en bas 112
  - Bordures arrondies113
  - Les ombres115
  - box-shadow : les ombres des boîtes 115
  - text-shadow : l'ombre du texte 117
  - En résumé118
  - 10 Créer des apparences dynamiques 119
  - Au survol119
  - Au clic et lors de la sélection121
  - :active : au moment du clic 121
  - :focus : lorsque l'élément est sélectionné 121
  - Lorsque le lien a déjà été consulté122
  - Exercices pratiques123
  - Site de cupcakes 123
  - Votre CV 124
  - En résumé124
  - Troisième partie - Mise en pages du site125
  - 11 Structurer sa page 127
  - Les balises structurantes de HTML 5127
  - <header> : l'en-tête 128
  - <footer> : le pied de page 129
  - <nav> : principaux liens de navigation 129
  - <section> : une section de page 130
  - <aside> : informations complémentaires 131
  - <article> : un article indépendant 132
  - Conclusion 133
  - Exemple concret d'utilisation des balises133
  - En résumé135
  - 12 Le modèle des boîtes 137
  - Les balises de type block et inline137
  - Quelques exemples 139
  - Les balises universelles 139
  - Respecter la sémantique ! 139
  - Les dimensions140
  - Minimum et maximum 141
  - Les marges142
  - En haut, à droite, à gauche, en bas 144
  - Centrer des blocs 145
  - Quand ça dépasse146
  - overflow : couper un bloc 146
  - word-wrap : couper les textes trop larges 148
  - En résumé150
  - 13 La mise en pages avec Flexbox 151
  - Un conteneur, des éléments152
  - Soyez flex !153
  - La direction 153
  - Le retour à la ligne 154
  - Aligner les éléments155
  - Aligner sur l'axe principal 156
  - Aligner sur l'axe secondaire 157
  - Désaxer un seul élément 158
  - Répartir plusieurs lignes159
  - Rappel à l'ordre161
  - Encore plus flex : faire grossir ou maigrir les éléments162
  - Exercice pratique163
  - En résumé163
  - 14 Quelques autres techniques de mise en pages 165
  - Le positionnement flottant165
  - Transformer ses éléments avec display169
  - Le positionnement inline-block170
  - Les positionnements absolu, fixe et relatif172
  - Le positionnement absolu 173
  - Le positionnement fixe 175
  - Le positionnement relatif 176
  - Exercice pratique177
  - En résumé177
  - 15 TP : créer un site pas à pas 179
  - Maquetter la présentation179
  - Organiser le contenu en HTML181
  - Mettre en forme en CSS185
  - Les polices personnalisées 185
  - Définition des styles principaux 186
  - En-tête et liens de navigation 188
  - La bannière 190
  - Le corps 192
  - Le pied de page 194
  - Vérifier la validité197
  - Le code final199
  - Quatrième partie - Fonctionnalités avancées201
  - 16 Les tableaux 203
  - Un tableau simple203
  - La ligne d'en-tête 206
  - Le titre du tableau 207
  - Un tableau structuré208
  - Diviser un gros tableau 208
  - 3, 2, 1... Fusioooon ! 210
  - En résumé212
  - 17 Les formulaires 213
  - Créer un formulaire213
  - Les zones de saisie basiques215
  - Zone de texte monoligne 215
  - Les libellés 216
  - Quelques attributs supplémentaires 217
  - Zone de mot de passe 217
  - Zone de texte multiligne 218
  - Les zones de saisie enrichies219
  - Adresse e-mail 219
  - URL 220
  - Numéro de téléphone 221
  - Nombre 221
  - Curseur 222
  - Couleur 222
  - Date 223
  - Recherche 223
  - Éléments d'options224
  - Cases à cocher 224
  - Boutons radio 225
  - Listes déroulantes 226
  - Finaliser et envoyer le formulaire228
  - Regrouper les champs 228
  - Sélectionner automatiquement un champ 230
  - Rendre un champ obligatoire 230
  - Ajouter le bouton d'envoi 230
  - En résumé231
  - 18 La vidéo et l'audio 233
  - Les formats audio et vidéo233
  - Les formats audio 234
  - Les formats vidéo 234
  - Insérer un élément audio235
  - Insérer une vidéo237
  - En résumé239
  - 19 Le responsive design avec les media queries 241
  - Mettre en place des media queries241
  - Appliquer une media query 242
  - Les règles disponibles 243
  - Tester les media queries 244
  - Mettre les media queries en pratique245
  - La page 247
  - Le menu de navigation 247
  - La bannière 248
  - Le bloc « À propos de l'auteur » 248
  - Le résultat 249
  - Media queries et navigateurs mobiles250
  - En résumé251
  - Exercice pratique252
  - 20 Aller plus loin 253
  - Du site à l'application web (JavaScript, Ajax...)253
  - Technologies liées à HTML 5 (Canvas, SVG, Web Sockets)255
  - Les sites web dynamiques (PHP, JEE, ASP .NET...)256
  - Cinquième partie - Annexes259
  - A Publier son site sur le Web 261
  - Le nom de domaine261
  - Réserver un nom de domaine 262
  - L'hébergeur262
  - Le rôle de l'hébergeur 264
  - Trouver un hébergeur 264
  - Utiliser un client FTP265
  - Installer un client FTP 265
  - Configurer le client FTP 266
  - Transférer les fichiers 268
  - En résumé269
  - B Mémento des balises HTML 271
  - Balises de premier niveau271
  - Balises d'en-tête272
  - Balises de structuration du texte272
  - Balises de listes273
  - Balises de tableau274
  - Balises de formulaire274
  - Balises sectionnantes274
  - Balises génériques275
  - C Mémento des propriétés CSS 277
  - Propriétés de mise en forme du texte277
  - Propriétés de couleur et de fond278
  - Propriétés des boîtes279
  - Propriétés de positionnement et d'affichage280
  - Propriétés des listes280
  - Propriétés des tableaux281
  - Autres propriétés281
  - Index 283
Origine de la notice:
- BPI