Sommaire

Informations générales
- Titre, auteur...
Avant-propos
- Introduction
L’évolution des spécifications
- Une brève histoire du Web
- Les travaux d’élaboration des spécifications
- L’évolution du HTML
- L’évolution des CSS
Les navigateurs
- L’évolution des navigateurs
- Les outils de développement
- La compatibilité des navigateurs
Les bonnes pratiques
- Séparer le contenu de la mise en forme
- Utiliser une structure sémantique
- Optimiser le code et organiser vos fichiers
- Un exemple d’une page bien formée
- Valider le code de vos pages
Les éléments HTML
- Bien utiliser le HTML
- Les balises et les contenus
- Les attributs des éléments
- Le bon usage de la syntaxe
- L’imbrication des éléments
- Les commentaires
La structure des pages
- La structure générale des pages web
- La déclaration doctype
- L’élément <html>
- L'élément <head>
- L’élément <body>
- Les propriétés d'affichage
- Exemple d’une structure simple
Les conteneurs sémantiques
- Bien utiliser les conteneurs sémantiques
- L'élément <div>
- L'élément <span>
- L'élément <header>
- L'élément <footer>
- L'élément <aside>
- L'élément <nav>
- L’élément <main>
- L’élément <section>
- L'élément <article>
- L’affichage des éléments de structure
- Deux exemples de structure sémantique de page
- Un exemple de structure sémantique d'un article
Les conteneurs de texte
- Bien utiliser les conteneurs de texte
- Les attributs de langue et de direction du texte
- Les titres
- Les paragraphes
- Les citations
- Les listes
- Les adresses
- Le texte préformaté
- Les lignes horizontales
La mise en forme sémantique du texte
- Utiliser une mise en forme sémantique
- Insérer des caractères spéciaux
- L’emphase forte
- L’emphase simple
- Mettre en gras et en italique
- L’indice et l’exposant
- Le souligné
- Le barré
- Réduire la taille de caractères
- Les titres d’œuvres et les citations courtes
- Les insertions et suppressions
- Le retour à la ligne
- D'autres mises en forme sémantiques
Les éléments d’interaction
- Afficher des détails
- Utiliser une boîte de dialogue
Les liens
- Insertion de liens pour lier les pages
- La structure des liens
- Les liens vers des pages
- Les liens internes
- Le contexte d’ouverture du lien
- Les relations des liens
- Les liens vers les messageries
- Les liens de téléchargement
- Des liens en image
Les tableaux
- La bonne utilisation des tableaux
- La structure des tableaux
- Les lignes
- Les cellules
- La fusion des cellules
- Le titre
- Les groupes de colonnes
- Les tableaux structurés
Les images
- Bien exploiter les images
- Comprendre les formats de compression
- Insérer des images avec l’élément <img>
- Insérer des illustrations avec l’élément <figure>
Les formulaires
- La présence des formulaires dans les pages web
- La structure des formulaires
- Les champs de texte
- Les listes de valeurs
- Les boutons radio à choix unique
- Les cases à cocher à choix multiple
- D’autres types de champs avec <input>
- Les aides à la saisie
- Les boutons d’action
- Un exemple complet de formulaire
Le multimédia
- La présence du multimédia
- Les formats et les codecs
- L’insertion d’une vidéo
- L’insertion d’un fichier audio
Le Web sémantique avec Microdata
- L’état des lieux du Web sémantique
- L’objectif de Microdata
- Le schéma pour les personnes
- Imbriquer des schémas
Intégrer les styles CSS
- Le rôle des CSS
- Les styles intégrés dans un élément HTML
- Les styles définis dans la page
- Les styles définis dans un fichier .css
- Erreur pas de nom trouvé !!!
Définir les styles CSS
- La structure d’une règle de style
- Les unités de mesure
- La notation des couleurs
- Les commentaires
- Erreur pas de nom trouvé !!!
- L’application des styles
- La version 4 des sélecteurs
Les styles pour les polices de caractères
- Le module CSS 3 pour les polices de caractères
- Les polices de caractères
- La taille des caractères
- La mise en forme des caractères
- La syntaxe raccourcie
- Le module CSS 4 pour les polices de caractères
Les styles pour le texte
- L’application des styles
- La couleur du texte
- Les décorations
- La mise en forme du texte
- D'autres propriétés pour le texte
- Le module CSS 4 pour la mise en forme du texte
Les styles pour les conteneurs de texte
- Les titres, les paragraphes et les citations
- Les listes
- Les tableaux
- Les formulaires
Les styles pour les boîtes
- Le concept du modèle de boîte
- Les affichages des boîtes
- Les marges externes
- Les bordures
- Les remplissages internes
- La largeur et la hauteur des boîtes
- Les arrière-plans
- Les coins arrondis des boîtes
- Les ombres portées des boîtes
La mise en page à l'aide des boîtes
- Les objectifs
- Le positionnement des boîtes
- Le flottement des boîtes
- La superposition des boîtes
- La mise en page en affichage tableau
- Le débordement des boîtes
- La visibilité des boîtes
Le Responsive Web Design
- Le développement responsive
- Les requêtes de média
- Erreur pas de nom trouvé !!!
- Erreur pas de nom trouvé !!!
Créer des mises en page modernes
- Les objectifs
- Utiliser le module CSS Flexible Box Layout
- Utiliser le module CSS Grid Layout
Les modules d’animation
- Les modules CSS
- Les transformations
- Les transitions
- Les animations
Des modules CSS pour les graphistes
- Des modules en devenir
- Les masques
- L'habillage du texte
Les feuilles de style pour l’impression
- L’impression des pages web
- Les feuilles de style spécifiques
- Les propriétés globales des pages
- Les polices de caractères
- Les éléments non imprimés
- Les ruptures de lecture
- Les liens hypertextes

Valider le code de vos pages `Code:valider`

Il est important de valider le code HTML de vos pages. En effet, vos clients s’attendent à recevoir un site ou une application web parfaitement fonctionnelle, sans erreur pouvant détériorer son utilisation. Et n’oubliez pas que les assistants vocaux pour les personnes malentendantes se basent sur des pages valides.

Pour toutes ces raisons, vous pouvez utiliser des validateurs de code. Certains éditeurs de code en intègrent un nativement, d’autres nécessitent une installation d’une extension.

Mais vous pouvez aussi utiliser les validateurs en ligne, comme celui du W3C qui est le plus rigoureux. Voici son URL : https://validator.w3.org.

images/C03-001.png

Vous pouvez choisir de valider une page HTML publiée (onglet Validate by URI), d’importer une de vos pages (onglet Validate by File Upload), ou de copier/coller du code de votre page (onglet Validate by Direct Input).

Pour découvrir la suite, choisissez votre offre

Abonnement

tous les livres et vidéos ENI
en illimité sans engagement

J'en profite

Déja abonné ?

Je me connecte

du livre imprimé ou
du livre numérique

J'en profite