Conseils référencement - html-css

Fenêtre pop-up sans JavaScript

noreply@hautetfort.com (isabelle corradini) — Thu, 18 Sep 2008 12:26:00 +0200

Exemple d'une fenêtre Pop-up sans Javascript et son utilité:
je souhaite, par exemple faire un peu de publicité gratuite pour une de mes boutique de DvdBoutique films Dvd

Les meilleurs films dvd à prix réduits, les séries cultes telles que, Mariés, deux enfants , Ma sorcière bien aimée ou encore la série Lost ... Et bien sur le matériel pour visionner vos dvd en toute tranquillité., je la mets en valeur grâce à cette fenêtre pop-up sans Javascript appelée aussi info-bulle

Le script CSS à coller entre les balises <head> et </head> ou dans la feuille de style : <style type="text/css"> a.bulle { position: relative; color: rgb(255, 51, 255); font-weight: normal; font-style: normal; font-size: 12pt; text-decoration: underline; font-family: Arial,Helvetica,sans-serif; } a.bulle:hover { background-color: rgb(0, 255, 255); font-style: italic; } a.bulle span { display: none; } a.bulle:hover span { border-style: solid dashed dashed; border-color: rgb(174, 0, 0); border-width: 4px 1px 1px; padding: 13px; display: inline; font-size: 10px; font-weight: normal; text-decoration: none; width: 130px; height: 250px; top: 2px; left: 50px; background-color: rgb(255, 235, 215); position: absolute; } </style>

a.bulle correspond au lien apparent sur la page, sans le survoler avec la souris, vous réglez depuis cette sous-class .bulle la position du lien qui est ici relative par rapport à l'ensemble du texte. Sa couleur avec color:, sa graisse (épaisseur) avec font-weight:, sa taille…

Images, indexation et référencement

noreply@hautetfort.com (isabelle corradini) — Wed, 16 Jul 2008 21:54:00 +0200

Fenêtre popup sans Javascript

Je me suis rendu compte en parcourant le web, qu’un bon nombre de sites et de blogs ne renseignait pas l’attribut alt des images qu’ils insèrent sur leurs pages. Grossière erreur !

Cet attribut est un élément très important pour le référencement ou plutôt l’indexation de sites et de blogs sur les moteurs de recherche. Les crawler, comme j’ai déjà eu l’occasion de l’écrire sur un précédent billet, ne distingue pas le contenu de l’image que vous affichez sur votre page, il est donc nécessaire de renseigner l’attribut alt="" qui est en quelques sortes une légende, un commentaire destiné aux crawler et aux navigateurs.

Cet attribut peut contenir idéalement 70 caractères, il n’est pas recommandé d’aller au-delà (normes W3C). Il est judicieux de commenter l’image avec des mots correspondant au contenu réel de l’image et d’insérer dans le commentaire un ou deux mots clés, mais, attention avec l’utilisation des mots clés ! Dépasser un certain nombre de répétitions et la densité/mot clé se trouve modifiée (évidemment) et pas forcement à votre avantage, le « forcing » avec les mots clés est quelquefois périlleux.

L’insertion HTML d’une image se fait avec le code suivant :
<img style="width: 200px; height: 200px;" alt="Nom de l'image" src="citadelle.jpg">

L’insertion XHTML d’une image se fait avec le code suivant :
<img style="width: 200px;…

Code couleur HTML rgb

noreply@hautetfort.com (isabelle corradini) — Tue, 15 Jul 2008 20:11:00 +0200

Évadons-nous quelques instants du référencement :

Il existe trois façons d’ajouter une couleur à un élément HTML :

le nom de la couleur en anglais : color : black ;
la couleur sous forme de code Exa : color : #000000 ;
la couleur sous forme de code rgb : color : rgb(0, 0, 0) ;

Personnellement j’utilise le code rgb qui signifie en anglais : red green blue, en français : rouge vert bleu. C’est pour moi la façon la plus facile de créer un code couleur, après, c’est chacun sa méthode. Je trouve rgb très simple d’utilisation, il suffit de bien comprendre son fonctionnement et en un rien de temps vous serez capable de créer vos propres codes couleurs.

Pourquoi rgb (ou rvb en français, exclusivement rgb en HTML) ? Ces trois couleurs primaires sont les couleurs que distingue l’œil, en effet, les récepteurs situés au fond de nos yeux changent le message électromagnétique de la lumière en message électrique disponible pour notre vision.

L’œil humain absorbe et transforme les photons grâce à ses capteurs sensibles aux bandes des longueurs d’ondes du rouge, du vert et du bleu. Une lumière bleue perçue par l’œil humain, active dans son cerveau les capteurs relatifs au bleu, ce qui va lui permettre de voir cette couleur et pas une autre. Le même…

Construction d'un bouton HTML sans Javascript

noreply@hautetfort.com (isabelle corradini) — Fri, 11 Jul 2008 11:22:00 +0200

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…

Se familiariser avec HTML et CSS

noreply@hautetfort.com (isabelle corradini) — Tue, 08 Jul 2008 10:59:00 +0200

Les CSS, appelée aussi feuille de style et le HTML permettent de faire une mise en page évoluée, avec un peu de goût, les effets peuvent être des plus jolis. La connaissance de HTML, en dehors d’autoriser le positionnement des éléments au sein d’une page web, permet d’optimiser certaines balises chères aux crawleurs (robots qui indexent internet), d’augmenter la pertinence de votre travail et d’avoir toutes les chances de votre côté pour un bon référencement.

La connaissance de HTML va vous permettre, par exemple, d’insérer dans les balises adéquates, des attributs spécifiques à certains éléments de type alt="", title="", target="", etc. Ces attributs sont très prisés par les moteurs de recherches, car ils commentent une image, renseignent pertinemment un lien et ouvrent ce dernier dans une nouvelle fenêtre. Maîtriser HTML ou ne serait-ce que d’avoir quelques connaissances de ce langage n’est pas difficile à condition d’avoir l’ouvrage adapté !

Apprendre et créer des pages HTML avec ce langage se révèle assez aisé malgré ce que certains en disent. Il faut avoir le « goût » de ce que l’on fait et avec l’aide d’un livre vulgarisé plus rien n’est impossible, même pour l’internaute lambda qui s’est contenté de surfer sans jamais envisager d’apprendre cette forme de mise en page évoluée. Cet apprentissage du langage HTML ne requiert pas de grandes capacités…