Aller au contenu principal

Module 4.1 – HTML (structure)

Objectif​

Comprendre ce qu'est le HTML, maîtriser les balises essentielles, et créer une page web simple avec images, liens, listes et formulaires.

Théorie​

Qu'est-ce que le HTML ?​

HTML signifie "HyperText Markup Language" (Langage de Balisage HyperTexte).

Rôle du HTML :

  • Définit la structure d'une page web
  • Organise le contenu (titres, paragraphes, listes, etc.)
  • Indique la sémantique (signification) des éléments

Analogie : Le HTML est comme la charpente d'une maison. Il définit où vont les murs, les portes, les fenêtres, mais pas leur apparence.

Structure de base d'une page HTML​

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
</head>
<body>
    <!-- Contenu de la page -->
</body>
</html>

Explication :

  • <!DOCTYPE html> : Déclare que c'est du HTML5
  • <html> : Balise racine, contient toute la page
  • <head> : Métadonnées (non visibles, mais importantes)
  • <body> : Contenu visible de la page

Balises essentielles​

Titres​

Les titres vont de <h1> (le plus important) à <h6> (le moins important).

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>

Bonnes pratiques :

  • Un seul <h1> par page
  • Utiliser les niveaux dans l'ordre (h1, puis h2, puis h3...)

Paragraphes​

<p>Ceci est un paragraphe de texte.</p>
<p>Un autre paragraphe.</p>

Liens​

<a href="https://www.exemple.com">Texte du lien</a>
<a href="page2.html">Lien vers une autre page</a>
<a href="#section1">Lien vers une section de la page</a>

Attributs :

  • href : L'URL de destination
  • target="_blank" : Ouvre dans un nouvel onglet

Images​

<img src="chemin/vers/image.jpg" alt="Description de l'image">

Attributs :

  • src : Chemin vers l'image
  • alt : Texte alternatif (important pour l'accessibilité)

Listes​

Liste non ordonnée (à puces) :

<ul>
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
</ul>

Liste ordonnée (numérotée) :

<ol>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
    <li>Troisième élément</li>
</ol>

Formulaires​

<form action="/submit" method="POST">
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom" required>
    
    <label for="email">Email :</label>
    <input type="email" id="email" name="email" required>
    
    <button type="submit">Envoyer</button>
</form>

Types d'inputs courants :

  • text : Texte simple
  • email : Email (validation automatique)
  • password : Mot de passe (masqué)
  • number : Nombre
  • checkbox : Case à cocher
  • radio : Bouton radio
  • submit : Bouton d'envoi

Balises sémantiques HTML5​

Les balises sémantiques donnent du sens au contenu :

<header>En-tête de la page</header>
<nav>Navigation</nav>
<main>Contenu principal</main>
<section>Section thématique</section>
<article>Article autonome</article>
<aside>Contenu complémentaire</aside>
<footer>Pied de page</footer>

Avantages :

  • Meilleure structure
  • Meilleur référencement (SEO)
  • Accessibilité améliorée

Attributs HTML​

Les attributs fournissent des informations supplémentaires sur les éléments.

Syntaxe :

<balise attribut="valeur">Contenu</balise>

Attributs courants :

  • id : Identifiant unique
  • class : Classe CSS (peut être utilisé plusieurs fois)
  • src : Source (images, scripts)
  • href : Lien (balises <a>)
  • alt : Texte alternatif (images)
  • title : Info-bulle au survol

Commentaires​

<!-- Ceci est un commentaire, invisible sur la page -->

Exercice​

  1. Créer une page HTML de base

    • Créez un fichier index.html
    • Ajoutez la structure de base
    • Ajoutez un titre dans <head>
    • Ajoutez un titre <h1> dans le body

  2. Ajouter du contenu

    • Ajoutez 2 paragraphes de texte
    • Ajoutez 3 niveaux de titres (h1, h2, h3)
    • Organisez le contenu de manière logique

  3. Créer des liens

    • Créez un lien vers un site externe
    • Créez un lien vers une autre page HTML (créez-la d'abord)
    • Créez un lien vers une section de la même page

  4. Ajouter des images

    • Trouvez une image (ou créez un dossier images/)
    • Ajoutez l'image dans votre page
    • Ajoutez un texte alternatif descriptif

  5. Créer des listes

    • Créez une liste à puces de 5 éléments
    • Créez une liste numérotée de 3 étapes
    • Imbriquez une liste dans une autre

  6. Créer un formulaire

    • Créez un formulaire avec :
      • Un champ nom (texte)
      • Un champ email
      • Un bouton d'envoi

Quiz​

  1. Que signifie HTML ?

    • HyperText Modern Language
    • HyperText Markup Language
    • High Tech Markup Language

  2. Quelle balise contient le contenu visible de la page ?

    • <head>
    • <body>
    • <html>

  3. Combien de <h1> devrait-il y avoir par page ?

    • Autant qu'on veut
    • Un seul
    • Deux ou trois

  4. Quel attribut est obligatoire pour une image ?

    • title
    • alt
    • width

  5. Quelle balise crée un lien ?

    • <link>
    • <a>
    • <url>

Mini défi​

Mission : Créer une page de présentation personnelle

Créez une page HTML complète qui vous présente :

Structure requise :

  1. En-tête (<header>)

    • Votre nom en <h1>
    • Un sous-titre (ex: "Développeur en formation")

  2. Navigation (<nav>)

    • Liens vers les sections : À propos, Compétences, Contact

  3. Section À propos (<section>)

    • Titre <h2>
    • Paragraphe de présentation
    • Votre photo (ou une image placeholder)

  4. Section Compétences (<section>)

    • Titre <h2>
    • Liste à puces de vos compétences
    • Liste numérotée de vos objectifs d'apprentissage

  5. Section Contact (<section>)

    • Titre <h2>
    • Formulaire de contact avec :
      • Champ nom
      • Champ email
      • Champ message (textarea)
      • Bouton d'envoi

  6. Pied de page (<footer>)

    • Copyright avec l'année
    • Lien vers votre email

Critères :

  • ✅ Utiliser les balises sémantiques HTML5
  • ✅ Structure claire et organisée
  • ✅ Tous les éléments demandés présents
  • ✅ Code bien indenté et commenté
  • ✅ Validation : la page s'affiche correctement dans un navigateur

Objectif : Maîtriser la structure HTML et créer une page web complète et bien structurée.

Validation : Vous pouvez passer au module suivant quand vous êtes capable de créer une page HTML complète avec tous les éléments essentiels.