Résumé des concepts fondamentaux de HTML et CSS

Les éléments HTML sont formés de balises (ouvrantes et fermantes) et d'attributs qui précisent leur comportement. Par exemple, dans <a href="page.html">, <a> est la balise et href est l'attribut.

Éléments Block vs Inline

Il est fondamental de distinguer la manière dont les éléments occupent l'espace :

• Éléments Block : Ils commencent toujours sur une nouvelle ligne et occupent toute la largeur disponible (ex: <div>, <p>, <h1>, <ul>).
• Éléments Inline : Ils restent dans le flux du texte et n'occupent que la largeur nécessaire à leur contenu (ex: <span>, <a>, <b>, ``).

3. Contenu essentiel : Liens, Images et Listes

Hyperliens et navigation

La balise <a> permet de créer des liens via l'attribut href. Vous pouvez utiliser des URLs absolues (ex: ``) ou des chemins relatifs.

• ../page.html : Remonte d'un dossier.
• dossier/page.html : Entre dans un sous-dossier.
• #section1 : Crée une ancre interne pour naviguer vers un élément possédant l'identifiant id="section1".

Images et accessibilité

La balise `` est un élément vide (elle n'a pas de balise fermante). Elle nécessite impérativement l'attribut src (le chemin de l'image) et l'attribut alt. L'attribut alt est crucial pour l'accessibilité, car il décrit l'image pour les malvoyants et s'affiche si l'image ne charge pas.

Listes et Tableaux

Il existe trois types de listes :

1. Ordonnées (<ol>) : Listes numérotées (1, A, i, etc.).
2. Non ordonnées (<ul>) : Listes à puces (disc, circle, square).
3. De définitions (<dl>) : Utilise <dt> pour le terme et <dd> pour la définition.

Pour les données tabulaires, utilisez la balise <table>. Une structure propre utilise <thead>, <tbody> et <tfoot> pour organiser les lignes (<tr>), les en-têtes (<th>) et les cellules de données (<td>).

4. Formulaires et saisie de données

Les formulaires (<form>) sont les outils de collecte de données. Deux méthodes d'envoi sont principales :

• GET : Les données sont ajoutées à l'URL. Utile pour les recherches.
• POST : Les données sont envoyées dans le corps de la requête. Indispensable pour les données sensibles ou volumineuses.

Attention : Pour envoyer des fichiers, vous devez impérativement utiliser method="post" et l'attribut enctype="multipart/form-data".

Point de vigilance : Un champ de saisie doit posséder un attribut name pour que sa valeur soit transmise au serveur. L'attribut id est quant à lui utilisé pour le CSS, le JavaScript ou pour lier un <label> via l'attribut for.

5. Introduction au CSS : Style et Spécificité

Le CSS (Cascading Style Sheets) sépare la présentation du contenu. On peut l'intégrer de trois manières : en ligne (attribut style), en interne (balise <style> dans le <head>), ou de manière externe (fichier .css relié par <link>), ce qui est la méthode recommandée.

La Spécificité et la Cascade

Lorsqu'un élément est ciblé par plusieurs règles, le navigateur utilise la spécificité pour décider laquelle appliquer. Le calcul simplifié est le suivant :

$\text{Spécificité} = 100 \times (\text{nb d'identifiants}) + 10 \times (\text{nb de classes, attributs, pseudo-classes}) + 1 \times (\text{nb de balises, pseudo-éléments})$

Si la spécificité est identique, c'est la règle déclarée en dernier qui l'emporte.

Le Modèle de Boîte (Box Model)

Chaque élément HTML est considéré comme une boîte composée de quatre couches (de l'intérieur vers l'extérieur) :

1. Content : Le texte ou l'image.
2. Padding : L'espace intérieur entre le contenu et la bordure.
3. Border : La bordure entourant le padding.
4. Margin : L'espace extérieur, entre la bordure et les autres éléments.

Astuce d'examen : Pour faciliter le calcul des dimensions, utilisez box-sizing: border-box;. Cela fait en sorte que la largeur (width) et la hauteur (height) incluent le padding et la bordure, évitant ainsi que l'élément ne "gonfle" plus que prévu.

6. Récapitulatif pour l'examen