No history yet

Introduction à HTML

La structure d'une page web

Chaque site web que vous visitez est construit à l'aide d'un langage appelé HTML, ou HyperText Markup Language. Pensez au HTML comme au squelette d'une page web. Il fournit la structure de base, en indiquant au navigateur où placer les en-têtes, les paragraphes, les images et les liens.

Le HTML n'est pas un langage de programmation ; c'est un langage de balisage. Il utilise des « balises » pour annoter le texte et définir comment le contenu doit être structuré.

Toute page HTML commence par une structure standard qui indique au navigateur comment lire le fichier. Voici à quoi ressemble ce squelette de base :

<!DOCTYPE html>
<html>
<head>
    <title>Titre de ma page</title>
</head>
<body>
    <h1>Ceci est un en-tête principal</h1>
    <p>Ceci est un paragraphe.</p>
</body>
</html>

Décortiquons cela :

  • <!DOCTYPE html> : C'est la toute première chose sur la page. Elle indique au navigateur : « Attention, ce qui suit est un document HTML5. »
  • <html> : C'est la balise racine. Tout le reste de votre code HTML se trouvera à l'intérieur de cette balise.
  • <head> : Cette section contient des méta-informations sur la page, comme le titre qui apparaît dans l'onglet du navigateur. Le contenu ici n'est pas affiché sur la page elle-même.
  • <body> : C'est là que se trouve tout le contenu visible de votre page web : le texte, les images, les liens, etc.

Les briques de construction : les balises

Le HTML est entièrement constitué d'éléments, qui sont généralement définis par une balise de début (comme <p>), du contenu, puis une balise de fin (comme </p>). La barre oblique dans la balise de fin est ce qui la différencie de la balise de début.

Les balises les plus courantes que vous utiliserez sont pour le texte. Il existe des balises pour les en-têtes (<h1>, <h2>, etc.) et pour les paragraphes (<p>). Le nombre dans la balise d'en-tête indique son niveau d'importance, <h1> étant le plus important et <h6> le moins important.

<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<p>Ceci est un paragraphe de texte. Vous pouvez écrire autant que vous le souhaitez ici.</p>
Lesson image

Le navigateur lit ces balises et affiche le contenu en conséquence, généralement en rendant les en-têtes plus grands et en gras, et en espaçant les paragraphes. Vous pouvez également créer des listes à puces (non ordonnées) ou numérotées (ordonnées).

<!-- Une liste à puces -->
<ul>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
</ul>

<!-- Une liste numérotée -->
<ol>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
</ol>

Pour les listes, vous utilisez <ul> pour une liste non ordonnée et <ol> pour une liste ordonnée. Ensuite, chaque élément de la liste est entouré de balises <li> (élément de liste).

Ajouter des détails : les attributs

Les balises HTML peuvent également avoir des attributs. Ce sont des informations supplémentaires qui modifient le comportement ou la signification d'un élément. Les attributs sont toujours placés dans la balise de début et se présentent généralement sous forme de paires nom/valeur, comme nom="valeur".

Un excellent exemple est la balise d'ancre, <a>, qui crée un lien hypertexte. Seule, la balise ne fait rien. Elle a besoin d'un attribut href pour indiquer au navigateur où le lien doit mener.

<a href="https://www.wikipedia.org">Visitez Wikipédia</a>

Dans cet exemple, href est l'attribut et "https://www.wikipedia.org" est sa valeur. Le texte entre les balises, « Visitez Wikipédia », est ce qui apparaîtra comme le lien cliquable sur la page.

Un autre attribut courant est src (source), utilisé avec la balise <img> pour spécifier le chemin d'accès à un fichier image.

<img src="images/un_chaton_mignon.jpg" alt="Un chaton mignon jouant avec une pelote de laine">

Ici, l'attribut src indique au navigateur où trouver l'image. L'attribut alt fournit un texte alternatif, qui est important pour l'accessibilité (les lecteurs d'écran le lisent à haute voix) et s'affiche si l'image ne peut pas être chargée.

Quiz Questions 1/5

Quel est le rôle principal du HTML (HyperText Markup Language) dans la création d'une page web ?

Quiz Questions 2/5

Dans quelle section d'un document HTML placez-vous le contenu visible par l'utilisateur, comme les paragraphes et les images ?

En combinant la structure de base, les balises et les attributs, vous avez les outils fondamentaux pour créer vos propres pages web simples.