Module 5 – Création de site web

mai 12, 2026
by Pascal Similon

Objectif du module

À la fin du module, l’élève sera capable de concevoir et réaliser un site web dynamique, ergonomique et esthétique, en respectant les bases du langage HTML, de la mise en forme CSS, de l’interactivité avec JavaScript et, selon le niveau, de l’utilisation d’un CMS ou d’un langage serveur comme PHP.

1. Comprendre le fonctionnement du Web

1.1 Qu’est-ce qu’un site web ?

Un site web est un ensemble de pages reliées entre elles par des liens hypertextes. Ces pages sont consultables grâce à un navigateur web.

Exemples de navigateurs :

Google Chrome
Mozilla Firefox
Microsoft Edge
Safari

Un site web peut être :

statique : le contenu ne change pas automatiquement ;
dynamique : le contenu peut changer selon l’utilisateur, une base de données, un formulaire ou une source extérieure.

1.2 Le concept d’URL

Une URL est l’adresse d’une ressource sur Internet.

Exemple :

https://www.exemple.com/contact.html

Elle peut contenir plusieurs parties :

https://        → protocole
www.exemple.com → nom de domaine
/contact.html  → chemin vers la page

1.3 URL absolue et URL relative

URL absolue

Une URL absolue donne l’adresse complète d’une ressource.

<a href="https://www.google.com">Aller sur Google</a>

URL relative

Une URL relative indique le chemin par rapport au fichier actuel.

<a href="contact.html">Page contact</a>

Exemple pour une image placée dans un dossier images :

<img src="images/logo.png" alt="Logo du site">

1.4 Hypertexte et liens

Le Web fonctionne grâce à l’hypertexte.
Un lien hypertexte permet de passer d’une page à une autre.

Exemple :

<a href="apropos.html">À propos</a>

1.5 Serveur et navigateur

Le navigateur demande une page web.
Le serveur envoie cette page au navigateur.

Schéma simple :

Utilisateur → Navigateur → Serveur web → Page affichée

2. Le langage HTML

2.1 Qu’est-ce que le HTML ?

HTML signifie HyperText Markup Language.

C’est le langage utilisé pour structurer une page web.

Il permet d’ajouter :

des titres ;
des paragraphes ;
des images ;
des liens ;
des tableaux ;
des formulaires ;
des vidéos ;
des zones de contenu.

2.2 Les balises HTML

Le HTML fonctionne avec des balises.

Exemple :

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

Une balise ouvrante :

<p>

Une balise fermante :

</p>

Le contenu se place entre les deux.

2.3 Structure de base d’un document HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon premier site</title>
</head>
<body>

    <h1>Bienvenue sur mon site</h1>
    <p>Ceci est ma première page web.</p>

</body>
</html>

Explication :

<!DOCTYPE html>

Indique que le document utilise HTML5.

<html lang="fr">

Début du document HTML en français.

<head>

Contient les informations invisibles de la page.

<title>

Titre affiché dans l’onglet du navigateur.

<body>

Contient ce qui est visible sur la page.

3. L’indentation

L’indentation consiste à décaler le code pour le rendre plus lisible.

Exemple mal présenté :

<html>
<head>
<title>Site</title>
</head>
<body>
<h1>Titre</h1>
<p>Texte</p>
</body>
</html>

Exemple bien indenté :

<html>
    <head>
        <title>Site</title>
    </head>
    <body>
        <h1>Titre</h1>
        <p>Texte</p>
    </body>
</html>

L’indentation ne change pas le résultat visuel, mais elle facilite la lecture du code.

4. Les éléments de base en HTML

4.1 Les titres

HTML propose plusieurs niveaux de titres.

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Titre de niveau 3</h3>

Le titre principal d’une page doit généralement être en h1.

4.2 Les paragraphes

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

4.3 La mise en évidence

<strong>Texte important</strong>
<em>Texte mis en évidence</em>

strong indique une importance forte.
em indique une emphase.

4.4 Les listes

Liste non ordonnée

<ul>
    <li>Accueil</li>
    <li>Services</li>
    <li>Contact</li>
</ul>

Liste ordonnée

<ol>
    <li>Créer le fichier HTML</li>
    <li>Ajouter le contenu</li>
    <li>Tester dans le navigateur</li>
</ol>

5. Les images et objets multimédias

5.1 Insérer une image

<img src="images/photo.jpg" alt="Description de l’image">

L’attribut alt est important pour :

l’accessibilité ;
le référencement ;
l’affichage d’un texte si l’image ne charge pas.

5.2 Insérer une vidéo

<video controls width="500">
    <source src="videos/presentation.mp4" type="video/mp4">
    Votre navigateur ne supporte pas la vidéo.
</video>

5.3 Insérer un fichier audio

<audio controls>
    <source src="audio/musique.mp3" type="audio/mpeg">
    Votre navigateur ne supporte pas l’audio.
</audio>

6. Les liens et les ancres

6.1 Lien vers une autre page

<a href="contact.html">Nous contacter</a>

6.2 Lien vers un site extérieur

<a href="https://www.wikipedia.org">Aller sur Wikipédia</a>

6.3 Lien ouvrant dans un nouvel onglet

<a href="https://www.wikipedia.org" target="_blank">Wikipédia</a>

6.4 Créer une ancre dans la page

Une ancre permet d’aller directement vers une section précise.

<a href="#contact">Aller au contact</a>

<h2 id="contact">Contact</h2>
<p>Voici nos informations de contact.</p>

7. Les tableaux

Les tableaux servent à organiser des données.

<table>
    <tr>
        <th>Nom</th>
        <th>Âge</th>
        <th>Ville</th>
    </tr>
    <tr>
        <td>Marie</td>
        <td>22</td>
        <td>Namur</td>
    </tr>
    <tr>
        <td>Lucas</td>
        <td>25</td>
        <td>Bruxelles</td>
    </tr>
</table>

Balises principales :

table : crée le tableau ;
tr : crée une ligne ;
th : cellule d’en-tête ;
td : cellule normale.

8. La mise en forme avec CSS

8.1 Qu’est-ce que le CSS ?

CSS signifie Cascading Style Sheets.

Il sert à mettre en forme une page HTML :

couleurs ;
polices ;
tailles ;
marges ;
alignements ;
arrière-plans ;
mise en page.

8.2 Trois façons d’ajouter du CSS

CSS directement dans une balise

<p style="color: red;">Texte rouge</p>

Cette méthode est simple, mais peu recommandée.

CSS dans la page HTML

<style>
    p {
        color: blue;
    }
</style>

CSS dans un fichier séparé

Dans le fichier HTML :

<link rel="stylesheet" href="style.css">

Dans le fichier style.css :

p {
    color: blue;
}

C’est la méthode la plus propre.

8.3 Exemple de CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    color: #222;
}

h1 {
    color: #1e5aa8;
    text-align: center;
}

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

9. Les couleurs en Web design

9.1 Choisir une palette cohérente

Un site agréable utilise une palette limitée.

Exemple :

Couleur principale : bleu
Couleur secondaire : gris clair
Couleur d’accent : orange
Texte : noir ou gris foncé
Fond : blanc ou très clair

Il faut éviter :

trop de couleurs différentes ;
des contrastes trop faibles ;
des fonds qui rendent le texte illisible.

9.2 Contraste et lisibilité

Un bon site doit être lisible.

Mauvais exemple :

body {
    background-color: yellow;
    color: white;
}

Bon exemple :

body {
    background-color: white;
    color: #222222;
}

9.3 Conseils de design

Un site web doit être :

clair ;
lisible ;
structuré ;
cohérent ;
adapté aux écrans ;
agréable visuellement ;
facile à utiliser.

10. Mise en page simple

10.1 Structure classique d’une page

<header>
    <h1>Nom du site</h1>
    <nav>
        <a href="index.html">Accueil</a>
        <a href="services.html">Services</a>
        <a href="contact.html">Contact</a>
    </nav>
</header>

<main>
    <section>
        <h2>Bienvenue</h2>
        <p>Présentation du site.</p>
    </section>
</main>

<footer>
    <p>&copy; 2026 - Mon site</p>
</footer>

10.2 Exemple CSS pour la mise en page

header {
    background-color: #1e5aa8;
    color: white;
    padding: 20px;
    text-align: center;
}

nav a {
    color: white;
    margin: 0 10px;
    text-decoration: none;
}

main {
    max-width: 1000px;
    margin: auto;
    padding: 20px;
}

footer {
    background-color: #222;
    color: white;
    text-align: center;
    padding: 15px;
}

11. Les formulaires HTML

11.1 Qu’est-ce qu’un formulaire ?

Un formulaire permet à l’utilisateur d’envoyer des informations.

Exemples :

nom ;
prénom ;
email ;
message ;
choix ;
mot de passe ;
fichier.

11.2 Exemple de formulaire simple

<form action="traitement.php" method="post">
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom">

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

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

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

11.3 Les méthodes GET et POST

Méthode GET

Les données sont visibles dans l’URL.

<form method="get">

Exemple :

contact.html?nom=Dupont&email=test@mail.com

Méthode POST

Les données ne sont pas visibles dans l’URL.

<form method="post">

La méthode POST est préférable pour les données personnelles.

12. Introduction à JavaScript

12.1 Qu’est-ce que JavaScript ?

JavaScript est un langage qui permet d’ajouter de l’interactivité dans une page web.

Il peut servir à :

afficher un message ;
vérifier un formulaire ;
modifier du contenu ;
créer des animations ;
réagir à un clic.

12.2 Intégrer un script JavaScript

Dans une page HTML :

<script>
    alert("Bienvenue sur mon site !");
</script>

Ou avec un fichier séparé :

<script src="script.js"></script>

12.3 Exemple avec un bouton

<button onclick="direBonjour()">Clique ici</button>

<script>
    function direBonjour() {
        alert("Bonjour !");
    }
</script>

12.4 Modifier le contenu d’une page

<p id="message">Texte original</p>
<button onclick="changerTexte()">Changer le texte</button>

<script>
    function changerTexte() {
        document.getElementById("message").innerHTML = "Texte modifié !";
    }
</script>

13. Introduction à PHP

13.1 Qu’est-ce que PHP ?

PHP est un langage exécuté côté serveur.

Il permet de créer des pages dynamiques.

PHP peut servir à :

traiter un formulaire ;
afficher des données ;
se connecter à une base de données ;
gérer des sessions ;
créer un espace membre.

13.2 Exemple de code PHP

<?php
echo "Bonjour, bienvenue sur mon site.";
?>

Le code PHP doit être exécuté sur un serveur compatible PHP.

13.3 Récupérer les données d’un formulaire

Formulaire HTML :

<form action="traitement.php" method="post">
    <input type="text" name="nom">
    <button type="submit">Envoyer</button>
</form>

Fichier traitement.php :

<?php
$nom = $_POST["nom"];
echo "Bonjour " . $nom;
?>

14. Les sessions

14.1 Qu’est-ce qu’une session ?

Une session permet de conserver des informations sur un utilisateur pendant sa navigation.

Exemple :

utilisateur connecté ;
panier d’achat ;
préférences ;
score dans un jeu.

14.2 Créer une session en PHP

<?php
session_start();

$_SESSION["utilisateur"] = "Marie";

echo "Session créée.";
?>

14.3 Lire une donnée de session

<?php
session_start();

echo "Bonjour " . $_SESSION["utilisateur"];
?>

14.4 Détruire une session

<?php
session_start();

session_destroy();

echo "Session terminée.";
?>

15. Site statique et site dynamique

15.1 Site statique

Un site statique affiche toujours les mêmes informations.

Exemple :

<h1>Bienvenue</h1>
<p>Voici mon site personnel.</p>

Avantages :

simple à créer ;
rapide ;
facile à héberger.

Limites :

peu interactif ;
difficile à mettre à jour si le site devient grand.

15.2 Site dynamique

Un site dynamique peut changer son contenu automatiquement.

Exemples :

site avec connexion utilisateur ;
blog ;
boutique en ligne ;
site d’actualités ;
formulaire de contact ;
contenu provenant d’une base de données.

16. Intégration de données extérieures

Un site dynamique peut afficher des données provenant d’une source extérieure.

Exemples :

météo ;
flux RSS ;
API ;
données JSON ;
base de données ;
fichier CSV.

16.1 Exemple simple avec JavaScript

<p id="info">Chargement...</p>

<script>
    fetch("https://api.exemple.com/data")
        .then(response => response.json())
        .then(data => {
            document.getElementById("info").innerHTML = data.message;
        });
</script>

Ce code va chercher des données sur une source extérieure et les affiche dans la page.

17. Introduction aux CMS

17.1 Qu’est-ce qu’un CMS ?

Un CMS est un système de gestion de contenu.

Il permet de créer un site web sans devoir tout coder soi-même.

Exemples de CMS :

WordPress ;
Joomla ;
Drupal ;
Shopify ;
Wix.

17.2 WordPress

WordPress permet de créer :

des blogs ;
des sites vitrines ;
des portfolios ;
des boutiques en ligne ;
des sites professionnels.

17.3 Installer un CMS

Étapes générales :

Télécharger ou installer WordPress via un hébergeur.
Créer une base de données.
Configurer le site.
Choisir un thème.
Ajouter des extensions.
Créer les pages.
Publier le site.

17.4 Avantages d’un CMS

Un CMS permet :

de gagner du temps ;
de modifier facilement les contenus ;
d’utiliser des thèmes graphiques ;
d’ajouter des fonctionnalités ;
de gérer plusieurs utilisateurs.

17.5 Limites d’un CMS

Un CMS demande aussi :

des mises à jour régulières ;
une attention à la sécurité ;
une bonne organisation ;
une optimisation des performances.

18. Exemple de mini-site complet

18.1 Fichier `index.html`

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Restaurant Sakura</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <h1>Restaurant Sakura</h1>
        <nav>
            <a href="index.html">Accueil</a>
            <a href="menu.html">Menu</a>
            <a href="contact.html">Contact</a>
        </nav>
    </header>

    <main>
        <section>
            <h2>Bienvenue</h2>
            <p>Découvrez notre restaurant asiatique moderne.</p>
            <img src="images/restaurant.jpg" alt="Salle du restaurant">
        </section>

        <section>
            <h2>Nos spécialités</h2>
            <ul>
                <li>Ramen japonais</li>
                <li>Pad thaï</li>
                <li>Sushi</li>
                <li>Curry coréen</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 - Restaurant Sakura</p>
    </footer>

</body>
</html>

18.2 Fichier `style.css`

body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #fafafa;
    color: #222;
}

header {
    background-color: #b91c1c;
    color: white;
    padding: 20px;
    text-align: center;
}

nav a {
    color: white;
    margin: 0 12px;
    text-decoration: none;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}

main {
    max-width: 1000px;
    margin: auto;
    padding: 20px;
}

section {
    background-color: white;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 8px;
}

img {
    max-width: 100%;
    border-radius: 8px;
}

footer {
    background-color: #222;
    color: white;
    text-align: center;
    padding: 15px;
}

19. Synthèse du module

Pour créer un site web, il faut comprendre :

le rôle du navigateur et du serveur ;
la structure HTML ;
la mise en forme CSS ;
l’importance de l’indentation ;
les liens et URL ;
les images et médias ;
les formulaires ;
les bases de JavaScript ;
les bases de PHP ;
la différence entre site statique et site dynamique ;
le fonctionnement d’un CMS ;
l’importance de l’ergonomie et du design.

Un bon site web doit être clair, lisible, cohérent, esthétique et facile à utiliser.

A la une

P4TH, bien plus qu’une simple classe d’informatique

Chez P4TH, les étudiants en informatique travaillent comme un véritable département IT.L’idée n’est pas seulement d’apprendre la théorie, mais de construire, collaborer et livrer des

septembre 1, 2025

3ème année

Charte graphique – Brand Identiy

Exercice Transformez votre logo avec les exemples que j’ai donné. Soyez-le plus complet possible. Aidez-vous de AI ou de site de génération de Brand identity

septembre 3, 2025

Module 5 – Création de site web

Objectif du module

1. Comprendre le fonctionnement du Web

1.1 Qu’est-ce qu’un site web ?

1.2 Le concept d’URL

1.3 URL absolue et URL relative

URL absolue

URL relative

1.4 Hypertexte et liens

1.5 Serveur et navigateur

2. Le langage HTML

2.1 Qu’est-ce que le HTML ?

2.2 Les balises HTML

2.3 Structure de base d’un document HTML

3. L’indentation

4. Les éléments de base en HTML

4.1 Les titres

4.2 Les paragraphes

4.3 La mise en évidence

4.4 Les listes

Liste non ordonnée

Liste ordonnée

5. Les images et objets multimédias

5.1 Insérer une image

5.2 Insérer une vidéo

5.3 Insérer un fichier audio

6. Les liens et les ancres

6.1 Lien vers une autre page

6.2 Lien vers un site extérieur

6.3 Lien ouvrant dans un nouvel onglet

6.4 Créer une ancre dans la page

7. Les tableaux

8. La mise en forme avec CSS

8.1 Qu’est-ce que le CSS ?

8.2 Trois façons d’ajouter du CSS

CSS directement dans une balise

CSS dans la page HTML

CSS dans un fichier séparé

8.3 Exemple de CSS

9. Les couleurs en Web design

9.1 Choisir une palette cohérente

9.2 Contraste et lisibilité

9.3 Conseils de design

10. Mise en page simple

10.1 Structure classique d’une page

10.2 Exemple CSS pour la mise en page

11. Les formulaires HTML

11.1 Qu’est-ce qu’un formulaire ?

11.2 Exemple de formulaire simple

11.3 Les méthodes GET et POST

Méthode GET

Méthode POST

12. Introduction à JavaScript

12.1 Qu’est-ce que JavaScript ?

12.2 Intégrer un script JavaScript

12.3 Exemple avec un bouton

12.4 Modifier le contenu d’une page

13. Introduction à PHP

13.1 Qu’est-ce que PHP ?

13.2 Exemple de code PHP

13.3 Récupérer les données d’un formulaire

14. Les sessions

14.1 Qu’est-ce qu’une session ?

14.2 Créer une session en PHP

14.3 Lire une donnée de session

14.4 Détruire une session

15. Site statique et site dynamique

15.1 Site statique

15.2 Site dynamique

16. Intégration de données extérieures

16.1 Exemple simple avec JavaScript

17. Introduction aux CMS

17.1 Qu’est-ce qu’un CMS ?

17.2 WordPress

17.3 Installer un CMS

17.4 Avantages d’un CMS

17.5 Limites d’un CMS

18. Exemple de mini-site complet

18.1 Fichier index.html

18.2 Fichier style.css

18.1 Fichier `index.html`

18.2 Fichier `style.css`