C'est le printemps ! 
Site Web Stade de foot de Brest
Sommaire
[masquer]Auteur
Yann présente : Le site web de stade de foot de Brest
Projet
Courte description de votre Projet initial
Objectifs
Objectifs du Projet
Le projet de site web sur le Stade Brestois vise à :
Présenter l'histoire et l'actualité du Stade Brestois de manière interactive et visuellement attrayante.
Concevoir une interface ergonomique permettant une navigation fluide et intuitive.
Offrir aux visiteurs des informations actualisées sur les matchs, les résultats, les joueurs et les événements liés au club.
Mettre en place une galerie multimédia avec photos et vidéos pour enrichir l'expérience utilisateur.
Utiliser HTML, CSS structurer et styliser les contenus du site.
Objectifs Pédagogiques
À l’issue de ce projet, les participant·e·s seront capables de :
Structurer un site web en utilisant HTML5 de manière sémantique.
Styliser et personnaliser un site avec CSS3 en respectant les bonnes pratiques du design web.
Gérer des menus déroulants et des sliders d’images afin de dynamiser l’affichage des contenus.
Travailler en autonomie sur un projet de site web et respecter une arborescence organisée des fichiers et ressources.
Technologies Utilisées
HTML5 : Structure de base du site.
CSS3 : Mise en page et stylisation.
Font Library : Intégration de polices spécifiques pour l’identité visuelle.
Fonctionnalités Principales du Site
Page d'accueil : Présentation du Stade Brestois avec un slider mettant en avant les actualités principales.
Menu de navigation : Accès rapide aux différentes sections (historique, matchs, joueurs, événements, galerie).
Historique du club : Informations sur la création et l'évolution du Stade Brestois.
Matchs et résultats : Mise à jour des matchs à venir et des résultats récents.
Effectif et joueurs : Présentation des joueurs actuels, historiques et de l’équipe féminine.
Événements : Agenda des événements futurs et archives des événements passés.
Galerie multimédia : Photos, vidéos et liens vers les réseaux sociaux du club.
Étapes de votre projet
1ère Étape:
Nous allons tout d'abord créer notre dossier html, pour cela nous allons ouvrir Visual Studio Code et taper nos premières lignes de code:
1 <!DOCTYPE html>
2 <html lang="fr">
La première ligne signifie que le langage de la page sera en HTML
La deuxième est pour la langue, on signifie bien FR pour français pour qu'il prenne en compte les accents
Vous pouvez enregistrer le fichier avec un Ctrl+S une première fois et le renommer "index"
Nous allons ensuite nous occuper de la balise <head>
L'élément <head> contient les métadonnées (informations générales) du document, comme le titre, les liens et les scripts.
La première ligne importante est celle-ci:
1 <meta charset="UTF-8">
La Meta Charset est un attribut qui détermine la façon dont le texte est transmis et stocké.
Elle définit l'encodage des caractères du document en UTF-8, qui est lui un standard qui prend en charge la plupart des caractères utilisés dans le monde.
La ligne:
1 <meta name="viewport" content="width=device-width, initial-scale=1.0">
Permet elle d'adapter l'affichage du site aux écrans des appareils mobiles.
On utilise ensuite la balise <title> pour donner un titre à son site
1 <title>StadeBrestois</title>
1 <meta name="viewport" content="width=device-width, initial-scale=1.0">
Cette ligne permet d'adapter l'affichage du site aux écrans des appareils mobiles.
width=device-width : Ajuste la largeur du site à celle de l'écran de l'appareil.
initial-scale=1.0 : Définit le niveau de zoom initial à 100 %
La prochaine ligne sert à lier une feuille de style CSS externe au document HTML.
1 <link rel="stylesheet" href="style.css">
rel="stylesheet" : Indique que le fichier est une feuille de style.
href="style.css" : Spécifie le chemin du fichier CSS à appliquer.
Cela permet de séparer la mise en forme du contenu HTML, rendant le code plus propre et plus facile à maintenir.
On peut maintenant fermer la balise </head>
Notre code devrait ressembler à ça:
1 <!DOCTYPE html>
2 <html lang="fr">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>StadeBrestois</title>
8 <link rel="stylesheet" href="style.css">
9 </head>
Nous avons la base de notre code maintenant nous allons pouvoir commencer à construire notre site avec la balise <body>
L’élément <body> contient tout le contenu visible d’une page web, comme le texte, les images, les vidéos, les liens et les formulaires.
Tout ce qui est affiché à l'utilisateur se trouve à l'intérieur de <body>
1 <body>
2 <h1>Vive le stade de Brest</h1>
3 </body>
Notre titre s'affiche bien mais n'est pas très joli Pour changer cela nous allons créer une nouvelle page sur VisualStudioCode qu'on va nommer style.css Elle permet de styliser les éléments HTML en modifiant des propriétés comme : Les couleurs (color, background-color) Les polices (font-family, font-size) Les marges et espacements (margin, padding) La disposition des éléments (display, flex, grid) (Attention! Bien enregistrer le style.css dans le même dossier que le index.html) Pour notre titre h1 je veux qu'il soit centré et de couleur rouge, pour cela:
1 h1 {
2 display: flex;
3 justify-content: center;
4 color: red;
5 }
Nous allons tout d'abord parler de la Flexbox
Une Flexbox est une méthode de mise en page en CSS qui permet d'aligner et de distribuer facilement les éléments dans un conteneur, que ce soit en ligne ou en colonne.
'display: flex;' est une propriété CSS qui transforme un élément en conteneur flex. Grâce à ça nous indiquons à notre code que notre h1 devient un conteneur flexible.
Cela permet d'utiliser des propriétés comme `justify-content: center;` pour centrer le texte horizontalement.
Ensuite nous indiquons la couleur du texte en rouge avec color:red
(Pour cet exemple j'ai omis volontairement la commande `text-align: center;` qui aurait centré directement le texte)
Maintenant tous nos titres h1 auront les propriétés justify-content: center; et color:red mais si on veut rentrer plusieurs h1 avec des propriétés différentes cela ne fonctionnera pas
Pour cela nous allons créer des classes qui auront des propriétés différentes
Exemple dans le index.html:
1 <div class="vlsb">
2 <h1>Vive le stade de Brest</h1>
3 </div>
Un div en HTML est un élément de conteneur générique qui permet d'organiser et de structurer le contenu d'une page web. Il ne possède pas de signification sémantique particulière mais est souvent utilisé pour regrouper des éléments et appliquer des styles via CSS ou JavaScript
Un div avec une classe permet de structurer celle-ci pour que cette dernière permette d'appliquer du style via CSS.
Allons voir maintenant dans le CSS:
1 .vlsb {
2 text-align: center;
3 color: red;
4 }
En réalité utilisé la balise h1 dans une div n'est pas une bonne pratique, même si cela fonctionnera quand même. Nous allons plutôt utilisé la balise p (Elle définie un paragraphe de texte)
Ici on a juste remplacer le p par le nom de la classe avec un point juste avant
Grâce à cela on peut maintenant intégrer plusieurs p dans notre code avec des propriétés différentes, on a juste a créer des classes
Exemple:
Pour l'index.html
1 <body>
2 <div class="vlsb">
3 <p>Vive le stade de Brest</p>
4 </div>
5 <div class="genial">
6 <p>C'est génial</p>
7 </div>
8 </body>
Pour le CSS:
1 .vlsb {
2 text-align: center;
3 color: red;
4 font-size: xx-large;
5 }
6
7 .genial {
8 margin-bottom: 10%;
9 margin-left: 20% ;
10 color: black;
11 background-color: brown;
12
13 }
Le h1 ayant déjà des propriétés, on utilise ici font-size pour agrandir la taille du texte p en xx-large, on peut aussi le mettre en pourcentage (10%) ou en pixels (10px)
Pour le .genial on lui donne une marge en pourcentage pour décaler le texte
margin-bottom: 10% Cela ajoute un espace en bas de l'élément égal à 10% de la hauteur de son conteneur parent
margin-left: 20%; : Cela ajoute un espace à gauche de l'élément, égal à 20% de la largeur de son conteneur parent
Plus ce pourcentage est grand, plus l'élément sera décalé
La propriété background-color: brown; permet de définir la couleur de fond d'un élément HTML.
Vous avez maintenant les bases pour créer votre site en HTML/CSS
Etape 2
Je vais maintenant vous montrer comment intégrer un header et une barre de navigation avec menu déroulant
La balise <header> en HTML est utilisée pour définir une section d'en-tête d'un document ou d'une section d'une page web. Elle est souvent utilisée pour contenir des informations importantes comme le titre du site, le logo, les menus de navigation, ou d'autres éléments en lien avec le début d'une page ou d'une section.
Elle permet surtout de structurer clairement notre code. Elle indique qu'il s'agit de l'en-tête de la page ou de la section. C'est donc une bonne pratique pour améliorer l'accessibilité et le référencement de notre site.
On vas donc intégrer la balise <header> à notre HTML avec un autre balise appelé <nav> qui est utilisée pour définir une zone de navigation sur une page web (contient des liens qui permettent de naviguer à travers les différentes sections d'un site ou d'une page):
1 <body>
2 <header>
3 <nav>
Comme nous allons créer une liste de plusieurs liens dans notre barre de navigation, on va avoir besoin de 2 nouvelles balise qui sont ul et li
ul signifie "Unordered List" (liste non ordonnée). Elle est utilisée pour créer une liste de points (éléments de la liste) qui ne sont pas dans un ordre particulier.(à noter qu'il existe ol pour les listes ordonnés)
li signifie "List Item" (élément de liste). Elle est utilisée pour définir chaque élément individuel de la liste, qu'il soit dans une liste ordonnée (ol) ou non ordonnée (ul).
On va donc créer notre liste avec ul et mettre les éléments de la liste sous des balises li
1 <body>
2 <header>
3 <nav>
4 <ul class="nav-links">
5 <li> HISTORIQUE DU CLUB</li>
6 <li>MATCHS ET RESULTATS</li>
7 </ul>
8 </nav>
9 </header>
10 </body>
Avec un peu de CSS
1 nav {
2 display: flex;
3 justify-content: space-between;
4 align-items: center;
5 width: 90%;
6 background: rgba(238, 22, 31, 0.9);
7 padding: 5px;
8 border-radius: 10px;
9 position: relative;
10 margin-left: 40px;
11 }
12
13 .nav-links {
14 list-style: none;
15 display: flex;
16 gap: 20px;
17 }
18
19 .nav-links li {
20 display: inline-block;
21 margin-right: 45px
22 }
Ici on crée une liste avec ul lié a une classe qu'on nomme nav-links, on va ensuite créer une liste avec nos li et mettre nos titre de nos futur page de site (HISTORIQUE DU CLUB et MATCHS ET RESULTATS) le reste se passe dans le dossier CSS.
Dans notre CSS on va donner les propriétés pour stylisé le code:
Le width sert à définir la largeur d'un élément. Cela permet de contrôler la taille des éléments sur une page.
Sans width, un élément prend toute la largeur disponible par défaut (100%). Ici on le met à 90%
padding définit l’espace intérieur d’un élément. Un padding de 5px permet d'espacer les éléments de 5 pixels entre eux.
border-radius permet d'arrondir les bord de la boite. Plus la valeur est haute plus les bords seront arrondis
Compétences
Noter ici les compétences dont vous avez eu besoin
date
Du 17/03/25 au 28/03/25
Ressources
Ici ma présentation pour mon oral
Fichier:250328-EOZENOU-Yann-PrésentationV2.pdf
Ici mon cahier des charges
Fichier:Cahier des charges .odt
Aide technique
matériel et outils pédagogique:
Logiciels : VSCode, Inkscape Ressource internet: GITHUB
matériel et outils utilisés
PC
Photos
Différentes photos de votre projet
