Liens, styles et images

La mise en place

Créez un nouveau dossier projet-web dans votre dossier informatique sur OneDrive à côté de projet-jeu et site-web.

txt

OneDrive/
└── 2m/
    └── informatique/
        ├── projet-jeu
        ├── projet-web
        └── site-web

Ouvrez le dossier projet-web dans Visual Studio Code (dans la barre de menu : Fichier > Ouvrir dossier).

Créez un nouveau fichier index.html dans le dossier projet-web et ajoutez le code suivant :

index.html

html

<!doctype html>
<html>
  <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>
  </body>
</html>

Visualisez votre page web avec Live Server en cliquant sur Go Live dans la barre d'état (en bas à droite).

Le jeu

On va créer un jeu similaire à celui de l'année dernière, mais sur une page web avec des liens pour naviguer entre les différentes étapes.
On va prendre comme exemple, le même scénario que l'année dernière :

Les liens

Pour cela, on va ajouter le texte et des liens dans notre fichier index.html :

La balise <h2> pour avoir un sous-titre
La balise <p> pour avoir un paragraphe
La balise <ul> pour avoir une liste
La balise <li> pour avoir un élément de liste
La balise <a> pour avoir un lien
- L'attribut href pour indiquer la cible (vers quelle page on veut aller)

index.html

html

<!doctype html>
<html>
  <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>
    <h2>Le rangement</h2>
    <p>
      En rangeant votre grenier, vous tombez sur une vieille carte des environs.
    </p>
    <ul>
      <li>
        <a href="observer.html">Observer la carte</a>
      </li>
      <li>
        <a href="occupations.html">Ranger la carte</a>
      </li>
    </ul>
  </body>
</html>

Les liens font référence à des pages qui n'existent pas encore.
Ces liens sont relatifs, c'est-à-dire qu'on s'attend à ce que les pages soient dans le même dossier que index.html.

Commençons par créer la page occupations.html (vous pouvez copier le fichier index.html et faire les modifications nécessaires) :

occupations.html

html

<!doctype html>
<html>
  <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>
    <h2>Ranger</h2>
    <p>
      Vous rangez la carte là où elle était et vaquez à vos occupations
      habituelles.
    </p>
    <ul>
      <li>
        <a href="index.html">Recommencer le jeu</a>
      </li>
    </ul>
  </body>
</html>

Regardez le site et essayez de cliquer sur les liens pour voir si la navigation fonctionne.

Exercice

Créez maintenant la page observer.html ainsi que les pages suivantes en suivant le scénario. Lien vers le code Python

Vérification

Votre histoire doit être jouable et contenir 7 fichiers HTML avant de continuer.

Solution (pour comparer)

https://codesandbox.io/p/sandbox/rangement-3yn4kt

html

<!doctype html>
<html>
  <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>
    <h2>Le rangement</h2>
    <p>
      En rangeant votre grenier, vous tombez sur une vieille carte des environs.
    </p>
    <ul>
      <li>
        <a href="observer.html">Observer la carte</a>
      </li>
      <li>
        <a href="occupations.html">Ranger la carte</a>
      </li>
    </ul>
  </body>
</html>

html

<!doctype html>
<html>
  <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>
    <h2>Carte</h2>
    <p>En s'attardant sur la carte, vous remarquez une petite croix.</p>
    <ul>
      <li>
        <a href="aventure.html">Aller à l'endroit indiqué par la croix</a>
      </li>
      <li>
        <a href="occupations.html">Ranger la carte</a>
      </li>
    </ul>
  </body>
</html>

html

<!doctype html>
<html>
  <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>
    <h2>Ranger</h2>
    <p>
      Vous rangez la carte là où elle était et vaquez à vos occupations
      habituelles.
    </p>
    <ul>
      <li>
        <a href="index.html">Recommencer le jeu</a>
      </li>
    </ul>
  </body>
</html>

html

<!doctype html>
<html>
  <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>
    <h2>Aventure</h2>
    <p>Vous décidez de partir à l'aventure !</p>
    <p>
      Vous passez le reste de la journée à préparer vos affaires et décidez de
      partir le lendemain à l'aube.
    </p>
    <p>
      Le lendemain, avant de partir, vous remarquez qu'il y a plusieurs chemins
      possibles :
    </p>
    <ul>
      <li>
        <a href="montagne.html">
          Le plus rapide passe par un col de montagne enneigé
        </a>
      </li>
      <li>
        <a href="foret.html">
          Il est aussi possible de contourner la montagne en passant par la
          forêt environnante
        </a>
      </li>
      <li>
        <a href="chemin.html">
          Le plus long, mais aussi le moins difficile serait de suivre le chemin
          qui borde la forêt
        </a>
      </li>
    </ul>
  </body>
</html>

html

<!doctype html>
<html>
  <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>
    <h2>Montagne</h2>
    <p>Vous n'avez pas de temps à perdre et décidez de passer par le col.</p>
    <p>
      Arrivé(e) au col, vous êtes pris(e) dans une tempête de neige et n'y
      survivez pas.
    </p>
    <ul>
      <li>
        <a href="index.html">Recommencer le jeu</a>
      </li>
    </ul>
  </body>
</html>

html

<!doctype html>
<html>
  <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>
    <h2>Montagne</h2>
    <p>
      Trouvant la montagne trop dangereuse, vous décidez de la contourner par la
      forêt.
    </p>
    <p>Vous vous perdez dans la forêt et personne ne vous a jamais revu·e.</p>
    <ul>
      <li>
        <a href="index.html">Recommencer le jeu</a>
      </li>
    </ul>
  </body>
</html>

html

<!doctype html>
<html>
  <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>
    <h2>Chemin</h2>
    <p>Vous souhaitez prendre votre temps et suivre des chemins balisés.</p>
    <p>
      Vous tombez sur des bandits qui vous dépouillent et vous rentrez
      bredouille.
    </p>
    <ul>
      <li>
        <a href="index.html">Recommencer le jeu</a>
      </li>
    </ul>
  </body>
</html>

Le style

Pour changer l'apparence de notre site, on va utiliser le CSS (Cascading Style Sheets).
On va donc créer un fichier styles.css dans le dossier projet-web et dire à notre fichier index.html de l'utiliser :

styles.cssindex.html

css

body {
  background-color: #fdf6e3;
  color: #657b83;
}
h1 {
  color: #268bd2;
}
p {
  font-size: 20px;
}

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Projet Web</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Projet Web</h1>
    <h2>Le rangement</h2>
    <p>
      En rangeant votre grenier, vous tombez sur une vieille carte des environs.
    </p>
    <ul>
      <li>
        <a href="observer.html">Observer la carte</a>
      </li>
      <li>
        <a href="occupations.html">Ranger la carte</a>
      </li>
    </ul>
  </body>
</html>

Les sélecteurs de type

Plus d'informations

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)

Toutes les balises <h1> auront une couleur de texte #268bd2 (bleu) et les balises <p> auront une taille de police de 20 pixels.

Exercice

Modifiez le fichier styles.css pour appliquer les changements suivants :

Couleur du sous-titre : #6c71c4 (violet)
Couleur des liens : #dc322f (rouge)
Taille de police des liens : 18 pixels
Enlever le soulignement des liens (indice)
Changer le symbole de la liste à puce en carré
Changer la police de caractères de toute la page (indice)

Astuce

Visual Studio Code vous propose l'autocomplétion des propriétés CSS. Commencez à taper le nom de la propriété et regardez les suggestions qui apparaissent.

Résultat

Exercice

Appliquez le même style à toutes les pages HTML du jeu (référencez le même fichier CSS).

Le modèle de boîte

Exercice

Lisez les explications sur le modèle de boîte CSS (sauf "le modèle de boîte CSS alternatif")

Les sélecteurs de classe

On peut aussi être plus spécifique dans le choix des éléments en utilisant des classes.
On souhaite que les liens pour recommencer le jeu soient en vert :

Dans les fichiers occupations.html, montagne.html, foret.html et chemin.html, ajoutez une classe recommencer à la balise <a> correspondante :

html

<a href="index.html">Recommencer le jeu</a>
<a class="recommencer" href="index.html">Recommencer le jeu</a>

Puis ajoutez un nouveau sélecteur dans le fichier styles.css :

css

.recommencer {
  color: #859900;
}

Le point devant recommencer indique que c'est une classe et tous les éléments avec cette classe auront la couleur #859900 (vert).

Les images

Le tag HTML <img> permet d'afficher une image sur la page.

En vous aidant de cette documentation, ajoutez une image à la page index.html.

Exercices

Afin de bien comprendre le CSS, faites les exercices suivants :

https://www.codingame.com/playgrounds/36092/exercices-css/introduction

Votre jeu

Prenez le temps de réfléchir à un scénario pour votre jeu :

Une histoire simple, courte et cohérente
Des choix intéressants à faire
Des conséquences différentes (et réutilisables)
Visez une petite histoire dans un premier temps (environ 7 étapes)

Exercice

Commencez par dessiner l'organigramme pour avoir une idée claire des différentes étapes et des liens entre elles.

Liens, styles et images ​

La mise en place ​

Le jeu ​

Les liens ​

Le style ​

Les sélecteurs de type ​

Le modèle de boîte ​

Les sélecteurs de classe ​

Les images ​

Exercices ​

Votre jeu ​

Liens, styles et images

La mise en place

Le jeu

Les liens

Le style

Les sélecteurs de type

Le modèle de boîte

Les sélecteurs de classe

Les images

Exercices

Votre jeu