Aller au contenu principal

Projet Web 1

Rendu

Le rendu final du projet noté comprendra :

  • Site web avec votre jeu.
  • Journal de bord indiquant les étapes réalisées et les difficultés rencontrées pour chaque semaine.

Mise en place​

  • Créer un nouveau dossier projet-web dans votre dossier informatique sur OneDrive. 
    OneDrive/
    └── 3cci/
        └── informatique/
            ├── html
            └── projet-web
  • Ouvrir le dossier projet-web dans Visual Studio Code (dans la barre de menu : Fichier > Ouvrir dossier).
  • Créer un nouveau fichier index.html dans le dossier projet-web et ajouter le code suivant :
    index.html
    <!doctype html>
    <html lang="fr">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Projet Web</title>
      </head>
      <body>
        <h1>Projet Web</h1>
        <p>Bienvenue dans la page d'accueil du projet Web !</p>
      </body>
    </html>
  • Visualiser la page web avec Live Server.
    • En faisant un clic droit dans le fichier index.html et en choisissant Open with Live Server.
    • Ou en cliquant sur Go Live dans la barre d'état (en bas à droite)
  • Dans le dossier informatique, créer un fichier Word projet-web-journal-prenom-nom.docx pour le journal de bord (avec son prénom et nom).
    • Ouvrir l'application Word.
    • Créer un nouveau document.
    • Sauvegarder le document dans le dossier informatique avec le nom projet-web-journal-prenom-nom.docx (avec son prénom et nom).

Aventure d'exemple​

On va créer un jeu interactif semblable au livre dont vous êtes le héros sur une page Web avec des liens pour naviguer entre les différentes étapes.

Voici un scénario d'exemple à réaliser dans un premier temps :

Liens​

  • Modifier le fichier index.html (lignes modifiées en surbrillance) pour créer la page d'accueil de l'aventure :
    index.html
    <!doctype html>
    <html lang="fr">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Aventure</title>
      </head>
      <body>
        <h1>Rangement</h1>
        <p>
          Vous décidez de faire du rangement dans votre maison. Par où commencer ?
        </p>
        <ul>
          <li><a href="cave.html">Cave</a></li>
          <li><a href="grenier.html">Grenier</a></li>
        </ul>
      </body>
    </html>
  • Sauvegarder et observer les changements dans le navigateur (Ctrl + s pour sauvegarder).
    • Quels sont les deux changements visibles ?
  • Créer un fichier cave.html dans le même dossier que index.html avec le contenu suivant :
    cave.html
    <!doctype html>
    <html lang="fr">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Aventure</title>
      </head>
      <body>
        <h1>Cave</h1>
        <p>Vous êtes à la cave. Que voulez-vous faire ?</p>
        <ul>
          <li><a href="passage.html">Dépoussiérer</a></li>
          <li><a href="tresor.html">Trier les affaires</a></li>
        </ul>
      </body>
    </html>
  • Ouvrir index.html dans le navigateur et cliquer sur le lien Cave pour vérifier qu'on arrive bien sur la page cave.html.
  • Créer la page passage.html afin qu'il affiche En dépoussiérant, vous découvrez une petite trappe. En l'ouvrant, vous trouvez un passage secret qui vous mènera vers d'autres aventures...
Solution
passage.html
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Aventure</title>
  </head>
  <body>
    <h1>Passage</h1>
    <p>
      En dépoussiérant, vous découvrez une petite trappe. En l'ouvrant, vous
      trouvez un passage secret qui vous mènera vers d'autres aventures...
    </p>
  </body>
</html>
  • Créer les pages tresor.html, grenier.html, souvenirs.html et lecture.html en suivant le même principe.
    • tresor.html : En triant les affaires, vous trouvez un vieux coffre rempli de pièces d'or !
    • grenier.html : Vous êtes dans le grenier. Que voulez-vous faire ? avec les liens.
      • Trier les affaires vers tresor.html
      • Regarder les cartons vers souvenirs.html
      • Lire les livres vers lecture.html.
    • souvenirs.html : En regardant les cartons, vous tombez sur de vieux souvenirs d'enfance qui vous rendent nostalgique.
    • lecture.html : En lisant un des livres, vous découvrez une carte au trésor !
  • Le jeu doit être jouable et l'arborescence du projet doit ressembler à ceci : 
    projet-web/
    ├── cave.html
    ├── grenier.html
    ├── index.html
    ├── lecture.html
    ├── passage.html
    ├── souvenirs.html
    └── tresor.html

Style​

Pour changer l'apparence de notre site, on va utiliser le CSS (Cascading Style Sheets).

  • Créer un fichier main.css dans le dossier projet-web avec le contenu suivant :
    main.css
    body {
      background-color: #fdf6e3;
      color: #657b83;
    }
    p {
      font-size: 20px;
    }
  • Reformater le code avec Alt + Shift + F.
  • Appliquer le style à tous les fichiers HTML en ajoutant <link rel="stylesheet" href="main.css" /> dans le head de chaque fichier HTML : 
    <!doctype html>
    <html lang="fr">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Aventure</title>
        <link rel="stylesheet" href="main.css" />
      </head>
      <body>
        ...
      </body>
    </html>
  • Observer le changement de style sur toutes les pages.

Sélecteurs de type​

Un fichier CSS est composé de sélecteurs et de déclarations : les sélecteurs indiquent à quels éléments HTML s'applique la déclaration :

  • Les sélecteurs indiquent où appliquer le style.
  • Les déclarations indiquent quel style appliquer.

Dans notre exemple, le sélecteur body signifie que le style s'applique à toutes les balises <body> :

  • Couleur de fond : #fdf6e3 (jaune pâle)
  • Couleur du texte : #657b83 (gris)

De même que toutes les balises <p> auront une taille de police de 20 pixels.

Appliquer les changements suivants dans le style (rechercher avec un moteur de recherche au besoin) :

  • Couleur de fond : #eee8d5 (beige)
  • Couleur des titres : #268bd2 (bleu)
  • Couleur des liens : #dc322f (rouge)
  • Couleur des liens au survol (lorsqu'on passe la souris dessus) : #6c71c4 (violet)
  • Enlever le soulignement des liens.
  • Changer la police de caractères de toute la page en monospace.
Astuce

Visual Studio Code vous propose l'autocomplétion des propriétés CSS. Commencer par taper le nom de la propriété et regarder les suggestions proposées.

Références​

Illustrations​

Dernière mise à jour le