I.
INTRODUCTION
Pendant ce travail en groupe, nous avons essayé de définir le site web statique, de
développer les notions de structure d’une page web, d’expliquer la création d’un site web
simple, de différencier le site web statique au site web dynamique ainsi que créer un site
web statique visant à promouvoir un événement scolaire avec ses codes sources utilisés
lors de sa création.
1) Définition d'un site web statique
Un site web statique est un site dont les pages sont constituées de fichiers HTML, CSS et
parfois JavaScript, qui sont stockés sur un serveur et affichés tels quels aux utilisateurs.
Contrairement aux sites dynamiques, les sites statiques ne changent pas en fonction des
interactions des utilisateurs ou des bases de données.
Caractéristiques d’un site web statique par rapport à un site dynamique
• Contenu fixe : Les pages ne changent pas en fonction des interactions des
utilisateurs.
• Pas de base de données : Contrairement aux sites dynamiques, un site statique ne
dépend pas d’une base de données pour stocker et afficher le contenu.
• Facilité de développement : Il est plus facile et rapide à créer, car il ne nécessite
pas de langage côté serveur.
• Rapidité et sécurité : Les sites statiques se chargent plus vite et sont moins
vulnérables aux attaques.
• Maintenance limitée : Chaque modification doit être faite manuellement sur les
fichiers HTML.
2) Structure de base d'une page HTML
1. Le doctype (`<!DOCTYPE html>`)
Le `DOCTYPE` est la première ligne du document HTML. Il informe le navigateur du
type de document et de la version du langage HTML utilisée.
2. Les balises `<html>`, `<Head>`, et `<body>`
`<html>` : L’élément racine qui englobe tout le contenu de la page.
`<head>` : Contient les métadonnées comme le titre, les styles CSS et les liens
vers d’autres ressources.
`<body>` : Contient le contenu visible de la page.
3. Importance des balises `<title>` et `<meta>`
`<title>` : Définit le titre de la page qui apparaît dans l’onglet du navigateur.
`<meta>` : Fournit des métadonnées utiles comme la description de la page et
l’optimisation SEO.
3) Plan détaillé pour un site web statique promouvant un événement scolaire
1. Page d'accueil (`index.html`)
Objectif : Présenter l’événement avec une image et un message d’accueil.
Contenu principal :
• Un grand titre : "Bienvenue à la Journée Portes Ouvertes de l’École SAFE
SCHOOL
• Une image ou une bannière de l’événement
• Un court texte d’introduction expliquant l’importance de l’événement
• Un bouton "En savoir plus" menant à la section "À propos"
2. À propos de l'événement (`about.html`)
Objectif : Donner des détails sur l’événement de porte ouverte et son importance.
Contenu principal :
• Une section décrivant l’école et ses valeurs
• La date, l’heure et le lieu de l’événement
• Un paragraphe expliquant pourquoi les visiteurs devraient y participer
3. Programme (`programme.html`)
Objectif : Fournir un emploi du temps détaillé des activités prévues pendant la journée.
Exemples d’activités :
• 09h00 : Accueil et discours du directeur
• 10h00 : Visite des locaux
• 11h30 : Démonstration de projets d’élèves
• 14h00 : Ateliers interactifs
• 16h00 : Session de questions-réponses
4. Page de contact (`contact.html`)
Objectif : Permettre aux visiteurs de poser des questions ou de confirmer leur présence.
Contenu principal :
• Une adresse email et un numéro de téléphone pour les informations
• Un formulaire de contact avec : Nom, Adresse email, Message, Bouton "Envoyer"
• Une carte interactive montrant l’emplacement de l’école
Technologies utilisées
• HTML : Structure des pages
• CSS (optionnel) : Pour le design et la mise en page
• JavaScript (optionnel) : Pour ajouter des animations légères
Voici le résultat
Voici les codes sources que nous avons utilisés
Conclusion
Ce plan de travail met en lumière les définitions nécessaires pour bien comprendre le site
web statique, la création efficace et simple d’un site web statique professionnel rapide à
télécharger et accessible à tous les visiteurs sans nécessiter de base de données ou
d’interaction avancée et enfin, ce travail en groupe nous a permis de partager et
d’échanger sur nos connaissances apprises en classe pour une compréhension mutuelle.
Ce travail a été fait par le Groupe numéro 3 constituer par les élevés du numéro 10
jusqu’au numéro 15
Le chef du groupe est Jules Fleury NIZIGIYIMANA (№ 15)
