diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-13 07:08:36 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-10-13 07:08:36 +0200 |
| commit | 2727d3c76fd54476ecc29fc01b6ce3fe8e33b582 (patch) | |
| tree | 63d2792b527b189d288b229a63a8e98ddd95d23f /files/fr/web/html | |
| parent | faa42f59fe323aa6c5da07ab099ce903ab955cc5 (diff) | |
| download | translated-content-2727d3c76fd54476ecc29fc01b6ce3fe8e33b582.tar.gz translated-content-2727d3c76fd54476ecc29fc01b6ce3fe8e33b582.tar.bz2 translated-content-2727d3c76fd54476ecc29fc01b6ce3fe8e33b582.zip | |
Prepare HTML section for Markdown conversion (#2628)
* Remove summary classes
* Remove useless spans
* Remove notranslate
* Fix element index page (cf en-US)
* Align page vs en-US cf8bcd9 for CI
* Remove hidden classes
* remove ids
* Fix notes - part 1 / n
* Fix notes - part 2/2
* Fix warnings
* fix dls and some other issues
* Fix imgs and styles
Diffstat (limited to 'files/fr/web/html')
200 files changed, 1277 insertions, 2052 deletions
diff --git a/files/fr/web/html/applying_color/index.html b/files/fr/web/html/applying_color/index.html index f7c67a9c00..ea1e73ea67 100644 --- a/files/fr/web/html/applying_color/index.html +++ b/files/fr/web/html/applying_color/index.html @@ -17,7 +17,7 @@ original_slug: Web/HTML/Appliquer_des_couleurs --- <div>{{HTMLRef}}</div> -<p class="summary">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 <a href="/fr/docs/Web/CSS">CSS</a>, il existe de nombreuses façons d'ajouter de la couleur aux <a href="/fr/docs/Web/HTML/Element">éléments</a> <a href="/fr/docs/Web/HTML">HTML</a> 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.</p> +<p>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 <a href="/fr/docs/Web/CSS">CSS</a>, il existe de nombreuses façons d'ajouter de la couleur aux <a href="/fr/docs/Web/HTML/Element">éléments</a> <a href="/fr/docs/Web/HTML">HTML</a> 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.</p> <p>L'ajout de couleur à un document HTML s'avère assez simple et permet de colorer presque tous les éléments.</p> @@ -149,11 +149,9 @@ original_slug: Web/HTML/Appliquer_des_couleurs <p>D'autres personnes préfèrent manipuler <a href="https://fr.wikipedia.org/wiki/Teinte_saturation_luminosit%C3%A9">la notation HSL ou aussi appelée « Teinte saturation luminosité »</a> (NDT : HSL signifie <em>Hue Saturation Lightness</em> en anglais). Sur le Web, les couleurs HSL sont représentées grâce à la notation fonctionnelle <code>hsl()</code> (qui fonctionne de façon analogue à la fonction <code>rgb()</code>).</p> -<div style="padding-bottom: 20px;"> - <figure style="width: 500px;"><img alt="HSL color cylinder" src="1200px-hsl_color_solid_cylinder_alpha_lowgamma.png"> - <figcaption><em><strong>Figure 1. Le cylindre HSL.</strong> <i>Hue</i> (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 <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> sur <a href="https://www.wikipedia.org/">Wikipédia</a> et est distribuée avec la licence <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a>.</em></figcaption> - </figure> - </div> +<p>Le diagramme qui suit illustre un cylindre de couleur pour le modèle HSL : <i>Hue</i> (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 <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> sur <a href="https://www.wikipedia.org/">Wikipédia</a> et est distribuée avec la licence <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a>.</p> + +<img alt="Cylindre de couleur HSL" src="640px-hsl_color_solid_cylinder.png"> <p>La valeur de la teinte (<strong>H</strong>) 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 <a href="/fr/docs/Web/CSS/angle"><code><angle></code></a> et on peut utiliser différentes unités disponibles en CSS comme les degrés (<code>deg</code>), les radians (<code>rad</code>), les grades (<code>grad</code>) ou les tours (<code>turn</code>).</p> @@ -169,11 +167,11 @@ original_slug: Web/HTML/Appliquer_des_couleurs <p>Il est également possible d'ajouter un canal alpha afin d'avoir une couleur partiellement (ou totalement) transparente.</p> +<h4>Exemples avec HSL</h4> + <p>Voici quelques exemples utilisant la notation HSL :</p> -<div id="hsl-swatches"> -<div class="hidden"> -<pre class="brush: css">table { +<pre class="brush: css hidden">table { border: 1px solid black; font: 16px "Open Sans", Helvetica, Arial, sans-serif; border-spacing: 0; @@ -190,7 +188,7 @@ th { background-color: hsl(0, 0%, 75%); }</pre> -<pre class="brush: html"><table> +<pre class="brush: html hidden"><table> <thead> <tr> <th scope="col">Couleur en notation HSL</th> @@ -224,12 +222,10 @@ th { </tr> </tbody> </table></pre> -</div> -<p>{{EmbedLiveSample("hsl-swatches", 300, 260)}}</p> -</div> +<p>{{EmbedLiveSample("Exemples_avec_HSL", 300, 260)}}</p> -<div class="notecard note"> +<div class="note"> <p><strong>Note :</strong> Il est possible d'omettre l'unité pour la valeur de la teinte (<em>hue</em>), l'unité par défaut utilisée sera alors les degrés (<code>deg</code>).</p> </div> @@ -342,7 +338,7 @@ th { <p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p> -<div class="notecard note"> +<div class="note"> <p><strong>Note :</strong> Sur macOS, pour indiquer qu'on a fini de choisir la couleur, il faut fermer la fenêtre du sélecteur de couleur.</p> </div> @@ -409,7 +405,7 @@ colorPicker.addEventListener("change", function(event) { <p>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 <a href="http://www.colorzilla.com/">ColorZilla</a>, par exemple, propose une extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) 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.</p> -<div class="notecard note"> +<div class="note"> <p><strong>Note :</strong> 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.</p> </div> @@ -427,7 +423,7 @@ colorPicker.addEventListener("change", function(event) { <p>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).</p> -<div class="notecard note"> +<div class="note"> <p><strong>Note :</strong> 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</p> </div> @@ -448,7 +444,7 @@ colorPicker.addEventListener("change", function(event) { <p>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.</p> -<div class="notecard note"> +<div class="note"> <p><strong>Note :</strong> 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é.</p> </div> @@ -500,7 +496,7 @@ colorPicker.addEventListener("change", function(event) { <p><code>color-adjust</code> peut être paramétré avec la valeur <code>exact</code> 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é.</p> -<div class="notecard note"> +<div class="note"> <p><strong>Note :</strong> Il n'est pas garanti que le navigateur respecte exactement la feuille de style utilisée avec <code>color-adjust: exact</code>. 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.</p> </div> diff --git a/files/fr/web/html/attributes/accept/index.html b/files/fr/web/html/attributes/accept/index.html index 90f1ff9bed..ab22f146ca 100644 --- a/files/fr/web/html/attributes/accept/index.html +++ b/files/fr/web/html/attributes/accept/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Attributes/accept --- <p>{{HTMLSidebar}}</p> -<p class="summary">L'attribut <strong><code>accept</code></strong> prend comme valeur une liste séparée par des virgules d'un ou plusieurs types de fichiers, ou d'une <a href="#unique_file_type_specifiers">spécification de type de fichier unique</a>, décrivant les types de fichiers à autoriser. La propriété <code>accept</code> est un attribut pour les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> de type <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>. Elle était prise en charge par l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, mais a été supprimée au profit de <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a> dans HTML5.</p> +<p>L'attribut <strong><code>accept</code></strong> prend comme valeur une liste séparée par des virgules d'un ou plusieurs types de fichiers, ou d'une <a href="#unique_file_type_specifiers">spécification de type de fichier unique</a>, décrivant les types de fichiers à autoriser. La propriété <code>accept</code> est un attribut pour les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> de type <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>. Elle était prise en charge par l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, mais a été supprimée au profit de <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a> dans HTML5.</p> <p>Comme un type de fichier donné peut être identifié de plusieurs manières, il est utile de fournir un ensemble complet de spécificateurs de type lorsque vous avez besoin de fichiers d'un type spécifique, ou d'utiliser le joker pour indiquer qu'un type de n'importe quel format est accepté.</p> @@ -82,19 +82,16 @@ translation_of: Web/HTML/Attributes/accept </div> </form></pre> -<div class="hidden"> <pre class="brush: css">div { margin-bottom: 10px; }</pre> -</div> <p>Cela produit le résultat suivant :</p> <p>{{EmbedLiveSample('a_basic_example', 650, 100)}}</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous pouvez trouver cet exemple sur GitHub également - voir le <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">code source</a>, et aussi <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">le fonctionnement en direct</a>.</p> +<div class="note"> + <p><strong>Note :</strong> Vous pouvez trouver cet exemple sur GitHub également - voir le <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">code source</a>, et aussi <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">le fonctionnement en direct</a>.</p> </div> <p>Quel que soit le dispositif ou le système d'exploitation de l'utilisateur, l'entrée de fichier fournit un bouton qui ouvre une boîte de dialogue de sélection de fichier permettant à l'utilisateur de choisir un fichier.</p> @@ -127,11 +124,9 @@ translation_of: Web/HTML/Attributes/accept </div> </form></pre> -<div class="hidden"> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; }</pre> -</div> <p>{{EmbedLiveSample('limiting_accepted_file_types', 650, 100)}}</p> diff --git a/files/fr/web/html/attributes/autocomplete/index.html b/files/fr/web/html/attributes/autocomplete/index.html index 8e26069dd5..a419111c3f 100644 --- a/files/fr/web/html/attributes/autocomplete/index.html +++ b/files/fr/web/html/attributes/autocomplete/index.html @@ -22,7 +22,7 @@ original_slug: Web/HTML/Attributs/autocomplete --- <div>{{HTMLSidebar}}</div> -<p class="summary">L'attribut <code>autocomplete</code> est disponible sur les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> qui prennent une valeur textuelle ou numérique en entrée, mais aussi pour les éléments <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> et <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>. <code>autocomplete</code> permet aux développeuses et développeurs web de spécifier quelle est l'autorisation éventuelle, pour l'<a href="/fr/docs/Glossary/User_agent">agent utilisateur</a>, de fournir une assistance automatisée afin de remplir les valeurs des champs de formulaire, ainsi que des indications au navigateur quant au type d'informations attendues dans le champ.</p> +<p>L'attribut <code>autocomplete</code> est disponible sur les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> qui prennent une valeur textuelle ou numérique en entrée, mais aussi pour les éléments <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> et <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>. <code>autocomplete</code> permet aux développeuses et développeurs web de spécifier quelle est l'autorisation éventuelle, pour l'<a href="/fr/docs/Glossary/User_agent">agent utilisateur</a>, de fournir une assistance automatisée afin de remplir les valeurs des champs de formulaire, ainsi que des indications au navigateur quant au type d'informations attendues dans le champ.</p> <p>La source fournissant les valeurs suggérées pour l'autocomplétion dépend du navigateur. Généralement, celle-ci est constituée des valeurs saisies précédemment par l'utilisateur. Des valeurs préconfigurées peuvent aussi être utilisées. Ainsi, un navigateur pourra permettre à un utilisateur d'enregistrer son nom, son adresse, son numéro de téléphone et des adresses électroniques pour l'aider lors de l'autocomplétion. Le navigateur pourrait également fournir le stockage chiffré des informations de cartes bancaires et déclencher une procédure d'authentification lorsque ces informations doivent être récupérées pour être utilisées.</p> @@ -30,9 +30,8 @@ original_slug: Web/HTML/Attributs/autocomplete <p>Pour plus d'informations, voir la documentation de l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-autocomplete"><code>autocomplete</code></a> pour l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>.</p> -<div class="notecard note"> - <p><b>Note: </b></p> - <p>Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments <code><input></code>/<code><select></code>/<code><textarea></code>:</p> +<div class="note"> + <p><strong>Note :</strong> Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments <code><input></code>/<code><select></code>/<code><textarea></code>:</p> <ol> <li>Que ceux-ci aient un attribut <code>name</code> et/ou <code>id</code></li> @@ -46,9 +45,8 @@ original_slug: Web/HTML/Attributs/autocomplete <dl> <dt><code>off</code></dt> <dd>Le navigateur n'est pas autorisé à saisir automatiquement des valeurs pour ce champ. Cette valeur peut être utilisée lorsque le document ou l'application fournit son propre mécanisme d'autocomplétion ou lorsque des raisons de sécurité imposent de ne pas pouvoir saisir la valeur automatiquement. - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Pour la plupart des navigateurs modernes, utiliser <code>autocomplete="off"</code> n'empêchera pas un gestionnaire de mots de passe de demander à l'utilisateur s'il souhaite sauvegarder le nom d'utilisateur et le mot de passe ou de renseigner automatiquement les informations pour un formulaire de connexion. Voir <a href="/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields">l'article sur l'attribut <code>autocomplete</code> et les champs des formulaires de connexion</a>.</p> + <div class="note"> + <p><strong>Note :</strong> Pour la plupart des navigateurs modernes, utiliser <code>autocomplete="off"</code> n'empêchera pas un gestionnaire de mots de passe de demander à l'utilisateur s'il souhaite sauvegarder le nom d'utilisateur et le mot de passe ou de renseigner automatiquement les informations pour un formulaire de connexion. Voir <a href="/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields">l'article sur l'attribut <code>autocomplete</code> et les champs des formulaires de connexion</a>.</p> </div> </dd> <dt><code>on</code></dt> @@ -163,9 +161,8 @@ original_slug: Web/HTML/Attributs/autocomplete <p>Voir <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">la spécification WHATWG</a> pour plus de détails.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>À la différence des autres navigateurs, pour Firefox, l'attribut <code>autocomplete</code> contrôlera également si <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">l'état de désactivation ou de coche dynamique persiste lors d'un rechargement de la page</a> pour un champ <code><input></code>. Par défaut, un élément reste désactivé ou coché/décoché lors des rechargements. En utilisant l'attribut <code>autocomplete</code> avec la valeur <code>off</code>, on désactive cette fonctionnalité. Cela fonctionne, y compris lorsque l'attribut <code>autocomplete</code> ne devrait pas s'appliquer à l'élément <code><input></code> d'après son type. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">bug 654072</a>.</p> +<div class="note"> + <p><strong>Note :</strong> À la différence des autres navigateurs, pour Firefox, l'attribut <code>autocomplete</code> contrôlera également si <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">l'état de désactivation ou de coche dynamique persiste lors d'un rechargement de la page</a> pour un champ <code><input></code>. Par défaut, un élément reste désactivé ou coché/décoché lors des rechargements. En utilisant l'attribut <code>autocomplete</code> avec la valeur <code>off</code>, on désactive cette fonctionnalité. Cela fonctionne, y compris lorsque l'attribut <code>autocomplete</code> ne devrait pas s'appliquer à l'élément <code><input></code> d'après son type. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">bug 654072</a>.</p> </div> <h2 id="examples">Exemples</h2> diff --git a/files/fr/web/html/attributes/capture/index.html b/files/fr/web/html/attributes/capture/index.html index 63cefd3d74..c55c1a05e9 100644 --- a/files/fr/web/html/attributes/capture/index.html +++ b/files/fr/web/html/attributes/capture/index.html @@ -12,12 +12,7 @@ translation_of: Web/HTML/Attributes/capture --- <p>{{HTMLSidebar}}</p> -<div class="notecard draft"> - <p><b>Brouillon :</b></p> - <p>Cette page n'est pas terminée.</p> -</div> - -<p class="summary">L'attribut <strong><code>capture</code></strong> spécifie que, facultativement, un nouveau fichier doit être capturé, et le périphérique qui devrait être utilisé pour capturer ce nouveau média d'un type défini par l'attribut <code><a href="accept">accept</a></code>. Les valeurs comprennent <code>user</code> et <code>environment</code>. L'attribut capture est pris en charge sur les champs de formulaire de type <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>.</p> +<p>L'attribut <strong><code>capture</code></strong> spécifie que, facultativement, un nouveau fichier doit être capturé, et le périphérique qui devrait être utilisé pour capturer ce nouveau média d'un type défini par l'attribut <code><a href="accept">accept</a></code>. Les valeurs comprennent <code>user</code> et <code>environment</code>. L'attribut capture est pris en charge sur les champs de formulaire de type <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>.</p> <p>L'attribut <code>capture</code> prend pour valeur une chaîne de caractères qui spécifie quelle caméra utiliser pour la capture des données d'image ou de vidéo, si l'attribut <a href="accept"><code>accept</code></a> indique que l'entrée doit être de l'un de ces types.</p> @@ -40,9 +35,8 @@ translation_of: Web/HTML/Attributes/capture </tbody> </table> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Capture était auparavant un attribut booléen qui, lorsqu'il était présent, indiqué que les périphériques de capture de l'appareil (comme la caméra ou le micro) devaient être utilisés plutôt que de demander à l'utilisateur de sélectionner un fichier.</p> +<div class="note"> + <p><strong>Note :</strong> Capture était auparavant un attribut booléen qui, lorsqu'il était présent, indiqué que les périphériques de capture de l'appareil (comme la caméra ou le micro) devaient être utilisés plutôt que de demander à l'utilisateur de sélectionner un fichier.</p> </div> <h2 id="examples">Exemples</h2> diff --git a/files/fr/web/html/attributes/crossorigin/index.html b/files/fr/web/html/attributes/crossorigin/index.html index 76893fe115..6d9a19c6c6 100644 --- a/files/fr/web/html/attributes/crossorigin/index.html +++ b/files/fr/web/html/attributes/crossorigin/index.html @@ -14,7 +14,7 @@ original_slug: Web/HTML/Reglages_des_attributs_CORS --- <div>{{HTMLSidebar}}</div> -<p class="summary">L'attribut <strong><code>crossorigin</code></strong>, valable sur les éléments <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a> et <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, fournit la prise en charge de <a href="/en-US/docs/Web/HTTP/CORS">CORS</a>, définissant la manière dont l'élément traite les demandes d'origine croisée, permettant ainsi la configuration des demandes CORS pour les données extraites de l'élément. Selon l'élément, l'attribut peut être un attribut de paramètres CORS.</p> +<p>L'attribut <strong><code>crossorigin</code></strong>, valable sur les éléments <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a> et <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, fournit la prise en charge de <a href="/en-US/docs/Web/HTTP/CORS">CORS</a>, définissant la manière dont l'élément traite les demandes d'origine croisée, permettant ainsi la configuration des demandes CORS pour les données extraites de l'élément. Selon l'élément, l'attribut peut être un attribut de paramètres CORS.</p> <p>L'attribut de contenu <code>crossorigin</code> sur les éléments médias est un attribut de paramétrage CORS.</p> @@ -47,9 +47,8 @@ original_slug: Web/HTML/Reglages_des_attributs_CORS <p>Un mot-clé invalide ou une chaîne de caractères vide seront interprétés comme le mot-clé <code>anonymous</code>.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Avant Firefox 83, l'attribut <code>crossorigin</code> n'était pas pris en charge pour <code>rel="icon"</code> ; il existe également <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121645">un bug sur Chrome</a>.</p> +<div class="note"> + <p><strong>Note :</strong> Avant Firefox 83, l'attribut <code>crossorigin</code> n'était pas pris en charge pour <code>rel="icon"</code> ; il existe également <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121645">un bug sur Chrome</a>.</p> </div> <h2 id="examples">Exemples</h2> diff --git a/files/fr/web/html/attributes/disabled/index.html b/files/fr/web/html/attributes/disabled/index.html index acc0a9cbfc..7bc4989a26 100644 --- a/files/fr/web/html/attributes/disabled/index.html +++ b/files/fr/web/html/attributes/disabled/index.html @@ -11,20 +11,19 @@ translation_of: Web/HTML/Attributes/disabled --- <p>{{HTMLSidebar}}</p> -<p class="summary">L'attribut booléen <code><strong>disabled</strong></code>, lorsqu'il est présent, rend l'élément non mutable, non focusable, ou même non soumis avec le formulaire. L'utilisateur ne peut ni modifier ni cibler le contrôle, ni les descendants du contrôle de formulaire. Si l'attribut <code>disabled</code> est spécifié sur un contrôle de formulaire, l'élément et ses descendants de contrôle de formulaire ne participent pas à la validation des contraintes. Souvent, les navigateurs grisent ces contrôles et ils ne reçoivent aucun événement de navigation, comme les clics de souris ou les événements liés au focus.</p> +<p>L'attribut booléen <code><strong>disabled</strong></code>, lorsqu'il est présent, rend l'élément non mutable, non focusable, ou même non soumis avec le formulaire. L'utilisateur ne peut ni modifier ni cibler le contrôle, ni les descendants du contrôle de formulaire. Si l'attribut <code>disabled</code> est spécifié sur un contrôle de formulaire, l'élément et ses descendants de contrôle de formulaire ne participent pas à la validation des contraintes. Souvent, les navigateurs grisent ces contrôles et ils ne reçoivent aucun événement de navigation, comme les clics de souris ou les événements liés au focus.</p> <p>L'attribut <code>disabled</code> est utilisé par <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a>, <a href="/fr/docs/Web/HTML/Element/Keygen"><code><keygen></code></a>, <a href="/fr/docs/Web/HTML/Element/Optgroup"><code><optgroup></code></a>, <a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a> et <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>.</p> <p>Cet attribut booléen indique que l'utilisateur ne peut pas interagir avec le contrôle ou ses contrôles descendants. Si cet attribut n'est pas spécifié, le contrôle hérite ce paramètre de l'élément contenant, par exemple <code>fieldset</code> ; s'il n'y a pas d'élément contenant avec l'attribut <code>disabled</code> défini, et que le contrôle lui-même ne possède pas cet attribut, alors le contrôle est activé. S'il est déclaré sur un <a href="/fr/docs/Web/HTML/Element/Optgroup"><code><optgroup></code></a>, le sélecteur est toujours interactif (sauf s'il est désactivé autrement), mais aucun des éléments du groupe d'options n'est sélectionnable.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Si un <a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a> est désactivé, les contrôles de formulaire descendants sont tous désactivés, à l'exception des contrôles de formulaire dans la légende (<a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a>).</p> +<div class="note"> + <p><strong>Note :</strong>Si un <a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a> est désactivé, les contrôles de formulaire descendants sont tous désactivés, à l'exception des contrôles de formulaire dans la légende (<a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a>).</p> </div> <p>Lorsqu'un élément de support a l'attribut <code>disabled</code> est appliqué, la pseudo-classe <a href="/fr/docs/Web/CSS/:disabled"><code>:disabled</code></a> s'y applique également. Inversement, les éléments qui prennent en charge l'attribut <code>disabled</code> mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe <a href="/fr/docs/Web/CSS/:enabled"><code>:enabled</code></a>.</p> -<p>Cet attribut booléen empêche l'utilisateur d'interagir avec le bouton. Si cet attribut n'est pas défini, le bouton peut toujours être désactivé à partir d'un élément contenant, par exemple <code><a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a></code> ; s'il n'y a pas d'élément contenant avec l'attribut <code>disabled</code> défini, alors le bouton est activé.</p> +<p>Cet attribut booléen empêche l'utilisateur d'interagir avec le bouton. Si cet attribut n'est pas défini, le bouton peut toujours être désactivé à partir d'un élément contenant, par exemple <a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a> ; s'il n'y a pas d'élément contenant avec l'attribut <code>disabled</code> défini, alors le bouton est activé.</p> <p>Firefox va, contrairement aux autres navigateurs, faire persister l'état désactivé dynamique d'un <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a> à travers les chargements de pages. Utilisez l'attribut <a href="/fr/docs/Web/HTML/Attributes/autocomplete"><code>autocomplete</code></a> pour contrôler cette fonctionnalité.</p> @@ -34,16 +33,15 @@ translation_of: Web/HTML/Attributes/disabled <p>Étant donné qu'un champ désactivé ne peut pas voir sa valeur modifiée, <a href="/fr/docs/Web/HTML/Attributes/required"><code>required</code></a> n'a aucun effet sur les entrées dont l'attribut <code>disabled</code> est également spécifié. De plus, puisque les éléments deviennent immuables, la plupart des autres attributs, tels que <a href="/fr/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>, n'ont aucun effet, tant que le contrôle n'est pas activé.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>L'attribut <code>required</code> n'est pas autorisé sur les entrées pour lesquelles l'attribut <code>disabled</code> est spécifié.</p> +<div class="note"> + <p><strong>Note :</strong>L'attribut <code>required</code> n'est pas autorisé sur les entrées pour lesquelles l'attribut <code>disabled</code> est spécifié.</p> </div> <h3 id="usability">Utilisation</h3> <p>Les navigateurs affichent les contrôles de formulaire désactivés en grisé, car les contrôles de formulaire désactivés sont immuables, ne reçoivent pas de focus ou d'événements de navigation, comme les clics de souris ou les événements liés au focus, et ne sont pas soumis avec le formulaire.</p> -<p>S'il est présent sur un élément de support, la pseudo-classe <a href="/fr/docs/Web/CSS/:disabled"><code>:disabled</code></a> correspondra. Si l'attribut n'est pas inclus, la pseudo-classe <code><a href="/fr/docs/Web/CSS/:enabled"><code>:enabled</code></a></code> correspondra. Si l'élément ne prend pas en charge l'attribut disabled, l'attribut n'aura aucun effet, y compris celui de ne pas être apparié par les pseudo-classes <code>:disabled</code> et <code>:enabled</code>.</p> +<p>S'il est présent sur un élément de support, la pseudo-classe <a href="/fr/docs/Web/CSS/:disabled"><code>:disabled</code></a> correspondra. Si l'attribut n'est pas inclus, la pseudo-classe <a href="/fr/docs/Web/CSS/:enabled"><code>:enabled</code></a> correspondra. Si l'élément ne prend pas en charge l'attribut disabled, l'attribut n'aura aucun effet, y compris celui de ne pas être apparié par les pseudo-classes <code>:disabled</code> et <code>:enabled</code>.</p> <h3 id="constraint_validation">Validation des contraintes</h3> diff --git a/files/fr/web/html/attributes/elementtiming/index.html b/files/fr/web/html/attributes/elementtiming/index.html index 8335ba0ed6..36cf4b9628 100644 --- a/files/fr/web/html/attributes/elementtiming/index.html +++ b/files/fr/web/html/attributes/elementtiming/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Attributes/elementtiming --- <p>{{HTMLSidebar}}</p> -<p class="summary">L'attribut <strong><code>elementtiming</code></strong> est utilisé pour indiquer qu'un élément est marqué pour le suivi par l'API <a href="/fr/docs/Web/API/Element_timing_API">Element Timing</a>. Cet attribut peut être appliqué aux éléments <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/SVG/Element/image"><code><image></code></a> à l'intérieur d'un <a href="/fr/docs/Web/SVG/Element/svg"><code><svg></code></a>, aux vignettes des éléments <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, aux éléments qui ont un <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a> et aux éléments contenant des noeuds de texte, comme un <a href="/fr/docs/Web/HTML/Element/p">paragraphe (<code><p>)</code></a>.</p> +<p>L'attribut <strong><code>elementtiming</code></strong> est utilisé pour indiquer qu'un élément est marqué pour le suivi par l'API <a href="/fr/docs/Web/API/Element_timing_API">Element Timing</a>. Cet attribut peut être appliqué aux éléments <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/SVG/Element/image"><code><image></code></a> à l'intérieur d'un <a href="/fr/docs/Web/SVG/Element/svg"><code><svg></code></a>, aux vignettes des éléments <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, aux éléments qui ont un <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a> et aux éléments contenant des noeuds de texte, comme un <a href="/fr/docs/Web/HTML/Element/p">paragraphe (<code><p>)</code></a>.</p> <h2 id="usage">Utilisation</h2> diff --git a/files/fr/web/html/attributes/for/index.html b/files/fr/web/html/attributes/for/index.html index 3499bc9489..4622351ac0 100644 --- a/files/fr/web/html/attributes/for/index.html +++ b/files/fr/web/html/attributes/for/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML/Attributes/for --- <p>{{HTMLSidebar}}</p> -<p class="summary">L'attribut <strong><code>for</code></strong> est un attribut autorisé pour <a href="/fr/docs/Web/HTML/Element/label"><code><label></code></a> et <a href="/fr/docs/Web/HTML/Element/output"><code><output></code></a>. Lorsqu'il est utilisé sur un élément <code><label></code>, il indique l'élément de formulaire que ce label décrit. Lorsqu'il est utilisé sur un élément <code><output></code>, il permet une relation explicite entre les éléments, qui représentent les valeurs, qui sont utilisées dans le résultat représenté par <code><output></code>.</p> +<p>L'attribut <strong><code>for</code></strong> est un attribut autorisé pour <a href="/fr/docs/Web/HTML/Element/label"><code><label></code></a> et <a href="/fr/docs/Web/HTML/Element/output"><code><output></code></a>. Lorsqu'il est utilisé sur un élément <code><label></code>, il indique l'élément de formulaire que ce label décrit. Lorsqu'il est utilisé sur un élément <code><output></code>, il permet une relation explicite entre les éléments, qui représentent les valeurs, qui sont utilisées dans le résultat représenté par <code><output></code>.</p> <h2 id="usage">Utilisation</h2> diff --git a/files/fr/web/html/attributes/index.html b/files/fr/web/html/attributes/index.html index f34c74e52d..c77e29a6ed 100644 --- a/files/fr/web/html/attributes/index.html +++ b/files/fr/web/html/attributes/index.html @@ -17,7 +17,7 @@ original_slug: Web/HTML/Attributs --- <div>{{HTMLSidebar}}</div> -<p class="summary">Les éléments HTML ont des <strong>attributs</strong> ; ce sont des valeurs supplémentaires qui configurent les éléments ou ajustent leur comportement de différentes manières pour répondre aux critères souhaités par les utilisateurs.</p> +<p>Les éléments HTML ont des <strong>attributs</strong> ; ce sont des valeurs supplémentaires qui configurent les éléments ou ajustent leur comportement de différentes manières pour répondre aux critères souhaités par les utilisateurs.</p> <h2 id="attribute_list">Liste des attributs</h2> @@ -98,9 +98,8 @@ original_slug: Web/HTML/Attributs <td> <p>Définit l'URL vers un fichier qui est une image.</p> - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Bien que les navigateurs et les clients <em>e-mails</em> prennent en charge cet attribut, cet attribut est obsolète. On utilisera plutôt la propriété <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>.</p> + <div class="note"> + <p><strong>Note :</strong>Bien que les navigateurs et les clients <em>e-mails</em> prennent en charge cet attribut, cet attribut est obsolète. On utilisera plutôt la propriété <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>.</p> </div> </td> </tr> @@ -110,9 +109,8 @@ original_slug: Web/HTML/Attributs <td> <p>Cet attribut indique la couleur d'arrière-plan pour l'élément.</p> - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>.</p> + <div class="note"> + <p><strong>Note :</strong>Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>.</p> </div> </td> </tr> @@ -122,9 +120,8 @@ original_slug: Web/HTML/Attributs <td> <p>Cet attribut indique la largeur de la bordure.</p> - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard <a href="/fr/docs/Web/CSS/border"><code>border</code></a>.</p> + <div class="note"> + <p><strong>Note :</strong>Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard <a href="/fr/docs/Web/CSS/border"><code>border</code></a>.</p> </div> </td> </tr> @@ -179,9 +176,8 @@ original_slug: Web/HTML/Attributs <td> <p>Cet attribut définit la couleur du texte grâce à un nom de couleur ou grâce à un code hexadécimal dans le format #RRGGBB.</p> - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard <a href="/fr/docs/Web/CSS/color"><code>color</code></a>.</p> + <div class="note"> + <p><strong>Note :</strong>Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard <a href="/fr/docs/Web/CSS/color"><code>color</code></a>.</p> </div> </td> </tr> @@ -342,9 +338,8 @@ original_slug: Web/HTML/Attributs <td> <p>Pour ces éléments, cet attribut définit la hauteur occupée par l'élément. Pour les autres éléments, on utilisera <a href="/fr/docs/Web/CSS/height"><code>height</code></a> property.</p> - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Pour certains éléments comme <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a>,cet attribut est un reliquat et ne devrait plus être utilisé. C'est la propriété CSS <a href="/fr/docs/Web/CSS/height"><code>height</code></a> qui est la méthode standard pour définir la hauteur d'un élément.</p> + <div class="note"> + <p><strong>Note :</strong>Pour certains éléments comme <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a>,cet attribut est un reliquat et ne devrait plus être utilisé. C'est la propriété CSS <a href="/fr/docs/Web/CSS/height"><code>height</code></a> qui est la méthode standard pour définir la hauteur d'un élément.</p> </div> </td> </tr> @@ -464,9 +459,8 @@ original_slug: Web/HTML/Attributs <td><a href="/fr/docs/Web/HTML/Element/html#attr-manifest"><code>manifest</code></a> {{obsolete_inline}}</td> <td><a href="/fr/docs/Web/HTML/Element/html"><code><html></code></a></td> <td>Cet attribut définit l'URL du manifeste du document pour la gestion du cache. - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Cet attribut est obsolète, utilisez <a href="/fr/docs/Web/Manifest"><code><link rel="manifest"></code></a> à la place.</p> + <div class="note"> + <p><strong>Note :</strong>Cet attribut est obsolète, utilisez <a href="/fr/docs/Web/Manifest"><code><link rel="manifest"></code></a> à la place.</p> </div> </td> </tr> @@ -724,9 +718,8 @@ original_slug: Web/HTML/Attributs <td><a href="/fr/docs/Web/HTML/Attributes/width"><code>width</code></a></td> <td><a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a>, <a href="/fr/docs/Web/HTML/Element/embed"><code><embed></code></a>, <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a></td> <td>Pour ces éléments, cet attribut définit la largeur occupée sur l'écran. - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Pour tous les autres éléments, comme <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a>, il faut utiliser la propriété CSS standard <a href="/fr/docs/Web/CSS/width"><code>width</code></a> afin de définir la largeur.</p> + <div class="note"> + <p><strong>Note :</strong>Pour tous les autres éléments, comme <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a>, il faut utiliser la propriété CSS standard <a href="/fr/docs/Web/CSS/width"><code>width</code></a> afin de définir la largeur.</p> </div> </td> </tr> diff --git a/files/fr/web/html/attributes/max/index.html b/files/fr/web/html/attributes/max/index.html index b7b6dd56f6..2db1bd554b 100644 --- a/files/fr/web/html/attributes/max/index.html +++ b/files/fr/web/html/attributes/max/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Attributes/max --- <p>{{HTMLSidebar}}</p> -<p class="summary">L'attribut <strong><code>max</code></strong> définit la valeur maximale acceptable et valide pour le champ de saisie contenant l'attribut. Si la <a href="/fr/docs/Web/HTML/Element/Input#attr-value"><code>valeur</code></a> de l'élément est supérieure à cette valeur, l'élément échoue à <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation des contraintes</a>. Cette valeur doit être supérieure ou égale à la valeur de l'attribut <a href="min"><code>min</code></a>. Si l'attribut <code>max</code> est présent mais n'est pas spécifié ou est invalide, aucune valeur <code>max</code> n'est appliquée. Si l'attribut <code>max</code> est valide et qu'une valeur non vide est supérieure au maximum autorisé par l'attribut <code>max</code>, la validation des contraintes empêchera la soumission du formulaire.</p> +<p>L'attribut <strong><code>max</code></strong> définit la valeur maximale acceptable et valide pour le champ de saisie contenant l'attribut. Si la <a href="/fr/docs/Web/HTML/Element/Input#attr-value"><code>valeur</code></a> de l'élément est supérieure à cette valeur, l'élément échoue à <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation des contraintes</a>. Cette valeur doit être supérieure ou égale à la valeur de l'attribut <a href="min"><code>min</code></a>. Si l'attribut <code>max</code> est présent mais n'est pas spécifié ou est invalide, aucune valeur <code>max</code> n'est appliquée. Si l'attribut <code>max</code> est valide et qu'une valeur non vide est supérieure au maximum autorisé par l'attribut <code>max</code>, la validation des contraintes empêchera la soumission du formulaire.</p> <p>Valable pour les types de saisie numérique, y compris les <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>, ainsi que les deux éléments <a href="/fr/docs/Web/HTML/Element/Progress"><code><progress></code></a> et <a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a>, l'attribut <code>max</code> est un nombre qui spécifie la valeur la plus positive qu'un contrôle de formulaire doit considérer comme valide.</p> @@ -32,45 +32,44 @@ translation_of: Web/HTML/Attributes/max <tbody> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a></td> - <td><code class="brush: html">yyyy-mm-dd</code></td> - <td><code class="brush: html"><input type="date" max="2019-12-25" step="1"></code></td> + <td><pre class="brush: html">yyyy-mm-dd</pre></td> + <td><pre class="brush: html"><input type="date" max="2019-12-25" step="1"></pre></td> </tr> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a></td> - <td><code class="brush: html">yyyy-mm</code></td> - <td><code class="brush: html"><input type="month" max="2019-12" step="12"></code></td> + <td><pre class="brush: html">yyyy-mm</pre></td> + <td><pre class="brush: html"><input type="month" max="2019-12" step="12"></pre></td> </tr> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a></td> - <td><code class="brush: html">yyyy-W##</code></td> - <td><code class="brush: html"><input type="week" max="2019-W23" step=""></code></td> + <td><pre class="brush: html">yyyy-W##</pre></td> + <td><pre class="brush: html"><input type="week" max="2019-W23" step=""></pre></td> </tr> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a></td> - <td><code class="brush: html">hh:mm</code></td> - <td><code class="brush: html"><input type="time" max="17:00" step="900"></code></td> + <td><pre class="brush: html">hh:mm</pre></td> + <td><pre class="brush: html"><input type="time" max="17:00" step="900"></pre></td> </tr> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a></td> <td><code>yyyy-mm-ddThh:mm</code></td> - <td><code class="brush: html"><input type="datetime-local" max="2019-12-25T23:59"></code></td> + <td><pre class="brush: html"><input type="datetime-local" max="2019-12-25T23:59"></pre></td> </tr> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a></td> <td><a href="/fr/docs/Web/CSS/number"><number></a></td> - <td><code class="brush: html"><input type="number" min="0" step="5" max="100"></code></td> + <td><pre class="brush: html"><input type="number" min="0" step="5" max="100"></pre></td> </tr> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a></td> <td><a href="/fr/docs/Web/CSS/number"><number></a></td> - <td><code class="brush: html"><input type="range" min="60" step="5" max="100"></code></td> + <td><pre class="brush: html"><input type="range" min="60" step="5" max="100"></pre></td> </tr> </tbody> </table> <div class="note"> - <p><b>Note :</b></p> - <p>Lorsque les données saisies par l'utilisateur ne respectent pas la valeur maximale fixée, la valeur est considérée comme invalide dans la validation des contraintes et correspondra aux pseudo-classes <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> et <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a>.</p> + <p><strong>Note :</strong>Lorsque les données saisies par l'utilisateur ne respectent pas la valeur maximale fixée, la valeur est considérée comme invalide dans la validation des contraintes et correspondra aux pseudo-classes <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> et <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a>.</p> </div> <p>Voir la <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation côté client</a> et <a href="/fr/docs/Web/API/ValidityState/rangeOverflow"><code>rangeOverflow</code></a> pour plus d'informations.</p> diff --git a/files/fr/web/html/attributes/maxlength/index.html b/files/fr/web/html/attributes/maxlength/index.html index a2cd5314f5..5ad331ca73 100644 --- a/files/fr/web/html/attributes/maxlength/index.html +++ b/files/fr/web/html/attributes/maxlength/index.html @@ -14,12 +14,7 @@ translation_of: Web/HTML/Attributes/maxlength --- <p>{{HTMLSidebar}}</p> -<div class="notecard draft"> - <p><b>Brouillon :</b></p> - <p>Cette page n'est pas terminée.</p> -</div> - -<p class="summary">L'attribut <strong><code>maxlength</code></strong> définit le nombre maximal de caractères (en unités de code UTF-16) que l'utilisateur peut saisir dans un <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> ou un <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a>. Il doit s'agir d'un nombre entier égal ou supérieur à 0. Si aucune longueur maximale n'est spécifiée, ou si une valeur non valide est spécifiée, l'entrée ou la zone de texte n'a pas de longueur maximale.</p> +<p>L'attribut <strong><code>maxlength</code></strong> définit le nombre maximal de caractères (en unités de code UTF-16) que l'utilisateur peut saisir dans un <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> ou un <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a>. Il doit s'agir d'un nombre entier égal ou supérieur à 0. Si aucune longueur maximale n'est spécifiée, ou si une valeur non valide est spécifiée, l'entrée ou la zone de texte n'a pas de longueur maximale.</p> <p>Toute valeur de <code>maxlength</code> doit être supérieure ou égale à la valeur de <a href="/fr/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a>, si elle est présente et valide. L'entrée échoue à la validation des contraintes si la longueur de la valeur textuelle du champ est supérieure à la longueur maximale des unités de code UTF-16. La validation des contraintes n'est appliquée que lorsque la valeur est modifiée par l'utilisateur.</p> diff --git a/files/fr/web/html/attributes/min/index.html b/files/fr/web/html/attributes/min/index.html index 17e65cf47d..9a142deaeb 100644 --- a/files/fr/web/html/attributes/min/index.html +++ b/files/fr/web/html/attributes/min/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Attributes/min --- <p>{{HTMLSidebar}}</p> -<p class="summary">L'attribut <strong><code>min</code></strong> définit la valeur minimale qui est acceptable et valide pour l'entrée contenant l'attribut. Si la <a href="/fr/docs/Web/HTML/Element/Input#attr-value">valeur</a> de l'élément est inférieure à cette valeur, l'élément échoue lors de la <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation des contraintes</a>. Cette valeur doit être inférieure ou égale à la valeur de l'attribut <code>max</code>. Si une valeur est spécifiée pour <code>min</code> qui n'est pas un nombre valide, l'entrée n'a pas de valeur minimale.</p> +<p>L'attribut <strong><code>min</code></strong> définit la valeur minimale qui est acceptable et valide pour l'entrée contenant l'attribut. Si la <a href="/fr/docs/Web/HTML/Element/Input#attr-value">valeur</a> de l'élément est inférieure à cette valeur, l'élément échoue lors de la <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation des contraintes</a>. Cette valeur doit être inférieure ou égale à la valeur de l'attribut <code>max</code>. Si une valeur est spécifiée pour <code>min</code> qui n'est pas un nombre valide, l'entrée n'a pas de valeur minimale.</p> <p>Valable pour les types de saisie numérique, y compris les types <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>, et l'élément <a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a>, l'attribut <code>min</code> est un nombre qui spécifie la valeur la plus négative qu'un contrôle de formulaire doit considérer comme valide.</p> @@ -30,45 +30,44 @@ translation_of: Web/HTML/Attributes/min <tbody> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a></td> - <td><code class="brush: html">yyyy-mm-dd</code></td> - <td><code class="brush: html"><input type="date" min="2019-12-25" step="1"></code></td> + <td><pre class="brush: html">yyyy-mm-dd</pre></td> + <td><pre class="brush: html"><input type="date" min="2019-12-25" step="1"></pre></td> </tr> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a></td> - <td><code class="brush: html">yyyy-mm</code></td> - <td><code class="brush: html"><input type="month" min="2019-12" step="12"></code></td> + <td><pre class="brush: html">yyyy-mm</pre></td> + <td><pre class="brush: html"><input type="month" min="2019-12" step="12"></pre></td> </tr> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a></td> - <td><code class="brush: html">yyyy-W##</code></td> - <td><code class="brush: html"><input type="week" min="2019-W23" step=""></code></td> + <td><pre class="brush: html">yyyy-W##</pre></td> + <td><pre class="brush: html"><input type="week" min="2019-W23" step=""></pre></td> </tr> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a></td> - <td><code class="brush: html">hh:mm</code></td> - <td><code class="brush: html"><input type="time" min="09:00" step="900"></code></td> + <td><pre class="brush: html">hh:mm</pre></td> + <td><pre class="brush: html"><input type="time" min="09:00" step="900"></pre></td> </tr> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a></td> <td><code>yyyy-mm-ddThh:mm</code></td> - <td><code class="brush: html"><input type="datetime-local" min="2019-12-25T19:30"></code></td> + <td><pre class="brush: html"><input type="datetime-local" min="2019-12-25T19:30"></pre></td> </tr> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a></td> <td><a href="/fr/docs/Web/CSS/number"><number></a></td> - <td><code class="brush: html"><input type="number" min="0" step="5" max="100"></code></td> + <td><pre class="brush: html"><input type="number" min="0" step="5" max="100"></pre></td> </tr> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a></td> <td><a href="/fr/docs/Web/CSS/number"><number></a></td> - <td><code class="brush: html"><input type="range" min="60" step="5" max="100"></code></td> + <td><pre class="brush: html"><input type="range" min="60" step="5" max="100"></pre></td> </tr> </tbody> </table> <div class="note"> - <p><b>Note :</b></p> - <p>Lorsque les données saisies par l'utilisateur ne respectent pas la valeur minimale définie, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudo-classes <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> et <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a>.</p> + <p><strong>Note :</strong>Lorsque les données saisies par l'utilisateur ne respectent pas la valeur minimale définie, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudo-classes <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> et <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a>.</p> </div> <p>Voir la <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation côté client</a> et <a href="/fr/docs/Web/API/ValidityState/rangeUnderflow"><code>rangeUnderflow</code></a> pour plus d'informations.</p> diff --git a/files/fr/web/html/attributes/minlength/index.html b/files/fr/web/html/attributes/minlength/index.html index 42bbc2ab19..2e3960b93f 100644 --- a/files/fr/web/html/attributes/minlength/index.html +++ b/files/fr/web/html/attributes/minlength/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTML/Attributes/minlength --- <p>{{HTMLSidebar}}</p> -<p class="summary">L'attribut <strong><code>minlength</code></strong> définit le nombre minimal de caractères (sous forme d'unités de code UTF-16) que l'utilisateur peut saisir dans un élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> ou <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a>. Il doit s'agir d'une valeur entière égale ou supérieure à 0. Si aucune longueur minimale n'est spécifiée, ou si une valeur invalide est spécifiée, l'entrée n'a pas de longueur minimale. Cette valeur doit être inférieure ou égale à la valeur de <a href="/fr/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a>, sinon la valeur ne sera jamais valide, car il est impossible de satisfaire aux deux critères.</p> +<p>L'attribut <strong><code>minlength</code></strong> définit le nombre minimal de caractères (sous forme d'unités de code UTF-16) que l'utilisateur peut saisir dans un élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> ou <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a>. Il doit s'agir d'une valeur entière égale ou supérieure à 0. Si aucune longueur minimale n'est spécifiée, ou si une valeur invalide est spécifiée, l'entrée n'a pas de longueur minimale. Cette valeur doit être inférieure ou égale à la valeur de <a href="/fr/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a>, sinon la valeur ne sera jamais valide, car il est impossible de satisfaire aux deux critères.</p> <p>L'entrée échouera à la validation des contraintes si la longueur de la valeur textuelle du champ est inférieure à <code>minlength</code> unités de code UTF-16, avec <a href="/fr/docs/Web/API/validityState/tooShort"><code>validityState.tooShort</code></a> retournant <code>true</code>. La validation des contraintes n'est appliquée que lorsque la valeur est modifiée par l'utilisateur. En cas d'échec de la soumission, certains navigateurs affichent un message d'erreur indiquant la longueur minimale requise et la longueur actuelle.</p> diff --git a/files/fr/web/html/attributes/multiple/index.html b/files/fr/web/html/attributes/multiple/index.html index 3f306bf96c..f5dbe76289 100644 --- a/files/fr/web/html/attributes/multiple/index.html +++ b/files/fr/web/html/attributes/multiple/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTML/Attributes/multiple --- <p>{{HTMLSidebar}}</p> -<p class="summary">L'attribut booléen <strong><code>multiple</code></strong>, s'il est défini, signifie que le contrôle de formulaire accepte une ou plusieurs valeurs. Valable pour les types de saisie <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a> et l'élément <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a>, la manière dont l'utilisateur opte pour plusieurs valeurs dépend du contrôle de formulaire.</p> +<p>L'attribut booléen <strong><code>multiple</code></strong>, s'il est défini, signifie que le contrôle de formulaire accepte une ou plusieurs valeurs. Valable pour les types de saisie <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a> et l'élément <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a>, la manière dont l'utilisateur opte pour plusieurs valeurs dépend du contrôle de formulaire.</p> <p>Selon le type, le contrôle de formulaire peut avoir une apparence différente si l'attribut <code>multiple</code> est défini. Pour le type de saisie de fichier, la messagerie native fournie par le navigateur diffère. Dans Firefox, l'entrée de fichier indique « Aucun fichier sélectionné » lorsque l'attribut est présent et « Aucun fichier sélectionné » dans le cas contraire, lorsqu'aucun fichier n'est sélectionné. La plupart des navigateurs affichent une zone de liste déroulante pour un contrôle <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> avec l'attribut <code>multiple</code> défini contre une liste déroulante à une ligne lorsque l'attribut est omis. L'entrée <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a> s'affiche de la même manière, mais correspondra à la pseudo-classe <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> si plus d'une adresse électronique séparée par des virgules est incluse en l'absence de l'attribut.</p> @@ -57,9 +57,7 @@ translation_of: Web/HTML/Attributes/multiple <option value="doc@menuisiers.fr">Doc</option> </datalist></pre> -<div class="hidden"> <pre class="brush: css">input:invalid {border: red solid 3px;}</pre> -</div> <p>Si et seulement si l'attribut <code>multiple</code> est spécifié, la valeur peut être une liste d'adresses électroniques correctement formées et séparées par des virgules. Tout espace blanc de queue et de tête est supprimé de chaque adresse de la liste. Si l'attribut <a href="/fr/docs/Web/HTML/Attributs/required"><code>required</code></a> est présent, au moins une adresse électronique est requise.</p> diff --git a/files/fr/web/html/attributes/pattern/index.html b/files/fr/web/html/attributes/pattern/index.html index 73604d285f..c5e53db9ef 100644 --- a/files/fr/web/html/attributes/pattern/index.html +++ b/files/fr/web/html/attributes/pattern/index.html @@ -12,7 +12,7 @@ original_slug: Web/HTML/Attributs/pattern --- <div>{{HTMLSidebar}}</div> -<p class="summary">L'attribut <strong><code>pattern</code></strong> indique une <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions">expression rationnelle</a> que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pas <code>null</code>) ne respecte pas les contraintes portées par <code>pattern</code>, la propriété <a href="/fr/docs/Web/API/ValidityState/patternMismatch"><code>patternMismatch</code></a> en lecture seule, rattachée à l'objet <a href="/fr/docs/Web/API/ValidityState"><code>ValidityState</code></a>, vaudra <code>true</code>.</p> +<p>L'attribut <strong><code>pattern</code></strong> indique une <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions">expression rationnelle</a> que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pas <code>null</code>) ne respecte pas les contraintes portées par <code>pattern</code>, la propriété <a href="/fr/docs/Web/API/ValidityState/patternMismatch"><code>patternMismatch</code></a> en lecture seule, rattachée à l'objet <a href="/fr/docs/Web/API/ValidityState"><code>ValidityState</code></a>, vaudra <code>true</code>.</p> <p>L'attribut <code>pattern</code> peut être utilisé pour les champs de type <a href="/fr/docs/Web/HTML/Element/Input/text"><code>text</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/tel"><code>tel</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/url"><code>url</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/password"><code>password</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/search"><code>search</code></a>.</p> @@ -20,9 +20,8 @@ original_slug: Web/HTML/Attributs/pattern <p>Si le motif n'est pas indiqué ou est invalide, aucune expression rationnelle ne sera appliquée et l'attribut sera ignoré.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>On pourra utiliser l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-title"><code>title</code></a> afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.</p> +<div class="note"> + <p><strong>Note :</strong>On pourra utiliser l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-title"><code>title</code></a> afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.</p> </div> <p>Certains types d'<code><input></code> qui prennent en charge l'attribut <code>pattern</code> (notamment <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/url"><code>url</code></a>) ont des contraintes particulières qui doivent également être respectées. Si l'attribut <code>pattern</code> n'est pas présent et que la valeur saisie ne respecte pas la syntaxe attendue pour ce type de champ, la propriété en lecture seule <a href="/fr/docs/Web/API/ValidityState/typeMismatch"><code>typeMismatch</code></a> vaudra <code>true</code>.</p> @@ -38,9 +37,9 @@ original_slug: Web/HTML/Attributs/pattern <h2 id="examples">Exemples</h2> +<h3 id="Exemple 1">Exemple 1</h3> <p>Avec le fragment de code HTML suivant :</p> -<div id="exemple1"> <pre class="brush: html"><p> <label>Veuillez saisir votre numéro de téléphone au format (123)456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- @@ -57,8 +56,7 @@ original_slug: Web/HTML/Attributs/pattern border: red solid 3px; }</pre> -<div>{{EmbedLiveSample("exemple1", 300, 80)}}</div> -</div> +<div>{{EmbedLiveSample("Exemple_1", 300, 80)}}</div> <p>En utilisant les attributs <a href="/fr/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> et <a href="/fr/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a> à la place, on aurait eu les propriétés <a href="/fr/docs/Web/API/validityState/tooLong"><code>validityState.tooLong</code></a> ou <a href="/fr/docs/Web/API/validityState/tooShort"><code>validityState.tooShort</code></a> qui auraient valu <code>true</code>.</p> @@ -81,8 +79,7 @@ original_slug: Web/HTML/Attributs/pattern </div> </form></pre> -<div class="hidden"> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -107,7 +104,6 @@ input:valid+span:after { content: '✓'; padding-left: 5px; }</pre> -</div> <p>Cela donne le résultat suivant :</p> diff --git a/files/fr/web/html/attributes/readonly/index.html b/files/fr/web/html/attributes/readonly/index.html index 18131ec228..9eba1c737c 100644 --- a/files/fr/web/html/attributes/readonly/index.html +++ b/files/fr/web/html/attributes/readonly/index.html @@ -11,20 +11,14 @@ translation_of: Web/HTML/Attributes/readonly --- <div>{{HTMLSidebar}}</div> -<div class="notecard draft"> - <p><b>Brouillon :</b></p> - <p>Cette page n'est pas terminée.</p> -</div> - -<p class="summary">L'attribut booléen <strong><code>readonly</code></strong>, lorsqu'il est présent, rend l'élément non mutable, ce qui signifie que l'utilisateur ne peut pas modifier le contrôle. Si l'attribut <code>readonly</code> est spécifié sur un élément de saisie, comme l'utilisateur ne peut pas modifier la saisie, l'élément ne participe pas à la validation des contraintes.</p> +<p>L'attribut booléen <strong><code>readonly</code></strong>, lorsqu'il est présent, rend l'élément non mutable, ce qui signifie que l'utilisateur ne peut pas modifier le contrôle. Si l'attribut <code>readonly</code> est spécifié sur un élément de saisie, comme l'utilisateur ne peut pas modifier la saisie, l'élément ne participe pas à la validation des contraintes.</p> <p>L'attribut <code>readonly</code> est pris en charge par les types <a href="/fr/docs/Web/HTML/Element/Input/text"><code>text</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/search"><code>search</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/url"><code>url</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/tel"><code>tel</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/password"><code>password</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>mois</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, et <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> de <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> et les éléments de contrôle de formulaire <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a>. S'il est présent sur l'un de ces types de saisie et éléments, la pseudo-classe <a href="/fr/docs/Web/CSS/:read-only"><code>:read-only</code></a> correspondra. Si l'attribut n'est pas inclus, la pseudo-classe <a href="/fr/docs/Web/CSS/:read-write"><code>:read-write</code></a> correspondra.</p> <p>L'attribut n'est pas pris en charge ou pertinent pour <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> ou les types d'entrée qui ne sont déjà pas mutables, comme <a href="/fr/docs/Web/HTML/Element/Input/checkbox"><code>checkbox</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/radio"><code>radio</code></a> ou ne peuvent pas, par définition, commencer par une valeur, comme le type d'entrée <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>. <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/color"><code>color</code></a>, car tous deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur <a href="/fr/docs/Web/HTML/Element/Input/hidden"><code>hidden</code></a>, car on ne peut pas s'attendre à ce qu'un utilisateur remplisse un formulaire qui est caché. Il n'est pas non plus supporté sur des types de boutons, y compris <code>image</code>.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Seuls les contrôles de texte peuvent être rendus en lecture seule, car pour les autres contrôles (comme les cases à cocher et les boutons), il n'y a pas de distinction utile entre être en lecture seule et être désactivé, donc l'attribut <code>readonly</code> ne s'applique pas.</p> +<div class="note"> + <p><strong>Note :</strong>Seuls les contrôles de texte peuvent être rendus en lecture seule, car pour les autres contrôles (comme les cases à cocher et les boutons), il n'y a pas de distinction utile entre être en lecture seule et être désactivé, donc l'attribut <code>readonly</code> ne s'applique pas.</p> </div> <p>Lorsqu'une entrée possède l'attribut <code>readonly</code>, la pseudo-classe <a href="/fr/docs/Web/CSS/:read-only"><code>:read-only</code></a> s'y applique également. Inversement, les entrées qui prennent en charge l'attribut <code>readonly</code> mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe <a href="/fr/docs/Web/CSS/:read-write"><code>:read-write</code></a>.</p> @@ -37,9 +31,8 @@ translation_of: Web/HTML/Attributes/readonly <p>Le seul moyen de modifier dynamiquement la valeur de l'attribut readonly est d'utiliser un script.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>L'attribut <code>required</code> n'est pas autorisé sur les entrées pour lesquelles l'attribut <code>readonly</code> est spécifié.</p> +<div class="note"> + <p><strong>Note :</strong>L'attribut <code>required</code> n'est pas autorisé sur les entrées pour lesquelles l'attribut <code>readonly</code> est spécifié.</p> </div> <h3 id="constraint_validation">Validation des contraintes</h3> diff --git a/files/fr/web/html/attributes/rel/index.html b/files/fr/web/html/attributes/rel/index.html index 45c4bb4ec0..c2f3fbde6d 100644 --- a/files/fr/web/html/attributes/rel/index.html +++ b/files/fr/web/html/attributes/rel/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Attributes/rel --- <div>{{HTMLSidebar}}</div> -<p class="summary">L'attribut <strong><code>rel</code></strong> définit la relation entre une ressource liée et le document actuel. Valable sur <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, et <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, les valeurs supportées dépendent de l'élément sur lequel se trouve l'attribut.</p> +<p>L'attribut <strong><code>rel</code></strong> définit la relation entre une ressource liée et le document actuel. Valable sur <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, et <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, les valeurs supportées dépendent de l'élément sur lequel se trouve l'attribut.</p> <p>Le type de relations est donné par la valeur de l'attribut <code>rel</code>, qui, s'il est présent, doit avoir une valeur qui est un ensemble non ordonné de mots-clés uniques séparés par des espaces. À la différence d'un nom de <code>class</code>, qui n'exprime pas de sémantique, l'attribut <code>rel</code> doit exprimer des mots-clés qui sont sémantiquement valides pour les machines et les humains. Les registres actuels des valeurs possibles de l'attribut <code>rel</code> sont le <a href="https://www.iana.org/assignments/link-relations/link-relations.xhtml">registre de relations de liens de l'IANA</a>, le <a href="https://html.spec.whatwg.org/multipage/links.html#linkTypes">HTML Living Standard</a>, et la page <a href="https://microformats.org/wiki/existing-rel-values">existing-rel-values</a> librement modifiable dans le wiki microformats, <a href="https://html.spec.whatwg.org/multipage/links.html#other-link-types">comme suggéré</a> par le Living Standard. Si un attribut <code>rel</code> non présent dans l'une des trois sources ci-dessus est utilisé, certains validateurs HTML (tels que le <a href="https://validator.w3.org/">W3C Markup Validation Service</a>) généreront un avertissement.</p> @@ -218,13 +218,12 @@ translation_of: Web/HTML/Attributes/rel <p><b>Note :</b> L'iOS d'Apple n'utilise pas ce type de lien, ni l'attribut <a href="sizes"><code>sizes</code></a>, comme le font d'autres navigateurs mobiles, pour sélectionner une icône de page Web pour Web Clip ou un espace réservé au démarrage. Au lieu de cela, il utilise les attributs non standard <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a> et <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a> respectivement.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Le type de lien <code>shortcut</code> est souvent vu avant <code>icon</code>, mais ce type de lien est non conforme, ignoré et <strong>les auteurs web ne doivent plus l'utiliser</strong>.</p> +<div class="note"> + <p><strong>Note :</strong>Le type de lien <code>shortcut</code> est souvent vu avant <code>icon</code>, mais ce type de lien est non conforme, ignoré et <strong>les auteurs web ne doivent plus l'utiliser</strong>.</p> </div> <dl> - <dt><code id="alternate">alternate</code></dt> + <dt><code>alternate</code></dt> <dd>Indique une représentation alternative du document actuel. Valable pour <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, la signification dépend des valeurs des autres attributs. <ul> <li>Avec le mot clé <a href="#stylesheet"><code>stylesheet</code></a> sur un <code><link></code>, il crée une feuille de style alternative. @@ -242,24 +241,23 @@ translation_of: Web/HTML/Attributes/rel <link rel="alternate" href="/fr/pdf" hreflang="fr" type=application/pdf title="PDF Français"></pre> </li> </ul> - <div class="notecard note"> - <p><b>Note :</b></p> - <p>L'attribut obsolète <code>rev="made"</code> est traité comme <code>rel="alternate"</code>.</p> + <div class="note"> + <p><strong>Note :</strong>L'attribut obsolète <code>rev="made"</code> est traité comme <code>rel="alternate"</code>.</p> </div> </dd> - <dt><code id="author">author</code></dt> + <dt><code>author</code></dt> <dd>Indique l'auteur du document ou de l'article en cours. Pertinent pour les éléments <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, le mot-clé <code>author</code> crée un lien hypertexte. Avec <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, il indique que le document lié (ou <code>mailto:</code>) fournit des informations sur l'auteur de l'ancêtre le plus proche d'un élément <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a> s'il en existe un, sinon le document entier. Pour <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, il représente l'auteur du document entier.</dd> - <dt><code id="bookmark">bookmark</code></dt> + <dt><code>bookmark</code></dt> <dd>Pertinent comme valeur de l'attribut <code>rel</code> pour les éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, le signet fournit un permalien pour la section ancêtre, qui est l'ancêtre le plus proche d'un élément <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a> ou <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a>, s'il y en a au moins un, sinon, le parent le plus proche de l'en-tête ou l'ancêtre descendant, jusqu'au suivant.</dd> - <dt><code id="canonical">canonical</code></dt> + <dt><code>canonical</code></dt> <dd>Valable pour <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, elle définit l'URL préférée du document actuel, ce qui est utile pour les moteurs de recherche.</dd> - <dt><code id="dns-prefetch">dns-prefetch</code></dt> + <dt><code>dns-prefetch</code></dt> <dd>Pertinent pour l'élément <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a> à la fois dans les éléments <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a> et <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a>, il indique au navigateur d'effectuer de manière préemptive la résolution DNS pour l'origine de la ressource cible. Utile pour les ressources dont l'utilisateur aura probablement besoin, elle permet de réduire la latence et donc d'améliorer les performances lorsque l'utilisateur accède effectivement aux ressources car le navigateur a effectué de manière préemptive la résolution DNS pour l'origine de la ressource spécifiée. Voir <a href="/fr/docs/Web/Performance/dns-prefetch">dns-prefetch</a> décrit dans les conseils.</dd> - <dt><code id="external">external</code></dt> + <dt><code>external</code></dt> <dd>S'appliquant à <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, elle indique que le document référencé ne fait pas partie du site actuel. Il peut être utilisé avec des sélecteurs d'attributs pour donner un style aux liens externes d'une manière qui indique à l'utilisateur qu'il va quitter le site actuel.</dd> - <dt><code id="help">help</code></dt> + <dt><code>help</code></dt> <dd>Concerne les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, le mot clé <code>help</code> indique que le contenu lié fournit une aide contextuelle, fournissant des informations pour le parent de l'élément définissant l'hyperlien, et ses enfants. Lorsqu'il est utilisé dans <code><link></code>, l'aide concerne l'ensemble du document. Lorsqu'elle est incluse avec <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a> et qu'elle est prise en charge, le <a href="/fr/docs/Web/CSS/cursor"><code>cursor</code></a> par défaut sera <code>help</code> au lieu de <code>pointer</code>.</dd> - <dt><code id="icon">icon</code></dt> + <dt><code>icon</code></dt> <dd> <p>Valable avec <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, la ressource liée représente l'icône, ressource de représentation de la page dans l'interface utilisateur, pour le document courant.</p> @@ -269,68 +267,65 @@ translation_of: Web/HTML/Attributes/rel <p>S'il existe plusieurs <code><link rel="icon"></code>, le navigateur utilise leurs attributs <a href="media"><code>media</code></a>, <a href="type"><code>type</code></a>, et <a href="sizes"><code>sizes</code></a> pour sélectionner l'icône la plus appropriée. Si plusieurs icônes sont également appropriées, la dernière est utilisée. Si l'icône la plus appropriée s'avère ultérieurement inappropriée, par exemple parce qu'elle utilise un format non pris en charge, le navigateur passe à l'icône suivante la plus appropriée, et ainsi de suite.</p> - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Avant Firefox 83, l'attribut <a href="/fr/docs/Web/HTML/Attributes/crossorigin">crossorigin</a> n'était pas pris en charge pour <code>rel="icon"</code> ; il existe également <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121645">un problème pour Chrome</a>.</p> + <div class="note"> + <p><strong>Note :</strong>Avant Firefox 83, l'attribut <a href="/fr/docs/Web/HTML/Attributes/crossorigin">crossorigin</a> n'était pas pris en charge pour <code>rel="icon"</code> ; il existe également <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121645">un problème pour Chrome</a>.</p> <p>L'iOS d'Apple n'utilise pas ce type de lien, ni l'attribut <a href="sizes"><code>sizes</code></a>, comme le font d'autres navigateurs mobiles, pour sélectionner une icône de page Web pour Web Clip ou un espace réservé au démarrage. Au lieu de cela, il utilise respectivement le type non standard <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a> et <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a>.</p> <p>Le type de lien <code>shortcut</code> est souvent vu avant <code>icon</code>, mais ce type de lien est non conforme, ignoré et <strong>les auteurs web ne doivent plus l'utiliser</strong>.</p> </div> </dd> - <dt><code id="license">license</code></dt> + <dt><code>license</code></dt> <dd> <p>Valable sur les éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> et <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, la valeur <code>license</code> indique que l'hyperlien mène à un document décrivant les informations relatives à la licence ; que le contenu principal du document actuel est couvert par la licence de droit d'auteur décrite par le document référencé. Si elle ne se trouve pas à l'intérieur de l'élément <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a>, la norme ne fait pas de distinction entre un hyperlien s'appliquant à une partie spécifique du document ou au document dans son ensemble. Seules les données de la page peuvent l'indiquer.</p> <pre class="brush: html"><link rel="license" href="#license"></pre> - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Bien que reconnu, le synonyme <code>copyright</code> est incorrect et doit être évité.</p> + <div class="note"> + <p><strong>Note :</strong>Bien que reconnu, le synonyme <code>copyright</code> est incorrect et doit être évité.</p> </div> </dd> - <dt><code id="manifest">manifest</code></dt> + <dt><code>manifest</code></dt> <dd><a href="/fr/docs/Web/Manifest">Manifeste de l'application Web</a>. Nécessite l'utilisation du protocole CORS pour le « fetching cross-origin ».</dd> - <dt><code id="modulepreload">modulepreload</code></dt> + <dt><code>modulepreload</code></dt> <dd>Utile pour améliorer les performances, et pertinent pour l'élément <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a> n'importe où dans le document, la définition de <code>rel="modulepreload"</code> indique au navigateur de récupérer de manière préemptive le script (et les dépendances) et de le stocker dans la carte des modules du document pour une évaluation ultérieure. Les liens <code>modulepreload</code> peuvent garantir que la récupération du réseau se fait avec le module prêt (mais non évalué) dans la carte des modules avant qu'il ne soit nécessairement nécessaire. Voir aussi <a href="/fr/docs/Web/HTML/Link_types/modulepreload">Types de liens : <code>modulepreload</code></a>.</dd> - <dt><code id="next">next</code></dt> + <dt><code>next</code></dt> <dd>Pertinent pour les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, les valeurs <code>next</code> indiquent que le document actuel fait partie d'une série, et que le document suivant dans la série est le document référencé. Lorsqu'elles sont incluses dans un <code><link></code>, les navigateurs peuvent supposer que le document sera récupéré ensuite, et le traiter comme une indication de ressource.</dd> - <dt><code id="nofollow">nofollow</code></dt> + <dt><code>nofollow</code></dt> <dd>Pertinent pour les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, le mot clé <code>nofollow</code> indique aux robots des moteurs de recherche d'ignorer la relation de lien. La relation nofollow peut indiquer que le propriétaire du document actuel ne cautionne pas le document référencé. Elle est souvent incluse par les optimiseurs de moteurs de recherche qui prétendent que leurs fermes de liens ne sont pas des pages de spam.</dd> - <dt><code id="noopener">noopener</code></dt> + <dt><code>noopener</code></dt> <dd>Cela concerne <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, elle crée un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire si l'hyperlien créait l'un ou l'autre pour commencer (c.-à-d. a une valeur appropriée de l'attribut <code>target</code>). En d'autres termes, il fait en sorte que le lien se comporte comme si <a href="/fr/docs/Web/API/Window/opener"><code>window.opener</code></a> était nul et que <code><a href="target">target</a>="_parent"</code> était défini.<br> <br> C'est le contraire de <a href="#opener">opener</a>.</dd> - <dt><code id="noreferrer">noreferrer</code></dt> + <dt><code>noreferrer</code></dt> <dd>Pertinent pour <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, l'inclusion de cette valeur rend le référent inconnu (aucun en-tête <code>Referer</code> ne sera inclus), et crée un contexte de navigation de haut niveau comme si <code>noopener</code> était également défini.</dd> - <dt><code id="opener">opener</code></dt> + <dt><code>opener</code></dt> <dd>Crée un contexte de navigation auxiliaire si l'hyperlien créerait autrement un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire (c.-à-d. a « <code>_blank</code> » comme valeur d'attribut <code>target</code>). Effectivement, c'est le contraire de <a href="#noopener">noopener</a>.</dd> - <dt><code id="pingback">pingback</code></dt> + <dt><code>pingback</code></dt> <dd>Donne l'adresse du serveur de retour d'appel qui gère les retours d'appel pour le document actuel.</dd> - <dt><code id="preconnect">preconnect</code></dt> + <dt><code>preconnect</code></dt> <dd>Spécifie que l'agent utilisateur doit se connecter de manière préemptive à l'origine de la ressource cible.</dd> - <dt><code id="prefetch">prefetch</code></dt> + <dt><code>prefetch</code></dt> <dd>Indique que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible, car elle est susceptible d'être requise pour une navigation ultérieure.</dd> - <dt><code id="preload">preload</code></dt> + <dt><code>preload</code></dt> <dd>Spécifie que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible pour la navigation actuelle en fonction de la destination potentielle donnée par l'attribut <a href="as"><code>as</code></a> (et la priorité associée à la destination correspondante).</dd> - <dt><code id="prerender">prerender</code></dt> + <dt><code>prerender</code></dt> <dd>Spécifie que l'agent utilisateur doit récupérer de manière préemptive la ressource cible et la traiter de manière à fournir une réponse plus rapide à l'avenir.</dd> - <dt><code id="prev">prev</code></dt> + <dt><code>prev</code></dt> <dd> <p>Similaire au mot-clé <a href="#next">next</a>, pertinent pour les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, les valeurs <code>prev</code> indiquent que le document actuel fait partie d'une série, et que le lien renvoie à un document précédent de la série est le document référencé.</p> - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Le synonyme <code>previous</code> est incorrect et ne doit pas être utilisé.</p> + <div class="note"> + <p><strong>Note :</strong>Le synonyme <code>previous</code> est incorrect et ne doit pas être utilisé.</p> </div> </dd> - <dt><code id="search">search</code></dt> + <dt><code>search</code></dt> <dd> <p>Concerne les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code>< area></code></a>, les mots-clés <code>search</code> indiquent que l'hyperlien fait référence à un document dont l'interface est spécialement conçue pour effectuer des recherches dans le document actuel, le site et les ressources connexes, en fournissant un lien vers une ressource qui peut être utilisée pour effectuer une recherche.</p> <p>Si l'attribut <a href="type"><code>type</code></a> est défini à <code>application/opensearchdescription+xml</code>, la ressource est un <a href="/fr/docs/Web/OpenSearch">prolongateur OpenSearch</a> qui peut être facilement ajouté à l'interface de certains navigateurs comme Firefox ou Internet Explorer.</p> </dd> - <dt><code id="stylesheet">stylesheet</code></dt> + <dt><code>stylesheet</code></dt> <dd> <p>Valable pour l'élément <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, il importe une ressource externe à utiliser comme feuille de style. L'attribut <a href="type"><code>type</code></a> n'est pas nécessaire, car il s'agit d'une feuille de style <code>text/css</code>, puisque c'est la valeur par défaut. S'il ne s'agit pas d'une feuille de style de type <code>text/css</code>, il est préférable de déclarer le type.</p> @@ -342,7 +337,7 @@ translation_of: Web/HTML/Attributes/rel <p>Nécessite l'utilisation du protocole CORS pour la récupération inter-origine.</p> </dd> - <dt><code id="tag">tag</code></dt> + <dt><code>tag</code></dt> <dd>Valable pour les éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, il donne une balise (identifiée par l'adresse donnée) qui s'applique au document actuel. La valeur de la balise indique que le lien renvoie à un document, décrivant une balise s'appliquant au document sur lequel il se trouve. Ce type de lien n'est pas destiné aux balises, dans un nuage de balises, car elles s'appliquent à un groupe de pages, alors que la valeur <code>tag</code> de l'attribut <code>rel</code> concerne un seul document.</dd> </dl> @@ -350,7 +345,7 @@ translation_of: Web/HTML/Attributes/rel <dl> <dt>apple-touch-icon-precomposed</dt> - <dd> + <dd><p>Exemple d'utilisation</p> <pre class="brush: html"><!-- iPad de troisième génération avec écran Retina haute résolution : --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/img/favicon144.e7e21ca263ca.png"> <!-- iPhone avec écran Retina haute résolution : --> @@ -407,13 +402,13 @@ translation_of: Web/HTML/Attributes/rel <tr> <td>{{SpecName("HTML3.2", "#link", "<link>")}}</td> <td> - <p><span class="spec-obsolete">Obsolète</span></p> + <p>Obsolète</p> </td> <td>Ajout de <code>top</code>, <code>contents</code>, <code>index</code>, <code>glossary</code>, <code>copyright</code>, <code>next</code>, <code>previous</code>, <code>help</code> et <code>search</code>.</td> </tr> <tr> <td>{{RFC(1866, "HTML 2.0")}}</td> - <td><span class="spec-obsolete">Obsolète</span></td> + <td>Obsolète</td> <td>Définition initiale.</td> </tr> </tbody> diff --git a/files/fr/web/html/attributes/required/index.html b/files/fr/web/html/attributes/required/index.html index a9ee8bdaaf..56e487c081 100644 --- a/files/fr/web/html/attributes/required/index.html +++ b/files/fr/web/html/attributes/required/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML/Attributes/required --- <div>{{HTMLSidebar}}</div> -<p class="summary">L'attribut booléen <strong><code>required</code></strong>, s'il est présent, indique que l'utilisateur doit spécifier une valeur pour l'entrée avant que le formulaire propriétaire puisse être soumis. L'attribut <code>required</code> est pris en charge pour les éléments <a href="/fr/docs/Web/HTML/Element/Input/text"><code>text</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/search"><code>search</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/url"><code>url</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/tel"><code>tel</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/password"><code>password</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href=" /fr/docs/Web/HTML/Element/Input/month" ><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/checkbox"><code>checkbox</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/radio"><code>radio</code></a>, les éléments <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> et <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a> de contrôle de formulaire. Si elle est présente sur l'un de ces types de saisie et éléments, la pseudo-classe <a href="/fr/docs/Web/CSS/:required"><code>:required</code></a> s'appliquera. Si l'attribut n'est pas inclus, la pseudo-classe <a href="/fr/docs/Web/CSS/:optional"><code>:optional</code></a> s'appliquera.</p> +<p>L'attribut booléen <strong><code>required</code></strong>, s'il est présent, indique que l'utilisateur doit spécifier une valeur pour l'entrée avant que le formulaire propriétaire puisse être soumis. L'attribut <code>required</code> est pris en charge pour les éléments <a href="/fr/docs/Web/HTML/Element/Input/text"><code>text</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/search"><code>search</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/url"><code>url</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/tel"><code>tel</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/password"><code>password</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href=" /fr/docs/Web/HTML/Element/Input/month" ><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/checkbox"><code>checkbox</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/radio"><code>radio</code></a>, les éléments <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a> et <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a> de contrôle de formulaire. Si elle est présente sur l'un de ces types de saisie et éléments, la pseudo-classe <a href="/fr/docs/Web/CSS/:required"><code>:required</code></a> s'appliquera. Si l'attribut n'est pas inclus, la pseudo-classe <a href="/fr/docs/Web/CSS/:optional"><code>:optional</code></a> s'appliquera.</p> <p>L'attribut n'est pas pris en charge ou n'est pas pertinent pour <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/color"><code>color</code></a>, car les deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur <a href="/fr/docs/Web/HTML/Element/Input/hidden"><code>hidden</code></a> car on ne peut pas s'attendre à ce qu'un utilisateur remplisse un formulaire qui est caché. Il n'est pas non plus supporté sur aucun des types de boutons, y compris <code>image</code>.</p> @@ -21,9 +21,8 @@ translation_of: Web/HTML/Attributes/required <p>Dans le cas d'un même groupe nommé de types d'entrée <a href="/fr/docs/Web/HTML/Element/Input/checkbox"><code>checkbox</code></a>, seules les cases à cocher avec l'attribut <code>required</code> sont obligatoires.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Le réglage <code><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute">aria-required</a>="true"</code> indique à un lecteur d'écran qu'un élément (n'importe lequel) est requis, mais n'a aucune incidence sur le caractère facultatif de l'élément.</p> +<div class="note"> + <p><strong>Note :</strong>Le réglage <code><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute">aria-required</a>="true"</code> indique à un lecteur d'écran qu'un élément (n'importe lequel) est requis, mais n'a aucune incidence sur le caractère facultatif de l'élément.</p> </div> <h2 id="attribute_interactions">Interactions entre attributs</h2> diff --git a/files/fr/web/html/attributes/size/index.html b/files/fr/web/html/attributes/size/index.html index 8e6c06105a..aac800a452 100644 --- a/files/fr/web/html/attributes/size/index.html +++ b/files/fr/web/html/attributes/size/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML/Attributes/size --- <div>{{HTMLSidebar}}</div> -<p class="summary">L'attribut <strong><code>size</code></strong> définit la largeur de l'élément <a href="/fr/docs/Web/HTML/Element/input"><code><input></code></a> et la hauteur de l'élément <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a>. Pour <code>input</code>, si l'attribut <code>type</code> est <a href="/fr/docs/Web/HTML/Element/input/text"><code>text</code></a> ou <a href="/fr/docs/Web/HTML/Element/input/password"><code>password</code></a> alors c'est le nombre de caractères. Il doit s'agir d'un nombre entier de valeur 0 ou supérieure. Si aucun <code>size</code> n'est spécifié, ou si une valeur invalide est spécifiée, l'entrée n'a pas de taille déclarée, et le contrôle de formulaire aura la largeur par défaut basée sur l'agent utilisateur. Si CSS cible l'élément avec des propriétés ayant un impact sur la largeur, CSS a la priorité.</p> +<p>L'attribut <strong><code>size</code></strong> définit la largeur de l'élément <a href="/fr/docs/Web/HTML/Element/input"><code><input></code></a> et la hauteur de l'élément <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a>. Pour <code>input</code>, si l'attribut <code>type</code> est <a href="/fr/docs/Web/HTML/Element/input/text"><code>text</code></a> ou <a href="/fr/docs/Web/HTML/Element/input/password"><code>password</code></a> alors c'est le nombre de caractères. Il doit s'agir d'un nombre entier de valeur 0 ou supérieure. Si aucun <code>size</code> n'est spécifié, ou si une valeur invalide est spécifiée, l'entrée n'a pas de taille déclarée, et le contrôle de formulaire aura la largeur par défaut basée sur l'agent utilisateur. Si CSS cible l'élément avec des propriétés ayant un impact sur la largeur, CSS a la priorité.</p> <p>L'attribut <code>size</code> n'a aucun impact sur la validation des contraintes.</p> diff --git a/files/fr/web/html/attributes/step/index.html b/files/fr/web/html/attributes/step/index.html index fca8bc80d0..c87e0ddc44 100644 --- a/files/fr/web/html/attributes/step/index.html +++ b/files/fr/web/html/attributes/step/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Attributes/step --- <div>{{HTMLSidebar}}</div> -<p class="summary">L'attribut <strong><code>step</code></strong> est un nombre qui indique l'incrément que la valeur doit suivre ou le mot-clé <code>any</code>. Il est valable pour les types de saisie numérique, notamment les <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>.</p> +<p>L'attribut <strong><code>step</code></strong> est un nombre qui indique l'incrément que la valeur doit suivre ou le mot-clé <code>any</code>. Il est valable pour les types de saisie numérique, notamment les <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>.</p> <p><code>step</code> définit l'incrément obtenu lors du clic sur les boutons déroulants haut et bas, du déplacement d'un curseur vers la gauche et la droite sur une plage, et de la validation des différents types de date. S'il n'est pas explicitement inclus, <code>step</code> prend par défaut la valeur 1 pour <code>number</code> et <code>range</code>, et 1 type d'unité (minute, semaine, mois, jour) pour les types d'entrée date/heure. La valeur doit être un nombre positif - entier ou flottant - ou la valeur spéciale <code>any</code>, ce qui signifie qu'aucun incrément n'est impliqué et que toute valeur est autorisée (sauf autres contraintes, comme <a href="/fr/docs/Web/HTML/Attributes/min"><code>min</code></a> et <a href="/fr/docs/Web/HTML/Attributes/max"><code>max</code></a>).</p> @@ -33,37 +33,37 @@ translation_of: Web/HTML/Attributes/step <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a></td> <td>1 (jour)</td> - <td><code class="brush: html"><input type="date" min="2019-12-25" step="1"></code></td> + <td><pre class="brush: html"><input type="date" min="2019-12-25" step="1"></pre></td> </tr> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a></td> <td>1 (mois)</td> - <td><code class="brush: html"><input type="month" min="2019-12" step="12"></code></td> + <td><pre class="brush: html"><input type="month" min="2019-12" step="12"></pre></td> </tr> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a></td> <td>1 (semaine)</td> - <td><code class="brush: html"><input type="week" min="2019-W23" step="2"></code></td> + <td><pre class="brush: html"><input type="week" min="2019-W23" step="2"></pre></td> </tr> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a></td> <td>60 (secondes)</td> - <td><code class="brush: html"><input type="time" min="09:00" step="900"></code></td> + <td><pre class="brush: html"><input type="time" min="09:00" step="900"></pre></td> </tr> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a></td> <td>1 (jour)</td> - <td><code class="brush: html"><input type="datetime-local" min="019-12-25T19:30" step="7"></code></td> + <td><pre class="brush: html"><input type="datetime-local" min="019-12-25T19:30" step="7"></pre></td> </tr> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a></td> <td>1</td> - <td><code class="brush: html"><input type="number" min="0" step="0.1" max="10"></code></td> + <td><pre class="brush: html"><input type="number" min="0" step="0.1" max="10"></pre></td> </tr> <tr> <td><a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a></td> <td>1</td> - <td><code class="brush: html"><input type="range" min="0" step="2" max="10"></code></td> + <td><pre class="brush: html"><input type="range" min="0" step="2" max="10"></pre></td> </tr> </tbody> </table> @@ -88,9 +88,8 @@ translation_of: Web/HTML/Attributes/step <div>{{EmbedLiveSample("min_impact_on_step","",50)}}</div> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Lorsque les données saisies par l'utilisateur ne respectent pas la configuration indiquée par l'incrément, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudoclasses <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> et <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a>.</p> +<div class="note"> + <p><strong>Note :</strong>Lorsque les données saisies par l'utilisateur ne respectent pas la configuration indiquée par l'incrément, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudoclasses <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> et <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a>.</p> </div> <p>Voir <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation côté client</a> et <a href="/fr/docs/Web/API/ValidityState/stepMismatch"><code>stepMismatch</code></a> pour plus d'informations.</p> diff --git a/files/fr/web/html/block-level_elements/index.html b/files/fr/web/html/block-level_elements/index.html index 948738c8c5..7b1944d421 100644 --- a/files/fr/web/html/block-level_elements/index.html +++ b/files/fr/web/html/block-level_elements/index.html @@ -11,11 +11,11 @@ tags: translation_of: Web/HTML/Block-level_elements original_slug: Web/HTML/Éléments_en_bloc --- -<p class="summary">Les éléments HTML (<strong>Hypertext Markup Language</strong>) é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 <a href="/fr/docs/Web/CSS/CSS_Flow_Layout">disposition en flux</a>. 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 <a href="/fr/docs/Web/HTML/Inline_elements">éléments en ligne</a>.</p> +<p>Les éléments HTML (<strong>Hypertext Markup Language</strong>) é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 <a href="/fr/docs/Web/CSS/CSS_Flow_Layout">disposition en flux</a>. 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 <a href="/fr/docs/Web/HTML/Inline_elements">éléments en ligne</a>.</p> <p>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.</p> -<div class="notecard note"> +<div class="note"> <p><strong>Note :</strong> 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).</p> </div> @@ -57,66 +57,65 @@ Son fond a été coloré pour illustrer son conteneur.</p></pre> <p>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).</p> -<div class="index"> - <dl> - <dt><a href="/fr/docs/Web/HTML/Element/address"><code><address></code></a></dt> - <dd>Information de contact.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a></dt> - <dd>Contenu d'un article.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a></dt> - <dd>Contenu tangentiel.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/blockquote"><code><blockquote></code></a></dt> - <dd>Long bloc de citation.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/details"><code><details></code></a></dt> - <dd>Outil permettant de révéler des informations sur la page.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/dialog"><code><dialog></code></a></dt> - <dd>Boîte de dialogue.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a></dt> - <dd>Description d'une définition.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a></dt> - <dd>Division d'un document.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a></dt> - <dd>Liste de définitions.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a></dt> - <dd>Définition/description d'un terme.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a></dt> - <dd>Ensemble de champs.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/figcaption"><code><figcaption></code></a></dt> - <dd>Légende d'une image.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/figure"><code><figure></code></a></dt> - <dd>Permet de grouper des médias avec une légende (voir <a href="/fr/docs/Web/HTML/Element/figcaption"><code><figcaption></code></a>).</dd> - <dt><a href="/fr/docs/Web/HTML/Element/footer"><code><footer></code></a></dt> - <dd>Bas de page ou de section.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></dt> - <dd>Formulaire.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h1></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h2></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h3></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h4></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h5></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h6></code></a></dt> - <dd>Éléments de titre de niveau 1 à 6.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/header"><code><header></code></a></dt> - <dd>En-tête de page ou de section.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/hgroup"><code><hgroup></code></a></dt> - <dd>Information d'en-tête de groupe.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/hr"><code><hr></code></a></dt> - <dd>Ligne de division horizontale.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a></dt> - <dd>Élément d'une liste.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/main"><code><main></code></a></dt> - <dd>Contient le contenu central unique au document.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/nav"><code><nav></code></a></dt> - <dd>Contient des liens de navigation.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/ol"><code><ol></code></a></dt> - <dd>Liste ordonnée.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a></dt> - <dd>Paragraphe.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/pre"><code><pre></code></a></dt> - <dd>Texte pré-formaté.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a></dt> - <dd>Section d'une page web.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/table"><code><table></code></a></dt> - <dd>Tableau.</dd> - <dt><a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a></dt> - <dd>Liste non-ordonnée.</dd> - </dl> -</div> +<dl> + <dt><a href="/fr/docs/Web/HTML/Element/address"><code><address></code></a></dt> + <dd>Information de contact.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a></dt> + <dd>Contenu d'un article.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a></dt> + <dd>Contenu tangentiel.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/blockquote"><code><blockquote></code></a></dt> + <dd>Long bloc de citation.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/details"><code><details></code></a></dt> + <dd>Outil permettant de révéler des informations sur la page.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/dialog"><code><dialog></code></a></dt> + <dd>Boîte de dialogue.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a></dt> + <dd>Description d'une définition.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a></dt> + <dd>Division d'un document.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a></dt> + <dd>Liste de définitions.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a></dt> + <dd>Définition/description d'un terme.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a></dt> + <dd>Ensemble de champs.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/figcaption"><code><figcaption></code></a></dt> + <dd>Légende d'une image.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/figure"><code><figure></code></a></dt> + <dd>Permet de grouper des médias avec une légende (voir <a href="/fr/docs/Web/HTML/Element/figcaption"><code><figcaption></code></a>).</dd> + <dt><a href="/fr/docs/Web/HTML/Element/footer"><code><footer></code></a></dt> + <dd>Bas de page ou de section.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></dt> + <dd>Formulaire.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h1></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h2></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h3></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h4></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h5></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h6></code></a></dt> + <dd>Éléments de titre de niveau 1 à 6.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/header"><code><header></code></a></dt> + <dd>En-tête de page ou de section.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/hgroup"><code><hgroup></code></a></dt> + <dd>Information d'en-tête de groupe.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/hr"><code><hr></code></a></dt> + <dd>Ligne de division horizontale.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a></dt> + <dd>Élément d'une liste.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/main"><code><main></code></a></dt> + <dd>Contient le contenu central unique au document.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/nav"><code><nav></code></a></dt> + <dd>Contient des liens de navigation.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/ol"><code><ol></code></a></dt> + <dd>Liste ordonnée.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a></dt> + <dd>Paragraphe.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/pre"><code><pre></code></a></dt> + <dd>Texte pré-formaté.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a></dt> + <dd>Section d'une page web.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/table"><code><table></code></a></dt> + <dd>Tableau.</dd> + <dt><a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a></dt> + <dd>Liste non-ordonnée.</dd> +</dl> + <h2 id="See_also">Voir aussi</h2> diff --git a/files/fr/web/html/cors_enabled_image/index.html b/files/fr/web/html/cors_enabled_image/index.html index 07aef9b0ef..0e839a8c73 100644 --- a/files/fr/web/html/cors_enabled_image/index.html +++ b/files/fr/web/html/cors_enabled_image/index.html @@ -14,7 +14,7 @@ tags: translation_of: Web/HTML/CORS_enabled_image original_slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP --- -<p class="summary">HTML permet d'utiliser l'attribut <a href="/fr/docs/Web/HTML/Element/Img#attr-crossorigin"><code>crossorigin</code></a> sur les images. Utilisé avec un en-tête <a href="/fr/docs/Glossary/CORS">CORS</a> adéquat, les images définies par <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> provenant d'origines étrangères pourront être utilisées au sein d'un élément <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> comme si elles avaient été chargées depuis l'origine courante.</p> +<p>HTML permet d'utiliser l'attribut <a href="/fr/docs/Web/HTML/Element/Img#attr-crossorigin"><code>crossorigin</code></a> sur les images. Utilisé avec un en-tête <a href="/fr/docs/Glossary/CORS">CORS</a> adéquat, les images définies par <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> provenant d'origines étrangères pourront être utilisées au sein d'un élément <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> comme si elles avaient été chargées depuis l'origine courante.</p> <p>Pour plus de détails sur l'attribut <code>crossorigin</code>, voir <a href="/fr/docs/Web/HTML/Attributes/crossorigin">les attributs de paramétrage du CORS</a>.</p> 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 71e7e3483f..95aebbdca4 100644 --- a/files/fr/web/html/date_and_time_formats/index.html +++ b/files/fr/web/html/date_and_time_formats/index.html @@ -24,7 +24,7 @@ original_slug: Web/HTML/Formats_date_heure_HTML --- <div>{{HTMLRef}}</div> -<p class="summary">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 <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> qui permettent de choisir une date, une heure ou les deux, les éléments <a href="/fr/docs/Web/HTML/Element/ins"><code><ins></code></a> et <a href="/fr/docs/Web/HTML/Element/del"><code><del></code></a> dont l'attribut <a href="/fr/docs/Web/HTML/Element/ins#attr-datetime"><code>ins</code></a> indique la date (ou la date et l'heure) à laquelle l'ajout ou la suppression de contenu a eu lieu.</p> +<p>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 <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> qui permettent de choisir une date, une heure ou les deux, les éléments <a href="/fr/docs/Web/HTML/Element/ins"><code><ins></code></a> et <a href="/fr/docs/Web/HTML/Element/del"><code><del></code></a> dont l'attribut <a href="/fr/docs/Web/HTML/Element/ins#attr-datetime"><code>ins</code></a> indique la date (ou la date et l'heure) à laquelle l'ajout ou la suppression de contenu a eu lieu.</p> <p>Pour les éléments <code><input></code>, voici les différents type (cf. <a href="/fr/docs/Web/HTML/Element/Input#attr-type"><code>input</code></a>) pour lesquels l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-value"><code>value</code></a> contient une chaîne de caractères représentant une date ou une heure :</p> @@ -389,12 +389,12 @@ original_slug: Web/HTML/Formats_date_heure_HTML </tr> <tr> <td><code>1986-01-28 11:38:00.010</code></td> - <td><code>1986-01-28T11:38:00.01</code><sup><a href="#datetime-local-footnote1">1</a></sup></td> + <td><code>1986-01-28T11:38:00.01</code></td> <td>28 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes</td> </tr> <tr> <td><code>0170-07-31T22:00:00</code></td> - <td><code>0170-07-31T22:00</code><sup><a href="#datetime-local-footnote2">2</a></sup></td> + <td><code>0170-07-31T22:00</code></td> <td>31 juillet 170 à 22 heures</td> </tr> </tbody> diff --git a/files/fr/web/html/element/a/index.html b/files/fr/web/html/element/a/index.html index ef41ac41a5..786964fa38 100644 --- a/files/fr/web/html/element/a/index.html +++ b/files/fr/web/html/element/a/index.html @@ -18,7 +18,7 @@ browser-compat: html.elements.a --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><a></code></strong> (pour ancre ou <i>anchor</i> en anglais), avec <a href="#href">son attribut <code>href</code></a>, crée un lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des emplacements se trouvant dans la même page, ou tout ce qu'une URL peut adresser. Le contenu de chaque élément <code><a></code> <b>doit</b> indiquer la destination du lien. Si <a href="#href">l'attribut <code>href</code></a> est présent, appuyer sur la touche entrée en se concentrant sur l'élément <code><a></code> l'activera.</p> +<p>L'élément HTML <strong><code><a></code></strong> (pour ancre ou <i>anchor</i> en anglais), avec <a href="#href">son attribut <code>href</code></a>, crée un lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des emplacements se trouvant dans la même page, ou tout ce qu'une URL peut adresser. Le contenu de chaque élément <code><a></code> <b>doit</b> indiquer la destination du lien. Si <a href="#href">l'attribut <code>href</code></a> est présent, appuyer sur la touche entrée en se concentrant sur l'élément <code><a></code> l'activera.</p> <div>{{EmbedInteractiveExample("pages/tabbed/a.html")}}</div> @@ -27,20 +27,17 @@ browser-compat: html.elements.a <p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p> <dl> - <dt><strong id="attr-download"><code>download</code></strong></dt> + <dt><strong><code>download</code></strong></dt> <dd> - <ul> - <li>Sans valeur, le navigateur proposera un nom de fichier/extension, généré à partir de diverses sources : + <p>Sans valeur, le navigateur proposera un nom de fichier/extension, généré à partir de diverses sources :</p> <ul> <li>L'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Content-Disposition"><code>Content-Disposition</code></a></li> <li>Le segment final dans l'URL : <a href="/fr/docs/Web/API/URL/pathname">path</a></li> <li>Le <a href="/fr/docs/Glossary/MIME_type">Type MIME</a> (de l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code></a>, le début d'une URL <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code></a>, ou <a href="/fr/docs/Web/API/Blob/type"><code>Blob.type</code></a> pour une URL <a href="/fr/docs/Web/API/URL/createObjectURL"><code>blob:</code></a>).</li> </ul> - </li> - <li>La définition d'une valeur la suggère comme nom de fichier. Les caractères <code>/</code> et <code>\</code> sont convertis en caractères de soulignement (<code>_</code>). Les systèmes de fichiers peuvent interdire d'autres caractères dans les noms de fichiers, les navigateurs ajusteront donc le nom suggéré si nécessaire.</li> - </ul> - <div class="notecard note"> - <p><b>Note :</b></p> + <p>La définition d'une valeur la suggère comme nom de fichier. Les caractères <code>/</code> et <code>\</code> sont convertis en caractères de soulignement (<code>_</code>). Les systèmes de fichiers peuvent interdire d'autres caractères dans les noms de fichiers, les navigateurs ajusteront donc le nom suggéré si nécessaire.</p> + <div class="note"> + <p><strong>Note :</strong></p> <ul> <li><code>download</code> ne fonctionne que pour <a href="/fr/docs/Web/Security/Same-origin_policy">les URLs de même origine</a>, ou les schémas <code>blob:</code> et <code>data:</code>.</li> <li> @@ -53,7 +50,7 @@ browser-compat: html.elements.a </ul> </div> </dd> - <dt><strong id="attr-href"><code>href</code></strong></dt> + <dt><strong><code>href</code></strong></dt> <dd> <p>L'URL vers laquelle pointe l'hyperlien. Les liens ne sont pas limités aux URL basées sur HTTP - ils peuvent utiliser n'importe quel schéma d'URL pris en charge par les navigateurs :</p> <ul> @@ -64,15 +61,15 @@ browser-compat: html.elements.a <li>Bien que les navigateurs web puissent ne pas prendre en charge d'autres schémas d'URL, les sites web le peuvent avec <a href="/fr/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a>.</li> </ul> </dd> - <dt><strong id="attr-hreflang"><code>hreflang</code></strong></dt> + <dt><strong><code>hreflang</code></strong></dt> <dd>Donne des indications sur le langage humain de l'URL liée. Aucune fonctionnalité intégrée. Les valeurs autorisées sont les mêmes que <a href="/fr/docs/Web/HTML/Global_attributes/lang">l'attribut global <code>lang</code></a>.</dd> - <dt><strong id="attr-ping"><code>ping</code></strong></dt> + <dt><strong><code>ping</code></strong></dt> <dd>Contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes <a href="/fr/docs/Web/HTTP/Methods/POST"><code>POST</code></a> avec le corps <code>PING</code> lorsque l'utilisateur suit le lien. Cet attribut est généralement utilisé pour tracer un utilisateur.</dd> - <dt><strong id="attr-referrerpolicy"><code>referrerpolicy</code></strong> {{experimental_inline}}</dt> + <dt><strong><code>referrerpolicy</code></strong> {{experimental_inline}}</dt> <dd>La portion du <a href="/fr/docs/Web/HTTP/Headers/Referer">referrer</a> envoyer lors du suivi du lien. Voir <a href="/fr/docs/Web/HTTP/Headers/Referrer-Policy"><code>Referrer-Policy</code></a> pour les valeurs possibles et leurs effets.</dd> - <dt><strong id="attr-rel"><code>rel</code></strong></dt> + <dt><strong><code>rel</code></strong></dt> <dd>Cet attribut indique la relation entre la cible du lien et l'objet faisant le lien. La valeur est une liste de <a href="/fr/docs/Web/HTML/Link_types">types de liens</a> séparés par des espaces.</dd> - <dt><strong id="attr-target"><code>target</code></strong></dt> + <dt><strong><code>target</code></strong></dt> <dd>Où afficher l'URL liée, comme nom d'un <em>contexte de navigation</em> (un onglet, une fenêtre ou un <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a>). Les mots-clés suivants ont des significations spéciales pour l'endroit où charger l'URL : <ul> <li><code>_self</code> : le contexte de navigation actuel. (Par défaut)</li> @@ -80,41 +77,37 @@ browser-compat: html.elements.a <li><code>_parent</code> : le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, il se comporte comme <code>_self</code>.</li> <li><code>_top</code> : le contexte de navigation le plus haut (le contexte "le plus haut" qui est un ancêtre du contexte actuel). S'il n'a aucun ancêtre, il se comporte comme <code>_self</code>.</li> </ul> - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Définir <code>target="_blank"</code> sur les éléments <code><a></code> fournit implicitement le même comportement <code>rel</code> que définir <a href="/fr/docs/Web/HTML/Link_types/noopener"><code>rel="noopener"</code></a> qui ne définit pas <code>window.opener</code>. Voir la <a href="#browser_compatibility">compatibilité des navigateurs</a> pour le support.</p> + <div class="note"> + <p><strong>Note :</strong>Définir <code>target="_blank"</code> sur les éléments <code><a></code> fournit implicitement le même comportement <code>rel</code> que définir <a href="/fr/docs/Web/HTML/Link_types/noopener"><code>rel="noopener"</code></a> qui ne définit pas <code>window.opener</code>. Voir la <a href="#browser_compatibility">compatibilité des navigateurs</a> pour le support.</p> </div> </dd> - <dt><strong id="attr-type"><code>type</code></strong></dt> + <dt><strong><code>type</code></strong></dt> <dd>Donne des indications sur le format de l'URL liée avec un <a href="/fr/docs/Glossary/MIME_type">Type MIME</a>. Aucune fonctionnalité intégrée.</dd> </dl> <h3 id="deprecated_attributes">Attributs obsolètes</h3> <dl> - <dt id="charset"><strong id="attr-charset"><code>charset</code></strong> {{Deprecated_Inline}}</dt> + <dt><strong><code>charset</code></strong> {{Deprecated_Inline}}</dt> <dd>Fait allusion aux <a href="/fr/docs/Glossary/character_encoding">encodages des caractères</a> de l'URL liée. - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Cet attribut est déprécié et <strong>ne doit pas être utilisé par les auteurs</strong>. Utilisez l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code></a> sur l'URL liée.</p> + <div class="note"> + <p><strong>Note :</strong>Cet attribut est déprécié et <strong>ne doit pas être utilisé par les auteurs</strong>. Utilisez l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code></a> sur l'URL liée.</p> </div> </dd> - <dt id="coords"><strong id="attr-coords"><code>coords</code></strong> {{Deprecated_Inline}}</dt> + <dt><strong><code>coords</code></strong> {{Deprecated_Inline}}</dt> <dd>Utilisé avec <a href="#shape">l'attribut <code>shape</code></a>. Une liste de coordonnées séparées par des virgules.</dd> - <dt id="name"><strong id="attr-name"><code>name</code></strong> {{Deprecated_Inline}}</dt> + <dt><strong><code>name</code></strong> {{Deprecated_Inline}}</dt> <dd>Était nécessaire pour définir un emplacement cible possible dans une page. En HTML 4.01, <code>id</code> et <code>name</code> pouvaient tous deux être utilisés sur <code><a></code>, pour autant qu'ils aient des valeurs identiques. - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Utilisez l'attribut universel <a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> à la place.</p> + <div class="note"> + <p><strong>Note :</strong>Utilisez l'attribut universel <a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> à la place.</p> </div> </dd> - <dt id="rev"><strong id="attr-rev"><code>rev</code></strong> {{Deprecated_Inline}}</dt> + <dt><strong><code>rev</code></strong> {{Deprecated_Inline}}</dt> <dd>Spécifiait un lien inverse ; l'opposé de <a href="#rel">l'attribut <code>rel</code></a>. Déprécié pour avoir été très confus.</dd> - <dt id="shape"><strong id="attr-shape"><code>shape</code></strong> {{Deprecated_Inline}}</dt> + <dt><strong><code>shape</code></strong> {{Deprecated_Inline}}</dt> <dd>La forme de la région de l'hyperlien dans une carte d'image. - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Utilisez plutôt l'élément <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a> pour les cartes d'images.</p> + <div class="note"> + <p><strong>Note :</strong>Utilisez plutôt l'élément <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a> pour les cartes d'images.</p> </div> </dd> </dl> @@ -178,7 +171,7 @@ browser-compat: html.elements.a <h4 id="html">HTML</h4> -<pre class="brush: html notranslate"><a href="https://www.mozilla.com"> +<pre class="brush: html"><a href="https://www.mozilla.com"> Mozilla </a></pre> @@ -194,11 +187,7 @@ browser-compat: html.elements.a <a href="/fr/docs/Web/HTML">URL relative à l'origine</a> <a href="./p">URL relative au répertoire</a></pre> -<div class="hidden"> -<h4 id="css">CSS</h4> - -<pre class="brush: css">a { display: block; margin-bottom: 0.5em }</pre> -</div> +<pre class="brush: css hidden">a { display: block; margin-bottom: 0.5em }</pre> <h4 id="result_2">Résultat</h4> @@ -214,9 +203,8 @@ browser-compat: html.elements.a <!-- Rubrique à relier --> <h2 id="section_further_down">Section plus bas</h2></pre> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous pouvez utiliser <code>href="#top"</code> ou le fragment vide (<code>href="#"</code>) pour créer un lien vers le haut de la page actuelle, <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier">comme défini dans la spécification HTML</a>.</p> +<div class="note"> + <p><strong>Note :</strong>Vous pouvez utiliser <code>href="#top"</code> ou le fragment vide (<code>href="#"</code>) pour créer un lien vers le haut de la page actuelle, <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier">comme défini dans la spécification HTML</a>.</p> </div> <h3 id="linking_to_an_email_address">Créer un lien avec une adresse électronique</h3> diff --git a/files/fr/web/html/element/abbr/index.html b/files/fr/web/html/element/abbr/index.html index f92760de19..178a8835df 100644 --- a/files/fr/web/html/element/abbr/index.html +++ b/files/fr/web/html/element/abbr/index.html @@ -20,7 +20,7 @@ browser-compat: html.elements.abbr --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><abbr></code></strong> (<strong>abréviation</strong> en français) représente une abréviation ou un acronyme ; l'attribut facultatif <a href="/fr/docs/Web/HTML/Global_attributes#attr-title"><code>title</code></a> peut fournir une explication ou une description de l'abréviation. S'il est présent, <code>title</code> doit contenir cette description complète et rien d'autre.</p> +<p>L'élément HTML <strong><code><abbr></code></strong> (<strong>abréviation</strong> en français) représente une abréviation ou un acronyme ; l'attribut facultatif <a href="/fr/docs/Web/HTML/Global_attributes#attr-title"><code>title</code></a> peut fournir une explication ou une description de l'abréviation. S'il est présent, <code>title</code> doit contenir cette description complète et rien d'autre.</p> <div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div> @@ -57,7 +57,7 @@ browser-compat: html.elements.abbr <p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p> -<p>On notera que l'attribut <strong id="attr-title"><code>title</code></strong> possède ici une sémantique spécifique et il représente la description complète de l'abréviation. Souvent, mais pas nécessairement, il s'affiche comme une info-bulle au survol de la souris.</p> +<p>On notera que l'attribut <strong><code>title</code></strong> possède ici une sémantique spécifique et il représente la description complète de l'abréviation. Souvent, mais pas nécessairement, il s'affiche comme une info-bulle au survol de la souris.</p> <p>Chaque élément <code><abbr></code> est indépendant, rattacher un titre à l'un ne l'associe pas aux abréviations identiques qui suivent.</p> diff --git a/files/fr/web/html/element/acronym/index.html b/files/fr/web/html/element/acronym/index.html index 8909b7ba3e..68ac02fa39 100644 --- a/files/fr/web/html/element/acronym/index.html +++ b/files/fr/web/html/element/acronym/index.html @@ -13,16 +13,14 @@ browser-compat: html.elements.acronym --- <div>{{HTMLRef}}</div> -<div class="notecard deprecated"> - <p><b>Obsolète</b></p> - <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> </div> -<p class="summary">L'élément HTML <strong><code><acronym></code></strong>, pour les acronymes, permet aux auteurs de pages d'indiquer une suite de caractères composant un acronyme ou l'abréviation d'un mot.</p> +<p>L'élément HTML <strong><code><acronym></code></strong>, pour les acronymes, permet aux auteurs de pages d'indiquer une suite de caractères composant un acronyme ou l'abréviation d'un mot.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Cet élément n'existe plus en HTML5 et ne devrait plus être utilisé. <strong>Les développeuses et développeurs web devraient utiliser l'élément <a href="/fr/docs/Web/HTML/Element/abbr"><code><abbr></code></a> à la place</strong>.</p> +<div class="note"> + <p><strong>Note :</strong>Cet élément n'existe plus en HTML5 et ne devrait plus être utilisé. <strong>Les développeuses et développeurs web devraient utiliser l'élément <a href="/fr/docs/Web/HTML/Element/abbr"><code><abbr></code></a> à la place</strong>.</p> </div> <h2 id="attributes">Attributs</h2> @@ -33,9 +31,8 @@ browser-compat: html.elements.acronym <p>Cet élément implémente l'interface <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Jusqu'à Gecko 1.9.2 (inclus), Firefox implémente l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</p> +<div class="note"> + <p><strong>Note :</strong>Jusqu'à Gecko 1.9.2 (inclus), Firefox implémente l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</p> </div> <h2 id="example">Exemple</h2> diff --git a/files/fr/web/html/element/address/index.html b/files/fr/web/html/element/address/index.html index e89c7c69f3..45ca70e4b9 100644 --- a/files/fr/web/html/element/address/index.html +++ b/files/fr/web/html/element/address/index.html @@ -20,7 +20,7 @@ browser-compat: html.elements.address --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><address></code></strong> indique des informations de contact pour une personne, un groupe de personnes ou une organisation.</p> +<p>L'élément HTML <strong><code><address></code></strong> indique des informations de contact pour une personne, un groupe de personnes ou une organisation.</p> <div>{{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}}</div> @@ -107,5 +107,5 @@ browser-compat: html.elements.address <ul> <li>Les autres éléments liés aux sections d'un document : <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code><nav></code></a>, <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>, <a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h1></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h2></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h3></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h4></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h5></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h6></code></a>, <a href="/fr/docs/Web/HTML/Element/hgroup"><code><hgroup></code></a>, <a href="/fr/docs/Web/HTML/Element/footer"><code><footer></code></a>, <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a>, <a href="/fr/docs/Web/HTML/Element/header"><code><header></code></a> ;</li> - <li class="last"><a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Sections et titres d'un document HTML5</a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Sections et titres d'un document HTML5</a></li> </ul> diff --git a/files/fr/web/html/element/applet/index.html b/files/fr/web/html/element/applet/index.html index 1a0fb83e01..fd69f43973 100644 --- a/files/fr/web/html/element/applet/index.html +++ b/files/fr/web/html/element/applet/index.html @@ -13,17 +13,15 @@ translation_of: Web/HTML/Element/applet --- <div>{{HTMLRef}}</div> -<div class="notecard deprecated"> - <p><b>Obsolète</b></p> - <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> </div> -<div class="notecard warning"> - <p><b>Attention !</b></p> - <p>Cet élément a été retiré à partir de <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279218">Gecko 56</a>, de <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=470301">Chrome 47</a> et le retrait est à l'étude pour <a href="https://bugs.webkit.org/show_bug.cgi?id=157926">WebKit</a> et <a href="https://developer.microsoft.com/fr/microsoft-edge/platform/issues/11946645/">Edge</a>.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cet élément a été retiré à partir de <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279218">Gecko 56</a>, de <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=470301">Chrome 47</a> et le retrait est à l'étude pour <a href="https://bugs.webkit.org/show_bug.cgi?id=157926">WebKit</a> et <a href="https://developer.microsoft.com/fr/microsoft-edge/platform/issues/11946645/">Edge</a>.</p> </div> -<p class="summary">L'élément <strong><code><applet></code></strong>, pour les applets, définit l'intégration d'un applet Java. Cet élément est désormais déprécié en faveur de <a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a>.</p> +<p>L'élément <strong><code><applet></code></strong>, pour les applets, définit l'intégration d'un applet Java. Cet élément est désormais déprécié en faveur de <a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a>.</p> <p>L'utilisation d'applets Java sur le Web est dépréciée, la plupart des navigateurs ne prennent plus en charge les plugins Java.</p> @@ -57,35 +55,35 @@ translation_of: Web/HTML/Element/applet <p>Cet élément peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt><strong id="attr-align"><code>align</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>align</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut est utilisé pour positionner l'applet sur la page en fonction du contenu qui l'entoure. La spécification HTML 4.01 définit l'utilisation des valeurs <code>bottom</code> (en bas), <code>left</code> (à gauche), <code>middle</code> (au milieu), <code>right</code> (à droite), et <code>top</code> (en haut), tandis que Microsoft et Netscape supporteraient également les valeurs <code>absbottom</code>, <code>absmiddle</code>, <code>baseline</code>, <code>center</code>, et <code>texttop</code>.</dd> - <dt><strong id="attr-alt"><code>alt</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>alt</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut génère un texte alternatif à afficher pour les navigateurs ne supportant pas Java. Il est à noter que le contenu de l'élément <code><applet></code> peut être également restitué comme du texte alternatif dans certains cas.</dd> - <dt><strong id="attr-archive"><code>archive</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>archive</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut fait référence à une version archivée ou compressée de l'applet et des fichiers classes associés, ce qui peut aider à réduire le temps de téléchargement.</dd> - <dt><strong id="attr-code"><code>code</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>code</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut définit l'URL du fichier classe de l'applet qui doit être chargé et exécuté. Les noms de fichiers pour les applets sont définis avec une extension en .class. L'URL définie par cet attribut peut être relative par rapport à l'attribut <code>codebase</code>.</dd> - <dt><strong id="attr-codebase"><code>codebase</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>codebase</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut donne une URL absolue ou relative du répertoire où les fichiers classes de l'applet (déclarés dans l'attribut <code>code</code>) doivent être placés.</dd> - <dt><strong id="attr-datafld"><code>datafld</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>datafld</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut, supporté par Internet Explorer à partir de sa version 4, définit le nom de colonne attribué aux objets de données fournis par les données attachées. Cet attribut peut être utilisé pour définir les différents éléments <a href="/fr/docs/Web/HTML/Element/param"><code><param></code></a> envoyés à l'applet Java.</dd> - <dt><strong id="attr-datasrc"><code>datasrc</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>datasrc</code></strong> {{deprecated_inline}}</dt> <dd>Comme l'attribut <code>datafld</code>, cet attribut est utilisé pour les données attachées sous Internet Explorer 4. Il indique un identifiant pour l'objet définissant la source des données qui seront attachées aux éléments <a href="/fr/docs/Web/HTML/Element/param"><code><param></code></a> associés à l'applet.</dd> - <dt><strong id="attr-height"><code>height</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>height</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut définit la hauteur dont l'applet à besoin, en pixels.</dd> - <dt><strong id="attr-hspace"><code>hspace</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>hspace</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut définit l'espace horizontal supplémentaire qui doit être réservé à côté de l'applet, en pixels.</dd> - <dt><strong id="attr-mayscript"><code>mayscript</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>mayscript</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut, concerné par l'implémentation effectuée dans Netscape, permet l'accès à l'applet par les scripts contenus dans le document.</dd> - <dt><strong id="attr-name"><code>name</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>name</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut donne un nom à l'applet afin qu'elle soit possiblement identifiée par d'autres ressources, notamment les scripts.</dd> - <dt><strong id="attr-object"><code>object</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>object</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut définit l'URL d'une représentation de l'applet.</dd> - <dt><strong id="attr-src"><code>src</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>src</code></strong> {{deprecated_inline}}</dt> <dd>Dans Internet Explorer 4 et ses versions ultérieures, cet attribut définit une URL pour le fichier associé à l'applet. La signification de cet attribut n'est pas claire et ne fait pas partie du standard HTML.</dd> - <dt><strong id="attr-vspace"><code>vspace</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>vspace</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut définit l'espace supplémentaire qui doit être réservé en haut et en bas de l'applet, en pixels.</dd> - <dt><strong id="attr-width"><code>width</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>width</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut définit la largeur, en pixels, dont l'applet a besoin</dd> </dl> diff --git a/files/fr/web/html/element/area/index.html b/files/fr/web/html/element/area/index.html index d3e10ca3f6..2061200c14 100644 --- a/files/fr/web/html/element/area/index.html +++ b/files/fr/web/html/element/area/index.html @@ -15,7 +15,7 @@ browser-compat: html.elements.area --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><area></code></strong> définit une zone particulière d'une image et peut lui associer un <a href="/fr/docs/Glossary/Hyperlink">lien hypertexte</a>. Cet élément n'est utilisé qu'au sein d'un élément <a href="/fr/docs/Web/HTML/Element/map"><code><map></code></a>.</p> +<p>L'élément HTML <strong><code><area></code></strong> définit une zone particulière d'une image et peut lui associer un <a href="/fr/docs/Glossary/Hyperlink">lien hypertexte</a>. Cet élément n'est utilisé qu'au sein d'un élément <a href="/fr/docs/Web/HTML/Element/map"><code><map></code></a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}</div> @@ -57,9 +57,9 @@ browser-compat: html.elements.area <p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p> <dl> - <dt><strong id="attr-alt"><code>alt</code></strong></dt> + <dt><strong><code>alt</code></strong></dt> <dd>Une chaîne de texte alternative à afficher sur les navigateurs qui n'affichent pas les images. Le texte doit être formulé de manière à offrir à l'utilisateur le même type de choix que l'image lorsqu'elle est affichée sans le texte alternatif. Cet attribut est requis uniquement si l'attribut <a href="#attr-href"><code>href</code></a> est utilisé.</dd> - <dt><strong id="attr-coords"><code>coords</code></strong></dt> + <dt><strong><code>coords</code></strong></dt> <dd>L'attribut <code>coords</code> détaille les coordonnées de l'attribut <code><a href="#attr-shape">shape</a></code> en taille, forme et placement d'un élément <code><area></code>. <ul> <li><code>rect</code> : la valeur est <code><var>x1,y1,x2,y2</var></code>. La valeur spécifie les coordonnées du coin supérieur gauche et inférieur droit du rectangle. @@ -72,15 +72,15 @@ browser-compat: html.elements.area <li><code>default</code> : définit la région entière.</li> </ul> Les valeurs sont exprimées en nombre de pixels CSS.</dd> - <dt><strong id="attr-download"><code>download</code></strong></dt> + <dt><strong><code>download</code></strong></dt> <dd>Cet attribut, s'il est présent, indique que l'auteur souhaite que l'hyperlien soit utilisé pour télécharger une ressource. Voir <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> pour une description complète de l'attribut <a href="/fr/docs/Web/HTML/Element/a#attr-download"><code>download</code></a>.</dd> - <dt><strong id="attr-href"><code>href</code></strong></dt> + <dt><strong><code>href</code></strong></dt> <dd>Le lien hypertexte porté par la zone d'intérêt. Ce doit être une URL valide. Cet attribut peut être absent et dans ce cas, la zone d'intérêt ne représente pas de lien hypertexte.</dd> - <dt><strong id="attr-hreflang"><code>hreflang</code></strong></dt> + <dt><strong><code>hreflang</code></strong></dt> <dd>Cet attribut indique la langue du contenu vers lequel le lien renvoie. Les valeurs autorisées pour cet attribut sont définies par <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Cet attribut doit uniquement être utilisé lorsque <code>href</code> est présent.</dd> - <dt><strong id="attr-ping"><code>ping</code></strong></dt> + <dt><strong><code>ping</code></strong></dt> <dd>Cet attribut contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes HTTP <a href="/fr/docs/Web/HTTP/Methods/POST"><code>POST</code></a> dont le corps vaut <code>PING</code> lors du clic sur le lien. Les requêtes sont envoyées en arrière-plan. Cet attribut est généralement utilisé à des fins de pistage.</dd> - <dt><strong id="attr-referrerpolicy"><code>referrerpolicy</code></strong> {{experimental_inline}}</dt> + <dt><strong><code>referrerpolicy</code></strong> {{experimental_inline}}</dt> <dd>Une chaîne de caractères qui indique le référent (<em>referrer</em>) à utiliser lors de la récupération de la ressource : <ul> <li>« <code>no-referrer</code> » indique que l'en-tête <code>Referer</code> ne sera pas envoyé.</li> @@ -90,11 +90,11 @@ browser-compat: html.elements.area <li>« <code>unsafe-url</code> » indique que le référent envoyé inclura l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom d'utilisateur). Ce cas n'est pas considéré comme sûr, car il peut laisser fuiter des origines et des chemins de ressources protégées par TLS vers des origines non-sécurisées.</li> </ul> </dd> - <dt><strong id="attr-rel"><code>rel</code></strong></dt> + <dt><strong><code>rel</code></strong></dt> <dd>Pour les ancres contenant l'attribut <code><strong>href</strong></code>, cet attribut définit la relation entre l'objet ciblé et l'objet lié. La valeur est une liste des <a href="/fr/docs/Web/HTML/Link_types">différentes relations</a> dont les valeurs sont séparées par des espaces. Les valeurs et leurs significations peuvent être enregistrées par une autorité jugée utile par l'auteur du document. La valeur par défaut est la relation vide. Cet attribut doit uniquement être utilisé si l'attribut <a href="#attr-href"><code>href</code></a> est présent.</dd> - <dt><strong id="attr-shape"><code>shape</code></strong></dt> + <dt><strong><code>shape</code></strong></dt> <dd>La forme de la zone d'intérêt. Les spécifications HTML5 et HTML4 définissent les valeurs <code>rect</code> (zone rectangulaire), <code>circle</code> (zone circulaire), <code>poly</code> (zone polygonale) et <code>default</code> (indiquant toute la zone). Beacuoup de navigateurs, comme Internet Explorer 4 et ultérieur, supportent les valeurs <code>circ</code>, <code>polygon</code> et <code>rectangle</code> pour l'attribut <code>shape</code>, mais ces valeurs ne sont pas standard.</dd> - <dt><strong id="attr-target"><code>target</code></strong></dt> + <dt><strong><code>target</code></strong></dt> <dd>Cet attribut dans quel <em>contexte de navigation</em> afficher la ressource liée. Les mots-clés peuvent avoir les significations suivantes : <ul> <li><code>_self</code> (valeur par défaut) : Charge la réponse dans le contexte de navigation actuel.</li> @@ -104,9 +104,8 @@ browser-compat: html.elements.area </ul> <p>Cet attribut doit uniquement être utilisé si l'attribut <a href="#attr-href"><code>href</code></a> est présent.</p> - <div class="notecard note"> - <p><b>Note :</b></p> - <p>La définition de <code>target="_blank"</code> sur les éléments <code><area></code> fournit implicitement le même comportement <code>rel</code> que la définition de <code><a href="/fr/docs/Web/HTML/Link_types/noopener">rel="noopener"</a></code> qui ne définit pas <code>window.opener</code>. Voir la <a href="#browser_compatibility">compatibilité des navigateurs</a> pour les informations sur son support.</p> + <div class="note"> + <p><strong>Note :</strong>La définition de <code>target="_blank"</code> sur les éléments <code><area></code> fournit implicitement le même comportement <code>rel</code> que la définition de <code><a href="/fr/docs/Web/HTML/Link_types/noopener">rel="noopener"</a></code> qui ne définit pas <code>window.opener</code>. Voir la <a href="#browser_compatibility">compatibilité des navigateurs</a> pour les informations sur son support.</p> </div> </dd> </dl> @@ -114,18 +113,17 @@ browser-compat: html.elements.area <h3 id="deprecated_attributes">Attributs dépréciés ou obsolètes</h3> <dl> - <dt><strong id="attr-name"><code>name</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>name</code></strong> {{deprecated_inline}}</dt> <dd>Définit un nom pour la zone sur laquelle on peut cliquer afin que cet élément puisse être interprété par les navigateurs plus anciens.</dd> - <dt><strong id="attr-nohref"><code>nohref</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>nohref</code></strong> {{deprecated_inline}}</dt> <dd>Indique une absence d'hyperlien pour la zone d'intérêt. Cet attribut doit être présent si <strong>href</strong> ne l'est pas et <em>vice versa</em>. - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Cet attribut est obsolète en HTML5, ne pas utiliser l'attribut <code>href</code> suffit.</p> + <div class="note"> + <p><strong>Note :</strong>Cet attribut est obsolète en HTML5, ne pas utiliser l'attribut <code>href</code> suffit.</p> </div> </dd> - <dt><strong id="attr-tabindex"><code>tabindex</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>tabindex</code></strong> {{deprecated_inline}}</dt> <dd>Une valeur numérique définissant l'ordre de la zone d'intérêt parmi les différentes étiquettes. Cet attribut est un attribut universel avec HTML5.</dd> - <dt><strong id="attr-type"><code>type</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>type</code></strong> {{deprecated_inline}}</dt> <dd>Sans effet car ignoré par les navigateurs.</dd> </dl> diff --git a/files/fr/web/html/element/article/index.html b/files/fr/web/html/element/article/index.html index 9ac036eac1..ebc68dab68 100644 --- a/files/fr/web/html/element/article/index.html +++ b/files/fr/web/html/element/article/index.html @@ -12,7 +12,7 @@ browser-compat: html.elements.article --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément <strong><code><article></code></strong> représente une composition autonome dans un document, une page, une application ou un site, destinée à être distribuée ou réutilisée de manière indépendante (par exemple, dans le cadre d'une syndication). Exemples : un message de forum, un article de magazine ou de journal, ou un article de blog, une fiche produit, un commentaire soumis par un utilisateur, un widget ou gadget interactif, ou tout autre élément de contenu indépendant.</p> +<p>L'élément <strong><code><article></code></strong> représente une composition autonome dans un document, une page, une application ou un site, destinée à être distribuée ou réutilisée de manière indépendante (par exemple, dans le cadre d'une syndication). Exemples : un message de forum, un article de magazine ou de journal, ou un article de blog, une fiche produit, un commentaire soumis par un utilisateur, un widget ou gadget interactif, ou tout autre élément de contenu indépendant.</p> <div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div> diff --git a/files/fr/web/html/element/aside/index.html b/files/fr/web/html/element/aside/index.html index 6917f99223..07961c0af4 100644 --- a/files/fr/web/html/element/aside/index.html +++ b/files/fr/web/html/element/aside/index.html @@ -16,7 +16,7 @@ browser-compat: html.elements.aside --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément <strong><code><aside></code></strong> (en français, « aparté ») représente une partie d'un document dont le contenu n'a qu'un rapport indirect avec le contenu principal du document. Les apartés sont fréquemment présents sous la forme d'encadrés ou de boîtes de légende.</p> +<p>L'élément <strong><code><aside></code></strong> (en français, « aparté ») représente une partie d'un document dont le contenu n'a qu'un rapport indirect avec le contenu principal du document. Les apartés sont fréquemment présents sous la forme d'encadrés ou de boîtes de légende.</p> <div>{{EmbedInteractiveExample("pages/tabbed/aside.html", "tabbed-standard")}}</div> diff --git a/files/fr/web/html/element/audio/index.html b/files/fr/web/html/element/audio/index.html index 17d0fba0fd..98e125bcc3 100644 --- a/files/fr/web/html/element/audio/index.html +++ b/files/fr/web/html/element/audio/index.html @@ -20,7 +20,7 @@ browser-compat: html.elements.audio --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><audio></code></strong> est utilisé afin d'intégrer un contenu sonore dans un document. Il peut contenir une ou plusieurs sources audio représentées avec l'attribut <code>src</code> ou l'élément <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a> : le navigateur choisira celle qui convient le mieux. Il peut également être la destination de médias diffusés en continu, en utilisant un <a href="/fr/docs/Web/API/MediaStream"><code>MediaStream</code></a>.</p> +<p>L'élément HTML <strong><code><audio></code></strong> est utilisé afin d'intégrer un contenu sonore dans un document. Il peut contenir une ou plusieurs sources audio représentées avec l'attribut <code>src</code> ou l'élément <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a> : le navigateur choisira celle qui convient le mieux. Il peut également être la destination de médias diffusés en continu, en utilisant un <a href="/fr/docs/Web/API/MediaStream"><code>MediaStream</code></a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}</div> @@ -33,17 +33,16 @@ browser-compat: html.elements.audio <p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p> <dl> - <dt><strong id="attr-autoplay"><code>autoplay</code></strong></dt> + <dt><strong><code>autoplay</code></strong></dt> <dd>Un attribut booléen : s'il est spécifié, l'audio commencera automatiquement la lecture dès qu'il pourra le faire, sans attendre la fin du téléchargement de l'ensemble du fichier audio. - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Les sites qui diffusent automatiquement de l'audio (ou des vidéos avec une piste audio) peuvent s'avérer désagréables pour les utilisateurs et doivent donc être évités dans la mesure du possible. Si vous devez offrir une fonctionnalité de lecture automatique, vous devez la soumettre au choix de l'utilisateur. Cependant, cela peut être utile lors de la création d'éléments médias dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur. Consultez notre <a href="/fr/docs/Web/Media/Autoplay_guide">guide sur la lecture automatique</a> pour obtenir des informations supplémentaires sur la manière d'utiliser correctement la fonction <i>autoplay</i>.</p> + <div class="note"> + <p><strong>Note :</strong>Les sites qui diffusent automatiquement de l'audio (ou des vidéos avec une piste audio) peuvent s'avérer désagréables pour les utilisateurs et doivent donc être évités dans la mesure du possible. Si vous devez offrir une fonctionnalité de lecture automatique, vous devez la soumettre au choix de l'utilisateur. Cependant, cela peut être utile lors de la création d'éléments médias dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur. Consultez notre <a href="/fr/docs/Web/Media/Autoplay_guide">guide sur la lecture automatique</a> pour obtenir des informations supplémentaires sur la manière d'utiliser correctement la fonction <i>autoplay</i>.</p> </div> </dd> - <dt><strong id="attr-controls"><code>controls</code></strong></dt> + <dt><strong><code>controls</code></strong></dt> <dd>Si l'attribut est présent, le navigateur affichera des contrôles pour que l'utilisateur puisse gérer la lecture, le volume, et le déplacement du curseur de lecture.</dd> - <dt><strong id="attr-crossorigin"><code>crossorigin</code></strong></dt> + <dt><strong><code>crossorigin</code></strong></dt> <dd>Cet attribut à valeur contrainte indique comment le CORS doit être utilisé afin de récupérer la ressource. <a href="/fr/docs/Web/HTML/CORS_enabled_image">Les ressources utilisant le CORS</a> peuvent être réutilisées dans un élément <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> sans corrompre celui-ci. Les valeurs autorisées pour cet attribut sont : <dl> <dt><code>anonymous</code></dt> @@ -52,18 +51,17 @@ browser-compat: html.elements.audio <dd>Une requête multi-origine est envoyée avec une information d'authentification (c'est-à-dire avec un en-tête HTTP <code>Origin:</code> qui contient un cookie, un certificat ou effectuant une authentification HTTP).</dd> </dl> Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS et empêche ainsi d'utiliser la ressource dans un <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a>. Si la valeur fournie est invalide, elle sera considérée comme <code>anonymous</code>. Voir <a href="/fr/docs/Web/HTML/Attributes/crossorigin">Paramétrage des attributs relatifs au CORS</a> pour plus d'informations.</dd> - <dt><strong id="attr-disableRemotePlayback"><code>disableRemotePlayback</code></strong> {{experimental_inline}}</dt> + <dt><strong><code>disableRemotePlayback</code></strong> {{experimental_inline}}</dt> <dd>Un attribut booléen utilisé pour désactiver la capacité de lecture à distance dans les appareils qui sont connectés à l'aide de câbles (HDMI, DVI, etc.) et sans fil (Miracast, Chromecast, DLNA, AirPlay, etc.). Voir <a href="https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute">cette proposition de spécification</a> pour plus d'informations. - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Dans Safari, vous pouvez utiliser <a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html"><code>x-webkit-airplay="deny"</code></a> comme solution de repli.</p> + <div class="note"> + <p><strong>Note :</strong>Dans Safari, vous pouvez utiliser <a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html"><code>x-webkit-airplay="deny"</code></a> comme solution de repli.</p> </div> </dd> - <dt><strong id="attr-loop"><code>loop</code></strong></dt> + <dt><strong><code>loop</code></strong></dt> <dd>Un attribut booléen. S'il est renseigné, la lecture du fichier se fera en boucle.</dd> - <dt><strong id="attr-muted"><code>muted</code></strong></dt> + <dt><strong><code>muted</code></strong></dt> <dd>Un attribut booléen, indiquant si le son de l'élément audio est initialement coupé. Sa valeur par défaut est <code>false</code>.</dd> - <dt><strong id="attr-preload"><code>preload</code></strong></dt> + <dt><strong><code>preload</code></strong></dt> <dd>Cet attribut indique au navigateur ce que l'auteur du code html pense de l'utilisation optimale de cet élément. Il accepte uniquement les valeurs suivantes :<br> <ul> @@ -75,15 +73,15 @@ browser-compat: html.elements.audio <p>La valeur par défaut peut varier d'un navigateur à l'autre. Les spécifications recommandent la valeur <code>metadata</code>.</p> - <div class="notecard note"> - <p><b>Note :</b></p> + <div class="note"> + <p><strong>Note :</strong></p> <ul> <li>L'attribut <code>autoplay</code> a la priorité sur <code>preload</code>. Si <code>autoplay</code> est spécifié, le navigateur devrait évidemment commencer à télécharger l'audio pour le lire.</li> <li>La spécification n'oblige pas le navigateur à suivre la valeur de cet attribut ; il s'agit d'une simple indication.</li> </ul> </div> </dd> - <dt><strong id="attr-src"><code>src</code></strong></dt> + <dt><strong><code>src</code></strong></dt> <dd>L'URL du fichier audio à intégrer. Cet élément est soumis aux <a href="/fr/docs/Web/HTTP/CORS">contrôles d'accès HTTP</a>. Cet attribut est facultatif ; vous pouvez utiliser l'élément <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a> dans le bloc audio pour spécifier l'audio à intégrer.</dd> </dl> @@ -230,9 +228,8 @@ browser-compat: html.elements.audio <dd>Un écouteur <code>addtrack</code> peut être ajouté à cet objet <a href="/fr/docs/Web/API/TextTrackList"><code>TextTrackList</code></a> afin d'alerter lorsque de nouvelles pistes de texte sont ajoutées à l'élément.</dd> </dl> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Bien qu'on parle ici d'un élément <code><audio></code>, il est possible qu'un tel élément possède des pistes vidéo et des pistes texte bien que la cohérence des interfaces puisse être mise à mal.</p> +<div class="note"> + <p><strong>Note :</strong>Bien qu'on parle ici d'un élément <code><audio></code>, il est possible qu'un tel élément possède des pistes vidéo et des pistes texte bien que la cohérence des interfaces puisse être mise à mal.</p> </div> <p>Ainsi, on pourra utiliser un fragment de code analogue à celui qui suit pour détecter si de nouvelles pistes sont ajoutées ou supprimées d'un élément <code><audio></code> :</p> diff --git a/files/fr/web/html/element/b/index.html b/files/fr/web/html/element/b/index.html index 41415effc5..22ae6d5ce3 100644 --- a/files/fr/web/html/element/b/index.html +++ b/files/fr/web/html/element/b/index.html @@ -16,7 +16,7 @@ browser-compat: html.elements.b --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><b></code></strong> permet d'attirer l'attention du lecteur sur un contenu qui n'a pas, pour autant, d'importance significative. Anciennement utilisé pour mettre le texte en gras. Cet élément ne doit pas être utilisé pour mettre en forme des éléments, c'est la propriété CSS <a href="/fr/docs/Web/CSS/font-weight"><code>font-weight</code></a> qu'il faut utiliser. Si l'élément est d'une importance particulière, on utilisera l'élément HTML <a href="/fr/docs/Web/HTML/Element/strong"><code><strong></code></a>.</p> +<p>L'élément HTML <strong><code><b></code></strong> permet d'attirer l'attention du lecteur sur un contenu qui n'a pas, pour autant, d'importance significative. Anciennement utilisé pour mettre le texte en gras. Cet élément ne doit pas être utilisé pour mettre en forme des éléments, c'est la propriété CSS <a href="/fr/docs/Web/CSS/font-weight"><code>font-weight</code></a> qu'il faut utiliser. Si l'élément est d'une importance particulière, on utilisera l'élément HTML <a href="/fr/docs/Web/HTML/Element/strong"><code><strong></code></a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/b.html", "tabbed-shorter")}}</div> diff --git a/files/fr/web/html/element/base/index.html b/files/fr/web/html/element/base/index.html index 151e595f3e..9a88ff2286 100644 --- a/files/fr/web/html/element/base/index.html +++ b/files/fr/web/html/element/base/index.html @@ -12,7 +12,7 @@ browser-compat: html.elements.base --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément <strong><code><base></code></strong> définit l'URL de base à utiliser pour recomposer toutes les URL relatives contenues dans un document. Il ne peut y avoir qu'un seul élément <code><base></code> au sein d'un document.</p> +<p>L'élément <strong><code><base></code></strong> définit l'URL de base à utiliser pour recomposer toutes les URL relatives contenues dans un document. Il ne peut y avoir qu'un seul élément <code><base></code> au sein d'un document.</p> <p>Il est possible d'accéder à l'URL de base d'un document via un script en utilisant <a href="/fr/docs/Web/API/Node/baseURI"><code>Node.baseURI</code></a>. Si le document ne possède pas d'élément <code><base></code>; la base par défaut pour la composition des URL sera l'URL courante.</p> @@ -53,18 +53,17 @@ browser-compat: html.elements.base <p>Les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a> peuvent être utilisés sur cet élément.</p> -<div class="notecard warning"> - <p><b>Attention</b></p> - <p>Si l'un des attributs suivants est spécifié, cet élément <strong>doit</strong> venir avant d'autres éléments dont les valeurs d'attribut sont des URL, comme l'attribut <code>href</code> de <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>.</p> +<div class="warning"> + <p><strong>Attention :</strong> Si l'un des attributs suivants est spécifié, cet élément <strong>doit</strong> venir avant d'autres éléments dont les valeurs d'attribut sont des URL, comme l'attribut <code>href</code> de <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>.</p> </div> <dl> - <dt><strong id="attr-href"><code>href</code></strong></dt> + <dt><strong><code>href</code></strong></dt> <dd>L'URL de base à utiliser afin de recomposer les URL relatives contenues dans le document. Si cet attribut est défini, cet élément doit être présent avant les éléments dont les attributs sont des URL.<br> Les URI absolues et relatives sont autorisées (voir la note ci-après).</dd> - <dt><strong id="attr-target"><code>target</code></strong></dt> - <dd>Un <strong>mot-clé</strong> ou un <strong>nom défini par l'auteur</strong> du <a href="/fr/docs/Glossary/Browsing_context">contexte de navigation</a> par défaut pour afficher les résultats de la navigation à partir des éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a> ou <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> sans attributs <code>target</code> explicites.</dd> - <dd>Les mots-clés suivants ont des significations particulières : + <dt><strong><code>target</code></strong></dt> + <dd><p>Un <strong>mot-clé</strong> ou un <strong>nom défini par l'auteur</strong> du <a href="/fr/docs/Glossary/Browsing_context">contexte de navigation</a> par défaut pour afficher les résultats de la navigation à partir des éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a> ou <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> sans attributs <code>target</code> explicites.</p> + <p>Les mots-clés suivants ont des significations particulières :</p> <ul> <li><code>_self</code> : Charge le résultat dans le contexte de navigation courant. C'est la valeur par défaut de l'attribut s'il n'est pas utilisé.</li> <li><code>_blank</code> : Charge le résultat dans un nouveau contexte de navigation.</li> diff --git a/files/fr/web/html/element/basefont/index.html b/files/fr/web/html/element/basefont/index.html index adab60dbcf..85422a4f89 100644 --- a/files/fr/web/html/element/basefont/index.html +++ b/files/fr/web/html/element/basefont/index.html @@ -16,12 +16,11 @@ browser-compat: html.elements.basefont --- <div>{{HTMLRef}}</div> -<div class="notecard deprecated"> - <p><b>Obsolète</b></p> - <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> </div> -<p class="summary">L'élément HTML <strong><code><basefont></code></strong> définit la police par défaut (taille, fonte, couleur) pour les éléments qui sont des descendants de cet élément. La taille de la police utilisée peut ensuite varier relativement à cette taille de base grâce à l'élément <a href="/fr/docs/Web/HTML/Element/font"><code><font></code></a>.</p> +<p>L'élément HTML <strong><code><basefont></code></strong> définit la police par défaut (taille, fonte, couleur) pour les éléments qui sont des descendants de cet élément. La taille de la police utilisée peut ensuite varier relativement à cette taille de base grâce à l'élément <a href="/fr/docs/Web/HTML/Element/font"><code><font></code></a>.</p> <p>N'utilisez pas cet élément, mais plutôt les propriétés CSS telles que <a href="/fr/docs/Web/CSS/font"><code>font</code></a>, <a href="/fr/docs/Web/CSS/font-family"><code>font-family</code></a>, <a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a> et <a href="/fr/docs/Web/CSS/color"><code>color</code></a> pour modifier la configuration de la police d'un élément et de son contenu.</p> @@ -30,11 +29,11 @@ browser-compat: html.elements.basefont <p>Comme tous les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt><strong id="attr-color"><code>color</code></strong></dt> + <dt><strong><code>color</code></strong></dt> <dd>Cet attribut définit la couleur du texte grâce à une couleur nommée ou à une couleur définie dans un format hexadécimal #RRGGBB.</dd> - <dt><strong id="attr-face"><code>face</code></strong></dt> + <dt><strong><code>face</code></strong></dt> <dd>Cet attribut contient une liste d'un ou plusieurs noms de police. Le texte du document, dans son style par défaut, est rendu avec la première police prise en charge par le navigateur du client. Si aucune police listée ne se trouve sur le système local, le navigateur utilise la police proportionnelle ou à largeur fixe du système.</dd> - <dt><strong id="attr-size"><code>size</code></strong></dt> + <dt><strong><code>size</code></strong></dt> <dd>Cet attribut définit la taille de la police avec une valeur numérique ou relative. Les valeurs numériques vont de 1 à 7 ; 1 étant la plus petite et 3 la taille par défaut.</dd> </dl> diff --git a/files/fr/web/html/element/bdi/index.html b/files/fr/web/html/element/bdi/index.html index 858ece9f1f..4fa34fd952 100644 --- a/files/fr/web/html/element/bdi/index.html +++ b/files/fr/web/html/element/bdi/index.html @@ -26,7 +26,7 @@ browser-compat: html.elements.bdi --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément <strong><code><bdi></code></strong> (ou élément d'isolation de texte bidirectionnel) isole une portée (<em>span</em>) de texte pouvant être formatée dans une direction différente de celle du texte qui l'entoure. Cela permet, par exemple, de présenter correctement une citation en arabe (écrit de droite à gauche) au sein d'un texte écrit en français (écrit de gauche à droite).</p> +<p>L'élément <strong><code><bdi></code></strong> (ou élément d'isolation de texte bidirectionnel) isole une portée (<em>span</em>) de texte pouvant être formatée dans une direction différente de celle du texte qui l'entoure. Cela permet, par exemple, de présenter correctement une citation en arabe (écrit de droite à gauche) au sein d'un texte écrit en français (écrit de gauche à droite).</p> <div>{{EmbedInteractiveExample("pages/tabbed/bdi.html", "tabbed-standard")}}</div> @@ -94,71 +94,66 @@ browser-compat: html.elements.bdi <h2 id="examples">Exemples</h2> -<h3 id="no_<bdi>_with_only_ltr">Texte de gauche à droite uniquement, sans <bdi></h3> +<h3 id="Gauche_à_droite_sans_bdi">Gauche à droite sans bdi</h3> <p>Cet exemple affiche les gagnants d'une compétition grâce à des éléments <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a>. Ici, les noms ne s'écrivent que de gauche à droite et le résultat s'affiche correctement :</p> -<div id="bdi-sample-1"> <pre class="brush: html"><ul> <li><span class="name">Henrietta Boffin</span> - 1<sup>re</sup> place</li> <li><span class="name">Jerry Cruncher</span> - 2<sup>e</sup> place</li> </ul></pre> -<div class="hidden"> -<pre class="brush: css">body { + +<pre class="brush: css hidden">body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; }</pre> -</div> -</div> -<div>{{EmbedLiveSample("bdi-sample-1", "100%", 150)}}</div> + +<p>{{EmbedLiveSample("Gauche_à_droite_sans_bdi", "100%", 150)}}</p> <h3 id="no_<bdi>_with_rtl_text">Texte sans <bdi> avec deux directionnalités</h3> <p>Cela fonctionne sans problème tant que les noms s'écrivent de gauche à droite. Lorsqu'on insère un nom écrit de droite à gauche, la partie « <code>- 1</code> » sera captée par le texte en RTL et le résultat sera confus :</p> -<div id="bdi-sample-2"> +<h4>Exemple sans bidi</h4> <pre class="brush: html"><ul> <li><span class="name">اَلأَعْشَى</span> - 1<sup>re</sup> place</li> <li><span class="name">Jerry Cruncher</span> - 2<sup>e</sup> place</li> </ul></pre> -<div class="hidden"> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; }</pre> -</div> -</div> -<div>{{EmbedLiveSample("bdi-sample-2", "100%", 150)}}</div> + +<p>{{EmbedLiveSample("Exemple_sans_bidi", "100%", 150)}}</p> <h3 id="using_<bdi>_with_ltr_and_rtl_text">Texte avec <bdi> et deux directionnalités</h3> <p>Pour éviter cet écueil, on pourra utiliser <code><bdi></code> pour séparer le contenu :</p> -<div id="bdi-sample-3"> +<h4>Exemple avec bidi</h4> + <pre class="brush: html"><ul> <li><bdi class="name">اَلأَعْشَى</bdi> - 1<sup>re</sup> place</li> <li><bdi class="name">Jerry Cruncher</bdi> - 2<sup>e</sup> place</li> </ul></pre> -<div class="hidden"> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; }</pre> -</div> -</div> -<div>{{EmbedLiveSample("bdi-sample-3", "100%", 150)}}</div> + +<p>{{EmbedLiveSample("Exemple_avec_bidi", "100%", 150)}}</p> <h2 id="specifications">Spécifications</h2> diff --git a/files/fr/web/html/element/bdo/index.html b/files/fr/web/html/element/bdo/index.html index 4ba543103c..67b99e390c 100644 --- a/files/fr/web/html/element/bdo/index.html +++ b/files/fr/web/html/element/bdo/index.html @@ -24,7 +24,7 @@ browser-compat: html.elements.bdo --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><bdo></code></strong> (pour élément de remplacement du texte bidirectionnel) est utilisé afin d'outrepasser la direction du texte. Cela permet d'imposer une direction donnée à un texte. L'orientation du texte est inversée mais pas celle des caractères.</p> +<p>L'élément HTML <strong><code><bdo></code></strong> (pour élément de remplacement du texte bidirectionnel) est utilisé afin d'outrepasser la direction du texte. Cela permet d'imposer une direction donnée à un texte. L'orientation du texte est inversée mais pas celle des caractères.</p> <div>{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}</div> @@ -68,7 +68,7 @@ browser-compat: html.elements.bdo <p>Comme pour tous les éléments, on peut appliquer <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt><strong id="attr-dir"><code>dir</code></strong></dt> + <dt><strong><code>dir</code></strong></dt> <dd>La direction du texte au sein de l'élément. Cet attribut peut valoir : <ul> <li><code>ltr</code> : pour un texte allant de gauche à droite (<i>left-to-right</i>).</li> diff --git a/files/fr/web/html/element/bgsound/index.html b/files/fr/web/html/element/bgsound/index.html index be61ed23e8..0839e6268b 100644 --- a/files/fr/web/html/element/bgsound/index.html +++ b/files/fr/web/html/element/bgsound/index.html @@ -16,28 +16,26 @@ browser-compat: html.elements.bgsound --- <div>{{HTMLRef}}</div> -<div class="notecard deprecated"> - <p><b>Obsolète</b></p> - <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> </div> -<p class="summary">L'élément HTML <strong><code><bgsound></code></strong> (pour <em>background sound</em> ou « son d'arrière-plan ») est un élément défini par Internet Explorer qui permet d'associer un son d'ambiance à une page.</p> +<p>L'élément HTML <strong><code><bgsound></code></strong> (pour <em>background sound</em> ou « son d'arrière-plan ») est un élément défini par Internet Explorer qui permet d'associer un son d'ambiance à une page.</p> -<div class="notecard warning"> - <p><b>Attention :</b></p> - <p><strong></strong>Cet élément n'est pas standard et ne doit pas être utilisé !</strong> Pour intégrer du son à une page web, on utilisera l'élément <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cet élément n'est pas standard et ne doit pas être utilisé ! Pour intégrer du son à une page web, on utilisera l'élément <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>.</p> </div> <h2 id="attributes">Attributs</h2> <dl> - <dt><strong id="attr-balance"><code>balance</code></strong></dt> + <dt><strong><code>balance</code></strong></dt> <dd>Cet attribut accepte un nombre entre -10 000 et +10 000, qui déterminera comment le volume sera réparti entre les hauts-parleurs (ou les écouteurs).</dd> - <dt><strong id="attr-loop"><code>loop</code></strong></dt> + <dt><strong><code>loop</code></strong></dt> <dd>Cet attribut indique le nombre de fois que le son doit être joué, grâce à une valeur numérique ou avec le mot-clé <code>infinite</code> (infini).</dd> - <dt><strong id="attr-src"><code>src</code></strong></dt> + <dt><strong><code>src</code></strong></dt> <dd>Cet attribut indique l'URL du fichier sonore qui doit être joué. Il doit être d'un des types suivants : .wav, .au, ou .mid.</dd> - <dt><strong id="attr-volume"><code>volume</code></strong></dt> + <dt><strong><code>volume</code></strong></dt> <dd>Cet attribut accepte un nombre entre -10 000 et 0 qui déterminera le volume du son.</dd> </dl> diff --git a/files/fr/web/html/element/big/index.html b/files/fr/web/html/element/big/index.html index 9ce6c4aa2c..a4309d4738 100644 --- a/files/fr/web/html/element/big/index.html +++ b/files/fr/web/html/element/big/index.html @@ -12,16 +12,14 @@ browser-compat: html.elements.big --- <div>{{HTMLRef}}</div> -<div class="notecard deprecated"> - <p><b>Obsolète</b></p> - <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> </div> -<p class="summary">L'élément HTML <strong><code><big></code></strong> (gros) augmente d'une taille la police du texte de l'élément (il permet par exemple de passer de <code>small</code> à <code>medium</code>, ou de <code>large</code> à <code>x-large</code>) jusqu'à atteindre la taille maximale autorisée par le navigateur.</p> +<p>L'élément HTML <strong><code><big></code></strong> (gros) augmente d'une taille la police du texte de l'élément (il permet par exemple de passer de <code>small</code> à <code>medium</code>, ou de <code>large</code> à <code>x-large</code>) jusqu'à atteindre la taille maximale autorisée par le navigateur.</p> -<div class="notecard note"> - <p><b>Note d'utilisation :</b></p> - <p>Cet élément est purement stylistique. Il a été supprimé en HTML5 et ne doit plus être utilisé. Les développeurs web doivent utiliser les propriétés <a href="/fr/docs/Web/CSS">CSS</a> pour remplacer cet élément.</p> +<div class="note"> + <p><strong>Note :</strong> Cet élément est purement stylistique. Il a été supprimé en HTML5 et ne doit plus être utilisé. Les développeurs web doivent utiliser les propriétés <a href="/fr/docs/Web/CSS">CSS</a> pour remplacer cet élément.</p> </div> <h2 id="attributes">Attributs</h2> @@ -32,9 +30,8 @@ browser-compat: html.elements.big <p>Nous voyons ici des exemples montrant l'utilisation de <code><big></code> suivis d'un exemple montrant comment obtenir les mêmes résultats en utilisant plutôt la syntaxe CSS moderne.</p> -<h3 id="using_<big>">Utilisation de <code><big></code></h3> +<h3 id="Utilisation_de_big">Utilisation de <big></h3> -<div id="using_big"> <p>Dans cet exemple, on utilise l'élément obsolète <code><big></code> afin d'augmenter la taille du texte.</p> <h4 id="html">HTML</h4> @@ -43,10 +40,10 @@ browser-compat: html.elements.big C'est la première phrase. <big>Cette phrase entière phrase est en plus gros caractères.</big> </p></pre> -</div> + <h4 id="result">Résultat</h4> -<p>{{EmbedLiveSample("using_big", "", 110)}}</p> +<p>{{EmbedLiveSample("Utilisation_de_big", "", 110)}}</p> <h3 id="using_css_font-size">Utilisation de la propriété CSS <code>font-size</code></h3> @@ -74,8 +71,7 @@ browser-compat: html.elements.big <p>Cet élément implémente l'interface <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>.</p> <div class="note"> - <p><b>Note d'implémentation :</b></p> - <p>Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</p> + <p><strong>Note :</strong> Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</p> </div> <h2 id="specifications">Spécifications</h2> diff --git a/files/fr/web/html/element/blink/index.html b/files/fr/web/html/element/blink/index.html index dcd82c1270..870656bac2 100644 --- a/files/fr/web/html/element/blink/index.html +++ b/files/fr/web/html/element/blink/index.html @@ -13,16 +13,14 @@ browser-compat: html.elements.blink --- <div>{{HTMLRef}}</div> -<div class="notecard deprecated"> - <p><b>Obsolète</b></p> - <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> </div> -<p class="summary">L'élément HTML <strong><code><blink></code></strong> (N.D.T le verbe <i>blink</i> signifie « clignoter ») est un élément non-standard faisant clignoter le texte qu'il contient.</p> +<p>L'élément HTML <strong><code><blink></code></strong> (N.D.T le verbe <i>blink</i> signifie « clignoter ») est un élément non-standard faisant clignoter le texte qu'il contient.</p> -<div class="notecard warning"> - <p><b>Attention :</b></p> - <p>Ne pas utiliser cet élément qui n'est pas standard et qui est obsolète. Le clignotement de texte est contraire à la plupart des standards d'accessibilité, la spécification CSS permet donc aux navigateurs d'ignorer la valeur <code>blink</code>.</p> +<div class="warning"> + <p><strong>Attention :</strong> Ne pas utiliser cet élément qui n'est pas standard et qui est obsolète. Le clignotement de texte est contraire à la plupart des standards d'accessibilité, la spécification CSS permet donc aux navigateurs d'ignorer la valeur <code>blink</code>.</p> </div> <h2 id="dom_interface">Interface DOM</h2> diff --git a/files/fr/web/html/element/blockquote/index.html b/files/fr/web/html/element/blockquote/index.html index 517632a938..e86f94caa2 100644 --- a/files/fr/web/html/element/blockquote/index.html +++ b/files/fr/web/html/element/blockquote/index.html @@ -17,7 +17,7 @@ browser-compat: html.elements.blockquote --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><blockquote></code></strong> (qui signifie <em>bloc de citation</em>) indique que le texte contenu dans l'élément est une citation longue. Le texte est généralement affiché avec une indentation (voir <a href="#usage_notes">les notes</a> ci-après). Une URL indiquant la source de la citation peut être donnée grâce à l'attribut <strong><code>cite</code></strong> tandis qu'un texte représentant la source peut être donné via l'élément <a href="/fr/docs/Web/HTML/Element/cite"><code><cite></code></a>.</p> +<p>L'élément HTML <strong><code><blockquote></code></strong> (qui signifie <em>bloc de citation</em>) indique que le texte contenu dans l'élément est une citation longue. Le texte est généralement affiché avec une indentation (voir <a href="#usage_notes">les notes</a> ci-après). Une URL indiquant la source de la citation peut être donnée grâce à l'attribut <strong><code>cite</code></strong> tandis qu'un texte représentant la source peut être donné via l'élément <a href="/fr/docs/Web/HTML/Element/cite"><code><cite></code></a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/blockquote.html","tabbed-standard")}}</div> @@ -59,7 +59,7 @@ browser-compat: html.elements.blockquote <p>Comme pour tous les éléments HTML, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt><strong id="attr-cite"><code>cite</code></strong></dt> + <dt><strong><code>cite</code></strong></dt> <dd>Une URL qui désigne la source du document ou du message cité. Cet attribut est prévu pour signaler l'information expliquant le contexte ou la référence de la citation</dd> </dl> @@ -71,7 +71,7 @@ browser-compat: html.elements.blockquote <h2 id="example">Exemple</h2> -<p>Cet exemple démontre l'utilisation de l'élément <code><blockquote></code> pour citer un passage de <a href="https://datatracker.ietf.org/doc/html/rfc1149">RFC 1149</a>, <cite>A Standard for the Transmission of IP Datagrams on Avian Carriers.</cite></p> +<p>Cet exemple démontre l'utilisation de l'élément <code><blockquote></code> pour citer un passage de <a href="https://datatracker.ietf.org/doc/html/rfc1149">RFC 1149 <i lang="en">A Standard for the Transmission of IP Datagrams on Avian Carriers</i></a>.</p> <pre class="brush: html"><blockquote cite="https://datatracker.ietf.org/doc/html/rfc1149"> <p>Avian carriers can provide high delay, low diff --git a/files/fr/web/html/element/body/index.html b/files/fr/web/html/element/body/index.html index 79a181ecd4..2a6b8139d5 100644 --- a/files/fr/web/html/element/body/index.html +++ b/files/fr/web/html/element/body/index.html @@ -13,7 +13,7 @@ browser-compat: html.elements.body --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><body></code></strong> représente le contenu principal du document HTML. Il ne peut y avoir qu'un élément <code><body></code> par document.</p> +<p>L'élément HTML <strong><code><body></code></strong> représente le contenu principal du document HTML. Il ne peut y avoir qu'un élément <code><body></code> par document.</p> <table class="properties"> <tbody> @@ -58,61 +58,61 @@ browser-compat: html.elements.body <p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt><strong id="attr-alink"><code>alink</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>alink</code></strong> {{deprecated_inline}}</dt> <dd>La couleur du texte quand les liens hypertextes sont sélectionnés. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/color"><code>color</code></a> à la place avec la pseudo-classe <a href="/fr/docs/Web/CSS/:active"><code>:active</code></a>.</dd> - <dt><strong id="attr-background"><code>background</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>background</code></strong> {{deprecated_inline}}</dt> <dd>L'URI d'une image à utiliser en tant qu'arrière-plan. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/background"><code>background</code></a> à la place.</dd> - <dt><strong id="attr-bgcolor"><code>bgcolor</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>bgcolor</code></strong> {{deprecated_inline}}</dt> <dd>Couleur d'arrière-plan pour le document. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> sur l'élément à la place.</dd> - <dt><strong id="attr-bottommargin"><code>bottommargin</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>bottommargin</code></strong> {{deprecated_inline}}</dt> <dd>La marge à appliquer en bas du corps de la page. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/margin-bottom"><code>margin-bottom</code></a> sur l'élément.</dd> - <dt><strong id="attr-leftmargin"><code>leftmargin</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>leftmargin</code></strong> {{deprecated_inline}}</dt> <dd>La marge à appliquer à gauche du corps de la page. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/margin-left"><code>margin-left</code></a> à la place.</dd> - <dt><strong id="attr-link"><code>link</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>link</code></strong> {{deprecated_inline}}</dt> <dd>La couleur du texte à utiliser pour les liens non visités. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/color"><code>color</code></a> avec la pseudo-classe <a href="/fr/docs/Web/CSS/:link"><code>:link</code></a>.</dd> - <dt><strong id="attr-onafterprint"><code>onafterprint</code></strong></dt> + <dt><strong><code>onafterprint</code></strong></dt> <dd>Fonction à appeler après que l'utilisateur ait imprimé le document.</dd> - <dt><strong id="attr-onbeforeprint"><code>onbeforeprint</code></strong></dt> + <dt><strong><code>onbeforeprint</code></strong></dt> <dd>Fonction à appeler lorsque l'utilisateur lance une impression du document.</dd> - <dt><strong id="attr-onbeforeunload"><code>onbeforeunload</code></strong></dt> + <dt><strong><code>onbeforeunload</code></strong></dt> <dd>Fonction à appeler avant que le document ne disparaisse.</dd> - <dt><strong id="attr-onblur"><code>onblur</code></strong></dt> + <dt><strong><code>onblur</code></strong></dt> <dd>Fonction à appeler quand le document perd le focus.</dd> - <dt><strong id="attr-onerror"><code>onerror</code></strong></dt> + <dt><strong><code>onerror</code></strong></dt> <dd>Fonction à appeler quand le document n'arrive pas à se charger correctement.</dd> - <dt><strong id="attr-onfocus"><code>onfocus</code></strong></dt> + <dt><strong><code>onfocus</code></strong></dt> <dd>Fonction à appeler quand le document reçoit le focus.</dd> - <dt><strong id="attr-onhashchange"><code>onhashchange</code></strong></dt> + <dt><strong><code>onhashchange</code></strong></dt> <dd>Fonction à appeler quand le fragment (la partie commençant avec le caractère #) de l'adresse actuelle du document, a changé.</dd> - <dt><strong id="attr-onlanguagechange"><code>onlanguagechange</code></strong> {{experimental_inline}}</dt> + <dt><strong><code>onlanguagechange</code></strong> {{experimental_inline}}</dt> <dd>Fonction à appeler lorsque les langues préférées ont été modifiées.</dd> - <dt><strong id="attr-onload"><code>onload</code></strong></dt> + <dt><strong><code>onload</code></strong></dt> <dd>Fonction à appeler quand le document a fini de charger.</dd> - <dt><strong id="attr-onmessage"><code>onmessage</code></strong></dt> + <dt><strong><code>onmessage</code></strong></dt> <dd>Fonction à appeler quand le document a reçu un message.</dd> - <dt><strong id="attr-onoffline"><code>onoffline</code></strong></dt> + <dt><strong><code>onoffline</code></strong></dt> <dd>Fonction à appeler quand la connexion réseau est perdue.</dd> - <dt><strong id="attr-ononline"><code>ononline</code></strong></dt> + <dt><strong><code>ononline</code></strong></dt> <dd>Fonction à appeler quand la connexion réseau est restaurée.</dd> - <dt><strong id="attr-onpopstate"><code>onpopstate</code></strong></dt> + <dt><strong><code>onpopstate</code></strong></dt> <dd>Fonction à appeler quand l'utilisateur se déplace dans son historique de session.</dd> - <dt><strong id="attr-onredo"><code>onredo</code></strong></dt> + <dt><strong><code>onredo</code></strong></dt> <dd>Fonction à appeler quand l'utilisateur avance et refait un élément de l'historique de transaction.</dd> - <dt><strong id="attr-onresize"><code>onresize</code></strong></dt> + <dt><strong><code>onresize</code></strong></dt> <dd>Fonction à appeler quand le document a été redimensionné.</dd> - <dt><strong id="attr-onstorage"><code>onstorage</code></strong></dt> + <dt><strong><code>onstorage</code></strong></dt> <dd>Fonction à appeler quand la zone de stockage a changée.</dd> - <dt><strong id="attr-onundo"><code>onundo</code></strong></dt> + <dt><strong><code>onundo</code></strong></dt> <dd>Fonction à appeler quand l'utilisateur recule et défait l'historique de transaction.</dd> - <dt><strong id="attr-onunload"><code>onunload</code></strong></dt> + <dt><strong><code>onunload</code></strong></dt> <dd>Fonction à appeler quand le document disparait.</dd> - <dt><strong id="attr-rightmargin"><code>rightmargin</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>rightmargin</code></strong> {{deprecated_inline}}</dt> <dd>La marge à appliquer à droite du corps de la page. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/margin-right"><code>margin-right</code></a> sur l'élément à la place.</dd> - <dt><strong id="attr-text"><code>text</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>text</code></strong> {{deprecated_inline}}</dt> <dd>La couleur à utiliser pour la police du texte. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/color"><code>color</code></a> sur l'élément à la place.</dd> - <dt><strong id="attr-topmargin"><code>topmargin</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>topmargin</code></strong> {{deprecated_inline}}</dt> <dd>La marge à appliquer en haut du corps de la page. Cette méthohde n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/margin-top"><code>margin-top</code></a> sur l'élément à la place.</dd> - <dt><strong id="attr-vlink"><code>vlink</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>vlink</code></strong> {{deprecated_inline}}</dt> <dd>La couleur de texte pour les liens hypertextes visités. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/color"><code>color</code></a> avec la pseudo-classe <a href="/fr/docs/Web/CSS/:visited"><code>:visited</code></a>.</dd> </dl> diff --git a/files/fr/web/html/element/br/index.html b/files/fr/web/html/element/br/index.html index 9ee2f16922..0c5b97e35d 100644 --- a/files/fr/web/html/element/br/index.html +++ b/files/fr/web/html/element/br/index.html @@ -12,15 +12,14 @@ browser-compat: html.elements.br --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <code><strong><br></strong></code> crée un saut de ligne (un retour chariot) dans le texte. Il s'avère utile lorsque les sauts de ligne ont une importance (par exemple lorsqu'on écrit une adresse ou un poème).</p> +<p>L'élément HTML <code><strong><br></strong></code> crée un saut de ligne (un retour chariot) dans le texte. Il s'avère utile lorsque les sauts de ligne ont une importance (par exemple lorsqu'on écrit une adresse ou un poème).</p> <div>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</div> <p>Comme vous pouvez le voir dans l'exemple ci-dessus, un élément <code><br></code> est inclus à chaque point où nous voulons que le texte soit interrompu. Le texte après le <code><br></code> recommence au début de la ligne suivante du bloc de texte.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Attention, <code><br></code> ne doit pas être utilisé de façon abusive afin d'augmenter l'espace entre les lignes d'un texte. Pour cela, on utilisera la propriété <a href="/fr/docs/Web/CSS">CSS</a> <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> sur l'élément HTML <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a>.</p> +<div class="note"> + <p><strong>Note :</strong>Attention, <code><br></code> ne doit pas être utilisé de façon abusive afin d'augmenter l'espace entre les lignes d'un texte. Pour cela, on utilisera la propriété <a href="/fr/docs/Web/CSS">CSS</a> <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> sur l'élément HTML <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a>.</p> </div> <h2 id="attributes">Attributs</h2> @@ -30,7 +29,7 @@ browser-compat: html.elements.br <h3 id="deprecated_attributes">Attributs obsolètes</h3> <dl> - <dt><strong id="attr-clear"><code>clear</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>clear</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut indique où commencer la prochaine ligne après le saut de ligne.</dd> </dl> diff --git a/files/fr/web/html/element/button/index.html b/files/fr/web/html/element/button/index.html index 93bffb8e99..d99f03d0b7 100644 --- a/files/fr/web/html/element/button/index.html +++ b/files/fr/web/html/element/button/index.html @@ -13,7 +13,7 @@ browser-compat: html.elements.button --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément <strong><code><button></code></strong> représente un bouton cliquable, utilisé pour soumettre <a href="/fr/docs/Learn/Forms">des formulaires</a> ou n'importe où dans un document pour une fonctionnalité de bouton accessible et standard. Par défaut, les boutons HTML sont présentés dans un style ressemblant à la plate-forme d'exécution de <a href="/fr/docs/Glossary/User_agent">l'agent utilisateur</a>, mais vous pouvez modifier l'apparence des boutons avec <a href="/fr/docs/Web/CSS">CSS</a>.</p> +<p>L'élément <strong><code><button></code></strong> représente un bouton cliquable, utilisé pour soumettre <a href="/fr/docs/Learn/Forms">des formulaires</a> ou n'importe où dans un document pour une fonctionnalité de bouton accessible et standard. Par défaut, les boutons HTML sont présentés dans un style ressemblant à la plate-forme d'exécution de <a href="/fr/docs/Glossary/User_agent">l'agent utilisateur</a>, mais vous pouvez modifier l'apparence des boutons avec <a href="/fr/docs/Web/CSS">CSS</a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/button.html", "tabbed-shorter")}}</div> @@ -55,22 +55,22 @@ browser-compat: html.elements.button <p>Cet élément peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt><strong id="attr-autofocus"><code>autofocus</code></strong></dt> + <dt><strong><code>autofocus</code></strong></dt> <dd>Cet attribut booléen, <strong>qui ne doit être défini qu'une fois par document</strong>, indique au navigateur que cet élément doit automatiquement avoir le <a href="/fr/docs/Web/API/HTMLOrForeignElement/focus">focus</a> lorsque la page est chargée. Cela permet d'utiliser immédiatement ce bouton, via un raccourci clavier par exemple, sans avoir à cliquer au préalable dans le contrôle adéquat.</dd> - <dt><strong id="attr-autocomplete"><code>autocomplete</code></strong> {{non-standard_inline}}</dt> + <dt><strong><code>autocomplete</code></strong> {{non-standard_inline}}</dt> <dd>Pour l'élément <code><button></code>, cet attribut, propre à Firefox, n'est pas standard. Par défaut et à la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conserve l'état de désactivation d'un bouton</a> d'un élément <code><button></code> au fur et à mesure des chargements d'une page. Utiliser cet attribut avec la valeur <code>off</code> (i.e. <code>autocomplete="off"</code>) désactive cette fonctionnalité (cf. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">bug 654072</a> pour plus d'informations).</dd> - <dt><strong id="attr-disabled"><code>disabled</code></strong></dt> + <dt><strong><code>disabled</code></strong></dt> <dd> <p>Cet attribut booléen empêche l'utilisateur d'interagir avec le bouton : il ne peut pas être pressé ou ciblé.</p> <p>Firefox, contrairement aux autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persiste l'état désactivé dynamique</a> d'un <code><bouton></code> à travers les chargements de page. Utilisez l'attribut <a href="#attr-autocomplete"><code>autocomplete</code></a> pour contrôler cette fonctionnalité.</p> </dd> - <dt><strong id="attr-form"><code>form</code></strong></dt> + <dt><strong><code>form</code></strong></dt> <dd>L'élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> auquel associer le bouton (son <em>formulaire rattaché</em>). Cet attribut contient l'attribut <code><strong>id</strong></code> de l'élément <code><form></code> auquel celui-ci est rattaché. Par défaut, le bouton est rattaché à l'élément <code><form></code> qui est son plus proche ancêtre. Cet attribut permet à un bouton d'être placé n'importe où dans le document et pas seulement comme un descendant d'éléments <code><form></code>. Il permet également de rattacher le bouton à un autre formulaire que son élément parent.</dd> - <dt><strong id="attr-formaction"><code>formaction</code></strong></dt> + <dt><strong><code>formaction</code></strong></dt> <dd>L'URL qui traite les informations soumises par le bouton. Remplace l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-action"><code>action</code></a> du formulaire rattaché au bouton. Il ne fait rien s'il n'y a pas de formulaire rattaché.</dd> - <dt><strong id="attr-formenctype"><code>formenctype</code></strong></dt> - <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut définit le <a class="external" href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> qui sera utilisée pour encoder les données envoyées au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes : + <dt><strong><code>formenctype</code></strong></dt> + <dd><p>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut définit le <a class="external" href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> qui sera utilisée pour encoder les données envoyées au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes :</p> <ul> <li><code>application/x-www-form-urlencoded</code> : La valeur par défaut.</li> <li><code>multipart/form-data</code> : Utilisé pour soumettre des éléments <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> dont les attributs <a href="/fr/docs/Web/HTML/Element/Input#attr-type"><code>type</code></a> sont définis sur <code>file</code>.</li> @@ -79,8 +79,8 @@ browser-compat: html.elements.button <p>Si cet attribut est spécifié, il remplace l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-enctype"><code>enctype</code></a> du formulaire rattaché au bouton.</p> </dd> - <dt><strong id="attr-formmethod"><code>formmethod</code></strong></dt> - <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code> (explicitement ou comme valeur par défaut), cet attribut définit la <a href="/fr/docs/Web/HTTP/Methods">méthode HTTP</a> qui sera utilisée pour envoyer les données au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes : + <dt><strong><code>formmethod</code></strong></dt> + <dd><p>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code> (explicitement ou comme valeur par défaut), cet attribut définit la <a href="/fr/docs/Web/HTTP/Methods">méthode HTTP</a> qui sera utilisée pour envoyer les données au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes :</p> <ul> <li><code>post</code> : Les données du formulaire sont incluses dans le corps de la requête HTTP lorsqu'elles sont envoyées au serveur. À utiliser lorsque le formulaire contient des informations qui ne devraient pas être publiques, comme les identifiants de connexion.</li> <li><code>get</code> : Les données du formulaire sont ajoutées à l'URL <code>action</code> du formulaire, avec un <code>?</code> comme séparateur, et l'URL résultante est envoyée au serveur. Utilisez cette méthode lorsque le formulaire <a href="/fr/docs/Glossary/Idempotent">n'a pas d'effets secondaires</a>, comme les formulaires de recherche.</li> @@ -88,11 +88,10 @@ browser-compat: html.elements.button <p>S'il est spécifié, cet attribut remplace l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-method"><code>method</code></a> du formulaire rattaché au bouton.</p> </dd> - <dt><strong id="attr-formnovalidate"><code>formnovalidate</code></strong></dt> - <dd>Si le bouton est un bouton de soumission (<code>type</code> non défini ou défini avec la valeur <code>"submit"</code>), cet attribut booléen spécifie que le formulaire ne doit pas être <a href="/fr/docs/Learn/Forms/Form_validation">validé</a> lorsqu'il est soumis. Si cet attribut est spécifié, il remplace l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-novalidate"><code>novalidate</code></a> du formulaire rattaché au bouton.</dd> - <dd>Cet attribut est également disponible sur les éléments <code><a href="/fr/docs/Web/HTML/Element/Input/image"><input type="image"></a></code> et <code><a href="/fr/docs/Web/HTML/Element/Input/submit"><input type="submit"></a></code>.</p> + <dt><strong><code>formnovalidate</code></strong></dt> + <dd>Si le bouton est un bouton de soumission (<code>type</code> non défini ou défini avec la valeur <code>"submit"</code>), cet attribut booléen spécifie que le formulaire ne doit pas être <a href="/fr/docs/Learn/Forms/Form_validation">validé</a> lorsqu'il est soumis. Si cet attribut est spécifié, il remplace l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-novalidate"><code>novalidate</code></a> du formulaire rattaché au bouton. Cet attribut est également disponible sur les éléments <code><a href="/fr/docs/Web/HTML/Element/Input/image"><input type="image"></a></code> et <code><a href="/fr/docs/Web/HTML/Element/Input/submit"><input type="submit"></a></code>.</p> </dd> - <dt><strong id="attr-formtarget"><code>formtarget</code></strong></dt> + <dt><strong><code>formtarget</code></strong></dt> <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut indique le contexte de navigation (onglet, fenêtre, frame) associé avec le formulaire, sa cible. Outre un attribut <code><strong>id </strong></code>valide du document, il peut prendre l'une de ces valeurs particulières: <ul> <li><code>_self</code> : Charge la réponse dans le même contexte de navigation que le contexte actuel. Il s'agit de la valeur par défaut si l'attribut n'est pas spécifié.</li> @@ -101,17 +100,17 @@ browser-compat: html.elements.button <li><code>_top</code> : Charge la réponse dans le contexte de navigation de niveau supérieur (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte actuel, et qui n'a pas de parent). S'il n'y a pas de parent, cette option se comporte de la même manière que <code>_self</code>.</li> </ul> </dd> - <dt><strong id="attr-name"><code>name</code></strong></dt> + <dt><strong><code>name</code></strong></dt> <dd>Le nom du bouton, soumis en tant que paire avec la <code>valeur</code> du bouton comme partie des données du formulaire.</dd> - <dt><strong id="attr-type"><code>type</code></strong></dt> - <dd>Le comportement par défaut du bouton. Les valeurs possibles sont : + <dt><strong><code>type</code></strong></dt> + <dd><p>Le comportement par défaut du bouton. Les valeurs possibles sont :</p> <ul> <li><code>submit</code> : Le bouton soumet les données du formulaire au serveur. C'est la valeur par défaut si l'attribut n'est pas spécifié pour les boutons associés à un <code><form></code>, ou si l'attribut est une valeur vide ou invalide.</li> <li><code>reset</code> : Le bouton réinitialise tous les contrôles à leur valeur initiale, comme <a href="/fr/docs/Web/HTML/Element/Input/reset"><input type="reset"></a>. (Ce comportement a tendance à agacer les utilisateurs).</li> <li><code>button</code> : Le bouton n'a pas de comportement par défaut et ne fait rien lorsqu'il est pressé par défaut. Les scripts côté client peuvent écouter les événements de l'élément, qui sont déclenchés lorsque les événements se produisent.</li> </ul> </dd> - <dt><strong id="attr-value"><code>value</code></strong></dt> + <dt><strong><code>value</code></strong></dt> <dd>Définit la valeur associée au <code>name</code> du bouton lorsqu'il est soumis avec les données du formulaire. Cette valeur est transmise au serveur en paramètres lorsque le formulaire est soumis.</dd> </dl> diff --git a/files/fr/web/html/element/canvas/index.html b/files/fr/web/html/element/canvas/index.html index be7e12369b..c7b9f6dcfe 100644 --- a/files/fr/web/html/element/canvas/index.html +++ b/files/fr/web/html/element/canvas/index.html @@ -14,7 +14,7 @@ browser-compat: html.elements.canvas --- <div>{{HTMLRef}}</div> -<p class="summary">On utilise l'élément <strong>HTML <code><canvas></code></strong> avec l'API <a href="/fr/docs/Web/API/Canvas_API">canvas</a>, ou l'API <a href="/fr/docs/Web/API/WebGL_API">WebGL</a> pour dessiner des graphiques et des animations.</p> +<p>On utilise l'élément <strong>HTML <code><canvas></code></strong> avec l'API <a href="/fr/docs/Web/API/Canvas_API">canvas</a>, ou l'API <a href="/fr/docs/Web/API/WebGL_API">WebGL</a> pour dessiner des graphiques et des animations.</p> <table class="properties"> <tbody> @@ -54,11 +54,11 @@ browser-compat: html.elements.canvas <p>Comme les autres éléments HTML, cet élément possède les <a href="/fr/docs/Web/HTML/Global_attributes">attributs globaux</a>.</p> <dl> - <dt><strong id="attr-height"><code>height</code></strong></dt> + <dt><strong><code>height</code></strong></dt> <dd>La hauteur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 150.</dd> - <dt><strong id="attr-moz-opaque"><code>moz-opaque</code></strong> {{non-standard_inline}}{{deprecated_inline}}</dt> + <dt><strong><code>moz-opaque</code></strong> {{non-standard_inline}}{{deprecated_inline}}</dt> <dd>Cet attribut permet d'indiquer s'il y aura de la transparence ou non. Si le canevas sait qu'il n'y aura pas de transparence, les performances de rendu pourront être améliorées. Cet attribut est uniquement pris en charge par les navigateurs Mozilla, il est préférable d'utiliser la méthode standard <a href="fr/docs/Web/API/HTMLCanvasElement/getContext"><code>canvas.getContext('2d', { alpha: false})</code></a> à la place.</dd> - <dt><strong id="attr-width"><code>width</code></strong></dt> + <dt><strong><code>width</code></strong></dt> <dd>La largeur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 300.</dd> </dl> @@ -119,9 +119,8 @@ browser-compat: html.elements.canvas </tbody> </table> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Si on dépasse les dimensions ou l'aire maximale, le canevas deviendra inutilisable et les commandes de dessin ne fonctionneront pas.</p> +<div class="note"> + <p><strong>Note :</strong>Si on dépasse les dimensions ou l'aire maximale, le canevas deviendra inutilisable et les commandes de dessin ne fonctionneront pas.</p> </div> <h2 id="examples">Exemples</h2> diff --git a/files/fr/web/html/element/caption/index.html b/files/fr/web/html/element/caption/index.html index 7210126072..00a70e2d0c 100644 --- a/files/fr/web/html/element/caption/index.html +++ b/files/fr/web/html/element/caption/index.html @@ -17,7 +17,7 @@ browser-compat: html.elements.caption --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément <strong><code><caption></code></strong> définit la légende (ou le titre) d'un tableau.</p> +<p>L'élément <strong><code><caption></code></strong> définit la légende (ou le titre) d'un tableau.</p> <div>{{EmbedInteractiveExample("pages/tabbed/caption.html", "tabbed-standard")}}</div> @@ -61,7 +61,7 @@ browser-compat: html.elements.caption <h3 id="deprecated_attributes">Attributs obsolètes</h3> <dl> - <dt><strong id="attr-align"><code>align</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>align</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut à valeur contrainte indique l'alignement de la légende du tableau par rapport au tableau lui-même. Il peut valoir : <dl> <dt><code>left</code></dt> @@ -74,9 +74,8 @@ browser-compat: html.elements.caption <dd>La légende est affichée en dessous du tableau</dd> </dl> - <div class="notecard note"> - <p><b>Note d'utilisation :</b></p> - <p>Ne pas utiliser cet attribut. Il a été déprécié. L'élément <code><caption></code> devrait être mis en forme grâce au <a href="/fr/docs/Web/CSS">CSS</a>. Afin d'obtenir des effets similaires à cet attribut, on utilisera les propriétés CSS <a href="/fr/docs/Web/CSS/caption-side"><code>caption-side</code></a> et <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a>.</p> + <div class="note"> + <p><strong>Note :</strong> Ne pas utiliser cet attribut. Il a été déprécié. L'élément <code><caption></code> devrait être mis en forme grâce au <a href="/fr/docs/Web/CSS">CSS</a>. Afin d'obtenir des effets similaires à cet attribut, on utilisera les propriétés CSS <a href="/fr/docs/Web/CSS/caption-side"><code>caption-side</code></a> et <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a>.</p> </div> </dd> </dl> @@ -89,7 +88,7 @@ browser-compat: html.elements.caption <p>Utiliser la propriété <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> sur le tableau ne modifiera pas l'apparence de la légende. Il est également nécessaire d'ajouter une déclaration CSS avec <code>background-color</code> sur l'élément <code><caption></code> pour que celui-ci ait la même couleur.</p> -<h2 id="example">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <p>Cet exemple simple présente un tableau qui comprend une légende.</p> @@ -111,8 +110,7 @@ browser-compat: html.elements.caption </tr> </table></pre> -<div class="hidden"> - <pre class="brush: css">caption { +<pre class="brush: css hidden">caption { caption-side: top; } table { @@ -122,12 +120,11 @@ browser-compat: html.elements.caption table, th, td { border: 1px solid black; } - </pre> - </div> +</pre> <h3 id="result">Résultat</h3> -<p>{{EmbedLiveSample('example', '', 120)}}</p> +<p>{{EmbedLiveSample('Exemple', '', 120)}}</p> <h2 id="specifications">Spécifications</h2> diff --git a/files/fr/web/html/element/center/index.html b/files/fr/web/html/element/center/index.html index 5e7bdd54e2..ab336c36fc 100644 --- a/files/fr/web/html/element/center/index.html +++ b/files/fr/web/html/element/center/index.html @@ -16,12 +16,11 @@ browser-compat: html.elements.center --- <div>{{HTMLRef}}</div> -<div class="notecard deprecated"> - <p><b>Obsolète</b></p> - <p>Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.</p> </div> -<p class="summary">L'élément <strong><code><center></code></strong> est un <a href="/fr/docs/Web/HTML/Block-level_elements">élément de bloc</a> qui contient des paragraphes et d'autres éléments de type bloc ou en ligne. Le contenu entier de cet élément est centré horizontalement au sein de son conteneur parent (généralement l'élément <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>).</p> +<p>L'élément <strong><code><center></code></strong> est un <a href="/fr/docs/Web/HTML/Block-level_elements">élément de bloc</a> qui contient des paragraphes et d'autres éléments de type bloc ou en ligne. Le contenu entier de cet élément est centré horizontalement au sein de son conteneur parent (généralement l'élément <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>).</p> <p>Cet élément a été déprécié en HTML4 (et XHTML 1) au profit de la propriété <a href="/fr/docs/Web/CSS">CSS</a> <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> qui peut être appliqué à l'élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> ou à un élément <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a>. Pour centrer des blocs, on utilisera d'autres propriétés (<a href="/fr/docs/Web/CSS/margin-left"><code>margin-left</code></a> et <a href="/fr/docs/Web/CSS/margin-right"><code>margin-right</code></a> (ou définissez <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> à <code>0 auto</code>).</p> @@ -29,9 +28,8 @@ browser-compat: html.elements.center <p>Cet élément implémente l'interface <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>.</p> -<div class="notecard note"> - <p><b>Note d'implémentation :</b></p> - <p>Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</p> +<div class="note"> + <p><strong>Note :</strong> Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</p> </div> <h2 id="example_1">Exemple 1</h2> diff --git a/files/fr/web/html/element/cite/index.html b/files/fr/web/html/element/cite/index.html index 7f2eed785a..cd93bd61c9 100644 --- a/files/fr/web/html/element/cite/index.html +++ b/files/fr/web/html/element/cite/index.html @@ -17,7 +17,7 @@ browser-compat: html.elements.cite --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément <strong><code><cite></code></strong> contient le titre d'une œuvre telle qu'un livre, une chanson, un film, une sculpture… Cet élément doit inclure le titre de l'œuvre. Cette référence peut-être abrégée en accord avec les conventions d'usages pour l'ajout des métadonnées de citations.</p> +<p>L'élément <strong><code><cite></code></strong> contient le titre d'une œuvre telle qu'un livre, une chanson, un film, une sculpture… Cet élément doit inclure le titre de l'œuvre. Cette référence peut-être abrégée en accord avec les conventions d'usages pour l'ajout des métadonnées de citations.</p> <div>{{EmbedInteractiveExample("pages/tabbed/cite.html", "tabbed-standard")}}</div> diff --git a/files/fr/web/html/element/code/index.html b/files/fr/web/html/element/code/index.html index 332abaf92b..c6ccf9dbba 100644 --- a/files/fr/web/html/element/code/index.html +++ b/files/fr/web/html/element/code/index.html @@ -14,7 +14,7 @@ browser-compat: html.elements.code --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><code></code></strong> représente un court fragment de code machine. Par défaut, l'agent utilisateur utilise une police à chasse fixe (<em>monospace</em>) afin d'afficher le texte contenu dans cet élément.</p> +<p>L'élément HTML <strong><code><code></code></strong> représente un court fragment de code machine. Par défaut, l'agent utilisateur utilise une police à chasse fixe (<em>monospace</em>) afin d'afficher le texte contenu dans cet élément.</p> <div>{{EmbedInteractiveExample("pages/tabbed/code.html", "tabbed-shorter")}}</div> diff --git a/files/fr/web/html/element/col/index.html b/files/fr/web/html/element/col/index.html index 77709ea9a9..bde20a7a7a 100644 --- a/files/fr/web/html/element/col/index.html +++ b/files/fr/web/html/element/col/index.html @@ -13,7 +13,7 @@ browser-compat: html.elements.col --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><col></code></strong> définit une colonne appartenant à un tableau et est utilisé afin de définir la sémantique commune à toutes ses cellules. On trouve généralement cet élément au sein d'un élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a>.</p> +<p>L'élément HTML <strong><code><col></code></strong> définit une colonne appartenant à un tableau et est utilisé afin de définir la sémantique commune à toutes ses cellules. On trouve généralement cet élément au sein d'un élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/col.html","tabbed-taller")}}</div> @@ -55,7 +55,7 @@ browser-compat: html.elements.col <p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p> <dl> - <dt><strong id="attr-span"><code>span</code></strong></dt> + <dt><strong><code>span</code></strong></dt> <dd>Cet attribut contient un nombre entier positif indiquant le nombre de colonnes consécutives que l'élément <code><col></code> couvre. S'il n'est pas présent, sa valeur par défaut est <code>1</code>.</dd> </dl> @@ -64,7 +64,7 @@ browser-compat: html.elements.col <p>Les attributs suivants sont dépréciés et ne doivent pas être utilisés. Ils sont documentés ci-dessous à titre de référence lors de la mise à jour du code existant et uniquement pour des raisons historiques.</p> <dl> - <dt><strong id="attr-align"><code>align</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>align</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut de type énumératif indique comment l'alignement horizontal du contenu des cellules de chaque colonne sera traité. Les valeurs possibles sont : <ul> <li><code>left</code>, aligner le contenu à gauche de la cellule</li> @@ -75,8 +75,8 @@ browser-compat: html.elements.col <p>Si cet attribut n'est pas défini, sa valeur est héritée du <a href="/fr/docs/Web/HTML/Element/colgroup#attr-align"><code>align</code></a> de l'élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a> auquel appartient cet <code><col></code>. S'il n'y en a pas, la valeur <code>left</code> est supposée.</p> - <div class="notecard note"> - <p><b>Note :</b></p> + <div class="note"> + <p><strong>Note :</strong></p> <ul> <li>Pour obtenir le même effet que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code> : @@ -90,17 +90,17 @@ browser-compat: html.elements.col </ul> </div> </dd> - <dt><strong id="attr-bgcolor"><code>bgcolor</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>bgcolor</code></strong> {{deprecated_inline}}</dt> <dd> <p>La couleur de fond du tableau. Il s'agit d'un <a href="/fr/docs/Web/CSS/color_value#rgb_colors">code RVB hexadécimal à 6 chiffres</a>, préfixé par un « <code>#</code> ». L'un des <a href="/fr/docs/Web/CSS/color_value#color_keywords">mots-clés de couleur</a> prédéfinis peut également être utilisé.</p> <p>Pour obtenir un effet similaire, utilisez la propriété CSS <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>.</p> </dd> - <dt><strong id="attr-char"><code>char</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>char</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs typiques de cet attribut incluent un point (.) lorsqu'on tente d'aligner des nombres ou des valeurs monétaires. Si <a href="#attr-align"><code>align</code></a> n'est pas défini sur <code>char</code>, cet attribut est ignoré.</dd> - <dt><strong id="attr-charoff"><code>charoff</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>charoff</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut est utilisé pour indiquer le nombre de caractères pour décaler les données de la colonne par rapport aux caractères d'alignement spécifiés par l'attribut <code>char</code>.</dd> - <dt><strong id="attr-valign"><code>valign</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>valign</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut spécifie l'alignement vertical du texte dans chaque cellule de la colonne. Les valeurs possibles de cet attribut sont les suivantes : <ul> <li><code>baseline</code>, mettra le texte aussi près du bas de la cellule que possible, mais l'alignera sur la <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">base</a> des caractères au lieu du bas de ceux-ci. Si les caractères sont tous de la même taille, cela a le même effet que <code>bottom</code> ;</li> @@ -109,8 +109,8 @@ browser-compat: html.elements.col <li>and <code>top</code>, placera le texte aussi près du haut de la cellule que possible.</li> </ul> - <div class="notecard note"> - <p><b>Note :</b></p> + <div class="note"> + <p><strong>Note :</strong></p> <ul> <li>N'essayez pas de définir la propriété <a href="/fr/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> sur un sélecteur donnant un élément <code><col></code>. Comme les éléments <a href="/fr/docs/Web/HTML/Element/td"><code><td></code></a> ne sont pas des descendants de l'élément <code><col></code>, ils n'en hériteront pas.</li> @@ -119,7 +119,7 @@ browser-compat: html.elements.col </ul> </div> </dd> - <dt><strong id="attr-width"><code>width</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>width</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut spécifie une largeur par défaut pour chaque colonne du groupe de colonnes actuel. En plus des valeurs standard en pixels et en pourcentage, cet attribut peut prendre la forme spéciale <code>0*</code>, ce qui signifie que la largeur de chaque colonne du groupe doit être la largeur minimale nécessaire pour contenir le contenu de la colonne. Des largeurs relatives telles que <code>5*</code> peuvent également être utilisées.</dd> </dl> diff --git a/files/fr/web/html/element/colgroup/index.html b/files/fr/web/html/element/colgroup/index.html index 2dd5a5eb2b..4ed3fc245c 100644 --- a/files/fr/web/html/element/colgroup/index.html +++ b/files/fr/web/html/element/colgroup/index.html @@ -13,7 +13,7 @@ browser-compat: html.elements.colgroup --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><colgroup></code></strong> définit un groupe de colonnes au sein d'un tableau.</p> +<p>L'élément HTML <strong><code><colgroup></code></strong> définit un groupe de colonnes au sein d'un tableau.</p> <div>{{EmbedInteractiveExample("pages/tabbed/colgroup.html","tabbed-taller")}}</div> @@ -56,9 +56,9 @@ browser-compat: html.elements.colgroup <p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur cet élément.</p> <dl> - <dt><strong id="attr-span"><code>span</code></strong></dt> + <dt><strong><code>span</code></strong></dt> <dd>Cet attribut contient un nombre entier positif indiquant le nombre de colonnes consécutives que l'élément <code><colgroup></code> couvre. S'il n'est pas présent, sa valeur par défaut est <code>1</code>. - <div class="notecard note"> + <div class="note"> <p><strong>Note:</strong></p> <p>Cet attribut est appliqué sur les attributs du groupe de colonnes, il n'a aucun effet sur les règles de style CSS qui lui sont associées ni, a fortiori, sur les cellules des membres du groupe de la colonne.</p> <ul> @@ -73,7 +73,7 @@ browser-compat: html.elements.colgroup <p>Les attributs suivants sont dépréciés et ne doivent pas être utilisés. Ils sont documentés ci-dessous à titre de référence lors de la mise à jour du code existant et uniquement pour des raisons historiques.</p> <dl> - <dt><strong id="attr-align"><code>align</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>align</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut de type énumératif indique comment l'alignement horizontal du contenu des cellules de chaque colonne sera traité. Les valeurs possibles sont : <ul> <li><code>left</code>, aligner le contenu à gauche de la cellule</li> @@ -85,8 +85,8 @@ browser-compat: html.elements.colgroup <p>Si cet attribut n'est pas défini, la valeur <code>left</code> est adoptée. Les éléments <a href="/fr/docs/Web/HTML/Element/col"><code><col></code></a> descendants peuvent remplacer cette valeur en utilisant leur propre attribut <a href="/fr/docs/Web/HTML/Element/col#attr-align"><code>align</code></a>.</p> - <div class="notecard note"> - <p><b>Note :</b></p> + <div class="note"> + <p><strong>Note :</strong></p> <ul> <li>N'essayez pas de définir la propriété <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> sur un sélecteur donnant un élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a>. Comme les éléments <a href="/fr/docs/Web/HTML/Element/td"><code><td></code></a> ne sont pas des descendants de l'élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a>, ils n'en hériteront pas.</li> <li>Si le tableau n'utilise pas d'attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan">code>colspan</code></a>, utilisez un <code>td:nth-child(an+b)</code> sélecteur CSS par colonne, où a est le nombre total de colonnes du tableau et b est la position ordinale de cette colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété <code>text-align</code> peut être utilisée.</li> @@ -94,17 +94,17 @@ browser-compat: html.elements.colgroup </ul> </div> </dd> - <dt><strong id="attr-bgcolor"><code>bgcolor</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>bgcolor</code></strong> {{deprecated_inline}}</dt> <dd> <p>La couleur de fond du tableau. Il s'agit d'un <a href="/fr/docs/Web/CSS/color_value#rgb_colors">code RVB hexadécimal à 6 chiffres</a>, préfixé par un « <code>#</code> ». L'un des <a href="/fr/docs/Web/CSS/color_value#color_keywords">mots-clés de couleur</a> prédéfinis peut également être utilisé.</p> <p>Pour obtenir un effet similaire, utilisez la propriété CSS <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>.</p> </dd> - <dt><strong id="attr-char"><code>char</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>char</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut spécifie l'alignement du contenu d'un groupe de colonnes sur un caractère. Les valeurs typiques de cet attribut comprennent un point (.) lorsqu'on tente d'aligner des chiffres ou des valeurs monétaires. Si <a href="#attr-align"><code>align</code></a> n'est pas défini sur <code>char</code>, cet attribut est ignoré, bien qu'il sera toujours utilisé comme valeur par défaut pour le <a href="/fr/docs/Web/HTML/Element/col#attr-align"><code>align</code></a> du <a href="/fr/docs/Web/HTML/Element/col"><code><col></code></a> qui sont membres de ce groupe de colonnes.</dd> - <dt><strong id="attr-charoff"><code>charoff</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>charoff</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut est utilisé pour indiquer le nombre de caractères pour décaler les données de la colonne par rapport au caractère d'alignement spécifié par l'attribut <code>char</code>.</dd> - <dt><strong id="attr-valign"><code>valign</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>valign</code></strong> {{deprecated_inline}}</dt> <dd>Cet attribut spécifie l'alignement vertical du texte dans chaque cellule de la colonne. Les valeurs possibles de cet attribut sont les suivantes : <ul> <li><code>baseline</code>, mettra le texte aussi près du bas de la cellule que possible, mais l'alignera sur la <a href="https://fr.wikipedia.org/wiki/Ligne_de_base_(typographie)">ligne de base</a> des caractères au lieu du bas de ceux-ci. Si les caractères sont tous de la même taille, cela a le même effet que <code>bottom</code> ;</li> @@ -113,8 +113,8 @@ browser-compat: html.elements.colgroup <li>and <code>top</code>, placera le texte aussi près du haut de la cellule que possible.</li> </ul> - <div class="notecard note"> - <p><b>Note :</b></p> + <div class="note"> + <p><strong>Note :</strong></p> <ul> <li>N'essayez pas de définir la propriété <a href="/fr/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> sur un sélecteur donnant un élément <code><col></code>. Comme les éléments <a href="/fr/docs/Web/HTML/Element/td"><code><td></code></a> ne sont pas des descendants de l'élément <code><col></code>, ils n'en hériteront pas.</li> <li>Si le tableau n'utilise pas d'attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, utilisez le sélecteur CSS <code>td:nth-child(an+b)</code> où a est le nombre total de colonnes du tableau et b la position ordinale de la colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété <code>vertical-align</code> peut être utilisée.</li> diff --git a/files/fr/web/html/element/content/index.html b/files/fr/web/html/element/content/index.html index 4997c16527..65be830bb8 100644 --- a/files/fr/web/html/element/content/index.html +++ b/files/fr/web/html/element/content/index.html @@ -18,16 +18,14 @@ browser-compat: html.elements.content --- <div>{{HTMLRef}}</div> -<div class="notecard deprecated"> - <p><strong>Déprécié</strong></p> - <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> </div> -<p class="summary">L'élément HTML <strong><code><content></code></strong> — une partie obsolète de la suite de technologies <a href="/fr/docs/Web/Web_Components">Web Components</a> — était utilisé à l'intérieur de <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> comme un point d'insertion, et n'était pas destiné à être utilisé dans du HTML ordinaire. Il a maintenant été remplacé par l'élément <a href="/fr/docs/Web/HTML/Element/slot"><code><slot></code></a>, qui crée un point dans le DOM où un Shadow DOM peut être inséré.</p> +<p>L'élément HTML <strong><code><content></code></strong> — une partie obsolète de la suite de technologies <a href="/fr/docs/Web/Web_Components">Web Components</a> — était utilisé à l'intérieur de <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> comme un point d'insertion, et n'était pas destiné à être utilisé dans du HTML ordinaire. Il a maintenant été remplacé par l'élément <a href="/fr/docs/Web/HTML/Element/slot"><code><slot></code></a>, qui crée un point dans le DOM où un Shadow DOM peut être inséré.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Bien que présent dans les premières versions des spécifications et mis en œuvre dans plusieurs navigateurs, cet élément a été supprimé dans les versions ultérieures de la spécification, et ne doit pas être utilisé. Il est documenté ici pour aider à adapter le code écrit à l'époque où il était inclus dans la spécification afin qu'il fonctionne avec les versions plus récentes de la spécification.</p> +<div class="note"> + <p><strong>Note :</strong>Bien que présent dans les premières versions des spécifications et mis en œuvre dans plusieurs navigateurs, cet élément a été supprimé dans les versions ultérieures de la spécification, et ne doit pas être utilisé. Il est documenté ici pour aider à adapter le code écrit à l'époque où il était inclus dans la spécification afin qu'il fonctionne avec les versions plus récentes de la spécification.</p> </div> <table class="properties"> @@ -60,7 +58,7 @@ browser-compat: html.elements.content <p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur <code><content></code>.</p> <dl> - <dt><code id="attr-select">select</code></dt> + <dt><code>select</code></dt> <dd>Une liste de sélecteurs séparés par des virgules. La syntaxe utilisée est la même que celle utilisée pour les sélecteurs CSS. Ils permettent de sélectionner le contenu à insérer à la place de l'élément <code><content></code>.</dd> </dl> @@ -68,9 +66,8 @@ browser-compat: html.elements.content <p>Voici un exemple simple d'utilisation de l'élément <code><content></code>. Il s'agit d'un fichier HTML It is an HTML file with everything needed in it.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Pour que ce code fonctionne, le navigateur utilisé doit prendre en charge les composants web (voir par exemple <a href="/fr/docs/Web/Web_Components#enabling_web_components_in_firefox">l'activation des composants web dans Firefox</a>).</p> +<div class="note"> + <p><strong>Note :</strong>Pour que ce code fonctionne, le navigateur utilisé doit prendre en charge les composants web (voir par exemple <a href="/fr/docs/Web/Web_Components#enabling_web_components_in_firefox">l'activation des composants web dans Firefox</a>).</p> </div> <pre class="brush: html"><html> diff --git a/files/fr/web/html/element/data/index.html b/files/fr/web/html/element/data/index.html index 921d4205ff..9bf13456b6 100644 --- a/files/fr/web/html/element/data/index.html +++ b/files/fr/web/html/element/data/index.html @@ -54,7 +54,7 @@ browser-compat: html.elements.data <p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur <code><data></code>.</p> <dl> - <dt><code id="attr-value">value</code></dt> + <dt><code>value</code></dt> <dd>Cet attribut définit la version du contenu qui doit être interprétée par une machine.</dd> </dl> diff --git a/files/fr/web/html/element/datalist/index.html b/files/fr/web/html/element/datalist/index.html index 831b1f5372..94845bfd17 100644 --- a/files/fr/web/html/element/datalist/index.html +++ b/files/fr/web/html/element/datalist/index.html @@ -13,7 +13,7 @@ browser-compat: html.elements.datalist --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><datalist></code></strong> contient un ensemble d'éléments <a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></a> qui représentent les valeurs possibles pour d'autres contrôles.</p> +<p>L'élément HTML <strong><code><datalist></code></strong> contient un ensemble d'éléments <a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></a> qui représentent les valeurs possibles pour d'autres contrôles.</p> <div>{{EmbedInteractiveExample("pages/tabbed/datalist.html", "tabbed-standard")}}</div> diff --git a/files/fr/web/html/element/dd/index.html b/files/fr/web/html/element/dd/index.html index bb76b3f403..640a75a714 100644 --- a/files/fr/web/html/element/dd/index.html +++ b/files/fr/web/html/element/dd/index.html @@ -17,7 +17,7 @@ browser-compat: html.elements.dd --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><dd></code></strong> fournit la description, la définition ou la valeur du terme précédent (<a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a>) dans une liste de description (<a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a>).</p> +<p>L'élément HTML <strong><code><dd></code></strong> fournit la description, la définition ou la valeur du terme précédent (<a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a>) dans une liste de description (<a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a>).</p> <div>{{EmbedInteractiveExample("pages/tabbed/dd.html","tabbed-standard")}}</div> @@ -59,7 +59,7 @@ browser-compat: html.elements.dd <p>Cet élément inclut <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt><code id="attr-nowrap">nowrap</code> {{non-standard_inline}}</dt> + <dt><code>nowrap</code> {{non-standard_inline}}</dt> <dd>Si la valeur de cet attribut est <code>yes</code>, il n'y aura pas de retour à la ligne si le texte de la définition dépasse la taille de la ligne. La valeur par défaut est <code>no</code>.</dd> </dl> diff --git a/files/fr/web/html/element/del/index.html b/files/fr/web/html/element/del/index.html index dfb07d4fde..b4b1b21928 100644 --- a/files/fr/web/html/element/del/index.html +++ b/files/fr/web/html/element/del/index.html @@ -14,7 +14,7 @@ browser-compat: html.elements.del --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><del></code> </strong>représente une portion de texte ayant été supprimée d'un document. Cet élément est souvent (mais pas nécessairement) affiché rayé. L'élément <a href="/fr/docs/Web/HTML/Element/ins"><code><ins></code></a> est quant à lui utilisé pour représenter des portions de texte ajoutées.</p> +<p>L'élément HTML <strong><code><del></code> </strong>représente une portion de texte ayant été supprimée d'un document. Cet élément est souvent (mais pas nécessairement) affiché rayé. L'élément <a href="/fr/docs/Web/HTML/Element/ins"><code><ins></code></a> est quant à lui utilisé pour représenter des portions de texte ajoutées.</p> <div>{{EmbedInteractiveExample("pages/tabbed/del.html", "tabbed-standard")}}</div> @@ -58,9 +58,9 @@ browser-compat: html.elements.del <p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur <code><del></code>.</p> <dl> - <dt><code id="attr-cite">cite</code></dt> + <dt><code>cite</code></dt> <dd>Une URL pour une ressource expliquant le changement (cela peut être un procès verbal d'une réunion par exemple).</dd> - <dt><code id="attr-datetime">datetime</code></dt> + <dt><code>datetime</code></dt> <dd>Cet attribut indique l'heure et la date du changement et doit être une date valide avec une heure facultative. Si la valeur ne peut pas être analysée comme telle, l'élément n'aura pas d'information temporelle associée. Voir <a href="/fr/docs/Web/HTML/Date_and_time_formats">l'article sur les formats</a> pour la représentation d'<a href="/fr/docs/Web/HTML/Date_and_time_formats#date_strings">une date seule</a> ou d'<a href="/fr/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings">une date avec une heure</a>.</dd> </dl> diff --git a/files/fr/web/html/element/details/index.html b/files/fr/web/html/element/details/index.html index d9a30d8797..c597a7e084 100644 --- a/files/fr/web/html/element/details/index.html +++ b/files/fr/web/html/element/details/index.html @@ -15,32 +15,26 @@ browser-compat: html.elements.details --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><details></code></strong> est utilisé comme un outil permettant de révéler une information. Un résumé ou un intitulé peuvent être fournis grâce à un élément <a href="/fr/docs/Web/HTML/Element/summary"><code><summary></code></a>.</p> +<p>L'élément HTML <strong><code><details></code></strong> est utilisé comme un outil permettant de révéler une information. Un résumé ou un intitulé peuvent être fournis grâce à un élément <a href="/fr/docs/Web/HTML/Element/summary"><code><summary></code></a>.</p> <p>La plupart du temps, le contrôle utilisé pour cet élément est un triangle qui est tourné ou tordu afin d'indiquer si l'élément est révélé ou non. Si le premier élément fils de l'élément <code><details></code> est un élément <code><summary></code>, c'est le contenu de ce dernier qui est utilisé comme intitulé pour le contenu à révéler (l'intitulé est donc toujours visible).</p> <div>{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-standard")}}</div> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>L'utilisation courante d'un triangle qui tourne ou s'enroule pour représenter l'ouverture ou la fermeture du widget explique pourquoi on les appelle parfois « twisties » en anglais.</p> +<div class="note"> + <p><strong>Note :</strong>L'utilisation courante d'un triangle qui tourne ou s'enroule pour représenter l'ouverture ou la fermeture du widget explique pourquoi on les appelle parfois « twisties » en anglais.</p> </div> -<p>Un widget <code><details></code> peut être dans l'un des deux états suivants. L'état par défaut <em>fermé</em> affiche uniquement le triangle et l'étiquette à l'intérieur du <code><summary></code> (ou une chaîne par défaut définie par <a href="/fr/docs/Glossary/User_agent">l'agent utilisateur</a> si aucun <code><summary></code>). Cela peut ressembler à ce qui suit :</p> +<p>Un widget <code><details></code> peut être dans l'un des deux états suivants. L'état par défaut <em>fermé</em> affiche uniquement le triangle et l'étiquette à l'intérieur du <code><summary></code> (ou une chaîne par défaut définie par <a href="/fr/docs/Glossary/User_agent">l'agent utilisateur</a> si aucun <code><summary></code>).</p> -<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="Capture d'écran du widget fermé <details>. Un triangle noir pointant vers la gauche se trouve à droite du texte « System Requirements »." src="details-closed.png"></figure> - -<p>Nous voyons ici un widget de divulgation standard avec l'étiquette "System Requirements", dans son état fermé par défaut. Lorsque l'utilisateur clique sur le widget ou le met au point, puis appuie sur la barre d'espacement, il s'ouvre par "torsion", révélant son contenu :</p> - -<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="Capture d'écran du widget <details> ouvert. Le triangle pointe maintenant vers le bas, et une description détaillée de ce que signifie « System Requirements » est affichée." src="details-open.png"></figure> +<p>Lorsque l'utilisateur clique sur le widget ou le met au point, puis appuie sur la barre d'espacement, il s'ouvre par "torsion", révélant son contenu :</p> <p>À partir de là, vous pouvez utiliser les feuilles de style en cascade pour donner un style au widget de divulgation, et vous pouvez ouvrir et fermer le widget de façon programmatique en définissant ou en supprimant son attribut <a href="/fr/docs/Web/HTML/Element/details#attr-open"><code>open</code></a>.</p> <p>Par défaut, lorsqu'il est fermé, le widget est seulement assez haut pour afficher le triangle de divulgation et le résumé. Lorsqu'il est ouvert, il s'étend pour afficher les détails qu'il contient.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Malheureusement, à l'heure actuelle, il n'existe aucun moyen intégré d'animer la transition entre l'ouverture et la fermeture.</p> +<div class="note"> + <p><strong>Note :</strong>Malheureusement, à l'heure actuelle, il n'existe aucun moyen intégré d'animer la transition entre l'ouverture et la fermeture.</p> </div> <p>Les implémentations entièrement conformes aux normes appliquent automatiquement le code CSS <code><a href="/fr/docs/Web/CSS/display">display</a>: list-item</code> à l'élément <a href="/fr/docs/Web/HTML/Element/summary"><code><summary></code></a>. Vous pouvez l'utiliser pour personnaliser davantage son apparence. Voir <a href="#customizing_the_disclosure_widget">personnaliser le marqueur de révélation</a> pour plus de détails.</p> @@ -83,13 +77,12 @@ browser-compat: html.elements.details <p>Comme tous les éléments HTML, cet élément accepte les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p> <dl> - <dt><code id="attr-open">open</code></dt> + <dt><code>open</code></dt> <dd> <p>Cet attribut booléen indique si les détails — c'est-à-dire le contenu de l'élément <code><details></code> — sont actuellement visibles ou non. Les détails sont affichés lorsque cet attribut existe, ou cachés lorsque cet attribut est absent. Par défaut, cet attribut est absent, ce qui signifie que les détails ne sont pas visibles.</p> <div class="note"> - <p><b>Note :</b></p> - <p>Vous devez supprimer entièrement cet attribut pour que les détails soient cachés. Attention, <code>open="false"</code> rend les détails visibles, car cet attribut est booléen.</p> + <p><strong>Note :</strong>Vous devez supprimer entièrement cet attribut pour que les détails soient cachés. Attention, <code>open="false"</code> rend les détails visibles, car cet attribut est booléen.</p> </div> </dd> </dl> @@ -201,7 +194,7 @@ details[open] > summary { <h4 id="css_2">CSS</h4> -<pre class="brush: css; highlight:[12, 15-17]">details { +<pre class="brush: css">details { font: 16px "Open Sans", "Arial", sans-serif; width: 620px; } diff --git a/files/fr/web/html/element/dfn/index.html b/files/fr/web/html/element/dfn/index.html index 147a16f0a6..d370093857 100644 --- a/files/fr/web/html/element/dfn/index.html +++ b/files/fr/web/html/element/dfn/index.html @@ -16,7 +16,7 @@ browser-compat: html.elements.dfn --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><dfn></code></strong> (aussi nommé « définition ») est utilisé pour indiquer le terme défini dans le contexte d'une expression ou d'une phrase de définition. L'élément <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a>, le couple <a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a>/<a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a> ou l'élément <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a> qui est le plus proche ancêtre de <code><dfn></code> est considéré comme la définition du terme.</p> +<p>L'élément HTML <strong><code><dfn></code></strong> (aussi nommé « définition ») est utilisé pour indiquer le terme défini dans le contexte d'une expression ou d'une phrase de définition. L'élément <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a>, le couple <a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a>/<a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a> ou l'élément <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a> qui est le plus proche ancêtre de <code><dfn></code> est considéré comme la définition du terme.</p> <div>{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-shorter")}}</div> @@ -74,8 +74,7 @@ browser-compat: html.elements.dfn </ol> <div class="note"> - <p><b>Note :</b></p> - <p>Si l'élément <code><dfn></code> possède un attribut <code>title</code>, il <em>doit</em> contenir le terme défini et aucun autre texte.</p> + <p><strong>Note :</strong>Si l'élément <code><dfn></code> possède un attribut <code>title</code>, il <em>doit</em> contenir le terme défini et aucun autre texte.</p> </div> <h3 id="links_to_dfn_elements">Liens vers des éléments de type <code><dfn></code></h3> diff --git a/files/fr/web/html/element/dialog/index.html b/files/fr/web/html/element/dialog/index.html index ea1a1effa4..8c5051b4b2 100644 --- a/files/fr/web/html/element/dialog/index.html +++ b/files/fr/web/html/element/dialog/index.html @@ -14,7 +14,7 @@ browser-compat: html.elements.dialog --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <code><strong><dialog></strong></code> représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).</p> +<p>L'élément HTML <code><strong><dialog></strong></code> représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).</p> <table class="properties"> <tbody> @@ -53,12 +53,12 @@ browser-compat: html.elements.dialog <p>Cet élément inclut <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> -<div class="notecard warning"> - <p>L'attribut <code>tabindex</code> ne doit pas être utilisé sur l'élément <code><dialog></code>.</p> +<div class="warning"> + <p><strong>Attention :</strong> L'attribut <code>tabindex</code> ne doit pas être utilisé sur l'élément <code><dialog></code>.</p> </div> <dl> - <dt><code id="attr-open">open</code></dt> + <dt><code>open</code></dt> <dd>Cet attribut indique que la boîte de dialogue est active et peut être utilisée de façon interactive. Si l'attribut n'est pas renseigné, la boîte de dialogue ne doit pas être présentée à l'utilisateur.</dd> </dl> diff --git a/files/fr/web/html/element/dir/index.html b/files/fr/web/html/element/dir/index.html index 6c1dc7e17d..40e8f2b9c8 100644 --- a/files/fr/web/html/element/dir/index.html +++ b/files/fr/web/html/element/dir/index.html @@ -16,16 +16,14 @@ browser-compat: html.elements.dir --- <div>{{HTMLRef}}</div> -<div class="notecard obsolete"> - <p><b>Obsolète :</b></p> - <p>Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.</p> </div> -<p class='summary'>L'élément HTML <strong><code><dir></code></strong> (pour <em>directory</em>) est utilisé comme un conteneur pour un répertoire (c'est-à-dire un ensemble de fichiers). Des styles et icônes peuvent être appliqués par l'agent utilisateur. Cet élément obsolète ne doit pas être utilisé, il peut être remplacé par l'élément <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a> qui permet de représenter des listes et, entre autres, des listes de fichiers.</p> +<p>L'élément HTML <strong><code><dir></code></strong> (pour <em>directory</em>) est utilisé comme un conteneur pour un répertoire (c'est-à-dire un ensemble de fichiers). Des styles et icônes peuvent être appliqués par l'agent utilisateur. Cet élément obsolète ne doit pas être utilisé, il peut être remplacé par l'élément <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a> qui permet de représenter des listes et, entre autres, des listes de fichiers.</p> -<div class="notecard note"> - <p><b>Note d'utilisation :</b></p> - <p>Cet élément ne doit pas être utilisé. Bien que présent dans les premières spécifications HTML, il a été déprécié dans HTML 4, et rendu obsolète avec HTML5. Il faudra privilégier l'élément <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a>. De plus, aucun navigateur majeur ne prend en charge cet élément.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cet élément ne doit pas être utilisé. Bien que présent dans les premières spécifications HTML, il a été déprécié dans HTML 4, et rendu obsolète avec HTML5. Il faudra privilégier l'élément <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a>. De plus, aucun navigateur majeur ne prend en charge cet élément.</p> </div> <h2 id="dom_interface">Interface DOM</h2> @@ -37,11 +35,10 @@ browser-compat: html.elements.dir <p>Comme pour tous les autres éléments HTML, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur cet élément.</p> <dl> - <dt><code id="attr-compact">compact</code></dt> + <dt><code>compact</code></dt> <dd>Cet attribut booléen indique que la liste doit être rendue avec un affichage compact. L'interprétation de cet attribut dépend de l'agent utilisateur. Il ne fonctionne pas dans tous les navigateurs. - <div class="notecard note"> - <p><b>Note d'utilisation :</b></p> - <p>Cet attribut ne doit pas être utilisé, car il a été déprécié. L'élément <a href="/fr/docs/Web/HTML/Element/dir"><code><dir></code></a> doit être mis en forme en utilisant <a href="/fr/docs/Web/CSS">CSS</a>. Pour obtenir un effect visuel similaire à l'attribut <code>compact</code>, la propriété CSS <a href="/fr/docs/Web/CSS/line-height"><code>line-height</code></a> peut être utilisé avec la valeur <code>80%</code>.</p> + <div class="warning"> + <p><strong>Attention :</strong> Cet attribut ne doit pas être utilisé, car il a été déprécié. L'élément <a href="/fr/docs/Web/HTML/Element/dir"><code><dir></code></a> doit être mis en forme en utilisant <a href="/fr/docs/Web/CSS">CSS</a>. Pour obtenir un effect visuel similaire à l'attribut <code>compact</code>, la propriété CSS <a href="/fr/docs/Web/CSS/line-height"><code>line-height</code></a> peut être utilisé avec la valeur <code>80%</code>.</p> </div> </dd> </dl> diff --git a/files/fr/web/html/element/div/index.html b/files/fr/web/html/element/div/index.html index 35b092a859..1764eb7d29 100644 --- a/files/fr/web/html/element/div/index.html +++ b/files/fr/web/html/element/div/index.html @@ -16,7 +16,7 @@ browser-compat: html.elements.div --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><div></code></strong> (ou division) est le conteneur générique du contenu du flux. Il n'a aucun effet sur le contenu ou la mise en page tant qu'il n'est pas mis en forme d'une manière quelconque à l'aide de <a href="/fr/docs/Web/CSS">CSS</a>.</p> +<p>L'élément HTML <strong><code><div></code></strong> (ou division) est le conteneur générique du contenu du flux. Il n'a aucun effet sur le contenu ou la mise en page tant qu'il n'est pas mis en forme d'une manière quelconque à l'aide de <a href="/fr/docs/Web/CSS">CSS</a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}</div> @@ -60,8 +60,7 @@ browser-compat: html.elements.div <p>Comme tous les autres éléments HTML, cet élément accepte <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <div class="note"> - <p><b>Note :</b></p> - <p>L'attribut <code><strong>align</strong></code> est désormais obsolète et ne doit plus être appliqué pour un <code><div></code>. On privilégiera l'utilisation des propriétés et outils CSS (tels que <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">la grille CSS</a> ou <a href="/fr/docs/Glossary/Flexbox">les boîtes flexibles (flexbox)</a>) pour aligner et positionner des éléments <code><div></code>.</p> + <p><strong>Note :</strong>L'attribut <code><strong>align</strong></code> est désormais obsolète et ne doit plus être appliqué pour un <code><div></code>. On privilégiera l'utilisation des propriétés et outils CSS (tels que <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">la grille CSS</a> ou <a href="/fr/docs/Glossary/Flexbox">les boîtes flexibles (flexbox)</a>) pour aligner et positionner des éléments <code><div></code>.</p> </div> <h2 id="usage_notes">Notes d'utilisation</h2> diff --git a/files/fr/web/html/element/em/index.html b/files/fr/web/html/element/em/index.html index ea92b0a937..439117440a 100644 --- a/files/fr/web/html/element/em/index.html +++ b/files/fr/web/html/element/em/index.html @@ -12,7 +12,7 @@ browser-compat: html.elements.em --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><em></code></strong> (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments <code><em></code> peuvent être imbriqués, chaque degré d'imbrication indiquant un degré d'insistance plus élevé.</p> +<p>L'élément HTML <strong><code><em></code></strong> (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments <code><em></code> peuvent être imbriqués, chaque degré d'imbrication indiquant un degré d'insistance plus élevé.</p> <div>{{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}</div> diff --git a/files/fr/web/html/element/embed/index.html b/files/fr/web/html/element/embed/index.html index 21f1ee793d..6f8281163c 100644 --- a/files/fr/web/html/element/embed/index.html +++ b/files/fr/web/html/element/embed/index.html @@ -17,13 +17,12 @@ browser-compat: html.elements.embed --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><embed></code></strong> permet d'intégrer du contenu externe à cet endroit dans le document. Le contenu peut être fourni par une application externe ou une autre source telle qu'un <i>plugin</i> du navigateur.</p> +<p>L'élément HTML <strong><code><embed></code></strong> permet d'intégrer du contenu externe à cet endroit dans le document. Le contenu peut être fourni par une application externe ou une autre source telle qu'un <i>plugin</i> du navigateur.</p> <div>{{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}</div> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Cet article ne traite que de l'élément faisant partie du HTML5. Il ne concerne pas la version précédente et non normalisée de cet élément.</p> +<div class="note"> + <p><strong>Note :</strong>Cet article ne traite que de l'élément faisant partie du HTML5. Il ne concerne pas la version précédente et non normalisée de cet élément.</p> </div> <p>Il faut garder à l'esprit que la plupart des navigateurs ont déprécié voire retiré la prise en charge des plugins. Aussi, mieux vaut ne pas utiliser sur <code><embed></code> si on souhaite qu'un site ou une application soit fonctionnelle sur un navigateur moyen.</p> @@ -66,13 +65,13 @@ browser-compat: html.elements.embed <p>Cet élément possède <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt><code id="attr-height">height</code></dt> + <dt><code>height</code></dt> <dd>La hauteur utilisée pour l'affichage de la ressource, exprimée en <a href="https://drafts.csswg.org/css-values/#px">pixels CSS</a>. La valeur est absolue, les pourcentages ne sont pas autorisés.</dd> - <dt><code id="attr-src">src</code></dt> + <dt><code>src</code></dt> <dd>L'URL de la ressource à intégrer.</dd> - <dt><code id="attr-type">type</code></dt> + <dt><code>type</code></dt> <dd>Le type MIME à utiliser pour sélectionner le plugin à instancier.</dd> - <dt><code id="attr-width">width</code></dt> + <dt><code>width</code></dt> <dd>La largeur utilisée pour l'affichage de la ressource, exprimée en <a href="https://drafts.csswg.org/css-values/#px">pixels CSS</a>. La valeur est absolue, les pourcentages ne sont pas autorisés.</dd> </dl> diff --git a/files/fr/web/html/element/fieldset/index.html b/files/fr/web/html/element/fieldset/index.html index 3187ec76bd..d6689a7867 100644 --- a/files/fr/web/html/element/fieldset/index.html +++ b/files/fr/web/html/element/fieldset/index.html @@ -13,7 +13,7 @@ browser-compat: html.elements.fieldset --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><fieldset></code></strong> est utilisé afin de regrouper plusieurs contrôles interactifs ainsi que des étiquettes (<a href="/fr/docs/Web/HTML/Element/Label"><code><label></code></a>) dans un formulaire HTML.</p> +<p>L'élément HTML <strong><code><fieldset></code></strong> est utilisé afin de regrouper plusieurs contrôles interactifs ainsi que des étiquettes (<a href="/fr/docs/Web/HTML/Element/Label"><code><label></code></a>) dans un formulaire HTML.</p> <div>{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}</div> @@ -24,13 +24,15 @@ browser-compat: html.elements.fieldset <p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt><code id="attr-disabled">disabled</code></dt> + <dt><code>disabled</code></dt> <dd>Si cet attribut booléen est utilisé, les contrôles de formulaires des éléments descendants sont désactivés (ils ne peuvent pas être édités). Bien qu'ils ne soient pas éditables, les données de ces contrôles seront envoyées avec le formulaire. Ces contrôles ne recevront pas les évènements liés à la navigation (tels que ceux liés aux clics ou au focus). La plupart du temps, ces contrôles désactivés apparaissent comme grisés. On notera que les éléments de formulaires au sein de l'élément <a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a> ne seront pas désactivés.</dd> - <dt><code id="attr-form">form</code></dt> + <dt><code>form</code></dt> <dd>La valeur de cet attribut correspond à la valeur de l'attribut <code>id</code> de l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> auquel il est rattaché. La valeur par défaut est l'identifiant du plus proche élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> dont l'élément <code><fieldset></code> est le descendant. Attention, cet attribut peut être source de confusion, tout élément <code><input></code> contenu au sein du <code><fieldset></code> et qui devra être associé au formulaire devra également avoir l'attribut <code>form</code> explicitement défini. En JavaScript, on pourra utiliser la propriété <a href="/fr/docs/Web/API/HTMLFormElement/elements"><code>HTMLFormElement.elements</code></a> pour vérifier le bon rattachement des éléments au formulaire.</dd> - <dt><code id="attr-name">name</code></dt> - <dd>Le nom associé au groupe. - <div class="note"><strong>Note :</strong> L'étiquette du groupe de contrôle est donné par le premier élément enfant <a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a> du <code><fieldset></code>.</div> + <dt><code>name</code></dt> + <dd><p>Le nom associé au groupe.</p> + <div class="note"> + <p><strong>Note :</strong> L'étiquette du groupe de contrôle est donné par le premier élément enfant <a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a> du <code><fieldset></code>.</p> + </div> </dd> </dl> diff --git a/files/fr/web/html/element/figcaption/index.html b/files/fr/web/html/element/figcaption/index.html index d7e245b9ed..4c7d730f26 100644 --- a/files/fr/web/html/element/figcaption/index.html +++ b/files/fr/web/html/element/figcaption/index.html @@ -11,7 +11,7 @@ browser-compat: html.elements.figcaption --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><figcaption></code></strong> représente une légende décrivant le reste du contenu de son élément parent <a href="/fr/docs/Web/HTML/Element/figure"><code><figure></code></a>.</p> +<p>L'élément HTML <strong><code><figcaption></code></strong> représente une légende décrivant le reste du contenu de son élément parent <a href="/fr/docs/Web/HTML/Element/figure"><code><figure></code></a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/figcaption.html","tabbed-shorter")}}</div> diff --git a/files/fr/web/html/element/figure/index.html b/files/fr/web/html/element/figure/index.html index 7ab8953ba1..9c53dbb174 100644 --- a/files/fr/web/html/element/figure/index.html +++ b/files/fr/web/html/element/figure/index.html @@ -14,7 +14,7 @@ browser-compat: html.elements.figure --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><figure></code></strong> représente un contenu autonome, éventuellement accompagné d'une légende facultative, qui est spécifiée à l'aide de l'élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code><figcaption></code></a>. La figure, sa légende et son contenu sont référencés comme une seule unité.</p> +<p>L'élément HTML <strong><code><figure></code></strong> représente un contenu autonome, éventuellement accompagné d'une légende facultative, qui est spécifiée à l'aide de l'élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code><figcaption></code></a>. La figure, sa légende et son contenu sont référencés comme une seule unité.</p> <div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</div> diff --git a/files/fr/web/html/element/font/index.html b/files/fr/web/html/element/font/index.html index bbb5f2386f..599305edf9 100644 --- a/files/fr/web/html/element/font/index.html +++ b/files/fr/web/html/element/font/index.html @@ -12,17 +12,14 @@ browser-compat: html.elements.font --- <div>{{HTMLRef}}</div> -<div class="notecard deprecated"> - <p><b>Obsolète</b></p> - <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la prendre en charge, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la prendre en charge, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.</p> </div> <p>L'élément HTML <strong><code><font></code></strong> définit la taille, la couleur et la police de son contenu.</p> -<div class="notecard note"> - <p><b>Note d'utilisation :</b></p> - - <p><strong>Ne pas utiliser cet élément !</strong> Bien qu'il ait été normalisé en HTML 3.2, il a été déprécié en HTML 4.01, en même temps que tous les éléments liés uniquement au style, puis rendu obsolète en HTML5.</p> +<div class="warning"> + <p><strong>Attention :</strong> Ne pas utiliser cet élément ! Bien qu'il ait été normalisé en HTML 3.2, il a été déprécié en HTML 4.01, en même temps que tous les éléments liés uniquement au style, puis rendu obsolète en HTML5.</p> <p>À partir de HTML 4, HTML ne véhicule plus d'informations de style (en dehors de l'élément <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a> ou de l'attribut <strong>style</strong> de chaque élément). Pour tout nouveau développement web, le style doit être écrit en utilisant le <a href="/fr/docs/Web/CSS">CSS</a> uniquement.</p> @@ -34,11 +31,11 @@ browser-compat: html.elements.font <p>Comme tous les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt><code id="attr-color">color</code></dt> + <dt><code>color</code></dt> <dd>Cet attribut définit la couleur du texte en utilisant soit une couleur nommée, soit une couleur indiquée par le format hexadécimal #RRGGBB.</dd> - <dt><code id="attr-face">face</code></dt> + <dt><code>face</code></dt> <dd>Cet attribut contient une liste d'une ou plusieurs polices, séparées par des virgules. Le texte est affiché avec la première police que le navigateur supporte. Si aucune des polices listées n'est installée sur le système, le navigateur prend habituellement la police proportionnelle, ou à taille fixe par défaut, du système.</dd> - <dt><code id="attr-size">size</code></dt> + <dt><code>size</code></dt> <dd>Cet attribut indique la taille du texte par une valeur numérique ou relative. Les valeurs numériques vont de <code>1</code> à <code>7</code>, <code>1</code> étant la plus petite taille et <code>3</code> la taille par défaut. Il peut être défini en utilisant une valeur relative, comme <code>+2</code> ou <code>-3</code>, qui est relative par rapport à la valeur de l'attribut <a href="/fr/docs/Web/HTML/Element/basefont#attr-size"><code>size</code></a> de l'élément <a href="/fr/docs/Web/HTML/Element/basefont"><code><basefont></code></a>, ou relatif à <code>3</code>, la valeur par défaut, si aucune existe.</dd> </dl> diff --git a/files/fr/web/html/element/footer/index.html b/files/fr/web/html/element/footer/index.html index 1424e9896b..f07e3cef1e 100644 --- a/files/fr/web/html/element/footer/index.html +++ b/files/fr/web/html/element/footer/index.html @@ -88,5 +88,5 @@ browser-compat: html.elements.footer <ul> <li>Autres éléments liés à la section : <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code><nav></code></a>, <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>, <a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h1></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h2></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h3></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h4></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h5></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h6></code></a>, <a href="/fr/docs/Web/HTML/Element/hgroup"><code><hgroup></code></a>, <a href="/fr/docs/Web/HTML/Element/header"><code><header></code></a>, <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a>, <a href="/fr/docs/Web/HTML/Element/address"><code><address></code></a> ;</li> <li><a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Utilisation des sections et des plans HTML</a></li> - <li class="last"><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">ARIA : rôle <code>contentinfo</code></a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">ARIA : rôle <code>contentinfo</code></a></li> </ul> diff --git a/files/fr/web/html/element/form/index.html b/files/fr/web/html/element/form/index.html index e3817ff92a..2f9a5d0ac6 100644 --- a/files/fr/web/html/element/form/index.html +++ b/files/fr/web/html/element/form/index.html @@ -15,7 +15,7 @@ browser-compat: html.elements.form --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><form></code> </strong>représente un formulaire, c'est-à-dire une section d'un document qui contient des contrôles interactifs permettant à un utilisateur de fournir des informations.</p> +<p>L'élément HTML <strong><code><form></code> </strong>représente un formulaire, c'est-à-dire une section d'un document qui contient des contrôles interactifs permettant à un utilisateur de fournir des informations.</p> <div>{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}</div> @@ -59,17 +59,16 @@ browser-compat: html.elements.form <p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt><code id="attr-accept">accept</code> {{deprecated_inline}}</dt> + <dt><code>accept</code> {{deprecated_inline}}</dt> <dd>Cet attribut indique quels types de contenus sont acceptés par le serveur. Il peut y en avoir plusieurs, séparés par des virgules. - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Cet attribut a été retiré dans HTML5 et ne doit plus être utilisé. À la place, il faut utiliser l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-accept"><code>accept</code></a> de l'élément <code><input type=file></code>.</p> + <div class="note"> + <p><strong>Note :</strong>Cet attribut a été retiré dans HTML5 et ne doit plus être utilisé. À la place, il faut utiliser l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-accept"><code>accept</code></a> de l'élément <code><input type=file></code>.</p> </div> </dd> - <dt><code id="attr-accept-charset">accept-charset</code></dt> + <dt><code>accept-charset</code></dt> <dd>Encodages de caractères séparés par des espaces que le serveur accepte. Le navigateur les utilise dans l'ordre dans lequel ils sont listés. La valeur par défaut signifie <a href="/fr/docs/Web/HTTP/Headers/Content-Encoding">le même encodage que celui de la page</a>.<br> (Dans les versions précédentes de HTML, les codages de caractères pouvaient également être délimités par des virgules).</dd> - <dt><code id="attr-autocapitalize">autocapitalize</code> {{non-standard_inline}}</dt> + <dt><code>autocapitalize</code> {{non-standard_inline}}</dt> <dd>Cet attribut est un attribut non-standard utilisé sur iOS par Safari Mobile qui contrôle la façon dont la valeur du texte est automatiquement transcrite en majuscules lors de la saisie par l'utilisateur. Si l'attribut <code>autocapitalize</code> est défini sur un des descendants du formulaire, il surchargera la valeur de <code>autocapitalize</code> utilisée pour le formulaire. Les valeurs non-dépréciées sont disponibles pour iOS 5 et supérieurs. La valeur par défaut est <code>sentences</code>. Les valeurs possibles sont: <ul> <li><code>none</code> : La mise en majuscules est totalement désactivée</li> @@ -78,17 +77,17 @@ browser-compat: html.elements.form <li><code>characters</code> : Tous les caractères sont automatiquement passés en majuscules.</li> </ul> </dd> - <dt><code id="attr-autocomplete">autocomplete</code></dt> + <dt><code>autocomplete</code></dt> <dd>Cet attribut énuméré est utilisé pour définir le comportement du navigateur quant à l'autocomplétion des champs. Cet attribut peut être surchargé par chacun des éléments du formulaire. Il peut prendre deux valeurs : <ul> <li><code>off</code> : Le navigateur ne peut pas compléter automatiquement les entrées. (Les navigateurs ont tendance à ignorer ce point pour les formulaires de connexion suspects ; voir <a href="/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields">L'attribut autocomplete et les champs de connexion</a>.)</li> <li><code>on</code> : Le navigateur peut compléter automatiquement les entrées.</li> </ul> </dd> - <dt><code id="attr-name">name</code></dt> + <dt><code>name</code></dt> <dd>Le nom du formulaire. Il doit être unique parmi tous les formulaires d'un document, et ne doit pas être une chaîne de caractères vide.</dd> - <dt><code id="attr-rel">rel</code></dt> - <dd>Crée un hyperlien ou une annotation en fonction de la valeur, voir l'attribut <a href="/fr/docs/Web/HTML/Attributes/rel"><code id="attr-rel">rel</code></a> pour plus de détails.</dd> + <dt><code>rel</code></dt> + <dd>Crée un hyperlien ou une annotation en fonction de la valeur, voir l'attribut <a href="/fr/docs/Web/HTML/Attributes/rel"><code>rel</code></a> pour plus de détails.</dd> </dl> <h3 id="attributes_for_form_submission">Attributs pour l'envoi de formulaires</h3> @@ -96,9 +95,9 @@ browser-compat: html.elements.form <p>Les attributs suivants contrôlent le comportement pendant l'envoi du formulaire.</p> <dl> - <dt><code id="attr-action">action</code></dt> + <dt><code>action</code></dt> <dd>L'URL qui traite l'envoi du formulaire. Cette valeur peut être remplacée par un attribut <a href="/fr/docs/Web/HTML/Element/Button#attr-formaction"><code>formaction</code></a> sur un <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <code><a href="/fr/docs/Web/HTML/Element/Input/submit"><input type="submit"></a></code>, ou <code><a href="/fr/docs/Web/HTML/Element/Input/image"><input type="image"></a></code>.</dd> - <dt><code id="attr-enctype">enctype</code></dt> + <dt><code>enctype</code></dt> <dd>Lorsque la valeur de l'attribut <code>method</code> est <code>post</code>, cet attribut définit le <a href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> qui sera utilisé pour encoder les données envoyées au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes : <ul> <li><code>application/x-www-form-urlencoded</code> : la valeur par défaut si l'attribut n'est pas défini</li> @@ -108,7 +107,7 @@ browser-compat: html.elements.form <p>Cette valeur peut être remplacée par un attribut <a href="/fr/docs/Web/HTML/Element/Button#attr-formenctype"><code>formenctype</code></a> sur un <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <code><a href="/fr/docs/Web/HTML/Element/Input/submit"><input type="submit"></a></code>, ou <code><a href="/fr/docs/Web/HTML/Element/Input/image"><input type="image"></a></code>.</p> </dd> - <dt><code id="attr-method">method</code></dt> + <dt><code>method</code></dt> <dd>Cet attribut définit la méthode <a href="/fr/docs/Web/HTTP">HTTP</a> qui sera utilisée pour envoyer les données au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes : <ul> <li><code>post</code> : La méthode <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST</a> ; données du formulaire envoyées comme <a href="/fr/docs/Web/API/Body">corps de la requête</a>.</li> @@ -118,9 +117,9 @@ browser-compat: html.elements.form <p>Si cet attribut n'est pas défini, la valeur par défaut utilisée est <code>get</code>. Cette valeur peut-être remplacée par un attribut <a href="/fr/docs/Web/HTML/Element/Button#attr-formmethod"><code>formmethod</code></a> sur un <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <a href="/fr/docs/Web/HTML/Element/Input/submit"><code><input type="submit"></code></a>, ou <code><a href="/fr/docs/Web/HTML/Element/Input/image"><input type="image"></a></code>.</p> </dd> - <dt><code id="attr-novalidate">novalidate</code></dt> + <dt><code>novalidate</code></dt> <dd>Cet attribut booléen indique si le formulaire doit être validé au moment de sa soumission. S'il n'est pas défini, le formulaire sera validé lors de sa soumission. Il peut être surchargé par l'attribut <a href="/fr/docs/Web/HTML/Element/Button#attr-formnovalidate"><code>formnovalidate</code></a> des éléments <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a> ou <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> appartenant au formulaire.</dd> - <dt><code id="attr-target">target</code></dt> + <dt><code>target</code></dt> <dd>Un nom ou un mot-clé indiquant où afficher la réponse après avoir envoyé le formulaire. Dans HTML 4, c'est le nom, ou le mot-clé, d'une frame. Dans HTML5, c'est le nom, ou le mot-clé, d'un <em>contexte de navigation</em> (onglet, fenêtre, frame). Les mots-clés suivants ont un sens particulier : <ul> <li><code>_self</code> (par défaut) : Charger dans le même contexte de navigation que le contexte actuel.</li> @@ -130,9 +129,8 @@ browser-compat: html.elements.form </ul> <p>Cette valeur peut être remplacée par un attribut <a href="/fr/docs/Web/HTML/Element/Button#attr-formtarget"><code>formtarget</code></a> sur un <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <code><a href="/fr/docs/Web/HTML/Element/Input/submit"><input type="submit"></a></code>, ou <code><a href="/fr/docs/Web/HTML/Element/Input/image"><input type="image"></a></code>.</p> - <div class="notecard note"> - <p><b>Note :</b></p> - <p>La définition de <code>target="_blank"</code> sur les éléments <code><form></code> fournit implicitement le même comportement <code>rel</code> que la définition de <a href="/fr/docs/Web/HTML/Link_types/noopener"><code>rel="noopener"</code></a> qui ne définit pas <code>window.opener</code>.</p> + <div class="note"> + <p><strong>Note :</strong>La définition de <code>target="_blank"</code> sur les éléments <code><form></code> fournit implicitement le même comportement <code>rel</code> que la définition de <a href="/fr/docs/Web/HTML/Link_types/noopener"><code>rel="noopener"</code></a> qui ne définit pas <code>window.opener</code>.</p> </div> </dd> </dl> diff --git a/files/fr/web/html/element/frame/index.html b/files/fr/web/html/element/frame/index.html index af1e94d6a3..00b383057d 100644 --- a/files/fr/web/html/element/frame/index.html +++ b/files/fr/web/html/element/frame/index.html @@ -12,9 +12,8 @@ browser-compat: html.elements.frame --- <div>{{HTMLRef}}</div> -<div class="notecard deprecated"> - <p><b>Obsolète</b></p> - <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.</p> </div> <p>L'élément HTML <strong><code><frame></code></strong> définit une zone particulière dans laquelle un autre document HTML est affiché. Une <code><frame></code> (un « cadre ») doit être utilisée dans un élément <a href="/fr/docs/Web/HTML/Element/frameset"><code><frameset></code></a>.</p> @@ -26,19 +25,19 @@ browser-compat: html.elements.frame <p>Comme tous les autres éléments HTML, cet élément prend en charge les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p> <dl> - <dt><code id="attr-src">src</code></dt> + <dt><code>src</code></dt> <dd>Cet attribut indique le document qui doit être affiché dans la frame.</dd> - <dt><code id="attr-name">name</code></dt> + <dt><code>name</code></dt> <dd>Cet attribut sert à nommer les frames. Sans nommage, tous les liens seront ouverts dans la frame où ils se trouvent. Voir <a href="/fr/docs/Web/HTML/Element/a#attr-target"><code>target</code></a> pour plus d'informations.</dd> - <dt><code id="attr-noresize">noresize</code></dt> + <dt><code>noresize</code></dt> <dd>Cet attribut empêche aux utilisateurs de redimensionner les frames.</dd> - <dt><code id="attr-scrolling">scrolling</code></dt> + <dt><code>scrolling</code></dt> <dd>Cet attribut définit l'existence des barres de défilement. Si cet attribut n'est pas utilisé, le navigateur mettre une barre de défilement si nécessaire. Il y a deux options : <code>yes</code> pour afficher les barres de défilement même quand ce n'est pas nécessaire, et <code>no</code> pour ne pas afficher les barres de défilement même quand c'est nécessaire.</dd> - <dt><code id="attr-marginheight">marginheight</code></dt> + <dt><code>marginheight</code></dt> <dd>Cet attribut définit la hauteur des marges entre les frames.</dd> - <dt><code id="attr-marginwidth">marginwidth</code></dt> + <dt><code>marginwidth</code></dt> <dd>Cet attribut définit la largeur des marges entre les frames.</dd> - <dt><code id="attr-frameborder">frameborder</code></dt> + <dt><code>frameborder</code></dt> <dd>Cet attribut permet de mettre des bordures à la frame.</dd> </dl> diff --git a/files/fr/web/html/element/frameset/index.html b/files/fr/web/html/element/frameset/index.html index f8674ebce1..33576fbbfb 100644 --- a/files/fr/web/html/element/frameset/index.html +++ b/files/fr/web/html/element/frameset/index.html @@ -12,16 +12,14 @@ browser-compat: html.elements.frameset --- <div>{{HTMLRef}}</div> -<div class="notecard deprecated"> - <p><b>Obsolète</b></p> - <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la prendre en charge, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la prendre en charge, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.</p> </div> <p>L'élément HTML <strong><code><frameset></code></strong> est utilisé pour contenir les éléments <a href="/fr/docs/Web/HTML/Element/frame"><code><frame></code></a>.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>L'utilisation de cadres étant désormais déconseillée au profit de l'utilisation de <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a>, cet élément n'est généralement pas utilisé par les sites web modernes.</p> +<div class="note"> + <p><strong>Note :</strong>L'utilisation de cadres étant désormais déconseillée au profit de l'utilisation de <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a>, cet élément n'est généralement pas utilisé par les sites web modernes.</p> </div> <h2 id="attributes">Attributs</h2> @@ -29,9 +27,9 @@ browser-compat: html.elements.frameset <p>Comme tous les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt><code id="attr-cols">cols</code></dt> + <dt><code>cols</code></dt> <dd>Cet attribut définit le nombre et la taille des espaces horizontaux dans un <code><frameset></code>.</dd> - <dt><code id="attr-rows">rows</code></dt> + <dt><code>rows</code></dt> <dd>Cet attribut définit le nombre et la taille des espaces verticaux dans un <code><frameset></code>.</dd> </dl> diff --git a/files/fr/web/html/element/header/index.html b/files/fr/web/html/element/header/index.html index 09f3376e63..b03ea5384e 100644 --- a/files/fr/web/html/element/header/index.html +++ b/files/fr/web/html/element/header/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/header <div>{{EmbedInteractiveExample("pages/tabbed/header.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <table class="properties"> <tbody> <tr> diff --git a/files/fr/web/html/element/heading_elements/index.html b/files/fr/web/html/element/heading_elements/index.html index 1d228caef2..f659ec97d0 100644 --- a/files/fr/web/html/element/heading_elements/index.html +++ b/files/fr/web/html/element/heading_elements/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/Heading_Elements <div>{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Ces éléments acceptent uniquement les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> (communs à l'ensemble des éléments).</p> @@ -39,7 +37,7 @@ translation_of: Web/HTML/Element/Heading_Elements <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><h1>Titre de niveau 1</h1> +<pre class="brush: html"><h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <h3>Titre de niveau 3</h3> <h4>Titre de niveau 4</h4> @@ -55,7 +53,7 @@ translation_of: Web/HTML/Element/Heading_Elements <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><h1>Élément de titre</h1> +<pre class="brush: html"><h1>Élément de titre</h1> <h2>Présentation</h2> <p>Du texte...</p> @@ -82,14 +80,14 @@ translation_of: Web/HTML/Element/Heading_Elements <h4 id="Mauvaises_pratiques">Mauvaises pratiques</h4> -<pre class="brush: html example-bad notranslate"><h1>Heading level 1</h1> +<pre class="brush: html example-bad"><h1>Heading level 1</h1> <h3>Heading level 3</h3> <h4>Heading level 4</h4> </pre> <h4 id="Bonnes_pratiques">Bonnes pratiques</h4> -<pre class="brush: html example-good notranslate"><h1>Heading level 1</h1> +<pre class="brush: html example-good"><h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3> </pre> @@ -153,7 +151,7 @@ translation_of: Web/HTML/Element/Heading_Elements <h4 id="Exemple">Exemple</h4> -<pre class="brush: html notranslate"><header> +<pre class="brush: html"><header> <nav aria-labelledby="primary-navigation"> <h2 id="primary-navigation">Outils de navigation</h2> <!-- éléments relatifs à la navigation --> diff --git a/files/fr/web/html/element/hgroup/index.html b/files/fr/web/html/element/hgroup/index.html index a7e93d9d4e..517aa07981 100644 --- a/files/fr/web/html/element/hgroup/index.html +++ b/files/fr/web/html/element/hgroup/index.html @@ -14,9 +14,6 @@ translation_of: Web/HTML/Element/hgroup <div>{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> @@ -60,13 +57,13 @@ translation_of: Web/HTML/Element/hgroup <p>Le rendu de ce document pourrait être :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14599/outline-colon.png" style="height: 99px; width: 450px;"></p> +<p><img alt="" src="outline-colon.png"></p> <p>Où on voit que le titre principal est suivi de deux points puis d'un espace avant le titre secondaire, <em>Living Standard — Last Updated 12 August 2016</em>.</p> <p>On pourrait également avoir cet affichage :</p> -<p><img alt="Rendered outline that includes an <hgroup> element, with parens around the secondary heading" src="https://mdn.mozillademos.org/files/14601/outline-paren.png" style="height: 106px; width: 450px;"></p> +<p><img alt="Plan rendu en incluant un élément <hgroup>, avec des parenthèses autour du titre secondaire" src="outline-paren.png"></p> <p>Ici, le titre secondaire est placé entre parenthèses après le titre principal.</p> @@ -140,5 +137,5 @@ translation_of: Web/HTML/Element/hgroup <ul> <li>Les autres éléments HTML relatifs aux sections du document : {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> - <li><a class="deki-ns current" href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Les sections et le plan d'un document HTML5</a></li> + <li><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Les sections et le plan d'un document HTML5</a></li> </ul> diff --git a/files/fr/web/html/element/hr/index.html b/files/fr/web/html/element/hr/index.html index d92044e920..d29d2b3bb1 100644 --- a/files/fr/web/html/element/hr/index.html +++ b/files/fr/web/html/element/hr/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/hr <div>{{EmbedInteractiveExample("pages/tabbed/hr.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Dans les versions précédentes d'HTML, il représente une ligne horizontale. Bien qu'il puisse toujours être représenté ainsi par les navigateurs graphiques, il possède désormais une signification sémantique et ne représente plus un élément de mise en forme.</p> <h2 id="Attributs">Attributs</h2> diff --git a/files/fr/web/html/element/i/index.html b/files/fr/web/html/element/i/index.html index e9547c1865..8307b0f26c 100644 --- a/files/fr/web/html/element/i/index.html +++ b/files/fr/web/html/element/i/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/i <div>{{EmbedInteractiveExample("pages/tabbed/i.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Cet élément possède uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> diff --git a/files/fr/web/html/element/iframe/index.html b/files/fr/web/html/element/iframe/index.html index 1e7c45a210..041dfcbb65 100644 --- a/files/fr/web/html/element/iframe/index.html +++ b/files/fr/web/html/element/iframe/index.html @@ -25,8 +25,8 @@ browser-compat: html.elements.iframe <p>Chaque contexte de navigation possède son propre <a href="/fr/docs/Web/API/History">historique</a> et son propre <a href="/fr/docs/Web/API/Document">document actif</a>. Le contexte de navigation qui contient le contenu intégré est appelé « contexte de navigation parent ». Le contexte de navigation le plus élevé (qui n'a pas de contexte parent) correspond généralement à la fenêtre du navigateur (cf. <a href="/fr/docs/Web/API/Window"><code>Window</code></a>).</p> -<div class="notecard warning"> - <p>Chaque contexte de navigation créé par un élément <code><iframe></code> représente un document à part entière et cela peut donc augmenter les ressources nécessaires à l'utilisation de la page. Aussi, bien qu'en théorie on puisse ajouter autant d'<em>iframes</em> que possible sur autant de niveaux d'imbrication que voulus, on gardera à l'esprit que cela peut nuire aux performances.</p> +<div class="warning"> + <p><strong>Attention :</strong> Chaque contexte de navigation créé par un élément <code><iframe></code> représente un document à part entière et cela peut donc augmenter les ressources nécessaires à l'utilisation de la page. Aussi, bien qu'en théorie on puisse ajouter autant d'<em>iframes</em> que possible sur autant de niveaux d'imbrication que voulus, on gardera à l'esprit que cela peut nuire aux performances.</p> </div> <table class="properties"> @@ -67,36 +67,34 @@ browser-compat: html.elements.iframe <p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt><code id="attr-allow">allow</code></dt> + <dt><code>allow</code></dt> <dd>L'attribut <code>allow</code> permet de définir une <a href="/fr/docs/Web/HTTP/Feature_Policy">politique de fonctionnalité</a> pour l'<i>iframe</i>. Cette politique définit les fonctionnalités disponibles au sein de l'<i>iframe</i> selon l'origine de la requête (les fonctionnalités peuvent être l'accès au micro, à la caméra, aux informations de batterie, etc.). Pour plus d'informations, voir <a href="/fr/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy#the_iframe_allow_attribute">l'article sur l'utilisation de <code>Feature-Policy</code></a>.</dd> - <dt><code id="attr-allowfullscreen">allowfullscreen</code></dt> + <dt><code>allowfullscreen</code></dt> <dd>Cet attribut, lorsqu'il vaut <code>true</code>, indique que l'<i>iframe</i> intégrée peut être passée en plein écran via la méthode<a href="/fr/docs/Web/API/Element/requestFullScreen"><code>Element.requestFullscreen()</code></a>. - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Cet attribut est considéré comme historique et a été redéfini avec <code>allow="fullscreen"</code>.</p> + <div class="note"> + <p><strong>Note :</strong>Cet attribut est considéré comme historique et a été redéfini avec <code>allow="fullscreen"</code>.</p> </div> </dd> - <dt><code id="attr-allowpaymentrequest">allowpaymentrequest</code></dt> + <dt><code>allowpaymentrequest</code></dt> <dd>Cet attribut, lorsqu'il vaut <code>true</code>, permet à l'<i>iframe</i> intégrée d'appeler l'API <a href="/fr/docs/Web/API/Payment_Request_API">Payment Request</a>. - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Cet attribut est considéré comme historique et a été redéfini avec <code>allow="payment"</code>.</p> + <div class="note"> + <p><strong>Note :</strong>Cet attribut est considéré comme historique et a été redéfini avec <code>allow="payment"</code>.</p> </div> </dd> - <dt><code id="attr-csp">csp</code> {{experimental_inline}}</dt> + <dt><code>csp</code> {{experimental_inline}}</dt> <dd>L'attribut <code>csp</code> définit <a href="/fr/docs/Web/HTTP/CSP">la politique de sécurité du contenu</a> que le document intégré doit respecter. Voir <a href="/fr/docs/Web/API/HTMLIFrameElement/csp"><code>HTMLIFrameElement.csp</code></a> pour plus de détails.</dd> - <dt><code id="attr-height">height</code></dt> + <dt><code>height</code></dt> <dd>Cet attribut définit la hauteur du cadre en pixels CSS. La valeur par défaut est <code>150</code>.</dd> - <dt><code id="attr-loading">loading</code> {{experimental_inline}}</dt> + <dt><code>loading</code> {{experimental_inline}}</dt> <dd>Cet attribut indique la façon dont le navigateur devrait charger l'<i>iframe</i> : <ul> <li><code>eager</code> : L'<i>iframe</i> doit être chargée immédiatement, même si elle n'est pas dans la zone d'affichage (<i>viewport</i>) visible. C'est la valeur par défaut.</li> <li><code>lazy</code> : Le chargement de l'<i>iframe</i> est retardé jusqu'à ce que celle-ci atteigne une distance donnée du <i>viewport</i>, définie par le navigateur.</li> </ul> </dd> - <dt id="name-attribute"><code id="attr-name">name</code></dt> + <dt><code>name</code></dt> <dd>Un nom pour le contexte de navigation (ou la <em>frame</em>). Ce nom peut être utilisé comme la valeur de l'attribut <code>target</code> <em>(cible)</em> d'un élément <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> ou <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> <em>(formulaire)</em> ou comme valeur de l'attribut <code>formtarget</code> d'un élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> <em>(entrée)</em> ou <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a> <em>(bouton)</em>. Il peut également être utilisé comme valeur pour le paramètre <code>windowName</code> de la méthode <a href="/fr/docs/Web/API/Window/open"><code>window.open()</code></a>.</dd> - <dt id="attr-referrer"><code id="attr-referrerpolicy">referrerpolicy</code></dt> + <dt><code>referrerpolicy</code></dt> <dd>Une chaîne de caractères qui indique le référent (<em>referrer</em>) à utiliser lors de la récupération de la ressource : <ul> <li><code>no-referrer</code> signifie que l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> ne sera pas envoyé.</li> @@ -109,7 +107,7 @@ browser-compat: html.elements.iframe <li><code>unsafe-url</code> signifie que le référent inclura l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom utilisateur). <strong>Cette valeur n'est pas sûre</strong>, car elle peut entraîner des fuites d'origine ou de chemin provenant de ressources sécurisées avec TLS vers des origines non sécurisées.</li> </ul> </dd> - <dt><code id="attr-sandbox">sandbox</code></dt> + <dt><code>sandbox</code></dt> <dd>Cet attribut permet d'appliquer des restrictions sur le contenu qui peut apparaître dans l'<i>iframe</i>. Si cet attribut vaut la chaîne de caractères vide, toutes les restrictions sont appliquées, sinon, on peut utiliser une liste de mots-clés séparés par des espaces pour définir des restrictions précises. Les mots-clés qui peuvent être utilisés sont : <ul> <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}} : permet aux téléchargements d'avoir lieu sans un signe de l'utilisateur.</li> @@ -127,8 +125,8 @@ browser-compat: html.elements.iframe <li><code>allow-top-navigation</code> : le contexte de navigation peut charger du contenu depuis le contexte de navigation de plus haut niveau. Si ce mot-clé est absent, cette opération n'est pas autorisée.</li> <li><code>allow-top-navigation-by-user-activation</code> : le contexte de navigation peut charger du contenu depuis le contexte de plus haut niveau uniquement si l'action provient de l'utilisateur. Si ce mot-clé est absent, cette opération n'est pas autorisée.</li> </ul> - <div class="notecard note"> - <p><b>Notes :</b></p> + <div class="note"> + <p><strong>Note :</strong></p> <ul> <li>Lorsque le document intégré possède la même origine que la page principale, il est <strong>fortement déconseillé</strong> d'employer <code>allow-scripts</code> et <code>allow-same-origin</code> simultanément, car cela permet de retirer l'attribut <code>sandbox</code> via un programme, c'est donc aussi sûr que de ne pas utiliser l'attribut <code>sandbox</code>.</li> <li>La mise en bac à sable (<em>sandboxing</em>) est d'une aide minime si un attaquant peut faire en sorte qu'un contenu potentiellement hostile soit affiché dans le navigateur de l'utilisateur en dehors d'un <i>iframe</i> sous sandbox. Aussi, il est recommandé de diffuser le contenu depuis un domaine dédié séparé, afin de limiter les éventuels dommages.</li> @@ -136,28 +134,28 @@ browser-compat: html.elements.iframe </ul> </div> </dd> - <dt><code id="attr-src">src</code></dt> + <dt><code>src</code></dt> <dd>L'URL de la page qu'on souhaite intégrer. On pourra utiliser <code>about:blank</code> pour les pages vides afin de respecter les règles de même origine (<em>Same-Origin Policy</em>). On notera également que retirer l'attribut <code>src</code> d'un élément <code><iframe></code> à l'aide d'un script (par exemple avec <a href="/fr/docs/Web/API/Element/removeAttribute"><code>Element.removeAttribute()</code></a>) provoquera le chargement de <code>about:blank</code> dans la <em>frame</em> pour Firefox à partir de la version 65, pour les navigateurs basés sur Chromium ainsi que pour Safari.</dd> - <dt><code id="attr-srcdoc">srcdoc</code></dt> + <dt><code>srcdoc</code></dt> <dd>Le contenu de la page qu'on souhaite intégrer dans le contexte de navigation et qui surcharge celui indiqué par <code>src</code>.</dd> - <dt><code id="attr-width">width</code></dt> + <dt><code>width</code></dt> <dd>Cet attribut indique la largeur de l'<i>iframe</i> en pixels CSS. Par défaut, cet attribut vaut <code>300</code>.</dd> </dl> <h3 id="deprecated_attributes">Attributs dépréciés</h3> <dl> - <dt><code id="attr-align">align</code> {{deprecated_inline}}</dt> + <dt><code>align</code> {{deprecated_inline}}</dt> <dd>Cet attribut obsolète permettait de définir l'alignement de l'<i>iframe</i> par rapport à son contexte englobant.</dd> - <dt><code id="attr-frameborder">frameborder</code> {{deprecated_inline}}</dt> + <dt><code>frameborder</code> {{deprecated_inline}}</dt> <dd>Lorsqu'il vaut 1 (la valeur par défaut), cet attribut indique au navigateur de définir une bordure entre ce cadre et tout autre cadre. Lorsqu'il vaut 0, aucune bordure n'est dessinée. Plutôt que cet attribut, on utilisera la propriété CSS <a href="/fr/docs/Web/CSS/border"><code>border</code></a> pour dessiner la bordure autour d'une iframe.</dd> - <dt><code id="attr-longdesc">longdesc</code> {{deprecated_inline}}</dt> + <dt><code>longdesc</code> {{deprecated_inline}}</dt> <dd>Un URI vers une description détaillée du cadre. En raison d'un mauvais usage, cet attribut n'est pas utile pour les navigateurs non-visuels.</dd> - <dt><code id="attr-marginheight">marginheight</code> {{deprecated_inline}}</dt> + <dt><code>marginheight</code> {{deprecated_inline}}</dt> <dd>L'espace, exprimé en pixels, entre le contenu du cadre et ses marges haute et basse.</dd> - <dt><code id="attr-marginwidth">marginwidth</code> {{deprecated_inline}}</dt> + <dt><code>marginwidth</code> {{deprecated_inline}}</dt> <dd>L'espace, exprimé en pixels, entre le contenu du cadre et ses marges gauche et droite.</dd> - <dt><code id="attr-scrolling">scrolling</code> {{deprecated_inline}}</dt> + <dt><code>scrolling</code> {{deprecated_inline}}</dt> <dd>Un attribut à valeur contrainte qui indique si le navigateur doit afficher une barre de défilement (ou tout autre moyen de défilement) pour<em> </em>le cadre : <ul> <li><code>auto</code> : la barre de défilement est uniquement affichée lorsque c'est nécessaire.</li> @@ -170,7 +168,7 @@ browser-compat: html.elements.iframe <h3 id="non-standard_attributes">Attributs non-standard {{non-standard_inline}}</h3> <dl> - <dt><code id="attr-mozbrowser">mozbrowser</code> {{non-standard_inline}}</dt> + <dt><code>mozbrowser</code> {{non-standard_inline}}</dt> <dd>Cet attribut est uniquement disponible pour les <a href="/fr/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>. L'<i>iframe</i> se comporte comme une fenêtre de navigateur de plus haut niveau. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1318532">le bug 1318532</a> quant à l'exposition de cet attribut dans Firefox.</dd> </dl> diff --git a/files/fr/web/html/element/image/index.html b/files/fr/web/html/element/image/index.html index 66ff034ac2..086e6a1f93 100644 --- a/files/fr/web/html/element/image/index.html +++ b/files/fr/web/html/element/image/index.html @@ -14,7 +14,7 @@ translation_of: Web/HTML/Element/image <p>L'élément HTML <strong><code><image></code></strong> est un élément obsolète, remplacé depuis longtemps par l'élément standard {{HTMLElement("img")}}.</p> <div class="warning"> -<p><strong>Attention !</strong> Si vous souhaitez afficher des images, c'est l'élément {{HTMLElement("img")}} qui doit être utilisé.</p> +<p><strong>Attention :</strong> Si vous souhaitez afficher des images, c'est l'élément {{HTMLElement("img")}} qui doit être utilisé.</p> </div> <p>Bien que les navigateurs essaient de convertir cet élément {{HTMLElement("img")}}, cela peut avoir des résultats incertains voire inattendus.</p> diff --git a/files/fr/web/html/element/img/index.html b/files/fr/web/html/element/img/index.html index c166e8371d..35508bb966 100644 --- a/files/fr/web/html/element/img/index.html +++ b/files/fr/web/html/element/img/index.html @@ -49,9 +49,8 @@ browser-compat: html.elements.img <p>{{page("/fr/docs/Web/Media/Formats/Types_des_images", "table-of-image-file-types")}}</p> -<div class="notecard note"> - <p><b>Astuce :</b></p> - <p>Voir le <a href="/fr/docs/Web/Media/Formats/Image_types">Guide des types et formats de fichiers image</a> pour des informations plus complètes sur les formats d'image pris en charge par les navigateurs web. Cela inclut les formats d'image pris en charge mais non recommandés pour le contenu web (par exemple, ICO, BMP, etc.).</p> +<div class="note"> + <p><strong>Note :</strong> Voir le <a href="/fr/docs/Web/Media/Formats/Image_types">Guide des types et formats de fichiers image</a> pour des informations plus complètes sur les formats d'image pris en charge par les navigateurs web. Cela inclut les formats d'image pris en charge mais non recommandés pour le contenu web (par exemple, ICO, BMP, etc.).</p> </div> <h2 id="image_loading_errors">Erreurs de chargement des images</h2> @@ -71,10 +70,10 @@ browser-compat: html.elements.img <p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Global_attributes">attributs globaux</a>.</p> <dl> - <dt><code id="attr-alt">alt</code></dt> + <dt><code>alt</code></dt> <dd>Cet attribut définit le texte alternatif utilisé lorsqu'il est impossible d'afficher l'image (par exemple si l'URL est incorrecte ou si l'image n'est pas encore téléchargée). - <div class="notecard note"> - <p><b>Note :</b></p> + <div class="note"> + <p><strong>Note :</strong></p> <p>Les navigateurs n'affichent pas toujours les images. Il existe un certain nombre de situations dans lesquelles un navigateur peut ne pas afficher les images, par exemple :</p> <ul> <li>Navigateurs non visuels (tels que ceux utilisés par les personnes souffrant de déficiences visuelles)</li> @@ -89,7 +88,7 @@ browser-compat: html.elements.img <p>Cet attribut est également utilisé pour copier et coller l'image dans du texte, ou pour enregistrer une image liée dans un signet.</p> </dd> - <dt><code id="attr-crossorigin">crossorigin</code></dt> + <dt><code>crossorigin</code></dt> <dd> <p>Indique si la récupération de l'image doit être effectuée à l'aide d'une requête <a href="/fr/docs/Glossary/CORS">CORS</a>. Les données d'image d'une <a href="/fr/docs/Web/HTML/CORS_enabled_image">image compatible avec le système CORS</a> renvoyées par une requête CORS peuvent être réutilisées dans l'élément <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> sans être marquées « <a href="/fr/docs/Web/HTML/CORS_enabled_image#what_is_a_tainted_canvas">corrompu</a> ».</p> @@ -106,7 +105,7 @@ browser-compat: html.elements.img <dd>Une requête entre deux origines est effectuée (avec l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Origin"><code>Origin</code></a>) avec des informations d'authentification qui sont envoyées (par exemple un cookie, un certificat et une authentification HTTP). Si le serveur ne fournit pas d'informations d'authentification au site d'origine (via l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a>), l'image sera corrompue et son utilisation sera restreinte.</dd> </dl> Lorsque cet attribut est absent, la ressource est récupérée sans requête <em>CORS</em> (c'est-à-dire sans envoyer l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Origin"><code>origin</code></a>) ce qui empêche de l'utiliser dans un <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> sans qu'elle soit considérée comme corrompue. Si la valeur de l'attribut est invalide, elle sera considérée comme <code><strong>anonymous</strong></code>. Voir la page <a href="/fr/docs/Web/HTML/Attributes/crossorigin">réglage des attributs CORS</a> pour plus d'informations.</dd> - <dt><code id="attr-decoding">decoding</code></dt> + <dt><code>decoding</code></dt> <dd> <p>Cet attribut fournit une indication à l'agent utilisateur pour le décodage de l'information. Les valeurs possibles sont :</p> <dl> @@ -118,30 +117,28 @@ browser-compat: html.elements.img <dd>Le mode par défaut qui indique l'absence de préférence pour le mode de décodage. Dans ce cas, l'agent utilisateur décide de la meilleure stratégie.</dd> </dl> </dd> - <dt><code id="attr-height">height</code></dt> + <dt><code>height</code></dt> <dd>La hauteur intrinsèque de l'image, en pixels. Doit être un nombre entier sans unité.</dd> - <dt><code id="attr-intrinsicsize">intrinsicsize</code> {{deprecated_inline}}</dt> + <dt><code>intrinsicsize</code> {{deprecated_inline}}</dt> <dd>Cet attribut indique au navigateur d'ignorer la taille intrinsèque réelle de l'image et d'utiliser la taille fournie par les attributs. La matrice contenant l'image aurait donc ces dimensions et calculer <code>naturalWidth</code>/<code>naturalHeight</code> sur de telles images renverrait les valeurs de cet attribut. <a href="https://github.com/ojanvafai/intrinsicsize-attribute">Explications</a>, <a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">exemples</a>.</dd> - <dt><code id="attr-ismap">ismap</code></dt> + <dt><code>ismap</code></dt> <dd>Un attribut booléen dont la valeur indique si l'image fait partie d'une carte cliquable. Si c'est le cas, les coordonnées du clic seront envoyées au serveur. - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Cet attribut est uniquement autorisé si l'élément <code><img></code> descend d'un élément <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> dont l'attribut <a href="/fr/docs/Web/HTML/Element/a#attr-href"><code>href</code></a> est valide.</p> + <div class="note"> + <p><strong>Note :</strong>Cet attribut est uniquement autorisé si l'élément <code><img></code> descend d'un élément <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> dont l'attribut <a href="/fr/docs/Web/HTML/Element/a#attr-href"><code>href</code></a> est valide.</p> </div> </dd> - <dt><code id="attr-loading">loading</code> {{experimental_inline}}</dt> + <dt><code>loading</code> {{experimental_inline}}</dt> <dd>Indique comment le navigateur doit charger l'image : <ul> <li><code>eager</code> : Charge l'image immédiatement, que l'image se trouve ou non dans le viewport visible (c'est la valeur par défaut).</li> <li><code>lazy</code> : Diffère le chargement de l'image au moment où elle atteint une certaine distance de la fenêtre de visualisation, telle que définie par le navigateur. Le but est d'éviter que le réseau et la zone de stockage nécessaires à la manipulation de l'image ne soient utilisés tant qu'il n'est pas relativement sûr que celle-ci sera nécessaire. Cela permet généralement d'améliorer les performances du contenu dans la plupart des cas d'utilisation typiques. - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Le chargement n'est différé que lorsque JavaScript est activé. Il s'agit d'une mesure anti-pistage, car si un agent utilisateur prenait en charge le chargement différé lorsque les scripts sont désactivés, il serait toujours possible pour un site de suivre la position de défilement approximative d'un utilisateur tout au long d'une session, en plaçant stratégiquement des images dans le balisage d'une page de sorte qu'un serveur puisse suivre le nombre d'images demandées et le moment où elles le sont.</p> + <div class="note"> + <p><strong>Note :</strong>Le chargement n'est différé que lorsque JavaScript est activé. Il s'agit d'une mesure anti-pistage, car si un agent utilisateur prenait en charge le chargement différé lorsque les scripts sont désactivés, il serait toujours possible pour un site de suivre la position de défilement approximative d'un utilisateur tout au long d'une session, en plaçant stratégiquement des images dans le balisage d'une page de sorte qu'un serveur puisse suivre le nombre d'images demandées et le moment où elles le sont.</p> </div> </li> </ul> </dd> - <dt><code id="attr-referrerpolicy">referrerpolicy</code> {{experimental_inline}}</dt> + <dt><code>referrerpolicy</code> {{experimental_inline}}</dt> <dd>Une chaîne de caractères indiquant le référent à utiliser lors de la récupération de la ressource : <ul> <li><code>no-referrer</code> : l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> ne sera pas envoyé.</li> @@ -151,7 +148,7 @@ browser-compat: html.elements.img <li><code>unsafe-url</code> : l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> incluera l'origine et le chemin mais aucun fragment, mot de passe ou nom d'utilisateur. Ce cas de figure n'est pas sécurisé, car il peut laisser fuire des origines et des chemins de ressources protégées par TLS vers des origines non-sécurisées.</li> </ul> </dd> - <dt><code id="attr-sizes">sizes</code></dt> + <dt><code>sizes</code></dt> <dd>Une ou plusieurs chaînes de caractères séparées par des virgules, indiquant un ensemble de tailles sources. Chaque taille source est composée de : <ol> <li>D'une <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#syntax">condition sur le média</a>. Qui doit être absente pour le dernier élément de la liste.</li> @@ -162,9 +159,9 @@ browser-compat: html.elements.img <p>Les valeurs de taille de la source spécifient la taille d'affichage prévue de l'image. <a href="/fr/docs/Glossary/User_agent">Les agents utilisateurs</a> utilisent la taille actuelle de la source pour sélectionner l'une des sources fournies par l'attribut <code>srcset</code>, lorsque ces sources sont décrites à l'aide de descripteurs de largeur (<code>w</code>). La taille de la source sélectionnée affecte la <a href="/fr/docs/Glossary/Intrinsic_size">taille intrinsèque</a> de l'image (la taille d'affichage de l'image si aucun style <a href="/fr/docs/Glossary/CSS">CSS</a> n'est appliqué). Si l'attribut <code>srcset</code> est absent, ou ne contient aucune valeur avec un descripteur de largeur, alors l'attribut <code>sizes</code> n'a aucun effet.</p> </dd> - <dt><code id="attr-src">src</code></dt> + <dt><code>src</code></dt> <dd>L'<a href="/fr/docs/Glossary/URL">URL</a> de l'image. Cet attribut est obligatoire pour l'élément <code><img></code>. Pour les <a href="/fr/docs/Glossary/Browser">navigateurs</a> qui prennent en charge <code>srcset</code>, <code>src</code> est considéré comme une image candidate dont la densité de pixel vaut <code>1x</code> si aucune autre image avec cette densité n'est définie via <code>srcset</code> ou si <code>srcset</code> contient des descripteurs « <code>w</code> ».</dd> - <dt><code id="attr-srcset">srcset</code>*</dt> + <dt><code>srcset</code>*</dt> <dd>Une liste de une ou plusieurs chaînes de caractères, séparées par des virgules, qui indiquent un ensemble d'images sources parmi lequel l'agent utilisateur pourra choisir la meilleure image à afficher. Chaque chaîne de caractères se compose : <ol> <li>D'une <a href="/fr/docs/Glossary/URL">URL</a> vers une image,</li> @@ -182,13 +179,12 @@ browser-compat: html.elements.img <p>L'agent utilisateur sélectionne l'une des sources disponibles à sa discrétion. Il dispose ainsi d'une marge de manœuvre importante pour adapter sa sélection en fonction de choses comme les préférences de l'utilisateur ou les conditions de <a href="/fr/docs/Glossary/Bandwidth">bande passante</a>. Voir notre <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Tutoriel sur les images responsives</a> pour un exemple.</p> </dd> - <dt><code id="attr-width">width</code></dt> + <dt><code>width</code></dt> <dd>La largeur intrinsèque de l'image en pixels. Doit être un nombre entier sans unité.</dd> - <dt><code id="attr-usemap">usemap</code></dt> + <dt><code>usemap</code></dt> <dd>Le fragment d'URL (commençant avec #) d'une <a href="/fr/docs/Web/HTML/Element/map">carte d'images</a> associée à cet élément. <div class="note"> - <p><b>Note :</b></p> - <p>Cet attribut ne peut pas être utilisé si l'élément <code><img></code> est un descendant d'un élément <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> ou d'un élément <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>.</p> + <p><strong>Note :</strong>Cet attribut ne peut pas être utilisé si l'élément <code><img></code> est un descendant d'un élément <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> ou d'un élément <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>.</p> </div> </dd> </dl> @@ -196,9 +192,8 @@ browser-compat: html.elements.img <h3 id="deprecated_attributes">Attributs obsolètes</h3> <dl> - <dt><code id="attr-align">align</code> {{deprecated_inline}}</dt> - <dd>L'alignement de l'image selon le contexte qui l'entoure. En HTML5, on privilégiera les propriétés CSS <a href="/fr/docs/Web/CSS/float"><code>float</code></a> et/ou <a href="/fr/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> voire la propriété <a href="/fr/docs/Web/CSS/object-position"><code>object-position</code></a> qui permet de positionner l'image au sein de la boîte de l'élément. Les valeurs autorisées sont :</dd> - <dd> + <dt><code>align</code> {{deprecated_inline}}</dt> + <dd><p>L'alignement de l'image selon le contexte qui l'entoure. En HTML5, on privilégiera les propriétés CSS <a href="/fr/docs/Web/CSS/float"><code>float</code></a> et/ou <a href="/fr/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> voire la propriété <a href="/fr/docs/Web/CSS/object-position"><code>object-position</code></a> qui permet de positionner l'image au sein de la boîte de l'élément. Les valeurs autorisées sont :</p> <dl> <dt><code>top</code></dt> <dd>Équivalent à <code>vertical-align: top;</code> ou à <code>vertical-align: text-top;</code></dd> @@ -212,20 +207,19 @@ browser-compat: html.elements.img <dd>Équivalent à <code>float: right;</code></dd> </dl> </dd> - <dt><code id="attr-border">border</code> {{deprecated_inline}}</dt> + <dt><code>border</code> {{deprecated_inline}}</dt> <dd>La largeur d'une bordure autour de l'image. Utilisez plutôt la propriété <a href="/fr/docs/Glossary/CSS">CSS</a> <a href="/fr/docs/Web/CSS/border"><code>border</code></a>.</dd> - <dt><code id="attr-hspace">hspace</code> {{deprecated_inline}}</dt> + <dt><code>hspace</code> {{deprecated_inline}}</dt> <dd>Le nombre de pixels blancs à insérer à droite et à gauche de l'image. En HTML5, on privilégiera la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>.</dd> - <dt><code id="attr-longdesc">longdesc</code> {{deprecated_inline}}</dt> - <dd>Un lien vers une description plus détaillée de l'image. Les valeurs possibles sont une URL ou un identifiant (<a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a>) d'un élément. - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Cet attribut est mentionné dans la dernière version du <a href="/fr/docs/Glossary/W3C">W3C</a>, <a href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a>, mais a été supprimé du <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">HTML Living Standard</a> du <a href="/fr/docs/Glossary/WHATWG">WHATWG</a>. Son avenir est incertain ; les auteurs devraient utiliser une alternative <a href="/fr/docs/Glossary/WAI">WAI</a>-<a href="/fr/docs/Glossary/ARIA">ARIA</a> telle que <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby"><code>aria-describedby</code></a> ou <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-details"><code>aria-details</code></a>.</p> + <dt><code>longdesc</code> {{deprecated_inline}}</dt> + <dd><p>Un lien vers une description plus détaillée de l'image. Les valeurs possibles sont une URL ou un identifiant (<a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a>) d'un élément.</p> + <div class="note"> + <p><strong>Note :</strong>Cet attribut est mentionné dans la dernière version du <a href="/fr/docs/Glossary/W3C">W3C</a>, <a href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a>, mais a été supprimé du <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">HTML Living Standard</a> du <a href="/fr/docs/Glossary/WHATWG">WHATWG</a>. Son avenir est incertain ; les auteurs devraient utiliser une alternative <a href="/fr/docs/Glossary/WAI">WAI</a>-<a href="/fr/docs/Glossary/ARIA">ARIA</a> telle que <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby"><code>aria-describedby</code></a> ou <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-details"><code>aria-details</code></a>.</p> </div> </dd> - <dt><code id="attr-name">name</code> {{deprecated_inline}}</dt> + <dt><code>name</code> {{deprecated_inline}}</dt> <dd>Un nom pour l'élément. Utilisez plutôt l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a>.</dd> - <dt><code id="attr-vspace">vspace</code> {{deprecated_inline}}</dt> + <dt><code>vspace</code> {{deprecated_inline}}</dt> <dd>Le nombre de pixels blancs à insérer en dessous et au-dessus de l'image. En HTML5, on privilégiera la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>.</dd> </dl> @@ -282,9 +276,8 @@ browser-compat: html.elements.img <p>{{EmbedLiveSample("using_the_srcset_and_sizes_attributes", "100%", 450)}}</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Pour observer l'effet du redimensionnement, vous devrez consulter <a href="/fr/docs/Web/HTML/Element/img/Using_the_srcset_and_sizes_attributes">l'exemple sur une page séparée</a> afin de pouvoir modifier la taille de la zone.</p> +<div class="note"> + <p><strong>Note :</strong>Pour observer l'effet du redimensionnement, vous devrez consulter <a href="/fr/docs/Web/HTML/Element/img/Using_the_srcset_and_sizes_attributes">l'exemple sur une page séparée</a> afin de pouvoir modifier la taille de la zone.</p> </div> <h2 id="security_and_privacy_concerns">Sécurité et vie privée</h2> diff --git a/files/fr/web/html/element/index.html b/files/fr/web/html/element/index.html index 0f479e43f2..d07bd5c022 100644 --- a/files/fr/web/html/element/index.html +++ b/files/fr/web/html/element/index.html @@ -12,11 +12,10 @@ translation_of: Web/HTML/Element --- <div>{{HTMLSidebar("Elements")}}</div> -<p class="summary">Cette page répertorie tous les <a href="/fr/docs/Glossary/Element">éléments</a> <a href="/fr/docs/Glossary/HTML">HTML</a>, qui sont créés à l'aide de <a href="/fr/docs/Glossary/Tag">balises</a>. Ils sont regroupés par fonction pour vous aider à trouver facilement ce que vous avez en tête. Une liste alphabétique de tous les éléments est fournie dans la barre latérale de la page de chaque élément ainsi que de celle-ci.</p> +<p>Cette page répertorie tous les <a href="/fr/docs/Glossary/Element">éléments</a> <a href="/fr/docs/Glossary/HTML">HTML</a>, qui sont créés à l'aide de <a href="/fr/docs/Glossary/Tag">balises</a>. Ils sont regroupés par fonction pour vous aider à trouver facilement ce que vous avez en tête. Une liste alphabétique de tous les éléments est fournie dans la barre latérale de la page de chaque élément ainsi que de celle-ci.</p> <div class="note"> - <p><b>Note :</b></p> - <p>Pour plus d'informations sur les bases des éléments et attributs HTML, voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML#elements_%e2%80%94_the_basic_building_blocks">la section sur les éléments dans l'article Introduction au HTML</a>.</p> + <p><strong>Note :</strong>Pour plus d'informations sur les bases des éléments et attributs HTML, voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML#elements_%e2%80%94_the_basic_building_blocks">la section sur les éléments dans l'article Introduction au HTML</a>.</p> </div> <h2 id="main_root">Racine principale</h2> @@ -61,13 +60,13 @@ translation_of: Web/HTML/Element <p>En plus du contenu multimédia, un document HTML peut embarquer d'autres contenus (bien que les interactions soient plutôt limitées).</p> -<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> +<p>{{HTMLRefTable("multimedia")}}</p> <h2 id="svg_and_math">SVG et MathML</h2> <p>Vous pouvez intégrer du contenu <a href="/en-US/docs/Web/SVG">SVG</a> et <a href="/en-US/docs/Web/MathML">MathML</a> directement dans des documents HTML, en utilisant les éléments <a href="/fr/docs/Web/SVG/Element/svg"><code><svg></code></a> et <a href="/fr/docs/Web/MathML/Element/math"><code><math></code></a>.</p> -<table class="standard-table"> +<table class="no-markdown"> <thead> <tr> <th scope="col">Élément</th> @@ -76,11 +75,11 @@ translation_of: Web/HTML/Element </thead> <tbody> <tr> - <td style="vertical-align: top;"><a href="/fr/docs/Web/SVG/Element/svg"><code><svg></code></a></td> + <td><a href="/fr/docs/Web/SVG/Element/svg"><code><svg></code></a></td> <td>L'élément <code>svg</code> est un conteneur qui définit un nouveau système de coordonnées et une <a href="/fr/docs/Web/SVG/Attribute/viewBox">vue</a>. Il est utilisé comme élément le plus externe des documents SVG, mais il peut également être utilisé pour intégrer un fragment SVG à l'intérieur d'un document SVG ou HTML.</td> </tr> <tr> - <td style="vertical-align: top;"><a href="/fr/docs/Web/MathML/Element/math"><code><math></code></a></td> + <td><a href="/fr/docs/Web/MathML/Element/math"><code><math></code></a></td> <td>L'élément de niveau supérieur en MathML est <code><math></code>. Chaque instance MathML valide doit être enveloppée dans des balises <code><math></code>. En outre, vous ne devez pas imbriquer un deuxième élément <code><math></code> dans un autre, mais vous pouvez avoir un nombre arbitraire d'autres éléments enfants dans celui-ci.</td> </tr> </tbody> @@ -124,9 +123,8 @@ translation_of: Web/HTML/Element <h2 id="obsolete_and_deprecated_elements">Éléments obsolètes ou dépréciés</h2> -<div class="notecard warning"> - <p><b>Attention :</b></p> - <p>Ces éléments sont d'anciens éléments HTML qui sont désormais dépréciés et qui ne devraient plus être utilisés. <strong>Ces éléments ne doivent pas être utilisés dans de nouveaux projets et doivent être remplacés dans les anciens projets dès que possible.</strong> Ces éléments uniquement sont listés ici à des fins d'information.</p> +<div class="warning"> + <p><strong>Attention :</strong> Ces éléments sont d'anciens éléments HTML qui sont désormais dépréciés et qui ne devraient plus être utilisés. <strong>Ces éléments ne doivent pas être utilisés dans de nouveaux projets et doivent être remplacés dans les anciens projets dès que possible.</strong> Ces éléments uniquement sont listés ici à des fins d'information.</p> </div> -<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p>
\ No newline at end of file diff --git a/files/fr/web/html/element/input/button/index.html b/files/fr/web/html/element/input/button/index.html index f86eba3bcf..02a4e420e0 100644 --- a/files/fr/web/html/element/input/button/index.html +++ b/files/fr/web/html/element/input/button/index.html @@ -11,33 +11,29 @@ translation_of: Web/HTML/Element/input/button --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} de type <strong><code>button</code></strong> sont affichés comme des boutons poussoirs qui peuvent être programmés afin de contrôler des fonctionnalités de la page via un gestionnaire d'évènement (la plupart du temps pour l'évènement {{event("click")}}).</span></p> +<p>Les éléments {{HTMLElement("input")}} de type <strong><code>button</code></strong> sont affichés comme des boutons poussoirs qui peuvent être programmés afin de contrôler des fonctionnalités de la page via un gestionnaire d'évènement (la plupart du temps pour l'évènement {{event("click")}}).</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> -<p><strong>Note </strong>: Bien que les éléments <code><input></code> de type <code>"button"</code> représentent toujours des éléments HTML valides, l'élément {{HTMLElement("button")}}, plus récent, est la meilleure méthode pour créer des boutons hors d'un formulaire. Il est aussi possible d'insérer des éléments HTML dans l'étiquette du bouton, ce qui permet notamment d'avoir des images.</p> +<p><strong>Note :</strong> Bien que les éléments <code><input></code> de type <code>"button"</code> représentent toujours des éléments HTML valides, l'élément {{HTMLElement("button")}}, plus récent, est la meilleure méthode pour créer des boutons hors d'un formulaire. Il est aussi possible d'insérer des éléments HTML dans l'étiquette du bouton, ce qui permet notamment d'avoir des images.</p> </div> <h2 id="Valeur">Valeur</h2> <p>L'attribut {{htmlattrxref("value", "input")}} d'un t'el élément contient une chaîne de caractères qui est utilisée comme étiquette pour le bouton (autrement dit, comme texte affiché sur le bouton).</p> -<div id="summary-example3"> +<h3 id="Exemple_1">Exemple 1</h3> <pre class="brush: html"><input type="button" value="Bouton cliquer"></pre> -</div> -<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> +<p>{{EmbedLiveSample("Exemple_1", 650, 30)}}</p> +<h3 id="Exemple_2">Exemple 2</h3> <p>Si on n'indique aucune valeur, le bouton sera vide :</p> -<div id="summary-example1"> <pre class="brush: html"><input type="button"></pre> -</div> -<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> +<p>{{EmbedLiveSample("Exemple_2", 650, 30)}}</p> <h2 id="Utiliser_les_boutons_<input>">Utiliser les boutons <code><input></code></h2> @@ -77,7 +73,6 @@ function updateBtn() { <p>Dans l'exemple qui suit, on définit <kbd>s</kbd> comme raccourci (autrement dit, il faudra appuyer sur la touche <kbd>s</kbd> avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf. <code><a href="/fr/docs/Web/HTML/Attributs_universels/accesskey">accesskey</a></code> pour la liste de ces touches).</p> -<div id="accesskey-example1"> <pre class="brush: html"><form> <input type="button" value="Démarrer la machine" accesskey="s"> </form> @@ -85,8 +80,7 @@ function updateBtn() { </pre> </div> -<div class="hidden"> -<pre class="brush: js">var btn = document.querySelector('input'); +<pre class="brush: js hidden">var btn = document.querySelector('input'); var txt = document.querySelector('p'); btn.addEventListener('click', updateBtn); @@ -100,30 +94,25 @@ function updateBtn() { txt.textContent = 'La machine est arrêtée.'; } }</pre> -</div> <p>{{EmbedLiveSample("Ajouter_des_raccourcis_clavier", 650, 100)}}</p> <div class="note"> -<p><strong>Note </strong>: Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.</p> +<p><strong>Note :</strong> Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.</p> </div> <h3 id="Désactiver_et_activer_un_bouton">Désactiver et activer un bouton</h3> <p>Pour désactiver un bouton, il suffit d'ajouter l'attribut universel {{htmlattrxref("disabled")}} :</p> -<div id="disable-example1"> <pre class="brush: html"><input type="button" value="Je suis désactivé" disabled></pre> -</div> <p>Il est possible d'activer ou de désactiver des boutons lors de de l'utilisation de la page en modifiant l'attribut <code>disabled</code> de l'élément dans le DOM. Dans l'exemple qui suit, le bouton est initialement activé et si on appuie dessus : il devient désactivé (c'est ce que fait la ligne de code <code>btn.disabled = true</code>). La fonction {{domxref("WindowTimers.setTimeout","setTimeout()")}} est ensuite utilisée afin de réinitialiser le bouton après deux secondes.</p> -<div class="hidden"> -<h6 id="Hidden_code_1">Hidden code 1</h6> +<h4 id="Exemple_1">Exemple 1</h4> +<pre class="brush: html hidden"><input type="button" value="Activé"></pre> -<pre class="brush: html"><input type="button" value="Activé"></pre> - -<pre class="brush: js">var btn = document.querySelector('input'); +<pre class="brush: js hidden">var btn = document.querySelector('input'); btn.addEventListener('click', disableBtn); @@ -137,23 +126,22 @@ function disableBtn() { }</pre> </div> -<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p> +<p>{{EmbedLiveSample("Exemple_1", 650, 60)}}</p> <p>Si l'attribut <code>disabled</code> n'est pas fourni, il est hérité depuis l'élément parent. De cette façon, on peut activer/désactiver des groupes d'éléments en les plaçant dans un conteneur (par exemple un élément {{HTMLElement("fieldset")}}) et en indiquant <code>disabled</code> sur le conteneur.</p> <p>C'est ce qu'illustre l'exemple suivant. Il est semblable à l'exemple précédent mais l'attribut <code>disabled</code> est activé sur l'élément <code><fieldset></code> lorsqu'on appuie sur le premier bouton. Les trois autres boutons sont donc désactivés pendant deux secondes.</p> -<div class="hidden"> -<h6 id="Hidden_code_2">Hidden code 2</h6> +<h4 id="Exemple_2">Exemple 2</h4> -<pre class="brush: html"><fieldset> +<pre class="brush: html hidden"><fieldset> <legend>Groupe de boutons </legend> <input type="button" value="Bouton 1"> <input type="button" value="Bouton 2"> <input type="button" value="Bouton 3"> </fieldset></pre> -<pre class="brush: js">var btn = document.querySelector('input'); +<pre class="brush: js hidden">var btn = document.querySelector('input'); var fieldset = document.querySelector('fieldset'); btn.addEventListener('click', disableBtn); @@ -164,12 +152,11 @@ function disableBtn() { fieldset.disabled = false; }, 2000); }</pre> -</div> -<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p> +<p>{{EmbedLiveSample("Exemple_2", 650, 60)}}</p> <div class="note"> -<p><strong>Note </strong>: À la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p> +<p><strong>Note :</strong> À la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p> </div> <h2 id="Validation">Validation</h2> @@ -190,8 +177,7 @@ function disableBtn() { <p>Votre navigateur ne semble pas prendre en charge cette fonctionnalité.</p> </canvas></pre> -<div class="hidden"> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { margin: 0; overflow: hidden; background: #ccc; @@ -218,7 +204,6 @@ input[type="range"] { position: relative; bottom: 5px; }</pre> -</div> <pre class="brush: js">var canvas = document.querySelector('.myCanvas'); var width = canvas.width = window.innerWidth; diff --git a/files/fr/web/html/element/input/checkbox/index.html b/files/fr/web/html/element/input/checkbox/index.html index 6961d790b7..a2e5726900 100644 --- a/files/fr/web/html/element/input/checkbox/index.html +++ b/files/fr/web/html/element/input/checkbox/index.html @@ -15,17 +15,15 @@ translation_of: Web/HTML/Element/input/checkbox <div>{{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> -<p><strong>Note </strong>: <a href="/fr/docs/Web/HTML/Element/input/radio">Les boutons radio</a> sont semblables aux cases à cocher mais il existe une différence importante : les boutons radio permettent de sélectionner une seule valeur parmi plusieurs alors que les cases à cocher permettent de cocher/décocher plusieurs valeurs d'un groupe.</p> +<p><strong>Note :</strong> <a href="/fr/docs/Web/HTML/Element/input/radio">Les boutons radio</a> sont semblables aux cases à cocher mais il existe une différence importante : les boutons radio permettent de sélectionner une seule valeur parmi plusieurs alors que les cases à cocher permettent de cocher/décocher plusieurs valeurs d'un groupe.</p> </div> <h2 id="Valeur">Valeur</h2> <p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la case à cocher. Cette chaîne de caractères n'est pas affichée côté client mais est envoyée au serveur comme valeur associée à la donnée envoyée avec le nom de la case à cocher. Par exemple :</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter"> <label for="subscribeNews">Souhaitez-vous vous abonner à la newsletter ?</label> @@ -42,7 +40,7 @@ translation_of: Web/HTML/Element/input/checkbox <p>Si l'attribut <code>value</code> n'était pas renseigné, la valeur par défaut sera <code>on</code> (dans l'exemple, les données envoyées au serveur auraient la forme <code>subscribe=on</code>).</p> <div class="note"> -<p><strong>Note</strong> : Si la case à cocher n'est pas cochée lorsque le formulaire est envoyé, aucune valeur n'est envoyée au serveur pour indiquer cet état (autrement dit, le client n'envoie pas quelque chose comme <code>value=unchecked</code>) ; la valeur n'est pas transmise au serveur du tout.</p> +<p><strong>Note :</strong> Si la case à cocher n'est pas cochée lorsque le formulaire est envoyé, aucune valeur n'est envoyée au serveur pour indiquer cet état (autrement dit, le client n'envoie pas quelque chose comme <code>value=unchecked</code>) ; la valeur n'est pas transmise au serveur du tout.</p> </div> <h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> @@ -90,7 +88,7 @@ translation_of: Web/HTML/Element/input/checkbox <p>Dans l'exemple qui suit, on affiche différentes cases à cocher pour représenter les intérets d'un utilisateur (voir l'exemple complet dans la section {{anch("Exemples")}}).</p> -<pre class="brush: html notranslate"><fieldset> +<pre class="brush: html"><fieldset> <legend>Veuillez sélectionner vos intérêts :</legend> <div> <input type="checkbox" id="coding" name="interest" value="coding"> @@ -104,13 +102,13 @@ translation_of: Web/HTML/Element/input/checkbox <p>{{EmbedLiveSample('Gérer_plusieurs_cases_à_cocher', 600, 100)}}</p> -<p>Dans cet exemple on voit que chaque case à cocher utilise le même attribut <code>name</code>. Si les deux cases sont cochées lorsque le formulaire est envoyé, la chaîne des paires nom/valeur qui sera envoyée au serveur sera : <code>interest=coding&interest=music</code>. Lorsque les données parviennent au serveur, on peut ainsi récupérer un tableau des valeurs sélctionnées (voir <a class="question-hyperlink" href="https://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable">Gérer plusieurs cases à cocher avec une seule variable côté serveur</a> par exemple).</p> +<p>Dans cet exemple on voit que chaque case à cocher utilise le même attribut <code>name</code>. Si les deux cases sont cochées lorsque le formulaire est envoyé, la chaîne des paires nom/valeur qui sera envoyée au serveur sera : <code>interest=coding&interest=music</code>. Lorsque les données parviennent au serveur, on peut ainsi récupérer un tableau des valeurs sélctionnées (voir <a href="https://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable">Gérer plusieurs cases à cocher avec une seule variable côté serveur</a> par exemple).</p> <h3 id="Cocher_certaines_cases_par_défaut">Cocher certaines cases par défaut</h3> <p>Afin qu'une case à cocher soit sélectionnée par défaut, il suffit de placer l'attribut booléen <code>checked</code>. Voir l'exemple qui suit :</p> -<pre class="brush: html notranslate"><fieldset> +<pre class="brush: html"><fieldset> <legend>Veuillez sélectionner vos intérêts</legend> <div> <input type="checkbox" id="coding" name="interest" value="coding" checked> @@ -134,7 +132,7 @@ translation_of: Web/HTML/Element/input/checkbox <p>Il existe un état indéterminé pour les cases à cocher qui indique que la case n'est ni cochée, ni décochée mais indéterminéee. Cet état peut être obtenu via la propriété <code>indeterminate</code> d'un élément {{domxref("HTMLInputElement")}} en JavaScript (il est impossible d'obtenir cet état en utilisant uniquement du HTML) :</p> -<pre class="brush: js notranslate">inputInstance.indeterminate = true;</pre> +<pre class="brush: js">inputInstance.indeterminate = true;</pre> <p>Dans la plupart des navigateurs, une case à cocher dans un état indéterminé est représentée avec une ligne horizontale en travers de la case.</p> @@ -148,40 +146,42 @@ translation_of: Web/HTML/Element/input/checkbox <p>Dans cet exemple, l'état <code>indeterminate</code> est utilisé afin d'indiquer qu'on possède certains ingrédients mais pas suffisamment pour une recette.</p> -<pre class="brush: js notranslate" id="line1"><span> var overall = document.querySelector('input[id="EnchTbl"]'); - var ingredients = document.querySelectorAll('ul input'); +<pre class="brush: js"> +var overall = document.querySelector('input[id="EnchTbl"]'); +var ingredients = document.querySelectorAll('ul input'); - overall.addEventListener('click', function(e) { - e.preventDefault(); - }); +overall.addEventListener('click', function(e) { + e.preventDefault(); +}); - for(var i = 0; i </span><span>< </span><span>ingredients.length; i++) { - ingredients[i].addEventListener('click', updateDisplay); - } +for(var i = 0; i < ingredients.length; i++) { + ingredients[i].addEventListener('click', updateDisplay); +} - function updateDisplay() { - var checkedCount = 1; - for(var i = 0; i </span><span>< </span><span>ingredients.length; i++) { - if(ingredients[i].checked) { - checkedCount++; - } +function updateDisplay() { + var checkedCount = 1; + for(var i = 0; i < ingredients.length; i++) { + if(ingredients[i].checked) { + checkedCount++; } - if(checkedCount === 0) { - overall.checked = false; - overall.indeterminate = false; - } else if(checkedCount </span><span>===</span><span> ingredients.length) { - overall.checked = true; - overall.indeterminate = false; - } else { - overall.checked = false; - overall.indeterminate = true; - } - }</span></pre> + } + if(checkedCount === 0) { + overall.checked = false; + overall.indeterminate = false; + } else if(checkedCount === ingredients.length) { + overall.checked = true; + overall.indeterminate = false; + } else { + overall.checked = false; + overall.indeterminate = true; + } +} +</pre> <p>{{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}}</p> <div class="note"> -<p><strong>Note</strong> : Si vous envoyez un formulaire avec une case à cocher dans un état indéterminé, le résultat obtenu est le même que si la case avait été décochée : aucune donnée n'est envoyée au serveur.</p> +<p><strong>Note :</strong> Si vous envoyez un formulaire avec une case à cocher dans un état indéterminé, le résultat obtenu est le même que si la case avait été décochée : aucune donnée n'est envoyée au serveur.</p> </div> <h2 id="Validation">Validation</h2> @@ -192,7 +192,7 @@ translation_of: Web/HTML/Element/input/checkbox <p>Dans l'exemple suivant, on développe l'exemple vu précédemment avec les groupes de cases à cocher : il y a cette fois plus d'options et un champ texte libre qui permet de saisir une autre valeur. Pour cela on utilise un bloc de code JavaScript et quelques règles CSS pour la mise en forme.</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <fieldset> <legend>Veuillez sélectionner vos intérêts</legend> <div> @@ -226,7 +226,7 @@ translation_of: Web/HTML/Element/input/checkbox </fieldset> </form></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -263,7 +263,7 @@ legend { <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">var otherCheckbox = document.querySelector('input[value="other"]'); +<pre class="brush: js">var otherCheckbox = document.querySelector('input[value="other"]'); var otherText = document.querySelector('input[id="otherValue"]'); otherText.style.visibility = 'hidden'; diff --git a/files/fr/web/html/element/input/color/index.html b/files/fr/web/html/element/input/color/index.html index 3a06d2a084..4fe3dd2319 100644 --- a/files/fr/web/html/element/input/color/index.html +++ b/files/fr/web/html/element/input/color/index.html @@ -11,14 +11,12 @@ translation_of: Web/HTML/Element/input/color --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} de type <code><strong>"color"</strong></code> permettent de sélectionner une couleur via une interface (un sélecteur de couleur) ou en saisissant le code hexadécimal de la couleur au format <code>"#rrggbb"</code>. Ce format de valeur peut être utilisé en CSS.</span></p> +<p>Les éléments {{HTMLElement("input")}} de type <code><strong>"color"</strong></code> permettent de sélectionner une couleur via une interface (un sélecteur de couleur) ou en saisissant le code hexadécimal de la couleur au format <code>"#rrggbb"</code>. Ce format de valeur peut être utilisé en CSS.</p> <p>L'apparence du contrôle de sélection des couleurs peut grandement varier d'un navigateur à un autre et d'un système d'exploitation à un autre. Pour certains navigateurs, seul un champ textuel sera affiché afin de saisir le code de la couleur (avec des mécanismes de validation vérifiant le format), pour d'autres, ce sera le sélecteur de couleur du système d'exploitation qui sera utilisé et pour d'autres encore, ce sera un sélecteur de couleur spécifique.</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-color.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Valeur">Valeur</h2> <p>L'attribut {{htmlattrxref("value", "input")}} d'un élément <code><input type="color"></code> est une chaîne de caractères sur 7 caractères qui correspond au code de la couleur en représentation hexadécimale RGB. Autrement dit, le premier caractère est un croisillon (#) , les deux suivants indiquent la composante rouge (R) de la couleur, les deux suivants indiquent la couleur verte (G pour <em>Green</em> en anglais) et les deux suivants indiquent la composante bleue (B) de la couleur. La valeur respecte nécessairement ce format et n'est jamais vide.</p> @@ -35,7 +33,7 @@ translation_of: Web/HTML/Element/input/color <p>Il est possible de créer un sélecteur de couleur qui emploie une valeur par défaut :</p> -<pre class="brush: html notranslate"><input type="color" value="#ff0000"></pre> +<pre class="brush: html"><input type="color" value="#ff0000"></pre> <p>{{EmbedLiveSample("Fournir_une_couleur_par_défaut", 700, 30)}}</p> @@ -45,7 +43,7 @@ translation_of: Web/HTML/Element/input/color <p>Comme pour les différents éléments {{HTMLElement("input")}}, deux évènements peuvent être utilisés afin de détecter une modification de la couleur : {{event("input")}} et {{event("change")}}. <code>input</code> est déclenché sur l'élément <code><input></code> à chaque fois que la couleur change. L'évènement <code>change</code> est déclenché lorsque l'utilisateur ferme le sélecteur de couleur. Dans tous les cas, il est possible de déterminer la nouvelle valeur de l'élément grâce à {{domxref("HTMLInputElement.value", "value")}}.</p> -<pre class="brush: js notranslate">colorPicker.addEventListener("input", updateFirst, false); +<pre class="brush: js">colorPicker.addEventListener("input", updateFirst, false); colorPicker.addEventListener("change", watchColorPicker, false); function watchColorPicker(event) { @@ -57,23 +55,9 @@ function watchColorPicker(event) { <h3 id="Sélectionner_la_valeur">Sélectionner la valeur</h3> -<p>Si l'implémentation du navigateur n'affiche pas de sélecteur de couleur mais un champ texte, il est possible de sélectionner la valeur du texte avec la méthode {{domxref("HTMLInputElement.select", "select()")}}. Si le navigateur affiche un sélecteur de couleur, <code>select()</code> ne fera rien.</p> - -<pre class="brush: js notranslate">colorWell.select();</pre> - -<h3 id="Différences_daspect">Différences d'aspect</h3> - -<p>Comme mentionné précédemment, lorsqu'un navigateur ne prend pas en charge l'affichage d'un sélecteur de couleur, c'est un champ texte qui sera affiché. Par exemple, sous Safari 10.1, on peut voir le résultat suivant :</p> - -<p><img alt="Screenshot of the example taken in Safari." src="https://mdn.mozillademos.org/files/14899/input-color-safari.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> - -<p>Avec Firefox Firefox 55, on aura cet affichage :</p> - -<p><img alt="Screenshot of the example taken in Firefox 55 for macOS" src="https://mdn.mozillademos.org/files/14901/input-color-firefox.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> - -<p>Pour ce deuxième cas, en cliquant sur le carré coloré, cela ouvrira le sélecteur de couleur natif du système d'exploitation :</p> +<p>Si l'implémentation du navigateur n'affiche pas de sélecteur de couleur mais un champ texte, il est possible de sélectionner la valeur du texte avec la méthode {{domxref("HTMLInputElement.select", "select()")}}. Si le navigateur affiche un sélecteur de couleur, <code>select()</code> ne fera rien. Soyez conscient⋅e de ce comportement afin d'adapter votre code à ce cas.</p> -<p><img alt="Screenshot of the element with the color picker open in Firefox Mac." src="https://mdn.mozillademos.org/files/14903/input-with-picker-firefox-mac.png" style="border-style: solid; border-width: 1px; height: 405px; width: 682px;"></p> +<pre class="brush: js">colorWell.select();</pre> <h2 id="Validation">Validation</h2> @@ -87,7 +71,7 @@ function watchColorPicker(event) { <p>Le fragment de code HTML utilisé est relativement simple. On utilise quelques paragraphes descriptifs ainsi qu'un élément {{HTMLElement("input")}} de type <code>"color"</code> dont l'identifiant est <code>"colorWell"</code> (c'est la valeur de cette couleur qu'on utilisera pour changer la couleur du texte des paragraphes).</p> -<pre class="brush: html notranslate"><p>Un exemple qui illustre l'utilisation de <code>&lt;input type="color"&gt;</code>.</p> +<pre class="brush: html"><p>Un exemple qui illustre l'utilisation de <code>&lt;input type="color"&gt;</code>.</p> <label for="colorWell">Couleur :</label> <input type="color" value="#ff0000" id="colorWell"> @@ -102,7 +86,7 @@ function watchColorPicker(event) { <p>Tout d'abord, on établit certains variables : une pour la couleur du sélecteur et une autre couleur pour la couleur par défaut. On ajoute un gestionnaire {{event("load")}} afin de lancer les actions de démarrage lorsque la page est chargée.</p> -<pre class="brush: js notranslate">var colorWell +<pre class="brush: js">var colorWell var defaultColor = "#0000ff"; window.addEventListener("load", startup, false); @@ -112,7 +96,7 @@ window.addEventListener("load", startup, false); <p>Lorsque la page est chargée, l'évènement <code>"load"</code> est déclenché et la fonction <code>startup()</code> est donc appelée :</p> -<pre class="brush: js notranslate">function startup() { +<pre class="brush: js">function startup() { colorWell = document.querySelector("#colorWell"); colorWell.value = defaultColor; colorWell.addEventListener("input", updateFirst, false); @@ -129,7 +113,7 @@ window.addEventListener("load", startup, false); <p>On dispose de deux fonctions qui gèrent les modifications de couleurs. La fonction <code>updateFirst()</code> permet de répondre à l'évènement <code>input</code> et modifie la couleur du premier paragraphe dans le document en utilisant la nouvelle valeur saisie. Étant donné que les évènements <code>input</code> ont lieu à chaque fois qu'un ajustement est fait, cette fonction sera appelée sans cesse lorsque le sélecteur de couleur est utilisé.</p> -<pre class="brush: js notranslate">function updateFirst(event) { +<pre class="brush: js">function updateFirst(event) { var p = document.querySelector("p"); if (p) { @@ -139,7 +123,7 @@ window.addEventListener("load", startup, false); <p>Lorsque le sélecteur est fermé, cela signifie que la valeur ne sera plus modifié avant une prochaine ouverture du sélecteur. Un évènement <code>change</code> est alors envoyé et cela déclenche alors l'appel de la fonction <code>updateAll()</code> :</p> -<pre class="brush: js notranslate">function updateAll(event) { +<pre class="brush: js">function updateAll(event) { document.querySelectorAll("p").forEach(function(p) { p.style.color = event.target.value; }); diff --git a/files/fr/web/html/element/input/date/index.html b/files/fr/web/html/element/input/date/index.html index bfc6bb094f..f8107d4b50 100644 --- a/files/fr/web/html/element/input/date/index.html +++ b/files/fr/web/html/element/input/date/index.html @@ -15,22 +15,8 @@ translation_of: Web/HTML/Element/input/date <div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'apparence du contrôle affiché dépend du navigateur utilisé et la prise en charge de cette fonctionnalité est hétérogène (cf. la section {{anch("Compatibilité des navigateurs")}} pour plus de détails). Pour les navigateurs qui ne prennent pas en charge ce type d'élément <code><input></code>, c'est un simple <code><a href="/fr/docs/Web/HTML/Element/input/text"><input type="text"></a></code> qui sera affiché.</p> -<p>Si votre navigateur actuel prend en charge cette fonctionnalité, voici ce à quoi ressemble le contrôle sous Chrome/Opera :</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p> - -<p>et pour Edge :</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p> - -<p>Le contrôle de sélection de date pour Firefox ressemble à :</p> - -<p><img alt="Interface utilisateur du sélecteur de date dans Firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p> - <h2 id="Valeur">Valeur</h2> <p>Une chaîne de caractères qui représente la valeur de la date saisie dans le contrôle. Le format à respecter est décrit dans dans <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates">cette section de l'article sur les formats</a>. Il est possible de fournir une valeur par défaut en renseignant l'attribut {{htmlattrxref("value", "input")}} :</p> @@ -136,7 +122,7 @@ dateControl.value = '2017-06-01';</pre> <p>On ne peut donc ici que sélectionner une date en avril 2017. Seule la partie du contrôle consacrée aux jours sera éditable et on ne pourra pas sélectionner d'autres mois ou années..</p> <div class="note"> -<p><strong>Note </strong>: On devrait également pouvoir utiliser l'attribut {{htmlattrxref("step", "input")}} afin de faire varier le nombre de jours pour l'incrément de la date (par exemple afin de ne pouvoir sélectionner que les samedis). Cependant, cette fonctionnalité ne semble être présente dans aucune implémentation au moment où nous écrivons ces lignes.</p> +<p><strong>Note :</strong> On devrait également pouvoir utiliser l'attribut {{htmlattrxref("step", "input")}} afin de faire varier le nombre de jours pour l'incrément de la date (par exemple afin de ne pouvoir sélectionner que les samedis). Cependant, cette fonctionnalité ne semble être présente dans aucune implémentation au moment où nous écrivons ces lignes.</p> </div> <h3 id="Contrôler_la_taille_du_champ_de_saisie">Contrôler la taille du champ de saisie</h3> @@ -168,10 +154,6 @@ dateControl.value = '2017-06-01';</pre> <p>{{EmbedLiveSample('Validation', 600, 100)}}</p> -<p>Voici une capture d'écran illustrant ce qui se produit dans un navigateur qui implémente cette fonctionnalité :</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> - <p>Voici la feuille de style utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme un indicateur selon que la valeur est valide ou non. On place cet indicateur dans un élément {{htmlelement("span")}} séparé car pour Chrome, le contenu généré dans les pseudo-classes est intégré dans le contrôle du formulaire et ne peut être mis en forme ou affiché correctement.</p> <pre class="brush: css">div { @@ -196,14 +178,12 @@ input:valid+span:after { }</pre> <div class="warning"> -<p><strong>Attention !</strong> La validation des valeurs du formulaire HTML par le client ne remplace pas la validation côté serveur afin de vérifier que le format est bien celui attendu. Il est tout à fait possible de modifier le code HTML afin d'outrepasser ces mécanismes de validation ou d'envoyer directement des données au serveur. Il est donc nécessaire de valider les données lorsque celles-ci parviennent au serveur afin d'éviter les effets indésirables entraînés par l'injection de données mal formatées ou malveillantes.</p> +<p><strong>Attention :</strong> La validation des valeurs du formulaire HTML par le client ne remplace pas la validation côté serveur afin de vérifier que le format est bien celui attendu. Il est tout à fait possible de modifier le code HTML afin d'outrepasser ces mécanismes de validation ou d'envoyer directement des données au serveur. Il est donc nécessaire de valider les données lorsque celles-ci parviennent au serveur afin d'éviter les effets indésirables entraînés par l'injection de données mal formatées ou malveillantes.</p> </div> <h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> -<p>Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est l'hétérogénéité de la prise en charge par les différents navigateurs. Par exemple, le sélecteur de date implémenté dans Firefox pour Android ressemblera à :</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p> +<p>Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est l'hétérogénéité de la prise en charge par les différents navigateurs.</p> <p>Les navigateurs qui ne prennent pas en charge ces contrôles utiliseront à la place des champs texte. Toutefois, cette solution de contournement entraîne deux problèmes : le premier concerne l'homogénéité de l'interface utilisateur (le contrôle affiché ne sera pas le même) et le second concerne la gestion des données.</p> @@ -234,8 +214,7 @@ input:valid+span:after { <p>Si vous tentez d'envoyer ce formulaire, vous pourrez voir que le navigateur affiche un message d'erreur et met en évidence la valeur invalide si la valeur saisie ne correspond pas au motif <code>nnnn-nn-nn</code> (avec <code>n</code> un chiffre entre 0 et 9). Bien entendu, cela n'empêche pas de saisir des dates invalides ou mal formatées (par exemple avec le motif <code>yyyy-dd-mm</code> alors qu'on souhaiterait avoir <code>yyyy-mm-dd</code>). Il reste donc un problème.</p> -<div class="hidden"> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; } @@ -258,7 +237,6 @@ input:valid + span:after { position: absolute; right: -18px; }</pre> -</div> <p>C'est pour cela que la meilleure solution consiste à avoir trois champs de saisie distincts à destination de l'utilisateur : un pour saisir les jours, le deuxième pour les mois et un troisième pour l'année (chacun avec un élément ({{htmlelement("select")}}). On peut également opter pour l'utilisation d'un bibliothèque JavaScript telle que <a href="https://jqueryui.com/datepicker/">le sélecteur de date jQuery (jQuery date picker)</a>.</p> @@ -310,8 +288,7 @@ input:valid + span:after { <p>Les mois sont écrits « en dur » (ce sont toujours les mêmes) alors que les valeurs pour les jours et les années sont générées dynamiquement en fonction du mois et de l'année sélectionnées (voir les commentaires ci-après qui expliquent le détail des fonctions).</p> -<div class="hidden"> -<pre class="brush: css">input:invalid+span:after { +<pre class="brush: css hidden">input:invalid+span:after { content: '✖'; padding-left: 5px; } @@ -320,7 +297,6 @@ input:valid+span:after { content: '✓'; padding-left: 5px; }</pre> -</div> <p>Une autre partie intéressante est celle où on détecte si le navigateur prend charge la fonctionnalité native <code><input type="date"></code>. Pour cela, on crée un nouvelle élément {{htmlelement("input")}} et on change son type en <code>date</code> puis ensuite, on vérifie immédiatement la valeur de son type : pour les navigateurs qui ne prennent pas en charge l'élément natif, ils renverront la valeur <code>text</code> car l'élément natif aura été « converti ». Dans ce cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui qui contient les éléments {{htmlelement("select")}}).</p> diff --git a/files/fr/web/html/element/input/datetime-local/index.html b/files/fr/web/html/element/input/datetime-local/index.html index bc4ab26cff..23f0f7da9a 100644 --- a/files/fr/web/html/element/input/datetime-local/index.html +++ b/files/fr/web/html/element/input/datetime-local/index.html @@ -16,8 +16,6 @@ translation_of: Web/HTML/Element/input/datetime-local <div>{{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <p>L'interface utilisateur du contrôle varie selon les navigateurs. La prise en charge de cette fonctionnalité est hétérogène : Chrome/Opera et Edge l'implémentent pour les navigateurs de bureau et la plupart des navigateurs mobiles l'implémentent. Pour les navigateurs qui n'implémentent pas cette fonctionnalité, le contrôle utilisé est celui de <code><a href="/fr/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> <p>Les secondes ne sont pas prises en charge.</p> @@ -28,21 +26,11 @@ translation_of: Web/HTML/Element/input/datetime-local <p>Certains navigateurs pourront utiliser un contrôle avec un texte simple et vérifier que la valeur date/heure est correcte avant de l'envoyer au serveur. Toutefois, ce contrôle ayant lieu côté client, vous devrez nécessairement vérifier le bon format de la donnée côté serveur.</p> -<p>Voici, ci-après, un aperçu du contrôle obtenu dans un navigateur fonctionnel. En cliquant sur la flèche vers le bas, cela fait apparaître un sélecteur de date et il faut ensuite saisir l'heure manuellement. Pour Chrome / Opera :</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14949/datetime-local-chrome.png" style="display: block; height: 224px; margin: 0px auto; width: 280px;"></p> - -<p>Pour Edge, le contrôle associé à <code>datetime-local</code> se décompose en deux sélecteurs : un pour la date et un pour l'heure qui apparaissent quand on clique sur les éléments respectifs du champ :</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14953/datetime-local-picker-edge1.png" style="display: block; height: 398px; margin: 0px auto; width: 320px;"></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14955/datetime-local-picker-edge2.png" style="display: block; height: 394px; margin: 0px auto; width: 264px;"></p> - <h2 id="Valeur">Valeur</h2> <p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la date saisie dans le contrôle. Le format utilisable est décrit dans <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_locales">cette section de l'article sur les formats</a>. Il est possible d'indiquer une date par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} :</p> -<pre class="brush: html notranslate"><label for="party">Veuillez saisir une date et une heure pour la fête :</label> +<pre class="brush: html"><label for="party">Veuillez saisir une date et une heure pour la fête :</label> <input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30"></pre> <p>{{EmbedLiveSample('Valeur', 600, 60)}}</p> @@ -50,12 +38,12 @@ translation_of: Web/HTML/Element/input/datetime-local <p>On notera ici que le format de la date affichée n'est pas celui utilisé pour écrire la valeur de l'attribut <code>value</code>. Le format d'affichage de la date sera choisi en fonction de la locale du système d'exploitation de l'utilisateur. En revanche, l'attribut <code>value</code> sera toujours formaté de la façon suivante : <code>yyyy-MM-ddThh:mm</code>. Lorsque la valeur est envoyée au serveur, elle aura donc ce format : <code>partydate=2017-06-01T08:30</code>.</p> <div class="note"> -<p><strong>Note </strong>: Attention si les données sont envoyées avec la méthode HTTP <code><a href="/fr/docs/HTTP/Méthode/GET">GET</a></code>, les deux points (:) devront être échappés pour être intégrés dans les paramètres de l'URL. Avec l'exemple précédent, cela signifie qu'on enverra <code>partydate=2017-06-01T08%3A30</code>. Si on souhaite échapper une chaîne de caractères de la même façon en JavaScript, on pourra utiliser {{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}.</p> +<p><strong>Note :</strong> Attention si les données sont envoyées avec la méthode HTTP <code><a href="/fr/docs/HTTP/Méthode/GET">GET</a></code>, les deux points (:) devront être échappés pour être intégrés dans les paramètres de l'URL. Avec l'exemple précédent, cela signifie qu'on enverra <code>partydate=2017-06-01T08%3A30</code>. Si on souhaite échapper une chaîne de caractères de la même façon en JavaScript, on pourra utiliser {{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}.</p> </div> <p>En JavaScript, Il est également possible de définir la valeur de la date utilisée dans le contrôle via la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p> -<pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="datetime-local"]'); +<pre class="brush: js">var dateControl = document.querySelector('input[type="datetime-local"]'); date.value = '2017-06-01T08:30';</pre> <p>Plusieurs méthodes, fournies par JavaScript (cf. {{jsxref("Date")}}), peuvent être utilisée afin de convertir des informations numériques en une telle chaîne de caractères (par exemple la méthode {{jsxref("Date.toISOString()")}}).</p> @@ -117,7 +105,7 @@ date.value = '2017-06-01T08:30';</pre> <p>Dans sa forme la plus simple, <code><input type="datetime-local"></code> peut s'utilisere avec un élément <code><input></code> et un élément {{htmlelement("label")}} comme ceci :</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <label for="party">Veuillez choisir une date et une heure pour la fête :</label> <input id="party" type="datetime-local" name="partydate"> </form></pre> @@ -128,7 +116,7 @@ date.value = '2017-06-01T08:30';</pre> <p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de restreindre la fenêtre de dates qu'il est possible de choisir. Dans l'exemple qui suit, on indique une date/heure minimale au <code>2017-06-01T08:30</code> et une date maximale au <code>2017-06-30T16:30</code>:</p> -<pre class="brush: html notranslate"> <form> +<pre class="brush: html"> <form> <label for="party">Veuillez choisir une date et une heure pour la fête :</label> <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"> </form></pre> @@ -143,7 +131,7 @@ date.value = '2017-06-01T08:30';</pre> </ul> <div class="note"> -<p><strong>Note</strong> : L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin de faire varier l'incrément, en jours, pour sélectionner la date (par exemple afin de ne pouvoir sélectionner que les samedi). En revanche, à l'heure où nous rédigeons cet article, aucune implémentation ne semble proposer cette fonctionnalité.</p> +<p><strong>Note :</strong> L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin de faire varier l'incrément, en jours, pour sélectionner la date (par exemple afin de ne pouvoir sélectionner que les samedi). En revanche, à l'heure où nous rédigeons cet article, aucune implémentation ne semble proposer cette fonctionnalité.</p> </div> <h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> @@ -156,11 +144,11 @@ date.value = '2017-06-01T08:30';</pre> <p>Ainsi, si vous créez un système où l'utilisateur est déjà connecté et que le fuseau horaire est déjà connu, celui-ci peut être fourni via un champ de type <code><a href="/fr/docs/Web/HTML/Element/input/hidden">hidden</a></code>. Par exemple :</p> -<pre class="brush: html notranslate"><input type="hidden" id="timezone" name="timezone" value="-08:00"></pre> +<pre class="brush: html"><input type="hidden" id="timezone" name="timezone" value="-08:00"></pre> <p>Sinon, on peut proposer la sélection d'un fuseau horaire grâce à un élément {{htmlelement("select")}} :</p> -<pre class="brush: html notranslate"><select name="timezone_offset" id="timezone-offset" class="span5"> +<pre class="brush: html"><select name="timezone_offset" id="timezone-offset" class="span5"> <option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option> <option value="-11:00">(GMT -11:00) Midway Island, Samoa</option> <option value="-10:00">(GMT -10:00) Hawaii</option> @@ -175,7 +163,7 @@ date.value = '2017-06-01T08:30';</pre> <p>Dans ces deux situations, le fuseau horaire et la date sont transmis au serveur séparément (c'est côté serveur que le choix de la représentation pour le stockage est effectué).</p> <div class="note"> -<p><strong>Note</strong> : Le fragment de code précédent est tiré de <a href="https://gist.github.com/nodesocket/3919205">Tous les fuseaux horaires du monde dans un élément <code><select></code></a>.</p> +<p><strong>Note :</strong> Le fragment de code précédent est tiré de <a href="https://gist.github.com/nodesocket/3919205">Tous les fuseaux horaires du monde dans un élément <code><select></code></a>.</p> </div> <h2 id="Validation">Validation</h2> @@ -186,7 +174,7 @@ date.value = '2017-06-01T08:30';</pre> <p>Prenons un exemple avec des dates mini/maxi et le champ obligatoire :</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label> <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required> @@ -201,13 +189,10 @@ date.value = '2017-06-01T08:30';</pre> <p>{{EmbedLiveSample('Validation', 600, 120)}}</p> -<p>Voici une capture d'écran illustrant un message d'erreur dans un navigateur qui prend en charge cette fonctionnalité :</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14957/datetime-local-error.png" style="display: block; height: 100px; margin: 0px auto; width: 558px;"></p> <p>Vous trouverez ensuite la feuille de style CSS utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que sa valeur est valide ou non. Les icônes indicatives sont placées dans un élément {{htmlelement("span")}} séparé car, sous Chrome, le contenu généré automatiquement est placé à l'intériur du contrôle et ne peut pas être affiché/mis en forme efficacement.</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; display: flex; align-items: center; @@ -229,14 +214,13 @@ input:valid+span:after { }</pre> <div class="warning"> -<p><strong>Important </strong>: La validation des données du formulaire HTML par le navigateur ne doit pas remplacer la validation des données reçues sur le serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le document HTML afin d'outrepasser ces contraintes (voire d'envoyer directement des données au serveur sans passer par le formulaire HTML). Si les mécanismes, côté serveur, échouent à valider les données, cela pourrait avoir des conséquences néfastes sur le stockage ou la sécurité de l'application.</p> +<p><strong>Attention :</strong> La validation des données du formulaire HTML par le navigateur ne doit pas remplacer la validation des données reçues sur le serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le document HTML afin d'outrepasser ces contraintes (voire d'envoyer directement des données au serveur sans passer par le formulaire HTML). Si les mécanismes, côté serveur, échouent à valider les données, cela pourrait avoir des conséquences néfastes sur le stockage ou la sécurité de l'application.</p> </div> <h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> -<p>Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est la prise en charge hétérogène des différents navigateurs : seuls Opera et Chrome implémentent cette fonctionnalité parmi les navigateurs de bureau et la plupart des navigateurs mobiles la prennent en charge. Voici, par exemple, l'interface utilisateur du sélecteur <code>datetime-local</code> de Firefox pour Android :</p> +<p>Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est la prise en charge hétérogène des différents navigateurs : seuls Opera et Chrome implémentent cette fonctionnalité parmi les navigateurs de bureau et la plupart des navigateurs mobiles la prennent en charge.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14951/datetime-local-fxa.png" style="display: block; height: 640px; margin: 0px auto; width: 360px;"></p> <p>Les navigateurs qui n'implémentent pas cette fonctionnalité afficheront un contrôle de saisie textuelle. Toutefois, cela entraîne des problème de cohérence d'interface graphique d'une part et de représentation des données d'autre part.</p> @@ -255,7 +239,7 @@ input:valid+span:after { <p>Une façon de contourner ce problème est de placer un attribut {{htmlattrxref("pattern", "input")}} dans l'élément <code><input type="</code><code>datetime-local"></code>. Bien que cet élément n'utilise pas cet attribut, s'il est converti en <code><input type="text"></code> par le navigateur, le motif sera alors utilisé. Vous pouvez par exemple essayer le code suivant dans un navigateur qui ne prend pas en charge <code><input type="datetime-local"></code> :</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label> <input id="party" type="datetime-local" name="partydate" @@ -277,8 +261,7 @@ input:valid+span:after { <p>Bref, il y a toujours un problème.</p> -<div class="hidden"> -<pre class="brush: css notranslate">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; } @@ -301,7 +284,6 @@ input:valid + span:after { position: absolute; right: -18px; }</pre> -</div> <p>Actuellement, la meilleure façon de gérer les dates/heures d'une façon homogène pour les différents navigateurs est d'utiliser différents contrôles (via des éléments {{htmlelement("select")}}) pour sélectionner l'année, le jour, le mois, la date et l'heure. Il existe également des bibliothèques JavaScript telles que <a href="https://jqueryui.com/datepicker/">le sélecteur de date jQuery</a> et <a href="https://timepicker.co/">le sélecteur d'heure jQuery</a>.</p> @@ -313,7 +295,7 @@ input:valid + span:after { <p>Voici le fragment de code HTML utilisé :</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div class="nativeDateTimePicker"> <label for="party">Veuillez sélectionner une date et une heure pour la fête :</label> <input type="datetime-local" id="party" name="bday"> @@ -367,8 +349,7 @@ input:valid + span:after { <p>Les mois disponibles sont codés de façon statique (ce sont toujours les mêmes). En revanche, les valeurs pour les jours et les années sont générées dynamiquement selon le mois et l'année courante (voir les commentaires du script ci-après). Les heures et les minutes sont également générées dynamiquement.</p> -<div class="hidden"> -<pre class="brush: css notranslate">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -392,11 +373,10 @@ input:valid+span:after { content: '✓'; padding-left: 5px; }</pre> -</div> <p>Une partie intéressante du code est celle où on détecte la prise en charge de la fonctionnalité. Pour cela, dans le script, on crée un nouvel élément {{htmlelement("input")}} auquel on attribut le type <code>datetime-local</code> puis on vérifie son type juste après. Pour les navigateurs qui ne prennent pas en charge ce type de contrôle, le type aura changé et sera <code>text</code>. Si c'est le cas, on masque le contrôle natif et on utilise l'interface utilisateur alternative (composée avec les éléments ({{htmlelement("select")}})).</p> -<pre class="brush: js notranslate">// On définit les différentes variables +<pre class="brush: js">// On définit les différentes variables var nativePicker = document.querySelector('.nativeDateTimePicker'); var fallbackPicker = document.querySelector('.fallbackDateTimePicker'); var fallbackLabel = document.querySelector('.fallbackLabel'); diff --git a/files/fr/web/html/element/input/email/index.html b/files/fr/web/html/element/input/email/index.html index 84846c4aa5..2e6f223117 100644 --- a/files/fr/web/html/element/input/email/index.html +++ b/files/fr/web/html/element/input/email/index.html @@ -9,12 +9,10 @@ translation_of: Web/HTML/Element/input/email --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"email"</strong></code> permettent à un utilisateur de saisir et d'éditer une adresse mail ou, si l'attribut {{htmlattrxref("multiple", "input")}} est indiqué, une liste d'adresses mail. La valeur saisie est automatiquement validée afin de vérifier que le champ est vide ou que l'adresse (ou la liste d'adresses) est correcte.</span> Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées automatiquement selon le cas.</p> +<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"email"</strong></code> permettent à un utilisateur de saisir et d'éditer une adresse mail ou, si l'attribut {{htmlattrxref("multiple", "input")}} est indiqué, une liste d'adresses mail. La valeur saisie est automatiquement validée afin de vérifier que le champ est vide ou que l'adresse (ou la liste d'adresses) est correcte. Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées automatiquement selon le cas.</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-shorter")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <div class="note"> <p><strong>Note :</strong> Les navigateurs qui ne prennent pas en charge le type <code>"email"</code> emploieront un élément <code><input></code> <code><a href="/fr/docs/Web/HTML/Element/input/text">"text"</a></code> à la place.</p> </div> @@ -236,9 +234,7 @@ translation_of: Web/HTML/Element/input/email <p>On peut également fournir une valeur par défaut en remplissant l'attribut {{htmlattrxref("value", "input")}} de l'élément :</p> -<div id="Default_value"> <pre class="brush: html"><input type="email" value="default@example.com"></pre> -</div> <p>{{EmbedLiveSample("Fournir_une_option_par_défaut", 600, 40)}}</p> @@ -260,14 +256,12 @@ translation_of: Web/HTML/Element/input/email <p>Lorsqu'on utilise l'élément {{HTMLElement("datalist")}} et l'élément {{HTMLElement("option")}}, le navigateur affichera les adresses suggérées lors de la saisie, généralement sous la forme d'une liste déroulante ou d'une popup. Bien que les détails d'interface puissent dépendre de chaque navigateur, cliquer sur le champ d'édition affichera généralement la liste sous forme d'un volet déroulant. Ensuite, la liste est restreinte au fur et à mesure des caractères saisis.</p> -<p><img alt="Animation: Using keyboard entry to filter the list of suggested email addresses" src="https://mdn.mozillademos.org/files/14831/html-input-email1.gif" style="border-style: solid; border-width: 1px; height: 168px; width: 352px;"></p> - <h2 id="Validation">Validation</h2> <p>Il existe deux niveaux de validation pour les champs de saisie de type <code>"email"</code>. Tout d'abord, on a le niveau standard qui permet de vérifier automatiquement si l'adresse électronique est bien formatée. Ensuite, il est possible d'ajouter un filtre spécifique si besoin de répondre à des contraintes plus spécifiques.</p> <div class="warning"> -<p><strong>Attention !</strong> La validation du formulaire HTML par l'agent utilisateur ne saurait remplacer la vérification des données saisies côté serveur. En effet, il est relativement simple de modifier le document HTML avec son navigateur pour outrepasser les contraintes exprimées ici (quitte à les transmettre directement au serveur). Si les données ne sont pas vérifiées côté serveur, cela pourra entraîner des erreurs (valeurs trop grande, au mauvais format) voire des failles de sécurité.</p> +<p><strong>Attention :</strong> La validation du formulaire HTML par l'agent utilisateur ne saurait remplacer la vérification des données saisies côté serveur. En effet, il est relativement simple de modifier le document HTML avec son navigateur pour outrepasser les contraintes exprimées ici (quitte à les transmettre directement au serveur). Si les données ne sont pas vérifiées côté serveur, cela pourra entraîner des erreurs (valeurs trop grande, au mauvais format) voire des failles de sécurité.</p> </div> <h3 id="Validation_simple">Validation simple</h3> @@ -288,8 +282,7 @@ translation_of: Web/HTML/Element/input/email <p>Le navigateur vérifie d'une part que l'adresse électronique est une adresse correctement formatée <em>et</em> que celle-ci respecte l'expression rationnelle indiquée avec {{htmlattrxref("pattern", "input")}}. Voici un exemple d'application :</p> -<div class="hidden"> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { font: 16px sans-serif; } @@ -308,7 +301,6 @@ label { label::after { content: ":"; }</pre> -</div> <pre class="brush: html"><form> <div class="emailBox"> @@ -333,9 +325,9 @@ label::after { <p>Si on regarde le champ de saisie pour l'adresse électronique, on voit que les deux attributs {{htmlattrxref("size", "input")}} et {{htmlattrxref("maxlength", "input")}} ont la valeur 64 (on affiche une boîte de saisie large de 64 caractères et on ne peut saisir une adresse électronique d'au plus 64 caractères). L'attribut {{htmlattrxref("required", "input")}} est présent et l'adresse électronique est donc obligatoire pour l'envoi du formulaire.</p> -<p>L'attribut {{htmlattrxref("placeholder", "input")}} indique qu'une valeur semblable à <code>"nomutilisateur@beststartupever.com"</code> est attendue. L'intérêt de cette valeur est double : on indique qu'il faut saisir une adresse mail et on suggère que cette adresse provient d'un compte beststartupever.com. Le type <code>"email"</code> permet de valider le texte saisi afin de vérifier qu'il s'agit d'une adresse électronique valide. Si la valeur saisie n'est pas une adresse valide, un message d'erreur sera affiché :</p> +<p>L'attribut {{htmlattrxref("placeholder", "input")}} indique qu'une valeur semblable à <code>"nomutilisateur@beststartupever.com"</code> est attendue. L'intérêt de cette valeur est double : on indique qu'il faut saisir une adresse mail et on suggère que cette adresse provient d'un compte beststartupever.com. Le type <code>"email"</code> permet de valider le texte saisi afin de vérifier qu'il s'agit d'une adresse électronique valide. Si la valeur saisie n'est pas une adresse valide, un message d'erreur sera affiché :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14855/enter-valid-email-address.png" style="height: 125px; width: 530px;"></p> +<p><img alt="" src="enter-valid-email-address.png"></p> <p>Si on utilise uniquement les attributs qu'on vient de décrire, on restreint les valeurs saisissables aux adresses électroniques valides de 64 caractères. Or, on veut également valider le fait que l'adresse respecte le format "<em>nomutilisateur</em>@beststartupever.com". C'est pourquoi on utilise l'attribut {{htmlattrxref("pattern", "input")}} avec la valeur <code>".+@beststartupever.com"</code>. Cette valeur est une expression rationnelle qui permet de vérifier que la chaîne de caractère contient un ou plusieurs caractères quelconques, ensuite suivi d'une arobase (@) puis du nom de domaine "beststartupever.com".</p> @@ -345,7 +337,7 @@ label::after { <p>C'est pour cela qu'on indique la chaîne de caractères "Merci de fournir uniquement une adresse Best Startup Ever". Le message complet obtenu sera donc : "Le texte saisi ne correspond pas au motif requis. Merci de fournir uniquement une adresse Best Startup Ever."</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14853/email-pattern-match-bad.png" style="height: 140px; width: 536px;"></p> +<p><img alt="" src="email-pattern-match-bad.png"></p> <div class="note"> <p><strong>Note :</strong> Si vous rencontrez des problèmes à propos de l'expression rationnelle, n'hésitez pas à ouvrir la console du navigateur. Cette dernière peut contenir des messages d'erreur aidant à diagnostiquer et résoudre le problème.</p> diff --git a/files/fr/web/html/element/input/file/index.html b/files/fr/web/html/element/input/file/index.html index 101a6a2f1b..924ba06e65 100644 --- a/files/fr/web/html/element/input/file/index.html +++ b/files/fr/web/html/element/input/file/index.html @@ -9,18 +9,16 @@ translation_of: Web/HTML/Element/input/file --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"file"</code></strong> permettent à un utilisateur de sélectionner un ou plusieurs fichiers depuis leur appareil et de les <em>uploader</em> vers un serveur via <a href="/fr/docs/Web/Guide/HTML/Formulaires">un formulaire</a> ou grâce à du code JavaScript <a href="/fr/docs/Using_files_from_web_applications">via l'API <em>File</em></a>.</span></p> +<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"file"</code></strong> permettent à un utilisateur de sélectionner un ou plusieurs fichiers depuis leur appareil et de les <em>uploader</em> vers un serveur via <a href="/fr/docs/Web/Guide/HTML/Formulaires">un formulaire</a> ou grâce à du code JavaScript <a href="/fr/docs/Using_files_from_web_applications">via l'API <em>File</em></a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Valeur">Valeur</h2> <p>L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente le chemin du/des fichier(s) sélectionné(s). Les autres fichiers peuvent être identifiés grâce à la propriété <code>HTMLInputElement.files</code>.</p> -<div class="note"><strong>Note :</strong> - +<div class="note"> + <p><strong>Note :</strong></p> <ol> <li>Si plusieurs fichiers sont sélectionnés, la chaîne de caractères représente le chemin du premier fichier sélectionné. Il est possible d'accéder aux autres fichiers en JavaScript <a href="/en-US/docs/Using_files_from_web_applications#Getting_information_about_selected_file(s)">grâce à la propriété <code>FileList</code></a>.</li> <li>Si aucun fichier n'est sélectionné, la chaîne de caractères sera vide (<code>""</code>).</li> @@ -72,7 +70,9 @@ translation_of: Web/HTML/Element/input/file <p>Une chaîne de caractères qui indique la caméra à utiliser pour capturer des photos et des vidéos si l'attribut <code>accept</code> indique que le fichier est de ce type. Lorsque <code>capture</code> vaut <code>"user"</code>, cela indique que la caméra qui fait face à l'utilisateur devrait être utilisée. Si l'attribut vaut <code>"environment"</code>, c'est la caméra qui est tournée vers l'extérieur devrait être utilisée. Si l'attribut est absent, l'agent utilisateur pourra décider de laquelle utiliser. Si la caméra souhaitée par l'attribut n'est pas disponible, l'agent utilisateur pourra utiliser une autre caméra de l'appareil.</p> -<div class="note"><strong>Note :</strong> <code>capture</code> était auparavant un attribut booléen qui, lorsqu'il était présent, indiquait que les capteurs de l'appareil (caméra/micro) devaient être utilisés plutôt qu'un fichier.</div> +<div class="note"> + <p><strong>Note :</strong> <code>capture</code> était auparavant un attribut booléen qui, lorsqu'il était présent, indiquait que les capteurs de l'appareil (caméra/micro) devaient être utilisés plutôt qu'un fichier.</p> +</div> <h3 id="htmlattrdeffiles">{{htmlattrdef("files")}}</h3> @@ -139,18 +139,16 @@ translation_of: Web/HTML/Element/input/file </div> </form></pre> -<div class="hidden"> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; }</pre> -</div> <p>Ce fragment de code HTML produira le résultat suivant :</p> <p>{{EmbedLiveSample('Un_exemple_simple', 650, 60)}}</p> <div class="note"> -<p><strong>Note</strong> : Vous pouvez également trouver cet exemple sur GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">avec le code source</a> et <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">la démonstration</a>.</p> +<p><strong>Note :</strong> Vous pouvez également trouver cet exemple sur GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">avec le code source</a> et <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">la démonstration</a>.</p> </div> <p>Quel que soit l'appareil ou le système d'exploitation de l'utilisateur, l'élément <code><input type="file"></code> fournit un bouton qui ouvre un sélecteur de fichier permettant de choisir un fichier.</p> @@ -204,24 +202,20 @@ translation_of: Web/HTML/Element/input/file </div> </form></pre> -<div class="hidden"> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; }</pre> -</div> <p>Voici le résultat produit :</p> <p>{{EmbedLiveSample('Restreindre_les_types_de_fichiers_acceptés', 650, 60)}}</p> <div class="note"> -<p><strong>Note</strong> : Vous pouvez également consulter cet exemple sur GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">voir le code source</a> et <a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">la démonstration <em>live</em></a>.</p> +<p><strong>Note :</strong> Vous pouvez également consulter cet exemple sur GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">voir le code source</a> et <a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">la démonstration <em>live</em></a>.</p> </div> <p>Le résultat peut sembler similaire à l'exemple précédent mais lorsque vous essayer de sélectionner un fichier, vous verrez que le sélecteur ne permet de sélectionner que les fichiers du/des type(s) indiqué(s) (il peut y avoir certaines différences selons les navigateurs et les systèmes d'exploitation).</p> -<p><img alt="Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable." src="https://mdn.mozillademos.org/files/15183/file-chooser.png" style="margin: 0 auto;"></p> - <p>L'attribut <code>accept</code> ne permet pas de valider/contrôler le type réel du/des fichier(s) sélectionné(s). Il fournit simplement une indication au navigateur pour aider l'utilisateur à sélectionner les bons fichiers. Toutefois, dans la plupart des cas, l'utilisateur peut toujours choisir une option dans le sélecteur afin de pouvoir choisir un fichier d'un autre type.</p> <p>Dans tous les cas (et comme pour les autres éléments envoyés au serveur), il est nécessaire de contrôler les données reçues par un mécanisme de validation côté serveur.</p> @@ -245,7 +239,7 @@ input.value = "toto"; <p>Dans l'exemple qui suit, on présente sélecteur de fichiers plus avancé, qui tire parti des informations disponibles grâce à la propriété <code>HTMLInputElement.files</code>. On montre aussi quelques astuces.</p> <div class="note"> -<p><strong>Note </strong>: Le code source complet de cet exemple est disponible sur GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">voir la démonstration <em>live</em> associée</a>). Nous n'expliquerons pas ici la feuille de style CSS mais plutôt le code JavaScript qui contient la logique.</p> +<p><strong>Note :</strong> Le code source complet de cet exemple est disponible sur GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">voir la démonstration <em>live</em> associée</a>). Nous n'expliquerons pas ici la feuille de style CSS mais plutôt le code JavaScript qui contient la logique.</p> </div> <p>Tout d'abord, voici le fragment de code HTML utilisé :</p> @@ -263,8 +257,7 @@ input.value = "toto"; </div> </form></pre> -<div class="hidden"> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -317,7 +310,6 @@ form label:active, form button:active { background-color: #0D3F8F; color: white; }</pre> -</div> <p>Pour l'instant, le fragment HTML ressemble à ce que nous avons déjà vu avant, rien de spécial.</p> @@ -331,7 +323,7 @@ var preview = document.querySelector('.preview'); input.style.opacity = 0;</pre> <div class="note"> -<p><strong>Note : </strong>La propriété <a href="/fr/docs/Web/CSS/opacity"><code>opacity</code></a> est utilisée pour masquer l'élément <code><input></code> plutôt que <a href="/fr/docs/Web/CSS/visibility"><code>visibility: hidden</code></a> ou <a href="/fr/docs/Web/CSS/display"><code>display: none</code></a>. En effet, avec ces derniers les technologies d'assistance (lecteurs d'écran par exemple) comprendraient que l'élément n'est pas interactif et ne peut pas être utilisé.</p> +<p><strong>Note :</strong> La propriété <a href="/fr/docs/Web/CSS/opacity"><code>opacity</code></a> est utilisée pour masquer l'élément <code><input></code> plutôt que <a href="/fr/docs/Web/CSS/visibility"><code>visibility: hidden</code></a> ou <a href="/fr/docs/Web/CSS/display"><code>display: none</code></a>. En effet, avec ces derniers les technologies d'assistance (lecteurs d'écran par exemple) comprendraient que l'élément n'est pas interactif et ne peut pas être utilisé.</p> </div> <p>Ensuite, on ajoute <a href="/fr/docs/Web/API/EventTarget/addEventListener">un gestionnaire d'évènement</a> à l'élément <code><input></code> afin de réaliser certaines actions lorsque sa valeur (c'est-à-dire les fichiers sélectionnés) change. Ici, le gestionnaire d'évènement appelle la fonction <code>updateImageDisplay()</code> que nous décrirons juste après.</p> diff --git a/files/fr/web/html/element/input/hidden/index.html b/files/fr/web/html/element/input/hidden/index.html index 159089ca79..5ec54ea676 100644 --- a/files/fr/web/html/element/input/hidden/index.html +++ b/files/fr/web/html/element/input/hidden/index.html @@ -12,25 +12,25 @@ translation_of: Web/HTML/Element/input/hidden <p>Les éléments {{HTMLElement("input")}} de type <code><strong>"hidden"</strong></code> permettent aux développeurs web d'inclure des données qui ne peuvent pas être vues ou modifiées lorsque le formulaire est envoyé. Cela permet par exemple d'envoyer l'identifiant d'une commande ou un jeton de sécurité unique. Les champs de ce type sont invisibles sur la page.</p> <div class="note"> -<p><strong>Note </strong>: La ligne de code suivante est suivie du rendu associé... si l'exemple fonctionne correctement, vous ne devriez rien voir :)</p> +<p><strong>Note :</strong> La ligne de code suivante est suivie du rendu associé... si l'exemple fonctionne correctement, vous ne devriez rien voir :)</p> </div> -<div id="Basic_example"> +<h2>Exemple simple</h2> + <pre class="brush: html"><input id="prodId" name="prodId" type="hidden" value="xm234jq"></pre> -<p>{{EmbedLiveSample('Basic_example', 600, 40)}}</p> +<p>{{EmbedLiveSample('Exemple_simple', 600, 40)}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Attention, les évènements DOM <code><a href="/fr/docs/Web/API/HTMLElement/input_event">input</a></code> et <code><a href="/fr/docs/Web/API/HTMLElement/change_event">change</a></code> ne s'appliquent pas à ce type de contrôle. Les champs masqués ne peuvent pas recevoir le focus, y compris en JavaScript avec <code>hiddenInput.focus()</code>).</p> </div> -</div> <h2 id="Valeur">Valeur</h2> <p>L'attribut {{htmlattrxref("value", "input")}} de l'élément contient une chaîne de caractères masquée qui est envoyée au serveur avec le formulaire. Cette valeur ne peut pas directement être éditée par l'utilisateur sur la page (mais elle est toujours accessible et modifiable via les outils de développement intégrés au navigateur).</p> <div class="warning"> -<p><strong>Attention !</strong> Bien que la valeur ne soit pas affichée sur la page, elle est visible et modifiable par l'utilisateur si ce dernier utilise les outils de développements intégrés aux navigateurs (par exemple "Afficher la source"). Le type <code>hidden</code> ne doit donc pas être utilisé comme mécanisme de sécurité.</p> +<p><strong>Attention :</strong> Bien que la valeur ne soit pas affichée sur la page, elle est visible et modifiable par l'utilisateur si ce dernier utilise les outils de développements intégrés aux navigateurs (par exemple "Afficher la source"). Le type <code>hidden</code> ne doit donc pas être utilisé comme mécanisme de sécurité.</p> </div> <h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> @@ -157,7 +157,7 @@ textarea { <p>{{EmbedLiveSample('Exemples', '100%', 200)}}</p> <div class="note"> -<p><strong>Note </strong>: Vous pouvez consulter l'exemple sur GitHub (cf. <a href="https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html">le code source</a> et <a href="https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html">la démonstration <em>live</em></a>).</p> +<p><strong>Note :</strong> Vous pouvez consulter l'exemple sur GitHub (cf. <a href="https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html">le code source</a> et <a href="https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html">la démonstration <em>live</em></a>).</p> </div> <p>Lorsque le formulaire est envoyé, les données envoyées au serveur ressembleront à :</p> diff --git a/files/fr/web/html/element/input/image/index.html b/files/fr/web/html/element/input/image/index.html index aa4a5acd16..4d3fac19f5 100644 --- a/files/fr/web/html/element/input/image/index.html +++ b/files/fr/web/html/element/input/image/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/input/image <div>{{EmbedInteractiveExample("pages/tabbed/input-image.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Valeur">Valeur</h2> <p>Les éléments <code><input type="image"></code> n'acceptent pas de valeur pour l'attribut <code>value</code>. Le chemin vers l'image à afficher est indiqué grâce à l'attribut <code>src</code>.</p> @@ -190,7 +188,7 @@ translation_of: Web/HTML/Element/input/image <p>Prenons un exemple simple qui utilise les attributs strictement nécessaires (qui fonctionnent de la même façon que pour un élément <code><img></code>) :</p> -<pre class="brush: html notranslate"><input id="image" type="image" width="100" height="30" alt="Login" +<pre class="brush: html"><input id="image" type="image" width="100" height="30" alt="Login" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"></pre> <p>{{EmbedLiveSample('Les_fonctionnalités_essentielles', 600, 50)}}</p> @@ -264,7 +262,7 @@ translation_of: Web/HTML/Element/input/image <p>Voici le fragment de code HTML utilisé :</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <p>Connectez-vous</p> <div> <label for="userId">Identifiant</label> @@ -281,7 +279,7 @@ translation_of: Web/HTML/Element/input/image <p>Ensuite, on ajoute un feuille de style CSS pour mettre en forme les éléments :</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; } @@ -300,7 +298,7 @@ label { <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <p>Connectez-vous</p> <div> <label for="userId">Identifiant</label> @@ -317,7 +315,7 @@ label { <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; } diff --git a/files/fr/web/html/element/input/index.html b/files/fr/web/html/element/input/index.html index a2433db59b..54df76bc7d 100644 --- a/files/fr/web/html/element/input/index.html +++ b/files/fr/web/html/element/input/index.html @@ -16,9 +16,7 @@ translation_of: Web/HTML/Element/input <div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<h2 id="Les_différents_types_de_champs_<input>"><a id="types" name="types">Les différents types de champs <code><input></code></a></h2> +<h2 id="Les_différents_types_de_champs_<input>">Les différents types de champs <code><input></code></h2> <p>La façon dont un élément <code><input></code> fonctionne dépend grandement de la valeur de son attribut <code>type</code>. Aussi, pour chacun de ces types, on aura une page de référence dédiée. Par défaut, lorsque l'attribut <code>type</code> n'est pas présent, il aura la valeur implicite <code>text</code>.</p> @@ -37,7 +35,8 @@ translation_of: Web/HTML/Element/input <li><code>{{HTMLElement("input/month", "month")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un mois et une année (sans fuseau horaire).</li> <li><code>{{HTMLElement("input/number", "number")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre.</li> <li><code>{{HTMLElement("input/password", "password")}}</code> : un champ texte sur une seule ligne dont la valeur est masquée. Les attributs <code>maxlength</code> et <code>minlength</code> définissent la taille maximale et minimale de la valeur à saisir dans le champ. - <div class="note"><strong>Note :</strong> Tout formulaire comportant des données sensibles doit être servi via HTTPS. Les navigateurs alertent les utilisateurs lorsque les formulaires avec de telles données sont uniquement disponibles via HTTP.</div> + <div class="note"> + <p><strong>Note :</strong> Tout formulaire comportant des données sensibles doit être servi via HTTPS. Les navigateurs alertent les utilisateurs lorsque les formulaires avec de telles données sont uniquement disponibles via HTTP.</p></div> </li> <li><code>{{HTMLElement("input/radio", "radio")}}</code> : un bouton radio qui permet de sélectionner une seule valeur parmi un groupe de différentes valeurs.</li> <li><code>{{HTMLElement("input/range", "range")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre dont la valeur exacte n'est pas importante.</li> @@ -145,7 +144,7 @@ translation_of: Web/HTML/Element/input <p>Seul un élément du document peut avoir l'attribut <code>autofocus</code>. Il n'est pas possible d'utiliser l'attribut <code>autofocus</code> sur les champs de type <code>hidden</code> car ces derniers, masqués, ne peuvent pas avoir le focus.</p> <div class="warning"> -<p><strong>Attention !</strong> Le focus automatique sur un champ de formulaire peut être source de confusion, notamment pour les personnes qui utilisent des lecteurs d'écran. En effet, lorsque <code>autofocus</code> est utilisé, les lecteurs d'écran « téléportent » l'utilisateur sur le contrôle du champ, sans aucun avertissement.</p> +<p><strong>Attention :</strong> Le focus automatique sur un champ de formulaire peut être source de confusion, notamment pour les personnes qui utilisent des lecteurs d'écran. En effet, lorsque <code>autofocus</code> est utilisé, les lecteurs d'écran « téléportent » l'utilisateur sur le contrôle du champ, sans aucun avertissement.</p> </div> <h4 id="htmlattrdef(disabled)">{{htmlattrdef("disabled")}}</h4> @@ -188,7 +187,7 @@ let hatSize = form.elements["hat-size"]; <p>Avec ce code, la variable <code>guestName</code> correspondra à l'élément {{domxref("HTMLInputElement")}} du champ <code>guest</code> et <code>hatSize</code> à l'objet pour le champ <code>hat-size</code>.</p> <div class="warning"> -<p><strong>Attention !</strong> Il est préférable de ne pas utiliser de valeurs pour <code>name</code> qui correspondent à une propriété native de l'objet du DOM car cela surchargerait la propriété préexistante avec une référence au champ concerné.</p> +<p><strong>Attention :</strong> Il est préférable de ne pas utiliser de valeurs pour <code>name</code> qui correspondent à une propriété native de l'objet du DOM car cela surchargerait la propriété préexistante avec une référence au champ concerné.</p> </div> <p>Le nom <code>_charset_</code> possède une signification spéciale. Si cette valeur est utilisée comme nom pour un élément <code><input></code> de type <code><a href="/fr/docs/Web/HTML/Element/Input/hidden">hidden</a></code>, la valeur du champ (l'attribut <code>value</code>) sera automatiquememnt renseignée par l'agent utilisateur et correspondra à l'encodage utilisé pour envoyer le formulaire.</p> @@ -205,12 +204,8 @@ let hatSize = form.elements["hat-size"]; <p><code>disabled</code> et <code>readonly</code> sont bien différents : <code>readonly</code> permet d'avoir un contrôle fonctionnel mais non éditable alors que les champs <code>disabled</code> ne fonctionnent pas comme des contrôles.</p> -<div class="blockIndicator note"> -<p><strong>Notes :</strong></p> - -<p>L'attribut <code>required</code> n'est pas autorisé sur les éléments <code><input></code> avec l'attribut <code>readonly</code>.</p> - -<p>Seuls les champs textuels peuvent être mis en lecture seule. En effet, pour les autres contrôles (ex. les case à cocher et les boutons radio), il n'y a pas de réelle différence entre l'application de <code>readonly</code> ou de <code>disabled</code>.</p> +<div class="note"> +<p><strong>Note :</strong> L'attribut <code>required</code> n'est pas autorisé sur les éléments <code><input></code> avec l'attribut <code>readonly</code>. Seuls les champs textuels peuvent être mis en lecture seule. En effet, pour les autres contrôles (ex. les case à cocher et les boutons radio), il n'y a pas de réelle différence entre l'application de <code>readonly</code> ou de <code>disabled</code>.</p> </div> <h4 id="htmlattrdef(required)">{{htmlattrdef("required")}}</h4> diff --git a/files/fr/web/html/element/input/month/index.html b/files/fr/web/html/element/input/month/index.html index 301cc38dc0..6f21f8d10d 100644 --- a/files/fr/web/html/element/input/month/index.html +++ b/files/fr/web/html/element/input/month/index.html @@ -9,21 +9,19 @@ translation_of: Web/HTML/Element/input/month --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"month"</strong></code> permettent de créer des contrôles où l'utilisateur peut saisir un mois et année. La valeur associée à un tel élément suit le format <code>"YYYY-MM"</code>, où <code>YYYY</code> représente l'année sur quatre chiffre et <code>MM</code> le mois sur deux chiffres.</span></p> +<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"month"</strong></code> permettent de créer des contrôles où l'utilisateur peut saisir un mois et année. La valeur associée à un tel élément suit le format <code>"YYYY-MM"</code>, où <code>YYYY</code> représente l'année sur quatre chiffre et <code>MM</code> le mois sur deux chiffres.</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <p>L'interface utilisateur associée à ce contrôle varie d'un navigateur à l'autre et la prise en charge de cette fonctionnalité reste encore hétérogène : seuls Chrome, Opéra et Edge implémentent cette fonctionnalité sur ordinateur et la plupart des navigateurs mobiles possèdent une implémentation. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, l'élément sera transformé en un simple <code><a href="/fr/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> <p>Si votre navigateur ne prend pas en charge ce type d'élément, voici ensuite une capture d'écran de Chrome : cliquer sur la flèche vers le bas permettra de faire apparaître un sélecteur de date qui permettra de choisir le mois et l'année.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15391/month-control-chrome.png" style="display: block; height: 216px; margin: 0px auto; width: 273px;"></p> +<p><img alt="" src="month-control-chrome.png"></p> <p>Voici un aperçu du contrôle sous Edge :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15393/month-control-edge.png" style="display: block; height: 389px; margin: 0px auto; width: 227px;"></p> +<p><img alt="" src="month-control-edge.png"></p> <h2 id="Valeur">Valeur</h2> @@ -31,12 +29,12 @@ translation_of: Web/HTML/Element/input/month <p>Il est possible de définir une valeur par défaut pour le contrôle en utilisant l'attribut {{htmlattrxref("value", "input")}} de la façon suivante :</p> -<div id="value-example-1"> +<h3 id="Exemple_1">Exemple 1</h3> + <pre class="brush: html"><label for="bday-month">Quel est le mois de votre naissance ?</label> <input id="bday-month" type="month" name="bday-month" value="2017-06"></pre> -<p>{{EmbedLiveSample('value-example-1', 600, 60)}}</p> -</div> +<p>{{EmbedLiveSample('Exemple_1', 600, 60)}}</p> <p>On notera que la façon dont la date est affichée peut varier selon la locale de l'utilisateur et être présentée sous un format différent. En revanche, d'un point de vue technique, la valeur de l'attribut <code>value</code> suivra toujours le format <code>YYYY-MM</code>.</p> @@ -44,17 +42,16 @@ translation_of: Web/HTML/Element/input/month <p>Il est également possible de manipuler la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p> -<div id="value-example-2"> -<div class="hidden"> -<pre class="brush: html"><label for="bday-month">Quel est le mois de votre naissance ?</label> +<h3 id="Exemple_2">Exemple 2</h3> + +<pre class="brush: html hidden"><label for="bday-month">Quel est le mois de votre naissance ?</label> <input id="bday-month" type="month" name="bday-month" value="2017-06"></pre> </div> -<pre class="brush: js">var monthControl = document.querySelector('input[type="month"]'); +<pre class="brush: js hidden">var monthControl = document.querySelector('input[type="month"]'); monthControl.value = '1978-06';</pre> -<p>{{EmbedLiveSample("value-example-2", 600, 60)}}</p> -</div> +<p>{{EmbedLiveSample("Exemple_2", 600, 60)}}</p> <h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> @@ -150,7 +147,7 @@ monthControl.value = '1978-06';</pre> </ul> <div class="note"> -<p><strong>Note</strong> : L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin d'ajuster le pas d'incrémentation (par exemple si on ne veut pouvoir sélectionner que les mois de début de trimestre). Toutefois, à l'heure où nous écrivons ces lignes, aucun navigateur ne semble prendre correctement en charge cette fonctionnalité.</p> +<p><strong>Note :</strong> L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin d'ajuster le pas d'incrémentation (par exemple si on ne veut pouvoir sélectionner que les mois de début de trimestre). Toutefois, à l'heure où nous écrivons ces lignes, aucun navigateur ne semble prendre correctement en charge cette fonctionnalité.</p> </div> <h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> @@ -183,7 +180,7 @@ monthControl.value = '1978-06';</pre> <p>Voici une capture d'écran qui illustre le résultat obtenu avec un navigateur prenant en charge cette fonctionnalité :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15395/month-required.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="month-required.png"></p> <p>Voici ensuite la feuille de style CSS utilisée dans l'exemple précédent. On utilise {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est invalide. Les icônes ajoutées sont placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de gérer du contenu généré à même le contrôle ni de mettre en forme ce contenu généré.</p> @@ -213,14 +210,14 @@ input:valid+span:after { }</pre> <div class="warning"> -<p><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p> +<p><strong>Attention :</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p> </div> <h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> <p>Comme évoqué plus haut, le problème principal relatif à ces contrôles est l'absence partielle de prise en charge des navigateurs. Seuls Chrome, Opera et Edge supportent ce type de contrôle sur ordinateurs et la plupart des navigateurs mobiles le prennent en charge. À titre d'exemple, voici une capture d'écran du contrôle sous Chrome pour Android :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15397/month-android.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="month-android.png"></p> <p>Les navigateurs qui ne prennent pas en charge cette fonctionnalité basculent sur un contrôle textuel classique mais cela pose problème à la fois en termes de cohérence de l'interface utilisateur et aussi par rapport à la gestion des données.</p> @@ -255,8 +252,7 @@ input:valid+span:after { <p>De plus, cela présage que l'utilisateur comprenne le format dans lequel il faut saisir la valeur. Bref, le problème subsiste.</p> -<div class="hidden"> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -280,7 +276,6 @@ input:valid+span:after { content: '✓'; padding-left: 5px; }</pre> -</div> <p>La meilleure façon de gérer la saisie de mois pour l'ensemble des navigateurs consiste actuellement à saisir le mois et l'année dans deux contrôles séparés, représentés chacun par un élément {{htmlelement("select")}}. On peut également utiliser certaines bibliothèques JavaScript telles que <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> ou le plugin <a href="http://timepicker.co/">jQuery timepicker</a>.</p> @@ -329,8 +324,7 @@ input:valid+span:after { <p>Les mois sont représentés statiquement (ce sont toujours les mêmes) et les valeurs pour les années sont générées dynamiquement à partir de l'année courante (voir les commentaires dans le code suivant).</p> -<div class="hidden"> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -354,7 +348,6 @@ input:valid+span:after { content: '✓'; padding-left: 5px; }</pre> -</div> <p>Une partie intéressante du code est celle qui permet de détecter la prise en charge de fonctionnalité. Pour détecter si le navigateur prend en charge ce contrôle, on crée un nouvel élément {{htmlelement("input")}} dont on modifie le type afin qu'il vaille <code>month</code> puis on vérifie immédiatement la valeur associée au type : les navigateurs qui ne prennent pas en charge la fonctionnalité renverront <code>text</code> car le champ <code>month</code> a automatiquement transformé en <code>text</code>. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui construit avec les éléments {{htmlelement("select")}}).</p> diff --git a/files/fr/web/html/element/input/number/index.html b/files/fr/web/html/element/input/number/index.html index 3c2b06a291..8e9cbf1e5b 100644 --- a/files/fr/web/html/element/input/number/index.html +++ b/files/fr/web/html/element/input/number/index.html @@ -10,14 +10,12 @@ translation_of: Web/HTML/Element/input/number --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>number</strong></code> permettent à un utilisateur de saisir des nombres dans un formulaires. De tels contrôles incluent des mécanismes de validation natifs afin de rejeter les valeurs non-numériques.</span> Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémenter/décrémenter la valeur grâce à la souris ou avec le doigt.</p> +<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>number</strong></code> permettent à un utilisateur de saisir des nombres dans un formulaires. De tels contrôles incluent des mécanismes de validation natifs afin de rejeter les valeurs non-numériques. Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémenter/décrémenter la valeur grâce à la souris ou avec le doigt.</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <div class="note"> -<p><strong>Note </strong>: Si un navigateur ne prend pas en charge le type <code>number</code>, le contrôle affiché sera le contrôle standard pour la saisie d'un texte (cf. <code><a href="/fr/docs/Web/HTML/Element/input/text">text</a></code>).</p> +<p><strong>Note :</strong> Si un navigateur ne prend pas en charge le type <code>number</code>, le contrôle affiché sera le contrôle standard pour la saisie d'un texte (cf. <code><a href="/fr/docs/Web/HTML/Element/input/text">text</a></code>).</p> </div> <h2 id="Valeur">Valeur</h2> @@ -81,7 +79,6 @@ translation_of: Web/HTML/Element/input/number <h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> -<div id="step-include"> <p>L'attribut <code>step</code> est un nombre qui définit la granularité de la valeur ou le mot-clé <code>any</code>. Seule les valeurs qui sont des multiples de cet attribut depuis le seuil <code>{{anch("min")}}</code> sont valides.</p> <p>Lorsque la chaîne de caractères <code>any</code> est utilisée, cela indique qu'aucun incrément spécifique n'est défini et que toute valeur (comprise entre <code>{{anch("min")}}</code> et <code>{{anch("max")}}</code>) est valide.</p> @@ -89,7 +86,6 @@ translation_of: Web/HTML/Element/input/number <div class="note"> <p><strong>Note :</strong> Lorsque les données saisies par l'utilisateur ne correspondent pas à l'incrément indiqué, l'agent utilisateur pourra arrondir à la valeur valide la plus proche (en choisissant les nombres les plus grands lorsque deux sont équidistants.</p> </div> -</div> <p>Pour les champs <code>number</code>, l'incrément par défaut est 1 et ne permet donc que de saisir des entiers si la valeur de base est entière. Ainsi, si on a <code>min</code> qui vaut -10 et <code>value</code> qui vaut 1.5, si on a <code>step</code> qui vaut 1, seules les valeurs 1.5, 2.5, 3.5,... -0.5, -1.5, -2.5,... seront valides.</p> @@ -98,17 +94,15 @@ translation_of: Web/HTML/Element/input/number <p>Les éléments <code><input type="number"></code> simplifient la saisie de valeurs numériques dans un formulaire. Lorsqu'on crée un tel contrôle, des mécanismes de validation automatiques sont appliqués afin de vérifier que le texte saisi est bien un nombre. Généralement un contrôle de saisie numérique incluera des boutons avec des curseurs pour augmenter/réduire la valeur.</p> <div class="warning"> -<p><strong>Attention !</strong> On notera qu'un utilisateur peut toujours saisir des valeurs qui ne sont pas numériques dans de tels champs (par exemple avec un navigateur de bureau). Toutefois, ce comportement semble différer selon les navigateurs (voir {{bug(1398528)}}). Les valeurs non-numériques seront considérées comme invalide (cf. {{anch("Validation")}} ci-après).</p> +<p><strong>Attention :</strong> On notera qu'un utilisateur peut toujours saisir des valeurs qui ne sont pas numériques dans de tels champs (par exemple avec un navigateur de bureau). Toutefois, ce comportement semble différer selon les navigateurs (voir {{bug(1398528)}}). Les valeurs non-numériques seront considérées comme invalide (cf. {{anch("Validation")}} ci-après).</p> </div> <div class="note"> -<p><strong>Note </strong>: Il est important de rappeler qu'un utilisateur peut tout à fait modifier le code HTML qui est utilisé. Le site ne doit donc pas se reposer sur les mécanismes de validation qui existent côté client pour considérer qu'une valeur est saine. Pour des raisons de contrôle et de sécurité, les valeurs envoyées via un formulaire doivent être vérifiées côté serveur.</p> +<p><strong>Note :</strong> Il est important de rappeler qu'un utilisateur peut tout à fait modifier le code HTML qui est utilisé. Le site ne doit donc pas se reposer sur les mécanismes de validation qui existent côté client pour considérer qu'une valeur est saine. Pour des raisons de contrôle et de sécurité, les valeurs envoyées via un formulaire doivent être vérifiées côté serveur.</p> </div> <p>De plus, les navigateurs mobiles peuvent adapter leur ergonomie en affichant un clavier adapté à la saisie de valeur numérique lorsque l'utilisateur appuie sur un tel contrôle. Voici le résultat qu'on obtient par exemple avec Firefox pour Android :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14963/number-keyboard-fxa.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> - <h3 id="Un_contrôle_simple">Un contrôle simple</h3> <p>Dans sa forme la plus simple, on peut implémenter un contrôle de saisie numérique avec le fragment HTML suivant :</p> @@ -121,7 +115,7 @@ translation_of: Web/HTML/Element/input/number <p>Un contrôle de saisie numérique considère que la valeur est valide si elle est vide ou quand un nombre est saisi. Dans les autres cas, la valeur est considérée invalide. Si l'attribut {{htmlattrxref("required", "input")}} est utilisé, la valeur vide n'est plus considérée valide.</p> <div class="note"> -<p><strong>Note </strong>: N'importe quel nombre est valide tant que c'est un nombre qui peut être représenté <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number">comme un nombre à virgule flottante</a> (autrement dit, un nombre qui n'est pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}).</p> +<p><strong>Note :</strong> N'importe quel nombre est valide tant que c'est un nombre qui peut être représenté <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number">comme un nombre à virgule flottante</a> (autrement dit, un nombre qui n'est pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}).</p> </div> <h3 id="Indicateurs_de_saisie_-_placeholders">Indicateurs de saisie - <em>placeholders</em></h3> @@ -249,7 +243,7 @@ input:valid+span:after { <p>Ici, on a utilisé les pseudo-classes {{cssxref(":invalid")}} et {{cssxref(":valid")}} afin d'afficher une icône selon le cas, à côté de l'élément {{htmlelement("span")}} ajdacent. On utilise un élément <code><span></code> séparé pour plus de flexibilité : certains navigateurs n'affichent pas le contenu généré par les pseudo-classes pour certains types de contrôle (cf. <a href="/fr/docs/Web/HTML/Element/input/date#Validation"><code><input type="date"></code></a>).</p> <div class="warning"> -<p><strong>Important </strong>: la validation des données des formulaires par le navigateur (côté client) doit toujours être complétée d'une validation des données côté serveur (l'utilisateur peut toujours modifier le HTML et envoyer les données au serveur).</p> +<p><strong>Attention :</strong> la validation des données des formulaires par le navigateur (côté client) doit toujours être complétée d'une validation des données côté serveur (l'utilisateur peut toujours modifier le HTML et envoyer les données au serveur).</p> </div> <h3 id="Utilisation_d'un_motif_de_validation">Utilisation d'un motif de validation</h3> diff --git a/files/fr/web/html/element/input/password/index.html b/files/fr/web/html/element/input/password/index.html index 29df138c29..7585571836 100644 --- a/files/fr/web/html/element/input/password/index.html +++ b/files/fr/web/html/element/input/password/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/input/password <div>{{EmbedInteractiveExample("pages/tabbed/input-password.html", "tabbed-standard")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <p>La façon dont le texte saisi est traité dépend du navigateur utilisé. Sur les appareils mobiles, par exemple, le caractère tapé est souvent laissé affiché un court instant afin que l'utilisateur puisse contrôler que c'est bien le bon caractère. Ainsi, même si le clavier est petit et viruel, on peut éviter de faire trop d'erreurs.</p> <div class="note"> @@ -30,7 +28,7 @@ translation_of: Web/HTML/Element/input/password <p>Si l'attribut {{htmlattrxref("pattern", "input")}} est indiqué, le contenu du contrôle doit respecter l'expression rationnelle indiquée par l'attribut. Pour plus d'informations, voir la section {{anch("Validation")}} ci-après.</p> <div class="note"> -<p>Note : Il n'est pas possible d'utiliser les caractères de fin de ligne (<em>Line Feed</em>) (code U+000A) et de retour chariot (<em>Carriage Return</em>) (code U+000D) dans la valeur d'un champ <code>"password"</code>. Lorsqu'on saisit la valeur, ces caractères sont retirés si besoin.</p> +<p><strong>Note :</strong> Il n'est pas possible d'utiliser les caractères de fin de ligne (<em>Line Feed</em>) (code U+000A) et de retour chariot (<em>Carriage Return</em>) (code U+000D) dans la valeur d'un champ <code>"password"</code>. Lorsqu'on saisit la valeur, ces caractères sont retirés si besoin.</p> </div> <h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> @@ -115,7 +113,7 @@ translation_of: Web/HTML/Element/input/password <p>{{EmbedLiveSample("Un_contrôle_basique", 600, 40)}}</p> -<h3 id="Paramétrer_l’autocomplétion">Paramétrer l’autocomplétion</h3> +<h3 id="Paramétrer_l'autocomplétion">Paramétrer l'autocomplétion</h3> <p>Afin de permettre au gestionnaire de mots de passe de saisir automatiquement le mot de passe, on pourra utiliser l'attribut {{htmlattrxref("autocomplete", "input")}}. Pour les mots de passe, celui-ci aura l'une des valeurs suivantes :</p> @@ -130,12 +128,10 @@ translation_of: Web/HTML/Element/input/password <dd>Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut générer un nouveau mot de passe et utiliser ce dernier pour remplir le champ. La génération automatique du mot de passe peut alors utiliser les autres attributs de l'élément. Cette valeur peut également être indiquée pour que le navigateur indique cette information d'un façon ou d'une autre.</dd> </dl> -<div id="Autocomplete_sample1"> <pre class="brush: html"><label for="userPassword">Mot de passe :</label> <input id="userPassword" type="password" autocomplete="current-password"></pre> -</div> -<p>{{EmbedLiveSample("Paramétrer_l’autocomplétion", 600, 40)}}</p> +<p>{{EmbedLiveSample("Paramétrer_l'autocomplétion", 600, 40)}}</p> <h3 id="Rendre_le_champ_obligatoire">Rendre le champ obligatoire</h3> @@ -194,12 +190,10 @@ translation_of: Web/HTML/Element/input/password <p>Dans cet exemple, il n'est possible de saisir qu'une valeur qui contient entre 4 et 8 caractères qui sont des caractères hexadécimaux.</p> -<div id="Validation_sample1"> <pre class="brush: html"><label for="hexId">Identifiant Hexa :</label> <input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}" title="Veuillez saisir un identifiant avec 4 à 8 chiffres hexadécimaux." autocomplete="nouveau-mot-de-passe"></pre> -</div> <p>{{EmbedLiveSample("Validation", 600, 40)}}</p> diff --git a/files/fr/web/html/element/input/radio/index.html b/files/fr/web/html/element/input/radio/index.html index b5a3cf3c8c..8b8fd78f46 100644 --- a/files/fr/web/html/element/input/radio/index.html +++ b/files/fr/web/html/element/input/radio/index.html @@ -14,12 +14,10 @@ translation_of: Web/HTML/Element/input/radio <div>{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>On les appelle boutons radios par analogie avec les boutons qui étaient utilisés sur les anciens postes de radios.</p> <div class="note"> -<p><strong>Note</strong> : <a href="/fr/docs/Web/HTML/Element/input/checkbox">Les cases à cocher (<em>checkboxes</em>)</a> ressemblent aux boutons radios. Toutefois, il existe une différence fondamentale : les boutons radio ne permettent de sélectionner qu'une seule option au sein d'un groupe alors que les cases à cocher permettent d'en sélectionner plusieurs.</p> +<p><strong>Note :</strong> <a href="/fr/docs/Web/HTML/Element/input/checkbox">Les cases à cocher (<em>checkboxes</em>)</a> ressemblent aux boutons radios. Toutefois, il existe une différence fondamentale : les boutons radio ne permettent de sélectionner qu'une seule option au sein d'un groupe alors que les cases à cocher permettent d'en sélectionner plusieurs.</p> </div> <h2 id="Valeur">Valeur</h2> @@ -69,7 +67,7 @@ translation_of: Web/HTML/Element/input/radio <p>Si l'attribut <code>value</code> n'est pas fourni dans le document HTML, la valeur par défaut utilisée sera <code>on</code> pour l'ensemble du groupe. Si c'était le cas avec notre exemple précédent et que l'utilisateur avait cliqué sur l'option « Téléphone » et envoyé le formulaire, les données envoyées auraient contenu <code>"contact=on"</code> ce qui ne s'avère pas très utile. Aussi, mieux vaut ne pas oublier les attributs <code>value</code> !</p> <div class="note"> -<p><strong>Note</strong> : Si aucun bouton radio n'est sélectionné au moment de l'envoi du formulaire, le groupe radio n'est pas inclus dans les données envoyées par le formulaire car il n'y a aucune valeur à fournir.</p> +<p><strong>Note :</strong> Si aucun bouton radio n'est sélectionné au moment de l'envoi du formulaire, le groupe radio n'est pas inclus dans les données envoyées par le formulaire car il n'y a aucune valeur à fournir.</p> </div> <p>Généralement, on souhaite qu'au moins une option soit sélectionné parmi les boutons d'un groupe et on inclue donc souvent un attribut <code>checked</code> sur l'un des boutons afin d'avoir une option sélectionnée par défaut.</p> @@ -143,7 +141,7 @@ form.addEventListener("submit", function(event) { <h3 id="htmlattrdef(checked)">{{htmlattrdef("checked")}}</h3> -<p>Un attribut booléen qui indique si c'est ce champ radio qui est sélectionné parmi le groupe.<span><a id="cke_1832" title="Delete Rows"></a></span></p> +<p>Un attribut booléen qui indique si c'est ce champ radio qui est sélectionné parmi le groupe.</p> <p>À la différence des autres navigateurs, Firefox conservera <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">l'état coché dynamique</a> d'un bouton radio au fur et à mesure des chargements de la page. On pourra utiliser l'attribut {{htmlattrxref("autocomplete","input")}} afin de contrôler cette fonctionnalité.</p> @@ -184,7 +182,7 @@ form.addEventListener("submit", function(event) { <p>Ici, c'est le premier bouton radio qui sera sélectionné par défaut.</p> <div class="note"> -<p><strong>Note </strong>: Si l'attribut <code>checked</code> est placé sur plus d'un bouton, c'est le dernier bouton contenant l'attribut qui sera sélectionné. C'est donc l'ordre des valeurs qui déterminera la valeur par défaut. Pour rappel, il ne peut y avoir qu'un seul bouton radio du groupe qui soit sélectionné à un instant donné.</p> +<p><strong>Note :</strong> Si l'attribut <code>checked</code> est placé sur plus d'un bouton, c'est le dernier bouton contenant l'attribut qui sera sélectionné. C'est donc l'ordre des valeurs qui déterminera la valeur par défaut. Pour rappel, il ne peut y avoir qu'un seul bouton radio du groupe qui soit sélectionné à un instant donné.</p> </div> <h3 id="Fournir_une_plus_grande_zone_de_sélection">Fournir une plus grande zone de sélection</h3> diff --git a/files/fr/web/html/element/input/range/index.html b/files/fr/web/html/element/input/range/index.html index eae6bb4f32..04f159c62d 100644 --- a/files/fr/web/html/element/input/range/index.html +++ b/files/fr/web/html/element/input/range/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/input/range <p>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</p> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si le navigateur de l'utilisateur ne prend pas en charge le type <code>range</code>, il utilisera le type <code><a href="/fr/docs/Web/HTML/Element/input/text">text</a></code> à la place.</p> <h2 id="Valeur">Valeur</h2> @@ -101,18 +99,18 @@ translation_of: Web/HTML/Element/input/range <p>Par défaut, la granularité vaut 1, ce qui signifie que la valeur est toujours un entier. Cela peut être modifié grâce à l'attribut {{htmlattrxref("step")}} qui permet de contrôler la granularité. Ainsi, si on souhaite une valeur comprise entre 5 et 10 et précise avec deux chiffres après la virgule, on pourra utiliser l'attribut <code>step</code> avec la valeur 0.01 :</p> -<div id="Granularity_sample1"> +<h4 id="Exemple_1">Exemple 1</h4> <pre class="brush: html"><input type="range" min="5" max="10" step="0.01"></pre> -<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> -</div> +<p>{{EmbedLiveSample("Exemple_1", 600, 40)}}</p> + +<h4 id="Exemple_2">Exemple 2</h4> <p>Si on souhaite prendre en charge n'importe quelle valeur, quel que soit le nombre de décimales, on pourra utiliser la valeur <code>any</code> pour l'attribut <code>step</code> :</p> -<div id="Granularity_sample2"> <pre class="brush: html"><input type="range" min="0" max="3.14" step="any"></pre> -<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> +<p>{{EmbedLiveSample("Exemple_2", 600, 40)}}</p> <p>Cet exemple permet à l'utilisateur de choisir une valeur entre 0 et 3.14 sans aucune restriction quant à la partie décimale.</p> </div> @@ -140,7 +138,7 @@ translation_of: Web/HTML/Element/input/range <pre class="brush: html"> <input type="range"></pre> </td> - <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td> + <td><img alt="Capture d'écran d'un contrôle curseur sur macOS" src="macslider-plain.png"></td> </tr> </tbody> </table> @@ -175,7 +173,7 @@ translation_of: Web/HTML/Element/input/range </datalist> </pre> </td> - <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td> + <td><img alt="Capture d'écran un contrôle curseur sur macOS" src="macslider-ticks.png"></td> </tr> </tbody> </table> @@ -210,7 +208,7 @@ translation_of: Web/HTML/Element/input/range </datalist> </pre> </td> - <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td> + <td><img alt="Capture d'écran un contrôle curseur sur macOS" src="macslider-labels.png"></td> </tr> </tbody> </table> @@ -221,47 +219,41 @@ translation_of: Web/HTML/Element/input/range <h3 id="Modifier_l'orientation_du_curseur">Modifier l'orientation du curseur</h3> -<div class="hidden"> -<p>Par défaut, le contrôle est affiché horizontalement dans le navigateur (le curseur se déplace de gauche à droite). Il est toutefois possible de tourner le contrôle avec CSS.</p> - -<div class="note"> -<p><strong>Note :</strong> Actuellement, cela n'est pas implémenté par les navigateurs (voir {{bug(981916)}} pour Firefox et le <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">bug 341071</a> pour Chrome).</p> -</div> - <p>Par exemple :</p> -<div id="Orientation_sample1"> +<h4 id="horizontal">Horizontal</h4> + <pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> -</div> -<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p> +<p>{{EmbedLiveSample("horizontal", 200, 200, "orientation_sample1.png")}}</p> <p>Le contrôle est ici horizontal, pour le rendre vertical, on pourra utiliser un peu de CSS afin de le rendre plus haut que large :</p> -<div id="Orientation_sample2"> -<h4 id="CSS">CSS</h4> +<h4 id="vertical">Vertical</h4> + +<h5 id="CSS">CSS</h5> <pre class="brush: css">#volume { height: 150px; width: 50px; }</pre> -<h4 id="HTML">HTML</h4> +<h5 id="HTML">HTML</h5> <pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> -<h4 id="Result">Result</h4> +<h5 id="Result">Résultat</h5> -<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p> +<p>{{EmbedLiveSample("vertical", 200, 200, "orientation_sample2.png")}}</p> <p><strong>Currently, no major browsers support creating vertical range inputs using CSS this way, even though it's the way the specification recommends they do it.</strong></p> -</div> -</div> + <p>La spécification HTML recommande de dessiner les contrôles verticalement lorsque la hauteur de celui-ci est supérieure à la largeur. Malheureusement, aucun navigateur ne prend actuellement en charge cette fonctionnalité directement. On peut toutefois dessiner un contrôle vertical en appliquant une rotation sur un contrôle horizontal avec du code CSS et notamment {{cssxref("transform")}} pour tourner l'élément.</p> -<div id="Orientation_sample3"> -<h4 id="HTML_2">HTML</h4> +<h4 id="Autre_exemple">Autre exemple</h4> + +<h5 id="HTML_2">HTML</h5> <p>Il est nécessaire de placer l'élément {{HTMLElement("input")}} dans un élément {{HTMLElement("div")}} afin de corriger la disposition une fois la transformation appliquée :</p> @@ -269,7 +261,7 @@ translation_of: Web/HTML/Element/input/range <input type="range" min="0" max="11" value="7" step="1"> </div></pre> -<h4 id="CSS_2">CSS</h4> +<h5 id="CSS_2">CSS</h5> <p>Ensuite, on applique quelques règles CSS. Voici la règle CSS pour l'élément <code>div</code> qui indique le mode d'affichage et la taille qu'on souhaite avoir pour que la page soit correctement organisée..</p> @@ -292,10 +284,9 @@ Ensuite, on applique une transformation sur l'élément <code><input></cod <p>Le contrôle mesure alors 150 pixels de long et 20 pixels de haut. Les marges sont nulles et {{cssxref("transform-origin")}} est décalé vers le milieu du contrôle. Le contrôle mesurant 150 pixels de large, décaler le centre de rotation permet d'avoir la zone de destination centrée avec 75 pixels de chaque côté.</p> -<h4 id="Résultat">Résultat</h4> +<h5 id="Résultat">Résultat</h5> -<p>{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p> -</div> +<p>{{EmbedLiveSample("Autre_exemple", 200, 200, "orientation_sample3.png")}}</p> <h2 id="Validation">Validation</h2> diff --git a/files/fr/web/html/element/input/reset/index.html b/files/fr/web/html/element/input/reset/index.html index fe37b12b8b..3b8ac2bf95 100644 --- a/files/fr/web/html/element/input/reset/index.html +++ b/files/fr/web/html/element/input/reset/index.html @@ -10,33 +10,30 @@ translation_of: Web/HTML/Element/input/reset --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} de type <strong><code>"reset"</code></strong> sont affichés sous la forme de boutons permettant de réiniatiliser l'ensemble des champs du formulaire avec leurs valeurs initiales.</span></p> +<p>Les éléments {{HTMLElement("input")}} de type <strong><code>"reset"</code></strong> sont affichés sous la forme de boutons permettant de réiniatiliser l'ensemble des champs du formulaire avec leurs valeurs initiales.</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> -<p><strong>Note </strong>: Il est généralement peu recommandé d'inclure des boutons de réinitialisation dans les formulaires. En effet, ils sont rarement utiles et peuvent être source de frustration lorsqu'on appuie dessus involontairement.</p> +<p><strong>Note :</strong> Il est généralement peu recommandé d'inclure des boutons de réinitialisation dans les formulaires. En effet, ils sont rarement utiles et peuvent être source de frustration lorsqu'on appuie dessus involontairement.</p> </div> <h2 id="Valeur">Valeur</h2> <p>La valeur de l'attribut <code>value</code> d'un élément <code><input type="reset"></code> contient une chaîne de caractères ({{domxref("DOMString")}}) utilisée comme texte sur le bouton.</p> -<div id="summary-example3"> +<h3 id="Exemple_1">Exemple 1</h3> <pre class="brush: html"><input type="reset" value="Réinitialiser le formulaire"></pre> -</div> -<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> +<p>{{EmbedLiveSample("Exemple_1", 650, 30)}}</p> <p>Si aucune valeur n'est indiquée, le bouton aura le texte par défaut « Réinitialiser » :</p> -<div id="summary-example1"> +<h3 id="Exemple_2">Exemple 2</h3> + <pre class="brush: html"><input type="reset"></pre> -</div> -<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> +<p>{{EmbedLiveSample("Exemple_2", 650, 30)}}</p> <h2 id="Utiliser_les_boutons_de_réinitialisation">Utiliser les boutons de réinitialisation</h2> @@ -83,25 +80,23 @@ translation_of: Web/HTML/Element/input/reset <p>{{EmbedLiveSample("Ajouter_un_raccourci_au_bouton", 650, 100)}}</p> <div class="note"> -<p><strong>Note </strong>: Le problème d'un tel raccourci est que l'utilisateur ne saura pas quelle touche clavier correspond au raccourci. Dans une situation réaliste, il est nécessaire de fournir l'information via un autre biais (sans interférer avec le <em>design</em> du site), par exemple grâce à un lien qui pointe vers la liste des différents raccourcis utilisés sur le site.</p> +<p><strong>Note :</strong> Le problème d'un tel raccourci est que l'utilisateur ne saura pas quelle touche clavier correspond au raccourci. Dans une situation réaliste, il est nécessaire de fournir l'information via un autre biais (sans interférer avec le <em>design</em> du site), par exemple grâce à un lien qui pointe vers la liste des différents raccourcis utilisés sur le site.</p> </div> <h3 id="DésactiverActiver_un_bouton">Désactiver/Activer un bouton</h3> <p>Pour désactiver un bouton de réinitialisation, il suffit d'appliquer l'attribut {{htmlattrxref("disabled")}} sur l'élément :</p> -<div id="disable-example1"> <pre class="brush: html"><input type="reset" value="Désactivé" disabled></pre> -</div> <p>On peut activer/désactiver le bouton lors de la navigation sur la page avec JavaScript en modifiant la valeur de l'attribut <code>disabled</code> pour la passer de <code>true</code> à <code>false</code> et <em>vice versa</em> (par exemple avec une instruction telle que <code>btn.disabled = true</code>).</p> <div class="note"> -<p><strong>Note </strong>: Pour plus d'exemples concernant l'activation/la désactivation de bouton, vous pouvez consulter la page <code><a href="/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton"><input type="button"></a></code>.</p> +<p><strong>Note :</strong> Pour plus d'exemples concernant l'activation/la désactivation de bouton, vous pouvez consulter la page <code><a href="/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton"><input type="button"></a></code>.</p> </div> <div class="note"> -<p><strong>Note </strong>: À la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p> +<p><strong>Note :</strong> À la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p> </div> <h2 id="Validation">Validation</h2> diff --git a/files/fr/web/html/element/input/search/index.html b/files/fr/web/html/element/input/search/index.html index 5707359a30..ea54004693 100644 --- a/files/fr/web/html/element/input/search/index.html +++ b/files/fr/web/html/element/input/search/index.html @@ -9,12 +9,10 @@ translation_of: Web/HTML/Element/input/search --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>search</strong></code> permettent à un utilisateur de saisir des termes de recherche. </span></p> +<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>search</strong></code> permettent à un utilisateur de saisir des termes de recherche.</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <h2 id="Valeur">Valeur</h2> <p>La valeur de l'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur du champ de recherche. En JavaScript, on peut récupérer cette information grâce à la propriété {{domxref("HTMLInputElement.value")}}.</p> @@ -175,11 +173,11 @@ translation_of: Web/HTML/Element/input/search <p>La différence principale est la façon dont les navigateurs gèrent cet élément. Premièrement, certains navigateurs affiche une icône de croix dans la zone de saisie qui peut être utilisée pour retirer le terme de la recherche. Voici par exemple un aperçu de la fonctionnalité sous Chrome:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15235/chrome-cross-icon.png" style="display: block; height: 31px; margin: 0px auto; width: 144px;"></p> +<p><img alt="" src="chrome-cross-icon.png"></p> <p>De plus, les navigateurs modernes proposent souvent une auto-complétion basée sur les termes de recherche déjà utilisés sur le site. Ainsi, quand on réutilise le champ, différentes suggestions peuvent être affichées et utilisées. Voici l'aperçu de cette fonctionnalité sous Firefox :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15237/firefox-auto-complete.png" style="display: block; height: 83px; margin: 0px auto; width: 171px;"></p> +<p><img alt="" src="firefox-auto-complete.png"></p> <h3 id="Ajouter_un_texte_indicatif">Ajouter un texte indicatif</h3> @@ -226,7 +224,7 @@ translation_of: Web/HTML/Element/input/search <p>Il n'y a aucune différence visuelle avec l'exemple précédent mais avec cette deuxième version, les personnes qui utilisent un lecteur d'écran disposeront de plus d'informations.</p> <div class="note"> -<p><strong>Note</strong> : Voir <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">Signposts/Landmarks</a> pour plus d'informations à propos de ces fonctionnalités relatives à l'accessibilité.</p> +<p><strong>Note :</strong> Voir <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">Signposts/Landmarks</a> pour plus d'informations à propos de ces fonctionnalités relatives à l'accessibilité.</p> </div> <h3 id="Paramétrer_la_taille_physique">Paramétrer la taille physique</h3> @@ -248,7 +246,7 @@ translation_of: Web/HTML/Element/input/search <p>Les éléments <code><input></code> de type <code>search</code> possèdent les mêmes fonctionnalités de validation que les éléments <code><input type="text"></code>. Il existe peu de raison de contraindre les termes d'une recherche mais voici quelques cas.</p> <div class="note"> -<p><strong>Note </strong>: Attention, la validation des données d'un formulaire de recherche HTML par le client ne doit pas remplacer la vérification de ces données lorsqu'elles sont reçues sur le serveur. En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML de la page pour outrepasser les mécanismes de validation. Il est également possible d'envoyer des données directement au serveur. Si le serveur ne valide pas les données reçues, des données potentiellement mal formatées pourraient causer des dommages aux bases de données et autres composants sensibles.</p> +<p><strong>Note :</strong> Attention, la validation des données d'un formulaire de recherche HTML par le client ne doit pas remplacer la vérification de ces données lorsqu'elles sont reçues sur le serveur. En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML de la page pour outrepasser les mécanismes de validation. Il est également possible d'envoyer des données directement au serveur. Si le serveur ne valide pas les données reçues, des données potentiellement mal formatées pourraient causer des dommages aux bases de données et autres composants sensibles.</p> </div> <h3 id="Une_note_sur_la_mise_en_forme">Une note sur la mise en forme</h3> @@ -282,8 +280,7 @@ input:valid ~ span:after { </div> </form></pre> -<div class="hidden"> -<pre class="brush: css">input { +<pre class="brush: css hidden">input { margin-right: 10px; } @@ -298,7 +295,6 @@ input:valid ~ span:after { padding-left: 5px; position: absolute; }</pre> -</div> <p>Voici le résultat obtenu :</p> @@ -306,7 +302,7 @@ input:valid ~ span:after { <p>De plus, si on essaie d'envoyer le formulaire sans aucun terme de recherche, le navigateur affichera un message. Voici par exemple, le résultat dans Firefox :</p> -<p><img alt="form field with attached message that says Please fill out this field" src="https://mdn.mozillademos.org/files/15241/firefox-required-message.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="Champ de formulaire avec un message attaché indiquant 'veuillez remplir ce formulaire'" src="firefox-required-message.png"></p> <p>Différents messages peuvent être affichés selon le type d'erreur liée à la saisie.</p> @@ -327,8 +323,7 @@ input:valid ~ span:after { </div> </form></pre> -<div class="hidden"> -<pre class="brush: css">input { +<pre class="brush: css hidden">input { margin-right: 10px; } @@ -343,7 +338,6 @@ input:valid ~ span:after { padding-left: 5px; position: absolute; }</pre> -</div> <p>Voici le résultat obtenu avec ce fragment de code HTML :</p> @@ -368,8 +362,7 @@ input:valid ~ span:after { </div> </form></pre> -<div class="hidden"> -<pre class="brush: css">input { +<pre class="brush: css hidden">input { margin-right: 10px; } @@ -384,7 +377,6 @@ input:valid ~ span:after { padding-left: 5px; position: absolute; }</pre> -</div> <p>Voici le résultat obtenu avec ce fragment HTML :</p> diff --git a/files/fr/web/html/element/input/submit/index.html b/files/fr/web/html/element/input/submit/index.html index 20b704d1de..0dea8aeac7 100644 --- a/files/fr/web/html/element/input/submit/index.html +++ b/files/fr/web/html/element/input/submit/index.html @@ -11,13 +11,13 @@ translation_of: Web/HTML/Element/input/submit --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"submit"</code></strong> sont affichés comme des boutons permettant d'envoyer les données d'un formulaire. Cliquer sur un tel bouton déclenchera l'envoi des données du formulaire vers le serveur.</span></p> +<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"submit"</code></strong> sont affichés comme des boutons permettant d'envoyer les données d'un formulaire. Cliquer sur un tel bouton déclenchera l'envoi des données du formulaire vers le serveur.</p> + +<h2 id="Exemple_simple">Exemple simple</h2> -<div id="summary-example2"> <pre class="brush: html"><input type="submit" value="Envoyer le formulaire"></pre> -</div> -<p>{{EmbedLiveSample("summary-example2", 650, 30)}}</p> +<p>{{EmbedLiveSample("Exemple_simple", 650, 30)}}</p> <h2 id="Valeur">Valeur</h2> @@ -25,11 +25,11 @@ translation_of: Web/HTML/Element/input/submit <p>Si on n'indique aucune valeur, ce sera un texte par défaut (dépendant du navigateur) qui sera utilisé ainsi que du système d'éxploitation:</p> -<div id="summary-example1"> +<h3 id="Exemple_avec_valeur_par_défaut">Exemple avec valeur par défaut</h3> + <pre class="brush: html"><input type="submit"></pre> -</div> -<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> +<p>{{EmbedLiveSample("Exemple_avec_valeur_par_défaut", 650, 30)}}</p> <h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> @@ -178,25 +178,23 @@ translation_of: Web/HTML/Element/input/submit <p>{{EmbedLiveSample("Ajouter_un_raccourci_clavier", 650, 100)}}</p> <div class="note"> -<p><strong>Note </strong>: Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.</p> +<p><strong>Note :</strong> Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.</p> </div> <h3 id="Activer_et_désactiver_un_bouton_d'envoi">Activer et désactiver un bouton d'envoi</h3> <p>Si on souhaite désactiver un bouton, il sufft d'utiliser l'attribut booléen universel {{htmlattrxref("disabled")}} :</p> -<div id="disable-example1"> <pre class="brush: html"><input type="submit" value="Disabled" disabled></pre> -</div> <p>Pour activer / désactiver le bouton dynamiquement, on pourra manipuler l'attribut DOM <code>disabled</code> avec la valeur <code>true</code> ou <code>false</code> en JavaScript (avec une instruction similaire à <code>btn.disabled = true</code>).</p> <div class="note"> -<p><strong>Note </strong>: Voir la page <code><a href="/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton"><input type="button"></a></code> pour plus d'exemples concernant l'activation/désactivation des boutons liés à un formulaire.</p> +<p><strong>Note :</strong> Voir la page <code><a href="/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton"><input type="button"></a></code> pour plus d'exemples concernant l'activation/désactivation des boutons liés à un formulaire.</p> </div> <div class="note"> -<p><strong>Note </strong>: À la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p> +<p><strong>Note :</strong> À la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p> </div> <h2 id="Validation">Validation</h2> diff --git a/files/fr/web/html/element/input/tel/index.html b/files/fr/web/html/element/input/tel/index.html index 04e08e0a6d..14356c7762 100644 --- a/files/fr/web/html/element/input/tel/index.html +++ b/files/fr/web/html/element/input/tel/index.html @@ -11,12 +11,10 @@ translation_of: Web/HTML/Element/input/tel --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"tel"</strong></code> permettent à un utilisateur de saisir un numéro de téléphone. Contrairement aux contrôles utilisés pour <code><a href="/fr/docs/Web/HTML/Element/input/email"><input type="email"></a></code> et <code><a href="/fr/docs/Web/HTML/Element/input/url"><input type="url"></a></code> , la valeur saisie n'est pas automatiquement validée selon un format donné car les formats des numéros de téléphone varient à travers le monde.</span></p> +<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"tel"</strong></code> permettent à un utilisateur de saisir un numéro de téléphone. Contrairement aux contrôles utilisés pour <code><a href="/fr/docs/Web/HTML/Element/input/email"><input type="email"></a></code> et <code><a href="/fr/docs/Web/HTML/Element/input/url"><input type="url"></a></code> , la valeur saisie n'est pas automatiquement validée selon un format donné car les formats des numéros de téléphone varient à travers le monde.</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <div class="note"> <p><strong>Note :</strong> Les navigateurs qui ne prennent pas en charge le type <code>"tel"</code> utiliseront à la place un contrôle de type <code><a href="/fr/docs/Web/HTML/Element/input/text">"text"</a></code>.</p> </div> @@ -129,20 +127,34 @@ translation_of: Web/HTML/Element/input/tel <p>Les numéros de téléphone peuvent jouer un rôle important dans certains formulaires web. Un site de commerce en ligne, par exemple, peut vouloir enregistrer le numéro de téléphone d'un utilisateur pour le contacter lors de la livraison. Toutefois, un des problèmes relatifs aux numéros de téléphone est la variété de formats qui existent à travers le monde. Il est donc difficile (voire impossible) de valider les valeurs automatiquement.</p> <div class="note"> -<p><strong>Note</strong> : Des mécanismes de validation particuliers peuvent être ajoutés si besoin (cf. {{anch("Validation")}} ci-après).</p> +<p><strong>Note :</strong> Des mécanismes de validation particuliers peuvent être ajoutés si besoin (cf. {{anch("Validation")}} ci-après).</p> </div> <h3 id="Claviers_adaptés">Claviers adaptés</h3> -<p>L'un des avantages des contrôles de type <code>tel</code> est qu'ils permettent aux navigateurs mobiles de proposer un clavier adapté à la saisie de numéros de téléphone. Voici par exemple le clavier obtenu avec Firefox pour Android :</p> +<p>L'un des avantages des contrôles de type <code>tel</code> est qu'ils permettent aux navigateurs mobiles de proposer un clavier adapté à la saisie de numéros de téléphone.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15441/fx-android-tel.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p> +<table class="standard-table"> + <caption>Exemples de claviers adaptés sur appareils mobiles.</caption> + <thead> + <tr> + <th scope="col">Firefox pour Android</th> + <th scope="col">WebKit iOS (Safari/Chrome/Firefox)</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Capture d'écran pour Firefox pour Android" src="fx-android-tel.png"></td> + <td><img alt="Capture d'écran pour Firefox pour iOS" src="iphone-tel-keyboard-50pct.png"></td> + </tr> + </tbody> +</table> <h3 id="Un_contrôle_simple">Un contrôle simple</h3> <p>Dans sa forme la plus simple, on peut implémenter un tel contrôle avec ce fragment HTML :</p> -<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel"></pre> +<pre class="brush: html"><input id="telNo" name="telNo" type="tel"></pre> <p>{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}}</p> @@ -154,7 +166,7 @@ translation_of: Web/HTML/Element/input/tel <p>Dans l'exemple suivant, on a un contrôle <code>"tel"</code> avec un attribut <code>placeholder</code> qui vaut <code>"01 23 45 67 89"</code>. Vous pouvez manipuler le résultat obtenu pour voir comment ce texte est affiché selon qu'une valeur saisie ou que le champ est vide :</p> -<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" +<pre class="brush: html"><input id="telNo" name="telNo" type="tel" placeholder="01 23 45 67 89"></pre> <p>{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}}</p> @@ -167,7 +179,7 @@ translation_of: Web/HTML/Element/input/tel <p>La taille physique de la boîte de saisie peut être contrôlée avec l'attribut {{htmlattrxref("size", "input")}}. La valeur de cet attribut indique le nombre de caractères que la boîte peut afficher simultanément. Si, par exemple, on souhaite que le contrôle mesure 20 caractères de large, on pourra utiliser le code suivant :</p> -<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" +<pre class="brush: html"><input id="telNo" name="telNo" type="tel" size="20"></pre> <p>{{EmbedLiveSample('La_taille_physique', 600, 40)}}</p> @@ -178,23 +190,21 @@ translation_of: Web/HTML/Element/input/tel <p>Dans l'exemple qui suit, on crée un contrôle qui mesure 20 caractères de large et dont le contenu doit être plus long que 9 caractères et plus court que 14 caractères.</p> -<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" +<pre class="brush: html"><input id="telNo" name="telNo" type="tel" size="20" minlength="9" maxlength="14"></pre> <p>{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}</p> <div class="note"> -<p><strong>Note</strong> : Ces deux attributs jouent un rôle lors de la {{anch("validation", "Validation")}}. Dans l'exemple précédent, la valeur sera considérée comme invalide si elle contient moins de 9 caractères ou plus de 14. La plupart des navigateurs ne permettront pas de saisir une valeur plus longue que la taille maximale.</p> +<p><strong>Note :</strong> Ces deux attributs jouent un rôle lors de la {{anch("validation", "Validation")}}. Dans l'exemple précédent, la valeur sera considérée comme invalide si elle contient moins de 9 caractères ou plus de 14. La plupart des navigateurs ne permettront pas de saisir une valeur plus longue que la taille maximale.</p> </div> <h3 id="Fournir_une_valeur_par_défaut">Fournir une valeur par défaut</h3> <p>Il est possible de fournir une valeur par défaut en renseignant au préalable l'attribut {{htmlattrxref("value", "input")}} :</p> -<div id="Default_value"> -<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" +<pre class="brush: html"><input id="telNo" name="telNo" type="tel" value="01 23 45 67 89"></pre> -</div> <p>{{EmbedLiveSample("Fournir_une_valeur_par_défaut", 600, 40)}}</p> @@ -202,7 +212,7 @@ translation_of: Web/HTML/Element/input/tel <p>Si on souhaite aller plus loin, on peut fournir une liste de suggestions parmi lesquelles l'utilisateur pourra choisir (il pourra également saisir la valeur de son choix si celle-ci ne fait pas partie de la liste). Pour cela, on utilisera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. C'est la valeur de l'attribut <code>value</code> de chaque élément <code><option></code> qui sera utilisée comme suggestion.</p> -<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" list="defaultTels"> +<pre class="brush: html"><input id="telNo" name="telNo" type="tel" list="defaultTels"> <datalist id="defaultTels"> <option value="01 23 45 67 89"> @@ -219,13 +229,15 @@ translation_of: Web/HTML/Element/input/tel <p>Comme évoqué ci-avant, il est difficile de fournir une solution qui convienne pour l'ensemble des formats utilisés et qui permette de valider correctement les numéros de téléphone.</p> -<div class="warning"><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</div> +<div class="warning"> + <p><strong>Attention :</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p> +</div> <h3 id="Rendre_la_valeur_obligatoire">Rendre la valeur obligatoire</h3> <p>Il est possible de rendre la saisie obligatoire avant de pouvoir envoyer le formulaire. Pour cela, on utilisera l'attribut {{htmlattrxref("required", "input")}} :</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="telNo">Veuillez saisir un numéro de téléphone (obligatoire) : </label> <input id="telNo" name="telNo" type="tel" required> @@ -238,7 +250,7 @@ translation_of: Web/HTML/Element/input/tel <p>On utilisera la feuille de style suivante pour indiquer les éléments valides ou invalides du formulaire :</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; position: relative; } @@ -268,13 +280,13 @@ input:valid+span:after { <p>{{EmbedLiveSample("Rendre_la_valeur_obligatoire", 700, 70)}}</p> -<h3 id="Utiliser_un_format_particulier"><a id="format" name="format">Utiliser un format particulier</a></h3> +<h3 id="Utiliser_un_format_particulier">Utiliser un format particulier</h3> <p>Si on souhaite restreindre le format de la valeur qui peut être saisie, on peut utiliser l'attribut {{htmlattrxref("pattern","input")}} dont la valeur est une expression rationnelle que la valeur doit respecter pour être valide.</p> <p>Dans cet exemple, on utilisera la même feuille de style que précédemment mais le code HTML sera celui-ci :</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="telNo">Veuillez saisir un numéro de téléphone (obligatoire) : </label> <input id="telNo" name="telNo" type="tel" required @@ -286,8 +298,7 @@ input:valid+span:after { </div> </form></pre> -<div class="hidden"> -<pre class="brush: css notranslate">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -312,7 +323,6 @@ input:valid+span:after { padding-left: 5px; color: #009000; }</pre> -</div> <p>{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 70)}}</p> @@ -324,7 +334,7 @@ input:valid+span:after { <p>Chaque boîte de saisie possède un attribut {{htmlattrxref("placeholder","input")}} qui indique le format pressenti. On utilise également l'attribut {{htmlattrxref("pattern","input")}} afin d'indiquer le nombre de caractères ainsi qu'un attribut <code>aria-label</code> qui pourra être lu par un lecteur d'écran ete qui décrit quoi saisir dans le contrôle.</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="country">Veuillez choisir votre pays :</label> <select id="country" name="country"> @@ -361,7 +371,7 @@ input:valid+span:after { <p>Le code JavaScript associé est relativement simple, il contient un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onchange", "onchange")}} qui est déclenché lorsque la valeur du <code><select></code> est modifiée. Il met alors à jour les attributs <code>pattern</code>, <code>placeholder</code>, <code>aria-label</code> du contrôle pour adapter le format attendu au pays choisi.</p> -<pre class="brush: js notranslate">var selectElem = document.querySelector("select"); +<pre class="brush: js">var selectElem = document.querySelector("select"); var inputElems = document.querySelectorAll("input"); selectElem.onchange = function() { @@ -415,8 +425,7 @@ selectElem.onchange = function() { <p>Bien entendu, si cette complexité est trop importante, on peut également faire le choix de contrôler la valeur côté serveur avant de faire un retour à l'utilisateur.</p> -<div class="hidden"> -<pre class="brush: css notranslate">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -439,7 +448,6 @@ input:valid+span:after { content: '✓'; padding-left: 5px; }</pre> -</div> <h2 id="Résumé_technique">Résumé technique</h2> diff --git a/files/fr/web/html/element/input/text/index.html b/files/fr/web/html/element/input/text/index.html index 21e8cb6692..8e33c53029 100644 --- a/files/fr/web/html/element/input/text/index.html +++ b/files/fr/web/html/element/input/text/index.html @@ -10,12 +10,10 @@ translation_of: Web/HTML/Element/input/text --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"text"</strong></code> permettent de créer des champs de saisie avec du texte sur une seule ligne.</span></p> +<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"text"</strong></code> permettent de créer des champs de saisie avec du texte sur une seule ligne.</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Valeur">Valeur</h2> <p>L'attribut {{htmlattrxref("value", "input")}} d'un tel élément contient une chaîne de caractères ({{domxref("DOMString")}}) qui correspond à la valeur contenue dans le champ texte. En JavaScript, cette valeur peut être récupérée avec la propriété JavaScript {{domxref("HTMLInputElement.value","value")}}.</p> @@ -82,7 +80,6 @@ translation_of: Web/HTML/Element/input/text <h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3> -<div id="pattern-include"> <p>L'attribut <code>pattern</code> est une expression rationnelle que doit respecter la valeur ({{htmlattrxref("value")}}) du champ afin d'être <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">valide</a>. Cette expression rationnelle doit être une expression rationnelle valide pour JavaScript (telle qu'utilisée par {{jsxref("RegExp")}} et telle que documentée dans <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">ce guide</a>). Le marqueur <code>'u'</code> est fourni par le navigateur lors de la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode plutôt que comme des caractères ASCII. Aucune barre oblique (/) ne devrait être utilisée autour du motif.</p> <p>Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré.</p> @@ -90,7 +87,6 @@ translation_of: Web/HTML/Element/input/text <div class="note"> <p><strong>Note :</strong> L'attribut {{htmlattrxref("title", "input")}} pourra être utilisé afin d'afficher une bulle d'informations qui explique les conditions à respecter. Il est également conseillé d'inclure un texte explicatif à proximité du champ.</p> </div> -</div> <p>Voir <a href="#format">la section sur l'utilisation de cet attribut ci-après</a> pour plus d'exemples.</p> @@ -120,7 +116,6 @@ translation_of: Web/HTML/Element/input/text <h3 id="htmlattrdef(spellcheck)">{{htmlattrdef("spellcheck")}}</h3> -<div id="spellcheck-include"> <p><code>spellcheck</code> est un attribut universel qui est utilisé afin d'indiquer si la vérification orthographique doit être utilisée pour un élément. Il peut être utilisé pour n'importe quel contenu éditable mais possède certaines spécificités pour les éléments {{HTMLElement("input")}}. Les valeurs autorisées pour cet attribut sont :</p> <dl> @@ -135,7 +130,6 @@ translation_of: Web/HTML/Element/input/text <p>Un champ de saisie peut avoir la vérification orthographique activée s'il ne possède pas l'attribut {{anch("readonly")}} et qu'il n'est pas désactivé.</p> <p>La valeur renvoyée par l'attribut <code>spellcheck</code> peut ne pas refléter l'état réel de la vérification ortographique si certaines préférences de l'agent utilisateur surchargent le paramétrage par défaut.</p> -</div> <h2 id="Attributs_non-standard">Attributs non-standard</h2> @@ -162,7 +156,6 @@ translation_of: Web/HTML/Element/input/text <h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> -<div id="autocorrect-include"> <p>Un attribut spécifique à Safari, sous la forme d'une chaîne de caractères, qui indique si la correction automatique doit être appliquée lors de l'édition du champ. Les valeurs autorisées pour cet attribut sont :</p> <dl> @@ -171,11 +164,9 @@ translation_of: Web/HTML/Element/input/text <dt><code>off</code></dt> <dd>Toute correction automatique et tout remplacement de texte est désactivé.</dd> </dl> -</div> <h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> -<div id="mozactionhint-include"> <p>Un attribut spécifique à Mozilla (et plus particulièrement Firefox pour Android) qui fournit une indication quant au type d'action effectuée lorsque l'utilisateur appuie sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition. Cette information pourra être utilisée afin de choisir le libellé à afficher sur la touche <kbd>Entrée</kbd> du clavier virtuel.</p> <div class="note"> @@ -183,7 +174,6 @@ translation_of: Web/HTML/Element/input/text </div> <p>Les valeurs autorisées pour cet attribut sont : <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code> et <code>send</code>. Le navigateur décide alors, selon la valeur, quel libellé utiliser pour la touche Entrée.</p> -</div> <h2 id="Utiliser_<input_typetext>">Utiliser <code><input type="text"></code></h2> @@ -251,7 +241,7 @@ translation_of: Web/HTML/Element/input/text <p>Les éléments <code><input></code> de type <code>text</code> ne possède pas de mécanisme de validation automatique. En revanche, il est possible d'ajouter certaines contraintes qui seront vérifiées côté client et que nous allons voir ici.</p> <div class="warning"> -<p><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p> +<p><strong>Attention :</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p> </div> <h3 id="Un_aparté_sur_la_mise_en_forme">Un aparté sur la mise en forme</h3> @@ -295,9 +285,7 @@ input:valid+span:after { </div> </form></pre> -<div class="hidden"> -<pre class="brush: css">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> -</div> +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> <p>Ce qui produira ce résultat :</p> @@ -324,9 +312,7 @@ input:valid+span:after { </div> </form></pre> -<div class="hidden"> -<pre class="brush: css">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> -</div> +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> <p>Voici le résultat qui est alors obtenu :</p> @@ -338,7 +324,7 @@ input:valid+span:after { <p><strong>Note :</strong> Si on indique <code>minlength</code> mais pas <code>required</code>, la valeur saisie est considérée comme valide car l'utilisateur peut ne pas saisir de valeur.</p> </div> -<h3 id="Contraindre_un_format_spécifique_-_expression_rationnelle"><a id="format" name="format">Contraindre un format spécifique - expression rationnelle</a></h3> +<h3 id="Contraindre_un_format_spécifique_-_expression_rationnelle">Contraindre un format spécifique - expression rationnelle</h3> <p>L'attribut {{htmlattrxref("pattern","input")}} permet d'indiquer une expression rationnelle que devra respecter la valeur saisie afin d'être valide (cf. <a href="/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">Valider un champ par rapport à une expression rationnelle</a> pour une introduction).</p> diff --git a/files/fr/web/html/element/input/time/index.html b/files/fr/web/html/element/input/time/index.html index d7ae5d56d9..ad51788acf 100644 --- a/files/fr/web/html/element/input/time/index.html +++ b/files/fr/web/html/element/input/time/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/input/time <div>{{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'interface utilisateur affichée pour le contrôle peut varier d'un navigateur à l'autre. À l'heure où nous écrivons ces lignes, seul Safari ne prend pas en charge ce type de contrôle. Pour ce dernier, l'élément sera transformé en simple <code><a href="/fr/docs/Web/HTML/Element/Input/text"><input type="text"></a></code>.</p> <h2 id="Apparence">Apparence</h2> @@ -24,23 +22,25 @@ translation_of: Web/HTML/Element/input/time <p>Pour Chrome/Opera, le contrôle <code>time</code> possède deux cases permettant de saisir les heures d'une part et les minutes d'autre part (sur 12 ou 24 heures selon la locale de l'ordinateur), deux flèches pour augmenter ou réduire la valeur et une croix permettant de supprimer la valeur.</p> -<p><img alt="Contrôle Chrome pour une saisie avec une locale sur 24h" src="https://mdn.mozillademos.org/files/15399/chrome-time.png" style="display: block; height: 31px; margin: 0px auto; width: 82px;"><img alt="Contrôle de Chrome pour une saisie avec une locale sur 12h" src="https://mdn.mozillademos.org/files/16417/chrome_time.PNG" style="display: block; height: 31px; margin: 0px auto; width: 82px;"></p> +<p><img alt="Contrôle Chrome pour une heure sur 12 heures" src="chrome_time.png">12 heures</p> + +<p><img alt="Contrôle Chrome pour une heure sur 24 heures" src="chrome-time.png">24 heures</p> <h3 id="Firefox">Firefox</h3> <p>Pour Firefox, l'aspect du contrôle est similaire mais il ne possède pas les flèches d'incrément. L'horloge peut également s'utiliser sur un format 12 heures ou 24 heures (selon la locale du système). Un bouton rond avec une croix permet de réinitialiser la valeur du contrôle.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15403/firefox-time.png" style="display: block; height: 29px; margin: 0px auto; width: 106px;"></p> +<p><img alt="Contrôle Firefox pour une heure sur 12 heures" src="firefox-time.png">12 heures</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16461/firefox-time-24.png" style="display: block; height: 29px; margin: 0px auto; width: 106px;"></p> +<p><img alt="Contrôle Firefox pour une heure sur 24 heures" src="firefox-time-24.png">24 heures</p> <h3 id="Edge">Edge</h3> <p>Pour Edge, le contrôle affiché est un plus élaboré : il affiche un sélecteur avec deux bandes déroulantes pour choisir l'heure et les minutes (sur 12 ou 24 heures selon la locale) :</p> -<p><img alt="Contrôle Edge pour la saisie sur 24h" src="https://mdn.mozillademos.org/files/15401/edge-time.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="Contrôle Edge pour la saisie sur 12 heures" src="edge_time.png">12 heures</p> -<p><img alt="Contrôle Edge pour la saisie sur 12 heures" src="https://mdn.mozillademos.org/files/16418/edge_time.PNG" style="display: block; height: 360px; margin: 0px auto; width: 233px;"></p> +<p><img alt="Contrôle Edge pour la saisie sur 24 heures" src="edge-time.png">24 heures</p> <h2 id="Valeur">Valeur</h2> @@ -119,7 +119,9 @@ startTime.addEventListener("input", function() { </tbody> </table> -<div class="note"><strong>Note :</strong> À la différence d'autres types de donnée, les valeurs pour les heures sont sur un domaine <strong>périodique</strong>. Cela signifie qu'une fois la valeur maximale dépassée, on revient à la valeur minimale (autrement dit, on fait le tour de l'horloge). Ainsi, si on indique <code>min</code> avec la valeur <code>"14:00"</code> et <code>max</code> avec la valeur <code>"2:00"</code>, cela signifie que les valeurs autorisées sont comprises entre 2 heures de l'après-midi et jusqu'à 2 heures du matin le jour suivant.</div> +<div class="note"> + <p><strong>Note :</strong> À la différence d'autres types de donnée, les valeurs pour les heures sont sur un domaine <strong>périodique</strong>. Cela signifie qu'une fois la valeur maximale dépassée, on revient à la valeur minimale (autrement dit, on fait le tour de l'horloge). Ainsi, si on indique <code>min</code> avec la valeur <code>"14:00"</code> et <code>max</code> avec la valeur <code>"2:00"</code>, cela signifie que les valeurs autorisées sont comprises entre 2 heures de l'après-midi et jusqu'à 2 heures du matin le jour suivant.</p> +</div> <h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> @@ -249,13 +251,8 @@ input:valid+span:after { <p>Si vous essayez de soumettre le formulaire sans avoir saisi de valeur (ou avec une heure en dehors des heures d'ouverture indiquées), le navigateur affichera une erreur. Vous pouvez manipuler le résultat obtenu :</p> <p>{{EmbedLiveSample('Rendre_la_saisie_obligatoire', 600, 120)}}</p> - -<p>Voici une capture d'écran (en anglais) si votre navigateur ne prend pas en charge cete fonctionnalité :</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/15405/firefox-validation-message.png" style="display: block; margin: 0 auto;"></p> - <div class="warning"> -<p><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p> +<p><strong>Attention :</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p> </div> <h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> @@ -264,7 +261,7 @@ input:valid+span:after { <p>Pour les plateformes mobiles (Android et iOS par exemple), les systèmes d'exploitation fournissent des interfaces particulièrement adaptées aux environnements tactiles. Voici par exemple le sélecteur d'heure pour Chrome sur Android :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15407/chrome-android-time.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="chrome-android-time.png"></p> <p>Lorsqu'un navigateur ne prend pas en charge ce type d'élément, il utilise un champ texte (<code><input type="text"></code>) à la place. Mais cela crée des problèmes, tant au niveau de l'interface utilisateur que de la cohérence des données et du format.</p> @@ -301,8 +298,7 @@ input:valid+span:after { <p>Il reste donc un problème.</p> -<div class="hidden"> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -326,7 +322,6 @@ input:valid+span:after { content: '✓'; padding-left: 5px; }</pre> -</div> <p>Actuellement, la meilleure façon de gérer ce type de saisie pour les différents navigateurs consiste à utiliser deux contrôles (le premier pour la saisie des heures et le second pour la saisie des minutes) avec deux éléments {{htmlelement("select")}} (cf. ci-après) ou d'utiliser certaines bibliothèques JavaScript telles que <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> ou encore <a href="http://timepicker.co/">jQuery timepicker plugin</a>.</p> @@ -364,8 +359,7 @@ input:valid+span:after { <p>Les valeurs pour les heures et les minutes seront générées dynamiquement en JavaScript.</p> -<div class="hidden"> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -389,7 +383,6 @@ input:valid+span:after { content: '✓'; padding-left: 5px; }</pre> -</div> <p>La partie la plus intéressante du code est celle qui permet de détecter si le contrôle natif est pris en charge. Pour cela, on crée un nouvel élément {{htmlelement("input")}} et on modifie son attribut <code>type</code> afin qu'il vaille <code>time</code>, immédiatement après, on vérifie la valeur du type. Si le navigateur ne prend pas en charge l'élément, il renverra <code>text</code> car l'élément a été transformé en <code><input type="text"></code>, dans ce cas, on masque le sélecteur natif et on affiche l'interface alternative avec les deux éléments {{htmlelement("select")}}.</p> diff --git a/files/fr/web/html/element/input/url/index.html b/files/fr/web/html/element/input/url/index.html index 949a8aaf19..56d928e2ab 100644 --- a/files/fr/web/html/element/input/url/index.html +++ b/files/fr/web/html/element/input/url/index.html @@ -10,12 +10,10 @@ translation_of: Web/HTML/Element/input/url --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"url"</strong></code> sont employées afin de permettre à un utilisateur de saisir ou d'éditer une URL.</span></p> +<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"url"</strong></code> sont employées afin de permettre à un utilisateur de saisir ou d'éditer une URL.</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La valeur saisie est automatiquement validée par le navigateur qui vérifie qu'elle est vide ou formatée correctement avant que le formulaire puisse être envoyé. Les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées auomatiquement selon le cas de figure.</p> <div class="note"> @@ -140,7 +138,7 @@ translation_of: Web/HTML/Element/input/url <p>Toutefois, ce mécanisme ne vérifie pas que l'URL saisie existe bien ou correspond à l'utilisateur. Seule une vérification de format est effectuée.</p> <div class="warning"> -<p><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p> +<p><strong>Attention :</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p> </div> <h3 id="Un_simple_champ">Un simple champ</h3> @@ -192,17 +190,15 @@ translation_of: Web/HTML/Element/input/url <p>{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}</p> <div class="note"> -<p><strong>Note</strong> : Ces attributs jouent un rôle lors de la validation. Si la valeur saisie est plus courte que la longueur minimale indiquée ou plus grande que la longueur maximale indiquée, alors elle seera considérée comme invalide. De plus, la plupart des navigateurs ne permettent pas de saisir une valeur plus grande que la longueur maximale indiquée avec <code>maxlength</code>.</p> +<p><strong>Note :</strong> Ces attributs jouent un rôle lors de la validation. Si la valeur saisie est plus courte que la longueur minimale indiquée ou plus grande que la longueur maximale indiquée, alors elle seera considérée comme invalide. De plus, la plupart des navigateurs ne permettent pas de saisir une valeur plus grande que la longueur maximale indiquée avec <code>maxlength</code>.</p> </div> <h3 id="Fournir_des_valeurs_par_défaut">Fournir des valeurs par défaut</h3> <p>On peut fournir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} :</p> -<div id="Default_value"> <pre class="brush: html"><input id="monURL" name="monURL" type="url" value="http://www.example.com"></pre> -</div> <p>{{EmbedLiveSample("Fournir_des_valeurs_par_défaut", 600, 40)}}</p> @@ -229,7 +225,7 @@ translation_of: Web/HTML/Element/input/url <p>Il existe deux niveaux de validation pour les contrôles de type <code>"url"</code>. Tout d'abord, le contrôle natif, toujours présent qui s'asssure que la valeur correspond à une URL bien formée. Ensuite, on peut ajouter des options supplémentaires pour personnaliser le format de l'URL attendue.</p> <div class="warning"> -<p><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p> +<p><strong>Attention :</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p> </div> <h3 id="Validation_simple">Validation simple</h3> @@ -240,18 +236,16 @@ translation_of: Web/HTML/Element/input/url <p>Comme vu ci-avant, on peut rendre la saisie de l'URL obligatoire avec l'attribut {{htmlattrxref("required", "input")}} :</p> -<div id="Default_value"> <pre class="brush: html"><form> <input id="monURL" name="monURL" type="url" required> <button>Envoyer</button> </form></pre> -</div> <p>{{EmbedLiveSample("Rendre_le_champ_URL_obligatoire", 600, 40)}}</p> <p>Vous pouvez essayer d'envoyer le formulaire précédent sans valeur saisie et voir le résultat obtenu.</p> -<h3 id="Utiliser_un_format_particulier"><a id="format" name="format">Utiliser un format particulier</a></h3> +<h3 id="Utiliser_un_format_particulier">Utiliser un format particulier</h3> <p>S'il faut restreindre l'URL plus fortement, on peut utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin d'indiquer une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">expression rationnelle</a> que la valeur saisie doit respecter afin d'être valide.</p> @@ -259,8 +253,7 @@ translation_of: Web/HTML/Element/input/url <p>Les contrôles de type <code>"url"</code> utilisant la validation native pour vérifier que c'est une URL bien formée et une validation spécifique via l'attribut {{htmlattrxref("pattern", "input")}}, on peut implémenter cette contrainte facilement :</p> -<div class="hidden"> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -282,8 +275,8 @@ translation_of: Web/HTML/Element/input/url position: absolute; content: '✓'; padding-left: 5px; - }</pre> -</div> + } +</pre> <pre class="brush: html"><form> <div> @@ -318,7 +311,7 @@ translation_of: Web/HTML/Element/input/url <p>C'est pourquoi nous avons écrit "L'URL doit être sur le domaine maboite" qui est plus détaillé.</p> <div class="note"> -<p><strong>Note </strong>: Si vous rencontrez des problèmes avec ces expressions rationnelles et qu'elles ne semblent pas fonctionner correctement, vérifiez la console de votre navigateur. Il est possible que des messages d'erreur y soient affichés et puissent vous aider à diagnostiquer le problème.</p> +<p><strong>Note :</strong> Si vous rencontrez des problèmes avec ces expressions rationnelles et qu'elles ne semblent pas fonctionner correctement, vérifiez la console de votre navigateur. Il est possible que des messages d'erreur y soient affichés et puissent vous aider à diagnostiquer le problème.</p> </div> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/html/element/input/week/index.html b/files/fr/web/html/element/input/week/index.html index f9a9fd6805..b010c0cf18 100644 --- a/files/fr/web/html/element/input/week/index.html +++ b/files/fr/web/html/element/input/week/index.html @@ -15,17 +15,15 @@ translation_of: Web/HTML/Element/input/week <div>{{EmbedInteractiveExample("pages/tabbed/input-week.html", "tabbed-shorter")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <p>L'interface utilisateur offerte par un tel contrôle varie en fonction des navigateurs. Au moment où nous écrivons ces lignes, seuls Chrome/Opera et Edge prennent en charge cette fonctionnalité. Pour les navigateurs qui ne l'implémentent pas, l'élément est interprété comme un élément <code><a href="/fr/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> <p>Sous Chrome/Opera, le contrôle <code>week</code> fournit des emplacements pour les deux valeurs. Un calendrier est affiché afin de sélectionner plus faiclement la semaine et l'année. Un bouton avec une croix permet de supprimer la valeur saisie dans le contrôle.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15409/week-control-chrome.png" style="display: block; height: 235px; margin: 0px auto; width: 320px;"></p> +<p><img alt="" src="week-control-chrome.png"></p> <p>Pour Edge, le contrôle associé à <code>month</code> est plus élaboré et se compose de deux listes qu'on peut faire défiler séparement pour la semaine d'une part et l'année d'autre part.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15411/week-control-edge.png" style="display: block; height: 391px; margin: 0px auto; width: 227px;"></p> +<p><img alt="" src="week-control-edge.png"></p> <h2 id="Valeur">Valeur</h2> @@ -193,10 +191,10 @@ input:valid+span:after { <p>Voici une capture d'écran du résultat obtenu si votre navigateur ne prend pas en charge cette fonctionnalité :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15415/week-validation-chrome.png" style="display: block; height: 85px; margin: 0px auto; width: 473px;"></p> +<p><img alt="" src="week-validation-chrome.png"></p> <div class="warning"> -<p><strong>Important </strong>: la validation des données du formulaire HTML par le navigateur ne se substitue pas à la validation des données reçues côté serveur. En effet, il est tout à fait possible pour un utilisateur de modifier le HTML côté client et de passer outre les contraintes normalement appliquées. Il est également possible d'envoyer des données au serveur sans passer par le formulaire. Ne pas vérifier les données reçues côté serveur expose à des risques d'erreur voire d'attaques.</p> +<p><strong>Attention :</strong> la validation des données du formulaire HTML par le navigateur ne se substitue pas à la validation des données reçues côté serveur. En effet, il est tout à fait possible pour un utilisateur de modifier le HTML côté client et de passer outre les contraintes normalement appliquées. Il est également possible d'envoyer des données au serveur sans passer par le formulaire. Ne pas vérifier les données reçues côté serveur expose à des risques d'erreur voire d'attaques.</p> </div> <h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> @@ -205,7 +203,7 @@ input:valid+span:after { <p>Les plateformes mobiles comme Android et iOS fournissent un contrôle natif à l'ergonomie tactile adaptée. Voici par exemple le sélecteur <code>week</code> sur Chrome pour Android :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15413/week-chrome-android.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="week-chrome-android.png"></p> <p>Les navigateurs qui ne prennent pas en charge ce type de contrôle l'interprètent comme un champ texte mais cela crée des problèmes de cohérence tant au niveau de l'ergonomie qu'au niveau de la représentation des données.</p> @@ -256,8 +254,7 @@ input:valid+span:after { <p>On génère les valeurs des semaines dynamiquement.</p> -<div class="hidden"> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -281,7 +278,6 @@ input:valid+span:after { content: '✓'; padding-left: 5px; }</pre> -</div> <p>Dans le fragment de code JavaScript qui suit, on montre comment détecter si la fonctionnalité est prise en charge ou non. Pour cela, on crée un nouvel élément {{htmlelement("input")}} et on règle son <code>type</code> sur <code>week</code> puis on vérifie immédiatement la valeur de son type. Les navigateurs qui ne prennent pas en charge la fonctionnalité renverront <code>text</code>. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif composé des deux éléments {{htmlelement("select")}}.</p> diff --git a/files/fr/web/html/element/ins/index.html b/files/fr/web/html/element/ins/index.html index fd10daf017..a0c81dc401 100644 --- a/files/fr/web/html/element/ins/index.html +++ b/files/fr/web/html/element/ins/index.html @@ -18,8 +18,6 @@ translation_of: Web/HTML/Element/ins <div>{{EmbedInteractiveExample("pages/tabbed/ins.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>On peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> pour cet élément.</p> diff --git a/files/fr/web/html/element/kbd/index.html b/files/fr/web/html/element/kbd/index.html index b74e3870ae..8df53af401 100644 --- a/files/fr/web/html/element/kbd/index.html +++ b/files/fr/web/html/element/kbd/index.html @@ -10,14 +10,12 @@ translation_of: Web/HTML/Element/kbd --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">L'élément HTML <code><strong><kbd></strong></code> représente une plage de texte en ligne indiquant la saisie de texte par l'utilisateur à partir d'un clavier, d'une saisie vocale ou de tout autre dispositif de saisie de texte. Par convention, le </span>{{Glossary("user agent")}}<span class="seoSummary"> rend par défaut le contenu d'un élément <code><kbd></code> en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML.</span></p> +<p>L'élément HTML <code><strong><kbd></strong></code> représente une plage de texte en ligne indiquant la saisie de texte par l'utilisateur à partir d'un clavier, d'une saisie vocale ou de tout autre dispositif de saisie de texte. Par convention, le {{Glossary("user agent")}} rend par défaut le contenu d'un élément <code><kbd></code> en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML.</p> <p><code><kbd></code> peut être imbriqué dans diverses combinaisons avec {{HTMLElement("samp")}} (Sample Output) pour représenter diverses formes d'entrée ou d'entrée basées sur des repères visuels.</p> <div>{{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Cet élément ne contient que <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> diff --git a/files/fr/web/html/element/keygen/index.html b/files/fr/web/html/element/keygen/index.html index 2c63fd89bf..391387046e 100644 --- a/files/fr/web/html/element/keygen/index.html +++ b/files/fr/web/html/element/keygen/index.html @@ -42,7 +42,7 @@ translation_of: Web/HTML/Element/keygen <p>Pour les clés RSA, le paramètre <code>keyparams</code> n'est pas utilisé (ignoré s'il est présent). L'utilisateur peut avoir le choix pour la force des clés RSA à générer. Actuellement, l'utilisateur peut choisir entre « <code>high</code> » (élevé) pour 2048 bits et « <code>medium</code> » (moyen) pour 1024 bits.</p> -<p>Pour les clés DSA, le paramètre <code>keyparams</code> définit les paramètres DSA PQG à utiliser pendant le processus de génération de la clé. La valeur du paramètre <code>pqg</code> est encodée en DER en suivant la structure Dss-Parms comme énoncé dans le <a class="link-ftp" href="ftp://ftp.rfc-editor.org/in-notes/rfc3279.txt">RFC 3279</a>. L'utilisateur peut avoir le choix des tailles de clés DSA, permettant à l'utilisateur de choisir parmi les tailles de clés définies dans le standard DSA.</p> +<p>Pour les clés DSA, le paramètre <code>keyparams</code> définit les paramètres DSA PQG à utiliser pendant le processus de génération de la clé. La valeur du paramètre <code>pqg</code> est encodée en DER en suivant la structure Dss-Parms comme énoncé dans le <a href="https://datatracker.ietf.org/doc/html/rfc3279">RFC 3279</a>. L'utilisateur peut avoir le choix des tailles de clés DSA, permettant à l'utilisateur de choisir parmi les tailles de clés définies dans le standard DSA.</p> <p>Pour les clés EC, le paramètre <code>keyparams</code> définit le nom de la courbe elliptique sur laquelle sera générée la clé. Normalement, c'est une chaîne de caractères du tableau <a class="external" href="https://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185,187-206,208-227,229-256#177">nsKeygenHandler.cpp</a>. (Il faut noter que seulement un sous-ensemble des courbes peut être supporté par n'importe quel navigateur.) Si le paramètre <code>keyparams</code> n'est pas reconnu comme une chaîne de caractères correspondant à une courbe, une courbe est choisie selon la force de la clé choisie par l'utilisateur (faible, moyenne, élevée). La courbe <code>secp384r1</code> est utilisée pour une force élevée, la courbe <code>secp256r1</code> est utilisée pour des clés moyennes.</p> diff --git a/files/fr/web/html/element/label/index.html b/files/fr/web/html/element/label/index.html index f696538e0d..785a98dd0c 100644 --- a/files/fr/web/html/element/label/index.html +++ b/files/fr/web/html/element/label/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/label <div>{{EmbedInteractiveExample("pages/tabbed/label.html", "tabbed-shorter")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <p>Rattacher un libellé à un élément de saisie ({{HTMLElement("input")}}) offre différents avantages :</p> <ul> @@ -39,15 +37,16 @@ translation_of: Web/HTML/Element/label <dl> <dt>{{htmlattrdef("for")}}</dt> - <dd>L'identifiant (la valeur de l'attribut {{htmlattrxref("id")}}) de l'élément de formulaire associé, appartenant au même document que l'élément label. Le premier élément du document dont l'identifiant correspond est alors le contrôle étiqueté par l'élément. - <div class="note"><strong>Note :</strong> Un élément label peut simultanément avoir un attribut <code>for</code> et contenir un élément de contrôle tant que l'attribut <code>for</code> pointe vers l'élément contenu.</div> + <dd><p>L'identifiant (la valeur de l'attribut {{htmlattrxref("id")}}) de l'élément de formulaire associé, appartenant au même document que l'élément label. Le premier élément du document dont l'identifiant correspond est alors le contrôle étiqueté par l'élément.</p> + <div class="note"> + <p><strong>Note :</strong> Un élément label peut simultanément avoir un attribut <code>for</code> et contenir un élément de contrôle tant que l'attribut <code>for</code> pointe vers l'élément contenu.</p> + </div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("form")}}</dt> - <dd>L'élément de formulaire auquel l'élément label est associé (son formulaire propriétaire). La valeur de cet attribut doit être l'identifiant d'un élément {{HTMLElement("form")}} contenu au sein du même document. Si l'attribut n'est pas renseigné, cet élément <label> doit être le descendant d'un élément {{HTMLElement("form")}}. Cet attribut permet de placer des éléments label dans le document sans qu'ils soient nécessairement imbriqués dans un formulaire. - <div class="note"><strong>Note : </strong>La spécification HTML a été mise à jour le 28 avril 2016 afin de déprécier l'attribut {{htmlattrxref("form")}}. Celui-ci est toujours disponible dans les scripts mais sa définition a changé, il renvoie désormais le contrôle associé au formulaire ou <code>null</code> s'il n'y a pas de contrôle associé (autrement dit si {{domxref("HTMLLabelElement.control")}} vaut <code>null</code>).</div> + <dd><p>L'élément de formulaire auquel l'élément label est associé (son formulaire propriétaire). La valeur de cet attribut doit être l'identifiant d'un élément {{HTMLElement("form")}} contenu au sein du même document. Si l'attribut n'est pas renseigné, cet élément <label> doit être le descendant d'un élément {{HTMLElement("form")}}. Cet attribut permet de placer des éléments label dans le document sans qu'ils soient nécessairement imbriqués dans un formulaire.</p> + <div class="note"> + <p><strong>Note :</strong> La spécification HTML a été mise à jour le 28 avril 2016 afin de déprécier l'attribut {{htmlattrxref("form")}}. Celui-ci est toujours disponible dans les scripts mais sa définition a changé, il renvoie désormais le contrôle associé au formulaire ou <code>null</code> s'il n'y a pas de contrôle associé (autrement dit si {{domxref("HTMLLabelElement.control")}} vaut <code>null</code>).</p> + </div> </dd> </dl> diff --git a/files/fr/web/html/element/legend/index.html b/files/fr/web/html/element/legend/index.html index a20397aedc..0ec932fbd6 100644 --- a/files/fr/web/html/element/legend/index.html +++ b/files/fr/web/html/element/legend/index.html @@ -15,9 +15,6 @@ translation_of: Web/HTML/Element/legend <div>{{EmbedInteractiveExample("pages/tabbed/legend.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Attributs">Attributs</h2> <p>Cet élément contient uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> diff --git a/files/fr/web/html/element/li/index.html b/files/fr/web/html/element/li/index.html index dedc21148a..e8d7ca8a9e 100644 --- a/files/fr/web/html/element/li/index.html +++ b/files/fr/web/html/element/li/index.html @@ -10,38 +10,33 @@ translation_of: Web/HTML/Element/li --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><li></code></strong> est utilisé pour représenter un élément dans une liste. Il doit être contenu dans un élément parent : une liste ordonnée ({{HTMLElement("ol")}}), une liste non ordonnée ({{HTMLElement("ul")}}) ou un menu ({{HTMLElement("menu")}}). Dans les menus et les listes non ordonnées, les éléments de liste sont habituellement affichés en utilisant des puces. Dans les listes ordonnées, ils sont habituellement affichés avec compteur croissant à gauche, tel qu'un nombre ou une lettre.</p> +<p>L'élément HTML <strong><code><li></code></strong> est utilisé pour représenter un élément dans une liste. Il doit être contenu dans un élément parent : une liste ordonnée ({{HTMLElement("ol")}}), une liste non ordonnée ({{HTMLElement("ul")}}) ou un menu ({{HTMLElement("menu")}}). Dans les menus et les listes non ordonnées, les éléments de liste sont habituellement affichés en utilisant des puces. Dans les listes ordonnées, ils sont habituellement affichés avec compteur croissant à gauche, tel qu'un nombre ou une lettre.</p> <div>{{EmbedInteractiveExample("pages/tabbed/li.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> -<p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p> +<p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p> <dl> <dt>{{htmlattrdef("value")}}</dt> - <dd>Cette valeur entière indique la valeur ordinale en cours de l'élément de liste tel que défini par l'élément {{HTMLElement("ol")}}. La seule valeur autorisée pour cet attribut est un nombre, même si la liste est affichée avec des chiffres romains ou des lettres. Les éléments de la liste qui suivent celui-ci continueront la numérotation à partir de la valeur indiquée. L'attribut <strong>value</strong> n'a pas de signification pour les listes non ordonnées ({{HTMLElement("ul")}}) ou pour les menus ({{HTMLElement("menu")}}). - <div class="note"><strong>Note</strong> : Cet attribut a été déprécié en HTML4 mais a été réintroduit en HTML5.</div> - - <div class="note">Note : Avant {{Gecko("9.0")}}, des valeurs négatives étaient incorrectement converties en 0. A partir de {{Gecko("9.0")}}, toutes les valeurs entières ont été correctement analysées.</div> + <dd><p>Cette valeur entière indique la valeur ordinale en cours de l'élément de liste tel que défini par l'élément {{HTMLElement("ol")}}. La seule valeur autorisée pour cet attribut est un nombre, même si la liste est affichée avec des chiffres romains ou des lettres. Les éléments de la liste qui suivent celui-ci continueront la numérotation à partir de la valeur indiquée. L'attribut <strong>value</strong> n'a pas de signification pour les listes non ordonnées ({{HTMLElement("ul")}}) ou pour les menus ({{HTMLElement("menu")}}).</p> + <div class="note"><p><strong>Note :</strong> Cet attribut a été déprécié en HTML4 mais a été réintroduit en HTML5.</p></div> + <div class="note"><p><strong>Note :</strong> Avant {{Gecko("9.0")}}, des valeurs négatives étaient incorrectement converties en 0. A partir de {{Gecko("9.0")}}, toutes les valeurs entières ont été correctement analysées.</p></div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt> - <dd>Cet attribut de caractère indique le type de numérotation utilisé pour la liste : + <dd><p>Cet attribut de caractère indique le type de numérotation utilisé pour la liste :</p> <ul> - <li><code>a</code> : lettres minuscules</li> - <li><code>A</code> : lettres majuscules</li> + <li><code>a</code> : lettres minuscules</li> + <li><code>A</code> : lettres majuscules</li> <li><code>i</code> : chiffres romains en minuscules</li> <li><code>I</code> : chiffres romains en majuscules</li> <li><code>1</code> : nombres</li> </ul> - Ce type surcharge celui utilisé par son élément parent {{HTMLElement("ol")}} si présent. - - <div class="note"><strong>Note d'utilisation :</strong> Cet attribut a été déprécié : utilisez la propriété CSS {{cssxref("list-style-type")}} à la place.</div> + <p>Ce type surcharge celui utilisé par son élément parent {{HTMLElement("ol")}} si présent.</p> + <div class="note"> + <p><strong>Note :</strong> Cet attribut a été déprécié : utilisez la propriété CSS {{cssxref("list-style-type")}} à la place.</p> + </div> </dd> </dl> @@ -90,7 +85,7 @@ translation_of: Web/HTML/Element/li <p>{{EmbedLiveSample("Liste_non_ordonnée")}}</p> <div class="blockIndicator note"> -<p><strong>Note :</strong> Pour d'autres exemples plus détaillés, voir les pages {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.</p> +<p><strong>Note :</strong> Pour d'autres exemples plus détaillés, voir les pages {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.</p> </div> <h2 id="Résumé_technique">Résumé technique</h2> @@ -138,17 +133,17 @@ translation_of: Web/HTML/Element/li <tr> <td>{{SpecName('HTML WHATWG', 'semantics.html#the-li-element', '<li>')}}</td> <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> + <td> </td> </tr> <tr> <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '<li>')}}</td> <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> + <td> </td> </tr> <tr> <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<li>')}}</td> <td>{{Spec2('HTML4.01')}}</td> - <td>L'attribut <code>type</code> a été déprécié.</td> + <td>L'attribut <code>type</code> a été déprécié.</td> </tr> </tbody> </table> @@ -160,12 +155,12 @@ translation_of: Web/HTML/Element/li <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li>Les autres éléments liés aux listes : {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("menu")}} et {{HTMLElement("dir")}} (obsolète) ;</li> - <li>Les propriétés CSS qui peuvent être particulièrement utiles pour mettre en forme l'élément <code><li></code> : + <li>Les autres éléments liés aux listes : {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("menu")}} et {{HTMLElement("dir")}} (obsolète) ;</li> + <li>Les propriétés CSS qui peuvent être particulièrement utiles pour mettre en forme l'élément <code><li></code> : <ul> - <li>la propriété {{cssxref("list-style")}}, pour choisir la manière d'afficher l'ordinal,</li> - <li>les <a href="/fr/docs/Web/CSS/Compteurs_CSS">compteurs CSS</a>, pour gérer des listes imbriquées complexes,</li> - <li>la propriété {{cssxref("margin")}}, pour contrôler l'indentation de l'élément de liste.</li> + <li>la propriété {{cssxref("list-style")}}, pour choisir la manière d'afficher l'ordinal,</li> + <li>les <a href="/fr/docs/Web/CSS/Compteurs_CSS">compteurs CSS</a>, pour gérer des listes imbriquées complexes,</li> + <li>la propriété {{cssxref("margin")}}, pour contrôler l'indentation de l'élément de liste.</li> </ul> </li> </ul> diff --git a/files/fr/web/html/element/link/index.html b/files/fr/web/html/element/link/index.html index 3ded73b0e3..33516d02d2 100644 --- a/files/fr/web/html/element/link/index.html +++ b/files/fr/web/html/element/link/index.html @@ -14,33 +14,31 @@ translation_of: Web/HTML/Element/link <div>{{EmbedInteractiveExample("pages/tabbed/link.html")}}</div> - - <p>Pour lier une feuille de style externe, on inclut un élément <code><link></code> de la forme suivante à l'intérieur de l'élément {{htmlelement("head")}} :</p> -<pre class="brush: html notranslate"><link href="main.css" rel="stylesheet"></pre> +<pre class="brush: html"><link href="main.css" rel="stylesheet"></pre> <p>Dans cet exemple, on indique le chemin vers la feuille de style grâce à l'attribut <code>href</code>, l'attribut <code>rel</code> possède une valeur <code>stylesheet</code> qui indique que c'est une feuille de style. <code>rel</code> signifie <em>relationship</em> qui correspond donc à la relation entre la ressource et le document courant. Il existe de <a href="/fr/docs/Web/HTML/Types_de_lien">nombreux types de liens possibles</a>.</p> <p>Certains types sont assez fréquents. Ainsi, pour l'icône présentant le site dans l'onglet, on trouvera :</p> -<pre class="brush: html notranslate"><link rel="icon" href="favicon.ico"></pre> +<pre class="brush: html"><link rel="icon" href="favicon.ico"></pre> <p>Il existe différents types de relations pour préciser les icônes et qui permettent notamment de cibler certaines plateformes mobiles :</p> -<pre class="brush: html notranslate"><link rel="apple-touch-icon-precomposed" sizes="114x114" +<pre class="brush: html"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png"></pre> <p>L'attribut <code>sizes</code> indique la taille de l'icône tandis que l'attribut <code>type</code> contient le type MIME de la ressource qui est liée. Ces attributs permettent alors au navigateur de sélectionner la ressource la plus adéquate.</p> <p>On peut également fournir l'attribut <code>media</code> afin d'utiliser telle ou telle ressource lorsqu'une requête média est vérifiée. Ainsi, on pourra utiliser ce qui suit afin d'avoir une feuille de style utilisée à l'impression et une autre dédiée au mobile :</p> -<pre class="brush: html notranslate"><link href="print.css" rel="stylesheet" media="print"> +<pre class="brush: html"><link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"></pre> <p>Certaines fonctionnalités relatives à la sécurité sont également disponibles avec certains attributs de <code><link></code>. Dans cet exemple :</p> -<pre class="brush: html notranslate"><link rel="preload" href="myFont.woff2" as="font" +<pre class="brush: html"><link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous"></pre> <p>L'attribut <code>rel</code> vaut <code>preload</code> et indique que le navigateur doit précharger la ressource (voir <a href="/fr/docs/Web/HTML/Précharger_du_contenu">Le préchargement du contenu avec <code>rel="preload"</code></a> pour plus de détails), l'attribut <code>as</code> indique la classe de contenu qui est récupéré et l'attribut <code>crossorigin</code> indique si la ressource doit être récupérée avec une requête CORS.</p> @@ -97,8 +95,8 @@ translation_of: Web/HTML/Element/link <dt>{{htmlattrdef("integrity")}} {{experimental_inline}}</dt> <dd>Cet attribut contient des métadonnées en ligne qui correspondent à l'empreinte cryptographique de la ressource qu'on souhaite récupérer. Cela permet à l'agent utilisateur de contrôler que la ressource récupérée n'a pas été manipulée. Pour plus d'informations, consulter <a href="/fr/docs/Web/Security/Subresource_Integrity">l'article sur le contrôle des sous-ressources</a>.</dd> <dt>{{htmlattrdef("media")}}</dt> - <dd>Cet attribut indique le média auquel s'applique la ressource liée. Sa valeur doit être <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">une requête média</a>. Cet attribut est principalement utilisé pour permettre à l'agent utilisateur de sélectionner la meilleure feuille de style en fonction de l'appareil de l'utilisateur. - <div class="note"><strong>Note d'utilisation :</strong> + <dd><p>Cet attribut indique le média auquel s'applique la ressource liée. Sa valeur doit être <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">une requête média</a>. Cet attribut est principalement utilisé pour permettre à l'agent utilisateur de sélectionner la meilleure feuille de style en fonction de l'appareil de l'utilisateur.</p> + <div class="note"><p><strong>Note :</strong></p> <ul> <li>En HTML4, la valeur de cet attribut était une liste de descripteurs de médias (<a href="/fr/docs/Web/CSS/@media">des types ou des groupes de média</a>) séparés par des espaces, par exemple <code>print</code> <code>screen</code> <code>aural</code> <code>braille</code>. HTML5 étend cet attribut à l'ensemble <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">des requêtes média</a> qui forment un surensemble des valeurs autorisées en HTML 4.</li> <li>Les navigateurs qui ne prennent pas en charge <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">les requêtes média CSS3</a> ne reconnaîtront pas nécessairement les liens adéquats et il faut donc toujours fournir des liens de recours.</li> @@ -124,7 +122,7 @@ translation_of: Web/HTML/Element/link <li>une liste de tailles, séparées par des espaces, dont chacune est de la forme <code><em><largeur en pixels></em>x<em><hauteur en pixels></em></code> ou <code><em><largeur en pixels></em>X<em><hauteur en pixels></em></code>. Pour chacune de ces dimensions, il doit exister une image correspondante dans la ressource.</li> </ul> - <div class="note"><strong>Note d'utilisation :</strong> + <div class="note"><p><strong>Note :</strong></p> <ul> <li>La plupart des format d'icône permettent simplement de stocker une seule icône, c'est pour cela que, la plupart du temps, {{htmlattrxref("sizes")}} ne contient qu'un seul élément.</li> @@ -142,8 +140,8 @@ translation_of: Web/HTML/Element/link <dl> <dt>{{htmlattrdef("charset")}}{{obsolete_inline}}</dt> - <dd>Cet attribut définit l'encodage de la ressource lié. La valeur de cet attribut est une liste de jeux de caractères (tels que définis dans la RFC {{rfc(2045)}}) séparés par des espaces ou des virgules. La valeur par défaut de cet attribut est <code>iso-8859-1</code>. - <div class="note"><strong>Note d'utilisation :</strong> cet attribut est obsolète <strong>et ne doit pas être utilisé</strong>. Pour obtenir l'effet escompté, on utilisera l'en-tête HTTP {{httpheader("Content-Type")}} pour la ressource liée.</div> + <dd><p>Cet attribut définit l'encodage de la ressource lié. La valeur de cet attribut est une liste de jeux de caractères (tels que définis dans la RFC {{rfc(2045)}}) séparés par des espaces ou des virgules. La valeur par défaut de cet attribut est <code>iso-8859-1</code>.</p> + <div class="note"><p><strong>Note :</strong> cet attribut est obsolète <strong>et ne doit pas être utilisé</strong>. Pour obtenir l'effet escompté, on utilisera l'en-tête HTTP {{httpheader("Content-Type")}} pour la ressource liée.</p></div> </dd> <dt>{{htmlattrdef("methods")}} {{Non-standard_inline}}</dt> <dd>La valeur de cet attribut fournit des informations quant aux fonctions qui peuvent être utilisées sur l'objet lié. Les valeurs sont généralement des méthodes HTTP mais elles peuvent également inclure des informations en avance sur le lien (le navigateur pourrait par exemple choisir un affichage différent pour un lien selon la méthode utilisée). Cet attribut n'est pas pris en charge de façon correcte, y compris par le navigateur qui le définit, Internet Explorer 4. Voir <a href="https://msdn.microsoft.com/en-us/library/ms534168%28VS.85%29.aspx" rel="external nofollow">la page MSDN sur la propriété <code>methods</code></a>.</dd> @@ -151,10 +149,12 @@ translation_of: Web/HTML/Element/link <dd>Cet attribut permet d'identifier une ressource qui sera nécessaire dans la suite de la navigation et que l'agent utilisateur devrait télécharger. Cela permet à l'agent utilisateur d'avoir un meilleur temps de réponse lorsque la ressource sera nécessaire.</dd> <dt>{{htmlattrdef("rev")}}{{obsolete_inline}}</dt> <dd>La valeur de cet attribut décrit le lien entre le document courant et la ressource liée (définie par l'attribut {{htmlattrxref("href", "link")}}). Cet attribut définit donc la relation réciproque à la relation décrite par l'attribut <code>rel</code>. <a href="/fr/docs/Web/HTML/Types_de_lien">Les types de lien</a> utilisés pour cet attribut sont semblables aux valeurs autorisés par {{htmlattrxref("rel", "link")}}. - <div class="note"><strong>Note d'utilisation :</strong> cet attribut est obsolète en HTML5 <strong>et ne doit pas être utilisé</strong>. Pour obtenir le même effet, on utilisera l'attribut {{htmlattrxref("rel", "link")}} avec la valeur réciproque <a href="/fr/docs/Web/HTML/Types_de_lien">pour le type de lien</a>, (<code>made</code> devrait par exemple être remplacé par <code>author</code>). Cet attribut ne signifie pas « révision » et ne doit pas être utilisé comme un numéro de version.</div> + <div class="note"> + <p><strong>Note :</strong> cet attribut est obsolète en HTML5 <strong>et ne doit pas être utilisé</strong>. Pour obtenir le même effet, on utilisera l'attribut {{htmlattrxref("rel", "link")}} avec la valeur réciproque <a href="/fr/docs/Web/HTML/Types_de_lien">pour le type de lien</a>, (<code>made</code> devrait par exemple être remplacé par <code>author</code>). Cet attribut ne signifie pas « révision » et ne doit pas être utilisé comme un numéro de version.</p> + </div> <div class="note"> - <p><strong>Note </strong><strong>:</strong> La spécification actuelle de HTML 5.2 du W3C n'indique plus l'attribut <code>rev</code> comme obsolète. En revanche, la spécification du WHATWG le considère toujours comme obsolète. Tant que cette incohérence n'est pas résolue, mieux vaut considérer cet attribut comme obsolète.</p> + <p><strong>Note :</strong> La spécification actuelle de HTML 5.2 du W3C n'indique plus l'attribut <code>rev</code> comme obsolète. En revanche, la spécification du WHATWG le considère toujours comme obsolète. Tant que cette incohérence n'est pas résolue, mieux vaut considérer cet attribut comme obsolète.</p> </div> </dd> <dt>{{htmlattrdef("target")}}{{Non-standard_inline}}</dt> @@ -167,7 +167,7 @@ translation_of: Web/HTML/Element/link <p>Pour associer une feuille de style à la page courante, on utilisera la syntaxe suivante :</p> -<pre class="brush: html notranslate"><link href="style.css" rel="stylesheet"> +<pre class="brush: html"><link href="style.css" rel="stylesheet"> </pre> <h3 id="Fournir_des_feuilles_de_style_alternatives">Fournir des feuilles de style alternatives</h3> @@ -176,7 +176,7 @@ translation_of: Web/HTML/Element/link <p>L'utilisateur pourra choisir parmi ces feuilles de style via le menu « Affichage > Style de la page ». Ainsi, un utilisateur pourra voir différentes versions d'une même page.</p> -<pre class="brush: html notranslate"><link href="default.css" rel="stylesheet" title="Mise en forme par défaut"> +<pre class="brush: html"><link href="default.css" rel="stylesheet" title="Mise en forme par défaut"> <link href="joli.css" rel="alternate stylesheet" title="Joli"> <link href="simple.css" rel="alternate stylesheet" title="Simple"> </pre> @@ -185,7 +185,7 @@ translation_of: Web/HTML/Element/link <p>Il est possible de déterminer si une feuille de style a été chargée en écoutant l'évènement <code>load</code>. De la même façon, un évènement <code>error</code> indiquera qu'une erreur a eu lieu lors du traitement de la feuille de style:</p> -<pre class="brush: html notranslate"><script> +<pre class="brush: html"><script> function sheetLoaded() { // faire quelque chose, sachant // que la feuille a été chargéee @@ -201,7 +201,9 @@ translation_of: Web/HTML/Element/link onerror="sheetError()"> </pre> -<div class="note"><strong>Note :</strong> L'évènement <code>load</code> est déclenché une fois que la feuille de style et que le contenu associé ont été chargés et analysés et immédiatement avant que la mise en forme soit appliquée au contenu.</div> +<div class="note"> + <p><strong>Note :</strong> L'évènement <code>load</code> est déclenché une fois que la feuille de style et que le contenu associé ont été chargés et analysés et immédiatement avant que la mise en forme soit appliquée au contenu.</p> +</div> <h3 id="Exemples_avec_preload">Exemples avec <code>preload</code></h3> diff --git a/files/fr/web/html/element/main/index.html b/files/fr/web/html/element/main/index.html index b9f73033d3..6f5982049c 100644 --- a/files/fr/web/html/element/main/index.html +++ b/files/fr/web/html/element/main/index.html @@ -16,8 +16,6 @@ translation_of: Web/HTML/Element/main <div>{{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> @@ -73,7 +71,7 @@ translation_of: Web/HTML/Element/main <p>Ajouter un attribut {{htmlattrxref("id")}} à l'élément <code><main></code> lui permet d'être une cible pour la navigation rapide.</p> -<pre><span class="tag"><body</span><span class="tag">> +<pre><body> <a href="#main-content">Aller au contenu principal</a> <!-- Contenu relatif à la navigation et en-tête du document --> @@ -81,7 +79,7 @@ translation_of: Web/HTML/Element/main <main id="main-content"> <!-- Contenu principal de la page --> </main> -</body></span> +</body> </pre> <ul> diff --git a/files/fr/web/html/element/map/index.html b/files/fr/web/html/element/map/index.html index 703b769c6c..0587aefb35 100644 --- a/files/fr/web/html/element/map/index.html +++ b/files/fr/web/html/element/map/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/map <div>{{EmbedInteractiveExample("pages/tabbed/map.html", "tabbed-standard")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <h2 id="Attributs">Attributs</h2> <p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> @@ -27,21 +25,30 @@ translation_of: Web/HTML/Element/map <h2 id="Exemples">Exemples</h2> -<p>Dans cet exemple, la partie gauche est un lien vers une page et la partie droite est inactive.</p> - <h3 id="HTML">HTML</h3> -<pre class="brush: html"><map name="exemple-map-1"> - <area shape="rect" coords="0,0 200,200" href="https://developer.mozilla.org" target="_blank" /> - <area shape="default" /> +<pre class="brush: html"><map name="primary"> + <area shape="circle" coords="75,75,75" href="left.html"> + <area shape="circle" coords="275,75,75" href="right.html"> </map> -<img usemap="#exemple-map-1" src="https://mdn.mozillademos.org/files/14546/map.png"> +<img usemap="#primary" src="https://via.placeholder.com/350x150" alt="350 x 150 pic"> </pre> <h3 id="Résultat">Résultat</h3> <p>{{EmbedLiveSample("Exemples","450","230")}}</p> +<h3 id="Résultat_attendu">Résultat attendu</h3> + +<p>L'exemple précédent devrait faire apparaître des images semblables (en utilisant la touche <kbd>tab</kbd> de votre clavier) :</p> + +<p><em>Pour le lien <code>left.html</code> :</em><br> + <img alt="" src="screen_shot_2017-02-02_at_10.48.40_pm.png"></p> + +<p><em>Pour le lien <code>right.html</code> </em><br> + <img alt="" src="screen_shot_2017-02-02_at_10.49.04_pm.png"></p> + + <h2 id="Résumé_technique">Résumé technique</h2> <table class="properties"> diff --git a/files/fr/web/html/element/mark/index.html b/files/fr/web/html/element/mark/index.html index bea78cc4f4..df2379de82 100644 --- a/files/fr/web/html/element/mark/index.html +++ b/files/fr/web/html/element/mark/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/mark <div>{{EmbedInteractiveExample("pages/tabbed/mark.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> diff --git a/files/fr/web/html/element/menu/index.html b/files/fr/web/html/element/menu/index.html index 171b9eba0f..760832b44d 100644 --- a/files/fr/web/html/element/menu/index.html +++ b/files/fr/web/html/element/menu/index.html @@ -99,7 +99,7 @@ translation_of: Web/HTML/Element/menu <h3 id="Barre_d’outils_experimental_inline">Barre d’outils {{experimental_inline}}</h3> <div class="warning"> -<p><strong>Attention : </strong>Les menus sous forme de barres d'outils n'ont pas encore été implémentés dans les navigateurs.</p> +<p><strong>Attention :</strong> Les menus sous forme de barres d'outils n'ont pas encore été implémentés dans les navigateurs.</p> </div> <h4 id="HTML_3">HTML</h4> diff --git a/files/fr/web/html/element/meta/index.html b/files/fr/web/html/element/meta/index.html index 1c4f6deedd..d02f6807b6 100644 --- a/files/fr/web/html/element/meta/index.html +++ b/files/fr/web/html/element/meta/index.html @@ -16,8 +16,8 @@ translation_of: Web/HTML/Element/meta <p>Comme tous les autres éléments, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> -<div class="blockIndicator note"> -<p><strong>Note : </strong>Il faut préciser que l'attribut {{htmlattrxref("name", "meta")}} possède une signification spécifique à l'élément {{HTMLElement("meta")}} et que l'attribut {{htmlattrxref("itemprop")}} ne doit pas être utilisé quand l'un de ces attributs est déjà utilisé : {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}}.</p> +<div class="note"> +<p><strong>Note :</strong> Il faut préciser que l'attribut {{htmlattrxref("name", "meta")}} possède une signification spécifique à l'élément {{HTMLElement("meta")}} et que l'attribut {{htmlattrxref("itemprop")}} ne doit pas être utilisé quand l'un de ces attributs est déjà utilisé : {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}}.</p> </div> <dl> @@ -28,24 +28,24 @@ translation_of: Web/HTML/Element/meta <li>Les auteurs ne devraient pas utiliser d'encodage incompatible avec l'ASCII (c'est à dire ceux dont les codes 8-bits de 0x20 à 0x7E ne correspondent pas, de manière respective, aux codes Unicode 0x0020 à 0x007E) car ceux-ci représentent un risque de sécurité, les navigateurs ne les supportant pas pouvant traduire du contenu bénin en des éléments HTML. Ceci est le cas pour les jeux de caractères suivants : <code>JIS_C6226-1983</code>, <code>JIS_X0212-1990</code>, <code>HZ-GB-2312</code>, <code>JOHAB</code>, la famille d'encodage <code>ISO-2022</code> et la famille d'encodage <code>EBCDIC</code>.</li> <li> <div class="warning"> - <p>Les auteurs ne doivent pas utiliser <code>CESU-8</code>, <code>UTF-7</code>, <code>BOCU-1</code> et <code>SCSU</code>. Ceux-ci rejoignent le cas précédents et n'ont pas été conçus pour être utilisés sur le web. Certaines attaques de types XSS (<em>Cross-site scripting</em>) ont pu être recensées avec ces encodages.</p> + <p><strong>Attention :</strong> Les auteurs ne doivent pas utiliser <code>CESU-8</code>, <code>UTF-7</code>, <code>BOCU-1</code> et <code>SCSU</code>. Ceux-ci rejoignent le cas précédents et n'ont pas été conçus pour être utilisés sur le web. Certaines attaques de types XSS (<em>Cross-site scripting</em>) ont pu être recensées avec ces encodages.</p> </div> </li> <li> <div class="warning"> - <p>Les auteurs ne devraient pas utiliser <code>UTF-32</code> car certains algorithmes d'encodage HTML5 ne peuvent différiencer <code>UTF-32</code> de <code>UTF-16</code>.</p> + <p><strong>Attention :</strong> Les auteurs ne devraient pas utiliser <code>UTF-32</code> car certains algorithmes d'encodage HTML5 ne peuvent différiencer <code>UTF-32</code> de <code>UTF-16</code>.</p> </div> </li> </ul> - <div class="note"><strong>Notes :</strong> + <div class="note"><p><strong>Note :</strong></p> <ul> <li>Le jeux de caractères déclaré doit correspondre à celui utilisé dans la page. Il est inutile de déclarer un jeu de caractères incorrect (cela entraînant également une mauvaise expérience utilisateur).</li> <li>L'élément {{HTMLElement("meta")}} doit appartenir à l'élément {{HTMLElement("head")}} et doit apparaître parmi les <strong>512 premiers octets de la page</strong>. En effet, certains navigateurs ne consultent seulement ces premiers octets pour déterminer l'encodage utilisé pour la page.</li> <li>L'élément {{HTMLElement("meta")}} ne représente qu'une partie de l'<a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#encoding-sniffing-algorithm">algorithme déterminant le jeu de caractères</a> à appliquer sur la page par le navigateur. Ainsi, l'en-tête HTTP Content-Type et tous les éléments BOM auront une priorité supérieure à cet élément.</li> <li>Définir le jeu de caractères utilisé grâce à cet attribut représente une bonne pratique et est fortement recommandé. Si aucun encodage n'est défini pour la page, plusieurs techniques XSS peuvent porter atteinte à l'utilisateur (voir l'exemple de la <a class="external" href="https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7">technique XSS de recours à UTF-7</a>). Toujours renseigner cet élément meta protégera contre ces dangers.</li> - <li>L'élément {{HTMLElement("meta")}} est un synonyme de <code><meta http-equiv="Content-Type" content="text/html; charset=<em>IANAcharset</em>"></code> utilisé avant HTML5. Ici <em><code>IANAcharset</code> </em>correspond à la valeur de l'attribut {{htmlattrxref("charset", "meta")}} correspondant. Bien qu'elle soit obsolète et qu'elle ne soit plus recommandée, cette syntaxe est toujours autorisée.</li> + <li>L'élément {{HTMLElement("meta")}} est un synonyme de <code><meta http-equiv="Content-Type" content="text/html; charset=<em>IANAcharset</em>"></code> utilisé avant HTML5. Ici <em><code>IANAcharset</code> </em>correspond à la valeur de l'attribut {{htmlattrxref("charset", "meta")}} correspondant. Bien qu'elle soit obsolète et qu'elle ne soit plus recommandée, cette syntaxe est toujours autorisée.</li> </ul> </div> </dd> @@ -56,13 +56,13 @@ translation_of: Web/HTML/Element/meta <dl> <dt><code>content-language</code> {{obsolete_inline}}</dt> <dd>Définit la langue par défaut utilisée par une page - <div class="warning"><strong>Attention !</strong> Cette valeur n'est plus recommandée et ne doit donc plus être utilisée. L'attribut <code><strong>lang</strong></code> de l'élément {{HTMLElement("body")}} doit être utilisé pour remplir cette fonction.</div> + <div class="warning"><p><strong>Attention :</strong> Cette valeur n'est plus recommandée et ne doit donc plus être utilisée. L'attribut <code><strong>lang</strong></code> de l'élément {{HTMLElement("body")}} doit être utilisé pour remplir cette fonction.</p></div> </dd> <dt><code>Content-Security-Policy</code></dt> <dd>Cette valeur permet aux administrateurs de sites web de définir des règles de gestion de contenu pour les ressources qui sont servies. Cela permet notamment d'indiquer les origines valides et les points d'accès aux scripts afin de protéger contre les attaques XSS.</dd> <dt><code>content-type</code> {{obsolete_inline}}</dt> <dd>Ce champ d'attribut définit le <a href="/fr/docs/Glossaire/Type_MIME">type MIME</a> du document et peut être suivi par son jeu de caractères. Il respecte la même syntaxe que le champ <code>content-type</code> appartenant à l'en-tête HTTP. Cet attribut faisant, lui, partie d'un élément HTML, il n'est pas possible d'utiliser la plupart des valeurs. La syntaxe correcte pour son contenu est donc la chaîne de caractère <code>'text/html</code>' éventuellement suivie par un jeu de caractères avec la syntaxe suivante : '<code>; charset=</code><em><code>IANAcharset</code></em>' où <code>IANAcharset</code> est l'appellation MIME du jeu de caractères, <a class="external" href="https://www.iana.org/assignments/character-sets">présentée par l'IANA</a> - <div class="warning"><strong>Notes d'utilisation</strong> + <div class="warning"><p><strong>Attention :</strong></p> <ul> <li>Ce champ n'est plus recommandé et ne donc doit pas être utilisé. L'attribut {{htmlattrxref("charset", "meta")}} de l'élément {{HTMLElement("meta")}} doit être utilisé à la place.</li> <li>Étant donné que l'élément {{HTMLElement("meta")}} peut ne pas être utilisé pour changer le type d'un document XHTML, ou d'un document HTML5 précédé par une syntaxe XHTML, il ne faut pas utiliser ce champs pour définir un type MIME étant un type MIME XHTML. Cela serait incorrect.</li> @@ -79,16 +79,16 @@ translation_of: Web/HTML/Element/meta </dd> <dt><code>set-cookie</code> {{obsolete_inline}}{{non-standard_inline}}</dt> <dd>Ce champ définit un cookie pour la page. Son contenu doit respecter la syntaxe énoncée par la <a class="external" href="https://tools.ietf.org/html/draft-ietf-httpstate-cookie-14">IETF HTTP Cookie Specification</a>. - <div class="warning"><strong>Attention !</strong> Ce champ est désormais obsolète et ne doit donc pas être utilisé. L'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Set-Cookie">Set-Cookie</a> doit être utilisée à la place. Cette valeur a été retirée du standard et n'est plus prise en charge à partir de <a href="https://www.fxsitecompat.dev/en-CA/docs/2019/setting-cookies-with-meta-http-equiv-is-no-longer-allowed/">Firefox 68</a> et de <a href="https://www.chromestatus.com/feature/6170540112871424">Chrome 65</a>.</div> + <div class="warning"><p><strong>Attention :</strong> Ce champ est désormais obsolète et ne doit donc pas être utilisé. L'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Set-Cookie">Set-Cookie</a> doit être utilisée à la place. Cette valeur a été retirée du standard et n'est plus prise en charge à partir de <a href="https://www.fxsitecompat.dev/en-CA/docs/2019/setting-cookies-with-meta-http-equiv-is-no-longer-allowed/">Firefox 68</a> et de <a href="https://www.chromestatus.com/feature/6170540112871424">Chrome 65</a>.</p></div> </dd> </dl> </dd> <dt>{{htmlattrdef("name")}}</dt> - <dd>Cet attribut définit le nom d'un métadonnée au niveau du document. Il ne doit pas être utilisé si l'un des attributs {{htmlattrxref("itemprop", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}} est utilisé.<br> + <dd>Cet attribut définit le nom d'un métadonnée au niveau du document. Il ne doit pas être utilisé si l'un des attributs {{htmlattrxref("itemprop", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}} est utilisé.<br> Le nom de la métadonnée document est associé à une valeur contenue dans l'attribut {{htmlattrxref("content", "meta")}}. Les noms possibles et la signification de leurs valeurs (contenues dans l'attribut {{htmlattrxref("content", "meta")}}) sont : <ul> <li><code>application-name</code>, qui définit le nom de l'application web utilisée dans la page - <div class="note"><strong>Notes :</strong> + <div class="note"><p><strong>Note :</strong></p> <ul> <li>Les navigateurs peuvent l'utiliser pour identifier l'application. Il est à distinguer de l'élément {{HTMLElement("title")}} qui contient généralement le nom de l'application mais qui contient aussi des informations comme le nom du document ou un statut</li> <li>Les pages web simples ne devraient pas utiliser cet attribut de métadonnée.</li> @@ -139,11 +139,11 @@ translation_of: Web/HTML/Element/meta </table> <div class="note"> - <p><strong>Notes:</strong></p> + <p><strong>Note :</strong></p> <ul> <li>Certains navigateurs prennent en charge les valeurs dépréciées <code>always</code>, <code>default</code> et <code>never</code>.</li> - <li>L'insertion dynamique de <code><meta name="referrer"></code> (grâce à <a href="/fr/docs/Web/API/Document/write"><code>document.write</code></a> ou <a href="/fr/docs/Web/API/Node/appendChild"><code>appendChild</code></a>) rend le comportement imprévisible.</li> + <li>L'insertion dynamique de <code><meta name="referrer"></code> (grâce à <a href="/fr/docs/Web/API/Document/write"><code>document.write</code></a> ou <a href="/fr/docs/Web/API/Node/appendChild"><code>appendChild</code></a>) rend le comportement imprévisible.</li> <li>Lorsque plusieurs règles conflictuelles sont définies, c'est la règle <code>no-referrer</code> qui est appliquée.</li> </ul> </div> @@ -253,7 +253,7 @@ translation_of: Web/HTML/Element/meta </tbody> </table> - <div class="note"><strong>Notes :</strong> + <div class="note"><p><strong>Note :</strong></p> <ul> <li>Seuls les robots « respectueux » suivront ces règles. Il ne faut pas considérer cela comme une manière efficace de blocage (robots indexeurs cherchant des adresses e-mails pour le spam notamment)</li> @@ -310,13 +310,13 @@ translation_of: Web/HTML/Element/meta </tr> <tr> <td><code>user-scalable</code></td> - <td>un booléen (<code>yes</code> ou <code>no</code>)</td> + <td>un booléen (<code>yes</code> ou <code>no</code>)</td> <td>Si la valeur est <code>no</code>, l'utilisateur ne pourra pas zoomer sur le document. Par défaut, la valeur est <code>yes</code>.</td> </tr> </tbody> </table> - <div class="warning"><strong>Attention !</strong> + <div class="warning"><p><strong>Attention :</strong></p> <ul> <li>Bien qu'il ne fasse pas partie du standard, cet attribut est utilisé par plusieurs navigateurs mobiles comme Safari Mobile, Firefox pour Mobile ou Opera Mobile.</li> @@ -329,7 +329,7 @@ translation_of: Web/HTML/Element/meta </dd> <dt>{{htmlattrdef("scheme")}} {{obsolete_inline}}</dt> <dd>Cet attribut définit le schéma dans lequel la métadonnée est décrite. Un schéma, de la même manière qu'un format, est un contexte permettant d'interpréter correctement la valeur de l'attribut {{htmlattrxref("content", "meta")}}. - <div class="warning"><strong>Attention !</strong> Cet attribut a été déprécié et ne doit donc plus être utilisé. Il n'y pas d'attributs ou d'éléments remplaçant sa fonction car cet attribut n'était pas usité.</div> + <div class="warning"><p><strong>Attention :</strong> Cet attribut a été déprécié et ne doit donc plus être utilisé. Il n'y pas d'attributs ou d'éléments remplaçant sa fonction car cet attribut n'était pas usité.</p></div> </dd> </dl> diff --git a/files/fr/web/html/element/meter/index.html b/files/fr/web/html/element/meter/index.html index 1622ba42e1..117cc298f6 100644 --- a/files/fr/web/html/element/meter/index.html +++ b/files/fr/web/html/element/meter/index.html @@ -15,9 +15,6 @@ translation_of: Web/HTML/Element/meter <div>{{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Attributs">Attributs</h2> <p>Comme pour les autres éléments HTML, cet élément inclut également <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> @@ -33,24 +30,18 @@ translation_of: Web/HTML/Element/meter <dd>Cet attribut représente la valeur maximale que peut prendre la mesure. Il doit s'agir d'un nombre à virgule; s'il est invalide ou si l'attribut n'est pas défini, sa valeur par défaut est 1.0. Il doit être strictement plus grand que la valeur de l'attribut <code><strong>min</strong></code>.</dd> <dt>{{htmlattrdef("min")}}</dt> <dd>Cet attribut représente la valeur minimale que peut prendre la mesure. Il doit s'agir d'un nombre à virgule; s'il est invalide ou si l'attribut n'est pas défini, sa valeur par défaut est 0.0. Il doit être strictement plus petit que la valeur de l'attribut <code><strong>max</strong></code>.</dd> -</dl> - -<dl> <dt>{{htmlattrdef("optimum")}}</dt> <dd>Cet attribut représente la valeur idéale pour la mesure. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs <code><strong>min </strong></code>et <code><strong>max</strong></code>. Si la valeur de <code><strong>optimum</strong></code> est inférieure à <code><strong>low</strong></code>, s'il est défini, cela signifie que les valeurs les plus petites sont meilleures; si sa valeur est supérieure à <code><strong>high</strong></code>, s'il est défini, cela signifie que les valeurs les plus grandes sont meilleures; enfin, s'il est compris entre <code><strong>low </strong></code>et <code><strong>high</strong></code>, cela signifie que les extrêmes ne sont pas les meilleures grandeurs.</dd> -</dl> - -<dl> <dt>{{htmlattrdef("value")}}</dt> <dd>Cette attribut représente la valeur courante de la mesure. Cet attribut est obligatoire. <div class="note"> - <p><strong>Note d'utilisation</strong> : il est recommandé aux auteurs de dupliquer les valeurs des attributs <strong><code>min</code>, </strong><code><strong>max</strong></code> et <code><strong>value</strong></code> dans le contenu de cet élément de façon à permettre aux navigateurs ne supportant pas l'élément {{ HTMLElement("meter") }} de transmettre ces informations aux utilisateurs. Par exemple :</p> + <p><strong>Note :</strong> il est recommandé aux auteurs de dupliquer les valeurs des attributs <strong><code>min</code>, </strong><code><strong>max</strong></code> et <code><strong>value</strong></code> dans le contenu de cet élément de façon à permettre aux navigateurs ne supportant pas l'élément {{ HTMLElement("meter") }} de transmettre ces informations aux utilisateurs. Par exemple :</p> <pre class="brush: html">Utilisation de l'espace de stockage: <meter value=6 max=8> 6 blocs utilisés (sur un total de 8) </meter></pre> - Il n'y a pas de moyen sémantique de décrire l'unité de l'attribut <code><strong>value</strong></code>, néanmoins l'attribut global <code><strong>title</strong></code> peut être utilisé pour cela.</div> + <p>Il n'y a pas de moyen sémantique de décrire l'unité de l'attribut <code><strong>value</strong></code>, néanmoins l'attribut global <code><strong>title</strong></code> peut être utilisé pour cela.</p></div> </dd> </dl> diff --git a/files/fr/web/html/element/nav/index.html b/files/fr/web/html/element/nav/index.html index 0bc51c3ffa..5d877594b7 100644 --- a/files/fr/web/html/element/nav/index.html +++ b/files/fr/web/html/element/nav/index.html @@ -14,9 +14,6 @@ translation_of: Web/HTML/Element/nav <div>{{EmbedInteractiveExample("pages/tabbed/nav.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <h2 id="Attributs">Attributs</h2> <p>Cet élément ne possède que <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> @@ -107,6 +104,6 @@ translation_of: Web/HTML/Element/nav <ul> <li>Les autres éléments HTML en relation avec les sections : {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> - <li class="last"><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Plan et section d'un document HTML5</a></li> - <li class="last"><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">ARIA : le rôle <code>navigation</code></a></li> + <li><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Plan et section d'un document HTML5</a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">ARIA : le rôle <code>navigation</code></a></li> </ul> diff --git a/files/fr/web/html/element/nobr/index.html b/files/fr/web/html/element/nobr/index.html index 314e12d697..25296e38fa 100644 --- a/files/fr/web/html/element/nobr/index.html +++ b/files/fr/web/html/element/nobr/index.html @@ -13,8 +13,8 @@ translation_of: Web/HTML/Element/nobr <p>L'élément HTML <strong><code><nobr></code></strong> évite qu'un texte soit coupé par un retour à la ligne automatique ; il est donc affiché sur une seule ligne. Il peut être alors nécessaire d'utiliser les barres de défilement pour lire le texte en intégralité.</p> -<div class="blockIndicator warning"> -<p>Cet élément n'est pas standard en HTML et ne doit donc pas être utilisé. <strong>C'est la propriété CSS {{cssxref("white-space")}} doit être utilisée à la place</strong>, de cette manière :</p> +<div class="warning"> +<p><strong>Attention :</strong> Cet élément n'est pas standard en HTML et ne doit donc pas être utilisé. <strong>C'est la propriété CSS {{cssxref("white-space")}} doit être utilisée à la place</strong>, de cette manière :</p> </div> <pre class="brush: html"><span style="white-space: nowrap">Un texte long sans retour à la ligne.</span></pre> diff --git a/files/fr/web/html/element/noframes/index.html b/files/fr/web/html/element/noframes/index.html index e8482d17cd..fccceb6b8a 100644 --- a/files/fr/web/html/element/noframes/index.html +++ b/files/fr/web/html/element/noframes/index.html @@ -17,7 +17,9 @@ translation_of: Web/HTML/Element/noframes <p>Cet élément pouvait être utilisé afin d'afficher un message explicatif, destiné à l'utilisateur. Idéalement, le contenu devait présenter des fonctionnalités analogues à la <em>frame</em> qui n'était pas prise en charge.</p> -<div class="note"><strong>Note d'utilisation :</strong> Cet élément est aussi entièrement obsolète en HTML5, et doit être evité pour se conformer au standard.</div> +<div class="note"> + <p><strong>Note :</strong> Cet élément est aussi entièrement obsolète en HTML5, et doit être evité pour se conformer au standard.</p> +</div> <h2 id="Attributs">Attributs</h2> diff --git a/files/fr/web/html/element/object/index.html b/files/fr/web/html/element/object/index.html index b0bb8bcd8b..fb4970dfbf 100644 --- a/files/fr/web/html/element/object/index.html +++ b/files/fr/web/html/element/object/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/object <div>{{EmbedInteractiveExample("pages/tabbed/object.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> diff --git a/files/fr/web/html/element/ol/index.html b/files/fr/web/html/element/ol/index.html index 419254935b..c36383b0aa 100644 --- a/files/fr/web/html/element/ol/index.html +++ b/files/fr/web/html/element/ol/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML/Element/ol --- <div>{{HTMLRef}}</div> -<p class="summary">L'élément HTML <strong><code><ol></code></strong> représente une liste ordonnée. Les éléments d'une telle liste sont généralement affichés avec un indicateur ordinal pouvant prendre la forme de nombres, de lettres, de chiffres romains ou de points. La mise en forme de la numérotation n'est pas utilisée dans la description HTML mais dans la feuille de style CSS associée grâce à la propriété <a href="/fr/docs/Web/CSS/list-style-type"><code>list-style-type</code></a>.</p> +<p>L'élément HTML <strong><code><ol></code></strong> représente une liste ordonnée. Les éléments d'une telle liste sont généralement affichés avec un indicateur ordinal pouvant prendre la forme de nombres, de lettres, de chiffres romains ou de points. La mise en forme de la numérotation n'est pas utilisée dans la description HTML mais dans la feuille de style CSS associée grâce à la propriété <a href="/fr/docs/Web/CSS/list-style-type"><code>list-style-type</code></a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}</div> @@ -53,11 +53,11 @@ translation_of: Web/HTML/Element/ol <p>À l'instar des autres éléments HTML, il est possible d'utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur cet élément.</p> <dl> - <dt><strong id="attr-reversed"><code>reversed</code></strong></dt> + <dt><strong><code>reversed</code></strong></dt> <dd>Cet attribut booléen indique que les éléments de la liste sont dans l'ordre inverse. Les éléments sont numérotés de haut en bas.</dd> - <dt><strong id="attr-start"><code>start</code></strong></dt> + <dt><strong><code>start</code></strong></dt> <dd>Un nombre entier à partir duquel on commence à compter pour les éléments de la liste. Toujours un chiffre arabique (1, 2, 3, etc.), même lorsque le <code>type</code> de numérotation est constitué de lettres ou de chiffres romains. Par exemple, pour commencer à numéroter les éléments à partir de la lettre "d" ou du chiffre romain "iv", utilisez <code>start="4"</code>.</dd> - <dt><strong id="attr-type"><code>type</code></strong></dt> + <dt><strong><code>type</code></strong></dt> <dd>Définit le type de numérotation : <ul> <li><code>a</code> pour les lettres minuscules</li> @@ -68,9 +68,8 @@ translation_of: Web/HTML/Element/ol </ul> <p>Le type spécifié est utilisé pour l'ensemble de la liste, sauf si un attribut différent <a href="/fr/docs/Web/HTML/Element/li#attr-type"><code>type</code></a> est utilisé sur un élément <a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a> fermé.</p> - <div class="notecard note"> - <p><b>Note :</b></p> - <p>À moins que le type du numéro de la liste n'ait de l'importance (comme dans les documents juridiques ou techniques où les éléments sont référencés par leur numéro/lettre), utilisez plutôt la propriété CSS <a href="/fr/docs/Web/CSS/list-style-type"><code>list-style-type</code></a>.</p> + <div class="note"> + <p><strong>Note :</strong>À moins que le type du numéro de la liste n'ait de l'importance (comme dans les documents juridiques ou techniques où les éléments sont référencés par leur numéro/lettre), utilisez plutôt la propriété CSS <a href="/fr/docs/Web/CSS/list-style-type"><code>list-style-type</code></a>.</p> </div> </dd> </dl> diff --git a/files/fr/web/html/element/optgroup/index.html b/files/fr/web/html/element/optgroup/index.html index 7049d2b6fb..74834d660c 100644 --- a/files/fr/web/html/element/optgroup/index.html +++ b/files/fr/web/html/element/optgroup/index.html @@ -15,9 +15,6 @@ translation_of: Web/HTML/Element/optgroup <div>{{EmbedInteractiveExample("pages/tabbed/optgroup.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - <div class="note"> <p><strong>Note :</strong> Il n'est pas possible d'imbriquer plusieurs éléments <code><optgroup></code> entre eux.</p> </div> diff --git a/files/fr/web/html/element/option/index.html b/files/fr/web/html/element/option/index.html index b8db2dbec8..469756c960 100644 --- a/files/fr/web/html/element/option/index.html +++ b/files/fr/web/html/element/option/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/option <div>{{EmbedInteractiveExample("pages/tabbed/option.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> @@ -36,7 +34,7 @@ translation_of: Web/HTML/Element/option <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><select name="select"> +<pre class="brush: html"><select name="select"> Elle est où la poulette ? <option value="value1">Avec les lapins</option> <option value="value2" selected>Avec les canards</option> diff --git a/files/fr/web/html/element/p/index.html b/files/fr/web/html/element/p/index.html index bcc41a5393..678b9bc74e 100644 --- a/files/fr/web/html/element/p/index.html +++ b/files/fr/web/html/element/p/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/p <div>{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <p>Étant des éléments de bloc, les paragraphes se fermeront automatiquement si un autre élément de bloc est analysé avant la balise de fermeture <code></p></code> (voir Omission de balises dans le tableau qui suit).</p> <div class="note"> diff --git a/files/fr/web/html/element/picture/index.html b/files/fr/web/html/element/picture/index.html index a7e60e4af6..92dda31bdd 100644 --- a/files/fr/web/html/element/picture/index.html +++ b/files/fr/web/html/element/picture/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/picture <div>{{EmbedInteractiveExample("pages/tabbed/picture.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'agent utilisateur examine chaque attribut présent dans <code><source></code> ({{htmlattrxref("srcset", "source")}}, {{htmlattrxref("media", "source")}}, and {{htmlattrxref("type", "source")}}) pour sélectionner l'URL de la meilleure ressource selon la disposition de la page, les caractéristiques de l'écran de l'appareil, etc.</p> <p>L'élément <code><picture></code> peut être utilisé pour :</p> @@ -35,8 +33,8 @@ translation_of: Web/HTML/Element/picture <p>Il est possible d'utiliser la propriété CSS {{cssxref("object-position")}} afin d'ajuster le positionnement de l'image dans le cadre de l'élément. La propriété {{cssxref("object-fit")}} permet quant à elle de contrôler la façon dont la taille de l'image est ajustée.</p> -<div class="blockIndicator note"> -<p><strong>Note : </strong>Ces propriétés doivent être utilisées sur les éléments <code><img></code> fils et pas sur l'élément <code><picture></code>.</p> +<div class="note"> +<p><strong>Note :</strong> Ces propriétés doivent être utilisées sur les éléments <code><img></code> fils et pas sur l'élément <code><picture></code>.</p> </div> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/html/element/plaintext/index.html b/files/fr/web/html/element/plaintext/index.html index 70d0e09319..80b5a98b0c 100644 --- a/files/fr/web/html/element/plaintext/index.html +++ b/files/fr/web/html/element/plaintext/index.html @@ -13,7 +13,7 @@ translation_of: Web/HTML/Element/plaintext <p>L'élément HTML <strong><code><plaintext></code></strong> permet d'afficher du texte qui n'est pas interprété comme du HTML. Il ne possède pas de balise de fermeture, car tout ce qui suit n'est plus considéré comme du HTML.</p> -<div class="note"><strong>Note : </strong>Ne pas utiliser cet élément. +<div class="note"><p><strong>Note :</strong> Ne pas utiliser cet élément.</p> <ul> <li>Il est déprécié depuis HTML 2, et n'a jamais été implementé par tous les navigateurs d'une manière cohérente. De plus, il est obsolète depuis HTML5, et pourra être rendu par les agents-utilisateurs qui l'acceptent comme un élément {{HTMLElement("pre")}}, qui interprètera le HTML contenu même si ce n'est pas ce qui est souhaité !</li> @@ -32,7 +32,7 @@ translation_of: Web/HTML/Element/plaintext <p>Cet élément implémente l'interface {{domxref('HTMLElement')}}.</p> <div class="note"> -<p><strong>Note d'implémentation : </strong>Jusqu'à Gecko 1.9.2 inclus, Firefox implémente l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</p> +<p><strong>Note :</strong> Jusqu'à Gecko 1.9.2 inclus, Firefox implémente l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</p> </div> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/html/element/pre/index.html b/files/fr/web/html/element/pre/index.html index 423bc7d858..6b6aadfb0c 100644 --- a/files/fr/web/html/element/pre/index.html +++ b/files/fr/web/html/element/pre/index.html @@ -18,8 +18,6 @@ translation_of: Web/HTML/Element/pre <div>{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> diff --git a/files/fr/web/html/element/progress/index.html b/files/fr/web/html/element/progress/index.html index 7253e5886b..ea62218a67 100644 --- a/files/fr/web/html/element/progress/index.html +++ b/files/fr/web/html/element/progress/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/progress <div>{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> diff --git a/files/fr/web/html/element/q/index.html b/files/fr/web/html/element/q/index.html index 05dd579fd7..f4656745b2 100644 --- a/files/fr/web/html/element/q/index.html +++ b/files/fr/web/html/element/q/index.html @@ -14,10 +14,8 @@ translation_of: Web/HTML/Element/q <div>{{EmbedInteractiveExample("pages/tabbed/q.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> -<p><strong>Note d'utilisation :</strong> la plupart des navigateurs récents ajoutent automatiquement des guillemets autours du contenu d'un élément <code><q></code> mais il peut être nécessaire d'ajouter une règle CSS pour les ajouter dans les anciens navigateurs.</p> +<p><strong>Note :</strong> La plupart des navigateurs récents ajoutent automatiquement des guillemets autours du contenu d'un élément <code><q></code> mais il peut être nécessaire d'ajouter une règle CSS pour les ajouter dans les anciens navigateurs.</p> </div> <h2 id="Attributs">Attributs</h2> diff --git a/files/fr/web/html/element/rb/index.html b/files/fr/web/html/element/rb/index.html index e51879285e..033176d14d 100644 --- a/files/fr/web/html/element/rb/index.html +++ b/files/fr/web/html/element/rb/index.html @@ -10,11 +10,7 @@ translation_of: Web/HTML/Element/rb --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">L'élément de <strong>base ruby (<code><rb></code>) </strong>est utilisé afin de délimiter le composant texte de base d'une annotation {{HTMLElement("ruby")}}. Autrement dit, le texte qui est annoté.</span> Un élément <code><rb></code> devrait encadrer chaque segment atomique du texte de base.</p> - -<div class="hidden">\{{EmbedInteractiveExample("pages/tabbed/rb.html", "tabbed-standard")}}</div> - -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<p>L'élément de <strong>base ruby (<code><rb></code>) </strong>est utilisé afin de délimiter le composant texte de base d'une annotation {{HTMLElement("ruby")}}. Autrement dit, le texte qui est annoté. Un élément <code><rb></code> devrait encadrer chaque segment atomique du texte de base.</p> <h2 id="Attributs">Attributs</h2> @@ -46,35 +42,31 @@ translation_of: Web/HTML/Element/rb 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby></pre> -<div class="hidden"> -<div id="with-ruby"> -<pre class="brush: html"><ruby> <rb>漢<rb>字 <rp>(</rp><rt>kan<rt>ji<rp>)</rp> </ruby> +<h3 id="Avec_prise_en_charge_de_ruby">Avec prise en charge de ruby</h3> + +<pre class="brush: html hidden"><ruby> <rb>漢<rb>字 <rp>(</rp><rt>kan<rt>ji<rp>)</rp> </ruby> </pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { font-size: 22px; }</pre> -</div> -</div> <p>Voici le résultat obtenu :</p> -<p>{{EmbedLiveSample("with-ruby", "100%", 60)}}</p> +<p>{{EmbedLiveSample("Avec_prise_en_charge_de_ruby", "100%", 60)}}</p> <p>Pour un navigateur qui ne prend pas en charge les annotations ruby, voici à quoi aurait ressemblé le résultat :</p> -<div id="without-ruby"> -<div class="hidden"> -<pre class="brush: html">漢字 (kan ji)</pre> +<h3 id="Sans_prise_en_charge_de_ruby">Sans prise en charge de ruby</h3> + +<pre class="brush: html hidden">漢字 (kan ji)</pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { font-size: 22px; } </pre> -</div> -</div> -<p>{{EmbedLiveSample("without-ruby", "100%", 60)}}</p> +<p>{{EmbedLiveSample("Sans_prise_en_charge_de_ruby", "100%", 60)}}</p> <div class="note"> <p><strong>Note :</strong> Voir l'article sur l'élément {{HTMLElement("ruby")}} pour de plus amples exemples.</p> diff --git a/files/fr/web/html/element/rp/index.html b/files/fr/web/html/element/rp/index.html index 40b8be5b98..f7db845a0f 100644 --- a/files/fr/web/html/element/rp/index.html +++ b/files/fr/web/html/element/rp/index.html @@ -19,49 +19,41 @@ translation_of: Web/HTML/Element/rp <div>{{EmbedInteractiveExample("pages/tabbed/rp.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> <h2 id="Exemples">Exemples</h2> -<div id="with-ruby"> -<h3 id="HTML">HTML</h3> +<h3 id="Avec_prise_en_charge_de_ruby">Avec prise en charge de ruby</h3> +<h4 id="HTML">HTML</h4> <pre class="brush: html"><ruby> 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby></pre> -<div class="hidden"> -<h3 id="CSS">CSS</h3> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { font-size: 22px; }</pre> -</div> -</div> -<h3 id="Résultat">Résultat</h3> +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Avec_prise_en_charge_de_ruby","300","150")}}</p> -<p>{{EmbedLiveSample("with-ruby","300","150")}}</p> +<h3 id="Sans_prise_en_charge_de_ruby">Sans prise en charge de ruby</h3> <p>Avec un navigateur ne prenant pas en charge les annotations Ruby, on aurait :</p> -<div id="without-ruby"> -<div class="hidden"> -<pre class="brush: html">漢 (Kan) 字 (ji)</pre> +<pre class="brush: html hidden">漢 (Kan) 字 (ji)</pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { font-size: 22px; } </pre> -</div> -</div> -<p>{{EmbedLiveSample("without-ruby", 600, 60)}}</p> +<p>{{EmbedLiveSample("Sans_prise_en_charge_de_ruby", 600, 60)}}</p> <h2 id="Résumé_technique">Résumé technique</h2> diff --git a/files/fr/web/html/element/rt/index.html b/files/fr/web/html/element/rt/index.html index a5db6f5422..5cc3fcc684 100644 --- a/files/fr/web/html/element/rt/index.html +++ b/files/fr/web/html/element/rt/index.html @@ -15,16 +15,15 @@ translation_of: Web/HTML/Element/rt <div>{{EmbedInteractiveExample("pages/tabbed/rt.html", "tabbed-shorter")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> <h2 id="Exemples">Exemples</h2> -<div id="with-ruby"> -<h3 id="HTML">HTML</h3> +<h3 id="Avec_prise_en_charge_de_ruby">Avec prise en charge de ruby</h3> + +<h4 id="HTML">HTML</h4> <pre class="brush: html"><ruby> 漢 <rt>Kan</rt> @@ -32,31 +31,27 @@ translation_of: Web/HTML/Element/rt </ruby> </pre> -<div class="hidden"> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { font-size: 22px; } </pre> -</div> -<h3 id="Résultat">Résultat</h3> +<h4 id="Résultat">Résultat</h4> -<p>{{EmbedLiveSample("with-ruby","100%","130")}}</p> +<p>{{EmbedLiveSample("Avec_prise_en_charge_de_ruby","100%","130")}}</p> + +<h3 id="Sans_prise_en_charge_de_ruby">Sans prise en charge de ruby</h3> <p>Pour un navigateur sans prise en charge de Ruby, on aurait le résultat suivant :</p> -<div id="without-ruby"> -<div class="hidden"> -<pre class="brush: html">漢 Kan 字 ji</pre> +<pre class="brush: html hidden">漢 Kan 字 ji</pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { font-size: 22px; } </pre> -</div> -</div> -<p>{{EmbedLiveSample("without-ruby", 600, 60)}}</p> +<p>{{EmbedLiveSample("Sans_prise_en_charge_de_ruby", 600, 60)}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/html/element/rtc/index.html b/files/fr/web/html/element/rtc/index.html index b7d6cce3ac..c1b53d7ffa 100644 --- a/files/fr/web/html/element/rtc/index.html +++ b/files/fr/web/html/element/rtc/index.html @@ -15,10 +15,6 @@ translation_of: Web/HTML/Element/rtc <div>{{EmbedInteractiveExample("pages/tabbed/rtc.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - - <h2 id="Attributs">Attributs</h2> <p>Cet élément peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> @@ -35,13 +31,11 @@ translation_of: Web/HTML/Element/rtc </ruby> </pre> -<div class="hidden"> -<pre class="brush: css">.info { +<pre class="brush: css hidden">.info { padding-top: 10px; font-size: 36px; } </pre> -</div> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/html/element/ruby/index.html b/files/fr/web/html/element/ruby/index.html index 4526f838cc..89542e8bc2 100644 --- a/files/fr/web/html/element/ruby/index.html +++ b/files/fr/web/html/element/ruby/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/ruby <div>{{EmbedInteractiveExample("pages/tabbed/ruby.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut uniquement les <a href="/fr/docs/Web/HTML/Global_attributes">attributs globaux</a>.</p> diff --git a/files/fr/web/html/element/s/index.html b/files/fr/web/html/element/s/index.html index 33f93d323a..01b03545fe 100644 --- a/files/fr/web/html/element/s/index.html +++ b/files/fr/web/html/element/s/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/s <div>{{EmbedInteractiveExample("pages/tabbed/s.html", "tabbed-shorter")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> diff --git a/files/fr/web/html/element/samp/index.html b/files/fr/web/html/element/samp/index.html index bf23e8667f..f6b73cc9e6 100644 --- a/files/fr/web/html/element/samp/index.html +++ b/files/fr/web/html/element/samp/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/samp <div>{{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> diff --git a/files/fr/web/html/element/script/index.html b/files/fr/web/html/element/script/index.html index 7c2e297073..30e0122fa1 100644 --- a/files/fr/web/html/element/script/index.html +++ b/files/fr/web/html/element/script/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Element/script <p>L'élément HTML <strong><code><script></code></strong> est utilisé pour intégrer ou faire référence à un script exécutable. Cela fait généralement référence à du code JavaScript mais ce peut également être un autre type de script (par exemple <a href="/fr/docs/Apprendre/WebGL">WebGL</a>).</p> -<p>Les scripts sans attribut <code>async</code> ou <code>defer</code> sont chargés et exécutés immédiatement avant que le navigateur continue l'analyse de la page.</p> +<p>Les scripts sans attribut <code>async</code> ou <code>defer</code> sont chargés et exécutés immédiatement avant que le navigateur continue l'analyse de la page.</p> <h2 id="Attributs">Attributs</h2> @@ -20,24 +20,23 @@ translation_of: Web/HTML/Element/script <dl> <dt>{{htmlattrdef("async")}}</dt> - <dd>Cet attribut booléen indique si le navigateur doit, dans la mesure du possible, exécuter les scripts de manière asynchrone. <strong><em>Cet attribut ne doit pas être utilisé si l'attribut <code>src</code> est absent (c'est-à-dire pour les scripts « inline » déclarés dans les éléments), dans ce cas il n'aurait aucun effet.</em></strong></dd> - <dd>Par défaut, les navigateurs prennent l'hypothèse la plus pessimiste et chargent les scripts de façon synchrone (autrement dit, le comportement par défaut est <code>async="false"</code>) lors de l'analyse du document HTML.</dd> - <dd>Les scripts insérés dynamiquement (via {{domxref("document.createElement()")}}) sont exécutés de façon asynchrone par défaut. Pour activer le mode d'exécution synchrone, il faudra explicitement indiquer <code>async="false"</code>.<br> - <br> - Se référer au tableau de compatibilité ci-après pour les informations concernant la prise en charge par les navigateurs. Voir aussi la page sur <a href="/fr/docs/Games/Techniques/Async_scripts">les scripts asynchrones avec asm.js</a>.</dd> + <dd><p>Cet attribut booléen indique si le navigateur doit, dans la mesure du possible, exécuter les scripts de manière asynchrone. <strong><em>Cet attribut ne doit pas être utilisé si l'attribut <code>src</code> est absent (c'est-à-dire pour les scripts « inline » déclarés dans les éléments), dans ce cas il n'aurait aucun effet.</em></strong></p> + <p>Par défaut, les navigateurs prennent l'hypothèse la plus pessimiste et chargent les scripts de façon synchrone (autrement dit, le comportement par défaut est <code>async="false"</code>) lors de l'analyse du document HTML.</p> + <p>Les scripts insérés dynamiquement (via {{domxref("document.createElement()")}}) sont exécutés de façon asynchrone par défaut. Pour activer le mode d'exécution synchrone, il faudra explicitement indiquer <code>async="false"</code>.</p> + <p>Se référer au tableau de compatibilité ci-après pour les informations concernant la prise en charge par les navigateurs. Voir aussi la page sur <a href="/fr/docs/Games/Techniques/Async_scripts">les scripts asynchrones avec asm.js</a>.</p></dd> <dt>{{htmlattrdef("crossorigin")}}</dt> <dd>Les balises de <code>script</code> classiques enverront un minimum d'informations à {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} pour les scripts qui ne respectent pas les contrôles standard du <a href="/fr/docs/HTTP/Access_control_CORS">CORS</a>. Afin de disposer de plus de renseignements sur les erreurs pour les sites utilisant des domaines séparés pour des documents statiques, on pourra utiliser cet attribut. Voir <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">la page de réglages des attributs CORS</a> pour plus d'explications quant aux valeurs valides.</dd> <dt>{{htmlattrdef("defer")}}</dt> - <dd>Cet attribut booléen permet d'indiquer au navigateur que le script doit être exécuté après l'analyse du document et avant l'évènement {{event("DOMContentLoaded")}}. <strong><em>Cet attribut ne doit pas être utilisé si l'attribut <code>src</code> est absent (c'est-à-dire pour les scripts contenus déclarés dans les éléments), dans ce cas il n'aurait aucun effet.</em></strong> Pour obtenir un effet similaire avec les scripts insérés de façon dynamique, on utilisera explicitement <code>async=false</code>. Les scripts qui possèdent un attribut <code>defer</code> seront exécutés dans l'ordre dans lequel ils apparaissent dans le document.</dd> - <dd>Les scripts qui utilisent l'attribut <code>defer</code> empêche le déclenchement de l'évènement <code>DOMContentLoaded</code> tant que le script n'a pas été chargé et que son évaluation n'est pas terminée.</dd> + <dd><p>Cet attribut booléen permet d'indiquer au navigateur que le script doit être exécuté après l'analyse du document et avant l'évènement {{event("DOMContentLoaded")}}. <strong><em>Cet attribut ne doit pas être utilisé si l'attribut <code>src</code> est absent (c'est-à-dire pour les scripts contenus déclarés dans les éléments), dans ce cas il n'aurait aucun effet.</em></strong> Pour obtenir un effet similaire avec les scripts insérés de façon dynamique, on utilisera explicitement <code>async=false</code>. Les scripts qui possèdent un attribut <code>defer</code> seront exécutés dans l'ordre dans lequel ils apparaissent dans le document.</p> + <p>Les scripts qui utilisent l'attribut <code>defer</code> empêche le déclenchement de l'évènement <code>DOMContentLoaded</code> tant que le script n'a pas été chargé et que son évaluation n'est pas terminée.</p></dd> <dt>{{htmlattrdef("integrity")}}</dt> <dd>Cet attribut contient des métadonnées que l'agent utilisateur peut vérifier afin de contrôler qu'une ressource téléchargée n'a pas été modifiée de façon frauduleuse. Pour plus d'informations, consulter <a href="/fr/docs/Web/Security/Subresource_Integrity">la page relative à l'intégrité des sous-ressources</a>.</dd> <dt>{{htmlattrdef("nomodule")}}</dt> <dd>Cet attribut booléen indique que le script ne doit pas être exécuté dans le navigateur si celui prend en charge <a href="https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules">les modules ES6</a>. En pratique, de tels scripts seront utilisés pour couvrir les cas où le navigateur ne prend pas en charge les modules JavaScript.</dd> <dt>{{htmlattrdef("nonce")}}</dt> <dd>Un <em>nonce</em> cryptographique utilisé pour inscrire les scripts en ligne sur une liste blanche pour la règle <code>script-src</code> de la CSP (<em>Content Security Policy</em>). Le serveur doit générer un nonce unique chaque fois qu'il transmet une règle de sécurité. Ce nonce ne doit pas pouvoir être deviné car sinon, il devient trivial d'outrepasser la règle de sécurité.</dd> - <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> - <dd>Une chaîne de caractères qui indique le référent (<em>referrer</em>) à utiliser lors de la récupération du script : + <dt>{{htmlattrdef("referrerpolicy")}}</dt> + <dd><p>Une chaîne de caractères qui indique le référent (<em>referrer</em>) à utiliser lors de la récupération du script :</p> <ul> <li><code>no-referrer</code> signifie que l'en-tête {{HTTPHeader("Referer")}} ne sera pas envoyé.</li> <li><code>no-referrer-when-downgrade</code> signifie qu'aucune en-tête <code>Referrer</code> ne sera envoyé lorsqu'on navigue vers une origine qui n'utilise pas TLS (HTTPS). C'est le comportement par défaut de l'agent utilisateur.</li> @@ -161,17 +160,17 @@ translation_of: Web/HTML/Element/script <tr> <td>{{SpecName("HTML5.1", "semantics-scripting.html#the-script-element", "<script>")}}</td> <td>{{Spec2("HTML5.1")}}</td> - <td> </td> + <td> </td> </tr> <tr> <td>{{SpecName("HTML5 W3C", "scripting-1.html#script", "<script>")}}</td> <td>{{Spec2("HTML5 W3C")}}</td> - <td> </td> + <td> </td> </tr> <tr> <td>{{SpecName("HTML4.01", "interact/scripts.html#h-18.2.1", "<script>")}}</td> <td>{{Spec2("HTML4.01")}}</td> - <td> </td> + <td> </td> </tr> <tr> <td>{{SpecName("Subresource Integrity", "#htmlscriptelement", "<script>")}}</td> diff --git a/files/fr/web/html/element/section/index.html b/files/fr/web/html/element/section/index.html index 25f2318220..b532475bba 100644 --- a/files/fr/web/html/element/section/index.html +++ b/files/fr/web/html/element/section/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/section <div>{{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Ainsi, un menu de navigation devrait être délimité par un élément {{htmlelement("nav")}} mais une liste de résultat de recherche, qui ne dispose pas d'élément spécifique pour être représentée, pourrait être englobée dans un élément <code><section></code>.</p> <div class="note"> diff --git a/files/fr/web/html/element/select/index.html b/files/fr/web/html/element/select/index.html index 0995c6498f..e941bc306d 100644 --- a/files/fr/web/html/element/select/index.html +++ b/files/fr/web/html/element/select/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/select <div>{{EmbedInteractiveExample("pages/tabbed/select.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'exemple ci-avant illustre une utilisation simple de <code><select></code> où l'attribut <code>id</code> peut être associé à un élément {{htmlelement("label")}} qui permettra d'avoir un libellé accessible pour ce champ et où un attribut <code>name</code> représente le nom de la donnée qui sera envoyée au serveur. Chaque option est définie grâce à un élément {{htmlelement("option")}} qui se situe à l'intérieur de l'élément <code><select></code>.</p> <p>Chaque élément <code><option></code> doit avoir un attribut <code>value</code> qui contient la valeur qui sera envoyée au serveur lorsque l'option est sélectionnée. Si aucune valeur n'est fournie, la valeur par défaut sera le texte contenu dans l'élément. Il est possible d'inclure un attribut <code>selected</code> sur un élément <code><option></code> afin que cette option soit sélectionnée par défaut au chargement de la page.</p> @@ -102,9 +100,9 @@ translation_of: Web/HTML/Element/select </label> </pre> -<p id="Result_2">Cet exemple n'est pas disponible de façon interactive (le moteur de MDN supprime l'attribut <code>multiple</code> lors de l'affichage de la page) mais vous pouvez voir <a href="https://mdn.github.io/learning-area/html/forms/select-example/select-multiple.html">l'exemple sur GitHub</a>.</p> +<p>Cet exemple n'est pas disponible de façon interactive (le moteur de MDN supprime l'attribut <code>multiple</code> lors de l'affichage de la page) mais vous pouvez voir <a href="https://mdn.github.io/learning-area/html/forms/select-example/select-multiple.html">l'exemple sur GitHub</a>.</p> -<p id="Notes_2">Vous pourrez voir que :</p> +<p>Vous pourrez voir que :</p> <ul> <li>Plusieurs options peuvent être sélectionnées grâce à l'attribut <code>multiple</code>.</li> @@ -114,7 +112,7 @@ translation_of: Web/HTML/Element/select </ul> <div class="note"> -<p><strong>Note</strong> : Sur un ordinateur de bureau, on pourra maintenir les touches <kbd>Ctrl</kbd>, <kbd>Command</kbd>, ou <kbd>Shift</kbd> en cliquant afin de sélectionner/déselectionner plusieurs options.</p> +<p><strong>Note :</strong> Sur un ordinateur de bureau, on pourra maintenir les touches <kbd>Ctrl</kbd>, <kbd>Command</kbd>, ou <kbd>Shift</kbd> en cliquant afin de sélectionner/déselectionner plusieurs options.</p> </div> <h3 id="Sélectionner_plusieurs_options">Sélectionner plusieurs options</h3> @@ -123,8 +121,8 @@ translation_of: Web/HTML/Element/select <p>Pour les personnes qui utilisent la souris, il est possible de maintenir les touches <kbd>Ctrl</kbd>, <kbd>Command</kbd> ou <kbd>Shift</kbd> (selon le système d'exploitation utilisé) et de cliquer sur les différentes options afin de les sélectionner/déselectionner.</p> -<div class="blockIndicator warning"> -<p><strong>Attention !</strong> Les moyens décrits ci-après pour sélectionner des options qui ne sont pas contigües semblent ne fonctionner qu'avec Firefox. On notera également que sur macOS, les raccourcis <kbd>Ctrl</kbd> + <kbd>Bas</kbd> et <kbd>Ctrl</kbd> + <kbd>Haut</kbd> sont utilisées par défaut par le système d'exploitation et qu'il faut les désactiver si on souhaite qu'ils fonctionnent dans le navigateurs.</p> +<div class="warning"> +<p><strong>Attention :</strong> Les moyens décrits ci-après pour sélectionner des options qui ne sont pas contigües semblent ne fonctionner qu'avec Firefox. On notera également que sur macOS, les raccourcis <kbd>Ctrl</kbd> + <kbd>Bas</kbd> et <kbd>Ctrl</kbd> + <kbd>Haut</kbd> sont utilisées par défaut par le système d'exploitation et qu'il faut les désactiver si on souhaite qu'ils fonctionnent dans le navigateurs.</p> </div> <p>Les utilisateurs du clavier pourront sélectionner des options contigües de la façon suivante :</p> diff --git a/files/fr/web/html/element/shadow/index.html b/files/fr/web/html/element/shadow/index.html index ceeba8d6d5..3d493de32a 100644 --- a/files/fr/web/html/element/shadow/index.html +++ b/files/fr/web/html/element/shadow/index.html @@ -62,7 +62,7 @@ translation_of: Web/HTML/Element/shadow <h3 id="Résultat_statique">Résultat statique</h3> -<p><img alt="shadow example" src="https://mdn.mozillademos.org/files/10083/shadow-example.png" style="height: 343px; width: 641px;"></p> +<p><img alt="Exemple pour shadow" src="shadow-example.png"></p> <h2 id="Résumé_technique">Résumé technique</h2> diff --git a/files/fr/web/html/element/slot/index.html b/files/fr/web/html/element/slot/index.html index bfa3c09685..ce9967dc3e 100644 --- a/files/fr/web/html/element/slot/index.html +++ b/files/fr/web/html/element/slot/index.html @@ -20,13 +20,13 @@ translation_of: Web/HTML/Element/slot <dl> <dt>{{htmlattrdef("name")}}</dt> - <dd>Le nom de l'emplacement créé.</dd> - <dd>Un <strong><dfn>« slot » nommé</dfn></strong> est un élément <code><slot></code> avec un attribut <code>name</code>.</dd> + <dd><p>Le nom de l'emplacement créé.</p> + <p>Un <strong><dfn>« slot » nommé</dfn></strong> est un élément <code><slot></code> avec un attribut <code>name</code>.</p></dd> </dl> <h2 id="Exemples">Exemples</h2> -<pre class="brush: html notranslate"><template id="element-details-template"> +<pre class="brush: html"><template id="element-details-template"> <style> details {font-family: "Open Sans Light", Helvetica, Arial, sans-serif } .name {font-weight: bold; color: #217ac0; font-size: 120% } diff --git a/files/fr/web/html/element/small/index.html b/files/fr/web/html/element/small/index.html index eeaaf73169..cf38e99a93 100644 --- a/files/fr/web/html/element/small/index.html +++ b/files/fr/web/html/element/small/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/small <div>{{EmbedInteractiveExample("pages/tabbed/small.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> diff --git a/files/fr/web/html/element/source/index.html b/files/fr/web/html/element/source/index.html index 14152a49d7..31882e6eed 100644 --- a/files/fr/web/html/element/source/index.html +++ b/files/fr/web/html/element/source/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/source <div>{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> diff --git a/files/fr/web/html/element/span/index.html b/files/fr/web/html/element/span/index.html index 0840ed8d1b..da8b897455 100644 --- a/files/fr/web/html/element/span/index.html +++ b/files/fr/web/html/element/span/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/span <div>{{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-shorter")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> @@ -24,7 +22,7 @@ translation_of: Web/HTML/Element/span <h3 id="HTML">HTML</h3> -<pre class="brush:html;gutter:false"><p><span>Un peu de texte</span></p></pre> +<pre class="brush:html"><p><span>Un peu de texte</span></p></pre> <h3 id="CSS">CSS</h3> diff --git a/files/fr/web/html/element/strike/index.html b/files/fr/web/html/element/strike/index.html index 6d52cef6f3..60b89cf846 100644 --- a/files/fr/web/html/element/strike/index.html +++ b/files/fr/web/html/element/strike/index.html @@ -12,7 +12,9 @@ translation_of: Web/HTML/Element/strike <p>L'élément HTML <strong><code><strike></code></strong> permet de représenter du texte barré ou avec une ligne le traversant.</p> -<div class="note"><strong>Note d'utilisation :</strong> Comme tous les éléments se limitant à la présentation, {{HTMLElement("strike")}} a été déprécié en HTML 4 et XHTML 1, et rendu obsolète dans HTML5. Si on souhaite représente du contenu <em>supprimé</em>, on utilisera l'élément {{HTMLElement("del")}} ; dans les autres cas, on utilisera un élément {{HTMLElement("s")}}.</div> +<div class="note"> + <p><strong>Note :</strong> Comme tous les éléments se limitant à la présentation, {{HTMLElement("strike")}} a été déprécié en HTML 4 et XHTML 1, et rendu obsolète dans HTML5. Si on souhaite représente du contenu <em>supprimé</em>, on utilisera l'élément {{HTMLElement("del")}} ; dans les autres cas, on utilisera un élément {{HTMLElement("s")}}.</p> +</div> <h2 id="Attributs">Attributs</h2> @@ -23,7 +25,7 @@ translation_of: Web/HTML/Element/strike <p>Cet élément implémente l'interface {{domxref("HTMLElement")}}.</p> <div class="note"> -<p><strong>Note d'implémentation : </strong>Jusqu'à Gecko 1.9.2 inclus, Firefox implémente l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</p> +<p><strong>Note :</strong> Jusqu'à Gecko 1.9.2 inclus, Firefox implémente l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</p> </div> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/html/element/strong/index.html b/files/fr/web/html/element/strong/index.html index 8a2f9b3436..7417f8927b 100644 --- a/files/fr/web/html/element/strong/index.html +++ b/files/fr/web/html/element/strong/index.html @@ -14,10 +14,6 @@ translation_of: Web/HTML/Element/strong <div>{{EmbedInteractiveExample("pages/tabbed/strong.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - - - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> diff --git a/files/fr/web/html/element/style/index.html b/files/fr/web/html/element/style/index.html index 19f88c0027..711ca24e97 100644 --- a/files/fr/web/html/element/style/index.html +++ b/files/fr/web/html/element/style/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/style <div>{{EmbedInteractiveExample("pages/tabbed/style.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'élément <code><style></code> peut être inclus dans l'élément {{htmlelement("head")}} ou dans l'élément {{htmlelement("body")}} du document et les styles seront appliqués. Toutefois, il est recommandé de placer les styles dans l'élément<code> <head></code> afin de clairement séparer la présentation du contenu autant que possible. La méthode idéale en ce sens consiste à utiliser des feuilles de style dans des fichiers externes et de les appliquer au document grâce à des éléments {{htmlelement("link")}}.</p> <p>Si plusieurs éléments <code><style></code> et <code><link></code> sont appliqués au document, ils seront appliqués dans l'ordre dans lequel ils sont inclus dans le document. Aussi, vérifiez l'ordre afin d'éviter tout problème de cascade.</p> diff --git a/files/fr/web/html/element/sub/index.html b/files/fr/web/html/element/sub/index.html index 1b1d229624..0ee9e2ed6d 100644 --- a/files/fr/web/html/element/sub/index.html +++ b/files/fr/web/html/element/sub/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/sub <div>{{EmbedInteractiveExample("pages/tabbed/sub.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> diff --git a/files/fr/web/html/element/summary/index.html b/files/fr/web/html/element/summary/index.html index 44a31a1c43..3097055b73 100644 --- a/files/fr/web/html/element/summary/index.html +++ b/files/fr/web/html/element/summary/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/summary <div>{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> diff --git a/files/fr/web/html/element/sup/index.html b/files/fr/web/html/element/sup/index.html index bd0d2cee18..d91282a561 100644 --- a/files/fr/web/html/element/sup/index.html +++ b/files/fr/web/html/element/sup/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/sup <div>{{EmbedInteractiveExample("pages/tabbed/sup.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> diff --git a/files/fr/web/html/element/table/index.html b/files/fr/web/html/element/table/index.html index 472aac0dbf..a6fd16e72c 100644 --- a/files/fr/web/html/element/table/index.html +++ b/files/fr/web/html/element/table/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/table <div>{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>. Les attributs listés ci-après sont désormais tous dépréciés.</p> @@ -33,7 +31,7 @@ translation_of: Web/HTML/Element/table </li> </ul> - <div class="note"><strong>Note : </strong> + <div class="note"><p><strong>Note :</strong></p> <ul> <li><strong>Cet attribut ne doit pas être utilisé</strong> car il a été déprécié : l'élément {{HTMLElement("table")}} devrait être stylisé en utilisant <a href="/fr/docs/CSS">CSS</a>. Pour obtenir un effet similaire à celui réalisé par l'attribut align, les propriétés <a href="/fr/docs/CSS">CSS</a> {{cssxref("text-align")}} et {{cssxref("vertical-align")}} devraient être utilisées.</li> @@ -41,93 +39,30 @@ translation_of: Web/HTML/Element/table </ul> </div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> - <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. - <table style="width: 80%;"> - <tbody> - <tr> - <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>black</code> = "#000000"</td> - <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>green</code> = "#008000"</td> - </tr> - <tr> - <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>silver</code> = "#C0C0C0"</td> - <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>lime</code> = "#00FF00"</td> - </tr> - <tr> - <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>gray</code> = "#808080"</td> - <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>olive</code> = "#808000"</td> - </tr> - <tr> - <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>white</code> = "#FFFFFF"</td> - <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>yellow</code> = "#FFFF00"</td> - </tr> - <tr> - <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>maroon</code> = "#800000"</td> - <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>navy</code> = "#000080"</td> - </tr> - <tr> - <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>red</code> = "#FF0000"</td> - <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>blue</code> = "#0000FF"</td> - </tr> - <tr> - <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>purple</code> = "#800080"</td> - <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>teal</code> = "#008080"</td> - </tr> - <tr> - <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>fuchsia</code> = "#FF00FF"</td> - <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>aqua</code> = "#00FFFF"</td> - </tr> - </tbody> - </table> - - <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci a été déprécié. La mise en forme d'un tableau doit se faire en utilisant CSS. Il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} pour cet effet.</div> + <dd><p>Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un des <a href="/fr/docs/Web/CSS/color_value#color_keywords">mots-clés préfédinis pour les couleurs</a> peut également être utilisé.</p> + <div class="note"> + <p><strong>Note :</strong> Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci a été déprécié. La mise en forme d'un tableau doit se faire en utilisant CSS. Il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} pour cet effet.</p> + </div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt> <dd>Cet attribut entier définit, en pixels, la taille de la bordure entourant le tableau. S'il vaut 0, cela implique que l'attribut {{htmlattrxref("frame", "table")}} est vide. - <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Les propriétés CSS {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} et {{cssxref("border-style")}} devraient être utilisées à la place.</div> + <div class="note"><p><strong>Note :</strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Les propriétés CSS {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} et {{cssxref("border-style")}} devraient être utilisées à la place.</p></div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt> <dd>Cet attribut définit la taille de l'espace entre le contenu d'une cellule et sa bordure, qu'lle soit affichée ou non. Si cet attribut est exprimé en pixels, le décalage sera appliqué sur les quatre côtés. S'il est exprimé en pourcents, le contenu sera centré verticalement et la somme des espaces en haut et en bas représentera le pourcentage, il en va de même pour l'espace horizontal (droite et gauche). - <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, la propriété {{cssxref("border-collapse")}} avec la valeur collapse doit être utilisée sur l'élément {{HTMLElement("table")}} et la propriété {{cssxref("padding")}} sur l'élément {{HTMLElement("td")}}.</div> + <div class="note"><p><strong>Note :</strong> Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, la propriété {{cssxref("border-collapse")}} avec la valeur collapse doit être utilisée sur l'élément {{HTMLElement("table")}} et la propriété {{cssxref("padding")}} sur l'élément {{HTMLElement("td")}}.</p></div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt> <dd>Cet attribut définit la taille (en pourcents ou pixels) de l'espace (vertical et horizontal) entre deux cellules, entre la haut du tableau et les cellules de la première ligne, la gauche du tableau et les cellules de la première colonne, puis de la même manière pour le bas et le côté droit du tableau. - <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, la propriété {{cssxref("border-collapse")}} avec la valeur collapse doit être utilisée sur l'élément {{HTMLElement("table")}} et la propriété {{cssxref("margin")}} sur l'élément {{HTMLElement("td")}}.</div> + <div class="note"><p><strong>Note :</strong> Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, la propriété {{cssxref("border-collapse")}} avec la valeur collapse doit être utilisée sur l'élément {{HTMLElement("table")}} et la propriété {{cssxref("margin")}} sur l'élément {{HTMLElement("td")}}.</p></div> </dd> </dl> <dl> <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt> <dd>Cet attribut à valeurs multiples définit les côtés du tableau sur lesquels dessiner une bordure. Il peut prendre les valeurs suivantes : <code>above, hsides, lhs, border, void, below, vsides, rhs, box</code>. - <div class="note"><strong>N</strong><strong>ote d'utilisation : </strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, les propriétés {{cssxref("border-style")}} et {{cssxref("border-width")}} doivent être utilisées.</div> + <div class="note"><p><strong>Note :</strong> Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, les propriétés {{cssxref("border-style")}} et {{cssxref("border-width")}} doivent être utilisées.</p></div> </dd> </dl> @@ -142,7 +77,7 @@ translation_of: Web/HTML/Element/table <li><code>all</code>, tous les traits seront affichés (entre les lignes et entre les colonnes).</li> </ul> - <div class="note"><strong>Note :</strong> + <div class="note"><p><strong>Note :</strong></p> <ul> <li>L'apparence de ces traits dépend du navigateur utilisé et ne peut être modifiée.</li> @@ -155,7 +90,7 @@ translation_of: Web/HTML/Element/table <dl> <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt> <dd>Cet attribut définit un texte alternatif à utiliser afin de décrire le tableau. Un tel texte peut être utilisé par un agent utilisateur qui ne pourrait pas afficher le tableau. Il est généralement utilisé pour les personnes souffrant d'une déficience visuelle, comme par exemple les aveugles qui navigueront sur des pages web en utilisant un écran Braille. Si l'information contenue dans cet attribut serait également utile aux autres utilisateurs, il faudra plutôt utiliser l'élément {{HTMLElement("caption")}}. L'attribut <code><strong>summary</strong></code> n'est pas obligatoire et peut être omis lorsqu'un élément {{HTMLElement("caption")}} remplit ce rôle. - <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. Les façons suivantes peuvent être envisagées pour cette expression : + <div class="note"><p><strong>Note :</strong> Cet attribut ayant été déprécié, il ne doit pas être utilisé. Les façons suivantes peuvent être envisagées pour cette expression :</p> <ul> <li>Grâce à un texte entourant le tableau, cette manière est la plus faible du point de vue de la sémantique</li> <li>Grâce à l'élément {{HTMLElement("caption")}}</li> @@ -171,21 +106,19 @@ translation_of: Web/HTML/Element/table <dl> <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt> <dd>Cet attribut définit la largeur du tableau. Elle peut être exprimée en pixels ou en pourcent (représentant alors la fraction du conteneur que le tableau peut occuper). - <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La propriété CSS {{cssxref("width")}} doit être utilisée à la place.</div> + <div class="note"><p><strong>Note :</strong> Cet attribut ayant été déprécié, il ne doit pas être utilisé. La propriété CSS {{cssxref("width")}} doit être utilisée à la place.</p></div> </dd> </dl> <h2 id="Exemples">Exemples</h2> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div>{{EmbedInteractiveExample("pages/tabbed/table.html")}}</div> <h3 id="Tableau_simple">Tableau simple</h3> <h4 id="HTML">HTML</h4> -<pre class="brush: html" style="font-size: 12px;"><table> +<pre class="brush: html"><table> <tr> <td>Jean</td> <td>Biche</td> @@ -374,10 +307,7 @@ translation_of: Web/HTML/Element/table <tr> <th scope="row"><dfn>Contenu autorisé</dfn></th> <td> - <div class="content-models"> - <div id="table-mdls"> <p>Dans cet ordre :</p> - <ul> <li>Un élément facultatif {{HTMLElement("caption")}}</li> <li>Zéro ou plusieurs éléments {{HTMLElement("colgroup")}}</li> @@ -390,8 +320,6 @@ translation_of: Web/HTML/Element/table </li> <li>un élément {{HTMLElement("tfoot")}} optionnel</li> </ul> - </div> - </div> </td> </tr> <tr> diff --git a/files/fr/web/html/element/tbody/index.html b/files/fr/web/html/element/tbody/index.html index 91c7935b7b..cc5ebc205e 100644 --- a/files/fr/web/html/element/tbody/index.html +++ b/files/fr/web/html/element/tbody/index.html @@ -11,12 +11,10 @@ translation_of: Web/HTML/Element/tbody --- <div>{{HTMLRef}}</div> -<p>L’élément HTML <strong><code><tbody></code></strong> permet de regrouper un ou plusieurs éléments {{HTMLElement("tr")}} afin de former le corps d'un tableau HTML ({{HTMLElement("table")}}).</p> +<p>L'élément HTML <strong><code><tbody></code></strong> permet de regrouper un ou plusieurs éléments {{HTMLElement("tr")}} afin de former le corps d'un tableau HTML ({{HTMLElement("table")}}).</p> <div>{{EmbedInteractiveExample("pages/tabbed/tbody.html","tabbed-taller")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'élément <code><tbody></code>, ainsi que les éléments {{HTMLElement("thead")}} et {{HTMLElement("tfoot")}}, fournit des informations sémantiques qui sont utilisées pour l'affichage à l'écran, l'impression et l'accessibilité.</p> <h2 id="Attributs">Attributs</h2> @@ -27,104 +25,48 @@ translation_of: Web/HTML/Element/tbody <dl> <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt> - <dd>Cet attribut à valeurs définit l’alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont : + <dd><p>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :</p> <ul> - <li><code>left</code> : le contenu de la cellule est alligné à gauche de la cellule ;</li> - <li><code>center</code> : le contenu de la cellule est centré horizontalement ;</li> - <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule ;</li> - <li><code>justify</code> : ajuste la largeur des espaces du contenu texte afin que le contenu de la cellule soit justifié ;</li> - <li><code>char</code> : aligne le contenu texte de la cellule selon un caractère spécial avec un décalage minimum défini par les attributs {{htmlattrxref("char", "tbody")}} et {{htmlattrxref("charoff", "tbody")}} {{unimplemented_inline(2212)}}.</li> + <li><code>left</code> : le contenu de la cellule est alligné à gauche de la cellule ;</li> + <li><code>center</code> : le contenu de la cellule est centré horizontalement ;</li> + <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule ;</li> + <li><code>justify</code> : ajuste la largeur des espaces du contenu texte afin que le contenu de la cellule soit justifié ;</li> + <li><code>char</code> : aligne le contenu texte de la cellule selon un caractère spécial avec un décalage minimum défini par les attributs {{htmlattrxref("char", "tbody")}} et {{htmlattrxref("charoff", "tbody")}} {{unimplemented_inline(2212)}}.</li> </ul> - <p>Si cet attribut n’est pas renseigné, la valeur <code>left</code> est prise par défaut.</p> + <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> est prise par défaut.</p> - <div class="note"><strong>Notes :</strong>cet attribut est devenu obsolète dans le dernier standard. + <div class="note"> + <p><strong>Note :</strong>cet attribut est devenu obsolète dans le dernier standard.</p> <ul> - <li>Pour réaliser le même effet qu’avec les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.</li> - <li>Pour réaliser le même effet qu’avec <code>char</code>, vous pouvez, en CSS3, utiliser la valeur de {{htmlattrxref("char", "tbody")}} comme valeur pour la propriété {{cssxref("text-align")}} {{unimplemented_inline}}.</li> + <li>Pour réaliser le même effet qu'avec les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.</li> + <li>Pour réaliser le même effet qu'avec <code>char</code>, vous pouvez, en CSS3, utiliser la valeur de {{htmlattrxref("char", "tbody")}} comme valeur pour la propriété {{cssxref("text-align")}} {{unimplemented_inline}}.</li> </ul> </div> </dd> <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> - <dd>Cet attribut définit la couleur d’arrière-plan de toutes les cellules. C’est un code hexadécimal à 6 chiffres comme défini par le <a class="external" href="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d’un <code>#</code>. Un de ces seize mots-clés peut également être utilisé. - <table> - <tbody> - <tr> - <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>black</code> = "#000000"</td> - <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>green</code> = "#008000"</td> - </tr> - <tr> - <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>silver</code> = "#C0C0C0"</td> - <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>lime</code> = "#00FF00"</td> - </tr> - <tr> - <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>gray</code> = "#808080"</td> - <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>olive</code> = "#808000"</td> - </tr> - <tr> - <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>white</code> = "#FFFFFF"</td> - <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>yellow</code> = "#FFFF00"</td> - </tr> - <tr> - <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>maroon</code> = "#800000"</td> - <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>navy</code> = "#000080"</td> - </tr> - <tr> - <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>red</code> = "#FF0000"</td> - <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>blue</code> = "#0000FF"</td> - </tr> - <tr> - <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>purple</code> = "#800080"</td> - <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>teal</code> = "#008080"</td> - </tr> - <tr> - <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>fuchsia</code> = "#FF00FF"</td> - <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>aqua</code> = "#00FFFF"</td> - </tr> - </tbody> - </table> - - <div class="note"><strong>Note d’utilisation :</strong> il est fortement conseillé de ne pas utiliser cet attribut car il n’est pas standard et n’a été implémenté que sous certaines versions d’Internet Explorer. L’élément {{HTMLElement("tbody")}} doit être mis en forme grâce aux propriétés <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui produit par l’attribut <strong><code>bgcolor</code></strong>, il est possible d’utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.</div> + <dd><p>Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code hexadécimal à 6 chiffres comme défini par le <a class="external" href="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un <code>#</code>. Un des <a href="/fr/docs/Web/CSS/color_value#color_keywords">mots-clés préfédinis pour les couleurs</a> peut également être utilisé.</p> + <div class="note"><p><strong>Note :</strong> il est fortement conseillé de ne pas utiliser cet attribut car il n'est pas standard et n'a été implémenté que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tbody")}} doit être mis en forme grâce aux propriétés <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui produit par l'attribut <strong><code>bgcolor</code></strong>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.</p></div> </dd> <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt> - <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d’une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l’attribut {{htmlattrxref("align", "tbody")}} ne vaut pas <code>char</code>, l’attribut est ignoré.</dd> - <dd> - <div class="note"><strong>Note d’utilisation :</strong> cet attribut est obsolète et son utilisation est donc fortement déconseillé. De fait, il n’est pas pris en charge par la dernière recommandation. Pour réaliser le même effet qu’avec {{htmlattrxref("char", "tbody")}}, en utilisant CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div> + <dd><p>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "tbody")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</p> + <div class="note"><p><strong>Note :</strong> cet attribut est obsolète et son utilisation est donc fortement déconseillé. De fait, il n'est pas pris en charge par la dernière recommandation. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "tbody")}}, en utilisant CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</p></div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt> - <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l’attribut<strong> char</strong> à appliquer au contenu des cellules. - <div class="note"><strong>Note d’utilisation: </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n’est plus supporté dans le dernier standard.</div> + <dd><p>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules.</p> + <div class="note"><p><strong>Note :</strong> Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</p></div> </dd> <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt> - <dd>Cet attribut définit l’alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont : + <dd><p>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :</p> <ul> - <li><code>baseline</code> qui alignera le texte sur la ligne la plus basse possible en utilisant la <a class="external" href="http://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code> ;</li> - <li><code>bottom</code> qui placera le texte au plus bas de la cellule ;</li> - <li><code>middle</code> qui centrera verticalement le texte dans la cellule ;</li> + <li><code>baseline</code> qui alignera le texte sur la ligne la plus basse possible en utilisant la <a class="external" href="http://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code> ;</li> + <li><code>bottom</code> qui placera le texte au plus bas de la cellule ;</li> + <li><code>middle</code> qui centrera verticalement le texte dans la cellule ;</li> <li><code>top</code> qui placera le texte au plus haut de la cellule.</li> </ul> - <div class="note"><strong>Note d’utilisation :</strong> cet attribut étant maintenant obsolète (et n’étant plus pris en charge), il est fortement déconseillé de l’utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</div> + <div class="note"><p><strong>Note :</strong> cet attribut étant maintenant obsolète (et n'étant plus pris en charge), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</p></div> </dd> </dl> @@ -222,12 +164,12 @@ translation_of: Web/HTML/Element/tbody <tr> <td>{{SpecName('HTML WHATWG','tables.html#the-tbody-element','tbody element')}}</td> <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> + <td> </td> </tr> <tr> <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tbody-element','tbody element')}}</td> <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> + <td> </td> </tr> </tbody> </table> diff --git a/files/fr/web/html/element/td/index.html b/files/fr/web/html/element/td/index.html index 30ba4fcd53..35df89f043 100644 --- a/files/fr/web/html/element/td/index.html +++ b/files/fr/web/html/element/td/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/td <div>{{EmbedInteractiveExample("pages/tabbed/td.html","tabbed-taller")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> @@ -24,7 +22,7 @@ translation_of: Web/HTML/Element/td <dl> <dt>{{htmlattrdef("colspan")}}</dt> <dd>Cet attribut contient un entier positif indiquant le nombre de colonnes sur lesquelles s'étend la cellule. La valeur par défaut est 1, si la valeur est 0, la cellule s'étend jusqu'à la fin du {{HTMLElement("colgroup")}} auquel appartient la cellule, même si celui-ci est défini implicitement. Des valeurs supérieures à 1000 peuvent être considérées comme incorrectes et seront interprétées comme valant la valeur par défaut (1). - <div class="note"><strong>Note : </strong>En {{HTMLVersionInline(5)}} cet attribut ne peut valoir qu'un nombre strictement positif car <a href="https://dev.w3.org/html5/spec/single-page.html#attr-tdth-colspan">il ne doit pas être utilisé pour faire chevaucher des cellules</a>. Par ailleurs, Firefox est le seul navigateur supportant la valeur 0 définie par la spécification {{HTMLVersionInline(4.01)}}.</div> + <div class="note"><p><strong>Note :</strong> En {{HTMLVersionInline(5)}} cet attribut ne peut valoir qu'un nombre strictement positif car <a href="https://dev.w3.org/html5/spec/single-page.html#attr-tdth-colspan">il ne doit pas être utilisé pour faire chevaucher des cellules</a>. Par ailleurs, Firefox est le seul navigateur supportant la valeur 0 définie par la spécification {{HTMLVersionInline(4.01)}}.</p></div> </dd> <dt>{{htmlattrdef("headers")}}</dt> <dd>Cet attribut est une liste de chaînes de caractères séparées par des espace. Chacune correspond à l'attribut <strong>id</strong> de l'élément {{HTMLElement("th")}} qui s'applique à la cellule courante.</dd> @@ -36,11 +34,11 @@ translation_of: Web/HTML/Element/td <dl> <dt>{{htmlattrdef("abbr")}} {{obsolete_inline("html5")}}</dt> - <dd>Cet attribut contient une description courte et abrégée du contenu de la cellule. Certains outils utilisateurs, comme la synthèse vocale, peuvent décrire cette information avant le contenu lui-même. - <div class="note"><strong>Note : </strong>Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. Il faut dans ces cas introduire la description au sein de la cellule comme un élément {{HTMLElement("abbr")}} indépendant ou utiliser l'attribut <code><strong>title</strong></code> de la cellule pour représenter le contenu et la cellule elle-même pour représenter le contenu abrégé.</div> + <dd><p>Cet attribut contient une description courte et abrégée du contenu de la cellule. Certains outils utilisateurs, comme la synthèse vocale, peuvent décrire cette information avant le contenu lui-même.</p> + <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. Il faut dans ces cas introduire la description au sein de la cellule comme un élément {{HTMLElement("abbr")}} indépendant ou utiliser l'attribut <code><strong>title</strong></code> de la cellule pour représenter le contenu et la cellule elle-même pour représenter le contenu abrégé.</p></div> </dd> <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> - <dd>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont : + <dd><p>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :</p> <ul> <li><code>left </code>: le contenu de la cellule est alligné à gauche de la cellule</li> <li><code>center</code> : le contenu de la cellule est centré horizontalement</li> @@ -51,7 +49,7 @@ translation_of: Web/HTML/Element/td <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> est prise par défaut.</p> - <div class="note"><strong>Notes : </strong>Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé. + <div class="note"><p><strong>Note :</strong> Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé.</p> <ul> <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, il faut utiliser la propriété CSS {{cssxref("text-align")}} sur l'élément</li> @@ -59,16 +57,12 @@ translation_of: Web/HTML/Element/td </ul> </div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("axis")}} {{obsolete_inline("html5")}}</dt> - <dd>Cet attribut contient une liste de chaîne de caractères (séparées par des espaces). Chaque chaîne de caractère est l'identifiant d'un groupe de cellule auquel cet en-tête s'applique.</dd> - <dd> - <div class="note"><strong>Note : </strong>Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. L'attribut {{htmlattrxref("scope", "td")}} doit être utilisé pour le remplacer.</div> + <dd><p>Cet attribut contient une liste de chaîne de caractères (séparées par des espaces). Chaque chaîne de caractère est l'identifiant d'un groupe de cellule auquel cet en-tête s'applique.</p> + <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. L'attribut {{htmlattrxref("scope", "td")}} doit être utilisé pour le remplacer.</p></div> </dd> <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> - <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. + <dd><p>Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé.</p> <table> <tbody> <tr> @@ -124,22 +118,18 @@ translation_of: Web/HTML/Element/td </tbody> </table> - <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("td")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.</div> + <div class="note"><p><strong>Note :</strong> Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("td")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.</p></div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> - <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "td")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd> - <dd> - <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "td")}}, il faut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div> + <dd><p>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "td")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</p> + <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "td")}}, il faut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</p></div> </dd> <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> - <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules. - <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div> + <dd><p>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules.</p> + <div class="note"><p><strong>Note :</strong> Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</p></div> </dd> <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> - <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont : + <dd><p>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :</p> <ul> <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li> <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li> @@ -147,11 +137,11 @@ translation_of: Web/HTML/Element/td <li><code>top</code> qui placera le texte au plus haut de la cellule.</li> </ul> - <div class="note"><strong>Note : </strong>Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</div> + <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</p></div> </dd> <dt>{{htmlattrdef("width")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> - <dd>Cet attribut est utilisé afin de définir la largeur recommandée pour une cellule. Les propriétés <code><a href="/fr/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a></code> et <code><a href="/fr/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a></code> peuvent être utilisées pour ajouter un espace supplémentaire et la largeur de l'élément {{HTMLElement("col")}} peut avoir un effet. En général, si la largeur d'une colonne est trop étroite pour afficher une cellule correctement, elle sera élargie lors de l'affichage. - <div class="note"><strong>Note : </strong>Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("width")}} doit être utilisée à la place.</div> + <dd><p>Cet attribut est utilisé afin de définir la largeur recommandée pour une cellule. Les propriétés <code><a href="/fr/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a></code> et <code><a href="/fr/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a></code> peuvent être utilisées pour ajouter un espace supplémentaire et la largeur de l'élément {{HTMLElement("col")}} peut avoir un effet. En général, si la largeur d'une colonne est trop étroite pour afficher une cellule correctement, elle sera élargie lors de l'affichage.</p> + <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("width")}} doit être utilisée à la place.</p></div> </dd> </dl> diff --git a/files/fr/web/html/element/template/index.html b/files/fr/web/html/element/template/index.html index c9fb9daf78..de36c2e5ef 100644 --- a/files/fr/web/html/element/template/index.html +++ b/files/fr/web/html/element/template/index.html @@ -84,14 +84,12 @@ if ("content" in document.createElement("template")) { <p>Le résultat correspond au tableau HTML original avec deux lignes supplémentaires qui ont été ajoutées grâce au code JavaScript :</p> -<div class="hidden"> -<pre class="brush: css">table { +<pre class="brush: css hidden">table { background: #000; } table td { background: #fff; }</pre> -</div> <p>{{EmbedLiveSample("Exemples", 500, 120)}}</p> diff --git a/files/fr/web/html/element/textarea/index.html b/files/fr/web/html/element/textarea/index.html index aefe4f44f3..21de08f3c6 100644 --- a/files/fr/web/html/element/textarea/index.html +++ b/files/fr/web/html/element/textarea/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/textarea <div>{{EmbedInteractiveExample("pages/tabbed/textarea.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Dans les exemples ci-avant, on peut voir plusieurs fonctionnalités de <code><textarea></code>. Le premier exemple illustre l'utilisation la plus simple avec seul un attribut <code>id</code> qui permet d'associer l'élément <code><textarea></code> avec un élément {{HTMLElement("label")}} à des fins d'accessibilité ainsi qu'un attribut <code>name</code> qui permet de nommer la donnée qui sera envoyée au serveur lors de l'envoi du formulaire.</p> <p>Le deuxième exemple détaille des fonctionnalités plus complexes :</p> diff --git a/files/fr/web/html/element/tfoot/index.html b/files/fr/web/html/element/tfoot/index.html index 242c70de62..57d1c73ebe 100644 --- a/files/fr/web/html/element/tfoot/index.html +++ b/files/fr/web/html/element/tfoot/index.html @@ -11,12 +11,10 @@ translation_of: Web/HTML/Element/tfoot --- <div>{{HTMLRef}}</div> -<p id="Summary">L'élément HTML <strong><code><tfoot></code></strong> permet de définir un ensemble de lignes qui résument les colonnes d'un tableau.</p> +<p>L'élément HTML <strong><code><tfoot></code></strong> permet de définir un ensemble de lignes qui résument les colonnes d'un tableau.</p> <div>{{EmbedInteractiveExample("pages/tabbed/tfoot.html","tabbed-taller")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> @@ -36,7 +34,7 @@ translation_of: Web/HTML/Element/tfoot <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> est prise par défaut.</p> - <div class="note"><strong>Notes : </strong>Cet attribut est devenu obsolète dans le dernier standard. + <div class="note"><p><strong>Note :</strong> Cet attribut est devenu obsolète dans le dernier standard.</p> <ul> <li>Pour réaliser le même effet qu'avec les valeurs left, center, right ou justify, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.</li> @@ -44,9 +42,6 @@ translation_of: Web/HTML/Element/tfoot </ul> </div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. <table> @@ -86,28 +81,18 @@ translation_of: Web/HTML/Element/tfoot </tbody> </table> - <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tfoot")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.</div> + <div class="note"><p><strong>Note :</strong> Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tfoot")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.</p></div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> - <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "tfoot")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd> - <dd> - <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "tfoot")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div> + <dd><p>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "tfoot")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</p> + <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "tfoot")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</p></div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> - <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules. - <div class="note"><strong>Note d'utilisation: </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div> + <dd><p>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules.</p> + <div class="note"><p><strong>Note :</strong> Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</p></div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> - <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont : + <dd><p>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :</p> <ul> <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li> <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li> @@ -115,7 +100,7 @@ translation_of: Web/HTML/Element/tfoot <li><code>top</code> qui placera le texte au plus haut de la cellule.</li> </ul> - <div class="note"><strong>Note d'utilisation : </strong>Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</div> + <div class="note"><p><strong>Note :</strong> Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</p></div> </dd> </dl> diff --git a/files/fr/web/html/element/th/index.html b/files/fr/web/html/element/th/index.html index 5327b416b5..daa21a6309 100644 --- a/files/fr/web/html/element/th/index.html +++ b/files/fr/web/html/element/th/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/th <div>{{EmbedInteractiveExample("pages/tabbed/th.html","tabbed-taller")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> @@ -57,7 +55,8 @@ translation_of: Web/HTML/Element/th <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> est prise par défaut.</p> - <div class="note"><strong>Notes : </strong>Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé. + <div class="note"> + <p><strong>Note :</strong> Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé.</p> <ul> <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, il faut utiliser la propriété CSS {{cssxref("text-align")}} sur l'élément</li> @@ -65,91 +64,22 @@ translation_of: Web/HTML/Element/th </ul> </div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> - <dd>Cet attribut contient une liste de chaîne de caractères (séparées par des espaces). Chaque chaîne de caractère est l'identifiant d'un groupe de cellule auquel cet en-tête s'applique.</dd> - <dd> - <div class="note"><strong>Note : </strong>Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. L'attribut {{htmlattrxref("scope", "td")}} doit être utilisé pour le remplacer.</div> + <dd><p>Cet attribut contient une liste de chaîne de caractères (séparées par des espaces). Chaque chaîne de caractère est l'identifiant d'un groupe de cellule auquel cet en-tête s'applique.</p> + <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. L'attribut {{htmlattrxref("scope", "td")}} doit être utilisé pour le remplacer.</p></div> </dd> <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> - <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. - <table style="width: 80%;"> - <tbody> - <tr> - <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"> </td> - <td><code>black</code> = "#000000"</td> - <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"> </td> - <td><code>green</code> = "#008000"</td> - </tr> - <tr> - <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"> </td> - <td><code>silver</code> = "#C0C0C0"</td> - <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"> </td> - <td><code>lime</code> = "#00FF00"</td> - </tr> - <tr> - <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"> </td> - <td><code>gray</code> = "#808080"</td> - <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"> </td> - <td><code>olive</code> = "#808000"</td> - </tr> - <tr> - <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"> </td> - <td><code>white</code> = "#FFFFFF"</td> - <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"> </td> - <td><code>yellow</code> = "#FFFF00"</td> - </tr> - <tr> - <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"> </td> - <td><code>maroon</code> = "#800000"</td> - <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"> </td> - <td><code>navy</code> = "#000080"</td> - </tr> - <tr> - <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"> </td> - <td><code>red</code> = "#FF0000"</td> - <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"> </td> - <td><code>blue</code> = "#0000FF"</td> - </tr> - <tr> - <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"> </td> - <td><code>purple</code> = "#800080"</td> - <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"> </td> - <td><code>teal</code> = "#008080"</td> - </tr> - <tr> - <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"> </td> - <td><code>fuchsia</code> = "#FF00FF"</td> - <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"> </td> - <td> - <p><code>aqua</code> = "#00FFFF"</p> - </td> - </tr> - </tbody> - </table> - - <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("th")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.</div> + <dd><p>Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un des <a href="/fr/docs/Web/CSS/color_value#color_keywords">mots-clés préfédinis pour les couleurs</a> peut également être utilisé.</p> + <div class="note"><p><strong>Note :</strong> Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("th")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.</p></div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("char")}} {{obsolete_inline}} {{HTMLVersionInline("5")}}</dt> - <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "th")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd> - <dd> - <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "th")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div> + <dd><p>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "th")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</p> + <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "th")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</p></div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("charoff")}} {{obsolete_inline}} {{HTMLVersionInline("5")}}</dt> - <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules. - <div class="note"><strong>Note d'utilisation: </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div> + <dd><p>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules.</p> + <div class="note"><p><strong>Note :</strong> Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</p></div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont : <ul> @@ -159,7 +89,7 @@ translation_of: Web/HTML/Element/th <li><code>top</code> qui placera le texte au plus haut de la cellule.</li> </ul> - <div class="note"><strong>Note: </strong>Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</div> + <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</p></div> </dd> </dl> @@ -204,7 +134,7 @@ translation_of: Web/HTML/Element/th <th scope="row">Contenu autorisé</th> <td> <div class="content-models"> - <div id="table-mdls"><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_de_flux">Contenu de flux</a> sans titre, pied de page, contenu sectionnant ou descendants d'un élément de titre.</div> + <div><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_de_flux">Contenu de flux</a> sans titre, pied de page, contenu sectionnant ou descendants d'un élément de titre.</div> </div> </td> </tr> diff --git a/files/fr/web/html/element/thead/index.html b/files/fr/web/html/element/thead/index.html index 760260e65d..fc81dbd4b4 100644 --- a/files/fr/web/html/element/thead/index.html +++ b/files/fr/web/html/element/thead/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/thead <div>{{EmbedInteractiveExample("pages/tabbed/thead.html","tabbed-taller")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> @@ -25,7 +23,7 @@ translation_of: Web/HTML/Element/thead <dl> <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> - <dd>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule. Les valeurs possibles sont : + <dd><p>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule. Les valeurs possibles sont :</p> <ul> <li><code>left </code>: le contenu de la cellule est alligné à gauche de la cellule</li> <li><code>center</code> : le contenu de la cellule est centré horizontalement</li> @@ -36,7 +34,7 @@ translation_of: Web/HTML/Element/thead <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> est prise par défaut.</p> - <div class="note"><strong>Notes : </strong>Cet attribut est devenu obsolète dans le dernier standard. + <div class="note"><p><strong>Note :</strong> Cet attribut est devenu obsolète dans le dernier standard.</p> <ul> <li>Pour réaliser le même effet qu'avec les valeurs left, center, right ou justify, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.</li> @@ -44,86 +42,20 @@ translation_of: Web/HTML/Element/thead </ul> </div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> - <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. - <table style="width: 80%;"> - <tbody> - <tr> - <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>black</code> = "#000000"</td> - <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>green</code> = "#008000"</td> - </tr> - <tr> - <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>silver</code> = "#C0C0C0"</td> - <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>lime</code> = "#00FF00"</td> - </tr> - <tr> - <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>gray</code> = "#808080"</td> - <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>olive</code> = "#808000"</td> - </tr> - <tr> - <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>white</code> = "#FFFFFF"</td> - <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>yellow</code> = "#FFFF00"</td> - </tr> - <tr> - <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>maroon</code> = "#800000"</td> - <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>navy</code> = "#000080"</td> - </tr> - <tr> - <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>red</code> = "#FF0000"</td> - <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>blue</code> = "#0000FF"</td> - </tr> - <tr> - <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>purple</code> = "#800080"</td> - <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>teal</code> = "#008080"</td> - </tr> - <tr> - <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>fuchsia</code> = "#FF00FF"</td> - <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>aqua</code> = "#00FFFF"</td> - </tr> - </tbody> - </table> - - <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("thead")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <strong>bgcolor</strong>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.</div> + <dd><p>Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un des <a href="/fr/docs/Web/CSS/color_value#color_keywords">mots-clés préfédinis pour les couleurs</a> peut également être utilisé.</p> + <div class="note"><p><strong>Note :</strong> Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("thead")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <strong>bgcolor</strong>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.</p></div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> - <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "thead")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd> - <dd> - <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "thead")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div> + <dd><p>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "thead")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</p> + <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "thead")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</p></div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> - <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules. - <div class="note"><strong>Note d'utilisation: </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div> + <dd><p>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules.</p> + <div class="note"><p><strong>Note :</strong> Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</p></div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt> - <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont : + <dd><p>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :</p> <ul> <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li> <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li> @@ -131,7 +63,7 @@ translation_of: Web/HTML/Element/thead <li><code>top</code> qui placera le texte au plus haut de la cellule.</li> </ul> - <div class="note"><strong>Note d'utilisation : </strong>Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</div> + <div class="note"><p><strong>Note :</strong> Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</p></div> </dd> </dl> diff --git a/files/fr/web/html/element/time/index.html b/files/fr/web/html/element/time/index.html index b759c4b7ed..4716eb779a 100644 --- a/files/fr/web/html/element/time/index.html +++ b/files/fr/web/html/element/time/index.html @@ -22,8 +22,6 @@ translation_of: Web/HTML/Element/time <div>{{EmbedInteractiveExample("pages/tabbed/time.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> @@ -45,8 +43,7 @@ translation_of: Web/HTML/Element/time <dl> <dt>Une chaîne de caractères représentant une année</dt> - <dd><code>2011</code></dd> - <dd><code>0001</code></dd> + <dd><code>2011</code> ou <code>0001</code></dd> <dt>Une chaîne de caractères représentant une année et un mois</dt> <dd><code>2011-11</code></dd> <dt>Une chaîne de caractères représentant une date</dt> @@ -56,19 +53,11 @@ translation_of: Web/HTML/Element/time <dt>Une chaîne de caractères représentant une semaine</dt> <dd><code>2011-W47</code></dd> <dt>Une chaîne de caractères représentant une heure</dt> - <dd><code>14:54</code></dd> - <dd><code>14:54:39</code></dd> - <dd><code>14:54:39.929</code></dd> + <dd><code>14:54</code> ou <code>14:54:39</code> ou <code>14:54:39.929</code></dd> <dt>Une chaîne de caractères représentant une date et une heure locale</dt> - <dd><code>2011-11-18T14:54:39.929</code></dd> - <dd><code>2011-11-18 14:54:39.929</code></dd> + <dd><code>2011-11-18T14:54:39.929</code> ou <code>2011-11-18 14:54:39.929</code></dd> <dt>Une chaîne de caractères représentant une date et une heure universelle</dt> - <dd><code>2011-11-18T14:54:39.929Z</code></dd> - <dd><code>2011-11-18T14:54:39.929-0400</code></dd> - <dd><code>2011-11-18T14:54:39.929-04:00</code></dd> - <dd><code>2011-11-18 14:54:39.929Z</code></dd> - <dd><code>2011-11-18 14:54:39.929-0400</code></dd> - <dd><code>2011-11-18 14:54:39.929-04:00</code></dd> + <dd><code>2011-11-18T14:54:39.929Z</code> ou <code>2011-11-18T14:54:39.929-0400</code> ou <code>2011-11-18T14:54:39.929-04:00</code> ou <code>2011-11-18 14:54:39.929Z</code> ou <code>2011-11-18 14:54:39.929-0400</code> ou <code>2011-11-18 14:54:39.929-04:00</code></dd> <dt>Une chaîne de caractères représentant une durée</dt> <dd><code>PT4H18M3S</code></dd> </dl> diff --git a/files/fr/web/html/element/tr/index.html b/files/fr/web/html/element/tr/index.html index 26ae6e681c..e0bde5e355 100644 --- a/files/fr/web/html/element/tr/index.html +++ b/files/fr/web/html/element/tr/index.html @@ -21,8 +21,8 @@ browser-compat: html.elements.tr <h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3> <dl> - <dt><strong id="attr-align"><code>align</code></strong>{{deprecated_inline}}</dt> - <dd>Une chaîne de caractère qui définit l'alignement horizontal pour le contenu de chaque cellule. C'est un raccourci pour définir l'alignement sur l'ensemble de la ligne plutôt que pour chaque cellule. Les valeurs possibles sont : + <dt><strong><code>align</code></strong>{{deprecated_inline}}</dt> + <dd><p>Une chaîne de caractère qui définit l'alignement horizontal pour le contenu de chaque cellule. C'est un raccourci pour définir l'alignement sur l'ensemble de la ligne plutôt que pour chaque cellule. Les valeurs possibles sont :</p> <dl> <dt><code>left</code></dt> <dd>Le contenu de la cellule est aligné à gauche de la cellule.</dd> @@ -38,28 +38,27 @@ browser-compat: html.elements.tr <p>Si cet attribut n'est pas renseigné, la valeur est héritée du nœud parent.</p> - <div class="note"><strong>Note :</strong> Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé. - + <div class="note"> + <p><strong>Note :</strong> Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé.</p> <ul> <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, il faut utiliser la propriété CSS <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> sur l'élément</li> <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible d'utiliser la valeur de l'attribut <a href="#attr-char"><code>char</code></a> comme valeur de la propriété <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a>.</li> </ul> </div> </dd> - <dt><strong id="attr-bgcolor"><code>bgcolor</code></strong> {{deprecated_inline}}</dt> - <dd>Une chaîne de caractères qui définit la couleur d'arrière-plan de toutes les cellules de la colonne. Il peut s'agit d'une <a href="/fr/docs/Web/CSS/color_value#rgb()">notation hexadécimale #RRGGGBB ou #RGB</a> ou bien d'un <a href="/fr/docs/Web/CSS/color_value#color_keywords">mot-clé</a> pour une couleur. L'absence de cet attribut (ou sa déclaration à <code>null</code> en JavaScript) fera que la couleur des cellules de la ligne sera héritée de la couleur d'arrière-plan de l'élément parent. - <div class="note"><strong>Note :</strong> L'élément <code><tr></code> doit être mis en forme grâce au <a href="/fr/docs/Web/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code>bgcolor</code>, il est possible d'utiliser la propriété CSS <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>.</div> + <dt><strong><code>bgcolor</code></strong> {{deprecated_inline}}</dt> + <dd><p>Une chaîne de caractères qui définit la couleur d'arrière-plan de toutes les cellules de la colonne. Il peut s'agit d'une <a href="/fr/docs/Web/CSS/color_value#rgb()">notation hexadécimale #RRGGGBB ou #RGB</a> ou bien d'un <a href="/fr/docs/Web/CSS/color_value#color_keywords">mot-clé</a> pour une couleur. L'absence de cet attribut (ou sa déclaration à <code>null</code> en JavaScript) fera que la couleur des cellules de la ligne sera héritée de la couleur d'arrière-plan de l'élément parent.</p> + <div class="note"><p><strong>Note :</strong> L'élément <code><tr></code> doit être mis en forme grâce au <a href="/fr/docs/Web/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code>bgcolor</code>, il est possible d'utiliser la propriété CSS <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>.</p></div> </dd> - <dt><strong id="attr-char"><code>char</code></strong>{{deprecated_inline}}</dt> - <dd>Une chaîne de caractère qui définit le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point ou une virgule pour aligner des nombres ou des valeurs monétaires. Si l'attribut <a href="#attr-align"><code>align</code></a> ne vaut pas <code>char</code>, l'attribut est ignoré.</dd> - <dd> - <div class="note"><strong>Note :</strong> Cet attribut est obsolète et peu implémenté : il est donc fortement déconseillé de l'utiliser. Pour réaliser le même effet qu'avec <a href="#attr-char"><code>char</code></a>, il faut utiliser la propriété CSS <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a>.</div> + <dt><strong><code>char</code></strong>{{deprecated_inline}}</dt> + <dd><p>Une chaîne de caractère qui définit le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point ou une virgule pour aligner des nombres ou des valeurs monétaires. Si l'attribut <a href="#attr-align"><code>align</code></a> ne vaut pas <code>char</code>, l'attribut est ignoré.</p> + <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète et peu implémenté : il est donc fortement déconseillé de l'utiliser. Pour réaliser le même effet qu'avec <a href="#attr-char"><code>char</code></a>, il faut utiliser la propriété CSS <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a>.</p></div> </dd> - <dt><strong id="attr-charoff"><code>charoff</code></strong> {{deprecated_inline}}</dt> - <dd>Une chaîne de caractères utilisée pour indiquer le nombre de caractères à afficher après le caractère défini par l'attribut <code>char</code>. Cela peut par exemple servir à indiquer qu'on souhaite afficher deux chiffres après la virgule pour les valeurs monétaires afin d'indiquer les centimes. - <div class="note"><strong>Note :</strong> Cet attribut ne doit plus être utilisé, car il est maintenant obsolète et que sa compatibilité n'était pas répandue.</div> + <dt><strong><code>charoff</code></strong> {{deprecated_inline}}</dt> + <dd><p>Une chaîne de caractères utilisée pour indiquer le nombre de caractères à afficher après le caractère défini par l'attribut <code>char</code>. Cela peut par exemple servir à indiquer qu'on souhaite afficher deux chiffres après la virgule pour les valeurs monétaires afin d'indiquer les centimes.</p> + <div class="note"><p><strong>Note :</strong> Cet attribut ne doit plus être utilisé, car il est maintenant obsolète et que sa compatibilité n'était pas répandue.</p></div> </dd> - <dt><strong id="attr-valign"><code>valign</code></strong> {{deprecated_inline}}</dt> + <dt><strong><code>valign</code></strong> {{deprecated_inline}}</dt> <dd><p>Une chaîne de caractères qui définit l'alignement vertical du texte des cellules de la ligne. Les valeurs possibles de cet attribut sont :</p> <dl> <dt><code>baseline</code></dt> @@ -72,7 +71,7 @@ browser-compat: html.elements.tr <dd>Place le texte au plus haut de la cellule.</dd> </dl> - <div class="note"><strong>Note: </strong>Cet attribut est obsolète dans le dernier standard, la propriété CSS <a href="/fr/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> doit être utilisée à la place.</div> + <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète dans le dernier standard, la propriété CSS <a href="/fr/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> doit être utilisée à la place.</p></div> </dd> </dl> diff --git a/files/fr/web/html/element/track/index.html b/files/fr/web/html/element/track/index.html index 149a37aec8..c70add3466 100644 --- a/files/fr/web/html/element/track/index.html +++ b/files/fr/web/html/element/track/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/track <div>{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <h2 id="Attributs">Attributs</h2> <p>À l'instar des autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> diff --git a/files/fr/web/html/element/tt/index.html b/files/fr/web/html/element/tt/index.html index 02a25bd7e5..f10fc657d2 100644 --- a/files/fr/web/html/element/tt/index.html +++ b/files/fr/web/html/element/tt/index.html @@ -15,7 +15,9 @@ translation_of: Web/HTML/Element/tt <p>Cet élément est désormais obsolète et un élément {{HTMLElement("code")}}, {{HTMLElement("kbd")}}, {{HTMLElement("samp")}} ou {{HTMLElement("var")}} pourra être utilisé à la place s'il faut afficher du texte en incise avec une police à chasse fixe. On pourra utiliser l'élément {{HTMLElement("pre")}} pour afficher un bloc de contenu préformaté (également généralement affiché dans une police à chasse fixe).</p> -<div class="note"><strong>Note :</strong> Si aucun de ces éléments ne correspond à la sémantique portée par votre contenu (lorsque, par exemple, il ne s'agit que d'un effet de mise en forme), vous pouvez utiliser un élément {{HTMLElement("span")}} mis en forme avec CSS (par exemple la propriété {{cssxref("font-family")}}).</div> +<div class="note"> + <p><strong>Note :</strong> Si aucun de ces éléments ne correspond à la sémantique portée par votre contenu (lorsque, par exemple, il ne s'agit que d'un effet de mise en forme), vous pouvez utiliser un élément {{HTMLElement("span")}} mis en forme avec CSS (par exemple la propriété {{cssxref("font-family")}}).</p> +</div> <h2 id="Attributs">Attributs</h2> diff --git a/files/fr/web/html/element/u/index.html b/files/fr/web/html/element/u/index.html index 435347fe3b..169e81d6bb 100644 --- a/files/fr/web/html/element/u/index.html +++ b/files/fr/web/html/element/u/index.html @@ -13,13 +13,11 @@ translation_of: Web/HTML/Element/u <p>L'élément HTML <strong><code><u></code></strong> permet d'afficher un fragment de texte qui est annoté avec des éléments non textuels. Par défaut, le contenu de l'élément est souligné. Cela pourra par exemple être le cas pour marquer un texte comme étant un nom propre chinois, ou pour marquer un texte qui a été mal orthographié.</p> <div class="warning"> -<p><strong>Attention !</strong> Cet élément était auparavant appelé <em>underline</em> pour les anciennes versions des spécifications HTML. Si on souhaite simplement souligner du texte, il ne faudra pas utiliser cet élément mais la propriété CSS {{cssxref("text-decoration")}} avec la valeur <code>"underline"</code>.</p> +<p><strong>Attention :</strong> Cet élément était auparavant appelé <em>underline</em> pour les anciennes versions des spécifications HTML. Si on souhaite simplement souligner du texte, il ne faudra pas utiliser cet élément mais la propriété CSS {{cssxref("text-decoration")}} avec la valeur <code>"underline"</code>.</p> </div> <div>{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> @@ -106,7 +104,6 @@ Soupe de potiron avec un soupçon de noix de muscade</pre> <h4 id="Indiquer_le_titre_pour_un_livre">Indiquer le titre pour un livre</h4> -<div id="example-unstyled-cite"> <p>Les titres de livres doivent être indiqués avec un élément {{HTMLElement("cite")}} et non avec <code><u></code> ou <code><i></code>.</p> <h5 id="HTML_3">HTML</h5> @@ -116,19 +113,7 @@ Soupe de potiron avec un soupçon de noix de muscade</pre> au cours du premier trimestre. </p></pre> -<h5 id="Résultat_avec_la_mise_en_forme_par_défaut">Résultat avec la mise en forme par défaut</h5> - -<p>{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}</p> -</div> - -<p>On notera que, par défaut, un élément <code><cite></code> est affiché en italique. Ceci peut être modifié grâce à CSS :</p> - -<pre class="brush: css">cite { - font-style: normal; - text-decoration: underline; -}</pre> - -<h5 id="Résultat_3">Résultat</h5> +<h5 id="Résultat">Résultat</h5> <p>{{EmbedLiveSample("Indiquer_le_titre_pour_un_livre", 650, 80)}}</p> diff --git a/files/fr/web/html/element/ul/index.html b/files/fr/web/html/element/ul/index.html index f09eaea7e3..41919488a2 100644 --- a/files/fr/web/html/element/ul/index.html +++ b/files/fr/web/html/element/ul/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/ul <div>{{EmbedInteractiveExample("pages/tabbed/ul.html", "tabbed-standard")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <h2 id="Attributs">Attributs</h2> <p>À l'instar des différents éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> @@ -25,11 +23,9 @@ translation_of: Web/HTML/Element/ul <dl> <dt>{{htmlattrdef("compact")}}{{Deprecated_inline}}</dt> <dd>Cet attribut booléen fournit une indication pour afficher la liste en mode compact. L'interprétation de cet attribut est laissée à la discrétion de l'agent utilisateur et ne fonctionne pas pour tous les navigateurs. - <div class="warning"><strong>Attention !</strong>Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété {{cssxref("line-height")}} avec la valeur <code>80%</code> pour l'élément <code><ul></code>.</div> + <div class="warning"> + <p><strong>Attention :</strong> Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété {{cssxref("line-height")}} avec la valeur <code>80%</code> pour l'élément <code><ul></code>.</p></div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("type")}}{{Deprecated_inline}}</dt> <dd>Cet attribut permet de définir le style de puce utilisé pour la liste. Les valeurs définies au sein des spécifications pour HTML3.2 et HTML 4.0/4.01 sont : <ul> @@ -40,7 +36,9 @@ translation_of: Web/HTML/Element/ul <p>Un quatrième type a été défini dans l'interface WebTV : <code>triangle</code> mais tous les navigateurs ne l'implémentent pas.</p> - <div class="warning"><strong>Attention !</strong>Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété CSS {{cssxref("list-style-type")}} à la place.</div> + <div class="warning"> + <p><strong>Attention :</strong>Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété CSS {{cssxref("list-style-type")}} à la place.</p> + </div> </dd> </dl> diff --git a/files/fr/web/html/element/var/index.html b/files/fr/web/html/element/var/index.html index 02bb65da37..7a06f26bf4 100644 --- a/files/fr/web/html/element/var/index.html +++ b/files/fr/web/html/element/var/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/var <div>{{EmbedInteractiveExample("pages/tabbed/var.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> diff --git a/files/fr/web/html/element/video/index.html b/files/fr/web/html/element/video/index.html index 1801eaa76a..af53240556 100644 --- a/files/fr/web/html/element/video/index.html +++ b/files/fr/web/html/element/video/index.html @@ -17,8 +17,6 @@ translation_of: Web/HTML/Element/video <div>{{EmbedInteractiveExample("pages/tabbed/video.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>L'exemple précédent illustre comment utiliser l'élément <code><video></code> simplement, à la façon d'un élément {{htmlelement("img")}}. Le chemin vers le média à afficher est fourni via l'attribut <code>src</code> et on peut inclure d'autres attributs afin de spécifier la largeur et la hauteur, la lecture automatique et/ou en boucle, les contrôles affichés, etc.</p> <p>Le contenu fourni entre les balises <code><video></video></code> est affiché comme contenu alternatif par les navigateurs qui ne prennent pas en charge l'élément.</p> @@ -49,32 +47,26 @@ translation_of: Web/HTML/Element/video <dl> <dt>{{htmlattrdef("autoplay")}}</dt> - <dd>Un attribut booléen qui indique que la vidéo doit automatiquement être lancée dès qu'elle peut être jouée sans être arrêtée par le chargement des données.</dd> - <dd> - <p class="note"><strong>Note :</strong> la lecture automatique peut être source de nuisance pour les utilisateurs. Mieux vaut l'éviter lorsque c'est possible ou proposer à l'utilisateur de choisir cette option. Cette valeur peut être utile lors de la création de vidéos dont la source sera définie <em>a posteriori</em>.</p> - - <p class="note"><strong>Note :</strong> Cet attribut est un attribut booléen et indiquer <code>autoplay="false"</code> ne suffira pas à retirer la lecture automatique. Pour ce faire, il faut complètement retirer l'attribut.</p> - - <p class="note"><strong>Note :</strong> Pour certains navigateurs (ex. Chrome 70), l'attribut <code>autoplay</code> ne fonctionne pas si aucun attribut <code>mute</code>n'est présent.</p> + <dd><p>Un attribut booléen qui indique que la vidéo doit automatiquement être lancée dès qu'elle peut être jouée sans être arrêtée par le chargement des données.</p> + <div class="note"><p><strong>Note :</strong> la lecture automatique peut être source de nuisance pour les utilisateurs. Mieux vaut l'éviter lorsque c'est possible ou proposer à l'utilisateur de choisir cette option. Cette valeur peut être utile lors de la création de vidéos dont la source sera définie <em>a posteriori</em>.</p></div> + <div class="note"><p><strong>Note :</strong> Cet attribut est un attribut booléen et indiquer <code>autoplay="false"</code> ne suffira pas à retirer la lecture automatique. Pour ce faire, il faut complètement retirer l'attribut.</p></div> + <div class="note"><p><strong>Note :</strong> Pour certains navigateurs (ex. Chrome 70), l'attribut <code>autoplay</code> ne fonctionne pas si aucun attribut <code>mute</code>n'est présent.</p></div> </dd> -</dl> - -<dl> <dt>{{htmlattrdef("buffered")}}</dt> <dd>Un attribut qui peut être lu afin de déterminer l'intervalle temporel mis en mémoire tampon. Cet attribut contient un objet {{domxref("TimeRanges")}}.</dd> <dt>{{htmlattrdef("controls")}}</dt> <dd>Si cet attribut est présent, le navigateur affichera des contrôles pour permettre à l'utilisateur de contrôler la lecture de la vidéo, le volume et la mise sur pause.</dd> <dt>{{htmlattrdef("controlslist")}} {{experimental_inline}}</dt> - <dd>L'attribut <code>controlslist</code>, lorsqu'il est indiqué, aide le navigateur à choisir les contrôles à afficher pour la manipulation du média lorsque l'attribut <code>controls</code> est utilisé.</dd> - <dd>Les valeurs autorisées pour cet attribut sont <code>nodownload</code>, <code>nofullscreen</code> et <code>noremoteplayback</code>.<br> - On utilisera l'attribut <code>disablePictureInPicture</code> afin de désactiver ce mode et les contrôles associés.</dd> + <dd><p>L'attribut <code>controlslist</code>, lorsqu'il est indiqué, aide le navigateur à choisir les contrôles à afficher pour la manipulation du média lorsque l'attribut <code>controls</code> est utilisé.</p> + <p>Les valeurs autorisées pour cet attribut sont <code>nodownload</code>, <code>nofullscreen</code> et <code>noremoteplayback</code>.</p> + <p>On utilisera l'attribut <code>disablePictureInPicture</code> afin de désactiver ce mode et les contrôles associés.</p></dd> <dt>{{htmlattrdef("crossorigin")}}</dt> - <dd>Cet attribut à valeur contrainte permet d'indiquer si le CORS doit être utilisé pour récupérer la vidéo. <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP">Les ressources avec le CORS activé</a> peuvent être réutilisées dans un élément {{HTMLElement("canvas")}} sans le <em>corrompre</em>. Les valeurs autorisées sont : + <dd><p>Cet attribut à valeur contrainte permet d'indiquer si le CORS doit être utilisé pour récupérer la vidéo. <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP">Les ressources avec le CORS activé</a> peuvent être réutilisées dans un élément {{HTMLElement("canvas")}} sans le <em>corrompre</em>. Les valeurs autorisées sont :</p> <ul> <li><code>anonymous</code> : une requête <em>cross-origine</em> est envoyée sans information d'authentification. Autrement dit, un en-tête HTTP {{HTTPHeader("Origin")}} est envoyé, sans cookie, certificat X.509 ou sans authentification HTTP simple. Si le serveur ne fournit pas d'informations d'authentification au site d'origine (c'est-à-dire en n'envoyant pas l'en-tête HTTP {{HTTPHeader("Access-Control-Allow-Origin")}}), la vidéo sera corrompue et son utilisation sera restreinte.</li> <li><code>use-credentials</code> : une requête <em>cross-origine</em> est envoyée avec une information d'authentification. Autrement dit, un en-tête HTTP <code>Header</code> est envoyé, avec un cookie, une certification ou une authentification HTTP simple. Si le serveur ne fournit pas d'informations d'authentification au site d'origine (c'est-à-dire en n'envoyant pas l'en-tête HTTP {{HTTPHeader("Access-Control-Allow-Origin")}}), la vidéo sera corrompue et son utilisation sera restreinte.</li> </ul> - Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS (l'en-tête HTTP {{HTTPHeader("Origin")}}) n'est pas envoyé) et elle ne peut pas être utilisée dans un élément {{HTMLElement('canvas')}}. Si la valeur est invalide, elle sera gérée comme si le mot-clé <code>anonymous</code> était utilisé. Pour plus d'informations, consulter l'article sur <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">les attributs de paramétrage du CORS</a>.</dd> + <p>Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS (l'en-tête HTTP {{HTTPHeader("Origin")}}) n'est pas envoyé) et elle ne peut pas être utilisée dans un élément {{HTMLElement('canvas')}}. Si la valeur est invalide, elle sera gérée comme si le mot-clé <code>anonymous</code> était utilisé. Pour plus d'informations, consulter l'article sur <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">les attributs de paramétrage du CORS</a>.</p></dd> <dt>{{htmlattrdef("height")}}</dt> <dd>La hauteur de la zone où afficher la vidéo, exprimée en pixels CSS (en valeur absolue uniquement).</dd> <dt>{{htmlattrdef("intrinsicsize")}} {{experimental_inline}}</dt> @@ -88,7 +80,7 @@ translation_of: Web/HTML/Element/video <dt>{{htmlattrdef("playsinline")}}</dt> <dd>Un attribut booléen qui indique que la vidéo doit être jouée en incise, c'est-à-dire au sein de la zone de lecture de l'élément. À noter : l'absence de cet attribut n'implique pas que la vidéo sera lancée en plein écran.</dd> <dt>{{htmlattrdef("preload")}}</dt> - <dd>Cet attribut à valeur contrainte est une indication destinée au navigateur sur la meilleure façon de charger la vidéo (selon l'auteur de la page). Il peut prendre l'une des valeurs suivantes : + <dd><p>Cet attribut à valeur contrainte est une indication destinée au navigateur sur la meilleure façon de charger la vidéo (selon l'auteur de la page). Il peut prendre l'une des valeurs suivantes :</p> <ul> <li><code>none</code> : la vidéo ne doit pas être préchargée.</li> <li><code>metadata</code> : seules les métadonnées de la vidéo (sa durée par exemple) sont récupérées.</li> @@ -98,7 +90,7 @@ translation_of: Web/HTML/Element/video <p>La valeur par défaut peut être différente selon le navigateur. La spécification conseille d'utiliser la valeur <code>metadata</code>.</p> - <div class="note"><strong>Notes d'utilisation :</strong> + <div class="note"><p><strong>Note :</strong></p> <ul> <li>L'attribut <code>autoplay</code> a la priorité sur <code>preload</code>. Si <code>autoplay</code> est défini, le navigateur doit nécessairement télécharger la vidéo pour la lancer.</li> diff --git a/files/fr/web/html/element/wbr/index.html b/files/fr/web/html/element/wbr/index.html index dec0ece17d..84cf91e56c 100644 --- a/files/fr/web/html/element/wbr/index.html +++ b/files/fr/web/html/element/wbr/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/wbr <div>{{EmbedInteractiveExample("pages/tabbed/wbr.html", "tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <h2 id="Attributs">Attributs</h2> <p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> diff --git a/files/fr/web/html/element/xmp/index.html b/files/fr/web/html/element/xmp/index.html index 90a3ecb86d..d210e8b57b 100644 --- a/files/fr/web/html/element/xmp/index.html +++ b/files/fr/web/html/element/xmp/index.html @@ -13,7 +13,8 @@ translation_of: Web/HTML/Element/xmp <p>L'élément HTML <strong><code><xmp></code></strong> (pour <em>example</em>) affiche le texte entre les balises d'ouverture et de fermeture sans interpréter le HTML qu'il contient et en utilisant une police à chasse fixe. La spécification HTML 2 recommande un affichage suffisamment large pour contenir 80 caractères par ligne.</p> -<div class="note"><strong>Note : </strong>Ne pas utiliser cet élément. +<div class="note"> + <p><strong>Note :</strong> Ne pas utiliser cet élément.</p> <ul> <li>Il a été déprécié depuis HTML3.2 et n'a pas été implémenté d'une manière cohérente. Il a été complètement retiré du langage dans HTML5.</li> @@ -31,7 +32,7 @@ translation_of: Web/HTML/Element/xmp <p>Cet élément implémente l'interface {{domxref('HTMLElement')}}.</p> <div class="note"> -<p><strong>Note d'implémentation : </strong>Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</p> +<p><strong>Note :</strong> Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</p> </div> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/html/global_attributes/accesskey/index.html b/files/fr/web/html/global_attributes/accesskey/index.html index 8f7fd77d4a..498b67629a 100644 --- a/files/fr/web/html/global_attributes/accesskey/index.html +++ b/files/fr/web/html/global_attributes/accesskey/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/accesskey <div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>La combinaison de touches utilisée pour le raccourci clavier dépend du navigateur et du système d'exploitation utilisés.</p> <div class="note"> @@ -35,7 +33,7 @@ original_slug: Web/HTML/Attributs_universels/accesskey <tbody> <tr> <th>Firefox</th> - <td colspan="2" rowspan="1"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>touche</em></kbd></td> + <td colspan="2"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>touche</em></kbd></td> <td> <p>Pour Firefox 57 et les versions ultérieures : <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>touche</em></kbd> ou <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd><br> Pour Firefox 14 et les versions ultérieures : <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd><br> @@ -45,16 +43,16 @@ original_slug: Web/HTML/Attributs_universels/accesskey <tr> <th>Edge</th> <td><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td> - <td colspan="2" rowspan="1">N/A</td> + <td colspan="2">N/A</td> </tr> <tr> <th>Internet Explorer</th> <td><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td> - <td colspan="2" rowspan="1">N/A</td> + <td colspan="2">N/A</td> </tr> <tr> <th>Google Chrome</th> - <td colspan="2" rowspan="1"><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td> + <td colspan="2"><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td> <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td> </tr> <tr> @@ -65,12 +63,12 @@ original_slug: Web/HTML/Attributs_universels/accesskey </tr> <tr> <th>Opera 15+</th> - <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td colspan="2"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> </tr> <tr> <th>Opera 12</th> - <td colspan="3" rowspan="1"><kbd>Shift</kbd> + <kbd>Esc</kbd> ouvre une liste de contenu accessible via la touche <code>accesskey</code>, on peut alors ensuite choisir l'élément voulu grâce la touche <kbd><em>touche</em></kbd></td> + <td colspan="3"><kbd>Shift</kbd> + <kbd>Esc</kbd> ouvre une liste de contenu accessible via la touche <code>accesskey</code>, on peut alors ensuite choisir l'élément voulu grâce la touche <kbd><em>touche</em></kbd></td> </tr> </tbody> </table> diff --git a/files/fr/web/html/global_attributes/autofocus/index.html b/files/fr/web/html/global_attributes/autofocus/index.html index 931b00a6f0..8b087d74e5 100644 --- a/files/fr/web/html/global_attributes/autofocus/index.html +++ b/files/fr/web/html/global_attributes/autofocus/index.html @@ -12,13 +12,13 @@ translation_of: 'Web/HTML/Global_attributes/autofocus' <p>L'attribut <code>autofocus</code> ne devrait pas être placé sur plus d'un élément au sein du document. S'il est placé sur plusieurs éléments, c'est le premier qui recevra le focus.</p> -<div class="notecard note"> - <p><strong>Note :</strong> L'attribut <code>autofocus</code> s'applique à tous les éléments, et pas seulement aux contrôles de formulaires. Par exemple, il peut être utilisé sur une zone <a href="/fr/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a>.</p> +<div class="note"> + <p><strong>Note :</strong> L'attribut <code>autofocus</code> s'applique à tous les éléments, et pas seulement aux contrôles de formulaires. Par exemple, il peut être utilisé sur une zone <a href="/fr/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a>.</p> </div> <h2 id="accessibility_considerations">Remarques sur l'accessibilité de la fonctionnalité</h2> -<p>Le fait de placer automatiquement le focus sur un élément de formulaire peut poser des difficultés aux personnes utilisant des technologies d'assistance telles que les lecteurs d'écrans et les personnes portant un handicap cognitif. Lorsque l'attribut <code>autofocus</code> est assigné, les lecteurs d'écrans vont « téléporter » le visiteur sur l'élément de formulaire sans pouvoir l'avertir au préalable.</p> +<p>Le fait de placer automatiquement le focus sur un élément de formulaire peut poser des difficultés aux personnes utilisant des technologies d'assistance telles que les lecteurs d'écrans et les personnes portant un handicap cognitif. Lorsque l'attribut <code>autofocus</code> est assigné, les lecteurs d'écrans vont « téléporter » le visiteur sur l'élément de formulaire sans pouvoir l'avertir au préalable.</p> <p>Concernant l'accessibilité, l'attribut <code>autofocus</code> doit être utilisé avec précaution. Placer automatiquement le focus sur un élément de formulaire peut déclencher un défilement intempestif de la page lors de son chargement. Le focus peut aussi déclencher l'ouverture intempestive du clavier virtuel sur les appareils tactiles. Enfin, il faut noter que comme les lecteurs d'écrans annoncent le libellé d'un élément de formulaire recevant le focus, aucun autre élément placé avant le libellé ne sera lu par l'outil d'assistance. D'ailleurs, les personnes utilisant un appareil disposant d'un petit écran perdront également le contexte fourni par les éléments situés au-dessus de l'élément de formulaire recevant le focus.</p> diff --git a/files/fr/web/html/global_attributes/class/index.html b/files/fr/web/html/global_attributes/class/index.html index d236b6333a..e4aa07e5e9 100644 --- a/files/fr/web/html/global_attributes/class/index.html +++ b/files/fr/web/html/global_attributes/class/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/class <div>{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <p>Bien que la spécification ne précise aucune contrainte quant aux noms utilisés pour les classes, une bonne pratique consiste à utiliser des noms qui traduisent la sémantique de l'élément plutôt que la mise en forme. Ainsi, les noms sémantiques restent pertinents même lorsque la présentation de la page évolue.</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/html/global_attributes/contenteditable/index.html b/files/fr/web/html/global_attributes/contenteditable/index.html index 6587821ca2..be68b5e9b3 100644 --- a/files/fr/web/html/global_attributes/contenteditable/index.html +++ b/files/fr/web/html/global_attributes/contenteditable/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/contenteditable <div>{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les valeurs autorisées pour cet attribut sont :</p> <ul> diff --git a/files/fr/web/html/global_attributes/contextmenu/index.html b/files/fr/web/html/global_attributes/contextmenu/index.html index 84ea955ed0..ef40b4361f 100644 --- a/files/fr/web/html/global_attributes/contextmenu/index.html +++ b/files/fr/web/html/global_attributes/contextmenu/index.html @@ -12,14 +12,13 @@ original_slug: Web/HTML/Attributs_universels/contextmenu <div>{{HTMLSidebar("Global_attributes")}}{{obsolete_header}}</div> <div class="warning"> -<p><strong>Attention !</strong> Cet attribut est <a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu">obsolète</a> et sera retiré de l'ensemble des navigateurs.</p> +<p><strong>Attention :</strong> Cet attribut est <a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu">obsolète</a> et sera retiré de l'ensemble des navigateurs.</p> </div> <p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>contextmenu</strong></code> correspond à l'{{htmlattrxref("id","","identifiant",1)}} d'un élément {{HTMLElement("menu")}} qu'on souhaite utiliser comme menu contextuel pour l'élément courant.</p> <p>Un menu contextuel est un menu qui apparaît suite à une action utilisateur (par exemple un clic-droit). HTML5 permet désormais de personnaliser ce menu.</p> -<div id="ContextMenu_Example"> <h2 id="Exemples">Exemples</h2> <p>Voici quelques exemples de personnalisations de menus. Le code HTML pourra être :</p> @@ -81,7 +80,6 @@ function changeImage(){ <h3 id="Résultat">Résultat</h3> <div>{{EmbedLiveSample("Exemples",600,500)}}</div> -</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/html/global_attributes/data-_star_/index.html b/files/fr/web/html/global_attributes/data-_star_/index.html index c9e29ffead..0c0e955533 100644 --- a/files/fr/web/html/global_attributes/data-_star_/index.html +++ b/files/fr/web/html/global_attributes/data-_star_/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/data-* <div>{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <p>De tels attributs sont disponibles via l'interface {{domxref("HTMLElement")}} de l'élément pour lequel l'attribut est utilisé. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'attribut.<br> Ici, l'astérisque (<code>*</code>) peut être remplacée par n'importe quel nom valide selon <a class="external" href="https://www.w3.org/TR/REC-xml/#NT-Name">les règles appliquées aux noms XML</a> et en respectant les contraintes suivantes :</p> diff --git a/files/fr/web/html/global_attributes/dir/index.html b/files/fr/web/html/global_attributes/dir/index.html index 2c2d9b4b2b..d3a9537cef 100644 --- a/files/fr/web/html/global_attributes/dir/index.html +++ b/files/fr/web/html/global_attributes/dir/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/dir <div>{{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Les valeurs autorisées pour cet attribut sont :</p> <ul> @@ -26,8 +24,7 @@ original_slug: Web/HTML/Attributs_universels/dir </ul> <div class="note"> -<p><strong>Notes d'utilisation :</strong><br> - Cet attribut est obligatoire pour l'élément {{HTMLElement("bdo")}}, pour lequel l'attribut a une sémantique différente.</p> +<p><strong>Note :</strong> Cet attribut est obligatoire pour l'élément {{HTMLElement("bdo")}}, pour lequel l'attribut a une sémantique différente.</p> <ul> <li> diff --git a/files/fr/web/html/global_attributes/hidden/index.html b/files/fr/web/html/global_attributes/hidden/index.html index ecff0d50f7..78965d4351 100644 --- a/files/fr/web/html/global_attributes/hidden/index.html +++ b/files/fr/web/html/global_attributes/hidden/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/hidden <div>{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cet attribut ne doit pas être utilisé pour masquer du contenu qui devrait pouvoir être vu sous une autre présentation. Si un contenu est marqué comme masqué, il sera masqué pour l'ensemble des présentations, y compris pour les lecteurs d'écran et autres outils d'assistance.</p> <p>Les éléments cachés avec <code>hidden</code> ne devraient pas avoir de lien qui pointent vers eux depuis des éléments visibles. De plus, les éléments fils de l'élément caché sont toujours actifs : cela signifie qu'ils peuvent être utilisés par les scripts et que les formulaires peuvent envoyer des données. Dans certains autres contextes, il est possible d'avoir des relations avec les éléments cachés via <code>hidden</code>.</p> diff --git a/files/fr/web/html/global_attributes/id/index.html b/files/fr/web/html/global_attributes/id/index.html index 19963293f4..efaedba85f 100644 --- a/files/fr/web/html/global_attributes/id/index.html +++ b/files/fr/web/html/global_attributes/id/index.html @@ -15,10 +15,8 @@ original_slug: Web/HTML/Attributs_universels/id <div>{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<div class="blockIndicator warning"> -<p><strong>Note :</strong> La valeur de cet attribut est une chaîne de caractère « opaque ». Cela signifie que cet attribut ne doit pas être utilisé pour transporter de l'information. Les informations sur la signification de l'élément dans le document ne doivent pas être portées par la valeur de cet attribut.</p> +<div class="warning"> +<p><strong>Attention :</strong> La valeur de cet attribut est une chaîne de caractère « opaque ». Cela signifie que cet attribut ne doit pas être utilisé pour transporter de l'information. Les informations sur la signification de l'élément dans le document ne doivent pas être portées par la valeur de cet attribut.</p> </div> <p>La valeur de cet attribut ne doit pas contenir de blancs (espaces, tabulation, etc.). Les navigateurs interprèteront les identifiants avec des espaces comme si l'espace faisait partie de l'identifiant. Ce comportement est différent de celui de l'attribut {{htmlattrxref("class")}} qui permet d'avoir des valeurs séparées par des espaces. Les éléments ne peuvent avoir qu'un seul identifiant défini via l'attribut <code><strong>id</strong></code>.</p> diff --git a/files/fr/web/html/global_attributes/index.html b/files/fr/web/html/global_attributes/index.html index 7a9d96d740..29656a207e 100644 --- a/files/fr/web/html/global_attributes/index.html +++ b/files/fr/web/html/global_attributes/index.html @@ -20,7 +20,7 @@ original_slug: Web/HTML/Attributs_universels <ul> <li>{{htmlattrdef("xml:lang")}} et {{htmlattrdef("xml:base")}} : ces attributs proviennent des spécifications XHTML. Ils sont désormais dépréciés mais conservés pour des raisons de compatibilité.</li> - <li>Les nombreux attributs <code><strong><a href="/fr/docs/Accessibilité/ARIA">aria-*</a></strong></code> utilisés afin d'améliorer l'accessibilité.</li> + <li>Les nombreux attributs <a href="/fr/docs/Accessibilité/ARIA"><code>aria-*</code></a> utilisés afin d'améliorer l'accessibilité.</li> <li>Les attributs utilisés pour <a href="/fr/docs/Web/Guide/DOM/Events/Event_handlers">les gestionnaires d'événements</a> déclarés directement sur les éléments : <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> </ul> diff --git a/files/fr/web/html/global_attributes/inputmode/index.html b/files/fr/web/html/global_attributes/inputmode/index.html index 8762c498df..6574f06ffd 100644 --- a/files/fr/web/html/global_attributes/inputmode/index.html +++ b/files/fr/web/html/global_attributes/inputmode/index.html @@ -11,7 +11,7 @@ original_slug: Web/HTML/Attributs_universels/inputmode --- <div>{{HTMLSidebar("Global_attributes")}}</div> -<p><span class="seoSummary">L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>inputmode</code></strong> est un attribut à valeur contrainte qui fournit une indication au navigateur quant au type de donnée qui peut être saisi par l'utilisateur lors de l'édition de l'élément ou de son contenu.</span> Les valeurs autorisées sont les suivantes :</p> +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>inputmode</code></strong> est un attribut à valeur contrainte qui fournit une indication au navigateur quant au type de donnée qui peut être saisi par l'utilisateur lors de l'édition de l'élément ou de son contenu. Les valeurs autorisées sont les suivantes :</p> <dl> <dt><code>none</code></dt> diff --git a/files/fr/web/html/global_attributes/itemid/index.html b/files/fr/web/html/global_attributes/itemid/index.html index ae09c4124b..bb31c1e8c8 100644 --- a/files/fr/web/html/global_attributes/itemid/index.html +++ b/files/fr/web/html/global_attributes/itemid/index.html @@ -23,7 +23,9 @@ original_slug: Web/HTML/Attributs_universels/itemid <pre class="syntaxbox">itemid="URN"</pre> -<p class="note"><strong>Note :</strong> Selon la définition du WHATWG, un <code>itemid</code> doit être une URL. Dans l'exemple qui suit, on utilise plutôt une URN, plus appropriée pour définir un identifiant unique comme <code>itemid</code>. Cette incohérence reflète l'état actuellement incomplet de la spécification sur les microdonnées.</p> +<div class="note"> + <p><strong>Note :</strong> Selon la définition du WHATWG, un <code>itemid</code> doit être une URL. Dans l'exemple qui suit, on utilise plutôt une URN, plus appropriée pour définir un identifiant unique comme <code>itemid</code>. Cette incohérence reflète l'état actuellement incomplet de la spécification sur les microdonnées.</p> +</div> <h2 id="Exemple">Exemple</h2> @@ -48,7 +50,7 @@ original_slug: Web/HTML/Attributs_universels/itemid <td colspan="1" rowspan="14">itemscope</td> <td>itemtype: itemid</td> <td colspan="2" rowspan="1"> - <div class="jyrRxf-eEDwDf jcd3Mb IZ65Hb-hUbt4d">http://vocab.example.net/book: urn:isbn:0-330-34032-8</div> + http://vocab.example.net/book: urn:isbn:0-330-34032-8 </td> </tr> <tr> @@ -60,7 +62,7 @@ original_slug: Web/HTML/Attributs_universels/itemid <td>itemprop</td> <td>author</td> <td> - <div class="jyrRxf-eEDwDf jcd3Mb">Peter F. Hamilton</div> + Peter F. Hamilton </td> </tr> <tr> diff --git a/files/fr/web/html/global_attributes/itemprop/index.html b/files/fr/web/html/global_attributes/itemprop/index.html index 7436b55d7d..0511713043 100644 --- a/files/fr/web/html/global_attributes/itemprop/index.html +++ b/files/fr/web/html/global_attributes/itemprop/index.html @@ -272,7 +272,9 @@ original_slug: Web/HTML/Attributs_universels/itemprop </li> </ol> -<p class="note"><strong>Note :</strong> Les caractères « : » sont interdits pour les valeurs qui ne sont pas des URL afin de pouvoir distinguer les URL du reste. Les valeurs avec les caractères « . » sont réservés pour de futurs ajouts et les blancs ne sont pas autorisés car les valeurs seraient analysées comme plusieurs valeurs distinctes.</p> +<div class="note"> + <p><strong>Note :</strong> Les caractères « : » sont interdits pour les valeurs qui ne sont pas des URL afin de pouvoir distinguer les URL du reste. Les valeurs avec les caractères « . » sont réservés pour de futurs ajouts et les blancs ne sont pas autorisés car les valeurs seraient analysées comme plusieurs valeurs distinctes.</p> +</div> <h2 id="Valeurs">Valeurs</h2> diff --git a/files/fr/web/html/global_attributes/itemref/index.html b/files/fr/web/html/global_attributes/itemref/index.html index 789a1a7502..5942220cc7 100644 --- a/files/fr/web/html/global_attributes/itemref/index.html +++ b/files/fr/web/html/global_attributes/itemref/index.html @@ -17,7 +17,9 @@ original_slug: Web/HTML/Attributs_universels/itemref <p>L'attribut <code>itemref</code> peut uniquement être défini sur des éléments pour lesquels un attribut <code>itemscope</code> a été défini.</p> -<p class="note"><strong>Note :</strong> L'attribut <code>itemref</code> ne fait pas partie du modèle de données des micro-données. Il s'agit purement d'une construction syntaxique pour aider les auteurs à annoter une page où les données ne suivent pas une structure arborescente claire.</p> +<div class="note"> + <p><strong>Note :</strong> L'attribut <code>itemref</code> ne fait pas partie du modèle de données des micro-données. Il s'agit purement d'une construction syntaxique pour aider les auteurs à annoter une page où les données ne suivent pas une structure arborescente claire.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -25,7 +27,7 @@ original_slug: Web/HTML/Attributs_universels/itemref <pre class="syntaxbox">itemref</pre> -<h2 class="syntaxbox" id="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <h3 id="HTML">HTML</h3> diff --git a/files/fr/web/html/global_attributes/itemscope/index.html b/files/fr/web/html/global_attributes/itemscope/index.html index 741ea904ed..b09fa56d2b 100644 --- a/files/fr/web/html/global_attributes/itemscope/index.html +++ b/files/fr/web/html/global_attributes/itemscope/index.html @@ -82,7 +82,7 @@ Directions: <br> <td>itemprop</td> <td>image:</td> <td> - <div class="jyrRxf-eEDwDf jcd3Mb">https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</div> + https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg </td> </tr> <tr> @@ -128,8 +128,7 @@ Directions: <br> <tr> <td>itemprop</td> <td>recipeInstructions:</td> - <td> - <div class="jyrRxf-eEDwDf jcd3Mb">1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .</div> + <td>1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples . </td> </tr> <tr> @@ -180,7 +179,7 @@ Directions: <br> </table> <div class="note"> -<p><strong>Note</strong> : Pour extraire des micro-données d'un document HTML, vous pouvez utiliser <a href="https://developers.google.com/structured-data/testing-tool/">l'outil d'extraction de Google pour les micro-données.</a> Vous pouvez par exemple utiliser le document HTML précédent.</p> +<p><strong>Note :</strong> Pour extraire des micro-données d'un document HTML, vous pouvez utiliser <a href="https://developers.google.com/structured-data/testing-tool/">l'outil d'extraction de Google pour les micro-données.</a> Vous pouvez par exemple utiliser le document HTML précédent.</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/html/global_attributes/lang/index.html b/files/fr/web/html/global_attributes/lang/index.html index e11a25d00d..8bb1022cd3 100644 --- a/files/fr/web/html/global_attributes/lang/index.html +++ b/files/fr/web/html/global_attributes/lang/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/lang <div>{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Même lorsque l'attribut <code><strong>lang</strong></code> est défini, il peut ne pas être pris en compte. En effet, l'attribut {{htmlattrxref("xml:lang")}} aura la priorité sur celui-ci.</p> <p>Pour la pseudo-classe CSS {{cssxref(":lang")}}, deux noms de langues invalides sont considérés différents si les noms utilisés sont différents. Par exemple, alors que <code>:lang(fr)</code> permet l'appariement avec les déclarations (valides) <code>lang="fr-BE"</code> ou <code>lang="fr-CH"</code>, un encodage (invalide) comme <code>:lang(xyzzy)</code> ne permet pas l'appariement avec une déclaration (invalide) comme <code>lang="xyzzy-Zorp!"</code>.</p> diff --git a/files/fr/web/html/global_attributes/spellcheck/index.html b/files/fr/web/html/global_attributes/spellcheck/index.html index 00df957f95..b15ac3d517 100644 --- a/files/fr/web/html/global_attributes/spellcheck/index.html +++ b/files/fr/web/html/global_attributes/spellcheck/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/spellcheck <div>{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> - <p>Les valeurs autorisées pour cet attribut sont :</p> <ul> diff --git a/files/fr/web/html/global_attributes/style/index.html b/files/fr/web/html/global_attributes/style/index.html index 225a7c13c6..abebdb3092 100644 --- a/files/fr/web/html/global_attributes/style/index.html +++ b/files/fr/web/html/global_attributes/style/index.html @@ -15,10 +15,8 @@ original_slug: Web/HTML/Attributs_universels/style <div>{{EmbedInteractiveExample("pages/tabbed/attribute-style.html","tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <div class="note"> -<p><strong>Note : </strong>Cet attribut ne doit pas être utilisé à des fins sémantiques. En effet, si toute mise en forme est retirée, toute page doit rester correcte d'un point de vue sémantique. On ne devrait pas, notamment, utiliser cet attribut afin de cacher des informations qui ne seraient pas pertinentes (cela devrait être réalisé avec l'attribut {{htmlattrxref("hidden")}}.</p> +<p><strong>Note :</strong> Cet attribut ne doit pas être utilisé à des fins sémantiques. En effet, si toute mise en forme est retirée, toute page doit rester correcte d'un point de vue sémantique. On ne devrait pas, notamment, utiliser cet attribut afin de cacher des informations qui ne seraient pas pertinentes (cela devrait être réalisé avec l'attribut {{htmlattrxref("hidden")}}.</p> </div> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/html/global_attributes/tabindex/index.html b/files/fr/web/html/global_attributes/tabindex/index.html index b6d50755bd..9e0bbf1b3c 100644 --- a/files/fr/web/html/global_attributes/tabindex/index.html +++ b/files/fr/web/html/global_attributes/tabindex/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/tabindex <div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Cet attribut peut prendre l'une des valeurs suivantes :</p> <ul> @@ -27,12 +25,12 @@ original_slug: Web/HTML/Attributs_universels/tabindex </li> <li><code>0</code> : l'élément peut capturer le focus et être atteint via la navigation au clavier, cependant son ordre relatif est défini par la plateforme, généralement selon l'ordre des éléments du DOM ; <div class="warning"> - <p><strong>Attention !</strong> Le positionnement CSS n'aura pas d'impact sur le <code>taborder</code>. Le positionnement n'a qu'un impact visuel, l'ordre des tabulations correspond à l'ordre du DOM.</p> + <p><strong>Attention :</strong> Le positionnement CSS n'aura pas d'impact sur le <code>taborder</code>. Le positionnement n'a qu'un impact visuel, l'ordre des tabulations correspond à l'ordre du DOM.</p> </div> </li> <li>Une valeur positive : l'élément peut capturer le focus et peut être atteint via la navigation au clavier, l'ordre relatif dans la navigation est défini par la valeur de l'attribut. Les navigations seront parcourues dans l'ordre croissant. <div class="warning"> - <p><strong>Attention !</strong> Il n'est pas recommandé de fournir des valeurs positives pour les éléments car cela peut être source de confusion, notamment pour les personnes qui utilisent des technologies d'assistance. Il est préférable d'organiser les éléments dans un ordre correct au niveau du DOM.</p> + <p><strong>Attention :</strong> Il n'est pas recommandé de fournir des valeurs positives pour les éléments car cela peut être source de confusion, notamment pour les personnes qui utilisent des technologies d'assistance. Il est préférable d'organiser les éléments dans un ordre correct au niveau du DOM.</p> </div> </li> </ul> diff --git a/files/fr/web/html/global_attributes/title/index.html b/files/fr/web/html/global_attributes/title/index.html index b9b4a0ad96..ccd0ef2b45 100644 --- a/files/fr/web/html/global_attributes/title/index.html +++ b/files/fr/web/html/global_attributes/title/index.html @@ -15,8 +15,6 @@ original_slug: Web/HTML/Attributs_universels/title <div>{{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>On le trouve généralement utilisé pour :</p> <ul> diff --git a/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html b/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html index a7b19f1bbc..817e5996bb 100644 --- a/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html +++ b/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html @@ -37,7 +37,7 @@ original_slug: Web/HTML/Attributs_universels/x-ms-acceleratorkey <li><code>"Ctrl+; then K"</code> (cf. <a href="https://help.manuscript.com/7558/fogbugz-keyboard-shortcuts#For_Your_Server_or_non-Ocelot_Keyboard_Shortcuts">FogBugz’s old keyboard mode</a>). Une approche plus compliquée mais qui ne remplace pas les raccourcis clavier fournis par le navigateur ou le système d'exploitation.</li> </ul> -<h2 id="See_Also" name="See_Also">Voir aussi</h2> +<h2 id="See_Also">Voir aussi</h2> <ul> <li><a href="/fr/docs/Mozilla/Tech/XUL/Propri%C3%A9t%C3%A9s/accessKey">L'attribut universel <code>accesskey</code></a></li> diff --git a/files/fr/web/html/global_attributes/x-ms-format-detection/index.html b/files/fr/web/html/global_attributes/x-ms-format-detection/index.html index b6d12e24e9..8218568bf7 100644 --- a/files/fr/web/html/global_attributes/x-ms-format-detection/index.html +++ b/files/fr/web/html/global_attributes/x-ms-format-detection/index.html @@ -54,7 +54,7 @@ original_slug: Web/HTML/Attributs_universels/x-ms-format-detection <p>Dans cet exemple, les numéros de téléphone conservent la mise en forme tant que la zone d'affichage (<em>viewport</em>) est moins large que 1024 pixels.</p> -<h2 id="See_Also" name="See_Also">Voir aussi</h2> +<h2 id="See_Also">Voir aussi</h2> <ul> <li><a href="/fr/docs/Web/API/Microsoft_Extensions">Les extensions spécifiques à Microsoft</a></li> diff --git a/files/fr/web/html/index.html b/files/fr/web/html/index.html index 05eccb44b5..b9b45a43ae 100644 --- a/files/fr/web/html/index.html +++ b/files/fr/web/html/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML --- <div>{{HTMLSidebar}}</div> -<p class="summary"><strong>HTML</strong> signifie « <em>HyperText Markup Language</em> » 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 (<a href="/fr/docs/Web/CSS">CSS</a>) et/ou ses fonctionnalités interactives (<a href="/fr/docs/Web/JavaScript">JavaScript</a>).</p> +<p><strong>HTML</strong> signifie « <em>HyperText Markup Language</em> » 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 (<a href="/fr/docs/Web/CSS">CSS</a>) et/ou ses fonctionnalités interactives (<a href="/fr/docs/Web/JavaScript">JavaScript</a>).</p> <p>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 <i>web</i> 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.</p> @@ -37,7 +37,7 @@ translation_of: Web/HTML <p>Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p> - <p><a class="button primary" href="/fr/docs/Learn/Front-end_web_developer">Commencer</a> + <p><a href="/fr/docs/Learn/Front-end_web_developer">Commencer</a> </p> </div> diff --git a/files/fr/web/html/inline_elements/index.html b/files/fr/web/html/inline_elements/index.html index 823dc1dd6e..541c51b8c2 100644 --- a/files/fr/web/html/inline_elements/index.html +++ b/files/fr/web/html/inline_elements/index.html @@ -13,9 +13,9 @@ tags: translation_of: Web/HTML/Inline_elements original_slug: Web/HTML/Éléments_en_ligne --- -<p class="summary">Les éléments HTML (<strong>Hypertext Markup Language</strong>) étaient historiquement catégorisés comme des éléments de type « bloc » (<i>block</i> en anglais) ou de type « en ligne » (<i>inline</i> 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 <a href="/fr/docs/Web/CSS/CSS_Flow_Layout"><i>Flow Layout</i></a> 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 <a href="/fr/docs/Web/HTML/Block-level_elements">éléments de bloc</a>.</p> +<p>Les éléments HTML (<strong>Hypertext Markup Language</strong>) étaient historiquement catégorisés comme des éléments de type « bloc » (<i>block</i> en anglais) ou de type « en ligne » (<i>inline</i> 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 <a href="/fr/docs/Web/CSS/CSS_Flow_Layout"><i>Flow Layout</i></a> 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 <a href="/fr/docs/Web/HTML/Block-level_elements">éléments de bloc</a>.</p> -<div class="notecard note"> +<div class="note"> <p><strong>Note :</strong> Un élément en ligne ne commence pas sur une nouvelle ligne et prend uniquement la largeur qui lui est nécessaire.</p> </div> @@ -39,10 +39,7 @@ ligne.</p></pre> <p>{{EmbedLiveSample("Inline", "", 120)}}</p> -<div class="hidden"> -<p>Contenu masqué pour la lecture : cette feuille de style CSS est également utilisée :</p> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { margin: 0; padding: 4px; border: 1px solid #333; @@ -51,7 +48,6 @@ ligne.</p></pre> .highlight { background-color:#ee3; }</pre> -</div> <h3 id="Block-level">Élément de bloc</h3> @@ -61,10 +57,7 @@ ligne.</p></pre> son arrière-plan est coloré afin d'illustrer la zone couverte par cet élément de bloc.</p></pre> -<div class="hidden"> -<p>Contenu masqué pour la lecture : cette feuille de style CSS est également utilisée :</p> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { margin: 0; padding: 4px; border: 1px solid #333; @@ -73,7 +66,6 @@ bloc.</p></pre> .highlight { background-color:#ee3; }</pre> -</div> <p>Et voici le résultat qu'on obtient :</p> diff --git a/files/fr/web/html/link_types/index.html b/files/fr/web/html/link_types/index.html index 0ed90a4804..8e06e6866b 100644 --- a/files/fr/web/html/link_types/index.html +++ b/files/fr/web/html/link_types/index.html @@ -12,7 +12,7 @@ original_slug: Web/HTML/Types_de_lien --- <div>{{HTMLSidebar}}</div> -<p class="summary">En HTML, les types de lien indiquent la relation entre deux documents, reliés ensemble grâce à un élément <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> ou <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>.</p> +<p>En HTML, les types de lien indiquent la relation entre deux documents, reliés ensemble grâce à un élément <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> ou <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>.</p> <table class="standard-table"> <caption>Liste des types de lien HTML et leur signification</caption> @@ -326,12 +326,12 @@ original_slug: Web/HTML/Types_de_lien </tr> <tr> <td>{{SpecName("HTML3.2", "#link", "<link>")}}</td> - <td><span class="spec-obsolete">Obsolete</span></td> + <td>Obsolete</td> <td>Ajout de <code>top</code>, <code>contents</code>, <code>index</code>, <code>glossary</code>, <code>copyright</code>, <code>next</code>, <code>previous</code>, <code>help</code> et <code>search</code>.</td> </tr> <tr> <td>{{RFC(1866, "HTML 2.0")}}</td> - <td><span class="spec-obsolete">Obsolete</span></td> + <td>Obsolete</td> <td>Définition initiale.</td> </tr> </tbody> diff --git a/files/fr/web/html/link_types/noopener/index.html b/files/fr/web/html/link_types/noopener/index.html index 90d47ba83c..96771dbb1c 100644 --- a/files/fr/web/html/link_types/noopener/index.html +++ b/files/fr/web/html/link_types/noopener/index.html @@ -1,5 +1,5 @@ --- -title: 'Types de liens : noopener' +title: 'Types de liens : noopener' slug: Web/HTML/Link_types/noopener browser-compat: html.elements.a.rel.noopener translation_of: 'Web/HTML/Link_types/noopener' @@ -10,8 +10,8 @@ translation_of: 'Web/HTML/Link_types/noopener' <p>Veuillez noter que lorsque <code>noopener</code> est utilisé, les noms de cibles non vides et différents de <code>_top</code>, <code>_self</code> et <code>_parent</code> sont tous traités en tant que <code>_blank</code> pour déterminer si le lien doit s'ouvrir ou non dans un nouvel onglet/fenêtre.</p> -<div class="notecard note"> - <p><strong>Note :</strong> l'utilisation de <code>target="_blank"</code> sur des éléments <code><a></code> fournit désormais implicitement le même comportement pour l'attribut <code>rel</code> que si l'on avait utilisé <code>rel="noopener"</code>, c'est à dire l'absence de mise en place de <code>window.opener</code>. Voir la <a href="/fr/docs/Web/HTML/Element/a#browser_compatibility">compatibilité navigateur</a> pour plus d'informations sur l'implémentation actuelle dans les navigateurs.</p> +<div class="note"> + <p><strong>Note :</strong> l'utilisation de <code>target="_blank"</code> sur des éléments <code><a></code> fournit désormais implicitement le même comportement pour l'attribut <code>rel</code> que si l'on avait utilisé <code>rel="noopener"</code>, c'est à dire l'absence de mise en place de <code>window.opener</code>. Voir la <a href="/fr/docs/Web/HTML/Element/a#browser_compatibility">compatibilité navigateur</a> pour plus d'informations sur l'implémentation actuelle dans les navigateurs.</p> </div> <h2 id="specifications">Spécifications</h2> diff --git a/files/fr/web/html/link_types/preload/index.html b/files/fr/web/html/link_types/preload/index.html index 3de13453b6..6a5c4dd6df 100644 --- a/files/fr/web/html/link_types/preload/index.html +++ b/files/fr/web/html/link_types/preload/index.html @@ -78,11 +78,11 @@ translation_of: 'Web/HTML/Link_types/preload' </ul> <div class="note"> - <p><strong>Note :</strong> le préchargement de l'élément <code>video</code> est inclut dans la spécification <i lang="en">Preload</i> mais n'est pas encore implémenté par les navigateurs.</p> + <p><strong>Note :</strong> le préchargement de l'élément <code>video</code> est inclut dans la spécification <i lang="en">Preload</i> mais n'est pas encore implémenté par les navigateurs.</p> </div> <div class="note"> -<p><strong>Note :</strong> pour davantage de détails sur ces valeurs et sur la façon dont la spécification <i lang="en">Preload</i> prévoit de les traiter, consultez <a href="https://w3c.github.io/preload/#link-element-extensions"><i lang="en">link element extensions</i> (en anglais)</a>. Notez également que la liste complète des valeurs acceptées par l'attribut <code>as</code> est déterminé par la spécification <i lang="en">Fetch</i> — voir la spécification <a href="https://fetch.spec.whatwg.org/#concept-request-destination"><i lang="en">request destinations</i> (en anglais)</a>.</p> +<p><strong>Note :</strong> pour davantage de détails sur ces valeurs et sur la façon dont la spécification <i lang="en">Preload</i> prévoit de les traiter, consultez <a href="https://w3c.github.io/preload/#link-element-extensions"><i lang="en">link element extensions</i> (en anglais)</a>. Notez également que la liste complète des valeurs acceptées par l'attribut <code>as</code> est déterminé par la spécification <i lang="en">Fetch</i> — voir la spécification <a href="https://fetch.spec.whatwg.org/#concept-request-destination"><i lang="en">request destinations</i> (en anglais)</a>.</p> </div> <h2 id="including_a_mime_type">Inclure un type MIME</h2> diff --git a/files/fr/web/html/microdata/index.html b/files/fr/web/html/microdata/index.html index cd51409509..aecd248fbe 100644 --- a/files/fr/web/html/microdata/index.html +++ b/files/fr/web/html/microdata/index.html @@ -12,7 +12,7 @@ tags: translation_of: Web/HTML/Microdata original_slug: Web/HTML/Microdonnées --- -<p class="summary">Les microdonnées (<em>microdata</em>) sont une partie de la spécification HTML du <a href="/fr/docs/Glossary/WHATWG">WHATWG</a> qui est utilisée afin de fournir des métadonnées sur le contenu des pages web. Les moteurs de recherche, les robots (<em>crawlers</em>) d'analyse peuvent traiter les microdonnées d'une page web pour améliorer l'expérience de navigation. Les moteurs de recherches peuvent tirer parti des informations pour obtenir une meilleure pertinence. Les microdonnées sont structurées grâce à un vocabulaire permettant de décrire des objets qui sont des groupes de paires de noms/valeurs. Le but des microdonnées est de faciliter l'annotation des éléments HTML et d'être plus simple à utiliser que RDFa ou les microformats.</p> +<p>Les microdonnées (<em>microdata</em>) sont une partie de la spécification HTML du <a href="/fr/docs/Glossary/WHATWG">WHATWG</a> qui est utilisée afin de fournir des métadonnées sur le contenu des pages web. Les moteurs de recherche, les robots (<em>crawlers</em>) d'analyse peuvent traiter les microdonnées d'une page web pour améliorer l'expérience de navigation. Les moteurs de recherches peuvent tirer parti des informations pour obtenir une meilleure pertinence. Les microdonnées sont structurées grâce à un vocabulaire permettant de décrire des objets qui sont des groupes de paires de noms/valeurs. Le but des microdonnées est de faciliter l'annotation des éléments HTML et d'être plus simple à utiliser que RDFa ou les microformats.</p> <p>Les microdonnées sont des groupes de paires nom-valeur. Ces groupes sont appelés des objets (<em>items</em>) et chaque paire nom-valeur est une propriété. Les objets et les propriétés s'inscrivent dans des éléments HTML classiques :</p> @@ -25,7 +25,7 @@ original_slug: Web/HTML/Microdonnées <p>Google et les autres moteurs de recherches participent au vocabulaire défini par <a href="https://schema.org/">schema.org</a> pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple <code><a href="https://schema.org/MusicEvent">MusicEvent</a></code> indique un événement musical dont les propriétés <code><a href="https://schema.org/startDate">startDate</a></code> et <code><a href="https://schema.org/location">location</a></code> utilisées pour définir les détails du concert. Dans ce cas, l'URL <code><a href="https://schema.org/MusicEvent">https://schema.org/MusicEvent</a></code> sera l'URL utilisée pour l'attribut <code>itemtype</code> et les propriétés <code>startDate</code> et <code>location</code> seront les propriétés utilisées, définies par <code><a href="https://schema.org/MusicEvent">https://schema.org/MusicEvent</a></code>.</p> -<div class="notecard note"> +<div class="note"> <p><strong>Note :</strong> Pour en savoir plus sur les attributs <code>itemtype</code>, consultez le site <a href="http://schema.org/Thing">http://schema.org/Thing</a>.</p> </div> diff --git a/files/fr/web/html/microformats/index.html b/files/fr/web/html/microformats/index.html index dee6a2c39f..cfa423e69c 100644 --- a/files/fr/web/html/microformats/index.html +++ b/files/fr/web/html/microformats/index.html @@ -12,7 +12,7 @@ tags: - Search translation_of: Web/HTML/microformats --- -<p class="summary">Les <a href="https://microformats.org/"><dfn>microformats</dfn></a> (parfois abrégés <strong>μF</strong>) sont des normes utilisées pour intégrer la sémantique et les données structurées dans le HTML, et fournir une API à utiliser par les moteurs de recherche, les agrégateurs et autres outils. Ces modèles minimaux de HTML sont utilisés pour marquer des entités allant d'informations fondamentales à des informations spécifiques à un domaine, telles que des personnes, des organisations, des événements et des lieux. Les microformats utilisent des vocabulaires de soutien pour décrire les objets et des paires nom-valeur pour attribuer des valeurs à leurs propriétés. Les propriétés sont transportées dans des attributs de classe qui peuvent être ajoutés à tout élément HTML, tandis que les valeurs des données réutilisent le contenu des éléments HTML et les attributs sémantiques. Microformats2 est une mise à jour de microformats qui offre un moyen plus simple d'annoter la syntaxe structurée et les vocabulaires HTML que les approches précédentes utilisant RDFa et microdata qui nécessitent l'apprentissage de nouveaux attributs.</p> +<p>Les <a href="https://microformats.org/"><dfn>microformats</dfn></a> (parfois abrégés <strong>μF</strong>) sont des normes utilisées pour intégrer la sémantique et les données structurées dans le HTML, et fournir une API à utiliser par les moteurs de recherche, les agrégateurs et autres outils. Ces modèles minimaux de HTML sont utilisés pour marquer des entités allant d'informations fondamentales à des informations spécifiques à un domaine, telles que des personnes, des organisations, des événements et des lieux. Les microformats utilisent des vocabulaires de soutien pour décrire les objets et des paires nom-valeur pour attribuer des valeurs à leurs propriétés. Les propriétés sont transportées dans des attributs de classe qui peuvent être ajoutés à tout élément HTML, tandis que les valeurs des données réutilisent le contenu des éléments HTML et les attributs sémantiques. Microformats2 est une mise à jour de microformats qui offre un moyen plus simple d'annoter la syntaxe structurée et les vocabulaires HTML que les approches précédentes utilisant RDFa et microdata qui nécessitent l'apprentissage de nouveaux attributs.</p> <p>Les microformats sont pris en charge par tous les principaux moteurs de recherche. Les moteurs de recherche bénéficient grandement d'un accès direct à ces données structurées, car elles leur permettent de comprendre les informations contenues dans les pages Web et de fournir des résultats plus pertinents aux utilisateurs. En plus d'être lisible par les machines, leur format est conçu pour être facilement lu par les humains.</p> @@ -81,7 +81,6 @@ translation_of: Web/HTML/microformats <h4 id="Example_h-card">Exemple de h-card</h4> -<div dir="ltr" style="text-align: left;"> <pre class="brush: html"><p class="h-card"> <img class="u-photo" src="http://example.org/photo.png" alt="" /> <a class="p-name u-url" href="http://example.org">Joe Bloggs</a> @@ -90,7 +89,6 @@ translation_of: Web/HTML/microformats <span class="p-locality">Reykjavík</span> <span class="p-country-name">Iceland</span> </p></pre> -</div> <table class="standard-table"> <tbody> @@ -164,7 +162,7 @@ translation_of: Web/HTML/microformats }] }</pre> -<div class="notecard note"> +<div class="note"> <p><strong>Note :</strong> Le h-card imbriqué récupère des valeurs implicites pour <code>name</code> et <code>url</code>.</p> </div> @@ -270,7 +268,6 @@ translation_of: Web/HTML/microformats <h4 id="Example_h-feed">Example h-feed</h4> -<div dir="ltr" style="text-align: left;"> <pre class="brush: html"><div class="h-feed"> <h1 class="p-name">Microformats Blogs</h1> <article class="h-entry"> @@ -282,7 +279,6 @@ translation_of: Web/HTML/microformats <div class="e-content"> <p>Blah blah blah</p> </div> </article> </div></pre> -</div> <h4 id="Properties_2">Propriétés</h4> @@ -320,7 +316,6 @@ translation_of: Web/HTML/microformats <p>Le microformat <code>h-event</code> permet de représenter des évènements.</p> -<div dir="ltr" style="text-align: left;"> <pre class="brush: html"><div class="h-event"> <h1 class="p-name">Microformats Meetup</h1> <p>From @@ -329,7 +324,6 @@ translation_of: Web/HTML/microformats at <span class="p-location">Some bar in SF</span></p> <p class="p-summary">Get together and discuss all things microformats-related.</p> </div></pre> -</div> <h4 id="Properties_3">Propriétés</h4> diff --git a/files/fr/web/html/quirks_mode_and_standards_mode/index.html b/files/fr/web/html/quirks_mode_and_standards_mode/index.html index 375a7686fa..048f15b862 100644 --- a/files/fr/web/html/quirks_mode_and_standards_mode/index.html +++ b/files/fr/web/html/quirks_mode_and_standards_mode/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode --- <p>{{HTMLRef}}</p> -<p class="summary">Par le passé, les pages web étaient souvent écrites sous deux versions : une destinée à Netscape Navigator et l'autre à Microsoft Internet Explorer. Lorsque les standards du Web sont apparus avec le W3C, les navigateurs ne pouvaient pas simplement commencer à les utiliser car leur mise en place rendrait inutilisable la plupart des sites web existant. Les navigateurs ont alors introduit deux modes afin de traiter les sites respectants les standards des autres sites historiques.</p> +<p>Par le passé, les pages web étaient souvent écrites sous deux versions : une destinée à Netscape Navigator et l'autre à Microsoft Internet Explorer. Lorsque les standards du Web sont apparus avec le W3C, les navigateurs ne pouvaient pas simplement commencer à les utiliser car leur mise en place rendrait inutilisable la plupart des sites web existant. Les navigateurs ont alors introduit deux modes afin de traiter les sites respectants les standards des autres sites historiques.</p> <p>Il existe aujourd'hui trois modes utilisés par les moteurs de rendu des navigateurs web : le mode <i>quirks</i>, le mode quasi-standard et le mode standard total. En <strong>mode <i>quirks</i></strong>, le moteur de mise en page émule le comportement non-standard de Navigator 4 et d'Internet Explorer 5. Ce mode permet de prendre en charge les sites web rédigés avant l'adoption généralisée des standards web. En <strong>mode standard total</strong>, le comportement du navigateur est entièrement (aux bugs près) celui décrit par les spécifications HTML et CSS. En <strong>mode quasi-standard</strong>, très peu de déviations sont implémentées.</p> diff --git a/files/fr/web/html/reference/index.html b/files/fr/web/html/reference/index.html index 01aa0aa9e6..9ede740ea8 100644 --- a/files/fr/web/html/reference/index.html +++ b/files/fr/web/html/reference/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTML/Reference --- <div>{{HTMLSidebar}}</div> -<p class="summary">Cette référence <a href="/fr/docs/Web/HTML">HTML</a> décrit l'ensemble des <strong>éléments</strong> et des <strong>attributs</strong> qui peuvent être utilisés en HTML, y compris les <strong>attributs universels</strong> qui peuvent s'appliquer sur tous les éléments.</p> +<p>Cette référence <a href="/fr/docs/Web/HTML">HTML</a> décrit l'ensemble des <strong>éléments</strong> et des <strong>attributs</strong> qui peuvent être utilisés en HTML, y compris les <strong>attributs universels</strong> qui peuvent s'appliquer sur tous les éléments.</p> <dl> <dt><a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a></dt> diff --git a/files/fr/web/html/viewport_meta_tag/index.html b/files/fr/web/html/viewport_meta_tag/index.html index 764a8cb910..02d55f1aec 100644 --- a/files/fr/web/html/viewport_meta_tag/index.html +++ b/files/fr/web/html/viewport_meta_tag/index.html @@ -10,7 +10,7 @@ tags: - viewport translation_of: Web/HTML/Viewport_meta_tag --- -<p class="summary">Le <a href="/fr/docs/Glossary/Viewport"><i>viewport</i></a> du navigateur est la zone de la fenêtre dans laquelle le contenu web peut être vu. Souvent, cette zone n'a pas la même taille que la page rendue, auquel cas le navigateur fournit des barres de défilement pour que l'utilisateur et l'utilisatrice puissent faire défiler la page et accéder à tout le contenu.</p> +<p>Le <a href="/fr/docs/Glossary/Viewport"><i>viewport</i></a> du navigateur est la zone de la fenêtre dans laquelle le contenu web peut être vu. Souvent, cette zone n'a pas la même taille que la page rendue, auquel cas le navigateur fournit des barres de défilement pour que l'utilisateur et l'utilisatrice puissent faire défiler la page et accéder à tout le contenu.</p> <h2 id="Background">Contexte</h2> @@ -36,8 +36,8 @@ translation_of: Web/HTML/Viewport_meta_tag <p>La propriété <code>initial-scale</code> contrôle le niveau de zoom lors du premier chargement de la page. Les propriétés <code>maximum-scale</code>, <code>minimum-scale</code> et <code>user-scalable</code> contrôlent la manière dont les utilisateurs et utilisatrices sont autorisé·e·s à zoomer ou dézoomer la page.</p> -<div class="notecard warning"> - <p>L'utilisation du <code>user-scalable=no</code> peut causer des problèmes d'accessibilité aux utilisateurs et utilisatrices ayant des déficiences visuelles telles qu'une vision faible.</p> +<div class="warning"> + <p><strong>Attention :</strong> L'utilisation du <code>user-scalable=no</code> peut causer des problèmes d'accessibilité aux utilisateurs et utilisatrices ayant des déficiences visuelles telles qu'une vision faible.</p> </div> <h2 id="A_pixel_is_not_a_pixel">Un pixel n'est pas un pixel</h2> |