Cours 1.2. Introduction au HTML

Les fichiers HTML

Le code source du HTML est stocké dans un fichier texte (avec l'extension .html ou .htm) qui peut être ouvert avec n’importe quel éditeur de texte, même lorsque le code HTML est généré dynamiquement (c'est à dire par un programme informatique). Vous pouvez les consulter et les modifier avec n'importe quel éditeur de texte (NotePad, Bloc-notes, gedit ...).

Structure d'une balise

Le HTML est un langage à balises, c’est-à-dire que des balises sont insérées dans le fichier. Plusieurs appelations cohabitent :

balise
marqueur
tag

Les balises commencent par le symbole < et se terminent par >, elles servent à indiquer au navigateur comment interpréter le contenu. La structure générale d'une balise est décrite par le schéma suivant :

Dans cet exemple, le texte contenu dans la balise est encapsulé entre une balise d'ouverture et une balise de fermeture. Notons que dans certains cas il n'y a pas de balise de fermeture. À titre d'exemple : <br> (qui permet un retour à la ligne) n'a qu'une balise d'ouverture.

Les balises acceptent des attributs optionnels qui permettront de définir des propriétés qui seront appliquées à la balise et ses descendants (d'autres balises encapsulées dans celle-ci).

Exemple

Voici ci-dessous un exemple de code HTML et son interprétation dans le navigateur.

<h1>Vive la bicyclette</h1>
Trois bonnes raisons de rouler en bicyclette

<ol> 
    <li>Ca ne pollue pas</li>
    <li>Ca maintient la forme</li>
    <li>C'est moins on&eacute;reux que la voiture</li>
</ol>

Lorsque le code précédent est interprété par le navigateur, il affiche la page suivante :

Tester l'exemple en ligne

On distingue sur cet exemple quelques balises :

<h1> titre de taille 1 (Heading 1)
<ol> liste ordonnée (Ordered List)
<li> élément d’une liste (List Item)

Notez au passage que dans le 3ème élément de la liste, code é correspond à un caractère spécial.

Exercice

Créez un fichier HTML ayant pour titre "I like, I hate". Ajoutez deux sous-titres (titres de niveau 2) "I like" and "I hate". Sous le premier titre, ajoutez une liste non ordonnée contenant des choses que vous aimez. Sous le second titre, ajouter une liste ordonnée contenant des choses que vous n'aimez pas.

Faire l'exercice en ligne

Solution

Quiz

Dans la balise <h1 class="title">Contenu</h1>, quel est l'attribut ?

class="title"

Contenu

/h1

Vérifier

Dans la balise <li class="item">élement</li>, quel est la balise de fermeture ?

<li>

class

item

</li>

Vérifier

Les balises HTML sont aussi appelées :

attributs

marqueurs (markup)

Voir aussi

Dernière mise à jour : 18/11/2021