FriconiX
Des milliers de pictogrammes gratuits dessinés avec amour !

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 :

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 :

Structure générale d'une balise HTML

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 :

On distingue sur cet exemple quelques balises :

Notez au passage que dans le 3ème élément de la liste, code &eacute; 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.

Voir aussi


Dernière mise à jour : 16/01/2020