HTML5 / CSS3

Sommaire

1. HTML5 — structurer le contenu
2. CSS3 — mettre en forme
3. Bon à savoir — structure d'une URL

1. HTML5 — structurer le contenu

HTML (HyperText Markup Language) structure et met en forme le contenu d'une page via des balises.

Structure minimale d'un document

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
</head>
<body>
    ...
</body>
</html>

Le <!doctype html> indique au navigateur la méthode de rendu à utiliser.
La balise racine <html> porte l'attribut lang qui définit la langue du document.
Règle d'or : bonne imbrication des balises — la dernière ouverte doit être la première fermée (logique de poupées russes).

Attributs

Une balise peut porter un ou plusieurs attributs, qui la configurent ou modifient son comportement.

id : identifiant unique de l'élément.
class : catégorie réutilisable sur plusieurs éléments.
<meta> : informations non affichées, destinées aux navigateurs / moteurs de recherche.

Structure sémantique de page

<header>En-tête de la page
    <nav>Barre de navigation</nav>
</header>
<aside>Barre latérale</aside>
<section>Section principale
    <article>Article 1</article>
    <article>Article 2</article>
</section>
<footer>Pied-de-page</footer>

Balise	Rôle
`<div>`	Conteneur générique (regroupement / mise en page), sans sens sémantique
`<section>`	Regroupe des éléments autour d'une même thématique
`<article>`	Contenu autonome, indépendant du reste de la page
`<header>` / `<footer>`	En-tête / pied de page (ou de section)
`<nav>`	Bloc de navigation
`<hx>` (h1 à h6)	Titres, x = niveau hiérarchique (1 = le plus important)

Liens, listes, texte

<a href="page.html" target="_blank">Mon lien</a>

<ul>                          <!-- liste à puces -->
    <li>Élément 1</li>
</ul>

<ol start="2" type="1">       <!-- liste numérotée -->
    <li>Élément 1</li>
</ol>

<dl>                          <!-- liste de définitions -->
    <dt>Mot à définir</dt>
    <dd>Définition</dd>
</dl>

Balises de texte : <p> (paragraphe), <strong> (important), <sub> / <sup> (indice / exposant).
Autres : <br> (saut de ligne), <hr> (séparateur horizontal).

Contenus multimédias

<img src="photo.jpg" alt="Texte alternatif">

<audio src="son.mp3" controls autoplay loop></audio>

<video src="film.mp4" poster="apercu.jpg" controls>
    <source src="film.webm" type="video/webm">
</video>

<canvas></canvas>             <!-- zone de dessin bitmap pilotée en script -->

<figure>
    <img src="photo.jpg" alt="...">
    <figcaption>Légende de l'image</figcaption>
</figure>

alt sur <img> est obligatoire (accessibilité, référencement).
controls : affiche l'interface de lecture ; autoplay : démarrage auto ; loop : lecture en boucle.

Tableaux

<table>
    <caption>Tarifs saison 2024/2025</caption>
    <thead>
        <tr><th>Produit</th><th>Prix</th></tr>
    </thead>
    <tbody>
        <tr><td colspan="2">Ligne fusionnée</td></tr>
    </tbody>
</table>

<th> = cellule d'en-tête, <td> = cellule de données.
colspan fusionne horizontalement, rowspan fusionne verticalement.
<thead> / <tbody> structurent respectivement l'en-tête et le corps du tableau.

Formulaires

La partie HTML seulement — la logique de traitement PHP est dans la fiche PHP.

<form action="traitement.php" method="post">
    <fieldset>
        <legend>Identité</legend>
        <input type="text" name="prenom">
        <input type="password" name="motdepasse">
        <input type="number" name="age">
        <input type="radio" name="genre" value="m"> Masculin
        <input type="checkbox" name="couleur_bleu"> Bleu
        <input type="date" name="naissance">
        <input type="email" name="email">
        <input type="hidden" name="tag" value="visiteur">
        <textarea name="commentaire" rows="5" cols="50"></textarea>
        <select name="langue">
            <option value="fr">Français</option>
            <option value="en" selected>Anglais</option>
        </select>
        <button name="envoyer" onclick="...">Envoyer</button>
        <input type="submit" value="Valider">
        <input type="reset">
    </fieldset>
</form>

name est obligatoire sur les champs : c'est ce nom qui devient la clé du tableau $_GET / $_POST côté serveur.
<fieldset> + <legend> regroupent visuellement des champs sous un titre.

2. CSS3 — mettre en forme

Le CSS applique des styles au HTML, sous forme de couples propriété: valeur;.

p {
    background-color: #39c0ba;
}

Sélecteurs

Sélecteur	Exemple	Cible
Balise	`p { }`	Toutes les balises `<p>`
Classe	`.rouge { }`	Tous les éléments avec `class="rouge"`
Identifiant	`#menu { }`	L'élément unique avec `id="menu"`
Groupé	`mark, strong { }`	Plusieurs sélecteurs en même temps
Descendant	`nav a { }`	Un sélecteur imbriqué dans un autre

Le modèle de boîte (box model)

┌───────────────── margin (marge extérieure) ─────────────────┐
│ ┌───────────────────── border ─────────────────────────┐    │
│ │ ┌────────────── padding (marge intérieure) ────────┐ │    │
│ │ │              Ma balise block                      │ │    │
│ │ │              (width × height)                     │ │    │
│ │ └────────────────────────────────────────────────────┘ │    │
│ └────────────────────────────────────────────────────────┘    │
└──────────────────────────────────────────────────────────────┘

Balises block : occupent toute la largeur disponible (ex. <div>, <p>).
Balises inline : s'affichent à la suite, sans saut de ligne (ex. <span>, <a>).
Unités courantes pour width / height : px, %, em / rem.
On peut cibler chaque côté séparément : margin-top, border-right, etc.
Centrer un bloc horizontalement : lui définir une largeur puis margin: auto;.

Positionnement — 4 solutions

De la plus ancienne à la plus moderne.

Propriété	Usage
`display`	Change le type de rendu d'une balise (`block`, `inline`, `inline-block`, `none`…) — solution basique
`position`	Positionne un élément par coordonnées ou par rapport à un autre élément (`relative`, `absolute`, `fixed`, `sticky`)
`float`	Fait flotter un élément à gauche / droite (technique obsolète mais encore rencontrée)
flexbox	Organise des éléments en ligne ou en colonne — recommandé pour centrer / répartir
grid	Mise en page générale en lignes et colonnes — recommandé pour une mise en page complexe

/* Flexbox */
.conteneur {
    display: flex;
    justify-content: space-between; /* alignement horizontal */
    align-items: center;            /* alignement vertical */
}

/* Grid */
.conteneur {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* fr = fraction d'espace disponible */
    gap: 20px;
}

En pratique moderne, on combine souvent Grid (structure globale de page) + Flexbox (alignement à l'intérieur des blocs).

Texte, arrière-plans, bordures, ombres

selecteur {
    font-family: "Segoe UI", Arial, sans-serif; /* le navigateur prend la 1re police connue */
    background-color: #222;
    border-style: solid;      /* none par défaut */
    border-width: 2px;
    border-color: red;
    border: solid red 2px;    /* raccourci */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3); /* décalage x, y, flou, couleur */
}

Seuls les éléments block peuvent recevoir un arrière-plan.

Pseudo-classes et media-queries

a:hover { color: orange; }     /* notation : balise:pseudo-classe */

@media (max-width: 768px) {
    body { font-size: 14px; }  /* adapte le style selon la résolution d'écran */
}

3. Bon à savoir — structure d'une URL

https://example.com:80/blog?search=test&sort_by=created_at#header
└─┬──┘   └────┬─────┘└┬┘└─┬─┘└──────────┬───────────────┘└──┬───┘
protocole   domaine  port path   query parameters       fragment/ancre