Fiche de Révision : HTML et CSS (Niveau Intermediate)

Introduction à HTML et CSS

Le HTML (HyperText Markup Language) et le CSS (Cascading Style Sheets) sont les deux piliers fondamentaux de la création de pages web. Le HTML structure le contenu, tandis que le CSS le met en forme visuellement.

HTML est un langage de balisage qui organise les textes, images, liens, et autres contenus d'une page web.

CSS est un langage de style qui définit l'apparence (couleurs, positions, polices...) des éléments HTML.

L’apprentissage de ces deux technologies est essentiel pour maîtriser le développement front-end.

1. Structure et sémantique du HTML

1.1. Le rôle du HTML

Le HTML n’est pas un langage de programmation mais un langage de structuration. Il utilise des balises pour délimiter les parties d’un document.

Exemple d’une structure minimale :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple HTML</title>
</head>
<body>
    <h1>Bienvenue</h1>
    <p>Ceci est un paragraphe.</p>
</body>
</html>

<html> : racine du document.
<head> : informations méta.
<body> : contenu affiché.
<h1> à <h6> : titres, de plus important à moins important.
<p> : paragraphe.

1.2. Les balises sémantiques

Depuis HTML5, de nombreuses balises introduisent une signification précise au contenu :

Balise	Rôle
<header>	En-tête d’une page ou section
<nav>	Section de navigation
<main>	Contenu principal
<article>	Contenu autonome (article, billet)
<section>	Section générique
<aside>	Contenu annexe (barre latérale)
<footer>	Pied de page ou bas de section

Ce choix améliore l’accessibilité et le référencement SEO.

1.3. Attributs fondamentaux

Les balises HTML peuvent avoir des attributs pour affiner leur comportement :

id : identifiant unique, utilisé en CSS ou JS.
class : regroupe des éléments pour leur appliquer des styles communs.
href : URL de destination pour les liens.
src : source pour les images, scripts, etc.
alt : texte alternatif pour images (important SEO & accessibilité).

2. Concepts clés de CSS

2.1. Le rôle du CSS

CSS contrôle la présentation visuelle des éléments HTML :

Couleurs, polices, tailles
Marges, paddings, espaces
Positionnement dans la page
Effets (ombres, dégradés)

2.2. Syntaxe de base

Un style CSS se compose d’un sélecteur et d’un ensemble de déclarations (propriété + valeur) :

h1 {
    color: blue;
    font-size: 24px;
}

h1 : sélectionne tous les éléments <h1>.
color et font-size : propriétés.
blue et 24px : valeurs.

2.3. Sélecteurs CSS

Les sélecteurs ciblent des éléments HTML spécifiques.

Sélecteur	Description	Exemple
*	Tous les éléments	* { margin: 0; }
elem	Tous les éléments de type elem	p { color: red; }
.class	Tous les éléments avec une classe donnée	.menu { font-weight: bold; }
#id	Un élément avec un identifiant unique	#header { background: gray; }
elem.class	Éléments de type elem avec la classe class	div.highlight { ... }
elem1 elem2	Tous les elem2 descendants (enfants ou plus) de elem1	nav a { color: green; }

2.4. Modèle de boîte CSS (Box Model)

Chaque élément HTML est une boîte composées de :

Content (contenu)
Padding (remplissage entre contenu et bordure)
Border (bordure)
Margin (espacement extérieur)

[Diagramme]

Cette modélisation est fondamentale pour contrôler la taille et l’espacement des éléments.

2.5. Héritage et cascade

Certaines propriétés CSS sont héritées par défaut (ex: couleur de texte).
D’autres non (ex: marges, bordures).
La cascade gère la priorité quand plusieurs règles s’appliquent :
- Priorité en fonction de la spécificité.
- Les règles définies plus bas dans la feuille de style écrasent les précédentes.
- L’utilisation de !important force la priorité (à utiliser avec précaution).

3. Relation entre HTML et CSS

3.1. Liaison CSS dans HTML

Il y a 3 façons principales d’intégrer du CSS dans un document HTML :

Méthode	Description	Exemple
Inline	Dans un attribut style de la balise	<p style="color: red;">Texte</p>
Interne	Bloc <style> dans <head>	<style>p {color: blue;}</style>
Externe	Fichier .css lié via <link>	<link rel="stylesheet" href="style.css">

L’approche externe est recommandée pour la maintenabilité.

3.2. Exemples d’application

HTML :

<p class="important">Texte important.</p>

CSS :

.important {
    color: red;
    font-weight: bold;
}

Le paragraphe aura un texte en rouge et en gras.

4. Concepts avancés CSS

4.1. Positionnement

Quatre types principaux existent :

Valeur	Description
static	Positionnement normal dans le flux (par défaut)
relative	Décalage par rapport à sa position normale
absolute	Position absolue par rapport à l’ancêtre positionné
fixed	Fixe par rapport à la fenêtre (viewport)

4.2. Flexbox : Mise en page flexible

Flexbox facilite la disposition d’éléments dans une direction (ligne ou colonne), avec gestion automatique des espaces.

.container {
    display: flex;
    justify-content: space-between; /* espace entre éléments */
    align-items: center;             /* aligner verticalement */
}

4.3. Media Queries : Design responsive

Elles adaptent le style selon la taille d’écran.

@media (max-width: 600px) {
    body {
        background-color: lightgrey;
    }
}

5. Synthèse des points essentiels

Concept	Résumé
HTML	Structure sémantique, balises, attributs
CSS	Styles, sélecteurs, box model, cascade, héritage
Intégration	Liaisons inline, interne, externe
Positionnement	static, relative, absolute, fixed
Flexbox	Modèle pour aligner et espacer facilement
Responsive	Media queries pour adapter le design aux différents écrans

Diagramme Mermaid : Interaction entre HTML et CSS

[Diagramme]

Ce diagramme montre que le navigateur interprète conjointement HTML et CSS pour générer le rendu visuel que l'utilisateur voit.

Bonus : Petite formule de taille en CSS

En CSS, la largeur totale ([Formule]) d’un élément avec box model standard s’écrit :

[Formule mathématique]

Cette formule explique pourquoi définir uniquement width n’est souvent pas suffisant pour anticiper l’espace occupé.

Conclusion

Maîtriser HTML et CSS, c’est comprendre comment créer une structure claire grâce au HTML et la rendre attrayante et fonctionnelle avec le CSS. Le lien entre ces deux langages dessine la sémantique et l’esthétique du web.

Cette fiche couvre les bases indispensables et quelques notions intermédiaires clés pour développer efficacement des pages web modernes, responsives et accessibles. N'hésitez pas à pratiquer avec des projets concrets pour approfondir ces connaissances !

Cheat Sheet : Formules importantes

Marges et paddings : margin: 10px; / padding: 15px;
Couleurs en CSS :
- Hex : #RRGGBB (ex : #FF5733)
- RGB : rgb(255, 87, 51)
- RGBA (avec transparence) : rgba(255, 87, 51, 0.5)

Flexbox de base :

display: flex;
justify-content: flex-start | center | space-between | space-around;
align-items: stretch | center | flex-start | flex-end;

Positionnement :

position: static | relative | absolute | fixed;
top: 10px;
left: 20px;
z-index: 10; /* ordre sur l’axe z */

Typographie :

font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: normal | bold;
line-height: 1.5;
color: #333; /* couleur du texte */

Ces formules clés permettent de maîtriser rapidement l’essentiel pour la mise en page et le style.

HTML et CSS