Le langage HTML

Ce document présente les bases du langage HTML, destiné aux étudiants et débutants en programmation web. Il couvre la structure générale d’une page HTML, les balises essentielles, la création de listes, de tableaux et de formulaires, ainsi que l’insertion d’images et de liens hypertextes.

Le langage HTML : introduction et structure générale

HTML signifie HyperText Markup Language. C’est un langage de balisage qui permet de structurer le contenu des pages web en différents éléments appelés balises. Chaque contenu doit être inclus dans un élément HTML.

Un élément HTML a la structure suivante :

<nom-element> contenu </nom-element>

Un élément peut aussi contenir des attributs pour enrichir ses informations :

<nom-element attribut1="valeur1" attribut2="valeur2"> contenu </nom-element>

Il existe deux types de balises :

• Balises doubles : avec une balise d’ouverture et une balise de fermeture.
• Balises simples (ou mono-balises) : balises vides se terminant par />.

Les balises de base d’une page HTML sont :

• <!DOCTYPE> : déclaration du type de document.
• <html> : élément racine.
• <head> : en-tête contenant les métadonnées.
• <body> : corps de la page contenant le contenu visible.

Quelques attributs de base :

• id : identifiant unique d’un élément.
• class : nom d’une classe pour appliquer un style.
• style : style local appliqué à un élément.
• hidden : cache un élément dans la page.
• title : texte affiché en infobulle au survol.

Les commentaires s’écrivent ainsi :

<!-- Ceci est un commentaire -->

Règles à respecter :

• Les éléments non vides doivent avoir une balise d’ouverture et une balise de fermeture.
• Les éléments vides se terminent par /> précédé d’un espace.
• Les éléments ne doivent pas se chevaucher (principe "premier ouvert, dernier fermé").
• Tous les attributs doivent avoir une valeur entre guillemets.
• Les scripts et feuilles de style sont préférablement séparés du code HTML.

Les balises HTML essentielles

Les titres et paragraphes

Les titres s’écrivent avec les balises <h1> à <h6> selon le niveau :

<h1>Titre principal</h1>
<h2>Sous-titre</h2>

Les paragraphes s’écrivent avec la balise <p> :

<p>Ceci est un paragraphe.</p>

Mise en forme du texte

La balise <font> permet de définir la taille, la couleur et la police :

• size : taille du texte (de 1 à 7 ou valeurs relatives).
• color : couleur du texte.
• face : police du texte.

Exemple :

<font size="5" color="blue" face="verdana">Mon texte</font>

Insertion d’images

Les types d’images supportés sont PNG, JPG, GIF et BMP.

La balise est une balise simple :

<img src="chemin/image" alt="texte alternatif" width="largeur" height="hauteur" border="épaisseur" />

Exemple :

<img src="images/photo.png" alt="Erreur lecture Image" width="100px" height="100px" />

Liens hypertextes

La balise <a> crée un lien. Les attributs principaux sont :

• href : adresse de destination.
• title : texte descriptif affiché au survol.

Types de liens :

• Lien externe : vers une autre page.
• Lien interne : vers un emplacement dans la même page (ancres).

Exemple de lien interne avec ancre :

<a href="#titre">Lien vers Mon Titre</a>
<h3 id="titre">Mon Titre</h3>

Exemple de lien externe avec ancre :

<a href="mapage.html#titre">Lien vers Mon Titre</a>
<h3 id="titre">Mon Titre</h3>

Pour créer un lien vers une adresse e-mail :

<a href="mailto:[email protected]">Ecrivez-moi</a>

On peut aussi spécifier un sujet et un corps par défaut :

<a href="mailto:[email protected]?subject=Sujet du mail&body=Corps du mail">Ecrivez-moi</a>

Les listes en HTML

Deux types de listes :

• Liste non ordonnée (à puces) : <ul>...</ul>
• Liste ordonnée (numérotée) : <ol>...</ol>

Les éléments de liste sont définis par la balise <li>.

Listes non ordonnées

Attributs :

• type : type de puces (disc, circle, square).

Exemple :

<ul type="circle">
  <li>Premier élément</li>
  <li>Deuxième élément</li>
</ul>

Listes ordonnées

Attributs :

• type : type de numérotation (1, I, i, A, a).
• start : numéro de départ.

Exemple :

<ol type="A" start="3">
  <li>Troisième élément</li>
  <li>Quatrième élément</li>
</ol>

Listes imbriquées

Il est possible d’imbriquer des listes à l’intérieur d’éléments <li> pour créer des sous-listes.

Les tableaux en HTML

Un tableau se crée avec la balise <table>...</table>. Le contenu est organisé ligne par ligne :

• <tr>...</tr> : crée une ligne.
• <td>...</td> : crée une cellule dans une ligne.

Attributs importants de <table> :

• border : épaisseur de la bordure du tableau.
• cellspacing : espacement entre les cellules.
• cellpadding : espacement entre le bord et le contenu des cellules.

Ajouter un titre au tableau

La balise <caption> ajoute un titre au tableau, placé directement après l’ouverture de la table.

Attribut :

• align : position du titre (top, bottom, left, right).

Exemple :

<table border="1">
  <caption align="top">Titre du tableau</caption>
  ...
</table>

La ligne d’en-tête

Pour la première ligne, on utilise la balise <th> au lieu de <td> pour définir les cellules d’en-tête.

Fusion de cellules

La fusion de cellules s’applique sur les éléments <td> avec :

• colspan : fusion horizontale (colonnes).
• rowspan : fusion verticale (lignes).

Remarque :

• La somme des colspan doit être identique pour toutes les lignes.
• La somme des rowspan doit être identique pour toutes les colonnes.

Les formulaires en HTML

Un formulaire se crée avec la balise <form>...</form>.

Attributs :

• action : page de destination du formulaire.
• method : méthode d’envoi (GET ou POST).

Regroupement d’éléments

La balise <fieldset>...</fieldset> permet de regrouper des éléments du formulaire.

La balise <legend>...</legend> définit une étiquette pour ce groupe.

Champs de texte mono-ligne

Balise : <input> avec attribut type :

• text : champ texte.
• password : champ mot de passe.
• hidden : champ caché.

Attributs importants :

• name : nom du champ.
• value : valeur par défaut.
• size : taille du champ en nombre de caractères.
• maxlength : limite du nombre de caractères.
• readonly : champ verrouillé.
• disabled : champ désactivé.

Champs de texte multi-lignes

Balise : <textarea>...</textarea>

Attributs :

• rows : nombre de lignes.
• cols : nombre de colonnes.
• name : nom du champ.
• readonly : verrouiller le champ.
• disabled : désactiver le champ.

Champs de fichiers

Permettent à l’utilisateur d’envoyer un fichier via le formulaire :

<input type="file" size="..." />

Remarque : pour que ce champ fonctionne, il faut ajouter l’attribut enctype="multipart/form-data" à la balise <form>.

Les boutons radios

Permettent de choisir un seul élément parmi plusieurs :

<input type="radio" name="groupe" value="valeur" />

Attributs :

• name : identique pour tous les boutons du groupe.
• value : valeur envoyée au serveur.
• checked : bouton sélectionné par défaut.

Les cases à cocher

Permettent de sélectionner un ou plusieurs choix :

<input type="checkbox" name="nom[]" value="valeur" />

Remarque : pour envoyer plusieurs valeurs, il faut ajouter des crochets [] au nom du groupe.

Les boutons

Quatre types de boutons :

• Simple : <input type="button"> ou <button type="button">...</button>
• Envoi : type="submit" pour valider le formulaire.
• Image : type="image" avec attribut src pour une image personnalisée.
• Réinitialisation : type="reset" pour remettre à zéro les champs.

Exemple d’attribut pour bouton simple :

onclick="fonction()"

Les listes déroulantes

Balise : <select>...</select>

Les options sont définies par la balise <option>...</option>.

Attributs de <option> :

• value : valeur envoyée au serveur.
• selected : option sélectionnée par défaut.

Attributs de <select> :

• name : nom de la liste.
• size : nombre d’éléments visibles, rend la liste non déroulante si > 1.
• multiple : autorise la sélection multiple (seulement pour listes non déroulantes).

Glossaire des termes clés

• Balise : élément HTML délimitant un contenu, avec une balise d’ouverture et une balise de fermeture ou une balise simple.
• Attribut : information complémentaire ajoutée à une balise pour définir ses propriétés.
• Élément : ensemble balise + contenu.
• DOCTYPE : déclaration du type de document HTML.
• id : identifiant unique d’un élément.
• class : nom de classe pour appliquer un style CSS.
• Ancres : liens internes vers une position dans la page.
• Liste ordonnée : liste numérotée.
• Liste non ordonnée : liste à puces.
• Tableau : structure organisée en lignes et colonnes.
• Formulaire : zone interactive permettant à l’utilisateur d’envoyer des données.
• Champ texte : zone de saisie de texte.
• Champ fichier : zone permettant de sélectionner un fichier à envoyer.
• Bouton radio : choix unique dans un groupe.
• Case à cocher : choix multiple dans une liste.
• Liste déroulante : menu déroulant pour sélectionner une option.

Points clés à retenir

• HTML structure le contenu web à l’aide de balises et d’attributs.
• Les éléments doivent être correctement ouverts et fermés, sans chevauchement.
• Les listes, tableaux et formulaires sont des structures essentielles pour organiser l’information.
• Les formulaires utilisent différents types de champs pour collecter des données variées.
• Les attributs comme id, class, name sont indispensables pour identifier et manipuler les éléments.
• Les liens hypertextes peuvent être internes, externes ou vers des adresses e-mail.
• La fusion de cellules dans un tableau s’effectue avec les attributs colspan et rowspan.
• Les listes déroulantes peuvent être simples ou permettre une sélection multiple.