Elément 2:

TECHNOLOGIES DU WEB:
HTML & CSS

Année universitaire 2025-2026

 Objectifs de l’élément

01 02
02 02
03

 Comprendre le fonctionnement  Appliquer des styles CSS pour  Combiner HTML et CSS pour

du Web et des pages HTML améliorer l’apparence d’une produire une page claire et bien
 Créer et structurer une page web page Web. présentée.
avec HTML.
 Introduction
Le Web regroupe des millions d’applications accessibles en ligne,
créées pour informer, communiquer ou interagir avec les utilisateurs.
Leur développement repose sur deux parties : le front-end, qui gère ce
que l’utilisateur voit, et le back-end, qui traite la logique interne et les
données. Dans la partie front-end, on utilise notamment le HTML pour
construire la structure des pages affichées dans le navigateur.
Introduction au Web

1
Qu’est-ce que le Web ?

Le Web est un système qui permet d’accéder à des pages et services en ligne à
travers un navigateur. Ces pages sont reliées entre elles et offrent aujourd’hui du
contenu, de l’interaction et des applications complètes.

Une ressource web est :

 Fournie par un serveur web;
 Consultée grâce à un client web (navigateur web ou browser);
 Accessible via le protocole HTTP (ou HTTPS)
 Localisée grâce à une URL.
 Comment fonctionne le web? Architecture Client-Serveur

Généralités:
Client web: est l’appareil et le navigateur
utilisés par l’utilisateur pour accéder à une
page Web. Il envoie une requête
HTTP/HTTPS au serveur lorsqu’on saisit une
URL ou qu’on clique sur un lien.

Serveur web: est la machine qui reçoit les

requêtes envoyées par le client. Il traite la
demande, exécute les instructions
nécessaires et renvoie une page statique
ou dynamique.
 Les pages web peuvent être classées en deux types
principaux selon la façon dont leur contenu

Pages Web statiques

💡 Les pages web statiques présentent
un contenu fixe qui ne change pas en
fonction de l’utilisateur ou du temps.

1. Le navigateur demande une page

HTML.
[Link] serveur retrouve le fichier.
[Link] serveur renvoie la page telle quelle
au navigateur.
 Pages Web dynamiques

💡 Les pages web dynamiques génèrent leur

contenu automatiquement selon l’utilisateur, les
actions ou les données disponibles.

[Link] navigateur demande une page .php

[Link] serveur transmet la page à
l’interpréteur PHP.
[Link] code est exécuté et génère une page
HTML.
[Link] serveur renvoie la page HTML au
navigateur.
 Front-end vs Back-end
Les pages dynamiques impliquent généralement à la fois le front-end et le back-end,
il est important de distinguer les deux parties principales :

• Ce que l’utilisateur voit et avec quoi il interagit

Front-end (côté • Technologies : HTML, CSS, JavaScript, frameworks (React,
Angular, Vue)..
utilisateur)

• Logique interne, traitement des données, base de

Back-end (côté données

serveur) • Technologies : PHP, Python, Java, [Link], Databases

(MySQL, MongoDB)
 Le protocole HTTP
 HTTP (HyperText Transfer Protocol) est le protocole de communication à utiliser afin d’accéder
à une ressource web.
 HTTP est un protocole de communication client-serveur développé pour le web.
 HTTPS est la variante sécurisée de HTTP.
 Il existe d’autres protocoles internet tels que: FTP;Telnet…

URL
 Afin d’accéder à une ressource web, il faut connaître son URL.
 L’URL signifiant, (Uniform Resource Locator) « Localisateur uniforme de ressource » est une
chaîne de caractère utilisée pour désigner ou localiser une ressource web.
 L’URL est l’équivalent informel de l’adresse web.
Protocol
Exemple :
Serveur http -> [Link] URL
Les fondamentaux de HTML

2
 GÉNÉRALITÉS de HTML

Définition
💡 HTML (HyperText Markup Language) Le code HTML que vous allez écrire
un langage de balisage hypertext. détermine ce que doit être affiché sur la
HTML permet de créer des pages web page: du texte, des liens, des images,
qui prennent l’extension .html des listes, des tableaux, …
HTML définit le contenu de la page web
selon une structure.
Les versions de HTML?
• HTML 1.0 (1991) : basique, premières pages
web
• HTML 2.0 (1995) : formulaires, tables
• HTML 3.2 (1997) : styles, scripts simples, applets
• HTML 4.01 (1999) : séparation
contenu/présentation (CSS)
• HTML5 (2014) : multimédia, graphiques, API
modernes
 Création d’une page web statique:

1. Créer d’un fichier avec l’extension

.txt

2. Modifier l’extension .txt

par .html
Le fichier se transforme en une
page web
 Les balises en HTML

• Les balises HTML sont les éléments de base qui permettent de structurer et
organiser le contenu d’une page web. Chaque balise a une signification
particulière et encadre le contenu qu’elle contient.
• On peut distinguer deux types de balises:

Les balises en paires: Les balises orphelines (autofermantes):

Elles se distinguent par une balise ouvrante Ce genre de balises ne nécessitent pas de
(<balise>) et une autre fermante (</balise>) balises fermantes.
et entre les deux, on ajoute du texte ou Ce sont des balises qui servent le plus
d’autres balises. souvent à insérer un élément à un endroit
Exemple: précis (par exemple une image).
<title> ceci est un titre </title> Exemple:
 <title> indique le début du titre on peut écrire : <img> OU <img />
 </title> indique la fin du titre
La structure d’un fichier HTML

 Une page HTML suit une structure standard reconnue par tous les navigateurs
 Elle contient une partie informations (en-tête) et une partie contenu (corps de la page)

Structure :
Pour indiquer au navigateur que c’est une page web écrite en HTML5

Cette balise indique l'encodage des caractères utilisé dans votre fichier .html

la partie visible d’une page web. Tout le contenu affiché à l’écran — textes, images, liens…

la balise de fermeture de la section <body>

 La balise <meta>

 <meta> est une balise d’en-tête. Elle s’insère dans la balise <head>.
 Les balises <meta> offrent des métadonnées sur le document HTML les ne sont pas affichables sur la
page web.
 Les balises <meta> sont principalement utilisées pour apporter une description de la page web, des
mots-clés, l’auteur du document HTML, etc.
 Le but principal de ces métadonnées est d’aider le navigateur et surtout les moteurs de recherche à
comprendre, analyser et indexer correctement le contenu de la page.
 La balise <link>

 La balise <link> est un autre type de balise d’en-tête.

 Elle peut avoir plusieurs rôles qui dépendent de ses attributs.
 Pour le moment, nous allons l’utiliser pour insérer une icône à gauche du titre de la page web.

Exemple :
<link rel="icon" href= " Chemin d’[Link]" />
MISE EN FORME DU TEXTE

3
 Les balises de texte

Paragraphe: pour organiser son texte en paragraphe, on utilise la balise <p> .

• <p>indique le début du paragraphe;
• </p> indique la fin du paragraphe.
 Les balises de texte

Ligne Horizontale:
<hr>: afin de séparer certaines parties de votre document, vous pouvez insérer une ligne horizontale dans votre page.
• La balise <hr> possède des attributs:
 align: Permet d'aligner la ligne horizontale. Valeurs possibles : right, left, ou center;
 width : Spécifie la largeur de la ligne (en pixels ou % de la fenêtre);
 size : Epaisseur de la ligne (de 1 à 10);
 color : Spécifie la couleur de la ligne;
 noshade : pour annuler l'effet d'ombre
 <strong> </strong> : pour indiquer que votre texte est important. Son effet
visuel est de mettre le texte en gras.

<em> </em> : pour mettre un peu en valeur votre texte. L’effet visuel de cette
balise est de mettre le texte en italique.

<mark> </mark> : pour ressortir visuellement un extrait du texte, on veut le

distinguer (texte pertinent). Cette balise a pour effet de surligner le texte.
La mise en valeur
des caractères
<abbr> </abbr> : Pour ajouter une abréviation

<blockquote> </blockquote> : pour ajouter une citation à partir d’une autre

source.

<address> </address> : pour ajouter une adresse.

<small> </small> : pour ajouter un texte de petite taille.
La mise en forme des caractères

Balises de style du texte

<i> </i>: pour mettre le texte en italique

La police des caractères:
<b> </b>: cette balise met le texte en Gras
<u> </u>: cette balise souligne le texte La balise <font> </font> permet de spécifier
<strike> </strike>: pour barrer le texte. la police des caractères ainsi que la couleur et la
: affiche le texte en indice. taille.
: affiche le texte en exposant La balise <font> possède quelques attributs:
 face: pour déterminer le nom de la police (arial,
times, …);
 size: pour préciser la taille de la police (entre 1 et
7). 3 est la taille par défaut.
Exemple :  color: pour définir la couleur du texte (soit avec le
nom de la couleur ou la valeur hexadécimale
correspondante) “Cette balise n’est plus utilisée. Elle est
remplacée par le CSS.”
Exemple :
Listes et tableaux

4
 Les listes
Exemple :

Les listes ordonnées:

Les listes ordonnées sont délimitées par les

balises <ol>…</ol>
Un item (élément) d’une liste ordonnée est
introduit par la balise <li>

<ol type="1"> ... </ol> : chiffres 1, 2, 3…

<ol type="A"> ... </ol> : lettres majuscules A, B..
<ol type="a"> ... </ol> : lettres minuscules a, b, c…
<ol type="I"> ... </ol> : chiffres romains majuscules I, II, III…
<ol type="i"> ... </ol> : chiffres romains minuscules i, ii, iii…
 Les listes
Exemple :

Les listes non ordonnées:

Les listes non ordonnées (à puces) sont

délimitées par les balises <ul>…</ul>
Un item d’une liste à puce est introduit par
la balise <li>.

<ul type="disc"> <!-- point plein -->

<ul type="circle"> <!-- cercle vide -->
<ul type="square"> <!-- carré -->
 Les tableaux

Les tableaux sont utilisés pour une meilleur présentation et organisation d’informations.
 Création des tableaux:
o <table> </table> permet d’insérer un tableau.
o <caption> </caption> insère une légende. Elle accepte un attribut align (=top ou bottom)
o <tr> </tr> définit une ligne.
o <th> </th> définit l'en-tête de chaque colonne.
o <td> </td> définit une cellule.

Exemple :
 Les tableaux

 Alignement:

L'alignement des données s'obtient, en utilisant les attributs align pour l'alignement Horizontal
et valign pour l'alignement Vertical.
o Align = left (par défaut): les données sont alignées à gauche de la cellule (pour TD) ou de
toutes les cellules (pour TR).
o Align = right: les données sont alignées à droite de la cellule (pour TD) ou de toutes les
cellules (pour TR).
o Align = center: les données sont centrées à l'intérieur de la cellule (pour TD) ou de toutes les
cellules (pour TR).

o Valign = middle (par défaut): Les données sont centrées verticalement à l'intérieur de la
cellule (pour TD) ou de toutes les cellules (pour TR).
o Valign = top: Les données sont en haut de la cellule (pour TD) ou de toutes les cellules (pour
TR).
o Valign = bottom: Les données sont en bas de la cellule (pour TD) ou de toutes les cellules
(pour TR).
 Les tableaux

Exemple :

N.B: l’utilisation de tous ces attributs n’est plus supportée

par HTML5. Il vaut mieux les remplacer par les propriétés
de CSS.
 Les tableaux

 Fusionnement des lignes et des colonnes:

Les lignes et les colonnes peuvent êtres fusionnées avec les attributs rowspan et colspan. rowspan définit le
nombre de lignes couvertes par une cellule. colspan définit le nombre de colonnes couvertes par une cellule.
o Pour fusionner 2 cellules adjacentes sur une ligne: colspan=2 (TH ou TD).
o Pour fusionner 2 cellules adjacentes sur une colonne: rowspan=2 (TH ou TD).

Exemple :
 Les tableaux

Exemple :
 Les tableaux
 Mise en Forme:
Voici les Attributs de mise en page et d'espacement (valables pour <table> <td> et <th>)
o width : Spécifie la largeur du tableau ou d'une cellule, en pixels ou en pourcentage de la
fenêtre du navigateur.
o height : Spécifie la hauteur du tableau ou d'une cellule, en pixels ou en pourcentage.
o border : Spécifie la taille en pixels (par défaut 0; invisible) de la bordure du tableau.
o cellpadding : Spécifie l'espace en pixels entre la bordure et le contenu de la cellule.
o cellspacing : Spécifie l'espace en pixels entre les cellules du tableau.
o cellpadding et cellspacing s’appliquent à la balise <table>
o bgcolor: Spécifie la couleur d'une cellule.
o bordercolor : Spécifie la couleur de la bordure du tableau.
o background : Spécifie l'image à afficher comme image d'arrière plan du tableau
 Les tableaux

Exemple :
Les hyperliens et images

5
 les hyperliens

• Un hyperlien ou un lien hypertexte ou hypermedia est une référence (lien) permettant

de passer d’une page à une autre.
• Peut ouvrir un site, un fichier, une image, un email, une section, etc.
• Utilise la balise <a>
Syntaxe générale : <a href="URL"> Texte du lien </a>

Les attributs de <a> :

La balise admet quelques attributs:
o href : Permet d'indiquer la référence (chemin) de la ressource cible.
o target : Permet de définir l’endroit où l’on va ouvrir la page.
o title : Permet de spécifier une description du lien. Le lien affiche une infobulle au
survol

<a href = "[Link] title = " Google" target = "_blank"> Google </a>
 les hyperliens

Liens Absolus vs Liens Relatifs

Liens Relatifs (Relative URLs)
Liens Absolus (Absolute URLs)
• Adresse partielle d’une page.
• Adresse complète d’une page web.
• Dépend de la localisation de la page actuelle.
• Contient : protocole + nom de domaine +
• Utilisé pour les liens internes (dans le même
chemin.
site).
• Utilisé surtout pour les liens externes
Exemples :
(vers d’autres sites).
• Même dossier : [Link]
Exemple :
• Sous-dossier : docs/[Link]
[Link]
• Remonter d’un dossier : ../[Link]

Caractéristiques :
• Ne dépend pas du fichier actuel. Caractéristiques :
• Fonctionne depuis n’importe quel emplacement. • Plus courts et plus flexibles.
• Idéals pour organiser un site web.
 les hyperliens

Liens Internes et Liens Externes

Liens Internes Liens Externes

Définition : Définition :
• Lien qui pointe vers une autre page du • Lien qui pointe vers un site différent, un
même site web. autre domaine.
• Utilise généralement une URL relative. • Utilise une URL absolue.
Utilisation : Utilisation :
• Naviguer entre les pages du site. • Accéder à un site externe.
• Accéder à une section de la même page • Références, ressources externes,
(ancre). redirections.

Exemples : Exemples :
• [Link] • [Link]
• chapitre/[Link] • [Link]
• #section1
 les hyperliens

Exemple :
• Liens HTML – Utiliser une image comme lien
<a href="[Link]"><img src="[Link]" alt="HTML tutorial"></a>

• Lien vers une adresse e-mail

<a href="[Link] Envoyer un email </a>

• Bouton comme lien

<button onclick="[Link]='[Link]'"> Tutoriel HTML </button>

• Titres de liens
<a href="[Link] title="Aller à la section HTML de W3Schools">Visitez notre tutoriel
HTML</a>

• Utiliser une URL complète pour créer un lien vers une page web:
<a href="[Link] HTML</a>

• Lien vers une page située dans le dossier html du site actuel:
<a href="/html/[Link]">Tutoriel HTML</a>
 les Images

o Pour insérer une image dans votre page web il faut utiliser la balise
o Cette balise doit être accompagnée de quelques attributs :
src: permet d'indiquer la source (chemin) de l’image à insérer;
alt: le texte alternatif qui décrit l’image. Le texte s’affiche à la place de l’image lorsque
celle-ci ne peut pas être affichée;
title: pour afficher une infobulle au survol de la souris;
width: spécifie la largeur en pixels ou en %
height: spécifie la hauteur en pixels ou en %
Exemple :
<img src= "images/[Link]" alt= "Ma Photo" title= "ma photo personnelle" />
les Formulaires

5
 Balises de formulaires

La balise <form> vient en début de votre formulaire. Elle possède plusieurs attributs,
entre autres:
• Action: spécifie la destination du formulaire (le fichier qui se chargera de traiter les
données du formulaire)
• Method: spécifie la méthode HTTP pour envoyer le formulaire. Plusieurs valeurs sont
possibles dont GET (par défaut) et POST.
• autocomplete: il admet deux valeurs, on ou off. Cet attribut indique si le formulaire
doit être complété automatiquement (on) ou non (off) en utilisant les données déjà
saisies par l’utilisateur dans des champs similaires.

Syntaxe :
<form action="test_form.php" method="get" >
.
Les éléments de formulaire
.
</form>
 Les éléments de formulaires

La balise <input> permet de créer des champs de formulaire pour que l’utilisateur saisisse ou
sélectionne des données.
• C’est une balise autonome (elle ne se ferme pas).
• Le comportement du champ dépend de l’attribut type :
• On utilise souvent un id pour le relier à un <label>.
• Peut contenir d’autres attributs : placeholder, value, required, name

La balise <label> sert à décrire un élément de formulaire (input, checkbox, radio…).

• Elle améliore l’accessibilité : les lecteurs d’écran lisent le label quand l’utilisateur se place sur
le champ.
• Elle facilite le clic : cliquer sur le texte du label active aussi l’élément associé (utile pour les
petites cases).
• Pour lier un label à un input, on utilise :
for="idDuInput" → doit être identique à l’attribut id du <input>.
 Les éléments de formulaires

Exemple :
Les éléments de formulaires
 Les éléments de formulaires

Exemples :
 Les éléments de formulaires

Exemples :
 Les éléments de formulaires

• La balise <textarea> </textarea> définis un champs de texte avec une longueur non limitée.

• La balise <button> </button> définit un bouton cliquable..

Les éléments de formulaires
 Les éléments de formulaires

• La balise <select> </select> est utilisée pour créer une liste déroulante.
 Les éléments de formulaires

• La balise <optgroup> </optgroup> est utilisée pour regrouper des options dans une liste
déroulante. .
 Les éléments de formulaires

• La balise <datalist> </datalist> associée à une balise , il permet de proposer une liste de choix
non limitatifs.
 Les éléments de formulaires

• La balise <fieldset> </fieldset> regroupe certains éléments d’un formulaire.

La structure d’un site web

5
 La structure d’un site web

 En général, une page web est constituée d'un en-tête (en haut), de menus de navigation (en
haut ou sur les côtés), de différentes sections au centre… et d'un pied de page (tout en bas).
 HTML5 a introduit de nouvelles balises pour une meilleur structuration des sites web, Voici une
structure potentielle de sites web en utilisant les balises HTML5

Cette structure est basée sur des

balises dites, sémantiques.
 La structure d’un site web

• Ce type de balises, partagent généralement la même thématique ou sémantique.

• Par exemple, la balise <nav> , est censée contenir que des liens de navigation.
• Ceci facilitera aux moteurs de recherche l’extraction, le tri et le partage des informations.
• Avec les versions antérieures de HTML, on utilisait les balises <div> ( <div id = nav> ), mais
celles-ci ne portent aucun sens, elles ne servent qu’à regrouper des éléments pour leurs
appliquer le même style CSS.

1. L’entête <header>:
• La balise <header>….</header> permet d’insérer un entête, généralement, en haut de la page.
• Un entête peut également être inséré dans une section ou un article.
• Un entête peut inclure un logo, une bannière, un titre, une image, des liens, ...
Exemple :
 La structure d’un site web

2. Le pied de page <footer> :

Au contraire de la balise <header>, la balise <footer> … <footer> , est insérée tout en bas de la
page web ou de la section. o Un pied de page contient généralement des informations sur:
• l’auteur;
• les droits d’auteur;
• Contact
• Quelques liens, etc.
Exemple :
 La structure d’un site web

3. Les liens de navigation <nav> :

• La balise <nav> … </nav> regroupe un ensemble de liens de navigation du site web.
• Il ne faut pas ajouter tous les liens d'une page dans cette balise. <nav> représente
généralement, le menu principal du site web.

4. Les sections de la page <section> :

La balise <section> sert à définir des sections dans un document qui partagent généralement la
même thématique.

5. Le contenu complémentaire <aside> :

• La balise <aside> définis des informations complémentaires pas forcement en lien direct avec le
contenu principal.
• On peut ajouter plusieurs blocs <aside> dans un document HTML.
• Exemple: sur le site Wikipédia, on trouve souvent à droite de l’article, un bloc d’informations
complémentaires.
La structure d’un site web

<aside>
 La structure d’un site web

6. L’article <article> :
• Cette balise sert à créer un bloc de contenu que l'on pourrait extraire de la page tout
en conservant l’intégralité de ses informations.
• Le contenu d’un article peut se comprendre indépendamment du reste de la page de
la même façon qu’un article d’un journal par rapport aux autres.
Autre balises HTML

5
 Audio et Vidéo

Importation des Vidéos:

• La balise HTML5 permet de spécifier un moyen standard pour inclure des vidéos dans
une page web.
• La balise peut supporter trois formats de vidéo: MP4, webM et ogg
 Audio et Vidéo

Importation des audios:

• Telle que la vidéo, avant HTML5 c’était impossible d’insérer une audio .
• Avec HTML5, il suffit d’utiliser la balise <audio> pour jouer une audio sur une page
web.
• Les formats supportés par cette balise sont: mp3, aac, ogg et wav
• La balise <audio> admet les mêmes paramètres que la balise <video> .