TP2 : Liens et images
On souhaite créer un petit site Internet présentant des informations sur des films sous forme
de fiches synthétiques et de fiches artistiques à partir des informations disponibles sur le
site [Link]. L'organisation du site est définie de la manière suivante :
la page d'accueil est une liste des titres de films,
le répertoire Fiches contient les fiches synthétiques identifiées par : XXX_Fiche.html
où XXX est un titre de film,
le répertoire Artistes contient les fiches artistiques identifiées par : XXX_Artiste.html
où XXX est un titre de film,
le répertoire Images contient des répertoires XXX contenant toutes les images des
pages de chaque film XXX.
Question 1
À partir de la structure des répertoires et des liens entre les différents documents, créer le site
pour deux ou trois films en s'inspirant des pages ci-dessus.
Depuis la page d'accueil on accède à la fiche synthétique par le titre du film (en local)
Lien vers la fiche synthétique (en local)
Lien vers la fiche artistique (en local)
Site officiel Lien vers le site [Link]
Remarque : Les liens sur les pages locales devront être créés en utilisant un adressage relatif.
Insertion d'images
L'insertion d'une image s'effectue avec la balise <img>. Celle-ci a besoin de deux attributs :
src et alt. Le premier permet de spécifier la source de l'image (son URL). Il n'est pas
obligatoire de stocker l'image que voulez ajouter au document sur le disque dur. En effet, la
source peut-être une adresse vers une image distante (adresse web). Le deuxième attribut, qui
est désormais obligatoire, est un texte qui remplace l'image s’il y a un problème lors de
l'affichage de cette dernière. Vous pouvez y placer un texte de description par exemple.
L'utilisation de la balise est donc : <img src="adresse_image" alt="description" />.
Vous pouvez également spécifer dans les attributs la taille que vous voulez donner à l'image,
en précisant les valeurs width et height, pour respectivement largeur et hauteur. L'image sera
correctement insérée si vous ne précisez pas ces attributs. Néanmoins, vous aurez un meilleur
contrôle de la mise en page en les spécifiant.
L'utilisation de la balise est donc : <img src="adresse_image" alt="description"
width="valeur" height="valeur" />.
Lorsque vous voudrez insérer une image accessible sur le Web dans votre document, il faudra
connaître son adresse URL. Vous pouvez obtenir ces informations avec le navigateur. Faites
un clic droit sur l'image que vous voulez insérer, et choisissez l'option Copier l'adresse de
l'image. Vous pourrez ensuite coller l'adresse ainsi récupérée à l'endroit que vous voulez dans
l'éditeur de texte.
Mise en place des liens
La balise <a> spécifie les liens. Sa syntaxe est la suivante : <a
href="adresse_URL">nom</a>. Dans l'attribut href, il faut donner la cible vers laquelle vous
voulez faire un lien. Entre les deux balises, vous pouvez précisez le nom du lien (un simple
texte), mais vous pouvez aussi placer une autre balise. Par exemple, vous pouvez faire d'une
image un lien :
<a href="adresse"><img src="source" ... ></a>
Vous pouvez récupérer les cibles des liens de la même façon que vous récupérez les adresses
des images (clic droit > Copier l'adresse du lien).
Question 2 - Validation du code HTML et correction des
erreurs
Testez la validité du code HTML de vos pages web en copiant-collant le source des pages
dans le champs prévu à cet effet (textarea) sur le validateur HTML5 en ligne :
[Link]
Corrigez les erreurs s'il y a lieu, jusqu'à ce que votre code soit valide.