HTML & CSS

Support de cours élaboré par : Youssef CHAFAI

Date : 21 mai 2025 | Version : 1.0

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.

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.

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

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

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>

		<main>
		  <section>
			<h2>Présentation</h2>
			<p>Voici un paragraphe dans une section.</p>
		  </section>

		  <article>
			<h2>Article indépendant</h2>
			<p>Contenu autonome comme une news ou un post.</p>
		  </article>
		</main>

		<aside>
		  <p>Informations secondaires, lien utile...</p>
		</aside>

		<footer>
		  <p>© 2025 Mon site web</p>
		</footer>
	  </body>
	</html>

À retenir

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 :

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

<p>Ceci est <em>important</em> et <strong>très important</strong>.</p>

3.4 Sauts de ligne et séparateurs

3.5 Listes

Il existe 2 types de listes :

<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

<p>Voici une <mark>mise en évidence</mark>.</p>
	<p><abbr title=\"Cascading Style Sheets\">CSS</abbr> est un langage de style.</p>
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 :

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 :

Exemple avec ces sections :

<table>
	  <thead>
		<tr>
		  <th>Produit</th>
		  <th>Prix</th>
		</tr>
	  </thead>
	  <tbody>
		<tr>
		  <td>Stylo</td>
		  <td>1€</td>
		</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 :

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 :

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="photo.jpg" 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.

<img src="photo-petite.jpg" srcset="photo-grande.jpg 1024w, photo-petite.jpg 480w" alt="Description">

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="musique.ogg" 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="video.webm" 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="sous-titres.vtt" kind="subtitles" srclang="fr" label="Français">
	</video>

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-format.jpg">
	  <source media="(min-width: 465px)" srcset="moyen-format.jpg">
	  <img src="petit-format.jpg" alt="Description">
	</picture>

5.6 Bonnes pratiques

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

Un formulaire est défini par la balise <form>. À l'intérieur, on place des éléments d'entrée comme :

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\" required>

	  <label for=\"message\">Message :</label>
	  <textarea id=\"message\" name=\"message\" rows=\"4\"></textarea>

	  <button type=\"submit\">Envoyer</button>
	</form>

Attributs importants des champs

Validation native HTML5

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

Exemple avec différents types

<form>
	  <label>Nom d’utilisateur :</label>
	  <input type=\"text\" name=\"username\" placeholder=\"Votre pseudo\" required>

	  <label>Mot de passe :</label>
	  <input type=\"password\" name=\"password\" required>

	  <label>Âge :</label>
	  <input type=\"number\" name=\"age\" min=\"1\" max=\"100\">

	  <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\" value=\"homme\">
		<label for=\"homme\">Homme</label>
		<input type=\"radio\" id=\"femme\" name=\"gender\" value=\"femme\">
		<label for=\"femme\">Femme</label>
	  </fieldset>

	  <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;
	  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 :

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 :

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é :

Position contrôle le placement :

Pour les mises en page complexes, on utilise des systèmes modernes :

7.5 Couleurs, polices et styles

CSS permet de définir :

7.6 Responsive design

Pour que les pages s’adaptent à toutes tailles d’écran (mobiles, tablettes, desktop), on utilise :

@media (max-width: 600px) {
	  body {
		background-color: lightgrey;
	  }
	}

7.7 Transitions et animations

Pour rendre une page plus vivante, CSS propose :

button {
	  transition: background-color 0.3s ease;
	}
	button:hover {
	  background-color: #005f99;
	}

7.8 Organisation des styles

Le CSS peut être :

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 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

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.