DÉVELOPPEMENT WEB

Bases et usages modernes

HTML, CSS, JavaScript et Intelligence Artificielle

Auteur : William Rhetice ZANNOU

Formation UCAO-TECH
Polycopié de cours — Pour usage pédagogique et personnel

Septembre 2025
Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

Plan du cours

Plan complet du cours

1. Introduction générale
— Contexte historique du Web
— Évolution HTML / CSS / JavaScript
— Importance de l’IA dans le développement
2. Chapitre 1 : Fondements du développement web
— Architecture client-serveur
— Fonctionnement des navigateurs
— DOM et CSSOM
3. Chapitre 2 : HTML — La structure
— Balises et sémantique
— Listes, tableaux, liens, images
— Formulaires et accessibilité
4. Chapitre 3 : CSS — La présentation
— Sélecteurs, propriétés et box model
— Flexbox et Grid
— Responsive design
5. Chapitre 4 : JavaScript — L’interactivité
6. Chapitre 5 : Organisation et intégration de projet web
7. Chapitre 6 : Bonnes pratiques et outils modernes
8. Chapitre 7 : Usage de l’IA dans le développement web
9. Chapitre 8 : Étude de cas complète — site vitrine
10. Chapitre 9 : Exercices pratiques
11. Conclusion générale et annexes

1
Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

1. Fondements du développement web

1.1. Introduction

Le Web est devenu omniprésent dans notre quotidien. Sites d’information, applications pro-
fessionnelles, boutiques en ligne, plateformes de streaming, réseaux sociaux, interfaces mobiles :
tout repose sur le Web. Comprendre comment il fonctionne est indispensable pour tout déve-
loppeur, débutant ou confirmé. Ce chapitre explique en détail les principes fondamentaux
du Web, le rôle du navigateur, l’architecture client-serveur, le modèle DOM et les protocoles
HTTP/HTTPS.

Objectifs du chapitre

— Comprendre l’architecture du Web et la relation client-serveur

— Décrire le fonctionnement interne d’un navigateur
— Expliquer les modèles DOM et CSSOM
— Comprendre le rôle et le fonctionnement des protocoles HTTP et HTTPS
— Appréhender l’importance de la performance et de la sécurité

1.2. Bref historique du Web

Le Web a été inventé par Tim Berners-Lee à la fin des années 1980 au CERN. Son objectif
était de créer un système pour partager des documents scientifiques facilement. Depuis, il a connu
plusieurs étapes importantes :

— Web 1.0 (1990-2000) : HTML statique, pages principalement textuelles, navigation ba-
sique.
— Web 2.0 (2000-2015) : Interactivité grâce à JavaScript, CSS pour la mise en forme,
apparition d’AJAX et des réseaux sociaux.
— Web moderne (2015-présent) : Single Page Applications (SPA), frameworks JS (React,
Vue, Angular), Progressive Web Apps, intégration d’Intelligence Artificielle et services
cloud.

Encadré historique

Chaque étape du Web a apporté une séparation des responsabilités : structure

(HTML), présentation (CSS), interactivité (JavaScript). Comprendre cette évolution aide
à écrire un code moderne et maintenable.

2
Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

1.3. Architecture client-serveur

L’architecture client-serveur est le pilier du Web. Le client (navigateur ou application) fait

des requêtes, le serveur répond avec des ressources.

Figure 1 – Architecture client-serveur

Étapes détaillées :
1. L’utilisateur saisit une URL ou clique sur un lien.
2. Le navigateur envoie une requête HTTP(S) au serveur.
3. Le serveur traite la requête et renvoie des fichiers HTML, CSS, JS et éventuellement des
données JSON.
4. Le navigateur reçoit les fichiers, construit le rendu et exécute le JavaScript pour l’interac-
tivité.

Conseil pratique

Bien comprendre cette architecture permet d’optimiser les performances : réduire le

nombre de requêtes, charger les scripts de manière asynchrone et utiliser la mise en cache.

1.4. Fonctionnement détaillé d’un navigateur

Un navigateur ne se contente pas d’afficher des pages. Son rôle est complexe et s’organise en
plusieurs étapes :

1. Récupération des ressources : HTML, CSS, JS, images, polices.

2. Parsing HTML : Création du DOM (Document Object Model), structure arbores-
cente représentant la page.
3. Parsing CSS : Création du CSSOM, liste des règles de style appliquées.
4. Construction du render tree : Fusion DOM + CSSOM pour calculer les styles appliqués
à chaque élément.
5. Layout et peinture : Calcul des positions et dimensions des éléments, rendu visuel à
l’écran.
6. Exécution JavaScript : Interactivité, modification du DOM et animations.

3
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

Encadré technique

L’ordre est crucial : si le JavaScript bloque le parsing, la page met plus de temps à s’afficher.
Utiliser defer ou async pour les scripts améliore la performance.

1.5. Le DOM et le CSSOM en profondeur

— DOM : Chaque élément HTML devient un nœud dans un arbre. Le JavaScript peut le
manipuler pour changer contenu, styles, structure.
— CSSOM : Structure des styles appliqués aux éléments. Permet le calcul précis du rendu.

1 const titre = document . querySelector ( ’ h1 ’) ;

2 titre . textContent = " Bienvenue sur mon site !";
3 titre . style . color = " blue ";

Listing 1 – Exemple DOM simple

1.6. Protocoles HTTP et HTTPS

HTTP (HyperText Transfer Protocol) : communication non sécurisée entre client et serveur.
HTTPS (HTTP Secure) : communication chiffrée via TLS/SSL.
Méthodes principales :
— GET : récupérer des ressources
— POST : envoyer des données
— PUT : modifier des données
— DELETE : supprimer des données

Bonnes pratiques

— Toujours utiliser HTTPS pour la sécurité des utilisateurs

— Minimiser les requêtes et compresser les fichiers
— Comprendre la différence entre front-end et back-end pour optimiser l’architecture

1.7. Résumé et points clés

— Le Web repose sur l’architecture client-serveur.

— Le navigateur construit le DOM et le CSSOM pour afficher la page.
— JavaScript manipule le DOM pour l’interactivité.
— HTTP/HTTPS assurent la communication entre client et serveur.
— La performance et la sécurité dépendent de la bonne organisation du code et des requêtes.

À retenir
Avant de créer un site Web, il est essentiel de comprendre comment il est servi, interprété
et affiché. Cela permet de concevoir un code performant, sûr et maintenable.

4
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

2. HTML — La structure

2.1. Introduction

HTML (HyperText Markup Language) est le langage de balisage fondamental du Web.

Il permet de créer et structurer le contenu d’une page web : textes, images, liens, tableaux,
formulaires, etc.
Dans ce chapitre, nous allons détailler :
— La structure générale d’un document HTML
— Les balises de base et leur rôle
— L’importance de la sémantique et de l’accessibilité
— Les formulaires HTML
— Les bonnes pratiques de codage

Objectifs du chapitre

À la fin de ce chapitre, vous serez capable de :

— Créer une page HTML complète et correctement structurée
— Utiliser les balises sémantiques pour améliorer la lisibilité et le référencement
— Concevoir des formulaires HTML fonctionnels et accessibles

2.2. Anatomie d’un document HTML

Un document HTML minimal comprend les éléments suivants :

1 <! DOCTYPE html >
2 < html lang = " fr " >
3 < head >
4 < meta charset = " UTF -8 " >
5 < meta name = " viewport " content = " width = device - width , ␣ initial - scale =1.0 " >
6 < title > Ma p r e m i r e page </ title >
7 </ head >
8 < body >
9 < h1 > Bienvenue </ h1 >
10 <p > Ceci est un paragraphe d ’ exemple . </ p >
11 </ body >
12 </ html >

Listing 2 – Document HTML minimal

5
Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

— <!DOCTYPE html> : indique au navigateur qu’il s’agit d’un document HTML5.

— <html lang="fr"> : balise racine, avec la langue de la page.
— <head> : contient les métadonnées, titre, liens vers CSS ou scripts.
— <body> : contient le contenu visible par l’utilisateur.

2.3. Les balises de structure principales

— Titres : <h1> à <h6> pour hiérarchiser l’information.

— Paragraphes : <p>.
— Liens : <a href="URL">texte</a>.
— Images : <img src="image.png" alt="Description">.
— Listes :
— Non ordonnée : <ul><li>...</li></ul>
— Ordonnée : <ol><li>...</li></ol>
— Tableaux : <table>, <tr>, <th>, <td>.

Encadré pratique

Utilisez des balises sémantiques pour que votre page soit compréhensible par les moteurs
de recherche et les lecteurs d’écran.

6
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

2.4. Exemple complet de page HTML

1 <! DOCTYPE html >

2 < html lang = " fr " >
3 < head >
4 < meta charset = " UTF -8 " >
5 < meta name = " viewport " content = " width = device - width , ␣ initial - scale =1.0 " >
6 < title > Exemple Page </ title >
7 </ head >
8 < body >
9 < header >
10 < h1 > Mon site Web </ h1 >
11 < nav >
12 < ul >
13 < li > <a href = " # " > Accueil </ a > </ li >
14 < li > <a href = " # " > propos </ a > </ li >
15 < li > <a href = " # " > Contact </ a > </ li >
16 </ ul >
17 </ nav >
18 </ header >
19

20 < main >

21 < section >
22 < h2 > Introduction </ h2 >
23 <p > Cette section p r s e n t e l objectif du site . </ p >
24 </ section >
25

26 < section >

27 < h2 > Nos services </ h2 >
28 < ul >
29 < li > D v e l o p p e m e n t Web </ li >
30 < li > Design UI / UX </ li >
31 < li > Marketing Digital </ li >
32 </ ul >
33 </ section >
34

35 < article >

36 < h2 > Article Exemple </ h2 >
37 <p > Contenu d t a i l l de l ’ article . </ p >
38 </ article >
39 </ main >
40

41 < footer >

42 <p >& copy ; 2025 Mon site Web . Tous droits r s e r v s . </ p >
43 </ footer >
44 </ body >
45 </ html >

Listing 3 – Page HTML complète avec structure sémantique

7
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

2.5. Attributs importants

— id : identifiant unique pour un élément.

— class : regroupe des éléments pour le style ou JS.
— src : source d’une image ou d’un média.
— href : lien vers une autre page.
— alt : description alternative pour images (accessibilité).

2.6. Formulaires HTML

Les formulaires permettent de collecter des données des utilisateurs.

1 < form action = " / envoyer " method = " post " >
2 < label for = " nom " > Nom : </ label >
3 < input type = " text " id = " nom " name = " nom " required >
4

5 < label for = " email " > Email : </ label >
6 < input type = " email " id = " email " name = " email " >
7

8 < label for = " message " > Message : </ label >
9 < textarea id = " message " name = " message " > </ textarea >
10

11 < button type = " submit " > Envoyer </ button >
12 </ form >

Listing 4 – Formulaire simple

Conseils pratiques

— Toujours utiliser label lié à l’élément pour l’accessibilité.

— Utiliser l’attribut required pour les champs obligatoires.
— Vérifier le type d’input (email, number, password) pour améliorer l’expérience utili-
sateur.

8
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

2.7. Tables HTML

Les tableaux permettent de représenter des données tabulaires. Exemple :

1 < table border = " 1 " >
2 < thead >
3 < tr >
4 < th > Nom </ th >
5 < th > Service </ th >
6 < th > Prix </ th >
7 </ tr >
8 </ thead >
9 < tbody >
10 < tr >
11 < td > Alice </ td >
12 < td > Web Design </ td >
13 < td > 500 </ td >
14 </ tr >
15 < tr >
16 < td > Bob </ td >
17 < td > D v e l o p p e m e n t </ td >
18 < td > 800 </ td >
19 </ tr >
20 </ tbody >
21 </ table >

Listing 5 – Tableau simple

2.8. Bonnes pratiques HTML

— Utiliser HTML5 sémantique (header, main, footer, article, section)

— Toujours fermer les balises
— Utiliser des attributs pertinents (alt, title, id, class)
— Vérifier la compatibilité avec tous les navigateurs
— Maintenir une indentation propre pour la lisibilité

2.9. Résumé du chapitre

HTML est la base de tout site web. Une bonne structure permet :
— Une meilleure lisibilité et maintenance du code
— Un rendu correct sur tous les navigateurs
— Une meilleure accessibilité pour tous les utilisateurs
— Une optimisation SEO et référencement

À retenir
Avant de passer au CSS et au JavaScript, il est essentiel de maîtriser HTML. Tout élément
visible sur votre page est défini dans le code HTML.

9
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

3. CSS — La présentation

3.1. Introduction

Le CSS (Cascading Style Sheets) permet de contrôler la présentation d’une page HTML :
couleurs, polices, tailles, marges, alignement, animations et mise en page responsive.
L’objectif de ce chapitre est de :
— Comprendre la syntaxe et les sélecteurs CSS
— Maîtriser le box model, Flexbox et Grid
— Appliquer des styles pour des pages esthétiques et responsives
— Suivre les bonnes pratiques pour un code propre et maintenable

Objectifs du chapitre

À la fin de ce chapitre, vous serez capable de :

— Styliser vos pages web avec CSS
— Organiser le style de manière claire et efficace
— Créer des mises en page flexibles et adaptatives

3.2. Syntaxe et intégration

CSS utilise des règles de style composées de sélecteurs et de déclarations.

1 h1 {
2 color : #0 b3d91 ; /* couleur du texte */
3 font - size : 2 em ; /* taille de la police */
4 }
5 p {
6 line - height : 1.6; /* interligne */
7 margin - bottom : 10 px ;
8 }

Listing 6 – Exemple CSS simple

Méthodes d’intégration CSS :

1. Inline : directement dans la balise HTML (style="...") — à éviter
2. Interne : dans la balise <style> du <head> — pratique pour des tests
3. Externe : fichier style.css lié via <link rel="stylesheet"> — recommandé

3.3. Sélecteurs CSS

— Sélecteur de type : p, h1
— Sélecteur de classe : .ma-classe
— Sélecteur d’identifiant : #mon-id
— Sélecteurs combinés : descendant (div p), enfant (ul > li), adjacent (h1 + p)

10
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

— Pseudo-classes : a:hover, li:first-child

— Pseudo-éléments : p::first-letter, ::after

3.4. Box Model

Chaque élément HTML est une boîte composée de :

— Content : contenu réel
— Padding : espace intérieur
— Border : bordure
— Margin : espace extérieur

1 div {
2 width : 200 px ;
3 padding : 10 px ;
4 border : 2 px solid black ;
5 margin : 15 px ;
6 }

Listing 7 – Exemple Box Model

Astuce
Pour simplifier, utilisez box-sizing: border-box; afin que padding et border soient in-
clus dans la largeur définie.

3.5. Flexbox — mise en page unidimensionnelle

Flexbox permet d’aligner et distribuer les éléments en ligne ou colonne.

1 . container {
2 display : flex ;
3 justify - content : space - between ; /* distribution horizontale */
4 align - items : center ; /* alignement vertical */
5 }
6 . item {
7 flex : 1; /* partage gal de l espace */
8 margin : 5 px ;
9 }

Listing 8 – Exemple Flexbox

Exemple HTML associé :

1 < div class = " container " >
2 < div class = " item " > Box 1 </ div >
3 < div class = " item " > Box 2 </ div >
4 < div class = " item " > Box 3 </ div >
5 </ div >

11
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

3.6. Grid — mise en page bidimensionnelle

Grid est utile pour les layouts plus complexes.

1 . grid - container {
2 display : grid ;
3 grid - template - columns : 1 fr 2 fr 1 fr ; /* 3 colonnes */
4 gap : 10 px ; /* espace entre les cellules */
5 }
6 . grid - item {
7 background - color : # f0f0f0 ;
8 padding : 10 px ;
9 }

Listing 9 – Exemple CSS Grid

HTML correspondant :
1 < div class = " grid - container " >
2 < div class = " grid - item " >A </ div >
3 < div class = " grid - item " >B </ div >
4 < div class = " grid - item " >C </ div >
5 </ div >

3.7. Couleurs, polices et typographie

— Couleurs : nom (red), hexadécimal (#ff0000), RGB (rgb(255,0,0))

— Polices : font-family: Arial, sans-serif;
— Tailles : font-size: 16px ou em/rem
— Interligne : line-height: 1.5;
— Texte : text-align, font-weight, text-transform, letter-spacing

3.8. Animations et transitions

1 button {
2 background - color : #0 b3d91 ;
3 color : white ;
4 padding : 10 px 20 px ;
5 border : none ;
6 transition : background - color 0.3 s ease ;
7 }
8 button : hover {
9 background - color : #034080;
10 }

Listing 10 – Exemple transition simple

12
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

3.9. Responsive Design

Pour adapter un site à différents écrans, on utilise les media queries :

1 @media ( max - width : 768 px ) {
2 body {
3 font - size : 14 px ;
4 }
5 . container {
6 flex - direction : column ;
7 }
8 }

Listing 11 – Exemple Media Query

3.10. Bonnes pratiques CSS

— Séparer HTML et CSS dans des fichiers distincts

— Nommer les classes clairement (BEM recommandé)
— Utiliser des reset.css ou normalize.css
— Minimiser et compresser CSS pour la production
— Tester sur différents navigateurs et résolutions

13
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

3.11. Exemple complet : page HTML stylisée

1 body {
2 font - family : Arial , sans - serif ;
3 margin : 0;
4 padding : 0;
5 background - color : # f8f8f8 ;
6 }
7 header {
8 background - color :#0 b3d91 ;
9 color : white ;
10 padding :20 px ;
11 text - align : center ;
12 }
13 nav ul {
14 list - style : none ;
15 padding :0;
16 }
17 nav ul li {
18 display : inline - block ;
19 margin :0 10 px ;
20 }
21 . container {
22 width :90%;
23 max - width :1000 px ;
24 margin :20 px auto ;
25 }
26 . button {
27 background - color :#0 b3d91 ;
28 color : white ;
29 padding :10 px 20 px ;
30 border : none ;
31 cursor : pointer ;
32 }
33 . button : hover {
34 background - color :#034080;
35 }

Listing 12 – CSS complet pour mini-site

3.12. Résumé du chapitre

Le CSS permet de transformer un document HTML simple en une page attrayante et fonc-
tionnelle. La maîtrise de Flexbox, Grid et du responsive design est indispensable pour tout
développeur front-end.

À retenir
HTML définit la structure, CSS définit le style et la présentation. Ensemble, ils constituent
la base de tout site web moderne.

14
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

4. JavaScript — L’interactivité

4.1. Introduction

JavaScript (JS) est un langage de programmation côté client qui permet de rendre les pages
web interactives. Il complète HTML et CSS en ajoutant du comportement dynamique.
Objectifs de ce chapitre :
— Comprendre les bases de JS : variables, types, opérateurs, structures de contrôle
— Manipuler le DOM et gérer les événements
— Comprendre l’asynchronisme avec les promesses et async/await
— Modulariser le code avec ES6
— Créer un mini-projet interactif

Objectifs du chapitre

À la fin de ce chapitre, vous serez capable de :

— Écrire des scripts JavaScript pour interagir avec une page
— Réagir aux actions de l’utilisateur
— Structurer et modulariser votre code

4.2. Variables et types

JavaScript utilise trois mots-clés principaux pour déclarer des variables : var, let et const.
1 // D c l a r a t i o n de variables
2 let nom = " Alice "; // c h a n e de c a r a c t r e s
3 const PI = 3.14159; // constante
4 var age = 25; // nombre
5

6 // Types de base
7 let entier = 10; // Number
8 let flottant = 3.14; // Number
9 let texte = " Bonjour "; // String
10 let bool = true ; // Boolean
11 let tableau = [1 ,2 ,3]; // Array
12 let objet = { nom :" Alice " , age :25}; // Object

Listing 13 – Variables et types de base

15
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

4.3. Opérateurs et structures de contrôle

1 // Condition
2 if ( age >= 18) {
3 console . log (" Adulte ") ;
4 } else {
5 console . log (" Mineur ") ;
6 }
7

8 // Boucle
9 for ( let i =0; i <5; i ++) {
10 console . log ( i ) ;
11 }
12

13 // Boucle while
14 let j = 0;
15 while (j <3) {
16 console . log ( j ) ;
17 j ++;
18 }

Listing 14 – Exemples condition et boucle

4.4. Fonctions

Déclaration classique, expression et fonctions fléchées :

1 function addition (a , b ) {
2 return a + b ;
3 }
4

5 const multiplication = function (a , b ) {

6 return a * b ;
7 }
8

9 const carre = x = > x * x ;

10 console . log ( carre (5) ) ; // 25

Listing 15 – Fonctions JS

4.5. Manipulation du DOM (Document Object Model)

1 // S l e c t i o n d ’ un lment
2 const titre = document . querySelector ( ’ h1 ’) ;
3

4 // Modification du contenu
5 titre . textContent = " Nouveau titre ";
6

7 // Modification du style
8 titre . style . color = " red ";

Listing 16 – Accès et modification du DOM

16
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

4.6. Événements

Les événements permettent d’exécuter du code suite à une action utilisateur.

1 const bouton = document . getElementById ( ’ btn ’) ;
2 bouton . addEventListener ( ’ click ’ , function () {
3 alert ( ’ Bouton c l i q u ! ’) ;
4 }) ;

Listing 17 – Exemple événement click

Autres événements courants : mouseover, mouseout, keydown, submit, input.

4.7. Asynchronisme : Promises et async/await

1 // Fonction qui retourne une promesse

2 function attendre ( ms ) {
3 return new Promise ( resolve = > setTimeout ( resolve , ms ) ) ;
4 }
5

6 // Utilisation avec async / await

7 async function demo () {
8 console . log (" Avant ") ;
9 await attendre (1000) ; // pause 1 seconde
10 console . log (" A p r s 1 s ") ;
11 }
12 demo () ;

Listing 18 – Exemple Promesse + async/await

4.8. Modules ES6

Permet de structurer le code en fichiers séparés :

1 // math . js
2 export function carre ( x ) { return x * x ; }
3

4 // main . js
5 import { carre } from ’./ math . js ’;
6 console . log ( carre (3) ) ; // 9

Listing 19 – Module ES6

4.9. Mini-projet interactif : compteur de clics

HTML :
1 < div id = " compteur " >0 </ div >
2 < button id = " increment " > +1 </ button >
3 < button id = " reset " > R i n i t i a l i s e r </ button >

JS :

17
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

1 let compteur = 0;
2 const divCompteur = document . getElementById ( ’ compteur ’) ;
3 const btnIncrement = document . getElementById ( ’ increment ’) ;
4 const btnReset = document . getElementById ( ’ reset ’) ;
5

6 btnIncrement . addEventListener ( ’ click ’ , () = >{

7 compteur ++;
8 divCompteur . textContent = compteur ;
9 }) ;
10

11 btnReset . addEventListener ( ’ click ’ , () = >{

12 compteur = 0;
13 divCompteur . textContent = compteur ;
14 }) ;

4.10. Bonnes pratiques JavaScript

— Utiliser let et const au lieu de var

— Indenter et commenter le code
— Éviter le code global : encapsuler dans des fonctions ou modules
— Tester sur plusieurs navigateurs

4.11. Résumé du chapitre

JavaScript permet d’ajouter du comportement dynamique aux pages web. La maîtrise des
variables, fonctions, DOM, événements et de l’asynchronisme est indispensable avant de passer
à des projets plus avancés.

À retenir
HTML définit la structure, CSS définit la présentation et JavaScript définit le comporte-
ment. L’interaction entre ces trois couches est la base du développement web moderne.

18
Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

5. Organisation d’un projet web

5.1. Introduction générale

Organiser un projet web ne se limite pas à créer quelques fichiers HTML, CSS et JavaScript.
Une bonne organisation est essentielle pour plusieurs raisons :
— Faciliter la maintenance et la lecture du code sur le long terme.
— Permettre le travail collaboratif entre plusieurs développeurs.
— Optimiser la performance du site et la rapidité de développement.
— Simplifier l’intégration d’outils modernes et l’automatisation.
L’objectif de ce chapitre est de fournir un guide complet pour structurer un projet web, en
détaillant chaque élément et en donnant des exemples concrets et commentés.

5.2. Arborescence typique d’un projet web

La première étape dans l’organisation d’un projet consiste à définir une arborescence logique
des fichiers et dossiers. Cette arborescence doit séparer les différentes couches (structure, style,
comportement) ainsi que les ressources (images, polices, médias).

Exemple d’arborescence complète :

mon-projet/

index.html
about.html
contact.html

css/
style.css
responsive.css

js/
main.js
utils.js

images/
logo.png
banner.jpg

fonts/
custom-font.woff

docs/
README.md

19
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

Explications :
— index.html : page d’accueil.
— about.html et contact.html : autres pages principales.
— css/ : contient tous les fichiers CSS, séparant le style global (style.css) et les règles
responsives (responsive.css).
— js/ : tous les scripts JavaScript, avec un fichier principal (main.js) et des fonctions utili-
taires (utils.js).
— images/ : tous les fichiers images.
— fonts/ : polices personnalisées.
— docs/ : documentation, notes et README.

Conseil pratique

Une bonne organisation dès le départ réduit considérablement les risques d’erreurs, de
duplication et facilite la collaboration entre développeurs.

5.3. Lien entre les fichiers : HTML, CSS et JS

CSS externe : Les fichiers CSS doivent être liés dans la section <head> du HTML. Cela permet
une modification centralisée du style sans toucher au HTML.
1 < link rel = " stylesheet " href = " css / style . css " >

Listing 20 – Lier un fichier CSS externe

JavaScript externe : Les scripts JavaScript doivent être chargés de manière à ne pas bloquer
le rendu de la page. Utiliser l’attribut defer ou placer les scripts à la fin du body.
1 < script src = " js / main . js " defer > </ script >

Listing 21 – Lier un JS externe avec defer

Astuce
L’attribut defer permet au navigateur de parser le HTML avant d’exécuter le script,
garantissant un chargement rapide et fluide.

5.4. Organisation avancée des CSS et JS

Pour les projets plus complexes :

— Diviser les fichiers CSS par composant (header.css, footer.css, forms.css).
— Créer des modules JS pour les fonctionnalités indépendantes (slider.js, menu.js, api.js).
— Utiliser un préprocesseur CSS (SASS/SCSS) pour gérer les variables, mixins et imports.

20
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

5.5. Exemple complet : mini-site structuré

HTML (index.html) :
1 <! DOCTYPE html >
2 < html lang = " fr " >
3 < head >
4 < meta charset = " UTF -8 " >
5 < meta name = " viewport " content = " width = device - width , ␣ initial - scale =1.0 " >
6 < title > Mini - site s t r u c t u r </ title >
7 < link rel = " stylesheet " href = " css / style . css " >
8 </ head >
9 < body >
10 < header class = " header " >
11 < img src = " images / logo . png " alt = " Logo ␣ du ␣ site " >
12 < nav >
13 < ul >
14 < li > <a href = " index . html " > Accueil </ a > </ li >
15 < li > <a href = " about . html " > propos </ a > </ li >
16 < li > <a href = " contact . html " > Contact </ a > </ li >
17 </ ul >
18 </ nav >
19 </ header >
20

21 < main class = " container " >

22 < h1 > Bienvenue sur notre mini - site </ h1 >
23 <p > Ce site illustre une organisation claire de HTML , CSS et JavaScript . </ p >
24 < button id = " changer " > Changer le texte </ button >
25 </ main >
26

27 < footer class = " footer " >

28 <p >& copy ; 2025 Mini - site </ p >
29 </ footer >
30

31 < script src = " js / main . js " defer > </ script >
32 </ body >
33 </ html >

21
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

CSS (css/style.css) :
1 body {
2 font - family : Arial , sans - serif ;
3 margin : 0;
4 padding : 0;
5 background : # f4f4f4 ;
6 }
7

8 . header {
9 display : flex ;
10 justify - content : space - between ;
11 align - items : center ;
12 background : #0 b3d91 ;
13 padding : 10 px 20 px ;
14 color : white ;
15 }
16

17 nav ul {
18 display : flex ;
19 list - style : none ;
20 gap : 20 px ;
21 }
22

23 nav a {
24 color : white ;
25 text - decoration : none ;
26 font - weight : bold ;
27 }
28

29 . container {
30 padding : 30 px ;
31 text - align : center ;
32 }
33

34 button {
35 padding : 10 px 25 px ;
36 background : #0 b3d91 ;
37 color : white ;
38 border : none ;
39 border - radius : 5 px ;
40 cursor : pointer ;
41 font - size : 16 px ;
42 }
43

44 . footer {
45 background : #222;
46 color : white ;
47 text - align : center ;
48 padding : 15 px ;
49 }

22
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

JavaScript (js/main.js) :
1 const btn = document . getElementById ( ’ changer ’) ;
2 btn . addEventListener ( ’ click ’ , () = > {
3 const titre = document . querySelector ( ’. container h1 ’) ;
4 titre . textContent = " Le texte a t m o d i f i via JavaScript !";
5 }) ;

5.6. Bonnes pratiques pour l’organisation de projet

— Garder une convention de nommage cohérente pour fichiers et dossiers.

— Documenter le projet (README, commentaires dans le code).
— Versionner le code avec Git ou un autre système de gestion de versions.
— Séparer clairement la structure (HTML), le style (CSS) et le comportement (JS).
— Tester régulièrement la compatibilité et la performance.

5.7. Performance et optimisation

— Minifier CSS et JS pour réduire la taille des fichiers.

— Compresser les images et utiliser des formats modernes (WebP, SVG).
— Charger les scripts de manière asynchrone ou différée.
— Utiliser un CDN pour les librairies externes.
— Mettre en cache les ressources statiques pour accélérer le chargement.

5.8. Résumé du chapitre

— Une arborescence claire est la base de tout projet web bien organisé.
— Lier correctement CSS et JS permet d’avoir un site fonctionnel et facile à maintenir.
— Séparer les fichiers par rôle et par fonctionnalité simplifie le travail collaboratif.
— Suivre les bonnes pratiques améliore la lisibilité, la performance et la maintenabilité du
site.

À retenir
HTML structure le contenu, CSS gère l’apparence, JS ajoute l’interactivité. Une organisa-
tion claire permet d’intégrer ces trois couches efficacement tout en facilitant la maintenance
et l’évolution du projet.

23
Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

6. Bonnes pratiques et outils modernes

6.1. Introduction

Dans le développement web moderne, connaître les langages HTML, CSS et JavaScript ne
suffit plus. L’efficacité, la maintenabilité et la performance dépendent fortement des bonnes
pratiques, des standards, et des outils disponibles. Ce chapitre présente les recommandations
essentielles pour structurer son travail, optimiser la qualité du code et faciliter le déploiement.

6.2. Respect des standards et de l’accessibilité

Standards web : Suivre les recommandations du W3C garantit que le code sera compatible
avec tous les navigateurs et respectera les bonnes pratiques de conception. Utiliser des validateurs
HTML/CSS permet de détecter rapidement les erreurs.

Accessibilité (a11y) : Un site accessible permet à tous les utilisateurs, y compris ceux en
situation de handicap, de naviguer et d’utiliser correctement le contenu. Les points clés incluent :
— Fournir des attributs alt pour les images.
— Assurer un contraste suffisant pour le texte.
— Utiliser des balises sémantiques (<header>, <main>, <footer>).
— Rendre la navigation possible au clavier.

Astuce
Des outils comme axe, Lighthouse ou WAVE aident à auditer l’accessibilité d’un site.

6.3. Outils de développement modernes

Éditeurs de code : Des IDE et éditeurs performants facilitent la rédaction, la coloration

syntaxique, et la gestion de projets. Exemples : VS Code, Sublime Text, Atom.

Navigateurs et DevTools : Les navigateurs modernes disposent d’outils de développement

intégrés pour inspecter le DOM, tester le CSS, debugger le JavaScript, mesurer les performances
et simuler des tailles d’écran différentes.

Gestion de versions : Git est indispensable pour suivre les changements, collaborer et revenir
en arrière en cas d’erreurs. L’hébergement sur GitHub, GitLab ou Bitbucket permet le travail
collaboratif et l’intégration continue.

Automatisation et build tools : Des outils comme Webpack, Gulp ou Vite permettent
d’automatiser la minification des fichiers, la compilation de SASS/SCSS, la gestion des images
et l’optimisation des performances.

24
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

6.4. Préprocesseurs CSS et frameworks

Préprocesseurs : SASS/SCSS permettent d’utiliser des variables, des fonctions, des mixins
et de structurer les CSS de manière modulaire. Exemple :
1 $primary - color : #0 b3d91 ;
2 $font - stack : Arial , sans - serif ;
3

4 body {
5 font - family : $font - stack ;
6 background - color : $primary - color ;
7 }

Listing 22 – Variables SASS

Frameworks CSS : Bootstrap, Tailwind ou Bulma accélèrent le développement en proposant

des composants pré-stylés et une grille responsive. Ils simplifient la création de layouts cohérents
et modernes.

6.5. Workflow moderne et déploiement

Développement en branches : Utiliser Git pour créer des branches dédiées aux fonctionna-
lités ou aux corrections. Cela permet d’éviter de casser le code principal (main/master).

Intégration continue (CI) : Des plateformes comme GitHub Actions ou GitLab CI exécutent
automatiquement des tests et des builds à chaque push, garantissant que le code reste fonctionnel.

Déploiement rapide : Des services comme Netlify, Vercel ou GitHub Pages permettent de
mettre un site en ligne en quelques clics, souvent directement depuis le dépôt Git. Les workflows
CI/CD automatisent le processus et réduisent les erreurs.

6.6. Outils de testing et débogage

— Linters (ESLint pour JS, Stylelint pour CSS) pour maintenir un code propre et cohérent.
— Tests unitaires et d’intégration (Jest, Mocha) pour vérifier que chaque fonction fonctionne
correctement.
— Navigateurs multiples pour tester la compatibilité cross-browser.
— Audit de performance avec Lighthouse pour détecter les points à améliorer (temps de
chargement, accessibilité, SEO).

25
Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

6.7. Bonnes pratiques de codage

— Utiliser une indentation cohérente.

— Nommer les classes et fonctions de façon descriptive.
— Commenter le code pour expliquer les parties complexes.
— Séparer les responsabilités : HTML pour la structure, CSS pour le style, JS pour le com-
portement.
— Prévoir la maintenance et les évolutions futures (modularité et réutilisation).

6.8. Documentation et communication

La documentation est cruciale dans un projet web :

— README.md pour expliquer le projet, sa structure et les dépendances.
— Commentaires dans le code pour clarifier les intentions.
— Documentation des API utilisées.
— Guides pour les collaborateurs afin d’uniformiser les pratiques.

6.9. Sécurité et bonnes pratiques côté client

— Éviter d’injecter du code JS non sécurisé (XSS).

— Valider et filtrer toutes les entrées utilisateur.
— Ne jamais exposer les clés API dans le front-end.
— Utiliser HTTPS pour sécuriser les communications.

6.10. Résumé du chapitre

— Respecter les standards et l’accessibilité garantit la compatibilité et l’inclusion.

— Les outils modernes facilitent le développement, la collaboration et l’optimisation.
— Le workflow CI/CD et les bonnes pratiques de codage assurent un projet robuste et main-
tenable.
— La documentation, la sécurité et les tests sont essentiels pour des projets professionnels.

À retenir
Un développeur web moderne doit combiner compétences techniques, bonnes pratiques,
maîtrise des outils et souci de la qualité, de la performance et de la sécurité.

26
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

7. Usage de l’intelligence artificielle dans le développement web

7.1. Introduction

L’intelligence artificielle (IA) transforme profondément le développement web. Les modèles

de langage, les générateurs de code, les outils de prototypage et d’optimisation permettent aux
développeurs de produire du code plus rapidement, d’anticiper les erreurs et de créer des interfaces
plus intelligentes. Comprendre ces outils et savoir les utiliser efficacement devient un atout majeur
pour tout professionnel du web.
L’IA ne remplace pas le développeur, mais agit comme un assistant puissant capable de :
— Générer automatiquement du code HTML, CSS et JavaScript.
— Proposer des suggestions et compléter des fonctions.
— Analyser la qualité du code et proposer des optimisations.
— Automatiser des tâches répétitives et accélérer la création de prototypes.

7.2. Principaux outils d’IA pour le développement web

— ChatGPT : génération de code, correction de bugs, explications pédagogiques, rédaction

de documentation.
— GitHub Copilot : autocomplétion et génération de fonctions dans l’IDE.
— Tabnine : assistant d’écriture de code basé sur l’IA, compatible avec plusieurs langages.
— DeepSeek et Grok : analyse de projets, suggestions de refactoring, recommandations de
design.
— DALL·E et MidJourney : génération d’images et assets graphiques pour sites web.

7.3. Comment rédiger de bons prompts (Prompt Engineering)

La qualité du code généré dépend directement de la formulation du prompt. Quelques conseils :

— Être précis sur le langage, la version et les contraintes.
— Fournir un exemple de sortie souhaitée.
— Indiquer le rôle attendu de l’IA (ex : “Tu es un expert front-end. . .”).
— Décomposer les tâches en étapes si elles sont complexes.

1 " C r e un formulaire HTML accessible avec :

2 - Nom , email , message
3 - Validation simple en JavaScript
4 - Style CSS minimal et responsive
5 - Bouton d ’ envoi "

Listing 23 – Exemple de prompt pour générer un formulaire HTML

27
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

7.4. Génération de code HTML/CSS/JS

L’IA peut produire rapidement des composants ou des pages complètes. Exemple pratique :
générer un header de site :
1 < header class = " site - header " >
2 < nav >
3 < ul >
4 < li > <a href = " index . html " > Accueil </ a > </ li >
5 < li > <a href = " services . html " > Services </ a > </ li >
6 < li > <a href = " contact . html " > Contact </ a > </ li >
7 </ ul >
8 </ nav >
9 </ header >

Listing 24 – Exemple de header HTML généré par IA

Le CSS correspondant peut également être généré automatiquement par l’IA :

1 . site - header {
2 background - color : #0 b3d91 ;
3 color : white ;
4 padding : 15 px ;
5 text - align : center ;
6 }
7 . site - header nav ul {
8 list - style : none ;
9 display : flex ;
10 justify - content : center ;
11 gap : 20 px ;
12 }

Listing 25 – CSS pour le header généré par IA

7.5. Correction et optimisation du code par l’IA

L’IA peut détecter :

— Les erreurs de syntaxe ou de structure.
— Les redondances ou répétitions dans le code.
— Les optimisations possibles (ex : minification, simplification des sélecteurs CSS, modulari-
sation du JS).

7.6. Automatisation du design et prototypage

Des outils d’IA permettent de générer des maquettes directement à partir d’un prompt tex-
tuel. Exemple :
“Crée une page d’accueil responsive pour une startup tech avec : header, section
services, témoignages, footer.”
L’IA peut produire un prototype complet, ensuite exportable en HTML/CSS, prêt à être
intégré dans le projet.

28
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

7.7. Intégration d’API d’IA dans un projet Web

Exemple d’architecture :
— Front-end (HTML/CSS/JS) : formulaire d’interaction avec l’utilisateur.
— Back-end (Node.js/Express) : relai des requêtes vers l’API IA, sécurisation de la clé API.
— API IA : génération de contenu, suggestions de code ou traitement d’information.

1 async function genererCode ( prompt ) {

2 const response = await fetch ( ’/ api / ia ’ , {
3 method : ’ POST ’ ,
4 headers : { ’ Content - Type ’: ’ application / json ’ } ,
5 body : JSON . stringify ({ prompt })
6 }) ;
7 const data = await response . json () ;
8 return data . code ;
9 }

Listing 26 – Appel API IA depuis le front-end

7.8. Exemple concret : chatbot IA

Créer un chatbot simple pour un site web :

— Front-end : formulaire d’entrée utilisateur, zone d’affichage des réponses.
— Back-end : serveur Node.js qui relaie les questions à l’IA et renvoie la réponse.
— Sécurité : la clé API n’est jamais exposée côté client.

1 document . getElementById ( ’ submit ’) . addEventListener ( ’ click ’ , async () = > {

2 const prompt = document . getElementById ( ’ question ’) . value ;
3 const code = await genererCode ( prompt ) ;
4 document . getElementById ( ’ response ’) . textContent = code ;
5 }) ;

Listing 27 – Exemple de gestion front-end pour chatbot

7.9. IA côté client (TensorFlow.js)

TensorFlow.js permet de charger et exécuter des modèles ML dans le navigateur :

— Avantages : latence faible, confidentialité des données, interactivité instantanée.
— Inconvénients : charge CPU élevée, taille des modèles.
Exemples d’usages :
— Classification d’images ou de texte.
— Détection d’objets dans une page.
— Suggestions de design et ajustements dynamiques.

29
Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

7.10. Éthique et limites de l’IA

— L’IA peut produire des erreurs ou hallucinations : il est indispensable de valider toutes les
propositions.
— Respecter les licences et droits d’auteur sur le code et les assets générés.
— Protéger les données personnelles (RGPD) et ne pas exposer d’informations sensibles.
— Maintenir une supervision humaine pour garantir la qualité et la sécurité.

7.11. Perspectives d’avenir

L’IA continuera à jouer un rôle central dans le développement web :

— Accélération de la production de sites et applications.
— Assistance à la maintenance et à la documentation automatique.
— Intégration dans les workflows CI/CD pour tests et optimisations automatiques.
— Création de sites et composants intelligents capables d’apprendre des utilisateurs.

7.12. Résumé du chapitre

Ce chapitre a montré que l’IA :

— est un puissant assistant pour générer, corriger et optimiser du code web ;
— permet d’automatiser le prototypage et la création de composants ;
— doit être utilisée avec rigueur pour éviter erreurs, problèmes de sécurité ou violations de
licences ;
— offre de nouvelles perspectives pour l’avenir du développement web.

À retenir
La maîtrise des outils d’IA et des bonnes pratiques de prompt engineering permet au
développeur web de produire plus rapidement des sites et applications robustes, interactifs
et modernes, tout en conservant un contrôle sur la qualité et la sécurité du projet.

30
Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

8. Étude de cas complète : Site vitrine d’entreprise

8.1. Introduction

Après avoir étudié les bases d’HTML, CSS, JavaScript et l’usage de l’IA, nous allons créer
un **site vitrine complet pour une société fictive**. L’objectif est de mettre en pratique les
connaissances acquises, tout en intégrant l’IA pour générer, corriger et améliorer le code.
Ce projet permettra de :
— Concevoir une **structure HTML claire et sémantique**.
— Styliser le site avec **CSS moderne** (Flexbox, Grid, responsive design).
— Ajouter de l’**interactivité avec JavaScript**.
— Utiliser l’**IA pour générer des composants et vérifier le code**.
— Organiser un projet web complet avec **arborescence et bonnes pratiques**.
— Déployer le site sur un serveur via **FileZilla**.

8.2. Cahier des charges

Entreprise fictive : TechSolutions – société spécialisée en services informatiques et solu-

tions web.

Pages à créer :
1. Accueil
2. À propos
3. Services
4. Témoignages
5. Contact

Fonctionnalités attendues :
— Header avec logo et menu de navigation.
— Section “hero” sur la page d’accueil.
— Présentation des services avec icônes et descriptions.
— Formulaire de contact fonctionnel et validé.
— Footer avec liens sociaux et mentions légales.
— Site **responsive** pour ordinateurs, tablettes et mobiles.
— Effets simples : hover, animations légères sur boutons ou sections.

Design et style :
— Couleurs principales : bleu (0b3d91), blanc (ffffff), gris clair (f8f8f8).
— Typographie : Arial / sans-serif pour le corps, titres avec graisse plus forte.
— Layout clair et épuré, sections distinctes et hiérarchie visuelle.
— Animation douce sur les boutons et transitions de sections.

31
Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

8.3. Arborescence du projet

techsolutions/
index.html
apropos.html
services.html
temoignages.html
contact.html
css/
style.css
js/
script.js
images/
logo.png
hero.jpg
service1.png
service2.png
fonts/
...
assets/
...

Cette arborescence permet de séparer clairement **contenu, style et scripts**, ce qui facilite
la maintenance et la collaboration.

8.4. Contenu détaillé de chaque page

Page Accueil :
— Header avec logo à gauche et menu horizontal à droite.
— Section “hero” : titre accrocheur, sous-titre, bouton call-to-action.
— Section “Nos Services” : 3 cartes avec icône, titre et description.
— Section “Témoignages” : 2-3 citations avec images clients.
— Footer : liens sociaux, contact rapide, mentions légales.

Page À propos :
— Histoire de l’entreprise.
— Mission et valeurs.
— Présentation de l’équipe avec photos et descriptions courtes.
— Citations internes ou slogans inspirants.

32
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

Page Services :
— Liste complète des services proposés.
— Description détaillée de chaque prestation.
— Icônes ou images illustratives pour chaque service.
— CTA (Call To Action) pour contacter l’entreprise.

Page Témoignages :
— Citations de clients avec photos et noms.
— Slider interactif pour faire défiler les avis.
— Éventuellement section pour ajouter son propre avis.

Page Contact :
— Formulaire de contact (nom, email, message).
— Carte ou image représentant la localisation.
— Coordonnées : email, téléphone, adresse.
— Bouton d’envoi avec validation JS.

8.5. Rédaction des prompts pour l’IA

Les prompts bien rédigés permettent de générer rapidement du code correct et fonctionnel.

Exemple : Génération du header et menu

1 " C r e r un header responsive pour un site d ’ entreprise :
2 - Logo gauche
3 - Menu horizontal droite : Accueil , propos , Services , T m o i g n a g e s ,
Contact
4 - Couleurs bleu (#0 b3d91 ) et blanc
5 - HTML + CSS + responsive "

Listing 28 – Prompt IA Header

Exemple : Section Services avec cartes

1 " C r e r une section ’ Nos Services ’ avec 3 cartes :
2 - I c n e en haut , titre et description
3 - Disposition flexible ( Flexbox )
4 - Couleurs bleu et gris clair
5 - HTML + CSS responsive "

Listing 29 – Prompt IA Services

Exemple : Formulaire Contact

1 " C r e r un formulaire de contact :
2 - Champs : Nom , Email , Message
3 - Validation JS simple ( champs requis , email valide )
4 - Bouton ’ Envoyer ’
5 - Style CSS minimal et responsive "

Listing 30 – Prompt IA Formulaire

33
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

8.6. Assemblage du projet final

1. Créer le dossier projet avec l’arborescence ci-dessus.

2. Générer le HTML de chaque page à l’aide de l’IA.
3. Ajouter le CSS généré et ajuster manuellement pour cohérence et style.
4. Ajouter le JavaScript pour interactivité (slider, formulaire, animations).
5. Tester le site sur différents navigateurs et tailles d’écran.
6. Optimiser images et fichiers pour performance (compression, minification).

8.7. Exemple de code combiné HTML/CSS/JS pour la page Accueil

1 <! DOCTYPE html >

2 < html lang = " fr " >
3 < head >
4 < meta charset = " utf -8 " >
5 < meta name = " viewport " content = " width = device - width , ␣ initial - scale =1 " >
6 < title > TechSolutions - Accueil </ title >
7 < link rel = " stylesheet " href = " css / style . css " >
8 </ head >
9 < body >
10 < header class = " site - header " >
11 < img src = " images / logo . png " alt = " TechSolutions ␣ Logo " >
12 < nav >
13 < ul >
14 < li > <a href = " index . html " > Accueil </ a > </ li >
15 < li > <a href = " apropos . html " > propos </ a > </ li >
16 < li > <a href = " services . html " > Services </ a > </ li >
17 < li > <a href = " temoignages . html " > T m o i g n a g e s </ a > </ li >
18 < li > <a href = " contact . html " > Contact </ a > </ li >
19 </ ul >
20 </ nav >
21 </ header >
22 < main >
23 < section class = " hero " >
24 < h1 > Bienvenue chez TechSolutions </ h1 >
25 <p > Votre partenaire pour des solutions web innovantes . </ p >
26 < button > Nos Services </ button >
27 </ section >
28 </ main >
29 < script src = " js / script . js " defer > </ script >
30 </ body >
31 </ html >

Listing 31 – index.html simplifié

34
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

1 body { font - family : Arial , sans - serif ; margin :0; padding :0; }
2 . site - header { display : flex ; justify - content : space - between ; align - items : center ;
background :#0 b3d91 ; color : white ; padding :10 px 20 px ; }
3 . site - header nav ul { display : flex ; gap :15 px ; list - style : none ; }
4 . site - header nav ul li a { color : white ; text - decoration : none ; }
5 . hero { text - align : center ; padding :100 px 20 px ; background :# f8f8f8 ; }
6 . hero button { background :#0 b3d91 ; color : white ; border : none ; padding :10 px 20 px ;
cursor : pointer ; }

Listing 32 – css/style.css simplifié

1 // Exemple d ’ i n t e r a c t i v i t simple
2 document . querySelector ( ’. hero button ’) . addEventListener ( ’ click ’ , () = >{
3 alert ( ’ Redirection vers les services ... ’) ;
4 }) ;

Listing 33 – js/script.js simplifié

8.8. Mise en ligne avec FileZilla

1. Configurer la connexion FTP/SFTP (serveur, login, mot de passe).

2. Glisser-déposer le dossier ‘techsolutions/‘ dans le répertoire ‘publich tml‘.
2. Vérifier toutes les pages et fonctionnalités depuis l’URL du site.

8.9. Conseils finaux

— Tester le site sur plusieurs navigateurs et appareils.

— Valider HTML/CSS avec W3C pour éviter les erreurs.
— Minifier CSS/JS et optimiser les images pour la performance.
— Conserver une copie source pour les évolutions futures.

8.10. Résumé du chapitre

Ce chapitre permet de :
— Structurer HTML et CSS de manière professionnelle.
— Ajouter des fonctionnalités interactives avec JavaScript.
— Exploiter l’IA pour générer, corriger et améliorer le code.
— Déployer un site complet sur serveur FTP.

À retenir
La création d’un projet complet consolide les compétences en développement web. L’IA
accélère la production et améliore la qualité, mais la supervision humaine et la structure
restent essentielles.

35
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

9. Exercices pratiques

9.1. Introduction

Pour bien maîtriser le développement Web, la pratique est essentielle. Ce chapitre propose
**des exercices progressifs**, allant de petits composants simples jusqu’au projet final, qui re-
prend toutes les notions vues : HTML, CSS, JavaScript, organisation de projet et usage de l’IA.

9.2. Exercice 1 : Page HTML simple (1 page)

Objectif : créer une page HTML statique, structurée et sémantique.

Consignes :
— Créer une page ‘index.html‘ avec un titre et un paragraphe de texte.
— Ajouter une image avec l’attribut ‘alt‘.
— Ajouter une liste à puces présentant 3 services fictifs.

Bonus : utiliser les balises sémantiques ‘<header>‘, ‘<main>‘ et ‘<footer>‘.

1 <! DOCTYPE html >
2 < html lang = " fr " >
3 < head >
4 < meta charset = " UTF -8 " >
5 < title > Page Simple </ title >
6 </ head >
7 < body >
8 < header >
9 < h1 > Ma s o c i t </ h1 >
10 </ header >
11 < main >
12 <p > Bienvenue sur notre site ! Nous proposons les services suivants : </ p >
13 < ul >
14 < li > D v e l o p p e m e n t web </ li >
15 < li > Design graphique </ li >
16 < li > Consulting IT </ li >
17 </ ul >
18 < img src = " images / logo . png " alt = " Logo ␣ de ␣ la ␣ s o c i t " >
19 </ main >
20 < footer >
21 <p >& copy ; 2025 Ma s o c i t </ p >
22 </ footer >
23 </ body >
24 </ html >

Listing 34 – Exercice 1 : Page HTML simple

36
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

9.3. Exercice 2 : Mise en forme CSS (1 page)

Objectif : appliquer des styles CSS à la page précédente.

Consignes :
— Créer un fichier ‘style.css‘ externe.
— Styliser le header : couleur de fond et texte centré.
— Styliser la liste avec des couleurs et espacements.
— Ajouter un hover sur les liens ou éléments cliquables.

1 body { font - family : Arial , sans - serif ; margin :0; padding :0; background :# f8f8f8 ;
}
2 header { background :#0 b3d91 ; color : white ; text - align : center ; padding :20 px 0; }
3 ul li { color :#0 b3d91 ; margin - bottom :10 px ; }
4 ul li : hover { color :# ff6600 ; cursor : pointer ; }
5 footer { text - align : center ; padding :15 px 0; background :# e0e0e0 ; }

Listing 35 – Exercice 2 : CSS de base

9.4. Exercice 3 : Interactivité avec JavaScript (1 page)

Objectif : rendre la page interactive avec des événements JS.

Consignes :
— Ajouter un bouton “Afficher un message”.
— Lors du clic, afficher une alerte ou changer le texte d’un paragraphe.
— Bonus : changer la couleur d’un élément aléatoirement.

1 document . getElementById ( ’ btnMessage ’) . addEventListener ( ’ click ’ , () = >{

2 alert ( ’ Bonjour , bienvenue sur notre site ! ’) ;
3 }) ;

Listing 36 – Exercice 3 : JS de base

9.5. Exercice 4 : Mini-projet combiné (1 page)

Objectif : créer une petite page combinant HTML, CSS et JS.

Consignes :
— Créer une section “Nos Services” avec 3 cartes.
— Styliser avec Flexbox ou Grid pour un layout responsive.
— Ajouter un bouton dans chaque carte qui affiche une description détaillée via JS.

37
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

Exemple de structure HTML :

1 < section class = " services " >
2 < div class = " card " >
3 < h3 > Web </ h3 >
4 <p class = " desc " > D v e l o p p e m e n t de sites web modernes . </ p >
5 < button > Voir plus </ button >
6 </ div >
7 < div class = " card " >
8 < h3 > Design </ h3 >
9 <p class = " desc " > Design graphique et UI / UX . </ p >
10 < button > Voir plus </ button >
11 </ div >
12 < div class = " card " >
13 < h3 > Consulting </ h3 >
14 <p class = " desc " > Conseil en technologies de l ’ information . </ p >
15 < button > Voir plus </ button >
16 </ div >
17 </ section >

Listing 37 – Mini-projet Services

1 document . querySelectorAll ( ’. services button ’) . forEach ( btn = > {

2 btn . addEventListener ( ’ click ’ , e = > {
3 const desc = e . target . pre vi ous Ele me ntS ib lin g ;
4 desc . style . display = desc . style . display === ’ block ’ ? ’ none ’ : ’ block ’;
5 }) ;
6 }) ;

Listing 38 – JS Mini-projet

9.6. Exercice 5 : Projet final guidé (1 page)

Objectif : créer un mini-site complet avec **HTML, CSS, JS et prompts IA**.

Consignes :
— Créer un site vitrine pour une entreprise fictive.
— Inclure au moins 3 pages : Accueil, À propos, Contact.
— Styliser avec CSS moderne (Flexbox/Grid, responsive).
— Ajouter interactivité (boutons, slider, formulaire).
— Générer du code partiel avec IA en rédigeant des prompts précis.

Exemple de prompt pour IA :

1 " G n r e r une page d ’ accueil responsive pour une s o c i t :
2 - Header avec logo et menu
3 - Section hero avec titre et sous - titre
4 - Section services avec 3 cartes
5 - Footer avec liens sociaux
6 - HTML + CSS + JS minimal "

Listing 39 – Prompt IA Exercice

38
Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

9.7. Conclusion du chapitre

Ces exercices permettent de :

— Pratiquer la **structure HTML** et le **style CSS**.
— Ajouter des **interactions JavaScript** simples et utiles.
— Organiser progressivement un projet complet.
— Intégrer l’**IA pour accélérer la génération et correction du code**.

À retenir
La pratique progressive est la clé pour maîtriser le développement web. Commencez par
des pages simples, puis combinez-les pour réaliser un projet complet et fonctionnel.

39
Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

Conclusion générale

Au terme de ce polycopié, le lecteur a acquis une vision complète et progressive du déve-

loppement web, depuis les fondements jusqu’aux outils modernes et à l’usage de l’intelligence
artificielle. Nous avons abordé plusieurs axes essentiels qui permettent non seulement de créer des
pages web fonctionnelles, mais également d’adopter des pratiques professionnelles et pérennes.

Rappel des acquis :

— Fondements du Web : Compréhension de l’architecture client-serveur, des protocoles

HTTP/HTTPS, du DOM et des mécanismes de rendu dans les navigateurs. Ces connais-
sances permettent de concevoir des sites performants et sécurisés.
— HTML : Maîtrise de la structure des pages, des balises sémantiques, des formulaires, des
tableaux, listes et liens. L’accent a été mis sur l’accessibilité et la sémantique, essentielles
pour l’expérience utilisateur et le référencement.
— CSS : Compétences solides en mise en forme, utilisation du box model, flexbox, grid,
animations et responsive design. Les bonnes pratiques présentées garantissent des interfaces
lisibles, élégantes et adaptables à tous types d’écrans.
— JavaScript : Acquisition de la logique de programmation, manipulation du DOM, gestion
des événements, asynchronisme et modularisation du code. Ces outils permettent d’enrichir
l’interaction et de dynamiser l’expérience utilisateur.
— Organisation de projet : Structuration de fichiers, liens CSS et JS, gestion d’un workflow
efficace et intégration de bonnes pratiques pour un projet maintenable et évolutif.
— Outils et bonnes pratiques modernes : Utilisation d’éditeurs, gestion de versions (Git),
automatisation de tâches, préprocesseurs CSS et tests. Ces éléments garantissent qualité,
sécurité et productivité dans un environnement professionnel.
— Intelligence artificielle : Exploration des assistants de code et outils IA pour générer,
optimiser et corriger du code. Compréhension de leur potentiel, de leurs limites et de
l’éthique à respecter lors de leur utilisation.
— Étude de cas et exercices pratiques : Mise en application concrète de tous les concepts
appris à travers un projet complet de site vitrine, permettant de consolider les connaissances
et de se préparer à des situations réelles.

Perspective et suite de l’apprentissage :

Le développement web est un domaine en constante évolution. Les technologies présentées
dans ce polycopié constituent les bases solides sur lesquelles construire des compétences avan-
cées : frameworks modernes (React, Vue, Angular), intégration back-end, Progressive Web Apps,
optimisation SEO et accessibilité avancée, ou encore automatisation intelligente avec l’IA.
La pratique régulière, la curiosité et l’expérimentation restent les clés pour progresser. L’étu-
diant ou le professionnel pourra ainsi adapter ses connaissances aux nouveaux standards et aux
innovations technologiques tout en conservant une méthodologie rigoureuse.

40
Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

Mot de la fin :
Maîtriser HTML, CSS, JavaScript et savoir intégrer intelligemment l’intelligence artificielle,
c’est être capable de créer des expériences web complètes, fonctionnelles, esthétiques et inno-
vantes. Ce polycopié vise à fournir non seulement le savoir, mais également la confiance nécessaire
pour concevoir, tester et déployer des projets web de qualité.

“Le développement web est à la fois un art et une science : comprendre ses fondements
et savoir exploiter les outils modernes permet de transformer des idées en expériences
digitales concrètes et engageantes.”

Bon apprentissage et réussite dans vos projets web !

41
Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

Annexes et ressources

Ressources recommandées

— W3C : organisation internationale qui définit les standards du Web. Le site contient des
recommandations et guides pour HTML, CSS, et l’accessibilité.
— FreeCodeCamp : plateforme interactive pour apprendre le développement web de manière
progressive et pratique.
— OpenClassrooms : tutoriels détaillés en français pour HTML, CSS, JavaScript et frame-
works modernes.
— IA et assistants de code : guides et blogs pour GitHub Copilot, ChatGPT, DeepSeek
et autres outils de génération de code assistée par IA.
— Outils de développement et déploiement : VS Code, Sublime text etc...

Glossaire des termes essentiels

DOM (Document Object Model) Représentation arborescente d’un document HTML, ma-
nipulable par JavaScript pour interagir dynamiquement avec le contenu d’une
page.
API (Application Programming Interface) Interface permettant à deux logiciels de com-
muniquer. Dans le web, souvent utilisée pour récupérer ou envoyer des don-
nées.
CSSOM (CSS Object Model) Structure représentant les styles appliqués à un document
HTML. Permet à JavaScript de lire et modifier les styles dynamiquement.
HTTP / HTTPS Protocoles de communication entre client et serveur. HTTPS intègre un
chiffrement sécurisé via TLS/SSL.
Flexbox Module CSS pour créer des mises en page unidimensionnelles (en ligne ou en
colonne) avec un alignement et un espacement flexibles.
Grid Module CSS pour créer des mises en page bidimensionnelles avec lignes et
colonnes.
Responsive design Technique visant à adapter l’affichage des sites web à toutes les tailles
d’écran et appareils.
IA (Intelligence Artificielle) Ensemble de méthodes permettant à des machines d’accomplir
des tâches nécessitant normalement l’intelligence humaine, comme la généra-
tion de code ou l’analyse de données.
CI/CD (Continuous Integration / Continuous Deployment) Pratiques permettant d’au-
tomatiser l’intégration, le test et le déploiement des projets pour améliorer la
qualité et la rapidité de mise en production.
SEO (Search Engine Optimization) Optimisation d’un site web pour améliorer sa visibilité
dans les moteurs de recherche.

42
 Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

Annexes pratiques

1. Exemples de snippets utiles

Formulaire HTML complet avec validation JS :
1 < form id = " contactForm " >
2 < label for = " email " > Email : </ label >
3 < input type = " email " id = " email " name = " email " required >
4 < label for = " message " > Message : </ label >
5 < textarea id = " message " name = " message " required > </ textarea >
6 < button type = " submit " > Envoyer </ button >
7 </ form >
8 < script >
9 document . getElementById ( ’ contactForm ’) . addEventListener ( ’ submit ’ , e = >{
10 e . preventDefault () ;
11 const email = document . getElementById ( ’ email ’) . value ;
12 if ( email . includes ( ’@ ’) ) {
13 alert ( ’ Formulaire valide ! ’) ;
14 } else {
15 alert ( ’ Email invalide ’) ;
16 }
17 }) ;
18 </ script >

Listing 40 – Formulaire HTML + JS

Exemple CSS responsive :

1 body {
2 font - family : Arial , sans - serif ;
3 margin :0;
4 }
5 nav {
6 background :#0 b3d91 ; color : white ; padding :10 px ; text - align : center ;
7 }
8 @media ( max - width :768 px ) {
9 nav { font - size :14 px ;}
10 }

Listing 41 – Exemple Media Query

Exemple d’appel API IA côté client :

1 async function genererCode ( prompt ) {
2 const response = await fetch ( ’ https :// api . example . com / generate ’ ,{
3 method : ’ POST ’ ,
4 headers :{ ’ Content - Type ’: ’ application / json ’} ,
5 body : JSON . stringify ({ prompt })
6 }) ;
7 const data = await response . json () ;
8 console . log ( data . result ) ;
9 }

Listing 42 – Appel API IA simple

43
Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

2. Check-list pour mise en ligne d’un site web

— Vérifier la structure des fichiers et liens relatifs.

— Optimiser images et médias (compression et dimensionnement).
— Tester le site sur différents navigateurs et appareils.
— Minifier CSS et JavaScript.
— Vérifier accessibilité et SEO de base.
— Déployer avec FileZilla ou via GitHub Pages / Netlify.

3. Modèle d’arborescence d’un projet web(site vitrine)

mon-site/
|--- index.html
|--- apropos.html
|--- services.html
|--- contact.html
|--- css/
| |---- style.css
|--- js/
| |---- script.js
|--- images/
| |--- logo.png
| |--- banner.jpg
| |--- favicon.ico
|--- fonts/
| |--- custom-font.woff
|--- assets/
|--- icons/

44
Développement WEB — HTML / CSS / JavaScript W. R. ZANNOU

4. Ressources supplémentaires pour l’IA appliquée au web

— ChatGPT : https://chat.openai.com – pour la génération de code et l’assistance aux

développeurs.
— GitHub Copilot : https://github.com/features/copilot – autocomplétion intelligente
dans les IDE.
— DeepSeek : https://chat.deepseek.com/ – recherche et génération de code assistée.
— TensorFlow.js : https://www.tensorflow.org/js – pour intégrer des modèles ML direc-
tement dans le navigateur.

5. Conseils méthodologiques pour l’apprentissage

— Pratiquer régulièrement avec de petits projets pour solidifier la compréhension.

— Documenter son code et écrire des commentaires clairs.
— Lire les documentations officielles avant de chercher des solutions tierces.
— Explorer l’IA comme un outil d’aide, mais toujours vérifier la qualité et la sécurité du code
généré.
— Participer à des forums et communautés (Stack Overflow, GitHub, Discord) pour résoudre
des problèmes concrets.

45