Chapitre II : Le langage HTML

Ce laboratoire pratique permet de découvrir et maîtriser les bases du langage HTML, utilisé pour structurer et présenter des documents sur le Web. Vous apprendrez à créer des pages HTML simples en utilisant les balises essentielles, à structurer un document, insérer des titres, paragraphes, listes, liens, tableaux et images.

D'après le document Chapitre II : Le langage HTML

Cet article a été rédigé automatiquement à partir du document source, puis vérifié avant publication.

Document source

Web Development · Institut Supérieur des Études Technologiques · PDF · 15 pages · 1991

Afficher l'aperçu du document

Consulter le document original →

Objectifs

Comprendre la structure d’un document HTML.
Utiliser les balises de base pour créer titres, paragraphes, listes et liens.
Insérer et formater des tableaux et des images dans une page HTML.
Appliquer des attributs pour personnaliser l’apparence des éléments.
Créer des liens internes et externes.

Prérequis et installation

Connaissances élémentaires en informatique et navigation web.
Un éditeur de texte simple (ex : Notepad, Visual Studio Code, Sublime Text).
Un navigateur web récent (ex : Firefox, Chrome, Edge) pour afficher les pages HTML.
Pas besoin d’outils ou logiciels spécifiques autres que ceux mentionnés.

Définition et historique du HTML

Le HTML (HyperText Mark-Up Language) est un langage de balisage permettant de structurer un document et d’indiquer sa présentation. Il facilite la lecture de documents sur Internet via le protocole HTTP. Le HTML est un standard publié par le W3C.

Historique rapide :

1991 : naissance du Web et du HTML.
1993 : première version HTML 1.0.
1995 : HTML 2.0 standardisé.
1997 : HTML 3.2 puis HTML 4.0 avec feuilles de style et cadres.
2012 : HTML5 introduit des éléments multimédias et de nouvelles fonctionnalités.

Structure d’un document HTML

Un document HTML doit être encadré par les balises <html> et </html>.

Il comprend deux parties principales :

Head : section d’en-tête contenant des informations sur le document, notamment le titre.
Body : corps du document, contenant le contenu visible dans le navigateur.

Le titre, défini dans la balise <title>, apparaît dans la barre du navigateur et sert à l’indexation par les moteurs de recherche.

Notions de base : balises et attributs

Une balise HTML est un nom entouré de chevrons < >. Elles fonctionnent généralement par paire :

<b>Texte en gras</b>

La balise ouvrante <b> et la balise fermante </b> encadrent le texte à mettre en gras.

Certaines balises sont seules, comme <br> qui insère un retour à la ligne.

Les balises doivent être correctement imbriquées, sans chevauchement :

<i><u>Bonjour</u> tout le monde</i>  (correct)
<i><b>Exemple</i> incorrect</b> (incorrect)

Les attributs ajoutent des propriétés aux balises, sous forme clé=valeur dans la balise ouvrante :

<p align="right">Paragraphe aligné à droite</p>

Titres, paragraphes et séparateurs

Les titres

Il existe 6 niveaux de titres, de <h1> (le plus important) à <h6>. Un retour à la ligne est automatiquement inséré après un titre.

Exemples :

<h1>Titre de niveau 1</h1>
<h4 align="center">Titre centré</h4>

Les paragraphes

Le paragraphe simple est encadré par <p> et </p>. Il produit un double retour à la ligne.

Exemple :

<p align="center">Paragraphe centré</p>
<p align="right">Paragraphe aligné à droite</p>

Pour un paragraphe en retrait, on utilise la balise <blockquote> :

<blockquote>Paragraphe avec retrait à droite</blockquote>

Pour afficher du texte avec une police à chasse fixe et conserver les espaces, on utilise <pre> :

<pre>
ligne 1
    ligne 2 avec espaces
</pre>

La balise <address> sert à indiquer des informations sur l’auteur ou la version :

<address>
Créé par les étudiants de l’ISET de Bizerte
Dernière modification : 12/1/2011
</address>

Les séparateurs

Le retour à la ligne simple s’obtient avec <br>, sans balise fermante :

<br clear="left">

L’attribut clear force le texte à s’aligner en libérant la marge gauche, droite ou les deux.

La ligne horizontale s’insère avec <hr> :

<hr size="3" width="200" align="center" noshade>

Attributs :

size : épaisseur en pixels (par défaut 1).
width : longueur en pixels ou en pourcentage.
align : position (left, right, center).
noshade : ligne pleine sans ombrage.

Mise en forme de caractères et caractères spéciaux

Balises de style

Les balises modifient la typographie et peuvent être imbriquées :

Balise	Effet visuel
<b>	Texte en gras
<i>	Italique
<em>	Emphase
<u>	Souligné
<strike> ou <s>	Texte barré
<sub>	Indice
<sup>	Exposant
<code>	Texte en police machine
<small>	Police plus petite
<big>	Police plus grande
<cite>	Citation
<del>	Texte supprimé
<ins>	Nouveau texte inséré

Modification de la police

La balise <font> permet de changer la police, la taille et la couleur :

<font face="Times New Roman, Times, serif" color="#FF0000" size="+2">exemple de police</font>

Attributs :

face : nom de la police.
color : nom ou code hexadécimal (#RRVVBB).
size : taille relative.

Caractères spéciaux

Le HTML utilise le codage ASCII 7 bits. Les caractères accentués doivent être encodés :

Caractère	Code HTML
"	"
&	&
espace insécable
à	à
è	è
é	é

Les listes

Liste à puces

Encadrée par <ul>, avec un titre <lh> et des éléments <li> :

<ul>
  <lh>Titre de la liste</lh>
  <li>Elément 1</li>
  <li>Elément 2</li>
</ul>

Liste numérotée

Encadrée par <ol> :

<ol>
  <lh>Titre de la liste</lh>
  <li>Elément 1</li>
  <li>Elément 2</li>
</ol>

Liste de définition

Encadrée par <dl>, contenant des termes <dt> et des descriptions <dd> :

<dl>
  <th>Titre de la liste</th>
  <dt>Terme 1</dt>
  <dd>Définition du terme 1</dd>
  <dt>Terme 2</dt>
  <dd>Définition du terme 2</dd>
</dl>

Attributs des listes

Attribut	Valeur	Effet visuel
COMPACT		Resserre l’interligne
PLAIN		Supprime les puces
SEQNUM		Définit le premier numéro
START		Définit le premier numéro
CONTINUE		Repart du numéro précédent
TYPE (ordonnée)	1, A, a, I, i	Type de numérotation
TYPE (non ordonnée)	circle, square, disc	Type de puce

Combinaison de listes

Les listes peuvent être imbriquées :

<ol>
  <li>Achats à faire
    <ul>
      <li>2 litres de lait</li>
      <li>1 kg de pain mi-blanc</li>
    </ul>
  </li>
  <li>Recette
    <dl>
      <dt>Pain</dt>
      <dd>Il faut de la farine et de l’eau, de la levure.</dd>
      <dt>Lait</dt>
      <dd>Si vous êtes en ville, aucune chance... Il faut trouver une vache</dd>
    </dl>
  </li>
  <li>Dernier élément numéroté</li>
</ol>

Les liens

Balise <a> et attribut HREF

Un lien est défini par la balise <a> avec l’attribut href indiquant l’adresse cible. Le texte ou l’image entre les balises est cliquable.

<a href="adresse">mots_sensibles</a>

Exemples :

<a href="http://www.isetb.rnu.tn/">ISET Bizerte</a>
<a href="/welcome.html">Retour à l’accueil</a>
<a href="../index.html">Remonter d’un niveau</a>

Lien interne

Permet de créer des renvois dans le même document grâce à des ancres :

<a name="nom_de_l’ancre"></a>  (définition de l’ancre)
<a href="#nom_de_l’ancre">mots_sensibles</a>  (lien vers l’ancre)

Exemple :

<a name="bas_de_la_page"></a>
...
<a href="#bas_de_la_page">Aller en bas</a>

On peut aussi utiliser des ancres dans des liens externes :

<a href="http://www.isetb.rnu.tn/cours/exemple.html#partie2">Deuxième Partie</a>

Adresses relatives

Fichier dans le même répertoire : href="index.html"
Fichier dans un sous-répertoire : href="archives/2001/18072001.html"
Fichier dans un répertoire supérieur : href="../../index.html"
Fichier dans une branche latérale : href="../../produits/convecteurs/rh1200x.html"

Liens vers services Internet

Envoi d’e-mail :

<a href="mailto:adresse_correspondant">ancre</a>
<a href="mailto:adresse_correspondant?Subject=Objet_du_message">ancre</a>

Exemple :

<a href="mailto:[email protected]?Subject=Coucou">Contact !!</a>

Téléchargement de fichier via FTP :

<a href="ftp://tecfa.unige.ch/pub/software/">Liste des logiciels disponibles</a>

Les tableaux

Un tableau HTML est encadré par <table> et </table>. Il contient :

Un titre avec <caption>.
Des lignes avec <tr>.
Des cellules d’en-tête avec <th>.
Des cellules de données avec <td>.

Exemple :

<table border="1">
  <caption>Voici le titre du tableau</caption>
  <tr>
    <th>Titre A1</th>
    <th>Titre A2</th>
    <th>Titre A3</th>
    <th>Titre A4</th>
  </tr>
  <tr>
    <th>Titre B1</th>
    <td>Valeur B2</td>
    <td>Valeur B3</td>
    <td>Valeur B4</td>
  </tr>
</table>

Attributs du tableau

Attribut	Rôle
border="x"	Épaisseur du cadre
bgcolor="couleur"	Couleur des cellules
bordercolor="couleur"	Couleur des bordures
height="y"	Hauteur du tableau
width="x"	Largeur du tableau
align="left/right/center"	Alignement horizontal
cellpadding="y"	Espace entre bordure et contenu
cellspacing="y"	Espacement entre cellules

Attributs des cellules <td> et <th>

align="left/center/right/justify/char" : alignement horizontal
valign="top/bottom/middle/baseline" : alignement vertical
width="x" et height="y" : dimensions
colspan="x" : fusionne x colonnes
rowspan="y" : fusionne y lignes
bgcolor="couleur" : couleur de fond
background="url" : image de fond

Attributs des lignes <tr>

valign="top/bottom/baseline/middle" : alignement vertical
align="right/center/left" : alignement horizontal
bgcolor="couleur" : couleur de fond

Ces attributs s’appliquent à toutes les cellules de la ligne sauf si une cellule a ses propres attributs.

Exemple de regroupement de cellules

<table border="3" cellpadding="2">
  <caption align="bottom">Titre</caption>
  <tr>
    <th align="left">Script</th>
    <th align="left" colspan="2">Exécution</th>
  </tr>
  <tr>
    <td>CGI</td>
    <td rowspan="2">par le</td>
    <td>serveur</td>
  </tr>
  <tr>
    <td>javascript</td>
    <td>client</td>
  </tr>
</table>

Insertion d’images

Les formats supportés sont *.gif, *.jpg et *.png (pour les navigateurs récents).

La balise <img> insère une image :

<img src="URL" align="alignement" alt="commentaire" width=n height=n hspace=n vspace=n border=n>

Attributs :

src (obligatoire) : URL ou chemin relatif vers l’image.
align : position par rapport au texte (TOP, BOTTOM, MIDDLE, RIGHT, LEFT).
alt : texte alternatif affiché si l’image ne s’affiche pas.
width et height : dimensions en pixels.
hspace et vspace : marges horizontale et verticale en pixels.
border : largeur de la bordure en pixels.

Résultats attendus

Après avoir suivi ce TP, vous devriez être capable de créer une page HTML complète avec :

Une structure correcte avec <html>, <head> et <body>.
Des titres hiérarchisés et alignés selon besoin.
Des paragraphes simples, en retrait, ou formatés avec police fixe.
Des listes à puces, numérotées et de définitions, simples ou imbriquées.
Des liens internes et externes fonctionnels, avec gestion des ancres et adresses relatives.
Des tableaux bien formés avec titres, cellules fusionnées, couleurs et alignements.
Des images insérées avec attributs d’alignement, taille, marges et bordures.
Une mise en forme de texte variée avec balises de style et caractères spéciaux correctement affichés.

Pièges courants

Oublier la balise fermante d’une balise ouvrante (ex : <p> sans </p>).
Imbriquer incorrectement les balises, provoquant des chevauchements invalides.
Ne pas respecter la casse des attributs (bien que HTML soit insensible à la casse, certains éditeurs ou navigateurs peuvent être sensibles).
Utiliser des caractères accentués sans encodage HTML, provoquant des erreurs d’affichage.
Confondre les balises uniques (ex : <br>) avec les balises en paire.
Ne pas définir l’attribut alt pour les images, ce qui nuit à l’accessibilité.
Utiliser des chemins incorrects dans les liens relatifs, empêchant le chargement des ressources.
Ne pas fermer correctement les balises d’ancre pour les liens internes.
Omettre les attributs essentiels dans les tableaux, ce qui peut rendre leur lecture difficile.

Commentaires

Aucun commentaire pour le moment. Posez la première question.

← Toutes les révisions

Document source

Objectifs

Prérequis et installation

Définition et historique du HTML

Structure d’un document HTML

Notions de base : balises et attributs

Titres, paragraphes et séparateurs

Les titres

Les paragraphes

Les séparateurs

Mise en forme de caractères et caractères spéciaux

Balises de style

Modification de la police

Caractères spéciaux

Les listes

Liste à puces

Liste numérotée

Liste de définition

Attributs des listes

Combinaison de listes

Les liens

Balise <a> et attribut HREF

Lien interne

Adresses relatives

Liens vers services Internet

Les tableaux

Attributs du tableau

Attributs des cellules <td> et <th>

Attributs des lignes <tr>

Exemple de regroupement de cellules

Insertion d’images

Résultats attendus

Pièges courants

Partager

Commentaires