Scribd Logo
Upload

Welcome to Scribd!

  • TD2 HTML Links

    Uploaded by

    Øssama Ajbli
    8 views3 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views3 pages

    TD2 HTML Links

    Uploaded by

    Øssama Ajbli

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    Filière Première Année Cycle d'Ingénieur : Sécurité IT et Confiance Numérique

    Année Universitaire 2023-2024


    h.nassiri@uiz.ac.ma

    Technologie Web

    Les Liens
    La balise <a> définit un lien hypertexte, qui permet de relier d'une page à une autre.
    § Exemple de lien avec texte : <a href="Ex7.html">Texte du lien</a>
    § Exemple de lien image : <a href="Ex8.html"><img src="link.jpg"></a>

    Généralement il existe deux types de liens hypertextes en HTML :


    § Les liens internes pour naviguer d’une page à l’autre dans un même site.
    § Les liens externes qui vont envoyer les utilisateurs vers une page d’un autre site.

    1. Les liens internes / Lien vers une ancre (même page)


    Une ancre est une sorte de point de repère qu'on peut mettre dans différents
    endroits d’une page HTML lorsqu'elle est très longue. Il est utile de faire un lien amenant
    aux parties intéressantes du document.

    Les liens interne permettent de se déplacer à l’intérieur d’un fichier html, sans que
    le visiteur soit obligé de faire scroller la fenêtre. Le visiteur va donc cliquer sur le lien et il
    sera amené vers l’ancre. Pour cela il faut :
    § Définir la cible du lien (ancre).
    § Associer ce même lien a cette ancre.

    On utilise l'attribut name pour attribuer un nom à l’ancre :


    <a name="mon_ancre">Titre</a>

    Ensuite, il suffit simplement de créer un lien, mais cette fois l'attribut href contiendra un
    dièse (#) suivi du nom de l’ancre :
    <a href="#mon_ancre">Aller vers l'ancre</a>
    Exemple :
    <a name="top"></a>
    <a href="#top"> Vers top </a>

    1
    2. Liens Externes
    Les liens externes peuvent être vers des pages Web, vers des téléchargements de
    Fichiers, vers des adresses électroniques, …
    Exemples :
    <a href="https://openclassrooms.com/"><p>Open classrooms</p></a>
    <a href="fichier.doc"><b>télécharger le fichier</b></a>

    3. Le lien mailto
    § Lien mailto sans sujet pour un seul destinataire
    ‹a href="mailto:exemple@exemple.com">Contacter notre équipe‹/a>

    § Lien mailto sans sujet pour plusieurs destinataires


    ‹a href="mailto:exemple1@exemple.com;exemple2@exemple.com">Contacter
    notre équipe‹/a>

    § Lien mailto avec sujet (Hello)


    ‹a href="mailto:exemple@exemple.com?subject=Hello">Contacter notre
    équipe‹/a>

    § Lien mailto avec sujet (Hello) et contenu (Message)


    ‹a
    href="mailto:exemple@exemple.com?subject=Hello&body=Message">Contact
    er notre équipe‹/a>

    § Lien mailto avec sujet envoyé à des destinataires en copie et/ou en copie cachée
    ‹a
    href="mailto:exemple@exemple.com?subject=Hello&cc=exemple@toto.com&b
    cc=exemple@tata.com">Contacter notre équipe‹/a>

    4. Couleurs des liens


    link="Couleur" : couleur des liens non-activés.
    alink="Couleur" : couleur des liens actifs.
    vlink="Couleur" : couleur des liens déjà activés.
    Exemple : <body link="blue" alink="green" vlink="silver"> … </body>

    5. L’attribut target
    L’attribut target permet de choisir où doit s’ouvrir notre page de destination. Il peut
    prendre les valeurs suivantes :

    2
    Valeur Action
    _self Affiche la cible dans le même cadre que le lien. C’est la valeur par défaut.
    _parent la cible est chargée dans le cadre de niveau supérieur par rapport à
    l’emplacement du lien.
    _blank la cible est affichée dans une nouvelle fenêtre.
    _top la cible est chargée dans la fenêtre entière(efface les frames).

    Example:
    <a href="https://openclassrooms.com/" target="_blank"> Open
    classrooms Website </a>

    Exercice
    1. Créez deux fichiers "page1.html" et "page2.html" avec un lien allant de "page1.html"
    à "page2.html".
    2. Créez un lien sur le fichier "page2.html" pointant sur le fichier "page1.html". Vous
    devriez ainsi avoir un lien pointant sur l'autre fichier sur chacun des fichiers, et donc
    passez de l'un à l'autre sans utiliser les boutons du browser.
    3. Créez un fichier "index.html" qui aura deux liens vers "page1.html" et "page2.html" et
    un autre lien pointant sur une image (de votre choix).
    4. Changez le lien de "page1.html" à ce que le lien ouvre une nouvelle page de browser.
    5. Dans le fichier "index.html", ajoutez un lien pour envoyer un mail à votre adresse.
    6. Dans le fichier "index.html", ajoutez un autre lien mailto avec sujet et contenu envoyé
    à deux destinataires en copie de votre choix.
    7. Créez un fichier "page3.html" qui contient une grande quantité de texte (faites par
    exemple un copié-collé d'un texte que vous avez). Faites un lien interne au début du
    document qui pointera sur le milieu du texte.
    8. Reprenez le fichier "page3.html", et cette fois au lieu d'un texte pour le lien, utilisez
    une image de votre choix.

    You might also like