Aller au contenu

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 :

Syntaxe pour mettre un lien
<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

  1. 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.

  2. 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
  1. Créez un dossier secret dans le dossier où se trouvent les autres fichiers.

  2. Créez un nouveau fichier troisieme_page.html dans le dossier secret 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>

  3. Rajoutez le lien suivant dans premiere_page.html :

    <a href="secret/troisieme_page.html">En route vers la page 3</a>

  4. Vérifiez que les liens permettent bien de passer d'une page à l'autre.

Exercice 14
  1. Rajoutez le lien suivant dans troisieme_page.html : 
    <a href="../mystere/mysterieux/quatrieme_page.html">Est-ce que ça marche ?</a>
  2. 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.
  3. 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 :

Syntaxe pour rajouter une image
<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

  1. Rajoutez le code suivant dans premiere_page.html :

    <img src="image_chien.jpg" alt="Une image de chien">

  2. Rechargez la page et vérifiez que le texte alternatif s'affiche.

  3. 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">

  4. Téléchargez l'image avec un clic-droit et Enregistrez la cible du lien sous et placez la dans le même dossier que premiere_page.html.

  5. 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.