HTML 4 : Les liens et les listes.

Date 12/01/2005 01:10:00 | Sujet : Tutorial

Le quatrième tutorial parle des liens, des listes à puces et de leurs attributs.


Bonne lecture.


Je bosse sur la suite

Les liens, et les listes




  1. Les attributs des liens

    1. href

    2. accesskey

    3. tabindex


  2. La syntaxe d'un lien


  3. Les listes


    1. Liste à puces

    2. Les listes ordonnées








Les attributs des liens





Pour tout ces attributs, il faut utiliser la balise de <a> de type conteneur :


<html>
<head>
<title>Les liens, et les listes</title>
</head>

<body>
<a href="http://www.astucesinternet.com/uploads/smil42627beb91815.gif"/>
Cliquez ici</a>
</body>
</html>


Voici un lien tout simple :

Cliquez ici




  • href




  • Cet attribut spécifie l'url (Uniform Resource Locator) du document à afficher. Celà peut être une image, une vidéo, un fichier rar ou tout un autre document HTML.





  • accesskey


  • L'attribut accesskey permet d'associer une touche d'accès clavier à un lien. Seul Internet
    Explorer reconnait cette fonction. Pour se faire il faut maintenir la touche alt enfoncée pendant l'appui
    sur la touche. Il peut y avoir des problèmes de conflit si la touche est déjà associée à une commande, le menu va s'ouvir à la place du lien.



    Exemple :

    <a href="http://www.astucesinternet.com/" accesskey="z">
    Appuyez sur alt + z pour vous placer sur ce lien</a>


    Résultat :

    Appuyez sur alt + z pour
    vous placer sur ce lien






  • tabindex


  • Cet attribut fixe l'ordre de défilement des liens lors de l'appui sur la touche tab, Si tabindex n'est pas spécifié, c'est l'ordre d'apparition qui est adopté.

    Seul Internet Explorer est capable d'utiliser cet attribut.

    Voici un exemple :

    <a href="http://www.astucesinternet.com/uploads/cavt42626ff6baded.jpg" tabindex=2>
    Avatar Le nouvel Angyo Onshi (deuxième lien avec tab)</a>

    <a href="http://www.astucesinternet.com/uploads/cavt4262712e5251f.jpg" tabindex=1>
    Avatar Hellsing (premier lien avec tab)</a>

    Et ici, un résultat :

    Avatar Le nouvel Angyo Onshi (deuxième lien avec tab)

    Avatar Hellsing (premier lien avec tab)




    La syntaxe d'un lien


    Un lien est composé d'un protocole :

    • http:// débute l'URL d'un document html, d'une image et tout autre format.(video rar etc)

    • mailto: permet d'ouvrir la messagerie.

    • ftp:// est utilisé pour accéder à un serveur de transfert de fichiers.









    Une autre syntaxe de lien est disponible pour les liens dans une page.

    Ce lien est composé de deux choses :

    • Le lien qui va aller à la partie du document concernée, vers la cible.

    • Le lien qui va marquer la partie du document, la cible même.




    Pour marquer une partie d'un document, on utilise encore la balise <a> avec l'attribut name.
    Cet attribut va contenir le nom de la partie du document.


    Pour aller à cette partie du document, on utilise un lien dont l'url est différente de d'habitude, pour que la navigateur comprenne que le lien se trouve sur la page
    il faut faire précéder le nom de la partie du document du caractère # (dièse).(utilisez bien un <br> a la fin de chaque ligne pour passer a la ligne.)


    Exemple :

    <a name="introduction">introduction</a>
    <a href="#1ere partie">Partie 1</a>
    <a href="#2eme partie">Partie 2</a>
    <a href="#3eme partie">Partie 3</a>



    <a name="1ere partie">Partie 1 du document</a>
    <a name="2eme partie">Partie 2 du document</a>
    <a name="3eme partie">Partie 3 du document</a>



    <a href="#introduction">Retour à l'introduction</a>



    Et voici le résultat :

    introduction



    Partie 1

    Partie 2

    Partie 3







    Partie 1 du document

    Partie 2 du document

    Partie 3 du document



    Retour à l'introduction



    On peut marquer un paragraphe avec autre chose que <a>. On utilise alors l'attribut id. titre de cette page que vous lisez :

    <id="titre">Les liens, et les listes</>

    Et voici le code du lien ci-dessous :

    <a href="#titre">Aller en haut de la page</a>





    Aller en haut de la page





    Les listes







    Une liste, c'est en quelques sortes une énumération. On distinguera ici deux types de listes




  • Liste à puces


  • Pour créer une liste à puces, on utilise la balise de type conteneur <ul>. Puis,
    à l'intérieur de cette balise (entre <ul> et </ul>), on va disposer les différents
    élements, à l'aide de la balise de type conteneur <li> :

    <ul>
    <li>Premier de la liste</li>
    <li>Deuxième de la liste</li>
    <li>Troisième de la liste</li>
    <li>Quatrième de la liste</li>
    <li>Cinquième de la liste</li>
    </ul>



    Résultat:



    • Premier de la liste

    • Deuxième de la liste

    • Troisième de la liste

    • Quatrième de la liste

    • Cinquième de la liste







    On peut ajouter à la balise <li> l'attribut type. Cet attribut
    spécifie le type de puce. Les valeurs qu'il peut avoir :


    • disc (qui correspond à: <li type=disc"><b>disc</b></li>)

    • circle (qui correspond à: <li type="circle"><b>circle</b></li>)

    • square (qui correspond à: <li type="square"><b>square</b></li>)





    Comme dans le premier exemple on peut inclure cet attribut dans la balise <ul>:


    <ul type="square">
    <li>Premier de la liste</li>
    <li>Deuxième de la liste</li>
    <li>Troisième de la liste</li>
    <li>Quatrième de la liste</li>
    <li>Cinquième de la liste</li>
    </ul>


    Résultat :


    • Premier de la liste

    • Deuxième de la liste

    • Troisième de la liste

    • Quatrième de la liste

    • Cinquième de la liste







  • Les listes ordonnées


    Une liste ordonnée, c'est une liste où chaque élement est précédé d'un chiffre.

    Même structure que la liste à puce, mais au lieu d'utiliser la
    balise <ul>, on utilise la balise <ol> :

    <ol>
    <li>Premier de la liste</li>
    <li>Deuxième de la liste</li>
    <li>Troisième de la liste</li>
    <li>Quatrième de la liste</li>
    <li>Cinquième de la liste</li>
    </ol>



    Résultat :


    1. Premier de la liste

    2. Deuxième de la liste

    3. Troisième de la liste

    4. Quatrième de la liste

    5. Cinquième de la liste




    Si on veut faire commencer la liste à 5 plutôt qu'à 1, il suffit d'utiliser l'attribut start,
    dans la balise <ol>. Cette attribut spécifie donc le premier numéro de la liste :

    <ol start="5">
    <li>Premier de la liste</li>
    <li>Deuxième de la liste</li>
    <li>Troisième de la liste</li>
    <li>Quatrième de la liste</li>
    <li>Cinquième de la liste</li>
    </ol>


    Résultat :


    1. Premier de la liste

    2. Deuxième de la liste

    3. Troisième de la liste

    4. Quatrième de la liste

    5. Cinquième de la liste





    La balise <li> peut servir à spécifier un numéro et celà grâce à l'attribut value :

    <ol>
    <li value="9">Premier de la liste</li>
    <li value="8">Deuxième de la liste</l>
    <li value="7">Troisième de la liste</li>
    <li value="6">Quatrième de la liste</li>
    <li value="5">Cinquième de la liste</li>
    </ol>

    Résultat :


    1. Premier de la liste

    2. Deuxième de la liste

    3. Troisième de la liste

    4. Quatrième de la liste

    5. Cinquième de la liste





    Un troisième et dernier attribut est l'attribut type. Comme pour les listes à puces, il
    permet de modifier le type du numéro qui précedera les élements. On peut bien sûr l'employer
    soit dans la balise <li> pour modifier un seul élément, soit dans <ol> pour modifier
    tout les élements de la liste. Il peut avoir 5 valeurs :


    1. 1 chiffres arabes (<li type="1"><b>1</b> chiffres arabes</li>)

    2. I chiffres romains en majuscules (<LI type="I"><B>I</B> chiffres romains en majuscules</li>)

    3. a lettres en minuscules (<li type="a"><b>a</b> lettres en minuscules</li>)

    4. A lettres en majuscules (<LI type="A"><b>A</b> lettres en majuscules</li>)





    et ordonnées :


    1. 1 chiffres arabes (<li type="1"><b>1</b> chiffres arabes</li>)

    2. I chiffres romains en majuscules (<li type="I"><b>I</b> chiffres romains en majuscules</li>)

    3. a lettres en minuscules (<li type="a"><b>a</b> lettres en minuscules</li>)

    4. A lettres en majuscules (<li type="A"><b>A</b> lettres en majuscules</li>)




    Et donc dans <ol> on peut avoir :

    <ol type="A">
    <li>Premier de la liste</li>
    <li>Deuxième de la liste</li>
    <li>Troisième de la liste</li>
    <li>Quatrième de la liste</li>
    <li>Cinquième de la liste</li>
    </ol>

    Résultat :


    1. Premier de la liste

    2. Deuxième de la liste

    3. Troisième de la liste

    4. Quatrième de la liste

    5. Cinquième de la liste





  • Cet article provient de Astuces-Internet
    https://www.astucesinternet.com

    L'adresse de cet article est :
    https://www.astucesinternet.com/modules/news/article.php?storyid=9