Étape 1

Construire une structure HTML propre

Tu vas créer la base du projet : une page principale avec des cartes de jeux, des images, des liens, puis une deuxième page qui prépare le futur formulaire.

À quoi sert HTML ?

HTML sert à structurer le contenu d’une page web. Il indique au navigateur ce qui est un titre, un paragraphe, une image, un lien, une section ou un formulaire. Sans HTML, le navigateur ne sait pas vraiment comment organiser la page.

HTML aide aussi les moteurs de recherche à comprendre de quoi parle la page. Par exemple, un vrai titre <h1>, des sous-titres <h2>, des liens clairs et des textes alternatifs sur les images donnent des indices sur le sujet de la page. Cela peut aider au référencement.

À cette étape, on ne cherche pas encore à faire joli. On cherche d’abord à créer une structure correcte pour le navigateur et compréhensible pour les moteurs de recherche.

Syntaxe générale du HTML

HTML fonctionne avec des balises. Une balise donne un rôle au contenu. La plupart des balises ont une ouverture, du contenu, puis une fermeture. 

<nom-de-balise>Contenu visible dans la page</nom-de-balise>

class et id

Les attributs class et id servent à identifier des éléments dans le HTML. Ils seront très utiles pour le CSS et le JavaScript. 

<article class="game-card">...</article>
<button id="like-button">J'aime</button>

Liens utiles

Objectif de l’étape

À la fin de cette étape, tu dois avoir deux pages HTML : une page principale qui affiche les jeux, et une page séparée qui prépare le formulaire d’ajout d’un jeu.

Tu vas créer uniquement la structure. Le style arrivera à l’étape CSS, et les interactions arriveront à l’étape JavaScript.

Consignes détaillées

  1. Créer la base du document.
    Commence par <!DOCTYPE html>. Cette ligne indique au navigateur que la page utilise HTML moderne. Ajoute ensuite <html lang="fr"> pour préciser que la page est en français.
  2. Compléter le <head>.
    Le <head> contient des informations techniques sur la page. Elles ne sont pas affichées comme du contenu principal, mais elles sont nécessaires au navigateur. 
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Top Jeux Vidéo</title>
</head>
    charset="UTF-8" permet d’afficher correctement les accents. viewport aide la page à s’adapter aux écrans de téléphone. <title> définit le titre visible dans l’onglet du navigateur et utilisé par les moteurs de recherche.
  3. Créer le <body>.
    Le <body> contient tout ce qui sera visible dans la page : titres, paragraphes, cartes, images, liens et formulaire.
  4. Créer l’en-tête visible avec <header>.
    <header> sert à regrouper le haut de la page : titre principal, courte introduction et navigation. Ajoute un <h1> pour le titre principal, puis un paragraphe <p> pour présenter la page.
  5. Ajouter un lien vers la future page de formulaire.
    Dans le <header>, ajoute un lien vers add-game.html. La balise <a> sert à créer un lien, et href indique la destination. 
    <a href="add-game.html">Ajouter un jeu</a>
  6. Créer la zone principale avec <main>.
    <main> sert à indiquer le contenu principal de la page. Il ne doit pas contenir le footer ni les informations répétées partout.
  7. Créer une section pour les jeux.
    Utilise <section> pour regrouper une partie cohérente de la page. Ici, la section regroupe les jeux préférés. Ajoute un <h2> avec le texte “Mes jeux préférés”.
  8. Créer une carte de jeu avec <article>.
    <article> est adapté pour une carte qui peut être comprise seule : un jeu a son titre, son image, sa description et sa note. Ajoute une classe comme class="game-card" pour préparer le CSS.
  9. Ajouter une image dans la carte.
    Une image utilise <img>. L’attribut src indique le chemin de l’image. L’attribut alt décrit l’image pour l’accessibilité et les moteurs de recherche. 
    <img src="assets/img/minecraft.svg" alt="Image du jeu Minecraft">
  10. Ajouter le contenu de la carte.
    Utilise <h3> pour le nom du jeu, puis des <p> pour la catégorie, la description et la note. <h3> indique un titre plus petit que le titre de section.
  11. Ajouter un lien dans la carte.
    Ajoute un lien vers le site du jeu avec <a>. Un lien externe doit contenir une URL complète. 
    <a href="https://www.minecraft.net/">Voir le site du jeu</a>
  12. Créer trois cartes.
    Reprends la même structure pour trois jeux différents. Chaque carte doit avoir une image, un nom, une catégorie, une description, une note et un lien.
  13. Terminer la page principale avec <footer>.
    <footer> sert à regrouper les informations de bas de page. Ajoute une phrase simple comme “Page créée pendant mon TP web.”
  14. Créer la page add-game.html.
    Cette deuxième page prépare le formulaire. Elle doit avoir sa propre structure : <header>, <main>, <section>, <form> et <footer>. Ajoute aussi un lien de retour vers la liste des jeux.
  15. Ajouter un premier champ de formulaire.
    Un champ doit avoir un <label> et un <input>. Le label explique ce que l’utilisateur doit saisir. L’attribut for du label doit correspondre à l’attribut id de l’input : cela associe les deux. 
    <label for="title">Titre du jeu</label>
<input type="text" id="title" name="title">
    name sera utilisé plus tard par PHP pour récupérer la valeur envoyée.
  16. Ajouter les autres champs.
    Ajoute un champ pour la catégorie, une zone <textarea> pour la description, un champ type="number" pour la note, et un champ type="url" pour le lien vers le site du jeu.
  17. Ajouter le bouton du formulaire.
    Utilise <button type="submit">. Pour l’instant, le formulaire ne sera pas encore fonctionnel. Il sera activé dans la partie PHP.

Critères de réussite

Retour aux étapes Étape suivante : CSS