Le code RVB

par | Jan 10, 2021 | Codage

INTERNET

Le code couleur
RVB

Le code Couleur

Chaque couleur affiché fait l'objet d'un code : Le code RVB (Rouge, Vert, Bleu) basé sur les trois couleurs fondamentales des tubes cathodiques. Pour mémoire, les trois couleurs fondamentales d'un peintre sont le Rouge, le Jaune et le Bleu.

La couleur affichée est donc le résultat d'un mélange de Rouge, de Vert et de Bleu. La proportion de chacune d'elle est donné selon un code hexadécimale de deux chiffres allant de '00' (0 % ) à 'ff' (100 %).

Par exemple un bleu est codé : '0000FF'. Pour un rouge, ce sera : 'FF0000' et le vert '00FF00'

Cette méthode permet d'afficher plus de 16 millions de couleurs.

Comme tous les ordinateurs ne permettent pas où ne sont pas configurés pour afficher 16 millions de couleur, il est recommandé de travailler sur les 256 couleurs de bases.

Le moyen de les obtenir est, dans la codification d'une couleur, de se limiter au codes, par couleur : 00, 33, 66, 99, CC et FF.

Dans les premiers temps de la programmation HTML, il y avait 16 couleurs de base dite aujourd'hui "couleurs principales" et pouvant être codé par un nom.

Les voicis :



Nom Couleur affichée

black

Noir

 black

maroon

Marron ou rouge foncé

 maroon

green

Vert

 green

olive

Vert olive

 olive

navy

Bleu marine

 navy

purple

Violet

 purple

teal

cyan foncé

 teal

gray

Gris

 gray

silver

Argent

 silver

red

Rouge

 red

lime

Vert clair

 lime

yellow

Jaune

 yellow

blue

Bleu

 blue

fuchsia

Fuchia

 fuchsia

aqua

Bleu clair

 aqua

white

Blanc

 white

Avec l'évolution des performance, d'autres couleurs sont venues s'adjoindre (reconue à partir de Netscape 4 et I.Explorer 4).

En voici quelques unes :

Nom Couleur affichée

azure

Bleu azur

 azure

bisque

Beige

 bisque

brown

Brun

 brown

blueviolet

Bleu-violet

 blueviolet

chartreuse

Vert clair

 chartreuse

chocolate

Brun clair

 chocolate

cornsilk

Rose clair

 cornsilk

darkgreen

Vert foncé

 darkgreen

darkorange

Orange

darkorange

darkorchid

Mauve foncé

 darkorchid

deepskyblue

Bleu ciel

 deepskyblue

gold

Doré

 gold

ivory

Ivoire

 ivory

orange

Orange

 orange

lavender

Lavande

 lavender

pink

Rose

 pink

plum

Prune

 plum

salmon

Saumon

 salmon

snow

Neige

 snow

turquoise

Turquoise

 turquoise

wheat

Jaune paille

 wheat


Et, pour les autres, les voici avec leur codes RVB :

  #000000   #000033   #000066   #000099   #0000CC   #0000FF
  #003300   #003333   #003366   #003399   #0033CC   #0033FF
  #006600   #006633   #006666   #006699   #0066CC   #0066FF
  #009900   #009933   #009966   #009999   #0099CC   #0099FF
  #00CC00   #00CC33   #00CC66   #00CC99   #00CCCC   #00CCFF
  #00FF00   #00FF33   #00FF66   #00FF99   #00FFCC   #00FFFF
  #330000   #330033   #330066   #330099   #3300CC   #3300FF
  #333300   #333333   #333366   #333399   #3333CC   #3333FF
  #336600   #336633   #336666   #336699   #3366CC   #3366FF
  #339900   #339933   #339966   #339999   #3399CC   #3399FF
  #33CC00   #33CC33   #33CC66   #33CC99   #33CCCC   #33CCFF
  #33FF00   #33FF33   #33FF66   #33FF99   #33FFCC   #33FFFF
  #660000   #660033   #660066   #660099   #6600CC   #6600FF
  #663300   #663333   #663366   #663399   #6633CC   #6633FF
  #666600   #666633   #666666   #666699   #6666CC   #6666FF
  #669900   #669933   #669966   #669999   #6699CC   #6699FF
  #66CC00   #66CC33   #66CC66   #66CC99   #66CCCC   #66CCFF
  #66FF00   #66FF33   #66FF66   #66FF99   #66FFCC   #66FFFF
  #990000   #990033   #990066   #990099   #9900CC   #9900FF
  #993300   #993333   #993366   #993399   #9933CC   #9933FF
  #996600   #996633   #996666   #996699   #9966CC   #9966FF
  #999900   #999933   #999966   #999999   #9999CC   #9999FF
  #99CC00   #99CC33   #99CC66   #99CC99   #99CCCC   #99CCFF
  #99FF00   #99FF33   #99FF66   #99FF99   #99FFCC   #99FFFF
  #CC0000   #CC0033   #CC0066   #CC0099   #CC00CC   #CC00FF
  #CC3300   #CC3333   #CC3366   #CC3399   #CC33CC   #CC33FF
  #CC6600   #CC6633   #CC6666   #CC6699   #CC66CC   #CC66FF
  #CC9900   #CC9933   #CC9966   #CC9999   #CC99CC   #CC99FF
  #CCCC00   #CCCC33   #CCCC66   #CCCC99   #CCCCCC   #CCCCFF
  #CCFF00   #CCFF33   #CCFF66   #CCFF99   #CCFFCC   #CCFFFF
  #FF0000   #FF0033   #FF0066   #FF0099   #FF00CC   #FF00FF
  #FF3300   #FF3333   #FF3366   #FF3399   #FF33CC   #FF33FF
  #FF6600   #FF6633   #FF6666   #FF6699   #FF66CC   #FF66FF
  #FF9900   #FF9933   #FF9966   #FF9999   #FF99CC   #FF99FF
  #FFCC00   #FFCC33   #FFCC66   #FFCC99   #FFCCCC   #FFCCFF
  #FFFF00   #FFFF33   #FFFF66   #FFFF99   #FFFFCC   #FFFFFF


Aujourd'hui, les performances de nos ordinateurs et des écrans associés, smartphones, tablettes ouvrent pleinement la palette des couleurs.

Je vous préconise néanmoins, selon la cible de votre site, de veillez à vien choisir vos codes couleurs.

Tous les employés d'entreprise n'ont ps forcément des écrans de hautes performances.

De même, bien penser à la disparité pouvant exister entre pays : tous n'ont pas accès au même matériel ou type d'ordinateur.



Les Codes ASCII

par | Jan 10, 2021 | Codage

INTERNET

Le code ASCII

Les codes ASCII


Dans le cas du texte, l’ensemble des caractères (lettre A à Z, puis a à z, chiffre 0 à 9, quelques symboles usuels $ ; £, *, + …. et la ponctuation) fait l’objet d’un code internationale dénommée ASCII.

Le code ASCII 7 bits



Code
0
1
2
3
4
5
6
7
8
9
0
NUL
SOH
STX
ETX
EOT
ENQ
ACK
BEL
BS
HT
10
LF
VT
NP
CR
SO
SI
DLE
DC1
DC2
DC3
20
DC4
NAK
SYN
ETB
CAN
EM
SUB
ESC
FS
GS
30
RS
US
SP
!
"
#
$
%
&
'
40
(
)
*
+
,
-
.
/
0
1
50
2
3
4
5
6
7
8
9
:
;
60
<
=
>
?
@
A
B
C
D
E
70
F
G
H
I
J
K
L
M
N
O
80
P
Q
R
S
T
U
V
W
X
Y
90
Z
[
\
]
^
_
`
a
b
c
100
d
e
f
g
h
i
j
k
l
m
110
n
o
p
q
r
s
t
u
v
w
120
x
y
z
{
|
}
~
DEL


De base, le code ASCII codait ces caractères sur 7 bits. Mais étant limité (du fait des 7 bits) et n’incluant pas, du par de son origine américaine, les caractères accentués, il a été étendu à 8 bits.

Le code ASCII 8 bits



Code
0
1
2
3
4
5
6
7
8
9
0
NUL
SOH
STX
ETX
EOT
ENQ
ACK
BEL
BS
HT
10
LF
VT
NP
CR
SO
SI
DLE
DC1
DC2
DC3
20
DC4
NAK
SYN
ETB
CAN
EM
SUB
ESC
FS
GS
30
RS
US
SP
!
"
#
$
%
& '
40
(
)
*
+
,
-
.
/
0
1
50
2
3
4
5
6
7
8
9
:
;
60
<
=
>
?
@
A
B
C
D
E
70
F
G
H
I
J
K
L
M
N
O
80
P
Q
R
S
T
U
V
W
X
Y
90
Z
[
\
]
^
_
`
a
b
c
100
d
e
f
g
h
i
j
k
l
m
110
n
o
p
q
r
s
t
u
v
w
120
x
y
z
{
|
}
~
DEL
€
130
‚
ƒ
„
†
‡
ˆ
‰
Š
‹
140
Œ
Ž
‘
’
“
”
•
150
–
—
˜
™
š
›
œ
ž
Ÿ
160
espace
¡
¢
£
¤
¥
¦
§
¨
©
170
ª
«
®
¯
°
±
²
³
180
´
µ
·
¸
¹
º
»
¼
½
190
¾
¿
À
Á
Â
Ã
Ä
Å
Æ
Ç
200
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
210
Ò
Ó
Ô
Õ
Ö
×
Ø
Ù
Ú
Û
220
Ü
Ý
Þ
ß
à
á
â
ã
ä
å
230
æ
ç
è
é
ê
ë
ì
í
î
ï
240
ð
ñ
ò
ó
ô
õ
ö
÷
ø
ù
250
ú
û
ü
ý
þ
ÿ


Les balises HTML

par | Jan 3, 2021 | Codage

INTERNET

Les balises html

 

Les codes de définition d'un fichier HTML


Ces codes sont obligatoires. Ils permettent en particulier de délimiter les pages HTML.


< HTML >... < /HTML > Délimitation (début et fin) d'un fichier Html
< HEAD >...< /HEAD > délimitation de l'en-tête d'un fichier Html
< TITLE >...< /TITLE > Titre affiché par le browser (élément de HEAD)
< META.......... > Codification utilisé par certain moteur de recherche (voir page sur les codes META)
>< BODY >...< /BODY > Délimitation (début et fin) du code qui sera affiché sur le navigateur
< BODY bgcolor="#XXXXXX" > Couleur d'arrière-plan (codage RVB en hexadécimal)
>< BODY background="xyz.gif" > >Image affichée en arrière-plan de la page
< !--...-- > Pour placer des commentaires au sein de pages html


 

Code de mise en forme du texte


Ces balises permettent de jouer sur les caractères et la mise en page du texte.
< B >...< /B > Texte en gras
< STRONG >...< /STRONG > idem d'une autre manière
< SUB >...< /SUB > Texte en indice
< SUP >...< /SUP > Texte en exposant
< U >...< /U > Texte souligné
< EM >...< /EM > Texte en italique
< I >...< /I > idem d'une autre manière
< BLINK >...< /BLINK > Texte clignotant (Netscape seul)
< BIG >...< /BIG > Agrandissement de la taille des caractères
< SMALL >...< /SMALL > Réduction de la taille des caractères
< FONT color="#XXXXXX" >...< /FONT > Texte en couleur où XXXXXX est une valeur hexadécimale (codage RVB)
< FONT size=A >...< /FONT > Taille des caractères où A est une valeur de 1 à 7
>< NOBR >...< /NOBR > Empêche les ruptures automatiques de ligne des navigateurs
< PRE >...< /PRE > Texte préformaté, soit avec affichage de tous les espaces et sauts de ligne
< BR > A la ligne
< BLOCKQUOTE >...< /BLOCKQUOTE > Texte écrit en retrait (équivalent d'une tabulation)
< CENTER >...< /CENTER >
< DIV align=cente r> ...< /DIV > Idem d'une autre manière
< DIV align=left > ...< /DIV > Aligne à gauche les éléments (textes, images, liens, tableaux, ...) compris entre ces deux balises
< DIV align=right > ...< /DIV > Aligne à droite les éléments (textes, images, liens, tableaux, ...) compris entre ces deux balises

< Hx >...

< Hx align=center >...

< Hx align=left >...

< Hx align=right >...

Texte où x a une valeur de 1 à 7

Texte centré

Texte aligné à gauche

Texte aligné à droite

< P >...< /P >

< P align=center >...< /P >

< P align=left >...< /P >

< P align=right >...< /P >

Nouveau paragraphe

Paragraphe centré

Paragraphe aligné à gauche

Paragraphe aligné à droite



Code pour gérer des listes


< UL >

< LI >.......< /LI >

< /UL >

Début d'une liste, non numérotée avec utilisation de puce.

Elément de liste

Détermine la fin de la liste

< OL >

< LI >

< /OL >

Débute une liste numérotée

Elément de liste

Détermine la fin de la liste

< DL >

< DT >...< /DT >

< DD >...< /DD >

< /DL >

Liste de type glossaire

Terme de glossaire (sans retrait)

Explication du terme (avec retrait)

Fin du glossaire

< HR >

Trait horizontal (centré par défaut)

< HR width="x%" >

Largeur du trait en % de la taille de la fenêter du navigateur

< HR width=x >

Largeur du trait en pixels

< HR size=x >

Epaisseur du trait en pixels

< HR align=center >

< HR align=left >

< HR align=right >

Trait centré (défaut)

Trait aligné à gauche

Trait aligné à droite

< HR noshade >

Trait sans effet d'ombrage


Code pour créer des liens web


< A href="http://..." >...< /A >

Lien vers une page Web situé sur un autre serveur.

< A href="mailto:..." >...< /A >

Lien vers une adresse Email

< A href="fichier.htm" >...< /A >

Lien vers une page locale fichier.htm située dans le même dossier

< A name="xyz" >...< /A >

Définition d'une ancre

< A href="abc" >...< /A >

Lien vers l'ancre abc.



Code pour insérer des images


< IMG src="xyz.gif" >

< IMG src="xyz.jpg >

Insertion d'une image au format gif ou jpg

 

< IMG ... width=a height=b >

Image affiché dans un cadre de a * b pixels

< IMG ... border=b >

Affichage d'une bordure

< IMG ... alt="votre texte" >

Texte alternatif. Affiché avec le cadre de l'image lors de son chargement, ou quand l'internaute positionne sa souris sur l'image

< IMG ... align=bottom >

< IMG ... align=middle >

< IMG ... align=top >

< IMG ... align=left >

< IMG ... align=right >

Aligne l'image en bas

Aligne l'image au milieu

Aligne l'image en haut

Aligne l'image à gaughe

Aligne l'image à droite

< IMG ... hspace=e >

< IMG ... vspace=f >

Détermine un espacement horizontal entre l'image et le texte

Détermine un espacement vertical entre l'image et le texte



Code pour construire des tableaux


< TABLE >...< /TABLE >

Définition d'un tableau

< TABLE width="x%" >< /td >

Largeur du tableau en %

< TABLE width=x >

Largeur du tableau en pixels

< TABLE border=x >

Largeur de la bordure

< TABLE cellpadding=x>

Espace entre la bordure et le texte

< TABLE cellspacing=x >

Epaisseur du trait entre les cellules

< TR >...< /TR >

Ligne du tableau

< TD>...< /TD >

Cellule du tableau

< TD bgcolor="#XXXXXX">

Couleur d'une cellule de tableau

< TD width="x%" >

< TD width=x >

Largeur de colonne en %

Largeur de colonne en pixels

< TD align=center >

< TD align=left >

< TD align=right >

Texte dans la cellule centré

Texte dans la cellule aligné à gauche

Texte dans la cellule aligné à droite

< TD valign=bottom >

< TD valign=middle >

< TD valign=top >

Alignement vers le bas du contenu d'une cellule

Centrage vertical du contenu d'une cellule

Alignement vers le haut du contenu d'une cellule

< TD colspan=x >

< TD rowspan=x >

Nombre de cellules à fusionner horizontalement

Nombre de cellules à fusionner verticalement