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

Les `Citation`citations

Les blocs de citation permettent d’afficher un texte extrait d’une source externe. C’est l’élément <blockquote> qui est utilisé. L’élément <blockquote> sert de conteneur à d’autres éléments qui peuvent être de tout type : titre, paragraphe, image…

Voici les propriétés d’affichage par défaut des citations :

blockquote { 
     display : block ; 
     margin-top: 1em; 
     margin-bottom: 1em; 
     margin-left: 40px; 
     margin-right: 40px; 
}

Voici un exemple simple :

<!doctype html> 
<html lang="fr"> 
   <head> 
       <meta charset="UTF-8"> 
       <title>Ma page web</title> 
   </head> 
   <body> 
       <h1>Inceptos Consectetur Tristique Bibendum</h1> 
       <p>Morbi leo risus, porta ac consectetur...</p> 
       <blockquote> 
           <h2>Fusce Mattis Ligula Etiam</h2> 
           <p>Nullam id dolor id nibh...</p> 
           <img src="gutenberg.jpg" alt="Gutenberg" />  ...

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