Aller au contenu principal

Projet Web

Le but de ce projet est de créer un jeu d'aventure textuel en HTML, CSS et JavaScript. Le jeu doit être composé de plusieurs pages HTML qui permettent de naviguer dans l'histoire. Chaque page doit contenir un paragraphe de texte et des liens vers d'autres pages. Le texte doit être dynamique et dépendre des choix de l'utilisateur.

Objectifs​

  • Créer un site web avec plusieurs pages HTML
  • Utiliser des liens pour naviguer entre les pages
  • Utiliser du JavaScript pour modifier le contenu des pages
  • Utiliser des paramètres dans l'url pour personnaliser le contenu des pages

Rendu​

Les éléments suivants sont à rendre sur Teams dans le devoir “Projet Web" au plus tard le dimanche 26 mai 2024 à 23h59 :

  • Un fichier zip contenant le code source du jeu (dossier projet-web)
    • Clic droit sur le dossier projet-web > Compresser "projet-web"
    • Renommez le fichier projet-web.zip créé avec votre prénom, nom et le nom de votre jeu en minuscule sans accent (ex. prenom-nom-nomdujeu.zip)
    • Vous pouvez vérifier le fichier zip en le mettant sur https://app.netlify.com/drop
  • L'organigramme de votre jeu (fichier prenom-nom-organigramme.png)

Evaluation​

  • Processus
    • Rendus corrects et dans les délais.
    • Tenir le journal de bord à jour.
  • Projet
    • Le jeu est jouable selon les critères demandés.
    • Maîtrise des liens entre les pages.
    • Personnalisation de l'onglet (nom et favicon).
    • Personnalisation avec du CSS avec des classes.
    • Maîtrise des images qui s'adaptent à la taille de l'écran.
    • Maîtrise des formulaires et des paramètres dans l'url.
    • Les fichiers sont formatés et sans erreur.
    • Bonus.
Note 1  2 2.5 3 3.5 4 4.5 5 5.5 6 
Nombre de critères validés0123456789

Tutoriel​

Image​

Pour ajouter une image à votre jeu, vous pouvez utiliser la balise <img>.

<img src="image.jpg" />

Vous pouvez utiliser les propriétés width et/ou height pour définir la taille de l'image.

<img src="image.jpg" width="100px" height="100px" />

Vous pouvez utiliser des pourcentages pour définir la taille de l'image qui s'adaptera à la taille de l'écran.

<img src="image.jpg" width="100%" />

Il est aussi possible d'ajouter une image de fond à une page en utilisant le CSS : https://www.w3schools.com/cssref/pr_background-image.php

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

Pour qu'il s'adapte à la taille de l'écran, vous pouvez utiliser cover :

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

Formatage​

Pour formater le contenu d'un document sur Visual Studio Code, il faut faire ⇧ + ⌥ + F

Erreur​

Pour vérifier qu'un fichier HTML est correct, vous pouvez utiliser https://www.freeformatter.com/html-validator.html

Dossier​

Pour plus facilement vous retrouver dans votre projet, vous pouvez créer des dossiers pour ranger vos 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" />

Références​

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

Dernière mise à jour le