Débuter en programmation web - sommaire

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 argumente les propriétés background-color, color, border-color, etc de trois façons :
• le nom de la couleur (nom anglais)
• le code hexadécimal de la couleur
• le code RGB (ou RVB) de la couleur

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.

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

Ce tableau est aussi très utile pour réviser le système hexadécimal (ou base 16). Vous constatez que:
• 255 s'écrit FF en hexadécimal (16 fois 16 = 256)
• 128 s'écrit 80 en hexadécimal (8 fois 16 = 128)
• 192 s'écrit C0 en hexadécimal (12 (C) fois 16 = 192)

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 : <table> <caption>Les 16 couleurs de base par ordre alphabétique</caption> <tr><th>nom</th><th>code hexadécimal</th><th>code RGB</th><th>Aperçu</th></tr> <tr><td>aqua / cyan</td><td>#00FFFF</td><td>0,255,255</td><td style ="background :rgb(0,255,255);" ></td></tr> <tr><td>black</td><td>#000000</td><td>0,0,0</td><td style ="background :rgb(0,0,0);" ></td></tr> <tr><td>blue</td><td>#0000FF</td><td>0,0,255</td><td style ="background :rgb(0%,0%,100%);" ></td></tr> ... ... <tr><td>white</td><td>#FFFFFF</td><td>255,255,255</td><td style ="background :rgb(255,255,255);" ></td></tr> <tr><td>yellow</td><td>#FFFF00</td><td>255,255,0</td><td style ="background :rgb(255,255,0);" ></td></tr> </table>

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.

Pour qu'une page de votre site soit bien référencée naturellement il faut soigner le contenu de trois balises :
• balise TITLE de la partie HEAD
• balise META description de la partie HEAD
• balise H1 de la partie BODY

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"