• Des liens

    Je cherchais quels éléments peuvent être cliquables et donc ouvrir une page au clic, soit dans un nouvel onglet, soit sur la même page.

    Voici un petit bricolage qui vaut ce qu'il vaut mais qui pourra peut-être servir ... j'espère !

    Tout d'abord, on peut mettre un lien sur un mot, une liste, un paragraphe, une image, une vidéo....

    Lien sur un mot, dont nous définissons la taille de police, famille, couleur, décoration...

    <p><a href="http://pourquoipas732.eklablog.com/codes-html-c21574769/1">le lien1</a></p>

    le lien1

    Lien sur un mot, dans la même page.

    <p><a href="http://pourquoipas732.eklablog.com/codes-html-c21574769/1" target="_blank">le lien autre page</a></p>

    le lien autre page

    Lien sur un mot, dans une nouvelle page.

    <div style="text-align: center;"><a href="http://pourquoipas732.eklablog.com/codes-html-c21574769/1" target="_blank"><span id="l3">le lien autre page</span></a></div>
    <style><!--
    #l3{width:20vw; height:3vw;border:0.1vh solid black; background:pink; text-align:center; line-height:3vw; font-size:2vw; color:red;}
    --></style>
    Lien sur un mot, décoré individuellement.

    <div id="liste" style="text-align: center; margin: 1vh auto;">
    <ul>
    <li><a href="http://pourquoipas732.eklablog.com/codes-html-c21574769/1" target="_blank"><span id="l4">le lien 1</span></a></li>
    <li><a href="http://pourquoipas732.eklablog.com/octobre-2018-a148794858" target="_blank"><span id="l5">le lien 2</span></a></li>
    <li><a href="http://pourquoipas732.eklablog.com/septembre-2018-a-a148445272" target="_blank"><span id="l6">le lien 3</span></a></li>
    <li><a href="http://pourquoipas732.eklablog.com/septembre-2018-a147898738" target="_blank"><span id="l7">le lien 4</span></a></li>
    </ul>
    </div>
    <style><!--
    #liste{width:20vw; height:15vw;border:0.1vh solid black;text-align:center; line-height:3vw; font-size:2vw;}
    #l4{ background:pink; color:red;}
    #l5{ background:lime; color:green;}
    #l6{ background:yellow; color:brown;}
    #l7{ background:grey; color:black;}
    --></style>

    Liens sur une liste apparente.

    <div id="menuli" style="text-align: center; margin: 1vh auto;">
    <ul>
    <li style="font-size: 1.2vw;">Menu d&eacute;roulant au survol.</li>
    <li><a href="http://pourquoipas732.eklablog.com/codes-html-c21574769/1" target="_blank"><span id="l10">le lien 1</span></a></li>
    <li><a href="http://pourquoipas732.eklablog.com/octobre-2018-a148794858" target="_blank"><span id="l11">le lien 2</span></a></li>
    <li><a href="http://pourquoipas732.eklablog.com/septembre-2018-a-a148445272" target="_blank"><span id="l12">le lien 3</span></a></li>
    <li><a href="http://pourquoipas732.eklablog.com/septembre-2018-a147898738" target="_blank"><span id="l13">le lien 4</span></a></li>
    </ul>
    </div>
    <style><!--
    #menuli{width:20vw; height:3vw;border:0.1vh solid black;text-align:center; line-height:3vw; font-size:1.2vw; overflow:hidden; transition:all 0.5s linear;}
    #menuli:hover{height:15vw;}
    #l10{ background:pink; color:red;}
    #l11{ background:lime; color:green;}
    #l12{ background:yellow; color:brown;}
    #l13{ background:grey; color:black;}
    --></style>

    Liens sur un menu à survoler.