 |
|
|
|
|
||
|
------------------------------------------------------------------------------------------------------------------------------------------------
6. Liens
Utilisation : Un lien permet de relier une pages à une autre ou à nimporte quel autre type de fichier, à travers un lien texte, image ... Mais le xHtml à encore d'autre ressources cachées. Vous pouvez par exemple faire un lien dans la meme page ce qui va vous permettre de déplacer votre visiteur pour exemple au milieu d'une page.page ou vers un autre type de fichier.
6.1) Lien vers une page en local
Lorsque vous reliez entre elle les pages de votre site et que ces pages se trouvent sur le meme serveur, c'est-à-dire dans le meme comptre ftp, il est possible de lier vos pages entre elle sans indiquer toute l'adresse en entier de la page.
Syntaxe :
<a href ="parcours/nom_de_la_page.html"/>Texte_de_lien<a/> |
- parcours : le parcours de votre fichier
- nom_de_la_page.html : le nom de votre fichier
Exemple :
Prenons un exemple. Disons que nous avons un fichier " page.html" et un dossier "images" ou se trouve notre une image nommée "ciel.jpg"
Notre but est de faire pointer un lien se trouvant sur la page "page.html" votre l'image "ciel.jpg" se trouvant dans le dossier "image". Suivons ce raisonnement : nous nous déplaçons de la racine ou se trouve notre page jusqu'au dossier ou se trouve l'image.
Donc le parcours de l'image est : "images/ciel.jpg"
Le code à utiliser serait dans ce cas : (toujours à placer entre les balises <body> et </body> à l'endroit ou on désire voir apparaitre le lien)
<a href ="images/ciel.lpg"/>Image<a/> |
6.2) Lien vers un site extérieur
Dans le point précédent (6.1) nous avons appris à établir des liens à travers les pages en local de notre site. Cette fonctionnalité permet également de faire un lien un fichier ou une page d'un autre site internet. Le code àutiliser reste le meme, il faut seulement ajouter le nom de domaine à la racine du lien.
Exemple :
Prenons un exemple. Disons que nous avons un fichier " page.html" . Sur cette page nous voulons placer un lien qui pointe vers le site "http://www.computings.info/index.php". Pour le parcours du fichier nous alons placer le parcours "http://www.computings.info/index.php".
Notre but est de faire pointer un lien se trouvant sur la page "page.html" votre l'image "ciel.jpg" se trouvant dans le dossier "image". Suivons ce raisonnement : nous nous déplaçons de la racine ou se trouve notre page jusqu'au dossier ou se trouve l'image.
Le code à utiliser serait dans ce cas :
<a href ="http://www.computings.info/index.php"/>Voir le site <a/> |
6.3) Lien vers un maillot email
Vous n'avez pas encore tout vu de la puissance de l'xHtml. Disons par exemple que vous voulez donner à vos visiteurs la possibilité de de vous envoyer un e-mail (message électronique), en ouvrant un fenetre "Outlook" à travers un lien Html sur la page.
Syntaxe :
<a href ="maillot:nom@email.com"/>Contacter<a/> |
- maillot:nom@email.com : l'adresse mail vers laquelle sera envoyé le message électronique
Exemple :
Disons que vous avez une page sur la quelle vous avez placé un lien pour que les visiteurs de votre site puissent vous envoyer dans votre boite au lettres un e-mail. Prenons le cas ou votre adresse e-mail est : "mail@mail.com".
Le code à utiliser serait dans ce cas :
<a href ="maillot:mail@mail.com"/>Contacter<a/> |
Eh oui, encore une autre fonctionnalité de l'xHtml. Nous vous inquiétés pas, ce ne sera pas la dernière. Après ce point, il vous sera possible de mettre des liens sur vos pages qui pointent vers une zone de votre page.
Disons que vous avez une zone de texte au milieu de votre page. Vous désirés donc envoyés vos visiteurs jusqu'à cette zone de texte. Rien de plus simple avec une ancre (lien pointant un zone de la page) tout ceci devient très simple.
Il y a 2 étappes différentes à suivre :
* Identifier la cible :
<a name ="titre"/>Texte_ou_image_pointée<a/> |
* Définier le lien :
<a href ="#titre"/>Texte_de_lien <a/> |
Exemple :
<html> </head> <p>Ici on peut trouver tout le texte de mon paragraphe<p/> |
N'oubliés pas qu'il est également possible de pointer un paragraphe se trouvant sur une différente pas que celle de notre lien. Dans ce cas nous utiliserons le code suivant :
<a href ="lien_de_la_page/#titre"/>Texte_de_lien<a/> |
6.5) Modifier l'apparence des liens
Il est possible de modifier l'apparence des liens en modifiant 2 critères différents :
Utiliser les balises <style> et </style> pour configurer l'aspect des liens. Ajouter le code entre les balises <head> et </head>
Syntaxe :
<style> a:link { color: #000000; text-decoration: none }
</style> |
Voici les signification des différents éléments :
Voici les configuration à faire :
------------------------------------------------------------------------------------------------------------------------------------------------
