petite introduction liens - html2
T o u t e P e t i t e I n t r o d u c t i o n a u x
L i e n s ( l i n k s ) H T M L / X H T M L
Programmation Internet - P o u r D é b u t a n t
J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
+243 - 851278216 - 899508675 - 995624714 - 902263541 -
813572818
La dernière révision de ce texte est disponible sur CD.
Ce qui a fait la particularité des pages Web ou pages Internet dès leur invention
c’est les liens hypertextes (« Hyperlinks » ou « Hyperliens »). C’est ça qui a fait
valoir au langage qui les gère l’appellation de lange HTML (Hyper-Text Markup
Language).
Hyper-Texte signifie un texte qui activé, déclenche une action et dans le cas de
l’Internet cette action peut être l’accès à une autre page Web ou le
déclenchement d’une autre action (lancement d’une vidéo, d’une musique…).
Types de lien :
Un lien hypertexte lie deux documents ou deux points d’un même document, il
définit la relation entre les deux.
Il existe trois balises pour définir les liens en HTML : <a></a>, <link></link>,
<area></area>.
Dans ce document nous survolerons l’essentiel de la balise <a></a> « anchor »
(d’ancrage).
L’élément <a></a> (« anchor » ou ancre) renvoie à (affiche) :
un autre document : <a href="URL | URI">texte du lien</a> ou
un autre endroit du même document :<a href="#cible">texte du
lien</a> ou
un endroit précis d’un autre document : <a href="URL#cible">texte
du lien</a>,
un email…
L’endroit cible du lien dans le document cible # est appelé Bookmark., défini
par un id ou un name.
URL (Uniform Resource Locator)ou URI (Uniform Resource
Identifier) peut être l’adresse d’une page Web sur Internet, ou d’un fichier-
disque. L’URL/URI peut être absolue (adresse Web complète) ou relative
(locale au même site web).
href= « hypertext reference »
Pour agir, le lien doit consister en :
1. Le lien proprement dit :
<a href="cible">Support du lien</a>
« Support du lien » (seule partie visible du lien dans la page HTML) peut être :
1. Texte
2. Image
3. Élément HTML
4. …
et
2. La destination du lien (« target » ou cible) :
<a name="cible"> ou <a id="cible">.
La définition de la cible n’a pas besoin de la balise de fermeture</a>.
Un id (identificator) est unique dans un fichier HTML, il est donc spécifique ;
alors que plusieurs éléments peuvent avoir le même name (nom), par exemple
les éléments INPUT de type radiocheck.
Exemples de définition basique/minimale de lien « anchor » :
<a href="http://www.amessi.org/diasoluka">Lien vers
diasoluka</a>
Et de façon générique :
<a href="http://www.domain.com/"></a>
<a
href="ftp://username:[email protected]/"></a>
<a
href="file://username:[email protected]/"></a>
<a href="mailto:[email protected]"></a>
<a href="news:alt.groupname"></a>
Ce lien apparait comme ceci dans le navigateur (cliquez-le [avec le bouton
gauche de la souris]) :
Lien vers diasoluka
Exemple de définition de cible de lien « anchor » :
<a name="cible" />
L’Attribut target de la balise <a></a> :
Nous avons vu les attributs href, id, name (n’utilisez plus name comme
target de lien).
Voyons l’Attribut target.
Comme dans la balise <base> (qui définit l’URL de base dans les références
relatives de liens, et n’a pas de balise de fermeture</base>),et qui définit
aussi le mode d’ouverture par défaut de tous les liens dans la page, l’Attribut
target des balises <a></a>et <base>ouvre le lien comme suit selon sa
valeur (target="valeur") :
_blank : Dans une nouvelle fenêtre ou tab
_self : Dans le même frame (valeur par défaut)
_parent : Dans le frame parent
_top : Dans l’entièreté du corps de la fenêtre/tab
framename [nom d’un frame] : Dans le frame cité
Quand on définit les feuilles de style des liens, on doit les enchaîner dans
l’ordre suivant :
a:link, a:visited, a:hover, a:active(non visité, visité,
surplombé, actif).
Dans un CSS interne :
<style TYPE="text/css">
a:link{…}
a:visited{…}
a:hover{…}
a:active{…}
</style>
Depuis un CSS externe (dans un fichier CSS dans lequel on n’utilise jamais les
balises de définition de style), utilisez le lien suivant dans le fichier appelant :
<head>
<link rel="stylesheet" href="URL.css"
type="text/css" />
</head>
On parlera des styles dans une autre section. Mais déjà voyons ce que ça peut
faire :
Voici un code HTML sans aucun style :
Et voici comment il affiche :
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
1
/
25
100%
