• Tableaux à angles arrondis
• Créer une barre de scroll colorée
• Les Roll-Over
• Créer un calque
• Créer un tableau
• Créer un calque
• Créer un tableau
• Créer un calque
• Créer un tableau
• Créer un calque
• Créer un poulet
• Créer un calque
• Créer un tableau
• Créer un formu



• Monter une page
• Déplacer une image
• Manipuler un calque






Pages précédentesRetour au sommairePages suivantes
  Les attributs de la balise <a>
  Les liens internes ( même page ) : les ancres
  Les liens internes ( pages différentes )
  Les liens externes
  Les liens E-mail
  Tableau récapitulatif des différents liens

 1. Les attributs de la balise <a> 

La balise <a> permet d'établir un lien hypertexte à l'intérieur même de votre document, vers un autre fichier HTML ou encore vers l'extérieur, c'est à dire vers un autre site Web.
Il s'agit là de l'essence même de l'Internet.
Nous verrons qu'il est possible d'établir un lien hypertexte à partir d'un ou de plusieurs mots mais également à partir d'images.

Les liens hypertextes sont créés à l'aide de la balise <a> qui signifie "Anchor" ( ancrage ).
La balise ancrage débute toujours avec <a> puis elle est suivie de l'attribut principal HREF , c'est à dire du nom du fichier ou de l'URL vers laquelle vous voulez créer le lien.

Après avoir refermé la commande ancrage initiale, vous saisissez le texte qui devra apparaître sous forme de lien hypertexte et vous clôturez la balise avec </a>

Voici un petit exemple :

<A HREF="fichier_exemple.htm">Cliquez ici !!</A>

Nous avons créés un lien depuis la page liens.htm où nous sommes actuellement vers la page fichier_exemple.htm, qui se trouve dans le même dossier que le fichier liens.htm (ce qui explique que l'on saisisse uniquement le nom du fichier dans l'attribut HREF.

démonstration :  Cliquez ici !!

Notez que normalement les liens hypertextes sont reconnaissables à leurs soulignements même si ce n'est pas systématique.
 
Top
 

L'attribut TARGET:

Cet attribut permet de renseigner la source d'un cadre (frame) comme document.

Ex : Vous avez un jeu de cadre composé de deux frames .
Vous donner le nom "menu" à votre frame gauche et vous nommez la frame principale, "centre".
Voici, à travers un petit graphique ce que cela représente :

Si vous souhaitez mettre un lien dans le menu de gauche, vous devez spécifier le nom de la frame de destination, dans l'exemple, TARGET="centre".

<A HREF="frame_centrale.htm" TARGET="centre"><A>

Top
 
Nous aborderons plus en détails les autres propriétés de l'attribut TARGET à travers l'étude des "Frames" où Cadres en Français.

Vous l'avez peut être observé à travers l'exploration de certains sites : 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.

Pour que vos sites s'ouvrent dans une nouvelle fenêtre, il vous faut ajouter une nouvelle propriété dans l'attribut TARGET.

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

<A HREF="fichier_exemple.htm TARGET="_blank">Cliquez ici !!</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", c'est à dire une nouvelle fenêtre du navigateur.

Attention : devant le mot blank il s'agit d'un "underscore" et non d'un simple tiret !!

Nouvelle démonstration avec ouverture dans une nouvelle fenêtre:  Cliquez ici !!

 
Top
 
Il existe deux types de liens internes :
  • Les liens qui permettent de se déplacer à l'intérieur de la même page HTML, sans que le visiteur ne soit obliger d'utiliser la barre de défilement ce qui est contraignant surtout lorsque les pages sont volumineuses

  • Les liens internes qui pointent vers d'autres fichiers situés ou non dans des répertoires différents.

 2. Les liens internes (ancres) : 

Les ancres permettent aux visiteurs de vos pages de se déplacer à l'intérieur d'une même page sans pour autant avoir à utiliser les barres de défilements verticales.

Le visiteur va donc cliquer sur un lien qui l'amènera à l'endroit où a été positionnée l'ancre.
Il faut pour cela réaliser deux étapes :

  • Définir la cible du lien, c'est à dire l'ancre.
    Il vous suffit de donner un nom à votre ancre, à l'intérieur d'une balise liens hypertextes <A></A>.

    Exemple : <A name="table"></A>

    Cette balise indique juste au navigateur l'endroit où se trouve l'ancre. Il s'agit d'une balise invisible.
    Attention au nom de votre ancre : celui-ci ne doit ni contenir d'espaces, ni de caractères spéciaux ou accentués.

  • Associer un lien à une ancre.

    Dans votre liens hypertexte, vous indiquez le nom de l'ancre.

    Exemple : <A HREF="#table">Retour à la table des matières</A>

    Vous pouvez tester en cliquant sur ce lien : Retour à la table des matières
 
Top
 


 3. Les liens internes ( page différente ) : 

Il existe plusieurs types de liens internes vers des pages différentes :

  •  Liens vers une page située dans le même répertoire

    Exemple :<AHREF="nom_de_fichier.htm">Cliquez ici</A>

    Aucun problème dans cet exemple, il suffit de saisir le nom du fichier cible;
    Attention : n'oubliez jamais les " " entre le nom de votre fichier et n'insérer jamais d'espace ni de caractères spéciaux ou accentués.

  •  Liens vers une page située dans un répertoire différent :

    Exemple : <A HREF="introduction/nom_de_fichier.htm">Cliquez ici</A>

    Le fichier cible se situe dans le dossier "introduction"; le fichier source où vous avez insérez votre lien se situe lui un niveau en dessous.

    Dans notre exemple, le fichier source avec le lien s'intitule "index.htm".

    Illustration graphique :   

    Si par contre, on souhaite réaliser l'inverse, c'est à dire insérer un lien dans la page "nom_de_fichier.htm qui pointe vers la page "index.htm", on écrira alors :

    <A HREF="../index.htm">Cliquez ici</A>

    Les " ../ " signifie que l'on remonte d'un niveau dans l'arborescence de vos répertoire
 
Top
 
  •  Liens dans un même répertoire et vers une ancre d'une autre page :

    Exemple : <A HREF="contact.htm#top">Cliquez ici</A>

    Dans cet exemple, on a défini une ancre, nommée "top" à l'intérieur du fichier "contact.htm".
    Depuis quel(s) fichier(s) peut-on insérer le lien mentionné ci-dessus ?

    Cochez la bonne réponse et cliquez sur le bouton "Vérifiez" :

    Depuis les fichiers "accueil.htm", "music.htm" et "nom_de_fichier.htm"
    Depuis le fichier "index.htm"
    Depuis les fichiers "infos.htm", "loisirs.htm" et "travail.htm"
    Je ne sais pas..!

        


  •  Liens dans un répertoire différent et vers une ancre d'une autre page :

    Cas pratique :

    Vous souhaitez insérer un lien dans la page " music.htm " vers le fichier " loisirs.htm " et au niveau de l'ancre, nommée " mp3 ".
    Par rapport à l'arborescence ci-dessus, cochez la bonne réponse parmi ces différentes possibilités :

    <A HREF="loisirs.htm">#mp3</A>
    <A HREF="../musique/loisirs.htm#mp3">Vers la page des loisirs</A>
    <A HREF="musique/loisirs.htm" anchor="#mp3">Vers la page des loisirs</A>
    Je ne sais pas..!

        
 
Top
 


 4. Les liens externes 

Les liens externes possèdent la même syntaxe que les liens internes, c'est à dire qu'ils sont inclus dans la balise <A HREF="..."></A>.

La seule différence réside dans le fait que les liens sont rédigés en absolu, c'est à dire avec une adresse complète.

Selon le protocole utilisé, ces adresses absolues diffèrent :

 
Top
 


 5. Les liens E-mail 

Vous pouvez créer un lien e-mail pour que la messagerie paramétrée par défaut du client se lance automatiquement.

Plusieurs type de liens e-mail sont paramétrables :
  • Lien e-mail simple, sans sujet :

    <A HREF="mailto:nom@provider.fr">Contactez-moi</A>.
    A l'intérieur de la balise <A HREF="">, vous indiquez votre adresse e-mail.


  • Lien e-mail avec sujet :

    Si vous souhaitez recevoir votre message avec le champ sujet ( subject ) prérenseigné, vous pouvez utiliser l'attribut ?subject= :

    <A HREF="mailto:nom@provider.fr?subject=demande d'information">Contactez-moi</A>.


  • Lien e-mail avec sujet et corps du message :

    Vous pouvez, en plus du sujet, ajouter du texte dans le corps du message afin qu'une partie de texte apparaisse systématiquement dans les messages que vous recevez.

    <A HREF="mailto:nom@provider.fr?
    subject=demande d'information&
    BODY=Voici
    les critiques concernant votre site : ">
    Contactez-moi</A>
    .


  • Lien e-mail envoyé à deux personnes, dont une en copie (cc) ou en copie cachée (cci ou bcc) :

    <A HREF="mailto:nom@provider.fr?cc=nom2@provider.fr">
    Contactez-moi</A>
    .

    <A HREF="mailto:nom@provider.fr?bcc=nom2@provider.fr">
    Contactez-moi</A>
    .
 
Top
 


 6. Tableau récapitulatif des liens : 

LiensExemples
Ancres Liens internes départ (même page) <A href="#haut">
Liens internes arrivée (même page) <A name="haut">
Liens internes vers une page différente <A href="index.htm">
vers une page et un dossier différents <A href="intro/index.htm>
Liens externes Liens vers un serveur HTTP <A href="http://www.clubic.com">
Liens vers un serveur FTP <A href="ftp://ftp.microsoft.fr">
Liens
E-mail
Liens externes e-mail <A href="mailto:nom@provider.fr">
Liens externes e-mail avec sujet <A href="mailto:nom@provider.fr?
subject=bonjour">

Top

 
Pages précédentesRetour au sommairePages suivantes
 
Recherche par
mots-clés :

• Les feuilles de style
• Les popups
• Des liens spéciaux





• Test HTML
• Test DHTML
• Test Javascript





• Scripts dhtml