LE GUIDE DU CODE HTML


HTML, balise, attribut, code et language, tag, tableau, liste, formulaire, lien,...

image
Source code HTML
image



Fotolia


LES LIENS HTML

SOMMAIRE
  • <a>
  • Image cliquable


  • Les "liens" sont certainement parmis les fonctions les plus importandes du HTML. Ils sont aussi appelés liens hypertexte. C'est ceux-ci qui créent l'interconnexion entre les pages, tissant en quelques sortes la toile du Web.

    <a...> : Cette balise seul sans attribut n'a pas d'effet, elle sera donc toujours associée à un ou plusieurs attribut
    href="..." : Spécifie la cible de destination
    Plusieurs méthodes de cible sont possible :
  • Vers une page externe au site
  • Vers une page interne au site
  • Vers une partie de la page en courante
  • Vers une adresse email

  • Le texte visible servant d'hyperlien est compris entre les balise <a...> et </a>.
    Voyez les exemples ci-dessous.
    Ex :
    <a href="http://www.guide-code-html.com/les-liens-html.php">Vers une page externe au site</A>
    Résultat :
    Vers une page externe au site


    Cliquez le lien ci-dessus et vous reviendrez sur cette même page. Remarquez que l'adresse cible contient l'adresse du site + celle de la page. Une autre adresse ainsi formée vous aurait conduit vers une page d'un autre site.
    Ex :
    <a href="les-liens-html.php">Vers une page interne au site</A>
    Résultat :
    Vers une page interne au site


    Cliquez le lien ci-dessus et vous reviendrez sur cette même page. Remarquez que l'adresse cible ne contient plus l'adresse du site mais, uniquement celle de la page. On reste sur le site.
    Ex :
    <a href="#sommaire">Vers un point d'ancre de cette page</A>
    Résultat :
    Vers un point d'ancre de cette page


    Cliquez le lien ci-dessus et vous resterez sur cette même page mais vous serez focusé sur le "sommaire". Remarquez que l'adresse cible ne contient plus l'adresse du site ni celle de la page, uniquement celle du point d'ancre. On reste sur le site et sur la page.
    href="mailto:..." : Il faut bien sûr ajouter l'adresse mail de destination. Lorsque le lien sera cliqué, votre programme client email.
    NB : Cette méthode pour mettre votre contact email à la disposition de vos visiteurs est certainement la plus simple à mettre en place. Mais c'est aussi la méthode qui mettra votre adresse email à la disposition des SPAMMER's, "la plaie du Web". Opter plutôt vers une méthode de formulaire dynamique qui cachera votre adresse email des robots scanners qu'utilisent malicieusement les spammer's. Bien qu'ils aient des outils de plus en plus puissant
    Ex :
    <a href="mailto:votremail@votre-site.com">Écrive-nous</A>
    Résultat :
    Écrive-nous


    Cliquez le lien ci-dessus et votre programme client mail s'ouvrira.
    name="..." :
    Crée un point d'ancrage
    Ex :
    <a name="ancrage"></A>Point d'ancrage<br><br>

    <a href="#ancrage">Vers le point d'ancre ci-dessus</A>
    Résultat :
    Point d'ancrage

    Vers le point d'ancre ci-dessus


    Cliquez le lien ci-dessus et vous serez focusé sur la ligne "Point d'ancrage".
    target="..." :
    Défini le mode d'ouverture du lien. Les valeurs possible sont : "_self", "_blank". Pour les autres valeurs "_parent" et "_top", elles sont liées aux frames et comme je suis farouchement opposé à utiliser les frames, je ne vous en parlerai pas ! Les frames sont très très mal considérées par Google ! A éviter !
    Ex :
    <a target="_self" href="les-liens-html.php">Ouvre la page dans la même fenêtre</A>
    Résultat :
    Ouvre la page dans la même fenêtre


    Cliquez le lien ci-dessus la page s'ouvrira dans le même fenêtre.
    Ex :
    <a target="_blank" href="les-liens-html.php">Ouvre la page dans la même fenêtre</A>
    Résultat :
    Ouvre la page dans une nouvelle fenêtre


    Cliquez le lien ci-dessus la page s'ouvrira dans une nouvelle fenêtre.
    Title="..." :
    Assigne un titre au lien.
    Ex :
    <a title="Vers cette page avec titre" href="les-liens-html.php">Vers cette page avec titre</A>
    Résultat :
    Vers cette page avec titre


    Passez la souris sur le lien ci-dessus et une boîte s'ouvrira avec le contenu de l'attribut "title".
    Compatibilité : IE Firefox
    Top of Page
    Image cliquable

    Vous trouverez ce chapitre séparé du précédent, tout en étant dans le domaine des liens.
    Vous verez que pour mettre en place cette fonction, vous aurez besoin de plusieurs balises.
    A l'inverse des autres descriptions, vous trouverez d'abord l'exemple avant que vous puissiez découvrir les différentes balises et attibuts que constituent cette fonction d'image cliquable.

    <a...> : Cette balise seul sans attribut n'a pas d'effet, elle sera donc toujours associée à un ou plusieurs attribut
    Ex :
    <map name="lien1">
      <area shape="rect" coords="0,21,145,34"
           href="#a" alt="<a>">
      <area shape="rect" coords="0,51,145,65"
           href="#href" alt="href=&quot;...&quot;">
      <area shape="rect" coords="0,66,145,78"
           href="#mailto" alt="href=&quot;mailto:...&quot;">
      <area shape="rect" coords="0,79,145,92"
           href="#name" alt="name=&quot;...&quot;">
      <area shape="rect" coords="0,93,145,104"
           href="#target" alt="target=&quot;...&quot;">
      <area shape="rect" coords="0,105,145,121"
           href="#title" alt="title=&quot;...&quot;">
      <area shape="rect" coords="0,130,145,154"
           href="#cliquable" alt="Image cliquable">
    </map>
    <IMG SRC="images-doc/lien-sommaire.gif" WIDTH="146"
           HEIGHT="157" ALT="Sommaire par image cliquable"
           USEMAP="#lien1" border="0">
    Résultat :
    <a> href="..." href="mailto:..." name="..." target="..." title="..." Image cliquable Sommaire par image cliquable
    <map...> : Cette balise encapsule les éléments (zones sensibles) d'une image réactive (cliquable).
    name="..." : Spécifie un mon pour la "map".
    <area...> : Élément (zone sensible) d'une image réactive (cliquable).
    href="..." : Spécifie la cible de destination (voir pour plus de détails).
    shape="..." coords="..." : Ces 2 attributs sont liés. En effet, selon l'attribut "shape" le contenu de l'attribut "coords" sera composé différemment.
    L'attribut "shape" correspond à la forme de la zone sensible : rect (rectangulaire), circ (cercle) ou poly (polygone).
    • shape="rect" : zone sensible de forme rectangulaire.
      "coords" sera constitué comme suit coords="x1,y1,x2,y2".
      "x1,y1" représentant le coin supérieur gauche et "x2,y2" le coin inférieur droit.
    • shape="circ" : zone sensible de forme circulaire.
      "coords" sera constitué comme suit coords="x,y,r".
      "x,y" représentant le centre du cercle et "r" le rayon de ce cercle.
    • shape="poly" : zone sensible de forme polygonale.
      "coords" sera constitué comme suit coords="x1,y1,x2,y2...xn,yn".
      Les "x,y" représentant les points des différents sommets du polygone.
    <img...> : Cette balise a déjà été décrite sur une autre page (voir pour plus de détails).
    usemap=""#..." : Spécifie le mon de la "map" avec laquelle l'image est associée.
    Top of Page
    image

    image
    Accueil - Code HTML - Littératures - Liens utils - Sites partenaires - Référencés par... - Contact - Plan du site
    image
      © Copyright 2007© VDC
      Tout droits réservés
      Date de création : 26/12/2007
      Dernière mise à jour : 05/01/2008
         image