26/06/2025 22:23 HTML & CSS
HTML & CSS
Support de cours élaboré par : Youssef CHAFAI
Date : 21 mai 2025 | Version : 1.0
0. Introduction
1. Historique du web
2. Balises de structure
3. Textes
4. Tableaux
5. Médias
6. Formulaires
7. Feuilles de styles CSS
8. Conclusion
0. Introduction générale
Ce cours est une introduction aux fondements du développement web avec
HTML et CSS. L'objectif est de vous fournir les compétences de base pour
construire des pages web fonctionnelles et esthétiques, marquant ainsi la
première étape de votre parcours dans le développement web.
↑ Sommaire
[Link] 1/18
26/06/2025 22:23 HTML & CSS
1. Historique de l’évolution du web
Le Web (abréviation de World Wide Web) est une technologie développée en
1989 par Tim Berners-Lee, un ingénieur britannique du CERN. Son but initial était
de permettre aux chercheurs de partager facilement des documents via Internet.
1989-1993 : Naissance du Web, introduction du premier navigateur
"WorldWideWeb" (plus tard renommé Nexus), et publication de HTML 1.0. À ce
stade, le Web est uniquement textuel.
1995 : Introduction de HTML 2.0. Les pages Web commencent à intégrer des
images et des formulaires simples.
1997 : HTML 3.2 et HTML 4.0 introduisent les feuilles de styles CSS, les tableaux,
les scripts (JavaScript).
2000-2010 : Le W3C (World Wide Web Consortium) devient l'organisme de
normalisation du Web. Introduction de XHTML.
2014 : HTML5 devient la nouvelle norme. Elle offre des balises sémantiques, le
support natif des médias (audio, vidéo), et la compatibilité mobile (responsive
design).
Aujourd'hui : Le Web est interactif, dynamique, et utilisé pour des applications
complexes. Les technologies comme JavaScript, CSS Grid, et Flexbox permettent de
créer des expériences utilisateur modernes.
Acteurs principaux : Le W3C (World Wide Web Consortium) et le WHATWG
(Web Hypertext Application Technology Working Group) sont les organismes
responsables de l'évolution des standards du Web.
Comprendre l’évolution du Web est essentiel pour apprécier les standards
modernes comme HTML5 et CSS3, qui mettent l’accent sur l’accessibilité,
l’interopérabilité et la compatibilité multi-appareils.
2. Balises de structure
[Link] 2/18
26/06/2025 22:23 HTML & CSS
Une page web est structurée comme un document hiérarchique. HTML5 introduit
des balises sémantiques pour organiser clairement le contenu. Ces balises
donnent du sens à chaque partie de la page. Cela facilite la lecture pour les
navigateurs, les moteurs de recherche et les technologies d'assistance (lecteurs
d'écran).
Les principales balises de structure HTML5
<header> : représente l'en-tête d'une page ou d'une section. Il peut contenir un
logo, un titre ou un menu.
<nav> : contient les liens de navigation du site (menu principal, par exemple).
<main> : regroupe le contenu principal de la page. Il ne doit apparaître qu'une
seule fois par page.
<section> : représente une section logique du contenu. Par exemple, un
chapitre de cours.
<article> : désigne un contenu autonome pouvant être diffusé
indépendamment (ex. : un article de blog ou une actualité).
<aside> : correspond à du contenu secondaire (ex. : une barre latérale ou une
note).
<footer> : représente le pied de page d’un document ou d’une section.
Exemple complet d'une structure HTML5 de base
<!DOCTYPE html>
<html lang=\"fr\">
<head>
<meta charset=\"UTF-8\">
<title>Ma première page</title>
</head>
<body>
<header>
<h1>Bienvenue sur mon site</h1>
</header>
<nav>
<ul>
<li><a href=\"#\">Accueil</a></li>
<li><a href=\"#\">À propos</a></li>
</ul>
</nav>
[Link] 3/18
26/06/2025 22:23 HTML & CSS
<main>
<section>
<h2>Présentation</h2>
<p>Voici un paragraphe dans une section.
</section>
<article>
<h2>Article indépendant</h2>
<p>Contenu autonome comme une news ou un
</article>
</main>
<aside>
<p>Informations secondaires, lien utile...</p>
</aside>
<footer>
<p>© 2025 Mon site web</p>
</footer>
</body>
</html>
À retenir
Les balises de structure sont essentielles pour l’organisation du contenu.
Elles rendent le site plus accessible et mieux référencé par les moteurs de
recherche.
Utilisez toujours ces balises de manière logique et cohérente.
Exercices
3. Textes
Le texte est la base du contenu web. HTML (HyperText Markup Language) utilise
des balises pour structurer et formater le texte. Voici les principales :
[Link] 4/18
26/06/2025 22:23 HTML & CSS
3.1 Titres (headings)
Il existe 6 niveaux de titres : de <h1> (le plus important) à <h6> (le moins
important). Ils structurent logiquement le contenu :
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Section</h3>
3.2 Paragraphes
Les paragraphes sont définis avec la balise <p> . Chaque paragraphe est
automatiquement séparé du suivant.
<p>Ceci est un paragraphe de texte.</p>
3.3 Emphase et importance
<em> pour l'emphase (mise en italique)
<strong> pour l'importance (mise en gras)
<p>Ceci est <em>important</em> et <strong>très important</strong
3.4 Sauts de ligne et séparateurs
<br> pour forcer un saut de ligne (à éviter en excès)
<hr> pour une ligne horizontale de séparation
3.5 Listes
Il existe 2 types de listes :
<ul> : liste non ordonnée (avec puces)
<ol> : liste ordonnée (numérotée)
[Link] 5/18
26/06/2025 22:23 HTML & CSS
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
<ol>
<li>Étape 1</li>
<li>Étape 2</li>
</ol>
3.6 Autres balises utiles
<mark> : surlignage
<small> : texte en petit
<del> et <ins> : texte supprimé / ajouté
<blockquote> : citation longue
<abbr> : abréviation avec définition
<p>Voici une <mark>mise en évidence</mark>.</p>
<p><abbr title=\"Cascading Style Sheets\">CSS</abbr> est
Exercices
4. Tableaux
Les tableaux HTML permettent de représenter des données structurées en lignes
et en colonnes, comme dans un tableau Excel.
4.1 Structure de base d'un tableau
Voici les balises fondamentales utilisées :
<table> : Conteneur principal du tableau
[Link] 6/18
26/06/2025 22:23 HTML & CSS
<tr> : Table Row = une ligne
<th> : Table Header = une cellule d’en-tête (en gras, centrée)
<td> : Table Data = une cellule normale
Exemple simple :
<table>
<tr>
<th>Nom</th>
<th>Âge</th>
</tr>
<tr>
<td>Alice</td>
<td>24</td>
</tr>
<tr>
<td>Bob</td>
<td>27</td>
</tr>
</table>
4.2 Sections sémantiques avancées
HTML permet de diviser un tableau en 3 grandes sections :
<thead> : pour l’en-tête du tableau
<tbody> : pour le corps principal
<tfoot> : pour le pied de tableau
Exemple avec ces sections :
<table>
<thead>
<tr>
<th>Produit</th>
<th>Prix</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stylo</td>
<td>1€</td>
[Link] 7/18
26/06/2025 22:23 HTML & CSS
</tr>
<tr>
<td>Cahier</td>
<td>2€</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>3€</td>
</tr>
</tfoot>
</table>
4.3 Fusion de cellules
On peut fusionner plusieurs colonnes ou lignes avec :
colspan=\"n\" : fusionne n colonnes
rowspan=\"n\" : fusionne n lignes
Exemple avec fusion :
<table>
<tr>
<th rowspan=\"2\">Nom</th>
<th colspan=\"2\">Notes</th>
</tr>
<tr>
<th>Maths</th>
<th>Physique</th>
</tr>
<tr>
<td>Claire</td>
<td>15</td>
<td>17</td>
</tr>
</table>
4.4 Styliser un tableau avec CSS
Avec CSS, on peut améliorer l'apparence d’un tableau :
[Link] 8/18
26/06/2025 22:23 HTML & CSS
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 0.5em;
text-align: left;
}
thead {
background-color: #f0f0f0;
}
Cette mise en forme rend les tableaux lisibles et professionnels.
Exercices
5. Médias
Les médias permettent d'enrichir une page web avec des éléments visuels et
sonores.
5.1 Les images
La balise principale pour insérer une image est <img> . Elle nécessite au moins
l'attribut src (le chemin vers l’image) et l’attribut alt (texte alternatif pour
l’accessibilité).
<img src="[Link]" alt="Description de l'image">
Pour rendre les images adaptatives (responsive), on peut utiliser l’attribut
srcset qui propose plusieurs versions de l’image selon la résolution de l’écran.
[Link] 9/18
26/06/2025 22:23 HTML & CSS
<img src="[Link]" srcset="[Link] 1024w, phot
5.2 Les formats d’image modernes
Les formats comme WebP ou AVIF offrent une meilleure compression sans perte
visible, ce qui accélère le chargement des pages.
5.3 Les balises audio et vidéo
HTML5 introduit les balises <audio> et <video> pour intégrer facilement du
son et des vidéos :
Audio :
<audio controls>
<source src="musique.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
Votre navigateur ne supporte pas la balise audio.
</audio>
Vidéo :
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">
Votre navigateur ne supporte pas la balise vidéo.
</video>
5.4 Sous-titres et accessibilité
On peut ajouter des sous-titres à une vidéo avec la balise <track> :
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="[Link]" kind="subtitles" srclang=
</video>
[Link] 10/18
26/06/2025 22:23 HTML & CSS
Cela améliore l'accessibilité, notamment pour les personnes sourdes ou
malentendantes.
5.5 Images responsives avancées
La balise <picture> permet de définir différentes sources d’image selon la taille
ou le type d’écran :
<picture>
<source media="(min-width: 650px)" srcset="grand-forma
<source media="(min-width: 465px)" srcset="moyen-forma
<img src="[Link]" alt="Description">
</picture>
5.6 Bonnes pratiques
Toujours fournir un texte alternatif (attribut alt ) pour les images.
Utiliser des formats adaptés au web pour optimiser la vitesse de chargement.
Prévoir des alternatives accessibles pour les médias (sous-titres, descriptions
audio).
Tester la compatibilité des formats audio/vidéo avec différents navigateurs.
Exercices
6. Formulaires
Les formulaires permettent aux utilisateurs d’entrer des données sur une page
web. Ils sont essentiels pour les interactions comme les inscriptions, les
recherches, ou les commentaires.
Les éléments de base
[Link] 11/18
26/06/2025 22:23 HTML & CSS
Un formulaire est défini par la balise <form> . À l'intérieur, on place des éléments
d'entrée comme :
<input> : champ de saisie (texte, email, mot de passe, etc.)
<textarea> : zone de texte multilignes
<select> : menu déroulant
<button> : bouton pour envoyer ou réinitialiser
Exemple simple de formulaire
<form action=\"/submit\" method=\"post\">
<label for=\"nom\">Nom :</label>
<input type=\"text\" id=\"nom\" name=\"nom\" required>
<label for=\"email\">Email :</label>
<input type=\"email\" id=\"email\" name=\"email\" requ
<label for=\"message\">Message :</label>
<textarea id=\"message\" name=\"message\" rows=\"4\"><
<button type=\"submit\">Envoyer</button>
</form>
Attributs importants des champs
type : définit la nature de l’entrée (texte, email, password, date, couleur, etc.).
name : nom du champ envoyé au serveur.
id : identifiant unique, utilisé pour lier le <label> .
required : rend le champ obligatoire.
placeholder : texte d’aide affiché dans le champ avant saisie.
maxlength et minlength : limites de longueur.
pattern : expression régulière pour valider la saisie.
Validation native HTML5
[Link] 12/18
26/06/2025 22:23 HTML & CSS
HTML5 propose une validation automatique des champs avec les attributs
required , type=\"email\" (vérifie le format d’email), et pattern . Si les
données ne sont pas valides, le navigateur affiche un message d’erreur.
Types d’ input courants
text : champ texte simple
email : vérifie que la valeur ressemble à une adresse email
password : masque la saisie
number : pour les nombres, avec options min et max
date : sélection d’une date via un calendrier
color : choix d’une couleur via un sélecteur
checkbox : case à cocher (oui/non)
radio : boutons radio pour choix exclusif
Exemple avec différents types
<form>
<label>Nom d’utilisateur :</label>
<input type=\"text\" name=\"username\" placeholder=\"V
<label>Mot de passe :</label>
<input type=\"password\" name=\"password\" required>
<label>Âge :</label>
<input type=\"number\" name=\"age\" min=\"1\" max=\"10
<label>Date de naissance :</label>
<input type=\"date\" name=\"birthdate\">
<label>Couleur préférée :</label>
<input type=\"color\" name=\"favcolor\">
<fieldset>
<legend>Sexe :</legend>
<input type=\"radio\" id=\"homme\" name=\"gender
<label for=\"homme\">Homme</label>
<input type=\"radio\" id=\"femme\" name=\"gender
<label for=\"femme\">Femme</label>
</fieldset>
[Link] 13/18
26/06/2025 22:23 HTML & CSS
<label>Abonnement newsletter :</label>
<input type=\"checkbox\" name=\"newsletter\">
<button type=\"submit\">Envoyer</button>
</form>
Accessibilité
Utiliser toujours la balise <label> liée à un champ grâce à l’attribut for (ou
en enveloppant l’input). Cela améliore la navigation pour les personnes utilisant
des lecteurs d’écran.
Exercices
7. Feuilles de styles CSS
CSS (Cascading Style Sheets) est le langage qui permet de définir la présentation
des pages web. Tandis que le HTML structure le contenu, le CSS s'occupe de la
mise en forme (couleurs, polices, positionnement, etc.).
7.1 Syntaxe de base
Une règle CSS se compose d’un sélecteur qui cible un ou plusieurs éléments
HTML, et d’un bloc de déclaration contenant des propriétés et leurs valeurs :
sélecteur {
propriété: valeur;
}
Exemple :
p {
color: blue;
[Link] 14/18
26/06/2025 22:23 HTML & CSS
font-size: 16px;
}
Ici, tous les <p> auront un texte bleu de taille 16 pixels.
7.2 Sélecteurs
Les sélecteurs permettent de cibler des éléments précis :
element : tous les éléments de ce type (ex: p ).
.class : tous les éléments avec cette classe (ex: .important ).
#id : l’élément avec cet identifiant unique (ex: #menu ).
Combinaisons plus complexes (descendants, enfants, etc.) permettent un ciblage
précis.
7.3 Le modèle de boîte (Box model)
Chaque élément HTML est représenté comme une boîte rectangulaire constituée
de :
Contenu : texte, image, etc.
Padding : espace entre le contenu et la bordure.
Bordure : contour autour du padding.
Margin : espace entre la bordure et les autres éléments.
Comprendre le box model est essentiel pour contrôler l’espacement et la taille
des éléments.
7.4 Mise en page : display, position, flexbox et grid
Display détermine comment un élément est affiché :
block : élément sur une nouvelle ligne, occupe toute la largeur.
inline : élément dans la ligne de texte, largeur dépend du contenu.
inline-block : similaire à inline, mais accepte les dimensions (largeur/hauteur).
Position contrôle le placement :
[Link] 15/18
26/06/2025 22:23 HTML & CSS
static : position normale (par défaut).
relative : déplacé par rapport à sa position normale.
absolute : positionné par rapport à l’ancêtre positionné.
fixed : position fixe par rapport à la fenêtre.
Pour les mises en page complexes, on utilise des systèmes modernes :
Flexbox : organise les éléments en ligne ou colonne avec contrôle facile de
l’alignement et de l’espace.
Grid : système en grille bidimensionnelle pour un placement précis en lignes et
colonnes.
7.5 Couleurs, polices et styles
CSS permet de définir :
Les couleurs via noms, hexadécimal (#123abc), rgb(), hsl().
Les polices avec la propriété font-family (ex: Arial, sans-serif).
La taille des polices avec font-size .
Le style de texte : gras ( font-weight ), italique ( font-style ), souligné, etc.
7.6 Responsive design
Pour que les pages s’adaptent à toutes tailles d’écran (mobiles, tablettes,
desktop), on utilise :
Des unités relatives ( em , rem , % ) plutôt que fixes (pixels).
Les media queries qui appliquent des styles spécifiques selon la largeur de l’écran
:
@media (max-width: 600px) {
body {
background-color: lightgrey;
}
}
7.7 Transitions et animations
[Link] 16/18
26/06/2025 22:23 HTML & CSS
Pour rendre une page plus vivante, CSS propose :
Transitions : effets d’adoucissement lors du changement d’une propriété (ex:
couleur au survol).
Animations : mouvements plus complexes définis par des images clés (keyframes).
button {
transition: background-color 0.3s ease;
}
button:hover {
background-color: #005f99;
}
7.8 Organisation des styles
Le CSS peut être :
Inline : directement dans une balise HTML avec l’attribut style (à éviter pour le
maintien).
Interne : dans une balise <style> dans le <head> .
Externe : dans des fichiers .css séparés, liés via <link> , méthode
recommandée.
Pour les projets complexes, on utilise aussi des méthodologies (BEM) et
préprocesseurs (Sass) pour organiser le code CSS efficacement.
Exercices
Conclusion: Éléments Clés du Cours HTML &
CSS
Ce cours a présenté les bases essentielles pour la création de pages web : HTML
pour structurer le contenu et CSS pour le mettre en forme. En parcourant
l'historique du web jusqu'aux techniques de style modernes, ce support vise à une
[Link] 17/18
26/06/2025 22:23 HTML & CSS
compréhension globale du fonctionnement d'une page web. La maîtrise de ces
concepts est la première étape cruciale pour aborder le développement web.
Éléments Essentiels à Retenir
1. Historique du Web : Comprendre l'évolution du web et le rôle de Tim Berners-
Lee permet de mieux appréhender les technologies actuelles.
2. Balises de structure : L'utilisation correcte des balises sémantiques
( <header> , <nav> , <main> , <article> , <aside> , <footer> ) est
fondamentale pour l'accessibilité et le référencement.
3. Textes : Savoir formater le texte avec les titres ( <h1> - <h6> ), paragraphes
( <p> ), listes ( <ul> , <ol> , <li> ), et balises d'emphase ( <em> , <strong> )
est la base de tout contenu lisible.
4. Tableaux : Les balises <table> , <tr> , <th> , <td> , ainsi que <thead> ,
<tbody> , <tfoot> et les attributs colspan / rowspan sont indispensables
pour organiser des données structurées.
5. Médias : L'intégration d'images ( <img> avec alt et srcset ), audio
( <audio> ), et vidéo ( <video> avec controls et <track> ) enrichit vos
pages. Pensez toujours à l'accessibilité et aux formats optimisés.
6. Formulaires : La balise <form> et les différents types d'inputs ( <input
type="..."> , <textarea> , <select> ) avec leurs attributs clés ( name , id ,
required , placeholder ) permettent l'interaction utilisateur. L'association
<label> et id est cruciale pour l'accessibilité.
7. Feuilles de styles CSS : La syntaxe sélecteur { propriété: valeur; }
est la base du CSS. Maîtriser les sélecteurs, le Box Model, les propriétés de mise en
page ( display , position , Flexbox, Grid), et le responsive design ( @media
queries ) est essentiel pour le style et l'adaptabilité de vos pages. Les transitions
ajoutent de l'interactivité.
La pratique régulière de ces éléments est la clé pour consolider vos compétences
et progresser dans votre parcours de développement web.
© 2024-25
[Link] 18/18