ABIDI Mohamed Fadhel
I. Définition et structure générale :
HTML (HyperText Markup Language) est le langage standard utilisé pour structurer et afficher le
contenu des pages web. Il utilise des balises pour organiser le texte, les images, les vidéos, les liens,
et d'autres éléments multimédias sur un site. Chaque élément sur une page web est défini par une
balise HTML, permettant aux navigateurs de comprendre comment présenter le contenu. HTML5 est
la dernière version du langage HTML utilisé pour structurer le contenu des pages web. Il introduit de
nouvelles balises sémantiques et des API pour rendre les pages web plus interactives et accessibles.
Squelette d'une page HTML5 :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre de la page</title>
</head>
<body>
Bonjour HTML
</body>
</html>
Balises de structure :
• <html> : Définit le début du document HTML.
• <head> : Contient les informations sur le document (métadonnées, titre, liens vers CSS, etc.).
• <body> : Contient le contenu visible de la page.
Structure d’une balise html :
II. Attributs globaux
Un attribut global est un attribut que l’on peut appliquer à toutes les balises HTML, quelle que soit
leur nature (<div>, <p>, <input>, etc.).
Page 34 sur 112
ABIDI Mohamed Fadhel
Les principaux attributs globaux
Attribut Rôle
class Attribue une ou plusieurs classes CSS à un élément.
id Donne un identifiant unique à un élément. Permet de le cibler précisément (CSS ou
JavaScript).
hidden Masque l’élément dans la page (il n’est pas visible à l’affichage).
lang Indique la langue du contenu de l’élément (utile pour l’accessibilité et le SEO).
style Permet d’écrire des règles CSS directement dans l’élément (à éviter en grande quantité).
title Affiche un infobulle au survol de l’élément avec la souris.
III. Eléments d’en-tête
1. style:
La balise <style> permet d’écrire du code CSS directement dans un fichier HTML, généralement
dans la section <head>. Elle sert à appliquer des styles (couleur, taille, marges, etc.) à des éléments
HTML.
<head>
<meta charset="UTF-8">
<title>Exemple avecstyle</title>
<style>
h1 {
color: red;
font-family: cursive;
}
</style>
</head>
<body>
<h1>Bienvenue sur mon site</h1>
</body>
2. <link>
La balise <link> est utilisée pour établir une connexion entre le document HTML et des ressources
externes, telles que des feuilles de style CSS. Elle se place dans l'élément <head> du document.
Exemple :
Page 35 sur 112
ABIDI Mohamed Fadhel
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de Balise Link</title>
<!-- Lien vers une feuille de style CSS -->
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Bienvenue sur ma page</h1>
</body>
</html>
Dans cet exemple, la balise <link> est utilisée pour relier le document HTML à une
feuille de style CSS externe nommée "[Link]".
3. <meta>
La balise <meta> est utilisée pour fournir des métadonnées au document HTML. Elle peut définir des
informations sur le caractère encodé, la description, les mots-clés, et d’autres paramètres
importants pour le référencement et le fonctionnement du document.
Exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Un exemple de page HTML avec des
balises meta.">
<meta name="keywords" content="HTML, CSS, exemple">
<meta name="author" content="Auteur du Document">
<title>Exemple de Balise Meta</title>
</head>
<body>
<h1>Page d'exemple</h1>
</body>
</html>
Ici, la balise <meta> est utilisée pour définir l'encodage des caractères, la description,
les mots-clés, et l'auteur de la page.
4. <script>
La balise <script> est utilisée pour inclure du code JavaScript dans un document HTML. Elle peut être
utilisée pour incorporer des scripts directement dans le document ou pour référencer des fichiers
JavaScript externes.
Page 36 sur 112
ABIDI Mohamed Fadhel
Exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de Balise Script</title>
<!-- Inclusion d'un script JavaScript externe -->
<script src="[Link]"></script>
</head>
<body>
<h1>Bienvenue sur ma page</h1>
<!-- Code JavaScript en ligne -->
<script>
alert('La page est chargée !');
</script>
</body>
</html>
Dans cet exemple, la balise <script> est utilisée pour inclure un fichier JavaScript
externe ([Link]) ainsi que pour insérer un script JavaScript en ligne qui affiche une
alerte lorsque la page est chargée.
5. <title>
La balise <title> est utilisée pour définir le titre du document HTML. Ce titre est affiché dans la barre
de titre du navigateur ou l’onglet de la page. Il est essentiel pour le référencement et l’expérience
utilisateur.
Exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de Balise Title</title>
</head>
<body>
<h1>Contenu de la Page</h1>
</body>
</html>
Dans cet exemple, la balise <title> définit le titre de la page comme "Exemple de Balise
Title", qui sera affiché dans la barre de titre du navigateur.
Page 37 sur 112
ABIDI Mohamed Fadhel
IV. Eléments de structuration de texte
1. Les entêtes :
En HTML, les en-têtes (ou titres) sont représentés par les balises <h1> à <h6>. Ce sont des balises
sémantiques utilisées pour structurer hiérarchiquement le contenu d’une page web. Les balises
d’en-têtes sont utilisées pour la structure logique du contenu, pas pour la mise en forme visuelle
(on utilise le CSS pour cela).
Balise Signification Usage
<h1> Titre principal souvent le titre de la page
<h2> Sous-titre du <h1> Sections principales
<h3> Sous-sous-titre du <h2> Sous-sections
<h4> à <h6> Niveaux inférieurs Pour structurer en profondeur
Exemple d’utilisation :
<h1>Centre de formation
SUFAS</h1>
<h2>Nos formations</h2>
<h3>Développement web</h3>
<h4>HTML, CSS,
JavaScript</h4>
<h4>PHP & MySQL</h4>
<h3>Réseaux
informatiques</h3>
<h4>CCNA</h4>
<h4>Sécurité réseau</h4>
<h2>À propos de nous</h2>
<h3>Notre mission</h3>
<h3>Nos formateurs</h3>
2. Les conteneurs du texte :
En HTML, certaines balises sont utilisées pour structurer, afficher et mettre en valeur du texte. Le
tableau ci-dessous présente quelques-unes de ces balises :
Page 38 sur 112
ABIDI Mohamed Fadhel
Balise Rôle Exemple d'utilisation
<p> Conteneur de paragraphe. Elle permet <p>Bienvenue sur notre site de
formation.</p>
d’écrire des blocs de texte.
<cite> Sert à citer le titre d’une œuvre (livre, <cite>Le Petit Prince</cite>
film, article…).
<address> Utilisée pour afficher une adresse <address>contact@[Link]</address>
postale ou électronique.
<output> Affiche le résultat d’un calcul ou <output>42</output> (résultat d’un
d’une interaction (souvent avec JS). formulaire)
<mark> Met en surbrillance une portion de <mark>Urgent</mark> ou <mark>Examen
texte (souvent pour attirer l'attention). final</mark>
3. Les séparateurs :
En HTML, deux balises sont utilisées pour séparer visuellement ou logiquement le texte sans créer
de nouvelle section : <br> pour un saut de ligne, et <hr> pour une ligne de séparation horizontale.
Exemple d’utilisation :
<h2>Programme de la journée</h2>
<p>Accueil des
participants<br>Présentation du
formateur<br>Pause café</p>
<hr>
<p>Début des ateliers à 10h00</p>
4. Les liens hypertextes :
La balise <a> (pour anchor = ancre) est utilisée pour créer un lien hypertexte, qui permet de :
✓ Naviguer vers une autre page,
✓ Se déplacer à l’intérieur de la même page.
Attributs essentiels :
Attribut Rôle Exemple
href (hypertext reference) : définit l’URL vers laquelle le lien href="[Link]
pointe
target Détermine où le lien s’ouvrira target="_blank"
Valeurs possibles de target :
Page 39 sur 112
ABIDI Mohamed Fadhel
Valeur Effet
_self Ouvre dans la même fenêtre/onglet (valeur par défaut)
_blank Ouvre dans un nouvel onglet ou fenêtre
_parent Ouvre dans le cadre parent (rarement utilisé)
Exemple d’utilisation :
<a href="[Link]
target="_blank"> Visitez notre
site</a> Le clic sur le lien ouvre le site
indiquer en href dans un nouvel
onglet sans quitter la page actuelle
<h1>Bienvenue</h1>
<p><a href="#contact">Aller à
la section Contact</a></p>
<p>Lorem ipsum dolor sit
amet... (beaucoup de texte)</p>
<!-- Cible -->
<h2 id="contact">Contact</h2>
<p>Email : contact@[Link]</p>
Le lien <a href="#contact"> cherche
un élément avec id="contact".
Quand on clique, le navigateur défile
automatiquement jusqu’à cet
élément.
5. Contenu pliable :
La balise <details> permet de créer un contenu repliable (rétractable) que l'utilisateur peut déployer
ou masquer. Elle est souvent utilisée pour afficher des informations supplémentaires sans
encombrer la page. Elle est généralement accompagnée de la balise <summary>, qui sert de titre
cliquable.
Exemple d’utilisation :
<details> ❖ Avant le clic :
<summary>Voir la
réponse</summary>
<p>La capitale de la Tunisie est ❖ Après le clic :
Tunis.</p>
</details>
Page 40 sur 112
ABIDI Mohamed Fadhel
V. Les éléments de structuration de media
1. Les images :
La balise <img> sert à insérer une image dans une page web. Elle est auto-fermante (pas besoin de
</img>).
Attributs principaux :
Attribut Rôle
src (source) Chemin de l’image à afficher
alt (texte alternatif) Description affichée si l’image ne s’affiche pas
Exemple d’utilisation :
<h2> image de l’école </h2> ❖ Si l’image est bien chargée :
<img src="images/[Link]"
alt="Photo de l'école" >
❖ En cas de problème de chargement :
2. Les Vidéos :
La balise <video> permet d’intégrer une vidéo directement dans une page web, avec ou sans
contrôles (lecture, pause, volume…).
Attributs principaux
Attribut Rôle
src Spécifie le chemin de la vidéo
controls Affiche les contrôles de lecture (obligatoire pour interaction)
Exemple d’utilisation :
Page 41 sur 112
ABIDI Mohamed Fadhel
<video
src="videos/presentation.mp4">
Votre navigateur ne supporte pas
la balise vidéo.
</video>
<video controls
src="videos/presentation.mp4" >
Votre navigateur ne supporte pas
la balise vidéo.
</video>
3. Les audios :
La balise <audio> permet d’insérer un fichier audio (comme une musique, un podcast ou un message
vocal) dans une page web.
Attributs principaux
Attribut Rôle
src Spécifie le chemin du fichier audio
controls Affiche les contrôles de lecture (lecture, pause, volume…)
Exemple d’utilisation :
<audio src="sons/theme.mp3"
controls>
Votre navigateur ne supporte pas
la balise audio.
</audio>
Page 42 sur 112
ABIDI Mohamed Fadhel
4. Balise source :
La balise <source> est utilisée à l’intérieur de balises multimédias comme <audio>, <video> pour
spécifier plusieurs sources alternatives. Le navigateur choisit la première source qu’il peut lire
selon le type et les conditions.
Attributs principaux :
Attribut Rôle Exemple
src Chemin du fichier à charger (audio, vidéo ou image) src="media/video.mp4"
type Type du fichier (video/mp4, video/avi, audio/mp3, …) type="video/mp4"
Exemple d’utilisation :
<audio controls>
<source src="sons/theme.mp3" type="audio/mpeg">
<source src="sons/[Link]" type="audio/ogg">
Votre navigateur ne supporte pas l’audio HTML5.
</audio>
5. Les figures :
La balise <figure> sert à regrouper un contenu autonome illustratif, comme :
• une image
• une vidéo
• un extrait de code, etc.
Elle est souvent accompagnée de la balise <figcaption> pour fournir une légende descriptive.
Exemple d’utilisation :
<figure>
<img src="images/[Link]"
alt="Paysage de montagne">
<figcaption>Un beau paysage de
montagne au coucher du
soleil.</figcaption>
</figure>
VI. Les conteneurs :
Les balises <div>, <span> et <iframe> sont des conteneurs utiles pour organiser le contenu dans une
page web.
Page 43 sur 112
ABIDI Mohamed Fadhel
Balise Rôle Type Exemple d’utilisation
<div> Conteneur générique en bloc pour Bloc <div class="boite">...</div>
structurer la page
<span> Conteneur en ligne pour styliser En ligne <span style="color:red;">mot
rouge</span>
une partie de texte
<iframe> Affiche une page web externe Bloc <iframe
src="[Link]
intégrée dans la page actuelle
Exemple d’utilisation :
<div class="encadré">
<h2>Actualité du jour</h2>
<p>Bienvenue sur notre
<span style="color:red">site
web éducatif</span> !</p>
</div>
<h3>Carte interactive</h3>
<iframe src="[Link]"
name="if"></iframe>
Remarque :
On peut utiliser l’attribut target pour ouvrir le lien dans une <iframe> nommée. Par exemple :
<a href="[Link]" target="cadre1">Voir plus d’information </a>
Permet de charger la page "[Link]" dans une iframe nommée "cadre1".
VII. Les tableaux :
En HTML, on utilise plusieurs balises spécifiques pour structurer un tableau de façon claire et
sémantique.
Page 44 sur 112
ABIDI Mohamed Fadhel
Balise Rôle
<table> Définit l’ensemble du tableau.
<caption> Ajoute un titre ou une légende au tableau.
<thead> Contient les lignes de l’en-tête du tableau.
<tbody> Contient les lignes principales (corps du tableau).
<tfoot> Contient les lignes de fin, souvent pour des totaux.
<tr> Définit une ligne du tableau.
<th> Définit une cellule d’en-tête (texte généralement en gras et centré).
<td> Définit une cellule de données normale dans une ligne.
Exemple d’utilisation :
<table>
<caption>Notes des
élèves</caption>
<thead>
<tr>
<th>Nom</th>
<th>Maths</th>
<th>Physique</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amine</td>
<td>14</td>
<td>16</td>
</tr>
<tr>
<td>Sonia</td>
<td>17</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Moyenne</td>
<td>15.5</td>
<td>15.5</td>
</tr>
</tfoot>
</table>
Page 45 sur 112
ABIDI Mohamed Fadhel
VIII. Les Listes :
En HTML, les listes permettent de structurer des éléments de manière ordonnée ou non ordonnée, en
utilisant les balises :
✓ <ul> pour les listes à puces
✓ <ol> pour les listes numérotées
✓ <li> pour créer un élément de liste.
Attributs principaux :
Liste Attribut Rôle
ul type Change le style des puces (disc, circle, square).
ol type Change le style des numéros :
❖ "1 Nombres (1, 2, 3…) — par défaut
❖ "A" Lettres majuscules (A, B, C…)
❖ "I" Chiffres romains majuscules (I, II…)
❖ …..
start Définit à quel numéro la liste commence.
reversed Inverse l’ordre de numérotation (ex. de 5 à 1 au lieu de 1 à 5).
Exemple d’utilisation listes imbriquées :
<ol type="I" start="5" reversed>
<li>Introduction</li>
<li>Partie théorique
<ul type="circle">
<li>Définitions</li>
<li>Notions de base</li>
</ul>
</li>
<li>Partie pratique
<ul type="square">
<li>Exercice 1</li>
<li>Exercice 2</li>
</ul>
</li>
</ol>
IX. Les formulaires :
La balise <form> permet de créer un formulaire pour recueillir des données saisies par l'utilisateur
(nom, email, mot de passe, etc.). Ces données peuvent ensuite être envoyées à un serveur pour
traitement.
Page 46 sur 112
ABIDI Mohamed Fadhel
Attributs principaux :
Attribut Rôle Valeurs possibles
action URL où les données du Une URL ou page valide
formulaire sont envoyées
method Méthode d'envoi des get : ajoute les données à l’URL (claire)
données post : envoie les données dans le corps de la requête.
target Indique où afficher la _self : même onglet (par défaut)
réponse après envoi _blank : nouvel onglet
_parent : dans le cadre parent (si dans une iframe)
_top : dans la fenêtre complète (brise tous les cadres)
Nom d’iframe : dans une iframe spécifique
Exemple d’utilisation :
<form action="[Link]"
method="get">
<h3>Noter un restaurant</h3>
<label for="nom">Nom du restaurant
:</label><br>
<input type="text" id="nom"
name="nom" required><br><br>
<label for="note">Note (1 à 5)
:</label><br>
<input type="number" id="note"
name="note" min="1" max="5" url obtenu :
required><br><br>
<input type="submit"
value="Envoyer">
</form>
1. Les labels :
La balise HTML <label> est utilisée pour associer une étiquette à un champ de formulaire (comme
<input>, <textarea>, etc.). L'utilisateur peut cliquer sur le texte du <label> pour activer le champ
associé.
Exemple d’utilisation :
<label for="id_du_champ">Texte
visible</label>
<input type="text" id="id_du_champ"
name="nom_du_champ">
L'attribut for de <label> doit correspondre à l'attribut id du champ concerné.
2. Les zones de saisie :
En HTML, les zones de saisie sont créées à l’aide de la balise <input> avec différents types (type)
selon la nature des données attendues. Elles permettent à l’utilisateur de fournir des informations via
un formulaire.
Attributs principaux :
Page 47 sur 112
ABIDI Mohamed Fadhel
Attribut Rôle
name Identifie le champ dans les données envoyées au serveur
placeholder Affiche un texte indicatif dans le champ avant que l'utilisateur n'écrive
(exemple ou aide)
required Rend le champ obligatoire à remplir avant de pouvoir soumettre le
formulaire.
readonly Rend le champ non modifiable par l'utilisateur
value valeur par défaut
Liste de balise input
Élément (balise) Rôle Attributs
<input type="text"> Champ de texte simple name, value, placeholder, readonly,
required, disabled
<input type="email"> Saisie d'une adresse e- name, value, placeholder, readonly,
mail required, disabled
<input type="tel"> Saisie d’un numéro de name, value, placeholder, readonly,
téléphone required, disabled,
<input type="password"> Masque les caractères name, value, placeholder, readonly,
saisis required, disabled,
<input type="number"> Saisie de valeurs name, value, readonly, required, disabled
numériques ✓ min : Définit la valeur minimale
que l'utilisateur peut entrer.
✓ max : Définit la valeur maximale
que l'utilisateur peut entrer.
<input type="range"> Curseur pour sélectionner min, max, name, value, readonly, required,
une valeur disabled
<input type="date"> Sélection d’une date min, max, name, value, readonly, required,
disabled
<input type="time"> Sélection d’une heure min, max, name, value, readonly, required,
disabled
<input type="checkbox"> name, value, disabled
cases à cocher ✓ checked : coché par défaut lorsque
la page est chargée
<input type="radio"> Choix unique dans un name, value, disabled, checked
groupe
<input type="submit"> Bouton pour envoyer le name, value, disabled
formulaire
<input type="reset"> Réinitialise les champs du name, value, disabled
formulaire
<button> Crée un bouton name, value, disabled
personnalisable
Page 48 sur 112
ABIDI Mohamed Fadhel
3. Zone multilignes textarea:
La balise <textarea> permet à l’utilisateur de saisir plusieurs lignes de texte, contrairement à un
champ <input> qui ne gère qu’une seule ligne.
Avec les attributs name , readonly , required , disabled , placeholder textarea possède aussi :
✓ cols: Définit la largeur visible de la zone de texte, en nombre de caractères.
✓ rows: Définit la hauteur visible de la zone de texte, en nombre de lignes.
✓ maxlength: Limite le nombre maximum de caractères que l’utilisateur peut taper.
Exemple d’utilisation :
<label for="commentaire">Laissez
un commentaire : </label><br>
<textarea id="commentaire"
name="commentaire" rows="5"
cols="50" maxlength="200">
</textarea>
4. Liste déroulante :
Une liste déroulante en HTML est créée à l’aide des balises <select> (conteneur) et <option>
(éléments de la liste). Elle permet à l’utilisateur de choisir une seule option parmi plusieurs.
Exemple d’utilisation :
<label for="langue">Choisissez une
langue :</label><br>
<select id="langue" name="langue">
<option value="fr" selected : Définit l’option
selected>Français</option> sélectionnée par défaut.
<option value="en">Anglais</option>
<option value="es">Espagnol</option>
<option value="de">Allemand</option>
</select>
5. fieldset :
La balise <fieldset> est utilisée en HTML pour regrouper plusieurs éléments d’un formulaire dans
un même bloc logique, généralement entouré d’un cadre visuel. Elle est souvent accompagnée de la
balise <legend> pour donner un titre à ce groupe.
<form>
<fieldset>
<legend>Informations
personnelles</legend>
<label for="nom">Nom :</label>
<input type="text" id="nom"
name="nom"><br><br>
<label for="email">Email :</label>
Page 49 sur 112
ABIDI Mohamed Fadhel
<input type="email" id="email"
name="email">
</fieldset>
</form>
6. datalist :
La balise <datalist> est utilisée pour fournir une liste de suggestions à un champ <input>.
L'utilisateur peut taper librement, mais il voit apparaître des propositions en fonction de ce qu’il écrit.
Exemple d’utilisation :
<label for="ville">Choisissez
une ville :</label>
<input list="villes" id="ville"
name="ville">
<datalist id="villes">
<option value="Paris">
<option value="Lyon">
<option value="Marseille">
<option value="Toulouse">
<option value="Nice">
</datalist>
L’élément <input> est lié à la liste via
l’attribut list="villes".
X. Eléments de structuration d’une page web
Les éléments de structuration d’une page web permettant principalement de diviser et organiser
logiquement et sémantiquement le contenu.
Balise HTML Rôle
<header> En-tête de page ou de section (titre, logo, menu de navigation…)
<nav> Regroupe les liens de navigation (menu, liens internes, etc.)
<main> Contenu principal de la page (unique par page)
<section> Regroupe un ensemble logique de contenu (ex : services, articles)
<article> Contenu autonome (ex : un article de blog, une fiche produit)
<aside> Contenu complémentaire (ex : pub, encadré, liens secondaires)
<footer> Pied de page ou de section (infos légales, liens, contacts…)
Page 50 sur 112
ABIDI Mohamed Fadhel
XI. Les événements :
Les événements sont utilisés pour déclencher des actions (en Javascript) lorsqu’un utilisateur
interagit avec la page (clics, saisie, chargement, etc.).
Exemple d’utilisation :
<button onclick="alert('Bouton cliqué !')"> Cliquez-moi</button>
Lorsque l’utilisateur clic sur le bouton
Principaux événements HTML
Événement Déclenché quand...
onclick L'utilisateur clique sur un élément.
onsubmit Un formulaire est soumis (via un bouton ou Enter).
onchange La valeur d’un champ change, et l’utilisateur quitte le champ.
onfocus Un élément reçoit le focus (ex. : on clique dans un champ).
onblur Un élément perd le focus (on clique ailleurs).
oninput La valeur d’un champ change (détecté en temps réel).
onload La page ou une ressource est entièrement chargée.
onmouseover Le curseur survole un élément.
onmouseout Le curseur quitte un élément.
onplay Une vidéo ou un audio commence à jouer.
onpause Une vidéo ou un audio est mis en pause.
onkeydown Une touche du clavier est enfoncée.
onkeyup Une touche du clavier est relâchée.
Page 51 sur 112