Chapitre V

Créer des liens et insérer les

images en html

I. Liens internes et liens externes

Tout d’abord, il faut savoir qu’il existe différents types de liens. Pour l’instant, nous
allons nous concentrer sur les eux types les plus « classiques » : les liens internes et les liens
externes.

Quelle différence entre ces deux types de liens ? Un lien interne est un lien créé entre
deux pages d’un même site web tandis qu’un lien externe est un lien menant d’un site web vers
un autre site web.

Dans tous les cas, pour créer un lien, nous allons utiliser l’élément « a » accompagné de
son attribut href (pour Hypertext Reference) qui sert à indiquer la cible (c’est à dire la
destination) du lien.

Quel que soit le type de liens créés, la seule chose qui va changer va être ce que l’on va
indiquer en valeur pour l’attribut href. Commençons donc avec les liens internes. Nous avons
trois cas à distinguer :

1. La page à partir de laquelle on fait un lien et celle vers laquelle on fait un lien se
trouvent dans le même dossier. Dans ce premier cas, il suffit de préciser le nom de la page dans
l’attribut href.

2. La page vers laquelle on souhaite faire un lien se trouve dans un sous-dossier. Dans
ce cas, il faudra en tenir compte et inclure le nom du sous-dossier dans la valeur de l’attribut
href.

3. La page vers laquelle on veut faire un lien se trouve dans un dossier parent. Dans ce
cas, nous devrons rajouter « ../ » dans la valeur de l’attribut href. Voilà donc en images comment
cela fonctionne :
On a créé quatre pages en HTML (avec une structure minimale pour chacune d’entre elles afin
de les rendre valide). On a placé les pages [Link] et [Link] dans le même dossier, la
page [Link] dans un sous-dossier relativement à ma page [Link] et la page [Link]
dans un dossier parent par rapport à ma page [Link].
On va donc maintenant créer des liens de ma page [Link] vers mes pages [Link],
[Link] et [Link] grâce à l’élément a et à l’attribut href :

Si vous ouvrez votre page [Link], celle-ci doit maintenant ressembler à cela :
 Lorsque vous ou vos visiteurs cliquerez sur « page 2 », « page 3 » ou « page 4 », vous
serez redirigés vers la page en question.
Pour créer des liens externes, maintenant, vous allez voir que c’est beaucoup plus
simple : il suffit d’indiquer l’URL complète de la page vers laquelle on veut faire un lien en
valeur de l’attribut href.
En pratique, pour faire un lien vers la page d’accueil de Wikipédia par exemple, on écrira
:

A noter qu’il existe pour les liens internes et externes des attributs facultatifs qui peuvent
modifier le comportement par défaut de ces liens. C’est par exemple le cas de l’attribut target :
l’attribut target permet de choisir si vous voulez que la cible de votre lien s’ouvre dans une
nouvelle fenêtre / nouvel onglet ou pas.
Pour que la cible de votre lien s’ouvre dans une nouvelle fenêtre ou un nouvel onglet,
on attribuera la valeur _blank à l’attribut target. Un exemple immédiatement en image :

Attribut à retenir donc, car celui-ci peut s’avérer très utile dans de nombreux cas (lorsque vous
ne voulez pas que vos visiteurs quittent votre site par exemple). Notez en revanche que vous ne
pouvez pas choisir si le lien va s’ouvrir dans un nouvel onglet ou dans une nouvelle fenêtre.
 II. Les autres types courants de liens
Les liens internes et externes sont très certainement les types de liens les plus courants,
mais c’est loin d’être les seuls ! En effet, on peut utiliser les liens pour faire bien d’autres choses.
Commençons avec les liens de type ancre. Les liens de type ancre sont des liens menant
à un autre endroit d’une même page web. Ils peuvent être utile dans le cas d’une page web très
longue pour donner à vos visiteurs un accès rapide à une section en particulier par exemple.
Vous comprendrez qu’il va donc tout d’abord nous falloir rajouter quelques lignes de textes
dans notre page HTML pour pouvoir tester les ancres (sinon, on n’en verra pas l’effet).
Pour créer une ancre, on commence par rajouter un attribut id à une balise ouvrante
HTML à l’endroit où l’on veut envoyer le visiteur. On peut attribuer n’importe quelle valeur à
cet attribut, le mieux étant de choisir une valeur qui fasse sens.
Ensuite, on crée le lien cliquable en soi qui va amener à notre id. Pour cela, on utilise
toujours notre élément a avec son attribut href (on ne réinvente pas la roue à chaque fois), mais
cette fois ci on va devoir placer un dièse avant d’écrire la valeur de l’attribut href.
La valeur inscrite pour l’attribut href doit être strictement la même que celle donnée à
notre id.

Faites attention à bien choisir des valeurs différentes pour chaque id sinon votre lien ne saura
pas où ramener ! Pour envoyer un mail, maintenant, on donne tout simplement une valeur de
type « mailto : » à notre attribut href comme ceci :
 Enfin, voyons les liens permettant à vos visiteurs de télécharger un fichier. Pour cela, il
va tout d’abord falloir nous armer d’un fichier (au format zip, pdf, ods ou autre) que l’on va
placer dans le même dossier que la page web à partir de laquelle on crée le lien.
Ensuite, il ne reste plus qu’à créer un lien comme on en a l’habitude en utilisant un
chemin relatif. Comme notre fichier et notre page web sont dans le même dossier, nous n’avons
donc que le nom du fichier à renseigner en valeur de l’attribut href.
Par exemple, si mon fichier est un pdf qui s’appelle « fichier », on aura :
 III. Insérer une image
Lorsque vous enregistrez une image sur votre ordinateur, vous pouvez en
théorie choisir entre 1-html_css.odt 61 Classe de 2nde ICN différents formats avec entre autres
le png, le jpg ou jpeg, bitmap ou gif pour ne citer que les plus connus.
Comme vous vous en doutez, ces formats ne sont pas strictement
équivalents et chaque format a été créé pour un type précis d’images. Si votre image est une
photographie, je vous recommande d’utiliser le format jpg. Si, en revanche, votre image est un
dessin ou tout autre type d’image statique, préférez le png qui est un type qui gère également la
transparence. Enfin, si votre image est animée, vous devrez choisir le format gif. Oubliez le
bitmap qui est un format lourd et sans réel avantage.
Pensez à choisir avec attention le nom de vos images et évitez les
caractères spéciaux et les espaces (préférez les underscores ou les tirets).
Pour insérer une image, nous allons utiliser l’élément HTML img.
L’élément img doit être placé au sein d’un élément de type block, comme l’élément p ou un div
par exemple.
Pour que votre code soit valide, vous devez ajouter deux attributs à
l’élément img : l’attribut source, abrégé src et l’attribut alternative, qu’on note alt.
L’attribut src indique le chemin de l’image. Vous pouvez lui donner un
chemin relatif ou absolu. L’attribut alt sert à donner un texte descriptif à a photo. Ce texte est
utile notamment dans les cas où votre image ne s’affiche pas ou pour les robots (de Google,
entre autres).
Enfin, vous pouvez également ajouter l’attribut facultatif title, ce qui aura
pour effet d’afficher un texte lorsque vos visiteurs passeront la souris sur votre image.

Comme vous pouvez le voir, on a indiqué une adresse absolue en source de l'image (sur Google
Image). Notez que l’élément img est représenté par une balise orpheline.