Recherche
Publicités
Question aléatoire
Comment faire pour afficher la barre de menu dans Windows Vista.

Publicités
Qui est en ligne
7 Personne(s) en ligne (3 Personne(s) connectée(s) sur Articles)

Utilisateurs: 0
Invités: 7

plus...
Tutorial : HTML 4 : Les liens et les listes.
Publié par Stéphane le 12/01/2005 01:10:00 (10357 lectures)
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




  • Autres articles
    01/01/2016 20:06:26 - Bonne année 2016
    07/09/2015 16:32:01 - 7-Zip : Découvrez nos fiches pratiques
    04/03/2015 20:22:21 - Google Chrome disponible en version 41
    28/02/2015 14:50:21 - Firefox 36 disponible en téléchargement
    11/02/2015 19:59:00 - Mise à jour des produits Microsoft (Février 2015)
    25/01/2015 16:09:20 - Google Chrome disponible en version 40
    18/01/2015 15:49:18 - Firefox 35 disponible en téléchargement
    15/01/2015 19:45:28 - Mise à jour des produits Microsoft (Janvier 2015)
    01/01/2015 00:31:27 - Bonne année 2015
    12/12/2014 19:16:16 - Mise à jour des produits Microsoft (Décembre 2014)

    Les commentaires appartiennent à leurs auteurs. Nous ne sommes pas responsables de leur contenu.
    Posté Commentaire en débat
    Publicités
    Rejoignez nos forums
    Forums de discussionRejoignez notre communauté en vous inscrivant gratuitement sur notre forum de discussion. Vous pourrez participer à la vie du forum et aider les autres membres en répondant à leurs questions.Toute contribution est la bienvenue !
    Posez vos questions
    Logo entraide informatiqueVous avez une question concernant l'un de nos articles ? Vous avez un problème informatique à nous soumettre ? Rendez-vous dans notre forum de discussion, rubrique Entraide Informatique.

    Lien direct : Forum d'entraide informatique