Accueil
Mes tutoriels sur la programmation

Débuter en HTML & CSS - sommaire


Vous pouvez me contacter via Facebook (questions, critiques constructives) : page facebook relative à mon site

HTML & CSS : exprimer les couleurs - le référencement naturel (SEO)

Exprimer les couleurs c'est l'affaire du CSS.
Faire en sorte que votre site soit bien indexé par les moteurs de recherche, c'est du domaine du HTML.

Exprimer les couleurs en CSS

On peut donc écrire (pour un fond jaune) :

	background-color : yellow
	ou
	background-color : #FFFF00
	ou 
	background-color : rgb(255,255,0)
	ou 
	background-color : rgb(100%,100%,0%)

Donc dans le cadre de la notation RGB on peut utiliser des pourcentages.

Les 16 couleurs de base

Pendant longtemps les navigateurs n'ont reconnu que les noms de 16 couleurs.

Les 16 couleurs de base par ordre alphabétique
nomcode hexadécimalcode RGBAperçu
aqua / cyan#00FFFF0,255,255
black#0000000,0,0
blue#0000FF0,0,255
fuchsia / magenta#FF00FF255,0,255
gray#808080128,128,128
green#0080000,128,0
lime#00FF000,255,0
maroon#800000128,0,0
navy#0000800,0,128
olive#808000128,128,0
purple#800080128,0,128
red#FF0000255,0,0
silver#C0C0C0192,192,192
teal#0080800,128,128
white#FFFFFF255,255,255
yellow#FFFF00255,255,0

Vous pouvez remarquez qu'il y a deux paires de synonymes.
Ainsi aqua et cyan désignent la même couleur.

Je rappelle que dans le cadre du code RGB vous pouvez manipuler des pourcentages. Ainsi pour exprimer la couleur teal vous pouvez écrire : rgb(0%,50%,50%).

Le code correspondant

Il n'est peut-être pas inutile de rappeler le code du tableau HTML ci-dessus.
Extrait du code : Les 16 couleurs de base par ordre alphabétique nomcode hexadécimalcode RGBAperçu aqua / cyan#00FFFF0,255,255 black#0000000,0,0 blue#0000FF0,0,255 ... white#FFFFFF255,255,255 yellow#FFFF00255,255,0

Le formatage est réalisé par quelques règles de style :

	table {width : 500px ; border : none ; margin : 10px auto 10px auto ; }
	caption {font-size : 110% ; color :navy; }
	td,th {border : 1px solid black ; }
	td {padding-left : 5px ; }

Déterminer le code RGB

J'ai mis au point une petite application qui permet d'obtenir le code RGB d'une couleur après avoir déterminé celle-ci grâce à une palette :

la boîte à couleurs

Notions sommaires de référencement naturel ou SEO

Attention il existe des ouvrages complets sur le référencement. Cette page ne donne que quelques rudiments.

Bien figurer dans les résultats des requêtes

Il ne suffit pas de réaliser un beau site et de l'héberger. Il faut encore que ce site soit visité.
Pour que votre site soit visité il faut que les moteurs de recherche (google, bing, yahoo) lui fasse de la publicité (que les pages soient indexées).
L'idéal est que l'url de chaque page figure dans les premiers résultats pour quelques expressions clé.
Ne pensez pas qu'il faut payer pour être bien référencé par les moteurs de recherche pour certaines expressions ; à côté du référencement payant il existe le référencement naturel (ou gratuit). Le sigle SEO (Search Engine Optimization) est synonyme de référencement naturel.

La balise TITLE

La balise TITLE est contenue dans la partie HEAD. Elle sert à légender l'onglet dans lequel s'affiche la page mais pas seulement ...
Le contenu de cette balise ne doit pas dépasser 70 caractères espaces compris. Elle doit décrire donc en quelques mots le contenu de votre page.
Il s'agit d'une balise essentielle dans le cadre du référencement naturel ; tous les spécialistes du référencement sont d'accord sur ce point.

META Description

Syntaxe : meta name ="description" content ="description succincte du contenu" .
Cette balise à pour rôle de fournir une description courte (deux à trois phrases) de la page web.
Cette description est notamment utilisée par les principaux moteurs de recherche pour commenter l'index créé par le moteur.

META keywords

Syntaxe : meta name ="keywords" content ="liste de mots clés" .
Cette balise n'est plus utile car les moteurs de recherche ne se servent plus de son contenu pour indexer la page.

La balise H1

Le contenu de la balise H1 doit aussi être soigné puisqu'il s'agit du titre principal de la page mais ce contenu participe également au référencement naturel de celle-ci.

La balise STRONG

Des mots clés de la page peuvent contribuer au bon référencement de celle-ci s'ils ont une grande emphase.
Attention par défaut les expressions balisées par STRONG apparaissent en gras. Mais il peut en être autrement avec la feuille de style.

Référencer d'autres types de contenu

La page web n'est pas forcément la réponse la plus pertinente à la recherche d'un internaute. Une page peut aussi ressortir via une image, une vidéo !
Pour que chaque image de votre site soit référencée dans les résultats "images" il suffit d'utiliser l'attribut ALT dans la balise IMG !

Pour les vidéos et les fichiers audio il est préférable d'intégrer la balise VIDEO / AUDIO dans le conteneur FIGURE avec une légende (balise FIGAPTION).

Empécher l'indexation de la page par les moteurs de recherche

Vous avez entendu parler du "dark web" c'est à dire les sites qui ne sont pas indexés par les moteurs de recherche.
La raison est que ces sites sont des plateformes de commerces illégaux (armes, drogues, etc. )

Vous pouvez légitimement souhaiter que certaines pages de votre site ne soient pas indexées par les robots des moteurs de recherche et pour des raisons de confidentialité : pages réservées aux salariés, aux fournisseurs agréés, etc.
Ainsi dans mon site les pages d'exemples ne sont pas indexées afin de prioriser les pages avec le cours, le code des exemples.
Pour qu'une page ne soit pas indexée, il suffit d'utiliser la balise META robots et d'écrire dans la partie HEAD de celle-ci : Meta name ="robots" content ="noindex"