NSI
Le codage des couleurs sur le web
[Stéphane BEAUDET – Frédéric PEURIERE]
Connaître le principe du codage des couleurs
Savoir manipuler un fichier CSS pour modifier les couleurs dans une page web
✔ LE CODAGE DES COULEURS:
Ouvrez dans FIREFOX l´animation COULEURS sur le site puis répondez aux questions:
UNE IMAGE BASIQUE :
1) La définition d’écran est le nombre de pixels que peut afficher une carte graphique sur un
écran en hauteur et en largeur. Quelle est la définition de cette image ?
2) Combien de pixels contient-elle ?
3) Sur combien de bits est codée cette image ?
N & B NIVEAUX DE GRIS:
4) Justifiez le fait que le codage sur 3 bits donne accès à 8 niveaux de gris.
5) A quel tableau de valeur correspond la partie d’image de « la dame » encadrée en rouge ?
110 010 111 100 010 000
101 100 001 101 100 001
111 000 011 110 101 011
100 010 111
000 100 101
111 000 011
LA COULEUR RGB:
6) Combien de couleur peut-on coder pour chaque pixel?
7) Sur combien d’octets est codé chaque pixel ?
8) Le codage RGB du noir est (0, 0, 0), celui dans blanc est (255, 255, 255). Donnez le codage
correspondant aux couleurs suivantes : Bleu primaire, jaune, rouge primaire, cyan et
magenta.
9) Quel serait le codage de ces couleurs en hexadécimal?
LE CODAGE DES COULEURS SUR LE WEB
10) A quel tableau de valeur correspond la partie d’image de la tortue ninja encadrée en rouge ?
Complétez la case qui manque.
255,0,255 0,255,0 255,0,255 0,255,0
0,255,0 80,80,0 0,255,0 0,255,0 0,80,80 0,255,0
✔ MODIFIER LES COULEURS D´UNE PAGE WEB AVEC UNE
FEUILLE DE STYLE (CSS):
Ouvrez la page web [Link] du chapitre précédent dans FIREFOX puis ouvrez la console web.
On peut modifier le fichier CSS dans l´EDITEUR DE STYLE.
A l´aide du tableau ci-dessous, modifiez librement la couleur des éléments HTML de la page...
CODAGE CSS
Style de l´élément possédant l´attribut .jaune {
class='jaune' dans le code HTML. Ce color:#000000;
code de la page est consultable dans background-color:#FFCC00;
l´inspecteur de la console. }
#texte1 {
text-align:center;
Style de l´élément possédant l´attribut width: 65%;
id='texte1' dans le code HTML. font-size: 25px;
background: rgba(230,230,230,.5);
}
body {
Style de l´ensemble le de la page
}
couleur du texte au format RGB color: rgb(rouge, vert, bleu);
// rouge vert et bleu sont des entiers entre et
255
couleur du texte au format RGBA color: rgba(rouge, vert, bleu, opacité);
// l´opacité (alpha) varie entre 0 et 1
color: #000000;
couleur du texte au format hexadécimal // on obtient un texte noir
color: #00FF00;
// on obtient un texte vert
couleur de texte nommée color: red;
// les navigateurs modernes supportent 140
couleurs nommées
background: #0000FF;
couleur de fond d´un élément HTML // on obtient un fond bleu, on peut utiliser les
trois codages décrits au dessus.
