1. Livres et vidéos
  2. HTML5 et CSS3 - Maîtrisez les standards de la création de sites web (Nouvelle édition)

HTML5 et CSS3 Maîtrisez les standards de la création de sites web (Nouvelle édition)

  • Accès illimité 24h/24, 7J/7
  • Tous les livres en ligne, les vidéos et les cours enregistrés ENI
  • Plus de 10 nouveautés livres et vidéos chaque mois
  • Les nouveautés disponibles le jour de leur sortie
  • Accès 100% en ligne
  • En stock
  • Expédié en 24h00
  • Livraison à partir de 0,01 €
  • Version en ligne offerte
  • 1 h d'accès gratuit à tous nos livres et vidéos pour chaque commande
  • Accessible immédiatement
  • Version HTML
  • Accès illimité 24h/24, 7J/7

Présentation

Ce livre sur le langage HTML5 (en version 5.2 au moment de l'écriture) et les feuilles de styles CSS3, langages fondateurs dans la création de sites web, s'adresse aux développeurs qui souhaitent disposer des connaissances nécessaires pour créer et faire évoluer des sites web dans le respect des bonnes pratiques.

Le livre est rédigé de façon à permettre un apprentissage progressif des éléments HTML et des propriétés CSS les plus couramment utilisés. Il n'a pas pour objectif de présenter l'ensemble des syntaxes mais uniquement celles couramment exploitées dans la création de sites web modernes. Les exemples de code présentés par l'auteur sont illustrés par des captures d'écran afin que le lecteur puisse se faire une idée de l'affichage obtenu.

Dans la première partie du livre, l'auteur donne les informations nécessaires pour bien appréhender la conception de site web. Il présente les spécifications techniques du HTML et des CSS (les fameuses recommandations proposées par le W3C), le rôle essentiel des navigateurs et leur compatibilité avec les éléments HTML et les propriétés CSS, ainsi que les bonnes pratiques de conception de sites web pour obtenir des contenus sémantiques bien conçus.

Dans la deuxième partie, le lecteur apprend à concevoir la structure des pages web avec des éléments HTML sémantiques dédiés. Il étudie ensuite les éléments qui permettent d'insérer du texte, des liens, des tableaux, des images, des formulaires, sans oublier des contenus multimédias. Un chapitre est consacré aux Microdata permettant d'obtenir un site sémantique et d'optimiser son référencement.

La troisième partie permet au lecteur d'exploiter les CSS afin de mettre en forme et de mettre en page un site web. Il y apprend la syntaxe des CSS et des sélecteurs puis étudie les notions d'héritage et de cascade. Ensuite, il découvre comment mettre en forme chaque composant d'une page web : le texte, les images, les formulaires ainsi que les boîtes conteneurs. Les différentes techniques de mise en page et la conception des sites Responsive sont également détaillées. L'auteur termine avec l'étude des modules CSS dédiés aux animations pour dynamiser des pages web.


Les chapitres du livre :
Avant-propos – Partie Aborder la conception des sites web : L'évolution des spécifications – Les navigateurs – Les bonnes pratiques – Partie L'HTML 5.2 : Les éléments HTML – La structure des pages – Les conteneurs sémantiques – Les conteneurs de texte – La mise en forme sémantique du texte – Les éléments d'interaction – Les liens – Les tableaux – Les images – Les formulaires – Le multimédia – Le web sémantique avec Microdata – Partie Les CSS 3 : Intégrer les styles CSS – Définir les styles CSS – Les styles pour les polices de caractères – Les styles pour le texte – Les styles pour les conteneurs de texte – Les styles pour les boîtes – La mise en page à l'aide des boîtes – Le Responsive Web Design – Les modules d'animation – Des modules CSS pour les graphistes – - Les feuilles de styles pour l'impression

Table des matières

  • L’évolution des spécifications
    • 1. Une brève histoire du Web
    • 2. Les travaux d’élaboration des spécifications
    • 3. L’évolution du HTML
    • 4. L’évolution des CSS
  • Les navigateurs
    • 1. L’évolution des navigateurs
    • 2. Les outils de développement
    • 3. La compatibilité des navigateurs
  • Les bonnes pratiques
    • 1. Séparer le contenu de la mise en forme
    • 2. Utiliser une structure sémantique
    • 3. Optimiser le code et organiser vos fichiers
    • 4. Un exemple d’une page bien formée
    • 5. Valider le code de vos pages
  • Les éléments HTML
    • 1. Bien utiliser le HTML
    • 2. Les balises et les contenus
    • 3. Les attributs des éléments
    • 4. Le bon usage de la syntaxe
    • 5. L’imbrication des éléments
    • 6. Les commentaires
  • La structure des pages
    • 1. La structure générale des pages web
    • 2. La déclaration doctype
    • 3. L’élément <html>
    • 4. L'élément <head>
      • 4.1 Les éléments enfant de l’en-tête
      • 4.2 Les éléments <meta>
      • 4.3 L’élément <title>
      • 4.4 L’élément <link>
      • 4.5 L’élément <style>
      • 4.6 L’élément <script>
    • 5. L’élément <body>
    • 6. Exemple d’une structure simple
  • Les conteneurs sémantiques
    • 1. Bien utiliser les conteneurs sémantiques
    • 2. L'élément <div>
    • 3. L'élément <span>
    • 4. L'élément <header>
    • 5. L'élément <footer>
    • 6. L'élément <aside>
    • 7. L'élément <nav>
    • 8. L’élément <main>
    • 9. L’élément <section>
    • 10. L'élément <article>
    • 11. Deux exemples de structure sémantique de page
      • 11.1 Une structure sémantique simple
      • 11.2 Une structure sémantique plus élaborée
    • 12. Un exemple de structure sémantique d'un article
  • Les conteneurs de texte
    • 1. Bien utiliser les conteneurs de texte
    • 2. La langue et la direction du texte
    • 3. Les titres
    • 4. Les paragraphes
    • 5. Les citations
    • 6. Les listes
      • 6.1 Les différents types de liste
      • 6.2 Les listes non ordonnées
      • 6.3 Les listes ordonnées
      • 6.4 L’attribut de <li>
      • 6.5 Les listes de définitions
    • 7. Les adresses
    • 8. Le texte préformaté
    • 9. Les lignes horizontales
  • La mise en forme sémantique du texte
    • 1. Utiliser une mise en forme sémantique
    • 2. Insérer des caractères spéciaux
    • 3. L’emphase forte
    • 4. L’emphase simple
    • 5. Mettre en gras et en italique
    • 6. L’indice et l’exposant
    • 7. Le souligné
    • 8. Le barré
    • 9. Réduire la taille de caractère
    • 10. Les titres d’œuvres et les citations courtes
    • 11. Les insertions et suppressions
    • 12. Le retour à la ligne
    • 13. D'autres mises en forme sémantiques
  • Les éléments d’interaction
    • 1. Afficher des détails
    • 2. Utiliser une boîte de dialogue
  • Les liens
    • 1. Insertion de liens pour lier les pages
    • 2. La structure des liens
    • 3. Les liens vers des pages
    • 4. Les liens internes
    • 5. Le contexte d’ouverture du lien
    • 6. Les relations des liens
    • 7. Les liens vers les messageries
    • 8. Les liens de téléchargement
    • 9. Des liens en image
  • Les tableaux
    • 1. La bonne utilisation des tableaux
    • 2. La structure des tableaux
    • 3. Les lignes
    • 4. Les cellules
    • 5. La fusion des cellules
    • 6. Le titre
    • 7. Les groupes de colonnes
      • 7.1 Regrouper des colonnes
      • 7.2 Cibler des colonnes
    • 8. Les tableaux structurés
  • Les images
    • 1. Bien exploiter les images
    • 2. Comprendre les formats de compression
      • 2.1 Compresser les images
      • 2.2 Le format GIF
      • 2.3 Le format JPEG
      • 2.4 Le format PNG
    • 3. Insérer des images avec l’élément <img>
      • 3.1 L’utilisation des images
      • 3.2 L’attribut src
      • 3.3 L’attribut alt
      • 3.4 Les attributs width et height
      • 3.5 Les attributs srcset et size
    • 4. Insérer des illustrations avec l’élément <figure>
      • 4.1 L’utilisation des illustrations
      • 4.2 L’élément <figure>
      • 4.3 L’élément <figcaption>
  • Les formulaires
    • 1. La présence des formulaires dans les pages web
    • 2. La structure des formulaires
      • 2.1 Le formulaire
      • 2.2 Les étiquettes
      • 2.3 Grouper des champs
      • 2.4 Les attributs communs
    • 3. Les champs de texte
      • 3.1 La saisie de texte
      • 3.2 Les champs de texte simples
      • 3.3 Les champs de texte pour les mots de passe
      • 3.4 Les champs de texte multilignes
    • 4. Les listes de valeurs
    • 5. Les boutons radio à choix unique
    • 6. Les cases à cocher à choix multiple
    • 7. D’autres types de champs avec <input>
    • 8. Les aides à la saisie
      • 8.1 Les objectifs
      • 8.2 La consigne de saisie
      • 8.3 Activer un champ
      • 8.4 L’autocomplétion
      • 8.5 Rendre un champ obligatoire
      • 8.6 Les saisies autorisées
    • 9. Les boutons d’action
    • 10. Un exemple complet de formulaire
      • 10.1 Le code complet du formulaire
      • 10.2 Le formulaire
      • 10.3 Les boutons radio
      • 10.4 Les champs de texte
      • 10.5 Le champ numérique
      • 10.6 Le champ d’adresse mail
      • 10.7 Le champ de date
      • 10.8 La liste déroulante
      • 10.9 Les cases à cocher
      • 10.10 Les boutons d’action
  • Le multimédia
    • 1. La présence du multimédia
    • 2. Les formats et les codecs
    • 3. L’insertion d’une vidéo
      • 3.1 L’élément <video>
      • 3.2 La source de la vidéo
      • 3.3 Les contrôles
      • 3.4 Précharger la vidéo
      • 3.5 Afficher une image d’ouverture
      • 3.6 Spécifier les dimensions
      • 3.7 Proposer plusieurs sources
      • 3.8 Jouer en boucle et désactiver le son
    • 4. L’insertion d’un fichier audio
  • Le Web sémantique avec Microdata
    • 1. L’état des lieux du Web sémantique
    • 2. L’objectif de Microdata
      • 2.1 La norme et les schémas
      • 2.2 Les attributs
    • 3. Le schéma pour les personnes
      • 3.1 Définir l’utilisation de Microdata avec itemscope
      • 3.2 Indiquer le schéma utilisé avec itemtype
      • 3.3 Spécifier les propriétés avec itemprop
    • 4. Imbriquer des schémas
      • 4.1 Pourquoi imbriquer des schémas ?
      • 4.2 Les deux schémas nécessaires
      • 4.3 Faire référence à un élément
  • Intégrer les styles CSS
    • 1. Le rôle des CSS
    • 2. Les styles intégrés dans un élément HTML
    • 3. Les styles définis dans la page
    • 4. Les styles définis dans un fichier .css
    • 5. Les styles importés
  • Définir les styles CSS
    • 1. La structure d’une règle de style
      • 1.1 La terminologie des CSS
      • 1.2 Définir une règle de style
      • 1.3 Les règles de nommage
    • 2. Les unités de mesure
      • 2.1 L’utilisation des unités de mesure
      • 2.2 Les valeurs initiale et héritée
      • 2.3 Les valeurs numériques
      • 2.4 Les unités de longueur
      • 2.5 Les valeurs calculées
    • 3. La notation des couleurs
      • 3.1 Utiliser les couleurs
      • 3.2 La notation nominative
      • 3.3 La notation hexadécimale
      • 3.4 Les notations RGB et RGBA
      • 3.5 Les notations HSL et HSLA
    • 4. Les commentaires
    • 5. Les sélecteurs
      • 5.1 L’objectif des sélecteurs
      • 5.2 Le sélecteur universel
      • 5.3 Les sélecteurs de type
      • 5.4 Les sélecteurs de classe
      • 5.5 Les sélecteurs de classe de type
      • 5.6 Les sélecteurs d’identification
      • 5.7 Les sélecteurs d’attribut
      • 5.8 Les sélecteurs de pseudo-classes
        • 5.8.1 Utiliser les pseudo-classes
        • 5.8.2 Les pseudo-classes dynamiques des liens
        • 5.8.3 Les pseudo-classes dynamiques des actions utilisateurs
        • 5.8.4 La pseudo-classe d'ancre
        • 5.8.5 La pseudo-classe de langue
        • 5.8.6 Les pseudo-classes d’état
        • 5.8.7 Les pseudo-classes de structure
        • 5.8.8 La pseudo-classe de négation
      • 5.9 Les sélecteurs de pseudo-éléments
        • 5.9.1 Le pseudo-élément de première ligne
        • 5.9.2 Le pseudo-élément de première lettre
        • 5.9.3 Les pseudo-éléments de contenu
      • 5.10 Les combinaisons de sélecteurs
        • 5.10.1 Les sélecteurs combinés
        • 5.10.2 Les combinaisons descendantes
        • 5.10.3 Les combinaisons d’enfants
        • 5.10.4 Les combinaisons de frères immédiats
        • 5.10.5 Les combinaisons de frères
    • 6. L’application des styles
      • 6.1 La notion d’héritage
      • 6.2 La spécificité des sélecteurs
        • 6.2.1 Le calcul de la spécificité des sélecteurs
        • 6.2.2 Un exemple des spécificités des sélecteurs
      • 6.3 La notion d’importance
      • 6.4 La notion de cascade
        • 6.4.1 Les priorités dans la cascade
        • 6.4.2 Les conflits dans la cascade
      • 6.5 L’ordre d’application des styles
  • Les styles pour les polices de caractères
    • 1. Le module CSS 3 pour les polices de caractères
    • 2. Les polices de caractères
      • 2.1 Choisir une police de caractère
      • 2.2 Les familles de caractère génériques
      • 2.3 Déclarer une police de caractère
      • 2.4 Embarquer une police de caractère
    • 3. La taille des caractères
      • 3.1 Les tailles par défaut
      • 3.2 Modifier la taille des caractères
    • 4. La mise en forme des caractères
      • 4.1 La graisse des caractères
      • 4.2 L’italique des caractères
      • 4.3 La chasse des caractères
      • 4.4 Les petites capitales des caractères
    • 5. La syntaxe raccourcie
  • Les styles pour le texte
    • 1. L’application des styles
    • 2. La couleur du texte
    • 3. Les décorations
      • 3.1 Le module CSS
      • 3.2 Les lignes pour le texte
      • 3.3 Les lignes décoratives
      • 3.4 Les ombres portées
    • 4. La mise en forme du texte
      • 4.1 Le module CSS
      • 4.2 Le changement de casse
      • 4.3 Les espaces entre les caractères et les mots
      • 4.4 Les espaces blancs
      • 4.5 Les alignements du texte
      • 4.6 Le retrait de première ligne
      • 4.7 La césure des fins de ligne
    • 5. D'autres propriétés pour le texte
      • 5.1 L'interligne
      • 5.2 Le texte en excès
  • Les styles pour les conteneurs de texte
    • 1. Les titres, les paragraphes et les citations
    • 2. Les listes
      • 2.1 Les éléments des listes et les styles
      • 2.2 Les styles d'énumération
      • 2.3 L'énumération avec une image
      • 2.4 La position du symbole
      • 2.5 La syntaxe raccourcie
    • 3. Les tableaux
      • 3.1 Le texte dans les tableaux
      • 3.2 La bordure du tableau
      • 3.3 Les bordures des cellules
      • 3.4 L'espace interne des cellules
      • 3.5 Les cellules vides
      • 3.6 Le titre du tableau
    • 4. Les formulaires
      • 4.1 La mise en forme du texte des champs
      • 4.2 Les états actif et inactif des objets
      • 4.3 Les champs obligatoires
      • 4.4 La largeur des étiquettes et des champs
      • 4.5 Mettre en forme le focus des champs
  • Les styles pour les boîtes
    • 1. Le concept du modèle de boîte
    • 2. Les affichages des boîtes
      • 2.1 Les différents types d'affichage
      • 2.2 L'affichage en bloc
      • 2.3 L’affichage en ligne
      • 2.4 Changer le type d'affichage
    • 3. Les marges externes
      • 3.1 La marge globale et les marges différenciées
      • 3.2 Les syntaxes raccourcies
    • 4. Les bordures
    • 5. Les remplissages internes
    • 6. La largeur et la hauteur des boîtes
      • 6.1 Les dimensions du contenu
      • 6.2 Les dimensions d'affichage
    • 7. Les arrière-plans
      • 7.1 La couleur d'arrière-plan
      • 7.2 Les images d’arrière-plan
      • 7.3 Les dégradés de couleurs
      • 7.4 L'opacité des boîtes
    • 8. Les coins arrondis des boîtes
    • 9. Les ombres portées des boîtes
  • La mise en page à l'aide des boîtes
    • 1. Les objectifs
    • 2. Le positionnement des boîtes
      • 2.1 Les positions des boîtes
      • 2.2 La position relative
      • 2.3 La position absolue
      • 2.4 La position fixe
    • 3. Le flottement des boîtes
      • 3.1 Habiller une image
      • 3.2 Interdire le flottement
    • 4. La superposition des boîtes
    • 5. La mise en page en affichage tableau
    • 6. Le débordement des boîtes
    • 7. La visibilité des boîtes
    • 8. La mise en page flexible
    • 9. La mise en page en grille
  • Le Responsive Web Design
    • 1. Le développement responsive
    • 2. Les requêtes de média
      • 2.1 Les critères
      • 2.2 La syntaxe
      • 2.3 Les valeurs minimales et maximales
      • 2.4 Les opérateurs logiques
    • 3. La taille des écrans
    • 4. Un exemple de mise en page responsive
      • 4.1 Le site initial
      • 4.2 Le site responsive
  • Les modules d’animation
    • 1. Les modules CSS
    • 2. Les transformations
      • 2.1 La fonction et le point de référence
      • 2.2 Le déplacement
      • 2.3 La mise à l'échelle
      • 2.4 La rotation
      • 2.5 La déformation
      • 2.6 Appliquer toutes les transformations
    • 3. Les transitions
      • 3.1 Créer des transitions
      • 3.2 Créer un déplacement horizontal
      • 3.3 Créer un déplacement horizontal et vertical
    • 4. Les animations
      • 4.1 Créer des animations
      • 4.2 Créer un déplacement infini
      • 4.3 Créer un formulaire animé
  • Des modules CSS pour les graphistes
    • 1. Des modules en devenir
    • 2. Les masques
      • 2.1 Le module CSS
      • 2.2 Créer un masque
    • 3. L'habillage du texte
      • 3.1 Le module CSS
      • 3.2 Créer un habillage
  • Les feuilles de style pour l’impression
    • 1. L’impression des pages web
    • 2. Les feuilles de style spécifiques
      • 2.1 Les liaisons aux fichiers CSS
      • 2.2 Les requêtes de média
    • 3. Les propriétés globales des pages
    • 4. Les polices de caractères
    • 5. Les éléments non imprimés
    • 6. Les ruptures de lecture
      • 6.1 Les sauts de page
      • 6.2 Les lignes solidaires
      • 6.3 Les veuves et les orphelines
    • 7. Les liens hypertextes
    • Index

Auteur

Christophe AUBRYEn savoir plus

Responsable pédagogique dans un centre de formation et formateur sur les technologies Web et les Arts graphiques pendant plus de quinze ans, Christophe AUBRY est aujourd'hui dirigeant de la société netPlume spécialisée dans la rédaction pédagogique et la création de sites internet. Auteur de nombreux livres et vidéos aux Editions ENI (HTML/CSS, RWD, WordPress, Drupal, Joomla…), il reste au fait des nouveautés concernant la conception des sites web en effectuant une veille technologique régulière.

Caractéristiques

  • Niveau Initié à Confirmé
  • Nombre de pages 404 pages
  • Parution février 2019
    • Livre (broché) - 17 x 21 cm
    • ISBN : 978-2-409-01783-4
    • EAN : 9782409017834
    • Ref. ENI : RI5.2HTM
  • Niveau Initié à Confirmé
  • Parution février 2019
    • HTML
    • ISBN : 978-2-409-01785-8
    • EAN : 9782409017858
    • Ref. ENI : LNRI5.2HTM