Réalisation d’une première page web conforme à la recommandation XHTML 1.0 Strict (balises méta, bloc et en ligne; hyperliens et images)
La première partie de votre travail consiste à analyser la structure du pseudo-article scientifique qui vous est soumis, et à sélectionner, parmi les balises présentées en classe, celles qui correspondent à cette structure. Par la suite, vous devrez réaliser une page web conforme à la recommandation XHTML 1.0 Strict.
Pour ce faire, vous utiliserez l’éditeur de code du logiciel Dreamweaver (accessible au C-3001 par le menu Démarrer > Internet > Dreamweaver), ainsi que le validateur de balisage du W3C (http://validator.w3.org/)
Astuce
Pensez à travailler sur une version imprimée du texte. La lecture à l’écran étant 25% plus ardue que celle sur le papier (Nielsen 2006, p.104), vous économiserez du temps. Cette technique vous permet aussi de consigner vos observations relatives à la stucture du document, afin d’effectuer des choix judicieux au cours de votre travail de balisage.
Partie A – balisage logique
Directives
- Créez un nouveau document XHTML 1.0 Strict. Assurez-vous que celui-ci est conforme au Doctype suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> - Dans l’en-tête du document (balises <head></head>), insérez minimalement les métadonnées (balises <meta>) :
- Author
- Description
- Keywords
- Content-Type (<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />)
- Dans le corps du document (entre les balises <body></body>), insérez le texte contenu dans le fichier Tremblay, Van Den Brouck et Beulemans.txt, que vous aurez préalablement téléchargé (voir la section Fichiers requis).
- Balisez le texte à l’aide des balises de niveau bloc et en ligne appropriées :
- quelques balises de niveau bloc que vous pouvez utiliser : <div>, <h1>, <h2>, <h3>, [...], <p>, <ul> et <li>, <hr />
- quelques balises en ligne que vous pouvez utiliser : <em> (pour le titre d’un périodique), <strong> (pour l’affichage en gras du titre des articles)
- Indentez votre code afin d’en faciliter la lecture.
- N’oubliez pas d’inclure des commentaires (<!– mon commentaire –>) significatifs de la structure du document que vous traitez. Afin d’évaluer la pertinence de ces commentaires, demandez-vous par exemple si ceux-ci sont suffisamment détaillés et compréhensibles pour qu’un collègue puisse terminer à votre place un travail que vous auriez entrepris quelques semaines plus tôt.
- Validez votre code.
Qu’en pensez-vous?
Selon vous, quels sont les avantages et les inconvénients d’utiliser l’un ou l’autre des éléments de liste (à puce ou numérotée) pour baliser la table des matières et les références bibliographiques de ce pseudo-article scientifique? Concrètement, comment vous y prendriez-vous dans l’un et l’autre cas? Consignez vos observations et validez ou infirmez vos hypothèses en discutant en avec un(e) collègue, un(e) auxiliaire d’enseignement et/ou le professeur.
Dans le cadre de ce travail, quelle est la meilleure méthode pour l’élaboration du système de navigation? Dans quel(s) contexte(s) est-il préférable d’utiliser les ancres (éléments <a>) et/ou les identifiants (attributs id)?
Fichier(s) requis
Partie B – insertion d’images et système de navigation
Directives
- Téléchargez les fichiers d’images associés au texte Tremblay, Van Den Brouck et Beulemans_fichiers.zip (voir la section Fichiers requis), et sauvegardez-les dans un dossier nommé images que vous placerez au même niveau que le fichier XHTML créé dans la partie A.
- Intégrez la source des images aux endroits appropriés. N’oubliez pas les attributs obligatoire alt et facultatif title.
- Si ce n’est déjà fait, balisez la table des matières avec des éléments de liste (imbriquez-les, au besoin).
- Créez un système de navigation comportant des ancres internes (attribut id et/ou élément a) et des liens relatifs (vous pouvez utiliser l’attribut title pour ajouter des informations sur la cible du lien) :
- entre les titres de la table des matières et ceux des différentes sections;
- entre les citations dans le texte et les références bibliographiques;
- entre les figures et leur mention dans le texte.
- Validez votre code
Qu’en pensez-vous?
Selon vous, pourquoi est-il préférable d’utiliser une URL relative lorsque vous intégrez des hyperliens ou renvoyez à la source des images à l’intérieur d’un site?
Fichier(s) requis
Ressources
- Nielsen, J. (2004). Conception de sites Web : l’art de la simplicité. Paris, CampuPress.
- W3 Schools. W3Schools Online Web Tutorials, [En ligne]. http://www.w3schools.com (Page consultée le 19 janvier 2010).
- W3C. W3C Markup Validation Service, [En ligne]. http://validator.w3.org (Page consultée le 19 janvier 2010).
