HTML - Couleurs

Bienvenue, futurs développeurs web ! Aujourd'hui, nous plongeons dans le monde vibrant des couleurs HTML. En tant que votre professeur d'informatique du coin, je suis excité de vous guider à travers cette aventure colorée. À la fin de ce tutoriel, vous serez peindre le web avec la confiance d'un Picasso digital !

HTML - Colors

Méthodes de Codage des Couleurs HTML

Avant de commencer à parsemer de couleurs toutes nos pages web, comprenons comment nous pouvons représenter les couleurs en HTML. Il y a plusieurs façons de spécifier les couleurs, et chacune a son charme. Jetons un coup d'œil à elles une par une :

Noms de Couleurs
Valeurs Hexadécimales
Valeurs RGB
Valeurs RGBA
Valeurs HSL
Valeurs HSLA

Voici un tableau pratique résumant ces méthodes :

Méthode	Exemple	Description
Noms de Couleurs	`red`	Noms de couleurs prédéfinis
Hexadécimales	`#FF0000`	Code à 6 chiffres représentant les valeurs RVB
RGB	`rgb(255, 0, 0)`	Rouge, Vert, Bleu valeurs (0-255)
RGBA	`rgba(255, 0, 0, 0.5)`	RVB avec valeur Alpha (opacité)
HSL	`hsl(0, 100%, 50%)`	Teinte, Saturation, Luminosité
HSLA	`hsla(0, 100%, 50%, 0.5)`	HSL avec valeur Alpha

Ne vous inquiétez pas si cela ressemble à un bol de lettres pour l'instant. Nous allons les décomposer étape par étape !

Définir la Couleur du Texte

Commençons par quelque chose de simple : changer la couleur de notre texte. Nous utilisons la propriété color en CSS pour y parvenir. Voici un exemple :

<p style="color: blue;">Ce texte est bleu !</p>

Dans cet exemple, nous utilisons un style en ligne pour définir la couleur. L'attribut style nous permet d'ajouter directement du CSS à un élément HTML. La partie color: blue; indique au navigateur de rendre ce texte en bleu.

Mais que faire si nous voulons utiliser une teinte spécifique de bleu ? C'est là que nos autres méthodes de codage des couleurs deviennent utiles :

<p style="color: #0000FF;">C'est aussi du bleu, en utilisant un code hexadécimal !</p>
<p style="color: rgb(0, 0, 255);">Et ceci est du bleu en utilisant des valeurs RVB !</p>

Les deux exemples produiront la même teinte de bleu que notre premier exemple. Le code hexadécimal #0000FF et la valeur RVB rgb(0, 0, 255) représentent tous deux du bleu pur.

Définir la Couleur de Fond

Maintenant, ajoutons un peu de peps à notre page avec des couleurs de fond. Nous utilisons la propriété background-color pour cela :

<div style="background-color: yellow; padding: 10px;">
Cette div a un arrière-plan jaune !
</div>

Dans cet exemple, nous définissons la couleur de fond d'un élément div en jaune. Le padding: 10px; est simplement pour donner à notre texte un peu d'espace.

Souvenez-vous quand j'ai mentionné RGBA plus tôt ? Voici où il peut être vraiment utile :

<div style="background-color: rgba(255, 255, 0, 0.5); padding: 10px;">
Cette div a un arrière-plan jaune semi-transparent !
</div>

La 0.5 à la fin de rgba(255, 255, 0, 0.5) fixe l'opacité à 50%, nous offrant un joli effet semi-transparent.

Définir la Couleur de Bordure

Mettons en valeur notre travail avec des bordures colorées :

<div style="border: 2px solid green; padding: 10px;">
Cette div a une bordure verte !
</div>

Ici, nous utilisons la propriété border pour créer une bordure de 2 pixels d'épaisseur, solide et verte autour de notre div.

Nous pouvons aussi utiliser des couleurs différentes pour chaque côté de la bordure :

<div style="border-top: 2px solid red;
border-right: 2px solid green;
border-bottom: 2px solid blue;
border-left: 2px solid yellow;
padding: 10px;">
Cette div a une couleur différente pour chaque bordure !
</div>

Couleurs HTML - Noms de Couleurs

HTML vient avec un ensemble de noms de couleurs prédéfinis que vous pouvez utiliser. Ceux-ci sont pratiques lorsque vous êtes en phase de prototype ou que vous avez besoin d'une couleur rapide sans vous soucier des teintes spécifiques.

<p style="color: tomato;">Ce texte est de couleur tomate !</p>
<p style="color: skyblue;">Ce texte est bleu céleste !</p>
<p style="color: mediumseagreen;">Ce texte est vert medium mer !</p>

16 Couleurs Standard du W3C

Le W3C (World Wide Web Consortium) a défini 16 couleurs standard prises en charge par tous les navigateurs. Ce sont :

Noir
Argent
Gris
Blanc
Bourgogne
Rouge
Pourpre
Fuchsia
Vert
Vert clair
Olive
Jaune
Bleu marine
Bleu
Sélénite
Eau

Voici une démonstration rapide :

<table>
<tr>
<td style="background-color: black; color: white;">Noir</td>
<td style="background-color: silver;">Argent</td>
<td style="background-color: gray;">Gris</td>
<td style="background-color: white;">Blanc</td>
</tr>
<tr>
<td style="background-color: maroon; color: white;">Bourgogne</td>
<td style="background-color: red;">Rouge</td>
<td style="background-color: purple; color: white;">Pourpre</td>
<td style="background-color: fuchsia;">Fuchsia</td>
</tr>
<tr>
<td style="background-color: green; color: white;">Vert</td>
<td style="background-color: lime;">Vert clair</td>
<td style="background-color: olive;">Olive</td>
<td style="background-color: yellow;">Jaune</td>
</tr>
<tr>
<td style="background-color: navy; color: white;">Bleu marine</td>
<td style="background-color: blue; color: white;">Bleu</td>
<td style="background-color: teal; color: white;">Sélénite</td>
<td style="background-color: aqua;">Eau</td>
</tr>
</table>

Et voilà, amis ! Vous êtes maintenant équipés des connaissances pour ajouter une touche de couleur à vos pages web. Souvenez-vous, avec de grandes couleurs vient une grande responsabilité - utilisez vos nouvelles compétences avec sagesse pour créer des sites web visuellement attrayants et accessibles.

En conclusion, voici une petite blague de développeur web pour vous : Pourquoi les développeurs web préfèrent-ils le mode sombre ? Parce que la lumière attire les bugs !

Continuez à expérimenter avec les couleurs, et n'ayez pas peur de vous montrer créatif. Bon codage, et que vos pages web soient toujours colorées !

Credits: Image by storyset