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
- Clic droit sur le dossier
- L'organigramme de votre jeu (fichier
prenom-nom-organigramme.png
)
Evaluation
Critères de base (-0.5 par critère manquant) | Critères complémentaire (+0.5 par 5 critères validés) | |
---|---|---|
Délai |
| |
Rendu |
|
|
Jouabilité |
|
|
Étapes |
|
|
Style |
|
|
Paramètre |
|
|
Image |
|
|
Erreur |
| |
Format |
| |
Onglet |
| |
Organisation |
| |
Langue |
| |
Bonus contenant |
| |
Bonus contenu |
|
Tous les critères de base doivent être respectés pour avoir la note de 4.
Les critères complémentaires permettent d'augmenter la note jusqu'à 6.
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