liens hypertextes - Collège Albert Ball

LIENS HYPERTEXTES
Un lien hypertexte est une référence texte ou graphique qui pointe vers une cible (adresse web, adresse
mail, document...). On peut créer un lien hypertexte à l’intérieur du site, à l’intérieur d’une page (ancre),
vers l’extérieur du site. Un clic sur ce lien ouvrira la cible dans la même fenêtre que celle du navigateur. On
peut cependant créer des liens hypertextes ouvrant une nouvelle fenêtre du navigateur.
Forme d’un lien hypertexte dans SPIP
Dans SPIP, un lien hypertexte a le code suivant [lien –> URL]
 Le lien peut être un texte, le code SPIP d’un document (image, vidéo...), une adresse internet, une adresse
mail...
 L’URL peut être une adresse absolue (commençant, comme ici, par http://), une adresse relative (vers une
autre page du même site), une adresse e-mail (« mailto:[email protected] »)…
Remarque : un lien hypertexte peut être mis en forme (gras, italique, couleur ...)
Méthode pour créer un lien hypertexte

Sélectionner à la souris dans la zone « texte » de l’article, le texte, le code de l’image, l’adresse internet,
l’intitulé d’email... pour lequel on veut créer un lien.

Cliquer sur l’icône de la barre typographique

Une fenêtre très explicite s’ouvre :
1er cas : Lien hypertexte vers l’extérieur du site
Dans la fenêtre « adresse du lien » indiquez l’adresse du site où vous voulez arriver.
Exemple : supposons que l’article contienne la phrase suivante : « Cliquez ici pour accéder au site officiel de SPIP »

Vous sélectionnez à la souris « site officiel de SPIP »

Cliquer sur l’icône de la barre typographique

Une fenêtre « barre d’adresse » très explicite s’ouvre :
http://www.spip.net

Indiquez dans cette fenêtre l’adresse du site : http://www.spip.net

Cliquez sur OK.
2ème cas : Lien hypertexte à l’intérieur du site

Repérez le numéro de l’article, de la rubrique vers la-
quelle vous voulez mener votre lien hypertexte : lorsque vous
« visitez », dans l’espace privé, un article ou une rubrique, la
colonne de gauche contient un pavé indiquant, en gros caractères, ce numéro. C’est ce numéro que vous allez indiquer dans
le lien hypertexte.
Exemple : L’article ci-contre a le n° 169

Si je suis, par exemple, dans l’article 192 et que je veux
faire un lien sur l’article 169, dans la fenêtre ci-dessus
j’indiquerai 169 comme adresse de lien puis OK.

N’oubliez pas de cliquer sur le bouton Enregistrer avant de quitter l’article.
3ème cas : Lien hypertexte à l’intérieur d’une page (ancre)
Par exemple, en partant d’un endroit 1 dans une page (exemples : paragraphe, bas de page, ...), on peut vouloir donner la possibilité d’aller directement à un autre endroit 2 (exemple : haut de page, sommaire, paragraphe ...) dans
cette page. Pour cela, vous devez mettre en place une navigation au sein d’une page SPIP en créant des ancres et
des liens html.
Les étapes :
Placez une « ancre nommée » juste avant l’endroit 2 à atteindre.
Cela s’obtient avec le code suivant :
[#nom_ancre<-]endroit 2
Placez ensuite un « lien HTML » sur l’endroit 1 de démarrage.
Cela s’obtient avec le code suivant :
[endroit 1 de démarrage->#nom_ancre]
Exemple :
Supposons, que la page de ce tutoriel soit un article SPIP et qu’on veuille créer un retour vers le titre en haut de la
ème
page intitulé « Liens hypertextes » à partir du paragraphe actuel intitulé « 3
cas : lien hypertexte à l’intérieur d’une
page (ancre) »
Pour y parvenir, voici un exemple de code à écrire :
En haut de la page, devant le titre « Liens hypertextes » écrire le code [#haut<-] ce qui donnera :
[#haut<-]Liens hypertextes
Encadrer le paragraphe « 3ème cas : Lien hypertexte à l’intérieur d’une page (ancre) » avec des [ ] et rajouter au bout
du paragraphe ->#haut ce qui donnera :
[3ème cas : Lien hypertexte à l’intérieur d’une page (ancre) ->#haut]
4ème cas : Lien hypertexte ouvrant une nouvelle fenêtre du navigateur
On utilise le code html suivant :
<a target = _blank
href= "URL du document à atteindre">texte du lien</a>
er
1 cas : Ouvrir une rubrique ou un article interne au site
Pour le site albert-ball, l’URL d’une rubrique ou d’un article est de la forme :
http://albert-ball.etab.ac-lille.fr/spip.php?docxxx
où doc sera remplacé par article ou rubrique suivi de son n° XXX
Exemple : Je suis dans l’article 169 du site albert-ball et je souhaite ouvrir l’article 164 du site dans une nouvelle
fenêtre du navigateur lorsque je clique sur la phrase suivante : « Créer un article dans SPIP »
Le lien de l’article est donc : http://albert-ball.etab.ac-lille.fr/spip.php?article164
Le texte du lien est : « Créer un article dans SPIP »
Le code html à écrire sera donc le suivant :
<a target="_blank" href="http://albert-ball.etab.ac-lille.fr/spip.php?article164">Créer
un article dans SPIP</a>
ème
2
cas : Ouvrir une page web externe au site
Pour une page web d’un site extérieur, copier l’URL de cette page web qui s’affiche dans le navigateur
Exemple : Je souhaite ouvrir dans une nouvelle fenêtre, la page d’accueil du journal « Le Monde », lorsque je clique
sur le mot « La une du Monde » qui se trouve dans mon article
Le lien de cette page est : http://www.lemonde.fr/
Le texte du lien est : « À la une du Monde »
Le code html à écrire sera donc le suivant :
<a target="_blank" href=" http://www.lemonde.fr/">À la une du Monde</a>