Projet : site d'une team e-sport
Vous êtes le webmaster de Team Nexus, une équipe e-sport montante.
Votre mission : créer le site officiel de la team à partir du squelette HTML fourni.
Point de départ
Copiez ce code dans un nouveau fichier index.html (dans un dossier team_nexus) :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Team Nexus — E-sport</title>
<!-- Étape 9 : lier la feuille de style CSS ici -->
</head>
<body>
<!-- Étape 1 : ouvrir <header> ici -->
<h1>Team Nexus</h1>
<!-- Étape 2 : ajouter le menu <nav> ici -->
<!-- Étape 1 : fermer </header> ici -->
<!-- Étape 3 : ouvrir <main> ici -->
<section id="presentation">
<h2>Qui sommes-nous ?</h2>
<!-- Étape 4 : insérer l'image de l'équipe ici -->
<p>Team Nexus est une équipe e-sport fondée en 2021, spécialisée dans les jeux de tir tactique et les MOBA.</p>
<p>Notre mission : repousser les limites du jeu compétitif.</p>
</section>
<section id="roster">
<h2>Notre roster</h2>
<!-- Étape 5 : créer le tableau des joueurs ici -->
</section>
<section id="palmares">
<h2>Notre palmarès</h2>
<!-- Étape 6 : créer la liste ordonnée des victoires ici -->
</section>
<section id="rejoindre">
<h2>Rejoindre la team</h2>
<p>Tu penses avoir le niveau ? Remplis ce formulaire !</p>
<!-- Étape 7 : créer le formulaire de recrutement ici -->
</section>
<!-- Étape 3 : fermer </main> ici -->
<!-- Étape 8 : remplacer cette ligne par un <footer> -->
<p>© 2024 Team Nexus</p>
</body>
</html>
Créez également un fichier styles.css dans le même dossier avec ce code :
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background-color: #0f0f1a;
color: #e0e0e0;
font-family: 'Segoe UI', Arial, sans-serif;
}
header {
background: linear-gradient(135deg, #1a1a2e, #16213e);
border-bottom: 3px solid #7c3aed;
padding: 20px 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
h1 { color: #a78bfa; font-size: 2em; text-transform: uppercase; letter-spacing: 3px; }
h2 { color: #a78bfa; font-size: 1.4em; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }
nav ul { list-style: none; display: flex; gap: 30px; }
nav a { color: #e0e0e0; text-decoration: none; font-weight: bold; text-transform: uppercase; font-size: 0.85em; letter-spacing: 1px; }
nav a:hover { color: #a78bfa; }
main { max-width: 1100px; margin: 40px auto; padding: 0 20px; }
section {
margin-bottom: 40px;
padding: 30px;
background-color: #16213e;
border-radius: 10px;
border-left: 4px solid #7c3aed;
}
img { border-radius: 8px; max-width: 100%; margin-bottom: 15px; }
table { width: 100%; border-collapse: collapse; margin-top: 15px; }
th { background-color: #7c3aed; color: white; padding: 12px; text-align: left; text-transform: uppercase; font-size: 0.85em; }
td { padding: 12px; border-bottom: 1px solid #2d2d4e; color: #c0c0d0; }
tr:hover td { background-color: #1e1e3a; }
ul, ol { padding-left: 25px; line-height: 2; }
li { color: #c0c0d0; margin-bottom: 8px; }
form { display: flex; flex-direction: column; gap: 15px; max-width: 500px; }
label { color: #a78bfa; font-weight: bold; font-size: 0.9em; text-transform: uppercase; letter-spacing: 1px; }
input, textarea, select {
background-color: #0f0f1a;
border: 2px solid #7c3aed;
color: #e0e0e0;
padding: 10px;
border-radius: 5px;
font-size: 1em;
}
button {
background-color: #7c3aed;
color: white;
border: none;
padding: 12px 30px;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 5px;
cursor: pointer;
align-self: flex-start;
}
button:hover { background-color: #6d28d9; }
footer {
text-align: center;
padding: 30px;
background-color: #1a1a2e;
border-top: 3px solid #7c3aed;
color: #888;
margin-top: 40px;
}
footer a { color: #a78bfa; text-decoration: none; }
Créez enfin un sous-dossier images/ dans votre dossier team_nexus. Recherchez une photo d'équipe e-sport sur Internet et enregistrez-la sous le nom team.jpg dans ce dossier.
La page devra contenir
- Un en-tête
<header>avec le nom de la team - Un menu de navigation
<nav>avec des liens vers chaque section de la page - Une image de présentation de l'équipe
- Un tableau
<table>listant les joueurs avec leur pseudo, jeu et rôle (avecrowspan) - Une liste ordonnée
<ol>des principales victoires de la team - Un formulaire
<form>de recrutement avec champs de saisie, liste déroulante, zone de texte et bouton - Un pied de page
<footer>avec copyright et lien externe - Un lien vers la feuille de style CSS
Consignes
Étape 1 — Ajouter la balise <header> autour du titre
La balise <header> regroupe les éléments d'introduction : logo, titre, navigation principale. Elle aide les moteurs de recherche et les lecteurs d'écran à identifier le contenu de navigation.
Étape 2 — Créer le menu de navigation
Le menu relie chaque entrée à une section de la page grâce à des ancres (href="#id").
Utilisez <nav> + <ul> + <li> + <a> pour structurer un menu. Cette combinaison est reconnue par les lecteurs d'écran et améliore l'accessibilité du site.
Étape 3 — Envelopper le contenu dans <main>
La balise <main> délimite le contenu central de la page, distinct du <header> et du <footer>.
Il ne doit y avoir qu'une seule balise <main> par page. Elle signale aux moteurs de recherche quel est le contenu principal.
Étape 4 — Insérer l'image de présentation de l'équipe
Dans la section #presentation, ajoutez une image juste après le titre <h2>.
L'attribut alt est obligatoire sur toutes les images. Il décrit l'image aux personnes malvoyantes et s'affiche si l'image ne charge pas.
Étape 5 — Créer le tableau du roster
Dans la section #roster, créez un tableau listant les membres de l'équipe avec 4 colonnes : Pseudo, Prénom, Jeu et Rôle.
ShadowX et IceBreaker jouent tous les deux à Valorant : utilisez rowspan="2" sur la cellule Valorant pour fusionner les deux lignes verticalement.
Quand vous utilisez rowspan="2" sur une cellule, supprimez la cellule correspondante dans la ligne suivante. Sinon le tableau sera décalé d'une colonne.
Étape 6 — Créer la liste des victoires
Dans la section #palmares, créez une liste ordonnée des principales victoires de la team.
Utilisez <ol> (ordered list) quand l'ordre est important (classement, étapes). Utilisez <ul> pour des éléments sans ordre particulier.
Étape 7 — Créer le formulaire de recrutement
Dans la section #rejoindre, créez un formulaire avec un champ texte (pseudo), une liste déroulante (jeu principal), une zone de texte (présentation) et un bouton d'envoi.
Associez toujours un <label> à son champ via for (sur le label) et id (sur le champ). Cela améliore l'accessibilité et permet de cliquer sur le libellé pour activer le champ.
Étape 8 — Ajouter le pied de page
Remplacez le simple <p> en bas du <body> par une balise <footer> contenant le copyright et un lien externe.
La balise <footer> contient généralement les informations de copyright, les liens secondaires et les mentions légales. Elle peut apparaître en bas de la page entière ou à l'intérieur d'une <section>.
Étape 9 — Lier la feuille de style CSS
Sans le lien vers styles.css, votre page s'affichera en noir et blanc avec la mise en page par défaut du navigateur.
Toujours utiliser une feuille de style externe plutôt que des styles inline. Une seule modification dans styles.css s'applique à toutes les pages du site.
Valider votre code HTML
Testez votre page dans le navigateur, puis validez votre code sur https://validator.w3.org (onglet "Validate by Direct Input").
Un code HTML valide garantit que votre site s'affiche correctement dans tous les navigateurs, y compris sur mobile.
Conseils et astuces
- Si le CSS ne s'applique pas, vérifiez que
styles.cssest bien dans le même dossier queindex.html - Les ancres (
href="#roster") ne fonctionnent que si la section a bien l'attributidcorrespondant - Ouvrez les outils développeur (F12) pour inspecter les éléments et comprendre la structure
- Pour le
rowspan, vérifiez bien que la ligne suivante a une cellule de moins que les autres