HTML : structure d'une page

Ce qu'il faut comprendre

Quand tu navigues sur le Web, tu consultes des pages web. Chaque page est écrite dans un langage appelé HTML (HyperText Markup Language). C'est un peu comme la structure d'une maison : le HTML définit les murs, les portes, les fenêtres. Le CSS (Cascading Style Sheets) s'occupe ensuite de la décoration (couleurs, polices, mise en page).

Pour accéder à une page, tu tapes une adresse dans ton navigateur : c'est l'URL (Uniform Resource Locator). Le navigateur envoie alors une requête HTTP (HyperText Transfer Protocol) au serveur qui héberge la page. Le serveur répond en envoyant le code HTML de la page. Les hyperliens (ou liens) te permettent de passer d'une page à une autre en cliquant dessus. Enfin, un moteur de recherche (comme Google) t'aide à trouver des pages sur le Web.

Les notions essentielles

Web : système de pages reliées par des hyperliens, accessible via Internet.
URL : adresse unique d'une ressource sur le Web. Exemple : https://www.alloseconde.fr/cours.
HTTP : protocole de communication entre le navigateur et le serveur. Les requêtes HTTP permettent de demander une page, et le serveur répond avec le code HTML.
HTML : langage de balisage qui structure le contenu d'une page. Il utilise des balises (ex : <h1>, <p>, <a>).
CSS : langage qui gère l'apparence (couleurs, tailles, positions). Il se lie au HTML.
Hyperlien : lien cliquable qui pointe vers une autre page ou ressource. En HTML, on utilise la balise <a> avec l'attribut href.
Moteur de recherche : outil qui indexe les pages web et permet de les trouver par mots-clés.

Méthode

Pour analyser ou créer une page HTML simple, suis ces étapes :

Identifier la structure : repère les balises principales : <html>, <head>, <body>.
Lire le contenu : dans <body>, trouve les titres (<h1> à <h6>), les paragraphes (<p>), les images (<img>), les liens (<a>).
Comprendre les attributs : par exemple, href pour un lien, src pour une image.
Voir le CSS : regarde si le code CSS est dans <style> (dans <head>) ou dans un fichier externe lié par <link>.
Tester les hyperliens : vérifie que les URLs dans les attributs href sont correctes.

Pour écrire du HTML, utilise un éditeur de texte (comme Notepad++) et enregistre le fichier avec l'extension .html. Ouvre-le ensuite dans un navigateur.

Exemple corrigé

Voici une page HTML simple. Lis-la attentivement, puis regarde l'explication.

<!DOCTYPE html>
<html>
<head>
    <title>Ma première page</title>
    <style>
        body { background-color: lightblue; }
        h1 { color: darkblue; }
    </style>
</head>
<body>
    <h1>Bienvenue sur AlloSeconde</h1>
    <p>Ceci est un paragraphe.</p>
    <a href="https://www.alloseconde.fr">Visite AlloSeconde</a>
    <img src="logo.png" alt="Logo AlloSeconde">
</body>
</html>

Explication pas à pas :

<!DOCTYPE html> : indique que c'est du HTML5.
<html> : racine du document.
<head> : contient les métadonnées (titre, CSS).
- <title> : titre affiché dans l'onglet du navigateur.
- <style> : code CSS pour la mise en forme.
<body> : contenu visible de la page.
- <h1> : titre principal.
- <p> : paragraphe.
- <a href="..."> : hyperlien vers le site AlloSeconde.
- <img src="..." alt="..."> : image (le alt est un texte alternatif).

Erreurs fréquentes

Confondre HTML et CSS : le HTML structure, le CSS décore. Ne mets pas de style dans les balises HTML (sauf si tu utilises l'attribut style, mais c'est déconseillé).
Oublier les balises de fermeture : par exemple, <p> doit être fermé par </p>. Certaines balises sont auto-fermantes comme <img>.
Mettre une URL relative sans comprendre : si tu écris href="page2.html", le navigateur cherchera page2.html dans le même dossier que la page actuelle.
Ignorer l'attribut alt : il est obligatoire pour les images (accessibilité).
Croire que le navigateur affiche le code HTML : non, il interprète les balises pour afficher le contenu.

À retenir

HTML = structure d'une page web.
CSS = mise en forme.
URL = adresse de la page.
HTTP = protocole d'échange.
Hyperlien = lien entre pages (balise <a>).
Moteur de recherche = outil pour trouver des pages.

Pour s'entraîner

Maintenant que tu as compris les bases, tu peux t'entraîner avec les exercices et quiz disponibles sur AlloSeconde. Amuse-toi à créer ta première page HTML !