Cours HTML5 et CSS3 : Cours et exercices corrigés

Présentation de l'ouvrage

Ce document est un extrait d'un ouvrage de référence rédigé par Jean Engels et publié par les éditions Eyrolles en 2012. Intitulé HTML 5 et CSS 3 : Cours et exercices corrigés, il s'adresse à toutes les personnes qui souhaitent apprendre ou perfectionner leurs compétences dans la création de pages web modernes. L'approche pédagogique repose sur une distinction claire entre la structuration sémantique des documents, assurée par le langage HTML 5, et leur présentation visuelle, confiée aux feuilles de style CSS 3.

Organisation et structure du contenu

L'ouvrage est divisé en deux grandes parties complémentaires. La première partie aborde en détail le langage HTML 5, depuis ses origines au sein du WHATWG jusqu'à l'écriture de documents conformes et bien formés. Les chapitres initiaux guident le lecteur dans la configuration de son environnement de travail, le choix d'un éditeur classique et la mise en ligne des fichiers via un protocole de transfert FTP tel que FileZilla.

La structure générale d'un document HTML 5 y est minutieusement décortiquée, en commençant par la déclaration DOCTYPE, l'élément racine , l'en-tête et ses métadonnées, jusqu'au corps de la page . L'auteur détaille l'utilisation des éléments d'en-tête fondamentaux comme le titre, l'adresse de base, les liens vers des ressources externes, les scripts JavaScript et l'incorporation de styles internes.

Le dimensionnement et le positionnement en CSS 3

La seconde partie du document se concentre sur les feuilles de style CSS et aborde des aspects techniques avancés de mise en page. Un chapitre complet est consacré au dimensionnement, au positionnement et à la transformation des éléments graphiques. Les étudiants y découvrent comment maîtriser les propriétés de largeur et de hauteur, gérer les dépassements de contenu avec overflow, et définir des dimensions minimales ou maximales.

Le document explique également les différents schémas de positionnement disponibles en CSS : le flux normal, le positionnement flottant avec la propriété float, le positionnement relatif, ainsi que les positionnements absolu et fixe qui permettent de structurer des interfaces complexes s'apparentant à des cadres. Les notions d'ordre d'empilement par la propriété z-index et de visibilité complètent l'apprentissage pour créer des comportements interactifs.

Transformations géométriques et effets visuels

L'ouvrage introduit par ailleurs les nouveautés de CSS 3 en matière d'effets visuels et de transformations géométriques. Les lecteurs étudient les translations, les rotations, ainsi que les fonctions d'agrandissement et de réduction. Sont également présentées les propriétés d'affichage multicolonne pour structurer du texte en colonnes avec des lignes de séparation personnalisables, ainsi que la gestion des transitions pour animer les modifications de style.

Questions fréquentes

À quoi sert la déclaration DOCTYPE dans un document HTML 5 ?

La déclaration DOCTYPE, placée au tout début du document, indique au navigateur le type de document qu'il s'apprête à lire et garantit qu'il s'agit d'un code conforme aux spécifications HTML 5.

Quelle est la différence entre le positionnement absolu et le positionnement fixe ?

Dans le positionnement absolu, l'élément est positionné par rapport à son bloc conteneur et défile avec la page. Dans le positionnement fixe, l'élément est positionné par rapport à la fenêtre du navigateur et reste immobile même lors du défilement.

Comment s'effectue la liaison d'une feuille de style externe ?

La liaison s'effectue dans l'en-tête du document à l'aide de l'élément en renseignant l'attribut rel="stylesheet" et l'adresse du fichier CSS dans l'attribut href.

Testez vos connaissances