Scribd Logo
Importer

Bienvenue sur Scribd !

  • Chapitre 3

    Transféré par

    Mouna Badis
    45 vues6 pages
    Liens hypertextes en Html

    Titre original

    Chapitre3

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    Liens hypertextes en Html

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    45 vues6 pages

    Chapitre 3

    Transféré par

    Mouna Badis
    Liens hypertextes en Html

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 6

    Institut Suprieur des tudes Technologiques de Bja

    Dpartement Technologies de linformatique


    Matire : Programmation 1 Niveau : TI1.1

    A.U. 2017-2018, Semestre 1 Enseignante : Mme Mouna Badis

    Chapitre 3 : Les liens hypertextes en HTML

    Html est un langage hypertexte qui permet en cliquant sur un mot, gnralement soulign (ou une
    image) de vous transporter :

    - Vers un autre endroit du document.


    - Vers un autre fichier Html situ sur votre ordinateur.
    - Vers un autre fichier Html sur un ordinateur distant

    Syntaxe : <a href = "URL"> texte_du_lien </a>

    - URL est ladresse URL du site Web qui saffichera une fois on clique sur le lien.
    - Le texte du lien est la partie visible sue page HTML
    - Si la page en question se trouve sur le Web, cette URL doit commencer par http:// .
    Autrement le navigateur va la chercher sur la machine locale.

    1- Lien un document sur un ordinateur distant


    Pour crer un lien vers une page qui se trouve dans un ordinateur distant, nous devons spcifier son
    URL.

    Exemple :

    <a href="http://www.mes.tn">
    Site de la ministre de lenseignement suprieur
    </a>

    Affichage :

    Site de la ministre de lenseignement suprieur

    Mme Mouna Badis Page 1 / 6


    Chapitre 3 : Liens hypertextes en HTML

    2- Lien un document sur le mme ordinateur (lien local)


    a) Si le document cible et le document source se trouvent dans le mme dossier

    Supposons que vous ayez 2 pages HTML qui se C :


    trouvent dans le mme dossier sur votre disque
    dur : source.html cible.html
    - C:\source.html
    - C:\cible.html

    Vous voulez faire un lien de source.html vers cible.html. Comme les fichiers se trouvent dans
    le mme dossier il suffira d'crire juste dans lattribut href = "cible.html " .
    Pour faire un lien de source.html vers cible.html :
    <a href="cible.html"> Lien vers page cible.html </a>

    b) Si le document cible et le document source ne se trouvent dans le mme dossier

    - Si votre fichier cible.html se trouve dans un sous-dossier, par exemple :


    c:\mon_dossier\sous_dossier\cible.html . Et le fichier source.html se trouve dans
    c:\mon_dossier\source.html ..
    o Il faudra crire le nom du dossier d'abord "sous_dossier/cible.html".
    o S'il y a plusieurs sous-dossiers, il suffit de les crire la suite :
    "sous_dossier1/sous_dossier2/cible.html"
    - Si votre fichier cible.html se trouve dans un dossier parent, par exemple dans c:\cible.html
    alors l, pour remonter d'un dossier il faudra crire "../cible.html".
    - Si aucun des cas prcdents ne se prsente, alors, la valeur de lattribut HREF doit faire
    apparatre le chemin daccs au rpertoire vis. Par exemple, si le fichier cible.html se trouve
    sous C:/mon_site/sous_dossier/cible.html . Pour ajouter un lien de source.html vers
    cible.html, il faudra crire :
    <a href="file:/// C:/mon_site/sous_dossier/cible.html ">
    Lien vers cible.html
    </a>

    Mme Mouna Badis Page 2 / 6


    Chapitre 3 : Liens hypertextes en HTML

    Remarques :

    La rgle est dutiliser la barre oblique ( / ) pour sparer les niveaux de rpertoires.
    Les espaces blancs ne sont pas accepts dans les noms de fichiers.
    Ne pas utiliser de lettres accentues dans les noms de fichiers ou de rpertoire
    La plupart des serveurs Web font la diffrence entre les lettres minuscules et majuscules

    Exemple :

    Soit la hirarchie de dossiers et de fichiers suivante :

    page1.html

    dossier1 page2.html

    mon_site
    dossier3 page4.html
    dossier2
    page3.html
    index.html

    Liens de la page index.html vers tous les autres fichiers html


    <!DOCTYPE html>
    <html>
    <body>

    <h1>index.html </h1>

    <a href="page1.html">Lien vers page1.html </a> <br>


    <a href="dossier1/page2.html">Lien vers page2.html </a> <br>
    <a href="dossier2/page3.html">Lien vers page3.html </a> <br>
    <a href="dossier2/dossier3/page4.html">Lien vers page4.html </a>
    <br>

    </body>
    </html>

    Mme Mouna Badis Page 3 / 6


    Chapitre 3 : Liens hypertextes en HTML

    Liens de la page2.html vers tous les autres fichiers html


    <!DOCTYPE html>
    <html>
    <body>

    <h1>page2.html </h1>

    <a href="../page1.html">Lien vers page1.html </a> <br>


    <a href="../index.html">Lien vers index.html </a> <br>
    <a href="../dossier2/page3.html">Lien vers page3.html </a> <br>
    <a href="../dossier2/dossier3/page4.html">Lien vers page4.html
    </a> <br>

    </body>
    </html>
    Liens de la page3.html vers tous les autres fichiers html
    <!DOCTYPE html>
    <html>
    <body>

    <h1>page3.html </h1>

    <a href="../page1.html">Lien vers page1.html </a> <br>


    <a href="../index.html">Lien vers index.html </a> <br>
    <a href="../dossier1/page2.html">Lien vers page2.html </a> <br>
    <a href="dossier3/page4.html">Lien vers page4.html </a> <br>

    </body>
    </html>
    Liens de la page4.html vers tous les autres fichiers html
    <!DOCTYPE html>
    <html>
    <body>

    <h1>page4.html </h1>

    <a href="../../page1.html">Lien vers page1.html </a> <br>


    <a href="../../index.html">Lien vers index.html </a> <br>
    <a href="../../dossier1/page2.html">Lien vers page2.html </a> <br>
    <a href="../page3.html">Lien vers page3.html </a> <br>

    </body>
    </html>

    3- L'attribut target
    Cet attribut prcise o le document li sera ouvert.

    Mme Mouna Badis Page 4 / 6


    Chapitre 3 : Liens hypertextes en HTML

    Valeur de target Description


    _blank Ouvre le document li dans une nouvelle fentre ou onglet
    _self Ouvre le document li dans la mme fentre o il a t cliqu (par dfaut)
    _parent Ouvre le document li dans le cadre parent
    _top Ouvre le document li dans le corps entier de la fentre
    framename Ouvre le document li dans un cadre donn

    4- Lien vers une adresse E-mail (Pour envoyer un message)


    Syntaxe : <a href="MAILTO:email_correspondant"> texte </a>

    Exemple : Pour adresser un message lectronique

    <a href="MAILTO:toto@titi.fr"> Ecrivez-moi !!</a>

    5- L'attribut download
    Nouveau dans HTML5 : l'attribut download provoque le tlchargement (au lieu de l'affichage) d'un
    contenu. Exemple :

    <a href="image1.bmp" download > tlcharger cette image </a>

    6- Lien vers un endroit prcis dun document : les signets


    Des liens peuvent aussi pointer vers un endroit prcis du mme document ou d'un autre fichier.

    Point d'ancrage <A id="***">...</A> Ceci est une


    cible
    Lien vers une ancre dans la mme page <A HREF="#***">...</A> Lien vers la cible
    *** dans la mme page
    Lien vers une ancre dans une autre page : <A HREF="URL#***">...</A> Lien vers la
    cible *** dans une autre page
    Exemple :

    - Crer une page1.html contenant 2 paragraphes et deux liens permettant de sauter du


    paragraphe1 au paragraphe 2 et inversement.

    Mme Mouna Badis Page 5 / 6


    Chapitre 3 : Liens hypertextes en HTML

    - Crer une page2.html contenant :


    o Un paragraphe
    o Un lien vers page1.html
    o Un lien pour tlcharger page1.html
    o Un lien vers le deuxime paragraphe de page1.html

    Rponse :

    Fichier page1.html
    <!DOCTYPE html>
    <html>
    <body>

    <h1>page1.html </h1>

    <a href="#p2">Allez vers le deuxime paragraphe </a>


    <a id="p1"></a>
    <p>Premier paragraphe </p>

    <a id="p2"></a>
    <p>Deuxime paragraphe </p>
    <a href="#p1">Allez vers le premier paragraphe </a>

    </body>
    </html>
    Fichier page2.html
    <!DOCTYPE html>
    <html>
    <body>

    <h1>page2.html </h1>

    <p>Troisime paragraphe </p>


    <a href="page1.html">Allez vers page1.html </a>
    <a href="page1.html" download>Tlcharger page1.html </a>
    <a href="page1.html#p2">Allez vers paragraphe 2 de page1.html </a>

    </body>
    </html

    Mme Mouna Badis Page 6 / 6

    Vous aimerez peut-être aussi