Activité 1

Bases du HTML (2/2)

1. STRUCTURER une page

  • Les balises <div> et </div> permettent de diviser une page en blocs (ou sections) qui se superposent les uns sur les autres.

  • Les balises <span> et </span> permettent de créer des blocs côte-à-côte

  • Ces balises permettent de structurer le contenu d'un site.

Travail à faire :

  1. Remettre les bonnes couleurs à leur place en modifiant ce code source.

  2. Faire vérifier par le professeur.


2. Tableaux

  • Les balises <table> et </table> permet de créer un tableau, dont le titre est donné entre les balises <caption> et </caption>.

  • On organise ensuite, entre <tbody> et </tbody>, le corps du tableau, en énumérant chaque ligne entre <tr> et </tr> (table row), puis chaque cellule de la ligne (les colonnes) entre <td> et </td> ou bien <th> et </th> pour les titres des colonnes.

  • Les attributs rowspan et colspan servent à fusionner des cellules, respectivement suivant les lignes et les colonnes.

Travail à faire :

  1. Dans le tableau suivant, supprimer la colonne Âge.

  2. Faire vérifier par le professeur.

3. LES balises utiles


À 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 : ​

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é.