À toi de jouer

1 - Récupération des fichiers

• Dans votre espace de TRAVAIL sur le réseau du lycée ou sur votre clé USB ou votre ordinateur personnel, aller dans votre dossier 2de-SNT/01-Web.

• Récupérer l'archive Projet-Batman-original.zip. Il s'agit des fichiers d'un mini-site web.

• Déplacer le fichier ZIP dans votre dossier 01-Web et décompresser-le en faisant un clic-droit dessus puis 7-zip et extraire ici.

• Renommer le dossier Projet-Batman-VOTRENOM-Version1 (clic droit / renommer) en remplaçant la partie VOTRENOM par votre nom de famille. Plus tard, il sera possible de dupliquer le dossier en changeant le numéro de version, au fur et à mesure de l'avancée de votre travail.

2 - Travail à faire

L'objectif est d'améliorer ce mini site web. Pour cela, il faut éditez ses deux fichiers .html, à l'aide d'un éditeur de texte proposant la coloration syntaxique pour plus de lisibilité, par exemple : ​

• Notepad++ (Site officiel de téléchargement)

Cahier des charges du mini-site HTML :

• Chaque page doit contenir une image, affichée sur 50% de la largeur de la page, et du texte. La première page garage.html est à compléter (une image et du texte y sont déjà présents). La seconde interieur.html est à construire entièrement.

• Dans le répertoire images, plusieurs fichiers images (au format .jpg) sont présents. Il faut en choisir une pour l'inclure sur la deuxième page.

• On doit pouvoir passer d'une page à l'autre grâce à un hyperlien.

• Lorsque tout fonctionne parfaitement, vérifiez que votre code HTML ne comporte pas d'erreurs en le copiant-collant sur le validateur HTML que propose la W3C.

Remarques :

• Ne pas toucher au fichier style.css pour l'instant.

• Pour visualiser vos pages HTML, il faut les ouvrir dans un navigateur (double-clic sur le fichier). Pour éditer le fichier, il faut l'ouvrir avec un éditeur texte (clic-droit et ouvrir avec). Après avoir sauvegardé votre fichier, faites F5 dans votre navigateur pour rafraîchie la page et observer vos modifications.

• Utiliser un adressage relatif et pas absolu : Pour préciser le chemin d'un fichier image dans l'attribut src="..." de la balise <image/>, ne recopiez pas le chemin d'accès complet (appelé aussi adresse absolue par exemple : F:/2de-SNT/01-Web/Projet-Batman-VOTRENOM-Version1/images/batman-comics.jpg), précisez le chemin du fichier image à partir de la position du fichier HTML qui l'utilise, on parle d'adresse relative (par exemple : images/batman-comics.jpg). En effet, si on change le mini-site de place dans l'ordinateur, les adresses absolues ne fonctionneront plus, contrairement aux adresses relatives !

• Selon l'éditeur de texte choisi, il faudra sélectionner, éventuellement, dans le menu, utf-8 comme encodage de caractères (la balise charset déjà présente ne suffit pas toujours).

• Pixabay est une banque d'images et de vidéos libres de droit.

• W3C est le sigle du World Wide Web Consortium, un organisme de standardisation à but non lucratif, chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML5, CSS, PNG, ...

• Ressources HTML disponible sur le site de Mozilla.

3 - Sauvegarder régulièrement !

• Il est indispensable de faire des sauvegardes de votre travail. Une fois par semaine ou à la suite d'un travail important, faites une copie de votre travail sur une clé USB ou sur votre ordinateur.

• Il est aussi conseillé de sauvegarder votre travail sur un cloud (dossier 2de-SNT/01-Web du porte document de l'ENT par exemple) pour pouvoir y accéder de n'importe où.

4 - Rendre votre travail

• Créer une archive (zip ou 7z) de votre dossier Projet-Batman-VOTRENOM-VersionX en faisant un clic droit / 7zip puis ajouter à l'archive.

• Déposer votre archive .zip ou .7z où le professeur vous l'a demandé.