Liens, mail

Liens/Links

    Lien Hypertexte.
     Partie de texte ou image permettant de déclencher une action dont la plus courante est le chargement d'une page html. Cette page peut se trouver sur le réseau Internet, (protocole Http), ou sur une mémoire de masse, (disque dur). Le lien peut aussi déclencher l'émission d'un e-mail, le chargement d'un fichier ou une action de programmation.
    Nous allons examiner dans cette page les liens pointant vers des pages html et la génération de messages, (e-mail).

2. Création d'un lien vers une page.

   Dans le courant de cette discussion l'expression "la page appelante" indique la page qui porte le lien hypertexte.
    Syntaxe : <a href="Adresse de la page"> Texte ou image </a>
    Dans le cas le plus courant l'adresse de la page se présentera sous la forme http://www.nomdusite/nomdelapage.htm
    Si la page se trouve sur le même serveur que la page appelante, vous pouvez vous passer de l'en-tête http.
    Prenons l'exemple d'un site s'appelant Page, il comporte deux sous répertoires exercices et LiensUtile. Le répertoire exercices comporte lui aussi un sous répertoire exemples

    Page
        :
        :------exercices ___________ exercice1.htm
        :            :
        :            :---------exemples
        :------LiensUtile_________util.htm

    Assumons le cas d'une page nommée exercice1.htm cette page appelle par un lien hypertexte la page essai.htm.
    Si la page essai.htm est dans le même répertoire que la page appelante, (exercices), vous écririez simplement
    <a href="essai.htm"> Page d'exemple </a>
    Page d'exemple
    Si cette page essai était dans un sous répertoire exemples, vous écririez
    <a href="exemples/essai.htm"> Page d'exemple </a>
    Page d'exemple
    Si à partir de cette page essai.htm vous vouliez revenir à exercice1.htm qui se trouve dans le répertoire supérieur vous écririez,
    <a href="../exercice1.htm"> Page d'exemple </a>
    Le code ../ signifiant remonter d'un niveau dans la hiérarchie des répertoires à partir de l'endroit où est situé la page appelante. Pour remonter de deux niveaux vous écririez ../../nom.htm et ainsi de suite.
    On peut combiner ces écritures, disons que la page essai.htm se trouvant dans le sous répertoire exemples doit accéder à une page util.htm qui se trouve dans le répertoire LiensUtile, (voir le schéma ci-dessus). nous devons donc remonter de deux répertoires, exercices et Page, et ensuite redescendre dans le répertoire LiensUtile. Nous écrirons,
    <a href="../../LiensUtile/util.htm"> Page d'Outils </a>
    En consultant ce tutorial vous êtes dans le répertoire HtmlTutor, soit sur un serveur Web ou sur votre disque, voici la structure de ce répertoire,

    Tutors
        :
        :------------ HtmlTutor   <---- Vous êtes ici
        :                       :
        :                       :----------------images
       \/                       :
    Autres Tutoriaux   :----------------PagesExemples
                                :                            :
                                :                            :----------------images
                                :
                                :----------------Textures
                                :
                               \/
                                Fichiers du tutorial html

    Dans la forme ci dessous écrivez Palette et servez vous de ce mot pour faire un lien au fichier Palette.htm situé sous le même répertoire, (HtmlTutor). Cliquez sur le lien pour appeler la page, vous pouvez ensuite effectuer un click droit et vérifier que les commandes précédent, transférer, recharger fonctionnent.
    Corrigé
    Si vous consulter ce tutorial à l'aide de Netscape version 4 en étant branché sur le net, il est possible que les images ne s'affichent pas dans la fenêtre volante quand vous y chargerez les pages, ceci ne se produit que pour ce genre de fenêtre et pas sur une page normale.
    Dans la forme ci dessous écrivez Galerie et servez vous de ce mot pour faire un lien au fichier gallery.htm situé dans le sous répertoire PagesExemples.
    Corrigé
    Dans la forme ci dessous écrivez Tutors, (c'est la page d'entrée des tutoriaux), et servez vous de ce mot pour faire un lien au fichier tutor.htm situé dans le répertoire Tutors, (au dessus dans la hiérarchie des répertoires).
   Corrigé

    Utilisation d'une image.
    On remplace le texte par une image,

    <a href="Html3c.htm"> <img src="images/flecheG.gif" width="35" height="38"></a>
    Faire un copier/coller de ce texte dans la forme ci-dessus.
    Vous pouvez remarquer que dans la fenêtre volante, la flêche est entourée d'un cadre bleu, équivalent au bleu souligné du texte. Si vous ne désirez pas afficher ce cadre, rajouter border=0 dans le tag img. vous pouvez aussi jouer sur l'épaisseur du cadre.
    Corrigé

3. Précautions pour les adresses.

    Dans la mesure du possible, récupérer les adresses Internet dans le Bookmark/Favoris ou dans des pages que vous avez sauvé sur le disque. Méfiez vous des adresse notées sur papier et tester de toute façon les adresses que vous mettez sur votre page.
    Respecter la capitalisation, index.htm est différend sur le net de Index.htm ou de index.HTM alors que vous ne verrez aucunes différences sous Windows. Les pages peuvent porter l'extension htm ou html, en fait l'extension htm est due au fait que Dos ne comprenait que les extensions à 3 lettres, mais sur internet index.htm est une page différente de index.html. D'autres extensions existent, shtml, asp, php, etc. , ces extensions sont utilisés par les serveurs internet pour caractériser des pages qui sont écrites entièrement ou partiellement dans un langage autre que le html.
    Ne confondez pas nom du fichier de la page, tel que vous pouvez le voir sur l'explorateur de Windows ou dans un autre gestionnaire de fichiers et le titre qui s'affiche en haut du navigateur quand une page s'affiche. Par exemple, cette page que vous lisez en ce moment, s'appelle sur le disque Html4.htm, alors que son titre est Liens, mail.
    Le fait que le HTML permette d'adresser des pages en indiquant simplement leurs noms, permet de tester facilement vos liens sur votre ordinateur. Vous remarquerez en passant au dessus des liens que le système rajoute le reste de l'adresse. Ceci fonctionne aussi bien sur une page installé sur le disque d'un fournisseur de Home Page que sur votre propre disque.

4. Ancrage.

    On a souvent besoin de disposer d'un lien hypertexte à l'intérieur d'une page, pour accéder à un paragraphe précis de cette page par exemple. On doit pour cela créer une adresse de saut dans la page, (ancrage), par la syntaxe,
    <a name="Début">Début</a>
    Ce qui donnera,
   Début
    Le lien hypertexte s'écrira, (nous voyons que l'adresse de l'ancrage est précédé d'un #),
    <a href="#Début"> Retour à Début</a>
    Retour à Début
    Exercice,
        Créer dans la forme ci-dessous,
        Un sommaire, Item 1 à Item 4, font +2
        écrire dans la page Item 1, Item 2, etc. séparé par 8 <br>, font +1
        Créer avec ces derniers Item une adresse d'ancrage,
        Créer dans le sommaire les liens vers les Item correspondant, ne pas oublier le #
        Les liens d'une fenêtre volante vers les ancrages de cette même fenêtre ne fonctionnent pas correctement sous Netscape 4.
    Correction

      Il est pratique de pouvoir adresser directement un paragraphe dans une page à partir d'une autre page, pour créer un glossaire par exemple nous avons besoin de sauter au paragraphe de la page concernée.
    Les ancrages se définissent de la même façons, pour les liens ont fait suivre le nom de la page de l'adresse d'ancrage, séparé par #.
    <a href="essai.htm#test"> Page d'exemple </a>
    Nous sauterions au paragraphe comportant l'ancrage nommé "test" de la page essai.htm
    Exercice,
        Pas de problèmes avec Netscape 4.
       Les paragraphes de ce tutoriaux sont tous affectés d'un ancrage, nous vous proposons, si vous acceptez cette mission, de créer un lien vers le paragraphe "Largeur, hauteur de la table" page Html3.htm de ce tutorial, l'ancrage s'appelle "Dimensions".
    Ecrivez dans la forme ci-dessus "Dimensions des tables", servez vous en comme support d'un lien vers le paragraphe "Dimensions".
    En cas de complications, nous nierons toutes relations avec vous, (NB: Cet ordinateur se détruira dans les 30 secondes),
    Corrigé

5. E-Mail, (Poste).

    Vous avez la possibilité d'émettre des messages, (e-mail), à partir d'une page html.
    Syntaxe,
        <a href="mailto:lepichon@bigfoot.com">Ecrivez moi</a>
        Ecrivez moi
    Le message est caractérisé par mailto: (double point), suivit d'une adresse de mail.
    Exercice,
        Créer un appel à la mail dans la forme ci-dessous.
        Corrigé

Comme pour tout lien vous pouvez englober une image dans le lien,

Ecrivez-moi
    Exercice,
        réaliser un lien, dans la forme ci-dessus, comportant comme ci-dessus l'image, "images/mail.gif" et le texte Ecrivez-moi.
        Corrigé

6. Couleurs des liens.

    Par défaut les liens sont soulignés, affichés en bleu s'ils n'ont pas été utilisés, en violet pour les utilisés, et en rouge quand on les actives. Il est recommandé de garder ces couleurs pour faciliter la navigation de vos visiteurs. Cependant il est quelquefois utile de pouvoir changer la couleur des liens, exemple sur un fond de page bleu.
    Ces changements se font par des commandes dans le tag <body>, elles sont globales pour toute la page.
    Commandes,
        Couleur de link non encore utilisé link="#0000EE" (Bleu clair)
        Couleur de link déjà utilisé vlink="#551A8B" (Violet)
        Couleur de link au moment ou on l'active alink="#FF0000" (Rouge)
    Vous pouvez changer ces valeurs en écrivant.(par exemple Jaune,Rouge,Cyan).
<body link="#FFFF00" vlink="FF0000" alink="#00FFFF">
    Exercice,
        sur un fond de page bleu, #0000FF,
            link non encore utilisé, bleu très clair, #E0E0FF
            link déjà utilisé vlink, magenta, #FF00FF
            link actif, rouge clair, #FF9090
            Créer un lien vers la page Palette.htm, comme vous avez déjà utilisé cette page, pour voir la couleur de link changer le nom de la page en Palette0.htm, (qui n'existe pas), et rechanger en palette htm pour voir les autres couleurs. Si le tutorial est sur votre disque, vous ne verrez pas la couleur alink, le chargement étant trop rapide.
    Corrigé

7. Nouvelle fenêtre.

    Normalement quand vous cliquez sur un lien, la page appelée remplace la page sur lequel est le lien. Vous pouvez ouvrir la page appelée dans une nouvelle fenêtre, laissant intact la première page. Syntaxe,
    <a href="exemples/essai.htm" target="nom"> Page d'exemple </a>
    Vous pouvez donner le nom que vous voulez dans "nom" , (new, page, sortie), en sachant que si un autre lien ouvre une autre page avec une cible, (target), sous le même nom, le contenu de la page sera remplacée, si le nom est différend, une nouvelle page sera créé.
    Dans le cas ou vous revenez à la page appellante sans avoir fermé la nouvelle page et que vous cliquez sur le même lien ou sur un lien appelant une page différente avec une cible portant le même nom, rien ne semble se passer. Vous restez sur la page appelante même si vous avez chargée une page différente dans la cible. Les seules solutions que je connaisse sont soit de :
        Prévenir l'utilisateur qu'il doit sauter manuellement d'une page à l'autre, par la barre d'état de Windows par exemple, ou fermer la nouvelle fenêtre en quittant,
        ou résoudre le problème en javascript, ce que nous verrons dans le tutorial Javascript.
    Dans la forme ci-dessous écrivez deux liens l'un vers la page Palette.htm, l'autre vers mytexturGen.htm en donnant le même noms de cible.
    Vérifiez que,
        La première fois que vous cliquez sur un lien vous sauter à la page concernée.
        Si vous recliquez sur le même lien, vous restez dans la fenêtre volante.
    Attention, quand vous revenez dans la fenêtre volante, ne cliquez pas sur la page du tutorial, vous fermeriez la fenêtre volante, (c'est une fonction javascript).
    Corrigé
    Changer un des noms de cible pour qu'il soit différend, testez le comportement.
    Corrigé

	Sommaire
Précédent		Suivant