Les liens et les images⚓︎
Je ne vois pas le lien...⚓︎
Les liens hypertexte
L'élément fondamental du web, s'appelle l'hypertexte. L'idée, c'est que du texte ne soit pas que du texte. Il est possible en cliquant sur une partie de ce texte, appelé lien, d'aller sur une autre page. Pour cela on utilise la balise <a>
dont la syntaxe est la suivante :
<a href="adresse de la page cible">Texte qui sera affiché</a>
Cela permet d'écrire des choses comme :
<ul>
<li><a href="http://www.wikipedia.fr">www.wikipedia.fr</a></li>
<li><a href="http://www.google.fr">Une question ?</a></li>
<li><a href="http://www.qwant.fr">www.google.fr</a></li>
</ul>
Exercice 10
Copiez le bloc de liens dans le corps de votre fichier et testez les différents liens.
Bien regarder avant de cliquer
Vous pouvez remarquer qu'il n'y a pas forcément de rapport entre le texte affiché et la page cible. En regardant l'adresse qui s'affiche en bas à gauche de votre navigateur lorsque vous passez la souris sur un lien, vous pouvez voir où il va réellement vous envoyer.
Dans les mails frauduleux, c'est une technique utilisée pour faire croire que le lien correspond à un site de confiance, alors que ce n'est pas le cas. Il faut donc toujours vérifier l'adresse réelle de la destination du lien avant de cliquer.
Exercice 11
Faites à l'exercice 2 de la feuille.
Le jeu de piste⚓︎
Liens vers d'autres pages du site
Les liens peuvent pointer vers d'autres pages du même site. Si le fichier de la page actuelle et de la cible se trouvent dans le même dossier, il suffit de mettre le nom de la page comme paramètre de href
.
Pour les exercices de cette partie
Pour que les exercices suivants marchent comme prévu, il faut bien que votre fichier actuel s'appelle premiere_page.html
. Si ce n'est pas le cas, il faut soit changer son nom, soit changer le nom à chaque fois qu'il est utilisé dans une autre page.
En effet, les différents exercices vont consister à rajouter des pages qui pointent les unes sur les autres. Il faut donc bien faire attention aux noms pour ces fichiers.
Exercice 12
-
Créez un nouveau fichier
deuxieme_page.html
et copier le code ci-dessous :Contenu de `deuxieme_page.html`<!DOCTYPE html> <html> <head> <title>Une deuxième page !</title> <meta charset="utf-8"> </head> <body> <h1>Et de 2 !</h1> <a href="premiere_page.html">Retour à la première page</a> </body> </html>
Ouvrez la page et vérifiez que le lien envoie bien vers votre première page.
-
Rajoutez un lien dans la première page pointant vers la deuxième.
Des pages dans des dossiers différents
Si la cible du lien se trouve dans un autre dossier, il faut indiquer le chemin relatif permettant d'aller du dossier actuel au fichier cible. La syntaxe du chemin est la même que sous Linux.
On rappelle que le séparateur de dossiers est /
et que pour remonter dans le dossier parent du dossier actuel il faut utiliser ..
.
Exercice 13
- Créez un dossier
secret
dans le dossier où se trouvent les autres fichiers. -
Créez un nouveau fichier
troisieme_page.html
dans le dossiersecret
et copier le code ci-dessous :<!DOCTYPE html> <html> <head> <title>Troisième page</title> <meta charset="utf-8"> </head> <body> <h1>Rien ne nous arrête</h1> <a href="../premiere_page.html">Retour à la première page</a> </body> </html>
-
Rajoutez le lien suivant dans
premiere_page.html
:<a href="secret/troisieme_page.html">En route vers la page 3</a>
-
Vérifiez que les liens permettent bien de passer d'une page à l'autre.
Exercice 14
- Rajoutez le lien suivant dans
troisieme_page.html
:<a href="../mystere/mysterieux/quatrieme_page.html">Est-ce que ça marche ?</a>
- Créez les dossiers nécessaires et le fichier
quatrième_page.html
au bon endroit. Vous pouvez mettre le code que vous voulez dedans. - Rajoutez les liens nécessaires dans les autres pages pour qu'on puisse passer de n'importe laquelles des 4 pages à n'importe quelle autre.
Exercice 15
Faites l'exercice 3 de la feuille.
Le poids des mots, le choc des photos⚓︎
Ajouter des images
Le texte c'est bien, mais les images, c'est mieux. Pour insérer une image, il faut utiliser la balise auto-fermante <img>
qui nécessite un certain nombre d'attributs. La syntaxe est :
<img src="adresse de l'image" alt="texte a afficher si l'image n'est pas là">
L'adresse de l'image suit les mêmes règles que pour les liens. L'image peut se trouver sur un autre site, et dans ce cas on met l'adresse complète, ou sur le même ordinateur que la page, et dans ce cas, on donne le chemin pour y accéder.
Le texte alternatif est très important, même si l'image s'affiche normalement, puisqu'il peut être lu par les outils de synthèse vocale pour les malvoyants
Exercice 16
-
Rajoutez le code suivant dans
premiere_page.html
:<img src="image_chien.jpg" alt="Une image de chien">
-
Rechargez la page et vérifiez que le texte alternatif s'affiche.
-
Remplacez avec celui ci-dessous et rechargez la page pour découvrir l'image.
<img src="http://nsi.janviercommelemois.fr/fichiers_web/image_chien.jpg" alt="Une image de chien">
-
Téléchargez l'image avec un clic-droit et
Enregistrez la cible du lien sous
et placez la dans le même dossier quepremiere_page.html
. -
Remettez le code original pour l'image et rechargez la page pour vérifier qu'elle s'affiche bien.
<img src="image_chien.jpg" alt="Une image de chien">
Positionnement de l'image
Par défaut, l'image s'affiche sur la même ligne que le texte qui l'entoure. C'est-à-dire qu'elle peut se mettre au milieu du texte. Si on veut la mettre à part, on peut la placer dans une balise <div>
. Il est aussi possible d'utiliser du code CSS.