Perfectionnement - 18

Les chemins

Le chemin permer de localiser un élément par rapport au document sur lequel on trvaille. Ils sont utiliser dans les balises de liens et dans les balises d'images. On distingue trois types de chemins, nous avons déjà rencontrés les deux premiers.

  1. Les chemins externes au serveur :
    Ce type est utilisé dans les liens vers d'autres sites ou pour localiser des images qui sont sur d'autres serveurs. On les appelle aussi chemins absolus. Ils sont du type :

    <A HREF="http://www.univ-montp3.fr">élément cliquable</A>

  2. Les chemins intenes au serveur :
    Ce type est utilisé dans les liens à l'intérieur de son site ou pour localiser ses images.

    <A HREF="sl208/index.html">élément cliquable</A>

    ou

    <IMG SRC="images/logofacbleu.gif">

  3. Les chemins internes à la page :
    Ce type est utilisé pour réaliser des liens à l'intérieur d'une même page.
    Prenons par exemple, la réalisation du catalogue de nos images.
    Nous allons d'abord rédiger une page ("catalogue.html" dans notre dossier) qui contient l'ensemble des images que nous venons d'utiliser.

    <HTML>
    <HEAD>
    <TITLE>Catalogue d'images</TITLE>
    </HEAD>
    <BODY BGCOLOR="#FFFFFF">
    <H3>
    <CENTER>Catalogue des images</CENTER>
    </H3>
    <HR>
    <H4>Crocodiles</H4>
    <IMG SRC="images/croco1.jpg" WIDTH="290" HEIGHT="170" ALT="Crocodiles">
    <P>
    <HR>
    <P>
    <H4>Bassin</H4>
    <IMG SRC="images/fontomb.jpg" WIDTH="292" HEIGHT="162" ALT="Bassin">
    <P>
    <HR>
    <P>
    <H4>Logo UPV</H4>
    <IMG SRC="images/logofacbleu.gif" WIDTH="181" HEIGHT="111" ALT="Logo UPV">
    <P>
    <HR>
    <P>
    <H4>Logo N&icirc;mes</H4>
    <IMG SRC="images/logonimes.gif" WIDTH="70" HEIGHT="63" ALT="Logo N&icirc;mes">
    <P>
    <HR>
    </BODY>
    </HTML>

    Ensuite, nous allons insérer en début de page, juste après le titre, une liste qui fera office de menu interne. Nous obtenons ceci :

    Nous allons maintenant "marquer" les parties internes du document. Elles sont quatre, une pour chque image. Pour cela nous utilisons la balise <A NAME="nom">titre de partie</A>

    Par exemple :

    ...
    <P>
    <HR>
    <P>
    <H4><A NAME="bassin">Bassin</A></H4>
    <IMG SRC="images/fontomb.jpg" WIDTH="292" HEIGHT="162" ALT="Bassin">
    <P>
    <HR>
    <P>
    ...

    La dernière étape sera de rajouter les liens dans le menu par exemple : <A HREF="#bassin">Bassin</A>

    Rajoutez l'ensemble des liens
    Comment faire pour obtenir à côté de chaque image, un lien qui renvoit sur le menu ?
    Réalisez cette manipulation.

revenir suite...