NSI-LYCÉE
Python • Algo • BAC
Retour au Web

Bases du HTML

HTML est le langage de base du Web : chaque page web que vous visitez est écrite en HTML ! Découvrez comment créer vos propres pages.

Difficulté:
35 min
+35 XP

Objectifs du cours

  • Comprendre la structure d'une page HTML
  • Connaître les balises HTML fondamentales
  • Utiliser les attributs pour personnaliser les balises
  • Créer des titres, paragraphes, listes et liens
  • Structurer un document HTML valide

Erreurs courantes à éviter

  • Oublier de fermer les balises (sauf auto-fermantes)
  • Mélanger majuscules et minuscules (HTML est insensible mais convention = minuscules)
  • Ne pas respecter l'imbrication des balises (ordre d'ouverture/fermeture)
  • Oublier la balise <!DOCTYPE html> au début du document

**HTML : HyperText Markup Language**

HTML signifie **"Langage de balisage hypertexte"**. Ce n'est PAS un langage de programmation, mais un **langage de description** de documents.

**HyperText** : • Texte enrichi avec des liens cliquables • Navigation entre documents • Structure non linéaire (on peut sauter d'une page à l'autre)

**Markup** (Balisage) : • Utilise des "balises" pour structurer le contenu • Les balises indiquent le rôle de chaque élément • Exemple : <h1> indique un titre principal

**Rôle de HTML** : • Définir la **structure** d'une page web • Organiser le **contenu** (texte, images, liens) • Donner du **sens** aux éléments (sémantique)

**Ce que HTML NE fait PAS** : • Pas de design (c'est le rôle du CSS) • Pas d'interactivité (c'est le rôle du JavaScript) • Pas de calculs ou de logique

**Les navigateurs interprètent HTML** : • Chrome, Firefox, Safari, Edge lisent le HTML • Ils affichent le contenu selon les balises • Tous les navigateurs suivent les mêmes standards (W3C)

**Version actuelle : HTML5** : • Standard moderne (2014) • Support multimédia (vidéo, audio) • APIs JavaScript avancées • Sémantique améliorée

Python
# HTML est un langage de balisage, pas de programmation
# Voici comment on décrit un document

# En texte brut :
texte_brut = "Bienvenue sur mon site. Ceci est mon premier paragraphe."

# En HTML (avec structure) :
html_structure = """
<!DOCTYPE html>
<html>
<head>
    <title>Mon Site</title>
</head>
<body>
    <h1>Bienvenue sur mon site</h1>
    <p>Ceci est mon premier paragraphe.</p>
</body>
</html>
"""

print("=== DIFFÉRENCE TEXTE BRUT VS HTML ===\n")
print("TEXTE BRUT (sans structure) :")
print(texte_brut)
print("\nHTML (avec structure et sémantique) :")
print(html_structure)

# Que voit le navigateur ?
print("\n=== CE QUE LE NAVIGATEUR AFFICHE ===")
print("┌─────────────────────────────────┐")
print("│ Bienvenue sur mon site          │  ← Titre grand et gras")
print("│                                 │")
print("│ Ceci est mon premier paragraphe.│  ← Paragraphe normal")
print("└─────────────────────────────────┘")

Quiz de validation

1. Que signifie HTML ?

2. Quelle balise doit être la première ligne d'un document HTML ?

3. Quelle est la différence entre <strong> et <b> ?

4. Quelle balise crée une liste NON ordonnée (avec puces) ?

5. Quel attribut est obligatoire sur une balise <img> pour l'accessibilité ?

EdTech AI Assistant