Aller au contenu

Séance 1 : Introduction au HTML

🎯 Objectifs de la séance

À la fin de cette séance, vous serez capable de :

  • Comprendre le rôle du HTML dans une page web
  • Créer une page HTML valide avec la structure de base
  • Utiliser les balises essentielles (titres, paragraphes, listes)
  • Structurer du contenu de manière sémantique

📚 Partie théorique

1.1 Architecture Client-Serveur et le Web

Comment fonctionne le Web ?

Lorsque vous tapez une URL dans votre navigateur :

  1. Le client (votre navigateur) envoie une requête HTTP au serveur
  2. Le serveur traite la requête et renvoie les fichiers (HTML, CSS, JS, images...)
  3. Le navigateur interprète ces fichiers et affiche la page

Les langages du Web (trio fondamental)

  • HTML (HyperText Markup Language) : Structure et contenu
  • CSS (Cascading Style Sheets) : Apparence et mise en forme
  • JavaScript : Comportement et interactivité

🎨 Analogie : Si une page web était une maison...
- HTML = la structure (murs, fenêtres, portes)
- CSS = la décoration (peinture, meubles, style)
- JavaScript = l'électricité et la plomberie (interactions)

1.2 Qu'est-ce que le HTML ?

HTML est un langage de balisage qui utilise des balises pour structurer le contenu.

Anatomie d'une balise HTML

<balise attribut="valeur">Contenu</balise>
  ↑          ↑              ↑        ↑
ouverture  attribut       contenu  fermeture

Balises auto-fermantes

Certaines balises n'ont pas de contenu et se ferment directement :

<br>  <!-- Saut de ligne -->
<img src="photo.jpg" alt="Description">  <!-- Image -->
<hr>  <!-- Ligne horizontale -->

1.3 Structure d'une page HTML

Toute page HTML suit cette structure de base :

<!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>
    <!-- Le contenu visible de la page -->
</body>
</html>

Décryptage de la structure

<!DOCTYPE html>

  • Déclare que c'est un document HTML5
  • Obligatoire en première ligne

<html lang="fr">

  • Élément racine qui contient tout le document
  • lang="fr" indique la langue (important pour l'accessibilité)

<head>

  • Contient les métadonnées (informations sur la page)
  • Non visible par l'utilisateur
  • Contient : titre, encodage, liens CSS, métadonnées SEO...

<meta charset="UTF-8">

  • Définit l'encodage des caractères (accents, caractères spéciaux)
  • UTF-8 est le standard universel

<meta name="viewport"...>

  • Essentiel pour le responsive design
  • Contrôle l'affichage sur mobile

<title>

  • Titre affiché dans l'onglet du navigateur
  • Important pour le référencement (SEO)

<body>

  • Contient tout le contenu visible de la page

1.4 Les balises essentielles

Les titres (Headings)

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>
<h4>Niveau 4</h4>
<h5>Niveau 5</h5>
<h6>Niveau 6</h6>

⚠️ Règles importantes :

  • Un seul <h1> par page (titre principal)
  • Respecter la hiérarchie (ne pas sauter de niveau)
  • Ne pas utiliser les titres juste pour la taille, mais pour la structure

Les paragraphes

<p>Ceci est un paragraphe de texte. Il peut contenir plusieurs phrases.</p>
<p>Ceci est un autre paragraphe.</p>

Les listes non ordonnées (à puces)

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

Les listes ordonnées (numérotées)

<ol>
    <li>Première étape</li>
    <li>Deuxième étape</li>
    <li>Troisième étape</li>
</ol>

Mise en forme du texte

<strong>Texte important</strong> <!-- En gras, important sémantiquement -->
<em>Texte accentué</em> <!-- En italique, emphase -->
<br> <!-- Saut de ligne -->
<hr> <!-- Ligne horizontale de séparation -->

1.5 Les attributs de base

Les attributs donnent des informations supplémentaires aux balises.

L'attribut id

<p id="introduction">Ceci est l'introduction.</p>
  • Identifiant unique dans la page
  • Utilisé pour cibler un élément spécifique (CSS, JavaScript, ancres)

L'attribut class

<p class="texte-important">Premier paragraphe important</p>
<p class="texte-important">Deuxième paragraphe important</p>
  • Peut être utilisé sur plusieurs éléments
  • Utilisé pour grouper des éléments ayant un style commun

1.6 Les commentaires HTML

<!-- Ceci est un commentaire, invisible pour l'utilisateur -->
<!-- Les commentaires sont utiles pour :
     - expliquer le code
     - désactiver temporairement du code
     - organiser les sections
-->

💻 Partie pratique

Exercice 1 : Créer une page "Mon CV"

📋 Consignes

Créez un fichier cv.html qui présente votre CV avec les éléments suivants :

Structure attendue :

  1. Vos nom et prénom
  2. Une section "Formation" avec une liste ordonnée
  3. Une section "Expériences" avec une liste non ordonnée
  4. Une section "Compétences" avec une liste non ordonnée
  5. Une section "À propos" avec un paragraphe de présentation

Exigences techniques :

  • Structure HTML5 valide
  • Sémantique cohèrante : titre, pragraphe, listes
  • Utiliser <strong> et <em> dans le texte

✅ Checklist de validation

  • [ ] Le fichier s'ouvre correctement dans le navigateur
  • [ ] Tous les accents s'affichent correctement
  • [ ] La hiérarchie des titres est respectée
  • [ ] Au moins 3 sections sont présentes
  • [ ] Le code est indenté proprement

🔧 Outils et bonnes pratiques

Configuration de VS Code

  • Installer l'extension Live Server pour visualiser en temps réel
  • Utiliser l'auto-complétion : taper ht puis choisir html:5 pour générer la structure HTML

Tester votre code

  • Ouvrir le fichier : Double-clic sur le .html ou clic droit > Ouvrir avec > Navigateur
  • Actualiser : F5 après modification
  • Inspecter : F12 ou clic droit > Inspecter l'élément

📝 À retenir de cette séance

✅ HTML structure le contenu d'une page web avec des balises
✅ La structure de base est toujours la même : DOCTYPE, html, head, body
✅ Les titres h1-h6 créent une hiérarchie sémantique
✅ Les paragraphes <p> organisent le texte en blocs lisibles
✅ Les listes (<ul>, <ol>, <li>) organisent les informations
✅ Les attributs id et class identifient les éléments
✅ L'indentation et les commentaires rendent le code lisible

📚 Pour aller plus loin

Ressources recommandées :