Guidegratuit

GUIDEGRATUIT.COM

Apprenez à créer un site en HTML simplement et progressivement...

Accueil

Introduction importante
Le HTML c'est quoi ?
Notre projet
Equipez vous

Votre première page
Gérer le texte
Mise en page
Images
Tableaux
Liens
Couleurs
Formulaires
Hébergeurs de sites
Mise en ligne FTP
Frames
Autres cours

Résumé des balises
Le dico du site
Vos questions (F.A.Q.)
Le Forum
Liens utiles

Contact webmaster
Copyright

LES LIENS

Comment peut on parler de HTML sans aborder assez rapidement la notion de liens ?
Réponse : on ne peut pas :) ! Alors voici le premier cours sur la création de liens hypertextes.

Il existe en fait plusieurs types de liens. Nous apprendrons aujourd'hui :

- les liens externes : comment faire un lien vers un autre site que le sien.
- les liens internes : comment passer d'une page à une autre dans un même site (comme pour un sommaire par exemple).
- les liens mails : comment faire un lien vers une adresse e-mail.

Ces liens peuvent être accessibles en cliquant sur du texte ou des images. Nous apprendrons également ces deux façons de faire...

Les liens externes :

Commençons par faire un lien de votre page vers un autre site car il s'agit d'une action simple et rapide à apprendre...

Présentons maintenant le type de code qui va vous faire peur (pour rien) :

<A HREF="http://www.guidegratuit.com">Cliquez ici pour aller sur Guidegratuit</A>

Reprenons maintenant l'exemple du dessous et détaillons le pour mieux l'assimiler.
Tout d'abord, on informe le navigateur que l'on va lui donner un ordre qui concerne un lien par l'ouverture de notre balise <A HREF= ...

En effet, A est l'abréviation de Anchor qui signifie Ancre en anglais, nous posons donc l'ancre d'un site sur notre page...
HREF signifie Hypertext Reference (la reference de notre lien hypertexte en français) nous permet d'indiquer que l'URL du lien hypertexte va être donnée....

Ensuite on utilise ="http://www.guidegratuit.com" pour donner la référence exact du lien et on ferme la balise d'ouverture de lien !

Après cela, on indique le texte qui servira de lien : dans notre exemple "Cliquez ici pour aller sur Guidegratuit".

Enfin, pour dire que le texte de lien est fini on insère la balise de fermeture de lien ancre </A>

Les erreurs les plus fréquentes quand on créé un lien externe sont :
- d'oublier les guillemets qui encadre le lien
- d'oublier le http:// devant l'URL du site.
Si un de vos liens ne fonctionne pas, vérifiez tout d'abord c'est 2 points très importants !

Allons-y et insérons ensemble des liens hypertextes dans une page...
Pour cette exercice, nous ne prendrons pas notre CV mais une nouvelle page dans laquelle vous allez indiquer vos sites favoris.

L'exercice est donc le suivant :

1. Créez une page HTML classique (comme dans nos premiers cours).
2. Insérez votre liste de liens favoris en les séparants par un saut de ligne.
3. Enregistrez le fichier sous le nom "mesliens.html" (sans espace surtout je ne cesserai de vous le rappeler !)

Essayez de le faire seul. Si cela ne marche pas vous pouvez vous inspirez du modèle ci-dessous.

<HTML>
<HEAD><TITLE>Mes liens</TITLE></HEAD>
<BODY>

Voici la liste de mes sites préférés :
<P>
<A HREF="http://www.guidegratuit.com">Guidegratuit</A> : un site pour apprendre le HTML.
<P>
<A HREF="http://www.pagepardefaut.com">Pagepardefaut</A> : site de jeux online.
<P>
<A HREF="http://www.portailgratuit.com">Portailgratuit</A> : sélection des meilleurs sites.

</BODY>
</HTML>

Ca fonctionne ? Parfait... Que dire de plus si ce n'est "continuez le cours"...

La "cible" de vos liens :

Vous l'avez peut être observé votre liste, faite dans l'exercice précédent, a un gros défaut : quand vous cliquez sur un lien, la page est remplacée par le site en question !
Ce qui serait beaucoup mieux, vous en conviendrez, ce serait que les sites s'ouvrent dans une autre fenêtre du navigateur afin de garder votre liste de liens accessibles en arrière plan.
Que ceux qui ont compris passent au paragraphe ci-dessous et que les autres (ou les curieux) cliquent ici pour comprendre la différence entre un lien s'ouvrant dans la même fenêtre ou dans une fenêtre différente.

Pour que vos sites s'ouvrent dans une nouvelle fenêtre il vous suffira de le préciser au navigateur ! ................ oui ? Des questions ?.... Aaaaah comment faire ? Eh bien en ajoutant une simple propriété supplémentaire nommée TARGET (pour "cible" en français). Il existe pas mal de cible possible pour un lien mais nous ne verrons aujourd'hui qu'une seule et unique cible et nous aborderons les autres lors d'un cours sur l'utilisation des frames ("cadres" en français).

Le code pour l'ouverture d'un lien dans une nouvelle fenêtre sera :

<A HREF="http://www.portailgratuit.com" TARGET="_blank">Cliquez ici pour ouvrir Portailgratuit dans une nouvelle fenêtre</A>

Le simple ajout de TARGET="_blank" ("blank" = "page vierge" en français) a indiqué au navigateur qu'il devait ouvrir le lien indiqué dans une cible nommée "_blank" (N.B. le signe _ est un underscore et ne doit pas être confondu avec le signe - tiret) et donc ouvrir une nouvelle fenêtre du navigateur...

Le signe _ est obligatoire pour le TARGET="_BLANK"! Ne l'oubliez donc pas !

Reprenez votre l'exercice précédent et rajouter l'attribut TARGET="_blank" dans vos balises de liens... Je ne vous fais pas l'affront de vous donner le code final...

Les liens internes :

Evidemment, il est possible de faire des liens internes à un site afin de pouvoir passer d'une page à une autre ou de créer un sommaire. Ce style de liens est aussi simple que les liens externes mais vous devrez bien le comprendre puisque vous l'utiliserez surement très régulièrement (on a rarement une seule page sur son site).

Pour faire un lien d'une page de son site à une autre le code est le suivant :

<A HREF="nomdelapage.html">cliquez ici pour aller à la page suivante</A>

Vous contastez que le code est beaucoup plus court et que vous n'avez à indiquer que le nom de votre page HTML (avec l'extension !).

Cet exemple n'est valable que si toutes vos pages sont dans le même repertoire (ce que je vous conseille de faire au début) !
En effet, si vos pages sont dispersées dans plusieurs répertoires vous devrez précisez le chemin d'accès de chaque page l'une par rapport à l'autre ce que nous verrons dans un cours spécialement consacré à l'organisation de votre site.

Dans notre exercice nous allons faire une page sommaire qui vous permettra d'accéder soit à votre C.V. (fichier cv.html) soit à votre liste de liens (que vous venez de créer).
1. Prenez donc votre bloc-notes et créez une nouvelle page avec les deux liens (un vers cv.html et un vers mesliens.html)...
2. Sauvegardez cette page sous le nom "sommaire.html" dans le même repertoire que vos deux autres pages (si vos pages n'étaient pas placées ensemble : regroupez les dès maintenant...)

Voici le résultat pour les moins courageux :

<HTML>
<HEAD><TITLE>Sommaire</TITLE></HEAD>
<BODY>

<B>SOMMAIRE :</B>
<P>
<A HREF="cv.html">Cliquez ici pour accèder à mon C.V.</A> : il est beau n'est ce pas ?
<P>
<A HREF="mesliens.html">Cliquez ici pour voir mes liens favoris</A> : une petite liste de mes sites en fait.

</BODY>
</HTML>

Cliquez ici pour voir le résultat de cette page...
Cette page vous sera très utile pour voir vos différents travaux. Je vous conseille d'y ajouter régulièrement des liens vers vos pages HTML...
Par la suite, pour nos cours, nous réutiliserons cette page donc conservez la précieusement.

Les liens mail :

Pour éviter à vos visiteurs de recopier votre adresse mail, il est possible de faire un lien vers votre adresse. Ainsi vous permettrez d'un clic de souris l'ouverture du gestionnaire de mail et l'apparition d'un nouveau message à votre adresse.

Voici le type de code à utiliser :

<A HREF="mailto:votrepseudo@votredomaine.com">cliquez ici pour m'envoyer un mail</A>

et voici le résultat :

cliquez ici pour m'envoyer un mail

Vous constatez que le code est assez similaire aux liens internes ou externes avec comme seule variation le code se trouvant entre les guillemets.
MAILTO: est la contraction de "send a mail to" (envoyer un e-mail à). Il est important de noter également l'ajout des ":" qui précède l'adresse mail...

ASTUCE : Il est également possible de définir le sujet du mail que la personne va vous envoyer... Pour cela utiliser l'attribut suivant :

<A HREF="mailto:votrepseudo@votredomaine.com?subject=ici votre sujet">cliquez ici pour m'envoyer un mail</A>

et voici le nouveau résultat :

cliquez ici pour m'envoyer un mail

Pour tester ce nouveau code, reprenez votre fichier cv.html et ajoutez un lien mail vers votre adresse. En passant pour ceux qui n'était pas là ou qui ont perdu le fichier le revoici :

<HTML>

<BODY>
<CENTER>
<H2>C.V. Interactif</H2>
<HR WIDTH=25%>
</CENTER>

<TABLE BORDER="0" WIDTH="90%">
<TR>
<TD><I>Pierre</I> <B>Durand</B><BR>
15, rue Manin - 75019 Paris<P>
Téléphone : 01.42.22.22.22<BR>
E-mail : <A HREF="mailto:pierre@provider.com">pierre@provider.com</A></TD>
<TD ALIGN="RIGHT"><IMG SRC="photocv.jpg" WIDTH="179" HEIGHT="185"></TD>
</TR>
</TABLE>

<P>

<TABLE BORDER="1" WIDTH="90%" CELLPADDING="5">
<TR><TH COLSPAN="3">Formation</TH></TR>
<TR><TD>1968</TD><TD>Bac B</TD><TD>Diplôme obtenu au lycée Pernot, Dijon.</TD></TR>
<TR><TD>1970</TD><TD>Deug de psychologie</TD><TD>Diplôme obtenu à la Faculté Duchemin, Versailles.</TD></TR>
<TR><TD>1973</TD><TD>Licence de Lettres Modernes</TD><TD>Diplôme obtenu à la Faculté Colbert, Toulouse.</TD></TR>
</TABLE>

</BODY>
</HTML>

Le mieux à faire est, comme dans l'exemple ci-dessus, d'utiliser comme texte de lien l'adresse e-mail elle même... Ainsi même si le lien ne fonctionnait pas, pour une raison X ou Y, l'utilisateur aura tout de même la possibilité de recopier votre adresse mail.

En clair, on preferera donc votrepseudo@votredomaine.com à cliquez ici pour m'envoyer un mail même si le résultat est le même...
Idem pour les liens vers des sites externes : il vaut mieux Cliquez ici pour aller sur www.guidegratuit.com que Cliquez ici

Des liens sur des images :

Pour insérer un lien sur une image il suffit d'encadrer la balise image avec la balise lien.

Ainsi si nous voulions insérer le lien mail sur la photo du cv il faudrait utiliser le code suivant :

<A HREF="mailto:pierre@provider.com"><IMG SRC="photocv.jpg" WIDTH="179" HEIGHT="185"></A>

Eviter les bordures :

Attention tout de même car si nous insérons ainsi un lien sur une image celle-ci aura un petit cadre bleu qui n'est pas très beau...
Cette bordure permet de repérer une image qui sert de liens mais vous pouvez la supprimer en ajoutant simplement l'attribut BORDER="0" à l'image.
Le nouveau code sera donc :

<A HREF="mailto:pierre@provider.com"><IMG SRC="photocv.jpg" BORDER="0" WIDTH="179" HEIGHT="185"></A>

Voici d'ailleurs le résultat d'un lien image avec et sans bordure :

Vous voyez que c'est beaucoup mieux sans !

Donner un nom au lien image :

Peut être l'avez vous remarqué mais, sur la plupart des sites, en restant quelques secondes sur une image, vous voyez apparaitre une petite boîte d'information avec un petit texte. Vous n'avez jamais remarqué ? Ah bon ? Eh bien laissez deux secondes le curseur de votre souris au dessus de l'image ci-dessous :

Vous avez-vu ? Eh bien c'est très simple à faire, il suffit d'ajouter l'attribut ALT dans la balise image ce qui donne :

<a href="mailto:webmaster@guidegratuit.com"><img src="sources/liens/monimage.gif" border="0" width="30" height="28" ALT="ecrivez moi vite"></a>

Cet attribut a 2 intérêts : il affiche un texte lors du "passage prolongé" de la souris mais il affiche également ce texte si l'image ne s'affiche pas pour une raison ou une autre (problème de serveur, suppression de l'affichage des images par l'utilisateur, temps de connection trop long...).
En clair, même si l'utilisateur ne peut ou ne veut pas voir votre image il verra votre texte !

Vous savez maintenant la majorité des choses à savoir sur les liens... Mais nous en reparlerons surement dans de prochains cours ! En attendant, travaillez bien mais faites des pauses de temps en temps c'est bon pour les yeux :))))

Un lien externe c'est : <A HREF="http://www.nomdusite.com">Accès au site nomdusite.com</A>

Un lien interne c'est : <A HREF="mapage.html">Aller sur ma page</A>

Un lien mail c'est : <A HREF="mailto:pseudo@provider.com">Cliquez pour m'écrire sur pseudo@provider.com</A>

Un lien sur une image c'est : <A HREF="http://www.nomdusite.com"><IMG SRC="logodusite.jpg" BORDER="0" WIDTH="179" HEIGHT="185"></A>

Un lien sur une image avec une bulle d'information c'est : <A HREF="http://www.nomdusite.com"><IMG SRC="logodusite.jpg" BORDER="0" WIDTH="179" HEIGHT="185" ALT="votre texte pour information"></A>