Projet Web 3

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.

Pré-requis

Avoir fini d'adapter l'exemple avec votre propre scénario.

Créer un organigramme pour votre histoire.
Renommer les fichiers HTML avec des noms significatifs et modifier les textes.
Choisir un titre pour votre histoire, l'indiquez dans le <title> et dans le journal de bord.

Recommencer

Ajouter un lien pour recommencer le jeu à chacune des pages de fin.

Ajouter un lien comme pour les autres pages, mais redirigeant vers index.html.

Police d'écriture

Utiliser une police d'écriture personnalisée avec Google Fonts.

Choisir une police sur Google Fonts.
Une fois la police choisie :
- Cliquer sur le bouton "Get Font" en haut à droite.
- Cliquer sur le bouton "Get Embed Code".
- Dans l'onglet "Web", sélectionner "@import"
Copier le code qui ressemble à @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap'); (sans les balises <style> et </style>) au tout début du fichier main.css.

Copier l'attribut font-family depuis le site dans la règle body dans le fichier main.css. Par exemple, pour la police Inconsolata :

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');
body {
  font-family: 'Inconsolata', monospace;
  ...
}

Images

Utiliser le tag <img> pour ajouter des images.

Créer un nouveau dossier images dans le dossier projet-web pour ranger les images.
- À côté du bouton pour créer un fichier dans Visual Studio Code, cliquer sur l'icône de dossier pour créer un nouveau dossier.

Télécharger une image depuis Internet (clic droit > Enregistrer l'image sous…), la placer dans un dossier images avec un mot-clef significatif (ex. carte.png) :

projet-web/
├── images/
│   └── carte.jpg
├── cave.html
├── grenier.html
├── index.html
├── lecture.html
├── main.css
├── souvenirs.html
└── tresor.html

Dans le body d'un fichier HTML, ajouter l'image avec <img src="images/image.jpg" /> (remplacer image.jpg par le nom de l'image téléchargée).

...
<body>
  <h1>Le rangement</h1>
  <p>En rangeant votre grenier, vous tombez sur une vieille carte des environs.</p>
  ...
  <img src="images/carte.jpg" />
  ...
</body>
</html>

Utiliser les attributs width ou height pour définir la taille de l'image.
```
<img src="images/carte.jpg" height="200px" />
```
Utiliser des pourcentages pour définir la taille de l'image qui s'adaptera à la taille de l'écran.
```
<img src="images/carte.jpg" width="50%" />
```

Images de fond

Utiliser la propriété CSS background-image pour ajouter une image de fond à toutes les pages (pour une seule page, voir les sélecteurs de classe ci-dessous) :

body {
  background-image: url("images/fond.jpg");
}

Pour qu'il s'adapte à la taille de l'écran, utiliser background-size :

body {
  background-image: url("images/fond.jpg");
  background-size: cover;
}

Utiliser background-repeat pour éviter que l'image se répète.

Sélecteurs de classe

Pour ajouter un style à un élément spécifique (pas lié à une balise), on peut utiliser des classes. En voici deux exemples d'utilisation :

Liens particuliers

Pour appliquer un style spécifique à un lien (par exemple, le lien pour recommencer le jeu) :

Choisir un nom de classe significatif (p. ex. recommencer pour un lien qui permet de recommencer le jeu).
Ajouter l'attribut class à la balise HTML correspondante. Par exemple, pour un lien <a> :
```
<a class="recommencer" href="index.html">Recommencer le jeu</a>
```
Dans le fichier main.css, ajouter une règle CSS pour la classe en utilisant le sélecteur . suivi du nom de la classe. Par exemple, pour la classe recommencer :
```
.recommencer {
  color: #859900;
}
```

Image de fond spécifique

Pour avoir une image de fond seulement pour une page spécifique :

Dans le fichier HTML, ajouter une classe au body (p. ex. carte) :
```
<body class="carte">
  ...
</body>
```
Dans le fichier main.css, ajouter une règle CSS pour la classe carte :
```
.carte {
  background-image: url("images/carte-fond.jpg");
}
```

Favicon

Créer une icône pour le site web (favicon) sur favicon.cc.
Télécharger l'icône nommée favicon.ico et la placer dans le dossier projet-web.

Ajouter la ligne suivante dans le head de chaque fichier HTML pour indiquer l'icône du site web :

<!doctype html>
<html lang="fr">
  <head>
    ...
    <link rel="icon" href="favicon.ico" />
  </head>
  <body>
    ...
  </body>
</html>

Vérifier que l'icône s'affiche dans l'onglet du navigateur pour toutes les pages.

Formatage

Pour formater (aligner le code pour améliorer la lisibilité) le contenu d'un fichier sur Visual Studio Code, utiliser le raccourci Shift + Option + F (Mac) ou Ctrl + Shift + F (Windows).

Erreur

Vérifier les erreurs de syntaxe dans vos fichiers :

Pour le HTML : https://validator.w3.org/#validate_by_input
- Corriger les error (erreurs) avant les warning (avertissements).
- Les info (informations) peuvent être ignorées.
Pour le CSS : https://jigsaw.w3.org/css-validator/#validate_by_input

Personnaliser avec du CSS

Voici d'autres exemples de personnalisation avec du CSS :

Aligner le texte

Utiliser la propriété CSS text-align pour aligner le texte à gauche, au centre ou à droite.

body {
  text-align: center;
}

Marges extérieures et intérieures

Utiliser la propriété CSS margin et padding pour ajuster les espaces autour des éléments.

p {
  margin: 20px;
  padding: 0px;
}

Bordures

Utiliser la propriété CSS border pour ajouter des bordures aux éléments.

p {
  border: 2px solid #000000;
}

Dossier

Pour mieux organiser le projet, créer des dossiers pour ranger les fichiers.

projet-web/
├── images/
│ └── image.jpg
├── index.html
├── style.css
└── vaisseau/
  └── cabine.html

Il faudra adapter les chemins des fichiers dans votre code car les chemins sont relatifs au fichier actuel. Par exemple, dans index.html, pour afficher l'image image.jpg qui se trouve dans le dossier images, il faudra écrire :

<img src="images/image.jpg" />

Pour remonter dans le dossier parent, vous pouvez utiliser ... Par exemple, pour afficher l'image image.jpg depuis le fichier vaisseau/cabine.html, il faudra écrire :

<img src="../images/image.jpg" />

Formulaire

Renommer le fichier index.html en introduction.html et créer un nouveau fichier index.html avec le contenu suivant :

<!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>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <h1>Projet Web</h1>
    <h2>Le rangement</h2>
    <form action="introduction.html" method="GET">
      <label for="nom">Votre nom :</label>
      <input name="nom" id="nom" required />
      <button>Commencer</button>
    </form>
  </body>
</html>

Observer le résultat : nous y avons ajouté un formulaire avec un champ de saisie pour le nom de l'utilisateur et un bouton pour valider le formulaire :

La balise <form> englobe le formulaire et définit l'action à effectuer lors de la validation (ici, ouvrir la page introduction.html avec la méthode GET).
La balise <label> permet de décrire le champ de saisie associé. L'attribut for doit correspondre à l'attribut id du champ de saisie associé.
La balise <input> est un champ de saisie pour le nom de l'utilisateur. L'attribut required indique que le champ est obligatoire et l'attribut name est le nom du paramètre qui sera envoyé lors de la validation du formulaire.
La balise <button> est un bouton pour valider le formulaire.

Entrer un nom dans le champ de saisie et valider le formulaire (cliquez sur le bouton ou appuyez sur la touche Entrée). Observer bien l'url de la page introduction.html : il contient le nom que vous avez saisi sous la forme ?nom=....

Paramètres

On va maintenant récupérer le paramètre nom dans la page introduction.html. Modifier le contenu de introduction.html comme suit :

<!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>
    <link rel="stylesheet" href="main.css" />
    <script>
      const urlParams = new URLSearchParams(window.location.search);
      const nom = urlParams.get("nom");
    </script>
  </head>
  <body>
    <h1>Projet Web</h1>
    <h2>Le rangement</h2>
    <p>
      Bonjour
      <script>
        document.write(nom);
      </script>
      ! 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>

Le nom précédemment saisi dans le formulaire est maintenant affiché dans la page introduction.html. Pour cela, on utilise un script JavaScript qui récupère le paramètre nom dans l'url de la page et l'affiche dans le paragraphe :

ligne 8-11 : on déclare un bloc JavaScript avec la balise <script>.
- ligne 9 : permet de récupérer les paramètres de l'url de la page courante.
- ligne 10 : permet de récupérer la valeur du paramètre nom dans l'url de la page courante et de la stocker dans la variable nom.
ligne 17-20 : on ajoute du code JavaScript pour afficher le nom dans le paragraphe.
- ligne 19 : permet d'écrire le contenu de la variable nom dans le paragraphe.

Demander à l'utilisateur de saisir un lieu dans le formulaire de la page index.html et affichez-le dans la page introduction.html ("Bonjour, [nom] ! En rangeant votre grenier, vous tombez sur une vieille carte de [lieu].") :

Ajouter un champ de saisie pour le lieu dans le formulaire de la page index.html.
Vérifier que le paramètre lieu est bien envoyé dans l'url de la page introduction.html.
Récupérer le paramètre lieu dans la page introduction.html et l'afficher dans le paragraphe.

Les images vectorielles

Vous pouvez dessiner vos propres images vectorielles sur les pages HTML avec la balise <svg> : https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web

Recommencer​

Police d'écriture​

Images​

Images de fond​

Sélecteurs de classe​

Liens particuliers​

Image de fond spécifique​

Favicon​

Formatage​

Erreur​

Personnaliser avec du CSS​

Aligner le texte​

Marges extérieures et intérieures​

Bordures​

Dossier​

Formulaire​

Paramètres​

Les images vectorielles​

Références​