11.07.2008
Construction d'un bouton HTML sans Javascript
Cette construction de sript CSS va vous permettre de réaliser un bouton hypertext sans Javascript, ce type de bouton est très intéressant, car tout en donnant un style à votre lien, vous conservez sa qualité de lien dur auprès des moteurs de recherche. Ce type de lien participe à l’optimisation de l’indexation sur les moteurs de recherche, inutile de vous dire que la qualité des liens situés sur un site internet, détermine de la pertinence des pages web concernées.
Les liens construits avec Javascript sont de qualités nettement inférieures à celles du lien construit avec le HTML et pourvu de quelques mots. Malgré une construction HTML, un lien, s'il possède une image sera lui aussi de qualité inférieure à la qualité d’un lien HTML avec quelques mots, même si l’image est pourvue des attributs alt="" et title="".
Un lien optimisé est toujours textuel ! De ce style <a href="http://www..." title="PC portable">Pc portable</a>. Résultat : Pc portable (Pc d'excellentes qualités et à prix sacrifiés !). Le lien textuel, s'il est pourvu de surcroît de l’attribut title="", obtient le maximum de pertinence de la part des moteurs de recherche, à condition que les textes de l'attribut et du lien contiennent des mots se situant vers la page de référence.
Évitez les liens avec ce type de texte comme, c’est ici, index, sur cette page … Ces mots ne comportent pas d’indications révélatrices de ce que l’on va trouver à l’adresse de référence. Les quelques mots que vous insérerez dans votre texte détermineront d’un degré de concordance, ceci est relativement logique et incite donc à ajouter un texte plutôt du genre : Les moteurs de recherches sont une science, petite phrase qui renvoie vers la page que je désire vous faire visiter.
Code CSS à copier et à coller entre les balises <head></head> :
<style type="text/css">a.ret:link { color: rgb(0, 0, 155);
text-decoration: none;
background-color: transparent;
font-weight: normal;
font-style: normal;
font-family: Comic Sans MS;
font-size: 15pt;
}
a.ret:visited { color: rgb(0, 0, 255);
text-decoration: none;
background-color: transparent;
font-weight: normal;
font-style: normal;
font-family: Comic Sans MS;
font-size: 15pt;
}
a.ret:hover { color: rgb(255, 0, 0);
text-decoration: none;
background-color: transparent;
font-weight: normal;
font-style: normal;
font-family: Comic Sans MS;
font-size: 12pt;
}
.retour { border-style: ridge;
border-color: rgb(255, 204, 0) rgb(255, 255, 0);
border-width: 6px;
background-repeat: repeat;
background-color: transparent;
background-image: url(http://www.votre-domaine.com/image.gif);
background-position: left top;
}
#gervi { visibility: visible; width: 200px;
height: 100px;
display: block;
}
</style>
ce qui donne :
Code HTML à copier et à coller entre les balises <body></body> :
<div id="gervi"> <center> <br /> <a title="Films Dvd" class="ret" href="http://www.films-dvd-lecteur.com/"><span class="retour">Films Dvd</span></a><br /> </center> </div>
11:22 Publié dans HTML CSS | Lien permanent | Commentaires (3) | Trackbacks (0) | Envoyer cette note | Tags : html, css, lien