Les navigateurs affichent les police de caractères de ce paragraphe avec une couleur de code hexadécimal #ffffff (blanc); Ceci s'obtient à l'aide du code HTML suivant :
< p style="color:#ffffff";>
ou de ce code CSS si vous voulez appliquer ce style à tous vos paragraphes.
p
{
color:#ffffff;
}
L'apport du code CSS au langage HTML est qu'il permet de changer très rapidement, et en une seule opération, la couleur de police de tous vos paragraphes. Pour ce faire, il faut donc changer uniquement le code hexadécimal de la couleur.
Les navigateurs affichent l'arrière-plan (background) de ce paragraphe avec une couleur de code hexadécimal #a34408 et une police de couleur #fff7ee. Ceci s'obtient à l'aide du code HTML suivant
< p style="background-color: #a34408; color:#fff7ee";>
ou de ce code CSS si vous voulez appliquer ce style à tous vos paragraphes :
p
{
color:#fff7ee;
background-color: #a34408;
}
il ne faut pas oublier le #; sinon, il ne se passera rien ; "color" et "background-color" peuvent être appliqués à tous les éléments HTML qui le permettent (bordures, cellules de tableaux, titres, lignes de séparation (balise hr), arrière-plan, etc..)
<div style="border:200px solid;border-bottom-color: #6a5acd; border-left-color: #7b68ee; border-right-color: #483d8b; border-top-color: #191970; height: 0px; width: 0px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 30px;"></div>
Le motif ci-dessus est construit à partir d'une utilisation détournée de l'attribut "border". La division (DIV) a une largeur et une hauteur de 0 pixels ; réduite ainsi à une surface de valeur nulle, elle est le point de jonction des 4 bordures latérales d'une épaisseur de 200 pixels chacune ; le tout forme donc un cône 3D à quatre côtés égaux en forme de triangles isocèles que l'oeil discerne grâce à un choix adéquat de 4 couleurs dégradées attribuées à chacune des bordures.
L'exemple suivant est construit sur le même modèle ; mais, dans ce cas, la configuration des bordures est beaucoup plus classiques :
<div style="border:10px solid;border-bottom-color: #6a5acd; border-left-color: #7b68ee; border-right-color: #483d8b; border-top-color: #191970; height: 370px; width: 370px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 30px;"></div>
Le dernier exemple est construit en utilisant d'une manière complémentaire les 2 modèles précédents:
<div style="border:10px solid;border-bottom-color: #cb8931; border-left-color: #e3b148; border-right-color: #b6641b; border-top-color: #a5480b; height: 370px; width: 370px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 30px;"> <div style="border:185px solid;border-bottom-color: #6a5acd; border-left-color: #7b68ee; border-right-color: #483d8b; border-top-color: #191970; height: 0px; width: 0px; margin: 0px;"></div></div>
Des codes des couleurs hexadécimales sont proposés sur de nombreuses palettes en ligne. La liste proposée n'est absolument pas exhaustive :
une palette sans code hexadécimal Cette palette comporte les 139 nuances qu'il est possible d'indiquer par un nom anglais, sans utiliser de code hexadécimal. Vous pouvez relever le code hexadécimal de chaque couleur en passant la pipette de colorzilla sur chacune des bandes du nuancier.
netalya.com
ficml.org
Vous pouvez parfaire votre connaissance de la codification des couleurs en HTML
Pour installer Colorzilla, un addons pour Firefox ; ouvrez le navigateur, allez à :
Lien direct : Colorzilla
La notation plein texte des couleurs n'est pas validable W3C pour une page HTML mise en ligne. Toutefois, en local, ceci peut être très intéressant à utiliser pour contrôler, par l'ajout de backgrounds (que vous pouvez toujours supprimer après), l'emplacement de vos DIV et autres blocs HTML. Ceci permet de retrouver plus facilement certaines erreurs de positionnements liées au "float-left" et autres réjouissances du positionnement CSS.
Les noms de couleurs utilisables sont en anglais ; il suffit d'indiquer style="color: green;" ( ou blue, yellow, brown, black, white, violet, pink... for exemples)
Le résultat obtenu peut-être très repoussant mais, dans ce cas, notre but n'est pas esthétique ; il est de trouver, par l'usage de ces backgrounds sommaires, où se situe l'erreur de positionnement qui est alors beaucoup plus facilement repérable.
autres exemples d'utilisation du background : dans un dégradé, un tableau, un titre
Depuis Synaptic, vous pouvez installer un logiciel assez sympathique, Agave, qui, lui aussi pourra vous être un agréable compagnon de route en cet univers de la couleur hexadécimale.
Les palettes d'Agave sont dans le répertoire
;
ce sont des fichiers textes éditables au format Gimp Palette. Attention toutefois à un seul petit détail : vous n'avez pas de droits utilisateurs sur ce répertoire ; la solution vous est donnée au chapitre "3.1.2. Palettes" de l'aide (en anglais) d'Agave :
Your palette file should be saved with a .gpl extension and saved in home directory at .local/share/agave/palettes/. If your file is well-formed, Agave will load your custom palette next time you restart the application.
La palette (écrite sans formatage depuis un éditeur de texte) doit être enregistrée avec l'extension .gpl dans le répertoire
de votre répertoire général /home. Il vous faut avoir coché l'option "afficher les fichiers cachés" dans Nautilus
.
Vous pouvez également récupérer (le monde de l'opensource n'est pas cloisonné) les palettes de colorzilla qui sont stockées dans votre profil Firefox.
et les copier dans le répertoire d'agave signalé précédemment.
Il est tout aussi simple d'importer, par copier-coller, les palettes de Gimp depuis
dans Agave en suivant la même procédure.
Un exemple de palette Gimp (.gpl), un fichier texte très simple en code décimal RGB (Red Green Blue) ou, en français, RVB (Rouge, Vert, Bleu)
Pour chacune des 3 couleurs primaires (qui permettent de créer toutes les nuances possibles, y compris un "blanc" théorique), les valeurs décimales sont échelonnées de 0 à 255. Il existe divers convertisseurs consultables en ligne ; ceux-ci permettent donc de connaître ou de convertir le code RGB ou Hexadécimal de chacune des couleurs.
Notation RGB
255 0 0 pour du rouge
0 255 0 pour du vert
0 0 255 pour du bleu
255 255 255 pour le blanc
0 0 0 pour le noir (aucune couleur)
palette Gimp au format texte .gpl
GIMP Palette
Name: Default
#
255 0 0 Red
255 0 255 Magenta
0 0 255 Blue
0 255 255 Cyan
0 255 0 Green
255 255 0 Yellow
127 0 0 Dark Red
127 0 127 Dark Magenta
0 0 127 Dark Blue
0 127 127 Dark Cyan
0 127 0 Dark Green
130 127 0 Dark Yellow
0 0 0 Black
25 25 25 Gray 10%
51 51 51 Gray 20%
76 76 76 Gray 30%
102 102 102 Gray 40%
127 127 127 Gray 50%
153 153 153 Gray 60%
178 178 178 Gray 70%
204 204 204 Gray 80%
229 229 229 Gray 90%
255 255 255 White
Sous MsWindows, parmis de nombreuses autres fonctions, Photofiltre permet, grâce à un plugin, d'obtenir très rapidement un dégradé de couleurs éventuellement réutilisable comme palette (par inclusion de l'image dans une page HTML suivie d'un passage de la pipette de colorzilla sur les différentes zones colorées ; à ce stade, nous sommes en plein bricolage artisanal et laboratoire expérimental) :
Photofiltre (qui n'est pas un logiciel opensource) fonctionne correctemment avec Wine, qui n'est pas payant et qui n'est pas un émulateur ainsi qu'il l'est dit d'une manière erronée dans la FAQ de Photofiltre. Il peut lui arriver de se planter si vous travaillez simultanément avec Firefox. Enregistrez donc très souvent votre travail et évitez d'ouvrir Firefox en même temps que Photofiltre.
Formation Ubuntu/Windows, développement et administration de sites
déclaration à la CNIL : n° 1397076
Photographies, logo, illustrations : Pierre BELLENEY
