Découverte du HTML

Publié le par

Découverte du HTML – Séance 1 (1h)

Objectif de la séance

Cette séance a pour objectif de vous faire découvrir les bases du HTML, le langage utilisé pour structurer le contenu des pages web. À l’issue de cette séance, vous serez capables de comprendre la structure minimale d’une page HTML et de créer votre première page web.

Qu’est-ce que le HTML ?

Le HTML (HyperText Markup Language) est un langage qui permet de structurer le contenu d’une page web.

Il est utilisé pour :

  • organiser le texte (titres, paragraphes),
  • créer des liens,
  • insérer des images.

Le HTML ne gère ni la mise en forme graphique, ni les interactions avancées. Il est interprété par un navigateur web (Chrome, Firefox, Edge, Safari…).

Structure minimale d’une page HTML

Toute page HTML repose sur une structure fixe, indispensable à son bon fonctionnement.

<html>
  <head>
    <title>Titre de la page</title>
  </head>

  <body>
    Hello world !!!
  </body>
</html>

Rôle des balises principales

  • <html> : délimite le document HTML
  • <head> : contient les informations générales (non visibles)
  • <title> : titre affiché dans l’onglet du navigateur
  • <body> : contenu visible de la page

Premières balises de texte

<strong>Hello World</strong><br>
<i>Ceci est ma première page</i>
  • <strong> : met en valeur un texte important
  • <i> : affiche le texte en italique
  • <br> : retour à la ligne

Règle importante : la majorité des balises fonctionnent par paire : une balise ouvrante et une balise fermante.

Créer un fichier HTML

Étapes à suivre

  1. Ouvrir un éditeur de texte (TextEdit sur Mac, Bloc-notes sur Windows)
  2. Écrire le code HTML
  3. Enregistrer le fichier avec l’extension .html (ex. : index.html)
  4. Ouvrir le fichier dans un navigateur web

Exemple complet fonctionnel

<html>
<head>
  <title>Ma première page HTML</title>
</head>

<body>
  <h1>Bienvenue</h1>
  <p>Ceci est une page HTML simple.</p>
  <strong>Hello world</strong><br>
  <i>Ceci est ma première page HTML</i>
</body>
</html>

10 balises HTML à tester

Balises fonctionnant par paire

  • <h1> ... </h1> : titre principal
  • <h2> ... </h2> : sous-titre
  • <p> ... </p> : paragraphe
  • <strong> ... </strong> : texte important
  • <i> ... </i> : italique
  • <a href="..."> ... </a> : lien hypertexte
  • <ul> ... </ul> : liste non ordonnée
  • <li> ... </li> : élément de liste

Balises sans balise de fermeture

  • <br> : retour à la ligne
  • <img src="image.jpg" alt="description"> : image

Remarque : ces deux balises s’écrivent en une seule fois.

À retenir

  • Le HTML structure le contenu d’une page web
  • Une page web est un fichier texte avec l’extension .html
  • Tout ce qui est visible se trouve dans <body>
  • Certaines balises ne fonctionnent pas par paire
  • Le navigateur interprète automatiquement le code HTML

Pour aller plus loin

Lors des prochaines séances, nous verrons : la structuration d’un document (titres, sections), la création de liens entre pages, et l’intégration d’images et de médias.