Liens

Principe

Les liens permettent ce que l'on appelle un peu pompeusement l'Hypertexte: la possibilité de passer d'un texte à un autre texte, ou à un autre media par un lien cliquable. Une page web peut ainsi renvoyer, par de nombreux liens, vers un nombre presque infini d'autres pages ou ressources. L'essence même du web.
Par convention les liens de texte sont bleus; et on reconnaît un lien en passant la flèche de la souris au dessus, à ce qu'une petite main apparaît à la place de la flèche du pointeur (de la souris) quand on "survole" le SUPPORT d'un lien.


Un lien peut"pointer" vers un fichier de ce site du cours (index.html) comme dans l'exemple ci-dessus, ou vers une page de n'importe quel site extérieur. Du moment que le chemin est exact, ça marche, que la cible soit ici ou à l'autre bout du monde.


La balise utilisée est (exemple imaginaire):
<a href="vacs.html"> mes photos de vacances</a>.
Ce qui nous donne en consultation : mes photos de vacances

La même chose en code source dans un texteur qui met l'html en couleur, pour nous aider dans la rédaction: image code source d'un lien


°° Un lien peut avoir comme support:

  1. du TEXTE: un paragraphe, une phrase, un mot, une lettre, un point de suspension... Il y a un lien sur le 3e point de suspension.
  2. une IMAGE (schémas, dessins, photographies); Une image pourra même proposer plusieurs liens .
  3. Pratiquement n'importe quel élément html

Exemples :

lien sur texte
flower_img
lien sur image
Cinq liens avec des cibles différentes dans la même image :
lien1 lien2 lien3 lien4 lien5
il faut surveiller le changement de la flèche en main pour repérer les parties de l'image qui font lien. On vérifie la cible des différents liens qui s'affichent dans la barre d'état au bas à gauche de la fenêtre.

En utilisant la souris avec subtilité, on peut faire apparaître le cadre de la zone de lien en appuyant sur le bouton, sans le relâcher. On peut alors sortir de la zone de lien, avant de relâcher le bouton, pour éviter d'activer ce lien.

Arborescence

Une page peut donc contenir de nombreux liens vers d'autres pages.
Le schema ci-dessous dessine une arborescence imaginaire de liens entre les pages d'un même petit site qui pourrait être celui de la randonnée annuelle d'un club cyclotouriste. La page d'accueil "index.html" propose 4 liens vers des rubriques: album photo, compte-rendu de la journée par le secrétaire du club, liste des participants, témoignages; la page participants liste 9 pages individuelles, qui ont elles-mêmes des liens (sortants) vers toutes sortes de références ; la page témoignages liste les 4 pages de ceux qui ont osé prendre la plume pour un témoignage personnel sur la randonnée.

Dans la perspective du dévelppement d'un petit site, il est vivement conseillé de dessiner à la main ce type d'arborescence, pour pouvoir réfléchir tranquillement à l'organisation des données. C'est là le travail du webdesigner, concevoir l'organisation des informations. Le graphiste leur donne ensuite formes et couleurs.


ERROR: <a href="cible.html">: la cible est le nom du fichier cible, pas le titre de la page.
exemple: le titre de cette page est "Les Liens". Le nom du fichier est 2.htm. Si l'on veut créer un lien vers cette page, il faut écrire <a href="2.htm"> et NON PAS <a href="Les Liens">; et ne pas oublier de refermer la balise par </a>.
Ceci implique de garder à l'esprit la "carte", la structure physique de votre site, les noms de dossiers et de fichiers, indépendament de l'aspect visuel des pages ou de la rédaction.

A faire :

Jouer avec du texte, créer quelques pages et les lier entre elles. Aller et retour.
Contenu : au choix, comptines, jeux de mots, expression libre, poésie... L'important est maintenant de pratiquer pour avoir de ces notions une compréhension qui passe par l'expérience.
Exemple : le tissu textuel de Sonia Marques.(inaccessible désormais, et je n'ai pas trouvé le temps de refaire, ni trouvé un équivalent, de ce beau travail de liens sur des textes)

Si le contenu est court, au lieu de recopier toute la structure html, vous pouvez dupliquer un premier fichier, le renommer et changer son contenu seulement
(texte et liens dans <body>).

Des listes pour les liens

°°

Plus loin sur les liens

listes | une ancre | wikipedia | w3schools.com | liens complexes

Ancres dedans

Les ancres sont des liens permettant de cibler une partie de la page, celle-ci ou une autre (pourvu que cette autre soit pourvue d'une ancre que l'on puisse appeller). Le principe est de "marquer" un endroit en donnant à la balise une id . Le lien, faisant rélérence à cette id , pourra amener directement dessus. ancres utilisées dans cette page : #top, #demo, #ancres, #complexe.
Ce qui nous permet tout de suite une barre de liens internes:
Remonter | Exemples | #ancres ( ici, donc le déplacement ne sera pas très sensible) | Plus loin sur les liens


Ancres dehors

Voici un lien direct dans le contenu (dans le corps de la page) vers la section "OutilsOpenSource" de la page "Ressources", une autre page donc. Le code est <a href="ressourc.html#outils">. J'ai "marqué" cette partie de la page en question, en donnant une "id" à une balise html <small>, juste au dessus du titre, matérialisé par °° pour rendre visible son implantation.

L'id 'outils' aurait pu logiquement être implantée dans la balise <h3> du titre "OutilsOpenSource". C'est seulement un petit truc de pratique: dans ce cas le titre OutilsOpenSource apparaît "collé" au haut de la fenêtre du navigateur. En remontant un peu l'id, je ménage une marge au-dessus du titre, solution plus aérée à la lecture. C'est la grande souplesse de l'Html.

Parenthèse iframe

La cible du même lien vers cette ancre id='outils' dans la page 'ressourc.html', ici affichée dans une iframe. Cette balise permet d'afficher dans cette page le contenu d'une autre page. Remarquez (1) le centrage du paragraphe sur la section OutilsOpenSource dans la frame et (2) l'apparition automatique d'"ascenseurs" sur le côté, qui permettent de déplacer le contenu de la page distante. Et arrêtons là, ce passage est consacré aux ancres. Pour le reste nous reparlerons des iframes en leçon 7.



liens avec requêtes

Le texte de ce lien de la page "ressources", dont le support est "Boîte à outils de base", pose une question à mon compte delicio.us ( une plate-forme web 2.0 qui permet de ranger des bookmarks, signet, liens divers...) Ce lien adresse une requête sur les articles répondant au mot-clef "outils" et affiche les résultats. http://delicious.com/polguezennec/outils Boîte à outils de base. Le mot-clef Outils me sert à marquer des articles à l'intention des élèves. Si vous le remplacez par 'tools' il y en aura beaucoup plus...


photos de fleurs sur Flickr | photos de chats sur Flickr
Ces liens Pour en voir le TEXTE, code source ou barre d'état ) contiennent une question (query) au moteur de recherche interne du blog. On n'arrive donc pas à l'accueil du blog, mais au résultat d'une requête faite par moi-même. La partie importante est www.flickr.com/search/?q=cats.


Autre exemple dans un tumblr dessin/peinture, un lien requête pour les articles ayant pour mot-clef "dessin": http://polguezennec.tumblr.com/tagged/dessin
Il devient très facile ainsi de créer des liens qui correspondent à une certaine interrogation de la base de données d'un blog, un résultat filtré par vous.
Un lien requête avec http://www.tumblr.com/tagged/dessin cherchera non plus dans mon tumblr, mais dans l'ensemble des tumblr, les articles avec le tag 'dessin'.( Si vous faites l'essai, ne soyez pas connecté à Tumblr )

Evidemment, parfois, les webmasters ont eux aussi appliqué cette démarche en interne dans leur blog, créant des liens qui ne sont pas des pages physiques mais des résultats de requêtes adressées à la base de données.

aller plus haut
html logo