22/02/15

Edition d’un site Web

Quelques balises de plus

• strong : insister fortement sur un passage de texte (en général traduit en gras par les navigateurs)
• em : mettre en valeur une partie de texte (en général rendu par de l’italique)
• blockquote : encadrer une citation longue (en général rendu par un retrait du texte)
• q : encadrer une citation courte (texte dans le texte courant, certains navigateurs rajoutent les guillemets)
• cite : encadrer la source de la citation (auteur, nom du document, url, ...)

Exemples :

J. R. R. Tolkien (1892-1973), philologue et écrivain britanique

Une citation de Tolkien: Il n’est pas prudent d’écarter de ses calculs un dragon vivant, quand on est près de lui.

Un extrait :

"They went in single file, running like hounds on a strong scent, and an eager light was in their eyes. Nearly due west the broad swath of the marching Orcs tramped its ugly slot; the sweet grass of Rohan had been bruised and blackened as they passed."

Tolkien- The Lord of the Rings-The Two Towers

L’objectif de l’exercice qui suit est de reproduire un ensemble de pages web.

Commencez par visiter ces pages.

La structure du site est simple.

• Il contient une page d’accueil d’où l’on peut visiter trois autres pages sur Leonard de Vinci.
• La page sur la bicyclette est anecdotique.
• La page "Peintures et Sciences" est un long article qui mentionne certaines œuvres du maître, que l’on peut consulter sur la page "La galerie". Les liens qui vont de l’article à la galerie nous conduisent exactement là où se trouve la peinture dont il est question. Pour y arriver, on utilise des identificateurs de balise (attribut id="...")
• La galerie présente une série de vignettes accompagnées de commentaires. En cliquant sur une vignette, on accède à une image en taille réelle sur une page séparée.

Tout d’abord, téléchargez le fichier suivant sur votre poste local. Il contient les documents à partir desquels vous travaillerez : deVinci_acompleter.zip.

Décompressez ensuite ce fichier. Attention ! il faut absolument savoir faire cette manipulation correctement ! Votre professeur vous montrera si vous ne savez pas bien, demandez-le lui.

Vous aurez ainsi un répertoire appelé "deVinci_acompleter" contenant tous les fichiers (html et images) dont vous aurez besoin. Vous pourrez ensuite travailler en éditant les fichiers sur votre poste de travail.

Reproduisez les pages en utilisant et en complétant les ressources du dossier que vous avez téléchargé. Le texte est déjà mis en forme, il vous suffit de retravailler les pages HTML du dossier.

• Il y manque :
  • modifier quelques balises sur la page d’accueil ;
  • les liens vers les autres pages ;
  • les liens vers les images ;
  • une insertion d’images (bicyclette) ;
  • les identificateurs de balise afin de pouvoir renvoyer du texte "Peinture et sciences" vers les vignettes de la "Galerie" ;
  • compléter la table de la page d’accueil.

Suivez la méthode de travail décrite dans cette leçon.

Une fois votre travail terminé, vous devez être en mesure de surfer sur ces quelques pages avec votre navigateur.