Il est possible de spécifier une couleur d’arrière-plan pour l’ensemble d’une page.
Deux solutions existent.
Utiliser les noms de couleur en anglais
- white = blanc
- black = noir
- pink = rose
- grey = gris
- etc.
Utiliser les couleurs hexadécimales*
Également appelées RGB
(Red – Green – Blue),
en Français RVB
(Rouge – Vert – Bleu).
Elles se présentent
sous la forme #FF00FF
La première solution peut sembler plus simple et intuitive, mais réserve parfois des surprises car tous les écrans ne prennent pas en charge les couleurs de la même façon.
Pour plus de précision il vaut mieux donc employer les codes couleurs au format hexadécimal.
Comment fonctionnent les couleurs hexadécimales ?
Chaque composante de couleur (R = Red / G = Green / B = Blue ou R = Rouge / V = Vert / B = Bleu) est définie par une valeur comprise entre 0 et 255.
Les couleurs sont exprimées en langage hexadécimal, c’est-à-dire par des chiffres de 0 à 9 et des lettres de A à F : 00 correspond à une absence totale et FF à la luminosité maximale.
Ainsi le code 000000 correspond à la couleur Noir.
Quelques couleurs et leur représentation hexadécimale
| Couleur | Code hexadécimal | Couleur | Code hexadécimal |
|---|---|---|---|
| Noir | #000000 | Rouge | #FF0000 |
| Blanc | #FFFFFF | Vert | #00FF00 |
| Gris | #999999 | Bleu | #0000FF |
On peut consulter ces équivalences, avec de nombreuses nuances, sur la page
http://www.letoileauxsecrets.fr/couleurs/couleurs-web.html
Modifier la couleur d’arrière-plan d’une page HTML
Il faut utiliser l’attribut bgcolor (background color = couleur d’arrière-plan) à l’intérieur de la balise <body> :
Spécifier une image d’arrière-plan pour une page HTML
Insérer l’attribut background (background = arrière-plan) à l’intérieur de la balise <body> et spécifier le nom de l’image (et son emplacement s’il est différent de celui de la page).
Exercice 6 : insérer une couleur d’arrière-plan
- Ouvrir le Bloc-Notes
- Le texte ci-contre est un exemple, chacun choisira la couleur qu’il veut utiliser…
Saisir tout le texte
soi-même
pour bien s’entraîner,
on n’apprend rien avec
un copier-coller !
<html>
<head>
<title>Page 6</title>
<meta name="description" content="couleur arrière plan">
<meta name="keywords" content="internet, html, couleur">
</head>
<body bgcolor="ccccff">
<h2>L'arrière-plan est de couleur pervenche,
dont le code est #ccccff</h2>
<h3>Le code peut être écrit en minuscules
ou en majuscules.</h3>
</body>
</html>
Enregistrer au format exercice-6.html
puis ouvrir dans le navigateur.
Exercice 7 : insérer une image d’arrière-plan
- Ouvrir le Bloc-Notes
- Le texte ci-contre est un exemple, chacun choisira l’image qu’il veut utiliser…
Saisir tout le texte
soi-même
pour bien s’entraîner,
on n’apprend rien avec
un copier-coller !
<html>
<head>
<title>Page 7</title>
<meta name="description" content="image arrière plan">
<meta name="keywords" content="internet, html, image">
</head>
<body background="dock.jpg" bgproperties="fixed">
<h2>L'arrière-plan est l'image "dock.jpg" <br>
L'attribut et la valeur <em>bgproperties="fixed"</em>
permettent d'avoir un arrière-plan fixe et en filigrane
lorsque la page défile avec l'ascenseur.</h2>
<h3>L'image est dans le même dossier que la page,
sinon il faut préciser son emplacement.</h3>
<h4>Si elle est plus petite que l'écran,
elle se répètera pour le remplir.</h4>
<h5>Ne pas utiliser une image trop lourde qui
ralentirait le chargement de la page.</h5>
</body>
</html>
Enregistrer au format exercice-7.html
puis ouvrir dans le navigateur.
Dans le prochain article, il sera question de la présentation du texte.