HTML/CSS ET WEB RESPONSIVE

HTML (Partie 1)
"WEB Design et Marketing Digital"

Pr. Serji Abdelilah

EST, UMP, Oujda

Séance 2

15 octobre 2025

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 1 / 43
 Plan
1 Introduction à HTML
2 Historique de HTML
3 Éditeurs HTML
4 HTML de base
5 Éléments HTML
6 Attributs HTML
7 Titres HTML (Headings)
8 Paragraphes HTML
9 HTML Styles (Attribut style)
10 HTML Formatting (mise en forme du texte)
11 HTML Quotations (Citations et abréviations)
12 HTML Comments (Commentaires)
13 HTML Colors (Couleurs en HTML)
14 Conclusion et suite
Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 2 / 43
 Qu’est-ce que HTML ?

HTML = HyperText Markup Language.

C’est un langage de balisage, pas un langage de programmation.
Il sert à structurer le contenu des pages web.
Basé sur des balises :
une balise ouvrante,
du contenu,
une balise fermante.

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

HTML décrit le contenu, mais ne gère pas l’apparence (qui relève du CSS).

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 3 / 43
 Les débuts du HTML

Création : HTML a été inventé en 1991 par Tim Berners-Lee au CERN (Organisation
européenne pour la recherche nucléaire).
Objectif initial :
Partager facilement des documents scientifiques entre chercheurs.
Utiliser un langage simple basé sur des balises (tags) pour structurer le texte.
HTML repose sur le concept d’hypertexte : des liens permettant de naviguer entre des
pages.
Les premières pages contenaient seulement du texte et des liens — pas de couleur, pas
d’images.
→ Le Web naît de la volonté de partager des connaissances grâce à un langage universel et
simple.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 4 / 43
 L’évolution du HTML (1.0 à 4.01)

HTML 1.0 (1991) :

Première version expérimentale.
Gère uniquement le texte, les hyperliens et quelques titres.
HTML 2.0 (1995) :
Première version standardisée (IETF).
Introduction des formulaires et des images.
HTML 3.2 (1997) :
Ajout des tableaux, scripts, et des balises de mise en forme (<font>, <center>).
Apparition du navigateur Netscape et du Web grand public.
HTML 4.01 (1999) :
Séparation du contenu (HTML) et du style (CSS).
Structure plus sémantique et introduction des attributs standards.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 5 / 43
 De XHTML à HTML5

XHTML (2000–2008) :
Version stricte de HTML, basée sur XML.
Exige une écriture très rigoureuse : balises fermées, minuscules, syntaxe exacte.
Moins tolérante : une erreur pouvait bloquer le chargement de la page.
Problème : complexité élevée → adoption partielle.
HTML5 (2014–présent) :
Relance du HTML avec un standard plus souple et moderne.
Intègre le multimédia (<video>, <audio>, <canvas>).
Introduit de nouvelles balises sémantiques : <header>, <footer>, <article>, <nav>.
Compatible avec les mobiles et le responsive design.

→ HTML5 marque un retour à la simplicité et à la polyvalence.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 6 / 43
 Différences majeures et importance de HTML5

HTML 1.0 – 3.2 : très limité, pas de structure sémantique, dépendance à la mise en
forme directe.
HTML 4.01 : séparation claire entre contenu et style (CSS devient la norme).
XHTML : syntaxe stricte, mais peu flexible et fragile.
HTML5 :
syntaxe plus permissive,
meilleure compatibilité avec les navigateurs modernes,
intégration native du multimédia,
structure sémantique riche et responsive.

Conclusion
HTML5 est aujourd’hui la version universelle et standardisée du Web.
Elle assure la compatibilité entre ordinateurs, tablettes et smartphones.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 7 / 43
 Éditeurs HTML

Un fichier HTML est un simple fichier texte avec extension .html.

Éditeurs possibles :
basiques : Bloc-notes, TextEdit,
spécialisés : VS Code, Sublime Text, Notepad++.
Les éditeurs modernes offrent :
coloration syntaxique,
auto-complétion,
aperçu intégré.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 8 / 43
 TD — Éditeurs HTML

Exercice :
1 Crée un fichier nommé premiere_page.html.
2 Ouvre-le dans un éditeur de ton choix.
3 Écris un simple texte comme : « Bonjour, je découvre HTML ! ».
4 Sauvegarde et ouvre le fichier dans ton navigateur.

⇒ Observer comment un simple fichier texte devient une page web.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 9 / 43
 Structure minimale d’une page HTML

Voici la structure standard d’une page web :

< !DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma première page</title>
</head>
<body>
<h1>Bonjour le Web !</h1>
<p>Ceci est mon premier paragraphe.</p>
</body>
</html>

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 10 / 43
 Frame Title

Chaque page HTML suit une structure fixe : en-tête (head) + corps (body).
Le navigateur lit ce code pour afficher le contenu correctement.
L’indentation (espaces à gauche) aide à voir la hiérarchie des balises.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 11 / 43
 Analyse du code : HEAD et BODY

1 La partie HEAD : informations invisibles mais essentielles

<!DOCTYPE html> : indique au navigateur qu’il s’agit de HTML5.
<html lang="fr"> : balise principale, précise la langue du document.
<head> : contient les métadonnées :
<meta charset="UTF-8"> → encodage des caractères (pour afficher les accents).
<title> → titre de la page (s’affiche dans l’onglet du navigateur).

2 La partie BODY : contenu visible par l’utilisateur

<body> : englobe tout le contenu affiché à l’écran.
Exemple :
<h1> → titre principal (gros texte en haut de la page).
<p> → paragraphe (texte normal).

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 12 / 43
 Comprendre la hiérarchie et les bonnes pratiques

Hiérarchie des balises (structure en arbre) :

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 13 / 43
 Comprendre la hiérarchie et les bonnes pratiques

Bonnes pratiques :
Fermer toutes les balises ouvertes : <p> ... </p>.
Utiliser des balises en minuscules (standard HTML5).
Indenter correctement le code (lisibilité).
Toujours déclarer le bon charset UTF-8.
Donner à chaque page un titre significatif (<title>).

→ Une page bien structurée est plus facile à maintenir et mieux comprise par les navigateurs.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 14 / 43
 TD — Structure basique

Exercice :
1 Reproduis la structure HTML minimale.
2 Change le <title> de la page par ton prénom.
3 Mets un <h1> avec ton nom complet.
4 Ajoute un <p> qui présente ton hobby préféré.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 15 / 43
 Éléments HTML

Un élément = balise ouvrante + contenu + balise fermante.

Exemple :
<p>Ceci est un paragraphe.</p>
Certains sont vides :
<img src="[Link]" alt="Texte alternatif">
Les éléments peuvent être imbriqués :
<p>Un texte avec <strong>mise en valeur</strong>.</p>

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 16 / 43
 Qu’est-ce qu’un attribut HTML ?

Les attributs HTML sont des informations supplémentaires associées à une balise.
Ils permettent de :
préciser un comportement (ex. lien, image, couleur),
ajouter des informations descriptives (accessibilité, titre...),
donner des identifiants pour le style CSS ou le JavaScript.
Syntaxe générale : nom="valeur"
Exemple simple :
<a href="https ://[Link]">Visiter</a>
<img src="[Link]" alt="Un chat mignon">
<p style="color : red ;">Texte rouge</p>
Chaque attribut doit être écrit dans la balise ouvrante.
→ Les attributs enrichissent les balises sans changer leur nature.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 17 / 43
 Types d’attributs et exemples courants
On distingue deux grandes catégories :
1 Attributs spécifiques : propres à certaines balises.
2 Attributs globaux : utilisables sur presque toutes les balises.
Exemples d’attributs spécifiques :
href → destination d’un lien.
src → source d’une image, d’un script ou d’une vidéo.
alt → texte alternatif pour les images (accessibilité).
Exemples d’attributs globaux :
id → identifiant unique d’un élément.
class → catégorisation pour le style CSS.
style → appliquer un style directement dans le code.
Exemple combiné :
<p id="intro" class="texte-important" style="color :blue ;">
Bienvenue sur ma page personnelle !
</p>
→ Les attributs facilitent la mise en forme, la navigation et l’interactivité.
Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 18 / 43
 Les titres (Headings) — Structure hiérarchique

Les titres sont définis par les balises <h1> à <h6>.

Chaque niveau a une importance hiérarchique :
<h1> : titre principal de la page (unique).
<h2> : sous-titre ou section principale.
<h3> : sous-section, et ainsi de suite.
Cette hiérarchie aide :
le lecteur à comprendre la structure du contenu,
le navigateur et les moteurs de recherche à indexer la page,
les lecteurs d’écran à la parcourir correctement (accessibilité).

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 19 / 43
 Les titres (Headings) — Structure hiérarchique

Exemple de hiérarchie logique :

<h1>Ma Page Personnelle</h1>
<h2>Présentation</h2>
<h3>Formation</h3>
<h3>Expériences</h3>
<h2>Centres d’intérêt</h2>
→ Une structure bien hiérarchisée améliore la clarté et le référencement (SEO).

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 20 / 43
 Bonnes pratiques et aspects visuels

Par défaut, les navigateurs affichent :

<h1> → très grand et en gras,
<h2> → un peu plus petit,
<h6> → le plus petit.
Mais ces tailles peuvent être modifiées avec CSS.
Ne pas utiliser les titres seulement pour “agrandir” le texte :
Utiliser <h1>, <h2>. . . pour la sémantique,
Utiliser le CSS pour la mise en forme visuelle.
Toujours garder un seul <h1> par page.
Respecter un ordre logique : éviter de sauter directement de <h1> à <h4>.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 21 / 43
 Bonnes pratiques et aspects visuels

Exemple de code :
<h1>Article : Le Web Moderne</h1>
<h2>1. Introduction</h2>
<h3>1.1 Origine du Web</h3>
<h3>1.2 Le Web aujourd’hui</h3>
<h2>2. Conclusion</h2>
→ Les titres donnent une structure logique, claire et accessible à toute page HTML.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 22 / 43
 Les paragraphes — Rôle et structure

En HTML, un paragraphe représente un bloc de texte cohérent.

Il se crée avec la balise <p> (ouvrante) et </p> (fermante).
Chaque <p> démarre sur une nouvelle ligne et s’affiche avec un espacement vertical.
Un paragraphe peut contenir :
du texte simple ;
des éléments inline : <a>, <strong>, <em>, <img> ;
mais pas de balises de bloc (comme <div> ou un autre <p>).
Les navigateurs ajoutent automatiquement un espace avant et après chaque paragraphe.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 23 / 43
 Bonnes pratiques et gestion des paragraphes

Exemple simple :
<p>Ceci est un premier paragraphe.</p>
<p>Ceci est un second paragraphe.</p>
<p>Un paragraphe avec un <a href="">lien</a>
et du
<strong>texte en gras</strong>.
</p>

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 24 / 43
 Bonnes pratiques et gestion des paragraphes

Sémantique : chaque paragraphe doit contenir une idée complète ou un thème.

Éviter d’utiliser plusieurs <br> à la suite pour créer des espacements :
Utiliser <p> pour séparer logiquement les blocs de texte.
Le CSS gérera l’espacement visuel.
Balises liées :
<br> → retour à la ligne à l’intérieur d’un paragraphe.
<hr> → ligne horizontale de séparation entre sections.
Accessibilité : bien structurer les paragraphes améliore la lecture par les technologies
d’assistance (lecteurs d’écran).
Lisibilité : des paragraphes courts et bien séparés facilitent la compréhension.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 25 / 43
 Bonnes pratiques et gestion des paragraphes

Exemples complémentaires :
<p>Voici un texte.<br>Et voici une nouvelle ligne sans nouveau
paragraphe.</p>
<hr>
<p>Un nouveau paragraphe après une ligne de séparation.</p>
→ Utiliser les paragraphes pour la structure logique, pas pour la mise en forme visuelle.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 26 / 43
 L’attribut style — Mise en forme rapide

L’attribut style permet d’ajouter du CSS directement dans une balise HTML.
Syntaxe : style="propriété:valeur;"
Chaque propriété CSS définit un aspect visuel : couleur, taille, police, alignement...
Exemple simple :
<p style="color : blue ;">Texte bleu</p>
<h1 style="text-align : center ;">Titre centré</h1>
<p style="font-size : 18px ; background-color : yellow ;">
Texte avec fond jaune.
</p>
L’attribut style doit être utilisé uniquement pour des tests ou des pages simples.
→ Pour des sites complets, on utilisera le CSS externe.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 27 / 43
 Propriétés CSS les plus utilisées

color → couleur du texte.

background-color → couleur de fond.
font-size → taille du texte.
text-align → alignement du texte (left, center, right).
font-family → police d’écriture.
border → bordure autour d’un élément.
<p style="color :white ; background-color :green ;
text-align :center ; font-size :20px ;">
Exemple de paragraphe stylisé.
</p>
→ L’attribut style applique une mise en forme locale et immédiate.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 28 / 43
 Balises de mise en forme du texte

HTML offre des balises pour mettre en valeur ou modifier le style du texte :
<b> → texte en gras (sans importance sémantique).
<strong> → texte important (sémantique forte).
<i> → texte en italique.
<em> → texte à insister (emphase sémantique).
<mark> → texte surligné.
<small> → texte plus petit.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 29 / 43
 Balises de mise en forme du texte

Exemple :
<p>Un texte <b>en gras</b> et <i>en italique</i>.</p>
<p><strong>Important :</strong> pensez à <em>tester votre code</em>.</p>
<p>Voici un texte <mark>mis en évidence</mark>.</p>

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 30 / 43
 Autres balises de mise en forme

<del> → texte barré (supprimé).

<ins> → texte souligné (ajouté).
<sub> → texte en indice (chimie, maths...).
<sup> → texte en exposant.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 31 / 43
 Autres balises de mise en forme

Exemples :
<p>Eau : H₂O</p>
<p>Surface : m²</p>
<p><del>Ancien prix : 50€</del> <ins>Nouveau : 35€</ins></p>
→ Ces balises aident à transmettre une signification claire et structurée du texte.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 32 / 43
 Balises de citation et d’extrait

HTML propose des balises spécifiques pour les citations :

<blockquote> → citation longue, en retrait.
<q> → citation courte dans une phrase.
<cite> → mentionne la source ou l’auteur.
Exemple :
<p>Tim Berners-Lee a dit :</p>
<blockquote cite="https ://[Link]/">
Le Web est plus un concept social que technique.
</blockquote>
<p>Une courte citation : <q>Le savoir est universel.</q></p>
<p>Source : <cite>World Wide Web Consortium (W3C)</cite></p>

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 33 / 43
 Abréviations et définitions

<abbr> : indique une abréviation avec une infobulle explicative.

<address> : contient des informations de contact (auteur, email. . .).
<dfn> : met en valeur un terme défini dans un texte.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 34 / 43
 Abréviations et définitions

Exemples :
<p>L’<abbr title="HyperText Markup Language">HTML</abbr>
est le langage de base du Web.</p>
<p><dfn>Algorithme</dfn> : suite d’instructions permettant
de résoudre un problème.</p>
<address>
Auteur : John Doe<br>
Email : <a href="mailto :john@[Link]">john@[Link]</a>
</address>

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 35 / 43
 Commentaires dans le code HTML

Les commentaires servent à expliquer ou documenter le code.

Ils ne sont pas affichés dans la page web.
Syntaxe :
< !– Ceci est un commentaire –>
<p>Texte visible</p>
< !– <p>Ce paragraphe ne s’affichera pas</p> –>
Utilisations :
Noter des remarques ou rappels dans le code.
Masquer temporairement une partie du code.
Collaborer à plusieurs sans perdre d’informations.
Éviter les commentaires trop longs : ils alourdissent le fichier.
→ Les bons commentaires facilitent la lecture et la maintenance du code.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 36 / 43
 Les couleurs en HTML

Les couleurs peuvent être définies de plusieurs façons :

par nom : red, blue, green...
par code hexadécimal : #RRGGBB.
par code RGB (Red, Green, Blue) ou RGBA : rgb(255,0,0), rgba(0,0,255,0.5).
Ces valeurs sont utilisées dans l’attribut style ou dans le CSS.
Exemples :
<p style="color :red ;">Texte rouge</p>
<p style="color :00ff00 ;">Texte vert</p>
<p style="background-color :rgb(0,0,255) ; color :white ;">
Fond bleu et texte blanc
</p>

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 37 / 43
 Bonnes pratiques d’utilisation des couleurs

Utiliser les couleurs avec modération pour préserver la lisibilité.

Respecter le contraste entre texte et arrière-plan.
Éviter d’utiliser uniquement la couleur pour transmettre une information (accessibilité pour
les daltoniens).
Utiliser des palettes cohérentes avec la charte graphique du site.
Tester le rendu sur plusieurs écrans et navigateurs.
→ Les couleurs influencent la lisibilité, l’accessibilité et l’esthétique du site.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 38 / 43
 TD — Éléments HTML

Exercice :
1 Ajoute un paragraphe de présentation.
2 Mets un mot en gras avec <strong>.
3 Insère une image de ton choix avec <img>.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 39 / 43
 TD — Attributs

Exercice :
1 Ajoute un lien vers Google avec <a>.
2 Ajoute une image avec un attribut alt.
3 Écris un paragraphe avec un style rouge.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 40 / 43
 TD — Titres

Exercice :
1 Crée une page avec un <h1> (ton nom).
2 Ajoute 2 sous-titres <h2> (biographie, passions).
3 Mets sous chaque sous-titre un petit texte.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 41 / 43
 TD — Paragraphes

Exercice :
1 Écris trois paragraphes qui racontent ta journée.
2 Ajoute un lien dans l’un des paragraphes.
3 Ajoute une image dans un autre paragraphe.

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 42 / 43
 Résumé de la séance

HTML = langage de balisage pour structurer une page web.

Évolution des versions → aujourd’hui HTML5 est la norme.
Les bases vues : éditeurs, structure minimale, éléments, attributs, titres et paragraphes.
Prochain cours : autres éléments HTML (listes, liens, images, tableaux).

Pr. Serji Abdelilah (EST, UMP, Oujda Séance 2) HTML/CSS 15 octobre 2025 43 / 43