18.09.2008
Fenêtre pop-up sans JavaScript
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 avec font-size, surligné ou non avec text-decoration et le type de police, réglable grâce à font-family. Dans l’exemple ici, la famille est prédéfinie avec Nvu, mais pouvez mettre à la place, Times New Roman, ou même Comic Sans MS, enfin bref, la police qui vous semblera adéquate.
a.bulle:hover correspond au lien apparent sur la page lorsqu’il est survolé avec la souris, ici j’ai indiqué un fond de couleur cyan avec rgb(0, 255, 255) et un style de police en italique pour donner de l’effet lors du survol du lien. Attention, si vous n’indiquez pas de couleurs, d’épaisseur, de taille etc., cette sou-class héritera des valeurs de la class précédente.
a.bulle span indique au navigateur que sans le survol du lien avec la souris, la boîte et son contenu reste non visible. Aucune autre valeur n’est à indiquer, seul display : none doit figurer dans cette valeur.
Enfin, a.bulle:hover span indique le comportement de reconstitution de la fenêtre pop-up lors du survol de la souris. border-style: solid dashed dashed marque la bordure du haut pleine avec la valeur solid et marque les autres bordures en pointillées avec la valeur dashed. border-width: 4px 1px 1px défini l’épaisseur des bordures, padding: impose un espace entre le contenu et le bord de la fenêtre pop-up, attention la valeur ajoutée à padding agrandie la fenêtre d'autant. Display: fourni la valeur de l'affichage, ici, en ligne. Viennent ensuite les valeurs de font:, attention de bien les définir car, si vous le ne faites pas, seront affichées les valeurs héritées ! Width: défini la largeur de la boîte et height: la hauteur.Top: indique le décalage supérieur de la boîte par rapport au lien et left: le décalage horizontal gauche, toujours par rapport au lien, background-color: fourni avec la valeur de votre choix, la couleur du fond de boîte. position: absolute indique au navigateur d'afficher la boîte en respectant les valeurs ci-dessus (top et left).
12:26 Publié dans HTML CSS | Lien permanent | Commentaires (1) | Trackbacks (0) | Envoyer cette note | Tags : pop up, sans javascript, css
16.07.2008
Images, indexation et référencement
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; height: 200px;" alt="Nom de l'image" src="citadelle.jpg" />
21:54 Publié dans HTML CSS, mots cles, référencement | Lien permanent | Commentaires (2) | Trackbacks (0) | Envoyer cette note | Tags : html, css, mots cles, référencement, images
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
08.07.2008
Se familiariser avec HTML et CSS
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 mentales, il n’a rien de commun avec des langages de programmations tels que C++, pascal, etc.
La plus grande facilité est offerte à cet apprentissage de HTML/CSS grâce à cette sélection de livre ci-dessous pour bien commencer et ne pas se dégoûter dès les premiers jours ! Avec les livres de la collection « Pour Les Nuls », vous apprendrez la création et l’utilisation des tableaux, ce qu’il est possible de faire et surtout ne pas faire avec la forme tabulaire. Vous étudierez les pièges des META, des frames et comment les déjouer et en tirer avantage.
Vous apprendrez entre autres, à réaliser un bouton Hyper Text sans l’emploi de texte gravé sur une image (les robots ne discernent pas les images et ne peuvent leur attribuer de sens comme nous le faisons), l’emploi de caractères alfa numériques et toujours préférable à l’utilisation d’une image ou de Javascipt.
10:59 Publié dans HTML CSS | Lien permanent | Commentaires (0) | Trackbacks (0) | Envoyer cette note | Tags : html, css, apprendre