HTML5
Module : Introduction à l’informatique
1ère ANNEE LEESM : MATHEMATIQUES
Prof. KICH ISMAIL
HTML
WEB vs Internet?
Rappel
Année Universitaire 2024-2025| 2
HTML
Principe
Client Communication Serveur
Année Universitaire 2024-2025| 3
HTML
Principe
❑ Navigateurs
➢ Un navigateur web est un logiciel qui permet d'accéder au World Wide Web et
d'afficher des pages web sur l'écran de l'utilisateur.
➢ Il interprète le code HTML, les images et d'autres ressources du site web pour les
présenter de manière compréhensible et interactive.
➢ Les navigateurs web fonctionnent en envoyant des requêtes aux serveurs web pour
récupérer les pages demandées, puis en traduisant le code source en une
interface graphique utilisable.
➢ Les principaux navigateurs incluent Google
Chrome, Mozilla Firefox, Safari, Microsoft
Edge et Opera.
Année Universitaire 2024-2025| 4
HTML
Principe
Comment fonctionne le web?
Serveur = ordinateur qui stocke
et fournit le site web
Année Universitaire 2024-2025| 5
HTML
Principe
Comment fonctionne le web?
Demande de page web
(Requête)
Client = ordinateur utilise,
généralement via le navigateur
(Firefox, Chrome, Safari,
Internet Explorer...)
Année Universitaire 2024-2025| 6
HTML et CSS
Principe
Comment fonctionne le web?
Réponse
(page web)
Année Universitaire 2024-2025| 7
HTML
Principe
Comment fonctionne le web?
Html : Le squelette
▪ Html fournit des balises (tags) pour décrire différents types de contenu
(éléments) sur vos sites Web. Par exemple, des balises comme <header>,
<link>, ou <div> permettent au navigateur de comprendre la structure et le
contenu de la page,
▪ Bien que le navigateur puisse afficher le HTML tel quel, celui-ci peut être
rendu interactif et visuellement attrayant grâce à l’ajout de JavaScript et
CSS.
▪ Imaginez le HTML comme une ossature qui prend vie et s'anime grâce à
ces technologies.
Année Universitaire 2024-2025| 8
HTML
Principe
Comment fonctionne le web?
L'apparence ou CSS
▪ CSS est ce qui donne à votre site son style et son esthétique, rendant
l'expérience utilisateur agréable et engageante,
▪ Avec CSS, vous pouvez ajouter des couleurs, modifier les tailles et les
polices, intégrer des images de fond, et adapter le site à différents formats
d'écran (responsive design),
▪ Que vous souhaitiez devenir un expert en CSS ou un Ninja de JavaScript,
une maîtrise solide de HTML reste essentielle.
Année Universitaire 2024-2025| 9
HTML
Principe
Comment fonctionne le web?
JavaScript : le cerveau et les muscles
▪ JavaScript agit comme le cerveau et les muscles d’un site Web, permettant
d’interagir avec l’utilisateur et de modifier dynamiquement le contenu
HTML en fonction de ses actions ou des données reçues d’un serveur,
▪ Grâce à JavaScript, votre site devient dynamique au lieu de rester statique.
Année Universitaire 2024-2025| 10
HTML
Principe
Comment fonctionne le web?
Année Universitaire 2024-2025| 11
HTML
HTML ?
❑ Définition et rôles :
HTML est l’abréviation de HyperText Markup Language, qui signifie en français langage
hypertexte de balisage. (Créé en 1991)
➢ Langage de description de pages Web : structurer et de donner du sens au
contenu d’une page Web en utilisant des balises (tags),
➢ Affichage de documents hypertextes : facilite l’affichage des informations par
les navigateurs,
➢ Langage côté client : Fonctionne directement dans le navigateur, comme CSS
et JavaScript,
➢ Supporté par le W3C : Développé et standardisé par le World Wide Web
Consortium pour assurer la compatibilité.
Année Universitaire 2024-2025| 12
HTML
Balises (Tags)
❑ HTML : C’est la structure en balises d'un document web,
❑ Balise : C’est un élément de code utilisé pour structurer et formater le
contenu d'une page web,
➢ Encadrée par des chevrons < >, une balise indique au navigateur comment
afficher le contenu qu'elle entoure,
➢ Les balises fonctionnent généralement par paires : une balise ouvrante <balise>
et une balise fermante </balise>, avec le contenu à afficher placé entre les deux,
➢ Les balises sont insensibilité à la casse, mais il est recommandé de les écrire en
minuscules pour respecter les normes modernes (HTML5),
➢ Exemple : pour définir un titre et un paragraphe, on utilise les balises <h1> et <p>
<h1>Titre principal</h1>
<p>Voici un paragraphe.</p>
Année Universitaire 2024-2025| 13
HTML
Balises (Tags)
➢ Une balise auto-fermante est une balise HTML qui ne nécessite pas de balise de
fermeture distincte, se terminant directement par />.
➢ Exemple : pour afficher une image, on utilise la balise <img />
<img src="[Link]" alt="Description" />
✓ src et alt sont des attributs,
➢ Les attributs en HTML permettent de définir des propriétés ou des paramètres
pour les balises, influençant leur apparence ou leur comportement,
✓ Syntaxe : nom="valeur"
➢ Dans le cas où la balise utilise plusieurs attributs, ceux-ci sont séparés par une
simple espace.
➢ Remarque : Une balise qui est ouverte à l'intérieur d'une autre doit aussi être
fermée à l'intérieur.
<html><body></body></html> : correct
<html><body></html></body> : incorrect
Année Universitaire 2024-2025| 14
HTML
Document HTML
Exemple d’une page web
Année Universitaire 2024-2025| 15
HTML
Document HTML
Code Source
Année Universitaire 2024-2025| 16
HTML
Balises (Tags)
Code Source (suite)
Année Universitaire 2024-2025| 17
HTML
Document HTML
Structure de la page web
Année Universitaire 2024-2025| 18
HTML
Document HTML
Structure de la page web
Année Universitaire 2024-2025| 19
HTML
Document HTML
Structure de la page web
Année Universitaire 2024-2025| 20
HTML
Balises (Tags)
Structure de la page web
Année Universitaire 2024-2025| 21
HTML
Versions HTML
Historique des versions
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML 5 2014
Année Universitaire 2024-2025| 22
HTML
Structure d’une page HTML
Année Universitaire 2024-2025| 23
HTML
Structure d’une page HTML
❑ Exemple d’une structure de base d’un document HTML
Année Universitaire 2024-2025| 24
HTML
Structure d’une page HTML
❑ Un document HTML se compose de :
1. Information sur la version de HTML utilisée
▪ Déclaration <!DOCTYPE html> pour spécifier la version HTML (ex. : HTML5).
2. En-tête déclaratif (<head>)
▪ Contient des métadonnées :
✓ Titre de la page (<title>),
✓ Liens vers des fichiers CSS et JavaScript,
✓ Paramètres divers (ex. : encodage, favicon).
3. Corps (contenu principal, <body>)
▪ Inclut tout le contenu visible :
✓ Paragraphes, titres, images, vidéos, et liens.
Année Universitaire 2024-2025| 25
HTML
Environnement
❑ Outils indispensables pour coder en HTML
➢ Navigateur : Utilisé pour tester et afficher le rendu des pages HTML.
✓ Exemples : Firefox, Google Chrome, Microsoft Edge.
➢ Éditeur de texte : Utilisé pour écrire et éditer du code HTML.
✓ Exemples : Notepad, Notepad++, Sublime Text, Visual Studio Code, Atom.
Année Universitaire 2024-2025| 26
HTML
1er page WEB
Activité 1 :
Créer une page Web contenant les éléments suivants :
▪ Le titre de la page « Ma première page WEB »,
▪ Le texte « ceci est ma première page WEB avec le langage HTML
version 5 ».
Année Universitaire 2024-2025| 27
HTML
1er page WEB
Année Universitaire 2024-2025| 28
HTML
1er page WEB
Solution 1:
<!DOCTYPE html>
<html>
<head>
<title>Ma première page WEB</title>
</head>
<body>
Ceci est ma première page WEB avec HTML5
</body>
</html>
Année Universitaire 2024-2025| 29
HTML
Balises (Tags)
❑ L’élément <body> en HTML constitue le cœur du contenu visible d’une page web.
❑ Il agit comme un conteneur principal où sont intégrés différents types d’éléments
destinés à structurer et enrichir l’expérience utilisateur.
Année Universitaire 2024-2025| 30
HTML
Balises de Formatages
❑ HTML contient plusieurs éléments permettant de définir
un texte ayant une signification particulière,
❑ Example
This text is bold
This text is italic
This is subscript and superscript
Lien : w3schools
Année Universitaire 2024-2025| 31
HTML
Balise <p> : Paragraphe & <div> : Division
❑ Les balises <p> et <div> sont essentielles pour structurer et organiser le contenu
d'une page web.
Lien : w3schools
Lien : w3schools
Année Universitaire 2024-2025| 32
HTML
Balise <p> : Paragraphe & <div> : Division
❑ Attributs de la balise <p> :
▪ align (obsolète, remplacez-le par CSS)
✓ Définit l'alignement du texte dans le paragraphe,
✓ Valeurs possibles : left, right, center, justify.
✓ Exemple : <p align="center">Ce texte est centré.</p>
▪ dir
✓ Définit la direction du texte dans le paragraphe,
✓ Valeurs possibles : ltr (gauche à droite), rtl (droite à gauche), ou auto,
✓ Exemple : <p dir="rtl">.<هذا النص باللغة العربية/p>
▪ …
❑ La balise <br> (break) :
▪ La balise <br> insère une nouvelle ligne sans créer un nouveau paragraphe,
▪ Elle n'a pas besoin de fermeture explicite comme </br>.
▪ Exp :
<p>Ce texte est sur la 1ère ligne.<br>Et ceci est sur la 2ème ligne.</p>
Ce texte est sur la première ligne.
Et ceci est sur la deuxième ligne.
Année Universitaire 2024-2025| 33
HTML
Balises
Année Universitaire 2024-2025| 34
HTML
Balises <!-- -->
❑ Tout texte ou code placé entre <!-- et --> sera ignoré par le navigateur,
➢ Exemples :
<!-- Ceci est un commentaire -->
<!--
<p>Ce paragraphe est temporairement désactivé.</p>
-->
Année Universitaire 2024-2025| 35
HTML
Balise <h?> : Titres
❑ Les balises <h1> à <h6> sont utilisées pour définir
les titres HTML,
➢ <h1> définit le titre le plus important,
➢ <h6> définit le titre le moins important.
Lien : w3schools
Année Universitaire 2024-2025| 36
HTML
Balises List
❑ Les listes HTML permettent aux développeurs web de
regrouper un ensemble d'éléments liés dans des listes,
❑ Exemples :
▪ Unordered List
▪ Ordered List
Lien : w3schools
Année Universitaire 2024-2025| 37
HTML
❑ Entités HTML et Caractères spéciaux
▪ Certains caractères sont réservés en HTML.
▪ Si vous utilisez les signes moins que (<) ou plus que (>) dans votre texte HTML, le
navigateur peut les confondre avec des balises..
▪ Les noms ou les numéros d'entité peuvent être utilisés pour afficher des caractères
HTML réservés.
▪ Les noms d'entités se présentent comme suit :
&entity_name
ou
&#entity_number
Lien : w3schools
Année Universitaire 2024-2025| 38
HTML
Entités HTML
Exemples Entités:
Année Universitaire 2024-2025| 39
HTML
Caractères spéciaux
Exemples Symboles:
Année Universitaire 2024-2025| 40
HTML
Caractères spéciaux
Exemples Emojis:
Année Universitaire 2024-2025| 41
HTML
<body>
</body>
Année Universitaire 2024-2025| 42
HTML
Année Universitaire 2024-2025| 43
HTML
Balise <a> : lien
❑ Balise d’hyperlien (<a>) :
➢ Un lien est une zone active cliquable permettant de naviguer entre
différentes pages web ou sections d’un site,
➢ Syntaxe de la balise :
▪ href : Attribut obligatoire qui spécifie la destination du lien (URL ou chemin local).
▪ Support du lien : Ce qui est cliquable (texte, image, etc.),
▪ URL (Universal Resource Locator) : Adresse externe d’une ressource sur le web,
▪ Adresse : Chemin local vers une destination dans le même site.
Lien : w3schools
Année Universitaire 2024-2025| 44
HTML
Balise <a> : lien
❑ Balise d’hyperlien (<a>) :
➢ Un lien est une zone active cliquable permettant de naviguer entre
différentes pages web ou sections d’un site,
➢ Syntaxe de la balise :
▪ href : Attribut obligatoire qui spécifie la destination du lien (URL ou chemin local).
▪ Support du lien : Ce qui est cliquable (texte, image, etc.),
▪ URL (Universal Resource Locator) : Adresse externe d’une ressource sur le web,
▪ Adresse : Chemin local vers une destination dans le même site.
Lien : w3schools
Année Universitaire 2024-2025| 45
HTML
Balise <a> : lien
❑ Balise d’hyperlien (<a>) :
▪ Attributs :
1. target :
✓ _blank : Ouvre le lien dans un nouvel onglet ou une
nouvelle fenêtre.
✓ _self : Ouvre le lien dans le même onglet (comportement par
défaut).
2. title :
✓ Ajoute une info-bulle qui s'affiche lorsque l'utilisateur passe
la souris sur le lien. C'est utile pour fournir une description
supplémentaire du lien.
<a href="[Link] target="_blank" title="Visitez Example pour plus
d'informations"> Visitez Example</a>
Lien : w3schools
Année Universitaire 2024-2025| 46
HTML
Balise <table> : Tableau
❑ Balise (<table>) :
➢ La balise <table> est utilisée pour créer des tableaux dans une
page web,
➢ Elle permet de structurer des données sous forme de lignes et
de colonnes.
➢ Structure d'un tableau en HTML :
▪ Tableau : <table> ... </table>
▪ Ligne : <tr> ... </tr>
▪ Cellule : <td> ... </td>
▪ Cellule d'en-tête : <th> ... </th>
▪ Relation entre les balises :
✓ Une ligne <tr> est composée de plusieurs colonnes,
représentées par les balises <td> (ou <th> pour les
en-têtes).
Lien : w3schools
Année Universitaire 2024-2025| 47
HTML
Balise <table> : Tableau
➢ Structure d'un tableau en HTML
Année Universitaire 2024-2025| 48
HTML
Balise <table> : Tableau
Année Universitaire 2024-2025| 49
HTML
Balise <table> : Tableau
Exercice : Donner le code HTML du Tableau suivant
Matière Trimestre Volume Horaire
HTML 1 20
Java Script 2 30
[Link] 2 40
Année Universitaire 2024-2025| 50
HTML
Balise <table> : Tableau
Correction:
Année Universitaire 2024-2025| 51
HTML
Balise <table> : Tableau
❑ Balise <caption> : légende d’un tableau :
➢ La balise <caption> est utilisée pour fournir un titre ou une description au
tableau.
➢ La balise <caption> doit être la première balise à l'intérieur de la balise <table>.
Année Universitaire 2024-2025| 52
HTML
Balise <table> : Tableau
<table width= 100% border= 2>
<caption>
<font size=4 color="blue">Nouvelles Matières Introduites</font>
</caption>
…
…
</table>
Nouvelles Matières Introduites
Matière Trimestre Volume Horaire
HTML 1 20
Java Script 2 30
[Link] 2 40
Année Universitaire 2024-2025| 53
HTML
Balise <table> : Tableau
Fusion Horizontale : Extension de cellule sur C colonnes :
<td colspan="C">
Exemple : 1 2
3 4 5
<table>
<tr>
<td>1</td>
<td colspan=2>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
Année Universitaire 2024-2025| 54
HTML
Balise <table> : Tableau
Fusion Verticale : Extension de cellule sur L lignes :
<td rowspan="L">
Exemple : 1 7 9
2
3 4 5
<table>
<tr>
<td>1</td>
<td rowspan=2>2</td>
<td>7</td>
<td>9</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<tr>
</table>
Année Universitaire 2024-2025| 55
HTML
Balise <img>
❑ Balise <img> :
➢ Utilisée pour insérer des images dans une page web.
➢ C’est une balise auto-fermante, ce qui signifie qu'elle ne nécessite <img
pas de balise de fermeture. src=" "
➢ Attributs principaux : alt=" "
▪ src : width=" "
▪ Spécifie l'URL ou le chemin de l'image, height=" "
▪ Exemple : src="chemin/[Link]" title=" "
▪ alt : />
▪ Fournit un texte alternatif si l'image ne peut pas être affichée, Exemple :
alt="Description de l'image"
▪ width et height :
▪ Définit la largeur et la hauteur de l'image (en pixels ou en pourcentage).
▪ Exemple : width="300" ou height="150"
▪ title
▪ Affiche une info-bulle lorsque l'utilisateur survole l'image.
▪ Exemple : title="Info sur l'image" Lien : w3schools
Année Universitaire 2024-2025| 56