Listes et imbrication
Ce travail sur les listes comporte deux volets. Il s’agira d’abord de réaliser une première page web destinée à vous familiariser avec certains éléments de liste. Cette page web sera par la suite réutilisée pour des exercices plus complexes d’imbrication.
Fichier(s) requis
Partie A – éléments de listes simples
Directives
- Créez un nouveau document XHTML 1.0 Strict.
- Le corps du document devra contenir les 3 divisions structurelles suivantes :
- l’en-tête, qui contiendra le titre de la page et le menu de navigation
- le conteneur général, qui contiendra le contenu propre à la page courante
- le pied de page, qui contiendra les informations sur le créateur du site (nom et adresse de courriel) et la date de mise à jour
N’oubliez pas d’attribuer à chacune de ces divisions les attributs appropriés (ex. id et/ou class ).
- Le titre de la page sera MonJournal.com
- Utilisez l’élément de liste approprié au balisage des sections du menu de navigation : actualités, arts & spectacles, environnement, santé, sports et loisirs, technologies.
- Intégrez le contenu du fichier terminologie.txt dans le conteneur général, et balisez-le en utilisant les éléments de listes appropriés.
- Utilisez l’élément <address> pour présenter le nom du créateur du site et son adresse de courriel.
- Appliquez un hyperlien sur l’adresse de courriel du créateur du site afin que lui soient acheminés les questions et commentaires. Forcez l’inclusion du texte Demande relative au site web Monjournal.com comme sujet du message.
- Sélectionnez l’élément qui vous semble le plus approprié pour présenter la date de mise à jour.
- N’oubliez pas d’inclure des commentaires significatifs de la structure du document que vous traitez.
- Validez votre code.
Astuce
Lors de la réalisation de listes, portez un soin particulier à votre indentation. Un code bien indenté vous permettra de repérer rapidement les balises entrantes et fermantes des éléments, les erreurs relatives à l’imbrication des listes étant dans la plupart des cas dues à l’absence de la balise de fermeture.
Partie B – imbrication de listes
Directives
- Créez une copie du document XHTML créé dans la partie A.
- Utilisez des éléments de liste non ordonnés pour baliser les sous-sections imbriquées à l’intérieur du menu de navigation :
- pour la section arts & spectacles, les sous-sections sont : expositions, cinéma, danse, musique, théâtre
- pour la section technologies, les sous-sections sont : électronique, informatique, autres
- Entre les balises du conteneur général, insérez le contenu du fichier etapes.txt, et balisez-le en utilisant les éléments de listes appropriés.
- Si vous ne l’avez pas déjà fait, imbriquez la terminologie à l’intérieur de l’élément de liste encadrant l’étape 1.
- N’oubliez pas d’inclure des commentaires significatifs de la structure du document que vous traitez.
- Validez votre code.
Ressources
- W3 Schools. W3Schools Online Web Tutorials, [En ligne]. http://www.w3schools.com (Page consultée le 26 janvier 2010).
- W3C. W3C Markup Validation Service, [En ligne]. http://validator.w3.org (Page consultée le 26 janvier 2010).
