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 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.