From 73d9be8f9c1ff3622f37fffa117d0f435f7ad4a0 Mon Sep 17 00:00:00 2001 From: tristantheb Date: Sun, 11 Apr 2021 16:41:56 +0200 Subject: L10N: Update content of the HTML section - Part 1 (#299) * UPDATE: Update content of the HTML page with en-US * FIX: Removing KS or the translation * UPDATE: Update content of the Applying_color page * UPDATE: Update content of the Block-level_elements page * UPDATE: Update content of the CORS_enabled_image page * UPDATE: Update content of the Date_and_time_formats page * FIX: Fixing html position * Minor fix on html * UPDATE: Update content of the Inline_elements page * UPDATE: Update content of the Link_types page * UPDATE: Update content of the Microdata page * UPDATE: Update content of the Microformats page * UPDATE: Update content of the Preloading_content page * UPDATE: Updating the q_mode_&_s_mode page + removing old invalid link * UPDATE: Removing xref KS and update links * UPDATE: Update content layout and remove old link on Using_the_application_cache page * L10N: Translation of the Viewport_meta_tag page * Review - HTML Applying colors - minor typos and a missing paragraph * Review - HTML Block Elements - minor typos / lint * Review - HTML CORS Images - minor rewording / link fix * Review - HTML date time formats - linting typography, minor changes * Review - HTML Landing page - minor rewording, typos * Review - HTML Inline elements - minor linting / example translation * Review - HTML link types - lint HTML / rm brs * Review - HTML microdata - minor linting * Review - HTML microformat - minor typofixes * Review - HTML preloading - minor changes * Review - HTML quirks - minor changes / rm deadlinked section * Review - HTML element references - minor change * Review - HTML Meta Viewport - minor changes Co-authored-by: julieng --- files/fr/web/html/applying_color/index.html | 310 +++++----- files/fr/web/html/block-level_elements/index.html | 178 +++--- files/fr/web/html/cors_enabled_image/index.html | 61 +- files/fr/web/html/date_and_time_formats/index.html | 671 +++++++++++---------- files/fr/web/html/index.html | 130 ++-- files/fr/web/html/inline_elements/index.html | 189 +++--- files/fr/web/html/link_types/index.html | 659 ++++++++++---------- files/fr/web/html/microdata/index.html | 194 +++--- files/fr/web/html/microformats/index.html | 256 ++++---- files/fr/web/html/preloading_content/index.html | 178 +++--- .../html/quirks_mode_and_standards_mode/index.html | 34 +- files/fr/web/html/reference/index.html | 28 +- .../html/using_the_application_cache/index.html | 329 +++++----- files/fr/web/html/viewport_meta_tag/index.html | 100 +++ 14 files changed, 1731 insertions(+), 1586 deletions(-) create mode 100644 files/fr/web/html/viewport_meta_tag/index.html diff --git a/files/fr/web/html/applying_color/index.html b/files/fr/web/html/applying_color/index.html index f37557b4fa..f7c67a9c00 100644 --- a/files/fr/web/html/applying_color/index.html +++ b/files/fr/web/html/applying_color/index.html @@ -2,163 +2,169 @@ title: Appliquer des couleurs sur des éléments HTML grâce à CSS slug: Web/HTML/Applying_color tags: + - Beginner - CSS + - CSS Colors - Débutant - Guide - HTML + - HTML Colors + - HTML Styles + - Styling HTML + - color translation_of: Web/HTML/Applying_color original_slug: Web/HTML/Appliquer_des_couleurs ---
{{HTMLRef}}
-

La couleur fait partie intégrante des moyens d'expressions. Lorsqu'on écrit un site web, il est naturel d'y ajouter des couleurs dans la mise en forme. Avec CSS, il existe de nombreuses façons d'ajouter de la couleur aux éléments HTML afin d'obtenir le résultat souhaité. Cet article est une introduction détaillée aux différentes méthodes permettant d'appliquer des couleurs CSS en HTML.

+

La couleur fait partie intégrante des moyens d'expressions. Lorsqu'on écrit un site web, il est naturel d'y ajouter des couleurs dans la mise en forme. Avec CSS, il existe de nombreuses façons d'ajouter de la couleur aux éléments HTML afin d'obtenir le résultat souhaité. Cet article est une introduction détaillée aux différentes méthodes permettant d'appliquer des couleurs CSS en HTML.

L'ajout de couleur à un document HTML s'avère assez simple et permet de colorer presque tous les éléments.

-

Nous allons voir ici la liste de ce qui peut être coloré, la liste des propriétés CSS impliquées, les différentes façons de décrire une couleur, comment utiliser des couleurs dans les feuilles de style et dans les scripts. Nous verrons également comment permettre à un utilisateur de sélectionner une couleur.

+

Nous allons aborder la plupart des points que vous devez connaître lorsque vous utilisez des couleurs, y compris une liste de ce que vous pouvez colorer et des propriétés CSS concernées, comment décrire une couleur, et comment utiliser les couleurs à la fois dans les feuilles de style et dans les scripts. Nous verrons également comment permettre à l'utilisateur de choisir une couleur.

-

Enfin, nous verrons comment utiliser les bonnes couleurs, en gardant à l'esprit les différentes notions d'accessibilité.

+

Ensuite, nous terminerons avec une brève discussion sur l'utilisation judicieuse des couleurs : comment sélectionner les couleurs adéquates tout en gardant à l'esprit les besoins des personnes daltoniennes par exemple.

-

Ce qui peut être coloré

+

Ce qui peut être coloré

-

On peut appliquer une couleur sur chaque élément HTML. Voyons plutôt quels sont les choses que l'on peut dessiner sur les éléments : le texte, la bordure, etc. Pour chacune de ces choses, nous verrons la liste des propriétés CSS qui permettent de les colorer.

+

On peut appliquer une couleur sur chaque élément HTML. Voyons plutôt quelles sont les choses que l'on peut dessiner sur les éléments : le texte, la bordure, etc. Pour chacune de ces choses, nous verrons la liste des propriétés CSS qui permettent de les colorer.

-

De façon générale, la propriété {{cssxref("color")}} permet de définir la couleur de premier plan pour le contenu d'un élément HTML et la propriété {{cssxref("background-color")}} permete de définir la couleur utilisé pour l'arrière-plan de l'élément. Ces propriétés peuvent être utilisées sur la quasi-totalité des éléments HTML.

+

De façon générale, la propriété color permet de définir la couleur de premier plan pour le contenu d'un élément HTML et la propriété background-color permet de définir la couleur utilisée pour l'arrière-plan de l'élément. Ces propriétés peuvent être utilisées sur la quasi-totalité des éléments HTML.

-

Texte

+

Texte

Lorsqu'un élément est affiché à l'écran, les propriétés suivantes déterminent la couleur du texte, celle de son arrière-plan et celle des décorations.

-
{{cssxref("color")}}
-
Cette propriété correspondra à la couleur utilisée pour dessiner le texte ainsi que ses décorations (tels que le soulignement, le surlingement, les rayures, etc.).
-
{{cssxref("background-color")}}
+
color
+
Cette propriété correspondra à la couleur utilisée pour dessiner le texte ainsi que ses décorations (tels que le soulignement, le surlignement, les rayures, etc.).
+
background-color
Cette propriété correspondra à la couleur utilisée en arrière-plan du texte.
-
{{cssxref("text-shadow")}}
-
Cette propriété permet d'ajouter un effet d'ombre au texte. Parmi les options de cette ombre, on a la couleur de base de l'ombre (qui participe au flou et qui est fusionnée avec l'arrière-plan selon les autres paramètres. Voir ce paragraphe pour en savoir plus.
-
{{cssxref("text-decoration-color")}}
+
text-shadow
+
Cette propriété permet d'ajouter un effet d'ombre au texte. Parmi les options de cette ombre, on a la couleur de base de l'ombre (qui participe au flou et qui est fusionnée avec l'arrière-plan selon les autres paramètres. Voir ce paragraphe pour en savoir plus.
+
text-decoration-color
Par défaut, les décorations du texte (le soulignement, les rayures, etc.) utilise la propriété color pour leurs couleurs. Il est cependant possible de passer outre cette valeur et de fournir une couleur différente avec la propriété text-decoration-color.
-
{{cssxref("text-emphasis-color")}}
+
text-emphasis-color
Cette propriété correspondra à la couleur utilisée pour dessiner les symboles d'emphase utilisés à côté des caractères du texte. Ces symboles sont principalement utilisés dans des textes écrits dans des langues d'Asie orientale.
-
{{cssxref("caret-color")}}
-
Cette  propriété correspondra à la couleur utilisée pour dessiner le curseur de saisie de texte dans l'élément. Cette propriété est uniquement pertinente pour les éléments qui sont éditables (par exemple {{HTMLElement("input")}} et {{HTMLElement("textarea")}} ou les éléments dont l'attribut {{htmlattrxref("contenteditable")}} est activé).
+
caret-color
+
Cette propriété correspondra à la couleur utilisée pour dessiner le curseur de saisie de texte dans l'élément. Cette propriété est uniquement pertinente pour les éléments qui sont éditables (par exemple <input> et <textarea> ou les éléments dont l'attribut contenteditable est activé).
-

Boîtes

+

Boîtes

Chaque élément est une boîte avec du contenu. Cette boîte possède un arrière-plan et une bordure, quel que soit le contenu qu'elle renferme

-
{{anch("Bordures")}}
-
Voir la section {{anch("Bordures")}} pour la liste des propriétés CSS qui peuvent être utilisées pour colorer la bordure d'une boîte.
-
{{cssxref("background-color")}}
+
Bordures
+
Voir la section Bordures pour la liste des propriétés CSS qui peuvent être utilisées pour colorer la bordure d'une boîte.
+
background-color
Cette propriété correspondra à la couleur d'arrière-plan, utilisée dans les zones où l'élément ne possède pas de contenu au premier plan.
-
{{cssxref("column-rule-color")}}
+
column-rule-color
Cette propriété correspondra à la couleur utilisée pour dessiner la ligne qui sépare des colonnes de texte.
-
{{cssxref("outline-color")}}
-
Cette propriété correspondra à la couleur utilisée pour le contour de l'élément. Le contour est différent de la bordure car il occupe un espace autour de la boîte et peut alors chevaucher le contenu d'une autre boîte. Le contour est généralement utilisé afin d'indiquer que l'élément a le focus et ainsi montrer quel élément reçoit les évènements de saisie.
+
outline-color
+
Cette propriété correspondra à la couleur utilisée pour le contour de l'élément. Le contour est différent de la bordure, car il occupe un espace autour de la boîte et peut alors chevaucher le contenu d'une autre boîte. Le contour est généralement utilisé afin d'indiquer que l'élément a le focus et ainsi montrer quel élément reçoit les évènements de saisie.
-

Bordures

+

Bordures

-

Tout élément possède une bordure dessinée autour. Une bordure simple est représentée par une ligne dessinant un rectangle autour du contenu de l'élément. Vous pouvez lire la mise en forme des bordures grâce à CSS afin d'approfondir ce sujet.

+

Tout élément possède une bordure dessinée autour. Une bordure simple est représentée par une ligne dessinant un rectangle autour du contenu de l'élément. Vous pouvez lire la mise en forme des bordures grâce à CSS afin d'approfondir ce sujet.

-

Il est possible d'utiliser la propriété raccourcie {{cssxref("border")}} qui permet de configurer l'ensemble des caractéristiques d'une bordure en une seule règle (y compris les caractéristiques qui ne sont pas liées aux couleurs comme la largeur, le style (ligne pleine, pointillés, etc.) et ainsi de suite).

+

Il est possible d'utiliser la propriété raccourcie border qui permet de configurer l'ensemble des caractéristiques d'une bordure en une seule règle (y compris les caractéristiques qui ne sont pas liées aux couleurs comme la largeur, le style (ligne pleine, pointillés, etc.) et ainsi de suite).

-
{{cssxref("border-color")}}
+
border-color
Cette propriété correspondra à la couleur qui sera utilisée pour chacun des côtés de la bordure.
-
{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("border-bottom-color")}}
+
border-left-color, border-right-color, border-top-color, border-bottom-color
Ces propriétés permettent d'indiquer une couleur différente pour chaque côté de la bordure de l'élément.
-
{{cssxref("border-block-start-color")}} et {{cssxref("border-block-end-color")}}
-
Ces propriétés permettent de définir les couleurs utilisées pour les côtés de la bordure dans l'axe orthogonal au sens d'écriture. Ainsi, si le texte est écrit en français (de gauche à droite), border-block-start-color permettra de définir le côté haut de la bordure et border-block-end-color le côté bas.
-
{{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}
-
Ces propriétés permettent de définir les couleurs utilisées pour les bordures pour les côtés sur l'axe du sens d'écriture. Les côtés impactés dépendent donc des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} qui permettent, la plupart du temps, d'ajuster la directionnalité du texte en fonction de la langue utilisée. Si le texte est écrit de droite à gauche, border-inline-start-color correspondra à la couleur appliquée sur le côté droit.
+
border-block-start-color et border-block-end-color
+
Ces propriétés permettent de définir les couleurs utilisées pour les côtés de la bordure dans l'axe orthogonal au sens d'écriture. Ainsi, si le texte est écrit en français (de gauche à droite), border-block-start-color permettra de définir le côté haut de la bordure et border-block-end-color le côté bas. Ces propriétés sont complétées par les propriétés border-inline-* qui agissent sur l'autre axe.
+
border-inline-start-color et border-inline-end-color
+
Ces propriétés permettent de définir les couleurs utilisées pour les bordures pour les côtés sur l'axe du sens d'écriture. Les côtés impactés dépendent donc des propriétés writing-mode, direction, and text-orientation qui permettent, la plupart du temps, d'ajuster la directionnalité du texte en fonction de la langue utilisée. Si le texte est écrit de droite à gauche, border-inline-start-color correspondra à la couleur appliquée sur le côté droit.
-

Les autres méthodes pour utiliser de la couleur

+

Autres méthodes pour utiliser de la couleur

CSS n'est pas la seule technologie web qui gère des couleurs. Voici les autres technologies qui permettent d'apporter de la couleur sur une page web.

L'API Canvas
-
Cette API permet de dessiner des graphiques matriciels en deux dimensions à l'intérieur d'un élément {{HTMLElement("canvas")}}. Vous pouvez lire le tutoriel sur l'API Canvas pour en savoir plus.
+
Cette API permet de dessiner des graphiques matriciels en deux dimensions à l'intérieur d'un élément <canvas>. Vous pouvez lire le tutoriel sur l'API Canvas pour en savoir plus.
SVG (Scalable Vector Graphics)
-
Ce format permet de dessiner des images en indiquant des commandes pour dessiner des formes, des motifs et des lignes afin de composer une image. Les commandes SVG sont construites dans un fichier XML et peuvent être embarquées dans une page web grâce à un élément {{HTMLElement("img")}}.
+
Ce format permet de dessiner des images en indiquant des commandes pour dessiner des formes, des motifs et des lignes afin de composer une image. Les commandes SVG sont construites dans un fichier XML et peuvent être embarquées dans une page web grâce à un élément <img>.
WebGL
-
L'API Web Graphics Library est une API basée sur OpenGL ES qui permet de dessiner en deux ou trois dimensions sur le Web. Voir Apprendre WebGL pour les graphismes en 2D et 3D afin d'en savoir plus.
+
L'API Web Graphics Library est une API basée sur OpenGL ES qui permet de dessiner en deux ou trois dimensions sur le Web. Voir le tutoriel WebGL afin d'en savoir plus.
-

Comment décrire une couleur

+

Comment décrire une couleur

-

Afin de représente une couleur en CSS, il est nécessaire de trouver une méthode pour « traduire » le concept analogique de couleur dans un format numérique qu'un ordinateur pourra utiliser. Pour ce faire, on décompose la couleur en différentes composantes. Cela peut être la part de chaque couleur primaire ou bien la teinte et la luminosité de la couleur. Bref, il existe différentes façons de décrire une couleur en CSS.

+

Afin de représenter une couleur en CSS, il est nécessaire de trouver une méthode pour « traduire » le concept analogique de couleur dans un format numérique qu'un ordinateur pourra utiliser. Pour ce faire, on décompose la couleur en différentes composantes. Cela peut être la part de chaque couleur primaire ou bien la teinte et la luminosité de la couleur. Bref, il existe différentes façons de décrire une couleur en CSS.

-

Pour des informations plus détaillées sur chaque type de valeur, vous pouvez consulter la page de la référence CSS à propos de l'unité {{cssxref("<color>")}}.

+

Pour des informations plus détaillées sur chaque type de valeur, vous pouvez consulter la page de la référence CSS à propos de l'unité <color>.

-

Mots-clés

+

Mots-clés

-

Un ensemble standard de noms de couleurs a été défini et il est possible d'utiliser l'un de ces mots-clés plutôt qu'une représentation numérique s'il existe un mot-clé pour la valeur qu'on souhaite utiliser. Les mots-clés désignant les couleurs regroupent les couleurs primaires et secondaires (tels quered pour rouge, blue pour bleu, orange), les tons de gris (allant de black pour noir à  white pour blanc et incluant des niveaux tels que darkgray (gris foncé) et lightgrey (gris clair)). D'autres couleurs sont également disponibles avec un mot-clé comme lightseagreen, cornflowerblue ou rebeccapurple.

+

Un ensemble standard de noms de couleurs a été défini et il est possible d'utiliser l'un de ces mots-clés plutôt qu'une représentation numérique s'il existe un mot-clé pour la valeur qu'on souhaite utiliser. Les mots-clés désignant les couleurs regroupent les couleurs primaires et secondaires (tels quered pour rouge, blue pour bleu, orange), les tons de gris (allant de black pour noir à white pour blanc et incluant des niveaux tels que darkgray (gris foncé) et lightgrey (gris clair)). D'autres couleurs sont également disponibles avec un mot-clé comme lightseagreen, cornflowerblue ou rebeccapurple.

-

Vous pouvez consulter cette liste pour connaître l'ensemble des mots-clés disponibles.

+

Vous pouvez consulter cette liste pour connaître l'ensemble des mots-clés disponibles.

-

Valeurs RGB

+

Valeurs RGB

Il existe trois façons de représenter une couleur RGB en CSS.

-

La notation hexadécimale

+

La notation hexadécimale

-

On peut utiliser une chaîne de caractères avec des chiffres hexadécimaux afin de représenter chacune des composantes (rouge, verte, bleue). On peut également décrire une quatrième composante pour l'opacité. Chaque composante est représentée par un nombre entre 0 et 255 (ce qui correspond à 0x00 et 0xFF en notation hexadécimale) ou par un nombre entre 0 et 15 (ce qui correspond à 0x0 et 0xF en notation hexadécimale). Toutes les composantes doivent être indiquées avec le même nombre de chiffres. Si c'est la notation à un seul chiffre qui est utilisée, la couleur finale sera calculée avec chaque composante doublée, autrement dit, "#D" sera converti en "#DD".

+

On peut utiliser une chaîne de caractères avec des chiffres hexadécimaux afin de représenter chacune des composantes (rouge, verte, bleue) (soit, en anglais, red, green, blue qui donne l'acronyme RGB). On peut également décrire une quatrième composante pour l'opacité. Chaque composante est représentée par un nombre entre 0 et 255 (ce qui correspond à 0x00 et 0xFF en notation hexadécimale) ou par un nombre entre 0 et 15 (ce qui correspond à 0x0 et 0xF en notation hexadécimale). Toutes les composantes doivent être indiquées avec le même nombre de chiffres. Si c'est la notation à un seul chiffre qui est utilisée, la couleur finale sera calculée avec chaque composante doublée, autrement dit, "#D" sera converti en "#DD".

-

Lorsqu'on utilise une chaîne de caractères avec un code hexadécimale, la chaîne de caractères commence toujours par le caractère "#". Le reste de la chaîne correspond aux chiffres hexadécimaux. L'utilisation des majuscules ou minuscules n'a pas d'importance.

+

Lorsqu'on utilise une chaîne de caractères avec un code hexadécimal, la chaîne de caractères commence toujours par le caractère "#". Le reste de la chaîne correspond aux chiffres hexadécimaux. L'utilisation des majuscules ou minuscules n'a pas d'importance.

"#rrggbb"
Cette forme indique une couleur opaque dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (0xrr), les deux chiffres suivants indiquent la composante verte (0xgg) et les deux derniers chiffres indiquent la composante bleue (0xbb).
"#rrggbbaa"
-
Cette forme indique une couleur dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (0xrr), les deux chiffres suivants indiquent la composante verte (0xgg), les deux chiffres suivants indiquent la composante bleue (0xbb), enfin, les deux derniers chiffres indiquent la composante alpha (0xaa) utilisée pour indiquer l'opacité de la couleur (plus la valeur est faible, plus la couleur est transparente).
+
Cette forme indique une couleur dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (0xrr), les deux chiffres suivants indiquent la composante verte (0xgg), les deux chiffres suivants indiquent la composante bleue (0xbb), enfin, les deux derniers chiffres indiquent la composante alpha (0xaa) utilisée pour indiquer l'opacité de la couleur (plus la valeur est faible, plus la couleur est transparente).
"#rgb"
Cette forme indique une couleur dont la composante rouge vaut 0xrr, la composante verte vaut 0xgg et dont la composante bleue vaut 0xbb.
"#rgba"
Cette forme indique une couleur dont la composante rouge vaut 0xrr, la composante verte vaut 0xgg et dont la composante bleue vaut 0xbb. Le canal alpha vaut 0xaa (plus la valeur est faible, plus la couleur sera transparente).
-

Par exemple, on pourra représenter un bleu pur et opaque avec les chaînes de caractères "#0000ff" ou "#00f". Pour le rendre opaquee à 25%, on utilisera "#0000ff44" ou "#00f4".

+

Par exemple, on pourra représenter un bleu pur et opaque avec les chaînes de caractères "#0000ff" ou "#00f". Pour le rendre opaque à 25%, on utilisera "#0000ff44" ou "#00f4".

-

La notation fonctionnelle RGB

+

La notation fonctionnelle RGB

-

La notation fonctionnelle RGB permet, comme les chaînes de caractères hexadécimales, de représenter des couleurs avec leurs composantes rouge, verte, bleue et éventuellement avec une composante alpha pour l'opacité. Toutefois, au lieu d'utiliser une chaîne de caractères, on utilise ici la fonction CSS {{cssxref("Type_color","rgb()","#rgb()")}}. Cette fonction prend trois arguments pour chacune des composantes (dans cet ordre) rouge, verte et bleue. Un quatrième paramètre, optionnel, permet d'indiquer la valeur du canal alpha.

+

La notation fonctionnelle RGB permet, comme les chaînes de caractères hexadécimales, de représenter des couleurs avec leurs composantes rouge, verte, bleue et éventuellement avec une composante alpha pour l'opacité. Toutefois, au lieu d'utiliser une chaîne de caractères, on utilise ici la fonction CSS rgb(). Cette fonction prend trois arguments pour chacune des composantes (dans cet ordre) rouge, verte et bleue. Un quatrième paramètre, optionnel, permet d'indiquer la valeur du canal alpha.

Voici les valeurs qui peuvent être utilisées pour chacun de ces paramètres :

red, green et blue
-
Chaque composante doit être un entier (type {{cssxref("<integer>")}}) compris entre 0 et 255 (inclus) ou un pourcentage (type {{cssxref("<percentage>")}}) compris entre 0% et 100%.
+
Chaque composante doit être un entier (type <integer>) compris entre 0 et 255 (inclus) ou un pourcentage (type <percentage>) compris entre 0% et 100%.
alpha
Le canal alpha est un nombre entre 0.0 (la couleur est alors totalement transparente) et 1.0 (complètement opaque). On peut également utiliser un pourcentage où 0% correspondra à la valeur 0.0 et 100% correspondra à la valeur 1.0.

Par exemple, on pourra représenter un rouge pur à moitié opaque grâce à rgb(255, 0, 0, 0.5) ou grâce à rgb(100%, 0, 0, 50%).

-

La notation fonctionnelle HSL

+

La notation fonctionnelle HSL

-

D'autres personnes préfèrent manipuler la notation HSL ou aussi appeléee « Teinte saturation luminosité » (NDT : HSL signifie Hue Saturation Lightness en anglais). Sur le Web, les couleurs HSL sont représentées grâce à la notation fonctionnelle hsl() (qui fonctionne de façon analogue à la fonction rgb()).

+

D'autres personnes préfèrent manipuler la notation HSL ou aussi appelée « Teinte saturation luminosité » (NDT : HSL signifie Hue Saturation Lightness en anglais). Sur le Web, les couleurs HSL sont représentées grâce à la notation fonctionnelle hsl() (qui fonctionne de façon analogue à la fonction rgb()).

-
HSL color cylinder -
Figure 1. Le cylindre HSL. Hue (la teinte) définit la couleur sur un axe radial qui parcourt les couleurs du spectre visible. La saturation est un pourcentage de la teinte entre un gris total et la couleur de la teinte vive. Enfin, la luminosité permet d'avoir des couleurs plus sombres (noir pour une luminosité nulle ou blanc pour une luminosité maximale). Cette image a été créée par SharkD sur Wikipédia et est distribuée avec la licence CC BY-SA 3.0.
-
-
+
HSL color cylinder +
Figure 1. Le cylindre HSL. Hue (la teinte) définit la couleur sur un axe radial qui parcourt les couleurs du spectre visible. La saturation est un pourcentage de la teinte entre un gris total et la couleur de la teinte vive. Enfin, la luminosité permet d'avoir des couleurs plus sombres (noir pour une luminosité nulle ou blanc pour une luminosité maximale). Cette image a été créée par SharkD sur Wikipédia et est distribuée avec la licence CC BY-SA 3.0.
+
+ -

La valeur de la teinte (H) est un angle qui début au rouge, parcourt le jaune, le vert, le cyan, le bleu et le magenta (avant de revenir à rouge avec un angle de 360°). Cette valeur identifie la teinte de base. La valeur utilisée est de type {{cssxref("<angle>")}} et on peut utiliser différentes unités disponibles en CSS comme les degrés (deg), les radians (rad), les grades (grad) ou les tours (turn).

+

La valeur de la teinte (H) est un angle qui commence au rouge, parcourt le jaune, le vert, le cyan, le bleu et le magenta (avant de revenir à rouge avec un angle de 360°). Cette valeur identifie la teinte de base. La valeur utilisée est de type <angle> et on peut utiliser différentes unités disponibles en CSS comme les degrés (deg), les radians (rad), les grades (grad) ou les tours (turn).

Ensuite, la saturation (S) indique la force de la teinte dans la couleur. Enfin, la luminosité (L) indique le niveau de gris de la couleur.

On peut faire une analogie avec la conception d'une couleur pour une peinture :

    -
  1. On commence avec une peinture de base qui possède l'intensité la plus forte pour une couleur donnée (par exemple, le bleu le plus intense qui puisse être affiché) : c'est la teinte (hue) (H). En CSS, c'est un angle qui détermine la couleur parmi une roue de couleurs.
    2. -
  2. Ensuite, on choisit une peinture avec un niveau de gris qui la force de la couleur. Est-ce qu'on veut qu'elle soit claire ou sombre, voire complètement noire ? C'est la luminosité (L). En CSS, c'est un pourcentage, 0% indiquant une couleur noire et 100% une couleur blanche.
    3. -
  3. Enfin, avec ces deux peintures, on décide de la proportion de chacune pour le mélange final : c'est la saturation (S). Plus cette valeur est élevée, plus on utilise la couleur de base, plus cette valeur est faible et plus on utilise la peinture grise.
    4. +
  4. On commence avec une peinture de base qui possède l'intensité la plus forte pour une couleur donnée (par exemple, le bleu le plus intense qui puisse être affiché) : c'est la teinte (hue) (H). En CSS, c'est un angle qui détermine la couleur parmi une roue de couleurs.
    5. +
  5. Ensuite, on choisit une peinture avec un niveau de gris qui la force de la couleur. Est-ce qu'on veut qu'elle soit claire ou sombre, voire complètement noire ? C'est la luminosité (L). En CSS, c'est un pourcentage, 0% indiquant une couleur noire et 100% une couleur blanche.
    6. +
  6. Enfin, avec ces deux peintures, on décide de la proportion de chacune pour le mélange final : c'est la saturation (S). Plus cette valeur est élevée, plus on utilise la couleur de base, plus cette valeur est faible et plus on utilise la peinture grise.

Il est également possible d'ajouter un canal alpha afin d'avoir une couleur partiellement (ou totalement) transparente.

@@ -185,59 +191,59 @@ th { } 
<table>
- <thead>
-  <tr>
-   <th scope="col">Couleur en notation HSL</th>
-   <th scope="col">Exemple</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>hsl(90deg, 100%, 50%)</code></td>
-   <td style="background-color: hsl(90deg, 100%, 50%);">&nbsp;</td>
-  </tr>
-  <tr>
-   <td><code>hsl(90, 100%, 50%)</code></td>
-   <td style="background-color: hsl(90, 100%, 50%);">&nbsp;</td>
-  </tr>
-  <tr>
-   <td><code>hsl(0.15turn, 50%, 75%)</code></td>
-   <td style="background-color: hsl(0.15turn, 50%, 75%);">&nbsp;</td>
-  </tr>
-  <tr>
-   <td><code>hsl(0.15turn, 90%, 75%)</code></td>
-   <td style="background-color: hsl(0.15turn, 90%, 75%);">&nbsp;</td>
-  </tr>
-  <tr>
-   <td><code>hsl(0.15turn, 90%, 50%)</code></td>
-   <td style="background-color: hsl(0.15turn, 90%, 50%);">&nbsp;</td>
-  </tr>
-  <tr>
-   <td><code>hsl(270deg, 90%, 50%)</code></td>
-   <td style="background-color: hsl(270deg, 90%, 50%);">&nbsp;</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Couleur en notation HSL</th>
+      <th scope="col">Exemple</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>hsl(90deg, 100%, 50%)</code></td>
+      <td style="background-color: hsl(90deg, 100%, 50%);">&nbsp;</td>
+    </tr>
+    <tr>
+      <td><code>hsl(90, 100%, 50%)</code></td>
+      <td style="background-color: hsl(90, 100%, 50%);">&nbsp;</td>
+    </tr>
+    <tr>
+      <td><code>hsl(0.15turn, 50%, 75%)</code></td>
+      <td style="background-color: hsl(0.15turn, 50%, 75%);">&nbsp;</td>
+    </tr>
+    <tr>
+      <td><code>hsl(0.15turn, 90%, 75%)</code></td>
+      <td style="background-color: hsl(0.15turn, 90%, 75%);">&nbsp;</td>
+    </tr>
+    <tr>
+      <td><code>hsl(0.15turn, 90%, 50%)</code></td>
+      <td style="background-color: hsl(0.15turn, 90%, 50%);">&nbsp;</td>
+    </tr>
+    <tr>
+      <td><code>hsl(270deg, 90%, 50%)</code></td>
+      <td style="background-color: hsl(270deg, 90%, 50%);">&nbsp;</td>
+    </tr>
+  </tbody>
 </table>

{{EmbedLiveSample("hsl-swatches", 300, 260)}}

-
-

Note : Il est possible d'omettre l'unité pour la valeur de la teinte (hue), l'unité par défaut utilisée sera alors les degrés (deg).

+
+

Note : Il est possible d'omettre l'unité pour la valeur de la teinte (hue), l'unité par défaut utilisée sera alors les degrés (deg).

-

Utiliser les couleurs

+

Utiliser les couleurs

Maintenant qu'on connaît les différentes propriétés CSS, comment décrire une couleur et dans quel format, on peut assembler cela pour utiliser les couleurs dans un document web. Comme on l'a vu précédemment, de nombreuses choses peuvent être colorées. Pour ce faire, on peut utiliser deux mécanismes : une « feuille de style » et du code JavaScript pour modifier et ajouter des couleurs dynamiquement.

-

Indiquer les couleurs via une feuille de style

+

Indiquer les couleurs via une feuille de style

La façon la plus simple (et la plus fréquemment utilisée) pour appliquer des couleurs est d'utiliser une feuille de style CSS qui sera traitée par le navigateur au moment d'afficher les éléments à l'écran. Par la suite, nous verrons plusieurs exemples (sans pour autant exploiter toutes ces propriétés).

Prenons un exemple et commençons par le résultat :

-
{{EmbedLiveSample("Indiquer_les_couleurs_via_une_feuille_de_style", 650, 150)}}
+
{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 200)}}

HTML

@@ -256,7 +262,7 @@ th { </div> </div> -

Ce fragment est plutôt simple : on utilise un élément {{HTMLElement("div")}} qui enveloppe le contenu, constitué de deux <div>, chacun avec une classe différente et contenant chacun un paragraphe (c'est-à-dire un élément {{HTMLElement("p")}}).

+

Ce fragment est plutôt simple : on utilise un élément <div> qui enveloppe le contenu, constitué de deux <div>, chacun avec une classe différente et contenant chacun un paragraphe (c'est-à-dire un élément <p>).

Voyons ensuite la feuille de style CSS appliquée au bloc HTML précédent.

@@ -272,9 +278,9 @@ th { border: 6px solid mediumturquoise; } -

Le sélecteur de classe .conteneur permet d'appliquer des styles à l'élément {{HTMLElement("div")}} qui enveloppe le reste du contenu. Pour ce style, on indique une largeur avec la propriété {{cssxref("width")}} et une hauteur avec la propriété {{cssxref("height")}}, on définit aussi une marge et une zone de remplissage avec {{cssxref("margin")}} et {{cssxref("padding")}}.

+

Le sélecteur de classe .conteneur permet d'appliquer des styles à l'élément <div> qui enveloppe le reste du contenu. Pour ce style, on indique une largeur avec la propriété width et une hauteur avec la propriété height, on définit aussi une marge et une zone de remplissage avec margin et padding.

-

La règle la plus intéressante est celle où on manipule la propriété {{cssxref("border")}} afin de dessiner une bordure sur l'extérieur de l'élément. Cette bordure sera une ligne pleine de 6 pixels avec la couleur mediumturquoise.

+

La règle la plus intéressante est celle où on manipule la propriété border afin de dessiner une bordure sur l'extérieur de l'élément. Cette bordure sera une ligne pleine de 6 pixels avec la couleur mediumturquoise.

Les deux boîtes colorées possèdent un certain nombre de propriétés communes. On utilise donc une classe : .boite pour laquelle on définit ces propriétés qui seront appliquées sur les deux éléments :

@@ -289,7 +295,7 @@ th { align-items: center; } -

Pour résumer, les styles ciblés par .boite indiquent la taille de la boîte, la configuration de la police de caractères utilisée, centrent le contenu des boîtes grâce aux boîtes flexibles CSS. Pour cela, on utilise le mode d'affichage flex avec {{cssxref("display", "display: flex")}} et on paramètre les propriétés {{cssxref("justify-content")}} et {{cssxref("align-items")}} avec la valeur center. Ensuite, on crée une classe pour chacune des deux boîtes dont chacune définit les propriétés qui diffèrent entre ces éléments.

+

Pour résumer, les styles ciblés par .boite indiquent la taille de la boîte, la configuration de la police de caractères utilisée, centrent le contenu des boîtes grâce aux boîtes flexibles CSS. Pour cela, on utilise le mode d'affichage flex avec display: flex et on paramètre les propriétés justify-content et align-items avec la valeur center. Ensuite, on crée une classe pour chacune des deux boîtes dont chacune définit les propriétés qui diffèrent entre ces éléments.

.boiteGauche {
   float: left;
@@ -300,9 +306,9 @@ th {
 
La classe .boiteGauche permet de mettre en forme la boîte située à gauche et on l'utilise pour définir certaines couleurs :

 
 
    
- 
  • La couleur de l'arrière-plan est définie grâce à la propriété {{cssxref("background-color")}} pour laquelle on fournit la valeur rgb(245, 130, 130).
    • 
- 
  • Un contour est défini autour de la boîte grâce à la propriété {{cssxref("outline")}}. Ici, ce contour est une ligne pleine, rouge foncée (le mot-clé darkred) de deux pixels.
    • 
- 
  • On notera ici qu'on ne définit pas de couleur pour le texte. La valeur qui sera utilisée pour la propriété {{cssxref("color")}} sera celle qui est héritée par le plus proche élément englobant qui définit cette propriété. La couleur par défaut est le noir.
    • 
+  
  • La couleur de l'arrière-plan est définie grâce à la propriété background-color pour laquelle on fournit la valeur rgb(245, 130, 130).
    • 
+  
  • Un contour est défini autour de la boîte grâce à la propriété outline. Ici, ce contour est une ligne pleine, rouge foncée (le mot-clé darkred) de deux pixels.
    • 
+  
  • On notera ici qu'on ne définit pas de couleur pour le texte. La valeur qui sera utilisée pour la propriété color sera celle qui est héritée par le plus proche élément englobant qui définit cette propriété. La couleur par défaut est le noir.
    • 
 

 
 
.boiteDroite {
@@ -317,32 +323,32 @@ th {
 
Enfin, la classe .boiteDroite décrit les propriétés de la boîte dessinée à droite. On configure cette boîte afin qu'elle flotte à droite de la boîte précédente. Ensuite, on paramètre les couleurs suivantes :

 
 
    
- 
  • La propriété background-color est définie avec la notation fonctionnelle HSL : hsl(270deg, 50%, 75%). Cela correspond à un violet.
    • 
- 
  • La propriété outline permet d'indiquer un contour de 4 pixels formé par une ligne pointillée dont la couleur est exprimée avec la notation fonctionnelle RGB rgb(110, 20, 120) (violet foncé).
    • 
- 
  • La couleur de premier plan (c'est-à-dire celle utilisée pour le texte) est définie avec la propriété {{cssxref("color")}} et la valeur hsl(0deg, 100%, 100%) qui correspond au blanc.
    • 
- 
  • On ajoute une ligne verte ondulée sous le texte avec {{cssxref("text-decoration")}}.
    • 
- 
  • Enfin, on ajoute une ombre au texte avec la propriété {{cssxref("text-shadow")}} dont le paramètre de couleur vaut black (noir).
    • 
+  
  • La propriété background-color est définie avec la notation fonctionnelle HSL : hsl(270deg, 50%, 75%). Cela correspond à un violet.
    • 
+  
  • La propriété outline permet d'indiquer un contour de 4 pixels formé par une ligne pointillée dont la couleur est exprimée avec la notation fonctionnelle RGB rgb(110, 20, 120) (violet foncé).
    • 
+  
  • La couleur de premier plan (c'est-à-dire celle utilisée pour le texte) est définie avec la propriété color et la valeur hsl(0deg, 100%, 100%) qui correspond au blanc.
    • 
+  
  • On ajoute une ligne verte ondulée sous le texte avec text-decoration.
    • 
+  
  • Enfin, on ajoute une ombre au texte avec la propriété text-shadow dont le paramètre de couleur vaut black (noir).
    • 
 

 
-
Permettre à l'utilisateur de choisir une couleur

+
Permettre à l'utilisateur de choisir une couleur

 
-
Il existe différentes situations où l'on peut/doit permettre à l'utilisateur de sélectionner une couleur. Il peut s'agir d'une interface personnalisable, d'une application de dessin, d'une application d'édition où on peut choisir la couleur du texte, etc. Bien que, par le passé, il fut nécessaire d'implémenter son propre sélecteur de couleur, HTML fournit désormais au navigateurs une façon homogène de le faire avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut "color".

+
Il existe différentes situations où l'on peut/doit permettre à l'utilisateur de sélectionner une couleur. Il peut s'agir d'une interface personnalisable, d'une application de dessin, d'une application d'édition où on peut choisir la couleur du texte, etc. Bien que, par le passé, il fût nécessaire d'implémenter son propre sélecteur de couleur, HTML fournit désormais aux navigateurs une façon homogène de le faire avec un élément <input> dont l'attribut type vaut "color".

 
 
Lorsqu'on choisit une couleur via un élément <input>, la valeur stockée dans le document et envoyée via le formulaire est représentée avec une chaîne de caractères hexadécimale.

 
-
Exemple : sélectionner une couleur

+
Exemple : sélectionner une couleur

 
 
Prenons un exemple simple où l'utilisateur choisit une couleur qui est immédiatement appliquée sur la bordure de l'exemple. Une fois la couleur finale sélectionnée, la valeur du sélecteur de couleur est affichée.

 
-
{{EmbedLiveSample("Exemple_:_sélectionner_une_couleur", 525, 275)}}

+
{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}

 
-

-
Note : Sur macOS, pour indiquer qu'on a fini de choisir la couleur, il faut fermer la fenêtre du sélecteur de couleur.

+

+  
Note : Sur macOS, pour indiquer qu'on a fini de choisir la couleur, il faut fermer la fenêtre du sélecteur de couleur.

 

 
 
HTML

 
-
Voici le fragment HTML qui permet de créer une boîte qui contient un sélecteur de couleur avec un libellé associé (l'élément {{HTMLElement("label")}}) ainsi qu'un paragraphe ({{HTMLElement("p")}}) vide dans lequel nous placerons plus tard du texte avec JavaScript.

+
Voici le fragment HTML qui permet de créer une boîte qui contient un sélecteur de couleur avec un libellé associé (l'élément <label>) ainsi qu'un paragraphe (<p>) vide dans lequel nous placerons plus tard du texte avec JavaScript.

 
 
<div id="box">
   <label for="colorPicker">Couleur de la bordure :</label>
@@ -380,54 +386,54 @@ colorPicker.addEventListener("change", function(event) {
   output.innerText = "Couleur choisie : " + colorPicker.value;
 }, false);

 
-
L'évènement {{event("input")}} est envoyé chaque fois que la valeur de l'élément change, c'est-à-dire chaque fois que l'utilisateur ajuste la couleur via le sélecteur. Pour chacun de ces évènements, on modifie la couleur de la bordure afin qu'elle corresponde à celle du sélecteur.

+
L'évènement input est envoyé chaque fois que la valeur de l'élément change, c'est-à-dire chaque fois que l'utilisateur ajuste la couleur via le sélecteur. Pour chacun de ces évènements, on modifie la couleur de la bordure afin qu'elle corresponde à celle du sélecteur.

 
-
L'évènement {{event("change")}} est reçu lors de la finalisation du choix de la couleur via le sélecteur. Lorsque cet évènement suvient, on modifie le contenu de l'élément <p> (le paragraphe) qui possède l'identifiant "output" en y ajoutant une chaîne de caractères qui décrit la couleur choisie.

+
L'évènement change est reçu lors de la finalisation du choix de la couleur via le sélecteur. Lorsque cet évènement suvient, on modifie le contenu de l'élément <p> (le paragraphe) qui possède l'identifiant "output" en y ajoutant une chaîne de caractères qui décrit la couleur choisie.

 
-
L'art de choisir une couleur

+
L'art de choisir une couleur

 
 
Choisir les bonnes couleurs lors de la conception d'un site web peut s'avérer plus compliqué qu'il n'y paraît. Un mauvais choix de couleur peut nuire à l'attractivité du site voire empêcher les utilisateurs de consulter le contenu si le contraste est trop faible ou les couleurs trop criardes. Dans le pire des cas, le site peut être inutilisable à cause des couleurs choisies pour les personnes qui ont des handicaps visuels.

 
-
Trouver les bonnes couleurs

+
Trouver les bonnes couleurs

 
 
Il existe des outils qui permettent de faciliter la sélection des couleurs. Bien qu'ils ne remplacent pas un bon designer, ils permettent au moins de commencer.

 
-
La couleur de base

+
La couleur de base

 
 
La première étape consiste à choisir la couleur de base. C'est la couleur principale qui participe à la définition du site web ou du sujet dont il est question. Par exemple, on associe la couleur jaune à La Poste, le bleu au ciel ou à quelque chose de marin, etc. Voici quelques idées (parmi les nombreuses qui existent) pour choisir une couleur de base :

 
 
    
- 
  • Une couleur naturellement associée au contenu : la couleur d'un produit ou une couleur rattachée à un concept/une émotion dont il serait question sur le site.
    • 
+ 
  • Une couleur naturellement associée au contenu : la couleur d'un produit ou une couleur rattachée à un concept ou une émotion dont il serait question sur le site.
    • 
  
  • Naviguer parmi les sites existants et les bibliothèques d'image pour puiser de l'inspiration parmi les couleurs.
    • 
 

 
-
Une fois la couleur de base sélectionnéee, vous pouvez utiliser certaines extensions de navigateur pour « prélever » des couleurs existantes sur le web. Le site web ColorZilla, par exemple, propose une extension (Chrome / Firefox) qui permet d'utiliser une pipette pour identifier les couleurs utilisées à un endroit d'une page web. Cette extension permet également de mesurer la couleur moyenne des pixels d'une zone donnée.

+
Une fois la couleur de base sélectionnée, vous pouvez utiliser certaines extensions de navigateur pour « prélever » des couleurs existantes sur le web. Le site web ColorZilla, par exemple, propose une extension (Chrome / Firefox) qui permet d'utiliser une pipette pour identifier les couleurs utilisées à un endroit d'une page web. Cette extension permet également de mesurer la couleur moyenne des pixels d'une zone donnée.

 
-

-
Note : On peut s'apercevoir qu'un site contient plusieurs couleurs très proches les unes des autres, utiliser une « moyenne » permet alors de récupérer le ton principal sous la forme d'une seule couleur.

+

+  
Note : On peut s'apercevoir qu'un site contient plusieurs couleurs très proches les unes des autres, utiliser une « moyenne » permet alors de récupérer le ton principal sous la forme d'une seule couleur.

 

 
-
Agrémenter la palette

+
Agrémenter la palette

 
 
Une fois la couleur de base sélectionnée et identifiée, il existe de nombreux outils qui permettent de construire une palette de couleurs qui pourront être utilisées avec cette couleur de base. Ces outils utilisent la théorie des couleurs pour déterminer les couleurs appropriées. Certains de ces outils permettent également de voir les couleurs « filtrées » afin de visualiser ce qu'une personne daltonienne verrait.

 
 
Voici quelques exemples (libres d'accès et gratuits au moment où nous écrivons ces lignes) de tels outils :

 
 
 
 
Lorsque vous concevez votre palette de couleurs, gardez à l'esprit qu'en plus des couleurs générées par ces outils, il faudra vraisemblablement prévoir des couleurs neutres (telles que le blanc ou un ton de blanc, du noir ou un ton de noir et certaines nuances de gris).

 
-

-
Note : On utilise généralement le moins de couleurs possibles afin de garder une cohérence. En utilisant des couleurs afin d'accentuer certains éléments plutôt que d'en utiliser pour tous les éléments de la page, on rend le contenu plus facile à lire et à parcourir. De plus, les couleurs ont ainsi plus d'impact

+

+  
Note : On utilise généralement le moins de couleurs possibles afin de garder une cohérence. En utilisant des couleurs afin d'accentuer certains éléments plutôt que d'en utiliser pour tous les éléments de la page, on rend le contenu plus facile à lire et à parcourir. De plus, les couleurs ont ainsi plus d'impact

 

 
-
Quelques ressources sur la théorie des couleurs

+
Quelques ressources sur la théorie des couleurs

 
-
Décrire l'ensemble des notions liées à la théorie des couleurs dépasse le sujet de cet article. Toutefois, il existe de nombreux articles traitant de ce sujet ainsi que des cours pour apprendre ces notions. Voici quelques unes des ressources disponibles en ligne à propos de la théorie des couleurs :

+
Décrire l'ensemble des notions liées à la théorie des couleurs dépasse le sujet de cet article. Toutefois, il existe de nombreux articles traitant de ce sujet ainsi que des cours pour apprendre ces notions. Voici quelques-unes des ressources disponibles en ligne à propos de la théorie des couleurs :

 
 

  
La science des couleurs (en anglais) (Khan Academy en association avec Pixar)

@@ -436,14 +442,14 @@ colorPicker.addEventListener("change", function(event) {
  
La page Wikipédia qui traite de la théorie des couleurs et qui fournit de nombreuses informations techniques.

 

 
-
Les couleurs et l'accessibilité

+
Les couleurs et l'accessibilité

 
 
Une couleur peut poser différents problèmes d'accessibilité. Une couleur mal choisie pourra empêcher certaines personnes d'utiliser l'interface du site, ce qui peut se traduire par une baisse de fréquentation, une mauvaise image (au sens propre comme au figuré), etc.

 
 
Pour commencer, n'hésitez pas à vous renseigner sur le daltonisme et les différents types de daltonisme : confusion rouge/vert, confusion sur l'ensemble des couleurs.

 
-

-
Note : Une règle d'or consiste à ne jamais utiliser une couleur comme seule façon d'indiquer une information. Si, par exemple, vous souhaitez indiquer une réussite ou un échec en changeant uniquement la couleur d'un symbole (un drapeau par exemple), les utilisateurs souffrant de daltonismes et avec une confusion rouge/vert ne pourront pas lire cette information. Il est sans doute préférable d'utiliser du texte et de la couleur afin que tout le monde puisse être en mesure de comprendre ce qui a changé.

+

+  
Note : Une règle d'or consiste à ne jamais utiliser une couleur comme seule façon d'indiquer une information. Si, par exemple, vous souhaitez indiquer une réussite ou un échec en changeant uniquement la couleur d'un symbole (un drapeau par exemple), les utilisateurs souffrant de daltonismes et avec une confusion rouge/vert ne pourront pas lire cette information. Il est sans doute préférable d'utiliser du texte et de la couleur afin que tout le monde puisse être en mesure de comprendre ce qui a changé.

 

 
 
Pour plus d'informations sur le daltonisme, vous pouvez consulter les articles suivants (en anglais, n'hésitez pas à éditer la page pour ajouter des ressources francophones) :

@@ -454,7 +460,7 @@ colorPicker.addEventListener("change", function(event) {
  
  • Color Blindness & Web Design
    • 
 
 
-
    Un exemple de conception de palette
    
+
    Un exemple de conception de palette
    
 
 
    Considérons un exemple rapide pour construire une palette. Imaginons qu'on souhaite construire un site web pour un jeu dont l'action se déroule sur Mars. On peut rechercher des images relatives à Mars sur Google ou sur un autre moteur de recherche. On utilise un sélecteur de couleur pour sélectionner un échantillon de couleur.
    
 
@@ -462,46 +468,46 @@ colorPicker.addEventListener("change", function(event) {
 
 
    Une fois la couleur de base sélectionnée, on construit la palette. Pour cela, nous avons choisi Paletteon afin de compléter avec d'autres couleurs. Lorsqu'on ouvre Palleton, on voit ceci :
    
 
-
    L'affichage du site Palleton après l'ouverture
    
+
    L'affichage du site Palleton après l'ouverture
    
 
-
    Ensuite, on saisi le code de la couleur (D79C7A) dans le champ "Base RGB" situé en bas à gauche de l'outil :
    
+
    Ensuite, on saisit le code de la couleur (D79C7A) dans le champ "Base RGB" situé en bas à gauche de l'outil :
    
 
-
    After entering base color
    
+
    After entering base color
    
 
-
    On obtient alors une palette monochromatique, basée sur la couleur sélectionnée. Si vous avez besoin d'un nuancier autour de cette couleur, la palette monochromatique pourra sans doute vous aider. Mais ici, on souhaite plutôt avoir une couleur qui ressorte, pour cela on clique sur le case "add complementary"sous le menu permettant de sélectionner le type de palette (et qui vaut "Monochromatic"). Paletteon calcule alors une couleur complémentaire appropriée et indique le code de cette nouvelle couleur dans le coin inférieur droit : #508D7C.
    
+
    On obtient alors une palette monochromatique, basée sur la couleur sélectionnée. Si vous avez besoin d'un nuancier autour de cette couleur, la palette monochromatique pourra sans doute vous aider. Mais ici, on souhaite plutôt avoir une couleur qui ressorte, pour cela on clique sur la case "add complementary" sous le menu permettant de sélectionner le type de palette (et qui vaut "Monochromatic"). Paletteon calcule alors une couleur complémentaire appropriée et indique le code de cette nouvelle couleur dans le coin inférieur droit : #508D7C.
    
 
-
    Now with complementary colors included.
    
+
    Now with complementary colors included.
    
 
 
    Si vous n'êtes pas satisfait du résultat obtenu, vous pouvez faire varier le schéma de composition. Ainsi, on pourra utiliser le thème "Triad" qui fournira le résultat suivant :
    
 
-
    Triad color scheme selected
    
+
    Triad color scheme selected
    
 
 
    On obtient alors un bleu gris en haut à droite. En cliquant dessus, on obtient le code #556E8D. On pourra utiliser cette couleur afin d'accentuer certains éléments tels que les titres ou les onglets mis en évidence ou bien d'autres indicateurs sur le site :
    
 
-
    Triad color scheme selected
    
+
    Triad color scheme selected
    
 
-
    Maintenant, nous disposons d'une couleur de base, d'une couleur d'accentuation ainsi que de variations autour de celles-ci au cas où nous aurions besoin de dégradés.  On peut exporter les couleurs sous différents formats afin de les utiliser.
    
+
    Maintenant, nous disposons d'une couleur de base, d'une couleur d'accentuation ainsi que de variations autour de celles-ci au cas où nous aurions besoin de dégradés. On peut exporter les couleurs sous différents formats afin de les utiliser.
    
 
-
    Avec ces couleurs, il faudra probablement sélectionner quelques couleurs neutres. Une pratique courante consiste à trouver le contraste suffisant pour que le texte soit pleinement lisible mais sans que ce contraste soit trop fort. Il est facile de s'égarer dans l'une ou l'autre des directions : n'hésitez pas à demander des retours sur les couleurs que vous avez sélectionnées. Si le contraste est trop faible, le texte sera illisible et on ne pourra pas le distinger de l'arrière-plan, cela pourra également poser des problèmes d'accessibilité. Si le contraste est trop élevé, le site pourra paraître criard.
    
+
    Avec ces couleurs, il faudra probablement sélectionner quelques couleurs neutres. Une pratique courante consiste à trouver le contraste suffisant pour que le texte soit pleinement lisible mais sans que ce contraste soit trop fort. Il est facile de s'égarer dans l'une ou l'autre des directions : n'hésitez pas à demander des retours sur les couleurs que vous avez sélectionnées. Si le contraste est trop faible, le texte sera illisible et on ne pourra pas le distinguer de l'arrière-plan, cela pourra également poser des problèmes d'accessibilité. Si le contraste est trop élevé, le site pourra paraître criard.
    
 
-
    Les couleurs, les arrière-plans, le contraste et l'impression
    
+
    Couleurs, arrière-plans, contraste et impression
    
 
-
    Le rendu d'un document peut être différent selon que ce dernier est affiché sur un écran ou sur du papier. De plus, sur papier, on peut chercher à économiser l'encre superflu. Lorsqu'un utilisateur imprime une page, il n'est par exemple peut-être pas nécessaire d'imprimer les arrière-plans. Par défaut, la plupart des navigateurs retire les images d'arrière-plan à l'impression.
    
+
    Le rendu d'un document peut être différent selon que ce dernier est affiché sur un écran ou sur du papier. De plus, sur papier, on peut chercher à économiser l'encre superflu. Lorsqu'un utilisateur imprime une page, il n'est par exemple peut-être pas nécessaire d'imprimer les arrière-plans. Par défaut, la plupart des navigateurs retirent les images d'arrière-plan à l'impression.
    
 
-
    Si les couleurs d'arrière-plan ou les images sont importantes pour l'ensemble du document, on peut utiliser la propriété {{cssxref("color-adjust")}} afin d'indiquer au navigateur qu'il ne faut pas modifier l'apparence du contenu.
    
+
    Si les couleurs d'arrière-plan ou les images sont importantes pour l'ensemble du document, on peut utiliser la propriété color-adjust afin d'indiquer au navigateur qu'il ne faut pas modifier l'apparence du contenu.
    
 
 
    Par défaut, la propriété color-adjust vaut economy et indique au navigateur qu'il peut modifier l'apparence afin d'optimiser la lisibilité du contenu et d'économiser de l'encre selon le support d'imprimerie.
    
 
 
    color-adjust peut être paramétré avec la valeur exact afin d'indiquer au navigateur qu'un ou plusieurs éléments doivent être conservés tels quels afin que l'ensemble du document ne soit pas détérioré.
    
 
-
    
-
    Note : Il n'est pas garanti que le navigateur respecte exactement la feuille de style utilisée avec color-adjust: exact. En effet, si le navigateur fournit une option à l'utilisateur pour ne pas imprimer les arrière-plans, ce réglage prendra le pas sur la feuille de style.
    
+
    
+  
    Note : Il n'est pas garanti que le navigateur respecte exactement la feuille de style utilisée avec color-adjust: exact. En effet, si le navigateur fournit une option à l'utilisateur pour ne pas imprimer les arrière-plans, ce réglage prendra le pas sur la feuille de style.
    
 
    
 
-
    Voir aussi
    
+
    Voir aussi
    
 
 
diff --git a/files/fr/web/html/block-level_elements/index.html b/files/fr/web/html/block-level_elements/index.html
index c7feba8d34..948738c8c5 100644
--- a/files/fr/web/html/block-level_elements/index.html
+++ b/files/fr/web/html/block-level_elements/index.html
@@ -2,27 +2,29 @@
 title: Éléments de bloc
 slug: Web/HTML/Block-level_elements
 tags:
+  - Beginner
+  - Development
   - Débutant
   - HTML
+  - HTML5
   - Web
 translation_of: Web/HTML/Block-level_elements
 original_slug: Web/HTML/Éléments_en_bloc
 ---
-
    {{HTMLSidebar}}
    
+
    Les éléments HTML (Hypertext Markup Language) étaient historiquement catégorisés comme des éléments de type "block" ou de type "inline". Comme il s'agit d'une caractéristique de présentation, elle est aujourd'hui spécifiée par CSS dans la disposition en flux. Un élément de type bloc occupe tout l'espace horizontal de son élément parent (conteneur), et un espace vertical égal à la hauteur de son contenu, créant ainsi un bloc. Dans cet article, nous examinerons les éléments HTML de type bloc et comment ils diffèrent des éléments en ligne.
    
 
-
    Les éléments de bloc forment une catégorie d'éléments HTML (HyperText Markup Language) en opposition aux éléments en ligne.
    
+
    Les navigateurs affichent généralement un élément de type bloc avec une nouvelle ligne avant et après l'élément. Vous pouvez les visualiser comme une pile de boîtes.
    
 
-
    Leur caractéristique principale réside dans le fait qu'ils sont séparés par un saut de ligne avant et après l'élément (créant ainsi un « bloc » de contenu). On peut, en quelque sorte, les représenter comme des blocs empilés les uns sur les autres. Ce faisant, ils prennent la largeur de leurs conteneurs.
    
-
-
    
-
    Note : Un élément de bloc commence toujours sur une nouvelle ligne et prend toute la largeur disponible (autrement dit, il s'étend le plus possible vers la droite et vers la gauche).
    
+
    
+  
    Note : Un élément de bloc commence toujours sur une nouvelle ligne et prend toute la largeur disponible (autrement dit, il s'étend le plus possible vers la droite et vers la gauche).
    
 
    
 
-
    Exemples
    
+
    Éléments de type bloc
    
 
 
    HTML
    
 
-
    <p>Ce paragraphe est un élément de bloc. Son fond a été coloré pour illustrer son conteneur.</p>
    
+
    <p>Ce paragraphe est un élément de bloc.
+Son fond a été coloré pour illustrer son conteneur.</p>
    
 
 
    CSS
    
 
@@ -30,98 +32,98 @@ original_slug: Web/HTML/Éléments_en_bloc
   background-color: #8ABB55;
 }
    
 
-
    Résultat
    
+
    Résultat
    
 
-
    {{EmbedLiveSample('Exemples')}}
    
+
    {{EmbedLiveSample('Block-level_Example','100%',100)}}
    
 
-
    Contrainte
    
+
    Utilisation
    
 
-
      
- 
    • Les éléments de bloc ne peuvent apparaître qu'au sein d'un élément {{HTMLElement("body")}}
      • 
-
    
+
    Les éléments de bloc ne peuvent apparaître qu'au sein d'un élément <body>.
    
 
-
    Élément de bloc ou élément en ligne ?
    
+
    Éléments blocs vs éléments en ligne
    
 
 
    Les éléments de bloc diffèrent des éléments en ligne par :
    
 
 
    
- 
    La mise en forme
    
- 
    Par défaut, les éléments de bloc commencent sur des nouvelles lignes.
    
- 
    Le modèle de contenu
    
- 
    De façon générale, les éléments de bloc peuvent contenir des éléments en ligne et d'autres éléments de bloc. L'idée structurelle sous-jacente est que les éléments de bloc créent de plus grandes structures que les éléments en ligne.
    
+  
    La mise en forme par défaut
    
+  
    Par défaut, les éléments de bloc commencent sur des nouvelles lignes.
    
+  
    Le modèle de contenu
    
+  
    De façon générale, les éléments de bloc peuvent contenir des éléments en ligne et d'autres éléments de bloc. L'idée structurelle sous-jacente est que les éléments de bloc créent de plus grandes structures que les éléments en ligne.
    
 
    
 
-
    La distinction entre bloc et ligne est utilisée dans les spécifications HTML jusqu'à la version 4.01. En HTML5, cette distinction binaire est remplacée par un ensemble plus complexe de catégories de contenu. La catégorie des éléments en bloc correspond approximativement à la catégorie de contenu de flux en HTML5, celle des éléments en ligne correspond à la catégorie de contenu phrasé. Il y a également d'autres catégories (le contenu interactif par exemple).
    
-
-
    Éléments
    
-
-
    La liste qui suit contient tous les éléments HTML en bloc (cette catégorie n'est pas strictement applicable pour les éléments apparus avec HTML5).
    
-
-
    
-
    
- 
    {{HTMLElement("address")}}
    
- 
    Information de contact.
    
- 
    {{HTMLElement("article")}}
    
- 
    Contenu d'un article.
    
- 
    {{HTMLElement("aside")}}
    
- 
    Contenu tangentiel.
    
- 
    {{HTMLElement("blockquote")}}
    
- 
    Long bloc de citation.
    
- 
    {{HTMLElement("details")}}
    
- 
    Outil permettant de révéler des informations sur la page.
    
- 
    {{HTMLElement("dialog")}}
    
- 
    Boîte de dialogue.
    
- 
    {{HTMLElement("dd")}}
    
- 
    Description d'une définition.
    
- 
    {{HTMLElement("div")}}
    
- 
    Division d'un document.
    
- 
    {{HTMLElement("dl")}}
    
- 
    Liste de définitions.
    
- 
    {{HTMLElement("dt")}}
    
- 
    Définition/description d'un terme.
    
- 
    {{HTMLElement("fieldset")}}
    
- 
    Ensemble de champs.
    
- 
    {{HTMLElement("figcaption")}}
    
- 
    Légende d'une image.
    
- 
    {{HTMLElement("figure")}}
    
- 
    Permet de grouper des média avec une légende (voir {{HTMLElement("figcaption")}}).
    
- 
    {{HTMLElement("footer")}}
    
- 
    Bas de page ou de section.
    
- 
    {{HTMLElement("form")}}
    
- 
    Formulaire.
    
- 
    {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}
    
- 
    Éléments de titre de niveau 1 à 6.
    
- 
    {{HTMLElement("header")}}
    
- 
    En-tête de page ou de section.
    
- 
    {{HTMLElement("hgroup")}}
    
- 
    Information d'en-tête de groupe.
    
- 
    {{HTMLElement("hr")}}
    
- 
    Ligne de division horizontale.
    
- 
    {{HTMLElement("li")}}
    
- 
    Élément d'une liste.
    
- 
    {{HTMLElement("main")}}
    
- 
    Contient le contenu central unique au document.
    
- 
    {{HTMLElement("nav")}}
    
- 
    Contient des liens de navigation.
    
- 
    {{HTMLElement("ol")}}
    
- 
    Liste ordonnée.
    
- 
    {{HTMLElement("p")}}
    
- 
    Paragraphe.
    
- 
    {{HTMLElement("pre")}}
    
- 
    Texte pré-formaté.
    
- 
    {{HTMLElement("section")}}
    
- 
    Section d'une page web.
    
- 
    {{HTMLElement("table")}}
    
- 
    Tableau.
    
- 
    {{HTMLElement("ul")}}
    
- 
    Liste non-ordonnée.
    
-
    
+
    La distinction entre bloc et ligne est utilisée dans les spécifications HTML jusqu'à la version 4.01. En HTML5, cette distinction binaire est remplacée par un ensemble plus complexe de catégories de contenu. La catégorie des éléments en bloc correspond approximativement à la catégorie de contenu de flux en HTML5, celle des éléments en ligne correspond à la catégorie de contenu phrasé. Il y a également d'autres catégories (le contenu interactif par exemple).
    
+
+
    Éléments
    
+
+
    La liste qui suit contient tous les éléments HTML de type bloc (cette catégorie n'est pas strictement applicable pour les éléments apparus avec HTML5).
    
+
+
    
+  
    
+    
    <address>
    
+    
    Information de contact.
    
+    
    <article>
    
+    
    Contenu d'un article.
    
+    
    <aside>
    
+    
    Contenu tangentiel.
    
+    
    <blockquote>
    
+    
    Long bloc de citation.
    
+    
    <details>
    
+    
    Outil permettant de révéler des informations sur la page.
    
+    
    <dialog>
    
+    
    Boîte de dialogue.
    
+    
    <dd>
    
+    
    Description d'une définition.
    
+    
    <div>
    
+    
    Division d'un document.
    
+    
    <dl>
    
+    
    Liste de définitions.
    
+    
    <dt>
    
+    
    Définition/description d'un terme.
    
+    
    <fieldset>
    
+    
    Ensemble de champs.
    
+    
    <figcaption>
    
+    
    Légende d'une image.
    
+    
    <figure>
    
+    
    Permet de grouper des médias avec une légende (voir <figcaption>).
    
+    
    <footer>
    
+    
    Bas de page ou de section.
    
+    
    <form>
    
+    
    Formulaire.
    
+    
    <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
    
+    
    Éléments de titre de niveau 1 à 6.
    
+    
    <header>
    
+    
    En-tête de page ou de section.
    
+    
    <hgroup>
    
+    
    Information d'en-tête de groupe.
    
+    
    <hr>
    
+    
    Ligne de division horizontale.
    
+    
    <li>
    
+    
    Élément d'une liste.
    
+    
    <main>
    
+    
    Contient le contenu central unique au document.
    
+    
    <nav>
    
+    
    Contient des liens de navigation.
    
+    
    <ol>
    
+    
    Liste ordonnée.
    
+    
    <p>
    
+    
    Paragraphe.
    
+    
    <pre>
    
+    
    Texte pré-formaté.
    
+    
    <section>
    
+    
    Section d'une page web.
    
+    
    <table>
    
+    
    Tableau.
    
+    
    <ul>
    
+    
    Liste non-ordonnée.
    
+  
    
 
    
 
-
    Voir aussi
    
+
    Voir aussi
    
 
 
+
+
    {{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}
    
diff --git a/files/fr/web/html/cors_enabled_image/index.html b/files/fr/web/html/cors_enabled_image/index.html
index e73a5ed29e..07aef9b0ef 100644
--- a/files/fr/web/html/cors_enabled_image/index.html
+++ b/files/fr/web/html/cors_enabled_image/index.html
@@ -1,50 +1,52 @@
 ---
-title: Images avec le contrôle d'accès HTTP
+title: Autoriser les images et canevas provenant d'autres origines
 slug: Web/HTML/CORS_enabled_image
 tags:
-  - Avancé
+  - Advanced
   - CORS
   - Canvas
   - HTML
+  - Image
   - Reference
+  - Security
+  - Storage
+  - data
 translation_of: Web/HTML/CORS_enabled_image
 original_slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP
 ---
-
    {{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}
    
-
-
    HTML permet d'utiliser l'attribut {{htmlattrxref("crossorigin", "img")}} sur les images. Utilisé avec un en-tête {{Glossary("CORS")}} adéquat, les images définies par {{HTMLElement("img")}} provenant d'origines étrangères pourront être utilisées au sein d'un élément {{HTMLElement("canvas")}} comme si elles avaient été chargées depuis l'origine courante.
    
+
    HTML permet d'utiliser l'attribut crossorigin sur les images. Utilisé avec un en-tête CORS adéquat, les images définies par <img> provenant d'origines étrangères pourront être utilisées au sein d'un élément <canvas> comme si elles avaient été chargées depuis l'origine courante.
    
 
-
    Pour plus de détails sur l'attribut crossorigin, voir les attributs de paramétrage du CORS.
    
+
    Pour plus de détails sur l'attribut crossorigin, voir les attributs de paramétrage du CORS.
    
 
-
    Canevas corrompu et sécurité
    
+
    Canevas corrompu et sécurité
    
 
 
    Les pixels composant un canevas pouvant venir de différentes sources, notamment d'images ou de vidéos récupérées depuis des hôtes tiers, il est nécessaire de se prémunir contre certains problèmes de sécurité.
    
 
-
    Dès que des données sont chargées dans le canevas depuis une autre origine sans avoir été « approuvées » par le CORS, le canevas devient corrompu (tainted). Dès qu'un canevas est corrompu, il n'est plus considéré comme sécurisé et toute tentative de récupérer des données depuis les données de l'image résultera en une exception.
    
+
    Dès que des données sont chargées dans le canevas depuis une autre origine sans avoir été « approuvées » par le CORS, le canevas devient corrompu (tainted). Dès qu'un canevas est corrompu, il n'est plus considéré comme sécurisé et toute tentative de récupérer des données depuis les données de l'image résultera en une exception.
    
 
-
    Si la source du contenu tiers est un élément HTML {{HTMLElement("img")}} ou SVG {{SVGElement("svg")}}, il n'est plus permis de récupérer le contenu du canevas.
    
+
    Si la source du contenu tiers est un élément HTML <img> ou SVG <svg>, il n'est plus permis de récupérer le contenu du canevas.
    
 
-
    Si la source du contenu tiers est une image obtenue à partir d'un {{domxref("HTMLCanvasElement")}} ou d'une {{domxref("ImageBitMap")}} et que la source de l'image ne respecte pas les règles quant à l'unicité de l'origine, il ne sera pas possible de lire le contenu du canevas.
    
+
    Si la source du contenu tiers est une image obtenue à partir d'un HTMLCanvasElement ou d'une ImageBitMap et que la source de l'image ne respecte pas les règles quant à l'unicité de l'origine, il ne sera pas possible de lire le contenu du canevas.
    
 
 
    Appeler l'une des méthodes suivantes sur un canevas corrompu déclenchera une erreur :
    
 
 
      
- 
    • {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} sur le contexte du canevas
      • 
- 
    • {{domxref("HTMLCanvasElement.toBlob", "toBlob()")}} sur l'élément {{HTMLElement("canvas")}}
      • 
- 
    • {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} sur le canevas
      • 
+ 
    • getImageData() sur le contexte du canevas
      • 
+ 
    • toBlob() sur l'élément <canvas>
      • 
+ 
    • toDataURL() sur le canevas
      • 
 
    
 
 
    L'exception levée par de tels appels sera une exception SecurityError. Cette mesure protège les utilisateurs contre l'exposition de données privées via des images provenant de sites tiers sans permission.
    
 
-
    Stocker une image provenant d'une origine tierce
    
+
    Stocker une image provenant d'une origine tierce
    
 
 
    Dans cet exemple, on souhaite autoriser la récupération et l'enregistrement d'images provenant d'une autre origine. Pour parvenir à ce résultat, il faudra configurer le serveur et également écrire du code pour le site web.
    
 
-
    Configuration serveur
    
+
    Configuration serveur
    
 
-
    Pour commencer, configurons le serveur stockant les images avec un en-tête {{HTTPHeader("Access-Control-Allow-Origin")}} qui permet un accès multi-origines aux fichiers images.
    
+
    Pour commencer, configurons le serveur stockant les images avec un en-tête Access-Control-Allow-Origin qui permet un accès multi-origines aux fichiers images.
    
 
-
    Dans la suite de cet exemple, on prendra le cas d'un site est servi via Apache. On pourra utiliser le fragment de configuration serveur Apache pour les images CORS :
    
+
    Dans la suite de cet exemple, on prendra le cas d'un site est servi via Apache. On pourra utiliser le fragment de configuration serveur Apache pour les images CORS :
    
 
 
    <IfModule mod_setenvif.c>
   <IfModule mod_headers.c>
@@ -57,13 +59,13 @@ original_slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP
 
 
    Pour résumer, cela permet de configurer le serveur afin de pouvoir accéder aux fichiers graphiques (ceux avec les extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") depuis d'autres origines, d'où qu'elles soient sur Internet.
    
 
-
    Implémenter l'enregistrement
    
+
    Implémenter l'enregistrement
    
 
 
    Maintenant que le serveur est configuré pour permettre la récupération d'image depuis plusieurs origines, on peut écrire le code qui permet à l'utilisateur d'enregistrer les images en stockage local comme si elles étaient servies depuis le même domaine que le code.
    
 
-
    Pour cela, on utilise l'attribut {{htmlattrxref("crossorigin")}} en définissant {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}} sur l'élément {{domxref("HTMLImageElement")}} sur lequel l'image sera chargée. Ainsi, on indique au navigateur de demander un accès multi-origine lors du téléchargement de l'image.
    
+
    Pour cela, on utilise l'attribut crossorigin en définissant crossOrigin sur l'élément HTMLImageElement sur lequel l'image sera chargée. Ainsi, on indique au navigateur de demander un accès multi-origine lors du téléchargement de l'image.
    
 
-
    Démarrer le téléchargement
    
+
    Démarrer le téléchargement
    
 
 
    Voici le code qui démarre le téléchargement (déclenché par exemple lorsque l'utilisateur clique sur un bouton « Télécharger ») :
    
 
@@ -76,11 +78,11 @@ original_slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP
   downloadedImg.src = imageURL;
 }
    
 
-
    Ici, l'URL de l'image à télécharger est codée en dur mais cette valeur pourrait très bien provenir d'un argument passé à la fonction. Pour démarrer le téléchargement, on crée un nouvel objet {{domxref("HTMLImageElement")}} grâce au constructeur {{domxref("HTMLImageElement.Image", "Image()")}}. L'image est ensuite configurée afin de permettre un téléchargement multi-origine grâce à l'attribut crossOrigin paramétré avec "Anonymous" (qui permet le téléchargement, non-authentifié, d'une image multi-origine). Un gestionnaire d'évènement est ajouté afin de réagir à l'évènement {{event("load")}} lorsque l'image a été reçue.
    
+
    Ici, l'URL de l'image à télécharger est codée en dur mais cette valeur pourrait très bien provenir d'un argument passé à la fonction. Pour démarrer le téléchargement, on crée un nouvel objet HTMLImageElement grâce au constructeur Image(). L'image est ensuite configurée afin de permettre un téléchargement multi-origine grâce à l'attribut crossOrigin paramétré avec "Anonymous" (qui permet le téléchargement, non-authentifié, d'une image multi-origine). Un gestionnaire d'évènement est ajouté afin de réagir à l'évènement load lorsque l'image a été reçue.
    
 
-
    Enfin, l'attribut {{domxref("HTMLImageElement.src", "src")}} de l'image est défini avec l'URL de l'image à télécharger et le téléchargement démarre.
    
+
    Enfin, l'attribut src de l'image est défini avec l'URL de l'image à télécharger et le téléchargement démarre.
    
 
-
    Recevoir et enregistrer l'image
    
+
    Recevoir et enregistrer l'image
    
 
 
    Voici le fragment de code exécuté lorsque l'image a été téléchargée :
    
 
@@ -102,17 +104,20 @@ original_slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP
   }
 }
    -

    imageReceived() est invoquée lorsque l'évènement "load" est déclenché sur l'élément HTMLImageElement qui reçoit l'image téléchargée. Cet évènement se produit lorsque l'ensemble des données téléchargées est disponible. Cette fonction commence par créer un nouvel élément {{HTMLElement("canvas")}} qui sera utilisé afin de convertir l'image en une URL de donnée. On récupère également un accès au contexte du canevas pour dessiner en 2D ({{domxref("CanvasRenderingContext2D")}}) dans la variable context.

    +

    imageReceived() est invoquée lorsque l'évènement "load" est déclenché sur l'élément HTMLImageElement qui reçoit l'image téléchargée. Cet évènement se produit lorsque l'ensemble des données téléchargées est disponible. Cette fonction commence par créer un nouvel élément <canvas> qui sera utilisé afin de convertir l'image en une URL de donnée. On récupère également un accès au contexte du canevas pour dessiner en 2D (CanvasRenderingContext2D) dans la variable context.

    -

    La taille du canevas est ajustée afin que ses dimensions correspondent à celles de l'image. L'image est ensuite dessinée dans le canevas grâce à {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. Le canevas est alors inséré dans le document et l'image y devient visible.

    +

    La taille du canevas est ajustée afin que ses dimensions correspondent à celles de l'image. L'image est ensuite dessinée dans le canevas grâce à drawImage(). Le canevas est alors inséré dans le document et l'image y devient visible.

    -

    Enfin, on enregistre l'image dans le stockage local. Pour cela, on utilise les méthodes de l'API Web Storage en passant par la variable globale {{domxref("Window.localStorage", "localStorage")}}. La méthode {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} est utilisée afin de convertir l'image en une URL de données représentant une image PNG qui est enregistrée dans l'espace local grâce à la méthode {{domxref("Storage.setItem", "setItem()")}}.

    +

    Enfin, on enregistre l'image dans le stockage local. Pour cela, on utilise les méthodes de l'API Web Storage en passant par la variable globale localStorage. La méthode toDataURL() est utilisée afin de convertir l'image en une URL de données représentant une image PNG qui est enregistrée dans l'espace local grâce à la méthode setItem().

    Vous pouvez essayer ou adapter cet exemple sur Glitch.

    Voir aussi

    + +
    {{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}
    diff --git a/files/fr/web/html/date_and_time_formats/index.html b/files/fr/web/html/date_and_time_formats/index.html index 7985e0169b..71e7e3483f 100644 --- a/files/fr/web/html/date_and_time_formats/index.html +++ b/files/fr/web/html/date_and_time_formats/index.html @@ -3,89 +3,100 @@ title: Formats de date et d'heure utilisés en HTML slug: Web/HTML/Date_and_time_formats tags: - Date - - Guide + - Element + - Format - HTML + - ISO 8601 + - Input + - Reference + - String - Time + - Week + - datetime + - datetime-local + - del + - ins + - month + - month-year + - week-year translation_of: Web/HTML/Date_and_time_formats original_slug: Web/HTML/Formats_date_heure_HTML ---
    {{HTMLRef}}
    -

    Certains éléments HTML manipulent des valeurs temporelles pour des dates ou des heures. Les formats utilisés pour les chaînes de caractères qui définissent ces valeurs sont décrits dans cet article. Les éléments qui utilisent ces données sont notamment les éléments {{HTMLElement("input")}} qui permettent de choisir une date, une heure ou les deux, les éléments {{HTMLElement("ins")}} et {{HTMLElement("del")}} dont l'attribut {{htmlattrxref("datetime", "ins")}} indique la date (ou la date et l'heure) à laquelle l'ajout ou la suppression de contenu a eu lieu.

    +

    Certains éléments HTML manipulent des valeurs temporelles pour des dates ou des heures. Les formats utilisés pour les chaînes de caractères qui définissent ces valeurs sont décrits dans cet article. Les éléments qui utilisent ces données sont notamment les éléments <input> qui permettent de choisir une date, une heure ou les deux, les éléments <ins> et <del> dont l'attribut ins indique la date (ou la date et l'heure) à laquelle l'ajout ou la suppression de contenu a eu lieu.

    -

    Pour les éléments <input>, voici les différents type (cf. {{htmlattrxref("type", "input")}}) pour lesquels l'attribut {{htmlattrxref("value")}} contient une chaîne de caractères représentant une date ou une heure :

    +

    Pour les éléments <input>, voici les différents type (cf. input) pour lesquels l'attribut value contient une chaîne de caractères représentant une date ou une heure :

    -
    -
    -

    Exemples

    +

    Exemples

    Avant de détailler plus, voyons quelques exemples de chaînes de caractères utilisées en HTML et qui représentent des valeurs temporelles.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Exemple de chaînes de caractères utilisées en HTML pour représenter des dates et des heures
    Chaîne de caractèresDate/heure
    2005-06-077 juin 2005[détails]
    08:4508h45m (le matin)[détails]
    08:45:2508h45m25s[détails]
    0033-08-04T03:4003h40 (du matin), le 04 août 33[détails]
    1977-04-01T14:00:3030 secondes après 14h00, le premier avril 1977[détails]
    1901-01-01T00:00ZMinuit, UTC, le 1er janvier 1901[détails]
    1901-01-01T00:00:01-04:00Minuit passé d'une seconde sur l'heure de l'Est (EST), le 1er janvier 1901[détails]
    Exemple de chaînes de caractères utilisées en HTML pour représenter des dates et des heures
    Chaîne de caractèresDate/heure
    2005-06-077 juin 2005[détails]
    08:4508h45m (le matin)[détails]
    08:45:2508h45m25s[détails]
    0033-08-04T03:4003h40 (du matin), le 04 août 33[détails]
    1977-04-01T14:00:3030 secondes après 14h00, le premier avril 1977[détails]
    1901-01-01T00:00ZMinuit, UTC, le 1er janvier 1901[détails]
    1901-01-01T00:00:01-04:00Minuit passé d'une seconde sur l'heure de l'Est (EST), le 1er janvier 1901[détails]
    -

    Notions essentielles

    +

    Notions essentielles

    -

    Avant de s'intéresser aux différents formats pour la représentation textuelle des valeurs temporelles en HTML, commençons par décrire comment ces valeurs sont définies formellement. HTML utilise une variation du standard {{interwiki("wikipedia", "ISO 8601")}} pour les chaînes de caractères représentant les dates et les heures. Il est toujours utile de vérifier que le format utilisé est compatible avec HTML car la spécification HTML utilise des algorithmes pour analyser ces chaînes qui sont plus précis que le standard ISO 8601 (il peut donc y avoir quelques fines différences).

    +

    Avant de s'intéresser aux différents formats pour la représentation textuelle des valeurs temporelles en HTML, commençons par décrire comment ces valeurs sont définies formellement. HTML utilise une variation du standard ISO 8601 pour les chaînes de caractères représentant les dates et les heures. Il est toujours utile de vérifier que le format utilisé est compatible avec HTML, car la spécification HTML utilise des algorithmes pour analyser ces chaînes qui sont plus précis que le standard ISO 8601 (il peut donc y avoir quelques fines différences).

    -

    Jeu de caractères

    +

    Jeu de caractères

    -

    En HTML, les chaînes qui représentent des dates et des heures manipulent uniquement des caractères {{interwiki("wikipedia", "ASCII")}}.

    +

    En HTML, les chaînes qui représentent des dates et des heures manipulent uniquement des caractères ASCII.

    -

    Numérotation des années

    +

    Numérotation des années

    La spécification HTML indique que les années doivent être exprimées selon le calendrier grégorien. Bien que les interfaces utilisateur permettent éventuellement de saisir des dates grâce à d'autres calendriers, la valeur sous-jacente est toujours représentée à l'aide du calendrier grégorien.

    @@ -93,105 +104,105 @@ original_slug: Web/HTML/Formats_date_heure_HTML

    En HTML, les années sont toujours écrites avec au moins 4 chiffres. Aussi, les années antérieures à l'an 1000 sont complétées avec des zéros : l'an 72 est donc écrit 0072. Les années antérieures à l'an 1 ne sont pas prises en charge par HTML.

    -

    Une année est normalement constituée de 365 jours, sauf pendant les {{anch("Années bissextiles", "années bissextiles")}}.

    +

    Une année est normalement constituée de 365 jours, sauf pendant les années bissextiles.

    -

    Années bissextiles

    +

    Années bissextiles

    -

    Une année bissextile est une année dont le numéro est:

    +

    Une année bissextile est une année dont le numéro est :

      -
    • Divisible par 400 ou,
      • -
    • Divisible par 4 mais pas par 100
      • +
    • Divisible par 400 ou,
      • +
    • Divisible par 4 mais pas par 100

    Bien qu'une année calendaire s'étende sur 365 jours, la Terre met environ 365,2422 jours avant d'effectuer une orbite complète autour du soleil. Les années bissextiles permettent d'ajuster le calendrier et de le synchroniser avec la position de la planète le long de l'orbite. Ajouter un jour tous les 4 ans (environ) permet d'avoir une année moyenne longue de 365,25 jours, ce qui est relativement correct.

    -

    En ajustant l'algorithme avec les contraintes ci-avant (divisible par 400 ou divisible par 4 mais pas par 100), on s'approche plus précisement du nombre correct de jours (365,2425). Des secondes intercalaires sont parfois ajoutées au calendrier afin de compenser les trois millièmes restant et le ralentissement naturel de la rotation de la Terre.

    +

    En ajustant l'algorithme avec les contraintes ci-avant (divisible par 400 ou divisible par 4 mais pas par 100), on s'approche plus précisément du nombre correct de jours (365,2425). Des secondes intercalaires sont parfois ajoutées au calendrier afin de compenser les trois millièmes restant et le ralentissement naturel de la rotation de la Terre.

    Le deuxième mois de l'année (février) possède 28 jours pendant les années non-bissextiles et 29 jours pendant les années bissextiles.

    -

    Mois de l'année

    +

    Mois de l'année

    Une année comporte 12 mois, numérotés de 1 à 12. Les valeurs des mois sont toujours représentées par une chaîne de caractères se composant de deux chiffres : des valeurs entre 01 et 12. Voir le tableau ci-après pour les numéros des mois et le nombre de jours correspondant.

    -

    Jours du mois

    +

    Jours du mois

    Les mois numérotés 1, 3, 5, 7, 8, 10 et 12 possèdent 31 jours. Les mois 4, 6, 9 et 11 possèdent 30 jours. Le deuxième mois, février, possède 28 jours sauf pendant les années bissextiles où il possède 29 jours. Le tableau ci-après détaille les mois et leurs noms, ainsi que leur durée en jours.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Les mois de l'année et leur durée en jours
    Numéro du moisNom (en français))Durée du mois (en nombre de jours)
    01Janvier31
    02Février28 (29 pour les années bissextiles)
    03Mars31
    04Avril30
    05Mai31
    06Juin30
    07Juillet31
    o8Août31
    09Septembre30
    10Octobre31
    11Novembre30
    12Décembre31
    Les mois de l'année et leur durée en jours
    Numéro du moisNom (en français)Durée du mois (en nombre de jours)
    01Janvier31
    02Février28 (29 pour les années bissextiles)
    03Mars31
    04Avril30
    05Mai31
    06Juin30
    07Juillet31
    o8Août31
    09Septembre30
    10Octobre31
    11Novembre30
    12Décembre31
    -

    Représentation des semaines

    +

    Représentation des semaines

    Une chaîne de caractères représentant une semaine correspondra à une semaine d'une année donnée. Aussi, une chaîne de caractères valide pour représenter une semaine se compose de 4 chiffres représentant l'année, suivis d'un tiret ("-" ou U+002D), suivi de la lettre majuscule "W" (U+0057), suivie d'un numéro de semaine sur deux chiffres.

    @@ -201,258 +212,258 @@ original_slug: Web/HTML/Formats_date_heure_HTML
    • Le premier jour de l'année calendaire (le premier janvier) est un jeudi ou
      • -
    • Le premier jour de l'année calendaire (le premier janvier) est un mercredi et que l'année est une {{anch("Années bissextiles", "année bissextile")}}.
      • +
    • Le premier jour de l'année calendaire (le premier janvier) est un mercredi et que l'année est une année bissextile.

    Les autres années contiennent 52 semaines.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Exemples de chaînes de caractères valides pour représenter des semaines
    Chaîne de caractèresSemaine et année (intervalle de dates)
    2001-W37Semaine 37 de l'année 2001 (entre le 10 et le 16 septembre 2001)
    1953-W01Semaine 1 de l'année 1953 (entre le 29 décembre 1952 et le 4 janvier 1953)
    1948-W53Semaine 53 de l'année 1948 (entre le 27 décembre 1948 et le 2 janvier 1949)
    1949-W01Semaine 1 de l'année 1949 (entre le 3 janvier et le 9 janvier 1949)
    0531-W16Semaine 16 de l'année 531 (entre le 13 avril et le 19 avril 531)
    0042-W04Semaine 4 de l'année 42 (entre le 21 et le 27 janvier 42)
    Exemples de chaînes de caractères valides pour représenter des semaines
    Chaîne de caractèresSemaine et année (intervalle de dates)
    2001-W37Semaine 37 de l'année 2001 (entre le 10 et le 16 septembre 2001)
    1953-W01Semaine 1 de l'année 1953 (entre le 29 décembre 1952 et le 4 janvier 1953)
    1948-W53Semaine 53 de l'année 1948 (entre le 27 décembre 1948 et le 2 janvier 1949)
    1949-W01Semaine 1 de l'année 1949 (entre le 3 janvier et le 9 janvier 1949)
    0531-W16Semaine 16 de l'année 531 (entre le 13 avril et le 19 avril 531)
    0042-W04Semaine 4 de l'année 42 (entre le 21 et le 27 janvier 42)

    On notera que les deux composantes pour l'année et pour la semaine sont complétées avec des zéros à gauche afin que l'année soit exprimée sur 4 chiffres et que la semaine soit exprimée sur 2 chiffres.

    -

    Représentation des mois

    +

    Représentation des mois

    -

    Une chaîne de caractères pour un mois représente un mois d'une année donnée (plutôt qu'un mois « générique »). Aussi, on ne représentera pas simplement le mois de janvier mais le mois de janvier de l'année 1972.

    +

    Une chaîne de caractères pour un mois représente un mois d'une année donnée (plutôt qu'un mois « générique »). Aussi, on ne représentera pas simplement le mois de janvier mais le mois de janvier de l'année 1972.

    Une chaîne de caractères représentant un mois est valide si elle commence par un numéro d'année valide (une chaîne de caractères composée de quatre chiffres), suivie d'un tiret ("-", ou U+002D), suivi d'un nombre sur deux chiffres où 01 représente janvier et où 12 représente décembre.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Exemples de chaînes de caractères valides pour la représentation d'un mois
    Chaîne de caractèresLe mois et l'année
    17310-09Le mois de septembre de l'année 17310
    2019-01Le mois de janvier de l'année 2019
    1993-11Le mois de novembre de l'année 1993
    0571-04Le mois d'avril de l'année 571
    0001-07Le mois de juillet de l'an 1
    Exemples de chaînes de caractères valides pour la représentation d'un mois
    Chaîne de caractèresLe mois et l'année
    17310-09Le mois de septembre de l'année 17310
    2019-01Le mois de janvier de l'année 2019
    1993-11Le mois de novembre de l'année 1993
    0571-04Le mois d'avril de l'année 571
    0001-07Le mois de juillet de l'an 1

    On notera que les années sont exprimées sur au moins 4 chiffres et que les années antérieures à 1000 sont préfixées de 0.

    -

    Représentation des dates

    +

    Représentation des dates

    Une chaîne de caractères représentant une date est valide si elle contient : une année (cf. ci-avant) suivie d'un tiret, suivi d'un mois, suivi d'un tiret ("-" ou U+002D) suivi du numéro du jour dans le mois sur deux chiffres.

    - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +
    Exemples de chaînes de caractères valides pour représenter des dates
    Chaîne de caractèresDate complète
    1993-11-011er novembre 1993
    1066-10-1414 octobre 1066
    0571-04-2222 avril 571
    0062-02-055 février 62
    Exemples de chaînes de caractères valides pour représenter des dates
    Chaîne de caractèresDate complète
    1993-11-011er novembre 1993
    1066-10-1414 octobre 1066
    0571-04-2222 avril 571
    0062-02-055 février 62
    -

    Représentation des heures

    +

    Représentation des heures

    Une chaîne de caractères représentant une heure peut décrire différentes précisions : minute, seconde ou milliseconde. Il n'est pas possible d'indiquer uniquement l'heure ou les minutes. Une chaîne valide se compose a minima d'une valeur sur deux chiffres représentant une heure, suivi de deux-points (":", U+003A) puis d'une valeur sur deux chiffres exprimant les minutes. La valeur des minutes peut ensuite être suivie d'un autre deux-points puis d'une valeur sur deux chiffres pour les secondes. Il est possible d'indiquer les millisecondes en ajoutant un point (".", U+002E) après les secondes, suivi d'une valeur sur un, deux ou trois chiffres.

    Voici quelques règles supplémentaires :

      -
    • L'heure est toujours exprimée selon une horloge sur 24 heures où 00 correspond à minuit et où 23 correspond à onze heures du soir. Aucune valeur en dehors de l'intervalle 00–23 n'est autorisée.
      • -
    • La valeur représentant les minutes doit être composée de deux chiffres et être située entre 00 et 59. Les valeurs en dehors de cet intervalle ne sont pas autorisées.
      • -
    • Si les secondes ne sont pas exprimées, il ne faut pas que la valeur se termine par un deux-points (après les minutes).
      • -
    • Si les secondes sont exprimées, leur nombre doit être entre 00 et 59. Il n'est pas possible d'indiquer des secondes intercalaires à l'aide de valeurs telles que 60 ou 61.
      • -
    • Si le nombre de secondes est indiqué et que c'est un entier, il ne doit pas être suivi d'un point.
      • -
    • Si les millisecondes sont indiquées, la valeur correspondante peut être composée d'un à trois chiffres.
      • +
    • L'heure est toujours exprimée selon une horloge sur 24 heures où 00 correspond à minuit et où 23 correspond à onze heures du soir. Aucune valeur en dehors de l'intervalle 00-23 n'est autorisée.
      • +
    • La valeur représentant les minutes doit être composée de deux chiffres et être située entre 00 et 59. Les valeurs en dehors de cet intervalle ne sont pas autorisées.
      • +
    • Si les secondes ne sont pas exprimées, il ne faut pas que la valeur se termine par un deux-points (après les minutes).
      • +
    • Si les secondes sont exprimées, leur nombre doit être entre 00 et 59. Il n'est pas possible d'indiquer des secondes intercalaires à l'aide de valeurs telles que 60 ou 61.
      • +
    • Si le nombre de secondes est indiqué et que c'est un entier, il ne doit pas être suivi d'un point.
      • +
    • Si les millisecondes sont indiquées, la valeur correspondante peut être composée d'un à trois chiffres.
    - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + +
    Exemples de chaînes de caractères valides pour exprimer une heure
    Chaîne de caractèresHeure
    00:00:30.75Minuit passé de 30 secondes et 750 millisecondes
    12:15Midi passé de quinze minutes
    13:44:2513 heures 44 et 25 secondes
    Exemples de chaînes de caractères valides pour exprimer une heure
    Chaîne de caractèresHeure
    00:00:30.75Minuit passé de 30 secondes et 750 millisecondes
    12:15Midi passé de quinze minutes
    13:44:2513 heures 44 et 25 secondes
    -

    Représentation des dates et heures locales

    +

    Représentation des dates et heures locales

    -

    Une chaîne de caractères datetime-local se compose d'une chaîne de caractères représentant une date, suivie de la lettre "T" ou d'une espace puis d'une chaîne de caractères représentant une heure. La représentation ne contient aucune information quant au fuseau horaire dont il est question et on présume que la valeur temporelle indiquée est relative au fuseau horaire de l'utilisateur.

    +

    Une chaîne de caractères valide pour un élément de saisie datetime-local se compose d'une chaîne de caractères représentant une date, suivie de la lettre "T" ou d'une espace puis d'une chaîne de caractères représentant une heure. La représentation ne contient aucune information quant au fuseau horaire dont il est question et on présume que la valeur temporelle indiquée est relative au fuseau horaire de l'utilisateur.

    -

    Lorsqu'on définit la valeur de l'attribut {{htmlattrxref("value", "input")}} d'un champ datetime-local, la chaîne de caractères est normalisée. Les formes normalisées utilisent toujours la lettre T comme séparateur entre la date et l'heure. De plus, les formes normalisées utilisent toujours la forme la plus courte pour exprimer l'heure (les secondes sont omises si leur valeur est :00).

    +

    Lorsqu'on définit la valeur de l'attribut value d'un champ <input> de type datetime-local, la chaîne de caractères est normalisée. Les formes normalisées utilisent toujours la lettre T comme séparateur entre la date et l'heure. De plus, les formes normalisées utilisent toujours la forme la plus courte pour exprimer l'heure (les secondes sont omises si leur valeur est :00).

    - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +
    Exemples de chaînes de caractères valides pour l'expression de dates/heures
    Chaîne de caractèresVersion normaliséeDate et heure correspondantes
    1986-01-28T11:38:00.011986-01-28T11:38:00.0128 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes
    1986-01-28 11:38:00.0101986-01-28T11:38:00.01128 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes
    0170-07-31T22:00:000170-07-31T22:00231 juillet 170 à 22 heures
    Exemples de chaînes de caractères valides pour l'expression de dates/heures
    Chaîne de caractèresVersion normaliséeDate et heure correspondantes
    1986-01-28T11:38:00.011986-01-28T11:38:00.0128 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes
    1986-01-28 11:38:00.0101986-01-28T11:38:00.01128 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes
    0170-07-31T22:00:000170-07-31T22:00231 juillet 170 à 22 heures
      -
    1. On notera qu'après la normalisation, on obtient la même chaîne que sur l'exemple précédent : l'espace séparateur a été remplacé par un "T" et le zéro de terminaison a été supprimé pour raccourcir la chaîne de l'heure.
      2. -
    2. On notera que la forme normalisée de cette date ne contient pas l'expression des secondes.
      3. +
    3. On notera qu'après la normalisation, on obtient la même chaîne que sur l'exemple précédent : l'espace séparateur a été remplacé par un "T" et le zéro de terminaison a été supprimé pour raccourcir la chaîne de l'heure.
      4. +
    4. On notera que la forme normalisée de cette date ne contient pas l'expression des secondes.
    -

    Représentation des dates et heures universelles

    +

    Représentation des dates et heures universelles

    Une valeur de date/heure universelle exprime la date et l'heure mais aussi le fuseau horaire de l'instant. Une chaîne de caractères représentant une telle valeur commence de la même façon qu'une chaîne de caractère représentant une date/heure locale, suivie d'une chaîne de caractères indiquant le décalage horaire.

    -

    Chaîne de caractères exprimant le décalage horaire

    +

    Chaîne de caractères exprimant le décalage horaire

    La chaîne de caractères qui décrit le décalage horaire contient un décalage positif d'heures et de minutes, relativement à un fuseau de base. Il existe deux points de référence qui sont très proches sans être identiques :

      -
    • Pour les dates situées après la création du temps coordonné universel (UTC, {{interwiki("wikipedia", "Coordinated Universal Time")}}) au début des années 60, le point de référence est indiqué avec Z et le décalage indique le décalage d'un fuseau horaire par rapport au méridien situé à la longitude 0° (méridien de Greenwich).
      • -
    • Pour les dates antérieures à UTC, le point de référence est exprimé en {{interwiki("wikipedia", "UT1")}}, qui correspond au temps solaire au méridien de longitude 0°.
      • +
    • Pour les dates situées après la création du temps coordonné universel (UTC, Coordinated Universal Time) au début des années 60, le point de référence est indiqué avec Z et le décalage indique le décalage d'un fuseau horaire par rapport au méridien situé à la longitude 0° (méridien de Greenwich).
      • +
    • Pour les dates antérieures à UTC, le point de référence est exprimé en UT1, qui correspond au temps solaire au méridien de longitude 0°.

    La chaîne de caractères indiquant le décalage est directement ajoutée après la valeur pour la date et l'heure. Si la date et l'heure sont déjà exprimées relativement à UTC, on pourra simplement suffixer "Z", sinon, on construira le complément de la façon suivante :

      -
    1. Un caractère indiquant le signe du décalage : le plus ("+" ou U+002B) pour les fuseaux situés à l'est du méridien ou le moins ("-" ou U+002D) pour les fuseaux situés à l'ouest.
      2. -
    2. Deux chiffres indiquant le nombre d'heures de décalage par rapport au méridien. Cette valeur doit être comprise entre 00 et 23.
      3. -
    3. Deux-points (":") (nécessaires uniquement si le décalage contient des minutes)
      4. -
    4. Deux chiffres indiquant les minutes de décalage. Cette valeur doit être comprise entre 00 et 59.
      5. +
    5. Un caractère indiquant le signe du décalage : le plus ("+" ou U+002B) pour les fuseaux situés à l'est du méridien ou le moins ("-" ou U+002D) pour les fuseaux situés à l'ouest.
      6. +
    6. Deux chiffres indiquant le nombre d'heures de décalage par rapport au méridien. Cette valeur doit être comprise entre 00 et 23.
      7. +
    7. Deux-points (":") (nécessaires uniquement si le décalage contient des minutes)
      8. +
    8. Deux chiffres indiquant les minutes de décalage. Cette valeur doit être comprise entre 00 et 59.

    Bien que ces règles permettent d'exprimer des fuseaux horaires entre -23:59 et +23:59, l'intervalle actuel des décalages horaires est -12:00 à +14:00 et il n'y a pas de fuseau horaire pour lequel le décalage en minutes est différent de 00, 30 ou 45. Cela peut en théorie évoluer à tout moment car les pays sont libres de modifier leur fuseau horaire quand ils le souhaitent.

    - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +
    Exemples de chaînes de caractères valides pour l'expression de dates/heures universelles
    Chaîne de caractèresDate/heure universelleDate/heure sur le méridien solaire
    2005-06-07T00:00Z7 juin 2005 à minuit UTC7 juin 2005 à minuit
    1789-08-22T12:30:00.1-04:0022 août 1789 à midi trente (passé d'un dixième de seconde) selon l'heure avancée de l'Est (Eastern Daylight Time (EDT))22 août 1789 à 16 heures trente passées d'un dixième de seconde
    3755-01-01 00:00+10:001er janvier 3755 à minuit pour le fuseau AEST (Australian Eastern Standard Time)31 décembre 3754 à 14h
    Exemples de chaînes de caractères valides pour l'expression de dates/heures universelles
    Chaîne de caractèresDate/heure universelleDate/heure sur le méridien solaire
    2005-06-07T00:00Z7 juin 2005 à minuit UTC7 juin 2005 à minuit
    1789-08-22T12:30:00.1-04:0022 août 1789 à midi trente (passé d'un dixième de seconde) selon l'heure avancée de l'Est (Eastern Daylight Time (EDT))22 août 1789 à 16 heures trente passées d'un dixième de seconde
    3755-01-01 00:00+10:001er janvier 3755 à minuit pour le fuseau AEST (Australian Eastern Standard Time)31 décembre 3754 à 14h
    -

    Voir aussi

    +

    Voir aussi

    diff --git a/files/fr/web/html/index.html b/files/fr/web/html/index.html index 9d4ec4719b..05eccb44b5 100644 --- a/files/fr/web/html/index.html +++ b/files/fr/web/html/index.html @@ -3,7 +3,7 @@ title: HTML (HyperText Markup Language) slug: Web/HTML tags: - HTML - - HTML 5 + - HTML5 - Landing - Reference - Web @@ -11,88 +11,88 @@ translation_of: Web/HTML ---
    {{HTMLSidebar}}
    -

    HTML signifie « HyperText Markup Language » qu'on peut traduire par « langage de balises pour l'hypertexte ». Il est utilisé afin de créer et de représenter le contenu d'une page web et sa structure. D'autres technologies sont utilisées avec HTML pour décrire la présentation d'une page (CSS) et/ou ses fonctionnalités interactives (JavaScript).

    +

    HTML signifie « HyperText Markup Language » qu'on peut traduire par « langage de balises pour l'hypertexte ». Il est utilisé afin de créer et de représenter le contenu d'une page web et sa structure. D'autres technologies sont utilisées avec HTML pour décrire la présentation d'une page (CSS) et/ou ses fonctionnalités interactives (JavaScript).

    -

    HTML fonctionne grâce à des « balises » qui sont insérées au sein d'un texte normal. Chacune de ces balises indique la signification de telle ou telle portion de texte dans le site. On parle d'« hypertexte » en référence aux liens qui connectent les pages web entre elles. C'est la mécanique originelle du « World Wide Web » que nous connaissons aujourd'hui. En écrivant et publiant des pages web, vous devenez un acteur du Web dès que votre site est accessible en ligne.

    +

    L'« hypertexte » désigne les liens qui relient les pages web entre elles, que ce soit au sein d'un même site web ou entre différents sites web. Les liens sont un aspect fondamental du Web. Ce sont eux qui forment cette « toile » (ce mot est traduit par web en anglais). En téléchargeant du contenu sur l'Internet et en le reliant à des pages créées par d'autres personnes, vous devenez un participant actif du World Wide Web.

    -

    HTML permet d'inclure des images et d'autres contenus dans les pages web. Grâce à HTML, chacun peut créer des sites web aussi bien statiques que dynamiques. HTML est le langage qui permet de décrire la structure et le contenu d'un document web. Ce contenu est balisé par des éléments HTML comme {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}},{{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}} et bien d'autres encore. Ces éléments forment les blocs utilisés pour construire un site web.

    +

    Le langage HTML utilise des « balises » pour annoter du texte, des images et d'autres contenus afin de les afficher dans un navigateur web. Le balisage HTML comprend des « éléments » spéciaux tels que <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> et bien d'autres.

    En HTML, les balises sont insensibles à la casse et peuvent aussi bien être écrites en minuscules, en majuscules voire avec un mélange des deux. Autrement dit, la balise <title> pourrait très bien être écrite comme <Title>, <TiTle> ou d'une autre façon.

    -

    Les articles suivants fournissent des éléments de référence utiles au développement web :

    +

    Les articles suivants fournissent des éléments de référence utiles au développement web.

    -
    -
      -
    • Introduction à HTML +

      Ressources clés

      -

      Vous faites vos premiers pas dans le développement web ? Nos articles sur les bases de HTML expliquent ce qu'est HTML et comment l'utiliser.

      -
      • -
    • Tutoriels HTML -

      Pour plus d'informations sur l'utilisation du HTML, des tutoriels et des exemples complets, vous pouvez consulter notre section Apprendre HTML.

      -
      • -
    • Référence HTML -

      Dans notre référence exhaustive, vous trouverez le détail de chaque élément et attribut constituant HTML.

      -
      • -
    +
    +
    Introduction au HTML
    +
    Vous faites vos premiers pas dans le développement web ? Nos articles sur les bases de HTML expliquent ce qu'est HTML et comment l'utiliser.
    +
    Tutoriels HTML
    +
    Pour plus d'informations sur l'utilisation du HTML, des tutoriels et des exemples complets, vous pouvez consulter notre section Apprendre HTML.
    +
    Référence HTML
    +
    Dans notre référence exhaustive, vous trouverez le détail de chaque élément et attribut constituant HTML.
    +
    + +
    +

    Vous cherchez à devenir un développeur web front-end ?

    + +

    Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

    + +

    Commencer +

    +
    -
    -
    -

    Tutoriels

    +

    Tutoriels pour les débutants

    -

    La section Apprendre HTML contient plusieurs modules pour vous apprendre à utiliser HTML sans autre connaissance particulière.

    +

    La section Apprendre HTML contient plusieurs modules pour vous apprendre à utiliser HTML — sans autre connaissance particulière.

    -
    Une introduction à HTML
    -
    Dans ce module, on brosse un premier portrait de HTML pour présenter les concepts importants, la syntaxe. On voit comment appliquer HTML sur du texte, comment créer des hyperliens et comment structurer une page web grâce à HTML.
    -
    Le multimédia et l'intégration
    -
    Dans ce module, on explore comment utiliser HTML pour intégrer des fichiers multimédias dans une page web. Cela couvre les différentes façons d'inclure une image, comment ajouter une vidéo ou un fichier audio voire aussi comment intégrer d'autres pages web.
    -
    Les tableaux HTML
    -
    Il est parfois compliqué de représenter des données tabulaires de façon compréhensible et lisible sur une page web. Dans ce module, on voit les différentes balises utilisées pour construire des tableaux et certaines fonctionnalités plus complexes comme les légendes et résumés.
    -
    Les formulaires HTML
    -
    Les formulaires sont cruciaux sur le Web, ils permettent de créer un compte sur un site, de se connecter, d'acheter des produits, d'écrire des commentaires, etc. Dans ce module, on voit comment créer des formulaires pour le navigateur (« côté client »).
    -
    Utiliser HTML pour résoudre des problèmes courants
    -
    Ce module fournit un ensemble d'articles au sujet des problèmes qu'on rencontre fréquemment lorsqu'on crée une page web : gérer les titres, ajouter des images ou des vidéos, mettre en avant une partie du texte, créer un formulaire, etc.
    +
    Une introduction à HTML
    +
    Dans ce module, on brosse un premier portrait de HTML pour présenter les concepts importants, la syntaxe. On voit comment appliquer HTML sur du texte, comment créer des hyperliens et comment structurer une page web grâce à HTML.
    +
    Le multimédia et l'intégration
    +
    Dans ce module, on explore comment utiliser HTML pour intégrer des fichiers multimédias dans une page web. Cela couvre les différentes façons d'inclure une image, comment ajouter une vidéo ou un fichier audio voire aussi comment intégrer d'autres pages web.
    +
    Les tableaux HTML
    +
    Il est parfois compliqué de représenter des données tabulaires de façon compréhensible et lisible sur une page web. Dans ce module, on voit les différentes balises utilisées pour construire des tableaux et certaines fonctionnalités plus complexes comme les légendes et résumés.
    +
    Les formulaires HTML
    +
    Les formulaires sont cruciaux sur le Web, ils permettent de créer un compte sur un site, de se connecter, d'acheter des produits, d'écrire des commentaires, etc. Dans ce module, on voit comment créer des formulaires pour le navigateur (« côté client »).
    +
    Utiliser HTML pour résoudre des problèmes courants
    +
    Ce module fournit un ensemble d'articles au sujet des problèmes qu'on rencontre fréquemment lorsqu'on crée une page web : gérer les titres, ajouter des images ou des vidéos, mettre en avant une partie du texte, créer un formulaire, etc.
    -

    Références

    +

    Sujets avancés

    -
    Référence HTML
    -
    HTML est un langage décrivant la structure et le contenu sémantique d'un document web. Il est constitué d'éléments, chacun pouvant être paramétré grâce à différents attributs.
    -
    Référence des éléments HTML
    -
    Cette page liste les différents éléments HTML.
    -
    Référence des attributs HTML
    -
    Les éléments HTML possèdent des attributs. Ce sont des valeurs additionnelles permettant de configurer ou d'ajuster le comportement les éléments de manières à répondre aux critères de l'utilisateur.
    -
    Éléments en ligne et éléments de bloc
    -
    Les éléments HTML sont habituellement des éléments « en ligne » ou des éléments de bloc. Un élément en ligne occupe seulement l'espace associé aux balises. Les éléments de bloc sont une catégorie d'éléments HTML opposés aux éléments en ligne. Leur caractéristique principale réside dans le fait qu'ils sont séparés par un saut de ligne avant et après l'élément. Ce faisant, ils prennent la largeur de leurs conteneurs (créant ainsi un bloc de contenu).
    -
    Attributs universels
    -
    Les attributs universels peuvent être utilisés sur tous les éléments HTML, même ceux non spécifiés dans le standard. Par exemple, les navigateurs qui prennent en charge HTML5 masquent les contenus marqués comme <toto hidden>...<toto>, bien que <toto> ne soit pas un élément valide HTML.
    -
    Types de lien
    -
    Les différents liens permettent de décrire les relations entre deux documents qui sont reliés entre eux par un élément {{HTMLElement("a")}}, {{HTMLElement("area")}} ou {{HTMLElement("link")}}.
    -
    Formats de média audio et vidéo pris en charge par HTML
    -
    Les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}} permettent d'ajouter des médias audio et vidéo directement dans le navigateur (sans avoir à utiliser des plugins ou programmes tiers).
    -
    Types de contenu HTML
    -
    HTML s'organise selon différents types de contenu dont chacun peut être autorisé ou non en fonction du contexte. Ces catégories indiquent quels éléments peuvent être contenus ou non dans d'autres éléments. Cet article explique le fonctionnement de ces catégories.
    +
    Images avec le contrôle d'accès HTTP
    +
    L'attribut crossorigin, associé à un en-tête CORS approprié, permet de charger des images définies par l'élément <img> depuis des origines étrangères et de les utiliser dans un élément <canvas> comme si elles étaient chargées depuis l'origine actuelle.
    +
    Attributs de réglage du CORS
    +
    Certains éléments HTML qui fournissent un support pour CORS, tels que <img> ou <video>, ont un attribut crossorigin (propriété crossOrigin), qui vous permet de configurer les requêtes CORS pour les données extraites de l'élément.
    +
    Précharger du contenu avec rel="preload"
    +
    La valeur preload de l'attribut <link> de l'élément rel vous permet d'écrire des requêtes déclaratives de récupération dans votre <head> HTML, en spécifiant les ressources dont vos pages auront besoin très rapidement après le chargement, et que vous souhaitez donc commencer à précharger au début du cycle de vie d'une page, avant que le cycle de rendu du navigateur ne se mette en marche. Cela permet de s'assurer que ces éléments sont disponibles plus tôt et qu'ils risquent moins de bloquer le premier rendu de la page, améliorant ainsi les performances. Cet article fournit un guide de base sur le fonctionnement du preload.
    -
    -
    -

    Autres guides

    +

    Références

    -
    Images avec CORS activé
    -
    L'attribut {{htmlattrxref("crossorigin", "img")}}, utilisé avec un en-tête {{glossary("CORS")}} adéquat, permet aux images définies via un élément {{HTMLElement("img")}} d'être chargées depuis des origines tierces et d'être utilisées au sein d'éléments {{HTMLElement("canvas")}} comme si elles étaient chargées depuis l'origine courante.
    -
    Attributs de réglage du CORS
    -
    Certains des éléments HTML supportant le CORS (Cross-Origin Resource Sharing) comme {{HTMLElement("img")}} ou {{HTMLElement("video")}} ont un attribut {{HTMLattrxref("crossorigin","img")}} qui permet de configurer les requêtes CORS pour les données de l'élément à renvoyer.
    -
    Gérer le focus en HTML
    -
    L'attribut DOM {{domxref("Document.activeElement")}} et la méthode DOM {{domxref("Document.hasFocus()")}} permettent au programmeur de mieux contrôler l'interactivité d'une page vis à vis des actions de l'utilisateur. Ils peuvent par exemple être utilisés pour des statistiques, pour surveiller le nombre de clics sur certains liens d'une page, pour comptabiliser le nombre de fois où l'élément reçoit le focus, etc. De plus, combinés à AJAX, ils aident à minimiser le nombre de requêtes au serveur, en fonction de l'activité de l'utilisateur et de l'agencement de la page.
    -
    Précharger du contenu grâce à rel="preload"
    -
    La valeur preload de l'attribut {{htmlattrxref("rel", "link")}} associé à l'élément {{htmlelement("link")}} permet d'écrire des requêtes de récupération de ressources au sein de l'élément {{htmlelement("head")}} du document HTML pour les ressources qui seront nécessaires à la page peu de temps après le chargement. Les ressources ciblées sont ainsi préchargées lors du chargement de la page avant que le navigateur effectue un premier rendu. Cela permets que les ressources soient disponibles plus tôt et moins susceptibles de bloquer l'affichage de la page, améliorant ainsi les performances. Cet article explique les bases du fonctionnement de preload.
    -
    Modes de compatibilité (quirks mode) et mode standard
    -
    Des informations historiques à propos du mode quirks et du mode standard.
    +
    Référence HTML
    +
    HTML est un langage décrivant la structure et le contenu sémantique d'un document web. Il est constitué d'éléments, chacun pouvant être paramétré grâce à différents attributs. Les documents HTML sont connectés à d'autres via des liens
    +
    Référence des éléments HTML
    +
    Cette page liste les différents éléments HTML.
    +
    Liste des attributs HTML
    +
    Les éléments du langage HTML possèdent des attributs. Il s'agit de valeurs supplémentaires qui configurent les éléments ou ajustent leur comportement de diverses manières.
    +
    Attributs universels
    +
    Les attributs universels peuvent être spécifiés sur tous les éléments HTML, même ceux qui ne sont pas spécifiés dans la norme. Par exemple, les navigateurs qui prennent en charge HTML5 masquent les contenus marqués comme <toto hidden>…<toto>, bien que <toto> ne soit pas un élément valide HTML.
    +
    Éléments en ligne et éléments de bloc
    +
    Les éléments HTML sont habituellement des éléments « en ligne » ou des éléments de bloc. Un élément en ligne occupe seulement l'espace associé aux balises. Les éléments de bloc sont une catégorie d'éléments HTML opposés aux éléments en ligne. Leur caractéristique principale réside dans le fait qu'ils sont séparés par un saut de ligne avant et après l'élément. Ce faisant, ils prennent la largeur de leurs conteneurs (créant ainsi un bloc de contenu).
    +
    Types de lien
    +
    Les différents liens permettent de décrire les relations entre deux documents qui sont reliés entre eux par un élément <a>, <area> ou <link>.
    +
    Formats de média audio et vidéo pris en charge par HTML
    +
    Les éléments <audio> et <video> permettent d'ajouter des médias audio et vidéo directement dans le navigateur (sans avoir à utiliser des plugins ou programmes tiers).
    +
    Types de contenu HTML
    +
    HTML s'organise selon différents types de contenu dont chacun peut être autorisé ou non en fonction du contexte. Ces catégories indiquent quels éléments peuvent être contenus ou non dans d'autres éléments. Cet article explique le fonctionnement de ces catégories.
    -
    -
    -

    Voir tout…

    -
    + + +
    +
    Appliquer des couleurs sur des éléments HTML grâce à CSS
    +
    Cet article couvre la plupart des façons d'utiliser CSS pour ajouter de la couleur au contenu HTML, en indiquant les parties des documents HTML qui peuvent être colorées et les propriétés CSS à utiliser pour ce faire. Il comprend des exemples, des liens vers des outils de création de palettes, etc.
    +
    diff --git a/files/fr/web/html/inline_elements/index.html b/files/fr/web/html/inline_elements/index.html index 5c8664af08..823dc1dd6e 100644 --- a/files/fr/web/html/inline_elements/index.html +++ b/files/fr/web/html/inline_elements/index.html @@ -1,24 +1,25 @@ --- -title: Éléments en-ligne +title: Éléments en ligne slug: Web/HTML/Inline_elements tags: + - Beginner - Débutant - - Elements en ligne + - Elements - Guide - HTML + - HTML Elements + - Layout - Reference translation_of: Web/HTML/Inline_elements original_slug: Web/HTML/Éléments_en_ligne --- -
    {{HTMLSidebar}}
    +

    Les éléments HTML (Hypertext Markup Language) étaient historiquement catégorisés comme des éléments de type « bloc » (block en anglais) ou de type « en ligne » (inline en anglais). Comme il s'agit d'une caractéristique de présentation, elle est aujourd'hui spécifiée par CSS dans le module de spécification Flow Layout qui définit l'organisation visuelle par défaut des éléments (le « flux » normal). Les éléments en lignes n'occupent que l'espace entre leurs balises et s'insèrent dans le flux du contenu plutôt que de créer un nouveau « bloc » visuel. Dans cet article, nous verrons en détails ces éléments en ligne et leurs différences par rapport aux éléments de bloc.

    -

    En HTML, les éléments en ligne (inline elements en anglais) sont ceux qui occupent l'espace délimités par leurs balises plutôt que d'interrompre le flux du contenu. Dans cet article, nous étudierons ces éléments en ligne et également leurs différences quant aux éléments de bloc (block-level elements).

    - -
    -

    Note : Un élément en ligne ne commence pas sur une nouvelle ligne et prend uniquement la largeur qui lui est nécessaire.

    +
    +

    Note : Un élément en ligne ne commence pas sur une nouvelle ligne et prend uniquement la largeur qui lui est nécessaire.

    -

    Éléments en ligne et éléments de bloc : un exemple

    +

    Éléments en ligne et éléments de bloc : un exemple

    Un exemple vaut mieux qu'une longue explication. Voici pour commencer la feuille de style CSS que nous utiliserons :

    @@ -26,17 +27,17 @@ original_slug: Web/HTML/Éléments_en_ligne background-color:#ee3; } -

    Élément en ligne

    +

    Élément en ligne

    Le fragment de code HTML qui suit utilise un élément en ligne avec la classe highlight :

    -
    <p>The following span is an <span class="highlight">inline element</span>;
-its background has been colored to display both the beginning and end of
-the inline element's influence.</p>
    +
    <p>L'élément span qui suit est un <span class="highlight">élément en ligne</span> ;
+son arrière-plan est coloré afin d'illustrer la zone couverte par cet élément en
+ligne.</p>
    -

    Dans cet exemple, l'élément {{HTMLElement("p")}} (le paragraphe) est un élément de bloc qui contient du texte. Dans ce texte, on a un élément {{HTMLElement("span")}} qui est un élément en ligne. L'élément <span> étant un élément en ligne, le paragraphe est bien affiché sous la forme d'un flux de texte sans rupture :

    +

    Dans cet exemple, l'élément <p> (le paragraphe) est un élément de bloc qui contient du texte. Dans ce texte, on a un élément <span> qui est un élément en ligne. L'élément <span> étant un élément en ligne, le paragraphe est bien affiché sous la forme d'un flux de texte sans rupture :

    -

    {{EmbedLiveSample("Élément_en_ligne", 600, 80)}}

    +

    {{EmbedLiveSample("Inline", "", 120)}}

    -

    Élément de bloc

    +

    Élément de bloc

    -

    Transformons l'exemple précédent pour passer d'un élément <span> à un élément {{HTMLElement("div")}} qui est un élément de bloc :

    +

    Transformons l'exemple précédent pour passer d'un élément <span> à un élément <div> qui est un élément de bloc :

    -
    <p>The following div is an <div class="highlight">block-level element;</div>
-its background has been colored to display both the beginning and end of
-the block-level element's influence.</p>
    +
    <p>L'élément div qui suit est un <div class="highlight">élément de bloc</div> ;
+son arrière-plan est coloré afin d'illustrer la zone couverte par cet élément de
+bloc.</p>