Site Web et Bases de données

1 Introduction à la programmation web

1.1 Qu'est-ce que la programmation web ?
La programmation web est l'ensemble des techniques et des compétences utilisées pour créer, développer
et maintenir des sites web et des applications web. Elle englobe à la fois la conception de l'interface
utilisateur (ce que l'utilisateur voit et avec quoi il interagit) et la gestion des fonctionnalités en arrière-plan
(ce qui se passe côté serveur et dans la base de données).

La programmation web se divise généralement en deux grandes catégories :

1.1.1 Front-end (côté client)

Le front-end concerne tout ce que l'utilisateur voit et avec quoi il interagit directement dans son navigateur.
Il s'agit de la partie visible et interactive d'un site web.

- Technologies principales :

- HTML (HyperText Markup Language) : Structure et contenu de la page (titres, paragraphes, images, liens,
etc.).
- CSS (Cascading Style Sheets) : Style et mise en forme de la page (couleurs, polices, espacements,
animations, etc.).
- JavaScript : Ajoute de l'interactivité et des fonctionnalités dynamiques (validation de formulaire,
animations, mises à jour en temps réel, etc.).

- Frameworks et bibliothèques populaires :

- React, Angular, [Link] (pour JavaScript).

- Bootstrap, Tailwind CSS (pour CSS).

1.1.2 Back-end (côté serveur)

Le back-end concerne tout ce qui se passe en arrière-plan, c'est-à-dire la logique métier, la gestion des
données et la communication avec la base de données. C'est la partie invisible pour l'utilisateur, mais
essentielle au fonctionnement du site.

- Technologies principales :

- Langages de programmation : PHP, Python, Ruby, Java, [Link] (JavaScript côté serveur), etc.
- Bases de données : MySQL, PostgreSQL, MongoDB, etc.
- Serveurs web : Apache, Nginx, etc.

- Frameworks populaires :

- Express ([Link]), Django (Python), Laravel (PHP), Ruby on Rails (Ruby), etc.

~1~
1.1.3 Full-stack
Un développeur full-stack est capable de travailler à la fois sur le front-end et le back-end. Il maîtrise
l'ensemble des technologies nécessaires pour créer une application web complète.

1.1.4 Exemples d'applications web

- Sites vitrines (présentation d'une entreprise, portfolio).
- Blogs et sites d'actualités.
- Applications e-commerce (boutiques en ligne).
- Réseaux sociaux (Facebook, Twitter).
- Applications web complexes (Gmail, Google Docs).

En résumé, la programmation web est un domaine passionnant et essentiel pour créer des sites et des
applications qui fonctionnent sur Internet. Elle combine à la fois des aspects techniques et créatifs, ce qui
en fait un domaine très enrichissant à explorer.

1.2 Fonctionnement d'un site web

Le fonctionnement d'un site web repose sur une interaction entre plusieurs composants : le navigateur
(client), le serveur, et éventuellement une base de données. Voici une explication détaillée du processus,
étape par étape :

1. L'utilisateur fait une requête

- L'utilisateur saisit une URL (par exemple, [Link] dans son navigateur ou clique sur
un lien.
- Le navigateur envoie une requête HTTP (ou HTTPS) au serveur qui héberge le site web.

2. Le serveur reçoit la requête

- Le serveur web (par exemple, Apache, Nginx) reçoit la requête et détermine ce qu'il doit faire en fonction
de l'URL demandée.
- Si le site est statique (composé de fichiers HTML, CSS, JavaScript pré-définis), le serveur renvoie
directement ces fichiers au navigateur.
- Si le site est dynamique (utilisant un langage back-end comme PHP, Python ou [Link]), le serveur exécute
un script pour générer la page demandée.

3. Traitement côté serveur (pour les sites dynamiques)

- Le serveur exécute le code back-end (par exemple, un script PHP ou Python) pour effectuer des opérations
telles que :
- Interroger une base de données (par exemple, récupérer des articles de blog, des informations utilisateur,
etc.).
- Effectuer des calculs ou des traitements spécifiques.
- Préparer les données à afficher.
- Une fois le traitement terminé, le serveur génère une page HTML dynamique.

4. Le serveur envoie une réponse

- Le serveur envoie une réponse HTTP au navigateur. Cette réponse contient généralement :
- Du HTML : la structure de la page.
- Du CSS : le style et la mise en forme.

~2~
 - Du JavaScript : l'interactivité et les fonctionnalités dynamiques.
- D'autres ressources comme des images, des polices, etc.

5. Le navigateur affiche la page

- Le navigateur reçoit la réponse et commence à interpréter les fichiers reçus :

- Le HTML est analysé pour construire la structure de la page (DOM : Document Object Model).
- Le CSS est appliqué pour styliser la page (couleurs, polices, espacements, etc.).
- Le JavaScript est exécuté pour ajouter de l'interactivité (par exemple, des animations, des validations de
formulaire, des mises à jour en temps réel).
- Une fois tout cela fait, la page est affichée à l'utilisateur.

6. Interactions supplémentaires (si nécessaire)

- Si l'utilisateur interagit avec la page (par exemple, en cliquant sur un bouton ou en soumettant un
formulaire), le navigateur peut envoyer de nouvelles requêtes au serveur (via JavaScript ou en rechargeant
la page).
- Ces interactions peuvent déclencher des appels à une API (Application Programming Interface) pour
récupérer ou envoyer des données sans recharger toute la page (technologie AJAX).

1.2.1 Schéma simplifié du fonctionnement

1. Navigateur → Requête HTTP → Serveur
2. Serveur → Traitement (back-end + base de données) → Génération de la page
3. Serveur → Réponse HTTP (HTML, CSS, JavaScript) → Navigateur
4. Navigateur → Affichage de la page → Utilisateur

1.2.2 Exemple concret

Prenons l'exemple d'un blog :

1. L'utilisateur demande à voir la page d'accueil du blog ([Link]

2. Le serveur reçoit la requête, interroge la base de données pour récupérer la liste des articles récents.
3. Le serveur génère une page HTML dynamique avec les articles.
4. Le navigateur reçoit la page, l'affiche, et l'utilisateur peut lire les articles.
5. Si l'utilisateur clique sur un article, une nouvelle requête est envoyée pour afficher le contenu complet de
l'article.

En résumé, le fonctionnement d'un site web repose sur une collaboration entre le navigateur, le serveur et
la base de données. Chaque composant joue un rôle clé pour permettre aux utilisateurs d'accéder à des
pages web interactives et dynamiques.

1.3 Outils de développement

Présentation des outils essentiels : éditeurs de code (VS Code, Sublime Text, Notepad++), navigateurs, outils
de développement (DevTools).
Les langages de base du web, étudiés ci-dessous, sont HTML, CSS, JS, SQL et PHP (choix de ce cours).

~3~
2 HTML (Structure), initiation
Objectifs du cours :

- Comprendre ce qu'est le HTML et son rôle dans la création de sites web.

- Apprendre à utiliser les balises HTML de base pour structurer une page web.
- Créer une page web simple et fonctionnelle.
- Découvrir les bonnes pratiques et les outils pour écrire du HTML propre et valide.

2.1 Introduction au HTML

1.1 Qu'est-ce que le HTML ?

- Définition : Le HTML (HyperText Markup Language) est un langage de balisage utilisé pour créer des
pages web.
- À quoi sert-il ? Il permet de structurer le contenu d'une page web (titres, paragraphes, images, liens, etc.).
- Exemple concret : Montrer une page web simple et expliquer comment le HTML est utilisé pour afficher
le contenu.

2.2 Structure de base d'une page HTML

2.2.1 Les balises fondamentales
- <!DOCTYPE html> : Indique au navigateur que le document est en HTML5.
- <html> : Balise racine qui englobe tout le contenu de la page.
- <head> : Contient les métadonnées (titre, liens CSS, etc.).
- <body> : Contient tout le contenu visible de la page.

2.2.2 Exemple de structure de base

<!DOCTYPE html>
<html>
<head>
<title>Ma première page web</title>
</head>
<body>
<h1>Bienvenue sur ma page !</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>

2.2.3 Exercice pratique

- Créer un fichier [Link] et écrire la structure de base.
- Ouvrir le fichier dans un navigateur pour voir le résultat.

~4~
2.3 Les balises HTML courantes
2.3.1 Balises de texte
- <h1> à <h6> : Titres et sous-titres (du plus important au moins important).
- <p> : Paragraphes.
- <strong> et <em> : Mise en valeur du texte (gras et italique).
- <br> : Saut de ligne.
- <hr> : Ligne horizontale pour séparer des sections.

2.3.2 Balises de liste

- <ul> : Liste non ordonnée (à puces).
- <ol> : Liste ordonnée (numérotée).
- <li> : Élément de liste.

2.3.3 Balises de lien et d'image

- <a> : Lien hypertexte (attribut href pour l'URL).
- <img> : Image (attributs src pour l'URL de l'image et alt pour le texte alternatif).

2.3.4 Exemple complet

<!DOCTYPE html>
<html>
<head>
<title>Ma première page web</title>
</head>
<body>
<h1>Mon site web</h1>
<p>Ceci est un <strong>paragraphe</strong> avec un <em>lien</em> : <a
href="[Link] ici</a>.</p>
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
</ul>
<img src="[Link]" alt="Une image descriptive"> </body>
</html>

2.3.5 Exercice pratique

- Créer une page avec des titres, des paragraphes, une liste et une image.

2.4 Les attributs HTML

2.4.1 Qu'est-ce qu'un attribut ?
- Définition : Informations supplémentaires pour les balises.
- Exemple : <a href="[Link] (l'attribut href indique la destination du lien).

~5~
2.4.2 Attributs courants
- id et class : Pour identifier et styliser des éléments.
- href : Pour les liens.
- src et alt : Pour les images.
- style : Pour ajouter du CSS directement dans le HTML (à éviter si possible).

2.4.3 Exercice pratique

- Ajouter des liens et des images à une page HTML en utilisant les attributs.

2.5 Structuration avancée

2.5.1 Balises de structuration
- <header> : En-tête de la page ou d'une section.
- <main> : Contenu principal de la page.
- <footer> : Pied de page.
- <section> : Section thématique.
- <article> : Contenu indépendant (article de blog, par exemple).
- <div> et <span> : Conteneurs génériques (sans signification sémantique).

2.5.2 Exemple de structure sémantique

<header>
<h1>Mon site web</h1>
<nav>
<a href="#accueil">Accueil</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section>
<h2>À propos</h2>
<p>Ceci est une section à propos.</p>
</section>
<article>
<h2>Mon article</h2>
<p>Ceci est un article.</p>
</article>
</main>
<footer>
<p>&copy; 2023 Mon site web</p>
</footer>

2.5.3 Exercice pratique

- Structurer une page web avec des balises sémantiques.

~6~
2.6 Formulaires HTML
2.6.1 Balises de formulaire
- <form> : Conteneur du formulaire.
- <input> : Champs de saisie (texte, mot de passe, case à cocher, etc.).
- <label> : Étiquettes pour les champs.
- <button> : Boutons pour soumettre le formulaire.

2.6.2 Exemple de formulaire

<form>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required>
<br>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">Envoyer</button>
</form>

2.6.3 Exercice pratique

- Créer un formulaire de contact simple.

2.7 Intégration de médias

2.7.1 Balises multimédias
- <audio> : Pour intégrer des fichiers audio.
- <video> : Pour intégrer des fichiers vidéo.
- <iframe> : Pour intégrer des contenus externes (cartes Google, vidéos YouTube).

2.7.2 Exemple
<video controls>
<source src="video.mp4" type="video/mp4">
Votre navigateur ne supporte pas la vidéo.
</video>
<iframe src="[Link] allowfullscreen></iframe>

2.7.3 Exercice pratique

- Ajouter une vidéo YouTube à une page HTML.

2.8 Bonnes pratiques et validation

2.8.1 Validation du code HTML
- Utiliser le [validateur W3C]([Link] pour vérifier la syntaxe.

~7~
2.8.2 Bonnes pratiques
- Utiliser des balises sémantiques.
- Indenter correctement le code.
- Commenter le code pour le rendre plus lisible.

2.8.3 Exercice pratique

- Valider une page HTML et corriger les erreurs.

2.9 Projet final

2.9.1 Objectif
- Créer une page web complète en utilisant tout ce qui a été appris.

2.9.2 Instructions
- Structurer la page avec un en-tête, un contenu principal et un pied de page.
- Ajouter des titres, des paragraphes, des listes, des images et un formulaire.
- Utiliser des balises sémantiques et valider le code.

2.9.3 Exemple de projet

- Une page de présentation personnelle ou un blog simple.

2.10 Liste (exhaustive) des balises HTML,

Liste des balises HTML classées par catégorie, avec leurs attributs principaux et leurs nuances. Cette liste
est basée sur HTML5, la version la plus récente du langage.

2.10.1 Balises de structure de base

<!DOCTYPE>
- Rôle : Déclare le type de document et la version de HTML utilisée.
- Attributs : Aucun.
- Exemple : <!DOCTYPE html>

<html>
- Rôle : Conteneur racine de la page HTML.
- Attributs :
- lang : Définit la langue du document (ex: lang="fr").
- Exemple : <html lang="fr">

<head>
- Rôle : Contient les métadonnées du document (titre, liens CSS, scripts, etc.).
- Attributs : Aucun.
- Exemple : <head> <title>Titre de la page</title> </head>

<body>
- Rôle : Contient le contenu visible de la page.
- Attributs : Aucun.
- Exemple : <body>

~8~
 <h1>Bienvenue</h1>
</body>

2.10.2 Balises de métadonnées

<title>
- Rôle : Définit le titre de la page (affiché dans l'onglet du navigateur).
- Attributs : Aucun.
- Exemple : <title>Ma Page</title>

<meta>
- Rôle : Fournit des métadonnées sur le document (encodage, description, mots-clés, etc.).
- Attributs :
- charset : Définit l'encodage des caractères (ex: charset="UTF-8").
- name : Nom de la métadonnée (ex: name="description").
- content : Contenu de la métadonnée.
- Exemple : <meta charset="UTF-8">
<meta name="description" content="Description de la page">

<link>
- Rôle : Lie des ressources externes (feuilles de style, icônes, etc.).
- Attributs :
- rel : Type de relation (ex: rel="stylesheet").
- href : URL de la ressource.
- Exemple : <link rel="stylesheet" href="[Link]">

<style>
- Rôle : Définit des styles CSS directement dans le document.
- Attributs : Aucun.
- Exemple : <style> body { font-family: Arial, sans-serif; } </style>

<script>
- Rôle : Inclut ou définit du code JavaScript.
- Attributs :
- src : URL du fichier JavaScript.
- async : Charge le script de manière asynchrone.
- defer : Diffère l'exécution du script jusqu'à ce que le document soit chargé.
- Exemple : <script src="[Link]"></script>

2.10.3 Balises de texte

<h1> à <h6>
- Rôle : Définit des titres de différents niveaux.
- Attributs : Aucun.
- Exemple : <h1>Titre principal</h1> <h2>Sous-titre</h2>

<p>
- Rôle : Définit un paragraphe.
- Attributs : Aucun.
- Exemple : <p>Ceci est un paragraphe.</p>

<span>
- Rôle : Conteneur en ligne pour styliser ou manipuler du texte.

~9~
- Attributs : Aucun.
- Exemple : <p>Ceci est un <span style="color: red;">texte en rouge</span>.</p>

<strong>
- Rôle : Met en valeur un texte (généralement en gras).
- Attributs : Aucun.
- Exemple : <p>Ceci est <strong>important</strong>.</p>

<em>
- Rôle : Met en valeur un texte (généralement en italique).
- Attributs : Aucun.
- Exemple : <p>Ceci est <em>important</em>.</p>

<br>
- Rôle : Insère un saut de ligne.
- Attributs : Aucun.
- Exemple : <p>Ceci est la première ligne.<br>Ceci est la deuxième ligne.</p>

<hr>
- Rôle : Insère une ligne horizontale.
- Attributs : Aucun.
- Exemple : <p>Section 1</p>
<hr>
<p>Section 2</p>

2.10.4 Balises de liste

<ul>
- Rôle : Définit une liste non ordonnée.
- Attributs : Aucun.
- Exemple : <ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>

<ol>
- Rôle : Définit une liste ordonnée.
- Attributs :
- type : Type de numérotation (ex: type="A" pour des lettres).
- start : Valeur de départ de la numérotation.
- Exemple : <ol type="A">
<li>Élément 1</li>
<li>Élément 2</li>
</ol>

<li>
- Rôle : Définit un élément de liste.
- Attributs : Aucun.
- Exemple : <li>Élément 1</li>

2.10.5 Balises de lien et d'image

<a>

~ 10 ~
- Rôle : Définit un lien hypertexte.
- Attributs :
- href : URL de destination.
- target : Où ouvrir le lien (ex: target="_blank" pour un nouvel onglet).
- Exemple : <a href="[Link] target="_blank">Visitez Example</a>

<img>
- Rôle : Insère une image.
- Attributs :
- src : URL de l'image.
- alt : Texte alternatif (obligatoire pour l'accessibilité).
- width et height : Dimensions de l'image.
- Exemple : <img src="[Link]" alt="Description de l'image" width="300" height="200">

2.10.6 Balises de formulaire

Voici une liste exhaustive des balises HTML utilisées dans les formulaires, accompagnées de leurs variantes,
attributs, valeurs possibles et des exemples pour chaque balise.
1. <form>
La balise <form> définit un formulaire HTML.
Attributs :
- action : URL où les données du formulaire sont envoyées.
- method : Méthode HTTP (GET ou POST).
- enctype : Type d'encodage des données (application/x-www-form-urlencoded, multipart/form-data,
text/plain).
- autocomplete : Active ou désactive l'autocomplétion (on ou off ).
- novalidate : Désactive la validation du formulaire.
Exemple :
<form action="/submit" method="POST" enctype="multipart/form-data">
<!-- Champs du formulaire -->
</form>

2. <input>
La balise <input> est utilisée pour créer des champs de saisie.
Types d'<input> :
- text : Champ de texte.
- password : Champ de mot de passe.
- email : Champ pour une adresse e-mail.
- number : Champ pour un nombre.
- date : Champ pour une date.
- checkbox : Case à cocher.
- radio : Bouton radio.
- file : Champ pour téléverser un fichier.
- submit : Bouton de soumission.
- reset : Bouton de réinitialisation.
- button : Bouton générique.
- hidden : Champ caché.
- image : Bouton de soumission sous forme d'image.
- color : Sélecteur de couleur.

~ 11 ~
- range : Curseur pour une plage de valeurs.
- search : Champ de recherche.
- tel : Champ pour un numéro de téléphone.
- url : Champ pour une URL.
- time : Champ pour une heure.
- datetime-local : Champ pour une date et heure locales.
- week : Champ pour une semaine.
- month : Champ pour un mois.
Attributs communs :
- name : Nom du champ.
- value : Valeur par défaut.
- placeholder : Texte d'aide.
- required : Champ obligatoire.
- disabled : Désactive le champ.
- readonly : Rend le champ en lecture seule.
- maxlength : Nombre maximum de caractères.
- min et max : Valeurs minimale et maximale.
- step : Incrément pour les nombres ou les dates.
- pattern : Expression régulière pour valider la saisie.
- autofocus : Focus automatique sur le champ.
- autocomplete : Active ou désactive l'autocomplétion (on ou off ).
Exemples :
<input type="text" name="username" placeholder="Entrez votre nom" required>
<input type="email" name="email" placeholder="Entrez votre e-mail">
<input type="password" name="password" placeholder="Entrez votre mot de passe">
<input type="checkbox" name="subscribe" value="yes"> S'abonner
<input type="radio" name="gender" value="male"> Homme
<input type="file" name="file">
<input type="submit" value="Envoyer">

3. <textarea>
La balise <textarea> est utilisée pour créer une zone de texte multiligne.
Attributs :
- name : Nom du champ.
- rows : Nombre de lignes visibles.
- cols : Nombre de colonnes visibles.
- placeholder : Texte d'aide.
- required : Champ obligatoire.
- disabled : Désactive le champ.
- readonly : Rend le champ en lecture seule.
- maxlength : Nombre maximum de caractères.
- autofocus : Focus automatique sur le champ.
Exemple :
<textarea name="message" rows="5" cols="30" placeholder="Entrez votre message"></textarea>

4. <select>
La balise <select> est utilisée pour créer une liste déroulante.
Attributs :
- name : Nom du champ.
- multiple : Permet de sélectionner plusieurs options.

~ 12 ~
- required : Champ obligatoire.
- disabled : Désactive la liste.
- size : Nombre d'options visibles.
Exemple :
<select name="country" required>
<option value="fr">France</option>
<option value="us">États-Unis</option>
<option value="ca">Canada</option>
</select>

5. <option>
La balise <option> définit une option dans une liste déroulante (<select>).
Attributs :
- value : Valeur de l'option.
- selected : Option sélectionnée par défaut.
- disabled : Désactive l'option.
Exemple :
<option value="fr" selected>France</option>

6. <optgroup>
La balise <optgroup> regroupe des options dans une liste déroulante.
Attributs :
- label : Étiquette du groupe.
- disabled : Désactive tout le groupe.
Exemple :
<select name="car">
<optgroup label="Voitures">
<option value="sedan">Sedan</option>
<option value="suv">SUV</option>
</optgroup>
<optgroup label="Motos">
<option value="sport">Sport</option>
<option value="cruiser">Cruiser</option>
</optgroup>
</select>

7. <button>
La balise <button> est utilisée pour créer un bouton.
Types de <button> :
- submit : Bouton de soumission.
- reset : Bouton de réinitialisation.
- button : Bouton générique.
Attributs :
- name : Nom du bouton.
- value : Valeur du bouton.
- disabled : Désactive le bouton.
- autofocus : Focus automatique sur le bouton.
Exemple :
<button type="submit" name="submit">Envoyer</button>

8. <label>
La balise <label> associe une étiquette à un champ de formulaire.

~ 13 ~
Attributs :
- for : ID du champ associé.
Exemple :
<label for="username">Nom d'utilisateur :</label>
<input type="text" id="username" name="username">

9. <fieldset>
La balise <fieldset> regroupe des éléments de formulaire connexes.
Attributs :
- disabled : Désactive tous les éléments du groupe.
- form : ID du formulaire associé.
Exemple :
<fieldset>
<legend>Informations personnelles</legend>
<input type="text" name="name" placeholder="Nom">
<input type="email" name="email" placeholder="E-mail">
</fieldset>

10. <legend>
La balise <legend> définit une légende pour un <fieldset>.
Exemple :
<fieldset>
<legend>Informations personnelles</legend>
<!-- Champs -->
</fieldset>

11. <datalist>
La balise <datalist> fournit une liste d'options prédéfinies pour un champ de saisie.
Attributs :
- id : ID de la liste.
Exemple :
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>

12. <output>
La balise <output> affiche le résultat d'un calcul.
Attributs :
- for : ID des éléments associés.
- name : Nom de l'élément.
Exemple :
<input type="number" id="a" value="10"> +
<input type="number" id="b" value="20"> =
<output name="result" for="a b">30</output>

13. <meter>
La balise <meter> affiche une mesure dans une plage connue.
Attributs :
- value : Valeur actuelle.
- min : Valeur minimale.

~ 14 ~
- max : Valeur maximale.
- low : Valeur basse.
- high : Valeur haute.
- optimum : Valeur optimale.
Exemple :
<meter value="75" min="0" max="100">75%</meter>

14. <progress>
La balise <progress> affiche la progression d'une tâche.
Attributs :
- value : Valeur actuelle.
- max : Valeur maximale.
Exemple :
<progress value="50" max="100">50%</progress>

15. <input type="image">

La balise <input> de type image est utilisée pour créer un bouton de soumission sous forme d'image.
Attributs :
- src : URL de l'image.
- alt : Texte alternatif.
- width : Largeur de l'image.
- height : Hauteur de l'image.
Exemple :
<input type="image" src="[Link]" alt="Envoyer">

16. <input type="hidden">

La balise <input> de type hidden est utilisée pour stocker des données cachées.
Attributs :
- name : Nom du champ.
- value : Valeur du champ.
Exemple :
<input type="hidden" name="user_id" value="123">

17. <input type="color">

La balise <input> de type color est utilisée pour sélectionner une couleur.
Attributs :
- value : Valeur par défaut (au format hexadécimal).
Exemple :
<input type="color" name="color" value="#ff0000">

18. <input type="range">

La balise <input> de type range est utilisée pour créer un curseur.
Attributs :
- min : Valeur minimale.
- max : Valeur maximale.
- step : Incrément.
- value : Valeur par défaut.
Exemple :
<input type="range" name="volume" min="0" max="100" step="1" value="50">

~ 15 ~
19. <input type="search">
La balise <input> de type search est utilisée pour créer un champ de recherche.
Attributs :
- placeholder : Texte d'aide.
- autocomplete : Active ou désactive l'autocomplétion (on ou off ).
Exemple :
<input type="search" name="q" placeholder="Rechercher...">

20. <input type="tel">

La balise <input> de type tel est utilisée pour saisir un numéro de téléphone.
Attributs :
- pattern : Expression régulière pour valider la saisie.
- placeholder : Texte d'aide.
Exemple :
<input type="tel" name="phone" pattern="[0-9]{10}" placeholder="0123456789">

21. <input type="url">

La balise <input> de type url est utilisée pour saisir une URL.
Attributs :
- pattern : Expression régulière pour valider la saisie.
- placeholder : Texte d'aide.
Exemple :
<input type="url" name="website" placeholder="[Link]

22. <input type="time">

La balise <input> de type time est utilisée pour saisir une heure.
Attributs :
- min : Heure minimale.
- max : Heure maximale.
- step : Incrément.
Exemple :
<input type="time" name="appointment" min="09:00" max="18:00" step="900">

23. <input type="datetime-local">

La balise <input> de type datetime-local est utilisée pour saisir une date et une heure locales.
Attributs :
- min : Date et heure minimales.
- max : Date et heure maximales.
- step : Incrément.
Exemple :
<input type="datetime-local" name="meeting" min="2023-01-01T00:00" max="2023-12-31T23:59">

24. <input type="week">

La balise <input> de type week est utilisée pour saisir une semaine.
Attributs :
- min : Semaine minimale.
- max : Semaine maximale.
- step : Incrément.

~ 16 ~
Exemple :
<input type="week" name="vacation" min="2023-W01" max="2023-W52">

25. <input type="month">

La balise <input> de type month est utilisée pour saisir un mois.
Attributs :
- min : Mois minimal.
- max : Mois maximal.
- step : Incrément.
Exemple :
<input type="month" name="birthday" min="1900-01" max="2023-12">

26. <input type="image">

La balise <input> de type image est utilisée pour créer un bouton de soumission sous forme d'image.
Attributs :
- src : URL de l'image.
- alt : Texte alternatif.
- width : Largeur de l'image.
- height : Hauteur de l'image.
Exemple :
<input type="image" src="[Link]" alt="Envoyer">

27. <input type="hidden">

La balise <input> de type hidden est utilisée pour stocker des données cachées.
Attributs :
- name : Nom du champ.
- value : Valeur du champ.
Exemple :
<input type="hidden" name="user_id" value="123">

28. <input type="color">

La balise <input> de type color est utilisée pour sélectionner une couleur.
Attributs :
- value : Valeur par défaut (au format hexadécimal).
Exemple :
<input type="color" name="color" value="#ff0000">

29. <input type="range">

La balise <input> de type range est utilisée pour créer un curseur.
Attributs :
- min : Valeur minimale.
- max : Valeur maximale.
- step : Incrément.
- value : Valeur par défaut.
Exemple :
<input type="range" name="volume" min="0" max="100" step="1" value="50">

30. <input type="search">

La balise <input> de type search est utilisée pour créer un champ de recherche.
Attributs :

~ 17 ~
- placeholder : Texte d'aide.
- autocomplete : Active ou désactive l'autocomplétion (on ou off ).
Exemple :
<input type="search" name="q" placeholder="Rechercher...">

31. <input type="tel">

La balise <input> de type tel est utilisée pour saisir un numéro de téléphone.
Attributs :
- pattern : Expression régulière pour valider la saisie.
- placeholder : Texte d'aide.
Exemple :
<input type="tel" name="phone" pattern="[0-9]{10}" placeholder="0123456789">

32. <input type="url">

La balise <input> de type url est utilisée pour saisir une URL.
Attributs :
- pattern : Expression régulière pour valider la saisie.
- placeholder : Texte d'aide.
Exemple :
<input type="url" name="website" placeholder="[Link]

33. <input type="time">

La balise <input> de type time est utilisée pour saisir une heure.
Attributs :
- min : Heure minimale.
- max : Heure maximale.
- step : Incrément.
Exemple :
<input type="time" name="appointment" min="09:00" max="18:00" step="900">

34. <input type="datetime-local">

La balise <input> de type datetime-local est utilisée pour saisir une date et une heure locales.
Attributs :
- min : Date et heure minimales.
- max : Date et heure maximales.
- step : Incrément.
Exemple :
<input type="datetime-local" name="meeting" min="2023-01-01T00:00" max="2023-12-31T23:59">

35. <input type="week">

La balise <input> de type week est utilisée pour saisir une semaine.
Attributs :
- min : Semaine minimale.
- max : Semaine maximale.
- step : Incrément.
Exemple :
<input type="week" name="vacation" min="2023-W01" max="2023-W52">

36. <input type="month">

La balise <input> de type month est utilisée pour saisir un mois.

~ 18 ~
Attributs :
- min : Mois minimal.
- max : Mois maximal.
- step : Incrément.
Exemple :
<input type="month" name="birthday" min="1900-01" max="2023-12">

2.10.7 Balises de tableau

<table>
- Rôle : Définit un tableau.
- Attributs : Aucun.
- Exemple : <table>
<tr>
<th>Nom</th>
<th>Âge</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>

<tr>
- Rôle : Définit une ligne de tableau.
- Attributs : Aucun.
- Exemple : <tr>
<td>Alice</td>
<td>25</td>
</tr>

<th>
- Rôle : Définit une cellule d'en-tête de tableau.
- Attributs : Aucun.
- Exemple : <th>Nom</th>
<td>
- Rôle : Définit une cellule de tableau.
- Attributs : Aucun.
- Exemple : <td>Alice</td>

2.10.8 Balises multimédias

<audio>
- Rôle : Insère un fichier audio.
- Attributs :
- src : URL du fichier audio.
- controls : Affiche les contrôles de lecture.
- Exemple : <audio src="audio.mp3" controls></audio>
<video>
- Rôle : Insère un fichier vidéo.
- Attributs :
- src : URL du fichier vidéo.
~ 19 ~
 - controls : Affiche les contrôles de lecture.
- Exemple : <video src="video.mp4" controls></video>
<iframe>
- Rôle : Insère une page web ou une vidéo externe.
- Attributs :
- src : URL de la ressource.
- width et height : Dimensions de l'iframe.
- Exemple : <iframe src="[Link] width="600" height="400"></iframe>

2.10.9 Balises sémantiques (HTML5)

<header>
- Rôle : Définit l'en-tête d'une section ou d'une page.
- Attributs : Aucun.
- Exemple : <header>
<h1>Titre de la page</h1>
</header>

<footer>
- Rôle : Définit le pied de page d'une section ou d'une page.
- Attributs : Aucun.
- Exemple : <footer>
<p>Copyright 2023</p>
</footer>

<section>
- Rôle : Définit une section thématique dans un document.
- Attributs : Aucun.
- Exemple : <section>
<h2>Section 1</h2>
<p>Contenu de la section.</p>
</section>

<article>
- Rôle : Définit un contenu indépendant (article de blog, etc.).
- Attributs : Aucun.
- Exemple : <article>
<h2>Titre de l'article</h2>
<p>Contenu de l'article.</p>
</article>

<nav>
- Rôle : Définit une section de navigation.
- Attributs : Aucun.
- Exemple : <nav>
<a href="/">Accueil</a>
<a href="/about">À propos</a>
</nav>

2.10.10 Balises de mise en forme

<div>
- Rôle : Conteneur générique pour regrouper des éléments.
- Attributs : Aucun.

~ 20 ~
- Exemple : <div>
<p>Contenu du conteneur.</p>
</div>

<span>
- Rôle : Conteneur en ligne pour styliser ou manipuler du texte.
- Attributs : Aucun.
- Exemple : <p>Ceci est un <span style="color: red;">texte en rouge</span>.</p>

2.10.11 Balises de script et de métadonnées

<script>
- Rôle : Inclut ou définit du code JavaScript.
- Attributs :
- src : URL du fichier JavaScript.
- async : Charge le script de manière asynchrone.
- defer : Diffère l'exécution du script jusqu'à ce que le document soit chargé.
- Exemple : <script src="[Link]"></script>
<noscript>
- Rôle : Affiche un contenu alternatif si JavaScript est désactivé.
- Attributs : Aucun.
- Exemple : <noscript>
<p>Veuillez activer JavaScript pour utiliser cette application.</p>
</noscript>

2.10.12 Balises de commentaire

<!-- -->
- Rôle : Ajoute un commentaire dans le code HTML.
- Attributs : Aucun.
- Exemple : <!-- Ceci est un commentaire -->

~ 21 ~
3 CSS (Style)
Objectifs du cours :
- Comprendre ce qu'est le CSS et son rôle dans la mise en forme des pages web.
- Apprendre à utiliser les sélecteurs, les propriétés et les valeurs CSS.
- Appliquer des styles à une page HTML pour la rendre visuellement attrayante.
- Découvrir les bonnes pratiques et les outils pour écrire du CSS efficace.

3.1 Introduction au CSS

3.1.1 Qu'est-ce que le CSS ?
- Définition : CSS (Cascading Style Sheets) est un langage utilisé pour décrire la présentation d'une page web
(couleurs, polices, espacements, etc.).
- Rôle du CSS : Séparer le contenu (HTML) de la présentation (CSS).
- Exemple concret : Montrer une page web avec et sans CSS pour illustrer l'importance du style.

3.1.2 Comment fonctionne le CSS ?

- Liaison entre HTML et CSS :
- Utilisation de la balise <link> pour relier un fichier CSS à un fichier HTML.
- Exemple : <link rel="stylesheet" href="[Link]">
- Syntaxe de base :
- Un ensemble de règles CSS se compose d'un sélecteur, d'une propriété et d'une valeur.
- Exemple : h1 {
color: blue;
font-size: 24px;
}

3.1.3 Les outils nécessaires

- Éditeur de texte : VS Code, Sublime Text, etc.
- Navigateur web : Chrome ou Firefox pour tester les styles.
- Outils de développement : Utiliser les outils de développement du navigateur (F12) pour inspecter et
déboguer le CSS.

3.2 Les bases du CSS

3.2.1 Les sélecteurs CSS
- Sélecteurs de base :
- Sélecteur d'élément (h1, p, etc.).
- Sélecteur de classe (.ma-classe).
- Sélecteur d'identifiant (mon-id).
- Exemples : h1 {
color: red;
}
.ma-classe {
font-size: 18px;
}
mon-id {
background-color: yellow;
}

~ 22 ~
3.2.2 Les propriétés CSS courantes
- Couleurs :
- color : Couleur du texte.
- background-color : Couleur de fond.
- Polices :
- font-family : Police de caractères.
- font-size : Taille de la police.
- font-weight : Épaisseur de la police (gras).
- Espacements :
- margin : Marge extérieure.
- padding : Marge intérieure.
- Bordures :
- border : Bordure autour d'un élément.
- border-radius : Coins arrondis.

3.2.3 Exemple complet

h1 {
color: blue;
font-size: 32px;
font-family: Arial, sans-serif;
}
p {
color: green;
margin: 10px;
padding: 5px;
border: 1px solid black;
}

3.2.4 Exercice pratique

- Créer un fichier CSS et appliquer des styles à une page HTML simple.

3.3 Les sélecteurs avancés et la cascade

3.3.1 Les sélecteurs avancés
- Sélecteurs combinés :
- Descendant (div p : tous les <p> dans un <div>).
- Enfant direct (div > p : les <p> enfants directs d'un <div>).
- Frère adjacent (h1 + p : le <p> qui suit immédiatement un <h1>).
- Sélecteurs d'attribut :
- [type="text"] : Sélectionne les éléments avec un attribut spécifique.

3.3.2 La cascade et la spécificité

- Ordre d'application des styles :

~ 23 ~
 - Importance : !important.
- Spécificité : Les sélecteurs plus spécifiques ont priorité.
- Ordre dans le fichier CSS : Les styles définis plus tard écrasent les précédents.
- Exemple : p {
color: red;
}
p {
color: blue; /* Ce style sera appliqué */
}

3.3.3 Exercice pratique

- Utiliser des sélecteurs avancés pour styliser une page HTML complexe.

3.4 Le modèle de boîte (Box Model)

3.4.1 Qu'est-ce que le modèle de boîte ?
- Composants :
- Contenu (content).
- Marge intérieure (padding).
- Bordure (border).
- Marge extérieure (margin).
- Exemple : div {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}

3.4.2 La propriété box-sizing

- box-sizing: content-box; : La largeur et la hauteur n’incluent que le contenu.
- box-sizing: border-box; : La largeur et la hauteur incluent le contenu, le padding et la bordure.
- Exemple : div {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
}

3.4.3 Exercice pratique

- Manipuler les marges, les paddings et les bordures pour comprendre le modèle de boîte.

3.5 Le positionnement et la mise en page

3.5.1 Les types de positionnement
- position: static; : Positionnement par défaut.
- position: relative; : Positionnement relatif à sa position normale.
- position: absolute; : Positionnement absolu par rapport à un parent positionné.
- position: fixed; : Positionnement fixe par rapport à la fenêtre du navigateur.
- position: sticky; : Positionnement collant.

~ 24 ~
3.5.2 Flexbox
- Introduction à Flexbox :
- display: flex; : Active Flexbox sur un conteneur.
- Propriétés principales : justify-content, align-items, flex-direction, flex-wrap.
- Exemple : .container {
display: flex;
justify-content: space-between;
align-items: center;
}

3.5.3 Exercice pratique

- Créer une mise en page simple avec Flexbox.

3.6 Les médias queries et le responsive design

3.6.1 Qu'est-ce qu'une média query ?
- Définition : Une règle CSS qui applique des styles en fonction des caractéristiques de l'appareil (largeur de
l'écran, orientation, etc.).
- Syntaxe : @media (max-width: 768px) {
body {
background-color: lightblue;
}
}

3.6.2 Le responsive design

- Objectif : Adapter la mise en page à différents appareils (ordinateur, tablette, mobile).
- Bonnes pratiques : Utiliser des unités relatives (%, em, rem) et des médias queries.

3.6.3 Exercice pratique

- Créer une page web responsive avec des médias queries.

3.7 Les animations et les transitions

3.7.1 Les transitions CSS
- Définition : Permet de créer des effets de transition entre deux états.
- Propriétés : transition-property, transition-duration, transition-timing-function.
- Exemple : button {
background-color: blue;
transition: background-color 0.5s ease;
}
button:hover {
background-color: red;
}

3.7.2 Les animations CSS

- Définition : Permet de créer des animations complexes.
- Propriétés : @keyframes, animation-name, animation-duration.
- Exemple : @keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}

~ 25 ~
 div {
animation: slide 2s infinite;
}

3.7.3 Exercice pratique

- Ajouter des transitions et des animations à une page web.

3.8 Bonnes pratiques et outils

3.8.1 Bonnes pratiques en CSS
- Organisation du code : Utiliser des commentaires et des fichiers séparés.
- Noms de classes : Utiliser des noms descriptifs et cohérents (méthodologie BEM).
- Éviter les styles en ligne : Préférer les fichiers CSS externes.

3.8.2 Outils utiles

- Préprocesseurs CSS : Sass, Less.
- Frameworks CSS : Bootstrap, Tailwind CSS.
- Validateur CSS : [Validateur W3C]([Link]

3.8.3 Exercice pratique

- Organiser et valider un fichier CSS.

3.9 Projet final

3.9.1 Objectif
- Créer une page web stylisée en utilisant tout ce qui a été appris.

3.9.2 Instructions
- Structurer la page avec HTML.
- Appliquer des styles CSS pour la mise en forme, le positionnement et le responsive design.
- Ajouter des animations ou des transitions.

3.9.3 Exemple de projet

- Une page de portfolio ou un blog simple.

3.9.4 Ressources supplémentaires

- Documentation :

- [MDN Web Docs (CSS)]([Link]

- [W3Schools (CSS)]([Link]
- Outils :
- [CodePen]([Link] pour s'entraîner en ligne.
- [VS Code]([Link] pour coder localement.
Conseils pédagogiques

- Apprendre en pratiquant : Encouragez les étudiants à coder dès le début.

- Projets simples : Proposez des exercices courts et progressifs.
- Encourager la curiosité : Montrez des exemples de sites web pour inspirer les étudiants.
- Support visuel : Utilisez des schémas pour expliquer les concepts CSS.

~ 26 ~
3.10 Présentation exhaustive du langage CSS,
Nous aborderons d'abord les sélecteurs, puis les propriétés avec leurs nuances et valeurs possibles,
accompagnées d'exemples unitaires et de synthèse.

3.10.1 Les sélecteurs CSS

Les sélecteurs permettent de cibler des éléments HTML pour leur appliquer des styles. Voici les principaux
types de sélecteurs :

[Link] Sélecteurs de base

Sélecteur d'élément
- Cible : Tous les éléments d'un type donné.
- Exemple :
p {
color: blue;
}
Applique la couleur bleue à tous les paragraphes (<p>).

Sélecteur de classe
- Cible : Tous les éléments ayant la classe spécifiée.
- Exemple :
.ma-classe {
font-size: 18px;
}
Applique une taille de police de 18px à tous les éléments avec class="ma-classe".

Sélecteur d'identifiant
- Cible : L'élément ayant l'identifiant spécifié.
- Exemple :
#mon-id {
background-color: yellow;
}
Applique un fond jaune à l'élément avec id="mon-id".

[Link] Sélecteurs combinés

Sélecteur descendant
- Cible : Les éléments descendants d'un autre élément.
- Exemple :
div p {
color: red;
}
Applique la couleur rouge à tous les paragraphes (<p>) à l'intérieur d'une <div>.

Sélecteur enfant direct

- Cible : Les éléments enfants directs d'un autre élément.
- Exemple :
div > p {
font-weight: bold;
}
Applique une police en gras aux paragraphes (<p>) enfants directs d'une <div>.

Sélecteur de frère adjacent

~ 27 ~
- Cible : L'élément qui suit immédiatement un autre élément.
- Exemple :
h1 + p {
margin-top: 0;
}
Supprime la marge supérieure du paragraphe (<p>) qui suit immédiatement un titre (<h1>).

[Link] Sélecteurs d'attribut

Sélecteur d'attribut simple
- Cible : Les éléments ayant un attribut spécifique.
- Exemple :
a[target] {
color: green;
}
Applique la couleur verte à tous les liens (<a>) ayant un attribut target.

Sélecteur d'attribut avec valeur

- Cible : Les éléments ayant un attribut avec une valeur spécifique.
- Exemple : input[type="text"] {
border: 1px solid black;
}
Applique une bordure noire aux champs de texte (<input type="text">).

[Link] Sélecteurs pseudo-classes et pseudo-éléments

Pseudo-classes
- Cible : Les éléments dans un état particulier.
- Exemples : a:hover {
color: red;
}
Change la couleur des liens (<a>) au survol.
li:nth-child(odd) {
background-color: #f0f0f0;
}
Applique un fond gris clair aux éléments impairs d'une liste (<li>).

Pseudo-éléments
- Cible : Une partie spécifique d'un élément.
- Exemples :
p::first-line {
font-weight: bold;
}
Met en gras la première ligne d'un paragraphe (<p>).
p::after {
content: " - Fin";
}
Ajoute le texte " - Fin" après chaque paragraphe (<p>).

3.10.2 Les propriétés CSS

Les propriétés CSS définissent l'apparence des éléments. Voici les principales catégories de propriétés, avec
leurs nuances et valeurs possibles.

~ 28 ~
[Link] Propriétés de texte
color
- Rôle : Définit la couleur du texte.
- Valeurs : Nom de couleur, code hexadécimal, RGB, RGBA, HSL, HSLA.
- Exemple : p {
color: #ff5733; /* Orange */
}

font-family
- Rôle : Définit la police de caractères.
- Valeurs : Nom de police (ex: Arial, Times New Roman).
- Exemple : body {
font-family: Arial, sans-serif;
}

font-size
- Rôle : Définit la taille de la police.
- Valeurs : Pixels (px), pourcentages (%), em, rem.
- Exemple : h1 {
font-size: 2rem;
}

text-align
- Rôle : Aligne le texte horizontalement.
- Valeurs : left, right, center, justify.
- Exemple : p {
text-align: center;
}

[Link] Propriétés de boîte (Box Model)

width et height
- Rôle : Définit la largeur et la hauteur d'un élément.
- Valeurs : Pixels (px), pourcentages (%), auto.
- Exemple : div {
width: 300px;
height: 200px;
}

margin et padding
- Rôle : Définit les marges extérieures (margin) et intérieures (padding).
- Valeurs : Pixels (px), pourcentages (%), auto.
- Exemple : div {
margin: 10px;
padding: 20px;
}

border
- Rôle : Définit la bordure d'un élément.
- Valeurs : Largeur, style, couleur (ex: 1px solid black).
- Exemple : div {
border: 2px dashed red;
}

~ 29 ~
[Link] Propriétés de positionnement
position
- Rôle : Définit le type de positionnement.
- Valeurs : static, relative, absolute, fixed, sticky.
- Exemple : div {
position: relative;
top: 10px;
left: 20px;
}

display
- Rôle : Définit le type d'affichage.
- Valeurs : block, inline, inline-block, flex, grid, none.
- Exemple : div {
display: flex;
justify-content: center;
}

[Link] Propriétés de flexbox

flex-direction
- Rôle : Définit la direction des éléments flexibles.
- Valeurs : row, row-reverse, column, column-reverse.
- Exemple : .container {
display: flex;
flex-direction: column;
}

justify-content
- Rôle : Aligne les éléments sur l'axe principal.
- Valeurs : flex-start, flex-end, center, space-between, space-around.
- Exemple : .container {
display: flex;
justify-content: space-between;
}

[Link] Propriétés de transition et d'animation

transition
- Rôle : Définit une transition entre deux états.
- Valeurs : Propriété, durée, fonction de timing (ex: all 0.3s ease).
- Exemple : button {
transition: background-color 0.3s ease;
}
button:hover {
background-color: red;
}

animation
- Rôle : Définit une animation.
- Valeurs : Nom, durée, fonction de timing, délai, itérations.
- Exemple : @keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
div {
animation: slide 2s infinite;
}

~ 30 ~
3.10.3 Exemple de synthèse
Voici un exemple de synthèse utilisant plusieurs propriétés CSS :
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}

header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}

.container {
display: flex;
justify-content: space-between;
margin-top: 20px;
}

.box {
background-color: white;
border: 1px solid #ddd;
padding: 20px;
width: 30%;
transition: transform 0.3s ease;
}

.box:hover {
transform: scale(1.05);
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
margin-top: 20px;
}

Conclusion
Ce guide exhaustif couvre les sélecteurs et les propriétés CSS les plus couramment utilisés, avec des
exemples pour chaque concept. En maîtrisant ces éléments, vous serez capable de créer des styles CSS
efficaces et bien organisés. Bonne chance dans votre apprentissage !

~ 31 ~
3.10.4 Exercices corrigés :
Niveau 1 : Bases HTML et CSS
Exercice 1 : Ma première page web
• Consignes :
o Créez un fichier HTML ([Link]) et un fichier CSS ([Link]).
o Dans le fichier HTML, ajoutez un titre (<h1>), un paragraphe de texte (<p>) et une image
(<img>).
o Dans le fichier CSS, définissez le style du titre (couleur, police, taille), du paragraphe (couleur,
marge) et de l'image (taille, bordure).
o Liez le fichier CSS au fichier HTML.
• Solution :
HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma première page web</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Bienvenue sur ma page web</h1>
<p>Ceci est un paragraphe de texte.</p>
<img src="[Link]" alt="Description de l'image">
</body>
</html>
CSS
h1 {
color: blue;
font-family: Arial, sans-serif;
font-size: 2em;
}

p {
color: #333;
margin: 20px;
}

img {
width: 200px;
border: 1px solid black;
}

Exercice 2 : Structure de base

• Consignes :
o Créez une page web avec une en-tête (<header>), une navigation (<nav>), une section
principale (<main>), une barre latérale (<aside>) et un pied de page (<footer>).
o Ajoutez du contenu (texte, images) dans chaque section.
o Utilisez CSS pour mettre en forme les différentes sections (couleurs, marges, disposition).
• Solution :
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">

~ 32 ~
 <title>Structure de base</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Mon site web</h1>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Section principale</h2>
<p>Contenu de la section principale.</p>
</section>
</main>
<aside>
<h3>Barre latérale</h3>
<p>Contenu de la barre latérale.</p>
</aside>
<footer>
<p>Pied de page</p>
</footer>
</body>
</html>

CSS
header {
background-color: #f0f0f0;
padding: 20px;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
}

nav li {
display: inline;
margin-right: 20px;
}

main {
padding: 20px;
}

aside {
background-color: #eee;
padding: 20px;
}

footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}

~ 33 ~
Exercice 3 : Formulaires
• Consignes :
o Créez un formulaire avec les champs suivants :
 Nom (champ texte)
 E-mail (champ e-mail)
 Mot de passe (champ mot de passe)
 Bouton radio (choix multiple)
 Case à cocher
o Utilisez CSS pour styliser le formulaire (étiquettes, champs, bouton).
• Solution :

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8">

<title>Formulaire</title> <link rel="stylesheet" href="[Link]"> </head> <body>
<form> <label for="nom">Nom :</label> <input type="text" id="nom" name="nom"><br><br>
<label for="email">E-mail :</label>
<input type="email" id="email" name="email"><br><br>

<label for="motdepasse">Mot de passe :</label>

<input type="password" id="motdepasse" name="motdepasse"><br><br>

<p>Choix multiple :</p>

<input type="radio" id="choix1" name="choix">
<label for="choix1">Option 1</label>
<input type="radio" id="choix2" name="choix">
<label for="choix2">Option 2</label><br><br>

<input type="checkbox" id="case" name="case">

<label for="case">Case à cocher</label><br><br>

<input type="submit" value="Envoyer">

</form>
</body>
</html>

label {
display: block;
margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="password"] {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
}

input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
cursor: pointer;
}

Niveau 2 : Mise en page et design

Exercice 1 : Disposition avec Flexbox
• Consignes :

~ 34 ~
 o Créez une page web avec la mise en page suivante :
 En-tête avec un logo à gauche et un menu de navigation à droite.
 Section principale avec du texte sur la gauche et une image sur la droite.
 Pied de page centré.
o Utilisez Flexbox pour organiser les éléments et les rendre réactifs (adaptés à différentes
tailles d'écran).
• Solution :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Disposition avec Flexbox</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<div class="logo">Logo</div>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<div class="content">
<h2>Section principale</h2>
<p>Contenu de la section principale.</p>
</div>
<div class="image">
<img src="[Link]" alt="Image">
</div>
</main>
<footer>
<p>Pied de page</p>
</footer>
</body>
</html>

CSS
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}

.logo {
font-size: 1.5em;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}

nav li {
margin-left: 20px;
}

~ 35 ~
 main {
display: flex;
padding: 20px;
}

.content {
flex: 1;
}

.image {
width: 300px;
margin-left: 20px;
}

footer {
text-align: center;
padding: 10px;
}

/* Media query pour la réactivité */

@media (max-width: 768px) {
main {
flex-direction: column;
}

.image {
margin-left: 0;
margin-top: 20px;
width: 100%;
}
}

Exercice 2 : Grilles CSS

• Consignes :
o Créez une page web avec une grille de 3 colonnes.
o Dans chaque colonne, ajoutez du contenu (texte, images).
o Utilisez les grilles CSS pour définir la structure de la page et positionner les éléments.
• Solution :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Grilles CSS</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="grid-container">
<div class="grid-item">
<h2>Colonne 1</h2>
<p>Contenu de la colonne 1.</p>
</div>
<div class="grid-item">
<h2>Colonne 2</h2>
<p>Contenu de la colonne 2.</p>
</div>
<div class="grid-item">
<h2>Colonne 3</h2>
<p>Contenu de la colonne 3.</p>
</div>
</div>

~ 36 ~
 </body>
</html>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 colonnes de largeur égale */
gap: 20px; /* Espacement entre les colonnes */
padding: 20px;
}

.grid-item {
border: 1px solid #ccc;
padding: 20px;
}

Exercice 3 : Effets CSS

• Consignes :
o Créez un bouton avec un effet de survol (changement de couleur et ombre portée).
o Ajoutez une transition pour un effet de fondu au survol d'une image.
o Créez une animation simple (par exemple, un élément qui se déplace).
• Solution :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Effets CSS</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<button>Mon bouton</button>
<img src="[Link]" alt="Image">
<div class="element"></div>
</body>
</html>
CSS
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Transition pour
les effets */
}

button:hover {
background-color: #3e8e41;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Ombre portée */
}

img {
transition: opacity 0.3s ease; /* Transition pour l'opacité */
}

img:hover {
opacity: 0.8; /* Effet de fondu */
}

.element {
width: 100px;
height: 100px;
background-color: blue;

~ 37 ~
 animation: deplacement 2s linear infinite; /* Animation */
}

@keyframes deplacement {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}

Niveau 2 : Mise en page et design (suite)

Exercice 4 : Mise en page responsive avec Flexbox et Media Queries
• Consignes :
o Reprenez l'exercice 1 (Disposition avec Flexbox).
o Ajoutez des Media Queries pour adapter la mise en page à différentes tailles d'écran :
 Sur les écrans plus petits (par exemple, les smartphones), passez à une disposition
en colonne.
 Ajustez les tailles des éléments et les marges pour une meilleure lisibilité.
• Solution (extrait) :

/* ... (styles précédents) ... */

@media (max-width: 768px) {

header {
flex-direction: column;
align-items: flex-start;
}

nav ul {
flex-direction: column;
}

nav li {
margin-left: 0;
margin-bottom: 10px;
}

main {
flex-direction: column;
}

.image {
margin-left: 0;
margin-top: 20px;
width: 100%;
}
}

Exercice 5 : Création d'un menu de navigation déroulant en CSS

• Consignes :
o Créez un menu de navigation avec des éléments de niveau supérieur et des sous-menus
déroulants.
o Utilisez uniquement CSS (pas de JavaScript) pour gérer l'affichage et la disparition des sous-
menus au survol des éléments parents.

~ 38 ~
 • Solution (extrait) :

nav ul {
list-style: none;
margin: 0;
padding: 0;
}

nav li {
display: inline-block;
position: relative; /* Pour positionner le sous-menu */
}

nav a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}

nav ul ul { /* Style pour les sous-menus */

display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

nav li:hover > ul { /* Afficher le sous-menu au survol de l'élément parent */

display: block;
}

nav ul ul li {
display: block;
}

nav ul ul a {
padding: 10px;
}

Exercice 6 : Animation CSS avec Keyframes

• Consignes :
o Créez une animation CSS plus complexe avec des keyframes.
o Par exemple, faites bouger un élément, changez sa couleur et sa taille, le tout avec des
transitions fluides.
• Solution (extrait) :

.element {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
animation: animationComplexe 2s linear infinite;
}

@keyframes animationComplexe {
0% {
transform: translateX(0) rotate(0deg);
background-color: blue;
}
50% {
transform: translateX(200px) rotate(180deg);

~ 39 ~
 background-color: red;
width: 150px;
height: 150px;
}
100% {
transform: translateX(0) rotate(360deg);
background-color: blue;
}
}

~ 40 ~
4 JavaScript (Interactivité)
Objectifs du cours :
- Comprendre ce qu'est JavaScript et son rôle dans le développement web.
- Apprendre les bases de la syntaxe JavaScript.
- Manipuler le DOM pour rendre les pages web interactives.
- Découvrir les bonnes pratiques et les outils pour écrire du JavaScript efficace.

4.1 Introduction à JavaScript

4.1.1 Qu'est-ce que JavaScript ?
- Définition : JavaScript est un langage de programmation utilisé pour rendre les pages web interactives.
- Rôle de JavaScript : Ajouter des fonctionnalités dynamiques (animations, validations de formulaire, mises
à jour en temps réel, etc.).
- Exemple concret : Montrer une page web avec et sans JavaScript pour illustrer l'interactivité.

4.1.2 Comment fonctionne JavaScript ?

- Liaison entre HTML et JavaScript :
- Utilisation de la balise <script> pour inclure du JavaScript dans une page HTML.
- Exemple : <script src="[Link]"></script>
- Syntaxe de base :
- Un script JavaScript se compose d'instructions exécutées séquentiellement.
- Exemple : [Link]("Bonjour, monde !");

4.1.3 Les outils nécessaires

- Éditeur de texte : VS Code, Sublime Text, etc.
- Navigateur web : Chrome ou Firefox pour tester les scripts.
- Outils de développement : Utiliser les outils de développement du navigateur (F12) pour inspecter et
déboguer le JavaScript.

4.2 Les bases de JavaScript

4.2.1 Les variables
- Déclaration de variables :
- let : Pour les variables modifiables.
- const : Pour les variables constantes.
- var : Ancienne méthode (à éviter).
- Exemple : let nom = "Alice";
const age = 25;

4.2.2 Les types de données

- Types primitifs :
- string : Chaîne de caractères.
- number : Nombre.
- boolean : Vrai ou faux.
- null et undefined : Valeurs spéciales.

~ 41 ~
- Exemple : let nom = "Alice"; // string
let age = 25; // number
let estEtudiant = true; // boolean

4.2.3 Les opérateurs

- Arithmétiques : +, -, *, /, %.
- Comparaison : ==, ===, !=, !==, >, <, >=, <=.
- Logiques : &&, ||, !.
- Exemple : let somme = 10 + 5; // 15
let estMajeur = age >= 18; // true ou false

Les opérateurs de comparaison en JavaScript sont utilisés pour comparer deux valeurs et renvoyer un résultat
booléen (true ou false). Ils sont essentiels pour les conditions, les boucles et les décisions dans votre code.
Voici une explication détaillée des opérateurs de comparaison en JavaScript, avec des exemples pour chaque
cas.

1. Les opérateurs de comparaison de base

1.1 == (Égalité faible)
- Rôle : Compare deux valeurs en vérifiant si elles sont égales, sans tenir compte du type de données.
- Exemple : [Link](5 == 5); // true
[Link](5 == '5'); // true (conversion de type implicite)
[Link](0 == false); // true (0 et false sont considérés comme égaux)

1.2 === (Égalité stricte)

- Rôle : Compare deux valeurs en vérifiant si elles sont égales en valeur et en type.
- Exemple : [Link](5 === 5); // true
[Link](5 === '5'); // false (types différents)
[Link](0 === false); // false (types différents)

1.3 != (Inégalité faible)

- Rôle : Compare deux valeurs en vérifiant si elles sont différentes, sans tenir compte du type de données.
- Exemple : [Link](5 != 10); // true
[Link](5 != '5'); // false (conversion de type implicite)
[Link](0 != false); // false (0 et false sont considérés comme égaux)

1.4 !== (Inégalité stricte)

- Rôle : Compare deux valeurs en vérifiant si elles sont différentes en valeur ou en type.
- Exemple : [Link](5 !== 10); // true
[Link](5 !== '5'); // true (types différents)
[Link](0 !== false); // true (types différents)

2. Les opérateurs de comparaison de grandeur

2.1 > (Supérieur à)
- Rôle : Vérifie si la valeur de gauche est strictement supérieure à celle de droite.
- Exemple : [Link](10 > 5); // true
[Link](5 > 10); // false
[Link](5 > 5); // false

2.2 < (Inférieur à)

- Rôle : Vérifie si la valeur de gauche est strictement inférieure à celle de droite.
- Exemple : [Link](5 < 10); // true
[Link](10 < 5); // false

~ 42 ~
 [Link](5 < 5); // false

2.3 >= (Supérieur ou égal à)

- Rôle : Vérifie si la valeur de gauche est supérieure ou égale à celle de droite.
- Exemple : [Link](10 >= 5); // true
[Link](5 >= 10); // false
[Link](5 >= 5); // true

2.4 <= (Inférieur ou égal à)

- Rôle : Vérifie si la valeur de gauche est inférieure ou égale à celle de droite.
- Exemple : [Link](5 <= 10); // true
[Link](10 <= 5); // false
[Link](5 <= 5); // true

3. Comparaison avec des valeurs spéciales

3.1 Comparaison avec NaN
- NaN (Not a Number) est une valeur spéciale qui représente une valeur non numérique.
- Propriété : NaN n'est égal à rien, même à lui-même.
- Exemple : [Link](NaN == NaN); // false
[Link](NaN === NaN); // false
[Link](isNaN(NaN)); // true (utilisez isNaN pour vérifier NaN)

3.2 Comparaison avec null et undefined

- null et undefined sont des valeurs spéciales en JavaScript.
- Comparaisons :
[Link](null == undefined); // true (égalité faible)
[Link](null === undefined); // false (égalité stricte)
[Link](null == 0); // false (null n'est égal qu'à undefined en
égalité faible)
[Link](undefined == 0); // false

4. Comparaison de chaînes de caractères

4.1 Comparaison lexicographique
- Les chaînes de caractères sont comparées caractère par caractère en fonction de leur valeur Unicode.
- Exemple : [Link]('a' < 'b'); // true ('a' vient avant 'b' dans l'ordre Unicode)
[Link]('apple' < 'banana'); // true
[Link]('10' < '2'); // true (comparaison lexicographique, pas
numérique)

4.2 Conversion implicite

- Si une chaîne est comparée à un nombre, JavaScript tente de convertir la chaîne en nombre.
- Exemple : [Link]('10' > 5); // true (la chaîne '10' est convertie en nombre 10)
[Link]('abc' > 5); // false ('abc' ne peut pas être converti en nombre)

5. Comparaison d'objets
5.1 Comparaison de références
- Les objets (y compris les tableaux et les fonctions) sont comparés par référence, pas par valeur.
- Exemple : const obj1 = { a: 1 };
const obj2 = { a: 1 };
const obj3 = obj1;

[Link](obj1 == obj2); // false (références différentes)

~ 43 ~
 [Link](obj1 === obj2); // false (références différentes)
[Link](obj1 == obj3); // true (même référence)

5.2 Comparaison de tableaux

- Les tableaux sont également comparés par référence.
- Exemple : const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
const arr3 = arr1;

[Link](arr1 == arr2); // false (références différentes)

[Link](arr1 === arr2); // false (références différentes)
[Link](arr1 == arr3); // true (même référence)

6. Bonnes pratiques
6.1 Utiliser === et !==
- Préférez toujours l'égalité stricte (===) et l'inégalité stricte (!==) pour éviter les conversions de type
implicites et les bugs subtils.

6.2 Vérifier NaN avec isNaN

- Utilisez isNaN() pour vérifier si une valeur est NaN.

6.3 Comparer des objets par valeur

- Pour comparer des objets ou des tableaux par valeur, utilisez des bibliothèques comme Lodash ou écrivez
une fonction de comparaison personnalisée.

7. Exemples de synthèse
7.1 Comparaison de nombres
const a = 10;
const b = '10';

[Link](a == b); // true (égalité faible)

[Link](a === b); // false (égalité stricte)
[Link](a > 5); // true
[Link](a <= 10); // true

7.2 Comparaison de chaînes

const str1 = 'apple';
const str2 = 'banana';

[Link](str1 < str2); // true

[Link](str1 === 'apple'); // true

7.3 Comparaison d'objets

const obj1 = { name: 'Alice' };
const obj2 = { name: 'Alice' };
const obj3 = obj1;

[Link](obj1 == obj2); // false

[Link](obj1 === obj3); // true

[Link] Exercice pratique

- Créer un script JavaScript pour manipuler des variables et des opérateurs.

~ 44 ~
4.2.4 Les structures de contrôle
[Link] Les conditions
- if : Exécute un bloc de code si une condition est vraie.
- else : Exécute un bloc de code si la condition est fausse.
- else if : Teste une nouvelle condition si la première est fausse.
- Exemple : if (age >= 18) {
[Link]("Vous êtes majeur.");
} else {
[Link]("Vous êtes mineur.");
}

[Link] Les boucles

- for : Répète un bloc de code un nombre défini de fois.
- while : Répète un bloc de code tant qu'une condition est vraie.
- Exemple : for (let i = 0; i < 5; i++) {
[Link](i);
}
let j = 0;
while (j < 5) {
[Link](j);
j++;
}

[Link] Exercice pratique

- Créer un script JavaScript avec des conditions et des boucles.

4.2.5 Les fonctions

[Link] Déclaration de fonctions
- Fonctions nommées :
function direBonjour(nom) {
[Link]("Bonjour, " + nom + " !");
}
direBonjour("Alice");

- Fonctions anonymes :
const direBonjour = function(nom) {
[Link]("Bonjour, " + nom + " !");
};
direBonjour("Alice");

- Fonctions fléchées (ES6) :

const direBonjour = (nom) => {
[Link]("Bonjour, " + nom + " !");
};
direBonjour("Alice");

[Link] Portée des variables

- let et const : Variables locales au bloc.
- var : Variables globales ou locales à la fonction.

[Link] Exercice pratique

- Créer des fonctions pour effectuer des calculs simples.

~ 45 ~
4.2.6 Manipulation du DOM
[Link] Qu'est-ce que le DOM ?
- Définition : Le DOM (Document Object Model) est une représentation en arborescence d'une page HTML.
- Accéder aux éléments :
- [Link]("id").
- [Link](".classe").
- [Link]("tag").
- Exemple :
let titre = [Link]("titre");
[Link] = "Nouveau titre";

[Link] Modifier le DOM

- Changer le contenu : textContent, innerHTML.
- Changer les styles : style.
- Ajouter/supprimer des éléments : appendChild, removeChild.
- Exemple : let paragraphe = [Link]("p");
[Link] = "red";

[Link] Gérer les événements

- Ajouter un événement : addEventListener.
- Exemple : let bouton = [Link]("button");
[Link]("click", function() {
alert("Bouton cliqué !");
});

[Link] Exercice pratique

- Créer une page web interactive avec JavaScript.

4.2.7 Les tableaux et les objets

[Link] Les tableaux
- Déclaration : let fruits = ["pomme", "banane", "orange"];
- Méthodes courantes : push, pop, shift, unshift, forEach, map.

- Exemple : [Link](function(fruit) {

[Link](fruit);
});

[Link] Les objets

- Déclaration :
let personne = {
nom: "Alice",
age: 25,
direBonjour: function() {
[Link]("Bonjour, " + [Link] + " !");
}
};

- Accéder aux propriétés : [Link], personne["nom"].

- Exemple : [Link]();

~ 46 ~
[Link] Exercice pratique
- Manipuler des tableaux et des objets en JavaScript.

4.2.8 Les promesses et l'asynchrone

[Link] Introduction à l'asynchrone
- Problème : Les opérations asynchrones (comme les requêtes réseau) ne bloquent pas l'exécution du code.
- Solution : Utiliser des promesses ou async/await.

[Link] Les promesses

- Déclaration : let promesse = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("Succès !");
}, 1000);
});
[Link](function(resultat) {
[Link](resultat);
});

[Link] async/await
- Déclaration : async function maFonction() {
let resultat = await promesse;
[Link](resultat);
}
maFonction();

[Link] Exercice pratique

- Créer une fonction asynchrone pour simuler une requête réseau.

4.3 Bonnes pratiques et outils

4.3.1 Bonnes pratiques en JavaScript
- Organisation du code : Utiliser des commentaires et des fichiers séparés.
- Noms de variables : Utiliser des noms descriptifs et cohérents.
- Éviter les variables globales : Utiliser let et const.

4.3.2 Outils utiles

- Linters : ESLint pour vérifier la qualité du code.
- Modules : Utiliser import/export pour organiser le code.
- Frameworks : React, [Link], Angular.

4.4 Exercice pratique

- Organiser et valider un fichier JavaScript.

4.5 Projet final

9.1 Objectif

~ 47 ~
- Créer une page web interactive en utilisant tout ce qui a été appris.

9.2 Instructions

- Structurer la page avec HTML.

- Appliquer des styles CSS.
- Ajouter des fonctionnalités interactives avec JavaScript.
9.3 Exemple de projet

- Une application de liste de tâches (to-do list).

Ressources supplémentaires
- Documentation :
- [MDN Web Docs (JavaScript)]([Link]
- [W3Schools (JavaScript)]([Link]

- Outils :
- [CodePen]([Link] pour s'entraîner en ligne.
- [VS Code]([Link] pour coder localement.

Conseils pédagogiques
- Apprendre en pratiquant : Encouragez les étudiants à coder dès le début.
- Projets simples : Proposez des exercices courts et progressifs.
- Encourager la curiosité : Montrez des exemples de sites web pour inspirer les étudiants.
- Support visuel : Utilisez des schémas pour expliquer les concepts JavaScript.

4.6 Quelques Exercices corrigés de HTML5, CSS3 et JavaScript

Série 1
Exercice 1 : Page web avec titre, paragraphe, image et bouton

• HTML :
<!DOCTYPE html>
<html>
<head>
<title>Exercice 1</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Mon titre</h1>
<p>Ceci est un paragraphe.</p>
<img src="[Link]" alt="Mon image">
<button id="monBouton">Cliquez ici</button>
<script src="[Link]"></script>
</body>
</html>

• CSS :
body {
font-family: sans-serif;
margin: 20px;
}

h1 {

~ 48 ~
 color: #333;
}

p {
font-size: 16px;
line-height: 1.5;
}

img {
max-width: 100%;
height: auto;
}

button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}

• JavaScript :
let bouton = [Link]("monBouton");
[Link]("click", function() {
alert("Le bouton a été cliqué !");
});

Exercice 2 : Formulaire HTML5 avec validation JavaScript

• HTML :
<form id="monFormulaire">
<label for="nom">Nom :</label>
<input type="text" name="nom" id="nom" required><br><br>
<label for="email">Email :</label>
<input type="email" name="email" id="email" required><br><br>
<label for="message">Message :</label>
<textarea name="message" id="message" required></textarea><br><br>
<button type="submit">Envoyer</button>
</form>
<script src="[Link]"></script>

• CSS :
form label {
display: block;
margin-bottom: 5px;
}

form input,
form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
box-sizing: border-box;
}

form button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}

~ 49 ~
 • JavaScript :
let formulaire = [Link]("monFormulaire");
[Link]("submit", function(event) {
let nom = [Link]("nom").value;
let email = [Link]("email").value;
let message = [Link]("message").value;

if (nom === "" || email === "" || message === "") {

alert("Veuillez remplir tous les champs du formulaire.");
[Link](); // Empêcher l'envoi du formulaire
}
});
Exercice 3 : Liste de produits avec effet de survol

• HTML :
<div class="produits">
<div class="produit">
<img src="[Link]" alt="Produit 1">
<h3>Produit 1</h3>
<p>Prix : 10 €</p>
<div class="details">
<p>Description détaillée du produit 1.</p>
</div>
</div>
<div class="produit">
<img src="[Link]" alt="Produit 2">
<h3>Produit 2</h3>
<p>Prix : 20 €</p>
<div class="details">
<p>Description détaillée du produit 2.</p>
</div>
</div>
</div>

• CSS :
.produits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}

.produit {
border: 1px solid #ccc;
padding: 10px;
position: relative;
overflow: hidden; /* Pour masquer les détails au début */
}

.produit img {
max-width: 100%;
height: auto;
}

.produit .details {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 20px;

~ 50 ~
 opacity: 0; /* Masquer les détails au début */
transition: opacity 0.3s ease;
}

.produit:hover .details {
opacity: 1; /* Afficher les détails au survol */
}
Exercice 4 : Animation CSS3

• HTML :
<div class="element"></div>
• CSS :
.element {
width: 100px;
height: 100px;
background-color: #007bff;
animation: deplacement 2s infinite;
position: relative; /* Pour permettre le positionnement de l'animation */
}

@keyframes deplacement {
0% {
left: 0;
}
50% {
left: calc(100% - 100px); /* Déplacement vers la droite */
}
100% {
left: 0;
}
}

Exercice 5 : Menu déroulant en JavaScript

• HTML :
<button id="monBouton">Afficher le menu</button>
<ul id="monMenu" style="display: none;">
<li><a href="#">Élément 1</a></li>
<li><a href="#">Élément 2</a></li>
<li><a href="#">Élément 3</a></li>
</ul>
<script src="[Link]"></script>

JavaScript :
let bouton = [Link]("monBouton");
let menu = [Link]("monMenu");

[Link]("click", function() {
if ([Link] === "none") {
[Link] = "block";
} else {
[Link] = "none";
}
});

~ 51 ~
Serie 2
Exercice 1 : Mise en page responsive avec Flexbox

• Objectif : Créer une mise en page responsive qui s'adapte à différentes tailles d'écran en utilisant
Flexbox.

• HTML :
<div class="container">
<div class="item">Element 1</div>
<div class="item">Element 2</div>
<div class="item">Element 3</div>
<div class="item">Element 4</div>
</div>

• CSS :
.container {
display: flex;
flex-wrap: wrap; /* Permettre aux éléments de passer à la ligne */
justify-content: center; /* Centrer les éléments horizontalement */
align-items: center; /* Centrer les éléments verticalement */
gap: 20px; /* Espacement entre les éléments */
}

.item {
width: 200px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ccc;
text-align: center;
line-height: 100px;
}

/* Media query pour les écrans plus petits */

@media (max-width: 768px) {
.item {
width: 150px;
height: 75px;
line-height: 75px;
}
}

Exercice 2 : Animation CSS3 avec Keyframes

• Objectif : Créer une animation CSS3 simple avec Keyframes.

• HTML :
<div class="box"></div>

• CSS :
.box {
width: 100px;
height: 100px;
background-color: red;
animation: changeColor 2s infinite alternate; /* Animation infinie et alternative
*/
}

@keyframes changeColor {
from {

~ 52 ~
 background-color: red;
}
to {
background-color: blue;
}
}

Exercice 3 : Validation de formulaire avec JavaScript

• Objectif : Valider un formulaire avec JavaScript avant de l'envoyer.

• HTML :
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<button type="submit">Submit</button>
</form>

• JavaScript :
const form = [Link]('myForm');

[Link]('submit', (event) => {

const name = [Link]('name').value;
const email = [Link]('email').value;

if (name === '' || email === '') {

alert('Please fill in all fields.');
[Link](); // Empêcher la soumission du formulaire
}
});

Exercice 4 : Manipulation du DOM avec JavaScript

• Objectif : Ajouter et supprimer des éléments du DOM avec JavaScript.

• HTML :
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button id="addItem">Add Item</button>
<button id="removeItem">Remove Item</button>

• JavaScript :
const list = [Link]('myList');
const addItemButton = [Link]('addItem');
const removeItemButton = [Link]('removeItem');

[Link]('click', () => {
const newItem = [Link]('li');
[Link] = 'New Item';
[Link](newItem);
});

[Link]('click', () => {
if ([Link]) {
[Link]([Link]);
}
});

~ 53 ~
Exercice 5 : Création d'un menu déroulant avec JavaScript

• Objectif : Créer un menu déroulant qui affiche ou masque des éléments au clic.

• HTML :
<div class="dropdown">
<button class="dropdown-toggle">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>

• JavaScript :
const dropdownToggle = [Link]('.dropdown-toggle');
const dropdownContent = [Link]('.dropdown-content');

[Link]('click', () => {
[Link]('show');
});

// Fermer le menu si l'utilisateur clique en dehors

[Link]('click', (event) => {
if () {
if ([Link]('show')) {
[Link]('show');
}
}
});

~ 54 ~
4.7 Quelques projets d'intégration
Projet allant des plus simples aux plus complexes, avec des descriptions détaillées et des solutions
potentielles. Ces projets permettront aux débutants de pratiquer leurs compétences en HTML, CSS et
JavaScript tout en progressant graduellement.

1. Page de présentation personnelle (Niveau débutant)

Description :

Créer une page web simple qui présente vos informations personnelles (nom, photo, description, etc.).
Technologies :

- HTML
- CSS
Solution :
<!DOCTYPE html>
<html>
<head>
<title>Ma page de présentation</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: f4f4f4;
}
h1 {
color: 333;
}
img {
border-radius: 50%;
width: 150px;
height: 150px;
}
p {
font-size: 18px;
color: 666;
}
</style>
</head>
<body>
<h1>Mon Nom</h1>
<img src="[Link]" alt="Ma photo">
<p>Bonjour ! Je suis un passionné de développement web.</p>
</body>
</html>

2. Formulaire de contact (Niveau débutant)

Description :

Créer un formulaire de contact avec des champs pour le nom, l'email, le message et un bouton de
soumission.

Technologies :

- HTML
- CSS
Solution : <!DOCTYPE html>

~ 55 ~
 <html>
<head>
<title>Formulaire de contact</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
}
form {
max-width: 400px;
margin: 0 auto;
}
label, input, textarea {
display: block;
width: 100%;
margin-bottom: 10px;
}
input, textarea {
padding: 10px;
font-size: 16px;
}
button {
padding: 10px 20px;
background-color: 28a745;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<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="5" required></textarea>

<button type="submit">Envoyer</button>
</form>
</body>
</html>

3. Galerie d'images (Niveau intermédiaire)

Description :

Créer une galerie d'images où les images sont affichées en grille. Ajouter un effet de survol pour agrandir les
images.

Technologies :

- HTML
- CSS
Solution : <!DOCTYPE html>
<html>
<head>
<title>Galerie d'images</title>
<style>
body {
font-family: Arial, sans-serif;

~ 56 ~
 margin: 0;
padding: 20px;
background-color: f4f4f4;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 8px;
transition: transform 0.3s ease;
}
.gallery img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="gallery">
<img src="[Link]" alt="Image 1">
<img src="[Link]" alt="Image 2">
<img src="[Link]" alt="Image 3">
<img src="[Link]" alt="Image 4">
</div>
</body>
</html>

4. Liste de tâches (To-Do List) (Niveau intermédiaire)

Description :

Créer une application de liste de tâches où l'utilisateur peut ajouter, supprimer et marquer des tâches comme
terminées.

Technologies :

- HTML
- CSS
- JavaScript
Solution : <!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
}
todo-list {
max-width: 400px;
margin: 0 auto;
}
task-input {
width: 100%;
padding: 10px;
font-size: 16px;
}
add-task {
padding: 10px 20px;
background-color: 28a745;

~ 57 ~
 color: white;
border: none;
cursor: pointer;
margin-top: 10px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
background-color: f9f9f9;
margin-bottom: 5px;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
.completed {
text-decoration: line-through;
color: 888;
}
</style>
</head>
<body>
<div id="todo-list">
<input type="text" id="task-input" placeholder="Ajouter une tâche">
<button id="add-task">Ajouter</button>
<ul id="tasks"></ul>
</div>

<script>
[Link]('add-task').addEventListener('click', function() {
const taskInput = [Link]('task-input');
const taskText = [Link]();
if (taskText !== '') {
const li = [Link]('li');
[Link] = taskText;
[Link]('click', function() {
[Link]('completed');
});
const deleteButton = [Link]('button');
[Link] = 'Supprimer';
[Link]('click', function(e) {
[Link]();
[Link]();
});
[Link](deleteButton);
[Link]('tasks').appendChild(li);
[Link] = '';
}
});
</script>
</body>
</html>

5. Application météo (Niveau avancé)

Description :

Créer une application qui affiche la météo actuelle en utilisant une API météo (comme OpenWeatherMap).

Technologies :

- HTML

~ 58 ~
- CSS
- JavaScript
- API (OpenWeatherMap)
Solution : <!DOCTYPE html>
<html>
<head>
<title>Application Météo</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
text-align: center;
}
weather {
max-width: 300px;
margin: 0 auto;
padding: 20px;
background-color: f9f9f9;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input, button {
padding: 10px;
font-size: 16px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="weather">
<input type="text" id="city-input" placeholder="Entrez une ville">
<button id="get-weather">Obtenir la météo</button>
<div id="weather-info"></div>
</div>

<script>
[Link]('get-weather').addEventListener('click', function() {
const city = [Link]('city-input').[Link]();
if (city !== '') {
const apiKey = 'VOTRE_CLE_API'; // Remplacez par votre clé API
const url =
[Link]
lang=fr;

fetch(url)
.then(response => [Link]())
.then(data => {
const weatherInfo = [Link]('weather-info');
if ([Link] === 200) {
[Link] =
<h2>${[Link]}</h2>
<p>Température : ${[Link]}°C</p>
<p>Météo : ${[Link][0].description}</p>
;
} else {
[Link] = <p>Ville non trouvée</p>;
}
})
.catch(error => {
[Link]('Erreur :', error);
});
}
});
</script>
</body>

~ 59 ~
 </html>

6. Site e-commerce (Niveau avancé)

Description :

Créer un site e-commerce simple avec une liste de produits, un panier d'achat et une page de paiement.

Technologies :

- HTML
- CSS
- JavaScript
Solution : <!DOCTYPE html>
<html>
<head>
<title>Site e-commerce</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: f4f4f4;
}
.product {
border: 1px solid ddd;
padding: 10px;
margin-bottom: 10px;
background-color: white;
border-radius: 8px;
}
.cart {
position: fixed;
top: 20px;
right: 20px;
padding: 10px;
background-color: white;
border: 1px solid ddd;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="cart">
<h2>Panier</h2>
<ul id="cart-items"></ul>
<p>Total : <span id="cart-total">0</span> €</p>
</div>

<div id="products">
<div class="product" data-name="Produit 1" data-price="10">
<h3>Produit 1</h3>
<p>10 €</p>
<button onclick="addToCart(this)">Ajouter au panier</button>
</div>
<div class="product" data-name="Produit 2" data-price="20">
<h3>Produit 2</h3>
<p>20 €</p>
<button onclick="addToCart(this)">Ajouter au panier</button>
</div>
</div>

<script>

~ 60 ~
 let cart = [];
let total = 0;

function addToCart(button) {
const product = [Link];
const name = [Link]('data-name');
const price = parseFloat([Link]('data-price'));

[Link]({ name, price });

total += price;

updateCart();
}

function updateCart() {
const cartItems = [Link]('cart-items');
const cartTotal = [Link]('cart-total');

[Link] = '';
[Link](item => {
const li = [Link]('li');
[Link] = ${[Link]} - ${[Link]} €;
[Link](li);
});

[Link] = total;
}
</script>
</body>
</html>

~ 61 ~