Filière Première Année Cycle d'Ingénieur : Sécurité IT et Confiance Numérique
Année Universitaire 2023-2024
[Link]@[Link]
Technologie Web
Les Liens
La balise <a> définit un lien hypertexte, qui permet de relier d'une page à une autre.
§ Exemple de lien avec texte : <a href="[Link]">Texte du lien</a>
§ Exemple de lien image : <a href="[Link]"><img src="[Link]"></a>
Généralement il existe deux types de liens hypertextes en HTML :
§ Les liens internes pour naviguer d’une page à l’autre dans un même site.
§ Les liens externes qui vont envoyer les utilisateurs vers une page d’un autre site.
1. Les liens internes / Lien vers une ancre (même page)
Une ancre est une sorte de point de repère qu'on peut mettre dans différents
endroits d’une page HTML lorsqu'elle est très longue. Il est utile de faire un lien amenant
aux parties intéressantes du document.
Les liens interne permettent de se déplacer à l’intérieur d’un fichier html, sans que
le visiteur soit obligé de faire scroller la fenêtre. Le visiteur va donc cliquer sur le lien et il
sera amené vers l’ancre. Pour cela il faut :
§ Définir la cible du lien (ancre).
§ Associer ce même lien a cette ancre.
On utilise l'attribut name pour attribuer un nom à l’ancre :
<a name="mon_ancre">Titre</a>
Ensuite, il suffit simplement de créer un lien, mais cette fois l'attribut href contiendra un
dièse (#) suivi du nom de l’ancre :
<a href="#mon_ancre">Aller vers l'ancre</a>
Exemple :
<a name="top"></a>
<a href="#top"> Vers top </a>
1
2. Liens Externes
Les liens externes peuvent être vers des pages Web, vers des téléchargements de
Fichiers, vers des adresses électroniques, …
Exemples :
<a href="[Link] classrooms</p></a>
<a href="[Link]"><b>télécharger le fichier</b></a>
3. Le lien mailto
§ Lien mailto sans sujet pour un seul destinataire
‹a href="[Link] notre équipe‹/a>
§ Lien mailto sans sujet pour plusieurs destinataires
‹a href="[Link]
notre équipe‹/a>
§ Lien mailto avec sujet (Hello)
‹a href="[Link] notre
équipe‹/a>
§ Lien mailto avec sujet (Hello) et contenu (Message)
‹a
href="[Link]
er notre équipe‹/a>
§ Lien mailto avec sujet envoyé à des destinataires en copie et/ou en copie cachée
‹a
href="[Link]
cc=exemple@[Link]">Contacter notre équipe‹/a>
4. Couleurs des liens
link="Couleur" : couleur des liens non-activés.
alink="Couleur" : couleur des liens actifs.
vlink="Couleur" : couleur des liens déjà activés.
Exemple : <body link="blue" alink="green" vlink="silver"> … </body>
5. L’attribut target
L’attribut target permet de choisir où doit s’ouvrir notre page de destination. Il peut
prendre les valeurs suivantes :
2
Valeur Action
_self Affiche la cible dans le même cadre que le lien. C’est la valeur par défaut.
_parent la cible est chargée dans le cadre de niveau supérieur par rapport à
l’emplacement du lien.
_blank la cible est affichée dans une nouvelle fenêtre.
_top la cible est chargée dans la fenêtre entière(efface les frames).
Example:
<a href="[Link] target="_blank"> Open
classrooms Website </a>
Exercice
1. Créez deux fichiers "[Link]" et "[Link]" avec un lien allant de "[Link]"
à "[Link]".
2. Créez un lien sur le fichier "[Link]" pointant sur le fichier "[Link]". Vous
devriez ainsi avoir un lien pointant sur l'autre fichier sur chacun des fichiers, et donc
passez de l'un à l'autre sans utiliser les boutons du browser.
3. Créez un fichier "[Link]" qui aura deux liens vers "[Link]" et "[Link]" et
un autre lien pointant sur une image (de votre choix).
4. Changez le lien de "[Link]" à ce que le lien ouvre une nouvelle page de browser.
5. Dans le fichier "[Link]", ajoutez un lien pour envoyer un mail à votre adresse.
6. Dans le fichier "[Link]", ajoutez un autre lien mailto avec sujet et contenu envoyé
à deux destinataires en copie de votre choix.
7. Créez un fichier "[Link]" qui contient une grande quantité de texte (faites par
exemple un copié-collé d'un texte que vous avez). Faites un lien interne au début du
document qui pointera sur le milieu du texte.
8. Reprenez le fichier "[Link]", et cette fois au lieu d'un texte pour le lien, utilisez
une image de votre choix.
