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
Trackbacks
Voici l'URL pour faire un trackback sur cette note : http://conseils-referencement.hautetfort.com/trackback/1700460
Commentaires
We c'est pas bien dur de faire un bouton comme ceci. Pourquoi prends tu des couleurs rgb?
Sinon pour la dernère class >> retour, ça tient sur deux lignes :)
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(../image.gif);
background-position: left top;
Voila ce que cela peut donner:
border:6px ridge rgb(255, 204, 0) rgb(255, 255, 0);
background:url(../image.gif)repeat left top;
Ça te permet d'alléger ton code... Mais bon ta méthode est aussi très bien.
Sympa ton blog ;)
Ecrit par : dhoko | 25.07.2008
C'est vrai dhoko, ce n'est pas bien dur de faire un bouton comme celui-ci, à condition d'avoir les connaissances requises. Beaucoup de webmestres utilisent du Js ou des images et la qualité du lien n'est plus forcément "tip-top" et il m'a semblé pertinent de faire un billet sur la façon de créer un bouton sans y avoir recours, le lien est ainsi plus "propre" et digestible par les moteurs.
Pour ce qui est des couleurs avec rgb, c'est simplement parce que je maîtrise mieux ce format plutôt que Exa que je n'ai pas envie d'apprendre (ça fait beaucoup).
Ta façon de déclarer les valeurs de font ou border est juste, elle peut s'effectuer de cette manière. Mais, il m'a semblé qu'un débutant qui s'intéresse à la feuille de style devait commencer par le début, c'est-à-dire déclarer chaque valeur individuellement.
Enfin, j'ai commencé de cette manière, mais, est-ce la plus juste ? Je ne le pense pas.
Les livres que je conseille ci-dessus sont extraordinaires pour apprendre facilement et chez-soi le langage HTML/CSS.
Merci pour la pertinence du commentaire.
Isabelle
Ecrit par : Isabelle Corradini | 25.07.2008
C'est sur, une fois le stade débutant passé on en oubli qu'avant on en était un...
C'est sur pour un débutant c'est plus simple et pratique de faire comme ceci. Ainsi si il constate une erreur il sait facilement où elle se trouve ce qui pourrait à la rigueur être moins évident sur la deuxième méthode.
En tout cas pour un débutant ta méthode est bien mieux. Si l'on cherche à alléger le code, la mienne à le dessus. Mais les deux sont bonnes.
J'ai jamais utilisé de livre, j'ai appris par l'exemple avec un tuto qui donnais juste des balises... Ensuite direction developpez et le tour est joué.
En tout cas bonne continuation !
A bientôt!
Je ne sais pas sous quel environnement de travail tu es mais pour les couleurs exa http://iconico.com/colorpic/ ce logiciel pour Windows est très pratique et simple à utiliser. Sinon avec tout bon éditeur sous tout OS t'as la palette mais je pense que pour toi c'est du tout cuit puisque t'as rien d'une débutante ;)
Personnellement je ne connais pas bien les couleurs Exa, je dois connaître 10 que j'utilise souvent c'est tout.
"Je ne le pense pas." Je ne suis aps d'accord, on code comme on le veux, l'essentiel c'est de respecter les standards qui existent. Pour moi ta méthode est la plus rigoureuse car la plus intuitive.
Ecrit par : dhoko | 25.07.2008
Ecrire un commentaire