HyperText Markup Language (HTML)

Pr. BELMAJDOUB Hanae

FSJES-Souissi
[Link]@[Link]

December 1, 2025

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 1 / 208

Introduction au HTML et au CSS

Le HTML (HyperText Markup Language) et le CSS (Cascading Style Sheets) sont

à la base du fonctionnement de tous les sites web.
Peu importe le pays ou le type de site (éducatif, commercial, institutionnel), ces
deux langages sont universellement utilisés.
Ils constituent le socle fondamental du langage web.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 2 / 208

Langage de balisage et langage de description

Le HTML est un langage de balisage : il permet de structurer et d’organiser le

contenu d’une page (titres, paragraphes, liens, images. . . ).
Le CSS est un langage de description : il définit la présentation visuelle (couleurs,
polices, marges, alignements. . . ).
Contrairement à des langages comme Python ou Java, le HTML et le CSS ne sont
pas des langages de programmation, car ils ne réalisent pas de calculs ou de
logique.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 3 / 208

Fonction statique du HTML et du CSS

HTML et CSS servent à décrire du contenu statique, c’est-à-dire des informations

affichées telles quelles par le navigateur.
Employer le terme « langage web » pour les désigner est parfaitement acceptable.
Ces langages sont essentiels pour tous les sites - qu’il s’agisse de Wikipédia,
LinkedIn ou OpenClassrooms.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 4 / 208

Comment fonctionne l’affichage d’un site web ?

Lorsque vous accédez à un site, votre navigateur web (Chrome, Firefox, Edge. . . )
envoie une requête au serveur.
Le serveur est un ordinateur qui contient les fichiers et le contenu du site.
Il analyse la requête et renvoie les données HTML correspondantes à la page
demandée.
Le navigateur interprète ce code HTML et l’affiche sous une forme lisible et
structurée.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 5 / 208

Exemple pratique : page Wikipédia

Si vous ouvrez une page web (par exemple Wikipédia) et que vous faites un clic
droit → Afficher le code source, vous verrez le code HTML et CSS de la page.
Ce code est celui qui a été envoyé par le serveur au navigateur.
Cet exercice est possible sur n’importe quel site web : OpenClassrooms, LinkedIn,
etc.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 6 / 208

Le HTML et le CSS sont complémentaires

Le HTML sert à structurer le contenu d’une page : textes, titres, paragraphes,

images, liens, etc.
Le CSS sert à mettre en forme ce contenu : choix des couleurs, taille du texte,
alignement, arrière-plan, position des images. . .
Ensemble, ils permettent de créer des pages web à la fois informatives et
esthétiques.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 7 / 208

Différence entre HTML et CSS : illustration

Si un site est écrit uniquement en HTML, tout le contenu s’affiche (textes, images,
liens), mais sans style visuel : la présentation est brute et peu attrayante.
Le CSS intervient pour améliorer l’apparence : il rend la page agréable et lisible, ce
qui attire plus d’utilisateurs.
C’est pourquoi HTML et CSS sont indissociables dans la conception d’un site.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 8 / 208

Rôle du CSS dans la présentation

Le CSS contrôle l’apparence de chaque élément de la page :

Positionnement des éléments (images, texte. . . )
Taille, couleur, et style de la police
Espacements, bordures et arrière-plans
Exemple : si le code CSS indique « les titres sont en rouge », le navigateur
affichera automatiquement les titres en rouge.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 9 / 208

Expérimentation et apprentissage

Vous pouvez expérimenter : faites un clic droit sur une page web et choisissez
Inspecter.
Cela vous permet de voir le code HTML à gauche et le CSS à droite, et de tester
des modifications visuelles sans changer le site réel.
C’est un excellent moyen d’apprendre comment fonctionne le code d’un site web.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 10 / 208

Deux langages pour simplifier le travail du développeur

On pourrait penser que deux langages rendent les choses plus complexes, mais
c’est tout l’inverse.
La séparation entre structure (HTML) et style (CSS) facilite la maintenance et la
clarté du code.
Grâce à cette complémentarité, le développement web est plus rapide, plus propre
et plus professionnel.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 11 / 208

Rôle comparé de HTML, CSS et JavaScript

Résumé des trois piliers du web :

HTML : définit la structure de la page (le squelette).
CSS : gère l’apparence et la mise en forme (les styles).
JavaScript : apporte le dynamisme et l’interactivité (le mouvement).
Exemple :
Sur un site d’actualités, les articles et menus sont créés avec HTML.
Le design (couleurs, tailles, alignements) est géré par CSS.
Les interactions (slider, effets au survol de la souris, boutons dynamiques) sont
assurées par JavaScript.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 12 / 208

Prochaine étape

Dans la suite, nous allons apprendre à coder notre première page HTML.
Nous verrons comment créer une page simple contenant du texte, des images et
des liens.
Puis, nous ajouterons du style grâce au CSS pour lui donner un aspect
professionnel.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 13 / 208

Introduction à HTML5 et organisation du travail

Avant de commencer à coder, il est important d’apprendre à organiser nos dossiers

de travail.
Sur le bureau, nous créons un dossier nommé HTML5 à l’intérieur d’un dossier
principal appelé Frontend Course.
Ce dossier principal contiendra plusieurs sous-parties : HTML5, CSS3, Bootstrap,
JavaScript et jQuery.
Cette organisation hiérarchique permet de retrouver facilement chaque ressource et
de structurer le projet comme un professionnel.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 14 / 208

Création du projet et configuration dans Visual Studio Code

Nous ouvrons le dossier Frontend Course dans Visual Studio Code.

Dans la barre latérale gauche, nous pouvons voir nos dossiers : actuellement, le
dossier HTML5 est vide.
Nous créons un sous-dossier intitulé Cours 1 - Introduction à HTML5.
À l’intérieur de ce dossier, nous ajoutons un fichier nommé [Link], qui sera
notre page principale.
Remarque : dans le développement web, le fichier principal s’appelle généralement
[Link]. C’est le premier fichier que le navigateur charge lorsqu’un site est ouvert.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 15 / 208

Structure de base d’un fichier HTML

Dans Visual Studio Code, tapez ! puis appuyez sur la touche Tab. Cela génère
automatiquement la structure de base d’une page HTML5.
Cette structure contient plusieurs éléments essentiels :
<!DOCTYPE html> : indique au navigateur que le document est écrit en
HTML5.
<html> : englobe tout le contenu de la page web.
<head> : section contenant les informations techniques sur la page (titre,
encodage, description, liens vers CSS, etc.).
<body> : section visible par l’utilisateur, contenant le texte, les images, les
boutons, etc.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 16 / 208

Le rôle du navigateur web

Le navigateur (Chrome, Firefox, Edge...) interprète le code HTML et affiche le

contenu d’une manière lisible et esthétique.
Pour voir le code d’une page web existante, faites un clic droit sur la page et
sélectionnez « Inspecter » ou « Afficher le code source ».
Vous verrez alors les balises <html>, <head> et <body>, ainsi que les feuilles de
style CSS.
Chaque site web (par exemple Google, Wikipédia, OpenClassrooms) repose sur
cette même structure HTML.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 17 / 208

Les principales balises HTML

Les éléments de base d’un fichier HTML :

<html lang="en"> : définit la langue principale du site (lang signifie language).
<meta charset="UTF-8"> : indique le jeu de caractères utilisé, ici UTF-8,
permettant d’afficher correctement les lettres accentuées et les caractères spéciaux.
<meta name="viewport" content="width=device-width,
initial-scale=1.0"> : rend le site responsive, c’est-à-dire adapté à la taille de
tous les écrans (ordinateur, tablette, mobile).
<title> : affiche le titre de la page dans l’onglet du navigateur.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 18 / 208

La balise <body> et le contenu de la page

Tout ce que vous voyez à l’écran - texte, images, liens, boutons - appartient à la
balise <body>.
Par exemple :
<p>Bonjour tout le monde</p> affiche un paragraphe.
<br> (break) permet de sauter une ligne.
<h1> à <h6> définissent les titres du plus grand au plus petit.
Les navigateurs lisent le code HTML de haut en bas : si aucune balise ne précise
un saut de ligne, les éléments s’affichent à la suite.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 19 / 208

Exemple simple : écrire et afficher du texte

Dans le fichier [Link], écrivez :

<p > Bienvenue sur mon premier site web ! </ p >
<p > Universite Mohammed V - Economie et Gestion </ p >

Enregistrez le fichier et ouvrez-le dans le navigateur.

Vous verrez le texte s’afficher, preuve que votre fichier HTML est bien interprété.
Astuce : pour insérer un saut de ligne, ajoutez simplement la balise <br>.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 20 / 208

Résumé des éléments étudiés

Head : contient les informations générales du site (langue, encodage, titre,

meta-données, liens CSS...).
Body : contient tout le contenu visible pour l’utilisateur.
Doctype : informe le navigateur que le document est de type HTML5.
Meta : donne des informations techniques (encodage, compatibilité, affichage
responsive...).
En résumé : comprendre ces balises est la clé pour bien démarrer le développement web.
Le reste s’appuie toujours sur cette structure de base.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 21 / 208

Complément : Bootstrap et jQuery

Bootstrap est un framework combinant HTML, CSS et JavaScript.

Il permet de créer des sites responsives (adaptés à toutes les tailles d’écran) avec
des composants préconstruits : boutons, barres de navigation, formulaires, etc.
jQuery est une bibliothèque JavaScript qui simplifie l’écriture du code.
Le mot « jQuery » vient de « JavaScript Query » : c’est une façon plus rapide et
concise d’écrire des scripts.
Ces outils facilitent le développement web et réduisent la quantité de code
nécessaire.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 22 / 208

Création d’un nouveau dossier et d’un fichier HTML

Nous créons un nouveau dossier appelé Paragraphe dans le dossier HTML5.

À l’intérieur, nous ajoutons un fichier [Link].
Ce fichier contiendra notre premier test avec la balise de paragraphe.
En ouvrant le fichier dans un navigateur (Chrome, Opera, etc.), nous verrons
comment le code HTML s’affiche.
Rappel : l’extension .html indique qu’il s’agit d’un fichier interprétable par un
navigateur web.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 23 / 208

Découverte de la balise <p> : les paragraphes

La balise <p> (pour « paragraph ») sert à écrire un paragraphe de texte.

Exemple :

<p > Gestion academie </ p >

<p > Bienvenue dans le cours HTML </ p >

Chaque paragraphe s’affiche automatiquement à la ligne suivante.

En revanche, si vous écrivez sans balise <p>, le texte apparaîtra à la suite sur la
même ligne.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 24 / 208

Différence entre les balises block et inline

La balise <p> est une balise de type block :

elle occupe toute la largeur disponible,
et commence toujours sur une nouvelle ligne.
Exemple :

<p > Paragraphe 1 </ p >

<p > Paragraphe 2 </ p >

À l’inverse, certaines balises comme <span> ou <a> sont inline, c’est-à-dire qu’elles
ne forcent pas de retour à la ligne.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 25 / 208

Exercice : afficher un texte d’exemple

Pour tester un long paragraphe, on utilise une expression spéciale : lorem ipsum.
Dans Visual Studio Code, tapez lorem et appuyez sur Tab : un texte aléatoire sera
généré.
Ce texte n’a pas de sens, mais il sert à tester la mise en page.
Exemple :

<p > Lorem ipsum dolor sit amet , consectetur adipiscing

elit ... </ p >

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 26 / 208

Structure de base et configuration initiale

Dans Visual Studio Code, nous ouvrons notre fichier [Link].

En tapant ! puis Tab, nous générons automatiquement la structure HTML5 de
base.
Nous modifions ensuite la balise <title> pour indiquer le titre du document, par
exemple :

< title > Les Titres en HTML5 </ title >

En enregistrant et ouvrant le fichier dans un navigateur, notre page est maintenant

prête pour afficher du contenu.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 27 / 208

Les balises de titre : <h1> à <h6>

Les titres en HTML sont définis à l’aide des balises <h1> à <h6>.
<h1> représente le titre principal et <h6> le plus petit niveau de sous-titre.
Exemple :

< h1 > Ceci est un titre H1 </ h1 >

< h2 > Ceci est un titre H2 </ h2 >
< h3 > Ceci est un titre H3 </ h3 >
< h4 > Ceci est un titre H4 </ h4 >
< h5 > Ceci est un titre H5 </ h5 >
< h6 > Ceci est un titre H6 </ h6 >

Chaque niveau de titre possède une taille de texte différente, automatiquement

définie par le navigateur.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 28 / 208

Importance des balises de titre pour le référencement

Les balises <h1> à <h6> ne servent pas seulement à rendre le texte plus grand ou
plus gras.
Elles ont une valeur sémantique : elles indiquent aux moteurs de recherche la
structure du contenu.
Exemple :
<h1> : sujet principal de la page (ex. “Les indicateurs économiques”)
<h2> : sous-section (ex. “Le PIB et la croissance”)
Contrairement à la balise <b> (qui ne fait qu’épaissir le texte), les balises H ont un
rôle hiérarchique dans le référencement (SEO).

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 29 / 208

Exemple complet de structure hiérarchique

< h1 > Analyse economique mondiale </ h1 >

<p > Introduction generale au contexte economique
international . </ p >
< h2 > Les economies emergentes </ h2 >
<p > Les pays en developpement connaissent une croissance
soutenue ... </ p >
< h3 > Cas du Maroc </ h3 >
<p > Le Maroc connait une evolution notable du secteur
tertiaire ... </ p >

Ce type de hiérarchisation rend la lecture fluide et améliore la compréhension du

contenu, autant pour les lecteurs que pour les moteurs de recherche.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 30 / 208

Balises de type block et inline

Une balise block (comme <h1> ou <p>) occupe toute la largeur de la page et
commence toujours sur une nouvelle ligne.
Une balise inline (comme <b> ou <span>) reste dans la même ligne sans retour
automatique.
Exemple :

<p > <b > Texte en gras </ b > dans le meme paragraphe . </ p >

Les balises de titre sont toujours de type block.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 31 / 208

La balise <hr> : ligne horizontale

La balise <hr> signifie horizontal rule (ligne horizontale).

Elle permet de séparer visuellement des sections de contenu.
Exemple :

< h2 > Chapitre 1 : Introduction </ h2 >

<p > Texte du chapitre ... </ p >
< hr >
< h2 > Chapitre 2 : Analyse </ h2 >
<p > Texte du chapitre suivant ... </ p >

Le résultat ressemble à un article de blog : titre, texte, ligne de séparation, puis

nouveau titre.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 32 / 208

Création d’une page type « blog »

En combinant <h1> à <h6>, <p> et <hr>, on peut créer une structure d’article
simple :

< h1 > Economie et societe </ h1 >

<p > Analyse des interactions entre croissance et emploi . <
/p>
< hr >
< h2 > Les politiques budgetaires </ h2 >
<p > Le role de la depense publique dans la relance
economique ... </ p >

Le navigateur ajoute automatiquement une barre de défilement si le contenu

dépasse la hauteur de la page.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 33 / 208

Commentaires en HTML

Il est souvent utile d’ajouter des notes internes au code sans qu’elles soient visibles
à l’écran.
Pour cela, on utilise les commentaires HTML :

<! -- Ceci est un commentaire -- >

Le contenu placé entre <!– et –> est ignoré par le navigateur.

Exemple :

<! -- Informations reservees au developpeur -- >

< h3 > Indicateurs economiques </ h3 >
<p > Analyse trimestrielle de la production nationale ... </
p>

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 34 / 208

Application pratique

Ouvrez votre éditeur de code et créez une page contenant :

plusieurs niveaux de titres,
des paragraphes explicatifs,
des lignes horizontales entre les sections,
et un ou deux commentaires internes.
Enregistrez votre fichier [Link] et ouvrez-le dans votre navigateur.
Vous venez de créer votre première page hiérarchisée et commentée en HTML5.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 35 / 208

Résumé de la leçon

Nous avons appris :

à utiliser les balises <h1> à <h6> pour structurer un document,
à distinguer les balises block et inline,
à insérer des lignes de séparation avec <hr>,
et à écrire des commentaires invisibles avec <!– –>.
Ces éléments forment la base de toute mise en page web.
Prochaine étape : nous apprendrons à ajouter des liens (<a>) et des images
(<img>) dans une page web.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 36 / 208

Texte en italique et mise en valeur du contenu

Pour signaler un mot ou une expression importante, on utilise deux balises proches
:
<i> : met le texte en italique sans signification particulière.
<em> : met le texte en italique tout en indiquant qu’il a une
importance sémantique.
Exemple :

< h2 > Bus a proximite </ h2 >

<p > Les lignes < em > 28 </ em > et < em > 30 </ em > passent a
proximite . </ p >

Les moteurs de recherche considèrent <em> comme un élément important pour le

référencement.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 37 / 208

Sauts de ligne et paragraphe unique

Lorsque vous souhaitez séparer les lignes dans un même paragraphe, utilisez la
balise <br> :

<p >
Ligne < em > 28 </ em > < br >
Ligne < em > 30 </ em > < br >
Ligne < em > 36 </ em >
</ p >

<br> signifie break (saut de ligne) et n’a pas besoin d’être fermée.
Cette balise est utile pour aligner verticalement plusieurs éléments dans un même
paragraphe.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 38 / 208

Mettre en valeur un texte important : <b> et <strong>

Pour mettre un mot en gras, deux balises existent :

<b> : met le texte en gras visuellement.
<strong> : met le texte en gras et indique une importance sémantique.
Exemple pour afficher un numéro de téléphone :

<p > < strong > Telephone : </ strong > +90 555 555 55 55 </ p >

La balise <strong> permet aux moteurs de recherche d’identifier les informations

clés (ici le téléphone).

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 39 / 208

Résultat final de la page de contact

<! DOCTYPE html >

< html lang = " fr " >
< head >
< meta charset = " UTF -8 " >
< title > Page de contact </ title >
</ head >
< body >
< h1 > Contact </ h1 >
< h2 > Adresse </ h2 >
<p > Quartier , Rabat </ p >

< h2 > Bus a proximite </ h2 >

<p > Lignes < em > 28 </ em > et < em > 30 </ em > </ p >

<p > < strong > Telephone : </ strong > +90 555 555 55 55 </ p >
</ body >
</ html >

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 40 / 208

Explications complémentaires

Les balises HTML peuvent être imbriquées les unes dans les autres (ex. <p>
contenant un <strong> ou un <em>).
Les balises de type block (<h1>, <p>, etc.) occupent toute la largeur.
Les balises inline (<em>, <strong>, etc.) se placent à l’intérieur des lignes.
La combinaison de ces deux types permet de structurer et styliser le texte avant
même l’ajout du CSS.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 41 / 208

Introduction : les balises <meta> en HTML5

Maintenant, nous allons approfondir la compréhension des balises <meta>.

Ces balises, situées à l’intérieur de la section <head>, servent à fournir des
informations sur la page web : encodage, description, mots-clés, compatibilité, etc.
Autrement dit, la balise <meta> décrit les métadonnées du site - des informations
invisibles pour l’utilisateur mais essentielles pour les navigateurs et moteurs de
recherche.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 42 / 208

La structure de base d’une page HTML avec balises <meta>

<! DOCTYPE html >

< html lang = " fr " >
< head >
< meta charset = " UTF -8 " >
< meta name = " viewport " content = " width = device - width ,
initial - scale =1.0 " >
< title > UM5 Academy - Cours en ligne </ title >
</ head >
< body >
</ body >
</ html >

La première ligne indique l’encodage UTF-8 (pour les caractères spéciaux).

La balise viewport rend la page responsive - adaptée aux écrans de téléphones,
tablettes et ordinateurs.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 43 / 208

Le rôle de la balise viewport

Avant le design responsive, on devait créer une version web et une version mobile
distinctes : [Link] pour le site normal et [Link] pour la
version mobile.
Grâce à la balise <meta name="viewport">, une seule page peut s’adapter à tous
les appareils :

< meta name = " viewport "

content = " width = device - width , initial - scale =1.0 " >

Cette balise indique au navigateur d’ajuster la mise à l’échelle du contenu selon la

largeur de l’écran de l’appareil.
Cela permet d’obtenir un design responsive (adaptatif), aujourd’hui indispensable
en conception web.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 44 / 208

Les balises <meta> pour le référencement (SEO)

Les balises <meta> sont aussi essentielles pour le référencement sur Google et
autres moteurs de recherche.
Exemple complet :

< meta name = " title " content = " UM5 Academy - Cours en ligne
">
< meta name = " description "
content = " UM5 Academy propose des cours gratuits et
interactifs en ligne . " >
< meta name = " keywords "
content = " education , cours , mathematiques ,
apprentissage , UM5 Academy " >

Ces informations ne s’affichent pas sur la page, mais aident les moteurs à
comprendre le contenu et le but du site.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 45 / 208

Exemple : description et mots-clés d’un site

Balise description : Décrit le contenu de la page (s’affiche souvent dans les

résultats de recherche).

< meta name = " description "

content = " Banque X - Gardez votre argent en toute
securite . " >

Balise keywords : Liste les mots-clés pertinents liés au contenu.

< meta name = " keywords "

content = " banque , credit , transfert , epargne ,
securite " >

Une bonne sélection de mots-clés améliore la visibilité de votre site dans les
recherches associées.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 46 / 208

Balise <meta http-equiv> : actualisation automatique

Certaines balises <meta> possèdent des attributs spécifiques comme http-equiv.

Exemple :

< meta http - equiv = " refresh " content = " 5 " >

Cette instruction indique au navigateur de rafraîchir la page toutes les 5 secondes.

Pratique pour certaines pages dynamiques, mais déconseillée pour la plupart des
sites modernes.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 47 / 208

Résumé : principaux attributs des balises <meta>

charset : définit le jeu de caractères (UTF-8 recommandé).

name : type de métadonnée (description, keywords, etc.).
content : valeur ou texte associé à l’attribut name.
http-equiv : instructions au navigateur (ex. rafraîchissement, cache, etc.).
Ces attributs rendent le site plus interprétable pour les moteurs de recherche et
navigateurs.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 48 / 208

Les attributs HTML (HTML Attributes)

Chaque balise HTML possède ses propres attributs (ou properties).

Exemple :

<p align = " center " > Texte centrer </ p >

Ici, align est un attribut de la balise <p>. Cependant, cet attribut est aujourd’hui
déprécié (non recommandé en HTML5).
On utilise désormais le CSS pour aligner le texte :

<p style = " text - align : center ; " > Texte centrer </ p >

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 49 / 208

Autres attributs et compatibilités

Les attributs varient selon les balises :

width, height - pour ajuster la taille d’un élément.
border, style - pour les bordures et styles intégrés.
alt - pour les images (description alternative).
Exemple :

< img src = " logo . png " width = " 200 " alt = " Logo de l ’
entreprise " >

Chaque attribut donne à la balise une propriété ou un comportement

supplémentaire.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 50 / 208

Attributs obsolètes et HTML5

Certains attributs comme align, bgcolor ou border étaient utilisés dans les
anciennes versions de HTML.
Aujourd’hui, ces propriétés doivent être gérées via le CSS.
Exemple :

<! -- Ancienne methode -- >

<p align = " center " > Texte </ p >

<! -- Methode moderne -- >

<p style = " text - align : center ; " > Texte </ p >

HTML5 favorise la séparation entre le contenu (HTML) et la présentation (CSS).

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 51 / 208

Introduction : insérer une image en HTML

Bonjour à tous ! Dans cette leçon, nous allons apprendre à insérer des images dans
une page web.
Les images apparaissent toujours dans la partie <body> du document HTML.
Pour afficher une image, on utilise la balise <img> (abréviation de image).
Exemple minimal :

< img src = " photo . jpg " >

L’attribut src (source) indique le chemin ou le lien vers le fichier image.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 52 / 208

L’attribut src : la source de l’image

Si l’image se trouve dans le même dossier que le fichier [Link], il suffit

d’indiquer son nom :

< img src = " photo . jpg " >

Si elle se trouve dans un sous-dossier, on doit indiquer le chemin :

< img src = " img / cover . jpg " >

Si le chemin est incorrect, l’image ne s’affiche pas - d’où l’importance de toujours

vérifier le bon dossier.
Bonnes pratiques :
Organiser les images dans un dossier dédié (img/)
Utiliser des noms clairs et sans espaces.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 53 / 208

L’attribut alt : texte alternatif

L’attribut alt (alternative text) sert à afficher un texte si l’image ne peut pas être
chargée :

< img src = " img / introuvable . jpg " alt = " Image non trouvee " >

Il est aussi essentiel pour le référencement (SEO) et l’accessibilité.

Si l’image est manquante, le navigateur affiche ce texte à la place :
Image non trouvée
Les robots des moteurs de recherche (appelés “crawlers”) lisent les attributs alt
pour comprendre le contenu visuel de la page.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 54 / 208

L’attribut title : infobulle au survol

L’attribut title affiche un texte lorsqu’on survole l’image avec la souris :

< img src = " img / laptop . jpg "

alt = " Ordinateur portable "
title = " Coder est un plaisir ! " >

Lors du survol, une infobulle s’affiche : “Coder est un plaisir !”

Le title améliore également le SEO : il décrit le contexte de l’image.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 55 / 208

Ajuster la taille : attributs width et height

On peut modifier la taille d’une image à l’aide des attributs width (largeur) et
height (hauteur).

< img src = " img / photo . jpg " width = " 300 " height = " 200 " >

Ces valeurs peuvent être exprimées en :

pixels (px) - taille fixe
pourcentage (%) - taille relative à l’écran
Exemple responsive :

< img src = " img / photo . jpg " width = " 50% " >

L’image occupera 50

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 56 / 208

Préserver les proportions de l’image

Si on fixe à la fois width et height, l’image peut être déformée.

Pour garder les proportions correctes, il vaut mieux ne modifier qu’une seule
dimension.
Exemple :

< img src = " img / coding . jpg " width = " 50% " >

Le navigateur ajuste automatiquement la hauteur pour préserver le ratio original.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 57 / 208

Bonnes pratiques pour l’organisation des images

Stockez toutes vos images dans un dossier img/.

Exemple d’arborescence :

/ projet
| - - index . html
| - - style . css
\ - - img /
| - - cover . jpg
| - - laptop . jpg
\ - - person - coding . jpg

Cela permet :
de garder un projet organisé,
d’éviter les erreurs de chemin (src),
et de simplifier la maintenance du site.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 58 / 208

Exemple complet d’utilisation des attributs

< img src = " img / laptop . jpg "

alt = " Ordinateur portable sur un bureau "
title = " Une femme en train de coder "
width = " 150 "
height = " 150 " >

src : chemin de l’image.

alt : description alternative.
title : infobulle au survol.
width/height : taille en pixels ou en pourcentage.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 59 / 208

Les images en ligne (hébergées sur Internet)

On peut aussi afficher des images provenant du Web à l’aide d’une URL :

< img src = " https :// example . com / images / sunflower . jpg "
alt = " Fleur de tournesol " >

L’image sera chargée directement depuis Internet.

Les images libres de droits peuvent être trouvées sur des sites comme :
Unsplash - [Link]
Pexels - [Link]
Veillez toujours à respecter les licences d’utilisation.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 60 / 208

Attributs dépréciés et CSS moderne

Certains anciens attributs comme border sont désormais obsolètes :

<! -- Ancienne methode -- >

< img src = " img / photo . jpg " border = " 1 " >

<! -- Methode moderne -- >

< img src = " img / photo . jpg " style = " border : 1 px solid black ; " >

Le style des images doit être géré via le CSS, pas directement dans la balise HTML.
Exemple de style moderne :

img {
border - radius : 8 px ;
width : 50%;
}

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 61 / 208

Résumé de la leçon

Nous avons appris à :

insérer des images avec <img>,
utiliser les attributs src, alt, title, width et height,
intégrer des images locales ou externes,
et appliquer les bonnes pratiques d’organisation et de SEO.
Ces notions constituent la base pour le design web avant l’introduction du CSS
responsive.
Prochaine leçon : ajout d’hyperliens avec la balise <a>.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 62 / 208

Introduction : créer un lien en HTML

Bonjour à tous ! Dans cette leçon, nous allons apprendre à créer des liens (ou
hyperliens) en HTML.
Les liens permettent de :
naviguer entre différentes pages d’un même site ;
accéder à d’autres sites web ;
ou même ouvrir des documents, des images ou des vidéos.
Pour insérer un lien, on utilise la balise <a> (de anchor, ancre).

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 63 / 208

La balise <a> et son attribut principal href

La syntaxe de base est la suivante :

<a href = " https :// www . google . com " > Aller sur Google </ a >

L’attribut href (hypertext reference) indique l’adresse vers laquelle le lien redirige.
Exemple :
Aller sur Google
Si vous cliquez sur ce texte, le navigateur ouvre la page indiquée dans href.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 64 / 208

Bien définir les adresses web

Lorsque vous liez vers un site externe, veillez à inclure le protocole complet :

http :// --> site non securise

https :// --> site securise ( SSL )

Exemple correct :

<a href = " https :// www . google . com " > Google </ a >

Si vous omettez le protocole, le lien risque de ne pas fonctionner.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 65 / 208

Créer un lien interne entre deux pages HTML

On peut relier plusieurs fichiers d’un même site, par exemple :

index . html
contact . html

Exemple :

<a href = " contact . html " > Page de contact </ a >

En cliquant sur le lien, le navigateur charge la page [Link].

C’est ainsi qu’on construit la navigation d’un site (menu, pied de page, etc.).

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 66 / 208

L’attribut target : ouvrir un lien dans un nouvel onglet

Par défaut, le lien s’ouvre dans le même onglet.

Pour l’ouvrir dans un nouvel onglet, on utilise :

<a href = " contact . html " target = " _blank " >
Page de contact
</ a >

target signifie « cible » et la valeur _blank indique « nouvel onglet ».

C’est utile pour garder votre page ouverte tout en accédant à un autre contenu.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 67 / 208

Associer un lien à une image

Vous pouvez rendre une image cliquable en plaçant la balise <img> à l’intérieur de
<a> :

<a href = " contact . html " target = " _blank " >
< img src = " img / code . jpg " width = " 50% " >
</ a >

En cliquant sur l’image, le navigateur ouvre la page de contact.

On peut également combiner les deux : une image cliquable + un texte sous
l’image :

<a href = " https :// www . google . com " >
< img src = " img / logo . jpg " width = " 100 " >
<p > Aller sur Google </ p >
</ a >

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 68 / 208

Combiner liens, textes et autres balises

Tout élément placé entre les balises <a> et </a> devient cliquable :

<a href = " https :// www . google . com " >
<p > Aller sur Google </ p >
</ a >

Cela inclut :
du texte (<p>),
des images (<img>),
des icônes ou des boutons (<button>).
L’attribut href fonctionne uniquement avec la balise <a> - il ne s’applique pas aux
autres balises.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 69 / 208

Attributs principaux de la balise <a>

href : l’adresse de destination du lien.

target : détermine où ouvrir le lien.
title : texte d’aide (infobulle au survol).
Exemple :

<a href = " https :// unsplash . com "

target = " _blank "
title = " Banque d ’ images gratuites " >
Decouvrir Unsplash
</ a >

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 70 / 208

Bonnes pratiques

Toujours vérifier que les liens fonctionnent et ne mènent pas vers des pages vides.
Utiliser https:// pour garantir la sécurité.
Éviter les adresses absolues inutiles dans les projets locaux.
Organiser les fichiers HTML dans des dossiers clairs :

Exemple d’organisation
/ site
| - - index . html
| - - contact . html
\ - - about . html

Les liens internes deviennent alors simples à gérer.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 71 / 208

Résumé de la leçon

Nous avons appris à :

créer des liens avec la balise <a>,
utiliser les attributs href, target et title,
créer des liens internes et externes,
et rendre des images ou du texte cliquables.
Ces notions sont fondamentales pour construire une navigation complète dans un
site web.
Prochaine leçon : découverte des listes (<ul>, <ol>, <li>).

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 72 / 208

Introduction aux listes en HTML

Bonjour à tous ! Dans cette leçon, nous allons apprendre à créer des listes en
HTML.
Les listes permettent d’organiser des informations sous forme d’éléments
hiérarchiques.
Il existe deux types principaux de listes :
Listes non ordonnées : les éléments ne sont pas numérotés.
Listes ordonnées : les éléments sont numérotés (1, 2, 3) ou
alphabétiques (a, b, c).

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 73 / 208

Les listes non ordonnées : <ul>

Une liste non ordonnée est définie par la balise <ul> (unordered list).
Chaque élément de la liste est défini par la balise <li> (list item).

< h2 > Langages de programmation </ h2 >

< ul >
< li >C </ li >
< li >C ++ </ li >
< li >C # </ li >
</ ul >

Résultat : une liste à puces (•) s’affiche automatiquement devant chaque élément.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 74 / 208

Les listes ordonnées : <ol>

Une liste ordonnée est définie par la balise <ol> (ordered list).
Les éléments sont numérotés automatiquement.

< h2 > Langages du front - end </ h2 >

< ol >
< li > HTML5 </ li >
< li > CSS3 </ li >
< li > Bootstrap </ li >
</ ol >

Résultat : 1. HTML5 2. CSS3 3. Bootstrap

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 75 / 208

Personnaliser le style des listes avec CSS

On peut modifier le style d’affichage des listes à l’aide de CSS.

Exemple :

ul {
list - style - type : square ;
}

Valeurs possibles :
disc - puce ronde (par défaut)
circle - cercle vide
square - carré plein
none - sans puce

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 76 / 208

Changer le style d’une liste ordonnée

La balise <ol> accepte l’attribut type pour changer la numérotation.

< ol type = " A " >

< li > Introduction </ li >
< li > Methodologie </ li >
< li > Resultats </ li >
</ ol >

Valeurs possibles :
1 → chiffres (1, 2, 3)
A → majuscules (A, B, C)
a → minuscules (a, b, c)
I → chiffres romains (I, II, III)
i → romains minuscules (i, ii, iii)

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 77 / 208

Modifier le point de départ d’une liste

L’attribut start permet de définir la valeur de départ d’une liste ordonnée.

< ol start = " 5 " >

< li > HTML </ li >
< li > CSS </ li >
</ ol >

Résultat : 5. HTML 6. CSS

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 78 / 208

Lister dans l’ordre inverse

L’attribut reversed affiche les éléments dans un ordre décroissant.

< ol reversed >

< li > Premier </ li >
< li > Deuxieme </ li >
< li > Troisieme </ li >
</ ol >

Résultat : 3. Premier 2. Deuxième 1. Troisième

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 79 / 208

Créer des listes imbriquées (listes dans des listes)

Une liste peut contenir une sous-liste à l’intérieur d’un <li>.

< ul >
< li > HTML5
< ul >
< li > Anciennes versions </ li >
< li > Nouvelles balises </ li >
</ ul >
</ li >
< li > CSS3 </ li >
</ ul >

Résultat : • HTML5 Anciennes versions Nouvelles balises • CSS3

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 80 / 208

Résumé des attributs importants

Pour les listes non ordonnées (<ul>) :

type : forme des puces (disc, circle, square)
Pour les listes ordonnées (<ol>) :
type : format de numérotation (1, A, a, I, i)
start : numéro de départ
reversed : ordre décroissant
Les listes sont très utilisées pour les menus, les formulaires, ou les sections de
synthèse.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 81 / 208

Résumé de la leçon

Nous avons appris à :

Créer des listes ordonnées et non ordonnées.
Personnaliser leur apparence via les attributs HTML et CSS.
Imbriquer plusieurs listes.
Modifier l’ordre et le style de numérotation.
Ces connaissances permettent de structurer proprement l’information sur une page
web.
Prochaine leçon : Les tableaux HTML et leurs attributs.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 82 / 208

Application pratique : Créer une page de film

Dans cette séance, nous allons réaliser une application complète pour réviser nos
connaissances en HTML.
L’objectif est de recréer une page présentant une liste de films classés par
catégories.
Cette activité permet de combiner :
les balises de listes (<ul>, <ol>, <li>)
les balises sémantiques (<strong>, <em>, <ins>, <del>)
et l’insertion d’images avec <img>.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 83 / 208

Structure générale du document

Le fichier HTML contient :

un titre principal (<h1>Film Liste</h1>)
une liste principale pour les catégories (<ul>)
des sous-listes ordonnées pour les films (<ol>)
des images illustrant chaque catégorie

< h1 > Film Listes </ h1 >

< ul type = " circle " >
< li > Comedie </ li >
< li > Horreur </ li >
< li > Romance </ li >
< li > < del > Thriller </ del > </ li >
</ ul >

La balise <del> permet de barrer le texte d’une catégorie supprimée.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 84 / 208

Listes imbriquées : catégories et films

Chaque catégorie contient sa propre liste ordonnée (<ol>) :

< li > < strong > Comedie </ strong > < em > films </ em >
< ol type = " a " >
< li > Gad el Maleh </ li >
< li >G . O . R . A . </ li >
< li > Mariage et Organisation </ li >
< li >A . R . O . G </ li >
</ ol >
</ li >

<strong> = texte important (gras sémantique)

<em> = texte accentué (italique)

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 85 / 208

Les attributs des listes ordonnées

L’attribut type définit le style de numérotation :

1 → chiffres
A / a → lettres majuscules ou minuscules
I / i → chiffres romains
L’attribut start fixe le numéro de départ.

< ol type = " I " start = " 5 " >

< li > Prestige </ li >
< li > La force </ li >
< li > Matrix </ li >
</ ol >

Résultat : V, VI, VII.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 86 / 208

Balises sémantiques pour le sens du contenu

HTML propose des balises pour donner un sens au texte :

<strong> texte important Comédie
<em> texte mis en relief films
<ins> texte ajouté récemment La La Land
<del> texte supprimé Thriller
Ces balises améliorent la compréhension du contenu par les moteurs de recherche (SEO)
et les lecteurs d’écran.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 87 / 208

Insertion d’images avec attributs alt et title

Pour illustrer chaque catégorie, on utilise la balise <img> :

< img src = " img / comedie . jpg " width = " 50% "
alt = " Image non trouvee pour la categorie Comedie "
title = " Comedie Films " >

src : chemin de l’image

width : taille relative (
alt : texte affiché si l’image est manquante
title : texte au survol

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 88 / 208

Structure HTML complète du projet

< h1 > Liste de films </ h1 >

< ul type = " circle " >

< li >
< img src = " img / comedie . jpg " width = " 50% "
alt = " Image non trouvee pour Comedie "
title = " Comedie Films " >
< strong > Comedie </ strong > < em > films </ em >
< ol type = " a " >
< li > Film 1 </ li >
< li > Film 2 </ li >
< li > Film 3 </ li >
< li > Film 4 </ li >
</ ol >
</ li >

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 89 / 208

Structure HTML complète du projet: Suite

< li >
< img src = " img / horreur . jpg " width = " 50% "
alt = " Image non trouvee pour Horreur "
title = " Films d ’ horreur " >
< strong > Horreur </ strong > < em > films </ em >
< ol type = " I " start = " 5 " >
< li > Film 1 </ li >
< li > Film 2 </ li >
< li > Film 3 </ li >
</ ol >
</ li >

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 90 / 208

Suite : Catégories Romance et Thriller

< li >
< img src = " img / romance . jpg " width = " 50% "
alt = " Image non trouvee pour Romance "
title = " Un film " >
< strong > Romance </ strong > < em > films </ em >
< ol type = " 1 " start = " 8 " >
< li > La La Land </ li >
< li > Sing Street </ li >
< li > < ins > Les avantages d ’ etre un timide </ ins > </ li >
</ ol >
</ li >

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 91 / 208

Suite : Catégories Romance et Thriller

< li >
< img src = " img / thriller . jpg " width = " 50% "
alt = " Image introuvable pour Thriller "
title = " Aucune image trouvee pour la categorie
thriller " >
< del > Thriller Film </ del >
</ li >

</ ul >

Chaque liste est clairement hiérarchisée : <ul> → <li> → <ol> → <li>.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 92 / 208

Résultat final attendu

Une page structurée avec :

un titre principal et quatre catégories de films,
une image pour chaque catégorie,
des listes hiérarchiques bien ordonnées,
des effets visuels (gras, italique, barré, souligné).
L’ensemble respecte les bonnes pratiques HTML et les principes d’accessibilité.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 93 / 208

Résumé et bonnes pratiques

Créez des listes imbriquées en structurant correctement vos balises.

Utilisez les balises sémantiques pour donner du sens au contenu.
Pensez à l’attribut alt pour chaque image (accessibilité).
Testez toujours vos chemins d’images et vos attributs (type, start).
Le code doit rester lisible et indenté correctement.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 94 / 208

Conclusion du TP

Ce TP a permis de consolider les notions de :

structure de page HTML,
hiérarchie des listes,
sémantique du contenu,
et intégration d’images.
Ces compétences seront approfondies dans les prochaines séances avec le CSS,
pour personnaliser la mise en page et les styles visuels.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 95 / 208

Introduction aux tableaux en HTML

Un tableau permet d’organiser les données sous forme de lignes et de colonnes.

Chaque croisement forme une cellule.
Structure générale :
<table> → tableau
<tr> → ligne (row)
<th> → cellule d’en-tête
<td> → cellule de données

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 96 / 208

Structure de base d’un tableau

< table border = " 1 " >

< tr >
< th > Equipe </ th >
< th > Victoires </ th >
</ tr >
< tr >
< td > Equipe Maroc </ td >
< td >2 </ td >
</ tr >
</ table >

Un tableau à deux lignes et deux colonnes.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 97 / 208

Exemple complet : Classement de football

< table border = " 1 " >

< thead >
< tr bgcolor = " yellow " >
< th > Equipe </ th >
< th > Victoires </ th >
< th > Matchs nuls </ th >
< th > Defaites </ th >
< th > Points </ th >
</ tr >
</ thead >

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 98 / 208

Suite: Exemple complet : Classement de football
< tbody >
< tr bgcolor = " lightblue " >
< td > club de football </ td > < td >4 </ td > < td >2 </ td > < td >1 </ td
> < td > 14 </ td >
</ tr >
< tr bgcolor = " lightblue " >
< td > Achraf Hakimi </ td > < td >3 </ td > < td >3 </ td > < td >1 </ td > <
td > 12 </ td >
</ tr >
< tr bgcolor = " turquoise " >
< td > Souissi </ td > < td >2 </ td > < td >4 </ td > < td >1 </ td > < td > 10 </
td >
</ tr >
< tr bgcolor = " turquoise " >
< td > Transport </ td > < td >2 </ td > < td >3 </ td > < td >2 </ td > < td >8 <
/ td >
</ tr >
</ tbody >
</ table >
H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 99 / 208
Attributs width, height et border

< table border = " 1 " width = " 100% " height = " 300 px " >

border → ajoute une bordure au tableau

width → définit la largeur (en % ou px)
height → définit la hauteur
Ces attributs sont désormais gérés via le CSS moderne.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 100 / 208

Fusionner des cellules : colspan et rowspan

< table border = " 1 " >

< tr >
< th > Rouge </ th >
< th colspan = " 2 " > Bleu + Vert </ th >
</ tr >
< tr >
< td bgcolor = " red " > </ td >
< td bgcolor = " blue " > </ td >
< td bgcolor = " green " > </ td >
</ tr >
</ table >

colspan fusionne horizontalement les cellules.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 101 / 208

Exemple combiné : colspan et rowspan

< table border = " 1 " >

< tr >
< td bgcolor = " red " colspan = " 2 " height = " 50 px " > </ td >
< td bgcolor = " green " rowspan = " 2 " > </ td >
</ tr >
< tr >
< td bgcolor = " red " > </ td >
< td bgcolor = " red " > </ td >
</ tr >
</ table >

rowspan fusionne verticalement les cellules.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 102 / 208

Résumé du cours

Structure : <table> → <thead> → <tbody> → <tr> → <th>/<td>

Attributs utiles : border, width, height, bgcolor
Fusion de cellules : colspan, rowspan
Style moderne : utiliser le CSS pour la mise en forme

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 103 / 208

Conclusion

Vous savez désormais créer, structurer et personnaliser un tableau HTML.

Ces notions sont essentielles pour présenter des données de manière claire et
accessible.
Dans la prochaine leçon, nous verrons comment styliser ces tableaux avec le CSS.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 104 / 208

Structure hiérarchique d’un tableau HTML
<table>

<thead> <tbody>

<tr> <tr> <tr>

<th> <td>
<th> <td> <td>
(cellule d’en-tête) (donnée)

Lecture de la hiérarchie :
<table> contient deux sections principales : <thead> (en-tête) et <tbody>
(corps).
Chaque section contient des lignes <tr> (table row), elles-mêmes composées
de cellules : <th> pour les titres et <td> pour les données.
H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 105 / 208
Objectif de la séance

Construire un emploi du temps hebdomadaire en HTML à l’aide des balises de

tableau.
Appliquer les notions de <thead>, <tbody>, <tr>, <th>, et <td>.
Découvrir les attributs colspan (fusion de colonnes) et rowspan (fusion de lignes).
Créer une structure de tableau claire et responsive.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 106 / 208

Analyse du tableau

Le tableau de notre emploi du temps comporte :

8 lignes (heures de la journée),
6 colonnes (jour + 5 jours ouvrables),
un en-tête contenant les jours de la semaine.
Certaines cellules fusionnent horizontalement ou verticalement pour représenter
des plages horaires continues.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 107 / 208

Structure de base du tableau

< table border = " 1 " >

< thead >
< tr >
< th > Programme </ th >
< th > Lundi </ th >
< th > Mardi </ th >
< th > Mercredi </ th >
< th > Jeudi </ th >
< th > Vendredi </ th >
</ tr >
</ thead >
< tbody >
<! -- Les lignes horaires seront ajoutees ici -- >
</ tbody >
</ table >

Cette base définit les jours et la structure générale du tableau.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 108 / 208

Ajout des heures et des activités

< tr >
< td > 08:00 </ td >
< td colspan = " 5 " style = " text - align : center ; " > Preparation </ td
>
</ tr >

< tr >
< td > 09:00 - 15:00 </ td >
< td colspan = " 5 " style = " text - align : center ; " > Ecole </ td >
</ tr >

Chaque ligne représente une plage horaire. Les cellules fusionnées (colspan="5")
indiquent une activité couvrant plusieurs jours.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 109 / 208

Fusion verticale avec rowspan

< tr >
< td > 15:00 - 18:00 </ td >
< td rowspan = " 3 " style = " text - align : center ; " > Maison </ td >
< td rowspan = " 2 " style = " text - align : center ; " > Cours privee </
td >
< td rowspan = " 3 " style = " text - align : center ; " > Rencontre </ td >
< td rowspan = " 2 " style = " text - align : center ; " > Cours privee </
td >
< td rowspan = " 2 " style = " text - align : center ; " > Sortie </ td >
</ tr >

rowspan fusionne les cellules verticalement : par exemple, « Maison » occupe trois
lignes consécutives.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 110 / 208

Suite du corps du tableau

< tr >
< td > 18:00 - 21:00 </ td >
<! -- Les autres cellules sont deja fusionnees -- >
</ tr >

< tr >
< td > 21:00 - 23:00 </ td >
< td colspan = " 2 " style = " text - align : center ; " > Resolution de
tests </ td >
</ tr >

Lorsqu’une cellule est déjà fusionnée au-dessus, on saute sa déclaration dans les lignes
suivantes.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 111 / 208

Dernière ligne : fin de journée

< tr >
< td > 23:00 - 00:00 </ td >
< td colspan = " 5 " style = " text - align : center ; " > Repos / Sommeil
</ td >
</ tr >

Ici, colspan="5" permet d’occuper toute la largeur du tableau pour indiquer la fin de
journée.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 112 / 208

Tableau complet simplifié

< table border = " 1 " width = " 100% " >
< thead >
< tr bgcolor = " # f7e98e " >
< th > Programme </ th > < th > Lundi </ th > < th > Mardi </ th >
< th > Mercredi </ th > < th > Jeudi </ th > < th > Vendredi </ th >
</ tr >
</ thead >

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 113 / 208

Suite: Tableau complet simplifié
< tbody >
< tr > < td > 08:00 </ td > < td colspan = " 5 " align = " center " >
Preparation </ td > </ tr >
< tr > < td > 09:00 -15:00 </ td > < td colspan = " 5 " align = " center " >
Ecole </ td > </ tr >
< tr > < td > 15:00 -18:00 </ td >
< td rowspan = " 3 " align = " center " > Maison </ td >
< td rowspan = " 2 " align = " center " > Cours privee </ td >
< td rowspan = " 3 " align = " center " > Rencontre </ td >
< td rowspan = " 2 " align = " center " > Cours privee </ td >
< td rowspan = " 2 " align = " center " > Sortie </ td > </ tr >
< tr > < td > 18:00 -21:00 </ td > </ tr >
< tr > < td > 21:00 -23:00 </ td > < td colspan = " 2 " align = " center " >
Tests </ td > </ tr >
< tr > < td > 23:00 -00:00 </ td > < td colspan = " 5 " align = " center " >
Repos </ td > </ tr >
</ tbody >
</ table >

Ce tableau affiche un emploi du temps complet avec fusions verticales et horizontales.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 114 / 208
Analyse de la fusion des cellules

Colspan fusionne des colonnes (horizontalement).

Rowspan fusionne des lignes (verticalement).
Lorsqu’une cellule fusionnée occupe plusieurs lignes, les cellules de la même
colonne dans les lignes suivantes doivent être omises.
Pour garder la structure cohérente, il est essentiel d’analyser le tableau ligne par
ligne avant de coder.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 115 / 208

Bonnes pratiques pour les tableaux

Utiliser des couleurs ou alignements uniquement pour clarifier la lecture.

Préférer le CSS (border, text-align, background-color) aux attributs HTML
obsolètes.
Commencer toujours par le squelette général (<thead>, <tbody>).
Éviter les fusions excessives qui compliquent la maintenance du code.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 116 / 208

Conclusion

Vous savez maintenant créer un emploi du temps HTML complet.

Vous avez appris à combiner les notions de colspan, rowspan, et d’alignement du
texte.
Ces techniques sont essentielles pour tout projet web intégrant des données
tabulaires.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 117 / 208

Visualisation : Fusion de cellules dans un tableau HTML

C1 C2 C3 C4
Colspan : fusion horizontale
L1 A colspan=2

rowspan=2
(plusieurs colonnes)

L2 B C D Rowspan : fusion verticale

(plusieurs lignes)
L3 E F G

Ce schéma montre comment certaines cellules d’un tableau HTML peuvent être
fusionnées horizontalement (colspan) ou verticalement (rowspan) pour former des
blocs.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 118 / 208

Introduction : Éléments Block et Inline en HTML

En HTML, chaque balise (ou élément) définit la manière dont le contenu est
affiché à l’écran.
Tous les éléments HTML appartiennent à l’une des deux catégories suivantes :
Éléments Block (block-level elements)
Éléments Inline (inline elements)
Comprendre cette distinction est fondamental : elle détermine la structure et la
disposition du contenu.
Une fois ce principe compris, l’organisation des autres balises HTML devient
intuitive.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 119 / 208

Les éléments Block (block-level elements)

Un élément block occupe toute la largeur disponible dans son conteneur.

Il commence toujours sur une nouvelle ligne.
Les éléments block servent à structurer la page web.

Exemples d’éléments block :

<div>, <h1> ... <h6>, <p>, <form>
<ul>, <ol>, <li>, <table>

Propriété visuelle :
Chaque bloc s’étend d’un bord à l’autre du navigateur.
Le contenu suivant s’affiche en dessous.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 120 / 208

Exemple pratique : Élément Block

Code HTML :

< div style = " border :1 px solid red ; " > Bloc 1 </ div >
<p style = " border :1 px solid blue ; " > Paragraphe </ p >
< ul style = " border :1 px solid green ; " >
< li > Element 1 </ li >
< li > Element 2 </ li >
</ ul >

Affichage obtenu :
Chaque élément commence sur une nouvelle ligne.
Les bordures colorées montrent que chaque bloc occupe toute la largeur.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 121 / 208

Les éléments Inline (inline elements)

Un élément inline s’affiche dans le flux du texte.

Il occupe uniquement la largeur nécessaire à son contenu.
Il ne provoque pas de saut de ligne.

Exemples d’éléments inline :

<span>, <a>, <b>, <strong>, <i>, <em>
<img>, <input>, <label>

Exemple :

<p > Bonjour , <b > comment </ b > allez - <i > vous </ i > ? </ p >

Les balises <b> et <i> restent sur la même ligne que le texte.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 122 / 208

Comparaison : Block vs Inline

Propriété Élément Block Élément Inline

Largeur 100% du conteneur Taille du contenu
Saut de ligne Oui Non
Peut contenir Des block et inline Seulement des inline
Exemples <div>, <p>, <ul> <span>, <a>, <b>

Cette distinction structure la page HTML et influence directement la mise en forme CSS.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 123 / 208

Combinaison des éléments Block et Inline

Code HTML :

< div style = " border :1 px solid gray ; padding :10 px ; " >
< h2 > Le Vallon des Lys </ h2 >
<p > Un roman de < span style = " color : red ; " > Balzac </ span >
souvent citee
comme un <b > chef -d ’ oeuvre </ b > du romantisme . </ p >
</ div >

Analyse :
Le conteneur <div> (bloc) englobe un titre et un paragraphe.
Les balises <span> et <b> (inline) formatent des parties du texte à l’intérieur du
bloc.
Cela permet de combiner structure (block) et style local (inline).

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 124 / 208

Bonnes pratiques : Block et Inline

Utiliser les éléments block pour structurer la page (titres, paragraphes, sections,
formulaires. . . ).
Employer les éléments inline pour formater le texte à l’intérieur des blocs.
Éviter d’imbriquer un block dans un inline :
<div><span>Texte</span></div>
<span><div>Texte</div></span>
Respecter la sémantique :
<strong> exprime l’importance → texte fort.
<b> met simplement le texte en gras (visuel).

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 125 / 208

Conclusion : Comprendre la logique Block vs Inline

Les éléments Block structurent la page verticalement.

Les éléments Inline organisent le contenu horizontalement à l’intérieur des blocs.
Un site HTML bien structuré repose sur la hiérarchie :

<body> → <div> → <p> → <span> → texte

Maîtriser cette différence est essentiel pour comprendre le modèle de rendu et

aborder le CSS.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 126 / 208

Différence visuelle : Block vs Inline

Élément Block : <div> ou <p>

Occupe toute la largeur du conteneur (saut de ligne après)

↓
Inline 1 Inline 2 Inline 3

Les éléments inline

occupent uniquement leur contenu

Lecture : Les éléments block s’empilent verticalement, tandis que les éléments inline
s’alignent horizontalement sur la même ligne.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 127 / 208

Exercice : Identifier Block ou Inline

1 <p>Bonjour le monde !</p> → Élément Block

2 <span style="color:red;">Texte rouge</span> → Élément Inline
3 <ul><li>Element 1</li><li>Element 2</li></ul> → <ul>=Block,
<li>=Block
4 <a href="#">Lien</a> → Élément Inline
5 <div><img src="[Link]"></div> → <div>=Block, <img>=Inline
Astuce : Si l’élément force le suivant à aller à la ligne → c’est un Block. S’il s’aligne sur
la même ligne → c’est un Inline.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 128 / 208

La balise <div> : Définition et rôle

La balise <div> signifie Division (en anglais : division).

Elle sert à diviser une page HTML en plusieurs zones distinctes.
On peut la considérer comme une boîte conteneur ou un bloc de structure.
Cette balise est très utilisée pour organiser les parties d’une page web : en-tête,
contenu, pied de page, etc.

Remarque : <div> est un élément block : il occupe toute la largeur disponible et

commence sur une nouvelle ligne.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 129 / 208

Exemple simple d’un bloc <div>

Code HTML :

< div style = " border : 1 px solid black ; " >

Ceci est un bloc de contenu .
</ div >

Résultat à l’écran :
Un cadre noir apparaît sur toute la largeur de la page.
Le contenu est isolé dans une zone bien délimitée.

Propriétés :
<div> contient d’autres balises (textes, images, formulaires. . . ).
On peut appliquer un style CSS (taille, couleur, marges, bordures. . . ).

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 130 / 208

Structure hiérarchique : parent et enfant

En HTML, les balises s’imbriquent selon une structure hiérarchique :

<body> → <div> → <img>

Lorsqu’on définit une taille en pourcentage, elle est relative à l’élément parent.
Exemple :
body = 100% de la largeur du navigateur.
div = 50% du body → moitié de l’écran.
img = 100% du div → pleine largeur du bloc parent.

Principe clé : Les tailles relatives s’évaluent toujours par rapport au parent direct.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 131 / 208

Exemple : Largeur relative des blocs

Code HTML :

< body style = " width : 100%; " >

< div style = " width : 50%; border : 1 px solid blue ; " >
< img src = " image . jpg " style = " width : 100%; " >
</ div >
</ body >

Analyse :
Le body occupe toute la largeur du navigateur.
Le div prend 50% de cette largeur (moitié de page).
L’image s’ajuste à 100% du div.

Résultat : Le div agit comme un conteneur parent contrôlant la taille de ses enfants.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 132 / 208

Exemple : Galerie d’images avec <div>

Code HTML :

< div style = " width :50%; text - align : center ; border :1 px solid
gray ; " >
< h2 > Une femme codeuse </ h2 >
< img src = " images / femme_code . jpg " style = " width :100%; " >
<p > Photo par X </ p >
</ div >

Explication :
Le div contient un titre, une image et une légende.
Le style text-align:center; centre tout le contenu.
L’image s’adapte automatiquement à la taille du bloc parent.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 133 / 208

Créer plusieurs divisions indépendantes

Code HTML :

< div style = " width :50%; border :1 px solid black ; " >
< h3 > Photo 1 : Femme codeuse </ h3 >
< img src = " img / femme . jpg " style = " width :100%; " >
</ div >

< div style = " width :50%; border :1 px solid black ; " >
< h3 > Photo 2 : Ordinateur portable </ h3 >
< img src = " img / laptop . jpg " style = " width :100%; " >
</ div >

Résultat attendu :
Les deux divisions s’affichent l’une en dessous de l’autre.
Chaque bloc agit comme une zone de contenu distincte.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 134 / 208

Pourquoi utiliser <div> ?

La balise <div> est un outil essentiel de mise en page et de structure.

Elle permet de :
Diviser logiquement une page web.
Appliquer un style spécifique à chaque section.
Réutiliser des modèles (galerie, cartes, sections...).
Typiquement utilisée pour :
<header> - en-tête
<footer> - pied de page
<aside> - barre latérale
<section> - section de contenu

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 135 / 208

Règle clé : largeur relative et hiérarchie

La taille d’un élément dépend toujours de son parent.

Exemple :
body = 100% de la fenêtre.
div = 50% du body → moitié de la page.
img = 100% du div → pleine largeur du bloc.
Cette hiérarchie permet de concevoir des pages modulaires et adaptatives.

À retenir : <div> = élément block, base de toute structure de mise en page web.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 136 / 208

Structure hiérarchique : <body> → <div> → <img> →
texte

<body> : structure principale du document

<div> : section ou zone de contenu

<img> : image insérée

Texte, titre, description...

Chaque niveau hérite des dimensions et styles de son parent :

body (100%) → div (50%) → img (100% du div).

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 137 / 208

Exercice : Quelle balise contrôle quelle zone ?
Code HTML donné :
< body style = " width :100%; " >
< div style = " width :50%; border :1 px solid blue ; " >
< h3 > Photo d ’ un ordinateur </ h3 >
< img src = " img / laptop . jpg " style = " width :100%; " >
<p > Credit : John Doe </ p >
</ div >
</ body >

Questions pour les étudiants :

1 Quelle est la largeur totale du <div> ? (par rapport au body)
2 Quelle largeur occupe l’image ? (par rapport au div)
3 Si le body est réduit à 80% de la fenêtre, quelle sera la largeur finale de l’image ?
4 Quelle balise ajoute la bordure bleue autour de l’ensemble du contenu ?

Réponses attendues :
<div> → 50
<img> → 100
H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 138 / 208
Introduction à la balise <form>

La balise <form> est utilisée pour créer un formulaire interactif sur une page web.
Elle permet à l’utilisateur de saisir et d’envoyer des informations vers un serveur.
C’est la base des systèmes de :
connexion et inscription (login, register),
recherche, sondages, contact, etc.
Le traitement des données est ensuite effectué par un langage back-end (ex. PHP,
Python, [Link]).

Remarque : Dans ce cours, nous nous concentrons sur la partie front-end du formulaire
(apparence et structure).

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 139 / 208

Structure générale d’un formulaire

Syntaxe de base :

< form action = " traitement . php " method = " POST " >
<! -- elements du formulaire -- >
</ form >

Explications :
action : définit la page ou l’URL vers laquelle les données seront envoyées.
method : définit le mode d’envoi :
GET → les données apparaissent dans l’URL.
POST → les données sont transmises de manière cachée.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 140 / 208

Les champs de saisie : <input>
Exemple :

< form >

< input type = " text " name = " username " placeholder = " Votre nom "
>
< input type = " password " name = " password " placeholder = " Votre
mot de passe " >
< input type = " submit " value = " Envoyer " >
</ form >

Analyse :
type="text" → champ texte.
type="password" → masque la saisie.
type="submit" → bouton d’envoi.
placeholder → texte indicatif grisé à l’intérieur du champ.
name → identifiant du champ utilisé côté serveur.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 141 / 208

placeholder vs value

Exemple :

< input type = " text " name = " prenom " placeholder = " Entrez votre
prenom " >
< input type = " text " name = " prenom " value = " Ali " >

Différence :
placeholder : texte indicatif temporaire (n’est pas envoyé au serveur).
value : valeur par défaut, visible et transmise lors de l’envoi.

En résumé : placeholder = aide visuelle, value = donnée réelle envoyée.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 142 / 208

Champs password et radio

Exemple :

< form >

Nom : < input type = " text " name = " nom " > < br >
Mot de passe : < input type = " password " name = " mdp " > < br >
Sexe :
< input type = " radio " name = " gender " value = " homme " > Homme
< input type = " radio " name = " gender " value = " femme " > Femme
</ form >

Explication :
Les boutons radio ayant le même name forment un groupe.
L’utilisateur ne peut en sélectionner qu’un seul à la fois.
La valeur transmise au serveur correspond au value du bouton choisi.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 143 / 208

Listes déroulantes : <select> et <option>

Exemple :

< form >

< label for = " ville " > Ville : </ label >
< select name = " ville " id = " ville " >
< option value = " kastamonu " > Kastamonu </ option >
< option value = " sivas " > Sivas </ option >
</ select >
</ form >

Remarques :
L’attribut value est la donnée envoyée au serveur.
Le texte entre les balises <option> est ce que voit l’utilisateur.
Si on choisit “Sivas”, le serveur reçoit : ville=sivas.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 144 / 208

Méthodes d’envoi : GET et POST

1. Méthode GET
Les données sont visibles dans la barre d’adresse (ex. ?nom=Ali& mdp=1234).
Moins sécurisée mais utile pour les formulaires de recherche.
2. Méthode POST
Les données sont envoyées de manière cachée (non visibles dans l’URL).
Plus sécurisée et utilisée pour les connexions, inscriptions, paiements, etc.

Comparaison rapide :
GET POST
Visibilité Données dans l’URL Données cachées
Sécurité Faible Élevée
Utilisation typique Recherche, filtres Connexion, formu-
laires sensibles

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 145 / 208

L’attribut action et le bouton submit

Exemple :

< form action = " https :// www . google . com " method = " GET " >
< input type = " text " name = " q " placeholder = " Rechercher ... " >
< input type = " submit " value = " Envoyer " >
</ form >

Fonctionnement :
Lorsque l’utilisateur clique sur “Envoyer”, les données sont envoyées vers l’adresse
spécifiée dans action.
Le bouton submit déclenche l’envoi automatique du formulaire.
En résumé : Le couple action + submit permet le lien entre l’interface (front-end) et
le traitement (back-end).

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 146 / 208

Exercice : comprendre les données envoyées
Code HTML :
< form method = " GET " action = " serveur . php " >
< input type = " text " name = " user " value = " Ali " >
< input type = " password " name = " pass " value = " 1234 " >
< input type = " radio " name = " gender " value = " homme " checked >
Homme
< input type = " radio " name = " gender " value = " femme " > Femme
< input type = " submit " value = " Envoyer " >
</ form >

Questions :
1 Que contiendra l’URL après l’envoi ?
2 Quelle différence auriez-vous observée si la méthode était POST ?
3 Quelle valeur est réellement transmise pour le sexe ?
Réponses attendues :
[Link]?user=Ali & pass=1234& gender=homme
En POST, ces données seraient invisibles dans l’URL.
La valeur envoyée = contenu de l’attribut value.
H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 147 / 208
Application 4 : Formulaire d’inscription complet

Objectif : construire un formulaire HTML complet comprenant :

Champs texte (text),
Cases à cocher (checkbox),
Boutons radio (radio),
Liste déroulante (select + option),
Bouton d’envoi (submit).
Le but est de simuler un vrai formulaire d’inscription ou de contact.
L’application permet de réviser les balises HTML et la différence entre GET et POST.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 148 / 208

Structure de base du document HTML
Code de départ :

<! DOCTYPE html >

< html >
< head >
< title > Formulaire de contact </ title >
</ head >
< body >
< h2 > Formulaire d ’ inscription </ h2 >
< form action = " traitement . php " method = " POST " >
<! -- les champs viendront ici -- >
</ form >
</ body >
</ html >

Remarque :
Si aucun method n’est précisé, la méthode par défaut est GET.
Nous utilisons ici POST pour éviter l’affichage des données dans l’URL.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 149 / 208

Champs texte : nom et prénom

Exemple :

< label > Nom : </ label > < br >

< input type = " text " name = " nom " id = " nom "
placeholder = " Entrez votre nom " > < br > < br >

< label > Prenom : </ label > < br >

< input type = " text " name = " prenom " id = " prenom "
placeholder = " Entrez votre prenom " > < br > < br >

Explication :
type="text" → champ de saisie classique.
placeholder → texte d’aide visible avant saisie.
Les balises <br> permettent de passer à la ligne.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 150 / 208

Cases à cocher : sports favoris

Exemple :

<p > Sports favoris : </ p >

< input type = " checkbox " name = " sport1 " value = " football " >
Football < br >
< input type = " checkbox " name = " sport2 " value = " basketball " >
Basketball < br >
< input type = " checkbox " name = " sport3 " value = " volleyball " >
Volleyball < br > < br >

Explication :
L’utilisateur peut cocher plusieurs cases.
Chaque checkbox possède un value distinct.
Les valeurs cochées sont envoyées lors du clic sur submit.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 151 / 208

Boutons radio : sélection du genre

Exemple :

<p > Genre : </ p >

< input type = " radio " name = " gender " value = " homme " > Homme
< input type = " radio " name = " gender " value = " femme " > Femme < br > <
br >

Règle importante :
Tous les boutons d’un même groupe doivent partager le name identique.
Cela permet de sélectionner une seule option à la fois.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 152 / 208

Liste déroulante : question de sécurité

Exemple :

<p > Question de securite : </ p >

< label > Quelle est la capitale de la Turquie ? </ label > < br >
< select name = " security " >
< option value = " " > -- Choisissez une reponse -- </ option >
< option value = " ankara " > Ankara </ option >
< option value = " istanbul " > Istanbul </ option >
< option value = " izmir " > Izmir </ option >
</ select > < br > < br >

Analyse :
<select> crée la liste déroulante.
<option> définit chaque choix possible.
La valeur transmise au serveur correspond à l’attribut value.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 153 / 208

Bouton d’envoi du formulaire

Exemple :

< input type = " submit " value = "S ’ inscrire " >

Fonctionnement :
Le bouton submit envoie toutes les données du formulaire vers l’URL indiquée
dans action.
Si aucune méthode n’est précisée, l’envoi se fait en GET.
Pour des raisons de sécurité, on utilise généralement POST.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 154 / 208

Formulaire complet d’inscription
Code complet :
< form action = " traitement . php " method = " POST " >
< label > Nom : </ label > < br >
< input type = " text " name = " nom " placeholder = " Votre nom " > < br >
< br >

< label > Prenom : </ label > < br >

< input type = " text " name = " prenom " placeholder = " Votre prenom
" > < br > < br >

<p > Sports favoris : </ p >

< input type = " checkbox " name = " sport1 " value = " football " >
Football
< input type = " checkbox " name = " sport2 " value = " basketball " >
Basketball
< input type = " checkbox " name = " sport3 " value = " volleyball " >
Volleyball < br > < br >

<p > Genre : </ p >

< input type = " radio " nameLRIT,FSJES,
H. Belmajdoub
= " gender " value = " homme
UM5
" > Homme
December 1, 2025 155 / 208
Suite: Formulaire complet d’inscription

Code complet :

<p > Question de securite : </ p >

< select name = " security " >
< option value = " " > -- Choisissez une reponse -- </ option >
< option value = " ankara " > Ankara </ option >
< option value = " istanbul " > Istanbul </ option >
< option value = " izmir " > Izmir </ option >
</ select > < br > < br >

< input type = " submit " value = "S ’ inscrire " >
</ form >

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 156 / 208

Méthode GET vs POST dans l’exemple

Si la méthode = GET :
L’URL affichera les données : [Link]?nom=Ali & prenom=Yusuf &
gender=homme& security=ankara
Si la méthode = POST :
Les données ne s’affichent pas dans l’URL.
Plus sécurisée pour les mots de passe et données personnelles.

Règle générale :
GET POST
Sécurité Faible Élevée
Affichage dans l’URL Oui Non
Utilisation typique Recherche, filtres Formulaires, connex-
ions

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 157 / 208

Cycle de vie d’un formulaire HTML : du client au serveur

Utilisateur Saisie des données <form> rempli method=POST/GET Serveur

(Navigateur Web) + clic sur Submit (PHP, Python, etc.

Page de réponse
Retour au navigateur (succès / erreur)

Résumé : le navigateur envoie les don

la méthode POST ou GET. Le serveur int
de données, puis renvoie une réponse

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 158 / 208

Introduction : l’importance des couleurs

Les couleurs jouent un rôle central dans la conception des pages web :
Améliorer la lisibilité et l’esthétique,
Attirer l’attention de l’utilisateur,
Distinguer des sections ou éléments d’une page.
Dans une page HTML, les couleurs peuvent être appliquées à :
L’arrière-plan (background-color),
Le texte (color),
Les bordures ou les titres, etc.
La gestion moderne des couleurs s’effectue via CSS, plutôt que des attributs
HTML obsolètes.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 159 / 208

Ancienne méthode : l’attribut bgcolor

Exemple (HTML 4) :

< body bgcolor = " red " >

<p > Mon ancienne page coloree </ p >
</ body >

Résultat : L’arrière-plan de la page devient rouge.

À retenir :
bgcolor est aujourd’hui obsolète (non conforme HTML5).
Utiliser plutôt l’attribut style ou un fichier CSS.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 160 / 208

Méthode moderne : l’attribut background-color
Exemple avec CSS intégré :

< style >

body {
background - color : lightblue ;
}
</ style >

Autres exemples possibles :

background - color : red ;

background - color : green ;
background - color : blue ;

Résultat :
Le mot-clé anglais définit la couleur souhaitée.
HTML/CSS reconnaît environ 140 noms de couleurs standards.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 161 / 208

Modifier la couleur du texte : color

Exemple :

<p style = " color : tomato ; " > Mon texte est rouge - orange </ p >
<p style = " color : blue ; " > Mon texte est bleu </ p >
<p style = " color : green ; " > Mon texte est vert </ p >

Explication :
La propriété color modifie la couleur du texte.
Elle s’utilise souvent avec background-color pour améliorer le contraste.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 162 / 208

Définir les couleurs avec un code hexadécimal

Syntaxe :

<p style = " color : # FF0000 ; " > Rouge pur </ p >
<p style = " color : #00 FF00 ; " > Vert pur </ p >
<p style = " color : #0000 FF ; " > Bleu pur </ p >

Principe :
Chaque paire de caractères représente une composante de couleur :
Rouge = FF,
Green (vert) = 00,
Blue (bleu) = 00.
#000000 = noir, #FFFFFF = blanc.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 163 / 208

Le modèle RGB : mélange de rouge, vert et bleu

Exemple :

<p style = " background - color : rgb (255 , 0 , 0) ; " > Rouge </ p >
<p style = " background - color : rgb (0 , 255 , 0) ; " > Vert </ p >
<p style = " background - color : rgb (0 , 0 , 255) ; " > Bleu </ p >

Explications :
Chaque composante prend une valeur entre 0 et 255.
rgb(255, 255, 255) → blanc ; rgb(0, 0, 0) → noir.
Mélanger les valeurs permet d’obtenir des milliers de teintes.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 164 / 208

Le modèle RGBA : ajouter la transparence

Exemple :

<p style = " background - color : rgba (255 , 0 , 0 , 0.5) ; " >
Rouge a 50% de transparence
</ p >

Signification :
R, G, B : rouge, vert, bleu.
A : alpha (de 0 à 1) → contrôle la transparence.
0 = complètement transparent, 1 = complètement opaque.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 165 / 208

Comparer les différentes notations de couleur

Notation Exemple Résultat

Nom de couleur red Rouge
Hexadécimal #FF0000 Rouge
RGB rgb(255,0,0) Rouge
RGBA rgba(255,0,0,0.5) Rouge semi-transparent

Conclusion : Toutes ces notations sont équivalentes, mais RGBA est la plus flexible car
elle permet de gérer la transparence.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 166 / 208

Exercice pratique : testez vos couleurs
Consigne : Créez une page HTML avec un fond bleu clair et un texte en orange.
Exemple de code attendu :

<! DOCTYPE html >

< html >
< head >
< style >
body {
background - color : lightblue ;
color : orange ;
}
</ style >
</ head >
< body >
< h2 > Ma premiere page coloree </ h2 >
<p > Voici un texte sur un fond bleu clair ! </ p >
</ body >
</ html >

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 167 / 208

Modèle RGB expliqué visuellement

RGB = Red +
Green + Blue
rgb(255,0,128)
0–255 → rose magenta

0–255 R G

B
0–255

Combiner les trois composantes

crée des millions de couleurs.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 168 / 208

Introduction aux balises sémantiques (HTML5)

Les balises sémantiques donnent un sens à la structure du document HTML.

Elles aident les navigateurs, moteurs de recherche et outils d’accessibilité à
comprendre la page.
Objectif : décrire la fonction de chaque zone (en-tête, menu, contenu, pied de
page. . . ).

Exemples de balises sémantiques :

<header> → en-tête de page ou de section,
<nav> → menu de navigation,
<article> → contenu autonome (article, post. . . ),
<section> → section thématique,
<aside> → barre latérale (informations secondaires),
<footer> → pied de page.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 169 / 208

Structure générale d’une page HTML5
Exemple minimaliste :
<! DOCTYPE html >
< html lang = " fr " >
< head >
< meta charset = " UTF -8 " >
< title > Ma page HTML5 </ title >
</ head >
< body >

< header >

< h1 > Mon site web </ h1 >
<p > Logo + Barre de recherche </ p >
</ header >

< nav >

< ul >
< li > <a href = " # " > Accueil </ a > </ li >
< li > <a href = " # " > Articles </ a > </ li >
< li > <a href = " # " > Contact </ a > </ li >
</[Link] >
Belmajdoub LRIT,FSJES, UM5 December 1, 2025 170 / 208
Balise <header>

Utilisation :

< header >

< h1 > Mon logo </ h1 >
<p > Date : 9 octobre 2025 </ p >
< input type = " search " placeholder = " Rechercher ... " >
</ header >

Explications :
Zone d’en-tête visible en haut d’une page ou section.
Peut contenir un logo, un titre, une barre de recherche, etc.
À ne pas confondre avec la balise <head> (métadonnées).

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 171 / 208

Balise <nav>

Exemple :

< nav >

< ul >
< li > <a href = " index . html " > Accueil </ a > </ li >
< li > <a href = " about . html " >A propos </ a > </ li >
< li > <a href = " contact . html " > Contact </ a > </ li >
</ ul >
</ nav >

Fonction :
Contient les liens principaux du site.
Permet de structurer la navigation.
Améliore le référencement (SEO) et l’accessibilité.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 172 / 208

Balises <main>, <article> et <section>
Exemple :
< main >
< article >
< h2 >Qu ’ est - ce qu ’ un article ? </ h2 >
< section >
< h3 > Introduction </ h3 >
<p > Texte introductif ici ... </ p >
</ section >
< section >
< h3 > Contenu principal </ h3 >
<p > Texte detaillee ici ... </ p >
</ section >
</ article >
</ main >

Rôles :
<main> → contenu central du document.
<article> → bloc autonome pouvant exister indépendamment.
<section> → sous-partie logique
H. Belmajdoub
de l’article.
LRIT,FSJES, UM5 December 1, 2025 173 / 208
Balise <aside>

Exemple :

< aside >

< h3 > Articles recents </ h3 >
< ul >
< li > Les balises HTML5 </ li >
< li > Introduction a CSS </ li >
< li > Creer un programme </ li >
</ ul >
</ aside >

Fonction :
Contient du contenu complémentaire ou contextuel.
Exemple : publicité, liste d’articles, encadré d’information.
Peut être placé à droite ou à gauche du contenu principal.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 174 / 208

Balise <footer>

Exemple :

< footer >

<p >\ textcopyright 2025 MonSiteWeb . Tous droits reservees . <
/p>
<p > <a href = " confidentialite . html " > Politique de
confidentialitee </ a > </ p >
</ footer >

Fonction :
Zone de bas de page.
Contient souvent les mentions légales, le copyright, les liens sociaux.
Peut être utilisée dans un article ou dans toute la page.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 175 / 208

Pourquoi utiliser des balises sémantiques ?

Lisibilité accrue : le code est plus clair et structuré.

Référencement amélioré (SEO) : les moteurs de recherche comprennent mieux la
page.
Accessibilité : facilite la lecture par les lecteurs d’écran.
Maintenance simplifiée : plus facile à modifier et à styliser.

Avant HTML5 Avec HTML5

<div id="header"> <header>
Comparaison : <div id="menu"> <nav>
<div id="content"> <main> ou <article>
<div id="footer"> <footer>

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 176 / 208

Structure visuelle d’une page HTML5
<header> – Logo, barre de recherche

<nav> – Menu de navigation

<main> – Contenu principal

<article> – Article principal <aside> – Barre latérale

<footer> – Mentions légales

La structure sémantique rend la page

claire, hiérarchisée et accessible.
H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 177 / 208
Rappel et objectif

Les balises sémantiques (header, nav, main, article, section, aside, footer)
donnent un sens logique à la structure d’un site.
Aujourd’hui, nous approfondissons leur usage à travers un exemple pratique
complet.
Objectif : construire la structure HTML d’une page web typique avec logo, menu,
contenu, sidebar et pied de page.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 178 / 208

Balises sémantiques et référencement (SEO)

Les moteurs de recherche (Google, Bing, etc.) lisent le code HTML pour
comprendre le contenu d’un site.
L’utilisation correcte des balises sémantiques :
Améliore le classement du site (meilleur référencement).
Facilite la lecture automatique par les “robots” d’indexation.
Augmente la pertinence des résultats lors des recherches.
Exemple : une balise <time> permet d’indiquer explicitement une date ou une
heure à Google.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 179 / 208

La balise <time>

Exemple :

<p > Nous ouvrons a < time datetime = " 10:00 " > 10 h00 </ time >. </ p >
<p > Article publiee le < time datetime = " 2008 -02 -14 " > 14 fevrier
2008 </ time >. </ p >

Explications :
datetime contient la valeur “machine-lisible” de la date/heure.
L’affichage visuel ne change pas, mais les moteurs de recherche reconnaissent la
donnée comme temporelle.
Cela améliore l’indexation chronologique des articles (SEO).

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 180 / 208

Structure sémantique complète d’un site
Exemple HTML5 :
<! DOCTYPE html >
< html lang = " fr " >
< head >
< meta charset = " UTF -8 " >
< title > Mon site HTML5 </ title >
</ head >
< body >

< header >

< img src = " logo . png " alt = " Logo " width = " 80 " >
< h1 > Mon entreprise </ h1 >
< nav >
< ul >
< li > <a href = " # " > Accueil </ a > </ li >
< li > <a href = " # " > Services </ a > </ li >
< li > <a href = " # " >A propos </ a > </ li >
< li > <a href = " # " > Contact </ a > </ li >
</ ul >
</[Link] >
Belmajdoub LRIT,FSJES, UM5 December 1, 2025 181 / 208
Explication des éléments de la structure

<header> - En-tête du site : logo, nom, menu principal.

<nav> - Menu de navigation (liens internes).
<main> - Partie centrale du contenu visible.
<article> - Élément autonome (article, post, fiche produit. . . ).
<section> - Sous-partie logique à l’intérieur d’un article.
<aside> - Contenu secondaire (ex. “les plus lus”, “liens externes”).
<footer> - Pied de page : mentions légales, réseaux sociaux, copyright.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 182 / 208

Structure visuelle d’une page HTML5 complète
<header> – Logo et menu principal

<nav> – Liens de navigation

<main> – Contenu central de la page

<article> – Contenu principal (texte, produits) <aside> – Barre latérale (informati

<footer> – Mentions légales et liens sociaux

Les balises sémantiques décrivent la fonction de chaque zone

du H.
site – elles ne modifient pas le rendu
Belmajdoub visuel UM5
LRIT,FSJES, mais facilitent December 1, 2025 183 / 208
<div> vs balises sémantiques
Avant HTML5 :

< div id = " header " > </ div >

< div id = " menu " > </ div >
< div id = " content " > </ div >
< div id = " footer " > </ div >

Avec HTML5 :

< header > </ header >

< nav > </ nav >
< main > </ main >
< footer > </ footer >

Conclusion :
Les balises sémantiques remplacent les <div> génériques.
Elles rendent le code plus clair, accessible et mieux interprété par les moteurs de
recherche.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 184 / 208

Exercice pratique : compléter la structure
Consigne : Complétez le code HTML ci-dessous en plaçant les bonnes balises
sémantiques :
<! DOCTYPE html >
< html >
< body >

<! -- ... logo et menu ici ... -- >

<! -- ... contenu principal ici ... -- >

<! -- ... barre laterale ici ... -- >

<! -- ... pied de page ici ... -- >

</ body >

</ html >

Objectif : identifier le rôle de chaque zone d’une page web et choisir la balise la plus
adaptée.
H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 185 / 208
Introduction : le multimédia en HTML5

HTML5 permet d’intégrer directement des fichiers audio et vidéo sans plugin
externe (Flash, etc.).
Deux balises principales :
<audio> - pour le son,
<video> - pour la vidéo.
Ces balises offrent un contrôle natif (lecture, pause, volume, téléchargement. . . ).
Les formats les plus courants :
Audio : MP3, OGG, WAV,
Vidéo : MP4, WebM, Ogg.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 186 / 208

Ajouter un fichier audio

Balise de base :

< audio controls >

< source src = " sons / piano . mp3 " type = " audio / mp3 " >
Votre navigateur ne supporte pas la balise audio .
</ audio >

Explications :
controls affiche le lecteur (lecture/pause, volume, etc.).
source précise l’emplacement et le type du fichier.
Le texte entre les balises est affiché si le navigateur ne supporte pas l’audio.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 187 / 208

Intégrer plusieurs sons sur une même page

Exemple avec deux fichiers :

< audio controls >

< source src = " sons / piano . mp3 " type = " audio / mp3 " >
</ audio >

< audio controls >

< source src = " sons / guitare . mp3 " type = " audio / mp3 " >
</ audio >

Résultat : Deux lecteurs audio indépendants apparaissent, chacun avec ses propres
contrôles.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 188 / 208

Principaux attributs de <audio>

controls — affiche les boutons du lecteur.

autoplay — démarre automatiquement la lecture au chargement.
loop — relance automatiquement la lecture à la fin.
muted — démarre la lecture en mode muet.
Exemple :

< audio controls autoplay loop >

< source src = " sons / guitare . mp3 " type = " audio / mp3 " >
</ audio >

Remarque : L’option autoplay est souvent bloquée par les navigateurs pour éviter une
lecture automatique intrusive.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 189 / 208

Ajouter une vidéo dans une page HTML

Exemple de base :

< video controls width = " 600 " >

< source src = " videos / exemple . mp4 " type = " video / mp4 " >
Votre navigateur ne supporte pas la video HTML5 .
</ video >

Explications :
controls → affiche les boutons (lecture, pause, son, plein écran).
width → définit la largeur (en pixels ou en %).
source → indique le fichier vidéo et son type.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 190 / 208

Lecture automatique et boucle

Exemple :

< video controls autoplay loop muted width = " 400 " >
< source src = " videos / cours . mp4 " type = " video / mp4 " >
</ video >

Effets :
autoplay → la vidéo démarre immédiatement.
loop → redémarre automatiquement à la fin.
muted → démarre sans le son (souvent nécessaire pour autoplay).

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 191 / 208

Afficher plusieurs vidéos sur une même page

Exemple :

< video controls width = " 400 " >

< source src = " videos / cours1 . mp4 " type = " video / mp4 " >
</ video >

< video controls width = " 400 " >

< source src = " videos / cours2 . mp4 " type = " video / mp4 " >
</ video >

Résultat : Deux vidéos s’affichent l’une sous l’autre avec des contrôles indépendants.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 192 / 208

Formats supportés en HTML5
Audio :
MP3 — format le plus courant.
OGG — libre et open source.
WAV — qualité supérieure, fichiers lourds.

Vidéo :
MP4 (H.264) — format universel et performant.
WebM — libre et compatible avec Chrome/Firefox.
Ogg Theora — libre, mais moins répandu.

Astuce : Pour une compatibilité maximale, il est conseillé de fournir plusieurs formats :

< video controls >

< source src = " film . mp4 " type = " video / mp4 " >
< source src = " film . webm " type = " video / webm " >
</ video >

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 193 / 208

Exercice pratique : insérer un média
Structure de base :

<! DOCTYPE html >

< html >
< body >
< h2 > Ma page multimedia </ h2 >

<! -- Audio -- >

< audio controls >
< source src = " sons / musique . mp3 " type = " audio / mp3 " >
</ audio >

<! -- Video -- >

< video controls autoplay loop width = " 70% " >
< source src = " videos / presentation . mp4 " type = " video / mp4 "
>
</ video >
</ body >
</ html >

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 194 / 208

 ———————————————

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 195 / 208

Conclusion : audio et vidéo en HTML5

Les balises <audio> et <video> rendent l’intégration multimédia simple et

standardisée.
Les attributs controls, autoplay, loop, et muted offrent un controle précis.
Ces éléments sont compatibles avec le CSS et le JavaScript pour créer des
interfaces multimédia interactives.

Prochaine étape : styliser ces lecteurs avec CSS, puis les rendre dynamiques avec
JavaScript.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 195 / 208

Introduction : la balise <progress>

HTML5 introduit de nouvelles balises permettant d’ajouter des éléments interactifs

sans utiliser de scripts externes.
L’une d’entre elles est la balise <progress>, utilisée pour afficher une barre de
progression.
On la rencontre souvent :
lors du téléchargement ou du téléversement d’un fichier,
pendant l’installation d’un logiciel,
ou lors du chargement d’une tâche.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 196 / 208

Exemple : afficher une barre de progression

Code HTML :

< progress value = " 60 " max = " 100 " > </ progress >

Explications :
value indique la progression actuelle (ici 60).
max fixe la valeur maximale (ici 100).
Le navigateur affiche automatiquement une barre remplie à 60%.

Résultat visuel : Une barre horizontale indiquant l’avancement de 60%.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 197 / 208

Modifier dynamiquement la progression

Code HTML :

<p > Telechargement du rapport : </ p >

< progress id = " telechargement " value = " 30 " max = " 100 " > </
progress >

Pour changer la valeur (manuellement) :

< progress value = " 80 " max = " 100 " > </ progress >

Effet : la barre s’adapte instantanément selon la nouvelle valeur.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 198 / 208

Rendre la barre de progression dynamique avec JavaScript
Exemple complet :
<! DOCTYPE html >
< html >
< body >

< h3 > Chargement des donnees ... </ h3 >

< progress id = " barre " value = " 0 " max = " 100 " > </ progress >

< script >

let barre = document . getElementById ( " barre " ) ;
let avancement = 0;

let timer = setInterval (() = > {

if ( avancement >= 100) {
clearInterval ( timer ) ;
} else {
avancement += 10;
barre . value = avancement ;
}
} , 500) ;
H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 199 / 208
Pourquoi apprendre JavaScript ?

HTML → structure la page (contenu).

CSS → gère la présentation (style).
JavaScript → rend la page interactive et dynamique.

Exemples d’usage de JavaScript :

Mettre à jour une barre de progression en temps réel.
Afficher des alertes ou des messages interactifs.
Créer des menus déroulants, des carrousels, ou des tableaux dynamiques.

Conclusion : Aucune interface web moderne n’est complète sans JavaScript — c’est le
langage de la dynamique du web.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 200 / 208

Les trois piliers du développement web

CSS
HTML
Apparence et
Structure du contenu
mise en forme

HTML crée la structure, CSS embellit la présenta- JavaScript

tion, et JavaScript ajoute le comportement interactif. Dynamisme
et interaction

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 201 / 208

Visualisation : Barre de progression dynamique avec
JavaScript

HTML : Ja
<progress value="0" max="100"> met à jour va
mise à jour dynamique
affichage visuel

→ 100%
20%

Principe : La balise <progress> affiche une barre de charge-

ment. JavaScript modifie sa valeur en continu (value
= 0 → 100) pour simuler l’avancement d’un processus.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 202 / 208

Introduction : la balise <iframe>

L’élément <iframe> (inline frame) permet d’afficher une autre page HTML à
l’intérieur de la page actuelle.
Il est souvent utilisé pour :
intégrer une autre page web dans un site existant,
afficher des cartes Google Maps ou des vidéos YouTube,
ou encore importer des rapports internes ou formulaires externes.
Autrement dit, un iframe agit comme une « fenêtre » ouverte sur un autre
document.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 203 / 208

Intégrer une page HTML dans une autre

Code HTML :

< iframe src = " ../ autre_page / index . html "

width = " 100% " height = " 500 " >
</ iframe >

Explications :
src → indique le chemin de la page à afficher.
width → définit la largeur (ici 100% de l’écran).
height → définit la hauteur (ici 500 pixels).
Le contenu de la page appelée s’affiche directement dans la page principale.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 204 / 208

Intégrer une vidéo YouTube dans une page web

Étapes :
1 Ouvrez la vidéo sur YouTube.
2 Cliquez sur Partager → Intégrer.
3 Copiez le code <iframe> fourni par YouTube.

Code inséré dans votre page HTML :

< iframe width = " 100% " height = " 400 "
src = " https :// www . youtube . com / embed / abcd1234 "
title = " Video de demonstration "
frameborder = " 0 " allowfullscreen >
</ iframe >

Résultat : La vidéo YouTube est intégrée directement dans votre site web.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 205 / 208

Ajouter plusieurs vidéos avec légendes
Code HTML :

< h3 > Video 1 : Jeu de prediction </ h3 >

< iframe width = " 100% " height = " 400 "
src = " https :// www . youtube . com / embed / abcd1234 " >
</ iframe >

< br > < br >

< h3 > Video 2 : Tutoriel HTML5 </ h3 >

< iframe width = " 100% " height = " 400 "
src = " https :// www . youtube . com / embed / wxyz5678 " >
</ iframe >

Astuce :
Ajoutez des titres ou des paragraphes explicatifs (<h3> ou <p>) entre les vidéos.
Vous pouvez espacer les vidéos avec des balises <br> ou via le CSS.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 206 / 208

Avantages et bonnes pratiques

Avantages :
Permet d’intégrer facilement du contenu externe (vidéos, formulaires, rapports).
Allège le serveur : les vidéos restent hébergées sur YouTube.
Améliore l’interactivité du site sans programmation complexe.

Bonnes pratiques :
Toujours vérifier les dimensions (width / height) pour l’affichage responsive.
Ajouter title="" pour l’accessibilité.
Éviter de multiplier les iframes pour ne pas ralentir le chargement de la page.

H. Belmajdoub LRIT,FSJES, UM5 December 1, 2025 207 / 208

Schéma : fonctionnement d’un <iframe>
Page principale :
[Link]

insertion

Contenu affiché via <iframe>

chargement du contenu

Source externe :
autre_page.html ou
[Link]/embed/...

L’iframe
H. Belmajdoub agit comme uneLRIT,FSJES,
fenêtre permettant
UM5 d’afficher un con-
December 1, 2025 208 / 208