Le dépliant touristique
Un dépliant imprimé est le même pour tout le monde. Un site statique aussi : chaque visiteur reçoit exactement les mêmes fichiers. Un site dynamique, lui, ressemble à un guichet qui prépare une réponse différente pour chacun.
M04 · B. Implémenter une page web statique
Réaliser un site web statique
Comprendre comment le navigateur et le serveur échangent pour afficher une page statique, et organiser un petit site de plusieurs pages reliées par un menu.
1Situer
Un guide touristique de Chefchaouen veut un site de trois pages : accueil, circuits et contact. Le contenu change rarement, il n'y a pas de compte client ni de base de données. C'est le cas idéal pour un site statique : quelques fichiers HTML et CSS, rapides, sûrs et presque gratuits à héberger.
2Comprendre
Le visiteur tape l'adresse chaouen-decouverte.ma/circuits.html dans son navigateur.
1 / 6
Comment s’affiche une page statique
- Le visiteur tape
www.chaouen-decouverte.ma/circuits.htmlou clique sur un lien. - Le navigateur envoie une requête HTTP au serveur : « donne-moi circuits.html ».
- Le serveur cherche le fichier sur son disque et le renvoie tel quel : c’est la réponse.
- Le navigateur lit le HTML, voit qu’il faut aussi
style.csset des images, et les demande à leur tour. - Il affiche la page.
Le serveur ne calcule rien : il sert des fichiers. C’est pour cela qu’un site statique est rapide, sûr et peu cher.
Statique ou dynamique ?
| Site statique | Site dynamique |
|---|---|
| fichiers HTML, CSS, images | pages générées par un programme (PHP, Node.js…) |
| même contenu pour tous | contenu selon l’utilisateur |
| pas de base de données | base de données |
| vitrine, CV, événement, documentation | boutique, réseau social, espace client |
Le site que vous lisez en ce moment est d’ailleurs un site statique.
Organiser un site de plusieurs pages
- Un dossier par projet, avec
index.htmlcomme page d’accueil. - Des sous-dossiers :
css/,images/,pages/. - Des noms de fichiers en minuscules, sans espaces ni accents :
circuits-montagne.html. - Le même en-tête et le même menu sur chaque page, avec des liens relatifs.
- Des liens spéciaux :
mailto:(e-mail),tel:(téléphone),#id(ancre dans la page).
Le même menu sur toutes les pages
Chaque page reprend le même en-tête avec les liens vers les autres pages. Le visiteur se repère et navigue sans se perdre.
<nav> <a href="index.html">Accueil</a> <a href="circuits.html">Circuits</a> <a href="contact.html">Contact</a> </nav>
Publicité
3Manipuler
Voici la page d'accueil du guide. Complétez-la pour qu'elle ressemble à une vraie page de site. Dans le bac à sable, un clic sur un lien vers une autre page affiche simplement un message.
- Ajoutez un lien « Contact » vers contact.html dans le menu
- Ajoutez une deuxième <section> « Nos circuits » dans <main>
- Dans cette section, présentez deux circuits dans des <article>
- Ajoutez un <footer> avec un lien téléphone (href qui commence par tel:)
4Pratiquer
Exercice 1 · Statique ou dynamique ?
Pour chaque site, dites s'il peut être statique : (1) le CV en ligne d'un développeur ; (2) une boutique avec panier et paiement ; (3) la page d'un événement avec programme et plan d'accès ; (4) un réseau social.
Voir le corrigé
1. Statique : contenu fixe. 2. Dynamique : panier, comptes, commandes, base de données. 3. Statique. 4. Dynamique : contenu différent pour chaque utilisateur.
Exercice 2 · L'arborescence du site
Dessinez l'arborescence des fichiers du site du guide (3 pages, une feuille de style, des photos) et écrivez le lien de circuits.html vers la photo bleu.jpg.
Voir le corrigé
chaouen/ ├── index.html ├── circuits.html ├── contact.html ├── css/style.css └── images/bleu.jpg Dans circuits.html : <img src="images/bleu.jpg" alt="Ruelle bleue">
Exercice 3 · Le lien e-mail
Écrivez un lien qui ouvre la messagerie pour écrire à contact@chaouen-decouverte.ma avec l'objet « Réservation ».
Voir le corrigé
<a href="mailto:contact@chaouen-decouverte.ma?subject=Réservation"> Écrivez-nous </a>
Publicité