🌐 Notebook interactif — Introduction au HTML/CSS¶

Cours USAL33 — DSP | Quentin Fait

Ce notebook te permet de mettre en pratique les notions vues pendant la Partie 1 du cours : fondamentaux du Web, structure HTML, et introduction au CSS.

💡 Comment utiliser ce notebook ?
Lis chaque cellule, complÚte les exercices dans les zones indiquées, puis exécute la cellule avec Shift+Entrée.

🧠 Exercice 1 — Vrai ou Faux ?¶

Modifie les valeurs True ou False selon toi, puis exécute la cellule pour vérifier tes réponses.

# RĂ©ponds True ou False Ă  chaque affirmation

reponses = {
    "HTML est un langage impĂ©ratif (comme Python)": False,          # ← modifie ici
    "CSS dĂ©crit la prĂ©sentation d'une page web": True,              # ← modifie ici
    "HTTPS utilise le port 80 par dĂ©faut": False,                   # ← modifie ici
    "L'attribut alt de <img> est obligatoire": True,                # ← modifie ici
    "On peut avoir plusieurs balises <main> par page": False,       # ← modifie ici
    "Le W3C dĂ©veloppe les standards ouverts du Web": True,          # ← modifie ici
}

# --- Correction ---
corrections = {
    "HTML est un langage impératif (comme Python)": False,
    "CSS décrit la présentation d'une page web": True,
    "HTTPS utilise le port 80 par défaut": False,
    "L'attribut alt de <img> est obligatoire": True,
    "On peut avoir plusieurs balises <main> par page": False,
    "Le W3C développe les standards ouverts du Web": True,
}

score = 0
for question, reponse in reponses.items():
    correct = corrections[question]
    if reponse == correct:
        print(f"✅ {question}")
        score += 1
    else:
        print(f"❌ {question} → La bonne rĂ©ponse Ă©tait : {correct}")

print(f"\n🎯 Score : {score}/{len(reponses)}")

đŸ—ïž Exercice 2 — Structure HTML : Trouve les erreurs¶

Le code HTML ci-dessous contient 3 erreurs. Identifie-les en complétant la liste, puis vérifie avec la correction.

html_avec_erreurs = """
<!DOCTYPE html>
<html>
<head>
    <title>Ma page</title>
</head>
<body>
    <h1>Bienvenue</h1>
    <h3>Sous-titre</h3>
    <img src="photo.jpg">
    <main>
        <p>Contenu principal</p>
    </main>
    <main>
        <p>Autre contenu</p>
    </main>
</body>
</html>
"""

# ComplÚte la liste avec tes réponses (remplace les "?" par tes explications)
mes_erreurs = [
    "Erreur 1 : ?",   # ← dĂ©cris l'erreur ici
    "Erreur 2 : ?",   # ← dĂ©cris l'erreur ici
    "Erreur 3 : ?",   # ← dĂ©cris l'erreur ici
]

print("Voici le HTML Ă  analyser :")
print(html_avec_erreurs)
print("\n📝 Tes rĂ©ponses :")
for e in mes_erreurs:
    print(" -", e)

# Correction de l'exercice 2
print("✅ Correction :")
print()
print("Erreur 1 : <html> sans attribut lang — il faut <html lang=\"fr\">")
print("           Raison : l'attribut lang est important pour l'accessibilité et le SEO.")
print()
print("Erreur 2 : <h3> directement aprĂšs <h1> — la hiĂ©rarchie des titres est rompue")
print("           Raison : on doit respecter h1 → h2 → h3, sans sauter de niveau.")
print()
print("Erreur 3 : <img src=\"photo.jpg\"> sans attribut alt")
print("           Raison : l'attribut alt est obligatoire pour l'accessibilité.")
print()
print("Erreur bonus : deux balises <main> sur la mĂȘme page — une seule est autorisĂ©e.")

đŸ·ïž Exercice 3 — Associe la balise Ă  son rĂŽle¶

Complete le dictionnaire mes_associations en faisant correspondre chaque balise Ă  la bonne description.

# Descriptions disponibles (Ă  associer aux balises)
descriptions = [
    "A) Contenu principal unique de la page",
    "B) Navigation principale",
    "C) Contenu autonome et réutilisable",
    "D) En-tĂȘte de page ou de section",
    "E) Contenu complémentaire (sidebar)",
    "F) Pied de page",
]

print("Descriptions disponibles :")
for d in descriptions:
    print(" ", d)

print()

# ComplĂšte avec la lettre correspondante (ex: "A", "B", etc.)
mes_associations = {
    "<header>": "?",    # ← remplace ? par la lettre
    "<nav>": "?",
    "<main>": "?",
    "<article>": "?",
    "<aside>": "?",
    "<footer>": "?",
}

# Correction
corrections = {
    "<header>": "D",
    "<nav>": "B",
    "<main>": "A",
    "<article>": "C",
    "<aside>": "E",
    "<footer>": "F",
}

score = 0
for balise, reponse in mes_associations.items():
    correct = corrections[balise]
    if reponse == correct:
        print(f"✅ {balise} → {reponse}")
        score += 1
    elif reponse == "?":
        print(f"⬜ {balise} → non rĂ©pondu (rĂ©ponse : {correct})")
    else:
        print(f"❌ {balise} → tu as mis {reponse}, rĂ©ponse correcte : {correct}")

print(f"\n🎯 Score : {score}/{len(mes_associations)}")

🎹 Exercice 4 — ComplĂšte les rĂšgles CSS¶

Pour chaque effet souhaité, complÚte la propriété ou la valeur CSS manquante (?).

# ComplÚte les valeurs manquantes (remplace "?" par la bonne réponse)

exercices_css = [
    {
        "effet": "Mettre le texte en rouge",
        "css": "p { ?: red; }",          # ← quelle propriĂ©tĂ© ?
        "reponse": "?",                   # ← Ă©cris la propriĂ©tĂ© ici
        "correction": "color"
    },
    {
        "effet": "Fond de page gris clair",
        "css": "body { background-color: ?; }",
        "reponse": "?",                   # ← une valeur de couleur gris clair
        "correction": "#eeeeee  (ou #f5f5f5, lightgray, etc.)"
    },
    {
        "effet": "Centrer le texte",
        "css": "h1 { text-align: ?; }",
        "reponse": "?",
        "correction": "center"
    },
    {
        "effet": "Espacement interne de 20px",
        "css": "div { ?: 20px; }",
        "reponse": "?",
        "correction": "padding"
    },
    {
        "effet": "Espacement externe de 10px",
        "css": "p { ?: 10px; }",
        "reponse": "?",
        "correction": "margin"
    },
]

print("📝 Tes rĂ©ponses :")
print()
for ex in exercices_css:
    statut = "✅" if ex["reponse"].strip().lower().split()[0] == ex["correction"].strip().lower().split()[0] else "❌"
    if ex["reponse"] == "?":
        statut = "⬜"
    print(f"{statut} Effet : {ex['effet']}")
    print(f"   CSS : {ex['css']}")
    if statut == "❌" or statut == "⬜":
        print(f"   → Correction : {ex['correction']}")
    print()

✍ Exercice 5 — Mini-dĂ©fi : Écris ta propre structure HTML¶

ComplĂšte la variable mon_html avec une structure HTML valide pour une page simple avec :

  • Un <header> avec un titre <h1>

  • Une <nav> avec 3 liens

  • Un <main> avec un <article> contenant un titre <h2> et un paragraphe

  • Un <footer> avec un copyright

Le code vérifie automatiquement la présence des éléments attendus.

mon_html = """
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma page</title>
</head>
<body>

    <!-- ComplĂšte ici -->

</body>
</html>
"""

# VĂ©rification automatique
elements_attendus = [
    ("<header>", "balise <header>"),
    ("<h1>", "titre <h1>"),
    ("<nav>", "balise <nav>"),
    ("<a href", "liens <a href> (au moins un)"),
    ("<main>", "balise <main>"),
    ("<article>", "balise <article>"),
    ("<h2>", "titre <h2>"),
    ("<p>", "paragraphe <p>"),
    ("<footer>", "balise <footer>"),
    ("lang=\"", "attribut lang sur <html>"),
    ("alt=", "attribut alt (si tu as une image)"),
]

print("🔍 VĂ©rification de ta structure HTML :")
print()
score = 0
for balise, label in elements_attendus:
    if balise in mon_html:
        print(f"✅ {label} prĂ©sent")
        score += 1
    else:
        print(f"⬜ {label} manquant")

print(f"\n🎯 ÉlĂ©ments prĂ©sents : {score}/{len(elements_attendus)}")
if score == len(elements_attendus):
    print("🏆 Parfait ! Ta structure HTML est complùte.")
elif score >= 8:
    print("👍 TrĂšs bien, il manque quelques Ă©lĂ©ments mineurs.")
else:
    print("đŸ’Ș Continue, relis le cours et complĂšte les Ă©lĂ©ments manquants !")

🔄 RĂ©capitulatif — Ce que tu as vu¶

Notion

À retenir

HTML

Langage déclaratif de structure

CSS

Langage de présentation

HTTPS

Port 443, données chiffrées

<main>

Un seul par page

alt sur <img>

Obligatoire

Hiérarchie titres

h1 → h2 → h3 (pas de saut)

margin vs padding

Externe vs interne

🎉 Bravo d’avoir complĂ©tĂ© ce notebook !
Rendez-vous sur le prochain cours pour aller plus loin.