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 :
Remettre les bonnes couleurs à leur place en modifiant ce code source.
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 :
Dans le tableau suivant, supprimer la colonne Âge.
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 :
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é.