Hoja de repaso: Introduction à la structuration et la mise en forme HTML et CSS

1. 📌 L'essentiel

  • Balises structurantes : <body>, <div>, <h1>-<h6>, <>, <pre>, <table>.
  • Balises inline : <span>, <a>, <img, <em>, <strong>, <sub>, <sup>, <cite>, <q>.
  • Sélecteurs CSS : par type, classe, ID, combinateurs, pseudo-classes.
  • Propriétés typographiques : font-family, font-size, color, font-style, font-weight, text-decoration, text-transform, text-align, line-height, letter-spacing, word-spacing.
  • Marges : margin, margin-top, margin-right, margin-bottom, margin-left.
  • Arrière-plans : background-color, background-image, background-repeat, background-attachment, background-position.
  • Bordures : border-width, border-color, border-style, border-radius.
  • Positionnement : static, relative, absolute, fixed, z-index.
  • Listes : list-style-type, list-style-image, list-style-position, list-style.
  • Curseurs : cursor.

2. 🧩 Structures & Composants clés

  • Conteneurs : <body>, <div> — organisation spatiale.
  • Titres : <h1>-<h6> — hiérarchie de contenu.
  • Textes : <blockquote>, <pre> — citations, texte préformaté.
  • Tableaux : <table> — organisation tabulaire.
  • Balises inline : <span>, <a>, <img> — mise en forme et liens.
  • Balises de style : <em>, <strong>, <sub>, <sup>, <cite>, <q> — emphase, citations.
  • Sélecteurs CSS : par type, classe, ID, combinateurs, pseudo-classes.

3. 🔬 Fonctions, Mécanismes & Relations

  • Structure hiérarchique : <body> contient <div>, titres, tableaux, etc.
  • Sélecteurs CSS : ciblent précisément les éléments pour styliser.
  • Héritage typographique : em, % héritent du parent.
  • Mise en forme :
    • Marges créent espace extérieur.
    • Arrière-plans ajoutent couleurs ou images.
    • Bordures encadrent ou arrondissent.
    • Positionnement détermine placement précis.
  • Flux de rendu :
    • display contrôle la visibilité dans le flux.
    • z-index gère la superposition.
  • Listes :
    • Puces classiques ou images personnalisées.
    • Positionnement des éléments.

4. Tableau comparatif : Balises structurantes vs inline

ÉlémentCaractéristiques clésNotes
<body>Conteneur principalEncapsule tout le contenu
<div>Bloc de contenuOrganisation spatiale
<h1>-<h6>Titres hiérarchiquesStructuration du contenu
<blockquote>Citation longueMise en retrait, citation
<pre>Texte préformatéRespecte la mise en forme
<table>Organisation tabulaireDonnées structurées
<span>Inline, stylisation rapideMise en forme inline
<a>Lien hypertexteNavigation entre pages
<img>Image, contenu multimédiaVisuel dans la page

5. 🗂️ Diagramme Hiérarchique ASCII

HTML
 ├─ Structure
 │   ├─ <body>
 │   ├─ <div>
 │   ├─ <h1>-<h6>
 │   ├─ <blockquote>
 │   ├─ <pre>
 │   └─ <table>
 ├─ Inline
 │   ├─ <span>
 │   ├─ <a>
 │   ├─ <img>
 │   ├─ <em>, <strong>
 │   ├─ <sub>, <sup>
 │   └─ <cite>, <q>
 ├─ Style & Layout
 │   ├─ Marges
 │   ├─ Arrière-plans
 │   ├─ Bordures
 │   ├─ Positionnement
 │   └─ Listes & Curseurs

6. ⚠️ Pièges & Confusions fréquentes

  • Confondre <q> (citation courte) et <blockquote> (longue).
  • Oublier la hiérarchie des titres (<h1> > <h2>, etc.).
  • Ne pas distinguer balises block et inline.
  • Confondre background-repeat: repeat et no-repeat.
  • Oublier que border-radius arrondit les coins.
  • Mal utiliser z-index sans positionner en relative, absolute ou fixed.
  • Penser que <span> peut contenir des blocs.
  • Confondre list-style-type et list-style-image.

7. ✅ Checklist Examen Final

  • Connaître la fonction de chaque balise structurante.
  • Savoir différencier balises block et inline.
  • Maîtriser les propriétés CSS principales : typographie, marges, arrière-plans, bordures.
  • Comprendre le positionnement : static, relative, absolute, fixed.
  • Savoir utiliser et combiner sélecteurs CSS.
  • Être capable de styliser une liste avec list-style.
  • Connaître l’impact de z-index et background-repeat.
  • Savoir utiliser border-radius pour arrondir les coins.
  • Comprendre l’héritage typographique avec em et %.
  • Savoir comment créer une hiérarchie de contenu claire avec <h1>-<h6>.
  • Maîtriser la syntaxe des sélecteurs CSS avancés.
  • Être capable d’identifier et corriger les erreurs fréquentes.
  • Connaître les principales propriétés de positionnement et leur effet.
  • Savoir comment styliser les curseurs pour améliorer l’UX.
  • Être capable d’organiser une page web avec une structure claire et cohérente.

Pon a prueba tus conocimientos

Pon a prueba tus conocimientos sobre Introduction à la structuration et la mise en forme HTML et CSS con 9 preguntas de opción múltiple con correcciones detalladas.

1. Quelle balise HTML est principalement utilisée pour structurer le contenu principal d'une page web ?

2. Quelles sont les balises structurantes principales mentionnées dans le fiche pour organiser une page HTML?

Realiza el cuestionario →

Repasa con tarjetas de memoria

Memoriza los conceptos clave de Introduction à la structuration et la mise en forme HTML et CSS con 10 tarjetas de memoria interactivas.

Balises structurantes — exemples ?

<body>, <div>, <h1>-<h6>

Balises structurantes — exemples?

<body>, <div>, <h1>-<h6>, <pre>, <table>

Propriétés typographiques — exemples ?

font-family, font-size, color

Ver tarjetas de memoria →

Similar courses

Introduction aux Bases de Données Relationnelles

Introduction à la géométrie, algèbre et probabilités

Introduction à l'Intelligence Artificielle Symbolique

Intelligence Artificielle

Introduction aux documents et sécurité en construction

Bases de données

Introduction à l'Informatique et IA

Introduction aux marchés publics et réglementations du bâtiment

Bases de données

Crea tus propias hojas de repaso

Importa tu curso y la IA genera hojas, cuestionarios y tarjetas de memoria en 30 segundos.

Generador de hojas