[Apprenti] Créer des liens interne (ancre) ou externe (un autre site)

Nous allons voir ici les différents codes qui permettent de faire un lien au sein de son site.

Afin que ce soit clair pour tout le monde je vais vous indiquer la structure de notre site exemple:

• / (c'est ce que l'on appelle la racine)
  
  • :dossier: images
    
    • image1.png
      
    • image2.jpg
      
    
    
  • :dossier: telechargement
    
    • zip.rar
      
    • tableau.package
      
    
    
  • :page: index.html
    
  • :page: mes_créations.html
    
  • :page: coup_coeur.html
    
  • :css: design.css
    
  
  

Créer un lien d'une page à l'autre.

Lorsque l'on rentre l'adresse de votre site, c'est automatiquement le feuille appelée index qui apparait.
A savoir qu'entre une feuille index.html et index. php, c'est la feuille .html qui apparait en premier.

Ceci est la balise qui permet de créer un lien:

Code:

<a href="lien"></a>

Illustration: Je vais créé un lien dans ma feuille index vers ma feuille mes_créations.html

Le lien apparait tel qu'il est écrit:

Code:

<a href="mes_creations.html"></a>

Ce qui sert de lien c'est la phrase "Ici mes créations"

Code:

<a href="mes_creations.html">Ici mes création</a>

Ce qui sert de lien c'est l'image (qui se trouve dans mon dossier image)

Code:

<a href="mes_creations.html"><img="images/image1.png" /></a>

Remarques:

• Le lien se trouve toujours entre les guillemets ""
  
• Pour clore une formule il y a toujours dans la seconde partie ce symbole </img>

Conseil:

Le nom que je donne à mes fichiers:

• Pas d'accent
  
• Pas d'espace, utilisez _
  
• Faites bref et explicite
  
• Organisez vos feuilles: codez avec des chiffres vos pages par catégories, vous vous y retrouverez mieux (conseil d'Idjya que j'ai suivi et ça change la vie quand on a plus de 80 pages)

Créer un lien pour télécharger un fichier

Ça va être rapide dans la mesure où c'est aussi simple que ce que l'on a vu précédemment.
Que votre fichier soit hébergé sur votre site ou sur un site tierce, le codage va être le même et en plus petit veinard, c'est le même que celui qu'on a vu précédemment.

Mais avant tout je voudrai attirer votre attention sur le codage du lien en fonction de l'endroit où se trouve votre document.

Cas1: le fichier se trouve au niveau de la racine (comme dans notre exemple les pages)

Code:

<a href="lien"></a>

Cas2: le fichier se trouve dans un dossier

Code:

<a href="dossier/lien"></a>

Dites vous pour vous repérez qu'après les guillemet on prend pour postulat de départ que l'on est à la racine. Si votre fichier se trouve dans un dossier alors vous devez indiquer son nom puis le fichier vers lequel le lien doit pointer.

Illustration:

Je créé un lien vers mon fichier zip. rar

Code:

<a href="telechargement/zip.rar"></a>

Je créé un lien vers mon fichier tableau.package et je remplace le lien par du texte:

Code:

<a href="telechargement/tableau.package">Télécharger ici la merveille des merveilles</a>

Si votre fichier est hébergé sur un serveur alors vous coller entre les "" l'adresse qui vous a été donnée

Vous avez tout compris?

Voici un micro exercice pour vérifier.
J'ai mon fichier poeme.doc qui est dans mon dossier ecriture. Ce dossier ecriture est dans le dossier creation qui est au niveau de la racine. Mon texte qui remplace le lien est: Télécharger mon poème

Ça nous donne ça:

• /
  
  • :dossier: creation
    
    • :dossier: ecriture
      
      • poeme.doc
        
      
      
    
    
  
  

Quel est le code pour créer un lien vers le fichier poème.doc?
Réponse:

Spoiler:

Créer un lien vers une section de votre page

Nous allons nous servir pour l'exemple de la page coup_coeur.html

Cela fait quelques temps que vous avez votre site et vous avez eu pas mal de coup de coeur, donc la page est longue et vous souhaitez créer un petit sommaire afin que vos visiteurs aillent droit à l'essentiel!
Comme vous êtes organisés vous aviez mis avant chaque nouveau coup de coeur un titre indiquant le date: Coup de coeur Février, Coup de coeur Mars, etc...

Chaque ligne du sommaire doit renvoyer au titre!

Un titre:

Voici ici le code pour insérer un titre:

Code:

<h1></h1>

H est le code pour le titre en ce qui concerne le numéro cela correspond au niveau (hiérarchie) et renvoie à un style particulier .
Ainsi il peut y avoir des titre h1, h2, h3 sachant que le pus important des niveaux est le 1.
Il y a un style automatique pour chaque niveau de titre, vous pouvez également les paramétrer dans votre feuille de style mais c'est une autre histoire...

Créer un lien infratexte dans la même page:

Le lien infratexte c'est justement un lien à l'intérieur d'une page.

Etape 1: coder le titre

On va mettre ce que l'on appelle une ancre en mettant une balise au niveau du titre pour que le lien sache ce à quoi il mène!
Voici notre titre à la base:

Code:

<h2>Coup de coeur Février</h2>

A présent je rajoute ma balise:

Code:

<a name="fevrier"><h2>Coup de coeur Février</h2></a>

Etape 2: créer le lien qui mène à ma balise

Je vais écrire cette phrase "Voir les coups de coeur de février" qui sera mon lien vers la balise

Code:

<a href="#fevrier">Voir les coups de coeur de février</a>

Créer un lien infratexte dans une autre page:

Imaginons que sur votre page index, vous créez le best of des coups de coeur. Vous voulez créer un lien qui mènera directement au coup de cœur de février qui restera gravé à jamais dans votre mémoire!

Voici dons le code du lien qui permet depuis la page index.html d'atterrir directement dans la page coup_coeur.html au niveau de la balise fevrier.

Code:

<a href="coup_coeur.html #fevrier">Février for ever</a>

Vous avez tout compris?

• /
  
  • :dossier: creation
    
    • :dossier: ecriture
      
      • sommaire_poeme.html
        
      • poeme.html

Dans votre page poème vous avez:
Ode à mon chat
La pâte de coing
Mes sims et moi

Vous devez transformer les intitulé en titre de niveau 3
Vous devez céer un lien dans votre page sommaire_poeme.html qui vous mènera directement au poème Mes sims et moi

Quel est le code pour le titre ET pour le lien qui menera à celui-ci?
Réponse

Spoiler:

J'espère que c'est clair.
Pour répondre aux question prenez un bout de papier et un stylo parce que de tête c'est moins facile

N'hésitez pas si vous avez des questions et n'oubliez pas que ce que j'ai appris c'est grâce au  Site du zéro
N'hésitez pas a lire les tutos  

Edit pour rajouter le lien comme le suggère Idjya

Idjya a écrit:

La touche _ (le 8 en haut du clavier et non sur le pavé numérique parce que j'en connais qui cherche encore et je ne vise personne) se nomme "underscore" (toutes les touches ont un nom connus de la plupart des utilisateurs de clavier, il est bon de les connaîtres, ça évite les "C'est quoi [Shift]?"...)

Plus les noms des pages sont courts et plus le chargement de la page se fait rapidement, c'est pourquoi j'ai conseillé à Fu de diminuer le nom de ses pages et de chiffrer toutes les images (les miennes pour ma chronique des Clarens sur mon site se nomment par exemple cla_01.jpg). Ce n'est qu'un exemple.

De plus, si vous donnez toujours le même style de nom à vos pages, vous aurez plus de facilité à écrire les codes pour les liens que Fuyaya démontre dans ce tutoriel!

Merci Fu!

Ah ! Ben merci ^^

Ça démêle beaucoup dans les méandres de l'internet ^^

Super tuto! Tres bien expliqué!
Je n'aurai pas pu faire mieux lol
Bravo fu!!

Merci pour ce super tuto Fu'. Il va mettre très pratique pour les listes et mon blog.

Merci beaucoup Fuyaya pour ce tuto.
Je viens de l'utiliser pour la liste grunge et je crois que j'ai réussi. C'est magique