Merge branch 'main' into main

files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md

@@ -63,11 +63,13 @@ Maintenant, nous allons vous montrer comment publier facilement votre site via l
    Également, cochez _Initialize this repository with a README_, puis cliquez sur _Create repository_.![](github-create-repo.png)
 4. Ensuite, glissez-déposez le contenu du dossier de votre site Web dans votre référentiel, puis cliquez sur _Commit changes_.
 
-   > **Note :** Assurez-vous que votre dossier comporte bien un fichier _index.html._
+   > [!NOTE]
+   > Assurez-vous que votre dossier comporte bien un fichier _index.html._
 
 5. Maintenant, naviguez jusqu'à _username_.github.io pour voir votre site web en ligne. Par exemple, pour le nom d'utilisateur _chrisdavidmills_, allez à [chrisdavidmills.github.io](https://chrisdavidmills.github.io/).
 
-   > **Note :** Cela peut prendre quelques minutes avant que votre site web soit actif. S'il ne fonctionne pas immédiatement, attendez quelques minutes, puis essayez à nouveau.
+   > [!NOTE]
+   > Cela peut prendre quelques minutes avant que votre site web soit actif. S'il ne fonctionne pas immédiatement, attendez quelques minutes, puis essayez à nouveau.
 
 Pour en savoir plus, voyez [GitHub Pages Help](https://docs.github.com/en/github/working-with-github-pages/getting-started-with-github-pages).
 

files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md

@@ -18,15 +18,17 @@ Pour commencer, posez-vous ces questions :
 2. **Quelles informations vais-je présenter sur le sujet ?** Écrivez un titre et quelques paragraphes, et trouvez une image que vous aimeriez mettre sur votre page.
 3. **Quelle sera l'apparence de mon site web,** en simple termes de survol ? Quelle sera la couleur de l'arrière plan ? Quelle sorte de police de caractères est appropriée : formelle, dessin animé, grasse et lourde, subtile ?
 
-> **Note :** Les projets complexes nécessitent des lignes directrices (guidelines) détaillées précisant tout : couleurs, polices, espacement entre éléments de la page, style d'écriture adapté, etc. Ceci est parfois appelé un guide de conception ou une charte graphique, vous pouvez en voir un exemple dans [Firefox OS Guidelines](https://www.mozilla.org/fr/styleguide/products/firefox-os/).
+> [!NOTE]
+> Les projets complexes nécessitent des lignes directrices (guidelines) détaillées précisant tout : couleurs, polices, espacement entre éléments de la page, style d'écriture adapté, etc. Ceci est parfois appelé un guide de conception ou une charte graphique, vous pouvez en voir un exemple dans [Firefox OS Guidelines](https://www.mozilla.org/fr/styleguide/products/firefox-os/).
 
 ## Esquisse de votre concept
 
 Ensuite, prenez un crayon et du papier et faites une esquisse de l'apparence souhaitée pour votre site. Pour une première et simple page web, il n'y a pas beaucoup à esquisser, mais vous devriez prendre l'habitude de le faire dès maintenant. Cela aide vraiment — vous n'avez pas à être Van Gogh !
 
 ![](website-drawing-scan.png)
 
-> **Note :** Même sur les sites web réels et complexes, l'équipe de conception commence par faire des esquisses sur papier, puis des maquettes numériques en utilisant un éditeur graphique ou des techniques Web.
+> [!NOTE]
+> Même sur les sites web réels et complexes, l'équipe de conception commence par faire des esquisses sur papier, puis des maquettes numériques en utilisant un éditeur graphique ou des techniques Web.
 >
 > Les équipes Web intègrent souvent un concepteur graphique et {{Glossary("UX", "user-experience")}} (UX). Les concepteurs graphiques, bien sûr, regroupent les visuels du site web. Les concepteurs UX ont un rôle un peu plus abstrait qui consiste à s'occuper de la manière dont les utilisateurs découvriront et interagiront avec le site web.
 
@@ -56,7 +58,8 @@ Pour choisir une image, allez sur [Google Images](https://www.google.com/imghp?g
 
 ![](Screenshot%20from%202014-11-04%2015:20:48.png)
 
-> **Note :** La plupart des images sur le Web, dont celles dans Google Images, sont protégées. Pour réduire votre probabilité de commettre une violation de droits d'auteur, vous pouvez utiliser le filtre de licence de Google. Tout simplement 1) cliquez sur **Outils de recherche**, puis 2) **Droits d'usage** :
+> [!NOTE]
+> La plupart des images sur le Web, dont celles dans Google Images, sont protégées. Pour réduire votre probabilité de commettre une violation de droits d'auteur, vous pouvez utiliser le filtre de licence de Google. Tout simplement 1) cliquez sur **Outils de recherche**, puis 2) **Droits d'usage** :
 >
 > ![](Screenshot%20from%202014-11-04%2014:27:45.png)
 

files/fr/learn/html/cheatsheet/index.md

@@ -7,7 +7,8 @@ slug: Learn/HTML/Cheatsheet
 
 Lorsqu'on utilise {{Glossary("HTML")}}, une antisèche, une page rapide et récapitulative (_cheatsheet_) peut s'avérer plutôt pratique pour se souvenir rapidement de quelle balise HTML utiliser dans quel cas. MDN possède également une [documentation HTML exhaustive](/fr/docs/Web/HTML/Element) ainsi que différents [tutoriels HTML détaillés](/fr/Apprendre/HTML/Comment). Toutefois, dans la plupart des cas, il suffit juste d'une rapide vérification afin de pouvoir continuer. Cet article, sous la forme d'une antisèche synthétique, est là pour fournir des exemples de codes concis pour les usages les plus fréquents des éléments les plus utilisés.
 
-> **Note :** Les balises HTML doivent en premier lieu être utilisées pour leur sémantique et non pour leur apparence. Il est toujours possible de modifier la mise en forme d'une balise donnée grâce à {{Glossary("CSS")}}. Aussi, quand vous utilisez HTML, soyez concentré-e sur la signification plutôt que sur l'apparence finale.
+> [!NOTE]
+> Les balises HTML doivent en premier lieu être utilisées pour leur sémantique et non pour leur apparence. Il est toujours possible de modifier la mise en forme d'une balise donnée grâce à {{Glossary("CSS")}}. Aussi, quand vous utilisez HTML, soyez concentré-e sur la signification plutôt que sur l'apparence finale.
 
 ## Éléments en ligne
 

files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md

@@ -32,7 +32,8 @@ Dans cet article, nous verrons comment construire une carte imagée cliquable en
   </tbody>
 </table>
 
-> **Attention :** Cet article n'aborde que les cartes générées côté client. Les cartes de zones générées côté serveur ne doivent pas être utilisée car elles ne sont accessibles qu'aux utilisateurs ayant des souris.
+> [!WARNING]
+> Cet article n'aborde que les cartes générées côté client. Les cartes de zones générées côté serveur ne doivent pas être utilisée car elles ne sont accessibles qu'aux utilisateurs ayant des souris.
 
 ## Les cartes imagées cliquables et leurs inconvénients
 

files/fr/learn/html/howto/define_terms_with_html/index.md

@@ -53,7 +53,8 @@ On peut procéder de cette façon avec HTML. En revanche, HTML ne gère pas l'as
 </p>
 ```
 
-> **Note :** On utilise également parfois le gras pour mettre en avant du contenu. Le gras, en tant que tel, est un concept qui n'appartient pas à HTML mais à la mise en forme. En revanche, pour mettre en avant (utiliser une emphase), il existe [des éléments HTML tout indiqués](/fr/Apprendre/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important).
+> [!NOTE]
+> On utilise également parfois le gras pour mettre en avant du contenu. Le gras, en tant que tel, est un concept qui n'appartient pas à HTML mais à la mise en forme. En revanche, pour mettre en avant (utiliser une emphase), il existe [des éléments HTML tout indiqués](/fr/Apprendre/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important).
 
 ### Cas spécifique : les abréviations
 
@@ -67,7 +68,8 @@ En ce qui concerne les abréviations, il est préférable [de les identifier sé
 </p>
 ```
 
-> **Note :** La spécification HTML [met en avant l'attribut `title`](http://www.w3.org/TR/html/text-level-semantics.html#the-abbr-element) pour expliciter les termes de l'abréviation. Cependant, il reste nécessaire d'utiliser le texte classique pour fournir une explication car le contenu de l'attribut `title` ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également [ce qui est noté dans les spécifications](http://www.w3.org/TR/html/dom.html#attr-title).
+> [!NOTE]
+> La spécification HTML [met en avant l'attribut `title`](http://www.w3.org/TR/html/text-level-semantics.html#the-abbr-element) pour expliciter les termes de l'abréviation. Cependant, il reste nécessaire d'utiliser le texte classique pour fournir une explication car le contenu de l'attribut `title` ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également [ce qui est noté dans les spécifications](http://www.w3.org/TR/html/dom.html#attr-title).
 
 ### Améliorer l'accessibilité
 
@@ -90,7 +92,8 @@ Les technologies d'assistance à la navigation pourront tirer parti de cet attri
 
 Les listes de descriptions sont des listes de termes associés à leur description (par exemple une liste de définition, des entrées d'un dictionnaire, une FAQ, des paires de clés-valeurs, etc.).
 
-> **Note :** Les listes de descriptions [ne doivent pas être utilisées pour retranscrire des dialogues](http://www.w3.org/TR/html5/grouping-content.html#the-dl-element). En effet, la conversation ne décrit pas les différents interlocuteurs. Voici [quelques recommandations pour retranscrire un dialogue dans un document web](http://www.w3.org/TR/html5/common-idioms.html#conversations).
+> [!NOTE]
+> Les listes de descriptions [ne doivent pas être utilisées pour retranscrire des dialogues](http://www.w3.org/TR/html5/grouping-content.html#the-dl-element). En effet, la conversation ne décrit pas les différents interlocuteurs. Voici [quelques recommandations pour retranscrire un dialogue dans un document web](http://www.w3.org/TR/html5/common-idioms.html#conversations).
 
 Les termes à décrire sont placés dans des éléments {{htmlelement("dt")}} et la description, qui suit immédiatement, est placée dans un ou plusieurs éléments {{htmlelement("dd")}}. Enfin, l'ensemble de la liste est placé au sein d'un élément {{htmlelement("dl")}}.
 
@@ -117,7 +120,8 @@ Voici un exemple simple qui dresse une liste de descriptions de plats :
 </dl>
 ```
 
-> **Note :** La structure de base qu'on voit dans cet exemple alterne les termes (`<dt>`) et leurs descriptions (`<dd>`). Si deux (ou plusieurs) termes apparaissent les uns à la suite des autres, la description qui suit s'appliquera à tout ces termes. Si deux (ou plusieurs) descriptions se suivent, elles s'appliqueront au dernier terme.
+> [!NOTE]
+> La structure de base qu'on voit dans cet exemple alterne les termes (`<dt>`) et leurs descriptions (`<dd>`). Si deux (ou plusieurs) termes apparaissent les uns à la suite des autres, la description qui suit s'appliquera à tout ces termes. Si deux (ou plusieurs) descriptions se suivent, elles s'appliqueront au dernier terme.
 
 ### Améliorer l'aspect visuel
 

files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md

@@ -33,7 +33,8 @@ Dans cet article, nous verrons comment améliorer les pages web en ajoutant du c
 
 {{Glossary("JavaScript")}} est un langage de programmation principalement utilisé côté client et qui peut également être utilisé côté serveur. Il permet entre autres de rendre les pages web interactives. JavaScript offre une myriade de possibilités.
 
-> **Note :** Dans cet article, nous verrons le code HTML nécessaire pour utiliser du code JavaScript. Si vous souhaitez apprendre JavaScript, vous pouvez démarrer par notre article sur [les bases de JavaScript](/fr/Learn/Getting_started_with_the_web/JavaScript_basics). Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter [le Guide JavaScript](/fr/docs/Web/JavaScript/Guide).
+> [!NOTE]
+> Dans cet article, nous verrons le code HTML nécessaire pour utiliser du code JavaScript. Si vous souhaitez apprendre JavaScript, vous pouvez démarrer par notre article sur [les bases de JavaScript](/fr/Learn/Getting_started_with_the_web/JavaScript_basics). Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter [le Guide JavaScript](/fr/docs/Web/JavaScript/Guide).
 
 ## Comment déclencher le code JavaScript depuis le document HTML
 

files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md

@@ -484,7 +484,8 @@ Nous utilisons l'HTML pour structurer nos documents web.
 
 Je pense que le R. Green l'a fait dans la cuisine avec une tronçonneuse.
 
-> **Note :** Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que `<abbr>`, destiné spécifiquement aux acronymes plutôt qu'aux abréviations. Il est cependant tombé en désuétude — il n'était pas aussi bien pris en charge dans les navigateurs que \<abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser \<abbr> à la place.
+> [!NOTE]
+> Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que `<abbr>`, destiné spécifiquement aux acronymes plutôt qu'aux abréviations. Il est cependant tombé en désuétude — il n'était pas aussi bien pris en charge dans les navigateurs que \<abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser \<abbr> à la place.
 
 ### Apprentissage actif&nbsp;: marquer une abréviation
 

files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md

@@ -30,7 +30,8 @@ Les hyperliens sont vraiment importants, ils sont ce qui fait du Web _une toile_
 
 Les hyperliens sont l'une des plus passionnantes innovations que le Web a à offrir. De fait, ils ont été une fonctionnalité du Web depuis le tout début, mais ils sont ce qui fait du Web _une toile_. Les hyperliens permettent de relier des documents à d'autres documents ou ressources, de renvoyer à des parties spécifiques de documents ou de rendre des applications disponibles à une adresse web. À peu près tout contenu web peut être converti en lien, de sorte que cliqué (ou activé autrement), il dirigera le navigateur vers une autre adresse web ([URL](/fr/docs/Glossary/URL)).
 
-> **Note :** Une URL peut pointer vers des fichiers HTML, des fichiers textes, des images, des documents texte, des fichiers vidéo ou audio et tout ce qui peut exister sur le Web. Si le navigateur web ne sait pas comment afficher ou gérer un fichier, il vous demande si vous voulez ouvrir le fichier (dans ce cas, la responsabilité de l'ouverture et de la gestion du fichier incombe à l'application native adéquate sur l'appareil) ou bien télécharger le fichier (auquel cas, vous pouvez essayer de vous en occuper plus tard).
+> [!NOTE]
+> Une URL peut pointer vers des fichiers HTML, des fichiers textes, des images, des documents texte, des fichiers vidéo ou audio et tout ce qui peut exister sur le Web. Si le navigateur web ne sait pas comment afficher ou gérer un fichier, il vous demande si vous voulez ouvrir le fichier (dans ce cas, la responsabilité de l'ouverture et de la gestion du fichier incombe à l'application native adéquate sur l'appareil) ou bien télécharger le fichier (auquel cas, vous pouvez essayer de vous en occuper plus tard).
 
 La page d'accueil de la BBC, par exemple, contient un nombre important de liens pour pointer, non seulement vers de multiples articles d'actualité, mais encore vers d'autres zones du site (fonctionnalité de navigation), des pages d'inscription/de connexion (outils utilisateur·ice) et plus encore.
 
@@ -93,7 +94,8 @@ Le logo du MDN devient donc un lien :
 
 {{EmbedLiveSample('', '100%', 150)}}
 
-> **Note :** Vous en saurez plus sur l'utilisation des images sur le Web dans [un prochain article](/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML).
+> [!NOTE]
+> Vous en saurez plus sur l'utilisation des images sur le Web dans [un prochain article](/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML).
 
 ### Ajouter des informations avec l'attribut `title`
 
@@ -114,7 +116,8 @@ Nous obtenons le résultat suivant et le survol du lien affiche le titre sous fo
 
 {{EmbedLiveSample("", "100%", 150)}}
 
-> **Note :** le `title` d'un lien n'est révélé que lors du survol de la souris, ce qui signifie que les personnes utilisant les commandes clavier pour naviguer dans les pages web auront des difficultés à accéder aux informations de `title`. Si une information de `title` est vraiment importante pour l'utilisation d'une page, alors vous devez la présenter de manière plus accessible, par exemple, en la mettant dans le texte normal.
+> [!NOTE]
+> Le `title` d'un lien n'est révélé que lors du survol de la souris, ce qui signifie que les personnes utilisant les commandes clavier pour naviguer dans les pages web auront des difficultés à accéder aux informations de `title`. Si une information de `title` est vraiment importante pour l'utilisation d'une page, alors vous devez la présenter de manière plus accessible, par exemple, en la mettant dans le texte normal.
 
 ### Apprentissage actif : créez votre propre lien
 
@@ -164,7 +167,8 @@ Il y a aussi deux répertoires dans la racine — `pdfs` et `projects`. Chacun d
   </p>
   ```
 
-> **Note :** Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. `../../../chemin/complexe/vers/mon/fichier.html`.
+> [!NOTE]
+> Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. `../../../chemin/complexe/vers/mon/fichier.html`.
 
 ### Fragments de documents
 
@@ -296,7 +300,8 @@ L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui su
 
 ![Un exemple d'un menu de navigation HTML simple, avec les éléments page d'accueil, images, projets et menu des réseaux sociaux.](navigation-example.png)
 
-> **Note :** Si vous coincez, ou n'êtes pas sûr·e d'avoir bien compris, vous pouvez vérifier le dossier [`navigation-menu-marked-up`](https://github.com/mdn/learning-area/tree/main/html/introduction-to-html/navigation-menu-marked-up) pour voir la réponse correcte.
+> [!NOTE]
+> Si vous coincez, ou n'êtes pas sûr·e d'avoir bien compris, vous pouvez vérifier le dossier [`navigation-menu-marked-up`](https://github.com/mdn/learning-area/tree/main/html/introduction-to-html/navigation-menu-marked-up) pour voir la réponse correcte.
 
 ## Liens de courriel
 
@@ -329,7 +334,8 @@ Voici un exemple incluant `cc` (<i lang="en">carbon copy</i>, pour les destinata
 </a>
 ```
 
-> **Note :** La valeur de chaque champ doit être codée à la façon d'une URL, c'est-à-dire que les caractères non-imprimables (les caractères invisibles tels que les tabulations, les retours chariot et les sauts de page) et les espaces doivent être échappés avec un [encodage-pourcent](https://fr.wikipedia.org/wiki/Encodage-pourcent). Notez également l'utilisation du point d'interrogation (`?`) pour séparer l'URL principale des valeurs de champ et de l'esperluette (&) pour séparer chaque champ dans l'URL `mailto:`. C'est la notation standard des requêtes URL. Voir [la documentation de la méthode HTTP `GET`](/fr/docs/Learn/Forms/Sending_and_retrieving_form_data#la_méthode_get) pour comprendre pourquoi la notation de requête URL est habituellement utilisée.
+> [!NOTE]
+> La valeur de chaque champ doit être codée à la façon d'une URL, c'est-à-dire que les caractères non-imprimables (les caractères invisibles tels que les tabulations, les retours chariot et les sauts de page) et les espaces doivent être échappés avec un [encodage-pourcent](https://fr.wikipedia.org/wiki/Encodage-pourcent). Notez également l'utilisation du point d'interrogation (`?`) pour séparer l'URL principale des valeurs de champ et de l'esperluette (&) pour séparer chaque champ dans l'URL `mailto:`. C'est la notation standard des requêtes URL. Voir [la documentation de la méthode HTTP `GET`](/fr/docs/Learn/Forms/Sending_and_retrieving_form_data#la_méthode_get) pour comprendre pourquoi la notation de requête URL est habituellement utilisée.
 
 Voici quelques autres exemples d'URL `mailto`&nbsp;: