From d596e86a4f13b04981f51d327af257b07e6d21c3 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 14 Nov 2021 14:23:22 +0100 Subject: Prepare Learning Area section for Markdown conversion (#2738) * Remove summary, spans and fonts * Remove notranslate class * Remove ids other than headings * Remove hidden blocks * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * Fix notes * Remove code in pre, sub/sup and some styles * fix dls * fix absolute / english links * fix figures and others * fix other issues from report * Fix other one-off issues excl. imgs * Fix images * Fixes #2842 for Learning area --- .../accessibility_troubleshooting/index.html | 93 +- .../accessibility/css_and_javascript/index.html | 254 +++-- .../index.html | 19 +- files/fr/learn/accessibility/html/index.html | 276 +++-- files/fr/learn/accessibility/index.html | 4 +- files/fr/learn/accessibility/mobile/index.html | 284 +++-- files/fr/learn/accessibility/multimedia/index.html | 227 ++-- .../learn/accessibility/wai-aria_basics/index.html | 102 +- .../accessibility/what_is_accessibility/index.html | 104 +- .../available_text_editors/index.html | 4 +- .../index.html | 26 +- .../common_questions/common_web_layouts/index.html | 21 +- .../design_for_all_types_of_users/index.html | 19 +- .../how_does_the_internet_work/index.html | 22 +- .../how_much_does_it_cost/index.html | 6 +- files/fr/learn/common_questions/index.html | 52 +- .../index.html | 4 +- .../set_up_a_local_testing_server/index.html | 22 +- .../thinking_before_coding/index.html | 24 +- .../upload_files_to_a_web_server/index.html | 28 +- .../common_questions/using_github_pages/index.html | 16 +- .../what_are_browser_developer_tools/index.html | 26 +- .../what_are_hyperlinks/index.html | 12 +- .../what_is_a_domain_name/index.html | 14 +- .../common_questions/what_is_a_url/index.html | 30 +- .../what_is_a_web_server/index.html | 8 +- .../what_is_accessibility/index.html | 7 +- .../what_software_do_i_need/index.html | 16 +- .../building_blocks/a_cool_looking_box/index.html | 10 +- .../advanced_styling_effects/index.html | 57 +- .../backgrounds_and_borders/index.html | 8 +- .../css/building_blocks/box_model_tasks/index.html | 16 +- .../cascade_and_inheritance/index.html | 58 +- .../creating_fancy_letterheaded_paper/index.html | 10 +- .../css/building_blocks/debugging_css/index.html | 78 +- .../fundamental_css_comprehension/index.html | 22 +- .../handling_different_text_directions/index.html | 2 +- files/fr/learn/css/building_blocks/index.html | 32 +- .../building_blocks/overflowing_content/index.html | 4 +- .../selectors/attribute_selectors/index.html | 6 +- .../selectors/combinators/index.html | 28 +- .../learn/css/building_blocks/selectors/index.html | 4 +- .../pseudo-classes_and_pseudo-elements/index.html | 76 +- .../type_class_and_id_selectors/index.html | 38 +- .../building_blocks/sizing_items_in_css/index.html | 6 +- .../css/building_blocks/styling_tables/index.html | 20 +- .../css/building_blocks/the_box_model/index.html | 18 +- .../building_blocks/values_and_units/index.html | 15 +- files/fr/learn/css/css_layout/flexbox/index.html | 54 +- .../learn/css/css_layout/flexbox_skills/index.html | 28 +- files/fr/learn/css/css_layout/floats/index.html | 108 +- .../fundamental_layout_comprehension/index.html | 92 +- files/fr/learn/css/css_layout/grids/index.html | 137 +-- files/fr/learn/css/css_layout/index.html | 9 +- .../learn/css/css_layout/introduction/index.html | 153 +-- .../css_layout/legacy_layout_methods/index.html | 68 +- .../learn/css/css_layout/media_queries/index.html | 100 +- .../css_layout/multiple-column_layout/index.html | 99 +- .../fr/learn/css/css_layout/normal_flow/index.html | 32 +- .../fr/learn/css/css_layout/positioning/index.html | 197 ++-- .../css/css_layout/responsive_design/index.html | 92 +- .../supporting_older_browsers/index.html | 4 +- .../css/first_steps/getting_started/index.html | 50 +- .../first_steps/how_css_is_structured/index.html | 18 +- .../learn/css/first_steps/how_css_works/index.html | 38 +- files/fr/learn/css/first_steps/index.html | 15 +- .../using_your_new_knowledge/index.html | 12 +- .../learn/css/first_steps/what_is_css/index.html | 18 +- .../learn/css/howto/create_fancy_boxes/index.html | 38 +- .../learn/css/howto/generated_content/index.html | 205 +--- files/fr/learn/css/howto/index.html | 75 +- files/fr/learn/css/index.html | 2 +- .../learn/css/styling_text/fundamentals/index.html | 140 +-- files/fr/learn/css/styling_text/index.html | 28 +- .../css/styling_text/styling_links/index.html | 44 +- .../css/styling_text/styling_lists/index.html | 39 +- .../styling_text/typesetting_a_homepage/index.html | 10 +- .../fr/learn/css/styling_text/web_fonts/index.html | 20 +- .../learn/forms/advanced_form_styling/index.html | 132 ++- .../forms/basic_native_form_controls/index.html | 187 ++-- files/fr/learn/forms/form_validation/index.html | 269 +++-- .../example_1/index.html | 18 +- .../example_2/index.html | 4 +- .../example_3/index.html | 6 +- .../example_4/index.html | 6 +- .../example_5/index.html | 4 +- .../how_to_build_custom_form_controls/index.html | 66 +- .../how_to_structure_a_web_form/example/index.html | 2 +- .../forms/how_to_structure_a_web_form/index.html | 151 +-- .../forms/html_forms_in_legacy_browsers/index.html | 10 +- files/fr/learn/forms/index.html | 28 +- .../index.html | 1146 ++++++++++---------- .../sending_and_retrieving_form_data/index.html | 48 +- .../sending_forms_through_javascript/index.html | 10 +- files/fr/learn/forms/styling_web_forms/index.html | 30 +- .../learn/forms/your_first_form/example/index.html | 2 +- files/fr/learn/forms/your_first_form/index.html | 32 +- files/fr/learn/front-end_web_developer/index.html | 52 +- .../css_basics/index.html | 36 +- .../dealing_with_files/index.html | 30 +- .../how_the_web_works/index.html | 32 +- .../html_basics/index.html | 30 +- .../learn/getting_started_with_the_web/index.html | 2 - .../installing_basic_software/index.html | 28 +- .../javascript_basics/index.html | 46 +- .../publishing_your_website/index.html | 24 +- .../the_web_and_web_standards/index.html | 2 +- .../what_will_your_website_look_like/index.html | 44 +- files/fr/learn/html/cheatsheet/index.html | 317 ++++-- .../add_a_hit_map_on_top_of_an_image/index.html | 6 +- .../html/howto/define_terms_with_html/index.html | 14 +- files/fr/learn/html/howto/index.html | 93 +- .../use_javascript_within_a_webpage/index.html | 8 +- files/fr/learn/html/index.html | 18 +- .../advanced_text_formatting/index.html | 120 +- .../creating_hyperlinks/index.html | 56 +- .../introduction_to_html/debugging_html/index.html | 24 +- .../document_and_website_structure/index.html | 36 +- .../getting_started/index.html | 60 +- .../html_text_fundamentals/index.html | 76 +- .../fr/learn/html/introduction_to_html/index.html | 4 +- .../marking_up_a_letter/index.html | 4 +- .../structuring_a_page_of_content/index.html | 8 +- .../the_head_metadata_in_html/index.html | 82 +- .../adding_vector_graphics_to_the_web/index.html | 17 +- .../images_in_html/index.html | 86 +- .../learn/html/multimedia_and_embedding/index.html | 2 +- .../mozilla_splash_page/index.html | 28 +- .../other_embedding_technologies/index.html | 56 +- .../responsive_images/index.html | 10 +- .../video_and_audio_content/index.html | 52 +- files/fr/learn/html/tables/advanced/index.html | 42 +- files/fr/learn/html/tables/basics/index.html | 87 +- files/fr/learn/html/tables/index.html | 4 +- .../html/tables/structuring_planet_data/index.html | 14 +- files/fr/learn/index.html | 12 +- .../javascript/asynchronous/async_await/index.html | 7 +- .../choosing_the_right_approach/index.html | 4 +- .../javascript/asynchronous/concepts/index.html | 16 +- files/fr/learn/javascript/asynchronous/index.html | 9 +- .../javascript/asynchronous/introducing/index.html | 33 +- .../javascript/asynchronous/promises/index.html | 64 +- .../asynchronous/timeouts_and_intervals/index.html | 54 +- .../build_your_own_function/index.html | 19 +- .../building_blocks/conditionals/index.html | 132 ++- .../javascript/building_blocks/events/index.html | 236 ++-- .../building_blocks/functions/index.html | 91 +- .../building_blocks/image_gallery/index.html | 40 +- .../fr/learn/javascript/building_blocks/index.html | 20 +- .../building_blocks/looping_code/index.html | 442 ++++---- .../building_blocks/return_values/index.html | 34 +- .../client-side_storage/index.html | 56 +- .../drawing_graphics/index.html | 52 +- .../client-side_web_apis/fetching_data/index.html | 34 +- .../javascript/client-side_web_apis/index.html | 10 +- .../client-side_web_apis/introduction/index.html | 41 +- .../manipulating_documents/index.html | 18 +- .../third_party_apis/index.html | 14 +- .../video_and_audio_apis/index.html | 22 +- .../first_steps/a_first_splash/index.html | 53 +- .../learn/javascript/first_steps/arrays/index.html | 41 +- files/fr/learn/javascript/first_steps/index.html | 14 +- .../learn/javascript/first_steps/math/index.html | 32 +- .../first_steps/silly_story_generator/index.html | 6 +- .../javascript/first_steps/strings/index.html | 32 +- .../test_your_skills_colon__arrays/index.html | 20 +- .../first_steps/useful_string_methods/index.html | 53 +- .../javascript/first_steps/variables/index.html | 86 +- .../first_steps/what_is_javascript/index.html | 15 +- .../first_steps/what_went_wrong/index.html | 40 +- files/fr/learn/javascript/index.html | 26 +- .../adding_bouncing_balls_features/index.html | 28 +- .../fr/learn/javascript/objects/basics/index.html | 58 +- files/fr/learn/javascript/objects/index.html | 32 +- .../javascript/objects/inheritance/index.html | 28 +- files/fr/learn/javascript/objects/json/index.html | 42 +- .../objects/object-oriented_js/index.html | 22 +- .../objects/object_building_practice/index.html | 92 +- .../objects/object_prototypes/index.html | 20 +- files/fr/learn/performance/html/index.html | 2 +- files/fr/learn/performance/index.html | 10 +- .../performance/measuring_performance/index.html | 8 +- files/fr/learn/performance/multimedia/index.html | 12 +- .../performance/why_web_performance/index.html | 56 +- .../learn/server-side/django/admin_site/index.html | 77 +- .../django/development_environment/index.html | 48 +- files/fr/learn/server-side/django/forms/index.html | 54 +- .../server-side/django/generic_views/index.html | 116 +- .../learn/server-side/django/home_page/index.html | 66 +- files/fr/learn/server-side/django/index.html | 38 +- .../server-side/django/introduction/index.html | 38 +- .../fr/learn/server-side/django/models/index.html | 84 +- .../server-side/django/skeleton_website/index.html | 108 +- .../fr/learn/server-side/django/testing/index.html | 64 +- .../tutorial_local_library_website/index.html | 20 +- .../fr/learn/server-side/express_nodejs/index.html | 4 +- .../express_nodejs/introduction/index.html | 80 +- .../first_steps/client-server_overview/index.html | 44 +- files/fr/learn/server-side/first_steps/index.html | 10 +- .../first_steps/introduction/index.html | 22 +- .../first_steps/web_frameworks/index.html | 22 +- .../first_steps/website_security/index.html | 20 +- files/fr/learn/server-side/index.html | 18 +- .../client-side_javascript_frameworks/index.html | 6 +- .../introduction/index.html | 118 +- .../main_features/index.html | 128 +-- .../react_getting_started/index.html | 136 +-- .../react_todo_list_beginning/index.html | 98 +- .../vue_getting_started/index.html | 205 ++-- .../cross_browser_testing/accessibility/index.html | 104 +- .../cross_browser_testing/html_and_css/index.html | 153 ++- .../cross_browser_testing/index.html | 24 +- .../cross_browser_testing/introduction/index.html | 36 +- .../cross_browser_testing/javascript/index.html | 198 ++-- .../testing_strategies/index.html | 58 +- files/fr/learn/tools_and_testing/github/index.html | 18 +- files/fr/learn/tools_and_testing/index.html | 8 +- .../command_line/index.html | 16 +- .../understanding_client-side_tools/index.html | 14 +- 219 files changed, 5870 insertions(+), 6625 deletions(-) (limited to 'files') diff --git a/files/fr/learn/accessibility/accessibility_troubleshooting/index.html b/files/fr/learn/accessibility/accessibility_troubleshooting/index.html index 54a4415545..4a9aea28fd 100644 --- a/files/fr/learn/accessibility/accessibility_troubleshooting/index.html +++ b/files/fr/learn/accessibility/accessibility_troubleshooting/index.html @@ -14,105 +14,96 @@ original_slug: Apprendre/a11y/Accessibility_troubleshooting

{{LearnSidebar}}
{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

-

Dans l’évaluation de ce module, nous vous présentons un site simple, qui présente un certain nombre de problèmes d’accessibilité que vous devez diagnostiquer et résoudre.

+

Dans l’évaluation de ce module, nous vous présentons un site simple, qui présente un certain nombre de problèmes d’accessibilité que vous devez diagnostiquer et résoudre.

- +
- - + + - - + +
Conditions préalables:Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de la  previous articles in the course.Conditions préalables:Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de la  previous articles in the course.
Objectif:Tester les connaissances de base sur les principes fondamentaux d'accessibilité.Objectif:Tester les connaissances de base sur les principes fondamentaux d'accessibilité.
-
-
-
-

Point de départ

+

Point de départ

-
 
-
-
-
-

Pour lancer cette évaluation, vous devez aller chercher le  ZIP containing the files that comprise the example. Décompressez le contenu dans un nouveau répertoire quelque part sur votre ordinateur local

+

Pour lancer cette évaluation, vous devez aller chercher le  ZIP containing the files that comprise the example. Décompressez le contenu dans un nouveau répertoire quelque part sur votre ordinateur local

-

Le site d'évaluation terminé devrait ressembler à ceci:

+

Le site d'évaluation terminé devrait ressembler à ceci:

-

+

-

Vous verrez quelques différences / problèmes avec l'affichage de l'état de départ de l'évaluation - ceci est principalement dû aux différences dans le balisage, ce qui cause des problèmes de style car le CSS n'est pas appliqué correctement. Ne vous inquiétez pas, vous allez résoudre ces problèmes dans les prochaines sections!

+

Vous verrez quelques différences / problèmes avec l'affichage de l'état de départ de l'évaluation - ceci est principalement dû aux différences dans le balisage, ce qui cause des problèmes de style car le CSS n'est pas appliqué correctement. Ne vous inquiétez pas, vous allez résoudre ces problèmes dans les prochaines sections!

-

Résumé du projet

+

Résumé du projet

-

Pour ce projet, vous êtes présenté avec un site naturel fictif affichant un article "factuel" sur les ours. Dans l'état actuel des choses, plusieurs problèmes d'accessibilité se posent. Votre tâche consiste à explorer le site existant et à le réparer au mieux de vos capacités, en répondant aux questions ci-dessous.

+

Pour ce projet, vous êtes présenté avec un site naturel fictif affichant un article "factuel" sur les ours. Dans l'état actuel des choses, plusieurs problèmes d'accessibilité se posent. Votre tâche consiste à explorer le site existant et à le réparer au mieux de vos capacités, en répondant aux questions ci-dessous.

-
-

Couleur

-
+

Couleur

-

Le texte est difficile à lire en raison du schéma de couleurs actuel. Pouvez-vous tester le contraste de couleurs actuel (texte / arrière-plan), en rapporter les résultats, puis le corriger en modifiant les couleurs attribuées?

+

Le texte est difficile à lire en raison du schéma de couleurs actuel. Pouvez-vous tester le contraste de couleurs actuel (texte / arrière-plan), en rapporter les résultats, puis le corriger en modifiant les couleurs attribuées?

Semantic HTML

    -
  1. Le contenu n'est toujours pas très accessible - faites un rapport sur ce qui se passe lorsque vous essayez de naviguer à l'aide d'un lecteur d'écran.
    2. -
  2. Pouvez-vous mettre à jour le texte de l'article pour faciliter la navigation des utilisateurs de lecteurs d'écran?
    3. -
  3. La partie du menu de navigation du site ( <div class="nav"></div>) pourrait être rendue plus accessible en la plaçant dans un élément sémantique HTML5 approprié. Lequel devrait-il être mis à jour? Faites la mise à jour.
    4. +
  4. Le contenu n'est toujours pas très accessible - faites un rapport sur ce qui se passe lorsque vous essayez de naviguer à l'aide d'un lecteur d'écran.
    5. +
  5. Pouvez-vous mettre à jour le texte de l'article pour faciliter la navigation des utilisateurs de lecteurs d'écran?
    6. +
  6. La partie du menu de navigation du site ( <div class="nav"></div>) pourrait être rendue plus accessible en la plaçant dans un élément sémantique HTML5 approprié. Lequel devrait-il être mis à jour? Faites la mise à jour.
-

Note: Vous devrez mettre à jour les sélecteurs de règles CSS qui attribuent aux balises le même style que les balises sémantiques. Une fois que vous avez ajouté des éléments de paragraphe, vous remarquerez que le style est meilleur.

+

Note : Vous devrez mettre à jour les sélecteurs de règles CSS qui attribuent aux balises le même style que les balises sémantiques. Une fois que vous avez ajouté des éléments de paragraphe, vous remarquerez que le style est meilleur.

-

Les images

+

Les images

-

Les images sont actuellement inaccessibles aux utilisateurs de lecteur d'écran. Pouvez-vous réparer ceci?

+

Les images sont actuellement inaccessibles aux utilisateurs de lecteur d'écran. Pouvez-vous réparer ceci?

Le lecteur audio

    -
  1. Le lecteur  <audio> n'est pas accessible aux malentendants (pouvez-vous ajouter une sorte d'alternative accessible pour ces utilisateurs)?
    2. -
  2. Le lecteur  <audio> n'est pas accessible aux utilisateurs de navigateurs plus anciens qui ne prennent pas en charge l'audio HTML5. Comment pouvez-vous leur permettre d'accéder encore à l'audio?
    3. +
  3. Le lecteur  <audio> n'est pas accessible aux malentendants (pouvez-vous ajouter une sorte d'alternative accessible pour ces utilisateurs)?
    4. +
  4. Le lecteur  <audio> n'est pas accessible aux utilisateurs de navigateurs plus anciens qui ne prennent pas en charge l'audio HTML5. Comment pouvez-vous leur permettre d'accéder encore à l'audio?

Les formulaires

    -
  1. L'élément  <input> dans le formulaire de recherche en haut pourrait être associé à une étiquette, mais nous ne souhaitons pas ajouter une étiquette de texte visible qui risquerait de gâcher la conception et qui n'est pas vraiment utile aux utilisateurs voyants. Comment ajouter une étiquette uniquement accessible aux lecteurs d’écran? ?
    2. -
  2. Les deux éléments  <input> du formulaire de commentaire ont des étiquettes de texte visibles, mais ils ne sont pas associés sans ambiguïté à leurs étiquettes. Comment y parvenir? Notez que vous devrez également mettre à jour certaines règles CSS.
    3. +
  3. L'élément  <input> dans le formulaire de recherche en haut pourrait être associé à une étiquette, mais nous ne souhaitons pas ajouter une étiquette de texte visible qui risquerait de gâcher la conception et qui n'est pas vraiment utile aux utilisateurs voyants. Comment ajouter une étiquette uniquement accessible aux lecteurs d’écran? ?
    4. +
  4. Les deux éléments  <input> du formulaire de commentaire ont des étiquettes de texte visibles, mais ils ne sont pas associés sans ambiguïté à leurs étiquettes. Comment y parvenir? Notez que vous devrez également mettre à jour certaines règles CSS.
-

Le contrôle afficher / masquer les commentaires

+

Le contrôle afficher / masquer les commentaires

-

Le bouton de commande afficher / masquer les commentaires n’est pas actuellement accessible au clavier. Pouvez-vous le rendre accessible au clavier, à la fois en termes de focalisation à l'aide de la touche de tabulation et d'activation à l'aide de la touche de retour?

+

Le bouton de commande afficher / masquer les commentaires n’est pas actuellement accessible au clavier. Pouvez-vous le rendre accessible au clavier, à la fois en termes de focalisation à l'aide de la touche de tabulation et d'activation à l'aide de la touche de retour?

-

La table

+

La table

-

Le tableau de données (data table ) n'est pas très accessible actuellement. Il est difficile pour les utilisateurs de lecteur d'écran d'associer des lignes et des colonnes de données. De plus, le tableau ne contient aucun type de résumé permettant de clarifier ce qu'il montre. Pouvez-vous ajouter des fonctionnalités à votre code HTML pour résoudre ce problème?

+

Le tableau de données (data table ) n'est pas très accessible actuellement. Il est difficile pour les utilisateurs de lecteur d'écran d'associer des lignes et des colonnes de données. De plus, le tableau ne contient aucun type de résumé permettant de clarifier ce qu'il montre. Pouvez-vous ajouter des fonctionnalités à votre code HTML pour résoudre ce problème?

-

Autres considérations?

+

Autres considérations?

-

Pouvez-vous énumérer deux autres idées d’amélioration qui rendraient le site Web plus accessible?

+

Pouvez-vous énumérer deux autres idées d’amélioration qui rendraient le site Web plus accessible?

-

Évaluation

+

Évaluation

-

Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en le demandant sur la discussion thread for this exercise,  ou sur le canal IRC #mdn  sur Mozilla IRC. Essayez d'abord l'exercice - il n'y a rien à gagner à tricher!

+

Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en le demandant sur la discussion thread for this exercise,  ou sur le canal IRC #mdn  sur Mozilla IRC. Essayez d'abord l'exercice - il n'y a rien à gagner à tricher!

-

{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

+

{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

-

Dans ce module

+

Dans ce module

diff --git a/files/fr/learn/accessibility/css_and_javascript/index.html b/files/fr/learn/accessibility/css_and_javascript/index.html index 06b093fa74..43455aa4be 100644 --- a/files/fr/learn/accessibility/css_and_javascript/index.html +++ b/files/fr/learn/accessibility/css_and_javascript/index.html @@ -19,51 +19,51 @@ original_slug: Apprendre/a11y/CSS_and_JavaScript
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
-

CSS et JavaScript, lorsqu'ils sont utilisés correctement, peuvent également permettre des expériences web accessibles... ou peuvent nuire considérablement à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines des meilleures pratiques CSS et JavaScript à prendre en compte pour garantir que même un contenu complexe soit aussi accessible que possible.

+

CSS et JavaScript, lorsqu'ils sont utilisés correctement, peuvent également permettre des expériences web accessibles... ou peuvent nuire considérablement à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines des meilleures pratiques CSS et JavaScript à prendre en compte pour garantir que même un contenu complexe soit aussi accessible que possible.

- +
- + - - + +
Prérequis :Connaissances informatiques de base, compréhension de base de HTML, CSS et JavaScript, et compréhension de  Qu'est ce que l'accessibilité ?Connaissances informatiques de base, compréhension de base de HTML, CSS et JavaScript, et compréhension de Qu'est ce que l'accessibilité ?
Objectif :Familiarisez-vous avec l’utilisation appropriée de CSS et de JavaScript dans vos documents Web afin d’optimiser l’accessibilité et de ne pas la compromettre.Objectif :Familiarisez-vous avec l’utilisation appropriée de CSS et de JavaScript dans vos documents Web afin d’optimiser l’accessibilité et de ne pas la compromettre.
-

CSS et JavaScript, des technologies accessibles ?

+

CSS et JavaScript, des technologies accessibles ?

-

CSS et JavaScript n’ont pas la même importance immédiate en matière d’accessibilité que le HTML, mais ils peuvent toujours aider ou nuire à l’accessibilité, en fonction de leur utilisation. En d'autres termes, il est important que vous preniez en compte certains conseils de meilleures pratiques pour vous assurer que votre utilisation de CSS et de JavaScript ne ruine pas l'accessibilité de vos documents.

+

CSS et JavaScript n’ont pas la même importance immédiate en matière d’accessibilité que le HTML, mais ils peuvent toujours aider ou nuire à l’accessibilité, en fonction de leur utilisation. En d'autres termes, il est important que vous preniez en compte certains conseils de meilleures pratiques pour vous assurer que votre utilisation de CSS et de JavaScript ne ruine pas l'accessibilité de vos documents.

CSS

-

Commençons par regarder le CSS.

+

Commençons par regarder le CSS.

-

Sémantique correcte et attentes de l'utilisateur

+

Sémantique correcte et attentes de l'utilisateur

-

Il est possible d’utiliser CSS pour détourner l'apparence d'un élément HTML pour qu'il ressemble à un autre, mais cela ne veut pas dire que vous devriez le faire. Comme nous l’avons souvent mentionné dans notre article HTML : une bonne base pour l'accessibilité, vous devez utiliser, dans la mesure du possible, l’élément sémantique approprié. Sinon, cela peut créer de la confusion et des difficultés d'usage pour tout le monde, plus particulièrement pour les utilisateurs handicapés. L'utilisation de la sémantique correcte a beaucoup à voir avec les attentes des utilisateurs  — les éléments ont une apparence et un comportement particuliers, en fonction de leurs fonctionnalités, et ces conventions communes sont attendues par les utilisateurs.

+

Il est possible d’utiliser CSS pour détourner l'apparence d'un élément HTML pour qu'il ressemble à un autre, mais cela ne veut pas dire que vous devriez le faire. Comme nous l’avons souvent mentionné dans notre article HTML : une bonne base pour l'accessibilité, vous devez utiliser, dans la mesure du possible, l’élément sémantique approprié. Sinon, cela peut créer de la confusion et des difficultés d'usage pour tout le monde, plus particulièrement pour les utilisateurs handicapés. L'utilisation de la sémantique correcte a beaucoup à voir avec les attentes des utilisateurs  — les éléments ont une apparence et un comportement particuliers, en fonction de leurs fonctionnalités, et ces conventions communes sont attendues par les utilisateurs.

-

Par exemple, un utilisateur de lecteur d'écran ne peut pas naviguer dans une page via des éléments d'en-tête si le développeur n'a pas utilisé les éléments d'en-tête de manière appropriée pour annoter le contenu. De la même manière, un en-tête perd son utilité visuelle si vous le stylisez de sorte qu'il ne ressemble pas à un en-tête.

+

Par exemple, un utilisateur de lecteur d'écran ne peut pas naviguer dans une page via des éléments d'en-tête si le développeur n'a pas utilisé les éléments d'en-tête de manière appropriée pour annoter le contenu. De la même manière, un en-tête perd son utilité visuelle si vous le stylisez de sorte qu'il ne ressemble pas à un en-tête.

-

La règle de base est la suivante : adaptez les styles et les comportements à votre conception sans rompre les habitudes utilisateur qui permettent une expérience intuitive. Les sections suivantes résument les principales fonctionnalités HTML à prendre en compte.

+

La règle de base est la suivante : adaptez les styles et les comportements à votre conception sans rompre les habitudes utilisateur qui permettent une expérience intuitive. Les sections suivantes résument les principales fonctionnalités HTML à prendre en compte.

-

Structure du contenu du texte "standard"

+

Structure du contenu du texte "standard"

-

Titres, paragraphes, listes — le contenu de texte de base de votre page :

+

Titres, paragraphes, listes — le contenu de texte de base de votre page :

-
<h1>En-têtes</h1>
+
<h1>En-têtes</h1>
 
-<p>paragraphes</p>
+<p>paragraphes</p>
 
 <ul>
-  <li>Ma liste</li>
-  <li>a deux éléments.</li>
+  <li>Ma liste</li>
+  <li>a deux éléments.</li>
 </ul>

 
-
Quelques styles CSS typiques pourraient ressembler à ceci :

+
Quelques styles CSS typiques pourraient ressembler à ceci :

 
 
h1 {
   font-size: 5rem;
@@ -74,56 +74,54 @@ p, li {
   font-size: 1.6rem;
 }

 
-
Vous devriez :

+
Vous devriez :

 
 
 
-
Voir Fondamentaux du texte HTML et  Introduction au style de texte pour plus d'informations.

+
Voir Fondamentaux du texte HTML et  Introduction au style de texte pour plus d'informations.

 
-
Texte mis en emphase

+
Texte mis en emphase

 
-
On met en avant une portion de texte grâce au balises inline <em> :

+
On met en avant une portion de texte grâce au balises inline <em> :

 
-
<p> L'eau est <em> très chaude </em>.</p>
+
<p> L'eau est <em> très chaude </em>.</p>
 
-<p> Les gouttelettes d’eau accumulées sur les surfaces s’appellent  <strong>condensation</strong>.</p>

+<p> Les gouttelettes d’eau accumulées sur les surfaces s’appellent  <strong>condensation</strong>.</p>

 
-
Vous voudrez peut-être ajouter quelques couleurs simples à votre texte mis en importance :

+
Vous voudrez peut-être ajouter quelques couleurs simples à votre texte mis en importance :

 
 
strong, em {
   color: #a60000;
 }

 
-
Cependant, vous aurez rarement besoin de styliser des éléments d’emphase de manière significative. Les conventions standard de texte en gras () et en italique (emphase) sont très reconnaissables, et le changement de style peut être source de confusion. Pour mettre des contenus en avant de manière efficace, voir Fondamentaux du texte HTML.

+
Cependant, vous aurez rarement besoin de styliser des éléments d’emphase de manière significative. Les conventions standard de texte en gras () et en italique (emphase) sont très reconnaissables, et le changement de style peut être source de confusion. Pour mettre des contenus en avant de manière efficace, voir Fondamentaux du texte HTML.

 
-
Les abréviations

+
Les abréviations

 
-
Un élément permettant d'associer une abréviation, un acronyme ou un sigle à sa forme développée :

+
Un élément permettant d'associer une abréviation, un acronyme ou un sigle à sa forme développée :

 
-
<p> Le contenu web est marqué à l'aide de  <abbr title="Hypertext Markup Language">HTML</abbr>.</p>

+
<p> Le contenu web est marqué à l'aide de  <abbr title="Hypertext Markup Language">HTML</abbr>.</p>

 
-
Encore une fois, vous voudrez peut-être appliquer une mise en forme simple sur ces éléments :

+
Encore une fois, vous voudrez peut-être appliquer une mise en forme simple sur ces éléments :

 
 
abbr {
   color: #a60000;
 }

 
-
Par convention, on souligne en pointillés les abréviations et il n’est pas judicieux de s’écarter significativement cette règle reconnue. Pour plus d'informations sur les abréviations, voir Abréviations.

+
Par convention, on souligne en pointillés les abréviations et il n’est pas judicieux de s’écarter significativement cette règle reconnue. Pour plus d'informations sur les abréviations, voir Abréviations.

 
-

-
Liens

-

+
Liens

 
-
Hyperliens  la façon dont vous accédez à de nouveaux endroits sur le Web :

+
Hyperliens  la façon dont vous accédez à de nouveaux endroits sur le Web :

 
-
<p> Visiter la  <a href="https://www.mozilla.org"> Page d'accueil de Mozilla </a>.</p>

+
<p> Visiter la  <a href="https://www.mozilla.org"> Page d'accueil de Mozilla </a>.</p>

 
-
Un style de lien très simple est présenté ci-dessous :

+
Un style de lien très simple est présenté ci-dessous :

 
 
a {
   color: #ff0000;
@@ -139,124 +137,124 @@ a:active {
   background-color: #a60000;
 }

 
-
Les conventions de style sur les liens sont le soulignement et une couleur différente (par défaut : bleu) dans leur état normal (non visité) de celle utilisée lorsque le lien a déjà été visité (par défaut : violet) et de celle utilisée lorsque le lien est activé (par défaut : rouge). De plus, le pointeur de la souris se change en icône de pointeur lorsque les liens sont déplacés, et le lien reçoit une surbrillance lorsqu'il est ciblé (par exemple, via une tabulation) ou activé. L'image suivante montre la surbrillance dans Firefox (contour en pointillé) et Chrome (contour bleu) :

+
Les conventions de style sur les liens sont le soulignement et une couleur différente (par défaut : bleu) dans leur état normal (non visité) de celle utilisée lorsque le lien a déjà été visité (par défaut : violet) et de celle utilisée lorsque le lien est activé (par défaut : rouge). De plus, le pointeur de la souris se change en icône de pointeur lorsque les liens sont déplacés, et le lien reçoit une surbrillance lorsqu'il est ciblé (par exemple, via une tabulation) ou activé. L'image suivante montre la surbrillance dans Firefox (contour en pointillé) et Chrome (contour bleu) :

 
-

+

 
-

+

 
-
Vous pouvez faire preuve de créativité avec les styles de lien, tant que vous continuez à donner aux utilisateurs des informations visuelles en retour lorsqu'ils interagissent avec les liens. Quelque chose doit effectivement se produire pour signaler les changements d'états d'un lien, et vous ne devriez pas vous débarrasser du curseur de pointeur ou du contour — ces deux outils sont des aides très importantes pour l'accessibilité pour ceux qui utilisent les contrôles du clavier.

+
Vous pouvez faire preuve de créativité avec les styles de lien, tant que vous continuez à donner aux utilisateurs des informations visuelles en retour lorsqu'ils interagissent avec les liens. Quelque chose doit effectivement se produire pour signaler les changements d'états d'un lien, et vous ne devriez pas vous débarrasser du curseur de pointeur ou du contour — ces deux outils sont des aides très importantes pour l'accessibilité pour ceux qui utilisent les contrôles du clavier.

 
-
Éléments form

+
Éléments form

 
-
Éléments permettant aux utilisateurs de saisir des données sur des sites web :

+
Éléments permettant aux utilisateurs de saisir des données sur des sites web :

 
 
<div>
-  <label for="name">Entrez votre nom</label>
+  <label for="name">Entrez votre nom</label>
   <input type="text" id="name" name="name">
 </div>

 
-
Vous pouvez voir de bons exemples de CSS dans notre exemple form-css.html et (en direct).

+
Vous pouvez voir de bons exemples de CSS dans notre exemple form-css.html et (en direct).

 
-
La plupart du CSS que vous rédigerez pour les formulaires servira à dimensionner les éléments, à aligner les étiquettes et les entrées, et à leur donner une apparence nette et ordonnée.

+
La plupart du CSS que vous rédigerez pour les formulaires servira à dimensionner les éléments, à aligner les étiquettes et les entrées, et à leur donner une apparence nette et ordonnée.

 
-
Toutefois, vous ne devriez pas trop vous écarter des indications visuelles classiques qui signalent qu'un élément du formulaire est ciblé, c'est fondamentalement la même chose que pour les liens (voir ci-dessus). Vous pouvez mettre en forme les états ciblé / survolé du formulaire pour rendre ce comportement plus cohérent sur les navigateurs ou pour obtenir une meilleure intégration au design de votre page, mais ne vous en débarrassez pas complètement. Là encore, les utilisateurs s’appuient sur ces indices pour comprendre ce qui se passe.

+
Toutefois, vous ne devriez pas trop vous écarter des indications visuelles classiques qui signalent qu'un élément du formulaire est ciblé, c'est fondamentalement la même chose que pour les liens (voir ci-dessus). Vous pouvez mettre en forme les états ciblé / survolé du formulaire pour rendre ce comportement plus cohérent sur les navigateurs ou pour obtenir une meilleure intégration au design de votre page, mais ne vous en débarrassez pas complètement. Là encore, les utilisateurs s’appuient sur ces indices pour comprendre ce qui se passe.

 
-
Tableaux

+
Tableaux

 
-
Tableaux pour la présentation des données tabulées.

+
Tableaux pour la présentation des données tabulées.

 
-
Vous pouvez voir un bon exemple simple de   table-css.html et (en direct).

+
Vous pouvez voir un bon exemple simple de   table-css.html et (en direct).

 
-
En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse. Il est judicieux de vous assurer que les en-têtes de table se démarquent  (normalement en gras), et de zébrer les lignes via le pseudo-sélecteur :nth-child(n) pour faciliter la lecture.

+
En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse. Il est judicieux de vous assurer que les en-têtes de table se démarquent  (normalement en gras), et de zébrer les lignes via le pseudo-sélecteur :nth-child(n) pour faciliter la lecture.

 
-
Couleur et contraste de couleur

+
Couleur et contraste de couleur

 
-
Lorsque vous choisissez un jeu de couleurs pour votre site web, assurez-vous que la couleur du texte contraste bien avec la couleur de fond. Votre design peut sembler agréable, mais cela n’est pas bon si les personnes malvoyantes, par exemple atteintes de daltonisme, ne peuvent pas lire votre contenu.

+
Lorsque vous choisissez un jeu de couleurs pour votre site web, assurez-vous que la couleur du texte contraste bien avec la couleur de fond. Votre design peut sembler agréable, mais cela n’est pas bon si les personnes malvoyantes, par exemple atteintes de daltonisme, ne peuvent pas lire votre contenu.

 
-
Il existe un moyen simple de vérifier si votre contraste est suffisamment important pour ne pas causer de problèmes. Il existe un certain nombre d’outils de vérification du contraste en ligne dans lesquels vous pouvez entrer vos couleurs de premier plan et d’arrière-plan afin de les vérifier. Par exemple, le vérificateur de contraste de couleur du WebAIM est simple à utiliser et explique ce dont vous avez besoin pour vous conformer aux critères WCAG relatifs au contraste des couleurs.

+
Il existe un moyen simple de vérifier si votre contraste est suffisamment important pour ne pas causer de problèmes. Il existe un certain nombre d’outils de vérification du contraste en ligne dans lesquels vous pouvez entrer vos couleurs de premier plan et d’arrière-plan afin de les vérifier. Par exemple, le vérificateur de contraste de couleur du WebAIM est simple à utiliser et explique ce dont vous avez besoin pour vous conformer aux critères WCAG relatifs au contraste des couleurs.

 
 

-
Note : Un taux de contraste élevé permettra également à toute personne utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, tel qu'exposé à la lumière du soleil.

+
Note : Un taux de contraste élevé permettra également à toute personne utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, tel qu'exposé à la lumière du soleil.

 

 
-
Un autre conseil est de ne pas compter uniquement sur la couleur pour les panneaux / informations, car cela ne sera pas bon pour ceux qui ne peuvent pas voir la couleur. Au lieu de marquer les champs de formulaire obligatoires en rouge, par exemple, marquez-les d'un astérisque et en rouge.

+
Un autre conseil est de ne pas compter uniquement sur la couleur pour les panneaux / informations, car cela ne sera pas bon pour ceux qui ne peuvent pas voir la couleur. Au lieu de marquer les champs de formulaire obligatoires en rouge, par exemple, marquez-les d'un astérisque et en rouge.

 
-
Cacher des choses

+
Cacher des choses

 
-
Dans de nombreux cas, une conception visuelle nécessitera de ne pas afficher tout le contenu en même temps. Par exemple, dans notre Exemple de boîte d'information à onglets (voir notre code source), nous avons trois panneaux d’informations, mais nous les positionnons les uns sur les autres et fournissons des onglets sur lesquels on peut cliquer pour les afficher à tour de rôle (c’est aussi accessible au clavier – vous pouvez également utiliser Tab et Entrée pour les sélectionner).

+
Dans de nombreux cas, une conception visuelle nécessitera de ne pas afficher tout le contenu en même temps. Par exemple, dans notre Exemple de boîte d'information à onglets (voir notre code source), nous avons trois panneaux d’informations, mais nous les positionnons les uns sur les autres et fournissons des onglets sur lesquels on peut cliquer pour les afficher à tour de rôle (c’est aussi accessible au clavier – vous pouvez également utiliser Tab et Entrée pour les sélectionner).

 
-

+

 
-
Les utilisateurs de lecteur d’écran ne s’inquiètent de rien. Ils sont satisfaits du contenu tant que l’ordre des sources est logique et ils peuvent tout comprendre. Le positionnement absolu (tel qu'utilisé dans cet exemple) est généralement considéré comme l'un des meilleurs mécanismes permettant de masquer un contenu pour obtenir un effet visuel, car il n'empêche pas les lecteurs d'écran d'y accéder.

+
Les utilisateurs de lecteur d’écran ne s’inquiètent de rien. Ils sont satisfaits du contenu tant que l’ordre des sources est logique et ils peuvent tout comprendre. Le positionnement absolu (tel qu'utilisé dans cet exemple) est généralement considéré comme l'un des meilleurs mécanismes permettant de masquer un contenu pour obtenir un effet visuel, car il n'empêche pas les lecteurs d'écran d'y accéder.

 
-
Par contre, vous ne devriez pas utiliser {{cssxref("visibility")}}:hidden ou {{cssxref("display")}}:none, car ils masquent le contenu des lecteurs d'écran sauf si vous souhaitez que ce contenu leur soit masqué.

+
Par contre, vous ne devriez pas utiliser {{cssxref("visibility")}}:hidden ou {{cssxref("display")}}:none, car ils masquent le contenu des lecteurs d'écran sauf si vous souhaitez que ce contenu leur soit masqué.

 
 

-
Note : Contenu invisible juste pour les utilisateurs de lecteur d'écran  contient beaucoup plus de détails utiles concernant ce sujet.

+
Note : Contenu invisible juste pour les utilisateurs de lecteur d'écran  contient beaucoup plus de détails utiles concernant ce sujet.

 

 
-
Accepter que les utilisateurs puissent remplacer les styles

+
Accepter que les utilisateurs puissent remplacer les styles

 
-
Acceptez que les utilisateurs puissent remplacer vos styles

+
Acceptez que les utilisateurs puissent remplacer vos styles

 
-
Il est possible pour les utilisateurs de remplacer vos styles par leurs propres styles personnalisés, par exemple :

+
Il est possible pour les utilisateurs de remplacer vos styles par leurs propres styles personnalisés, par exemple :

 
 
 
-
Les utilisateurs peuvent le faire pour diverses raisons. Un utilisateur malvoyant peut vouloir agrandir le texte de tous les sites Web qu’il visite, ou un utilisateur présentant un déficit de couleur grave peut vouloir afficher tous les sites Web dans des couleurs très contrastées, faciles à lire. Quel que soit le besoin, vous devriez être à l'aise avec cela et rendre vos conceptions suffisamment flexibles pour que de tels changements fonctionnent dans votre conception. Par exemple, vous voudrez peut-être vous assurer que votre zone de contenu principale peut gérer un texte plus volumineux (le défilement commencera peut-être pour permettre à tout le monde de le voir), et ne le cachera pas ou ne sera pas complètement interrompu.

+
Les utilisateurs peuvent le faire pour diverses raisons. Un utilisateur malvoyant peut vouloir agrandir le texte de tous les sites Web qu’il visite, ou un utilisateur présentant un déficit de couleur grave peut vouloir afficher tous les sites Web dans des couleurs très contrastées, faciles à lire. Quel que soit le besoin, vous devriez être à l'aise avec cela et rendre vos conceptions suffisamment flexibles pour que de tels changements fonctionnent dans votre conception. Par exemple, vous voudrez peut-être vous assurer que votre zone de contenu principale peut gérer un texte plus volumineux (le défilement commencera peut-être pour permettre à tout le monde de le voir), et ne le cachera pas ou ne sera pas complètement interrompu.

 
 
JavaScript

 
-
JavaScript peut également compromettre l’accessibilité, selon son utilisation.

+
JavaScript peut également compromettre l’accessibilité, selon son utilisation.

 
-
Le JavaScript moderne est un langage puissant, et nous pouvons faire beaucoup de choses avec cela de nos jours, du contenu simple et des mises à jour d'interface utilisateur aux jeux 2D et 3D à part entière. Aucune règle ne stipule que tout le contenu doit être accessible à 100% à toutes les personnes. Vous devez simplement faire ce que vous pouvez et rendre vos applications aussi accessibles que possible.

+
Le JavaScript moderne est un langage puissant, et nous pouvons faire beaucoup de choses avec cela de nos jours, du contenu simple et des mises à jour d'interface utilisateur aux jeux 2D et 3D à part entière. Aucune règle ne stipule que tout le contenu doit être accessible à 100% à toutes les personnes. Vous devez simplement faire ce que vous pouvez et rendre vos applications aussi accessibles que possible.

 
-
Le contenu et les fonctionnalités simples sont facilement accessibles – texte, images, tableaux, formulaires et bouton-poussoir activant des fonctions. Comme nous l'avons vu dans notre article HTML : une bonne base pour l'accessibilité,  les principales considérations sont les suivantes :

+
Le contenu et les fonctionnalités simples sont facilement accessibles – texte, images, tableaux, formulaires et bouton-poussoir activant des fonctions. Comme nous l'avons vu dans notre article HTML : une bonne base pour l'accessibilité, les principales considérations sont les suivantes :

 
 
 
-
Nous avons également examiné un exemple d'utilisation de JavaScript pour intégrer des fonctionnalités là où il manque – voir Remettre l'accessibilité au clavier. Ce n'est pas l'idéal – vous devez utiliser le bon élément pour le bon travail – mais cela montre que c'est possible dans des situations où, pour une raison quelconque, vous ne pouvez pas contrôler le balisage utilisé. Un autre moyen d'améliorer l'accessibilité pour les widgets non sémantiques reposant sur JavaScript consiste à utiliser WAI-ARIA pour fournir une sémantique supplémentaire aux utilisateurs de lecteurs d'écran. Le prochain article couvrira également cela en détail.

+
Nous avons également examiné un exemple d'utilisation de JavaScript pour intégrer des fonctionnalités là où il manque – voir Remettre l'accessibilité au clavier. Ce n'est pas l'idéal – vous devez utiliser le bon élément pour le bon travail – mais cela montre que c'est possible dans des situations où, pour une raison quelconque, vous ne pouvez pas contrôler le balisage utilisé. Un autre moyen d'améliorer l'accessibilité pour les widgets non sémantiques reposant sur JavaScript consiste à utiliser WAI-ARIA pour fournir une sémantique supplémentaire aux utilisateurs de lecteurs d'écran. Le prochain article couvrira également cela en détail.

 
-
Les fonctionnalités complexes telles que les jeux 3D ne sont pas si faciles à rendre accessibles – un jeu 3D complexe créé à l'aide de L'API WebGL : graphismes 2D et 3D pour le web sera rendu sur un élément {{htmlelement("canvas")}}, qui n'a pour l'instant aucune possibilité de fournir textes alternatifs ou autres informations à utiliser par les utilisateurs malvoyants. On peut soutenir qu’un tel jeu ne compte pas vraiment ce groupe de personnes dans son public cible principal, et il serait déraisonnable de s’attendre à ce que vous le rendiez accessible à 100% aux aveugles, quelle que soit l’implantation des contrôles clavier faite pour qu'il soit utilisable par les utilisateurs sans souris. De plus, rendez le jeu de couleurs suffisamment contrasté pour pouvoir rendre le jeu vidéo utilisable par ceux qui ont des déficiences de la perception des couleurs.

+
Les fonctionnalités complexes telles que les jeux 3D ne sont pas si faciles à rendre accessibles – un jeu 3D complexe créé à l'aide de L'API WebGL : graphismes 2D et 3D pour le web sera rendu sur un élément {{htmlelement("canvas")}}, qui n'a pour l'instant aucune possibilité de fournir textes alternatifs ou autres informations à utiliser par les utilisateurs malvoyants. On peut soutenir qu’un tel jeu ne compte pas vraiment ce groupe de personnes dans son public cible principal, et il serait déraisonnable de s’attendre à ce que vous le rendiez accessible à 100% aux aveugles, quelle que soit l’implantation des contrôles clavier faite pour qu'il soit utilisable par les utilisateurs sans souris. De plus, rendez le jeu de couleurs suffisamment contrasté pour pouvoir rendre le jeu vidéo utilisable par ceux qui ont des déficiences de la perception des couleurs.

 
-
Le problème avec trop de JavaScript

+
Le problème avec trop de JavaScript

 
-
Le problème survient souvent lorsque les utilisateurs se fient trop à JavaScript. Parfois, vous voyez un site Web où tout a été fait avec JavaScript – le code HTML a été généré par JavaScript, le CSS a été généré par JavaScript, etc. Ceci présente toutes sortes de problèmes d'accessibilité et d'autres choses qui y sont associées, donc ce n'est pas conseillé.

+
Le problème survient souvent lorsque les utilisateurs se fient trop à JavaScript. Parfois, vous voyez un site Web où tout a été fait avec JavaScript – le code HTML a été généré par JavaScript, le CSS a été généré par JavaScript, etc. Ceci présente toutes sortes de problèmes d'accessibilité et d'autres choses qui y sont associées, donc ce n'est pas conseillé.

 
-
En plus d'utiliser le bon élément pour le bon travail, vous devez également vous assurer que vous utilisez la bonne technologie pour le bon travail ! Réfléchissez bien pour savoir si vous avez besoin de cette boîte d’informations 3D brillante reposant sur JavaScript, ou si un texte ordinaire avec du CSS conviendrait. Réfléchissez bien pour savoir si vous avez besoin d'un widget de formulaire non standard complexe ou d'une saisie de texte. Et ne générez pas tout votre contenu HTML en utilisant JavaScript si possible.

+
En plus d'utiliser le bon élément pour le bon travail, vous devez également vous assurer que vous utilisez la bonne technologie pour le bon travail ! Réfléchissez bien pour savoir si vous avez besoin de cette boîte d’informations 3D brillante reposant sur JavaScript, ou si un texte ordinaire avec du CSS conviendrait. Réfléchissez bien pour savoir si vous avez besoin d'un widget de formulaire non standard complexe ou d'une saisie de texte. Et ne générez pas tout votre contenu HTML en utilisant JavaScript si possible.

 
-
Le garder discret

+
Le garder discret

 
-
Lors de la création de votre contenu, gardez à l'esprit  l'idée d'un JavaScript discret, en retrait. JavaScript est discret quand il est utilisé pour améliorer des fonctionnalités, il devient gênant quand ces mêmes fonctionnalités sont développées entièrement en JavaScript. Les fonctions de base de votre page devraient idéalement tourner sans JavaScript, même s’il est évident que ce n’est pas toujours possible. La règle est d'utiliser lorsque cela est possible les fonctionnalités intégrées au navigateur.

+
Lors de la création de votre contenu, gardez à l'esprit  l'idée d'un JavaScript discret, en retrait. JavaScript est discret quand il est utilisé pour améliorer des fonctionnalités, il devient gênant quand ces mêmes fonctionnalités sont développées entièrement en JavaScript. Les fonctions de base de votre page devraient idéalement tourner sans JavaScript, même s’il est évident que ce n’est pas toujours possible. La règle est d'utiliser lorsque cela est possible les fonctionnalités intégrées au navigateur.

 
-
De bons exemples d'utilisation de JavaScript discret incluent :

+
De bons exemples d'utilisation de JavaScript discret incluent :

 
 
 
-
Par exemple, nous avons écrit un exemple de validation de formulaire côté client rapide — voir form-validation.html (voir aussi la démonstration en direct). Ici, vous verrez un formulaire simple. Lorsque vous essayez de soumettre le formulaire avec un ou les deux champs vides, l'envoi échoue et un message d'erreur s'affiche pour vous indiquer ce qui ne va pas.

+
Par exemple, nous avons écrit un exemple de validation de formulaire côté client rapide — voir form-validation.html (voir aussi la démonstration en direct). Ici, vous verrez un formulaire simple. Lorsque vous essayez de soumettre le formulaire avec un ou les deux champs vides, l'envoi échoue et un message d'erreur s'affiche pour vous indiquer ce qui ne va pas.

 
-
Ce type de validation de formulaire est discret — vous pouvez toujours utiliser le formulaire parfaitement sans que le JavaScript soit disponible, et toute implémentation de formulaire sensée aura également une validation côté serveur, car il est trop facile pour les utilisateurs malveillants de contourner la validation côté client (en désactivant JavaScript dans le navigateur, par exemple). La validation côté client est toujours très utile pour signaler les erreurs — les utilisateurs peuvent savoir instantanément quelles erreurs ils commettent, au lieu d'attendre un aller-retour vers le serveur et un rechargement de page. C'est un avantage certain en termes de convivialité.

+
Ce type de validation de formulaire est discret — vous pouvez toujours utiliser le formulaire parfaitement sans que le JavaScript soit disponible, et toute implémentation de formulaire sensée aura également une validation côté serveur, car il est trop facile pour les utilisateurs malveillants de contourner la validation côté client (en désactivant JavaScript dans le navigateur, par exemple). La validation côté client est toujours très utile pour signaler les erreurs — les utilisateurs peuvent savoir instantanément quelles erreurs ils commettent, au lieu d'attendre un aller-retour vers le serveur et un rechargement de page. C'est un avantage certain en termes de convivialité.

 
 

-
Note : La validation côté serveur n'a pas été implémentée dans cette simple démonstration.

+
Note : La validation côté serveur n'a pas été implémentée dans cette simple démonstration.

 

 
-
Nous avons également rendu cette validation de formulaire assez accessible. Nous avons utilisé des éléments {{htmlelement("label")}} pour nous assurer que les libellés des formulaires sont liés de manière non équivoque à leurs entrées, afin que les lecteurs d'écran puissent les lire au fur et à mesure :

+
Nous avons également rendu cette validation de formulaire assez accessible. Nous avons utilisé des éléments {{htmlelement("label")}} pour nous assurer que les libellés des formulaires sont liés de manière non équivoque à leurs entrées, afin que les lecteurs d'écran puissent les lire au fur et à mesure :

 
-
<label for="name"> Entrez votre nom :</label>
+
<label for="name"> Entrez votre nom :</label>
 <input type="text" name="name" id="name">

 
-
Nous ne faisons la validation qu'une fois le formulaire soumis — ceci afin de ne pas mettre à jour l'interface utilisateur trop souvent et de ne pas perturber les utilisateurs du lecteur d'écran (et éventuellement d'autres) :

+
Nous ne faisons la validation qu'une fois le formulaire soumis — ceci afin de ne pas mettre à jour l'interface utilisateur trop souvent et de ne pas perturber les utilisateurs du lecteur d'écran (et éventuellement d'autres) :

 
 
form.onsubmit = validate;
 
@@ -276,65 +274,65 @@ function validate(e) {
 }

 
 

-
Note :  Dans cet exemple, nous masquons et montrons la boîte de message d'erreur en utilisant le positionnement absolu plutôt qu'une autre méthode telle que la visibilité ou l'affichage, car cela n'empêche pas le lecteur d'écran de pouvoir lire le contenu de celui-ci.

+
Note : Dans cet exemple, nous masquons et montrons la boîte de message d'erreur en utilisant le positionnement absolu plutôt qu'une autre méthode telle que la visibilité ou l'affichage, car cela n'empêche pas le lecteur d'écran de pouvoir lire le contenu de celui-ci.

 

 
-
La validation du formulaire réel serait beaucoup plus complexe que cela : vous voudriez vérifier que le nom saisi ressemble réellement à un nom, que l’âge entré est en réalité un nombre et qu’il est réaliste (par exemple, pas un nombre négatif, ni à quatre chiffres). Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie (if(testItem.input.value === '')).

+
La validation du formulaire réel serait beaucoup plus complexe que cela : vous voudriez vérifier que le nom saisi ressemble réellement à un nom, que l’âge entré est en réalité un nombre et qu’il est réaliste (par exemple, pas un nombre négatif, ni à quatre chiffres). Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie (if(testItem.input.value === '')).

 
-
Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis. S'il y a des erreurs  (if(errorList.innerHTML !== ''))  nous arrêtons la soumission du formulaire ( à l'aide de event.preventDefault()), et affichons tous les messages d'erreur créés (voir ci-dessous). Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation.

+
Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis. S'il y a des erreurs  (if(errorList.innerHTML !== '')) nous arrêtons la soumission du formulaire ( à l'aide de event.preventDefault()), et affichons tous les messages d'erreur créés (voir ci-dessous). Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation.

 
-
Pour chaque entrée pour laquelle aucune valeur n'a été renseignée lors de la soumission du formulaire, nous créons un élément de liste avec un lien et l'insérons dans la liste errorList.

+
Pour chaque entrée pour laquelle aucune valeur n'a été renseignée lors de la soumission du formulaire, nous créons un élément de liste avec un lien et l'insérons dans la liste errorList.

 
 
function createLink(testItem) {
-  var listItem = document.createElement('li');
-  var anchor = document.createElement('a');
-  anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
-  anchor.href = '#' + testItem.input.name;
-  anchor.onclick = function() {
-    testItem.input.focus();
-  };
-  listItem.appendChild(anchor);
-  errorList.appendChild(listItem);
+ var listItem = document.createElement('li');
+ var anchor = document.createElement('a');
+ anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
+ anchor.href = '#' + testItem.input.name;
+ anchor.onclick = function() {
+   testItem.input.focus();
+ };
+ listItem.appendChild(anchor);
+ errorList.appendChild(listItem);
 }

 
-
Chaque lien a un double objectif — il vous dit quelle est l’erreur, vous pouvez aussi cliquer dessus / l’activer pour passer directement à l’élément d’entrée en question et corriger votre saisie.

+
Chaque lien a un double objectif — il vous dit quelle est l’erreur, vous pouvez aussi cliquer dessus / l’activer pour passer directement à l’élément d’entrée en question et corriger votre saisie.

 
 

-
Note :  La partie  focus()  de cet exemple est un peu délicate. Chrome et Edge (et les versions plus récentes d'IE) focalisent l'élément lorsque l'utilisateur clique sur le lien, sans avoir besoin du bloc  onclick/focus().  Safari ne mettra en évidence que l'élément de formulaire avec le lien, il a donc besoin du bloc onclick/focus()  pour le focaliser. Firefox ne focalise pas les entrées correctement dans ce contexte, les utilisateurs de Firefox ne peuvent donc pas en profiter pour le moment (bien que tout le reste fonctionne bien). Le problème de Firefox devrait bientôt être résolu - des efforts sont en cours pour donner la parité des comportements de Firefox aux autres navigateurs (voir {{bug(277178)}}).

+
Note : La partie  focus() de cet exemple est un peu délicate. Chrome et Edge (et les versions plus récentes d'IE) focalisent l'élément lorsque l'utilisateur clique sur le lien, sans avoir besoin du bloc  onclick/focus(). Safari ne mettra en évidence que l'élément de formulaire avec le lien, il a donc besoin du bloc onclick/focus() pour le focaliser. Firefox ne focalise pas les entrées correctement dans ce contexte, les utilisateurs de Firefox ne peuvent donc pas en profiter pour le moment (bien que tout le reste fonctionne bien). Le problème de Firefox devrait bientôt être résolu - des efforts sont en cours pour donner la parité des comportements de Firefox aux autres navigateurs (voir {{bug(277178)}}).

 

 
-
De plus, le champ errorField est placé en haut de l'ordre source (bien qu'il soit positionné différemment dans UI à l'aide de CSS), ce qui signifie que les utilisateurs peuvent savoir exactement ce qui ne va pas avec les soumissions de formulaire et accéder aux éléments d'entrée en question en remontant au début de la page

+
De plus, le champ errorField est placé en haut de l'ordre source (bien qu'il soit positionné différemment dans UI à l'aide de CSS), ce qui signifie que les utilisateurs peuvent savoir exactement ce qui ne va pas avec les soumissions de formulaire et accéder aux éléments d'entrée en question en remontant au début de la page

 
-
Pour terminer, nous avons utilisé certains attributs de WAI-ARIA dans notre démonstration pour résoudre les problèmes d’accessibilité causés par des zones de contenu constamment mises à jour sans rechargement de page (les lecteurs d’écran ne le détectent pas et n'en avertissent pas les utilisateurs par défaut) :

+
Pour terminer, nous avons utilisé certains attributs de WAI-ARIA dans notre démonstration pour résoudre les problèmes d’accessibilité causés par des zones de contenu constamment mises à jour sans rechargement de page (les lecteurs d’écran ne le détectent pas et n'en avertissent pas les utilisateurs par défaut) :

 
 
<div class="errors" role="alert" aria-relevant="all">
   <ul>
   </ul>
 </div>

 
-
Nous expliquerons ces attributs dans notre prochain article, qui couvre WAI-ARIA de manière beaucoup plus détaillée.

+
Nous expliquerons ces attributs dans notre prochain article, qui couvre WAI-ARIA de manière beaucoup plus détaillée.

 
 

-
Note :  Certains d'entre vous penseront probablement au fait que les formulaires HTML5 ont des mécanismes de validation intégrés tels que les attributs required, min/minlength, et max/maxlength  (voir {{htmlelement("input")}} référence d'élément pour plus d'informations). Nous avons fini par ne pas les utiliser dans la démo, car la prise en charge multi-navigateurs est inégale (par exemple, IE10 et versions ultérieures, pas de prise en charge de Safari).

+
Note : Certains d'entre vous penseront probablement au fait que les formulaires HTML5 ont des mécanismes de validation intégrés tels que les attributs required, min/minlength, et max/maxlength (voir {{htmlelement("input")}} référence d'élément pour plus d'informations). Nous avons fini par ne pas les utiliser dans la démo, car la prise en charge multi-navigateurs est inégale (par exemple, IE10 et versions ultérieures, pas de prise en charge de Safari).

 

 
 

-
Note : WebAIM's Validation de formulaire et récupération d'erreur utilisables et accessibles (EN) fournit des informations supplémentaires utiles sur la validation de formulaire accessible.

+
Note : WebAIM's Validation de formulaire et récupération d'erreur utilisables et accessibles (EN) fournit des informations supplémentaires utiles sur la validation de formulaire accessible.

 

 
-
Autres problèmes d'accessibilité JavaScript

+
Autres problèmes d'accessibilité JavaScript

 
-
Il y a d'autres choses à prendre en compte quand on met en œuvre des solutions JavaScript tout en réflechissant à l'accessibilité. Voilà déjà une liste de points à surveiller, que nous complèterons à chaque fois qu'un nouveau cas se présente.

+
Il y a d'autres choses à prendre en compte quand on met en œuvre des solutions JavaScript tout en réflechissant à l'accessibilité. Voilà déjà une liste de points à surveiller, que nous complèterons à chaque fois qu'un nouveau cas se présente.

 
-
Événements spécifiques à la souris

+
Événements spécifiques à la souris

 
-
Comme vous le savez peut-être, la plupart des interactions utilisateur sont implémentées dans JavaScript côté client à l'aide de gestionnaires d'événements, ce qui nous permet d'exécuter des fonctions en réponse à certains événements. Certains événements peuvent avoir des problèmes d'accessibilité. L'exemple principal que vous rencontrerez concerne des événements spécifiques à la souris tels que    mouseover,  mouseout,  dblclick, etc. Les fonctionnalités qui s'exécutent en réponse à ces événements ne seront pas accessibles à l'aide d'autres mécanismes, tels que les contrôles du clavier.

+
Comme vous le savez peut-être, la plupart des interactions utilisateur sont implémentées dans JavaScript côté client à l'aide de gestionnaires d'événements, ce qui nous permet d'exécuter des fonctions en réponse à certains événements. Certains événements peuvent avoir des problèmes d'accessibilité. L'exemple principal que vous rencontrerez concerne des événements spécifiques à la souris tels que   mouseover,  mouseout,  dblclick, etc. Les fonctionnalités qui s'exécutent en réponse à ces événements ne seront pas accessibles à l'aide d'autres mécanismes, tels que les contrôles du clavier.

 
-
Pour résoudre de tels problèmes, vous devez doubler ces événements avec des événements similaires pouvant être activés par d'autres moyens (appelés gestionnaires d'événements indépendants du périphérique) —focus et blur (event) fourniraient une accessibilité aux utilisateurs de clavier. 

+
Pour résoudre de tels problèmes, vous devez doubler ces événements avec des événements similaires pouvant être activés par d'autres moyens (appelés gestionnaires d'événements indépendants du périphérique) —focus et blur (event) fourniraient une accessibilité aux utilisateurs de clavier. 

 
-
Regardons un exemple qui illustre cela. Considérons une image miniature ; quand elle est survolée ou ciblée (comme sur un catalogue de produits de commerce électronique) une version plus grande de l’image s'affiche.

+
Regardons un exemple qui illustre cela. Considérons une image miniature ; quand elle est survolée ou ciblée (comme sur un catalogue de produits de commerce électronique) une version plus grande de l’image s'affiche.

 
-
Nous avons créé un exemple très simple, que vous pouvez trouver sur Exemple d'événements de souris et de clavier (voir aussi le code source). Le code comporte deux fonctions qui affichent et cachent l'image agrandie ; ceux-ci sont gérés par les lignes suivantes qui les définissent en tant que gestionnaires d'événements :

+
Nous avons créé un exemple très simple, que vous pouvez trouver sur Exemple d'événements de souris et de clavier (voir aussi le code source). Le code comporte deux fonctions qui affichent et cachent l'image agrandie ; ceux-ci sont gérés par les lignes suivantes qui les définissent en tant que gestionnaires d'événements :

 
 
imgThumb.onmouseover = showImg;
 imgThumb.onmouseout = hideImg;
@@ -342,28 +340,28 @@ imgThumb.onmouseout = hideImg;
 imgThumb.onfocus = showImg;
 imgThumb.onblur = hideImg;

 
-
Les deux premières lignes exécutent les fonctions lorsque le pointeur de la souris survole et cesse de survoler la vignette, respectivement. Cela ne nous permettra toutefois pas d'accéder à la vue agrandie à l'aide du clavier ; pour cela, nous avons inclus les deux dernières lignes, qui exécutent les fonctions lorsque l'image est nette et floue (lorsque la mise au point s'arrête). Cela peut être fait en tapant sur l'image, car nous avons inclus  tabindex="0" dessus.

+
Les deux premières lignes exécutent les fonctions lorsque le pointeur de la souris survole et cesse de survoler la vignette, respectivement. Cela ne nous permettra toutefois pas d'accéder à la vue agrandie à l'aide du clavier ; pour cela, nous avons inclus les deux dernières lignes, qui exécutent les fonctions lorsque l'image est nette et floue (lorsque la mise au point s'arrête). Cela peut être fait en tapant sur l'image, car nous avons inclus  tabindex="0" dessus.

 
-
L'événement click est intéressant — cela semble dépendre de la souris, mais la plupart des navigateurs activent les gestionnaires d'événement element.onclick  après avoir  pressé Entrée  sur un lien ou un élément de formulaire ciblé, ou lorsqu'un tel élément est touché sur un écran tactile. Cependant, cela ne fonctionne pas par défaut lorsque vous autorisez un événement à ne pas être mis au point par défaut à l'aide de tabindex. Dans ce cas, vous devez détecter précisément le moment exact où cette touche est enfoncée (voir Remettre l'accessibilité au clavier).

+
L'événement click est intéressant — cela semble dépendre de la souris, mais la plupart des navigateurs activent les gestionnaires d'événement element.onclick après avoir  pressé Entrée  sur un lien ou un élément de formulaire ciblé, ou lorsqu'un tel élément est touché sur un écran tactile. Cependant, cela ne fonctionne pas par défaut lorsque vous autorisez un événement à ne pas être mis au point par défaut à l'aide de tabindex. Dans ce cas, vous devez détecter précisément le moment exact où cette touche est enfoncée (voir Remettre l'accessibilité au clavier).

 
-
Résumé

+
Résumé

 
-
Nous espérons que cet article vous a fourni beaucoup de détails et de compréhension sur les problèmes d'accessibilité liés à l'utilisation de CSS et de JavaScript sur les pages Web.

+
Nous espérons que cet article vous a fourni beaucoup de détails et de compréhension sur les problèmes d'accessibilité liés à l'utilisation de CSS et de JavaScript sur les pages Web.

 
-
Ensuite, WAI-ARIA !

+
Ensuite, WAI-ARIA !

 
 
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}

 
 

-
Dans ce module

+
Dans ce module

 
 
 

diff --git a/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.html b/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.html
index 392a00d82b..e81880d90d 100644
--- a/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.html
+++ b/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.html
@@ -15,10 +15,9 @@ translation-of: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and
 
 
L'objectif de ce test de connaissances est d'évaluer si vous maîtrisez les meilleures pratiques d'accessibilité en CSS et en JavaScript.

 
-

-  
Note :

-  
Vous pouvez tester les solutions dans les éditeurs interactifs ci-dessous, cependant il peut être plus utile de télécharger le code et d'utiliser un outil en ligne comme CodePen, jsFiddle ou Glitch pour travailler sur les exercices suivants.


-  Si vous bloquez, demandez-nous de l'aide — plus d'informations dans la section Évaluation ou aide supplémentaire en bas de la page.

+

+  
Note : Vous pouvez tester les solutions dans les éditeurs interactifs ci-dessous, cependant il peut être plus utile de télécharger le code et d'utiliser un outil en ligne comme CodePen, jsFiddle ou Glitch pour travailler sur les exercices suivants.

+  
Si vous bloquez, demandez-nous de l'aide — plus d'informations dans la section Évaluation ou aide supplémentaire en bas de la page.

 

 
 
Accessibilité en CSS - Exercice 1

@@ -31,8 +30,8 @@ translation-of: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and
 
 
{{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/css/css-a11y1.html", '100%', 700)}}

 
-

-  
Télécharger le code de départ de cet exercice pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.

+

+  
Note : Télécharger le code de départ de cet exercice pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.

 

 
 
Accessibilité en CSS - Exercice 2

@@ -50,8 +49,8 @@ translation-of: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and
 
 
{{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/css/css-a11y2.html", '100%', 700)}}

 
-

-  
Télécharger le code de départ de cet exercice pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.

+

+  
Note : Télécharger le code de départ de cet exercice pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.

 

 
 
Accessibilité en JavaScript - Exercice 1

@@ -60,8 +59,8 @@ translation-of: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and
 
 
Ce n'est hélas pas très accessible — dans l'état actuel des choses vous pouvez seulement utiliser la souris. Nous aimerions que vous ajoutiez du code HTML et JavaScript de façon à rendre l'application également utilisable avec un clavier.

 
-

-  
Télécharger le code de départ de cet exercice pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.

+

+  
Note : Télécharger le code de départ de cet exercice pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.

 

 
 
Évaluation ou aide supplémentaire

diff --git a/files/fr/learn/accessibility/html/index.html b/files/fr/learn/accessibility/html/index.html
index 70e128d05d..354bf4075f 100644
--- a/files/fr/learn/accessibility/html/index.html
+++ b/files/fr/learn/accessibility/html/index.html
@@ -21,11 +21,11 @@ original_slug: Apprendre/a11y/HTML
 
 
Une grande partie des contenus web peut être rendue accessible simplement en s'assurant d'utiliser les éléments HTML appropriés systématiquement. Cet article détaille comment HTML peut être utilisé pour un maximum d'accessibilité.

 
-
+

-   
+   
@@ -40,11 +40,11 @@ original_slug: Apprendre/a11y/HTML
 
 
Vous pouvez vous demander pourquoi c'est si important. Après tout, vous pouvez utiliser une combinaison de CSS et de JavaScript pour faire fonctionner n'importe quel élément HTML de la manière que vous souhaitez. Par exemple, un bouton de lecture pour une vidéo sur votre site pourrait être codé ainsi :

 
-
<div>Lire la vidéo</div>

+
<div>Lire la vidéo</div>
Mais comme vous le verrez en détail plus loin, il est beaucoup plus sensé d'utiliser le bon élément à cet effet :

 
-
<button>Lire la vidéo</button>

+
<button>Lire la vidéo</button>
Non seulement  <button> possède des styles adéquats par défaut (que vous voudrez probablement surcharger), il intègre aussi l'accès au clavier — on peut tabuler dessus, et l'activer avec la touche entrée.

 
@@ -59,7 +59,7 @@ original_slug: Apprendre/a11y/HTML
 
Continuons et jetons un œil au HTML accessible dans le détail.

-
Note : C'est une bonne idée d'avoir un lecteur d'écran configuré, pour tester les exemples ci-dessous. Voir notre guide pour gérer les problèmes courants d'accessibilité pour plus de détails.

+
Note : C'est une bonne idée d'avoir un lecteur d'écran configuré, pour tester les exemples ci-dessous. Voir notre guide pour gérer les problèmes courants d'accessibilité pour plus de détails.

 
Une bonne sémantique

@@ -76,7 +76,7 @@ original_slug: Apprendre/a11y/HTML
 
 
L'une des meilleures aides en accessibilité qu'un utilisateur de lecteur d'écran peut avoir est une bonne structure des titres, paragraphes, listes, etc. Un bon exemple sémantique devrait ressembler au code suivant :

 
-
<h1>Mon titre</h1>
+
<h1>Mon titre</h1>
 
 <p>Ceci est la premère section de mon document.</p>
 
@@ -107,7 +107,7 @@ original_slug: Apprendre/a11y/HTML
 
 
Les gens écrivent parfois des titres, des paragraphes, etc. utilisant le HTML de présentation et retours à la ligne, quelque chose comme ce qui suit :

 
-
<font size="7">Mon titre</font>
+
<font size="7">Mon titre</font>
 <br><br>
 Ceci est la première section de mon document.
 <br><br>
@@ -147,7 +147,7 @@ Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus int
 
 
Essayez notre exemple table-layout.html, qui ressemble à quelque chose comme ça :

 
-
<table width="1200">
+
<table width="1200">
       <!-- main heading row -->
       <tr id="heading">
         <td colspan="6">
@@ -212,194 +212,194 @@ Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus int
       </tr>
     </table>

 
-
Si vous essayez de naviguer à l'aide d'un lecteur d'écran, cela vous indiquera probablement qu'il existe un tableau à examiner (bien que certains lecteurs d'écran puissent deviner la différence entre les présentations de tableau et les tableaux de données). Vous devrez ensuite (en fonction du lecteur d’écran que vous utilisez) devoir accéder à la table en tant qu’objet et en examiner les caractéristiques séparément, puis sortir à nouveau de la table pour continuer à naviguer dans le contenu.

+
Si vous essayez de naviguer à l'aide d'un lecteur d'écran, cela vous indiquera probablement qu'il existe un tableau à examiner (bien que certains lecteurs d'écran puissent deviner la différence entre les présentations de tableau et les tableaux de données). Vous devrez ensuite (en fonction du lecteur d’écran que vous utilisez) devoir accéder à la table en tant qu’objet et en examiner les caractéristiques séparément, puis sortir à nouveau de la table pour continuer à naviguer dans le contenu.

 
-
Les structures de table sont un vestige du passé – elles semblaient logiques lorsque le support CSS n’était pas répandu dans les navigateurs, mais elles semaient la confusion chez les utilisateurs de lecteurs d’écran, tout en étant mauvaises pour de nombreuses autres raisons (utilisation abusive des tableaux, nécessite plus de balisage, design manquant de souplesse). Ne les utilisez pas !

+
Les structures de table sont un vestige du passé – elles semblaient logiques lorsque le support CSS n’était pas répandu dans les navigateurs, mais elles semaient la confusion chez les utilisateurs de lecteurs d’écran, tout en étant mauvaises pour de nombreuses autres raisons (utilisation abusive des tableaux, nécessite plus de balisage, design manquant de souplesse). Ne les utilisez pas !

 
-
Vous pouvez vérifier ces affirmations en comparant votre expérience antérieure avec un  exemple plus moderne de structure de site Web, qui pourrait ressembler à ceci :

+
Vous pouvez vérifier ces affirmations en comparant votre expérience antérieure avec un  exemple plus moderne de structure de site Web, qui pourrait ressembler à ceci :

 
-
<header>
-  <h1>Entête</h1>
+
<header>
+  <h1>Entête</h1>
 </header>
 
 <nav>
-  <!--  navigation principale ici  -->
+  <!--  navigation principale ici  -->
 </nav>
 
-<!--  Voici le contenu principal de notre page  -->
+<!--  Voici le contenu principal de notre page  -->
 <main>
 
-  <!--  Il contient un article  -->
+  <!--  Il contient un article  -->
   <article>
-    <h2>Intitulé de l'article</h2>
+    <h2>Intitulé de l'article</h2>
 
-    <!--  contenu de l'article ici  -->
+    <!--  contenu de l'article ici  -->
   </article>
 
   <aside>
-    <h2>en relation</h2>
+    <h2>en relation</h2>
 
-    <!--  à part le contenu ici  -->
+    <!--  à part le contenu ici  -->
   </aside>
 
 </main>
 
-<!--  Et voici notre pied de page principal utilisé dans toutes les pages de notre site Web. -->
+<!--  Et voici notre pied de page principal utilisé dans toutes les pages de notre site Web. -->
 
 <footer>
-  <!--  contenu du pied de page ici  -->
+  <!--  contenu du pied de page ici  -->
 </footer>

 
-
Si vous essayez notre exemple plus moderne de structure avec un lecteur d’écran, vous verrez que le balisage de présentation ne gêne plus ni ne rend la lecture du contenu confuse. Il est également beaucoup plus léger et plus petit en termes de taille de code, ce qui signifie une maintenance plus facile du code et une sollicitation moindre de la bande passante par l'utilisateur (particulièrement critique en cas de connexions lentes).

+
Si vous essayez notre exemple plus moderne de structure avec un lecteur d’écran, vous verrez que le balisage de présentation ne gêne plus ni ne rend la lecture du contenu confuse. Il est également beaucoup plus léger et plus petit en termes de taille de code, ce qui signifie une maintenance plus facile du code et une sollicitation moindre de la bande passante par l'utilisateur (particulièrement critique en cas de connexions lentes).

 
-
Une autre considération à prendre en compte lors de la création de dispositions consiste à utiliser des éléments sémantiques HTML5 comme dans l'exemple ci-dessus (voir Référence des éléments HTML). Vous pouvez créer une disposition en utilisant uniquement des éléments {{htmlelement("div")}} imbriqués, mais il est préférable d'utiliser des éléments de sectionnement appropriés pour envelopper votre navigation principale ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), en répétant des unités de contenu ({{htmlelement("article")}}),  etc. Elles fournissent une sémantique supplémentaire aux lecteurs d’écran (et à d’autres outils) pour donner à l’utilisateur des indices supplémentaires sur le contenu qu’il navigue (voir Prise en charge du lecteur d’écran pour les nouveaux éléments de section HTML5 pour une idée de la prise en charge du lecteur d’écran).

+
Une autre considération à prendre en compte lors de la création de dispositions consiste à utiliser des éléments sémantiques HTML5 comme dans l'exemple ci-dessus (voir Référence des éléments HTML). Vous pouvez créer une disposition en utilisant uniquement des éléments {{htmlelement("div")}} imbriqués, mais il est préférable d'utiliser des éléments de sectionnement appropriés pour envelopper votre navigation principale ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), en répétant des unités de contenu ({{htmlelement("article")}}),  etc. Elles fournissent une sémantique supplémentaire aux lecteurs d’écran (et à d’autres outils) pour donner à l’utilisateur des indices supplémentaires sur le contenu qu’il navigue (voir Prise en charge du lecteur d’écran pour les nouveaux éléments de section HTML5 pour une idée de la prise en charge du lecteur d’écran).

 
 

-
Note : Outre le fait que votre contenu présente une bonne sémantique et une présentation attrayante, il convient que son ordre source soit logique : vous pouvez toujours le placer où vous le souhaitez à l'aide de CSS par la suite, mais vous devez définir l'ordre exact des sources pour commencer. les utilisateurs de lecteur d’écran qui se liront auront du sens.

+
Note : Outre le fait que votre contenu présente une bonne sémantique et une présentation attrayante, il convient que son ordre source soit logique : vous pouvez toujours le placer où vous le souhaitez à l'aide de CSS par la suite, mais vous devez définir l'ordre exact des sources pour commencer. les utilisateurs de lecteur d’écran qui se liront auront du sens.

 

 
-
Contrôles de l'interface utilisateur

+
Contrôles de l'interface utilisateur

 
-
Par contrôles d'interface utilisateur, nous entendons les parties principales des documents web avec lesquelles les utilisateurs interagissent – le plus souvent des boutons, des liens et des contrôles de formulaire. Dans cette section, nous examinerons les problèmes d’accessibilité de base à prendre en compte lors de la création de tels contrôles. Des articles ultérieurs sur WAI-ARIA et le multimédia aborderont d'autres aspects de l'accessibilité de l'interface utilisateur.

+
Par contrôles d'interface utilisateur, nous entendons les parties principales des documents web avec lesquelles les utilisateurs interagissent – le plus souvent des boutons, des liens et des contrôles de formulaire. Dans cette section, nous examinerons les problèmes d’accessibilité de base à prendre en compte lors de la création de tels contrôles. Des articles ultérieurs sur WAI-ARIA et le multimédia aborderont d'autres aspects de l'accessibilité de l'interface utilisateur.

 
-
L'un des aspects clés de l'accessibilité des contrôles de l'interface utilisateur est que, par défaut, les navigateurs leur permettent d'être manipulés par le clavier. Vous pouvez essayer ceci en utilisant notre exemple accessibilité du clavier natif (voir le code source) – ouvrez-le dans un nouvel onglet et essayez d’appuyer sur la touche de tabulation; après quelques appuis, vous devriez voir le focus de l'onglet commencer à se déplacer à travers les différents éléments qui peuvent être mis au point ; les éléments focalisés se voient attribuer un style par défaut en surbrillance dans chaque navigateur (il diffère légèrement d’un navigateur à l’autre) afin que vous puissiez déterminer quel élément est ciblé.

+
L'un des aspects clés de l'accessibilité des contrôles de l'interface utilisateur est que, par défaut, les navigateurs leur permettent d'être manipulés par le clavier. Vous pouvez essayer ceci en utilisant notre exemple accessibilité du clavier natif (voir le code source) – ouvrez-le dans un nouvel onglet et essayez d’appuyer sur la touche de tabulation; après quelques appuis, vous devriez voir le focus de l'onglet commencer à se déplacer à travers les différents éléments qui peuvent être mis au point ; les éléments focalisés se voient attribuer un style par défaut en surbrillance dans chaque navigateur (il diffère légèrement d’un navigateur à l’autre) afin que vous puissiez déterminer quel élément est ciblé.

 
-

+

 
-
Vous pouvez ensuite appuyer sur Entrée/Retour pour suivre un lien sélectionné ou appuyer sur un bouton (nous avons inclus du JavaScript pour que les boutons alertent un message), ou commencer à taper pour saisir du texte dans une entrée de texte (les autres éléments de formulaire ont des contrôles différents, par exemple, l'élément  {{htmlelement("select")}} peut avoir ses options affichées et alterner entre les touches fléchées haut et bas). 

+
Vous pouvez ensuite appuyer sur Entrée/Retour pour suivre un lien sélectionné ou appuyer sur un bouton (nous avons inclus du JavaScript pour que les boutons alertent un message), ou commencer à taper pour saisir du texte dans une entrée de texte (les autres éléments de formulaire ont des contrôles différents, par exemple, l'élément  {{htmlelement("select")}} peut avoir ses options affichées et alterner entre les touches fléchées haut et bas). 

 
 

-
Note :  Différents navigateurs peuvent avoir différentes options de contrôle du clavier disponibles. Voir comment gérer les problèmes courants d'accessibilité pour plus de détails.

+
Note : Différents navigateurs peuvent avoir différentes options de contrôle du clavier disponibles. Voir comment gérer les problèmes courants d'accessibilité pour plus de détails.

 

 
-
Vous obtenez essentiellement ce comportement gratuitement, en utilisant simplement les éléments appropriés, par exemple :

+
Vous obtenez essentiellement ce comportement gratuitement, en utilisant simplement les éléments appropriés, par exemple :

 
-
<h1>Liens</h1>
+
<h1>Liens</h1>
 
-<p> Ceci est un lien vers  <a href="https://www.mozilla.org">Mozilla</a>.</p>
+<p> Ceci est un lien vers  <a href="https://www.mozilla.org">Mozilla</a>.</p>
 
-<p> Un autre lien, pour  <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
+<p> Un autre lien, pour  <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
 
-<h2>Boutons</h2>
+<h2>Boutons</h2>
 
 <p>
-  <button data-message="This is from the first button">Cliquez moi!</button>
-  <button data-message="This is from the second button"> Cliquez moi aussi !</button>
-  <button data-message="This is from the third button">Et moi!</button>
+  <button data-message="This is from the first button">Cliquez moi!</button>
+  <button data-message="This is from the second button"> Cliquez moi aussi !</button>
+  <button data-message="This is from the third button">Et moi!</button>
 </p>
 
 <h2>formulaire</h2>
 
 <form>
   <div>
-    <label for="name"> Remplis ton nom :</label>
+    <label for="name"> Remplis ton nom :</label>
     <input type="text" id="name" name="name">
   </div>
   <div>
-    <label for="age"> Entrez votre âge :</label>
+    <label for="age"> Entrez votre âge :</label>
     <input type="text" id="age" name="age">
   </div>
   <div>
-    <label for="mood"> Choisissez votre humeur :</label>
+    <label for="mood"> Choisissez votre humeur :</label>
     <select id="mood" name="mood">
-      <option>Heureux</option>
-      <option> Triste </option>
-      <option> Fâché </option>
-      <option> Préoccupé </option>
+      <option>Heureux</option>
+      <option> Triste </option>
+      <option> Fâché </option>
+      <option> Préoccupé </option>
     </select>
   </div>
 </form>

 
-
Cela signifie que vous devez utiliser des liens, des boutons, des éléments de formulaire et des étiquettes de manière appropriée (y compris l'élément  {{htmlelement("label")}} pour les contrôles de formulaire).

+
Cela signifie que vous devez utiliser des liens, des boutons, des éléments de formulaire et des étiquettes de manière appropriée (y compris l'élément  {{htmlelement("label")}} pour les contrôles de formulaire).

 
-
Cependant, il est encore une fois que les gens font parfois des choses étranges avec HTML. Par exemple, vous voyez parfois des boutons balisés en utilisant {{htmlelement("div")}}s,  par exemple :

+
Cependant, il est encore une fois que les gens font parfois des choses étranges avec HTML. Par exemple, vous voyez parfois des boutons balisés en utilisant {{htmlelement("div")}}s,  par exemple :

 
-
<div data-message="This is from the first button"> Cliquez-moi!</div>
-<div data-message="This is from the second button">  Cliquez moi aussi!</div>
-<div data-message="This is from the third button"> Et moi!</div>

+
<div data-message="This is from the first button"> Cliquez-moi!</div>
+<div data-message="This is from the second button">  Cliquez moi aussi!</div>
+<div data-message="This is from the third button"> Et moi!</div>

 
-
Il est toutefois déconseillé d’utiliser un tel code. Vous perdriez immédiatement l’accessibilité au clavier natif que vous auriez obtenue si vous aviez utilisé des éléments  {{htmlelement("button")}}. De plus, vous n’obtenez aucun des styles CSS par défaut que les boutons ont.

+
Il est toutefois déconseillé d’utiliser un tel code. Vous perdriez immédiatement l’accessibilité au clavier natif que vous auriez obtenue si vous aviez utilisé des éléments  {{htmlelement("button")}}. De plus, vous n’obtenez aucun des styles CSS par défaut que les boutons ont.

 
-
Remettre l'accessibilité au clavier

+
Remettre l'accessibilité au clavier

 
-
Ajouter de tels avantages en retour demande un peu de travail (vous pouvez utiliser un exemple de code dans notre exemple fake-div-buttons.html –  voir également le source code). Ici, nous avons donné à nos faux boutons <div> la possibilité se focaliser (y compris via la touche Tab) en donnant à chacun l'attribut tabindex="0" :

+
Ajouter de tels avantages en retour demande un peu de travail (vous pouvez utiliser un exemple de code dans notre exemple fake-div-buttons.html –  voir également le source code). Ici, nous avons donné à nos faux boutons <div> la possibilité se focaliser (y compris via la touche Tab) en donnant à chacun l'attribut tabindex="0" :

 
-
<div data-message="This is from the first button" tabindex="0"> Cliquez-moi!</div>
-<div data-message="This is from the second button" tabindex="0"> Cliquez moi aussi!</div>
-<div data-message="This is from the third button" tabindex="0"> Et moi!</div>

+
<div data-message="This is from the first button" tabindex="0"> Cliquez-moi!</div>
+<div data-message="This is from the second button" tabindex="0"> Cliquez moi aussi!</div>
+<div data-message="This is from the third button" tabindex="0"> Et moi!</div>

 
-
Fondamentalement, l'attribut {{htmlattrxref("tabindex")}} est principalement destiné à permettre aux éléments que l'on peut cibler avec la touche Tab d'avoir un ordre de tabulation personnalisé (spécifié dans l'ordre numérique positif), au lieu d'être simplement tabulés dans leur ordre source par défaut. C'est presque toujours une mauvaise idée, car cela peut causer une confusion majeure. Utilisez-le uniquement si vous en avez vraiment besoin, par exemple si la mise en page affiche les éléments dans un ordre visuel très différent de celui du code source et si vous souhaitez que les éléments fonctionnent de manière plus logique. Il y a deux autres options pour tabindex :

+
Fondamentalement, l'attribut {{htmlattrxref("tabindex")}} est principalement destiné à permettre aux éléments que l'on peut cibler avec la touche Tab d'avoir un ordre de tabulation personnalisé (spécifié dans l'ordre numérique positif), au lieu d'être simplement tabulés dans leur ordre source par défaut. C'est presque toujours une mauvaise idée, car cela peut causer une confusion majeure. Utilisez-le uniquement si vous en avez vraiment besoin, par exemple si la mise en page affiche les éléments dans un ordre visuel très différent de celui du code source et si vous souhaitez que les éléments fonctionnent de manière plus logique. Il y a deux autres options pour tabindex :

 
 
    
- 
  • tabindex="0" – comme indiqué ci-dessus, cette valeur permet aux éléments qui ne sont pas normalement tabulables de le devenir. C’est la valeur la plus utile de tabindex.
    • 
- 
  • tabindex="-1" – cela permet aux éléments qui ne sont normalement pas tabulables d'être ciblés par le programme, par ex. via JavaScript, ou en tant que cible de liens.
    • 
+ 
  • tabindex="0" – comme indiqué ci-dessus, cette valeur permet aux éléments qui ne sont pas normalement tabulables de le devenir. C’est la valeur la plus utile de tabindex.
    • 
+ 
  • tabindex="-1" – cela permet aux éléments qui ne sont normalement pas tabulables d'être ciblés par le programme, par ex. via JavaScript, ou en tant que cible de liens.
    • 
 

 
-
Bien que l’addition ci-dessus nous permette de tabuler les boutons, elle ne nous permet pas de les activer via la touche Entrée/Retour. Pour ce faire, nous avons dû ajouter le bout de code JavaScript suivant :

+
Bien que l’addition ci-dessus nous permette de tabuler les boutons, elle ne nous permet pas de les activer via la touche Entrée/Retour. Pour ce faire, nous avons dû ajouter le bout de code JavaScript suivant :

 
-
document.onkeydown = function(e) {
+
document.onkeydown = function(e) {
   if(e.keyCode === 13) { // The Enter/Return key
     document.activeElement.onclick(e);
   }
-}

+}

 
-
Ici, nous ajoutons un écouteur à l’objet document pour détecter le moment où un bouton a été appuyé sur le clavier. Nous vérifions quel bouton a été pressé via la propriété  keyCode de l'objet événement; s'il s'agit du code clé qui correspond  Return/Enter, nous exécutons la fonction stockée dans le gestionnaire du bouton   onclick  à l'aide de document.activeElement.onclick(). activeElement nous donne l'élément qui est actuellement ciblé sur la page.

+
Ici, nous ajoutons un écouteur à l’objet document pour détecter le moment où un bouton a été appuyé sur le clavier. Nous vérifions quel bouton a été pressé via la propriété  keyCode de l'objet événement; s'il s'agit du code clé qui correspond  Return/Enter, nous exécutons la fonction stockée dans le gestionnaire du bouton   onclick  à l'aide de document.activeElement.onclick(). activeElement nous donne l'élément qui est actuellement ciblé sur la page.

 
 

-
Note : N'oubliez pas que cette technique ne fonctionnera que si vous définissez vos gestionnaires d'événements d'origine via les propriétés du gestionnaire d'événements (par exemple, onclick), addEventListener ne fonctionnera pas.

+
Note : N'oubliez pas que cette technique ne fonctionnera que si vous définissez vos gestionnaires d'événements d'origine via les propriétés du gestionnaire d'événements (par exemple, onclick), addEventListener ne fonctionnera pas.

 

 
-
C’est beaucoup de tracas supplémentaire pour reconstruire la fonctionnalité. Et il y aura sûrement d’autres problèmes. Mieux vaut utiliser le bon élément pour le bon travail en premier lieu.

+
C’est beaucoup de tracas supplémentaire pour reconstruire la fonctionnalité. Et il y aura sûrement d’autres problèmes. Mieux vaut utiliser le bon élément pour le bon travail en premier lieu.

 
-
Étiquettes de texte significatives

+
Étiquettes de texte significatives

 
-
Les étiquettes de texte de contrôle UI sont très utiles pour tous les utilisateurs, mais leur mise au point est particulièrement importante pour les utilisateurs handicapés.

+
Les étiquettes de texte de contrôle UI sont très utiles pour tous les utilisateurs, mais leur mise au point est particulièrement importante pour les utilisateurs handicapés.

 
-
Vous devez vous assurer que les libellés des boutons et des liens sont compréhensibles et distinctifs. Ne vous contentez pas d'utiliser « Cliquez ici » pour vos étiquettes, car les utilisateurs et utilisatrices de lecteur d'écran créent parfois une liste de boutons et de contrôles de formulaire. La capture d'écran suivante montre nos commandes répertoriées par VoiceOver sur Mac.

+
Vous devez vous assurer que les libellés des boutons et des liens sont compréhensibles et distinctifs. Ne vous contentez pas d'utiliser « Cliquez ici » pour vos étiquettes, car les utilisateurs et utilisatrices de lecteur d'écran créent parfois une liste de boutons et de contrôles de formulaire. La capture d'écran suivante montre nos commandes répertoriées par VoiceOver sur Mac.

 
-

+

 
-
Assurez-vous que vos étiquettes ont une signification hors contexte, qu'elles soient lues séparément ou dans le contexte du paragraphe dans lequel elles se trouvent. Par exemple, voici un exemple de texte de lien de qualité :

+
Assurez-vous que vos étiquettes ont une signification hors contexte, qu'elles soient lues séparément ou dans le contexte du paragraphe dans lequel elles se trouvent. Par exemple, voici un exemple de texte de lien de qualité :

 
-
<p> Les baleines sont vraiment des créatures géniales . <a href="whales.html"> En savoir plus sur les baleines </a>.</p>

+
<p> Les baleines sont vraiment des créatures géniales . <a href="whales.html"> En savoir plus sur les baleines </a>.</p>

 
-
c'est un mauvais texte du lien :

+
c'est un mauvais texte du lien :

 
-
<p> Les baleines sont des créatures vraiment impressionnantes. Pour en savoir plus sur les baleines,  <a href="whales.html">cliquez ici</a>.</p>
+
<p> Les baleines sont des créatures vraiment impressionnantes. Pour en savoir plus sur les baleines,  <a href="whales.html">cliquez ici</a>.</p>
 

 
 

-
Note:Vous pouvez trouver beaucoup plus d'informations sur l'implémentation de liens et les meilleures pratiques dans notre article sur la création d'hyperliens. Vous pouvez également voir quelques bons et mauvais exemples dans Bons-liens.html et Mauvais-liens.html.

+
Note : Vous pouvez trouver beaucoup plus d'informations sur l'implémentation de liens et les meilleures pratiques dans notre article sur la création d'hyperliens. Vous pouvez également voir quelques bons et mauvais exemples dans Bons-liens.html et Mauvais-liens.html.

 

 
-
Les libellés de formulaire sont également importantes pour vous donner un indice sur ce que vous devez entrer dans chaque entrée de formulaire. Ce qui suit semble être un exemple assez raisonnable :

+
Les libellés de formulaire sont également importantes pour vous donner un indice sur ce que vous devez entrer dans chaque entrée de formulaire. Ce qui suit semble être un exemple assez raisonnable :

 
-
 Remplis ton nom : <input type="text" id="name" name="name">

+
 Remplis ton nom : <input type="text" id="name" name="name">

 
-
Cependant, ce n'est pas très utile pour les utilisateurs handicapés. Dans l'exemple ci-dessus, rien n'associe de manière non équivoque l'étiquette à la saisie de formulaire et explique clairement comment la remplir si vous ne la voyez pas. Si vous y accédez avec certains lecteurs d’écran, vous ne recevrez peut-être qu’une description du type « éditer le texte".

+
Cependant, ce n'est pas très utile pour les utilisateurs handicapés. Dans l'exemple ci-dessus, rien n'associe de manière non équivoque l'étiquette à la saisie de formulaire et explique clairement comment la remplir si vous ne la voyez pas. Si vous y accédez avec certains lecteurs d’écran, vous ne recevrez peut-être qu’une description du type « éditer le texte".

 
-
Ce qui suit est un exemple bien meilleur :

+
Ce qui suit est un exemple bien meilleur :

 
-
<div>
-  <label for="name">Entrez votre nom:</label>
+
<div>
+  <label for="name">Entrez votre nom:</label>
   <input type="text" id="name" name="name">
-</div>

+</div>

 
-
Avec le code comme celui-ci, le label sera clairement associée à input; la description ressemblera davantage à "Entrez votre nom: éditez le texte".

+
Avec le code comme celui-ci, le label sera clairement associée à input; la description ressemblera davantage à "Entrez votre nom: éditez le texte".

 
-

+

 
-
En prime, dans la plupart des navigateurs, associer a un label à une  form input signifie que vous pouvez cliquer sur celle-ci pour sélectionner / activer l'élément  label. Cela donne à input une zone de résultats plus grande, ce qui facilite la sélection

+
En prime, dans la plupart des navigateurs, associer a un label à une  form input signifie que vous pouvez cliquer sur celle-ci pour sélectionner / activer l'élément  label. Cela donne à input une zone de résultats plus grande, ce qui facilite la sélection

 
 

-
Note:vous pouvez voir des exemples de bonnes et de mauvaises de formulaire dans exemple de bon formulaire et exemple de mauvais formulaire.

+
Note : vous pouvez voir des exemples de bonnes et de mauvaises de formulaire dans exemple de bon formulaire et exemple de mauvais formulaire.

 

 
-
Tableaux de données accessibles

+
Tableaux de données accessibles

 
-
Une table de données de base peut être écrite avec un balisage très simple, par exemple :

+
Une table de données de base peut être écrite avec un balisage très simple, par exemple :

 
-
<table>
+
<table>
   <tr>
     <td>Nom</td>
     <td>Age</td>
@@ -420,112 +420,110 @@ Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus int
     <td>5</td>
     <td>Femelle</td>
   </tr>
-</table>

+</table>

 
-
Mais cela pose des problèmes : un utilisateur de lecteur d’écran ne peut pas associer des lignes ou des colonnes en tant que groupes de données. Pour ce faire, vous devez savoir quelles sont les lignes d'en-tête et si elles sont dirigées vers le haut, des colonnes, etc. Cela ne peut être fait que visuellement pour le tableau ci-dessus (voir bad-table.html et essayez vous-même l'exemple).

+
Mais cela pose des problèmes : un utilisateur de lecteur d’écran ne peut pas associer des lignes ou des colonnes en tant que groupes de données. Pour ce faire, vous devez savoir quelles sont les lignes d'en-tête et si elles sont dirigées vers le haut, des colonnes, etc. Cela ne peut être fait que visuellement pour le tableau ci-dessus (voir bad-table.html et essayez vous-même l'exemple).

 
-
Regardez maintenant notre  tableau d'exemple sur les groupes punk – vous pouvez voir quelques aides à l'accessibilité au travail ici :

+
Regardez maintenant notre  tableau d'exemple sur les groupes punk – vous pouvez voir quelques aides à l'accessibilité au travail ici :

 
 
    
- 
  • Les en-têtes de tableau sont définis à l'aide d'éléments {{htmlelement("th")}} —  vous pouvez également spécifier s'il s'agit d'en-têtes de lignes ou de colonnes à l'aide de l'attribut  scope. Cela vous donne des groupes complets de données qui peuvent être consommés par les lecteurs d'écran en tant qu'unités simples
    • 
- 
  • L'élément {{htmlelement("caption")}} et l'attribut summary   <table> effectuent tous deux des travaux similaires. Ils agissent en tant que texte alternatif pour une table, offrant ainsi à un utilisateur de lecteur d'écran un résumé rapide et utile du contenu de la table.   <caption> est généralement préféré car il rend son contenu accessible aux utilisateurs malvoyants, qui pourraient également le trouver utile. Vous n'avez pas vraiment besoin des deux.
    • 
+ 
  • Les en-têtes de tableau sont définis à l'aide d'éléments {{htmlelement("th")}} —  vous pouvez également spécifier s'il s'agit d'en-têtes de lignes ou de colonnes à l'aide de l'attribut  scope. Cela vous donne des groupes complets de données qui peuvent être consommés par les lecteurs d'écran en tant qu'unités simples
    • 
+ 
  • L'élément {{htmlelement("caption")}} et l'attribut summary   <table> effectuent tous deux des travaux similaires. Ils agissent en tant que texte alternatif pour une table, offrant ainsi à un utilisateur de lecteur d'écran un résumé rapide et utile du contenu de la table.   <caption> est généralement préféré car il rend son contenu accessible aux utilisateurs malvoyants, qui pourraient également le trouver utile. Vous n'avez pas vraiment besoin des deux.
    • 
 

 
 

-
Note : voir notre article  Tableaux HTML : dispositions avancées et accessibilité  pour plus de détails sur les tables de données accessibles.

+
Note : voir notre article  Tableaux HTML : dispositions avancées et accessibilité  pour plus de détails sur les tables de données accessibles.

 

 
-
Alternatives textuelles

+
Alternatives textuelles

 
-
Alors que le contenu textuel est intrinsèquement accessible, il n'en est pas de même pour le contenu multimédia : le contenu image/vidéo ne peut pas être vu par les personnes malvoyantes et le contenu audio ne peut pas être entendu par les malentendants. Nous verrons plus loin le contenu audio et vidéo dans l'article multimédia accessible, mais pour cet article, nous examinerons l'accessibilité pour l'élément humble {{htmlelement("img")}}.

+
Alors que le contenu textuel est intrinsèquement accessible, il n'en est pas de même pour le contenu multimédia : le contenu image/vidéo ne peut pas être vu par les personnes malvoyantes et le contenu audio ne peut pas être entendu par les malentendants. Nous verrons plus loin le contenu audio et vidéo dans l'article multimédia accessible, mais pour cet article, nous examinerons l'accessibilité pour l'élément humble {{htmlelement("img")}}.

 
-
Nous avons un exemple simple écrit, accessible-image.html, comporte quatre copies de la même image :

+
Nous avons un exemple simple écrit, accessible-image.html, comporte quatre copies de la même image :

 
-
<img src="dinosaur.png">
+
<img src="dinosaur.png">
 
 <img src="dinosaur.png"
-     alt=" Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées.">
+     alt="Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées.">
 
 <img src="dinosaur.png"
-     alt=" Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées."
-     title=" Le dinosaure rouge de Mozilla ">
+     alt="Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées."
+     title="Le dinosaure rouge de Mozilla ">
 
 
 <img src="dinosaur.png" aria-labelledby="dino-label">
 
-<p id="dino-label"> Tyrannosaure rouge Rex de Mozilla: Dinosaure à deux jambes, debout comme un être humain, avec des armes légères et une grosse tête avec beaucoup de dents acérées.</p>
-

+<p id="dino-label"> Tyrannosaure rouge Rex de Mozilla: Dinosaure à deux jambes, debout comme un être humain, avec des armes légères et une grosse tête avec beaucoup de dents acérées.</p>
+

 
-
La première image, lorsqu'elle est visualisée par un lecteur d'écran, n'offre pas beaucoup d'aide à l'utilisateur. VoiceOver, par exemple, lit « /dinosaur.png, image ». Il lit le nom du fichier pour essayer de fournir de l'aide. Dans cet exemple, l'utilisateur ou l’utilisatrice saura au moins qu'il s'agit d'un dinosaure, mais les fichiers peuvent souvent être chargés avec des noms de fichiers générés par une machine (par exemple, à partir d'un appareil photo numérique) et ces noms de fichiers ne fourniront probablement aucun contexte au contenu de l'image.

+
La première image, lorsqu'elle est visualisée par un lecteur d'écran, n'offre pas beaucoup d'aide à l'utilisateur. VoiceOver, par exemple, lit « /dinosaur.png, image ». Il lit le nom du fichier pour essayer de fournir de l'aide. Dans cet exemple, l'utilisateur ou l’utilisatrice saura au moins qu'il s'agit d'un dinosaure, mais les fichiers peuvent souvent être chargés avec des noms de fichiers générés par une machine (par exemple, à partir d'un appareil photo numérique) et ces noms de fichiers ne fourniront probablement aucun contexte au contenu de l'image.

 
 

-
Note: c'est pourquoi vous ne devriez jamais inclure de contenu textuel dans une image. Les lecteurs d'écran ne peuvent tout simplement pas y accéder. Il y a aussi d'autres inconvénients - vous ne pouvez pas le sélectionner et le copier/coller. Juste ne le faite pas !

+
Note : c'est pourquoi vous ne devriez jamais inclure de contenu textuel dans une image. Les lecteurs d'écran ne peuvent tout simplement pas y accéder. Il y a aussi d'autres inconvénients - vous ne pouvez pas le sélectionner et le copier/coller. Juste ne le faite pas !

 

 
-
Quand un lecteur d'écran rencontre la deuxième image, il lit l'intégralité de l'attribut alt – « Un Tyrannosaure Rex rouge : Un dinosaure à deux pattes se tenant droit comme un humain, avec des armes de petit calibre et une grosse tête avec beaucoup de dents acérées. »

+
Quand un lecteur d'écran rencontre la deuxième image, il lit l'intégralité de l'attribut alt – « Un Tyrannosaure Rex rouge : Un dinosaure à deux pattes se tenant droit comme un humain, avec des armes de petit calibre et une grosse tête avec beaucoup de dents acérées. »

 
-
Cela met en évidence l’importance non seulement d’utiliser des noms de fichiers significatifs au cas où ce qui est appelé alt text n’est pas disponible, mais aussi de s’assurer que le texte alternatif est fourni dans les attributs  alt chaque fois que possible. Notez que le contenu de l'attribut  alt doit toujours fournir une représentation directe de l'image et de ce qu'elle transmet visuellement. Aucune connaissance personnelle ou description supplémentaire ne devrait être incluse ici, car elle n’est pas utile pour les personnes qui n’ont jamais rencontré l’image auparavant.

+
Cela met en évidence l’importance non seulement d’utiliser des noms de fichiers significatifs au cas où ce qui est appelé alt text n’est pas disponible, mais aussi de s’assurer que le texte alternatif est fourni dans les attributs  alt chaque fois que possible. Notez que le contenu de l'attribut  alt doit toujours fournir une représentation directe de l'image et de ce qu'elle transmet visuellement. Aucune connaissance personnelle ou description supplémentaire ne devrait être incluse ici, car elle n’est pas utile pour les personnes qui n’ont jamais rencontré l’image auparavant.

 
-
Une chose à considérer est de savoir si vos images ont une signification dans votre contenu, ou si elles sont purement décoratives, n’ont donc aucune signification. S'ils sont décoratifs, il est préférable de les inclure dans la page en tant qu'images d'arrière-plan CSS.

+
Une chose à considérer est de savoir si vos images ont une signification dans votre contenu, ou si elles sont purement décoratives, n’ont donc aucune signification. S'ils sont décoratifs, il est préférable de les inclure dans la page en tant qu'images d'arrière-plan CSS.

 
 

-
Note : Lisez Les images en HTML et Images adaptatives pour plus d’informations sur la mise en œuvre des images et les meilleures pratiques.

+
Note : Lisez Les images en HTML et Images adaptatives pour plus d’informations sur la mise en œuvre des images et les meilleures pratiques.

 

 
-
Si vous souhaitez fournir des informations contextuelles supplémentaires, vous devez les insérer dans le texte entourant l'image ou dans un attribut title, comme indiqué ci-dessus. Dans ce cas, la plupart des lecteurs d’écran liront le texte alternatif, l’attribut title et le nom du fichier. En outre, les navigateurs affichent le texte du titre sous forme d’infos lors du survol de la souris.

+
Si vous souhaitez fournir des informations contextuelles supplémentaires, vous devez les insérer dans le texte entourant l'image ou dans un attribut title, comme indiqué ci-dessus. Dans ce cas, la plupart des lecteurs d’écran liront le texte alternatif, l’attribut title et le nom du fichier. En outre, les navigateurs affichent le texte du titre sous forme d’infos lors du survol de la souris.

 
-

+

 
-
Jetons un autre coup d'oeil à la quatrième méthode :

+
Jetons un autre coup d'oeil à la quatrième méthode :

 
-
<img src="dinosaur.png" aria-labelledby="dino-label">
+
<img src="dinosaur.png" aria-labelledby="dino-label">
 
-<p id="dino-label"> Le Tyrannosaure rouge Mozilla  ... </p>

+<p id="dino-label"> Le Tyrannosaure rouge Mozilla  ... </p>

 
-
Dans ce cas, nous n'utilisons pas du tout l'attribut alt Nous avons plutôt présenté notre description de l'image sous forme de paragraphe de texte normal, en lui attribuant un  id puis nous avons utilisé l'attribut  aria-labelledby pour : faire référence à cela  id, ce qui amène les lecteurs d’écran à utiliser ce paragraphe comme alt  text/label pour cette image. Ceci est particulièrement utile si vous souhaitez utiliser le même texte comme étiquette pour plusieurs images – quelque chose qui n’est pas possible avec alt.

+
Dans ce cas, nous n'utilisons pas du tout l'attribut alt Nous avons plutôt présenté notre description de l'image sous forme de paragraphe de texte normal, en lui attribuant un  id puis nous avons utilisé l'attribut  aria-labelledby pour : faire référence à cela  id, ce qui amène les lecteurs d’écran à utiliser ce paragraphe comme alt  text/label pour cette image. Ceci est particulièrement utile si vous souhaitez utiliser le même texte comme étiquette pour plusieurs images – quelque chose qui n’est pas possible avec alt.

 
 

-
Note: aria-labelledby fait partie de la spécification WAI ARIA, qui permet aux développeurs d'ajouter une sémantique supplémentaire à leur balisage afin d'améliorer l'accessibilité du lecteur d'écran, le cas échéant. Pour en savoir plus sur son fonctionnement, lisez notre article WAI-ARIA basic.

+
Note : aria-labelledby fait partie de la spécification WAI ARIA, qui permet aux développeurs d'ajouter une sémantique supplémentaire à leur balisage afin d'améliorer l'accessibilité du lecteur d'écran, le cas échéant. Pour en savoir plus sur son fonctionnement, lisez notre article WAI-ARIA basic.

 

 
-
Autres mécanismes alternatifs de texte

+
Autres mécanismes alternatifs de texte

 
-
Les images ont également d'autres mécanismes disponibles pour fournir un texte descriptif. Par exemple, il existe un attribut longdesc destiné à pointer sur un document web distinct contenant une description étendue de l'image, par exemple :

+
Les images ont également d'autres mécanismes disponibles pour fournir un texte descriptif. Par exemple, il existe un attribut longdesc destiné à pointer sur un document web distinct contenant une description étendue de l'image, par exemple :

 
-

-<img src="dinosaur.png" longdesc="dino-info.html">

+
+<img src="dinosaur.png" longdesc="dino-info.html">

 
-
Cela semble être une bonne idée, en particulier pour les infographies telles que les grands graphiques contenant de nombreuses informations, qui pourraient peut-être être représentées sous forme de tableau de données accessible (voir section précédente). Cependant, longdesc n’est pas toujours pris en charge par les lecteurs d’écran et le contenu est totalement inaccessible aux utilisateurs autres que les lecteurs d’écran. Il est sans doute préférable d’inclure la description longue sur la même page que l’image, ou d’y accéder par un lien régulier.

+
Cela semble être une bonne idée, en particulier pour les infographies telles que les grands graphiques contenant de nombreuses informations, qui pourraient peut-être être représentées sous forme de tableau de données accessible (voir section précédente). Cependant, longdesc n’est pas toujours pris en charge par les lecteurs d’écran et le contenu est totalement inaccessible aux utilisateurs autres que les lecteurs d’écran. Il est sans doute préférable d’inclure la description longue sur la même page que l’image, ou d’y accéder par un lien régulier.

 
-
HTML5 comprend deux nouveaux éléments  — {{htmlelement("figure")}} et {{htmlelement("figcaption")}} —  qui sont supposés associer une figure quelconque (ce peut être n'importe quoi, pas nécessairement une image) à une légende de figure :

+
HTML5 comprend deux nouveaux éléments  — {{htmlelement("figure")}} et {{htmlelement("figcaption")}} —  qui sont supposés associer une figure quelconque (ce peut être n'importe quoi, pas nécessairement une image) à une légende de figure :

 
-
<figure>
-  <img src="dinosaur.png" alt=" Le Mozilla Tyrannosaurus ">
-  <figcaption> Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées .</figcaption>
-</figure>

+
<figure>
+  <img src="dinosaur.png" alt="Le Mozilla Tyrannosaurus ">
+  <figcaption> Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées .</figcaption>
+</figure>

 
-
Malheureusement, la plupart des lecteurs d’écran ne semblent pas encore associer de légendes à leurs figures, mais la structure des éléments est utile pour le style CSS. Elle permet également de placer une description de l’image à côté de la source.

+
Malheureusement, la plupart des lecteurs d’écran ne semblent pas encore associer de légendes à leurs figures, mais la structure des éléments est utile pour le style CSS. Elle permet également de placer une description de l’image à côté de la source.

 
-
Attributs alt vides

+
Attributs alt vides

 
-

+
 <h3>
   <img src="article-icon.png" alt="">
-   Tyrannosaurus Rex: le roi des dinosaures 
-</h3>

+  Tyrannosaurus Rex: le roi des dinosaures 
+</h3>

 
-
Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle. Vous remarquerez dans l'exemple de code ci-dessus que l'attribut   alt  de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement « image », ou similaire) .

+
Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle. Vous remarquerez dans l'exemple de code ci-dessus que l'attribut   alt  de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement « image », ou similaire) .

 
-
La raison d'utiliser un vide alt au lieu de ne pas l'inclure est due au fait que de nombreux lecteurs d'écran annoncent l'URL complète de l'image si aucun  alt n'est fourni. Dans l'exemple ci-dessus, l'image agit comme une décoration visuelle de l'en-tête auquel elle est associée. Dans ce cas, et dans les cas où une image est uniquement une décoration et n'a pas de valeur de contenu, vous devez mettre un vide  alt sur vos images. Une autre alternative consiste à utiliser l'attribut aria role role = "presentation" – cela empêche également les lecteurs d'écrans de lire du texte alternatif.

+
La raison d'utiliser un vide alt au lieu de ne pas l'inclure est due au fait que de nombreux lecteurs d'écran annoncent l'URL complète de l'image si aucun  alt n'est fourni. Dans l'exemple ci-dessus, l'image agit comme une décoration visuelle de l'en-tête auquel elle est associée. Dans ce cas, et dans les cas où une image est uniquement une décoration et n'a pas de valeur de contenu, vous devez mettre un vide  alt sur vos images. Une autre alternative consiste à utiliser l'attribut aria role role = "presentation" – cela empêche également les lecteurs d'écrans de lire du texte alternatif.

 
 

-
Note : si possible, vous devriez utiliser CSS pour afficher des images qui ne sont que des décorations.

+
Note : si possible, vous devriez utiliser CSS pour afficher des images qui ne sont que des décorations.

 

 
-

-
Résumé

-

+
Résumé

 
-
Vous devriez maintenant bien connaître l'écriture HTML accessible pour la plupart des cas. Notre article sur les bases de WAI-ARIA comblera également certaines lacunes dans cette connaissance, mais cet article s’occupe des bases. Ensuite, nous allons explorer CSS et JavaScript, et comment l’accessibilité est affectée par leur bon ou mauvais usage.

+
Vous devriez maintenant bien connaître l'écriture HTML accessible pour la plupart des cas. Notre article sur les bases de WAI-ARIA comblera également certaines lacunes dans cette connaissance, mais cet article s’occupe des bases. Ensuite, nous allons explorer CSS et JavaScript, et comment l’accessibilité est affectée par leur bon ou mauvais usage.

 
 
{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}

diff --git a/files/fr/learn/accessibility/index.html b/files/fr/learn/accessibility/index.html
index 3a3d54ee77..0b9b6f493f 100644
--- a/files/fr/learn/accessibility/index.html
+++ b/files/fr/learn/accessibility/index.html
@@ -14,14 +14,14 @@ original_slug: Apprendre/a11y
 ---
 
{{LearnSidebar}}

 
-
Apprendre le HTML, le CSS et le JavaScript est utile si vous voulez devenir développeur web, mais vos connaissances devront aller au delà de la simple utilisation des technologies — vous devrez les utiliser de manière responsable, de la bonne manière, de façon à maximiser l'audience de vos sites web et ne priver personne de leur usage. Pour y parvenir, vous devrez respecter les bonnes pratiques (lesquelles sont démontrées à travers les sujets du HTML, du CSS et du JavaScript), effectuer des tests sur les différents navigateurs et prendre l'accessibilité en considération dès le départ. Dans ce module, nous allons traiter de cette dernière en détail.

+
Apprendre le HTML, le CSS et le JavaScript est utile si vous voulez devenir développeur web, mais vos connaissances devront aller au delà de la simple utilisation des technologies — vous devrez les utiliser de manière responsable, de la bonne manière, de façon à maximiser l'audience de vos sites web et ne priver personne de leur usage. Pour y parvenir, vous devrez respecter les bonnes pratiques (lesquelles sont démontrées à travers les sujets du HTML, du CSS et du JavaScript), effectuer des tests sur les différents navigateurs et prendre l'accessibilité en considération dès le départ. Dans ce module, nous allons traiter de cette dernière en détail.

 
 
Prérequis

 
 
Pour tirer le meilleur parti de ce module, il serait judicieux de parcourir les sections relatives à HTML, CSS et JavaScript en premier (au moins les deux premiers modules de chacune de ces sections) ou, peut-être encore mieux, de travailler les parties pertinentes du module d'accessibilité au fur et à mesure que vous travaillez les sujets technologiques connexes.

 
 

-
Note : Si vous travaillez sur un ordinateur, une tablette ou un autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code dans un programme de code en ligne tel que JSBin ou Thimble.

+
Note : Si vous travaillez sur un ordinateur, une tablette ou un autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code dans un programme de code en ligne tel que JSBin ou Thimble.

 

 
 
Guides

diff --git a/files/fr/learn/accessibility/mobile/index.html b/files/fr/learn/accessibility/mobile/index.html
index 893693f212..62de168f05 100644
--- a/files/fr/learn/accessibility/mobile/index.html
+++ b/files/fr/learn/accessibility/mobile/index.html
@@ -16,297 +16,295 @@ original_slug: Apprendre/a11y/Mobile
 
 
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}

 
-
L'accès Web sur les appareils mobiles étant si populaire et les plates-formes populaires telles qu'IOS et Android disposant d'outils d'aide à l'accessibilité complets, il est important de prendre en compte l'accessibilité de votre contenu Web sur ces plates-formes. Cet article examine les considérations relatives à l'accessibilité spécifiques aux mobiles.

+
L'accès Web sur les appareils mobiles étant si populaire et les plates-formes populaires telles qu'IOS et Android disposant d'outils d'aide à l'accessibilité complets, il est important de prendre en compte l'accessibilité de votre contenu Web sur ces plates-formes. Cet article examine les considérations relatives à l'accessibilité spécifiques aux mobiles.

 
-

  
   

    Prérequis :Compétences informatiques de base, compréhension basique de HTML (voir Introduction à HTML), et compréhension de  Qu'est ce que l'accessibilité ?Compétences informatiques de base, compréhension basique de HTML (voir Introduction à HTML), et compréhension de  Qu'est ce que l'accessibilité ?
   

   

    Objectif :
 
 
 
 
 
 
 
 

+

-   
+   
-   
+   

  
   

    Prerequisites:Connaissances de base en informatique, compréhension de base de HTML, CSS et JavaScript et compréhension de la  previous articles in the course.Connaissances de base en informatique, compréhension de base de HTML, CSS et JavaScript et compréhension de la  previous articles in the course.
   

   

    Objective:Comprendre quels problèmes d'accessibilité existent sur les appareils mobiles et comment les résoudre.Comprendre quels problèmes d'accessibilité existent sur les appareils mobiles et comment les résoudre.
   

  
 

 
-
Accessibilité sur les appareils mobiles

+
Accessibilité sur les appareils mobiles

 
-
L’état de l’accessibilité - et la prise en charge des normes Web en général - est bon pour les appareils mobiles modernes. Le temps où les appareils mobiles utilisaient des technologies Web complètement différentes des navigateurs de bureau, forçait les développeurs à utiliser le sniffing de navigateur et à leur servir des sites complètement séparés (même si de nombreuses entreprises détectent encore l'utilisation d'appareils mobiles et leur servent un domaine distinct).

+
L’état de l’accessibilité - et la prise en charge des normes Web en général - est bon pour les appareils mobiles modernes. Le temps où les appareils mobiles utilisaient des technologies Web complètement différentes des navigateurs de bureau, forçait les développeurs à utiliser le sniffing de navigateur et à leur servir des sites complètement séparés (même si de nombreuses entreprises détectent encore l'utilisation d'appareils mobiles et leur servent un domaine distinct).

 
-
De nos jours, les appareils mobiles en général peuvent gérer des sites Web "complets", et les principales plates-formes ont même des lecteurs d'écran intégrés pour permettre aux utilisateurs malvoyants de les utiliser avec succès. Les navigateurs mobiles modernes ont tendance à avoir un bon support pour  WAI-ARIA, aussi

+
De nos jours, les appareils mobiles en général peuvent gérer des sites Web "complets", et les principales plates-formes ont même des lecteurs d'écran intégrés pour permettre aux utilisateurs malvoyants de les utiliser avec succès. Les navigateurs mobiles modernes ont tendance à avoir un bon support pour  WAI-ARIA, aussi

 
-
Pour rendre un site Web accessible et utilisable sur mobile, il vous suffit de suivre les bonnes pratiques générales en matière de conception de sites Web et d'accessibilité.

+
Pour rendre un site Web accessible et utilisable sur mobile, il vous suffit de suivre les bonnes pratiques générales en matière de conception de sites Web et d'accessibilité.

 
-
Certaines exceptions nécessitent une attention particulière pour le mobile; les principaux sont:

+
Certaines exceptions nécessitent une attention particulière pour le mobile; les principaux sont:

 
 
    
- 
  • Mécanismes de contrôle - Assurez-vous que les commandes d'interface, telles que les boutons, sont accessibles sur les téléphones mobiles (c'est-à-dire principalement les écrans tactiles), ainsi que sur les ordinateurs de bureau / portables (principalement les souris et les claviers).
    • 
- 
  • Saisie utilisateur - Rendez les exigences de saisie utilisateur aussi simples que possible sur mobile (par exemple, dans les formulaires, réduisez au minimum la saisie).
    • 
- 
  • Conception réactive - Assurez-vous que les mises en page fonctionnent sur le mobile, conservez la taille des téléchargements d'images et réfléchissez à la fourniture d'images pour les écrans haute résolution.
    • 
+ 
  • Mécanismes de contrôle - Assurez-vous que les commandes d'interface, telles que les boutons, sont accessibles sur les téléphones mobiles (c'est-à-dire principalement les écrans tactiles), ainsi que sur les ordinateurs de bureau / portables (principalement les souris et les claviers).
    • 
+ 
  • Saisie utilisateur - Rendez les exigences de saisie utilisateur aussi simples que possible sur mobile (par exemple, dans les formulaires, réduisez au minimum la saisie).
    • 
+ 
  • Conception réactive - Assurez-vous que les mises en page fonctionnent sur le mobile, conservez la taille des téléchargements d'images et réfléchissez à la fourniture d'images pour les écrans haute résolution.
    • 
 

 
-
Résumé des tests de lecteur d'écran sur Android et iOS

+
Résumé des tests de lecteur d'écran sur Android et iOS

 
-
Les plates-formes mobiles les plus courantes disposent de lecteurs d’écran entièrement fonctionnels. Celles-ci fonctionnent à peu près de la même manière que les lecteurs d’écran de bureau, sauf qu’elles sont largement utilisées avec des gestes tactiles plutôt que des combinaisons de touches.

+
Les plates-formes mobiles les plus courantes disposent de lecteurs d’écran entièrement fonctionnels. Celles-ci fonctionnent à peu près de la même manière que les lecteurs d’écran de bureau, sauf qu’elles sont largement utilisées avec des gestes tactiles plutôt que des combinaisons de touches.

 
-
Regardons les deux principaux: TalkBack sur Android et VoiceOver sur iOS.

+
Regardons les deux principaux: TalkBack sur Android et VoiceOver sur iOS.

 
 
Android TalkBack

 
-
Le lecteur d’écran TalkBack est intégré au système d’exploitation Android.

+
Le lecteur d’écran TalkBack est intégré au système d’exploitation Android.

 
-
Pour l'activer, sélectionnez Paramètres> Accessibilité> TalkBack, puis appuyez sur le curseur pour l'activer. Suivez toute invite supplémentaire à l'écran qui vous est présentée.

+
Pour l'activer, sélectionnez Paramètres> Accessibilité> TalkBack, puis appuyez sur le curseur pour l'activer. Suivez toute invite supplémentaire à l'écran qui vous est présentée.

 
-
Note:  Les anciennes versions de TalkBack sont activées dans slightly different ways.

+
Note:  Les anciennes versions de TalkBack sont activées dans slightly different ways.

 
-
Lorsque TalkBack est activé, les commandes de base de votre appareil Android seront un peu différentes. Par exemple:

+
Lorsque TalkBack est activé, les commandes de base de votre appareil Android seront un peu différentes. Par exemple:

 
 
    
- 
  1. Une simple pression sur une application la sélectionne et l'appareil lit en quoi elle consiste.
    2. 
- 
  2. Glisser vers la gauche ou la droite permet de se déplacer entre les applications, ou les boutons / contrôles si vous êtes dans une barre de contrôle. L'appareil lira chaque option.
    3. 
- 
  3. Double-cliquer n'importe où ouvrira l'application / sélectionner l'option.
    4. 
- 
  4. Vous pouvez également "explorer par le toucher" - maintenez votre doigt appuyé sur l'écran et faites-le glisser, et votre appareil lira les différentes applications / éléments que vous déplacez.
    5. 
+ 
  5. Une simple pression sur une application la sélectionne et l'appareil lit en quoi elle consiste.
    6. 
+ 
  6. Glisser vers la gauche ou la droite permet de se déplacer entre les applications, ou les boutons / contrôles si vous êtes dans une barre de contrôle. L'appareil lira chaque option.
    7. 
+ 
  7. Double-cliquer n'importe où ouvrira l'application / sélectionner l'option.
    8. 
+ 
  8. Vous pouvez également "explorer par le toucher" - maintenez votre doigt appuyé sur l'écran et faites-le glisser, et votre appareil lira les différentes applications / éléments que vous déplacez.
    9. 
 

 
-
Si vous souhaitez désactiver TalkBack:

+
Si vous souhaitez désactiver TalkBack:

 
 
    
- 
  1. Accédez à votre application Paramètres en utilisant les gestes ci-dessus.
    2. 
- 
  2. Accédez à Accessibilité> TalkBack .
    3. 
- 
  3. Accédez au commutateur et activez-le pour le désactiver. .
    4. 
+ 
  4. Accédez à votre application Paramètres en utilisant les gestes ci-dessus.
    5. 
+ 
  5. Accédez à Accessibilité> TalkBack .
    6. 
+ 
  6. Accédez au commutateur et activez-le pour le désactiver. .
    7. 
 

 
-
Note: Vous pouvez accéder à votre écran d'accueil à tout moment en glissant vers le haut et à gauche dans un mouvement fluide. Si vous avez plus d'un écran d'accueil, vous pouvez passer d'un écran à l'autre en faisant glisser deux doigts vers la gauche et vers la droite. .

+
Note: Vous pouvez accéder à votre écran d'accueil à tout moment en glissant vers le haut et à gauche dans un mouvement fluide. Si vous avez plus d'un écran d'accueil, vous pouvez passer d'un écran à l'autre en faisant glisser deux doigts vers la gauche et vers la droite. .

 
-
Pour une liste plus complète des gestes TalkBack, voir  Use TalkBack gestures.

+
Pour une liste plus complète des gestes TalkBack, voir  Use TalkBack gestures.

 
-
Déverrouiller le téléphone

+
Déverrouiller le téléphone

 
-
Lorsque TalkBack est activé, le déverrouillage du téléphone est un peu différent.

+
Lorsque TalkBack est activé, le déverrouillage du téléphone est un peu différent.

 
-
Vous pouvez balayer deux doigts à partir du bas de l'écran de verrouillage. Si vous avez défini un code d'accès ou un modèle pour déverrouiller votre appareil, vous serez redirigé vers l'écran de saisie approprié pour le saisir.

+
Vous pouvez balayer deux doigts à partir du bas de l'écran de verrouillage. Si vous avez défini un code d'accès ou un modèle pour déverrouiller votre appareil, vous serez redirigé vers l'écran de saisie approprié pour le saisir.

 
-
Vous pouvez également explorer en touchant le bouton Déverrouiller en bas au centre de l'écran, puis en appuyant deux fois.

+
Vous pouvez également explorer en touchant le bouton Déverrouiller en bas au centre de l'écran, puis en appuyant deux fois.

 
-
+
 
-
TalkBack vous permet d'accéder aux menus contextuels globaux et locaux, où que vous ayez navigué sur l'appareil. Le premier fournit des options globales relatives à l'appareil dans son ensemble, et le second fournit des options relatives uniquement à l'application / à l'écran actuel.

+
TalkBack vous permet d'accéder aux menus contextuels globaux et locaux, où que vous ayez navigué sur l'appareil. Le premier fournit des options globales relatives à l'appareil dans son ensemble, et le second fournit des options relatives uniquement à l'application / à l'écran actuel.

 
-
Pour accéder à ces menus:

+
Pour accéder à ces menus:

 
 
    
- 
  1. Accédez au menu global en glissant rapidement vers le bas, puis à droite .
    2. 
- 
  2. Accédez au menu local en balayant rapidement vers le haut, puis à droite.
    3. 
- 
  3. Balayez vers la gauche et la droite pour naviguer entre les différentes options. .
    4. 
- 
  4. Une fois que vous avez sélectionné l'option de votre choix, double-cliquez dessus pour la choisir.
    5. 
+ 
  5. Accédez au menu global en glissant rapidement vers le bas, puis à droite .
    6. 
+ 
  6. Accédez au menu local en balayant rapidement vers le haut, puis à droite.
    7. 
+ 
  7. Balayez vers la gauche et la droite pour naviguer entre les différentes options. .
    8. 
+ 
  8. Une fois que vous avez sélectionné l'option de votre choix, double-cliquez dessus pour la choisir.
    9. 
 

 
-
Pour plus de détails sur toutes les options disponibles dans les menus contextuels global et local, voir  Use global and local context menus.

+
Pour plus de détails sur toutes les options disponibles dans les menus contextuels global et local, voir  Use global and local context menus.

 
-
Parcourir des pages Web

+
Parcourir des pages Web

 
-
Vous pouvez utiliser le menu contextuel local dans un navigateur Web pour rechercher des options permettant de naviguer dans des pages Web en utilisant uniquement les en-têtes, les contrôles de formulaire ou les liens, ou de naviguer ligne par ligne, etc.

+
Vous pouvez utiliser le menu contextuel local dans un navigateur Web pour rechercher des options permettant de naviguer dans des pages Web en utilisant uniquement les en-têtes, les contrôles de formulaire ou les liens, ou de naviguer ligne par ligne, etc.

 
-
Par exemple, avec TalkBack activé:

+
Par exemple, avec TalkBack activé:

 
 
    
- 
  1. Ouvrez votre navigateur web.
    2. 
- 
  2. Activer la barre d'URL.
    3. 
- 
  3. Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk. Pour entrer le texte de l'URL:
+ 
  4. Ouvrez votre navigateur web.
    5. 
+ 
  5. Activer la barre d'URL.
    6. 
+ 
  6. Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk. Pour entrer le texte de l'URL:
   
      
-   
    • Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double tapant .
      • 
-   
    • Maintenez votre doigt appuyé sur le clavier virtuel jusqu'à obtenir le caractère souhaité, puis relâchez-le pour le saisir. Répétez pour chaque caractère.
      • 
-   
    • Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.
      • 
+   
    • Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double tapant .
      • 
+   
    • Maintenez votre doigt appuyé sur le clavier virtuel jusqu'à obtenir le caractère souhaité, puis relâchez-le pour le saisir. Répétez pour chaque caractère.
      • 
+   
    • Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.
      • 
   
    
  
    7. 
- 
  7. Balayez vers la gauche et la droite pour vous déplacer entre différents éléments de la page. .
    8. 
- 
  8. Faites glisser votre doigt vers le haut et vers la droite avec un mouvement fluide pour accéder au menu de contenu local.
    9. 
- 
  9. Balayez vers la droite jusqu'à ce que vous trouviez l'option "En-têtes et points de repère".
    10. 
- 
  10. Appuyez deux fois pour le sélectionner. Vous pouvez maintenant glisser à gauche et à droite pour vous déplacer entre les rubriques et les points de repère ARIA.
    11. 
- 
  11. Pour revenir au mode par défaut, entrez de nouveau dans le menu contextuel local en balayant l'écran vers le haut, le curseur à droite, sélectionnez "Par défaut", puis tapez deux fois pour l'activer.
    12. 
+ 
  12. Balayez vers la gauche et la droite pour vous déplacer entre différents éléments de la page. .
    13. 
+ 
  13. Faites glisser votre doigt vers le haut et vers la droite avec un mouvement fluide pour accéder au menu de contenu local.
    14. 
+ 
  14. Balayez vers la droite jusqu'à ce que vous trouviez l'option "En-têtes et points de repère".
    15. 
+ 
  15. Appuyez deux fois pour le sélectionner. Vous pouvez maintenant glisser à gauche et à droite pour vous déplacer entre les rubriques et les points de repère ARIA.
    16. 
+ 
  16. Pour revenir au mode par défaut, entrez de nouveau dans le menu contextuel local en balayant l'écran vers le haut, le curseur à droite, sélectionnez "Par défaut", puis tapez deux fois pour l'activer.
    17. 
 

 
-
Note:  Voir   aussi Get started on Android with TalkBack pour obtenir une documentation plus complète.

+
Note:  Voir   aussi Get started on Android with TalkBack pour obtenir une documentation plus complète.

 
 
iOS VoiceOver

 
-
Une version mobile de VoiceOver est intégrée au système d'exploitation iOS.

+
Une version mobile de VoiceOver est intégrée au système d'exploitation iOS.

 
-
Pour l'activer, accédez à l'application Paramètres, puis sélectionnez Général > Accessibilité > VoiceOver. Appuyez sur le curseur VoiceOver pour l'activer (vous verrez également un certain nombre d'autres options liées à VoiceOver sur cette page).

+
Pour l'activer, accédez à l'application Paramètres, puis sélectionnez Général > Accessibilité > VoiceOver. Appuyez sur le curseur VoiceOver pour l'activer (vous verrez également un certain nombre d'autres options liées à VoiceOver sur cette page).

 
-
Une fois que VoiceOver est activé, les gestes de contrôle de base de l'iOS seront un peu différents :

+
Une fois que VoiceOver est activé, les gestes de contrôle de base de l'iOS seront un peu différents :

 
 
    
- 
  1. Un simple tapement entraînera la sélection de l'élément sur lequel vous appuyez; votre appareil parlera de l'élément sur lequel vous avez tapé.
    2. 
- 
  2. Vous pouvez également parcourir les éléments à l’écran en balayant vers la gauche ou vers la droite pour les déplacer, ou en faisant glisser votre doigt sur l’écran pour naviguer entre les différents éléments (lorsque vous trouvez l’élément souhaité, vous pouvez le retirer pour le sélectionner).
    3. 
- 
  3. Pour activer l'élément sélectionné (par exemple, ouvrir une application sélectionnée), appuyez deux fois n'importe où sur l'écran.
    4. 
- 
  4. Faites glisser votre doigt avec trois doigts pour faire défiler une page.
    5. 
- 
  5. Appuyez avec deux doigts pour effectuer une action liée au contexte - par exemple, prendre une photo alors que vous êtes dans l'application Appareil photo.
    6. 
+ 
  6. Un simple tapement entraînera la sélection de l'élément sur lequel vous appuyez; votre appareil parlera de l'élément sur lequel vous avez tapé.
    7. 
+ 
  7. Vous pouvez également parcourir les éléments à l’écran en balayant vers la gauche ou vers la droite pour les déplacer, ou en faisant glisser votre doigt sur l’écran pour naviguer entre les différents éléments (lorsque vous trouvez l’élément souhaité, vous pouvez le retirer pour le sélectionner).
    8. 
+ 
  8. Pour activer l'élément sélectionné (par exemple, ouvrir une application sélectionnée), appuyez deux fois n'importe où sur l'écran.
    9. 
+ 
  9. Faites glisser votre doigt avec trois doigts pour faire défiler une page.
    10. 
+ 
  10. Appuyez avec deux doigts pour effectuer une action liée au contexte - par exemple, prendre une photo alors que vous êtes dans l'application Appareil photo.
    11. 
 

 
-
Pour le désactiver à nouveau, revenez à Paramètres> Général> Accessibilité> VoiceOver en utilisant les gestes ci-dessus, puis basculez le curseur VoiceOver sur Désactivé.

+
Pour le désactiver à nouveau, revenez à Paramètres> Général> Accessibilité> VoiceOver en utilisant les gestes ci-dessus, puis basculez le curseur VoiceOver sur Désactivé.

 
-
Déverrouiller le téléphone

+
Déverrouiller le téléphone

 
-
Pour déverrouiller le téléphone, vous devez appuyer sur le bouton d'accueil (ou balayer) comme d'habitude. Si vous avez défini un code d'authentification, vous pouvez sélectionner chaque numéro en balayant / glissant (comme expliqué ci-dessus), puis en appuyant deux fois pour entrer chaque numéro lorsque vous avez trouvé le bon.

+
Pour déverrouiller le téléphone, vous devez appuyer sur le bouton d'accueil (ou balayer) comme d'habitude. Si vous avez défini un code d'authentification, vous pouvez sélectionner chaque numéro en balayant / glissant (comme expliqué ci-dessus), puis en appuyant deux fois pour entrer chaque numéro lorsque vous avez trouvé le bon.

 
-
Utiliser le rotor

+
Utiliser le rotor

 
-
Lorsque VoiceOver est activé, vous disposez d'une fonction de navigation appelée Rotor, qui vous permet de choisir rapidement parmi un certain nombre d'options utiles courantes. Pour l'utiliser:

+
Lorsque VoiceOver est activé, vous disposez d'une fonction de navigation appelée Rotor, qui vous permet de choisir rapidement parmi un certain nombre d'options utiles courantes. Pour l'utiliser:

 
 
    
- 
  1. Tournez deux doigts sur l’écran comme si vous tourniez un cadran. Chaque option sera lue à voix haute au fur et à mesure que vous tournez. Vous pouvez aller et venir pour parcourir les options.
    2. 
- 
  2. Une fois que vous avez trouvé l'option que vous voulez:
+ 
  3. Tournez deux doigts sur l’écran comme si vous tourniez un cadran. Chaque option sera lue à voix haute au fur et à mesure que vous tournez. Vous pouvez aller et venir pour parcourir les options.
    4. 
+ 
  4. Une fois que vous avez trouvé l'option que vous voulez:
   
      
-   
    • Relâchez vos doigts pour le sélectionner.
      • 
-   
    • S'il s'agit d'une option dont vous pouvez parcourir la valeur (telle que le volume ou la vitesse de parole), vous pouvez effectuer un balayage vers le haut ou le bas pour augmenter ou diminuer la valeur de l'élément sélectionné.
      • 
+   
    • Relâchez vos doigts pour le sélectionner.
      • 
+   
    • S'il s'agit d'une option dont vous pouvez parcourir la valeur (telle que le volume ou la vitesse de parole), vous pouvez effectuer un balayage vers le haut ou le bas pour augmenter ou diminuer la valeur de l'élément sélectionné.
      • 
   
    
  
    5. 
 

 
-
Les options disponibles sous Rotor dépendent du contexte. Elles diffèrent en fonction de l'application ou de la vue dans laquelle vous vous trouvez (voir l'exemple ci-dessous).

+
Les options disponibles sous Rotor dépendent du contexte. Elles diffèrent en fonction de l'application ou de la vue dans laquelle vous vous trouvez (voir l'exemple ci-dessous).

 
-
Parcourir des pages Web

+
Parcourir des pages Web

 
-
Essayons la navigation Web avec VoiceOver:

+
Essayons la navigation Web avec VoiceOver:

 
 
    
- 
  1. Ouvrez votre navigateur web.
    2. 
- 
  2. Activer la barre d'URL.
    3. 
- 
  3. Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk. Pour entrer le texte de l'URL:
+ 
  4. Ouvrez votre navigateur web.
    5. 
+ 
  5. Activer la barre d'URL.
    6. 
+ 
  6. Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk. Pour entrer le texte de l'URL:
   
      
-   
    • Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double-tapant.
      • 
-   
    • Pour chaque caractère, maintenez votre doigt appuyé sur le clavier virtuel jusqu'à ce que vous obteniez le caractère souhaité, puis relâchez votre doigt pour le sélectionner. Appuyez deux fois pour le taper.
      • 
-   
    • Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.
      • 
+   
    • Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double-tapant.
      • 
+   
    • Pour chaque caractère, maintenez votre doigt appuyé sur le clavier virtuel jusqu'à ce que vous obteniez le caractère souhaité, puis relâchez votre doigt pour le sélectionner. Appuyez deux fois pour le taper.
      • 
+   
    • Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.
      • 
   
    
  
    7. 
- 
  7. Balayez vers la gauche et la droite pour vous déplacer entre les éléments de la page. Vous pouvez appuyer deux fois sur un élément pour le sélectionner (par exemple, suivre un lien).
    8. 
- 
  8. Par défaut, l’option de rotor sélectionnée sera Speaking Rate; vous pouvez actuellement balayer de haut en bas pour augmenter ou diminuer le débit.
    9. 
- 
  9. Maintenant, tournez deux doigts autour de l'écran comme un cadran pour afficher le rotor et passez d'une option à l'autre. Voici quelques exemples d'options disponibles:
+ 
  10. Balayez vers la gauche et la droite pour vous déplacer entre les éléments de la page. Vous pouvez appuyer deux fois sur un élément pour le sélectionner (par exemple, suivre un lien).
    11. 
+ 
  11. Par défaut, l’option de rotor sélectionnée sera Speaking Rate; vous pouvez actuellement balayer de haut en bas pour augmenter ou diminuer le débit.
    12. 
+ 
  12. Maintenant, tournez deux doigts autour de l'écran comme un cadran pour afficher le rotor et passez d'une option à l'autre. Voici quelques exemples d'options disponibles:
   
      
-   
    • Taux de parole : Modifiez le taux de parole.
      • 
-   
    • Conteneurs : déplacez-vous entre différents conteneurs sémantiques de la page.
      • 
-   
    • En-têtes : déplacez-vous entre les en-têtes de la page.
      • 
-   
    • Liens : permet de se déplacer entre les liens de la page.
      • 
-   
    • Contrôles de formulaire : déplacez-vous entre les contrôles de formulaire de la page.
      • 
-   
    • Langue : déplacez-vous entre différentes traductions, si elles sont disponibles.
      • 
+   
    • Taux de parole : Modifiez le taux de parole.
      • 
+   
    • Conteneurs : déplacez-vous entre différents conteneurs sémantiques de la page.
      • 
+   
    • En-têtes : déplacez-vous entre les en-têtes de la page.
      • 
+   
    • Liens : permet de se déplacer entre les liens de la page.
      • 
+   
    • Contrôles de formulaire : déplacez-vous entre les contrôles de formulaire de la page.
      • 
+   
    • Langue : déplacez-vous entre différentes traductions, si elles sont disponibles.
      • 
   
    
  
    13. 
- 
  13. Sélectionnez les en-têtes. Vous pouvez maintenant glisser de haut en bas pour vous déplacer entre les titres de la page.
    14. 
+ 
  14. Sélectionnez les en-têtes. Vous pouvez maintenant glisser de haut en bas pour vous déplacer entre les titres de la page.
    15. 
 

 
-
Note:  Pour une référence plus complète couvrant les gestes VoiceOver disponibles et d'autres astuces sur le test d'accessibilité sur iOS, voir  aussi Test Accessibility on Your Device with VoiceOver.

+
Note:  Pour une référence plus complète couvrant les gestes VoiceOver disponibles et d'autres astuces sur le test d'accessibilité sur iOS, voir  aussi Test Accessibility on Your Device with VoiceOver.

 
-
Mécanismes de contrôle

+
Mécanismes de contrôle

 
-
Dans notre article relatif à l'accessibilité CSS et JavaScript, nous avons examiné l'idée d'événements spécifiques à un certain type de mécanisme de contrôle  (see Mouse-specific events). En résumé, cela pose des problèmes d'accessibilité car d'autres mécanismes de contrôle ne peuvent pas activer la fonctionnalité associée.

+
Dans notre article relatif à l'accessibilité CSS et JavaScript, nous avons examiné l'idée d'événements spécifiques à un certain type de mécanisme de contrôle  (see Mouse-specific events). En résumé, cela pose des problèmes d'accessibilité car d'autres mécanismes de contrôle ne peuvent pas activer la fonctionnalité associée.

 
-
Par exemple, l'événement   click  est bon en termes d'accessibilité - un gestionnaire d'événements associé peut être appelé en cliquant sur l'élément sur lequel il est défini, en le sélectionnant et en appuyant sur Entrée / Retour ou en le tapant sur un périphérique à écran tactile. Essayez notre simple-button-example.html exemple (see it running live) pour voir ce que nous entendons. .

+
Par exemple, l'événement   click  est bon en termes d'accessibilité - un gestionnaire d'événements associé peut être appelé en cliquant sur l'élément sur lequel il est défini, en le sélectionnant et en appuyant sur Entrée / Retour ou en le tapant sur un périphérique à écran tactile. Essayez notre simple-button-example.html exemple (see it running live) pour voir ce que nous entendons. .

 
-
Sinon, des événements spécifiques à la souris, tels que   mousedown et mouseup créent des problèmes - leurs gestionnaires d'événements ne peuvent pas être appelés à l'aide de contrôles autres que la souris.

+
Sinon, des événements spécifiques à la souris, tels que   mousedown et mouseup créent des problèmes - leurs gestionnaires d'événements ne peuvent pas être appelés à l'aide de contrôles autres que la souris.

 
-
Si vous essayez de contrôler notre exemple  simple-box-drag.html (see example live) avec un clavier ou une touche, vous verrez le problème. Cela se produit car nous utilisons un code tel que:

+
Si vous essayez de contrôler notre exemple  simple-box-drag.html (see example live) avec un clavier ou une touche, vous verrez le problème. Cela se produit car nous utilisons un code tel que:

 
-
div.onmousedown = function() {
+
div.onmousedown = function() {
   initialBoxX = div.offsetLeft;
   initialBoxY = div.offsetTop;
   movePanel();
 }
 
-document.onmouseup = stopMove;

+document.onmouseup = stopMove;

 
-
Pour activer d'autres formes de contrôle, vous devez utiliser des événements différents mais équivalents. Par exemple, les événements tactiles fonctionnent sur les périphériques à écran tactile:

+
Pour activer d'autres formes de contrôle, vous devez utiliser des événements différents mais équivalents. Par exemple, les événements tactiles fonctionnent sur les périphériques à écran tactile:

 
-
div.ontouchstart = function(e) {
+
div.ontouchstart = function(e) {
   initialBoxX = div.offsetLeft;
   initialBoxY = div.offsetTop;
   positionHandler(e);
   movePanel();
 }
 
-panel.ontouchend = stopMove;

+panel.ontouchend = stopMove;

 
-
Nous avons fourni un exemple simple qui montre comment utiliser simultanément les événements de la souris et des événements tactiles — voir multi-control-box-drag.html (see the example live aussi).

+
Nous avons fourni un exemple simple qui montre comment utiliser simultanément les événements de la souris et des événements tactiles — voir multi-control-box-drag.html (see the example live aussi).

 
-
Note: Vous pouvez également voir des exemples fonctionnels montrant comment implémenter différents mécanismes de contrôle à   Implementing game control mechanisms.

+
Note: Vous pouvez également voir des exemples fonctionnels montrant comment implémenter différents mécanismes de contrôle à   Implementing game control mechanisms.

 
 
Responsive design

 
-
Responsive design a l’habitude de faire en sorte que vos mises en page et les autres fonctionnalités de vos applications changent de manière dynamique en fonction de facteurs tels que la taille de l’écran et la résolution, de sorte qu’elles soient utilisables et accessibles aux utilisateurs de différents types d’appareils. .

+
Responsive design a l’habitude de faire en sorte que vos mises en page et les autres fonctionnalités de vos applications changent de manière dynamique en fonction de facteurs tels que la taille de l’écran et la résolution, de sorte qu’elles soient utilisables et accessibles aux utilisateurs de différents types d’appareils. .

 
-
En particulier, les problèmes les plus courants auxquels le mobile doit faire face sont les suivants:

+
En particulier, les problèmes les plus courants auxquels le mobile doit faire face sont les suivants:

 
 
    
- 
  • Adéquation des mises en page pour les appareils mobiles. Une mise en page à plusieurs colonnes ne fonctionnera pas aussi bien sur un écran étroit, par exemple, et il faudra peut-être augmenter la taille du texte pour le rendre lisible. Ces problèmes peuvent être résolus en créant une mise en page réactive utilisant des technologies telles que  media queries, viewport, et flexbox.
    • 
- 
  • Conserver les tailles d’image téléchargées. En général, les appareils de petite taille n’auront pas besoin d’images aussi volumineuses que leurs homologues de bureau, et ils risquent davantage d’être sur des connexions réseau lentes. Par conséquent, il est sage de servir des images plus petites sur des dispositifs à écran étroit, le cas échéant. Vous pouvez gérer cela en utilisant  responsive image techniques.
    • 
- 
  • Penser aux hautes résolutions. De nombreux appareils mobiles ont des écrans haute résolution et ont donc besoin d'images de résolution supérieure pour que l'affichage puisse continuer à être net et net. Encore une fois, vous pouvez servir des images selon vos besoins en utilisant des techniques d’image réactives. De plus, de nombreuses exigences en matière d'images peuvent être satisfaites grâce au format d'images vectorielles SVG, bien pris en charge par les navigateurs actuels. SVG a une petite taille de fichier et restera net quelle que soit la taille affichée   (voir Adding vector graphics to the web pour plus de détails ).
    • 
+ 
  • Adéquation des mises en page pour les appareils mobiles. Une mise en page à plusieurs colonnes ne fonctionnera pas aussi bien sur un écran étroit, par exemple, et il faudra peut-être augmenter la taille du texte pour le rendre lisible. Ces problèmes peuvent être résolus en créant une mise en page réactive utilisant des technologies telles que  media queries, viewport, et flexbox.
    • 
+ 
  • Conserver les tailles d’image téléchargées. En général, les appareils de petite taille n’auront pas besoin d’images aussi volumineuses que leurs homologues de bureau, et ils risquent davantage d’être sur des connexions réseau lentes. Par conséquent, il est sage de servir des images plus petites sur des dispositifs à écran étroit, le cas échéant. Vous pouvez gérer cela en utilisant  responsive image techniques.
    • 
+ 
  • Penser aux hautes résolutions. De nombreux appareils mobiles ont des écrans haute résolution et ont donc besoin d'images de résolution supérieure pour que l'affichage puisse continuer à être net et net. Encore une fois, vous pouvez servir des images selon vos besoins en utilisant des techniques d’image réactives. De plus, de nombreuses exigences en matière d'images peuvent être satisfaites grâce au format d'images vectorielles SVG, bien pris en charge par les navigateurs actuels. SVG a une petite taille de fichier et restera net quelle que soit la taille affichée   (voir Adding vector graphics to the web pour plus de détails ).
    • 
 

 
-
Note:  Nous ne fournirons pas une analyse complète des techniques de conception réactive ici, car elles sont couvertes ailleurs au sein de MDN (voir les liens ci-dessus).

+
Note:  Nous ne fournirons pas une analyse complète des techniques de conception réactive ici, car elles sont couvertes ailleurs au sein de MDN (voir les liens ci-dessus).

 
-
Considérations mobiles spécifiques

+
Considérations mobiles spécifiques

 
-
Il existe d'autres problèmes importants à prendre en compte lors de la création de sites plus accessibles sur mobile. Nous en avons énuméré quelques-uns ici, mais nous en ajouterons davantage lorsque nous y penserons.

+
Il existe d'autres problèmes importants à prendre en compte lors de la création de sites plus accessibles sur mobile. Nous en avons énuméré quelques-uns ici, mais nous en ajouterons davantage lorsque nous y penserons.

 
-
Ne pas désactiver le zoom

+
Ne pas désactiver le zoom

 
-
En utilisant  viewport, il est possible de désactiver le zoom, en utilisant un code comme celui-ci dans votre {{htmlelement("head")}}:

+
En utilisant  viewport, il est possible de désactiver le zoom, en utilisant un code comme celui-ci dans votre {{htmlelement("head")}}:

 
-
<meta name="viewport" content="user-scalable=no">

+
<meta name="viewport" content="user-scalable=no">

 
-
Vous ne devriez jamais faire cela autant que possible - beaucoup de gens comptent sur le zoom pour voir le contenu de votre site web, aussi, enlever cette fonctionnalité est une très mauvaise idée. Il y a certaines situations où le zoom peut casser l'interface utilisateur; Dans de tels cas, si vous estimez que vous devez absolument désactiver le zoom, vous devez fournir un autre type d’équivalent, tel qu’une commande permettant d’augmenter la taille du texte de manière à ne pas endommager votre interface utilisateur.

+
Vous ne devriez jamais faire cela autant que possible - beaucoup de gens comptent sur le zoom pour voir le contenu de votre site web, aussi, enlever cette fonctionnalité est une très mauvaise idée. Il y a certaines situations où le zoom peut casser l'interface utilisateur; Dans de tels cas, si vous estimez que vous devez absolument désactiver le zoom, vous devez fournir un autre type d’équivalent, tel qu’une commande permettant d’augmenter la taille du texte de manière à ne pas endommager votre interface utilisateur.

 
-
Garder les menus accessibles

+
Garder les menus accessibles

 
-
Étant donné que l'écran est beaucoup plus étroit sur les appareils mobiles, il est très courant d'utiliser des requêtes multimédia et d'autres technologies pour réduire le menu de navigation à une minuscule icône en haut de l'écran, sur laquelle vous pouvez appuyer pour afficher le menu uniquement si c'est nécessaire - lorsque le site est visualisé sur mobile. Ceci est généralement représenté par une icône "trois lignes horizontales" et le motif de conception est par conséquent appelé "menu hamburger".

+
Étant donné que l'écran est beaucoup plus étroit sur les appareils mobiles, il est très courant d'utiliser des requêtes multimédia et d'autres technologies pour réduire le menu de navigation à une minuscule icône en haut de l'écran, sur laquelle vous pouvez appuyer pour afficher le menu uniquement si c'est nécessaire - lorsque le site est visualisé sur mobile. Ceci est généralement représenté par une icône "trois lignes horizontales" et le motif de conception est par conséquent appelé "menu hamburger".

 
-
Lorsque vous implémentez un tel menu, vous devez vous assurer que le contrôle qui le révèle est accessible par les mécanismes de contrôle appropriés (normalement tactile pour mobile), comme indiqué dans {{anch("Control mechanisms")}} ci-dessus, et que le reste de la page est déplacé ou caché d'une manière ou d'une autre pendant l'accès au menu, afin d'éviter toute confusion lors de la navigation. .

+
Lorsque vous implémentez un tel menu, vous devez vous assurer que le contrôle qui le révèle est accessible par les mécanismes de contrôle appropriés (normalement tactile pour mobile), comme indiqué dans {{anch("Control mechanisms")}} ci-dessus, et que le reste de la page est déplacé ou caché d'une manière ou d'une autre pendant l'accès au menu, afin d'éviter toute confusion lors de la navigation. .

 
-
Cliquez ici pour un  good hamburger menu example.

+
Cliquez ici pour un  good hamburger menu example.

 
-
Entrée utilisateur

+
Entrée utilisateur

 
-
Sur les appareils mobiles, la saisie de données a tendance à être plus agaçante pour les utilisateurs que l'expérience équivalente sur les ordinateurs de bureau. Il est plus pratique de taper du texte dans les entrées de formulaire à l'aide d'un clavier d'ordinateur de bureau ou d'ordinateur portable que d'un clavier virtuel à écran tactile ou d'un petit clavier physique mobile.

+
Sur les appareils mobiles, la saisie de données a tendance à être plus agaçante pour les utilisateurs que l'expérience équivalente sur les ordinateurs de bureau. Il est plus pratique de taper du texte dans les entrées de formulaire à l'aide d'un clavier d'ordinateur de bureau ou d'ordinateur portable que d'un clavier virtuel à écran tactile ou d'un petit clavier physique mobile.

 
-
Pour cette raison, il vaut la peine d'essayer de minimiser la quantité de frappe nécessaire. Par exemple, au lieu de forcer les utilisateurs à saisir chaque fois le titre de leur travail en utilisant une entrée de texte standard, vous pouvez proposer un menu  {{htmlelement("select")}}  contenant les options les plus courantes (ce qui aide également à cohérence dans la saisie des données), et offrent une option "Autre" qui affiche un champ de texte dans lequel taper les valeurs aberrantes. Vous pouvez voir un exemple simple de cette idée en action dans common-job-types.html ( voir le common jobs example live).

+
Pour cette raison, il vaut la peine d'essayer de minimiser la quantité de frappe nécessaire. Par exemple, au lieu de forcer les utilisateurs à saisir chaque fois le titre de leur travail en utilisant une entrée de texte standard, vous pouvez proposer un menu  {{htmlelement("select")}}  contenant les options les plus courantes (ce qui aide également à cohérence dans la saisie des données), et offrent une option "Autre" qui affiche un champ de texte dans lequel taper les valeurs aberrantes. Vous pouvez voir un exemple simple de cette idée en action dans common-job-types.html ( voir le common jobs example live).

 
-
Il est également utile d’envisager l’utilisation de types de saisie de formulaire au format HTML5, tels que la date sur les plates-formes mobiles car ils les gèrent bien (Android et iOS, par exemple, affichent des widgets utilisables qui correspondent bien à l’expérience de l’appareil. Voir  html5-form-examples.html   pour quelques exemples (voir HTML5 form examples live) — essayez de les charger et de les manipuler sur des appareils mobiles. Par exemple:

+
Il est également utile d’envisager l’utilisation de types de saisie de formulaire au format HTML5, tels que la date sur les plates-formes mobiles car ils les gèrent bien (Android et iOS, par exemple, affichent des widgets utilisables qui correspondent bien à l’expérience de l’appareil. Voir  html5-form-examples.html   pour quelques exemples (voir HTML5 form examples live) — essayez de les charger et de les manipuler sur des appareils mobiles. Par exemple:

 
 
    
- 
  • Les types  number, tel, et email affichent des claviers virtuels appropriés pour la saisie de numéros / numéros de téléphone.
    • 
- 
  • Les types time et date affichent des sélecteurs appropriés pour la sélection des heures et des dates. .
    • 
+ 
  • Les types  number, tel, et email affichent des claviers virtuels appropriés pour la saisie de numéros / numéros de téléphone.
    • 
+ 
  • Les types time et date affichent des sélecteurs appropriés pour la sélection des heures et des dates. .
    • 
 

 
-
Si vous souhaitez fournir une solution différente pour les ordinateurs de bureau, vous pouvez toujours proposer un balisage différent à vos périphériques mobiles à l'aide de la détection de fonctionnalités. Reportez-vous à   input types  pour obtenir des informations brutes sur la détection de différents types d'entrée et consultez notre article  feature detection article pour en savoir plus. .

+
Si vous souhaitez fournir une solution différente pour les ordinateurs de bureau, vous pouvez toujours proposer un balisage différent à vos périphériques mobiles à l'aide de la détection de fonctionnalités. Reportez-vous à   input types  pour obtenir des informations brutes sur la détection de différents types d'entrée et consultez notre article  feature detection article pour en savoir plus. .

 
-
Résumé

+
Résumé

 
-
Dans cet article, nous vous avons fourni des détails sur les problèmes courants spécifiques à l'accessibilité mobile et sur la façon de les résoudre. Nous vous avons également montré comment utiliser les lecteurs d'écran les plus courants pour vous aider à effectuer des tests d'accessibilité.

+
Dans cet article, nous vous avons fourni des détails sur les problèmes courants spécifiques à l'accessibilité mobile et sur la façon de les résoudre. Nous vous avons également montré comment utiliser les lecteurs d'écran les plus courants pour vous aider à effectuer des tests d'accessibilité.

 
-

-
Voir également

-

+
Voir également

 
 
 
 
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}

 
 
 

diff --git a/files/fr/learn/accessibility/multimedia/index.html b/files/fr/learn/accessibility/multimedia/index.html
index d16e2a3bc0..e957ae2002 100644
--- a/files/fr/learn/accessibility/multimedia/index.html
+++ b/files/fr/learn/accessibility/multimedia/index.html
@@ -18,55 +18,51 @@ original_slug: Apprendre/a11y/Multimedia
 
 
{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}

 
-
Le multimédia est une autre catégorie de contenu susceptible de créer des problèmes d'accessibilité: les contenus vidéo, audio et images doivent disposer de solutions de remplacement textuelles appropriées pour être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.

+
Le multimédia est une autre catégorie de contenu susceptible de créer des problèmes d'accessibilité: les contenus vidéo, audio et images doivent disposer de solutions de remplacement textuelles appropriées pour être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.

 
-
+

-   
-   
+   
+   
-   
+   

  
   
Conditions requise:Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de  Qu'est ce que l'accessibilité?Conditions requise:Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de  Qu'est ce que l'accessibilité?
   

   

    Objectif:Comprendre les problèmes d'accessibilité derrière le multimédia et comment les résoudre .Comprendre les problèmes d'accessibilité derrière le multimédia et comment les résoudre .
   

  
 

 
-
Multimédia et accessibilité

+
Multimédia et accessibilité

 
-
Jusqu'ici, dans ce module, nous avons examiné une variété de contenus et ce qui doit être fait pour en assurer l'accessibilité, du simple contenu textuel aux tableaux de données, en passant par les images, les contrôles natifs tels que les éléments de formulaire et les boutons, et des structures de balisage encore plus complexes. (avec  WAI-ARIA l'attribut).

+
Jusqu'ici, dans ce module, nous avons examiné une variété de contenus et ce qui doit être fait pour en assurer l'accessibilité, du simple contenu textuel aux tableaux de données, en passant par les images, les contrôles natifs tels que les éléments de formulaire et les boutons, et des structures de balisage encore plus complexes. (avec  WAI-ARIA l'attribut).

 
-
Cet article, par contre, examine une autre catégorie générale de contenu pour laquelle il est difficile d’assurer l’accessibilité au multimédia. Les images, les vidéos, les éléments {{htmlelement ("canvas")}} les animations Flash, etc. ne sont pas aussi faciles à comprendre par les lecteurs d'écran ou à naviguer au clavier, et nous devons leur donner un coup de main.

+
Cet article, par contre, examine une autre catégorie générale de contenu pour laquelle il est difficile d’assurer l’accessibilité au multimédia. Les images, les vidéos, les éléments {{htmlelement ("canvas")}} les animations Flash, etc. ne sont pas aussi faciles à comprendre par les lecteurs d'écran ou à naviguer au clavier, et nous devons leur donner un coup de main.

 
-
Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniques disponibles pour rendre le multimédia plus accessible.

+
Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniques disponibles pour rendre le multimédia plus accessible.

 
 
Simple images

 
-
Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article   HTML : une bonne base pour l'accessibilité  —  vous pouvez vous y référer pour plus de détails. En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs.

+
Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article   HTML : une bonne base pour l'accessibilité  —  vous pouvez vous y référer pour plus de détails. En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs.

 
-
 

-
-

-
Par exemple:

-

+
Par exemple:

 
 
<img src="dinosaur.png"
-     alt=" Un Tyrannosaure Rex rouge: Un dinosaure a deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tete avec beaucoup de dents acerees .">
+     alt=" Un Tyrannosaure Rex rouge: Un dinosaure a deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tete avec beaucoup de dents acerees .">
 

 
-
Commandes audio et vidéo accessibles

+
Commandes audio et vidéo accessibles

 
-
La mise en œuvre de contrôles audio / vidéo sur le Web ne devrait pas poser de problème, n'est-ce pas? Enquêtons .

+
La mise en œuvre de contrôles audio / vidéo sur le Web ne devrait pas poser de problème, n'est-ce pas? Enquêtons .

 
-
Le problème avec les contrôles HTML5 natifs

+
Le problème avec les contrôles HTML5 natifs

 
-
Les instances audio et vidéo HTML5 sont même fournies avec un ensemble de commandes intégrées vous permettant de contrôler le contenu multimédia directement. Par exemple (voir  native-controls.html code source et en direct):

+
Les instances audio et vidéo HTML5 sont même fournies avec un ensemble de commandes intégrées vous permettant de contrôler le contenu multimédia directement. Par exemple (voir  native-controls.html code source et en direct):

 
 
<audio controls>
   <source src="viper.mp3" type="audio/mp3">
   <source src="viper.ogg" type="audio/ogg">
-  <p> Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="viper.mp3"> lien vers l\'audio </a>  au lieu .</p>
+  <p> Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="viper.mp3"> lien vers l\'audio </a>  au lieu .</p>
 </audio>
 
 <br>
@@ -74,43 +70,43 @@ original_slug: Apprendre/a11y/Multimedia
 <video controls>
   <source src="rabbit320.mp4" type="video/mp4">
   <source src="rabbit320.webm" type="video/webm">
-  <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p>
+  <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p>
 </video>

 
-
L'attribut controls comporte des boutons de lecture / pause, une barre de recherche, etc. - les commandes de base que vous êtes en droit d'attendre d'un lecteur multimédia. Il semble que dans Firefox et Chrome :

+
L'attribut controls comporte des boutons de lecture / pause, une barre de recherche, etc. - les commandes de base que vous êtes en droit d'attendre d'un lecteur multimédia. Il semble que dans Firefox et Chrome :

 
-
Screenshot of Video Controls in Firefox

+
Screenshot of Video Controls in Firefox

 
-
Screenshot of Video Controls in Chrome

+
Screenshot of Video Controls in Chrome

 
-
Cependant, il y a des problèmes avec ces contrôles :

+
Cependant, il y a des problèmes avec ces contrôles :

 
 
    
- 
  • Ils ne sont pas accessibles au clavier, dans aucun navigateur, sauf Opera.
    • 
- 
  • Différents navigateurs donnent aux contrôles natifs un style et des fonctionnalités différents. Ils ne sont pas stylables, ce qui signifie qu'ils ne peuvent pas être facilement conçus pour suivre un guide de style du site. .
    • 
+ 
  • Ils ne sont pas accessibles au clavier, dans aucun navigateur, sauf Opera.
    • 
+ 
  • Différents navigateurs donnent aux contrôles natifs un style et des fonctionnalités différents. Ils ne sont pas stylables, ce qui signifie qu'ils ne peuvent pas être facilement conçus pour suivre un guide de style du site. .
    • 
 

 
-
Pour remédier à cela, nous pouvons créer nos propres contrôles personnalisés. Regardons comment.

+
Pour remédier à cela, nous pouvons créer nos propres contrôles personnalisés. Regardons comment.

 
-
Création de contrôles audio et vidéo personnalisés

+
Création de contrôles audio et vidéo personnalisés

 
-
La vidéo et l'audio HTML5 partagent une API - HTML Media Element - qui vous permet de mapper des fonctionnalités personnalisées à des boutons et à d'autres commandes, que vous définissez vous-même. .

+
La vidéo et l'audio HTML5 partagent une API - HTML Media Element - qui vous permet de mapper des fonctionnalités personnalisées à des boutons et à d'autres commandes, que vous définissez vous-même. .

 
-
Prenons l'exemple vidéo ci-dessus et ajoutons-leur des contrôles personnalisés .

+
Prenons l'exemple vidéo ci-dessus et ajoutons-leur des contrôles personnalisés .

 
 
Basic setup

 
-
Tout d'abord, prenez une copie de notre  custom-controls-start.html, custom-controls.css, rabbit320.mp4, et rabbit320.webm fichiers et enregistrez-les dans un nouveau répertoire sur votre disque dur .

+
Tout d'abord, prenez une copie de notre  custom-controls-start.html, custom-controls.css, rabbit320.mp4, et rabbit320.webm fichiers et enregistrez-les dans un nouveau répertoire sur votre disque dur .

 
-
Créez un nouveau fichier appelé main.js et enregistrez-le dans le même répertoire .

+
Créez un nouveau fichier appelé main.js et enregistrez-le dans le même répertoire .

 
-
Tout d’abord, regardons le code HTML pour le lecteur vidéo, dans le code HTML:

+
Tout d’abord, regardons le code HTML pour le lecteur vidéo, dans le code HTML:

 
 
<section class="player">
   <video controls>
     <source src="rabbit320.mp4" type="video/mp4">
     <source src="rabbit320.webm" type="video/webm">
-    <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p>
+    <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p>
   </video>
 
   <div class="controls">
@@ -124,9 +120,9 @@ original_slug: Apprendre/a11y/Multimedia
 
 
JavaScript basic setup

 
-
Nous avons inséré quelques boutons de commande simples sous notre vidéo. Bien sûr, ces contrôles ne feront rien par défaut; pour ajouter des fonctionnalités, nous allons utiliser JavaScript .

+
Nous avons inséré quelques boutons de commande simples sous notre vidéo. Bien sûr, ces contrôles ne feront rien par défaut; pour ajouter des fonctionnalités, nous allons utiliser JavaScript .

 
-
Nous devrons d’abord stocker les références à chacun des contrôles - ajoutez ce qui suit en haut de votre fichier JavaScript:

+
Nous devrons d’abord stocker les références à chacun des contrôles - ajoutez ce qui suit en haut de votre fichier JavaScript:

 
 
var playPauseBtn = document.querySelector('.playpause');
 var stopBtn = document.querySelector('.stop');
@@ -134,21 +130,21 @@ var rwdBtn = document.querySelector('.rwd');
 var fwdBtn = document.querySelector('.fwd');
 var timeLabel = document.querySelector('.time');

 
-
Ensuite, nous devons saisir une référence au lecteur vidéo / audio lui-même - ajoutez cette ligne sous les lignes précédentes:

+
Ensuite, nous devons saisir une référence au lecteur vidéo / audio lui-même - ajoutez cette ligne sous les lignes précédentes:

 
 
var player = document.querySelector('video');

 
-
Ceci contient une référence à un objet {{domxref ("HTMLMediaElement")}} qui possède plusieurs propriétés et méthodes utiles disponibles qui peuvent être utilisées pour connecter des fonctionnalités à nos boutons.

+
Ceci contient une référence à un objet {{domxref ("HTMLMediaElement")}} qui possède plusieurs propriétés et méthodes utiles disponibles qui peuvent être utilisées pour connecter des fonctionnalités à nos boutons.

 
-
Avant de passer à la création de notre fonctionnalité de bouton, supprimons les contrôles natifs afin qu'ils ne gênent pas nos contrôles personnalisés. Ajoutez ce qui suit, encore une fois au bas de votre JavaScript:

+
Avant de passer à la création de notre fonctionnalité de bouton, supprimons les contrôles natifs afin qu'ils ne gênent pas nos contrôles personnalisés. Ajoutez ce qui suit, encore une fois au bas de votre JavaScript:

 
 
player.removeAttribute('controls');

 
-
Le fait de procéder ainsi plutôt que de ne pas inclure les attributs de contrôle en premier lieu présente l'avantage que si notre JavaScript échoue pour une raison quelconque, l'utilisateur dispose toujours de certains contrôles.

+
Le fait de procéder ainsi plutôt que de ne pas inclure les attributs de contrôle en premier lieu présente l'avantage que si notre JavaScript échoue pour une raison quelconque, l'utilisateur dispose toujours de certains contrôles.

 
-
Câbler nos boutons

+
Câbler nos boutons

 
-
Commençons par configurer le bouton lecture / pause. Nous pouvons le faire basculer entre lecture et pause avec une simple fonction conditionnelle, comme ci-dessous. Ajoutez-le à votre code, en bas:

+
Commençons par configurer le bouton lecture / pause. Nous pouvons le faire basculer entre lecture et pause avec une simple fonction conditionnelle, comme ci-dessous. Ajoutez-le à votre code, en bas:

 
 
playPauseBtn.onclick = function() {
   if(player.paused) {
@@ -160,7 +156,7 @@ var timeLabel = document.querySelector('.time');

   }
 };

 
-
Ensuite, ajoutez ce code en bas, qui contrôle le bouton d'arrêt:

+
Ensuite, ajoutez ce code en bas, qui contrôle le bouton d'arrêt:

 
 
stopBtn.onclick = function() {
   player.pause();
@@ -168,9 +164,9 @@ var timeLabel = document.querySelector('.time');

   playPauseBtn.textContent = 'Play';
 };

 
-
Il n'y a pas de fonction  stop()  disponible sur {{domxref("HTMLMediaElement")}}s,  nous le mettons donc en pause()  et, dans le même temps, définissons la valeur currentTime sur 0.

+
Il n'y a pas de fonction  stop()  disponible sur {{domxref("HTMLMediaElement")}}s,  nous le mettons donc en pause()  et, dans le même temps, définissons la valeur currentTime sur 0.

 
-
Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre  code:

+
Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre  code:

 
 
rwdBtn.onclick = function() {
   player.currentTime -= 3;
@@ -185,11 +181,11 @@ fwdBtn.onclick = function() {
   }
 };

 
-
Celles-ci sont très simples, il suffit d’ajouter ou de soustraire 3 secondes à   currentTime chaque fois qu’on clique dessus. Dans un vrai lecteur vidéo, vous voudrez probablement une barre de recherche plus élaborée, ou similaire.

+
Celles-ci sont très simples, il suffit d’ajouter ou de soustraire 3 secondes à   currentTime chaque fois qu’on clique dessus. Dans un vrai lecteur vidéo, vous voudrez probablement une barre de recherche plus élaborée, ou similaire.

 
-
Notez que nous vérifions également si la durée  currentTime est supérieure à la durée totale du support ou si le support n'est pas en cours de lecture lorsque le bouton Fwd est enfoncé. Si l'une ou l'autre de ces conditions est vraie, nous arrêtons simplement la vidéo pour éviter que l'interface utilisateur ne se détériore si elle tente d'effectuer une avance rapide lorsque la vidéo n'est pas en cours de lecture ou si la fin de la vidéo est terminée. .

+
Notez que nous vérifions également si la durée  currentTime est supérieure à la durée totale du support ou si le support n'est pas en cours de lecture lorsque le bouton Fwd est enfoncé. Si l'une ou l'autre de ces conditions est vraie, nous arrêtons simplement la vidéo pour éviter que l'interface utilisateur ne se détériore si elle tente d'effectuer une avance rapide lorsque la vidéo n'est pas en cours de lecture ou si la fin de la vidéo est terminée. .

 
-
Enfin, ajoutez ce qui suit à la fin du code pour contrôler l’affichage du temps écoulé:

+
Enfin, ajoutez ce qui suit à la fin du code pour contrôler l’affichage du temps écoulé:

 
 
player.ontimeupdate = function() {
   var minutes = Math.floor(player.currentTime / 60);
@@ -213,105 +209,105 @@ fwdBtn.onclick = function() {
   timeLabel.textContent = mediaTime;
 };

 
-
Chaque fois que l'heure est mise à jour (une fois par seconde), nous activons cette fonction. Il calcule le nombre de minutes et de secondes à partir de la valeur actuelle donnée en secondes, ajoute un 0 au début si la valeur de minute ou de seconde est inférieure à 10, puis crée la lecture d'affichage et l'ajoute à l'étiquette de temps.

+
Chaque fois que l'heure est mise à jour (une fois par seconde), nous activons cette fonction. Il calcule le nombre de minutes et de secondes à partir de la valeur actuelle donnée en secondes, ajoute un 0 au début si la valeur de minute ou de seconde est inférieure à 10, puis crée la lecture d'affichage et l'ajoute à l'étiquette de temps.

 
-
Lectures complémentaires

+
Lectures complémentaires

 
-
Cela vous donne une idée de base sur la manière d’ajouter des fonctionnalités de lecteur personnalisées aux instances de lecteur vidéo / audio. Pour plus d'informations sur l'ajout de fonctionnalités plus complexes aux lecteurs vidéo / audio, y compris les solutions de secours Flash pour les navigateurs plus anciens, voir aussi:

+
Cela vous donne une idée de base sur la manière d’ajouter des fonctionnalités de lecteur personnalisées aux instances de lecteur vidéo / audio. Pour plus d'informations sur l'ajout de fonctionnalités plus complexes aux lecteurs vidéo / audio, y compris les solutions de secours Flash pour les navigateurs plus anciens, voir aussi:

 
 
 
-
Nous avons également créé un exemple avancé pour montrer comment créer un système orienté objet permettant de rechercher tous les lecteurs vidéo et audio de la page (quel que soit leur nombre) et d'y ajouter nos contrôles personnalisés. Voir  custom-controls-oojs ( également voir le code source).

+
Nous avons également créé un exemple avancé pour montrer comment créer un système orienté objet permettant de rechercher tous les lecteurs vidéo et audio de la page (quel que soit leur nombre) et d'y ajouter nos contrôles personnalisés. Voir  custom-controls-oojs ( également voir le code source).

 
-
Transcriptions audio

+
Transcriptions audio

 
-
Pour permettre aux sourds d'accéder au contenu audio, vous devez créer des transcriptions de texte. Ceux-ci peuvent être soit inclus sur la même page que l'audio d'une manière ou d'une autre, soit inclus sur une page séparée et liés à.

+
Pour permettre aux sourds d'accéder au contenu audio, vous devez créer des transcriptions de texte. Ceux-ci peuvent être soit inclus sur la même page que l'audio d'une manière ou d'une autre, soit inclus sur une page séparée et liés à.

 
-
En termes de création de la transcription, vos options sont les suivantes:

+
En termes de création de la transcription, vos options sont les suivantes:

 
 
 
-
Comme dans la plupart des choses de la vie, vous avez tendance à avoir ce que vous payez. la précision et le temps requis pour produire la transcription varient selon les services. Si vous payez une transcription pour une entreprise digne de confiance ou un service d’AI, vous le ferez probablement rapidement et avec une qualité élevée. Si vous ne voulez pas payer pour cela, vous le ferez probablement avec une qualité inférieure et / ou lentement.

+
Comme dans la plupart des choses de la vie, vous avez tendance à avoir ce que vous payez. la précision et le temps requis pour produire la transcription varient selon les services. Si vous payez une transcription pour une entreprise digne de confiance ou un service d’AI, vous le ferez probablement rapidement et avec une qualité élevée. Si vous ne voulez pas payer pour cela, vous le ferez probablement avec une qualité inférieure et / ou lentement.

 
-
Il n’est pas acceptable de publier une ressource audio mais de promettre de publier la transcription ultérieurement. De telles promesses ne sont souvent pas tenues, ce qui érodera la confiance entre vous et vos utilisateurs. Si le son que vous présentez ressemble à une réunion en face-à-face ou à une performance parlée en direct, il serait acceptable de prendre des notes pendant la performance, de les publier intégralement avec l'audio, puis de demander de l'aide pour les nettoyer par la suite.

+
Il n’est pas acceptable de publier une ressource audio mais de promettre de publier la transcription ultérieurement. De telles promesses ne sont souvent pas tenues, ce qui érodera la confiance entre vous et vos utilisateurs. Si le son que vous présentez ressemble à une réunion en face-à-face ou à une performance parlée en direct, il serait acceptable de prendre des notes pendant la performance, de les publier intégralement avec l'audio, puis de demander de l'aide pour les nettoyer par la suite.

 
-
Exemples de transcription

+
Exemples de transcription

 
-
Si vous utilisez un service automatisé, vous devrez probablement utiliser l'interface utilisateur fournie par l'outil. Par exemple, jetez un coup d’œil à  Audio Transcription Sample 1 et choisissez plus > Transcript.

+
Si vous utilisez un service automatisé, vous devrez probablement utiliser l'interface utilisateur fournie par l'outil. Par exemple, jetez un coup d’œil à  Audio Transcription Sample 1 et choisissez plus > Transcript.

 
-
Si vous créez votre propre interface utilisateur pour présenter votre audio et la transcription associée, vous pouvez le faire comme bon vous semble, mais il serait peut-être judicieux de l'inclure dans un panneau pouvant être affiché / masqué; voir notre exemple  transcription audio-ui exemple (voir aussi le code source).

+
Si vous créez votre propre interface utilisateur pour présenter votre audio et la transcription associée, vous pouvez le faire comme bon vous semble, mais il serait peut-être judicieux de l'inclure dans un panneau pouvant être affiché / masqué; voir notre exemple  transcription audio-ui exemple (voir aussi le code source).

 
-
Descriptions audio

+
Descriptions audio

 
-
Dans les cas où des éléments visuels accompagnent votre son, vous devez fournir une description de l’audio pour décrire ce contenu supplémentaire.

+
Dans les cas où des éléments visuels accompagnent votre son, vous devez fournir une description de l’audio pour décrire ce contenu supplémentaire.

 
-
Dans de nombreux cas, il s'agira simplement d'une vidéo. Dans ce cas, vous pouvez implémenter des légendes à l'aide des techniques décrites dans la section suivante de l'article.

+
Dans de nombreux cas, il s'agira simplement d'une vidéo. Dans ce cas, vous pouvez implémenter des légendes à l'aide des techniques décrites dans la section suivante de l'article.

 
-
Cependant, il y a des cas extrêmes. Vous pouvez par exemple avoir un enregistrement audio d'une réunion qui fait référence à une ressource d'accompagnement telle qu'une feuille de calcul ou un graphique. Dans de tels cas, vous devez vous assurer que les ressources sont fournies avec la transcription audio +, et les lier spécifiquement aux endroits où elles sont mentionnées dans la transcription. Cela aidera évidemment tous les utilisateurs, pas seulement les sourds.

+
Cependant, il y a des cas extrêmes. Vous pouvez par exemple avoir un enregistrement audio d'une réunion qui fait référence à une ressource d'accompagnement telle qu'une feuille de calcul ou un graphique. Dans de tels cas, vous devez vous assurer que les ressources sont fournies avec la transcription audio +, et les lier spécifiquement aux endroits où elles sont mentionnées dans la transcription. Cela aidera évidemment tous les utilisateurs, pas seulement les sourds.

 
 

-
Note: Une transcription audio aidera en général plusieurs groupes d'utilisateurs. En plus de permettre aux utilisateurs sourds d'accéder aux informations contenues dans l'audio, pensez à un utilisateur disposant d'une connexion à faible bande passante et qui trouverait que le téléchargement de l'audio est gênant. Pensez également à un utilisateur dans un environnement bruyant, comme un pub ou un bar, qui tente d'accéder à l'information mais ne l'entend pas par dessus le bruit.

+
Note : Une transcription audio aidera en général plusieurs groupes d'utilisateurs. En plus de permettre aux utilisateurs sourds d'accéder aux informations contenues dans l'audio, pensez à un utilisateur disposant d'une connexion à faible bande passante et qui trouverait que le téléchargement de l'audio est gênant. Pensez également à un utilisateur dans un environnement bruyant, comme un pub ou un bar, qui tente d'accéder à l'information mais ne l'entend pas par dessus le bruit.

 

 
-
Pistes de texte vidéo

+
Pistes de texte vidéo

 
-
Pour rendre la vidéo accessible aux sourds, aux aveugles ou même à d'autres groupes d'utilisateurs (par exemple, ceux dont la bande passante est faible ou qui ne comprennent pas la langue dans laquelle la vidéo est enregistrée), vous devez inclure des pistes de texte avec votre contenu vidéo. .

+
Pour rendre la vidéo accessible aux sourds, aux aveugles ou même à d'autres groupes d'utilisateurs (par exemple, ceux dont la bande passante est faible ou qui ne comprennent pas la langue dans laquelle la vidéo est enregistrée), vous devez inclure des pistes de texte avec votre contenu vidéo. .

 
 

-
Note: Les pistes de texte sont également utiles pour n'importe quel utilisateur, pas seulement pour les personnes handicapées. Par exemple, certains utilisateurs peuvent ne pas être en mesure d’entendre le son car ils se trouvent dans des environnements bruyants (comme un bar bondé lorsqu’un match de sport est diffusé) ou peuvent ne pas déranger les autres s’ils sont dans un endroit calme (comme une bibliothèque). .)

+
Note : Les pistes de texte sont également utiles pour n'importe quel utilisateur, pas seulement pour les personnes handicapées. Par exemple, certains utilisateurs peuvent ne pas être en mesure d’entendre le son car ils se trouvent dans des environnements bruyants (comme un bar bondé lorsqu’un match de sport est diffusé) ou peuvent ne pas déranger les autres s’ils sont dans un endroit calme (comme une bibliothèque). .)

 

 
-
Ce n'est pas un nouveau concept - les sous-titres codés sont disponibles depuis assez longtemps dans les services de télévision:

+
Ce n'est pas un nouveau concept - les sous-titres codés sont disponibles depuis assez longtemps dans les services de télévision:

 
-
Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"

+
Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"

 
-
Alors que de nombreux pays proposent des films en anglais avec sous-titres écrits dans leur propre langue maternelle, des sous-titres en différentes langues sont souvent disponibles sur DVD, par exemple

+
Alors que de nombreux pays proposent des films en anglais avec sous-titres écrits dans leur propre langue maternelle, des sous-titres en différentes langues sont souvent disponibles sur DVD, par exemple

 
-
An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"

+
An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"

 
-
Il existe différents types de pistes de texte avec des objectifs différents. Les principaux que vous rencontrerez sont:

+
Il existe différents types de pistes de texte avec des objectifs différents. Les principaux que vous rencontrerez sont:

 
 
 
-
Implémentation de pistes de texte vidéo HTML5

+
Implémentation de pistes de texte vidéo HTML5

 
-
Les pistes de texte à afficher avec une vidéo HTML5 doivent être écrites au format WebVTT, un format de texte contenant plusieurs chaînes de texte ainsi que des métadonnées, telles que l'heure à laquelle vous souhaitez afficher chaque chaîne de texte et même des informations de style / positionnement limitées. Ces chaînes de texte sont appelées cues .

+
Les pistes de texte à afficher avec une vidéo HTML5 doivent être écrites au format WebVTT, un format de texte contenant plusieurs chaînes de texte ainsi que des métadonnées, telles que l'heure à laquelle vous souhaitez afficher chaque chaîne de texte et même des informations de style / positionnement limitées. Ces chaînes de texte sont appelées cues .

 
-
Un fichier WebVTT typique ressemblera à ceci:

+
Un fichier WebVTT typique ressemblera à ceci:

 
 
WEBVTT
 
 1
 00:00:22.230 --> 00:00:24.606
- Ceci est le premier sous-titre.
+ Ceci est le premier sous-titre.
 
 2
 00:00:30.739 --> 00:00:34.074
- C'est le deuxième .
+ C'est le deuxième .
 
   ...

 
-
Pour que ceci soit affiché avec la lecture du média HTML, vous devez:

+
Pour que ceci soit affiché avec la lecture du média HTML, vous devez:

 
 
 
-
Voici un exemple:

+
Voici un exemple:

 
 
<video controls>
     <source src="example.mp4" type="video/mp4">
@@ -319,57 +315,52 @@ fwdBtn.onclick = function() {
     <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
 </video>

 
-
Cela donnera une vidéo avec des sous-titres affichés, un peu comme ceci:

+
Cela donnera une vidéo avec des sous-titres affichés, un peu comme ceci:

 
-
Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

+
Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

 
-
Pour plus de détails, veuillez lire  Ajouter des légendes et des sous titres à des vidéos HTML 5.  Vous trouverez un exemple  qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi le code source.) Cet exemple utilise du JavaScript. pour permettre aux utilisateurs de choisir entre différents sous-titres. Notez que pour activer les sous-titres, vous devez appuyer sur le bouton "CC" et sélectionner une option - Anglais, Allemand ou Español.

+
Pour plus de détails, veuillez lire  Ajouter des légendes et des sous titres à des vidéos HTML 5.  Vous trouverez un exemple  qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi le code source.) Cet exemple utilise du JavaScript. pour permettre aux utilisateurs de choisir entre différents sous-titres. Notez que pour activer les sous-titres, vous devez appuyer sur le bouton "CC" et sélectionner une option - Anglais, Allemand ou Español.

 
 

-
Note: Les pistes de texte et les transcriptions vous aident également avec {{glossary ("SEO")}}, car les moteurs de recherche se développent particulièrement bien avec le texte. Les pistes de texte permettent même aux moteurs de recherche de se lier directement à un endroit en cours de vidéo.

+
Note : Les pistes de texte et les transcriptions vous aident également avec {{glossary ("SEO")}}, car les moteurs de recherche se développent particulièrement bien avec le texte. Les pistes de texte permettent même aux moteurs de recherche de se lier directement à un endroit en cours de vidéo.

 

 
-
Autre contenu multimédia

+
Autre contenu multimédia

 
-
Les sections ci-dessus ne couvrent pas tous les types de contenu multimédia que vous pourriez vouloir placer sur une page Web. Vous devrez peut-être également gérer des jeux, des animations, des diaporamas, des vidéos intégrées et du contenu créé à l'aide d'autres technologies disponibles, telles que:

+
Les sections ci-dessus ne couvrent pas tous les types de contenu multimédia que vous pourriez vouloir placer sur une page Web. Vous devrez peut-être également gérer des jeux, des animations, des diaporamas, des vidéos intégrées et du contenu créé à l'aide d'autres technologies disponibles, telles que:

 
 
 
-
Pour ce type de contenu, vous devez traiter les problèmes d’accessibilité au cas par cas. Dans certains cas, ce n'est pas si grave, par exemple:

+
Pour ce type de contenu, vous devez traiter les problèmes d’accessibilité au cas par cas. Dans certains cas, ce n'est pas si grave, par exemple:

 
 
 
-
Cependant, il est difficile de rendre les autres multimédias accessibles. Si, par exemple, vous avez affaire à un jeu immersif en 3D ou à une application de réalité virtuelle, il est vraiment difficile de fournir des alternatives textuelles pour une telle expérience, et vous pouvez soutenir que les utilisateurs non-voyants ne sont pas vraiment dans le groupe-cible de telles applications.

+
Cependant, il est difficile de rendre les autres multimédias accessibles. Si, par exemple, vous avez affaire à un jeu immersif en 3D ou à une application de réalité virtuelle, il est vraiment difficile de fournir des alternatives textuelles pour une telle expérience, et vous pouvez soutenir que les utilisateurs non-voyants ne sont pas vraiment dans le groupe-cible de telles applications.

 
-
Vous pouvez toutefois vous assurer qu'une telle application présente un contraste de couleur suffisant et une présentation claire de sorte qu'elle soit perceptible par les personnes ayant une vision basse / daltonisme, et qu'elle soit également accessible au clavier. Rappelez-vous que l'accessibilité consiste à faire tout ce que vous pouvez, plutôt que de chercher à atteindre une accessibilité à 100% tout le temps, ce qui est souvent impossible.

+
Vous pouvez toutefois vous assurer qu'une telle application présente un contraste de couleur suffisant et une présentation claire de sorte qu'elle soit perceptible par les personnes ayant une vision basse / daltonisme, et qu'elle soit également accessible au clavier. Rappelez-vous que l'accessibilité consiste à faire tout ce que vous pouvez, plutôt que de chercher à atteindre une accessibilité à 100% tout le temps, ce qui est souvent impossible.

 
-

-
Résumé

-

+
Résumé

 
-
Ce chapitre présente un résumé des problèmes d’accessibilité des contenus multimédias, ainsi que des solutions pratiques.

+
Ce chapitre présente un résumé des problèmes d’accessibilité des contenus multimédias, ainsi que des solutions pratiques.

 
 
{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}

 
-
 

-
-
Dans ce module

+
Dans ce module

 
 
 
-
 

diff --git a/files/fr/learn/accessibility/wai-aria_basics/index.html b/files/fr/learn/accessibility/wai-aria_basics/index.html
index a9990d7f55..c7821400cf 100644
--- a/files/fr/learn/accessibility/wai-aria_basics/index.html
+++ b/files/fr/learn/accessibility/wai-aria_basics/index.html
@@ -19,62 +19,62 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
 
 
{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}

 
-
Après l'article précédent, il peut être difficile de créer des contrôles UI complexes impliquant du code HTML non sémantique et du contenu dynamique mis à jour par JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser pour informer les utilisateurs de ce qui se passe. Nous montrerons ici comment l'utiliser au niveau de base pour améliorer l'accessibilité.

+
Après l'article précédent, il peut être difficile de créer des contrôles UI complexes impliquant du code HTML non sémantique et du contenu dynamique mis à jour par JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser pour informer les utilisateurs de ce qui se passe. Nous montrerons ici comment l'utiliser au niveau de base pour améliorer l'accessibilité.

 
-
+

-   
+   
-   
-   
+   
+   

  
   

      Prerequis:Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension des articles précédents du cours.Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension des articles précédents du cours.
   

   
Objectif :Se familiariser avec WAI-ARIA et savoir comment l'utiliser pour fournir une sémantique supplémentaire utile afin d'améliorer l'accessibilité, le cas échéant.Objectif :Se familiariser avec WAI-ARIA et savoir comment l'utiliser pour fournir une sémantique supplémentaire utile afin d'améliorer l'accessibilité, le cas échéant.
   

  
 

 
-
Qu'est WAI-ARIA?

+
Qu'est WAI-ARIA?

 
-
Commençons par regarder ce que WAI-ARIA est , et ce qu’il peut faire pour nous.

+
Commençons par regarder ce que WAI-ARIA est , et ce qu’il peut faire pour nous.

 
-
Un nouvel ensemble de problèmes

+
Un nouvel ensemble de problèmes

 
 
Car les applications web ont commencé à devenir plus complexes et dynamiques, un nouvel ensemble de fonctionnalités d'accessibilité et de problèmes ont commencé à apparaître.

 
-
Par exemple, HTML5 a introduit un certain nombre d’éléments sémantiques pour définir des fonctionnalités de page communes   ({{htmlelement("nav")}}, {{htmlelement("footer")}}, etc.)  Avant de les utiliser, les développeurs utilisaient simplement {{htmlelement("div")}} s avec des identifiants ou des classes, par exemple <div class="nav"> , mais ils posaient problème, car il n’existait pas de moyen facile de trouver facilement une fonctionnalité de page spécifique telle que la navigation principale par programmation. .

+
Par exemple, HTML5 a introduit un certain nombre d’éléments sémantiques pour définir des fonctionnalités de page communes   ({{htmlelement("nav")}}, {{htmlelement("footer")}}, etc.)  Avant de les utiliser, les développeurs utilisaient simplement {{htmlelement("div")}} s avec des identifiants ou des classes, par exemple <div class="nav"> , mais ils posaient problème, car il n’existait pas de moyen facile de trouver facilement une fonctionnalité de page spécifique telle que la navigation principale par programmation. .

 
-
La solution initiale consistait à ajouter un ou plusieurs liens cachés en haut de la page pour créer un lien vers la navigation (ou autre), par exemple:

+
La solution initiale consistait à ajouter un ou plusieurs liens cachés en haut de la page pour créer un lien vers la navigation (ou autre), par exemple:

 
-
<a href="#hidden" class="hidden">Passer à la navigation</a>

+
<a href="#hidden" class="hidden">Passer à la navigation</a>

 
-
Mais ceci n’est pas encore très précis et ne peut être utilisé que lorsque le lecteur d’écran lit en haut de la page.

+
Mais ceci n’est pas encore très précis et ne peut être utilisé que lorsque le lecteur d’écran lit en haut de la page.

 
-
Autre exemple, les applications ont commencé à comporter des commandes complexes telles que des sélecteurs de date pour choisir les dates, des curseurs pour choisir des valeurs, etc. HTML5 fournit des types spéciaux  input  pour rendre de tels contrôles:

+
Autre exemple, les applications ont commencé à comporter des commandes complexes telles que des sélecteurs de date pour choisir les dates, des curseurs pour choisir des valeurs, etc. HTML5 fournit des types spéciaux  input  pour rendre de tels contrôles:

 
 
<input type="date">
 <input type="range">

 
-
Celles-ci ne sont pas bien prises en charge sur tous les navigateurs et il est également très difficile de les nommer, ce qui les rend peu utiles pour l'intégration aux conceptions de sites Web. En conséquence, les développeurs font souvent appel à des bibliothèques JavaScript qui génèrent des contrôles tels qu'une série d'éléments  {{htmlelement("div")}} s imbriqués ou d'éléments de table avec des noms de classe, qui sont ensuite stylés à l'aide de CSS et contrôlés à l'aide de JavaScript.

+
Celles-ci ne sont pas bien prises en charge sur tous les navigateurs et il est également très difficile de les nommer, ce qui les rend peu utiles pour l'intégration aux conceptions de sites Web. En conséquence, les développeurs font souvent appel à des bibliothèques JavaScript qui génèrent des contrôles tels qu'une série d'éléments  {{htmlelement("div")}} s imbriqués ou d'éléments de table avec des noms de classe, qui sont ensuite stylés à l'aide de CSS et contrôlés à l'aide de JavaScript.

 
-
Le problème ici est que, visuellement, ils fonctionnent, mais que les lecteurs d’écran ne peuvent pas comprendre ce qu’ils sont, et on dit aux utilisateurs qu’ils peuvent voir une multitude d’éléments sans sémantique pour décrire ce qu’ils veulent dire.

+
Le problème ici est que, visuellement, ils fonctionnent, mais que les lecteurs d’écran ne peuvent pas comprendre ce qu’ils sont, et on dit aux utilisateurs qu’ils peuvent voir une multitude d’éléments sans sémantique pour décrire ce qu’ils veulent dire.

 
 
Entrez WAI-ARIA

 
-
WAI-ARIA est une spécification écrite par le W3C et définissant un ensemble d'attributs HTML supplémentaires pouvant être appliqués aux éléments pour fournir une sémantique supplémentaire et améliorer l'accessibilité en cas de manque. Trois caractéristiques principales sont définies dans la spécification:

+
WAI-ARIA est une spécification écrite par le W3C et définissant un ensemble d'attributs HTML supplémentaires pouvant être appliqués aux éléments pour fournir une sémantique supplémentaire et améliorer l'accessibilité en cas de manque. Trois caractéristiques principales sont définies dans la spécification:

 
 
 
-
Un point important sur les attributs WAI-ARIA est qu'ils n'affectent en rien la page Web, à l'exception des informations exposées par les API d'accessibilité du navigateur (où les lecteurs d'écran obtiennent leurs informations). WAI-ARIA n'affecte pas la structure de la page Web, le DOM, etc., bien que les attributs puissent être utiles pour sélectionner des éléments par CSS.

+
Un point important sur les attributs WAI-ARIA est qu'ils n'affectent en rien la page Web, à l'exception des informations exposées par les API d'accessibilité du navigateur (où les lecteurs d'écran obtiennent leurs informations). WAI-ARIA n'affecte pas la structure de la page Web, le DOM, etc., bien que les attributs puissent être utiles pour sélectionner des éléments par CSS.

 
 

-
Note: Vous pouvez trouver une liste utile de tous les rôles ARIA et de leurs utilisations, avec des liens vers des informations supplémentaires, dans les spécifications WAI-ARIA — voir la définition des rôles.

+
Note : Vous pouvez trouver une liste utile de tous les rôles ARIA et de leurs utilisations, avec des liens vers des informations supplémentaires, dans les spécifications WAI-ARIA — voir la définition des rôles.

 
-
La spécification contient également une liste de toutes les propriétés et de tous les états, avec des liens vers des informations complémentaires - voir  Définitions des états et des propriétés (tous les attributs aria- *).

+
La spécification contient également une liste de toutes les propriétés et de tous les états, avec des liens vers des informations complémentaires - voir  Définitions des états et des propriétés (tous les attributs aria- *).

 

 
 
Où WAI-ARIA est supporté?

@@ -92,13 +92,13 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
 
 
    
  
  1. Browser support is generally quite good — at the time of writing, caniuse.com stated that global browser support for WAI-ARIA was around 88%.
    2. 
- 
  2. Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's WAI-ARIA Screen reader compatibility article.
    3. 
+ 
  3. Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's WAI-ARIA Screen reader compatibility article.
    4. 
 

 
 
In this article, we won't attempt to cover every WAI-ARIA feature, and its exact support details. Instead, we will cover the most critical WAI-ARIA features for you to know about; if we don't mention any support details, you can assume that the feature is well-supported. We will clearly mention any exceptions to this.

 
 

-
Note: Some JavaScript libraries support WAI-ARIA, meaning that when they generate UI features like complex form controls, they add ARIA attributes to improve the accessibility of those features. If you are looking for a 3rd party JavaScript solution for rapid UI development, you should definitely consider the accessibility of its UI widgets as an important factor when making your choice. Good examples are jQuery UI (see About jQuery UI: Deep accessibility support), ExtJS, and Dojo/Dijit.

+
Note : Some JavaScript libraries support WAI-ARIA, meaning that when they generate UI features like complex form controls, they add ARIA attributes to improve the accessibility of those features. If you are looking for a 3rd party JavaScript solution for rapid UI development, you should definitely consider the accessibility of its UI widgets as an important factor when making your choice. Good examples are jQuery UI (see About jQuery UI: Deep accessibility support), ExtJS, and Dojo/Dijit.

 

 
 
When should you use WAI-ARIA?

@@ -107,24 +107,24 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
 
 
    
  
  1. Signposts/Landmarks: ARIA's role attribute values can act as landmarks that either replicate the semantics of HTML5 elements (e.g. {{htmlelement("nav")}}), or go beyond HTML5 semantics to provide signposts to different functional areas, e.g search, tabgroup, tab, listbox, etc.
    2. 
- 
  2. Dynamic content updates: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use aria-live to inform screenreader users when an area of content is updated, e.g. via XMLHttpRequest, or DOM APIs.
    3. 
+ 
  3. Dynamic content updates: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use aria-live to inform screenreader users when an area of content is updated, e.g. via XMLHttpRequest, or DOM APIs.
    4. 
  
  4. Enhancing keyboard accessibility: There are built-in HTML elements that have native keyboard accessibility; when other elements are used along with JavaScript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. Where this is unavoidable, WAI-ARIA provides a means to allow other elements to receive focus (using tabindex).
    5. 
  
  5. Accessibility of non-semantic controls: When a series of nested <div>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In these situations, ARIA can help to provide what's missing with a combination of roles like button, listbox, or tabgroup, and properties like aria-required or aria-posinset to provide further clues as to functionality.
    6. 
 

 
-
One thing to remember though — you should only use WAI-ARIA when you need to! Ideally, you should always use native HTML features to provide the semantics required by screenreaders to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.

+
One thing to remember though — you should only use WAI-ARIA when you need to! Ideally, you should always use native HTML features to provide the semantics required by screenreaders to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.

 
 
But again, only use it when necessary!

 
 

-
Note: Also, try to make sure you test your site with a variety of real users — non-disabled people, people using screenreaders, people using keyboard navigation, etc. They will have better insights than you about how well it works.

+
Note : Also, try to make sure you test your site with a variety of real users — non-disabled people, people using screenreaders, people using keyboard navigation, etc. They will have better insights than you about how well it works.

 

 
 
Practical WAI-ARIA implementations

 
 
In the next section we'll look at the four areas in more detail, along with practical examples. Before you continue, you should get a screenreader testing setup put in place, so you can test some of the examples as you go through.

 
-
See our section on testing screenreaders for more information.

+
See our section on testing screenreaders for more information.

 
 
Signposts/Landmarks

 
@@ -160,7 +160,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
 
 
If you go to VoiceOver's landmarks menu (accessed using VoiceOver key + U and then using the cursor keys to cycle through the menu choices), you'll see that most of the elements are nicely listed so they can be accessed quickly.

 
-

+

 
 
However, we could do better here. the search form is a really important landmark that people will want to find, but it is not listed in the landmarks menu or treated like a notable landmark, beyond the actual input being called out as a search input (<input type="search">). In addition, some older browsers (most notably IE8) don't recognise the semantics of the HTML5 elements.

 
@@ -202,7 +202,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
 
 
Content loaded into the DOM can be easily accessed using a screenreader, from textual content to alternative text attached to images. Traditional static websites with largely text content are therefore easy to make accessible for people with visual impairments.

 
-
The problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page reloading via a mechanism like XMLHttpRequest, Fetch, or DOM APIs. These are sometimes referred to as live regions.

+
The problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page reloading via a mechanism like XMLHttpRequest, Fetch, or DOM APIs. These are sometimes referred to as live regions.

 
 
Let's look at a quick example — see aria-no-live.html (also see it running live). In this example we have a simple random quote box:

 
@@ -213,7 +213,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
   </blockquote>
 </section>
-

Our JavaScript loads a JSON file via XMLHttpRequest containing a series of random quotes and their authors. Once that is done, we start up a setInterval() loop that loads a new random quote into the quote box every 10 seconds:

+

Our JavaScript loads a JSON file via XMLHttpRequest containing a series of random quotes and their authors. Once that is done, we start up a setInterval() loop that loads a new random quote into the quote box every 10 seconds:

var intervalID = window.setInterval(showQuote, 10000);
@@ -234,7 +234,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics

This will cause a screenreader to read out the content as it is updated.

-

Note: Most browsers will throw a security exception if you try to do an XMLHttpRequest call from a file:// URL, e.g. if you just load the file by loading it directly into the browser (via double clicking, etc.). To get it to run, you will need to upload it to a web server, for example using GitHub, or a local web server like Python's SimpleHTTPServer.

+

Note : Most browsers will throw a security exception if you try to do an XMLHttpRequest call from a file:// URL, e.g. if you just load the file by loading it directly into the browser (via double clicking, etc.). To get it to run, you will need to upload it to a web server, for example using GitHub, or a local web server like Python's SimpleHTTPServer.

There is an additional consideration here — only the bit of text that updates is read out. It might be nice if we always read out the heading too, so the user can remember what is being read out. To do this, we can add the aria-atomic property to the section. Update your <section> tag again, like so:

@@ -244,11 +244,11 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics

The aria-atomic="true" attribute tells screenreaders to read out the entire element contents as one atomic unit, not just the bits that were updated.

-

Note: You can see the finished example at aria-live.html (see it running live).

+

Note : You can see the finished example at aria-live.html (see it running live).

-

Note: The aria-relevant property is also quite useful for controlling what gets read out when a live region is updated. You can for example only get content additions or removals read out.

+

Note : The aria-relevant property is also quite useful for controlling what gets read out when a live region is updated. You can for example only get content additions or removals read out.

Enhancing keyboard accessibility

@@ -264,7 +264,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
  • tabindex="-1" — this allows not normally tabbable elements to receive focus programmatically, e.g. via JavaScript, or as the target of links. 
    • -

    We discussed this in more detail and showed a typical implementation back in our HTML accessibility article — see Building keyboard accessibility back in.

    +

    We discussed this in more detail and showed a typical implementation back in our HTML accessibility article — see Building keyboard accessibility back in.

    Accessibility of non-semantic controls

    @@ -272,15 +272,15 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics

    Form validation and error alerts

    -

    First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read Keeping it unobtrusive for a full recap). At the end of this section we showed that we have included some ARIA attributes on the error message box that appears when there are validation errors when you try to submit the form:

    +

    First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read Keeping it unobtrusive for a full recap). At the end of this section we showed that we have included some ARIA attributes on the error message box that appears when there are validation errors when you try to submit the form:

    -
    <div class="errors" role="alert" aria-relevant="all">
-  <ul>
-  </ul>
-</div>
    +
    <div class="errors" role="alert" aria-relevant="all">
+  <ul>
+  </ul>
+</div>
    @@ -304,14 +304,14 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
    -

    Note: You can see the finished example live at form-validation-updated.html.

    +

    Note : You can see the finished example live at form-validation-updated.html.

    -

    WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the aria-label property to provide a label where we don't want the label to be visible to sighted users (see the {{anch("Signposts/Landmarks")}} section, above). There are some other labelling techniques that use other properties such as aria-labelledby if you want to designate a non-<label> element as a label or label multiple form inputs with the same label, and aria-describedby, if you want to associate other information with a form input and have it read out as well. See WebAIM's Advanced Form Labeling article for more details.

    +

    WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the aria-label property to provide a label where we don't want the label to be visible to sighted users (see the {{anch("Signposts/Landmarks")}} section, above). There are some other labelling techniques that use other properties such as aria-labelledby if you want to designate a non-<label> element as a label or label multiple form inputs with the same label, and aria-describedby, if you want to associate other information with a form input and have it read out as well. See WebAIM's Advanced Form Labeling article for more details.

    -

    There are many other useful properties and states too, for indicating the status of form elements. For example, aria-disabled="true" can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.

    +

    There are many other useful properties and states too, for indicating the status of form elements. For example, aria-disabled="true" can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.

    -

    If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our form-validation-checkbox-disabled.html demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:

    +

    If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our form-validation-checkbox-disabled.html demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:

    <p class="hidden-alert" aria-live="assertive"></p>
    @@ -335,7 +335,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics

    Describing non-semantic buttons as buttons

    -

    A few times in this course already, we've mentioned the native accessibilty of (and the accessibility issues behind using other elements to fake) buttons, links, or form elements (see UI controls in the HTML accessibility article, and {{anch("Enhancing keyboard accessibility")}}, above). Basically, you can add keyboard accessibility back in without too much trouble in many cases, using tabindex and a bit of JavaScript.

    +

    A few times in this course already, we've mentioned the native accessibilty of (and the accessibility issues behind using other elements to fake) buttons, links, or form elements (see UI controls in the HTML accessibility article, and {{anch("Enhancing keyboard accessibility")}}, above). Basically, you can add keyboard accessibility back in without too much trouble in many cases, using tabindex and a bit of JavaScript.

    But what about screenreaders? They still won't see the elements as buttons. If we test our fake-div-buttons.html example in a screenreader, our fake buttons will be reported using phrases like "Click me!, group", which is obviously confusing.

    @@ -346,14 +346,14 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics

    Now when you try this using a screenreader, you'll have buttons be reported using phrases like "Click me!, button" — much better.

    -

    Note: Don't forget however that using the correct semantic element where possible is always better. If you want to create a button, and can use a {{htmlelement("button")}} element, you should use a {{htmlelement("button")}} element!

    +

    Note : Don't forget however that using the correct semantic element where possible is always better. If you want to create a button, and can use a {{htmlelement("button")}} element, you should use a {{htmlelement("button")}} element!

    Guiding users through complex widgets

    There are a whole host of other roles that can identify non-semantic element structures as common UI features that go beyond what's available in standard HTML, for example combobox, slider, tabpanel, tree. You can see a number of userful examples in the Deque university code library, to give you an idea of how such controls can be made accessible.

    -

    Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see Hiding things in our CSS and JavaScript accessibility article), which you can find at Tabbed info box example (see source code).

    +

    Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see Hiding things in our CSS and JavaScript accessibility article), which you can find at Tabbed info box example (see source code).

    This example as-is works fine in terms of keyboard accessibility — you can happily tab between the different tabs and select them to show the tab contents. It is also fairly accessible too — you can scroll through the content and use the headings to navigate , even if you can't see what is happening on screen. It is however not that obvious what the content is — a screenreader currently reports the content as a list of links, and some content with three headings. It doesn't give you any idea of what the relationship is between the content. Giving the user more clues as to the structure of the content is always good.

    @@ -377,7 +377,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics </div>
    -

    Note: The most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screenreader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc.

    +

    Note : The most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screenreader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc.

    The new features are as follows:

    @@ -394,7 +394,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics

    In our tests, this new structure did serve to improve things overall. The tabs are now recognised as tabs (e.g. "tab" is spoken by the screenreader), the selected tab is indicated by "selected" being read out with the tab name, and the screenreader also tells you which tab number you are currently on. In addition, because of the aria-hidden settings (only the non-hidden tab ever has aria-hidden="false" set), the non-hidden content is the only one you can navigate down to, meaning the selected content is easier to find.

    -

    Note: If there is anything you explicitly don't want screen readers to read out, you can give them the aria-hidden="true"  attribute.

    +

    Note : If there is anything you explicitly don't want screen readers to read out, you can give them the aria-hidden="true"  attribute.

    Summary

    @@ -419,7 +419,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
  • Qu'est ce que l'accessibilité?
  • HTML : une bonne base pour l'accessibilité
  • Meilleures pratiques d'accessibilité CSS et JavaScript
    • -
  • WAI-ARIA basics
    • +
  • WAI-ARIA basics
  • Accessible multimedia
  • Accessibilité mobile
  • Évaluation: dépannage d'accessibilité
    • diff --git a/files/fr/learn/accessibility/what_is_accessibility/index.html b/files/fr/learn/accessibility/what_is_accessibility/index.html index a101c80ccb..dc7376524e 100644 --- a/files/fr/learn/accessibility/what_is_accessibility/index.html +++ b/files/fr/learn/accessibility/what_is_accessibility/index.html @@ -21,9 +21,9 @@ original_slug: Apprendre/a11y/What_is_accessibility
    {{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}
    -

    Cet article présente un module général sur ce que l'accessibilité est actuellement — Cela comprend les groupes de personnes que l'on a besoin de considérer et pourquoi, quels outils ils utilisent afin d'intéragir avec les pages web et comment rendre accessible la partie de notre espace de travail web.

    +

    Cet article présente un module général sur ce que l'accessibilité est actuellement — Cela comprend les groupes de personnes que l'on a besoin de considérer et pourquoi, quels outils ils utilisent afin d'intéragir avec les pages web et comment rendre accessible la partie de notre espace de travail web.

    - +
    @@ -58,7 +58,7 @@ original_slug: Apprendre/a11y/What_is_accessibility

    Les personnes ayant un handicap sont aussi variées que les personnes sans handicap, tout comme leurs handicaps. L'important ici est de ne pas penser seulement à votre propre ordinateur et à comment vous utilisez le web, mais de commencer à apprendre comment les autres l'utilisent — vous n'êtes pas vos utilisateurs. Les principaux types de handicap à considérer sont expliqués ci-dessous, avec les outils spéciaux que chacun utilise pour accéder aux contenus du web (connus sous le nom de technologies d'assistance).

    -

    Note : L'aide-mémoire Handicap et santé de l'Organisation Mondiale de la Santé indique que « Plus d’un milliard de personnes, c’est-à-dire environ 15% de la population mondiale, présentent une forme ou une autre de handicap » , et que « Entre 110 et 190 millions de personnes adultes ont des difficultés importantes sur le plan fonctionnel. »

    +

    Note : L'aide-mémoire Handicap et santé de l'Organisation Mondiale de la Santé indique que « Plus d’un milliard de personnes, c’est-à-dire environ 15% de la population mondiale, présentent une forme ou une autre de handicap » , et que « Entre 110 et 190 millions de personnes adultes ont des difficultés importantes sur le plan fonctionnel. »

    Les personnes ayant des troubles de la vue

    @@ -71,7 +71,7 @@ original_slug: Apprendre/a11y/What_is_accessibility
  • Certains sont intégrés au système d'exploitation, comme VoiceOver (Mac OS X et iOS), Narrator (Microsoft Windows), ChromeVox (sur Chrome OS), et TalkBack (Android).
    • -

    Il est conseillé de se familiariser avec les lecteurs d'écran ; vous devriez installer un lecteur d'écran et expérimenter avec pour comprendre comment il marche. Lisez notre Guide pour tester les lecteurs d'écrans sur différents navigateurs (en) pour avoir plus d'information sur leur utilisation. La vidéo ci-dessous (en anglais) vous donne un bref aperçu de l'experience.

    +

    Il est conseillé de se familiariser avec les lecteurs d'écran ; vous devriez installer un lecteur d'écran et expérimenter avec pour comprendre comment il marche. Lisez notre Guide pour tester les lecteurs d'écrans sur différents navigateurs (en) pour avoir plus d'information sur leur utilisation. La vidéo ci-dessous (en anglais) vous donne un bref aperçu de l'experience.

    {{EmbedYouTube("IK97XMibEws")}}

    @@ -91,94 +91,94 @@ original_slug: Apprendre/a11y/What_is_accessibility

    Ce genre de handicap peut aussi venir avec l'âge, et non d'un accident ou d'une pathologie particulière, ou encore être la conséquence de limitations matérielles — certains utilisateurs peuvent ne pas avoir de souris.

    -

    En général, cela se traduit au niveau du développement web par la nécessité de rendre les contrôles accessible au clavier — nous discuterons de l'accessibilité au clavier plus tard dans d'autres articles du module, mais cela peut être une bonne idée d'essayer de naviguer sur certains sites en utilisant seulement le clavier. Par exemple, pouvez vous naviguer entre les différents champs d'un formulaire juste avec la touche Tab ? Vous trouverez plus de détails à propos de l'utilisation du clavier dans la section Test d'accessibilité avec le clavier intégré entre différents navigateurs(en).

    +

    En général, cela se traduit au niveau du développement web par la nécessité de rendre les contrôles accessible au clavier — nous discuterons de l'accessibilité au clavier plus tard dans d'autres articles du module, mais cela peut être une bonne idée d'essayer de naviguer sur certains sites en utilisant seulement le clavier. Par exemple, pouvez vous naviguer entre les différents champs d'un formulaire juste avec la touche Tab ? Vous trouverez plus de détails à propos de l'utilisation du clavier dans la section Test d'accessibilité avec le clavier intégré entre différents navigateurs(en).

    -

    De nombreuses personnes souffrent de troubles de la mobilité. Par exemple, en France, 4% des personnes vivant en ménage ordinaire déclarent avoir des difficultés à se servir des mains et doigts, d'après la vue d'ensemble L'approche du handicap par les limitations fonctionnelles et la restriction globale d'activité chez les adultes de 20 à 59 ans de l'INSEE.

    +

    De nombreuses personnes souffrent de troubles de la mobilité. Par exemple, en France, 4% des personnes vivant en ménage ordinaire déclarent avoir des difficultés à se servir des mains et doigts, d'après la vue d'ensemble L'approche du handicap par les limitations fonctionnelles et la restriction globale d'activité chez les adultes de 20 à 59 ans de l'INSEE.

    -

    Personnes ayant des déficiences cognitives

    +

    Personnes ayant des déficiences cognitives

    -

    La dernière catégorie d'incapacités est probablement la plus large. Les déficiences cognitives désignent généralement des incapacités allant des maladies mentales aux difficultés d'apprentissage, aux difficultés de compréhension et de concentration telles que  TDAH-trouble d'hyperactivité avec déficit de l'attention, TSA-trouble du spectre de l’autisme,  aux personnes atteintes de schizophrénie, et à de nombreux autres types de désordres, qui peuvent affecter de nombreux aspects de la vie quotidienne en raison de problèmes de mémoire, de résolution de problèmes, de compréhension, d'attention, etc. 

    +

    La dernière catégorie d'incapacités est probablement la plus large. Les déficiences cognitives désignent généralement des incapacités allant des maladies mentales aux difficultés d'apprentissage, aux difficultés de compréhension et de concentration telles que  TDAH-trouble d'hyperactivité avec déficit de l'attention, TSA-trouble du spectre de l’autisme,  aux personnes atteintes de schizophrénie, et à de nombreux autres types de désordres, qui peuvent affecter de nombreux aspects de la vie quotidienne en raison de problèmes de mémoire, de résolution de problèmes, de compréhension, d'attention, etc. 

    -

    Le plus souvent, ces incapacités peuvent affecter l'utilisation du site web : difficulté à comprendre comment effectuer une tâche, à se rappeler comment effectuer une tâche déjà accomplie ou à une frustration accrue en cas de confusion dans les flux de travail ou d'incohérences dans la présentation / navigation / autre page.

    +

    Le plus souvent, ces incapacités peuvent affecter l'utilisation du site web : difficulté à comprendre comment effectuer une tâche, à se rappeler comment effectuer une tâche déjà accomplie ou à une frustration accrue en cas de confusion dans les flux de travail ou d'incohérences dans la présentation / navigation / autre page.

    -

    Contrairement à d’autres problèmes d’accessibilité web, il est impossible de prescrire des solutions rapides à de nombreux problèmes d’accessibilité web résultant de déficiences cognitives ; la meilleure chance que vous ayez est de concevoir vos sites web de manière à être aussi logiques, cohérents et utilisables que possible. Par exemple, assurez-vous que :

    +

    Contrairement à d’autres problèmes d’accessibilité web, il est impossible de prescrire des solutions rapides à de nombreux problèmes d’accessibilité web résultant de déficiences cognitives ; la meilleure chance que vous ayez est de concevoir vos sites web de manière à être aussi logiques, cohérents et utilisables que possible. Par exemple, assurez-vous que :

    -

    Ce ne sont pas des "techniques d'accessibilité" en tant que telles, ce sont de bonnes pratiques de conception. Elles profiteront à tous ceux qui utilisent vos sites et devraient faire partie intégrante de votre travail.

    +

    Ce ne sont pas des "techniques d'accessibilité" en tant que telles, ce sont de bonnes pratiques de conception. Elles profiteront à tous ceux qui utilisent vos sites et devraient faire partie intégrante de votre travail.

    -

    En termes de statistiques, encore une fois, les chiffres sont importants. Le  rapport 2014 sur le statut d'invalidité (PDF, 511KB) de l'Université de Cornell indique qu'en 2014, 4,5% des Américains âgés de 21 à 64 ans présentaient une forme de déficience cognitive .

    +

    En termes de statistiques, encore une fois, les chiffres sont importants. Le  rapport 2014 sur le statut d'invalidité (PDF, 511KB) de l'Université de Cornell indique qu'en 2014, 4,5% des Américains âgés de 21 à 64 ans présentaient une forme de déficience cognitive .

    -

    Note :  La page cognitives de apprendreaeduquer fournit une extension utile de ces idées et mérite certainement d'être lue. 

    +

    Note : La page cognitives de apprendreaeduquer fournit une extension utile de ces idées et mérite certainement d'être lue. 

    -

    Implémentation de l'accessibilité dans votre projet

    +

    Implémentation de l'accessibilité dans votre projet

    -

    Un mythe commun en matière d'accessibilité est que l'accessibilité est un "supplément" coûteux à mettre en œuvre sur un projet. Ce mythe peut en réalité être vrai si :

    +

    Un mythe commun en matière d'accessibilité est que l'accessibilité est un "supplément" coûteux à mettre en œuvre sur un projet. Ce mythe peut en réalité être vrai si :

    -

    Cependant, si vous envisagez l'accessibilité dès le début d'un projet, le coût de la plupart des contenus accessibles devrait être assez minime.

    +

    Cependant, si vous envisagez l'accessibilité dès le début d'un projet, le coût de la plupart des contenus accessibles devrait être assez minime.

    -

    Lors de la planification de votre projet, tenez compte des tests d'accessibilité dans votre programme de tests, comme pour tout autre segment d'audience cible important (par exemple, les navigateurs de bureau ou mobiles cibles). Testez tôt et souvent, en exécutant idéalement des tests automatisés pour détecter les fonctionnalités manquantes détectables par programme (telles que les images manquantes  alternative text  ou le texte du lien incorrect — voir Element relationships and context), et en effectuant des tests avec des groupes d'utilisateurs désactivés pour voir comment. des fonctionnalités de site plus complexes fonctionnent pour eux, par exemple:

    +

    Lors de la planification de votre projet, tenez compte des tests d'accessibilité dans votre programme de tests, comme pour tout autre segment d'audience cible important (par exemple, les navigateurs de bureau ou mobiles cibles). Testez tôt et souvent, en exécutant idéalement des tests automatisés pour détecter les fonctionnalités manquantes détectables par programme (telles que les images manquantes  alternative text  ou le texte du lien incorrect — voir Element relationships and context), et en effectuant des tests avec des groupes d'utilisateurs désactivés pour voir comment. des fonctionnalités de site plus complexes fonctionnent pour eux, par exemple:

    -

    Vous pouvez et devez garder une note sur les problèmes potentiels de votre contenu qui devront être redessinés pour le rendre accessible, assurez-vous qu'il a été testé minutieusement et réfléchissez aux solutions / alternatives. Le contenu textuel (comme vous le verrez dans le prochain article) est simple, mais qu'en est-il de votre contenu multimédia et de vos graphismes 3D fantastiques ? Vous devriez examiner le budget de votre projet et réfléchir de manière réaliste aux solutions disponibles pour rendre ce contenu accessible ? Vous pourriez avoir à payer pour que tout votre contenu multimédia soit transcrit, ce qui peut être coûteux, mais réalisable.

    +

    Vous pouvez et devez garder une note sur les problèmes potentiels de votre contenu qui devront être redessinés pour le rendre accessible, assurez-vous qu'il a été testé minutieusement et réfléchissez aux solutions / alternatives. Le contenu textuel (comme vous le verrez dans le prochain article) est simple, mais qu'en est-il de votre contenu multimédia et de vos graphismes 3D fantastiques ? Vous devriez examiner le budget de votre projet et réfléchir de manière réaliste aux solutions disponibles pour rendre ce contenu accessible ? Vous pourriez avoir à payer pour que tout votre contenu multimédia soit transcrit, ce qui peut être coûteux, mais réalisable.

    -

    Aussi, soyez réaliste. "100% d'accessibilité" est un idéal impossible à obtenir — vous rencontrerez toujours un type de problème qui oblige un utilisateur à trouver certains contenus difficiles à utiliser — mais vous devez en faire autant que vous le pouvez. Si vous envisagez d'inclure un graphique à secteurs 3D ultra-graphique créé à l'aide de WebGL, vous pouvez inclure un tableau de données en tant que représentation alternative accessible des données. Vous pouvez également simplement inclure la table et supprimer le graphique à secteurs 3D : la table est accessible à tous, plus rapide à coder, moins gourmande en temps processeur et plus facile à gérer. 

    +

    Aussi, soyez réaliste. "100% d'accessibilité" est un idéal impossible à obtenir — vous rencontrerez toujours un type de problème qui oblige un utilisateur à trouver certains contenus difficiles à utiliser — mais vous devez en faire autant que vous le pouvez. Si vous envisagez d'inclure un graphique à secteurs 3D ultra-graphique créé à l'aide de WebGL, vous pouvez inclure un tableau de données en tant que représentation alternative accessible des données. Vous pouvez également simplement inclure la table et supprimer le graphique à secteurs 3D : la table est accessible à tous, plus rapide à coder, moins gourmande en temps processeur et plus facile à gérer. 

    -

    D'autre part, si vous travaillez sur un site web de galerie présentant des œuvres d'art 3D intéressantes, il serait déraisonnable de s'attendre à ce que chaque œuvre d'art soit parfaitement accessible aux personnes malvoyantes, étant donné qu'il s'agit d'un support entièrement visuel.

    +

    D'autre part, si vous travaillez sur un site web de galerie présentant des œuvres d'art 3D intéressantes, il serait déraisonnable de s'attendre à ce que chaque œuvre d'art soit parfaitement accessible aux personnes malvoyantes, étant donné qu'il s'agit d'un support entièrement visuel.

    -

    Pour montrer que vous vous souciez de l'accessibilité et que vous en avez pensé, publiez sur votre site une déclaration d'accessibilité détaillant votre politique en matière d'accessibilité et les mesures que vous avez prises pour rendre le site accessible. Si quelqu'un se plaint de ce que votre site a un problème d'accessibilité, commencez un dialogue avec elle, faites preuve d'empathie et prenez les mesures qui s'imposent pour tenter de résoudre le problème.

    +

    Pour montrer que vous vous souciez de l'accessibilité et que vous en avez pensé, publiez sur votre site une déclaration d'accessibilité détaillant votre politique en matière d'accessibilité et les mesures que vous avez prises pour rendre le site accessible. Si quelqu'un se plaint de ce que votre site a un problème d'accessibilité, commencez un dialogue avec elle, faites preuve d'empathie et prenez les mesures qui s'imposent pour tenter de résoudre le problème.

    -

    Note :  Notre article  Gérer les problèmes courants d'accessibilité couvre les spécificités d'accessibilité qui doivent être testées plus en détail.

    +

    Note : Notre article  Gérer les problèmes courants d'accessibilité couvre les spécificités d'accessibilité qui doivent être testées plus en détail.

    -

    Résumer :

    +

    Résumer :

    -

    Directives d'accessibilité et loi

    +

    Directives d'accessibilité et loi

    -

    Il existe de nombreuses listes de contrôle et ensembles de directives disponibles sur lesquels baser les tests d'accessibilité, ce qui peut sembler fastidieux à première vue. Notre conseil est de vous familiariser avec les domaines fondamentaux dans lesquels vous devez prendre soin, ainsi que de comprendre les structures de haut niveau des directives qui vous sont le plus utiles.

    +

    Il existe de nombreuses listes de contrôle et ensembles de directives disponibles sur lesquels baser les tests d'accessibilité, ce qui peut sembler fastidieux à première vue. Notre conseil est de vous familiariser avec les domaines fondamentaux dans lesquels vous devez prendre soin, ainsi que de comprendre les structures de haut niveau des directives qui vous sont le plus utiles.

    -

    Ainsi, alors que le WCAG est un ensemble de directives, votre pays aura probablement des lois régissant l’accessibilité du Web, ou du moins l’accessibilité des services accessibles au public (sites web, télévision, espaces physiques, etc.). C’est une bonne idée. pour savoir quelles sont vos lois. Si vous ne faites aucun effort pour vérifier que votre contenu est accessible, vous pourriez éventuellement avoir des ennuis avec la loi si les personnes handicapées s'en plaignent.

    +

    Ainsi, alors que le WCAG est un ensemble de directives, votre pays aura probablement des lois régissant l’accessibilité du Web, ou du moins l’accessibilité des services accessibles au public (sites web, télévision, espaces physiques, etc.). C’est une bonne idée. pour savoir quelles sont vos lois. Si vous ne faites aucun effort pour vérifier que votre contenu est accessible, vous pourriez éventuellement avoir des ennuis avec la loi si les personnes handicapées s'en plaignent.

    -

    Cela semble sérieux, mais vous devez vraiment considérer l'accessibilité comme une priorité principale de vos pratiques de développement web, comme indiqué ci-dessus. En cas de doute, demandez conseil à un avocat qualifié. Nous n'allons pas donner plus de conseils que cela, car nous ne sommes pas des avocats.

    +

    Cela semble sérieux, mais vous devez vraiment considérer l'accessibilité comme une priorité principale de vos pratiques de développement web, comme indiqué ci-dessus. En cas de doute, demandez conseil à un avocat qualifié. Nous n'allons pas donner plus de conseils que cela, car nous ne sommes pas des avocats.

    -

    API d'accessibilité

    +

    API d'accessibilité

    -

    Les navigateurs web utilisent des API d’accessibilité spéciales (fournies par le système d’exploitation sous-jacent) qui présentent des informations utiles pour les technologies d’aide (TA) — les TA ont généralement tendance à utiliser des informations sémantiques. Ces informations ne comprennent donc pas les informations de style, ou JavaScript. Ces informations sont structurées dans une arborescence d'informations appelée arborescence d'accessibilité.

    +

    Les navigateurs web utilisent des API d’accessibilité spéciales (fournies par le système d’exploitation sous-jacent) qui présentent des informations utiles pour les technologies d’aide (TA) — les TA ont généralement tendance à utiliser des informations sémantiques. Ces informations ne comprennent donc pas les informations de style, ou JavaScript. Ces informations sont structurées dans une arborescence d'informations appelée arborescence d'accessibilité.

    -

    Différents systèmes d'exploitation ont différentes API d'accessibilité disponibles :

    +

    Différents systèmes d'exploitation ont différentes API d'accessibilité disponibles :

    -

    Lorsque les informations sémantiques natives fournies par les éléments HTML dans vos applications Web tombent, vous pouvez les compléter avec des fonctionnalités de la  WAI-ARIA specification,  qui ajoutent des informations sémantiques à l’arbre d’accessibilité pour améliorer l’accessibilité. Vous pouvez en apprendre beaucoup plus sur WAI-ARIA dans notre article sur les bases de WAI-ARIA basics.

    +

    Lorsque les informations sémantiques natives fournies par les éléments HTML dans vos applications Web tombent, vous pouvez les compléter avec des fonctionnalités de la  WAI-ARIA specification,  qui ajoutent des informations sémantiques à l’arbre d’accessibilité pour améliorer l’accessibilité. Vous pouvez en apprendre beaucoup plus sur WAI-ARIA dans notre article sur les bases de WAI-ARIA basics.

    -
    -

    Résumé

    -
    +

    Résumé

    -

    Cet article aurait dû vous donner une vue d'ensemble utile de haut niveau de l'accessibilité, vous expliquer pourquoi c'est important et voir comment vous pouvez l'intégrer à votre flux de travail. Vous devriez maintenant aussi avoir soif d'apprendre les détails de la mise en œuvre susceptibles de rendre des sites accessibles. Nous commencerons dans cette question dans la section suivante, en nous demandant pourquoi le HTML constitue une bonne base d'accessibilité.

    +

    Cet article aurait dû vous donner une vue d'ensemble utile de haut niveau de l'accessibilité, vous expliquer pourquoi c'est important et voir comment vous pouvez l'intégrer à votre flux de travail. Vous devriez maintenant aussi avoir soif d'apprendre les détails de la mise en œuvre susceptibles de rendre des sites accessibles. Nous commencerons dans cette question dans la section suivante, en nous demandant pourquoi le HTML constitue une bonne base d'accessibilité.

    {{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

    diff --git a/files/fr/learn/common_questions/available_text_editors/index.html b/files/fr/learn/common_questions/available_text_editors/index.html index 156fde4e17..42107015ba 100644 --- a/files/fr/learn/common_questions/available_text_editors/index.html +++ b/files/fr/learn/common_questions/available_text_editors/index.html @@ -11,11 +11,9 @@ translation_of: Learn/Common_questions/Available_text_editors original_slug: Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte ---
    {{IncludeSubnav("/fr/Apprendre")}}
    -

    Dans cet article, nous présentons les éléments principaux à connaître pour installer un éditeur de texte utilisé pour du développement web.

    -
    -
    Prérequis:
    +
    diff --git a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html index 3e49f7571d..179fa1519a 100644 --- a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html +++ b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html @@ -12,11 +12,9 @@ tags: translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web --- -

    Dans cet article, nous présenterons les différentes étapes permettant de diagnostiquer les problèmes d'un site web ainsi que les mesures à prendre pour corriger certains de ces problèmes.

    -
    -
    Prérequis :
    +
    @@ -29,7 +27,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web
    Prérequis :
    -

    Vous avez donc publié votre site web en ligne. Bien. Mais êtes-vous sûr-e que celui-ci fonctionne correctement ?

    +

    Vous avez donc publié votre site web en ligne. Bien. Mais êtes-vous sûr-e que celui-ci fonctionne correctement ?

    Un serveur web distant se comportera différemment d'un serveur local. Mieux vaut donc tester le bon fonctionnement d'un site web une fois qu'il est en ligne. Des problèmes « étonnants » peuvent survenir : les images peuvent ne pas apparaître, des pages ne se chargeront pas ou se chargeront lentement, etc. La plupart du temps, ce n'est pas un problème critique : il s'agit de corriger une erreur ou de paramétrer correctement la configuration du serveur hébergé.

    @@ -49,11 +47,11 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web

    Allons sur notre site web : http://demozilla.hebergeurexemple.net/. L'image n'apparaît pas alors qu'il y aurait du y en avoir une !

    -

    Oops, the ‘unicorn’ image is missing

    +

    Oops, the ‘unicorn’ image is missing

    Ouvrons les outils de développement et plus particulièrement ceux qui portent sur le réseau (Outils ➤ Développement Web ➤ Réseau) puis rechargeons la page :

    -

    The image has a 404 error

    +

    The image has a 404 error

    Le problème c'est ce 404 qu'on voit en bas. 404 signifie que la ressource n'a pas été trouvée et c'est pour ça que nous ne voyons pas l'image.

    @@ -62,7 +60,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web

    Le serveur répond avec une message de statut à chaque fois qu'il reçoit une requête. Voici les statuts les plus communs ainsi que leur code :

    -
    200 : OK
    +
     200 : OK
    La ressource demandée a bien été transmise.
    301 : Déplacée de façon permanente (Moved permanently)
    La ressource a été déplacée à un nouvel emplacement. Vous ne verrez cette erreur que rarement mais elle est utile à connaître car les moteurs de recherchee utilise cette information pour mettre à jour leurs index.
    @@ -87,15 +85,15 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web

    Où est donc le problème ?

    -

    Le list of images in our project

    +

    Le list of images in our project

    À premièrve vue, l'image semble être au bon endroit mais l'outil d'analyse réseau affiche un code 404 renvoyé par le serveur. Le problème ici est une coquille dans le code de la page HTML licornes.png plutôt que licorne.png. En corrigeant cette erreur avec l'attribut src

    -

    Deleting the ‘s’

    +

    Deleting the ‘s’

    -

    Puis en sauvegardant et en envoyant le fichier vers le serveur, on peut ensuite recharger la page dans le navigateur :

    +

    Puis en sauvegardant et en envoyant le fichier vers le serveur, on peut ensuite recharger la page dans le navigateur :

    -

    The image loads corectly in the browser

    +

    The image loads corectly in the browser

    Et voilà, revenons sur les status {{Glossary("HTTP")}} :

    @@ -114,7 +112,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web

    Dans la capture suivante, nous avons voulu accéder à http://demozilla.hebergeurexemple.net/ mais nous avons oublié un « m » :

    -

    Address unreachable

    +

    Address unreachable

    L'adresse est introuvable… en effet.

    @@ -128,7 +126,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web

    Pour voir ces erreurs, ouvrez la console (Outils ➤ Développement web ➤ Console web) and puis rechargez la page:

    -

    A Javascript error is shown in the Console

    +

    A Javascript error is shown in the Console

    Ici, nous voyons comment détecter une erreur, la console affiche sur quoi porte l'erreur et éventuellement comment la résoudre (nous verrons JavaScript dans une autre série d'articles).

    @@ -140,7 +138,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web

    Est-ce que la page charge suffisamment vite ? Pour le savoir, vous pouvez utiliser des outils comme webpagetest.org ou des modules complémentaires comme YSlow qui peuvent fournir des indications intéressantes :

    -

    Yslow diagnostics

    +

    Yslow diagnostics

    Les notes vont de A à F. La page actuelle est pluôt légère et respecte donc la plupart des critères. On voit ici qu'il aurait été préférable d'utiliser un {{Glossary("CDN")}}. Dans notre cas, cette remarque n'est pas très critique car notre site web n'est pas un site à forte audience qui sert des milliers d'images.

    diff --git a/files/fr/learn/common_questions/common_web_layouts/index.html b/files/fr/learn/common_questions/common_web_layouts/index.html index 2b54571c67..5fba68714b 100644 --- a/files/fr/learn/common_questions/common_web_layouts/index.html +++ b/files/fr/learn/common_questions/common_web_layouts/index.html @@ -11,11 +11,10 @@ translation_of: Learn/Common_questions/Common_web_layouts original_slug: Apprendre/Concevoir_page_web ---
    {{IncludeSubnav("/fr/Apprendre")}}
    -
    +

    Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir en tête les modèles de mise en page les plus fréquemment utilisés.

    -
    - +
    @@ -53,19 +52,19 @@ original_slug: Apprendre/Concevoir_page_web

    Dispostion à une colonne : particulièrement utile pour l'affichage sur téléphone mobile, car cette disposition évite d'encombrer les petits écrans.

    -

    Example of a 1 column layout: Main on top and asides stacked beneath it.

    +

    Example of a 1 column layout: Main on top and asides stacked beneath it.

    Disposition à deux colonnes : souvent utilisée pour l'affichage sur tablettes, car elles disposent d'un écran de taille moyenne.

    -

     Example of a basic 2 column layout: One aside on the left column, and main on the right column. Example of a basic 2 column layout: One aside on the right column, and main on the left column.

    +

     Example of a basic 2 column layout: One aside on the left column, and main on the right column. Example of a basic 2 column layout: One aside on the right column, and main on the left column.

    Disposition à trois colonnes : adaptée uniquement pour les ordinateurs de bureau ayant un grand écran (et encore, cela est relatif, car plusieurs utilisateurs d'ordinateurs de bureau préférent visionner les sites dans des fenêtres de taille réduite plutôt qu'en mode plein écran).

    -

    Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column. Another example of a 3 column layout: Aside side by side on the left, Main on the right column. Another example of a 3 column layout: Aside side by side on the right, Main on the left column.

    +

    Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column. Another example of a 3 column layout: Aside side by side on the left, Main on the right column. Another example of a 3 column layout: Aside side by side on the right, Main on the left column.

    Il est aussi possible de mélanger tous ces modèles classiques :

    -

    Example of mixed layout: Main on top and asides beneath it side by side. Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main. Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row.…

    +

    Example of mixed layout: Main on top and asides beneath it side by side. Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main. Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row.…

    Sachez que ce ne sont que des exemples et que vous êtes libre de disposer les sections à votre façon. Vous remarquerez toutefois que l'en-tête demeure toujours en haut et le bas de page, en bas, peu importe les autres déplacements du contenu. Aussi, comme la section la plus importante est celle du contenu principal, assurez-vous d'y laisser le plus de place possible.

    @@ -83,7 +82,7 @@ original_slug: Apprendre/Concevoir_page_web

    Invision : un exemple de disposition classique à une colonne où toute l'information est présentée de façon linéaire sur une page.

    -

    Example of a 1 column layout in the wild        1 column layout with header, main content, a stack of aside contents and a footer

    +

    Example of a 1 column layout in the wild        1 column layout with header, main content, a stack of aside contents and a footer

    Un style simple et direct.  N'oubliez pas, toutefois, que certains utilisateurs navigeront à partir d'un ordinateur de bureau et qu'il faut donc s'assurer que le contenu soit accessible sur cette plateforme également.

    @@ -91,7 +90,7 @@ original_slug: Apprendre/Concevoir_page_web

    Abduzeedo, un blog à disposition simple. En règle générale, les blogs comprennent deux colonnes : une large pour le contenu principal et une plus étroite pour les à-côtés (comme des widgets, les menus de navigation et les publicités).

    -

    Example of a 2 column layout for a blog        A 2 column layout with the main content on the left column

    +

    Example of a 2 column layout for a blog        A 2 column layout with the main content on the left column

    Dans cet exemple, regardez bien l'image (B1) située directement sous l'en-tête. L'image est en rapport avec le contenu principal, mais n'est pas essentielle à sa compréhension. Nous pourrions donc considérer que l'image fait partie du contenu principal ou bien qu'il s'agit d'un à-côté (contenu secondaire).  La distinction importe peu. Ce qui est vraiment important, c'est qu'un élément placé directement sous l'en-tête devrait soit faire partie du contenu principal, soit y être directement relié.

    @@ -99,7 +98,7 @@ original_slug: Apprendre/Concevoir_page_web

    MICA. Cet exemple est un peu plus embêtant. On dirait une disposition à trois colonnes…

    -

    Example of a false 3 columns layout        It looks like a 3 columns layout but actually, the aside content is floating around.

    +

    Example of a false 3 columns layout        It looks like a 3 columns layout but actually, the aside content is floating around.

    …mais non ! B1 et B2 flottent autour du contenu principal. Rappelez-vousce mot-clé : "flotte" (float en anglais) - nous y reviendrons lorsque vous commencerez à apprendre le {{Glossary("CSS")}}.

    @@ -111,7 +110,7 @@ original_slug: Apprendre/Concevoir_page_web

    L'Opéra de Paris.

    -

    An example of a tricky layout.        This is a 2 column layout but the header is overlaping the main content.

    +

    An example of a tricky layout.        This is a 2 column layout but the header is overlaping the main content.

    Il s'agit à la base d'une disposition à deux colonnes, mais vous noterez quelques ajustements ici et là qui viennent rompre la linéarité de la disposition. On remarque surtout que l'en-tête est superposée à l'image du contenu principal. En raison de la courbe du menu de navigation qui rappelle celle au bas de l'image principale, l'en-tête et l'image semblent former un seul élément uni alors qu'il s'agit en fait d'éléments techniquement distincts.  L'exemple de l'Opéra de Paris semble plus complexe à réaliser que celui de MICA, mais est en réalité plus facile à mettre en place (la facilité étant bien entendu, un concept plutôt relatif).

    diff --git a/files/fr/learn/common_questions/design_for_all_types_of_users/index.html b/files/fr/learn/common_questions/design_for_all_types_of_users/index.html index 47881342ef..cecce85e86 100644 --- a/files/fr/learn/common_questions/design_for_all_types_of_users/index.html +++ b/files/fr/learn/common_questions/design_for_all_types_of_users/index.html @@ -11,11 +11,10 @@ translation_of: Learn/Common_questions/Design_for_all_types_of_users original_slug: Apprendre/Concevoir_site_tous_types_utilisateurs ---
    {{IncludeSubnav("/fr/Apprendre")}}
    -
    +

    Cet article aborde les concepts de bases pour vous aider à construire des sites web accessibles à tous.

    -
    -
    Prérequis :
    +
    @@ -32,7 +31,7 @@ original_slug: Apprendre/Concevoir_site_tous_types_utilisateurs

    Pédagogie active

    -

    Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

    +

    Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

    Aller plus loin

    @@ -45,12 +44,12 @@ original_slug: Apprendre/Concevoir_site_tous_types_utilisateurs

    Pour contrôler le contraste, vous pouvez télécharger et installer l'analyseur de contraste du Groupe Paciello.

    -

    Note : Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM : Color Contrast Checker. Il est préférable d'utiliser un vérificateur qui fonctionne en local sur votre ordinateur car généralement, ceux-ci ont également une pipette qui permet de prélever la valeur d'une couleur sur tout l'écran.

    +

    Note : Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM : Color Contrast Checker. Il est préférable d'utiliser un vérificateur qui fonctionne en local sur votre ordinateur car généralement, ceux-ci ont également une pipette qui permet de prélever la valeur d'une couleur sur tout l'écran.

    Par exemple, testons les couleurs de cette page et voyons ce que cela donne avec l'outil d'analyse de contraste :

    -

    Colour contrast on this page: excellent!

    +

    Colour contrast on this page: excellent!

    Le ratio de contraste pour la luminosité entre le texte est l'arrière plan est de 8.30:1, ce qui est mieux que le minimum recommandé par le standard (4.5:1). Avec cette valeur, de nombreuses personnes devraient être en mesure de lire le texte..

    @@ -147,7 +146,7 @@ span.subheading { font-size:1rem; }

    C'est plus facile de cette façon, n'est-ce pas ? Cela fonctionne, à partir d'Internet Explorer 9 et dans n'importe quel autre navigateur récent, n'hésitez pas à l'utiliser.

    -

    Note : Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police.

    +

    Note : Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police.

    Pourquoi aurais-je besoin d'utiliser des unités proportionnelles ?

    @@ -162,7 +161,7 @@ span.subheading { font-size:1rem; }
    -

    Note : Votre utilisation de ces unités pourra varier. S'il est nécessaire pour vous de gérer les anciens navigateurs, vous aurez besoin d'utiliser des ems, quitte à faire un peu de mathématique en chemin.

    +

    Note : Votre utilisation de ces unités pourra varier. S'il est nécessaire pour vous de gérer les anciens navigateurs, vous aurez besoin d'utiliser des ems, quitte à faire un peu de mathématique en chemin.

    Largeur de ligne

    @@ -220,7 +219,7 @@ span.subheading { font-size:1rem; }

    Si l'image peut être décrite succintement, vous pouvez fournir un attribut alt qui sera suffisant. En revanche, si l'image ne peut pas être décrite rapidement, il est préférable de fournir un contenu équivalent sous un autre format sur la page (par exemple, si l'image est un graphique en camembert, on pourra fournir le tableau des données numériques) ou sinon, on pourra recourir à un attribut longdesc. La valeur de cet attribut est un URL qui pointe vers une ressource dont le seul but est de décrire en détails le contenu de l'image.

    -

    Note : L'utilisation voire l'existence de longdesc ont toujours été débatues. Veuillez vous référer à la page du W3C' Image Description Extension (longdesc) pour une explication complète et des exemples détaillés.

    +

    Note : L'utilisation voire l'existence de longdesc ont toujours été débatues. Veuillez vous référer à la page du W3C' Image Description Extension (longdesc) pour une explication complète et des exemples détaillés.

    Audio/Vidéo

    @@ -245,4 +244,4 @@ span.subheading { font-size:1rem; }

    Prochaines étapes

    -

    Cet article ne décrit que les bases d'un design accessible et universel. Si vous souhaitez aller plus loin dan ce domaine, vous pouvez poursuivre avec les bases de l'ergonomie ou UX (User Experience en anglais).

    +

    Cet article ne décrit que les bases d'un design accessible et universel. Si vous souhaitez aller plus loin dan ce domaine, vous pouvez poursuivre avec les bases de l'ergonomie ou UX (User Experience en anglais).

    diff --git a/files/fr/learn/common_questions/how_does_the_internet_work/index.html b/files/fr/learn/common_questions/how_does_the_internet_work/index.html index fb05ae9679..8a6850c59d 100644 --- a/files/fr/learn/common_questions/how_does_the_internet_work/index.html +++ b/files/fr/learn/common_questions/how_does_the_internet_work/index.html @@ -8,11 +8,9 @@ tags: translation_of: Learn/Common_questions/How_does_the_Internet_work original_slug: Apprendre/Fonctionnement_Internet --- -

    Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne.

    -
    -
    Prérequis :
    +
    @@ -44,38 +42,38 @@ original_slug: Apprendre/Fonctionnement_Internet

    Pour que deux ordinateurs puissent communiquer entre eux, ils doivent être liés soit par un lien physique (généralement par un câble Ethernet), soit sans fil (par exemple, via WiFi ou Bluetooth). Tous ces types de connexions sont possibles sur les ordinateurs modernes.

    -

    Note : À partir de maintenant, nous ne parlerons que de connexions physiques, mais sachez que les explications ci-dessous sont tout aussi valides pour les réseaux sans fil.

    +

    Note : À partir de maintenant, nous ne parlerons que de connexions physiques, mais sachez que les explications ci-dessous sont tout aussi valides pour les réseaux sans fil.

    -

    Two computers linked together

    +

    Two computers linked together

    Un réseau comme celui illustré ci-haut n'est pas limité à deux ordinateurs. Vous pouvez y connecter autant d'ordinateurs que vous le souhaitez, mais le tout se complique très rapidement. Ainsi, si vous voulez relier, disons, dix ordinateurs entre eux, vous aurez besoin de 45 câbles et de neuf prises sur chaque ordinateur!

    -

    Ten computers all together

    +

    Ten computers all together

    Afin de résoudre ce problème, chaque ordinateur du réseau est relié à un petit ordinateur bien spécial que l'on appelle routeur. Ce routeur n'a qu'une seule fonction : tout comme un signaleur de gare de train, il s'assure que les messages transmis par un ordinateur donné se rendent au bon ordinateur destinataire. Ainsi, pour envoyer un message à l'ordinateur B, l'ordinateur A transmet d'abord le message au routeur, qui s'assure alors de transférer le message à l'ordinateur B et non à l'ordinateur C.

    Vous voyez donc que lorsque nous ajoutons un routeur dans notre structure, notre réseau de dix ordinateurs ne requiert alors que de dix câbles, d'une prise par ordinateur et d'un routeur de 10 ports.

    -

    Ten computers with a router

    +

    Ten computers with a router

    Un réseau de réseaux

    Jusqu'ici tout est beau, mais comment fait-on pour relier des centaines, des milliers ou même des millards d'ordinateurs entre eux ? Bien évidemment, un seul routeur ne pourrait suffire pour tant de connexions. Cependant, si vous avez lu attentivement, vous aurez constaté qu'un routeur n'est en réalité qu'un ordinateur. Serait-ce alors possible de lier deux routeurs ? Oui, absolument, et en voici le résultat!

    -

    Two routers linked together

    +

    Two routers linked together

    En liant les ordinateurs à des routeurs, puis les routeurs entre eux, nous avons la capacité d'étendre le réseau indéfiniment.

    -

    Routers linked to routers

    +

    Routers linked to routers

    Un tel réseau s'apparente de près à ce que nous appelons l'Internet, mais il y a un élément manquant. Ce réseau a été conçu pour répondre à nos besoins personnels, mais d'autres réseaux existent également. Vos amis, vos voisins et plein d'autres gens peuvent avoir leurs propres réseaux d'ordinateurs. Cependant, il vous est plutôt impossible de brancher des câbles entre votre maison et le reste de la planète, alors que faire ? Eh bien, il se trouve que votre maison est déjà câblée et liée aux réseaux électrique et téléphonique. L'infrastructure téléphonique, qui lie déjà votre maison au reste de la planète, répond parfaitement à nos besoins. Afin de lier notre réseau à l'infrastructure téléphonique, nous devons utiliser un appareil spécialisé appelé modem. Ce modem convertit l'information de notre réseau en information décodable par l'infrastructure téléphonique et vice-versa.

    -

    A router linked to a modem

    +

    A router linked to a modem

    Notre réseau est donc lié à l'infrastructure téléphonique. La prochaine étape consiste alors à transmettre avec succès nos messages au réseau cible. À cette fin, nous allons lier notre réseau à un Fournisseur d'accès à Internet (FAI). Un FAI est une entreprise qui gère des routeurs qui sont liés entre eux et qui ont des droits d'accès aux routeurs d'autres FAI. Le message transmis par notre réseau est ainsi transporté à travers le réseau de FAI afin d'atteindre le réseau cible. Voilà en quoi consiste l'Internet : il s'agit de toute cette infrastructure de réseaux (dans les schémas suivants, ISP signifie FAI, c'est le terme anglais pour fournisseur d'accès).

    -

    Full Internet stack

    +

    Full Internet stack

    Localiser un ordinateur

    @@ -83,7 +81,7 @@ original_slug: Apprendre/Fonctionnement_Internet

    C'est une méthode très efficace pour les ordinateurs, mais les humains ont un peu plus de difficulté à retenir de telles adresses numériques. Afin de se faciliter la tâche, un libellé alphabétique, appelé nom de domaine, est souvent associé aux adresses IP. Par example, google.com est le nom de domaine associé à l'adresse IP 173.194.121.32. L'utilisation d'un nom de domaine est ainsi le moyen le plus facile d'atteindre un ordinateur via l'Internet.

    -

    Show how a domain name can alias an IP address

    +

    Show how a domain name can alias an IP address

    L'Internet et le web

    diff --git a/files/fr/learn/common_questions/how_much_does_it_cost/index.html b/files/fr/learn/common_questions/how_much_does_it_cost/index.html index 713508e03a..23d1f14f68 100644 --- a/files/fr/learn/common_questions/how_much_does_it_cost/index.html +++ b/files/fr/learn/common_questions/how_much_does_it_cost/index.html @@ -8,11 +8,9 @@ tags: translation_of: Learn/Common_questions/How_much_does_it_cost original_slug: Apprendre/Publier_sur_le_Web_combien_ça_coûte --- -

    Se lancer sur le Web n'est pas aussi bon marché qu'il y paraît à première vue. Dans cet article, nous verrons les différentes dépenses et leur raison d'être.

    -
    -
    Prérequis :
    +
    @@ -154,7 +152,7 @@ original_slug: Apprendre/Publier_sur_le_Web_combien_ça_coûte

    Prochaines étapes

    -

    Maintenant que la question du coût est résolue, il est temps de commencer à concevoir ce site web et de préparer un environnement de travail.

    +

    Maintenant que la question du coût est résolue, il est temps de commencer à concevoir ce site web et de préparer un environnement de travail.

    Prérequis :
    +
    @@ -74,7 +74,7 @@ original_slug: Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche
    -

    Note : Les navigateurs peuvent afficher d'autres types de documents tels que des fichiers PDF ou des images, mais le terme page web désigne spécifiquement des documents HTML. Si nous parlons d'un autre type de contenu, nous utiliserons le terme document.

    +

    Note : Les navigateurs peuvent afficher d'autres types de documents tels que des fichiers PDF ou des images, mais le terme page web désigne spécifiquement des documents HTML. Si nous parlons d'un autre type de contenu, nous utiliserons le terme document.

    Toutes les pages web sont associées à une adresse unique. Pour atteindre une page, il suffit d'entrer son adresse dans la barre d'adresse du navigateur :

    diff --git a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html index ef5a5b62fd..c38eff9431 100644 --- a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html +++ b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html @@ -16,15 +16,13 @@ tags: translation_of: Learn/Common_questions/set_up_a_local_testing_server original_slug: Apprendre/Common_questions/configurer_un_serveur_de_test_local --- -

    Cet article explique comment configurer un serveur de test local simple sur votre machine, et les bases pour l'utiliser.

    -
    -
    Prérequis :
    +
    - + @@ -44,7 +42,7 @@ original_slug: Apprendre/Common_questions/configurer_un_serveur_de_test_local

    Certains exemples ne fonctionneront pas si vous les ouvrez en tant que fichiers locaux. Il y a plusieurs raisons possibles, dont les plus courantes sont :

    @@ -70,12 +68,12 @@ original_slug: Apprendre/Common_questions/configurer_un_serveur_de_test_local

  • Ouvrez votre invite de commandes (Windows)/terminal (OS X et GNULinux). Pour vérifier que l'installation précédente s'est déroulée correctement, entrez la commande suivante :

    - 
    python -V
    + 
    python -V

  • Elle devrait retourner un numéro de version. Si c'est le cas, en utilisant la commande cd, placer votre répertoire de travail dans le dossier contenant l'exemple.

    - 
    #inclure le nom du dossier pour y s'y rendre,
+  
    #inclure le nom du dossier pour y s'y rendre,
 #par exemple
 cd Bureau
 # utiliser deux points pour remonter dans
@@ -85,10 +83,10 @@ cd ..
    
  
  • 
   
    Entrer la commande pour démarrer le serveur dans ce dossier.
    
 
-  
    # Si la version de Python retournée est ultérieur à 3.X
+  
    # Si la version de Python retournée est ultérieur à 3.X
 python3 -m http.server
 # Si la version de Python retournée est ultérieur à 2.X
-python -m SimpleHTTPServer
    
+python -m SimpleHTTPServer
    
  
    • 
  
  • 
   
    Par défaut, il affiche la liste des fichiers  du dossier sur un serveur de développement, sur le port 8000. Vous pouvez aller à ce serveur en saisissant  l'URL localhost:8000 dans votre navigateur web. Vous verrez le listing du dossier dans lequel le serveur tourne — cliquer le fichier HTML que vous voulez exécuter.
    
@@ -96,7 +94,7 @@ python -m SimpleHTTPServer
    • -

    Note : Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple python -m http.server 7800 (Python 3.x) ou python -m SimpleHTTPServer 7800 (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse localhost:7800.

    +

    Note : Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple python -m http.server 7800 (Python 3.x) ou python -m SimpleHTTPServer 7800 (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse localhost:7800.

    Faire fonctionner localement des langages serveur

    @@ -104,7 +102,7 @@ python -m SimpleHTTPServer

    Le module SimpleHTTPServer de Python est utile, mais il ne sait pas comment exécuter du code écrit dans des langages comme PHP ou Python. Pour gérer ça, vous aurez besoin de quelque chose en plus — ce dont vous aurez besoin exactement dépend du language serveur que vous essayez d'exécuter. Voici quelques exemples :

      -
    • Pour exécuter du code Python coté-serveur, vous aurez besoin d'utiliser un framework web Python. Vous pouvez découvrir comment utiliser le framework Django en lisant Django Web Framework (Python). Flask est une alternative à Django, un peu plus légère. Pour l'exécuter, vous aurez besoin d'installer Python/PIP, puis Flask en utilisant pip3 install flask.  À ce point, vous devriez être capable d'exécuter les exemples Python Flask en utilisant par exemple python3 python-example.py, puis consulter localhost:5000 dans votre navigateur.
      • -
    • Pour exécuter du code Node.js (JavaScript) côté-serveur, vous aurez besoin d'utiliser un  noeud brut ou un framework construit par dessus ce dernier. Express est un bon choix — voir Express Web Framework (Node.js/JavaScript).
      • +
    • Pour exécuter du code Python coté-serveur, vous aurez besoin d'utiliser un framework web Python. Vous pouvez découvrir comment utiliser le framework Django en lisant Django Web Framework (Python). Flask est une alternative à Django, un peu plus légère. Pour l'exécuter, vous aurez besoin d'installer Python/PIP, puis Flask en utilisant pip3 install flask.  À ce point, vous devriez être capable d'exécuter les exemples Python Flask en utilisant par exemple python3 python-example.py, puis consulter localhost:5000 dans votre navigateur.
      • +
    • Pour exécuter du code Node.js (JavaScript) côté-serveur, vous aurez besoin d'utiliser un  noeud brut ou un framework construit par dessus ce dernier. Express est un bon choix — voir Express Web Framework (Node.js/JavaScript).
    • Pour exécuter du code PHP côté serveur, vous aurez besoin d'une configuration serveur qui peut  interpréter PHP. De bonnes options pour tester PHP localement sont MAMP (Mac and Windows) , AMPPS (Mac, Windows, Linux) and LAMP (Linux, Apache, MySQL, et PHP/Python/Perl). Ce sont des paquets complets qui créent des configurations locales vous permettant d'exécuter un serveur Apache, PHP et des bases de données MySQL.
    diff --git a/files/fr/learn/common_questions/thinking_before_coding/index.html b/files/fr/learn/common_questions/thinking_before_coding/index.html index 7ebcaffe6d..7756cfd9c5 100644 --- a/files/fr/learn/common_questions/thinking_before_coding/index.html +++ b/files/fr/learn/common_questions/thinking_before_coding/index.html @@ -10,11 +10,9 @@ original_slug: Apprendre/Commencez_votre_projet_web ---
    {{IncludeSubnav("/fr/Apprendre")}}
    -

    Cette article présente l'étape primordiale de n'importe quel projet  définir ce qu'on souhaite accomplir avec.

    -
    -
    • Prérequis :Vous devez au préalable savoir comment Internet fonctionne et ce qu'est un serveur Web.Vous devez au préalable savoir comment Internet fonctionne et ce qu'est un serveur Web.
    Objectif:
    +
    @@ -43,7 +41,7 @@ original_slug: Apprendre/Commencez_votre_projet_web

    Pédagogie active

    -

    Il n'y a pas la pédagogie active disponible pour l'instant. S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !

    +

    Il n'y a pas la pédagogie active disponible pour l'instant. S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !

    Aller plus loin

    @@ -54,7 +52,7 @@ original_slug: Apprendre/Commencez_votre_projet_web Une discussion d'une heure avec des amis est un bon début, mais ce sera insuffisant. Vous devez vous asseoir et structurer vos idées pour avoir une vision claire du chemin que vous devrez parcourir afin de concrétiser vos idées. Pour ce faire, il vous suffit d'un stylo, de quelques feuilles de papier et d'un peu de temps pour répondre au moins aux questions suivantes.

    -

    Remarque  Il existe d'innombrables moyens pour mener à bien des idées de projet. Nous ne pouvons pas tous les mentionner ici (un livre entier ne suffirait pas). Ce que nous allons présenter ici est une méthode simple pour gérer ce que les professionnels appellent l'idéation, la planification et la gestion de projet.

    +

    Note : Il existe d'innombrables moyens pour mener à bien des idées de projet. Nous ne pouvons pas tous les mentionner ici (un livre entier ne suffirait pas). Ce que nous allons présenter ici est une méthode simple pour gérer ce que les professionnels appellent l'idéation, la planification et la gestion de projet.

    Qu'est-ce que je veux accomplir exactement ?

    @@ -114,7 +112,7 @@ original_slug: Apprendre/Commencez_votre_projet_web - + - + - + - + - + - + - + - + - + - +
    Prérequis 
    Permettre aux gens d'écouter votre musiquePermettre aux gens d'écouter votre musique
    1. Enregistrer de la musique
      2. @@ -124,7 +122,7 @@ original_slug: Apprendre/Commencez_votre_projet_web
    Parler de votre musiqueParler de votre musique
    1. Écrire quelques articles pour lancer la discussion
      2. @@ -134,7 +132,7 @@ original_slug: Apprendre/Commencez_votre_projet_web
    Rencontrer d'autres musiciensRencontrer d'autres musiciens
    1. Permettre aux gens de vous contacter (e-mail ? Twitter ? Facebook ? Téléphone ? Adresse ?)
      2. @@ -143,23 +141,19 @@ original_slug: Apprendre/Commencez_votre_projet_web
    Vendre des goodiesVendre des goodies
    1. Créer les goodies
    2. Stocker les goodies
    3. Trouver un moyen de gérer l'expédition
      4. -
    4. -
      -
      Trouver un moyen de gérer le paiement
      -
      -
      5. +
    5. Trouver un moyen de gérer le paiement
    6. Faire un système sur votre site pour que les gens passe des commandes
    Enseigner la musique à travers des vidéosEnseigner la musique à travers des vidéos
    1. Enregistrer vos leçons vidéos
      2. diff --git a/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html index a385e6afb0..56f5dbdfa3 100644 --- a/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html +++ b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html @@ -8,11 +8,9 @@ tags: translation_of: Learn/Common_questions/Upload_files_to_a_web_server original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web --- -

      Cet article illustre comment publier votre site en ligne grâce à des outils {{Glossary("FTP")}}. 

      -
      - +
      @@ -25,11 +23,11 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web
      Prérequis :
      -

      Maintenant que vous avez construit une page web, vous voulez peut être la mettre en ligne grâce à un serveur web. Dans cet article, nous verrons comment faire en utilisant {{Glossary("FTP")}}.

      +

      Maintenant que vous avez construit une page web, vous voulez peut être la mettre en ligne grâce à un serveur web. Dans cet article, nous verrons comment faire en utilisant {{Glossary("FTP")}}.

      Pédagogie active

      -

      Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. Vous pouvez néanmoins contribuer.

      +

      Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. Vous pouvez néanmoins contribuer.

      Aller plus loin

      @@ -38,19 +36,19 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web

      Il existe de nombreux clients FTP. Dans cette démonstration, nous utiliserons FireFTP. Celui-ci est simple à installer avec Firefox car c'est un module complémentaire.

      -

      Il existe de nombreuses autres options, voir les outils de publications : les clients FTP pour plus d'informations.

      +

      Note : Il existe de nombreuses autres options, voir les outils de publications : les clients FTP pour plus d'informations.

      Pour ouvrir FireFTP dans un nouvel onglet de Firefox, il existe deux méthodes :

        -
      1. Menu de Firefox ➤ Developer ➤ FireFTP
        2. +
      2. Menu de Firefox ➤ Developer ➤ FireFTP
      3. Outils ➤ Développement web ➤ FireFTP

      Vous devriez voir apparaître cette fenêtre :

      -

      FireFTP : the interface, not connected to a server

      +

      FireFTP : the interface, not connected to a server

      Se connecter

      @@ -77,7 +75,7 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web

      Tout d'abord, jetons un coup d'œil à http://demozilla.hebergeurexemple.net/ — pour le moment, comme vous pouvez le voir, il n'y a pas grand chose :

      -

      Our demozilla personal website, seen in a browser: it's empty

      +

      Our demozilla personal website, seen in a browser: it's empty

      Note : Selon l'hébergeur que vous avez choisi, vous pourriez ici voir une page avec un texte ressemblant à « Ce site web est hébergé par [Nom de l'hébergeur] ».

      @@ -85,13 +83,13 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web

      Pour connecter votre client FTP au serveur distant, cliquez sur le bouton « Créer un compte » de FireFTP, puis remplissez les informations telles qu'elles vous ont été fournies par votre hébergeur :

      -

      FireFTP: creating an account

      +

      FireFTP: creating an account

      Ici et là-bas : la vue locale et la vue distante

      Vous pouvez ensuite vous connecter sur ce nouveau compte :

      -

      The FTP interface, once logged

      +

      The FTP interface, once logged

      Examinons cet écran :

      @@ -105,19 +103,19 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web

      Comme nous l'avons vu plus tôt, notre hébergeur nous a indiqué que les fichiers devaient être stockés sous Public/htdocs pour être visible sur le Web. Déplaçons-nous donc dans ce dossier grâce au volet droit :

      -

      Changing to the htdocs folder on the remote server

      +

      Changing to the htdocs folder on the remote server

      Ensuite, pour transférer des fichiers de votre ordinateur vers ce dossier du serveur, il suffit de les glisser-déposer du volet gauche vers le volet droit :

      -

      The files show in the remote view: they have been pushed to the server

      +

      The files show in the remote view: they have been pushed to the server

      Est-ce que mes fichiers sont bien en ligne ?

      Jusqu'ici tout va bien, vérifions quand même en tapant http://demozilla.hebergeurexemple.net/ dans la barre d'URL du navigateur :

      -

      Here we go: our website is live!

      +

      Here we go: our website is live!

      -

      Et voilà ! Notre site est en ligne !

      +

      Et voilà ! Notre site est en ligne !

      D'autres méthodes pour transférer des fichiers

      diff --git a/files/fr/learn/common_questions/using_github_pages/index.html b/files/fr/learn/common_questions/using_github_pages/index.html index a20bed20d4..0a49b5cb64 100644 --- a/files/fr/learn/common_questions/using_github_pages/index.html +++ b/files/fr/learn/common_questions/using_github_pages/index.html @@ -10,7 +10,7 @@ tags: translation_of: Learn/Common_questions/Using_Github_pages original_slug: Apprendre/Utiliser_les_pages_GitHub --- -

      GitHub est un site de partage de code, sur lequel on peut publier des projets dont le code est géré avec le système de gestion de version Git. Par défaut, le système est open source, ce qui signifie que tout le monde peut consulter le code, l'utiliser pour apprendre ou l'améliorer et collaborer aux projets. Vous pouvez donc participer à d'autres projets ou, à l'inverse, des personnes peuvent collaborer à vos projets ! Dans cet article, nous verrons comment publier du contenu sur le web en utilisant les « pages GitHub » (aussi appelées gh-pages) qui sont une des fonctionnalités de GitHub.

      +

      GitHub est un site de partage de code, sur lequel on peut publier des projets dont le code est géré avec le système de gestion de version Git. Par défaut, le système est open source, ce qui signifie que tout le monde peut consulter le code, l'utiliser pour apprendre ou l'améliorer et collaborer aux projets. Vous pouvez donc participer à d'autres projets ou, à l'inverse, des personnes peuvent collaborer à vos projets ! Dans cet article, nous verrons comment publier du contenu sur le web en utilisant les « pages GitHub » (aussi appelées gh-pages) qui sont une des fonctionnalités de GitHub.

      Publier du contenu

      @@ -48,13 +48,13 @@ original_slug: Apprendre/Utiliser_les_pages_GitHub

      La meilleure façon d'envoyer votre code sur GitHub est d'utiliser l'interface en ligne de commande de votre ordinateur. La ligne de commande est une fenêtre où on saisit des commandes au clavier pour créer des fichiers, lancer des programmes, plutôt que de cliquer avec la souris en utilisant une interface graphique. Une interface en ligne de commande ressemblera à quelque chose comme ceci :

      -

      Interface en ligne de commande

      +

      Interface en ligne de commande

      -

      Note : Il existe également des interfaces graphiques pour Git qui permettent de faire la même chose. N'hésitez pas à les utiliser si vous ne vous sentez pas à l'aise avec la ligne de commande.

      +

      Note : Il existe également des interfaces graphiques pour Git qui permettent de faire la même chose. N'hésitez pas à les utiliser si vous ne vous sentez pas à l'aise avec la ligne de commande.

      -

      Chaque système d'exploitation possède sa propre interface en ligne de commande  :

      +

      Chaque système d'exploitation possède sa propre interface en ligne de commande  :

      • Windows : l'invite de commande. Celle-ci peut être lancée en utilisant la touche Windows et en tapant Invite de commande avant de sélectionner l'option dans la liste qui apparaît. Windows utilise certaines conventions différentes de celles choisies par Linux et OS X, les commandes peuvent donc varier légèrement (par exemple, dans Windows, on utilisera \ pour indiquer un sous-répertoire alors que Linux et OS X utiliseront /).
        • @@ -70,9 +70,9 @@ original_slug: Apprendre/Utiliser_les_pages_GitHub
      • Ensuite, vous aurez besoin de créer un dépôt GitHub sur lequel envoyer les fichiers de votre site. Quand vous êtes connecté-e sur GitHub, cliquez sur l'icône Plus (+) en haut à droite de la page d'accueil puis sélectionner l'option New Repository (qui signifie « Créer un nouveau dépôt »).
      • Sur la page qui s'affiche, dans le champ « Repository name », entrez un nom pour votre dépôt. Vous pouvez par exemple saisir mon-premier-depot.
      • Il y a également un champ qui décrit le projet qui sera placé dans ce dépôt. Votre écran devrait ressembler à quelque chose comme :
        -
        • +
      • Ensuite, cliquez sur « Create repository » (pour créer le dépôt). Vous arrieverez alors sur la page suivante :
        -
        • +

    Envoyer vos fichiers vers GitHub

    @@ -80,7 +80,7 @@ original_slug: Apprendre/Utiliser_les_pages_GitHub
    1. Sur cette page, une section vous intéresse particulièrement : « …or push an existing repository from the command line » (ce qui signifie « ou pousser un dépôt existant grâce à la ligne de commande »). Vous devrez voir deux lignes de codes sous cette section. Copiez la première ligne et collez la dans votre interface en ligne de commande puis tapez sur Entrée. La commande devrait ressembler à : - 
      git remote add origin https://github.com/chrisdavidmills/mon-premier-depot.git
      + 
      git remote add origin https://github.com/chrisdavidmills/mon-premier-depot.git
    2. Ensuite, saisissez ces deux commandes en tapant sur la touche Entrée après chacune. Ces commandes permettent d'indiquer à Git qu'il doit gérer tous les fichiers du dossier et d'enregistrer cette action. 
      git add --all
@@ -90,7 +90,7 @@ git commit -m 'ajout des fichiers au dépôt'
      git push -u origin master
    3. Votre code est publié sur GitHub. Pour avoir une page GitHub, vous devrez créer une branche gh-pages sur votre dépôt. Actualisez la page web de votre dépôt, vous devriez obtenir une page semblable à celle présentée ci-dessous. Ensuite, cliquez que le bouton « Branch: master » (GitHub indique que vous êtes sur la branche master de votre dépôt). Dans la liste qui s'affiche, saisissez le texte gh-pages puis cliquez sur Create branch: gh-pages (« créer la branche intitulée gh-pages »). Cela créera une nouvelle branche pour votre dépôt, cette branche s'appellera gh-pages et sera publiée à un endroit spécifique. L'URL du site sera nom-utilisateur.github.io/nom-du-depot. Dans mon exemple, l'URL est donc https://chrisdavidmills.github.io/my-repository. La page qui est affichée à cette URL est la page index.html contenue dans le dépôt.
      -
      4. +
    4. Utilisez votre navigateur préféré pour visiter cette URL. Voici votre site ! Partagez le lien avec vos amis pour leur montrer :)
    diff --git a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html index 5105d8fb6d..b8b05fb694 100644 --- a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html +++ b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html @@ -17,9 +17,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs
    {{Previous("Apprendre/Commencer_avec_le_web")}}
    -

    Tous les navigateurs modernes possèdent un ensemble d'outils destinés aux développeurs. Ces outils permettent de réaliser différentes actions : inspecter le code HTML, CSS ou JavaScript chargé à la volée dans la page, montrer les fichiers téléchargés et le temps de chargement, etc. Dans cet article, nous verrons comment utiliser les fonctionnalités basiques des outils de développements d'un navigateur (parfois appelés avec l'anglicisme « devtools »).

    -

    Note : Avant de poursuivre avec les exemples présentés ci-après, nous vous conseillons d'utiliser l'exemple construit dans la série d'articles Commencer avec le Web et d'ouvrir le site dans votre navigateur pour poursuivre avec les étapes suivantes.

    @@ -29,7 +27,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs

    Les devtools s'affichent généralement dans une sous-fenêtre du navigateur, de la façon suivante (cela peut varier légèrement) :

    -

    Affichage de la fenêtre principale avec les devtools ouverts

    +

    Affichage de la fenêtre principale avec les devtools ouverts

    Comment faire pour que cette sous-fenêtre apparaisse ? Trois méthodes :

    @@ -38,27 +36,27 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs
    • Internet Explorer. F12
      • -
    • Mac OS X. ⌘ + ⌥ + I
      • +
    • Mac OS X. ⌘ + ⌥ + I
    -
  • Via les menus. +
  • Via les menus.
      -
    • Firefox. Menu ➤ Développement ➤ Outils de développement ou Outils ➤ Développement Web ➤ Outils de développement
      • -
    • Chrome. Affichage ➤ Développement ➤ Outils de développement
      • -
    • Safari. Développement ➤ Afficher l'inspecteur web. Si vous ne pouvez pas voir le menu Développement, aller sous Safari ➤ Préférences ➤ Avancé et vérifiez que l'option Afficher le menu de développement est bien coché. 
      • -
    • Opera. Développement ➤ Inspecteur web
      • +
    • Firefox. Menu ➤ Développement ➤ Outils de développement ou Outils ➤ Développement Web ➤ Outils de développement
      • +
    • Chrome. Affichage ➤ Développement ➤ Outils de développement
      • +
    • Safari. Développement ➤ Afficher l'inspecteur web. Si vous ne pouvez pas voir le menu Développement, aller sous Safari ➤ Préférences ➤ Avancé et vérifiez que l'option Afficher le menu de développement est bien coché. 
      • +
    • Opera. Développement ➤ Inspecteur web
  • Via un menu contextuel. Cliquez-droit sur un élément de la page web (ou ctrl+clic sur Mac) et sélectionnez Examiner l'élément dans le menu qui apparait (Bonus : cette méthode ouvrira l'inspecteur et sélectionnera directement l'élément en question !).
    • -

    Menu contextuel suite au clic-droit

    +

    Menu contextuel suite au clic-droit

    L'inspecteur : explorateur du DOM et éditeur CSS

    Lorsqu'ils s'ouvrent, les outils de développement s'affichent comme illustré dans la capture d'écran ci-après. Cet outil permet de voir le HTML présent sur la page au moment où celle-ci est affiché, de façon dynamique. Il permet aussi de voir quelles règles CSS sont appliquées pour chaque élément de la page. Grâce à cet outil, on peut modifier le HTML et le CSS de façon instantanée et voir les changements appliqués immédiatement à la page affichée dans le navigateur.

    -

    Affichage de la fenêtre principale avec les devtools ouverts

    +

    Affichage de la fenêtre principale avec les devtools ouverts

    Si vous n'arrivez pas sur l'inspecteur :

    @@ -72,7 +70,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs

    Pour commencer, cliquez-droit sur un élément HTML dans l'inspecteur du DOM et regardez le menu contextuel qui s'affiche. Les options du menu qui apparaît peuvent varier d'un navigateur à un autre mais les options les plus importantes s'y trouvent toujours :

    -

    Menu contextuel ouvert suite à un clic-droit sur un élément HTML dans l'explorateur du DOM

    +

    Menu contextuel ouvert suite à un clic-droit sur un élément HTML dans l'explorateur du DOM

    • Supprimer le nœud (parfois Supprimer l'élément) : supprime l'élément sélectionné du document.
      • @@ -88,7 +86,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs

      Par défaut, l'éditeur CSS affiche les règles CSS qui s'appliquent à l'élément qui est sélectionné :

      -

      +

      Ces fonctionnalités sont plutôt pratiques :

      @@ -124,7 +122,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs

      La console JavaScript est un outil formidable pour déboguer du code JavaScript qui ne fonctionne pas comme on le souhaite. Elle permet d'exécuter des lignes de JavaScript sur la page qui est actuellement chargée dans le navigateur et de rapporter les erreurs rencontrées lorsque le navigateur souhaite exécuter le code. Pour accéder à la console dans n'importe quel navigateur, il suffit de cliquer/appuyer sur l'onglet Console (sous Internet Explorer, appuyez sur Ctrl + 2.) Cela affichera une fenêtre qui ressemblera à :

      -

      Console JavaScript

      +

      Console JavaScript

      Pour voir comment la console se comporte, essayez de saisir les fragments de code suivants dans la console (un par un), en appuyant sur Entrée après chaque :

      diff --git a/files/fr/learn/common_questions/what_are_hyperlinks/index.html b/files/fr/learn/common_questions/what_are_hyperlinks/index.html index 4c4c1b1658..584fc6b805 100644 --- a/files/fr/learn/common_questions/what_are_hyperlinks/index.html +++ b/files/fr/learn/common_questions/what_are_hyperlinks/index.html @@ -9,15 +9,13 @@ tags: translation_of: Learn/Common_questions/What_are_hyperlinks original_slug: Apprendre/Le_fonctionnement_des_liens_sur_le_Web --- -

      Dans cet article, nous verrons ce que sont les liens et en quoi ils sont importants pour la structure du Web.

      -
      - +
      - + @@ -40,13 +38,13 @@ original_slug: Apprendre/Le_fonctionnement_des_liens_sur_le_Web

      Par défaut, les liens apparaissent en bleu et en souligné. Cela permet de faire ressortir le lien du texte environnant. Pour activer le lien, il suffit de cliquer dessus ou de le toucher. Si vous utilisez un clavier, utilisez la touche tabulation jusqu'à ce que le lien soit sélectionné puis appuyez sur la touche Entrée.

      -

      Example of a basic display and effect of a link in a web page

      +

      Example of a basic display and effect of a link in a web page

      Les liens sont la clef de voute du Web, ils ont pu le rendre utile et prospère. Dans la suite de cet article, nous discutons des différents types de lien et de leur importance en conception web.

      Pédagogie active

      -

      Cette section a besoin d'être enrichie, n'hésitez pas à contribuer !

      +

      Cette section a besoin d'être enrichie, n'hésitez pas à contribuer !

      Aller plus loin

      @@ -71,7 +69,7 @@ original_slug: Apprendre/Le_fonctionnement_des_liens_sur_le_Web

      La plupart des liens lient deux pages différentes. Les ancres permettent d'accéder à une autre section du même document. Lorsque vous suivez un lien qui pointe vers une ancre, votre navigateur se déplace sur une autre partie du document courant plutôt que d'en charger un nouveau. Les ancres seront créées et utilisées de la même façon que les liens.

      -

      Example of a basic display and effect of an anchor in a web page

      +

      Example of a basic display and effect of an anchor in a web page

      Les liens et les moteurs de recherche

      diff --git a/files/fr/learn/common_questions/what_is_a_domain_name/index.html b/files/fr/learn/common_questions/what_is_a_domain_name/index.html index 8a97478c80..16bfb9f969 100644 --- a/files/fr/learn/common_questions/what_is_a_domain_name/index.html +++ b/files/fr/learn/common_questions/what_is_a_domain_name/index.html @@ -10,15 +10,13 @@ tags: translation_of: Learn/Common_questions/What_is_a_domain_name original_slug: Apprendre/Comprendre_noms_de_domaine --- -

      Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment ils sont organisés et comment en avoir un.

      -
      -
      Prérequis :Vous devriez, au préalable, comprendre comment Internet fonctionne et distinguer une page web, un site web, un serveur web et un moteur de recherche.Vous devriez, au préalable, comprendre comment Internet fonctionne et distinguer une page web, un site web, un serveur web et un moteur de recherche.
      Objectifs :
      +
      - + @@ -27,13 +25,13 @@ original_slug: Apprendre/Comprendre_noms_de_domaine
      Prérequis :Pour commencer, vous devez comprendre comment Internet fonctionne et ce que sont les URL.Pour commencer, vous devez comprendre comment Internet fonctionne et ce que sont les URL.
      Objectif :
      -

      Les noms de domaine jouent un rôle clé dans l'infrastructure d'Internet. Ils fournissent des adresses, humainement compréhensibles pour retrouver des serveurs web connectés sur Internet.

      +

      Les noms de domaine jouent un rôle clé dans l'infrastructure d'Internet. Ils fournissent des adresses, humainement compréhensibles pour retrouver des serveurs web connectés sur Internet.

      Tout ordinateur relié à Internet peut être contacté via une adresse {{Glossary("IP")}} publique. En IPv4, cette adresse est constituée de 32 bits, souvent exprimés avec quatre groupes de chiffes, compris entre 0 et 225, séparés par des points (par exemple 173.194.121.32). Avec IPv6, on a 128 bits, soit huit groupes de quatre chiffres hexadécimaux séparés par deux points (par exemple 2001:0db8:85a3:0042:1000:8a2e:0370:7334). Les ordinateurs n'ont aucun problème pour mémoriser ces adresses mais ça peut être difficile pour quelqu'un de faire le rapprochement entre un site web/service et cette adresse. De plus, le site peut « déménager » sur un autre ordinateur, l'ordinateur peut changer d'adresse... Dans ces cas, l'adresse correspondante à un site sera modifiée au cours du temps : il faudra alors utiliser la nouvelle adresse pour l'atteindre. Afin de résoudre ces problèmes (mémorisation et stabilité), on utilise des adresses compréhensibles appelée noms de domaine.

      Pédagogie active

      -

      Ce contenu a besoin d'être enrichi, n'hésitez pas à contribuer !

      +

      Ce contenu a besoin d'être enrichi, n'hésitez pas à contribuer !

      • Qu'est-ce qu'un nom de domaine sur le site de l'AFNIC
        • @@ -46,7 +44,7 @@ original_slug: Apprendre/Comprendre_noms_de_domaine

        Un nom de domaine est composé de plusieurs parties, séparées par des points. Ces différents composants sont lus de droite à gauche :

        -

        Anatomy of the MDN domain name

        +

        Anatomy of the MDN domain name

        Chacune de ces parties fournit des informations sur le nom de domaine dans son ensemble.

        @@ -146,7 +144,7 @@ Registrant Phone:+1.6509030800
      • Une fois que l'ordinateur connaît l'adresse IP demandée, le navigateur peut commencer à échanger du contenu avec le serveur web.
        • -

        Explanation of the steps needed to obtain the result to a DNS request

        +

        Explanation of the steps needed to obtain the result to a DNS request

        Note : Si c'est la première fois que quelqu'un demande l'adresse IP pour mozilla.org au serveur DNS, celui-ci ne la connaîtra pas. Il demandera alors au serveur faisant autorité qui possède l'information. Une fois l'adresse connue, il la transmettra à l'ordinateur.

        diff --git a/files/fr/learn/common_questions/what_is_a_url/index.html b/files/fr/learn/common_questions/what_is_a_url/index.html index e3743de8e5..7f3cdf0877 100644 --- a/files/fr/learn/common_questions/what_is_a_url/index.html +++ b/files/fr/learn/common_questions/what_is_a_url/index.html @@ -10,11 +10,9 @@ tags: translation_of: Learn/Common_questions/What_is_a_URL original_slug: Apprendre/Comprendre_les_URL --- -

        Cet article aborde les Uniform Resource Locators (URL) en expliquant leur rôle et leur structure.

        -
        - +
        @@ -27,7 +25,7 @@ original_slug: Apprendre/Comprendre_les_URL
        Prérequis :
        -

        Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les URL sont une autre pierre angulaire du Web.  Celles-ci sont utilisées par les navigateurs pour accéder aux différentes ressources publiées sur le Web.

        +

        Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les URL sont une autre pierre angulaire du Web.  Celles-ci sont utilisées par les navigateurs pour accéder aux différentes ressources publiées sur le Web.

        URL signifie Uniform Resource Locator (ou, en français, « localisateur uniforme de ressource »). Une URL est simplement l'adresse d'une ressource donnée, unique sur le Web. En théorie, chaque URL valide pointe vers une ressource unique. Ces ressources peuvent être des pages HTML, des documents CSS, des images, etc. En pratique, il y a quelques exceptions : les URL peuvent pointer vers une ressource qui n'existe plus ou qui a été déplacée. La ressource représentée par l'URL et l'URL elle-même sont gérées par le serveur web. C'est donc au gestionnaire de ce serveur que de gérer soigneusement la ressource et l'URL associée.

        @@ -52,17 +50,17 @@ https://developer.mozilla.org/fr/search?q=URL 
        http://www.exemple.com:80/chemin/vers/monfichier.html?clé1=valeur1&clé2=valeur2#QuelquePartDansLeDocument
        -
        Protocol
        +
        Protocol
        http:// correspond au protocole. Ce fragment indique au navigateur le protocole qui doit être utilisé pour récupérer le contenu. Généralement, ce protocole sera HTTP ou sa version sécurisée : HTTPS. Le « Web » fonctionne autour de ces deux protocoles mais le navigateur peut parfois gérer d'autres protocoles comme mailto: (qui permet d'ouvrir un client de messagerie électronique) ou ftp: qui permet de transférer des fichiers. Ne soyez pas surpris donc si vous rencontrez ces autres protocoles.
        -
        Domaine Name
        +
        Domaine Name
        www.exemple.com correspond au nom de domaine. Il indique le serveur web auquel le navigateur s'adresse pour échanger le contenu. À la place du nom de domaine, on peut utiliser une {{Glossary("adresse IP")}}, ce qui sera moins pratique (et qui est donc moins utilisé sur le Web).
        -
        Port
        +
        Port
        :80 correspond au port utilisé sur le serveur web. Il indique la « porte » technique à utiliser pour accéder aux ressources du serveur. Généralement, ce fragment est absent car le navigateur utilise les ports standards associés aux protocoles (80 pour HTTP, 443 pour HTTPS). Si le port utilisé par le serveur n'est pas celui par défaut, il faudra l'indiquer.
        -
        Path to the file
        +
        Path to the file
        /chemin/vers/monfichier.html est le chemin, sur le serveur web, vers la ressource. Aux débuts du Web, ce chemin correspondait souvent à un chemin « physique » existant sur le serveur. De nos jours, ce chemin n'est qu'une abstraction qui est gérée par le serveur web, il ne correspond plus à une réalité « physique ».
        -
        Parameters
        +
        Parameters
        ?clé1=valeur1&clé2=valeur2 sont des paramètres supplémentaires fournis au serveur web. Ces paramètres sont construits sous la forme d'une liste de paires de clé/valeur dont chaque élément est séparé par une esperluette (&). Le serveur web pourra utiliser ces paramètres pour effectuer des actions supplémentaires avant d'envoyer la ressource. Chaque serveur web possède ses propres règles quant aux paramètres. Afin de les connaître, le mieux est de demander au propriétaire du serveur.
        -
        Anchor
        +
        Anchor
        #QuelquePartDansLeDocument correspond à une ancre, celle-ci désigne un endroit donné de la ressource. Une ancre représente, en quelque sorte, un marque-page à l'intérieur de la ressource. Ajouter une ancre à une URL permet au navigateur d'afficher la ressource à l'endroit de ce marque page. Pour un document HTML, par exemple, le navigateur défilera la page jusqu'au niveau de l'ancre. Pour un document audio ou vidéo, le navigateur ira se placer à l'instant représenté par l'ancre. On notera également que la partie de l'URL située après le # n'est jamais envoyée au serveur avec la requête.
        @@ -101,19 +99,17 @@ https://developer.mozilla.org/fr/search?q=URL
        URL complète
        -
        +

        Exemple :

        https://developer.mozilla.org/fr/docs/Apprendre
        Protocole implicite
        -
        +

        Exemple :

        //developer.mozilla.org/fr/docs/Apprendre
        -

        Dans ce cas, le navigateur saura que l'URL utilise le même protocole que celui utilisé pour charger le document qui contient cette URL.

        Nom de domaine implicite
        -
        +

        Exemple :

        /fr/docs/Apprendre
        -

        Voici le cas le plus fréquent d'une URL absolue dans un document HTML. Le navigateur utilisera alors le même protocole et le même nom de domaine que ceux utilisés pour charger le document qui contient l'URL.

        @@ -128,12 +124,12 @@ https://developer.mozilla.org/fr/search?q=URL
        Sous-ressources
        -
        +

        Exemple :

        Compétences/Infrastructure/Comprendre_les_URL
        L'URL ne commence pas pas /, le navigateur essaiera de trouver le document visé dans un sous-répertoire de la ressource actuelle. Dans cet exemple, l'URL absolue correspondante du document auquel on souhaite accéder est : https://developer.mozilla.org/fr/docs/Apprendre/Compétences/Infrastructure/Comprendre_les_URL
        Remonter dans l'arborescence des dossiers
        -
        +

        Exemple :

        ../CSS/display

        Dans ce cas, on utilise la convention, héritée du monde UNIX :  ../ indique au navigateur de remonter d'un répertoire dans l'arborescence. L'URL absolue correspodante à la ressource visée est ici https://developer.mozilla.org/fr/docs/Apprendre/../CSS/display, qui peut être simplifiée en : https://developer.mozilla.org/fr/docs/CSS/display

        diff --git a/files/fr/learn/common_questions/what_is_a_web_server/index.html b/files/fr/learn/common_questions/what_is_a_web_server/index.html index 2dbf668646..06cd177779 100644 --- a/files/fr/learn/common_questions/what_is_a_web_server/index.html +++ b/files/fr/learn/common_questions/what_is_a_web_server/index.html @@ -8,11 +8,9 @@ tags: translation_of: Learn/Common_questions/What_is_a_web_server original_slug: Apprendre/Qu_est-ce_qu_un_serveur_web --- -

        Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctionnent et pourquoi ils sont importants.

        -
        - +
        @@ -34,7 +32,7 @@ original_slug: Apprendre/Qu_est-ce_qu_un_serveur_web

        Au niveau le plus simple, à chaque fois qu'un navigateur a besoin d'un fichier hébergé sur un serveur web, le navigateur demande (on dit qu'il envoie une requête) le fichier via HTTP. Quand la requête atteint le bon serveur web (matériel), le serveur HTTP (logiciel) renvoie le document demandé, également grâce à HTTP.

        -

        Basic representation of a client/server connection through HTTP

        +

        Basic representation of a client/server connection through HTTP

        Pour publier un site web, vous aurez besoin d'un serveur web statique ou dynamique.

        @@ -98,7 +96,7 @@ original_slug: Apprendre/Qu_est-ce_qu_un_serveur_web
      • Si le fichier n'existe pas ou que le traitement est impossible, le serveur web renvoie un message d'erreur au navigateur. Le message d'erreur le plus fréquemment rencontré est {{HTTPStatus("404", "404 Page non trouvée")}} (cette erreur étant plutôt fréquente, certains ont même personnalisé et adapté les pages d'erreurs 404 de leurs sites).
        • -

        Une page d'erreur HTTP, en l'occurrence la page 404 de MDN

        +

        Une page d'erreur HTTP, en l'occurrence la page 404 de MDN

        Contenu statique et contenu dynamique

        diff --git a/files/fr/learn/common_questions/what_is_accessibility/index.html b/files/fr/learn/common_questions/what_is_accessibility/index.html index a8b667f8eb..60991cfd2b 100644 --- a/files/fr/learn/common_questions/what_is_accessibility/index.html +++ b/files/fr/learn/common_questions/what_is_accessibility/index.html @@ -10,11 +10,9 @@ tags: translation_of: Learn/Common_questions/What_is_accessibility original_slug: Apprendre/Accessibilité --- -

        Cet article aborde les concepts de base qui forment l'accessibilité pour le Web.

        -
        -
        Prérequis :
        +
        @@ -49,8 +47,7 @@ original_slug: Apprendre/Accessibilité
        Déficience auditive
        -
        Comment une personne déficiente auditivement peut-elle profiter de la vidéo ? Il est nécessaire de fournir des sous-titres, voire mieux, une transcription écrite complète.
        -
        Assurez-vous également que les personnes puissent ajuster le volume à leur convenance.
        +
        Comment une personne déficiente auditivement peut-elle profiter de la vidéo ? Il est nécessaire de fournir des sous-titres, voire mieux, une transcription écrite complète. Assurez-vous également que les personnes puissent ajuster le volume à leur convenance.
        Déficience visuelle
        Ici aussi, il est préférable de fournir une transcription que l'utilisateur pourra consulter sans lancer la vidéo, ainsi qu'une audio-description décrivant, en voix off, ce qui se passe dans la vidéo.
        Mise en pause
        diff --git a/files/fr/learn/common_questions/what_software_do_i_need/index.html b/files/fr/learn/common_questions/what_software_do_i_need/index.html index 8a1a9271f1..61d1cefa8f 100644 --- a/files/fr/learn/common_questions/what_software_do_i_need/index.html +++ b/files/fr/learn/common_questions/what_software_do_i_need/index.html @@ -9,11 +9,9 @@ tags: translation_of: Learn/Common_questions/What_software_do_I_need original_slug: Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web --- -

        Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre en ligne ou consulter un site web.

        -
        -
        Prérequis :
        +
        @@ -127,17 +125,17 @@ original_slug: Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_si

        Voici une capture d'écran qui illustre l'allure d'un éditeur de texte avancé (ici Notepad++) :

        -

        Screenshot of Notepad++.

        +

        Screenshot of Notepad++.

        Transférer des fichiers vers un serveur web

        -

        Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (uploader) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article combien ça coûte de publier quelque chose sur le Web ?). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour File Transfer Protocol ou protocole de transfert de fichiers), souvent en donnant une URL SFTP, un nom d'utilisateur, un mot de passe et d'autres informations nécessaires à la connexion au serveur. Sachez toutefois que le FTP est une technique vieillissante et que de nouveaux systèmes commencent à devenir populaires, comme RSync et Git/Github.

        +

        Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (uploader) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article combien ça coûte de publier quelque chose sur le Web ?). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour File Transfer Protocol ou protocole de transfert de fichiers), souvent en donnant une URL SFTP, un nom d'utilisateur, un mot de passe et d'autres informations nécessaires à la connexion au serveur. Sachez toutefois que le FTP est une technique vieillissante et que de nouveaux systèmes commencent à devenir populaires, comme RSync et Git/Github.

        -
        -

        FTP est par nature non sécurisé. Vous devez toujours vous assurer que votre fournisseur d'hébergement vous autorise à vous connecter de manière sécurisée, c'est-à-dire via SFTP (Secure FTP) ou via RSync avec SSH.

        +
        +

        Note : FTP est par nature non sécurisé. Vous devez toujours vous assurer que votre fournisseur d'hébergement vous autorise à vous connecter de manière sécurisée, c'est-à-dire via SFTP (Secure FTP) ou via RSync avec SSH.

        -

        Le téléversement des fichiers vers un serveur web est une étape importante dans la publication d'un site web et nous la décrivons beaucoup plus en détails dans un article à part. Voyons tout de même une liste de clients FTP basiques :

        +

        Le téléversement des fichiers vers un serveur web est une étape importante dans la publication d'un site web et nous la décrivons beaucoup plus en détails dans un article à part. Voyons tout de même une liste de clients FTP basiques :

        Prérequis :
        @@ -184,7 +182,7 @@ original_slug: Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_si

        Prochaines étapes

        diff --git a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html index b9aaa7b5ce..da13496b05 100644 --- a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html +++ b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html @@ -18,9 +18,9 @@ original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box
        {{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
        -

        Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création de boîtes d'aspect rafraîchissant en faisant en sorte qu'elles attirent le regard.

        +

        Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création de boîtes d'aspect rafraîchissant en faisant en sorte qu'elles attirent le regard.

        -
        +
        @@ -42,7 +42,7 @@ original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box
        -

        Note: Autrement, vous pouvez utiliser un site comme  JSBin ou Thimble pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <style> dans l'élément head du document.

        +

        Note : Autrement, vous pouvez utiliser un site comme  JSBin ou Thimble pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <style> dans l'élément head du document.

        Résumé du projet

        @@ -76,7 +76,7 @@ original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box

        Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler :

        -

        +

        Évaluation

        @@ -94,6 +94,6 @@ original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box
      • Encadrements
      • Mise en page des tableaux
      • Effets de boîte avancés
        • -
      • Creation d'un en-tête de papier à lettre élégant
        • +
      • Creation d'un en-tête de papier à lettre élégant
      • Une boîte d'aspect rafraîchissant
        • diff --git a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html index 8091fe664e..3d0b3c1fe5 100644 --- a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html +++ b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html @@ -19,13 +19,13 @@ original_slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects
        {{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
        -

        Cet article est une sorte de boîte à malices : elle introduit certaines des fonctions avancées disponibles pour styliser les boîtes, fonctions n'entrant pas dans catégories vues plus haut — comme les ombres, les mélanges de couleurs ou les filtres.

        +

        Cet article est une sorte de boîte à malices : elle introduit certaines des fonctions avancées disponibles pour styliser les boîtes, fonctions n'entrant pas dans catégories vues plus haut — comme les ombres, les mélanges de couleurs ou les filtres.

        -
        Prérequis :
        +
        - + @@ -36,7 +36,7 @@ original_slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects

        Ombres des boîtes

        -

        Revenons au module Styling text — nous y avons vu la propriété {{cssxref("text-shadow")}} : elle permet d'appliquer une ou plusieurs ombres portées au texte d'un élément. Il existe une propriété équivalente pour les boîtes — {{cssxref("box-shadow")}} : elle applique une ou plusieurs ombres portées à une boîte d'élément réelle. Tout comme les ombres de texte, les ombres de boîtes sont bien prises en charge par les navigateurs, mais seulement au-delà de IE9. Les utilisateurs des anciennes versions d'IE pourraient être confrontés à l'absence d'ombres ; donc, testez simplement vos designs pour être sûr que le contenu reste lisible sans ombrage.

        +

        Revenons au module Styling text — nous y avons vu la propriété {{cssxref("text-shadow")}} : elle permet d'appliquer une ou plusieurs ombres portées au texte d'un élément. Il existe une propriété équivalente pour les boîtes — {{cssxref("box-shadow")}} : elle applique une ou plusieurs ombres portées à une boîte d'élément réelle. Tout comme les ombres de texte, les ombres de boîtes sont bien prises en charge par les navigateurs, mais seulement au-delà de IE9. Les utilisateurs des anciennes versions d'IE pourraient être confrontés à l'absence d'ombres ; donc, testez simplement vos designs pour être sûr que le contenu reste lisible sans ombrage.

        Vous trouverez les exemples de cet article dans le fichier  box-shadow.html (voir le code source également).

        @@ -44,7 +44,7 @@ original_slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects

        Débutons avec un exemple simple. D'abord, un peu de HTML :

        -
        + 
        <article class="simple">
   <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p>
 </article>
        @@ -59,7 +59,7 @@ article { max-width: 500px; padding: 10px; color: white ; - text-align: center ; + text-align: center; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } @@ -67,11 +67,11 @@ article { .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); } -
        +

        donnent le résultat suivant :

        -

        {{ EmbedLiveSample('example_1', '100%', 100) }}

        +

        {{ EmbedLiveSample('Ombre_simple_pour_une_boîte', '100%', 100) }}

        Notez les quatre éléments valeur de la propriété box-shadow :

        @@ -88,14 +88,12 @@ article {

        Vous pouvez également définir plusieurs ombres de boîtes dans une seule déclaration en les séparant par des virgules :

        -
        - -
        p {
+
-

        Nous obtenons le résultat suivant :

        -

        {{ EmbedLiveSample('example_2', '100%', 100) }}

        +

        {{ EmbedLiveSample('Ombres_multiples_pour_une_boîte', '100%', 100) }}

        Voici quelque chose d'amusant : nous créons une boîte avec une impression de relief avec plusieurs couches de couleur. Vous pouvez utiliser ce procédé d'autre manière, par exemple pour donner une apparence plus réaliste avec des ombres à partir de plusieurs sources de lumière.

        @@ -128,7 +125,6 @@ article {

        D'abord un HTML différent pour cet exemple :

        -
        <button>Appuyez ici !</button>
        button {
@@ -152,20 +148,17 @@ button:active {
               inset 2px 3px 5px rgba(0,0,0,0.3),
               inset -2px -3px 5px rgba(255,255,255,0.5);
 }
        -

        Et voici le résultat :

        -

        {{ EmbedLiveSample('example_3', '100%', 70) }}

        - -

         

        +

        {{ EmbedLiveSample('Autres_fonctionnalités_des_ombres_de_boîtes', '100%', 70) }}

        Ici, nous avons mis en place un style de bouton avec des états différents selon qu'il a le focus, qu'il est survolé par le pointeur de souris ou qu'il est actif. Le bouton est doté d'une simple ombre noire définie par défaut, plus deux ombres d'insertion, l'une claire et l'autre sombre, placées sur les coins opposés du bouton pour lui donner un bel effet d'ombrage.

        Lorsque le bouton est cliqué, l'état actif entraîne le remplacement de la première ombre de la boîte par une ombre d'insertion très sombre, donnant l'apparence que le bouton est enfoncé.

        -

        Note : il y a un autre élément qui peut être paramétré parmi les valeurs de box-shadow  — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le rayon de diffusion. S'il est défini, l'ombre devient plus grande que la boîte originelle. Ce paramètre n'est pas couramment utilisé, mais il est bon de le signaler.

        +

        Note : il y a un autre élément qui peut être paramétré parmi les valeurs de box-shadow  — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le rayon de diffusion. S'il est défini, l'ombre devient plus grande que la boîte originelle. Ce paramètre n'est pas couramment utilisé, mais il est bon de le signaler.

        Filtres

        @@ -186,7 +179,7 @@ button:active { 
        p {
   margin: 1rem auto;
   padding: 20px;
-  text-align: center ;
+  text-align: center ;
   width: 100px;
   border: 5px dashed red;
 }
@@ -214,7 +207,7 @@ button:active {
 
 
 
        
-
        Note : Si vous décidez d'utiliser des préfixes dans votre code, assurez-vous d'inclure tous les préfixes requis ainsi que la version non préfixée, afin que le plus grand nombre possible de navigateurs puissent utiliser la fonction, et lorsque les navigateurs abandonneront plus tard les préfixes, ils pourront également utiliser la version non préfixée. Soyez également averti que ces caractéristiques expérimentales pourraient changer, de sorte que votre code pourrait casser. Il est vraiment préférable d'expérimenter avec ces fonctions jusqu'à ce que les préfixes soient supprimés.
        
+
        Note : Si vous décidez d'utiliser des préfixes dans votre code, assurez-vous d'inclure tous les préfixes requis ainsi que la version non préfixée, afin que le plus grand nombre possible de navigateurs puissent utiliser la fonction, et lorsque les navigateurs abandonneront plus tard les préfixes, ils pourront également utiliser la version non préfixée. Soyez également averti que ces caractéristiques expérimentales pourraient changer, de sorte que votre code pourrait casser. Il est vraiment préférable d'expérimenter avec ces fonctions jusqu'à ce que les préfixes soient supprimés.
        
 
        
 
 
        Vous pouvez voir d'autres exemples de filtres sur filters.html (voir aussi le code source).
        
@@ -233,7 +226,7 @@ button:active {
 
        Vous trouverez beaucoup plus d'exemples de ce qui est disponible à la page blend-modes.html  (voir aussi le code source) et à la page de référence de {{cssxref("<blend-mode>")}}.
        
 
 
        
-
        Note : Les modes de mélange sont aussi une toute nouvelle fonctionnalité un petit peu moins bien prise en charge que les filtres. Il n'y a pas de prise en charge encore dans Edge et Safari ne l'accepte que partiellement.
        
+
        Note : Les modes de mélange sont aussi une toute nouvelle fonctionnalité un petit peu moins bien prise en charge que les filtres. Il n'y a pas de prise en charge encore dans Edge et Safari ne l'accepte que partiellement.
        
 
        
 
 
        background-blend-mode
        
@@ -331,7 +324,7 @@ article div:last-child {
 
        Vous voyez ici que mix-blend-mode: multiply; a mélangé non seulement les deux images d'arrière plan, mais également la couleur du <div> situé dessous.
        
 
 
        
-
        Note : Ne vous inquiétez pas si vous ne saisissez pas certaines propriétés de mise en page telles que {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Nous en reparlerons en détail dans le module CSS Layout.
        
+
        Note : Ne vous inquiétez pas si vous ne saisissez pas certaines propriétés de mise en page telles que {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Nous en reparlerons en détail dans le module CSS Layout.
        
 
        
 
 
        -webkit-background-clip: text
        
@@ -348,7 +341,7 @@ article div:last-child {
 
        Si vous voulez utiliser de telles fonctionnalités dans votre travail de production, assurez-vous de tester minutieusement tous les navigateurs et vérifiez que, lorsque ces fonctionnalités ne sont pas prises en charge , le site reste toujours utilisable.
        
 
 
        
-
        Note : Pour un exemple de code complet avec -webkit-background-clip: text,  allez à la page background-clip-text.html (voir aussi le code source).
        
+
        Note : Pour un exemple de code complet avec -webkit-background-clip: text,  allez à la page background-clip-text.html (voir aussi le code source).
        
 
        
 
 
        Apprentissage actif : expérimenter certains effets
        
@@ -357,10 +350,8 @@ article div:last-child {
 
 
        Si vous faites une erreur, vous pouvez toujours Réinitialiser l'exemple avec le bouton correspondant.
        
 
-
 
-
        {{ EmbedLiveSample('Playable_code', 700, 820) }}
        
+
+
        {{ EmbedLiveSample('Apprentissage_actif_expérimenter_certains_effets', 700, 820) }}
        
 
 
        Résumé
        
 
@@ -421,8 +412,6 @@ window.addEventListener("load", drawOutput);
 
 
        {{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
        
 
-
         
        
-
 
        Dans ce module
        
 
 
diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html
index 33bf88edac..105df053a6 100644
--- a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html
+++ b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html
@@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
 
 
        Dans cette leçon, nous verrons quelques-unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS.
        
 
-
        Prérequis :Notions de HTML (voir Introduction à HTML) et idées sur le fonctionnement des CSS (voir Introduction aux CSS).Notions de HTML (voir Introduction à HTML) et idées sur le fonctionnement des CSS (voir Introduction aux CSS).
        Objectif :
        +
        @@ -94,8 +94,8 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders

        La propriété background-position permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine (0,0) au coin en haut à gauche de la boîte, l'axe (x) étant horizontal, l'axe (y) vertical.

        -
        -

        Note : La valeur par défaut de background-position est (0,0).

        +
        +

        Note : La valeur par défaut de background-position est (0,0).

        Les valeurs les plus communes pour background-position se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.

        @@ -280,7 +280,7 @@ background-position: 10px 20px, top right;

        {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 700)}}

        -

        Note : Vous pouvez jeter un œil à la solution ici — mais essayez d'abord de la trouver par vous-même !

        +

        Note : Vous pouvez jeter un œil à la solution ici — mais essayez d'abord de la trouver par vous-même !

        Résumé

        diff --git a/files/fr/learn/css/building_blocks/box_model_tasks/index.html b/files/fr/learn/css/building_blocks/box_model_tasks/index.html index eb968b8e31..0d4034be70 100644 --- a/files/fr/learn/css/building_blocks/box_model_tasks/index.html +++ b/files/fr/learn/css/building_blocks/box_model_tasks/index.html @@ -10,8 +10,8 @@ translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks

        L'objectif de cet exercice est de vous aider à vérifier votre compréhension du modèle de boîte CSS.

        -
        -

        Note : Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut toutefois être plus utile de télécharger le code et de passer par un éditeur en ligne comme CodePen, JSFiddle ou Glitch pour travailler sur les exercices.

        +
        +

        Note : Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut toutefois être plus utile de télécharger le code et de passer par un éditeur en ligne comme CodePen, JSFiddle ou Glitch pour travailler sur les exercices.

        Si vous bloquez, demandez-nous de l'aide : voir la section Évaluation et aide en bas de cette page.

        @@ -25,8 +25,8 @@ translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks

        {{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}

        -
        -

        Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

        +
        +

        Note : Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

        Modèle de boîte : numéro 2

        @@ -48,8 +48,8 @@ translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks

        {{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}

        -
        -

        Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

        +
        +

        Note : Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

        Modèle de boîte : numéro 3

        @@ -62,8 +62,8 @@ translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks

        {{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}

        -
        -

        Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

        +
        +

        Note : Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

        Évaluation et aide

        diff --git a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html index c7dd0051f5..7bc80fb59e 100644 --- a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -19,11 +19,11 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage

        Bien que cette leçon puisse sembler moins pertinente dans l'immédiat et un peu plus académique que d'autres parties du cours, la compréhension de ces éléments vous épargnera bien des soucis plus tard ! Nous vous conseillons de parcourir attentivement cette section et de vérifier que vous avez bien compris les concepts avant de passer à la suite.

        -
        Prérequis :
        +
        - + @@ -75,8 +75,8 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage

        Certaines propriétés ne se transmettent pas — par exemple si vous attribuez un {{cssxref("width")}} de 50% à un élément, aucun de ses descendants n'aura une largeur diminuée de moitié par rapport à celle de son parent. Si c'était le cas, l'usage de CSS serait particulièrement frustrant !

        -
        -

        Note : Sur MDN, dans les pages de référence des propriétés CSS, vous trouverez des encarts d'information technique, le plus souvent au pied de la section de spécifications, dans lesquels sont listés nombre de données sur la propriété, notamment si elle est héritée ou non. Voir la section des spécifications de la propriété color, par exemple.

        +
        +

        Note : Sur MDN, dans les pages de référence des propriétés CSS, vous trouverez des encarts d'information technique, le plus souvent au pied de la section de spécifications, dans lesquels sont listés nombre de données sur la propriété, notamment si elle est héritée ou non. Voir la section des spécifications de la propriété color, par exemple.

        Comprendre comment ces concepts se combinent

        @@ -108,12 +108,12 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage
        Redéfinit la propriété à sa valeur naturelle : si la propriété est transmise par héritage, le comportement est le même que  inherit, sinon il est identique à initial.
        -
        -

        Note : Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité.

        +
        +

        Note : Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité.

        -
        -

        Note : Voir {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} pour plus d'informations sur chacune de ces valeurs et comment elles fonctionnent.

        +
        +

        Note : Voir {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} pour plus d'informations sur chacune de ces valeurs et comment elles fonctionnent.

        Voyons maintenant comment les valeurs universelles fonctionnent sur un exemple : une liste de liens. Dans l'exemple live ci-dessous, vous pourrez manipuler CSS et observer directement les effets de vos modifications. Jouer avec le code est vraiment le meilleur moyen pour progresser en HTML et CSS.

        @@ -140,7 +140,7 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage

        Comprendre la cascade

        -

        Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le <body>, et à partir des parties précédentes, nous comprenons comment changer la mise en forme d'un élément où qu'il soit dans le document — que ce soit par un sélecteur de type ou en créant une classe. Nous allons maintenant examiner comment la cascade détermine la règle CSS qui s'applique quand plusieurs règles ciblent le même élément.

        +

        Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le <body>, et à partir des parties précédentes, nous comprenons comment changer la mise en forme d'un élément où qu'il soit dans le document — que ce soit par un sélecteur de type ou en créant une classe. Nous allons maintenant examiner comment la cascade détermine la règle CSS qui s'applique quand plusieurs règles ciblent le même élément.

        Il y a trois facteurs à prendre en compte, listés ci-dessous par ordre décroissant d'importance. Les premiers critères prennent le dessus sur ceux qui viennent après :

        @@ -180,7 +180,7 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage
        -

        Note : Le sélecteur  universel (*), les combinateurs (+, >, ~, ' '), et la pseudo-class de négation (:not) n'affectent en rien la spécificité.

        +

        Note : Le sélecteur  universel (*), les combinateurs (+, >, ~, ' '), et la pseudo-class de négation (:not) n'affectent en rien la spécificité.

        Le tableau suivant montre quelques exemples isolés pour vous mettre dans l'ambiance. Assurez-vous de comprendre dans chaque cas la spécificité annoncée. Nous n'avons pas encore couvert les sélecteurs en détail, mais vous pouvez trouver les informations à propos de chaque sélecteur sur la référence MDN des sélecteurs.

        @@ -253,7 +253,7 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage
        -

        Note : Cet exemple est simplificateur. En fait, chaque type de sélecteur voit sa spécificité comptée à un niveau qui lui est propre, qui ne peut pas être dépassé par des sélecteurs d'un type avec une spécificité moindre. Par exemple, un million de sélecteurs de class combinés ne prendront jamais le dessus sur un sélecteur d'id.

        +

        Note : Cet exemple est simplificateur. En fait, chaque type de sélecteur voit sa spécificité comptée à un niveau qui lui est propre, qui ne peut pas être dépassé par des sélecteurs d'un type avec une spécificité moindre. Par exemple, un million de sélecteurs de class combinés ne prendront jamais le dessus sur un sélecteur d'id.

        Une manière plus précise d'évaluer la spécificité serait de noter individuellement les niveaux de spécificité en commençant par le plus élevé et en passant au plus bas si nécessaire. Ce n'est que lorsqu'il existe un lien entre les scores des sélecteurs au sein d'un niveau de spécificité que vous devez évaluer le niveau suivant ; sinon, vous pouvez ignorer les sélecteurs de niveau de spécificité inférieur car ils ne peuvent jamais écraser les niveaux de spécificité supérieurs.

        @@ -275,8 +275,8 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage
      • Le deuxième élément a un arrière-plan rouge, mais pas de bordure. Pourquoi ? En raison de la déclaration !important dans la deuxième règle — écrit après  border: none,  ce mot-clé signifie que cette déclaration l'emporte sur le border définie dans la règle précédente, même si l'ID a une spécificité plus élevée.
        • -
        -

        Note : La seule façon de dépasser cette déclaration  !important serait d'ajouter un !important dans une déclaration de même spécificité apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande.

        +
        +

        Note : La seule façon de dépasser cette déclaration  !important serait d'ajouter un !important dans une déclaration de même spécificité apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande.

        Il est utile de connaître  !important , ne serait-ce que pour le reconnaître dans le code des autres. Cependant, nous vous recommandons fortement de ne jamais l'utiliser, sauf en dernier recours. !important modifie le fonctionnement normal de la cascade, de sorte qu'il peut être très difficile de résoudre les problèmes de débogage CSS, en particulier dans une grande feuille de style.

        @@ -322,23 +322,23 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage

        Dans ce cours

          -
        1. Cascade and inheritance
          2. -
        2. CSS selectors +
        3. Cascade and inheritance
          4. +
        4. CSS selectors
          5. -
        5. The box model
          6. -
        6. Backgrounds and borders
          7. -
        7. Handling different text directions
          8. -
        8. Overflowing content
          9. -
        9. Values and units
          10. -
        10. Sizing items in CSS
          11. -
        11. Images, media, and form elements
          12. -
        12. Styling tables
          13. -
        13. Debugging CSS
          14. -
        14. Organizing your CSS
          15. +
        15. The box model
          16. +
        16. Backgrounds and borders
          17. +
        17. Handling different text directions
          18. +
        18. Overflowing content
          19. +
        19. Values and units
          20. +
        20. Sizing items in CSS
          21. +
        21. Images, media, and form elements
          22. +
        22. Styling tables
          23. +
        23. Debugging CSS
          24. +
        24. Organizing your CSS
        diff --git a/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html index b5e9d31c2e..720f34217f 100644 --- a/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html +++ b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html @@ -21,9 +21,9 @@ original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper
        {{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Apprendre/CSS/styliser_boites")}}
        -

        Si vous voulez faire bonne impression, écrire une lettre sur un beau papier à en-tête peut vraiment être un bon début. Dans cet execice, le défi à relever consiste à créer un modèle en ligne pour obtenir ce bel aspect.

        +

        Si vous voulez faire bonne impression, écrire une lettre sur un beau papier à en-tête peut vraiment être un bon début. Dans cet execice, le défi à relever consiste à créer un modèle en ligne pour obtenir ce bel aspect.

        -
        Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
        Objectif :
        +
        @@ -46,7 +46,7 @@ original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper
        -

        Note : Autrement, vous pouvez utiliser un site comme  JSBin ou Thimble pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <style> dans l'élément head du document.

        +

        Note : Autrement, vous pouvez utiliser un site comme  JSBin ou Thimble pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <style> dans l'élément head du document.

        Résumé du projet

        @@ -88,7 +88,7 @@ original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper

        Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera :

        -

        +

         

        @@ -108,6 +108,6 @@ original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper
      • Encadrements
      • Mise en page des tableaux
      • Effets de boîte avancés
        • -
      • Création d'un en-tête de papier à lettre élégant
        • +
      • Création d'un en-tête de papier à lettre élégant
      • Une boîte d'aspect rafraîchissant
        • diff --git a/files/fr/learn/css/building_blocks/debugging_css/index.html b/files/fr/learn/css/building_blocks/debugging_css/index.html index d3d8121acb..e367a4cd59 100644 --- a/files/fr/learn/css/building_blocks/debugging_css/index.html +++ b/files/fr/learn/css/building_blocks/debugging_css/index.html @@ -8,11 +8,11 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS

        Parfois, quand vous écrirez du CSS, vous rencontrerez un problème où votre CSS semblera ne pas se comporter comme vous vous y attendrez. Peut-être que vous croirez qu'un certain sélecteur devrait être lié à un élément, mais rien ne se passe, ou une box aura une taille différente de ce que vous espérerez. Cet article vous donnera une ligne directrice pour débeuguer un problème CSS, et vous montrera comment les DevTools (outils de développeur) inclus dans tous les navigateurs modernes peuvent vous aider à comprendre ce qui se passe.

        -
        Prérequis :
        +
        - + @@ -23,27 +23,27 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS

        Comment accéder aux outils de développement du navigateur

        -

        L'article Que sont les outils de développement de navigateurs est un guide maintenu à jour qui explique comment accéder aux outils dans différents navigateurs et plateformes. Alors que vous pouvez choisir de développer le plus souvent sur un navigateur en particulier, et donc de devenir plus familier avec les outils inclus dans ce navigateur, il est important de savoir comment accéder à ces outils dans d'autres navigateurs. Cela vous aidera si vous voyez des rendus différents entre plusieurs navigateurs.

        +

        L'article Que sont les outils de développement de navigateurs est un guide maintenu à jour qui explique comment accéder aux outils dans différents navigateurs et plateformes. Alors que vous pouvez choisir de développer le plus souvent sur un navigateur en particulier, et donc de devenir plus familier avec les outils inclus dans ce navigateur, il est important de savoir comment accéder à ces outils dans d'autres navigateurs. Cela vous aidera si vous voyez des rendus différents entre plusieurs navigateurs.

        -

        You will also find that browsers have chosen to focus on different areas when creating their DevTools. For example in Firefox there are some excellent tools for working visually with CSS Layout, allowing you to inspect and edit Grid Layouts, Flexbox, and Shapes. However, all of the different browsers have similar fundamental tools, e.g. for inspecting the properties and values applied to elements on your page, and making changes to them from the editor.

        +

        You will also find that browsers have chosen to focus on different areas when creating their DevTools. For example in Firefox there are some excellent tools for working visually with CSS Layout, allowing you to inspect and edit Grid Layouts, Flexbox, and Shapes. However, all of the different browsers have similar fundamental tools, e.g. for inspecting the properties and values applied to elements on your page, and making changes to them from the editor.

        In this lesson we will look at some useful features of the Firefox DevTools for working with CSS. In order to do so I'll be using an example file. Load this up in a new tab if you want to follow along, and open up your DevTools as described in the article linked above.

        The DOM versus view source

        -

        Something that can trip up newcomers to DevTools is the difference between what you see when you view the source of a webpage, or look at the HTML file you put on the server, and what you can see in the HTML Pane of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences.

        +

        Something that can trip up newcomers to DevTools is the difference between what you see when you view the source of a webpage, or look at the HTML file you put on the server, and what you can see in the HTML Pane of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences.

        In the rendered DOM the browser may have corrected some badly-written HTML for you. If you incorrectly closed an element, for instance opening an <h2> but closing with an </h3>, the browser will figure out what you were meaning to do and the HTML in the DOM will correctly close the open <h2> with an </h2>. The browser will also normalize all of the HTML, and the DOM will also show any changes made by JavaScript.

        -

        View Source in comparison, is simply the HTML source code as stored on the server. The HTML tree in your DevTools shows exactly what the browser is rendering at any given time, so it gives you an insight into what is really going on.

        +

        View Source in comparison, is simply the HTML source code as stored on the server. The HTML tree in your DevTools shows exactly what the browser is rendering at any given time, so it gives you an insight into what is really going on.

        Inspecting the applied CSS

        Select an element on your page, either by right/ctrl-clicking on it and selecting Inspect, or selecting it from the HTML tree on the left of the DevTools display. Try selecting the element with the class of box1; this is the first element on the page with a bordered box drawn around it.

        -

        The example page for this tutorial with DevTools open.

        +

        The example page for this tutorial with DevTools open.

        -

        If you look at the Rules view to the right of your HTML, you should be able to see the CSS properties and values applied to that element. You will see the rules directly applied to class box1 and also the CSS that is being inherited by the box from its ancestors, in this case to <body>. This is useful if you are seeing some CSS being applied that you didn't expect. Perhaps it is being inherited from a parent element and you need to add a rule to overwrite it in the context of this element.

        +

        If you look at the Rules view to the right of your HTML, you should be able to see the CSS properties and values applied to that element. You will see the rules directly applied to class box1 and also the CSS that is being inherited by the box from its ancestors, in this case to <body>. This is useful if you are seeing some CSS being applied that you didn't expect. Perhaps it is being inherited from a parent element and you need to add a rule to overwrite it in the context of this element.

        Also useful is the ability to expand out shorthand properties. In our example the margin shorthand is used.

        @@ -63,7 +63,7 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS

        With box1 selected, click on the swatch (the small colored circle) that shows the color applied to the border. A color picker will open up and you can try out some different colors; these will update in real time on the page. In a similar fashion, you could change the width or style of the border.

        -

        DevTools Styles Panel with a color picker open.

        +

        DevTools Styles Panel with a color picker open.

        Adding a new property

        @@ -71,17 +71,17 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS

        You can click the closing curly brace in the rule to start entering a new declaration into it, at which point you can start typing the new property and DevTools will show you an autocomplete list of matching properties. After selecting font-size, enter the value you want to try. You can also click the + button to add an additional rule with the same selector, and add your new rules there.

        -

        The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open

        +

        The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open

        -
        -

        Note: There are other useful features in the Rules view too, for example declarations with invalid values are crossed out. You can find out more at Examine and edit CSS.

        +
        +

        Note : There are other useful features in the Rules view too, for example declarations with invalid values are crossed out. You can find out more at Examine and edit CSS.

        Understanding the box model

        -

        In previous lessons we have discussed the Box Model, and the fact that we have an alternate box model that changes how the size of elements are calculated based on the size you give them, plus the padding and borders. DevTools can really help you to understand how the size of an element is being calculated.

        +

        In previous lessons we have discussed the Box Model, and the fact that we have an alternate box model that changes how the size of elements are calculated based on the size you give them, plus the padding and borders. DevTools can really help you to understand how the size of an element is being calculated.

        -

        The Layout view shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out. This includes a description of properties that you may not have explicitly used on the element, but which do have initial values set.

        +

        The Layout view shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out. This includes a description of properties that you may not have explicitly used on the element, but which do have initial values set.

        In this panel, one of the detailed properties is the box-sizing property, which controls what box model the element uses.

        @@ -89,10 +89,10 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS

        The element with a class of box2 is using border-box, so here the padding and border is subtracted from the size that you have given the element. This means that the space taken up on the page by the box is the exact size that you specified — in our case width: 400px.

        -

        The Layout section of the DevTools

        +

        The Layout section of the DevTools

        -
        -

        Note: Find out more in Examining and Inspecting the Box Model.

        +
        +

        Note : Find out more in Examining and Inspecting the Box Model.

        Solving specificity issues

        @@ -101,26 +101,26 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS

        In our example file there are two words that have been wrapped in an <em> element. One is displaying as orange and the other hotpink. In the CSS we have applied:

        -
        em {
+
        em {
   color: hotpink;
   font-weight: bold;
 }
        
 
 
        Above that in the stylesheet however is a rule with a .special selector:
        
 
-
        .special {
+
        .special {
   color: orange;
 }
        
 
-
        As you will recall from the lesson on cascade and inheritance where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet.
        
+
        As you will recall from the lesson on cascade and inheritance where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet.
        
 
 
        Inspect the <em> with the class of .special and DevTools will show you that orange is the color that applies, and also shows you the color property applied to the em crossed out. You can now see that the class is overriding the element selector.
        
 
-
        Selecting an em and looking at DevTools to see what is over-riding the color.
        
+
        Selecting an em and looking at DevTools to see what is over-riding the color.
        
 
 
        Find out more about the Firefox DevTools
        
 
-
        There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main DevTools section, and for more detail on the things we have briefly covered in this lesson see The How To Guides.
        
+
        There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main DevTools section, and for more detail on the things we have briefly covered in this lesson see The How To Guides.
        
 
 
        Debugging problems in CSS
        
 
@@ -143,7 +143,7 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS
 
 
        Browsers simply ignore CSS they don't understand. If the property or value you are using is not supported by the browser you are testing in then nothing will break, but that CSS won't be applied. DevTools will generally highlight unsupported properties and values in some way. In the screenshot below the browser does not support the subgrid value of {{cssxref("grid-template-columns")}}.
        
 
-
        Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.
        
+
        Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.
        
 
 
        You can also take a look at the Browser compatibility tables at the bottom of each property page on MDN. These show you browser support for that property, often broken down if there is support for some usage of the property and not others. The below table shows the compat data for the {{cssxref("shape-outside")}} property.
        
 
@@ -181,23 +181,23 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS
 
        In this module
        
 
 
          
- 
        1. Cascade and inheritance
          2. 
- 
        2. CSS selectors
+ 
        3. Cascade and inheritance
          4. 
+ 
        4. CSS selectors
   
  
          5. 
- 
        5. The box model
          6. 
- 
        6. Backgrounds and borders
          7. 
- 
        7. Handling different text directions
          8. 
- 
        8. Overflowing content
          9. 
- 
        9. Values and units
          10. 
- 
        10. Sizing items in CSS
          11. 
- 
        11. Images, media, and form elements
          12. 
- 
        12. Styling tables
          13. 
- 
        13. Debugging CSS
          14. 
- 
        14. Organizing your CSS
          15. 
+ 
        15. The box model
          16. 
+ 
        16. Backgrounds and borders
          17. 
+ 
        17. Handling different text directions
          18. 
+ 
        18. Overflowing content
          19. 
+ 
        19. Values and units
          20. 
+ 
        20. Sizing items in CSS
          21. 
+ 
        21. Images, media, and form elements
          22. 
+ 
        22. Styling tables
          23. 
+ 
        23. Debugging CSS
          24. 
+ 
        24. Organizing your CSS
          25. 
 
        
diff --git a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html
index 8c6008bfa0..114467a4f8 100644
--- a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html
+++ b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html
@@ -19,9 +19,9 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension
 
 
        {{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}
        
 
-
        Beaucoup de choses ont été passées en revue dans ce module, donc il est bon d'avoir atteint la fin ! La dernière étape avant de passer à la suite est de tenter une évaluation sur les thèmes de ce module — elle comprend un certain nombre d'exercices connexes à compléter pour créer la composition finale — une carte de visite / carte de joueur / un profil de média social.
        
+
        Beaucoup de choses ont été passées en revue dans ce module, donc il est bon d'avoir atteint la fin ! La dernière étape avant de passer à la suite est de tenter une évaluation sur les thèmes de ce module — elle comprend un certain nombre d'exercices connexes à compléter pour créer la composition finale — une carte de visite / carte de joueur / un profil de média social.
        
 
-
        Prerequisites:Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
        Objective:
        +
        @@ -44,7 +44,7 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension
        -

        Note : À défaut, vous pouvez utiliser un site comme JSBin ou Thimble pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet URL pour faire pointer l'élément <img> sur le fichier correspondant. Si l'éditeur en ligne que vous utilisez ne comporte pas de panneau séparé pour la CSS, mettez‑le dans un élément <style> dans l'élément head du document.

        +

        Note : À défaut, vous pouvez utiliser un site comme JSBin ou Thimble pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet URL pour faire pointer l'élément <img> sur le fichier correspondant. Si l'éditeur en ligne que vous utilisez ne comporte pas de panneau séparé pour la CSS, mettez‑le dans un élément <style> dans l'élément head du document.

        Énoncé du projet

        @@ -87,7 +87,7 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension
        -

        Note : Gardez présent à l'esprit que le 2e jeu de règles définit font-size: 10px; pour l'élément <html> — cela signifie que pour tous les enfants de <html>, un em vaudra 10px et non 16px comme c'est le cas par défaut (ceci bien sûr, à condition que les enfants en question n'aient pas de parents ayant un font-size différent placés entre eux et <html> dans la hiérarchie. Les valeurs dont vous avez besoin pourraient en être affectées, bien que dans cet exemple simple, ce ne soit pas un problème).

        +

        Note : Gardez présent à l'esprit que le 2e jeu de règles définit font-size: 10px; pour l'élément <html> — cela signifie que pour tous les enfants de <html>, un em vaudra 10px et non 16px comme c'est le cas par défaut (ceci bien sûr, à condition que les enfants en question n'aient pas de parents ayant un font-size différent placés entre eux et <html> dans la hiérarchie. Les valeurs dont vous avez besoin pourraient en être affectées, bien que dans cet exemple simple, ce ne soit pas un problème).

        Autres choses à prendre en considération :

        @@ -108,7 +108,7 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension

        La capture d'écran suivante montre un exemple de ce à quoi devrait ressembler la composition terminée :

        -

        A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

        +

        A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

         

        @@ -126,13 +126,13 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension
      • Comment fonctionnent les CSS
      • Syntaxe CSS
      • Sélecteurs
        • -
      • Sélecteurs simples
        • -
      • Sélecteurs d'attribut
        • -
      • Pseudo-classes et pseudo-éléments
        • -
      • Combinaisons et sélecteurs multiples
        • +
      • Sélecteurs simples
        • +
      • Sélecteurs d'attribut
        • +
      • Pseudo-classes et pseudo-éléments
        • +
      • Combinaisons et sélecteurs multiples
      • Unités et valeurs pour les CSS
      • Cascade et héritage
      • Le modèle de boîte
        • -
      • Débogage des CSS
        • -
      • Compréhension des fondements des CSS
        • +
      • Débogage des CSS
        • +
      • Compréhension des fondements des CSS
        • diff --git a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html index 4523b58fa4..6d01ee3f41 100644 --- a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html +++ b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html @@ -10,7 +10,7 @@ original_slug: Apprendre/CSS/Building_blocks/Handling_different_text_directions

        Ces dernières années cependant, le CSS a évolué pour supporter du contenu orienté dans différentes directions, comme la droite vers la gauche, mais également le haut vers le bas (comme le japonais) — Ces différentes directions sont appelées modes d'écriture (writing modes en anglais). En progressant dans votre apprentissage et en travaillant sur l'agencement, une compréhension des modes d'écriture vous sera très utile, donc nous allons vous les présenter maintenant.

        -
        Prérequis :
        +
        diff --git a/files/fr/learn/css/building_blocks/index.html b/files/fr/learn/css/building_blocks/index.html index d0992257a9..996ef6e24f 100644 --- a/files/fr/learn/css/building_blocks/index.html +++ b/files/fr/learn/css/building_blocks/index.html @@ -34,40 +34,40 @@ original_slug: Apprendre/CSS/Building_blocks

        Les articles qui composent ce module traitent la majeure partie du langage CSS. En les parcourant, vous découvrirez de nombreux exercices qui vous permettront d'évaluer votre bonne compréhension.

        -

        Note : Les articles dont le titre apparaît en anglais ne sont pas encore traduits au moment de la traduction de la page que vous lisez.

        +

        Note : Les articles dont le titre apparaît en anglais ne sont pas encore traduits au moment de la traduction de la page que vous lisez.

        -
        Cascade and inheritance (Cascade et héritage)
        +
        Cascade and inheritance (Cascade et héritage)
        Le but de cette leçon est de vous permettre d'acquérir des concepts fondamentaux du CSS : la cascade, la spécificité et l'héritage... et ainsi d'apprendre comment le CSS s'applique au HTML, et comment les conflits se résolvent.
        -
        CSS selectors (sélecteurs CSS)
        +
        CSS selectors (sélecteurs CSS)
        Il y a une large palette de sélecteurs CSS disponibles permettant avec une fine granularité de désigner les éléments auxquels appliquer des styles. Dans cet article, nous verrons avec moult détails comment ces différents types de sélecteurs fonctionnent, au travers de plusieurs parties :
        -
        The box model (le modèle des boîtes)
        +
        The box model (le modèle des boîtes)
        Tout en CSS a une boîte autour de lui, et comprendre ces boîtes est la clef pour être capable de créer des mises en page avec CSS, ou d'aligner des éléments avec d'autres. Dans cette leçon, nous nous attarderons sur le modèle de boîte CSS, afin que vous puissiez passer à des mises en page plus complexes grâce à une meilleure compréhension du fonctionnement et de la terminologie.
        -
        Backgrounds and borders (arrières-plans et bordures)
        +
        Backgrounds and borders (arrières-plans et bordures)
        Dans cette leçon, nous illustrerons des usages créatifs des arrières-plans et bordures en CSS. Des dégradés, des images de fond, des coins arrondis.... les arrières plans et les bordures sont les réponses à de nombreuses questions de style en CSS.
        -
        Handling different text directions (manipuler les différentes directions du texte)
        +
        Handling different text directions (manipuler les différentes directions du texte)
        Ces dernières années, le CSS a évolué afin de permettre aux contenus de prendre des directions différentes ; pas seuleument de droite à gauche mais aussi de haut en bas (comme au Japon) ; ces différentes directions sont appelées modes d'écriture (writing modes). Comme vous progressez dans l'étude du CSS et commencez à travailler la mise en page, la compréhension des modes d'écriture vous sera fort utile, c'est pour cela que nous vous les présentons dans cet article. .
        -
        Overflowing content (quand ça dépasse)
        +
        Overflowing content (quand ça dépasse)
        Autre concept important du CSS: le dépassement (overflow) : c'est ce qui se passe quand il y a trop de contenu pour qu'il puisse tenir dans la boîte. Dans cette leçon, vous apprendrez comment le gérer.
        -
        Values and units (valeurs et unités)
        +
        Values and units (valeurs et unités)
        Toute propriété utilisée en CSS dispose de valeurs ou d'ensembles de valeurs autorisées pour cette propriété. Dans cette leçon, nous aborderons les valeurs et unités les plus communément utilisées.
        -
        Sizing items in CSS (dimensionner les éléments en CSS)
        +
        Sizing items in CSS (dimensionner les éléments en CSS)
        Dans plusieurs leçons précédentes, vous avez abordé plusieurs façons de dimensionner de nombreux éléments d'une page web en utilisant le CSS. Comprendre pour anticiper les tailles des composants de votre design est important. Dans cette leçon nous résumerons par quels différents biais les éléments sont dimensionnés en CSS et définirons quelques termes qui vous aideront à l'avenir.
        -
        Images, media, and form elements (images, médias et éléments de formulaires)
        +
        Images, media, and form elements (images, médias et éléments de formulaires)
        Dans cet article, nous verrons comment des éléments particuliers sont traités en CSS. Les images, les autres médias, ou encore le éléments de formulaires se comportent légèrement différement des boîtes habituelles lorsque vous souhaitez leur appliquer un style CSS. Comprendre ce qu'il est possible ou non de faire vous évitera d'éventuelles déceptions cette leçon soulignera ce qu'il vous faut savoir.
        Mise en page des tableaux
        Styliser un tableau HTML n'est pas le travail qui fait rêver, mais vous pouvez parfois avoir à le faire. Cet article vous guide pour réussir l'apparence de vos tableaux en soulignant les techniques spécifiques applicables.
        -
        Debugging CSS (déboguer le CSS)
        +
        Debugging CSS (déboguer le CSS)
        Parfois, lorsque vous écrivez du CSS, le résultat n'est pas ce que vous attendiez. Cet article vous guidera pour déboguer un problème de CSS en vous montrant comment utiliser les outils de développement contenus dans tout navigateur moderne pour vous aider à trouver ce qui se passe.
        -
        Organizing your CSS (organiser votre CSS)
        +
        Organizing your CSS (organiser votre CSS)
        Au fur et à mesure que vous travaillerez sur des feuilles de style de plus en plus longues et des projets de plus en plus volumineux, vous découvrirez que maintenir un énorme fichier CSS peut être problématique. Dans cet article, nous aborderons les bonnes pratiques pour écrire votre CSS, le rendre facile à maintenir, et d'autres solutions pouvant vous aider à améliorer cette maintenabilité.
        diff --git a/files/fr/learn/css/building_blocks/overflowing_content/index.html b/files/fr/learn/css/building_blocks/overflowing_content/index.html index 5adba69e5e..6eb65c2dca 100644 --- a/files/fr/learn/css/building_blocks/overflowing_content/index.html +++ b/files/fr/learn/css/building_blocks/overflowing_content/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Overflowing_content

        Dans ce cours nous allons étudier un autre concept important en CSS : les débordements (overflows en anglais). Un débordement de contenu correspond à ce qui se produit lorsque le contenu à insérer dans une boîte occupe trop d'espace pour s'y insérer confortablement. Dans ce guide vous allez apprendre à gérer cela.

        -
        Prérequis :
        +
        @@ -91,7 +91,7 @@ original_slug: Apprendre/CSS/Building_blocks/Overflowing_content

        Testez vos compétences !

        -

        Nous avons couvert beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien retenu ces informations avant de partir - voir (en anglais) Testez vos compétences: overflow.

        +

        Nous avons couvert beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien retenu ces informations avant de partir - voir (en anglais) Testez vos compétences: overflow.

        Résumé

        diff --git a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html index 94b5601bf6..f56a321023 100644 --- a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html +++ b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut

        Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.

        -
        Prérequis :
        +
        @@ -121,8 +121,8 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut

        {{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

        -
        -

        Note : Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur s nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.

        +
        +

        Note : Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur s nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.

        Pas suivants

        diff --git a/files/fr/learn/css/building_blocks/selectors/combinators/index.html b/files/fr/learn/css/building_blocks/selectors/combinators/index.html index 7a63a06d36..ecef10ea21 100644 --- a/files/fr/learn/css/building_blocks/selectors/combinators/index.html +++ b/files/fr/learn/css/building_blocks/selectors/combinators/index.html @@ -12,11 +12,11 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs

        Les derniers sélecteurs que nous allons étudier sont appelés combinateurs, car ils combinent différents sélecteurs de façon à leur donner une relation utile et l'emplacement du contenu dans le document.

        -
        Prérequis :
        +
        - + @@ -29,7 +29,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs

        Le combinateur descendant— en général représenté par un seul espace ( ) — combine deux sélecteurs de sorte que les éléments choisis par le second sélecteur sont sélectionnés s'ils ont un élément ancêtre (parent, parent de parent, parent de parent de parent, etc...) qui correspond au premier sélecteur. Les sélecteurs qui utilisent un combinateur descendant sont appelés sélecteurs descendants.

        -
        body article p
+
        body article p
 
        
 
 
        Dans l'exemple ci-dessous, nous ne sélectionnons que l'élément <p>, qui est à l'intérieur d'un élément de classe .box.
        
@@ -40,7 +40,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
 
        Le combinateur enfant (>) est placé entre deux sélecteurs CSS. Il correspond uniquement aux éléments correspondant au second sélecteur qui sont les enfants directs des éléments correspondants au premier. Les éléments descendants plus bas dans la hiérarchie ne correspondent pas. Par exemple, pour sélectionner uniquement les éléments <p> qui sont des enfants directs des éléments <article>:
        
 
-
        article > p
        
+
        article > p
        
 
 
        Dans cet exemple suivant, nous avons une liste non ordonnée, imbriquée à l'intérieur de laquelle se trouve une liste ordonnée. Nous utilisons le combinateur enfant pour sélectionner uniquement les éléments <li> qui sont un enfant direct d'un <ul>, et leur ai donné une bordure supérieure.
        
 
@@ -52,7 +52,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
 
        Le sélecteur de frère adjacent (+) est utilisé pour sélectionner quelque chose s'il est juste à côté d'un autre élément au même niveau de la hiérarchie. Par exemple, pour sélectionner tous les éléments <img> qui viennent juste après les éléments <p>:
        
 
-
        p + img
        
+
        p + img
        
 
 
        Un cas d'utilisation courant consiste à faire quelque chose avec un paragraphe qui suit un titre, comme dans mon exemple ci-dessous. Ici, nous recherchons un paragraphe qui est directement adjacent à un <h1>, et le stylisons.
        
 
@@ -64,7 +64,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
 
        Si vous souhaitez sélectionner les frères d'un élément même s'ils ne sont pas directement adjacents, vous pouvez utiliser le combinateur général de frères (~). Pour sélectionner tous les éléments <img> qui viennent n'importe où après les éléments <p>, nous ferions ceci:
        
 
-
        p ~ img
        
+
        p ~ img
        
 
 
        Dans l'exemple ci-dessous, nous sélectionnons tous les éléments <p> qui viennent après le <h1>, et même s'il y a aussi un <div> dans le document, le <p> qui vient après qu'il est sélectionné.
        
 
@@ -74,7 +74,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
 
        Vous pouvez combiner n'importe lequel des sélecteurs que nous avons découverts dans les leçons précédentes avec des combinateurs afin de sélectionner une partie de votre document. Par exemple, si nous voulons sélectionner des éléments de liste avec une classe de "a", qui sont des enfants directs d'un <ul>, je pourrais utiliser ce qui suit.
        
 
-
        ul > li[class="a"]  {  }
        
+
        ul > li[class="a"]  {  }
        
 
 
        Faites cependant attention lorsque vous créez de grandes listes de sélecteurs qui sélectionnent des parties très spécifiques de votre document. Il sera difficile de réutiliser les règles CSS car vous avez rendu le sélecteur très spécifique à l'emplacement de cet élément dans le balisage.
        
 
@@ -82,7 +82,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
 
        Testez vos compétences!
        
 
-
        Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir Test your skills: Selectors.
        
+
        Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir Test your skills: Selectors.
        
 
 
        Passer à la suite
        
 
@@ -93,10 +93,10 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
        Dans ce module
        
 
 
          
- 
        1. Cascade et héritage
          2. 
- 
        2. Sélecteurs CSS
+ 
        3. Cascade et héritage
          4. 
+ 
        4. Sélecteurs CSS
   
        
diff --git a/files/fr/learn/css/building_blocks/selectors/index.html b/files/fr/learn/css/building_blocks/selectors/index.html
index 2ba25e54d4..ece86d8018 100644
--- a/files/fr/learn/css/building_blocks/selectors/index.html
+++ b/files/fr/learn/css/building_blocks/selectors/index.html
@@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors
 
 
        Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléments {{glossary("HTML")}} à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types.
        
 
-
        Prérequis:Connaissances informatiques de base, les outils de base installés, connaissance de base de gestion des fichiers, les bases du HTML (voir Introduction au HTML), et une idée du fonctionnement du CSS (voir Premiers pas avec CSS.)Connaissances informatiques de base, les outils de base installés, connaissance de base de gestion des fichiers, les bases du HTML (voir Introduction au HTML), et une idée du fonctionnement du CSS (voir Premiers pas avec CSS.)
        Objectif:
        +
        @@ -25,7 +25,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors

        Vous les avez déjà rencontrés : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le sujet de ce sélecteur.

        -

        Du code où h1 est surligné.

        +

        Du code où h1 est surligné.

        Vous avez rencontré plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments h1, ou la classe .special.

        diff --git a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html index f7d62596c1..8e89104fdd 100644 --- a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html +++ b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -14,13 +14,13 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- ---

        {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

        -

        Voyons maintenant les sélecteurs de pseudo-classes et de pseudo-éléments. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.

        +

        Voyons maintenant les sélecteurs de pseudo-classes et de pseudo-éléments. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.

        -
        Prérequis :
        +
        - + @@ -35,7 +35,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-

        Les pseudo-classes sont signalées par un mot clé commençant par deux points :

        -
        :pseudo-class-name
        +
        :pseudo-class-name

        Exemple d'une pseudo-classe élémentaire 

        @@ -50,17 +50,17 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-

        Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les éléments du document dans un état donné, comme si vous aviez ajouté une classe dans votre code HTML. Jetez un œil à quelques exemples sur MDN :

        Pseudo-classes d'action utilisateur

        Certaines pseudo-classes ne s'appliquent que lorsque l'utilisateur interagit avec le document d'une manière ou d'une autre. Ces pseudo-classes d'action utilisateur, parfois appelées pseudo-classes dynamiques, agissent comme si une classe avait été ajoutée à l'élément lorsque l'utilisateur interagit avec lui. Par exemple :

        -

        :hover — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.
        - :focus — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.

        +

        :hover — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.
        + :focus — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.

        {{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

        @@ -68,10 +68,10 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-

        Les pseudo-éléments se comportent de manière similaire, même s'ils se comportent comme si vous aviez ajouté un tout nouvel élément HTML dans le balisage, au lieu d'appliquer une classe à des éléments existants. Les pseudo-éléments commencent avec un double deux-points ::.

        -
        ::pseudo-element-name
        +
        ::pseudo-element-name
        -
        -

        Note : Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité.

        +
        +

        Note : Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité.

        Par exemple, si vous souhaitez sélectionner la première ligne d'un paragraphe, vous pouvez l'entourer d'un élément <span> et utiliser un sélecteur d'éléments ; cependant, cela échouerait si le nombre de mots que vous avez entourés était plus long ou plus court que la largeur de l'élément parent. Comme nous avons tendance à ne pas savoir combien de mots tiendront sur une ligne - étant donné que cela peut varier si la largeur de l'écran ou la taille de la police change - il est impossible de le faire de manière robuste en ajoutant du HTML.

        @@ -88,14 +88,14 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-

        Si vous souhaitez mettre en gras la première ligne du premier paragraphe, vous pouvez enchaîner les sélecteurs :first-child et ::first-line Essayez de modifier l'exemple précédent en direct pour qu'il utilise le CSS suivant. Nous souhaitons sélectionner la première ligne du premier élément <p>, qui se trouve à l'intérieur d'un élément <article>

        -
        article p:first-child::first-line {
+
        article p:first-child::first-line {
   font-size: 120%;
   font-weight: bold;
-}
        
+}

        Générer du contenu avec ::before et ::after

        -

        Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété content pour insérer du contenu dans votre document en utilisant le CSS.

        +

        Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété content pour insérer du contenu dans votre document en utilisant le CSS.

        Vous pouvez les utiliser pour insérer une chaîne de texte, comme dans l'exemple ci-dessous. Essayez de changer la valeur du texte de la propriété {{cssxref("content")}} et vous verrez qu'elle change en sortie. Vous pouvez également changer le pseudo-élément ::before en  ::after et voir le texte inséré à la fin de l'élément au lieu du début.

        @@ -139,7 +139,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-
        - + @@ -155,7 +155,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- - + @@ -171,7 +171,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- - + @@ -203,7 +203,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- - + @@ -215,7 +215,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- - + @@ -227,7 +227,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- - + @@ -307,7 +307,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- - + @@ -378,23 +378,23 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-

        Dans ce cours

          -
        1. Cascade and inheritance
          2. -
        2. CSS selectors +
        3. Cascade and inheritance
          4. +
        4. CSS selectors
          5. -
        5. The box model
          6. -
        6. Backgrounds and borders
          7. -
        7. Handling different text directions
          8. -
        8. Overflowing content
          9. -
        9. Values and units
          10. -
        10. Sizing items in CSS
          11. -
        11. Images, media, and form elements
          12. -
        12. Styling tables
          13. -
        13. Debugging CSS
          14. -
        14. Organizing your CSS
          15. +
        15. The box model
          16. +
        16. Backgrounds and borders
          17. +
        17. Handling different text directions
          18. +
        18. Overflowing content
          19. +
        19. Values and units
          20. +
        20. Sizing items in CSS
          21. +
        21. Images, media, and form elements
          22. +
        22. Styling tables
          23. +
        23. Debugging CSS
          24. +
        24. Organizing your CSS
        diff --git a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html index 33f687df82..376bfcb1cd 100644 --- a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html +++ b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class

        Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse trouver, ce sont ceux que vous utiliserez le plus couramment dans votre travail.

        -
        Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
        Objectif :
        {{ Cssxref(":blank") }}Matches an <input> element whose input value is empty.Matches an <input> element whose input value is empty.
        {{ Cssxref(":checked") }}
        {{ Cssxref(":dir") }}Select an element based on its directionality (value of the HTML dir attribute or CSS direction property).Select an element based on its directionality (value of the HTML dir attribute or CSS direction property).
        {{ Cssxref(":disabled") }}
        {{ Cssxref(":first") }}In Paged Media, matches the first page.In Paged Media, matches the first page.
        {{ Cssxref(":first-child") }}
        {{ Cssxref(":indeterminate") }}Matches UI elements whose value is in an indeterminate state, usually checkboxes.Matches UI elements whose value is in an indeterminate state, usually checkboxes.
        {{ Cssxref(":in-range") }}
        {{ Cssxref(":lang") }}Matches an element based on language (value of the HTML lang attribute).Matches an element based on language (value of the HTML lang attribute).
        {{ Cssxref(":last-child") }}
        {{ Cssxref(":left") }}In Paged Media, matches left-hand pages.In Paged Media, matches left-hand pages.
        {{ Cssxref(":link")}}
        {{ Cssxref(":right") }}In Paged Media, matches right-hand pages.In Paged Media, matches right-hand pages.
        {{ Cssxref(":root") }}
        +
        @@ -39,7 +39,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class

        Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles

        -

        On peut utiliser * pour rendre les sélecteurs plus lisibles, pour clarifier leur  fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément <article> pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les pseudo-classes et pseudo-éléments :  

        +

        On peut utiliser * pour rendre les sélecteurs plus lisibles, pour clarifier leur  fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément <article> pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les pseudo-classes et pseudo-éléments :  

        article :first-child {
 
@@ -84,7 +84,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class
 
        {{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}
        
 
 
        
-
        Note : Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.
        
+
        Note : Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.
        
 
        
 
 
        Prochain article
        
@@ -96,23 +96,23 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class
 
        Dans ce cours
        
 
 
          
- 
        1. Cascade and inheritance
          2. 
- 
        2. CSS selectors
+ 
        3. Cascade and inheritance
          4. 
+ 
        4. CSS selectors
   
  
          5. 
- 
        5. The box model
          6. 
- 
        6. Backgrounds and borders
          7. 
- 
        7. Handling different text directions
          8. 
- 
        8. Overflowing content
          9. 
- 
        9. Values and units
          10. 
- 
        10. Sizing items in CSS
          11. 
- 
        11. Images, media, and form elements
          12. 
- 
        12. Styling tables
          13. 
- 
        13. Debugging CSS
          14. 
- 
        14. Organizing your CSS
          15. 
+ 
        15. The box model
          16. 
+ 
        16. Backgrounds and borders
          17. 
+ 
        17. Handling different text directions
          18. 
+ 
        18. Overflowing content
          19. 
+ 
        19. Values and units
          20. 
+ 
        20. Sizing items in CSS
          21. 
+ 
        21. Images, media, and form elements
          22. 
+ 
        22. Styling tables
          23. 
+ 
        23. Debugging CSS
          24. 
+ 
        24. Organizing your CSS
          25. 
 
        
diff --git a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html
index 47e0ee79a1..74258dbe1b 100644
--- a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html
+++ b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html
@@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Sizing_items_in_CSS
 
 
        Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utilisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aideront dans le futur.
        
 
-
        Prérequis :
        +
        @@ -85,8 +85,8 @@ original_slug: Apprendre/CSS/Building_blocks/Sizing_items_in_CSS

        Cette technique est utilisée pour rendre les images responsive, de sorte que lorsqu'elles sont visualisées sur un appareil plus petit, elles sont réduites de manière appropriée. Vous ne devez cependant pas utiliser cette technique pour charger des images vraiment grandes et les réduire ensuite dans le navigateur. Les images doivent être correctement dimensionnées pour ne pas être plus grandes qu'elles ne doivent l'être pour la plus grande taille à laquelle elles sont affichées dans la conception. Le téléchargement d'images trop grandes ralentira votre site et peut coûter plus cher aux utilisateurs s'ils disposent d'une connexion limitée.

        -
        -

        Note : En savoir plus sur les techniques d'images responsives.

        +
        +

        Note : En savoir plus sur les techniques d'images responsives.

        Unités de la fenêtre d'affichage

        diff --git a/files/fr/learn/css/building_blocks/styling_tables/index.html b/files/fr/learn/css/building_blocks/styling_tables/index.html index 0b8eb4bd14..2543732c2a 100644 --- a/files/fr/learn/css/building_blocks/styling_tables/index.html +++ b/files/fr/learn/css/building_blocks/styling_tables/index.html @@ -17,13 +17,13 @@ original_slug: Apprendre/CSS/Building_blocks/Styling_tables
        {{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}
        -

        Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais ... quelquefois nous devons le faire. Cet article est un guide pour donner un bel aspect aux tableaux HTML à l'aide des fonctionnalités détaillées dans les articles précédents.

        +

        Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais ... quelquefois nous devons le faire. Cet article est un guide pour donner un bel aspect aux tableaux HTML à l'aide des fonctionnalités détaillées dans les articles précédents.

        -
        Prérequis :
        +
        - + @@ -79,7 +79,7 @@ original_slug: Apprendre/CSS/Building_blocks/Styling_tables

        Le tableau est bien balisé, facile à disposer et accessible, remercions les fonctionnalités {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, etc. Malheureusement, il n'a pas un rendu bien terrible à l'écran (voyez‑le directement ici punk-bands-unstyled.html) :

        -

        Liste des groupes punk du Royaume Uni

        +

        Liste des groupes punk du Royaume Uni

        Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela.

        @@ -136,14 +136,14 @@ th, td {
      • Définir pour le tableau la valeur fixed pour {{cssxref("table-layout")}} est généralement une bonne idée, car cela rend le comportement par défaut du tableau un peu plus prévisible. Normalement, les colonnes des tableaux sont dimensionnées en fonction de leur contenu, ce qui produit des résultats étranges. Avec table-layout: fixed, vous pouvez dimensionner les colonnes selon la largeur de leurs en-têtes, puis traiter leur contenu comme il convient. C'est pourquoi nous sélectionnons les quatre en-têtes distinctement avec le sélecteur thead th:nth-child(n) ({{cssxref(":nth-child")}}) (« sélectionner le nième élément enfant {{htmlelement("th")}} dans la liste à l'intérieur de l'élément {{htmlelement("thead")}} ») et leur donnons un pourcentage de largeur défini. Chaque colonne prend la largeur de son en‑tête, ce qui permet de bien dimensionner les colonnes du tableau. Chris Coyier expose cette technique de façon détaillée dans Fixed Table Layouts.

        Ceci est couplé avec une largeur {{cssxref("width")}} de 100%, ce qui signifie que le tableau remplira complétement tout conteneur dans lequel il sera placé et sera bien adaptable (même s'il aura besoin de quelques aménagements complémentaires pour avoir bel aspect avec les largeurs d'écran étroites).
        • -
      • La valeur collapse pour {{cssxref("border-collapse")}} est une bonne pratique courante pour toute mise en page de tableau. Par défaut, quand vous définissez des encadrements pour les éléments d'un tableau, il y a un espace entre eux, comme le montre cette illustration : Encadrement des éléments d'un tableau Cela n'a pas l'air très joli (même si c'est peut-être le look que vous voulez, qui sait ?) Avec border-collapse : collapse;, les bordures se condensent en une seule, ce qui est beaucoup mieux :Avec border-collapse: collapse; les encadrements se condensent
        • +
      • La valeur collapse pour {{cssxref("border-collapse")}} est une bonne pratique courante pour toute mise en page de tableau. Par défaut, quand vous définissez des encadrements pour les éléments d'un tableau, il y a un espace entre eux, comme le montre cette illustration : Encadrement des éléments d'un tableau Cela n'a pas l'air très joli (même si c'est peut-être le look que vous voulez, qui sait ?) Avec border-collapse : collapse;, les bordures se condensent en une seule, ce qui est beaucoup mieux :Avec border-collapse: collapse; les encadrements se condensent
      • Nous avons mis un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous encadrerons  plus tard l'intitulé et le pied de page — si vous n'avez pas d'encadrement général du tableau, terminer par un espacement donne un aspect insolite et peu net.
      • Nous avons défini une valeur pour le remplissage ({{cssxref("padding")}}) des éléments {{htmlelement("th")}} et {{htmlelement("td")}} — cela donne un peu d'air aux données et facilite la lecture de la table.

        • À ce stade, le tableau a déjà meilleure mine :

        -

        Première mise en forme du tableau

        +

        Première mise en forme du tableau

        Simple typographie

        @@ -194,7 +194,7 @@ tfoot th {

        Cela fait un peu plus propre :

        -

        Deuxième mise en forme : modifications des polices de caractères.

        +

        Deuxième mise en forme : modifications des polices de caractères.

        Graphisme et couleurs

        @@ -248,7 +248,7 @@ table {

        Et voici l'explosion de couleurs résultante :

        -

        Troisième mise en forme : coloriage agressif

        +

        Troisième mise en forme : coloriage agressif

        Maintenant, peut-être trouverez‑vous que nous avons forcé la dose et que ce n'est pas à votre goût, mais ce que nous avons essayé de montrer ici est que les tableaux ne sont pas forcément ennuyeux ou académiques.

        @@ -268,7 +268,7 @@ table {

        Rien de remarquable ici, sauf pour la propriété {{cssxref("caption-side")}} à laquelle on a donné la valeur bottom. Elle a pour effet de positionner la légende au bas du tableau, ce qui, avec les autres déclarations, nous donne ce look final (voir en direct sur punk-bands-complete.html) :

        -

        Quatrième mise en forme : l'intitulé est disposé en bas à droite à la manière d'une légende de dessin

        +

        Quatrième mise en forme : l'intitulé est disposé en bas à droite à la manière d'une légende de dessin

        Apprentissage actif : mettez en page votre propre tableau

        @@ -303,6 +303,6 @@ table {
      • Encadrements
      • Mise en page des tableaux
      • Effets de boîte avancés
        • -
      • Création d'un en-tête de papier à lettre élégant
        • +
      • Création d'un en-tête de papier à lettre élégant
      • Une boîte d'aspect rafraîchissant
        • diff --git a/files/fr/learn/css/building_blocks/the_box_model/index.html b/files/fr/learn/css/building_blocks/the_box_model/index.html index a673fb36d6..b099bc42fb 100644 --- a/files/fr/learn/css/building_blocks/the_box_model/index.html +++ b/files/fr/learn/css/building_blocks/the_box_model/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite

        En CSS, tout élément est inclus dans une boîte ("box" en anglais). Comprendre le fonctionnement de ces boîtes est essentiel pour maîtriser la mise en page CSS ainsi que le positionement des éléments d'une page HTML. Dans cette leçon, nous verrons en détails le Modèle de Boîtes CSS - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes.

        -
        Prérequis:Notions de HTML (voir Introduction à HTML), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une idée du fonctionnement des CSS (voir Introduction aux CSS.)Notions de HTML (voir Introduction à HTML), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une idée du fonctionnement des CSS (voir Introduction aux CSS.)
        Objectif :
        +
        @@ -57,8 +57,8 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite

        Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur flex de la propriété display. Ainsi, si on donne la propriété display: flex; à un élément, son type de positionnement extérieur est "en bloc" (block), mais son type de positionnement intérieur est modifié en flex. Tout élément directement enfant de cette boîte se voit alors changé en élément flex, et sera mis en page selon les règles précisées dans les spécifications de Flexbox, dont on reparlera plus tard.

        -
        -

        Note : Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la Disposition en ligne et en bloc.

        +
        +

        Note : Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la Disposition en ligne et en bloc.

        Lorsque vous en apprendrez plus sur la mise en page en CSS, vous découvrirez une variété d'autres valeurs de positionnement intérieur pour une boîte, tel que flex, ou encore grid.

        @@ -127,8 +127,8 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite

        Illustration de la taille de la boîte lorsqu'on utilise le modèle de boîte standard.

        -
        -

        Note : La marge n'est pas comptabilisée dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc à la bordure et ne s'étend pas à la marge.

        +
        +

        Note : La marge n'est pas comptabilisée dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc à la bordure et ne s'étend pas à la marge.

        Le modèle de boîte CSS alternatif

        @@ -152,8 +152,8 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite box-sizing: inherit; } -
        -

        Note : Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !

        +
        +

        Note : Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !

        Manipuler les modèles de boîte

        @@ -164,8 +164,8 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite

        {{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}

        -
        -

        Note: vous pouvez trouver une solution ici.

        +
        +

        Note : vous pouvez trouver une solution ici.

        Utiliser les outils de développement pour voir le modèle de boîte

        diff --git a/files/fr/learn/css/building_blocks/values_and_units/index.html b/files/fr/learn/css/building_blocks/values_and_units/index.html index bf161a3abc..7542b9e2e5 100644 --- a/files/fr/learn/css/building_blocks/values_and_units/index.html +++ b/files/fr/learn/css/building_blocks/values_and_units/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Values_and_units

        Chaque propriété utilisée en CSS possède un type de valeur qui définit l'ensemble des valeurs autorisées pour cette propriété. Visiter des pages de propriétés sur MDN vous aidera à comprendre les valeurs associées à un type de valeur, qui sont valides pour une propriété particulière. Dans cette leçon, nous allons observer quelques-uns des types de valeur les plus fréquemment utilisés, ainsi que leurs valeurs et unités les plus communes.

        -
        Prérequis :
        +
        @@ -25,12 +25,12 @@ original_slug: Apprendre/CSS/Building_blocks/Values_and_units

        Dans les spécifications CSS et sur les pages de propriétés présentes sur MDN, vous pourrez identifier les types de valeurs, car ils sont entourés par des chevrons, tel que <color> ou <length>. Quand vous voyez le type de valeur <color>, valide pour une propriété particulière, cela signifie que vous pouvez utiliser n'importe quelle couleur valide comme valeur pour cette propriété, comme énoncé dans la page de référence de <color>.

        -
        -

        Note : Vous verrez également des valeurs CSS appelées types de données. Les termes sont interchangeables — Quand vous voyez quelque chose en CSS identifié comme type de données, c'est juste une façon différente de dire type de valeur. Le terme valeur se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser.

        +
        +

        Note : Vous verrez également des valeurs CSS appelées types de données. Les termes sont interchangeables — Quand vous voyez quelque chose en CSS identifié comme type de données, c'est juste une façon différente de dire type de valeur. Le terme valeur se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser.

        -
        -

        Note : Oui, les types de valeurs CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex : la propriété color, comparée au type de données <color>). Vous pourriez aussi être désorienté entre les types de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents.

        +
        +

        Note : Oui, les types de valeurs CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex : la propriété color, comparée au type de données <color>). Vous pourriez aussi être désorienté entre les types de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents.

        Dans l'exemple suivant, nous avons défini la couleur de notre titre en utilisant un mot-clé, et la couleur de fond en utilisant la fonction rgb() :

        @@ -289,9 +289,8 @@ original_slug: Apprendre/CSS/Building_blocks/Values_and_units

        Dans cet exemple, essayez de modifier les valeurs pour le canal alpha afin de voir comment la couleur est modifiée.

        -
        -

        Note :

        -

        Avec la spécification CSS Colors Level 4, rgba() est un alias pour rgb() et hsla() est un alias pour hsl() (voir ci-après). Pour les navigateurs qui implémentent ce standard, ces fonctions synonymes acceptent les mêmes paramètres et se comportent de la même façon. Essayez de modifier l'exemple qui précède pour passer de fonctions rgba() à des fonctions rgb() pour voir si les couleurs fonctionnent toujours. Le style que vous utiliserez ne dépend que de vous mais séparer les définitions de couleurs transparentes et de couleurs non-transparentes fournira une prise en charge navigateur (légèrement) meilleure tout en explicitant visuellement (dans votre code) où les couleurs transparentes sont définies.

        +
        +

        Note : Avec la spécification CSS Colors Level 4, rgba() est un alias pour rgb() et hsla() est un alias pour hsl() (voir ci-après). Pour les navigateurs qui implémentent ce standard, ces fonctions synonymes acceptent les mêmes paramètres et se comportent de la même façon. Essayez de modifier l'exemple qui précède pour passer de fonctions rgba() à des fonctions rgb() pour voir si les couleurs fonctionnent toujours. Le style que vous utiliserez ne dépend que de vous mais séparer les définitions de couleurs transparentes et de couleurs non-transparentes fournira une prise en charge navigateur (légèrement) meilleure tout en explicitant visuellement (dans votre code) où les couleurs transparentes sont définies.

        Valeurs HSL et HSLA

        diff --git a/files/fr/learn/css/css_layout/flexbox/index.html b/files/fr/learn/css/css_layout/flexbox/index.html index a151a1da09..17a2d6e00f 100644 --- a/files/fr/learn/css/css_layout/flexbox/index.html +++ b/files/fr/learn/css/css_layout/flexbox/index.html @@ -20,13 +20,13 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox
        {{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}
        -

        Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.

        +

        Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.

        -
        Prérequis :
        +
        - + @@ -37,7 +37,7 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox

        Pourquoi Flexbox ?

        -

        Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les flotteurs (boîtes flottantes) et le positionnement. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.

        +

        Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les flotteurs (boîtes flottantes) et le positionnement. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.

        Les simples exigences de mise en page suivantes sont difficiles si ce n'est impossibles à réaliser de manière pratique et souple avec ces outils :

        @@ -49,13 +49,13 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox

        Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu !

        -

        Voici un exemple simple

        +

        Voici un exemple simple

        Dans cet article, nous allons commenter une série d'exercices pour vous faciliter la compréhension du fonctionnement de flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — flexbox0.html de notre dépôt Github —, chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le voir en direct ici aussi.

        Qu'avons‑nous ? un élément {{htmlelement("header")}} avec un en‑tête de haut niveau à l'intérieur, et un élément {{htmlelement("section")}} contenant trois {{htmlelement("article")}}s. Nous allons les utiliser pour créer une disposition vraiment classique sur trois colonnes.

        -

        Échantillon d'utilisation de flexbox

        +

        Échantillon d'utilisation de flexbox

        Détermination des éléments à disposer en boîtes flexibles

        @@ -67,19 +67,19 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox

        Voici le résultat :

        -

        Échantillon d'utilisation de flexbox

        +

        Échantillon d'utilisation de flexbox

        Ainsi, cette unique déclaration donne tout ce dont nous avons besoin — incroyable, non ? Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale, et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci. On en reparlera plus tard.

        -

        Note : Vous pouvez aussi définir une valeur inline-flex pour  {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.

        +

        Note : Vous pouvez aussi définir une valeur inline-flex pour  {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.

        -

        Aparté sur le modèle flex

        +

        Aparté sur le modèle flex

        Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :

        -

        Terminologie pour les boîtes modulables

        +

        Terminologie pour les boîtes modulables

        • L'axe principal (main axis) est l'axe de la direction dans laquelle sont disposés les éléments flex (par exemple, horizontalement sur la page, ou verticalement de haut en bas de la page). Le début et la fin de cet axe sont appelés l'origine principale (main start) et la fin principale (main end).
          • @@ -101,14 +101,14 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox

          Cela dispose de nouveau les éléments en colonnes, comme c'était le cas avant l'ajout de la CSS. Avant de poursuivre, enlevez cette déclaration de l'exemple.

          -

          Note : Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs row-reverse et column-reverse. Expérimentez ces valeurs aussi !

          +

          Note : Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs row-reverse et column-reverse. Expérimentez ces valeurs aussi !

          Enveloppement

          Problème : quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Voyez l'exemple flexbox-wrap0.html, essayez directement (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) :

          -

          Débordement des éléments modulables

          +

          Débordement des éléments modulables

          Ici, nous voyons que les enfants débordent du conteneur. Une façon d'y remédier est d'ajouter la déclaration suivante à votre règle pour section :

          @@ -116,7 +116,7 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox

          Essayons ; la disposition est bien meilleure avec cet ajout :

          -

          Conditionnement des éléments modulablesNous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration flex: 200px pour les éléments article signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.

          +

          Conditionnement des éléments modulablesNous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration flex: 200px pour les éléments article signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.

          Mais nous pouvons faire plus ici. Tout d'abord, essayez de changer la valeur de la propriété {{cssxref("flex-direction")}} en row-reverse — maintenant vous avez toujours la disposition sur plusieurs lignes, mais elles commencent dans l'angle opposé de la fenêtre du navigateur et se disposent à l'envers.

          @@ -165,7 +165,7 @@ article:nth-of-type(3) {

          Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti.

          -

          Modulation de la largeur

          +

          Modulation de la largeur

          Le véritable intérêt de flexbox apparaît dans sa souplesse et sa réactivité — si vous redimensionnez la fenêtre du navigateur ou ajoutez un autre élément {{htmlelement("article")}}}, la mise en page continue de fonctionner correctement.

          @@ -185,7 +185,7 @@ article:nth-of-type(3) {

          Vous pouvez également utiliser les fonctionnalités de flexbox pour aligner les éléments flex le long de l'axe principal ou croisé. Voyons cela avec un nouvel exemple — flex-align0.html (voir aussi en direct). Nous allons le transformer facilement en une barre souple de boutons. Actuellement, nous avons une barre de menu horizontale avec quelques boutons tassés dans l'angle supérieur gauche.

          -

          Alignement

          +

          Alignement

          D'abord, faites une copie locale de cet exemple.

          @@ -256,7 +256,7 @@ article:nth-of-type(3) {

          Il est possible de créer des mises en page joliment complexes avec flexbox. Il est parfaitement loisible de déclarer un élément flex en tant que conteneur flex, de sorte que ses enfants sont également disposés en tant que boîtes modulables. Regardez complex-flexbox.html (à voir en direct également).

          -

          Imbrications avec flexbox

          +

          Imbrications avec flexbox

          Le HTML pour cela est vraiment simple. Voici un élément {{htmlelement("section")}} contenant trois éléments {{htmlelement("article")}}. Le troisième élément {{htmlelement("article")}} contient trois éléments {{htmlelement("div")}}. Le premier élément {{htmlelement("div")}} contient cinq éléments {{htmlelement("button")}}  :

          @@ -316,7 +316,7 @@ article:nth-of-type(3) {

          Flexbox est une fonctionnalité plus complexe que les règles CSS courantes. Par exemple, une absence de prise en charge des ombres portées dans les CSS laissera le site utilisable. Mais la non prise en charge des fonctionnalités flexbox risque de casser totalement la mise en page, et de rendre le site inutilisable.

          -

          Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module Tests croisés sur navigateurs.

          +

          Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module Tests croisés sur navigateurs.

          Résumé

          @@ -328,15 +328,15 @@ article:nth-of-type(3) {

          Dans ce module

          diff --git a/files/fr/learn/css/css_layout/flexbox_skills/index.html b/files/fr/learn/css/css_layout/flexbox_skills/index.html index d46a7b5f55..4e473510b9 100644 --- a/files/fr/learn/css/css_layout/flexbox_skills/index.html +++ b/files/fr/learn/css/css_layout/flexbox_skills/index.html @@ -10,8 +10,8 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills

          Le but de cette tâche est de vous faire travailler avec Flexbox et de démontrer votre compréhension du comportement des éléments flexibles. Vous trouverez ci-dessous quatre modèles de conception courants que vous pourriez utiliser pour créer avec Flexbox, votre tâche est de les construire.

          -
          -

          Note: You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.
          +

          +

          Note : You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.

          If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.

          @@ -20,21 +20,21 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills

          Ces éléments de liste constituent la navigation pour un site. Ils doivent être disposés en ligne, avec un espace égal entre chaque élément. L'exemple fini doit ressembler à l'image ci-dessous.

          -

          Flex items laid out as a row with space between them.

          +

          Flex items laid out as a row with space between them.

          Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

          {{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}

          -
          -

          For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

          +
          +

          Note : For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

          Flex Layout Two

          Ces éléments de liste sont tous de tailles différentes, mais nous voulons qu'ils soient affichés sous forme de trois colonnes de taille égale, quel que soit le contenu de chaque élément.

          -

          Flex items laid out as three equal size columns with different amounts of content.

          +

          Flex items laid out as three equal size columns with different amounts of content.

          Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

          @@ -46,22 +46,22 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills
        • Pouvez-vous maintenant faire en sorte que le premier article soit deux fois plus grand que les autres ?
        -
        -

        For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

        +
        +

        Note : For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

        Flex Layout Three

        Il y a deux éléments dans le HTML ci-dessous, une div avec une classe .parent qui contient une autre div avec une classe .child. Utilisez Flexbox pour centrer le fichier enfant à l'intérieur du parent.

        -

        A box centered inside another box.

        +

        A box centered inside another box.

        Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

        {{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}

        -
        -

        For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

        +
        +

        Note : For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

        Flex Layout Four

        @@ -69,14 +69,14 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills

        Dans cette dernière tâche, placez ces éléments en lignes comme dans l'image.
         

        -

        A set of items displayed as rows.

        +

        A set of items displayed as rows.

        Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

        {{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 800)}}

        -
        -

        For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

        +
        +

        Note : For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

        Assessment or further help

        diff --git a/files/fr/learn/css/css_layout/floats/index.html b/files/fr/learn/css/css_layout/floats/index.html index ffcc762cea..386185ea62 100644 --- a/files/fr/learn/css/css_layout/floats/index.html +++ b/files/fr/learn/css/css_layout/floats/index.html @@ -20,9 +20,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats
        {{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}
        -

        À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété float est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article.

        +

        À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété float est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article.

        -
        Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS).Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS).
        Objectif :
        +
        @@ -37,9 +37,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats

        Contexte de boîtes flottantes

        -

        La propriété float a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal.

        +

        La propriété float a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal.

        -

        Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de float s'est élargie. Notre exemple de paragraphe élégant vu plus haut dans le cours montre comment vous pouvez utiliser float pour créer une lettrine.

        +

        Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de float s'est élargie. Notre exemple de paragraphe élégant vu plus haut dans le cours montre comment vous pouvez utiliser float pour créer une lettrine.

        Les boîtes flottantes ont été couramment utilisées pour créer des mises en page complètes de sites web avec plusieurs colonnes d'informations flottant les unes à côté des autres (le comportement par défaut est une superposition des contenus, dans le même ordre que dans le code source). De nouvelles techniques de mises en page bien meilleures sont disponibles, nous les avons déjà vues dans ce module, et l'utilisation des boîtes flottantes à cette fin doit être considérée comme une technique du passé.

        @@ -51,11 +51,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats

        Tout d'abord, commençons  avec un HTML simple — ajoutez le code ci-dessous dans l'élément body en supprimant tout ce qu'il y avait avant :

        - - 
        <h1>Exemple simple de boîte flottante</h1>
 
-<img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille">
+<img src="butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille">
 
 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
 
@@ -92,11 +90,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats
 
 
        Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit:
        
 
-
        
-
-
        
 
-
        {{ EmbedLiveSample('Float_1', '100%', 500) }}
        
+
        {{ EmbedLiveSample('Faire_flotter_la_boîte', '100%', 500) }}
        
 
 
        Voyons comment fonctionne la boîte flottante — l'élément possèdant la propriété float (l'élément box dans notre cas) est retiré du cours normal de  la mise en page du document et collé du côté gauche (left) de son conteneur parent ({{htmlelement("body")}}, dans ce cas). Tout contenu disposé après l'élément flottant dans le cours normal de la mise en page (c'est à dire disposé à la suite dans le code source) va maintenant l'envelopper en remplissant l'espace sur sa droite sur toute sa hauteur. Là, ça s'arrête.
        
 
@@ -142,13 +138,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats
 }
        -

        Pour mieux visualiser l'effet, modifiez margin-right de la boîte flottante en margin de façon à avoir le même espace tout autour de la boîte flottante. Vous verrez l'arrière-plan du paragraphe juste au dessous de la boîte flottante comme dans l'exemple ci-dessous :

        +

        Visualiser le flottement

        -
        - -
        -

        {{ EmbedLiveSample('Float_2', '100%', 500) }}

        +

        {{ EmbedLiveSample('Visualiser_le_flottement', '100%', 500) }}

        Les lignes du paragraphe  suivant la boîte flottante  ont été raccourcies pour que le texte entoure cette boîte, mais comme elle a été sortie du cours normal, la boîte du contenu du paragraphe reste sur toute la largeur du conteneur.

        @@ -199,10 +191,6 @@ original_slug: Apprendre/CSS/CSS_layout/Floats } -
        - -
        -

        {{ EmbedLiveSample('Float_3', '100%', 600) }}

        +

        {{ EmbedLiveSample('Dégagement_des_boîtes_flottantes', '100%', 600) }}

        Vous verrez que le paragraphe suivant s'est dégagé de l'élément flottant et ne remonte plus à côté de ce dernier. La propriété  clear accepte les valeurs suivantes :

        @@ -267,13 +253,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats color: #fff; } -

        Comme dans l'exemple où nous avons mis un arrière‑plan au paragraphe, vous voyez que la couleur d'arrière‑plan s'étale derrière la boîte flottante.

        +

        Le problème

        -
        - -
        -

        {{ EmbedLiveSample('Float_4', '100%', 600) }}

        +

        {{ EmbedLiveSample('Le_problème', '100%', 600) }}

        Encore une fois, c'est parce que la boîte flottante a été retirée du cours normal de l'affichage. Dégager l'élément suivant ne résout pas ce problème où vous voulez que la boîte d'emballage de l'élément flottant et le contenu textuel , même court, arrive au bas de l'élément flottant. Il y a trois façons possibles de résoudre ce problème, deux fonctionnant avec tous les navigateurs — mais relevant un peu de la débrouille — et une troisième, nouvelle, permettant de faire face à cette situation proprement.

        @@ -328,11 +310,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats

        Maintenant actualisez la page et la boîte est dégagée. C'est pratiquement la même chose que si vous aviez ajouté un élément HTML tel que <div> en dessous avec la règle clear: both.

        -
        - -
        -

        {{ EmbedLiveSample('Float_5', '100%', 600) }}

        +

        {{ EmbedLiveSample('Le_«_clearfix_hack_»', '100%', 600) }}

        Utilisation du débordement

        @@ -389,11 +365,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats overflow: auto; } -
        - -
        -

        {{ EmbedLiveSample('Float_6', '100%', 600) }}

        +

        {{ EmbedLiveSample('Utilisation_du_débordement', '100%', 600) }}

        Cet exemple fonctionne en créant ce que l'on appelle un block formatting context (BFC) (contexte de formatage de bloc). C'est comme une mini composition à l'intérieur de la page, composition dans laquelle tout est contenu ; l'élément flottant est contenu à l'intérieur de la BFC et l'arrière-plan est derrière les deux éléments. Cela fonctionne en règle générale, mais dans certains cas, vous pourriez avoir des barres de défilement indésirables ou des ombres découpées en raison des conséquences involontaires de l'utilisation du débordement.

        @@ -445,11 +415,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats display: flow-root; } -
        - -
        -

        {{ EmbedLiveSample('Float_7', '100%', 600) }}

        +

        {{ EmbedLiveSample('«_display_flow-root_»', '100%', 600) }}

        Résumé

        -

        Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les Méthodes anciennes de mise en page pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens.

        +

        Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les Méthodes anciennes de mise en page pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens.

        {{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}

        Dans ce module

        diff --git a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html index 05f16693ae..3694a00968 100644 --- a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html +++ b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html @@ -6,77 +6,77 @@ original_slug: Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension ---
        {{LearnSidebar}}
        -

        Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.

        +

        Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.

        -
        Prérequis :
        +
        - - + + - - + +
        Conditions préalables:Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.Conditions préalables:Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.
        Objectif:Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.Objectif:Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.
        -

        dossier de projet

        +

        dossier de projet

        -

        Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintenant créer une mise en page pour la conception, qui devrait ressembler à l'image ci-dessous.

        +

        Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintenant créer une mise en page pour la conception, qui devrait ressembler à l'image ci-dessous.

        -

        +

        -

        configuration de base

        +

        configuration de base

        -

        Vous pouvez télécharger le code HTML, CSS et un ensemble de six images ici .

        +

        Vous pouvez télécharger le code HTML, CSS et un ensemble de six images ici .

        -

        Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé images. Ouvrir le index.htmlfichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous.

        +

        Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé images. Ouvrir le index.htmlfichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous.

        -

        Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal.

        +

        Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal.

        -

        +

        -

        Votre section detâches

        +

        Votre section de tâches

        -

        Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:

        +

        Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:

        -
          -
        1. Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.
          2. -
        2. La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint.
          3. -
        3. L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.
          4. -
        4. Les éléments <article>et <aside>doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.
          5. -
        5. Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.
          6. +
            +
          1. Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.
            2. +
          2. La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint.
            3. +
          3. L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.
            4. +
          4. Les éléments <article>et <aside>doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.
            5. +
          5. Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.
          -

          Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:

          +

          Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:

          -
            -
          • Positionnement
            • -
          • Flotte
            • -
          • Flexbox
            • -
          • CSS Grid Layout
            • +
              +
            • Positionnement
              • +
            • Flotte
              • +
            • Flexbox
              • +
            • CSS Grid Layout
            -

            Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses. Essayez différentes approches et voyez laquelle fonctionne le mieux. Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le canal IRC #mdn .

            +

            Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses. Essayez différentes approches et voyez laquelle fonctionne le mieux. Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le canal IRC #mdn .

            Evaluation

            -

            Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le fil de discussion relatif à cet exercice ou sur le canal IRC #mdn sur Mozilla IRC . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!

            - -

            Dans ce module Section

            - -
              -
            • Introduction à la mise en page CSS
              • -
            • Débit normal
              • -
            • Flexbox
              • -
            • la grille
              • -
            • Flotteurs
              • -
            • Positionnement
              • -
            • Mise en page à plusieurs colonnes
              • -
            • Conception sensible
              • -
            • Guide du débutant aux questions des médias
              • -
            • Méthodes de mise en page héritées
              • -
            • Soutenir les anciens navigateurs
              • -
            • Évaluation fondamentale de la compréhension de la mise en page.
              • +

              Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le fil de discussion relatif à cet exercice ou sur le canal IRC #mdn sur Mozilla IRC . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!

              + +

              Dans ce module Section

              + + diff --git a/files/fr/learn/css/css_layout/grids/index.html b/files/fr/learn/css/css_layout/grids/index.html index 272858a9e8..6a0d5da4ad 100644 --- a/files/fr/learn/css/css_layout/grids/index.html +++ b/files/fr/learn/css/css_layout/grids/index.html @@ -22,13 +22,13 @@ original_slug: Apprendre/CSS/CSS_layout/Grids
              {{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
              -

              « CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame.

              +

              « CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame.

              - +
              - + @@ -43,7 +43,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids

              La trame est constituée généralement de rangées (colonnes ou lignes). L'espace entre chaque ligne ou colonne est communément appelé gouttière.

              -

              Schéma du quadrillage

              +

              Schéma du quadrillage

              Création d'une trame CSS

              @@ -70,11 +70,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids

              Ajoutons cette déclaration dans nos règles CSS, puis actualisons la page : nous voyons que les éléments ont été arrangés et placés chacun dans une cellule du quadrillage ainsi créé.

              -
              - -
              -

              {{ EmbedLiveSample('Grid_1', '100%', 400) }}

              +

              {{ EmbedLiveSample('Définition_dune_trame', '100%', 400) }}

              Trames adaptables avec l'unité « fr »

              @@ -127,11 +121,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids

              La première chaîne obtient 2fr de l'espace disponible et les deux autres 1fr ; la première chaîne sera plus large. Il est possible de mélanger des unités fr et des largeurs fixes pour les chaînes — dans ce cas, l'espace nécessaire aux chaînes de largeur fixée est réservé avant la distribution proportionnelle de l'espace restant aux autres chaînes.

              -
              - -
              -

              {{ EmbedLiveSample('Grid_2', '100%', 400) }}

              +

              {{ EmbedLiveSample('Trames_adaptables_avec_lunité_«_fr_»', '100%', 400) }}

              -

              Note : L'unité fr distribue l'espace disponible, et non sa totalité. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.

              +

              Note : L'unité fr distribue l'espace disponible, et non sa totalité. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.

              Espaces entre pistes

              @@ -181,11 +169,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids

              Ces espacements peuvent être définis avec n'importe quelle unité de longueur ou un pourcentage, mais pas avec l'unité fr.

              -
              -
              Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS et Styles de boîtes).Les fondamentaux du HTML (étudiez Introduction au HTML) et une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS et Styles de boîtes).
              Objectif :
              +
              @@ -74,7 +74,7 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction

              Les éléments disposés en empilement sont désignés comme étant des éléments blocs, par opposition aux éléments en ligne qui apparaissent l'un après l'autre telle la succession de mots distincts d'un paragraphe.

              -

              Note: « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.

              +

              Note : « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.

              Lorsque vous utilisez les CSS pour faire une mise en page, vous déplacez les éléments de leur cours normal ; toutefois, pour la plupart des éléments de la page, ce cours normal crée exactement la mise en page dont vous avez besoin. C'est pourquoi il est si important de commencer avec un document HTML bien structuré, car vous pouvez alors travailler la façon dont les choses seront disposées par défaut au lieu de lutter contre cette disposition.

              @@ -82,11 +82,11 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction

              Les méthodes des CSS pouvant changer le placement des éléments sont les suivantes :

                -
              • La propriété {{cssxref("display")}} — les valeurs standards comme block, inline ou inline-block peuvent changer la manière dont l'élément se comporte dans le cours normal (voir Types de boîtes pour plus d'informations). Ensuite, nous disposons de méthodes de mise en page autonomes activées par l'intermédiaire d'une valeur de display, par exemple les Grilles CSS ou Flexbox.
                • +
              • La propriété {{cssxref("display")}} — les valeurs standards comme block, inline ou inline-block peuvent changer la manière dont l'élément se comporte dans le cours normal (voir Types de boîtes pour plus d'informations). Ensuite, nous disposons de méthodes de mise en page autonomes activées par l'intermédiaire d'une valeur de display, par exemple les Grilles CSS ou Flexbox.
              • Flotteurs — appliquer à {{cssxref("float")}} une valeur comme left peut créer une juxtaposition d'un élément bloc à côté d'un autre, tout comme les images « baignent » dans le texte dans les mises en page de magazines.
              • La propriété {{cssxref("position")}} — vous permet de contrôler avec précision le placement de boîtes dans d'autres boîtes. static est le placement par défaut dans le cours, mais vous pouvez manipuler les éléments pour qu'ils se comportent différemment à l'aide d'autres valeurs, par exemple en les fixant en haut à gauche de la fenêtre d'affichage du navigateur.
              • Mise en page de tableaux — les fonctions conçues pour styliser les parties d'un tableau HTML peuvent être utilisées sur des éléments non tableau en utilisant display: table et les propriétés associées.
                • -
              • Mise en page sur plusieurs colonnes — Les propriétés Multi-column peuvent faire qu'un contenu bloc soit disposé en colonnes, comme dans un journal.
                • +
              • Mise en page sur plusieurs colonnes — Les propriétés Multi-column peuvent faire qu'un contenu bloc soit disposé en colonnes, comme dans un journal.

              La propriété « display »

              @@ -99,17 +99,15 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction

              Flexbox

              -

              Flexbox est l'abréviation pour Flexible Box Layout Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser flexbox, appliquez display: flex à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments flex. Voyons cela avec un simple exemple.

              +

              Flexbox est l'abréviation pour Flexible Box Layout Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser flexbox, appliquez display: flex à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments flex. Voyons cela avec un simple exemple.

              Le balisage HTML ci-dessous crée un élément conteneur de la classe wrapper, dans lequel nous plaçons 3 éléments {{htmlelement("div")}}. Par défaut ces éléments s'afficheront en tant qu'éléments blocs, les uns sous les autres, dans ce document en langue française.

              -

              Mais nous ajoutons display: flex sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des éléments flex et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est row. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est stretch. Ce qui signifie que les éléments se casent dans la hauteur du conteneur flex défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace.

              +

              Utiliser display: flex

              -
              - 
              .wrapper {
   display: flex;
@@ -130,19 +127,16 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction
   <div class="box3">Trois</div>
 </div>
              -
              -

              {{ EmbedLiveSample('Flex_1', '300', '200') }}

              +

              {{ EmbedLiveSample('Utiliser_display_flex', '300', '200') }}

              + +

              Définir la propriété flex

              En plus des propriétés ci-dessus applicables au conteneur flex, il existe des propriétés applicables aux éléments flex. Ces propriétés, entre autres choses, peuvent changer le mode d'adaptation des éléments, leur permettant de s'étaler et de se resserrer pour s'adapter à l'espace disponible.

              À titre d'exemple, nous pouvons donner la valeur 1 à la propriété {{cssxref("flex")}} des éléments enfants. Tous les éléments vont grandir jusqu'à remplir le conteneur, au lieu de laisser de l'espace à la suite. S'il y a assez d'espace, les éléments vont devenir plus larges ; s'il y en a moins ils vont devenir plus étroits. En outre, si vous ajoutez un autre élément au balisage, les éléments vont rapetisser pour lui faire de la place — ils ajusteront leur taille pour prendre la même quantité d'espace, quel qu'il soit.

              -
              - 
              .wrapper {
     display: flex;
@@ -167,12 +160,11 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction
     <div class="box3">Trois</div>
 </div>
              -
              -

              {{ EmbedLiveSample('Flex_2', '300', '200') }}

              +

              {{ EmbedLiveSample('Définir_la_propriété_flex', '300', '200') }}

              -

              Note : Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur Flexbox.

              +

              Note : Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur Flexbox.

              Disposition en trame

              @@ -181,11 +173,9 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction

              À nouveau, vous basculez en disposition tramée en donnant une valeur appropriée à display — display: grid. L'exemple ci-dessous utilise un balisage semblable à celui de l'exemple flex : un conteneur et quelques éléments enfants. Outre display: grid, nous définissons une trame de placement sur le parent avec les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}. Nous avons défini trois colonnes de 1fr chacune et deux lignes de 100px. Il n'est pas nécessaire de mettre de règles sur les éléments enfants ; il seront automatiquement placés dans les cellules de trame créées.

              -
              - 
              .wrapper {
     display: grid;
@@ -212,17 +201,14 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction
     <div class="box6">Six</div>
 </div>
              -
              -

              {{ EmbedLiveSample('Grid_1', '300', '330') }}

              +

              {{ EmbedLiveSample('Utiliser_display_grid', '300', '330') }}

              -

              Une fois la trame créée, vous pouvez y placer explicitement les éléments au lieu de compter sur le placement automatique. Dans ce second exemple ci‑dessous nous avons défini la même trame, mais cette fois avec trois éléments enfants. Nous avons défini début et fin de ligne pour chaque élément avec les propriétés {{cssxref("grid-column")}} et {{cssxref("grid-row")}}. Les éléments occupent alors plusieurs trames.

              +

              Placer des objets sur la grille

              -
              - 
              .wrapper {
     display: grid;
@@ -263,10 +248,10 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction
              -

              {{ EmbedLiveSample('Grid_2', '300', '330') }}

              +

              {{ EmbedLiveSample('Placer_des_objets_sur_la_grille', '300', '330') }}

              -

              Note : Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article Disposition tramée.

              +

              Note : Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article Disposition tramée.

              La suite de ce guide porte sur d'autres méthodes de mise en page. Elles ont moins d'importance pour la structure générale de la mise en page, mais peuvent tout de même vous aider à réaliser des tâches spécifiques. En comprenant la nature de chaque tâche de mise en page, vous découvrez rapidement, en regardant un composant particulier de votre design, que le type de mise en page le plus adapté est souvent évident.

              @@ -286,11 +271,7 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction

              Dans l'exemple ci‑dessous nous faisons flotter un élément <div> à gauche avec un valeur pour la propriété {{cssxref("margin")}} sur la droite pour éloigner le texte de l'élément. Cela donne un effet de texte enveloppant cette boîte. C'est l'essentiel de ce qu'il faut savoir à propos des boîtes flottantes dans le design du web moderne.

              -
              - 
              <h1>Exemple simple de boîte flottante</h1>
 
@@ -326,12 +306,11 @@ p {
     margin-right: 30px;
 }
              -
              -

              {{ EmbedLiveSample('Float_1', '100%', 600) }}

              +

              {{ EmbedLiveSample('Flotteurs_boîtes_flottantes', '100%', 600) }}

              -

              Note : Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés float et clear. Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les Méthodes de mise en page traditionnelles.

              +

              Note : Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés float et clear. Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les Méthodes de mise en page traditionnelles.

              Techniques de positionnement

              @@ -394,17 +373,13 @@ p {

              Ajouter ce code donne le résultat suivant :

              -
              - 
              .positioned {
   position: relative;
@@ -426,9 +400,8 @@ p {
   top: 30px;
   left: 30px;
 }
              -
              -

              {{ EmbedLiveSample('Relative_1', '100%', 300) }}

              +

              {{ EmbedLiveSample('Positionnement_relatif', '100%', 300) }}

              Positionnement absolu

              @@ -444,17 +417,13 @@ p {

              Ici pour notre paragraphe médian, nous donnons à la propriété {{cssxref("position")}} la valeur absolute et les mêmes valeurs aux propriétés {{cssxref("top")}} et {{cssxref("left")}} que précédemment. Ajouter ce code, cependant, donnera le résultat suivant :

              -
              - 
              .positioned {
   position: absolute;
@@ -476,11 +444,10 @@ p {
   top: 30px;
   left: 30px;
 }
              -
              -

              {{ EmbedLiveSample('Absolute_1', '100%', 300) }}

              +

              {{ EmbedLiveSample('Positionnement_absolu', '100%', 300) }}

              -

              C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le positionnement.

              +

              C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le positionnement.

              Positionnement fixé

              @@ -497,11 +464,7 @@ p { <p>Paragraphe 3.</p> -
              - 
              .positioned {
     position: fixed;
     top: 30px;
     left: 30px;
 }
              -
              -

              {{ EmbedLiveSample('Fixed_1', '100%', 200) }}

              +

              {{ EmbedLiveSample('Positionnement_fixé', '100%', 200) }}

              Positionnement collant

              Le positionnement collant est la dernière méthode de positionnement à notre disposition. Elle mélange le positionnement statique par défaut avec le positionnement fixé. Lorsqu'un élément a la propriété position: sticky, il défile dans le cours normal jusqu'à atteindre un décalage défini de la fenêtre de vue. A ce moment-là, il est « collé » comme si position: fixed lui était appliqué.

              -
              - 
              .positioned {
   position: sticky;
   top: 30px;
   left: 30px;
 }
              -
              -

              {{ EmbedLiveSample('Sticky_1', '100%', 200) }}

              +

              {{ EmbedLiveSample('Positionnement_collant', '100%', 200) }}

              -

              Note : pour plus de précisions à propos du positionnement, voir l'article Positionnement.

              +

              Note : pour plus de précisions à propos du positionnement, voir l'article Positionnement.

              Les tableaux CSS

              @@ -670,11 +625,7 @@ form p {

              Noux utilisons une propriété column-width de valeur 200 pixels pour ce conteneur ; le navigateur crée autant de colonnes de 200 pixels de large qu'il est possible de faire entrer dans le conteneur, puis il partage l'espace restant entre les colonnes crées.

              -
              - + 
                  .container {
         column-width: 200px;
     }
              -
              -

              {{ EmbedLiveSample('Multicol_1', '100%', 200) }}

              +

              {{ EmbedLiveSample('Disposition_sur_plusieurs_colonnes', '100%', 200) }}

              Résumé

              @@ -706,12 +655,12 @@ form p { diff --git a/files/fr/learn/css/css_layout/legacy_layout_methods/index.html b/files/fr/learn/css/css_layout/legacy_layout_methods/index.html index f4777dd68d..e78ffa385a 100644 --- a/files/fr/learn/css/css_layout/legacy_layout_methods/index.html +++ b/files/fr/learn/css/css_layout/legacy_layout_methods/index.html @@ -17,9 +17,9 @@ original_slug: Apprendre/CSS/CSS_layout/Legacy_Layout_Methods

              {{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

              -

              Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page  étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien.

              +

              Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page  étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien.

              -
              Prérequis :
              +
              @@ -93,11 +93,9 @@ div:nth-of-type(2) {

              En mettant tout ensemble, voici le résultat :

              -
              - -
              -

              {{ EmbedLiveSample('Floated_Two_Col', '100%', 520) }}

              +

              {{ EmbedLiveSample('Exemple_complet', '100%', 520) }}

              Notez que nous avons utilisé des pourcentages pour définir les largeurs — c'est la bonne stratégie, cela crée une disposition fluide, s'ajustant à diverses tailles d'écran et gardant les mêmes proportions pour les tailles d'écran plus petites. Modifiez la taille de la fenêtre du navigateur pour voir par vous‑même. C'est un outil adapté au désign web adaptatif.

              -

              Note : Vous pouvez voir cet exemple en cours à la page 0_two-column-layout.html (voyez aussi son  code source).

              +

              Note : Vous pouvez voir cet exemple en cours à la page 0_two-column-layout.html (voyez aussi son  code source).

              Ancienne création d'un cadre de trames

              -

              La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le dégagement des boîtes flottantes.

              +

              La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le dégagement des boîtes flottantes.

              Le type de cadre de trames le plus facile à créer est un cadre de largeur fixe — il faut simplement déterminer la largeur totale du désign, le nombre de colonnes voulues et la largeur des gouttières et des colonnes. Si nous décidons plutôt de disposer ce design sur une trame avec des colonnes s'adaptant à la largeur de vue du navigateur, nous devrons  calculer les pourcentages de largeur des colonnes et celui des gouttières entre colonnes.

              @@ -176,7 +172,7 @@ div:nth-of-type(2) {

              Le but est d'en faire une trame de démonstration sur deux lignes à partir des 12 colonnes — la ligne haute montre la taille de colonnes prises isolément, la ligne basse montre des zones de taille différentes à partir de cette trame.

              -

              +

              À l'élément {{htmlelement("style")}}, ajoutons le code ci-après. Il donne une largeur de 980 pixels au conteneur enveloppe avec un remplissage de 20 pixels du côté droit. Cela nous laisse 960 pixels comme largeur totale pour les colonnes et les gouttières — dans ce cas, le remplissage est soustrait à la largeur totale du contenu car nous avons fixé la valeur de  {{cssxref("box-sizing")}} à border-box sur tous les éléments du site (voir Modification totale du modèle de boîte pour plus d'explications).

              @@ -217,7 +213,7 @@ body {

              La ligne supérieure des colonnes unitaires est maintenant disposées en tant que trame.

              -

              Note : Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune.

              +

              Note : Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune.

              Les conteneurs destinés à accueillir plusieurs colonnes doivent être d'une classe spéciale pour pouvoir ajuster leurs valeurs {{cssxref("width")}} en fonction du nombre de colonnes requis (plus les gouttières intermédiaires). Nous devons créer une classe supplémentaire pour permettre aux conteneurs de s'étendre de 2 à 12 colonnes. Cette largeur est le résultat de l'addition de la largeur de toutes les colonnes plus les largeurs des gouttières dont le nombre est toujours inférieur de 1 au nombre de colonnes.

              @@ -242,7 +238,7 @@ body {

              Une fois ces classes crées, nous pouvons disposer des colonnes de largeur différentes sur la trame. Enregistrez et chargez cette page dans le navigateur pour voir l'effet.

              -

              Note : Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre version terminée sur GitHub (la voir aussi en fonctionnement direct).

              +

              Note : Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre version terminée sur GitHub (la voir aussi en fonctionnement direct).

              Modifiez les classes de vos éléments soit en ajoutant ou retirant certains conteneurs, pour voir comment faire varier la disposition. Par exemple, vous pouvez faire en sorte que la deuxième ligne ressemble à ceci :

              @@ -323,12 +319,12 @@ body {

              Maintenant enregistrez le code, chargez le dans le navigateur et modifiez la largeur de vue — vous devez constater que la largeur des colonnes s'ajuste comme il convient.

              -

              Note : Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre version terminée sur GitHub (voir aussi celle s'exécutant en direct).

              +

              Note : Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre version terminée sur GitHub (voir aussi celle s'exécutant en direct).

              Faciliter les calculs avec la fonction calc()

              -

              Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir cet exemple dans le didacticiel MediaRecorder API.

              +

              Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir cet exemple dans le didacticiel MediaRecorder API.

              Revenon à nos trames ! Toute colonne se développant au delà de la première a une largeur totale de 6.25% multipliée par le nombre de colonnes précédentes plus 2.08333333% multiplié par le nombre de gouttières (qui doit toujours être égal au nombre de colonnes moins 1). La fonction calc() nous permet de faire ce calcul dans la valeur width même, ainsi pour tout élément au-delà de la colonne 4 nous pouvons écrire, par exemple :

              @@ -351,11 +347,11 @@ body { .col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }
              -

              Note : Vous pouvez voir la version terminée dans fluid-grid-calc.html (la voir aussi  en direct).

              +

              Note : Vous pouvez voir la version terminée dans fluid-grid-calc.html (la voir aussi  en direct).

              -

              Note : Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction calc(), même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9.

              +

              Note : Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction calc(), même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9.

              Systèmes de trames « sémantiques » vs. « non sémantiques »

              @@ -369,7 +365,7 @@ body { }
              -

              Note : Si vous deviez utiliser un préprocesseur tel que Sass, vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous.

              +

              Note : Si vous deviez utiliser un préprocesseur tel que Sass, vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous.

              Décalage du conteneur d'une trame

              @@ -401,15 +397,15 @@ body { 
              <div class="col span5 offset-by-one">14</div>
              -

              Note : Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage !

              +

              Note : Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage !

              Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple fluid-grid-offset.html (voir aussi l'exécution directement). L'exemple terminé doit ressembler à ceci :

              -

              +

              -

              Note : Comme exercice supplémentaire, pouvez‑vous implémenter une classe offset-by-two ?

              +

              Note : Comme exercice supplémentaire, pouvez‑vous implémenter une classe offset-by-two ?

              Limitations des trames de boîtes flottantes

              @@ -457,7 +453,7 @@ body {

              Sur la ligne haute, nous disposons de douze boîtes nettes sur la trame et elle s'élargissent ou s'étrécissent de manière égale quand nous modifions la largeur de la vue. Sur la ligne suivante, toutefois, nous n'avons que quatre éléments et ceux-ci s'élargissent ou s'étrécissent à partir de la base de 60px. Avec seulement quatre d'entre eux ils peuvent s'élargir un peu plus que les éléments de la ligne au‑dessus, le résultat étant qu'ils occupent tous la même largeur sur la deuxième ligne.

              -

              +

              Pour corriger cela, nous avons encore besoin d'inclure les classes span pour donner une largeur qui remplave la valeur donnée par flex-basis pour cet élément.

              @@ -485,7 +481,7 @@ body {

              Skeleton inclut plus qu'un système de grille — il contient aussi des CSS pour la typographie et autres éléments de page que vous pouvez utiliser comme point de départ. Toutefois nous les laisserons de côté pour l'instant — c'est la trame qui nous interesse pour le moment.

              -

              Note : Normalize est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs.

              +

              Note : Normalize est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs.

              Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML :

              @@ -553,7 +549,7 @@ body {

              Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne.

              -

              Note : Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier html-skeleton-finished.html (à voir aussi  en exécution directe).

              +

              Note : Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier html-skeleton-finished.html (à voir aussi  en exécution directe).

              Si vous regardez dans le fichier skeleton.css vous verrez comment cela fonctionne. Par exemple, Skeleton prédéfinit ce qui suit pour styler des éléments de la classe « three columns » que l'on ajouterait.

              @@ -573,14 +569,14 @@ body {

              Dans ce module

              diff --git a/files/fr/learn/css/css_layout/media_queries/index.html b/files/fr/learn/css/css_layout/media_queries/index.html index 552d1982df..f629d17eb3 100644 --- a/files/fr/learn/css/css_layout/media_queries/index.html +++ b/files/fr/learn/css/css_layout/media_queries/index.html @@ -8,11 +8,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries

              The CSS Media Query gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.

              -
              Prérequis:
              +
              - + @@ -50,22 +50,22 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries

              The following media query will only set the body to 12pt if the page is printed. It will not apply when the page is loaded in a browser.

              -
              @media print {
+
              @media print {
     body {
         font-size: 12pt;
     }
-}
              
+}
              -
              -

              Note: the media type here is different from the so-called {{glossary("MIME type")}}.

              +
              +

              Note : the media type here is different from the so-called {{glossary("MIME type")}}.

              -
              -

              Note: there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided.

              +
              +

              Note : there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided.

              -
              -

              Note: Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types.

              +
              +

              Note : Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types.

              Media feature rules

              @@ -78,37 +78,37 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries

              These features are used to create layouts that respond to different screen sizes. For example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query.

              -
              @media screen and (width: 600px) {
+
              @media screen and (width: 600px) {
     body {
         color: red;
     }
-}
              
+}

              Open this example in the browser, or view the source.

              The width (and height) media features can be used as ranges, and therefore be prefixed with min- or max- to indicate that the given value is a minimum, or a maximum. For example, to make the color blue if the viewport is narrower than 400 pixels, use max-width:

              -
              @media screen and (max-width: 400px) {
+
              @media screen and (max-width: 400px) {
     body {
         color: blue;
     }
-}
              
+}

              Open this example in the browser, or view the source.

              In practice, using minimum or maximum values is much more useful for responsive design so you will rarely see width or height used alone.

              -

              There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at Using Media Queries: Media Features.

              +

              There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at Using Media Queries: Media Features.

              Orientation

              One well-supported media feature is orientation, which allows us to test for portrait or landscape mode. To change the body text color if the device is in landscape orientation, use the following media query.

              -
              @media (orientation: landscape) {
+
              @media (orientation: landscape) {
     body {
         color: rebeccapurple;
     }
-}
              
+}

              Open this example in the browser, or view the source.

              @@ -118,11 +118,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries

              As part of the Level 4 specification, the hover media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.

              -
              @media (hover: hover) {
+
              @media (hover: hover) {
     body {
         color: rebeccapurple;
     }
-}
              
+}

              Open this example in the browser, or view the source.

              @@ -140,11 +140,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries

              To combine media features you can use and in much the same way as we have used and above to combine a media type and feature. For example, we might want to test for a min-width and orientation. The body text will only be blue if the viewport is at least 400 pixels wide and the device is in landscape mode.

              -
              @media screen and (min-width: 400px) and (orientation: landscape) {
+
              @media screen and (min-width: 400px) and (orientation: landscape) {
     body {
         color: blue;
     }
-}
              
+}

              Open this example in the browser, or view the source.

              @@ -152,11 +152,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries

              If you have a set of queries, any of which could match, then you can comma separate these queries. In the below example the text will be blue if the viewport is at least 400 pixels wide OR the device is in landscape orientation. If either of these things are true the query matches.

              -
              @media screen and (min-width: 400px), screen and (orientation: landscape) {
+
              @media screen and (min-width: 400px), screen and (orientation: landscape) {
     body {
         color: blue;
     }
-}
              
+}

              Open this example in the browser, or view the source.

              @@ -164,11 +164,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries

              You can negate an entire media query by using the not operator. This reverses the meaning of the entire media query. Therefore in this next example the text will only be blue if the orientation is portrait.

              -
              @media not all and (orientation: landscape) {
+
              @media not all and (orientation: landscape) {
     body {
         color: blue;
     }
-}
              
+}

              Open this example in the browser, or view the source.

              @@ -178,9 +178,9 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries

              There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targetting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as breakpoints.

              -

              The Responsive Design Mode in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.

              +

              The Responsive Design Mode in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.

              -

              A screenshot of a layout in a mobile view in Firefox DevTools.

              +

              A screenshot of a layout in a mobile view in Firefox DevTools.

              Active learning: mobile first responsive design

              @@ -194,7 +194,7 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries

              Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout.

              -
              * {
+
              * {
     box-sizing: border-box;
 }
 
@@ -244,11 +244,11 @@ nav a:hover {
 article {
     margin-bottom: 1em;
 }
-
              
+

              We've made no layout changes, however the source of the document is ordered in a way that makes the content readable. This is an important first step and one which ensures that if the content were to be read out by a screen reader, it would be understandable.

              -
              <body>
+
              <body>
     <div class="wrapper">
       <header>
         <nav>
@@ -288,7 +288,7 @@ article {
       <footer><p>&copy;2019</p></footer>
     </div>
   </body>
-
              
+

              This simple layout also works well on mobile. If we view the layout in Responsive Design Mode in DevTools we can see that it works pretty well as a straightforward mobile view of the site.

              @@ -300,7 +300,7 @@ article {

              Add the below code into the bottom of your step1.html CSS.

              -
              @media screen and (min-width: 40em) {
+
              @media screen and (min-width: 40em) {
     article {
         display: grid;
         grid-template-columns: 3fr 1fr;
@@ -315,7 +315,7 @@ article {
         flex: 1;
     }
 }
-
              
+

              This CSS gives us a two-column layout inside the article, of the article content and related information in the aside element. We have also used flexbox to put the navigation into a row.

              @@ -353,7 +353,7 @@ article {

              This could be achieved using the following:

              -
              <ul class="grid">
+
              <ul class="grid">
     <li>
         <h2>Card 1</h2>
         <p>...</p>
@@ -374,9 +374,9 @@ article {
         <h2>Card 5</h2>
         <p>...</p>
     </li>
-</ul>
              
+</ul>
              -
              .grid {
+
              .grid {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -388,7 +388,7 @@ article {
 .grid li {
     border: 1px solid #666;
     padding: 10px;
-}
              
+}

              Open the grid layout example in the browser, or view the source.

              @@ -396,7 +396,7 @@ article {

              Test your skills!

              -

              You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see Test your skills: Responsive Web Design.

              +

              You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see Test your skills: Responsive Web Design.

              Summary

              @@ -411,16 +411,16 @@ article {

              In this module

              diff --git a/files/fr/learn/css/css_layout/multiple-column_layout/index.html b/files/fr/learn/css/css_layout/multiple-column_layout/index.html index 9d28e265de..248c788e2b 100644 --- a/files/fr/learn/css/css_layout/multiple-column_layout/index.html +++ b/files/fr/learn/css/css_layout/multiple-column_layout/index.html @@ -17,9 +17,9 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout
              {{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}
              -

              Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction.

              +

              Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction.

              -
              Prerequisites:HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps and CSS building blocks.)HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps and CSS building blocks.)
              Objective:
              +
              @@ -47,18 +47,13 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout

              Les colonnes créées sont de largeur variable — le navigateur calcule automatiquement l'espace à donner à chacune d'entre elles.

              -
              - 
              <div class="container">
   <h1>Simple exemple <i>multicol</i></h1>
@@ -76,13 +71,9 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout
 </div>
              -
              .container {
-  column-count: 3;
-}
-
              -
              +

              {{ EmbedLiveSample('Un_exemple_élémentaire', '100%', 400) }}

              -

              {{ EmbedLiveSample('Multicol_1', '100%', 400) }}

              +

              Définir column-width

              Modifiez la CSS pour utiliser column-width ainsi :

              @@ -93,18 +84,14 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout

              Le navigateur dispose maintenant le maximum de colonnes possible de la taille fixée ; le reste de l'espace est partagé entre les colonnes existantes. Cela signifie que vous n'obtiendrez pas exactement la largeur définie, à moins que le conteneur soit exactement divisible par cette largeur.

              -
              - - -
              .container {
-  column-width: 200px;
-}
-
              -
              -

              {{ EmbedLiveSample('Multicol_2', '100%', 400) }}

              +

              {{ EmbedLiveSample('Définir_column-width', '100%', 400) }}

              Style des colonnes

              @@ -154,11 +134,7 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout

              Ajoutons des règles pour les divers styles et couleurs.

              -
              - -
              -

              {{ EmbedLiveSample('Multicol_3', '100%', 400) }}

              +

              {{ EmbedLiveSample('Style_des_colonnes', '100%', 400) }}

              Notez que  la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec  column-gap. Pour faire un peu plus d'espace d'un côté ou de l'autre de la règle, vous devez augmenter la taille de l'espace entre les colonnes.

              @@ -197,11 +171,7 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout

              Quelquefois, ces coupures se font dans des endroits amenant des difficultés de lecture. Dans l'exemple en direct ci‑dessous, j'ai utilisé multicol pour disposer une série de boîtes dont chacune a un titre et un peu de texte. Le titre est séparé du texte si la coupure de colonne se produit entre les deux.

              -
              - -
              <div class="container">
+
-
              -

              {{ EmbedLiveSample('Multicol_4', '100%', 600) }}

              +

              {{ EmbedLiveSample('Colonnes_et_coupures', '100%', 600) }}

              -

              Pour contrôler ce comportement, utilisons les propriétés stipulées dans CSS Fragmentation (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le multicol et les médias paginés. Par exemple, ajoutons la propriété {{cssxref("break-inside")}} avec la valeur avoid aux règles pour .card, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée.

              +

              Utiliser break-inside

              + +

              Pour contrôler ce comportement, utilisons les propriétés stipulées dans CSS Fragmentation (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le multicol et les médias paginés. Par exemple, ajoutons la propriété {{cssxref("break-inside")}} avec la valeur avoid aux règles pour .card, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée.

              Il est également préférable d'ajouter l'ancienne propriété page-break-inside: avoid pour une meilleure prise en charge par les divers navigateurs.

              @@ -299,18 +270,14 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout

              Actualisez la page et les boîtes devraient rester entières.

              -
              - 
              .container {
   column-width: 250px;
@@ -383,9 +349,8 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout
   padding: 10px;
   margin: 0 0 1em 0;
 }
              -
              -

              {{ EmbedLiveSample('Multicol_5', '100%', 600) }}

              +

              {{ EmbedLiveSample('Utiliser_break-inside', '100%', 600) }}

              Résumé

              @@ -394,8 +359,8 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout

              Voir aussi

              {{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

              @@ -403,14 +368,14 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout

              Dans ce module

              diff --git a/files/fr/learn/css/css_layout/normal_flow/index.html b/files/fr/learn/css/css_layout/normal_flow/index.html index 00f1cc1882..b0edfa8415 100644 --- a/files/fr/learn/css/css_layout/normal_flow/index.html +++ b/files/fr/learn/css/css_layout/normal_flow/index.html @@ -8,9 +8,9 @@ original_slug: Apprendre/CSS/CSS_layout/Normal_Flow

              {{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}}

              -

              Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.

              +

              Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.

              -
              Prérequis:
              +
              @@ -41,7 +41,8 @@ original_slug: Apprendre/CSS/CSS_layout/Normal_Flow

              Voici un exemple simple expliquant cela :

              -
              +

              Exemple

              + 
              <h2>Cours d'un document de base</h2>
 
 <p>Je suis un élément de niveau bloc de base.
@@ -65,7 +66,7 @@ original_slug: Apprendre/CSS/CSS_layout/Normal_Flow
  <span>sont placés sur une nouvelle ligne si possible
  (comme celle‑ci contenant du texte)</span>, sinon ils
  sont placés sur une nouvelle ligne, comme cette image :
- <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
              + <img src="long.jpg"></p> 
              body {
   width: 500px;
@@ -83,9 +84,8 @@ span {
   background: white;
   border: 1px solid black;
 }
              -
              -

              {{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

              +

              {{ EmbedLiveSample('Exemple', '100%', 500) }}

              Résumé

              @@ -96,14 +96,14 @@ span {

              Dans ce module

              diff --git a/files/fr/learn/css/css_layout/positioning/index.html b/files/fr/learn/css/css_layout/positioning/index.html index c4a9c593b6..8485a78f70 100644 --- a/files/fr/learn/css/css_layout/positioning/index.html +++ b/files/fr/learn/css/css_layout/positioning/index.html @@ -22,9 +22,9 @@ original_slug: Apprendre/CSS/CSS_layout/Le_positionnement
              {{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}
              -

              Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de {{cssxref("position")}}, et comment les utiliser.

              +

              Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de {{cssxref("position")}}, et comment les utiliser.

              -
              Prérequis :
              +
              @@ -51,25 +51,25 @@ original_slug: Apprendre/CSS/CSS_layout/Le_positionnement

              Pour le démontrer et avoir préparer un premier exemple pour les prochaines sections, ajoutez tout d'abord une classe positioned pour le deuxième {{htmlelement("p")}} dans le HTML:

              -
              <p class="positioned"> ... </p>
              +
              <p class="positioned"> ... </p>

              Puis ajoutez la règle suivante au bas de votre CSS:

              -
              .positioned {
+
              .positioned {
   position: static;
   background: yellow; }
              
 
 
              Si maintenant vous sauvegardez et actualisez, vous verrez qu'il n'y a aucune différence, à l'exception de la mise à jour de la couleur de l'arrière-plan du deuxième paragraphe. C'est correct, comme nous l'avons vu plus tôt, le positionnement statique est le comportement par défaut !
              
 
 
              
-
              Remarque : ce lien 1_static-positioning.html (voir le code source) pointe sur un exemple de positionnement « static ».
              
+
              Note : ce lien 1_static-positioning.html (voir le code source) pointe sur un exemple de positionnement « static ».
              
 
              
 
 
              Positionnement « relative »
              
 
 
              Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de la mise en page, vous pourrez modifier sa position finale. Vous pourrez par exemple le faire chevaucher d'autres éléments de la page. Poursuivons : mettez à jour la déclaration de position dans le code :
              
 
-
              position: relative;
              
+
              position: relative;
              
 
 
              Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} dont nous parlerons dans le prochain paragraphe.
              
 
@@ -77,25 +77,23 @@ original_slug: Apprendre/CSS/CSS_layout/Le_positionnement
 
 
              {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} sont utilisés conjointement à {{cssxref("position")}} pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle .positioned dans la CSS :
              
 
-
              top: 30px;
+
              top: 30px;
 left: 30px;
              
 
 
              
-
              Remarque : les valeurs de ces propriétés peuvent prendre n'importe quelle unité logiquement attendue — pixels, mm, rem, %, etc.
              
+
              Note : les valeurs de ces propriétés peuvent prendre n'importe quelle unité logiquement attendue — pixels, mm, rem, %, etc.
              
 
              
 
 
              Si vous enregistrez et actualisez maintenant, vous verrez ce résultat :
              
 
-
              
-
-
              
 
-
              {{ EmbedLiveSample('example_1', '100%', 500) }}
              
+
              {{ EmbedLiveSample('Présentation_de_«_top_»_«_bottom_»_«_left_»_et_«_right_»', '100%', 500) }}
              
 
-
              Cool, n'est-ce-pas ? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini top (haut) et left (gauche) ? Même si cela peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposé. Par exemple, si nous spécifions top: 30px;, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.
              
+
              Cool, n'est-ce-pas ? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini top (haut) et left (gauche) ? Même si cela peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposé. Par exemple, si nous spécifions top: 30px;, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.
              
 
 
              
-
              Remarque: à ce stade de l'article, vous pouvez retrouver un exemple ici 2_relative-positioning.html (voir le code source).
              
+
              Note : à ce stade de l'article, vous pouvez retrouver un exemple ici 2_relative-positioning.html (voir le code source).
              
 
              
 
 
              Positionnement « absolute »
              
 
 
              Le positionnement absolu nous apporte des résultats bien différents. Modifions la déclaration de position dans le code :
              
 
-
              position: absolute;
              
+
              position: absolute;
              
 
 
              Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ceci apparaitre :
              
 
-
              
-
-
              
 
-
              {{ EmbedLiveSample('example_2', '100%', 420) }}
              
+
              {{ EmbedLiveSample('Positionnement_«_absolute_»', '100%', 420) }}
              
 
-
              Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existait plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste. C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore.
              
+
              Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existait plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste. C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore.
              
 
-
              Ensuite, notez que la position de l'élément a changé. {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} se comportent différemment avec le positionnement absolu. Au lieu de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant. Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément conteneur ». (Dans ce cas, le bloc conteneur initial. Voir la section ci-dessous pour plus d'information)
              
+
              Ensuite, notez que la position de l'élément a changé. {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} se comportent différemment avec le positionnement absolu. Au lieu de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant. Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément conteneur ». (Dans ce cas, le bloc conteneur initial. Voir la section ci-dessous pour plus d'information)
              
 
 
              
-
              Note : vous pouvez utiliser {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} pour redimensionner les éléments selon vos besoins. Définissez top: 0; bottom: 0; left: 0; right: 0; et margin: 0; sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite...
              
+
              Note : vous pouvez utiliser {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} pour redimensionner les éléments selon vos besoins. Définissez top: 0; bottom: 0; left: 0; right: 0; et margin: 0; sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite...
              
 
              
 
 
              
-
              Note : Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.
              
+
              Note : Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.
              
 
              
 
 
              
-
              Note : à ce stade de l'article, vous pouvez voir un exemple ici 3_absolute-positioning.html (voir le code source).
              
+
              Note : à ce stade de l'article, vous pouvez voir un exemple ici 3_absolute-positioning.html (voir le code source).
              
 
              
 
 
              Contextes de positionnement
              
@@ -182,21 +174,19 @@ span {
 
 
              Nous pouvons changer ce contexte de positionnement — par rapport à quel élément est placé l'élément à positionner en absolu. Cela s'effectue en définissant le positionnement sur un des autres éléments parents — un des éléments dans lequel il est imbriqué (vous ne pouvez pas le positionner par rapport à un élément dans lequel il n'est pas imbriqué). Pour l'illustrer, ajoutez la déclaration suivante à la règle body:
              
 
-
              position: relative;
              
+
              position: relative;
              
 
 
              Cela devrait donner le résultat suivant:
              
 
-
              
-
-
              
 
-
              {{ EmbedLiveSample('example_3','100%', 420) }}
              
+
              {{ EmbedLiveSample('Contextes_de_positionnement','100%', 420) }}
              
 
-
              À présent, l'élément a été positionné par rapport à l'élément {{htmlelement("body")}}.
              
+
              À présent, l'élément a été positionné par rapport à l'élément {{htmlelement("body")}}.
              
 
 
              
-
              Note : à ce stade, vous pouvez voir cet exemple ici 4_positioning-context.html (voir le code source).
              
+
              Note : à ce stade, vous pouvez voir cet exemple ici 4_positioning-context.html (voir le code source).
              
 
              
 
 
              Présentation du z-index
              
@@ -237,7 +225,7 @@ span {
 
 
              Ajoutez le code suivant à la CSS, pour faire en sorte que le premier paragraphe soit aussi en positionnement absolu :
              
 
-
              p:nth-of-type(1) {
+
              p:nth-of-type(1) {
   position: absolute;
   background: lime;
   top: 10px;
@@ -252,22 +240,20 @@ span {
 
 
              Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle p:nth-of-type(1) :
              
 
-
              z-index: 1;
              
+
              z-index: 1;
              
 
 
              Voici maintenant l'exemple terminé :
              
 
-
              
-
-
              
 
-
              {{ EmbedLiveSample('example_4', '100%', 400) }}
              
+
              {{ EmbedLiveSample('Présentation_du_z-index', '100%', 400) }}
              
 
 
              Notez que z-index n'accepte que des valeurs d'index sans unité ; vous ne pouvez pas préciser que vous voulez qu'un élément soit à 23 pixels sur l'axe des z — cela ne fonctionne pas ainsi. Les plus grandes valeurs vont au‑dessus des valeurs plus faibles et c'est à vous d'indiquer les valeurs. Utiliser 2 et 3 aura le même effet que 300 et 40000.
              
 
 
              
-
              Note : sur ce sujet, vous pouvez voir l'exemple 5_z-index.html (voir le code source).
              
+
              Note : sur ce sujet, vous pouvez voir l'exemple 5_z-index.html (voir le code source).
              
 
              
 
 
              Positionnement « fixed »
              
@@ -310,7 +294,7 @@ p:nth-of-type(1) {
 
 
              Maintenant, mettez à jour la règle body : supprimez la déclaration position : relative ; et ajoutez une hauteur fixe, ainsi :
              
 
-
              body {
+
              body {
   width: 500px;
   height: 1400px;
   margin: 0 auto;
@@ -318,7 +302,7 @@ p:nth-of-type(1) {
 
 
              Maintenant, donnez la position fixed à l'élément {{htmlelement("h1")}} et centrez‑le en haut de la fenêtre. Ajoutez la règle suivante à la CSS :
              
 
-
              h1 {
+
              h1 {
   position: fixed;
   top: 0;
   width: 500px;
@@ -331,22 +315,20 @@ p:nth-of-type(1) {
 
 
              Si vous enregistrez et actualisez maintenant, vous verrez un petit effet amusant par lequel le titre reste fixe et le contenu semble défiler vers le haut et disparaître en dessous. Mais nous pouvons l'améliorer davantage — actuellement, une partie du contenu commence sous l'en‑tête. En effet, l'en-tête positionné n'apparaît plus dans le cours du document, de sorte que le reste du contenu se déplace vers le haut. Nous devons tout baisser un peu ; nous pouvons le faire en fixant une marge supérieure sur le premier paragraphe. Ajoutez ceci maintenant :
              
 
-
              p:nth-of-type(1) {
+
              p:nth-of-type(1) {
   margin-top: 60px;
 }
              
 
 
              Voici l'exemple terminé :
              
 
-
              
-
-
              
 
-
              {{ EmbedLiveSample('example_5', '100%', 400) }}
              
+
              {{ EmbedLiveSample('Positionnement_«_fixed_»', '100%', 400) }}
              
 
 
              
-
              Note : à ce stade de l'article, vous pouvez voir un exemple en direct ici  6_fixed-positioning.html (voir le code source).
              
+
              Note : à ce stade de l'article, vous pouvez voir un exemple en direct ici  6_fixed-positioning.html (voir le code source).
              
 
              
 
 
              « position: sticky »
              
 
 
              Il y a une autre valeur de positionnement disponible appelée position : sticky. Elle est un peu plus récente que les autres. Il s'agit essentiellement d'un hybride entre position relative et position fixe : l'élément à positionner est en positionnement relatif jusqu'à un certain seuil (par ex. 10px du haut de la fenêtre), seuil au delà duquel il est en positionnement fixe. Ce positionnement s'utilise par exemple pour faire défiler une barre de navigation avec la page jusqu'à un certain point et ensuite coller en haut de la page.
              
 
-
              
-
 
-
              .positioned {
+
              .positioned {
   position: sticky;
   top: 30px;
   left: 30px;
 }
              
-
              
 
-
              {{ EmbedLiveSample('Sticky_1', '100%', 200) }}
              
+
+
              {{ EmbedLiveSample('Exemple_simple', '100%', 200) }}
              
+
+
              Index déroulant
              
 
 
              Une utilisation courante pleine d'intérêt de position: sticky permet de créer une page d'index déroulante dans laquelle les divers en‑tête restent collés en haut de la page une fois qu'ils l'ont atteint. Le balisage d'un exemple de ce type ressemble à ceci :
              
 
-
              <h1>Positionnement collant</h1>
+
              <h1>Positionnement collant</h1>
 
 <dl>
     <dt>A</dt>
@@ -461,7 +441,7 @@ p:nth-of-type(1) {
 
 
              Le CSS pourrait ressembler à ce qui suit. Dans le cours normal, les éléments {{htmlelement("dt")}} défilent avec le contenu. Quand on ajoute position : sticky à l'élément {{htmlelement("dt")}} avec une valeur {{cssxref("top")}} de 0, les navigateurs prenant en charge ce positionnement colleront les titres au sommet de la vue de la fenêtre au fur et à mesure qu'ils atteignent cette position. Chaque en-tête suivant remplacera l'en-tête précédent au fur et à mesure que le contenu défile.
              
 
-
              dt {
+
              dt {
   background-color: black;
   color: white;
   padding: 10px;
@@ -472,9 +452,7 @@ p:nth-of-type(1) {
 }
 
              
 
-
              
-
-
              
-
-
              {{ EmbedLiveSample('Sticky_2', '100%', 200) }}
              
+
              {{ EmbedLiveSample('Index_déroulant', '100%', 200) }}
              
 
 
              
-
              Note : à ce stade de l'article, vous pouvez voir un exemple en direct ici 7_sticky-positioning.html (voir le code source).
              
+
              Note : à ce stade de l'article, vous pouvez voir un exemple en direct ici 7_sticky-positioning.html (voir le code source).
              
 
              
 
 
              Résumé
              
@@ -540,20 +485,20 @@ dt {
 
 
 
 
              Dans ce module
              
 
 
diff --git a/files/fr/learn/css/css_layout/responsive_design/index.html b/files/fr/learn/css/css_layout/responsive_design/index.html
index 05df9cfd85..312eea3059 100644
--- a/files/fr/learn/css/css_layout/responsive_design/index.html
+++ b/files/fr/learn/css/css_layout/responsive_design/index.html
@@ -17,7 +17,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design
 
 
              Aux débuts de la conception Web, les pages étaient construites pour cibler une taille d'écran particulière. Si l'utilisateur avait un écran plus grand ou plus petit que celui du concepteur, les résultats attendus pouvaient aller de barres de défilement indésirables, à des longueurs de lignes trop longues, et à une mauvaise utilisation de l'espace. À mesure que des tailles d'écran plus variées devenaient disponibles, le concept de responsive web design (RWD) est apparu, un ensemble de pratiques qui permet aux pages Web de modifier leur disposition et leur apparence pour s'adapter à différentes largeurs d'écran, résolutions, etc. C'est une idée qui a changé notre façon de concevoir pour un web multi-périphériques, et dans cet article nous vous aiderons à comprendre les principales techniques que vous devez connaître pour la maîtriser.
              
 
-
              Prérequis:
              +
              @@ -41,26 +41,22 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design

              Ces deux approches donnaient lieu à un site Web qui avait fière allure sur l'écran de la personne qui le concevait ! Les site liquides avaient pour résultat un design écrasé sur les petits écrans (comme on le voit ci-dessous) et des longueurs de lignes illisibles sur les plus grands.

              -
              Une mise en page avec deux colonnes écrasées dans une fenêtre de taille mobile. -
              -
              +Une mise en page avec deux colonnes écrasées dans une fenêtre de taille mobile. -
              -

              Note: Voir cette simple mise en page "liquide" : exemple, code source. Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles.

              +
              +

              Note : Voir cette simple mise en page "liquide" : exemple, code source. Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles.

              Les sites à largeur fixe risquaient d'avoir une barre de défilement horizontale sur les écrans plus petits que la largeur du site (comme on le voit ci-dessous), et beaucoup d'espace blanc sur les bords sur les écrans plus grands.

              -
              Une mise en page avec une barre de défilement horizontale dans une fenêtre de visualisation mobile. -
              -
              +Une mise en page avec une barre de défilement horizontale dans une fenêtre de visualisation mobile. -
              -

              Note: Voir cette simple mise en page à largeur fixe : exemple, code source. Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur.

              +
              +

              Note : Voir cette simple mise en page à largeur fixe : exemple, code source. Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur.

              -
              -

              Note: Les captures d'écran ci-dessus sont réalisées à l'aide de la Vue adaptative de la boîte à outils de Firefox.

              +
              +

              Note : Les captures d'écran ci-dessus sont réalisées à l'aide de la Vue adaptative de la boîte à outils de Firefox.

              Lorsque le web mobile a commencé à devenir une réalité avec les premiers téléphones à fonctions, les entreprises qui souhaitaient adopter le mobile créaient généralement une version mobile spéciale de leur site, avec une URL différente (souvent quelque chose comme m.example.com, ou example.mobi). Cela signifiait qu'il fallait développer deux versions distinctes du site et les tenir à jour.

              @@ -69,7 +65,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design

              Mise en page flexible avant le responsive design

              -

              Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé Mise en page en fonction de la résolution (EN), décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS.

              +

              Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé Mise en page en fonction de la résolution, décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS.

              Zoe Mickley Gillenwater a grandement contribué au travail de description et de formalisation des différentes façons de créer des sites flexibles, en essayant de trouver un juste milieu entre remplir l'écran ou être complètement fixe en taille.

              @@ -93,7 +89,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design

              Par exemple, la média query suivante teste si la page Web actuelle est affichée comme média d'écran (donc pas un document à imprimer) et si la fenêtre de visualisation a au moins 800 pixels de large. Le CSS du sélecteur .container ne sera appliqué que si ces deux éléments sont vrais.

              -
              @media screen and (min-width: 800px) {
+
              @media screen and (min-width: 800px) {
   .container {
     margin: 1em 2em;
   }
@@ -114,12 +110,12 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design
 
 
              Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser floats. Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser des flotteurs. Des mises en page flottantes flexibles ont été réalisées en donnant à chaque élément un pourcentage de largeur et en s'assurant que les totaux ne dépassent pas 100 % dans toute la mise en page. Dans sa publication originale sur les grilles fluides, Marcotte a détaillé une formule pour convertir en pourcentages une mise en page conçue à l'aide de pixels.
              
 
-
              target / context = result 
+
              target / context = result 
 
              
 
 
              Par exemple, si la taille de notre colonne cible est de 60 pixels et que le contexte (ou conteneur) dans lequel elle se trouve est de 960 pixels, nous divisons 60 par 960 pour obtenir une valeur que nous pouvons utiliser dans notre CSS, après avoir déplacé le point décimal de deux places vers la droite.
              
 
-
              .col {
+
              .col {
   width: 6.25%; /* 60 / 960 = 0.0625 */
 } 
 
              
@@ -129,36 +125,32 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design
 
              L'exemple suivant montre une conception simple et responsive en utilisant des médias queries et une grille flexible. Sur des écrans étroits, la mise en page affiche les boîtes entassées les unes sur les autres :
              
   
              
 
-
              A mobile view of the layout with boxes stacked on top of each other vertically.
-
              
-
              
+A mobile view of the layout with boxes stacked on top of each other vertically.
 
 
              Sur des écrans plus larges, ils se positionnent sur deux colonnes :
              
 
-
              A desktop view of a layout with two columns.
-
              
-
              
+A desktop view of a layout with two columns.
 
-
              
-
              Note: Vous pouvez trouver l'exemple en direct et le code source pour cet exemple sur GitHub.
              
+
              
+
              Note : Vous pouvez trouver l'exemple en direct et le code source pour cet exemple sur GitHub.
              
 
              
 
 
              Techniques modernes de mise en page
              
 
-
              Les méthodes de mise en page modernes telles que Multiple-column layout, Flexbox, et Grid sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire.
              
+
              Les méthodes de mise en page modernes telles que Multiple-column layout, Flexbox, et Grid sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire.
              
 
 
              Multicol
              
 
 
              La plus ancienne de ces méthodes de mise en page est multicol — lorsque vous spécifiez un column-count, cela indique en combien de colonnes vous voulez que votre contenu soit divisé. Le navigateur calcule alors la taille de celles-ci, une taille qui changera en fonction de la taille de l'écran.
              
 
-
              .container {
+
              .container {
   column-count: 3;
 } 
 
              
 
 
              Si vous spécifiez plutôt une largeur de colonne, vous spécifiez une largeur minimale. Le navigateur créera autant de colonnes de cette largeur qu'il en faudra pour que le conteneur soit parfaitement adapté, puis répartira l'espace restant entre toutes les colonnes. Par conséquent, le nombre de colonnes changera en fonction de l'espace disponible.
              
 
-
              .container {
+
              .container {
   column-width: 10em;
 } 
 
              
@@ -169,7 +161,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design
 
 
              Dans l'exemple ci-dessous, les éléments flex prendront chacun autant d'espace dans le conteneur flex, en utilisant la notation flex: 1 comme décrit dans la rubrique de mise en page Flexbox: Taille modulable des éléments flex.
              
 
-
              .container {
+
              .container {
   display: flex;
 }
 
@@ -178,29 +170,29 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design
 } 
 
              
 
-
              
-
              Note: À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : exemple, code source.
              
+
              
+
              Note : À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : exemple, code source.
              
 
              
 
 
              CSS grid
              
 
 
              Dans la mise en page en grille CSS, l'unité fr permet la répartition de l'espace disponible sur les différentes sections de la grille. L'exemple suivant crée un conteneur de grille avec trois rangées dont la taille est de 1fr. Cela créera trois colonnes, chacune prenant une partie de l'espace disponible dans le conteneur. Vous pouvez en savoir plus sur cette approche pour créer une grille dans la rubrique Apprendre la mise en place en grille, dans la section Trames adaptables avec l'unité "fr".
              
 
-
              .container {
+
              .container {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
 } 
 
              
 
-
              
-
              Note: La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : exemple, code source.
              
+
              
+
              Note : La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : exemple, code source.
              
 
              
 
 
              Images responsives
              
 
 
              L'approche la plus simple pour les images responsive est celle décrite dans les premiers articles de Marcotte sur le design responsive. En gros, vous preniez une image qui était à la plus grande taille possible et vous la réduisiez. C'est encore une approche utilisée aujourd'hui, et dans la plupart des feuilles de style, vous trouverez le CSS suivant quelque part :
              
 
-
              img {
+
              img {
   max-width: 100%:
 } 
 
              
@@ -211,7 +203,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design
 
 
              Vous pouvez également créer des images directes utilisées à différentes tailles, ce qui permet d'obtenir un recadrage différent ou une image complètement différente pour différentes tailles d'écran.
              
 
-
              Vous pouvez trouver un guide détaillé sur les Images Responsives dans la section Apprendre le HTML ici sur MDN.
              
+
              Vous pouvez trouver un guide détaillé sur les Images Responsives dans la section Apprendre le HTML ici sur MDN.
              
 
 
              Typographie responsive
              
 
@@ -219,7 +211,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design
 
 
              Dans cet exemple, nous voulons fixer notre titre de niveau 1 à 4rem, ce qui signifie qu'il sera quatre fois plus gros que notre police de base. C'est un très grand titre ! Nous voulons que ce titre géant ne soit utilisé que sur des écrans de grande taille, c'est pourquoi nous créons d'abord un titre plus petit, puis nous utilisons des média queries pour le remplacer par un titre de plus grande taille si nous savons que l'utilisateur a une taille d'écran d'au moins 1200px.
              
 
-
              html {
+
              html {
   font-size: 1em;
 }
 
@@ -238,18 +230,14 @@ h1 {
 
 
              Sur un mobile, le titre est plus petit :
              
 
-
              A stacked layout with a small heading size.
-
              
-
              
+A stacked layout with a small heading size.
 
 
              Sur le bureau cependant, nous voyons la plus grande taille de titre :
              
 
-
              A two column layout with a large heading.
-
              
-
              
+A two column layout with a large heading.
 
-
              
-
              Note: Voir cet exemple en action : exemple, code source.
              
+
              
+
              Note : Voir cet exemple en action : exemple, code source.
              
 
              
 
 
              Comme le montre cette approche de la typographie, vous n'avez pas besoin de limiter les requêtes des médias à la seule modification de la mise en page. Elles peuvent être utilisées pour modifier n'importe quel élément afin de le rendre plus utilisable ou plus attrayant à des tailles d'écran différentes.
              
@@ -258,7 +246,7 @@ h1 {
 
 
              Une approche intéressante consiste à utiliser l'unité viewport vw pour permettre une typographie réactive. 1vw est égal à un pour cent de la largeur de la fenêtre, ce qui signifie que si vous définissez la taille de votre police à l'aide de vw, elle sera toujours liée à la taille de la fenêtre.
              
 
-
              h1 {
+
              h1 {
   font-size: 6vw;
 }
              
 
@@ -266,21 +254,21 @@ h1 {
 
 
              Il existe une solution, et elle consiste à utiliser calc(). Si vous ajoutez l'unité vw à un ensemble de valeurs utilisant une taille fixe telle que ems ou rems, le texte sera toujours zoomable. En fait, l'unité vw s'ajoute à cette valeur zoomée :
              
 
-
              h1 {
+
              h1 {
   font-size: calc(1.5rem + 3vw);
 }
              
 
 
              Cela signifie que nous n'avons besoin de spécifier la taille de la police pour l'en-tête qu'une seule fois, plutôt que de la configurer pour les mobiles et de la redéfinir dans les requêtes des médias. La police augmente ensuite progressivement à mesure que l'on augmente la taille de la zone d'affichage.
              
 
-
              
-
              Voir un exemple de cela en action : exemple, code source.
              
+
              
+
              Note : Voir un exemple de cela en action : exemple, code source.
              
 
              
 
 
              Le méta-tag du viewport
              
 
 
              Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section <head> du document.
              
 
-
              <meta name="viewport" content="width=device-width,initial-scale=1">
+
              <meta name="viewport" content="width=device-width,initial-scale=1">
 
              
 
 
              Cette balise meta dit aux navigateurs mobiles qu'ils doivent ajuster la largeur de la fenêtre à la largeur de l'écran de l'appareil, et mettre l'échelle du document à 100% de sa taille prévue, affichant le document à la taille optimisée pour les mobiles que vous vouliez.
              
@@ -305,8 +293,8 @@ h1 {
 
 
              Vous devriez éviter d'utiliser minimum-scale, maximum-scale, et en particulier la définition de user-scalable sur no. Les utilisateurs devraient être autorisés à zoomer autant ou aussi peu que nécessaire; éviter cela entraîne des problèmes d'accessibilité.
              
 
-
              
-
              Note: Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — @viewport — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge.
              
+
              
+
              Note : Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — @viewport — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge.
              
 
              
 
 
              Sommaire
              
diff --git a/files/fr/learn/css/css_layout/supporting_older_browsers/index.html b/files/fr/learn/css/css_layout/supporting_older_browsers/index.html
index b7eea3d877..1aeb151ae9 100644
--- a/files/fr/learn/css/css_layout/supporting_older_browsers/index.html
+++ b/files/fr/learn/css/css_layout/supporting_older_browsers/index.html
@@ -21,9 +21,9 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs
 
 
              {{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}
              
 
-
              Dans ce module, nous vous recommandons d'utiliser Flexbox et les grilles CSS comme principales méthodes de mise en page de vos créations. Cependant, certains visiteurs de votre site utilisent des navigateurs plus anciens ou qui ne prennent pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web : au fur et à mesure que de nouvelles fonctionnalités sont développées, les différents navigateurs donnent la priorité à certaines fonctionnalités plutôt qu'à d'autres. Cet article explique comment utiliser les techniques modernes du Web sans exclure les utilisateurs de technologies plus anciennes.
              
+
              Dans ce module, nous vous recommandons d'utiliser Flexbox et les grilles CSS comme principales méthodes de mise en page de vos créations. Cependant, certains visiteurs de votre site utilisent des navigateurs plus anciens ou qui ne prennent pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web : au fur et à mesure que de nouvelles fonctionnalités sont développées, les différents navigateurs donnent la priorité à certaines fonctionnalités plutôt qu'à d'autres. Cet article explique comment utiliser les techniques modernes du Web sans exclure les utilisateurs de technologies plus anciennes.
              
 
-
              Prérequis:
              +
              diff --git a/files/fr/learn/css/first_steps/getting_started/index.html b/files/fr/learn/css/first_steps/getting_started/index.html index 999acf147b..9bbccc2107 100644 --- a/files/fr/learn/css/first_steps/getting_started/index.html +++ b/files/fr/learn/css/first_steps/getting_started/index.html @@ -15,9 +15,9 @@ translation_of: Learn/CSS/First_steps/Getting_started
              {{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
              -

              Dans cet article nous vous montrons comment appliquer un style CSS à un document HTML simple. Vous apprendrez des choses pratiques concernant CSS.

              +

              Dans cet article nous vous montrons comment appliquer un style CSS à un document HTML simple. Vous apprendrez des choses pratiques concernant CSS.

              -
              Prérequis :
              +
              @@ -34,7 +34,7 @@ translation_of: Learn/CSS/First_steps/Getting_started

              Notre point de départ est un document HTML. Pour suivre la leçon en travaillant sur votre ordinateur, vous pouvez copier le code ci-dessous. Collez le dans un fichier en utilisant un éditeur de code, puis sauvegardez le sous le nom index.html.

              -
              <!doctype html>
+
              <!doctype html>
 <html lang="fr">
 <head>
     <meta charset="utf-8">
@@ -61,8 +61,8 @@ translation_of: Learn/CSS/First_steps/Getting_started
 </html>
 
              
 
-
              
-
              Note : Si vous lisez cet article sur un appareil ou dans un environnement où il n'est pas aisé de créer des fichiers, pas de soucis — des éditeurs de code live sont proposés ci-dessous ; vous pourrez ainsi tester les exemples de code directement dans cette page.
              
+
              
+
              Note : Si vous lisez cet article sur un appareil ou dans un environnement où il n'est pas aisé de créer des fichiers, pas de soucis — des éditeurs de code live sont proposés ci-dessous ; vous pourrez ainsi tester les exemples de code directement dans cette page.
              
 
              
 
 
              Ajouter CSS à notre document
              
@@ -73,11 +73,11 @@ translation_of: Learn/CSS/First_steps/Getting_started
 
 
              Pour lier styles.css à index.html ajoutez la ligne suivante dans la section {{htmlelement("head")}} du document HTML :
              
 
-
              <link rel="stylesheet" href="styles.css">
              
+
              <link rel="stylesheet" href="styles.css">
              
 
 
              Cet élément {{htmlelement("link")}} indique au navigateur la présence d'une feuille de style, grâce à l'attribut rel ; la valeur de l'attribut href donne la localisation du fichier CSS. Pour tester que le lien fonctionne, nous allons définir une règle dans styles.css. Grâce à votre éditeur de code, ajoutez les lignes suivantes à la feuille de style CSS :
              
 
-
              h1 {
+
              h1 {
   color: red;
 }
              
 
@@ -91,13 +91,13 @@ translation_of: Learn/CSS/First_steps/Getting_started
 
 
              Cela est réalisé grâce à un sélecteur d'élément — dans la règle CSS, le sélecteur correspond au nom d'un élément HTML. Pour appliquer un style à tous les paragraphes du document HTML on utilisera le sélecteur p. Voilà la règle pour passer en vert tous les paragraphes :
              
 
-
              p {
+
              p {
   color: green;
 }
              
 
 
              On peut cibler plusieurs éléments d'un coup en les listant, séparés par une virgule. Si je veux que tous les paragraphes et tous les items de liste soient verts j'écrirai la règle suivante :
              
 
-
              p, li {
+
              p, li {
     color: green;
 }
              
 
@@ -111,7 +111,7 @@ translation_of: Learn/CSS/First_steps/Getting_started
 
 
              On recherche pourtant souvent autre chose que ce rendu par défaut. Il suffit alors de sélectionner l'élément HTML dont on veut modifier le rendu et d'écrire la règle CSS pour réaliser cette mise en forme.  Un bon exemple est notre <ul>, une liste non ordonnée. Ses items sont marqués par des puces et si on décide de se débarrasser de ces puces, on peut le faire comme suit :
              
 
-
              li {
+
              li {
   list-style-type: none;
 }
              
 
@@ -127,7 +127,7 @@ translation_of: Learn/CSS/First_steps/Getting_started
 
 
              Dans le document HTML, ajouter un  attribut class au deuxième item de la liste :
              
 
-
              <ul>
+
              <ul>
   <li>Item un</li>
   <li class="special">Item deux</li>
   <li>Item <em>trois</em></li>
@@ -135,7 +135,7 @@ translation_of: Learn/CSS/First_steps/Getting_started
 
 
              Dans votre CSS vous pouvez maintenant cibler la classe special grâce à un sélecteur fait du nom de la classe précédé d'un point. Ajoutez le code suivant à votre feuille de style :
              
 
-
              .special {
+
              .special {
   color: orange;
   font-weight: bold;
 }
              
@@ -146,14 +146,14 @@ translation_of: Learn/CSS/First_steps/Getting_started
 
 
              Vous verrez parfois des règles avec un sélecteur qui combine le nom de l'élément HTML avec celui de la classe  :
              
 
-
              li.special {
+
              li.special {
   color: orange;
   font-weight: bold;
 }
              
 
 
              Cette syntaxe signifie "s'applique à tous les éléments li dont l'attribut class a la valeur special ". Cette règle ne s'applique alors plus à l'élément <span> ou à tout autre élément dont l'attribut class a la valeur special mais qui n'est pas un <li>. Pour que la règle s'applique aussi au <span>  il faudrait l'ajouter dans la liste des sélecteurs :
              
 
-
              li.special,
+
              li.special,
 span.special {
   color: orange;
   font-weight: bold;
@@ -167,7 +167,7 @@ span.special {
 
 
              Ajoutez la règle suivante à votre feuille de style :
              
 
-
              li em {
+
              li em {
   color: rebeccapurple;
 }
              
 
@@ -177,7 +177,7 @@ span.special {
 
 
              Ajoutez cette règle à votre feuille de style :
              
 
-
              h1 + p {
+
              h1 + p {
   font-size: 200%;
 }
              
 
@@ -185,15 +185,15 @@ span.special {
 
 
              {{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}
              
 
-
              
-
              Note :  A ce point, on a déjà découvert plusieurs méthodes CSS pour cibler les éléments et pourtant on vient à peine de commencer ! Nous passerons en revue plus systématiquement tous ces sélecteurs dans la leçon CSS Selectors du cours suivant.
              
+
              
+
              Note :  A ce point, on a déjà découvert plusieurs méthodes CSS pour cibler les éléments et pourtant on vient à peine de commencer ! Nous passerons en revue plus systématiquement tous ces sélecteurs dans la leçon CSS Selectors du cours suivant.
              
 
              
 
 
              Mise en forme basée sur l'état
              
 
-
              Pour finir ce tutoriel, voyons comment on peut appliquer une mise en forme basée sur l'état d'un élément. La mise en forme des liens illustre cela à merveille. Pour appliquer un style sur un lien, on doit cibler l'élément <a> (ancre). Cet élément a différents états selon que le lien a ou n'a pas été visité (visited), est survolé par le curseur (hover), a le focus clavier (focus), ou si l'utilisateur est en train de cliquer sur ce lien (active). CSS permet de cibler ces différents états — les règles ci-dessous colorent en rose les liens non visités et en vert ceux qui l'ont été.
              
+
              Pour finir ce tutoriel, voyons comment on peut appliquer une mise en forme basée sur l'état d'un élément. La mise en forme des liens illustre cela à merveille. Pour appliquer un style sur un lien, on doit cibler l'élément <a> (ancre). Cet élément a différents états selon que le lien a ou n'a pas été visité (visited), est survolé par le curseur (hover), a le focus clavier (focus), ou si l'utilisateur est en train de cliquer sur ce lien (active). CSS permet de cibler ces différents états — les règles ci-dessous colorent en rose les liens non visités et en vert ceux qui l'ont été.
              
 
-
              a:link {
+
              a:link {
   color: pink;
 }
 
@@ -203,7 +203,7 @@ a:visited {
 
 
              On peut changer l'aspect des liens survolés, par exemple en supprimant le soulignement, avec la règle suivante :
              
 
-
              a:hover {
+
              a:hover {
   text-decoration: none;
 }
              
 
@@ -213,8 +213,8 @@ a:visited {
 
 
              Nous avons supprimé le soulignement quand le lien est survolé.Vous pourriez supprimer le soulignement quel que soit l'état du lien. Dans un vrai site, il est quand même important que le visiteur sache qu'un lien est un lien. Le soulignement donne un indice important aux visiteurs pour réaliser qu'un bout de texte dans un paragraphe est cliquable — c'est le comportement auquel ils sont habitués. Avec le contrôle que donne CSS, les changements de style peuvent parfois rendre le document moins accessible — à chaque fois que nécessaire nous nous efforcerons de signaler les pièges classiques dans cette direction.
              
 
-
              
-
              Note : dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'accessibilité : les règles pour que nos pages soient compréhensibles et utilisables par tous.
              
+
              
+
              Note : dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'accessibilité : les règles pour que nos pages soient compréhensibles et utilisables par tous.
              
 
 
              Vos visiteurs peuvent consulter votre page depuis un ordinateur équipé d'une souris ou d'un trackpad, ou depuis un téléphone avec un écran tactile. Ils peuvent aussi utiliser un lecteur d'écran qui parcourt le contenu du document. Ils pourraient avoir besoin d'un affichage en grands caractères, ou parcourir votre site en ne naviguant qu'avec le clavier.
              
 
@@ -225,7 +225,7 @@ a:visited {
 
 
              On peut associer sélecteurs et combinateurs. Par exemple :
              
 
-
              /* sélectionne tout <span> à l'intérieur d'un <p>, lui-même à l'intérieur d'un <article>  */
+
              /* sélectionne tout <span> à l'intérieur d'un <p>, lui-même à l'intérieur d'un <article>  */
 article p span { ... }
 
 /* sélectionne tout <p> qui vient juste après un <ul>, lui-même venant just après un <h1>  */
@@ -233,7 +233,7 @@ h1 + ul + p { ... }
              
 
 
              On peut aussi combiner les types multiples. Essayez d'ajouter les règles suivantes à votre feuille de style :
              
 
-
              body h1 + p .special {
+
              body h1 + p .special {
   color: yellow;
   background-color: black;
   padding: 5px;
diff --git a/files/fr/learn/css/first_steps/how_css_is_structured/index.html b/files/fr/learn/css/first_steps/how_css_is_structured/index.html
index a5dca8a25a..057da54fc4 100644
--- a/files/fr/learn/css/first_steps/how_css_is_structured/index.html
+++ b/files/fr/learn/css/first_steps/how_css_is_structured/index.html
@@ -9,7 +9,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_is_structured
 
 
              Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de son fonctionnement. Il est temps d'explorer plus avant la structure du langage lui-même. Nous avons déjà rencontré nombre des concepts apparaissant dans ce tutoriel ; reportez vous aux leçons précédentes si un concept vous semble peu clair.
              
 
-
              Prérequis :
              +
              @@ -244,18 +244,19 @@ p {
              -

              Important : Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme invalide et complètement ignorée par le moteur CSS du navigateur.

              +

              Attention : Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme invalide et complètement ignorée par le moteur CSS du navigateur.

              -

              Important : En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit toujours être notée color. couleur ne fonctionnera pas.

              +

              Attention : En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit toujours être notée color. couleur ne fonctionnera pas.

              Fonctions

              Bien que la plupart des valeurs soient des mots-clés relativement simples ou des valeurs numériques, on peut aussi appeler une fonction pour calculer une valeur dans une déclaration CSS. Un exemple serait la fonction calc(). Cette fonction vous permet de faire des calculs simples à partir de CSS, par exemple :

              -
              +

              Exemple calc

              + 
              <div class="outer"><div class="box">la boite interne vaut 90% - 30px.</div></div>
              .outer {
@@ -268,17 +269,17 @@ p {
   background-color: rebeccapurple;
   color: white;
 }
              -

              La page devrait s'afficher comme ceci :

              -

              {{EmbedLiveSample('calc_example', '100%', 200)}}

              +

              {{EmbedLiveSample('Exemple_calc', '100%', 200)}}

              Une fonction est composée du nom de la fonction suivi d'une paire de parenthèses entre lesquelles sont placées les valeurs autorisées pour cette fonction. Dans le cas de l'exemple calc() ci-dessus, on demande que la largeur de cette zone soit égale à 90% de la largeur du bloc conteneur, moins 30 pixels. Ce n'est pas quelque chose que l'on peut calculer à l'avance et simplement entrer la valeur dans le CSS, car on ne sait pas ce que seront 90%. Comme pour toutes les valeurs, chaque fonction a sa page de documentation sur MDN avec des exemples d'utilisation pour en voir le fonctionnement.

              Un autre exemple serait les différentes valeurs de la propriété <transform>, telles que rotate().

              -
              +

              Exemple transform

              + 
              <div class="box"></div>
              .box {
@@ -288,11 +289,10 @@ p {
   background-color: rebeccapurple;
   transform: rotate(0.8turn)
 }
              -

              La page devrait s'afficher comme ceci :

              -

              {{EmbedLiveSample('transform_example', '100%', 200)}}

              +

              {{EmbedLiveSample('Exemple_transform', '100%', 200)}}

              Essayez de rechercher différentes valeurs des propriétés suivantes et d'écrire des règles CSS qui les appliquent à différents éléments HTML :

              diff --git a/files/fr/learn/css/first_steps/how_css_works/index.html b/files/fr/learn/css/first_steps/how_css_works/index.html index 35f603c50d..0a578ae2a0 100644 --- a/files/fr/learn/css/first_steps/how_css_works/index.html +++ b/files/fr/learn/css/first_steps/how_css_works/index.html @@ -1,23 +1,18 @@ --- -title: 'CSS, comment ça marche ?' +title: CSS, comment ça marche ? slug: Learn/CSS/First_steps/How_CSS_works -tags: - - Apprendre - - CSS - - DOM - - Débutant translation_of: Learn/CSS/First_steps/How_CSS_works ---

              {{LearnSidebar}}
              {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

              -

              Jusqu'ici, nous avons appris les bases du CCS, ses objectifs et comment écrire des feuilles de style élémentaires. Dans cette leçon, nous allons voir comment un navigateur prend du HTML et du CSS pour les transformer en une page web.

              +

              Jusqu'ici, nous avons appris les bases du CCS, ses objectifs et comment écrire des feuilles de style élémentaires. Dans cette leçon, nous allons voir comment un navigateur prend du HTML et du CSS pour les transformer en une page web.

              -
              Prérequis :
              +
              - + @@ -41,7 +36,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works

              Le diagramme suivant propose une vue synthétique de ce traitement.

              -

              +

              À propos du DOM

              @@ -79,11 +74,9 @@ translation_of: Learn/CSS/First_steps/How_CSS_works

              C'est ainsi que le navigateur interprète notre fragment HTML—il transforme ce DOM en arbre de rendu puis affiche le résultat comme suit :

              -

              {{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}

              +

              {{EmbedLiveSample('Une_représentation_concrète_du_DOM', '100%', 55)}}

              - +

              Appliquer CSS au DOM

              @@ -103,17 +96,17 @@ translation_of: Learn/CSS/First_steps/How_CSS_works background-color: lime; } -

              Le navigateur parse le HTML, calcule son DOM, puis parse le CSS. Notre CSS a une unique règle avec un unique sélecteur span, ça va être rapide à trier ! La règle est attachée à chaque nœud SPAN du DOM pour obtenir l'arbre de rendu. Reste à calculer les rendus puis à peindre la représentation visuelle finale à l'écran.

              +

              Le navigateur parse le HTML, calcule son DOM, puis parse le CSS. Notre CSS a une unique règle avec un unique sélecteur span, ça va être rapide à trier ! La règle est attachée à chaque nœud SPAN du DOM pour obtenir l'arbre de rendu. Reste à calculer les rendus puis à peindre la représentation visuelle finale à l'écran.

              Voilà le résultat après mise à jour :

              -

              {{EmbedLiveSample('Applying_CSS_to_the_DOM', '100%', 55)}}

              +

              {{EmbedLiveSample('Appliquer_CSS_au_DOM', '100%', 55)}}

              -

              Dans le prochain module, dans l'article Debugging CSS, nous utiliserons les DevTools du navigateur pour débuguer des erreurs CSS. Ce sera aussi l'occasion de mieux comprendre comment le navigateur interprète CSS.

              +

              Dans le prochain module, dans l'article Debugging CSS, nous utiliserons les DevTools du navigateur pour débuguer des erreurs CSS. Ce sera aussi l'occasion de mieux comprendre comment le navigateur interprète CSS.

              Que se passe-t-il quand un navigateur rencontre du CSS qu'il ne comprend pas ?

              -

              Les navigateurs n'implémentent pas tous en même temps une fonctionnalité CSS nouvelle, j'avais mentionné ce fait dans une leçon précédente. Rajoutez à cela le fait que trop de gens n'utilisent pas une version à jour de leur navigateur. CSS, lui, est en développement constant et donc toujours en avance par rapport à ce que les navigateurs peuvent implémenter. On doit donc se demander ce qui se passe quand un navigateur tombe sur un sélecteur ou une déclaration qu'il ne sait pas interpréter.

              +

              Les navigateurs n'implémentent pas tous en même temps une fonctionnalité CSS nouvelle, j'avais mentionné ce fait dans une leçon précédente. Rajoutez à cela le fait que trop de gens n'utilisent pas une version à jour de leur navigateur. CSS, lui, est en développement constant et donc toujours en avance par rapport à ce que les navigateurs peuvent implémenter. On doit donc se demander ce qui se passe quand un navigateur tombe sur un sélecteur ou une déclaration qu'il ne sait pas interpréter.

              La réponse : ne rien faire et passer à la suite !

              @@ -123,7 +116,6 @@ translation_of: Learn/CSS/First_steps/How_CSS_works

              Dans l'exemple ci-dessous, j'ai utilisé l'orthographe anglaise colour pour le mot couleur. Cela contredit la convention CSS et rend ce code incompréhensible pour le navigateur. En conséquence, le paragraphe n'a pas été colorié en bleu. Par contre, tout le reste du CSS est appliqué, seule la ligne invalide est ignorée.

              -
              <p> Je veux que ce texte soit grand, gras et bleu.</p>
              p {
@@ -131,19 +123,13 @@ translation_of: Learn/CSS/First_steps/How_CSS_works
   colour: blue; /* incorrect spelling of the color property */
   font-size: 200%;
 }
              -
              -

              {{EmbedLiveSample('Skipping_example', '100%', 200)}}

              +

              {{EmbedLiveSample('Que_se_passe-t-il_quand_un_navigateur_rencontre_du_CSS_quil_ne_comprend_pas', '100%', 200)}}

              Le comportement décrit ci-dessus est très utile : vous pouvez utiliser du CSS récent pour perfectionner la mise en forme de vos pages, sachant qu'aucune erreur ne se produira quand votre code n'est pas compris — le navigateur interprète la règle... ou ne fait rien. Rappelez vous maintenant la cascade : entre deux règles de même spécificité, le navigateur choisira la dernière rencontrée. La cascade permet d'offrir une alternative pour les navigateurs qui ne prennent pas en charge le CSS le plus récent.

              Cela fonctionne particulièrement bien quand on désire utiliser une valeur CSS introduite récemment, pas encore prise en charge partout. Par exemple, quelques vieux navigateurs ne savent pas interpréter calc() pour les valeurs. Je peux donc donner une valeur en pixels pour la largeur de ma boîte, puis proposer une déclaration où la valeur de width est calculée par calc(). Un vieux navigateur interprète la première déclaration, il ne comprend pas la seconde, il l'ignore — il utilisera donc la version pixels. Les navigateurs récents interprètent la déclaration en pixels, puis celle avec  calc() qui, par cascade, écrase la déclaration précédente.

              -
              .box {
-  width: 500px;
-  width: calc(100% - 50px);
-}
              -

              Dans les leçons à venir, nous rencontrerons d'autres méthodes pour adapter le code aux différents navigateurs.

              Et enfin

              diff --git a/files/fr/learn/css/first_steps/index.html b/files/fr/learn/css/first_steps/index.html index 91a9d56dbf..2b0e0238ec 100644 --- a/files/fr/learn/css/first_steps/index.html +++ b/files/fr/learn/css/first_steps/index.html @@ -11,18 +11,12 @@ translation_of: Learn/CSS/First_steps ---
              {{LearnSidebar}}
              -
              -
              CSS (Cascading Style Sheets ou en français "Feuilles de style en cascade") est utilisé pour styliser et mettre en page des pages Web - par exemple, pour modifier la police, la couleur, la taille et l'espacement de votre contenu, le scinder en plusieurs colonnes ou ajouter des animations et autres éléments décoratifs. Ce module vous permet de commencer en douceur votre chemin vers la maîtrise de CSS avec les bases de son fonctionnement, de sa syntaxe et de la façon dont vous pouvez commencer à l'utiliser pour ajouter du style au HTML.
              -
              +

              CSS (Cascading Style Sheets ou en français "Feuilles de style en cascade") est utilisé pour styliser et mettre en page des pages Web - par exemple, pour modifier la police, la couleur, la taille et l'espacement de votre contenu, le scinder en plusieurs colonnes ou ajouter des animations et autres éléments décoratifs. Ce module vous permet de commencer en douceur votre chemin vers la maîtrise de CSS avec les bases de son fonctionnement, de sa syntaxe et de la façon dont vous pouvez commencer à l'utiliser pour ajouter du style au HTML.

              -

              Vous voulez devenir un développeur web front-end ?

              Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

              -

              Commencer

              -
              -

              Prérequis

              Avant de commencer ce module, vous devriez avoir :

              @@ -34,7 +28,7 @@ translation_of: Learn/CSS/First_steps
              -

              Note : Si vous travaillez sur un ordinateur / tablette / autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code sur des sites de programmation en ligne comme JSBin ou Thimble.

              +

              Note : Si vous travaillez sur un ordinateur / tablette / autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code sur des sites de programmation en ligne comme JSBin ou Thimble.

              Guides

              @@ -43,7 +37,7 @@ translation_of: Learn/CSS/First_steps
              Qu'est-ce que le CSS?
              -
              {{Glossary("CSS")}} (Cascading Style Sheets) permet de créer de superbes pages web, mais comment fonctionne-t-il sous le capot ? Cet article explique ce qu'est le CSS à l'aide d'un exemple de syntaxe simple et couvre également quelques-uns des termes clés du langage.
              +

              {{Glossary("CSS")}} (Cascading Style Sheets) permet de créer de superbes pages web, mais comment fonctionne-t-il sous le capot ? Cet article explique ce qu'est le CSS à l'aide d'un exemple de syntaxe simple et couvre également quelques-uns des termes clés du langage.

              Démarrer avec CSS
              Dans cet article, nous partirons d'un document HTML simple et y appliquerons des CSS, tout en apprenant des choses pratiques sur le langage.
              Comment est structuré le CSS
              @@ -52,12 +46,11 @@ translation_of: Learn/CSS/First_steps
              Nous avons appris les bases de CSS, ce qu'il est et comment écrire des feuilles de style simple. Dans cette leçon, nous étudierons comment un navigateur transforme CSS et HTML en une page web.
              Utilisez vos nouvelles compétences
              Avec toutes les choses que vous avez apprises dans les dernières leçons, vous devriez être capable de formater des documents textuels simples en utilisant CSS et y ajouter votre propre style. Cet article vous permet d'expérimenter.
              -

              Voir aussi

              Literacy Web intermédiaire 1 : Introduction au CSS
              -
              Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module Introduction à CSS. Approfondissements à propos de l'application de styles sur les éléments HTML d'une page Web, les sélecteurs CSS, les attributs et valeurs.P
              +
              Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module Introduction à CSS. Approfondissements à propos de l'application de styles sur les éléments HTML d'une page Web, les sélecteurs CSS, les attributs et valeurs.P
              diff --git a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.html b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.html index c49978ebb6..87b94d05bf 100644 --- a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.html +++ b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.html @@ -10,9 +10,9 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge ---

              {{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

              -

              Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS. 

              +

              Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS. 

              -
              Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.)Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.)
              Objectif :
              +
              @@ -29,8 +29,8 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge

              Vous pouvez travailler dans l'éditeur ci-dessous ou télécharger le point de départ pour travailler en local sur votre machine, avec votre propre éditeur de code.  Ce point de départ est une page HTML avec le CSS interne écrit dans la section <head>. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme CodePen, jsFiddle, ou Glitch pour travailler sur les tâches proposées.

              -
              -

              Note : ne restez pas coincé, appelez à l'aide — voir la section Evaluation et comment obtenir de l'aide au bas de cette page.

              +
              +

              Note : ne restez pas coincé, appelez à l'aide — voir la section Evaluation et comment obtenir de l'aide au bas de cette page.

              Travailler avec CSS

              @@ -60,7 +60,7 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge

              Vous devriez obtenir un rendu qui ressemble à cela :

              -

              Screenshot of how the example should look after completing the assessment.

              +

              Screenshot of how the example should look after completing the assessment.

              Une fois cette tâche accomplie, n'hésitez pas à explorer des propriétés rencontrées dans la référence CSS sur MDN !

              @@ -68,7 +68,7 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge

              {{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

              -

              Evaluation ou compléments d'information

              +

              Evaluation ou compléments d'information

              Si vous voulez une évaluation de votre travail, ou si vous êtes coincé et recherchez de l'aide :

              diff --git a/files/fr/learn/css/first_steps/what_is_css/index.html b/files/fr/learn/css/first_steps/what_is_css/index.html index 7389147591..bfdeb9fa33 100644 --- a/files/fr/learn/css/first_steps/what_is_css/index.html +++ b/files/fr/learn/css/first_steps/what_is_css/index.html @@ -15,9 +15,9 @@ original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS
              {{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
              -

              {{Glossary("CSS")}} (Cascading Style Sheets) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe puis quelques termes clé du langage seront introduits.

              +

              {{Glossary("CSS")}} (Cascading Style Sheets) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe puis quelques termes clé du langage seront introduits.

              -
              Prérequis :
              +
              @@ -32,7 +32,7 @@ original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS

              Dans le cours Introduction à HTML, nous avons présenté le langage HTML et comment l'utiliser afin de rédiger des documents structurés. Ces documents seront consultables dans un navigateur. Les titres apparaîtront dans une police plus grande que le corps de texte, la rupture entre deux paragraphes sera marquée par un saut de ligne. Les liens seront soulignés et colorés pour les distinguer du reste du texte. L'image ci-dessous montre comment un navigateur affiche un document HTML — la mise en forme par défaut garantit un minimum de lisibilité, même si l'auteur de la page n'a spécifié aucune règle de style.

              -

              La mise en forme par défaut appliquée par un navigateur.

              +

              La mise en forme par défaut appliquée par un navigateur.

              Le Web serait d'un ennui terrible si tous les sites ressemblaient à la page ci-dessus. Grâce à CSS, vous pouvez contrôler exactement l'affichage de chaque élément HTML dans le navigateur et ainsi présenter vos documents avec la mise en forme de votre choix.

              @@ -48,8 +48,8 @@ original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS

              "Présenter un document à l'utilisateur" signifie convertir ce document dans une forme utilisable par le public visé. Les {{Glossary("browser","navigateurs")}}, tels {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, {{Glossary("Safari","Safari")}} ou {{Glossary("Microsoft Edge","Edge")}} sont conçus pour présenter visuellement des documents, que ce soit sur l'écran d'un ordinateur, un vidéo-projecteur ou une imprimante.

              -
              -

              Note : Un navigateur est parfois appelé {{Glossary("User agent","agent utilisateur")}}. On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres "agents utilisateurs" comme les programmes qui convertissent des documents  HTML et CSS en documents PDF imprimables.

              +
              +

              Note : Un navigateur est parfois appelé {{Glossary("User agent","agent utilisateur")}}. On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres "agents utilisateurs" comme les programmes qui convertissent des documents  HTML et CSS en documents PDF imprimables.

              CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple changer la couleur et la taille des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple transformer un texte affiché sur une colonne en une composition avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des animations. N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples.

              @@ -62,7 +62,7 @@ original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS

              Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme :

              -
              h1 {
+
              h1 {
   color: red;
   font-size: 5em;
 }
              
@@ -73,7 +73,7 @@ original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS
 
 
              Une feuille de style CSS est constituée d'une succession de telles règles :
              
 
-
              h1 {
+
              h1 {
   color: red;
   font-size: 5em;
 }
@@ -84,8 +84,8 @@ p {
 
 
              On retient facilement certaines valeurs, d'autres sont plus difficiles à mémoriser. Pour s'y retrouver, sur MDN, la page individuelle de chaque propriété donne un aperçu rapide et complet des valeurs applicables.
              
 
-
              
-
              Note : Sur MDN, dans la référence CSS, vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes "mdn nom-de-propriété-ou-fonctionnalité-css" dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez par exemple tester les requêtes "mdn color" et "mdn font-size" !
              
+
              
+
              Note : Sur MDN, dans la référence CSS, vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes "mdn nom-de-propriété-ou-fonctionnalité-css" dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez par exemple tester les requêtes "mdn color" et "mdn font-size" !
              
 
              
 
 
              Modules CSS
              
diff --git a/files/fr/learn/css/howto/create_fancy_boxes/index.html b/files/fr/learn/css/howto/create_fancy_boxes/index.html
index dd242c62a3..31db5f3ac9 100644
--- a/files/fr/learn/css/howto/create_fancy_boxes/index.html
+++ b/files/fr/learn/css/howto/create_fancy_boxes/index.html
@@ -1,16 +1,12 @@
 ---
 title: Créer de belles boîtes
 slug: Learn/CSS/Howto/create_fancy_boxes
-tags:
-  - Apprendre
-  - CSS
-  - Débutant
 translation_of: Learn/CSS/Howto/create_fancy_boxes
 original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes
 ---
-
              Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.
              
+
              Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.
              
 
-
              Avant d'attaquer la partie pratique, nous vous recommandons de lire l'article qui explique le fonctionnement du modèle de boîte CSS. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire les bases de la disposition en CSS.
              
+
              Avant d'attaquer la partie pratique, nous vous recommandons de lire l'article qui explique le fonctionnement du modèle de boîte CSS. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire les bases de la disposition en CSS.
              
 
 
              D'un point de vue technique, créer de belles boîtes devient beaucoup plus simple quand on connaît les propriétés de bordure (border-*) et d'arrière-plan (background-*) et les règles qui permettent de les appliquer sur une boîte donnée. Mais au delà de cet aspect technique, il s'agit aussi de laisser libre cours à votre créativité. Cela ne se fera pas en un jour et certains développeurs web passent beaucoup temps sur ces sujets.
              
 
@@ -35,9 +31,7 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes
 
 
              Créer des cercles
              
 
-
+
 
 
              Voici un exemple à la fois simple et sympa. La propriété {{cssxref("border-radius")}} est utilisée pour arrondir les angles d'une boîte. Que se passe-t-il lorsque la taille du rayon pour l'arrondi est en fait supérieure ou égale à la taille de la boîte ?
              
 
@@ -75,18 +69,16 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes
 
 
              Les arrière-plans
              
 
-
              Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont les propriétés background-*. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.
              
+
              Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont les propriétés background-*. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.
              
 
 
              Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans :
              
 
 
                
- 
              • On peut définir plusieurs arrière-plans pour une boîte. Ceux-ci s'empileront les uns sur les autres comme des couches.
                • 
+ 
              • On peut définir plusieurs arrière-plans pour une boîte. Ceux-ci s'empileront les uns sur les autres comme des couches.
                • 
  
              • Les arrière-plans peuvent être des couleurs unies ou des images. Les couleurs remplissent toute la surface mais les images peuvent être mises à l'échelle et positionnées sur la boîte.
                • 
 
              
 
-
+
 
 
              Passons à la manipulation :
              
 
@@ -123,18 +115,16 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes
 
              {{EmbedLiveSample('Les_arrière-plans', '100%', '200')}}
              
 
 
              
-
              Note : Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter les excellents motifs CSS de Lea Verou. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire notre article dédié.
              
+
              Note : Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter les excellents motifs CSS de Lea Verou. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire notre article dédié.
              
 
              
 
 
              Les pseudo-éléments
              
 
-
              Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser les pseudo-éléments CSS.
              
+
              Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser les pseudo-éléments CSS.
              
 
 
              Un nuage
              
 
-
+
 
 
              Voici un exemple qui illustre comment transformer la boîte en nuage :
              
 
@@ -275,13 +265,11 @@ blockquote i {
 
 
              {{EmbedLiveSample('Une_citation', '100%', '300')}}
              
 
-
              L'assemblage
              
+
              Assemblage
              
 
 
              En fusionnant tout ces aspects, il est possible de créer des effets somptueux. Au fur et à mesure, cela s'équilibrera entre un défi technique et un défi créatif. Pour conclure, par exemple, on peut créer des illusions d'optique :
              
 
-
+
 
 
              Nous allons ici créer un effet d'ombre portée. La propriété {{cssxref("box-shadow")}} permet d'obtenir un effet basique mais en manipulant les pseudo-éléments et la propriété {{cssxref("transform")}}, on peut obtenir un résultat plus naturel.
              
 
@@ -308,8 +296,8 @@ blockquote i {
   transform: rotate(4deg);
 }
              
 
-
              {{EmbedLiveSample("L'assemblage", '100%', '100')}}
              
+
              {{EmbedLiveSample("Assemblage", '100%', '100')}}
              
 
 
              La suite
              
 
-
              Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc à approfondir la gestion des couleurs et des images. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir les bases de la disposition.
              
+
              Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc à approfondir la gestion des couleurs et des images. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir les bases de la disposition.
              
diff --git a/files/fr/learn/css/howto/generated_content/index.html b/files/fr/learn/css/howto/generated_content/index.html
index cd56e36305..aa8656013b 100644
--- a/files/fr/learn/css/howto/generated_content/index.html
+++ b/files/fr/learn/css/howto/generated_content/index.html
@@ -7,154 +7,61 @@ tags:
 translation_of: Learn/CSS/Howto/Generated_content
 original_slug: Apprendre/CSS/Comment/Generated_content
 ---
-
               
              
-
              Cette page décrit plusieurs manières d'utiliser CSS pour ajouter du contenu à un document affiché.
              
-
              Vous modifierez votre feuille de style pour ajouter du contenu textuel et une image.
              
-
              Information : contenu
              
-
              Un des avantages importants de CSS est qu'il vous aide à séparer le style d'un document de son contenu. Cependant, il existe des situations où il n'est pas insensé de spécifier une partie du contenu au sein de la feuille de style plutôt qu'en tant que partie du document
              
-
              Le contenu spécifié dans une feuille de style peut consister en du texte ou des images. Ce contenu peut être spécifié dans une feuille de style lorsqu'il est directement lié à la structure du document.
              
-
              Prérequis :
              - - - - - - -
              - Plus de détails
              Spécifier du contenu dans une feuille de style peut engendrer des complications. Par exemple, vous pouvez avoir des versions de votre document en différentes langues qui partagent la même feuille de style. Si une partie de la feuille de style doit être traduite, cela signifie que vous devez placer cette partie dans des fichiers séparés et vous arranger pour qu'elles soient liées avec les bonnes versions de langue de votre document. -

              Ces complications ne surviendront pas si le contenu spécifié consiste en une série de symboles ou d'images compréhensibles dans toutes les langues et cultures.

              -

              Le contenu spécifié dans une feuille de style ne fait pas partie du DOM.

              -
              -

              Contenu textuel

              -

              CSS peut insérer du texte avant ou après un élément. Pour spécifier cela, créez une règle et ajoutez :before ou :after au sélecteur. Dans la déclaration, spécifiez la propriété content en lui donnant comme valeur le contenu textuel.

              - - - - - - - -
              - Exemple
              Cette règle ajoute le texte Référence : devant chaque élément de la classe ref : -
              - 
              -.ref:before {
+
              {{LearnSidebar}}
              
+
+
              Cet article décrit différentes façons d'utiliser CSS afin d'ajouter du contenu à un document affiché. Vous pouvez modifier votre feuille de style afin d'ajouter du contenu textuel ou des images.
              
+
+
              L'un des avantages majeurs de CSS est qu'il permet de séparer la forme du contenu. Toutefois, il existe des situations où il est pertinent d'indiquer du contenu dans la feuille de style et pas dans le document. Il est possible d'indiquer du contenu textuel ou des images dans une feuille de style lorsque ce contenu est fortement couplé à la structure du document.
              
+
+
              
+
              Note : Le contenu spécifié dans la feuille de style ne fait pas partie du DOM.
              
+
              
+
+
              Ajouter du contenu dans une feuille de style peut engendrer des complications. Ainsi, si vous avez un document disponible en plusieurs langues et que ces versions partagent une même feuille de style, lorsque vous indiquez du contenu dans la feuille de style qui doit être traduit, vous devrez organiser ces parties de la feuille de style dans différents fichiers et faire le nécessaire pour qu'elles soient rattachées aux différentes versions du document.
              
+
+
              Ce problème ne se pose pas si le contenu indiqué est composé de symboles ou d'images qui peuvent s'appliquer dans toutes les langues et pour toutes les cultures.
              
+
+
              Exemples
              
+
+
              Contenu textuel
              
+
+
              CSS peut insérer du contenu textuel avant ou après un élément. Pour cela, on créera une règle en ajoutant {{ cssxref("::before") }} ou {{ cssxref("::after") }} au sélecteur. Dans la déclaration, on utilisera la propriété {{ cssxref("content") }} avec comme valeur le texte à utiliser.
              
+
+
              HTML
              
+
+
              Un texte où j'en ai besoin de <span class="ref"> quelque chose</span>
+
              
+
+
              CSS
              
+
+
              .ref::before {
   font-weight: bold;
   color: navy;
-  content: "Référence : ";
-  }
-
              
-
              -
              - - - - - - - -
              - Plus de détails
              Le jeu de caractères d'une feuille de style est UTF-8 par défaut, mais il peut être spécifié dans le lien, ou dans la feuille de style elle-même, ou d'une autre manière. Pour plus de détails, consultez 4.4 CSS style sheet representation dans la spécification CSS. -

              Des caractères individuels peuvent également être spécifiés à l'aide d'un mécanisme utilisant le backslash (barre oblique inversée) comme caractère d'échappement. Par exemple, \265B est le symbole du jeu d'échecs pour la reine noire ♛. Pour plus de détails, consultez Referring to characters not represented in a character encoding, ainsi que Characters and case dans la spécification CSS.

              -
              -

              Contenu sous forme d'images

              -

              Pour ajouter une image avant ou après un élément, vous pouvez spécifier l'URL d'un fichier image dans la valeur de la propriété content.

              - - - - - - - -
              - Exemple
              Cette règle ajoute un espace et une icône après chaque lien faisant partie de la classe glossaire: -
              - 
              -a.glossaire:after {content: " " url("../images/glossary-icon.gif");}
-
              -
              -
              -


              - Pour ajouter une image comme fond d'un élément, spécifiez l'URL d'un fichier image dans la valeur de la propriété background. C'est une propriété raccourcie qui spécifie la couleur de fond, l'image, son éventuelle répétition, et certains autres détails.

              - - - - - - - -
              - Exemple
              Cette règle change le fond d'un élément spécifique, en utilisant une URL pour indiquer un fichier image. -

              Le sélecteur spécifie l'id de l'élément. La valeur no-repeat fait que l'image apparaîtra une seule fois :

              -
              - 
              -#panneau-lateral {background: url("../images/sidebar-ground.png") no-repeat;}
-
              -
              -
              - - - - - - - -
              - Plus de détails
              Pour plus d'informations sur les propriétés affectant les fonds, et d'autres options qui peuvent être spécifiées pour les images de fond, consultez The background dans la spécification CSS.
              -

              Action : ajout d'une image de fond

              -

              Cette image est un carré blanc avec une ligne bleue en bas. Téléchargez le fichier image dans le même répertoire que votre fichier CSS :

              - - - - - - -
              Image:ligne-bleue.png
              -

              (Par exemple, cliquez avec le bouton de droite pour obtenir un menu contextuel, choisissez Enregistrer l'image sous... et choisissez le répertoire que vous utilisez pour ce tutoriel.)

              -

              Éditez votre fichier CSS et ajoutez cette règle à l'élément body, pour donner une image de fond à la page entière.

              -
              - 
              background: url("ligne-bleue.png");
-
              -
              -

              La valeur repeat est celle par défaut, elle n'a dont pas besoin d'être spécifiée. L'image se répète horizontalement et verticalement, ce qui donne un aspect ressemblant à un papier ligné :

              -
              -

              Image:fond-lignes-bleues.png

              -
              -
              -

              Cascading Style Sheets

              -
              -
              -

              Cascading Style Sheets

              -
              -
              -
              - - - - - - - -
              - Challenge
              Téléchargez cette image : - - - - - - -
              Image:punaise-jaune.png
              -

              Ajoutez une règle à votre feuille de style de manière à ce que l'image soit affichée au début de chaque ligne :

              -
              -

              Image:fond-lignes-bleues.png

              -
              -
              - image:punaise-jaune.png Cascading Style Sheets
              -
              - image:punaise-jaune.png Cascading Style Sheets
              -
              -
              -
              -

              Pour continuer

              -

              Une façon courante d'ajouter du contenu via une feuile de style est de marquer les différents éléments d'une liste.

              -

              La page suivante décrit la manière de spécifier un style pour les éléments d'une liste : Listes.

              + content: "Réference "; +} + +

              Résultat

              + +

              {{ EmbedLiveSample('Contenu_textuel', 600, 30) }}

              + +

              L'encodage d'une feuille de styles est UTF-8 par défaut mais cela peut être défini dans le lien, dans la feuille de style même ou d'autres façons. Pour plus de détails, voir 4.4 Représentation de la feuille de style CSS dans la spécification CSS.

              + +

              Des caractères individuels peuvent également être spécifiés avec un échappement avec la barre oblique inversée. Ainsi, "\265B" pourra être utilisé pour générer le symbole de la reine noire aux échecs : ♛. Pour plus de détails, voir Référencer des caractères non représentés par l'encodage et Caractères et casse dans la spécification CSS.

              + +

              Contenu_avec_une_image

              + +

              Afin d'ajouter une image avant ou après un élément, vous pouvez indiquer l'URL d'un fichier image dans la valeur de la propriété {{ cssxref("content") }}.

              + +

              Cette règle ajoute un espace et une icône après chaque lien qui possède la classe glossary :

              + +

              HTML

              + +
              <a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a>
              + +

              CSS

              + +
              a.glossary::after {
+   content: " " url("glossary-icon.gif");
+}
              + +

              {{ EmbedLiveSample('Contenu_avec_une_image', 600, 40) }}

              diff --git a/files/fr/learn/css/howto/index.html b/files/fr/learn/css/howto/index.html index aabbb12aa7..d14cb33a16 100644 --- a/files/fr/learn/css/howto/index.html +++ b/files/fr/learn/css/howto/index.html @@ -8,57 +8,50 @@ tags: translation_of: Learn/CSS/Howto original_slug: Apprendre/CSS/Comment --- -

               

              - -

              Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.

              +

              Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.

              Scénarios fréquents

              -
              -
              -

              Basess

              +

              Bases

              CSS et texte

              -
              -
              +

              Boîtes et mises en page

              -
              -

              Techniques avancées ou peu communes

              @@ -67,15 +60,15 @@ original_slug: Apprendre/CSS/Comment

              Général

              Effets avancés

              Mise en page

              @@ -83,9 +76,9 @@ original_slug: Apprendre/CSS/Comment

              Voir aussi

              -

              CSS FAQ — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs.

              +

              CSS FAQ — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs.

              diff --git a/files/fr/learn/css/index.html b/files/fr/learn/css/index.html index 7af85e54ec..0d3547603f 100644 --- a/files/fr/learn/css/index.html +++ b/files/fr/learn/css/index.html @@ -31,7 +31,7 @@ original_slug: Apprendre/CSS
            • du JavaScript et sur la manière de l'utiliser pour ajouter des fonctionnalités dynamiques aux pages web.
            -

            Une fois compris les principes fondamentaux du HTML, nous vous recommandons d'apprendre HTML et CSS simultanément, en vous déplaçant d'un sujet à l'autre. Car le HTML est beaucoup plus intéressant et beaucoup plus amusant à apprendre en appliquant les CSS : vous ne pouvez pas apprendre réellement les CSS sans connaître le HTML.

            +

            Une fois compris les principes fondamentaux du HTML, nous vous recommandons d'apprendre HTML et CSS simultanément, en vous déplaçant d'un sujet à l'autre. Car le HTML est beaucoup plus intéressant et beaucoup plus amusant à apprendre en appliquant les CSS : vous ne pouvez pas apprendre réellement les CSS sans connaître le HTML.

            Avant de commencer cet article, vous devez aussi avoir, au minimum, une connaissance de base de l'utilisation de l'ordinateur et de celle, passive, du Web (c'est-à-dire, faire des recherches et consommer du contenu). Vous devez aussi avoir paramétré un environnement de travail de base tel que détaillé dans Installer les logiciels de base et avoir compris comment créer et gérer des fichiers, comme indiqué dans Gérer des fichiers — les deux font partie de notre module Débuter avec le Web, rédigé pour les débutants.

            diff --git a/files/fr/learn/css/styling_text/fundamentals/index.html b/files/fr/learn/css/styling_text/fundamentals/index.html index c43c2fdd55..1aa02da170 100644 --- a/files/fr/learn/css/styling_text/fundamentals/index.html +++ b/files/fr/learn/css/styling_text/fundamentals/index.html @@ -16,13 +16,13 @@ original_slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte
            {{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
            -

            Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec {{glossary("CSS")}}. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres.

            +

            Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec {{glossary("CSS")}}. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres.

            - +
            - + @@ -36,7 +36,7 @@ original_slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte

            Comme vous l'avez déjà vu dans votre apprentissage de HTML et CSS, le texte d'un élément est placé à l'intérieur de la boîte de contenu de cet élément. Il débute en haut à gauche de cette zone (ou en haut à droite, dans le cas des contenus en langues s'écrivant de droite à gauche) et se poursuit vers la fin de la ligne. Arrivé en bout de ligne, il descend à la ligne suivante et continue, puis va à la ligne suivante, jusqu'à ce que tout le contenu ait été placé. Les contenus textuels se comportent comme une suite d'éléments en ligne placés les uns à côté des autres. Aucun saut de ligne n'est créé avant que la fin de la ligne soit atteinte, sauf si vous forcez manuellement le saut de ligne avec l'élément {{htmlelement("br")}}.

            -

            Note : si le paragraphe ci‑dessus vous paraît confus,  pas de problème — revenez en arrière et revoyez l'article sur la théorie du Modèle de boîte avant de poursuivre.

            +

            Note : si le paragraphe ci‑dessus vous paraît confus,  pas de problème — revenez en arrière et revoyez l'article sur la théorie du Modèle de boîte avant de poursuivre.

            Les propriétés CSS utilisées pour le style de texte appartiennent généralement à deux catégories, que nous verrons séparément dans cet article :

            @@ -47,7 +47,7 @@ original_slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte
            -

            Note : Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme ::first-letter (sélectionne la première lettre du texte d'un élément), ::first-line (sélectionne la première ligne du texte d'un élément) ou ::selection (sélectionne le texte actuellement mis en surbrillance par le curseur) .

            +

            Note : Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme ::first-letter (sélectionne la première lettre du texte d'un élément), ::first-line (sélectionne la première ligne du texte d'un élément) ou ::selection (sélectionne le texte actuellement mis en surbrillance par le curseur) .

            Fontes

            @@ -67,7 +67,7 @@ avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares occasions, comme maintenant.</p>
            -

            (NdT : Extrait et traduction approximative de la chanson Tommy the Cat du groupe Primus)

            +

            Note : (NdT : Extrait et traduction approximative de la chanson Tommy the Cat du groupe Primus)

            Vous pouvez trouver l'exemple (en) fini sur Github (voir aussi le code source).

            @@ -76,7 +76,7 @@ occasions, comme maintenant.</p>

            La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}.

            -

            color accepte toutes les unités de couleur des CSS, par exemple :

            +

            color accepte toutes les unités de couleur des CSS, par exemple :

            p {
   color: red;
@@ -84,8 +84,7 @@ occasions, comme maintenant.</p>

            Les paragraphes seront en rouge, au lieu d'être de couleur noire, couleur par défaut du navigateur standard :

            -

            {{ EmbedLiveSample('Couleur', '100%', 220) }}

            @@ -122,7 +120,7 @@ occasions, comme maintenant.</p> - + @@ -138,12 +136,12 @@ occasions, comme maintenant.</p> - + - + @@ -161,11 +159,11 @@ occasions, comme maintenant.</p>
            Prérequis :Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).
            Objectif :
            NomType génériqueType générique Notes
            Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police Courier New appelée Courier. Il est recommandé d'utiliser les deux avec Courier New comme alternative préférée.
            GeorgiaGeorgia serif  
            Times New RomanTimes New Roman serif Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police Times New Roman appelée Times. Il est recommandé d'utiliser les deux avec Times New Roman comme alternative préférée.
            -

            Note : Le site cssfontstack.com met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage.

            +

            Note : Le site cssfontstack.com met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage.

            -

            Note : Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : les polices web. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.

            +

            Note : Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : les polices web. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.

            Polices par défaut

            @@ -186,27 +184,27 @@ occasions, comme maintenant.</p>
    serif Les polices qui ont des sérifs (fioritures et autres petits détails que vous voyez en extrémité de trait dans certaines polices)Mon grand éléphant rougeMon grand éléphant rouge
    sans-serif Les polices qui n'ont pas d'empattementsMon grand éléphant rougeMon grand éléphant rouge
    monospace Les polices dans lesquelles chaque caractère a la même largeur, généralement utilisées dans les listes de codes.Mon grand éléphant rougeMon grand éléphant rouge
    cursive Les polices destinées à émuler l'écriture, avec des traits fluides et connectés.Mon grand éléphant rougeMon grand éléphant rouge
    fantasy Les polices destinées à être décoratives.Mon grand éléphant rougeMon grand éléphant rouge
    @@ -219,12 +217,12 @@ occasions, comme maintenant.</p> font-family: "Trebuchet MS", Verdana, sans-serif; } -

    Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si cette police est disponible sur la machine. Si c'est le cas, il applique cette police aux éléments sélectionnés. Sinon, il passe à la police suivante et ainsi de suite.

    +

    Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si cette police est disponible sur la machine. Si c'est le cas, il applique cette police aux éléments sélectionnés. Sinon, il passe à la police suivante et ainsi de suite.

    Indiquer un nom de police générique approprié en fin de liste est une bonne idée : si aucune des polices listées n'est disponible, le navigateur peut au‑moins fournir quelque chose de convenable. Soulignons ce point : les paragraphes seront rendus avec la police serif par défaut du navigateur si aucune autre option n'est disponible — généralement Time New Roman — mais ce ne sera pas un bon substitut à une police sans-serif !

    -

    Note : Les noms de police comportant plus d'un mot — comme Trebuchet MS — doivent être entourés de guillemets, par exemple "Trebuchet MS".

    +

    Note : Les noms de police comportant plus d'un mot — comme Trebuchet MS — doivent être entourés de guillemets, par exemple "Trebuchet MS".

    Un exemple de font-family

    @@ -238,8 +236,7 @@ occasions, comme maintenant.</p>

    Cela donne le résultat suivant :

    -

    {{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}

    Taille de la police de caractères

    -

    Dans l'article Valeurs et unités CSS de notre prédédent module, nous avons vu les unités de longueur et taille. La taille des polices de caractères (définie avec la propriété {{cssxref("font-size")}}) accepte la plupart des unités de valeur (et d'autres comme les pourcentages). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont :

    +

    Dans l'article Valeurs et unités CSS de notre prédédent module, nous avons vu les unités de longueur et taille. La taille des polices de caractères (définie avec la propriété {{cssxref("font-size")}}) accepte la plupart des unités de valeur (et d'autres comme les pourcentages). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont :

    La propriété font-size d'un élément est héritée de son parent. Tout commence par l'élément racine de l'ensemble du document — {{htmlelement("html")}} — dont la propriété font‑size est normée à 16 px sur les navigateurs. Tout paragraphe (ou tout autre élément dont la taille n'a pas été définie différemment par le navigateur) à l'intérieur de l'élément racine aura une taille finale de 16 px. D'autres éléments peuvent avoir des tailles par défaut différentes, par exemple un élément {{htmlelement ("h1")}} a une taille de 2 em définie par défaut, donc aura une taille finale de 32 px.

    @@ -281,8 +277,7 @@ occasions, comme maintenant.</p>

    Notre nouveau résultat ressemble à :

    - 
    html {
   font-size: 10px;
@@ -325,7 +319,7 @@ p {
  
  
  • {{cssxref("font-weight")}} : définit la graisse du texte. La propriété peut avoir de nombreuses valeurs s'il y a de nombreuses variantes de polices disponibles (comme -light, -normal, -bold, -extrabold, -black, etc.), mais en réalité, vous les utiliserez rarement en dehors de normal et bold (gras):
   
      
-   
    • normal, bold : graisse de la police, normale ou bold.
      • 
+   
    • normal, bold : graisse de la police, normale ou bold.
      • 
    
    • lighter, bolder : définit la graisse de l'élément courant de sorte qu'il soit un cran moins gras ou plus gras que son parent.
      • 
    
    • 100–900 : valeurs numériques du taux de graisse ; elles permettent un dosage plus fin que les mots-clés ci-dessus, si nécessaire.
      • 
   
    
@@ -333,28 +327,27 @@ p {
  
  • {{cssxref("text-transform")}} : Vous permet de définir les transformations de votre police. Les valeurs comprennent :
   
      
    
    • none : aucune transformation.
      • 
-   
    • uppercase : met tout le texte en majuscules.
      • 
+   
    • uppercase : met tout le texte en majuscules.
      • 
    
    • lowercase : met tout le texte en minuscules.
      • 
-   
    • capitalize : transforme tous les mots en mettant leur première lettre en majuscules.
      • 
+   
    • capitalize : transforme tous les mots en mettant leur première lettre en majuscules.
      • 
    
    • full-width : force l'écriture de tous les glyphes dans un carré de largeur fixe, similaire à une police à espacement fixe, permettant leur alignement, par ex. caractères latins avec des glyphes de langue asiatique (comme le chinois, le japonais, le coréen.)
      • 
   
    
  
    • 
  
  • {{cssxref("text-decoration")}} : active ou désactive les décorations de texte sur les polices (vous les utiliserez principalement pour désactiver le soulignement par défaut sur les liens lors de leur création). Les valeurs disponibles sont :
   
      
    
    • none: désactive les décorations du texte déjà présentes.
      • 
-   
    • underline: souligne le texte.
      • 
-   
    • overline: trace une ligne au-dessus du texte.
      • 
-   
    • line-through: barre le texte.
      • 
+   
    • underline: souligne le texte.
      • 
+   
    • overline: trace une ligne au-dessus du texte.
      • 
+   
    • line-through: barre le texte.
      • 
   
    
-  Vous devez noter que {{cssxref("text-decoration")}} peut accepter plusieurs valeurs à la fois, si vous voulez en ajouter plusieurs simultanément, par exemple text-decoration: underline overline. Notez aussi que {{cssxref("text-decoration")}} est la propriété raccourcie pour {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("text-decoration-color")}}. Vous pouvez utiliser des combinaisons de ces valeurs de propriété pour créer des effets intéressants, par exemple text-decoration: line-through red wavy.
    • 
+  Vous devez noter que {{cssxref("text-decoration")}} peut accepter plusieurs valeurs à la fois, si vous voulez en ajouter plusieurs simultanément, par exemple text-decoration: underline overline. Notez aussi que {{cssxref("text-decoration")}} est la propriété raccourcie pour {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("text-decoration-color")}}. Vous pouvez utiliser des combinaisons de ces valeurs de propriété pour créer des effets intéressants, par exemple text-decoration: line-through red wavy.
 
 
 
    Regardons l'ajout de quelques-unes de ces propriétés à notre exemple.
    
 
 
    Notre nouveau résultat ressemble à :
    
 
-
 
-
    html {
+
 
-
    une liste ordonnée avec les puces intégrées au texte des éléments de la liste.
    
+
    une liste ordonnée avec les puces intégrées au texte des éléments de la liste.
    
 
 
    Utilisation d'une puce image personnalisée
    
 
@@ -179,7 +179,7 @@ dd {
   list-style-image: url(star.svg);
 }
    
 
-
    Cependant, cette propriété est un peu limitée en terme de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés de {{cssxref ("background")}}, dont vous apprendrez beaucoup plus dans le module  Styliser les boîtes. Pour l'instant, voici un avant-goût !
    
+
    Cependant, cette propriété est un peu limitée en terme de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés de {{cssxref ("background")}}, dont vous apprendrez beaucoup plus dans le module  Styliser les boîtes. Pour l'instant, voici un avant-goût !
    
 
 
    Dans notre exemple achevé, nous avons appliqué un style à la liste non ordonnée (en plus de ce que vous avez déjà vu ci-dessus) comme ceci :
    
 
@@ -213,7 +213,7 @@ ul li {
 
 
    Ceci nous donne le résultat suivant :
    
 
-
    une liste non ordonnée avec les puces définies comme de petites images d'étoiles.
    
+
    une liste non ordonnée avec les puces définies comme de petites images d'étoiles.
    
 
 
    Raccourci de style de liste
    
 
@@ -269,7 +269,7 @@ ul li {
 
 
    Valeurs individualisées
    
 
-
    L'attribut {{htmlattrxref("value","ol")}} vous permet de numéroter les éléments de liste avec des valeurs numériques de votre choix . L'exemple suivant :
    
+
    L'attribut {{htmlattrxref("value","ol")}} vous permet de numéroter les éléments de liste avec des valeurs numériques de votre choix . L'exemple suivant :
    
 
 
    <ol>
   <li value="2">Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li>
@@ -283,7 +283,7 @@ ul li {
 
    {{ EmbedLiveSample('Valeurs_individualisées', '100%', 150) }}
    
 
 
    
-
    Note : Même si vous utilisez une propriété {{cssxref ("type-style-list")}}  avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut value.
    
+
    Note : Même si vous utilisez une propriété {{cssxref ("type-style-list")}}  avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut value.
    
 
    
 
 
    Apprentissage actif : définir le style d'une liste imbriquée
    
@@ -299,10 +299,7 @@ ul li {
 
 
    Si vous faites une erreur, vous pourrez toujours tout remettre à zéro avec le bouton Réinitialiser. Si vous êtes vraiment bloqué, pressez le bouton Voir la solution pour voir une réponse possible.
    
 
-
 
-
    {{ EmbedLiveSample('Playable_code', 700, 800) }}
    
+
    {{ EmbedLiveSample("Apprentissage_actif_définir_le_style_d'une_liste_imbriquée", 700, 800) }}
    
 
 
    Voir aussi
    
 
@@ -391,6 +388,6 @@ window.addEventListener("load", drawOutput);
  
  • Initiation à la mise en forme du texte
    • 
  
  • Style de listes
    • 
  
  • Mise en forme des liens
    • 
- 
  • Polices de caractères web
    • 
- 
  • Composition d'une page d'accueil d'une école communale
    • 
+ 
  • Polices de caractères web
    • 
+ 
  • Composition d'une page d'accueil d'une école communale
    • 
 
diff --git a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html
index 9cc49e8056..d237b8f377 100644
--- a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html
+++ b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html
@@ -17,9 +17,9 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage
 
 
    {{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
    
 
-
    Dans cette évaluation, nous testerons votre compréhension de toutes les techniques pour la composition de textes à l'écran présentées au cours de ce module : elle consiste à créer la page d'accueil du site d'une école communale. Vous ne devriez avoir que du plaisir tout au long de ce parcours.
    
+
    Dans cette évaluation, nous testerons votre compréhension de toutes les techniques pour la composition de textes à l'écran présentées au cours de ce module : elle consiste à créer la page d'accueil du site d'une école communale. Vous ne devriez avoir que du plaisir tout au long de ce parcours.
    
 
-
+
    
@@ -42,7 +42,7 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage
 
    
-
    Note : Autrement, il reste possible d'utiliser un site comme JSBin ou Thimble pour faire votre évaluation. Collez le HTML et remplissez la CSS dans l'un de ces éditeurs en ligne ; utilisez cet URL pour pointer sur l'image de fond. Si l'éditeur en ligne que vous utilisez n'a pas de panneau CSS séparé, vous pouvez l'intégrer dans un élément <style> de l'élément head du document.
    
+
    Note : Autrement, il reste possible d'utiliser un site comme JSBin ou Thimble pour faire votre évaluation. Collez le HTML et remplissez la CSS dans l'un de ces éditeurs en ligne ; utilisez cet URL pour pointer sur l'image de fond. Si l'éditeur en ligne que vous utilisez n'a pas de panneau CSS séparé, vous pouvez l'intégrer dans un élément <style> de l'élément head du document.
    
 
    Énoncé de l'exercice
    
@@ -103,7 +103,7 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage
 
 
    La capture d'écran ci-après montre un exemple possible du design terminé :
    
 
-
    
+
    Évaluation
    
 
@@ -121,6 +121,6 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage
  
  • Initiation à la mise en forme du texte
  • Style de listes
  • Mise en forme des liens
    • 
- 
  • Polices de caractères web
    • 
+ 
  • Polices de caractères web
  • Composition d'une page d'accueil d'une école de communauté
    • 
diff --git a/files/fr/learn/css/styling_text/web_fonts/index.html b/files/fr/learn/css/styling_text/web_fonts/index.html
index 64724b25db..f1cafd3f21 100644
--- a/files/fr/learn/css/styling_text/web_fonts/index.html
+++ b/files/fr/learn/css/styling_text/web_fonts/index.html
@@ -7,13 +7,13 @@ translation_of: Learn/CSS/Styling_text/Web_fonts
 
 
    {{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
    
 
-
    Dans le premier article du module, nous avons exploré les fonctions CSS de base disponibles pour composer du texte. Dans cet article, nous allons plus loin et explorons les polices web en détail : comment télécharger des polices personnalisées en même temps que la page Web, pour donner un style plus varié et personnalisé au texte.
    
+
    Dans le premier article du module, nous avons exploré les fonctions CSS de base disponibles pour composer du texte. Dans cet article, nous allons plus loin et explorons les polices web en détail : comment télécharger des polices personnalisées en même temps que la page Web, pour donner un style plus varié et personnalisé au texte.
    
 
-
    
  
   
    
    Prérequis :
 
 
 
 
 
 
  
  
  
 
    
+
    
-   
+   
@@ -61,7 +61,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts
 
    
-
    Note : La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 !
    
+
    Note : La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 !
    
 
    Apprentissage actif : un exemple de fonte web
    
@@ -87,7 +87,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts
 
    Dans chaque cas, décompressez le paquet de la fonte (les fontes Web sont généralement distribuées dans des fichiers ZIP contenant les fichiers de police et l'information de licence). Vous pouvez trouver plusieurs fichiers de polices dans le paquet — certaines fontes sont distribuées sous forme de familles avec plusieurs variantes disponibles, par exemple fine, moyenne, grasse, italique, italique fine, etc. Pour cet exemple, ne vous interessez qu'à un seul fichier pour chacun des deux cas.
    
-
    Note : Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher.
    
+
    Note : Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher.
    
 
    Créer le code requis
    
@@ -127,10 +127,10 @@ translation_of: Learn/CSS/Styling_text/Web_fonts
 
 
    Vous devriez obtenir une page de démonstration avec les belles polices implémentées ci‑dessus. Comme les diverses polices sont créées en différentes tailles, il se peut que vous deviez ajuster la taille, l'espacement, etc. pour parfaire l'aspect.
    
 
-
    
+
    
-
    Note : Si vous avez des problèmes pour faire fonctionner votre travail, n'hésitez pas à comparer votre version à nos fichiers finis — voyez web-font-finished.html et web-font-finished.css (lancez l'exemple terminé directement).
    
+
    Note : Si vous avez des problèmes pour faire fonctionner votre travail, n'hésitez pas à comparer votre version à nos fichiers finis — voyez web-font-finished.html et web-font-finished.css (lancez l'exemple terminé directement).
    
 
    Utiliser un service de polices en ligne
    
@@ -151,7 +151,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts
 
    
-
    Note : Vous pourrez trouver une version complétée sur google-font.html et google-font.css, si vous avez besoin de vérifier votre travail par rapport au nôtre (voir en direct).
    
+
    Note : Vous pourrez trouver une version complétée sur google-font.html et google-font.css, si vous avez besoin de vérifier votre travail par rapport au nôtre (voir en direct).
    
 
    @font-face plus en détail
    
@@ -179,7 +179,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts
 
    
-
    Note : Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}} : c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. Creating Custom Font Stacks with Unicode-Range (Création de piles de fontes personnalisées en définissant des plages unicode) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété.
    
+
    Note : Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}} : c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. Creating Custom Font Stacks with Unicode-Range (Création de piles de fontes personnalisées en définissant des plages unicode) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété.
    
 
    Résumé
    
@@ -199,5 +199,5 @@ translation_of: Learn/CSS/Styling_text/Web_fonts
  
  • Style de listes
  • Mise en forme des liens
  • Polices de caractères web
    • 
- 
  • Composition d'une page d'accueil d'une école de communauté
    • 
+ 
  • Composition d'une page d'accueil d'une école de communauté
    • 
diff --git a/files/fr/learn/forms/advanced_form_styling/index.html b/files/fr/learn/forms/advanced_form_styling/index.html
index b34fcc2065..040507b63e 100644
--- a/files/fr/learn/forms/advanced_form_styling/index.html
+++ b/files/fr/learn/forms/advanced_form_styling/index.html
@@ -1,20 +1,12 @@
 ---
 title: Composition avancée des formulaires HTML
 slug: Learn/Forms/Advanced_form_styling
-tags:
-  - Avancé
-  - CSS
-  - Exemple
-  - Formulaires
-  - Guide
-  - HTML
-  - Web
 translation_of: Learn/Forms/Advanced_form_styling
 original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms
 ---
 
    {{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}}
    
 
-
    Dans cet article, nous verrons comment utiliser les CSS avec les formulaires HTML pour modifier le style de certains widgets difficiles à personnaliser. Comme nous l'avons vu dans l'article précédent, les champs texte et les boutons sont parfaitement compatibles avec les CSS. Maintenant, nous allons approfondir la part sombre de la composition stylistique des formulaires HTML.
    
+
    Dans cet article, nous verrons comment utiliser les CSS avec les formulaires HTML pour modifier le style de certains widgets difficiles à personnaliser. Comme nous l'avons vu dans l'article précédent, les champs texte et les boutons sont parfaitement compatibles avec les CSS. Maintenant, nous allons approfondir la part sombre de la composition stylistique des formulaires HTML.
    Avant d'aller plus loin, faisons un rappel pour deux types de widgets de formulaires :
    
 
@@ -32,7 +24,7 @@ original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms
 
    L'évolution récente du HTML et des CSS a étendu l'expressivité des CSS :
      
- 
    • CSS 2.1 était très limité et n'offrait que trois pseudo-classes :
+ 
    • CSS 2.1 était très limité et n'offrait que trois pseudo-classes :
 
   
        
    
      • {{cssxref(":active")}}
        • 
@@ -40,7 +32,7 @@ original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms
    
      • {{cssxref(":hover")}}
        • 
   
      
  
      • 
- 
    • CSS Selector Level 3 a ajouté quelques nouvelles pseudo-classes relatives aux formulaires HTML :
+ 
    • CSS Selector Level 3 a ajouté quelques nouvelles pseudo-classes relatives aux formulaires HTML :
   
        
    
      • {{cssxref(":enabled")}}
        • 
    
      • {{cssxref(":disabled")}}
        • 
@@ -48,7 +40,7 @@ original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms
    
      • {{cssxref(":indeterminate")}}
        • 
   
      
  
      • 
- 
    • CSS Basic UI Level 3 a ajouté quelques autres pseudo-classes pour décrire l'état du widget :
+ 
    • CSS Basic UI Level 3 a ajouté quelques autres pseudo-classes pour décrire l'état du widget :
   
        
    
      • {{cssxref(":default")}}
        • 
    
      • {{cssxref(":valid")}}
        • 
@@ -61,7 +53,7 @@ original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms
    
      • {{cssxref(":read-write")}}
        • 
   
      
  
      • 
- 
    • CSS Selector Level 4 actuellement en développement actif et objet de grandes discussions ne prévoit pas d'ajouter grand‑chose pour améliorer les formulaires :
+ 
    • CSS Selector Level 4 actuellement en développement actif et objet de grandes discussions ne prévoit pas d'ajouter grand‑chose pour améliorer les formulaires :
   
        
    
      • {{cssxref(":user-error")}} qui est juste une amélioration de la pseudo‑classe {{cssxref(":invalid")}}.
        • 
   
      
@@ -73,16 +65,16 @@ original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms
 
      Il y a quelques expérimentations par les fournisseurs de navigateurs pour étendre l'expressivité des CSS sur les formulaires ; dans certains cas, il est bon de savoir ce qui est disponible..
      
 
 
      
-
      Avertissement : Même si ces expérimentations sont intéressantes, elles ne sont pas normées, ce qui signifie qu'elles ne sont pas fiables. Si vous les utilisez (et vous ne devriez probablement pas le faire souvent), vous le faites à vos propres risques et périls ; vous faites quelque chose qui peut être mauvais pour le Web en utilisant des propriétés non standard.
      
+
      Attention : Même si ces expérimentations sont intéressantes, elles ne sont pas normées, ce qui signifie qu'elles ne sont pas fiables. Si vous les utilisez (et vous ne devriez probablement pas le faire souvent), vous le faites à vos propres risques et périls ; vous faites quelque chose qui peut être mauvais pour le Web en utilisant des propriétés non standard.
      
 
      
 
 
        
  
      • Extensions des CSS Mozilla 
 
   
          
-   
        • {{cssxref(":-moz-placeholder")}}
          • 
+   
        • {{cssxref(":placeholder-shown")}}
          • 
    
        • {{cssxref(":-moz-submit-invalid")}}
          • 
-   
        • {{cssxref(":-moz-ui-invalid")}}
          • 
+   
        • {{cssxref(":user-invalid")}}
          • 
    
        • {{cssxref(":-moz-ui-valid")}}
          • 
   
        
  
        • 
@@ -99,15 +91,15 @@ original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms
  
 
      
 
-
      Contrôle de l'apparence des éléments de formulaire
      
+
      Contrôle du style des éléments de formulaire
      
 
 
      Les navigateurs fondés sur WebKit- (Chrome, Safari) et Gecko- (Firefox) offrent les meilleures possibilités de personnalisation des widgets HTML. Ils sont aussi disponibles sur plateforme croisées, et donc ils nécessitent un mécanisme de bascule entre les widgets de « look and feel » natif  et widget stylistiquement composables par l'utilisateur.
      
 
-
      À cette fin, ils utilisent une propriété propriétaire : {{cssxref("-webkit-appearance")}} ou {{cssxref("-moz-appearance")}}. Ces propriétés ne sont pas normées et ne doivent pas être utilisées. En fait, elles se comportent même différemment entre WebKit et Gecko. Cependant, il y a une valeur qu'il est bon de connaître : none. Avec cette valeur, vous êtes en mesure d'obtenir un contrôle (presque total) sur le style des widgets donnés.
      
+
      À cette fin, ils utilisent une propriété propriétaire : {{cssxref("-webkit-appearance")}} ou {{cssxref("appearance")}}. Ces propriétés ne sont pas normées et ne doivent pas être utilisées. En fait, elles se comportent même différemment entre WebKit et Gecko. Cependant, il y a une valeur qu'il est bon de connaître : none. Avec cette valeur, vous êtes en mesure d'obtenir un contrôle (presque total) sur le style des widgets donnés.
      
 
 
      Donc, si vous avez du mal à appliquer un style à un élément, essayez d'utiliser ces propriétés propriétaires. Nous verrons quelques exemples ci-dessous, mais le cas d'utilisation le plus connu de cette propriété est relatif au style des champs de recherche sur les navigateurs WebKit :
      
 
-
      <style>
+
      <style>
 input[type=search] {
     border: 1px dotted #999;
     border-radius: 0;
@@ -120,10 +112,10 @@ input[type=search] {
     <input type="search">
 </form>
      
 
-
      {{EmbedLiveSample("Contrôle_de_l'apparence_des_éléments_de_formulaire", 250, 40)}}
      
+
      {{EmbedLiveSample("Contrôle_du_style_des_éléments_de_formulaire", 250, 40)}}
      
 
 
      
-
      Note : Il est toujours difficile de prédire l'avenir, quand on parle de techniques Web. L'extension des possibilités d'expression des CSS est difficile ; il y a un travail exploratoire avec d'autres spécifications, telles que Shadow DOM qui offrent certaines perspectives. La quête du formulaire de style totalement composable est loin d'être terminée.
      
+
      Note : Il est toujours difficile de prédire l'avenir, quand on parle de techniques Web. L'extension des possibilités d'expression des CSS est difficile ; il y a un travail exploratoire avec d'autres spécifications, telles que Shadow DOM qui offrent certaines perspectives. La quête du formulaire de style totalement composable est loin d'être terminée.
      
 
      
 
 
      Exemples
      
@@ -160,38 +152,38 @@ input[type=checkbox] {
  
    
-   
+   
-   
+   
-   
+   
-   
+   
-   
+   
-   
+   
-   
+   
    
  
   
    
    Prérequis :Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).
   
    
   
    
    Objectif :
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
  
 
 
 
 
 
    
   
    
    Firefox 57 (Mac OSX)
   
    
   
    
    Firefox 57 (Windows 10)
   
    
   
    
    Chrome 63 (Mac OSX)
   
    
   
    
    Chrome 63 (Windows 10)
   
    
   
    
    Opera 49 (Mac OSX)
   
    
   
    
    Internet Explorer 11 (Windows 10)
   
    
   
    
    Edge 16 (Windows 10)
   
    
      
 
    
 
 
    Un exemple un peu plus compliqué
    
 
-
    Comme Opera et Internet Explorer n'ont pas de fonctionnalités telles que {{cssxref("-webkit-appearance")}} ou {{cssxref("-moz-appearance")}}, leur utilisation n'est pas appropriée. Heureusement, nous sommes dans un cas où les CSS disposent d'assez d'expressions pour trouver des solutions. Prenons un exemple courant :
    
+
    Comme Opera et Internet Explorer n'ont pas de fonctionnalités telles que {{cssxref("-webkit-appearance")}} ou {{cssxref("appearance")}}, leur utilisation n'est pas appropriée. Heureusement, nous sommes dans un cas où les CSS disposent d'assez d'expressions pour trouver des solutions. Prenons un exemple courant :
    
 
 
    <form>
   <fieldset>
@@ -246,7 +238,7 @@ p+p {
 
 
    Le plan consiste à remplacer la case à cocher native par une image de notre choix. Tout d'abord, nous devons préparer une image avec tous les états requis pour une case à cocher. Ces états sont : non coché, coché, non coché désactivé et coché désactivé. Cette image sera utilisée comme fantôme des CSS :
    
 
-
    Check box CSS Sprite
    
+
    Check box CSS Sprite
    
 
 
    Commençons par masquer les cases à cocher d'origine. Nous les déplacerons simplement à l'extérieur de la fenêtre de visualisation de la page. Il y a deux choses importantes à considérer ici :
    
 
@@ -261,7 +253,7 @@ p+p {
   left: -1000em;
 }
    
 
-
    Maintenant que nous sommes débarrassés des cases à cocher natives, ajoutons la nôtre. Pour cela, nous utiliserons le pseudo élément {{cssxref(":before")}} de l'élément {{HTMLElement("label")}} qui suit la case à cocher originale. Ainsi, dans le sélecteur suivant, nous utilisons le sélecteur d'attributs pour cibler la case à cocher, puis nous utilisons le sélecteur de parents adjacent pour cibler le label suivant la case à cocher originale. Enfin, nous accédons au pseudo-élément {{cssxref(":before")}} et le styliser pour qu'il affiche notre case à cocher personnalisée non cochée.
    
+
    Maintenant que nous sommes débarrassés des cases à cocher natives, ajoutons la nôtre. Pour cela, nous utiliserons le pseudo élément {{cssxref("::before")}} de l'élément {{HTMLElement("label")}} qui suit la case à cocher originale. Ainsi, dans le sélecteur suivant, nous utilisons le sélecteur d'attributs pour cibler la case à cocher, puis nous utilisons le sélecteur de parents adjacent pour cibler le label suivant la case à cocher originale. Enfin, nous accédons au pseudo-élément {{cssxref("::before")}} et le styliser pour qu'il affiche notre case à cocher personnalisée non cochée.
    
 
 
    :root input[type=checkbox] + label:before {
   content: "";
@@ -351,52 +343,52 @@ option {
  
   
    Firefox 57 (Mac OSX)
-   
-   
-   
-   
+   
+   
+   
+   
   
   
    Firefox 57 (Windows 10)
-   
-   
-   
-   
+   
+   
+   
+   
   
   
    Chrome 63 (Mac OSX)
-   
-   
-   
-   
+   
+   
+   
+   
   
   
    Chrome 63 (Windows 10)
-   
-   
-   
-   
+   
+   
+   
+   
   
   
    Opera 49 (Mac OSX)
-   
-   
-   
-   
+   
+   
+   
+   
   
   
    IE11 (Windows 10)
-   
-   
-   
-   
+   
+   
+   
+   
   
   
    Edge 16 (Windows 10)
-   
-   
-   
-   
+   
+   
+   
+   
   
  
 
@@ -442,7 +434,7 @@ option {
 
 
    Bien qu'il y ait encore des points noirs avec l'utilisation des CSS dans les formulaires HTML, il y a souvent moyen de les contourner. Il n'existe pas de solution générale et nette, mais les navigateurs modernes offrent de nouvelles possibilités. Pour l'instant, la meilleure solution est d'en savoir plus sur la façon dont les divers navigateurs prennent en charge les CSS, telles qu'appliquées aux widgets de formulaires HTML.
    
 
-
    Dans le prochain article de ce guide, nous explorerons comment les différents widgets de formulaire HTML prennent en charge  les plus importantes propriétés des CSS : Tableau de compatibilité des propriétés entre widgets de formulaire.
    
+
    Dans le prochain article de ce guide, nous explorerons comment les différents widgets de formulaire HTML prennent en charge  les plus importantes propriétés des CSS : Tableau de compatibilité des propriétés entre widgets de formulaire.
    
 
 
    Voir aussi
    
 
@@ -456,15 +448,15 @@ option {
 
    Dans ce module
    
 
 
diff --git a/files/fr/learn/forms/basic_native_form_controls/index.html b/files/fr/learn/forms/basic_native_form_controls/index.html
index 92efc020da..517880bb99 100644
--- a/files/fr/learn/forms/basic_native_form_controls/index.html
+++ b/files/fr/learn/forms/basic_native_form_controls/index.html
@@ -15,13 +15,13 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
    {{LearnSidebar}}
    
 {{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires")}}
    
 
-
    Nous examinerons maintenant en détail les fonctionnalités des divers widgets pour formulaires, en soulignant les options disponibles pour collecter les différents types de données. Ce guide vise à être exhaustif en couvrant tous les widgets natifs de formulaire disponibles.
    
+
    Nous examinerons maintenant en détail les fonctionnalités des divers widgets pour formulaires, en soulignant les options disponibles pour collecter les différents types de données. Ce guide vise à être exhaustif en couvrant tous les widgets natifs de formulaire disponibles.
    
 
-
+
    
-   
+   
@@ -30,10 +30,10 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
  
    
  
   
    
    Prérequis :Notions concernant les ordinateurs et les connaissances de base du HTML.Notions concernant les ordinateurs et les connaissances de base du HTML.
   
    
   
    
    Objectif :
    
 
    
 
-
    Ici, nous nous attarderons sur les widgets de formulaires intégrés aux navigateurs, mais comme les formulaires HTML restent très circonscrits et que la qualité des implémentations peut être très différente d'un navigateur à l'autre, les développeurs web construisent parfois leurs propres widgets de formulaires — voir Comment construire des widgets de formulaires personnalisés plus loin dans ce même module pour plus d'idées à ce propos.
    
+
    Ici, nous nous attarderons sur les widgets de formulaires intégrés aux navigateurs, mais comme les formulaires HTML restent très circonscrits et que la qualité des implémentations peut être très différente d'un navigateur à l'autre, les développeurs web construisent parfois leurs propres widgets de formulaires — voir Comment construire des widgets de formulaires personnalisés plus loin dans ce même module pour plus d'idées à ce propos.
    
 
 
    
-
    Note : La plupart des fonctionnalités discutées dans cet article sont abondamment explicitées dans les navigateurs ; nous soulignerons les exceptions à ce sujet. Si vous voulez plus de précisions, consultez les références aux éléments de formulaires HTML, et en particulier nos références détaillées aux types <input>.
    
+
    Note : La plupart des fonctionnalités discutées dans cet article sont abondamment explicitées dans les navigateurs ; nous soulignerons les exceptions à ce sujet. Si vous voulez plus de précisions, consultez les références aux éléments de formulaires HTML, et en particulier nos références détaillées aux types <input>.
    
 
    
 
 
    Attributs communs
    
@@ -82,7 +82,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
    Les champs {{htmlelement("input")}} de saisie de texte sont les widgets de formulaire les plus élémentaires. Ils sont très pratiques pour permettre à un utilisateur de saisir n'importe quel type de données. Toutefois, certains champs textuels peuvent être spécialisés pour répondre à des besoins précis. Nous avons déjà vu quelques exemples.
    
 
 
    
-
    Note : Les champs textuels dans les formulaires HTML sont des contrôles de saisie de texte brut. Cela signifie que vous ne pouvez pas les utiliser pour réaliser de la mise en forme riche (gras, italique, etc.). Tous les éditeurs de textes évolués que vous rencontrez utilisent des widgets personnalisés créés avec HTML, CSS et JavaScript.
    
+
    Note : Les champs textuels dans les formulaires HTML sont des contrôles de saisie de texte brut. Cela signifie que vous ne pouvez pas les utiliser pour réaliser de la mise en forme riche (gras, italique, etc.). Tous les éditeurs de textes évolués que vous rencontrez utilisent des widgets personnalisés créés avec HTML, CSS et JavaScript.
    
 
    
 
 
    Tous les champs textuels ont des comportement en commun :
    
@@ -95,7 +95,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
 
 
    
-
    Note : L'élément {{htmlelement("input")}} est spécial car il peut être pratiquement n'importe quoi. En réglant simplement ses attributs de type, il peut changer radicalement, et il est utilisé pour créer la plupart des types de widgets de formulaire allant des champs texte sur une seule ligne, contrôles sans entrée de texte, contrôles de date et heure jusqu'aux boutons. Il y a toutefois des exceptions, comme {{htmlelement("textarea")}} pour les entrées multi-lignes. Prenez bien note de ceci en lisant cet article.
    
+
    Note : L'élément {{htmlelement("input")}} est spécial car il peut être pratiquement n'importe quoi. En réglant simplement ses attributs de type, il peut changer radicalement, et il est utilisé pour créer la plupart des types de widgets de formulaire allant des champs texte sur une seule ligne, contrôles sans entrée de texte, contrôles de date et heure jusqu'aux boutons. Il y a toutefois des exceptions, comme {{htmlelement("textarea")}} pour les entrées multi-lignes. Prenez bien note de ceci en lisant cet article.
    
 
    
 
 
     Champs texte sur une seule ligne
    
@@ -103,16 +103,16 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
    On crée un champ texte sur une seule ligne avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} est mis à text (maisi, si vous n'indiquez pas l'attribut {{htmlattrxref("type", "input")}}, text est la valeur par défaut). text est aussi la valeur de repli si celle indiquée pour l'attribut {{htmlattrxref("type", "input")}} est inconnue du navigateur (par exemple, si vous spécifiez type="date" et que le navigateur ne prend pas en charge les sélecteurs de date natifs).
    
 
 
    
-
    Note : Vous trouverez des exemples de tous les types de champ texte sur une ligne dans GitHub à single-line-text-fields.html (voir directement aussi).
    
+
    Note : Vous trouverez des exemples de tous les types de champ texte sur une ligne dans GitHub à single-line-text-fields.html (voir directement aussi).
    
 
    
 
 
    Voici un exemple élémentaire de champ texte sur une ligne :
    
 
-
    <input type="text" id="comment" name="comment" value="Je suis un champ texte">
    
+
    <input type="text" id="comment" name="comment" value="Je suis un champ texte">
    
 
 
    Les champs texte sur une ligne n'ont qu'une seule contrainte : si vous saisissez du texte avec des sauts de ligne, le navigateur les supprime avant d'envoyer les données.
    
 
-
    Screenshots of single line text fields on several platforms.
    
+
    Screenshots of single line text fields on several platforms.
    
 
 
    HTML5 améliore le champ texte élémentaire sur une ligne par ajout de valeurs spéciales pour l'attribut {{htmlattrxref("type","input")}}. Ces valeurs conservent l'élément {{HTMLElement("input")}} en tant que champ texte sur une ligne mais ajoutent quelques contraintes et caractéristiques supplémentaires au champ.
    
 
@@ -120,25 +120,25 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
 
    Ce type de champ est défini en donnant la valeur email à l'attribut {{htmlattrxref("type","input")}} :
    
 
-
        <input type="email" id="email" name="email" multiple>
    
+
        <input type="email" id="email" name="email" multiple>
    
 
 
    Avec ce type , l'utilisateur doit saisir un e‑mail valide dans le champ. Tout autre type de contenu amène le navigateur à émettre une erreur lors de la soumission du formulaire. Notez que cette validation s'opère côté client et est faite par le navigateur :
    
 
-
    Entrée d'un e-mail non valide déclenchant un message d'avertissement « Veuillez saisir une adresse électronique valide »
    
+
    Entrée d'un e-mail non valide déclenchant un message d'avertissement « Veuillez saisir une adresse électronique valide »
    
 
 
    Avec l'attribut {{htmlattrxref("multiple","input")}}, l'utilisateur pourra saisir plusieurs adresses électroniques dans la même entrée (avec une virgule comme séparateur).
    
 
 
    Sur certains périphériques (les mobiles en particulier), un clavier virtuel différent et mieux adapté à la saisie d'adresses électroniques peut être affiché.
    
 
 
    
-
    Note: Vous trouverez plus de détails sur la validation des formulaires dans l'article Validation des données de formulaires.
    
+
    Note : Vous trouverez plus de détails sur la validation des formulaires dans l'article Validation des données de formulaires.
    
 
    
 
 
    Champ pour mot de passe
    
 
 
    Ce type de champ est défini en donnant la valeur password à l'attribut {{htmlattrxref("type","input")}} :
    
 
-
        <input type="password" id="pwd" name="pwd">
    
+
        <input type="password" id="pwd" name="pwd">
    
 
 
    Aucune contrainte de saisie du texte n'est ajoutée, mais la valeur entrée dans le champ est masquée (avec des points ou des astérisques) afin qu'elle ne puisse pas être lue par d'autres.
    
 
@@ -150,17 +150,17 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
 
    Ce type de champ se définit avec la valeur search de l'attribut {{htmlattrxref("type","input")}} :
    
 
-
        <input type="search" id="search" name="search">
    
+
        <input type="search" id="search" name="search">
    
 
 
    La principale différence entre un champ textuel et un champ de recherche est dans l'apparence — souvent, les champs de recherche sont affichés avec des coins arrondis, et/ou avec une « × » à cliquer pour effacer la valeur entrée. Toutefois, une fonction est aussi ajoutée : les valeurs saisies peuvent être automatiquement enregistrées afin d'être utilisées pour compléter des recherches sur plusieurs pages du même site.
    
 
-
    Screenshots of search fields on several platforms.
    
+
    Screenshots of search fields on several platforms.
    
 
 
    Champ pour numéro de téléphone
    
 
 
    Ce type de champ se définit en donnant la valeur tel à l'attribut {{htmlattrxref("type","input")}} :
    
 
-
        <input type="tel" id="tel" name="tel">
    
+
        <input type="tel" id="tel" name="tel">
    
 
 
    À cause de la grande variété de formats de numéros de téléphones à travers le monde, ce type de champ n'ajoute pas de contrainte à la valeur saisie par l'utilisateur. C'est principalement une différence sémantique, bien que sur certains appareils (notamment mobiles) un clavier virtuel différent, mieux adapté à la saisie de numéros de téléphone, puisse être présenté.
    
 
@@ -168,25 +168,27 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
 
    Ce type de champ se définit en donnant la valeur url à l'attribut {{htmlattrxref("type","input")}} :
    
 
-
        <input type="url" id="url" name="url">
    
+
        <input type="url" id="url" name="url">
    
 
 
    Il ajoute une contrainte de validation spéciale du champ ; le navigateur renvoie une erreur si une URL invalide est saisie.
    
 
-
    Note : ce n'est pas parce qu'une URL est bien formée qu'elle pointe vers un emplacement qui existe réellement.
    
+
    
+  
    Note : ce n'est pas parce qu'une URL est bien formée qu'elle pointe vers un emplacement qui existe réellement.
    
+
    
 
 
    
-
    Note : La présence de champs avec contraintes spéciales considérés comme erronés bloquent l'envoi du formulaire. De plus, leur apparence peut être adaptée afin de mettre en évidence l'erreur. Nous allons discuter de cela dans l'article Validation de formulaires.
    
+
    Note : La présence de champs avec contraintes spéciales considérés comme erronés bloquent l'envoi du formulaire. De plus, leur apparence peut être adaptée afin de mettre en évidence l'erreur. Nous allons discuter de cela dans l'article Validation de formulaires.
    
 
    
 
 
    Champs texte multilignes
    
 
 
    Un champ texte sur plusieurs lignes  se définit avec l'élément {{HTMLElement("textarea")}}, et non avec l'élément {{HTMLElement("input")}}.
    
 
-
        <textarea cols="30" rows="10"></textarea>
    
+
        <textarea cols="30" rows="10"></textarea>
    
 
 
    La principale différence entre un champ textarea et un champ monoligne est que, dans un textarea, l'utilisateur peut saisir du texte avec des sauts de ligne en dur (c'est à dire en pressant la touche Retour).
    
 
-
    Screenshots of multi-lines text fields on several platforms.
    
+
    Screenshots of multi-lines text fields on several platforms.
    
 
 
    
 
    Note : Vous trouverez un exemple de champ texte multiligne sur GitHub à l'adresse multi-line-text-field.html (voir aussi directement). Jetez-y un coup d'œil, et remarquez que dans la plupart des navigateurs, la zone de texte est dotée d'une poignée d'étirement en bas à droite pour permettre à l'utilisateur de la redimensionner. Cette capacité de redimensionnement peut être désactivée en réglant la propriété {{cssxref("resize")}} de la zone de texte à none dans les CSS.
    
@@ -239,7 +241,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
 
    Une boîte à sélection est créée avec l'élément {{HTMLElement("select")}} complétée d'un ou plusieurs éléments enfants {{HTMLElement("option")}} définissant les valeurs possibles.
    
 
-
        <select>
+
        <select>
       <option>Banane</option>
       <option>Cerise</option>
       <option>Citron</option>
@@ -247,7 +249,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
 
    Si nécessaire, la valeur par défaut de la boîte de sélection peut être définie en utilisant l'attribut {{htmlattrxref("selected","option")}} dans l'élément {{HTMLElement("option")}} désiré. Les éléments {{HTMLElement("option")}} peuvent être imbriqués dans des éléments {{HTMLElement("optgroup")}} pour créer des groupes de valeurs associées :
    
 
-
        <select>
+
        <select>
       <optgroup label="Fruits">
         <option>Banane</option>
         <option selected>Cerise</option>
@@ -260,7 +262,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
       </optgroup>
     </select>
    
 
-
    Screenshots of single line select box on several platforms.
    
+
    Screenshots of single line select box on several platforms.
    
 
 
    Si un élément {{HTMLElement("option")}} est défini avec l'attribut value, la valeur de cet attribut est envoyée lorsque le formulaire est soumis. Si l'attribut value est omis, le contenu de l'élément {{HTMLElement("option")}} est utilisé comme valeur de la boîte de sélection.
    
 
@@ -272,15 +274,17 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
 
    Dans ce cas toutefois, la boîte d'utilisateur n'affiche plus les valeurs sous forme d'un menu déroulant. Les valeurs sont toutes affichées dans une liste.
    
 
-
        <select multiple>
+
        <select multiple>
       <option>Banane</option>
       <option>Cerise</option>
       <option>Citron</option>
     </select>
    
 
-
    Screenshots of multi-lines select box on several platforms.
    
+
    Screenshots of multi-lines select box on several platforms.
    
 
-
    Note : tous les navigateurs prenant en charge l'élément {{HTMLElement("select")}} prennent aussi en charge l'attribut {{htmlattrxref("multiple","select")}} sur lui.
    
+
    
+  
    Note : tous les navigateurs prenant en charge l'élément {{HTMLElement("select")}} prennent aussi en charge l'attribut {{htmlattrxref("multiple","select")}} sur lui.
    
+
    
 
 
    Contenus auto-complétés
    
 
@@ -290,7 +294,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
 
    Une fois la liste de données affiliée au widget de formulaire, ses options s'utilisent comme complémentation du texte saisi par l'utilisateur ; cela se présente généralement à l'utilisateur sous forme d'une boîte déroulante listant des correspondances possibles avec ce qui doit être saisi dans la boîte.
    
 
-
        <label for="onFruit">Quel est votre fruit préféré ?</label>
+
        <label for="onFruit">Quel est votre fruit préféré ?</label>
     <input type="text" id="onFruit" list="maSuggestion" />
     <datalist id="maSuggestion">
       <option>Pomme</option>
@@ -303,9 +307,11 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
       <option>Poire</option>
     </datalist>
    
 
-
    Note : Selon la norme HTML, l'attribut {{htmlattrxref("list","input")}} et l'élément {{HTMLElement("datalist")}} peuvent s'utiliser avec tout type de widget nécessitant une saisie utilisateur. Toutefois, les modalités de ce fonctionnement ne sont pas claire pour des contrôles autres que textuels (de couleur ou de date par ex.) et les divers navigateurs se comporteront de manière différente selon le cas. Pour cette raison, soyez prudent en utilisant cette fonctionnalité avec autre chose que des champs textuels.
    
+
    
+  
    Note : Selon la norme HTML, l'attribut {{htmlattrxref("list","input")}} et l'élément {{HTMLElement("datalist")}} peuvent s'utiliser avec tout type de widget nécessitant une saisie utilisateur. Toutefois, les modalités de ce fonctionnement ne sont pas claire pour des contrôles autres que textuels (de couleur ou de date par ex.) et les divers navigateurs se comporteront de manière différente selon le cas. Pour cette raison, soyez prudent en utilisant cette fonctionnalité avec autre chose que des champs textuels.
    
+
    
 
-
    Screenshots of datalist on several platforms.
    
+
    Screenshots of datalist on several platforms.
    
 
 
    
 
    Prise en charge de Datalist et recours
    
@@ -314,22 +320,22 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
 
    Pour gérer cela, voici une petite astuce offrant une bonne solution de repli pour ces navigateurs :
    
 
-
    <label for="myFruit">Quel est votre fruit préféré ? (avec repli)</label>
-<input type="text" id="myFruit" name="fruit" list="fruitList">
-
-<datalist id="fruitList">
-  <label for="suggestion">ou choisissez un fruit</label>
-  <select id="suggestion" name="altFruit">
-    <option>Pomme</option>
-    <option>Banane</option>
-    <option>Mûres</option>
-    <option>Airelles</option>
-    <option>Citron</option>
-    <option>Litchi</option>
-    <option>Pêche</option>
-    <option>Poire</option>
-  </select>
-</datalist>
    
+
    <label for="myFruit">Quel est votre fruit préféré ? (avec repli)</label>
+<input type="text" id="myFruit" name="fruit" list="fruitList">
+
+<datalist id="fruitList">
+  <label for="suggestion">ou choisissez un fruit</label>
+  <select id="suggestion" name="altFruit">
+    <option>Pomme</option>
+    <option>Banane</option>
+    <option>Mûres</option>
+    <option>Airelles</option>
+    <option>Citron</option>
+    <option>Litchi</option>
+    <option>Pêche</option>
+    <option>Poire</option>
+  </select>
+</datalist>
    
 
 
    Les navigateurs qui prennent en charge l'élément {{HTMLElement("datalist")}} ignoreront tous les éléments qui ne sont pas {{HTMLElement("option")}} et fonctionneront comme prévu. D'autre part, les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("datalist")}} afficheront l'étiquette et la boîte de sélection. Bien sûr, il y a d'autres façons de gérer ce manque de prise en charge de l'élément {{HTMLElement("datalist")}}, mais c'est la manière la plus simple (d'autres ont besoin de JavaScript).
    
 
@@ -337,11 +343,11 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
  
   
    Safari 6
-   Screenshot of the datalist element fallback with Safari on Mac OS
+   Screenshot of the datalist element fallback with Safari on Mac OS
   
   
    Firefox 18
-   Screenshot of the datalist element with Firefox on Mac OS
+   Screenshot of the datalist element with Firefox on Mac OS
   
  
 
@@ -354,7 +360,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
    Il est important de noter que ces widgets ne se comportent pas tout à fait comme les autres widgets de formulaires. Pour la plupart des widgets, une fois que le formulaire est envoyé, tous les widgets dont l'attribut {{htmlattrxref("name","input")}} est défini sont envoyés, même s'ils ne sont pas renseignés. Dans le cas des éléments à cocher, leurs valeurs ne sont envoyées que s'ils sont cochés. S'ils ne sont pas cochés, rien n'est envoyé, pas même la valeur de leur attribut name.
    
 
 
    
-
    Note : Vous trouverez les exemples de cette section sur GitHub à l'adresse checkable-items.html (voir directement aussi).
    
+
    Note : Vous trouverez les exemples de cette section sur GitHub à l'adresse checkable-items.html (voir directement aussi).
    
 
    
 
 
    Pour un maximum de convivialité/accessibilité, il est conseillé d'entourer chaque liste d'éléments liés dans un {{htmlelement("fieldset")}}, avec un élément {{htmlelement("legend")}} fournissant une description globale de la liste.  Chaque paire individuelle d'éléments {{htmlelement("label")}}/{{htmlelement("input")}} doit être contenue dans son propre élément de liste (ou similaire), comme le montrent les exemples.
    
@@ -365,22 +371,22 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
 
    Une casce à cocher se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur checkbox.
    
 
-
        <input type="checkbox" checked id="carrots" name="carrots" value="carrots">
+
        <input type="checkbox" checked id="carrots" name="carrots" value="carrots">
 
    
 
 
    Mettre l'attribut checked fait que la case sera cochée au chargement de la page.
    
 
-
    Screenshots of check boxes on several platforms.
    
+
    Screenshots of check boxes on several platforms.
    
 
 
    Bouton radio
    
 
 
    Un bouton radio se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a la valeur radio.
    
 
-
        <input type="radio" checked id="soup" name="meal">
    
+
        <input type="radio" checked id="soup" name="meal">
    
 
 
    Plusieurs boutons radio peuvent être liés ensemble. S'ils partagent la même valeur pour leur attribut {{htmlattrxref("name","input")}}, ils seront considérés comme faisant partie d'un seul groupe de boutons. Seulement un bouton à la fois peut être coché par groupe. Ceci signifie que si l'un d'entre eux est coché, tous les autres sont automatiquement décochés. Lorsque le formulaire est envoyé, seule la valeur du bouton coché est envoyée. Si aucun des boutons n'est coché, l'ensemble des boutons du groupe est considéré comme étant dans un état inconnu et aucune valeur n'est envoyée avec le formulaire.
    
 
-
    <fieldset>
+
    <fieldset>
   <legend>Quel est votre mets préféré ?</legend>
   <ul>
     <li>
@@ -396,9 +402,9 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
       <input type="radio" id="pizza" name="meal" value="pizza">
     </li>
   </ul>
-</fieldset>
    
+</fieldset>
    
 
-
    Screenshots of radio buttons on several platforms.
    
+
    Screenshots of radio buttons on several platforms.
    
 
 
    Boutons
    
 
@@ -417,7 +423,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
 
    submit
    
 
-
        <button type="submit">
+
        <button type="submit">
         Ceci est un <br><strong>bouton d'envoi</strong>
     </button>
 
@@ -425,7 +431,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
 
    reset
    
 
-
        <button type="reset">
+
        <button type="reset">
         Ceci est un <br><strong>bouton de réinitialisation</strong>
     </button>
 
@@ -433,7 +439,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
 
    anonymous
    
 
-
        <button type="button">
+
        <button type="button">
         Ceci est un <br><strong>bouton lambda</strong>
     </button>
 
@@ -446,7 +452,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
  
  • Dans le cas des éléments {{HTMLElement("button")}}, il est possible d'avoir une valeur différente de l'étiquette du bouton (toutefois, ceci ne peut être utilisé pour les versions antérieures à la version 8 d'Internet Explorer).
    • 
 
 
-
    Screenshots of buttons on several platforms.
    
+
    Screenshots of buttons on several platforms.
    
 
 
    Techniquement parlant, il n'y a pratiquement pas de différence entre un bouton défini avec l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. La seule différence à noter réside dans l'étiquette du bouton lui-même. Dans un élément {{HTMLElement("input")}}, l'étiquette ne peut être constituée que de données de type caractère, alors que dans un élément {{HTMLElement("button")}}, l'étiquette peut être mise sous HTML, de sorte qu'elle peut être mise en forme en conséquence.
    
 
@@ -467,7 +473,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
 
    Exemple
    
 
-
        <input type="number" name="age" id="age" min="1" max="10" step="2">
    
+
        <input type="number" name="age" id="age" min="1" max="10" step="2">
    
 
 
    Ceci créé un widget pour un nombre dont la valeur est comprise entre 1 et 10 et dont les boutons d'incrémentation/décrémentation modifient la valeur par pas de 2.
    
 
@@ -479,29 +485,28 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
 
 
    Exemple
    
 
-
        <input type="range" name="beans" id="beans" min="0" max="500" step="10">
-
    
+
    <input type="range" name="beans" id="beans" min="0" max="500" step="10">
    
 
 
    Cet exemple créé un curseur dont les valeurs varient entre 0 et 500, et dont les bouton d'incrément/décrément font varier la valeur de ±10.
    
 
 
    Un problème avec les curseurs est qu'il n'offrent aucun moyen visue de savoir quelle est leur valeur courante. Il est nécessaire d'ajouter cela vous‑même à l'aide de JavaScript, mais c'est assez facile. Dans cet exemple nous ajoutons un élément {{htmlelement("span")}} dans lequel nous écrivons la valeur courante du curseur et la mettons à jour quand elle est modifiée.
    
 
-
    <label for="beans">Combien de haricots pouvez‑vous manger ?</label>
-<input type="range" name="beans" id="beans" min="0" max="500" step="10">
-<span class="beancount"></span>
    
+
    <label for="beans">Combien de haricots pouvez‑vous manger ?</label>
+<input type="range" name="beans" id="beans" min="0" max="500" step="10">
+<span class="beancount"></span>
    
 
 
    et en  JavaScript :
    
 
-
    var beans = document.querySelector('#beans');
-var count = document.querySelector('.beancount');
+
    var beans = document.querySelector('#beans');
+var count = document.querySelector('.beancount');
 
-count.textContent = beans.value;
+count.textContent = beans.value;
 
-beans.oninput = function() {
-  count.textContent = beans.value;
-}
    
+beans.oninput = function() {
+  count.textContent = beans.value;
+}
    
 
-
    Ici nous stockons dans deux variables les références du curseur et celle de span, puis nous réglons immédiatement le textContent  de span à la valeur courante value de l'entrée. Enfin, nous avons mis en place un gestionnaire d'événements oninput de sorte que chaque fois que le curseur de plage est déplacé, le textContent de span est mis à jour avec la nouvelle valeur de l'entrée.
    
+
    Ici nous stockons dans deux variables les références du curseur et celle de span, puis nous réglons immédiatement le textContent  de span à la valeur courante value de l'entrée. Enfin, nous avons mis en place un gestionnaire d'événements oninput de sorte que chaque fois que le curseur de plage est déplacé, le textContent de span est mis à jour avec la nouvelle valeur de l'entrée.
    
 
 
    L'attribut range pour input n'est pas pris en charge dans les versions d'Internet Explorer dont le numéro est inférieur à 10.
    
 
@@ -515,32 +520,34 @@ beans.oninput <input type="datetime-local" name="datetime" id="datetime">
    
+
    <input type="datetime-local" name="datetime" id="datetime">
    
 
 
    month
    
 
 
    Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée.
    
 
-
    <input type="month" name="month" id="month">
    
+
    <input type="month" name="month" id="month">
    
 
 
    time
    
 
 
    Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire.
    
 
-
    <input type="time" name="time" id="time">
    
+
    <input type="time" name="time" id="time">
    
 
 
    week
    
 
 
    Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante.
    
 
-
    <input type="week" name="week" id="week">
    
+
    <input type="week" name="week" id="week">
    
 
 
    Tous les contrôles de sélection de date et heure peuvent être contraints à l'aide des attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.
    
 
-
        <label for="maDate">Quand êtes vous disponible cet été ?</label>
+
        <label for="maDate">Quand êtes vous disponible cet été ?</label>
     <input type="date" min="2013-06-01" max="2013-08-31" id="maDate">
    
 
-
    Attention : Les widgets de date et heure sont encore peu pris en charge. Au moment de la rédaction de cet article, Chrome, Edge et Opera les prennent bien en charge, mais il n'y a pas de prise en charge dans Internet Explorer et Firefox et Safari n'ont qu'une prise en charge lacunaire de ces derniers.
    
+
    
+  
    Attention : Les widgets de date et heure sont encore peu pris en charge. Au moment de la rédaction de cet article, Chrome, Edge et Opera les prennent bien en charge, mais il n'y a pas de prise en charge dans Internet Explorer et Firefox et Safari n'ont qu'une prise en charge lacunaire de ces derniers.
    
+
    
 
 
    Sélecteur de couleur
    
 
@@ -548,7 +555,7 @@ beans.oninput color.
    
 
-
    <input type="color" name="color" id="color">
    
+
    <input type="color" name="color" id="color">
    
 
 
    Attention : la prise en charge du widget color n'est pas très bonne actuellement. Il n'y a aucune prise en charge dans Internet Explorer, ni actuellement dans Safari. Les autres navigateurs majeurs le prennent en charge.
    
 
@@ -557,12 +564,12 @@ beans.oninput 
-
    Note : Vous trouverez les exemples de cette section sur GitHub à l'adresse other-examples.html (à voir aussi directement).
    
+
    Note : Vous trouverez les exemples de cette section sur GitHub à l'adresse other-examples.html (à voir aussi directement).
    
 
    
 
 
    Sélection de fichier
    
 
-
    Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article  « Envoi et extraction des données de formulaire ». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer.
    
+
    Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article  « Envoi et extraction des données de formulaire ». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer.
    
 
 
    Pour créer un widget de sélection de fichier, vous devez utiliser un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur file. Les types de fichiers acceptés peuvent être contraints en utilisant l'attribut {{htmlattrxref("accept","input")}}. De plus, si vous souhaitez permettre à l'utilisateur de choisir plusieurs fichiers, vous pouvez le faire en ajoutant l'attribut {{htmlattrxref("multiple","input")}}.
    
 
@@ -570,7 +577,7 @@ beans.oninput <input type="file" name="file" id="file" accept="image/*" multiple>
    
+
    <input type="file" name="file" id="file" accept="image/*" multiple>
    
 
 
    Contenu caché
    
 
@@ -578,7 +585,7 @@ beans.oninput     <input type="hidden" id="timestamp" name="timestamp" value="1286705410">
    
+
        <input type="hidden" id="timestamp" name="timestamp" value="1286705410">
    
 
 
    Image-bouton
    
 
@@ -586,7 +593,7 @@ beans.oninput image. Cet élément accepte exactement le même ensemble d'attributs que l'élément {{HTMLElement("img")}}, en plus de tous les attributs valides pour n'importe quel bouton de formulaire.
    
 
-
        <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
    
+
        <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
    
 
 
    Si l'image-bouton est utilisée pour envoyer un formulaire, ce widget n'envoie pas sa valeur mais les coordonnées X et Y du clic sur l'image (les coordonnées sont relatives à l'image, ce qui veut dire que le coin supérieur gauche représente les coordonnées 0, 0). Les coordonnées sont envoyées sous la forme de deux paires de clé/valeur :
    
 
@@ -597,9 +604,9 @@ beans.oninput     http://foo.com?pos.x=123&pos.y=456
    
+
        http://foo.com?pos.x=123&pos.y=456
    
 
-
    C'est une façon très commode de construire une « hot map » (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article « Envoi des données de formulaire ».
    
+
    C'est une façon très commode de construire une « hot map » (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article « Envoi des données de formulaire ».
    
 
 
    Compteurs et barres de progression
    
 
@@ -609,7 +616,7 @@ beans.oninput 
 
-
        <progress max="100" value="75">75/100</progress>
    
+
        <progress max="100" value="75">75/100</progress>
    
 
 
    Cela sert à mettre en œuvre visuellement un rapport d'avancement, comme le pourcentage du nombre total de fichiers téléchargés ou le nombre de questions posées dans un questionnaire.
    
 
@@ -646,7 +653,7 @@ beans.oninput 
 
-
    <meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
    
+
    <meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
    
 
 
    Le contenu de l'élément {{HTMLElement("meter")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent cet affichage.
    
 
@@ -671,7 +678,7 @@ beans.oninput Mon premier formulaire HTML
- 
  • Comment structurer un formulaire HTML
    • 
+ 
  • Comment structurer un formulaire HTML
    • 
  
  • Les widgets natifs pour formulaire
    • 
  
  • Envoi des données de formulaire
    • 
  
  • Validation des données de formulaire
    • 
diff --git a/files/fr/learn/forms/form_validation/index.html b/files/fr/learn/forms/form_validation/index.html
index 137b1be959..b95ce27d09 100644
--- a/files/fr/learn/forms/form_validation/index.html
+++ b/files/fr/learn/forms/form_validation/index.html
@@ -1,26 +1,18 @@
 ---
 title: Validation des données de formulaires
 slug: Learn/Forms/Form_validation
-tags:
-  - Exemple
-  - Formulaires
-  - Guide
-  - HTML
-  - Intermédiaire
-  - JavaScript
-  - Web
 translation_of: Learn/Forms/Form_validation
 original_slug: Web/Guide/HTML/Formulaires/Validation_donnees_formulaire
 ---
 
    {{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires")}}
    
 
-
    Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont dans un format correct pour pouvoir être traitées correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser les applications. La validation des données de formulaire vous aide à remplir ces objectifs — cet article indique ce qu'il est nécessaire de savoir.
    
+
    Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont dans un format correct pour pouvoir être traitées correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser les applications. La validation des données de formulaire vous aide à remplir ces objectifs — cet article indique ce qu'il est nécessaire de savoir.
    
 
-
+
    
-   
+   
@@ -56,7 +48,7 @@ original_slug: Web/Guide/HTML/Formulaires/Validation_donnees_formulaire
 
 
    Vous rencontrerez différents types de validation de formulaires sur le Web :
    
 
-
      
+
        
  
      • La validation côté client est la validation qui est effectuée dans le navigateur, avant que les données n'aient été soumises au serveur. Cette méthode est plus conviviale que la validation côté serveur car elle donne une réponse instantanée. Il est possible de la subdiviser encore avec :
   
          
    
        • la validation JavaScript, codée en JavaScript, entièrement personnalisable.
          • 
@@ -76,7 +68,7 @@ original_slug: Web/Guide/HTML/Formulaires/Validation_donnees_formulaire
 
 
          Utiliser la validation intégrée au formulaire
          
 
-
          Une des caractéristiques de HTML5 est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des attributs de validation sur les éléments de formulaire ; ils vous permettent de spécifier des règles pour une entrée de formulaire comme : une valeur doit‑elle être remplie ? y a-t-il une longueur minimale et/ou maximale des données ? doit‑elle être un nombre, une adresse e-mail ou autre chose ? doit‑elle correspondre à un modèle ? Si les données saisies suivent toutes ces règles, elles sont considérées comme valides ; si ce n'est pas le cas, elles sont considérées comme non valides.
          
+
          Une des caractéristiques de HTML5 est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des attributs de validation sur les éléments de formulaire ; ils vous permettent de spécifier des règles pour une entrée de formulaire comme : une valeur doit‑elle être remplie ? y a-t-il une longueur minimale et/ou maximale des données ? doit‑elle être un nombre, une adresse e-mail ou autre chose ? doit‑elle correspondre à un modèle ? Si les données saisies suivent toutes ces règles, elles sont considérées comme valides ; si ce n'est pas le cas, elles sont considérées comme non valides.
          
  Quand un élément est valide :
          
 
 
            
@@ -91,37 +83,31 @@ original_slug: Web/Guide/HTML/Formulaires/Validation_donnees_formulaire
  
          • si l'utilisateur essaie d'envoyer le formulaire, le navigateur le bloquera et affichera un message d'erreur.
            • 
 
          
 
-
          Contraintes de validation sur les éléments d'entrée — simple début
          
-
-
+
          Contraintes de validation sur les éléments input — simple début
          
 
 
          Dans cette section, nous examinerons quelques unes des diverses fonctionnalités HTML5 peuvant être utilisées pour valider des éléments d'{{HTMLElement("input")}}.
          
 
 
          Commençons par un exemple simple — une entrée ouvrant un choix, selon votre préférence, entre banane ou cerise. Il faut un texte {{HTMLElement("input")}} simple avec une étiquette correspondante et un {{htmlelement("button")}} de soumission. Le code source est sur GitHub à l'adresse fruit-start.html et un exemple « live » ci-dessous :
          
 
-
 
-
          {{EmbedLiveSample("Hidden_code", "100%", 55)}}
          
+
          {{EmbedLiveSample("Contraintes_de_validation_sur_les_éléments_input_—_simple_début", "100%", 55)}}
          
 
 
          Pour commencer, faites une copie de fruit-start.html dans un nouveau répertoire sur votre disque dur.
          
 
-
          L'attribut required
          
+
          Attribut required
          
 
 
          La fonctionnalité de validation HTML5 la plus simple à utiliser est l'attribut {{htmlattrxref("required", "input")}}} — si vous voulez rendre une entrée obligatoire, vous pouvez marquer l'élément en utilisant cet attribut. Lorsque cet attribut est mis, le formulaire ne sera pas soumis (et affichera un message d'erreur) si l'entrée est vide (l'entrée sera également considérée comme invalide).
          
 
@@ -145,11 +131,11 @@ input:valid {
 
 
          L'entrée a une bordure en pointillés rouge vif lorsqu'elle n'est pas valide, et une bordure noire plus subtile lorsqu'elle est valide. Essayez le nouveau comportement dans l'exemple ci-dessous :
          
 
-
          {{EmbedLiveSample("L'attribut_required", "100%", 55)}}
          
+
          {{EmbedLiveSample("Attribut_required", "100%", 55)}}
          
 
 
          Validation selon une expression régulière
          
 
-
          Une autre fonctionnalité de validation très courante est l'attribut {{htmlattrxref("pattern", "input")}}, qui attend une expression régulière comme valeur. Une expression régulière (regex) est un modèle qui peut être utilisé pour faire correspondre des combinaisons de caractères dans des chaînes de texte, de sorte qu'elles sont idéales pour la validation de formulaires (ainsi que diverses autres utilisations en JavaScript). Les Regex sont assez complexes et nous n'avons pas l'intention de vous les enseigner de manière exhaustive dans cet article.
          
+
          Une autre fonctionnalité de validation très courante est l'attribut {{htmlattrxref("pattern", "input")}}, qui attend une expression régulière comme valeur. Une expression régulière (regex) est un modèle qui peut être utilisé pour faire correspondre des combinaisons de caractères dans des chaînes de texte, de sorte qu'elles sont idéales pour la validation de formulaires (ainsi que diverses autres utilisations en JavaScript). Les Regex sont assez complexes et nous n'avons pas l'intention de vous les enseigner de manière exhaustive dans cet article.
          
 
 
          Vous trouverez ci-dessous quelques exemples pour vous donner une idée de base de leur fonctionnement :
          
 
@@ -184,21 +170,19 @@ input:valid {
 
 
          Voyons un exemple — mettons à jour notre HTML en y ajoutant un attribut pattern, ainsi :
          
 
-
          <form>
+
          <form>
   <label for="choose">Préférez‑vous la banane ou la cerise ?</label>
   <input id="choose" name="i_like" required pattern="banane|cerise">
   <button>Soumettre</button>
-</form>
          
+</form>
          
 
-
+}
 
 
          {{EmbedLiveSample("Validation_selon_une_expression_régulière", "100%", 55)}}
          
 
@@ -211,7 +195,7 @@ input:valid {
 
 
 
          
-
          Note : L'élément {{HTMLElement("textarea")}} ne prend pas en charge l'attribut {{htmlattrxref("pattern", "input")}}.
          
+
          Note : L'élément {{HTMLElement("textarea")}} ne prend pas en charge l'attribut {{htmlattrxref("pattern", "input")}}.
          
 
          
 
 
          Limitation de la taille des entrées
          
@@ -224,7 +208,7 @@ input:valid {
 
 
          Supprimez maintenant le contenu de l'élément <body> et remplacez-le par le suivant :
          
 
-
          <form>
+
          <form>
   <div>
     <label for="choose">Préférez‑vous la banane ou la cerise ?</label>
     <input id="choose" name="i_like" required minlength="6" maxlength="6">
@@ -236,15 +220,14 @@ input:valid {
   <div>
     <button>Soumettre</button>
   </div>
-</form>
          
+</form>
          
 
 
            
  
          • Ici, nous avons donné au champ de texte une taille minimale et maximale de 6 caractères — la même que celle de banane ou cerise. La saisie de moins de 6 caractères s'affichera comme non valide et la saisie de plus de 6 caractères ne sera pas possible dans la plupart des navigateurs.
            • 
  
          • Nous avons également contraint le champ number à un min de 1 et un max de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage.
            • 
 
          
 
-
+}
 
 
          Voici cet exemple s'exécutant en « live » :
          
 
 
          {{EmbedLiveSample('Limitation_de_la_taille_des_entrées', "100%", 100)}}
          
 
 
          
-
          Note: <input type="number"> (et d'autres types, comme range) acceptent aussi un attribut {{htmlattrxref("step", "input")}} qui spécifie l'incrément en plus ou en moins de la valeur quand les contrôles d'entrée sont utilisés (comme les boutons ^ et v).
          
+
          Note : <input type="number"> (et d'autres types, comme range) acceptent aussi un attribut {{htmlattrxref("step", "input")}} qui spécifie l'incrément en plus ou en moins de la valeur quand les contrôles d'entrée sont utilisés (comme les boutons ^ et v).
          
 
          
 
 
          Exemple complet
          
 
 
          Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intégrées pour la validation :
          
 
-
          <form>
-  <p>
-    <fieldset>
-      <legend>Qualité<abbr title="Ce champ est obligatoire">*</abbr></legend>
-      <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">M.</label>
-      <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Mme.</label>
-    </fieldset>
-  </p>
-  <p>
-    <label for="n1">Quel est votre âge ?</label>
-    <!-- L'attribut pattern peut servir de recours pour les navigateurs dont le type number n'est
+
          <form>
+  <p>
+    <fieldset>
+      <legend>Qualité<abbr title="Ce champ est obligatoire">*</abbr></legend>
+      <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">M.</label>
+      <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Mme.</label>
+    </fieldset>
+  </p>
+  <p>
+    <label for="n1">Quel est votre âge ?</label>
+    <!-- L'attribut pattern peut servir de recours pour les navigateurs dont le type number n'est
          pas implémenté pour input mais qui prennent en charge l'attribut pattern. Veuillez noter
          que les navigateurs prenant en charge l'attribut pattern ne signalent pas d'erreur quand
-         il est utilisé avec un champ number. Seule son utilisation ici agit en tant que recours. -->
-    <input type="number" min="12" max="120" step="1" id="n1" name="age"
-           pattern="\d+">
-  </p>
-  <p>
-    <label for="t1">Quel est votre fruit favori ?<abbr title="Ce champ est obligatoire">*</abbr></label>
-    <input type="text" id="t1" name="fruit" list="l1" required
-           pattern="[Bb]anane|[Cc]erise|[Cc]itron|[Ff]raise|[Oo]range|[Pp]omme">
-    <datalist id="l1">
-      <option>Banane</option>
-      <option>Cerise</option>
-      <option>Citron</option>
-      <option>Fraise</option>
-      <option>Orange</option>
-      <option>Pomme</option>
-    </datalist>
-  </p>
-  <p>
-    <label for="t2">Quelle est votre adresse électronique ?</label>
-    <input type="email" id="t2" name="email">
-  </p>
-  <p>
-    <label for="t3">Laissez un court message</label>
-    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
-  </p>
-  <p>
-    <button>Soumettre</button>
-  </p>
-</form>
          
-
-
          body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 300px;
-  margin: 0;
-  padding: 0 5px;
-}
-
-p > label {
-  display: block;
-}
-
-input[type=text],
+         il est utilisé avec un champ number. Seule son utilisation ici agit en tant que recours. -->
+    <input type="number" min="12" max="120" step="1" id="n1" name="age"
+           pattern="\d+">
+  </p>
+  <p>
+    <label for="t1">Quel est votre fruit favori ?<abbr title="Ce champ est obligatoire">*</abbr></label>
+    <input type="text" id="t1" name="fruit" list="l1" required
+           pattern="[Bb]anane|[Cc]erise|[Cc]itron|[Ff]raise|[Oo]range|[Pp]omme">
+    <datalist id="l1">
+      <option>Banane</option>
+      <option>Cerise</option>
+      <option>Citron</option>
+      <option>Fraise</option>
+      <option>Orange</option>
+      <option>Pomme</option>
+    </datalist>
+  </p>
+  <p>
+    <label for="t2">Quelle est votre adresse électronique ?</label>
+    <input type="email" id="t2" name="email">
+  </p>
+  <p>
+    <label for="t3">Laissez un court message</label>
+    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
+  </p>
+  <p>
+    <button>Soumettre</button>
+  </p>
+</form>
          
+
+
          body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 300px;
+  margin: 0;
+  padding: 0 5px;
+}
+
+p > label {
+  display: block;
+}
+
+input[type=text],
 input[type=email],
 input[type=number],
 textarea,
-fieldset {
-/* requis pour composer de manière appropriée les éléments
-   de formulaire sur les navigateurs fondés sur WebKit */
-  -webkit-appearance: none;
+fieldset {
+/* requis pour composer de manière appropriée les éléments
+   de formulaire sur les navigateurs fondés sur WebKit */
+  -webkit-appearance: none;
 
-  width : 100%;
-  border: 1px solid #333;
-  margin: 0;
+  width : 100%;
+  border: 1px solid #333;
+  margin: 0;
 
-  font-family: inherit;
-  font-size: 90%;
+  font-family: inherit;
+  font-size: 90%;
 
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
 
-input:invalid {
-  box-shadow: 0 0 5px 1px red;
-}
+input:invalid {
+  box-shadow: 0 0 5px 1px red;
+}
 
-input:focus:invalid {
-  outline: none;
-}
          
+input:focus:invalid {
+  outline: none;
+}
          
 
 
          {{EmbedLiveSample("Exemple_complet", "100%", 450)}}
          
 
 
 
-
          Messages d'erreur personnalisés
          
+
          Messages adaptés pour les erreurs
          
 
 
          Comme nous avons vu dans les exemples précédents, à chaque fois qu'un utilisateur tente d'envoyer un formulaire invalide, le navigateur affiche un message d'erreur. La manière dont le message est affiché dépend du navigateur.
          
 
@@ -382,22 +364,22 @@ fieldset {
  
    
-   
+   
-   
+   
-   
+   
    
  
   
    
    Prérequis :Notions concernant les ordinateurs, une bonne compréhension du HTML, des CSS et de JavaScript.Notions concernant les ordinateurs, une bonne compréhension du HTML, des CSS et de JavaScript.
   
    
   
    
    Objectif :
    
   
    
    Firefox 17 (Windows 7)Example of an error message with Firefox in French on an English pageExample of an error message with Firefox in French on an English page
   
    
   
    
    Chrome 22 (Windows 7)Example of an error message with Chrome in French on an English pageExample of an error message with Chrome in French on an English page
   
    
   
    
    Opera 12.10 (Mac OSX)Example of an error message with Opera in French on an English pageExample of an error message with Opera in French on an English page
   
    
      
 
    
 
 
    Pour personnaliser l'apparence et le texte de ces messages, vous devez utiliser JavaScript ; il n'est pas possible de l'implémenter en utilisant uniquement HTML et CSS.
    
 
-
    HMTL5 fournit une API de contraintes de validation pour vérifier et personnaliser l'état des élément d'un formulaire. Il est possible, entre autres, de changer le texte des messages d'erreur. Voici un court exemple :
    
+
    HMTL5 fournit une API de contraintes de validation pour vérifier et personnaliser l'état des élément d'un formulaire. Il est possible, entre autres, de changer le texte des messages d'erreur. Voici un court exemple :
    
 
 
    <form>
   <label for="mail">Pourriez-vous nous fournir une adresse mail ?</label>
@@ -405,7 +387,7 @@ fieldset {
   <button>Envoyer</button>
 </form>
    
 
-
    En JavaScript, il faut appeler la méthode setCustomValidity():
    
+
    En JavaScript, il faut appeler la méthode setCustomValidity():
    
 
 
    var email = document.getElementById("mail");
 
@@ -417,7 +399,7 @@ email.addEventListener("keyup", function (event) {
   }
 });
    
 
-
    {{EmbedLiveSample("Messages_d'erreur_personnalisés", "100%", 50)}}
    
+
    {{EmbedLiveSample("Messages_adaptés_pour_les_erreurs", "100%", 50)}}
    
 
 
    Validation de formulaires avec JavaScript
    
 
@@ -511,7 +493,7 @@ email.addEventListener("keyup", function (event) {
 
 
    Pour les anciens navigateurs, il existe une prothèse d'émulation (polyfill) comme Hyperform, pour compenser le défaut de prise en charge de cette API. Comme vous utilisez déjà JavaScript, l'utilisation d'une prethèse d'émulation n'est pas un souci supplémentaire pour la conception ou l'implémentation de votre site ou application Web.
    
 
-
    Exemple d'utilisation de l'API de validation des contraintes
    
+
    Exemple utilisant la validation des contraintes
    
 
 
    Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés. Tout d'abord, le HTML :
    
 
@@ -528,7 +510,7 @@ email.addEventListener("keyup", function (event) {
 
 
    Ce formulaire simple utilise l'attribut {{htmlattrxref("novalidate","form")}} pour désactiver la validation automatique par le navigateur ; cela permet donc à notre script d'avoir le contrôle sur la validation. Toutefois, cela ne désactive la prise en charge par l'API de validation des contraintes, ni l'application des pseudo-classes CSS  {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} et {{cssxref(":out-of-range")}}. Cela signifie que, même si le navigateur ne vérifie pas automatiquement la validité du formulaire avant l'envoi des données, vous pouvez toujours effectuer cette validation et définir l'apparence du formulaire par vous-même.
    
 
-
    L'attribut aria-live garantit que nos messages d'erreur personnalisés seront affichés à tout le monde, y compris les personnes utilisant des techniques d'assistance comme des lecteurs d'écran.
    
+
    L'attribut aria-live garantit que nos messages d'erreur personnalisés seront affichés à tout le monde, y compris les personnes utilisant des techniques d'assistance comme des lecteurs d'écran.
    
 
 
    CSS
    
 
@@ -628,7 +610,7 @@ form.addEventListener("submit", function (event) {
 
 
    Voici le résultat:
    
 
-
    {{EmbedLiveSample("Exemple_d'utilisation_de_l'API_de_validation_des_contraintes", "100%", 130)}}
    
+
    {{EmbedLiveSample("Exemple_utilisant_la_validation_des_contraintes", "100%", 130)}}
    
 
 
    L'API de validation des contraintes fournit un outil puissant pour gérer la validation des formulaires, en vous laissant un contrôle sur l'interface utilisateur bien supérieur à ce que vous auriez pu avoir avec uniquement HTML et CSS. 
    
 
@@ -644,18 +626,17 @@ form.addEventListener("submit", function (event) {
  
    Que dois-je faire si le formulaire n'est pas valide ?
    
  
    C'est clairement une affaire d'interface utilisateur. Vous devez décider comment le formulaire doit se comporter : enverra-t-il quand même les données ? Devriez-vous mettre en évidence les champs qui sont en erreur ? Devriez-vous afficher des messages d'erreur ?
    
  
    Comment puis-je aider l'utilisateur à corriger ses données invalides?
    
- 
    Pour limiter la frustration de l'utilisateur, il est très important de fournir autant d'information d'aide que nécessaire pour le guider dans la correction de sa saisie. Vous devriez afficher des suggestions en amont pour que l'utilisateur sache ce qui est attendu, ainsi que des messages d'erreur clairs. Si vous souhaitez vous plonger dans les exigences d'interface utilsateur pour la validation de formulaires, voici quelques articles (en anglais) utiles que vous devriez lire :
    
- 
    
+ 
    Pour limiter la frustration de l'utilisateur, il est très important de fournir autant d'information d'aide que nécessaire pour le guider dans la correction de sa saisie. Vous devriez afficher des suggestions en amont pour que l'utilisateur sache ce qui est attendu, ainsi que des messages d'erreur clairs. Si vous souhaitez vous plonger dans les exigences d'interface utilsateur pour la validation de formulaires, voici quelques articles (en anglais) utiles que vous devriez lire :
    -

    Exemple qui n'utilise pas l'API de validation des contraintes

    +

    Exemple sans utilisation de la validation des contraintes

    Afin d'illustrer le propos, réécrivons le précédent exemple afin qu'il fonctionne avec d'anciens navigateurs:

    @@ -672,7 +653,7 @@ form.addEventListener("submit", function (event) { <button type="submit">Envoyer</button> </form> -

    Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que ARIA est une spécification indépendante qui n'est pas spécifiquement liée à HTML5.

    +

    Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que ARIA est une spécification indépendante qui n'est pas spécifiquement liée à HTML5.

    CSS
    @@ -818,7 +799,7 @@ addEvent(form, "submit", function () {

    Voici le résultat:

    -

    {{EmbedLiveSample("Exemple_qui_n'utilise_pas_l'API_de_validation_des_contraintes", "100%", 130)}}

    +

    {{EmbedLiveSample("Exemple_sans_utilisation_de_la_validation_des_contraintes", "100%", 130)}}

    Comme vous avez pu le voir, il n'est pas si difficile de créer par soi-même un système de validation. La difficulté consiste à rendre le tout assez générique pour l'utiliser à la fois sur toutes les plateformes et pour chaque formulaire que vous pourriez créer. Il existe de nombreuses bibliothèques permettant ce genre de validation de formulaire ; n'hésitez pas à les utiliser. En voici quelques exemples :

    @@ -830,7 +811,7 @@ addEvent(form, "submit", function () {
  • Greffons jQuery :
    • @@ -861,15 +842,15 @@ addEvent(form, "submit", function () {

    Dans ce module

    diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html index e488687b73..20e96ebc26 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html @@ -11,9 +11,9 @@ original_slug: >- ---

    C'est le premier exemple de code qui explique comment construire un widget de formulaire personnalisé.

    -

    État initial

    +

    État initial

    -

    HTML

    +

    HTML

    <div class="select">
   <span class="value">Cerise</span>
@@ -26,7 +26,7 @@ original_slug: >-
   </ul>
 </div>
    -

    CSS

    +

    CSS

    /* --------------- */
 /* Styles Requis   */
@@ -148,9 +148,9 @@ original_slug: >-
 
 
    {{ EmbedLiveSample("Basic_state", 120, 130) }}
    
 
-
    État actif
    
+
    État actif
    
 
-
    HTML
    
+
    HTML
    
 
 
    <div class="select active">
   <span class="value">Cerise</span>
@@ -163,7 +163,7 @@ original_slug: >-
   </ul>
 </div>
    
 
-
    CSS
    
+
    CSS
    
 
 
    /* --------------- */
 /* Styles Requis   */
@@ -284,9 +284,9 @@ original_slug: >-
 
 
    {{ EmbedLiveSample("Active_state", 120, 130) }}
    
 
-
    État ouvert
    
+
    État ouvert
    
 
-
    HTML
    
+
    HTML
    
 
 
    <div class="select active">
   <span class="value">Cerise</span>
@@ -299,7 +299,7 @@ original_slug: >-
   </ul>
 </div>
    
 
-
    CSS
    
+
    CSS
    
 
 
    /* --------------- */
 /* Styles Requis   */
diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html
index b70d286010..ac248a0470 100644
--- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html
+++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html
@@ -10,7 +10,7 @@ original_slug: >-
 ---
 
    Ceci est le deuxième exemple expliquant comment construire un formulaire personnalisé.
    
 
-
    JS
    
+
    JS
    
 
 
    HTML Content
    
 
@@ -174,7 +174,7 @@ original_slug: >-
 
 
    {{ EmbedLiveSample('JS', 120, 130) }}
    
 
-
    Sans JS
    
+
    Sans JS
    
 
 
    HTML Content
    
 
diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html
index 5140b97c20..2967d9d181 100644
--- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html
+++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html
@@ -8,9 +8,9 @@ translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_3
 original_slug: >-
   Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3
 ---
-
    Ceci est le troisième exemple expliquant comment construire des widgets de formulaire personnalisés.
    
+
    Ceci est le troisième exemple expliquant comment construire des widgets de formulaire personnalisés.
    
 
-
    Changement d'état
    
+
    Changement d'état
    
 
 
    Contenu HTML
    
 
@@ -245,4 +245,4 @@ window.addEventListener('load', function () {
 
 
    Résultat
    
 
-
    {{ EmbedLiveSample('Change_states') }}
    
+
    {{ EmbedLiveSample('Changement_détat') }}
    
diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html
index e1d738ee61..dc6f31576c 100644
--- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html
+++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html
@@ -12,9 +12,9 @@ translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_4
 original_slug: >-
   Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4
 ---
-
    Ceci est le quatrième exemple expliquant comment construire des widgets de formulaire personnalisés.
    
+
    Ceci est le quatrième exemple expliquant comment construire des widgets de formulaire personnalisés.
    
 
-
    Changement d'état
    
+
    Changement d'état
    
 
 
    Contenu HTML
    
 
@@ -295,4 +295,4 @@ window.addEventListener('load', function () {
 
 
    Résultat
    
 
-
    {{ EmbedLiveSample('Change_states') }}
    
+
    {{ EmbedLiveSample('Changement_détat') }}
    
diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html
index aad371bc78..caf65d51c3 100644
--- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html
+++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html
@@ -10,7 +10,7 @@ original_slug: >-
 ---
 
    Voici le dernier exemple expliquant comment construire des widgets de formulaire personnalisés.
    
 
-
    Changement d'état
    
+
    Changement d'état
    
 
 
    Contenu HTML
    
 
@@ -288,4 +288,4 @@ window.addEventListener('load', function () {
 
 
    Résultat
    
 
-
    {{ EmbedLiveSample('Change_states') }}
    
+
    {{ EmbedLiveSample('Changement_détat') }}
    
diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/index.html
index b97d14b86e..ed842a9e47 100644
--- a/files/fr/learn/forms/how_to_build_custom_form_controls/index.html
+++ b/files/fr/learn/forms/how_to_build_custom_form_controls/index.html
@@ -14,12 +14,12 @@ original_slug: >-
 ---
 
    {{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}}
    
 
-
    Dans de nombreux cas les widgets de formulaires HTML disponibles ne suffisent pas. Si vous voulez composer certains widgets dans un style avancé tels que l'élément {{HTMLElement("select")}} ou si vous voulez leur donner des comportements personnalisés, vous n'avez pas d'autre choix que de créer vos propres widgets.
    
+
    Dans de nombreux cas les widgets de formulaires HTML disponibles ne suffisent pas. Si vous voulez composer certains widgets dans un style avancé tels que l'élément {{HTMLElement("select")}} ou si vous voulez leur donner des comportements personnalisés, vous n'avez pas d'autre choix que de créer vos propres widgets.
    
 
 
    Dans cet article, nous verrons comment construire un tel widget. Pour cela, nous allons travailler avec un exemple : reconstruire l'élément {{HTMLElement("select")}}.
    
 
 
    
-
    Note : Nous nous resterons centrés sur la construction des widgets, et non sur la façon de rendre le code générique et réutilisable ; cela impliquerait une manipulation de code JavaScript et de DOM dans un contexte inconnu, et nous sortirions de la portée de cet article.
    
+
    Note : Nous nous resterons centrés sur la construction des widgets, et non sur la façon de rendre le code générique et réutilisable ; cela impliquerait une manipulation de code JavaScript et de DOM dans un contexte inconnu, et nous sortirions de la portée de cet article.
    
 
    
 
 
    Conception, structure et sémantique
    
@@ -28,58 +28,46 @@ original_slug: >-
 
 
    Dans notre exemple, nous allons reconstruire l'élément {{HTMLElement("select")}}}. Voici le résultat que nous voulons atteindre :
    
 
-
    The three states of a select box
    
+
    The three states of a select box
    
 
 
    Cette capture d'écran montre les trois états principaux du widget : l'état normal (à gauche), l'état actif (au milieu) et l'état ouvert (à droite).
    
 
 
    En termes de comportement, nous voulons que notre widget soit utilisable aussi bien avec une souris qu'avec un clavier, comme n'importe quel widget natif. Commençons par définir comment le widget atteint chaque état :
    
 
-
    
- 
    Le widget est dans son état normal :
    
- 
    
+
    Le widget est dans son état normal :
    
+
  
      
   
    • la page se charge
      • 
   
    • le widget était actif et l'utilisateur a cliqué quelque part en dehors du widget
      • 
   
    • le widget était actif et l'utilisateur a déplacé le focus sur un autre avec le clavier
      • 
  
    
- 
    
-
    
-
-
     
    
 
-
    
- 
    
  
    
- 
    Note : Déplacer le focus dans la page entre les divers widgets se fait généralement en appuyant sur la touche de tabulation, mais ce n'est pas la norme partout. Par exemple, circuler parmi les liens sur une page se fait dans Safari par défaut en utilisant la combinaison Option+Tab.
    
+ 
    Note : Déplacer le focus dans la page entre les divers widgets se fait généralement en appuyant sur la touche de tabulation, mais ce n'est pas la norme partout. Par exemple, circuler parmi les liens sur une page se fait dans Safari par défaut en utilisant la combinaison Option+Tab.
    
  
    
- 
    
- 
    Le widget est sans son état actif :
    
- 
    
+
+ 
    Le widget est sans son état actif :
    
+ 
  
      
   
    • l'utilisateur clique sur lui
      • 
   
    • l'utilisateur presse la touche Tabulation et obtient le focus
      • 
   
    • le widget était dans l'état ouvert et l'utilisateur a cliqué dessus.
      • 
  
    
- 
    
- 
    Le widget est dans un état ouvert :
    
- 
    
+ 
+ 
    Le widget est dans un état ouvert :
    
+ 
  
      
   
    • le widget est dans un état autre que ouvert et l'utilisateur clique dessus.
      • 
  
    
- 
    
-
    
 
 
    Maintenant que nous savons comment changer les états du widget, il est important de définir comment changer la valeur du widget :
    
 
-
    
- 
    La valeur change quand :
    
- 
    
+ 
    La valeur change quand :
    
+
  
      
   
    • l'utilisateur clique sur une option quand le widget est dans l'état ouvert
      • 
   
    • l'utilisateur presse la touche ↑ ou ↓ quand le widget est dans l'état actif
      • 
  
    
- 
    
-
    
 
 
    Enfin, définissons comment les options du widget doivent se comporter :
    
 
@@ -92,7 +80,7 @@ original_slug: >-
 
 
    Autre exemple amusant : que se passera-t-il si l'utilisateur presse les touches ↑ ou ↓ alors que le widget est à l'état ouvert ? Ici, c'est un peu plus délicat. Si vous considérez que l'état actif et l'état ouvert sont totalement différents, la réponse est encore une fois « rien ne se produira » parce que nous n'avons pas défini d'interactions clavier pour l'état ouvert. D'autre part, si vous considérez que l'état actif et l'état ouvert coïncident, la valeur peut changer mais l'option ne sera certainement pas mise en valeur en conséquence, encore une fois parce que nous n'avons pas défini d'interactions clavier sur les options lorsque le widget est dans son état ouvert (nous avons seulement défini ce qui doit se passer lorsque le widget est ouvert, mais rien après).
    
 
-
    Dans notre exemple, les spécifications manquantes sont évidentes et nous les traiterons, mais cela peut devenir un problème réel sur de nouveaux widgets exotiques, pour lesquels personne n'a la moindre idée de ce qu'est le bon comportement. Il est donc toujours bon de passer du temps à l'étape conception, car si vous définissez pauvrement le comportement, ou si vous oubliez de le définir, il sera très difficile de le redéfinir une fois les utilisateurs habitués. Si vous avez des doutes, demandez l'avis des autres, et si vous avez le budget pour cela, n'hésitez pas à faire des tests utilisateur. Ce processus est appelé UX Design (User eXperience). Si vous voulez en savoir plus sur ce sujet, vous devriez consulter les ressources utiles suivantes :
    
+
    Dans notre exemple, les spécifications manquantes sont évidentes et nous les traiterons, mais cela peut devenir un problème réel sur de nouveaux widgets exotiques, pour lesquels personne n'a la moindre idée de ce qu'est le bon comportement. Il est donc toujours bon de passer du temps à l'étape conception, car si vous définissez pauvrement le comportement, ou si vous oubliez de le définir, il sera très difficile de le redéfinir une fois les utilisateurs habitués. Si vous avez des doutes, demandez l'avis des autres, et si vous avez le budget pour cela, n'hésitez pas à faire des tests utilisateur. Ce processus est appelé UX Design (User eXperience). Si vous voulez en savoir plus sur ce sujet, vous devriez consulter les ressources utiles suivantes :
    
 
 
 
 
    
-
    Note : De plus, dans la plupart des systèmes, il y a moyen d'ouvrir l'élément {{HTMLElement("select")}} pour voir tous les choix disponibles (c'est la même chose que de cliquer sur l'élément {{HTMLElement("select")}} avec une souris). Cela se fait avec Alt+↓ sous Windows et n'a pas été implémenté dans notre exemple - mais il serait facile de le faire, car le mécanisme a déjà été implémenté pour l'événement click.
    
+
    Note : De plus, dans la plupart des systèmes, il y a moyen d'ouvrir l'élément {{HTMLElement("select")}} pour voir tous les choix disponibles (c'est la même chose que de cliquer sur l'élément {{HTMLElement("select")}} avec une souris). Cela se fait avec Alt+↓ sous Windows et n'a pas été implémenté dans notre exemple - mais il serait facile de le faire, car le mécanisme a déjà été implémenté pour l'événement click.
    
 
    
 
 
    Definition de la structure HTML et de la sémantique
    
@@ -323,7 +311,7 @@ original_slug: >-
    {{EmbedLiveSample("Open_state",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}
   
   
-   Check out the source code
+   Check out the source code
   
  
 
@@ -333,11 +321,11 @@ original_slug: >-
 
    Maintenant que le design et la structure sont prêts, nous pouvons écrire le code JAvaScript pour que le widget fonctionne vraiment.
    
 
 
    
-
    Avertissement : Le code qui suit a été conçu à des fins éducatives et ne doit pas être utilisé tel quel. Entre autres choses, comme nous le verrons, il n'est pas à l'épreuve du temps et ne fonctionnera pas sur des navigateurs historiques. Il comporte également des parties redondantes. Elles devraient être optimisées pour du code de production.
    
+
    Attention : Le code qui suit a été conçu à des fins éducatives et ne doit pas être utilisé tel quel. Entre autres choses, comme nous le verrons, il n'est pas à l'épreuve du temps et ne fonctionnera pas sur des navigateurs historiques. Il comporte également des parties redondantes. Elles devraient être optimisées pour du code de production.
    
 
    
 
 
    
-
    Note : Créer des widgets réutilisables peut se révéler un peu délicat. L'ébauche de la norme « W3C Web Component » apporte des réponses à cette question particulière. Le projet X-Tag est un essai de mise en œuvre de cette spécification ; nous vous encourageons à y jeter un coup d'œil.
    
+
    Note : Créer des widgets réutilisables peut se révéler un peu délicat. L'ébauche de la norme « W3C Web Component » apporte des réponses à cette question particulière. Le projet X-Tag est un essai de mise en œuvre de cette spécification ; nous vous encourageons à y jeter un coup d'œil.
    
 
    
 
 
    Pourquoi ne fonctionne-t-il pas ?
    
@@ -433,7 +421,7 @@ original_slug: >-
    {{EmbedLiveSample("JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}}
   
   
-   Testez le code source
+   Testez le code source
   
  
 
@@ -459,7 +447,7 @@ original_slug: >-
  
  • {{domxref("element.querySelector","querySelector")}} et {{domxref("element.querySelectorAll","querySelectorAll")}}
    • 
 
 
-
    Au-delà de la disponibilité de ces fonctionnalités spécifiques, il reste encore un problème avant de commencer. L'objet retourné par la fonction {{domxref("element.querySelectorAll","querySelectorAll()")}} est une {{domxref("NodeList")}} plutôt qu'un Array. C'est important, car les objets  Array acceptent la fonction forEach, mais {{domxref("NodeList")}} ne le fait pas. Comme {{domxref("NodeList")}} ressemble vraiment à un Array et que forEach est d'utilisation si commode, nous pouvons facilement ajouter la prise en charge de forEach à {{domxref("NodeList")}} pour nous faciliter la vie, comme ceci :
    
+
    Au-delà de la disponibilité de ces fonctionnalités spécifiques, il reste encore un problème avant de commencer. L'objet retourné par la fonction {{domxref("element.querySelectorAll","querySelectorAll()")}} est une {{domxref("NodeList")}} plutôt qu'un Array. C'est important, car les objets  Array acceptent la fonction forEach, mais {{domxref("NodeList")}} ne le fait pas. Comme {{domxref("NodeList")}} ressemble vraiment à un Array et que forEach est d'utilisation si commode, nous pouvons facilement ajouter la prise en charge de forEach à {{domxref("NodeList")}} pour nous faciliter la vie, comme ceci :
    
 
 
    NodeList.prototype.forEach = function (callback) {
   Array.prototype.forEach.call(this, callback);
@@ -706,7 +694,7 @@ window.addEventListener('load', function () {
   });
 });
    
 
-
    Dans le code ci-dessus, il faut noter l'utilisation de la propriété tabIndex. Utiliser cette propriété est nécessaire pour être sûr que le widget natif n'obtiendra jamais le focus et que le widget personnalisé l'obtiendra quand l'utilisateur utilise le clavier ou la souris.
    
+
    Dans le code ci-dessus, il faut noter l'utilisation de la propriété tabIndex. Utiliser cette propriété est nécessaire pour être sûr que le widget natif n'obtiendra jamais le focus et que le widget personnalisé l'obtiendra quand l'utilisateur utilise le clavier ou la souris.
    
 
 
    Et voilà, nous avons terminé ! Voici le résultat :
    
 
@@ -734,11 +722,11 @@ window.addEventListener('load', function () {
 
 
    Nous venons de faire quelque chose qui fonctionne, même si nous sommes loin d'avoir une boîte de sélection avec toutes les fonctionnalités, elle fonctionne parfaitement. Mais ce que nous avons fait n'est rien de plus que de jouer avec les DOM. Elle n'a pas de sémantique réelle, et même si elle ressemble à une boîte de sélection, du point de vue du navigateur, ce n'en est pas une, de sorte que les technologies d'assistance ne pourront pas comprendre que c'est une boîte de sélection. Bref, cette jolie nouvelle boîte de sélection n'est pas accessible !
    
 
-
    Heureusement, il existe une solution et elle s'appelle ARIA. ARIA signifie « Accessible Rich Internet Application » et c'est une norme W3C spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le.
    
+
    Heureusement, il existe une solution et elle s'appelle ARIA. ARIA signifie « Accessible Rich Internet Application » et c'est une norme W3C spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le.
    
 
 
    L'attribut role
    
 
-
    L'attribut clé utilisé par ARIA est l'attribut role. L'attribut role  accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de listbox. C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle option).
    
+
    L'attribut clé utilisé par ARIA est l'attribut role. L'attribut role  accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de listbox. C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle option).
    
 
 
    Il faut aussi noter qu'ARIA définit les rôles appliqués par défaut aux balises HTML standard. Par exemple, l'élément {{HTMLElement("table")}} correspond au rôle grid, et l'élément {{HTMLElement("ul")}} correspond au rôle list. Comme nous utilisons un élément {{HTMLElement("ul")}}, nous voulons nous assurer que le rôle listbox de notre widget remplacera le rôle list de l'élément {{HTMLElement("ul")}}. À cette fin, nous utiliserons le rôle presentation. Ce rôle est conçu pour nous permettre d'indiquer qu'un élément n'a pas de signification particulière, et est utilisé uniquement pour présenter de l'information. Nous l'appliquerons à notre élément {{HTMLElement("ul")}}.
    
 
@@ -759,12 +747,12 @@ window.addEventListener('load', function () {
 </div>
    
 
 
    
-
    Note : Inclure à la fois l'attribut role et l'attribut class n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les selecteurs d'attribut CSS.
    
+
    Note : Inclure à la fois l'attribut role et l'attribut class n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les selecteurs d'attribut CSS.
    
 
    
 
 
    L'attribut  aria-selected
    
 
-
    Utiliser l'attribut role ne suffit pas. ARIA fournit également de nombreux états et attributs de propriété. Plus vous les utiliserez, mieux votre widget sera compris par les techniques d'assistance. Dans notre cas, nous limiterons notre utilisation à un seul attribut : aria-selected.
    
+
    Utiliser l'attribut role ne suffit pas. ARIA fournit également de nombreux états et attributs de propriété. Plus vous les utiliserez, mieux votre widget sera compris par les techniques d'assistance. Dans notre cas, nous limiterons notre utilisation à un seul attribut : aria-selected.
    
 
 
    L'attribut aria-selected s'utilise pour marquer l'option actuellement sélectionnée ; ceci permet aux techniques d'assistance d'informer l'utilisateur quelle est la sélection en cours. Nous l'utiliserons dynamiquement avec JavaScript pour marquer l'option sélectionnée chaque fois que l'utilisateur en choisit une. Pour cela, nous devons réviser la fonction updateValue() :
    
 
@@ -825,7 +813,7 @@ window.addEventListener('load', function () {
 
 
      
  
    • Mon premier formulaire HTML
      • 
- 
    • Comment structurer un formulaire HTML
      • 
+ 
    • Comment structurer un formulaire HTML
      • 
  
    • Les widgets natifs pour formulaire
      • 
  
    • Envoi des données de formulaire
      • 
  
    • Validation des données de formulaire
      • 
diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/example/index.html b/files/fr/learn/forms/how_to_structure_a_web_form/example/index.html
index cb36b36527..672ae945dd 100644
--- a/files/fr/learn/forms/how_to_structure_a_web_form/example/index.html
+++ b/files/fr/learn/forms/how_to_structure_a_web_form/example/index.html
@@ -6,7 +6,7 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/
 ---
 
      Ceci est un exemple de formulaire de paiement basique extrait de l'article Comment structurer un formulaire HTML.
      
 
-
      Un formulaire de paiement
      
+
      Un formulaire de paiement
      
 
 
      Contenu HTML
      
 
diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/index.html b/files/fr/learn/forms/how_to_structure_a_web_form/index.html
index a8f3079705..7f098d890e 100644
--- a/files/fr/learn/forms/how_to_structure_a_web_form/index.html
+++ b/files/fr/learn/forms/how_to_structure_a_web_form/index.html
@@ -17,13 +17,13 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML
 
 
      {{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}}
      
 
-
      Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.
      
+
      Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.
      
 
-
+
      
-   
+   
@@ -40,12 +40,15 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML
 
 
      Nous l'avons déjà rencontré dans l'article précédent.
      
 
-
      Note : Il est strictement interdit d'imbriquer un formulaire dans un autre formulaire. L'imbrication peut conduire à des comportements imprévisibles selon le navigateur utilisé.
      
+
      
+  
      Note : Il est strictement interdit d'imbriquer un formulaire dans un autre formulaire. L'imbrication peut conduire à des comportements imprévisibles selon le navigateur utilisé.
+  
      
+
      Notez qu'il est toujours possible d'utiliser un widget de formulaire en dehors d'un élément {{HTMLElement("form")}} mais si vous le faites, ce widget de formulaire n'a rien à voir avec un formulaire. De tels widgets peuvent être utilisés en dehors d'un formulaire, mais alors vous devriez avoir un plan spécial pour de tels widgets, puisqu'ils ne feront rien tout seuls. Vous devrez personnaliser leur comportement avec JavaScript.
      
-
      Note: HTML5 introduit l'attribut form dans les éléments form du HTML. Il devrait vous permettre de lier explicitement un élément avec un formulaire même s'il n'est pas inclus dans un {{ HTMLElement("form") }}. Malheureusement, pour l'instant, l'implémentation de cette fonctionnalité dans les navigateurs n'est pas encore assez fiable.
      
+
      Note : HTML5 introduit l'attribut form dans les éléments form du HTML. Il devrait vous permettre de lier explicitement un élément avec un formulaire même s'il n'est pas inclus dans un {{ HTMLElement("form") }}. Malheureusement, pour l'instant, l'implémentation de cette fonctionnalité dans les navigateurs n'est pas encore assez fiable.
      
 
      Les éléments <fieldset> et <legend>
      
@@ -56,26 +59,26 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML
 
 
      Voici un petit exemple :
      
 
-
      <form>
-  <fieldset>
-    <legend>Taille du jus de fruits</legend>
-    <p>
-      <input type="radio" name="size" id="size_1" value="small">
-      <label for="size_1">Petite</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_2" value="medium">
-      <label for="size_2">Moyenne</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_3" value="large">
-      <label for="size_3">Grande</label>
-    </p>
-  </fieldset>
-</form>
      
+
      <form>
+  <fieldset>
+    <legend>Taille du jus de fruits</legend>
+    <p>
+      <input type="radio" name="size" id="size_1" value="small">
+      <label for="size_1">Petite</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_2" value="medium">
+      <label for="size_2">Moyenne</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_3" value="large">
+      <label for="size_3">Grande</label>
+    </p>
+  </fieldset>
+</form>
      
-
      Note : Vous trouverez cet exemple dans fieldset-legend.html (voir directement aussi).
      
+
      Note : Vous trouverez cet exemple dans fieldset-legend.html (voir directement aussi).
      
 
      En lisant le formulaire ci-dessus, un lecteur d'écran dira « Taille du jus de fruit : petit » pour le premier widget, « Taille du jus de fruit : moyenne » pour le second, et « Taille du jus de fruit : grande » pour le troisième.
      
@@ -88,7 +91,7 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML
 
 
      Comme nous l'avons vu dans l'article précédent, l'élément {{HTMLElement("label")}} est le moyen naturel de définir une étiquette pour un widget de formulaire HTML. C'est l'élément le plus important si vous voulez créer des formulaires accessibles — lorsqu'ils sont correctement implémentés, les lecteurs d'écran énonceront l'étiquette d'un élément de formulaire selon toutes les instructions associées. Prenons cet exemple, que nous avons vu dans l'article précédent :
      
 
-
      <label for="name">Nom :</label> <input type="text" id="name" name="user_name">
      
+
      <label for="name">Nom :</label> <input type="text" id="name" name="user_name">
      Avec un élément <label> correctement associé à <input> par l'intermédiaire respectivement des attributs for et id (l'attribut for de <label> référence l'attibut id du widget correspondant), un lecteur d'écran lira et dira quelque chose comme « Nom, texte indiqué ».
      
 
@@ -96,9 +99,9 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML
 
 
      Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi :
      
 
-
      <label for="name">
-  Nom : <input type="text" id="name" name="user_name">
-</label>
      
+
      <label for="name">
+  Nom : <input type="text" id="name" name="user_name">
+</label>
      Toutefois, même dans ce cas, il est considéré de bonne pratique de définir l'attribut for parce que certaines techniques d'assistance ne font pas implicitement le lien entre les étiquettes et les widgets.
      
 
@@ -108,19 +111,19 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML
 
 
      Par exemple :
      
 
-
      <form>
-  <p>
-    <label for="taste_1">J'aime les cerises</label>
-    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
-  </p>
-  <p>
-    <label for="taste_2">J'aime les bananes</label>
-    <input type="checkbox" id="taste_2" name="taste_banana" value="2">
-  </p>
-</form>
      
+
      <form>
+  <p>
+    <label for="taste_1">J'aime les cerises</label>
+    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
+  </p>
+  <p>
+    <label for="taste_2">J'aime les bananes</label>
+    <input type="checkbox" id="taste_2" name="taste_banana" value="2">
+  </p>
+</form>
      
-
      Note : Vous trouverez cet exemple dans checkbox-label.html (à voir directement aussi).
      
+
      Note : Vous trouverez cet exemple dans checkbox-label.html (à voir directement aussi).
      
 
      Étiquettes multiples
      
@@ -129,29 +132,29 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML
 
 
      Considérons cet exemple :
      
 
-
      <p>Les champs obligatoires sont suivis de <abbr title="required">*</abbr>.</p>
-
-<!-- Donc ceci : -->
-<div>
-  <label for="username">Nom :</label>
-  <input type="text" name="username">
-  <label for="username"><abbr title="required">*</abbr></label>
-</div>
-
-<!-- sera mieux programmé ainsi : -->
-<div>
-  <label for="username">
-    <span>Nom :</span>
-    <input id="username" type="text" name="username">
-    <abbr title="required">*</abbr>
-  </label>
-</div>
-
-<!-- mais ceci est probablement encore meilleur : -->
-<div>
-  <label for="username">Nom :<abbr title="required">*</abbr></label>
-  <input id="username" type="text" name="username">
-</div>
      
+
      <p>Les champs obligatoires sont suivis de <abbr title="required">*</abbr>.</p>
+
+<!-- Donc ceci : -->
+<div>
+  <label for="username">Nom :</label>
+  <input type="text" name="username">
+  <label for="username"><abbr title="required">*</abbr></label>
+</div>
+
+<!-- sera mieux programmé ainsi : -->
+<div>
+  <label for="username">
+    <span>Nom :</span>
+    <input id="username" type="text" name="username">
+    <abbr title="required">*</abbr>
+  </label>
+</div>
+
+<!-- mais ceci est probablement encore meilleur : -->
+<div>
+  <label for="username">Nom :<abbr title="required">*</abbr></label>
+  <input id="username" type="text" name="username">
+</div>
      Le paragraphe du haut définit la règle pour les éléments obligatoires. Ce doit être au début pour s'assurer que les techniques d'assistance telles que les lecteurs d'écran l'afficheront ou le vocaliseront à l'utilisateur avant qu'il ne trouve un élément obligatoire. Ainsi, ils sauront ce que signifie l'astérisque. Un lecteur d'écran mentionnera l'astérisque en disant « astérisque » ou « obligatoire », selon les réglages du lecteur d'écran — dans tous les cas, ce qui sera dit est clairement précisé dans le premier paragraphe.
      
 
@@ -162,11 +165,11 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML
 
      
-
      Note : Vous pouvez obtenir des résultats légérement différents, selon votre lecteur d'écran. Ce qui précéde a été testé avec VoiceOver (et NVDA se comporte de la même façon). Nous aimerions avoir un retour sur vos expériences également.
      
+
      Note : Vous pouvez obtenir des résultats légérement différents, selon votre lecteur d'écran. Ce qui précéde a été testé avec VoiceOver (et NVDA se comporte de la même façon). Nous aimerions avoir un retour sur vos expériences également.
      
 
      
-
      Note : Vous trouverez cet exemple sur GitHub dans required-labels.html (à voir directement aussi). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID !
      
+
      Note : Vous trouverez cet exemple sur GitHub dans required-labels.html (à voir directement aussi). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID !
      
 
      Structures HTML courantes dans les formulaires
      
@@ -185,22 +188,22 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML
 
 
      Mettons ces idées en pratique et construisons une structure de formulaire un peu plus sophistiquée — un formulaire de paiement. Il contiendra un certain nombre de types de widgets que vous ne comprenez pas encore — ne vous inquiétez pas pour l'instant ; vous découvrirez comment ils fonctionnent dans l'article suivant (Les widgets natifs pour formulaire). Pour l'instant, lisez attentivement les descriptions en suivant les instructions ci-dessous et commencez à vous faire une idée des éléments enveloppes que nous utilisons pour structurer le formulaire, et pourquoi.
      
 
-
        
+
          
  
        1. Pour commencer, faites une copie locale de notre fichier modèle vierge et des CSS pour notre formulaire de paiement  dans un nouveau répertoire.
          2. 
  
        2. Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML :
-  
          <link href="payment-form.css" rel="stylesheet">
          
+  
          <link href="payment-form.css" rel="stylesheet">
          
  
          3. 
  
        3. Ensuite, commencez le formulaire en ajoutant un élément {{htmlelement("form")}} :
-  
          <form>
+  
          <form>
 
 </form>
          
  
          4. 
  
        4. Entre les balises <form>, ajoutez un en‑tête et un paragraphe pour informer les utilisateurs comment sont marqués les champs obligatoires :
-  
          <h1>Formulaire de paiement</h1>
-<p>Les champs obligatoires sont suivis par un <strong><abbr title="required">*</abbr></strong>.</p>
          
+  
          <h1>Formulaire de paiement</h1>
+<p>Les champs obligatoires sont suivis par un <strong><abbr title="required">*</abbr></strong>.</p>
          
  
          5. 
  
        5. Ensuite, nous ajoutons une grande section de code dans le formulaire, sous la précédente. Ici vous verrez que nous enveloppons les champs d'informations de contact dans des éléments {{htmlelement("section")}} distincts. De plus, nous avons un ensemble de deux boutons radio, que nous mettons chacun à l'intérieur de leur propre élément de liste ({{htmlelement("li")}}). Enfin, nous avons deux zones de texte standard {{htmlelement("input")}} et leurs éléments {{htmlelement("label")}} associés, chacun contenu dans un élément {{htmlelement("p")}}, plus une entrée pour le mot de passe. Ajoutez ce code à votre formulaire maintenant :
-  
          <section>
+  
          <section>
     <h2>Informations de contact</h2>
     <fieldset>
       <legend>Qualité</legend>
@@ -240,10 +243,10 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML
       </label>
       <input type="password" id="pwd" name="password">
     </p>
-</section>
          
+</section>
          
  
          6. 
  
        6. Nous arrivons maintenant à la deuxième <section> de notre formulaire — l'information de paiement. Ici nous avons trois widgets distincts avec leur étiquette, chacun contenu dans un paragraphe <p>. Le premier est un menu déroulant ({{htmlelement("select")}}) pour le choix du type de la carte de crédit. Le deuxième  est un élément <input> de type nombre pour entrer le numéro de la carte de crédit. Le dernier est un élément <input> de type date pour entrer la date d'expiration de la carte de crédit (il sera accompagné d'un widget dateur pour les navigateurs prenant en charge cette fonctionnalité, et sera un simple champ textuel pour les navigateurs ne la prenant pas en charge). À nouveau, entrez ce qui suit après la section ci‑dessus :
-  
          
+  
           <section>
     <h2>Informations de paiement</h2>
     <p>
@@ -271,10 +274,10 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML
       </label>
       <input type="text" id="date" name="expiration">
     </p>
-</section>
          
+</section>
          
  
          7. 
  
        7. La dernière section est plus simple ; elle ne contient qu'un bouton {{htmlelement("button")}} de type submit, pour adresser les données du formulaire. Ajoutez ceci au bas du formulaire :
-  
          <p> <button type="submit">Valider le paiement</button> </p>
          
+  
          <p> <button type="submit">Valider le paiement</button> </p>
          
  
          8. 
 
        
 
@@ -298,7 +301,7 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML
 
 
          
  
        • Mon premier formulaire HTML
          • 
- 
        • Comment structurer un formulaire HTML
          • 
+ 
        • Comment structurer un formulaire HTML
          • 
  
        • Les widgets natifs pour formulaire
          • 
  
        • Envoi des données de formulaire
          • 
  
        • Validation des données de formulaire
          • 
diff --git a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.html b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.html
index 6b9dc84cc2..7f12753fa5 100644
--- a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.html
+++ b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.html
@@ -6,7 +6,7 @@ original_slug: Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers
 ---
 
          {{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}
          
 
-
          Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le « navigateur historique ». Oui, admettons‑le, si on dit « navigateur historique », nous pensons tous aux anciennes versions d'Internet Explorer ... mais elles sont loin d'être les seules. Les premières versions de Firefox, comme la version ESR, sont aussi des « navigateurs historiques ». Et dans le monde du mobile ? Quand ni le navigateur ni l'OS ne peut être mis à jour? Oui, il y a beaucoup de vieux smartphones Android ou des iPhones dont le navigateur par défaut n'est pas à jour. Ceux-ci sont aussi des « navigateurs historiques ».
          
+
          Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le « navigateur historique ». Oui, admettons‑le, si on dit « navigateur historique », nous pensons tous aux anciennes versions d'Internet Explorer ... mais elles sont loin d'être les seules. Les premières versions de Firefox, comme la version ESR, sont aussi des « navigateurs historiques ». Et dans le monde du mobile ? Quand ni le navigateur ni l'OS ne peut être mis à jour? Oui, il y a beaucoup de vieux smartphones Android ou des iPhones dont le navigateur par défaut n'est pas à jour. Ceux-ci sont aussi des « navigateurs historiques ».
          
 
 
          Malheureusement, parcourir cette jungle est une facette du métier. Mais opportunément, il existe quelques astuces pour nous aider à résoudre 80 % des problèmes causés par ces vieilles versions de navigateur.
          
 
@@ -67,8 +67,8 @@ original_slug: Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers
  
  
      
-   
-   
+   
+   
      
  
   
      
    Prérequis :Notions concernant les ordinateurs et les connaissances de base du HTML.Notions concernant les ordinateurs et les connaissances de base du HTML.
   
      
   
      
    Objectif :
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
      
   
      Capture d'écran de l'entrée de couleur sur Chrome pour Mac OSXCapture d'écran de l'entrée de couleur sur FirefoxCapture d'écran de l'entrée de couleur sur Chrome pour Mac OSXCapture d'écran de l'entrée de couleur sur Firefox
   
      
        
 
      
@@ -189,7 +189,7 @@ input.button {
 
      L'équipe de Modernizr fait une maintenance opportune de grande liste de « polyfills ». Prenez celui dont vous avez besoin.
      
 
 
      
-
      Note : Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de  la documentation de Modernizr.
      
+
      Note : Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de  la documentation de Modernizr.
      
 
      
 
 
      Faites attention aux performances
      
@@ -208,7 +208,7 @@ input.button {
 
 
        
  
      • Mon premier formulaire HTML
        • 
- 
      • Comment structurer un formulaire HTML
        • 
+ 
      • Comment structurer un formulaire HTML
        • 
  
      • Les widgets natifs pour formulaire
        • 
  
      • Envoi des données de formulaire
        • 
  
      • Validation des données de formulaire
        • 
diff --git a/files/fr/learn/forms/index.html b/files/fr/learn/forms/index.html
index d4d758bdfc..76832228f3 100644
--- a/files/fr/learn/forms/index.html
+++ b/files/fr/learn/forms/index.html
@@ -13,9 +13,7 @@ original_slug: Web/Guide/HTML/Formulaires
 ---
 
        {{learnSidebar}}
        
 
-
        
-
        Ce guide est constitué d'une série d'articles qui vous aideront à maîtriser les formulaires HTML. Les formulaires HTML sont des outils très puissants pour interagir avec l'utilisateur ; toutefois, à cause de raisons historiques et techniques, il n'est pas forcément évident de savoir comment les utiliser de manière optimale. Nous allons aborder tous les aspects des formulaires HTML, de la structure à la décoration, de la gestion des données aux widgets sur-mesure.
        
-
        
+
        Ce guide est constitué d'une série d'articles qui vous aideront à maîtriser les formulaires HTML. Les formulaires HTML sont des outils très puissants pour interagir avec l'utilisateur ; toutefois, à cause de raisons historiques et techniques, il n'est pas forcément évident de savoir comment les utiliser de manière optimale. Nous allons aborder tous les aspects des formulaires HTML, de la structure à la décoration, de la gestion des données aux widgets sur-mesure.
        
 
 
        Prérequis
        
 
@@ -24,53 +22,53 @@ original_slug: Web/Guide/HTML/Formulaires
 
        Le reste du module est toutefois un peu plus difficile — il est facile de placer des widgets de formulaire dans une page, mais vous ne pourrez pas en faire vraiment quelque chose sans utiliser quelques fonctionnalités plus avancées, les CSS et le JavaScript. C'est pourquoi, avant de regarder ces autres parties, nous vous recommandons de faire un détour et de procéder d'abord à l'étude des CSS et du JavaScript.
        
 
 
        
-
        Note : Si vous travaillez sur un ordinateur/tablette/autre appareil sur lequel vous n'avez pas la possiblité de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code sur un programme de codage en ligne comme JSBin ou Thimble.
        
+
        Note : Si vous travaillez sur un ordinateur/tablette/autre appareil sur lequel vous n'avez pas la possiblité de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code sur un programme de codage en ligne comme JSBin ou Thimble.
        
 
        
 
-
        Éléments de base
        
+
        Éléments de base
        
 
 
        
  
        Mon premier formulaire HTML
        
  
        Le premier article de notre série vous donne une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et le comment de l'envoi des données à un serveur.
        
- 
        Comment structurer un formulaire HTML
        
+ 
        Comment structurer un formulaire HTML
        
  
        Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.
        
 
        
 
 
        Quels sont les widgets pour formulaire disponibles ?
        
 
 
        
- 
        Les widgets natifs pour formulaire
        
+ 
        Les widgets natifs pour formulaire
        
  
        Nous examinons maintenant en détail les fonctionnalités des widgets pour formulaire, en regardant quelles sont les options disponibles pour collecter différentes types de données.
        
 
        
 
 
        Validation et soumission des données de formulaires
        
 
 
        
- 
        Envoi des données de formulaire
        
+ 
        Envoi des données de formulaire
        
  
        Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.
        
- 
        Validation des données de formulaire
        
+ 
        Validation des données de formulaire
        
  
        Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont de format correct pour pouvoir les traiter correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser nos applications. La validation et la soumission des données des formulaires vous aidera à remplir ces objectifs — cet article indique ce qui est nécessaire de savoir.
        
 
        
 
 
        Guides avancés
        
 
 
        
- 
        Comment construire des widgets de formulaires personnalisés
        
+ 
        Comment construire des widgets de formulaires personnalisés
        
  
        Nous allons voir quelques cas où les widgets natifs ne donnent pas ce dont vous avez besoin, pour des raisons fonctionnelles ou de style par exemple. Dans de tels cas, vous pouvez avoir besoin de construire vous même un widget de formulaire en dehors du HTML brut. Cet article explique comment faire, ainsi que les considérations à prendre en compte ce faisant, le tout à l'aide de l'étude d'un cas particulier.
        
- 
        Envoi de formulaires à l'aide du JavaScript
        
+ 
        Envoi de formulaires à l'aide du JavaScript
        
  
        Cet article examine les manières d'utiliser un formulaire pour assembler une requête HTTP et l'adresser par l'intermédiaire d'un JavaScript personnalisé, au lieu d'une soumission standard de formulaire. Il examine aussi pourquoi vous pouvez souhaiter faire ainsi et ce que cela implique corrélativement. (Voir aussi « Utilisation des objets FormData ».)
        
- 
        Formulaires HTML dans les navigateurs anciens
        
+ 
        Formulaires HTML dans les navigateurs anciens
        
  
        Cet article couvre les détections de fonctionnalité, etc. Elles doivent être redirigées dans le module de tests croisés entre navigateurs, car la même problématique y sera mieux traitée.
        
 
        
 
 
        Guides de mise en forme des formulaires
        
 
 
        
- 
        Mise en forme des formulaires HTML
        
+ 
        Mise en forme des formulaires HTML
        
  
        Cet article est une introduction à la mise en forme des formulaires à l'aide des CSS, y compris tous les éléments de base qu'il est nécessaire de connaître pour les tâches de décoration élémentaires.
        
- 
        Mise en forme avancée des formulaires HTML
        
+ 
        Mise en forme avancée des formulaires HTML
        
  
        Dans cet article, nous regarderons des techniques de mise en forme plus avancées qu'il est nécessaire d'utiliser pour opérer sur les éléments les plus difficiles à traiter.
        
- 
        Tableau de compatibilité des propriétés entre widgets de formulaire
        
+ 
        Tableau de compatibilité des propriétés entre widgets de formulaire
        
  
        Ce dernier article fournit un référentiel pratique vous permettant de rechercher quelles propriétés des CSS sont compatibles avec tel ou tel élément de formulaire.
        
 
        
 
diff --git a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html
index 4c702ca4c0..5dea78fc0c 100644
--- a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html
+++ b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html
@@ -15,7 +15,7 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
 ---
 
        {{learnsidebar}}{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}
        
 
-
        Les tables de compatibilité suivantes tentent de résumer l'état de la prise en charge des CSS par les formulaires HTML. Eu égard à la complexité des CSS et des formulaires HTML, ces tables ne peuvent pas être considérées comme un élément de référence parfait. Toutefois, elles vous donneront un bon aperçu de ce qui peut et de ce qui ne peut pas être fait, ce qui vous aidera à apprendre comment faire les choses.
        
+
        Les tables de compatibilité suivantes tentent de résumer l'état de la prise en charge des CSS par les formulaires HTML. Eu égard à la complexité des CSS et des formulaires HTML, ces tables ne peuvent pas être considérées comme un élément de référence parfait. Toutefois, elles vous donneront un bon aperçu de ce qui peut et de ce qui ne peut pas être fait, ce qui vous aidera à apprendre comment faire les choses.
        
 
 
        Comment lire les tables
        
 
@@ -92,15 +92,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Modèle de boîte CSS
   
   
-   {{cssxref("width")}}
-   Oui
-   Oui
+   {{cssxref("width")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("height")}}
-   Partiel[1][2]
-   Oui
+   {{cssxref("height")}}
+   Partiel
+   Oui
    
     
          
      
        1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche.
          2. 
@@ -109,9 +109,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("border")}}
-   Partiel[1][2]
-   Oui
+   {{cssxref("border")}}
+   Partiel
+   Oui
    
     
            
      
          1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche.
            2. 
@@ -120,15 +120,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("margin")}}
-   Oui
-   Oui
+   {{cssxref("margin")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("padding")}}
-   Partiel[1][2]
-   Oui
+   {{cssxref("padding")}}
+   Partiel
+   Oui
    
     
              
      
            1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche.
              2. 
@@ -142,9 +142,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Texte et polices
   
   
-   {{cssxref("color")}}[1]
-   Oui
-   Oui
+   {{cssxref("color")}}
+   Oui
+   Oui
    
     
                
      
              1. Si la propriété {{cssxref("border-color")}} n'est pas mentionnée, certains navigateurs fondés sur WebKit appliqueront la propriété {{cssxref("color")}} aussi bien à la bordure qu'à la police avec l'élément {{HTMLElement("textarea")}}.
                2. 
@@ -152,33 +152,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("font")}}
-   Oui
-   Oui
+   {{cssxref("font")}}
+   Oui
+   Oui
    Voir la note à propos de {{cssxref("line-height")}}
   
   
-   {{cssxref("letter-spacing")}}
-   Oui
-   Oui
+   {{cssxref("letter-spacing")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("text-align")}}
-   Oui
-   Oui
+   {{cssxref("text-align")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("text-decoration")}}
-   Partiel
-   Partiel
+   {{cssxref("text-decoration")}}
+   Partiel
+   Partiel
    Voir la note à propos de Opera
   
   
-   {{cssxref("text-indent")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("text-indent")}}
+   Partiel
+   Partiel
    
     
                  
      
                1. IE9 prend en charge cette propriété uniquement sur les éléments {{HTMLElement("textarea")}}, alors que Opera ne la prend en charge que sur les champs texte sur une ligne.
                  2. 
@@ -186,21 +186,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("text-overflow")}}
-   Partiel
-   Partiel
+   {{cssxref("text-overflow")}}
+   Partiel
+   Partiel
     
   
   
-   {{cssxref("text-shadow")}}
-   Partiel
-   Partiel
+   {{cssxref("text-shadow")}}
+   Partiel
+   Partiel
     
   
   
-   {{cssxref("text-transform")}}
-   Oui
-   Oui
+   {{cssxref("text-transform")}}
+   Oui
+   Oui
     
   
  
@@ -209,9 +209,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Bordure et arrière-plan
   
   
-   {{cssxref("background")}}
-   Partiel[1]
-   Oui
+   {{cssxref("background")}}
+   Partiel
+   Oui
    
     
                    
      
                  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
                    2. 
@@ -219,9 +219,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("border-radius")}}
-   Partiel[1][2]
-   Oui
+   {{cssxref("border-radius")}}
+   Partiel
+   Oui
    
     
                      
      
                    1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
                      2. 
@@ -230,9 +230,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("box-shadow")}}
-   Non
-   Partiel[1]
+   {{cssxref("box-shadow")}}
+   Non
+   Partiel
    
     
                        
      
                      1. IE9 ne prend pas en charge cette propriété.
                        2. 
@@ -258,15 +258,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Modèle de boîte CSS
   
   
-   {{cssxref("width")}}
-   Oui
-   Oui
+   {{cssxref("width")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("height")}}
-   Partiel[1]
-   Oui
+   {{cssxref("height")}}
+   Partiel
+   Oui
    
     
                          
      
                        1. Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.
                          2. 
@@ -274,21 +274,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("border")}}
-   Partiel
-   Oui
+   {{cssxref("border")}}
+   Partiel
+   Oui
     
   
   
-   {{cssxref("margin")}}
-   Oui
-   Oui
+   {{cssxref("margin")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("padding")}}
-   Partiel[1]
-   Oui
+   {{cssxref("padding")}}
+   Partiel
+   Oui
    
     
                            
      
                          1. Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.
                            2. 
@@ -301,57 +301,57 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Texte et polices
   
   
-   {{cssxref("color")}}
-   Oui
-   Oui
+   {{cssxref("color")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("font")}}
-   Oui
-   Oui
+   {{cssxref("font")}}
+   Oui
+   Oui
    Voir la note à propos de {{cssxref("line-height")}}.
   
   
-   {{cssxref("letter-spacing")}}
-   Oui
-   Oui
+   {{cssxref("letter-spacing")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("text-align")}}
-   Non
-   Non
+   {{cssxref("text-align")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-decoration")}}
-   Partiel
-   Oui
+   {{cssxref("text-decoration")}}
+   Partiel
+   Oui
     
   
   
-   {{cssxref("text-indent")}}
-   Oui
-   Oui
+   {{cssxref("text-indent")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("text-overflow")}}
-   Non
-   Non
+   {{cssxref("text-overflow")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-shadow")}}
-   Partiel
-   Partiel
+   {{cssxref("text-shadow")}}
+   Partiel
+   Partiel
     
   
   
-   {{cssxref("text-transform")}}
-   Oui
-   Oui
+   {{cssxref("text-transform")}}
+   Oui
+   Oui
     
   
  
@@ -360,15 +360,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Bordure et arrière-plan
   
   
-   {{cssxref("background")}}
-   Oui
-   Oui
+   {{cssxref("background")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("border-radius")}}
-   Yes[1]
-   Yes[1]
+   {{cssxref("border-radius")}}
+   Yes
+   Yes
    
     
                              
      
                            1. Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.
                              2. 
@@ -376,9 +376,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("box-shadow")}}
-   Non
-   Partiel[1]
+   {{cssxref("box-shadow")}}
+   Non
+   Partiel
    
     
                                
      
                              1. IE9 ne prend pas en charge cette propriété.
                                2. 
@@ -406,15 +406,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Modèle de boîte CSS
   
   
-   {{cssxref("width")}}
-   Oui
-   Oui
+   {{cssxref("width")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("height")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("height")}}
+   Partiel
+   Partiel
    
     
                                  
      
                                1. Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.
                                  2. 
@@ -422,21 +422,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("border")}}
-   Oui
-   Oui
+   {{cssxref("border")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("margin")}}
-   Oui
-   Oui
+   {{cssxref("margin")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("padding")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("padding")}}
+   Partiel
+   Partiel
    
     
                                    
      
                                  1. Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.
                                    2. 
@@ -449,55 +449,55 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Texte et polices
   
   
-   {{cssxref("color")}}
-   Oui
-   Oui
+   {{cssxref("color")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("font")}}
-   Oui
-   Oui
+   {{cssxref("font")}}
+   Oui
+   Oui
    Voir la note à propos de {{cssxref("line-height")}}.
   
   
-   {{cssxref("letter-spacing")}}
-   Oui
-   Oui
+   {{cssxref("letter-spacing")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("text-align")}}
-   Oui
-   Oui
+   {{cssxref("text-align")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("text-decoration")}}
-   Partiel
-   Partiel
+   {{cssxref("text-decoration")}}
+   Partiel
+   Partiel
     
   
   
-   {{cssxref("text-indent")}}
-   Oui
-   Oui
+   {{cssxref("text-indent")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("text-overflow")}}
-   Non
-   Non
+   {{cssxref("text-overflow")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-shadow")}}
-   Partiel
-   Partiel
+   {{cssxref("text-shadow")}}
+   Partiel
+   Partiel
     
   
   
-   {{cssxref("text-transform")}}
+   {{cssxref("text-transform")}}
    N.A.
    N.A.
     
@@ -508,22 +508,22 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Bordure et arrière‑plan
   
   
-   {{cssxref("background")}}
-   Non
-   Non
+   {{cssxref("background")}}
+   Non
+   Non
    
     
                                    Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
                                    
    
   
   
-   {{cssxref("border-radius")}}
-   Non
-   Non
+   {{cssxref("border-radius")}}
+   Non
+   Non
   
   
-   {{cssxref("box-shadow")}}
-   Non
-   Non
+   {{cssxref("box-shadow")}}
+   Non
+   Non
   
  
 
@@ -544,9 +544,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Modèle de boîte CSS
   
   
-   {{cssxref("width")}}
-   Non[1]
-   Non[1]
+   {{cssxref("width")}}
+   Non
+   Non
    
     
                                      
      
                                    1. Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.
                                      2. 
@@ -554,9 +554,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("height")}}
-   Non[1]
-   Non[1]
+   {{cssxref("height")}}
+   Non
+   Non
    
     
                                        
      
                                      1. Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.
                                        2. 
@@ -564,21 +564,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("border")}}
-   Non
-   Non
+   {{cssxref("border")}}
+   Non
+   Non
     
   
   
-   {{cssxref("margin")}}
-   Oui
-   Oui
+   {{cssxref("margin")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("padding")}}
-   Non
-   Non
+   {{cssxref("padding")}}
+   Non
+   Non
     
   
  
@@ -587,55 +587,55 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Texte et polices
   
   
-   {{cssxref("color")}}
+   {{cssxref("color")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("font")}}
+   {{cssxref("font")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("letter-spacing")}}
+   {{cssxref("letter-spacing")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-align")}}
+   {{cssxref("text-align")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-decoration")}}
+   {{cssxref("text-decoration")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-indent")}}
+   {{cssxref("text-indent")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-overflow")}}
+   {{cssxref("text-overflow")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-shadow")}}
+   {{cssxref("text-shadow")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-transform")}}
+   {{cssxref("text-transform")}}
    N.A.
    N.A.
     
@@ -646,21 +646,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Bordure et arrière-plan
   
   
-   {{cssxref("background")}}
-   Non
-   Non
+   {{cssxref("background")}}
+   Non
+   Non
     
   
   
-   {{cssxref("border-radius")}}
-   Non
-   Non
+   {{cssxref("border-radius")}}
+   Non
+   Non
     
   
   
-   {{cssxref("box-shadow")}}
-   Non
-   Non
+   {{cssxref("box-shadow")}}
+   Non
+   Non
     
   
  
@@ -684,9 +684,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Modèle de boîte CSS
   
   
-   {{cssxref("width")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("width")}}
+   Partiel
+   Partiel
    
     
                                          
      
                                        1. Cette propriété est correcte sur l'élément {{HTMLElement("select")}}, mais cela peut ne pas être le cas sur les éléments {{HTMLElement("option")}} ou {{HTMLElement("optgroup")}}.
                                          2. 
@@ -694,27 +694,27 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("height")}}
-   Non
-   Oui
+   {{cssxref("height")}}
+   Non
+   Oui
     
   
   
-   {{cssxref("border")}}
-   Partiel
-   Oui
+   {{cssxref("border")}}
+   Partiel
+   Oui
     
   
   
-   {{cssxref("margin")}}
-   Oui
-   Oui
+   {{cssxref("margin")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("padding")}}
-   Non[1]
-   Partiel[2]
+   {{cssxref("padding")}}
+   Non
+   Partiel
    
     
                                            
      
                                          1. La propriété est appliquée, mais de manière incohérente entre navigateurs sous Mac OSX.
                                            2. 
@@ -728,9 +728,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Texte et polices
   
   
-   {{cssxref("color")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("color")}}
+   Partiel
+   Partiel
    
     
                                              
      
                                            1. Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
                                              2. 
@@ -738,9 +738,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("font")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("font")}}
+   Partiel
+   Partiel
    
     
                                                
      
                                              1. Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
                                                2. 
@@ -748,9 +748,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("letter-spacing")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("letter-spacing")}}
+   Partiel
+   Partiel
    
     
                                                  
      
                                                1. IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
                                                  2. 
@@ -758,9 +758,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("text-align")}}
-   No[1]
-   No[1]
+   {{cssxref("text-align")}}
+   No
+   No
    
     
                                                    
      
                                                  1. IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété pour ce widget.
                                                    2. 
@@ -768,9 +768,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("text-decoration")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("text-decoration")}}
+   Partiel
+   Partiel
    
     
                                                      
      
                                                    1. Seul Firefox fournit une prise en charge totale de cette propriété. Opera ne la prend pas du tout en charge et d'autres navigateur ne le font que pour l'élément  {{HTMLElement("select")}}.
                                                      2. 
@@ -778,9 +778,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("text-indent")}}
-   Partiel[1][2]
-   Partiel[1][2]
+   {{cssxref("text-indent")}}
+   Partiel
+   Partiel
    
     
                                                        
      
                                                      1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
                                                        2. 
@@ -789,15 +789,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("text-overflow")}}
-   Non
-   Non
+   {{cssxref("text-overflow")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-shadow")}}
-   Partiel[1][2]
-   Partiel[1][2]
+   {{cssxref("text-shadow")}}
+   Partiel
+   Partiel
    
     
                                                          
      
                                                        1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
                                                          2. 
@@ -806,9 +806,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("text-transform")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("text-transform")}}
+   Partiel
+   Partiel
    
     
                                                            
      
                                                          1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
                                                            2. 
@@ -821,9 +821,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Bordure et arrière-plan
   
   
-   {{cssxref("background")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("background")}}
+   Partiel
+   Partiel
    
     
                                                              
      
                                                            1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
                                                              2. 
@@ -831,14 +831,14 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("border-radius")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("border-radius")}}
+   Partiel
+   Partiel
   
   
-   {{cssxref("box-shadow")}}
-   Non
-   Partiel[1]
+   {{cssxref("box-shadow")}}
+   Non
+   Partiel
   
  
 
@@ -859,33 +859,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Modèle de boîte CSS
   
   
-   {{cssxref("width")}}
-   Oui
-   Oui
+   {{cssxref("width")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("height")}}
-   Oui
-   Oui
+   {{cssxref("height")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("border")}}
-   Oui
-   Oui
+   {{cssxref("border")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("margin")}}
-   Oui
-   Oui
+   {{cssxref("margin")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("padding")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("padding")}}
+   Partiel
+   Partiel
    
     
                                                                
      
                                                              1. Opera ne prend pas en charge {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} sur l'élément {{HTMLElement("select")}}.
                                                                2. 
@@ -898,21 +898,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Texte et polices
   
   
-   {{cssxref("color")}}
-   Oui
-   Oui
+   {{cssxref("color")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("font")}}
-   Oui
-   Oui
+   {{cssxref("font")}}
+   Oui
+   Oui
    Voir la note à propos de {{cssxref("line-height")}}.
   
   
-   {{cssxref("letter-spacing")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("letter-spacing")}}
+   Partiel
+   Partiel
    
     
                                                                  
      
                                                                1. IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
                                                                  2. 
@@ -920,9 +920,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("text-align")}}
-   No[1]
-   No[1]
+   {{cssxref("text-align")}}
+   No
+   No
    
     
                                                                    
      
                                                                  1. IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété sur ce widget.
                                                                    2. 
@@ -930,9 +930,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("text-decoration")}}
-   No[1]
-   No[1]
+   {{cssxref("text-decoration")}}
+   No
+   No
    
     
                                                                      
      
                                                                    1. Uniquement pris en charge par Firefox et IE9+.
                                                                      2. 
@@ -940,27 +940,27 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("text-indent")}}
-   Non
-   Non
+   {{cssxref("text-indent")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-overflow")}}
-   Non
-   Non
+   {{cssxref("text-overflow")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-shadow")}}
-   Non
-   Non
+   {{cssxref("text-shadow")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-transform")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("text-transform")}}
+   Partiel
+   Partiel
    
     
                                                                        
      
                                                                      1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
                                                                        2. 
@@ -973,15 +973,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Bordure et arrière-plan
   
   
-   {{cssxref("background")}}
-   Oui
-   Oui
+   {{cssxref("background")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("border-radius")}}
-   Yes[1]
-   Yes[1]
+   {{cssxref("border-radius")}}
+   Yes
+   Yes
    
     
                                                                          
      
                                                                        1. Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.
                                                                          2. 
@@ -989,9 +989,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("box-shadow")}}
-   Non
-   Partiel[1]
+   {{cssxref("box-shadow")}}
+   Non
+   Partiel
    
     
                                                                            
      
                                                                          1. IE9 ne prend pas en charge cette propriété.
                                                                            2. 
@@ -1017,33 +1017,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Modèle de boîte CSS
   
   
-   {{cssxref("width")}}
-   Non
-   Non
+   {{cssxref("width")}}
+   Non
+   Non
     
   
   
-   {{cssxref("height")}}
-   Non
-   Non
+   {{cssxref("height")}}
+   Non
+   Non
     
   
   
-   {{cssxref("border")}}
-   Non
-   Non
+   {{cssxref("border")}}
+   Non
+   Non
     
   
   
-   {{cssxref("margin")}}
-   Non
-   Non
+   {{cssxref("margin")}}
+   Non
+   Non
     
   
   
-   {{cssxref("padding")}}
-   Non
-   Non
+   {{cssxref("padding")}}
+   Non
+   Non
     
   
  
@@ -1052,57 +1052,57 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Texte et polices
   
   
-   {{cssxref("color")}}
-   Non
-   Non
+   {{cssxref("color")}}
+   Non
+   Non
     
   
   
-   {{cssxref("font")}}
-   Non
-   Non
+   {{cssxref("font")}}
+   Non
+   Non
     
   
   
-   {{cssxref("letter-spacing")}}
-   Non
-   Non
+   {{cssxref("letter-spacing")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-align")}}
-   Non
-   Non
+   {{cssxref("text-align")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-decoration")}}
-   Non
-   Non
+   {{cssxref("text-decoration")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-indent")}}
-   Non
-   Non
+   {{cssxref("text-indent")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-overflow")}}
-   Non
-   Non
+   {{cssxref("text-overflow")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-shadow")}}
-   Non
-   Non
+   {{cssxref("text-shadow")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-transform")}}
-   Non
-   Non
+   {{cssxref("text-transform")}}
+   Non
+   Non
     
   
  
@@ -1111,21 +1111,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Bordure et arrière-plan
   
   
-   {{cssxref("background")}}
-   Non
-   Non
+   {{cssxref("background")}}
+   Non
+   Non
     
   
   
-   {{cssxref("border-radius")}}
-   Non
-   Non
+   {{cssxref("border-radius")}}
+   Non
+   Non
     
   
   
-   {{cssxref("box-shadow")}}
-   Non
-   Non
+   {{cssxref("box-shadow")}}
+   Non
+   Non
     
   
  
@@ -1147,33 +1147,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Modèle de boîte CSS
   
   
-   {{cssxref("width")}}
-   Non
-   Non
+   {{cssxref("width")}}
+   Non
+   Non
     
   
   
-   {{cssxref("height")}}
-   Non
-   Non
+   {{cssxref("height")}}
+   Non
+   Non
     
   
   
-   {{cssxref("border")}}
-   Non
-   Non
+   {{cssxref("border")}}
+   Non
+   Non
     
   
   
-   {{cssxref("margin")}}
-   Oui
-   Oui
+   {{cssxref("margin")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("padding")}}
-   Non
-   Non
+   {{cssxref("padding")}}
+   Non
+   Non
     
   
  
@@ -1182,15 +1182,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Texte et polices
   
   
-   {{cssxref("color")}}
-   Oui
-   Oui
+   {{cssxref("color")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("font")}}
-   No[1]
-   No[1]
+   {{cssxref("font")}}
+   No
+   No
    
     
                                                                              
      
                                                                            1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
                                                                              2. 
@@ -1198,9 +1198,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("letter-spacing")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("letter-spacing")}}
+   Partiel
+   Partiel
    
     
                                                                                
      
                                                                              1. Beaucoup de navigateurs appliquent cette propriété sur le bouton de sélection.
                                                                                2. 
@@ -1208,21 +1208,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("text-align")}}
-   Non
-   Non
+   {{cssxref("text-align")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-decoration")}}
-   Non
-   Non
+   {{cssxref("text-decoration")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-indent")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("text-indent")}}
+   Partiel
+   Partiel
    
     
                                                                                  
      
                                                                                1. Agit plus ou moins comme une marge supplementaire en dehors du widget.
                                                                                  2. 
@@ -1230,21 +1230,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("text-overflow")}}
-   Non
-   Non
+   {{cssxref("text-overflow")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-shadow")}}
-   Non
-   Non
+   {{cssxref("text-shadow")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-transform")}}
-   Non
-   Non
+   {{cssxref("text-transform")}}
+   Non
+   Non
     
   
  
@@ -1253,9 +1253,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Bordure et arrière-plan
   
   
-   {{cssxref("background")}}
-   No[1]
-   No[1]
+   {{cssxref("background")}}
+   No
+   No
    
     
                                                                                    
      
                                                                                  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
                                                                                    2. 
@@ -1263,15 +1263,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("border-radius")}}
-   Non
-   Non
+   {{cssxref("border-radius")}}
+   Non
+   Non
     
   
   
-   {{cssxref("box-shadow")}}
-   Non
-   Partiel[1]
+   {{cssxref("box-shadow")}}
+   Non
+   Partiel
    
     
                                                                                      
      
                                                                                    1. IE9 ne prend pas en charge cette propriété.
                                                                                      2. 
@@ -1299,33 +1299,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Modèle de boîte CSS
   
   
-   {{cssxref("width")}}
-   Non
-   Non
+   {{cssxref("width")}}
+   Non
+   Non
     
   
   
-   {{cssxref("height")}}
-   Non
-   Non
+   {{cssxref("height")}}
+   Non
+   Non
     
   
   
-   {{cssxref("border")}}
-   Non
-   Non
+   {{cssxref("border")}}
+   Non
+   Non
     
   
   
-   {{cssxref("margin")}}
-   Oui
-   Oui
+   {{cssxref("margin")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("padding")}}
-   Non
-   Non
+   {{cssxref("padding")}}
+   Non
+   Non
     
   
  
@@ -1334,57 +1334,57 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Texte et polices
   
   
-   {{cssxref("color")}}
-   Non
-   Non
+   {{cssxref("color")}}
+   Non
+   Non
     
   
   
-   {{cssxref("font")}}
-   Non
-   Non
+   {{cssxref("font")}}
+   Non
+   Non
     
   
   
-   {{cssxref("letter-spacing")}}
-   Non
-   Non
+   {{cssxref("letter-spacing")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-align")}}
-   Non
-   Non
+   {{cssxref("text-align")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-decoration")}}
-   Non
-   Non
+   {{cssxref("text-decoration")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-indent")}}
-   Non
-   Non
+   {{cssxref("text-indent")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-overflow")}}
-   Non
-   Non
+   {{cssxref("text-overflow")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-shadow")}}
-   Non
-   Non
+   {{cssxref("text-shadow")}}
+   Non
+   Non
     
   
   
-   {{cssxref("text-transform")}}
-   Non
-   Non
+   {{cssxref("text-transform")}}
+   Non
+   Non
     
   
  
@@ -1393,21 +1393,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Bordure et arrière-plan
   
   
-   {{cssxref("background")}}
-   Non
-   Non
+   {{cssxref("background")}}
+   Non
+   Non
     
   
   
-   {{cssxref("border-radius")}}
-   Non
-   Non
+   {{cssxref("border-radius")}}
+   Non
+   Non
     
   
   
-   {{cssxref("box-shadow")}}
-   Non
-   Non
+   {{cssxref("box-shadow")}}
+   Non
+   Non
     
   
  
@@ -1431,15 +1431,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Modèle de boîte CSS
   
   
-   {{cssxref("width")}}
-   Oui
-   Oui
+   {{cssxref("width")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("height")}}
-   No[1]
-   Oui
+   {{cssxref("height")}}
+   No
+   Oui
    
     
                                                                                        
      
                                                                                      1. Opera gère cette propriété comme pour un widget select avec les mêmes restrictions.
                                                                                        2. 
@@ -1447,21 +1447,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("border")}}
-   Oui
-   Oui
+   {{cssxref("border")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("margin")}}
-   Oui
-   Oui
+   {{cssxref("margin")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("padding")}}
-   No[1]
-   Oui
+   {{cssxref("padding")}}
+   No
+   Oui
    
     
                                                                                          
      
                                                                                        1. Opera gère cette propriété comme pour un widget select avec les mêmes restrictions.
                                                                                          2. 
@@ -1474,55 +1474,55 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Texte et polices
   
   
-   {{cssxref("color")}}
+   {{cssxref("color")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("font")}}
+   {{cssxref("font")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("letter-spacing")}}
+   {{cssxref("letter-spacing")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-align")}}
+   {{cssxref("text-align")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-decoration")}}
+   {{cssxref("text-decoration")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-indent")}}
+   {{cssxref("text-indent")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-overflow")}}
+   {{cssxref("text-overflow")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-shadow")}}
+   {{cssxref("text-shadow")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-transform")}}
+   {{cssxref("text-transform")}}
    N.A.
    N.A.
     
@@ -1533,9 +1533,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Bordure et arrière-plan
   
   
-   {{cssxref("background")}}
-   No[1]
-   No[1]
+   {{cssxref("background")}}
+   No
+   No
    
     
                                                                                            
      
                                                                                          1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
                                                                                            2. 
@@ -1543,14 +1543,14 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("border-radius")}}
-   No[1]
-   No[1]
+   {{cssxref("border-radius")}}
+   No
+   No
   
   
-   {{cssxref("box-shadow")}}
-   No[1]
-   No[1]
+   {{cssxref("box-shadow")}}
+   No
+   No
   
  
 
@@ -1573,33 +1573,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Modèle de boîte CSS
   
   
-   {{cssxref("width")}}
-   Oui
-   Oui
+   {{cssxref("width")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("height")}}
-   Oui
-   Oui
+   {{cssxref("height")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("border")}}
-   Partiel
-   Oui
+   {{cssxref("border")}}
+   Partiel
+   Oui
     
   
   
-   {{cssxref("margin")}}
-   Oui
-   Oui
+   {{cssxref("margin")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("padding")}}
-   Oui
-   Partiel[1]
+   {{cssxref("padding")}}
+   Oui
+   Partiel
    
     
                                                                                              
      
                                                                                            1. Chrome cache les éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} quand la propriété {{cssxref("padding")}} est appliquée sur un élément altéré.
                                                                                              2. 
@@ -1612,55 +1612,55 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Texte et polices
   
   
-   {{cssxref("color")}}
+   {{cssxref("color")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("font")}}
+   {{cssxref("font")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("letter-spacing")}}
+   {{cssxref("letter-spacing")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-align")}}
+   {{cssxref("text-align")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-decoration")}}
+   {{cssxref("text-decoration")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-indent")}}
+   {{cssxref("text-indent")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-overflow")}}
+   {{cssxref("text-overflow")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-shadow")}}
+   {{cssxref("text-shadow")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-transform")}}
+   {{cssxref("text-transform")}}
    N.A.
    N.A.
     
@@ -1671,9 +1671,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Bordure et arrière-plan
   
   
-   {{cssxref("background")}}
-   No[1]
-   No[1]
+   {{cssxref("background")}}
+   No
+   No
    
     
                                                                                                
      
                                                                                              1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
                                                                                                2. 
@@ -1681,14 +1681,14 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("border-radius")}}
-   No[1]
-   No[1]
+   {{cssxref("border-radius")}}
+   No
+   No
   
   
-   {{cssxref("box-shadow")}}
-   No[1]
-   No[1]
+   {{cssxref("box-shadow")}}
+   No
+   No
   
  
 
@@ -1711,15 +1711,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Modèle de boîte CSS
   
   
-   {{cssxref("width")}}
-   Oui
-   Oui
+   {{cssxref("width")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("height")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("height")}}
+   Partiel
+   Partiel
    
     
                                                                                                  
      
                                                                                                1. Chrome et Opera ajoutent quelque espace supplémentaire autour du widget, alors que Opera sous Windows 7 réduit la poignée de range.
                                                                                                  2. 
@@ -1727,21 +1727,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("border")}}
-   Non
-   Oui
+   {{cssxref("border")}}
+   Non
+   Oui
     
   
   
-   {{cssxref("margin")}}
-   Oui
-   Oui
+   {{cssxref("margin")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("padding")}}
-   Partiel[1]
-   Oui
+   {{cssxref("padding")}}
+   Partiel
+   Oui
    
     
                                                                                                    
      
                                                                                                  1. La propriété {{cssxref("padding")}} est appliquée, mais elle n'a aucun effet visible.
                                                                                                    2. 
@@ -1754,55 +1754,55 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Texte et polices
   
   
-   {{cssxref("color")}}
+   {{cssxref("color")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("font")}}
+   {{cssxref("font")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("letter-spacing")}}
+   {{cssxref("letter-spacing")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-align")}}
+   {{cssxref("text-align")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-decoration")}}
+   {{cssxref("text-decoration")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-indent")}}
+   {{cssxref("text-indent")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-overflow")}}
+   {{cssxref("text-overflow")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-shadow")}}
+   {{cssxref("text-shadow")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-transform")}}
+   {{cssxref("text-transform")}}
    N.A.
    N.A.
     
@@ -1813,9 +1813,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Bordure et arrière-plan
   
   
-   {{cssxref("background")}}
-   No[1]
-   No[1]
+   {{cssxref("background")}}
+   No
+   No
    
     
                                                                                                      
      
                                                                                                    1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
                                                                                                      2. 
@@ -1823,14 +1823,14 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("border-radius")}}
-   No[1]
-   No[1]
+   {{cssxref("border-radius")}}
+   No
+   No
   
   
-   {{cssxref("box-shadow")}}
-   No[1]
-   No[1]
+   {{cssxref("box-shadow")}}
+   No
+   No
   
  
 
@@ -1851,33 +1851,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Modèle de boîte CSS
   
   
-   {{cssxref("width")}}
-   Oui
-   Oui
+   {{cssxref("width")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("height")}}
-   Oui
-   Oui
+   {{cssxref("height")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("border")}}
-   Oui
-   Oui
+   {{cssxref("border")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("margin")}}
-   Oui
-   Oui
+   {{cssxref("margin")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("padding")}}
-   Oui
-   Oui
+   {{cssxref("padding")}}
+   Oui
+   Oui
     
   
  
@@ -1886,55 +1886,55 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Texte et polices
   
   
-   {{cssxref("color")}}
+   {{cssxref("color")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("font")}}
+   {{cssxref("font")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("letter-spacing")}}
+   {{cssxref("letter-spacing")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-align")}}
+   {{cssxref("text-align")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-decoration")}}
+   {{cssxref("text-decoration")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-indent")}}
+   {{cssxref("text-indent")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-overflow")}}
+   {{cssxref("text-overflow")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-shadow")}}
+   {{cssxref("text-shadow")}}
    N.A.
    N.A.
     
   
   
-   {{cssxref("text-transform")}}
+   {{cssxref("text-transform")}}
    N.A.
    N.A.
     
@@ -1945,15 +1945,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    Bordure et arrière-plan
   
   
-   {{cssxref("background")}}
-   Oui
-   Oui
+   {{cssxref("background")}}
+   Oui
+   Oui
     
   
   
-   {{cssxref("border-radius")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("border-radius")}}
+   Partiel
+   Partiel
    
     
                                                                                                        
      
                                                                                                      1. IE9 ne prend pas en charge cette propriété.
                                                                                                        2. 
@@ -1961,9 +1961,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
    
   
   
-   {{cssxref("box-shadow")}}
-   Partiel[1]
-   Partiel[1]
+   {{cssxref("box-shadow")}}
+   Partiel
+   Partiel
    
     
                                                                                                          
      
                                                                                                        1. IE9 ne prend pas en charge cette propriété.
                                                                                                          2. 
@@ -1979,7 +1979,7 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_
 
 
                                                                                                            
  
                                                                                                          • Mon premier formulaire HTML
                                                                                                            • 
- 
                                                                                                          • Comment structurer un formulaire HTML
                                                                                                            • 
+ 
                                                                                                          • Comment structurer un formulaire HTML
                                                                                                            • 
  
                                                                                                          • Les widgets natifs pour formulaire
                                                                                                            • 
  
                                                                                                          • Envoi des données de formulaire
                                                                                                            • 
  
                                                                                                          • Validation des données de formulaire
                                                                                                            • 
diff --git a/files/fr/learn/forms/sending_and_retrieving_form_data/index.html b/files/fr/learn/forms/sending_and_retrieving_form_data/index.html
index 9585d26c64..c2736e9d5b 100644
--- a/files/fr/learn/forms/sending_and_retrieving_form_data/index.html
+++ b/files/fr/learn/forms/sending_and_retrieving_form_data/index.html
@@ -17,9 +17,9 @@ original_slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_f
 ---
 
                                                                                                            {{LearnSidebar}}{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}}
                                                                                                            
 
-
                                                                                                            Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.
                                                                                                            
+
                                                                                                            Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.
                                                                                                            
 
-
+
                                                                                                            
@@ -42,9 +42,8 @@ original_slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_f
 
 
                                                                                                            Côté client, un formulaire HTML n'est rien d'autre qu'un moyen commode et convivial de configurer une requête HTTP pour envoyer des données à un serveur. L'utilisateur peut ainsi adresser des informations à joindre à la requête HTTP.
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module Programmation d'un site web côté‑serveur : premiers pas.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module Programmation d'un site web côté‑serveur : premiers pas.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Côté client : définition de la méthode d'envoi des données
                                                                                                            
@@ -71,9 +70,8 @@ original_slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_f
 
 
                                                                                                            <form action="#">
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Il est possible de spécifier une URL qui utilise le protocole HTTPS (HTTP sécurisé). Quand vous faites ceci, les données sont chiffrées avec le reste de la requête, même si le formulaire lui-même est hébergé dans une page non sécurisée à laquelle on accède via HTTP. D'autre part, si le formulaire est hébergé sur une page sécurisée mais qu'on spécifie une URL non sécurisée avec l'attribut action, tous les navigateurs affichent une alerte de sécurité pour l'utilisateur chaque fois qu'il envoie des données car celles-ci ne sont pas chiffrées.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Il est possible de spécifier une URL qui utilise le protocole HTTPS (HTTP sécurisé). Quand vous faites ceci, les données sont chiffrées avec le reste de la requête, même si le formulaire lui-même est hébergé dans une page non sécurisée à laquelle on accède via HTTP. D'autre part, si le formulaire est hébergé sur une page sécurisée mais qu'on spécifie une URL non sécurisée avec l'attribut action, tous les navigateurs affichent une alerte de sécurité pour l'utilisateur chaque fois qu'il envoie des données car celles-ci ne sont pas chiffrées.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            L'attribut method
                                                                                                            
@@ -118,9 +116,8 @@ original_slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_f
 
                                                                                                            GET /?say=Hi&to=Mom HTTP/1.1
 Host: foo.com
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Vous trouverez cet exemple sur GitHub — voyez get-method.html (à voir directement aussi).
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Vous trouverez cet exemple sur GitHub — voyez get-method.html (à voir directement aussi).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            La méthode POST
                                                                                                            
@@ -154,9 +151,8 @@ say=Hi&to=Mom
 
 
                                                                                                            L'en-tête Content-Length indique la taille du corps, et l'en-tête Content-Type indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment.
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Vous trouverez cet exemple sur GitHub — voyez post-method.html (à voir directement aussi).
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Vous trouverez cet exemple sur GitHub — voyez post-method.html (à voir directement aussi).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Voir les requêtes HTTP
                                                                                                            
@@ -202,10 +198,9 @@ say=Hi&to=Mom
 
 
                                                                                                            L'exécution du code PHP déclenche l'affichage de Hi Mom
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont MAMP (Mac et Windows) et AMPPS (Mac, Windows, Linux).
                                                                                                            
-  
                                                                                                            Notez également que si vous utilisez MAMP mais que vous n'avez pas installé MAMP Pro (ou si le temps d'essai de la démo de MAMP Pro a expiré), vous pourriez avoir des difficultés à le faire fonctionner. Pour le faire fonctionner à nouveau, nous avons constaté que vous pouvez charger l'application MAMP, puis choisir les options de menu MAMP > Préférences > PHP, et définir "Version standard :" à "7.2.x" (x sera différent selon la version que vous avez installée).
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont MAMP (Mac et Windows) et AMPPS (Mac, Windows, Linux).
                                                                                                            
+  
                                                                                                            Notez également que si vous utilisez MAMP mais que vous n'avez pas installé MAMP Pro (ou si le temps d'essai de la démo de MAMP Pro a expiré), vous pourriez avoir des difficultés à le faire fonctionner. Pour le faire fonctionner à nouveau, nous avons constaté que vous pouvez charger l'application MAMP, puis choisir les options de menu MAMP > Préférences > PHP, et définir "Version standard :" à "7.2.x" (x sera différent selon la version que vous avez installée).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Exemple: Python
                                                                                                            
@@ -233,9 +228,8 @@ if __name__ == "__main__":
   
                                                                                                          • greeting.html : Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction hello() vue plus haut qui s'exécute quand l'URL /hello est chargée dans le navigateur.
                                                                                                            • 
 
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'installer Python/PIP, puis Flask avec « pip3 install flask ». À ce moment‑là vous pourrez exécuter l'exemple avec « python3 python-example.py », puis en allant sur « localhost:5000 » dans votre navigateur.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'installer Python/PIP, puis Flask avec « pip3 install flask ». À ce moment‑là vous pourrez exécuter l'exemple avec « python3 python-example.py », puis en allant sur « localhost:5000 » dans votre navigateur.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Autres langages et canevas de structures
                                                                                                            
@@ -253,9 +247,8 @@ if __name__ == "__main__":
 
 
                                                                                                            Enfin il faut noter que même en utilisant ces canevas, travailler avec des formulaires n'est pas toujours facile. Mais c'est quand même bien plus facile que d'essayer d'en écrire vous‑même les fonctionnalités et cela vous économisera pas mal de temps.
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Nous déborderions du cadre de cet article en vous initiant aux langages côté serveur ou aux canevas. Les liens ci‑dessus vous donneront des informations si vous souhaitez en apprendre plus.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Nous déborderions du cadre de cet article en vous initiant aux langages côté serveur ou aux canevas. Les liens ci‑dessus vous donneront des informations si vous souhaitez en apprendre plus.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Cas particulier : envoyer des fichiers
                                                                                                            
@@ -286,9 +279,8 @@ if __name__ == "__main__":
   </div>
 </form>
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Les serveurs peuvent être configurés avec une limite de taille pour les fichiers et les requêtes HTTP afin d'éviter les abus.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Les serveurs peuvent être configurés avec une limite de taille pour les fichiers et les requêtes HTTP afin d'éviter les abus.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Problèmes courants de sécurité
                                                                                                            
@@ -331,7 +323,7 @@ if __name__ == "__main__":
 
 
                                                                                                              
   
                                                                                                            • Mon premier formulaire HTML
                                                                                                              • 
-  
                                                                                                            • Comment structurer un formulaire HTML
                                                                                                              • 
+  
                                                                                                            • Comment structurer un formulaire HTML
                                                                                                              • 
   
                                                                                                            • Les widgets natifs pour formulaire
                                                                                                              • 
   
                                                                                                            • Les types de saisie HTML5
                                                                                                              • 
   
                                                                                                            • Autres contrôles de formulaires
                                                                                                              • 
diff --git a/files/fr/learn/forms/sending_forms_through_javascript/index.html b/files/fr/learn/forms/sending_forms_through_javascript/index.html
index 73a9f6e15b..571ede2a5b 100644
--- a/files/fr/learn/forms/sending_forms_through_javascript/index.html
+++ b/files/fr/learn/forms/sending_forms_through_javascript/index.html
@@ -6,7 +6,7 @@ original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript
 ---
 
                                                                                                              {{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}
                                                                                                              
 
-
                                                                                                              Comme dans le précédent article, les formulaires HTML peuvent envoyer une requête HTTP par déclaration. Mais des formulaires peuvent aussi préparer une requête HTTP à adresser via JavaScript. Cet article explore comment faire cela.
                                                                                                              
+
                                                                                                              Comme dans le précédent article, les formulaires HTML peuvent envoyer une requête HTTP par déclaration. Mais des formulaires peuvent aussi préparer une requête HTTP à adresser via JavaScript. Cet article explore comment faire cela.
                                                                                                              
 
 
                                                                                                              Un formulaire n'est pas toujours un <form>
                                                                                                              
 
@@ -22,7 +22,7 @@ original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript
 
 
                                                                                                              Comment est-ce différent ?
                                                                                                              
 
-
                                                                                                              AJAX utilise l'objet DOM {{domxref("XMLHttpRequest")}} (XHR).Il peut construire des requêtes HTTP, les envoyer et retrouver leur résultats.
                                                                                                              
+
                                                                                                              AJAX utilise l'objet DOM {{domxref("XMLHttpRequest")}} (XHR).Il peut construire des requêtes HTTP, les envoyer et retrouver leur résultats.
                                                                                                              
 
 
                                                                                                              
 
                                                                                                              Note : Les techniques AJAX anciennes ne se fondaient pas forcément sur {{domxref("XMLHttpRequest")}}. Par exemple, JSONP combiné à la fonction eval(). Cela fonctionne, mais n'est pas recommandé en raison de sérieux problèmes de sécurité. La seule raison d'en poursuivre l'utilisation est l'utilisation de navigateurs anciens qui ne prennent pas en charge {{domxref("XMLHttpRequest")}} ou JSON, mais ce sont vraiment des navigateurs anciens ! Évitez ces techniques.
                                                                                                              
@@ -206,7 +206,7 @@ original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript
 
                                                                                                              La plus ancienne façon d'expédier des données de formulaire de manière asynchrone consiste à construire un formulaire avec l'API DOM, puis d'envoyer ses données dans un {{HTMLElement("iframe")}} caché. Pour accéder au résultat de votre envoi, il suffit de récupérer le contenu de l'élément {{HTMLElement("iframe")}}.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Avertissement : Évitez d'employer cette technique. Il y a des risques concernant la sécurité avec des services tierce-partie car vous laissez ouverte la possibilité d'une attaque par injection de script. Si vous utilisez HTTPS, il reste possible de perturber la politique de la même origine, ce qui peut rendre le contenu de l'élément {{HTMLElement("iframe")}} inatteignable. Toutefois, cette méthode peut être votre seule possibilité si vous devez prendre en charge des navigateurs très anciens.
                                                                                                              
+
                                                                                                              Attention : Évitez d'employer cette technique. Il y a des risques concernant la sécurité avec des services tierce-partie car vous laissez ouverte la possibilité d'une attaque par injection de script. Si vous utilisez HTTPS, il reste possible de perturber la politique de la même origine, ce qui peut rendre le contenu de l'élément {{HTMLElement("iframe")}} inatteignable. Toutefois, cette méthode peut être votre seule possibilité si vous devez prendre en charge des navigateurs très anciens.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Voici un exemple :
                                                                                                              
@@ -260,7 +260,7 @@ function sendData(data) {
 
 
                                                                                                               
                                                                                                              
 
-
                                                                                                              Gestion des données binaires
                                                                                                              
+
                                                                                                              Gestion des données binaires
                                                                                                              
 
 
                                                                                                              Si vous utilisez un objet {{domxref("XMLHttpRequest/FormData", "FormData")}} avec un formulaire qui inclut des widgets <input type="file">, les données seront traitées automatiquement. Mais pour envoyer des données binaires à la main, il y a un travail supplémentaire à faire.
                                                                                                              
 
@@ -428,7 +428,7 @@ window.addEventListener('load', function () {
 
 
                                                                                                                
  
                                                                                                              • Mon premier formulaire HTML
                                                                                                                • 
- 
                                                                                                              • Comment structurer un formulaire HTML
                                                                                                                • 
+ 
                                                                                                              • Comment structurer un formulaire HTML
                                                                                                                • 
  
                                                                                                              • Les widgets natifs pour formulaire
                                                                                                                • 
  
                                                                                                              • Envoi des données de formulaire
                                                                                                                • 
  
                                                                                                              • Validation des données de formulaire
                                                                                                                • 
diff --git a/files/fr/learn/forms/styling_web_forms/index.html b/files/fr/learn/forms/styling_web_forms/index.html
index ea8b60a29b..95ddead893 100644
--- a/files/fr/learn/forms/styling_web_forms/index.html
+++ b/files/fr/learn/forms/styling_web_forms/index.html
@@ -81,7 +81,7 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML
   -webkit-appearance: none;
 }
 
-
                                                                                                                This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance
                                                                                                                
+
                                                                                                                This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance
                                                                                                                
 
 
                                                                                                                Comme vous pouvez le voir sur la capture d'écran pour Chrome, les deux champs ont une bordure, mais le premier champ n'utilise pas la propriété -webkit-appearance tandis que le second a recours à la propriété -webkit-appearance:none. La différence est notable.
                                                                                                                
 
@@ -96,7 +96,7 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML
 
 
                                                                                                                La capture d'écran ci-dessous montre les différences. Sur la gauche il y a l'affichage par défaut de Firefox pour Mac OS X, avec les réglages de police par défaut du système. Sur la droite, les mêmes éléments avec la règle d'harmonisation utilisée.
                                                                                                                
 
-
                                                                                                                This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization
                                                                                                                
+
                                                                                                                This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization
                                                                                                                
 
 
                                                                                                                Il existe un débat animé sur le fait qu'un formulaire ait une meilleure apparence en utilisant les valeurs par défaut du système d'exploitation ou en utilisant des valeurs unifiant l'apparence. C'est à vous de décider en tant que designer du site ou de l'application.
                                                                                                                
 
@@ -115,7 +115,7 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML
           box-sizing: border-box;
 }
 
-
                                                                                                                This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing.
                                                                                                                
+
                                                                                                                This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing.
                                                                                                                
 
 
                                                                                                                Dans la capture d'écran ci-dessous, la colonne de gauche n'utilise pas {{cssxref("box-sizing")}}, alors que la colonne de droite utilise la propriété CSS border-box. Remarquez comment tous les éléments occupent le même espace, malgré les valeurs par défaut de la plateforme pour chacun des blocs.
                                                                                                                
 
@@ -156,7 +156,7 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML
 
 
                                                                                                                Regardons sur un exemple concret la façon de composer un formulaire HTML. Cela aidera à clarifier nombre de ces concepts. Nous allons construire un formulaire de contact sous forme de « carte postale » :
                                                                                                                
 
-
                                                                                                                C'est ce que nous voulons réaliser avec le HTML et les CSS.
                                                                                                                
+
                                                                                                                C'est ce que nous voulons réaliser avec le HTML et les CSS.
                                                                                                                
 
 
                                                                                                                HTML
                                                                                                                
 
@@ -203,7 +203,7 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML
  
                                                                                                              • Allez sur le Webfont Generator de fontsquirrel.
                                                                                                                • 
  
                                                                                                              • En utilisant le formulaire, téléversez les fichiers de polices et créez un kit de polices pou le Web. Téléchargez le kit sur votre ordinateur.
                                                                                                                • 
  
                                                                                                              • Décompressez le fichier zip fourni.
                                                                                                                • 
- 
                                                                                                              • Dans le contenu décompressé vous trouverez deux fichiers .woff et deux fichiers .woff2. Copiez ces quatre fichiers dans un répertoire nommé fonts, dans le même répertoire que ci‑dessus. Nous utilisons deux fichiers différents pour maximiser la compatibilité avec les navigateurs ; voyez notre article sur les Web fonts pour des informations plus détaillées.
                                                                                                                • 
+ 
                                                                                                              • Dans le contenu décompressé vous trouverez deux fichiers .woff et deux fichiers .woff2. Copiez ces quatre fichiers dans un répertoire nommé fonts, dans le même répertoire que ci‑dessus. Nous utilisons deux fichiers différents pour maximiser la compatibilité avec les navigateurs ; voyez notre article sur les Web fonts pour des informations plus détaillées.
                                                                                                                • 
 
 
 
                                                                                                                Le CSS
                                                                                                                
@@ -216,18 +216,18 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML
 
 
                                                                                                                @font-face{
   font-family : "handwriting";
-  src: url('fonts/journal-webfont.woff2') format('woff2'),
-       url('fonts/journal-webfont.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
+  src: url('fonts/journal-webfont.woff2') format('woff2'),
+       url('fonts/journal-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
 }
 
 @font-face{
   font-family : "typewriter";
-  src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
-       url('fonts/veteran_typewriter-webfont.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
+  src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
+       url('fonts/veteran_typewriter-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
 }
 
 body {
@@ -327,7 +327,7 @@ form {
   overflow: auto;
 }
                                                                                                                
 
-
                                                                                                                L'élément {{HTMLElement("button")}} est très accommodant avec les CSS ; vous faites ce que vous voulez, même en utilisant les pseudo-elements !
                                                                                                                
+
                                                                                                                L'élément {{HTMLElement("button")}} est très accommodant avec les CSS ; vous faites ce que vous voulez, même en utilisant les pseudo-elements !
                                                                                                                
 
 
                                                                                                                button {
   position     : absolute;
@@ -379,7 +379,7 @@ button:focus {
 
 
                                                                                                                  
  
                                                                                                                • Mon premier formulaire HTML
                                                                                                                  • 
- 
                                                                                                                • Comment structurer un formulaire HTML
                                                                                                                  • 
+ 
                                                                                                                • Comment structurer un formulaire HTML
                                                                                                                  • 
  
                                                                                                                • Les widgets natifs pour formulaire
                                                                                                                  • 
  
                                                                                                                • Envoi des données de formulaire
                                                                                                                  • 
  
                                                                                                                • Validation des données de formulaire
                                                                                                                  • 
diff --git a/files/fr/learn/forms/your_first_form/example/index.html b/files/fr/learn/forms/your_first_form/example/index.html
index 70455c78a8..d5268524e3 100644
--- a/files/fr/learn/forms/your_first_form/example/index.html
+++ b/files/fr/learn/forms/your_first_form/example/index.html
@@ -6,7 +6,7 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple
 ---
 
                                                                                                                  Ceci est l'exemple pour l'article Mon premier formulaire HTML.
                                                                                                                  
 
-
                                                                                                                  Un formulaire simple
                                                                                                                  
+
                                                                                                                  Un formulaire simple
                                                                                                                  
 
 
                                                                                                                  Contenu HTML
                                                                                                                  
 
diff --git a/files/fr/learn/forms/your_first_form/index.html b/files/fr/learn/forms/your_first_form/index.html
index ca8631cf21..4ee759f619 100644
--- a/files/fr/learn/forms/your_first_form/index.html
+++ b/files/fr/learn/forms/your_first_form/index.html
@@ -15,9 +15,9 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML
 ---
 
                                                                                                                  {{LearnSidebar}}{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}
                                                                                                                  
 
-
                                                                                                                  Le premier article de notre série vous offre une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et la façon dont les données sont envoyées à un serveur.
                                                                                                                  
+
                                                                                                                  Le premier article de notre série vous offre une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et la façon dont les données sont envoyées à un serveur.
                                                                                                                  
 
-
                                                                                                            
   
     
                                                                                                            
       Prérequis :
                                                                                                            
+
                                                                                                            
@@ -49,7 +49,7 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML
 
 
                                                                                                            Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les premières pierres.
                                                                                                            
 
-
                                                                                                            Le croquis du formulaire que l'on veut créer
                                                                                                            
+
                                                                                                            Le croquis du formulaire que l'on veut créer
                                                                                                            Notre formulaire contiendra trois champs de texte et un bouton. Nous demandons simplement à notre utilisateur son nom, son adresse électronique et le message qu'il souhaite envoyer. En appuyant sur le bouton, le message sera envoyé au serveur web.
                                                                                                            
 
@@ -63,7 +63,7 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML
 
 
                                                                                                            Tous les formulaires HTML débutent par un élément {{HTMLElement("form")}} comme celui-ci :
                                                                                                            
 
-
                                                                                                            <form action="/my-handling-form-page" method="post">
+
                                                                                                            <form action="/my-handling-form-page" method="post">
 
 </form>
                                                                                                            
 
@@ -86,7 +86,7 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML
 
 
                                                                                                            En terme de code HTML, nous avons besoin de quelque chose qui ressemble à ceci pour mettre en œuvre nos widgets de formulaire.
                                                                                                            
 
-
                                                                                                            <form action="/ma-page-de-traitement" method="post">
+
                                                                                                            <form action="/ma-page-de-traitement" method="post">
     <div>
         <label for="name">Nom :</label>
         <input type="text" id="name" name="user_name">
@@ -112,17 +112,17 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML
 
 
                                                                                                            Last but not least, remarquez la syntaxe de <input> vs <textarea></textarea>. C'est une des bizarreries du HTML. La balise <input> est un élément vide, ce qui signifie qu'il n'a pas besoin de balise fermante. Au contraire, {{HTMLElement("textarea")}} n'est pas un élément vide, il faut donc le fermer avec la balise fermante appropriée. Cela a un effet sur une caractéristique spécifique des formulaires HTML : la manière dont vous définissez la valeur par défaut. Pour définir une valeur par défaut d'un élément {{HTMLElement("input")}} vous devez utiliser l'attribut value de la manière suivante :
                                                                                                            
 
-
                                                                                                            <input type="text" value="par défaut cet élément sera renseigné avec ce texte">
                                                                                                            
+
                                                                                                            <input type="text" value="par défaut cet élément sera renseigné avec ce texte">
                                                                                                            
 
 
                                                                                                            A contrario, si vous souhaitez définir la valeur par défaut d'un élément {{HTMLElement("textarea")}}, il suffit simplement de mettre la valeur par défaut entre les balises ouvrantes et fermantes de l'élément {{HTMLElement("textarea")}} de la manière suivante :
                                                                                                            
 
-
                                                                                                            <textarea>par défaut cet élément sera renseigné avec ce texte</textarea>
                                                                                                            
+
                                                                                                            <textarea>par défaut cet élément sera renseigné avec ce texte</textarea>
                                                                                                            
 
 
                                                                                                            L'élément {{HTMLElement("button")}}
                                                                                                            
 
 
                                                                                                            Notre formulaire est presque terminé. Il nous suffit seulement d'ajouter un bouton pour permettre à l'utilisateur de nous envoyer les données renseignées dans le formulaire. Ceci se fait simplement en ajoutant d'un élément {{HTMLElement("button")}} ; ajoutez‑le juste avant la balise fermante </form> :
                                                                                                            
 
-
                                                                                                                <div class="button">
+
                                                                                                                <div class="button">
         <button type="submit">Envoyer le message</button>
     </div>
 
                                                                                                            
@@ -136,30 +136,30 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML
 
 
 
                                                                                                            
-
                                                                                                            Note : Vous pouvez aussi utiliser l'élément {{HTMLElement("input")}} avec le type approprié pour produire un bouton, par exemple <input type="submit">. Le principal avantage de {{HTMLElement("button")}} par rapport à l'élément {{HTMLElement("input")}} est que ce dernier ne permet d'utiliser que du texte comme étiquette tandis que l'élément {{HTMLElement("button")}} permet d'utiliser n'importe quel contenu HTML, autorisant ainsi des textes de bouton plus complexes et créatifs.
                                                                                                            
+
                                                                                                            Note : Vous pouvez aussi utiliser l'élément {{HTMLElement("input")}} avec le type approprié pour produire un bouton, par exemple <input type="submit">. Le principal avantage de {{HTMLElement("button")}} par rapport à l'élément {{HTMLElement("input")}} est que ce dernier ne permet d'utiliser que du texte comme étiquette tandis que l'élément {{HTMLElement("button")}} permet d'utiliser n'importe quel contenu HTML, autorisant ainsi des textes de bouton plus complexes et créatifs.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Mise en page élémentaire du formulaire
                                                                                                            
 
 
                                                                                                            Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre navigateur préféré, vous verrez qu'il est plutôt laid.
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez  first-form.html ( ou également directement).
                                                                                                            
+
                                                                                                            Note : Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez  first-form.html ( ou également directement).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Les formulaires sont notoirement embêtants à présenter joliment. Apprendre la mise en page ou la décoration des formulaires sort du cadre de cet article, donc pour le moment nous allons simplement ajouter quelques indications au CSS pour lui donner un air convenable.
                                                                                                            
 
 
                                                                                                            Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans l'en‑tête HTML. Comme ceci :
                                                                                                            
 
-
                                                                                                            <style>
+
                                                                                                            <style>
 
 </style>
                                                                                                            
 
 
                                                                                                            Entre les balises style, ajoutons le CSS suivant, juste comme indiqué :
                                                                                                            
 
-
                                                                                                            form {
+
                                                                                                            form {
   /* Uniquement centrer le formulaire sur la page */
   margin: 0 auto;
   width: 400px;
@@ -219,10 +219,10 @@ button {
 
 
                                                                                                            Désormais notre formulaire a une bien meilleure allure.
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Il est sur GitHub dans first-form-styled.html (à voir aussi directement).
                                                                                                            
+
                                                                                                            Note : Il est sur GitHub dans first-form-styled.html (à voir aussi directement).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Envoyer les données au serveur Web
                                                                                                            
@@ -235,7 +235,7 @@ button {
 
 
                                                                                                            Pour nommer vos données vous devez utiliser l'attribut name pour identifier bien précisément l'élément d'information collecté par chacun des widgets. Regardons à nouveau le code de notre formulaire :
                                                                                                            
 
-
                                                                                                            form action="/my-handling-form-page" method="post">
+
                                                                                                            form action="/my-handling-form-page" method="post">
   <div>
     <label for="name">Nom :</label>
     <input type="text" id="name" name="user_name" />
diff --git a/files/fr/learn/front-end_web_developer/index.html b/files/fr/learn/front-end_web_developer/index.html
index 87618a86ca..1656374720 100644
--- a/files/fr/learn/front-end_web_developer/index.html
+++ b/files/fr/learn/front-end_web_developer/index.html
@@ -29,13 +29,13 @@ original_slug: Apprendre/Front-end_web_developer
 
 
                                                                                                            Vous n'avez pas besoin de connaissances préalables pour commencer ce cours. Tout ce dont vous avez besoin, c'est d'un ordinateur capable de faire fonctionner des navigateurs web modernes, d'une connexion internet et d'une volonté d'apprendre.
                                                                                                            
 
-
                                                                                                            Si vous n'êtes pas sûr que le développement web front-end est fait pour vous, et/ou si vous souhaitez une introduction en douceur avant de commencer un cours plus long et plus complet, consultez d'abord notre module Commencer avec le web.
                                                                                                            
+
                                                                                                            Si vous n'êtes pas sûr que le développement web front-end est fait pour vous, et/ou si vous souhaitez une introduction en douceur avant de commencer un cours plus long et plus complet, consultez d'abord notre module Commencer avec le web.
                                                                                                            
 
 
                                                                                                            Obtenir de l'aide
                                                                                                            
 
 
                                                                                                            Nous avons essayé de rendre l'apprentissage du développement web front-end aussi simple que possible, mais vous resterez probablement bloqué parce que vous ne comprenez pas quelque chose, ou parce que du code ne fonctionne pas.
                                                                                                            
 
-
                                                                                                            Ne paniquez pas. Nous avons tous des problèmes, que nous soyons débutants ou professionnels du développement web. L'article Apprendre et obtenir de l'aide vous donne une série de conseils pour rechercher des informations et vous aider. Si vous êtes toujours bloqués, n'hésitez pas à poser une question sur notre forum de discussion.
                                                                                                            
+
                                                                                                            Ne paniquez pas. Nous avons tous des problèmes, que nous soyons débutants ou professionnels du développement web. L'article Apprendre et obtenir de l'aide vous donne une série de conseils pour rechercher des informations et vous aider. Si vous êtes toujours bloqués, n'hésitez pas à poser une question sur notre forum de discussion.
                                                                                                            
 
 
                                                                                                            Allons-y. Bonne chance !
                                                                                                            
 
@@ -56,9 +56,9 @@ original_slug: Apprendre/Front-end_web_developer
 
                                                                                                            Guides fondamentaux
                                                                                                            
 
 
 
 
                                                                                                            Sémantique et structure avec HTML
                                                                                                            
@@ -76,9 +76,9 @@ original_slug: Apprendre/Front-end_web_developer
 
                                                                                                            Guides fondamentaux
                                                                                                            
 
 
 
 
                                                                                                            Design et mise en page avec le CSS
                                                                                                            
@@ -87,7 +87,7 @@ original_slug: Apprendre/Front-end_web_developer
 
 
                                                                                                            Prérequis
                                                                                                            
 
-
                                                                                                            Il est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre le CSS. Vous devriez au moins étudier l'introduction au HTML d'abord.
                                                                                                            
+
                                                                                                            Il est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre le CSS. Vous devriez au moins étudier l'introduction au HTML d'abord.
                                                                                                            
 
 
                                                                                                            Comment saurai-je que je suis prêt à passer à autre chose ?
                                                                                                            
 
@@ -96,16 +96,16 @@ original_slug: Apprendre/Front-end_web_developer
 
                                                                                                            Guides fondamentaux
                                                                                                            
 
 
 
 
                                                                                                            Ressources complémentaires
                                                                                                            
 
 
 
 
                                                                                                            Interactivité avec JavaScript
                                                                                                            
@@ -114,7 +114,7 @@ original_slug: Apprendre/Front-end_web_developer
 
 
                                                                                                            Prérequis
                                                                                                            
 
-
                                                                                                            ll est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre JavaScript. Vous devriez au moins étudier l'Introduction au HTML d'abord.
                                                                                                            
+
                                                                                                            ll est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre JavaScript. Vous devriez au moins étudier l'Introduction au HTML d'abord.
                                                                                                            
 
 
                                                                                                            Comment saurai-je que je suis prêt à passer à autre chose ?
                                                                                                            
 
@@ -123,11 +123,11 @@ original_slug: Apprendre/Front-end_web_developer
 
                                                                                                            Guides fondamentaux
                                                                                                            
 
 
 
 
                                                                                                            Formulaires web - Travailler avec les données des utilisateurs
                                                                                                            
@@ -145,7 +145,7 @@ original_slug: Apprendre/Front-end_web_developer
 
                                                                                                            Guides fondamentaux
                                                                                                            
 
 
 
 
                                                                                                            Faire profiter le Web à tout le monde
                                                                                                            
@@ -163,8 +163,8 @@ original_slug: Apprendre/Front-end_web_developer
 
                                                                                                            Guides fondamentaux
                                                                                                            
 
 
 
 
                                                                                                            Outils modernes
                                                                                                            
@@ -182,9 +182,9 @@ original_slug: Apprendre/Front-end_web_developer
 
                                                                                                            Guides fondamentaux
                                                                                                            
 
 
diff --git a/files/fr/learn/getting_started_with_the_web/css_basics/index.html b/files/fr/learn/getting_started_with_the_web/css_basics/index.html
index 894d563d3a..e4ea41e708 100644
--- a/files/fr/learn/getting_started_with_the_web/css_basics/index.html
+++ b/files/fr/learn/getting_started_with_the_web/css_basics/index.html
@@ -14,9 +14,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_CSS
 
                                                                                                            {{LearnSidebar}}
                                                                                                            
 {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}}
                                                                                                            
 
-
                                                                                                            
 
                                                                                                            Les CSS (Cascading Style Sheets en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web. Les bases des CSS présentent ce qu'il faut savoir pour commencer. Nous répondrons à des questions comme : Comment rendre mon texte rouge ou noir ? Comment faire apparaître mon contenu à tel endroit de l'écran ? Comment décorer ma page web avec une image ou une couleur d'arrière-plan ?
                                                                                                            
-
                                                                                                            
 
 
                                                                                                            Donc, que sont les CSS, réellement ?
                                                                                                            
 
@@ -38,13 +36,13 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_CSS
  
                                                                                                          • Sauvegardez index.html puis chargez-le dans votre navigateur. Vous devriez obtenir quelque chose comme :
                                                                                                            • 
 
 
-
                                                                                                            A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Si le texte de votre paragraphe s'affiche en rouge, félicitations ! Vous venez d'écrire votre premier CSS fonctionnel !
                                                                                                            
+
                                                                                                            A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Si le texte de votre paragraphe s'affiche en rouge, félicitations ! Vous venez d'écrire votre premier CSS fonctionnel !
                                                                                                            
 
 
                                                                                                            Anatomie d'une règle CSS
                                                                                                            
 
 
                                                                                                            Regardons un peu plus en détails ce que nous avons écrit en CSS :
                                                                                                            
 
-
                                                                                                            Diagramme expliquant les différents éléments d'une déclaration CSS
                                                                                                            
+
                                                                                                            Diagramme expliquant les différents éléments d'une déclaration CSS
                                                                                                            
 
 
                                                                                                            Cette structure s'appelle un ensemble de règles (ou seulement « une règle »). Les différentes parties se nomment :
                                                                                                            
 
@@ -136,7 +134,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_CSS
 
                                                                                                            Maintenant que nous avons vu quelques bases de CSS, ajoutons quelques règles et informations à notre fichier style.css pour que notre exemple soit réussi. Tout d'abord, améliorons les polices et le texte.
                                                                                                            
 
 
                                                                                                              
- 
                                                                                                            1. Pour commencer, revenez quelques étapes en arrière et récupérez le résultat de Google Fonts enregistré quelque part. Ensuite, ajoutez l'élément <link ... > quelque part au sein de head dans le fichier index.html (c'est-à-dire quelque part entre les balises <head> et </head>). Ça devrait ressembler à :
+ 
                                                                                                            2. Pour commencer, revenez quelques étapes en arrière et récupérez le résultat de Google Fonts enregistré quelque part. Ensuite, ajoutez l'élément <link ... > quelque part au sein de head dans le fichier index.html (c'est-à-dire quelque part entre les balises <head> et </head>). Ça devrait ressembler à :
 
   
                                                                                                              <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
                                                                                                              
  
                                                                                                              3. 
@@ -148,7 +146,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_CSS
 }
                                                                                                            
 
   
                                                                                                            
-  
                                                                                                            Note: Tout ce qui est entre /* et */ dans un document CSS est un commentaire  de CSS.  Le navigateur l'ignorera dans le rendu du code. C'est un endroit commode pour écrire des notes à propos de ce que vous faites.
                                                                                                            
+  
                                                                                                            Note : Tout ce qui est entre /* et */ dans un document CSS est un commentaire  de CSS.  Le navigateur l'ignorera dans le rendu du code. C'est un endroit commode pour écrire des notes à propos de ce que vous faites.
                                                                                                            
   
                                                                                                            
  
  
                                                                                                          • Ensuite, fixons les tailles des différents textes contenus dans le corps du HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, et {{htmlelement("p")}}). Nous allons également centrer le texte du titre et donner une taille de ligne et un espacement de caractère entre les lettres pour que le contenu du corps (body) du document soit plus lisible :
@@ -167,13 +165,13 @@ p, li {
 
 
                                                                                                            Vous pouvez ajuster ces valeurs en px comme vous voulez pour que le style obtenu soit celui que vous souhaitez. Vous devriez obtenir quelque chose comme ça :
                                                                                                            
 
-
                                                                                                            a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered
                                                                                                            
+
                                                                                                            a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered
                                                                                                            
 
 
                                                                                                            Boîtes, boîtes, encore et toujours des boîtes
                                                                                                            
 
 
                                                                                                            Vous verrez rapidement qu'avec les CSS, tout tourne autour de boîtes : définir leurs tailles, leurs couleurs, leurs positions, etc. Les éléments HTML d'une page peuvent, pour la plupart, être vus comme des boîtes placées les unes sur les autres.
                                                                                                            
 
-
                                                                                                            a big stack of boxes or crates sat on top of one another
                                                                                                            
+
                                                                                                            a big stack of boxes or crates sat on top of one another
                                                                                                            
 
 
                                                                                                            C'est pour cette raison que l'architecture de CSS est principalement basée sur un modèle de boîtes. Chacun de ces blocs prend un certain espace sur la page, de cette façon :
                                                                                                            
 
@@ -183,7 +181,7 @@ p, li {
  
                                                                                                          • margin, l'espace extérieur, autour de l'élément (en français cela correspond à la marge)
                                                                                                            • 
 
 
-
                                                                                                            three boxes sat inside one another. From outside to in they are labelled margin, border and padding
                                                                                                            
+
                                                                                                            three boxes sat inside one another. From outside to in they are labelled margin, border and padding
                                                                                                            
 
 
                                                                                                            Dans cette section, nous utilisons aussi :
                                                                                                            
 
@@ -259,14 +257,14 @@ p, li {
 
                                                                                                            Dernière chose : on va centrer l'image pour que ce soit plus joli. On pourrait utiliser margin: 0 auto, comme on l'a fait avant, mais on a besoin d'autre chose. L'élément body est un élément de bloc, cela signifie qu'il prend de l'espace et qu'on peut lui appliquer des marges et d'autres valeur pour l'espacement. En revanche, les images sont des éléments inline (ce qu'on pourrait traduire par « en ligne »), ce qui signifie qu'on ne peut pas leur appliquer ces valeurs d'espacement. Pour pouvoir appliquer des marges sur l'image comme pour un bloc, on utilise display: block; pour que l'image se comporte comme un élément de bloc.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : C'est tout à fait normal si vous ne comprenez pas complètement display: block; et les différences entre bloc et inline. Ça viendra plus tard, une fois que vous aurez plus utilisé CSS. Les différentes valeurs qu'on peut utiliser pour display sont expliquées sur la page de référence de la propriété display.
                                                                                                            
+
                                                                                                            Note : C'est tout à fait normal si vous ne comprenez pas complètement display: block; et les différences entre bloc et inline. Ça viendra plus tard, une fois que vous aurez plus utilisé CSS. Les différentes valeurs qu'on peut utiliser pour display sont expliquées sur la page de référence de la propriété display.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Conclusion
                                                                                                            
 
 
                                                                                                            Si vous avez suivi les différentes étapes de cet article, vous devriez obtenir une page qui ressemble à celle-ci (vous pouvez aussi voir notre version finale ici) :
                                                                                                            
 
-
                                                                                                            a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.
                                                                                                            
+
                                                                                                            a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.
                                                                                                            
 
 
                                                                                                            Si vous êtes bloqué·e quelque part, vous pouvez toujours comparer votre travail avec le code final de cet exemple disponible sur GitHub.
                                                                                                            
 
@@ -277,12 +275,12 @@ p, li {
 
                                                                                                            Dans ce module
                                                                                                            
 
 
diff --git a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html
index 50cc611033..b405b8f078 100644
--- a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html
+++ b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html
@@ -15,9 +15,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Gérer_les_fichiers
 
                                                                                                            {{LearnSidebar}}
                                                                                                            
 {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}}
                                                                                                            
 
-
                                                                                                            
-
                                                                                                            Un site web est composé de nombreux fichiers : contenu textuel, code, feuilles de styles, contenus média, etc. Lors de la construction d'un site web, ces fichiers doivent être organisés et rangés sur votre ordinateur afin qu'ils puissent interagir les uns avec les autres et que le contenu s'affiche correctement. Une fois que c'est fait, vous pourrez alors téléverser ces fichiers sur un serveur. Gérer les fichiers aborde certains problèmes auxquels vous devez faire attention pour mettre en place une organisation judicieuse des fichiers de votre site web.
                                                                                                            
-
                                                                                                            
+
                                                                                                            Un site web est composé de nombreux fichiers : contenu textuel, code, feuilles de styles, contenus média, etc. Lors de la construction d'un site web, ces fichiers doivent être organisés et rangés sur votre ordinateur afin qu'ils puissent interagir les uns avec les autres et que le contenu s'affiche correctement. Une fois que c'est fait, vous pourrez alors téléverser ces fichiers sur un serveur. Gérer les fichiers aborde certains problèmes auxquels vous devez faire attention pour mettre en place une organisation judicieuse des fichiers de votre site web.
                                                                                                            
 
 
                                                                                                            Où placer votre site web sur votre ordinateur ?
                                                                                                            
 
@@ -51,12 +49,12 @@ original_slug: Apprendre/Commencer_avec_le_web/Gérer_les_fichiers
 
 
 
                                                                                                            
-
                                                                                                            Note : Sur Windows, vous aurez peut être des problèmes pour voir le nom des fichiers en entier. En effet, Windows possède une option, activée par défaut : Masquer les extensions pour les types de fichiers connus. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant   Options des dossiers..., en enlevant la coche de Masquer les extensions pour les types de fichier connus puis en cliquant sur OK. Pour des informations propres à votre version de Windows, recherchez sur le Web !
                                                                                                            
+
                                                                                                            Note : Sur Windows, vous aurez peut être des problèmes pour voir le nom des fichiers en entier. En effet, Windows possède une option, activée par défaut : Masquer les extensions pour les types de fichiers connus. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant   Options des dossiers..., en enlevant la coche de Masquer les extensions pour les types de fichier connus puis en cliquant sur OK. Pour des informations propres à votre version de Windows, recherchez sur le Web !
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Les chemins de fichiers
                                                                                                            
 
-
                                                                                                            Pour que les fichiers puissent converser entre eux, il faut préciser le chemin pour les trouver — en résumé, la route qu'un fichier doit connaître pour situer l'autre fichier. Nous allons illustrer cela avec un peu de HTML dans index.html pour que la page affiche l'image choisie dans l'article « Quel aspect pour votre site web ? ».
                                                                                                            
+
                                                                                                            Pour que les fichiers puissent converser entre eux, il faut préciser le chemin pour les trouver — en résumé, la route qu'un fichier doit connaître pour situer l'autre fichier. Nous allons illustrer cela avec un peu de HTML dans index.html pour que la page affiche l'image choisie dans l'article « Quel aspect pour votre site web ? ».
                                                                                                            
 
 
                                                                                                              
  
                                                                                                            1. Copiez l'image précédemment choisie dans votre dossier images.
                                                                                                              2. 
@@ -77,7 +75,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Gérer_les_fichiers
  
                                                                                                            2. Sauvegardez votre fichier HTML puis chargez la page dans votre navigateur (il suffit de double-cliquer sur le fichier). Vous devriez obtenir une nouvelle page web affichant l'image !
                                                                                                              3. 
 
                                                                                                            
 
-
                                                                                                            A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world
                                                                                                            
+
                                                                                                            A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world
                                                                                                            
 
 
                                                                                                            Quelques règles générales à propos des chemins de fichier :
                                                                                                            
 
@@ -91,24 +89,24 @@ original_slug: Apprendre/Commencer_avec_le_web/Gérer_les_fichiers
 
                                                                                                            Pour le moment, c'est tout ce qu'il y a à savoir.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Le système de fichiers Windows utilise des barres obliques inversées (backslash : « \ ») et non des barres obliques (slash : « / »), par exemple C:\windows. Cela n'intervient pas en HTML — même si vous développez votre site sur Windows, vous devez toujours utiliser des barres obliques  (« / ») dans votre code..
                                                                                                            
+
                                                                                                            Note : Le système de fichiers Windows utilise des barres obliques inversées (backslash : « \ ») et non des barres obliques (slash : « / »), par exemple C:\windows. Cela n'intervient pas en HTML — même si vous développez votre site sur Windows, vous devez toujours utiliser des barres obliques  (« / ») dans votre code..
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Autre chose ?
                                                                                                            
 
 
                                                                                                            C'est tout ce qu'il y a à faire pour le moment en ce qui concerne les fichiers. Votre arborescence de fichiers devrait ressembler à cela :
                                                                                                            
 
-
                                                                                                            A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}}
                                                                                                            
+
                                                                                                            A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}}
                                                                                                            
 
 
                                                                                                            Dans ce module
                                                                                                            
 
 
diff --git a/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html
index 2355b250ef..0a0cf668b6 100644
--- a/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html
+++ b/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html
@@ -18,9 +18,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web
 
                                                                                                            {{LearnSidebar}}
                                                                                                            
 {{PreviousMenu("Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}
                                                                                                            
 
-
                                                                                                            
 
                                                                                                            Cet article illustre, de façon simplifiée, ce qui se passe quand une page web s'affiche dans un navigateur, sur votre ordinateur ou votre téléphone.
                                                                                                            
-
                                                                                                            
 
 
                                                                                                            Ces éléments théoriques ne sont pas strictement nécessaires pour commencer à faire du développement web dans un premier temps. Cependant, ils seront plus qu'utiles pour mieux comprendre comment le Web fonctionne en arrière-plan.
                                                                                                            
 
@@ -28,7 +26,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web
 
 
                                                                                                            Les ordinateurs qui se connectent au Web sont appelés des clients et des serveurs. Voici un diagramme simplifié qui illustre comment ils interagissent :
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            
 
 
                                                                                                              
  
                                                                                                            • Les clients correspondent aux appareils des utilisateurs connectés sur Internet (par exemple, votre ordinateur connecté par Wi-Fi ou votre téléphone connecté sur le réseau mobile) et aux logiciels d'accès au web (par exemple, les navigateurs comme Firefox ou Chrome).
                                                                                                              • 
@@ -41,7 +39,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web
 
 
                                                                                                              Faisons un parallèle entre le Web et une rue. D'un côté de la rue, il y a une maison qui correspond au client. De l'autre côté,  un magasin correspondant au serveur, et dans lequel vous souhaitez acheter quelque chose.
                                                                                                              
 
-
                                                                                                              
+
                                                                                                              
 
 
                                                                                                              En plus du client et du serveur, nous devons aussi mentionner :
                                                                                                              
 
@@ -77,7 +75,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web
 
 
                                                                                                              Il est possible d'atteindre directement les sites web en utilisant leurs adresses IP. Pour aller sur le site de Mozilla, vous pouvez saisir 63.245.215.20 dans la barre d'adresse d'un nouvel onglet de votre navigateur.
                                                                                                              
 
-
                                                                                                              A domain name is just another form of an IP address
                                                                                                              
+
                                                                                                              A domain name is just another form of an IP address
                                                                                                              
 
 
                                                                                                              Explications sur les paquets
                                                                                                              
 
@@ -86,10 +84,10 @@ original_slug: Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web
 
                                                                                                              Voir aussi
                                                                                                              
 
 
 
 
                                                                                                              Crédit
                                                                                                              
@@ -101,12 +99,12 @@ original_slug: Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web
 
                                                                                                              Dans ce module
                                                                                                              
 
 
diff --git a/files/fr/learn/getting_started_with_the_web/html_basics/index.html b/files/fr/learn/getting_started_with_the_web/html_basics/index.html
index e47385d2b4..b0a4bab53f 100644
--- a/files/fr/learn/getting_started_with_the_web/html_basics/index.html
+++ b/files/fr/learn/getting_started_with_the_web/html_basics/index.html
@@ -14,9 +14,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML
 
                                                                                                              {{LearnSidebar}}
                                                                                                              
 {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Gérer_les_fichiers", "Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web")}}
                                                                                                              
 
-
                                                                                                              
 
                                                                                                              HyperText Markup Language (HTML) est le code utilisé pour structurer une page web et son contenu. Par exemple, le contenu de votre page pourra être structuré en un ensemble de paragraphes, une liste à puces ou avec des images et des tableaux de données. Comme le suggère le titre, cet article vous fournit les bases de compréhension du HTML et de ses fonctions.
                                                                                                              
-
                                                                                                              
 
 
                                                                                                              Qu'est-ce que HTML, réellement ?
                                                                                                              
 
@@ -32,7 +30,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML
 
 
                                                                                                              Regardons de plus près cet élément paragraphe :
                                                                                                              
 
-
                                                                                                              Diagramme décrivant la structure d'un élément HTML
                                                                                                              
+
                                                                                                              Diagramme décrivant la structure d'un élément HTML
                                                                                                              
 
 
                                                                                                              Les composants principaux de notre élément sont :
                                                                                                              
 
@@ -45,7 +43,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML
 
 
                                                                                                              Les éléments peuvent aussi avoir des « attributs », ce qui ressemble à :
                                                                                                              
 
-
                                                                                                              Diagramme explicitant un attribut
                                                                                                              
+
                                                                                                              Diagramme explicitant un attribut
                                                                                                              
 
 
                                                                                                              Les attributs contiennent des informations supplémentaires qui portent sur l'élément et qu'on ne souhaite pas afficher avec le contenu. Dans cet exemple, l'attribut class permet d'utiliser un nom pour identifier l'élément et ce nom pourra être utilisé plus tard pour la mise en forme ou autre chose.
                                                                                                              
 
@@ -118,14 +116,14 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML
  
                                                                                                            • quelque chose s'est mal passé et l'image n'a pas pu être affichée. Par exemple, modifiez volontairement le chemin dans votre attribut src et faites qu'il soit incorrect. Si vous enregistrez et rechargez la page, vous verrez quelque chose comme ceci à la place de l'image :
                                                                                                              • 
 
 
-
                                                                                                              Mon image de test
                                                                                                              
+
                                                                                                              Mon image de test
                                                                                                              
 
 
                                                                                                              Le point important qu'il faut retenir est que l'attribut est utilisé pour décrire l'image. Le texte contenu dans cet attribut doit fournir suffisamment d'informations pour que le lecteur puisse savoir ce que l'image représente. Par exemple, le texte que j'utilise « Mon image de test » n'est pas bon du tout. Une meilleure solution serait de mettre « Le logo Firefox, qui représente un renard de feu entourant la Terre ».
                                                                                                              
 
 
                                                                                                              Essayez d'améliorer le texte alternatif pour l'image maintenant.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Pour plus d'informations sur l'accessibilité, vous trouverez la section Accessibilité de MDN.
                                                                                                              
+
                                                                                                              Note : Pour plus d'informations sur l'accessibilité, vous trouverez la section Accessibilité de MDN.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Baliser le texte
                                                                                                              
@@ -200,7 +198,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML
 
                                                                                                              Attention à ne pas oublier la partie avec https:// ou http:// qui représente le protocole utilisé, au début de l'adresse. Une fois que vous avez créé un lien, testez votre page et cliquez dessus pour vous assurer qu'il fonctionne correctement.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              href peut sembler un peu étrange à première vue. Une explication sur l'origine du nom pourra vous aider à mieux vous en souvenir : href correspond à hypertext reference en anglais, ce qui signifie « référence hypertexte » en français.
                                                                                                              
+
                                                                                                              Note : href peut sembler un peu étrange à première vue. Une explication sur l'origine du nom pourra vous aider à mieux vous en souvenir : href correspond à hypertext reference en anglais, ce qui signifie « référence hypertexte » en français.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Si ce n'est pas déjà fait, vous pouvez ajouter un lien sur votre page grâce à ces informations.
                                                                                                              
@@ -209,7 +207,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML
 
 
                                                                                                              Si vous avez suivi les différentes instructions de cette page, vous devriez obtenir une page qui ressemble à celle-ci (vous pouvez également la voir ici) :
                                                                                                              
  
                                                                                                              
- A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text
                                                                                                              
+ A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text
                                                                                                              
 
 
                                                                                                              Si vous êtes bloqué, n'hésitez pas à comparer votre travail avec l'exemple fini disponible sur GitHub.
                                                                                                              
 
@@ -220,12 +218,12 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML
 
                                                                                                              Dans ce module
                                                                                                              
 
 
diff --git a/files/fr/learn/getting_started_with_the_web/index.html b/files/fr/learn/getting_started_with_the_web/index.html
index 1347a8defd..9d4b584ac2 100644
--- a/files/fr/learn/getting_started_with_the_web/index.html
+++ b/files/fr/learn/getting_started_with_the_web/index.html
@@ -16,9 +16,7 @@ original_slug: Apprendre/Commencer_avec_le_web
 ---
 
                                                                                                              {{LearnSidebar}}
                                                                                                              
 
-
                                                                                                              
 
                                                                                                              Commencer avec le Web est une suite concise d'articles vous présentant la pratique du développement web. Vous installerez les outils nécessaires pour construire une simple page web et publier votre code.
                                                                                                              
-
                                                                                                              
 
 
                                                                                                              L'histoire de votre premier site web
                                                                                                              
 
diff --git a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html
index 7feb0b6e74..63af1ab636 100644
--- a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html
+++ b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html
@@ -15,19 +15,17 @@ original_slug: Apprendre/Commencer_avec_le_web/Installation_outils_de_base
 
                                                                                                              {{LearnSidebar}}
                                                                                                              
 {{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}}
                                                                                                              
 
-
                                                                                                              
 
                                                                                                              Dans cet article, nous allons vous montrer les outils dont vous aurez besoin pour développer un site web simple, ainsi que leur installation.
                                                                                                              
-
                                                                                                              
 
 
                                                                                                              Quels outils utilisent les professionnels ?
                                                                                                              
 
 
                                                                                                                
  
                                                                                                              • Un ordinateur. Ça peut sembler évident, mais certains d'entre vous lisent cet article depuis leur téléphone ou un terminal de bibliothèque. Pour du développement web sérieux, il est préférable d'investir dans un ordinateur de bureau tournant sous Linux, Mac ou Windows.
                                                                                                                • 
- 
                                                                                                              • Un éditeur de texte, pour y écrire du code. Cela peut être un éditeur gratuit (ex : Visual Studio Code, Atom, Sublime Text ou Notepad++) ou un éditeur hybride (Dreamweaver). Les éditeurs de documents Office ne sont pas adaptés à cette utilisation, car ils reposent sur des éléments cachés qui interfèrent avec les moteurs de rendu utilisés par les navigateurs web.
                                                                                                                • 
- 
                                                                                                              • Un navigateur web, pour y tester le code. Les navigateurs les plus utilisés sont Firefox, Chrome, Opera, Safari, Internet Explorer et  Microsoft Edge . Vous devez également tester le fonctionnement de votre site sur les appareils mobiles, et sur tous les anciens navigateurs que votre public cible utilise encore beaucoup (comme IE 8-10).
                                                                                                                • 
+ 
                                                                                                              • Un éditeur de texte, pour y écrire du code. Cela peut être un éditeur gratuit (ex : Visual Studio Code, Atom, Sublime Text ou Notepad++) ou un éditeur hybride (Dreamweaver). Les éditeurs de documents Office ne sont pas adaptés à cette utilisation, car ils reposent sur des éléments cachés qui interfèrent avec les moteurs de rendu utilisés par les navigateurs web.
                                                                                                                • 
+ 
                                                                                                              • Un navigateur web, pour y tester le code. Les navigateurs les plus utilisés sont Firefox, Chrome, Opera, Safari, Internet Explorer et  Microsoft Edge . Vous devez également tester le fonctionnement de votre site sur les appareils mobiles, et sur tous les anciens navigateurs que votre public cible utilise encore beaucoup (comme IE 8-10).
                                                                                                                • 
  
                                                                                                              • Un éditeur graphique, comme GIMP, Paint.NET, Krita ou Photoshop pour réaliser les images de vos pages web.
                                                                                                                • 
  
                                                                                                              • Un système de contrôle de versions, pour gérer les fichiers sur le serveur, collaborer sur les projets avec une équipe, partager le code et les ressources et éviter les conflits d'édition. À ce jour, Git est l'outil lde contrôle de version le plus connu et le service d'hébergement de code GitHub, fondé sur Git, est également très populaire.
                                                                                                                • 
- 
                                                                                                              • Un programme FTP, utilisé sur les anciens comptes d'hébergement Web pour gérer les fichiers sur les serveurs  (Git remplace de plus en plus le FTP à cette fin). Il existe une grande quantité de programmes de ce genre comme Cyberduck, Fetch et FileZilla.
                                                                                                                • 
+ 
                                                                                                              • Un programme FTP, utilisé sur les anciens comptes d'hébergement Web pour gérer les fichiers sur les serveurs  (Git remplace de plus en plus le FTP à cette fin). Il existe une grande quantité de programmes de ce genre comme Cyberduck, Fetch et FileZilla.
                                                                                                                • 
  
                                                                                                              • Un système d'automatisation, comme Grunt ou Gulp, pour automatiser les tâches répétitives, comme minimiser le code, ou lancer des tests.
                                                                                                                • 
  
                                                                                                              • Des modèles, bibliothèques, frameworks, etc. pour accélérer le développement de fonctionnalités courantes.
                                                                                                                • 
  
                                                                                                              • Et encore plus d'outils !
                                                                                                                • 
@@ -41,7 +39,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Installation_outils_de_base
 
 
                                                                                                                Vous avez probablement un éditeur de texte basique sur votre ordinateur. Par défaut Windows propose Notepad et macOS, TextEdit. Pour les distributions Linux cela varie. Ubuntu propose gedit par défaut.
                                                                                                                
 
-
                                                                                                                Pour le développement web, vous trouverez surement mieux que Notepad ou TextEdit. Nous vous recommandons de commencer avec Visual Studio Code,  qui est un éditeur libre offrant des aperçus en direct et des conseils de code. 
                                                                                                                
+
                                                                                                                Pour le développement web, vous trouverez surement mieux que Notepad ou TextEdit. Nous vous recommandons de commencer avec Visual Studio Code,  qui est un éditeur libre offrant des aperçus en direct et des conseils de code. 
                                                                                                                
 
 
                                                                                                                Installer un navigateur moderne
                                                                                                                
 
@@ -49,7 +47,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Installation_outils_de_base
 
 
 
@@ -66,12 +64,12 @@ original_slug: Apprendre/Commencer_avec_le_web/Installation_outils_de_base
 
                                                                                                                Dans ce module
                                                                                                                
 
 
diff --git a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.html b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.html
index 7041300eec..0b9cbe5215 100644
--- a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.html
+++ b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -13,9 +13,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_JavaScript
 
                                                                                                                {{LearnSidebar}}
                                                                                                                
 {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}
                                                                                                                
 
-
                                                                                                                
 
                                                                                                                JavaScript est un langage de programmation qui ajoute de l'interactivité à votre site web (par exemple : jeux, réponses quand on clique sur un bouton ou des données entrées dans des formulaires, composition dynamique, animations). Cet article vous aide à débuter dans ce langage passionnant et vous donne une idée de ses possibilités.
                                                                                                                
-
                                                                                                                
 
 
                                                                                                                Qu'est le JavaScript, réellement ?
                                                                                                                
 
@@ -31,7 +29,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_JavaScript
  
                                                                                                              • des modèles et bibliothèques tierces‑parties applicables à votre HTML permettant de mettre en œuvre rapidement des sites et des applications.
                                                                                                                • 
 
                                                                                                              
 
-
                                                                                                              Comme cet article est une introduction simplifiée à JavaScript, nous n'allons pas compliquer les choses à ce stade en entrant dans les détails sur les différences entre le coeur du langage JavaScript et les différents outils cités plus haut. Vous pourrez entrer dans ces détails plus tard grâce à notre centre d'apprentissage JavaScript, et le reste du MDN.
                                                                                                              
+
                                                                                                              Comme cet article est une introduction simplifiée à JavaScript, nous n'allons pas compliquer les choses à ce stade en entrant dans les détails sur les différences entre le coeur du langage JavaScript et les différents outils cités plus haut. Vous pourrez entrer dans ces détails plus tard grâce à notre centre d'apprentissage JavaScript, et le reste du MDN.
                                                                                                              
 
 
                                                                                                              Ci-dessous nous allons vous présenter quelques aspects du coeur du langage, et vous pratiquerez aussi en manipulant les fonctionnalités des API navigateur. Amusez-vous !
                                                                                                              
 
@@ -42,7 +40,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_JavaScript
 
                                                                                                              Cependant, être à l'aise avec JavaScript est plus dur que de l'être avec HTML ou CSS. Vous pourrez démarrer petit et continuer à travailler par petites étapes de façon soutenue. Pour commencer, nous allons vous montrer comment ajouter un JavaScript basique à votre page, en créant un exemple « Hello world ! » (la norme en matière d'exemples de programmation de base).
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Important : Si vous rejoignez cette série d'articles en cours de route, téléchargez cet exemple de code et utilisez‑le comme point de départ.
                                                                                                              
+
                                                                                                              Attention : Si vous rejoignez cette série d'articles en cours de route, téléchargez cet exemple de code et utilisez‑le comme point de départ.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                                
@@ -55,11 +53,11 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_JavaScript
   
                                                                                                                let myHeading = document.querySelector('h1');
 myHeading.textContent = 'Bonjour, monde !';
                                                                                                                
  
- 
                                                                                                              1. Assurez-vous que les fichiers HTML et JavaScript soient enregistrés puis chargez index.html dans votre navigateur. Vous devriez obtenir quelque chose comme :
                                                                                                                2. 
+ 
                                                                                                              2. Assurez-vous que les fichiers HTML et JavaScript soient enregistrés puis chargez index.html dans votre navigateur. Vous devriez obtenir quelque chose comme :
                                                                                                                3. 
 
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : La raison pour laquelle nous avons placé l'élément {{htmlelement("script")}} en bas du fichier HTML est que le HTML est chargé par le navigateur dans l'ordre dans lequel il apparaît dans le fichier. Si le JavaScript est chargé en premier et qu'il est supposé affecter le HTML en dessous, il pourrait ne pas fonctionner, car le JavaScript serait chargé avant le HTML sur lequel il est supposé travailler. Par conséquent, placer JavaScript près du bas de la page HTML est souvent la meilleure stratégie.
                                                                                                              
+
                                                                                                              Note : La raison pour laquelle nous avons placé l'élément {{htmlelement("script")}} en bas du fichier HTML est que le HTML est chargé par le navigateur dans l'ordre dans lequel il apparaît dans le fichier. Si le JavaScript est chargé en premier et qu'il est supposé affecter le HTML en dessous, il pourrait ne pas fonctionner, car le JavaScript serait chargé avant le HTML sur lequel il est supposé travailler. Par conséquent, placer JavaScript près du bas de la page HTML est souvent la meilleure stratégie.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Que s'est-il passé ?
                                                                                                              
@@ -69,7 +67,7 @@ myHeading.textContent = 'Bonjour, monde !';
                                                                                                            
 
                                                                                                            Ensuite, nous fixons à « Bonjour, monde ! » la valeur de la propriété {{domxref("Node.textContent", "textContent")}} de la variable myHeading (elle représente le contenu du titre).
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Les deux fonctions que vous avez utilisées ci-dessus font partie de l'API Document Object Model (DOM), qui vous permet de manipuler les documents.
                                                                                                            
+
                                                                                                            Note : Les deux fonctions que vous avez utilisées ci-dessus font partie de l'API Document Object Model (DOM), qui vous permet de manipuler les documents.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Les bases du JavaScript en accéléré
                                                                                                            
@@ -77,7 +75,7 @@ myHeading.textContent = 'Bonjour, monde !';
                                                                                                            
 
                                                                                                            Nous allons explorer les fonctionnalités de base de JavaScript pour que vous puissiez mieux comprendre comment il fonctionne. Ces fonctionnalités sont communes à la plupart des langages de programmation, si vous comprenez ces éléments en JavaScript, vous êtes en bonne voie de pouvoir programmer à peu près n'importe quoi !
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Important : Tout au long de cet article, vous pouvez saisir les lignes de code dans votre console JavaScript pour voir ce qui se passe. Pour plus de détails sur les consoles JavaScript, vous pouvez lire Découvrir les outils de développement présents dans le navigateur.
                                                                                                            
+
                                                                                                            Attention : Tout au long de cet article, vous pouvez saisir les lignes de code dans votre console JavaScript pour voir ce qui se passe. Pour plus de détails sur les consoles JavaScript, vous pouvez lire Découvrir les outils de développement présents dans le navigateur.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Variables
                                                                                                            
@@ -87,15 +85,15 @@ myHeading.textContent = 'Bonjour, monde !';
                                                                                                            
 
                                                                                                            let myVariable;
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Un point-virgule en fin de ligne indique là où se termine l'instruction ; ce n'est impérativement requis que si vous devez séparer des instructions sur une même ligne. Toutefois, certains pensent qu'il est de bonne pratique de les mettre à la fin de chaque instruction. Il y a d'autres règles à propos de leur emploi ou non‑emploi — voyez Guide des points‑virgule en JavaScript pour plus de détails.
                                                                                                            
+
                                                                                                            Note : Un point-virgule en fin de ligne indique là où se termine l'instruction ; ce n'est impérativement requis que si vous devez séparer des instructions sur une même ligne. Toutefois, certains pensent qu'il est de bonne pratique de les mettre à la fin de chaque instruction. Il y a d'autres règles à propos de leur emploi ou non‑emploi — voyez Guide des points‑virgule en JavaScript pour plus de détails.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Vous pouvez utiliser (quasiment) n'importe quel nom pour nommer une variable, mais il y a quelques restrictions (voyez cet article sur les règles de nommage des variables). Si vous avez un doute, vous pouvez vérifier le nom de votre variable pour voir s'il est valide.
                                                                                                            
+
                                                                                                            Note : Vous pouvez utiliser (quasiment) n'importe quel nom pour nommer une variable, mais il y a quelques restrictions (voyez cet article sur les règles de nommage des variables). Si vous avez un doute, vous pouvez vérifier le nom de votre variable pour voir s'il est valide.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : JavaScript est sensible à la casse — myVariable est une variable différente de myvariable. Si vous avez des problèmes dans votre code, vérifiez la casse  !
                                                                                                            
+
                                                                                                            Note : JavaScript est sensible à la casse — myVariable est une variable différente de myvariable. Si vous avez des problèmes dans votre code, vérifiez la casse  !
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Une fois une variable déclarée, vous pouvez lui donner une valeur :
                                                                                                            
@@ -169,7 +167,7 @@ Tout ce qui est écrit ici est entre commentaires.
 
 
                                                                                                            Si votre commentaire tient sur une ligne, vous pouvez utiliser deux barres obliques pour indiquer un commentaire :
                                                                                                            
 
-
                                                                                                            // Voici un commentaire
                                                                                                            
+
                                                                                                            // Voici un commentaire
                                                                                                            
 
 
                                                                                                            Opérateurs
                                                                                                            
 
@@ -237,7 +235,7 @@ Tout ce qui est écrit ici est entre commentaires.
 
                                                                                                            Il y a nombre d'autres opérateurs à explorer, mais nous nous en tiendrons à ceux-là pour le moment. Voir Expressions et opérateurs pour la liste complète.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Mélanger les types de données peut conduire à d'étranges résultats lors des opérations, donc prenez soin de vous référer correctement à vos variables et d'obtenir les résultats attendus. Par exemple, entrez "35" + "25" dans votre console. Pourquoi n'obtenez-vous pas le résultat attendu ? Parce que les guillemets ont transformé les nombres en chaînes, et donc vous avez concaténé deux chaînes au lieu d'additionner deux nombres. Si vous entrez 35 + 25, vous obtiendrez le bon résultat.
                                                                                                            
+
                                                                                                            Note : Mélanger les types de données peut conduire à d'étranges résultats lors des opérations, donc prenez soin de vous référer correctement à vos variables et d'obtenir les résultats attendus. Par exemple, entrez "35" + "25" dans votre console. Pourquoi n'obtenez-vous pas le résultat attendu ? Parce que les guillemets ont transformé les nombres en chaînes, et donc vous avez concaténé deux chaînes au lieu d'additionner deux nombres. Si vous entrez 35 + 25, vous obtiendrez le bon résultat.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Structures conditionnelles
                                                                                                            
@@ -251,7 +249,7 @@ if (iceCream === 'chocolat') {
   alert("Ooooh, mais j'aurais préféré au chocolat.");
 }
                                                                                                            
 
-
                                                                                                            L'expression contenue dans if ( ... ) correspond au test — Ici, on utilise l'opérateur d'égalité (décrit plus haut) pour comparer la variable iceCream avec la chaîne de caractères chocolat pour voir si elles sont égales. Si cette comparaison renvoie true, le premier bloc de code sera exécuté. Sinon, le premier bloc est sauté et  c'est le code du second bloc, celui présent après  else, qui est exécuté.
                                                                                                            
+
                                                                                                            L'expression contenue dans if ( ... ) correspond au test — Ici, on utilise l'opérateur d'égalité (décrit plus haut) pour comparer la variable iceCream avec la chaîne de caractères chocolat pour voir si elles sont égales. Si cette comparaison renvoie true, le premier bloc de code sera exécuté. Sinon, le premier bloc est sauté et  c'est le code du second bloc, celui présent après  else, qui est exécuté.
                                                                                                            
 
 
                                                                                                            Fonctions
                                                                                                            
 
@@ -286,7 +284,7 @@ multiply(20, 20);
 multiply(0.5, 3);
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : L'instruction return indique au navigateur qu'il faut renvoyer la variable result en dehors de la fonction afin qu'elle puisse être réutilisée par ailleurs. Cette instruction est nécessaire car les variables définies à l'intérieur des fonctions sont uniquement disponibles à l'intérieur de ces fonctions. C'est ce qu'on appelle une {{Glossary("Portée", "portée")}} (pour en savoir plus, lisez cet article).
                                                                                                            
+
                                                                                                            Note : L'instruction return indique au navigateur qu'il faut renvoyer la variable result en dehors de la fonction afin qu'elle puisse être réutilisée par ailleurs. Cette instruction est nécessaire car les variables définies à l'intérieur des fonctions sont uniquement disponibles à l'intérieur de ces fonctions. C'est ce qu'on appelle une {{Glossary("Portée", "portée")}} (pour en savoir plus, lisez cet article).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Événements
                                                                                                            
@@ -391,7 +389,7 @@ let myHeading = document.querySelector('h1');
                                                                                                            
 
 
                                                                                                            Si vous avez suivi les étapes détaillées sur cette page, vous devriez obtenir un résultat semblable à celui-ci (vous pouvez aussi voir la version que nous avons obtenue ici) :
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            
 
 
                                                                                                            Si vous êtes bloqué, n'hésitez pas à comparer votre travail et vos fichiers avec ceux disponibles sur GitHub qui correspondent à notre modèle finalisé.
                                                                                                            
 
@@ -402,12 +400,12 @@ let myHeading = document.querySelector('h1');
                                                                                                            
 
                                                                                                            Dans ce module
                                                                                                            
 
 
diff --git a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html
index aa1dffd2e5..49b297e686 100644
--- a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html
+++ b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html
@@ -18,7 +18,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Publier_votre_site_web
 
 
                                                                                                            {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}
                                                                                                            
 
-
                                                                                                            Une fois que vous avez fini d'écrire le code et d'organiser les fichiers qui composent votre site, vous devez mettre le site en ligne, ainsi d'autres personnes pourront le trouver. Cet article décrit comment mettre votre extrait de code en ligne avec peu d'efforts.
                                                                                                            
+
                                                                                                            Une fois que vous avez fini d'écrire le code et d'organiser les fichiers qui composent votre site, vous devez mettre le site en ligne, ainsi d'autres personnes pourront le trouver. Cet article décrit comment mettre votre extrait de code en ligne avec peu d'efforts.
                                                                                                            
 
 
                                                                                                            Quelles sont les options ?
                                                                                                            
 
@@ -37,7 +37,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Publier_votre_site_web
 
 
                                                                                                            En plus, vous aurez besoin d'un programme de {{Glossary("FTP", "Protocole de transfert de fichiers (FTP)")}} (voir Combien ça coûte : les logiciels pour plus de détails) pour faire un transfert réel des fichiers du site web sur le serveur. Les programmes FTP varient beaucoup, mais généralement, vous devrez vous connecter sur le serveur web en utilisant des identifiants fournis par votre société d'hébergement (par ex., nom d'utilisateur, mot de passe, nom d'hôte). Le logiciel utilisé pour FTP affiche alors vos fichiers locaux et les fichiers présents sur le serveur dans deux fenêtres, ainsi vous pouvez les transférer dans les deux sens :
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            
 
 
                                                                                                            Suggestions pour trouver hébergement et domaines
                                                                                                            
 
@@ -72,7 +72,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Publier_votre_site_web
   
                                                                                                          • CodePen
                                                                                                            • 
 
 
-
                                                                                                            
+
                                                                                                            
 
 
                                                                                                            Publier via GitHub
                                                                                                            
 
@@ -82,7 +82,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Publier_votre_site_web
   
                                                                                                          • Pour commencer, inscrivez-vous sur GitHub et vérifiez votre adresse e-mail.
                                                                                                            • 
   
                                                                                                          • Ensuite, créez un dépôt dans lequel vous placerez vos fichiers.
                                                                                                            • 
   
                                                                                                          • Sur cette page, dans le champ Repository name, entrez username.github.io : username est votre nom d'utilisateur. Ainsi, par exemple, notre ami bobsmith entrera bobsmith.github.io.
                                                                                                            
-  Également, cochez Initialize this repository with a README, puis cliquez sur Create repository.
                                                                                                            • 
+  Également, cochez Initialize this repository with a README, puis cliquez sur Create repository.
   
                                                                                                          • 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.
                                                                                                            
@@ -112,12 +112,12 @@ original_slug: Apprendre/Commencer_avec_le_web/Publier_votre_site_web
 
                                                                                                            Dans ce module
                                                                                                            
 
 
diff --git a/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
index e37f991a39..c06de51317 100644
--- a/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
+++ b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
@@ -74,7 +74,7 @@ original_slug: Apprendre/Commencer_avec_le_web/The_web_and_web_standards
 
 
                                                                                                            Hypertext Transfer Protocol, ou HTTP, est un protocole de communication permettant aux navigateurs web de communiquer avec des serveurs web (qui hébergent les sites web). Une conversation type ressemble à quelque chose comme
                                                                                                            
 
-
                                                                                                            "Bonjour Serveur Web. Peux-tu me fournir les fichiers requis pour afficher bbc.co.uk"?
+
                                                                                                            "Bonjour Serveur Web. Peux-tu me fournir les fichiers requis pour afficher bbc.co.uk"?
 
 "Bien sûr Navigateur Web - Les voilà"
 
diff --git a/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
index 3312388810..06c8f03c49 100644
--- a/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
+++ b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
@@ -14,9 +14,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site
 
                                                                                                            {{LearnSidebar}}
                                                                                                            
 {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Installation_outils_de_base","Apprendre/Commencer_avec_le_web/Gérer_les_fichiers","Apprendre/Commencer_avec_le_web")}}
                                                                                                            
 
-
                                                                                                            
 
                                                                                                            Quel sera l'aspect de votre site web ? parle de planifier et concevoir (design), travaux à faire avant d'écrire du code. Voici les questions que cela comprend : « Quelles informations mon site web offrira-t-il ? », « Quelles polices de caractères et quelles couleurs souhaité-je ? » et « Que fait mon site web ? ».
                                                                                                            
-
                                                                                                            
 
 
                                                                                                            Commençons par le commencement : planification
                                                                                                            
 
@@ -25,23 +23,23 @@ original_slug: Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site
 
                                                                                                            Pour commencer, posez-vous ces questions :
                                                                                                            
 
 
                                                                                                              
- 
                                                                                                            1. De quoi va parler mon site web ? Aimez-vous les chiens, New York ou Pacman ?
                                                                                                              2. 
+ 
                                                                                                            2. De quoi va parler mon site web ? Aimez-vous les chiens, New York ou Pacman ?
                                                                                                              3. 
  
                                                                                                            3. 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.
                                                                                                              4. 
  
                                                                                                            4. 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 ?
                                                                                                              5. 
 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            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.
                                                                                                            
+
                                                                                                            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.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            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 !
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            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,13 +54,13 @@ original_slug: Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site
 
 
                                                                                                            Couleur du thème
                                                                                                            
 
-
                                                                                                            Pour choisir une couleur, utilisez une palette de couleurs et trouvez une couleur que vous aimez. Quand vous cliquez sur une couleur, vous verrez un étrange code à six caractères comme #660066. Ceci est appelé un code hexadécimal et il représente votre couleur. Copiez le code dans un endroit sûr pour l'instant.
                                                                                                            
+
                                                                                                            Pour choisir une couleur, utilisez une palette de couleurs et trouvez une couleur que vous aimez. Quand vous cliquez sur une couleur, vous verrez un étrange code à six caractères comme #660066. Ceci est appelé un code hexadécimal et il représente votre couleur. Copiez le code dans un endroit sûr pour l'instant.
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            
 
 
                                                                                                            Images
                                                                                                            
 
-
                                                                                                            Pour choisir une image, allez sur Google Images et cherchez une image qui convient.
                                                                                                            
+
                                                                                                            Pour choisir une image, allez sur Google Images et cherchez une image qui convient.
                                                                                                            
 
 
                                                                                                              
  
                                                                                                            1. Quand vous avez trouvé l'image que vous voulez, cliquez sur l'image.
                                                                                                              2. 
@@ -70,14 +68,14 @@ original_slug: Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site
  
                                                                                                            2. Sur la page suivante, faites un clic-droit sur l'image (Ctrl + clic sur Mac), choisissez Enregistrer l'image sous… et choisissez un endroit sûr pour enregistrer l'image. Ou bien, copiez l'adresse web de l'image depuis la barre d'adresse de votre navigateur pour une utilisation ultérieure.
                                                                                                              3. 
 
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            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 :
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Police de caractères
                                                                                                            
@@ -91,21 +89,21 @@ original_slug: Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site
  
                                                                                                          • Sur la fenêtre contextuelle suivante, vous pouvez copier les lignes de code que Google vous donne dans votre éditeur de texte pour les garder pour plus tard.
                                                                                                            • 
 
 
-
                                                                                                            
+
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            
 
 
                                                                                                            {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Installation_outils_de_base", "Apprendre/Commencer_avec_le_web/Gérer_les_fichiers","Apprendre/Commencer_avec_le_web")}}
                                                                                                            
 
 
                                                                                                            Dans ce module
                                                                                                            
 
 
diff --git a/files/fr/learn/html/cheatsheet/index.html b/files/fr/learn/html/cheatsheet/index.html
index a3839113a3..f9fcdc2434 100644
--- a/files/fr/learn/html/cheatsheet/index.html
+++ b/files/fr/learn/html/cheatsheet/index.html
@@ -14,174 +14,271 @@ original_slug: Apprendre/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 ainsi que différents tutoriels HTML détaillés. 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.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Rappel : 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.
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            Mise en forme inline
                                                                                                            
+
                                                                                                            Éléments en ligne
                                                                                                            
 
-
                                                                                                            Un élément dit « en ligne » ou inline prend autant d'espace que nécessaire. Ces éléments sont disposés horizontalement les uns à la suite des autres, à la façon des mots dans une phrase ou des livres dans une bibliothèque.
                                                                                                            
+
                                                                                                            Un élément est une partie d'une page web. Certains éléments sont agissent comme des conteneurs : ils sont grands et contiennent de plus petits éléments. Certains éléments sont plus petits et sont imbriqués dans des éléments plus grands. Par défaut les éléments « en ligne » apparaissent les uns à côté des autres sur une page web. Ils prennent autant de largeur que nécessaire sur une page et s'organisent horizontalement à la façon des mots dans une phrase ou des livres dans une bibliothèque. Tous les éléments en ligne peuvent être placés à l'intérieur de l'élément <body>.
                                                                                                            
 
-
                                                                                                            • 
  
   
                                                                                                            
    Prérequis :
 
 
                                                                                                            
+
                                                                                                            
-   
-   
-   
+   
+   
+   
-   
-   
-   
+   
+   
+   
-   
-   
-   
+   
+   
+   
-   
-   
-   
+   
+   
+   
-   
-   
-   
+   
+   
+   
-   
-   
-   
+   
+   
+   
-   
-   
-   
+   
+   
+   
-   
-   
-   
+   
+   
+   
-   
-   
-   
+   
+   
+   
-   
-   
-   
+   
+   
+   
-   
-   
-   
+   
+   
+   
+  
+ 
+   
+   
+   
+  
+ 
+   
+   
+   
+  
+ 
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
-   
-   
+   
+   
-   
-   
-   
+   
+   
+   
-   
-   
-   
+   
+   
+   
-   
-   
-   
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
                                                                                                            
  
   
                                                                                                            UtilisationFragment de codeRésultatUsageÉlémentExemple
   
                                                                                                            
                                                                                                              
  
   
                                                                                                            Un lien simple<a href="https://developer.mozilla.org">Un lien vers MDN</a>Un lien vers MDNUn lien{{HTMLElement("a")}}
                                                                                                            <a href="https://example.org">
+Un lien vers example.org</a>.
                                                                                                            
+   {{EmbedLiveSample("a-example", 100, 60)}}                                                                                                            		
   
                                                                                                            
   
                                                                                                            Une image simple<img src="https://developer.mozilla.org/media/img/mdn-logo-sm.png" />Une image{{HTMLElement("img")}}
                                                                                                            <img src="beast.png" width="25" />
                                                                                                            
+   {{EmbedLiveSample("img-example", 100, 60)}}                                                                                                            		
   
                                                                                                            
   
                                                                                                            Un texte avec emphase<em>Je suis distingué</em>Je suis distinguéUn conteneur en ligne{{HTMLElement("span")}}
                                                                                                            Utilisé pour grouper des éléments, par exemple pour <span style="color:blue">les mettre en forme</span>.
                                                                                                            
+  {{EmbedLiveSample("span-example", 100, 60)}}                                                                                                            		
   
                                                                                                            
   
                                                                                                            Un texte marqué comme important<strong>Je suis important</strong>Je suis importantEmphase du texte{{HTMLElement("em")}}
                                                                                                            <em>La classe non ?</em>.
                                                                                                            
+   {{EmbedLiveSample("em-example", 100, 60)}}                                                                                                            		
   
                                                                                                            
   
                                                                                                            Un texte mis en avant<mark>Remarquez-moi</mark>Remarquez-moiTexte idiomatique{{HTMLElement("i")}}
                                                                                                            +Marque la phrase <i>généralement en italique</i>.
                                                                                                            
+  {{EmbedLiveSample("i-example", 100, 60)}}                                                                                                            		
   
                                                                                                            
   
                                                                                                            Barrer du texte qui n'est plus pertinent<s>Je ne suis plus d'actualité ou plus pertinent</s>Je ne suis plus d'actualité ou plus pertinentTexte d'attention{{HTMLElement("b")}}
                                                                                                            +Met en avant un <b>mot ou une phrase d'une certaine importance</b>.
                                                                                                            
+  {{EmbedLiveSample("b-example", 100, 60)}}                                                                                                            		
   
                                                                                                            
   
                                                                                                            Souligner pour ajouter une annotation non-textuelleCeci est <u>mal orthographié</u>Ceci est mal orthographiéTexte d'importance{{HTMLElement("strong")}}
                                                                                                            <strong>Ce contenu est important !</strong>
                                                                                                            
+   {{EmbedLiveSample("strong-example", 100, 60)}}                                                                                                            		
   
                                                                                                            
   
                                                                                                            Du texte qui doit être affiché en indiceH<sub>2</sub>OH2OMarquer du texte{{HTMLElement("mark")}}
                                                                                                            <mark>Vous me voyez ?</mark>
                                                                                                            
+   {{EmbedLiveSample("mark-example", 100, 60)}}                                                                                                            		
   
                                                                                                            
   
                                                                                                            Du texte qui doit être affiché en exposantM<sup>me</sup> de BovaryMme de BovaryTexte barré{{HTMLElement("s")}}
                                                                                                            <s>Je ne suis plus pertinent.</s>
                                                                                                            
+   {{EmbedLiveSample("s-example", 100, 60)}}                                                                                                            		
   
                                                                                                            
   
                                                                                                            Une citation dans le cours du texteIl a dit : <q>Je suis ton père.</q>Il a dit : Je suis ton père.Mise en indice{{HTMLElement("sub")}}
                                                                                                            H<sub>2</sub>O
                                                                                                            
+   {{EmbedLiveSample("sub-example", 100, 60)}}
                                                                                                            Texte de commentaire{{HTMLElement("small")}}
                                                                                                            +Utilisé pour représenter <small>les petites
+notes </small> d'un document.
                                                                                                            
+{{EmbedLiveSample("small-example", 100, 60)}}
                                                                                                            Adresse{{HTMLElement("address")}}
                                                                                                            <address>15 Rue du Bourg</address>
                                                                                                            
+{{EmbedLiveSample("address-example", 100, 60)}}
                                                                                                            Citation textuelle{{HTMLElement("cite")}}
                                                                                                            Pour plus d'informations sur les monstres,
+voir <cite>Le monstrueux livre des monstres</cite>.
                                                                                                            
+   {{EmbedLiveSample("cite-example", 100, 60)}}
                                                                                                            Mise en exposant{{HTMLElement("sup")}}
                                                                                                            x<sup>2</sup>
                                                                                                            
+   {{EmbedLiveSample("sup-example", 100, 60)}}
                                                                                                            Citation en ligne{{HTMLElement("q")}}
                                                                                                            +<q>Toi aussi mon fils ?</q>, a-t-il dit.
                                                                                                            
+{{EmbedLiveSample("q-example", 100, 60)}}                                                                                                            		
   
                                                                                                            
   
                                                                                                            
    Un saut de ligneLigne 1 <br/> Ligne 2Ligne 1
                                                                                                            
-    Ligne 2                                                                                                            		{{HTMLElement("br")}}
                                                                                                            Ligne 1<br>Ligne 2
                                                                                                            
+{{EmbedLiveSample("br-example", 100, 80)}}                                                                                                            		
   
                                                                                                            
   
                                                                                                            Du code informatique (code « machine »)<code>System.print.File("coucou")</code>System.print.File("coucou")Un saut de ligne possible{{HTMLElement("wbr")}}
                                                                                                            +<div style="width: 200px">
+  Llanfair<wbr>pwllgwyngyllgogerychwyrngogogoch.
+</div>
                                                                                                            
+{{EmbedLiveSample("wbr-example", 100, 80)}}                                                                                                            		
   
                                                                                                            
   
                                                                                                            Un fichier audio intégré<audio controls src="https://mdn.mozillademos.org/files/2587/AudioTest%20%281%29.mp3">L'élément <code>audio</code> n'est pas supporté.</audio>
-    
-   Date{{HTMLElement("time")}}
                                                                                                            +Utilisé pour mettre en forme la date. Par exemple :
+<time datetime="2020-05-24" pubdate>
+Publié le 24 mai 2020</time>.
                                                                                                            
+{{EmbedLiveSample("time-example", 100, 60)}}                                                                                                            		
   
                                                                                                            
   
                                                                                                            Un fichier vidéo intégré<video controls src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4">L'élément <code>video</code> n'est pas supporté.</video>
-    
-   Code{{HTMLElement("code")}}
                                                                                                            +Ce texte est au format normal,
+mais <code>celui-ci représente du code</code>.
                                                                                                            
+{{EmbedLiveSample("code-example", 100, 60)}}
                                                                                                            Audio{{HTMLElement("audio")}}
                                                                                                            +<audio controls="controls">
+  <source="t-rex-roar.mp3" type="audio/mpeg">
+  Votre navigateur ne prend pas en charge audio.
+</audio>
                                                                                                            
+{{EmbedLiveSample("audio-example", 100, 80)}}
                                                                                                            Video{{HTMLElement("video")}}
                                                                                                            +<video controls  width="250"
+  src="https://archive.org/download/ElephantsDream/ed_hd.ogv" >
+  L'élément <code>video</code> n'est pas pris en charge.
+</video>
                                                                                                            
+{{EmbedLiveSample("video-example", 100, 200)}}                                                                                                            		
   
                                                                                                            
                                                                                                              
 
                                                                                                            
 
-
                                                                                                            Mise en forme block
                                                                                                            
+
                                                                                                            Éléments de bloc
                                                                                                            
 
-
                                                                                                            Les éléments de bloc (block en anglais) s'organisent différemment. Ils prennent toute la largeur de la page. Étant donné qu'ils prennent toute cette largeur, on ne peut donc pas les disposer côté à côte horizontalement. Leur organisation sera plutôt celle de paragraphes dans une dissertation ou celle d'étages dans un immeuble.
                                                                                                            
+
                                                                                                            Les éléments de bloc, en revanche, occupent toutes la largeur de la page. Ils occupent une ligne entière et ne sont pas apposés les uns à côtés des autres. Ils s'empilent plutôt à l'instar des paragraphes dans un texte.
                                                                                                            
 
-
+
                                                                                                            
-   
-   
-   
+   
+   
+   
-   
-   
-   
+   
+   
-   
-   
-   
+   
+   
+   
-   
-   
-   
+   
+   
+   
-   
-   
-   
+   
+   
+   
-   
-   
-   
+   
+   
+  
+  
+   
+   
+   
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
-
                                                                                                            
  
   
                                                                                                            UtilisationFragment de codeRésultatUsageÉlémentExemple
   
                                                                                                            
                                                                                                              
  
   
                                                                                                            Un paragraphe simple
-    
                                                                                                            <p>Je suis un paragraphe</p>
                                                                                                            
-     <p>Je suis un autre paragraphe</p> 
                                                                                                            
-                                                                                                               		
-    
                                                                                                            Je suis un paragraphe
                                                                                                            
-
-    
                                                                                                            Je suis un autre paragraphe
                                                                                                            
+                                                                                                               		Un paragraphe{{HTMLElement("p")}}
                                                                                                            +<p>Je suis un paragraphe</p>
+<p>Et un autre paragraph</p>
                                                                                                            
+{{EmbedLiveSample("p-example", 100, 150)}}
                                                                                                                		
   
                                                                                                            
   
                                                                                                            Une liste non-ordonnée<ul>
                                                                                                            
-      <li>Je suis un élément</li>
                                                                                                            
-      <li>Je suis un autre élément</li>
                                                                                                            
-    <ul>                                                                                                            		
-    
                                                                                                              
-     
                                                                                                            • Je suis un élément
                                                                                                              • 
-     
                                                                                                            • Je suis un autre élément
                                                                                                              • 
-    
                                                                                                            
-                                                                                                               		Une citation étendue{{HTMLElement("blockquote")}}
                                                                                                            Ils sont alors dit :
+<blockquote>L'élément blockquote indique une citation étendue.</blockquote>
                                                                                                            
+{{EmbedLiveSample("blockquote-example", 100, 100)}}
+                                                                                                              		
   
                                                                                                            
   
                                                                                                            Une liste ordonnée<ol>
                                                                                                            
-      <li>Je suis le premier élément</li>
                                                                                                            
-      <li>Je suis le deuxième élément</li>
                                                                                                            
-    <ol>                                                                                                            		
-    
                                                                                                              
-     
                                                                                                            1. Je suis le premier élément
                                                                                                              2. 
-     
                                                                                                            2. Je suis le deuxième élément
                                                                                                              3. 
-    
                                                                                                            
-                                                                                                               		Information supplémentaire{{HTMLElement("details")}}
                                                                                                            +<details>
+  <summary>Anti-sèche HTML</summary>
+  <p>Éléments en ligne</p>
+  <p>Éléments de bloc</p>
+</details>
                                                                                                            
+{{EmbedLiveSample("details-example", 100, 150)}}
+                                                                                                              		
   
                                                                                                            
   
                                                                                                            Une ligne horizontale<hr/>
-    
                                                                                                            		Une liste non-ordonnée{{HTMLElement("ul")}}
                                                                                                            +<ul>
                                                                                                            
+  <li>Je suis un élément de liste</li>
                                                                                                            
+  <li>Et moi un autre</li>
                                                                                                            
+</ul>
                                                                                                            
+{{EmbedLiveSample("ul-example", 100, 100)}}
+                                                                                                              		
   
                                                                                                            
   
                                                                                                            Des titres de différents niveaux (du plus important au moins important)
-    
                                                                                                            <h2>Un titre de niveau 2</h2>
                                                                                                            
-     <h3>Un titre de niveau 3</h3>
                                                                                                            
-     <h4>Un titre de niveau 4</h4>
                                                                                                            
-     <h5>Un titre de niveau 5</h5>
                                                                                                            
-                                                                                                               		
-    
                                                                                                            Un titre de niveau 2
                                                                                                            
-
-    
                                                                                                            Un titre de niveau 3
                                                                                                            
-
-    
                                                                                                            Un titre de niveau 4
                                                                                                            
-
-    
                                                                                                            Un titre de niveau 5
                                                                                                            
+                                                                                                               		Une liste ordonnée{{HTMLElement("ol")}}
                                                                                                            +<ol>
                                                                                                            
+  <li>Je suis le premier élément</li>
                                                                                                            
+  <li>Et moi le deuxième</li>
                                                                                                            
+</ol>
                                                                                                            
+{{EmbedLiveSample("ol-example", 100, 100)}}
+  
                                                                                                            Une liste de définitions{{HTMLElement("dl")}}
                                                                                                            +<dl>
+  <dt>Un terme</dt>
                                                                                                            
+  <dd>La définition du terme</dd>
+  <dt>Un autre terme</dt>
+  <dd>La définition d'un autre terme</dd>
+</dl>
                                                                                                            
+{{EmbedLiveSample("dl-example", 100, 150)}}
                                                                                                                		
   
                                                                                                            Un séparateur horizontal{{HTMLElement("hr")}}
                                                                                                            +avant<hr>après
                                                                                                            
+{{EmbedLiveSample("hr-example", 100, 100)}}
+  
                                                                                                            Un titre{{HTMLElement("Heading_Elements", "<h1>-<h6>")}}
                                                                                                            +<h1> Titre de niveau 1 </h1>
+<h2> Titre de niveau 2 </h2>
+<h3> Titre de niveau 3 </h3>
+<h4> Titre de niveau 4 </h4>
+<h5> Titre de niveau 5 </h5>
+<h6> Titre de niveau 6 </h6>
                                                                                                            
+{{EmbedLiveSample("h1-h6-example", 100, 350)}}
+  
                                                                                                            
  
                                                                                                            
+
\ No newline at end of file
diff --git a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html
index 5d6e826597..2bd7ccebb6 100644
--- a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html
+++ b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html
@@ -9,11 +9,9 @@ tags:
 translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image
 original_slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image
 ---
-
                                                                                                            
 
                                                                                                            Dans cet article, nous verrons comment construire une carte imagée cliquable en commençant par les inconvénients de cette méthode.
                                                                                                            
-
                                                                                                            
 
-
+
                                                                                                            
@@ -27,7 +25,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image
 
                                                                                                            
  
   
                                                                                                            
    Prérequis :
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            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.
                                                                                                            
+
                                                                                                            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.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Les cartes imagées cliquables et leurs inconvénients
                                                                                                            
diff --git a/files/fr/learn/html/howto/define_terms_with_html/index.html b/files/fr/learn/html/howto/define_terms_with_html/index.html
index ba6015387c..c4a834b1a4 100644
--- a/files/fr/learn/html/howto/define_terms_with_html/index.html
+++ b/files/fr/learn/html/howto/define_terms_with_html/index.html
@@ -9,15 +9,13 @@ tags:
 translation_of: Learn/HTML/Howto/Define_terms_with_HTML
 original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML
 ---
-
                                                                                                            
 
                                                                                                            HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on emploie (que ce soit intégré dans le texte ou dans un glossaire à part). Dans cet article, nous verrons comment correctement définir les termes utilisés au sein d'un document.
                                                                                                            
-
                                                                                                            
 
-
+
                                                                                                            
-   
+   
@@ -33,8 +31,6 @@ original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML
  
                                                                                                            Bleu (adjectif)
                                                                                                            La couleur du ciel lors d'un temps clair.
                                                                                                            
  Le ciel est bleu.
                                                                                                            
- 
                                                                                                            Se dit d'une viande lorsqu'elle est saisie rapidement, au grill, de chaque côté.
                                                                                                            
- Un steak bleu s'il vous plaît.
                                                                                                            
 
@@ -69,7 +65,7 @@ original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML
 </p>
                                                                                                            
-
                                                                                                            La spécification HTML met en avant l'attribut title 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.
                                                                                                            
+
                                                                                                            Note : La spécification HTML met en avant l'attribut title 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.
                                                                                                            
 
                                                                                                            Améliorer l'accessibilité
                                                                                                            
@@ -91,7 +87,7 @@ original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML
 
                                                                                                            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.).
                                                                                                            
-
                                                                                                            Les listes de descriptions ne doivent pas être utilisées pour retranscrire des dialogues. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici quelques recommandations pour retranscrire un dialogue dans un document web.
                                                                                                            
+
                                                                                                            Note : Les listes de descriptions ne doivent pas être utilisées pour retranscrire des dialogues. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici quelques recommandations pour retranscrire un dialogue dans un document web.
                                                                                                            
 
                                                                                                            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")}}.
                                                                                                            
@@ -123,7 +119,7 @@ original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML
 
                                                                                                            
-
                                                                                                            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
                                                                                                            
diff --git a/files/fr/learn/html/howto/index.html b/files/fr/learn/html/howto/index.html
index 62b8556ca8..e5f130e8ca 100644
--- a/files/fr/learn/html/howto/index.html
+++ b/files/fr/learn/html/howto/index.html
@@ -13,16 +13,14 @@ original_slug: Apprendre/HTML/Comment
 
 
                                                                                                            HTML permet de résoudre de nombreux problèmes qui se posent lors de la conception de sites web. Il est très probable que vous rencontriez au moins l'un de ces scénarios :
                                                                                                            
 
-
                                                                                                            
-
                                                                                                            
 
                                                                                                            Structure de base
                                                                                                            
 
 
                                                                                                            En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec :
                                                                                                            
 
 
 
 
                                                                                                            Sémantique de base pour le texte
                                                                                                            
@@ -30,35 +28,32 @@ original_slug: Apprendre/HTML/Comment
 
                                                                                                            Le but de HTML est de fournir des informations sémantiques (c'est-à-dire sur le sens) d'un document et de ce qui le compose. HTML permettra donc de répondre à de nombreuses questions sur le sens du texte qu'on veut utiliser dans un document.
                                                                                                            
 
 
-
                                                                                                            
-
-
                                                                                                            
 
                                                                                                            Les hyperliens
                                                                                                            
 
 
                                                                                                            Les {{Glossary("hyperlien", "hyperliens")}} rendent la navigation très simple sur le web, ils peuvent être utilisés de différentes façons :
                                                                                                            
 
 
 
 
                                                                                                            Images et multimédia
                                                                                                            
 
 
 
 
                                                                                                            Script et mise en forme
                                                                                                            
@@ -66,25 +61,21 @@ original_slug: Apprendre/HTML/Comment
 
                                                                                                            HTML ne permet que de gérer la structure et le contenu d'un document. Pour régler les aspects de styles, on utilisera du {{glossary("CSS")}}, pour l'aspect interactif et script, on utilisera {{glossary("JavaScript")}}.
                                                                                                            
 
 
 
 
                                                                                                            Intégrer du contenu
                                                                                                            
 
 
-
                                                                                                            
-
                                                                                                            Problèmes avancés ou rares
                                                                                                            Au-delà des briques de bases qu'on peut assembler dans les exemples précédents, HTML reste très riche et offre des fonctionnalités avancées qui permettent de résoudre de nombreux problèmes complexes. Ces articles décrivent certains de ces problèmes, moins fréquents, et expliquent comment les résoudre :
                                                                                                            
 
-
                                                                                                            
-
                                                                                                            
 
                                                                                                            Les formulaires
                                                                                                            
 
 
                                                                                                            Les formulaires correspondent à une structure HTML complexe qui permet d'envoyer des données d'une page web vers un serveur web. Nous vous invitons à suivre le guide dédié aux formulaires. Vous pouvez commencer ici :
                                                                                                            
@@ -99,42 +90,40 @@ original_slug: Apprendre/HTML/Comment
 
                                                                                                            Certaines informations doivent être organisées en tableaux, sur des colonnes et des lignes. Les tableaux sont une des structures HTML les plus complexes et s'avèrent particulièrement difficiles à maîtriser de A à Z :
                                                                                                            
 
 
 
 
                                                                                                            La représentation de données
                                                                                                            
 
 
 
 
                                                                                                            Interactivité
                                                                                                            
 
 
-
                                                                                                            
 
-
                                                                                                            
 
                                                                                                            Sémantique avancée pour les éléments textuels
                                                                                                            
 
 
 
 
                                                                                                            Images et multimédia avancés
                                                                                                            
 
 
 
 
                                                                                                            L'internationalisation
                                                                                                            
@@ -142,9 +131,7 @@ original_slug: Apprendre/HTML/Comment
 
                                                                                                            HTML n'est pas monolingue. Il existe des outils qui permettent de résoudre les problèmes fréquents qui se posent lorsqu'on internationalise du contenu.
                                                                                                            
 
 
-
                                                                                                            
-
                                                                                                            
+ 
                                                                                                          • Comment ajouter plusieurs langages sur une seule page web
                                                                                                            • 
+ 
                                                                                                          • Comment gérer les caractères japonais (ruby)
                                                                                                            • 
+ 
                                                                                                          • Comment afficher des heures et des dates avec HTML
                                                                                                            • 
+
\ No newline at end of file
diff --git a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html
index c920171729..e57980829e 100644
--- a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html
+++ b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html
@@ -9,11 +9,9 @@ tags:
 translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage
 original_slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web
 ---
-
                                                                                                            
 
                                                                                                            Dans cet article, nous verrons comment améliorer les pages web en ajoutant du code JavaScript dans des documents HTML.
                                                                                                            
-
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis :Vous devez au préalable savoir comment créer un document HTML simple.Vous devez au préalable savoir comment créer un document HTML simple.
   
                                                                                                            
   
                                                                                                            
    Objectifs :
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                            
+
                                                                                                            
@@ -31,7 +29,7 @@ original_slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web
 
                                                                                                            {{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.
                                                                                                            
-
                                                                                                            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. Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter le Guide JavaScript.
                                                                                                            
+
                                                                                                            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. Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter le Guide JavaScript.
                                                                                                            
 
                                                                                                            Comment déclencher le code JavaScript depuis le document HTML
                                                                                                            
@@ -67,7 +65,7 @@ window.addEventListener('load', function () {
 
                                                                                                            L'accessibilité est un enjeu majeur du développement logiciel. JavaScript peut rendre un site web plus accessible lorsqu'il est utilisé correctement. Il peut aussi détruire toute trace d'accessibilité s'il est utilisé sans aucune considération. Voici quelques pratiques qui vous permettront de tirer le meilleur parti de JavaScript pour l'accessibilité :
                                                                                                              
- 
                                                                                                            • Tout le contenu d'un document doit être disponible sous forme de texte (structuré). HTML doit être utilisé le plus possible pour stocker le contenu. Par exemple, si vous avez implémenté une super barre de chargement, n'oubliez pas de fournir les pourcentages en texte dans le HTML. De la même façon, les menus déroulants doivent être structurées en listes non ordonnées de liens.
                                                                                                              • 
+ 
                                                                                                            • Tout le contenu d'un document doit être disponible sous forme de texte (structuré). HTML doit être utilisé le plus possible pour stocker le contenu. Par exemple, si vous avez implémenté une super barre de chargement, n'oubliez pas de fournir les pourcentages en texte dans le HTML. De la même façon, les menus déroulants doivent être structurées en listes non ordonnées de liens.
                                                                                                              • 
  
                                                                                                            • Toutes les fonctionnalités doivent être accessibles depuis le clavier.
   
                                                                                                                
    
                                                                                                              • Les utilisateurs doivent pouvoir utiliser la touche de tabulation pour naviguer entre les différents contrôles (les liens, les entrées de formulaires, etc.) en suivant un ordre logique.
                                                                                                                • 
diff --git a/files/fr/learn/html/index.html b/files/fr/learn/html/index.html
index 3e7ba5b847..95e31501ca 100644
--- a/files/fr/learn/html/index.html
+++ b/files/fr/learn/html/index.html
@@ -41,27 +41,21 @@ original_slug: Apprendre/HTML
 
                                                                                                                
  
                                                                                                                Introduction au HTML
                                                                                                                
  
                                                                                                                Ce module prépare le terrain, en vous familiarisant avec les concepts importants et la syntaxe, en examinant comment appliquer le HTML au texte, comment créer des hyperliens et comment utiliser le HTML pour structurer une page Web.
                                                                                                                
- 
                                                                                                                Multimedia et intégration
                                                                                                                
+ 
                                                                                                                Multimedia et intégration
                                                                                                                
  
                                                                                                                Ce module explore comment utiliser le HTML pour incorporer du multimédia dans vos pages Web, y compris les diverses façons d'inclure des images, et comment intégrer de la vidéo, de l'audio et même d'autres pages Web entières.
                                                                                                                
- 
                                                                                                                Tableaux HTML
                                                                                                                
+ 
                                                                                                                Tableaux HTML
                                                                                                                
  
                                                                                                                Représenter des sous forme de tableaux sur une page Web de manière compréhensible, {{Glossary("Accessibilité", "accessible")}}} peut être un défi. Ce module porte sur le balisage basique des tableaux, ainsi que des fonctions plus complexes telles que l'implémentation de légendes et de résumés.
                                                                                                                
- 
                                                                                                                Formulaire HTML
                                                                                                                
+ 
                                                                                                                Formulaire HTML
                                                                                                                
  
                                                                                                                Les formulaires sont une partie très importante du Web — ils fournissent la grande partie des fonctionnalités dont vous avez besoin pour interagir avec les sites Web, par exemple enregistrement et connexion, envoi de commentaires, achat de produits et plus encore. Ce module vous permet de commencer à créer la partie des formulaires côté client.
                                                                                                                
 
                                                                                                                
 
-
                                                                                                                
-
                                                                                                                
 
                                                                                                                Résolution de problèmes courants en HTML
                                                                                                                
 
-
                                                                                                                Utilisation du HTML pour la solution de problèmes courants fournit des liens vers des contenus expliquant comment utiliser le HTML pour résoudre les problèmes très courants lors de la création d'une page Web : titrer, ajouter des images ou des vidéos, mettre en évidence du contenu, créer un formulaire de base, etc.
                                                                                                                
+
                                                                                                                Utilisation du HTML pour la solution de problèmes courants fournit des liens vers des contenus expliquant comment utiliser le HTML pour résoudre les problèmes très courants lors de la création d'une page Web : titrer, ajouter des images ou des vidéos, mettre en évidence du contenu, créer un formulaire de base, etc.
                                                                                                                
 
 
                                                                                                                Voir aussi
                                                                                                                
 
-
                                                                                                                
 
                                                                                                                
- 
                                                                                                                HTML (HyperText Markup Language) sur MDN
                                                                                                                
+ 
                                                                                                                HTML (HyperText Markup Language) sur MDN
                                                                                                                
  
                                                                                                                Le portail de la documentation du HTML sur MDN, comprenant les références détaillées des éléments et des attributs — si vous voulez savoir, par exemple, quels sont les attributs d'un élément ou quelles valeurs peut prendre un attributif, c'est le bon endroit pour débuter.
                                                                                                                
-
                                                                                                                
-
                                                                                                                
-
                                                                                                                
-
                                                                                                                
+
\ No newline at end of file
diff --git a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html
index 4a6d9d8f3a..d3602ccd19 100644
--- a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html
+++ b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html
@@ -19,9 +19,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting
 
 
                                                                                                                {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}
                                                                                                                
 
-
                                                                                                                Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article Les concepts fondamentaux du HTML liés au texte. Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.
                                                                                                                
+
                                                                                                                Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article Les concepts fondamentaux du HTML liés au texte. Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.
                                                                                                                
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis :
 
 
 
 
 
 
                                                                                                            
+
                                                                                                            
@@ -34,11 +34,11 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting
  
                                                                                                            
  
   
                                                                                                            
    Prérequis :
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            Listes descriptives
                                                                                                            
+
                                                                                                            Listes descriptives
                                                                                                            
 
-
                                                                                                            Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser des listes simples en HTML, mais sans mentionner le troisième type de liste que vous rencontrerez à l'occasion — les listes descriptives. L'objectif de ces listes est de marquer une série d'éléments et leurs descriptions associées, comme termes et définition, ou bien questions et réponse. Voici l'exemple d'un ensemble de termes et leur définitions :
                                                                                                            
+
                                                                                                            Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser des listes simples en HTML, mais sans mentionner le troisième type de liste que vous rencontrerez à l'occasion — les listes descriptives. L'objectif de ces listes est de marquer une série d'éléments et leurs descriptions associées, comme termes et définition, ou bien questions et réponse. Voici l'exemple d'un ensemble de termes et leur définitions :
                                                                                                            
 
-
                                                                                                            soliloque
+
                                                                                                            soliloque
 Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).
 monologue
 Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.
@@ -47,7 +47,7 @@ Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquemen
 
 
                                                                                                            Les listes descriptives utilisent une enveloppe de balisage différente de celle des autres types de listes — {{htmlelement("dl")}} ; chaque terme est en plus entouré d'un élément {{htmlelement("dt")}} (description term) et chaque description d'un élément {{htmlelement("dd")}} (description definition). Terminons en balisant l'exemple ci‑dessus :
                                                                                                            
 
-
                                                                                                            <dl>
+
                                                                                                            <dl>
   <dt>soliloque</dt>
   <dd>Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).</dd>
   <dt>monologue</dt>
@@ -69,11 +69,13 @@ Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquemen
 
 
                                                                                                            Notez qu'il est autorisé d'avoir un terme seul avec de multiples descriptions, par exemple :
                                                                                                            
 
-
                                                                                                            
- 
                                                                                                            aparté
                                                                                                            
- 
                                                                                                            Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.
                                                                                                            
- 
                                                                                                            En écriture, une partie de contenu relative au sujet en cours, mais qui, ne s'inscrivant pas dans le flux principal du contenu, est donc présentée à part (souvent dans un encadré sur le côté).
                                                                                                            
-
                                                                                                            
+
                                                                                                            +<dl>
+ <dt>aparté</dt>
+ <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd>
+ <dd>En écriture, une partie de contenu relative au sujet en cours, mais qui, ne s'inscrivant pas dans le flux principal du contenu, est donc présentée à part (souvent dans un encadré sur le côté).</dd>
+</dl>
+
                                                                                                            
 
 
                                                                                                            Apprentissage interactif : balisez une série de définitions
                                                                                                            
 
@@ -81,10 +83,7 @@ Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquemen
 
 
                                                                                                            Si vous faites une erreur, vous pouvez toujours réinitialiser grace au bouton Réinitialiser. Si vous êtes vraiment bloqué, cliquez sur Voir la solution.
                                                                                                            
 
-
 
-
                                                                                                            {{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}
                                                                                                            
+
                                                                                                            {{ EmbedLiveSample('Apprentissage_interactif_balisez_une_série_de_définitions', 700, 350, "", "", "hide-codepen-jsfiddle") }}
                                                                                                            
 
 
                                                                                                            Citations
                                                                                                            
 
@@ -219,38 +217,38 @@ textarea.onkeyup = function(){
 
 
                                                                                                            Si une section ou un contenu de niveau bloc (que ce soit un paragraphe, de multiples paragraphes, une liste, etc.) est cité depuis une autre origine, vous pouvez le signaler en le mettant dans un élément {{htmlelement("blockquote")}} et en incluant une URL qui pointe vers la source de la citation dans un attribut {{htmlattrxref("cite","blockquote")}}. Par exemple, le balisage suivant provient de la page MDN pour l'élément <blockquote> :
                                                                                                            
 
-
                                                                                                            <p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc
+
                                                                                                            <p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc
 de citation</em>) indique que le bloc de texte inclus est une citation étendue.</p>
                                                                                                            
 
+
                                                                                                            Exemple de bloc de citation
                                                                                                            
 
                                                                                                            Pour le changer en bloc de citation, on ferait simplement ceci :
                                                                                                            
 
-
                                                                                                            <blockquote cite="/fr/docs/Web/HTML/Element/blockquote">
+
                                                                                                            <blockquote cite="/fr/docs/Web/HTML/Element/blockquote">
   <p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>)
      indique que le bloc de texte inclus est une citation étendue.</p>
 </blockquote>
                                                                                                            
 
 
                                                                                                            Le navigateur l'affichera par défaut sous forme d'un paragraphe indenté, avec l'indication qu'il s'agit d'une citation ; MDN agit de même et y ajoute un style personnalisé :
                                                                                                            
-
-
                                                                                                            
-
                                                                                                            L'Élément HTML <blockquote> (ou Élément HTML bloc de citation) indique que le bloc de texte inclus est une citation étendue.
                                                                                                            
-
                                                                                                            
+
                                                                                                            {{EmbedLiveSample("Blocs_de_citation")}}
                                                                                                            
 
 
                                                                                                            Citations en ligne
                                                                                                            
 
 
                                                                                                            Les citations en ligne fonctionnent exactement de la même manière, sauf que l'on utilise l'élément {{htmlelement("q")}}. Par exemple, le balisage suivant contient une citation de la page MDN <q> :
                                                                                                            
 
-
                                                                                                            <p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu
+
                                                                                                            Exemple de citation en ligne
                                                                                                            
+
+
                                                                                                            <p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu
 pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p>
                                                                                                            
 
 
                                                                                                            Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci :
                                                                                                            
 
-
                                                                                                            L'élément citation — <q> — est prévu pour de courtes citations ne nécessitant pas un nouvel alinéa.
                                                                                                            
+
                                                                                                            {{EmbedLiveSample("Exemple_de_citation_en_ligne")}}
                                                                                                            
 
 
                                                                                                            Citations
                                                                                                            
 
 
                                                                                                            Le contenu de l'attribut {{htmlattrxref("cite","blockquote")}} semble utile, malheureusement les navigateurs, lecteurs d'écran, etc. n'en font pas grand chose. Il n'y a pas possibilité de faire afficher différemment au navigateur le contenu d'un cite sans utiliser votre propre JavaScript ou style CSS. Si vous souhaitez rendre disponible la source de la citation sur votre page, la meilleure façon de le faire est d'inclure l'élément {{htmlelement("cite")}} à coté de l'élément citation. Cet élément est vraiment destiné à contenir le nom de la source de la citation — c'est-à-dire le nom du livre ou de la personne auteur de la citation — mais il n'y a aucune raison pour laquelle vous n'avez pas pu lier le texte à l'intérieur de <cite> à la source de la citation d'une manière ou d'une autre :
                                                                                                            
 
-
                                                                                                            <p>Selon la <a href="/fr/docs/Web/HTML/Element/blockquote">
+
                                                                                                            <p>Selon la <a href="/fr/docs/Web/HTML/Element/blockquote">
 <cite>page blockquote du MDN</cite></a>:
 </p>
 
@@ -285,10 +283,7 @@ pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p
 
 
                                                                                                            Si vous faites une erreur, vous pourrez toujours tout réinitialiser en pressant le bouton de même nom. Si vous êtes vraiment bloqué, pressez le bouton Voir la solution pour obtenir la réponse.
                                                                                                            
 
-
 
-
                                                                                                            {{ EmbedLiveSample('Playable_code_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}
                                                                                                            
+
                                                                                                            {{ EmbedLiveSample('Apprentissage_actif_Qui_a_dit_quoi', 700, 450, "", "", "hide-codepen-jsfiddle") }}
                                                                                                            
 
 
                                                                                                            Abréviations
                                                                                                            
 
 
                                                                                                            Un autre élément assez commun rencontré en se promenant dans le Web est l'élément {{htmlelement("abbr")}}}}. Il s'utilise pour entourer une abréviation ou un acronyme et donner le développement complet du terme (inclus dans un attribut {{htmlattrxref("title")}}}. Voyons quelques exemples :
                                                                                                            
 
-
                                                                                                            <p>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</p>
+
                                                                                                            <p>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</p>
 
 <p>Je pense que le <abbr title="Révérend">R.</abbr> Green l'a fait dans la cuisine avec une tronçonneuse.</p>
                                                                                                            
 
@@ -425,17 +419,14 @@ textarea.onkeyup = function(){
 
                                                                                                            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 : marquer une abréviation
                                                                                                            
 
 
                                                                                                            Pour cet apprentissage actif, nous aimerions que vous balisiez simplement une abréviation. Vous pouvez utiliser notre élément ci-après ou le remplacer par un de votre cru.
                                                                                                            
 
-
 
-
                                                                                                            {{ EmbedLiveSample('Playable_code_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}
                                                                                                            
+
                                                                                                            {{ EmbedLiveSample('Apprentissage_actif_marquer_une_abréviation', 700, 300, "", "", "hide-codepen-jsfiddle") }}
                                                                                                            
 
 
                                                                                                            Balisage des détails de contact
                                                                                                            
 
 
                                                                                                            HTML possède l'élément {{htmlelement("address")}} pour baliser des détails de contact. Enveloppez simplement vos coordonnées, par exemple :
                                                                                                            
 
-
                                                                                                            <address>
+
                                                                                                            <address>
   <p>Chris Mills, Manchester, The Grim North, UK</p>
 </address>
                                                                                                            
 
 
                                                                                                            Une chose à retenir cependant : l'élément {{htmlelement("address")}} est destiné à marquer les coordonnées de la personne ayant écrit le document HTML et non pas n'importe quelle adresse. Donc, ce qui précède ne serait acceptable que si Chris avait écrit le document sur lequel ce balisage apparaît. Notez que serait également acceptable ce qui suit :
                                                                                                            
 
-
                                                                                                            <address>
+
                                                                                                            <address>
   <p>Page écrite par <a href="../authors/chris-mills/">Chris Mills</a>.</p>
 </address>
                                                                                                            
 
@@ -571,7 +561,7 @@ textarea.onkeyup = function(){
 
 
                                                                                                            Vous devrez parfois utiliser exposants et indices pour marquer des éléments comme dates, formules chimiques et équations mathématiques de façon à ce qu'ils aient une bonne signification. On effectue ce travail à l'aide des éléments {{htmlelement("sup")}} et {{htmlelement("sub")}}. Par exemple :
                                                                                                            
 
-
                                                                                                            <p>Ma date de naissance est le 1<sup>er</sup> mai 2001.</p>
+
                                                                                                            <p>Ma date de naissance est le 1<sup>er</sup> mai 2001.</p>
 <p>La formule chimique de la caféine est C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
 <p>Si x<sup>2</sup> égale 9, x doit valoir 3 ou -3.</p>
                                                                                                            
 
@@ -581,7 +571,7 @@ textarea.onkeyup = function(){
 
 
                                                                                                            La formule chimique de la caféine est C8H10N4O2.
                                                                                                            
 
-
                                                                                                            Si x2 égale 9, x doit valoir 3 ou -3.
                                                                                                            
+
                                                                                                            Si x^2 égale 9, x doit valoir 3 ou -3.
                                                                                                            
 
 
                                                                                                            Représentation du code informatique
                                                                                                            
 
@@ -597,10 +587,10 @@ textarea.onkeyup = function(){
 
 
                                                                                                            Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple other-semantics.html) :
                                                                                                            
 
-
                                                                                                            <pre><code>var para = document.querySelector('p');
+
                                                                                                            <pre><code>var para = document.querySelector('p');
 
 para.onclick = function() {
-  alert('Owww, arrête de me toucher !');
+  alert('Owww, arrête de me toucher !');
 }</code></pre>
 
 <p>N'utilisez pas d'éléments de présentation comme <code>&lt;font&gt;</code> et <code>&lt;center&gt;</code>.</p>
@@ -623,7 +613,7 @@ para.onclick = function() {
 
 
                                                                                                            HTML fournit également l'élément {{htmlelement("time")}}} pour marquer les heures et les dates dans un format lisible par machine. Par exemple :
                                                                                                            
 
-
                                                                                                            <time datetime="2016-01-20">20 janvier 2016</time>
                                                                                                            
+
                                                                                                            <time datetime="2016-01-20">20 janvier 2016</time>
                                                                                                            
 
 
                                                                                                            En quoi est-ce utile ? Eh bien, il y a beaucoup de façons différentes dont les humains écrivent les dates. La date ci-dessus pourrait s'écrire comme suit :
                                                                                                            
 
@@ -634,31 +624,31 @@ para.onclick = function() {
  
                                                                                                          • 20/01/16
                                                                                                            • 
  
                                                                                                          • 01/20/16
                                                                                                            • 
  
                                                                                                          • Le 20 du mois prochain
                                                                                                            • 
- 
                                                                                                          • 20e Janvier 2016
                                                                                                            • 
- 
                                                                                                          • 2016年1月20日
                                                                                                            • 
- 
                                                                                                          • etc.
                                                                                                            • 
+ 
                                                                                                          • 20e Janvier 2016
                                                                                                            • 
+ 
                                                                                                          • 2016年1月20日
                                                                                                            • 
+ 
                                                                                                          • etc.
                                                                                                            • 
 
                                                                                                          
 
 
                                                                                                          Mais ces différents formes ne sont pas facilement reconnaissables par les ordinateurs — que se passerait‑il si vous vouliez saisir automatiquement les dates de tous les événements dans une page et les insérer dans un calendrier ? L'élément {{htmlelement("time")}}} vous permettra d'attacher un horodatage non ambigu lisible par machine à cette fin.
                                                                                                          
 
 
                                                                                                          L'exemple de base ci-dessus ne fournit qu'une simple date lisible par machine, mais il y a beaucoup d'autres options possibles, par exemple :
                                                                                                          
 
-
                                                                                                          <!-- Simple date standard -->
-<time datetime="2016-01-20">20 janvier 2016</time>
+
                                                                                                          <!-- Simple date standard -->
+<time datetime="2016-01-20">20 janvier 2016</time>
 <!-- Juste l'année et le mois -->
-<time datetime="2016-01">janvier 2016</time>
+<time datetime="2016-01">janvier 2016</time>
 <!-- Juste le mois et les jour -->
-<time datetime="01-20">20 janvier</time>
+<time datetime="01-20">20 janvier</time>
 <!-- Juste l'heure, heure et minutes -->
-<time datetime="19:30">19h30</time>
+<time datetime="19:30">19h30</time>
 <!-- Vous pouvez aussi mettre les secondes et les millisecondes ! -->
-<time datetime="19:30:01.856">19h30m1,856s</time>
+<time datetime="19:30:01.856">19h30m1,856s</time>
 <!-- Date et heure -->
-<time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time>
+<time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time>
 <!-- Date et heure avec décalage de fuseau horaire -->
-<time datetime="2016-01-20T19:30+01:00">19h30, le 20 janvier 2016 corespond à 20h30 en France</time>
+<time datetime="2016-01-20T19:30+01:00">19h30, le 20 janvier 2016 corespond à 20h30 en France</time>
 <!-- Appel d'un numéro de semains donné -->
-<time datetime="2016-W04">La 4e semaine de 2016</time>
                                                                                                          
+<time datetime="2016-W04">La 4e semaine de 2016</time>
                                                                                                          
 
 
                                                                                                          Résumé
                                                                                                          
 
diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html
index 95ce137c9b..abaeb6d167 100644
--- a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html
+++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html
@@ -19,9 +19,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks
 
                                                                                                          {{LearnSidebar}}
                                                                                                          
 {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}}
                                                                                                          
 
-
                                                                                                          Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web une toile. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens.
                                                                                                          
+
                                                                                                          Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web une toile. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens.
                                                                                                          
 
-
+
                                                                                                          
@@ -39,30 +39,30 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks
 
                                                                                                          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 — ils nous permettent de lier nos documents à n'importe quel autre document (ou autre ressource) voulu ; nous pouvons faire des liens vers des parties précises de documents et rendre des applications disponibles à une simple adresse web (contrairement aux applications natives, qui doivent être installées et tout le travail). À 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 ({{glossary("URL")}}).
                                                                                                          
-
                                                                                                          Note : Une URL peut pointer vers des fichiers HTML, des fichiers textes, des images, des documents textuels, 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 textuels, 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) et plus encore.
                                                                                                          
 
-
                                                                                                          frontpage of bbc.co.uk, showing many news items, and navigation menu functionality
                                                                                                          
+
                                                                                                          frontpage of bbc.co.uk, showing many news items, and navigation menu functionality
                                                                                                          Anatomie d'un lien
                                                                                                          Un lien élémentaire se crée en intégrant le texte (ou tout autre contenu, cf. {{anch("Liens de niveau bloc")}}) que vous voulez transformer en lien dans un élément {{htmlelement("a")}} et en lui affectant un attribut {{htmlattrxref("href", "a")}} (également connu comme étant une Hypertext Reference) contenant l'adresse web vers laquelle vous voulez que le lien pointe.
                                                                                                          
 
-
                                                                                                          <p>Je suis en train de créer un lien à
+
                                                                                                          <p>Je suis en train de créer un lien à
 <a href="https://www.mozilla.org/fr/">la page d'accueil Mozilla</a>.
 </p>
                                                                                                          
 
 
                                                                                                          qui donne le résultat suivant :
                                                                                                          
 
-
                                                                                                          Je suis en train de créer un lien à  la page d'accueil de Mozilla.
                                                                                                          
+
                                                                                                          Je suis en train de créer un lien à  la page d'accueil de Mozilla.
                                                                                                          
 
 
                                                                                                          Ajouter des informations d'assistance avec l'attribut title
                                                                                                          
 
 
                                                                                                          L'autre attribut qu'il est possible d'ajouter à un lien est title ; il est destiné à contenir des informations utiles supplémentaires à propos du lien, comme le type d'informations contenes dans la page ou ce qu'il faut savoir. Par exemple :
                                                                                                          
 
-
                                                                                                          <p>Je suis en train de créer un lien à
+
                                                                                                          <p>Je suis en train de créer un lien à
 <a href="https://www.mozilla.org/fr/"
    title="Le meilleur endroit pour trouver plus d'informations sur la
   mission de Mozilla et la manière de contribuer">la page d'accueil Mozilla</a>.
@@ -70,10 +70,10 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks
 
 
                                                                                                          Voici le résultat (le contenu de title apparaît dans une info-bulle quand le pointeur de souris passe sur le lien) :
                                                                                                          
 
-
                                                                                                          Je suis en train de créer un lien vers la page d'accueil de Mozilla
                                                                                                          
+
                                                                                                          Je suis en train de créer un lien vers la page d'accueil de Mozilla
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          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 accessible à tout utilisateur, 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 accessible à tout utilisateur, par exemple, en la mettant dans le texte normal.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Apprentissage actif : création de votre propre exemple de lien
                                                                                                          
@@ -90,12 +90,12 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks
 
 
                                                                                                          Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des éléments bloc . Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises <a></a>.
                                                                                                          
 
-
                                                                                                          <a href="https://www.mozilla.org/fr/">
+
                                                                                                          <a href="https://www.mozilla.org/fr/">
   <img src="mozilla-image.png" alt="logo mozilla pointant sur la page d'accueil mozilla">
 </a>
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article.
                                                                                                          
+
                                                                                                          Note : Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Une brève présentation des URL et des chemins
                                                                                                          
@@ -106,7 +106,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks
 
 
                                                                                                          Les URL utilisent des chemins pour trouver des fichiers. Les chemins indiquent où dans le système de fichiers, se trouve celui qui vous intéresse. Regardons un exemple simple de structure de répertoires (voir le dossier creating-hyperlinks).
                                                                                                          
 
-
                                                                                                          Une simple structure de répertoire. Le répertoire parent s'appelle creating-hyperlinks et contient deux fichiers appelés index.html et contacts.html, et deux répertoires appelés projects et pdfs, qui contiennent respectivement un fichier index.html et un fichier project-brief.pdf.
                                                                                                          
+
                                                                                                          Une simple structure de répertoire. Le répertoire parent s'appelle creating-hyperlinks et contient deux fichiers appelés index.html et contacts.html, et deux répertoires appelés projects et pdfs, qui contiennent respectivement un fichier index.html et un fichier project-brief.pdf.
                                                                                                          
 
 
                                                                                                          La racine de cette structure de répertoires s'appelle creating-hyperlinks. Quand vous travaillez localement sur un site web, vous avez un dossier contenant l'intégralité du site. Dans la racine, nous avons un fichier index.html et un contacts.html. Sur un site réel, index.html serait notre page d'accueil ou portail (page web servant de point d'entrée à un site web ou à une section particulière d'un site web).
                                                                                                          
 
@@ -116,38 +116,38 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks
  
                                                                                                        2. 
   
                                                                                                          Dans un même dossier : si vous voulez inclure un hyperlien dans index.html (celui de plus haut niveau) pointant vers contacts.html, il suffit d'indiquer uniquement le nom du fichier auquel vous voulez le lier, car il est dans le même répertoire que le fichier actuel. Ainsi, l'URL à utiliser est contacts.html :
                                                                                                          
 
-  
                                                                                                          <p>Voulez‑vous rencontrer un membre du personnel en particulier ?
+  
                                                                                                          <p>Voulez‑vous rencontrer un membre du personnel en particulier ?
 Voyez comment faire sur notre page <a href="contacts.html">Contacts</a>.</p>
                                                                                                          
  
                                                                                                          3. 
  
                                                                                                        3. 
   
                                                                                                          Descendre dans les sous-répertoires : si vous désirez inclure un hyperlien dans index.html (celui de plus haut niveau) pointant vers projects/index.html, vous avez besoin de descendre dans le dossierprojects avant d'indiquer le fichier auquel vous voulez vous lier. Cela se fait en indiquant le nom du dossier, suivi d'une barre oblique normale, puis le nom du fichier. Donc l'URL à utiliser sera projects/index.html :
                                                                                                          
 
-  
                                                                                                          <p>Visitez la <a href="projects/index.html">page d'accueil</a> de mon projet.</p>
                                                                                                          
+  
                                                                                                          <p>Visitez la <a href="projects/index.html">page d'accueil</a> de mon projet.</p>
                                                                                                          
  
                                                                                                          4. 
  
                                                                                                        4. 
   
                                                                                                          Monter dans les dossiers parents : si vous voulez inclure un hyperlien dans projects/index.html qui pointe vers pdfs/projects-brief.pdf, vous aurez besoin de monter dans le répertoire au niveau au‑dessus, puis de descendre dans le dossier pdfs. « Monter dans le répertoire au niveau au‑dessus » est indiqué avec deux points — .. —, de sorte que l'URL à utiliser sera ../pdfs/project‑brief.pdf :
                                                                                                          
 
-  
                                                                                                          <p>Voici un lien vers mon <a href="../pdfs/project-brief.pdf">sommaire de projet</a>.</p>
                                                                                                          
+  
                                                                                                          <p>Voici un lien vers mon <a href="../pdfs/project-brief.pdf">sommaire de projet</a>.</p>
                                                                                                          
  
                                                                                                          5. 
 
 
 
                                                                                                          
-
                                                                                                          Note : Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. ../../../complexe/path/to/my/file.html.
                                                                                                          
+
                                                                                                          Note : Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. ../../../complexe/path/to/my/file.html.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Fragments de documents
                                                                                                          
 
 
                                                                                                          Il est possible de faire un lien vers une partie donnée d'un document HTML (désignée du terme fragment de document), plutôt que juste le haut du document. Pour ce faire, vous devrez d'abord assigner un attribut {{htmlattrxref("id")}} à l'élément sur lequel vous voulez pointer. Il est généralement logique d'établir un lien vers une rubrique précise, ainsi cela ressemble à quelque chose comme :
                                                                                                          
 
-
                                                                                                          <h2 id="Adresse_mailing">Adresse de mailing</h2>
                                                                                                          
+
                                                                                                          <h2 id="Adresse_mailing">Adresse de mailing</h2>
                                                                                                          
 
 
                                                                                                          Puis, pour faire un lien vers cet id précisément, il convient de l'indiquer à la fin de l'URL, précédé d'un croisillon (#) :
                                                                                                          
 
-
                                                                                                          <p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p>
                                                                                                          
+
                                                                                                          <p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p>
                                                                                                          
 
 
                                                                                                          Vous pouvez même utiliser une référence au fragment de document seul pour faire un lien vers une autre partie du même document :
                                                                                                          
 
-
                                                                                                          <p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p>
                                                                                                          
+
                                                                                                          <p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p>
                                                                                                          
 
 
                                                                                                          URL absolue vs. URL relative
                                                                                                          
 
@@ -184,13 +184,13 @@ Voyez comment faire sur notre page <a href="contacts.html">Contacts</a&
 
 
                                                                                                          Bon texte de lien: Télécharger Firefox
                                                                                                          
 
-
                                                                                                          <p><a href="https://firefox.com/">
+
                                                                                                          <p><a href="https://firefox.com/">
   Télécharger Firefox
 </a></p>
                                                                                                          
 
 
                                                                                                          Mauvais texte de lien : Cliquer ici pour télécharger Firefox
                                                                                                          
 
-
                                                                                                          <p><a href="https://firefox.com/">
+
                                                                                                          <p><a href="https://firefox.com/">
   Cliquer ici
 </a>
 pour télécharger Firefox</p>
@@ -225,7 +225,7 @@ pour télécharger Firefox</p>
 
 
                                                                                                          Voici quelques exemples suggérant les genres de texte pouvant être employé :
                                                                                                          
 
-
                                                                                                          <p><a href="http://www.exemple.com/rapport-volumineux.pdf">
+
                                                                                                          <p><a href="http://www.exemple.com/rapport-volumineux.pdf">
   Télécharger le rapport des ventes (PDF, 10Mo)
 </a></p>
 
@@ -241,10 +241,10 @@ pour télécharger Firefox</p>
 
 
                                                                                                          Quand vous faites un lien avec une ressource qui doit être téléchargée plutôt qu'ouverte dans le navigateur, vous pouvez utiliser l'attribut download pour fournir un nom d'enregistrement par défaut. Voici un exemple avec un lien de téléchargement vers la version Windows la plus récente de Firefox :
                                                                                                          
 
-
                                                                                                          <a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR"
+
                                                                                                          <a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR"
    download="firefox-latest-64bit-installer.exe">
   Télécharger la version de Firefox pour Windows la plus récente (64-bit)(français, France)
-</a>
                                                                                                          
+</a>
                                                                                                          
 
 
                                                                                                          Apprentissage actif : création d'un menu de navigation
                                                                                                          
 
@@ -270,10 +270,10 @@ pour télécharger Firefox</p>
 
 
                                                                                                          L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui suit :
                                                                                                          
 
-
                                                                                                          Un exemple d'un menu de navigation HTML simple, avec les éléments page d'accueil, images, projets et menu des réseaux sociaux.
                                                                                                          
+
                                                                                                          Un exemple d'un menu de navigation HTML simple, avec les éléments page d'accueil, images, projets et menu des réseaux sociaux.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier navigation-menu-marked-up pour voir la réponse correcte.
                                                                                                          
+
                                                                                                          Note : si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier navigation-menu-marked-up pour voir la réponse correcte.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Liens de courriel
                                                                                                          
@@ -282,7 +282,7 @@ pour télécharger Firefox</p>
 
 
                                                                                                          Sous sa forme la plus basique et la plus communément utilisée, un lien mailto: indique simplement l'adresse du destinataire voulu. Par exemple :
                                                                                                          
 
-
                                                                                                          <a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a>
+
                                                                                                          <a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a>
 
                                                                                                          
 
 
                                                                                                          Ceci donne un résultat qui ressemble à ceci : Envoyer un courriel à nullepart.
                                                                                                          
@@ -295,7 +295,7 @@ pour télécharger Firefox</p>
 
 
                                                                                                          Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body :
                                                                                                          
 
-
                                                                                                          <a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&bcc=nom3@rapidtables.com&subject=L%27objet%20du%20courriel&body=Le%20corps%20du%20courriel">
+
                                                                                                          <a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&bcc=nom3@rapidtables.com&subject=L%27objet%20du%20courriel&body=Le%20corps%20du%20courriel">
   Envoyer un mail avec copie, copie cachée, sujet et corps de message
 </a>
                                                                                                          
 
diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/index.html b/files/fr/learn/html/introduction_to_html/debugging_html/index.html
index 34d758d938..ed0cfa6a2b 100644
--- a/files/fr/learn/html/introduction_to_html/debugging_html/index.html
+++ b/files/fr/learn/html/introduction_to_html/debugging_html/index.html
@@ -17,9 +17,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML
 
 
                                                                                                          {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}
                                                                                                          
 
-
                                                                                                          Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider à trouver et corriger les erreurs en HTML.
                                                                                                          
+
                                                                                                          Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider à trouver et corriger les erreurs en HTML.
                                                                                                          
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :
 
 
 
 
 
 
 
 
                                                                                                          
+
                                                                                                          
@@ -36,7 +36,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML
 
 
                                                                                                          Quand on écrit du code , tout va généralement bien, jusqu'au moment redouté où une erreur se produit — vous avez fait quelque chose d'incorrect, donc votre code ne fonctionne pas — soit pas du tout, soit pas tout à fait comme vous l'aviez souhaité. Par exemple, ce qui suit montre une erreur signalée lors d'une tentative de {{glossary("compile","compilation")}} d'un programme simple écrit en Rust.
                                                                                                          
 
-
                                                                                                          Console montrant le résultat de la compilation d'un programme Rust avec guillemet manquant dans une chaîne textuelle dans une instruction d'affichage. Le message signalé est « erreur : guillemet double manquant dans la chaîne ».Ici, le message d'erreur est relativement facile à comprendre — « unterminated double quote string » : il manque un guillemet double ouvrant ou fermant pour envelopper la chaîne. Si vous regardez le listage, vous verrez println!(Salut, Ô Monde!"); il manque un guillemet double. Cependant, des messages d'erreur peuvent devenir plus complexes et plus abscons au fur et à mesure que le programme grossit et, même dans des cas simples devenir intimidants à quelqu'un qui ne connaît rien du Rust.
                                                                                                          
+
                                                                                                          Console montrant le résultat de la compilation d'un programme Rust avec guillemet manquant dans une chaîne textuelle dans une instruction d'affichage. Le message signalé est « erreur : guillemet double manquant dans la chaîne ».Ici, le message d'erreur est relativement facile à comprendre — « unterminated double quote string » : il manque un guillemet double ouvrant ou fermant pour envelopper la chaîne. Si vous regardez le listage, vous verrez println!(Salut, Ô Monde!"); il manque un guillemet double. Cependant, des messages d'erreur peuvent devenir plus complexes et plus abscons au fur et à mesure que le programme grossit et, même dans des cas simples devenir intimidants à quelqu'un qui ne connaît rien du Rust.
                                                                                                          Déboguer ne doit toutefois pas devenir un problème — la clé pour être à l'aise lors de l'écriture et du débogage d'un programme réside dans une bonne connaissance à la fois du langage et des outils.
                                                                                                          
 
@@ -60,7 +60,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML
 
                                                                                                          HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de manière permissive : la page s'affiche toujours même s'il y a des erreurs de syntaxe. Les navigateurs intègrent des règles indiquant comment interpréter un balisage incorrectement écrit, de sorte que vous obtiendrez toujours quelque chose à l'exécution, même si ce n'est pas ce que vous attendiez. Mais cela reste, bien sûr, toujours un problème !
                                                                                                          
-
                                                                                                          Note : HTML est analysé de façon permissive parce que, lorsque le Web a été créé pour la première fois, on a décidé qu'il était plus important de permettre aux gens de publier leur contenu que de s'assurer d'une syntaxe absolument correcte. Le web ne serait probablement pas aussi populaire qu'il l'est aujourd'hui, s'il avait été plus strict dans ses débuts.
                                                                                                          
+
                                                                                                          Note : HTML est analysé de façon permissive parce que, lorsque le Web a été créé pour la première fois, on a décidé qu'il était plus important de permettre aux gens de publier leur contenu que de s'assurer d'une syntaxe absolument correcte. Le web ne serait probablement pas aussi populaire qu'il l'est aujourd'hui, s'il avait été plus strict dans ses débuts.
                                                                                                          
 
                                                                                                          Apprentissage actif : étude avec un code permissif
                                                                                                          
@@ -69,7 +69,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML
 
 
                                                                                                            
  
                                                                                                          1. Primo, télécharchez notre démo debug-example et enregistrez‑le localement. Cette démo est délibérement écrite avec des erreurs pour que nous puissions les examiner (le balisage HTML est dit malformé, par opposition à bien-formé).
                                                                                                            2. 
- 
                                                                                                          2. Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci :Un simple document HTML intitulé « Exemples de HTML à déboguer » et quelques informations sur les erreurs HTML courantes, telles que les éléments non fermés ou mal imbriqués et des attributs non fermés. 
                                                                                                            3. 
+ 
                                                                                                          3. Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci :Un simple document HTML intitulé « Exemples de HTML à déboguer » et quelques informations sur les erreurs HTML courantes, telles que les éléments non fermés ou mal imbriqués et des attributs non fermés. 
                                                                                                            4. 
  
                                                                                                          4. Constatons que ce n'est pas terrible ; examinons le code source pour voir ce que nous pouvons en faire (seul le contenu de l'élément body est affiché) :
   
                                                                                                                <h1>Exemple de HTML à déboguer</h1>
 
@@ -100,7 +100,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML
   
  
                                                                                                            5. 
  
                                                                                                          5. Revoyons maintenant comment le navigateur a vu le balisage, par comparaison au balisage du code source. Pour ce faire, utilisons les outils de développement du navigateur. Si vous n'êtes pas un familier de l'utilisation des outils de développement du navigateur, prenez quelques minutes pour revoir Découverte des outils de développement du navigateur.
                                                                                                            6. 
- 
                                                                                                          6. Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble : L'inspecteur HTML dans Firefox, avec le paragraphe de l'exemple en surbrillance, montrant le texte "Quelles sont les causes d'erreurs en HTML ? Ici, vous pouvez voir que l'élément de paragraphe a été fermé par le navigateur.
                                                                                                            7. 
+ 
                                                                                                          7. Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble : L'inspecteur HTML dans Firefox, avec le paragraphe de l'exemple en surbrillance, montrant le texte "Quelles sont les causes d'erreurs en HTML ? Ici, vous pouvez voir que l'élément de paragraphe a été fermé par le navigateur.
                                                                                                            8. 
  
                                                                                                          8. Avec l'« Inspecteur », explorons le code en détail pour voir comment le navigateur a essayé de corriger nos erreurs HTML (nous avons fait la revue dans Firefox ; d'autres navigateurs modernes devraient donner le même résultat) :
   
                                                                                                              
    
                                                                                                            • Les éléments p et li ont été pourvus de balises fermantes.
                                                                                                              • 
@@ -127,9 +127,9 @@ en HTML. Voici un exemple :</strong>
 
 
                                                                                                              La meilleure stratégie consiste à faire passer votre page HTML par le Markup Validation Service (Service de validation de balisage) — créé et maintenu par le W3C, l'organisation s'occupant des normes définissant le HTML, les CSS et autres technologies web. Cet outil Web accepte un document HTML en entrée, le parcourt et fait le rapport de ce qui ne va pas dans le HTML soumis.
                                                                                                              
 
-
                                                                                                              La page d'accueil du validateur HTML
                                                                                                              
+
                                                                                                              La page d'accueil du validateur HTML
                                                                                                              
 
-
                                                                                                              Pour définir le HTML à valider, vous pouvez donner une adresse web (Validate by URI) , téléverser un fichier HTML (Validate by File Upload) ou entrer directement du code HTML (Validate by Direct Input).
                                                                                                              
+
                                                                                                              Pour définir le HTML à valider, vous pouvez donner une adresse web (Validate by URI) , téléverser un fichier HTML (Validate by File Upload) ou entrer directement du code HTML (Validate by Direct Input).
                                                                                                              
 
 
                                                                                                              Apprentissage actif : validation d'un document HTML
                                                                                                              
 
@@ -144,7 +144,7 @@ en HTML. Voici un exemple :</strong>
 
 
                                                                                                              Cela vous donnera une liste d'erreurs et autres informations.
                                                                                                              
 
-
                                                                                                              La liste des résultats de la validation de HTML par le service de validation du W3C.
                                                                                                              
+
                                                                                                              La liste des résultats de la validation de HTML par le service de validation du W3C.
                                                                                                              
 
 
                                                                                                              Interprétation des messages d'erreur
                                                                                                              
 
@@ -159,7 +159,7 @@ en HTML. Voici un exemple :</strong>
   
                                                                                                              exemple: <a href="https://www.mozilla.org/>lien à la page d'accueil de Mozilla</a> ↩ </ul>↩ </body>↩</html>
                                                                                                              
 
   
                                                                                                              
-  
                                                                                                              Note : un attribut sans guillemet fermant peut entraîner un élément ouvert car le reste du document est interprété comme le contenu de l'attribut.
                                                                                                              
+  
                                                                                                              Note : un attribut sans guillemet fermant peut entraîner un élément ouvert car le reste du document est interprété comme le contenu de l'attribut.
                                                                                                              
   
                                                                                                              
  
  
                                                                                                            • « Unclosed element ul » : n'est pas vraiment utile, car l'élément {{htmlelement("ul")}} est correctement fermé. Cette erreur ressort car l'élément {{htmlelement("a")}} n'est pas fermé en raison de l'absence de guillemet fermant.
                                                                                                              • 
@@ -167,9 +167,9 @@ en HTML. Voici un exemple :</strong>
 
 
                                                                                                              Si vous ne comprenez pas ce que signifie chaque message d'erreur, ne vous inquiétez pas — une bonne idée consiste à corriger quelques erreurs à la fois. Puis essayez de revalider le HTML pour voir les erreurs restantes. Parfois, la correction d'une erreur en amont permet aussi d'éliminer d'autres messages d'erreur — plusieurs erreurs sont souvent causées par un même problème, avec une sorte d'effet domino.
                                                                                                              
 
-
                                                                                                              Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie : 
                                                                                                              
+
                                                                                                              Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie : 
                                                                                                              
 
-
                                                                                                              Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."
                                                                                                              
+
                                                                                                              Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."
                                                                                                              
 
 
                                                                                                              Résumé
                                                                                                              
 
diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html
index 37fcd02cc2..2ffb0e3cdf 100644
--- a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html
+++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html
@@ -18,9 +18,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur
 {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML","Apprendre/HTML/Introduction_à_HTML")}}
                                                                                                              
  
 
-
                                                                                                              De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.
                                                                                                              
+
                                                                                                              De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.
                                                                                                              
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :
 
 
 
 
 
 
                                                                                                          
+
                                                                                                          
@@ -56,7 +56,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur
  Un « site web typique » pourrait ressembler à quelque chose comme ceci :
 
-
                                                                                                          un exemple simple de structure de site Web comportant un titre principal, un menu de navigation, un contenu principal, une barre latérale et un pied de page.
                                                                                                          
+
                                                                                                          un exemple simple de structure de site Web comportant un titre principal, un menu de navigation, un contenu principal, une barre latérale et un pied de page.
                                                                                                          HTML pour structurer un contenu
                                                                                                          
 
@@ -65,7 +65,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur
 
                                                                                                          C'est parce que le visuel ne raconte pas toute l'histoire. Nous utilisons la couleur et la taille des caractères pour attirer l'attention des utilisateurs malvoyants sur les parties les plus utiles du contenu, comme le menu de navigation et les liens connexes, mais qu'en est-il des personnes malvoyantes par exemple, qui pourraient ne pas trouver très utiles des concepts tels que le « rose » et la « grande police » ?
                                                                                                          
-
                                                                                                          Note : Les daltoniens représentent environ 8% de la population mondiale ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait 285 millions de personnes aveugles et malvoyantes dans le monde, alors que la population totale était d'environ 7 milliards d'habitants).
                                                                                                          
+
                                                                                                          Note : Les daltoniens représentent environ 8% de la population mondiale ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait 285 millions de personnes aveugles et malvoyantes dans le monde, alors que la population totale était d'environ 7 milliards d'habitants).
                                                                                                          
 
                                                                                                          Dans votre code HTML, vous pouvez marquer des sections de contenu selon leur fonction — vous pouvez utiliser des éléments qui représentent sans ambiguïté les sections de contenu décrites ci-dessus, et les technologies d'assistance comme les lecteurs d'écran peuvent reconnaître ces éléments et vous aider avec des tâches comme « trouver la navigation principale » ou « trouver le contenu principal ». Comme nous l'avons mentionné plus tôt dans le cours, le fait de ne pas utiliser la bonne structure d'éléments et la bonne sémantique pour le bon travail a un certain nombre de conséquences.
                                                                                                          
@@ -174,7 +174,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur
 
                                                                                                            
  
                                                                                                          • {{HTMLElement('main')}} est relatif au contenu unique de la page. N'utilisez <main> que une seule fois par page et placez-le directement à l'intérieur de l'élement {{HTMLElement('body')}}. Idéalement, il ne devrait pas être imbriqué dans d'autres éléments.
                                                                                                            • 
  
                                                                                                          • {{HTMLElement('article')}} entoure un bloc de contenu en relation constituant en soi une unité de sens pris isolément par rapport au reste de la page (par ex. un unique billet de blog.)
                                                                                                            • 
- 
                                                                                                          • {{HTMLElement('section')}} ressemble à <article>, mais sert plutôt à contenir une partie isolée de la page constituant un élément de fonctionnalité en soi (par ex. une petite carte ou un ensemble d'intitulés d'article ou de résumés). Il est considéré de bonne pratique de commencer chaque section par un heading ; notez également que vous pouvez fractionner un <article> en plusieurs <section> ou bien des <section> en divers <article>, selon le contexte.
                                                                                                            • 
+ 
                                                                                                          • {{HTMLElement('section')}} ressemble à <article>, mais sert plutôt à contenir une partie isolée de la page constituant un élément de fonctionnalité en soi (par ex. une petite carte ou un ensemble d'intitulés d'article ou de résumés). Il est considéré de bonne pratique de commencer chaque section par un heading ; notez également que vous pouvez fractionner un <article> en plusieurs <section> ou bien des <section> en divers <article>, selon le contexte.
                                                                                                            • 
  
                                                                                                          • {{HTMLElement('aside')}} contient les composantes non directement liées au contenu principal mais pouvant fournir des informations supplémentaires indirectement en relation avec ce dernier (entrées de glossaire, biographie de l'auteur, liens connexes, etc).
                                                                                                            • 
  
                                                                                                          • {{HTMLElement('header')}} représente un groupe de contenus introductoires. Enfant de {{HTMLElement('body')}}, il définit l'en-tête général de la page web, mais enfant de {{HTMLElement('article')}} ou {{HTMLElement('section')}} il définit un en‑tête propre à cette section (ne confondez pas titles et headings).
                                                                                                            • 
  
                                                                                                          • {{HTMLElement('nav')}} contient les éléments principaux de navigation pour la page. Les liens secondaires, etc., n'entrent pas dans la navigation.
                                                                                                            • 
@@ -212,7 +212,7 @@ alors qu'il titubait en travers de la porte <span class="editor-note">
 
                                                                                                            Ce n'est pas vraiment un élément <aside> et il n'a pas forcément de relation avec l'essentiel du contenu de la page (vous le souhaitez visible de partout). Il ne justifie pas particulièrement l'utilisation d'une <section>, car il ne fait pas partie du contenu principal de la page. Donc un <div> est bien dans ce cas. Nous avons incorporé un panneau indicateur que les lecteurs d'écran puissent le signaler.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Avertissement : les div sont si pratiques à utiliser qu'on est tenté de les utiliser à l'excès. Comme ils ne portent aucune valeur sémantique, ils encombrent votre code HTML. Prenez soin de ne les utiliser que s'il n'y a pas de meilleure solution sémantique et essayez de réduire leur utilisation au minimum sinon vous aurez du mal à mettre à jour et à maintenir vos documents.
                                                                                                            
+
                                                                                                            Attention : les div sont si pratiques à utiliser qu'on est tenté de les utiliser à l'excès. Comme ils ne portent aucune valeur sémantique, ils encombrent votre code HTML. Prenez soin de ne les utiliser que s'il n'y a pas de meilleure solution sémantique et essayez de réduire leur utilisation au minimum sinon vous aurez du mal à mettre à jour et à maintenir vos documents.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Sauts de ligne et traits horizontaux
                                                                                                            
@@ -226,7 +226,7 @@ Qui aimait écrire du HTML<br>
 Mais ses structures et sémantiques affligeantes<br>
 rendaient de ses marquages la lecture inélégante.</p>
 
-
                                                                                                            Sans éléments <br>, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, HTML ignore la plupart des blancs) ; avec des <br> dans le code, voici le rendu de ce qui précède :
                                                                                                            
+
                                                                                                            Sans éléments <br>, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, HTML ignore la plupart des blancs) ; avec des <br> dans le code, voici le rendu de ce qui précède :
                                                                                                            
 
 
                                                                                                            Il y avait une fois une fille nommée Nell
                                                                                                            
  Qui aimait écrire du HTML
                                                                                                            
@@ -235,27 +235,25 @@ rendaient de ses marquages la lecture inélégante.</p>
 
 
                                                                                                            Les éléments <hr> créent un trait horizontal dans le document marquant un changement thématique dans le texte (comme un changement de sujet ou de scène). Visuallement, c'est juste un trait horizontal, comme dans cet exemple :
                                                                                                            
 
+
                                                                                                            Exemple avec hr
                                                                                                            
+
 
                                                                                                            <p>Ron était acculé dans un angle par des Netherbeasts en maraude. Effrayé, mais déterminé à protéger ses amis, il a levé sa baguette et s'est préparé à se battre, espérant que son appel de détresse serait entendu.</p>
 <hr>
 <p>Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.</p>
                                                                                                            
 
 
                                                                                                            sera rendu ainsi :
                                                                                                            
-
-
                                                                                                            Ron était acculé dans un angle par des Netherbeasts en maraude. Effrayé, mais déterminé à protéger ses amis, il a levé sa baguette et s'est préparé à se battre, espérant que son appel de détresse serait entendu.
                                                                                                            
-
-
                                                                                                            
-
                                                                                                            Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.
                                                                                                            
+
                                                                                                            {{EmbedLiveSample("Exemple_avec_hr")}}
                                                                                                            
 
 
                                                                                                            Planification d'un site web simple
                                                                                                            
 
 
                                                                                                            Une fois planifié le contenu d'une simple page Web, l'étape logique suivante est d'essayer de déterminer le contenu que vous voulez mettre sur le site Web en entier, les pages dont vous avez besoin et la façon dont elles doivent être organisées et les liens les unes vers les autres pour la meilleure expérience utilisateur possible. C'est ce qu'on appelle {{glossary("Information architecture")}} (architecture de l'information). Dans un grand site web complexe, beaucoup de planification peut entrer dans ce processus, mais pour un simple site Web de quelques pages, cela peut être assez simple et amusant !
                                                                                                            
 
 
                                                                                                              
- 
                                                                                                            1. Gardez à l'esprit que vous aurez quelques éléments communs à la plupart des pages (sinon à toutes) — comme le menu de navigation et le contenu du pied de page. Si votre site est destiné à une entreprise, par exemple, c'est une bonne idée d'avoir les informations de contact dans le pied de page de chaque page. Notez ce que vous voulez avoir en commun dans chaque page. les caractéristiques communes du site de voyage pour aller sur chaque page : titre et logo, contact, copyright, termes et conditions, choix de la langue, politique d'accessibilité.
                                                                                                              2. 
- 
                                                                                                            2. Ensuite, dessinez une esquisse de ce à quoi vous voudriez que la structure de chaque page ressemble (elle pourrait ressembler à notre simple site Web ci-dessus.) Notez ce que chaque bloc va être. Un diagramme simple d'une structure d'exemple de site, avec un en-tête, une zone de contenu principal, deux barres latérales optionnelles et un pied de page.
                                                                                                              3. 
- 
                                                                                                            3. Maintenant, faites un remue-méninges sur tous les autres contenus (qui ne sont pas communs à toutes les pages) que vous voulez avoir sur votre site Web - écrivez une grande liste. Une longue liste de toutes les fonctionnalités que nous pourrions mettre sur notre site de voyage, de la recherche, aux offres spéciales et aux informations spécifiques à chaque pays.
                                                                                                              4. 
- 
                                                                                                            4. Ensuite, essayez de trier tous ces éléments de contenu par groupes, pour vous donner une idée des parties qui pourraient aller ensemble sur diverses pages. C'est très similaire à une technique appelée {{glossary("Card sorting","Tri de cartes")}}.Les articles qui devraient apparaître sur un site de vacances triés en 5 catégories : Recherche, spéciaux, informations spécifiques au pays, résultats de la recherche et choses à acheter.
                                                                                                              5. 
- 
                                                                                                            5. Essayez maintenant d'esquisser un plan de site grossier — entourez d'un cercle chaque page de votre site et tracez des flèches pour montrer les flux de travail typiques entre pages. La page d'accueil sera probablement au centre et en lien vers la plupart sinon la totalité des autres ; la plupart des pages d'un petit site devraient être disponibles à partir de la navigation principale, bien qu'il y ait des exceptions. Vous voudrez peut-être aussi ajouter des notes sur la présentation des choses. Une carte du site montrant la page d'accueil, la page du pays, les résultats de recherche, la page spéciale, la page de paiement et la page d'achat.
                                                                                                              6. 
+ 
                                                                                                            6. Gardez à l'esprit que vous aurez quelques éléments communs à la plupart des pages (sinon à toutes) — comme le menu de navigation et le contenu du pied de page. Si votre site est destiné à une entreprise, par exemple, c'est une bonne idée d'avoir les informations de contact dans le pied de page de chaque page. Notez ce que vous voulez avoir en commun dans chaque page. les caractéristiques communes du site de voyage pour aller sur chaque page : titre et logo, contact, copyright, termes et conditions, choix de la langue, politique d'accessibilité.
                                                                                                              7. 
+ 
                                                                                                            7. Ensuite, dessinez une esquisse de ce à quoi vous voudriez que la structure de chaque page ressemble (elle pourrait ressembler à notre simple site Web ci-dessus.) Notez ce que chaque bloc va être. Un diagramme simple d'une structure d'exemple de site, avec un en-tête, une zone de contenu principal, deux barres latérales optionnelles et un pied de page.
                                                                                                              8. 
+ 
                                                                                                            8. Maintenant, faites un remue-méninges sur tous les autres contenus (qui ne sont pas communs à toutes les pages) que vous voulez avoir sur votre site Web - écrivez une grande liste. Une longue liste de toutes les fonctionnalités que nous pourrions mettre sur notre site de voyage, de la recherche, aux offres spéciales et aux informations spécifiques à chaque pays.
                                                                                                              9. 
+ 
                                                                                                            9. Ensuite, essayez de trier tous ces éléments de contenu par groupes, pour vous donner une idée des parties qui pourraient aller ensemble sur diverses pages. C'est très similaire à une technique appelée {{glossary("Card sorting","Tri de cartes")}}.Les articles qui devraient apparaître sur un site de vacances triés en 5 catégories : Recherche, spéciaux, informations spécifiques au pays, résultats de la recherche et choses à acheter.
                                                                                                              10. 
+ 
                                                                                                            10. Essayez maintenant d'esquisser un plan de site grossier — entourez d'un cercle chaque page de votre site et tracez des flèches pour montrer les flux de travail typiques entre pages. La page d'accueil sera probablement au centre et en lien vers la plupart sinon la totalité des autres ; la plupart des pages d'un petit site devraient être disponibles à partir de la navigation principale, bien qu'il y ait des exceptions. Vous voudrez peut-être aussi ajouter des notes sur la présentation des choses. Une carte du site montrant la page d'accueil, la page du pays, les résultats de recherche, la page spéciale, la page de paiement et la page d'achat.
                                                                                                              11. 
 
                                                                                                            
 
 
                                                                                                            Apprentissage actif : créez la cartographie de votre propre site
                                                                                                            
@@ -263,7 +261,7 @@ rendaient de ses marquages la lecture inélégante.</p>
 
                                                                                                            Essayez d'effectuer l'exercice ci-dessus pour un site web de votre propre création. Sur quel sujet aimeriez-vous faire un site ?
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard.
                                                                                                            
+
                                                                                                            Note : Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Résumé
                                                                                                            
@@ -273,7 +271,7 @@ rendaient de ses marquages la lecture inélégante.</p>
 
                                                                                                            Voir aussi
                                                                                                            
 
 
 
 
                                                                                                            {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_à_HTML")}}
                                                                                                            
diff --git a/files/fr/learn/html/introduction_to_html/getting_started/index.html b/files/fr/learn/html/introduction_to_html/getting_started/index.html
index 5636377789..dce8e89b0e 100644
--- a/files/fr/learn/html/introduction_to_html/getting_started/index.html
+++ b/files/fr/learn/html/introduction_to_html/getting_started/index.html
@@ -18,9 +18,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started
 
 
                                                                                                            {{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}
                                                                                                            
 
-
                                                                                                            Cet article porte sur les fondements du HTML, pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour exciter votre intérêt.
                                                                                                            
+
                                                                                                            Cet article porte sur les fondements du HTML, pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour exciter votre intérêt.
                                                                                                            
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :
 
 
 
 
 
 
 
                                                                                                          
+
                                                                                                          
@@ -44,14 +44,14 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started
 
                                                                                                          <p>Mon chat est très grincheux</p>
                                                                                                          
-
                                                                                                          Note : Les éléments en HTML sont insensibles à la casse, c'est-à-dire qu'ils peuvent être écrits en majuscules ou en minuscules. Par exemple, un élément {{htmlelement("title")}}} peut être écrit <title>, <TITLE>, <Title>, <TiTlE>, etc. et il fonctionnera parfaitement. La meilleure pratique, cependant, est d'écrire tous les éléments en minuscules pour des raisons de cohérence, de lisibilité et autres.
                                                                                                          
+
                                                                                                          Note : Les éléments en HTML sont insensibles à la casse, c'est-à-dire qu'ils peuvent être écrits en majuscules ou en minuscules. Par exemple, un élément {{htmlelement("title")}}} peut être écrit <title>, <TITLE>, <Title>, <TiTlE>, etc. et il fonctionnera parfaitement. La meilleure pratique, cependant, est d'écrire tous les éléments en minuscules pour des raisons de cohérence, de lisibilité et autres.
                                                                                                          
 
                                                                                                          Anatomie d'un élément HTML
                                                                                                          Regardons notre élément paragraphe d'un peu plus près :
                                                                                                          
 
-
                                                                                                          
+
                                                                                                          Les principales parties de notre élément sont :
                                                                                                          
 
@@ -68,10 +68,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started
 
 
                                                                                                          Si vous faites une erreur, vous pouvez toujours réinitialiser avec le bouton Réinitialiser. Si vous êtes vraiment coincé, appuyez sur le bouton Voir la solution pour la réponse.
                                                                                                          
 
-
 
-
                                                                                                          {{ EmbedLiveSample('Playable_code', 700, 400, "", "","hide-codepen-jsfiddle")}}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Apprentissage_actif_créer_votre_premier_élément_HTML', 700, 400, "", "","hide-codepen-jsfiddle")}}
                                                                                                          Eléments imbriqués
                                                                                                          
 
@@ -223,15 +219,15 @@ textarea.onkeyup = function(){
 
                                                                                                          {{ EmbedLiveSample('Éléments_bloc_vs_en_ligne', 700, 200, "", "") }}
                                                                                                          
-
                                                                                                          Note : HTML5 a redéfini les catégories d'éléments dans HTML5 : voir catégories de contenu d'éléments. Bien que ces définitions soient plus précises et moins ambiguës que celles qui précèdent, elles sont beaucoup plus compliquées à comprendre que « block » et « inline ». Nous nous en tiendrons donc à cela tout au long de ce sujet.
                                                                                                          
+
                                                                                                          Note : HTML5 a redéfini les catégories d'éléments dans HTML5 : voir catégories de contenu d'éléments. Bien que ces définitions soient plus précises et moins ambiguës que celles qui précèdent, elles sont beaucoup plus compliquées à comprendre que « block » et « inline ». Nous nous en tiendrons donc à cela tout au long de ce sujet.
                                                                                                          
 
                                                                                                          
-
                                                                                                           Note : les termes « block » et « inline », tels qu'utilisés dans cet article, ne doivent pas être confondus avec les types de boîtes des CSS portant les mêmes noms. Alors qu'ils sont corrélés par défaut, modifier le type d'affichage des CSS ne modifie pas la catégorie d'un élément et n'affecte pas les éléments qu'il pourrait contenir ni ceux dans lequel il pourrait être contenu. Une des raisons pour lesquelles HTML5 a abandonné ces termes était d'éviter cette confusion assez courante.
                                                                                                          
+
                                                                                                          Note : les termes « block » et « inline », tels qu'utilisés dans cet article, ne doivent pas être confondus avec les types de boîtes des CSS portant les mêmes noms. Alors qu'ils sont corrélés par défaut, modifier le type d'affichage des CSS ne modifie pas la catégorie d'un élément et n'affecte pas les éléments qu'il pourrait contenir ni ceux dans lequel il pourrait être contenu. Une des raisons pour lesquelles HTML5 a abandonné ces termes était d'éviter cette confusion assez courante.
                                                                                                          
 
                                                                                                          
-
                                                                                                          Note : Vous trouverez des pages de référence utiles incluant des listes d'éléments de niveau bloc et d'éléments en ligne.
                                                                                                          
+
                                                                                                          Note : Vous trouverez des pages de référence utiles incluant des listes d'éléments de niveau bloc et d'éléments en ligne.
                                                                                                          
 
                                                                                                          Éléments vides
                                                                                                          
@@ -248,7 +244,7 @@ textarea.onkeyup = function(){
 
 
                                                                                                          Les éléments peuvent aussi avoir des attributs, qui comme suit:
                                                                                                          
 
-
                                                                                                          &amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>
                                                                                                          
+
                                                                                                          &amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>
                                                                                                          Les attributs contiennent des informations supplémentaires sur l'élément sans qu'elles n'apparaissent dans le contenu réel. Dans ce cas, l'attribut class vous permet de donner à l'élément un nom d'identification qui peut ensuite être utilisé pour cibler l'élément afin de lui attribuer un style CSS ou un comportement particulier, par exemple.
                                                                                                          
 
@@ -274,10 +270,7 @@ textarea.onkeyup = function(){
 
 
                                                                                                          Si vous faites une erreur, vous pouvez toujours réinitialiser la zone de saisie en cliquant sur le bouton Réinitialiser. Si vous êtes vraiment coincé, cliquez sur le bouton Voir la solution pour afficher la réponse.
                                                                                                          
 
-
 
-
                                                                                                          {{ EmbedLiveSample('Playable_code2', 700, 400,"","","hide-codepen-jsfiddle") }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Apprentissage_actif_ajouter_des_attributs_à_un_élément', 700, 400,"","","hide-codepen-jsfiddle") }}
                                                                                                          Les attributs booléens
                                                                                                          
 
@@ -488,12 +480,12 @@ textarea.onkeyup = function(){
 
                                                                                                          
-
                                                                                                          Note: Vous pouvez également trouver ce modèle HTML dans le dépôt GitHub MDN Learning Area.
                                                                                                          
+
                                                                                                          Note : Vous pouvez également trouver ce modèle HTML dans le dépôt GitHub MDN Learning Area.
                                                                                                          
 
                                                                                                          Vous pouvez maintenant ouvrir ce fichier dans un navigateur Web pour voir à quoi ressemble le rendu, puis modifier le code et actualiser le navigateur pour voir le résultat. Initialement, il ressemblera à ceci:
                                                                                                          
 
-
                                                                                                          Une simple page HTML affichant Voici ma pageDans cet exercice, vous pouvez modifier le code sur votre ordinateur, comme indiqué ci-dessus, ou directement dans la fenêtre d'exemple modifiable ci-dessous (la fenêtre d'exemple modifiable représente uniquement le contenu de l'élément <body>. ) Nous aimerions que vous le fassiez en suivant les étapes suivantes :
                                                                                                          
+
                                                                                                          Une simple page HTML affichant Voici ma pageDans cet exercice, vous pouvez modifier le code sur votre ordinateur, comme indiqué ci-dessus, ou directement dans la fenêtre d'exemple modifiable ci-dessous (la fenêtre d'exemple modifiable représente uniquement le contenu de l'élément <body>. ) Nous aimerions que vous le fassiez en suivant les étapes suivantes :
                                                                                                            
  
                                                                                                          • Au début du document, juste après la balise d'ouverture <body>, ajoutez un titre principal pour le document. Il doit être entre une balise ouvrante <h1> et la balise fermante </ h1> ;
                                                                                                            • 
@@ -505,10 +497,7 @@ textarea.onkeyup = function(){
 
 
                                                                                                            Si vous faites une erreur, vous pouvez toujours recommencer en utilisant le bouton Réinitialiser. Si vous êtes vraiment coincé, appuyez sur le bouton Voir la solution pour l'afficher.
                                                                                                            
 
-
 
-
                                                                                                            {{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}
                                                                                                            
+
                                                                                                            {{ EmbedLiveSample('Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML', 700, 600, "", "", "hide-codepen-jsfiddle") }}
                                                                                                            
 
 
                                                                                                            Espace vide en HTML
                                                                                                            
 
@@ -689,7 +677,7 @@ textarea.onkeyup = function(){
 
                                                                                                            {{ EmbedLiveSample("Références_dentités", 700, 200, "", "", "hide-codepen-jsfiddle") }}
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia : Liste des entités caractère de XML et HTML.
                                                                                                            
+
                                                                                                            Note : Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia : Liste des entités caractère de XML et HTML.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Commentaires en HTML
                                                                                                            
@@ -711,7 +699,7 @@ textarea.onkeyup = function(){
 
                                                                                                            Vous avez atteint la fin de l'article — nous espérons que vous avez apprécié de faire le tour des bases du HTML ! À ce stade, vous devez comprendre à quoi ce langage ressemble, comment il fonctionne à un niveau de base, et être en mesure d'écrire quelques éléments et attributs. C'est parfait pour le moment, car dans les articles suivants, nous allons approfondir certaines des choses que vous venez de voir, et introduire de nouveaux aspects du langage. Restez à l'écoute !
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style CSS. CSS est le langage utilisé pour composer vos pages Web (par exemple, changer la police ou les couleurs, ou modifier la mise en page). HTML et CSS vont très bien ensemble, comme vous allez bientôt le découvrir.
                                                                                                            
+
                                                                                                            Note : À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style CSS. CSS est le langage utilisé pour composer vos pages Web (par exemple, changer la police ou les couleurs, ou modifier la mise en page). HTML et CSS vont très bien ensemble, comme vous allez bientôt le découvrir.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Voir aussi
                                                                                                            
diff --git a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html
index b0755184e9..213a383e88 100644
--- a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html
+++ b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html
@@ -19,9 +19,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals
 
 
                                                                                                            {{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
                                                                                                            
 
-
                                                                                                            L'un des principaux buts de HTML est de structurer du texte et lui donner du sens (ce que l'on appelle la {{glossary("sémantique")}}) afin que le navigateur puisse l'afficher correctement. Cet article explique comment {{glossary("HTML")}} peut être utilisé pour structurer une page en ajoutant des titres et des paragraphes, en marquant des emphases, en créant des listes, et bien plus encore.
                                                                                                            
+
                                                                                                            L'un des principaux buts de HTML est de structurer du texte et lui donner du sens (ce que l'on appelle la {{glossary("sémantique")}}) afin que le navigateur puisse l'afficher correctement. Cet article explique comment {{glossary("HTML")}} peut être utilisé pour structurer une page en ajoutant des titres et des paragraphes, en marquant des emphases, en créant des listes, et bien plus encore.
                                                                                                            
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                          
+
                                                                                                          
@@ -42,7 +42,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals
 
 
                                                                                                          La plupart des textes structurés comprennent des titres et des paragraphes, que ce soit dans les romans, les journaux, les livres scolaires, les magazines, etc.
                                                                                                          
 
-
                                                                                                          An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.
                                                                                                          
+
                                                                                                          An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.
                                                                                                          Le contenu structuré facilite la lecture et la rend plus agréable.
                                                                                                          
 
@@ -90,7 +90,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals
 
 
                                                                                                          Cependant, si l'on ouvre ce document dans un navigateur, il sera affiché sous forme d'un gros bloc de texte !
                                                                                                          
 
-
                                                                                                          Une page Web qui montre un mur de texte non formaté, parce qu'il n'y a pas d'éléments sur la page pour la structurer.
                                                                                                          
+
                                                                                                          Une page Web qui montre un mur de texte non formaté, parce qu'il n'y a pas d'éléments sur la page pour la structurer.
                                                                                                          Ceci est dû au fait qu'il n'y a aucun élément indiquant la structure du contenu, et donc le navigateur ne sait pas différencier ce qui est un titre d'un paragraphe. De plus :
                                                                                                          
 
@@ -109,10 +109,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals
 
 
                                                                                                          Si vous faites une erreur, vous pouvez recommencer en appuyant sur le bouton Réinitialiser. Si vous êtes bloqués, appuyez sur le bouton Voir la solution pour afficher la réponse.
                                                                                                          
 
-
 
-
                                                                                                          {{ EmbedLiveSample('Playable_code', 700, 370) }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Apprentissage_actif_structurer_le_contenu', 700, 370) }}
                                                                                                          Pourquoi a-t-on besoin de sémantique ?
                                                                                                          
 
@@ -282,11 +278,7 @@ houmous
 
 
                                                                                                          Modifiez l'exemple ci-dessous pour créer votre propre liste HTML non-ordonnée.
                                                                                                          
 
-
 
-
                                                                                                          {{ EmbedLiveSample('Playable_code_2', 700, 400) }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_à_une_liste_non-ordonnée', 700, 400) }}
                                                                                                          Listes ordonnées
                                                                                                          
 
@@ -430,11 +421,7 @@ Roulez sur 300 mètres, l'école est sur votre droite
                                                                                                          Modifiez l'exemple ci‑dessous pour créer votre propre liste HTML ordonnée.
                                                                                                          
 
-
 
-
                                                                                                          {{ EmbedLiveSample('Playable_code_3', 700, 500) }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Apprentissage_actif_baliser_une_liste_ordonnée', 700, 500) }}
                                                                                                          Apprentissage actif : mettre des balises pour une recette de cuisine
                                                                                                          Si vous êtes arrivé jusqu'ici dans l'article, vous avez toutes les connaissances nécessaires pour mettre en forme la recette de cuisine donnée en exemple. Vous pouvez soit télécharger le fichier text-start.html et le modifier de votre côté, soit faire l'exercice dans l'exemple modifiable ci-dessous. Il est conseillé de le modifier localement, sur votre machine, car vous pourrez alors enregistrer votre travail. Si vous utilisez l'exemple modifiable de cette page, le travail sera perdu à l'ouverture suivante de la page. Chaque méthode a ses avantages et ses inconvénients.
                                                                                                          
 
-
 
-
                                                                                                          {{ EmbedLiveSample('Playable_code_4', 700, 500) }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_pour_une_recette_de_cuisine', 700, 500) }}
                                                                                                          Si vous êtes bloqué, vous pouvez cliquer sur le bouton Voir la solution, ou alors regarder l'exemple text-complete.html sur le dépôt GitHub.
                                                                                                          
 
@@ -775,14 +757,11 @@ function insertAtCaret(text) {
 
                                                                                                          <p>Ce liquide est <strong>hautement toxique</strong> —
 si vous en buvez, <strong>vous pourriez en <em>mourir</em></strong>.</p>
                                                                                                          
 
-
                                                                                                          Apprentissage actif : soulignez l'important !
                                                                                                          
+
                                                                                                          Apprentissage actif : soulignez l'important
                                                                                                          Dans ce paragraphe d'apprentissage actif, nous avons donné un exemple modifiable. À l'intérieur, nous aimerions que vous essayiez d'ajouter de l'emphase et de l'importance aux mots quand vous pensez qu'ils en ont besoin, juste pour une bonne pratique.
                                                                                                          
 
-
 
-
                                                                                                          {{ EmbedLiveSample('Playable_code_5', 700, 500) }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample("Apprentissage_actif_soulignez_l'important", 700, 500) }}
                                                                                                          Italique, gras, soulignement…
                                                                                                          
 
@@ -916,12 +894,12 @@ textarea.onkeyup = function(){
 
 
                                                                                                            
  
                                                                                                          • {{HTMLElement('i')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec l'italique : des mots étrangers, une désignation taxonomique, des termes techniques, une pensée…
                                                                                                            • 
- 
                                                                                                          • {{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras : des mots‑clés, des noms de produits, une phrase liminaire…
                                                                                                            • 
+ 
                                                                                                          • {{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras : des mots‑clés, des noms de produits, une phrase liminaire…
                                                                                                            • 
  
                                                                                                          • {{HTMLElement('u')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec le soulignement : noms propres, mauvaise orthographe...
                                                                                                            • 
 
                                                                                                          
-
                                                                                                          Un petit avertissement à propos du soulignement : les gens associent fortement soulignement et hyperliens. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément <u> que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait.
                                                                                                          
+
                                                                                                          Note : Un petit avertissement à propos du soulignement : les gens associent fortement soulignement et hyperliens. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément <u> que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait.
                                                                                                          
 
                                                                                                          <!-- noms scientifiques -->
diff --git a/files/fr/learn/html/introduction_to_html/index.html b/files/fr/learn/html/introduction_to_html/index.html
index fdd62cd744..d4a5b51dbd 100644
--- a/files/fr/learn/html/introduction_to_html/index.html
+++ b/files/fr/learn/html/introduction_to_html/index.html
@@ -16,14 +16,14 @@ original_slug: Apprendre/HTML/Introduction_à_HTML
 ---
 
                                                                                                          {{LearnSidebar}}
                                                                                                          
 
-
                                                                                                          Dans son cœur, {{glossary("HTML")}} est un langage vraiment simple, composé d'éléments appliquables à des fragments de texte dans un document pour leur donner un sens différent (est-ce un paragraphe ? est-ce une liste à puces ? est-ce une partie de tableau ?), pour structurer un document en sections logiques (a‑t‑il un en-tête ? est-il sur trois colonnes ? a-t-il un menu de navigation ?) et pour intégrer du contenu comme images ou vidéos dans une page. Ce module est une introduction aux deux premiers concepts ; il présente les notions fondamentales et la syntaxe à connaître pour comprendre le HTML.
                                                                                                          
+
                                                                                                          Dans son cœur, {{glossary("HTML")}} est un langage vraiment simple, composé d'éléments appliquables à des fragments de texte dans un document pour leur donner un sens différent (est-ce un paragraphe ? est-ce une liste à puces ? est-ce une partie de tableau ?), pour structurer un document en sections logiques (a‑t‑il un en-tête ? est-il sur trois colonnes ? a-t-il un menu de navigation ?) et pour intégrer du contenu comme images ou vidéos dans une page. Ce module est une introduction aux deux premiers concepts ; il présente les notions fondamentales et la syntaxe à connaître pour comprendre le HTML.
                                                                                                          
 
 
                                                                                                          Prérequis
                                                                                                          
 
 
                                                                                                          Il n'y a pas besoin de connaissances préalables en HTML pour parcourir ce module, mais vous devez au moins être familier des ordinateurs et d'une utilisation passive du Web (càd. juste le parcourir et consommer son contenu). Vous devriez avoir un environnement de travail en place tel que détaillé dans cet article et comprendre comment créer et gérer des fichiers tel qu'expliqué dans cet autre article — ces deux articles font partie du module Démarrer avec le Web qui s'adresse aux débutants.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Si vous travaillez sur un ordinateur, tablette ou autre appareil sur lequel il n'est pas posssible de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code grâce à des outils en ligne comme JSBin ou Thimble.
                                                                                                          
+
                                                                                                          Note : Si vous travaillez sur un ordinateur, tablette ou autre appareil sur lequel il n'est pas posssible de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code grâce à des outils en ligne comme JSBin ou Thimble.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Guides
                                                                                                          
diff --git a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html
index 748b35d142..faa34e068d 100644
--- a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html
+++ b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html
@@ -16,9 +16,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter
 
 
                                                                                                          {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_à_HTML")}}
                                                                                                          
 
-
                                                                                                          Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de <head> en HTML.
                                                                                                          
+
                                                                                                          Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de <head> en HTML.
                                                                                                          
 
-
                                                                                                          
  
   
                                                                                                          
    Pré-requis:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                          
+
                                                                                                          
diff --git a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
index e3ce2ceabc..0fa7c74921 100644
--- a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
+++ b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
@@ -7,9 +7,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content
 
                                                                                                          {{LearnSidebar}}
                                                                                                          
 {{PreviousNext("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}
                                                                                                          
 
-
                                                                                                          Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page.
                                                                                                          
+
                                                                                                          Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page.
                                                                                                          
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :
                                                                                                          
+
                                                                                                          
@@ -61,7 +61,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content
  
                                                                                                        5. appliquer à la page les CSS fournies en ajoutant un élément {{htmlelement("link")}} juste au‑dessous de celui existant.
                                                                                                          6. 
 
-
                                                                                                          Conseils et astuces
                                                                                                          
+
                                                                                                          Conseils et astuces
                                                                                                            
  
                                                                                                          • Utilisez le « W3C HTML validator » pour valider votre HTML ; vous aurez des points bonus si la validation s'opère autant que possible (la ligne « googleapis » est une ligne utilisée pour importer des polices personnalisées dans la page à partir du service « Google Fonts » ; elle ne sera pas validée, donc ne vous en inquiétez pas).
                                                                                                            • 
@@ -74,7 +74,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content
 
 
                                                                                                            La capture d'écran suivante montre un exemple de ce à quoi la page d'accueil peut ressembler après avoir été balisée.
                                                                                                            
 
-
                                                                                                            L'exemple de l'exercice complété ; une page web unique sur l'observation des oiseaux, comprenant un en-tête "Observons les oiseaux", des photos d'oiseaux et un message de bienvenue.
                                                                                                            
+
                                                                                                            L'exemple de l'exercice complété ; une page web unique sur l'observation des oiseaux, comprenant un en-tête "Observons les oiseaux", des photos d'oiseaux et un message de bienvenue.
                                                                                                            
 
 
                                                                                                            Évaluation
                                                                                                            
 
diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
index 8bb80d773c..af254c337d 100644
--- a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
+++ b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
@@ -8,9 +8,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML
 
 
                                                                                                            {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}
                                                                                                            
 
-
                                                                                                            L'en-tête {{glossary("Head", "head")}} dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML avec des CSS), des liens aux favicons personnalisés et d'autres méta-données (auteur du document, mots-clés décrivant le document, etc.). Cet article porte sur tout ceci et plus, pour vous donner de bonnes bases pour gérer les balises et le code qui devraient figurer dans l'en-tête.
                                                                                                            
+
                                                                                                            L'en-tête {{glossary("Head", "head")}} dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML avec des CSS), des liens aux favicons personnalisés et d'autres méta-données (auteur du document, mots-clés décrivant le document, etc.). Cet article porte sur tout ceci et plus, pour vous donner de bonnes bases pour gérer les balises et le code qui devraient figurer dans l'en-tête.
                                                                                                            
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :
 
 
 
                                                                                                          
+
                                                                                                          
@@ -25,9 +25,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML
 
 
                                                                                                          Qu'est-ce que l'en-tête de HTML ?
                                                                                                          
 
-
                                                                                                          Revoyons le document HTML de base de l' article précédent:
                                                                                                          
+
                                                                                                          Revoyons le document HTML de base de l' article précédent:
                                                                                                          
 
-
                                                                                                          <!DOCTYPE html>
+
                                                                                                          <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -40,12 +40,12 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML
 
 
                                                                                                          Le contenu de l'en-tête HTML {{htmlelement("head")}} — à la difference du contenu de l'élément {{htmlelement("body")}} (affiché quand la page est chargée par le navigateur) — n'est pas affiché dans la page du navigateur. Le travail de la balise <head> est de contenir les {{glossary("Metadata", "métadonnées")}} à propos du document. Dans l'exemple ci-dessus, l'en-tête est plutôt petit :
                                                                                                          
 
-
                                                                                                          <head>
+
                                                                                                          <head>
   <meta charset="utf-8">
   <title>Ma page test</title>
 </head>
                                                                                                          
 
-
                                                                                                          Toutefois dans les pages plus importantes, l'en-tête peut contenir un grand nombre d'éléments — essayez d'aller sur certains de vos sites web préférés et utilisez les outils de développement pour vérifier le contenu de l'en-tête. Notre objectif ici n'est pas de vous montrer comment utiliser tout ce qui peut être mis dans l'élément <head>, mais plutôt de vous apprendre à utiliser les outils les plus évidents, que vous souhaiterez inclure dans l'en-tête, et vous les rendre plus familiers. Commençons.
                                                                                                          
+
                                                                                                          Toutefois dans les pages plus importantes, l'en-tête peut contenir un grand nombre d'éléments — essayez d'aller sur certains de vos sites web préférés et utilisez les outils de développement pour vérifier le contenu de l'en-tête. Notre objectif ici n'est pas de vous montrer comment utiliser tout ce qui peut être mis dans l'élément <head>, mais plutôt de vous apprendre à utiliser les outils les plus évidents, que vous souhaiterez inclure dans l'en-tête, et vous les rendre plus familiers. Commençons.
                                                                                                          
 
 
                                                                                                          Ajouter un titre
                                                                                                          
 
@@ -67,7 +67,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML
   
  
  
                                                                                                        6. Maintenant, ouvrez le fichier dans votre navigateur. Vous devriez voir quelque chose comme ça :
-  
                                                                                                          Une simple page web page dont <title> a la valeur «Élément <title>» et <h1> la valeur Élément <h1>.Il devrait désormais être évident de situer où le contenu de <h1> apparaît et où celui de <title> apparaît !
                                                                                                          
+  
                                                                                                          Une simple page web page dont <title> a la valeur «Élément <title>» et <h1> la valeur Élément <h1>.Il devrait désormais être évident de situer où le contenu de <h1> apparaît et où celui de <title> apparaît !
                                                                                                          
  
                                                                                                          7. 
  
                                                                                                        7. 
   
                                                                                                          Vous devriez aussi essayer d'ouvrir ce code dans votre éditeur, modifier le contenu de ces éléments, puis rafraîchir la page dans votre navigateur. Amusez-vous avec ces fonctions.
                                                                                                          
@@ -76,7 +76,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML
 
 
                                                                                                          Le contenu de l'élément <title> est aussi utilisé de manières différentes . Par exemple, si vous tentez de marquer cette page dans vos Marques-pages ( Marques-pages > Marquer cette page ou bien l'étoile dans la barre d'outils de Firefox), vous verrez que le contenu de <title> est suggéré comme nom pour le marque-page.
                                                                                                          
 
-
                                                                                                          Une page Web marquée dans Firefox ; le nom du signet a été automatiquement rempli avec le contenu de l'élément <title>.
                                                                                                          
+
                                                                                                          Une page Web marquée dans Firefox ; le nom du signet a été automatiquement rempli avec le contenu de l'élément <title>.
                                                                                                          
 
 
                                                                                                          Le contenu de <title> est aussi utilisé dans les résultats de recherches, comme vous le verrez ci‑dessous.
                                                                                                          
 
@@ -88,27 +88,27 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML
 
 
                                                                                                          Dans l'exemple que nous avons vu au-dessus, cette ligne était présente :
                                                                                                          
 
-
                                                                                                          <meta charset="utf-8">
                                                                                                          
+
                                                                                                          <meta charset="utf-8">
                                                                                                          
 
 
                                                                                                          Cet élément définit l'encodage des caractères du document - le jeu de caractères qu'il est autorisé à utiliser. utf-8  est un jeu de caractères universel qui inclut à peu près tous les caractères des langues humaines. Cela signifie que votre page web sera capable de gérer l'affichage de n'importe quelle langue ; c'est donc une bonne idée de le définir dans chaque page web que vous créez ! Par exemple, votre page peut gérer l'anglais et le japonais sans aucun souci :
                                                                                                          
 
-
                                                                                                          Une page Web contenant des caractères français et japonais, le jeu de caractères étant universel ou utf-8. Les deux langues s'affichent correctement.Si vous définissez votre encodage de caractères en ISO-8859-1 , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement perturbé :
                                                                                                          
+
                                                                                                          Une page Web contenant des caractères français et japonais, le jeu de caractères étant universel ou utf-8. Les deux langues s'affichent correctement.Si vous définissez votre encodage de caractères en ISO-8859-1 , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement perturbé :
                                                                                                          
 
-
                                                                                                          Une page Web contenant des caractères français et japonais, l'encodage des caractères étant réglé sur ISO latin. Les caractères japonais ne s'affichent pas correctement.
                                                                                                          
+
                                                                                                          Une page Web contenant des caractères français et japonais, l'encodage des caractères étant réglé sur ISO latin. Les caractères japonais ne s'affichent pas correctement.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Certains navigateurs (par ex. Chrome) corrigent automatiquement les encodages incorrects, ainsi selon le navigateur utilisé, ce problème pourrait vous passer totalement inaperçu. Vous devriez quand même définir un encodage utf-8 sur votre page de toutes façons pour éviter tout problème potentiel avec d'autres navigateurs.
                                                                                                          
+
                                                                                                          Note : Certains navigateurs (par ex. Chrome) corrigent automatiquement les encodages incorrects, ainsi selon le navigateur utilisé, ce problème pourrait vous passer totalement inaperçu. Vous devriez quand même définir un encodage utf-8 sur votre page de toutes façons pour éviter tout problème potentiel avec d'autres navigateurs.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Apprentissage actif : expérience avec l'encodage des caractères
                                                                                                          
 
-
                                                                                                          Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur <title> (la page  title-example.html), faites un essai de modification de la valeur de la métadonnée charset en ISO-8859-1 et ajoutez le japonais à votre page. Voici le code que nous avons utilisé :
                                                                                                          
+
                                                                                                          Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur <title> (la page  title-example.html), faites un essai de modification de la valeur de la métadonnée charset en ISO-8859-1 et ajoutez le japonais à votre page. Voici le code que nous avons utilisé :
                                                                                                          
 
-
                                                                                                          <p>Japanese example: ご飯が熱い。</p>
                                                                                                          
+
                                                                                                          <p>Japanese example: ご飯が熱い。</p>
                                                                                                          
 
 
                                                                                                          Ajouter le nom de l'auteur et une description
                                                                                                          
 
-
                                                                                                          De nombreux éléments <meta> icontiennent les attributs name et content :
                                                                                                          
+
                                                                                                          De nombreux éléments <meta> icontiennent les attributs name et content :
                                                                                                          
 
 
                                                                                                            
  
                                                                                                          • name définit le type de méta élément ; le type d'informations contenu.
                                                                                                            • 
@@ -117,10 +117,10 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML
 
 
                                                                                                            Il est utile d'inclure ces deux méta-éléments dans votre page pour définir son auteur et donner une courte description de son contenu. Voyons un exemple :
                                                                                                            
 
-
                                                                                                            <meta name="author" content="Chris Mills">
-<meta name="description" content="La Zone Apprentissage des documents web
-du MDN a pour but de donner aux débutants du Web tout ce qu'ils doivent
-savoir pour commencer le développement de pages webs et d'applications.">
                                                                                                            
+
                                                                                                            <meta name="author" content="Chris Mills">
+<meta name="description" content="La Zone Apprentissage des documents web
+du MDN a pour but de donner aux débutants du Web tout ce qu'ils doivent
+savoir pour commencer le développement de pages webs et d'applications.">
                                                                                                            
 
 
                                                                                                            Préciser l'auteur peut être intéressant dans certains cas : il est utile de savoir qui a écrit la page pour le contacter et lui poser des questions à propos du contenu. Certains systèmes de gestion de contenu procèdent à l'extraction automatique des informations sur l'auteur de la page et les rendent disponibles à cette fin.
                                                                                                            
 
@@ -134,24 +134,24 @@ savoir pour commencer le développement de pages webs et d'applicationsAllez sur la page d'accueil de Mozilla Developer Network.
  
                                                                                                          • Regardez le source de la page (Clic droit/Ctrl, choissisez « Code source de la page » dans le menu contextuel.)
                                                                                                            • 
  
                                                                                                          • Trouvez la balise méta description. Elle ressemble à ceci :
-  
                                                                                                            <meta name="description" content="MDN Web Docs fournit
+  
                                                                                                            <meta name="description" content="MDN Web Docs fournit
  des informations sur les technologies web ouvertes comme HTML,
  CSS et les API utilisées pour les sites web et les applications
  web. On y trouve également de la documentation destinées aux
  développeurs à propos des produits Mozilla tels que les
- outils de développement de Firefox.">
                                                                                                            
+ outils de développement de Firefox.">
                                                                                                            
  
                                                                                                            • 
  
                                                                                                          • Maintenant, cherchez « Mozilla Developer Network » sur votre moteur de recherche favori (nous avons utilisé Google). Vous remarquerez que le contenu de la <meta> description et de l'élément <title> sont utilisés dans les résultats de recherche. Cela vaut vraiment la peine !
-  
                                                                                                            Une page de recherche Google pour "MDN web docs"
                                                                                                            
+  
                                                                                                            Une page de recherche Google pour "MDN web docs"
                                                                                                            
  
                                                                                                            • 
 
 
 
                                                                                                            
-
                                                                                                            Note : Avec Google, vous verrez quelques sous-pages pertinentes de MDN listées sous le lien de la page d'accueil — ce sont des liens du site ; ils sont configurables dans les outils de Google's webmaster tools - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google.
                                                                                                            
+
                                                                                                            Note : Avec Google, vous verrez quelques sous-pages pertinentes de MDN listées sous le lien de la page d'accueil — ce sont des liens du site ; ils sont configurables dans les outils de Google's webmaster tools - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Plusieurs fonctions <meta> ne sont plus utilisées. Par exemple, l'élément <meta> keyword (<meta name= "keywords" content="mettez, vos, mot-clés, ici">) — qui est censé fournir des mots-clés pour les moteurs de recherche, afin de déterminer la pertinence de la page pour différents termes de recherche — est ignoré par les moteurs de recherche, car les polluposteurs remplissaient simplement la liste avec des centaines de mots-clés, biaisant les résultats.
                                                                                                            
+
                                                                                                            Note : Plusieurs fonctions <meta> ne sont plus utilisées. Par exemple, l'élément <meta> keyword (<meta name= "keywords" content="mettez, vos, mot-clés, ici">) — qui est censé fournir des mots-clés pour les moteurs de recherche, afin de déterminer la pertinence de la page pour différents termes de recherche — est ignoré par les moteurs de recherche, car les polluposteurs remplissaient simplement la liste avec des centaines de mots-clés, biaisant les résultats.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Autres types de métadonnées
                                                                                                            
@@ -160,23 +160,23 @@ savoir pour commencer le développement de pages webs et d'applicationsPar exemple, Open Graph Data est un protocole de métadonnées que Facebook a inventé pour fournir des métadonnées plus riches pour les sites webs. Dans le code source de MDN vous trouverez ceci :
                                                                                                            
 
-
                                                                                                            <meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
-<meta property="og:description" content="MDN Web Docs fournit des
+
                                                                                                            <meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
+<meta property="og:description" content="MDN Web Docs fournit des
 informations sur les technologies web ouvertes comme HTML, CSS et les API
 utilisées pour les sites web et les applications web. On y trouve également
 de la documentation destinées aux développeurs à propos des produits
-Mozilla tels que les outils de développement de Firefox.">
+Mozilla tels que les outils de développement de Firefox.">
 <meta property="og:title" content="Mozilla Developer Network">
                                                                                                            
 
 
                                                                                                            En conséquence, lorsque vous faites un lien à MDN sur Facebook, le lien apparaît avec une image et une description : une expérience plus riche pour les utilisateurs.
                                                                                                            
 
-
                                                                                                            Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter a aussi une métadonnée propriétaire, qui a un effet similaire quand l'URL du site est affichée sur twitter.com. Par exemple:
                                                                                                            
+
                                                                                                            Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter a aussi une métadonnée propriétaire, qui a un effet similaire quand l'URL du site est affichée sur twitter.com. Par exemple:
                                                                                                            
 
-
                                                                                                            <meta name="twitter:title" content="Mozilla Developer Network">
                                                                                                            
+
                                                                                                            <meta name="twitter:title" content="Mozilla Developer Network">
                                                                                                            
 
 
                                                                                                            Ajouter des icônes personnalisées à un site
                                                                                                            
 
-
                                                                                                            Pour enrichir davantage le design de votre site, vous pouvez ajouter des références à des icônes personnalisées dans vos métadonnées et celles-ci seront affichées dans certains contextes.
                                                                                                            
+
                                                                                                            Pour enrichir davantage le design de votre site, vous pouvez ajouter des références à des icônes personnalisées dans vos métadonnées et celles-ci seront affichées dans certains contextes.
                                                                                                            
 
 
                                                                                                            La petite favicône, qui existe depuis de nombreuses années, a été la première icône de ce type, une icône de 16 x 16 pixels utilisée dans de multiples endroits. Vous verrez des favicônes affichés dans chaque onglet du navigateur pour chaque page ouverte et à côté des pages marquées dans le panneau des signets.
                                                                                                            
 
@@ -185,17 +185,17 @@ Mozilla tels que les outils de développement de Firefox.">                                                                                                            
 
                                                                                                              
  
                                                                                                            1. Enregistrez-la dans le même répertoire que la page d'index du site, sous le format .ico (la plupart des navigateurs prendront en charge les favicônes dans des formats plus communs comme .gif ou .png, mais utiliser le format ICO assurera son fonctionnement depuis Internet Explorer 6.)
                                                                                                              2. 
  
                                                                                                            2. Ajoutez la ligne suivante dans votre <head> du HTML pour la référencer :
-  
                                                                                                              <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
                                                                                                              
+  
                                                                                                              <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
                                                                                                              
  
                                                                                                              3. 
 
                                                                                                            
 
 
                                                                                                            Voici un exemple de favicône dans un panneau de favoris :
                                                                                                            
 
-
                                                                                                            Le panneau de signets Firefox, montrant un exemple de signet avec une favicône affichée à côté.
                                                                                                            
+
                                                                                                            Le panneau de signets Firefox, montrant un exemple de signet avec une favicône affichée à côté.
                                                                                                            
 
 
                                                                                                            Il existe de nombreux autres types d'icônes à considérer aussi actuellement. Par exemple, vous trouverez ceci dans le code source de la page d'accueil MDN :
                                                                                                            
 
-
                                                                                                            <!-- troisième-génération iPad avec haute-résolution Retina display: -->
+
                                                                                                            <!-- troisième-génération iPad avec haute-résolution Retina display: -->
 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
 <!-- iPhone avec haute-résolution Retina display: -->
 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">
@@ -218,15 +218,15 @@ Mozilla tels que les outils de développement de Firefox.">
  
                                                                                                          • 
   
                                                                                                            L'élément {{htmlelement("link")}} se situe toujours dans l'en-tête du document. Il comporte deux attributs, rel="stylesheet" indiquant qu'il s'agit de la feuille de style du document, et href indiquant le chemin d'accès au fichier la contenant :
                                                                                                            
 
-  
                                                                                                            <link rel="stylesheet" href="mon_fichier_css.css">
                                                                                                            
+  
                                                                                                            <link rel="stylesheet" href="mon_fichier_css.css">
                                                                                                            
  
                                                                                                            • 
  
                                                                                                          • 
   
                                                                                                            L'élément {{htmlelement("script")}} ne doit pas aller dans l'en-tête ; en fait, il est souvent préférable de le placer au bas du corps du document (juste avant la balise de clôture </body>), pour s'assurer que tout le contenu HTML a été lu par le navigateur avant de lui appliquer le JavaScript (si JavaScript essaie d'accéder à un élément qui n'existe pas encore, le navigateur déclenchera une erreur).
                                                                                                            
 
-  
                                                                                                            <script src="mon-fichier-js.js"></script>
                                                                                                            
+  
                                                                                                            <script src="mon-fichier-js.js"></script>
                                                                                                            
 
   
                                                                                                            
-  
                                                                                                            Note : L'élément <script> peut ressembler à un élément vide, mais ce n'est pas le cas : il faut donc une balise de fermeture. Au lieu de pointer vers un fichier de script externe, vous pouvez également choisir de mettre le code du script dans le HTML à l'intérieur d'un élément <script>.
                                                                                                            
+  
                                                                                                            Note : L'élément <script> peut ressembler à un élément vide, mais ce n'est pas le cas : il faut donc une balise de fermeture. Au lieu de pointer vers un fichier de script externe, vous pouvez également choisir de mettre le code du script dans le HTML à l'intérieur d'un élément <script>.
                                                                                                            
   
                                                                                                            
  
                                                                                                            • 
 
                                                                                                          
@@ -241,7 +241,7 @@ Mozilla tels que les outils de développement de Firefox.">
 
 
                                                                                                          Si a été fait correctement, après avoir enregistré le HTML, puis actualisé la page, vous verrez que les choses ont changé :
                                                                                                          
 
-
                                                                                                          Exemple montrant une page sur laquelle on a appliqué du CSS et du JavaScript. Le CSS a rendu la page verte, alors que le JavaScript a ajouté une liste dynamique à la page.
                                                                                                          
+
                                                                                                          Exemple montrant une page sur laquelle on a appliqué du CSS et du JavaScript. Le CSS a rendu la page verte, alors que le JavaScript a ajouté une liste dynamique à la page.
                                                                                                          
 
 
                                                                                                            
  
                                                                                                          • Le JavaScript a ajouté une liste vide à la page. Maintenant, lorsque vous cliquez n'importe où sur la liste, une boîte de dialogue s'ouvre pour vous permettre de saisir un texte. Lorsque vous appuyez sur le bouton OK, un nouvel élément de la liste est ajouté contenant le texte saisi. Lorsque vous cliquez sur un élément de liste existant, la boîte de dialogue affiche son contenu pour vous permettre de le modifier.
                                                                                                            • 
@@ -249,20 +249,20 @@ Mozilla tels que les outils de développement de Firefox.">
 
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Si vous êtes coincé dans cet exercice et que vous ne pouvez pas obtenir le CSS / JS à appliquer, essayez de vérifier notre exemple de page css-and-js.html .
                                                                                                          
+
                                                                                                          Note : Si vous êtes coincé dans cet exercice et que vous ne pouvez pas obtenir le CSS / JS à appliquer, essayez de vérifier notre exemple de page css-and-js.html .
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Définition de la langue principale du document
                                                                                                          
 
-
                                                                                                          Enfin, il convient de mentionner que vous pouvez (et devrez vraiment) définir la langue de votre page. Cela peut être fait en ajoutant l'attribut lang à la balise ouvrante HTML (voir meta-example.html.)
                                                                                                          
+
                                                                                                          Enfin, il convient de mentionner que vous pouvez (et devrez vraiment) définir la langue de votre page. Cela peut être fait en ajoutant l'attribut lang à la balise ouvrante HTML (voir meta-example.html.)
                                                                                                          
 
-
                                                                                                          <html lang="fr">
                                                                                                          
+
                                                                                                          <html lang="fr">
                                                                                                          
 
 
                                                                                                          Ceci est utile de plusieurs façons. Votre document sera indexé plus efficacement par les moteurs de recherche si son langage est défini (ce qui lui permet d'apparaître correctement dans les résultats spécifiques à la langue, par exemple) et il est utile pour les personnes visuellement déficientes utilisant un lecteur d'écran (par exemple, le mot « six » existe en français et en anglais, mais se prononce différemment.)
                                                                                                          
 
 
                                                                                                          Vous pouvez également définir des sous-sections de votre document pour qu'elles soient reconnues comme étant en différentes langues. Par exemple, nous pourrions définir la partie en langue japonaise pour qu'elle soit reconnue comme telle, de la manière suivante :
                                                                                                          
 
-
                                                                                                          <p>Exemple en japonais : <span lang="jp">ご飯が熱い。</span>.</p>
                                                                                                          
+
                                                                                                          <p>Exemple en japonais : <span lang="jp">ご飯が熱い。</span>.</p>
                                                                                                          
 
 
                                                                                                          Ces codes sont définis par la norme ISO 639-1. Vous en trouverez plus sur Etiquettes langues en HTML et XML (en).
                                                                                                          
 
diff --git a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
index 5c2520b633..e8cddd0909 100644
--- a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
+++ b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
@@ -14,13 +14,9 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_pag
 
                                                                                                          {{LearnSidebar}}
                                                                                                          
  {{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
                                                                                                          
 
-
                                                                                                           
                                                                                                          
-
-
                                                                                                          
 
                                                                                                          Les graphiques vectoriels sont les images adaptatives par excellence : légères et redimensionnables à volonté. Dans cet article, nous verrons comment intégrer des images vectorielles dans une page web.
                                                                                                          
-
                                                                                                          
 
-
                                                                                                          8. 
  
   
                                                                                                          
    Prérequis:
                                                                                                          
+
                                                                                                          
@@ -35,7 +31,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_pag
 
 
                                                                                                          Qu'est-ce que SVG ? Qu'apporte-t-il ?
                                                                                                          
 
-
                                                                                                          SVG est un langage basé sur {{glossary("XML")}} qui permet de décrire des images vectorielles. Commençons par définir ce qu'est une image vectorielle.
                                                                                                          
+
                                                                                                          SVG est un langage basé sur {{glossary("XML")}} qui permet de décrire des images vectorielles. Commençons par définir ce qu'est une image vectorielle.
                                                                                                          
 
 
                                                                                                          Certaines images (appelées images « matricielles ») sont en fait des tableaux de carrés colorés (appelés pixels). Si on agrandit une image de ce type, à un moment, on arrive à distinguer ces carrés et une ligne diagonale deviendra un « escalier » crénelé.
                                                                                                          
 
@@ -46,7 +42,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_pag
 
                                                                                                          Il est possible de coder le SVG à la main grâce à un éditeur de texte. En revanche, pour réaliser des images moyennement complexes, il est préférable d'utiliser un éditeur graphique dédié, comme Inkscape. Malheureusement, les téléphones ne permettent pas de prendre des photos qui soient des images vectorielles mais Inkscape possède une fonctionnalité appelée Trace Bitmap qui permet de passer d'une image matricielle à une image vectorielle. Attention à l'utilisation de fichiers SVG complexes, le traitement de ces fichiers par le navigateur pourra entraîner une baisse des performances.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Sous Inkscape, préférez le format « SVG simple » pour sauvegarder vos fichiers, cela permet d'économiser de l'espace. Pour plus d'informations sur la préparation, lire cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web.
                                                                                                          
+
                                                                                                          Note : Sous Inkscape, préférez le format « SVG simple » pour sauvegarder vos fichiers, cela permet d'économiser de l'espace. Pour plus d'informations sur la préparation, lire cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          La méthode rapide : {{htmlelement("img")}}
                                                                                                          
@@ -80,12 +76,13 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_pag
 
 
 
                                                                                                          
+  
                                                                                                          Note :
                                                                                                          
 
                                                                                                            
  
                                                                                                          • Les images SVG peuvent tout à fait être utilisées comme images d'arrière-plan dans du CSS. Cette méthode possèdera les mêmes limites que celles qui viennent d'être décrites ici (pour la méthode où on intègre une image SVG via <img>).
 
-  
                                                                                                            background: url("image-de-secours.png");
-background-image: url(image.svg);
-background-size: contain;
                                                                                                            
+  
                                                                                                            background: url("image-de-secours.png");
+background-image: url(image.svg);
+background-size: contain;
                                                                                                            
  
                                                                                                            • 
  
                                                                                                          • Si vos fichiers SVG ne s'affichent pas, cela peut vouloir dire que votre serveur n'est pas correctement paramétré. Dans ce cas, cet article pourra vous aider à résoudre le problème.
                                                                                                            • 
 
                                                                                                          
diff --git a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html
index 762a36442a..abda8ddf31 100644
--- a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html
+++ b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html
@@ -19,13 +19,13 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
 
                                                                                                          {{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
                                                                                                          
 
-
                                                                                                          Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée.  Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}},  utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} .
                                                                                                          
+
                                                                                                          Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée.  Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}},  utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} .
                                                                                                          
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :
                                                                                                          
+
                                                                                                          
-   
+   
@@ -39,7 +39,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
                                                                                                          Pour mettre une image simple sur une page web, nous utiliserons l'élément {{htmlelement("img")}}.  C'est un {{glossary("empty element","élément vide")}} (ce qui signifie qu'il ne contient ni texte ni balise de fermeture) qui demande au moins un attribut pour fonctionner — src (souvent appelé par son nom entier:  source). L'attribut src contient un chemin pointant vers l'image que vous voulez intégrer, qui peut être une URL absolue ou relative, de la même manière que l'élément  {{htmlelement("a")}}  href= attribue des valeurs.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: Vous devriez lire  Une brève présentation des URL et des chemins  pour vous rafraîchir la mémoire avant de continuer.
                                                                                                          
+
                                                                                                          Note : Vous devriez lire  Une brève présentation des URL et des chemins  pour vous rafraîchir la mémoire avant de continuer.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Donc, par exemple, si votre image s'appelle dinosaur.jpg, et qu'elle est située dans le même répertoire que votre page HTML, vous pouvez intégrer cette image comme ceci (URL relative) :
                                                                                                          
@@ -53,7 +53,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
                                                                                                          Ainsi de suite.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. dinosaur.jpg est infiniment mieux que img835.png.
                                                                                                          
+
                                                                                                          Note : Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. dinosaur.jpg est infiniment mieux que img835.png.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Vous pouvez intégrer l'image en utilisant son URL absolue, par exemple :
                                                                                                          
@@ -63,7 +63,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
                                                                                                          Ce n'est pas trés efficace, cela fait travailler le navigateur plus qu'il ne devrait, il cherche l'adresse IP depuis le serveur DNS à chaque fois etc... Vous devriez autant que possible garder vos images du site sur le même serveur que la page HTML.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Attention ! : La plupart des images ont des droits d'auteur. N'affichez jamais une image sur votre site à moins que :
                                                                                                          
+
                                                                                                          Attention : La plupart des images ont des droits d'auteur. N'affichez jamais une image sur votre site à moins que :
                                                                                                          
  
                                                                                                          
  1) Ce soit votre image (vous en êtes le créateur),
                                                                                                          
  2) vous ayez reçu une permission explicite et écrite du propriètaire de l'image ou,
                                                                                                          
@@ -74,14 +74,14 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
 
                                                                                                          Le code au-dessus vous donnera, à peu prés, le résultat suivant :
                                                                                                          
 
-
                                                                                                          A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it
                                                                                                          
+
                                                                                                          A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même.
                                                                                                          
+
                                                                                                          Note : Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: Vous trouverez les exemples finis de cette section sur Github (regardez aussi le  code source .)
                                                                                                          
+
                                                                                                          Note : Vous trouverez les exemples finis de cette section sur Github (regardez aussi le  code source .)
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Texte alternatif
                                                                                                          
@@ -94,7 +94,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
 
                                                                                                          La manière la plus simple de tester votre texte alt est de mal épeler votre nom de fichier intentionnellement. Si dans l'exemple, la photo était épelée dinosooooor.jpg, le navigateur ne l'afficherait pas mais afficherait le texte alt à la place :
                                                                                                          
 
-
                                                                                                          The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.
                                                                                                          
+
                                                                                                          The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.
                                                                                                          
 
 
                                                                                                          Pourquoi vous verrez partout du texte alt ? Vous en aurez besoin car c'est très pratique en maintes occasions :
                                                                                                          
 
@@ -111,14 +111,14 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
                                                                                                            
  
                                                                                                          • Decoration. Vous devriez utiliser  {{anch("CSS background images")}} pour les images décoratives mais si vous devez utiliser du HTML, ajoutez un alt="" vide. Si l'image ne fait pas vraiment partie du contenu, un lecteur d'écran ne perdra pas de temps à la lire.
                                                                                                            • 
  
                                                                                                          • Contenu. Si votre image fournit une ou plusieurs informations supplémentaires significatives, inscrivez ces mêmes informations dans un bref  alt text –  ou mieux, dans le texte principal, que tout le monde puisse les voir. N'écrivez pas de  alt text redondants. Imaginez combien ce serait ennuyeux pour un lecteur si tous les paragraphes étaient écrits en double... Si l'image est décrite de manière adéquate dans le corps de texte principal, vous pouvez utiliser simplement  alt="".
                                                                                                            • 
- 
                                                                                                          • Lien. Si vous mettez une image à l'intérieur d'une ancre {{htmlelement("a")}} pour transformer une image en lien, vous devez quand même fournir un Lien texte accessible . Dans de tels cas, vous pouvez, soit l'inclure dans le même élément <a>, soit dans l'attribut  alt de l'image – utilisez ce qui marche le mieux dans votre cas.
                                                                                                            • 
- 
                                                                                                          • Texte. Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple,  utilisez CSS  pour ça, plutôt que de mettre du texte dans une image. De toutes manières, si vous ne pouvez pas éviter de faire ça, vous devez ajouter le texte dans l'attribut  alt .
                                                                                                            • 
+ 
                                                                                                          • Lien. Si vous mettez une image à l'intérieur d'une ancre {{htmlelement("a")}} pour transformer une image en lien, vous devez quand même fournir un Lien texte accessible . Dans de tels cas, vous pouvez, soit l'inclure dans le même élément <a>, soit dans l'attribut  alt de l'image – utilisez ce qui marche le mieux dans votre cas.
                                                                                                            • 
+ 
                                                                                                          • Texte. Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple,  utilisez CSS  pour ça, plutôt que de mettre du texte dans une image. De toutes manières, si vous ne pouvez pas éviter de faire ça, vous devez ajouter le texte dans l'attribut  alt .
                                                                                                            • 
 
                                                                                                          
 
 
                                                                                                          Le but est de livrer essentiellement une expérience de qualité, même quand les images ne peuvent être vues. Cela assure à tous les utilisateurs de ne rien manquer du contenu. Essayez de ne pas afficher les images dans votre navigateur et regardez ce qu'il se passe. Vous allez vite réaliser que le texte fourni à la place est réellement utile.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: Pour plus d'informations, voyez notre guide  Textes Alternatifs
                                                                                                          
+
                                                                                                          Note : Pour plus d'informations, voyez notre guide  Textes Alternatifs
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Largeur et hauteur (width-height)
                                                                                                          
@@ -133,19 +133,19 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
 
                                                                                                          Cela ne fait pas grande différence à l'affichage dans des circonstances normales. Mais, si l'image n'est pas affichée, disons que l'utilisateur est juste arrivé sur la page et qu'elle n'est pas encore chargée, vous remarquerez que le navigateur laisse un espace pour qu'elle y apparaisse :
                                                                                                          
 
-
                                                                                                          The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings
                                                                                                          
+
                                                                                                          The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings
                                                                                                          
 
 
                                                                                                          C'est une bonne pratique, cela donne une page se chargeant plus rapidement et en douceur.
                                                                                                          
 
 
                                                                                                          De toutes manières, vous ne devez pas altérer la taille de vos images avec les attributs  HTML . Si vous réglez la taille de l'image trop grande, vous aurez un résultat avec beaucoup de "grain", flou ou trop petit et vous dépensez de la bande passante en téléchargeant une image qui ne convient pas aux besoins de l'utilisateur.  Votre image peut aussi sortir distordue, si vous n'en maintenez pas le bon  Format d'image. Vous devriez utiliser un éditeur d'images pour la mettre à la bonne taille avant de la mettre dans votre page web.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: Si vous devez absolument modifier une taille d' image, vous devriez vous servir de  CSS .
                                                                                                          
+
                                                                                                          Note : Si vous devez absolument modifier une taille d' image, vous devriez vous servir de  CSS .
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Titre d'images
                                                                                                          
 
-
                                                                                                          Comme décrit dans le chapitre  Création d'hyperliens , vous pouvez aussi ajouter un attribut title aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :
                                                                                                          
+
                                                                                                          Comme décrit dans le chapitre  Création d'hyperliens , vous pouvez aussi ajouter un attribut title aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :
                                                                                                          
 
 
                                                                                                          <img src="images/dinosaur.jpg"
      alt="The head and torso of a dinosaur skeleton;
@@ -156,7 +156,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
 
                                                                                                          Cela donne une info-bulle avec le texte entré dans l'attribut title :
                                                                                                          
 
-
                                                                                                          The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum 
                                                                                                          
+
                                                                                                          The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum 
                                                                                                          
 
 
                                                                                                          Il n'est pas essentiel d'inclure des informations dans les images. Il est souvent préférable d'écrire ces informations dans le texte principal plutôt qu'attaché à l'image. Ils peuvent être très utile dans d'autres circonstances, par exemple dans une galerie d'images où vous n'avez pas de place pour les légendes.
                                                                                                          
 
@@ -178,12 +178,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
 
                                                                                                          Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  Reset .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton Show solution :
                                                                                                          
 
-
-
-
                                                                                                          {{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Pédagogie_active_incorporer_une_image', 700, 350, "", "", "hide-codepen-jsfiddle") }}
                                                                                                          
 
 
 
@@ -340,7 +328,7 @@ textarea.onkeyup = function(){
 
                                                                                                          L'élément {{htmlelement("figcaption")}}  dit au navigateur et aux technologies d'assistance que la légende décrit le contenu de l'autre élément {{htmlelement("figure")}}.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: D'un  point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte alt devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble.
                                                                                                          
+
                                                                                                          Note : D'un  point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte alt devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Un objet <figure> n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui :
                                                                                                          
@@ -364,10 +352,7 @@ textarea.onkeyup = function(){
 
 
                                                                                                          Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  Reset .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton Show solution :
                                                                                                          
 
-
-
-
                                                                                                          {{ EmbedLiveSample('Playable_code_2', 700, 350, "", "", "hide-codepen-jsfiddle") }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Pédagogie_active_créer_un_objet_figure', 700, 350, "", "", "hide-codepen-jsfiddle") }}
                                                                                                          
 
 
                                                                                                          Images d'arrière-plan CSS
                                                                                                          
 
@@ -505,7 +485,7 @@ textarea.onkeyup = function(){
 
                                                                                                          En résumé : si une image a du sens, en terme de contenu, vous devriez utiliser une image HTML. Si une image n'est que pure décoration, il vaut mieux utiliser les images d'arrière-plan CSS.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: Vous en apprendrez beaucoup plus sur les  CSS background images dans notre topic  CSS .
                                                                                                          
+
                                                                                                          Note : Vous en apprendrez beaucoup plus sur les  CSS background images dans notre topic  CSS .
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          C'est tout pour l'instant. Nous avons découvert en détails les images et légendes. Dans le prochain article, nous monterons en régime pour aborder la manière d'utiliser HTML pour intégrer des vidéos et de l'audio dans une page web.
                                                                                                          
@@ -515,10 +495,10 @@ textarea.onkeyup = function(){
 
                                                                                                          Dans ce module :
                                                                                                          
 
 
diff --git a/files/fr/learn/html/multimedia_and_embedding/index.html b/files/fr/learn/html/multimedia_and_embedding/index.html
index 86eb86cd9f..445c2724fe 100644
--- a/files/fr/learn/html/multimedia_and_embedding/index.html
+++ b/files/fr/learn/html/multimedia_and_embedding/index.html
@@ -29,7 +29,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding
 
                                                                                                          Pour commencer ce module dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML comme il est recommandé dans l'article : introduction au HTML. Nous vous recommandons de passer du temps sur cette introduction en premier lieu (ou un article équivalent d'initiation au HTML) puis de repasser ici pour continuer.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Si vous travaillez sur une tablette, ordinateur ou autre périphérique où vous n'auriez pas la capacité de créer vos propres fichiers, sachez que vous pouvez tester (la plupart) de vos lignes de code sur des programmes en ligne comme JSBin ou Thimble.
                                                                                                          
+
                                                                                                          Note : Si vous travaillez sur une tablette, ordinateur ou autre périphérique où vous n'auriez pas la capacité de créer vos propres fichiers, sachez que vous pouvez tester (la plupart) de vos lignes de code sur des programmes en ligne comme JSBin ou Thimble.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Guides
                                                                                                          
diff --git a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
index bf2054f890..37cd4e8230 100644
--- a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
+++ b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
@@ -8,13 +8,13 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page
 
 
                                                                                                          {{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
                                                                                                          
 
-
                                                                                                          Dans cette partie, nous testerons vos connaissances des quelques techniques abordées dans les articles de ce module, en vous demandant d'ajouter des images et des vidéos à une super page d'accueil entièrement dédiée à Mozilla !
                                                                                                          
+
                                                                                                          Dans cette partie, nous testerons vos connaissances des quelques techniques abordées dans les articles de ce module, en vous demandant d'ajouter des images et des vidéos à une super page d'accueil entièrement dédiée à Mozilla !
                                                                                                          
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :Notions élémentaires en informatique, installation des outils de base, bases  de la manipulation des fichiers, fondamentaux du HTML (comme décrit dans  Commencer avec le Web).Notions élémentaires en informatique, installation des outils de base, bases  de la manipulation des fichiers, fondamentaux du HTML (comme décrit dans  Commencer avec le Web).
   
                                                                                                          
   
                                                                                                          
    Objectifs :
                                                                                                          
+
                                                                                                          
-   
+   
@@ -30,7 +30,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page
 
                                                                                                          Allez dans le répertoire originals chercher les différentes images et faites la même chose; vous aurez peut-être à les enregistrer dans un nouveau dossier pour l'instant, au cas où vous auriez besoin d'en manipuler certaines en utilisant un éditeur graphique avant de pouvoir les utiliser.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: le fichier HTML en exemple contient un bon nombre de CSS, pour styliser la page. Vous n'avez pas besoin de modifier le CSS, juste l'HTML dans l'élément {{htmlelement("body")}} — tant que vous insérez les bonnes balises, le style sera cohérent.
                                                                                                          
+
                                                                                                          Note : le fichier HTML en exemple contient un bon nombre de CSS, pour styliser la page. Vous n'avez pas besoin de modifier le CSS, juste l'HTML dans l'élément {{htmlelement("body")}} — tant que vous insérez les bonnes balises, le style sera cohérent.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Énoncé du projet
                                                                                                          
@@ -54,7 +54,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page
 
                                                                                                          Puis, créez une version paysage de 1200px de large de red-panda.jpg, et une version portrait de 600px de large qui montre le panda en gros plan. Encore une fois, nommez-les de manière similaire pour les identifier facilement. Réservez toutes ces copies dans le même dossier que l'index.html.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: Vous devriez optimiser vos images JPG et PNG pour les rendre le plus petit possible tout en restant de bonne qualité. tinypng.com est une bonne aide pour faire ça aisément.
                                                                                                          
+
                                                                                                          Note : Vous devriez optimiser vos images JPG et PNG pour les rendre le plus petit possible tout en restant de bonne qualité. tinypng.com est une bonne aide pour faire ça aisément.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Ajouter un logo à l'en-tête
                                                                                                          
@@ -74,7 +74,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page
 
                                                                                                          Assurez-vous de faire correspondre les bonnes images avec les liens corrects !
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: Pour tester correctement les exemples srcset/sizes, vous devez charger votre site sur un serveur (utiliser Github pages est une solution simple et gratuite), ensuite vous pouvez tester si tout se déroule correctement en utilisant des outils de développeur, comme expliqué dans Responsive images: useful developer tools.
                                                                                                          
+
                                                                                                          Note : Pour tester correctement les exemples srcset/sizes, vous devez charger votre site sur un serveur (utiliser Github pages est une solution simple et gratuite), ensuite vous pouvez tester si tout se déroule correctement en utilisant des outils de développeur, comme expliqué dans Responsive images: useful developer tools.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Un panda rouge créatif
                                                                                                          
@@ -85,9 +85,9 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page
 
 
                                                                                                          La capture d'écran suivante montre à quoi devrait ressembler la page d'accueil aprés avoir été correctement balisée, avec un affichage large et un étroit.
                                                                                                          
 
-
                                                                                                          A wide shot of our example splash page
                                                                                                          
+
                                                                                                          A wide shot of our example splash page
                                                                                                          
 
-
                                                                                                          A narrow shot of our example splash page
                                                                                                          
+
                                                                                                          A narrow shot of our example splash page
                                                                                                          
 
 
                                                                                                          Évaluation
                                                                                                          
 
@@ -100,12 +100,12 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page
 
                                                                                                          Dans ce module :
                                                                                                          
 
 
 
 
                                                                                                           
                                                                                                          
diff --git a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
index a35a7d6131..c840ee2f9e 100644
--- a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
+++ b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
@@ -21,13 +21,13 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technolog
 
 
                                                                                                          {{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
                                                                                                          
 
-
                                                                                                          Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les  <iframe> servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement.
                                                                                                          
+
                                                                                                          Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les  <iframe> servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement.
                                                                                                          
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :Avant de vous attaquer à cette étude, vous devriez avoir déjà travaillé sur les paragraphes précédents composant le module Multimedia et Intégration.Avant de vous attaquer à cette étude, vous devriez avoir déjà travaillé sur les paragraphes précédents composant le module Multimedia et Intégration.
   
                                                                                                          
   
                                                                                                          
    Objectif:
                                                                                                          
+
                                                                                                          
-   
+   
@@ -42,7 +42,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technolog
 
 
                                                                                                           
                                                                                                          
 
-
                                                                                                          Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les applets Java et Flash — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes : accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner.
                                                                                                          
+
                                                                                                          Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les applets Java et Flash — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes : accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner.
                                                                                                          
 
 
                                                                                                          Enfin, l'élément {{htmlelement("iframe")}} est apparu (avec d'autres moyens d'intégration de contenu, comme {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc). Cet élément permet d'intégrer un document web entier dans un autre, comme s'il s'agissait d'un élément {{htmlelement("img")}}} ou d'un autre élément de ce type. Il  est régulièrement utilisé aujourd'hui.
                                                                                                          
 
@@ -73,10 +73,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technolog
 
 
                                                                                                          Si vous faites une erreur, vous pouvez toujours réinitialiser le tout avec le bouton Réinitialiser. Si vous êtes vraiment bloqué, pressez le bouton Afficher la solution pour voir la réponse.
                                                                                                          
 
-
-
-
                                                                                                          {{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample("Apprentissage_actif_utilisations_classiques_de_l'intégration", 700, 600, "", "", "hide-codepen-jsfiddle") }}
                                                                                                          
 
 
                                                                                                          Iframes en détail
                                                                                                          
 
@@ -212,7 +206,7 @@ textarea.onkeyup = function(){
 
 
                                                                                                          
  
                                                                                                          {{htmlattrxref('allowfullscreen','iframe')}}
                                                                                                          
- 
                                                                                                          Si activé, <iframe> pourra être mis en mode plein écran avec Full Screen API (un peu hors‑sujet dans cet article).
                                                                                                          
+ 
                                                                                                          Si activé, <iframe> pourra être mis en mode plein écran avec Full Screen API (un peu hors‑sujet dans cet article).
                                                                                                          
  
                                                                                                          {{htmlattrxref('frameborder','iframe')}}
                                                                                                          
  
                                                                                                          Si défini à la valeur 1, demande à l'explorateur de tracer une bordure entre cadres, c'est le comportement par défaut. 0 supprime la bordure. L'utilisation d'un tel attribut n'est plus trop recommandée, car le même résultat peut être obtenu en mieux avec {{cssxref('border')}}: none; dans le {{Glossary('CSS')}}.
                                                                                                          
  
                                                                                                          {{htmlattrxref('src','iframe')}}
                                                                                                          
@@ -226,7 +220,7 @@ textarea.onkeyup = function(){
 
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Afin d'améliorer la vitesse, il est pertinent de définir l'attribut src de iframe avec JavaScript après que le chargement du contenu principal est effectué. La page est utilisable plus tôt et le temps de chargement officiel de la page est diminué (une métrique {{glossary("SEO")}} importante).
                                                                                                          
+
                                                                                                          Note : Afin d'améliorer la vitesse, il est pertinent de définir l'attribut src de iframe avec JavaScript après que le chargement du contenu principal est effectué. La page est utilisable plus tôt et le temps de chargement officiel de la page est diminué (une métrique {{glossary("SEO")}} importante).
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Problèmes de sécurité
                                                                                                          
@@ -236,10 +230,10 @@ textarea.onkeyup = function(){
 
                                                                                                          Fabricants de navigateurs et développeurs Web ont appris à la dure que <iframe> constitue sur le Web une cible commune (terme officiel : un vecteur d'attaque) pour des personnes mal intentionnées (souvent appelés hackeurs (pirates), ou plus exactement, crackeurs).  <iframe> est une porte d'entrée pour les attaques de ces personnes quand ils essaient de modifier malicieusement une page Web ou d'amener des utilisateurs à faire quelque chose qu'ils ne voudraient pas faire, comme révéler des informations confidentielles comme noms d'utilisateur et mots de passe. Pour cette raison, les ingénieurs spécialistes et les développeurs de navigateurs ont développé divers mécanismes de sécurité pour rendre <iframe> plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de <iframe> : les hackeurs incorporent un <iframe> invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles.
                                                                                                          
+
                                                                                                          Note : Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de <iframe> : les hackeurs incorporent un <iframe> invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles.
                                                                                                          
 
                                                                                                          
 
-
                                                                                                          Un exemple rapide d'abord - essayez de charger l'exemple précédent que nous avons montré ci-dessus dans votre navigateur - vous pouvez le trouver en direct sur Github (voyez le code source aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la Console dans les outils de développement du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing (Chargement interdit par X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre) . C'est parce que les développeurs qui ont construit MDN ont inclus un paramètre sur le serveur des pages du site empêchant l'intégration de ces pages sur un autre site avec <iframe> (voir {{anch("Configurer les directives CSP")}}, ci-dessous). Parfaitement sensé — il n'y a aucune raison d'intégrer une page entière de MDN dans d'autres pages, sauf à vouloir les intégrer dans votre site et les prétendre vôtres, ou bien tenter de voler des données par l'intermédiaire d'un détournement de clic, actions qui sont tous les deux des malhonnêtetés. De plus, si tout le monde se mettait à faire cela, toute la bande passante supplémentaire nécessaire commencerait à coûter un paquet d'argent à Mozilla.
                                                                                                          
+
                                                                                                          Un exemple rapide d'abord - essayez de charger l'exemple précédent que nous avons montré ci-dessus dans votre navigateur - vous pouvez le trouver en direct sur Github (voyez le code source aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la Console dans les outils de développement du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing (Chargement interdit par X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre) . C'est parce que les développeurs qui ont construit MDN ont inclus un paramètre sur le serveur des pages du site empêchant l'intégration de ces pages sur un autre site avec <iframe> (voir {{anch("Configurer les directives CSP")}}, ci-dessous). Parfaitement sensé — il n'y a aucune raison d'intégrer une page entière de MDN dans d'autres pages, sauf à vouloir les intégrer dans votre site et les prétendre vôtres, ou bien tenter de voler des données par l'intermédiaire d'un détournement de clic, actions qui sont tous les deux des malhonnêtetés. De plus, si tout le monde se mettait à faire cela, toute la bande passante supplémentaire nécessaire commencerait à coûter un paquet d'argent à Mozilla.
                                                                                                          
 
 
                                                                                                          N'intégrer que si nécessaire
                                                                                                          
 
@@ -263,7 +257,7 @@ textarea.onkeyup = function(){
 
                                                                                                          L'utilisation de HTTPS nécessite un certificat de sécurité, ce qui peut être coûteux (bien que Let's Encrypt facilite les choses) — si vous ne pouvez pas en obtenir un, vous pouvez charger votre document parent sur le serveur en HTTP. Cependant, en raison de la deuxième fonctionnalité de HTTPS indiquée ci-dessus, et dans ce cas les histoires de coût n'interviennent plus, vous ne devez jamais intégrer du contenu tierce partie avec HTTP (dans le meilleur des cas, le navigateur Web de votre utilisateur lui affichera un avertissement effrayant). Toutes les sociétés sérieuses, rendant leur contenu disponible pour une intégration via un <iframe>, le rendront disponible avec HTTPS — regardez les URLs à l'intérieur de l'attribut src de <iframe> lorsque vous intégrez du contenu Google Maps ou YouTube, par exemple.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: Github pages allows content to be served via HTTPS by default, so is useful for hosting content. If you are using different hosting and are not sure, ask your hosting provider about it.
                                                                                                          
+
                                                                                                          Note : Github pages allows content to be served via HTTPS by default, so is useful for hosting content. If you are using different hosting and are not sure, ask your hosting provider about it.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Toujours utiliser l'attribut  sandbox
                                                                                                          
@@ -275,15 +269,15 @@ textarea.onkeyup = function(){
 
                                                                                                          Si c'est absolument nécessaire, vous pouvez ajouter des permissions une à une (en tant que valeur de l'attribut sandbox="") — voir l'entrée de référence {{htmlattrxref('sandbox','iframe')}} pour toutes les options disponibles. Il est important de noter que vous ne devez jamais mettre à la fois les valeurs allow-scripts et allow-same-origin aux attributs de la « sandbox » — dans ce cas,, le contenu intégré pourrait contourner la politique de sécurité originelle qui empêche les sites d'exécuter des scripts et donc utiliser JavaScript pour désactiver complètement le « bac à sable ».
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Mettre le code dans le « bac à sable » n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un <iframe>). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}.
                                                                                                          
+
                                                                                                          Note : Mettre le code dans le « bac à sable » n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un <iframe>). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Configurer  les directives CSP
                                                                                                          
 
-
                                                                                                          {{Glossary("CSP")}} est un acronyme pour « content security policy » (politique de sécurité du contenu) ; les directives CSP fournissent un ensemble d'en‑têtes HTTP (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les <iframe>, vous pouvez configurer votre serveur pour qu'il adresse une en‑tête appropriée X-Frame-Options. Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques) ; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut.
                                                                                                          
+
                                                                                                          {{Glossary("CSP")}} est un acronyme pour « content security policy » (politique de sécurité du contenu) ; les directives CSP fournissent un ensemble d'en‑têtes HTTP (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les <iframe>, vous pouvez configurer votre serveur pour qu'il adresse une en‑tête appropriée X-Frame-Options. Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques) ; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Lisez le post de Frederik Braun sur On the X-Frame-Options Security Header pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article.
                                                                                                          
+
                                                                                                          Note : Lisez le post de Frederik Braun sur On the X-Frame-Options Security Header pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Les éléments <embed> et <object>
                                                                                                          
@@ -291,7 +285,7 @@ textarea.onkeyup = function(){
 
                                                                                                          Les éléments {{htmlelement("embed")}} et {{htmlelement("object")}} ont une fonction différente de {{htmlelement("iframe")}}} — ces éléments sont des outils d'intégration à caractère général pour importer plusieurs types de contenu externe ; cela comprend des technologies de greffons comme Java Applets ou Flash, PDF (affichable dans le navigateur avec un greffon PDF) et même du contenu comme des vidéos, du SVG ou des images !
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Un greffon est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native.
                                                                                                          
+
                                                                                                          Note : Un greffon est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Cependant, il est peu probable que vous utilisiez beaucoup ces éléments — les applets ne sont plus utilisés depuis des années, Flash n'est plus très apprécié pour un certain nombre de raisons (voir {{anch("Le cas « greffons »")}}}, ci-dessous), les PDF ont tendance à être plutôt liés qu'intégrés, et les autres contenus tels que les images et la vidéo disposent d'éléments d'intégration beaucoup plus faciles à manipuler. Les greffons et ces méthodes d'intégration sont assurément une technique traditionnelle héritée : nous les mentionnons principalement au cas où vous les rencontreriez dans certaines circonstances, comme des intranets ou des projets d'entreprise.
                                                                                                          
@@ -342,7 +336,7 @@ textarea.onkeyup = function(){
 
                                                                                                           
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : <object> requiert un attribut data, un attribut type, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). typemustmatch empêche le fichier incorporé d'être exécuté avant que l'attribut type indique le type exact de média. typemustmatch  peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon).
                                                                                                          
+
                                                                                                          Note : <object> requiert un attribut data, un attribut type, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). typemustmatch empêche le fichier incorporé d'être exécuté avant que l'attribut type indique le type exact de média. typemustmatch  peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon).
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Voici un exemple utilisant l'élément {{htmlelement("embed")}} pour intégrer un film Flash (voyez ceci en direct sur Github ainsi que le code source également):
                                                                                                          
@@ -375,7 +369,7 @@ textarea.onkeyup = function(){
  
                                                                                                        8. Restez à l'écart des risques supplémentaires en matière de sécurité. Adobe Flash est notoirement non‑sûr, même avec ses innombrables rustines. En 2015, Alex Stamos, chef de la sécurité chez Facebook, a même demandé qu'Adobe arrête Flash.
                                                                                                          9. 
 
 
-
                                                                                                          Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("JavaScript")}} peuvent facilement faire le travail pour vous sans besoin d'applets Java ou d'une technologie ActiveX/BHO dépassée. Au lieu de compter sur Adobe Flash, utilisez la vidéo HTML5 pour vos besoins en médias, SVG pour les graphiques vectoriels et Canvas pour les images et animations complexes. Peter Elst écrivait déjà il y a quelques années qu'Adobe Flash est rarement le bon outil pour le travail, sauf pour les jeux spécialisés et les applications d'affaires. Quant à ActiveX, même le navigateur{{glossary("Microsoft Edge", "Edge")}} de Microsoft ne le prend plus en charge.
                                                                                                          
+
                                                                                                          Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("JavaScript")}} peuvent facilement faire le travail pour vous sans besoin d'applets Java ou d'une technologie ActiveX/BHO dépassée. Au lieu de compter sur Adobe Flash, utilisez la vidéo HTML5 pour vos besoins en médias, SVG pour les graphiques vectoriels et Canvas pour les images et animations complexes. Peter Elst écrivait déjà il y a quelques années qu'Adobe Flash est rarement le bon outil pour le travail, sauf pour les jeux spécialisés et les applications d'affaires. Quant à ActiveX, même le navigateur{{glossary("Microsoft Edge", "Edge")}} de Microsoft ne le prend plus en charge.
                                                                                                          
 
 
                                                                                                          Résumé
                                                                                                          
 
@@ -392,12 +386,12 @@ textarea.onkeyup = function(){
 
                                                                                                          Dans ce module
                                                                                                          
 
 
 
 
                                                                                                           
                                                                                                          
diff --git a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html
index 4ee6bee321..29f0d234da 100644
--- a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html
+++ b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html
@@ -54,7 +54,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page
 
                                                                                                          Ce type de problème n'existait pas quand le web a vu le jour, du début jusqu'au milieu des années 90 — à l'époque, les seuls appareils permettant de naviguer sur le web étaient les ordinateurs de bureau et les portables, de sorte que les ingénieurs et rédacteurs de spécifications pour les navigateurs ne pouvaient même pas imaginer l'existence de ces problèmes. Pour résoudre les problèmes indiqués ci-dessus, les techniques d'images adaptatives sont de mise en œuvre récente : elles offrent au navigateur plusieurs fichiers d'images, soit montrant tous la même chose mais avec un nombre de pixels différent (commutation de résolution), soit des images différentes selon l'espace alloué (décisions artistiques).
                                                                                                          
 
 
                                                                                                          
-  
                                                                                                          Note : Toutes les nouvelles fonctionnalités présentées dans cet article — srcset/sizes/<picture> — sont toutes prises en charge dans les versions de navigateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris le navigateur Edge de Microsoft, même si ce n'est pas le cas d'Internet Explorer).
                                                                                                          
+  
                                                                                                          Note : Toutes les nouvelles fonctionnalités présentées dans cet article — srcset/sizes/<picture> — sont toutes prises en charge dans les versions de navigateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris le navigateur Edge de Microsoft, même si ce n'est pas le cas d'Internet Explorer).
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Comment créer des images adaptatives ?
                                                                                                          
@@ -97,7 +97,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page
 
 
 
                                                                                                          
-
                                                                                                          Note : pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (px, em) ou relative au viewport (vw), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). Le navigateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média.
                                                                                                          
+
                                                                                                          Note : pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (px, em) ou relative au viewport (vw), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). Le navigateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Ainsi, une fois ces attributs en place, le navigateur va :
                                                                                                          
@@ -112,14 +112,14 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page
 
                                                                                                          Et c'est tout ! Donc à ce stade, si un navigateur prenant en charge une largeur de vue de 480 px charge la page, la condition pour le média (max-width: 480px) sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier elva-fairy-480w.jpg sera chargé, car sa largeur intrinsèque (480w) est celle qui est la plus proche de 440px. L'image 800 px a une taille de 128 Ko sur disque alors que la version 480 px n'occupe que 63 Ko — une économie de 65Ko. Imaginez maintenant qu'il s'agisse d'une page avec beaucoup d'images. L'utilisation de cette technique peut permettre aux personnes naviguant sur mobile d'économiser beaucoup de bande passante.
                                                                                                          
 
 
                                                                                                          
-  
                                                                                                          Note : lorsque vous testez cela avec un navigateur de bureau, si ce dernier échoue à charger l'image la plus étroite alors que vous avez réduit la largeur de la fenêtre au maximum, regardez la taille du viewport (dont vous pouvez avoir une approximation via l'instruction document.querySelector("html").clientWidth dans la console JavaScript). Selon les navigateurs, il existe différentes tailles minimales au-delà desquelles on ne pourra pas plus réduire la fenêtre (tailles minimales qui pourraient être plus larges qu'on ne le pense). Lorsque vous testez avec un navigateur mobile, vous pouvez utiliser les outils comme la page about:debugging de Firefox pour inspecter la page chargée sur le mobile à l'aide des outils de développement pour navigateur de bureau.
                                                                                                          
+  
                                                                                                          Note : lorsque vous testez cela avec un navigateur de bureau, si ce dernier échoue à charger l'image la plus étroite alors que vous avez réduit la largeur de la fenêtre au maximum, regardez la taille du viewport (dont vous pouvez avoir une approximation via l'instruction document.querySelector("html").clientWidth dans la console JavaScript). Selon les navigateurs, il existe différentes tailles minimales au-delà desquelles on ne pourra pas plus réduire la fenêtre (tailles minimales qui pourraient être plus larges qu'on ne le pense). Lorsque vous testez avec un navigateur mobile, vous pouvez utiliser les outils comme la page about:debugging de Firefox pour inspecter la page chargée sur le mobile à l'aide des outils de développement pour navigateur de bureau.
                                                                                                          
   
                                                                                                          Pour observer les images chargées, vous pouvez utiliser l'onglet Moniteur réseau dans les outils de développement de Firefox.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Les navigateurs les plus anciens qui ne prennent pas en charge ces fonctionnalités les ignorent; poursuivent et chargent normalement l'image référencée dans l'attribut src.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : dans l'élément <head> du document, vous trouvez la ligne <meta name="viewport" content="width=device-width"> : ceci force les navigateurs mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains navigateurs mobiles mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception).
                                                                                                          
+
                                                                                                          Note : dans l'élément <head> du document, vous trouvez la ligne <meta name="viewport" content="width=device-width"> : ceci force les navigateurs mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains navigateurs mobiles mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception).
                                                                                                          
 
                                                                                                          
 
 
@@ -169,7 +169,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page
 
                                                                                                          Notre exemple vu sur un écran assez large : la première image est OK et on voit le détail au centre.Notre exemple vu sur un écran étroit où l'élément picture permet de passer la première image à une image en portrait, plus utile sur un écran étroit.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : vous ne devez utiliser l'attribut media qu'avec un scénario de décision de nature artistique ; quand vous utilisez media, ne mettez pas de conditions pour le média avec l'attribut sizes.
                                                                                                          
+
                                                                                                          Note : vous ne devez utiliser l'attribut media qu'avec un scénario de décision de nature artistique ; quand vous utilisez media, ne mettez pas de conditions pour le média avec l'attribut sizes.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Pourquoi ne peut-on pas réaliser cela avec le CSS ou du JavaScript ?
                                                                                                          
diff --git a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
index 4854d24907..75e2a70ecd 100644
--- a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
+++ b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
@@ -18,13 +18,13 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
 
 
                                                                                                          {{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
                                                                                                          
 
-
                                                                                                          Maintenant que nous sommes à l'aise pour ajouter de simples images dans une page web, nous passons à l'étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans cet article, nous nous contenterons de le faire avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}}. Nous terminerons en apprenant comment ajouter des légendes et des sous-titres à vos vidéos.
                                                                                                          
+
                                                                                                          Maintenant que nous sommes à l'aise pour ajouter de simples images dans une page web, nous passons à l'étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans cet article, nous nous contenterons de le faire avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}}. Nous terminerons en apprenant comment ajouter des légendes et des sous-titres à vos vidéos.
                                                                                                          
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et articles précédents de ce module.Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et articles précédents de ce module.
   
                                                                                                          
   
                                                                                                          
    Objectif :
                                                                                                          
+
                                                                                                          
-   
+   
@@ -42,7 +42,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
 
                                                                                                          Nous ne vous apprendrons pas à produire des fichiers audio ou vidéo  — cela demande des compétences totalement différentes. Nous vous conseillons ce lien Github fichiers d'échantillons audio et vidéo et exemples de code pour votre expérience personnelle, au cas où vous ne pourriez pas y accéder par vous-même.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme YouTube, Dailymotion, et Vimeo. Pour l'audio, voyez Soundcloud  par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant.
                                                                                                          
+
                                                                                                          Note : Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme YouTube, Dailymotion, et Vimeo. Pour l'audio, voyez Soundcloud  par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          L' élément <video>
                                                                                                          
@@ -59,14 +59,14 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
  
                                                                                                          {{htmlattrxref("src","video")}}
                                                                                                          
  
                                                                                                          De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut src (source) contient le chemin vers la vidéo que vous voulez intégrer.  Cela fonctionne de la même manière.
                                                                                                          
  
                                                                                                          {{htmlattrxref("controls","video")}}
                                                                                                          
- 
                                                                                                          Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'épilepsie.) Vous devez vous servir de l'attribut  controls pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'API JavaScript adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume.
                                                                                                          
+ 
                                                                                                          Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'épilepsie.) Vous devez vous servir de l'attribut  controls pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'API JavaScript adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume.
                                                                                                          
  
                                                                                                          Le paragraphe dans la balise <video>
                                                                                                          
  
                                                                                                          Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément <video> , cela offre un texte alternatif qui peut être ce que vous voulez ; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise.
                                                                                                          
 
 
 
                                                                                                          La vidéo intégrée donnerait quelque chose comme ça :
                                                                                                          
 
-
                                                                                                          A simple video player showing a video of a small white rabbit
                                                                                                          
+
                                                                                                          A simple video player showing a video of a small white rabbit
                                                                                                          
 
 
                                                                                                          Faites un essai avec l'exemple ici. (voyez aussi le code source.)
                                                                                                          
 
@@ -87,7 +87,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
 
                                                                                                          Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Ce n'est pas si simple, comme vous pouvez le voir dans le tableau de compatibilité des codecs audio-vidéo. En outre, de nombreux navigateurs de plateforme mobile peuvent lire un format non pris en charge en le transférant au lecteur multimédia du système sous-jacent. Mais pour l'instant nous nous contenterons de ce qui précède.
                                                                                                          
+
                                                                                                          Note : Ce n'est pas si simple, comme vous pouvez le voir dans le tableau de compatibilité des codecs audio-vidéo. En outre, de nombreux navigateurs de plateforme mobile peuvent lire un format non pris en charge en le transférant au lecteur multimédia du système sous-jacent. Mais pour l'instant nous nous contenterons de ce qui précède.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Les formats ci-dessus ont été créés pour compresser la vidéo et l'audio dans des fichiers gérables (les fichiers vidéo et audio bruts sont très volumineux). Les navigateurs contiennent différents {{Glossary("Codec","Codecs")}}, comme Vorbis ou H.264, utilisés pour convertir le son et la vidéo compressés en binaire et inversement. Comme indiqué ci-dessus, les navigateurs ne supportent malheureusement pas tous les mêmes codecs, vous devrez donc fournir plusieurs fichiers pour chaque production de média. S'il vous manque le bon codec pour décoder le média, il ne pourra pas être lu.
                                                                                                          
@@ -95,7 +95,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
 
                                                                                                           
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Vous êtes peut-être surpris de l'existence d'une telle situation. Les formats MP3 (pour l'audio) et MP4/H.264 (pour la vidéo) sont tous deux largement pris en charge et de bonne qualité. Cependant, ils sont également grevés de brevets — les brevets américains couvrent le MP3 jusqu'en 2017 au moins et le H.264 jusqu'en 2027 au plus tôt, ce qui signifie que les navigateurs ne détenant pas de licence doivent payer d'énormes sommes d'argent pour pouvoir utiliser ces formats. En outre, beaucoup de personnes évitent, par principe, les logiciels propriétaires et leur préférent des formats ouverts. C'est pourquoi nous devons fournir plusieurs formats pour une prise en charge par différents navigateurs.
                                                                                                          
+
                                                                                                          Note : Vous êtes peut-être surpris de l'existence d'une telle situation. Les formats MP3 (pour l'audio) et MP4/H.264 (pour la vidéo) sont tous deux largement pris en charge et de bonne qualité. Cependant, ils sont également grevés de brevets — les brevets américains couvrent le MP3 jusqu'en 2017 au moins et le H.264 jusqu'en 2027 au plus tôt, ce qui signifie que les navigateurs ne détenant pas de licence doivent payer d'énormes sommes d'argent pour pouvoir utiliser ces formats. En outre, beaucoup de personnes évitent, par principe, les logiciels propriétaires et leur préférent des formats ouverts. C'est pourquoi nous devons fournir plusieurs formats pour une prise en charge par différents navigateurs.
                                                                                                          
 
 
                                                                                                           
                                                                                                          
 
                                                                                                          
@@ -115,7 +115,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
 
                                                                                                           
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : L'article sur les formats média pris en charge contient quelques types {{glossary("MIME type","MIME")}} courants.
                                                                                                          
+
                                                                                                          Note : L'article sur les formats média pris en charge contient quelques types {{glossary("MIME type","MIME")}} courants.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Autres fonctionnalités de <video>
                                                                                                          
@@ -133,7 +133,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
 
 
                                                                                                          Cela produit une sortie du type suivant :
                                                                                                          
 
-
                                                                                                          A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!
                                                                                                          
+
                                                                                                          A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!
                                                                                                          
 
 
                                                                                                          Voici les nouvelles fonctionnalités :
                                                                                                          
 
@@ -174,10 +174,10 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
 
 
                                                                                                          Vous verrez quelque chose de ce genre dans un navigateur :
                                                                                                          
 
-
                                                                                                          A simple audio player with a play button, timer, volume control, and progress bar
                                                                                                          
+
                                                                                                          A simple audio player with a play button, timer, volume control, and progress bar
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: Vous pouver lancer la démo de l'audio en direct sur Github (voir aussi le code source de l'interpréteur.)
                                                                                                          
+
                                                                                                          Note : Vous pouver lancer la démo de l'audio en direct sur Github (voir aussi le code source de l'interpréteur.)
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Voici les autres différences avec les vidéos HTML5 :
                                                                                                          
@@ -202,7 +202,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
 
                                                                                                          Ne serait-il pas agréable de pouvoir fournir à ces personnes la transcription des paroles prononcés dans l'audio ou la vidéo ? Eh bien, avec des vidéos HTML5 vous le pouvez, à l'aide du format WebVTT et de l'élément {{htmlelement("track")}}.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante.
                                                                                                          
+
                                                                                                          Note : « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          WebVTT est un format d'écriture de fichiers texte ; il contient nombre de chaînes de texte avec des métadonnées comme l'instant dans la vidéo où vous souhaitez l'affichage du texte, et même une information succinte sur le style et la position de celui‑ci. Ces chaînes textuelles sont appelées des marqueurs, les plus courants étant :
                                                                                                          
@@ -218,7 +218,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
 
 
                                                                                                          Un fichier WebVTT typique ressemblera à :
                                                                                                          
 
-
                                                                                                          WEBVTT
+
                                                                                                          WEBVTT
 
 1
 00:00:22.230 --> 00:00:24.606
@@ -248,12 +248,12 @@ Ceci est le deuxième.
 
 
                                                                                                          Il en résultera une vidéo dont les sous-titres seront affichés un peu comme ceci :
                                                                                                          
 
-
                                                                                                          Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."
                                                                                                          
+
                                                                                                          Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."
                                                                                                          
 
-
                                                                                                          Pour plus de détails, lisez Ajouter des légendes et des sous‑titres aux vidéos HTML5. Vous trouverez un exemple, écrit par Ian Devlin, accompagnant cet article sur Github (voyez le code source aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton « CC » et selectionner une option — English, Deutsch ou Español. 
                                                                                                          
+
                                                                                                          Pour plus de détails, lisez Ajouter des légendes et des sous‑titres aux vidéos HTML5. Vous trouverez un exemple, écrit par Ian Devlin, accompagnant cet article sur Github (voyez le code source aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton « CC » et selectionner une option — English, Deutsch ou Español. 
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Les pistes texte peuvent aussi vous aider avec {{glossary("SEO")}}, car les moteurs de recherche sont très performants sur le texte. Les pistes textes permettent aussi aux moteurs de recherche de faire un lien direct à un point particulier de la vidéo.
                                                                                                          
+
                                                                                                          Note : Les pistes texte peuvent aussi vous aider avec {{glossary("SEO")}}, car les moteurs de recherche sont très performants sur le texte. Les pistes textes permettent aussi aux moteurs de recherche de faire un lien direct à un point particulier de la vidéo.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Apprentissage interactif : intégrer vos propres vidéos et audios
                                                                                                          
@@ -285,9 +285,9 @@ Ceci est le deuxième.
  
                                                                                                        9. {{htmlelement("video")}}
                                                                                                          10. 
  
                                                                                                        10. {{htmlelement("source")}}
                                                                                                          11. 
  
                                                                                                        11. {{htmlelement("track")}}
                                                                                                          12. 
- 
                                                                                                        12.  Ajouter des légendes et sous-titres aux vidéos HTML5
                                                                                                          13. 
- 
                                                                                                        13. Intégration Audio et Vidéo : de nombreux détails sur la manière de mettre de la vidéo et audio sur le web avec HTML et JavaScript.
                                                                                                          14. 
- 
                                                                                                        14. Manipuler l'Audio et la Vidéo: de nombreux détails pour manipuler l'audio et la vidéo avec JavaScript (par ex. en ajoutant des filtres).
                                                                                                          15. 
+ 
                                                                                                        15.  Ajouter des légendes et sous-titres aux vidéos HTML5
                                                                                                          16. 
+ 
                                                                                                        16. Intégration Audio et Vidéo : de nombreux détails sur la manière de mettre de la vidéo et audio sur le web avec HTML et JavaScript.
                                                                                                          17. 
+ 
                                                                                                        17. Manipuler l'Audio et la Vidéo: de nombreux détails pour manipuler l'audio et la vidéo avec JavaScript (par ex. en ajoutant des filtres).
                                                                                                          18. 
  
                                                                                                        18. Options automatisées pour la traduction multimédia.
                                                                                                          19. 
 
 
@@ -298,12 +298,12 @@ Ceci est le deuxième.
 
                                                                                                          Contenu du module :
                                                                                                          
 
 
 
 
                                                                                                           
                                                                                                          
diff --git a/files/fr/learn/html/tables/advanced/index.html b/files/fr/learn/html/tables/advanced/index.html
index 11669b25e7..7a6f46a012 100644
--- a/files/fr/learn/html/tables/advanced/index.html
+++ b/files/fr/learn/html/tables/advanced/index.html
@@ -25,9 +25,9 @@ original_slug: Apprendre/HTML/Tableaux/Advanced
 
 
                                                                                                          {{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
                                                                                                          
 
-
                                                                                                          Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.
                                                                                                          
+
                                                                                                          Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.
                                                                                                          
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et Images en HTML.Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et Images en HTML.
   
                                                                                                          
   
                                                                                                          
    Objectifs :
                                                                                                          
+
                                                                                                          
@@ -55,7 +55,7 @@ original_slug: Apprendre/HTML/Tableaux/Advanced
 
                                                                                                          Le titre est placé directement sous la balise <table>.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <table> pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément <caption>,  car summary est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTML5, et ne peut être lu par l'utilisateur courant  (il n'apparaît pas dans la page).
                                                                                                          
+
                                                                                                          Note : L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <table> pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément <caption>,  car summary est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTML5, et ne peut être lu par l'utilisateur courant  (il n'apparaît pas dans la page).
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Apprentissage actif : Ajouter un titre
                                                                                                          
@@ -69,7 +69,7 @@ original_slug: Apprendre/HTML/Tableaux/Advanced
 
 
 
                                                                                                          
-
                                                                                                          Note: Vous pouvez trouver notre version sur GitHub — voir timetable-caption.html (voir aussi directement).
                                                                                                          
+
                                                                                                          Note : Vous pouvez trouver notre version sur GitHub — voir timetable-caption.html (voir aussi directement).
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Ajout d'une structure avec <thead>, <tfoot>, et <tbody>
                                                                                                          
@@ -87,7 +87,7 @@ original_slug: Apprendre/HTML/Tableaux/Advanced
 
 
 
                                                                                                          
-
                                                                                                          Note : <tbody> est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément <tbody> et regardez le code HTML dans les outils de développement de votre navigateur — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi  vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau.
                                                                                                          
+
                                                                                                          Note : <tbody> est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément <tbody> et regardez le code HTML dans les outils de développement de votre navigateur — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi  vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Apprentissage actif : Ajout d'une structure au tableau
                                                                                                          
@@ -115,15 +115,12 @@ tfoot {
 
 
 
                                                                                                          
-
                                                                                                          Note : Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (Introduction aux CSS est un bon moyen de commencer ; il y a aussi un article spécifique sur l'esthétique des tables).
                                                                                                          
+
                                                                                                          Note : Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (Introduction aux CSS est un bon moyen de commencer ; il y a aussi un article spécifique sur l'esthétique des tables).
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Le code de votre tableau fini devrait ressembler à quelque chose comme :
                                                                                                          
 
-
 
-
                                                                                                          {{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample("Apprentissage_actif_Ajout_d'une_structure_au_tableau", '100%', 300, "", "", "hide-codepen-jsfiddle") }}
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Vous pouvez aussi le trouver sur Github  spending-record-finished.html (voir aussi le résultat directement).
                                                                                                          
+
                                                                                                          Note : Vous pouvez aussi le trouver sur Github  spending-record-finished.html (voir aussi le résultat directement).
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Tableaux imbriqués
                                                                                                          
@@ -270,7 +266,7 @@ tfoot {
 
 
                                                                                                          Voici la sortie qui en résulte :
                                                                                                          
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :
                                                                                                          
+
                                                                                                          
@@ -278,8 +274,8 @@ tfoot {
    
-   
                                                                                                          
  
   
                                                                                                          
    title1title3
   
                                                                                                          
   
                                                                                                          
-    
+   
                                                                                                          
+    
@@ -370,18 +366,18 @@ tfoot {
 
                                                                                                          Mais que faire si vous ne pouvez pas créer ces associations visuelles ? Comment pouvez-vous lire un tableau comme celui ci-dessus ? Les personnes malvoyantes utilisent souvent un lecteur d'écran qui leur lit les informations des pages web. Ce n'est pas un problème quand vous lisez du texte brut, mais l'interprêtation d'un tableau peut constituer un défi pour une personne aveugle. Néanmoins, avec le balisage approprié, nous pouvons remplacer des associations visuelles par des associations programmées.
                                                                                                          
-
                                                                                                          Note : Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les  données de l'OMS en 2017.
                                                                                                          
+
                                                                                                          Note : Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les  données de l'OMS en 2017.
                                                                                                          
 
                                                                                                          Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible.
                                                                                                          
 
-
                                                                                                          Utilisation des en-têtes de colonnes et de lignes
                                                                                                          
+
                                                                                                          Utilisation des en-têtes de colonnes et de lignes
                                                                                                          Les lecteurs d'écran identifieront tous les en-têtes et les utiliseront pour réaliser automatiquement les associations entre ces en-têtes et les cellules correspondantes.  La combinaison des en-têtes des colonnes et des lignes doit permettre d'identifier et d'interprêter les données de chaque cellule. Ainsi, les utilisateurs de lecteurs d'écran peuvent accéder aux données d'une façon similaire à celle des utilisateurs voyants.
                                                                                                          Nous avons déjà traité des en-têtes dans notre article précédent — voir Ajouter des en-têtes avec <th> .
                                                                                                          
 
-
                                                                                                          L'attribut scope
                                                                                                          
+
                                                                                                          L'attribut scope
                                                                                                          Aux balises <th>, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément <th> pour indiquer précisément à un lecteur d'écran si la cellule contient un en-tête de colonne ou de ligne — par exemple, sommes‑nous dans un en-tête de ligne, ou de colonne ? En revenant à notre exemple d'enregistrement de dépenses vu plus tôt, il est possible de définir sans ambiguité un en-tête de colonne comme étant un en-tête de colonne ainsi :
                                                                                                          
 
@@ -409,7 +405,7 @@ tfoot {
 
 
                                                                                                          scope a deux autres valeurs possibles — colgroup et rowgroup. Elles sont utilisées pour les en-têtes qui couvrent plusieurs colonnes ou lignes. Si vous revenez au tableau « Articles vendus... » au début de ce paragraphe du présent article, vous voyez que la cellule « Vêtements » se trouve au-dessus des cellules  « Pantalons », « Jupes » et « Robes ». Toutes ces cellules sont marquées comme en-têtes (<th>), mais « Vêtements » est un en-tête de niveau supérieur qui définit trois « sous-en-têtes ». « Vêtements » comportera donc un attribut  scope="colgroup", alors que les autres doivent recevront un attribut scope="col".
                                                                                                          
 
-
                                                                                                          Les attributs id et headers
                                                                                                          
+
                                                                                                          Les attributs id et headers
                                                                                                          Une alternative à l'usage de l'attribut scope est l'utilisation des attributs {{htmlattrxref("id")}} et {{htmlattrxref("headers", "td")}} pour créer une association entre en-têtes et cellules. Ils sont utilisés de la manière suivante :
                                                                                                          
 
@@ -445,7 +441,7 @@ tfoot {
 </tbody>
                                                                                                          
-
                                                                                                          Note: Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise beaucoup plus de balisage et ne laisse aucune marge d'erreur.  L'approche scope est généralement suffisante pour la plupart des tableaux.
                                                                                                          
+
                                                                                                          Note : Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise beaucoup plus de balisage et ne laisse aucune marge d'erreur.  L'approche scope est généralement suffisante pour la plupart des tableaux.
                                                                                                          
 
                                                                                                          Apprentissage actif : jouer avec scope et headers
                                                                                                          
@@ -457,7 +453,7 @@ tfoot {
 
                                                                                                          
-
                                                                                                          Note : Vous pouvez contrôler votre travail en le comparant à nos exemples finis  — voir items-sold-scope.html (voir aussi directement)
                                                                                                          
+
                                                                                                          Note : Vous pouvez contrôler votre travail en le comparant à nos exemples finis  — voir items-sold-scope.html (voir aussi directement)
                                                                                                          
           et items-sold-headers.html (voir aussi directement).
                                                                                                          
 
                                                                                                          
 
@@ -474,7 +470,7 @@ tfoot {
 
diff --git a/files/fr/learn/html/tables/basics/index.html b/files/fr/learn/html/tables/basics/index.html
index b4e3cf6667..fe9ef9ef91 100644
--- a/files/fr/learn/html/tables/basics/index.html
+++ b/files/fr/learn/html/tables/basics/index.html
@@ -23,20 +23,13 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 
 
                                                                                                          {{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
                                                                                                          
 
-
                                                                                                          
-
                                                                                                          
- 
                                                                                                          Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, les cellules, les en-têtes, les cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.
                                                                                                          
-
                                                                                                          
-
                                                                                                          
+
                                                                                                          Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, les cellules, les en-têtes, les cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.
                                                                                                          
 
-
                                                                                                          
-
                                                                                                          
-
-
                                                                                                          
      
       
                                                                                                          
        cell1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                          
+
                                                                                                          
-   
+   
@@ -47,17 +40,17 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 
 
                                                                                                          Qu'est-ce qu'un tableau ?
                                                                                                          
 
-
                                                                                                          Un tableau est un ensemble structuré de données (table de données) présentées en lignes et colonnes. Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d'ouverture de la piscine du quartier.
                                                                                                          
+
                                                                                                          Un tableau est un ensemble structuré de données (table de données) présentées en lignes et colonnes. Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d'ouverture de la piscine du quartier.
                                                                                                          
 
-
                                                                                                          A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.
                                                                                                          
+
                                                                                                          A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.
                                                                                                          
 
-
                                                                                                          A swimming timetable showing a sample data table
                                                                                                          
+
                                                                                                          A swimming timetable showing a sample data table
                                                                                                          
 
-
                                                                                                          Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800 :
                                                                                                          
+
                                                                                                          Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800 :
                                                                                                          
 
-
                                                                                                          A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.
                                                                                                          
+
                                                                                                          A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.
                                                                                                          
 
-
                                                                                                          Il n'est donc pas étonnant que les créateurs du HTML fournissent un moyen de structurer et de présenter des tableaux de données sur le Web .
                                                                                                          
+
                                                                                                          Il n'est donc pas étonnant que les créateurs du HTML fournissent un moyen de structurer et de présenter des tableaux de données sur le Web .
                                                                                                          Comment fonctionne un tableau ?
                                                                                                          
 
@@ -197,13 +190,13 @@ original_slug: Apprendre/HTML/Tableaux/Basics
  
                                                                                                          
  
   
                                                                                                          
    Prérequis :Les bases de HTML (voir Introduction au HTML).Les bases de HTML (voir Introduction au HTML).
   
                                                                                                          
   
                                                                                                          
    Objectif :
 
 
                                                                                                          
 
                                                                                                          
 
-
                                                                                                          Lorsque cela est fait correctement, même les personnes malvoyantes peuvent interpréter des données tabulaires dans un tableau HTML — un tableau HTML réussi doit permettre la perception des données à des utilisateurs déficients visuels ou malvoyants.
                                                                                                          
+
                                                                                                          Lorsque cela est fait correctement, même les personnes malvoyantes peuvent interpréter des données tabulaires dans un tableau HTML — un tableau HTML réussi doit permettre la perception des données à des utilisateurs déficients visuels ou malvoyants.
                                                                                                          
 
 
                                                                                                          Style de tableau
                                                                                                          
 
 
                                                                                                          Vous pouvez également regarder sur l'exemple réel sur GitHub ! Vous remarquerez sur celui-ci que le tableau est légèrement plus lisible  — car le tableau figurant ci-dessus présente un style minimal, alors que sa version sur GitHub est liée à un  CSS plus signifiant.
                                                                                                          
 
-
                                                                                                          Ne vous faites pas d'illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d'informations de style avec CSS, ainsi qu'une structure solide avec HTML. Dans ce module nous nous concentrons sur la partie HTML ; pour en savoir plus sur la partie CSS, vous devrez lire notre article Style et tableaux quand vous aurez fini ici.
                                                                                                          
+
                                                                                                          Ne vous faites pas d'illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d'informations de style avec CSS, ainsi qu'une structure solide avec HTML. Dans ce module nous nous concentrons sur la partie HTML ; pour en savoir plus sur la partie CSS, vous devrez lire notre article Style et tableaux quand vous aurez fini ici.
                                                                                                          
 
 
                                                                                                          Nous n'approfondirons pas le CSS dans ce module, mais nous avons écrit une feuille de style minimale CSS à utiliser ici, feuille de style qui rendra les tableaux plus lisibles qu'avec un format par défaut sans style. Vous trouverez cette feuille de style ici, et également un exemple HTML d'application de cette feuille de style là — ensemble ils vous donneront un bon point de départ pour expérimenter sur les tableaux HTML.
                                                                                                          
 
@@ -227,10 +220,10 @@ original_slug: Apprendre/HTML/Tableaux/Basics
  
                                                                                                        19. Avant tout, faites une copie locale de blank-template.html et minimal-table.css dans un nouveau répertoire de votre ordinateur.
                                                                                                          20. 
  
                                                                                                        20. Le contenu de chaque tableau est encadré par ces deux balises : <table></table>. Ajoutez‑les dans le corps de votre HTML.
                                                                                                          21. 
  
                                                                                                        21. Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément  <td> (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau :
-  
                                                                                                          <td>Bonjour, je suis votre première cellule.</td>
                                                                                                          
+  
                                                                                                          <td>Bonjour, je suis votre première cellule.</td>
                                                                                                          
  
                                                                                                          22. 
  
                                                                                                        22. Si nous voulons une rangée de quatre cellules, nous devons copier la première trois fois. Mettez à jour le contenu du tableau pour avoir quelque chose comme :
-  
                                                                                                          <td>Bonjour, je suis votre première cellule </td>
+  
                                                                                                          <td>Bonjour, je suis votre première cellule </td>
 <td>je suis votre deuxième cellule</td>
 <td>je suis votre troisième cellule</td>
 <td>je suis votre quatrième cellule</td>
                                                                                                          
@@ -244,7 +237,7 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 
                                                                                                            
  
                                                                                                          1. Placez les quatre cellules que vous avez créées entre deux balises <tr> ainsi :
 
-  
                                                                                                            <tr>
+  
                                                                                                            <tr>
   <td>Bonjour, je suis votre première cellule </td>
   <td>je suis votre deuxième cellule </td>
   <td>je suis votre troisième cellule </td>
@@ -274,14 +267,14 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 
                                                                                                          23. 
 
 
                                                                                                          
-
                                                                                                          Note: Vous pouvez également trouver cela sur GitHub simple-table.html (voir en direct aussi).
                                                                                                          
+
                                                                                                          Note : Vous pouvez également trouver cela sur GitHub simple-table.html (voir en direct aussi).
                                                                                                          
 
                                                                                                          
 
-
                                                                                                          Ajouter des en-têtes avec <th>
                                                                                                          
+
                                                                                                          Ajouter des en-têtes avec <th>
                                                                                                          
 
 
                                                                                                          Intéressons-nous maintenant aux en-têtes du tableau — cellules spéciales qui débutent une ligne ou une colonne et définissent le type de données que contiennent la rangée ou la colonne (à titre d'exemple, voir les cellules "Personne" et "Âge" dans le premier exemple illustré dans cet article). Pour comprendre pourquoi ils sont utiles, regardez l'exemple du tableau suivant. Tout d'abord, le code source :
                                                                                                          
 
-
                                                                                                          <table>
+
                                                                                                          <table>
   <tr>
     <td>&nbsp;</td>
     <td>Knocky</td>
@@ -369,12 +362,12 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 
 
                                                                                                            
  
                                                                                                          1. En premier lieu, faites une copie des fichiers dogs-table.html et minimal-table.css dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple « Dogs » ci-dessus.
                                                                                                            2. 
- 
                                                                                                          2. Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <th> (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise <td>, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les <td> des cellules entourant le tableau par des <th>.
                                                                                                            3. 
+ 
                                                                                                          3. Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <th> (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise <td>, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les <td> des cellules entourant le tableau par des <th>.
                                                                                                            4. 
  
                                                                                                          4. Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes.
                                                                                                            5. 
 
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Vous pouvez trouver notre exemple achevé dogs-table-fixed.html sur GitHub (voir en direct aussi).
                                                                                                          
+
                                                                                                          Note : Vous pouvez trouver notre exemple achevé dogs-table-fixed.html sur GitHub (voir en direct aussi).
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Pourquoi les en-têtes sont-ils utiles ?
                                                                                                          
@@ -382,7 +375,7 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 
                                                                                                          Nous avons déjà partiellement répondu à cette question — il vous est plus facile de trouver les données que vous cherchez quand les en-têtes sont marqués clairement, et la conception globale du tableau paraît meilleure.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Les en-têtes de tableau sont accompagnés d'un style par défaut — ils sont en gras et centrés même si vous n'ajoutez pas votre propre style pour les démarquer.
                                                                                                          
+
                                                                                                          Note : Les en-têtes de tableau sont accompagnés d'un style par défaut — ils sont en gras et centrés même si vous n'ajoutez pas votre propre style pour les démarquer.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Les en-têtes de tableau ont un autre avantage — avec l'attribut scope (que nous étudierons dans le prochain article), ils rendent les tableaux plus accessibles en associant chaque en-tête à toutes les données des cellules d'une ligne ou d'une colonne. Les lecteurs d'écran peuvent alors lire toute une ligne ou une colonne de données, ce qui peut être très utile.
                                                                                                          
@@ -393,7 +386,7 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 
 
                                                                                                          Le code initial ressemble à cela :
                                                                                                          
 
-
                                                                                                          <table>
+
                                                                                                          <table>
   <tr>
     <th>Animaux</th>
   </tr>
@@ -461,19 +454,17 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 
 
 
                                                                                                          
-
                                                                                                          Note : Vous pouvez trouver l'exemple achevé dans animals-table-fixed.html sur GitHub (voir en direct aussi).
                                                                                                          
+
                                                                                                          Note : Vous pouvez trouver l'exemple achevé dans animals-table-fixed.html sur GitHub (voir en direct aussi).
                                                                                                          
 
                                                                                                          
 
-
-
                                                                                                          
-
 
                                                                                                          Attribuer un style commun aux colonnes
                                                                                                          
 
-
                                                                                                          Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments <col> and <colgroup>. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne  — vous devez généralement spécifier les éléments de style dans chaque  <td> ou <th> de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.
                                                                                                          
+
                                                                                                          Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments <col> and <colgroup>. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne  — vous devez généralement spécifier les éléments de style dans chaque  <td> ou <th> de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.
                                                                                                          
 
+
                                                                                                          Premier exemple
                                                                                                          
 
                                                                                                          Observez l'exemple simple suivant :
                                                                                                          
 
-
                                                                                                          <table>
+
                                                                                                          <table>
   <tr>
     <th>Data 1</th>
     <th style="background-color: yellow">Data 2</th>
@@ -489,27 +480,13 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 </table>
                                                                                                          
 
 
                                                                                                          Ce qui nous donne comme résultat :
                                                                                                          
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
                                                                                                          Data 1Data 2
                                                                                                          CalcuttaOrange
                                                                                                          RobotsJazz
                                                                                                          
+
                                                                                                          {{EmbedLiveSample("Premier_exemple")}}
                                                                                                          
 
 
                                                                                                          Ce n'est pas idéal, car nous devons répéter les informations de style dans les trois cellules de la colonne  (nous aurions probablement défini une classe dans un projet réel et spécifié le style dans une feuille de style séparée). À la place, nous pouvons préciser l'information une seule fois dans un élément <col>. Les éléments <col> sont utilisés dans un conteneur <colgroup> juste en-dessous de la balise <table>. Nous pourrions créer le même effet que  celui vu plus haut en spécifiant notre tableau comme suit :
                                                                                                          
 
-
                                                                                                           <table>
+
                                                                                                          Autres exemples
                                                                                                          
+
+
                                                                                                           <table>
    <colgroup>
     <col>
     <col style="background-color: yellow">
@@ -532,13 +509,13 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 
 
                                                                                                          Si nous voulions appliquer les informations de style aux deux colonnes, nous devrions juste inclure un élément <col> avec un attribut span, comme ceci :
                                                                                                          
 
-
                                                                                                          <colgroup>
+
                                                                                                          <colgroup>
   <col style="background-color: yellow" span="2">
 </colgroup>
                                                                                                          
 
 
                                                                                                          Comme colspan et rowspan, span reçoit une valeur numérique qui précise le nombre de colonnes sur lesquelles le style s'applique.
                                                                                                          
 
-
                                                                                                          Apprentissage actif : colgroup et col
                                                                                                          
+
                                                                                                          Apprentissage actif : colgroup et col
                                                                                                          
 
 
                                                                                                          Maintenant, il est temps de vous y mettre vous-même.
                                                                                                          
 
@@ -559,7 +536,7 @@ original_slug: Apprendre/HTML/Tableaux/Basics
  
                                                                                                        23. Les deux derniers jours sont libres, alors pas de couleur de fond mais une largeur à spécifier ; la valeur de votre attribut style est width: 42px;
                                                                                                          24. 
 
 
-
                                                                                                          Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version  timetable-fixed.html (à voir aussi directement) sur GitHub .
                                                                                                          
+
                                                                                                          Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version  timetable-fixed.html (à voir aussi directement) sur GitHub .
                                                                                                          
 
 
                                                                                                          Résumé
                                                                                                          
 
diff --git a/files/fr/learn/html/tables/index.html b/files/fr/learn/html/tables/index.html
index 1344ec014c..e29779b351 100644
--- a/files/fr/learn/html/tables/index.html
+++ b/files/fr/learn/html/tables/index.html
@@ -15,14 +15,14 @@ original_slug: Apprendre/HTML/Tableaux
 ---
 
                                                                                                          {{LearnSidebar}}
                                                                                                          
 
-
                                                                                                          Une tâche assez courante en HTML consiste à structurer des données sous forme de tableaux. HTML dispose d'un certain nombre d'éléments avec attributs à cet effet. Couplé avec un peu de CSS pour styliser ces tableaux, HTML facilite l'affichage d'informations dans des tableaux sur le web comme les emplois du temps de l'école par exemple, les horaires d'ouverture de la piscine du quartier ou des statistiques à propos de votre équipe de football ou de dinosaures favorite. Ce module parcourt tout ce que vous devez savoir pour structurer des données sous forme de tableaux en utilisant HTML.
                                                                                                          
+
                                                                                                          Une tâche assez courante en HTML consiste à structurer des données sous forme de tableaux. HTML dispose d'un certain nombre d'éléments avec attributs à cet effet. Couplé avec un peu de CSS pour styliser ces tableaux, HTML facilite l'affichage d'informations dans des tableaux sur le web comme les emplois du temps de l'école par exemple, les horaires d'ouverture de la piscine du quartier ou des statistiques à propos de votre équipe de football ou de dinosaures favorite. Ce module parcourt tout ce que vous devez savoir pour structurer des données sous forme de tableaux en utilisant HTML.
                                                                                                          
 
 
                                                                                                          Prérequis
                                                                                                          
 
 
                                                                                                          Avant de commencer ce module, vous devez déjà connaître les bases du HTML  — voyez Introduction au HTML.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous devriez essayer (la plupart) des exemples de code dans un programme de codage en ligne comme JSBin ou Thimble.
                                                                                                          
+
                                                                                                          Note : Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous devriez essayer (la plupart) des exemples de code dans un programme de codage en ligne comme JSBin ou Thimble.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Guides
                                                                                                          
diff --git a/files/fr/learn/html/tables/structuring_planet_data/index.html b/files/fr/learn/html/tables/structuring_planet_data/index.html
index 9732baa868..303bf2fdf9 100644
--- a/files/fr/learn/html/tables/structuring_planet_data/index.html
+++ b/files/fr/learn/html/tables/structuring_planet_data/index.html
@@ -8,27 +8,27 @@ original_slug: Apprendre/HTML/Tableaux/Structuring_planet_data
 
 
                                                                                                          {{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
                                                                                                          
 
-
                                                                                                          Dans notre évaluation, nous vous fournissons des données sur les planètes de notre système solaire pour vous permettre de les structurer dans un tableau HTML.
                                                                                                          
+
                                                                                                          Dans notre évaluation, nous vous fournissons des données sur les planètes de notre système solaire pour vous permettre de les structurer dans un tableau HTML.
                                                                                                          
 
-
+
                                                                                                          
-   
+   
-   
+   
                                                                                                          
  
   
                                                                                                          
    Prérequis :Avant de tenter cette évaluation, vous devez déjà avoir travaillé tous les articles de ce module.Avant de tenter cette évaluation, vous devez déjà avoir travaillé tous les articles de ce module.
   
                                                                                                          
   
                                                                                                          
    Objectif :Vérifier la compréhension des tableaux HTML et des fonctionnalités associées.Vérifier la compréhension des tableaux HTML et des fonctionnalités associées.
   
                                                                                                          
                                                                                                            
 
                                                                                                          
 
 
                                                                                                          Point de départ
                                                                                                          
 
-
                                                                                                          Pour commencer cette évaluation, créez des copies locales de blank-template.html, minimal-table.css et planets-data.txt dans un nouveau répertoire dans votre ordinateur.
                                                                                                          
+
                                                                                                          Pour commencer cette évaluation, créez des copies locales de blank-template.html, minimal-table.css et planets-data.txt dans un nouveau répertoire dans votre ordinateur.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: Vous pouvez aussi utiliser un site commeJSBin ou Thimble pour votre évaluation. Vous pouvez coller les HTML, CSS et JavaScript dans l'un de ces éditeurs en ligne. Si votre éditeur en ligne n'a pas de panneaux séparés JavaScript/CSS, n'hésitez pas à les mettre en ligne <script>/<style> dans la page HTML.
                                                                                                          
+
                                                                                                          Note : Vous pouvez aussi utiliser un site commeJSBin ou Thimble pour votre évaluation. Vous pouvez coller les HTML, CSS et JavaScript dans l'un de ces éditeurs en ligne. Si votre éditeur en ligne n'a pas de panneaux séparés JavaScript/CSS, n'hésitez pas à les mettre en ligne <script>/<style> dans la page HTML.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Résumé du projet
                                                                                                          
@@ -37,7 +37,7 @@ original_slug: Apprendre/HTML/Tableaux/Structuring_planet_data
 
 
                                                                                                          Le tableau terminé devrait ressembler à celui-ci :
                                                                                                          
 
-
                                                                                                          
+
                                                                                                          
 
 
                                                                                                          Vous pouvez aussi regarder l'exemple ici (sans regarder le code source — ne trichez pas !)
                                                                                                          
 
diff --git a/files/fr/learn/index.html b/files/fr/learn/index.html
index 5292847294..b21e54c010 100644
--- a/files/fr/learn/index.html
+++ b/files/fr/learn/index.html
@@ -16,7 +16,7 @@ original_slug: Apprendre
 ---
 
                                                                                                          {{LearnSidebar}}
                                                                                                          
 
-
                                                                                                          Bienvenue dans l'Espace d'apprentissage (Learning Area) de MDN. Cet ensemble d'articles a pour but de fournir aux développeurs web débutants tout ce dont ils ont besoin pour commencer à développer des sites web simples.
                                                                                                          
+
                                                                                                          Bienvenue dans l'Espace d'apprentissage (Learning Area) de MDN. Cet ensemble d'articles a pour but de fournir aux développeurs web débutants tout ce dont ils ont besoin pour commencer à développer des sites web simples.
                                                                                                          
 
 
                                                                                                          Le but de cette section de MDN n'est pas de vous faire passer de « débutant » à « expert », mais plutôt de vous mettre à l'aise avec les technologies. À partir de là, vous devriez être capable de vous débrouiller par vous-même, en utilisant le reste du contenu de MDN et d'autres ressources.
                                                                                                          
 
@@ -29,11 +29,9 @@ original_slug: Apprendre
 
                                                                                                          Si vous avez des questions concernant des sujets que vous aimeriez voir couverts ou si vous pensez qu'il en manque, envoyez-nous un message sur notre Forum de discussion.
                                                                                                          
 
 
                                                                                                          
-  
                                                                                                          Vous voulez devenir un développeur web front-end ?
                                                                                                          
-
+  
                                                                                                          Vous voulez devenir un développeur web front-end ?
                                                                                                          
   
                                                                                                          Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.
                                                                                                          
-
-  
                                                                                                          Commencer
                                                                                                          
+  
                                                                                                          Commencer
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Par où commencer ?
                                                                                                          
@@ -49,8 +47,8 @@ original_slug: Apprendre
   
                                                                                                          Lorsque vous aurez appris l'essentiel de HTML, CSS, et JavaScript, vous devriez étudier les outils de développement web côté client et éventuellement approfondir les frameworks JavaScript côté client, ainsi que la programmation des sites web côté serveur.
                                                                                                          
 
 
-
                                                                                                          
-  
                                                                                                          Note : Notre Glossaire fournit des définitions de la terminologie employée.
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : Notre Glossaire fournit des définitions de la terminologie employée.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          {{LearnBox({"title":"Entrée aléatoire dans le glossaire"})}}
                                                                                                          
diff --git a/files/fr/learn/javascript/asynchronous/async_await/index.html b/files/fr/learn/javascript/asynchronous/async_await/index.html
index fa4956f829..5955c0f27f 100644
--- a/files/fr/learn/javascript/asynchronous/async_await/index.html
+++ b/files/fr/learn/javascript/asynchronous/async_await/index.html
@@ -17,9 +17,9 @@ translation_of: Learn/JavaScript/Asynchronous/Async_await
 
 
                                                                                                          {{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
                                                                                                          
 
-
                                                                                                          Plus récemment, les fonctions async et le mot-clé await ont été ajoutés au langage JavaScript avec l'édition intitulée ECMAScript 2017. Ces fonctionnalités agissent essentiellement comme du sucre syntaxique sur les promesses, rendant le code asynchrone plus facile à écrire et à lire par la suite. Elles font en sorte que le code asynchrone ressemble davantage au code synchrone de la vieille école, et elles valent donc la peine d'être apprises. Cet article fournit les informations à connaître.
                                                                                                          
+
                                                                                                          Plus récemment, les fonctions async et le mot-clé await ont été ajoutés au langage JavaScript avec l'édition intitulée ECMAScript 2017. Ces fonctionnalités agissent essentiellement comme du sucre syntaxique sur les promesses, rendant le code asynchrone plus facile à écrire et à lire par la suite. Elles font en sorte que le code asynchrone ressemble davantage au code synchrone de la vieille école, et elles valent donc la peine d'être apprises. Cet article fournit les informations à connaître.
                                                                                                          
 
-
+
                                                                                                          
@@ -295,8 +295,7 @@ displayContent()
 
                                                                                                          Pour la gestion des erreurs, nous avons inclus un bloc .catch() sur notre appel displayContent() ; cela permettra de gérer les erreurs survenant dans les deux fonctions.
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          Il est également possible d'utiliser un bloc finally au sein d'une fonction asynchrone, à la place d'un bloc asynchrone .finally(), pour montrer un état final sur le déroulement de l'opération — vous pouvez voir cela en action dans notre exemple en direct (voir aussi le code source).
                                                                                                          
+  
                                                                                                          Note : Il est également possible d'utiliser un bloc finally au sein d'une fonction asynchrone, à la place d'un bloc asynchrone .finally(), pour montrer un état final sur le déroulement de l'opération — vous pouvez voir cela en action dans notre exemple en direct (voir aussi le code source).
                                                                                                          
 
                                                                                                          Gérer les ralentissements potentiellement causés par async/await
                                                                                                          
diff --git a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html b/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html
index 0e44c87232..0b71c56c49 100644
--- a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html
+++ b/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html
@@ -21,9 +21,9 @@ translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
 
 
                                                                                                          {{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
                                                                                                          
 
-
                                                                                                          Pour terminer ce module, nous vous proposons une brève discussion sur les différentes techniques et fonctionnalités asynchrones abordées tout au long de ce module, en examinant laquelle de ces techniques est la plus pertinente en fonction de la situation ainsi que des recommandations et des rappels des pièges courants le cas échéant.
                                                                                                          
+
                                                                                                          Pour terminer ce module, nous vous proposons une brève discussion sur les différentes techniques et fonctionnalités asynchrones abordées tout au long de ce module, en examinant laquelle de ces techniques est la plus pertinente en fonction de la situation ainsi que des recommandations et des rappels des pièges courants le cas échéant.
                                                                                                          
 
-
                                                                                                          
   
     
                                                                                                          
       Prérequis :
 
 
 
 
                                                                                                          
+
                                                                                                          
diff --git a/files/fr/learn/javascript/asynchronous/concepts/index.html b/files/fr/learn/javascript/asynchronous/concepts/index.html
index ebcb242eae..ee10969b47 100644
--- a/files/fr/learn/javascript/asynchronous/concepts/index.html
+++ b/files/fr/learn/javascript/asynchronous/concepts/index.html
@@ -12,9 +12,9 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts
 ---
 
                                                                                                          {{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
                                                                                                          
 
-
                                                                                                          Dans cet article, nous allons passer en revue un certain nombre de concepts importants relatifs à la programmation asynchrone et à la façon dont elle se présente dans les navigateurs web et JavaScript. Vous devriez comprendre ces concepts avant de travailler sur les autres articles du module.
                                                                                                          
+
                                                                                                          Dans cet article, nous allons passer en revue un certain nombre de concepts importants relatifs à la programmation asynchrone et à la façon dont elle se présente dans les navigateurs web et JavaScript. Vous devriez comprendre ces concepts avant de travailler sur les autres articles du module.
                                                                                                          
 
-
                                                                                                          
   
     
                                                                                                          
       Prérequis :
                                                                                                          
+
                                                                                                          
@@ -33,7 +33,7 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts
 
 
                                                                                                          Les utilisatrices et utilisateurs de macOS, par exemple, le voient parfois avec le curseur rotatif de couleur arc-en-ciel (ou « ballon de plage », comme on l'appelle souvent). Ce curseur est la façon dont le système d'exploitation dit "le programme que vous utilisez actuellement a dû s'arrêter et attendre que quelque chose se termine, et cela prend tellement de temps que je craignais que vous vous demandiez ce qui se passe".
                                                                                                          
 
-
                                                                                                          Spinner multicolore pour macOS avec ballon de plage.
                                                                                                          
+
                                                                                                          Spinner multicolore pour macOS avec ballon de plage.
                                                                                                          C'est une expérience frustrante qui n'est pas une bonne utilisation de la puissance de traitement de l'ordinateur, surtout à une époque où les ordinateurs disposent de plusieurs cœurs de processeur. Il est inutile de rester assis à attendre quelque chose alors que vous pouvez laisser une tâche se dérouler sur un autre cœur de processeur et être averti quand elle a terminé. Cela vous permet d'effectuer d'autres travaux en même temps, ce qui est la base de la programmation asynchrone. C'est à l'environnement de programmation que vous utilisez (les navigateurs web, dans le cas du développement web) de vous fournir des API qui vous permettent d'exécuter de telles tâches de manière asynchrone.
                                                                                                          
@@ -63,9 +63,8 @@ btn.addEventListener('click', () => {
 
 
                                                                                                          Lorsque vous exécutez l'exemple, ouvrez votre console JavaScript, puis cliquez sur le bouton. Vous remarquerez que le paragraphe n'apparaît qu'une fois que le calcul des dates est terminé et que le message de la console a été enregistré. Le code s'exécute dans l'ordre où il apparaît dans la source, et la dernière opération ne s'exécute pas tant que la première n'est pas terminée.
                                                                                                          
 
-
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          L'exemple précédent est très peu réaliste. Vous ne calculeriez jamais 10 millions de dates sur une véritable application web ! Il sert cependant à vous donner l'idée de base.
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : L'exemple précédent est très peu réaliste. Vous ne calculeriez jamais 10 millions de dates sur une véritable application web ! Il sert cependant à vous donner l'idée de base.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Dans notre deuxième exemple, simple-sync-ui-blocking.html (voir en direct), nous simulons quelque chose de légèrement plus réaliste que vous pourriez rencontrer sur une page réelle. Nous bloquons l'interactivité de l'utilisateur avec le rendu de l'interface utilisateur. Dans cet exemple, nous avons deux boutons :
                                                                                                          
@@ -92,9 +91,8 @@ alertBtn.addEventListener('click', () =>
 
 
                                                                                                          Si vous cliquez sur le premier bouton, puis rapidement sur le second, vous verrez que l'alerte n'apparaît pas avant que les cercles aient fini d'être rendus. La première opération bloque la seconde jusqu'à ce qu'elle ait fini de s'exécuter.
                                                                                                          
 
-
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          D'accord, dans notre cas, c'est laid et nous simulons l'effet de blocage, mais il s'agit d'un problème courant contre lequel les développeuses et développeurs d'applications réelles se battent sans cesse pour atténuer les impacts indésirables.
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : D'accord, dans notre cas, c'est laid et nous simulons l'effet de blocage, mais il s'agit d'un problème courant contre lequel les développeuses et développeurs d'applications réelles se battent sans cesse pour atténuer les impacts indésirables.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Pourquoi ? La réponse est que JavaScript, de manière générale, ne s'exécute que sur un seul thread. À ce stade, nous devons introduire le concept de threads.
                                                                                                          
diff --git a/files/fr/learn/javascript/asynchronous/index.html b/files/fr/learn/javascript/asynchronous/index.html
index 31e2c8bfbe..0688d5de42 100644
--- a/files/fr/learn/javascript/asynchronous/index.html
+++ b/files/fr/learn/javascript/asynchronous/index.html
@@ -19,12 +19,12 @@ translation_of: Learn/JavaScript/Asynchronous
 ---
 
                                                                                                          {{LearnSidebar}}
                                                                                                          
 
-
                                                                                                          Dans ce module, nous examinons le JavaScript asynchrone, pourquoi il est important et comment il peut être utilisé afin de gérer efficacement les opérations potentiellement bloquantes telles que la récupération de ressources sur un serveur.
                                                                                                          
+
                                                                                                          Dans ce module, nous examinons le JavaScript asynchrone, pourquoi il est important et comment il peut être utilisé afin de gérer efficacement les opérations potentiellement bloquantes telles que la récupération de ressources sur un serveur.
                                                                                                          
 
 
                                                                                                          
-  
                                                                                                          Vous cherchez à devenir une développeuse ou un développeur web front-end ?
                                                                                                          
+  
                                                                                                          Vous cherchez à devenir une développeuse ou un développeur web front-end ?
                                                                                                          
   
                                                                                                          Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.
                                                                                                          
-  
                                                                                                          Commencer
+  
                                                                                                          Commencer
   
                                                                                                          
 
                                                                                                          
 
@@ -35,8 +35,7 @@ translation_of: Learn/JavaScript/Asynchronous
 
                                                                                                          Si vous n'êtes pas familier avec le concept de programmation asynchrone, vous devriez absolument commencer par l'article Concepts généraux de programmation asynchrone de ce module. Si vous connaissez ce concept, vous pouvez probablement passer directement au module Introduction au JavaScript asynchrone.
                                                                                                          
 
 
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          Si vous travaillez sur un ordinateur/tablette/autre appareil où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tel que JSBin ou Glitch.
                                                                                                          
+  
                                                                                                          Note : Si vous travaillez sur un ordinateur/tablette/autre appareil où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tel que JSBin ou Glitch.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Guides
                                                                                                          
diff --git a/files/fr/learn/javascript/asynchronous/introducing/index.html b/files/fr/learn/javascript/asynchronous/introducing/index.html
index b58da5b180..1a352017dd 100644
--- a/files/fr/learn/javascript/asynchronous/introducing/index.html
+++ b/files/fr/learn/javascript/asynchronous/introducing/index.html
@@ -19,9 +19,9 @@ translation_of: Learn/JavaScript/Asynchronous/Introducing
 
 
                                                                                                          {{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}
                                                                                                          
 
-
                                                                                                          Dans cet article, nous récapitulons brièvement les problèmes associés au JavaScript synchrone, et nous jetons un premier coup d'œil à certaines des différentes techniques asynchrones que vous rencontrerez, en montrant comment elles peuvent nous aider à résoudre ces problèmes.
                                                                                                          
+
                                                                                                          Dans cet article, nous récapitulons brièvement les problèmes associés au JavaScript synchrone, et nous jetons un premier coup d'œil à certaines des différentes techniques asynchrones que vous rencontrerez, en montrant comment elles peuvent nous aider à résoudre ces problèmes.
                                                                                                          
 
-
                                                                                                          
   
     
                                                                                                          
       Prérequis :
 
 
 
                                                                                                          
+
                                                                                                          
@@ -68,15 +68,12 @@ btn.addEventListener('click', () => {
 
 
                                                                                                          Ainsi, dans l'exemple ci-dessus, après avoir cliqué sur le bouton, le paragraphe n'apparaîtra qu'après avoir appuyé sur le bouton OK dans la boîte d'alerte. Vous pouvez l'essayer vous-même :
                                                                                                          
 
-
+
                                                                                                          {{EmbedLiveSample('synchronous_javascript', '100%', '110px')}}
                                                                                                          
 
-
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          Il est important de se rappeler que alert(), tout en étant très utile pour démontrer une opération de blocage synchrone, est horrible à utiliser dans des applications du monde réel.
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : Il est important de se rappeler que alert(), tout en étant très utile pour démontrer une opération de blocage synchrone, est horrible à utiliser dans des applications du monde réel.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          JavaScript asynchrone
                                                                                                          
@@ -162,9 +159,8 @@ gods.forEach(function (eachName, index){
   console.log('Problème de récupération : ' + err.message);
 });
 
-
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          Vous pouvez trouver la version finale sur GitHub (voir la source ici, et aussi voir le fonctionnement en direct).
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : Vous pouvez trouver la version finale sur GitHub (voir la source ici, et aussi voir le fonctionnement en direct).
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Nous voyons ici fetch() prendre un seul paramètre - l'URL d'une ressource que vous souhaitez récupérer sur le réseau - et renvoyer une promesse. La promesse est un objet représentant l'achèvement ou l'échec de l'opération asynchrone. Elle représente un état intermédiaire, en quelque sorte. En substance, c'est la façon dont le navigateur dit « Je promets de vous donner la réponse dès que possible », d'où le nom de « promesse ».
                                                                                                          
@@ -176,9 +172,8 @@ gods.forEach(function (eachName, index){
   
                                                                                                        24. Le bloc catch() à la fin s'exécute si l'un des blocs .then() échoue - de manière similaire aux blocs synchrones try...catch, un objet d'erreur est mis à disposition à l'intérieur du catch(), qui peut être utilisé pour signaler le type d'erreur qui s'est produit. Notez cependant que le try...catch synchrone ne fonctionnera pas avec les promesses, bien qu'il fonctionne avec async/await, comme vous l'apprendrez plus tard.
                                                                                                          25. 
 
 
-
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          Vous en apprendrez beaucoup plus sur les promesses plus tard dans le module, alors ne vous inquiétez pas si vous ne les comprenez pas encore complètement.
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : Vous en apprendrez beaucoup plus sur les promesses plus tard dans le module, alors ne vous inquiétez pas si vous ne les comprenez pas encore complètement.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          La file d'attente des événements
                                                                                                          
@@ -255,18 +250,16 @@ console.log(`Tout est bon !`);
 
 
                                                                                                          Cela est dû au fait qu'au moment où le navigateur tente d'exécuter la troisième instruction console.log(), le bloc fetch() n'a pas fini de s'exécuter, de sorte que la variable image n'a pas reçu de valeur.
                                                                                                          
 
-
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          Pour des raisons de sécurité, vous ne pouvez pas fetch() les fichiers de votre système de fichiers local (ou exécuter d'autres opérations de ce type localement) ; pour exécuter l'exemple ci-dessus localement, vous devrez le faire passer par un serveur web local.
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : Pour des raisons de sécurité, vous ne pouvez pas fetch() les fichiers de votre système de fichiers local (ou exécuter d'autres opérations de ce type localement) ; pour exécuter l'exemple ci-dessus localement, vous devrez le faire passer par un serveur web local.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Apprentissage actif : rendez tout asynchrone !
                                                                                                          
 
 
                                                                                                          Pour corriger l'exemple problématique de fetch() et faire en sorte que les trois déclarations console.log() apparaissent dans l'ordre souhaité, vous pourriez faire en sorte que la troisième déclaration console.log() s'exécute également de manière asynchrone. Cela peut être fait en la déplaçant à l'intérieur d'un autre bloc .then() enchaîné à la fin du deuxième, ou en la déplaçant à l'intérieur du deuxième bloc then(). Essayez de corriger cela maintenant.
                                                                                                          
 
-
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          Si vous êtes bloqué, vous pouvez trouver une réponse ici (voyez-la fonctionner en direct). Vous pouvez également trouver beaucoup plus d'informations sur les promesses dans notre guide Gérer les opérations asynchrones avec élégance grâce aux Promesses, plus loin dans ce module.
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : Si vous êtes bloqué, vous pouvez trouver une réponse ici (voyez-la fonctionner en direct). Vous pouvez également trouver beaucoup plus d'informations sur les promesses dans notre guide Gérer les opérations asynchrones avec élégance grâce aux Promesses, plus loin dans ce module.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Conclusion
                                                                                                          
diff --git a/files/fr/learn/javascript/asynchronous/promises/index.html b/files/fr/learn/javascript/asynchronous/promises/index.html
index 499dcb87be..69f6de6a21 100644
--- a/files/fr/learn/javascript/asynchronous/promises/index.html
+++ b/files/fr/learn/javascript/asynchronous/promises/index.html
@@ -19,9 +19,9 @@ translation_of: Learn/JavaScript/Asynchronous/Promises
 
 
                                                                                                          {{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
                                                                                                          
 
-
                                                                                                          Les promesses sont une fonctionnalité relativement nouvelle du langage JavaScript qui vous permet de reporter d'autres actions jusqu'à ce qu'une action précédente soit terminée, ou de répondre à son échec. Ceci est utile pour mettre en place une séquence d'opérations asynchrones afin qu'elles fonctionnent correctement. Cet article vous montre comment les promesses fonctionnent, comment vous les verrez utilisées avec les API Web, et comment écrire les vôtres.
                                                                                                          
+
                                                                                                          Les promesses sont une fonctionnalité relativement nouvelle du langage JavaScript qui vous permet de reporter d'autres actions jusqu'à ce qu'une action précédente soit terminée, ou de répondre à son échec. Ceci est utile pour mettre en place une séquence d'opérations asynchrones afin qu'elles fonctionnent correctement. Cet article vous montre comment les promesses fonctionnent, comment vous les verrez utilisées avec les API Web, et comment écrire les vôtres.
                                                                                                          
 
-
                                                                                                          
   
     
                                                                                                          
       Prérequis :
 
 
                                                                                                          
+
                                                                                                          
@@ -69,9 +69,8 @@ translation_of: Learn/JavaScript/Asynchronous/Promises
 
 
                                                                                                          La chose importante ici est que l'appel getUserMedia() revient presque immédiatement, même si le flux de la caméra n'a pas encore été obtenu. Même si la fonction handleCallButton() est déjà retournée au code qui l'a appelée, lorsque getUserMedia() a fini de travailler, elle appelle le gestionnaire que vous fournissez. Tant que l'application ne suppose pas que le flux a commencé, elle peut continuer à fonctionner.
                                                                                                          
 
-
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          Vous pouvez en apprendre davantage sur ce sujet quelque peu avancé, si cela vous intéresse, dans l'article L'essentiel du WebRTC. Un code similaire à celui-ci, mais beaucoup plus complet, est utilisé dans cet exemple.
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : Vous pouvez en apprendre davantage sur ce sujet quelque peu avancé, si cela vous intéresse, dans l'article L'essentiel du WebRTC. Un code similaire à celui-ci, mais beaucoup plus complet, est utilisé dans cet exemple.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Le problème des fonctions de rappel
                                                                                                          
@@ -146,9 +145,8 @@ translation_of: Learn/JavaScript/Asynchronous/Promises
 
 
                                                                                                          Cependant, la lecture n'est pas aussi facile et cette syntaxe peut ne pas être utilisable si vos blocs sont plus complexes que ce que nous avons montré ici.
                                                                                                          
 
-
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          Vous pouvez apporter d'autres améliorations avec la syntaxe async/await, que nous aborderons dans le prochain article.
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : Vous pouvez apporter d'autres améliorations avec la syntaxe async/await, que nous aborderons dans le prochain article.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Dans leur forme la plus basique, les promesses sont similaires aux écouteurs d'événements, mais avec quelques différences :
                                                                                                          
@@ -164,9 +162,8 @@ translation_of: Learn/JavaScript/Asynchronous/Promises
 
 
                                                                                                          Dans le premier exemple, nous allons utiliser la méthode fetch() pour récupérer une image sur le web, la méthode blob() pour transformer le contenu brut du corps de la réponse fetch en un objet Blob, puis afficher ce blob à l'intérieur d'un élément <img>. Cet exemple est très similaire à celui que nous avons examiné dans le premier article, mais nous le ferons un peu différemment au fur et à mesure que nous vous ferons construire votre propre code basé sur des promesses.
                                                                                                          
 
-
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          L'exemple suivant ne fonctionnera pas si vous l'exécutez directement à partir du fichier (c'est-à-dire via une URL file://). Vous devez l'exécuter via un serveur de test local, ou utiliser une solution en ligne telle que Glitch ou les pages GitHub.
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : L'exemple suivant ne fonctionnera pas si vous l'exécutez directement à partir du fichier (c'est-à-dire via une URL file://). Vous devez l'exécuter via un serveur de test local, ou utiliser une solution en ligne telle que Glitch ou les pages GitHub.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                            
@@ -183,9 +180,8 @@ translation_of: Learn/JavaScript/Asynchronous/Promises
   
   
                                                                                                          1. 
     
                                                                                                            Pour répondre à l'achèvement réussi de l'opération lorsque cela se produit (dans ce cas, lorsqu'une réponse est retournée), nous invoquons la méthode .then() de l'objet promesse. La fonction de rappel à l'intérieur du bloc .then() s'exécute uniquement lorsque l'appel de la promesse se termine avec succès et retourne l'objet Response — en langage de promesse, lorsqu'elle a été remplie (fullfilled en anglais). On lui passe l'objet Response retourné en tant que paramètre.
                                                                                                            
-    
                                                                                                            
-      
                                                                                                            Note :
                                                                                                            
-      
                                                                                                            Le fonctionnement d'un bloc .then() est similaire à celui de l'ajout d'un écouteur d'événements à un objet à l'aide de AddEventListener(). Il ne s'exécute pas avant qu'un événement ne se produise (lorsque la promesse se réalise). La différence la plus notable est qu'un .then() ne s'exécutera qu'une fois à chaque fois qu'il sera utilisé, alors qu'un écouteur d'événements pourrait être invoqué plusieurs fois.
                                                                                                            
+    
                                                                                                            
+      
                                                                                                            Note : Le fonctionnement d'un bloc .then() est similaire à celui de l'ajout d'un écouteur d'événements à un objet à l'aide de AddEventListener(). Il ne s'exécute pas avant qu'un événement ne se produise (lorsque la promesse se réalise). La différence la plus notable est qu'un .then() ne s'exécutera qu'une fois à chaque fois qu'il sera utilisé, alors qu'un écouteur d'événements pourrait être invoqué plusieurs fois.
                                                                                                            
     
                                                                                                            
     
                                                                                                            Nous exécutons immédiatement la méthode blob() sur cette réponse pour nous assurer que le corps de la réponse est entièrement téléchargé, et lorsqu'il est disponible, le transformer en un objet Blob avec lequel nous pouvons faire quelque chose. Le résultat de cette méthode est retourné comme suit :
                                                                                                            
     
                                                                                                            response => response.blob()
                                                                                                            
@@ -220,9 +216,8 @@ document.body.appendChild(image);
 
 
                                                                                                            Si vous enregistrez le fichier HTML que vous venez de créer et le chargez dans votre navigateur, vous verrez que l'image s'affiche dans la page comme prévu. Bon travail !
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Vous remarquerez probablement que ces exemples sont quelque peu artificiels. Vous pourriez tout simplement vous passer de toute la chaîne fetch() et blob(), et simplement créer un élément <img> et définir la valeur de son attribut src à l'URL du fichier image, coffee.jpg. Nous avons toutefois choisi cet exemple parce qu'il démontre les promesses d'une manière simple et agréable, plutôt que pour sa pertinence dans le monde réel.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Vous remarquerez probablement que ces exemples sont quelque peu artificiels. Vous pourriez tout simplement vous passer de toute la chaîne fetch() et blob(), et simplement créer un élément <img> et définir la valeur de son attribut src à l'URL du fichier image, coffee.jpg. Nous avons toutefois choisi cet exemple parce qu'il démontre les promesses d'une manière simple et agréable, plutôt que pour sa pertinence dans le monde réel.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Réagir à un échec
                                                                                                            
@@ -237,9 +232,8 @@ document.body.appendChild(image);
 
 
                                                                                                            Cela ne fait pas beaucoup plus que si vous ne preniez pas la peine d'inclure le bloc .catch() du tout, mais pensez-y - cela nous permet de contrôler la gestion des erreurs exactement comme nous le voulons. Dans une application réelle, votre bloc .catch() pourrait réessayer de récupérer l'image, ou afficher une image par défaut, ou demander à l'utilisateur de fournir une URL d'image différente, ou autre.
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Vous pouvez voir notre version de l'exemple en direct (voir également son code source).
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Vous pouvez voir notre version de l'exemple en direct (voir également son code source).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Enchaîner les blocs
                                                                                                            
@@ -266,9 +260,8 @@ document.body.appendChild(image);
 
 
                                                                                                            Gardez à l'esprit que la valeur renvoyée par une promesse remplie devient le paramètre transmis à la fonction de rappel du bloc .then() suivant.
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Les blocs .then()/.catch() dans les promesses sont essentiellement l'équivalent asynchrone d'un bloc try...catch dans du code synchrone. Gardez à l'esprit que le try...catch synchrone ne fonctionnera pas dans du code asynchrone.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Les blocs .then()/.catch() dans les promesses sont essentiellement l'équivalent asynchrone d'un bloc try...catch dans du code synchrone. Gardez à l'esprit que le try...catch synchrone ne fonctionnera pas dans du code asynchrone.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Récapitulatif de la terminologie des promesses
                                                                                                            
@@ -394,14 +387,12 @@ document.body.appendChild(para);
 
 
                                                                                                            Le code que nous avons fourni ici pour l'affichage des articles est assez rudimentaire, mais il fonctionne comme une explication pour le moment.
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Si vous êtes bloqué, vous pouvez comparer votre version du code à la nôtre, pour voir à quoi elle est censée ressembler - voir en direct, et voir le code source.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Si vous êtes bloqué, vous pouvez comparer votre version du code à la nôtre, pour voir à quoi elle est censée ressembler - voir en direct, et voir le code source.
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Si vous amélioriez ce code, vous pourriez vouloir boucler sur une liste d'éléments à afficher, en récupérant et en décodant chacun d'eux, puis boucler sur les résultats à l'intérieur de Promise.all(), en exécutant une fonction différente pour afficher chacun d'eux en fonction du type de code. Cela permettrait de fonctionner pour n'importe quel nombre d'éléments, pas seulement trois.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Si vous amélioriez ce code, vous pourriez vouloir boucler sur une liste d'éléments à afficher, en récupérant et en décodant chacun d'eux, puis boucler sur les résultats à l'intérieur de Promise.all(), en exécutant une fonction différente pour afficher chacun d'eux en fonction du type de code. Cela permettrait de fonctionner pour n'importe quel nombre d'éléments, pas seulement trois.
                                                                                                            
   
                                                                                                            De plus, vous pourriez déterminer quel est le type de fichier récupéré sans avoir besoin d'une propriété type explicite. Vous pourriez, par exemple, vérifier l'en-tête HTTP Content-Type de la réponse dans chaque cas en utilisant response.headers.get("content-type"), puis agir en conséquence.
                                                                                                            
 
                                                                                                            
 
@@ -456,9 +447,8 @@ document.body.appendChild(para);
 
 
                                                                                                            Cela permet d'envoyer un simple message à la console pour nous dire quand chaque tentative de récupération est terminée.
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            then()/catch()/finally() est l'équivalent asynchrone de try/catch/finally en code synchrone.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : then()/catch()/finally() est l'équivalent asynchrone de try/catch/finally en code synchrone.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Construire vos propres promesses personnalisées
                                                                                                            
@@ -496,9 +486,8 @@ document.body.appendChild(para);
 
 
                                                                                                            L'exemple ci-dessus n'est pas très flexible - la promesse ne peut jamais s'accomplir qu'avec une seule chaîne de caractères, et elle n'a aucune sorte de condition reject() spécifiée (il est vrai que setTimeout() n'a pas vraiment de condition d'échec, donc cela n'a pas d'importance pour cet exemple).
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Pourquoi resolve(), et pas fulfill() ? La réponse que nous vous donnerons, pour l'instant, est c'est compliqué.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Pourquoi resolve(), et pas fulfill() ? La réponse que nous vous donnerons, pour l'instant, est c'est compliqué.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Rejeter une promesse personnalisée
                                                                                                            
@@ -545,9 +534,8 @@ document.body.appendChild(para);
 
 
                                                                                                            Lorsque vous enregistrez et exécutez le code tel quel, après une seconde, vous obtiendrez le message d'alerte. Essayez maintenant de définir le message sur une chaîne vide ou l'intervalle sur un nombre négatif, par exemple, et vous pourrez voir la promesse rejetée avec les messages d'erreur appropriés ! Vous pouvez également essayer de faire autre chose avec le message résolu plutôt que de simplement créer une alerte.
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Vous pouvez trouver notre version de cet exemple sur GitHub sur custom-promise2.html (voir aussi le code source).
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Vous pouvez trouver notre version de cet exemple sur GitHub sur custom-promise2.html (voir aussi le code source).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Un exemple plus concret
                                                                                                            
diff --git a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html
index c776e4773b..e2f90a12fb 100644
--- a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html
+++ b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html
@@ -20,9 +20,9 @@ translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
 
 
                                                                                                            {{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
                                                                                                            
 
-
                                                                                                            Ce tutoriel présente les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période de temps déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), discute de leur utilité et examine leurs problèmes inhérents.
                                                                                                            
+
                                                                                                            Ce tutoriel présente les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période de temps déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), discute de leur utilité et examine leurs problèmes inhérents.
                                                                                                            
 
-
                                                                                                          
   
     
                                                                                                          
       Prérequis :
                                                                                                          
+
                                                                                                          
@@ -66,9 +66,8 @@ translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
   
                                                                                                        25. Zéro ou plusieurs valeurs représentant les paramètres que vous souhaitez transmettre à la fonction lors de son exécution.
                                                                                                          26. 
 
-
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          La quantité de temps spécifiée (ou le délai) n'est pas le temps garanti à l'exécution, mais plutôt le temps minimum à l'exécution. Les rappels que vous passez à ces fonctions ne peuvent pas s'exécuter tant que la pile du processus principal n'est pas vide.
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : La quantité de temps spécifiée (ou le délai) n'est pas le temps garanti à l'exécution, mais plutôt le temps minimum à l'exécution. Les rappels que vous passez à ces fonctions ne peuvent pas s'exécuter tant que la pile du processus principal n'est pas vide.
                                                                                                          
   
                                                                                                          En conséquence, un code comme setTimeout(fn, 0) s'exécutera dès que la pile sera vide, pas immédiatement. Si vous exécutez un code comme setTimeout(fn, 0) mais qu'immédiatement après vous exécutez une boucle qui compte de 1 à 10 milliards, votre rappel sera exécuté après quelques secondes.
                                                                                                          
 
                                                                                                          
 
@@ -116,9 +115,8 @@ let maSalutation = setTimeout(direBonjour, 2000);
 
 
                                                                                                          clearTimeout(maSalutation);
                                                                                                          
 
-
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          Voir greeter-app.html pour une démo un peu plus élaborée qui permet de définir le nom de la personne à saluer dans un formulaire, et d'annuler la salutation à l'aide d'un bouton séparé (voir aussi le code source).
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : Voir greeter-app.html pour une démo un peu plus élaborée qui permet de définir le nom de la personne à saluer dans un formulaire, et d'annuler la salutation à l'aide d'un bouton séparé (voir aussi le code source).
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          setInterval()
                                                                                                          
@@ -179,9 +177,8 @@ clearInterval(myInterval);
   
                                                                                                        26. Vous devriez probablement désactiver le bouton de démarrage après l'avoir pressé une fois, et le réactiver après l'avoir arrêté/réinitialisé. Sinon, les pressions multiples sur le bouton de démarrage appliqueront plusieurs setInterval() à l'horloge, ce qui entraînera un comportement erroné.
                                                                                                          27. 
 
 
-
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          Si vous êtes bloqué, vous pouvez trouver notre version ici (voir le code source).
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : Si vous êtes bloqué, vous pouvez trouver notre version ici (voir le code source).
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Choses à garder à l'esprit concernant setTimeout() et setInterval()
                                                                                                          
@@ -251,9 +248,8 @@ alert('Hello');
 
 
                                                                                                          (Plus d'informations à ce sujet sur CreativeJS (en).)
                                                                                                          
 
-
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          Vous trouverez des exemples d'utilisation de requestAnimationFrame() ailleurs dans le cours - voir par exemple Dessiner des éléments graphiques, et La construction d'objet en pratique.
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : Vous trouverez des exemples d'utilisation de requestAnimationFrame() ailleurs dans le cours - voir par exemple Dessiner des éléments graphiques, et La construction d'objet en pratique.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          La méthode prend comme argument un rappel à invoquer avant le repeignage. C'est le modèle général dans lequel vous le verrez utilisé :
                                                                                                          
@@ -267,9 +263,8 @@ draw();
 
 
                                                                                                          L'idée est de définir une fonction dans laquelle votre animation est mise à jour (par exemple, vos sprites sont déplacés, le score est mis à jour, les données sont rafraîchies, ou autre). Ensuite, vous l'appelez pour lancer le processus. À la fin du bloc de fonctions, vous appelez requestAnimationFrame() avec la référence de la fonction passée en paramètre, et cela indique au navigateur de rappeler la fonction lors du prochain rafraîchissement de l'affichage. Ceci est ensuite exécuté en continu, car le code appelle requestAnimationFrame() de manière récursive.
                                                                                                          
 
-
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          Si vous souhaitez réaliser une sorte d'animation DOM simple et constante, les animations CSS sont probablement plus rapides. Elles sont calculées directement par le code interne du navigateur, plutôt que par JavaScript.
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : Si vous souhaitez réaliser une sorte d'animation DOM simple et constante, les animations CSS sont probablement plus rapides. Elles sont calculées directement par le code interne du navigateur, plutôt que par JavaScript.
                                                                                                          
   
                                                                                                          Si, toutefois, vous faites quelque chose de plus complexe et impliquant des objets qui ne sont pas directement accessibles à l'intérieur du DOM (comme les objets 2D Canvas API ou WebGL), requestAnimationFrame() est la meilleure option dans la plupart des cas.
                                                                                                          
 
                                                                                                          
 
@@ -338,9 +333,8 @@ draw();
 
 
                                                                                                          Assez avec la théorie ! Construisons votre propre exemple personnel de requestAnimationFrame(). Vous allez créer une simple "animation de toupie" - le genre que vous pourriez voir affiché dans une application lorsqu'elle est occupée à se connecter au serveur, etc.
                                                                                                          
 
-
                                                                                                          
-  
                                                                                                          Note: 
                                                                                                          
-  
                                                                                                          Dans un exemple du monde réel, vous devriez probablement utiliser des animations CSS pour exécuter ce type d'animation simple. Cependant, ce genre d'exemple est très utile pour démontrer l'utilisation de requestAnimationFrame(), et vous seriez plus susceptible d'utiliser ce genre de technique lorsque vous faites quelque chose de plus complexe comme la mise à jour de l'affichage d'un jeu à chaque image.
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : Dans un exemple du monde réel, vous devriez probablement utiliser des animations CSS pour exécuter ce type d'animation simple. Cependant, ce genre d'exemple est très utile pour démontrer l'utilisation de requestAnimationFrame(), et vous seriez plus susceptible d'utiliser ce genre de technique lorsque vous faites quelque chose de plus complexe comme la mise à jour de l'affichage d'un jeu à chaque image.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                            
@@ -402,9 +396,8 @@ let rAF;
   
 
                                                                                                          
 
-
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          Vous pouvez trouver l'exemple terminé en direct sur GitHub. (Vous pouvez également voir le code source).
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : Vous pouvez trouver l'exemple terminé en direct sur GitHub. (Vous pouvez également voir le code source).
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Effacer un appel de requestAnimationFrame()
                                                                                                          
@@ -426,9 +419,8 @@ let rAF;
   
                                                                                                        27. Vous voudrez ajouter une variable de suivi pour vérifier si la toupie tourne ou non, effacer le cadre d'animation si c'est le cas, et le rappeler si ce n'est pas le cas.
                                                                                                          28. 
 
 
-
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          Essayez d'abord vous-même ; si vous êtes vraiment bloqué, consultez nos pages exemple en direct et code source.
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : Essayez d'abord vous-même ; si vous êtes vraiment bloqué, consultez nos pages exemple en direct et code source.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Ralentissement d'une animation requestAnimationFrame()
                                                                                                          
@@ -536,9 +528,8 @@ function start() {
   btn.style.display = 'none';
   setTimeout(setEndgame, random(5000,10000));
 }
-    
                                                                                                          
-      
                                                                                                          Note :
                                                                                                          
-      
                                                                                                          Vous verrez que cet exemple appelle setTimeout() sans stocker la valeur de retour. (Donc, pas let myTimeout = setTimeout(functionName, interval).)
                                                                                                          
+    
                                                                                                          
+      
                                                                                                          Note : Vous verrez que cet exemple appelle setTimeout() sans stocker la valeur de retour. (Donc, pas let myTimeout = setTimeout(functionName, interval).)
                                                                                                          
       
                                                                                                          Cela fonctionne très bien, tant que vous n'avez pas besoin d'effacer votre intervalle/temps d'attente à un moment donné. Si vous le faites, vous devrez sauvegarder l'identifiant renvoyé !
                                                                                                          
     
                                                                                                          
     
                                                                                                          Le résultat net du code précédent est que lorsque le bouton Start est pressé, la toupie est affichée et les joueurs sont amenés à attendre un temps aléatoire avant d'être invités à appuyer sur leur bouton. Cette dernière partie est gérée par la fonction setEndgame(), que vous allez définir ensuite.
                                                                                                          
@@ -586,9 +577,8 @@ function start() {
 
 
                                                                                                          Voilà, c'est fait !
                                                                                                          
 
-
                                                                                                          
-  
                                                                                                          Note :
                                                                                                          
-  
                                                                                                          Si vous êtes bloqué, consultez notre version du jeu en live (voir également le code source).
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : Si vous êtes bloqué, consultez notre version du jeu en live (voir également le code source).
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Conclusion
                                                                                                          
diff --git a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html
index 1463cc1e20..696c4d50d3 100644
--- a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html
+++ b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html
@@ -19,13 +19,13 @@ original_slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function
 
 
                                                                                                          {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
                                                                                                          
 
-
                                                                                                          Dans l'article précédent, nous avons traité essentiellement de la théorie. Le présent article fournira une expérience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions.
                                                                                                          
+
                                                                                                          Dans l'article précédent, nous avons traité essentiellement de la théorie. Le présent article fournira une expérience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions.
                                                                                                          
 
-
                                                                                                          
   
     
                                                                                                          
       Prérequis :
 
                                                                                                          
+
                                                                                                          
-   
+   
@@ -36,16 +36,16 @@ original_slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function
 
 
                                                                                                          Apprentissage actif : Construisons une fonction
                                                                                                          
 
-
                                                                                                          La fonction que nous allons construire sera nommée displayMessage(). Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction alert() du navigateur. Vous avez déjà vu cela avant, mais nous allons simplement nous rafraîchir la mémoire — essayez le code qui suit dans la console JavaScript de votre navigateur, sur n'importe quelle page que vous aimez :
                                                                                                          
+
                                                                                                          La fonction que nous allons construire sera nommée displayMessage(). Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction alert() du navigateur. Vous avez déjà vu cela avant, mais nous allons simplement nous rafraîchir la mémoire — essayez le code qui suit dans la console JavaScript de votre navigateur, sur n'importe quelle page que vous aimez :
                                                                                                          alert('This is a message');
                                                                                                          La fonction prend un seul argument en paramètre — la chaîne de caractères qui est affichée dans la boîte d'alerte. Vous pouvez essayer de varier la syntaxe de la chaîne pour modifier le message.
                                                                                                          
 
-
                                                                                                          La fonction alert() est assez limitée : vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, une icône, ou autre chose. Nous en construirons une qui s'avérera plus amusante.
                                                                                                          
+
                                                                                                          La fonction alert() est assez limitée : vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, une icône, ou autre chose. Nous en construirons une qui s'avérera plus amusante.
                                                                                                          
-
                                                                                                          Note : Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome.
                                                                                                          
+
                                                                                                          Note : Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome.
                                                                                                          
 
                                                                                                          La fonction de base
                                                                                                          
@@ -53,7 +53,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function
 
                                                                                                          Pour commencer, mettons en place une fonction de base.
                                                                                                          
-
                                                                                                          Note : Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les conventions de noms de variables. Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables.
                                                                                                          
+
                                                                                                          Note : Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les conventions de noms de variables. Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables.
                                                                                                          
 
                                                                                                            
@@ -195,7 +195,8 @@ panel.appendChild(closeBtn);
 
                                                                                                              
  
                                                                                                            1. Tout d'abord, téléchargez les icônes nécessaires à cet exercice (warning et chat) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé icons dans le même répertoire que votre fichier HTML.
 
-  
                                                                                                              Note : icônes warning et chat trouvés sur iconfinder.com, et créés par Nazarrudin Ansyari. Merci !
                                                                                                              
+  
                                                                                                              
+    
                                                                                                              Note : icônes warning et chat trouvés sur iconfinder.com, et créés par Nazarrudin Ansyari. Merci !
                                                                                                              
  
                                                                                                              2. 
  
                                                                                                            2. Ensuite, trouvez le CSS à l'intérieur de votre fichier HTML. Nous ferons quelques changements pour faire place aux icônes. Tout d'abord, mettez à jour la largeur .msgBox en changeant :
   
                                                                                                              width: 200px;
                                                                                                              
@@ -229,7 +230,7 @@ displayMessage('Brian: Hi there, how are you today?','chat');
 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la version définitive sur GitHub (aussi, vous pouvez tester la démo), ou nous demander de l'aide.
                                                                                                            
+
                                                                                                            Note : Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la version définitive sur GitHub (aussi, vous pouvez tester la démo), ou nous demander de l'aide.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Conclusion
                                                                                                            
diff --git a/files/fr/learn/javascript/building_blocks/conditionals/index.html b/files/fr/learn/javascript/building_blocks/conditionals/index.html
index a41c2385f6..5a6a89cc13 100644
--- a/files/fr/learn/javascript/building_blocks/conditionals/index.html
+++ b/files/fr/learn/javascript/building_blocks/conditionals/index.html
@@ -21,7 +21,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/conditionals
 
 
                                                                                                            Dans tout langage de programmation, le code doit prendre des décisions et agir en fonction des différents paramètres. Par exemple dans un jeu, si le nombre de vies du joueur atteint 0, alors le jeu est terminé. Dans une application météo, si elle est consultée le matin, l'application montrera une image du lever de soleil ; l'application proposera des étoiles et la lune s'il fait nuit. Dans cet article nous allons découvrir comment ces instructions conditionnelles fonctionnent en JavaScript.
                                                                                                            
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :Savoir-faire de base, une compréhension minimale HTML et CSS, premiers pas en JavaScript, Fonctions — blocs de code réutilisables.Savoir-faire de base, une compréhension minimale HTML et CSS, premiers pas en JavaScript, Fonctions — blocs de code réutilisables.
   
                                                                                                          
   
                                                                                                          
    Objectif :
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                          
+
                                                                                                          
@@ -40,7 +40,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/conditionals
 
 
                                                                                                          Les instructions conditionnelles nous permettent de représenter ce genre de prise de décision en JavaScript, du choix qui doit être fait (par ex. « un biscuit ou deux »), à la conséquence de ces choix (il se peut que la conséquence de « manger un biscuit » soit « avoir encore faim », et celle de « manger deux biscuits » soit « se sentir rassasié, mais se faire gronder par maman pour avoir mangé tous les biscuits ».)
                                                                                                          
 
-
                                                                                                          
+
                                                                                                          Instruction if ... else
                                                                                                          
 
@@ -100,7 +100,7 @@ if (coursesFaites === true) {
 
                                                                                                          Avec un tel code, la variable coursesFaites renvoie toujours false, imaginez la déception de ce pauvre enfant. Il ne tient qu'à nous de fournir un mécanisme pour que le parent assigne true à la variable coursesFaites si l'enfant a fait les courses.
                                                                                                          
-
                                                                                                          Note : Vous pouvez voir une version plus complète de cet exemple sur GitHub (ainsi qu'en version live.)
                                                                                                          
+
                                                                                                          Note : Vous pouvez voir une version plus complète de cet exemple sur GitHub (ainsi qu'en version live.)
                                                                                                          
 
                                                                                                          else if
                                                                                                          
@@ -109,37 +109,37 @@ if (coursesFaites === true) {
 
 
                                                                                                          Il existe un moyen d'enchaîner des choix / résultats supplémentaires à if...else — en utilisant else if entre. Chaque choix supplémentaire nécessite un bloc additionnel à placer entre if() { ... } et else { ... } — regardez l'exemple suivant plus élaboré, qui pourrait faire partie d'une simple application de prévisions météo:
                                                                                                          
 
-
                                                                                                          <label for="weather">Select the weather type today: </label>
-<select id="weather">
-  <option value="">--Make a choice--</option>
-  <option value="sunny">Sunny</option>
-  <option value="rainy">Rainy</option>
-  <option value="snowing">Snowing</option>
-  <option value="overcast">Overcast</option>
-</select>
-
-<p></p>
                                                                                                          
-
-
                                                                                                          const select = document.querySelector('select');
-const para = document.querySelector('p');
-
-select.addEventListener('change', setWeather);
-
-function setWeather() {
-  const choice = select.value;
-
-  if (choice === 'sunny') {
-    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
-  } else if (choice === 'rainy') {
-    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
-  } else if (choice === 'snowing') {
-    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
-  } else if (choice === 'overcast') {
-    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
-  } else {
-    para.textContent = '';
-  }
-}
                                                                                                          
+
                                                                                                          <label for="weather">Select the weather type today: </label>
+<select id="weather">
+  <option value="">--Make a choice--</option>
+  <option value="sunny">Sunny</option>
+  <option value="rainy">Rainy</option>
+  <option value="snowing">Snowing</option>
+  <option value="overcast">Overcast</option>
+</select>
+
+<p></p>
                                                                                                          
+
+
                                                                                                          const select = document.querySelector('select');
+const para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+function setWeather() {
+  const choice = select.value;
+
+  if (choice === 'sunny') {
+    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+  } else if (choice === 'rainy') {
+    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+  } else if (choice === 'snowing') {
+    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+  } else if (choice === 'overcast') {
+    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+  } else {
+    para.textContent = '';
+  }
+}
                                                                                                          {{ EmbedLiveSample('else_if', '100%', 100) }}
                                                                                                          
 
@@ -151,7 +151,7 @@ select.addEv
 
 
 
                                                                                                          
-
                                                                                                          Note : Vous trouverez également cet exemple sur GitHub (ainsi qu'en version live ici.)
                                                                                                          
+
                                                                                                          Note : Vous trouverez également cet exemple sur GitHub (ainsi qu'en version live ici.)
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Une note sur les opérateurs de comparaison
                                                                                                          
@@ -165,7 +165,7 @@ select.addEv
 
 
 
                                                                                                          
-
                                                                                                          Note : Revoyez le contenu du lien précédent si vous voulez vous rafraîchir la mémoire.
                                                                                                          
+
                                                                                                          Note : Revoyez le contenu du lien précédent si vous voulez vous rafraîchir la mémoire.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Nous souhaitons mentionner à propos des tests des valeurs booléennes (true/false) un modèle courant que vous rencontrerez souvent. Toute valeur autre que false, undefined, null, 0, NaN ou une chaîne vide  ('') renvoie true lorsqu'elle est testée dans une structure conditionnelle, vous pouvez donc simplement utiliser un nom de variable pour tester si elle est true, ou même si elle existe (c'est-à-dire si elle n'est pas undefined).
                                                                                                          
@@ -262,7 +262,7 @@ if (coursesFaites) { // pas besoin d'écrire explicitement '=== true'
 
 
                                                                                                          Les Instructions if...else  font bien le travail d'aiguiller la programmation selon des conditions, mais elles ne sont pas sans inconvénient. Elles sont principalement adaptées aux cas où vous avez un choix binaire, chacun nécessitant une quantité raisonnable de code à exécuter, et/ou au cas où les conditions sont complexes (par ex. plusieurs opérateurs logiques). Si vous voulez juste fixer la valeur d'une variable à un choix donné ou afficher une déclaration particulière en fonction d'une condition, cette syntaxe peut devenir un peu lourde, surtout si le nombre de choix est important.
                                                                                                          
 
-
                                                                                                          Les instructions switch sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec. Voici un peu de pseudo-code, pour vous donner l'idée :
                                                                                                          
+
                                                                                                          Les instructions switch sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec. Voici un peu de pseudo-code, pour vous donner l'idée :
                                                                                                          
 
 
                                                                                                          switch (expression) {
   case choix1:
@@ -292,7 +292,7 @@ if (coursesFaites) { // pas besoin d'écrire explicitement '=== true'
 
 
 
                                                                                                          
-
                                                                                                          Note : Vous n'avez pas à inclure la section  default — elle peut être omise en toute sécurité s'il n'y a aucune chance que l'expression finisse par égaler une valeur inconnue. À contrario, vous devez l'inclure s'il est possible qu'il y ait des cas inconnus.
                                                                                                          
+
                                                                                                          Note : Vous n'avez pas à inclure la section  default — elle peut être omise en toute sécurité s'il n'y a aucune chance que l'expression finisse par égaler une valeur inconnue. À contrario, vous devez l'inclure s'il est possible qu'il y ait des cas inconnus.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Un exemple de switch
                                                                                                          
@@ -340,12 +340,12 @@ function setWeather() {
 
                                                                                                          {{ EmbedLiveSample('Un_exemple_de_switch', '100%', 100) }}
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Vous trouverez également cet exemple sur GitHub (voyez‑le en cours d'exécution ici aussi.)
                                                                                                          
+
                                                                                                          Note : Vous trouverez également cet exemple sur GitHub (voyez‑le en cours d'exécution ici aussi.)
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Opérateur ternaire
                                                                                                          
 
-
                                                                                                          Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'opérateur ternaire ou conditionnel est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est true et une autre si elle est false — elle est utile dans certains cas, et occupe moins de place qu'un bloc if...else si votre choix est limité à deux possibilités à choisir via une condition true/false. Voici le pseudo‑code correspondant :
                                                                                                          
+
                                                                                                          Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'opérateur ternaire ou conditionnel est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est true et une autre si elle est false — elle est utile dans certains cas, et occupe moins de place qu'un bloc if...else si votre choix est limité à deux possibilités à choisir via une condition true/false. Voici le pseudo‑code correspondant :
                                                                                                          
 
 
                                                                                                          ( condition ) ? exécuter ce code : exécuter celui‑ci à la place
                                                                                                          
 
@@ -385,10 +385,10 @@ select.onchange = function() {
 
 
                                                                                                          Nous mettons un élément {{htmlelement('select')}} pour choisir un thème (noir ou blanc), plus un simple élément {{htmlelement('h1')}} pour afficher un titre de site web. Nous avons aussi une fonction update(), qui prend deux couleurs en paramètre (entrées). La couleur de fond du site est déterminée par la couleur indiquée dans le premier paramètre fourni, et la couleur du texte par le deuxième.
                                                                                                          
 
-
                                                                                                          Nous avons également mis un écouteur d'événement onchange qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — select.value === 'black'. Si le test renvoie true, nous exécutons la fonction update() avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie false, nous exécutons update() avec les paramètres noir et blanc, les couleurs du site seront inversées.
                                                                                                          
+
                                                                                                          Nous avons également mis un écouteur d'événement onchange qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — select.value === 'black'. Si le test renvoie true, nous exécutons la fonction update() avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie false, nous exécutons update() avec les paramètres noir et blanc, les couleurs du site seront inversées.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Vous trouverez également cet exemple sur GitHub (voyez‑le en cours d'exécution ici aussi.)
                                                                                                          
+
                                                                                                          Note : Vous trouverez également cet exemple sur GitHub (voyez‑le en cours d'exécution ici aussi.)
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Apprentissage actif : un calendrier simple
                                                                                                          
@@ -417,10 +417,7 @@ select.onchange = function() {
 
 
                                                                                                          Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton "Réinitialiser". Si vous êtes vraiment bloqué, pressez "Voir la solution".
                                                                                                          
 
-
 
-
                                                                                                          {{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Apprentissage_actif_un_calendrier_simple', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}
                                                                                                          
 
-
                                                                                                          Activité : plus de choix de couleurs !
                                                                                                          
+
                                                                                                          Activité : plus de choix de couleurs
                                                                                                          
 
 
                                                                                                          Nous allons reprendre l'exemple de l'opérateur ternaire vu plus haut et transformer cet opérateur ternaire en une directive switch  qui nous permettra une plus grande variété de choix pour le site web tout simple. Voyez l'élément {{htmlelement("select")}} — cette fois, il n'y a pas deux options de thème, mais cinq. Il vous faut ajouter une directive switch au dessous du commentaire  // AJOUT D'UNE DIRECTIVE SWITCH :
                                                                                                          
 
@@ -536,10 +532,7 @@ window.addEventListener('load', updateCode);
 
 
                                                                                                          Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton « Réinitialiser ». Si vous êtes vraiment bloqué, pressez « Voir la solution ».
                                                                                                          
 
-
 
-
                                                                                                          {{ EmbedLiveSample('Playable_code_2', '100%', 850) }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Activité_plus_de_choix_de_couleurs', '100%', 850) }}
                                                                                                          
 
 
                                                                                                          Conclusion
                                                                                                          
 
-
                                                                                                          C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment ! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément ; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien contactez‑nous pour une aide.
                                                                                                          
+
                                                                                                          C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment ! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément ; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien contactez‑nous pour une aide.
                                                                                                          
 
 
                                                                                                          Voir aussi
                                                                                                          
 
 
 
 
                                                                                                          {{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}
                                                                                                          
@@ -621,11 +613,11 @@ window.addEventListener('load', updateCode);
 
                                                                                                          Dans ce module
                                                                                                          
 
 
diff --git a/files/fr/learn/javascript/building_blocks/events/index.html b/files/fr/learn/javascript/building_blocks/events/index.html
index c61ed3635e..b8bd4ba3d6 100644
--- a/files/fr/learn/javascript/building_blocks/events/index.html
+++ b/files/fr/learn/javascript/building_blocks/events/index.html
@@ -1,14 +1,6 @@
 ---
 title: Introduction aux évènements
 slug: Learn/JavaScript/Building_blocks/Events
-tags:
-  - Article
-  - Codage
-  - Débutant
-  - Evènement
-  - Gestionnaire d'événement
-  - Guide
-  - JavaScript
 translation_of: Learn/JavaScript/Building_blocks/Events
 original_slug: Apprendre/JavaScript/Building_blocks/Evènements
 ---
@@ -16,45 +8,45 @@ original_slug: Apprendre/JavaScript/Building_blocks/Evènements
 
 
                                                                                                          {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
                                                                                                          
 
-
                                                                                                          Les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez et dont le système vous informe afin que vous puissiez y répondre d'une manière ou d'une autre si vous le souhaitez. Par exemple, si l'utilisateur clique sur un bouton d'une page Web, vous pouvez répondre à cette action en affichant une boîte d'information. Dans cet article, nous allons discuter de quelques concepts importants concernant les événements, et regarder comment ils fonctionnent dans les navigateurs. Ce ne sera pas une étude exhaustive; mais seulement ce que vous devez savoir à ce stade.
                                                                                                          
+
                                                                                                          Les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez et dont le système vous informe afin que vous puissiez y répondre d'une manière ou d'une autre si vous le souhaitez. Par exemple, si l'utilisateur clique sur un bouton d'une page Web, vous pouvez répondre à cette action en affichant une boîte d'information. Dans cet article, nous allons discuter de quelques concepts importants concernant les événements, et regarder comment ils fonctionnent dans les navigateurs. Ce ne sera pas une étude exhaustive; mais seulement ce que vous devez savoir à ce stade.
                                                                                                          
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :
 
 
 
 
 
 
 
 
                                                                                                          
+
                                                                                                          
-   
+   
-   
+   
                                                                                                          
  
   
                                                                                                          
    Prérequis:Connaissances de base en informatique, une compréhension de base de HTML et CSS, Premiers pas en JavaScript.Connaissances de base en informatique, une compréhension de base de HTML et CSS, Premiers pas en JavaScript.
   
                                                                                                          
   
                                                                                                          
    Objectif:Comprendre la théorie fondamentale des événements, comment ils fonctionnent dans les navigateurs et comment les événements peuvent différer dans différents environnements de programmation.Comprendre la théorie fondamentale des événements, comment ils fonctionnent dans les navigateurs et comment les événements peuvent différer dans différents environnements de programmation.
   
                                                                                                          
                                                                                                            
 
                                                                                                          
 
 
                                                                                                          Une série d'événements heureux
                                                                                                          
 
-
                                                                                                          Comme mentionné ci-dessus, les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez — le système déclenche un signal quelconque lorsqu'un événement se produit, et fournit également un mécanisme par lequel une  action est exécutée automatiquement (p.ex. un code en cours d'exécution) lorsque l'événement se produit. Par exemple, dans un aéroport, lorsque la piste est libre pour qu'un avion décolle, un signal est communiqué au pilote et, par conséquent, il commence à piloter l'avion.
                                                                                                          
+
                                                                                                          Comme mentionné ci-dessus, les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez — le système déclenche un signal quelconque lorsqu'un événement se produit, et fournit également un mécanisme par lequel une  action est exécutée automatiquement (p.ex. un code en cours d'exécution) lorsque l'événement se produit. Par exemple, dans un aéroport, lorsque la piste est libre pour qu'un avion décolle, un signal est communiqué au pilote et, par conséquent, il commence à piloter l'avion.
                                                                                                          
 
-
                                                                                                          
+
                                                                                                          
 
-
                                                                                                          Dans le cas du Web, les événements sont déclenchés à l'intérieur de la fenêtre du navigateur et tendent à être rattachés à un élément spécifique qui s'y trouve - il peut s'agir d'un élément unique, d'un ensemble d'éléments, du document HTML chargé dans l'onglet en cours ou toute la fenêtre du navigateur. Il y a beaucoup de types différents d'événements qui peuvent se produire, par exemple :
                                                                                                          
+
                                                                                                          Dans le cas du Web, les événements sont déclenchés à l'intérieur de la fenêtre du navigateur et tendent à être rattachés à un élément spécifique qui s'y trouve - il peut s'agir d'un élément unique, d'un ensemble d'éléments, du document HTML chargé dans l'onglet en cours ou toute la fenêtre du navigateur. Il y a beaucoup de types différents d'événements qui peuvent se produire, par exemple :
                                                                                                          
 
 
                                                                                                            
- 
                                                                                                          • L'utilisateur clique avec la souris sur un certain élément ou en place le curseur sur un certain élément.
                                                                                                            • 
- 
                                                                                                          • L'utilisateur appuie sur une touche du clavier.     
                                                                                                            • 
- 
                                                                                                          • L'utilisateur redimensionne ou ferme la fenêtre du navigateur.     
                                                                                                            • 
- 
                                                                                                          • Une page web finissant de se charger.     
                                                                                                            • 
- 
                                                                                                          • Un formulaire en cours de soumission     
                                                                                                            • 
- 
                                                                                                          • Une vidéo en cours de lecture, en pause ou en fin de lecture.     
                                                                                                            • 
- 
                                                                                                          • Une erreur qui survient.
                                                                                                            • 
+ 
                                                                                                          • L'utilisateur clique avec la souris sur un certain élément ou en place le curseur sur un certain élément.
                                                                                                            • 
+ 
                                                                                                          • L'utilisateur appuie sur une touche du clavier.     
                                                                                                            • 
+ 
                                                                                                          • L'utilisateur redimensionne ou ferme la fenêtre du navigateur.     
                                                                                                            • 
+ 
                                                                                                          • Une page web finissant de se charger.     
                                                                                                            • 
+ 
                                                                                                          • Un formulaire en cours de soumission     
                                                                                                            • 
+ 
                                                                                                          • Une vidéo en cours de lecture, en pause ou en fin de lecture.     
                                                                                                            • 
+ 
                                                                                                          • Une erreur qui survient.
                                                                                                            • 
 
                                                                                                          
 
-
                                                                                                          Vous vous en rendrez compte (notamment en jetant un coup d'œil à la section MDN Référence des événements ), il y a beaucoup d'événements auxquels vous pouvez répondre.
                                                                                                          
+
                                                                                                          Vous vous en rendrez compte (notamment en jetant un coup d'œil à la section MDN Référence des événements ), il y a beaucoup d'événements auxquels vous pouvez répondre.
                                                                                                          
  
                                                                                                          
- Chaque événement disponible a un gestionnaire d'événement, qui est un bloc de code (généralement une fonction JavaScript définie par l'utilisateur) qui sera exécuté lorsque l'événement se déclenchera. Lorsqu'un tel bloc de code est défini pour être exécuté en réponse à un déclenchement d'événement, nous disons que nous enregistrons un gestionnaire d'événements. Notez que les gestionnaires d'événements sont parfois appelés écouteurs d'événements - ils sont à peu près interchangeables pour ce qui nous concerne, même si à la rigueur, ils fonctionnent ensemble. L'écouteur écoute l'événement qui se produit et le gestionnaire est le code qui est exécuté en réponse à ce qui se passe.
                                                                                                          
+ Chaque événement disponible a un gestionnaire d'événement, qui est un bloc de code (généralement une fonction JavaScript définie par l'utilisateur) qui sera exécuté lorsque l'événement se déclenchera. Lorsqu'un tel bloc de code est défini pour être exécuté en réponse à un déclenchement d'événement, nous disons que nous enregistrons un gestionnaire d'événements. Notez que les gestionnaires d'événements sont parfois appelés écouteurs d'événements - ils sont à peu près interchangeables pour ce qui nous concerne, même si à la rigueur, ils fonctionnent ensemble. L'écouteur écoute l'événement qui se produit et le gestionnaire est le code qui est exécuté en réponse à ce qui se passe.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: il est important de noter que les événements web ne font pas partie du langage du noyau JavaScript — ils sont définis comme faisant partie des APIs JavaScript intégrées du navigateur
                                                                                                          
+
                                                                                                          Note : il est important de noter que les événements web ne font pas partie du langage du noyau JavaScript — ils sont définis comme faisant partie des APIs JavaScript intégrées du navigateur
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Un exemple simple
                                                                                                          
@@ -63,9 +55,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Evènements
 
 
                                                                                                          <button>Change color</button>
                                                                                                          
 
-
+
 
 
                                                                                                          Le JavaScript ressemblera à ça :
                                                                                                          
 
@@ -92,21 +82,21 @@ btn.onclick = function() {
 
 
                                                                                                          Ce ne sont pas que des pages web
                                                                                                          
 
-
                                                                                                          Une autre chose qui mérite d'être mentionnée à ce stade est que les événements ne sont pas particuliers à JavaScript - la plupart des langages de programmation ont un certain type de modèle d'événement, et la façon dont cela fonctionne diffère souvent de celle de JavaScript. En fait, le modèle d'événement en JavaScript pour les pages Web diffère du modèle d'événement pour JavaScript tel qu'il est utilisé dans d'autres environnements.
                                                                                                          
+
                                                                                                          Une autre chose qui mérite d'être mentionnée à ce stade est que les événements ne sont pas particuliers à JavaScript - la plupart des langages de programmation ont un certain type de modèle d'événement, et la façon dont cela fonctionne diffère souvent de celle de JavaScript. En fait, le modèle d'événement en JavaScript pour les pages Web diffère du modèle d'événement pour JavaScript tel qu'il est utilisé dans d'autres environnements.
                                                                                                          
 
-
                                                                                                          Par exemple, Node.js est un runtime JavaScript très populaire qui permet aux développeurs d'utiliser JavaScript pour créer des applications réseau et serveur. Le modèle Node.js event model s'appuie sur des écouteurs pour écouter les événements et des émetteurs pour générer des événements périodiquement — bien qu'il ne le semble pas à première vue, le code est très différent, en particulier lorsqu'il utilise des fonctions comme on() pour enregistrer un écouteur d'événement, et once() pour enregistrer un écouteur d'événement qui s'efface après sa première exécution. le document HTTP connect event docs propose un bon exemple d'utilisation.
                                                                                                          
+
                                                                                                          Par exemple, Node.js est un runtime JavaScript très populaire qui permet aux développeurs d'utiliser JavaScript pour créer des applications réseau et serveur. Le modèle Node.js event model s'appuie sur des écouteurs pour écouter les événements et des émetteurs pour générer des événements périodiquement — bien qu'il ne le semble pas à première vue, le code est très différent, en particulier lorsqu'il utilise des fonctions comme on() pour enregistrer un écouteur d'événement, et once() pour enregistrer un écouteur d'événement qui s'efface après sa première exécution. le document HTTP connect event docs propose un bon exemple d'utilisation.
                                                                                                          
 
-
                                                                                                          Comme autre exemple, vous pouvez désormais utiliser JavaScript pour créer des extensions inter-navigateurs — comme améliorations de la fonctionnalité du navigateur — à l'aide d'une technologie appelée WebExtensions. Le modèle d'événement est similaire au modèle d'événements Web, mais un peu différent — les écouteurs d'événements sont sensibles à la casse (p.ex.onMessage plutôt que onmessage), et doivent êtres combinés à la fonction addListener. Jetez un oeil à la page runtime.onMessage page pour voir un exemple.
                                                                                                          
+
                                                                                                          Comme autre exemple, vous pouvez désormais utiliser JavaScript pour créer des extensions inter-navigateurs — comme améliorations de la fonctionnalité du navigateur — à l'aide d'une technologie appelée WebExtensions. Le modèle d'événement est similaire au modèle d'événements Web, mais un peu différent — les écouteurs d'événements sont sensibles à la casse (p.ex.onMessage plutôt que onmessage), et doivent êtres combinés à la fonction addListener. Jetez un oeil à la page runtime.onMessage page pour voir un exemple.
                                                                                                          
 
-
                                                                                                          Vous n'avez pas besoin de comprendre quoi que ce soit à propos d'autres environnements de ce type à ce stade de votre apprentissage; nous voulions juste préciser que les événements peuvent différer selon les environnements de programmation.
                                                                                                          
+
                                                                                                          Vous n'avez pas besoin de comprendre quoi que ce soit à propos d'autres environnements de ce type à ce stade de votre apprentissage; nous voulions juste préciser que les événements peuvent différer selon les environnements de programmation.
                                                                                                          
 
 
                                                                                                          De quelle manière utiliser les événements Web ?
                                                                                                          
 
-
                                                                                                          Il existe plusieurs façons d'ajouter un code d'écouteur d'événement aux pages Web afin qu'il soit exécuté lorsque l'événement associé se déclenche. Dans cette section, nous allons passer en revue les différents mécanismes et discuter de ceux que vous devriez utiliser.
                                                                                                          
+
                                                                                                          Il existe plusieurs façons d'ajouter un code d'écouteur d'événement aux pages Web afin qu'il soit exécuté lorsque l'événement associé se déclenche. Dans cette section, nous allons passer en revue les différents mécanismes et discuter de ceux que vous devriez utiliser.
                                                                                                          
 
 
                                                                                                          Les propriétés du gestionnaire d'événement
                                                                                                          
 
-
                                                                                                          Voici les propriétés qui existent pour contenir le code du gestionnaire d'événement que nous avons vu le plus fréquemment pendant le cours. Revenons à l'exemple ci-dessus :
                                                                                                          
+
                                                                                                          Voici les propriétés qui existent pour contenir le code du gestionnaire d'événement que nous avons vu le plus fréquemment pendant le cours. Revenons à l'exemple ci-dessus :
                                                                                                          
 
 
                                                                                                          var btn = document.querySelector('button');
 
@@ -115,9 +105,9 @@ btn.onclick = function() {
   document.body.style.backgroundColor = rndCol;
 }
                                                                                                          
 
-
                                                                                                          La propriété onclick est la propriété du gestionnaire d'événement utilisée dans cette situation. C'est essentiellement une propriété comme les autres disponibles sur le bouton (p.ex. btn.textContent, ou btn.style), mais d'un type spécial — lorsque vous la définissez comme étant égale à du code, ce code est exécuté lorsque l'événement se déclenche sur le bouton.
                                                                                                          
+
                                                                                                          La propriété onclick est la propriété du gestionnaire d'événement utilisée dans cette situation. C'est essentiellement une propriété comme les autres disponibles sur le bouton (p.ex. btn.textContent, ou btn.style), mais d'un type spécial — lorsque vous la définissez comme étant égale à du code, ce code est exécuté lorsque l'événement se déclenche sur le bouton.
                                                                                                          
 
-
                                                                                                          Vous pouvez également définir la propriété du gestionnaire d'événement comme étant égale au nom d'une fonction définie (comme nous l'avons vu dans Construire votre propre fonction). Le code suivant fonctionnera tout pareil:
                                                                                                          
+
                                                                                                          Vous pouvez également définir la propriété du gestionnaire d'événement comme étant égale au nom d'une fonction définie (comme nous l'avons vu dans Construire votre propre fonction). Le code suivant fonctionnera tout pareil:
                                                                                                          
 
 
                                                                                                          var btn = document.querySelector('button');
 
@@ -128,22 +118,22 @@ function bgChange() {
 
 btn.onclick = bgChange;
                                                                                                          
 
-
                                                                                                          De nombreuses propriétés de gestionnaire d'événement sont disponibles. Faisons une expérience.
                                                                                                          
+
                                                                                                          De nombreuses propriétés de gestionnaire d'événement sont disponibles. Faisons une expérience.
                                                                                                          
 
-
                                                                                                          Tout d'abord, faites une copie locale de random-color-eventhandlerproperty.html, et ouvrez-le dans votre navigateur. C'est juste une copie de l'exemple simple de couleur aléatoire avec lequel nous avons déjà joué dans cet article. Maintenant, changez btn.onclick pour lui attribuer, tour à tour, les différentes valeurs qui suivent, et observez le résultat:
                                                                                                          
+
                                                                                                          Tout d'abord, faites une copie locale de random-color-eventhandlerproperty.html, et ouvrez-le dans votre navigateur. C'est juste une copie de l'exemple simple de couleur aléatoire avec lequel nous avons déjà joué dans cet article. Maintenant, changez btn.onclick pour lui attribuer, tour à tour, les différentes valeurs qui suivent, et observez le résultat:
                                                                                                          
 
 
                                                                                                            
- 
                                                                                                          • btn.onfocus et btn.onblur — La couleur change lorsque le bouton est net ou grisé (essayez d'appuyer sur la touche Tab pour l'activer et l'éteindre à nouveau). Ceux-ci sont souvent utilisés pour afficher des informations sur la façon de remplir les champs de formulaire lorsqu'ils sont sélectionnés, ou afficher un message d'erreur si un champ de formulaire vient d'être rempli avec une valeur incorrecte.
                                                                                                            • 
- 
                                                                                                          • btn.ondblclick — La couleur change seulement si l'élément est double-cliqué.
                                                                                                            • 
- 
                                                                                                          • window.onkeypress, window.onkeydown, window.onkeyup — La couleur change si l'on appuie sur une touche du clavier. keypress se réfère à un appui normal sur la touche (bouton appuyé puis relâché), alors que keydown et keyup se réfèrent respectivement à l'appui et au relâchement sur la touche. Notez que cela ne fonctionne pas si vous essayez d'enregistrer ce gestionnaire d'événement sur le bouton lui-même - nous avons dû l'enregistrer sur l'objet window, qui représente la fenêtre entière du navigateur.
                                                                                                            • 
- 
                                                                                                          • btn.onmouseover et btn.onmouseout — La couleur changera respectivement lorsque le pointeur de la souris survolera le bouton, ou lorsque le curseur arrêtera le survol du bouton pour s'éloigner de ce dernier.
                                                                                                            • 
+ 
                                                                                                          • btn.onfocus et btn.onblur — La couleur change lorsque le bouton est net ou grisé (essayez d'appuyer sur la touche Tab pour l'activer et l'éteindre à nouveau). Ceux-ci sont souvent utilisés pour afficher des informations sur la façon de remplir les champs de formulaire lorsqu'ils sont sélectionnés, ou afficher un message d'erreur si un champ de formulaire vient d'être rempli avec une valeur incorrecte.
                                                                                                            • 
+ 
                                                                                                          • btn.ondblclick — La couleur change seulement si l'élément est double-cliqué.
                                                                                                            • 
+ 
                                                                                                          • window.onkeypress, window.onkeydown, window.onkeyup — La couleur change si l'on appuie sur une touche du clavier. keypress se réfère à un appui normal sur la touche (bouton appuyé puis relâché), alors que keydown et keyup se réfèrent respectivement à l'appui et au relâchement sur la touche. Notez que cela ne fonctionne pas si vous essayez d'enregistrer ce gestionnaire d'événement sur le bouton lui-même - nous avons dû l'enregistrer sur l'objet window, qui représente la fenêtre entière du navigateur.
                                                                                                            • 
+ 
                                                                                                          • btn.onmouseover et btn.onmouseout — La couleur changera respectivement lorsque le pointeur de la souris survolera le bouton, ou lorsque le curseur arrêtera le survol du bouton pour s'éloigner de ce dernier.
                                                                                                            • 
 
                                                                                                          
 
-
                                                                                                          Certains événements sont très généraux et disponibles presque partout (par exemple un gestionnaire onclick peut être enregistré sur presque n'importe quel élément), alors que certains sont plus spécifiques et seulement utiles dans certaines situations (par exemple, il est logique d'utiliser onplay seulement sur des éléments spécifiques, comme des {{htmlelement("video")}}).
                                                                                                          
+
                                                                                                          Certains événements sont très généraux et disponibles presque partout (par exemple un gestionnaire onclick peut être enregistré sur presque n'importe quel élément), alors que certains sont plus spécifiques et seulement utiles dans certaines situations (par exemple, il est logique d'utiliser onplay seulement sur des éléments spécifiques, comme des {{htmlelement("video")}}).
                                                                                                          
 
 
                                                                                                          Les gestionnaires d'événements en ligne : ne les utilisez pas !
                                                                                                          
 
-
                                                                                                          Vous pourriez également voir un motif comme celui-ci dans votre code:
                                                                                                          
+
                                                                                                          Vous pourriez également voir un motif comme celui-ci dans votre code:
                                                                                                          
 
 
                                                                                                          <button onclick="bgChange()">Press me</button>
 
                                                                                                          
@@ -154,18 +144,18 @@ btn.onclick = bgChange;
                                                                                                          
 }
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).
                                                                                                          
+
                                                                                                          Note : Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).
                                                                                                          
 
                                                                                                          
 
-
                                                                                                          La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des attributs HTML du gestionnaire d'événement (c'est-à-dire les gestionnaires d'événements en ligne) comme celui présenté ci-dessus — la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient. L'exemple ci-dessus appelle une fonction définie dans un élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple :
                                                                                                          
+
                                                                                                          La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des attributs HTML du gestionnaire d'événement (c'est-à-dire les gestionnaires d'événements en ligne) comme celui présenté ci-dessus — la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient. L'exemple ci-dessus appelle une fonction définie dans un élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple :
                                                                                                          
 
 
                                                                                                          <button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
                                                                                                          
 
-
                                                                                                          Vous trouverez des équivalents d'attributs HTML pour la plupart des propriétés du gestionnaire d'événement; cependant, vous ne devriez pas les utiliser — ils sont considérés comme une mauvaise pratique. Il peut sembler facile d'utiliser un attribut de gestionnaire d'événement si vous voulez avancer rapidement, mais ils deviennent rapidement ingérables et inefficaces.
                                                                                                          
+
                                                                                                          Vous trouverez des équivalents d'attributs HTML pour la plupart des propriétés du gestionnaire d'événement; cependant, vous ne devriez pas les utiliser — ils sont considérés comme une mauvaise pratique. Il peut sembler facile d'utiliser un attribut de gestionnaire d'événement si vous voulez avancer rapidement, mais ils deviennent rapidement ingérables et inefficaces.
                                                                                                          
  
                                                                                                          
- Pour commencer, ce n'est pas une bonne idée de mélanger votre HTML et votre JavaScript, car il deviennent difficile à analyser — garder votre JavaScript au même endroit est préférable; s'il se trouve dans un fichier séparé, vous pourrez l'appliquer à plusieurs documents HTML.
                                                                                                          
+ Pour commencer, ce n'est pas une bonne idée de mélanger votre HTML et votre JavaScript, car il deviennent difficile à analyser — garder votre JavaScript au même endroit est préférable; s'il se trouve dans un fichier séparé, vous pourrez l'appliquer à plusieurs documents HTML.
                                                                                                          
 
-
                                                                                                          Même dans un fichier unique, les gestionnaires d'événement en ligne ne sont pas une bonne idée. Un bouton ça va, mais que faire si vous avez 100 boutons ? Vous devez ajouter 100 attributs au fichier; la maintenance se transformerait très vite en un cauchemar. Avec JavaScript, vous pouvez facilement ajouter une fonction de gestionnaire d'événement à tous les boutons de la page, peu importe leur nombre, en utilisant quelque chose comme ceci :
                                                                                                          
+
                                                                                                          Même dans un fichier unique, les gestionnaires d'événement en ligne ne sont pas une bonne idée. Un bouton ça va, mais que faire si vous avez 100 boutons ? Vous devez ajouter 100 attributs au fichier; la maintenance se transformerait très vite en un cauchemar. Avec JavaScript, vous pouvez facilement ajouter une fonction de gestionnaire d'événement à tous les boutons de la page, peu importe leur nombre, en utilisant quelque chose comme ceci :
                                                                                                          
 
 
                                                                                                          var buttons = document.querySelectorAll('button');
 
@@ -174,12 +164,12 @@ for (var i = 0; i < buttons.length; i++) {
 }
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: Séparer votre logique de programmation de votre contenu rend également votre site plus convivial pour les moteurs de recherche.
                                                                                                          
+
                                                                                                          Note : Séparer votre logique de programmation de votre contenu rend également votre site plus convivial pour les moteurs de recherche.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          addEventListener() et removeEventListener()
                                                                                                          
 
-
                                                                                                          Le dernier type de mécanisme d'événement est défini dans le Document Object Model (DOM) Level 2 Events , qui fournit aux navigateurs une nouvelle fonction: addEventListener(). Cela fonctionne de la même manière que les propriétés du gestionnaire d'événement, mais la syntaxe est évidemment différente. Nous pourrions réécrire notre exemple de couleur aléatoire comme ceci:
                                                                                                          
+
                                                                                                          Le dernier type de mécanisme d'événement est défini dans le Document Object Model (DOM) Level 2 Events , qui fournit aux navigateurs une nouvelle fonction: addEventListener(). Cela fonctionne de la même manière que les propriétés du gestionnaire d'événement, mais la syntaxe est évidemment différente. Nous pourrions réécrire notre exemple de couleur aléatoire comme ceci:
                                                                                                          
 
 
                                                                                                          var btn = document.querySelector('button');
 
@@ -191,65 +181,65 @@ function bgChange() {
 btn.addEventListener('click', bgChange);
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).
                                                                                                          
+
                                                                                                          Note : Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).
                                                                                                          
 
                                                                                                          
 
-
                                                                                                          Dans la fonction addEventListener() , nous spécifions deux paramètres - le nom de l'événement pour lequel nous voulons enregistrer ce gestionnaire, et le code qui comprend la fonction du gestionnaire que nous voulons exécuter en réponse. Notez qu'il est parfaitement approprié de placer tout le code dans la fonction  addEventListener(), dans une fonction anonyme, comme ceci:
                                                                                                          
+
                                                                                                          Dans la fonction addEventListener() , nous spécifions deux paramètres - le nom de l'événement pour lequel nous voulons enregistrer ce gestionnaire, et le code qui comprend la fonction du gestionnaire que nous voulons exécuter en réponse. Notez qu'il est parfaitement approprié de placer tout le code dans la fonction  addEventListener(), dans une fonction anonyme, comme ceci:
                                                                                                          
 
 
                                                                                                          btn.addEventListener('click', function() {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   document.body.style.backgroundColor = rndCol;
 });
                                                                                                          
 
-
                                                                                                          Ce mécanisme a certains avantages par rapport aux mécanismes plus anciens discutés précédemment. Pour commencer, il existe une fonction réciproque,  removeEventListener(), qui supprime un écouteur ajouté précédemment. Par exemple, cela supprimerait l'écouteur du premier bloc de code de cette section:
                                                                                                          
+
                                                                                                          Ce mécanisme a certains avantages par rapport aux mécanismes plus anciens discutés précédemment. Pour commencer, il existe une fonction réciproque,  removeEventListener(), qui supprime un écouteur ajouté précédemment. Par exemple, cela supprimerait l'écouteur du premier bloc de code de cette section:
                                                                                                          
 
 
                                                                                                          btn.removeEventListener('click', bgChange);
                                                                                                          
 
-
                                                                                                          Ceci n'a pas beaucoup de sens pour les programmes simples et de petite taille, mais pour les programmes plus grands et plus complexes, cela peut améliorer l'efficacité, de nettoyer les anciens gestionnaires d'événements inutilisés. De plus, par exemple, cela vous permet d'avoir un même bouton qui effectue différentes actions dans des circonstances différentes - tout ce que vous avez à faire est d'ajouter / supprimer des gestionnaires d'événements convenablement.
                                                                                                          
+
                                                                                                          Ceci n'a pas beaucoup de sens pour les programmes simples et de petite taille, mais pour les programmes plus grands et plus complexes, cela peut améliorer l'efficacité, de nettoyer les anciens gestionnaires d'événements inutilisés. De plus, par exemple, cela vous permet d'avoir un même bouton qui effectue différentes actions dans des circonstances différentes - tout ce que vous avez à faire est d'ajouter / supprimer des gestionnaires d'événements convenablement.
                                                                                                          
  
                                                                                                          
- D'autre part, vous pouvez également enregistrer plusieurs gestionnaires pour le même écouteur. Les deux gestionnaires suivants ne seraient pas appliqués:
                                                                                                          
+ D'autre part, vous pouvez également enregistrer plusieurs gestionnaires pour le même écouteur. Les deux gestionnaires suivants ne seraient pas appliqués:
                                                                                                          
 
 
                                                                                                          myElement.onclick = functionA;
 myElement.onclick = functionB;
                                                                                                          
 
-
                                                                                                          Comme la deuxième ligne remplacerait la valeur de onclick définie par le premier. Cependant, ceci fonctionnerait:
                                                                                                          
+
                                                                                                          Comme la deuxième ligne remplacerait la valeur de onclick définie par le premier. Cependant, ceci fonctionnerait:
                                                                                                          
 
 
                                                                                                          myElement.addEventListener('click', functionA);
 myElement.addEventListener('click', functionB);
                                                                                                          
 
-
                                                                                                          Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué.
                                                                                                          
+
                                                                                                          Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué.
                                                                                                          
  
                                                                                                          
- En outre, il existe un certain nombre d'autres fonctionnalités et options puissantes disponibles avec ce mécanisme d'événement. Celles-ci sont un peu hors de propos pour cet article, mais si vous voulez en savoir plus sur elles, jetez un oeil aux pages de référence de  addEventListener() et removeEventListener().
                                                                                                          
+ En outre, il existe un certain nombre d'autres fonctionnalités et options puissantes disponibles avec ce mécanisme d'événement. Celles-ci sont un peu hors de propos pour cet article, mais si vous voulez en savoir plus sur elles, jetez un oeil aux pages de référence de  addEventListener() et removeEventListener().
                                                                                                          
 
 
                                                                                                          Quel mécanisme devrais-je utiliser ?
                                                                                                          
 
-
                                                                                                          Parmi les trois mécanismes, vous ne devriez certainement pas utiliser les attributs du gestionnaire d'événement HTML - ceux-ci sont obsolètes et constituent une mauvaise pratique, comme mentionné ci-dessus.
                                                                                                          
+
                                                                                                          Parmi les trois mécanismes, vous ne devriez certainement pas utiliser les attributs du gestionnaire d'événement HTML - ceux-ci sont obsolètes et constituent une mauvaise pratique, comme mentionné ci-dessus.
                                                                                                          
  
                                                                                                          
- Les deux autres sont relativement interchangeables, au moins pour des utilisations simples:
                                                                                                          
+ Les deux autres sont relativement interchangeables, au moins pour des utilisations simples:
                                                                                                          
   
                                                                                                          
 
 
                                                                                                            
- 
                                                                                                          •      Les propriétés du gestionnaire d'événement ont moins de puissance et d'options, mais une meilleure compatibilité entre les navigateurs (prise en charge depuis Internet Explorer 8). Vous devriez probablement commencer par ceux-ci pendant votre apprentissage.
                                                                                                            • 
- 
                                                                                                          •       Les événements du DOM Niveau 2 (addEventListener(), etc.) sont plus puissants, mais peuvent aussi devenir plus complexes et moins bien supportés (supportés depuis Internet Explorer 9). Vous devriez également vous entraîner avec, et tenter de les utiliser si possible.
                                                                                                            • 
+ 
                                                                                                          •      Les propriétés du gestionnaire d'événement ont moins de puissance et d'options, mais une meilleure compatibilité entre les navigateurs (prise en charge depuis Internet Explorer 8). Vous devriez probablement commencer par ceux-ci pendant votre apprentissage.
                                                                                                            • 
+ 
                                                                                                          •       Les événements du DOM Niveau 2 (addEventListener(), etc.) sont plus puissants, mais peuvent aussi devenir plus complexes et moins bien supportés (supportés depuis Internet Explorer 9). Vous devriez également vous entraîner avec, et tenter de les utiliser si possible.
                                                                                                            • 
 
                                                                                                          
 
-
                                                                                                          Les principaux avantages du troisième mécanisme : vous pouvez supprimer le code du gestionnaire d'événement si nécessaire en utilisant removeEventListener(), et vous pouvez ajouter plusieurs écouteurs du même type aux éléments si nécessaire. Par exemple, vous pouvez appeler addEventListener('click', function() { ... }) sur un élément plusieurs fois, avec différentes fonctions spécifiées dans le deuxième argument. Cela est impossible avec les propriétés du gestionnaire d'événement car toute tentative ultérieure de définition d'une propriété remplacera les propriétés précédentes, par exemple:
                                                                                                          
+
                                                                                                          Les principaux avantages du troisième mécanisme : vous pouvez supprimer le code du gestionnaire d'événement si nécessaire en utilisant removeEventListener(), et vous pouvez ajouter plusieurs écouteurs du même type aux éléments si nécessaire. Par exemple, vous pouvez appeler addEventListener('click', function() { ... }) sur un élément plusieurs fois, avec différentes fonctions spécifiées dans le deuxième argument. Cela est impossible avec les propriétés du gestionnaire d'événement car toute tentative ultérieure de définition d'une propriété remplacera les propriétés précédentes, par exemple:
                                                                                                          
 
 
                                                                                                          element.onclick = function1;
 element.onclick = function2;
 etc.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: Si vous êtes appelé à prendre en charge des navigateurs plus anciens qu'Internet Explorer 8 dans votre travail, vous risquez de rencontrer des difficultés, car ces anciens navigateurs utilisent des modèles d'événements différents des nouveaux navigateurs. Mais n'ayez crainte, la plupart des bibliothèques JavaScript (par exemple jQuery) ont des fonctions intégrées qui permettent d'éliminer les différences entre navigateurs. Ne vous en faites pas trop à ce stade de votre parcours d'apprentissage.
                                                                                                          
+
                                                                                                          Note: Si vous êtes appelé à prendre en charge des navigateurs plus anciens qu'Internet Explorer 8 dans votre travail, vous risquez de rencontrer des difficultés, car ces anciens navigateurs utilisent des modèles d'événements différents des nouveaux navigateurs. Mais n'ayez crainte, la plupart des bibliothèques JavaScript (par exemple jQuery) ont des fonctions intégrées qui permettent d'éliminer les différences entre navigateurs. Ne vous en faites pas trop à ce stade de votre parcours d'apprentissage.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          D'autres concepts liés aux événements
                                                                                                          
 
-
                                                                                                          Dans cette section, nous aborderons brièvement quelques concepts avancés relatifs aux événements. Il n'est pas important de les comprendre entièrement à ce stade, mais cela pourra servir à expliquer certains modèles de code que vous rencontrerez probablement de temps en temps.
                                                                                                          
+
                                                                                                          Dans cette section, nous aborderons brièvement quelques concepts avancés relatifs aux événements. Il n'est pas important de les comprendre entièrement à ce stade, mais cela pourra servir à expliquer certains modèles de code que vous rencontrerez probablement de temps en temps.
                                                                                                          
 
 
                                                                                                          L'objet événement
                                                                                                          
 
-
                                                                                                          Parfois, dans une fonction de gestionnaire d'événement, vous pouvez voir un paramètre spécifié avec un nom tel que  event, evt, ou simplement e . C'est ce qu'on appelle l'objet événement, qui est automatiquement transmis aux gestionnaires d'événements pour fournir des fonctionnalités et des informations supplémentaires. Par exemple, réécrivons légèrement notre exemple de couleur aléatoire:
                                                                                                          
+
                                                                                                          Parfois, dans une fonction de gestionnaire d'événement, vous pouvez voir un paramètre spécifié avec un nom tel que  event, evt, ou simplement e . C'est ce qu'on appelle l'objet événement, qui est automatiquement transmis aux gestionnaires d'événements pour fournir des fonctionnalités et des informations supplémentaires. Par exemple, réécrivons légèrement notre exemple de couleur aléatoire:
                                                                                                          
 
 
                                                                                                          function bgChange(e) {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
@@ -260,16 +250,16 @@ etc.
                                                                                                          
 btn.addEventListener('click', bgChange);
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).
                                                                                                          
+
                                                                                                          Note : Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).
                                                                                                          
 
                                                                                                          
 
-
                                                                                                          Ici, vous pouvez voir que nous incluons un objet événement, e, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur e.target - qui est le bouton lui-même. La propriété target de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire. Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page.
                                                                                                          
+
                                                                                                          Ici, vous pouvez voir que nous incluons un objet événement, e, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur e.target - qui est le bouton lui-même. La propriété target de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire. Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: Vous pouvez utiliser n'importe quel nom pour l'objet d'événement - il vous suffit de choisir un nom que vous pouvez ensuite utiliser pour le référencer dans la fonction du gestionnaire d'événements. e/evt/event sont les plus couramment utilisés par les développeurs car ils sont courts et faciles à retenir. C'est toujours bon de s'en tenir à une norme.
                                                                                                          
+
                                                                                                          Note : Vous pouvez utiliser n'importe quel nom pour l'objet d'événement - il vous suffit de choisir un nom que vous pouvez ensuite utiliser pour le référencer dans la fonction du gestionnaire d'événements. e/evt/event sont les plus couramment utilisés par les développeurs car ils sont courts et faciles à retenir. C'est toujours bon de s'en tenir à une norme.
                                                                                                          
 
                                                                                                          
 
-
                                                                                                          e.targetest incroyablement utile lorsque vous voulez définir le même gestionnaire d'événements sur plusieurs éléments et affecter une action à chacun d'entre eux quand un événement se produit sur eux. Vous pourriez, par exemple, avoir un ensemble de 16 tuiles qui disparaissent quand on clique dessus. Il est utile de toujours pouvoir affecter une action à  e.target, plutôt que de devoir la sélectionner de manière plus difficile. Dans l'exemple suivant (voir useful-eventtarget.html pour le code source ; et ici pour le voir s'exécuter), nous avons créé 16 éléments {{htmlelement("div")}} avec JavaScript. Quand nous les sélectionnons tous en utilisant {{domxref("document.querySelectorAll()")}}, puis que nous faisons une boucle sur chacun d'eux, en ajoutant un gestionnaire onclick à chacun de sorte qu'une couleur aléatoire est appliquée lorsque l'élément est cliqué:
                                                                                                          
+
                                                                                                          e.targetest incroyablement utile lorsque vous voulez définir le même gestionnaire d'événements sur plusieurs éléments et affecter une action à chacun d'entre eux quand un événement se produit sur eux. Vous pourriez, par exemple, avoir un ensemble de 16 tuiles qui disparaissent quand on clique dessus. Il est utile de toujours pouvoir affecter une action à  e.target, plutôt que de devoir la sélectionner de manière plus difficile. Dans l'exemple suivant (voir useful-eventtarget.html pour le code source ; et ici pour le voir s'exécuter), nous avons créé 16 éléments {{htmlelement("div")}} avec JavaScript. Quand nous les sélectionnons tous en utilisant {{domxref("document.querySelectorAll()")}}, puis que nous faisons une boucle sur chacun d'eux, en ajoutant un gestionnaire onclick à chacun de sorte qu'une couleur aléatoire est appliquée lorsque l'élément est cliqué:
                                                                                                          
 
 
                                                                                                          var divs = document.querySelectorAll('div');
 
@@ -279,12 +269,11 @@ for (var i = 0; i < divs.length; i++) {
   }
 }
                                                                                                          
 
-
                                                                                                          Le résultat est le suivant (essayez de cliquer dessus - amusez-vous):
                                                                                                          
+
                                                                                                          Résultat
                                                                                                          
 
-
 
-
                                                                                                          {{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Résultat', '100%', 400, "", "", "hide-codepen-jsfiddle") }}
                                                                                                          
 
-
                                                                                                          La plupart des gestionnaires d'événements que vous rencontrerez ne disposent que d'un ensemble standard de propriétés et de fonctions (méthodes) disponibles sur l'objet événement (voir la liste complète sur {{domxref("Event")}} ). Cependant, certains gestionnaires plus avancés ajoutent des propriétés spécialisées contenant des données supplémentaires dont ils ont besoin pour fonctionner. Le Media Recorder API, par exemple, a un événement dataavailable , qui se déclenche quand un fichier audio ou vidéo a été enregistré et est disponible pour être utilisé (par exemple, pour l'enregistrer ou le lire). L'objet événement du gestionnaire ondataavailable correspondant dispose d'une propriété data contenant les données audio ou vidéo enregistrées pour vous permettre d'y accéder et de l'utiliser.
                                                                                                          
+
                                                                                                          La plupart des gestionnaires d'événements que vous rencontrerez ne disposent que d'un ensemble standard de propriétés et de fonctions (méthodes) disponibles sur l'objet événement (voir la liste complète sur {{domxref("Event")}} ). Cependant, certains gestionnaires plus avancés ajoutent des propriétés spécialisées contenant des données supplémentaires dont ils ont besoin pour fonctionner. Le Media Recorder API, par exemple, a un événement dataavailable , qui se déclenche quand un fichier audio ou vidéo a été enregistré et est disponible pour être utilisé (par exemple, pour l'enregistrer ou le lire). L'objet événement du gestionnaire ondataavailable correspondant dispose d'une propriété data contenant les données audio ou vidéo enregistrées pour vous permettre d'y accéder et de l'utiliser.
                                                                                                          
 
 
                                                                                                          Éviter le comportement par défaut
                                                                                                          
 
-
                                                                                                          Parfois, vous rencontrerez une situation où vous voudrez arrêter un événement qui adopte son comportement par défaut. L'exemple le plus courant est celui d'un formulaire Web, par exemple un formulaire d'inscription personnalisé. Lorsque vous remplissez les détails et appuyez sur le bouton "Soumettre", le comportement naturel consiste à soumettre les données à une page spécifiée sur le serveur pour traitement, et le navigateur redirige vers une page de "message de réussite" quelconque (ou la même page, si une autre n'est pas spécifiée.).
                                                                                                          
+
                                                                                                          Parfois, vous rencontrerez une situation où vous voudrez arrêter un événement qui adopte son comportement par défaut. L'exemple le plus courant est celui d'un formulaire Web, par exemple un formulaire d'inscription personnalisé. Lorsque vous remplissez les détails et appuyez sur le bouton "Soumettre", le comportement naturel consiste à soumettre les données à une page spécifiée sur le serveur pour traitement, et le navigateur redirige vers une page de "message de réussite" quelconque (ou la même page, si une autre n'est pas spécifiée.).
                                                                                                          
  
                                                                                                          
- Le problème survient lorsque l'utilisateur n'a pas soumis les données correctement. En tant que développeur, vous devez arrêter la soumission au serveur et lui envoyer un message d'erreur indiquant ce qui ne va pas et ce qui doit être fait pour corriger les erreurs. Certains navigateurs prennent en charge les fonctions de validation automatique des données de formulaire, mais comme beaucoup ne le font pas, il est conseillé de ne pas vous y fier et d'implémenter vos propres contrôles de validation. Regardons un exemple simple.
                                                                                                          
+ Le problème survient lorsque l'utilisateur n'a pas soumis les données correctement. En tant que développeur, vous devez arrêter la soumission au serveur et lui envoyer un message d'erreur indiquant ce qui ne va pas et ce qui doit être fait pour corriger les erreurs. Certains navigateurs prennent en charge les fonctions de validation automatique des données de formulaire, mais comme beaucoup ne le font pas, il est conseillé de ne pas vous y fier et d'implémenter vos propres contrôles de validation. Regardons un exemple simple.
                                                                                                          
  
                                                                                                          
- Tout d'abord, un simple formulaire HTML qui vous oblige à entrer votre nom et votre prénom:
                                                                                                          
+ Tout d'abord, un simple formulaire HTML qui vous oblige à entrer votre nom et votre prénom:
                                                                                                          
 
 
                                                                                                          <form>
   <div>
@@ -353,14 +341,12 @@ for (var i = 0; i < divs.length; i++) {
 </form>
 <p></p>
                                                                                                          
 
-
 
-
                                                                                                          Maintenant un peu de JavaScript - ici nous implémentons une vérification très simple dans un gestionnaire d'événement onsubmit (l'événement submit est renvoyé sur un formulaire quand il est soumis) qui vérifie si les champs de texte sont vides. Si c'est le cas, nous appelons la fonction  preventDefault() sur l'objet événement - ce qui stoppe la soumission du formulaire - puis nous affichons un message d'erreur dans le paragraphe sous notre formulaire pour indiquer à l'utilisateur ce qui ne va pas :
                                                                                                          
+
                                                                                                          Maintenant un peu de JavaScript - ici nous implémentons une vérification très simple dans un gestionnaire d'événement onsubmit (l'événement submit est renvoyé sur un formulaire quand il est soumis) qui vérifie si les champs de texte sont vides. Si c'est le cas, nous appelons la fonction  preventDefault() sur l'objet événement - ce qui stoppe la soumission du formulaire - puis nous affichons un message d'erreur dans le paragraphe sous notre formulaire pour indiquer à l'utilisateur ce qui ne va pas :
                                                                                                          
 
 
                                                                                                          var form = document.querySelector('form');
 var fname = document.getElementById('fname');
@@ -375,22 +361,19 @@ form.onsubmit = function(e) {
   }
 }
                                                                                                          
 
-
                                                                                                          Évidemment, cette validation est assez faible - cela n'empêcherait pas l'utilisateur de valider le formulaire avec des espaces ou des nombres entrés dans les champs, par exemple - mais cela est acceptable. Le résultat est le suivant :
                                                                                                          
+
                                                                                                          Évidemment, cette validation est assez faible - cela n'empêcherait pas l'utilisateur de valider le formulaire avec des espaces ou des nombres entrés dans les champs, par exemple - mais cela est acceptable. Le résultat est le suivant :
                                                                                                          
 
-
                                                                                                          {{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Éviter_le_comportement_par_défaut', '100%', 140, "", "", "hide-codepen-jsfiddle") }}
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note: pour le code source, voir preventdefault-validation.html (et le voir s'exécuter ici.)
                                                                                                          
+
                                                                                                          Note : pour le code source, voir preventdefault-validation.html (et le voir s'exécuter ici.)
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Le bouillonnement et la capture
                                                                                                          
 
-
                                                                                                          Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas. Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément. Regardons un exemple pour faciliter cela - ouvrez l'exemple show-video-box.html dans un nouvel onglet (et le code source dans un autre). C'est également disponible en live ci-dessous.
                                                                                                          
+
                                                                                                          Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas. Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément. Regardons un exemple pour faciliter cela - ouvrez l'exemple show-video-box.html dans un nouvel onglet (et le code source dans un autre). C'est également disponible en live ci-dessous.
                                                                                                          
 
-
 
-
                                                                                                          {{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Le_bouillonnement_et_la_capture', '100%', 500, "", "", "hide-codepen-jsfiddle") }}
                                                                                                          
 
-
                                                                                                          Ceci est un exemple assez simple qui montre et cache une balise {{htmlelement("div")}} avec une balise {{htmlelement("video")}} à l'intérieur:
                                                                                                          
+
                                                                                                          Ceci est un exemple assez simple qui montre et cache une balise {{htmlelement("div")}} avec une balise {{htmlelement("video")}} à l'intérieur:
                                                                                                          
 
 
                                                                                                          <button>Display video</button>
 
@@ -477,13 +459,13 @@ form.onsubmit = function(e) {
   </video>
 </div>
                                                                                                          
 
-
                                                                                                          Quand le {{htmlelement("button")}} est cliqué, la vidéo est affichée, en changeant l'attribut de classe sur la balise <div> de hidden à showing ( le CSS de l'exemple contient ces deux classes, qui positionnent respectivement la boîte hors de l'écran et sur l'écran.) :
                                                                                                          
+
                                                                                                          Quand le {{htmlelement("button")}} est cliqué, la vidéo est affichée, en changeant l'attribut de classe sur la balise <div> de hidden à showing ( le CSS de l'exemple contient ces deux classes, qui positionnent respectivement la boîte hors de l'écran et sur l'écran.) :
                                                                                                          
 
 
                                                                                                          btn.onclick = function() {
   videoBox.setAttribute('class', 'showing');
 }
                                                                                                          
 
-
                                                                                                          Nous ajoutons ensuite quelques gestionnaires d'événements  onclick supplémentaires - le premier à <div> et le second à <video>. L'idée est que lorsque l'on clique sur la zone du <div> en dehors de la vidéo, la boîte doit être masquée à nouveau; Lorsque la vidéo elle-même est cliquée, la vidéo devrait commencer à jouer. 
                                                                                                          
+
                                                                                                          Nous ajoutons ensuite quelques gestionnaires d'événements  onclick supplémentaires - le premier à <div> et le second à <video>. L'idée est que lorsque l'on clique sur la zone du <div> en dehors de la vidéo, la boîte doit être masquée à nouveau; Lorsque la vidéo elle-même est cliquée, la vidéo devrait commencer à jouer. 
                                                                                                          
 
 
                                                                                                          videoBox.onclick = function() {
   videoBox.setAttribute('class', 'hidden');
@@ -493,29 +475,29 @@ video.onclick = function() {
   video.play();
 };
                                                                                                          
 
-
                                                                                                          Mais il y a un problème - actuellement, lorsque vous cliquez sur la vidéo, elle commence à jouer, mais cela entraîne le fait que <div> est également caché en même temps. C'est parce que la vidéo est dans le <div> - elle en fait partie - alors que cliquer sur la vidéo lance les deux gestionnaires d'événements ci-dessus.
                                                                                                          
+
                                                                                                          Mais il y a un problème - actuellement, lorsque vous cliquez sur la vidéo, elle commence à jouer, mais cela entraîne le fait que <div> est également caché en même temps. C'est parce que la vidéo est dans le <div> - elle en fait partie - alors que cliquer sur la vidéo lance les deux gestionnaires d'événements ci-dessus.
                                                                                                          
 
 
                                                                                                          Explication du bouillonnement et de la capture
                                                                                                          
 
-
                                                                                                          Quand un événement se déclenche sur un élément qui a des éléments parents (p.ex. l'élément {{htmlelement("video")}} dans notre cas), les navigateurs modernes utilisent deux phases différentes: la phase de capture et la phase de bouillonnement.
                                                                                                          
+
                                                                                                          Quand un événement se déclenche sur un élément qui a des éléments parents (p.ex. l'élément {{htmlelement("video")}} dans notre cas), les navigateurs modernes utilisent deux phases différentes: la phase de capture et la phase de bouillonnement.
                                                                                                          
  
                                                                                                          
- Dans la phase de capture:
                                                                                                          
+ Dans la phase de capture:
                                                                                                          
 
 
                                                                                                            
- 
                                                                                                          • Le navigateur vérifie si l'ancêtre le plus éloigné de l'élément ({{htmlelement("html")}}) dispose d'un gestionnaire d'événement onclick enregistré pendant la phase de capture et le lance si c'est le cas.
                                                                                                            • 
- 
                                                                                                          • Ensuite, il passe à l'élément suivant à l'intérieur de <html> et fait la même chose, puis la suivante, et ainsi de suite jusqu'à ce qu'il atteigne l'élément sur lequel on a cliqué.
                                                                                                            • 
+ 
                                                                                                          • Le navigateur vérifie si l'ancêtre le plus éloigné de l'élément ({{htmlelement("html")}}) dispose d'un gestionnaire d'événement onclick enregistré pendant la phase de capture et le lance si c'est le cas.
                                                                                                            • 
+ 
                                                                                                          • Ensuite, il passe à l'élément suivant à l'intérieur de <html> et fait la même chose, puis la suivante, et ainsi de suite jusqu'à ce qu'il atteigne l'élément sur lequel on a cliqué.
                                                                                                            • 
 
                                                                                                          
 
-
                                                                                                          Dans la phase de bouillonnement, l'opposé exact se produit:
                                                                                                          
+
                                                                                                          Dans la phase de bouillonnement, l'opposé exact se produit:
                                                                                                          
  
                                                                                                          
-      Le navigateur vérifie si l'élément qui a été cliqué a un gestionnaire d'événement onclick enregistré dans la phase de bouillonnement et l'exécute si c'est le cas.
                                                                                                          
-      Ensuite, il passe à l'élément ancêtre immédiat et fait la même chose, puis le suivant, et ainsi de suite jusqu'à ce qu'il atteigne l'élément                                                                                                           <html>.
                                                                                                          
+      Le navigateur vérifie si l'élément qui a été cliqué a un gestionnaire d'événement onclick enregistré dans la phase de bouillonnement et l'exécute si c'est le cas.
                                                                                                          
+      Ensuite, il passe à l'élément ancêtre immédiat et fait la même chose, puis le suivant, et ainsi de suite jusqu'à ce qu'il atteigne l'élément <html>.
                                                                                                          
 
-
                                                                                                          
+
                                                                                                          
 
 
                                                                                                          (Cliquez sur l'image pour l'agrandir et la voir traduite en français.)
                                                                                                          
 
-
                                                                                                          Dans les navigateurs modernes, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement. Ainsi, dans notre exemple actuel, lorsque vous cliquez sur la vidéo, l'événement click fait un bouillonnement de l'élément <video> vers l'élément <html>. Comme ceci :
                                                                                                          
+
                                                                                                          Dans les navigateurs modernes, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement. Ainsi, dans notre exemple actuel, lorsque vous cliquez sur la vidéo, l'événement click fait un bouillonnement de l'élément <video> vers l'élément <html>. Comme ceci :
                                                                                                          
 
 
                                                                                                            
  
                                                                                                          • Il trouve d'abord le gestionnaire video.onclick... et le lance, de manière à ce que la vidéo soit jouée en premier.
                                                                                                            • 
@@ -524,47 +506,47 @@ video.onclick = function() {
 
 
                                                                                                            Régler le problème avec stopPropagation()
                                                                                                            
 
-
                                                                                                            C'est un comportement ennuyeux, mais il y a un moyen de l'éviter ! L'objet événement standard dispose d'une fonction appelée stopPropagation(), qui, lorsqu'il est invoqué sur l'objet événement d'un gestionnaire, fait en sorte que le gestionnaire soit exécuté, mais l'événement ne remonte pas plus haut dans la chaîne, et donc plus aucun autre gestionnaire ne sera exécuté.
                                                                                                            
+
                                                                                                            C'est un comportement ennuyeux, mais il y a un moyen de l'éviter ! L'objet événement standard dispose d'une fonction appelée stopPropagation(), qui, lorsqu'il est invoqué sur l'objet événement d'un gestionnaire, fait en sorte que le gestionnaire soit exécuté, mais l'événement ne remonte pas plus haut dans la chaîne, et donc plus aucun autre gestionnaire ne sera exécuté.
                                                                                                            
  
                                                                                                            
- Nous pouvons donc résoudre notre problème actuel en changeant la fonction du deuxième gestionnaire dans le bloc de code précédent comme ceci:
                                                                                                            
+ Nous pouvons donc résoudre notre problème actuel en changeant la fonction du deuxième gestionnaire dans le bloc de code précédent comme ceci:
                                                                                                            
 
 
                                                                                                            video.onclick = function(e) {
   e.stopPropagation();
   video.play();
 };
                                                                                                            
 
-
                                                                                                            Vous pouvez faire une copie locale du code source show-video-box.html  et le modifier vous-même ou regarder le résultat ici :  show-video-box-fixed.html (ou voir le code source).
                                                                                                            
+
                                                                                                            Vous pouvez faire une copie locale du code source show-video-box.html  et le modifier vous-même ou regarder le résultat ici :  show-video-box-fixed.html (ou voir le code source).
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Pourquoi s'embêter à capturer et bouillonner ? Eh bien, aux heures sombres où les navigateurs étaien peu compatibles entre eux qu'ils ne le sont aujourd'hui, Netscape n'utilisait que la capture d'événements, et Internet Explorer n'utilisait que les bouillonnements. Quand le W3C a décidé d'essayer de normaliser le comportement et de parvenir à un consensus, ils en sont arrivés à ce système qui inclue les deux, qui est celui implémenté dans les navigateurs modernes.
                                                                                                            
+
                                                                                                            Note : Pourquoi s'embêter à capturer et bouillonner ? Eh bien, aux heures sombres où les navigateurs étaien peu compatibles entre eux qu'ils ne le sont aujourd'hui, Netscape n'utilisait que la capture d'événements, et Internet Explorer n'utilisait que les bouillonnements. Quand le W3C a décidé d'essayer de normaliser le comportement et de parvenir à un consensus, ils en sont arrivés à ce système qui inclue les deux, qui est celui implémenté dans les navigateurs modernes.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Comme mentionné ci-dessus, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement, ce qui est plus logique la plupart du temps. Si vous voulez vraiment enregistrer un événement dans la phase de capture, vous pouvez le faire en enregistrant votre gestionnaire avec addEventListener(), et en positionnant la troisième propriété, qui est optionnelle, surtrue.
                                                                                                            
+
                                                                                                            Note : Comme mentionné ci-dessus, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement, ce qui est plus logique la plupart du temps. Si vous voulez vraiment enregistrer un événement dans la phase de capture, vous pouvez le faire en enregistrant votre gestionnaire avec addEventListener(), et en positionnant la troisième propriété, qui est optionnelle, surtrue.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Délégation d'événement
                                                                                                            
 
-
                                                                                                            Le bouillonnement nous permet également de tirer parti de la délégation d'événements - ce concept repose sur le fait que si vous voulez exécuter du code lorsque vous cliquez sur l'un des nombreux éléments enfants, vous pouvez définir l'écouteur d'événement sur leur parent et ainsi leur répercuter les événement, plutôt que de devoir définir l'écouteur d'événement sur chaque enfant individuellement.
                                                                                                            
+
                                                                                                            Le bouillonnement nous permet également de tirer parti de la délégation d'événements - ce concept repose sur le fait que si vous voulez exécuter du code lorsque vous cliquez sur l'un des nombreux éléments enfants, vous pouvez définir l'écouteur d'événement sur leur parent et ainsi leur répercuter les événement, plutôt que de devoir définir l'écouteur d'événement sur chaque enfant individuellement.
                                                                                                            
  
                                                                                                            
- Un bon exemple est une série d'éléments de liste - si vous voulez que chacun d'eux fasse apparaître un message lorsque vous cliquez dessus, vous pouvez définir l'écouteur d'événement click sur la balise parente <ul>, et il apparaîtra sur les éléments de la liste.
                                                                                                            
+ Un bon exemple est une série d'éléments de liste - si vous voulez que chacun d'eux fasse apparaître un message lorsque vous cliquez dessus, vous pouvez définir l'écouteur d'événement click sur la balise parente <ul>, et il apparaîtra sur les éléments de la liste.
                                                                                                            
 
-
                                                                                                            Ce concept est expliqué plus loin sur le blog de David Walsh, avec de multiples exemples - voir How JavaScript Event Delegation Works.
                                                                                                            
+
                                                                                                            Ce concept est expliqué plus loin sur le blog de David Walsh, avec de multiples exemples - voir How JavaScript Event Delegation Works.
                                                                                                            
 
 
                                                                                                            Conclusion
                                                                                                            
 
-
                                                                                                            Vous devriez maintenant maîtriser tout ce que vous devez savoir sur les événements Web à ce stade de votre apprentissage. Comme mentionné ci-dessus, les événements ne font pas vraiment partie du langage du noyau JavaScript principal - ils sont définis dans les API Web du navigateur.
                                                                                                            
+
                                                                                                            Vous devriez maintenant maîtriser tout ce que vous devez savoir sur les événements Web à ce stade de votre apprentissage. Comme mentionné ci-dessus, les événements ne font pas vraiment partie du langage du noyau JavaScript principal - ils sont définis dans les API Web du navigateur.
                                                                                                            
  
                                                                                                            
- En outre, il est important de comprendre que les différents contextes dans lesquels JavaScript est utilisé tendent à avoir des modèles d'événements différents - des API Web à d'autres domaines tels que WebExtensions du navigateur et Node.js (JavaScript côté serveur). Nous ne nous attendons pas à ce que vous compreniez tous ces domaines maintenant, mais cela aide certainement à comprendre les bases des événements à mesure que vous avancez dans l'apprentissage du développement Web.
                                                                                                            
+ En outre, il est important de comprendre que les différents contextes dans lesquels JavaScript est utilisé tendent à avoir des modèles d'événements différents - des API Web à d'autres domaines tels que WebExtensions du navigateur et Node.js (JavaScript côté serveur). Nous ne nous attendons pas à ce que vous compreniez tous ces domaines maintenant, mais cela aide certainement à comprendre les bases des événements à mesure que vous avancez dans l'apprentissage du développement Web.
                                                                                                            
 
-
                                                                                                            S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article, ou contactez-nous pour demander de l'aide.
                                                                                                            
+
                                                                                                            S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article, ou contactez-nous pour demander de l'aide.
                                                                                                            
 
 
                                                                                                            Voir aussi
                                                                                                            
 
 
 
 
                                                                                                            {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
                                                                                                            
@@ -574,13 +556,13 @@ video.onclick = function() {
 
                                                                                                            Dans ce module
                                                                                                            
 
 
 
 
                                                                                                             
                                                                                                            
diff --git a/files/fr/learn/javascript/building_blocks/functions/index.html b/files/fr/learn/javascript/building_blocks/functions/index.html
index f7f7cea4e1..eb804d4dcf 100644
--- a/files/fr/learn/javascript/building_blocks/functions/index.html
+++ b/files/fr/learn/javascript/building_blocks/functions/index.html
@@ -8,13 +8,13 @@ original_slug: Apprendre/JavaScript/Building_blocks/Fonctions
 
 
                                                                                                            {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}
                                                                                                            
 
-
                                                                                                            Les fonctions sont un autre concept essentiel de la programmation, qui permettent de stocker dans un bloc défini une partie de code qui effectue une seule tâche afin de l'appeler plus tard lorsque nous en avons besoin en utilisant une seule commande courte — au lieu de ré-écrire l'intégralité de ce code à chaque fois. Dans cet article nous explorons les concepts fondamentaux inhérents aux fonctions tels que la syntaxe de base, comment les définir et les invoquer, leur portée et leurs paramètres.
                                                                                                            
+
                                                                                                            Les fonctions sont un autre concept essentiel de la programmation, qui permettent de stocker dans un bloc défini une partie de code qui effectue une seule tâche afin de l'appeler plus tard lorsque nous en avons besoin en utilisant une seule commande courte — au lieu de ré-écrire l'intégralité de ce code à chaque fois. Dans cet article nous explorons les concepts fondamentaux inhérents aux fonctions tels que la syntaxe de base, comment les définir et les invoquer, leur portée et leurs paramètres.
                                                                                                            
 
-
+
                                                                                                            
-   
+   
@@ -27,7 +27,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Fonctions
 
 
                                                                                                            En JavaScript, vous trouverez des fonctions partout. En fait, nous avons utilisé des fonctions depuis le début du cours ; nous n'en avons simplement pas beaucoup parlé. Toutefois, il est maintenant temps de parler des fonctions de manière explicite et d'explorer réellement leur syntaxe.
                                                                                                            
 
-
                                                                                                            Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — () — et que vous n'utilisez pas une structure usuelle et intégrée du langage telle que les boucles for, while ou do...while , ou une déclaration if...else , vous utilisez une fonction.
                                                                                                            
+
                                                                                                            Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — () — et que vous n'utilisez pas une structure usuelle et intégrée du langage telle que les boucles for, while ou do...while , ou une déclaration if...else , vous utilisez une fonction.
                                                                                                            Les fonctions intégrées du navigateur
                                                                                                            
 
@@ -59,12 +59,12 @@ console.log(madeAString);
 
                                                                                                            ... nous avons utilisé une fonction !
                                                                                                            
-
                                                                                                            Note : N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin.
                                                                                                            
+
                                                                                                            Note : N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin.
                                                                                                            
 
                                                                                                            Le langage Javascript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand invoquez (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript.
                                                                                                            
 
-
                                                                                                            Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette section antérieure de notre cours pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur.
                                                                                                            
+
                                                                                                            Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette section antérieure de notre cours pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur.
                                                                                                            Fonctions versus méthodes
                                                                                                            
 
@@ -76,7 +76,7 @@ console.log(madeAString);
 
 
                                                                                                            Fonctions personnalisées
                                                                                                            
 
-
                                                                                                            Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple random-canvas-circles.html tiré de l'article les boucles dans le code (voir aussi le code source complet), nous avons inclus une fonction personnalisée draw()qui ressemblait à ça :
                                                                                                            
+
                                                                                                            Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple random-canvas-circles.html tiré de l'article les boucles dans le code (voir aussi le code source complet), nous avons inclus une fonction personnalisée draw()qui ressemblait à ça :
                                                                                                            function draw() {
   ctx.clearRect(0,0,WIDTH,HEIGHT);
@@ -98,7 +98,7 @@ console.log(madeAString);
   return Math.floor(Math.random()*number);
 }
                                                                                                            
 
-
                                                                                                            Nous avions besoin de cette fonction car la fonction intégrée du navigateur Math.random() génère uniquement un nombre décimal aléatoire compris entre 0 et 1 alors que nous voulions un nombre entier compris entre 0 et un nombre défini.
                                                                                                            
+
                                                                                                            Nous avions besoin de cette fonction car la fonction intégrée du navigateur Math.random() génère uniquement un nombre décimal aléatoire compris entre 0 et 1 alors que nous voulions un nombre entier compris entre 0 et un nombre défini.
                                                                                                            Invoquer des fonctions
                                                                                                            
 
@@ -175,23 +175,23 @@ anotherGreeting();
                                                                                                            Certaines fonctions nécessitent que l'on définisse des paramètres lorsqu'on les appelle — ce sont des valeurs qui doivent êtres inclues dans les parenthèses de la fonction pour que celle-ci fonctionne correctement.
                                                                                                            
-
                                                                                                            Note : Les paramètres sont parfois appelés arguments, propriétés ou encore attributs.
                                                                                                            
+
                                                                                                            Note : Les paramètres sont parfois appelés arguments, propriétés ou encore attributs.
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            Par exemple, la fonction intégrée du navigateur Math.random() ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 : 
                                                                                                            
+
                                                                                                            Par exemple, la fonction intégrée du navigateur Math.random() ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 : 
                                                                                                            var myNumber = Math.random();
                                                                                                            
 
-
                                                                                                            La fonction de chaîne intégrée du navigateur replace() nécessite toutefois deux paramètres — la sous-chaîne qu'elle doit remplacer à l'intérieur de la chaîne, et la sous-chaîne par laquelle elle doit la remplacer :
                                                                                                            
+
                                                                                                            La fonction de chaîne intégrée du navigateur replace() nécessite toutefois deux paramètres — la sous-chaîne qu'elle doit remplacer à l'intérieur de la chaîne, et la sous-chaîne par laquelle elle doit la remplacer :
                                                                                                            var myText = 'I am a string';
 var newString = myText.replace('string', 'sausage');
                                                                                                            
-
                                                                                                            Note : Quand vous devez définir plusieurs paramètres, ils doivent être séparés par des virgules.
                                                                                                            
+
                                                                                                            Note : Quand vous devez définir plusieurs paramètres, ils doivent être séparés par des virgules.
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            Il est également à noter que parfois les paramètres sont optionnels — vous n'avez pas à les spécifier. Si vous ne le faites pas, la fonction va généralement adopter un comportement par défaut. Par exemple, la fonction de tableau join() a des paramètres optionnels :
                                                                                                            
+
                                                                                                            Il est également à noter que parfois les paramètres sont optionnels — vous n'avez pas à les spécifier. Si vous ne le faites pas, la fonction va généralement adopter un comportement par défaut. Par exemple, la fonction de tableau join() a des paramètres optionnels :
                                                                                                            var myArray = ['I', 'love', 'chocolate', 'frogs'];
 var madeAString = myArray.join(' ');
@@ -199,7 +199,7 @@ var madeAString = myArray.join(' ');
 var madeAString = myArray.join();
 // renvoie 'I,love,chocolate,frogs'
                                                                                                            
 
-
                                                                                                            Si aucun paramètre n'est inclus pour spécifier un caractère de jointure / délimitation, une virgule est utilisée par défaut.
                                                                                                            
+
                                                                                                            Si aucun paramètre n'est inclus pour spécifier un caractère de jointure / délimitation, une virgule est utilisée par défaut.
                                                                                                            La portée des fonctions et les conflits.
                                                                                                            
 
@@ -207,9 +207,9 @@ var madeAString = myArray.join();
 
 
                                                                                                            Le plus haut niveau en dehors de toutes vos fonctions est appelé la portée globale. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe qu'elle partie du code.
                                                                                                            
 
-
                                                                                                            Le JavaScript est construit de cette façon pour plusieurs raisons —  mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident.
                                                                                                            
+
                                                                                                            Le JavaScript est construit de cette façon pour plusieurs raisons —  mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident.
                                                                                                            
 
-
                                                                                                            Par exemple, disons que vous avez un fichier HTML qui appelle deux fichiers JavaScript externes, et que les deux ont une variable et une fonction définie qui utilisent le même nom :
                                                                                                            
+
                                                                                                            Par exemple, disons que vous avez un fichier HTML qui appelle deux fichiers JavaScript externes, et que les deux ont une variable et une fonction définie qui utilisent le même nom :
                                                                                                            <!-- Excerpt from my HTML -->
 <script src="first.js"></script>
@@ -230,17 +230,17 @@ function greeting() {
   alert('Our company is called ' + name + '.');
 }
                                                                                                            
 
-
                                                                                                            Les deux fonctions que vous voulez appeler s'appellent greeting(), mais vous ne pouvez accéder qu'à la fonction greeting() du second fichier second.js  — car celui-ci est appliqué au code HTML plus tard dans le code source, de sorte que sa variable et sa fonction écrasent celles du premier fichier first.js.
                                                                                                            
+
                                                                                                            Les deux fonctions que vous voulez appeler s'appellent greeting(), mais vous ne pouvez accéder qu'à la fonction greeting() du second fichier second.js  — car celui-ci est appliqué au code HTML plus tard dans le code source, de sorte que sa variable et sa fonction écrasent celles du premier fichier first.js.
                                                                                                            
-
                                                                                                            Note : Vous pouvez voir cet exemple s'exécuter sur GitHub (voir aussi le code source).
                                                                                                            
+
                                                                                                            Note : Vous pouvez voir cet exemple s'exécuter sur GitHub (voir aussi le code source).
                                                                                                            
 
                                                                                                            En conservant des parties de votre code enfermées dans des fonctions, vous évitez de tels problèmes. Cette procédure est considérée comme une bonne pratique.
                                                                                                            C'est un peu comme au zoo. Les lions, zèbres, tigres et pingouins sont enfermés dans leurs propres enclos, et n'ont accès qu'aux éléments se trouvant à l'intérieur de leur enclos — de la même manière que la portée des fonctions. S'il leur était possible de pénétrer dans les autres enclos, des problèmes se produiraient. Au mieux, des animaux différents seraient dans l'inconfort au sein d'un habitat étranger — un lion ou un tigre se sentirait très mal dans l'environnement humide et glacé des pingouins. Au pire, les lions et les tigres pourraient essayer de manger les pingouins !
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Le gardien du zoo est comme la portée globale — il ou elle a les clefs pour accéder à chaque enclos, pour l'approvisionner en nourriture, soigner les animaux malades, ...etc.
                                                                                                            
 
@@ -258,20 +258,20 @@ function greeting() {
   
                                                                                                            output(y);
 output(z);
                                                                                                            
 
-  
                                                                                                            Toutes les deux devraient vous renvoyer un message d'erreur du type : "ReferenceError: y is not defined". Pourquoi ? À cause de la portée de la fonction — y and z sont enfermées dans les fonctions a() et b(), donc output() ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale.
                                                                                                            
+  
                                                                                                            Toutes les deux devraient vous renvoyer un message d'erreur du type : "ReferenceError: y is not defined". Pourquoi ? À cause de la portée de la fonction — y and z sont enfermées dans les fonctions a() et b(), donc output() ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale.
                                                                                                          • 
   
                                                                                                            Néanmoins, que se passe-t-il losqu'elles sont appelées de l'intérieur d'une autre fonction ? Essayer d'éditer a() et b() pour qu'elles aient la forme suivante :
                                                                                                            
 
-  
                                                                                                            function a() {
-  var y = 2;
-  output(y);
-}
+  
                                                                                                            function a() {
+  var y = 2;
+  output(y);
+}
 
-function b() {
-  var z = 3;
-  output(z);
-}
                                                                                                            
+function b() {
+  var z = 3;
+  output(z);
+}
                                                                                                            
   Sauvegardez le code et rechargez-le dans votre navigateur, puis essayez d'appeler les fonctions a() et b() depuis la console JavaScript :
 
   
                                                                                                            a();
@@ -306,25 +306,20 @@ function b() {
  
                                                                                                          • Sauvegardez et rechargez à nouveau dans la console JavaScript :
   
                                                                                                            a();
 b();
                                                                                                            
-  Cette fois l'appel de a() et b() renverra l'erreur "ReferenceError: z is not defined"  — parce que l'appel de la fonction output() et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction.
                                                                                                            • 
+  Cette fois l'appel de a() et b() renverra l'erreur "ReferenceError: z is not defined"  — parce que l'appel de la fonction output() et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction.
                                                                                                            • 
-
                                                                                                            Note : Ces règles de portée ne s'appliquent pas aux boucles (ex. for() { ... }) ni aux instructions conditionnelles (ex. if() { ... }) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre.
                                                                                                            
+
                                                                                                            Note : Ces règles de portée ne s'appliquent pas aux boucles (ex. for() { ... }) ni aux instructions conditionnelles (ex. if() { ... }) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre.
                                                                                                            
 
                                                                                                            
-
                                                                                                            Note : Le message d'erreur ReferenceError: "x" is not defined est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée.
                                                                                                            
+
                                                                                                            Note : Le message d'erreur ReferenceError: "x" is not defined est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée.
                                                                                                            
 
                                                                                                            
 
-
                                                                                                              
-
                                                                                                            
-
 
                                                                                                            Des fonctions à l'intérieur de fonctions
                                                                                                            
 
-
                                                                                                            
-
                                                                                                            Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction. Ceci est souvent utilisé comme un moyen de garder le code bien organisé — si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions :
                                                                                                            
-
                                                                                                            
+
                                                                                                            Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction. Ceci est souvent utilisé comme un moyen de garder le code bien organisé — si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions :
                                                                                                            function myBigFunction() {
   var myValue;
@@ -347,7 +342,7 @@ function subFunction3() {
 }
 
                                                                                                            
 
-
                                                                                                            Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte. L'exemple ci-dessus entraînerait une erreur ReferenceError: myValue is not defined, car bien que la valeur myValue  est définie dans la même portée que les appels de fonction, elle n'est pas définie dans les définitions de fonctions - le code réel qui est exécuté lorsque les fonctions sont appelées. Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci :
                                                                                                            
+
                                                                                                            Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte. L'exemple ci-dessus entraînerait une erreur ReferenceError: myValue is not defined, car bien que la valeur myValue  est définie dans la même portée que les appels de fonction, elle n'est pas définie dans les définitions de fonctions - le code réel qui est exécuté lorsque les fonctions sont appelées. Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci :
                                                                                                            function myBigFunction() {
   var myValue = 1;
@@ -371,13 +366,13 @@ function subFunction3(value) {
 
 
                                                                                                            Conclusion
                                                                                                            
 
-
                                                                                                            Cet article a exploré les concepts fondamentaux inhérents aux fonctions, ouvrant la voie au suivant dans lequel nous passerons à la pratique et vous guiderons à travers les étapes pour construire votre propre fonction personnalisée.
                                                                                                            
+
                                                                                                            Cet article a exploré les concepts fondamentaux inhérents aux fonctions, ouvrant la voie au suivant dans lequel nous passerons à la pratique et vous guiderons à travers les étapes pour construire votre propre fonction personnalisée.
                                                                                                            
 
 
                                                                                                            Voir aussi
                                                                                                            
 
 
 
 
                                                                                                            
  
   
                                                                                                            
    Prerequis:Culture informatique basique, compréhension basique du HTML et du CSS, Premiers pas en JavaScript...Culture informatique basique, compréhension basique du HTML et du CSS, Premiers pas en JavaScript...
   
                                                                                                            
   
                                                                                                            
    Objectif:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
  
 
 
 
 
 
 
 
 
 
                                                                                                            
+
                                                                                                            
@@ -38,15 +38,15 @@ original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery
 
 
                                                                                                            Pour réaliser cette évaluation, vous devez récupérer le fichier ZIP et le décompresser quelque par sur votre ordinateur.
                                                                                                            
 
-
                                                                                                            Vous pouvez également utiliser un site comme JSBin ou  Thimble pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments <script>/<style> dans la page HTML.
                                                                                                            
+
                                                                                                            Vous pouvez également utiliser un site comme JSBin ou  Thimble pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments <script>/<style> dans la page HTML.
                                                                                                            
-
                                                                                                            Note: Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page.
                                                                                                            
+
                                                                                                            Note : Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page.
                                                                                                            
 
                                                                                                            Résumé du projet
                                                                                                            
 
-
                                                                                                            Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript; vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel. Le corps HTML ressemble à ceci:
                                                                                                            
+
                                                                                                            Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript; vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel. Le corps HTML ressemble à ceci:
                                                                                                            <h1>Image gallery example</h1>
 
@@ -62,24 +62,22 @@ original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery
 
 
                                                                                                            L'exemple ressemble à ceci:
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            
 
-
                                                                                                              
-
                                                                                                            
 
-
                                                                                                            Les parties les plus intéressantes du fichier CSS de l'exemple:
                                                                                                            
+
                                                                                                            Les parties les plus intéressantes du fichier CSS de l'exemple:
                                                                                                            
 
 
                                                                                                              
- 
                                                                                                            • Positionnez les trois éléments en absolu à l’intérieur du full-img <div>: le <img> dans lequel l’image est affichée grandeur nature, un  <div> vide dimensionné à la même taille que le <img> et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant à l'image via une couleur d'arrière-plan semi-transparente), et un bouton <button>qui est utilisé pour contrôler l'effet d'assombrissement.
                                                                                                              • 
- 
                                                                                                            • Réglez la largeur des images à l'intérieur de thumb-bar <div>(appelées images miniatures) à 20% et faites un float à gauche pour qu'elles soient côte-à-côte sur une ligne.
                                                                                                              • 
+ 
                                                                                                            • Positionnez les trois éléments en absolu à l’intérieur du full-img <div>: le <img> dans lequel l’image est affichée grandeur nature, un  <div> vide dimensionné à la même taille que le <img> et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant à l'image via une couleur d'arrière-plan semi-transparente), et un bouton <button>qui est utilisé pour contrôler l'effet d'assombrissement.
                                                                                                              • 
+ 
                                                                                                            • Réglez la largeur des images à l'intérieur de thumb-bar <div>(appelées images miniatures) à 20% et faites un float à gauche pour qu'elles soient côte-à-côte sur une ligne.
                                                                                                              • 
 
                                                                                                            
 
-
                                                                                                            Votre JavaScript doit:
                                                                                                            
+
                                                                                                            Votre JavaScript doit:
                                                                                                            
 
 
                                                                                                              
  
                                                                                                            • Itérer toutes les images dans une boucle, et pour chacune d'elle, insérer un élément <img> à l'intérieur de thumb-bar <div> qui va incorporer cette image dans la page.
                                                                                                              • 
  
                                                                                                            • Associer un gestionnaire d'événement onclick à chaque <img> à l'intérieur de thumb-bar <div> pour que, lorsqu'elles sont cliquées, l'image correspondante soit affichée dans l'élément displayed-img <img>.
                                                                                                              • 
- 
                                                                                                            • Associer un gestionnaire d'événement onclick au <button> pour que, lorsqu'il est cliqué, un effet assombrissant soit appliqué à l'image grandeur nature. Losrqu'il est cliqué à nouveau, l'effet doit disparaitre.
                                                                                                              • 
+ 
                                                                                                            • Associer un gestionnaire d'événement onclick au <button> pour que, lorsqu'il est cliqué, un effet assombrissant soit appliqué à l'image grandeur nature. Losrqu'il est cliqué à nouveau, l'effet doit disparaitre.
                                                                                                              • 
 
                                                                                                            
 
 
                                                                                                            Pour vous donner une idée, regardez l'exemple (Ne regardez pas le code source!).
                                                                                                            
@@ -104,7 +102,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery
 
                                                                                                            À chaque itération, vous devez ajouter un gestionnaire onclick au newImage courant. Il doit:
                                                                                                            
 
 
                                                                                                              
- 
                                                                                                            1. Trouver la valeur de l'attribut src de l'image courante. Cela peut être fait avec la fonction getAttribute() sur <img>, en lui passant le paramètre "src" à chaque fois. Mais comment avoir l'image? Utiliser newImage ne marche pas du fait que la boucle est finie avant que le gestionnaire d'événement ne soit appelé; de cette manière, la valeur de src sera toujours celle du dernier <img>. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est <img> qui en est la cible. Pourquoi ne pas récupérer l'information de l'objet événement?
                                                                                                              2. 
+ 
                                                                                                            2. Trouver la valeur de l'attribut src de l'image courante. Cela peut être fait avec la fonction getAttribute() sur <img>, en lui passant le paramètre "src" à chaque fois. Mais comment avoir l'image? Utiliser newImage ne marche pas du fait que la boucle est finie avant que le gestionnaire d'événement ne soit appelé; de cette manière, la valeur de src sera toujours celle du dernier <img>. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est <img> qui en est la cible. Pourquoi ne pas récupérer l'information de l'objet événement?
                                                                                                              3. 
  
                                                                                                            3. Exécuter une fonction, en lui passant en paramètre la fameuse valeur de src. Vous pouvez nommer la fonction à votre guise.
                                                                                                              4. 
  
                                                                                                            4. Cette fonction du gestionnaire d'événement doit définir la valeur de l'attribut src de displayed-img <img> à la valeur du src passé en paramètre. Nous vous avons fourni une ligne qui stocke une référence de l'<img> concerné dans une variable nommée displayedImg. Notez que nous voulons une fonction nommée.
                                                                                                              5. 
 
                                                                                                            
@@ -115,7 +113,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery
 
 
                                                                                                              
  
                                                                                                            1. Vérifie la classe appliquée à <button> — à nouveau, vous pouvez utiliser getAttribute().
                                                                                                              2. 
- 
                                                                                                            2. Si le nom de classe est "dark", changer la classe du <button> pour "light" (avec setAttribute()), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement <div> par "rgba(0,0,0,0.5)".
                                                                                                              3. 
+ 
                                                                                                            3. Si le nom de classe est "dark", changer la classe du <button> pour "light" (avec setAttribute()), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement <div> par "rgba(0,0,0,0.5)".
                                                                                                              4. 
  
                                                                                                            4. Si le nom de classe n'est pas "dark", changer la classe du <button> pour "dark", son contenu textuel par "Darken", et le {{cssxref("background-color")}} du voile d'assombrissement <div> par "rgba(0,0,0,0)".
                                                                                                              5. 
 
                                                                                                            
 
@@ -154,11 +152,11 @@ overlay.style.backgroundColor = xxx;
                                                                                                            Dans ce module
                                                                                                            
diff --git a/files/fr/learn/javascript/building_blocks/index.html b/files/fr/learn/javascript/building_blocks/index.html
index 3fab2ec928..f93cdfbd85 100644
--- a/files/fr/learn/javascript/building_blocks/index.html
+++ b/files/fr/learn/javascript/building_blocks/index.html
@@ -17,30 +17,30 @@ original_slug: Apprendre/JavaScript/Building_blocks
 
 
                                                                                                            {{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}
                                                                                                            
 
-
                                                                                                            Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues telles que les conditions, les boucles, les fonctions et les événements. Nous avons déjà vu ces notions dans le cours mais sans nous y attarder, nous allons maintenant les étudier en détails.
                                                                                                            
+
                                                                                                            Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues telles que les conditions, les boucles, les fonctions et les événements. Nous avons déjà vu ces notions dans le cours mais sans nous y attarder, nous allons maintenant les étudier en détails.
                                                                                                            Prérequis
                                                                                                            
 
-
                                                                                                            Avant de commencer ce module, vous devriez connaître les bases du HTML et du CSS et avoir suivi le module précédent, JavaScript Premiers Pas.
                                                                                                            
+
                                                                                                            Avant de commencer ce module, vous devriez connaître les bases du HTML et du CSS et avoir suivi le module précédent, JavaScript Premiers Pas.
                                                                                                            
-
                                                                                                            Note : Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, ce n'est pas un problème, vous pourrez essayer la plupart des exemples en lignes grâce à des outils comme JSBin ou Thimble .
                                                                                                            
+
                                                                                                            Note : Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, ce n'est pas un problème, vous pourrez essayer la plupart des exemples en lignes grâce à des outils comme JSBin ou Thimble .
                                                                                                            
 
                                                                                                            Guides
                                                                                                            
- 
                                                                                                            Prendre des décisions dans votre code — les conditions
                                                                                                            
+ 
                                                                                                            Prendre des décisions dans votre code — les conditions
                                                                                                            
  
                                                                                                            Quelque soit le langage de programmation, notre programme doit prendre des décisions et effectuer des actions différentes selon les valeurs traitées. Dans un jeu par exemple, si le nombre de vies du joueur est égal à 0, le jeu s'achève. Sur le même principe, une application météo affiche un fond d'aube si elle est lancée le matin, des étoiles et la Lune si, au contraire, elle est lancée la nuit. Dans cet article, nous allons voir comment les structures conditionnelles fonctionnent en JavaScript.
                                                                                                            
- 
                                                                                                            Les boucles
                                                                                                            
+ 
                                                                                                            Les boucles
                                                                                                            
  
                                                                                                            Parfois une action doit être réalisée plusieurs fois d'affilée. Par exemple, parcourir une liste de noms. En programmation, les boucles effectuent ce genre de tâches à merveille. Ici, nous allons examiner les structures de boucles en JavaScript.
                                                                                                            
- 
                                                                                                            Les fonctions — réutiliser des blocs de code
                                                                                                            
+ 
                                                                                                            Les fonctions — réutiliser des blocs de code
                                                                                                            
  
                                                                                                            Un autre concept essentiel en programmation est celui de fonctions. Les fonctions permettent de définir un morceau de code réalisant une tâche particulière qui pourra être appelé ultérieurement dans le reste du programme par une simple ligne, ce qui évite d'écrire plusieurs fois le même code. Dans cet article, nous allons voir les concepts qui se cachent derrière les fonctions tels que la syntaxe de base, la définition et l'appel d'une fonction, sa portée et ses paramètres.
                                                                                                            
- 
                                                                                                            Créez votre propre fonction
                                                                                                            
+ 
                                                                                                            Créez votre propre fonction
                                                                                                            
  
                                                                                                            L'essentiel sur la théorie des fonctions a été traité dans le chapitre précédent, cet article va vous permettre de mettre en pratique vos connaissances avec un exercice. Nous allons construire notre propre fonction et nous en profiterons pour expliquer quelques notions plus avancées, utiles pour travailler avec les fonctions.
                                                                                                            
- 
                                                                                                            Les valeurs de retour des fonctions
                                                                                                            
+ 
                                                                                                            Les valeurs de retour des fonctions
                                                                                                            
  
                                                                                                            Il reste un dernier point à vous présenter avant de terminer cette partie sur les fonctions, il s'agit des valeurs retournées. Une fois leur exécution finie, les fonctions renvoient des valeurs, pour certaines d'entre-elles ce retour nous est utile. Il est important de bien comprendre ce que sont ces valeurs, comment les utiliser dans notre programme et comment faire en sorte que nos fonctions renvoient des valeurs qui nous soient utiles.
                                                                                                            
- 
                                                                                                            Introduction aux événements
                                                                                                            
+ 
                                                                                                            Introduction aux événements
                                                                                                            
  
                                                                                                            Les événements sont des actions ou occurences qui surviennent au cours de l'exécution de votre programme, auxquels vous pouvez répondre de la manière que vous souhaitez. Par exemple, si l'utilisateur clique sur une page web, vous pourriez vouloir répondre à cette action en affichant un élément d'information. Dans ce dernier article, nous allons voir des concepts importants se rapportant aux événements et voir la manière dont ils fonctionnent au sein des navigateurs.
                                                                                                            
 
                                                                                                            
 
@@ -49,7 +49,7 @@ original_slug: Apprendre/JavaScript/Building_blocks
 
                                                                                                            L'auto-évaluation suivante teste votre compréhension des bases du JavaScript vues dans le guide ci-dessus.
                                                                                                            
- 
                                                                                                            Galerie de photos
                                                                                                            
+ 
                                                                                                            Galerie de photos
                                                                                                            
  
                                                                                                            Maintenant que vous avez fini ce chapitre sur la construction de blocs en JavaScript, vous allez pouvoir tester vos connaissances sur les boucles, les fonctions, les conditions et les événements en codant un élément que l'on retrouve sur de très nombreux sites web, une galerie de photos en JavaScript.
                                                                                                            
 
                                                                                                            
 
diff --git a/files/fr/learn/javascript/building_blocks/looping_code/index.html b/files/fr/learn/javascript/building_blocks/looping_code/index.html
index 22a609df6e..fcd352b560 100644
--- a/files/fr/learn/javascript/building_blocks/looping_code/index.html
+++ b/files/fr/learn/javascript/building_blocks/looping_code/index.html
@@ -22,13 +22,13 @@ original_slug: Apprendre/JavaScript/Building_blocks/Looping_code
 
 
                                                                                                            {{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
                                                                                                            
 
-
                                                                                                            Les langages de programmation sont très utiles pour effectuer des tâches répétitives, allant de calculs basiques à à peu près n'importe quelle autre situation où vous avez un certain nombre d'actions similaires à répéter. Ici, nous allons étudier les structures de boucle disponible dans JavaScript qui répondent à un tel besoin.
                                                                                                            
+
                                                                                                            Les langages de programmation sont très utiles pour effectuer des tâches répétitives, allant de calculs basiques à à peu près n'importe quelle autre situation où vous avez un certain nombre d'actions similaires à répéter. Ici, nous allons étudier les structures de boucle disponible dans JavaScript qui répondent à un tel besoin.
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Conditions préalables:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                            
+
                                                                                                            
-   
+   
@@ -44,7 +44,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Looping_code
 
                                                                                                            Commençons par examiner le cas d'un fermier qui doit s'assurer d'avoir assez de nourriture pour nourrir sa famille pour la semaine. Il pourrait ainsi utiliser la boucle suivante :

                                                                                                            
- 
                                                                                                            
+ 
                                                                                                            Une boucle a normalement un ou plusieurs des composants suivants :
                                                                                                            
 
@@ -76,10 +76,9 @@ original_slug: Apprendre/JavaScript/Building_blocks/Looping_code
 
 
                                                                                                            Regardons maintenant un exemple qui illustre parfaitement en quoi les boucles sont si intéressantes. Disons que nous voulons dessiner 100 cercles aléatoirement sur un <canvas> (appuyez sur le bouton Update pour lancer le programme à nouveau et voir différentes dispositions aléatoires).
                                                                                                            
 
-
 
-
                                                                                                            {{ EmbedLiveSample('Hidden_code', '100%', 400) }}
                                                                                                            
+
                                                                                                            {{ EmbedLiveSample('Exemple', '100%', 400) }}
                                                                                                            
+
+
                                                                                                            Principe de boucle
                                                                                                            Vous n'avez pas besoin de comprendre entièrement le code pour l'instant, mais regardons plus en détail la partie du code qui trace les 100 cercles :
                                                                                                            
 
@@ -169,7 +169,7 @@ ctx.fill();
                                                                                                            La boucle standard
                                                                                                            
 
-
                                                                                                            Commençons maintenant à voir quelques formes de boucles spécifiques. La première, celle que vous utiliserez le plus souvent, est la boucle for. Elle a la syntaxe suivante :
                                                                                                            
+
                                                                                                            Commençons maintenant à voir quelques formes de boucles spécifiques. La première, celle que vous utiliserez le plus souvent, est la boucle for. Elle a la syntaxe suivante :
                                                                                                            for (initialisation; condition de sortie; expression finale) {
   // code à exécuter
@@ -201,12 +201,11 @@ for (let i = 0; i < chats.length; i++) {
 
 paragraphe.textContent = info;
                                                                                                            
 
-
                                                                                                            Cela nous donne la sortie suivante :
                                                                                                            
+
                                                                                                            Sortie
                                                                                                            
 
-
 
-
                                                                                                            {{ EmbedLiveSample('Hidden_code_2', '100%', 60) }}
                                                                                                            
+
                                                                                                            {{ EmbedLiveSample('Sortie', '100%', 60) }}
                                                                                                            
-
                                                                                                            Note: Vous pouvez trouver aussi cet exemple de code sur GitHub (et le voir tourner en live).
                                                                                                            
+
                                                                                                            Note : Vous pouvez trouver aussi cet exemple de code sur GitHub (et le voir tourner en live).
                                                                                                            
 
                                                                                                            Cela montre une boucle utiliser pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici :
                                                                                                            
@@ -255,11 +253,11 @@ paragraphe.textContent = info;
                                                                                                            
-
                                                                                                            Note: Nous avons fait sortir la condition i < cats.length, et pas i <= cats.length, parce que les ordinateurs comptent à partir de 0, pas 1 — nous avons démarré i à 0, et allons allers jusqu'à i = 4 (l'index du dernier item de la table/tableau). cats.length retourne 5, comme il y a 5 items dans la table, nous n'allont pas aller à i = 5, cela retournerai undefined pour le dernier item (il n'y a pas de item de table avec un index de 5). Par conséquent, nous voulons aller de 1 à moins que cats.length (i <), ce n'est pas la même chose que cats.length (i <=).
                                                                                                            
+
                                                                                                            Note : Nous avons fait sortir la condition i < cats.length, et pas i <= cats.length, parce que les ordinateurs comptent à partir de 0, pas 1 — nous avons démarré i à 0, et allons allers jusqu'à i = 4 (l'index du dernier item de la table/tableau). cats.length retourne 5, comme il y a 5 items dans la table, nous n'allont pas aller à i = 5, cela retournerai undefined pour le dernier item (il n'y a pas de item de table avec un index de 5). Par conséquent, nous voulons aller de 1 à moins que cats.length (i <), ce n'est pas la même chose que cats.length (i <=).
                                                                                                            
 
                                                                                                            
-
                                                                                                            Note: Une erreur commune avec les conditions de sortie est de les faire utiliser "égal à" plutôt que de dire "inférieur ou égal à". Si nous voulions faire tourner notre boucle jusqu'à i = 5, la condition de sortie aurait besoin d'être i <= cats.length / Si nous la mettons à i = cats.length, la boucle ne fonctionnerait pas du tout parce que i n'est pas égal à 5 sur la première itération de la boucle, de sorte que cela s'arrête immédiatement.
                                                                                                            
+
                                                                                                            Note : Une erreur commune avec les conditions de sortie est de les faire utiliser "égal à" plutôt que de dire "inférieur ou égal à". Si nous voulions faire tourner notre boucle jusqu'à i = 5, la condition de sortie aurait besoin d'être i <= cats.length / Si nous la mettons à i = cats.length, la boucle ne fonctionnerait pas du tout parce que i n'est pas égal à 5 sur la première itération de la boucle, de sorte que cela s'arrête immédiatement.
                                                                                                            
 
                                                                                                            Un petit problème est que nous avons laissé la phrase de sortie mal formée :
                                                                                                            
@@ -279,16 +277,16 @@ paragraphe.textContent = info;
 }
                                                                                                            
-
                                                                                                            Note: Vous pouvez trouver cet exemple de code sur GitHub (et aussi le voir en ligne).
                                                                                                            
+
                                                                                                            Note : Vous pouvez trouver cet exemple de code sur GitHub (et aussi le voir en ligne).
                                                                                                            
 
                                                                                                            
-
                                                                                                            Important: Avec for — comme avec toutes les boucles  — vous devez vous assurer que l'initialiseur est itéré de sorte qu'il finisse par atteindre la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une boucle infinie.
                                                                                                            
+
                                                                                                            Attention : Avec for — comme avec toutes les boucles  — vous devez vous assurer que l'initialiseur est itéré de sorte qu'il finisse par atteindre la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une boucle infinie.
                                                                                                            
 
                                                                                                            Quitter une boucle avec break
                                                                                                            
 
-
                                                                                                            Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction break. Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les instructions switch : lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle.
                                                                                                            
+
                                                                                                            Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction break. Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les instructions switch : lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle.
                                                                                                            C'est la même chose avec les boucles – un break quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit.
                                                                                                            
 
@@ -322,10 +320,9 @@ bouton.addEventListener('click', function() {
   }
 });
 
-
-
-
                                                                                                            {{ EmbedLiveSample('Hidden_code_3', '100%', 100) }}
                                                                                                            
+
                                                                                                            {{ EmbedLiveSample('Résultat', '100%', 100) }}
                                                                                                              
  
                                                                                                            1. Tout d'abord, nous avons quelques définitions de variables — nous avons un tableau d'informations de contact, avec chaque élément étant une chaîne contenant un nom et un numéro de téléphone séparés par deux points.
                                                                                                              2. 
@@ -382,12 +377,12 @@ bouton.addEventListener('click', function() {
 
                                                                                                            
-
                                                                                                            Note : Vous pouvez trouver cet exemple de code sur GitHub (aussi voir en ligne).
                                                                                                            
+
                                                                                                            Note : Vous pouvez trouver cet exemple de code sur GitHub (aussi voir en ligne).
                                                                                                            
 
                                                                                                            Passer des itérations avec continue
                                                                                                            
 
-
                                                                                                            L'instruction continue fonctionne d'une manière similaire à break, mais au lieu de sortir complètement de la boucle, elle passe à l'itération suivante de la boucle. Regardons un autre exemple qui prend un nombre comme une entrée, et retourne seulement les nombres qui sont des carrés d'entiers (nombres entiers).
                                                                                                            
+
                                                                                                            L'instruction continue fonctionne d'une manière similaire à break, mais au lieu de sortir complètement de la boucle, elle passe à l'itération suivante de la boucle. Regardons un autre exemple qui prend un nombre comme une entrée, et retourne seulement les nombres qui sont des carrés d'entiers (nombres entiers).
                                                                                                            Le HTML est fondamentalement le même que le dernier exemple — une entrée de texte simple, et un paragraphe pour la sortie. Le JavaScript est la plupart du temps identique, même si la boucle elle-même est un peu différente :
                                                                                                            
 
@@ -404,10 +399,7 @@ for (let i = 1; i <= num; i++) {
 
 
                                                                                                            Ici la sortie :
                                                                                                            
 
-
 
-
                                                                                                            {{ EmbedLiveSample('Hidden_code_4', '100%', 100) }}
                                                                                                            
+
                                                                                                            {{ EmbedLiveSample('Passer_des_itérations_avec_continue', '100%', 100) }}
                                                                                                              
  
                                                                                                            1. Dans ce cas, l'entrée doit être un nombre (num). La boucle for est dotée d'un compteur commençant à 1 (car nous ne sommes pas intéressés par 0 dans ce cas), une condition de sortie indiquant que la boucle s'arrêtera lorsque le compteur deviendra plus grand que l'entrée num, et un itérateur ajoutera 1 au compteur à chaque fois.
                                                                                                              2. 
- 
                                                                                                            2. À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant Math.sqrt(i), , puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que Math.floor() fait au nombre auquel il est passé).
                                                                                                              3. 
+ 
                                                                                                            3. À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant Math.sqrt(i), , puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que Math.floor() fait au nombre auquel il est passé).
                                                                                                              4. 
  
                                                                                                            4. Si la racine carrée et la racine carrée arrondie ne sont pas égales les unes aux autres (! ==), cela signifie que la racine carrée n'est pas un entier, donc cela ne nous intéresse pas. Dans un tel cas, nous utilisons l'instruction continue pour passer à l'itération de la boucle suivante sans enregistrer le numéro n'importe où.
                                                                                                              5. 
  
                                                                                                            5. Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction continue ne soit pas exécutée; à la place, nous concaténons la valeur i actuelle plus un espace sur la fin du contenu du paragraphe.
                                                                                                              6. 
 
                                                                                                            
-
                                                                                                            Note: Vous pouvez trouver cet exemple de code sur GitHub (aussi voir en ligne).
                                                                                                            
+
                                                                                                            Note : Vous pouvez trouver cet exemple de code sur GitHub (aussi voir en ligne).
                                                                                                            
 
                                                                                                            while et do ... while
                                                                                                            for n'est pas le seul type de boucle disponible en JavaScript. Il y en a beaucoup d'autres et, même si vous n'avez pas besoin de comprendre tout cela maintenant, il vaut mieux jeter un coup d'œil à la structure de quelques autres pour pouvoir reconnaître les mêmes caractéristiques au travail d'une manière légèrement différente.
                                                                                                            
 
-
                                                                                                            D'abord, regardons la boucle while. La syntaxe de cette boucle ressemble à ceci:
                                                                                                            
+
                                                                                                            D'abord, regardons la boucle while. La syntaxe de cette boucle ressemble à ceci:
                                                                                                            initializer
 while (exit-condition) {
@@ -491,10 +482,10 @@ while (i < cats.length) {
 }
                                                                                                            
-
                                                                                                            Note: Cela fonctionne toujours comme prévu regardez le ici GitHub (Voir en ligne le code complet).
                                                                                                            
+
                                                                                                            Note : Cela fonctionne toujours comme prévu regardez le ici GitHub (Voir en ligne le code complet).
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            La boucle do...while est très similaire, mais dénote une variation par rapport à la structure de la boucle while :
                                                                                                            
+
                                                                                                            La boucle do...while est très similaire, mais dénote une variation par rapport à la structure de la boucle while :
                                                                                                            initializer
 do {
@@ -522,14 +513,14 @@ do {
 } while (i < cats.length);
                                                                                                            
-
                                                                                                            Note: Encore, cela fonctionne toujours comme prévu — regardez le ici GitHub (Voir en ligne le code complet).
                                                                                                            
+
                                                                                                            Note : Encore, cela fonctionne toujours comme prévu — regardez le ici GitHub (Voir en ligne le code complet).
                                                                                                            
 
                                                                                                            
-
                                                                                                            Important: Avec while et do ... while – comme avec toutes les boucles – vous devez vous assurer que l'initialiseur est itéré pour qu'il atteigne finalement la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une boucle infinie.
                                                                                                            
+
                                                                                                            Attention : Avec while et do ... while – comme avec toutes les boucles – vous devez vous assurer que l'initialiseur est itéré pour qu'il atteigne finalement la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une boucle infinie.
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            Apprentissage actif : Lancer le compte à rebours !
                                                                                                            
+
                                                                                                            Apprentissage actif : Lancer le compte à rebours
                                                                                                            Dans cet exercice, nous vous proposons d'écrire un compte à rebours de lancement dans la boîte de sortie, de 10 jusqu'à "Blast Off." Plus précisément, il s'agit de :
                                                                                                            
 
@@ -554,10 +545,7 @@ do {
 
 
                                                                                                            Si vous faites une erreur, vous pourrez toujours réinitialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.
                                                                                                            
 
-
 
-
                                                                                                            {{ EmbedLiveSample('Active_learning', '100%', 780) }}
                                                                                                            
+
                                                                                                            {{ EmbedLiveSample('Apprentissage_actif_Lancer_le_compte_à_rebours', '100%', 780) }}
                                                                                                            Apprentissage actif : remplir une liste d'invités.
                                                                                                            
 
@@ -684,29 +671,26 @@ textarea.Méthodes utiles pour les chaînes de caractères pour obtenir de l'aide.
                                                                                                            
+
                                                                                                            Question bonus — après avoir accompli les tâches ci-dessus, il vous restera deux listes de noms séparées par des virgules, mais elles seront mal présentées— il y aura des virgules à la fin de chacune d'elles. Pouvez-vous faire en sorte d'écrire des lignes de code qui coupent les dernières virgules dans chacune d'elles, et ajoute un arrêt total à la fin ? Jetez un oeil à l'article Méthodes utiles pour les chaînes de caractères pour obtenir de l'aide.
                                                                                                            
 
 
                                                                                                            Si vous faites une erreur, vous pourrez toujours ré-initialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.
                                                                                                            
 
-
+
+
+
 
-
                                                                                                            {{ EmbedLiveSample('Active_learning_2', '100%', 580) }}
                                                                                                            
+
                                                                                                            {{ EmbedLiveSample("Apprentissage_actif_remplir_une_liste_d'invités.", '100%', 580) }}
                                                                                                            
 
 
                                                                                                            Quel type de boucle utiliser ?
                                                                                                            
 
@@ -850,24 +833,23 @@ do {
 
                                                                                                            Nous recommandons for, au moins pour commencer, car elle est probablement la plus facile pour tout se remémorer — l'initialisation, la condition de sortie, l'expression finale, le tout soigneusement placé entre des parenthèses. De cette façon, il est facile de voir où elles se trouvent et de vérifier qu'on ne les a pas oubliées.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Il y a d'autres types de boucles et de particularités, qui sont très utiles pour des situations spéciales et qui ne sont pas décrites dans cet article. Si vous voulez aller plus loin dans l'apprentissage des boucles, lisez le guide Boucles et itérations.
                                                                                                            
+
                                                                                                            Note : Il y a d'autres types de boucles et de particularités, qui sont très utiles pour des situations spéciales et qui ne sont pas décrites dans cet article. Si vous voulez aller plus loin dans l'apprentissage des boucles, lisez le guide Boucles et itérations.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Conclusion
                                                                                                            
 
 
                                                                                                            Cet article vous a révélé les concepts basiques et les différentes options disponibles pour créer des boucles en JavaScript. Vous devriez à présent être en mesure de comprendre en quoi les boucles constituent un bon mécanisme lorsqu'il s'agit de répéter une action dans le code, et vous devez être impatient de les utiliser dans vos propres exemples !
                                                                                                            
 
-
                                                                                                            S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à nous contacter pour demander de l'aide.
                                                                                                            
+
                                                                                                            S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à nous contacter pour demander de l'aide.
                                                                                                            
 
 
                                                                                                            Voir aussi
                                                                                                            
 
 
 
diff --git a/files/fr/learn/javascript/building_blocks/return_values/index.html b/files/fr/learn/javascript/building_blocks/return_values/index.html
index d272b2fc1c..2d2b9f628e 100644
--- a/files/fr/learn/javascript/building_blocks/return_values/index.html
+++ b/files/fr/learn/javascript/building_blocks/return_values/index.html
@@ -18,14 +18,14 @@ original_slug: Apprendre/JavaScript/Building_blocks/Return_values
 
 
                                                                                                            {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
                                                                                                            
 
-
                                                                                                            Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions: les valeurs de retour. Certaines fonctions ne retournent pas de valeur significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela dans cet article.
                                                                                                            
+
                                                                                                            Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions: les valeurs de retour. Certaines fonctions ne retournent pas de valeur significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela dans cet article.
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis :Culture informatique basique, compréhension basique du HTML et du CSS, Premiers pas en JavaScript...Culture informatique basique, compréhension basique du HTML et du CSS, Premiers pas en JavaScript...
   
                                                                                                            
   
                                                                                                            
    Objectif :
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                            
+
                                                                                                            
@@ -46,9 +46,9 @@ console.log(newString);
 // replaces one substring with another, and returns
 // a new string with the replacement made
 
-
                                                                                                            Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction replace() sur la chaîne de caractères myText , et lui passons deux paramètres: la chaîne à trouver ('string'), et la chaîne de remplacement ('sausage'). Lorsque cette fonction a fini de s'exécuter, elle retourne une valeur qui est une chaîne avec le remplacement effectué. Dans le code ci-dessus, nous sauvegardons cette valeur avec la variable newString.
                                                                                                            
+
                                                                                                            Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction replace() sur la chaîne de caractères myText , et lui passons deux paramètres: la chaîne à trouver ('string'), et la chaîne de remplacement ('sausage'). Lorsque cette fonction a fini de s'exécuter, elle retourne une valeur qui est une chaîne avec le remplacement effectué. Dans le code ci-dessus, nous sauvegardons cette valeur avec la variable newString.
                                                                                                            
 
-
                                                                                                            Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée Valeur retournée. Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible.
                                                                                                            
+
                                                                                                            Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée Valeur retournée. Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible.
                                                                                                            Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme void ou undefined dans de tels cas). Par exemple, dans la fonction displayMessage()  construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout !
                                                                                                            
 
@@ -56,7 +56,7 @@ console.log(newString);
 
 
                                                                                                            Utiliser des valeurs de retour dans vos fonctions
                                                                                                            
 
-
                                                                                                            Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef return . Nous avons vu son utilisation dans l'exemple random-canvas-circles.html. Notre fonction draw() dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}:
                                                                                                            
+
                                                                                                            Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef return . Nous avons vu son utilisation dans l'exemple random-canvas-circles.html. Notre fonction draw() dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}:
                                                                                                            function draw() {
   ctx.clearRect(0,0,WIDTH,HEIGHT);
@@ -131,7 +131,7 @@ function factorial(num) {
 
   
                                                                                                            Ici nous créons un gestionnaire d'événement onchange qui s'exécute chaque fois que l'événement change se déclenche sur le champ de saisie de texte, c'est-à-dire lorsqu'une nouvelle valeur est entrée dans le champ de saisie de texte, puis qu'elle est soumise (par exemple lorsqu'on entre une valeur puis qu'on appuie sur Tab). Quand cette fonction anonyme s'exécute, la valeur entrée dans le champ de saisie est stockée dans la variable num.
                                                                                                            
 
-  
                                                                                                            Ensuite, nous faisons un test: Si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression isNaN(num) retourne true. Nous utilisons la fonction isNaN() pour vérifier si la valeur num est un nombre — si c'est le cas, elle retourne false, sinon true.
                                                                                                            
+  
                                                                                                            Ensuite, nous faisons un test: Si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression isNaN(num) retourne true. Nous utilisons la fonction isNaN() pour vérifier si la valeur num est un nombre — si c'est le cas, elle retourne false, sinon true.
                                                                                                            
 
   
                                                                                                            Si le test retourne false, la valeur num est un nombre, alors une phrase s'affiche dans le paragraphe indiquant le carré, le cube et la factorielle du nombre. La phrase appelle les fonctions squared(), cubed() et factorial() pour obtenir les valeurs désirées.
                                                                                                            
  
@@ -139,7 +139,7 @@ function factorial(num) {
 
 
 
                                                                                                            
-
                                                                                                            Note: Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la Version final sur GitHub (également Démonstration en direct), ou demandez-nous de l'aide.
                                                                                                            
+
                                                                                                            Note : Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la Version final sur GitHub (également Démonstration en direct), ou demandez-nous de l'aide.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            À ce stade, nous aimerions que vous essayiez d'écrire quelque fonctions de votre choix et que vous les ajoutiez à la bibliothèque. Que diriez-vous des racines carré et cubique du nombre, ou de la circonférence d'un cercle de rayon num?
                                                                                                            
@@ -155,12 +155,12 @@ function factorial(num) {
 
 
                                                                                                            Nous l'avons vu, les fonctions sont amusantes, très utiles et, bien qu'il y ait beaucoup à dire en termes de syntaxe et de fonctionnalités, elles sont assez compréhensibles si elles sont étudiés correctement.
                                                                                                            
 
-
                                                                                                            Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou contactez-nous pour obtenir de l'aide.
                                                                                                            
+
                                                                                                            Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou contactez-nous pour obtenir de l'aide.
                                                                                                            
 
 
                                                                                                            Voir aussi
                                                                                                            
 
 
                                                                                                              
- 
                                                                                                            • Fonctions  en profondeur — Un guide détaillé couvrant des information plus avancées sur les fonctions.
                                                                                                              • 
+ 
                                                                                                            • Fonctions  en profondeur — Un guide détaillé couvrant des information plus avancées sur les fonctions.
                                                                                                              • 
  
                                                                                                            • Fonction Callback en JavaScript — Une façon courante en JavaScript consiste à passer une fonction à une autre en tant qu'argument, qui est alors appelée à l'intérieur de la première fonction.  Cela va au delà de la portée de ce cours, mais mériterait d'être étudier rapidement.
                                                                                                              • 
 
                                                                                                            
 
@@ -171,13 +171,13 @@ function factorial(num) {
 
                                                                                                            Dans ce module
                                                                                                            
 
 
 
 
                                                                                                             
                                                                                                            
diff --git a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html
index 7bae8cbfe8..60cc11cd4a 100644
--- a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html
@@ -19,9 +19,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage
 
 
                                                                                                            
 
-
                                                                                                            Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir.
                                                                                                            
+
                                                                                                            Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir.
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis:
    
-    
                                                                                                            Base en langage informatique, une compréhension basic de HTML et CSS, Premiers pas en JavaScript, Fonctions — blocks de code réutilisable.
                                                                                                            
+    
                                                                                                            Base en langage informatique, une compréhension basic de HTML et CSS, Premiers pas en JavaScript, Fonctions — blocks de code réutilisable.
                                                                                                            
                                                                                                                		
   
                                                                                                            
   
                                                                                                            
 
 
 
 
                                                                                                            
+
                                                                                                            
@@ -36,7 +36,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage
 
 
                                                                                                            Stockage côté client ?
                                                                                                            
 
-
                                                                                                            Ailleurs dans la zone d'apprentissage de MDN, nous avons parlé de la différence entre les sites statiques et les sites dynamiques — ces derniers stockent des données côté serveur en utilisant une base de données. Ensuite, ils exécutent du code pour récupérer les données et les insérer dans des templates de page statique. Finalement, le HTML résultant est envoyé au client, qui est alors affiché par le navigateur de l'utilisateur.
                                                                                                            
+
                                                                                                            Ailleurs dans la zone d'apprentissage de MDN, nous avons parlé de la différence entre les sites statiques et les sites dynamiques — ces derniers stockent des données côté serveur en utilisant une base de données. Ensuite, ils exécutent du code pour récupérer les données et les insérer dans des templates de page statique. Finalement, le HTML résultant est envoyé au client, qui est alors affiché par le navigateur de l'utilisateur.
                                                                                                            Le stockage côté client fonctionne sur des principes similaires, mais pour une utilisation différente. Le stockage côté client repose sur des APIs JavaScript qui permettent de stocker des données sur la machine de l'utilisateur et de les récupérer au besoin. Cela peut se révéler utile dans différents cas comme :
                                                                                                            
 
@@ -50,7 +50,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage
 
                                                                                                            Souvent, le stockage côté client et côté serveur sont utilisés ensemble. Par exemple, vous pouvez télécharger à partir d'une base de données côté serveur une série de fichiers mp3 utilisés par un site web (comme un jeu ou une application de musique) vers une base de données côté client et ainsi pouvoir les lire quand vous le voulez. Avec cette stratégie, l'utilisateur n'a à télécharger le fichier qu'une seule fois — les visites suivantes, ils sont récupérés à partir de la base de données locale.
                                                                                                            
-
                                                                                                            Note : La quantité de données que l'on peut stocker à l'aide des APIs de stockage côté client est limitée (limite par API et limite globale), la limite exacte dépend du navigateur et des configurations. Voir Limites de stockage du navigateur et critères d'éviction pour plus d'informations.
                                                                                                            
+
                                                                                                            Note : La quantité de données que l'on peut stocker à l'aide des APIs de stockage côté client est limitée (limite par API et limite globale), la limite exacte dépend du navigateur et des configurations. Voir Limites de stockage du navigateur et critères d'éviction pour plus d'informations.
                                                                                                            
 
                                                                                                            À l'ancienne : les cookies
                                                                                                            
@@ -59,14 +59,14 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage
 
 
                                                                                                            De par leur histoire, les cookies souffrent d'un certain nombre de problèmes — tant techniques qu'au niveau de l'expérience utilisateur. Ces problèmes sont suffisamment importants pour imposer un message d'information aux utilisateurs habitant en Europe lors de leur première visite si le site utilise des cookies pour stocker des informations sur eux. Cela est dû à une loi de l'Union Européenne connue sous le nom de directive Cookie.
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Pour ces raisons, nous ne verrons pas dans cet article comment utiliser les cookies. Entre le fait qu'ils sont dépassés, les problèmes de sécurité qu'ils présentent et l'incapacité de stocker des données complexes, les cookies ne sont pas la meilleure manière pour stocker des données. Il y a de meilleures alternatives, modernes, permettant de stocker des données variées sur l'ordinateur de l'utilisateur.
                                                                                                            Le seul avantage des cookies est qu'ils sont supportés par des navigateurs anciens : si votre projet requiert le support de navigateurs obsolètes (comme Internet Explorer 8 et inférieur), les cookies peuvent se révéler utiles. Pour la plupart des projets, vous ne devriez pas avoir besoin d'y recourir.
                                                                                                            
-
                                                                                                            Note : Pourquoi existe-t-il encore de nouveaux sites crées à l'aide de cookies? Principalement de par les habitudes des développeurs, l'utilisation de bibliothèques anciennes qui utilisent encore des cookies et l'existence de nombreux sites web fournissant des formations et références dépassées pour apprendre à stocker des données.
                                                                                                            
+
                                                                                                            Note : Pourquoi existe-t-il encore de nouveaux sites crées à l'aide de cookies? Principalement de par les habitudes des développeurs, l'utilisation de bibliothèques anciennes qui utilisent encore des cookies et l'existence de nombreux sites web fournissant des formations et références dépassées pour apprendre à stocker des données.
                                                                                                            
 
                                                                                                            La nouvelle école : Web Storage et IndexedDB
                                                                                                            
@@ -169,7 +169,7 @@ myName
                                                                                                            Le HTML de l'exemple est disponible à personal-greeting.html — il s'agit d'un site web très simple avec entête, contenu et pied de page, ainsi qu'un formulaire pour entrer votre nom.
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Nous allons construire cet exemple pas à pas, cela vous permettra de comprendre comment ça marche.
                                                                                                            
 
@@ -260,16 +260,16 @@ function nameDisplayCheck() {
 
                                                                                                            Notre exemple est terminé — bien joué ! Il ne vous reste plus qu'à enregistrer votre code et tester votre page HTML dans un navigateur. Vous pouvez voir notre version terminée en direct ici (ou le code JavaScript terminé).
                                                                                                            
-
                                                                                                            Note : Vous pouvez trouver un exemple un peu plus complexe dans l'article Utiliser l'API de stockage web.
                                                                                                            
+
                                                                                                            Note : Vous pouvez trouver un exemple un peu plus complexe dans l'article Utiliser l'API de stockage web.
                                                                                                            
 
                                                                                                            
-
                                                                                                            Note : Dans la ligne <script src="index.js" defer></script> de notre version finie, l'attribut defer spécifie que le contenu de l'élément {{htmlelement("script")}} ne doit pas s'exécuter avant que la page ait fini de charger.
                                                                                                            
+
                                                                                                            Note : Dans la ligne <script src="index.js" defer></script> de notre version finie, l'attribut defer spécifie que le contenu de l'élément {{htmlelement("script")}} ne doit pas s'exécuter avant que la page ait fini de charger.
                                                                                                            
 
                                                                                                            Stocker des données complexes — IndexedDB
                                                                                                            
 
-
                                                                                                            L'API IndexedDB (parfois abrégé IDB) est un système de base de données complet disponible dans le navigateur. Vous pouvez y stocker des données complexes, les types ne sont pas limités à des valeurs simples de type chaînes ou nombres. Vous pouvez stocker des vidéos, des images et à peu près tout ce que vous voulez, dans une instance IndexedDB.
                                                                                                            
+
                                                                                                            L'API IndexedDB (parfois abrégé IDB) est un système de base de données complet disponible dans le navigateur. Vous pouvez y stocker des données complexes, les types ne sont pas limités à des valeurs simples de type chaînes ou nombres. Vous pouvez stocker des vidéos, des images et à peu près tout ce que vous voulez, dans une instance IndexedDB.
                                                                                                            Cependant, cela a un coût : IndexedDB est beaucoup plus complexe à utiliser que l'API Web Storage. Dans cette section, nous ne ferons qu'égratigner la surface de ce qu'IndexedDB peut faire, mais nous vous en donnerons assez pour débuter.
                                                                                                            
 
@@ -279,7 +279,7 @@ function nameDisplayCheck() {
 
 
                                                                                                            L'application ressemble à ceci :
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Chaque note a un titre et une description, chacun éditables individuellement. Le code JavaScript que nous allons voir ci-dessous contient des commentaires détaillés pour vous aider à comprendre ce qu'il se passe.
                                                                                                            
 
@@ -333,7 +333,7 @@ let request = window.indexedDB.open('notes', 1);
                                                                                                            Pour gérer cela dans IndexedDB, on crée d'abord une requête (que vous pouvez appeler comme vous le voulez — on l'appelle request pour que ce soit plus explicite). On utilise ensuite des gestionnaire d'événement pour exécuter du code lorsque les requêtes sont terminées, échouent, etc, ce que l'on va voir ci-dessous.
                                                                                                            
-  
                                                                                                            Note : Le numéro de version est important. Si vous voulez mettre à jour votre base de données (par exemple, pour modifier la structure de la table), vous devez ré-exécuter votre code avec un numéro de version supérieur et spécifier le schéma de la base de données avec le gestionnaire d'événement onupgradeneeded. Nous ne verrons pas la mise à jour de base de données dans ce tutoriel.
                                                                                                            
+  
                                                                                                            Note : Le numéro de version est important. Si vous voulez mettre à jour votre base de données (par exemple, pour modifier la structure de la table), vous devez ré-exécuter votre code avec un numéro de version supérieur et spécifier le schéma de la base de données avec le gestionnaire d'événement onupgradeneeded. Nous ne verrons pas la mise à jour de base de données dans ce tutoriel.
                                                                                                            
   
                                                                                                          • 
@@ -396,11 +396,11 @@ request.onupgradeneeded = function(e) {
 
 
                                                                                                            Avec ce simple schéma de base de données en place, on va pouvoir ajouter des entrées à la base de données, des objets qui ressembleront à ça :
                                                                                                            
 
-
                                                                                                            {
-  title: "Acheter du lait",
-  body: "Lait de vache et de soja.",
-  id: 8
-}
                                                                                                            
+
                                                                                                            {
+  title: "Acheter du lait",
+  body: "Lait de vache et de soja.",
+  id: 8
+}
                                                                                                            
 
 
                                                                                                            Ajouter des données à la base de données
                                                                                                            
 
@@ -608,7 +608,7 @@ function deleteItem(e) {
 
                                                                                                            Et voilà ! L'exemple devrait maintenant fonctionner.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Si vous rencontrez des difficultés, n'hésitez pas à consulter notre exemple en direct (ou voir le code source).
                                                                                                            
+
                                                                                                            Note : Si vous rencontrez des difficultés, n'hésitez pas à consulter notre exemple en direct (ou voir le code source).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Stocker des données complexes avec IndexedDB
                                                                                                            
@@ -729,7 +729,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
 
 
                                                                                                            L'exemple ci-dessus montre comment créer une application qui stocke des ressources volumineuses dans une base de données IndexedDB, évitant ainsi de devoir les télécharger plus d'une fois. C'est déjà une grande amélioration pour l'expérience utilisateur, mais il manque encore une chose: les fichiers HTML, CSS, et JavaScript doivent encore être téléchargés à chaque fois que le site est accédé, ce qui veut dire qu'il ne fonctionnera pas lorsqu'il n'y a pas de connexion réseau
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            
 
 
                                                                                                            C'est là qu'interviennet les Service workers et l'API étroitement liée, Cache.
                                                                                                            
 
@@ -742,7 +742,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
 
                                                                                                            L'API Cache est un autre mécanisme de stockage côté client, il a été conçu pour enregistrer les réponses HTTP et fonctionne donc très bien en synergie avec les service workers.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Les Service workers et Cache sont pris en charge par la plupart des navigateurs modernes aujourd'hui. Au moment de la rédaction de cet article, Safari était encore occupé à l'implémenter, mais il devrait bientôt être disponible.
                                                                                                            
+
                                                                                                            Note : Les Service workers et Cache sont pris en charge par la plupart des navigateurs modernes aujourd'hui. Au moment de la rédaction de cet article, Safari était encore occupé à l'implémenter, mais il devrait bientôt être disponible.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Un exemple service worker
                                                                                                            
@@ -769,7 +769,7 @@ if('serviceWorker' in navigator) {
 
 
 
                                                                                                            
-
                                                                                                            Note : Le chemin du fichier sw.js est relatif à l'origine du site, et non au fichier JavaScript qui l'appelle.
                                                                                                            
+
                                                                                                            Note : Le chemin du fichier sw.js est relatif à l'origine du site, et non au fichier JavaScript qui l'appelle.
                                                                                                            
  Le service worker est sur https://mdn.github.io/learning-area/.../sw.js. L'origine est https://mdn.github.io. Le chemin donné doit donc être /learning-area/.../sw.js.
                                                                                                            
  Si vous vouliez héberger cet exemple sur votre propre serveur, vous devriez changer le chemin en conséquence. C'est plutôt inhabituel, mais cela doit fonctionner de cette façon pour des raisons de sécurité.
                                                                                                            
 
                                                                                                            
@@ -872,11 +872,11 @@ if('serviceWorker' in navigator) {
 
                                                                                                            Dans ce module
                                                                                                            
 
 
diff --git a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html
index 0af7689eaa..95c9f7f8e4 100644
--- a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html
@@ -16,9 +16,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics
 ---
 
                                                                                                            {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
                                                                                                            
 
-
                                                                                                            Le navigateur contient des outils de programmation graphique très puissants, du langage SVG (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir API Canvas et WebGL). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.
                                                                                                            
+
                                                                                                            Le navigateur contient des outils de programmation graphique très puissants, du langage SVG (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir API Canvas et WebGL). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.
                                                                                                            
 
-
                                                                                                            • 
  
   
                                                                                                            
    Prérequis:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
   
 
   
  
  
                                                                                                            
+
                                                                                                            
@@ -50,7 +50,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics
 
                                                                                                            Cet article se concentrera principalement sur les canvas 2D, car le code WebGL brut est très complexe. Nous montrerons cependant comment utiliser une bibliothèque WebGL pour créer une scène 3D plus facilement, et vous pourrez  par la suite suivre le tutoriel WebGL, qui couvre le code WebGL brut.
                                                                                                            
-
                                                                                                            Note: Canvas est très bien pris en charge parmi les différents navigateurs, à l'exception de IE 8 (et inférieur) pour les canvas 2D, et IE 11 (et inférieur) pour WebGL.
                                                                                                            
+
                                                                                                            Note : Canvas est très bien pris en charge parmi les différents navigateurs, à l'exception de IE 8 (et inférieur) pour les canvas 2D, et IE 11 (et inférieur) pour WebGL.
                                                                                                            
 
                                                                                                            Apprentissage actif: Débuter avec un <canvas>
                                                                                                            
@@ -112,7 +112,7 @@ var height = canvas.height = window.innerHeight;
                                                                                                            
-
                                                                                                            Note: Vous devrez généralement définir la taille de l'image en utilisant les attributs HTML ou les propriétéss DOM, comme expliqué ci-dessus. Vous pourriez théoriquement utiliser CSS, le problème étant que le dimensionnement le canvas est alors effectué après que le contenu canvas n'ait été calculé, et comme toute autre image (puisque le canvas une fois affiché n'est plus qu'une simple image), elle peut devenir pixelisée/déformée.
                                                                                                            
+
                                                                                                            Note : Vous devrez généralement définir la taille de l'image en utilisant les attributs HTML ou les propriétéss DOM, comme expliqué ci-dessus. Vous pourriez théoriquement utiliser CSS, le problème étant que le dimensionnement le canvas est alors effectué après que le contenu canvas n'ait été calculé, et comme toute autre image (puisque le canvas une fois affiché n'est plus qu'une simple image), elle peut devenir pixelisée/déformée.
                                                                                                            
 
                                                                                                            Obtenir le contexte du canvas et configuration finale
                                                                                                            
@@ -124,7 +124,7 @@ var height = canvas.height = window.innerHeight;
                                                                                                            var ctx = canvas.getContext('2d');
                                                                                                            
-
                                                                                                            Note: Vous pouvez choisir d'autres types de contexte comme webgl pour WebGL, webgl2 pour WebGL 2, etc., mais nous n'en aurons pas besoin dans cet article.
                                                                                                            
+
                                                                                                            Note : Vous pouvez choisir d'autres types de contexte comme webgl pour WebGL, webgl2 pour WebGL 2, etc., mais nous n'en aurons pas besoin dans cet article.
                                                                                                            
 
                                                                                                            Voilà — notre canvas est maintenant préparé et prêt à être dessiné! La variable ctx contient désormais un objet {{domxref("CanvasRenderingContext2D")}}, et toutes les opérations de dessin sur le canvas impliqueront de manipuler cet objet.
                                                                                                            
@@ -144,7 +144,7 @@ ctx.fillRect(0, 0, width, height);
                                                                                                            De nombreuses opérations doivent recevoir des coordonnées en entrée pour savoir où dessiner quelque chose — le coin supérieur gauche du canvas est le point (0, 0), l'axe horizontal (x) va de gauche à droite, et l'axe vertical (y) va de haut en bas.
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Dessiner des formes est souvent fait en utilisant la forme rectangle, ou alors en traçant une ligne le long d'un certain chemin puis en remplissant la forme. Nous allons vous montrer ci-dessous comment faire ces deux choses.
                                                                                                            
 
@@ -208,7 +208,7 @@ ctx.strokeRect(25, 25, 175, 200);
                                                                                                            {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}}
                                                                                                            
-
                                                                                                            Note: Le code terminé est disponible sur GitHub, 2_canvas_rectangles.html.
                                                                                                            
+
                                                                                                            Note : Le code terminé est disponible sur GitHub, 2_canvas_rectangles.html.
                                                                                                            
 
                                                                                                            Dessiner des chemins
                                                                                                            
@@ -284,7 +284,7 @@ ctx.fill();
                                                                                                             
                                                                                                            
 
-    
                                                                                                            
+    
                                                                                                            Une des formule trigonométrique de base stipule que la longueur du côté adjacent mutiplié par la tangente de l'angle est égale à l'opposé, soit 50 * Math.tan(degToRad(60)). Nous utilisons notre fonction degToRad() pour convertir 60 degrés en radians, puisque {{jsxref("Math.tan()")}} attend une valeur en radians.
                                                                                                            
@@ -324,7 +324,7 @@ ctx.fill();
                                                                                                            
-  
                                                                                                            Note: 0 degrés est horizontalement vers la droite.
                                                                                                            
+  
                                                                                                            Note : 0 degrés est horizontalement vers la droite.
                                                                                                            
   
                                                                                                          • 
@@ -350,11 +350,11 @@ ctx.fill();
 
                                                                                                            {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}}
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Le code finit est disponible sur GitHub, 3_canvas_paths.html.
                                                                                                            
+
                                                                                                            Note : Le code finit est disponible sur GitHub, 3_canvas_paths.html.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Pour en savoir plus sur les fonctions de dessin avancées, telles que les courbes Bézier, consultez notre tutoriel Dessiner des formes avec le canevas.
                                                                                                            
+
                                                                                                            Note : Pour en savoir plus sur les fonctions de dessin avancées, telles que les courbes Bézier, consultez notre tutoriel Dessiner des formes avec le canevas.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Texte
                                                                                                            
@@ -388,7 +388,7 @@ ctx.fillText('Canvas text', 50, 150);
 
                                                                                                            {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}}
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Le code final est disponible sur GitHub, 4_canvas_text.html.
                                                                                                            
+
                                                                                                            Note : Le code final est disponible sur GitHub, 4_canvas_text.html.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Jouez avec et voyez ce que vous pouvez faire! Vous pouvez trouver plus d'information sur les options disponibles pour ajouter du texte sur un canvas dans Dessin de texte avec canvas.
                                                                                                            
@@ -440,7 +440,7 @@ image.src = 'firefox.png';
 
                                                                                                            {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}}
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Le code final est disponible sur GitHub, 5_canvas_images.html.
                                                                                                            
+
                                                                                                            Note : Le code final est disponible sur GitHub, 5_canvas_images.html.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Boucles et animations
                                                                                                            
@@ -542,7 +542,7 @@ ctx.rotate(degToRad(5));
 
 
 
                                                                                                            
-
                                                                                                            Note: Le code terminé est disponible sur GitHub, 6_canvas_for_loop.html.
                                                                                                            
+
                                                                                                            Note : Le code terminé est disponible sur GitHub, 6_canvas_for_loop.html.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Animations
                                                                                                            
@@ -596,7 +596,7 @@ loop();
 
 
 
                                                                                                            
-
                                                                                                            Note: Nous ne couvrirons pas save() et restore() ici, mais elles sont bien expliquées dans notre tutoriel Transformations (et ceux qui le suivent).
                                                                                                            
+
                                                                                                            Note : Nous ne couvrirons pas save() et restore() ici, mais elles sont bien expliquées dans notre tutoriel Transformations (et ceux qui le suivent).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Une animation simple de personnage
                                                                                                            
@@ -627,7 +627,7 @@ var posX = 0;
 
   
                                                                                                            L'image de sprites (que nous avons respectueusement emprunté à Mike Thomas dans son article Create a sprite sheet walk cycle using using CSS animation — créer un cycle de marche avec une feuille de sprites en utilisant les animations CSS) ressemble à ça:
                                                                                                            
 
-  
                                                                                                            
+  
                                                                                                            
 
   
                                                                                                            Elle contient six sprites qui constituent une séquence de marche — chacun a 102 pixels de large et 148 pixels de hauteur. Pour afficher chaque sprite proprement, nous allons devoir utiliser drawImage() pour découper un seul sprite de l'image et n'afficher que cette partie, comme nous l'avons fait précédemment avec le logo Firefox. La coordonnée X de la découpe devra être un multiple de 102 et la coordonnée Y sera toujours 0. La taille de la découpe sera toujours de 102 pixels par 148.
                                                                                                            
  
                                                                                                            • 
@@ -700,7 +700,7 @@ var posX = 0;
                                                                                                            {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}
                                                                                                            
-
                                                                                                            Note: Le code final est disponible sur GitHub, 7_canvas_walking_animation.html.
                                                                                                            
+
                                                                                                            Note : Le code final est disponible sur GitHub, 7_canvas_walking_animation.html.
                                                                                                            
 
                                                                                                            Une application simple de dessin
                                                                                                            
@@ -753,7 +753,7 @@ canvas.onmouseup = function() {
 draw();
                                                                                                            
-
                                                                                                            Note: Les types d'{{htmlelement("input")}} range et color sont relativement bien pris en charge parmi les différents navigateurs, à l'exception des versions d'Internet Explorer inférieures à 10; et Safari ne prend pas en charge le type color. Si votre navigateur ne prend pas en charge ces types, il affichera simplement un champ texte et vous n'aurez qu'à entrer des valeurs de couleur et numéro valides vous-mêmes.
                                                                                                            
+
                                                                                                            Note : Les types d'{{htmlelement("input")}} range et color sont relativement bien pris en charge parmi les différents navigateurs, à l'exception des versions d'Internet Explorer inférieures à 10; et Safari ne prend pas en charge le type color. Si votre navigateur ne prend pas en charge ces types, il affichera simplement un champ texte et vous n'aurez qu'à entrer des valeurs de couleur et numéro valides vous-mêmes.
                                                                                                            
 
                                                                                                            WebGL
                                                                                                            
@@ -881,7 +881,7 @@ scene.add(spotLight);
                                                                                                            Vous pouvez trouver le code terminé sur GitHub.
                                                                                                            
-
                                                                                                            Note: Dans notre repo GitHub vous pouvez également trouver d'autres exemples 3D intéressants — Three.js Video Cube (le voir en direct). On utilise {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} pour prendre un flux vidéo à partir d'une webcam de l'ordinateur et le projetons sur le côté du cube comme texture!
                                                                                                            
+
                                                                                                            Note : Dans notre repo GitHub vous pouvez également trouver d'autres exemples 3D intéressants — Three.js Video Cube (le voir en direct). On utilise {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} pour prendre un flux vidéo à partir d'une webcam de l'ordinateur et le projetons sur le côté du cube comme texture!
                                                                                                            
 
                                                                                                            Sommaire
                                                                                                            
@@ -913,11 +913,11 @@ scene.add(spotLight);
                                                                                                            Dans ce module
                                                                                                            
diff --git a/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html
index 2c693f757b..9fe8ea07d5 100644
--- a/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html
@@ -18,9 +18,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data
 
 
                                                                                                            {{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
                                                                                                            
 
-
                                                                                                            Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail a, en vérité, eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que XMLHttpRequest et l'API Fetch.
                                                                                                            
+
                                                                                                            Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail a, en vérité, eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que XMLHttpRequest et l'API Fetch.
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
     
 
     
    
   
 
   
  
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                            
+
                                                                                                            
@@ -37,7 +37,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data
 
 
                                                                                                            À la base, le chargement d'une page web est simple — vous envoyez une requête à un serveur et, tant qu'il n'y a pas eu de problème, les ressources de la page web sont téléchargées et affichées sur votre ordinateur.
                                                                                                            
 
-
                                                                                                            A basic representation of a web site architecture
                                                                                                            
+
                                                                                                            A basic representation of a web site architecture
                                                                                                            Le problème avec ce modèle c'est qu'à chaque fois que vous voulez mettre à jour une partie de la page, par exemple pour afficher la page suivante d'une liste de produits, vous devez recharger toute la page. Ce surcoût est tout à fait inutile et résulte en une mauvaise expérience utilisateur, particulièrement pour les pages qui sont lourdes, complexes et du coup longues à charger.
                                                                                                            
 
@@ -48,10 +48,10 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data
 
                                                                                                            Nous avons pour cela l'API {{domxref("XMLHttpRequest")}} à notre disposition ou — plus récemment — l'API Fetch. Elles permettent de réaliser des requêtes HTTP pour récupérer des ressources spécifiques disponibles sur un serveur et de formater les données retournées selon les besoins avant l'affichage dans la page.
                                                                                                            
-
                                                                                                            Note : Dans les premiers temps, cette technique était appelée "Asynchronous JavaScript and XML" (JavaScript asychrone et XML), dit AJAX, parce qu'elle utilisait {{domxref("XMLHttpRequest")}} pour requêter des données XML. De nos jours, c'est rarement le cas; la plupart du temps, on utilise XMLHttpRequest ou Fetch pour requêter des données JSON. Quoi qu'il en soit, le procédé reste le même et le terme "Ajax" est resté pour décrire cette technique.
                                                                                                            
+
                                                                                                            Note : Dans les premiers temps, cette technique était appelée "Asynchronous JavaScript and XML" (JavaScript asychrone et XML), dit AJAX, parce qu'elle utilisait {{domxref("XMLHttpRequest")}} pour requêter des données XML. De nos jours, c'est rarement le cas; la plupart du temps, on utilise XMLHttpRequest ou Fetch pour requêter des données JSON. Quoi qu'il en soit, le procédé reste le même et le terme "Ajax" est resté pour décrire cette technique.
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            A simple modern architecture for web sites
                                                                                                            
+
                                                                                                            A simple modern architecture for web sites
                                                                                                            Le modèle Ajax implique une API web comme proxy pour requêter les données plus intelligemment que simplement rafraîchir la page à chaque fois. Voyons plutôt l'impact que cela a :
                                                                                                            
 
@@ -69,7 +69,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data
 
 
                                                                                                            Notez que pour accélerer les choses encore davantage, certains sites stockent les ressources et données chez le client lors de sa première visite, si bien que les visites suivantes, les fichiers locaux sont utilisés et non re-téléchargés du serveur. Le contenu n'est rechargé que lorsqu'il a été mis à jour sur le serveur.
                                                                                                            
 
-
                                                                                                            A basic web app data flow architecture
                                                                                                            
+
                                                                                                            A basic web app data flow architecture
                                                                                                            Une requête Ajax basique
                                                                                                            
 
@@ -130,7 +130,7 @@ var url = verse + '.txt';
                                                                                                          • 
   
                                                                                                            Récupérer une ressource sur le réseau est une opération {{glossary("asynchronous","asynchrone")}}, ce qui signifie que vous devez attendre que cette opération se termine (par exemple, que la ressource soit renvoyée) avant de pouvoir récupérer la réponse — sans quoi une erreur est levée. XHR permet d'exécuter du code lorsque la réponse est reçue grâce au gestionnaire d'événement {{domxref("XMLHttpRequest.onload", "onload")}} — quand l'événement {{event("load")}} est déclenché. Une fois que la réponse a été reçue, alors la réponse est accessible via la propriété response de l'objet XHR utilisé.
                                                                                                            
 
-  
                                                                                                            Ajoutez le bloc de code qui suit toujours au bas de la fonction updateDisplay(). Vous verrez qu'à l'intérieur du gestionnaire d'événément onload, nous assignons la propriété textContent de poemDisplay (l'élément {{htmlelement("pre")}}) à la valeur de la propriété {{domxref("XMLHttpRequest.response", "request.response")}}.
                                                                                                            
+  
                                                                                                            Ajoutez le bloc de code qui suit toujours au bas de la fonction updateDisplay(). Vous verrez qu'à l'intérieur du gestionnaire d'événément onload, nous assignons la propriété textContent de poemDisplay (l'élément {{htmlelement("pre")}}) à la valeur de la propriété {{domxref("XMLHttpRequest.response", "request.response")}}.
                                                                                                            
 
   
                                                                                                            request.onload = function() {
   poemDisplay.textContent = request.response;
@@ -257,7 +257,7 @@ myFetch.then(function(response) {
 
 
                                                                                                            L'objet response a une méthode {{domxref("Body.text","text()")}}, qui convertit les données brutes contenues dans la réponse en texte brut — c'est le format que nous voulons. Cette méthode retourne également une promesse, qui se résout lorsque la réponse est convertie en texte, nous utilisons donc un deuxième {{jsxref("Promise.then",".then()")}} pour cette deuxième promesse.
                                                                                                            
 
-
                                                                                                            À l'intérieur de ce dernier .then(), nous définissons une nouvelle fonction, qui décide de ce que nous faisons avec le texte récupéré. Nous nous contentons de définir la propriété textContent de l'élément {{htmlelement("pre")}} à la valeur du texte.
                                                                                                            
+
                                                                                                            À l'intérieur de ce dernier .then(), nous définissons une nouvelle fonction, qui décide de ce que nous faisons avec le texte récupéré. Nous nous contentons de définir la propriété textContent de l'élément {{htmlelement("pre")}} à la valeur du texte.
                                                                                                            
 
 
                                                                                                            Chaîner les then()
                                                                                                            
 
@@ -285,7 +285,7 @@ myFetch.then(function(response) {
 
 
                                                                                                            Pour clore l'article, nous allons regarder un exemple un peu plus complexe, qui montre des utilisations plus intéressantes de Fetch. Nous avons créé un site d'exemple appelé The Can Store (le magasin de conserves) — c'est un supermarché fictif qui ne vend que des boites de conserves. Vous pouvez trouver cet exemple en direct sur GitHub, et voir le code source.
                                                                                                            
 
-
                                                                                                            A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column.
                                                                                                            
+
                                                                                                            A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column.
                                                                                                            
 
 
                                                                                                            Par défaut, le site affiche tous les produits ; mais vous pouvez utiliser le formulaire dans la colonne de gauche pour les filtrer par catégorie, ou chercher un terme, ou les deux.
                                                                                                            
 
@@ -361,7 +361,7 @@ myFetch.then(function(response) {
 
 
 
                                                                                                            
-
                                                                                                            Note : Si vous avez des difficultés à le faire, vous pouvez comparer votre code à la version finale sur GitHub (voir le code source, ou voir en direct).
                                                                                                            
+
                                                                                                            Note : Si vous avez des difficultés à le faire, vous pouvez comparer votre code à la version finale sur GitHub (voir le code source, ou voir en direct).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Sommaire
                                                                                                            
@@ -387,12 +387,12 @@ myFetch.then(function(response) {
 
                                                                                                            Dans ce module
                                                                                                            
 
 
 
diff --git a/files/fr/learn/javascript/client-side_web_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/index.html
index ca24150652..b7ce9e7171 100644
--- a/files/fr/learn/javascript/client-side_web_apis/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/index.html
@@ -20,16 +20,16 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs
 ---
 
                                                                                                            {{LearnSidebar}}
                                                                                                            
 
-
                                                                                                            Lorsque vous écrivez du JavaScript côté client pour des sites Web ou des applications, vous n'irez pas très loin avant d'utiliser des API - des interfaces pour manipuler différents aspects du navigateur et du système d'exploitation sur lesquels le site opère, ou même des données provenant d'autres sites web ou services. Dans ce module, nous allons explorer ce que sont les API, et comment utiliser certaines API les plus courantes que vous rencontrerez souvent dans votre travail de développement.
                                                                                                            
+
                                                                                                            Lorsque vous écrivez du JavaScript côté client pour des sites Web ou des applications, vous n'irez pas très loin avant d'utiliser des API - des interfaces pour manipuler différents aspects du navigateur et du système d'exploitation sur lesquels le site opère, ou même des données provenant d'autres sites web ou services. Dans ce module, nous allons explorer ce que sont les API, et comment utiliser certaines API les plus courantes que vous rencontrerez souvent dans votre travail de développement.
                                                                                                            
 
 
                                                                                                            Prérequis
                                                                                                            
 
-
                                                                                                            Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série (Premiers pas, Building blocks et objets JavaScript). Ces modules impliquent tout de même un bon nombre d'utilisations simples de l'API, car il est difficile d'écrire des exemples JavaScript côté client faisant quelque chose d'utile sans eux! Ici, nous passons à un niveau supérieur, en supposant que vous connaissiez le langage JavaScript de base et explorant les APIs Web courantes de manière un peu plus détaillée.
                                                                                                            
+
                                                                                                            Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série (Premiers pas, Building blocks et objets JavaScript). Ces modules impliquent tout de même un bon nombre d'utilisations simples de l'API, car il est difficile d'écrire des exemples JavaScript côté client faisant quelque chose d'utile sans eux! Ici, nous passons à un niveau supérieur, en supposant que vous connaissiez le langage JavaScript de base et explorant les APIs Web courantes de manière un peu plus détaillée.
                                                                                                            
 
-
                                                                                                            Une connaissance basique de HTML et CSS serait aussi utile.
                                                                                                            
+
                                                                                                            Une connaissance basique de HTML et CSS serait aussi utile.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Remarque: Si vous travaillez sur un ordinateur/tablette/autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de code en ligne tel que JSBin ou Thimble.
                                                                                                            
+
                                                                                                            Note : Si vous travaillez sur un ordinateur/tablette/autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de code en ligne tel que JSBin ou Thimble.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Guides
                                                                                                            
@@ -40,7 +40,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs
  
                                                                                                            Manipuler des documents
                                                                                                            
  
                                                                                                            Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.
                                                                                                            
  
                                                                                                            Récupérer des données du serveur
                                                                                                            
- 
                                                                                                            Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail, a en vérité eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que {{domxref("XMLHttpRequest")}} et l'API Fetch.
                                                                                                            
+ 
                                                                                                            Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail, a en vérité eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que {{domxref("XMLHttpRequest")}} et l'API Fetch.
                                                                                                            
  
                                                                                                            APIs tierces
                                                                                                            
  
                                                                                                            Les APIs que nous avons vu jusqu'à présent sont intégrées dans le navigateur, mais ce n'est pas le cas de toutes. De nombreux gros sites web tels que Google Maps, Twitter, Facebook, PayPal, etc, fournissent des APIs permettant aux développeurs d'utiliser leurs données (par exemple pour afficher un flux twitter sur un blog) ou service (par exemple afficher une carte Google Maps sur un site, ou utiliser Facebook pour permettre aux utilisateurs de se connecter). Cet article compare les APIs du navigateur aux APIs tierces et montre quelques utilisations typiques de ces dernières.
                                                                                                            
  
                                                                                                            Dessiner des éléments graphiques
                                                                                                            
diff --git a/files/fr/learn/javascript/client-side_web_apis/introduction/index.html b/files/fr/learn/javascript/client-side_web_apis/introduction/index.html
index 9ac5bc56a8..ed8648ce6f 100644
--- a/files/fr/learn/javascript/client-side_web_apis/introduction/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/introduction/index.html
@@ -19,9 +19,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction
 
 
                                                                                                            {{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}
                                                                                                            
 
-
                                                                                                            Tout d'abord, nous verrons dans les grandes lignes ce qu'est une API — leur fonctionnement, comment les utiliser dans votre code, leur structure. Nous verrons également quelles sont les principales API et leur utilisation.
                                                                                                            
+
                                                                                                            Tout d'abord, nous verrons dans les grandes lignes ce qu'est une API — leur fonctionnement, comment les utiliser dans votre code, leur structure. Nous verrons également quelles sont les principales API et leur utilisation.
                                                                                                            
 
-
                                                                                                            • 
  
   
                                                                                                            
    Prérequis :
 
 
 
 
 
 
 
 
  
                                                                                                            
+
                                                                                                            
@@ -40,15 +40,14 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction
 
 
                                                                                                            En guise d'exemple concret, pensez à des branchements électriques dans une maison, appartement ou autre logement. Si vous souhaitez utiliser un appareil dans votre maison, il vous suffit de le brancher dans une prise et cela fonctionne. Vous n'essayez pas de le brancher directement à l'alimentation électrique — le faire serait réellement inefficace, et, si vous n'êtes pas électricien, difficile et dangereux à réaliser.
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Source de l'image : Overloaded plug socket par The Clear Communication People, sur Flickr.
                                                                                                            De la même façon, par exemple, pour programmer des graphismes en 3D, il est beaucoup plus facile de le faire en utilisant une API écrite dans un langage de haut niveau comme JavaScript ou Python, plutôt que d'essayer d'écrire du code bas niveau (comme C ou C ++) qui contrôle directement le GPU de l'ordinateur ou d'autres fonctions graphiques.
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Voir aussi l'entrée du glossaire du terme API pour plus de descriptions.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Voir aussi l'entrée du glossaire du terme API pour plus de descriptions.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            API JavaScript côté client
                                                                                                            
@@ -61,7 +60,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction
   Par exemple: l'API Twitter vous permet d'afficher vos derniers tweets sur votre site Web. Elle fournit un ensemble de constructions que vous pouvez utiliser pour interroger le service Twitter et qui renvoie alors les informations demandées.
 
 
-
                                                                                                            
+
                                                                                                            
 
 
                                                                                                            Relations entre JavaScript, les API et autres outils JavaScript
                                                                                                            
 
@@ -108,9 +107,8 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction
   
                                                                                                          • L'API Mastodon permet de manipuler les fonctionnalités du réseau social Mastodon grâce à des programmes.
                                                                                                            • 
  
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Vous pouvez trouver des informations sur beaucoup plus d'API tierces dans le répertoire Programmable Web API.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Vous pouvez trouver des informations sur beaucoup plus d'API tierces dans le répertoire Programmable Web API.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Comment les API fonctionnent-elles ?
                                                                                                            
@@ -121,9 +119,8 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction
 
 
                                                                                                            Les API interagissent avec le code en utilisant un ou plusieurs objets JavaScript, qui servent de conteneurs pour les données utilisées par l'API (contenues dans les propriétés d'objet), et la fonctionnalité rendue disponible par l'API (contenue dans des méthodes d'objet).
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Si vous n'êtes pas déjà familier avec le fonctionnement des objets, vous devriez revenir en arrière et parcourir le module objets JavaScript avant de continuer.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Si vous n'êtes pas déjà familier avec le fonctionnement des objets, vous devriez revenir en arrière et parcourir le module objets JavaScript avant de continuer.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Prenons comme exemple l'API Web Audio. Il s'agit d'une API assez complexe avec plusieurs objets. Voici les objets principaux :
                                                                                                            
@@ -189,8 +186,7 @@ audioElement.addEventListener('ended', function() {
 });
 
 
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Certains d'entre vous ont peut-être remarqué que les méthodes play() et pause() utilisées pour lire et mettre en pause la piste ne font pas partie de l'API audio Web ; elles font partie de l'API HTMLMediaElement. qui est différente mais étroitement liée.
                                                                                                            
+  
                                                                                                            Note : Certains d'entre vous ont peut-être remarqué que les méthodes play() et pause() utilisées pour lire et mettre en pause la piste ne font pas partie de l'API audio Web ; elles font partie de l'API HTMLMediaElement. qui est différente mais étroitement liée.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Ensuite, nous créons un objet GainNode à l'aide de la méthode AudioContext.createGain(), qui peut être utilisé pour ajuster le volume de l'audio qui le traverse, et nous créons un autre gestionnaire d'événements qui modifie la valeur du gain (volume) du graphique audio lorsque la valeur du curseur est modifiée :
                                                                                                            
@@ -233,8 +229,7 @@ const ctx = canvas.getContext('2d');
 };
 
 
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Vous pouvez voir ce code en action dans notre démo de balles rebondissantes (voyez-le fonctionner en direct également).
                                                                                                            
+  
                                                                                                            Note : Vous pouvez voir ce code en action dans notre démo de balles rebondissantes (voyez-le fonctionner en direct également).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Elles utilisent des événements pour gérer les changements d'état
                                                                                                            
@@ -261,9 +256,8 @@ request.onload = function() {
   showHeroes(superHeroes);
 }
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Vous pouvez voir ce code en action dans notre exemple ajax.html (voyez-le en direct également).
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Vous pouvez voir ce code en action dans notre exemple ajax.html (voyez-le en direct également).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Les cinq premières lignes spécifient l'emplacement de la ressource que nous voulons récupérer, créent une nouvelle instance d'un objet de requête en utilisant le constructeur XMLHttpRequest(), ouvrent une requête HTTP GET pour récupérer la ressource spécifiée, spécifient que la réponse doit être envoyée au format JSON, puis envoient la requête.
                                                                                                            
@@ -276,13 +270,12 @@ request.onload = function() {
 
 
                                                                                                            En outre, certaines API Web demandent la permission d'être activées à l'utilisateur une fois que les appels à ces interfaces sont effectués dans votre code. À titre d'exemple, l'API Notifications API demande la permission à l'aide d'une boîte de dialogue contextuelle :
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            
 
 
                                                                                                            Les API Web Audio et HTMLMediaElement sont soumises à un mécanisme de sécurité appelé autoplay policy - cela signifie essentiellement que vous ne pouvez pas lire automatiquement l'audio lorsqu'une page se charge — vous devez permettre à vos utilisateurs de déclencher la lecture audio par le biais d'un contrôle comme un bouton. Cette mesure est prise parce que la lecture automatique de l'audio est généralement très ennuyeuse et que nous ne devrions pas y soumettre nos utilisateurs.
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Selon la rigueur du navigateur, ces mécanismes de sécurité peuvent même empêcher l'exemple de fonctionner localement, c'est-à-dire si vous chargez le fichier d'exemple local dans votre navigateur au lieu de l'exécuter à partir d'un serveur web. Au moment de la rédaction de ce document, notre exemple d'API Web Audio ne fonctionnait pas localement sur Google Chrome — nous avons dû le télécharger sur GitHub avant qu'il ne fonctionne.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Selon la rigueur du navigateur, ces mécanismes de sécurité peuvent même empêcher l'exemple de fonctionner localement, c'est-à-dire si vous chargez le fichier d'exemple local dans votre navigateur au lieu de l'exécuter à partir d'un serveur web. Au moment de la rédaction de ce document, notre exemple d'API Web Audio ne fonctionnait pas localement sur Google Chrome — nous avons dû le télécharger sur GitHub avant qu'il ne fonctionne.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Résumé
                                                                                                            
diff --git a/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html
index 76b8b9cfb7..8025213ac4 100644
--- a/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html
@@ -20,9 +20,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents
 
 
                                                                                                            {{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}
                                                                                                            
 
-
                                                                                                            Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet Document. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.
                                                                                                            
+
                                                                                                            Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet Document. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.
                                                                                                            
 
-
                                                                                                            
   
     
                                                                                                            
       Prérequis :
 
 
 
 
                                                                                                            
+
                                                                                                            
@@ -41,7 +41,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents
 
 
                                                                                                            Malgré les limitations, les APIs Web nous donnent accès à beaucoup de fonctionnalités, lesquelles nous permettent de faire plein de choses géniales avec les pages web. Il existe quelques éléments évidents que vous utilisez régulièrement dans votre code — jetez un coup d'œil au diagramme suivant, il représente les principaux composants du navigateur directement impliqués dans l'affichage des pages web:
                                                                                                            
 
-
                                                                                                            
+
                                                                                                              
  
                                                                                                            • La fenêtre est l'onglet du navigateur dans lequel une page web est chargée. Elle est représentée en JavaScript par l'objet Window. Utiliser les méthodes disponibles sur cet objet nous permet par exemple de récupérer la taille de la fenêtre (voir Window.innerWidth et Window.innerHeight), manipuler le document chargé dans cette fenêtre, stocker des données spécifiques à ce document côté client (par exemple en utilisant une base de données locale ou autre mécanisme de stockage), attacher un gestionnaire d'événement à la fenêtre en cours, et plus encore.
                                                                                                              • 
@@ -73,7 +73,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents
 
 
                                                                                                              Le DOM, quant à lui, ressemble à ça :
                                                                                                              
 
-
                                                                                                              
+
                                                                                                              
 
 
                                                                                                              
 
                                                                                                              Note : Ce diagramme du DOM a été créé en utilisant le Live DOM viewer de Ian Hickson.
                                                                                                              
@@ -198,7 +198,7 @@ para.style.textAlign = 'center';
 
 
 
                                                                                                              
-
                                                                                                              Note : Vous remarquerez que les propriétés JavaScript qui représentent les propriétés CSS sont écrites en lower camel case tandis que les versions CSS sont reliées par des tirets (par exemple backgroundColor au lieu de background-color). Prenez garde à ne pas les mélanger, sans quoi ça ne fonctionnera pas.
                                                                                                              
+
                                                                                                              Note : Vous remarquerez que les propriétés JavaScript qui représentent les propriétés CSS sont écrites en lower camel case tandis que les versions CSS sont reliées par des tirets (par exemple backgroundColor au lieu de background-color). Prenez garde à ne pas les mélanger, sans quoi ça ne fonctionnera pas.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Il y a un autre moyen de manipuler dynamiquement des styles sur votre document, que nous allons étudier maintenant.
                                                                                                              
@@ -229,7 +229,7 @@ para.style.textAlign = 'center';
 
                                                                                                              Dans les deux prochaines sections, nous verrons des exemples d'utilisation plus pratiques des APIs du DOM.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Vous pouvez trouver la version finale de dom-example.html sur GitHub (le voir en direct aussi).
                                                                                                              
+
                                                                                                              Note : Vous pouvez trouver la version finale de dom-example.html sur GitHub (le voir en direct aussi).
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Apprentissage actif : Récupérer des informations utiles depuis l'objet Window
                                                                                                              
@@ -262,7 +262,7 @@ para.style.textAlign = 'center';
   
 
 
                                                                                                              
-
                                                                                                              Note : En cas de blocage, jetez un œil à notre exemple de redimensionnement de la fenêtre terminé sur GitHub (voir en direct aussi).
                                                                                                              
+
                                                                                                              Note : En cas de blocage, jetez un œil à notre exemple de redimensionnement de la fenêtre terminé sur GitHub (voir en direct aussi).
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Apprentissage actif : Une liste de courses dynamique
                                                                                                              
@@ -277,7 +277,7 @@ para.style.textAlign = 'center';
 
 
                                                                                                              La démo terminée doit ressembler à ça:
                                                                                                              
 
-
                                                                                                              
+
                                                                                                              
 
 
                                                                                                              Pour compléter l'exercice, suivez les étapes ci-dessous, et assurez-vous que votre exemple se comporte comme décrit ci-dessus.
                                                                                                              
 
@@ -296,7 +296,7 @@ para.style.textAlign = 'center';
 
 
 
                                                                                                              
-
                                                                                                              Note : Si vous bloquez vraiment, jetez un œil à notre liste de courses terminée (voir en direct.)
                                                                                                              
+
                                                                                                              Note : Si vous bloquez vraiment, jetez un œil à notre liste de courses terminée (voir en direct.)
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Résumé
                                                                                                              
diff --git a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html
index c0d337f3d1..15dfb1c063 100644
--- a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html
@@ -10,9 +10,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs
 ---
 
                                                                                                              {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}
                                                                                                              
 
-
                                                                                                              Jusqu'à présent, nous avons uniquement abordé des API qui sont fournies par le navigateur. Il en existe d'autres : de nombreux sites et services, tels que Google Maps, Twitter, Facebook, PayPal, etc. fournissent des API permettant aux développeurs d'exploiter leurs données (ex. afficher un flux Twitter sur un blog) ou leurs services (utiliser l'outil de connexion Facebook pour que vos utilisateurs se connectent sur votre application). Dans cet article, nous verrons les différences entre les API du navigateur et celles fournies par des services tiers (en anglais, on parle de « third-party API ») et nous illustrerons certains cas d'usage pour ces API tierces.
                                                                                                              
+
                                                                                                              Jusqu'à présent, nous avons uniquement abordé des API qui sont fournies par le navigateur. Il en existe d'autres : de nombreux sites et services, tels que Google Maps, Twitter, Facebook, PayPal, etc. fournissent des API permettant aux développeurs d'exploiter leurs données (ex. afficher un flux Twitter sur un blog) ou leurs services (utiliser l'outil de connexion Facebook pour que vos utilisateurs se connectent sur votre application). Dans cet article, nous verrons les différences entre les API du navigateur et celles fournies par des services tiers (en anglais, on parle de « third-party API ») et nous illustrerons certains cas d'usage pour ces API tierces.
                                                                                                              
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis :
 
 
                                                                                                            
+
                                                                                                            
@@ -203,7 +203,7 @@ var map = L.mapquest.map('map', {
 
 
                                                                                                            Au final, on souhaite que l'application permette de saisir un terme de recherche, des dates optionnelles pour le début et la fin de la période à rechercher. Nous utiliserons alors ces paramètres afin de d'envoyer des requêtes sur l'API Article Search puis nous afficherons les résultats obtenus.
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Connecter l'API à son application
                                                                                                            
 
@@ -235,7 +235,7 @@ function fetchResults(e) {
   e.preventDefault();
 
   // On compose l'URL
-  url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value + '&fq=document_type:("article")';
+  url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value + '&fq=document_type:("article")';
 
   if(startDate.value !== '') {
     url += '&begin_date=' + startDate.value;
@@ -264,7 +264,7 @@ function fetchResults(e) {
 
                                                                                                            Si on prend un exemple d'URL complète ainsi construite :
                                                                                                            https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HERE&page=0&q=cats
-&fq=document_type:("article")&begin_date=20170301&end_date=20170312 
                                                                                                            
+&fq=document_type:("article")&begin_date=20170301&end_date=20170312 
                                                                                                            
 
                                                                                                            Note : Pour en savoir plus sur les différents paramètres d'URL qui peuvent être utilisés, vous pouvez consulter la documentation du NYTimes.
                                                                                                            
@@ -325,7 +325,7 @@ fetch(url).then(function(result) {
 
       link.href = current.web_url;
       link.textContent = current.headline.main;
-      para1.textContent = current.snippet;
+      para1.textContent = current.snippet;
       para2.textContent = 'Mots-clés : ';
       for(var j = 0; j < current.keywords.length; j++) {
         var span = document.createElement('span');
@@ -418,7 +418,7 @@ function previousPage(e) {
 
 
                                                                                                            Cet exemple est intéressant car il permet d'illustrer l'utilisation combinée de deux API tierces pour construire une application. La première API est une API REST tandis que la seconde est plus proche du fonctionnement de MapQuest (des méthodes spécifiques à l'API, etc.). On notera que les deux API ont besoin qu'une bibliothèque JavaScript soit chargée sur la page. L'API REST possède des fonctions qui permettent de gérer les requêtes HTTP et de renvoyer les résultats.
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            
 
 
                                                                                                            Nous n'allons pas détailler plus encore cet exemple ici, vous pouvez consulter le code source qui contient des commentaires expliquant son fonctionnement. Là encore, pour utiliser vous-même l'exemple, vous aurez besoin de récupérer une clé d'API et de l'insérer dans le code afin que les exemples fonctionnent.
                                                                                                            
 
diff --git a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html
index 6569f167d1..a091835f18 100644
--- a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html
@@ -18,9 +18,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs
 
 
                                                                                                            {{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}}
                                                                                                            
 
-
                                                                                                            HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc. Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.
                                                                                                            
+
                                                                                                            HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc. Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis :
 
 
 
 
 
 
                                                                                                            
+
                                                                                                            
@@ -460,11 +460,11 @@ clearInterval(intervalFwd);
 
                                                                                                            À ce stade, vous pouvez supprimer les lignes équivalentes des fonctions windBackward() et windForward(), puisqu'elles ont été ajoutées à la fonction stopMedia() à la place.
                                                                                                            
-
                                                                                                            Note: Vous pouvez améliorer votre code en créant une fonction séparée qui exécute ces lignes, et l'appeler aux endroits où vous en avez besoin plutôt que de répéter ces lignes à de multiples endroits du code. Mais nous vous laissons vous en occuper.
                                                                                                            
+
                                                                                                            Note : Vous pouvez améliorer votre code en créant une fonction séparée qui exécute ces lignes, et l'appeler aux endroits où vous en avez besoin plutôt que de répéter ces lignes à de multiples endroits du code. Mais nous vous laissons vous en occuper.
                                                                                                            
 
                                                                                                            
-
                                                                                                            Note: Le code terminé est disponible sur Github (le voir en direct).
                                                                                                            
+
                                                                                                            Note : Le code terminé est disponible sur Github (le voir en direct).
                                                                                                            
 
                                                                                                            Sommaire
                                                                                                            
@@ -509,11 +509,11 @@ clearInterval(intervalFwd);
 
                                                                                                            Dans ce module
                                                                                                            
diff --git a/files/fr/learn/javascript/first_steps/a_first_splash/index.html b/files/fr/learn/javascript/first_steps/a_first_splash/index.html
index 6be9e629d5..40c91d2fa4 100644
--- a/files/fr/learn/javascript/first_steps/a_first_splash/index.html
+++ b/files/fr/learn/javascript/first_steps/a_first_splash/index.html
@@ -18,9 +18,9 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash
 
 
                                                                                                            {{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}
                                                                                                            
 
-
                                                                                                            Maintenant que vous avez appris quelques éléments théoriques sur le JavaScript, et ce que vous pouvez faire avec, nous allons vous donner un cours intensif sur les fonctionnalités basiques du JavaScript avec un tutoriel entièrement pratique. Vous allez construire un jeu simple, étape par étape. Il s'agit de faire deviner un nombre, notre jeu s'appelle « Guess the number ».
                                                                                                            
+
                                                                                                            Maintenant que vous avez appris quelques éléments théoriques sur le JavaScript, et ce que vous pouvez faire avec, nous allons vous donner un cours intensif sur les fonctionnalités basiques du JavaScript avec un tutoriel entièrement pratique. Vous allez construire un jeu simple, étape par étape. Il s'agit de faire deviner un nombre, notre jeu s'appelle « Guess the number ».
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis:
 
 
 
 
 
 
 
 
                                                                                                            
+
                                                                                                            
@@ -36,7 +36,7 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash
 
                                                                                                            Ne vous attendez pas à comprendre tout le code en détail immédiatement — nous voulons simplement vous présenter les grands concepts pour le moment, et vous donner une idée de la façon dont JavaScript (et d'autres langages de programmation) fonctionne. Dans les articles suivants, vous reviendrez plus en détails sur toutes ces fonctionnalités !
                                                                                                            
-
                                                                                                            Note : De nombreuses fonctionnalités que vous allez voir en JavaScript sont identiques à celles d'autres langages de programmation — fonctions, boucles, etc. La syntaxe du code est différente mais les concepts sont globalement identiques.
                                                                                                            
+
                                                                                                            Note : De nombreuses fonctionnalités que vous allez voir en JavaScript sont identiques à celles d'autres langages de programmation — fonctions, boucles, etc. La syntaxe du code est différente mais les concepts sont globalement identiques.
                                                                                                            
 
                                                                                                            Penser comme un programmeur
                                                                                                            
@@ -49,12 +49,10 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash
 
 
                                                                                                            Exemple — Jeu : Guess the number
                                                                                                            
 
-
                                                                                                            Dans cet article, nous allons vous montrer comment construire le jeu simple que vous pouvez voir ci-dessous :
                                                                                                            
+
                                                                                                            Dans cet article, nous allons vous montrer comment construire le jeu simple que vous pouvez voir ci-dessous :
                                                                                                            
 
-
 
-
                                                                                                            {{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}
                                                                                                            
+
                                                                                                            {{ EmbedLiveSample('Exemple_—_Jeu_Guess_the_number', '100%', 320, "", "", "hide-codepen-jsfiddle") }}
                                                                                                            
 
-
                                                                                                            Essayez de jouer et familiarisez-vous avec ce jeu avant de continuer.
                                                                                                            
- 
                                                                                                            
- Imaginons que votre patron vous ait donné le résumé suivant pour créer ce jeu :
                                                                                                            
+
                                                                                                            Essayez de jouer et familiarisez-vous avec ce jeu avant de continuer.
                                                                                                            
+
+
                                                                                                            Imaginons que votre patron vous ait donné le résumé suivant pour créer ce jeu :
                                                                                                            
-
                                                                                                            Je vous demande de créer un jeu simple de devinette de nombre. Le jeu choisit aléatoirement un nombre entre 1 et 100, puis il met le joueur au défi de le deviner en 10 tentatives maxi. À chaque tour, le joueur doit être informé s'il a deviné ou non le bon nombre — si ce n'est pas le cas, le jeu lui indique si son estimation est trop basse ou trop élevée. Le jeu doit également rappeler au joueur les nombres déjà proposés. Le jeu se termine quand le joueur a deviné le nombre mystère, ou s'il a épuisé ses 10 chances. À la fin du jeu, le joueur a la possibilité de débuter une nouvelle partie.
                                                                                                            
+
                                                                                                            Je vous demande de créer un jeu simple de devinette de nombre. Le jeu choisit aléatoirement un nombre entre 1 et 100, puis il met le joueur au défi de le deviner en 10 tentatives maxi. À chaque tour, le joueur doit être informé s'il a deviné ou non le bon nombre — si ce n'est pas le cas, le jeu lui indique si son estimation est trop basse ou trop élevée. Le jeu doit également rappeler au joueur les nombres déjà proposés. Le jeu se termine quand le joueur a deviné le nombre mystère, ou s'il a épuisé ses 10 chances. À la fin du jeu, le joueur a la possibilité de débuter une nouvelle partie.
                                                                                                            
 
                                                                                                            La première chose à faire en regardant ce résumé, c'est de le décomposer en tâches simples et codables comme le ferait un programmeur :
                                                                                                            
@@ -201,12 +198,10 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash
    
                                                                                                          • Afficher un contrôle pour que le joueur puisse rejouer.
                                                                                                            • 
- 
                                                                                                          • Une fois le jeu redémarré, s'assurer que la logique du jeu et l'interface utilisateur sont complètement réinitialisées, puis revenir à l'étape 1.
                                                                                                            • 
+ 
                                                                                                          • Une fois le jeu redémarré, s'assurer que la logique du jeu et l'interface utilisateur sont complètement réinitialisées, puis revenir à l'étape 1.
                                                                                                            • 
 
-
                                                                                                            Voyons maintenant comment nous pouvons transformer ces étapes en code. Nous allons développer cet exemple et explorer les fonctionnalités JavaScript au fur et à mesure.
                                                                                                            
+
                                                                                                            Voyons maintenant comment nous pouvons transformer ces étapes en code. Nous allons développer cet exemple et explorer les fonctionnalités JavaScript au fur et à mesure.
                                                                                                            Configuration initiale
                                                                                                            
 
@@ -256,7 +251,7 @@ let resetButton;
                                                                                                            
-
                                                                                                            Note : Vous en apprendrez beaucoup plus sur les variables plus tard dans le cours, en commençant par le prochain article.
                                                                                                            
+
                                                                                                            Note : Vous en apprendrez beaucoup plus sur les variables plus tard dans le cours, en commençant par le prochain article.
                                                                                                            
 
                                                                                                            Fonctions
                                                                                                            
@@ -278,7 +273,7 @@ let resetButton;
                                                                                                            Après avoir pressé Entrée ou Retour, vous devriez voir apparaître une alerte « Je suis un espace réservé » ; nous avons défini une fonction dans notre code créant une alerte chaque fois que nous l'appelons.
                                                                                                            
-
                                                                                                            Note : Vous allez en apprendre beaucoup plus sur les fonctions plus tard dans ce cours.
                                                                                                            
+
                                                                                                            Note : Vous allez en apprendre beaucoup plus sur les fonctions plus tard dans ce cours.
                                                                                                            
 
                                                                                                            Opérateurs
                                                                                                            
@@ -287,10 +282,7 @@ let resetButton;
                                                                                                            Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les outils de développement et la console Javascript. Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes « Exemple » exactement comme indiqué, en appuyant sur la touche Entrée du clavier après chacun et regardez le résultat renvoyé. Si vous n'avez pas facilement accès aux outils de développement du navigateur, vous pouvez toujours utiliser la console intégrée ci-dessous :
                                                                                                            
 
-
 
-
                                                                                                            {{ EmbedLiveSample('Hidden_code', '100%', 300,"", "", "hide-codepen-jsfiddle") }}
                                                                                                            
+
                                                                                                            {{ EmbedLiveSample('Opérateurs', '100%', 300,"", "", "hide-codepen-jsfiddle") }}
                                                                                                            Regardons d'abord les opérateurs arithmétiques, par exemple :
                                                                                                            
 
@@ -444,7 +435,7 @@ hello;
 let greeting = name + hello;
 greeting;
 
-
                                                                                                            Des raccourcis d'opérateurs sont également disponibles, appelés opérateurs d'assignation augmentés. Par exemple, si vous voulez simplement ajouter une nouvelle chaîne de texte à une chaîne existante et renvoyer le résultat, vous pouvez faire :
                                                                                                            
+
                                                                                                            Des raccourcis d'opérateurs sont également disponibles, appelés opérateurs d'assignation augmentés. Par exemple, si vous voulez simplement ajouter une nouvelle chaîne de texte à une chaîne existante et renvoyer le résultat, vous pouvez faire :
                                                                                                            name += ' dit bonjour !';
                                                                                                            
 
@@ -486,11 +477,11 @@ greeting;
                                                                                                            Structures conditionnelles
                                                                                                            
 
-
                                                                                                            Revenons à la fonction checkGuess(). Nous pouvons assurément dire que nous ne souhaitons pas qu'elle renvoie un message d'emplacement réservé. Nous voulons qu'elle vérifie si la supposition du joueur est correcte ou non et qu'elle renvoie une réponse appropriée.
                                                                                                            
+
                                                                                                            Revenons à la fonction checkGuess(). Nous pouvons assurément dire que nous ne souhaitons pas qu'elle renvoie un message d'emplacement réservé. Nous voulons qu'elle vérifie si la supposition du joueur est correcte ou non et qu'elle renvoie une réponse appropriée.
                                                                                                            
 
-
                                                                                                            Donc, remplacez l'actuelle fonction checkGuess() par celle-ci :
                                                                                                            
+
                                                                                                            Donc, remplacez l'actuelle fonction checkGuess() par celle-ci :
                                                                                                            
 
-
                                                                                                            function checkGuess(){
+
                                                                                                            function checkGuess(){
   let userGuess = Number(guessField.value);
   if (guessCount === 1) {
     guesses.textContent = 'Propositions précédentes : ';
@@ -519,12 +510,12 @@ greeting;
                                                                                                            
   guessField.value = '';
   guessField.focus();
 }
-
                                                                                                            
+
                                                                                                            Pas mal de code — ouf ! Passons en revue chaque section et expliquons ce qu'elle fait.
                                                                                                              
- 
                                                                                                            • La première ligne de la fonction (ligne 2) déclare une variable nommée userGuess et définit sa valeur par celle qui vient d'être saisie dans le champ de texte. Nous faisons passer aussi cette valeur par la méthode  Number() , juste pour nous assurer que la valeur stockée dans userGuess est bien un nombre.
                                                                                                              • 
+ 
                                                                                                            • La première ligne de la fonction (ligne 2) déclare une variable nommée userGuess et définit sa valeur par celle qui vient d'être saisie dans le champ de texte. Nous faisons passer aussi cette valeur par la méthode  Number() , juste pour nous assurer que la valeur stockée dans userGuess est bien un nombre.
                                                                                                              • 
  
                                                                                                            • Ensuite, nous rencontrons notre premier bloc de code conditionnel (lignes 3-5). Il permet d'exécuter des instructions de manière sélective, selon certaines conditions qui sont vraies ou non. Cela ressemble un peu à une fonction, mais ce n'est pas le cas. La forme la plus simple du bloc conditionnel commence par le mot clé if, puis parenthèses, puis des accolades { }.
                                                                                                              
   A l'intérieur de ces parenthèses, nous mettons le test. S'il renvoie true , nous exécutons le code à l'intérieur des accolades. Sinon, nous ne le faisons pas, et passons au morceau de code suivant. Dans ce cas, le test vérifie si la variable guessCount est égale à 1 (c'est-à-dire s'il s'agit de la première supposition du joueur) :
   
                                                                                                              guessCount === 1
                                                                                                              
diff --git a/files/fr/learn/javascript/first_steps/arrays/index.html b/files/fr/learn/javascript/first_steps/arrays/index.html
index f38aeee181..b201776dd1 100644
--- a/files/fr/learn/javascript/first_steps/arrays/index.html
+++ b/files/fr/learn/javascript/first_steps/arrays/index.html
@@ -22,9 +22,9 @@ original_slug: Learn/JavaScript/First_steps/tableaux
 
 
                                                                                                              {{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}
                                                                                                              
 
-
                                                                                                              Dans le dernier article de ce module, nous examinerons les tableaux — une façon de stocker proprement une liste d'éléments de données sous un seul nom de variable. Ici nous verrons pourquoi c'est utile, puis nous apprendrons comment créer un tableau, y retrouver, y ajouter ou en enlever les éléments dedans, et quelques à‑côtés en bonus.
                                                                                                              
+
                                                                                                              Dans le dernier article de ce module, nous examinerons les tableaux — une façon de stocker proprement une liste d'éléments de données sous un seul nom de variable. Ici nous verrons pourquoi c'est utile, puis nous apprendrons comment créer un tableau, y retrouver, y ajouter ou en enlever les éléments dedans, et quelques à‑côtés en bonus.
                                                                                                              
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis :
 
 
 
 
 
 
 
 
   
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                            
+
                                                                                                            
@@ -45,10 +45,7 @@ original_slug: Learn/JavaScript/First_steps/tableaux
 
 
                                                                                                            Comme précédemment, initions‑nous aux bases pratiques des tableaux en entrant quelques exemples dans une console JavaScript. En voici une plus bas (vous pouvez aussi ouvrir cette console dans un onglet ou une fenêtre séparés ou utiliser la console développeur de l'explorateur si vous préférez).
                                                                                                            
 
-
 
-
                                                                                                            {{ EmbedLiveSample('Hidden_code', '100%', 300) }}
                                                                                                            
+
                                                                                                            {{ EmbedLiveSample('Quest‑ce_quun_tableau', '100%', 300) }}
                                                                                                            Créer un tableau
                                                                                                            
 
@@ -188,7 +184,8 @@ let random = ['arbre', 795, [0, 1, 2]];
 shopping;
 // shopping renvoie maintenant [ "crème de sésame", "lait", "fromage", "houmous", "nouilles" ]
 
-  
                                                                                                            Note : Nous l'avons déjà dit, mais enseigner c'est répéter — les ordinateurs commencent les décomptes à partir de 0 !
                                                                                                            
+  
                                                                                                            
+    
                                                                                                            Note : Nous l'avons déjà dit, mais enseigner c'est répéter — les ordinateurs commencent les décomptes à partir de 0 !
                                                                                                          • Notez qu'un tableau à l'intérieur d'un tableau est appelé un tableau multidimensionnel. Vous accédez à un des éléments de ce tableau interne en chaînant deux paires de crochets. Par exemple, pour avoir accès à l'un des éléments (le troisième) du tableau élément du tableau random (voir la section précédente), vous pouvez écrire quelque chose comme :
                                                                                                          • 
@@ -228,7 +225,7 @@ for (var i = 0; i < sequence.length; i++) {
 
                                                                                                            Souvent, vous serez confronté à des données brutes contenues dans une longue chaîne de caractères, et vous voudrez peut-être en extraire les éléments utiles sous une forme plus pratique pour en faire quelque chose, comme les afficher dans un tableau de données. Pour ce faire, nous pouvons utiliser la méthode {{jsxref ("String. prototype. prototype. split ()","split ()")}}. Dans sa formulation la plus simple, elle prend un seul paramètre, le caractère servant de séparateur ; elle renverra les sous-chaînes entre séparateurs en tant qu'éléments d'un tableau.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : D'accord, techniquement parlant c'est une méthode de chaîne, et non une méthode de tableau, mais nous la mettons dans le chapitre des tableaux car elle est bien à sa place ici.
                                                                                                            
+
                                                                                                            Note : D'accord, techniquement parlant c'est une méthode de chaîne, et non une méthode de tableau, mais nous la mettons dans le chapitre des tableaux car elle est bien à sa place ici.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                              
@@ -302,7 +299,7 @@ removedItem;
  
 
                                                                                                            
 
-
                                                                                                            Activité : affichons les produits !
                                                                                                            
+
                                                                                                            Activité : affichons les produits
                                                                                                            
 
 
                                                                                                            Revenons à l'exemple que nous avons décrit plus haut — afficher les noms des produits et leurs prix pour un envoi, puis faire le total des prix et l'afficher à la fin de la liste. Dans l'exemple modifiable ci‑dessous, il y a des commentaires numérotés — chacun d'entre eux marque l'emplacement où vous devez ajouter quelque chose au code. Voici :
                                                                                                            
 
@@ -315,10 +312,7 @@ removedItem;
  
                                                                                                          • Nous souhaitons que vous modifiez la ligne au‑dessous de  // number 5 de sorte que la variable itemText soit égale à « nom actuel de l'élément — $prix actuel de l'élément », par exemple « Shoes — $23.99 » dans chaque cas, de façon à ce qu'une information correcte soit affichée sur l'envoi. Il s'agit d'une simple concaténation de chaînes de caractères, chose qui doit vous être familière.
                                                                                                            • 
 
-
 
-
                                                                                                            {{ EmbedLiveSample('Playable_code', '100%', 600) }}
                                                                                                            
+
                                                                                                            {{ EmbedLiveSample('Activité_affichons_les_produits', '100%', 600) }}
                                                                                                            Activité : Top 5 des recherches
                                                                                                            
 
@@ -398,7 +391,7 @@ window.addEventListener('load', updateCode);
 
                                                                                                            Dans cet exemple nous allons montrer une utilisation beaucoup plus simple — ici, nous allons vous fournir un site de recherche fictif, avec une boîte de recherche. Voici l'idée : quand un terme est entré dans la boîte de recherche, les 5 précédents termes entrés sont affichés dans la liste. Quand le nombre de termes dépasse 5, le dernier terme est supprimé chaque fois qu'un nouveau terme est ajouté ; ainsi, le 5 termes précédents sont toujours affichés.
                                                                                                            
-
                                                                                                            Note : Dans une application réelle avec boîte de recherche, vous pourriez vraisemblablement cliquer sur un des termes de la liste pour revenir à la recherche précédente, et l'application afficherait les vrais résultats ! Mais pour le moment nous en resterons à quelque chose de simple.
                                                                                                            
+
                                                                                                            Note : Dans une application réelle avec boîte de recherche, vous pourriez vraisemblablement cliquer sur un des termes de la liste pour revenir à la recherche précédente, et l'application afficherait les vrais résultats ! Mais pour le moment nous en resterons à quelque chose de simple.
                                                                                                            
 
                                                                                                            Pour terminer l'application, il vous faut :
                                                                                                            
@@ -408,10 +401,7 @@ window.addEventListener('load', updateCode);
  
                                                                                                          • Ajouter une ligne sous le commentaire // number 2  pour supprimer la valeur en fin de liste du tableau.
                                                                                                            • 
 
-
 
-
                                                                                                            {{ EmbedLiveSample('Playable_code_2', '100%', 600) }}
                                                                                                            
+
                                                                                                            {{ EmbedLiveSample('Activité_Top_5_des_recherches', '100%', 600) }}
                                                                                                            Testez vos compétences !
                                                                                                            
 
diff --git a/files/fr/learn/javascript/first_steps/index.html b/files/fr/learn/javascript/first_steps/index.html
index 70e5a0c1f0..8e093bebfb 100644
--- a/files/fr/learn/javascript/first_steps/index.html
+++ b/files/fr/learn/javascript/first_steps/index.html
@@ -17,26 +17,26 @@ translation_of: Learn/JavaScript/First_steps
 ---
 
                                                                                                            {{LearnSidebar}}
                                                                                                            
 
-
                                                                                                            Dans notre premier module consacré à JavaScript, nous allons tout d'abord répondre à des questions fondamentales comme « qu'est-ce que JavaScript ? », « à quoi ressemble-t-il ? » et « de quoi est-il capable ? ». Nous vous accompagnerons ensuite dans votre première expérience pratique consistant à écrire du code JavaScript. Après cela, nous examinerons en détail quelques briques de base, telles que les variables, les chaînes de caractères, les nombres, et les tableaux.
                                                                                                            
+
                                                                                                            Dans notre premier module consacré à JavaScript, nous allons tout d'abord répondre à des questions fondamentales comme « qu'est-ce que JavaScript ? », « à quoi ressemble-t-il ? » et « de quoi est-il capable ? ». Nous vous accompagnerons ensuite dans votre première expérience pratique consistant à écrire du code JavaScript. Après cela, nous examinerons en détail quelques briques de base, telles que les variables, les chaînes de caractères, les nombres, et les tableaux.
                                                                                                            Prérequis
                                                                                                            Avant d'entamer ce module, vous n'avez besoin d'aucune connaissance préalable en JavaScript, mais vous devriez être familier avec HTML et CSS. Nous vous conseillons de lire les modules suivants avant d'aller plus loin :
                                                                                                            
-
                                                                                                            Note : Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez tester la plupart des exemples en ligne grâce à des outils comme JSBin ou Thimble.
                                                                                                            
+
                                                                                                            Note : Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez tester la plupart des exemples en ligne grâce à des outils comme JSBin ou Thimble.
                                                                                                            
 
                                                                                                            Guides
                                                                                                            
- 
                                                                                                            Qu'est-ce que JavaScript ?
                                                                                                            
+ 
                                                                                                            Qu'est-ce que JavaScript ?
                                                                                                            
  
                                                                                                            Bienvenue dans le cours de JavaScript pour débutants proposé par MDN ! Dans ce premier article, nous aborderons JavaScript sous un angle général afin de comprendre ce qu'il est et à quoi il sert. Nous nous assurerons ici que vous cernez bien le but premier du langage.
                                                                                                            
  
                                                                                                            Notre premier code JavaScript
                                                                                                            
  
                                                                                                            
@@ -65,6 +65,6 @@ translation_of: Learn/JavaScript/First_steps
 
                                                                                                            L'auto-évaluation suivante teste votre compréhension des bases de JavaScript abordées dans le guide ci-dessus.
                                                                                                            
 
 
                                                                                                            
- 
                                                                                                            Génerateur d'histoires absurdes
                                                                                                            
+ 
                                                                                                            Génerateur d'histoires absurdes
                                                                                                            
  
                                                                                                            Dans le cadre de cette évaluation, votre tâche sera d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer pour créer une appli ludique qui génère aléatoirement des histoires absurdes. Amusez-vous bien !
                                                                                                            
 
                                                                                                            
diff --git a/files/fr/learn/javascript/first_steps/math/index.html b/files/fr/learn/javascript/first_steps/math/index.html
index ddf396a3b7..bdfdda9e64 100644
--- a/files/fr/learn/javascript/first_steps/math/index.html
+++ b/files/fr/learn/javascript/first_steps/math/index.html
@@ -21,9 +21,9 @@ translation_of: Learn/JavaScript/First_steps/Math
 
 
                                                                                                            {{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
                                                                                                            
 
-
                                                                                                            À ce point du didacticiel, nous parlerons de « mathématiques en JavaScript » — comment utiliser les {{Glossary("Operator","operators")}} et autres fonctionnalités pour manier avec succès les nombres pour faire nos bricolages.
                                                                                                            
+
                                                                                                            À ce point du didacticiel, nous parlerons de « mathématiques en JavaScript » — comment utiliser les {{Glossary("Operator","operators")}} et autres fonctionnalités pour manier avec succès les nombres pour faire nos bricolages.
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis :
 
 
  
  
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                            
+
                                                                                                            
@@ -82,7 +82,7 @@ myFloat;
                                                                                                          • Les nombres sont saisis sans guillemets — essayez de déclarer et initialiser deux ou trois variables de plus contenant des nombres avant de continuer.
                                                                                                          • Maintenant vérifions que les deux variables d'origine sont du même type de donnée. En JavaScript, l'opérateur nommé {{jsxref("Operators/typeof", "typeof")}} est prévu pour cela. Entrez les deux lignes ci‑dessous comme indiqué :
                                                                                                          • 
-  
                                                                                                            typeof myInt;
+  
                                                                                                            typeof myInt;
 typeof myFloat;
                                                                                                            
  
                                                                                                          • "number" est renvoyé dans les deux cas — cela nous facilite les choses quand nous avons des nombres différents de types variés et que nous avons à les traiter de diverses façons. Ouf !
                                                                                                            • 
@@ -168,7 +168,7 @@ myNumber + 3;
                                                                                                            
  
   
                                                                                                            
    Prérequis :
  
  
  
  
 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Quelquefois les nombres impliqués dans des opérations sont nommés {{Glossary("Operand", "operands")}}.
                                                                                                            
+
                                                                                                            Note : Quelquefois les nombres impliqués dans des opérations sont nommés {{Glossary("Operand", "operands")}}.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, mais ce serait bien de tester si vous avez bien compris la syntaxe. Entrez les exemples ci‑dessous dans la console des outils de développement JavaScript ou servez vous de la console intégrée plus haut, comme vous préférez, pour vous familiariser avec la syntaxe.
                                                                                                            
@@ -213,7 +213,7 @@ num2 + num1 / 8 + 2;
                                                                                                          
 
                                                                                                          Essayez-le et voyez.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : La liste complète de tous les opérateurs JavaScript et leur priorité peut être trouvée dans Expressions and operators.
                                                                                                          
+
                                                                                                          Note : La liste complète de tous les opérateurs JavaScript et leur priorité peut être trouvée dans Expressions and operators.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Opérateurs d'incrémentation et de décrémentation
                                                                                                          
@@ -223,7 +223,7 @@ num2 + num1 / 8 + 2;
                                                                                                          
 
                                                                                                          guessCount++;
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Ces opérateurs sont couramment utilisés dans des boucles ; nous les verrons plus loin dans ce cours. Par exemple, disons que vous voulez parcourir une liste de prix et ajouter les taxes à chacun. Vous utiliserez une boucle pour obtenir chaque valeur une à une et exécuterez le calcul voulu pour ajouter les taxes à chacune. L'incrément s'utilise pour aller à la valeur suivante. Nous avons mis un exemple concret montrant comment faire — voyez‑le tout de suite, examinez le code source et notez les opérateurs d'incrémentation ! Nous reverrons les boucles en détail plus loin dans ce cours.
                                                                                                          
+
                                                                                                          Note : Ces opérateurs sont couramment utilisés dans des boucles ; nous les verrons plus loin dans ce cours. Par exemple, disons que vous voulez parcourir une liste de prix et ajouter les taxes à chacun. Vous utiliserez une boucle pour obtenir chaque valeur une à une et exécuterez le calcul voulu pour ajouter les taxes à chacune. L'incrément s'utilise pour aller à la valeur suivante. Nous avons mis un exemple concret montrant comment faire — voyez‑le tout de suite, examinez le code source et notez les opérateurs d'incrémentation ! Nous reverrons les boucles en détail plus loin dans ce cours.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Jouons avec ces opérateurs dans la console. Notez d'abord qu'il n'est pas possible de les appliquer directement à un nombre, ce qui peut paraître étrange, mais cet opérateur assigne à une variable une nouvelle valeur mise à jour, il n'agit pas sur la valeur elle‑même. Ce qui suit renvoie une erreur :
                                                                                                          
@@ -246,7 +246,7 @@ num2--;
 num2;
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : En mettant l'opérateur avant la variable au lieu d'après, le navigateur agira dans l'ordre inverse — incrément/décrément de la variable puis renvoi de la valeur — . Essayez les exemples plus haut, mais cette fois avec ++num1 et --num2.
                                                                                                          
+
                                                                                                          Note : En mettant l'opérateur avant la variable au lieu d'après, le navigateur agira dans l'ordre inverse — incrément/décrément de la variable puis renvoi de la valeur — . Essayez les exemples plus haut, mais cette fois avec ++num1 et --num2.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Opérateurs d'assignation
                                                                                                          
@@ -262,11 +262,11 @@ x = y; // x contient maintenant la même valeur que y, 4
                                                                                                          
 
-   
-   
-   
-   
-   
+   
+   
+   
+   
+   
@@ -318,7 +318,7 @@ var y = 4; // y contient la valeur 4
 x *= y; // x contient maintenant la valeur 12
                                                                                                          
-
                                                                                                          Note : Il y a des tas d'autres opérateurs d'assignation disponibles, mais ceux‑ci sont les plus courants que vous devez les connaître dès maintenant.
                                                                                                          
+
                                                                                                          Note : Il y a des tas d'autres opérateurs d'assignation disponibles, mais ceux‑ci sont les plus courants que vous devez les connaître dès maintenant.
                                                                                                          
 
                                                                                                          Apprentissage actif : dimensionner une boîte à canevas
                                                                                                          
@@ -394,7 +394,7 @@ x *= y; // x contient maintenant la valeur 12
                                                                                                          
  
   
                                                                                                          OpérateurNomButExempleRaccourci pourOpérateurNomButExempleRaccourci pour
   
                                                                                                          
                                                                                                            
  
 
 
 
 
 
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Vous verrez peut‑être certaines personnes utiliser == et != pour leurs test d'égalité ou non-égalité. Ces opérateurs sont valides en JavaScript, mais différents de ===/!==. Les versions avec deux caractères testent si les valeurs sont les mêmes, mais pas si les types de données sont les mêmes. Les versions strictes à trois caractères testent à la fois l'égalité des valeurs et des types de données. Il y a moins d'erreurs avec les versions strictes, donc nous vous engageons à les utiliser dans tous les cas.
                                                                                                          
+
                                                                                                          Note : Vous verrez peut‑être certaines personnes utiliser == et != pour leurs test d'égalité ou non-égalité. Ces opérateurs sont valides en JavaScript, mais différents de ===/!==. Les versions avec deux caractères testent si les valeurs sont les mêmes, mais pas si les types de données sont les mêmes. Les versions strictes à trois caractères testent à la fois l'égalité des valeurs et des types de données. Il y a moins d'erreurs avec les versions strictes, donc nous vous engageons à les utiliser dans tous les cas.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Si vous entrez certaines de ces valeurs dans une console, vous constaterez que toutes renvoient une valeur true/false — les booléens mentionnés dans l'article précédent. Ces opérateurs sont très utiles car il nous permettent de prendre des décisions dans le code, et ils sont utilisés chaque fois que nous avons besoin de faire un choix. Par exemple, les booléens s'utilisent pour :
                                                                                                          
@@ -434,7 +434,7 @@ function updateBtn() {
 
                                                                                                          Vous pouvez voir l'utilisation de l'opérateur d'égalité stricte dans la fonction updateBtn(). Dans ce cas, nous ne testons pas si deux expressions mathématiques ont la même valeur — nous testons si le contenu textuel d'un bouton contient une certaine chaîne — mais c'est toujours le même principe. Si le bouton affiche « Démarrer la machine » quand on le presse, nous changeons son étiquette en « Arrêter la machine » et mettons à jour l'étiquette comme il convient. Si le bouton indique « Arrêter la machine » au moment de le presser, nous basculons l'étiquette à nouveau.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Un contrôle qui alterne entre deux états porte généralement le nom de toggle (bascule). Il bascule d'un état l'autre — allumé, éteint, etc.
                                                                                                          
+
                                                                                                          Note : Un contrôle qui alterne entre deux états porte généralement le nom de toggle (bascule). Il bascule d'un état l'autre — allumé, éteint, etc.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Résumé
                                                                                                          
@@ -444,7 +444,7 @@ function updateBtn() {
 
                                                                                                          Dans l'article suivant, nous étudierons le texte et les façons dont JavaScript nous permet de le manipuler.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Si les Maths vous plaisent et que vous souhaitez en savoir plus sur la manière dont elles sont implémentées en JavaScript, vous trouverez plus de précisions dans la section principale JavaScript du MDN. Une grande place est réservée dans ces articles aux Nombres et dates et aux Expressions et opérateurs.
                                                                                                          
+
                                                                                                          Note : Si les Maths vous plaisent et que vous souhaitez en savoir plus sur la manière dont elles sont implémentées en JavaScript, vous trouverez plus de précisions dans la section principale JavaScript du MDN. Une grande place est réservée dans ces articles aux Nombres et dates et aux Expressions et opérateurs.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          {{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
                                                                                                          
diff --git a/files/fr/learn/javascript/first_steps/silly_story_generator/index.html b/files/fr/learn/javascript/first_steps/silly_story_generator/index.html
index ebc7230da3..298aef0296 100644
--- a/files/fr/learn/javascript/first_steps/silly_story_generator/index.html
+++ b/files/fr/learn/javascript/first_steps/silly_story_generator/index.html
@@ -7,9 +7,9 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator
 
 
                                                                                                          {{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
                                                                                                          
 
-
                                                                                                          Dans cette évaluation, vous aurez pour tâche d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer dans le but de créer une appli ludique qui génère des histoires absurdes au hasard. Amusez-vous bien !
                                                                                                          
+
                                                                                                          Dans cette évaluation, vous aurez pour tâche d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer dans le but de créer une appli ludique qui génère des histoires absurdes au hasard. Amusez-vous bien !
                                                                                                          
 
-
+
                                                                                                          
@@ -36,7 +36,7 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator
 
                                                                                                          
-
                                                                                                          Note: Vous pouvez aussi utiliser un site tel que que JSBin ou Thimble pour votre évaluation. Vous pouvez copier-coller le HTML, CSS et JavaScript vers l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne propose pas d'onglet JavaScript séparé, n'hésitez pas à en intégrer un dans une balise <script> au sein de la page HTML.
                                                                                                          
+
                                                                                                          Note : Vous pouvez aussi utiliser un site tel que que JSBin ou Thimble pour votre évaluation. Vous pouvez copier-coller le HTML, CSS et JavaScript vers l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne propose pas d'onglet JavaScript séparé, n'hésitez pas à en intégrer un dans une balise <script> au sein de la page HTML.
                                                                                                          
 
                                                                                                          Résumé du projet
                                                                                                          
diff --git a/files/fr/learn/javascript/first_steps/strings/index.html b/files/fr/learn/javascript/first_steps/strings/index.html
index 16cf1c51ce..457cf98379 100644
--- a/files/fr/learn/javascript/first_steps/strings/index.html
+++ b/files/fr/learn/javascript/first_steps/strings/index.html
@@ -1,25 +1,15 @@
 ---
 title: Gérer du texte — les chaînes de caractères en JavaScript
 slug: Learn/JavaScript/First_steps/Strings
-tags:
-  - Article
-  - Attacher
-  - Codage
-  - Débutant
-  - Guide
-  - Guillemets
-  - JavaScript
-  - chaînes
-  - concatenation
 translation_of: Learn/JavaScript/First_steps/Strings
 ---
 
                                                                                                          {{LearnSidebar}}
                                                                                                          {{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}
                                                                                                          
 
-
                                                                                                          Concentrons-nous maintenant sur les chaînes de caractères - c'est le nom donné à un segment de texte en programmation. Dans cet article, nous aborderons les aspects les plus communs des chaînes de caractères que vous devez vraiment connaître quand vous apprenez JavaScript, comme créer une chaîne de caractères, échapper des guillemets dans une chaîne ou encore concaténer des chaînes.
                                                                                                          
+
                                                                                                          Concentrons-nous maintenant sur les chaînes de caractères - c'est le nom donné à un segment de texte en programmation. Dans cet article, nous aborderons les aspects les plus communs des chaînes de caractères que vous devez vraiment connaître quand vous apprenez JavaScript, comme créer une chaîne de caractères, échapper des guillemets dans une chaîne ou encore concaténer des chaînes.
                                                                                                          
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :
 
 
 
 
 
 
                                                                                                          
+
                                                                                                          
@@ -40,12 +30,9 @@ translation_of: Learn/JavaScript/First_steps/Strings
 
 
                                                                                                          Chaînes de caractères — les bases
                                                                                                          
 
-
                                                                                                          À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez  l'ouvrir dans un onglet ou une fenêtre séparée, ou bien utiliser celle de l'explorateur, comme vous préférez).
                                                                                                          
+
                                                                                                          À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez  l'ouvrir dans un onglet ou une fenêtre séparée, ou bien utiliser celle de l'explorateur, comme vous préférez).
                                                                                                          
 
-
 
-
                                                                                                          {{ EmbedLiveSample('Hidden_code', '100%', 300) }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Chaînes_de_caractères_—_les_bases', '100%', 300) }}
                                                                                                          Créer une chaîne de texte
                                                                                                          
 
@@ -202,7 +188,7 @@ dblSgl;
                                                                                                          let bigmouth = 'Je n\'ai pas eu droit à prendre place...';
 bigmouth;
                                                                                                          
 
-
                                                                                                          Cela fonctionne à la perfection. Vous pouvez échapper d'autres caractères de la même manière, par ex. \",  et il y a certains codes spéciaux à côté. Voyez  Notations d'échappement pour plus de détails.
                                                                                                          
+
                                                                                                          Cela fonctionne à la perfection. Vous pouvez échapper d'autres caractères de la même manière, par ex. \",  et il y a certains codes spéciaux à côté. Voyez  Notations d'échappement pour plus de détails.
                                                                                                          Concaténation de chaînes
                                                                                                          
 
@@ -224,7 +210,7 @@ response;
                                                                                                          
-
                                                                                                          Note : Quand vous entrez une chaîne dans votre code, entre guillemets simples ou doubles, on l'appelle chaîne littérale.
                                                                                                          
+
                                                                                                          Note : Quand vous entrez une chaîne dans votre code, entre guillemets simples ou doubles, on l'appelle chaîne littérale.
                                                                                                          
 
                                                                                                          Concaténation dans un contexte
                                                                                                          
@@ -240,7 +226,7 @@ button.onclick = function() {
   alert('Hello ' + name + ', sympa de vous voir !');
 }
 
-
                                                                                                          {{ EmbedLiveSample('Concatenation_in_context', '100%', 50) }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Concaténation_dans_un_contexte', '100%', 50) }}
                                                                                                          Ici nous utilisons en ligne 4 la fonction {{domxref("Window.prompt()", "Window.prompt()")}}, qui demande à l'utilisateur de répondre à une question par l'intermédiaire d'une boîte de dialogue, puis qui stocke le texte entré dans une variable donnée — dans ce cas name. En ligne 5, nous nous servons de la fonction {{domxref("Window.alert()", "Window.alert()")}} pour afficher un dialogue contenant une chaîne assemblée à partir de deux chaînes littérales et de la variable name, par concaténation.
                                                                                                          
 
@@ -262,7 +248,7 @@ typeof myDate;
 let myNum = Number(myString);
 typeof myNum;
-   
                                                                                                        28. D'autre part, tout nombre possède une méthode nommée toString() qui le convertit en chaîne équivalente. Essayez :
+   
                                                                                                        29. D'autre part, tout nombre possède une méthode nommée toString() qui le convertit en chaîne équivalente. Essayez :
     
                                                                                                          let myNum = 123;
 let myString = myNum.toString();
 typeof myString;
                                                                                                          
diff --git a/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html b/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html
index d41702445b..a281723a68 100644
--- a/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html
+++ b/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html
@@ -14,13 +14,13 @@ original_slug: Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux
 
 
                                                                                                          L'objectif de ce test est d'évaluer votre compréhension de l'article sur les tableaux en JavaScript (arrays).
                                                                                                          
 
-
                                                                                                          
-
                                                                                                          Note : Vous pouvez essayer vos solutions dans les éditeurs interactifs qui suivent. Toutefois, il peut aussi être utile de télécharger le code et d'utiliser un outil en ligne comme CodePen, jsFiddle, ou Glitch afin de travailler sur ces tâches.
                                                                                                          
+
                                                                                                          
+
                                                                                                          Note : Vous pouvez essayer vos solutions dans les éditeurs interactifs qui suivent. Toutefois, il peut aussi être utile de télécharger le code et d'utiliser un outil en ligne comme CodePen, jsFiddle, ou Glitch afin de travailler sur ces tâches.
                                                                                                          
 
                                                                                                          Si vous vous retrouvez bloqué·e, vous pouvez demander de l'aide (voir la section à ce sujet en fin de page).
                                                                                                          
 
                                                                                                          
 
-
                                                                                                          
-
                                                                                                          Note : Dans les exemples qui suivent, s'il y a une erreur dans votre code, celle-ci s'affichera dans le panneau des résultats, sur la page, afin de vous aider à trouver la solution (ou bien dans la console JavaScript du navigateur si vous utilisez la version téléchargeable).
                                                                                                          
+
                                                                                                          
+
                                                                                                          Note : Dans les exemples qui suivent, s'il y a une erreur dans votre code, celle-ci s'affichera dans le panneau des résultats, sur la page, afin de vous aider à trouver la solution (ou bien dans la console JavaScript du navigateur si vous utilisez la version téléchargeable).
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Tableaux - Exercice 1
                                                                                                          
@@ -33,8 +33,8 @@ original_slug: Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux
 
 
                                                                                                          {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays1.html", '100%', 400)}}
                                                                                                          
 
-
                                                                                                          
-
                                                                                                          Téléchargez le code initial pour cet exercice afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.
                                                                                                          
+
                                                                                                          
+
                                                                                                          Note : Téléchargez le code initial pour cet exercice afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Tableaux - Exercice 2
                                                                                                          
@@ -51,8 +51,8 @@ original_slug: Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux
 
 
                                                                                                          {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays2.html", '100%', 400)}}
                                                                                                          
 
-
                                                                                                          
-
                                                                                                          Téléchargez le code initial pour cet exercice afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.
                                                                                                          
+
                                                                                                          
+
                                                                                                          Note : Téléchargez le code initial pour cet exercice afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Tableaux - Exercice 3
                                                                                                          
@@ -70,8 +70,8 @@ original_slug: Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux
 
 
                                                                                                          {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays3.html", '100%', 400)}}
                                                                                                          
 
-
                                                                                                          
-
                                                                                                          Téléchargez le code initial pour cet exercice afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.
                                                                                                          
+
                                                                                                          
+
                                                                                                          Note : Téléchargez le code initial pour cet exercice afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Recevoir une évaluation ou de l'aide
                                                                                                          
diff --git a/files/fr/learn/javascript/first_steps/useful_string_methods/index.html b/files/fr/learn/javascript/first_steps/useful_string_methods/index.html
index f36b9f5cb2..f2e52aa169 100644
--- a/files/fr/learn/javascript/first_steps/useful_string_methods/index.html
+++ b/files/fr/learn/javascript/first_steps/useful_string_methods/index.html
@@ -21,9 +21,9 @@ original_slug: Learn/JavaScript/First_steps/methode_chaine_utile
 
 
                                                                                                          {{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
                                                                                                          
 
-
                                                                                                          À présent que nous avons vu les bases de la manipulation des chaînes de caractères, allons un cran plus loin et commençons à imaginer les opérations utiles que nous pourrions faire sur les chaînes de caractères avec les méthodes intégrées : trouver la longueur d'une chaîne, assembler ou couper des chaînes, substituer un caractère à un autre dans une chaîne, et plus encore.
                                                                                                          
+
                                                                                                          À présent que nous avons vu les bases de la manipulation des chaînes de caractères, allons un cran plus loin et commençons à imaginer les opérations utiles que nous pourrions faire sur les chaînes de caractères avec les méthodes intégrées : trouver la longueur d'une chaîne, assembler ou couper des chaînes, substituer un caractère à un autre dans une chaîne, et plus encore.
                                                                                                          
 
-
                                                                                                          30. 
  
   
                                                                                                          
    Prérequis :
 
 
 
 
 
 
 
 
 
 
 
 
    
                                                                                                          
+
                                                                                                          
@@ -38,7 +38,7 @@ original_slug: Learn/JavaScript/First_steps/methode_chaine_utile
 
 
                                                                                                          Les chaînes de caractères sont des objets
                                                                                                          
 
-
                                                                                                          Nous l'avons déjà dit, et nous le redirons — tout est objet en JavaScript. Lorsque vous créez une chaîne, par exemple en utilisant :
                                                                                                          
+
                                                                                                          Nous l'avons déjà dit, et nous le redirons — tout est objet en JavaScript. Lorsque vous créez une chaîne, par exemple en utilisant :
                                                                                                          let string = 'Ceci est une chaîne';
                                                                                                          
 
@@ -46,12 +46,9 @@ original_slug: Learn/JavaScript/First_steps/methode_chaine_utile
 
 
                                                                                                          Avant que votre cervelle ne commence à bouillir, pas de panique ! Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous utiliserez  certaines assez souvent. Nous allons les voir maintenant.
                                                                                                          
 
-
                                                                                                          Entrez quelques exemples dans une console vierge. En voici une ci-dessous (vous pouvez aussi ouvrir cette console dans un onglet ou une fenêtre séparés, ou utiliser la console de développement du navigateur si vous préférez).
                                                                                                          
+
                                                                                                          Entrez quelques exemples dans une console vierge. En voici une ci-dessous (vous pouvez aussi ouvrir cette console dans un onglet ou une fenêtre séparés, ou utiliser la console de développement du navigateur si vous préférez).
                                                                                                          
 
-
 
-
                                                                                                          {{ EmbedLiveSample('Hidden_code', '100%', 300) }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Les_chaînes_de_caractères_sont_des_objets', '100%', 300) }}
                                                                                                          Trouver la longueur d'une chaîne
                                                                                                          
 
@@ -184,9 +180,6 @@ browserType.length;
                                                                                                          browserType.indexOf('zilla');
                                                                                                          
   La commande donne 2 comme résultat, car la sous-chaîne « zilla » commence à la position 2 (0, 1, 2 — donc au troisième caractère) dans « mozilla ». Un tel code s'utilise pour filtrer des chaînes. Par exemple, vous pourriez avoir une liste d'adresses web et ne vouloir afficher que celles qui contiennent « mozilla ».
-
-
-
                                                                                                            
  
                                                                                                          1. On peut faire cela autrement, peut-être plus efficacement encore. Écrivez :
   
                                                                                                            browserType.indexOf('vanilla');
                                                                                                            
   Cela doit vous donner -1 comme résultat — renvoyé quand la sous-chaîne, en l'occurence « vanilla », n'est pas trouvée dans la chaîne principale.
                                                                                                            
@@ -206,7 +199,7 @@ browserType.length;
 
                                                                                                          
-
                                                                                                          Note : Le second paramètre de slice() est optionnel : s'il n'est pas defini, l'extraction va jusqu'à la fin de la chaîne originale. Il existe aussi d'autres options, allez à la page de {{jsxref("String.prototype.slice()", "slice()")}} pour voir ces autres options.
                                                                                                          
+
                                                                                                          Note : Le second paramètre de slice() est optionnel : s'il n'est pas defini, l'extraction va jusqu'à la fin de la chaîne originale. Il existe aussi d'autres options, allez à la page de {{jsxref("String.prototype.slice()", "slice()")}} pour voir ces autres options.
                                                                                                          
 
                                                                                                          Changer la casse
                                                                                                          
@@ -245,10 +238,7 @@ radData.toUpperCase();
                                                                                                        30. Conseil : dans notre cas, il est probablement plus utile de tester si le résultat de l'appel de notre méthode n'est pas égal à un certain résultat.
                                                                                                          31. 
 
-
 
-
                                                                                                          {{ EmbedLiveSample('Playable_code', '100%', 490) }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Filtrer_des_messages_de_vœux', '100%', 490) }}
                                                                                                          Remettre les majuscules
                                                                                                          
 
@@ -324,13 +313,10 @@ window.addEventListener('load', updateCode);
 
                                                                                                          
-
                                                                                                          Note: Un conseil — les paramètres des méthodes de chaîne n'ont pas besoin d'être des chaînes, elle peuvent aussi être des variables, ou même des variables avec une méthode invoquée sur elles.
                                                                                                          
+
                                                                                                          Note : Un conseil — les paramètres des méthodes de chaîne n'ont pas besoin d'être des chaînes, elle peuvent aussi être des variables, ou même des variables avec une méthode invoquée sur elles.
                                                                                                          
 
                                                                                                          
 
-
 
-
                                                                                                          {{ EmbedLiveSample('Playable_code_2', '100%', 450) }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Remettre_les_majuscules', '100%', 450) }}
                                                                                                          Créer de nouvelles chaînes à partir de morceaux
                                                                                                          
 
@@ -407,10 +392,7 @@ window.addEventListener('load', updateCode);
  
                                                                                                        31. Changer la valeur de la variable result pour qu'elle soit égale à la chaîne finale, plutôt qu'à input.
                                                                                                          32. 
 
-
 
-
                                                                                                          {{ EmbedLiveSample('Playable_code_3', '100%', 485) }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Créer_de_nouvelles_chaînes_à_partir_de_morceaux', '100%', 485) }}
                                                                                                          Conclusion
                                                                                                          
 
diff --git a/files/fr/learn/javascript/first_steps/variables/index.html b/files/fr/learn/javascript/first_steps/variables/index.html
index 35104fcaeb..dacd075396 100644
--- a/files/fr/learn/javascript/first_steps/variables/index.html
+++ b/files/fr/learn/javascript/first_steps/variables/index.html
@@ -1,34 +1,22 @@
 ---
 title: Stocker les informations nécessaires — les variables
 slug: Learn/JavaScript/First_steps/Variables
-tags:
-  - Booléens
-  - Declaration
-  - Initialisation
-  - JavaScript
-  - Mise à jour
-  - Nombres
-  - Objets
-  - Tableaux
-  - Typage faible
-  - Variables
-  - chaînes
 translation_of: Learn/JavaScript/First_steps/Variables
 ---
 
                                                                                                          {{LearnSidebar}}
                                                                                                          {{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}
                                                                                                          
 
-
                                                                                                          Après lecture des deux articles précédents, vous savez maintenant ce qu'est JavaScript, ce qu'il peut vous apporter, comment l'utiliser aux côtés d'autres technologies web et l'aspect de ses principales fonctionnalités vues de haut. Dans cet article, nous revenons aux fondements réels en examinant comment travailler avec le bloc de construction le plus basique du JavaScript — les variables.
                                                                                                          
+
                                                                                                          Après lecture des deux articles précédents, vous savez maintenant ce qu'est JavaScript, ce qu'il peut vous apporter, comment l'utiliser aux côtés d'autres technologies web et l'aspect de ses principales fonctionnalités vues de haut. Dans cet article, nous revenons aux fondements réels en examinant comment travailler avec le bloc de construction le plus basique du JavaScript — les variables.
                                                                                                          
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :
 
 
 
 
 
   
 
 
 
 
  
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                          
+
                                                                                                          
-   
+   
-   
+   
@@ -36,13 +24,13 @@ translation_of: Learn/JavaScript/First_steps/Variables
 
 
                                                                                                          Outils nécessaires
                                                                                                          
 
-
                                                                                                          Tout au long de cet article, on vous demandera de saisir des lignes de code pour tester votre compréhension. Si vous vous servez du navigateur avec un ordinateur de bureau, l'endroit le plus approprié pour saisir les exemples de code est la console JavaScript du navigateur (voyez Les outils de développement du navigateur pour plus d'informations sur la manière d'accéder à ces outils).
                                                                                                          
+
                                                                                                          Tout au long de cet article, on vous demandera de saisir des lignes de code pour tester votre compréhension. Si vous vous servez du navigateur avec un ordinateur de bureau, l'endroit le plus approprié pour saisir les exemples de code est la console JavaScript du navigateur (voyez Les outils de développement du navigateur pour plus d'informations sur la manière d'accéder à ces outils).
                                                                                                          Toutefois, nous avons aussi incorporé une console JavaScript dans cette page pour vous permettre d'y écrire le code au cas où vous n'utiliseriez pas un navigateur avec une console JavaScript facilement accessible, ou si vous estimez qu'une console incorporée est plus confortable.
                                                                                                          Qu'est ce qu'une variable ?
                                                                                                          
 
-
                                                                                                          Une variable est un conteneur pour une valeur, tel un nombre à utiliser pour une addition, ou une chaîne devant faire partie d'une phrase. Mais un aspect spécial des variables est que les valeurs contenues peuvent changer. Voyons un exemple simple :
                                                                                                          
+
                                                                                                          Une variable est un conteneur pour une valeur, tel un nombre à utiliser pour une addition, ou une chaîne devant faire partie d'une phrase. Mais un aspect spécial des variables est que les valeurs contenues peuvent changer. Voyons un exemple simple :
                                                                                                          <button>Pressez moi</button>
                                                                                                          
 
@@ -53,7 +41,7 @@ button.onclick = function() {
   alert('Salut ' + name + ', sympa de vous voir !');
 }
 
-
                                                                                                          {{ EmbedLiveSample('What_is_a_variable', '100%', 50) }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Quest_ce_quune_variable', '100%', 50) }}
                                                                                                          Dans cet exemple, presser le bouton déclenche l'exécution de quelques lignes de code. La première ligne affiche à l'écran une boîte priant l'utilisateur de saisir son nom et stocke la valeur entrée dans une variable. La deuxième affiche un message de bienvenue avec la valeur de la variable.
                                                                                                          
 
@@ -79,27 +67,24 @@ if (name === 'Adam') {
 
 
                                                                                                          Les variables sont essentielles et à mesure que vous en apprendrez plus sur JavaScript, elles deviendront une seconde nature pour vous.
                                                                                                          
 
-
                                                                                                          Une autre particularité des variables : elle peuvent contenir pratiquement de tout — pas uniquement des chaînes ou des nombres. Elles peuvent aussi contenir des données complexes et même des fonctions, ce qui permet de réaliser des choses étonnantes. Vous en apprendrez plus à ce propos au long de ce parcours.
                                                                                                          
+
                                                                                                          Une autre particularité des variables : elle peuvent contenir pratiquement de tout — pas uniquement des chaînes ou des nombres. Elles peuvent aussi contenir des données complexes et même des fonctions, ce qui permet de réaliser des choses étonnantes. Vous en apprendrez plus à ce propos au long de ce parcours.
                                                                                                          
 
-
                                                                                                          
+
                                                                                                          
 
                                                                                                          Note : Nous disons que les variables contiennent des valeurs. C'est un distingo important. Les variables ne sont pas les valeurs elles‑mêmes : ce sont des conteneurs pour ces valeurs. Vous pouvez vous les représenter comme une boîte en carton dans laquelle il est possible de ranger des choses.
                                                                                                          
 
                                                                                                          
 
-
                                                                                                          
+
                                                                                                          
 
 
                                                                                                          Déclarer une variable
                                                                                                          
 
-
                                                                                                          Avant de se servir d'une variable, il faut d'abord la créer — plus précisément, nous disons déclarer la variable. Pour ce faire, nous saisissons le mot‑clé var ou let suivi du nom que vous voulez donner à la variable :
                                                                                                          
+
                                                                                                          Avant de se servir d'une variable, il faut d'abord la créer — plus précisément, nous disons déclarer la variable. Pour ce faire, nous saisissons le mot‑clé var ou let suivi du nom que vous voulez donner à la variable :
                                                                                                          
 
 
                                                                                                          let myName;
 let myAge;
                                                                                                          
 
 
                                                                                                          Dans ces lignes, nous venons de créer deux variables nommées respectivement myName et myAge. Saisissez les maintenant dans la console de votre navigateur, ou dans la console au bas de la page (Vous ouvrez cette console soit dans un onglet séparé, soit dans une fenêtre selon votre préférence). Après cela, essayez de créer une variable (ou deux) en choisissant vous même le nom.
                                                                                                          
 
-
 
-
                                                                                                          {{ EmbedLiveSample('Hidden_code', '100%', 300) }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Déclarer_une_variable', '100%', 300) }}
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : En JavaScript, le code de toute instruction doit se terminer par un point‑virgule (;) — il peut fonctionner correctement sans ce point‑virgule pour des lignes isolées, mais ce ne sera probablement pas le cas si vous écrivez plusieurs lignes de code ensemble. Prenez l'habitude de mettre ce point‑virgule.
                                                                                                          
+
                                                                                                          Note : En JavaScript, le code de toute instruction doit se terminer par un point‑virgule (;) — il peut fonctionner correctement sans ce point‑virgule pour des lignes isolées, mais ce ne sera probablement pas le cas si vous écrivez plusieurs lignes de code ensemble. Prenez l'habitude de mettre ce point‑virgule.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Vous pouvez maintenant tester si ces valeurs existent dans l'environnement d'exécution en saisissant simplement le nom de ces variables, par exemple
                                                                                                          
@@ -222,22 +206,22 @@ myAge;
 
                                                                                                          scoobyDoo;
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : Ne confondez pas une variable qui existe mais sans valeur définie avec une variable qui n'existe pas du tout — ce sont deux choses tout à fait différentes. Dans l'analogie des boîtes, ne pas exister correspond à l'absence de boîte ; valeur indéfinie correspond à une boîte vide.
                                                                                                          
+
                                                                                                          Note : Ne confondez pas une variable qui existe mais sans valeur définie avec une variable qui n'existe pas du tout — ce sont deux choses tout à fait différentes. Dans l'analogie des boîtes, ne pas exister correspond à l'absence de boîte ; valeur indéfinie correspond à une boîte vide.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Initialisation d'une variable
                                                                                                          
 
-
                                                                                                          Une fois la variable déclarée, vous pouvez l'initialiser avec une valeur. On réalise cela en saisissant le nom de la variable, suivi d'un signe égale (=), lui-même suivi de la valeur souhaitée pour la variable. Par exemple :
                                                                                                          
+
                                                                                                          Une fois la variable déclarée, vous pouvez l'initialiser avec une valeur. On réalise cela en saisissant le nom de la variable, suivi d'un signe égale (=), lui-même suivi de la valeur souhaitée pour la variable. Par exemple :
                                                                                                          
 
 
                                                                                                          myName = 'Chris';
 myAge = 37;
                                                                                                          
 
-
                                                                                                          Revenez à la console maintenant et saisissez‑y ces deux lignes. Constatez que la console renvoie en confirmation la  valeur assignée à la variable dans chaque cas. Vous pouvez, à nouveau, faire renvoyer par la console les valeurs de variable en saisissant simplement son nom dans la console — essayez encore :
                                                                                                          
+
                                                                                                          Revenez à la console maintenant et saisissez‑y ces deux lignes. Constatez que la console renvoie en confirmation la  valeur assignée à la variable dans chaque cas. Vous pouvez, à nouveau, faire renvoyer par la console les valeurs de variable en saisissant simplement son nom dans la console — essayez encore :
                                                                                                          
 
 
                                                                                                          myName;
 myAge;
                                                                                                          
 
-
                                                                                                          Il est possible de déclarer et initialiser une variable en même temps, comme ceci :
                                                                                                          
+
                                                                                                          Il est possible de déclarer et initialiser une variable en même temps, comme ceci :
                                                                                                          
 
 
                                                                                                          let myDog = 'Rover';
                                                                                                          
 
@@ -264,11 +248,11 @@ logName();
 var myName;
 
 
-
                                                                                                          
-
                                                                                                          Note : l'exemple ci-dessus ne fonctionnera pas si on tape des lignes une à une dans la console, mais seulement quand on exécute un script JavaScript multi-lignes dans un document web.
                                                                                                          
+
                                                                                                          
+
                                                                                                          Note : l'exemple ci-dessus ne fonctionnera pas si on tape des lignes une à une dans la console, mais seulement quand on exécute un script JavaScript multi-lignes dans un document web.
                                                                                                          
 
                                                                                                          
 
-
                                                                                                          Ce processus se nomme « hoisting » (en français, "hissage") — lisez var hoisting pour plus de précisions sur ce sujet.
                                                                                                          
+
                                                                                                          Ce processus se nomme « hoisting » (en français, "hissage") — lisez var hoisting pour plus de précisions sur ce sujet.
                                                                                                          
 
 
                                                                                                          Le hissage ne fonctionne plus avec let. Si on remplaçait var par let dans l'exemple ci-dessus, l'exécution du script planterait sur une erreur. C'est une bonne chose — déclarer une variable après l'avoir initialisé produit un code obscur, difficile à lire.
                                                                                                          
 
@@ -296,7 +280,7 @@ myName = 'Bob' ;
 
 
                                                                                                          Mise à jour d'une variable
                                                                                                          
 
-
                                                                                                          Une fois la variable initialisée avec une valeur, vous pouvez simplement modifier (ou mettre à jour) cette valeur en lui assignant une nouvelle valeur. Entrez ces deux lignes dans la console :
                                                                                                          
+
                                                                                                          Une fois la variable initialisée avec une valeur, vous pouvez simplement modifier (ou mettre à jour) cette valeur en lui assignant une nouvelle valeur. Entrez ces deux lignes dans la console :
                                                                                                          
 
 
                                                                                                          myName = 'Bob';
 myAge = 40;
                                                                                                          
@@ -316,10 +300,10 @@ myAge = 40;
 
 
 
                                                                                                          
-
                                                                                                          Note : Une liste exhaustive des mots réservés est proposée dans la page Lexical grammar — keywords.
                                                                                                          
+
                                                                                                          Note : Une liste exhaustive des mots réservés est proposée dans la page Lexical grammar — keywords.
                                                                                                          
 
                                                                                                          
 
-
                                                                                                          Exemples de noms corrects :
                                                                                                          
+
                                                                                                          Exemples de noms corrects :
                                                                                                          
 
 
                                                                                                          age
 myAge
@@ -341,9 +325,9 @@ document
 skjfndskjfnbdskjfb
 thisisareallylongstupidvariablenameman 
                                                                                                          
 
-
                                                                                                          Parmi ces noms, les suivants déclenchent une SyntaxError  :
                                                                                                          
+
                                                                                                          Parmi ces noms, les suivants déclenchent une SyntaxError  :
                                                                                                          
 
-
                                                                                                          1 //la variable commence par un chiffre
+
                                                                                                          1 //la variable commence par un chiffre
 var //mot réservé
 document //mot réservé
 
                                                                                                          
@@ -370,11 +354,11 @@ document //mot réservé
 
 
                                                                                                          Booléens
                                                                                                          
 
-
                                                                                                          Les booléens sont des valeurs true/false (vrai/faux) — elles ne peuvent prendre que deux valeurs: true ou false. Elles sont généralement utilisées pour tester une condition, à la suite de laquelle le code est exécuté de manière appropriée. Ainsi, par exemple, un cas simple pourrait être :
                                                                                                          
+
                                                                                                          Les booléens sont des valeurs true/false (vrai/faux) — elles ne peuvent prendre que deux valeurs: true ou false. Elles sont généralement utilisées pour tester une condition, à la suite de laquelle le code est exécuté de manière appropriée. Ainsi, par exemple, un cas simple pourrait être :
                                                                                                          
 
 
                                                                                                          var iAmAlive = true;
                                                                                                          
 
-
                                                                                                          Toutefois, en réalité, un booléen sera plutôt utilisé ainsi :
                                                                                                          
+
                                                                                                          Toutefois, en réalité, un booléen sera plutôt utilisé ainsi :
                                                                                                          
 
 
                                                                                                          var test = 6 < 3;
                                                                                                          
 
@@ -382,17 +366,17 @@ document //mot réservé
 
 
                                                                                                          Tableaux
                                                                                                          
 
-
                                                                                                          Une tableau est un objet unique contenant plusieurs valeurs entre crochets séparées par des virgules. Saisissez les lignes suivantes dans la console :
                                                                                                          
+
                                                                                                          Une tableau est un objet unique contenant plusieurs valeurs entre crochets séparées par des virgules. Saisissez les lignes suivantes dans la console :
                                                                                                          
 
 
                                                                                                          var myNameArray = ['Chris', 'Bob', 'Jim'];
 var myNumberArray = [10,15,40];
                                                                                                          
 
-
                                                                                                          Un fois ces tableaux définis, vous pouvez avoir accès à chaque valeur en fonction de leur emplacement dans le tableau. Voyez ces lignes :
                                                                                                          
+
                                                                                                          Un fois ces tableaux définis, vous pouvez avoir accès à chaque valeur en fonction de leur emplacement dans le tableau. Voyez ces lignes :
                                                                                                          
 
 
                                                                                                          myNameArray[0]; // renverra 'Chris'
 myNumberArray[2]; // renverra 40
                                                                                                          
 
-
                                                                                                          La valeur entre crochets précise l'index correspondant à la position de la valeur que vous souhaitez voir renvoyée. Vous remarquerez que les tableaux en JavaScript sont indexés à partir de zéro : le premier élément a l'index 0.
                                                                                                          
+
                                                                                                          La valeur entre crochets précise l'index correspondant à la position de la valeur que vous souhaitez voir renvoyée. Vous remarquerez que les tableaux en JavaScript sont indexés à partir de zéro : le premier élément a l'index 0.
                                                                                                          
 
 
                                                                                                          Vous en apprendrez beaucoup plus au sujet des tableaux dans un article suivant.
                                                                                                          
 
@@ -400,11 +384,11 @@ myNumberArray[2]; // renverra 40
                                                                                                          
 
 
                                                                                                          En programmation, un objet est une structure de code qui modélise un objet du réel. Vous pouvez avoir un objet simple représentant une place de parking avec sa largeur et sa profondeur ou bien un objet représentant une personne avec comme données son nom, sa taille, son poids, son vernaculaire, comment le contacter, et plus encore.
                                                                                                          
 
-
                                                                                                          Entrez la ligne suivant dans la console de votre explorateur :
                                                                                                          
+
                                                                                                          Entrez la ligne suivant dans la console de votre explorateur :
                                                                                                          
 
 
                                                                                                          var dog = { name : 'Spot', breed : 'Dalmatian' };
                                                                                                          
 
-
                                                                                                          Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante :
                                                                                                          
+
                                                                                                          Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante :
                                                                                                          
 
 
                                                                                                          dog.name
                                                                                                          
 
@@ -414,11 +398,11 @@ myNumberArray[2]; // renverra 40
 
 
                                                                                                          JavaScript est un « langage faiblement typé », ce qui veut dire que, contrairement à d'autres langages, vous n'êtes pas obligé de préciser quel est le type de donnée que doit contenir une variable (par ex. nombres, chaînes, tableaux, etc).
                                                                                                          
 
-
                                                                                                          Par exemple, si vous déclarez une variable et si vous y placez une valeur entre guillemets, le navigateur la traitera comme étant une chaîne :
                                                                                                          
+
                                                                                                          Par exemple, si vous déclarez une variable et si vous y placez une valeur entre guillemets, le navigateur la traitera comme étant une chaîne :
                                                                                                          
 
 
                                                                                                          var myString = 'Hello';
                                                                                                          
 
-
                                                                                                          Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents :
                                                                                                          
+
                                                                                                          Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents :
                                                                                                          
 
 
                                                                                                          var myNumber = '500'; // oops, c'est toujours une chaîne
 typeof(myNumber);
diff --git a/files/fr/learn/javascript/first_steps/what_is_javascript/index.html b/files/fr/learn/javascript/first_steps/what_is_javascript/index.html
index a3bac2d0fb..5e37499c73 100644
--- a/files/fr/learn/javascript/first_steps/what_is_javascript/index.html
+++ b/files/fr/learn/javascript/first_steps/what_is_javascript/index.html
@@ -246,7 +246,6 @@ function updateName() {
 
 
                                                                                                          Notez que parfois vous tomberez sur des morceaux de JavaScript directement dans le HTML. Ce qui peut ressembler à ça :
                                                                                                          
 
-
                                                                                                          
 
                                                                                                          function createParagraph() {
   let para = document.createElement('p');
   para.textContent = 'Vous avez cliqué !';
@@ -254,16 +253,17 @@ function updateName() {
 }
                                                                                                          
 
 
                                                                                                          <button onclick="createParagraph()">Cliquez-moi!</button>
                                                                                                          
-
                                                                                                          
 
 
                                                                                                          Vous pouvez essayer cette version dans la démonstration ci-dessous.
                                                                                                          
 
-
                                                                                                          {{ EmbedLiveSample('inline_js_example', '100%', 150) }}
                                                                                                          
+
                                                                                                          {{ EmbedLiveSample('Handlers_JavaScript_en_ligne', '100%', 150) }}
                                                                                                          
 
 
                                                                                                          Cet exemple a exactement le même comportement que ceux des deux sections précédentes, sauf que l'élément {{htmlelement("button")}} a un handler onclick en ligne pour déclencher l'exécution de la fonction à la pression du bouton.
                                                                                                          
 
 
                                                                                                          Évitez cependant de faire cela. C'est une mauvaise habitude de polluer le HTML avec du JavaScript, en plus d'être inefficace. Dans cette méthode, on doit inclure l'attribut onclick="createParagraph()" sur chaque bouton où le JavaScript doit s'appliquer.
                                                                                                          
 
+
                                                                                                          En JavaScript pur
                                                                                                          
+
 
                                                                                                          Une construction en JavaScript pur permet de sélectionner tous les boutons avec une instruction. Dans l'exemple précédent c'est cette partie qui s'en charge :
                                                                                                          
 
 
                                                                                                          let buttons = document.querySelectorAll('button');
@@ -311,13 +311,10 @@ document.addEventListener("DOMContentLoaded", function() {
 
 
                                                                                                          Les scripts asynchrones téléchargeront le script sans bloquer le rendu de la page et l'exécuteront dès que le téléchargement du script sera terminé. Vous n'obtenez aucune garantie que les scripts s'exécutent dans un ordre spécifique, mais seulement qu'ils n'empêcheront pas le reste de la page de s'afficher. Il est préférable d'utiliser async lorsque les scripts de la page s'exécutent indépendamment les uns des autres et ne dépendent d'aucun autre script de la page.
                                                                                                          
 
-
                                                                                                          
-  async vs defer
-  
                                                                                                          Image de la spécification HTML, copiée et rognée selon les termes de la licence CC BY 4.0.
-  
                                                                                                          
-
                                                                                                          
+async vs defer
 
-
                                                                                                          
+
                                                                                                          Image de la spécification HTML, copiée et rognée selon les termes de la licence CC BY 4.0.
+
                                                                                                          
 
 
                                                                                                          Par exemple, si vous avez les éléments de script suivants :
                                                                                                          
 
diff --git a/files/fr/learn/javascript/first_steps/what_went_wrong/index.html b/files/fr/learn/javascript/first_steps/what_went_wrong/index.html
index 004d4a67a7..f8ec006003 100644
--- a/files/fr/learn/javascript/first_steps/what_went_wrong/index.html
+++ b/files/fr/learn/javascript/first_steps/what_went_wrong/index.html
@@ -18,9 +18,9 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 
 
                                                                                                          {{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}
                                                                                                          
 
-
                                                                                                          Après avoir créé le jeu "Devinez le nombre" de l'article précédent, vous avez peut-être constaté qu'il ne fonctionnait pas. Pas de panique — cet article vise à ce que vous ne vous arrachiez pas les cheveux sur ces problèmes en donnant quelques conseils simples sur la façon de trouver et corriger les erreurs dans les programmes JavaScript.
                                                                                                          
+
                                                                                                          Après avoir créé le jeu "Devinez le nombre" de l'article précédent, vous avez peut-être constaté qu'il ne fonctionnait pas. Pas de panique — cet article vise à ce que vous ne vous arrachiez pas les cheveux sur ces problèmes en donnant quelques conseils simples sur la façon de trouver et corriger les erreurs dans les programmes JavaScript.
                                                                                                          
 
-
                                                                                                          
  
   
                                                                                                          Prérequis :Prérequis :
    Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
   
                                                                                                          
   
                                                                                                          Objectif :Objectif :
    Se familiariser avec l'usage élémentaire des variables en JavaScript.
   
                                                                                                          
                                                                                                            
 
 
 
 
 
 
 
 
                                                                                                          
+
                                                                                                          
@@ -58,7 +58,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 
                                                                                                          
-
                                                                                                          Note : Votre propre version de l'exemple de jeu ne fonctionne pas, vous pourriez vouloir la corriger ! Il nous semble plus efficace que vous travailliez sur notre version boguée, afin que vous puissiez apprendre les techniques que nous enseignons ici. Ensuite, vous pouvez revenir en arrière et essayer de réparer votre exemple.
                                                                                                          
+
                                                                                                          Note : Votre propre version de l'exemple de jeu ne fonctionne pas, vous pourriez vouloir la corriger ! Il nous semble plus efficace que vous travailliez sur notre version boguée, afin que vous puissiez apprendre les techniques que nous enseignons ici. Ensuite, vous pouvez revenir en arrière et essayer de réparer votre exemple.
                                                                                                          
 
                                                                                                          À ce stade, consultons la console du développeur pour voir si nous pouvons voir des erreurs de syntaxe, puis essayez de les corriger. Vous apprendrez comment ci-dessous.
                                                                                                          
@@ -68,7 +68,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 
                                                                                                          Antérieurement dans le cours, nous vous avons demandé de taper quelques commandes JavaScript simples dans la console JavaScript des outils de développement (si vous ne pouvez pas vous rappeler comment l'ouvrir dans votre navigateur, suivez le lien précédent pour savoir comment). Ce qui est encore plus utile, c'est que la console vous donne des messages d'erreur chaque fois qu'une erreur de syntaxe existe dans le JavaScript qui est introduit dans le moteur JavaScript du navigateur. Maintenant partons en chasse !
                                                                                                            
- 
                                                                                                          1. Allez à l'onglet dans lequel est affiché number-game-errors.html, et ouvrez la console  JavaScript. Vous devriez voir un message d'erreur dans les lignes qui suivent : 
                                                                                                            2. 
+ 
                                                                                                          2. Allez à l'onglet dans lequel est affiché number-game-errors.html, et ouvrez la console  JavaScript. Vous devriez voir un message d'erreur dans les lignes qui suivent : 
                                                                                                            3. 
  
                                                                                                          3. C'est une erreur très facile à trouver, et le navigateur vous fournit quelques indices pour vous en sortir (la copie d'écran ci‑dessus provient de Firefox, mais les autres navigateurs donnent des indications semblables). De gauche à droite, nous avons :
   
                                                                                                              
    
                                                                                                            • Une croix rouge indiquant que c'est une erreur.
                                                                                                              • 
@@ -81,23 +81,25 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
  
                                                                                                            • En examinant la ligne 86 dans l'éditeur de code, nous voyons :
   
                                                                                                              guessSubmit.addeventListener('click', checkGuess);
                                                                                                              
  
                                                                                                              • 
- 
                                                                                                            • Le message d'erreur dit "guessSubmit.addeventListener n'est pas une fonction", donc nous avons probablement mal orthographié quelque chose. Si vous n'êtes pas sûr de la bonne orthographe d'un élément syntaxique, il est fréquemment opportun de regarder dans MDN. Actuellement, la meilleure façon d'opérer consiste à faire une recherche pour  "mdn nom-de-fonctionnalité" avec votre moteur de recherche préféré. Voici un raccourci pour gagner un peu de temps dans le cas présent : addEventListener().
                                                                                                              • 
+ 
                                                                                                            • Le message d'erreur dit "guessSubmit.addeventListener n'est pas une fonction", donc nous avons probablement mal orthographié quelque chose. Si vous n'êtes pas sûr de la bonne orthographe d'un élément syntaxique, il est fréquemment opportun de regarder dans MDN. Actuellement, la meilleure façon d'opérer consiste à faire une recherche pour  "mdn nom-de-fonctionnalité" avec votre moteur de recherche préféré. Voici un raccourci pour gagner un peu de temps dans le cas présent : addEventListener().
                                                                                                              • 
  
                                                                                                            • Donc, en regardant cette page, il apparaît que nous avions mal orthographié le nom de la fonction ! Souvenez-vous que JavaScript est sensible à la casse, et que la moindre différence dans l'orthographe ou la casse déclenchera une erreur. Remplacer addeventListener par addEventListener corrigera cela. Faisons‑le maintenant.
                                                                                                              • 
 
                                                                                                          
-
                                                                                                          Note : Voyez la page relative à TypeError: "x" is not a function pour plus de précisions à propos de cette erreur.
                                                                                                          
+
                                                                                                          Note : Voyez la page relative à TypeError: "x" is not a function pour plus de précisions à propos de cette erreur.
                                                                                                          
 
                                                                                                          Erreurs de syntaxe : deuxième tour
                                                                                                            
  
                                                                                                          1. Enregistrez la page et actualisez‑la, vous constaterez que l'erreur a disparu.
                                                                                                            2. 
- 
                                                                                                          2. Maintenant si vous entrez une supposition et pressez le bouton de soumission, vous constaterez ... une autre erreur ! 
                                                                                                            3. 
+ 
                                                                                                          3. Maintenant si vous entrez une supposition et pressez le bouton de soumission, vous constaterez ... une autre erreur ! 
                                                                                                            4. 
  
                                                                                                          4. Cette fois‑ci, l'erreur rapportée est "TypeError: lowOrHi is null", à la ligne 78.
-  
                                                                                                            Note : Null est une valeur spéciale signifiant "rien" ou "aucune valeur". Or lowOrHi a été déclaré et initialisé, mais sans valeur signifiante — il n'a ni type ni valeur.
                                                                                                            
+  
                                                                                                            
+    
                                                                                                            Note : Null est une valeur spéciale signifiant "rien" ou "aucune valeur". Or lowOrHi a été déclaré et initialisé, mais sans valeur signifiante — il n'a ni type ni valeur.
                                                                                                            
 
-  
                                                                                                            Note : Cette erreur n'apparaît pas au moment du chargement de la page car elle survient à l'intérieur d'une fonction (dans checkGuess() { ... }). Comme vous l'apprendrez de manière plus précise plus loin dans l'article à propos des fonctions, le code dans les fonctions s'exécute dans une instance séparée du code en dehors des fonctions. Dans notre cas, le code n'avait pas été exécuté et l'erreur ne pouvait pas survenir avant que la fonction checkGuess() soit lancée à la ligne 86.
                                                                                                            
+  
                                                                                                            
+    
                                                                                                            Note : Cette erreur n'apparaît pas au moment du chargement de la page car elle survient à l'intérieur d'une fonction (dans checkGuess() { ... }). Comme vous l'apprendrez de manière plus précise plus loin dans l'article à propos des fonctions, le code dans les fonctions s'exécute dans une instance séparée du code en dehors des fonctions. Dans notre cas, le code n'avait pas été exécuté et l'erreur ne pouvait pas survenir avant que la fonction checkGuess() soit lancée à la ligne 86.
                                                                                                            
  
                                                                                                            5. 
  
                                                                                                          5. Regardez à la ligne 78, vous verrez ce code :
   
                                                                                                            lowOrHi.textContent = 'Last guess was too high!';
                                                                                                            
@@ -109,11 +111,11 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
   
                                                                                                            console.log(lowOrHi);
                                                                                                            
 
   
                                                                                                            
-  
                                                                                                            Note : console.log() est vraiment utile pour déboguer une fonction en affichant sa valeur sur la console. Donc, elle affichera sur cette dernière la valeur de lowOrHi que nous avons essayé de définir à la ligne 48.
                                                                                                            
+  
                                                                                                            Note : console.log() est vraiment utile pour déboguer une fonction en affichant sa valeur sur la console. Donc, elle affichera sur cette dernière la valeur de lowOrHi que nous avons essayé de définir à la ligne 48.
                                                                                                            
   
                                                                                                            
  
                                                                                                            6. 
- 
                                                                                                          6. Enregistrez et actualisez la page, et vous verrez le résultat de console.log() sur la console.  C'est sûr, la valeur de lowOrHi est null à ce niveau ; il y a bien un problème à la ligne 48.
                                                                                                            7. 
- 
                                                                                                          7. Quel est ce problème ? Réfléchissons. À la ligne 48, nous avons utilisé la méthode document.querySelector() pour obtenir une référence sur un élément avec un sélecteur CSS. En regardant plus en amont dans notre fichier, nous pouvons trouver le paragraphe en question :
+ 
                                                                                                          8. Enregistrez et actualisez la page, et vous verrez le résultat de console.log() sur la console.  C'est sûr, la valeur de lowOrHi est null à ce niveau ; il y a bien un problème à la ligne 48.
                                                                                                            9. 
+ 
                                                                                                          9. Quel est ce problème ? Réfléchissons. À la ligne 48, nous avons utilisé la méthode document.querySelector() pour obtenir une référence sur un élément avec un sélecteur CSS. En regardant plus en amont dans notre fichier, nous pouvons trouver le paragraphe en question :
   
                                                                                                            <p class="lowOrHi"></p>
                                                                                                            
  
                                                                                                            10. 
  
                                                                                                          10. Donc, il nous faut un sélecteur de classe ici, précédé d'un point (.), alors que le sélecteur passé à la méthode querySelector() en ligne 48 n'en a pas. Ce pourrait être le problème ! Changeons lowOrHi en .lowOrHi à la ligne 48.
                                                                                                            11. 
@@ -121,7 +123,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 
                                                                                                          
-
                                                                                                          Note : Voyez la page relative à TypeError: "x" is (not) "y" pour plus de précisions à propos de cette erreur.
                                                                                                          
+
                                                                                                          Note : Voyez la page relative à TypeError: "x" is (not) "y" pour plus de précisions à propos de cette erreur.
                                                                                                          
 
                                                                                                          Erreurs de syntaxe : troisième tour
                                                                                                          
@@ -154,11 +156,11 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 
 
                                                                                                          Travaillons la logique
                                                                                                          
 
-
                                                                                                          Pour corriger cela, examinons d'abord le fonctionnement de cette ligne. Premièrement, appelons Math.random(), qui génére un nombre décimal aléatoire compris entre 0 et 1, par exemple 0.5675493843.
                                                                                                          
+
                                                                                                          Pour corriger cela, examinons d'abord le fonctionnement de cette ligne. Premièrement, appelons Math.random(), qui génére un nombre décimal aléatoire compris entre 0 et 1, par exemple 0.5675493843.
                                                                                                          Math.random()
                                                                                                          
 
-
                                                                                                          Puis, nous passons le résultat de l'appel de Math.random() à Math.floor(), qui arrondit le nombre passé à l'entier inférieur le plus proche. Puis, on ajoute 1 au résultat :
                                                                                                          
+
                                                                                                          Puis, nous passons le résultat de l'appel de Math.random() à Math.floor(), qui arrondit le nombre passé à l'entier inférieur le plus proche. Puis, on ajoute 1 au résultat :
                                                                                                          Math.floor(Math.random()) + 1
                                                                                                          
 
@@ -189,7 +191,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 
                                                                                                          cela déclenchera cette même erreur car le logiciel pense que vous êtes en train de faire quelque chose d'autre. Vous devez vous assurer que vous n'avez pas confondu l'opérateur d'assignation  (=) — qui fixe une valeur donnée à une variable — avec l'opérateur (===) qui teste la stricte égalité de deux valeurs, et renvoie un résultat  true/false (vrai/faux).
                                                                                                          
-
                                                                                                          Note : Voyez la page relative à SyntaxError: missing ; before statement pour plus de précisions à propos de cette erreur.
                                                                                                          
+
                                                                                                          Note : Voyez la page relative à SyntaxError: missing ; before statement pour plus de précisions à propos de cette erreur.
                                                                                                          
 
                                                                                                          Le programme dit que vous avez gagné quelle que soit votre suggestion.
                                                                                                          
@@ -209,7 +211,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 
                                                                                                          Cette erreur est triviale — elle indique en général que vous avez oublié une parenthèse fermante à la fin de l'appel d'une fonction ou d'une méthode.
                                                                                                          
-
                                                                                                          Note: Voyez la page relative à SyntaxError: missing ) after argument list pour plus de précisions à ce propos.
                                                                                                          
+
                                                                                                          Note : Voyez la page relative à SyntaxError: missing ) after argument list pour plus de précisions à ce propos.
                                                                                                          
 
                                                                                                          SyntaxError: missing : after property id
                                                                                                          
@@ -235,7 +237,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 
                                                                                                          Pour toutes ces erreurs, revoyez comment nous avons opéré dans les exemples de ce parcours. Quand une erreur survient, regardez le numéro de ligne indiqué, allez à cette ligne et voyez si vous remarquez ce qui ne va pas. N'oubliez pas que l'erreur n'est pas forcément sur la ligne indiquée, et qu'elle ne provient pas forcément d'un des problèmes évoqués plus haut !
                                                                                                          
-
                                                                                                          Note : Voyez les pages relatives à  SyntaxError: Unexpected token et SyntaxError: unterminated string literal pour plus de précisions à ce propos.
                                                                                                          
+
                                                                                                          Note : Voyez les pages relatives à  SyntaxError: Unexpected token et SyntaxError: unterminated string literal pour plus de précisions à ce propos.
                                                                                                          
 
                                                                                                          Résumé
                                                                                                          
@@ -246,7 +248,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong
 
 
                                                                                                          
 
                                                                                                            
- 
                                                                                                          • Il y a nombre d'autres erreurs qui n'ont pas été listées ici ; nous les avons récolées dans un référencement qui les explique en détail — voyez JavaScript error reference.
                                                                                                            • 
+ 
                                                                                                          • Il y a nombre d'autres erreurs qui n'ont pas été listées ici ; nous les avons récolées dans un référencement qui les explique en détail — voyez JavaScript error reference.
                                                                                                            • 
  
                                                                                                          • Si dans votre code vous rencontrez une erreur, et même après avoir lu cet article, vous ne parvenez pas à la corriger, vous pouvez obtenir de l'aide ! Demandez‑la sur le fil de discussion Learning Area Discourse thread ou par le canal IRC de #mdn sur  Mozilla IRC. Dites‑nous quelle est cette erreur, et nous essayerons de vous aider. Un listing de votre code sera aussi utile.
                                                                                                            • 
 
                                                                                                          
 
                                                                                                          
diff --git a/files/fr/learn/javascript/index.html b/files/fr/learn/javascript/index.html
index cc1ac2b10b..77f8f6f168 100644
--- a/files/fr/learn/javascript/index.html
+++ b/files/fr/learn/javascript/index.html
@@ -12,16 +12,16 @@ original_slug: Apprendre/JavaScript
 ---
 
                                                                                                          {{LearnSidebar}}
                                                                                                          
 
-
                                                                                                          {{Glossary('JavaScript')}} est un langage de programmation qui vous permet de mettre en œuvre des éléments complexes sur des pages Web (une page Web contenant plus que de simples informations statiques). Chaque fois qu'une page affiche des mises à jour de contenu en temps réel, des cartes interactives, des animations graphiques 2D / 3D ou un juke-box vidéo défilant, etc. — vous pouvez parier que JavaScript est probablement impliqué.
                                                                                                          
+
                                                                                                          {{Glossary('JavaScript')}} est un langage de programmation qui vous permet de mettre en œuvre des éléments complexes sur des pages Web (une page Web contenant plus que de simples informations statiques). Chaque fois qu'une page affiche des mises à jour de contenu en temps réel, des cartes interactives, des animations graphiques 2D / 3D ou un juke-box vidéo défilant, etc. — vous pouvez parier que JavaScript est probablement impliqué.
                                                                                                          Parcours d'apprentissage
                                                                                                          
 
-
                                                                                                          JavaScript est sans doute plus difficile à apprendre que les technologies connexes telles que HTML et CSS. Avant d'essayer d'apprendre le JavaScript, il est fortement conseillé de se familiariser d'abord avec au moins ces deux technologies, et peut-être aussi avec d'autres. Commencez par travailler sur les modules suivants :
                                                                                                          
+
                                                                                                          JavaScript est sans doute plus difficile à apprendre que les technologies connexes telles que HTML et CSS. Avant d'essayer d'apprendre le JavaScript, il est fortement conseillé de se familiariser d'abord avec au moins ces deux technologies, et peut-être aussi avec d'autres. Commencez par travailler sur les modules suivants :
                                                                                                          Avoir une expérience antérieure avec d'autres langages de programmation peut également aider.
                                                                                                          
@@ -29,8 +29,8 @@ original_slug: Apprendre/JavaScript
 
                                                                                                          Après vous être familiarisé avec les bases de JavaScript, vous devriez être en mesure d'en apprendre davantage sur des sujets plus avancés, par exemple :
                                                                                                          Modules
                                                                                                          
@@ -38,24 +38,24 @@ original_slug: Apprendre/JavaScript
 
                                                                                                          Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les aborder :
                                                                                                          
- 
                                                                                                          Premiers pas en JavaScript
                                                                                                          
+ 
                                                                                                          Premiers pas en JavaScript
                                                                                                          
  
                                                                                                          Dans notre premier module JavaScript, nous répondons d'abord à des questions fondamentales telles que «qu'est-ce que le JavaScript ?», «à quoi cela ressemble-t-il ?» et «que peut-il faire ?», avant de passer à votre première expérience pratique d'écriture de JavaScript. Après cela, nous discutons en détail de certaines fonctionnalités clés de JavaScript, telles que les variables, les chaînes, les nombres et les tableaux.
                                                                                                          
- 
                                                                                                          JavaScript les blocs
                                                                                                          
+ 
                                                                                                          JavaScript les blocs
                                                                                                          
  
                                                                                                          Dans ce module, nous continuons de couvrir toutes les fonctions clés fondamentales de JavaScript, en nous concentrant sur les types de blocs de code les plus courants, tels que les instructions conditionnelles, les boucles, les fonctions et les événements. Vous avez déjà vu ce genre de choses dans le cours, mais seulement en passant, nous en discuterons explicitement ici.
                                                                                                          
- 
                                                                                                          Introduction aux objets JavaScript
                                                                                                          
+ 
                                                                                                          Introduction aux objets JavaScript
                                                                                                          
  
                                                                                                          En JavaScript, la plupart des éléments sont des objets, depuis les principales fonctionnalités de JavaScript comme les chaînes et les tableaux jusqu'aux API du navigateur construites sur JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions et des variables associées dans des paquets efficaces. La nature orientée objet de JavaScript est importante à comprendre, si vous voulez aller plus loin dans la connaissance du langage et rédiger un code plus efficace. C'est pourquoi nous avons conçu ce module pour vous aider. Ici, nous enseignons la théorie et la syntaxe des objets en détail, regardons comment créer vos propres objets et expliquons quelles sont les données JSON et comment les utiliser.
                                                                                                          
- 
                                                                                                          API Web côté client
                                                                                                          
+ 
                                                                                                          API Web côté client
                                                                                                          
  
                                                                                                          Lors de l'écriture de JavaScript côté client, pour des sites Web ou des applications, vous n'irez pas très loin avant de commencer à utiliser des interfaces API, pour manipuler différents aspects du navigateur et du système d'exploitation sur lequel le site fonctionne, ou même des données d'autres sites Web ou des services. Dans ce module, nous explorerons quelles sont les API et comment utiliser certaines des API les plus courantes que vous rencontrerez souvent dans votre travail de développement.
                                                                                                          
 
                                                                                                          Résoudre les problèmes JavaScript courants
                                                                                                          
 
-
                                                                                                          Utiliser JavaScript pour résoudre des problèmes courants fournit des liens vers des sections expliquant comment utiliser JavaScript pour résoudre des problèmes très courants lors de la création d'une page Web.
                                                                                                          
+
                                                                                                          Utiliser JavaScript pour résoudre des problèmes courants fournit des liens vers des sections expliquant comment utiliser JavaScript pour résoudre des problèmes très courants lors de la création d'une page Web.
                                                                                                          Voir aussi
                                                                                                          
- 
                                                                                                          JavaScript sur MDN
                                                                                                          
+ 
                                                                                                          JavaScript sur MDN
                                                                                                          
  
                                                                                                          Principal point d'entrée de la documentation JavaScript de base sur MDN, vous y trouverez de nombreux documents de référence sur tous les aspects du langage JavaScript, ainsi que des tutoriels avancés destinés aux programmeurs en JavaScript expérimentés.
                                                                                                          
  
                                                                                                          Codage des mathématiques
                                                                                                          
  
                                                                                                          Une excellente série de tutoriels vidéo (anglophones) sur les mathématiques que vous devez comprendre pour être un programmeur efficace, par Keith Peters.
                                                                                                          
diff --git a/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html
index 5bd3866baa..70f35b3642 100644
--- a/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html
+++ b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html
@@ -18,9 +18,9 @@ original_slug: >-
 
 
                                                                                                          {{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
                                                                                                          
 
-
                                                                                                          Dans cet exercice, vous devrez utiliser le jeu des balles rebondissantes de l'article précédent comme base, pour y ajouter de nouvelles fonctionnalitées intéressantes.
                                                                                                          
+
                                                                                                          Dans cet exercice, vous devrez utiliser le jeu des balles rebondissantes de l'article précédent comme base, pour y ajouter de nouvelles fonctionnalitées intéressantes.
                                                                                                          
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                          
+
                                                                                                          
@@ -38,7 +38,7 @@ original_slug: >-
 
                                                                                                          Pour commencer, faite une copie locale de index-finished.html, style.css, et main-finished.js de l'article précédent, dans un nouveau dossier.
                                                                                                          
-
                                                                                                          Note: Vous pouvez utiliser un site comme JSBin ou Thimble. Vous pouvez copier vos codes HTML, CSS et JavaScript dans l'un d'entre eux. Si celui que vous utilisez ne possède pas de fenêtres séparées pour les différents langages, ajoutez les dans des balises <script>/<style> dans votre code HTML.
                                                                                                          
+
                                                                                                          Note : Vous pouvez utiliser un site comme JSBin ou Thimble. Vous pouvez copier vos codes HTML, CSS et JavaScript dans l'un d'entre eux. Si celui que vous utilisez ne possède pas de fenêtres séparées pour les différents langages, ajoutez les dans des balises <script>/<style> dans votre code HTML.
                                                                                                          
 
                                                                                                          Le projet en bref
                                                                                                          
@@ -47,7 +47,7 @@ original_slug: >-
 
 
                                                                                                          Ce screenshot vous donne une idée du résultat final:
                                                                                                          
 
-
                                                                                                          
+
                                                                                                            
 
                                                                                                          
@@ -102,8 +102,8 @@ original_slug: >-
 
                                                                                                          Cette méthode doit avoir la même fonction que celle de Ball(): soit dessiner l'objet dans le canvas. Elle fonctionnera quasiment de la même manière, copiez la fonction Ball.prototype.draw. Puis appliquez les modifications suivantes:
                                                                                                            
- 
                                                                                                          • On ne veut pas que le viseur soit plein, mais qu'il ait seulement un contour. Changez fillStyle et fill() pour strokeStyle et stroke().
                                                                                                            • 
- 
                                                                                                          • On voudrait qu'il soit aussi un peu plus épais, pour être plus facile à voir. Pour ça on doit définir un attribut lineWidth à ctx après l'appel à la fonction beginPath() (avec une valeur de 3).
                                                                                                            • 
+ 
                                                                                                          • On ne veut pas que le viseur soit plein, mais qu'il ait seulement un contour. Changez fillStyle et fill() pour strokeStyle et stroke().
                                                                                                            • 
+ 
                                                                                                          • On voudrait qu'il soit aussi un peu plus épais, pour être plus facile à voir. Pour ça on doit définir un attribut lineWidth à ctx après l'appel à la fonction beginPath() (avec une valeur de 3).
                                                                                                            • 
 
                                                                                                          checkBounds()
                                                                                                          
@@ -132,7 +132,7 @@ window.onkeydown = function(e) {
     }
   }
 
-
                                                                                                          Quand une touche est enfoncée, la propriété keyCode de l'objet event est consultée pour savoir quelle touche est enfoncée. Si c'est une des touches spécifiée, alors le viseur ce déplacera à gauche, à droite, en haut ou en bas.
                                                                                                          
+
                                                                                                          Quand une touche est enfoncée, la propriété keyCode de l'objet event est consultée pour savoir quelle touche est enfoncée. Si c'est une des touches spécifiée, alors le viseur ce déplacera à gauche, à droite, en haut ou en bas.
                                                                                                          
  
   
                                                                                                          
    Prérequis:
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                          
+
                                                                                                          
@@ -38,15 +38,15 @@ translation_of: Learn/JavaScript/Objects/Basics
 
 
                                                                                                          Comme souvent dans JavaScript, pour créer un objet, on commence avec la définition et l'initialisation d'une variable. Essayez de mettre le code ci-dessous sous le code déjà écrit de votre fichier JavaScript, puis sauvegardez et rafraichissez la page :
                                                                                                          
 
-
                                                                                                          var personne = {};
                                                                                                          
+
                                                                                                          var personne = {};
                                                                                                          Désormais ouvrez la console JavaScript de votre navigateur, saisissez personne à l'intérieur, et appuyez sur Entrée. Vous devriez obtenir le résultat suivant :
                                                                                                          
 
-
                                                                                                          [object Object]
                                                                                                          
+
                                                                                                          [object Object]
                                                                                                          Félicitations, vous avez créé votre premier objet ! Mais c'est un objet vide, on ne peut pas faire grand-chose avec. Modifions notre objet pour qu'il ressemble à ceci :
                                                                                                          
 
-
                                                                                                          var personne = {
+
                                                                                                          var personne = {
   nom: ['Jean', 'Martin'],
   age: 32,
   sexe: 'masculin',
@@ -62,7 +62,7 @@ translation_of: Learn/JavaScript/Objects/Basics
 
 
                                                                                                          Après avoir sauvegardé et rafraîchit la page, essayez d'entrer les lignes suivantes dans le champ de saisie input :
                                                                                                          
 
-
                                                                                                          personne.nom
+
                                                                                                          personne.nom
 personne.nom[0]
 personne.age
 personne.interets[1]
@@ -79,7 +79,7 @@ personne.salutation()
                                                                                                          
 
 
                                                                                                          Chaque paire de nom/valeur doit être séparée par une virgule, et le nom et la valeur de chaque membre sont séparés par deux points. La syntaxe suit ce schéma :
                                                                                                          
 
-
                                                                                                          var monObjet = {
+
                                                                                                          var monObjet = {
   nomDuMembre1: valeurDuMembre1,
   nomDuMembre2: valeurDuMembre2,
   nomDuMembre3: valeurDuMembre3
@@ -99,7 +99,7 @@ personne.salutation()
                                                                                                          
 
 
                                                                                                          Le nom de l'objet (personne) agit comme un espace de noms (ou namespace en anglais) — il doit être entré en premier pour accéder aux membres encapsulés dans l'objet. Ensuite, on écrit un point, puis le membre auquel on veut accéder — que ce soit le nom d'une propriété, un élément d'un tableau, ou un appel à une méthode de l'objet. Par exemple :
                                                                                                          
 
-
                                                                                                          personne.age
+
                                                                                                          personne.age
 personne.interets[1]
 personne.bio()
                                                                                                          
 
@@ -107,28 +107,28 @@ personne.bio()
                                                                                                          
 
 
                                                                                                          Il est même possible de donner un autre objet comme valeur d'un membre de l'objet. Par exemple, on peut essayer de changer la propriété nom du membre et la faire passer de
                                                                                                          
 
-
                                                                                                          nom: ['Jean', 'Martin'],
                                                                                                          
+
                                                                                                          nom: ['Jean', 'Martin'],
                                                                                                          
 
 
                                                                                                          à
                                                                                                          
 
-
                                                                                                          nom : {
+
                                                                                                          nom : {
   prenom: 'Jean',
   nomFamille: 'Martin'
 },
                                                                                                          
 
 
                                                                                                          Ici, nous avons bien créé un sous-espace de noms. Ça a l'air compliqué, mais ça ne l'est pas. Pour accéder à ces élements, il suffit de chaîner une étape de plus avec un autre point. Essayez ceci :
                                                                                                          
 
-
                                                                                                          personne.nom.prenom
+
                                                                                                          personne.nom.prenom
 personne.nom.nomFamille
                                                                                                          
 
 
                                                                                                          Important : à partir de maintenant, vous allez aussi devoir reprendre votre code et modifier toutes les occurrences de :
                                                                                                          
 
-
                                                                                                          nom[0]
+
                                                                                                          nom[0]
 nom[1]
                                                                                                          
 
 
                                                                                                          en
                                                                                                          
 
-
                                                                                                          nom.prenom
+
                                                                                                          nom.prenom
 nom.nomFamille
                                                                                                          
 
 
                                                                                                          sinon vos méthodes ne fonctionneront plus.
                                                                                                          
@@ -137,12 +137,12 @@ nom.nomFamille
                                                                                                          
 
 
                                                                                                          Il y a une autre façon d'accéder aux membres de l'objet : la notation avec les crochets. Plutôt que d'utiliser ceci :
                                                                                                          
 
-
                                                                                                          personne.age
+
                                                                                                          personne.age
 personne.nom.prenom
                                                                                                          
 
 
                                                                                                          Vous pouvez utiliser :
                                                                                                          
 
-
                                                                                                          personne['age']
+
                                                                                                          personne['age']
 personne['nom']['prenom']
                                                                                                          
 
 
                                                                                                          Cela ressemble beaucoup à la façon d'accéder aux éléments d'un tableau et c'est bien la même chose  — au lieu d'utiliser un indice numérique pour sélectionner un élément, on utilise le nom associé à chaque valeur d'un membre. Ce n'est pas pour rien que les objets sont parfois appelés tableaux associatifs : ils associent des chaînes de caractères (les noms des membres) à des valeurs, de la même façon que les tableaux associent des nombres à des valeurs.
                                                                                                          
@@ -151,42 +151,42 @@ personne['nom']['prenom']
                                                                                                          
 
 
                                                                                                          Jusqu'ici, nous avons vu comment accéder aux membres d'un objet. Vous pouvez aussi modifier la valeur d'un membre de l'objet en déclarant simplement le membre que vous souhaitez modifier(en utilisant la notation avec le point ou par crochet), comme ceci :
                                                                                                          
 
-
                                                                                                          personne.age = 45
+
                                                                                                          personne.age = 45
 personne['nom']['nomFamille'] = 'Rabuchon'
                                                                                                          
 
 
                                                                                                          Essayez de saisir ces deux lignes précédentes, puis accédez à nouveau aux membres pour voir ce qui a changé :
                                                                                                          
 
-
                                                                                                          personne.age
+
                                                                                                          personne.age
 personne['nom']['nomFamille']
                                                                                                          
 
 
                                                                                                          Définir les membres ne s'arrête pas à mettre à jour la valeur de propriétés ou méthodes existantes; vous pouvez aussi créer de nouveaux membres. Essayez ceci :
                                                                                                          
 
-
                                                                                                          personne['yeux'] = 'noisette'
+
                                                                                                          personne['yeux'] = 'noisette'
 personne.auRevoir = function() { alert("Bye bye tout le monde !"); }
                                                                                                          
 
 
                                                                                                          Vous pouvez maintenant tester vos nouveaux membres :
                                                                                                          
 
-
                                                                                                          personne['yeux']
+
                                                                                                          personne['yeux']
 personne.auRevoir()
                                                                                                          
 
 
                                                                                                          Un des aspects pratiques de la notation par crochet est qu'elle peut être utilisée pour définir dynamiquement les valeurs des membres, mais aussi pour définir les noms. Imaginons que nous voulions que les utilisateurs puissent saisir des types de valeurs personnalisées pour les données des personnes, en entrant le nom du membre et sa valeur dans deux champs input. On pourrait avoir ses valeurs comme ceci :
                                                                                                          
 
-
                                                                                                          var monNomDeDonnee = nomInput.value
+
                                                                                                          var monNomDeDonnee = nomInput.value
 var maValeurDeDonnee = valeurNom.value
                                                                                                          
 
 
                                                                                                          On peut alors ajouter le nom et la valeur du nouveau membre de l'objet personne comme ceci :
                                                                                                          
 
-
                                                                                                          personne[monNomDeDonnee] = maValeurDeDonnee
                                                                                                          
+
                                                                                                          personne[monNomDeDonnee] = maValeurDeDonnee
                                                                                                          
 
 
                                                                                                          Pour le tester, essayez d'ajouter les lignes ci-dessous dans votre code, juste après le crochet fermante de l'objet personne :
                                                                                                          
 
-
                                                                                                          var monNomDeDonnee = 'hauteur'
+
                                                                                                          var monNomDeDonnee = 'hauteur'
 var maValeurDeDonnee = '1.75m'
 personne[monNomDeDonnee] = maValeurDeDonnee
                                                                                                          
 
 
                                                                                                          Sauvegardez, rafraîchissez et entrez le texte suivant dans le champ de saisie (l'élément input) :
                                                                                                          
 
-
                                                                                                          personne.hauteur
                                                                                                          
+
                                                                                                          personne.hauteur
                                                                                                          
 
 
                                                                                                          Nous n'aurions pas pu construire ce membre avec la notation avec un point, car celle-ci n'accepte qu'un nom et pas une variable pointant vers un nom.
                                                                                                          
 
@@ -194,7 +194,7 @@ personne[monNomDeDonnee] = maValeurDeDonnee
                                                                                                          
 
 
                                                                                                          Vous avez dû remarquer quelque chose d'un peu étrange dans vos méthodes. Celle-ci, par exemple :
                                                                                                          
 
-
                                                                                                          salutation: function() {
+
                                                                                                          salutation: function() {
   alert('Bonjour! Je suis ' + this.nom.prenom + '.');
 }
                                                                                                          
 
@@ -202,7 +202,7 @@ personne[monNomDeDonnee] = maValeurDeDonnee
                                                                                                          
 
 
                                                                                                          Essayons d'illustrer nos propos par une paire d'objet personne simplifiée :
                                                                                                          
 
-
                                                                                                          var personne1 = {
+
                                                                                                          var personne1 = {
   nom: 'Christophe',
   salutation: function() {
     alert('Bonjour ! Je suis ' + this.nom + '.');
@@ -224,13 +224,13 @@ var personne2 = {
 
 
                                                                                                          Ainsi, quand vous utilisez une méthode comme :
                                                                                                          
 
-
                                                                                                          maChaineDeCaracteres.split(',');
                                                                                                          
+
                                                                                                          maChaineDeCaracteres.split(',');
                                                                                                          
 
 
                                                                                                          Vous utilisez une méthode disponible dans une instance du type {{jsxref("String")}}. Dès que vous créez une chaîne de caractères dans votre code, cette chaîne est automatiquement créée comme une instance de String et possède donc plusieurs méthodes/propriétés communes.
                                                                                                          
 
 
                                                                                                          Quand vous accédez au DOM (Document Object Model ou « modèle objet du document ») avec document et des lignes telles que :
                                                                                                          
 
-
                                                                                                          var monDiv = document.createElement('div');
+
                                                                                                          var monDiv = document.createElement('div');
 var maVideo = document.querySelector('video');
                                                                                                          
 
 
                                                                                                          Vous utilisez une méthode disponible dans l'instance de la classe {{domxref("Document")}}. Pour chaque page web chargée, une instance de Document est créée, appelée document et qui représente la structure entière de la page, son contenu et d'autres caractéristiques telles que son URL. Encore une fois, cela signifie qu'elle possède plusieurs méthodes/propriétés communes.
                                                                                                          
@@ -239,12 +239,12 @@ var maVideo = document.querySelector('video');
                                                                                                          
 
 
                                                                                                          On notera que les objets/API natifs ne créent pas toujours automatiquement des instances d'objet. Par exemple, l'API Notifications — qui permet aux navigateurs modernes de déclencher leurs propres notifications — vous demande d'instancier vous-même une nouvelle instance d'objet en utilisant le constructeur pour chaque notification que vous souhaitez lancer. Essayez d'entrer le code ci-dessous dans la console JavaScript :
                                                                                                          
 
-
                                                                                                          var maNotification = new Notification('Bonjour !');
                                                                                                          
+
                                                                                                          var maNotification = new Notification('Bonjour !');
                                                                                                          
 
 
                                                                                                          Nous verrons les constructeurs dans un prochain article.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Note : On peut voir le mode de communication des objets comme un envoi de message. Quand un objet a besoin d'un autre pour faire une action, souvent il va envoyer un message à un autre objet via l'une de ses méthode et attendre une réponse, qui retournera une valeur.
                                                                                                          
+
                                                                                                          Note : On peut voir le mode de communication des objets comme un envoi de message. Quand un objet a besoin d'un autre pour faire une action, souvent il va envoyer un message à un autre objet via l'une de ses méthode et attendre une réponse, qui retournera une valeur.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Résumé
                                                                                                          
diff --git a/files/fr/learn/javascript/objects/index.html b/files/fr/learn/javascript/objects/index.html
index c388ee3b62..5c7aed54cd 100644
--- a/files/fr/learn/javascript/objects/index.html
+++ b/files/fr/learn/javascript/objects/index.html
@@ -18,52 +18,52 @@ translation_of: Learn/JavaScript/Objects
 
                                                                                                          {{PreviousNext("Apprendre/JavaScript/Building_blocks", "Learn/JavaScript/Objects/Basics")}}
                                                                                                          
 
 
-
                                                                                                          En JavaScript, la plupart des choses sont des objets, des éléments du cœur de JavaScript, comme les chaînes de caractères et les tableaux, aux interfaces de programmation (APIs) des navigateurs construites sur la base de JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions liées et des variables au sein de paquets efficaces, et se comportant comme des conteneurs de données. Il est important de comprendre la nature orientée objet du JavaScript si vous souhaitez aller loin dans votre connaissance du langage, aussi, avons-nous fourni ce module afin de vous aider. Ici, nous enseignons la théorie de l’objet et sa syntaxe en détail, ensuite, ce sera à vous de voir comment vous souhaitez créer vos propres objets.     
                                                                                                          
+
                                                                                                          En JavaScript, la plupart des choses sont des objets, des éléments du cœur de JavaScript, comme les chaînes de caractères et les tableaux, aux interfaces de programmation (APIs) des navigateurs construites sur la base de JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions liées et des variables au sein de paquets efficaces, et se comportant comme des conteneurs de données. Il est important de comprendre la nature orientée objet du JavaScript si vous souhaitez aller loin dans votre connaissance du langage, aussi, avons-nous fourni ce module afin de vous aider. Ici, nous enseignons la théorie de l’objet et sa syntaxe en détail, ensuite, ce sera à vous de voir comment vous souhaitez créer vos propres objets.     
                                                                                                          
 
 
                                                                                                          Prérequis
                                                                                                          
 
-
                                                                                                          Avant de commencer ce module, vous devriez avoir quelques familiarités avec le HTML et le CSS. Il serait raisonnable de travailler sur les modules Introduction au HTML et Introduction au CSS avant de commencer avec le JavaScript.
                                                                                                          
+
                                                                                                          Avant de commencer ce module, vous devriez avoir quelques familiarités avec le HTML et le CSS. Il serait raisonnable de travailler sur les modules Introduction au HTML et Introduction au CSS avant de commencer avec le JavaScript.
                                                                                                          
 
-
                                                                                                          Vous devriez également être familiarisé avec les bases du JavaScript avant de poursuivre en détails avec les objets JavaScript. Avant de commencer ce module, travaillez sur Premiers pas avec JavaScript et Les blocs de construction en JavaScript.
                                                                                                          
+
                                                                                                          Vous devriez également être familiarisé avec les bases du JavaScript avant de poursuivre en détails avec les objets JavaScript. Avant de commencer ce module, travaillez sur Premiers pas avec JavaScript et Les blocs de construction en JavaScript.
                                                                                                          
 
 
                                                                                                          
-
                                                                                                          Remarque: Si vous travaillez sur un ordinateur, une tablette ou un autre appareil où vous n’avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer les (la plupart des) exemples de code grâce à un programme en ligne comme JSBin ou Thimble.
                                                                                                          
+
                                                                                                          Note : Si vous travaillez sur un ordinateur, une tablette ou un autre appareil où vous n’avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer les (la plupart des) exemples de code grâce à un programme en ligne comme JSBin ou Thimble.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Guides
                                                                                                          
 
 
                                                                                                          
- 
                                                                                                          Les bases de JavaScript orienté objet
                                                                                                          
+ 
                                                                                                          Les bases de JavaScript orienté objet
                                                                                                          
  
                                                                                                          Dans le premier article concernant les objets JavaScript, nous découvrirons la syntaxe fondamentale d’un objet JavaScript, et nous revisiterons certaines fonctionnalités du JavaScript que nous avions vues précédemment dans le cours, en insistant sur le fait que bon nombre d'éléments précedemment abordés sont en fait des objets.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          
- 
                                                                                                          JavaScript orienté objet pour les débutants 
                                                                                                          
+ 
                                                                                                          JavaScript orienté objet pour les débutants
                                                                                                          
  
                                                                                                          
- 
                                                                                                          Après avoir vu les notions de base, nous nous pencherons sur le JavaScript orienté objet (JSOO) — cet article présente une vue basique de la théorie de la programmation orientée objet (POO), et explore ensuite comment le JavaScript émule les classes d’objet via les fonctions des constructeurs et comment créer des instances d’objet.
                                                                                                          
+ 
                                                                                                          Après avoir vu les notions de base, nous nous pencherons sur le JavaScript orienté objet (JSOO) — cet article présente une vue basique de la théorie de la programmation orientée objet (POO), et explore ensuite comment le JavaScript émule les classes d’objet via les fonctions des constructeurs et comment créer des instances d’objet.
                                                                                                          
  
                                                                                                          
- 
                                                                                                          Objets prototypes
                                                                                                          
+ 
                                                                                                          Objets prototypes
                                                                                                          
  
                                                                                                          
- 
                                                                                                          Les prototypes sont des mécanismes par lesquels les objets JavaScript héritent les fonctionnalités d’un autre objet, et ils fonctionnent différemment des mécanismes d’héritage des langages classiques de programmation orientée objet. Dans cet article, nous explorons cette différence, expliquant comment les chaînes de prototypes fonctionnent et jetant un regard sur comment la propriété prototype peut être utilisée pour ajouter des méthodes aux constructeurs existants.
                                                                                                          
+ 
                                                                                                          Les prototypes sont des mécanismes par lesquels les objets JavaScript héritent les fonctionnalités d’un autre objet, et ils fonctionnent différemment des mécanismes d’héritage des langages classiques de programmation orientée objet. Dans cet article, nous explorons cette différence, expliquant comment les chaînes de prototypes fonctionnent et jetant un regard sur comment la propriété prototype peut être utilisée pour ajouter des méthodes aux constructeurs existants.
                                                                                                          
  
                                                                                                          
- 
                                                                                                          L’héritage au sein de JavaScript
                                                                                                          
+ 
                                                                                                          L’héritage au sein de JavaScript
                                                                                                          
  
                                                                                                          
- 
                                                                                                          Avec la plupart des redoutables détails du JSOO maintenant expliqués, cet article montre comment créer les classes (constructeurs) d’objet “enfant” qui héritent des fonctionnalités de leur classes “parents”. De plus, nous présentons certains conseils sur où et comment utiliser le JSOO.
                                                                                                          
+ 
                                                                                                          Avec la plupart des redoutables détails du JSOO maintenant expliqués, cet article montre comment créer les classes (constructeurs) d’objet “enfant” qui héritent des fonctionnalités de leur classes “parents”. De plus, nous présentons certains conseils sur où et comment utiliser le JSOO.
                                                                                                          
  
                                                                                                          
- 
                                                                                                          Manipuler des données JSON
                                                                                                          
+ 
                                                                                                          Manipuler des données JSON
                                                                                                          
  
                                                                                                          
- 
                                                                                                          JavaScript Object Notation (JSON) est un format standard pour la représentation de données structurées comme les objets JavaScript, qui est communément utilisé pour représenter et transmettre les données sur les sites web (ex. : Envoyer certaines données du serveur au client, afin d’être affichées sur une page web). Vous le rencontrerez assez souvent. Aussi, dans cet article, nous vous donnons tout ce dont vous avez besoin pour travailler avec le format JSON utilisant le JavaScript, incluant l’accès aux éléments des données dans un objet JSON et l’écriture de votre propre JSON.
                                                                                                          
+ 
                                                                                                          JavaScript Object Notation (JSON) est un format standard pour la représentation de données structurées comme les objets JavaScript, qui est communément utilisé pour représenter et transmettre les données sur les sites web (ex. : Envoyer certaines données du serveur au client, afin d’être affichées sur une page web). Vous le rencontrerez assez souvent. Aussi, dans cet article, nous vous donnons tout ce dont vous avez besoin pour travailler avec le format JSON utilisant le JavaScript, incluant l’accès aux éléments des données dans un objet JSON et l’écriture de votre propre JSON.
                                                                                                          
  
                                                                                                          
- 
                                                                                                          Pratiques sur la construction d’objet
                                                                                                          
+ 
                                                                                                          Pratiques sur la construction d’objet
                                                                                                          
  
                                                                                                          
- 
                                                                                                          Dans l’article précédent nous avons fait le tour de l’essentiel de la théorie de l’objet JavaScript et les détails de sa syntaxe, vous donnant ainsi une solide base sur laquelle débuter. Dans cet article nous plongeons dans un exercice, vous donnant plus de pratique dans la construction d’objets JavaScript personnalisés, qui produisent quelque chose d’amusant et de plus coloré — quelques balles colorées et bondissantes.
                                                                                                          
+ 
                                                                                                          Dans l’article précédent nous avons fait le tour de l’essentiel de la théorie de l’objet JavaScript et les détails de sa syntaxe, vous donnant ainsi une solide base sur laquelle débuter. Dans cet article nous plongeons dans un exercice, vous donnant plus de pratique dans la construction d’objets JavaScript personnalisés, qui produisent quelque chose d’amusant et de plus coloré — quelques balles colorées et bondissantes.
                                                                                                          
  
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Auto-évaluation
                                                                                                          
 
 
                                                                                                          
- 
                                                                                                          Ajoutez des fonctionnalités  à notre  démo des ballons bondissants
                                                                                                          
+ 
                                                                                                          Ajoutez des fonctionnalités  à notre  démo des ballons bondissants
                                                                                                          
  
                                                                                                          Dans cette évaluation, vous devrez utiliser la démo des balles bondissantes de l’article précédent comme un point de départ et y ajouter quelques nouvelles et intéressantes fonctionnalités.
                                                                                                          
 
                                                                                                          
 
diff --git a/files/fr/learn/javascript/objects/inheritance/index.html b/files/fr/learn/javascript/objects/inheritance/index.html
index b54af2f529..ededf06c2e 100644
--- a/files/fr/learn/javascript/objects/inheritance/index.html
+++ b/files/fr/learn/javascript/objects/inheritance/index.html
@@ -106,19 +106,19 @@ original_slug: Learn/JavaScript/Objects/Heritage
 
 
                                                                                                          Notez que si les valeurs des propriétés du constructeur dont vous héritez ne proviennent pas de paramètres, vous n'avez nullement besoin de les specifier comme arguments additionnels dans l'appel de la fonction call(). Donc, par exemple, si vous avez quelque chose d'aussi simple que ceci :
                                                                                                          
 
-
                                                                                                          function Brick() {
+
                                                                                                          function Brick() {
   this.width = 10;
   this.height = 20;
-}
                                                                                                          
+}
                                                                                                          
 
 
                                                                                                          Vous pouvez hériter des propriétés width et height en procédant comme ceci (Mais  également en suivant bien sûr les différentes étapes décrites ci dessous) :
                                                                                                          
 
-
                                                                                                          function BlueGlassBrick() {
+
                                                                                                          function BlueGlassBrick() {
   Brick.call(this);
 
   this.opacity = 0.5;
   this.color = 'blue';
-}
                                                                                                          
+}
                                                                                                          
 
 
                                                                                                          Notez que nous n'avons spécifié que this au sein de call() — Aucun autre paramètre n'est requis puisque nous n'héritons ici d'aucune propriété provenant de la classe parente qui soit spécifiée via paramètres.  
                                                                                                          
 
@@ -187,7 +187,7 @@ professeur1.saluer();Ffa
                                                                                                          
 
 
                                                                                                          La méthode que nous avons détaillée ici n'est pas la seule permettant de mettre en place l'héritage de classes en JavaScript, mais elle fonctionne parfaitement et elle vous permet d'avoir une bonne idée de comment implémenter l'héritage en JavaScript.
                                                                                                          
 
-
                                                                                                          Vous pourriez également être intéressé par certaines des nouvelles fonctionnalités de {{glossary("ECMAScript")}} qui nous permettent de mettre en place l'héritage d'une façon beaucoup plus élégante en JavaScript (Voir Classes). Nous ne les avons pas développées ici parce qu'elles ne sont actuellement pas supportées par tous les navigateurs. Toutes les autres constructions dont nous avons discuté dans cette série d'articles sont supportées par IE9 et les versions moins récentes et il existe des méthodes qui prennent plus en  charge les navigateurs moins récents.
                                                                                                          
+
                                                                                                          Vous pourriez également être intéressé par certaines des nouvelles fonctionnalités de {{glossary("ECMAScript")}} qui nous permettent de mettre en place l'héritage d'une façon beaucoup plus élégante en JavaScript (Voir Classes). Nous ne les avons pas développées ici parce qu'elles ne sont actuellement pas supportées par tous les navigateurs. Toutes les autres constructions dont nous avons discuté dans cette série d'articles sont supportées par IE9 et les versions moins récentes et il existe des méthodes qui prennent plus en  charge les navigateurs moins récents.
                                                                                                          
 
 
                                                                                                          Un moyen habituel est d'utiliser les librairies JavaScript — La plupart des options populaires ont une sélection de fonctionnalités disponibles pour réaliser l'héritage plus facilement et plus rapidement.
                                                                                                          
 
@@ -195,7 +195,7 @@ professeur1.saluer();Ffa
                                                                                                          
 
 
                                                                                                          Un exercice plus complexe.
                                                                                                          
 
-
                                                                                                          Dans notre section sur la programmation orientée objet nous avons également inclus  une classe Etudiant comme un concept qui hérite de toutes les fonctionnalités de la classe Personne, et qui a également une méthode saluer() differente de celle de Personne qui est beaucoup moins formelle que la méthode saluer() de Professeur(). Jetez un oeil à ce à quoi ressemble la méthode saluer() de la classe Etudiant dans cette section et essayez d'implémenter votre propre constructeur Etudiant() qui hérite de toutes les fonctionnalités de Personne() et la fonction saluer() différente.
                                                                                                          
+
                                                                                                          Dans notre section sur la programmation orientée objet nous avons également inclus  une classe Etudiant comme un concept qui hérite de toutes les fonctionnalités de la classe Personne, et qui a également une méthode saluer() differente de celle de Personne qui est beaucoup moins formelle que la méthode saluer() de Professeur(). Jetez un oeil à ce à quoi ressemble la méthode saluer() de la classe Etudiant dans cette section et essayez d'implémenter votre propre constructeur Etudiant() qui hérite de toutes les fonctionnalités de Personne() et la fonction saluer() différente.
                                                                                                          
 
 
                                                                                                          Note: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre version finalisée (Ou regarder tourner notre demo en ligne).
                                                                                                          
 
@@ -205,7 +205,7 @@ professeur1.saluer();Ffa
                                                                                                          
 
 
                                                                                                            
  
                                                                                                          1. Celles définies au sein d'un constructeur et passées en paramètres aux instances de l'objet. Celles là ne sont pas difficiles à repérer — Dans votre propre code personnalisé, elles sont les membres définis en utilisant les lignes comme this.x = x ; Dans les codes préconstruits propres aux navigateurs, ils sont les membres seulement accessibles aux instances d'objet (usuellement créés en appelant un constructeur via l'utilisation du mot clé new, exemple : var myInstance = new myConstructor()).
                                                                                                            2. 
- 
                                                                                                          2. Celles définies directement sur les constructeurs eux mêmes et accessibles uniquement sur les constructeurs. Celles là sont communément présentes uniquement dans les objets préconstruits des navigateurs et sont reconnus par le fait d'être directement chaînées sur un constructeur et non sur une instance. Par exemple, Object.keys().
                                                                                                            3. 
+ 
                                                                                                          3. Celles définies directement sur les constructeurs eux mêmes et accessibles uniquement sur les constructeurs. Celles là sont communément présentes uniquement dans les objets préconstruits des navigateurs et sont reconnus par le fait d'être directement chaînées sur un constructeur et non sur une instance. Par exemple, Object.keys().
                                                                                                            4. 
  
                                                                                                          4. Celles définies sur un prototype de constructeur qui sont héritées par toutes les instances des classes d'objet. Celles là incluent n'importe quel membre défini sur un prototype de constructeur, exemple : myConstructor.prototype.x().
                                                                                                            5. 
 
                                                                                                          
 
@@ -246,13 +246,13 @@ professeur1.saluer();Ffa
                                                                                                          
 
                                                                                                          Dans ce module
                                                                                                          
 
 
 
 
                                                                                                           
                                                                                                          
diff --git a/files/fr/learn/javascript/objects/json/index.html b/files/fr/learn/javascript/objects/json/index.html
index b06c79006d..8fa5a7e935 100644
--- a/files/fr/learn/javascript/objects/json/index.html
+++ b/files/fr/learn/javascript/objects/json/index.html
@@ -16,13 +16,13 @@ translation_of: Learn/JavaScript/Objects/JSON
 
 
                                                                                                          {{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
                                                                                                          
 
-
                                                                                                          Le JavaScript Object Notation (JSON) est un format standard utilisé pour représenter des données structurées de façon semblable aux objets Javascript. Il est habituellement utilisé pour structurer et transmettre des données sur des sites web (par exemple, envoyer des données depuis un serveur vers un client afin de les afficher sur une page web ou vice versa). Comme cette notation est extrêmement courante, cet article a pour but de vous donner les connaissances nécessaires pour travailler avec JSON en JavaScript, vous apprendre à analyser la syntaxe du JSON afin d'en extraire des données et écrire vos propres objets JSON.
                                                                                                          
+
                                                                                                          Le JavaScript Object Notation (JSON) est un format standard utilisé pour représenter des données structurées de façon semblable aux objets Javascript. Il est habituellement utilisé pour structurer et transmettre des données sur des sites web (par exemple, envoyer des données depuis un serveur vers un client afin de les afficher sur une page web ou vice versa). Comme cette notation est extrêmement courante, cet article a pour but de vous donner les connaissances nécessaires pour travailler avec JSON en JavaScript, vous apprendre à analyser la syntaxe du JSON afin d'en extraire des données et écrire vos propres objets JSON.
                                                                                                          
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :
 
 
 
 
                                                                                                          
+
                                                                                                          
-   
+   
@@ -35,10 +35,10 @@ translation_of: Learn/JavaScript/Objects/JSON
 
 
                                                                                                          {{glossary("JSON")}} est un format de données semblable à la syntaxe des objets JavaScript, qui a été popularisé par Douglas Crockford. Malgré sa syntaxe très similaire à celle des objets littéraux JavaScript, JSON peut être utilisé indépendamment de ce langage et ainsi, de nombreux autres langages de programmation disposent de fonctionnalités permettant d'analyser la syntaxe du JSON et d'en générer.
                                                                                                          
 
-
                                                                                                          Le JSON se présente sous la forme  d'une chaîne de caractères —utile lorsque vous souhaitez transmettre les données sur un réseau. Il a donc besoin d'être converti en un objet JavaScript natif lorsque vous souhaitez accéder aux données. Ce n'est pas vraiment un souci puisque le JavaScript fournit un objet global JSON disposant des méthodes pour assurer la conversion entre les deux.
                                                                                                          
+
                                                                                                          Le JSON se présente sous la forme  d'une chaîne de caractères —utile lorsque vous souhaitez transmettre les données sur un réseau. Il a donc besoin d'être converti en un objet JavaScript natif lorsque vous souhaitez accéder aux données. Ce n'est pas vraiment un souci puisque le JavaScript fournit un objet global JSON disposant des méthodes pour assurer la conversion entre les deux.
                                                                                                          
-
                                                                                                          Note : Convertir une chaîne de caractères en un objet natif se nomme analyse syntaxique (parsage) tandis que le contraire porte le nom  de la linéarisation (stringification).
                                                                                                          
+
                                                                                                          Note : Convertir une chaîne de caractères en un objet natif se nomme analyse syntaxique (parsage) tandis que le contraire porte le nom  de la linéarisation (stringification).
                                                                                                          
 
                                                                                                          Un objet JSON peut être stocké dans son propre fichier qui se présente simplement sous la forme d'un fichier texte avec l'extension .json et le {{glossary("MIME type")}} application/json.
                                                                                                          
@@ -107,7 +107,7 @@ superHeroes['active']
                                                                                                          
-
                                                                                                          Note : L'objet JSON vu ci-dessus est disponible au sein d'une variable dans notre exemple JSONTest.html (voir le code source). Essayez de le charger et d'accéder aux données en utilisant la console Javascript de votre navigateur.
                                                                                                          
+
                                                                                                          Note : L'objet JSON vu ci-dessus est disponible au sein d'une variable dans notre exemple JSONTest.html (voir le code source). Essayez de le charger et d'accéder aux données en utilisant la console Javascript de votre navigateur.
                                                                                                          
 
                                                                                                          Des tableaux en tant que JSON
                                                                                                          
@@ -172,7 +172,7 @@ var section = document.querySelector('section');
                                                                                                          Nous souhaitons les récupérer et, après quelques manipulations du DOM, les afficher comme ceci :
                                                                                                          
 
-
                                                                                                          
+
                                                                                                          Chargeons notre JSON
                                                                                                          
 
@@ -185,17 +185,17 @@ var section = document.querySelector('section');
                                                                                                        32. Afin de créer une requête, nous avons besoin d'instancier un nouvel objet XMLHttpRequest à partir de son constructeur en utilisant le mot clé new. Ajouter la ligne suivante à votre script :
   
                                                                                                          var request = new XMLHttpRequest();
                                                                                                          
  
                                                                                                          33. 
- 
                                                                                                        33. Maintenant, nous avons besoin d'ouvrir une nouvelle requête grâce à la méthode open(). Ajoutez la ligne suivante :
+ 
                                                                                                        34. Maintenant, nous avons besoin d'ouvrir une nouvelle requête grâce à la méthode open(). Ajoutez la ligne suivante :
   
                                                                                                          request.open('GET', requestURL);
                                                                                                          
 
   
                                                                                                          Cette méthode prend au moins deux paramètres — il y a d'autres paramètres optionnels disponibles.  Deux suffiront pour notre exemple :
                                                                                                          
 
   
                                                                                                            
-   
                                                                                                          • La méthode HTTP à utiliser sur le réseau pour notre requête. Dans notre cas, la méthode GET est appropriée dans la mesure où nous voulons simplement récupérer quelques données.
                                                                                                            • 
+   
                                                                                                          • La méthode HTTP à utiliser sur le réseau pour notre requête. Dans notre cas, la méthode GET est appropriée dans la mesure où nous voulons simplement récupérer quelques données.
                                                                                                            • 
    
                                                                                                          • L'URL où adresser notre requête — il s'agit de l'URL du fichier JSON dont nous parlions tout à l'heure.
                                                                                                            • 
   
                                                                                                          
  
                                                                                                          35. 
- 
                                                                                                        35. Ensuite, ajoutez les deux lignes suivantes — ici, nous attribuons la valeur 'json' à  responseType, signalant ainsi au serveur que nous attendons une réponse au format JSON. Puis, nous envoyons notre requête à l'aide de la méthode send() :
+ 
                                                                                                        36. Ensuite, ajoutez les deux lignes suivantes — ici, nous attribuons la valeur 'json' à  responseType, signalant ainsi au serveur que nous attendons une réponse au format JSON. Puis, nous envoyons notre requête à l'aide de la méthode send() :
   
                                                                                                          request.responseType = 'json';
 request.send();
                                                                                                          
  
                                                                                                          37. 
@@ -208,9 +208,9 @@ request.send();
 
-
                                                                                                          Ici, nous stockons la réponse à notre requête (disponible au travers de la propriété response) dans la variable superHeroes ; cette variable contiendra désormais l'objet JavaScript basé sur le JSON ! Nous passerons ensuite cet objet en paramètre à deux fonctions — la première remplira le <header> avec les données correspondantes tandis que la seconde créera une carte d'identité pour chaque héros de l'équipe et l'ajoutera dans la <section>.
                                                                                                          
+
                                                                                                          Ici, nous stockons la réponse à notre requête (disponible au travers de la propriété response) dans la variable superHeroes ; cette variable contiendra désormais l'objet JavaScript basé sur le JSON ! Nous passerons ensuite cet objet en paramètre à deux fonctions — la première remplira le <header> avec les données correspondantes tandis que la seconde créera une carte d'identité pour chaque héros de l'équipe et l'ajoutera dans la <section>.
                                                                                                          
 
-
                                                                                                          Nous avons encapsulé ce code dans un gestionnaire d'évènements qui s'exécutera quand l'évènement load sera déclenché sur l'objet request (voir onload) — simplement parce que l'évènement load est déclenché quand une réponse a été renvoyée avec succès ; en procédant de la sorte, nous serons certains que la propriété request.response sera disponible au moment où nous essayerons d'en faire quelque chose.
                                                                                                          
+
                                                                                                          Nous avons encapsulé ce code dans un gestionnaire d'évènements qui s'exécutera quand l'évènement load sera déclenché sur l'objet request (voir onload) — simplement parce que l'évènement load est déclenché quand une réponse a été renvoyée avec succès ; en procédant de la sorte, nous serons certains que la propriété request.response sera disponible au moment où nous essayerons d'en faire quelque chose.
                                                                                                          Remplissage de l'en-tête
                                                                                                          
 
@@ -226,7 +226,7 @@ request.send();
   header.appendChild(myPara);
 }
 
-
                                                                                                          Nous avons appelé le paramètre de cette fonction jsonObj  afin de garder en tête que cet objet JavaScript provient du JSON. Ici, nous créons tout d'abord un élément {{HTMLElement("h1")}} à l'aide de createElement(), nous fixons son textContent à la valeur de la propriété squadName de l'objet, puis nous l'ajoutons à l'en-tête en utilisant appendChild(). Ensuite, nous faisons quelque chose de relativement similaire avec un élément paragraphe : nous le créons, fixons son contenu et l'ajoutons à l'en-tête. La seule différence est que pour son contenu, nous avons concaténé la chaîne de caractère homeTown et la propriété formed de l'objet.
                                                                                                          
+
                                                                                                          Nous avons appelé le paramètre de cette fonction jsonObj  afin de garder en tête que cet objet JavaScript provient du JSON. Ici, nous créons tout d'abord un élément {{HTMLElement("h1")}} à l'aide de createElement(), nous fixons son textContent à la valeur de la propriété squadName de l'objet, puis nous l'ajoutons à l'en-tête en utilisant appendChild(). Ensuite, nous faisons quelque chose de relativement similaire avec un élément paragraphe : nous le créons, fixons son contenu et l'ajoutons à l'en-tête. La seule différence est que pour son contenu, nous avons concaténé la chaîne de caractère homeTown et la propriété formed de l'objet.
                                                                                                          Création des fiches des héros
                                                                                                          
 
@@ -279,11 +279,11 @@ request.send();
                                                                                                          
-
                                                                                                          Note : Si vous ne parvenez pas à faire fonctionner l'exemple, consultez notre code source heroes-finished.html (ou regardez-le en action.)
                                                                                                          
+
                                                                                                          Note : Si vous ne parvenez pas à faire fonctionner l'exemple, consultez notre code source heroes-finished.html (ou regardez-le en action.)
                                                                                                          
 
                                                                                                          
-
                                                                                                          Note : Si vous comprenez difficilement la notation avec un point/une accolade utilisée pour accéder au JSON, ouvrez le fichier superheroes.json dans un nouvel onglet ou dans votre éditeur de texte et consultez-le pendant la lecture de notre code Javascript. Vous pouvez également vous reporter à notre article Les bases du JavaScript orienté objet pour obtenir plus de détails sur la notation avec un point et avec une accolade.
                                                                                                          
+
                                                                                                          Note : Si vous comprenez difficilement la notation avec un point/une accolade utilisée pour accéder au JSON, ouvrez le fichier superheroes.json dans un nouvel onglet ou dans votre éditeur de texte et consultez-le pendant la lecture de notre code Javascript. Vous pouvez également vous reporter à notre article Les bases du JavaScript orienté objet pour obtenir plus de détails sur la notation avec un point et avec une accolade.
                                                                                                          
 
                                                                                                          Conversion entre objets et textes
                                                                                                          
@@ -295,8 +295,8 @@ request.send();
                                                                                                          Mais on n'a pas toujours cette chance — il est possible de recevoir la réponse JSON sous la forme d'une chaîne de caractères et il faut alors la convertir en objet. À l'inverse, lorsqu'on veut envoyer un objet JavaScript à travers le réseau il faut au préalable le convertir en JSON (une chaîne de caractères). Heureusement, ces deux problèmes sont tellement communs dans le développement web qu'un objet JSON interne a été ajouté aux navigateurs depuis longtemps, contenant les deux méthodes suivantes :
                                                                                                            
- 
                                                                                                          • parse() qui accepte un objet JSON sous la forme d'une chaîne de caractères en paramètre et renvoie l'objet JavaScript correspondant.
                                                                                                            • 
- 
                                                                                                          • stringify() qui accepte un objet JavaScript  en paramètre et renvoie son équivalent sous la forme d'une chaîne de caractères JSON.
                                                                                                            • 
+ 
                                                                                                          • parse() qui accepte un objet JSON sous la forme d'une chaîne de caractères en paramètre et renvoie l'objet JavaScript correspondant.
                                                                                                            • 
+ 
                                                                                                          • stringify() qui accepte un objet JavaScript  en paramètre et renvoie son équivalent sous la forme d'une chaîne de caractères JSON.
                                                                                                            • 
 
                                                                                                          Vous pouvez voir la première méthode en action dans notre exemple heroes-finished-json-parse.html (voir le code source) — C'est la même chose que pour l'exemple que nous avons écrit un peu plus tôt, à ceci près qu'on indique à la requête XHR de renvoyer la réponse en JSON sous forme de texte avant d'utiliser la méthode parse() pour la convertir en objet JavaScript. La partie du code correspondante se trouve ci-dessous :
                                                                                                          
@@ -328,10 +328,10 @@ myString
                                                                                                          Voir aussi
                                                                                                          
 
diff --git a/files/fr/learn/javascript/objects/object-oriented_js/index.html b/files/fr/learn/javascript/objects/object-oriented_js/index.html
index 1671769acb..a264d9063b 100644
--- a/files/fr/learn/javascript/objects/object-oriented_js/index.html
+++ b/files/fr/learn/javascript/objects/object-oriented_js/index.html
@@ -16,9 +16,9 @@ original_slug: Learn/JavaScript/Objects/JS_orienté-objet
 
 
                                                                                                          {{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
                                                                                                          
 
-
                                                                                                          Après avoir parcouru les fondamentaux, nous allons aborder en détail le JavaScript orienté objet (JSOO). Cet article présente une approche simple de la programmation orientée objet (POO) et détaille comment JavaScript émule des classes objet au travers des méthodes constructeur et comment instancier ces objets.
                                                                                                          
+
                                                                                                          Après avoir parcouru les fondamentaux, nous allons aborder en détail le JavaScript orienté objet (JSOO). Cet article présente une approche simple de la programmation orientée objet (POO) et détaille comment JavaScript émule des classes objet au travers des méthodes constructeur et comment instancier ces objets.
                                                                                                          
 
-
                                                                                                          
  
   
                                                                                                          
    Prérequis :Vocabulaire de base d'informatique, connaissances de base en HTML et CSS, connaissances de base en JavaScript (voir Premiers pas et Les blocs) et en Javascript orienté objets (voir Introduction aux objets).Vocabulaire de base d'informatique, connaissances de base en HTML et CSS, connaissances de base en JavaScript (voir Premiers pas et Les blocs) et en Javascript orienté objets (voir Introduction aux objets).
   
                                                                                                          
   
                                                                                                          
    Objectif :
 
 
 
 
 
 
 
 
 
 
 
 
 
  
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                          
+
                                                                                                          
@@ -43,7 +43,7 @@ original_slug: Learn/JavaScript/Objects/JS_orienté-objet
 
 
                                                                                                          Pour débuter, nous pouvons réutiliser l'objet Personne que nous avons créé dans notre premier article, il définit un ensemble de données et actions d'une personne. Il existe tout un tas de choses que nous pourrions savoir au sujet d'une personne (son adresse, sa taille, sa pointure, son ADN, son numéro de passeport, ses traits particuliers significatifs… ). En l'occurrence, nous souhaitons uniquement afficher son nom, son âge, ses passions, écrire une petite introduction à son sujet en utilisant ces données et lui apprendre à se présenter. On parle alors d'abstraction : créer un modèle simplifié de quelque chose de complexe mais qui ne contient que les aspects qui nous intéressent. Il sera alors plus simple de manipuler ce modèle objet simplifié dans le cadre de notre programme.
                                                                                                          
 
-
                                                                                                          Classe Personne avec attributs élémentaires
                                                                                                          
+
                                                                                                          Classe Personne avec attributs élémentaires
                                                                                                          Dans plusieurs langages de POO, la définition d'un objet est appelé une classe (comme on le verra ci-après, JavaScript se base sur un mécanisme et une terminologie différente). En réalité ce n'est pas vraiment un objet mais plutôt un modèle qui définit les propriétés que notre objet doit avoir.
                                                                                                          
 
@@ -51,7 +51,7 @@ original_slug: Learn/JavaScript/Objects/JS_orienté-objet
 
 
                                                                                                          À partir de notre classe, nous pouvons créer des objets, on parle alors d'instancier des objets, une classe objet a alors une instance. Il s'agit d'objets qui contiennent les données et attributs définis dans une classe. À partir de notre classe Personne, nous pouvons modéliser des personnes réelles :
                                                                                                          
 
-
                                                                                                          Instantiation on a Personn Class for JS examples (fr)
                                                                                                          
+
                                                                                                          Instantiation on a Personn Class for JS examples (fr)
                                                                                                          Lorsque l'instance d'un objet est créée, on appelle la fonction constructeur de la classe pour la créer. On parle d'instanciation d'un objet — l'objet ainsi créé est instancié à partir de la classe.
                                                                                                          
 
@@ -59,17 +59,17 @@ original_slug: Learn/JavaScript/Objects/JS_orienté-objet
 
 
                                                                                                          Pour notre exemple, nous n'allons pas nous contenter de personnes génériques — nous pourrions utiliser des professeurs, des étudiants, qui sont des types un peu plus spécifiques de personnes. En POO, il est possible de créer de nouvelles classes à partir d'autres classes — ces classes filles nouvellement créées peuvent hériter des propriétés et des attributs de leur classe mère. Il est donc possible d'avoir des attributs partagés à l'ensemble des classes plutôt que de les dupliquer. Si besoin, il est possible d'ajouter des fonctions et attributs spécifiques sur chaque classe fille.
                                                                                                          
 
-
                                                                                                          Inheritance principle with French text for JS example
                                                                                                          
+
                                                                                                          Inheritance principle with French text for JS example
                                                                                                          Cela s'avère très utile puisque les étudiants et les professeurs se ressemblent sur de nombreux aspects : ils ont un nom, un genre, un âge, il est donc utile de ne définir ces attributs qu'une seule fois. Il est aussi possible de redéfinir le même attribut dans différentes classes étant donné que l'attribut appartiendra à chaque fois à un nom d'espace différent. On pourra ainsi avoir différentes formes de salutations : « Hey, je m'appelle [prénom] » pour les étudiants ( « Hey je m'appelle Sam » ) tandis que les professeurs pourront dire quelque chose d'un peu plus formel comme « Bonjour, mon nom est [Titre][Nom] et j'enseigne [matière] » par exemple « Bonjour mon nom est M. Griffiths et j'enseigne la chimie ».
                                                                                                          
-
                                                                                                          Note : On parle de polymorphisme, lorsque des objets réutilisent la même propriété,  mais c'est juste pour info, vous embêtez pas.
                                                                                                          
+
                                                                                                          Note : On parle de polymorphisme, lorsque des objets réutilisent la même propriété,  mais c'est juste pour info, vous embêtez pas.
                                                                                                          
 
                                                                                                          Une fois la classe fille créée il est alors possible de l'instancier et de créer des objets. Par exemple :
                                                                                                          
 
-
                                                                                                          Professor instantiation example for JS fr
                                                                                                          
+
                                                                                                          Professor instantiation example for JS fr
                                                                                                          Dans la suite de l'article, nous nous intéresserons à la mise en œuvre de la programmation orientée objet (POO) au sein de JavaScript.
                                                                                                          
 
@@ -80,7 +80,7 @@ original_slug: Learn/JavaScript/Objects/JS_orienté-objet
 
                                                                                                          Lorsqu'un objet est instancié à partir d'une fonction constructeur, les fonctions de la classe ne sont pas copiées directement dans l'objet comme dans la plupart des langages orientés objet (OO). En JavaScript, les fonctions sont liées grâce à une chaîne de référence appelée chaîne prototype (voir Prototypes Objet). Il ne s'agit donc pas d'une véritable instanciation au sens strict puisque JavaScript utilise un mécanisme différent pour partager des fonctionnalités entre les objets.
                                                                                                          
-
                                                                                                          Note : Ne pas être un "langage classique de POO" n'est pas nécessairement un défaut. Comme nous le mentionnions au début de l'article, la POO peut très vite devenir compliquée et JavaScript, grâce à ses différences parvient à utiliser certains concepts avancés tout en restant abordable.
                                                                                                          
+
                                                                                                          Note : Ne pas être un "langage classique de POO" n'est pas nécessairement un défaut. Comme nous le mentionnions au début de l'article, la POO peut très vite devenir compliquée et JavaScript, grâce à ses différences parvient à utiliser certains concepts avancés tout en restant abordable.
                                                                                                          
 
                                                                                                          Voyons comment créer des classes via les constructeurs et les utiliser pour instancier des objets en JavaScript. Nous allons commencer par faire une copie locale du fichier oojs.html que nous avons vu dans notre premier article sur les objets.
                                                                                                          
@@ -116,7 +116,7 @@ salva.salutation();
                                                                                                          Le constructeur est l'équivalent JavaScript d'une classe. Il possède l'ensemble des fonctionnalités d'une fonction, cependant il ne renvoie rien et ne crée pas d'objet explicitement. Il se contente de définir les propriétés et les méthodes associées. Il y a aussi l'utilisation du mot-clé this, ce mot-clé sert au sein d'une instance qui sera créée à y faire référence, ainsi l'attribut nom sera, pour l'instance, égal au nom passé en argument de la fonction constructrice, la méthode salutation() retournera elle aussi le nom passé en argument de la fonction constructrice.
                                                                                                          
-
                                                                                                          Note : Les fonctions de type constructeur commencent généralement par une majuscule. Cette convention d'écriture permet de repérer les constructeurs plus facilement dans le code.
                                                                                                          
+
                                                                                                          Note : Les fonctions de type constructeur commencent généralement par une majuscule. Cette convention d'écriture permet de repérer les constructeurs plus facilement dans le code.
                                                                                                          
 
                                                                                                          Comment pouvons-nous utiliser un constructeur ?
                                                                                                          
@@ -203,7 +203,7 @@ personne1.bio()
 // etc.
                                                                                                          
-
                                                                                                          Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez comparez votre travail avec notre version (voir oojs-class-finished.html (vous pouvez aussi jeter un œil à la démo)
                                                                                                          
+
                                                                                                          Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez comparez votre travail avec notre version (voir oojs-class-finished.html (vous pouvez aussi jeter un œil à la démo)
                                                                                                          
 
                                                                                                          Exercices
                                                                                                          
@@ -213,7 +213,7 @@ personne1.bio()
 
                                                                                                          D'autre part, il y a quelques améliorations possibles pour notre méthode bio(). En effet elle affiche systématiquement le pronom 'il', même si votre personne est une femme ou bien préfère se définir par un autre genre. De plus, la biographie n'inclut que deux passions, même s'il y en a plus dans la liste. Essayez d'améliorer cette méthode. Vous pourrez mettre votre code à l'intérieur du constructeur (vous aurez probablement besoin de quelques structures conditionnelles et d'une boucle). Réflechissez à la syntaxe des phrases qui devra s'adapter en fonction du genre et du nombre de passions listées.
                                                                                                          
-
                                                                                                          Note: Si vous êtes bloqués, nous avons mis une réponse possible sur notre dépôt GitHub (la démo) —tentez d'abord l'aventure avant d'aller regarder la réponse !
                                                                                                          
+
                                                                                                          Note : Si vous êtes bloqués, nous avons mis une réponse possible sur notre dépôt GitHub (la démo) —tentez d'abord l'aventure avant d'aller regarder la réponse !
                                                                                                          
 
                                                                                                          D'autres manières d'instancier des objets
                                                                                                          
diff --git a/files/fr/learn/javascript/objects/object_building_practice/index.html b/files/fr/learn/javascript/objects/object_building_practice/index.html
index 33cf718b63..7028077f88 100644
--- a/files/fr/learn/javascript/objects/object_building_practice/index.html
+++ b/files/fr/learn/javascript/objects/object_building_practice/index.html
@@ -17,14 +17,14 @@ original_slug: Learn/JavaScript/Objects/la_construction_d_objet_en_pratique
 
 
                                                                                                          {{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
                                                                                                          
 
-
                                                                                                          Dans l'article précédent, nous avons passé en revue l'essentiel de la théorie de l'objet Javascript et sa syntaxe détaillée, vous donnant ainsi des bases solides sur lesquelles commencer. Dans le présent article nous plongeons dans un exercice pratique afin d'accroître votre savoir-faire dans la construction d'objets entièrement personnalisés donnant un résultat plutôt amusant et très coloré.
                                                                                                          
+
                                                                                                          Dans l'article précédent, nous avons passé en revue l'essentiel de la théorie de l'objet Javascript et sa syntaxe détaillée, vous donnant ainsi des bases solides sur lesquelles commencer. Dans le présent article nous plongeons dans un exercice pratique afin d'accroître votre savoir-faire dans la construction d'objets entièrement personnalisés donnant un résultat plutôt amusant et très coloré.
                                                                                                          
 
-
                                                                                                          
  
   
                                                                                                          
    Pré-requis :
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                          
+
                                                                                                          
@@ -40,12 +40,12 @@ original_slug: Learn/JavaScript/Objects/la_construction_d_objet_en_pratique
 
 
                                                                                                          Dans cet article, nous écrirons une démo classique de "balles bondissantes", pour vous montrer à quel point les objets peuvent être utiles en JavaScript. Nos petites balles bondiront partout sur notre écran et changeront de couleurs lorsqu'elles se toucheront. L'exemple finalisé ressemblera un peu à ceci : 
                                                                                                          
 
-
                                                                                                          
+
                                                                                                            
 
                                                                                                          
 
-
                                                                                                          Cet exemple utilise l'API Canvas  pour dessiner les balles sur l'écran, et l'API requestAnimationFrame  pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation détection de collision).
                                                                                                          
+
                                                                                                          Cet exemple utilise l'API Canvas  pour dessiner les balles sur l'écran, et l'API requestAnimationFrame  pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation détection de collision).
                                                                                                          Pour commencer, faites des copies locales de nos fichiers index.html, style.css, et main.js. Ces fichiers contiennent respectivement :
                                                                                                          
 
@@ -64,7 +64,7 @@ const ctx = canvas.getContext('2d');
 const width = canvas.width = window.innerWidth;
 const height = canvas.height = window.innerHeight;
 
-
                                                                                                          Ce script prend une référence à l'élément  <canvas> et ensuite invoque la méthode  getContext() sur lui, nous donnant ainsi un contexte sur lequel nous pouvons commencer à dessiner. La variable résultante  (ctx)  est l'objet qui représente directement la surface du Canvas où nous pouvons dessiner et qui nous permet de dessiner des formes 2D sur ce dernier. 
                                                                                                          
+
                                                                                                          Ce script prend une référence à l'élément  <canvas> et ensuite invoque la méthode  getContext() sur lui, nous donnant ainsi un contexte sur lequel nous pouvons commencer à dessiner. La variable résultante  (ctx)  est l'objet qui représente directement la surface du Canvas où nous pouvons dessiner et qui nous permet de dessiner des formes 2D sur ce dernier. 
                                                                                                          Après, nous configurons  les variables width (largeur) et height(hauteur),  et la largeur et la hauteur de l'élément canvas (représentés par les propriétés  canvas.width et canvas.height ) afin qu'elles soient identiques à la fenêtre du navigateur (la surface sur laquelle apparaît la page web— Ceci peut être tiré des propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}).
                                                                                                          
 
@@ -117,16 +117,16 @@ const height = canvas.height = window.innerHeight;
                                                                                                          En utilisant cette fonction, nous pouvons dire à notre balle de se dessiner sur l'écran en appelant une série de membres du contexte 2D du canvas que nous avons défini plus tôt  (ctx). Le contexte est comme le papier et maintenant nous allons demander à notre stylo d'y dessiner quelque chose :
                                                                                                            
- 
                                                                                                          • Premièrement, nous utilisons beginPath() pour spécifier que nous voulons dessiner une forme sur le papier.
                                                                                                            • 
- 
                                                                                                          • Ensuite, nous utilisons fillStyle pour définir de quelle couleur nous voulons que la forme soit — nous lui attribuons la valeur de la propriété color de notre balle.
                                                                                                            • 
- 
                                                                                                          • Après, nous utilisons la méthode arc() pour tracer une forme en arc sur le papier. Ses paramètres sont :
+ 
                                                                                                          • Premièrement, nous utilisons beginPath() pour spécifier que nous voulons dessiner une forme sur le papier.
                                                                                                            • 
+ 
                                                                                                          • Ensuite, nous utilisons fillStyle pour définir de quelle couleur nous voulons que la forme soit — nous lui attribuons la valeur de la propriété color de notre balle.
                                                                                                            • 
+ 
                                                                                                          • Après, nous utilisons la méthode arc() pour tracer une forme en arc sur le papier. Ses paramètres sont :
   
                                                                                                              
    
                                                                                                            • Les positions x et y du centre de l'arc — nous specifions donc les propriétés x et y de notre balle.
                                                                                                              • 
    
                                                                                                            • Le rayon de l'arc — nous specifions la propriété size de notre balle.
                                                                                                              • 
    
                                                                                                            • Les deux derniers paramètres spécifient l'intervalle de début et de fin en degrés pour dessiner l'arc. Ici nous avons spécifié 0 degrés et 2 * PI qui est l'équivalent de 360 degrés en radians (malheureusement  vous êtes obligés  de spécifier ces valeurs en radians et non en degrés). Cela nous donne un cercle complet. Si vous aviez spécifié seulement  1 * PI, vous auriez eu un demi-cercle (180 degrés).
                                                                                                              • 
   
                                                                                                            
  
                                                                                                            • 
- 
                                                                                                          • En dernière position nous utilisons la méthode fill() qui est habituellement utilisée pour spécifier que nous souhaitons mettre fin au dessin que nous avons commencé avec beginPath(), et remplir la surface délimitée avec la couleur que nous avions spécifiée plus tôt avec fillStyle.
                                                                                                            • 
+ 
                                                                                                          • En dernière position nous utilisons la méthode fill() qui est habituellement utilisée pour spécifier que nous souhaitons mettre fin au dessin que nous avons commencé avec beginPath(), et remplir la surface délimitée avec la couleur que nous avions spécifiée plus tôt avec fillStyle.
                                                                                                            • 
 
                                                                                                          Vous pouvez déjà commencer à tester votre objet.
                                                                                                          
@@ -186,14 +186,14 @@ testBall.draw()
                                                                                                          Les deux dernières lignes ajoutent la valeur velX à la coordonnée x et la valeur velY à la coordonnée y — la balle est en effet mise en mouvement chaque fois que cette méthode est invoquée.
                                                                                                          
 
-
                                                                                                          Cela suffira pour l'instant, passons à l'animation !
                                                                                                          
+
                                                                                                          Cela suffira pour l'instant, passons à l'animation !
                                                                                                          Animer la balle
                                                                                                          
 
-
                                                                                                          Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles au canvas et à les animer.
                                                                                                          
+
                                                                                                          Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles au canvas et à les animer.
                                                                                                            
- 
                                                                                                          1. Tout d'abord, nous avons besoin d'un endroit où stocker toutes nos balles. Le tableau suivant fera ce travail — ajoutez-le au bas de votre code maintenant :
+ 
                                                                                                          2. Tout d'abord, nous avons besoin d'un endroit où stocker toutes nos balles. Le tableau suivant fera ce travail — ajoutez-le au bas de votre code maintenant :
 
   
                                                                                                            let balls = [];
 
                                                                                                            
@@ -213,8 +213,8 @@ testBall.draw()
 
   balls.push(ball);
 }
-  Tous les programmes qui animent les choses impliquent généralement une boucle d'animation, qui sert à mettre à jour les informations dans le programme et à restituer ensuite la vue résultante sur chaque image de l'animation. C'est la base de la plupart des jeux et autres programmes similaires.
                                                                                                            3. 
- 
                                                                                                          3. Ajoutez ce qui suit au bas de votre code maintenant :
+  Tous les programmes qui animent les choses impliquent généralement une boucle d'animation, qui sert à mettre à jour les informations dans le programme et à restituer ensuite la vue résultante sur chaque image de l'animation. C'est la base de la plupart des jeux et autres programmes similaires.
                                                                                                            4. 
+ 
                                                                                                          4. Ajoutez ce qui suit au bas de votre code maintenant :
   
                                                                                                            function loop() {
   ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
   ctx.fillRect(0, 0, width, height);
@@ -230,10 +230,10 @@ testBall.draw()
                                                                                                            
   
                                                                                                            Notre fonction loop() fonctionne comme suit :
                                                                                                            
 
   
                                                                                                              
-   
                                                                                                            • On définit la couleur de remplissage du canvas en noir semi-transparent, puis dessine un rectangle de couleur sur toute la largeur et la hauteur du canvas, en utilisant fillRect() (les quatre paramètres fournissent une coordonnée de départ et une largeur et une hauteur pour le rectangle dessiné ). Cela sert à masquer le dessin de l'image précédente avant que la suivante ne soit dessinée. Si vous ne faites pas cela, vous verrez juste de longs serpents se faufiler autour de la toile au lieu de balles qui bougent ! La couleur du remplissage est définie sur semi-transparent, rgba (0,0,0,.25), pour permettre aux quelques images précédentes de briller légèrement, produisant les petites traînées derrière les balles lorsqu'elles se déplacent. Si vous avez changé 0.25 à 1, vous ne les verrez plus du tout. Essayez de faire varier ce dernier nombre (entre 0 et 1) pour voir l'effet qu'il a.
                                                                                                              • 
-   
                                                                                                            • On crée un nouvel objet Ball() avec des attributs générées aléatoirement grâce à la fonction random(), puis on ajoute l'objet au tableau, mais seulement lorsque le nombre de balles dans le tableau est inférieur à 25. Donc quand on a 25 balles à l'écran, plus aucune balle supplémentaire n'apparaît. Vous pouvez essayer de faire varier le nombre dans balls.length <25 pour obtenir plus, ou moins de balles à l'écran. En fonction de la puissance de traitement de votre ordinateur / navigateur, spécifier plusieurs milliers de boules peut ralentir l'animation de façon très significative !
                                                                                                              • 
-   
                                                                                                            • Le programme boucle à travers tous les objets du tableau sur chacun desquels il exécute la fonction draw() et update() pour dessiner à l'écran chaque balle et faire les mise à jour de chaque attribut vant le prochain rafraîchissement.
                                                                                                              • 
-   
                                                                                                            • Exécute à nouveau la fonction à l'aide de la méthode requestAnimationFrame() — lorsque cette méthode est exécutée en permanence et a reçu le même nom de fonction, elle exécute cette fonction un nombre défini de fois par seconde pour créer une animation fluide. Cela se fait généralement de manière récursive — ce qui signifie que la fonction s'appelle elle-même à chaque fois qu'elle s'exécute, de sorte qu'elle sera répétée encore et encore.
                                                                                                              • 
+   
                                                                                                            • On définit la couleur de remplissage du canvas en noir semi-transparent, puis dessine un rectangle de couleur sur toute la largeur et la hauteur du canvas, en utilisant fillRect() (les quatre paramètres fournissent une coordonnée de départ et une largeur et une hauteur pour le rectangle dessiné ). Cela sert à masquer le dessin de l'image précédente avant que la suivante ne soit dessinée. Si vous ne faites pas cela, vous verrez juste de longs serpents se faufiler autour de la toile au lieu de balles qui bougent ! La couleur du remplissage est définie sur semi-transparent, rgba (0,0,0,.25), pour permettre aux quelques images précédentes de briller légèrement, produisant les petites traînées derrière les balles lorsqu'elles se déplacent. Si vous avez changé 0.25 à 1, vous ne les verrez plus du tout. Essayez de faire varier ce dernier nombre (entre 0 et 1) pour voir l'effet qu'il a.
                                                                                                              • 
+   
                                                                                                            • On crée un nouvel objet Ball() avec des attributs générées aléatoirement grâce à la fonction random(), puis on ajoute l'objet au tableau, mais seulement lorsque le nombre de balles dans le tableau est inférieur à 25. Donc quand on a 25 balles à l'écran, plus aucune balle supplémentaire n'apparaît. Vous pouvez essayer de faire varier le nombre dans balls.length <25 pour obtenir plus, ou moins de balles à l'écran. En fonction de la puissance de traitement de votre ordinateur / navigateur, spécifier plusieurs milliers de boules peut ralentir l'animation de façon très significative !
                                                                                                              • 
+   
                                                                                                            • Le programme boucle à travers tous les objets du tableau sur chacun desquels il exécute la fonction draw() et update() pour dessiner à l'écran chaque balle et faire les mise à jour de chaque attribut vant le prochain rafraîchissement.
                                                                                                              • 
+   
                                                                                                            • Exécute à nouveau la fonction à l'aide de la méthode requestAnimationFrame() — lorsque cette méthode est exécutée en permanence et a reçu le même nom de fonction, elle exécute cette fonction un nombre défini de fois par seconde pour créer une animation fluide. Cela se fait généralement de manière récursive — ce qui signifie que la fonction s'appelle elle-même à chaque fois qu'elle s'exécute, de sorte qu'elle sera répétée encore et encore.
                                                                                                              • 
   
                                                                                                            
  
                                                                                                            5. 
  
                                                                                                          5. Finallement mais non moins important, ajoutez la ligne suivante au bas de votre code — nous devons appeler la fonction une fois pour démarrer l'animation.
@@ -241,14 +241,14 @@ testBall.draw()
  
                                                                                                            6. 
 
                                                                                                          
 
-
                                                                                                          Voilà pour les bases — essayez d'enregistrer et de rafraîchir pour tester vos balles bondissantes!
                                                                                                          
+
                                                                                                          Voilà pour les bases — essayez d'enregistrer et de rafraîchir pour tester vos balles bondissantes!
                                                                                                          Ajouter la détection de collision
                                                                                                          
 
-
                                                                                                          Maintenant, pour un peu de plaisir, ajoutons une détection de collision à notre programme, afin que nos balles sachent quand elles ont frappé une autre balle.
                                                                                                          
+
                                                                                                          Maintenant, pour un peu de plaisir, ajoutons une détection de collision à notre programme, afin que nos balles sachent quand elles ont frappé une autre balle.
                                                                                                            
- 
                                                                                                          1. Tout d'abord, ajoutez la définition de méthode suivante ci-dessous où vous avez défini la méthode update() (c'est-à-dire le bloc Ball.prototype.update).
+ 
                                                                                                          2. Tout d'abord, ajoutez la définition de méthode suivante ci-dessous où vous avez défini la méthode update() (c'est-à-dire le bloc Ball.prototype.update).
 
   
                                                                                                            Ball.prototype.collisionDetect = function() {
   for (let j = 0; j < balls.length; j++) {
@@ -264,40 +264,40 @@ testBall.draw()
                                                                                                            
   }
 }
 
-  
                                                                                                            Cette méthode est un peu complexe, donc ne vous inquiétez pas si vous ne comprenez pas exactement comment cela fonctionne pour le moment. Regardons cela pas-à-pas :
                                                                                                            
+  
                                                                                                            Cette méthode est un peu complexe, donc ne vous inquiétez pas si vous ne comprenez pas exactement comment cela fonctionne pour le moment. Regardons cela pas-à-pas :
                                                                                                            
 
   
                                                                                                              
-   
                                                                                                            • Pour chaque balle b, nous devons vérifier chaque autre balle pour voir si elle est entrée en collision avec b. Pour ce faire, on inspecte toutes les balles du tableau balls[] dans une boucle for.
                                                                                                              • 
-   
                                                                                                            • Immédiatement à l'intérieur de cette boucle for, une instruction if vérifie si la balle courante  b' , inspectée dans la boucle, n'est égale à la balle b. Le code correspondant est :  b'!== b. En effet, nous ne voulons pas vérifier si une balle b est entrée en collision avec elle-même ! Nous contrôlons donc si la balle actuelle b—dont la méthode collisionDetect() est invoquée—est distincte de la balle b' inspectée dans la boucle. Ainsi le bloc de code venant après l'instruction if ne s'exécutera que si les balles b et b' ne sont pas identiques.
                                                                                                              • 
-   
                                                                                                            • Un algorithme classique permet ensuite de vérifier la superposition de deux disques. Ceci est expliqué plus loin dans 2D collision detection.
                                                                                                              • 
-   
                                                                                                            • Si une collision est détectée, le code à l'intérieur de l'instruction interne if est exécuté. Dans ce cas, nous définissons simplement la propriété color des deux cercles à une nouvelle couleur aléatoire. Nous aurions pu faire quelque chose de bien plus complexe, comme faire rebondir les balles de façon réaliste, mais cela aurait été beaucoup plus complexe à mettre en œuvre. Pour de telles simulations de physique, les développeurs ont tendance à utiliser des bibliothèques de jeux ou de physiques telles que PhysicsJS, matter.js, Phaser, etc.
                                                                                                              • 
+   
                                                                                                            • Pour chaque balle b, nous devons vérifier chaque autre balle pour voir si elle est entrée en collision avec b. Pour ce faire, on inspecte toutes les balles du tableau balls[] dans une boucle for.
                                                                                                              • 
+   
                                                                                                            • Immédiatement à l'intérieur de cette boucle for, une instruction if vérifie si la balle courante  b' , inspectée dans la boucle, n'est égale à la balle b. Le code correspondant est :  b'!== b. En effet, nous ne voulons pas vérifier si une balle b est entrée en collision avec elle-même ! Nous contrôlons donc si la balle actuelle b—dont la méthode collisionDetect() est invoquée—est distincte de la balle b' inspectée dans la boucle. Ainsi le bloc de code venant après l'instruction if ne s'exécutera que si les balles b et b' ne sont pas identiques.
                                                                                                              • 
+   
                                                                                                            • Un algorithme classique permet ensuite de vérifier la superposition de deux disques. Ceci est expliqué plus loin dans 2D collision detection.
                                                                                                              • 
+   
                                                                                                            • Si une collision est détectée, le code à l'intérieur de l'instruction interne if est exécuté. Dans ce cas, nous définissons simplement la propriété color des deux cercles à une nouvelle couleur aléatoire. Nous aurions pu faire quelque chose de bien plus complexe, comme faire rebondir les balles de façon réaliste, mais cela aurait été beaucoup plus complexe à mettre en œuvre. Pour de telles simulations de physique, les développeurs ont tendance à utiliser des bibliothèques de jeux ou de physiques telles que PhysicsJS, matter.js, Phaser, etc.
                                                                                                              • 
   
                                                                                                            
  
                                                                                                            3. 
- 
                                                                                                          3. Vous devez également appeler cette méthode dans chaque image de l'animation. Ajouter le code ci-dessous  juste après la ligne balls[i].update();:
+ 
                                                                                                          4. Vous devez également appeler cette méthode dans chaque image de l'animation. Ajouter le code ci-dessous  juste après la ligne balls[i].update();:
   
                                                                                                            balls[i].collisionDetect();
                                                                                                            
  
                                                                                                            5. 
- 
                                                                                                          5. Enregistrez et rafraîchissez la démo à nouveau, et vous verrez vos balles changer de couleur quand elles entrent en collision !
                                                                                                            6. 
+ 
                                                                                                          6. Enregistrez et rafraîchissez la démo à nouveau, et vous verrez vos balles changer de couleur quand elles entrent en collision !
                                                                                                            7. 
 
                                                                                                          
-
                                                                                                          Note : Si vous avez des difficultés à faire fonctionner cet exemple, essayez de comparer votre code JavaScript avec notre version finale (voir également la démo en ligne).
                                                                                                          
+
                                                                                                          Note : Si vous avez des difficultés à faire fonctionner cet exemple, essayez de comparer votre code JavaScript avec notre version finale (voir également la démo en ligne).
                                                                                                          
 
                                                                                                          Résumé
                                                                                                          
 
-
                                                                                                          Nous espérons que vous vous êtes amusé à écrire votre propre exemple de balles aléatoires bondissantes comme dans le monde réel, en utilisant diverses techniques orientées objet et divers objets d'un bout à l'autre du module ! Nous espérons vous avoir offert un aperçu utile de l'utilisation des objets.
                                                                                                          
- 
                                                                                                          
- C'est tout pour les articles sur les objets                                                                                                           — il ne vous reste plus qu'à tester vos compétences dans l'évaluation sur les objets.
                                                                                                          
+
                                                                                                          Nous espérons que vous vous êtes amusé à écrire votre propre exemple de balles aléatoires bondissantes comme dans le monde réel, en utilisant diverses techniques orientées objet et divers objets d'un bout à l'autre du module ! Nous espérons vous avoir offert un aperçu utile de l'utilisation des objets.
                                                                                                          
+
+
                                                                                                          C'est tout pour les articles sur les objets — il ne vous reste plus qu'à tester vos compétences dans l'évaluation sur les objets.
                                                                                                          Voir aussi
                                                                                                          {{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
                                                                                                          
@@ -307,11 +307,11 @@ testBall.draw()
                                                                                                          Dans ce module
                                                                                                          
diff --git a/files/fr/learn/javascript/objects/object_prototypes/index.html b/files/fr/learn/javascript/objects/object_prototypes/index.html
index 9cf87e30ad..95663a0f7b 100644
--- a/files/fr/learn/javascript/objects/object_prototypes/index.html
+++ b/files/fr/learn/javascript/objects/object_prototypes/index.html
@@ -12,9 +12,9 @@ original_slug: Learn/JavaScript/Objects/Prototypes_Objet
 
 
                                                                                                          {{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}
                                                                                                          
 
-
                                                                                                          Les prototypes sont un mécanisme au sein de JavaScript qui permettent aux objets JavaScript d'hériter des propriétés d'autres objets. Les prototypes implémentent un héritage différent de celui rencontré dans les langages de programmation objets habituels. Dans cet article, nous allons aborder ces différences, nous allons aussi voir comment la chaîne de prototypage fonctionne. Nous verrons aussi comment les propriétés prototypes peuvent être utilisées afin d'ajouter des méthodes à des constructeurs existants.
                                                                                                          
+
                                                                                                          Les prototypes sont un mécanisme au sein de JavaScript qui permettent aux objets JavaScript d'hériter des propriétés d'autres objets. Les prototypes implémentent un héritage différent de celui rencontré dans les langages de programmation objets habituels. Dans cet article, nous allons aborder ces différences, nous allons aussi voir comment la chaîne de prototypage fonctionne. Nous verrons aussi comment les propriétés prototypes peuvent être utilisées afin d'ajouter des méthodes à des constructeurs existants.
                                                                                                          
 
-
                                                                                                          
  
   
                                                                                                          
    Pré-requis :
    
-    
                                                                                                          Connaissance basique de l'informatique, une compréhension basique du HTML et du CSS, une familiarité avec  les bases du JavaScript (voir Premiers pas et Les blocs de construction) et les bases de la programmation objet en JavaScript (voir Introduction aux objets). 
                                                                                                          
+    
                                                                                                          Connaissance basique de l'informatique, une compréhension basique du HTML et du CSS, une familiarité avec  les bases du JavaScript (voir Premiers pas et Les blocs de construction) et les bases de la programmation objet en JavaScript (voir Introduction aux objets). 
                                                                                                          
                                                                                                              		
   
                                                                                                          
   
                                                                                                          
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                          
+
                                                                                                          
@@ -36,7 +36,7 @@ original_slug: Learn/JavaScript/Objects/Prototypes_Objet
 
                                                                                                          En programmation orientée objet classique, les classes sont définies, puis lorsque des instances sont créées, l'ensemble des attributs et des méthodes sont copiés dans l'instance. En JavaScript en revanche, tout n'est pas copié : on établit un lien entre l'objet instancié et son constructeur (c'est un lien dans la chaîne de prototypage). On détermine alors les méthodes et les attributs en remontant la chaîne.
                                                                                                          
-
                                                                                                          Note: Il faut bien comprendre qu'il y a une différence entre la notion de prototype d'un objet (qu'on obtient via Object.getPrototypeOf(obj), ou via la propriété dépréciée  __proto__ ) et l' attribut prototyped'une fonction constructrice. La première concerne chaque instance, le dernier existe uniquement sur une fonction constructrice. Cela dit, Object.getPrototypeOf(new Foobar()) renvoie au même object queFoobar.prototype.
                                                                                                          
+
                                                                                                          Note: Il faut bien comprendre qu'il y a une différence entre la notion de prototype d'un objet (qu'on obtient via Object.getPrototypeOf(obj), ou via la propriété dépréciée  __proto__ ) et l' attribut prototyped'une fonction constructrice. La première concerne chaque instance, le dernier existe uniquement sur une fonction constructrice. Cela dit, Object.getPrototypeOf(new Foobar()) renvoie au même object queFoobar.prototype.
                                                                                                          
 
                                                                                                          Prenons un exemple afin de rendre cela un peu plus clair.
                                                                                                          
@@ -59,11 +59,11 @@ original_slug: Learn/JavaScript/Objects/Prototypes_Objet
 
 
                                                                                                          Si vous entrez  « personne1 » dans votre console JavaScript, vous devriez voir que le navigateur essaie de faire de l'auto-complétion avec les attributs de cet objet.
                                                                                                          
 
-
                                                                                                          
+
                                                                                                          Dans cette liste vous verrez les membres définis au niveau du constructeur de personne1 qui n'est autre  Personne(). On y trouve les valeurs suivantes : nom, age, genre, interets, bio, et salutation. On peut voir aussi d'autres membres tels que watch, valueOf …  Ces membres particuliers sont définis au niveau du prototype objet du constructeur Personne(), qui est Object. On voit ici une mise en œuvre de la chaine de prototypage.
                                                                                                          
 
-
                                                                                                          
+
                                                                                                          Que peut-il bien se passer lorsque l'on tente d'appeler une méthode définie pour Object en l'appliquant à Personne1 ? Par exemple :
                                                                                                          
 
@@ -78,11 +78,11 @@ original_slug: Learn/JavaScript/Objects/Prototypes_Objet
 
                                                                                                          
-
                                                                                                          Note : Encore une fois, il est important d'insister sur le fait que les méthodes et attributs ne sont pas copiés d'un objet à un autre, mais qu'on y accède à chaque fois en remontant la chaine de prototypage.
                                                                                                          
+
                                                                                                          Note : Encore une fois, il est important d'insister sur le fait que les méthodes et attributs ne sont pas copiés d'un objet à un autre, mais qu'on y accède à chaque fois en remontant la chaine de prototypage.
                                                                                                          
 
                                                                                                          
-
                                                                                                          Note : Il n'existe pas de façon officielle d'accéder directement au prototype d'un objet donné. Les « liens » entre les éléments de la chaine sont définis au sein d'une propriété interne appelée [[prototype]] définie dans la spécification de JavaScript. (voir ECMAScript). Néanmoins, la plupart des navigateurs modernes implémentent l'attribut __proto__   (deux tirets soulignés ou underscore de chaque côté) qui contient le prototype objet d'un objet. Vous pouvez tenter personne1.__proto__ et personne1.__proto__.__proto__ pour voir à quoi ressemble une chaine de prototypage dans la console !
                                                                                                          
+
                                                                                                          Note : Il n'existe pas de façon officielle d'accéder directement au prototype d'un objet donné. Les « liens » entre les éléments de la chaine sont définis au sein d'une propriété interne appelée [[prototype]] définie dans la spécification de JavaScript. (voir ECMAScript). Néanmoins, la plupart des navigateurs modernes implémentent l'attribut __proto__   (deux tirets soulignés ou underscore de chaque côté) qui contient le prototype objet d'un objet. Vous pouvez tenter personne1.__proto__ et personne1.__proto__.__proto__ pour voir à quoi ressemble une chaine de prototypage dans la console !
                                                                                                          
 
                                                                                                          L'attribut prototype : là où l'on définit les éléments héritables
                                                                                                          
@@ -96,7 +96,7 @@ original_slug: Learn/JavaScript/Objects/Prototypes_Objet
 
                                                                                                          Object.is(), Object.keys(), ainsi que d'autres membres non définis dans prototype ne sont pas hérités par les instances d'objet ou les objets qui héritent de Object.prototype. Ces méthodes et attributs sont disponibles uniquement pour le constructeur Object().
                                                                                                          
-
                                                                                                          Note : Ça paraît bizarre, d'avoir une méthode définie au sein d'un constructeur qui est lui même une fonction non ? Et bien, une fonction est aussi un type d'objet — vous pouvez jeter un  œil à la documentation du constructeur Function() si vous ne nous croyez pas.
                                                                                                          
+
                                                                                                          Note : Ça paraît bizarre, d'avoir une méthode définie au sein d'un constructeur qui est lui même une fonction non ? Et bien, une fonction est aussi un type d'objet — vous pouvez jeter un  œil à la documentation du constructeur Function() si vous ne nous croyez pas.
                                                                                                          
 
                                                                                                            
@@ -117,7 +117,7 @@ original_slug: Learn/JavaScript/Objects/Prototypes_Objet
 
                                                                                                            maChaine possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que split(), indexOf(), replace()…
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Important : L'attribut prototype est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via __proto__). L'attribut prototype est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.
                                                                                                            
+
                                                                                                            Attention : L'attribut prototype est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via __proto__). L'attribut prototype est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Revenons sur create()
                                                                                                            
@@ -203,7 +203,7 @@ Personne.prototype.aurevoir= function() {
 
                                                                                                            Même si nous l'avons déclaré après, la méthode aurevoir() est disponible pour l'instance personne1. Son existence a mis à jour dynamiquement les méthodes de l'instance. Cela démontre ce que nous expliquions plus haut au sujet de la chaine de prototypage : le navigateur la parcourt de manière ascendante. Ainsi, il est possible de trouver directement les méthodes qui n'ont pas été définies au niveau de l'instance, plutôt que de les recopier au sein de l'instance. Cela nous permet de bénéficier d'un système extensible de manière simple et élégante.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez jeter un œil au notre (oojs-class-prototype.html, voir la démo)
                                                                                                            
+
                                                                                                            Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez jeter un œil au notre (oojs-class-prototype.html, voir la démo)
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Vous verrez peu d'attributs définis au sein de l'attribut prototype, pour la simple et bonne raison que c'est assez peu pratique. Vous pourriez avoir :
                                                                                                            
diff --git a/files/fr/learn/performance/html/index.html b/files/fr/learn/performance/html/index.html
index 268d602662..2c6ae834d6 100644
--- a/files/fr/learn/performance/html/index.html
+++ b/files/fr/learn/performance/html/index.html
@@ -7,7 +7,7 @@ translation_of: Learn/Performance/HTML
 
 
                                                                                                            HTML est par défaut rapide et accessible. Il est du devoir de toute personne développant des sites web et des applications de s'assurer que ces deux caractéristiques sont préservées lors de la création ou de la modification de code HTML. Des difficultés peuvent apparaître par exemple lorsque la taille de fichier d'un élément <video> est trop importante, ou lorsqu'une page web n'est pas optimisée pour les appareils mobiles. Ce module a pour but de présenter les fonctionnalités clés de HTML qui sont liées aux performances, et qui peuvent améliorer drastiquement la qualité de vos pages web.
                                                                                                            
 
-
                                                                                                          
  
   
                                                                                                          
    Pré-requis :
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                          
+
                                                                                                          
diff --git a/files/fr/learn/performance/index.html b/files/fr/learn/performance/index.html
index 0e1191edae..56b6ccb0f0 100644
--- a/files/fr/learn/performance/index.html
+++ b/files/fr/learn/performance/index.html
@@ -14,13 +14,13 @@ translation_of: Learn/Performance
 ---
 
                                                                                                          {{LearnSidebar}}
                                                                                                          
 
-
                                                                                                          La création de sites Web nécessite HTML, CSS, et JavaScript. Pour créer des sites Web et des applications que les gens veulent utiliser, qui attirent et fidélisent les utilisateurs, vous devez créer une bonne expérience utilisateur. Une bonne expérience utilisateur consiste à s'assurer que le contenu est rapide à charger et réactif à l'interaction de l'utilisateur. Ceci est connu sous le nom de performance web, et dans ce module, vous vous concentrerez sur les principes fondamentaux de la création de sites Web performants.
                                                                                                          
+
                                                                                                          La création de sites Web nécessite HTML, CSS, et JavaScript. Pour créer des sites Web et des applications que les gens veulent utiliser, qui attirent et fidélisent les utilisateurs, vous devez créer une bonne expérience utilisateur. Une bonne expérience utilisateur consiste à s'assurer que le contenu est rapide à charger et réactif à l'interaction de l'utilisateur. Ceci est connu sous le nom de performance web, et dans ce module, vous vous concentrerez sur les principes fondamentaux de la création de sites Web performants.
                                                                                                          
 
-
                                                                                                          Le reste de notre matériel d'apprentissage pour débutants a essayé de s'en tenir autant que possible aux meilleures pratiques du Web telles que les performances et l'accessibilité,cependant, il est bon de se concentrer spécifiquement sur ces sujets et de s'assurer que vous les connaissez bien.
                                                                                                          
+
                                                                                                          Le reste de notre matériel d'apprentissage pour débutants a essayé de s'en tenir autant que possible aux meilleures pratiques du Web telles que les performances et l'accessibilité,cependant, il est bon de se concentrer spécifiquement sur ces sujets et de s'assurer que vous les connaissez bien.
                                                                                                          Parcours d'apprentissage
                                                                                                          
 
-
                                                                                                          Bien que la connaissance de HTML, CSS et JavaScript soit nécessaire pour mettre en œuvre de nombreuses recommandations d'amélioration des performances Web, savoir comment créer des applications n'est pas une condition préalable nécessaire pour comprendre et mesurer les performances Web. Nous vous recommandons cependant, avant de commencer à utiliser ce module, d'avoir au moins une idée de base du développement Web en consultant notre module Commencer avec le web.
                                                                                                          
+
                                                                                                          Bien que la connaissance de HTML, CSS et JavaScript soit nécessaire pour mettre en œuvre de nombreuses recommandations d'amélioration des performances Web, savoir comment créer des applications n'est pas une condition préalable nécessaire pour comprendre et mesurer les performances Web. Nous vous recommandons cependant, avant de commencer à utiliser ce module, d'avoir au moins une idée de base du développement Web en consultant notre module Commencer avec le web.
                                                                                                          Il serait également utile d'approfondir un peu ces sujets, avec des modules tels que:
                                                                                                          
 
@@ -39,9 +39,9 @@ translation_of: Learn/Performance
 
                                                                                                          
  
                                                                                                          Le "pourquoi" des performances Web
                                                                                                          
  
                                                                                                          Cet article explique pourquoi les performances Web sont importantes pour l'accessibilité, l'expérience utilisateur et vos objectifs commerciaux.
                                                                                                          
- 
                                                                                                          Qu'est-ce que la performance Web ?
                                                                                                          
+ 
                                                                                                          Qu'est-ce que la performance Web ?
                                                                                                          
  
                                                                                                          Vous savez que les performances Web sont importantes, mais en quoi consistent les performances Web ? Cet article présente les composants de la performance, du chargement et du rendu de la page Web, en passant par la manière dont votre contenu est intégré dans le navigateur de votre utilisateur pour être visualisé, aux groupes de personnes dont nous devons tenir compte lors de la réflexion sur les performances.
                                                                                                          
- 
                                                                                                          Comment les utilisateurs perçoivent-ils les performances ?
                                                                                                          
+ 
                                                                                                          Comment les utilisateurs perçoivent-ils les performances ?
                                                                                                          
  
                                                                                                          La vitesse à laquelle vos utilisateurs perçoivent votre site est plus importante que la vitesse de votre site Web en millisecondes. Ces perceptions sont affectées par le temps de chargement réel de la page, l'inactivité, la réactivité à l'interaction de l'utilisateur et la fluidité du défilement et d'autres animations. Dans cet article, nous discutons des différentes métriques de chargement, de l'animation et de la réactivité, ainsi que des meilleures pratiques pour améliorer la perception de l'utilisateur, sinon les timings réels.
                                                                                                          
 
                                                                                                          
 
diff --git a/files/fr/learn/performance/measuring_performance/index.html b/files/fr/learn/performance/measuring_performance/index.html
index 8ac486bdab..402e218d4c 100644
--- a/files/fr/learn/performance/measuring_performance/index.html
+++ b/files/fr/learn/performance/measuring_performance/index.html
@@ -11,7 +11,7 @@ translation_of: 'Learn/Performance/Measuring_performance'
 
 
                                                                                                          Cet article présente les indicateurs de performances web que vous pouvez utiliser afin de mesurer et optimiser les performances de votre site.
                                                                                                          
 
-
                                                                                                          
   
     
                                                                                                          
       Prérequis :
 
 
 
 
                                                                                                          
+
                                                                                                          
@@ -59,7 +59,7 @@ translation_of: 'Learn/Performance/Measuring_performance'
 
 
                                                                                                          Au moment de l'écriture de cette page, voici à quoi ressemblait le rapport de performances du site MDN :
                                                                                                          
 
-
                                                                                                          Une capture d'écran montrant le rapport PageSpeed Insights de la page d'accueil de Mozilla.
                                                                                                          
+
                                                                                                          Une capture d'écran montrant le rapport PageSpeed Insights de la page d'accueil de Mozilla.
                                                                                                          Un rapport de performances contient des informations concernant le temps d'attente des visiteurs avant que quelque chose ne s'affiche, le nombre d'octets à télécharger pour afficher la page, et bien plus encore. Cela vous permet également de savoir si les mesures réalisées sont positives ou négatives.
                                                                                                          
 
@@ -71,11 +71,11 @@ translation_of: 'Learn/Performance/Measuring_performance'
 
 
                                                                                                          La plupart des navigateurs ont des outils avec lesquels vous pouvez tester les pages web en cours de chargement pour déterminer leurs performances. Par exemple, le moniteur réseau de Firefox retourne des informations détaillées sur toutes les ressources téléchargées sur le réseau ainsi qu'un graphique montrant la durée de téléchargement de chaque ressource.
                                                                                                          
 
-
                                                                                                          
+
                                                                                                          Vous pouvez aussi utiliser le moniteur de performances pour mesurer les performances de l'interface de votre application ou de votre site pendant que vous réalisez différentes actions. Cela permet d'identifier les fonctionnalités qui ralentissent le plus votre interface.
                                                                                                          
 
-
                                                                                                          
+
                                                                                                          Conclusion
                                                                                                          
 
diff --git a/files/fr/learn/performance/multimedia/index.html b/files/fr/learn/performance/multimedia/index.html
index 8df0dc44e2..56b98c3888 100644
--- a/files/fr/learn/performance/multimedia/index.html
+++ b/files/fr/learn/performance/multimedia/index.html
@@ -20,8 +20,8 @@ translation_of: Learn/Performance/Multimedia
   
                                                                                                          
   
     
                                                                                                          
       Pré-requis :
 
 
 
 
 
 
                                                                                                          
 
                                                                                                          
 
-
                                                                                                          
-  
                                                                                                          Note : Cet article est une introduction à l'optimisation des éléments multimédia sur le web, couvrant les principes généraux et les techniques de base. Pour aller plus loin, consultez des ressources plus spécialisées, telles que https://images.guide (en anglais).
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : Cet article est une introduction à l'optimisation des éléments multimédia sur le web, couvrant les principes généraux et les techniques de base. Pour aller plus loin, consultez des ressources plus spécialisées, telles que https://images.guide (en anglais).
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Pourquoi optimiser vos éléments multimédia ?
                                                                                                          
@@ -52,8 +52,8 @@ translation_of: Learn/Performance/Multimedia
 
 
                                                                                                          Le format de fichier le plus optimisé dépend directement du type d'image à charger.
                                                                                                          
 
-
                                                                                                          
-  
                                                                                                          Note : Pour obtenir des informations plus générales sur les types d'images, consultez le guide des types d'images et de formats d'images.
                                                                                                          
+
                                                                                                          
+  
                                                                                                          Note : Pour obtenir des informations plus générales sur les types d'images, consultez le guide des types d'images et de formats d'images.
                                                                                                          
 
                                                                                                          
 
 
                                                                                                          Le format SVG est le plus approprié pour les images qui ne comprennent que quelques couleurs et qui n'ont pas la complexité d'une photographie. Cela nécessite la mise à disposition d'une source dans un format vectoriel. Si cette image n'est disponible qu'en format bitmap, alors le format PNG sera la solution de repli idéale. De bons exemples d'images idéalement fournies en SVG sont les logos, les illustrations, les graphiques ou les icônes (veuillez noter qu'il vaut mieux utiliser des images au format SVG que des polices d'icônes !). Qu'il s'agisse de SVG ou de PNG, les deux formats prennent en charge la transparence.
                                                                                                          
@@ -74,8 +74,8 @@ translation_of: Learn/Performance/Multimedia
 
 
                                                                                                            
   
                                                                                                          • WebP : un choix excellent pour les images, qu'elles soient fixes ou animées. WebP offre une meilleure compression que PNG ou JPEG et prend en charge les grandes profondeurs de couleurs, les animations, la transparence et de nombreuses autres fonctionnalités, à l'exception de l'affichage progressif. WebP est pris en charge par tous les navigateurs les plus utilisés à l'exception de Safari 14 sur macOS 14 sur ordinateur.
-    
                                                                                                            
-      
                                                                                                            Note : en dépit de la prise en charge annoncée de WebP sur Safari 14, les images .webp ne s'affiche pas bien sur macOS sur ordinateur, alors qu'elles s'affichent bien sur iOS 14 sur mobile.
                                                                                                            
+    
                                                                                                            
+      
                                                                                                            Note : en dépit de la prise en charge annoncée de WebP sur Safari 14, les images .webp ne s'affiche pas bien sur macOS sur ordinateur, alors qu'elles s'affichent bien sur iOS 14 sur mobile.
                                                                                                            
     
                                                                                                            
   
                                                                                                            • 
   
                                                                                                          • AVIF : un bon choix pour les images fixes ou animées, du fait du haut niveau de performances et du fait qu'il est libre de droits. AVIF est encore plus efficient que WebP, mais il n'est pas aussi bien pris en charge : il est actuellement pris en charge sur Chrome, Opera et Firefox (à l'aide des réglages de préférences). 
                                                                                                            Vous pouvez utiliser cet outil en ligne pour convertir différents formats d'images en AVIF.
                                                                                                            • 
diff --git a/files/fr/learn/performance/why_web_performance/index.html b/files/fr/learn/performance/why_web_performance/index.html
index 8cb054da54..30d21bd82a 100644
--- a/files/fr/learn/performance/why_web_performance/index.html
+++ b/files/fr/learn/performance/why_web_performance/index.html
@@ -18,7 +18,7 @@ original_slug: Learn/Performance/pourquoi_performance_web
 
 
                                                                                                            La performance Web consiste à rendre les sites Web rapides, y compris à rendre les processus lents rapides. Cet article explique pourquoi les performances Web sont importantes pour les visiteurs du site et pour vos objectifs commerciaux.
                                                                                                            
 
-
+
                                                                                                            
@@ -35,23 +35,21 @@ original_slug: Learn/Performance/pourquoi_performance_web
 
 
                                                                                                            Pourquoi se soucier de la performance?
                                                                                                            
 
-
                                                                                                            Les performances Web et les meilleurs pratiques associées sont essentielles pour que les visiteurs de votre site Web aient une bonne expérience. En un sens, les performances Web peuvent être considérées comme un sous-ensemble de l'accessibilité web. Avec les performaces comme avec l'accessibilité, vous considérez que appareil un visiteur du site utilise pour accéder au site et la vitesse de connexion de l'appareil.
                                                                                                            
+
                                                                                                            Les performances Web et les meilleurs pratiques associées sont essentielles pour que les visiteurs de votre site Web aient une bonne expérience. En un sens, les performances Web peuvent être considérées comme un sous-ensemble de l'accessibilité web. Avec les performaces comme avec l'accessibilité, vous considérez que appareil un visiteur du site utilise pour accéder au site et la vitesse de connexion de l'appareil.
                                                                                                            
 
-
                                                                                                            À titre d'exemple, considérons l'expérience de chargement de CNN.com, qui, au moment de la rédaction de cet article,  avait plus de 400 requêtes HTTP avec une taille de fichier supérieure à 22.6Mo.
                                                                                                            
+
                                                                                                            À titre d'exemple, considérons l'expérience de chargement de CNN.com, qui, au moment de la rédaction de cet article,  avait plus de 400 requêtes HTTP avec une taille de fichier supérieure à 22.6Mo.
                                                                                                              
- 
                                                                                                            • Imaginez charger ceci sur un ordinateur de bureau connecté à un réseau de fibre optique. Cela semblerait relativement rapide, et la taille du fichier serait en grande partie sans importance.
                                                                                                              • 
- 
                                                                                                            • Imaginez charger ce même site en utilisant des données mobiles connectées sur un iPad de 9 ans tout en vous rendant chez vous en transport en commun. Le même site sera lent à se charger, voir presque inutilisable en fonction de la couverture cellulaire. Vous pourriez abandonner avant la fin du chargement.
                                                                                                              • 
- 
                                                                                                            • Imaginez charger ce même site sur un appareil Huawei à 35$ dans une Inde rurale avec une couverture limitée ou pas de couverture. Le site sera très lent à se charger - s'il se charge du tout - avec des scripts de blocage pouvant expirer et un impact négatif sur le processeur provoquant des plantages du navigateur s'il se charge.
                                                                                                              • 
+ 
                                                                                                            • Imaginez charger ceci sur un ordinateur de bureau connecté à un réseau de fibre optique. Cela semblerait relativement rapide, et la taille du fichier serait en grande partie sans importance.
                                                                                                              • 
+ 
                                                                                                            • Imaginez charger ce même site en utilisant des données mobiles connectées sur un iPad de 9 ans tout en vous rendant chez vous en transport en commun. Le même site sera lent à se charger, voir presque inutilisable en fonction de la couverture cellulaire. Vous pourriez abandonner avant la fin du chargement.
                                                                                                              • 
+ 
                                                                                                            • Imaginez charger ce même site sur un appareil Huawei à 35$ dans une Inde rurale avec une couverture limitée ou pas de couverture. Le site sera très lent à se charger - s'il se charge du tout - avec des scripts de blocage pouvant expirer et un impact négatif sur le processeur provoquant des plantages du navigateur s'il se charge.
                                                                                                              • 
 
                                                                                                            
 
-
                                                                                                            Un site de 22.6 Mo peut prendre jusqu'à 83 secondes pour se charger sur un réseau 3G, avec DOMContentLoaded (c'est-à-dire la structure HTML de base du site) à 31.86 secondes.
                                                                                                            
+
                                                                                                            Un site de 22.6 Mo peut prendre jusqu'à 83 secondes pour se charger sur un réseau 3G, avec DOMContentLoaded (c'est-à-dire la structure HTML de base du site) à 31.86 secondes.
                                                                                                            
 
-
                                                                                                            Et ce n'est pas seulement le temps de téléchargement qui est un problème majeur. De nombreux pays ont encore des connexions internet facturées âr mégaoctet. Notre exemple de 22,6 Mo d'expérience CNN.com coûterait environ 11% du salaire quotidien moyen d'un Indien à télécharger. À partir d'un appareil mobile en Afrique du Nord-Ouest, cela peut coûter deux jours de salaire moyen. Et si ce site était chargé sur le plan d'itinérance internationale d'un opérateur américain? Les coûts feraient pleurer n'importe qui. (Voir combien coûte le téléchargement de votre site.)
                                                                                                            
+
                                                                                                            Et ce n'est pas seulement le temps de téléchargement qui est un problème majeur. De nombreux pays ont encore des connexions internet facturées âr mégaoctet. Notre exemple de 22,6 Mo d'expérience CNN.com coûterait environ 11% du salaire quotidien moyen d'un Indien à télécharger. À partir d'un appareil mobile en Afrique du Nord-Ouest, cela peut coûter deux jours de salaire moyen. Et si ce site était chargé sur le plan d'itinérance internationale d'un opérateur américain? Les coûts feraient pleurer n'importe qui. (Voir combien coûte le téléchargement de votre site.)
                                                                                                            
 
-
                                                                                                            
-
-
                                                                                                            Améliorer les taux de conversion
                                                                                                            
+
                                                                                                            Améliorer les taux de conversion
                                                                                                            La réduction du temps de téléchargement et de rendu d'un site améliore les taux de conversion et la fidélisation des utilisateurs.
                                                                                                            
 
@@ -61,20 +59,20 @@ original_slug: Learn/Performance/pourquoi_performance_web
 
 
                                                                                                            La vitesse à laquelle un site se charge est un facteur. Si le site est lent à réagir à l'interaction de l'utilisateur, ou semble saccadé, cela entraîne une perte d'intérêt et de confiance des visiteurs du site.
                                                                                                            
 
-
                                                                                                            Voici quelques exemples concrets d'améliorations des performances:
                                                                                                            
+
                                                                                                            Voici quelques exemples concrets d'améliorations des performances:
                                                                                                            
 
-
                                                                                                            Pour créer des sites Web et des applications que les gens veulent utiliser; pour attirer et fidéliser les visiteurs du site, vous devez créer un site accessible qui offre une bonne expérience utilisateur. La création de sites Web nécessite HTML, CSS et JavaScript, y compris généralement des types de fichiers binaires tels que des images et des vidéos. Les décisions que vous prenez et les outils que vous choisissez lors de la création de votre site peuvent grandement affecter les performances du travail fini.
                                                                                                            
+
                                                                                                            Pour créer des sites Web et des applications que les gens veulent utiliser; pour attirer et fidéliser les visiteurs du site, vous devez créer un site accessible qui offre une bonne expérience utilisateur. La création de sites Web nécessite HTML, CSS et JavaScript, y compris généralement des types de fichiers binaires tels que des images et des vidéos. Les décisions que vous prenez et les outils que vous choisissez lors de la création de votre site peuvent grandement affecter les performances du travail fini.
                                                                                                            
 
-
                                                                                                            Une bonne performance est un atout. Une mauvaise performance est une responsabilité. La vitesse du site affecte directement les taux de rebond, la conversion, les revenus, la satisfaction des utilisateurs et le classement des moteurs de recherche. Il a été démontré que les sites performants augmentent la rétention des visiteurs et la satisfaction des utilisateurs. Il a été démontré que la lenteur du contenu conduit à l'abandon du site, certains visiteurs partant pour ne jamais revenir. La réduction de la quantité de données qui passe entre le client et le serveur réduit les coûts pour toutes les parties. La réduction de la taille des fichiers HTML/CSS/JavaScript et multimédia réduit à la fois le temps de chargement et la consommation d'énergie d'un site (voir performance budgets).
                                                                                                            
+
                                                                                                            Une bonne performance est un atout. Une mauvaise performance est une responsabilité. La vitesse du site affecte directement les taux de rebond, la conversion, les revenus, la satisfaction des utilisateurs et le classement des moteurs de recherche. Il a été démontré que les sites performants augmentent la rétention des visiteurs et la satisfaction des utilisateurs. Il a été démontré que la lenteur du contenu conduit à l'abandon du site, certains visiteurs partant pour ne jamais revenir. La réduction de la quantité de données qui passe entre le client et le serveur réduit les coûts pour toutes les parties. La réduction de la taille des fichiers HTML/CSS/JavaScript et multimédia réduit à la fois le temps de chargement et la consommation d'énergie d'un site (voir performance budgets).
                                                                                                            Le suivi des performances est important. Plusieurs facteurs, notamment la vitesse du réseau et les capacités de l'appareil, affectent les performances. Il n'y a pas de mesure de performance unique; et des objectifs commerciaux différents peuvent signifier que différentes mesures sont plus pertinentes pour les objectifs du site ou de l'organisation qu'il prend en charge. La perception de la performance de votre site est l'expérience utilisateur!
                                                                                                            
 
@@ -87,16 +85,16 @@ original_slug: Learn/Performance/pourquoi_performance_web
 
                                                                                                            Dans ce module
                                                                                                            
diff --git a/files/fr/learn/server-side/django/admin_site/index.html b/files/fr/learn/server-side/django/admin_site/index.html
index b93f0d8475..af9b0309f9 100644
--- a/files/fr/learn/server-side/django/admin_site/index.html
+++ b/files/fr/learn/server-side/django/admin_site/index.html
@@ -15,9 +15,9 @@ translation_of: Learn/Server-side/Django/Admin_site
 
 
                                                                                                            {{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}
                                                                                                            
 
-
                                                                                                            Nous avons créé le modèle de données pour le site web de la bibliothèque locale. Dans ce chapitre nous allons utiliser le site d'administration pour introduire des données réelles pour les livres. Dans un premier temps, nous aborderons la manière d'enregistrer les données des objets sur le site d'administration et comment se connecter au site et créer des données. La fin de ce chapitre sera dédié à des éléments d'amélioration possible du site d'administration.
                                                                                                            
+
                                                                                                            Nous avons créé le modèle de données pour le site web de la bibliothèque locale. Dans ce chapitre nous allons utiliser le site d'administration pour introduire des données réelles pour les livres. Dans un premier temps, nous aborderons la manière d'enregistrer les données des objets sur le site d'administration et comment se connecter au site et créer des données. La fin de ce chapitre sera dédié à des éléments d'amélioration possible du site d'administration.
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis:
 
 
 
 
 
 
 
 
 
 
                                                                                                            
+
                                                                                                            
@@ -57,9 +57,10 @@ admin.site.register(Genre)
 admin.site.register(BookInstance)
 
 
-
                                                                                                            Note: Si vous avez répondu au défi de la modelisation des langues des livres (voir le chapitre précédent sur les modèles de données), vous pouvez aussi importer cet objet !
                                                                                                            
-
                                                                                                            
-Cela devrait être de la forme : admin.site.register(Language) et n'oubliez pas d'importer l'objet.
                                                                                                            
+
                                                                                                            
+    
                                                                                                            Note : Si vous avez répondu au défi de la modelisation des langues des livres (voir le chapitre précédent sur les modèles de données), vous pouvez aussi importer cet objet !
                                                                                                            
+    
                                                                                                            Cela devrait être de la forme : admin.site.register(Language) et n'oubliez pas d'importer l'objet.
                                                                                                            
+
                                                                                                            C'est la méthode la plus rapide et la plus simple pour enregistrer un ou plusieurs modèles. Le site d'administration est très adaptable et nous aborderons plus loin ces questions.
                                                                                                            
 
@@ -82,41 +83,41 @@ Cela devrait être de la forme : admin.site.register(Language) et n
 
 
                                                                                                            Pour vous authentifier au site, ouvrez l'URL /admin du site local (concrètement, http://127.0.0.1:8000/admin) et identifiez vous avec votre compte de super-utilisateur.
                                                                                                            
 
-
                                                                                                            
-
                                                                                                            Vous serez redirigez vers l'application interne à Django de gestion de l'authentification et la pages de demande d'authentitification avant d'accéder réellement au site d'administration.
                                                                                                            
+
                                                                                                            
+
                                                                                                            Note : Vous serez redirigé⋅e vers l'application interne à Django de gestion de l'authentification et la pages de demande d'authentitification avant d'accéder réellement au site d'administration.
                                                                                                            
 
 
                                                                                                            Si vous accéder au site local sans /admin, vous aurez un message d'erreur car les routages d'URL n'ont pas encore été traité. ne vous en inquiétez pas cela va venir...
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Cet partie du site affiche tous les modèles définis et déclarés dans le fichier de contrôle de l'administration du site. Les objets sont regroupés par application (pour notre cas, uniquement l'application Catalog à cette étape des travaux). Vous pouvez cliquez sur chacun des noms d'objet publiés pour accéder à l'écran qui gère les informations sur les objets de ce type contenu en base de données et vous pouvez les éditer et les modifier. Vous pouvez aussi cliquer sur le lien + Ajouter pour créer un nouvel enregistrement.
                                                                                                            
 
-
                                                                                                            Admin Site - Home page
                                                                                                            
+
                                                                                                            Admin Site - Home page
                                                                                                            
 
 
                                                                                                            Cliquez sur le lien + Ajouter à la droite de l'objet Books pour créer un nouveau livre. Le site va afficher une page de saisie de données (analogue à celle ci-dessous). Notez que Django prend en compte le type de champs définit dans le modèle pour utiliser le widget associé ainsi que le champs help_text quand vous l'aviez défini. 
                                                                                                            
 
 
                                                                                                            Entrez les valeurs des champs. Pour les champs qui relèvent de relations entre objet, vous pouvez utiliser le bouton + pour accéder en cascade au formulaire de saisie des informations nécessaires à la créarion de cette objet. Vous pouvez aussi sélectionner un objet si d'autres avaient été créés précédement. Ne pas oublier de cliquer sur Enregistrer et ajouter un nouveau ou Enregistrer et continuer les modification pour sauvegarder en base de données les informations saisies.
                                                                                                            
 
-
                                                                                                            Admin Site - Book Add
                                                                                                            
+
                                                                                                            Admin Site - Book Add
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: À ce stade, prenez le temps d'enregistrer plusieurs livres, genres et auteurs. Assurez-vous que chacun est associé à plusieurs autres éléments cela rendra vos listes à venir plus riches et intéressantes quand nous aborderons ces sujets.
                                                                                                            
+
                                                                                                            Note : À ce stade, prenez le temps d'enregistrer plusieurs livres, genres et auteurs. Assurez-vous que chacun est associé à plusieurs autres éléments cela rendra vos listes à venir plus riches et intéressantes quand nous aborderons ces sujets.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Après avoir saisie les informations et ajouté vos livres, cliquez sur le lien Accueil pour revenir à la page principale du site d'administration. Cliquez sur le lien Books pour afficher la liste des livres enregistrés (ou sur d'autres liens pour voir les autres objets présents en base). Après avoir ajouter quelques livres, votre page devrait ressembler à celle ci-dessous. La liste des livres est affichée par titre ; c'est, en fait, la valeur délivrée par la méthode __str__() du modèle d'objet Book comme cela a été codé dans le précédent chapitre.
                                                                                                            
 
-
                                                                                                            Admin Site - List of book objects
                                                                                                            
+
                                                                                                            Admin Site - List of book objects
                                                                                                            
 
 
                                                                                                            À partir de la liste affichée, vous pouvez supprimer des instances en selectionnant les items par les cases à cocher à gauche du titre puis supprimer... dans la liste des actions proposée puis en cliquant sur Envoyer. Vous pouvez aussi ajouter des livres en cliquant sur AJOUTER BOOK.
                                                                                                            
 
 
                                                                                                            Vous pouvez editer un livre en cliquant son nom sur la liste des ouvrages. La page d'édition, image ci-dessous, est proche de celle d'ajout d'un livre. Les principales différences sont le titre de la page (Modification de book, au lieu d'ajout de bbok), l'ajout en rouge du bouton supprimer, l'historique des modifications et voir sur le site. Ce dernier bouton est visible car nous créer la méthode get_absolute_url() dans la définition du modèle de données (à ce stade, une erreur sera provoquée si vous cliquez sur ce bouton).
                                                                                                            
 
-
                                                                                                            Admin Site - Book Edit
                                                                                                            
+
                                                                                                            Admin Site - Book Edit
                                                                                                            
 
 
                                                                                                            Revenez à la page d'accueil (à l'aide du lien Accueil du fil d'Ariane), puis affichez les listes des Authors et des Genres. Vous devriez déjà en avoir créé un certain nombre à partir de l'ajout des nouveaux livres, mais n'hésitez pas à en ajouter d'autres.
                                                                                                            
 
 
                                                                                                            Ce qui manque actuellement ce sont des Book Instances. Vous n'en avez pas car elles ne sont pas créées à partir des objets Books (bien que vous pourriez créer un objet Book à partir d'un objet BookInstance car c'est la nature de la relation ForeignKey). Retournez à la page d'acceuil et cliquez sur le bouton Ajouter associé aux objets Book Instance et accéder à l'écran de création. Vous pouvez noter le très grand identifiant unique global utilisé pour identifier séparelment les ouvrages.
                                                                                                            
 
-
                                                                                                            Admin Site - BookInstance Add
                                                                                                            
+
                                                                                                            Admin Site - BookInstance Add
                                                                                                            
 
 
                                                                                                            Créez plusieurs de ces enregistrements pour chacun de vos livres. Définissez un statut Available (Disponible) pour certains d'entre eux et On loan (Prêt) pour d’autres. Pour un statut différent de Available, vous devrez préciser une date d'échéance à venir.
                                                                                                            
 
@@ -141,10 +142,10 @@ Cela devrait être de la forme : admin.site.register(Language) et n
    
                                                                                                          • Ajouter des options supplémentaires au menu Actions dans les vues de liste et choisir l'emplacement où ce menu est affiché dans le formulaire.
                                                                                                            • 
   
  
- 
                                                                                                          • Vues détaillées
+ 
                                                                                                          • Vues détaillées
   
                                                                                                              
-   
                                                                                                            • Choisir les champs à afficher (ou à exclure), ainsi que leur ordre, leur groupement, leur caractère modifiable, le widget utilisé, leur orientation, etc.
                                                                                                              • 
-   
                                                                                                            • Ajouter des champs associés à un enregistrement pour permettre la modification en ligne (par exemple, ajoutez la possibilité d'ajouter et de modifier des enregistrements de livre lors de la création de leur auteur).
                                                                                                              • 
+   
                                                                                                            • Choisir les champs à afficher (ou à exclure), ainsi que leur ordre, leur groupement, leur caractère modifiable, le widget utilisé, leur orientation, etc.
                                                                                                              • 
+   
                                                                                                            • Ajouter des champs associés à un enregistrement pour permettre la modification en ligne (par exemple, ajoutez la possibilité d'ajouter et de modifier des enregistrements de livre lors de la création de leur auteur).
                                                                                                              • 
   
                                                                                                            
  
                                                                                                            • 
 
@@ -195,7 +196,7 @@ class BookInstanceAdmin(admin.ModelAdmin):
 
 
                                                                                                            La liste des auteurs (objet Author) est affichée dans l'application LocalLibrary à l'aide du nom généré par la méthode  __str__(). Ceci fonctionne bien, judqu'à ce que vous aurez de nombreux auteurs et éventuellement des doublons parmi ces auteurs. Pour bien les différencier, ou simplement parce que vous souhaitez avoir directement plus d'information, vous allez utiliser la directive list_display pour ajouter d'autres champs de l'objet Author.
                                                                                                            
 
-
                                                                                                            Modifiez votre classe AuthorAdmin comme décrit ci-dessous (vous pouvez copier et coller le code). Les noms de champs à afficher dans la liste sont déclarés dans un tuple dans l'ordre requis. Ils sont identiques à ceux spécifiés dans votre modèle d'objet Author.
                                                                                                            
+
                                                                                                            Modifiez votre classe AuthorAdmin comme décrit ci-dessous (vous pouvez copier et coller le code). Les noms de champs à afficher dans la liste sont déclarés dans un tuple dans l'ordre requis. Ils sont identiques à ceux spécifiés dans votre modèle d'objet Author.
                                                                                                            
 
 
                                                                                                            class AuthorAdmin(admin.ModelAdmin):
     list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
@@ -203,7 +204,7 @@ class BookInstanceAdmin(admin.ModelAdmin):
 
 
                                                                                                            Si vous accèdez à la page d'administration des auteurs, vous devriez obtenir une page équivalente à celle ci-dessous :
                                                                                                            
 
-
                                                                                                            Admin Site - Improved Author List
                                                                                                            
+
                                                                                                            Admin Site - Improved Author List
                                                                                                            
 
 
                                                                                                            Pour les livres, nous allons visulaiser les objets  Book en affichant les champs author and genre. Le champs author est de type ForeignKey décrivant une relation un à n. En conséquence, nous afficherons l'élément produit par la méthode __str__() de l'objet Author pour l'instance associée à votre livre. Le genre est une relation n à n, donc nous allons avoir à traiter son affichage de manière particulière. Modifiez la classe BookAdmin comme suit :
                                                                                                            
 
@@ -211,10 +212,10 @@ class BookInstanceAdmin(admin.ModelAdmin):
     list_display = ('title', 'author', 'display_genre')
 
                                                                                                            
 
-
                                                                                                            Le champ genre représente une relation n à n (ManyToManyField) qui ne peut pas être prise en charge par la directive list_display. Le coût d'accès à la base de donnée peut être important et donc le cadriciel se protège de ce phénomène. A la place, nous devons définir une fonction(display_genre) qui permettra de traiter l'affichage des informations souhaitées pour le genre.
                                                                                                            
+
                                                                                                            Le champ genre représente une relation n à n (ManyToManyField) qui ne peut pas être prise en charge par la directive list_display. Le coût d'accès à la base de donnée peut être important et donc le cadriciel se protège de ce phénomène. A la place, nous devons définir une fonction(display_genre) qui permettra de traiter l'affichage des informations souhaitées pour le genre.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: C'est dans un but pédagogique que nous recherchons ici l'affichage du genre qui n'a peut-être pas nécessaire d'intérêt et peut représenter un coût d'accès. Nous montrons, ici, comment appler les fonctions dans vos modèles ce qui sera très utile pour la suite de vos applications  — par exemple pour ajouter un lien de suppression de vos enregistrements en liste.
                                                                                                            
+
                                                                                                            Note : C'est dans un but pédagogique que nous recherchons ici l'affichage du genre qui n'a peut-être pas nécessaire d'intérêt et peut représenter un coût d'accès. Nous montrons, ici, comment appler les fonctions dans vos modèles ce qui sera très utile pour la suite de vos applications  — par exemple pour ajouter un lien de suppression de vos enregistrements en liste.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Ajoutez le code ci-dessous dans votre modèle d'objet Book (concrètement dans le fichier locallibrary/catalog/models.py). Cette fonction génère une chaîne de caractère contenant les trois premières valeurs de tous les genres (s'ils existent) et créer une courte destription (short_description) qui sera utilisé par le site d'administration avec cette méthode.
                                                                                                            
@@ -228,12 +229,12 @@ class BookInstanceAdmin(admin.ModelAdmin):
 
 
                                                                                                            Après avoir sauvegardé vos fichiers models.py et admin.py, vous pouvez accéder à la page web d'administration des livres et vous y découvrirez une page semblable à celle ci-dessous :
                                                                                                            
 
-
                                                                                                            Admin Site - Improved Book List
                                                                                                            
+
                                                                                                            Admin Site - Improved Book List
                                                                                                            
 
 
                                                                                                            Les champs Genre Language ne dispose que d'une seule valeur. Il n'est donc pas utile de créer une page d'affichage spélicale.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Vous trouverez en fin d'article dans la défis personnel des propositions pour améliorer les ouvrages en prêt BookInstance !
                                                                                                            
+
                                                                                                            Note : Vous trouverez en fin d'article dans la défis personnel des propositions pour améliorer les ouvrages en prêt BookInstance !
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Ajouter des filtres
                                                                                                            
@@ -246,14 +247,14 @@ class BookInstanceAdmin(admin.ModelAdmin):
 
 
                                                                                                            La page de la vue en liste des ouvrages à consultation (BookInstance) est désormais agrémentée d'un bloc de filtrage par statut (champs status) et date de retour (due back). Vous pouvez sélectionner la valeur de ces deux critères de filtrage (remarquez la manière avec laquelle les valeurs des critères est proposée).
                                                                                                            
 
-
                                                                                                            Admin Site - BookInstance List Filters
                                                                                                            
+
                                                                                                            Admin Site - BookInstance List Filters
                                                                                                            
 
 
                                                                                                            Organiser la vue d'affichage d'un modèle
                                                                                                            
 
 
                                                                                                            La vue est agencée, par défaut, en affichant verticalement dans l'ordre de déclaration des champs de l'objet modèle. Cette règle d'affichage peut être modifiée en indiquant quels champs afficher (ou exclure) et organiser les informations en sections avec un affichage horizontal ou vertical et les widgets à utiliser.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Les modèles de l'application LocalLibrary ne sont pas très compliqués sans énormément d'information à traiter. Il n'y a pas un grand besoin de changement d'affichage ; les éléments ci-dessous sont données pour avoir une idée des possibilités et savoir, le moment venu, comment faire.
                                                                                                            
+
                                                                                                            Note : Les modèles de l'application LocalLibrary ne sont pas très compliqués sans énormément d'information à traiter. Il n'y a pas un grand besoin de changement d'affichage ; les éléments ci-dessous sont données pour avoir une idée des possibilités et savoir, le moment venu, comment faire.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Contrôler l'affichage et la dispostion des champs
                                                                                                            
@@ -269,10 +270,10 @@ class BookInstanceAdmin(admin.ModelAdmin):
 
 
                                                                                                            La page web de votre application locale devrait ressembler à celle ci-dessous :
                                                                                                            
 
-
                                                                                                            Admin Site - Improved Author Detail
                                                                                                            
+
                                                                                                            Admin Site - Improved Author Detail
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Vous pouvez aussi utiliser l'attribut exclude pour identifier des attributs du modèle que vous souhaitez exclure de l'affichage (les autres attributs seront alors affichés). Pour plus de détails vous pouvez consulter la documentation Django sur l'attribut exclude.
                                                                                                            
+
                                                                                                            Note : Vous pouvez aussi utiliser l'attribut exclude pour identifier des attributs du modèle que vous souhaitez exclure de l'affichage (les autres attributs seront alors affichés). Pour plus de détails vous pouvez consulter la documentation Django sur l'attribut exclude.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Organiser des sections dans votre vue de détail
                                                                                                            
@@ -298,7 +299,7 @@ class BookInstanceAdmin(admin.ModelAdmin):
 
 
                                                                                                            Le résultat de cette description devrait vous apparaître de manière analogue à celle présente  ci-dessous :
                                                                                                            
 
-
                                                                                                            Admin Site - Improved BookInstance Detail with sections
                                                                                                            
+
                                                                                                            Admin Site - Improved BookInstance Detail with sections
                                                                                                            
 
 
                                                                                                            Publier des enregistrements associés
                                                                                                            
 
@@ -317,12 +318,12 @@ class BookAdmin(admin.ModelAdmin):
 
 
                                                                                                            Si vous allez consulter un livre, vous devriez pouvoir, au bas de la page, consulter la liste des copies enregistrées :
                                                                                                            
 
-
                                                                                                            Admin Site - Book with Inlines
                                                                                                            
+
                                                                                                            Admin Site - Book with Inlines
                                                                                                            
 
 
                                                                                                            Dans le cas présent nous avons juste décidé d'afficher toutes les informations des copies associées à un livre. Si vous consultez sur la documentation Django les informations relatives au type TabularInline vous aurez accès à l'ensemble des éléments qui permettent de filtrer et afficher les éléments dont vous aurez besoin. 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Il y a quelques limitations pénibles à ces outils. Si vous observez bien la liste des copies pour un ouvrage, vous decouvrirez des copies fantômes sans nom et informations pré-reservées pour de futures instances à enregistrer. Il serait préférable de ne pas les avoir et vous devriez alors appliquer un filtre pour éliminer de l'affichage ces copies. Vous pourriez aussi ajouter une section particulière pour permettre d'ajouter de nouvelles copies dans les rayonnages... La première solution est assez rapide à traiter en utilisant l'attribut extra à 0 dans la définition de l'objet BooksInstanceInline ... essayez !
                                                                                                            
+
                                                                                                            Note : Il y a quelques limitations pénibles à ces outils. Si vous observez bien la liste des copies pour un ouvrage, vous decouvrirez des copies fantômes sans nom et informations pré-reservées pour de futures instances à enregistrer. Il serait préférable de ne pas les avoir et vous devriez alors appliquer un filtre pour éliminer de l'affichage ces copies. Vous pourriez aussi ajouter une section particulière pour permettre d'ajouter de nouvelles copies dans les rayonnages... La première solution est assez rapide à traiter en utilisant l'attribut extra à 0 dans la définition de l'objet BooksInstanceInline ... essayez !
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Défi
                                                                                                            
@@ -354,18 +355,18 @@ class BookAdmin(admin.ModelAdmin):
 
 
diff --git a/files/fr/learn/server-side/django/development_environment/index.html b/files/fr/learn/server-side/django/development_environment/index.html
index 4ba256c3a7..326bce1716 100644
--- a/files/fr/learn/server-side/django/development_environment/index.html
+++ b/files/fr/learn/server-side/django/development_environment/index.html
@@ -7,9 +7,9 @@ translation_of: Learn/Server-side/Django/development_environment
 
 
                                                                                                            {{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}
                                                                                                            
 
-
                                                                                                            Maintenant que vous savez à quoi sert Django, nous allons vous montrer comment mettre en place et tester un environnement de développement Django sous Windows, Linux (Ubuntu) et macOS — Peu importe votre système d'exploitation, cet article devrait vous fournir de quoi commencer à développer des applications Django.
                                                                                                            
+
                                                                                                            Maintenant que vous savez à quoi sert Django, nous allons vous montrer comment mettre en place et tester un environnement de développement Django sous Windows, Linux (Ubuntu) et macOS — Peu importe votre système d'exploitation, cet article devrait vous fournir de quoi commencer à développer des applications Django.
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Pré-requis:
 
 
                                                                                                            
+
                                                                                                            
@@ -48,7 +48,7 @@ translation_of: Learn/Server-side/Django/development_environment
 
                                                                                                            Chacune de ces options requiert une configuration et une installation légèrement différente. Les sous-sections ci-dessous vous expliquent différents choix. Dans le reste de l'article, nous vous montrerons comment installer Django sur un nombre restreint de systèmes d'exploitation, et nous supposerons que cette installation aura été suivie pour tout le reste du module.
                                                                                                            
-
                                                                                                            Note: D'autres options d'installation possibles sont traitées dans la documentation officielle de Django. Les liens vers la documentation appropriée peuvent-être trouvés ci-dessous.
                                                                                                            
+
                                                                                                            Note : D'autres options d'installation possibles sont traitées dans la documentation officielle de Django. Les liens vers la documentation appropriée peuvent-être trouvés ci-dessous.
                                                                                                            
 
                                                                                                            Quels systèmes d'exploitation sont supportés ?
                                                                                                            
@@ -64,7 +64,7 @@ translation_of: Learn/Server-side/Django/development_environment
 
                                                                                                            Si besoin, les versions de Python 3.5 et ultérieures peuvent être utilisées (le support pour Python 3.5 sera abandonné lors de la sortie des prochaines versions).
                                                                                                            
-
                                                                                                            Note: Python 2.7 ne peut pas être utilisé avec Django 2.1 (la série Django 1.11.x est la dernière à supporter Python 2.7).
                                                                                                            
+
                                                                                                            Note : Python 2.7 ne peut pas être utilisé avec Django 2.1 (la série Django 1.11.x est la dernière à supporter Python 2.7).
                                                                                                            
 
                                                                                                            Où peut-on télécharger Django ?
                                                                                                            
@@ -86,7 +86,7 @@ translation_of: Learn/Server-side/Django/development_environment
 
                                                                                                            Dans cet article (et quasiment tout le module), nous utiliserons la base SQLite, qui sauvegarde ses données dans des fichiers. SQLite a été conçu pour être utilisé comme une base de données légère, mais elle ne peut pas supporter un haut niveau de compétition. Elle est cependant un excellent choix pour des applications qui sont prioritairement en lecture seule.
                                                                                                            
-
                                                                                                            Note: Django est configuré pour utiliser SQLite par défaut lorsque vous démarrez le projet de votre site web en utilisant les outils standards (django-admin). C'est un très bon choix lorsque vous débutez car elle ne requiert aucune configuration ou installation particulière.
                                                                                                            
+
                                                                                                            Note : Django est configuré pour utiliser SQLite par défaut lorsque vous démarrez le projet de votre site web en utilisant les outils standards (django-admin). C'est un très bon choix lorsque vous débutez car elle ne requiert aucune configuration ou installation particulière.
                                                                                                            
 
                                                                                                            Installation globale ou dans un environnement virtuel Python ?
                                                                                                            
@@ -94,7 +94,7 @@ translation_of: Learn/Server-side/Django/development_environment
 
                                                                                                            Lorsque vous installez Python3, vous obtenez un environnement global unique partagé par tout le code Python3. Bien que vous puissiez installer n'importe quel package Python souhaité dans cet environnement, vous ne pouvez disposer que d'une seule version d'un package donné à la fois.
                                                                                                            
-
                                                                                                            Note: Les applications installées dans l'environnement global peuvent potentiellement entrer en conflit avec les autres (i.e. si elles dépendent de versions différentes d'un même package).
                                                                                                            
+
                                                                                                            Note : Les applications installées dans l'environnement global peuvent potentiellement entrer en conflit avec les autres (i.e. si elles dépendent de versions différentes d'un même package).
                                                                                                            
 
                                                                                                            Si vous installez Django dans l'environnement par défaut/global, vous ne pourrez alors cibler qu'une seule version de Django sur votre machine. Cela peut devenir un problème si vous souhaitez créer de nouveaux sites web (utilisant la dernière version de Django) tout en maintenant d'autres sites web dépendant de versions antérieures.
                                                                                                            
@@ -110,15 +110,15 @@ translation_of: Learn/Server-side/Django/development_environment
 
                                                                                                            Cette section décrit brièvement comment vérifier quelle version de Python sont disponibles, et comment installer de nouvelles versions si nécessaire, sur Ubuntu Linux 18.04, macOS et Windows 10.
                                                                                                            
-
                                                                                                            Note: En fonction de votre plateforme, vous aurez probablement aussi besoin d'installer Python/pip depuis le gestionnaire de packages de votre système d'exploitation, ou via d'autre moyens. Pour la plupart des plateformes, vous pouvez télécharger les fichiers d'installation requis depuis https://www.python.org/downloads/ et les installer en utilisant la méthode appropriée à votre plateforme.
                                                                                                            
+
                                                                                                            Note : En fonction de votre plateforme, vous aurez probablement aussi besoin d'installer Python/pip depuis le gestionnaire de packages de votre système d'exploitation, ou via d'autre moyens. Pour la plupart des plateformes, vous pouvez télécharger les fichiers d'installation requis depuis https://www.python.org/downloads/ et les installer en utilisant la méthode appropriée à votre plateforme.
                                                                                                            
 
                                                                                                            Ubuntu 18.04
                                                                                                            Ubuntu Linux 18.04 LTS inclut par défaut Python 3.6.6. Vous pouvez vous en assurer en exécutant les commandes suivantes depuis le terminal bash :
                                                                                                            
 
-
                                                                                                            python3 -V
- Python 3.6.6
                                                                                                            
+
                                                                                                            python3 -V
+ Python 3.6.6
                                                                                                            Toutefois, l'outil d'Index des Packages Python dont vous aurez besoin pour installer des packages avec Python 3 (y compris Django) n'est pas disponible par défaut. Vous pouvez installer pip3 avec le terminal bash avec :
                                                                                                            
 
@@ -128,8 +128,8 @@ translation_of: Learn/Server-side/Django/development_environment
 
 
                                                                                                            macOS "El Capitan"et les versions plus récentes n'incluent pas Python 3. Vous pouvez vous en assurer en exécutant les commandes suivantes dans votre terminal bash :
                                                                                                            
 
-
                                                                                                            python3 -V
- -bash: python3: command not found
                                                                                                            
+
                                                                                                            python3 -V
+ -bash: python3ommand not found
                                                                                                            Vous pouvez facilement installer Python 3 (ainsi que l'outil pip3) sur python.org:
                                                                                                            
 
@@ -145,8 +145,8 @@ translation_of: Learn/Server-side/Django/development_environment
 
 
                                                                                                            Vous pouvez désormais confirmer la bonne installation en vérifiant votre version de Python 3 comme indiqué ci-dessous :
                                                                                                            
 
-
                                                                                                            python3 -V
- Python 3.7.2
+
                                                                                                            python3 -V
+ Python 3.7.2
 
                                                                                                            
 
 
                                                                                                            Vous pouvez aussi vérifier que pip3 est correctement installé en listant les packages disponibles :
                                                                                                            
@@ -170,17 +170,17 @@ translation_of: Learn/Server-side/Django/development_environment
 
 
                                                                                                            Vous pouvez ensuite vérifier que Python s'est correctement installé en tapant le texte suivant dans votre invite de commande :
                                                                                                            
 
-
                                                                                                            py -3 -V
- Python 3.7.2
+
                                                                                                            py -3 -V
+ Python 3.7.2
 
                                                                                                            
 
 
                                                                                                            L'installeur Windows inclut pip3 (le gestionnaire de packages Python) par défaut. Vous pouvez lister les packages installés de la manière suivante :
                                                                                                            
 
-
                                                                                                            pip3 list
+
                                                                                                            pip3 list
 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: L'installeur devrait configurer tout ce dont vous avez besoin pour que les commandes ci-dessus fonctionnent. Toutefois, si vous obtenez un message vous indiquant que Python ne peut pas être trouvé (Python cannot be found), il est possible que vous ayez oublié de l'ajouter à votre PATH système. Vous pouvez faire cela en réexécutant l'installeur, sélectionnez "Modifier", puis cochez la case intitulée "Ajouter Python aux variables d'environnement" sur le deuxième page.
                                                                                                            
+
                                                                                                            Note : L'installeur devrait configurer tout ce dont vous avez besoin pour que les commandes ci-dessus fonctionnent. Toutefois, si vous obtenez un message vous indiquant que Python ne peut pas être trouvé (Python cannot be found), il est possible que vous ayez oublié de l'ajouter à votre PATH système. Vous pouvez faire cela en réexécutant l'installeur, sélectionnez "Modifier", puis cochez la case intitulée "Ajouter Python aux variables d'environnement" sur le deuxième page.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Utiliser Django dans un environnement virtuel Python
                                                                                                            
@@ -206,7 +206,7 @@ export PROJECT_HOME=$HOME/Devel
 source /usr/local/bin/virtualenvwrapper.sh
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Les variables VIRTUALENVWRAPPER_PYTHON et VIRTUALENVWRAPPER_VIRTUALENV_ARGS pointent vers l'emplacement d'installation par défaut de Python3, et source /usr/local/bin/virtualenvwrapper.sh pointe vers l'emplacement par défaut du script virtualenvwrapper.sh. Si le virtualenv ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).
                                                                                                            
+
                                                                                                            Note : Les variables VIRTUALENVWRAPPER_PYTHON et VIRTUALENVWRAPPER_VIRTUALENV_ARGS pointent vers l'emplacement d'installation par défaut de Python3, et source /usr/local/bin/virtualenvwrapper.sh pointe vers l'emplacement par défaut du script virtualenvwrapper.sh. Si le virtualenv ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).
                                                                                                            
  
                                                                                                            
  Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes which virtualenvwrapper.sh et which python3.
                                                                                                            
 
                                                                                                            
@@ -242,7 +242,7 @@ export PROJECT_HOME=$HOME/Devel
 source /usr/local/bin/virtualenvwrapper.sh
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: La variable VIRTUALENVWRAPPER_PYTHON pointe vers l'emplacement d'installation par défaut de Python3, et source /usr/local/bin/virtualenvwrapper.sh pointe vers l'emplacement par défaut du script virtualenvwrapper.sh. Si le virtualenv ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).
                                                                                                            
+
                                                                                                            Note : La variable VIRTUALENVWRAPPER_PYTHON pointe vers l'emplacement d'installation par défaut de Python3, et source /usr/local/bin/virtualenvwrapper.sh pointe vers l'emplacement par défaut du script virtualenvwrapper.sh. Si le virtualenv ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).
                                                                                                            
 
 
                                                                                                            Par exemple, une installation test sur macOS a résulté en l'ajout des lignes suivantes dans le fichier startup :
                                                                                                            
 
@@ -257,7 +257,7 @@ source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.s
 
                                                                                                            Ce sont les mêmes lignes que pour Ubuntu, mais le nom du fichier de configuration caché du répertoire home est différent : .bash_profile dans votre répertoire home.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Si vous n'arrivez pas à trouver le fichier .bash_profile depuis le finder, vous pouvez aussi l'ouvrir depuis le terminal en utilisant nano.
                                                                                                            
+
                                                                                                            Note : Si vous n'arrivez pas à trouver le fichier .bash_profile depuis le finder, vous pouvez aussi l'ouvrir depuis le terminal en utilisant nano.
                                                                                                            
 
 
                                                                                                            La commande sera la suivante :
                                                                                                            
 
@@ -298,7 +298,7 @@ virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get
 
                                                                                                            Maintenant que vous êtes dans votre environnement virtuel vous pouvez installer Django et commencer à développer.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: A partir de ce point dans l'article (et donc dans le module), vous pourrez considérer que toutes les commandes seront exécutées dans un environnement virtuel Python comme celui que nous avons mis en place plus haut.
                                                                                                            
+
                                                                                                            Note : A partir de ce point dans l'article (et donc dans le module), vous pourrez considérer que toutes les commandes seront exécutées dans un environnement virtuel Python comme celui que nous avons mis en place plus haut.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Utiliser un environnement virtuel
                                                                                                            
@@ -329,7 +329,7 @@ py -3 -m django --version
  2.1.5
                                                                                                            
-
                                                                                                            Note: Si la commande Windows ci-dessus n'indique aucun module Django présent, essayez :
                                                                                                            
+
                                                                                                            Note : Si la commande Windows ci-dessus n'indique aucun module Django présent, essayez :
                                                                                                            
 
 
                                                                                                            py -m django --version
                                                                                                            
 
@@ -337,7 +337,7 @@ py -3 -m django --version
 
                                                                                                            
-
                                                                                                            Important: Le reste de ce module utilise les commandes Linux pour invoquer Python 3 (python3) . . Si vous travaillez sous Windows , remplacez simplement ce préfixe avec : py -3
                                                                                                            
+
                                                                                                            Attention : Le reste de ce module utilise les commandes Linux pour invoquer Python 3 (python3) . . Si vous travaillez sous Windows , remplacez simplement ce préfixe avec : py -3
                                                                                                            
 
                                                                                                            Tester votre installation
                                                                                                            
@@ -369,7 +369,7 @@ Quit the server with CONTROL-C.
 
                                                                                                            
-
                                                                                                            Note : La commande ci-dessus montre le résultat de l'exécution sur Linux/macOS. Vous pouvez ignorer les warnings à propos des "15 unapplied migration(s)" à partir de là !
                                                                                                            
+
                                                                                                            Note : La commande ci-dessus montre le résultat de l'exécution sur Linux/macOS. Vous pouvez ignorer les warnings à propos des "15 unapplied migration(s)" à partir de là !
                                                                                                            
 
                                                                                                            Maintenant que votre serveur est lancé, vous pouvez voir le site en naviguant vers l'URL suivante depuis votre navigateur local : http://127.0.0.1:8000/. Vous devriez voir un site ressemblant à celui-ci :
                                                                                                            
diff --git a/files/fr/learn/server-side/django/forms/index.html b/files/fr/learn/server-side/django/forms/index.html
index 0c877c8946..2d63644055 100644
--- a/files/fr/learn/server-side/django/forms/index.html
+++ b/files/fr/learn/server-side/django/forms/index.html
@@ -17,13 +17,13 @@ translation_of: Learn/Server-side/Django/Forms
 
 
                                                                                                            {{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}
                                                                                                            
 
-
                                                                                                            Dans cette formation nous allons vous montrer comment travailler avec les formulaires HTML sous Django afin de créer, modifier et supprimer des instances de modèle. Pour illustrer le raisonnement, nous allons étendre le site web LocalLibrary pour permettre aux bibliothécaires d'utiliser nos formulaires (plutôt que l'application d'administration par défaut) pour prolonger la durée de prêt des livres, et également pour ajouter, mettre à jour et supprimer des auteurs. 
                                                                                                            
+
                                                                                                            Dans cette formation nous allons vous montrer comment travailler avec les formulaires HTML sous Django afin de créer, modifier et supprimer des instances de modèle. Pour illustrer le raisonnement, nous allons étendre le site web LocalLibrary pour permettre aux bibliothécaires d'utiliser nos formulaires (plutôt que l'application d'administration par défaut) pour prolonger la durée de prêt des livres, et également pour ajouter, mettre à jour et supprimer des auteurs. 
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis :
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                            
+
                                                                                                            
-   
+   
@@ -34,11 +34,11 @@ translation_of: Learn/Server-side/Django/Forms
 
 
                                                                                                            Vue d'ensemble
                                                                                                            
 
-
                                                                                                            Un formulaire HTML regroupe au moins un champ remplissable et des composants élémentaires d'interface web.  Il peut être utilisé pour réunir des saisies de la part des utilisateurs avant envoi vers un serveur. Les formulaires sont souples: ils s'adaptent à plusieurs modes de saisie. En effet, Il existe des composants élementaires d'interfaces graphique pour des  modes de saisie non contrainte avec une zone de saisie de texte, ou resteinte au type date avec un date picker,  la saisie d'un variable optionnelle via une boîte à cocher,  d'un choix à faire parmi plusieurs valeurs possibles avec les boutons radio etc... . Les formulaires permettent de partager des informations avec le serveur de manière relativement sécurisée  car ils permettent d'envoyer des requêtes de  type POST protégeant de la falsification des requêtes inter-site.
                                                                                                            
+
                                                                                                            Un formulaire HTML regroupe au moins un champ remplissable et des composants élémentaires d'interface web.  Il peut être utilisé pour réunir des saisies de la part des utilisateurs avant envoi vers un serveur. Les formulaires sont souples: ils s'adaptent à plusieurs modes de saisie. En effet, Il existe des composants élementaires d'interfaces graphique pour des  modes de saisie non contrainte avec une zone de saisie de texte, ou resteinte au type date avec un date picker,  la saisie d'un variable optionnelle via une boîte à cocher,  d'un choix à faire parmi plusieurs valeurs possibles avec les boutons radio etc... . Les formulaires permettent de partager des informations avec le serveur de manière relativement sécurisée  car ils permettent d'envoyer des requêtes de  type POST protégeant de la falsification des requêtes inter-site.
                                                                                                            
 
-
                                                                                                            Bien que nous n'ayons pas encore créé de formulaire au cours de cette formation, nous en avons déjà rencontré sur l'interface d'administration Django Admin — par exemple la capture d'écran ci-dessous montre un formulaire d'édition  de l'un de nos modèle de Book  (livre), comprenant des composants élémentaires d'interface graphique de chois de valeur parmi une liste proposée,  et des zones des saisie de texte.
                                                                                                            
+
                                                                                                            Bien que nous n'ayons pas encore créé de formulaire au cours de cette formation, nous en avons déjà rencontré sur l'interface d'administration Django Admin — par exemple la capture d'écran ci-dessous montre un formulaire d'édition  de l'un de nos modèle de Book  (livre), comprenant des composants élémentaires d'interface graphique de chois de valeur parmi une liste proposée,  et des zones des saisie de texte.
                                                                                                            
 
-
                                                                                                            Admin Site - Book Add
                                                                                                            
+
                                                                                                            Admin Site - Book Add
                                                                                                            Travailler avec des formulaires peut s'avérer compliqué ! Les développeurs doivent non seulement écrire le code  HTML pour le formulaire, mais aussi vérifier et corriger sur le serveur les données saisies (et éventuellement aussi dans le navigateur), renvoyer le formulaire avec des messages d'erreur pour informer les usagers de tout champ invalide, prendre en charge les données quand elles passent l'étape de vérification, et finalement renvoyer une information à l'utilisateur d'une manière ou d'une autre pour indiquer ce succès. Les formulaires sous Django enlèvent beaucoup de travail à chacune de ces étapes, grâce à un cadriciel qui permet de déclarer des formulaires et leurs champs à travers un langage de programmation, puis d'utiliser ces objets non seulement pour générer le code HTML, mais aussi une grosse partie de la vérification des données et du retour d'information à l'utilisateur.
                                                                                                            
 
@@ -46,9 +46,9 @@ translation_of: Learn/Server-side/Django/Forms
 
 
                                                                                                            Formulaires HTML
                                                                                                            
 
-
                                                                                                            D'abord, un premier aperçu des formulaires HTML (HTML Forms). Soit un formulaire HTML simple, composé d'un unique champ de saisie texte , présent pour y entrer le nom d'une "équipe" quelconque, et son sa description dans l'étiquette associée :
                                                                                                            
+
                                                                                                            D'abord, un premier aperçu des formulaires HTML (HTML Forms). Soit un formulaire HTML simple, composé d'un unique champ de saisie texte , présent pour y entrer le nom d'une "équipe" quelconque, et son sa description dans l'étiquette associée :
                                                                                                            
 
-
                                                                                                            Simple name field example in HTML form
                                                                                                            
+
                                                                                                            Simple name field example in HTML form
                                                                                                            Le formulaire est défini en HTML comme une collection d'éléments enfermés entre deux balises <form> ... </form> contenant au moins une balise <input> dont la valeur d'attribut 'type' doit valoir "submit":
                                                                                                            
 
@@ -61,7 +61,7 @@ translation_of: Learn/Server-side/Django/Forms
 
 
                                                                                                            Bien qu'ici nous n'ayons qu'un champ de saisie texte destiné à recevoir le nom d'équipe, une formulaire pourrait avoir un nombre quelconque d'autres champs de saisie et leurs étiquettes de description associées. La valeur de l'attribut 'type' définit la sorte de composant élementaire d'interface graphique  affichée. Les attributs 'id' et 'name' permettent d'identifier le champ en JavaScript/CSS/HTML alors que l'attribut 'value' définit la valeur initiale du champ lorsqu'il est affiché pour la première fois. La description associée  est déclarée par la balise <label> (voir "Enter Name" au dessus) , avec un attribut 'for' devant contenir la valeur de l'attribut 'id' du champ imput à laquelle on souhaite l'associer.  
                                                                                                            
 
-
                                                                                                            La balise <input> dont l'attribut 'type' vaut submit sera affichée (par défaut) comme un bouton  qui peut être cliqué par l'utilisateur pour envoyer vers le serveur les données figurant dans tous les autres éléments de formulaire <input> (dans le cas présent, la valeur actuelle de 'team name'. Les attributs de formulaire déterminent d'une part la méthode HTTP (attribut method) utilisée pour envoyer les donnnées et d'autre part la destination des données sur le serveur (attribut action ):
                                                                                                            
+
                                                                                                            La balise <input> dont l'attribut 'type' vaut submit sera affichée (par défaut) comme un bouton  qui peut être cliqué par l'utilisateur pour envoyer vers le serveur les données figurant dans tous les autres éléments de formulaire <input> (dans le cas présent, la valeur actuelle de 'team name'. Les attributs de formulaire déterminent d'une part la méthode HTTP (attribut method) utilisée pour envoyer les donnnées et d'autre part la destination des données sur le serveur (attribut action ):
                                                                                                              
  
                                                                                                            • action :  Il s'agit de la destination (ressource ou URL) où sont envoyées les données lorsque le formulaire est soumis.  Si la valeur de cet attribut n'est pas initialisée (ou la chaine vide est affectée à cet attribut),  alors le formulaire sera renvoyé à l' URL de la page courante.
                                                                                                              • 
@@ -83,7 +83,7 @@ translation_of: Learn/Server-side/Django/Forms
 
 
                                                                                                              Voici ci-dessous un diagramme représentant les étapes de gestion d'un formulaire de requêtes, commencant par la demande par le navigateur d'une page, dont le code HTML se trouve contenir un formulaire (en vert).
                                                                                                              
 
-
                                                                                                              Updated form handling process doc.
                                                                                                              
+
                                                                                                              Updated form handling process doc.
                                                                                                              
 
 
                                                                                                              En se basant sur la lecture du diagramme ci-dessus, les tâches principales dont s'aquitte Django à l'occasion de la gestion d'un formulaire sont : 
                                                                                                              
 
@@ -209,12 +209,12 @@ class RenewBookForm(forms.Form):
 
                                                                                                              La configuration d'URL va rediriger les URLs ayant le format /catalog/book/<bookinstance id>/renew/ vers la fonction appelée renew_book_librarian() dans views.py, et envoyer l'id de BookInstance comme paramètre sous le nom pk. Le pattern ne fonctionnera que si pk est un uuid correctement formaté.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Nous pouvons appeler comme bon nous semble la donnée d'URL "pk" que nous avons capturée, car nous contrôlons complètement la fonction de notre view (nous n'utilisons pas une vue générique detail, laquelle attendrait des paramètres avec un certain nom). Cependant, le raccourci pk, pour "primary key", est une convention qu'il est raisonnable d'utiliser !
                                                                                                              
+
                                                                                                              Note : Nous pouvons appeler comme bon nous semble la donnée d'URL "pk" que nous avons capturée, car nous contrôlons complètement la fonction de notre view (nous n'utilisons pas une vue générique detail, laquelle attendrait des paramètres avec un certain nom). Cependant, le raccourci pk, pour "primary key", est une convention qu'il est raisonnable d'utiliser !
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Vue
                                                                                                              
 
-
                                                                                                              Comme nous l'avons expliqué ci-dessus dans Django form handling process, la vue doit retourner le formulaire par défaut s'il est appelé pour la première fois, et ensuite soit le retourner à nouveau avec les messages d'erreur si les données sont invalides, soit gérer les données et rediriger vers une nouvelle page si elles sont valides. Pour effectuer ces différentes actions, la vue doit être en mesure de savoir si elle est appelée pour la première fois (et retourner le formulaire par défaut) ou pour la deuxième fois ou plus (et valider les données).
                                                                                                              
+
                                                                                                              Comme nous l'avons expliqué ci-dessus dans Django form handling process, la vue doit retourner le formulaire par défaut s'il est appelé pour la première fois, et ensuite soit le retourner à nouveau avec les messages d'erreur si les données sont invalides, soit gérer les données et rediriger vers une nouvelle page si elles sont valides. Pour effectuer ces différentes actions, la vue doit être en mesure de savoir si elle est appelée pour la première fois (et retourner le formulaire par défaut) ou pour la deuxième fois ou plus (et valider les données).
                                                                                                              
 
 
                                                                                                              Pour les formulaires qui utilisent une requête POST pour envoyer une information au serveur, la manière la plus commune de procéder pour la vue est de tester le type de requête POST (if request.method == 'POST':) pour repérer des requêtes de type validation de formulaire, et GET (en utilisant une condition else) pour identifer une requête initiale de création de formulaire. Si vous voulez utiliser une requête GET pour envoyer vos données, alors une approche classique pour savoir si la vue est invoquée pour la première fois ou non est de lire les données du formulaire (p. ex. lire une valeur cachée dans le formulaire).
                                                                                                              
 
@@ -301,10 +301,10 @@ def renew_book_librarian(request, pk):
 
                                                                                                              Si le formulaire est valide, alors nous pouvons commencer à utiliser les données, en y accédant à travers l'attribut form.cleaned_data (p. ex. data = form.cleaned_data['renewal_date']). Ici nous ne faisons que sauvegarder dans la valeur due_back de l'objet BookInstance associé les données reçues.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Important : Alors que vous pouvez accéder aussi aux données de formulaire directement à travers la requête (par exemple request.POST['renewal_date'], ou request.GET['renewal_date'] si vous utilisez une requête GET), ce n'est PAS recommandé. Les données nettoyées sont assainies, validées et converties en types standard Python.
                                                                                                              
+
                                                                                                              Attention : Alors que vous pouvez accéder aussi aux données de formulaire directement à travers la requête (par exemple request.POST['renewal_date'], ou request.GET['renewal_date'] si vous utilisez une requête GET), ce n'est PAS recommandé. Les données nettoyées sont assainies, validées et converties en types standard Python.
                                                                                                              
 
                                                                                                              
 
-
                                                                                                              L'étape finale dans la partie "gestion de formulaire" de la vue est de rediriger vers une autre page, habituellement une page "success". Dans ce cas, nous utilisons HttpResponseRedirect et reverse() pour rediriger vers la vue appelée 'all-borrowed' (qui a été créée dans la partie "challenge" de Django Tutorial Part 8: User authentication and permissions. Si vous n'avez pas créé cette page, vous pouvez rediriger vers la page d'accueil à l'URL '/').
                                                                                                              
+
                                                                                                              L'étape finale dans la partie "gestion de formulaire" de la vue est de rediriger vers une autre page, habituellement une page "success". Dans ce cas, nous utilisons HttpResponseRedirect et reverse() pour rediriger vers la vue appelée 'all-borrowed' (qui a été créée dans la partie "challenge" de Django Tutorial Part 8: User authentication and permissions. Si vous n'avez pas créé cette page, vous pouvez rediriger vers la page d'accueil à l'URL '/').
                                                                                                              
 
 
                                                                                                              C'est tout ce qui est requis pour la gestion du formulaire lui-même, mais il nous faut encore restreindre l'accès à la vue aux seuls libraires. Nous devrions sans doute créer un nouveau réglage de permission dans BookInstance ("can_renew"), mais, pour ne pour ne pas compliquer les choses ici, nous allons simplement utiliser le décorateur de fonction @permission_required avec notre permission existante can_mark_returned.
                                                                                                              
 
@@ -372,7 +372,7 @@ def renew_book_librarian(request, pk):
 
 
                                                                                                              La majeure partie de ce code devrait vous être familière si vous avez suivi les tutoriels précédents. Nous étendons le template de base et ensuite redéfinissons le block "content". Nous sommes en mesure de référencer \{{ book_instance }} (et ses variables), puisqu'il a été passé dans l'objet context par la fonction render(), et nous utilisons tout cela pour lister le titre du livre, son emprunteur et la date originale de retour.
                                                                                                              
 
-
                                                                                                              Le code du formulaire est relativement simple. Nous déclarons d'abord les tags form, en précisant où le formulaire doit être adressé (action) et la method utilisée pour soumettre les donées (ici un "HTTP POST"). Si vous vous rappelez ce qui a été dit en haut de cette page (aperçu sur les HTML Forms), une action vide comme ici signifie que les données de formulaire seront postées à nouveau à l'URL actuelle (ce qui est le comportement que nous voulons !). À l'intérieur des tags, nous définissons le bouton , sur lequel l'utilisateur peut appuyer pour envoyer les données. Le {% csrf_token %} ajouté juste à l'intérieur des tags "form" est un des éléments de protection utilisés par Django contre les "cross-site forgery".
                                                                                                              
+
                                                                                                              Le code du formulaire est relativement simple. Nous déclarons d'abord les tags form, en précisant où le formulaire doit être adressé (action) et la method utilisée pour soumettre les donées (ici un "HTTP POST"). Si vous vous rappelez ce qui a été dit en haut de cette page (aperçu sur les HTML Forms), une action vide comme ici signifie que les données de formulaire seront postées à nouveau à l'URL actuelle (ce qui est le comportement que nous voulons !). À l'intérieur des tags, nous définissons le bouton , sur lequel l'utilisateur peut appuyer pour envoyer les données. Le {% csrf_token %} ajouté juste à l'intérieur des tags "form" est un des éléments de protection utilisés par Django contre les "cross-site forgery".
                                                                                                              
 
 
                                                                                                              
 
                                                                                                              Note : Ajoutez le {% csrf_token %} à tout template Django que vous créeez et qui utilise POST pour soumettre les données. Cela réduira les risques qu'un utilisateur mal intentionné pirate vos formulaires.
                                                                                                              
@@ -426,12 +426,12 @@ def renew_book_librarian(request, pk):
 
 
                                                                                                              Tester la page
                                                                                                              
 
-
                                                                                                              Si vous avez accepté le "challenge" dans Django Tutorial Part 8: User authentication and permissions, vous avez une liste de tous les livres empruntés dans la bibliothèque, ce qui n'est visible que pour le staff de la bibliothèque. Nous pouvons ajouter un lien vers notre page de renouvellement après chaque élément, en utilisant le code de template suivant.
                                                                                                              
+
                                                                                                              Si vous avez accepté le "challenge" dans Django Tutorial Part 8: User authentication and permissions, vous avez une liste de tous les livres empruntés dans la bibliothèque, ce qui n'est visible que pour le staff de la bibliothèque. Nous pouvons ajouter un lien vers notre page de renouvellement après chaque élément, en utilisant le code de template suivant.
                                                                                                              
 
 
                                                                                                              {% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a> {% endif %}
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Souvenez-vous que votre login de test devra avoir la permission "catalog.can_mark_returned" pour pouvoir accéder la page de renouvellement de livre (utilisez peut-être votre compte superuser).
                                                                                                              
+
                                                                                                              Note : Souvenez-vous que votre login de test devra avoir la permission "catalog.can_mark_returned" pour pouvoir accéder la page de renouvellement de livre (utilisez peut-être votre compte superuser).
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Vous pouvez aussi construire manuellement une URL de test comme ceci : http://127.0.0.1:8000/catalog/book/<bookinstance_id>/renew/ (un id de bookinstance valide peut être obtenu en navigant vers une page de détail de livre dans votre bibliothèque, et en copiant le champ id).
                                                                                                              
@@ -440,15 +440,15 @@ def renew_book_librarian(request, pk):
 
 
                                                                                                              Si tout a bien marché, le formulaire par défaut ressemblera à ceci :
                                                                                                              
 
-
                                                                                                              
+
                                                                                                              
 
 
                                                                                                              Le formulaire avec valeur erronée ressemblera à ceci :
                                                                                                              
 
-
                                                                                                              
+
                                                                                                              
 
 
                                                                                                              La liste de tous les livres avec les liens vers le renouvellement ressemblera à ceci :
                                                                                                              
 
-
                                                                                                              
+
                                                                                                              
 
 
                                                                                                              ModelForms
                                                                                                              
 
@@ -468,7 +468,7 @@ class RenewBookModelForm(ModelForm):
 
 
 
                                                                                                              
-
                                                                                                              Note : Cela peut ne pas sembler beaucoup plus simple que d'utiliser un simple Form, et ça ne l'est effectivement pas dans ce cas, parce que nous n'avons qu'un seul champ. Cependant, si vous avez beaucoup de champs, cela peut réduire notablement la quantité de code !
                                                                                                              
+
                                                                                                              Note : Cela peut ne pas sembler beaucoup plus simple que d'utiliser un simple Form, et ça ne l'est effectivement pas dans ce cas, parce que nous n'avons qu'un seul champ. Cependant, si vous avez beaucoup de champs, cela peut réduire notablement la quantité de code !
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Le reste de l'information vient des définitions de champ données par le modèle (par ex. les labels, les widgets, le texte d'aide, les messages d'erreur). S'ils ne sont pas suffisamment satisfaisants, nous pouvons les réécrire dans notre class Meta, en précisant un dictionnaire contenant le champ à modifier et sa nouvelle valeur. Par exemple, dans ce formulaire, nous pourrions souhaiter, pour notre champ, un label tel que "Renewal date" (plutôt que celui par défaut, basé sur le nom du champ : Due Back), et nous voulons aussi que notre texte d'aide soit spécifique à ce cas d'utilisation. La classe Meta ci-dessous vous montre comment réécrire ces champs, et vous pouvez pareillement définir widgets et error_messages si les valeurs par défaut ne sont pas suffisantes.
                                                                                                              
@@ -514,7 +514,7 @@ class RenewBookModelForm(ModelForm):
 
                                                                                                              L'algorithme de gestion des formulaires que nous avons utilisé ci-dessus dans notre exemple de vue basée sur une fonction, représente un processus extrêmement commun dans vues destinées à éditer un formulaire. Django abstrait pour vous la plus grande partie de ce processus répétitif ("boilerplate") en proposant des generic editing views pour les vues de création, éditition et suppression basées sur des modèles. Ces vues génériques non seulement assument le comportement d'une vue, mais elles créent automatiquement la classe de formulaire (un ModelForm) pour vous à partir du modèle.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : En plus des vues d'édition décrites ici, il existe aussi une classe FormView, qui se tient, en termes de rapport "flexibilité"/"effort codage", à mi-chemin entre notre vue basée sur une fonction et les autres vues génériques. En utilisant FormView, vous avez encore besoin de créer votre Form, mais vous n'avez pas besoin d'implémenter tous les éléments d'une gestion standard de formulaire. À la place, vous n'avez qu'à fournir une implémentation de la fonction qui sera appelée une fois que les données envoyées sont reconnues valides.
                                                                                                              
+
                                                                                                              Note : En plus des vues d'édition décrites ici, il existe aussi une classe FormView, qui se tient, en termes de rapport "flexibilité"/"effort codage", à mi-chemin entre notre vue basée sur une fonction et les autres vues génériques. En utilisant FormView, vous avez encore besoin de créer votre Form, mais vous n'avez pas besoin d'implémenter tous les éléments d'une gestion standard de formulaire. À la place, vous n'avez qu'à fournir une implémentation de la fonction qui sera appelée une fois que les données envoyées sont reconnues valides.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Dans cette section, nous allons utiliser des vues génériques d'édition pour créer des pages afin de pouvoir ajouter les fonctionnalités de création, d'édition et de suppression des enregistrements de type Author de notre bibliothèque, en fournissant efficacement une réimplémentation basique de certaines parties du site Admin (cela peut être intéressant si vous avez besoin d'offrir une fonctionnalité admin d'une manière plus flexible que ce qui peut être présenté par le site admin).
                                                                                                              
@@ -601,7 +601,7 @@ class AuthorDelete(DeleteView):
 
                                                                                                              Les pages de création, modification et suppression d'auteur sont maintenant prêtes à être testées (nous ne nous mettons pas en peine pour cette fois, bien que vous puissiez le faire si vous le souhaiter, de les accrocher dans la barre latérale du site).
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Les utilisateurs observateurs auront remarqué que nous n'avons rien fait pour empêcher les utilisateurs non autorisés d'accéder ces pages ! Nous laissons cela comme exercice pour vous (suggestion : vous pourriez utiliser le PermissionRequiredMixin, et soit créer une nouvelle permission, soit réutiliser notre permissioncan_mark_returned ).
                                                                                                              
+
                                                                                                              Note : Les utilisateurs observateurs auront remarqué que nous n'avons rien fait pour empêcher les utilisateurs non autorisés d'accéder ces pages ! Nous laissons cela comme exercice pour vous (suggestion : vous pourriez utiliser le PermissionRequiredMixin, et soit créer une nouvelle permission, soit réutiliser notre permissioncan_mark_returned ).
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Test de la page
                                                                                                              
@@ -610,7 +610,7 @@ class AuthorDelete(DeleteView):
 
 
                                                                                                              Ensuite naviguez à la page de création d'auteur : http://127.0.0.1:8000/catalog/author/create/, ce qui devrait ressembler à la capture d'écran ci-dessous.
                                                                                                              
 
-
                                                                                                              Form Example: Create Author
                                                                                                              
+
                                                                                                              Form Example: Create Author
                                                                                                              
 
 
                                                                                                              Entrez des valeurs pour les champs et ensuite cliquez sur Submit pour sauvegarder l'enregistrement de cet auteur. Vous devriez maintenant être conduit à une vue "détail" pour votre nouvel auteur, avec une URL du genre http://127.0.0.1:8000/catalog/author/10.
                                                                                                              
 
@@ -618,13 +618,13 @@ class AuthorDelete(DeleteView):
 
 
                                                                                                              Enfin, nous pouvons effacer l'enregistrement en ajoutant "delete" à la fin de l'URL de détail (par exemple http://127.0.0.1:8000/catalog/author/10/delete/). Django devrait vous afficher la page de suppression montrée ci-dessous. Cliquez sur "Yes, delete" pour supprimer l'enregistrement et être reconduit à la liste des auteurs.
                                                                                                              
 
-
                                                                                                              
+
                                                                                                              
 
 
                                                                                                              Mettez-vous au défi
                                                                                                              
 
 
                                                                                                              Créez des formulaires pour créer, modifier et effacer des enregistrements de type Book. Vous pouvez utiliser exactement la même structure que pour les Authors. Si votre template book_form.html est simplement copié-renommé à partir du template author_form.html, alors la nouvelle page "create book" va ressembler à quelque chose comme ceci :
                                                                                                              
 
-
                                                                                                              
+
                                                                                                              
 
 
                                                                                                                
 
                                                                                                              
@@ -633,7 +633,7 @@ class AuthorDelete(DeleteView):
 
 
                                                                                                              Créer et gérer des formulaires peut être un processus compliqué ! Django le rend bien plus aisé en fournissant des mécanismes de programmation pour déclarer, rendre et valider des formulaires. Django fournit de plus des vues génériques d'édition de formulaires, qui peuvent faire presque tout le travail si vous voulez définir des pages pour créer, modifier et supprimer des enregistrements associés à une instance d'un modèle unique.
                                                                                                              
 
-
                                                                                                              Il y a bien d'autres choses qui peuvent être faites avec les formulaires (regardez notre liste See also ci-dessous), mais vous devez être maintenant en mesure de comprendre comment ajouter des formulaires basiques et un code de gestion de formulaire à vos propres sites web.
                                                                                                              
+
                                                                                                              Il y a bien d'autres choses qui peuvent être faites avec les formulaires (regardez notre liste See also ci-dessous), mais vous devez être maintenant en mesure de comprendre comment ajouter des formulaires basiques et un code de gestion de formulaire à vos propres sites web.
                                                                                                              
 
 
                                                                                                              See also
                                                                                                              
 
diff --git a/files/fr/learn/server-side/django/generic_views/index.html b/files/fr/learn/server-side/django/generic_views/index.html
index 3f87155e82..8917b2d6fc 100644
--- a/files/fr/learn/server-side/django/generic_views/index.html
+++ b/files/fr/learn/server-side/django/generic_views/index.html
@@ -17,14 +17,14 @@ original_slug: Learn/Server-side/Django/Vues_generiques
 
 
                                                                                                              {{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}
                                                                                                              
 
-
                                                                                                              Ce tutoriel améliore notre site web LocalLibrary, en ajoutant des pages de listes et de détails pour les livres et les auteurs. Ici nous allons apprendre les vues génériques basées sur des classes, et montrer comment elles peuvent réduire le volume de code à écrire pour les cas ordinaires. Nous allons aussi entrer plus en détail dans la gestion des URLs, en montrant comment réaliser des recherches de patterns simples.
                                                                                                              
+
                                                                                                              Ce tutoriel améliore notre site web LocalLibrary, en ajoutant des pages de listes et de détails pour les livres et les auteurs. Ici nous allons apprendre les vues génériques basées sur des classes, et montrer comment elles peuvent réduire le volume de code à écrire pour les cas ordinaires. Nous allons aussi entrer plus en détail dans la gestion des URLs, en montrant comment réaliser des recherches de patterns simples.
                                                                                                              
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis:Avoir terminé les formations précédentes, y compris Django Tutorial Part 8: User authentication and permissions.Avoir terminé les formations précédentes, y compris Django Tutorial Part 8: User authentication and permissions.
   
                                                                                                            
   
                                                                                                            
    Objectifs:
 
 
 
 
 
 
                                                                                                            
+
                                                                                                            
@@ -38,7 +38,7 @@ original_slug: Learn/Server-side/Django/Vues_generiques
 
 
                                                                                                            Aperçu
                                                                                                            
 
-
                                                                                                            Dans ce tutoriel, nous allons terminer la première version du site web LocalLibrary, en ajoutant des pages de listes et de détails pour les livres et les auteurs (ou pour être plus précis, nous allons vous montrer comment implémenter les pages concernant les livres, et vous faire créer vous-mêmes les pages concernant les auteurs !).
                                                                                                            
+
                                                                                                            Dans ce tutoriel, nous allons terminer la première version du site web LocalLibrary, en ajoutant des pages de listes et de détails pour les livres et les auteurs (ou pour être plus précis, nous allons vous montrer comment implémenter les pages concernant les livres, et vous faire créer vous-mêmes les pages concernant les auteurs !).
                                                                                                            Le processus est semblable à celui utilisé pour créer la page d'index, processus que nous avons montré dans le tutoriel précédent. Nous allons avoir de nouveau besoin de créer des mappages d'URLs, des vues et des templates. La principale différence est que, pour la page des détails, nous allons avoir le défi supplémentaire d'extraire de l'URL des informations que nous transmettrons à la vue. Pour ces pages, nous allons montrer comment utiliser un type de vue complètement différent : des vues "listes" et "détails" génériques et basées sur des classes. Cela peut réduire significativement la somme de code nécessaire, les rendant ainsi faciles à écrire et à maintenir.
                                                                                                            
 
@@ -52,7 +52,7 @@ original_slug: Learn/Server-side/Django/Vues_generiques
 
 
                                                                                                            Ouvrez le fichier /catalog/urls.py, et copiez-y la ligne en gras ci-dessous. Comme pour la page d'index, cette fonction path() définit un pattern destiné à identifier l'URL ('books/'), une fonction vue qui sera appelée si l'URL correspond (views.BookListView.as_view()), et un nom pour ce mappage particulier.
                                                                                                            
 
-
                                                                                                            urlpatterns = [
+
                                                                                                            urlpatterns = [
     path('', views.index, name='index'),
     path('books/', views.BookListView.as_view(), name='books'),
 ]
                                                                                                            
@@ -69,7 +69,7 @@ original_slug: Learn/Server-side/Django/Vues_generiques
 
 
                                                                                                            Ouvrez le fichier catalog/views.py, et copiez-y le code suivant à la fin :
                                                                                                            
 
-
                                                                                                            from django.views import generic
+
                                                                                                            from django.views import generic
 
 class BookListView(generic.ListView):
     model = Book
                                                                                                            
@@ -77,12 +77,12 @@ class BookListView(generic.ListView):
 
                                                                                                            C'est tout ! La vue générique va adresser une requête à la base de données pour obtenir tous les enregistrements du modèle spécifié (Book), et ensuite rendre un template situé à l'adresse /locallibrary/catalog/templates/catalog/book_list.html (que nous allons créer ci-dessous). À l'intérieur du template vous pouvez accéder à la liste de livres grâce à la variable de template appelée object_list OU book_list (c'est-à-dire l'appellation générique "the_model_name_list").
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Ce chemin étrange vers le lieu du template n'est pas une faute de frappe : les vues génériques cherchent les templates dans /application_name/the_model_name_list.html (catalog/book_list.html dans ce cas) à l'intérieur du répertoire /application_name/templates/ (/catalog/templates/).
                                                                                                            
+
                                                                                                            Note : Ce chemin étrange vers le lieu du template n'est pas une faute de frappe : les vues génériques cherchent les templates dans /application_name/the_model_name_list.html (catalog/book_list.html dans ce cas) à l'intérieur du répertoire /application_name/templates/ (/catalog/templates/).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Vous pouvez ajouter des attributs pour changer le comportement par défaut utilisé ci-dessus. Par exemple, vous pouvez spécifier un autre fichier de template si vous souhaitez avoir plusieurs vues qui utilisent ce même modèle, ou bien vous pourriez vouloir utiliser un autre nom de variable de template, si book_list n'est pas intuitif par rapport à l'usage que vous faites de vos templates. Probablement, le changement le plus utile est de changer/filtrer le sous-ensemble des résultats retournés : au lieu de lister tous les livres, vous pourriez lister les 5 premiers livres lus par d'autres utilisateurs.
                                                                                                            
 
-
                                                                                                            class BookListView(generic.ListView):
+
                                                                                                            class BookListView(generic.ListView):
     model = Book
     context_object_name = 'my_book_list'   # your own name for the list as a template variable
     queryset = Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
@@ -94,7 +94,7 @@ class BookListView(generic.ListView):
 
 
                                                                                                            Par exemple, nous pouvons ré-écrire la méthode get_queryset() pour changer la liste des enregistrements retournés. Cette façon de faire est plus flexible que simplement définir l'attribut queryset, comme nous l'avons fait dans le précédent fragment de code (bien qu'il n'y ait pas vraiment d'intérêt dans ce cas) :
                                                                                                            
 
-
                                                                                                            class BookListView(generic.ListView):
+
                                                                                                            class BookListView(generic.ListView):
     model = Book
 
     def get_queryset(self):
@@ -103,7 +103,7 @@ class BookListView(generic.ListView):
 
 
                                                                                                            Nous pourrions aussi réécrire get_context_data(), afin d'envoyer au template des variables de contexte supplémentaires (par défaut c'est la liste de livres qui est envoyée). Le bout de code ci-dessous montre comment ajouter une variable appelée "some_data" au contexte (elle sera alors accessible comme variable de template).
                                                                                                            
 
-
                                                                                                            class BookListView(generic.ListView):
+
                                                                                                            class BookListView(generic.ListView):
     model = Book
 
     def get_context_data(self, **kwargs):
@@ -122,7 +122,7 @@ class BookListView(generic.ListView):
 
 
 
                                                                                                            
-
                                                                                                            Note : Voyez dans Built-in class-based generic views (doc de Django) pour avoir beaucoup plus d'exemples de ce que vous pouvez faire.
                                                                                                            
+
                                                                                                            Note : Voyez dans Built-in class-based generic views (doc de Django) pour avoir beaucoup plus d'exemples de ce que vous pouvez faire.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Créer le template pour la Vue Liste
                                                                                                            
@@ -131,7 +131,7 @@ class BookListView(generic.ListView):
 
 
                                                                                                            Les templates pour vues génériques sont exactement comme les autres templates (cependant, bien sûr, le contexte et les informations envoyées au templates peuvent être différents). Comme pour notre template index, nous étendons notre template de base à la première ligne, et remplaçons ensuite le bloc appelé content.
                                                                                                            
 
-
                                                                                                            {% extends "base_generic.html" %}
+
                                                                                                            {% extends "base_generic.html" %}
 
 {% block content %}
   <h1>Book List</h1>
@@ -154,7 +154,7 @@ class BookListView(generic.ListView):
 
 
                                                                                                            Nous utilisons les balises de templates if, else, et endif pour vérifier que la book_list a été définie et n'est pas vide. Si book_list est vide, alors la condition else affiche un texte expliquant qu'il n'y a pas de livres à lister. Si book_list n'est pas vide, nous parcourons la liste de livres.
                                                                                                            
 
-
                                                                                                            {% if book_list %}
+
                                                                                                            {% if book_list %}
   <!-- code here to list the books -->
 {% else %}
   <p>There are no books in the library.</p>
@@ -167,7 +167,7 @@ class BookListView(generic.ListView):
 
 
                                                                                                            Le template utilise les balises de template for et endfor pour boucler à travers la liste de livres, comme montré ci-dessous. Chaque itération peuple la variable de template book avec l'information concernant l'élément courant de la liste.
                                                                                                            
 
-
                                                                                                            {% for book in book_list %}
+
                                                                                                            {% for book in book_list %}
   <li> <!-- code here get information from each book item --> </li>
 {% endfor %}
 
                                                                                                            
@@ -178,7 +178,7 @@ class BookListView(generic.ListView):
 
 
                                                                                                            Le code à l'intérieur de la boucle crée un élément de liste pour chaque livre, élément qui montre à la fois le titre (comme lien vers la vue détail, encore à créer), et l'auteur.
                                                                                                            
 
-
                                                                                                            <a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
+
                                                                                                            <a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
 
                                                                                                            
 
 
                                                                                                            Nous accédont aux champs de l'enregistrement "livre" associé, en utilisant la notation "à points" (par exemple book.title et book.author), où le texte suivant l'item book est le nom du champ (comme défini dans le modèle).
                                                                                                            
@@ -186,14 +186,14 @@ class BookListView(generic.ListView):
 
                                                                                                            Nous pouvons aussi appeler des fonctions contenues dans le modèle depuis l'intérieur de notre template — dans ce cas nous appelons Book.get_absolute_url() pour obtenir une URL que vous pouvez utiliser pour afficher dans la vue détail l'enregistrement associé. Cela fonctionne, pourvu que la fonction ne comporte pas d'arguments (il n'y a aucun moyen de passer des arguments !).
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Il nous faut être quelque peu attentif aux "effets de bord" quand nous appelons des fonctions dans nos templates. Ici nous récupérons simplement une URL à afficher, mais une fonction peut faire à peu près n'importe quoi — nous ne voudrions pas effacer notre base de données (par exemple) juste parce que nous avons affiché notre template !
                                                                                                            
+
                                                                                                            Note : Il nous faut être quelque peu attentif aux "effets de bord" quand nous appelons des fonctions dans nos templates. Ici nous récupérons simplement une URL à afficher, mais une fonction peut faire à peu près n'importe quoi — nous ne voudrions pas effacer notre base de données (par exemple) juste parce que nous avons affiché notre template !
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Mettre à jour le template de base
                                                                                                            
 
 
                                                                                                            Ouvrez le template de base (/locallibrary/catalog/templates/base_generic.html) et insérez {% url 'books' %} dans le lien URL pour All books, comme indiqué ci-dessous. Cela va afficher le lien dans toutes les pages (nous pouvons mettre en place ce lien avec succès, maintenant que nous avons créé le mappage d'URL "books").
                                                                                                            
 
-
                                                                                                            <li><a href="{% url 'index' %}">Home</a></li>
+
                                                                                                            <li><a href="{% url 'index' %}">Home</a></li>
 <li><a href="{% url 'books' %}">All books</a></li>
 <li><a href="">All authors</a></li>
                                                                                                            
 
@@ -209,7 +209,7 @@ class BookListView(generic.ListView):
 
 
                                                                                                            Ouvrez /catalog/urls.py et ajoutez-y le mappeur d'URL 'book-detail' indiqué en gras ci-dessous. Cette fonction path() définit un pattern, la vue générique basée sur classe qui lui est associée, ainsi qu'un nom.
                                                                                                            
 
-
                                                                                                            urlpatterns = [
+
                                                                                                            urlpatterns = [
     path('', views.index, name='index'),
     path('books/', views.BookListView.as_view(), name='books'),
     path('book/<int:pk>', views.BookDetailView.as_view(), name='book-detail'),
@@ -220,24 +220,24 @@ class BookListView(generic.ListView):
 
                                                                                                            Dans ce cas, nous utilisons '<int:pk>' pour capturer l'id du livre, qui doit être une chaîne formatée d'une certaine manière, et passer cet id à la vue en tant que paramètre nommé pk (abbréviation pour primary key - clé primaire). C'est l'id qui doit être utilisé pour stocker le livre de manière unique dans la base de données, comme défini dans le modèle Book.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Comme nous l'avons dit précédemment, notre URL correcte est en réalité catalog/book/<digits> (comme nous sommes dans l'application catalog, /catalog/ est supposé).
                                                                                                            
+
                                                                                                            Note : Comme nous l'avons dit précédemment, notre URL correcte est en réalité catalog/book/<digits> (comme nous sommes dans l'application catalog, /catalog/ est supposé).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Important : La vue générique basée sur classe "détail" s'attend à recevoir un paramètre appelé pk. Si vous écrivez votre propre fonction, vous pouvez utiliser le nom que vous voulez pour votre paramètre, ou même passer l'information avec un argument non nommé.
                                                                                                            
+
                                                                                                            Attention : La vue générique basée sur classe "détail" s'attend à recevoir un paramètre appelé pk. Si vous écrivez votre propre fonction, vous pouvez utiliser le nom que vous voulez pour votre paramètre, ou même passer l'information avec un argument non nommé.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Introduction aux chemins et expressions régulières avancés
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Vous n'aurez pas besoin de cette section pour achever le tutoriel ! Nous en parlons parce que nous savons que cette option vous sera probablement utile dans votre avenir centré sur Django.
                                                                                                            
+
                                                                                                            Note : Vous n'aurez pas besoin de cette section pour achever le tutoriel ! Nous en parlons parce que nous savons que cette option vous sera probablement utile dans votre avenir centré sur Django.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            La recherche de pattern fournie par path() est simple et utile pour les cas (très communs) où vous voulez seulement capturer n'importe quelle chaîne ou entier. Si vous avez besoin d'un filtre plus affiné (par exemple pour filtrer seulement les chaînes qui ont un certain nombre de caractères), alors vous pouvez utiliser la méthode re_path().
                                                                                                            
 
 
                                                                                                            Cette méthode est utilisée exactement comme path(), sauf qu'elle vous permet de spécifier un pattern utilisant une Expression régulière. Par exemple, le chemin précédent pourrait avoir été écrit ainsi :
                                                                                                            
 
-
                                                                                                            re_path(r'^book/(?P<pk>\d+)$', views.BookDetailView.as_view(), name='book-detail'),
+
                                                                                                            re_path(r'^book/(?P<pk>\d+)$', views.BookDetailView.as_view(), name='book-detail'),
 
                                                                                                            
 
 
                                                                                                            Les expressions régulières sont un outil de recherche de pattern extrêmement puissant. Ils sont, il est vrai, assez peu intuitifs et peuvent se révéler intimidants pour les débutants. Ci-dessous vous trouverez une introduction très courte !
                                                                                                            
@@ -335,14 +335,14 @@ class BookListView(generic.ListView):
 
                                                                                                            Vous pouvez capturer plusieurs patterns en une seule fois, et donc encoder beaucoup d'informations différentes dans l'URL.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Comme défi, essayez d'envisager comment vous devriez encoder une URL pour lister tous les livres sortis en telle année, à tel mois et à tel jour, et l'expression régulière qu'il faudrait utiliser pour la rechercher.
                                                                                                            
+
                                                                                                            Note : Comme défi, essayez d'envisager comment vous devriez encoder une URL pour lister tous les livres sortis en telle année, à tel mois et à tel jour, et l'expression régulière qu'il faudrait utiliser pour la rechercher.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Passer des options supplémentaires dans vos mappages d'URL
                                                                                                            
 
 
                                                                                                            Une fonctionnalité que nous n'avons pas utilisée ici, mais que vous pourriez trouver valable, c'est que vous pouvez passer à la vue des options supplémentaires. Les options sont déclarées comme un dictionnaire que vous passez comme troisième argument (non nommé) à la fonction path(). Cette approche peut être utile si vous voulez utiliser la même vue pour des ressources multiples, et passer des données pour configurer son comportement dans chaque cas (ci-dessous nous fournissons un template différent dans chaque cas).
                                                                                                            
 
-
                                                                                                            path('url/', views.my_reused_view, {'my_template_name': 'some_path'}, name='aurl'),
+
                                                                                                            path('url/', views.my_reused_view, {'my_template_name': 'some_path'}, name='aurl'),
 path('anotherurl/', views.my_reused_view, {'my_template_name': 'another_path'}, name='anotherurl'),
 
                                                                                                            
 
@@ -354,7 +354,7 @@ path('anotherurl/', views.my_reused_view, {'my_template_name': 'another_
 
 
                                                                                                            Ouvrez catalog/views.py, et copiez-y le code suivant à la fin du fichier :
                                                                                                            
 
-
                                                                                                            class BookDetailView(generic.DetailView):
+
                                                                                                            class BookDetailView(generic.DetailView):
     model = Book
                                                                                                            
 
 
                                                                                                            C'est tout ! La seule chose que vous avez à faire maintenant, c'est créer un template appelé /locallibrary/catalog/templates/catalog/book_detail.html, et la vue va lui passer les informations de la base de donnée concernant l'enregistrement Book spécifique, extrait par le mapper d'URL. À l'intérieur du template, vous pouvez accéder à la liste de livres via la variable de template appelée object OU book (c'est-à-dire, de manière générique, "le_nom_du_modèle").
                                                                                                            
@@ -367,7 +367,7 @@ path('anotherurl/', views.my_reused_view, {'my_template_name': 'another_
 
 
                                                                                                            Juste pour vous donner une idée de la manière dont tout cela fonctionne, le morceau de code ci-dessous montre comment vous implémenteriez cette vue comme une fonction si vous n'utilisiez pas la vue générique basée sur classe "détail".
                                                                                                            
 
-
                                                                                                            def book_detail_view(request, primary_key):
+
                                                                                                            def book_detail_view(request, primary_key):
     try:
         book = Book.objects.get(pk=primary_key)
     except Book.DoesNotExist:
@@ -380,7 +380,7 @@ path('anotherurl/', views.my_reused_view, {'my_template_name': 'another_
 
 
                                                                                                            Une alternative consiste à utiliser la fonction get_object_or_404() comme un raccourci pour lever une exception Http404 si l'enregistrement n'existe pas.
                                                                                                            
 
-
                                                                                                            from django.shortcuts import get_object_or_404
+
                                                                                                            from django.shortcuts import get_object_or_404
 
 def book_detail_view(request, primary_key):
     book = get_object_or_404(Book, pk=primary_key)
@@ -390,7 +390,7 @@ def book_detail_view(request, primary_key):
 
 
                                                                                                            Créez le fichier HTML /locallibrary/catalog/templates/catalog/book_detail.html, et copiez-y le code ci-dessous. Comme on l'a dit plus haut, c'est là le nom de template attendu par défaut par la vue générique basée sur classe detail (pour un modèle appelé Book dans une application appelée catalog).
                                                                                                            
 
-
                                                                                                            {% extends "base_generic.html" %}
+
                                                                                                            {% extends "base_generic.html" %}
 
 {% block content %}
   <h1>Title: \{{ book.title }}</h1>
@@ -422,9 +422,9 @@ def book_detail_view(request, primary_key):
 
 
 
                                                                                                            
-
                                                                                                            Le lien vers l'auteur dans le template ci-dessus est vide, parce que nous n'avons pas encore crée de page détail pour un auteur. Une fois que cette page sera créée, vous pourrez remplacer l'URL par ceci :
                                                                                                            
+
                                                                                                            Note : Le lien vers l'auteur dans le template ci-dessus est vide, parce que nous n'avons pas encore crée de page détail pour un auteur. Une fois que cette page sera créée, vous pourrez remplacer l'URL par ceci :
                                                                                                            
 
-
                                                                                                            <a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a>
+
                                                                                                            <a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a>
 
                                                                                                            
 
                                                                                                            
 
@@ -439,18 +439,18 @@ def book_detail_view(request, primary_key):
 
 
                                                                                                            Une chose intéressante que nous n'avons pas encore vue, c'est la fonction book.bookinstance_set.all(). Cette méthode est "automagiquement" construite par Django pour retourner l'ensemble des enregistrements BookInstance associés à un Book particulier.
                                                                                                            
 
-
                                                                                                            {% for copy in book.bookinstance_set.all %}
+
                                                                                                            {% for copy in book.bookinstance_set.all %}
   <!-- code to iterate across each copy/instance of a book -->
 {% endfor %}
                                                                                                            
 
 
                                                                                                            Cette méthode est requise parce que vous déclarez un champ ForeignKey (one-to-many) seulement du côté "one" de la relation. Comme vous ne faites rien pour déclarer la relation dans les modèles opposés ("many"), Django n'a pas de champ pour récupérer l'ensemble des enregistrements associés. Pour remédier à ce problème, Django construit une fonction justement nommée "recherche inversée", que vous pouvez utiliser. Le nom de la fonction est construit en mettant en minuscule le nom du modèle où a été déclarée la ForeignKey, suivi de _set (ainsi la fonction créée dans Book est bookinstance_set()).
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Ici nous utilisons all() pour récupérer tous les enregistrements (comportement par défaut). Bien que vous puissiez utiliser la méthode filter() pour obtenir un sous-ensemble d'enregistrements dans le code, vous ne pouvez faire cela directement dans le template, parce que vous ne pouvez pas spécifier d'arguments dans les fonctions.
                                                                                                            
+
                                                                                                            Note : Ici nous utilisons all() pour récupérer tous les enregistrements (comportement par défaut). Bien que vous puissiez utiliser la méthode filter() pour obtenir un sous-ensemble d'enregistrements dans le code, vous ne pouvez faire cela directement dans le template, parce que vous ne pouvez pas spécifier d'arguments dans les fonctions.
                                                                                                            
 
 
                                                                                                            Prenez garde également que, si vous ne définissez pas un ordre (dans votre vue basée sur classe ou votre modèle), vous allez voir des erreurs de ce genre en provenance du serveur de développement :
                                                                                                            
 
-
                                                                                                            [29/May/2017 18:37:53] "GET /catalog/books/?page=1 HTTP/1.1" 200 1637
+
                                                                                                            [29/May/2017 18:37:53] "GET /catalog/books/?page=1 HTTP/1.1" 200 1637
 /foo/local_library/venv/lib/python3.5/site-packages/django/views/generic/list.py:99: UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list: <QuerySet [<Author: Ortiz, David>, <Author: H. McRaven, William>, <Author: Leigh, Melinda>]>
   allow_empty_first_page=allow_empty_first_page, **kwargs)
 
                                                                                                            
@@ -467,7 +467,7 @@ def book_detail_view(request, primary_key):
 
 
                                                                                                            Si vous décidez d'ajouter une class Meta au modèle Author (solution peut-être pas aussi flexible que personnalier la vue basée sur classe, mais assez facile), vous allez vous retrouver avec quelque chose de ce genre :
                                                                                                            
 
-
                                                                                                            class Author(models.Model):
+
                                                                                                            class Author(models.Model):
     first_name = models.CharField(max_length=100)
     last_name = models.CharField(max_length=100)
     date_of_birth = models.DateField(null=True, blank=True)
@@ -497,11 +497,11 @@ def book_detail_view(request, primary_key):
 
 
                                                                                                            Cliquez sur le lien Tous les livres pour afficher la liste des livres.
                                                                                                            
 
-
                                                                                                            Book List Page
                                                                                                            
+
                                                                                                            Book List Page
                                                                                                            
 
 
                                                                                                            Ensuite cliquez sur un lien dirigeant vers l'un de vos livres. Si tout est réglé correctement, vous allez voir quelque chose de semblable à la capture d'écran suivante :
                                                                                                            
 
-
                                                                                                            Book Detail Page
                                                                                                            
+
                                                                                                            Book Detail Page
                                                                                                            
 
 
                                                                                                            Pagination
                                                                                                            
 
@@ -513,7 +513,7 @@ def book_detail_view(request, primary_key):
 
 
                                                                                                            Ouvrez catalog/views.py, et ajoutez la ligne paginate_by, en gras ci-dessous.
                                                                                                            
 
-
                                                                                                            class BookListView(generic.ListView):
+
                                                                                                            class BookListView(generic.ListView):
     model = Book
     paginate_by = 10
                                                                                                            
 
@@ -525,7 +525,7 @@ def book_detail_view(request, primary_key):
 
 
                                                                                                            Ouvrez /locallibrary/catalog/templates/base_generic.html, et copiez-y, sous notre bloc de contenu, le bloc de pagination suivant (mis en gras ci-dessous). Le code commence par vérifier si une pagination est activée sur la page courante. Si oui, il ajoute les liens "précédent" et "suivant" appropriés (et le numéro de la page courante).
                                                                                                            
 
-
                                                                                                            {% block content %}{% endblock %}
+
                                                                                                            {% block content %}{% endblock %}
 
   {% block pagination %}
     {% if is_paginated %}
@@ -557,7 +557,7 @@ def book_detail_view(request, primary_key):
 
 
                                                                                                            Les liens de pagination sont affichés en bas de la page, avec les liens suivant/précédent affichés selon la page sur laquelle nous nous trouvons.
                                                                                                            
 
-
                                                                                                            Book List Page - paginated
                                                                                                            
+
                                                                                                            Book List Page - paginated
                                                                                                            
 
 
                                                                                                            Mettez-vous vous-même au défi !
                                                                                                            
 
@@ -571,12 +571,12 @@ def book_detail_view(request, primary_key):
 
                                                                                                            Le code requis pour le mappeur d'URL et les vues sera virtuellement identique aux vues liste et détail du modèle Book, créées ci-dessus. Les templates seront différents, mais auront un comportement semblable.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note:
                                                                                                            
+
                                                                                                            Note :
                                                                                                            
 
 
                                                                                                              
  
                                                                                                            • Une fois que vous aurez créé le mappeur d'URL pour la page "liste d'auteurs", vous aurez besoin de mettre aussi à jour le lien All authors dans le template de base. Suivez la même procédure que celle adoptée quand nous avons mis à jour le lien All books.
                                                                                                              • 
  
                                                                                                            • Une fois créé le mappeur d'URL pour la page de détails sur l'auteur, vous devrez aussi mettre à jour le template de la vue détail d'un livre (/locallibrary/catalog/templates/catalog/book_detail.html), de sorte que le lien vers l'auteur pointe vers votre nouvelle page de détails sur l'auteur (au lieu d'être une URL vide). La ligne va avoir comme changement la balise montrée en gras ci-dessous.
-  
                                                                                                              <p><strong>Author:</strong> <a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a></p>
+  
                                                                                                              <p><strong>Author:</strong> <a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a></p>
 
                                                                                                              
  
                                                                                                              • 
 
                                                                                                            
@@ -584,12 +584,12 @@ def book_detail_view(request, primary_key):
 
 
                                                                                                            Quand vous aurez fini, vos pages vont ressembler aux captures d'écran suivantes.
                                                                                                            
 
-
                                                                                                            Author List Page
                                                                                                            
+
                                                                                                            Author List Page
                                                                                                            
 
 
                                                                                                              
 
                                                                                                            
 
-
                                                                                                            Author Detail Page
                                                                                                            
+
                                                                                                            Author Detail Page
                                                                                                            
 
 
                                                                                                              
 
                                                                                                            
@@ -617,19 +617,19 @@ def book_detail_view(request, primary_key):
 
                                                                                                            In this module
                                                                                                            
 
 
diff --git a/files/fr/learn/server-side/django/home_page/index.html b/files/fr/learn/server-side/django/home_page/index.html
index 91f6ef16bf..5c8f63c457 100644
--- a/files/fr/learn/server-side/django/home_page/index.html
+++ b/files/fr/learn/server-side/django/home_page/index.html
@@ -18,9 +18,9 @@ translation_of: Learn/Server-side/Django/Home_page
 
 
                                                                                                            {{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}
                                                                                                            
 
-
                                                                                                            Le travail préparatoire pour nous permettre de créer une page d'accueil pour le site web de la bibliothèque locale est réalisé. La page d'accueil montera le nombre d'enregistrements pour chacun des objets décrits dans la base et les liens à l'aide d'une barre latérale de navigation. Dans la progression de l'article, nous apprendrons à gérer les vues et à présenter les données à l'aide de gabarits.
                                                                                                            
+
                                                                                                            Le travail préparatoire pour nous permettre de créer une page d'accueil pour le site web de la bibliothèque locale est réalisé. La page d'accueil montera le nombre d'enregistrements pour chacun des objets décrits dans la base et les liens à l'aide d'une barre latérale de navigation. Dans la progression de l'article, nous apprendrons à gérer les vues et à présenter les données à l'aide de gabarits.
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis:
    
-    
                                                                                                            Avoir terminé tous les tutoriels précédents, y compris Django Tutorial Part 5: Creating our home page.
                                                                                                            
+    
                                                                                                            Avoir terminé tous les tutoriels précédents, y compris Django Tutorial Part 5: Creating our home page.
                                                                                                            
                                                                                                                		
   
                                                                                                            
   
                                                                                                            
 
 
                                                                                                            
+
                                                                                                            
@@ -45,7 +45,7 @@ translation_of: Learn/Server-side/Django/Home_page
  
                                                                                                          • créer les gabarits qui vont permettre de publier les données dans les vues.
                                                                                                            • 
 
 
-
                                                                                                            
+
                                                                                                            
 
 
                                                                                                            Nous aurons à créer 5 pages web pour publier les informations à destination des utilisateurs. Cela fait beaucoup d'éléments à maîtriser dans une seule section d'apprentissage de l'outils. Nous avons donc opté pour ne traiter dans cette section que de la page d'accueil et de traiter les autres pages dans une autre section du didacticiel. Cela permet, en outre, de mieux appréhender les composants comme le routage d'URL ou les vues et d'une manière générale le fonctionnement du modèle de Django.
                                                                                                            
 
@@ -68,7 +68,7 @@ translation_of: Learn/Server-side/Django/Home_page
 
                                                                                                            En revanche, les pages concernant le détails d'un livre ou d'un auteur nécessiteront de traiter l'identifiant d'un  objet. Il sera nécessaire d'extraire de la requête HTTP l'information encodé de cet identifiant pour obtenir ensuite le détail depuis la base de données. Pour cela nous utiliserons un seul jeu de vue et de gabarit pour publier les informations sur les livres (et auteurs).
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Avec le cadriciel Django, vous pouvez élaborer vos URLs comme bon vous semble — Vous pouvez avoir une approche comme celle présentée ci-dessus, ou de faire un appel de la méthode GET avec un passage de paramètres (/book/?id=6). Cependant, quelque soit l'approche pour laquelle vous opterez, garder en mémoire d'avoir des URLs claires, logique et compréhensibles comme cela est  recommandé par le W3C.
                                                                                                            
+
                                                                                                            Note : Avec le cadriciel Django, vous pouvez élaborer vos URLs comme bon vous semble — Vous pouvez avoir une approche comme celle présentée ci-dessus, ou de faire un appel de la méthode GET avec un passage de paramètres (/book/?id=6). Cependant, quelque soit l'approche pour laquelle vous opterez, garder en mémoire d'avoir des URLs claires, logique et compréhensibles comme cela est  recommandé par le W3C.
                                                                                                            
 
 
                                                                                                            La documentation de Django recommande aussi de coder les informations dans le corps des URLs pour avoir une meilleure conception de ces URLs.
                                                                                                            
 
                                                                                                            
@@ -80,7 +80,7 @@ translation_of: Learn/Server-side/Django/Home_page
 
                                                                                                            La toute première page à créer est la page d'accueil (catalog/). Cette page d'index est globalement une page statique contenant le décompte des différents enregistrements de la base de données. Pour faire cela, il sera nécessaire de créer un routage d'URL, une vue et un gabarit. 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Cette section est essentielle, et cela vaut vraiment la peine d'être attentif aux concepts déployés dans celle-ci. La plupart des éléments aborder ici seront ré-utilisés par la suite.
                                                                                                            
+
                                                                                                            Note : Cette section est essentielle, et cela vaut vraiment la peine d'être attentif aux concepts déployés dans celle-ci. La plupart des éléments aborder ici seront ré-utilisés par la suite.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Routage d'URL
                                                                                                            
@@ -112,7 +112,7 @@ translation_of: Learn/Server-side/Django/Home_page
 
                                                                                                            <a href="{% url 'index' %}">Home</a>.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Vus pourriez bien évidemment coder en dur l'accès à la page d'accueil de cette manaière <a href="/catalog/">Home</a>), mais si nous changions le modèle d'URL, par exemple en /catalog/index, alors le gabarit ne fonctionnerait plus correctement et présenterait un lien mort. L'utilisation des noms et des routage inversés est plus robuste et adapté aux évolutions de l'application.
                                                                                                            
+
                                                                                                            Note : Vus pourriez bien évidemment coder en dur l'accès à la page d'accueil de cette manaière <a href="/catalog/">Home</a>), mais si nous changions le modèle d'URL, par exemple en /catalog/index, alors le gabarit ne fonctionnerait plus correctement et présenterait un lien mort. L'utilisation des noms et des routage inversés est plus robuste et adapté aux évolutions de l'application.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Vue (View function-based)
                                                                                                            
@@ -176,7 +176,7 @@ def index(request):
 
                                                                                                            Vous pouvez en faire l'expérience dès à présent, après avoir redémarré votre serveur local, en accédant à l'URL 127.0.0.1:8000 de votre navigateur. Une page d'erreur explicite s'affiche en indiquant un message du type : "TemplateDoesNotExist at /catalog/", ainsi que de nombreux détails sur l'enchaînement des fonctions aboutissant à cette erreur.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: En fonction du paramétrage de votre projet - le fichier settings.py de votre projet - Django va chercher pour des gabarits dans différents répertoires et dans ceux de votre application par défaut. Si vous souhaitez approfondir ce sujet vous pouvez consulter la documentation Django relative aux gabarit.
                                                                                                            
+
                                                                                                            Note : En fonction du paramétrage de votre projet - le fichier settings.py de votre projet - Django va chercher pour des gabarits dans différents répertoires et dans ceux de votre application par défaut. Si vous souhaitez approfondir ce sujet vous pouvez consulter la documentation Django relative aux gabarit.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Concevoir les gabarits
                                                                                                            
@@ -186,7 +186,7 @@ def index(request):
 
                                                                                                            Le langage de gabarit de Django permet de définir un modèle de base puis de l'étendre ensuite. L'extrait de code ci-dessous vient du fichier de gabarit base_generic.html, vous constaterez qu'il s'y mélange du code HTML et des sections nommées contenu dans entre des marqueurs block et endblock qui peut contenir ou non des données.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Les marqueurs de gabarits sont des fonctions que vous pouvez utiliser dans un modèle pour parcourir des listes, effectuer des opérations conditionnelles en fonction de la valeur d'une variable, etc. Outre les balises de modèle, la syntaxe de gabarit vous permet de référencer les variables qui sont transmises au modèle à partir de la vue et d'utiliser des filtres de gabarit pour mettre en forme les variables (par exemple, pour convertir une chaîne en minuscule).
                                                                                                            
+
                                                                                                            Note : Les marqueurs de gabarits sont des fonctions que vous pouvez utiliser dans un modèle pour parcourir des listes, effectuer des opérations conditionnelles en fonction de la valeur d'une variable, etc. Outre les balises de modèle, la syntaxe de gabarit vous permet de référencer les variables qui sont transmises au modèle à partir de la vue et d'utiliser des filtres de gabarit pour mettre en forme les variables (par exemple, pour convertir une chaîne en minuscule).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Dans l'extrait ci-dessous vous avec trois sections nommées qui pourront être remplacés par la suite :
                                                                                                            
@@ -225,7 +225,7 @@ def index(request):
 
                                                                                                            Nous allons nous appuyer sur le gabarit ci-dessous pour constuire la page de base de la bibliothèque locale. Vous le constatez, il contient des éléments HTML et des blocs dédiés Django pour spécifier trois sections title, sidebar, et content. La section title contient un titre par défaut. De même la section sidebar contient un liens vers la liste des livres et des auteurs qui pourra être modifié ensuite.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Il y a aussi deux balises supplémentaires : url et load static. Elles seront étudiées dans le chapitre suivant.
                                                                                                            
+
                                                                                                            Note : Il y a aussi deux balises supplémentaires : url et load static. Elles seront étudiées dans le chapitre suivant.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Créez un nouveau fichier nommé base_generic.html dans le dossier /locallibrary/catalog/templates/ (à créer aussi) et copiez-y le texte ci-dessous :
                                                                                                            
@@ -276,20 +276,20 @@ def index(request):
 
 
                                                                                                            Maintenant créez le fichier HTML index.html dans le dossier /locallibrary/catalog/templates/ et copiez-y le code ci-dessous. This code extends our base template on the first line, and then replaces the default content block for the template. 
                                                                                                            
 
-
                                                                                                            {% extends "base_generic.html" %}
+
                                                                                                            {% extends "base_generic.html" %}
 
 {% block content %}
-  <h1>Accueil de la bibliothèque locale</h1>
-  <p>Bienvenue à la bibliothèque locale, un site web développé par <em>Mozilla Developer Network</em>!</p>
-  <h2>Contenu dynamique</h2>
-  <p>La bibliothèque dispose des enregistrements suivants:</p>
-  <ul>
-    <li><strong>Livres:</strong> \{{ num_books }}</li>
-    <li><strong>Copies:</strong> \{{ num_instances }}</li>
-    <li><strong>Copies disponibles:</strong> \{{ num_instances_available }}</li>
-    <li><strong>Auteurs:</strong> \{{ num_authors }}</li>
-  </ul>
-{% endblock %}
                                                                                                            
+  <h1>Accueil de la bibliothèque locale</h1>
+  <p>Bienvenue à la bibliothèque locale, un site web développé par <em>Mozilla Developer Network</em>!</p>
+  <h2>Contenu dynamique</h2>
+  <p>La bibliothèque dispose des enregistrements suivants:</p>
+  <ul>
+    <li><strong>Livres:</strong> \{{ num_books }}</li>
+    <li><strong>Copies:</strong> \{{ num_instances }}</li>
+    <li><strong>Copies disponibles:</strong> \{{ num_instances_available }}</li>
+    <li><strong>Auteurs:</strong> \{{ num_authors }}</li>
+  </ul>
+{% endblock %}
                                                                                                            
 
 
                                                                                                            Dans la section cont'enu dynamique, des emplacements réservés sont définis pour pouvoir y insérer le contenu de variable qui sont identifiées à l'intérieur de doubles accolades (ouvrantes et fermantes). Pour une meilleure visibilité ces emplacements et les variables nommées sont identifiées en caractères gras dans l'extrait de code ci-dessus. 
                                                                                                            
 
@@ -325,7 +325,7 @@ return render(request, 'index.html', context=context)
 
 
 
                                                                                                            
-
                                                                                                            Note: Les exemples ci-dessus indiquent où se trouvent les fichiers, mais le cadriciel ne travail pas ainsi par défaut. Nous avons configuré le serveur web de développement en modifiant le routage des URL (/locallibrary/locallibrary/urls.py) à la création du squelette du site. Cependant nous devrons travailler plus tard la mise en production.
                                                                                                            
+
                                                                                                            Note : Les exemples ci-dessus indiquent où se trouvent les fichiers, mais le cadriciel ne travail pas ainsi par défaut. Nous avons configuré le serveur web de développement en modifiant le routage des URL (/locallibrary/locallibrary/urls.py) à la création du squelette du site. Cependant nous devrons travailler plus tard la mise en production.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Pour plus de détails sur les fichiers statiques vous pouvez consulter la documentation Django sur la gestion des fichiers statiques.
                                                                                                            
@@ -365,7 +365,7 @@ return render(request, 'index.html', context=context)
 
 
                                                                                                            A ce niveau, nous avons créé l'ensemble des ressources nécessaires à l'affichage de la page d'accueil. Démarrez le serveur (python3 manage.py runserver) et accédez avec votre navigateur à la page d'accueil du site web http://127.0.0.1:8000/. Si tout va bien, vous devriez avoir une page qui ressemble à celle ci-dessous.
                                                                                                            
 
-
                                                                                                            Page d'accueil en Français
                                                                                                            
+
                                                                                                            Page d'accueil en Français
                                                                                                            
 
 
                                                                                                            
 
                                                                                                            Note: Toutes les ressources n'ayant pas été encore créées les liens vers Tous les livres et Tous les auteurs ne fonctionnent pas encore.
                                                                                                            
@@ -379,7 +379,7 @@ return render(request, 'index.html', context=context)
  
                                                                                                          • La bibliothèque locale dispose d'un gabarit d'origine qui inclu une section title. Surchargez cette section dans le gabarit index et créer un nouveau titre.
 
   
                                                                                                            
-  
                                                                                                            Hint: La section Concevoir un gabarit détaille la manière de modifier une section.
                                                                                                            
+  
                                                                                                            Note : La section Concevoir un gabarit détaille la manière de modifier une section.
                                                                                                            
   
                                                                                                            
  
                                                                                                            • 
  
                                                                                                          • Modifiez la vue pour disposer de décomptes pour les genres et les titres de livre qui contiennent un mot (en repectant la casse) et transmettez cela via le  context. Pour faire cela utilisez les variables num_books et num_instances_available. Ensuite vous pourrez mettre à jour le gabarit de la page d'accueil.
                                                                                                            
@@ -412,18 +412,18 @@ return render(request, 'index.html', context=context)
 
 
diff --git a/files/fr/learn/server-side/django/index.html b/files/fr/learn/server-side/django/index.html
index c613f07883..fb38612c78 100644
--- a/files/fr/learn/server-side/django/index.html
+++ b/files/fr/learn/server-side/django/index.html
@@ -14,45 +14,45 @@ translation_of: Learn/Server-side/Django
 
 
                                                                                                            Prerequis
                                                                                                            
 
-
                                                                                                            Aucune connaissance sur ce framework n'est requise. Il vous faudra seulement comprendre ce qu'est la programmation web côté serveur ainsi que les frameworks web, notamment en lisant les sujets sur notre module d'initiation à la programmation web coté serveur.
                                                                                                            
+
                                                                                                            Aucune connaissance sur ce framework n'est requise. Il vous faudra seulement comprendre ce qu'est la programmation web côté serveur ainsi que les frameworks web, notamment en lisant les sujets sur notre module d'initiation à la programmation web coté serveur.
                                                                                                            
 
-
                                                                                                            Une connaissance générale en programmation et plus précisement en Python est recommandée, mais pas nécessaire pour comprendre la majeure partie de ce module.
                                                                                                            
+
                                                                                                            Une connaissance générale en programmation et plus précisement en Python est recommandée, mais pas nécessaire pour comprendre la majeure partie de ce module.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Python est un des languages les plus faciles à apprendre, lire et comprendre pour les novices. Ceci dit, si vous voulez mieux comprendre ce module, il existe beaucoup de livres gratuits et de tutoriaux sur internet (les nouveaux programmeurs pourraient être intéressés par la page du Python pour les non-programmeurs (anglais) dans la documentation sur le site officiel de Python: python.org).
                                                                                                            
+
                                                                                                            Note : Python est un des languages les plus faciles à apprendre, lire et comprendre pour les novices. Ceci dit, si vous voulez mieux comprendre ce module, il existe beaucoup de livres gratuits et de tutoriaux sur internet (les nouveaux programmeurs pourraient être intéressés par la page du Python pour les non-programmeurs dans la documentation sur le site officiel de Python: python.org).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Guides
                                                                                                            
 
 
                                                                                                            
- 
                                                                                                            Introduction à Django (anglais)
                                                                                                            
- 
                                                                                                            Dans ce premier article, nous répondrons aux questions "qu'est ce que Django ?" et vous donner un aperçu rapide de ce qu'un framework peut vous apporter. Nous survolerons les fonctionnalités principales ainsi que quelques fonctionnalités avancées que nous ne pouvons pas détailler en l'espace d'un seul module.  Nous vous montrerons aussi les blocs principaux de Django ce qui vous donnera un aperçu de ce qui est faisable avant de commencer.
                                                                                                            
- 
                                                                                                            Installer un environnement de développement pour Django (anglais)
                                                                                                            
- 
                                                                                                            Maintenant que vous savez ce qu'est Django, nous allons nous attaquer à la partie installation, comment l'installer sous Windows, Linux(Ubuntu),  et Mac OS X — tant que vous utilisez un système d'exploitation commun, cet article devrait vous donner le nécessaire afin de commencer à développer des applications avec Django.
                                                                                                            
+ 
                                                                                                            Introduction à Django
                                                                                                            
+ 
                                                                                                            Dans ce premier article, nous répondrons aux questions "qu'est ce que Django ?" et vous donner un aperçu rapide de ce qu'un framework peut vous apporter. Nous survolerons les fonctionnalités principales ainsi que quelques fonctionnalités avancées que nous ne pouvons pas détailler en l'espace d'un seul module. Nous vous montrerons aussi les blocs principaux de Django ce qui vous donnera un aperçu de ce qui est faisable avant de commencer.
                                                                                                            
+ 
                                                                                                            Installer un environnement de développement pour Django
                                                                                                            
+ 
                                                                                                            Maintenant que vous savez ce qu'est Django, nous allons nous attaquer à la partie installation, comment l'installer sous Windows, Linux(Ubuntu), et Mac OS X — tant que vous utilisez un système d'exploitation commun, cet article devrait vous donner le nécessaire afin de commencer à développer des applications avec Django.
                                                                                                            
  
                                                                                                            Tutoriel Django: Le site web d'une librairie
                                                                                                            
  
                                                                                                            Le premier article de cette série de tutoriels explique ce que vous aurez à apprendre autour d'un site que nous allons programmer pour une bibliothèque, site web dans lequel nous allons travailler et évoluer à travers plusieurs articles.
                                                                                                            
  
                                                                                                            Tutoriel Django Partie 2: Créer un squelette d'un site web
                                                                                                            
  
                                                                                                            Cet article vous montrera comment créer le "squelette" d'un site web auquel vous pourrez ajouter de quoi le personnaliser avec des paramètres spécifiques, des URLs, des modèles et des templates.
                                                                                                            
  
                                                                                                            Tutoriel Django Partie 3: Utilisation des modèles
                                                                                                            
- 
                                                                                                            Cet article montre comment définir des modèles pour le site web que nous appelleront LocalLibrary  — les modèles représentent la façon dont sont structurées nos données dans nos applications, nous autoriserons aussi Django à stocker des données dans une base de données pour nous (et modifier cela plus tard). Cet article explique en somme ce qu'un modèle est, comment le déclarer et les champs principaux. Il décrit aussi brièvement comment accéder aux données d'un modèle.
                                                                                                            
+ 
                                                                                                            Cet article montre comment définir des modèles pour le site web que nous appelleront LocalLibrary — les modèles représentent la façon dont sont structurées nos données dans nos applications, nous autoriserons aussi Django à stocker des données dans une base de données pour nous (et modifier cela plus tard). Cet article explique en somme ce qu'un modèle est, comment le déclarer et les champs principaux. Il décrit aussi brièvement comment accéder aux données d'un modèle.
                                                                                                            
  
                                                                                                            Tutoriel Django Partie 4: L'administration d'un site sous Django
                                                                                                            
  
                                                                                                            Maintenant que nous avons créé quelques modèles pour le site web LocalLibrary , nous allons utiliser Django Admin afin d'ajouter quelques "réelles" tables de données. Premièrement, nous allons vous montrer comment enregistrer des modèles avec la partie Admin, ensuite nous allons vous montrer comment se connecter et créer des informations. A la fin, nous allons vous montrer quelques moyens d'améliorer la présentation de la partie Admin.
                                                                                                            
- 
                                                                                                            Tutoriel Django Partie 5: Céez votre page d'accueil. (anglais)
                                                                                                            
+ 
                                                                                                            Tutoriel Django Partie 5: Céez votre page d'accueil.
                                                                                                            
  
                                                                                                            Nous sommes fin prêts à ajouter le code afin d'afficher notre première page entièremement — une page d'accueil pour le site web LocalLibrary qui montre combien d'enregistrements nous avons de chaque types de modèles et fournis une barre de navigation avec des liens menant à d'autres pages. Au fur et à mesure, nous gagnerons de l'expérience en écrivant du mapping d'URLs, en obtenant des enregistrements de la base de données et en utilisant des templates.
                                                                                                            
- 
                                                                                                            Tutoriel Django Partie 6: Listes génériques et détails des pages (anglais)
                                                                                                            
+ 
                                                                                                            Tutoriel Django Partie 6: Listes génériques et détails des pages
                                                                                                            
  
                                                                                                            Ce tutoriel viens étendre notre site LocaLibrary en y ajoutant des listes et des détails pour les auteurs et les livres. Ici nous allons tout vous apprendre sur les classes et vous montrer comment elles peuvent réduire la quantité de code que vous avez à écrire dans des situations communes. Nous allons aussi vous apprendre comment manipuler les URL plus en détail, ainsi que la réalisation basique d'un moteur de recherche.
                                                                                                            
- 
                                                                                                            Tutoriel Django Partie 7: Les sessions de framework (anglais)
                                                                                                            
+ 
                                                                                                            Tutoriel Django Partie 7: Les sessions de framework
                                                                                                            
  
                                                                                                            Ce tutoriel viens compléter le site LocalLibrary, en ajoutant un compteur de visiteurs basé sur un principe de session sur la page principale C'est un exemple relativement simple, mais il vous permettra de vous apprendre comment utiliser le système de session en fournissant un comportement persistant aux utilisateurs anonyme de votre site.
                                                                                                            
- 
                                                                                                            Tutoriel Django Partie 8: L'authentification de l'utilisateur ainsi que les permissions (anglais)
                                                                                                            
+ 
                                                                                                            Tutoriel Django Partie 8: L'authentification de l'utilisateur ainsi que les permissions
                                                                                                            
  
                                                                                                            Dans ce tutoriel, nous allons vous montrer comment autoriser les utilisateurs à se connecter à votre site avec leurs propres comptes, et comment contrôler ce qu'ils peuvent faire et voir en fonction des permissions accordées et de s'ils sont connectés ou non. Comme partie de cette démonstration, nous allons étendre le site LocalLibrary en ajoutant une page de connexion, de déconnexion et d'utilisateur - ainsi que des pages dédiées aux membres de la librairie afin de voir quel livre a été emprunté.
                                                                                                            
- 
                                                                                                            Tutoriel Django Partie 9: Travailler avec les formulaires (anglais)
                                                                                                            
- 
                                                                                                            Dans ce tutoriel, nous allons vous montrer comment travailler avec les formulaires en HTML avec Django, et plus particulièrement la façon la plus facile d'écrire, créer, mettre à jour et supprimer les formulaires. Pour cela, nous allons devoir étendre le site LocalLibrary afin que les libraires puissent changer les livres, et créer, mettre à jour, et supprimer les auteurs en utilisant nos propres formulaires (au lieu de passer par Django Admin).
                                                                                                            
- 
                                                                                                            Tutoriel Django Partie 10: Tester une application Django (anglais)
                                                                                                            
+ 
                                                                                                            Tutoriel Django Partie 9: Travailler avec les formulaires
                                                                                                            
+ 
                                                                                                            Dans ce tutoriel, nous allons vous montrer comment travailler avec les formulaires en HTML avec Django, et plus particulièrement la façon la plus facile d'écrire, créer, mettre à jour et supprimer les formulaires. Pour cela, nous allons devoir étendre le site LocalLibrary afin que les libraires puissent changer les livres, et créer, mettre à jour, et supprimer les auteurs en utilisant nos propres formulaires (au lieu de passer par Django Admin).
                                                                                                            
+ 
                                                                                                            Tutoriel Django Partie 10: Tester une application Django
                                                                                                            
  
                                                                                                            Plus les sites s'agrandissent, plus il devient dur de les tester manuellement — pas seulement parce que il y a plus de contenu à tester mais aussi parce que les intéractions entre les éléments deviennent plus complexes, un petit changement dans une partie du site peut nécessiter de nombreux tests afin de vérifier que ce changement n'a pas impacté les autres parties du site. La solution à ce problème est de programmer des tests automatiques, qui peuvent facilement et fiablement être executés à chaque changements. Ce tutoriel montre comment automatiser vos tests sur votre site web en utilisant le module de test du framework Django.
                                                                                                            
- 
                                                                                                            Tutoriel Django Partie 11: Déployer son site fait avec Django (anglais)
                                                                                                            
+ 
                                                                                                            Tutoriel Django Partie 11: Déployer son site fait avec Django
                                                                                                            
  
                                                                                                            Vous avez créé (et testé) un incroyable site web LocalLibray, vous allez maintenant l'installer sur un serveur public ce qui le rendra accessible aux membres de la librairie à travers internet. Cet article fournis un aperçu de comment vous pourriez trouver un hébergeur pour déployer votre site et de ce dont vous avez besoin pour rendre votre site pleinement fonctionnel.
                                                                                                            
- 
                                                                                                            Le module de sécurité de Django (anglais)
                                                                                                            
- 
                                                                                                            Protéger les données de l'utilisateur est essentiel dans la conception d'un site web, nous avons précédemment expliqué quel pouvaient être les menaces principales dans l'article sur la sécurité web  — cet article fournis une démonstration pratique des réaction des protections incluse de Django face à ce genre de menaces ainsi que la façon dont elles sont traitées.
                                                                                                            
+ 
                                                                                                            Le module de sécurité de Django
                                                                                                            
+ 
                                                                                                            Protéger les données de l'utilisateur est essentiel dans la conception d'un site web, nous avons précédemment expliqué quel pouvaient être les menaces principales dans l'article sur la sécurité web — cet article fournis une démonstration pratique des réaction des protections incluse de Django face à ce genre de menaces ainsi que la façon dont elles sont traitées.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Evaluation
                                                                                                            
@@ -60,6 +60,6 @@ translation_of: Learn/Server-side/Django
 
                                                                                                            L'évaluation suivante va tester votre compréhension à créer un site web avec Django comme décris dans la liste des guides ci-dessous.
                                                                                                            
 
 
                                                                                                            
- 
                                                                                                            Mini blog avec Django (anglais)
                                                                                                            
+ 
                                                                                                            Mini blog avec Django
                                                                                                            
  
                                                                                                            Dans ce devoir, vous utiliserez les connaissances que vous venez d'acquérir, afin de créer votre propre blog.
                                                                                                            
 
                                                                                                            
diff --git a/files/fr/learn/server-side/django/introduction/index.html b/files/fr/learn/server-side/django/introduction/index.html
index d4938e0610..6fa1007ece 100644
--- a/files/fr/learn/server-side/django/introduction/index.html
+++ b/files/fr/learn/server-side/django/introduction/index.html
@@ -11,13 +11,13 @@ translation_of: Learn/Server-side/Django/Introduction
 
 
                                                                                                            {{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
                                                                                                            
 
-
                                                                                                            Dans ce premier article sur Django, nous allons répondre à la question suivante "Qu'est ce que Django ?", et nous vous montrerons en quoi cette infrastructure d'application (aussi appelée framework) est spéciale. Nous allons ensuite voir les principales fonctionnalités, mais aussi quelques fonctionnalités avancées que nous n'aurons malheureusement pas le temps de voir en détails dans ce module. Nous allons aussi vous montrer comment fonctionne une application Django (bien que nous n'ayons pas d'environnement où le tester) .
                                                                                                            
+
                                                                                                            Dans ce premier article sur Django, nous allons répondre à la question suivante "Qu'est ce que Django ?", et nous vous montrerons en quoi cette infrastructure d'application (aussi appelée framework) est spéciale. Nous allons ensuite voir les principales fonctionnalités, mais aussi quelques fonctionnalités avancées que nous n'aurons malheureusement pas le temps de voir en détails dans ce module. Nous allons aussi vous montrer comment fonctionne une application Django (bien que nous n'ayons pas d'environnement où le tester) .
                                                                                                            
 
-
                                                                                                            • 
  
   
                                                                                                            
    Pré-requis:
                                                                                                            
+
                                                                                                            
-   
+   
@@ -44,7 +44,7 @@ translation_of: Learn/Server-side/Django/Introduction
  
                                                                                                            
  Un mot de passé haché est une valeur dont la longueur est fixée, créée en envoyant le mot de passe à travers une fonction de hachage cryptographique. Django peut vérifier si un mot de passe entré est correct en l'envoyant dans la fonction de hachage et en comparant le retour avec la valeur stockée dans la base de données. De ce fait, la nature unidirectionnelle de la fonction rend difficile pour un attaquant de retrouver le mot de passe d'origine, même si la valeur hachée est compromise.
                                                                                                            
  
                                                                                                            
- Django active par défaut la protection contre beaucoup de vulnérabilités, comme les injections SQL, le cross-site scripting, le cross-site request forgery et le clickjacking (voir Website security pour plus de détails sur ce genre d'attaques).
+ Django active par défaut la protection contre beaucoup de vulnérabilités, comme les injections SQL, le cross-site scripting, le cross-site request forgery et le clickjacking (voir Website security pour plus de détails sur ce genre d'attaques).
  
                                                                                                            Scalable
                                                                                                            
  
                                                                                                            Django utilise une architecture composite "shared-nothing" (chaque composant de l'architecture est indépendant des autres, et peut ainsi être remplacé ou changé si besoin). En ayant des séparations nettes entres les différentes parties, Django peut se scaler lors d'une hausse de trafic en ajoutant du hardware à tous les niveaux : serveurs cache, serveurs de base de données, serveurs d'application. Certains des sites les plus fréquentés ont réussi à scaler Django pour répondre à leur demande (par exemple, Instagram et Disqus pour ne nommer qu'eux deux).
                                                                                                            
  
                                                                                                            Maintenable
                                                                                                            
@@ -60,10 +60,10 @@ translation_of: Learn/Server-side/Django/Introduction
 
                                                                                                            Django a continué à se développer et à s'améliorer, depuis sa première sortie (1.0) en Septembre 2008 jusqu'à la version 2.0 récemment sortie (2017). Chaque sortie a ajouté son lot de nouvelles fonctionnalités et de corrections de bugs, allant du support de nouveaux types de bases de données, de moteurs de templates et de cache, à l'addition de fonctions et de classes de vues 'génériques' (qui réduisent la quantité de code que doivent écrire les développeurs pour tout un tas de tâches de programmation). 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Consultez les notes de publication sur le site web de Django pour voir les changements apportés dans les versions récentes, ainsi que tout le travail accompli pour améliorer Django.
                                                                                                            
+
                                                                                                            Note : Consultez les notes de publication sur le site web de Django pour voir les changements apportés dans les versions récentes, ainsi que tout le travail accompli pour améliorer Django.
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            Désormais, Django est un projet open-source collaboratif florissant, avec plusieurs milliers d'utilisateurs et de contributeurs. Bien que plusieurs fonctionnalités reflètent encore ses origines, Django a évolué en un framework versatile capable de développer n'importe quel type de site web. 
                                                                                                            
+
                                                                                                            Désormais, Django est un projet open-source collaboratif florissant, avec plusieurs milliers d'utilisateurs et de contributeurs. Bien que plusieurs fonctionnalités reflètent encore ses origines, Django a évolué en un framework versatile capable de développer n'importe quel type de site web. 
                                                                                                            
 
 
                                                                                                            À quel point Django est-il populaire ?
                                                                                                            
 
@@ -89,7 +89,7 @@ translation_of: Learn/Server-side/Django/Introduction
 
 
                                                                                                            Les applications web Django regroupent généralement le code qui gère chacune de ces étapes dans des fichiers séparés :
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            
 
 
                                                                                                              
  
                                                                                                            • URLs :  Bien qu'il soit possible de traiter les requêtes de chaque URL via une fonction unique, il est bien plus viable d'écrire une fonction de vue isolée qui gèrera chaque ressource. Un mapper URL est utilisé pour rediriger les requêtes HTTP à la vue appropriée d'après l'URL de requête. Le mapper URL peut aussi faire la correspondance entre des patterns de chaînes de caractères ou de nombres qui apparaissent dans une URL et passer ces derniers comme données dans une fonction de vue.
                                                                                                              • 
@@ -99,7 +99,7 @@ translation_of: Learn/Server-side/Django/Introduction
 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Django mentionne cette organisation sous le nom d'architecture "Modèle Vue Template". Elle a plusieurs similarités avec l'architecture Modèle Vue Contrôleur.
                                                                                                            
+
                                                                                                            Note : Django mentionne cette organisation sous le nom d'architecture "Modèle Vue Template". Elle a plusieurs similarités avec l'architecture Modèle Vue Contrôleur.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            
  
   
                                                                                                            
    Prérequis:Connaissances basiques de programmation. Une compréhension générale de la programmation coté serveur ainsi qu'une compréhension des interactions client-serveur dans les sites web (anglais).Connaissances basiques de programmation. Une compréhension générale de la programmation coté serveur ainsi qu'une compréhension des interactions client-serveur dans les sites web.
   
                                                                                                            
   
                                                                                                            
    Objectif:
                                                                                                            
+
                                                                                                            
@@ -46,14 +46,14 @@ translation_of: Learn/Server-side/Django/Models
 
 
                                                                                                            Avec ces éléments présents à l'esprit, le diagramme  de classes UML ci-dessous décrit les objets de la bibliothèque.
                                                                                                            
 
-
                                                                                                            LocalLibrary Model UML
                                                                                                            
+
                                                                                                            LocalLibrary Model UML
                                                                                                            
 
 
                                                                                                            Le modèle ainsi créé, décrit l'objet livre - Book - avec une description générique d'un livre, la copie d'un livre - BookInstance - avec l'état d'un copie physique d'un livre et de sa disponibilité, et l'objet auteur - Author. Les genres des collections pouvant varier, il est plus élégant de concevoir une classe d'objets dédiée comme pour les langues. Considérant que le statut de prêt ne changera pas, il est décidé que le traiter dans le code - BookInstance:status sera géré dans le code Django LOAN_STATUS. Dans le diagramme de classe, les caractéristiques de chacun des attributs et méthodes sont précisées pour plus de clarté du travail à réaliser.
                                                                                                            
 
 
                                                                                                            Le diagramme met aussi en évidence les relations entre les objets et la cardinalité des relations. La cardinalité est représentée par les nombres entre crochet avec, si nécessaire, un minimum et un maximum. Par exemple, un ouvrage a, au moins un genre ([1..*]) alors qu'un genre peut ne pas référencer un livre ([0..*]) ce qui se traduira en définition des objets dans models.py.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: La section ci-dessous est une introduction générale à la modélisation des objets pour les modèles de données dans Django. Gardez à l'esprit la bibliothèque locale et imaginez comment devraient être décrits les objets pour cette bibliothèque.
                                                                                                            
+
                                                                                                            Note : La section ci-dessous est une introduction générale à la modélisation des objets pour les modèles de données dans Django. Gardez à l'esprit la bibliothèque locale et imaginez comment devraient être décrits les objets pour cette bibliothèque.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Introduction au modèle de données
                                                                                                            
@@ -64,7 +64,7 @@ translation_of: Learn/Server-side/Django/Models
 
 
                                                                                                            Les objets sont toujours définis dans le fichier models.py de chaque application. Ils sont conçus comme sous-classe de django.db.models.Model, et sont caractérisés par des attributs ou champs, des méthodes et des métadonnées. L'extrait ci-dessous définit donc la classe MyModelName:
                                                                                                            
 
-
                                                                                                            from django.db import models
+
                                                                                                            from django.db import models
 
 class MyModelName(models.Model):
     """A typical class defining a model, derived from the Model class."""
@@ -92,7 +92,7 @@ class MyModelName(models.Model):
 
 
                                                                                                            Chaque objet peut contenir autant d'attributs que de besoin et de quelque type qu'il soit. Chaque attribut correspondra à une colonne - ou champ - dans une table de la base de données. Chaque enregistrement, ou ligne dans la table, correspondra à une instance de la classe d'objet et chaque champ sera évalué. Un champ est de la forme :
                                                                                                            
 
-
                                                                                                            my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')
                                                                                                            
+
                                                                                                            my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')
                                                                                                            
 
 
                                                                                                            Dans l'exemple ci-dessus, le champs est une chaîne de caractères — de type models.CharField —  dont le nom est my_field_name. Les champs ont des types pré-définis représentés par une classe d'objet Django qui va permettre de caractériser une champ du modèle de données. Cela permet aussi de valider les données qui seront fournies via les formulaires du site web décrits avec le langage HTML. Les classes caractérisant les type de champs peuvent accepter des paramètres pour préciser les contraintes appliquées à ce champ. Dans cet exemple, deux arguments sont indiqués :
                                                                                                            
 
@@ -143,7 +143,7 @@ class MyModelName(models.Model):
 
 
                                                                                                            Vous avez la capacité de déclarer des métadonnées à l'aide de la classe  class Meta, comme précisé ci-dessous :
                                                                                                            
 
-
                                                                                                            class Meta:
+
                                                                                                            class Meta:
     ordering = ['-my_field_name']
 
                                                                                                            
 
@@ -151,13 +151,13 @@ class MyModelName(models.Model):
 
 
                                                                                                            Voici un exemple de classe de livre par titre et dates de parution :
                                                                                                            
 
-
                                                                                                            ordering = ['title', '-pubdate']
                                                                                                            
+
                                                                                                            ordering = ['title', '-pubdate']
                                                                                                            
 
 
                                                                                                            Les livres sont présenté dans l'ordre alphabétique de leur titre, puis dans l'ordre chronologique du plus récent au plus ancien.
                                                                                                            
 
 
                                                                                                            Un autre attribut très utile est celui d'un nom vernaculaire pour la classe, verbose_name  peut être au singulier et au pluriel :
                                                                                                            
 
-
                                                                                                            verbose_name = 'BetterName'
                                                                                                            
+
                                                                                                            verbose_name = 'BetterName'
                                                                                                            
 
 
                                                                                                            D'autres attributs vous permettent de compléter des droits d'accès à ceux appliqués par défaut, des classements s'appuyant sur le comportement d'autres champs, ou de définir une classe abstraite (c'est-à-dire qui n'aura pas de transcription dans une table et des enregistrements, mais servira de support à d'autres classes partageant des éléments communs).
                                                                                                            
 
@@ -171,18 +171,18 @@ class MyModelName(models.Model):
 
 
                                                                                                            A minima, chaque modèle de données - c'est-à-dire une classe héritée de la classe model du module django.db - vous devez définir la méthode __str__() pour permettre d'afficher un élément compréhensible qui représentera l'instance de la classe. Cette méthode est aussi utilisée au niveau du site d'administration pour afficher les instances de la classe administrée. La plupart du temps, cette méthode retourne un titre ou nom associé à aux objets de la classe.
                                                                                                            
 
-
                                                                                                            def __str__(self):
+
                                                                                                            def __str__(self):
     return self.field_name
                                                                                                            
 
 
                                                                                                            Une seconde méthode très utilisée dans le cadriciel Django est get_absolute_url(). Elle permet de fournir un URL pour afficher dans le site web le contenu de de chacun des enregistrements associés au modèle de données décrit. Si vous utilisez cette méthode, Django ajoutera un bouton pour permet de visualiser le détail des enregistrements. Classiquement, une méthode get_absolute_url() est de la forme :
                                                                                                            
 
-
                                                                                                            def get_absolute_url(self):
+
                                                                                                            def get_absolute_url(self):
     """Returns the url to access a particular instance of the model."""
     return reverse('model-detail-view', args=[str(self.id)])
 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: En supposant que vous allez utiliser des URLs du type /myapplication/mymodelname/2 pour afficher individuellement les données des enregistrements de la table associée à votre modèle de données (où "2" est l'identifiant d'un enregistrement donné), vous devrez créer un routage d'URL pour vous permettre de transmettre l'id à une vue détaillée de l'enregistrement (model detail view dans le cadriciel Django). Cette vue détaillée réalisera l'affichage de l'enregistrement. La fonction reverse() a pour objectif d'écrire l'URL dans un format cohérent avec le traitement des URL par les navigateurs.
                                                                                                            
+
                                                                                                            Note : En supposant que vous allez utiliser des URLs du type /myapplication/mymodelname/2 pour afficher individuellement les données des enregistrements de la table associée à votre modèle de données (où "2" est l'identifiant d'un enregistrement donné), vous devrez créer un routage d'URL pour vous permettre de transmettre l'id à une vue détaillée de l'enregistrement (model detail view dans le cadriciel Django). Cette vue détaillée réalisera l'affichage de l'enregistrement. La fonction reverse() a pour objectif d'écrire l'URL dans un format cohérent avec le traitement des URL par les navigateurs.
                                                                                                            
 
 
                                                                                                            Bien entendu, cela requiert d'écrire le routage de l'URL, la vue et le gabarit...
                                                                                                            
 
                                                                                                            
@@ -197,7 +197,7 @@ class MyModelName(models.Model):
 
 
                                                                                                            Pour créer un enregistrement, il suffit de définir une instance de la classe d'objet et de la sauvegarder avec la méthode save().
                                                                                                            
 
-
                                                                                                            # Créer un nouvel enregistrement en utilisant la méthode d'instanciation.
+
                                                                                                            # Créer un nouvel enregistrement en utilisant la méthode d'instanciation.
 record = MyModelName(my_field_name="Instance #1")
 
 # Sauvegarde de l'enregistrement en base de données.
@@ -205,12 +205,12 @@ record.save()
 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Si aucun champs n'a été défini comme une clé primaire (option primary_key), un champs nommé id ou pk sera affecté au modèle et sera incrémenté automatiquement. Vous pouvez requêter cet enregistrement à l'aide de ce champ ; le premier enregistrement aura habituellement la valeur entière 1.
                                                                                                            
+
                                                                                                            Note : Si aucun champs n'a été défini comme une clé primaire (option primary_key), un champs nommé id ou pk sera affecté au modèle et sera incrémenté automatiquement. Vous pouvez requêter cet enregistrement à l'aide de ce champ ; le premier enregistrement aura habituellement la valeur entière 1.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Les champs de l'enregistrement sont accessibles à l'aide des attributs de la classe d'objet. En utilisant la syntaxe pointée, vous pouvez modifier les valeurs des champs de l'enregistrement. Vous devez utiliser la méthode save() pour enregistrer en base de données les modifications.
                                                                                                            
 
-
                                                                                                            # Accès au valeur des champs par le biais des attributs de classe Python.
+
                                                                                                            # Accès au valeur des champs par le biais des attributs de classe Python.
 print(record.id) # devrez retourner la valeur 1 pour le premier en enregistrement.
 print(record.my_field_name) # devrez afficher 'Instance #1'
 
@@ -223,17 +223,17 @@ record.save()
                                                                                                            
 
                                                                                                            La classe de base objects permet de faire des recherches d'enregistrement qui correspondront aux critères de recherche souhaités.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Nous utiliserons dans les explications le modèle de données d'un livre (Book)avec des titres (title) et des genres littéraires (genre), car expliquer la manière de rechercher sur un modèle théorique n'est pas très pédagogique.
                                                                                                            
+
                                                                                                            Note : Nous utiliserons dans les explications le modèle de données d'un livre (Book)avec des titres (title) et des genres littéraires (genre), car expliquer la manière de rechercher sur un modèle théorique n'est pas très pédagogique.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Vous pouvez obtenir tous les enregistrements d'un modèle de données sous la forme d'un jeu de données ou QuerySet, en utilisant objects.all(). Un QuerySet est un objet itérable, c'est-à-dire jeu de données contenant des objets que l'on peut parcourir.
                                                                                                            
 
-
                                                                                                            all_books = Book.objects.all()
+
                                                                                                            all_books = Book.objects.all()
 
                                                                                                            
 
 
                                                                                                            Un filtre Django ou filter() est une méthode qui permet de sélectionner un jeu de données répondant à des critères (texte ou numérique) de sélection. Par exemple, nous filtrons les livres dont le titre contient le mot "wild", puis nous dénombrons le jeu de données.
                                                                                                            
 
-
                                                                                                            wild_books = Book.objects.filter(title__contains='wild')
+
                                                                                                            wild_books = Book.objects.filter(title__contains='wild')
 number_wild_books = wild_books.count()
 
                                                                                                            
 
@@ -241,12 +241,12 @@ number_wild_books = wild_books.count()
 
 
                                                                                                            Le marqueur "double souligné" permet de construire une chaîne de navigation à travers les objets lorsque le champ considéré est une clé étrangère (ForeignKey). C'est systématiquement le cas lorsque l'on doit filtrer sur une propriété d'un attribut dans une relation un-à-un. Dans ce cas (exemple ci-dessous), vous identifiez l'attribut de la clé étrangère par le biais d'un "double souligné" qui indique le champs à filter. L'exemple ci-dessous indique que vous filtrez les livres selon le nom (name) du genre (genre) du livre.
                                                                                                            
 
-
                                                                                                            # Le critère s'appliquera sur les genres contenant 'fiction' i.e. : Fiction, Science fiction, non-fiction etc.
+
                                                                                                            # Le critère s'appliquera sur les genres contenant 'fiction' i.e. : Fiction, Science fiction, non-fiction etc.
 books_containing_genre = Book.objects.filter(genre__name__icontains='fiction')
 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Vous pouvez construire une chemin pour naviguer dans autant de niveaux de relation (ForeignKey/ManyToManyField) que vous en avez besoin en concaténant des noms de champs à l'aide  (__) . Si par exemple vous souhaitez trouver un livre (Book) qui possède différents type (type) de couvertures (cover) identifiées par des noms (name) alors le chemin sera du type : type__cover__name__exact='hard'.
                                                                                                            
+
                                                                                                            Note : Vous pouvez construire une chemin pour naviguer dans autant de niveaux de relation (ForeignKey/ManyToManyField) que vous en avez besoin en concaténant des noms de champs à l'aide  (__) . Si par exemple vous souhaitez trouver un livre (Book) qui possède différents type (type) de couvertures (cover) identifiées par des noms (name) alors le chemin sera du type : type__cover__name__exact='hard'.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            La mise en oeuvre des requêtes est très riches en fonction des modèles et des relations, de sous-ensemble de données, etc. Pour une informations détaillées, vous devez consulter les requêtes sur le site de référence de Django.
                                                                                                            
@@ -255,7 +255,7 @@ books_containing_genre = Book.objects.filter(genre__nameCette section est consacrée au démarrage de la définition de l'application LocalLibrary qui permet de gérer une petite bibliothèque locale. Ouvrez le fichier models.py présent dans le répertoire /locallibrary/catalog/. Le code par défaut est déjà en place au début du document et permet d'importer les éléments du module models de django.
                                                                                                            
 
-
                                                                                                            from django.db import models
+
                                                                                                            from django.db import models
 
 # Create your models here.
                                                                                                            
 
@@ -263,7 +263,7 @@ books_containing_genre = Book.objects.filter(genre__nameCet objet est utilisé pour décrire et enregistrer le genre littéraire des livres — par exemple une fiction, une polard ou un roman. Comme cela a été évoqué précédemment, nous créons un modèle de données plutôt que de gérer cela à l'aide de texte libre ou de codage en dur. Copiez le texte ci-dessous à la fin du fichier models.py.
                                                                                                            
 
-
                                                                                                            class Genre(models.Model):
+
                                                                                                            class Genre(models.Model):
     """Cet objet représente une catégorie ou un genre littéraire."""
     name = models.CharField(max_length=200, help_text='Enter a book genre (e.g. Science Fiction)')
 
@@ -278,7 +278,7 @@ books_containing_genre = Book.objects.filter(genre__nameComme précédemment, vous pouvez copier le descriptif de l'objet Book à la fin du fichier models.py. Cet objet représente un livre dans sa description et non une copie en rayon disponible au prêt. Par conséquent, l'objet contient un titre et son identifiant international (isbn dont on notera l'étiquette en majuscule pour ne pas avoir "Isbn" à la place) sous forme de chaînes de caractère. De plus, l'objet contient un résumé sous forme d'une chaîne de caractère de longueur non explicite pour traiter de résumés plus ou moins long.
                                                                                                            
 
-
                                                                                                            from django.urls import reverse # Cette fonction est utilisée pour formater les URL
+
                                                                                                            from django.urls import reverse # Cette fonction est utilisée pour formater les URL
 
 class Book(models.Model):
     """Cet objet représente un livre (mais ne traite pas les copies présentes en rayon)."""
@@ -324,7 +324,7 @@ class Book(models.Model):
  
                                                                                                          • Une chaîne de caractères (CharField) pour enregistrer les mentions légales (imprint) du livre.
                                                                                                            • 
 
 
-
                                                                                                            import uuid # Ce module est nécessaire à la gestion des identifiants unique (RFC 4122) pour les copies des livres
+
                                                                                                            import uuid # Ce module est nécessaire à la gestion des identifiants unique (RFC 4122) pour les copies des livres
 
 class BookInstance(models.Model):
     """Cet objet permet de modéliser les copies d'un ouvrage (i.e. qui peut être emprunté)."""
@@ -367,7 +367,7 @@ class BookInstance(models.Model):
 
                                                                                                            La méthode __str__() obligatoirement requise par Django pour manipuler les instances d'objet et les enregistrements associés en base. Elle offre cependant la particularité d'associer l'identifiant unique et le titre du livre qui lui est associé.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Un aspect de Python:
                                                                                                            
+
                                                                                                            Note : Un aspect de Python:
                                                                                                            
 
 
                                                                                                            
  
   
                                                                                                            
    Pré-requis:
                                                                                                            
+
                                                                                                            
-   
+   
@@ -39,45 +39,45 @@ translation_of: Learn/Server-side/Django/skeleton_website
 
                                                                                                            La création est aisée:
                                                                                                            
 
 
                                                                                                              
- 
                                                                                                            1. Utilisez la commande django-admin pour créer le dossier du projet ainsi que les sous-dossiers et fichiers de base ainsi que le script de gestion du projet (manage.py).
                                                                                                              2. 
- 
                                                                                                            2. Utilisez manage.py pour créer une ou plusieurs applications du projet.
+ 
                                                                                                            3. Utilisez la commande django-admin pour créer le dossier du projet ainsi que les sous-dossiers et fichiers de base ainsi que le script de gestion du projet (manage.py).
                                                                                                              4. 
+ 
                                                                                                            4. Utilisez manage.py pour créer une ou plusieurs applications du projet.
   
                                                                                                              
-  
                                                                                                              Note: Un site web consiste en une ou plusieurs sections, par exemple un site principal, un blog, un wiki,... La bonne pratique avec Django est de réaliser chacun des composants comme des applications séparées qui pourront éventuellement être réutilisées dans d'autres projets.
                                                                                                              
+  
                                                                                                              Note : Un site web consiste en une ou plusieurs sections, par exemple un site principal, un blog, un wiki,... La bonne pratique avec Django est de réaliser chacun des composants comme des applications séparées qui pourront éventuellement être réutilisées dans d'autres projets.
                                                                                                              
   
                                                                                                              
  
                                                                                                              5. 
- 
                                                                                                            5. Enregistrez la nouvelle application dans le projet. 
                                                                                                              6. 
- 
                                                                                                            6. Liez les urls et chemins pour chaque application.
                                                                                                              7. 
+ 
                                                                                                            7. Enregistrez la nouvelle application dans le projet. 
                                                                                                              8. 
+ 
                                                                                                            8. Liez les urls et chemins pour chaque application.
                                                                                                              9. 
 
                                                                                                            
 
 
                                                                                                            Pour le site web "Bibliothèque locale", le dossier du site web et celui du projet auront le même nom locallibrary. Une seule application catalog sera utilisée. La hiérachie de dossier du projet à la forme ci-dessous :
                                                                                                            
 
-
                                                                                                            locallibrary/         # Website folder
+
                                                                                                            locallibrary/         # Website folder
     manage.py         # Script to run Django tools for this project (created using django-admin)
     locallibrary/     # Website/project folder (created using django-admin)
     catalog/          # Application folder (created using manage.py)
 
                                                                                                            
 
-
                                                                                                            
-
                                                                                                            Afin de respecter la cohérence du code et pouvoir utiliser les développements sur GitHub, les noms du site et des applications, en anglais, n'ont pas été modifiés.
                                                                                                            
+
                                                                                                            
+
                                                                                                            Note : Afin de respecter la cohérence du code et pouvoir utiliser les développements sur GitHub, les noms du site et des applications, en anglais, n'ont pas été modifiés.
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            La suite de ce chapitre est consacrée pas à pas aux étapes de création d'un projet et d'une application. La fin du chapitre sera consacré à quelques éléments de configuration du site qui peuvent être réalisés à ce stade.
                                                                                                            
+
                                                                                                            La suite de ce chapitre est consacrée pas à pas aux étapes de création d'un projet et d'une application. La fin du chapitre sera consacré à quelques éléments de configuration du site qui peuvent être réalisés à ce stade.
                                                                                                            
 
 
                                                                                                            Créer le projet locallibrary
                                                                                                            
 
-
                                                                                                            Tout d'abord, il est nécessaire d'ouvrir une fenêtre pour exécuter des commandes en ligne (un terminal sous Linux/MacOS ou une fenêtre command sous Windows). Assurez-vous d'être dans un environnement virtuel python, déplacez-vous dans votre arborescence de dossiers pour être dans votre zone de développement des applications Django. Créez-y un sous-dossier pour les projets Django django_projects et déplacez-vous dans ce dernier :
                                                                                                            
+
                                                                                                            Tout d'abord, il est nécessaire d'ouvrir une fenêtre pour exécuter des commandes en ligne (un terminal sous Linux/MacOS ou une fenêtre command sous Windows). Assurez-vous d'être dans un environnement virtuel python, déplacez-vous dans votre arborescence de dossiers pour être dans votre zone de développement des applications Django. Créez-y un sous-dossier pour les projets Django django_projects et déplacez-vous dans ce dernier :
                                                                                                            
 
-
                                                                                                            mkdir django_projects
+
                                                                                                            mkdir django_projects
 cd django_projects
                                                                                                            
 
 
                                                                                                            Pour créer un nouveau projet avec le quadriciel Django, il suffit d'utiliser la commande  django-admin startproject. Le résultat de cette commande sera un sous-dossier du nom du projet dans lequel il suffit de s'y déplacer comme indiqué ci-dessous :
                                                                                                            
 
-
                                                                                                            django-admin startproject locallibrary
+
                                                                                                            django-admin startproject locallibrary
 cd locallibrary
                                                                                                            
 
 
                                                                                                            La commande django-admin crée une arboresence contenant des fichiers et un sous-dossier portant le même nom que le projet :
                                                                                                            
 
-
                                                                                                            locallibrary/
+
                                                                                                            locallibrary/
     manage.py
     locallibrary/
         __init__.py
@@ -87,15 +87,15 @@ cd locallibrary
                                                                                                            
 
 
                                                                                                            Votre répertoire de travail est de la forme :
                                                                                                            
 
-
                                                                                                            ../django_projects/locallibrary/
                                                                                                            
+
                                                                                                            ../django_projects/locallibrary/
                                                                                                            
 
 
                                                                                                            Le sous-dossier locallibrary permettra de gérer les requêtes web, il contient :
                                                                                                            
 
 
                                                                                                              
  
                                                                                                            • __init__.py est un fichier vide qui indique au langage Python de considérer ce dossier comme un module Python.
                                                                                                              • 
  
                                                                                                            • settings.py contient les paramètrages du site web. C'est ce fichier qui permet de contrôler l'enregistrement des applications créées - qui va être exposé plus bas -, la configuration de la base de données ou des variables globales au site. 
                                                                                                              • 
- 
                                                                                                            • urls.py contient les indications de routage des urls du site web. Alors qu'il pourraient contenir toutes les urls, nous verrons plus loin qu'ils est plus pratique de déléguer la gestion des urls à propre à chacune des applications dans le contexte de l'application. 
                                                                                                              • 
- 
                                                                                                            • wsgi.py est utilisé pour la gestion de l'interface entre Python et le serveur web. Il est recommandé de ne pas y toucher.
                                                                                                              • 
+ 
                                                                                                            • urls.py contient les indications de routage des urls du site web. Alors qu'il pourraient contenir toutes les urls, nous verrons plus loin qu'ils est plus pratique de déléguer la gestion des urls à propre à chacune des applications dans le contexte de l'application. 
                                                                                                              • 
+ 
                                                                                                            • wsgi.py est utilisé pour la gestion de l'interface entre Python et le serveur web. Il est recommandé de ne pas y toucher.
                                                                                                              • 
 
                                                                                                            
 
 
                                                                                                            Le fichier manage.py est utilisé pour créer et gérer les applications au sein du projet. C'est une boîte à outil précieuse qu'il ne faut pas modifier.
                                                                                                            
@@ -104,10 +104,10 @@ cd locallibrary
                                                                                                            
 
 
                                                                                                            La commande ci-dessous va créer l'application catalog. Vous devez être dans le dossier de votre projet locallibrary pour exécuter cette commande (dans le même dossier que le fichier manage.py de votre projet) :
                                                                                                            
 
-
                                                                                                            python3 manage.py startapp catalog
                                                                                                            
+
                                                                                                            python3 manage.py startapp catalog
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: La commande ci-dessus est exécutée dans un environnement Linux/macOS X. Sous Windows, il se peut que la commande soit : py -3 manage.py startapp catalog
                                                                                                            
+
                                                                                                            Note : La commande ci-dessus est exécutée dans un environnement Linux/macOS X. Sous Windows, il se peut que la commande soit : py -3 manage.py startapp catalog
                                                                                                            
 
 
                                                                                                            Si vous travaillez dans un environnement Windows, l'ensemble de la série didactique est écrite pour un environnement Linux/MacOS. Pensez, alors, à remplacer les commandes python3 par py -3.
                                                                                                            
 
@@ -118,7 +118,7 @@ cd locallibrary
                                                                                                            
 
 
                                                                                                            Le dossier projet locallibrary est agrémenté d'un nouveau sous-dossier catalog :
                                                                                                            
 
-
                                                                                                            locallibrary/
+
                                                                                                            locallibrary/
     manage.py
     locallibrary/
     catalog/
@@ -139,7 +139,7 @@ cd locallibrary
                                                                                                            
 
 
 
                                                                                                            
-
                                                                                                            Note: Vous pouvez constater que dans le dossier de l'application, il n'y a pas de fichier pour gérer les urls, les gabarits ou les fichiers statiques. Nouys verrons ce point un peu plus loin, ils ne sont pas systématiquement nécessaires.
                                                                                                            
+
                                                                                                            Note : Vous pouvez constater que dans le dossier de l'application, il n'y a pas de fichier pour gérer les urls, les gabarits ou les fichiers statiques. Nouys verrons ce point un peu plus loin, ils ne sont pas systématiquement nécessaires.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Enregistrer l'application catalog
                                                                                                            
@@ -148,7 +148,7 @@ cd locallibrary
                                                                                                            
 
 
                                                                                                            Éditez le fichier django_projects/locallibrary/locallibrary/settings.py et allez jusqu'à la liste INSTALLED_APPS. Ajoutez alors comme indiqué ci-dessous l'application à la liste.
                                                                                                            
 
-
                                                                                                            INSTALLED_APPS = [
+
                                                                                                            INSTALLED_APPS = [
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
@@ -161,7 +161,7 @@ cd locallibrary
                                                                                                            
 
                                                                                                            Le nouvel enregistrement défini l'objet pour cette nouvelle application avec le nom (CatalogConfig) qui a été généré dans le fichier /locallibrary/catalog/apps.py quand l'application a été créée.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Nous verrons plus loin les autres paramètres de ce fichier(comme MIDDLEWARE). Cela permet la prise en charge par Django administration site et donne accès à de nombreuses fonctionnalités (gestion des sessions, de l'authentication, etc).
                                                                                                            
+
                                                                                                            Note : Nous verrons plus loin les autres paramètres de ce fichier(comme MIDDLEWARE). Cela permet la prise en charge par Django administration site et donne accès à de nombreuses fonctionnalités (gestion des sessions, de l'authentication, etc).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Définir la base de données
                                                                                                            
@@ -170,7 +170,7 @@ cd locallibrary
                                                                                                            
 
 
                                                                                                            Le système de gestion de base de données (SGBD) SQLite sera utilisé dans le projet de cette série didactique ; nous n'aurons pas d'accès concurents massifs et ce système ne requiert pas  de paramétrages complémentaires. Ci-dessous la définition dans settings.py est nécessaire pour utiliser ce SGBD :
                                                                                                            
 
-
                                                                                                            DATABASES = {
+
                                                                                                            DATABASES = {
     'default': {
         'ENGINE': 'django.db.backends.sqlite3',
         'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
@@ -182,7 +182,7 @@ cd locallibrary
                                                                                                            
 
 
                                                                                                            Le fichier settings.py est utilisé pour l'ensemble des paramètres du projet, mais pour le moment nous n'allons nous occuper du fuseau horaire. Le format des fuseaux horaires est le format standard en informatique (Liste des codes - en anglais). Changez la variable TIME_ZONE de votre projet avec la chaîne appropriée à votre fuseau, par exemple :
                                                                                                            
 
-
                                                                                                            TIME_ZONE = 'Europe/Paris'
                                                                                                            
+
                                                                                                            TIME_ZONE = 'Europe/Paris'
                                                                                                            
 
 
                                                                                                            Il y a deux paramètres à connaître, même s'il ne seront pas modifiés pour l'instant :
                                                                                                            
 
@@ -197,7 +197,7 @@ cd locallibrary
                                                                                                            
 
 
                                                                                                            A l'ouverture du fichier locallibrary/locallibrary/urls.py,  vous pouvez remarquer les premières instructions sur la manière de gérer la cartographie des URLs.
                                                                                                            
 
-
                                                                                                            """locallibrary URL Configuration
+
                                                                                                            """locallibrary URL Configuration
 
 The `urlpatterns` list routes URLs to views. For more information please see:
     https://docs.djangoproject.com/en/2.1/topics/http/urls/
@@ -223,12 +223,12 @@ urlpatterns = [
 
                                                                                                            Le routage des URLs est géré à l'aide de la variable urlpatterns. Elle consititue une liste Python de fonctions path(). Chaque instance path() peut associer des motifs d'URL à une vue particulière, qui sera appelée si l'URL appellée correspond au motif décrit, ou vers une autre liste d'URL (dans ce cas, le motif est à considérer comme le motif de base pour le module dans lequel il est décrit). La variable urlpatterns contient au démarrage une seule fonction qui permet de gérer l'URL d'administration du site et utilisant le module par défaut de Django admin.site.urls.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Dans la fonction path(), une route est une chaîne de caractères définissant une URL ou un motif d'URL. Cette chaîne peut inclure des variables nommées (entre < et >, par exemple 'catalog/<id>/'). Ce motif correspondra à une URL du type /catalog/des_caracteres/. La chaîne des_caracteres sera transmis à la vue comme une chaîne de caractère associée à une variable nommée id. Ce point sera vu en détails plus loin dans la série didactique.
                                                                                                            
+
                                                                                                            Note : Dans la fonction path(), une route est une chaîne de caractères définissant une URL ou un motif d'URL. Cette chaîne peut inclure des variables nommées (entre < et >, par exemple 'catalog/<id>/'). Ce motif correspondra à une URL du type /catalog/des_caracteres/. La chaîne des_caracteres sera transmis à la vue comme une chaîne de caractère associée à une variable nommée id. Ce point sera vu en détails plus loin dans la série didactique.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Ajoutez les lignes ci-dessous à la fin du fichier de manière à ajouter dans la variable urlpatterns une nouvelle entrée à la liste des routes. Cette nouvelle entrée permet une nouvelle route pour catalog/ dont la gestion est déléguée au fichier urls.py du module catalog (c'est-à-dire le fichier catalog/urls.py).
                                                                                                            
 
-
                                                                                                            # Use include() to add paths from the catalog application
+
                                                                                                            # Use include() to add paths from the catalog application
 from django.urls import include
 from django.urls import path
 
@@ -242,7 +242,7 @@ urlpatterns += [
 
 
                                                                                                            Ajoutez les lignes ci-dessous au bas du fichier urls.py :
                                                                                                            
 
-
                                                                                                            #Add URL maps to redirect the base URL to our application
+
                                                                                                            #Add URL maps to redirect the base URL to our application
 from django.views.generic import RedirectView
 urlpatterns += [
     path('', RedirectView.as_view(url='/catalog/', permanent=True)),
@@ -251,7 +251,7 @@ urlpatterns += [
 
 
                                                                                                            La racine du site ('/') est prise en compte par Django, il est donc inutile d'écrire le chemin avec le caractère '/' en début. Si vous maintenez ce mode d'écriture, vous aurez le message ci-dessous au démarrage du serveur :
                                                                                                            
 
-
                                                                                                            System check identified some issues:
+
                                                                                                            System check identified some issues:
 
 WARNINGS:
 ?: (urls.W002) Your URL pattern '/' has a route beginning with a '/'.
@@ -263,7 +263,7 @@ If this pattern is targeted in an include(), ensure the include() pattern has a
 
 
                                                                                                            Ajoutez les lignes ci-dessous au bas du fichier urls.py :
                                                                                                            
 
-
                                                                                                            # Use static() to add url mapping to serve static files during development (only)
+
                                                                                                            # Use static() to add url mapping to serve static files during development (only)
 from django.conf import settings
 from django.conf.urls.static import static
 
@@ -271,9 +271,9 @@ urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
 
 
                                                                                                            
-
                                                                                                            Note: Il y a plusieurs manière pour ajouter des routes à la variable urlpatterns (dans les étapes décrites ci-dessus nous avons ajouté petit à patir en utilisant l'opérateur += pour bien séparer les étapes). Il est en réalité tout à fait possible de tout regrouper dans une seule étape :
                                                                                                            
+
                                                                                                            Note : Il y a plusieurs manière pour ajouter des routes à la variable urlpatterns (dans les étapes décrites ci-dessus nous avons ajouté petit à patir en utilisant l'opérateur += pour bien séparer les étapes). Il est en réalité tout à fait possible de tout regrouper dans une seule étape :
                                                                                                            
 
-
                                                                                                            urlpatterns = [
+
                                                                                                            urlpatterns = [
     path('admin/', admin.site.urls),
     path('catalog/', include('catalog.urls')),
     path('', RedirectView.as_view(url='/catalog/')),
@@ -285,7 +285,7 @@ urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)Dernière étape ! Il faut créer le fichier urls.py dans l'application (ou le module) catalog et de définir la variable urlpatterns vide pour le moment. 
                                                                                                            
 
-
                                                                                                            from django.urls import path
+
                                                                                                            from django.urls import path
 from . import views
 
 urlpatterns = [
@@ -305,12 +305,12 @@ urlpatterns = [
 
 
                                                                                                            Quand le site a été créé (cf. supra), Django a automatiquement ajouté plusieurs modèles de base pour pouvoir administrer le site (point qui sera abordé plus loin). Pour configurer la base de données, avec ces éléments de base, il vous faut exécuter les commandes en ligne ci-dessous dans le répertoire racine du projet (dossier où se trouve manage.py):
                                                                                                            
 
-
                                                                                                            python3 manage.py makemigrations
+
                                                                                                            python3 manage.py makemigrations
 python3 manage.py migrate
 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Important: Chaque fois que vous ferez évoluer le modèle de données, vous devrez exécuter le commandes ci-dessus (elles seront traduites en structure dans la base de données que cela conduise à l'ajout ou au retrait d'objets ou d'attributs).
                                                                                                            
+
                                                                                                            Attention : Chaque fois que vous ferez évoluer le modèle de données, vous devrez exécuter le commandes ci-dessus (elles seront traduites en structure dans la base de données que cela conduise à l'ajout ou au retrait d'objets ou d'attributs).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            L'option makemigrations réalise (sans les appliquer) les migrations nécessaires à toutes les applications du projet. Vous pouvez cependant préciser le nom de l'application pour laquelle vous souhaitez réaliser la migration. Ceci permet de vérifier le code et la cohérence du modèle de donner avant de l'appliquer réellement. Quand vous aurez un niveau expert, vous pourrez choisir de les modifier à la marge.
                                                                                                            
@@ -318,7 +318,7 @@ python3 manage.py migrate
 
                                                                                                            L'option migrate applique les modifications sur la base de données (Django trace les modifications réalisées dans la base de données).
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Vous pouvez consulter la documentation Migrations (sur le site Django) pour plus d'informations.
                                                                                                            
+
                                                                                                            Note : Vous pouvez consulter la documentation Migrations (sur le site Django) pour plus d'informations.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Démarrer le site web
                                                                                                            
@@ -326,12 +326,12 @@ python3 manage.py migrate
 
                                                                                                            Pendant la phase de développement, vous pouvez tester votre serveur sur un mode local et le consulter avec votre navigateur.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Le serveur local n'est ni robuste ni performant, il n'est donc pas fait pour être utilisé en production, mais il permet d'être autonome pour les travaux de développement. La configuration par défaut de ce serveur est telle que votre site est accessible à l'URL http://127.0.0.1:8000/. Cependant, vous pouvez modifier ces paramètres et pour plus d'information vous pouvez consulter la documentation sur le site Django des commandes django-admin and manage.py: runserver.
                                                                                                            
+
                                                                                                            Note : Le serveur local n'est ni robuste ni performant, il n'est donc pas fait pour être utilisé en production, mais il permet d'être autonome pour les travaux de développement. La configuration par défaut de ce serveur est telle que votre site est accessible à l'URL http://127.0.0.1:8000/. Cependant, vous pouvez modifier ces paramètres et pour plus d'information vous pouvez consulter la documentation sur le site Django des commandes django-admin and manage.py: runserver.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Pour démarrer le serveur local, il suffit d'exécuter la commande ci-dessous dans le répertoire du projet (dossier où se trouver manage.py) :
                                                                                                            
 
-
                                                                                                            python3 manage.py runserver
+
                                                                                                            python3 manage.py runserver
 
  Performing system checks...
 
@@ -344,18 +344,18 @@ python3 manage.py migrate
 
 
                                                                                                            Dès que le serveur est actif, vous pouvez utiliser votre navigateur est accéder à l'URL http://127.0.0.1:8000/. Vous devriez accéder à la page d'erreur ci-dessous :
                                                                                                            
 
-
                                                                                                            Django Debug page for Django 2.0
                                                                                                            
+
                                                                                                            Django Debug page for Django 2.0
                                                                                                            
 
 
                                                                                                            Ne vous inquitez ! Cette erreur était attendue ; elle est due à l'absence de défintion de routes dans le fichier catalog/urls.py ou dans le module catalog.urls module (que nous avons déclaré dans le fichier urls.py du projet). 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: La page web ci-dessus met en exergue une fonctionnalité utile de Django ; le mode des traces de debogag. Au lieu d'une simple erreur renvoyée par le serveur, celui-ci affiche un écran d'erreur avec des informations utiles pour corriger le développement conduisant à cette erreur d'affichage. Dans le cas présent, l'erreur est due au motif de l'URL qui ne correspond pas à ce qui a été configuré.
                                                                                                            
+
                                                                                                            Note : La page web ci-dessus met en exergue une fonctionnalité utile de Django ; le mode des traces de debogag. Au lieu d'une simple erreur renvoyée par le serveur, celui-ci affiche un écran d'erreur avec des informations utiles pour corriger le développement conduisant à cette erreur d'affichage. Dans le cas présent, l'erreur est due au motif de l'URL qui ne correspond pas à ce qui a été configuré.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            À ce stade, nous pouvons considérer que le serveur fonctionne !
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Chaque fois que vous apportez des modifications significatives, il est important d'exécuter à nouveau un migration et un test du serveur. Cela est assez rapide, pour ne pas s'en priver !
                                                                                                            
+
                                                                                                            Note : Chaque fois que vous apportez des modifications significatives, il est important d'exécuter à nouveau un migration et un test du serveur. Cela est assez rapide, pour ne pas s'en priver !
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Relevez le défi...
                                                                                                            
@@ -371,7 +371,7 @@ python3 manage.py migrate
 
 
                                                                                                            Le squelette du site web est entièrement construit à ce stade. Désormais, vous allez pouvoir y ajouter des urls, des vues, des modèles de données, des gabarits et des formulaires.
                                                                                                            
 
-
                                                                                                            Maintenant que ceci est fait, le site web Local Library est opérationnel et nous allons passer à la partie codage et développement pour que le site produise ce qu'il est censé faire.
                                                                                                            
+
                                                                                                            Maintenant que ceci est fait, le site web Local Library est opérationnel et nous allons passer à la partie codage et développement pour que le site produise ce qu'il est censé faire.
                                                                                                            
 
 
                                                                                                            A voir aussi...
                                                                                                            
 
@@ -386,18 +386,18 @@ python3 manage.py migrate
 
 
diff --git a/files/fr/learn/server-side/django/testing/index.html b/files/fr/learn/server-side/django/testing/index.html
index ab06d584ec..c61cb87e24 100644
--- a/files/fr/learn/server-side/django/testing/index.html
+++ b/files/fr/learn/server-side/django/testing/index.html
@@ -17,13 +17,13 @@ translation_of: Learn/Server-side/Django/Testing
 
 
                                                                                                            {{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}
                                                                                                            
 
-
                                                                                                            Quant un site web grandit, il devient plus difficile à tester manuellement. Non seulement il y a plus de choses à tester, mais encore, comme les interactions entres ses composants deviennent plus complexes, un léger changement dans une partie de l'application peut affecter les autres parties, si bien qu'il va être nécessaire de faire beaucoup de modifications pour s'assurer que tout continue de fonctionner, et qu'aucune erreur ne sera introduite quand il y aura encore plus de modifications. Une façon de limiter ces problèmes est d'écrire des tests automatiques qui puissent être lancés d'une manière simple et fiable à chaque fois que vous faites une modification. Ce tutoriel montre comment automatiser des tests unitaires sur votre site web en utilisant le framework de tests de Django.
                                                                                                            
+
                                                                                                            Quant un site web grandit, il devient plus difficile à tester manuellement. Non seulement il y a plus de choses à tester, mais encore, comme les interactions entres ses composants deviennent plus complexes, un léger changement dans une partie de l'application peut affecter les autres parties, si bien qu'il va être nécessaire de faire beaucoup de modifications pour s'assurer que tout continue de fonctionner, et qu'aucune erreur ne sera introduite quand il y aura encore plus de modifications. Une façon de limiter ces problèmes est d'écrire des tests automatiques qui puissent être lancés d'une manière simple et fiable à chaque fois que vous faites une modification. Ce tutoriel montre comment automatiser des tests unitaires sur votre site web en utilisant le framework de tests de Django.
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis:Set up a Django development environment. Avoir pris connaissance de l'article précédent.Set up a Django development environment. Avoir pris connaissance de l'article précédent.
   
                                                                                                            
   
                                                                                                            
    Objectifs:
                                                                                                            
+
                                                                                                            
-   
+   
@@ -34,7 +34,7 @@ translation_of: Learn/Server-side/Django/Testing
 
 
                                                                                                            Vue d'ensemble
                                                                                                            
 
-
                                                                                                            Le site Local Library a actuellement des pages pour afficher des listes de tous les livres et auteurs, des pages de détail pour les éléments de type Book et Author, une page pour renouveler des BookInstances, et des pages pour créer, mettre à jour et effacer des éléments de type Author (et également des enregistrements de type Book, si vous avez relevé le défi dans le tutoriel sur les formulaires). Même avec ce site relativement petit, naviguer manuellement vers chaque page et vérifier superficiellement que tout fonctionne comme prévu peut prendre plusieurs minutes. Quand nous allons faire des modifications et agrandir le site, le temps requis pour vérifier manuellement que tout fonctionne "proprement" va grandir. Si nous continuons comme cela, nous allons sûrement passer beaucoup de temps à tester notre code, et peu à l'améliorer.
                                                                                                            
+
                                                                                                            Le site Local Library a actuellement des pages pour afficher des listes de tous les livres et auteurs, des pages de détail pour les éléments de type Book et Author, une page pour renouveler des BookInstances, et des pages pour créer, mettre à jour et effacer des éléments de type Author (et également des enregistrements de type Book, si vous avez relevé le défi dans le tutoriel sur les formulaires). Même avec ce site relativement petit, naviguer manuellement vers chaque page et vérifier superficiellement que tout fonctionne comme prévu peut prendre plusieurs minutes. Quand nous allons faire des modifications et agrandir le site, le temps requis pour vérifier manuellement que tout fonctionne "proprement" va grandir. Si nous continuons comme cela, nous allons sûrement passer beaucoup de temps à tester notre code, et peu à l'améliorer.
                                                                                                            
 
 
                                                                                                            Les tests automatiques peuvent vraiment nous aider à régler ce problème. Les avantages évidents sont qu'ils peuvent être lancés bien rapidement que des tests manuels, peuvent réaliser des tests à un niveau bien plus bas de détail, et tester exactement les mêmes fonctionnalités à chaque fois (des testeurs humains sont loin d'être aussi fiables !). Parce qu'ils sont rapides, les tests automatisés peuvent être exécutés plus régulièrement, et si un test échoue, ils pointent exactement vers la partie du code qui n'a pas fonctionné comme prévu.
                                                                                                            
 
@@ -56,14 +56,14 @@ translation_of: Learn/Server-side/Django/Testing
 
 
 
                                                                                                            
-
                                                                                                            Note : Les autres genres habituels de tests comprennent : la boîte noire, la boîte blanche, les tests manuels, automatiques, de canari (canary), de fumée (smoke), de conformité (conformance), d'approbation (acceptance), fonctionnels, système, performance, chargement et stress. Consultez pour plus d'information sur chacun d'eux.
                                                                                                            
+
                                                                                                            Note : Les autres genres habituels de tests comprennent : la boîte noire, la boîte blanche, les tests manuels, automatiques, de canari (canary), de fumée (smoke), de conformité (conformance), d'approbation (acceptance), fonctionnels, système, performance, chargement et stress. Consultez pour plus d'information sur chacun d'eux.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Que fournit Django pour tester ?
                                                                                                            
 
 
                                                                                                            Tester un site web est une tâche complexe, car c'est une opération qui comporte plusieurs couches de logique : depuis la couche HTTP, la gestion des requêtes, les modèles d'interrogation de bases de données, jusqu'à la validation des formulaires, leur traitement et le rendu des templates.
                                                                                                            
 
-
                                                                                                            Django fournit un framework de test avec une petite hiérarchie de classes construites sur la librairie standard de Python unittest. Malgré son nom, ce framework de test est utilisable pour les tests unitaires aussi bien que pour les tests d'intégration. Le framework Django ajoute les méthodes et les outils d'une API pour aider à tester un site web et les comportements spécifiques à Django. Ces méthodes vous permettent de simuler des requêtes, d'insérer des données de test et d'inspecter la sortie de votre application. Django fournit aussi une API (LiveServerTestCase) et des outils pour utiliser d'autres frameworks de test. Par exemple vous pouvez intégrer le célèbre framework Selenium pour simuler l'interaction entre un utilisateur et un vrai navigateur.
                                                                                                            
+
                                                                                                            Django fournit un framework de test avec une petite hiérarchie de classes construites sur la librairie standard de Python unittest. Malgré son nom, ce framework de test est utilisable pour les tests unitaires aussi bien que pour les tests d'intégration. Le framework Django ajoute les méthodes et les outils d'une API pour aider à tester un site web et les comportements spécifiques à Django. Ces méthodes vous permettent de simuler des requêtes, d'insérer des données de test et d'inspecter la sortie de votre application. Django fournit aussi une API (LiveServerTestCase) et des outils pour utiliser d'autres frameworks de test. Par exemple vous pouvez intégrer le célèbre framework Selenium pour simuler l'interaction entre un utilisateur et un vrai navigateur.
                                                                                                            
 
 
                                                                                                            Pour écrire un test, vous partez de l'une des classes de test de base fournies par Django (ou par unittest) (SimpleTestCase, TransactionTestCase, TestCase, LiveServerTestCase), et ensuite vous écrivez des méthodes séparées pour vérifier que telle fonctionnalité se comporte comme prévu (les tests utilisent des méthodes "assert" pour vérifier qu'une expression retourne True ou False, ou que deux valeurs sont égales, etc.). Quant vous commencez à lancer un test, le framework exécute les méthodes de test écrites dans vos classes dérivées. Les méthodes de test sont lancées de manière indépendante, avec en commun un réglage initial (setUp) et/ou un comportement de fin (tearDown) définis dans la classe, comme indiqué ci-dessous.
                                                                                                            
 
@@ -109,7 +109,7 @@ translation_of: Learn/Server-side/Django/Testing
     def __str__(self):
         return '%s, %s' % (self.last_name, self.first_name)
 
-
                                                                                                            De même, vous pouvez tester que les méthodes personnalisées get_absolute_url() et __str__() se comportent comme prévu, car elles appartiennent à votre logique code/métier. Dans le cas de get_absolute_url(), vous pouvez supposer que la méthode Django reverse() a été implémentée correctement, aussi ce que vous allez tester, c'est que la vue associée a été effectivement définie.
                                                                                                            
+
                                                                                                            De même, vous pouvez tester que les méthodes personnalisées get_absolute_url() et __str__() se comportent comme prévu, car elles appartiennent à votre logique code/métier. Dans le cas de get_absolute_url(), vous pouvez supposer que la méthode Django reverse() a été implémentée correctement, aussi ce que vous allez tester, c'est que la vue associée a été effectivement définie.
                                                                                                            
 
 
                                                                                                            
 
                                                                                                            Note : Les lecteurs attentifs auront noté que nous pourrions aussi vouloir limiter les dates de naissance et de décès à des valeurs sensibles, et vérifier que le décès intervient après la naissance. En Django, cette contrainte est ajoutée à vos classes de formulaires (bien que vous puissiez définir des validateurs pour les champs du modèle et des validateurs de modèles, ceux-ci ne sont utilisés qu'au niveau du formulaire s'ils sont appelés par la méthode clean() du modèle. Cela requière un ModelForm ou bien la méthode clean() du modèle a besoin d'être appelée explicitement.)
                                                                                                            
@@ -134,7 +134,7 @@ translation_of: Learn/Server-side/Django/Testing
 
                                                                                                            Créez une structure de fichier comme montré ci-dessus, dans votre projet LocalLibrary. Le ficheir __init__.py doit être vide (il dit simplement à Python que ce répertoire est un package). Vous pouvez créer les trois fichiers de test en copiant et renommant le fichier de test du squelette /catalog/tests.py.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : le fichier de test du squelette /catalog/tests.py a été créé automatiquement quand nous avons construit le squelette du site web Django. Il est parfaitement "légal" de mettre tous vos tests dedans, mais si vous testez correctement, vous allez rapidement vous retrouver avec un fichier de test énorme et impossible à gérer.
                                                                                                            
+
                                                                                                            Note : le fichier de test du squelette /catalog/tests.py a été créé automatiquement quand nous avons construit le squelette du site web Django. Il est parfaitement "légal" de mettre tous vos tests dedans, mais si vous testez correctement, vous allez rapidement vous retrouver avec un fichier de test énorme et impossible à gérer.
                                                                                                            
 
 
                                                                                                            Supprimez le fichier de squelette, car nous n'en aurons plus besoin.
                                                                                                            
 
                                                                                                            
@@ -182,7 +182,7 @@ translation_of: Learn/Server-side/Django/Testing
 
 
 
                                                                                                            
-
                                                                                                            Les classes de test ont aussi une méthode tearDown(), que nous n'avons pas utilisée. Cette méthode n'est pas particulièrement utile pour les tests avec bases de données, dans la mesure où la classe de base TestCase prend soin pour vous de supprimer la base de données utilisées pour les tests.
                                                                                                            
+
                                                                                                            Note : Les classes de test ont aussi une méthode tearDown(), que nous n'avons pas utilisée. Cette méthode n'est pas particulièrement utile pour les tests avec bases de données, dans la mesure où la classe de base TestCase prend soin pour vous de supprimer la base de données utilisées pour les tests.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            En dessous de ces méthodes, nous avons un certain nombre de méthodes de test, qui utilisent des fonctions Assert, pour tester si certaines conditions sont vraies, fausses ou égales (AssertTrue, AssertFalse, AssertEqual). Si la condition ne renvoie pas le résultat escompté, le test plante et renvoie une erreur à votre console.
                                                                                                            
@@ -190,7 +190,7 @@ translation_of: Learn/Server-side/Django/Testing
 
                                                                                                            Les méthodes AssertTrue, AssertFalse et AssertEqual sont des assertions standard fournies par unittest. Il y a d'autres assertions standard dans le framework, et aussi des assertions spécifiques à Django, pour tester si une vue redirige (assertRedirects), pour tester si tel template a été utilisé (assertTemplateUsed), etc.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Normallement vous ne devriez pas inclure de fonctions print() dans vos tests, comme montré ci-dessus. Nous avons fait cela uniquement pour que vous puissiez voir dans la console (dans la section suivante) l'ordre dans lequel les fonctions de setup sont appelées.
                                                                                                            
+
                                                                                                            Note : Normallement vous ne devriez pas inclure de fonctions print() dans vos tests, comme montré ci-dessus. Nous avons fait cela uniquement pour que vous puissiez voir dans la console (dans la section suivante) l'ordre dans lequel les fonctions de setup sont appelées.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Comment lancer les tests
                                                                                                            
@@ -202,7 +202,7 @@ translation_of: Learn/Server-side/Django/Testing
 
                                                                                                            Cette commande va lancer la recherche de tous les fichiers ayant la forme test*.py sous le répertoire courant, et lancer tous les tests définis, en utilisant les classes de base appropriées (ici nous avons un certain nombre de fichiers de test, mais pour le moment seul /catalog/tests/test_models.py contient des tests). Par défaut, chaque test ne fera de rapport qu'en cas d'échec, avec ensuite un résumé du test.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Si vous obtenez des erreurs telles que : ValueError: Missing staticfiles manifest entry ..., cela peut être dû au fait que le test ne lance pas collectstatic par défaut, et que votre application utilise une classe de storage qui le requiert (voyez manifest_strict pour plus d'information). Il y a plusieurs façons de remédier à ce problème - la plus facile est de lancer tout simplement collectstatic avant de lancer les tests :
                                                                                                            
+
                                                                                                            Note : Si vous obtenez des erreurs telles que : ValueError: Missing staticfiles manifest entry ..., cela peut être dû au fait que le test ne lance pas collectstatic par défaut, et que votre application utilise une classe de storage qui le requiert (voyez manifest_strict pour plus d'information). Il y a plusieurs façons de remédier à ce problème - la plus facile est de lancer tout simplement collectstatic avant de lancer les tests :
                                                                                                            
 
 
                                                                                                            python3 manage.py collectstatic
 
                                                                                                            
@@ -238,7 +238,7 @@ Destroying test database for alias 'default'...
 
                                                                                                            Ici nous voyons que nous avons eu un échec pour un test, et nous pouvons voir exactement quelle fonction a planté et pourquoi (cet échec était prévu, car False n'est pas True !).
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Truc: La chose la plus importante à apprendre de la sortie de test ci-dessus est qu'il est bien mieux d'utiliser des noms descriptifs/informatifs pour vos objets et méthodes.
                                                                                                            
+
                                                                                                            Note : La chose la plus importante à apprendre de la sortie de test ci-dessus est qu'il est bien mieux d'utiliser des noms descriptifs/informatifs pour vos objets et méthodes.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Le texte en gras ci-dessus n'apparaîtra pas normalement dans la sortie de test (elle est générée par les fonctions print() dans nos tests). Cela montre comment la méthode setUpTestData() est appelée une fois pour l'ensemble de classe, tandis que setUp() est appelée avant chaque méthode.
                                                                                                            
@@ -275,7 +275,7 @@ python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one
 
                                                                                                            Maintenant que nous savons comment lancer nos tests et quel genre de choses nous avons besoin de tester, regardons quelques exemples pratiques.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Nous n'allons pas écrire tous les tests possibles, mais ce qui suit devrait vous donner une idée sur le fonctionnement des tests, et ce que vous pouvez faire ensuite.
                                                                                                            
+
                                                                                                            Note : Nous n'allons pas écrire tous les tests possibles, mais ce qui suit devrait vous donner une idée sur le fonctionnement des tests, et ce que vous pouvez faire ensuite.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Modèles
                                                                                                            
@@ -386,7 +386,7 @@ AssertionError: 'Died' != 'died'
 
                                                                                                            C'est vraiment un bug mineur, mais il met en lumière comment écrire des test peut vérifier de plus près les hypothèses que vous pourriez avoir supposées vraies.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Changez en "died" le label pour le champ date_of_death (/catalog/models.py) et relancez les tests.
                                                                                                            
+
                                                                                                            Note : Changez en "died" le label pour le champ date_of_death (/catalog/models.py) et relancez les tests.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            La configuration pour tester les autres modèles est semblable pour tous, aussi nous n'allons pas discuter chacune plus longuement. Sentez-vous libre de créer vos propres tests pour nos autres modèles.
                                                                                                            
@@ -848,7 +848,7 @@ class RenewBookInstancesViewTest(TestCase):
 
 
 
                                                                                                            
-
                                                                                                            Si vous utilisez la class de formulaire RenewBookModelForm(forms.ModelForm) à la place de la classe RenewBookForm(forms.Form), le nom du champ est 'due_back' et non 'renewal_date'.
                                                                                                            
+
                                                                                                            Attention : Si vous utilisez la class de formulaire RenewBookModelForm(forms.ModelForm) à la place de la classe RenewBookForm(forms.Form), le nom du champ est 'due_back' et non 'renewal_date'.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Le test suivant (ajoutez-le à la classe également) vérifie que la vue redirige vers une liste de tous les livres empruntés si le renouvellement réussit. Ce qui diffère ici est que, pour la première fois, nous montrons comment vous pouvez POSTer des données en utilisant le client. Les données postées forment le second argument de la fonction post, et elles sont spécifiées comme un dictionnaire de clés/valeurs.
                                                                                                            
@@ -861,7 +861,7 @@ class RenewBookInstancesViewTest(TestCase):
 
 
 
                                                                                                            
-
                                                                                                            La vue all-borrowed a été ajoutée comme défi, et votre code peut, à la place, rediriger vers la page d'accueil '/'. Si c'est le cas, modifiez les deux dernières lignes du code de test pour qu'elles ressemblent au code ci-dessous. L'expression follow=True dans la requête s'assure que la requête retourne l'URL de la destination finale (donc vérifie /catalog/ plutôt que /).
                                                                                                            
+
                                                                                                            Attention : La vue all-borrowed a été ajoutée comme défi, et votre code peut, à la place, rediriger vers la page d'accueil '/'. Si c'est le cas, modifiez les deux dernières lignes du code de test pour qu'elles ressemblent au code ci-dessous. L'expression follow=True dans la requête s'assure que la requête retourne l'URL de la destination finale (donc vérifie /catalog/ plutôt que /).
                                                                                                            
 
 
                                                                                                             response = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future}, follow=True )
  self.assertRedirects(response, '/catalog/')
                                                                                                            
@@ -898,7 +898,7 @@ class RenewBookInstancesViewTest(TestCase):
 
 
                                                                                                              
  
                                                                                                            • Coverage: Cet outil Python fait un rapport sur la proportion de votre code réellement exécutée par vos tests. C'est particulièrement intéressant quand vous commencez, et que vous cherchez à vous représenter exactement ce que vous devez tester.
                                                                                                              • 
- 
                                                                                                            • Selenium est un framework pour automatiser les tests dans un vrai navigateur. Il vous permet de simuler un utilisateur réel en interaction avec le site, et fournit un excellent framework pour les tests système de votre site (l'étape qui suit les tests d'intégration).
                                                                                                              • 
+ 
                                                                                                            • Selenium est un framework pour automatiser les tests dans un vrai navigateur. Il vous permet de simuler un utilisateur réel en interaction avec le site, et fournit un excellent framework pour les tests système de votre site (l'étape qui suit les tests d'intégration).
                                                                                                              • 
 
                                                                                                            
 
 
                                                                                                            Défi
                                                                                                            
@@ -938,19 +938,19 @@ class RenewBookInstancesViewTest(TestCase):
 
                                                                                                            Dans ce module
                                                                                                            
 
 
diff --git a/files/fr/learn/server-side/django/tutorial_local_library_website/index.html b/files/fr/learn/server-side/django/tutorial_local_library_website/index.html
index e7ff3ca5c6..7e085e43b8 100644
--- a/files/fr/learn/server-side/django/tutorial_local_library_website/index.html
+++ b/files/fr/learn/server-side/django/tutorial_local_library_website/index.html
@@ -18,7 +18,7 @@ translation_of: Learn/Server-side/Django/Tutorial_local_library_website
 
 
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis:Avoir terminé tous les tutoriels précédents, y compris Django Tutorial Part 9: Working with forms.Avoir terminé tous les tutoriels précédents, y compris Django Tutorial Part 9: Working with forms.
   
                                                                                                            
   
                                                                                                            
    Objectif:
                                                                                                            
+
                                                                                                            
@@ -74,7 +74,7 @@ translation_of: Learn/Server-side/Django/Tutorial_local_library_website
 
 
                                                                                                            Résumé
                                                                                                            
 
-
                                                                                                            Vous en savez plus sur le projet LocalLibrary et ce que vous allez progressivement apprendre, il est désormais temps de créer le squellette du projet qui hébergera la bibliothèque.
                                                                                                            
+
                                                                                                            Vous en savez plus sur le projet LocalLibrary et ce que vous allez progressivement apprendre, il est désormais temps de créer le squellette du projet qui hébergera la bibliothèque.
                                                                                                            
 
 
                                                                                                            {{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}
                                                                                                            
 
@@ -84,18 +84,18 @@ translation_of: Learn/Server-side/Django/Tutorial_local_library_website
 
 
diff --git a/files/fr/learn/server-side/express_nodejs/index.html b/files/fr/learn/server-side/express_nodejs/index.html
index 25ce8b149d..abd2352b57 100644
--- a/files/fr/learn/server-side/express_nodejs/index.html
+++ b/files/fr/learn/server-side/express_nodejs/index.html
@@ -16,14 +16,14 @@ translation_of: Learn/Server-side/Express_Nodejs
 ---
 
                                                                                                            {{LearnSidebar}}
                                                                                                            
 
-
                                                                                                            Express est une infrastructure d'application (framework), écrit en JavaScript et hébergée dans l'environnement d'exécution node.js. Cette section explique certains de ses principaux avantages, comment configurer votre environnement de développement et comment effectuer des tâches courantes de développement et de déploiement.
                                                                                                            
+
                                                                                                            Express est une infrastructure d'application (framework), écrit en JavaScript et hébergée dans l'environnement d'exécution node.js. Cette section explique certains de ses principaux avantages, comment configurer votre environnement de développement et comment effectuer des tâches courantes de développement et de déploiement.
                                                                                                            
 
 
                                                                                                            Prérequis
                                                                                                            
 
 
                                                                                                            Avant d'aller plus loin, vous devrez avoir compris ce qu'est la programmation côté serveur et le concept de "framework", idéalement en ayant lu notre article Premiers pas en programmation côté-serveur. Une connaissance générale des concepts de programmation et du JavaScript est vivement recommandée, sans pour autant être essentielle à la compréhension des concepts fondamentaux.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note :  Le site MDN possède de nombreuses ressources utiles pour apprendre JavaScript dans le contexte du développement côté client : Référence JavaScript, Guide JavaScript, Les bases de JavaScript, Apprendre JavaScript. Le noyau du langage et les principaux concepts de JavaScript sont les mêmes que pour le développement côté serveur sur Node.js, il est donc important d'avoir déjà une bonne compréhension de JavaScript avant de continuer. Node.js offre des API supplémentaires pour supporter des fonctionnalités utiles dans des environnements sans navigateur, par ex. pour créer des serveurs HTTP et accéder au système de fichiers, mais ne prend pas en charge les API JavaScript pour travailler avec le navigateur et le DOM.
                                                                                                            
+
                                                                                                            Note : Le site MDN possède de nombreuses ressources utiles pour apprendre JavaScript dans le contexte du développement côté client : Référence JavaScript, Guide JavaScript, Les bases de JavaScript, Apprendre JavaScript. Le noyau du langage et les principaux concepts de JavaScript sont les mêmes que pour le développement côté serveur sur Node.js, il est donc important d'avoir déjà une bonne compréhension de JavaScript avant de continuer. Node.js offre des API supplémentaires pour supporter des fonctionnalités utiles dans des environnements sans navigateur, par ex. pour créer des serveurs HTTP et accéder au système de fichiers, mais ne prend pas en charge les API JavaScript pour travailler avec le navigateur et le DOM.
                                                                                                            
 
 
                                                                                                            Ce guide vous fournira des informations sur l'utilisation de Node.js et Express, et contient de nombreuses références à d'autres excellentes ressources sur Internet et dans des livres — dont des liens depuis How do I get started with Node.js (StackOverflow) et What are the best resources for learning Node.js? (Quora).
                                                                                                            
 
                                                                                                            
diff --git a/files/fr/learn/server-side/express_nodejs/introduction/index.html b/files/fr/learn/server-side/express_nodejs/introduction/index.html
index cb0bedc796..4f8719e813 100644
--- a/files/fr/learn/server-side/express_nodejs/introduction/index.html
+++ b/files/fr/learn/server-side/express_nodejs/introduction/index.html
@@ -15,9 +15,9 @@ translation_of: Learn/Server-side/Express_Nodejs/Introduction
 
 
                                                                                                            {{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
                                                                                                            
 
-
                                                                                                            Dans ce tout premier article consacré à Express, nous répondons aux questions « Qu'est-ce que Node ? » et « Qu'est-ce que Express ? », et vous donnons un aperçu de ce qui fait d'Express un framework web si spécial. Nous décrivons les principales fonctionnalités et montrons quelques-uns des principaux composants d'une application Express (bien que vous ne disposiez pas encore d'un environnement de développement pour le tester).
                                                                                                            
+
                                                                                                            Dans ce tout premier article consacré à Express, nous répondons aux questions « Qu'est-ce que Node ? » et « Qu'est-ce que Express ? », et vous donnons un aperçu de ce qui fait d'Express un framework web si spécial. Nous décrivons les principales fonctionnalités et montrons quelques-uns des principaux composants d'une application Express (bien que vous ne disposiez pas encore d'un environnement de développement pour le tester).
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis:
                                                                                                            
+
                                                                                                            
@@ -102,9 +102,8 @@ server.listen(port, hostname, () => {
 
 
                                                                                                            Bien qu'Express soit assez minimaliste, des middlewares (fonctions intermédiaires) compatibles ont été créés pour résoudre quasiment tous les problèmes de développement web. Il existe des bibliothèques pour se servir des cookies, gérer les sessions, la connexion de l'utilisateur, les paramètres de l'URL, les données POST, les entêtes de sécurité et d'autres encore. Vous trouverez une liste des paquets maintenus par l'équipe Express ici : Express Middleware (ainsi que la liste de paquets tiers populaires).
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Cette flexibilité est à double tranchant. Il y a une multitude de paquets pour résoudre chaque problème mais trouver le bon paquet à utiliser peut vite devenir un défi. Il n'y a pas non plus de « bonne manière » pour structurer une application et beaucoup d'exemples que vous trouverez sur le net ne sont pas optimisés ou montrent seulement une infime partie de ce que vous devez faire pour développer une application web.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Cette flexibilité est à double tranchant. Il y a une multitude de paquets pour résoudre chaque problème mais trouver le bon paquet à utiliser peut vite devenir un défi. Il n'y a pas non plus de « bonne manière » pour structurer une application et beaucoup d'exemples que vous trouverez sur le net ne sont pas optimisés ou montrent seulement une infime partie de ce que vous devez faire pour développer une application web.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            D'où viennent Node et Express ?
                                                                                                            
@@ -143,9 +142,8 @@ server.listen(port, hostname, () => {
 
 
                                                                                                            Tout d'abord intéressons-nous à l'exemple Hello World standard d'Express (nous expliquons chaque partie de cet exemple ci-dessous, et dans les sections suivantes).
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Astuce :
                                                                                                            
-  
                                                                                                            Si vous avez déjà installé Node et Express (ou si vous les installez comme montré dans l'article suivant), vous pouvez enregistrer ce code dans un fichier texte appelé app.js et l'exécuter via un terminal en tapant :
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Si vous avez déjà installé Node et Express (ou si vous les installez comme montré dans l'article suivant), vous pouvez enregistrer ce code dans un fichier texte appelé app.js et l'exécuter via un terminal en tapant :
                                                                                                            
   
                                                                                                            node app.js
                                                                                                            
 
                                                                                                            
 
@@ -172,7 +170,7 @@ app.listen(port, () => {
 
 
                                                                                                            Un module est une bibliothèque/fichier JavaScript que vous pouvez importer dans un autre code en utilisant la fonction require() de Node. Express lui-même est un module, tout comme les bibliothèques de middleware et de base de données que nous utilisons dans nos applications Express.
                                                                                                            
 
-
                                                                                                            Le code ci-dessous montre comment nous importons un module par son nom, en utilisant le framework Express comme exemple. Tout d'abord, nous invoquons la fonction require(), en spécifiant le nom du module sous forme de chaîne ('express'), et en appelant l'objet retourné pour créer une applicationExpress. Nous pouvons alors accéder aux propriétés et fonctions de l'objet application.
                                                                                                            
+
                                                                                                            Le code ci-dessous montre comment nous importons un module par son nom, en utilisant le framework Express comme exemple. Tout d'abord, nous invoquons la fonction require(), en spécifiant le nom du module sous forme de chaîne ('express'), et en appelant l'objet retourné pour créer une applicationExpress. Nous pouvons alors accéder aux propriétés et fonctions de l'objet application.
                                                                                                            
 
 
                                                                                                            const express = require('express');
 const app = express();
@@ -180,9 +178,8 @@ const app = express();
 
 
                                                                                                            Vous pouvez également créer vos propres modules qui peuvent être importés de la même manière.
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Astuce :
                                                                                                            
-  
                                                                                                            Vous voudrez créer vos propres modules, car cela vous permet d'organiser votre code en parties maniables — une application monolithique à fichier unique est difficile à comprendre et à maintenir. L'utilisation de modules vous aide également à gérer votre espace de noms, car seules les variables que vous exportez explicitement sont importées lorsque vous utilisez un module.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Vous voudrez créer vos propres modules, car cela vous permet d'organiser votre code en parties maniables — une application monolithique à fichier unique est difficile à comprendre et à maintenir. L'utilisation de modules vous aide également à gérer votre espace de noms, car seules les variables que vous exportez explicitement sont importées lorsque vous utilisez un module.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Pour rendre les objets disponibles en dehors d'un module, il suffit de les affecter à l'objet exports. Par exemple, le module square.js ci-dessous est un fichier qui exporte les méthodes area() et perimeter() :
                                                                                                            
@@ -195,9 +192,8 @@ exports.perimeter = function(width) { return 4 * width; };
                                                                                                            
 
                                                                                                            var square = require('./square'); // Ici, nous demandons le nom du fichier sans l'extension de fichier .js (facultative).
 console.log("L'aire d'un carré dont la largeur est de 4 est la suivante " + square.area(4));
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Vous pouvez également spécifier un chemin absolu vers le module (ou un nom, comme nous l'avons fait initialement).
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Vous pouvez également spécifier un chemin absolu vers le module (ou un nom, comme nous l'avons fait initialement).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Si vous souhaitez exporter un objet complet en une seule affectation au lieu de le construire une propriété à la fois, affectez-le à module.exports comme indiqué ci-dessous (vous pouvez également procéder ainsi pour faire de la racine de l'objet exports un constructeur ou une autre fonction) :
                                                                                                            
@@ -213,7 +209,7 @@ console.log("L'aire d'un carré dont la largeur est de 4 est la suivante " + squ
 };
 
 
                                                                                                            
-  
                                                                                                            Note : L'objet exports peut être vu comme un raccourci vers module.exports au sein d'un module donné. En fait, exports est simplement une variable qui est initialisée avec la valeur de module.exports avant que le module soit évalué. Cette valeur est une référence vers un objet. Cela signifie que exports référence le même objet que celui référencé par module.exports. Cela signifie également qu'affecter une autre valeur à exports le détachera complètement de module.exports.
                                                                                                            
+  
                                                                                                            Note : L'objet exports peut être vu comme un raccourci vers module.exports au sein d'un module donné. En fait, exports est simplement une variable qui est initialisée avec la valeur de module.exports avant que le module soit évalué. Cette valeur est une référence vers un objet. Cela signifie que exports référence le même objet que celui référencé par module.exports. Cela signifie également qu'affecter une autre valeur à exports le détachera complètement de module.exports.
                                                                                                            
   
                                                                                                            
   
 
@@ -237,14 +233,12 @@ console.log('Second');
 
 
                                                                                                            Il existe plusieurs façons pour une API asynchrone d'informer votre application de la fin d'une opération. La méthode la plus courante consiste à enregistrer une fonction de rappel lorsque vous invoquez l'API asynchrone, qui sera rappelée lorsque l'opération sera terminée. C'est l'approche utilisée ci-dessus.
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Astuce :
                                                                                                            
-  
                                                                                                            L'utilisation des rappels (« callbacks ») peut être assez « désordonnée » si vous avez une séquence d'opérations asynchrones dépendantes qui doivent être exécutées dans l'ordre, car cela entraîne de multiples niveaux de rappels imbriqués. Ce problème est communément appelé « l'enfer des callbacks ». Ce problème peut être réduit par de bonnes pratiques de codage dont l'utilisation des promesses ou de async/await.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : L'utilisation des rappels (« callbacks ») peut être assez « désordonnée » si vous avez une séquence d'opérations asynchrones dépendantes qui doivent être exécutées dans l'ordre, car cela entraîne de multiples niveaux de rappels imbriqués. Ce problème est communément appelé « l'enfer des callbacks ». Ce problème peut être réduit par de bonnes pratiques de codage dont l'utilisation des promesses ou de async/await.
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Une convention courante pour Node et Express est d'utiliser des callbacks de type error-first. Dans cette convention, la première valeur de vos fonctions de rappel est une valeur d'erreur, tandis que les arguments suivants contiennent des données de succès. Il y a une bonne explication de l'utilité de cette approche dans ce blog : The Node.js Way - Comprendre les callbacks de type « Error First ». (fredkschott.com).
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Une convention courante pour Node et Express est d'utiliser des callbacks de type error-first. Dans cette convention, la première valeur de vos fonctions de rappel est une valeur d'erreur, tandis que les arguments suivants contiennent des données de succès. Il y a une bonne explication de l'utilité de cette approche dans ce blog : The Node.js Way - Comprendre les callbacks de type « Error First ». (fredkschott.com).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Créer des gestionnaires de route
                                                                                                            
@@ -257,9 +251,8 @@ console.log('Second');
 
 
                                                                                                            La fonction de rappel prend une requête et un objet réponse comme arguments. Dans ce cas, la méthode appelle simplement send() sur la réponse pour renvoyer la chaîne de caractères « Hello World ! ». Il existe un nombre d'autres méthodes de réponse pour terminer le cycle requête/réponse, par exemple vous pourriez appeler res.json() pour envoyer une réponse JSON ou res.sendFile() pour envoyer un fichier.
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Astuce JavaScript :
                                                                                                            
-  
                                                                                                            Vous pouvez utiliser les noms d'arguments de votre choix dans les fonctions de rappel ; lorsque le rappel est invoqué, le premier argument sera toujours la requête et le second sera toujours la réponse. Il est judicieux de les nommer de telle sorte que vous puissiez identifier l'objet avec lequel vous travaillez dans le corps du callback.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Vous pouvez utiliser les noms d'arguments de votre choix dans les fonctions de rappel ; lorsque le rappel est invoqué, le premier argument sera toujours la requête et le second sera toujours la réponse. Il est judicieux de les nommer de telle sorte que vous puissiez identifier l'objet avec lequel vous travaillez dans le corps du callback.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            L'objet Express application fournit également des méthodes permettant de définir des gestionnaires de route pour tous les autres verbes HTTP, qui sont pour la plupart utilisés exactement de la même manière : 
                                                                                                            
@@ -276,7 +269,7 @@ console.log('Second');
 
 
                                                                                                            Il est souvent utile de regrouper les gestionnaires de route pour une partie particulière d'un site et d'y accéder en utilisant un préfixe de route commun (par exemple, un site avec un Wiki pourrait avoir toutes les routes liées au wiki dans un seul fichier et les faire accéder avec un préfixe de route de /wiki/). Dans Express, ceci est réalisé en utilisant l'objet express.Router. Par exemple, nous pouvons créer notre route wiki dans un module nommé wiki.js, puis exporter l'objet Router, comme indiqué ci-dessous :
                                                                                                            
 
-
                                                                                                            // wiki.js - Module route du wiki
+
                                                                                                            // wiki.js - Module route du wiki
 
 const express = require('express');
 const router = express.Router();
@@ -294,9 +287,8 @@ router.get('/about', (req, res) => {
 
 module.exports = router;
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            L'ajout de routes à l'objet Router est identique à l'ajout de routes à l'objet app (comme indiqué précédemment).
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : L'ajout de routes à l'objet Router est identique à l'ajout de routes à l'objet app (comme indiqué précédemment).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Pour utiliser le routeur dans notre fichier d'application principal, nous devrions alors require() le module route (wiki.js), puis appeler use() sur l'application Express pour ajouter le routeur au chemin de manipulation du middleware. Les deux routes seront alors accessibles depuis /wiki/ et /wiki/about/.
                                                                                                            
@@ -311,9 +303,8 @@ app.use('/wiki', wiki);
                                                                                                            
 
 
                                                                                                            L'intergiciel (aussi appelé « middleware ») est largement utilisé dans les applications d'Express, pour des tâches allant du service de fichiers statiques à la gestion des erreurs, en passant par la compression des réponses HTTP. Alors que les fonctions de route terminent le cycle requête-réponse HTTP en renvoyant une réponse au client HTTP, les fonctions d'intergiciel effectuent typiquement une opération sur la demande ou la réponse, puis appellent la fonction suivante dans la « pile », qui peut être un autre intergiciel ou un gestionnaire de route. L'ordre dans lequel les intergiciels sont appelés dépend du code de l'application.
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            L'intergiciel peut effectuer n'importe quelle opération, exécuter n'importe quel code, apporter des modifications à l'objet requête et réponse, et il peut aussi mettre fin au cycle requête-réponse. S'il ne met pas fin au cycle, alors il doit appeler next() pour passer le contrôle à la fonction suivante de l'intergiciel (ou la requête sera laissée en suspens).
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : L'intergiciel peut effectuer n'importe quelle opération, exécuter n'importe quel code, apporter des modifications à l'objet requête et réponse, et il peut aussi mettre fin au cycle requête-réponse. S'il ne met pas fin au cycle, alors il doit appeler next() pour passer le contrôle à la fonction suivante de l'intergiciel (ou la requête sera laissée en suspens).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            La plupart des apps utiliseront des programmes intermédiaires tiers afin de simplifier les tâches courantes de développement web comme le travail avec les cookies, les sessions, l'authentification des utilisateurs, l'accès aux données POST et JSON des requêtes, la journalisation, etc. Vous pouvez trouver une liste des paquets middleware maintenus par l'équipe Express (qui inclut également d'autres paquets populaires de tiers). D'autres paquets Express sont disponibles sur le gestionnaire de paquets NPM.
                                                                                                            
@@ -330,9 +321,8 @@ const app = express();
 app.use(logger('dev'));
 ...
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Les fonctions d'intergiciel et de routage sont appelées dans l'ordre où elles sont déclarées. Pour certains intergiciels, l'ordre est important (par exemple, si l'intergiciel de session dépend de l'intergiciel de cookie, alors le gestionnaire de cookie doit être ajouté en premier). Il est presque toujours nécessaire d'appeler l'intergiciel avant de définir les routes, sinon vos gestionnaires de routes n'auront pas accès aux fonctionnalités ajoutées par votre intergiciel.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Les fonctions d'intergiciel et de routage sont appelées dans l'ordre où elles sont déclarées. Pour certains intergiciels, l'ordre est important (par exemple, si l'intergiciel de session dépend de l'intergiciel de cookie, alors le gestionnaire de cookie doit être ajouté en premier). Il est presque toujours nécessaire d'appeler l'intergiciel avant de définir les routes, sinon vos gestionnaires de routes n'auront pas accès aux fonctionnalités ajoutées par votre intergiciel.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Vous pouvez écrire vos propres fonctions intergiciels, et vous serez probablement amené à le faire (ne serait-ce que pour créer un code de gestion des erreurs). La seule différence entre une fonction middleware et un callback de gestionnaire de route est que les fonctions middleware ont un troisième argument next, que les fonctions middleware sont censées appeler si elles ne sont pas celle qui termine le cycle de requête (lorsque la fonction middleware est appelée, cela contient la fonction next qui doit être appelée).
                                                                                                            
@@ -361,9 +351,8 @@ app.get('/', a_middleware_function);
 
 app.listen(3000);
 
-
                                                                                                            
-  
                                                                                                            Astuce JavaScript :
                                                                                                            
-  
                                                                                                            Ci-dessus, nous déclarons la fonction middleware séparément, puis nous la définissons comme fonction de rappel. Dans notre précédente fonction de gestion de route, nous avons déclaré la fonction de rappel lorsqu'elle a été utilisée. En JavaScript, les deux approches sont valables.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Ci-dessus, nous déclarons la fonction middleware séparément, puis nous la définissons comme fonction de rappel. Dans notre précédente fonction de gestion de route, nous avons déclaré la fonction de rappel lorsqu'elle a été utilisée. En JavaScript, les deux approches sont valables.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            La documentation d'Express contient beaucoup d'autres excellents documents sur l'utilisation et l'écriture d'intergiciels Express.
                                                                                                            
@@ -396,9 +385,8 @@ app.use(express.static('media'));
 https://localhost:3000/media/video/cat.mp4
 https://localhost:3000/media/cry.mp3
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Voir également Servir des fichiers statiques dans Express.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Voir également Servir des fichiers statiques dans Express.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Traitement des erreurs
                                                                                                            
@@ -414,14 +402,12 @@ https://localhost:3000/media/cry.mp3
 
 
                                                                                                            Express est livré avec un gestionnaire d'erreurs intégré, qui prend en charge toutes les erreurs restantes qui pourraient être rencontrées dans l'application. Cette fonction middleware de gestion des erreurs par défaut est ajoutée à la fin de la pile de fonctions middleware. Si vous passez une erreur à next() et que vous ne la gérez pas dans un gestionnaire d'erreurs, elle sera traitée par le gestionnaire d'erreurs intégré ; l'erreur sera écrite au client avec la trace de la pile.
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            La trace de la pile n'est pas incluse dans l'environnement de production. Pour exécuter une application serveur Express, la variable d'environnement NODE_ENV doit être définie avec la valeur production.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : La trace de la pile n'est pas incluse dans l'environnement de production. Pour exécuter une application serveur Express, la variable d'environnement NODE_ENV doit être définie avec la valeur production.
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            
-  
                                                                                                            Note :
                                                                                                            
-  
                                                                                                            Les codes d'état HTTP 404 et autres « erreurs » ne sont pas traités comme des erreurs. Si vous voulez les gérer, vous pouvez ajouter une fonction middleware pour le faire. Pour plus d'informations, consultez la FAQ.
                                                                                                            
+
                                                                                                            
+  
                                                                                                            Note : Les codes d'état HTTP 404 et autres « erreurs » ne sont pas traités comme des erreurs. Si vous voulez les gérer, vous pouvez ajouter une fonction middleware pour le faire. Pour plus d'informations, consultez la FAQ.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Pour plus d'informations, voir Gestion des erreurs (docs Express).
                                                                                                            
diff --git a/files/fr/learn/server-side/first_steps/client-server_overview/index.html b/files/fr/learn/server-side/first_steps/client-server_overview/index.html
index 9e6ca75895..9323086beb 100644
--- a/files/fr/learn/server-side/first_steps/client-server_overview/index.html
+++ b/files/fr/learn/server-side/first_steps/client-server_overview/index.html
@@ -8,9 +8,9 @@ original_slug: Learn/Server-side/Premiers_pas/Client-Serveur
 
 
                                                                                                            {{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
                                                                                                            
 
-
                                                                                                            Maintenant que vous connaissez le but et le bénéfice de la programmation côté serveur, nous allons analyser en détails ce qui se passe quand un serveur reçoit une requête dynamique de la part d'un navigateur. Comme la plupart des sites gèrent le code côté serveur (requêtes et réponses) de la même manière, cela vous aidera à comprendre ce que vous devrez faire ensuite en écrivant votre propre code.
                                                                                                            
+
                                                                                                            Maintenant que vous connaissez le but et le bénéfice de la programmation côté serveur, nous allons analyser en détails ce qui se passe quand un serveur reçoit une requête dynamique de la part d'un navigateur. Comme la plupart des sites gèrent le code côté serveur (requêtes et réponses) de la même manière, cela vous aidera à comprendre ce que vous devrez faire ensuite en écrivant votre propre code.
                                                                                                            
 
-
                                                                                                            
   
     
                                                                                                            
       Prérequis :
                                                                                                            
+
                                                                                                            
@@ -27,7 +27,7 @@ original_slug: Learn/Server-side/Premiers_pas/Client-Serveur
 
 
                                                                                                            Serveurs Web et HTTP (un avant-goût)
                                                                                                            
 
-
                                                                                                            Les navigateurs web communiquent avec les serveurs web avec le protocole HTTP : HyperTextTransfer Protocol. Quand vous cliquez un lien sur une page, soumettez un formulaire ou lancez une recherche, le navigateur envoie une requête HTTP (HTTP Request) au serveur.
                                                                                                            
+
                                                                                                            Les navigateurs web communiquent avec les serveurs web avec le protocole HTTP : HyperTextTransfer Protocol. Quand vous cliquez un lien sur une page, soumettez un formulaire ou lancez une recherche, le navigateur envoie une requête HTTP (HTTP Request) au serveur.
                                                                                                            
 
 
                                                                                                            Cette requête inclut :
                                                                                                            
 
@@ -54,7 +54,7 @@ original_slug: Learn/Server-side/Premiers_pas/Client-Serveur
  
                                                                                                          • Cookies côté Client.  Contient les données de session du client, incluant les clés dont peut se servir le serveur pour déterminer le statut de login et les accés/permissions aux ressources.
                                                                                                            • 
 
 
-
                                                                                                            Les serveurs Web attendent une requête du client puis la traitent quand elle arrive. Il répond ensuite au navigateur avec un message HTTP Response. La réponse contient un statut HTTP Response indiquant si, oui ou non, la requête a abouti. (ex : "200 OK" pour un succés, "404 Not Found" si la ressource ne peut être trouvée, "403 Forbidden" si l'utilisateur n'est pas autorisé à voir la ressource etc. Le corps d'une réponse aboutie à une requête  GET contiendrait la ressource demandée.
                                                                                                            
+
                                                                                                            Les serveurs Web attendent une requête du client puis la traitent quand elle arrive. Il répond ensuite au navigateur avec un message HTTP Response. La réponse contient un statut HTTP Response indiquant si, oui ou non, la requête a abouti. (ex : "200 OK" pour un succés, "404 Not Found" si la ressource ne peut être trouvée, "403 Forbidden" si l'utilisateur n'est pas autorisé à voir la ressource etc. Le corps d'une réponse aboutie à une requête  GET contiendrait la ressource demandée.
                                                                                                            
 
 
                                                                                                            Quand une page HTML est retournée, elle est affichée par le navigateur. Le navigateur, nativement, pourra découvrir des liens vers d'autres ressources (ex : une page HTML intégre habituellement des pages JavaScript et CSS ), et enverra des requêtes séparées pour télécharger ces fichiers.
                                                                                                            
 
@@ -65,12 +65,12 @@ original_slug: Learn/Server-side/Premiers_pas/Client-Serveur
 
                                                                                                            Vous faites une simple requête GET en cliquant sur un lien ou en faisant une recherche sur un site (sur une page de moteur de recherche par exemple). Une requête HTTP envoyée lorsque vous effectuez une recherche sur MDN pour les termes : "La relation Client-Serveur" ressemblera beaucoup à ce qui suit mais ne sera pas identique car des parties du message dépendent des paramètres de votre navigateur.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Le format des messsages HTTP est défini par un standard web  (RFC7230). Vous n'avez pas besoin de connaître ce niveau de détails mais vous saurez au moins d'où vient tout ça !
                                                                                                            
+
                                                                                                            Note : Le format des messsages HTTP est défini par un standard web  (RFC7230). Vous n'avez pas besoin de connaître ce niveau de détails mais vous saurez au moins d'où vient tout ça !
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            La requête
                                                                                                            
 
-
                                                                                                            Chaque ligne de la requête contient des informations sur celle-ci. La première partie est appelée l'en-tête ( header) et contient beaucoup de données utiles. De la même manière qu'un HTML head contient des informations utiles (pas le contenu réel qui lui, se trouve dans le corps (body) :
                                                                                                            
+
                                                                                                            Chaque ligne de la requête contient des informations sur celle-ci. La première partie est appelée l'en-tête ( header) et contient beaucoup de données utiles. De la même manière qu'un HTML head contient des informations utiles (pas le contenu réel qui lui, se trouve dans le corps (body) :
                                                                                                            
 
 
                                                                                                            GET https://developer.mozilla.org/en-US/search?q=la+relation+Client+-+serveur&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1
 Host: developer.mozilla.org
@@ -197,7 +197,7 @@ Content-Length: 0
 
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Les requêtes et réponses montrées dans ces exemples ont été capturées avec l'application Fiddler , mais vous pouvez avoir des informations similaires en utilisant des "renifleurs" web  (e.g. Websniffer, Wireshark) ou des extensions de navigateur comme  HttpFox. Vous pouvez essayer seul. Utilisez tous les outils recommandés, naviguez sur des sites et  éditez des profils de données pour explorer les différentes requêtes et réponses. La plupart des navigateurs modernes ont aussi des outils qui gérent les requêtes réseau, par exemple le Network Monitor dans Firefox).
                                                                                                            
+
                                                                                                            Note : Les requêtes et réponses montrées dans ces exemples ont été capturées avec l'application Fiddler , mais vous pouvez avoir des informations similaires en utilisant des "renifleurs" web  (e.g. Websniffer, Wireshark) ou des extensions de navigateur comme  HttpFox. Vous pouvez essayer seul. Utilisez tous les outils recommandés, naviguez sur des sites et  éditez des profils de données pour explorer les différentes requêtes et réponses. La plupart des navigateurs modernes ont aussi des outils qui gérent les requêtes réseau, par exemple le Network Monitor dans Firefox).
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Les sites statiques
                                                                                                            
@@ -205,14 +205,14 @@ Content-Length: 0
 
                                                                                                            Un site statique renvoie le même contenu codé en dur depuis le serveur quelle que soit la ressource demandée. Si vous avez une page concernant un produit à l'adresse  /static/myproduct1.html, cette même page sera retournée à chaque utilisateur. Si vous ajoutez un nouveau produit, vous devez ajouter une nouvelle page (par ex : myproduct2.html) et ainsi de suite. Cela peut être vraiment inefficace — Comment faire quand vous avez des milliers de pages "produit" à faire ? Vous allez répéter beaucoup de code identique dans chaque page (le modèle de base de la page, sa structure, etc.) et si vous voulez changer quoique ce soit dans la structure de la page — comme une section "produits dérivés" par exemple — alors, il faudra changer chaque page individuellement..
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Les sites statiques sont trés efficace quand vous avez un petit nombre de pages et que vous voulez envoyer le même contenu à chaque utilisateur. De toutes façons, ils peuvent avoir un coût certain de maintenance au fur et à mesure de l'augmentation du nombre de pages.
                                                                                                            
+
                                                                                                            Note : Les sites statiques sont trés efficace quand vous avez un petit nombre de pages et que vous voulez envoyer le même contenu à chaque utilisateur. De toutes façons, ils peuvent avoir un coût certain de maintenance au fur et à mesure de l'augmentation du nombre de pages.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Voyons comment tout cela marche en révisant un diagramme d'architecture de site statique vu dans l'article précédent.
                                                                                                            
 
-
                                                                                                            A simplified diagram of a static web server.
                                                                                                            
+
                                                                                                            A simplified diagram of a static web server.
                                                                                                            
 
-
                                                                                                            Quand un utilisateur veut naviguer jusqu'à une page, le navigateur envoie une requête HTTP GET spécifiant l'URL de sa page HTML. Le serveur retourne le document demandé depuis son système de fichiers et retourne une réponse  HTTP contenant le document et un  HTTP Response status code ( statut codé de la réponse HTTP) qui est  "200 OK" (indiquant le succés de l'opération). Le serveur peut retourner un statut différent, par exemple "404 Not Found"  si le fichier est absent sur le serveur , ou bien "301 Moved Permanently" si le fichier existe mais a été déplacé vers une nouvelle localisation.
                                                                                                            
+
                                                                                                            Quand un utilisateur veut naviguer jusqu'à une page, le navigateur envoie une requête HTTP GET spécifiant l'URL de sa page HTML. Le serveur retourne le document demandé depuis son système de fichiers et retourne une réponse  HTTP contenant le document et un  HTTP Response status code ( statut codé de la réponse HTTP) qui est  "200 OK" (indiquant le succés de l'opération). Le serveur peut retourner un statut différent, par exemple "404 Not Found"  si le fichier est absent sur le serveur , ou bien "301 Moved Permanently" si le fichier existe mais a été déplacé vers une nouvelle localisation.
                                                                                                            
 
 
                                                                                                            Le serveur d'un site statique n'aura à faire face qu'à des requêtes  GET vu qu'il ne stocke aucune donnée modifiable. Il ne change pas non plus ses réponses basées sur les données des requêtes HTTP (c'est à dire les paramètres URL ou les cookies). 
                                                                                                            
 
@@ -230,11 +230,11 @@ Content-Length: 0
 
 
                                                                                                            Cette section présente une vue d'ensemble du cycle dynamique HTTP de requête/réponse, construit avec ce que nous avons vu précédemment avec de plus amples détails. Toujours dans l'optique de "faire les choses en réel" nous utiliserons le contexte du site d'une équipe de sport où l'entraîneur peut sélectionner le nom de l'équipe et le nombre de joueurs dans un formulaire HTML et avoir en retour une suggestion "Meilleure composition" pour le prochain match.
                                                                                                            
 
-
                                                                                                            Le diagramme ci-dessous montre les principaux éléments du site Web "entraîneur d'équipe", ainsi que des étiquettes numérotées pour la séquence des opérations lorsque l'entraîneur accède à la liste "meilleure équipe". Les parties du site qui le rendent dynamique sont l’application Web (c’est ainsi que nous nous référerons au code côté serveur qui traite les requêtes HTTP et renvoie les réponses HTTP), la base de données, qui contient des informations sur les joueurs, les équipes, les entraîneurs et leurs partenaires. relations, et les modèles HTML.
                                                                                                            
+
                                                                                                            Le diagramme ci-dessous montre les principaux éléments du site Web "entraîneur d'équipe", ainsi que des étiquettes numérotées pour la séquence des opérations lorsque l'entraîneur accède à la liste "meilleure équipe". Les parties du site qui le rendent dynamique sont l’application Web (c’est ainsi que nous nous référerons au code côté serveur qui traite les requêtes HTTP et renvoie les réponses HTTP), la base de données, qui contient des informations sur les joueurs, les équipes, les entraîneurs et leurs partenaires. relations, et les modèles HTML.
                                                                                                            
 
-
                                                                                                            This is a diagram of a simple web server with step numbers for each of step of the client-server interaction.
                                                                                                            
+
                                                                                                            This is a diagram of a simple web server with step numbers for each of step of the client-server interaction.
                                                                                                            
 
-
                                                                                                            Une fois que l’entraîneur a soumis le formulaire avec le nom de l’équipe et le nombre de joueurs, la séquence des opérations est la suivante:
                                                                                                            
+
                                                                                                            Une fois que l’entraîneur a soumis le formulaire avec le nom de l’équipe et le nombre de joueurs, la séquence des opérations est la suivante:
                                                                                                            
 
 
                                                                                                              
  
                                                                                                            1. Le navigateur Web crée une requête HTTP GET au serveur en utilisant l’URL de base de la ressource (/ best) et en codant l’équipe et le numéro du joueur sous forme de paramètres d’URL (par exemple / best? team=my_team_name&show = 11) ou dans le cadre de l’URL modèle (par exemple / best / my_team_name / 11 /). Une requête GET est utilisée car la requête extrait uniquement des données (sans les modifier).
                                                                                                              2. 
@@ -242,11 +242,11 @@ Content-Length: 0
  
                                                                                                            2. L'application Web identifie l'objectif de la demande d'obtenir la "meilleure liste d'équipes" en fonction de l'URL (/ best /) et recherche le nom d'équipe requis et le nombre de joueurs à partir de l'URL. L'application Web obtient alors les informations requises de la base de données (en utilisant des paramètres "internes" supplémentaires pour définir quels joueurs sont les "meilleurs", et éventuellement en obtenant également l'identité de l'entraîneur connecté à partir d'un cookie côté client).
                                                                                                              3. 
  
                                                                                                            3. L'application Web crée dynamiquement une page HTML en plaçant les données (de la base de données) dans des espaces réservés dans un modèle HTML.
                                                                                                              4. 
  
                                                                                                            4. L'application Web renvoie le code HTML généré au navigateur Web (via le serveur Web), ainsi qu'un code d'état HTTP de 200 ("success"). Si quoi que ce soit empêche le code HTML d'être renvoyé, l'application Web renvoie un autre code, par exemple "404" pour indiquer que l'équipe n'existe pas.
                                                                                                              5. 
- 
                                                                                                            5. Le navigateur Web commence alors à traiter le code HTML renvoyé, en envoyant des demandes distinctes pour obtenir tous les fichiers CSS ou JavaScript qu’il référence (voir étape 7).
                                                                                                              6. 
- 
                                                                                                            6. Le serveur Web charge les fichiers statiques à partir du système de fichiers et les renvoie directement au navigateur (là encore, le traitement correct des fichiers est basé sur les règles de configuration et la correspondance des types d'URL).
                                                                                                              7. 
+ 
                                                                                                            7. Le navigateur Web commence alors à traiter le code HTML renvoyé, en envoyant des demandes distinctes pour obtenir tous les fichiers CSS ou JavaScript qu’il référence (voir étape 7).
                                                                                                              8. 
+ 
                                                                                                            8. Le serveur Web charge les fichiers statiques à partir du système de fichiers et les renvoie directement au navigateur (là encore, le traitement correct des fichiers est basé sur les règles de configuration et la correspondance des types d'URL).
                                                                                                              9. 
 
                                                                                                            
 
-
                                                                                                            Une opération de mise à jour d'un enregistrement dans la base de données serait gérée de la même manière, sauf que, comme toute mise à jour de base de données, la demande HTTP du navigateur devrait être codée en tant que demande POST.
                                                                                                            
+
                                                                                                            Une opération de mise à jour d'un enregistrement dans la base de données serait gérée de la même manière, sauf que, comme toute mise à jour de base de données, la demande HTTP du navigateur devrait être codée en tant que demande POST.
                                                                                                            
 
 
                                                                                                            que faire d'autre?
                                                                                                            
 
@@ -275,7 +275,7 @@ urlpatterns = [
 ]
 
 
                                                                                                            
-
                                                                                                            Note: Les premiers paramètres des fonctions url () peuvent paraître un peu bizarres (par exemple, r '^ junior / $') car ils utilisent une technique de correspondance de modèle appelée "expressions régulières" (RegEx ou RE). Vous n'avez pas besoin de savoir comment fonctionnent les expressions régulières à ce stade, car elles nous permettent également de faire correspondre les modèles de l'URL (plutôt que les valeurs codées en dur ci-dessus) et de les utiliser comme paramètres dans nos fonctions d'affichage. À titre d'exemple, un RegEx très simple pourrait dire "faire correspondre une seule lettre majuscule, suivie de 4 à 7 lettres minuscules".
                                                                                                            
+
                                                                                                            Note : Les premiers paramètres des fonctions url () peuvent paraître un peu bizarres (par exemple, r '^ junior / $') car ils utilisent une technique de correspondance de modèle appelée "expressions régulières" (RegEx ou RE). Vous n'avez pas besoin de savoir comment fonctionnent les expressions régulières à ce stade, car elles nous permettent également de faire correspondre les modèles de l'URL (plutôt que les valeurs codées en dur ci-dessus) et de les utiliser comme paramètres dans nos fonctions d'affichage. À titre d'exemple, un RegEx très simple pourrait dire "faire correspondre une seule lettre majuscule, suivie de 4 à 7 lettres minuscules".
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            L'infrastructure Web permet également à une fonction d'affichage d'extraire facilement des informations de la base de données. La structure de nos données est définie dans des modèles, qui sont des classes Python qui définissent les champs à stocker dans la base de données sous-jacente. Si nous avons un modèle nommé Team avec un champ "team_type", nous pouvons utiliser une syntaxe de requête simple pour récupérer toutes les équipes ayant un type particulier.
                                                                                                            
@@ -305,13 +305,13 @@ def junior(request):
 
 
                                                                                                            Dans un module suivant, nous vous aiderons à choisir le meilleur framework Web pour votre premier site.
                                                                                                            
 
-
                                                                                                            {{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
                                                                                                            
+
                                                                                                            {{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
                                                                                                            
 
 
                                                                                                            In this module
                                                                                                            
 
 
diff --git a/files/fr/learn/server-side/first_steps/index.html b/files/fr/learn/server-side/first_steps/index.html
index 5b2b93d425..cb79ff0b9a 100644
--- a/files/fr/learn/server-side/first_steps/index.html
+++ b/files/fr/learn/server-side/first_steps/index.html
@@ -21,9 +21,9 @@ original_slug: Learn/Server-side/Premiers_pas
 
                                                                                                            Vous aurez besoin de comprendre "comment fonctionne le web". Nous vous recommandons de lire d'abord les sujets suivants :
                                                                                                            
 
 
 
 
                                                                                                            Avec cette compréhension de base, vous serez prêts à parcourir les modules de cette section.
                                                                                                            
@@ -31,13 +31,13 @@ original_slug: Learn/Server-side/Premiers_pas
 
                                                                                                            Guides
                                                                                                            
 
 
                                                                                                            
- 
                                                                                                            Introduction au côté serveur
                                                                                                            
+ 
                                                                                                            Introduction au côté serveur
                                                                                                            
  
                                                                                                            Bienvenue au cours de programmation débutant de MDN ! Dans ce premier article, nous examinerons la programmation côté serveur, répondant à des questions comme «En quoi consiste-t-elle ?», «En quoi diffère-t-elle de la programmation côté client ?» et «Pourquoi est-ce si utile ?». Après avoir lu cet article, vous comprendrez comment la programmation côté serveur donne aux sites web toute leur puissance.
                                                                                                            
  
                                                                                                            Présentation client-serveur
                                                                                                            
  
                                                                                                            Maintenant que vous connaissez le but et les avantages potentiels de la programmation côté serveur, nous allons examiner en détail ce qui se passe lorsqu'un serveur reçoit une "requête dynamique" d'un navigateur. Comme la plupart des codes côté serveur traitent les demandes et les réponses de la même manière, cela vous aidera à comprendre ce que vous devez faire lorsque vous écrivez votre propre code.
                                                                                                            
  
                                                                                                            Frameworks web côté serveur
                                                                                                            
  
                                                                                                            Le dernier article vous a montré ce qu'une application web côté serveur doit faire pour répondre aux demandes d'un navigateur web. Nous allons maintenant vous montrer comment les frameworks web peuvent simplifier ces tâches ; nous vous aiderons à choisir le bon framework pour coder votre première application web côté serveur.
                                                                                                            
- 
                                                                                                            Sécurité de votre site web
                                                                                                            
+ 
                                                                                                            Sécurité de votre site web
                                                                                                            
  
                                                                                                            La sécurité de votre site web requiert une vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre les premières mesures importantes à prendre pour mettre votre application web à l'abri des menaces les plus courantes.
                                                                                                            
 
                                                                                                            
 
diff --git a/files/fr/learn/server-side/first_steps/introduction/index.html b/files/fr/learn/server-side/first_steps/introduction/index.html
index 6d7a56563e..8a3337f276 100644
--- a/files/fr/learn/server-side/first_steps/introduction/index.html
+++ b/files/fr/learn/server-side/first_steps/introduction/index.html
@@ -15,9 +15,9 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction
 
 
                                                                                                            {{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
                                                                                                            
 
-
                                                                                                            Bienvenue au cours pour débutant de MDN sur la programmation côté serveur. Dans ce premier article, nous allons regarder la programmation côté serveur sans rentrer dans les détails techniques, en répondant aux questions telles que "qu'est-ce que c'est?", "quelle est la différence avec la programmation côté client?", et "pourquoi est-ce utile?". Après avoir lu cet article vous comprendrez commment la programmation côté serveur donne toute leur puissance aux sites web.
                                                                                                            
+
                                                                                                            Bienvenue au cours pour débutant de MDN sur la programmation côté serveur. Dans ce premier article, nous allons regarder la programmation côté serveur sans rentrer dans les détails techniques, en répondant aux questions telles que "qu'est-ce que c'est?", "quelle est la différence avec la programmation côté client?", et "pourquoi est-ce utile?". Après avoir lu cet article vous comprendrez commment la programmation côté serveur donne toute leur puissance aux sites web.
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis :
                                                                                                            
+
                                                                                                            
@@ -54,7 +54,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction
 
 
                                                                                                            Le serveur récupère le document demandé du système de fichiers et retourne une réponse HTTP contenant le document et le statut de la réponse (habituellement, 200 OK). Si le fichier ne peut pas être recupéré pour une raison x ou y, le statut d'erreur est retourné (voir réponses d'erreur client et réponse d'erreur serveur).
                                                                                                            
 
-
                                                                                                            A simplified diagram of a static web server.
                                                                                                            
+
                                                                                                            A simplified diagram of a static web server.
                                                                                                            
 
 
                                                                                                            Sites dynamiques
                                                                                                            
 
@@ -68,7 +68,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction
 
 
                                                                                                            Les requêtes pour les ressources statiques sont toujours gérées de la même manière que pour les sites statiques (les ressources statiques sont tous les fichiers qui ne changent pas —typiquement : CSS, JavaScript, Images, fichiers PDF etc).
                                                                                                            
 
-
                                                                                                            A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview.
                                                                                                            
+
                                                                                                            A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview.
                                                                                                            
 
 
                                                                                                            Les requêtes pour les ressources dynamiques, elles, sont transmises (2) au code côté serveur (indiqué dans le diagramme comme Web Application). Le serveur interprète la requête, lit les informations correspondantes dans la base de données (3), combine les données récupérées avec les templates HTML (4), et renvoie la réponse avec le HTML généré (5,6). 
                                                                                                            
 
@@ -97,7 +97,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction
 
                                                                                                            Encore une fois, bien que le code côté client et côté serveur utilisent des frameworks, les domaines d'application sont très différents et par conséquent les frameworks aussi. Les frameworks web côté client simplifient les tâches de mise en page et de présentation tandis que les frameworks web côté serveur fournissent des fonctionnalités "courantes" que vous auriez probablement à implémenter vous-même autrement (comme le support des sessions, des utilisateurs et de l'authentification, l'accès à la base de données, les bibliothèques de templates, etc.).
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Les frameworks côté client sont souvent utilisés pour accélérer le développement du code côté client, mais vous pouvez également choisir d'écrire tout le code à la main ; en vérité, écrire votre code à la main peut être plus rapide et plus efficace si vous n'avez besoin que d'une petite interface web très simple.
                                                                                                            
+
                                                                                                            Note : Les frameworks côté client sont souvent utilisés pour accélérer le développement du code côté client, mais vous pouvez également choisir d'écrire tout le code à la main ; en vérité, écrire votre code à la main peut être plus rapide et plus efficace si vous n'avez besoin que d'une petite interface web très simple.
                                                                                                            
 
 
                                                                                                            En revanche, vous ne penseriez presque jamais à écrire les composants côté serveur d'une application web sans framework — implémenter des fonctionnalités vitales comme un serveur HTTP est très difficile à faire à partir de rien, comme disons en Python, alors que les frameworks web Python comme Django le fournissent tout prêt à l'emploi, accompagné d'autres outils très utiles.
                                                                                                            
 
                                                                                                            
@@ -125,7 +125,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction
 
                                                                                                            Comme les informations se trouvent dans une base de données, elles peuvent également être partagées et mises à jour plus facilement avec d'autres systèmes (par exemple, quand des produits sont vendus en ligne ou dans un magasin, le magasin peut mettre à jour son inventaire).
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Votre imagination n'a pas à travailler dur pour voir les bénéfices du code côté serveur pour le stockage et distribution de l'information:
                                                                                                            
+
                                                                                                            Note : Votre imagination n'a pas à travailler dur pour voir les bénéfices du code côté serveur pour le stockage et distribution de l'information:
                                                                                                            
 
 
                                                                                                              
  
                                                                                                            1. Allez sur Amazon ou tout autre site e-commerce.
                                                                                                              2. 
@@ -143,7 +143,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction
 
                                                                                                              Une analyse plus approfondie des habitudes des utilisateurs peut être utilisée pour anticiper leurs intérêts et personnaliser les réponses ou les notifications du serveur, par exemple pour fournir une liste des lieux précédemment visités ou les plus populaires que vous pourriez vouloir chercher sur la carte.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Google Maps sauvegarde vos recherches et votre historique de visites. Les emplacement fréquemment visités ou fréquemment recherchés sont plus mis en avant que les autres.
                                                                                                              
+
                                                                                                              Note : Google Maps sauvegarde vos recherches et votre historique de visites. Les emplacement fréquemment visités ou fréquemment recherchés sont plus mis en avant que les autres.
                                                                                                              
 
 
                                                                                                              Les résultats de recherche Google sont optimisés en fonction des recherches précédentes.
                                                                                                              
 
@@ -170,7 +170,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction
 
 
 
                                                                                                              
-
                                                                                                              Note : Il existe de nombreux autres exemples où l'accès au contenu est contrôlé. Par exemple, que voyez-vous si vous allez sur le site en ligne de votre banque ? Connectez-vous à votre compte — quelles autres informations pouvez-vous voir et modifier ? Quelles informations pouvez-vous voir que seule la banque peut changer ?
                                                                                                              
+
                                                                                                              Note : Il existe de nombreux autres exemples où l'accès au contenu est contrôlé. Par exemple, que voyez-vous si vous allez sur le site en ligne de votre banque ? Connectez-vous à votre compte — quelles autres informations pouvez-vous voir et modifier ? Quelles informations pouvez-vous voir que seule la banque peut changer ?
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Stocker les informations de session/d'état
                                                                                                              
@@ -180,7 +180,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction
 
                                                                                                              Cela permet, par exemple, à un site de savoir qu'un utilisateur s'est déjà identifié et afficher des messages qui lui sont destinés, d'afficher son historique de commande, ou peut-être encore, dans le cas d'un jeu, lui permettre de reprendre là où il en est resté.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Visitez le site d'un journal qui a une offre d'abonnement et ouvrez des pages (par exemple The Age). Si vous continuez à visiter le site quelques heures/jours, éventuellement, vous commencerez à être redirigé vers des pages expliquant comment vous abonner, et vous ne pourrez plus accéder aux articles. Cette information est un exemple de session stockée dans des cookies.
                                                                                                              
+
                                                                                                              Note : Visitez le site d'un journal qui a une offre d'abonnement et ouvrez des pages (par exemple The Age). Si vous continuez à visiter le site quelques heures/jours, éventuellement, vous commencerez à être redirigé vers des pages expliquant comment vous abonner, et vous ne pourrez plus accéder aux articles. Cette information est un exemple de session stockée dans des cookies.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Notifications et communication
                                                                                                              
@@ -196,7 +196,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction
 
 
 
                                                                                                              
-
                                                                                                              Note : Le type de notification le plus courant est la "confirmation d'inscription". Choisissez presque n'importe quel site qui vous intéresse (Google, Amazon, Instagram, etc.) et créez un nouveau compte en utilisant votre adresse email. Vous recevrez rapidement un email qui confirme votre inscription, ou qui exige une confirmation pour activer votre compte.
                                                                                                              
+
                                                                                                              Note : Le type de notification le plus courant est la "confirmation d'inscription". Choisissez presque n'importe quel site qui vous intéresse (Google, Amazon, Instagram, etc.) et créez un nouveau compte en utilisant votre adresse email. Vous recevrez rapidement un email qui confirme votre inscription, ou qui exige une confirmation pour activer votre compte.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Analyse des données
                                                                                                              
@@ -206,7 +206,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction
 
                                                                                                              Par exemple, Amazon et Google font tous deux de la publicité pour des produits en se basant sur les recherches précédentes, sur les achats que vous avez faits.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Si vous êtes un utilisateur de Facebook, allez sur votre flux principal et regardez les posts. Notez que certains posts ne sont pas classés par ordre numérique — en particulier, les posts qui ont le plus de "likes" sont souvent placés plus haut dans la liste que les posts plus récents.
                                                                                                              
+
                                                                                                              Note : Si vous êtes un utilisateur de Facebook, allez sur votre flux principal et regardez les posts. Notez que certains posts ne sont pas classés par ordre numérique — en particulier, les posts qui ont le plus de "likes" sont souvent placés plus haut dans la liste que les posts plus récents.
                                                                                                              
 
 
                                                                                                              Observez également quels types de publicités vous voyez — vous pourrez voir des publicités pour des choses que vous avez regardé sur d'autres sites. L'algorithme de Facebook pour mettre en avant du contenu et faire de la publicité est un peu un mystérieux, mais il est clair qu'il prend en compte vos likes et ce que vous avez l'habitude de regarder !
                                                                                                              
 
                                                                                                              
diff --git a/files/fr/learn/server-side/first_steps/web_frameworks/index.html b/files/fr/learn/server-side/first_steps/web_frameworks/index.html
index 9e44b23927..ca3f14e2ff 100644
--- a/files/fr/learn/server-side/first_steps/web_frameworks/index.html
+++ b/files/fr/learn/server-side/first_steps/web_frameworks/index.html
@@ -13,9 +13,9 @@ original_slug: Learn/Server-side/Premiers_pas/Web_frameworks
 
 
                                                                                                              {{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}
                                                                                                              
 
-
                                                                                                              L'article précédent nous a montré à quoi ressemble la communication entre les clients et les serveurs web, la nature des demandes et des réponses HTTP et ce qu’une application web côté serveur doit faire pour répondre aux demandes d’un navigateur web. Avec ces connaissances en main, il est temps d'explorer comment les frameworks peuvent nous simplifier la tâche.  En chemin, vous comprendrez comment choisir le framework le mieux adapté pour votre première application web côté serveur.
                                                                                                              
+
                                                                                                              L'article précédent nous a montré à quoi ressemble la communication entre les clients et les serveurs web, la nature des demandes et des réponses HTTP et ce qu’une application web côté serveur doit faire pour répondre aux demandes d’un navigateur web. Avec ces connaissances en main, il est temps d'explorer comment les frameworks peuvent nous simplifier la tâche.  En chemin, vous comprendrez comment choisir le framework le mieux adapté pour votre première application web côté serveur.
                                                                                                              
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis:
                                                                                                            
+
                                                                                                            
@@ -137,7 +137,7 @@ def youngest(request):
 
                                                                                                            Par exemple, le système de templates Django vous permet de spécifier des variables en utilisant une syntaxe "double-handlebars" (par exemple,{{ variable_name }} ), qui sera remplacée par les valeurs transmises à partir de la fonction d'affichage lors du rendu d'une page. Le système de templates prend également en charge les expressions (avec la syntaxe:{% expression %} ), qui permettent aux templates d'effectuer des opérations simples, telles que l'itération des valeurs de liste transmises au modèle.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Many other templating systems use a similar syntax, e.g.: Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), etc.
                                                                                                            
+
                                                                                                            Note : Many other templating systems use a similar syntax, e.g.: Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), etc.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            L'extrait de code ci-dessous montre comment cela fonctionne. En reprenant l'exemple "youngest_teams" de la section précédente, le modèle HTML se voit transmettre par la vue une variable de liste nommée youngest_teams. Dans le squelette HTML, nous avons une expression qui vérifie d'abord si la variable youngest_teams existe, puis itère dans une boucle for. À chaque itération, le modèle affiche la valeur team_name de l'équipe dans un élément de liste.
                                                                                                            
@@ -162,7 +162,7 @@ def youngest(request):
 </html>
 
 
-
                                                                                                            Comment choisir un framework web
                                                                                                            
+
                                                                                                            Comment choisir un framework web
                                                                                                            
 
 
                                                                                                            Il existe de nombreux frameworks web pour presque tous les langages de programmation que vous souhaitez utiliser (nous énumérons quelques-uns des frameworks les plus populaires dans la section suivante). Avec autant de choix, il peut devenir difficile de déterminer quel framework constitue le meilleur point de départ pour votre nouvelle application web.
                                                                                                            
 
@@ -189,7 +189,7 @@ def youngest(request):
 
                                                                                                            Si vous débutez en programmation, vous choisirez probablement un framework facile à prendre en main. Une documentation riche et une communauté active sont également des critères pertinents pour votre choix. Pour la suite de ce cours, nous avons choisi Django (Python) et Express (Node/JavaScript) principalement parce que ces frameworks sont faciles à apprendre et bénéficient d'un bon soutien.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Let's go to the main websites for Django (Python) and Express (Node/JavaScript) and check out their documentation and community.
                                                                                                            
+
                                                                                                            Note : Let's go to the main websites for Django (Python) and Express (Node/JavaScript) and check out their documentation and community.
                                                                                                            
 
 
                                                                                                              
  
                                                                                                            1. Navigate to the main sites (linked above)
@@ -216,7 +216,7 @@ def youngest(request):
 
                                                                                                              The server-side frameworks below represent a few of the most popular available at the time of writing. All of them have everything you need to be productive — they are open source, are under active development, have enthusiastic communities creating documentation and helping users on discussion boards, and are used in large numbers of high-profile websites. There are many other great server-side frameworks that you can discover using a basic internet search.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note: Descriptions come (partially) from the framework websites!
                                                                                                              
+
                                                                                                              Note : Descriptions come (partially) from the framework websites!
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Django (Python)
                                                                                                              
@@ -237,7 +237,7 @@ def youngest(request):
 
 
                                                                                                              Express (Node.js/JavaScript)
                                                                                                              
 
-
                                                                                                              Express is a fast, unopinionated, flexible and minimalist web framework for Node.js (node is a browserless environment for running JavaScript). It provides a robust set of features for web and mobile applications and delivers useful HTTP utility methods and middleware.
                                                                                                              
+
                                                                                                              Express is a fast, unopinionated, flexible and minimalist web framework for Node.js (node is a browserless environment for running JavaScript). It provides a robust set of features for web and mobile applications and delivers useful HTTP utility methods and middleware.
                                                                                                              
 
 
                                                                                                              Express is extremely popular, partially because it eases the migration of client-side JavaScript web programmers into server-side development, and partially because it is resource-efficient (the underlying node environment uses lightweight multitasking within a thread rather than spawning separate processes for every new web request).
                                                                                                              
 
@@ -300,8 +300,8 @@ def youngest(request):
 
                                                                                                              In this module
                                                                                                              
 
 
diff --git a/files/fr/learn/server-side/first_steps/website_security/index.html b/files/fr/learn/server-side/first_steps/website_security/index.html
index d6e65ae2de..4b90e6303a 100644
--- a/files/fr/learn/server-side/first_steps/website_security/index.html
+++ b/files/fr/learn/server-side/first_steps/website_security/index.html
@@ -13,9 +13,9 @@ original_slug: Learn/Server-side/Premiers_pas/Website_security
 
 
                                                                                                              {{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/Premiers_pas")}}
                                                                                                              
 
-
                                                                                                              La sécurité d'un site web exige de la vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre d'où viennent les menaces et ce que vous pouvez faire pour renforcer votre application web contre les attaques les plus courantes.
                                                                                                              
+
                                                                                                              La sécurité d'un site web exige de la vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre d'où viennent les menaces et ce que vous pouvez faire pour renforcer votre application web contre les attaques les plus courantes.
                                                                                                              
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis :
                                                                                                            
+
                                                                                                            
@@ -39,7 +39,7 @@ original_slug: Learn/Server-side/Premiers_pas/Website_security
 
                                                                                                            Le reste de cet article détaille les menaces les plus courantes qui pèsent sur les sites web et quelques étapes simples pour protèger votre site.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : ceci est un article d'introduction, conçu pour vous aider à réflechir à la sécurité de votre site web. Il n'est en rien exhaustif.
                                                                                                            
+
                                                                                                            Note : ceci est un article d'introduction, conçu pour vous aider à réflechir à la sécurité de votre site web. Il n'est en rien exhaustif.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Menaces visant la sécurité des sites web
                                                                                                            
@@ -51,7 +51,7 @@ original_slug: Learn/Server-side/Premiers_pas/Website_security
 
                                                                                                            XSS est un terme utilisé pour décrire une classe d'attaque qui permet à l'attaquant d'injecter des scripts, exécutés côté-client, au travers du site web pour viser le navigateur web des autres utilisateurs. Comme le code injecté provient du site web le navigateur web le considère comme sûr, il peut de ce fait faire des choses comme transmettre le cookie d'authentification de l'utilisateur à l'attaquant. Une fois que l'attaquant obtient ce cookie il peut se connecter sur le site comme si il était l'utilisateur attaqué et peut faire tout ce que l'utilisateur pourrait faire. En fonction du site sur lequel l'attaque se produit, cela peut inclure l'accès aux détails de carte bancaire, les informations des contacts, la modification du mot de passe, etc.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : les vulnérabilités XSS ont historiquement été les plus courantes.
                                                                                                            
+
                                                                                                            Note : les vulnérabilités XSS ont historiquement été les plus courantes.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Il y a deux manières principales pour demander au site de retourner un script injecté vers un navigateur web — elles sont désignées en tant que vulnérabilités XSS réfléchie et persistante.
                                                                                                            
@@ -87,7 +87,7 @@ original_slug: Learn/Server-side/Premiers_pas/Website_security
 
                                                                                                            Le moyen pour éviter ce type d'attaque est de s'assurer que toute saisie de l'utilisateur transmise à une requête SQL ne peut pas changer la nature de cette requête. Un moyen de faire cela est d'échapper tous les caractères de la saisie utilisateur quand ils ont un sens particulier en SQL.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : la requête SQL considère le symbole ' comme le début et la fin d'une chaine de texte. En ajoutant le caractère \ nous allons "échapper" ce symbole, et dire à SQL de le traiter comme une simple partie de la chaîne de caractères.
                                                                                                            
+
                                                                                                            Note : la requête SQL considère le symbole ' comme le début et la fin d'une chaine de texte. En ajoutant le caractère \ nous allons "échapper" ce symbole, et dire à SQL de le traiter comme une simple partie de la chaîne de caractères.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Dans la requête ci-dessous nous avons échappé le caractère '. Le SQL va donc interpréter la chaine complète (en gras) comme un nom (un nom étrange en effet, mais pas nuisible).
                                                                                                            
@@ -99,7 +99,7 @@ original_slug: Learn/Server-side/Premiers_pas/Website_security
 
                                                                                                            Les frameworks web se chargent bien souvent d'échapper ces caractères à votre place. Django, par exemple, s'assure que toute saisie d'un utilisateur transmise au modèle est bien échappée.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note: Cette section s'inspire beaucoup des informations de Wikipedia ici.
                                                                                                            
+
                                                                                                            Note : Cette section s'inspire beaucoup des informations de Wikipedia ici.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Falsification de requête inter-sites (CSRF)
                                                                                                            
@@ -113,7 +113,7 @@ original_slug: Learn/Server-side/Premiers_pas/Website_security
 
                                                                                                            Au final tout utilisateur qui va cliquer sur le bouton de validation, alors qu'il sera connecté sur le site d'échange d'argent, va autoriser la transaction. John va devenir riche !
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : l'astuce ici est que John n'a pas besoin d'accéder aux cookies de l'utilisateur (ou à ses identifiants), le navigateur web stocke cette information et l'inclut automatiquement dans toute les requêtes destinées au serveur associé.
                                                                                                            
+
                                                                                                            Note : l'astuce ici est que John n'a pas besoin d'accéder aux cookies de l'utilisateur (ou à ses identifiants), le navigateur web stocke cette information et l'inclut automatiquement dans toute les requêtes destinées au serveur associé.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Un moyen de prévenir ce type d'attaque est que le serveur demande que chaque requête POST possède un secret généré par le serveur et spécifique à l'utilisateur (le secret serait transmis par le serveur lors de l'envoi du formulaire de transaction). Cette approche empêche John de créer son propre formulaire car il n'est pas capable de connaitre le secret que le serveur founit à l'utilisateur. Même si il venait à trouver ce secret et créer un formulaire pour un utilisateur particulier, il ne pourrait pas utiliser ce formulaire pour attaquer d'autres utilisateurs
                                                                                                            
@@ -139,15 +139,15 @@ original_slug: Learn/Server-side/Premiers_pas/Website_security
 
                                                                                                            La majorité des attaques citées précédement réusissent lorsque l'application web fait confiance aux données provenant du navigateur web. Quoique vous fassiez d'autre pour améliorer la sécurité de votre site web, vous devez désinfecter toutes les saisies des utilisateurs avant de les afficher, de les utiliser dans les requêtes SQL ou de les transmettre dans les appels du système ou du système de fichier.
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Important : la leçon la plus importante à retenir concernant la sécurité d'un site web est de ne jamais faire confiance aux données du navigateur web. Cela comprend les requêtes GET avec la présence des paramètres dans l'URL, les données envoyées avec les POST, les en-têtes HTTP, les cookies, les fichiers chargés par l'utilisateur, etc. Il faut toujours vérifier et assainir les données. Il faut toujours s'attendre au pire.
                                                                                                            
+
                                                                                                            Attention : la leçon la plus importante à retenir concernant la sécurité d'un site web est de ne jamais faire confiance aux données du navigateur web. Cela comprend les requêtes GET avec la présence des paramètres dans l'URL, les données envoyées avec les POST, les en-têtes HTTP, les cookies, les fichiers chargés par l'utilisateur, etc. Il faut toujours vérifier et assainir les données. Il faut toujours s'attendre au pire.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Quelques autres points que vous pouvez mettre en place :
                                                                                                            
 
 
                                                                                                              
  
                                                                                                            • Utilisez une politique de gestion des mots de passe efficace. Encouragez les mots de passe solides avec leur renouvellement fréquent. Prenez en compte une authentification à deux facteurs sur votre site (l'utilisateur, en plus du mot de passe, devra fournir un autre code d'authentification généralement fourni par un matériel physique, que seul l'utilisateur possède, comme un code envoyé sur le téléphone par SMS).
                                                                                                              • 
- 
                                                                                                            • Configurez vos serveurs web pour utiliser HTTPS et HTTP Strict Transport Security (HSTS). HTTPS chiffre les données transmises entre le client et le serveur. Cela garantit que les données d'authentification, les cookies, les données transistant avec POST et les informations d'en-têtes deviennent moins disponibles pour l'attaquant.
                                                                                                              • 
- 
                                                                                                            • Tenez vous informé des dernières menaces (la liste actuelle d'OWASP est ici) et préoccupez vous toujours des vulnerabilités les plus courantes en premier.
                                                                                                              • 
+ 
                                                                                                            • Configurez vos serveurs web pour utiliser HTTPS et HTTP Strict Transport Security (HSTS). HTTPS chiffre les données transmises entre le client et le serveur. Cela garantit que les données d'authentification, les cookies, les données transistant avec POST et les informations d'en-têtes deviennent moins disponibles pour l'attaquant.
                                                                                                              • 
+ 
                                                                                                            • Tenez vous informé des dernières menaces (la liste actuelle d'OWASP est ici) et préoccupez vous toujours des vulnerabilités les plus courantes en premier.
                                                                                                              • 
  
                                                                                                            • Utilisez des outils de recherche de vulnérabilités  pour faire automatiquement des recherches de bug sur votre site (votre site pourra également proposer un programme de buf bounty pour déceler des bugs, comme le fait Mozilla ici).
                                                                                                              • 
  
                                                                                                            • Ne stockez et n'affichez que les données nécessaires. Par exemple, si votre utilisateur doit stocker des données sensibles comme des informations bancaires, affichez seulement ce qui sera suffisant pour être identifié par l'utilisateur, mais pas suffisament pour être copié par un attaquant et être utilisé sur un autre site. La méthode la plus courante en ce moment est de n'afficher que les quatre derniers chiffres du numéro de carte bancaire.
                                                                                                              • 
 
                                                                                                            
diff --git a/files/fr/learn/server-side/index.html b/files/fr/learn/server-side/index.html
index a93e27f476..64bc78289b 100644
--- a/files/fr/learn/server-side/index.html
+++ b/files/fr/learn/server-side/index.html
@@ -15,9 +15,9 @@ translation_of: Learn/Server-side
 ---
 
                                                                                                            {{LearnSidebar}}
                                                                                                            
 
-
                                                                                                            Le sujet abordant les sites web dynamiques / la programmation coté serveur est une série de modules vous montrant comment créer un site web dynamique (sites web intereagissant avec vous de manière à vous donner des informations personnelles en réponse aux requêtes HTTP). Les modules fournissent une introduction universelle à la programmation coté serveur à travers des guides spécifiques pour les debutants vous montrant comment vous servir des infrastructure d'application (aussi appelé frameworks) Django (fait en Python) et Express(fait en Node.js/JavaScript) afin de créer des applications basiques.
                                                                                                            
+
                                                                                                            Le sujet abordant les sites web dynamiques / la programmation coté serveur est une série de modules vous montrant comment créer un site web dynamique (sites web intereagissant avec vous de manière à vous donner des informations personnelles en réponse aux requêtes HTTP). Les modules fournissent une introduction universelle à la programmation coté serveur à travers des guides spécifiques pour les debutants vous montrant comment vous servir des infrastructure d'application (aussi appelé frameworks) Django (fait en Python) et Express(fait en Node.js/JavaScript) afin de créer des applications basiques.
                                                                                                            
 
-
                                                                                                            La plupart des sites web utilisent une technologie (frameworks, serveurs, languages, etc.) côté serveur afin d'afficher dynamiquement les différentes informations requises. Par exemple, imaginez combien de produits sont disponibles sur Amazon, et imaginez combien de post ont été publiés sur Facebook depuis son commencement ? Afficher tout ceci en utilisant uniquement des pages 'statiques' aurait été absolument inutile et complétement infernal, au lieu de ça les sites dynamiques utilisent des templates (sorte de page statique servant de 'modèle', programmé en utilisant le HTML, le CSS et le JavaScript dans lequel on viendra y insérer les informations voulues ; par exemple, chaque page d'article amazon est la même, il s'agit juste d'un template dans lequel viennent se placer les informations du produit sélectionné).
                                                                                                            
+
                                                                                                            La plupart des sites web utilisent une technologie (frameworks, serveurs, languages, etc.) côté serveur afin d'afficher dynamiquement les différentes informations requises. Par exemple, imaginez combien de produits sont disponibles sur Amazon, et imaginez combien de post ont été publiés sur Facebook depuis son commencement ? Afficher tout ceci en utilisant uniquement des pages 'statiques' aurait été absolument inutile et complétement infernal, au lieu de ça les sites dynamiques utilisent des templates (sorte de page statique servant de 'modèle', programmé en utilisant le HTML, le CSS et le JavaScript dans lequel on viendra y insérer les informations voulues ; par exemple, chaque page d'article amazon est la même, il s'agit juste d'un template dans lequel viennent se placer les informations du produit sélectionné).
                                                                                                            
 
 
                                                                                                            De nos jours, dans le monde du web, apprendre la programmation côté serveur est indispensable.
                                                                                                            
 
@@ -30,9 +30,9 @@ translation_of: Learn/Server-side
 
                                                                                                            Vous allez avoir besoin de comprendre "comment le fonctionne le Web". Nous vous recommandons premièremement de lire les sujets suivants :
                                                                                                            
 
 
 
 
                                                                                                            Ces articles vous donnerons les outils nécessaires afin de travailler avec les modules de cette section.
                                                                                                            
@@ -42,17 +42,17 @@ translation_of: Learn/Server-side
 
                                                                                                            Ce sujet contient les modules suivants. Vous feriez mieux de commencer par le premier module, pour ensuite faire les autres qui vous montrerons comment travailler à l'aide des 2 languages de programmation côté serveur les plus populaire en utilisant les frameworks web appropriés.
                                                                                                            
 
 
                                                                                                            
- 
                                                                                                            Les premiers pas en programmation de site web côté serveur 
                                                                                                            
+ 
                                                                                                            Les premiers pas en programmation de site web côté serveur 
                                                                                                            
  
                                                                                                            Ce module fournit les informations de base sur la programmation de site web côté serveur en répondant à des questions telles que "Qu'est-ce que c'est ?", "En quoi est-ce différent de la prgrammation côté client ?" ou encore "Pourquoi est-ce si utile ?" ainsi qu'un aperçu de quelques frameworks côté serveur et comment choisir le vôtre en fonction de vos besoin ou des besoins de votre site web. Finalement nous allons vous présenter les principes de sécurité en serveur web.
                                                                                                            
- 
                                                                                                            Le framework Web Django (Python)
                                                                                                            
+ 
                                                                                                            Le framework Web Django (Python)
                                                                                                            
  
                                                                                                            Django est une infrastructure d'application (framework) côté serveur extrêmement populaire et dotée de son lot de fonctionnalités, écrite en Python. Ce module vous expliquera pourquoi Django fait un si bon framework pour serveurs, comment l'installer et s'en servir.
                                                                                                            
- 
                                                                                                            Express Web Framework (Node.js/JavaScript)
                                                                                                            
+ 
                                                                                                            Express Web Framework (Node.js/JavaScript)
                                                                                                            
  
                                                                                                            Express est une infrastructure d'application (framework) assez populaire, écrite en JavaScript et fonctionnant à l'aide de Node.js. Ce module explique les avantages dont bénéficie ce framework, comment l'installer ainsi que comment s'en servir.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Voir aussi
                                                                                                            
 
 
                                                                                                            
- 
                                                                                                            Serveur Node sans infrastucture d'application (framework) (anglais)
                                                                                                            
+ 
                                                                                                            Serveur Node sans infrastucture d'application (framework) 
                                                                                                            
  
                                                                                                            Cet article comprend un serveur statique réalisé avec Node.js seul, pour ceux qui ne veulent pas utiliser de frameworks.
                                                                                                            
 
                                                                                                            
diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html
index 2f6aa2a4b6..fd3e443982 100644
--- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html
+++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html
@@ -12,7 +12,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
 ---
 
                                                                                                            {{LearnSidebar}}
                                                                                                            
 
-
                                                                                                            Les frameworks JavaScript sont une partie essentielle du développement web front-end moderne, fournissant aux développeurs des outils éprouvés pour construire des applications web évolutives et interactives. De nombreuses entreprises modernes utilisent des frameworks comme un élément normé de leur outillage, de sorte que de nombreux emplois de développement front-end requièrent désormais une expérience avec ces frameworks.
                                                                                                            
+
                                                                                                            Les frameworks JavaScript sont une partie essentielle du développement web front-end moderne, fournissant aux développeurs des outils éprouvés pour construire des applications web évolutives et interactives. De nombreuses entreprises modernes utilisent des frameworks comme un élément normé de leur outillage, de sorte que de nombreux emplois de développement front-end requièrent désormais une expérience avec ces frameworks.
                                                                                                            
 
 
                                                                                                            En tant que futur développeur front-end, il peut être difficile de savoir par où commencer lors de l'apprentissage des frameworks – il y a tant de frameworks si différents les uns des autres et de nouveaux qui apparaissent sans cesse, ils fonctionnent généralement de manière similaire mais font certaines choses différemment, et il y a certaines choses spécifiques à avoir en tête lors de leur utilisation.
                                                                                                            
 
@@ -68,7 +68,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
  
                                                                                                            4. Interactivité de React: évènements et états
                                                                                                            
  
                                                                                                            Une fois notre plan de composants élaboré, il est maintenant temps de commencer à faire évoluer notre application d'une interface utilisateur complètement statique vers une interface qui nous permet réellement d'interagir et de modifier des choses. Dans cet article, nous allons le faire, en explorant les évènements et les états en cours de route.
                                                                                                            
  
                                                                                                            5. Interactivité de React: modification, filtrage, rendu conditionné
                                                                                                            
- 
                                                                                                            Alors que nous approchons de la fin de notre voyage React (pour l'instant du moins), nous ajouterons la touche finale aux principaux domaines de fonctionnalités de notre application de liste de tâches. Cela comprend la possibilité de modifier les tâches existantes et de filtrer la liste des tâches entre toutes les tâches, terminées et incomplètes. Nous examinerons le rendu conditionné de l'interface utilisateur en cours de route.
                                                                                                            
+ 
                                                                                                            Alors que nous approchons de la fin de notre voyage React (pour l'instant du moins), nous ajouterons la touche finale aux principaux domaines de fonctionnalités de notre application de liste de tâches. Cela comprend la possibilité de modifier les tâches existantes et de filtrer la liste des tâches entre toutes les tâches, terminées et incomplètes. Nous examinerons le rendu conditionné de l'interface utilisateur en cours de route.
                                                                                                            
  
                                                                                                            6. Accessibilité dans React
                                                                                                            
  
                                                                                                            Dans notre avant-dernier article du tutoriel, nous nous concentrerons sur l'accessibilité, y compris la gestion de la mise au point dans React, ce qui peut améliorer la convivialité et réduire la confusion pour les utilisateurs de clavier uniquement et de lecteur d'écran.
                                                                                                            
  
                                                                                                            7. Ressources sur React
                                                                                                            
@@ -130,7 +130,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
 
                                                                                                            Tutoriels sur Svelte
                                                                                                            
 
 
                                                                                                            
-
                                                                                                            Note : Les tutoriels sur Svelte ont été essayés pour la dernière fois en aout 2020, avec Svelte 3.24.1.
                                                                                                            
+
                                                                                                            Note : Les tutoriels sur Svelte ont été essayés pour la dernière fois en aout 2020, avec Svelte 3.24.1.
                                                                                                            
 
 
                                                                                                            Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version terminée de l'exemple eu code de l'application Svelte (tel qu'il est après chaque chapitre) dans le dépôt mdn-svelte-tutorial. Pour une version exécutable en direct, voir https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2.
                                                                                                            
 
                                                                                                            
diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html
index 6762cb5842..d222a30518 100644
--- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html
+++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html
@@ -7,13 +7,13 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd
 
 
                                                                                                            {{NextMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
                                                                                                            
 
-
                                                                                                            We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.
                                                                                                            
+
                                                                                                            We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Pré-requis :
                                                                                                            
+
                                                                                                            
-   
+   
@@ -40,7 +40,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd
 
 
                                                                                                            Ember was initially released in December 2011 as a continuation of work that started in the SproutCore project. It is an older framework that has less users than more modern alternatives  such as React and Vue, but it still enjoys a fair amount of popularity due to its stability, community support, and some clever coding principles.
                                                                                                            
 
-
                                                                                                            Start learning Ember
                                                                                                            
+
                                                                                                            Start learning Ember
                                                                                                            
 
 
                                                                                                            Angular
                                                                                                            
 
@@ -54,7 +54,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd
 
 
                                                                                                            Vue, like AngularJS, extends HTML with some of its own code. Apart from that, it mainly relies on modern, standard JavaScript.
                                                                                                            
 
-
                                                                                                            Start learning Vue
                                                                                                            
+
                                                                                                            Start learning Vue
                                                                                                            
 
 
                                                                                                            React
                                                                                                            
 
@@ -64,7 +64,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd
 
 
                                                                                                            React extends JavaScript with HTML-like syntax, known as JSX.
                                                                                                            
 
-
                                                                                                            Start learning React
                                                                                                            
+
                                                                                                            Start learning React
                                                                                                            
 
 
                                                                                                            Why do frameworks exist?
                                                                                                            
 
@@ -80,16 +80,16 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd
 
 
                                                                                                            Building HTML elements and rendering them in the browser at the appropriate time takes a surprising amount of code. Let's say that our state is an array of objects structured like this:
                                                                                                            
 
-
                                                                                                            const state = [
+
                                                                                                            const state = [
   {
     id: 'todo-0',
     name: 'Learn some frameworks!'
   }
 ]
                                                                                                            
 
-
                                                                                                            How do we show one of those tasks to our user? We want to represent each task as a list item – an HTML <li> element inside of an unordered list element (a <ul>). How do we make it? That could look something like this:
                                                                                                            
+
                                                                                                            How do we show one of those tasks to our user? We want to represent each task as a list item – an HTML <li> element inside of an unordered list element (a <ul>). How do we make it? That could look something like this:
                                                                                                            
 
-
                                                                                                            function buildTodoItemEl(id, name) {
+
                                                                                                            function buildTodoItemEl(id, name) {
   const item = document.createElement('li');
   const span = document.createElement('span');
   const textContent = document.createTextNode(name);
@@ -103,11 +103,11 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd
   return item;
 }
                                                                                                            
 
-
                                                                                                            Here, we use the document.createElement() method to make our <li>, and several more lines of code to create the properties and children it needs.
                                                                                                            
+
                                                                                                            Here, we use the document.createElement() method to make our <li>, and several more lines of code to create the properties and children it needs.
                                                                                                            
 
 
                                                                                                            The tenth line of this snippet references another build function: buildDeleteButtonEl(). It follows a similar pattern to the one we used to build a list item element:
                                                                                                            
 
-
                                                                                                            function buildDeleteButtonEl(id) {
+
                                                                                                            function buildDeleteButtonEl(id) {
   const button = document.createElement('button');
   const textContent = document.createTextNode('Delete');
 
@@ -119,7 +119,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd
 
 
                                                                                                            This button doesn't do anything yet, but it will later once we decide to implement our delete feature. The code that will render our items on the page might read something like this:
                                                                                                            
 
-
                                                                                                            function renderTodoList() {
+
                                                                                                            function renderTodoList() {
   const frag = document.createDocumentFragment();
   state.tasks.forEach(task => {
     const item = buildTodoItemEl(task.id, task.name);
@@ -143,12 +143,12 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd
 
                                                                                                            Read more about the JavaScript used in this section:
                                                                                                            
 
 
 
 
                                                                                                            Another way to build UIs
                                                                                                            
@@ -157,7 +157,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd
 
 
                                                                                                            The vanilla JavaScript approach to building out new DOM elements in repetition was difficult to understand at a glance.  By contrast, the following block of code illustrates the way you might use Vue to describe our list of tasks:
                                                                                                            
 
-
                                                                                                            <ul>
+
                                                                                                            <ul>
   <li v-for="task in tasks" v-bind:key="task.id">
     <span>\{{task.name\}}</span>
     <button type="button">Delete</button>
@@ -168,7 +168,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd
 
 
                                                                                                            Thanks to Vue, we didn't have to write our own functions for building the UI; the framework will handle that for us in an optimized, efficient way. Our only role here was to describe to Vue what each item should look like. Developers who are familiar with Vue can join our project and quickly work out what is going on. Vue is not alone in this: using a framework improves team as well as individual efficiency.
                                                                                                            
 
-
                                                                                                            It's possible to do things similar to this in vanilla JavaScript. Template literal strings make it easy to write strings of HTML that represent what the final element would look like. That might be a useful idea for something as simple as our to-do list application, but it's not maintainable for large applications that manage thousands of records of data, and could render just as many unique elements in a user interface.
                                                                                                            
+
                                                                                                            It's possible to do things similar to this in vanilla JavaScript. Template literal strings make it easy to write strings of HTML that represent what the final element would look like. That might be a useful idea for something as simple as our to-do list application, but it's not maintainable for large applications that manage thousands of records of data, and could render just as many unique elements in a user interface.
                                                                                                            
 
 
                                                                                                            Other things frameworks give us
                                                                                                            
 
@@ -178,8 +178,8 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd
 
 
                                                                                                            Because each of the frameworks in this module have a large, active community, each framework's ecosystem provides tooling that Improves the developer experience. These tools make it easy to add things like testing (to ensure that your application behaves as it should) or linting (to ensure that your code is error-free and stylistically consistent).
                                                                                                            
 
-
                                                                                                            
-
                                                                                                            Note: If you want to find out more details about web tooling concepts, have a read of our Client-side tooling overview.
                                                                                                            
+
                                                                                                            
+
                                                                                                            Note : If you want to find out more details about web tooling concepts, have a read of our Client-side tooling overview.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Compartmentalization
                                                                                                            
@@ -220,7 +220,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd
 
 
                                                                                                            Accessibility on a framework-driven web
                                                                                                            
 
-
                                                                                                            Let's build on what we said in the previous section, and talk a bit more about accessibility. Making user interfaces accessible always requires some thought and effort, and frameworks can complicate that process. You often have to employ advanced framework APIs to access native browser features like ARIA live regions or focus management.
                                                                                                            
+
                                                                                                            Let's build on what we said in the previous section, and talk a bit more about accessibility. Making user interfaces accessible always requires some thought and effort, and frameworks can complicate that process. You often have to employ advanced framework APIs to access native browser features like ARIA live regions or focus management.
                                                                                                            
 
 
                                                                                                            In some cases, framework applications create accessibility barriers that do not exist for traditional websites. The biggest example of this is in client-side routing, as mentioned earlier.
                                                                                                            
 
@@ -283,8 +283,8 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd
  
                                                                                                            
  
   
                                                                                                            
    Prerequisites:Familiarity with the core HTML, CSS, and JavaScript languages.Familiarity with the core HTML, CSS, and JavaScript languages.
   
                                                                                                            
   
                                                                                                            
    Objective:
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            
-
                                                                                                            Note: DSLs we've described as "HTML-based" do not have official names. They are not really true DSLs, but they are non-standard HTML, so we believe they are worth highlighting.
                                                                                                            
+
                                                                                                            
+
                                                                                                            Note :: DSLs we've described as "HTML-based" do not have official names. They are not really true DSLs, but they are non-standard HTML, so we believe they are worth highlighting.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Citations for this table:
                                                                                                            
@@ -329,8 +329,8 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd
 
 
                                                                                                            All of the frameworks covered in this module support server-side rendering as well as client-side rendering. Check out Next.js for React, Nuxt.js for Vue (yes it is confusing, and no, these projects are not related!), FastBoot for Ember, and Angular Universal for Angular.
                                                                                                            
 
-
                                                                                                            
-
                                                                                                            Note: Some SSR solutions are written and maintained by the community, whereas some are "official" solutions provided by the framework's maintainer.
                                                                                                            
+
                                                                                                            
+
                                                                                                            Note : Some SSR solutions are written and maintained by the community, whereas some are "official" solutions provided by the framework's maintainer.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Static site generators
                                                                                                            
@@ -354,52 +354,52 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd
 
                                                                                                            In this module
                                                                                                            
 
 
diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.html
index b9fe78c7d9..4b4edd429a 100644
--- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.html
+++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.html
@@ -7,13 +7,13 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_f
 
 
                                                                                                            {{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
                                                                                                            
 
-
                                                                                                            Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level, and the differences between them.
                                                                                                            
+
                                                                                                            Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level, and the differences between them.
                                                                                                            
 
-
+
                                                                                                            
-   
+   
@@ -28,7 +28,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_f
 
 
                                                                                                            Angular apps often make heavy use of TypeScript. TypeScript is not concerned with the writing of user interfaces, but it is a domain-specific language, and has significant differences to vanilla JavaScript.
                                                                                                            
 
-
                                                                                                            DSLs can't be read by the browser directly; they must be transformed into JavaScript or HTML first. Transformation is an extra step in the development process, but framework tooling generally includes the required tools to handle this step, or can be adjusted to include this step. While it is possible to build framework apps without using these domain-specific languages, embracing them will streamline your development process and make it easier to find help from the communities around those frameworks.
                                                                                                            
+
                                                                                                            DSLs can't be read by the browser directly; they must be transformed into JavaScript or HTML first. Transformation is an extra step in the development process, but framework tooling generally includes the required tools to handle this step, or can be adjusted to include this step. While it is possible to build framework apps without using these domain-specific languages, embracing them will streamline your development process and make it easier to find help from the communities around those frameworks.
                                                                                                            JSX
                                                                                                            
 
@@ -36,25 +36,25 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_f
 
 
                                                                                                            The following shows a simple JSX example:
                                                                                                            
 
-
                                                                                                            const subject = "World";
+
                                                                                                            const subject = "World";
 const header = (
   <header>
     <h1>Hello, {subject}!</h1>
   </header>
 );
                                                                                                            
 
-
                                                                                                            This expression represents an HTML <header> element with a <h1> element inside. The curly braces around subject on line 4 tell the application to read the value of the subject constant and insert it into our <h1>.
                                                                                                            
+
                                                                                                            This expression represents an HTML <header> element with a <h1> element inside. The curly braces around subject on line 4 tell the application to read the value of the subject constant and insert it into our <h1>.
                                                                                                            
 
 
                                                                                                            When used with React, the JSX from the previous snippet would be compiled into this:
                                                                                                            
 
-
                                                                                                            var subject = "World";
+
                                                                                                            var subject = "World";
 var header = React.createElement("header", null,
   React.createElement("h1", null, "Hello, ", subject, "!")
 );
                                                                                                            
 
 
                                                                                                            When ultimately rendered by the browser, the above snippet will produce HTML that looks like this:
                                                                                                            
 
-
                                                                                                            <header>
+
                                                                                                            <header>
   <h1>Hello, World!</h1>
 </header>
                                                                                                            
 
@@ -66,19 +66,19 @@ var header = React.createElement("header", null,
 
 
                                                                                                            Given this Handlebars template:
                                                                                                            
 
-
                                                                                                            <header>
+
                                                                                                            <header>
   <h1>Hello, \{{subject}}!</h1>
 </header>
                                                                                                            
 
 
                                                                                                            And this data:
                                                                                                            
 
-
                                                                                                            {
+
                                                                                                            {
   subject: "World"
 }
                                                                                                            
 
 
                                                                                                            Handlebars will build HTML like this:
                                                                                                            
 
-
                                                                                                            <header>
+
                                                                                                            <header>
   <h1>Hello, World!</h1>
 </header>
                                                                                                            
 
@@ -88,13 +88,13 @@ var header = React.createElement("header", null,
 
 
                                                                                                            In JavaScript, that function could be written like this:
                                                                                                            
 
-
                                                                                                            function add(a, b) {
+
                                                                                                            function add(a, b) {
   return a + b;
 }
                                                                                                            
 
 
                                                                                                            This code might be trivial for someone accustomed to JavaScript, but it could still be clearer. JavaScript lets us use the + operator to concatenate strings together, so this function would technically still work if a and b were strings — it just might not give you the result you'd expect. What if we wanted to only allow numbers to be passed into this function? TypeScript makes that possible:
                                                                                                            
 
-
                                                                                                            function add(a: number, b: number) {
+
                                                                                                            function add(a: number, b: number) {
   return a + b;
 }
                                                                                                            
 
@@ -114,7 +114,7 @@ var header = React.createElement("header", null,
 
 
                                                                                                            A React representation of this AuthorCredit component might look something like this:
                                                                                                            
 
-
                                                                                                            function AuthorCredit(props) {
+
                                                                                                            function AuthorCredit(props) {
   return (
     <figure>
       <img src={props.src} alt={props.alt} />
@@ -125,15 +125,15 @@ var header = React.createElement("header", null,
 
 
                                                                                                            {props.src}, {props.alt}, and {props.byline} represent where our props will be inserted into the component. To render this component, we would write code like this in the place where we want it rendered (which will probably be inside another component):
                                                                                                            
 
-
                                                                                                            <AuthorCredit
+
                                                                                                            <AuthorCredit
   src="./assets/zelda.png"
   alt="Portrait of Zelda Schiff"
   byline="Zelda Schiff is editor-in-chief of the Library Times."
 />
                                                                                                            
 
-
                                                                                                            This will ultimately render the following <figure> element in the browser, with its structure as defined in the AuthorCredit component, and its content as defined in the props included on the AuthorCredit component call:
                                                                                                            
+
                                                                                                            This will ultimately render the following <figure> element in the browser, with its structure as defined in the AuthorCredit component, and its content as defined in the props included on the AuthorCredit component call:
                                                                                                            
 
-
                                                                                                            <figure>
+
                                                                                                            <figure>
   <img
     src="assets/zelda.png"
     alt="Portrait of Zelda Schiff"
@@ -149,7 +149,7 @@ var header = React.createElement("header", null,
 
 
                                                                                                            As an example, consider a button that counts how many times it has been clicked. This component should be responsible for tracking its own count state, and could be written like this:
                                                                                                            
 
-
                                                                                                            function CounterButton() {
+
                                                                                                            function CounterButton() {
   const [count] = useState(0);
   return (
     <button>Clicked {count} times</button>
@@ -158,7 +158,7 @@ var header = React.createElement("header", null,
 
 
                                                                                                            useState() is a React hook which, given an initial data value, will keep track of that value as it is updated. The code will be initially rendered like so in the browser:
                                                                                                            
 
-
                                                                                                            <button>Clicked 0 times</button>
                                                                                                            
+
                                                                                                            <button>Clicked 0 times</button>
                                                                                                            
 
 
                                                                                                            The useState() call keeps track of the count value in a robust way across the app, without you needing to write code to do that yourself.
                                                                                                            
 
@@ -166,9 +166,9 @@ var header = React.createElement("header", null,
 
 
                                                                                                            In order to be interactive, components need ways to respond to browser events, so our applications can respond to our users. Frameworks each provide their own syntax for listening to browser events, which reference the names of the equivalent native browser events.
                                                                                                            
 
-
                                                                                                            In React, listening for the click event requires a special property, onClick. Let’s update our CounterButton code from above to allow it to count clicks:
                                                                                                            
+
                                                                                                            In React, listening for the click event requires a special property, onClick. Let’s update our CounterButton code from above to allow it to count clicks:
                                                                                                            
 
-
                                                                                                            function CounterButton() {
+
                                                                                                            function CounterButton() {
   const [count, setCount] = useState(0);
   return (
     <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
@@ -183,7 +183,7 @@ var header = React.createElement("header", null,
 
 
                                                                                                            Handling dependencies
                                                                                                            
 
-
                                                                                                            All major frameworks provide mechanisms for handling dependencies — using components inside other components, sometimes with multiple hierarchy levels. As with other features, the exact mechanism will differ between frameworks, but the end result is the same. Components tend to import components into other components using the standard JavaScript module syntax, or at least something similar.
                                                                                                            
+
                                                                                                            All major frameworks provide mechanisms for handling dependencies — using components inside other components, sometimes with multiple hierarchy levels. As with other features, the exact mechanism will differ between frameworks, but the end result is the same. Components tend to import components into other components using the standard JavaScript module syntax, or at least something similar.
                                                                                                            
 
 
                                                                                                            Components in components
                                                                                                            
 
@@ -191,11 +191,11 @@ var header = React.createElement("header", null,
 
 
                                                                                                            For example, our AuthorCredit React component might be utilized inside an Article component. That means that Article would need to import AuthorCredit.
                                                                                                            
 
-
                                                                                                            import AuthorCredit from "./components/AuthorCredit";
                                                                                                            
+
                                                                                                            import AuthorCredit from "./components/AuthorCredit";
                                                                                                            
 
 
                                                                                                            Once that’s done, AuthorCredit could be used inside the Article component like this:
                                                                                                            
 
-
                                                                                                              ...
+
                                                                                                              ...
 
 <AuthorCredit />
 
@@ -207,7 +207,7 @@ var header = React.createElement("header", null,
 
 
                                                                                                            Let's say that the magazine site we're building is structured like this:
                                                                                                            
 
-
                                                                                                            <App>
+
                                                                                                            <App>
   <Home>
     <Article>
       <AuthorCredit {/* props */} />
@@ -247,7 +247,7 @@ var header = React.createElement("header", null,
 
 
                                                                                                            Routing
                                                                                                            
 
-
                                                                                                            As mentioned in the previous chapter, routing is an important part of the web experience. To avoid a broken experience in sufficiently complex apps with lots of views, each of the frameworks covered in this module provides a library (or more than one library) that helps developers implement client-side routing in their applications.
                                                                                                            
+
                                                                                                            As mentioned in the previous chapter, routing is an important part of the web experience. To avoid a broken experience in sufficiently complex apps with lots of views, each of the frameworks covered in this module provides a library (or more than one library) that helps developers implement client-side routing in their applications.
                                                                                                            
 
 
                                                                                                            Testing
                                                                                                            
 
@@ -259,7 +259,7 @@ var header = React.createElement("header", null,
 
 
                                                                                                            Here’s a quick test for our CounterButton written with the help of React Testing Library — it tests a number of things, such as the button's existence, and whether the button is displaying the correct text after being clicked 0, 1, and 2 times:
                                                                                                            
 
-
                                                                                                            import React from "react";
+
                                                                                                            import React from "react";
 import { render, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 
@@ -289,13 +289,13 @@ it("Increments the count when clicked", () => {
 
                                                                                                            At this point you should have more of an idea about the actual languages, features, and tools you'll be using as you create applications with frameworks. I'm sure you’re enthusiastic to get going and actually do some coding, and that's what you are going to do next! At this point you can choose which framework you'd like to start learning first:
                                                                                                            
 
 
 
-
                                                                                                            
-
                                                                                                            Note: We only have three framework tutorial series available now, but we hope to have more available in the future.
                                                                                                            
+
                                                                                                            
+
                                                                                                            Note : We only have three framework tutorial series available now, but we hope to have more available in the future.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            {{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
                                                                                                            
@@ -303,52 +303,52 @@ it("Increments the count when clicked", () => {
 
                                                                                                            In this module
                                                                                                            
 
 
diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html
index 75316fd64e..ff22108290 100644
--- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html
+++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html
@@ -17,14 +17,14 @@ translation_of: >-
 
 
                                                                                                            {{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
                                                                                                            
 
-
                                                                                                            In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.
                                                                                                            
+
                                                                                                            In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Prerequisites:Familiarity with the core HTML, CSS, and JavaScript languages.Familiarity with the core HTML, CSS, and JavaScript languages.
   
                                                                                                            
   
                                                                                                            
    Objective:
 
 
                                                                                                            
+
                                                                                                            
@@ -58,31 +58,31 @@ translation_of: >-
 
 
                                                                                                            React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of JSX syntax. JSX extends JavaScript's syntax so that HTML-like code can live alongside it. For example:
                                                                                                            
 
-
                                                                                                            const heading = <h1>Mozilla Developer Network</h1>;
                                                                                                            
+
                                                                                                            const heading = <h1>Mozilla Developer Network</h1>;
                                                                                                            
 
-
                                                                                                            This heading constant is known as a JSX expression. React can use it to render that <h1> tag in our app.
                                                                                                            
+
                                                                                                            This heading constant is known as a JSX expression. React can use it to render that <h1> tag in our app.
                                                                                                            
 
-
                                                                                                            Suppose we wanted to wrap our heading in a <header> tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:
                                                                                                            
+
                                                                                                            Suppose we wanted to wrap our heading in a <header> tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:
                                                                                                            
 
-
                                                                                                            const header = (
+
                                                                                                            const header = (
   <header>
     <h1>Mozilla Developer Network</h1>
   </header>
 );
                                                                                                            
 
-
                                                                                                            
-
                                                                                                            Note: The parentheses in the previous snippet aren't unique to JSX, and don’t have any effect on your application. They're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:
                                                                                                            
+
                                                                                                            
+
                                                                                                            Note : The parentheses in the previous snippet aren't unique to JSX, and don’t have any effect on your application. They're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:
                                                                                                            
 
-
                                                                                                            const header = <header>
+
                                                                                                            const header = <header>
     <h1>Mozilla Developer Network</h1>
 </header>
                                                                                                            
 
-
                                                                                                            However, this looks kind of awkward, because the <header> tag that starts the expression is not indented to the same position as its corresponding closing tag.
                                                                                                            
+
                                                                                                            However, this looks kind of awkward, because the <header> tag that starts the expression is not indented to the same position as its corresponding closing tag.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Of course, your browser can't read JSX without help. When compiled (using a tool like Babel or Parcel), our header expression would look like this:
                                                                                                            
 
-
                                                                                                            const header = React.createElement("header", null,
+
                                                                                                            const header = React.createElement("header", null,
   React.createElement("h1", null, "Mozilla Developer Network")
 );
                                                                                                            
 
@@ -96,15 +96,15 @@ translation_of: >-
 
 
                                                                                                            There are many ways to use React, but we're going to use the command-line interface (CLI) tool create-react-app, as mentioned earlier, which expedites the process of developing a React application by installing some packages and creating some files for you, handling the tooling described above.
                                                                                                            
 
-
                                                                                                            It's possible to add React to a website without create-react-app by copying some <script> elements into an HTML file, but the create-react-app CLI is a common starting point for React applications. Using it will allow you spend more time building your app, and less time fussing with setup.
                                                                                                            
+
                                                                                                            It's possible to add React to a website without create-react-app by copying some <script> elements into an HTML file, but the create-react-app CLI is a common starting point for React applications. Using it will allow you spend more time building your app, and less time fussing with setup.
                                                                                                            
 
 
                                                                                                            Requirements
                                                                                                            
 
 
                                                                                                            In order to use create-react-app, you need to have Node.js installed. It's recommended that you use the long-term support (LTS) version. Node includes npm (the node package manager), and npx (the node package runner).
                                                                                                            
 
-
                                                                                                            You may also use the Yarn package manager as an alternative, but we'll assume you are using npm in this set of tutorials. See Package management basics for more information on npm and yarn.
                                                                                                            
+
                                                                                                            You may also use the Yarn package manager as an alternative, but we'll assume you are using npm in this set of tutorials. See Package management basics for more information on npm and yarn.
                                                                                                            
 
-
                                                                                                            If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. Gitbash (which comes as part of the git for Windows toolset) or Windows Subsystem for Linux (WSL) are both suitable. See Command line crash course for more information on these, and on terminal commands in general.
                                                                                                            
+
                                                                                                            If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. Gitbash (which comes as part of the git for Windows toolset) or Windows Subsystem for Linux (WSL) are both suitable. See Command line crash course for more information on these, and on terminal commands in general.
                                                                                                            
 
 
                                                                                                            Also bear in mind that React and ReactDOM produce apps that only work on a fairly modern set of browsers — IE9+ by way of some polyfills. It is recommended that you use a modern browser like Firefox, Safari, or Chrome when working through these tutorials.
                                                                                                            
 
@@ -120,7 +120,7 @@ translation_of: >-
 
 
                                                                                                            create-react-app takes one argument: the name you'd like to give your app. create-react-app uses this name to make a new directory, then creates the necessary files inside it. Make sure you cd to the place you'd like your app to live on your hard drive, then run the following in your terminal:
                                                                                                            
 
-
                                                                                                            npx create-react-app moz-todo-react
                                                                                                            
+
                                                                                                            npx create-react-app moz-todo-react
                                                                                                            
 
 
                                                                                                            This creates a moz-todo-react directory, and does several things inside it:
                                                                                                            
 
@@ -131,23 +131,23 @@ translation_of: >-
  
                                                                                                          • Initializes the directory as a git repository, if you have git installed on your computer.
                                                                                                            • 
 
 
-
                                                                                                            
-
                                                                                                            Note: if you have the yarn package manager installed, create-react-app will default to using it instead of npm. If you have both package managers installed and explicitly want to use NPM, you can add the flag --use-npm when you run create-react-app:
                                                                                                            
+
                                                                                                            
+
                                                                                                            Note : if you have the yarn package manager installed, create-react-app will default to using it instead of npm. If you have both package managers installed and explicitly want to use NPM, you can add the flag --use-npm when you run create-react-app:
                                                                                                            
 
-
                                                                                                            npx create-react-app moz-todo-react --use-npm
                                                                                                            
+
                                                                                                            npx create-react-app moz-todo-react --use-npm
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            create-react-app will display a number of messages in your terminal while it works; this is normal! This might take a few minutes, so now might be a good time to go make a cup of tea.
                                                                                                            
 
 
                                                                                                            When the process is complete, cd into the moz-todo-react directory and run the command npm start. The scripts installed by create-react-app will start being served at a local server at localhost:3000, and open the app in a new browser tab. Your browser will display something like this:
                                                                                                            
 
-
                                                                                                            Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application
                                                                                                            
+
                                                                                                            Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application
                                                                                                            
 
 
                                                                                                            Application structure
                                                                                                            
 
 
                                                                                                            create-react-app gives us everything we need to develop a React application. Its initial file structure looks like this:
                                                                                                            
 
-
                                                                                                            moz-todo-react
+
                                                                                                            moz-todo-react
 ├── README.md
 ├── node_modules
 ├── package.json
@@ -168,11 +168,11 @@ translation_of: >-
 
 
                                                                                                            The src directory is where we'll spend most of our time, as it's where the source code for our application lives.
                                                                                                            
 
-
                                                                                                            The public directory contains files that will be read by your browser while you're developing the app; the most important of these is index.html. React injects your code into this file so that your browser can run it. There's some other markup that helps create-react-app function, so take care not to edit it unless you know what you're doing. You very much should change the text inside the <title> element in this file to reflect the title of your application. Accurate page titles are important for accessibility!
                                                                                                            
+
                                                                                                            The public directory contains files that will be read by your browser while you're developing the app; the most important of these is index.html. React injects your code into this file so that your browser can run it. There's some other markup that helps create-react-app function, so take care not to edit it unless you know what you're doing. You very much should change the text inside the <title> element in this file to reflect the title of your application. Accurate page titles are important for accessibility!
                                                                                                            
 
-
                                                                                                            The public directory will also be published when you build and deploy a production version of your app. We won’t cover deployment in this tutorial, but you should be able to use a similar solution to that described in our Deploying our app tutorial.
                                                                                                            
+
                                                                                                            The public directory will also be published when you build and deploy a production version of your app. We won’t cover deployment in this tutorial, but you should be able to use a similar solution to that described in our Deploying our app tutorial.
                                                                                                            
 
-
                                                                                                            The package.json file contains information about our project that Node.js/npm uses to keep it organized. This file is not unique to React applications; create-react-app merely populates it. You don't need to understand this file at all to complete this tutorial, however, if you'd like to learn more about it, you can read What is the file `package.json`? on NodeJS.org; we also talk about it in our Package management basics tutorial.
                                                                                                            
+
                                                                                                            The package.json file contains information about our project that Node.js/npm uses to keep it organized. This file is not unique to React applications; create-react-app merely populates it. You don't need to understand this file at all to complete this tutorial, however, if you'd like to learn more about it, you can read What is the file `package.json`? on NodeJS.org; we also talk about it in our Package management basics tutorial.
                                                                                                            
 
 
                                                                                                            Exploring our first React component — <App/>
                                                                                                            
 
@@ -180,7 +180,7 @@ translation_of: >-
 
 
                                                                                                            Let's open src/App.js, since our browser is prompting us to edit it. This file contains our first component, App, and a few other lines of code:
                                                                                                            
 
-
                                                                                                            import React from 'react';
+
                                                                                                            import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
@@ -206,13 +206,13 @@ function App() {
 }
 export default App;
                                                                                                            
 
-
                                                                                                            The App.js file consists of three main parts: some import statements at the top, the App component in the middle, and an export statement at the bottom. Most React components follow this pattern.
                                                                                                            
+
                                                                                                            The App.js file consists of three main parts: some import statements at the top, the App component in the middle, and an export statement at the bottom. Most React components follow this pattern.
                                                                                                            
 
 
                                                                                                            Import statements
                                                                                                            
 
 
                                                                                                            The import statements at the top of the file allow App.js to use code that has been defined elsewhere. Let's look at these statements more closely.
                                                                                                            
 
-
                                                                                                            import React from 'react';
+
                                                                                                            import React from 'react';
 import logo from './logo.svg';
 import './App.css';
                                                                                                            
 
@@ -230,7 +230,7 @@ import './App.css';
                                                                                                            
 
 
                                                                                                            Let's look at App more closely.
                                                                                                            
 
-
                                                                                                            function App() {
+
                                                                                                            function App() {
   return (
     <div className="App">
       <header className="App-header">
@@ -253,13 +253,13 @@ import './App.css';
                                                                                                            
 
 
                                                                                                            The App function returns a JSX expression. This expression defines what your browser ultimately renders to the DOM.
                                                                                                            
 
-
                                                                                                            Some elements in the expression have attributes, which are written just like in HTML, following a pattern of attribute="value". On line 3, the opening <div> tag has a className attribute. This is the same as the class attribute in HTML, but because JSX is JavaScript, we can't use the word class – it's reserved, meaning JavaScript already uses it for a specific purpose and it would cause problems here in our code. A few other HTML attributes are written differently in JSX than they are in HTML too, for the same kind of reason. We'll cover them as we encounter them.
                                                                                                            
+
                                                                                                            Some elements in the expression have attributes, which are written just like in HTML, following a pattern of attribute="value". On line 3, the opening <div> tag has a className attribute. This is the same as the class attribute in HTML, but because JSX is JavaScript, we can't use the word class – it's reserved, meaning JavaScript already uses it for a specific purpose and it would cause problems here in our code. A few other HTML attributes are written differently in JSX than they are in HTML too, for the same kind of reason. We'll cover them as we encounter them.
                                                                                                            
 
-
                                                                                                            Take a moment to change the <p> tag on line 6 so that it reads "Hello, world!", then save your file. You'll notice that this change is immediately rendered in the development server running at http://localhost:3000 in your browser. Now delete the <a> tag and save; the "Learn React" link will be gone.
                                                                                                            
+
                                                                                                            Take a moment to change the <p> tag on line 6 so that it reads "Hello, world!", then save your file. You'll notice that this change is immediately rendered in the development server running at http://localhost:3000 in your browser. Now delete the <a> tag and save; the "Learn React" link will be gone.
                                                                                                            
 
 
                                                                                                            Your App component should now look like this:
                                                                                                            
 
-
                                                                                                            function App() {
+
                                                                                                            function App() {
   return (
     <div className="App">
       <header className="App-header">
@@ -280,7 +280,7 @@ import './App.css';
                                                                                                            
 
 
                                                                                                            Let’s open src/index.js, because that's where the App component is being used. This file is the entry point for our app, and it initially looks like this:
                                                                                                            
 
-
                                                                                                            import React from 'react';
+
                                                                                                            import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
@@ -304,15 +304,15 @@ serviceWorker.unregister();
                                                                                                            
 
 
                                                                                                            All of this tells React that we want to render our React application with the App component as the root, or first component.
                                                                                                            
 
-
                                                                                                            
-
                                                                                                            Note: In JSX, React components and HTML elements must have closing slashes. Writing just <App> or just <img> will cause an error.
                                                                                                            
+
                                                                                                            
+
                                                                                                            Note :: In JSX, React components and HTML elements must have closing slashes. Writing just <App> or just <img> will cause an error.
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            Service workers are interesting pieces of code that help application performance and allow features of your web applications to work offline, but they’re not in scope for this article. You can delete line 5, as well as lines 9 through 12.
                                                                                                            
+
                                                                                                            Service workers are interesting pieces of code that help application performance and allow features of your web applications to work offline, but they’re not in scope for this article. You can delete line 5, as well as lines 9 through 12.
                                                                                                            
 
 
                                                                                                            Your final index.js file should look like this:
                                                                                                            
 
-
                                                                                                            import React from 'react';
+
                                                                                                            import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
@@ -327,13 +327,13 @@ ReactDOM.render(<App />, document.getElementById('root'));
                                                                                                            
 
 
                                                                                                            Back in App.js, let’s focus on line 9:
                                                                                                            
 
-
                                                                                                            <img src={logo} className="App-logo" alt="logo" />
                                                                                                            
+
                                                                                                            <img src={logo} className="App-logo" alt="logo" />
                                                                                                            
 
 
                                                                                                            Here, the <img /> tag's src attribute value is in curly braces. This is how JSX recognizes variables. React will see {logo}, know you are referring to the logo import on line 2 of our app, then retrieve the logo file and render it.
                                                                                                            
 
 
                                                                                                            Let's try making a variable of our own. Before the return statement of App, add const subject = 'React';. Your App component should now look like this:
                                                                                                            
 
-
                                                                                                            function App() {
+
                                                                                                            function App() {
   const subject = "React";
   return (
     <div className="App">
@@ -349,7 +349,7 @@ ReactDOM.render(<App />, document.getElementById('root'));
                                                                                                            
 
 
                                                                                                            Change line 8 to use our subject variable instead of the word "world", like this:
                                                                                                            
 
-
                                                                                                            function App() {
+
                                                                                                            function App() {
   const subject = "React";
   return (
     <div className="App">
@@ -373,11 +373,11 @@ ReactDOM.render(<App />, document.getElementById('root'));
                                                                                                            
 
 
                                                                                                            Add a prop of subject to the <App/> component call, with a value of Clarice. When you are done, your code should look something like this:
                                                                                                            
 
-
                                                                                                            ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));
                                                                                                            
+
                                                                                                            ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));
                                                                                                            
 
 
                                                                                                            Back in App.js, let's revisit the App function itself, which reads like this (with the return statement shortened for brevity):
                                                                                                            
 
-
                                                                                                            function App() {
+
                                                                                                            function App() {
   const subject = "React";
   return (
     // return statement
@@ -386,7 +386,7 @@ ReactDOM.render(<App />, document.getElementById('root'));
                                                                                                            
 
 
                                                                                                            Change the signature of the App function so that it accepts props as a parameter, and delete the subject const. Just like any other function parameter, you can put props in a console.log() to print it to your browser's console. Go ahead and do that before the return statement, like so:
                                                                                                            
 
-
                                                                                                            function App(props) {
+
                                                                                                            function App(props) {
   console.log(props);
   return (
     // return statement
@@ -395,13 +395,13 @@ ReactDOM.render(<App />, document.getElementById('root'));
                                                                                                            
 
 
                                                                                                            Save your file and check your browser's JavaScript console. You should see something like this logged:
                                                                                                            
 
-
                                                                                                            Object { subject: "Clarice" }
                                                                                                            
+
                                                                                                            Object { subject: "Clarice" }
                                                                                                            
 
 
                                                                                                            The object property subject corresponds to the subject prop we added to our <App /> component call, and the string Clarice corresponds to its value. Component props in React are always collected into objects in this fashion.
                                                                                                            
 
 
                                                                                                            Now that subject is one of our props, let's utilize it in App.js. Change the subject constant so that, instead of defining it as the string React, you are reading the value of props.subject. You can also delete your console.log() if you want.
                                                                                                            
 
-
                                                                                                            function App(props) {
+
                                                                                                            function App(props) {
   const subject = props.subject;
   return (
     // return statement
@@ -429,40 +429,40 @@ ReactDOM.render(<App />, document.getElementById('root'));
                                                                                                            
 
                                                                                                            In this module
                                                                                                            
 
 
diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html
index a93b2a044c..0ea2852a83 100644
--- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html
+++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html
@@ -11,18 +11,18 @@ translation_of: >-
 
 
                                                                                                            {{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
                                                                                                            
 
-
                                                                                                            Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic App component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.
                                                                                                            
+
                                                                                                            Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic App component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.
                                                                                                            
 
-
                                                                                                            
-
                                                                                                            Note: If you need to check your code against our version, you can find a finished version of the sample React app code in our todo-react repository. For a running live version, see https://mdn.github.io/todo-react-build/.
                                                                                                            
+
                                                                                                            
+
                                                                                                            Note : If you need to check your code against our version, you can find a finished version of the sample React app code in our todo-react repository. For a running live version, see https://mdn.github.io/todo-react-build/.
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Prerequisites:
    
-    
                                                                                                            Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line.
                                                                                                            
+    
                                                                                                            Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line.
                                                                                                            
 
     
                                                                                                            React uses an HTML-in-JavaScript syntax called JSX (JavaScript and XML). Familiarity with both HTML and JavaScript will help you to learn JSX, and better identify whether bugs in your application are related to JavaScript or to the more specific domain of React.
                                                                                                            
    
                                                                                                            
+
                                                                                                            
@@ -60,7 +60,7 @@ translation_of: >-
 
 
                                                                                                            Then, copy and paste the following commands into your terminal to delete some unneeded files. Make sure you’re starting in the app's root directory!
                                                                                                            
 
-
                                                                                                            # Move into the src directory of your project
+
                                                                                                            # Move into the src directory of your project
 cd src
 # Delete a few files
 rm -- App.test.js App.css logo.svg serviceWorker.js setupTests.js
@@ -82,7 +82,7 @@ cd ..
                                                                                                            
 
 
                                                                                                            Copy the following snippet to your clipboard, then paste it into App.js so that it replaces the existing App() function:
                                                                                                            
 
-
                                                                                                            function App(props) {
+
                                                                                                            function App(props) {
   return (
     <div className="todoapp stack-large">
       <h1>TodoMatic</h1>
@@ -181,21 +181,21 @@ cd ..
                                                                                                            
   );
 }
                                                                                                            
 
-
                                                                                                            Now open public/index.html and change the <title> element’s text to TodoMatic. This way, it will match the <h1> at the top of our app.
                                                                                                            
+
                                                                                                            Now open public/index.html and change the <title> element’s text to TodoMatic. This way, it will match the <h1> at the top of our app.
                                                                                                            
 
-
                                                                                                            <title>TodoMatic</title>
                                                                                                            
+
                                                                                                            <title>TodoMatic</title>
                                                                                                            
 
 
                                                                                                            When your browser refreshes, you should see something like this:
                                                                                                            
 
-
                                                                                                            todo-matic app, unstyled, showing a jumbled mess of labels, inputs, and buttons
                                                                                                            
+
                                                                                                            todo-matic app, unstyled, showing a jumbled mess of labels, inputs, and buttons
                                                                                                            
 
 
                                                                                                            It's ugly, and doesn’t function yet, but that's okay — we'll style it in a moment. First, consider the JSX we have, and how it corresponds to our user stories:
                                                                                                            
 
 
                                                                                                              
- 
                                                                                                            • We have a <form> element, with an <input type="text"> for writing out a new task, and a button to submit the form.
                                                                                                              • 
+ 
                                                                                                            • We have a <form> element, with an <input type="text"> for writing out a new task, and a button to submit the form.
                                                                                                              • 
  
                                                                                                            • We have an array of buttons that will be used to filter our tasks.
                                                                                                              • 
  
                                                                                                            • We have a heading that tells us how many tasks remain.
                                                                                                              • 
- 
                                                                                                            • We have our 3 tasks, arranged in an un-ordered list. Each task is a list item (<li>), and has buttons to edit and delete it and a checkbox to check it off as done.
                                                                                                              • 
+ 
                                                                                                            • We have our 3 tasks, arranged in an un-ordered list. Each task is a list item (<li>), and has buttons to edit and delete it and a checkbox to check it off as done.
                                                                                                              • 
 
                                                                                                            
 
 
                                                                                                            The form will allow us to make tasks; the buttons will let us filter them; the heading and list are our way to read them. The UI for editing a task is conspicuously absent for now. That's okay – we'll write that later.
                                                                                                            
@@ -204,7 +204,7 @@ cd ..
                                                                                                            You may notice some unusual attributes here. For example:
                                                                                                            
 
-
                                                                                                            <button type="button" className="btn toggle-btn" aria-pressed="true">
+
                                                                                                            <button type="button" className="btn toggle-btn" aria-pressed="true">
   <span className="visually-hidden">Show </span>
   <span>all</span>
   <span className="visually-hidden"> tasks</span>
@@ -214,9 +214,9 @@ cd ..
                                                                                                            
 
 
                                                                                                            The class visually-hidden has no effect yet, because we have not included any CSS. Once we have put our styles in place, though, any element with this class will be hidden from sighted users and still available to screen reader users — this is because these words are not needed by sighted users; they are there to provide more information about what the button does for screenreader users that do not have the extra visual context to help them.
                                                                                                            
 
-
                                                                                                            Further down, you can find our <ul> element:
                                                                                                            
+
                                                                                                            Further down, you can find our <ul> element:
                                                                                                            
 
-
                                                                                                            <ul
+
                                                                                                            <ul
   role="list"
   className="todo-list stack-large stack-exception"
   aria-labelledby="list-heading"
@@ -228,7 +228,7 @@ cd ..
                                                                                                            
 
 
                                                                                                            Finally, the labels and inputs in our list items have some attributes unique to JSX:
                                                                                                            
 
-
                                                                                                            <input id="todo-0" type="checkbox" defaultChecked={true} />
+
                                                                                                            <input id="todo-0" type="checkbox" defaultChecked={true} />
 <label className="todo-label" htmlFor="todo-0">
   Eat
 </label>
                                                                                                            
@@ -248,7 +248,7 @@ cd ..
                                                                                                            
 
 
                                                                                                            Paste the following CSS code into src/index.css so that it replaces what's currently there:
                                                                                                            
 
-
                                                                                                            /* RESETS */
+
                                                                                                            /* RESETS */
 *,
 *::before,
 *::after {
@@ -552,52 +552,52 @@ body {
 
                                                                                                            In this module
                                                                                                            
 
 
diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html
index 71718ed008..b2b0040f91 100644
--- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html
+++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html
@@ -9,14 +9,14 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge
 
                                                                                                            {{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
                                                                                                            
 
 
-
                                                                                                            Présentons Maintenant Vue, le troisième de nos cadres. Dans cet article, nous allons examiner un peu de fond Vue, apprendre à l’installer et créer un nouveau projet, étudier la structure de haut niveau de l’ensemble du projet et un composant individuel, voir comment exécuter le projet localement, et le préparer à commencer à construire notre exemple.
                                                                                                            
+
                                                                                                            Présentons Maintenant Vue, le troisième de nos cadres. Dans cet article, nous allons examiner un peu de fond Vue, apprendre à l’installer et créer un nouveau projet, étudier la structure de haut niveau de l’ensemble du projet et un composant individuel, voir comment exécuter le projet localement, et le préparer à commencer à construire notre exemple.
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Prerequisites:
    
-    
                                                                                                            Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line.
                                                                                                            
+    
                                                                                                            Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line.
                                                                                                            
                                                                                                                		
   
                                                                                                            
   
                                                                                                            
 
 
                                                                                                            
+
                                                                                                            
@@ -30,7 +30,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge
 
 
                                                                                                            Une Vue plus claire
                                                                                                            
 
-
                                                                                                            Vue est un cadre JavaScript moderne qui fournit des installations utiles pour une amélioration progressive - contrairement à beaucoup d’autres cadres, vous pouvez utiliser Vue pour améliorer html existant. Cela vous permet d’utiliser Vue comme un remplacement de drop-in pour une bibliothèque comme JQuery.
                                                                                                            
+
                                                                                                            Vue est un cadre JavaScript moderne qui fournit des installations utiles pour une amélioration progressive - contrairement à beaucoup d’autres cadres, vous pouvez utiliser Vue pour améliorer html existant. Cela vous permet d’utiliser Vue comme un remplacement de drop-in pour une bibliothèque comme JQuery.
                                                                                                            Cela étant dit, vous pouvez également utiliser Vue pour écrire des applications à page unique entières (SPA). Cela vous permet de créer un balisage géré entièrement par Vue, ce qui peut améliorer l’expérience et les performances des développeurs lors de la gestion d’applications complexes. Il vous permet également de profiter des bibliothèques pour le routage côté client et la gestion de l’État lorsque vous en avez besoin. En outre, Vue adopte une approche « intermédiaire » pour l’outillage comme le routage côté client et la gestion de l’État. Bien que l’équipe de base de Vue gère des bibliothèques suggérées pour ces fonctions, elles ne sont pas directement regroupées dans Vue. Cela vous permet de sélectionner une bibliothèque de routage/gestion d’état différente si elle correspond mieux à votre application.
                                                                                                            
 
@@ -41,18 +41,18 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge
 
 
                                                                                                            Installation
                                                                                                            
 
-
                                                                                                            Pour utiliser Vue dans un site existant, vous pouvez déposer l’un des éléments suivants sur une page. Cela vous permet de commencer à utiliser Vue sur les sites existants, c’est pourquoi Vue se targue d’être un cadre progressif. Il s’agit d’une excellente option lors de la migration d’un projet existant à l’aide d’une bibliothèque comme JQuery à Vue. Avec cette méthode, vous pouvez utiliser un grand nombre des fonctionnalités de base de Vue, telles que les attributs, les composants personnalisés et la gestion des données.<script>
                                                                                                            
+
                                                                                                            Pour utiliser Vue dans un site existant, vous pouvez déposer l’un des éléments suivants sur une page. Cela vous permet de commencer à utiliser Vue sur les sites existants, c’est pourquoi Vue se targue d’être un cadre progressif. Il s’agit d’une excellente option lors de la migration d’un projet existant à l’aide d’une bibliothèque comme JQuery à Vue. Avec cette méthode, vous pouvez utiliser un grand nombre des fonctionnalités de base de Vue, telles que les attributs, les composants personnalisés et la gestion des données.<script>
                                                                                                              
  
                                                                                                            • 
   
                                                                                                              Script de développement (Non optimisé, mais inclut les avertissements de console. Idéal pour le développement
                                                                                                              
 
-  
                                                                                                              <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
                                                                                                              
+  
                                                                                                              <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
                                                                                                              
  
                                                                                                              • 
  
                                                                                                            • 
   
                                                                                                              Production Script (Optimized version, minimal console warnings. It is recommended that you specify a version number when including Vue on your site so that any framework updates do not break your live site without you knowing.)
                                                                                                              
 
-  
                                                                                                              <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
                                                                                                              
+  
                                                                                                              <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
                                                                                                              
  
                                                                                                              • 
 
                                                                                                            
 
@@ -63,19 +63,19 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge
  
                                                                                                          • npm or yarn.
                                                                                                            • 
 
-
                                                                                                            
-
                                                                                                            Note: If you don't have the above installed, find out more about installing npm and Node.js here.
                                                                                                            
+
                                                                                                            
+
                                                                                                            Note : If you don't have the above installed, find out more about installing npm and Node.js here.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            To install the CLI, run the following command in your terminal:
                                                                                                            
 
-
                                                                                                            npm install --global @vue/cli
                                                                                                            
+
                                                                                                            npm install --global @vue/cli
                                                                                                            
 
 
                                                                                                            Or if you'd prefer to use yarn:
                                                                                                            
 
-
                                                                                                            yarn global add @vue/cli
                                                                                                            
+
                                                                                                            yarn global add @vue/cli
                                                                                                            
 
-
                                                                                                            Once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run . The CLI will then give you a list of project configurations you can use. There are a few preset ones, and you can make your own. These options let you configure things like TypeScript, linting, vue-router, testing, and more.vue create <project-name>
                                                                                                            
+
                                                                                                            Once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run . The CLI will then give you a list of project configurations you can use. There are a few preset ones, and you can make your own. These options let you configure things like TypeScript, linting, vue-router, testing, and more.vue create <project-name>
                                                                                                            
 
 
                                                                                                            We’ll look at using this below.
                                                                                                            
 
@@ -84,21 +84,21 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge
 
                                                                                                            To explore various features of Vue, we will be building up a sample todo list app. We'll begin by using the Vue CLI to create a new app framework to build our app into. Follow the steps below:
                                                                                                            
 
 
                                                                                                              
- 
                                                                                                            1. In terminal, to where you'd like to create your sample app, then run .cdvue create moz-todo-vue
                                                                                                              2. 
- 
                                                                                                            2. Use the arrow keys and to select the "Manually select features" option.Enter
                                                                                                              3. 
- 
                                                                                                            3. The first menu you’ll be presented with allows you to choose which features you want to include in your project. Make sure that "Babel" and "Linter / Formatter" are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press to proceed.Enter
                                                                                                              4. 
- 
                                                                                                            4. Next you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit again. This will help us catch common errors, but not be overly opinionated.Enter
                                                                                                              5. 
- 
                                                                                                            5. Next you are asked to configure what kind of automated linting we want. Select "Lint on save". This will check for errors when we save a file inside the project. Hit to continue.Enter
                                                                                                              6. 
- 
                                                                                                            6. Now, you will select how we want your config files to be managed. "In dedicated config files" will put your config settings for things like ESLint into their own, dedicated files. The other option, "In package.json", will put all of your config settings into the app's file. Select "In dedicated config files" and push .package.jsonEnter
                                                                                                              7. 
- 
                                                                                                            7. Finally, you are asked if you want to save this as a preset for future options. This is entirely up to you. If you like these settings over the existing presets and want to use them again, type , otherwise type .yn
                                                                                                              8. 
+ 
                                                                                                            8. In terminal, to where you'd like to create your sample app, then run .cdvue create moz-todo-vue
                                                                                                              9. 
+ 
                                                                                                            9. Use the arrow keys and to select the "Manually select features" option.Enter
                                                                                                              10. 
+ 
                                                                                                            10. The first menu you’ll be presented with allows you to choose which features you want to include in your project. Make sure that "Babel" and "Linter / Formatter" are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press to proceed.Enter
                                                                                                              11. 
+ 
                                                                                                            11. Next you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit again. This will help us catch common errors, but not be overly opinionated.Enter
                                                                                                              12. 
+ 
                                                                                                            12. Next you are asked to configure what kind of automated linting we want. Select "Lint on save". This will check for errors when we save a file inside the project. Hit to continue.Enter
                                                                                                              13. 
+ 
                                                                                                            13. Now, you will select how we want your config files to be managed. "In dedicated config files" will put your config settings for things like ESLint into their own, dedicated files. The other option, "In package.json", will put all of your config settings into the app's file. Select "In dedicated config files" and push .package.jsonEnter
                                                                                                              14. 
+ 
                                                                                                            14. Finally, you are asked if you want to save this as a preset for future options. This is entirely up to you. If you like these settings over the existing presets and want to use them again, type , otherwise type .yn
                                                                                                              15. 
 
                                                                                                            
 
 
                                                                                                            The CLI will now begin scaffolding out your project, and installing all of your dependencies.
                                                                                                            
 
-
                                                                                                            If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag , when you run .  So if you wanted to create the project with npm and you'd previously chosen yarn, you’d run .--packageManager=<package-manager>vue createmoz-todo-vuevue create moz-todo-vue --packageManager=npm
                                                                                                            
+
                                                                                                            If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag , when you run .  So if you wanted to create the project with npm and you'd previously chosen yarn, you’d run .--packageManager=<package-manager>vue createmoz-todo-vuevue create moz-todo-vue --packageManager=npm
                                                                                                            
 
-
                                                                                                            
-
                                                                                                            Note: We've not gone over all of the options here, but you can find more information on the CLI in the Vue docs.
                                                                                                            
+
                                                                                                            
+
                                                                                                            Note : We've not gone over all of the options here, but you can find more information on the CLI in the Vue docs.
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Project structure
                                                                                                            
@@ -106,56 +106,57 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge
 
                                                                                                            If everything went successfully, the CLI should have created a series of files and directories for your project. The most significant ones are as follows:
                                                                                                            
 
 
                                                                                                              
- 
                                                                                                            • .eslintrc.js: This is a config file for eslint. You can use this to manage your linting rules.
                                                                                                              • 
- 
                                                                                                            • babel.config.js: This is the config file for Babel, which transforms modern JavaScript features being used in development code into older syntax that is more cross-browser compatible in production code. You can register additional babel plugins in this file.
                                                                                                              • 
- 
                                                                                                            • .browserslistrc: This is a config for Browserslist. You can use this to control which browsers your tooling optimizes for.
                                                                                                              • 
- 
                                                                                                            • public: This directory contains static assets that are published, but not processed by Webpack during build (with one exception; gets some processing).index.html
+ 
                                                                                                            • .eslintrc.js: This is a config file for eslint. You can use this to manage your linting rules.
                                                                                                              • 
+ 
                                                                                                            • babel.config.js: This is the config file for Babel, which transforms modern JavaScript features being used in development code into older syntax that is more cross-browser compatible in production code. You can register additional babel plugins in this file.
                                                                                                              • 
+ 
                                                                                                            • .browserslistrc: This is a config for Browserslist. You can use this to control which browsers your tooling optimizes for.
                                                                                                              • 
+ 
                                                                                                            • public: This directory contains static assets that are published, but not processed by Webpack during build (with one exception; gets some processing).index.html
   
                                                                                                                
-   
                                                                                                              • favicon.ico: This is the favicon for your app. Currently, it's the Vue logo.
                                                                                                                • 
-   
                                                                                                              • index.html: This is the template for your app. Your Vue app is run from this HTML page, and you can use lodash template syntax to interpolate values into it.
-    
                                                                                                                Note: this is not the template for managing the layout of your application — this template is for managing static HTML that sits outside of your Vue app. Editing this file typically only occurs in advanced use cases.
                                                                                                                
+   
                                                                                                              • favicon.ico: This is the favicon for your app. Currently, it's the Vue logo.
                                                                                                                • 
+   
                                                                                                              • index.html: This is the template for your app. Your Vue app is run from this HTML page, and you can use lodash template syntax to interpolate values into it.
+    
                                                                                                                
+      
                                                                                                                Note : this is not the template for managing the layout of your application — this template is for managing static HTML that sits outside of your Vue app. Editing this file typically only occurs in advanced use cases.
                                                                                                                
    
                                                                                                                • 
   
                                                                                                              
  
                                                                                                              • 
- 
                                                                                                            • src: This directory contains the core of your Vue app.
+ 
                                                                                                            • src: This directory contains the core of your Vue app.
   
                                                                                                                
-   
                                                                                                              • main.js: this is the entry point to your application. Currently, this file initializes your Vue application and signifies which HTML element in the file your app should be attached to. This file is often where you register global components or additional Vue libraries.index.html
                                                                                                                • 
-   
                                                                                                              • App.vue: this is the top-level component in your Vue app. See below for more explanation of Vue components.
                                                                                                                • 
-   
                                                                                                              • components: this directory is where you keep your components. Currently it just has one example component.
                                                                                                                • 
-   
                                                                                                              • assets: This directory is for storing static assets like CSS and images. Because these files are in the source directory, they can be processed by Webpack. This means you can use pre-processors like Sass/SCSS or Stylus.
                                                                                                                • 
+   
                                                                                                              • main.js: this is the entry point to your application. Currently, this file initializes your Vue application and signifies which HTML element in the file your app should be attached to. This file is often where you register global components or additional Vue libraries.index.html
                                                                                                                • 
+   
                                                                                                              • App.vue: this is the top-level component in your Vue app. See below for more explanation of Vue components.
                                                                                                                • 
+   
                                                                                                              • components: this directory is where you keep your components. Currently it just has one example component.
                                                                                                                • 
+   
                                                                                                              • assets: This directory is for storing static assets like CSS and images. Because these files are in the source directory, they can be processed by Webpack. This means you can use pre-processors like Sass/SCSS or Stylus.
                                                                                                                • 
   
                                                                                                              
  
                                                                                                              • 
 
                                                                                                            
 
-
                                                                                                            
-
                                                                                                            Note: Depending on the options you select when creating a new project, there might be other directories present (for example, if you choose a router, you will also have a directory).views
                                                                                                            
+
                                                                                                            
+
                                                                                                            Note : Depending on the options you select when creating a new project, there might be other directories present (for example, if you choose a router, you will also have a directory).views
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            .vue files (single file components)
                                                                                                            
 
 
                                                                                                            Like in many front-end frameworks, components are a central part of building apps in Vue. These components let you break a large application into discrete building blocks that can be created and managed separately, and transfer data between each other as required. These small blocks can help you reason about and test your code.
                                                                                                            
 
-
                                                                                                            While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using Single File Components, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in . These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components..vue
                                                                                                            
+
                                                                                                            While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using Single File Components, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in . These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components..vue
                                                                                                            
 
-
                                                                                                            As a bonus, projects created with the Vue CLI are configured to use files with Webpack out of the box. In fact, if you look inside the folder in the project we created with the CLI, you'll see your first file: ..vuesrc.vueApp.vue
                                                                                                            
+
                                                                                                            As a bonus, projects created with the Vue CLI are configured to use files with Webpack out of the box. In fact, if you look inside the folder in the project we created with the CLI, you'll see your first file: ..vuesrc.vueApp.vue
                                                                                                            
 
 
                                                                                                            Let's explore this now.
                                                                                                            
 
 
                                                                                                            App.vue
                                                                                                            
 
-
                                                                                                            Open your file — you’ll see that it has three parts: , , and , which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.App.vue<template><script><style>
                                                                                                            
+
                                                                                                            Open your file — you’ll see that it has three parts: , , and , which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.App.vue<template><script><style>
                                                                                                            
 
-
                                                                                                            <template> contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.
                                                                                                            
+
                                                                                                            <template> contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.
                                                                                                            
 
-
                                                                                                            
-
                                                                                                            Note: By setting the attribute on the tag, you can use Pug template syntax instead of standard HTML — . We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.lang<template><template lang="pug">
                                                                                                            
+
                                                                                                            
+
                                                                                                            Note : By setting the attribute on the tag, you can use Pug template syntax instead of standard HTML — . We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.lang<template><template lang="pug">
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            <script> contains all of the non-display logic of your component. Most importantly, your tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a function.<script>render()
                                                                                                            
+
                                                                                                            <script> contains all of the non-display logic of your component. Most importantly, your tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a function.<script>render()
                                                                                                            
 
-
                                                                                                            In the case of , our default export sets the name of the component to and registers the component by adding it into the property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.App.vueappHelloWorldcomponents
                                                                                                            
+
                                                                                                            In the case of , our default export sets the name of the component to and registers the component by adding it into the property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.App.vueappHelloWorldcomponents
                                                                                                            
 
-
                                                                                                            import HelloWorld from './components/HelloWorld.vue';
+
                                                                                                            import HelloWorld from './components/HelloWorld.vue';
 
 export default {
   name: 'app',
@@ -165,23 +166,23 @@ export default {
   }
 };
                                                                                                            
 
-
                                                                                                            
-
                                                                                                            Note: If you want to use TypeScript syntax, you need to set the attribute on the tag to signify to the compiler that you're using TypeScript — .lang<script><script lang="ts">
                                                                                                            
+
                                                                                                            
+
                                                                                                            Note : If you want to use TypeScript syntax, you need to set the attribute on the tag to signify to the compiler that you're using TypeScript — .lang<script><script lang="ts">
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            <style> is where you write your CSS for the component. If you add a attribute — — Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.scoped<style scoped>
                                                                                                            
+
                                                                                                            <style> is where you write your CSS for the component. If you add a attribute — — Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.scoped<style scoped>
                                                                                                            
 
-
                                                                                                            
-
                                                                                                            Note: If you select a CSS pre-processor when creating the project via the CLI, you can add a attribute to the tag so that the contents can be processed by Webpack at build time. For example, will allow you to use SCSS syntax in your styling information.lang<style><style lang="scss">
                                                                                                            
+
                                                                                                            
+
                                                                                                            Note : If you select a CSS pre-processor when creating the project via the CLI, you can add a attribute to the tag so that the contents can be processed by Webpack at build time. For example, will allow you to use SCSS syntax in your styling information.lang<style><style lang="scss">
                                                                                                            
 
                                                                                                            
 
 
                                                                                                            Running the app locally
                                                                                                            
 
-
                                                                                                            The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a command to the project’s file as an npm script, so you can easily run it.servepackage.json
                                                                                                            
+
                                                                                                            The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a command to the project’s file as an npm script, so you can easily run it.servepackage.json
                                                                                                            
 
-
                                                                                                            In your terminal, try running (or if you prefer yarn). Your terminal should output something like the following:npm run serveyarn serve
                                                                                                            
+
                                                                                                            In your terminal, try running (or if you prefer yarn). Your terminal should output something like the following:npm run serveyarn serve
                                                                                                            
 
-
                                                                                                            INFO  Starting development server...
+
                                                                                                            INFO  Starting development server...
 98% after emitting CopyPlugin
 
  DONE  Compiled successfully in 18121ms
@@ -193,43 +194,43 @@ export default {
   Note that the development build is not optimized.
   To create a production build, run npm run build.
                                                                                                            
 
-
                                                                                                            If you navigate to the “local” address in a new browser tab (this should be something like as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.http://localhost:8080
                                                                                                            
+
                                                                                                            If you navigate to the “local” address in a new browser tab (this should be something like as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.http://localhost:8080
                                                                                                            
 
-
                                                                                                            default vue app render, with vue logo, welcome message, and some documentation links
                                                                                                            
+
                                                                                                            default vue app render, with vue logo, welcome message, and some documentation links
                                                                                                            
 
 
                                                                                                            Making a couple of changes
                                                                                                            
 
-
                                                                                                            Let's make our first change to the app — we’ll delete the Vue logo. Open the file, and delete the element from the template section:App.vue<img>
                                                                                                            
+
                                                                                                            Let's make our first change to the app — we’ll delete the Vue logo. Open the file, and delete the element from the template section:App.vue<img>
                                                                                                            
 
-
                                                                                                            <img alt="Vue logo" src="./assets/logo.png">
                                                                                                            
+
                                                                                                            <img alt="Vue logo" src="./assets/logo.png">
                                                                                                            
 
-
                                                                                                            If your server is still running, you should see the logo removed from the rendered site almost instantly. Let’s also remove the component from our template.HelloWorld
                                                                                                            
+
                                                                                                            If your server is still running, you should see the logo removed from the rendered site almost instantly. Let’s also remove the component from our template.HelloWorld
                                                                                                            
 
 
                                                                                                            First of all delete this line:
                                                                                                            
 
-
                                                                                                            <HelloWorld msg="Welcome to Your Vue.js App"/>
                                                                                                            
+
                                                                                                            <HelloWorld msg="Welcome to Your Vue.js App"/>
                                                                                                            
 
-
                                                                                                            If you save your file now, the rendered app will throw an error because we’ve registered the component but are not using it. We also need to remove the lines from inside the element that import and register the component:App.vue<script>
                                                                                                            
+
                                                                                                            If you save your file now, the rendered app will throw an error because we’ve registered the component but are not using it. We also need to remove the lines from inside the element that import and register the component:App.vue<script>
                                                                                                            
 
 
                                                                                                            Delete these lines now:
                                                                                                            
 
-
                                                                                                            import HelloWorld from './components/HelloWorld.vue'
                                                                                                            
+
                                                                                                            import HelloWorld from './components/HelloWorld.vue'
                                                                                                            
 
-
                                                                                                            components: {
+
                                                                                                            components: {
   HelloWorld
 }
                                                                                                            
 
-
                                                                                                            Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside .<template>
                                                                                                            
+
                                                                                                            Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside .<template>
                                                                                                            
 
-
                                                                                                            Let’s add a new inside . Since we’re going to be creating a todo list app below, let's set our header text to "To-Do List". Add it like so:<h1><div id="app">
                                                                                                            
+
                                                                                                            Let’s add a new inside . Since we’re going to be creating a todo list app below, let's set our header text to "To-Do List". Add it like so:<h1><div id="app">
                                                                                                            
 
-
                                                                                                            <template>
+
                                                                                                            <template>
   <div id="app">
     <h1>To-Do List</h1>
   </div>
 </template>
                                                                                                            
 
-
                                                                                                            App.vue will now show our heading, as you'd expect.
                                                                                                            
+
                                                                                                            App.vue will now show our heading, as you'd expect.
                                                                                                            
 
 
                                                                                                            Summary
                                                                                                            
 
@@ -244,52 +245,52 @@ export default {
 
                                                                                                            In this module
                                                                                                            
 
 
diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.html
index b98eb7323a..9ed0cc97e7 100644
--- a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.html
+++ b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.html
@@ -20,14 +20,14 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibilité
 
 
                                                                                                            {{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}
                                                                                                            
 
-
                                                                                                            Tournons maintenant notre attention vers l'accessibilité, les informations sur les problèmes communs, comment faire des tests simples, et comment faire pour utiliser les outils d'audit/automatisation pour trouver les problèmes d'accessibilités.
                                                                                                            
+
                                                                                                            Tournons maintenant notre attention vers l'accessibilité, les informations sur les problèmes communs, comment faire des tests simples, et comment faire pour utiliser les outils d'audit/automatisation pour trouver les problèmes d'accessibilités.
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Conditions préalables:
    
-    
                                                                                                            Familiarité avec les langages HTML, CSSet JavaScript, connaissance de la ligne terminal/commande.
                                                                                                            
+    
                                                                                                            Familiarité avec les langages HTML, CSSet JavaScript, connaissance de la ligne terminal/commande.
                                                                                                            
 
     
                                                                                                            Les composants Vue sont écrits sous la forme d’une combinaison d’objets JavaScript qui gèrent les données de l’application et d’une syntaxe de modèle html qui cartographie la structure DOM sous-jacente. Pour l’installation et pour utiliser certaines des fonctionnalités les plus avancées de Vue (comme les composants de fichier unique ou les fonctions de rendu), vous aurez besoin d’un terminal avec nœud + npm installé.
                                                                                                            
                                                                                                                		
 
 
 
 
 
                                                                                                            
+
                                                                                                            
@@ -58,12 +58,12 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibilité
  
                                                                                                          • Les utilisateurs avec des appareils aux caractéristiques basses qui peuvent avoir des processeurs lents.
                                                                                                            • 
 
-
                                                                                                            D'une certaine manière, la totalité de ce module concerne l'accessibilité — le test en navigateur croisé assure que vos sites peuvent être utilisé par le plus de personne possible. Qu'est-ce que l'accessibilité ? décrit plus largement et précisément l'accessibilité que cet article ne le fait.
                                                                                                            
+
                                                                                                            D'une certaine manière, la totalité de ce module concerne l'accessibilité — le test en navigateur croisé assure que vos sites peuvent être utilisé par le plus de personne possible. Qu'est-ce que l'accessibilité ? décrit plus largement et précisément l'accessibilité que cet article ne le fait.
                                                                                                            
 
-
                                                                                                            Cela dit, cet article couvrira les problèmes en navigateur croisé et de test entourant les personnes avec des handicaps, et comment ils utilisent le Web. Nous avons déjà parlé des autres domaines comme le responsive design et la performance à d'autres endroits dans ce module.
                                                                                                            
+
                                                                                                            Cela dit, cet article couvrira les problèmes en navigateur croisé et de test entourant les personnes avec des handicaps, et comment ils utilisent le Web. Nous avons déjà parlé des autres domaines comme le responsive design et la performance à d'autres endroits dans ce module.
                                                                                                            
-
                                                                                                            Note : Comme beaucoup de choses dans le développement web, l'accessibilité ne concerne pas la totale réussite ou échec ; l'accessibilité à 100% est quasiment impossible à atteindre pour tous les contenus, spécialement quand les sites deviennent plus complexes. Il s'agit plutôt de faire un effort pour rendre votre contenu accessible au plus grand nombre de personnes possible, avec du code de prévention, et se tenir aux meilleures pratiques.
                                                                                                            
+
                                                                                                            Note : Comme beaucoup de choses dans le développement web, l'accessibilité ne concerne pas la totale réussite ou échec ; l'accessibilité à 100% est quasiment impossible à atteindre pour tous les contenus, spécialement quand les sites deviennent plus complexes. Il s'agit plutôt de faire un effort pour rendre votre contenu accessible au plus grand nombre de personnes possible, avec du code de prévention, et se tenir aux meilleures pratiques.
                                                                                                            
 
                                                                                                            Problèmes d'accessibilité courants
                                                                                                            
@@ -71,7 +71,7 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibilité
 
                                                                                                            Dans cette section nous détaillerons certains des problèmes principaux qui se manifestent autour de l'accessibilité, liée à des technologies spécifiques, avec les bonnes pratiques à adopter, et quelques tests rapides que vous pouvez faire pour voir si vos sites vont dans le bon sens.
                                                                                                            
-
                                                                                                            Note : L'accessibilité est moralement la bonne chose à faire, est bonne pour les affaires (nombre élevé d'utilisateurs handicapés, utilisateurs sur des appareils mobiles, etc. représentent un segment du marché signifiant), mais c'est aussi illégal dans de nombreuses régions de la planète de ne pas rendre les propriétés du web accessibles aux personnes avec des handicaps. Pour plus d'informations, lisez Accessibility guidlines and the law.
                                                                                                            
+
                                                                                                            Note : L'accessibilité est moralement la bonne chose à faire, est bonne pour les affaires (nombre élevé d'utilisateurs handicapés, utilisateurs sur des appareils mobiles, etc. représentent un segment du marché signifiant), mais c'est aussi illégal dans de nombreuses régions de la planète de ne pas rendre les propriétés du web accessibles aux personnes avec des handicaps. Pour plus d'informations, lisez Accessibility guidlines and the law.
                                                                                                            
 
                                                                                                            HTML
                                                                                                            
@@ -127,7 +127,7 @@ This is the second subsection of my content. I think is more interesting than th
 
 
                                                                                                            Vous pouvez essayer ceci en utilisant notre exemple native-keyboard-accessibility.html (voir le code source) — ouvrez le dans un nouvel onglet, et essayez de presser la touche tab ; après quelques pressions, vous devriez voir la focalisation du tab commencer à se déplacer entre les différents éléments focalisables ; les éléments focalisés ont un style de mise en avant par défaut dans tous les navigateurs (cela diffère peu entre les différents navigateurs) donc vous pouvez dire quel éléments est focalisé.
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Vous pouvez ensuite presser Entrée/Retour pour accéder à un lien focalisé ou presser un bouton (nous avons inclus un peu de JavaScript pour que les boutons renvoies un message d'alerte), ou commencer à taper pour entrer du texte dans un des input texte (d'autres éléments de formulaire ont différents contrôles, par exemple l'élément {{htmlelement("select")}} peut avoir ses options affichées et navigable en utilisant les touches haut et bas).
                                                                                                            
 
@@ -139,12 +139,12 @@ This is the second subsection of my content. I think is more interesting than th
 
                                                                                                            
-
                                                                                                            Important : Vous devez jouer ce genre de test sur toutes les pages que vous écrivez — assurez-vous que la fonctionnalité peut être accessible par le clavier.
                                                                                                            
+
                                                                                                            Attention : Vous devez jouer ce genre de test sur toutes les pages que vous écrivez — assurez-vous que la fonctionnalité peut être accessible par le clavier.
                                                                                                            
 
                                                                                                            Cet exemple souligne l'importance de l'utilisation de la sémantique correcte d'élément pour le travail correct. C'est possible de styler n'importe quel élément pour qu'il ressemble à un lien ou un bouton avec le CSS, et de le faire se comporter comme un lien ou un bouton avec JavaScript, mais ils ne seront toujours pas des liens ou des boutons, et vous perdrez beaucoup de l'accessibilité que ces éléments vous fournissent pour rien. Donc ne le faîte pas si vous pouvez l'éviter.
                                                                                                            
 
-
                                                                                                            Un autre conseil — comme vu dans notre exemple, vous pouvez contrôler comment vos éléments focalisables paraissent quand ils sont focalisés, en utilisant la pseudo-class :focus. C'est une bonne idée de doubler les styles focus et hover, comme ça vos utilisateurs auront un indice visuel qu'un contrôle fera quelque chose lorsqu'il sera activé, qu'ils utilisent la souris ou le clavier :
                                                                                                            
+
                                                                                                            Un autre conseil — comme vu dans notre exemple, vous pouvez contrôler comment vos éléments focalisables paraissent quand ils sont focalisés, en utilisant la pseudo-class :focus. C'est une bonne idée de doubler les styles focus et hover, comme ça vos utilisateurs auront un indice visuel qu'un contrôle fera quelque chose lorsqu'il sera activé, qu'ils utilisent la souris ou le clavier :
                                                                                                            a:hover, input:hover, button:hover, select:hover,
 a:focus, input:focus, button:focus, select:focus {
@@ -152,7 +152,7 @@ a:focus, input:focus, button:focus, select:focus {
 }
                                                                                                            
-
                                                                                                            Note : Si vous décidez de retirer le style focus par défaut en utilisant du CSS, assurez-vous de le remplacer par autre chose qui s'accorde au mieux avec votre design — c'est un outil d'accessibilité de grande valeur, qui ne doit pas être supprimé.
                                                                                                            
+
                                                                                                            Note : Si vous décidez de retirer le style focus par défaut en utilisant du CSS, assurez-vous de le remplacer par autre chose qui s'accorde au mieux avec votre design — c'est un outil d'accessibilité de grande valeur, qui ne doit pas être supprimé.
                                                                                                            
 
                                                                                                            Intégrer l'accessibilité clavier
                                                                                                            
@@ -160,8 +160,8 @@ a:focus, input:focus, button:focus, select:focus {
 
                                                                                                            Parfois ça n'est pas possible d'éviter la perte de l'accessibilité clavier. Vous pouvez avoir hérité d'un site où la sémantique n'est pas parfaite (peut-être que vous vous êtes retrouvé avec un CMS horrible qui génère des boutons créés avec des <div>s), ou que vous utilisez un contrôle complexe qui n'a pas d'accessibilité clavier intégré, comme l'élément {{htmlelement("video")}} (étonnamment, Opera est le seul navigateur qui vous permet de tabuler dans l'élément <video> avec les contrôles par défaut du navigateur). Vous avez quelques options ici :
                                                                                                              
- 
                                                                                                            1. Créer des contrôles personnalisés en utilisant les éléments <button> (sur lequel nous pouvons tabuler par défaut !) et JavaScript pour les relier à leur fonction. Pour des bons exemples voir Creating a cross-browser video player.
                                                                                                              2. 
- 
                                                                                                            2. Créer des raccourcis clavier en utilisant JavaScript, les fonctions sont activés quand vous appuyez sur une certaine touche du clavier. Voir Desktop mouse and keyboard controls pour des exemples en rapport avec le jeu qui peuvent être adaptés à d'autres fins.
                                                                                                              3. 
+ 
                                                                                                            3. Créer des contrôles personnalisés en utilisant les éléments <button> (sur lequel nous pouvons tabuler par défaut !) et JavaScript pour les relier à leur fonction. Pour des bons exemples voir Creating a cross-browser video player.
                                                                                                              4. 
+ 
                                                                                                            4. Créer des raccourcis clavier en utilisant JavaScript, les fonctions sont activés quand vous appuyez sur une certaine touche du clavier. Voir Desktop mouse and keyboard controls pour des exemples en rapport avec le jeu qui peuvent être adaptés à d'autres fins.
                                                                                                              5. 
  
                                                                                                            5. Utilisez des approches intéressantes pour simuler le comportement d'un bouton. Prenez par exemple notre exemple fake-div-buttons.html (voir le code source). Nous donnons à nos faux boutons <div> la capacité d'être focalisé (y compris avec la tabulation) en donnant à chacun d'entre eux l'attribut tabindex="0" (voir l'article tabindex de WebAIM pour plus de détails utiles). Cela nous permet de tabuler sur les boutons, mais pas de les activer avec la toucher Entrée/Retour. Pour faire cela, nous devons ajouter ce petit bout de tromperie en JavaScript :
                                                                                                              6. 
  
                                                                                                            6. 
   
                                                                                                              document.onkeydown = function(e) {
@@ -169,11 +169,11 @@ a:focus, input:focus, button:focus, select:focus {
     document.activeElement.onclick(e);
   }
 };
                                                                                                              
-  Ici nous ajoutons un listener à l'objet document pour détecter quand une touche a été appuyée sur le clavier. Nous vérifions quelle touche a été pressée avec la propriété d'évènement d'objet keyCode ; si c'est le code de la touche qui retourne Entrée/Retour, on exécute la fonction stockée dans le onclick du bouton en utilisant document.activeElement.onclick(). activeElement nous donne l'élément courant qui est focalisé sur la page.
                                                                                                              7. 
+  Ici nous ajoutons un listener à l'objet document pour détecter quand une touche a été appuyée sur le clavier. Nous vérifions quelle touche a été pressée avec la propriété d'évènement d'objet keyCode ; si c'est le code de la touche qui retourne Entrée/Retour, on exécute la fonction stockée dans le onclick du bouton en utilisant document.activeElement.onclick(). activeElement nous donne l'élément courant qui est focalisé sur la page.
 
                                                                                                            
-
                                                                                                            Note : Cette technique ne fonctionnera que si vous configurer vos propres gestionnaires d'évènement avec les propriétés de gestion d'évènement (par ex. onclick). addEventListener ne fonctionnera pas. C'est beaucoup de prises de tête pour construire la fonctionnalité de retour. Et il y a d'autres problèmes rattachés avec. Vaut mieux commencer par utiliser les bons éléments pour leurs buts initiaux.
                                                                                                            
+
                                                                                                            Note : Cette technique ne fonctionnera que si vous configurer vos propres gestionnaires d'évènement avec les propriétés de gestion d'évènement (par ex. onclick). addEventListener ne fonctionnera pas. C'est beaucoup de prises de tête pour construire la fonctionnalité de retour. Et il y a d'autres problèmes rattachés avec. Vaut mieux commencer par utiliser les bons éléments pour leurs buts initiaux.
                                                                                                            
 
                                                                                                            Les textes alternatifs
                                                                                                            
@@ -181,12 +181,12 @@ a:focus, input:focus, button:focus, select:focus {
 
                                                                                                            Les textes alternatifs sont très importants pour l'accessibilité — si une personne a un trouble visuel ou auditif qui l'empêche de voir ou d'entendre un contenu, alors c'est un problème. Le texte alternatif le plus simple disponible est le modeste attribut alt, que nous devrions inclure dans toutes les images qui contiennent un contenu pertinent. Il peut contenir une description de l'image qui transmet clairement son sens et son contenu sur la page, pour être récupéré par un lecteur d'écran et lu à l'utilisateur.
                                                                                                            
-
                                                                                                            Note : Pour plus d'informations, lisez Text alternatives.
                                                                                                            
+
                                                                                                            Note : Pour plus d'informations, lisez Text alternatives.
                                                                                                            
 
                                                                                                            L'oubli de texte alt peut être testé de bien des façons, par exemple en utilisant le {{anch("Auditing tools")}} d'accessibilité.
                                                                                                            
 
-
                                                                                                            Le texte alt est légèrement plus complexe pour du contenu vidéo ou audio. Il y a une manière de gérer l'affichage du texte (par ex. les sous-titres) et de les afficher quand la vidéo est jouée, sous le forme de l'élément {{htmlelement("track")}}, et du format WebVTT (voir Ajouter des légendes et des sous-titres à des vidéos HTML5 pour un tutoriel détaillé). La compatibilité entre navigateur pour cette fonction est assez bonne, mais si vous voulez fournir des textes alternatifs pour de l'audio ou supporter les vieux navigateurs, une simple transcription du texte présenté quelque part sur la page ou sur une page séparée peut être une bonne idée.
                                                                                                            
+
                                                                                                            Le texte alt est légèrement plus complexe pour du contenu vidéo ou audio. Il y a une manière de gérer l'affichage du texte (par ex. les sous-titres) et de les afficher quand la vidéo est jouée, sous le forme de l'élément {{htmlelement("track")}}, et du format WebVTT (voir Ajouter des légendes et des sous-titres à des vidéos HTML5 pour un tutoriel détaillé). La compatibilité entre navigateur pour cette fonction est assez bonne, mais si vous voulez fournir des textes alternatifs pour de l'audio ou supporter les vieux navigateurs, une simple transcription du texte présenté quelque part sur la page ou sur une page séparée peut être une bonne idée.
                                                                                                            Relations et contexte entre élément
                                                                                                            
 
@@ -197,7 +197,7 @@ a:focus, input:focus, button:focus, select:focus {
 
                                                                                                            Le suivant sur notre liste, l'élément de formulaire {{htmlelement("label")}} est une des fonctionnalités centrales qui nous permet de rendre les formulaires accessibles. Le problème avec les formulaires c'est que vous avez besoin de libellés pour dire quelle donnée doit être entrée dans chaque champs du formulaire. Chaque libellé doit être inclus dans un {{htmlelement("label")}} pour le relier clairement à son champs partenaire (chaque valeur de l'attribut for de <label> doit aller avec la valeur de l'id de l'élément du formulaire), et cela aura du sens même si le code source n'est pas totalement logique (ce qui pour être tout à fait juste devrait être fait).
                                                                                                            
-
                                                                                                            Note : Lisez Meaningful text labels, pour plus d'information à propos des textes de type lien et les libellés des formulaires.
                                                                                                            
+
                                                                                                            Note : Lisez Meaningful text labels, pour plus d'information à propos des textes de type lien et les libellés des formulaires.
                                                                                                            
 
                                                                                                            Pour terminer, un mot rapide sur les tableaux de données. Un tableau de données basique peut être écrit avec des indications très simples (voir bad-table.html en direct, et la source), mais il y a des problèmes — il n'y a aucun moyen pour un utilisateur de lecteur d'écran d'associer des lignes ou des colonnes ensembles comme un groupe de données — pour faire cela vous devez connaître les lignes d'en-têtes, et si elles se dirigent en lignes, colonnes, etc. Cela ne peut être fait qu'en visuel pour un tel tableau.
                                                                                                            
@@ -205,7 +205,7 @@ a:focus, input:focus, button:focus, select:focus {
 
                                                                                                            Si vous regardez plutôt notre exemple punk-band-complete.html (direct, source), vous pouvez voir plusieurs aides à l'accessibilité en place, comme les entêtes de tableau ({{htmlelement("th")}} et les attributs scope), l'élément {{htmlelement("caption")}}, etc.
                                                                                                            
-
                                                                                                            Note : Lisez Accessible data tables, pour plus d'information à propos des tableaux accessibles.
                                                                                                            
+
                                                                                                            Note : Lisez Accessible data tables, pour plus d'information à propos des tableaux accessibles.
                                                                                                            
 
                                                                                                            CSS
                                                                                                            
@@ -227,21 +227,21 @@ a:focus, input:focus, button:focus, select:focus {
 
                                                                                                            Une autre astuce est de ne pas compter sur une couleur seule pour les indications/informations, comme ça ne sera pas bon pour ceux qui ne peuvent pas voir la couleur. Plutôt que de marquer en rouge les champs requis d'un formulaire, par exemple, marquez-les avec un astérisque et en rouge.
                                                                                                            
-
                                                                                                            Note : un contraste élevé permettra également à toute personnes utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, comme avec la lumière du soleil.
                                                                                                            
+
                                                                                                            Note : un contraste élevé permettra également à toute personnes utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, comme avec la lumière du soleil.
                                                                                                            
 
                                                                                                            Cacher du contenu
                                                                                                            
 
-
                                                                                                            Il y a plusieurs cas où un design visuel requerra que tout le contenu ne soit pas montré d'un seul coup. Par exemple, dans notre Exemple de boîte d'info avec onglets (voir le code source) nous avons trois panneau d'information, mais nous les positionnons les uns sur les autres et fournissons des onglets qui peuvent être cliqués pour montrer chacun d'entre eux (c'est aussi accessible au clavier — vous pouvez utiliser alternativement Tab et Entrée/Retour pour les sélectionner).
                                                                                                            
+
                                                                                                            Il y a plusieurs cas où un design visuel requerra que tout le contenu ne soit pas montré d'un seul coup. Par exemple, dans notre Exemple de boîte d'info avec onglets (voir le code source) nous avons trois panneau d'information, mais nous les positionnons les uns sur les autres et fournissons des onglets qui peuvent être cliqués pour montrer chacun d'entre eux (c'est aussi accessible au clavier — vous pouvez utiliser alternativement Tab et Entrée/Retour pour les sélectionner).
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Les utilisateurs de lecteur d'écran ne se soucient pas vraiment de cela — ils sont satisfaits tant que le contenu a du sens dans le code source, et qu'ils peuvent entièrement y accéder. Le positionnement absolute (comme utilisé dans cet exemple) est souvent vu comme l'un des meilleur mécanismes pour cacher du contenu pour des effets visuels, parce que ça n'empêche pas les lecteur d'écran d'y accéder.
                                                                                                            D'un autre côté, vous ne devriez pas utiliser {{cssxref("visibility")}}:hidden ou {{cssxref("display")}}:none, parce qu'il cache le contenu aux lecteurs d'écran. A moins que, bien entendu, il y est une bonne raison qui justifie que ce contenu soit caché aux lecteurs d'écran.
                                                                                                            
-
                                                                                                            Note : Invisible Content Just for Screen Reader Users vous décrira beaucoup de détails utilesà propos de ce sujet. 
                                                                                                            
+
                                                                                                            Note : Invisible Content Just for Screen Reader Users vous décrira beaucoup de détails utilesà propos de ce sujet. 
                                                                                                            
 
                                                                                                            JavaScript
                                                                                                            
@@ -258,18 +258,18 @@ a:focus, input:focus, button:focus, select:focus {
 
                                                                                                            
-
                                                                                                            Note : Accessible JavaScript de WebAIM fourni des renseignements approfondis à propos des considérations pour du JavaScript accessible.
                                                                                                            
+
                                                                                                            Note : Accessible JavaScript de WebAIM fourni des renseignements approfondis à propos des considérations pour du JavaScript accessible.
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            Les implémentations JavaScript plus complexes peuvent mener à des problèmes avec l'accessibilité — vous devez faire ce que vous pouvez. par exemple, cela ne serait pas raisonnable d'attendre de vous que vous fassiez un jeu complexe 3D écrit avec WebGL accessible à 100% pour une personne aveugle, mais vous pouvez implémenter des contrôles clavier pour qu'il soit utilisable pour un utilisateur sans souris, et réaliser une palette de couleurs suffisamment contrastée pour être utilisable par les personnes avec des lacunes pour percevoir les couleurs.
                                                                                                            
+
                                                                                                            Les implémentations JavaScript plus complexes peuvent mener à des problèmes avec l'accessibilité — vous devez faire ce que vous pouvez. par exemple, cela ne serait pas raisonnable d'attendre de vous que vous fassiez un jeu complexe 3D écrit avec WebGL accessible à 100% pour une personne aveugle, mais vous pouvez implémenter des contrôles clavier pour qu'il soit utilisable pour un utilisateur sans souris, et réaliser une palette de couleurs suffisamment contrastée pour être utilisable par les personnes avec des lacunes pour percevoir les couleurs.
                                                                                                            Fonctionnalité complexe
                                                                                                            L'un des domaines de problématique principal pour l'accessibilité c'est les applis complexes qui nécessitent des contrôles de formulaires compliqués (comme les sélecteurs de date) et le contenu dynamique qui se met souvent à jour et de façon incrémentale.
                                                                                                            
 
-
                                                                                                            Les contrôles de formulaire compliqués non natifs sont problématiques parce qu'ils ont tendance à nécessiter beaucoup de <div>s imbriquées, et le navigateur ne sait pas quoi faire par défaut avec elles. Si vous les inventer vous-même, vous devez vous assurer qu'ils sont accessibles par le clavier ; si vous utilisez des structures externes, revoyez en profondeur les options disponibles pour voir à quel point elles sont accessibles avant de vous plonger dedans. Bootstrap à l'air d'être assez bon pour l'accessibilité, par exemple, bien que Making Bootstrap a Little More Accessible de Rhiana Heath aborde certain de ses problèmes (principalement en rapport avec le contraste des couleurs), et examine certaines solutions.
                                                                                                            
+
                                                                                                            Les contrôles de formulaire compliqués non natifs sont problématiques parce qu'ils ont tendance à nécessiter beaucoup de <div>s imbriquées, et le navigateur ne sait pas quoi faire par défaut avec elles. Si vous les inventer vous-même, vous devez vous assurer qu'ils sont accessibles par le clavier ; si vous utilisez des structures externes, revoyez en profondeur les options disponibles pour voir à quel point elles sont accessibles avant de vous plonger dedans. Bootstrap à l'air d'être assez bon pour l'accessibilité, par exemple, bien que Making Bootstrap a Little More Accessible de Rhiana Heath aborde certain de ses problèmes (principalement en rapport avec le contraste des couleurs), et examine certaines solutions.
                                                                                                            
 
-
                                                                                                            Le contenu dynamique régulièrement mis à jour peut-être un problème parce que les utilisateurs de lecteur d'écran peuvent le manquer, spécialement si les mises à jour sont inattendues. Si vous avez une appli en single-page avec un contenu principal dans un panneau qui est régulièrement mis à jour en utilisant XMLHttpRequest ou Fetch, un utilisateur utilisant un lecteur d'écran peut rater ces mises à jour.
                                                                                                            
+
                                                                                                            Le contenu dynamique régulièrement mis à jour peut-être un problème parce que les utilisateurs de lecteur d'écran peuvent le manquer, spécialement si les mises à jour sont inattendues. Si vous avez une appli en single-page avec un contenu principal dans un panneau qui est régulièrement mis à jour en utilisant XMLHttpRequest ou Fetch, un utilisateur utilisant un lecteur d'écran peut rater ces mises à jour.
                                                                                                            WAI-ARIA
                                                                                                            
 
@@ -292,7 +292,7 @@ a:focus, input:focus, button:focus, select:focus {
 
 
                                                                                                            Vous pouvez voir un exemple en action sur l'exemple ARIA (Accessible Rich Internet Applications) Live Regions de Freedom Scientific — le paragraphe surligné doit mettre à jour son contenu toutes les 10 secondes, et un lecteur d'écran doit le lire à l'utilisateur. ARIA Live Regions - Atomic apporte un autre exemple utile.
                                                                                                            
 
-
                                                                                                            Nous n'avons pas de place pour couvrir WAI-ARIA en détail ici, vous pouvez en apprendre beaucoup plus à ce propos sur WAI-ARIA basics.
                                                                                                            
+
                                                                                                            Nous n'avons pas de place pour couvrir WAI-ARIA en détail ici, vous pouvez en apprendre beaucoup plus à ce propos sur WAI-ARIA basics.
                                                                                                            Les outils d'accessibilité
                                                                                                            
 
@@ -316,12 +316,12 @@ a:focus, input:focus, button:focus, select:focus {
  
                                                                                                          • Défilez vers le bas jusqu'à que vous trouviez la section d'erreur/signalement, comme montré ci-dessous.
                                                                                                            • 
 
-
                                                                                                            
+
                                                                                                            Il y a également des options que vous pouvez examiner (voir le lien Show Options vers le haut de la page), ainsi qu'une API pour utiliser Tenon comme un programme.
                                                                                                            
-
                                                                                                            Note : De tels outils ne sont pas suffisant pour résoudre tous vos problèmes d'accessibilité en tant que tel. Vous devrez les combiner, savoir et expérience, test utilisateur, etc. pour vous faire une image exacte.
                                                                                                            
+
                                                                                                            Note : De tels outils ne sont pas suffisant pour résoudre tous vos problèmes d'accessibilité en tant que tel. Vous devrez les combiner, savoir et expérience, test utilisateur, etc. pour vous faire une image exacte.
                                                                                                            
 
                                                                                                            Les outils d'automatisation
                                                                                                            
@@ -335,11 +335,11 @@ a:focus, input:focus, button:focus, select:focus {
 
 
                                                                                                            Cela ajoute un onglet accessibilité aux outils de développeur du navigateur, nous avons installé la version pour Firefox, puis nous l'avons utilisé pour auditer notre exemple bad-table.html. Nous obtenons les résultats suivants :
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            aXe est également installable en utilisant npm, et peut-être intégré avec des exécuteurs de tâche comme Grunt et Gulp, des frameworks d'automatisation comme Selenium et Cucumber, des framework de test unitaire comme Jasmin, et d'autres encore (une fois encore, voir la page principale d'aXe pour plus de détails).
                                                                                                            
 
-
                                                                                                            Les lecteurs d'écran
                                                                                                            
+
                                                                                                            Les lecteurs d'écran
                                                                                                            Il faut définitivement tester avec un lecteur d'écran pour s'habituer à comment les personnes malvoyantes utilisent le Web. Il y a plusieurs lecteurs d'écran disponible : 
                                                                                                            
 
@@ -354,7 +354,7 @@ a:focus, input:focus, button:focus, select:focus {
 
                                                                                                            Commençons à effectuer quelques tests avec deux lecteurs d'écran différents pour vous donner une idée générale de comment ils fonctionnent et de comment tester avec eux.
                                                                                                            
-
                                                                                                            Note : Designing for Screen Reader Compatibility de WebAIM fournit des informations utiles à propos de l'utilisation des lecteurs d'écran et qu'est-ce qui est le plus efficace pour les lecteurs d'écran. Aller également voir Screen Reader User Survey #6 Results pour des statistiques intéressantes concernant l'utilisation de lecteur d'écran.
                                                                                                            
+
                                                                                                            Note : Designing for Screen Reader Compatibility de WebAIM fournit des informations utiles à propos de l'utilisation des lecteurs d'écran et qu'est-ce qui est le plus efficace pour les lecteurs d'écran. Aller également voir Screen Reader User Survey #6 Results pour des statistiques intéressantes concernant l'utilisation de lecteur d'écran.
                                                                                                            
 
                                                                                                            VoiceOver
                                                                                                            
@@ -364,12 +364,12 @@ a:focus, input:focus, button:focus, select:focus {
 
                                                                                                            Pour le démarrer, pressez Cmd + Fn + F5. Si vous n'avez jamais utilisé VO auparavant, vous obtiendrez un écran de bienvenue où vous pouvez choisir de démarrer VO ou de ne pas le démarrer, et vous parcourrez un tutoriel utile pour apprendre à comment l'utiliser. Pour l'arrêter, pressez Cmd + Fn + F5 à nouveau.
                                                                                                            
-
                                                                                                            Note : Vous devriez parcourir le tutoriel au moins une fois — il est vraiment très utile pour en apprendre à propos de VO.
                                                                                                            
+
                                                                                                            Note : Vous devriez parcourir le tutoriel au moins une fois — il est vraiment très utile pour en apprendre à propos de VO.
                                                                                                            
 
                                                                                                            Lorsque VO est démarré, l'affichage ressemblera à peu près à cela, mais vous verrez une boîte noire en bas à gauche de l'écran qui contient l'information sur quoi est-ce que VO est actuellement sélectionné. La sélection courante sera également mise en avant, avec une bordure noire — cette mise en avant est connue comme le curseur VO.
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Pour utiliser VO, vous aller beaucoup utiliser le "modificateur VO" — c'est une touche ou une combinaison de touches que vous devez presser en plus de l'actuel raccourci VO pour qu'elles fonctionnent. Utiliser un modificateur comme celui-ci est courant avec les lecteurs d'écran, pour leur permettre de garder leur propres commandes en évitant d'entrer en conflit avec d'autres commandes. Dans le cas de VO, le modificateur peut aussi être VerrMaj, ou Ctrl + Option.
                                                                                                            
 
@@ -490,7 +490,7 @@ a:focus, input:focus, button:focus, select:focus {
 
                                                                                                            Pour utiliser NVDA, vous aller beaucoup utiliser le "modificateur NVDA" — c'est une touche que vous devez presser en plus de l'actuel raccourci NVDA pour qu'elles fonctionnent. Utiliser un modificateur comme celui-ci est courant avec les lecteurs d'écran, pour leur permettre de garder leurs propres commandes en évitant d'entrer en conflit avec d'autres commandes. Dans le cas de NVDA, le modificateur peut aussi être Insert (par défaut), ou VerrMaj (peut être choisi en cochant la première case à cocher dans la boîte de dialogue de bienvenue avant d'appuyer sur OK).
                                                                                                            
-
                                                                                                            Note : NVDA est plus subtile que VoiceOver en termes de comment il met en valeur là où il est et qu'est-ce qu'il fait. Lorsque vous défilez à travers des rubriques, listes, etc. les éléments que vous sélectionnez seront généralement mis à avant avec un contour subtile, mais ça n'est pas toujours le cas pour toutes les choses. Si vous vous retrouvez complètement perdu, vous pouvez appuyer sur Ctrl + F5 pour rafraîchir la page courante et recommencer en haut de la page.
                                                                                                            
+
                                                                                                            Note : NVDA est plus subtile que VoiceOver en termes de comment il met en valeur là où il est et qu'est-ce qu'il fait. Lorsque vous défilez à travers des rubriques, listes, etc. les éléments que vous sélectionnez seront généralement mis à avant avec un contour subtile, mais ça n'est pas toujours le cas pour toutes les choses. Si vous vous retrouvez complètement perdu, vous pouvez appuyer sur Ctrl + F5 pour rafraîchir la page courante et recommencer en haut de la page.
                                                                                                            
 
                                                                                                            NVDA a beaucoup de commandes clavier, et nous n'allons pas toutes les lister ici. Les principales dont vous aurez besoin pour tester une page web sont dans le tableau suivant. Dans les raccourcis clavier, "NVDA" veut dire "le modificateur NVDA".
                                                                                                            
@@ -635,29 +635,29 @@ a:focus, input:focus, button:focus, select:focus {
 
 
                                                                                                            Test utilisateur
                                                                                                            
 
-
                                                                                                            Comme mentionné plus haut, vous ne pouvez pas uniquement compter sur les outils automatisés pour déterminer les problèmes d'accessibilité sur votre site. Il est recommandé que lorsque vous établissez votre plan de test, vous devez inclure quelques groupes d'utilisateur d'accessibilité si c'est possible (voir notre section Test Utilisateur plus tôt dans ce cours pour plus de contexte). Essayez d'inclure des utilisateurs de lecteur d'écran, des utilisateurs exclusifs au clavier, des utilisateurs malentendants, et peut-être d'autres groupes encore, selon vos besoins.
                                                                                                            
+
                                                                                                            Comme mentionné plus haut, vous ne pouvez pas uniquement compter sur les outils automatisés pour déterminer les problèmes d'accessibilité sur votre site. Il est recommandé que lorsque vous établissez votre plan de test, vous devez inclure quelques groupes d'utilisateur d'accessibilité si c'est possible (voir notre section Test Utilisateur plus tôt dans ce cours pour plus de contexte). Essayez d'inclure des utilisateurs de lecteur d'écran, des utilisateurs exclusifs au clavier, des utilisateurs malentendants, et peut-être d'autres groupes encore, selon vos besoins.
                                                                                                            Checklist de tests d'accessibilité
                                                                                                            La liste suivante vous fournit une checklist à suivre pour vous assurer de mener à bien les tests d'accessibilité recommandés pour votre projet :
                                                                                                              
- 
                                                                                                            1. Assurez-vous que votre HTML est sémantiquement correct au possible. Le valider est un bon début, comme utiliser un outil d'Audit.
                                                                                                              2. 
+ 
                                                                                                            2. Assurez-vous que votre HTML est sémantiquement correct au possible. Le valider est un bon début, comme utiliser un outil d'Audit.
                                                                                                              3. 
  
                                                                                                            3. Vérifiez que votre contenu a du sens lorsque le CSS est désactivé.
                                                                                                              4. 
- 
                                                                                                            4. Assurez-vous que votre fonctionnalité est accessible au clavier. Testez en utilisant Tab, Retour/Entrée, etc.
                                                                                                              5. 
- 
                                                                                                            5. Assurez-vous que votre contenu non-textuel a un texte alternatif. Un Outil d'audit est bien pour repérer ce type de problèmes.
                                                                                                              6. 
- 
                                                                                                            6. Assurez-vous que votre contraste de couleurs est acceptable, en utilisant un outil de vérification approprié.
                                                                                                              7. 
- 
                                                                                                            7. Assurez-vous que le contenu caché est visible par les lecteurs d'écran.
                                                                                                              8. 
+ 
                                                                                                            8. Assurez-vous que votre fonctionnalité est accessible au clavier. Testez en utilisant Tab, Retour/Entrée, etc.
                                                                                                              9. 
+ 
                                                                                                            9. Assurez-vous que votre contenu non-textuel a un texte alternatif. Un Outil d'audit est bien pour repérer ce type de problèmes.
                                                                                                              10. 
+ 
                                                                                                            10. Assurez-vous que votre contraste de couleurs est acceptable, en utilisant un outil de vérification approprié.
                                                                                                              11. 
+ 
                                                                                                            11. Assurez-vous que le contenu caché est visible par les lecteurs d'écran.
                                                                                                              12. 
  
                                                                                                            12. Assurez-vous qu'une fonctionnalité est utilisable sans JavaScript autant que possible.
                                                                                                              13. 
  
                                                                                                            13. Utilisez ARIA pour améliorer l'accessibilité quand c'est approprié.
                                                                                                              14. 
- 
                                                                                                            14. Exécutez votre site dans un Outil d'audit.
                                                                                                              15. 
+ 
                                                                                                            15. Exécutez votre site dans un Outil d'audit.
                                                                                                              16. 
  
                                                                                                            16. Testez avec un lecteur d'écran.
                                                                                                              17. 
  
                                                                                                            17. Incluez une politique/déclaration d'accessibilité à un endroit que l'on peut trouver sur votre site pour dire ce que vous avez fait.
                                                                                                              18. 
 
                                                                                                            Trouver de l'aide
                                                                                                            
 
-
                                                                                                            Il y a bien d'autres problèmes que vous allez rencontrer avec l'accessibilité ; la chose la plus importante à vraiment savoir est comment trouver des réponses en ligne. Consultez l'article la section Trouver de l'aide de l'article sur le HTML et le CSS pour des bonnes directions.
                                                                                                            
+
                                                                                                            Il y a bien d'autres problèmes que vous allez rencontrer avec l'accessibilité ; la chose la plus importante à vraiment savoir est comment trouver des réponses en ligne. Consultez l'article la section Trouver de l'aide de l'article sur le HTML et le CSS pour des bonnes directions.
                                                                                                            Résumé
                                                                                                            
 
@@ -672,14 +672,14 @@ a:focus, input:focus, button:focus, select:focus {
 
                                                                                                            Dans ce module
                                                                                                             
                                                                                                            
diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html
index a8914efdd9..1b55de47f6 100644
--- a/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html
+++ b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html
@@ -17,14 +17,14 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS
 
 
                                                                                                            {{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","Learn/Tools_and_testing/Cross_browser_testing/JavaScript", "Learn/Tools_and_testing/Cross_browser_testing")}}
                                                                                                            
 
-
                                                                                                            Maintenant que les bases sont posées, nous allons nous concentrer sur les problèmes courants en navigateur croisé que vous allez rencontrer en code HTML et CSS, et quels outils peuvent être utilisés pour prévenir l'arrivée de ces problèmes, ou résoudre les problèmes qui surviennent. Cela inclut le linting code, la gestion des préfixes CSS, l'utilisation des outils de dev des navigateurs pour localiser les problèmes, utiliser des polyfills pour apporter du support dans les navigateurs, se confronter aux problèmes de responsive design et plus encore.
                                                                                                            
+
                                                                                                            Maintenant que les bases sont posées, nous allons nous concentrer sur les problèmes courants en navigateur croisé que vous allez rencontrer en code HTML et CSS, et quels outils peuvent être utilisés pour prévenir l'arrivée de ces problèmes, ou résoudre les problèmes qui surviennent. Cela inclut le linting code, la gestion des préfixes CSS, l'utilisation des outils de dev des navigateurs pour localiser les problèmes, utiliser des polyfills pour apporter du support dans les navigateurs, se confronter aux problèmes de responsive design et plus encore.
                                                                                                            
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis :
    
-    
                                                                                                            Connaissances avec le noyau des langages HTML, CSS et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.
                                                                                                            
+    
                                                                                                            Connaissances avec le noyau des langages HTML, CSS et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.
                                                                                                            
                                                                                                                		
   
                                                                                                            
   
                                                                                                            
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                            
+
                                                                                                            
@@ -44,21 +44,21 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS
 
 
                                                                                                            Commençons par le commencement : résoudre les problèmes généraux
                                                                                                            
 
-
                                                                                                            Nous disions dans le premier article de cette série que c'était une bonne stratégie de commencer à tester sur une paire de navigateurs modernes sur desktop/mobile, afin de vous assurer que votre site fonctionne pour l'essentiel, avant de commencer à se concentrer sur les problèmes en navigateur croisé.
                                                                                                            
+
                                                                                                            Nous disions dans le premier article de cette série que c'était une bonne stratégie de commencer à tester sur une paire de navigateurs modernes sur desktop/mobile, afin de vous assurer que votre site fonctionne pour l'essentiel, avant de commencer à se concentrer sur les problèmes en navigateur croisé.
                                                                                                            
 
-
                                                                                                            Dans nos articles Debugging HTML et Debugging CSS, nous avancions quelques conseils très basiques sur le débogage HTML/CSS — si vous ne maîtrisez pas ces bases, vous devriez sans aucun doute aller étudier ces articles avant de continuer.
                                                                                                            
+
                                                                                                            Dans nos articles Debugging HTML et Debugging CSS, nous avancions quelques conseils très basiques sur le débogage HTML/CSS — si vous ne maîtrisez pas ces bases, vous devriez sans aucun doute aller étudier ces articles avant de continuer.
                                                                                                            Il s'agit essentiellement de vérifier si votre code HTML et CSS est bien conçu et s'il ne contient aucune erreur de syntaxe.
                                                                                                            
-
                                                                                                            Note : Un problème fréquent avec le HTML et le CSS arrive quand différentes règles CSS commencent à entrer en conflit avec une autre. Cela peut être particulièrement problématique lorsque vous utilisez un bout de code tierce. Par exemple, vous pouvez utiliser un modèle CSS et remarquer qu'un des noms de classe qui est utilisé entre en conflit avec un que vous utilisez déjà dans un but différent. Ou vous pouvez trouver que du HTML généré par une API tierce (générateur de bannières publicitaires, par exemple) inclut un nom de classe ou d'ID que vous utilisez déjà dans un but différent. Afin de garantir que cela ne se produira pas, vous devez rechercher les outils que vous allez utiliser en premier et construire votre code en conséquence. Il convient également de relever les "espace de noms" en CSS, par ex. si vous avez un widget, assurez-vous qu'il a des classes distinctes, et ensuite commencez les sélecteurs qui sélectionnent les éléments à l'intérieur du widget avec cette classe, les conflits risqueront moins d'arriver. Par exemple .audio-player ul a.
                                                                                                            
+
                                                                                                            Note : Un problème fréquent avec le HTML et le CSS arrive quand différentes règles CSS commencent à entrer en conflit avec une autre. Cela peut être particulièrement problématique lorsque vous utilisez un bout de code tierce. Par exemple, vous pouvez utiliser un modèle CSS et remarquer qu'un des noms de classe qui est utilisé entre en conflit avec un que vous utilisez déjà dans un but différent. Ou vous pouvez trouver que du HTML généré par une API tierce (générateur de bannières publicitaires, par exemple) inclut un nom de classe ou d'ID que vous utilisez déjà dans un but différent. Afin de garantir que cela ne se produira pas, vous devez rechercher les outils que vous allez utiliser en premier et construire votre code en conséquence. Il convient également de relever les "espace de noms" en CSS, par ex. si vous avez un widget, assurez-vous qu'il a des classes distinctes, et ensuite commencez les sélecteurs qui sélectionnent les éléments à l'intérieur du widget avec cette classe, les conflits risqueront moins d'arriver. Par exemple .audio-player ul a.
                                                                                                            
 
                                                                                                            La validation
                                                                                                            Pour le HTML, la validation implique de s'assurer que toutes vos balises sont correctement fermées et imbriquées, que vous utilisez un DOCTYPE, et que vous utilisez les balises à leur fin prévue. Une bonne stratégie est de valider régulièrement votre code. On service qui peut le faire est le W3C Markup Validation Service, qui vous permet de montrer votre code, et retourne une liste d'erreurs :
                                                                                                            
 
-
                                                                                                            The HTML validator homepage
                                                                                                            
+
                                                                                                            The HTML validator homepage
                                                                                                            Le CSS a une histoire semblable — vous devez vérifier que vos noms de propriétés sont correctement épelés, ques les valeurs des propriétés sont correctement épelées et qu'elles sont valides pour les propriétés auxquelles elles s'appliquent, que vous n'oubliez aucune accolades ouvrantes et fermantes. Les W3C a un CSS Validator également disponible à cet effet.
                                                                                                            
 
@@ -68,7 +68,7 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS
 
 
                                                                                                            Il y a beaucoup d'applications linter en ligne, les meilleures d'entre elles sont probablement Dirty Markup (HTML, CSS, JavaScript), et CSS Lint (seulement CSS). Elles vous permettent de coller votre code dans une fenêtre, et mettront en évidence toutes les erreurs avec des croix, qui peuvent être survolées pour obtenir un message d'erreur décrivant le problème. Dirty Markup vous permet également de faire des fixs dans votre code en utilisant le bouton Clean.
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Néanmoins, ce n'est pas très pratique de devoir copier et coller votre code dans une page web pour vérifier sa validité plusieurs fois. Ce dont vous avez vraiment besoin c'est d'un linter qui s'installera dans votre espace de travail standard avec le minimum de prise de tête.
                                                                                                            
 
@@ -86,7 +86,7 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS
 
 
 
-
                                                                                                            
+
                                                                                                            D'autres éditeurs populaires ont des packages de linting similaires. Voir, par exemple :
                                                                                                            
 
@@ -100,12 +100,12 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS
 
                                                                                                            Les outils de développement inclus dans la plupart des navigateurs fournissent également des outils pour traquer les erreurs, en particulier pour le CSS.
                                                                                                            
-
                                                                                                            Note : Les erreurs HTML n'ont pas tendance à se montrer facilement avec les outils de dev, étant donné que le navigateur va essayer de corriger en fermant automatiquement mal les balises ; le validateur W3C est la meilleure façon d'obtenir des erreurs HTML — voir {{anch("Validation")}} plus haut.
                                                                                                            
+
                                                                                                            Note : Les erreurs HTML n'ont pas tendance à se montrer facilement avec les outils de dev, étant donné que le navigateur va essayer de corriger en fermant automatiquement mal les balises ; le validateur W3C est la meilleure façon d'obtenir des erreurs HTML — voir {{anch("Validation")}} plus haut.
                                                                                                            
 
                                                                                                            As an example, in Firefox the CSS inspector will show CSS declarations that aren't applied crossed out, with a warning triangle. Hovering the warning triangle will provide a descriptive error message:
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Les outils de dev des autres navigateurs ont des fonctionnalités semblables.
                                                                                                            
 
@@ -115,7 +115,7 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS
 
 
                                                                                                            Les vieux navigateurs ne supportant pas les fonctionnalités récentes
                                                                                                            
 
-
                                                                                                            C'est un problème courant, particulièrement lorsque vous devez supporter de vieux navigateurs (comme les anciennes versions d'IE) ou que vous utilisez des fonctionnalités qui sont implémentées en utilisant des préfixes CSS. En général, les fonctionnalités principales du HTML et du CSS (comme les éléments HTML basiques, les couleurs et styles de texte principaux de CSS) marchent sur la plupart des navigateurs que vous voulez supporter ; la majorité des problèmes sont découverts lorsque que vous commencez à vouloir utiliser des nouveautés comme Flexbox, ou HTML5 video/audio, ou encore plus récent, CSS Grids ou -webkit-background-clip: text.
                                                                                                            
+
                                                                                                            C'est un problème courant, particulièrement lorsque vous devez supporter de vieux navigateurs (comme les anciennes versions d'IE) ou que vous utilisez des fonctionnalités qui sont implémentées en utilisant des préfixes CSS. En général, les fonctionnalités principales du HTML et du CSS (comme les éléments HTML basiques, les couleurs et styles de texte principaux de CSS) marchent sur la plupart des navigateurs que vous voulez supporter ; la majorité des problèmes sont découverts lorsque que vous commencez à vouloir utiliser des nouveautés comme Flexbox, ou HTML5 video/audio, ou encore plus récent, CSS Grids ou -webkit-background-clip: text.
                                                                                                            Une fois que vous avez identifié une liste des potentielles technologies à problèmes que vous allez utiliser, c'est une bonne initiative des rechercher sur quels navigateurs elles sont supportées, et quelles techniques associées sont utiles. Voir {{anch("Finding help")}} plus bas.
                                                                                                            
 
@@ -123,41 +123,41 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS
 
 
                                                                                                            Certains problèmes peuvent être résolus, seulement en tirant parti des réactions naturelles du HTML/CSS.
                                                                                                            
 
-
                                                                                                            Les éléments HTML non reconnus sont traités par les navigateurs comme des éléments inline anonymes (véritablement des éléments inline avec aucune valeur sémantiques, similaires aux éléments {{htmlelement("span")}} ). Vous pouvez toujours vous référez à eux avec leurs noms, et les styler avec du CSS, par exemple — vous avez juste besoin de vous assurer qu'ils se comportent comme vous le voulez, par exemple configurer display: block; sur tous les nouveaux éléments sémantiques (comme {{htmlelement("article")}}, {{htmlelement("aside")}}, etc.), mais seulement sur les vieilles versions d'IE qui ne les reconnaissent pas (donc, IE 8 et plus faible). De cette façon les nouveaux navigateurs peuvent juste utiliser le code normalement, mais les anciennes versions d'IE seront également capables de styler ces éléments.
                                                                                                            
+
                                                                                                            Les éléments HTML non reconnus sont traités par les navigateurs comme des éléments inline anonymes (véritablement des éléments inline avec aucune valeur sémantiques, similaires aux éléments {{htmlelement("span")}} ). Vous pouvez toujours vous référez à eux avec leurs noms, et les styler avec du CSS, par exemple — vous avez juste besoin de vous assurer qu'ils se comportent comme vous le voulez, par exemple configurer display: block; sur tous les nouveaux éléments sémantiques (comme {{htmlelement("article")}}, {{htmlelement("aside")}}, etc.), mais seulement sur les vieilles versions d'IE qui ne les reconnaissent pas (donc, IE 8 et plus faible). De cette façon les nouveaux navigateurs peuvent juste utiliser le code normalement, mais les anciennes versions d'IE seront également capables de styler ces éléments.
                                                                                                            
-
                                                                                                            Note : Voir {{anch("IE conditional comments")}} pour une application efficace.
                                                                                                            
+
                                                                                                            Note : Voir {{anch("IE conditional comments")}} pour une application efficace.
                                                                                                            
 
                                                                                                            
 
 
 
-
                                                                                                            Des éléments HTML plus complexes comme <video>, <audio>, et <canvas> (et encore d'autres) ont des mécanismes naturels pour que les recours soient ajoutés, qui se basent sur le même principe décrit plus haut. Vous pouvez ajouter un contenu de repli entre la balise ouvrante et fermante, et les navigateurs ne supportant pas la feature vont effectivement ignorer les éléments extérieurs et exécuter le contenu imbriqué.
                                                                                                            
+
                                                                                                            Des éléments HTML plus complexes comme <video>, <audio>, et <canvas> (et encore d'autres) ont des mécanismes naturels pour que les recours soient ajoutés, qui se basent sur le même principe décrit plus haut. Vous pouvez ajouter un contenu de repli entre la balise ouvrante et fermante, et les navigateurs ne supportant pas la feature vont effectivement ignorer les éléments extérieurs et exécuter le contenu imbriqué.
                                                                                                            Par exemple :
                                                                                                            
 
-
                                                                                                            <video id="video" controls preload="metadata" poster="img/poster.jpg">
-  <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4">
-  <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm">
-  <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg">
-  <!-- Flash fallback -->
-  <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576">
-     <param name="movie" value="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
-     <param name="allowfullscreen" value="true" />
-     <param name="wmode" value="transparent" />
-     <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
-      <img alt="Tears of Steel poster image" src="img/poster.jpg" width="1024" height="428" title="No video playback possible, please download the video from the link below" />
-  </object>
-  <!-- Offer download -->
-  <a href="video/tears-of-steel-battle-clip-medium.mp4">Download MP4</a>
-</video>
                                                                                                            
-
-
                                                                                                            Cette exemple (issu de Creating a cross-browser video player) n'inclut pas seulement un lecteur Flash de repli pour les anciennes versions d'IE, mais aussi un lien simple vous permettant de télécharger la vidéo si jamais le lecteur Flash ne fonctionne pas, finalement l'utilisateur peut toujours accéder à la vidéo.
                                                                                                            
+
                                                                                                            <video id="video" controls preload="metadata" poster="img/poster.jpg">
+  <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4">
+  <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm">
+  <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg">
+  <!-- Flash fallback -->
+  <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576">
+     <param name="movie" value="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
+     <param name="allowfullscreen" value="true" />
+     <param name="wmode" value="transparent" />
+     <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
+      <img alt="Tears of Steel poster image" src="img/poster.jpg" width="1024" height="428" title="No video playback possible, please download the video from the link below" />
+  </object>
+  <!-- Offer download -->
+  <a href="video/tears-of-steel-battle-clip-medium.mp4">Download MP4</a>
+</video>
                                                                                                            
+
+
                                                                                                            Cette exemple (issu de Creating a cross-browser video player) n'inclut pas seulement un lecteur Flash de repli pour les anciennes versions d'IE, mais aussi un lien simple vous permettant de télécharger la vidéo si jamais le lecteur Flash ne fonctionne pas, finalement l'utilisateur peut toujours accéder à la vidéo.
                                                                                                            
-
                                                                                                            Note : les librairies tierces comme Video.js et JW Player utilisent ce type de mécanismes de recours pour fournir un support en navigateur croisé.
                                                                                                            
+
                                                                                                            Note : les librairies tierces comme Video.js et JW Player utilisent ce type de mécanismes de recours pour fournir un support en navigateur croisé.
                                                                                                            
 
                                                                                                            
 
-
                                                                                                            Les éléments des formulaire HTML5 présentent également des recours de qualités — HTML5 a introduit des types d'<input> spéciaux pour insérer des informations spécifiques dans les formulaires, en particulier sur les plateformes mobiles, où fournir une insertion de données sans difficultés est primordiale pour l'expérience utilisateur. Supporter les plateformes apporte des widgets UI spéciaux lorsque ces types d'input sont utilisés, comme le widget calendrier pour entrer des dates.
                                                                                                            
+
                                                                                                            Les éléments des formulaire HTML5 présentent également des recours de qualités — HTML5 a introduit des types d'<input> spéciaux pour insérer des informations spécifiques dans les formulaires, en particulier sur les plateformes mobiles, où fournir une insertion de données sans difficultés est primordiale pour l'expérience utilisateur. Supporter les plateformes apporte des widgets UI spéciaux lorsque ces types d'input sont utilisés, comme le widget calendrier pour entrer des dates.
                                                                                                            L'exemple suivant montre des inputs date et time :
                                                                                                            
 
@@ -172,12 +172,11 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS
   </div>
 </form>
 
-
                                                                                                            Le résultat de ce code est le suivant :
                                                                                                            
+
                                                                                                            Résultat 
                                                                                                            
 
-
 
-
                                                                                                            {{ EmbedLiveSample('Hidden_example', '100%', 150) }}
                                                                                                            
+
                                                                                                            {{ EmbedLiveSample('Résultat', '100%', 150) }}
                                                                                                            
-
                                                                                                            Note : Vous pouvez également le voir exécuté en direct depuis forms-test.html sur GitHub (voir aussi le code source).
                                                                                                            
+
                                                                                                            Note : Vous pouvez également le voir exécuté en direct depuis forms-test.html sur GitHub (voir aussi le code source).
                                                                                                            
 
                                                                                                            Si vous consultez l'exemple sur un navigateur qui supporte les technologies récentes comme Android Chrome ou iOS Safari, vous verrez le widget/fonctionnalité spécial en action quand vous essaierai de saisir des données. Sur des plateformes non compatibles comme Firefox ou Internet Explorer, les inputs vont juste recourir à un input texte normal, finalement l'utilisateur peut toujours entrer des informations.
                                                                                                            
@@ -229,15 +227,14 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS
 
                                                                                                            Comportement naturel du CSS
                                                                                                            
 
 
-
 
                                                                                                            Le CSS est sans doute meilleur en solution de recours que le HTML. Si un navigateur rencontre une déclaration ou une règle qu'il ne comprend pas, il la passe complètement sans l'appliquer ou provoquer une erreur. Cela peut être frustrant pour vous et vos utilisateurs si de telles erreurs se glissent à travers le code en production, mais au moins cela veut dire que l'ensemble du site ne va pas crasher à cause d'une erreur, et si utilisé intelligemment vous pouvez vous en servir à votre avantage.
                                                                                                            Observons un exemple — une simple boîte stylée avec du CSS, qui a certains styles apportés par différentes caractéristiques CSS3 :
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            
-
                                                                                                            Note : Vous pouvez également voir cet exemple exécuté en direct sur GitHub comme button-with-fallback.html (voir aussi le code source).
                                                                                                            
+
                                                                                                            Note : Vous pouvez également voir cet exemple exécuté en direct sur GitHub comme button-with-fallback.html (voir aussi le code source).
                                                                                                            
 
                                                                                                            Le bouton a un nombre de déclarations qui le style, mais les deux qui nous intéressent le plus sont les suivantes :
                                                                                                            
@@ -260,29 +257,29 @@ button:active {
               inset -1px -1px 3px rgba(255,255,255,0.4);
 }
 
-
                                                                                                            Ici on fournit un {{cssxref("background-color")}} RGBA qui modifie l'opacité au survol afin de donner à l'utilisateur l'information que le bouton est interactif, et une ombre {{cssxref("box-shadow")}} interne semi-transparente pour donner au bouton un peu de texture et de profondeur. Le problème est que les couleurs RGBA et les box shadows ne fonctionnent pas sur les versions d'IE plus vieilles que la 9 — dans les versions plus anciennes le background ne sera juste pas visible du tout et le texte sera illisible, pas bon du tout !
                                                                                                            
+
                                                                                                            Ici on fournit un {{cssxref("background-color")}} RGBA qui modifie l'opacité au survol afin de donner à l'utilisateur l'information que le bouton est interactif, et une ombre {{cssxref("box-shadow")}} interne semi-transparente pour donner au bouton un peu de texture et de profondeur. Le problème est que les couleurs RGBA et les box shadows ne fonctionnent pas sur les versions d'IE plus vieilles que la 9 — dans les versions plus anciennes le background ne sera juste pas visible du tout et le texte sera illisible, pas bon du tout !
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Pour résoudre ce problème, nous avons ajouté une deuxième déclaration background-color, qui précise juste une couleur hex — c'est un recours supporté par les vieux navigateurs, et agit en tant que solution de repli si les fonctionnalités belles et brillantes ne fonctionnent pas. Ce qui se passe c'est que le navigateur parcourant cette page applique pour commencer la première valeur background-color ; lorsqu'il sélectionne la deuxième déclaration background-color, il remplace la valeur initiale avec cette valeur s'il supporte les couleurs RGBA. S'il ne supporte pas, il ignorera juste toute la déclaration et continuera à avancer.
                                                                                                            
-
                                                                                                            Note : Il se produit la même chose pour les autres caractéristiques de CSS comme les blocs media queries, @font-face et @supports — s'ils ne sont pas supportés, le navigateur va juste les ignorer.
                                                                                                            
+
                                                                                                            Note : Il se produit la même chose pour les autres caractéristiques de CSS comme les blocs media queries, @font-face et @supports — s'ils ne sont pas supportés, le navigateur va juste les ignorer.
                                                                                                            
 
                                                                                                            Les commentaires conditionnels d'IE
                                                                                                            Les commentaires conditionnels d'IE sont une propriété modifiée de la syntaxe des commentaires HTML, qui peuvent être utilisés pour appliquer du code HTML de manière sélective à différentes versions d'IE. Cela s'est avéré être un mécanisme très efficace pour résoudre les bugs en navigateur croisé. La syntaxe ressemble à ça :
                                                                                                            
 
-
                                                                                                            <!--[if lte IE 8]>
-  <script src="ie-fix.js"></script>
+
                                                                                                            <!--[if lte IE 8]>
+  <script src="ie-fix.js"></script>
   <link href="ie-fix.css" rel="stylesheet" type="text/css">
-<![endif]-->
                                                                                                            
+<![endif]-->
                                                                                                            Ce block appliquera les CSS et Javascript spécifiques à IE uniquement si le navigateur qui affiche la page est IE 8 ou plus vieux. lte veux dire "moins que ou égal", mais vous pouvez aussi utiliser lt, gt, gte, ! pour NOT, et d'autre syntaxe logique.
                                                                                                            
-
                                                                                                            Note : L'article Internet Explorer Conditional Comments de Sitepoint apporte un tutoriel/référence utile pour les débutants qui explique la syntaxe des commentaires conditionnels en détail.
                                                                                                            
+
                                                                                                            Note : L'article Internet Explorer Conditional Comments de Sitepoint apporte un tutoriel/référence utile pour les débutants qui explique la syntaxe des commentaires conditionnels en détail.
                                                                                                            
 
                                                                                                            Comme vous pouvez le voir, c'est particulièrement utile pour appliquer des fixes aux vieilles versions d'IE. Le cas d'usage que nous avons mentionné plus tôt (rendre les éléments sémantiques modernes stylables sur les vieilles versions d'IE) peut être atteint facilement en utilisant des commentaires conditionnels, par exemple vous pouvez mettre quelque chose comme ça dans votre feuille de style IE :
                                                                                                            
@@ -300,11 +297,11 @@ button:active {
 
 
                                                                                                            Support de sélecteur
                                                                                                            
 
-
                                                                                                            Naturellement, aucune caractéristiques CSS ne s'appliquera si vous n'utilisez pas les bons sélecteurs pour sélectionner l'élément que vous voulez styler ! Si vous écrivez juste mal un sélecteur alors le style ne sera juste pas celui attendu sur aucun navigateur, vous devez juste résoudre le problème et trouver ce qui ne va pas avec votre sélecteur. Nous trouvons utile d'inspecter l'élément que vous essayez de styler en utilisant l'outil de dev de votre navigateur, ensuite regarder l'arborescence du fil d'Ariane du DOM que les inspecteurs du DOM fournissent en général afin de voir si votre sélecteur est pertinent par rapport à ce fil d'Ariane.
                                                                                                            
+
                                                                                                            Naturellement, aucune caractéristiques CSS ne s'appliquera si vous n'utilisez pas les bons sélecteurs pour sélectionner l'élément que vous voulez styler ! Si vous écrivez juste mal un sélecteur alors le style ne sera juste pas celui attendu sur aucun navigateur, vous devez juste résoudre le problème et trouver ce qui ne va pas avec votre sélecteur. Nous trouvons utile d'inspecter l'élément que vous essayez de styler en utilisant l'outil de dev de votre navigateur, ensuite regarder l'arborescence du fil d'Ariane du DOM que les inspecteurs du DOM fournissent en général afin de voir si votre sélecteur est pertinent par rapport à ce fil d'Ariane.
                                                                                                            Par exemple, dans l'outil de dev de Firefox, vous obtenez ce genre rendement en bas de l'inspecteur du DOM :
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Si pour cet exemple vous essayez d'utiliser ce sélecteur, vous vous rendrez compte qu'il ne sélectionnera pas l'élément input comme désiré :
                                                                                                            
 
@@ -312,7 +309,7 @@ button:active {
 
 
                                                                                                            (L'input date du formulaire n'est pas directement dans le <form> ; vous feriez mieux d'utiliser un sélecteur descendant général plutôt qu'un sélecteur d'enfant).
                                                                                                            
 
-
                                                                                                            Il y a néanmoins un autre problème qui apparaît sur les versions d'IE plus anciennes que la 9 c'est qu'il n'y a aucun nouveau sélecteur (principalement les pseudo-classes et les pseudo-éléments comme :nth-of-type, :not, ::selection, etc.) qui marche. Si vous voulez les utiliser dans votre CSS et que vous devez supporter les anciennes versions d'IE, une bonne initiative et d'utiliser la librairie Selectivizr de Keith Clark — c'est une petite librairie Javascript qui s'exécute au-dessus d'une librairie Javascript existante comme  jQuery ou MooTools.
                                                                                                            
+
                                                                                                            Il y a néanmoins un autre problème qui apparaît sur les versions d'IE plus anciennes que la 9 c'est qu'il n'y a aucun nouveau sélecteur (principalement les pseudo-classes et les pseudo-éléments comme :nth-of-type, :not, ::selection, etc.) qui marche. Si vous voulez les utiliser dans votre CSS et que vous devez supporter les anciennes versions d'IE, une bonne initiative et d'utiliser la librairie Selectivizr de Keith Clark — c'est une petite librairie Javascript qui s'exécute au-dessus d'une librairie Javascript existante comme  jQuery ou MooTools.
                                                                                                              
  
                                                                                                            1. Afin de tester cet exemple, faites une copie locale de selectivizr-example-start.html. Si vous le regarder s'exécuter en direct, vous verrez qu'il contient deux paragraphes, dont l'un est stylé. Nous avons sélectionné le paragraphe avec p:first-child, qui ne fonctionne pas sur les anciennes versions d'IE.
                                                                                                              2. 
@@ -327,7 +324,7 @@ button:active {
 
 
                                                                                                              Si vous essayer d'exécuter cette page sur une vieille version d'IE, cela devrait bien fonctionner.
                                                                                                              
 
-
                                                                                                              
+
                                                                                                              
 
 
                                                                                                              Gestion des préfixes CSS
                                                                                                              
 
@@ -350,7 +347,7 @@ background-image: linear-gradient(to right,green,yellow);
 
 
                                                                                                              La première ligne déclare une propriété {{cssxref("transform")}} avec un préfixe -webkit- — c'était nécessaire pour que la transformation fonctionne sur Chrome, etc jusqu'à ce que la fonctionnalité soit finalisée et beaucoup de navigateurs ont ajouté une version de la propriété sans préfixes (au moment de la rédaction, Chrome supportait les deux versions).
                                                                                                              
 
-
                                                                                                              Les trois dernières images montrent trois versions différentes de la fonction linear-gradient(), qui est utilisée pour générer un dégradé linéaire dans la background d'un élément :
                                                                                                              
+
                                                                                                              Les trois dernières images montrent trois versions différentes de la fonction linear-gradient(), qui est utilisée pour générer un dégradé linéaire dans la background d'un élément :
                                                                                                              
 
 
                                                                                                                
  
                                                                                                              1. La première a un préfixe -moz-, et montre une version plutôt ancienne de la syntaxe (Firefox)
                                                                                                                2. 
@@ -371,7 +368,7 @@ background-image: linear-gradient(to right,green,yellow);
  
                                                                                                              2. Entreposer une référence à cet élément dans une variable, par exemple :
   
                                                                                                                var test = document.getElementById('hplogo');
                                                                                                                
  
                                                                                                                3. 
- 
                                                                                                              3. Maintenant essayez d'appliquer une nouvelle valeur pour la propriété CSS qui vous intéresse sur cet élément ; vous pouvez le faire en utilisant la propriété style de l'élément, par exemple essayez de taper ça dans votre console Javascript :
                                                                                                                4. 
+ 
                                                                                                              4. Maintenant essayez d'appliquer une nouvelle valeur pour la propriété CSS qui vous intéresse sur cet élément ; vous pouvez le faire en utilisant la propriété style de l'élément, par exemple essayez de taper ça dans votre console Javascript :
                                                                                                                5. 
  
                                                                                                              5. 
   
                                                                                                                test.style.transform = 'rotate(90deg)'
 test.style.webkitTransform = 'rotate(90deg)'
                                                                                                                
@@ -434,22 +431,22 @@ transform: rotate(90deg);
 
 
 
                                                                                                                
-
                                                                                                                Note : Historiquement les développeurs web étaient habitués à utiliser des fichiers CSS appelés resets, qui supprimaient tous les styles par défaut des navigateurs qui s'appliquaient au HTML, et ensuite appliquaient leurs propres styles pour tout le reste — c'était fait pour rendre le style sur un projet plus cohérent, et réduire les possibles problèmes en navigateur croisé, spécialement pour les choses issues de la mise en page. Toutefois, cela a récemment été défini comme exagéré. Le meilleur équivalent que nous avons de nos jours c'est le normalize.css, un peu de CSS propre qui style discrètement par-dessus le style par défaut des navigateurs afin de rendre les éléments plus cohérents et fixe quelques problèmes de disposition. Nous vous recommandons d'appliquer normalize.css sur toutes vos pages HTML.
                                                                                                                
+
                                                                                                                Note : Historiquement les développeurs web étaient habitués à utiliser des fichiers CSS appelés resets, qui supprimaient tous les styles par défaut des navigateurs qui s'appliquaient au HTML, et ensuite appliquaient leurs propres styles pour tout le reste — c'était fait pour rendre le style sur un projet plus cohérent, et réduire les possibles problèmes en navigateur croisé, spécialement pour les choses issues de la mise en page. Toutefois, cela a récemment été défini comme exagéré. Le meilleur équivalent que nous avons de nos jours c'est le normalize.css, un peu de CSS propre qui style discrètement par-dessus le style par défaut des navigateurs afin de rendre les éléments plus cohérents et fixe quelques problèmes de disposition. Nous vous recommandons d'appliquer normalize.css sur toutes vos pages HTML.
                                                                                                                
 
                                                                                                                
 
 
                                                                                                                
-
                                                                                                                Note :  Lorsque vous essayer de localiser un problème de disposition difficile, une bonne technique et d'ajouter une couleur éclatante {{cssxref("outline")}} sur l'élément dérangeant, ou sur tous les éléments à côté. Cela facilite la tâche pour voir où tous les éléments sont placés. Voir Debug your CSS with outline visualizations pour plus de détails...
                                                                                                                
+
                                                                                                                Note : Lorsque vous essayer de localiser un problème de disposition difficile, une bonne technique et d'ajouter une couleur éclatante {{cssxref("outline")}} sur l'élément dérangeant, ou sur tous les éléments à côté. Cela facilite la tâche pour voir où tous les éléments sont placés. Voir Debug your CSS with outline visualizations pour plus de détails...
                                                                                                                
 
                                                                                                                
 
 
                                                                                                                Support pour les nouvelles caractéristiques de disposition
                                                                                                                
 
-
                                                                                                                La plupart du travail de mise en page sur le web aujourd'hui et réalisé en utilisant les floats — c'est parce que les floats sont bien supportés (depuis IE 4, bien qu'il y ait un certain nombre de bugs qui auront besoin d'être examinés si vous essayez de supporter IE aussi loin). Il n'y a néanmoins pas de véritables explications sur la mise en page — utiliser les floats comme nous les utilisons est un vrai hack — et ils ont de sérieuses limites (par ex. voir Why Flexbox?)
                                                                                                                
+
                                                                                                                La plupart du travail de mise en page sur le web aujourd'hui et réalisé en utilisant les floats — c'est parce que les floats sont bien supportés (depuis IE 4, bien qu'il y ait un certain nombre de bugs qui auront besoin d'être examinés si vous essayez de supporter IE aussi loin). Il n'y a néanmoins pas de véritables explications sur la mise en page — utiliser les floats comme nous les utilisons est un vrai hack — et ils ont de sérieuses limites (par ex. voir Why Flexbox?)
                                                                                                                
 
-
                                                                                                                Plus récemment, des mécanismes dédiés à la disposition ont fait leur apparition, comme Flexbox et CSS Grids, qui rendent les tâches ordinaires de disposition bien plus simples et enlèvent les défauts. Ils ne sont cependant pas bien supportés dans les navigateurs :
                                                                                                                
+
                                                                                                                Plus récemment, des mécanismes dédiés à la disposition ont fait leur apparition, comme Flexbox et CSS Grids, qui rendent les tâches ordinaires de disposition bien plus simples et enlèvent les défauts. Ils ne sont cependant pas bien supportés dans les navigateurs :
                                                                                                                
 
 
                                                                                                                  
  
                                                                                                                • Les grilles CSS sont très récentes ; au moment de la rédaction, elles n'étaient supportées que par les toutes nouvelles versions des navigateurs modernes.
                                                                                                                  • 
- 
                                                                                                                • Flexbox est bien supportée dans les navigateurs modernes, mais amène des problèmes dans les vieux navigateurs. IE9 ne le supporte pas du tout, et IE 10 et les vieilles versions d'iOS/desktop Safari supportent respectivement des vieilles versions incompatibles des spécifications de flexbox. Ceci amène à s'intéresser au jonglage des préfixes de navigateur si vous voulez essayer d'utiliser flexbox sur tous ces navigateurs (voir Advanced Cross-Browser Flexbox pour vous faire une idée).
                                                                                                                  • 
+ 
                                                                                                                • Flexbox est bien supportée dans les navigateurs modernes, mais amène des problèmes dans les vieux navigateurs. IE9 ne le supporte pas du tout, et IE 10 et les vieilles versions d'iOS/desktop Safari supportent respectivement des vieilles versions incompatibles des spécifications de flexbox. Ceci amène à s'intéresser au jonglage des préfixes de navigateur si vous voulez essayer d'utiliser flexbox sur tous ces navigateurs (voir Advanced Cross-Browser Flexbox pour vous faire une idée).
                                                                                                                  • 
 
                                                                                                                
 
 
                                                                                                                Les fonctionnalités de disposition ne sont pas aussi simples pour fournir des solutions de repli que de simples couleurs, ombres ou dégradés. Si les propriétés de disposition sont ignorées, la totalité de votre design sera réduit en pièces. De ce fait, vous devez utiliser une fonctionnalité de détection pour détecter si les navigateurs qui consultent votre site supportent ces caractéristiques de disposition, et appliquer différentes dispositions de manière sélective selon le résultat (nous couvrirons les fonctionnalités de détection dans un article à venir).
                                                                                                                
@@ -457,14 +454,14 @@ transform: rotate(90deg);
 
                                                                                                                Par exemple, vous pourriez appliquer une disposition flexbox sur les navigateurs modernes, et aussi appliquer une disposition en float pour les plus vieux navigateurs qui ne supportent pas flexbox.
                                                                                                                
 
 
                                                                                                                
-
                                                                                                                Note : Il y a une fonctionnalité assez récente en CSS appelé @supports, qui vous permet d'implémenter des tests de détection de fonctionnalités natives.
                                                                                                                
+
                                                                                                                Note : Il y a une fonctionnalité assez récente en CSS appelé @supports, qui vous permet d'implémenter des tests de détection de fonctionnalités natives.
                                                                                                                
 
                                                                                                                
 
 
                                                                                                                Les problèmes de responsive design
                                                                                                                
 
-
                                                                                                                Le design responsive est la pratique de créer des dispositions web qui s'adaptent en fonction des facteurs de formes de l'appareil — par exemple différentes tailles d'écran, l'orientation (portait ou paysage), ou la résolution. Une disposition pour ordinateur de bureau par exemple paraîtra atroce lorsqu'elle sera affichée sur un appareil mobile, vous allez donc devoir fournir une disposition appropriée aux mobiles en utilisant les media queries, et assurez-vous qu'il est appliqué correctement en utilisant viewport. Vous pouvez trouver un bilan précis de telles pratiques dans The building blocks of responsive design.
                                                                                                                
+
                                                                                                                Le design responsive est la pratique de créer des dispositions web qui s'adaptent en fonction des facteurs de formes de l'appareil — par exemple différentes tailles d'écran, l'orientation (portait ou paysage), ou la résolution. Une disposition pour ordinateur de bureau par exemple paraîtra atroce lorsqu'elle sera affichée sur un appareil mobile, vous allez donc devoir fournir une disposition appropriée aux mobiles en utilisant les media queries, et assurez-vous qu'il est appliqué correctement en utilisant viewport. Vous pouvez trouver un bilan précis de telles pratiques dans The building blocks of responsive design.
                                                                                                                
 
-
                                                                                                                La résolution est également très préoccupante — par exemple, les appareils mobiles sont moins susceptibles d'avoir besoin de grosses images lourdes que des ordinateurs de bureau, et ont davantage tendance à avoir des connexions internet plus lentes et sans doute un échange de données coûteux qui gaspille la bande passante qui est un problème supplémentaire. De plus, certains appareils peuvent avoir une gamme de plusieurs résolutions, ce qui veut dire que des petites images peuvent s'afficher pixelisées. Il y a un nombre de techniques qui vous permette de travailler autour de tels problèmes, des simples mobile first media queries, aux plus complexes responsive image techniques.
                                                                                                                
+
                                                                                                                La résolution est également très préoccupante — par exemple, les appareils mobiles sont moins susceptibles d'avoir besoin de grosses images lourdes que des ordinateurs de bureau, et ont davantage tendance à avoir des connexions internet plus lentes et sans doute un échange de données coûteux qui gaspille la bande passante qui est un problème supplémentaire. De plus, certains appareils peuvent avoir une gamme de plusieurs résolutions, ce qui veut dire que des petites images peuvent s'afficher pixelisées. Il y a un nombre de techniques qui vous permette de travailler autour de tels problèmes, des simples mobile first media queries, aux plus complexes responsive image techniques.
                                                                                                                
 
 
                                                                                                                Une autre difficulté qui peut présenter des problèmes c'est le support des fonctionnalités par les navigateurs qui rendent les techniques suscitées possibles. Les media queries ne sont pas supportés sur IE 8 ou plus vieux, donc si vous voulez utiliser une disposition mobile en premier lieu puis une disposition pour ordinateur de bureau qui applique aux vieilles versions d'IE, vous devrez appliquer un media querie {{glossary("polyfill")}} à votre page, comme css3-mediaqueries-js ou Respond.js.
                                                                                                                
 
@@ -477,14 +474,14 @@ transform: rotate(90deg);
 
                                                                                                                Pour utiliser le Mozilla Developer Network (MDN), la plupart des gens font une recherche de la technologie sur laquelle ils essayent de trouver des informations, et ajoutent le terme "mdn", par exemple "mdn HTML5 video". MDN contient plusieurs types de contenus utiles :
                                                                                                                
 
 
 
 
                                                                                                                caniuse.com fournit des informations de support, tout au long avec des ressources externes. Par exemple, voir http://caniuse.com/#search=video (vous avez juste à entrer la fonctionnalité que vous recherchez dans la boîte de recherche)
                                                                                                                
 
-
                                                                                                                stackoverflow.com (SO) est un forum en ligne où vous pouvez poser des questions et avez un ensemble de développeurs partageant leurs solutions, observez les commentaires passés, et aidez les autres développeurs. Nous vous conseillons de chercher et de regarder s'il existe déjà une réponse à votre question, avant de poster une nouvelle question. Par exemple, nous avons cherché pour "cross browser html5 video" sur SO, et très rapidement la solution HTML5 Video with full cross browser compatibility est remontée.
                                                                                                                
+
                                                                                                                stackoverflow.com (SO) est un forum en ligne où vous pouvez poser des questions et avez un ensemble de développeurs partageant leurs solutions, observez les commentaires passés, et aidez les autres développeurs. Nous vous conseillons de chercher et de regarder s'il existe déjà une réponse à votre question, avant de poster une nouvelle question. Par exemple, nous avons cherché pour "cross browser html5 video" sur SO, et très rapidement la solution HTML5 Video with full cross browser compatibility est remontée.
                                                                                                                
 
 
                                                                                                                Par ailleurs, essayez de chercher votre moteur de recherche favori pour trouver une réponse à vos problèmes. C'est souvent utile de chercher les messages d'erreur spécifiques si vous en avez — d'autres développeurs seront susceptibles d'avoir les mêmes problèmes que vous
                                                                                                                
 
@@ -499,12 +496,12 @@ transform: rotate(90deg);
 
                                                                                                                Dans ce module
                                                                                                                
 
 
diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/index.html
index 22d0837e04..4aa0ab6aaa 100644
--- a/files/fr/learn/tools_and_testing/cross_browser_testing/index.html
+++ b/files/fr/learn/tools_and_testing/cross_browser_testing/index.html
@@ -20,29 +20,29 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing
 ---
 
                                                                                                                {{LearnSidebar}}
                                                                                                                
 
-
                                                                                                                Ce module se concentre sur le test de projets Web sur différents navigateurs. Nous cherchons à identifier votre public cible (par exemple, de quels utilisateurs, navigateurs et appareils avez-vous le plus besoin de vous soucier?), comment procéder aux tests, les principaux problèmes auxquels vous serez confronté avec différents types de code et comment les atténuer, quels outils sont les plus utiles pour vour aider à tester et résoudre les problèmes, et comment utiliser l'automatisation pour accélérer les tests.
                                                                                                                
+
                                                                                                                Ce module se concentre sur le test de projets Web sur différents navigateurs. Nous cherchons à identifier votre public cible (par exemple, de quels utilisateurs, navigateurs et appareils avez-vous le plus besoin de vous soucier?), comment procéder aux tests, les principaux problèmes auxquels vous serez confronté avec différents types de code et comment les atténuer, quels outils sont les plus utiles pour vour aider à tester et résoudre les problèmes, et comment utiliser l'automatisation pour accélérer les tests.
                                                                                                                
 
 
                                                                                                                Prérequis
                                                                                                                
 
-
                                                                                                                Vous devez vraiment apprendre les bases des langages HTML, CSS, et JavaScript de base avant d'essayer d'utiliser les outils détaillés ici.
                                                                                                                
+
                                                                                                                Vous devez vraiment apprendre les bases des langages HTML, CSS, et JavaScript de base avant d'essayer d'utiliser les outils détaillés ici.
                                                                                                                
 
 
                                                                                                                Guides
                                                                                                                
 
 
                                                                                                                
- 
                                                                                                                Introduction aux tests multi-navigateurs
                                                                                                                
+ 
                                                                                                                Introduction aux tests multi-navigateurs
                                                                                                                
  
                                                                                                                Cet article débute le module en donnant un aperçu du sujet des tests multi-navigateurs, en répondant à des questions telles que "qu'est-ce que les tests multi-navigateurs?", "quels sont les types de problèmes les plus courants que vous rencontrerez?", et "quelles sont les principales approches pour tester, identifier et résoudre les problèmes?"
                                                                                                                
- 
                                                                                                                Stratégies de réalisation des tests
                                                                                                                
+ 
                                                                                                                Stratégies de réalisation des tests
                                                                                                                
  
                                                                                                                Ensuite, nous explorons la réalisation de tests, en cherchant à identifier un public cible (par exemple, quels navigateurs, appareils et autres segments devez-vous vous assurer qu'ils soient testés), des stratégies de test low fi (procurez-vous une gamme d'appareils et de machines virtuelles et faire des tests adhoc si nécessaire), des stratégies de haute technologie (automatisation, utilisation d'applications de test dédiées), et des tests avec des groupes d'utilisateurs.
                                                                                                                
- 
                                                                                                                Gérer les problèmes HTML et CSS courants
                                                                                                                
+ 
                                                                                                                Gérer les problèmes HTML et CSS courants
                                                                                                                
  
                                                                                                                Nous allons maintenant examiner spécifiquement les problèmes courants entre navigateurs que vous rencontrerez dans le code HTML et CSS, et quels outils peuvent être utilisés pour éviter les problèmes ou résoudre les problèmes qui se produisent. Cela inclut le linting code, la gestion des préfixes CSS, l'utilisation d'outils de développement de navigateur pour localiser les problèmes, utiliser des polyfills pour ajouter un support dans les navigateurs, résoudre les problèmes de design responsive, etc.
                                                                                                                
- 
                                                                                                                Gestion des problèmes JavaScript courants
                                                                                                                
- 
                                                                                                                Nous allons maintenant examiner les problèmes JavaScript courants entre navigateurs et comment les résoudre. Cela inclu des informations sur l'utilisation des outils de développement de navigateur pour localiser et résoudre les problèmes, l'utilisation de polyfills et de librairies pour contourner les problèmes, la mise en œuvre des fonctionnalités JavaScript modernes dans les navigateurs plus anciens, etc.
                                                                                                                
- 
                                                                                                                Gérer les problèmes d'accessibilité courants
                                                                                                                
+ 
                                                                                                                Gestion des problèmes JavaScript courants
                                                                                                                
+ 
                                                                                                                Nous allons maintenant examiner les problèmes JavaScript courants entre navigateurs et comment les résoudre. Cela inclu des informations sur l'utilisation des outils de développement de navigateur pour localiser et résoudre les problèmes, l'utilisation de polyfills et de librairies pour contourner les problèmes, la mise en œuvre des fonctionnalités JavaScript modernes dans les navigateurs plus anciens, etc.
                                                                                                                
+ 
                                                                                                                Gérer les problèmes d'accessibilité courants
                                                                                                                
  
                                                                                                                Ensuite, nous tournons notre attention vers l'accessibilité, en fournissant des informations sur les problèmes courants, comment faire des tests simples, et comment utiliser les outils d'audit / d'automatisation pour trouver les problèmes d'accessibilité.
                                                                                                                
- 
                                                                                                                Implémentation de la détection des fonctionnalités
                                                                                                                
- 
                                                                                                                La détection de fonctionnalités implique de déterminer si un navigateur prend en charge un certain bloc de code et d'exécuter un code différent selon qu'il le fait (ou non), afin que le navigateur puisse toujours fournir une expérience de travail plutôt en panne / erreur dans certains navigateurs. Cet article explique comment écrire votre propre détection de fonctionnalités simple, comment utiliser une librairie pour accélérer la mise en œuvre et des fonctionnalités natives pour la détection de fonctionnalités telles que @supports.
                                                                                                                
- 
                                                                                                                Introduction aux tests automatisés
                                                                                                                
+ 
                                                                                                                Implémentation de la détection des fonctionnalités
                                                                                                                
+ 
                                                                                                                La détection de fonctionnalités implique de déterminer si un navigateur prend en charge un certain bloc de code et d'exécuter un code différent selon qu'il le fait (ou non), afin que le navigateur puisse toujours fournir une expérience de travail plutôt en panne / erreur dans certains navigateurs. Cet article explique comment écrire votre propre détection de fonctionnalités simple, comment utiliser une librairie pour accélérer la mise en œuvre et des fonctionnalités natives pour la détection de fonctionnalités telles que @supports.
                                                                                                                
+ 
                                                                                                                Introduction aux tests automatisés
                                                                                                                
  
                                                                                                                Exécuter manuellement des tests sur plusieurs navigateurs et appareils, plusieurs fois par jour, peut devenir fastidieux et prendre du temps. Pour gérer cela efficacement, vous devez vous familiariser avec les outils d'automatisation. Dans cet article, nous examinons ce qui est disponible, comment utiliser les exécuteurs de tâches et les bases de l'utilisation des applications d'automatisation de test de navigateur commerciales telles que Sauce Labs et Browser Stack.
                                                                                                                
- 
                                                                                                                Configuration de votre propre environnement d'automatisation de test
                                                                                                                
+ 
                                                                                                                Configuration de votre propre environnement d'automatisation de test
                                                                                                                
  
                                                                                                                Dans cet article, nous allons vous apprendre à installer votre propre environnement d'automatisation et à exécuter vos propres tests à l'aide de Selenium/WebDriver et d'une librairie de test telle que selenium-webdriver pour Node. Nous verrons également comment intégrer votre environnement de test local avec des applications commerciales telles que celles décrites dans l'article précédent.
                                                                                                                
 
                                                                                                                
diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.html
index 64ee2e66ef..bfd78a3d43 100644
--- a/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.html
+++ b/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.html
@@ -13,13 +13,13 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction
 
 
                                                                                                                {{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}
                                                                                                                
 
-
                                                                                                                Cet article commence en donnant un aperçu sur le sujet des test sur navigateurs (croisé), répondant aux questions telles que "qu'est-ce que le test en navigateur croisé?", "Quels sont les problèmes les plus communs que vous allez rencontrer?", et "quelles sont les principales approches pour tester, identifier, et fixer les problèmes?"
                                                                                                                
+
                                                                                                                Cet article commence en donnant un aperçu sur le sujet des test sur navigateurs (croisé), répondant aux questions telles que "qu'est-ce que le test en navigateur croisé?", "Quels sont les problèmes les plus communs que vous allez rencontrer?", et "quelles sont les principales approches pour tester, identifier, et fixer les problèmes?"
                                                                                                                
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis :
    
-    
                                                                                                            Connaissances avec le noyau des langages HTML, CSS, et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.
                                                                                                            
+    
                                                                                                            Connaissances avec le noyau des langages HTML, CSS, et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.
                                                                                                            
                                                                                                                		
   
                                                                                                            
   
                                                                                                            
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                            
+
                                                                                                            
-   
+   
@@ -41,22 +41,22 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction
 
                                                                                                            Souvenez-vous que vous n'êtes pas votre utilisateur — uniquement parce que votre site fonctionne sur votre Macbook Pro ou votre Galaxy Nexus haut de gamme, cela ne veut pas dire qu'il fonctionnera pour tout vos utilisateurs — Il y a encore un paquet de tests à effectuer !
                                                                                                            
-
                                                                                                            Note: Make the web work for everyone fournit une perspective plus précise sur les différents navigateurs que les gens utilisent, leur part de marché, et les problèmes de compatibilité entre navigateurs.
                                                                                                            
+
                                                                                                            Note : Make the web work for everyone fournit une perspective plus précise sur les différents navigateurs que les gens utilisent, leur part de marché, et les problèmes de compatibilité entre navigateurs.
                                                                                                            
 
                                                                                                            Il est important de préciser quelque termes de terminologie. Pour commencer, quand on parle de "travailler en navigateurs croisés", on veut vraiment dire que chaque navigateur doit être capable  de fournir une expérience utilisateur acceptable. C'est potentiellement bon pour un site de ne pas fournir exactement la même expérience sur tous les navigateurs, tant que le noyau des fonctionnalités reste accessible. Avec des navigateurs modernes vous pourrez ajouter quelques animations 3D et stylisées, tandis que sur de plus vieux navigateurs vous pouvez juste utiliser un design plus plat représentant la même information. Tant que le propriétaire du site est content, alors vous avez terminé votre travail.
                                                                                                            D'un autre côté, ce n'est pas ok qu'un site soit fonctionnel pour les personnes voyantes mais complètement inaccessible pour des utilisateurs qui ont des problèmes de vision  parce que leur application de lecture d'écran ne peut lire aucune des données stockées sur le site.
                                                                                                            
 
-
                                                                                                            De plus, lorsqu'on dit "à travers un nombre acceptable de navigateurs", on ne veut pas dire 100% des navigateurs dans le monde — c'est tout simplement impossible. Vous pouvez faire des recherches d'informations (analyse sectorielle) pour savoir quels sont les types de supports et de navigateurs que vos utilisateurs vont utiliser (comme on peut en parler dans le second article — voir Gotta test 'em all?), mais vous ne pouvez pas tout garantir. En tant que developpeur web, vous devez convenir avec le demandeur du site d'une liste de navigateurs et d'appareils sur lesquels le code doit absolument fonctionner, au-delà de ces prérequis, vous devez vous assurer de donner un maximum de chances aux autres navigateurs de pouvoir afficher votre contenu grâce à du code préventif. Cette étape représente le défi le plus important d'un développeur web.
                                                                                                            
+
                                                                                                            De plus, lorsqu'on dit "à travers un nombre acceptable de navigateurs", on ne veut pas dire 100% des navigateurs dans le monde — c'est tout simplement impossible. Vous pouvez faire des recherches d'informations (analyse sectorielle) pour savoir quels sont les types de supports et de navigateurs que vos utilisateurs vont utiliser (comme on peut en parler dans le second article — voir Gotta test 'em all?), mais vous ne pouvez pas tout garantir. En tant que developpeur web, vous devez convenir avec le demandeur du site d'une liste de navigateurs et d'appareils sur lesquels le code doit absolument fonctionner, au-delà de ces prérequis, vous devez vous assurer de donner un maximum de chances aux autres navigateurs de pouvoir afficher votre contenu grâce à du code préventif. Cette étape représente le défi le plus important d'un développeur web.
                                                                                                            
-
                                                                                                            Note: Nous traiterons également du code préventif dans ce module.
                                                                                                            
+
                                                                                                            Note : Nous traiterons également du code préventif dans ce module.
                                                                                                            
 
                                                                                                            Pourquoi y'a-t-il des problèmes en navigateur croisé?
                                                                                                            
 
-
                                                                                                            Il y a beaucoup de raisons différentes qui amènent des problèmes en navigateur croisé, et notez qu'ici nous parlons des bug qui se comportent différemment selon les navigateurs / supports / préférences de navigateurs. Avant même d'attaquer les problèmes en navigateurs croisés, commencez déjà par fixer encore et encore tous les bugs présents dans votre propre code (voir Debugging HTML, Debugging CSS, et What went wrong? Troubleshooting JavaScript des sujets précédents afin de vous rafraichir la mémoire si nécessaire).
                                                                                                            
+
                                                                                                            Il y a beaucoup de raisons différentes qui amènent des problèmes en navigateur croisé, et notez qu'ici nous parlons des bug qui se comportent différemment selon les navigateurs / supports / préférences de navigateurs. Avant même d'attaquer les problèmes en navigateurs croisés, commencez déjà par fixer encore et encore tous les bugs présents dans votre propre code (voir Debugging HTML, Debugging CSS, et What went wrong? Troubleshooting JavaScript des sujets précédents afin de vous rafraichir la mémoire si nécessaire).
                                                                                                            Les problèmes en navigateurs croisés se produisent le plus fréquemment parce que :
                                                                                                            
 
@@ -95,7 +95,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction
 
                                                                                                            Vous devriez mettre en place une liste des différents champs de problèmes potentiels.
                                                                                                            
-
                                                                                                            Note: Vous pouvez trouver les informations concernant les différentes technologies et leur support par les navigateurs en recherchant les différentes fonctionnalités sur MDN — le site sur lequel vous vous trouvez! Vous pouvrez également consulter  caniuse.com, pour d'autres détails utiles.
                                                                                                            
+
                                                                                                            Note : Vous pouvez trouver les informations concernant les différentes technologies et leur support par les navigateurs en recherchant les différentes fonctionnalités sur MDN — le site sur lequel vous vous trouvez! Vous pouvrez également consulter  caniuse.com, pour d'autres détails utiles.
                                                                                                            
 
                                                                                                            Une fois que vous êtes d'accord sur ces détails, vous pouvez continuer et démarrer le développement du site.
                                                                                                            
@@ -126,7 +126,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction
 
 
                                                                                                            A cet instant, résolvez tous les problèmes que vous avez trouvé sur votre nouveau code.
                                                                                                            
 
-
                                                                                                            Ensuite, vous devriez essayer d'étendre votre liste de navigaturs de test à une liste complète des navigateurs du public cible et commencer à vous concentrer sur l'élimination des problèmes en navigateurs croisés (voir le prochaine article determining your target browsers pour plus d'informations). Par exemple:
                                                                                                            
+
                                                                                                            Ensuite, vous devriez essayer d'étendre votre liste de navigaturs de test à une liste complète des navigateurs du public cible et commencer à vous concentrer sur l'élimination des problèmes en navigateurs croisés (voir le prochaine article determining your target browsers pour plus d'informations). Par exemple:
                                                                                                              
  
                                                                                                            • Essayez de tester vos dernières modifications sur tous les navigateurs modernes que vous pouvez — incluant Firefox, Chrome, Opera, IE, Edge, et Safari sur ordinateur (Mac, Windows, et Linux, idéallement).
                                                                                                              • 
@@ -171,7 +171,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction
 
 
                                                                                                              Ce n'est pas forcément de votre faute — si un bug existe sur un navigateur, alors on peut espérer que le distributeur le fixera rapidement. Il est peut-être même déjà réparé — par exemple si un bug est présent sur la release 49 de Firefox, mais qu'il n'existe plus sur Firefox Nightly (version52), alors il a été fixé. S'il n'a pas été résolu, alors vous pouvez déposer un bug (voir {{anch("Reporting bugs")}}, plus bas).
                                                                                                              
 
-
                                                                                                              Si c'est de votre faute, vous devez le résoudre ! Trouver la cause d'un bug implique la même stratégie que pour n'importe quel bug de développement web (à nouveau, voir Debugging HTML, Debugging CSS, et What went wrong? Troubleshooting JavaScript). Une fois que vous avez découvert ce qui causait le bug, vous devez décider comment est-ce que vous allez travailler sur le navigateur en particulier qui vous pose problèmes — vous ne pouvez pas juste modifier le code du problème, cela risque de casser le code sur un autre navigateur. En général, l'approche veut qu'on fasse bifurquer le code dans une certaine direction, par exemple utilisez une fonctionnalité de détecton en code Javascript pour détecter les situations où une fonctionnalité ne marche pas, et éxecuter un code différent qui fonctionnera dans ce cas.
                                                                                                              
+
                                                                                                              Si c'est de votre faute, vous devez le résoudre ! Trouver la cause d'un bug implique la même stratégie que pour n'importe quel bug de développement web (à nouveau, voir Debugging HTML, Debugging CSS, et What went wrong? Troubleshooting JavaScript). Une fois que vous avez découvert ce qui causait le bug, vous devez décider comment est-ce que vous allez travailler sur le navigateur en particulier qui vous pose problèmes — vous ne pouvez pas juste modifier le code du problème, cela risque de casser le code sur un autre navigateur. En général, l'approche veut qu'on fasse bifurquer le code dans une certaine direction, par exemple utilisez une fonctionnalité de détecton en code Javascript pour détecter les situations où une fonctionnalité ne marche pas, et éxecuter un code différent qui fonctionnera dans ce cas.
                                                                                                              
 
 
                                                                                                              Lorsque le fix a été créé, vous devrez repéter votre processus de test afin de vous assurer que votre réparation fonctionne bien, et n'a pas causé une faille autre part sur le site ou sur un autre navigateur.
                                                                                                              
 
@@ -196,12 +196,12 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction
 
                                                                                                              Sur ce module
                                                                                                              
 
 
diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.html
index 956c757ad4..d49fe44c33 100644
--- a/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.html
+++ b/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.html
@@ -17,14 +17,14 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript
 
 
                                                                                                              {{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS","Learn/Tools_and_testing/Cross_browser_testing/Accessibility", "Learn/Tools_and_testing/Cross_browser_testing")}}
                                                                                                              
 
-
                                                                                                              Nous allons maintenant aborder les problèmes Javascript en navigateur croisé et comment les résoudre. Cela comprend des informations sur l'utilisation  des outils de dev des navigateurs pour localiser et fixer les problèmes, l'utilisation des Polyfills et de librairies pour contourner les problèmes, utiliser les fonctionnalités modernes de Javascript sur des vieux navigateurs, et plus encore.
                                                                                                              
+
                                                                                                              Nous allons maintenant aborder les problèmes Javascript en navigateur croisé et comment les résoudre. Cela comprend des informations sur l'utilisation  des outils de dev des navigateurs pour localiser et fixer les problèmes, l'utilisation des Polyfills et de librairies pour contourner les problèmes, utiliser les fonctionnalités modernes de Javascript sur des vieux navigateurs, et plus encore.
                                                                                                              
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis:Etre familier avec les bases des langage HTML, CSS, et JavaScript.Etre familier avec les bases des langage HTML, CSS, et JavaScript.
   
                                                                                                            
   
                                                                                                            
    Objectif:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                            
+
                                                                                                            
@@ -40,44 +40,44 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript
 
 
                                                                                                            Historiquement, Javascript présentaient des problèmes de compatibilité entre navigateurs — retour aux années 1990, les navigateurs majeurs jusqu'alors (Internet Explorer et Netscape) implémentaient des scripts dans différents langages (Netscape avait JavaScript, IE avait JScript et proposait aussi VBScript comme une option), et bien que JavaScript et JScript étaient compatibles dans une certaine mesure (les deux sont basés sur la spécification {{glossary("ECMAScript")}} ), les éléments étaient souvent implémentés avec des conflits, des incompatibilités, ce qui causait bien des cauchemards aux développeurs.
                                                                                                            
 
-
                                                                                                            De tels problèmes d'incompabilités ont persistés jusqu'au début des années 2000, étant donné que les vieux navigateurs étaient encore utilisés et devaient donc encore être supportés par les site web. C'est une des raisons principale pour laquelle les librairies comme JQuery ont vu le jour — pour faire abstraction des différences entre les implémentations des navigateur (par ex. voir le bout de code dans Lancement d'une requête HTTP) comme ça la développeurs n'ont qu'à écrire un simple morceau de code (voir jQuery.ajax()). JQuery (ou qu'importe la librarie que vous utilisez) procédera ensuite au traitement en arrière-plan, donc vous n'aurez pas à le faire.
                                                                                                            
+
                                                                                                            De tels problèmes d'incompabilités ont persistés jusqu'au début des années 2000, étant donné que les vieux navigateurs étaient encore utilisés et devaient donc encore être supportés par les site web. C'est une des raisons principale pour laquelle les librairies comme JQuery ont vu le jour — pour faire abstraction des différences entre les implémentations des navigateur (par ex. voir le bout de code dans Lancement d'une requête HTTP) comme ça la développeurs n'ont qu'à écrire un simple morceau de code (voir jQuery.ajax()). JQuery (ou qu'importe la librarie que vous utilisez) procédera ensuite au traitement en arrière-plan, donc vous n'aurez pas à le faire.
                                                                                                            
 
-
                                                                                                            Les choses se sont bien améliorées depuis ; les navigateurs modernes font un bon travail en supportant "les fonctionnalités classiques de JavaScript", et les conditions pour utiliser ce genre de code ont diminué comme les prérequis pour supporter les plus vieux navigateurs ont diminué (gardez toutefois à l'esprit qu'elles n'ont pas tout entièrement disparues).
                                                                                                            
+
                                                                                                            Les choses se sont bien améliorées depuis ; les navigateurs modernes font un bon travail en supportant "les fonctionnalités classiques de JavaScript", et les conditions pour utiliser ce genre de code ont diminué comme les prérequis pour supporter les plus vieux navigateurs ont diminué (gardez toutefois à l'esprit qu'elles n'ont pas tout entièrement disparues).
                                                                                                            
 
-
                                                                                                            De nos jours, la plupart des problèmes de JavaScript en navigateur croisé sont :
                                                                                                            
+
                                                                                                            De nos jours, la plupart des problèmes de JavaScript en navigateur croisé sont :
                                                                                                              
- 
                                                                                                            • Lorsque la mauvaise qualité du détecteur de code du navigateur, la fonctionnalité de détection de code ou l'utilisation des préfixes vendeurs empêchent les navigateurs d'exécuter du code qu'autrement ils pourraient utiliser sans difficultés.
                                                                                                              • 
- 
                                                                                                            • Lorsque les développeurs se servent de fonctionnalités nouvelles/naissantes JavaScript (par exemple les fonctionnalités ECMAScript 6 / ECMAScript Next, les APIs web modernes...) dans leur code, et trouvent que de telles fonctionnalités ne marchent pas sur d'anciens navigateurs.
                                                                                                              • 
+ 
                                                                                                            • Lorsque la mauvaise qualité du détecteur de code du navigateur, la fonctionnalité de détection de code ou l'utilisation des préfixes vendeurs empêchent les navigateurs d'exécuter du code qu'autrement ils pourraient utiliser sans difficultés.
                                                                                                              • 
+ 
                                                                                                            • Lorsque les développeurs se servent de fonctionnalités nouvelles/naissantes JavaScript (par exemple les fonctionnalités ECMAScript 6 / ECMAScript Next, les APIs web modernes...) dans leur code, et trouvent que de telles fonctionnalités ne marchent pas sur d'anciens navigateurs.
                                                                                                              • 
 
                                                                                                            Nous aborderons tout ces problèmes et d'autres encore plus bas.
                                                                                                            Résoudre les problèmes généraux en JavaScript
                                                                                                            
 
-
                                                                                                            Comme nous le disions dans l'article précédent sur le HTML/CSS, vous devriez vous assurer que votre code fonctionne en général, avant de vous concentrer sur les problèmes en navigateur-croisé. Si vous n'êtes pas encore trop familier avec les bases de La résolution JavaScript, vous devriez étudier cet article avant de continuer. Il y a plusieurs problèmes courants en JavaScript avec lesquelles vous devez être attentif, comme :
                                                                                                            
+
                                                                                                            Comme nous le disions dans l'article précédent sur le HTML/CSS, vous devriez vous assurer que votre code fonctionne en général, avant de vous concentrer sur les problèmes en navigateur-croisé. Si vous n'êtes pas encore trop familier avec les bases de La résolution JavaScript, vous devriez étudier cet article avant de continuer. Il y a plusieurs problèmes courants en JavaScript avec lesquelles vous devez être attentif, comme :
                                                                                                              
- 
                                                                                                            • Les problèmes basiques de syntaxe et de logique (une fois encore, aller voir La résolution JavaScript).
                                                                                                              • 
- 
                                                                                                            • Définir des variables sûres, etc. qui sont défnies dans le périmètre correct, et que vous ne rencontrez pas des conflits entre des items déclarés à des endroits différents (voir Function scope and conflicts).
                                                                                                              • 
- 
                                                                                                            • La confusion à propos de this, concernant le périmètre auquel il s'applique, et par conséquent si sa valeur et celle que vous souhaitiez. Vous pouvez lire Qu'est-ce que "this" ? pour une simple introduction ; vous devriez également étudier des exemples comme this one, qui présente un modèle typique de sauvegarde du périmètre de this dans une variable séparée, puis utilise cette variable dans une fonction imbriquée pour que vous soyez sûr que vous appliquez la fonction au bon périmètre de this.
                                                                                                              • 
- 
                                                                                                            • Utiliser les fonctions de manière incorrecte dans les boucles — par exemple, dans bad-for-loop.html (voir code source), on boucle sur 10 itérations, à chaque fois on créé un paragraphe et on y ajoute un évènement gestionnaire onclick. Lorsqu'ils sont cliqués, chacun d'entre eux doit fournir un message d'alerte contenant son numéro (la valeur de i au moment où il était créé), cependant chacun d'entre eux retourne i comme 11, parce que les boucle for font toutes leurs itérations avant que les fonctions imbriquées ne soit appelées. Si vous voulez que ça marche correctement, vous devez définir une fonction pour ajouter le gestionnaire séparément, l'appellant à chaque itération et lui passer la valeur courante de para et i à chaque fois (ou quelque chose de similaire). Voir good-for-loop.html (voir également le code source) pour une version qui fonctionne.
                                                                                                              • 
- 
                                                                                                            • S'assurer que les opérations asynchrones sont retournées avant d'essayer d'utiliser les valeurs qu'elles retournent. Par exemple, cet exemple Ajax vérifie que la requête est complète et que la réponse a été retournée avant qu'on ait essayé d'utiliser cette réponse pour quoi que ce soit. Ce type d'opération a été rendue plus simple à gérer grâce à l'introduction des Promises dans le langage JavaScript.
                                                                                                              • 
+ 
                                                                                                            • Les problèmes basiques de syntaxe et de logique (une fois encore, aller voir La résolution JavaScript).
                                                                                                              • 
+ 
                                                                                                            • Définir des variables sûres, etc. qui sont défnies dans le périmètre correct, et que vous ne rencontrez pas des conflits entre des items déclarés à des endroits différents (voir Function scope and conflicts).
                                                                                                              • 
+ 
                                                                                                            • La confusion à propos de this, concernant le périmètre auquel il s'applique, et par conséquent si sa valeur et celle que vous souhaitiez. Vous pouvez lire Qu'est-ce que "this" ? pour une simple introduction ; vous devriez également étudier des exemples comme this one, qui présente un modèle typique de sauvegarde du périmètre de this dans une variable séparée, puis utilise cette variable dans une fonction imbriquée pour que vous soyez sûr que vous appliquez la fonction au bon périmètre de this.
                                                                                                              • 
+ 
                                                                                                            • Utiliser les fonctions de manière incorrecte dans les boucles — par exemple, dans bad-for-loop.html (voir code source), on boucle sur 10 itérations, à chaque fois on créé un paragraphe et on y ajoute un évènement gestionnaire onclick. Lorsqu'ils sont cliqués, chacun d'entre eux doit fournir un message d'alerte contenant son numéro (la valeur de i au moment où il était créé), cependant chacun d'entre eux retourne i comme 11, parce que les boucle for font toutes leurs itérations avant que les fonctions imbriquées ne soit appelées. Si vous voulez que ça marche correctement, vous devez définir une fonction pour ajouter le gestionnaire séparément, l'appellant à chaque itération et lui passer la valeur courante de para et i à chaque fois (ou quelque chose de similaire). Voir good-for-loop.html (voir également le code source) pour une version qui fonctionne.
                                                                                                              • 
+ 
                                                                                                            • S'assurer que les opérations asynchrones sont retournées avant d'essayer d'utiliser les valeurs qu'elles retournent. Par exemple, cet exemple Ajax vérifie que la requête est complète et que la réponse a été retournée avant qu'on ait essayé d'utiliser cette réponse pour quoi que ce soit. Ce type d'opération a été rendue plus simple à gérer grâce à l'introduction des Promises dans le langage JavaScript.
                                                                                                              • 
 
                                                                                                            
-
                                                                                                            Note : Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make a des discussions intéressantes à propos de ces erreurs courantes et plus encore.
                                                                                                            
+
                                                                                                            Note : Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make a des discussions intéressantes à propos de ces erreurs courantes et plus encore.
                                                                                                            
 
                                                                                                            Les linters
                                                                                                            
 
-
                                                                                                            Comme avec le HTML et le CSS, vous pouvez garantir une meilleure qualité, vous êtes moins susceptible de faire des erreurs en utilisant un linter, qui vous signale les erreurs et met en évidence les avertissement concernant les mauvaises pratiques, etc., et peut être configuré pour être plus stricte ou plus coulant dans leurs rapport d'erreur/avertissement. Les linters JavaScript/ECMAScript que nous vous recommandons sont JSHint et ESLint ; ils peuvent être utilisés de différentes façons, nous détaillerons certaines d'entre elles plus bas.
                                                                                                            
+
                                                                                                            Comme avec le HTML et le CSS, vous pouvez garantir une meilleure qualité, vous êtes moins susceptible de faire des erreurs en utilisant un linter, qui vous signale les erreurs et met en évidence les avertissement concernant les mauvaises pratiques, etc., et peut être configuré pour être plus stricte ou plus coulant dans leurs rapport d'erreur/avertissement. Les linters JavaScript/ECMAScript que nous vous recommandons sont JSHint et ESLint ; ils peuvent être utilisés de différentes façons, nous détaillerons certaines d'entre elles plus bas.
                                                                                                            En ligne
                                                                                                            La page d'accueil de JSHint fournit un linter en ligne, qui vous permet d'entrer votre code JavaScript sur la gauche et vous fournit un résultat sur la droite, incluant des indicateurs, des avertissements, et des erreurs.
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Les plugins des éditeurs de code
                                                                                                            
 
@@ -93,7 +93,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript
  
                                                                                                          • Une fois que les packages ont terminé de s'installer, essayez de charger un fichier JavaScript : vous verrez tous les problèmes surlignés en vert (pour les avertissements) et des cercles rouges (pour les erreurs) à côté des numéros de lignes, et un panneau séparé en bas qui vous fournit les numéros de lignes, les messages d'erreur, et parfois des valeur suggérées ou d'autres solutions.
                                                                                                            • 
 
-
                                                                                                            D'autres éditeurs répandus ont des packages similaires de linting disponibles. Par exemple, voir la section "Plugins for text editors and IDEs" de la page d'installation de JSHint.
                                                                                                            
+
                                                                                                            D'autres éditeurs répandus ont des packages similaires de linting disponibles. Par exemple, voir la section "Plugins for text editors and IDEs" de la page d'installation de JSHint.
                                                                                                            Autres usages
                                                                                                            
 
@@ -104,10 +104,10 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript
 
                                                                                                            npm install -g jshint
 
                                                                                                            
 
-
                                                                                                            Vous pouvez ensuite indiquer à ces outils les fichiers JavaScript que vous voulez lint, par exemple :Vous pouvez également utiliser ces outils avec un exécuteur de tâche/outil de build comme Gulp ou Webpack pour linter automatiquement votre JavaScript pendant le développement. (voir Using a task runner to automate testing tools dans un article ultérieur). Voir ESLint integrations pour les options de ESLint ; JSHint est supporté nativement par Grunt, et a également d'autre intégrations possibles, par ex. JSHint loader for Webpack.
                                                                                                            
+
                                                                                                            Vous pouvez ensuite indiquer à ces outils les fichiers JavaScript que vous voulez lint, par exemple :Vous pouvez également utiliser ces outils avec un exécuteur de tâche/outil de build comme Gulp ou Webpack pour linter automatiquement votre JavaScript pendant le développement. (voir Using a task runner to automate testing tools dans un article ultérieur). Voir ESLint integrations pour les options de ESLint ; JSHint est supporté nativement par Grunt, et a également d'autre intégrations possibles, par ex. JSHint loader for Webpack.
                                                                                                            
-
                                                                                                            Note : ESLint prend un peu plus de temps à l'installation et à la configuration que JSHint, mais il est également plus puissant.
                                                                                                            
+
                                                                                                            Note : ESLint prend un peu plus de temps à l'installation et à la configuration que JSHint, mais il est également plus puissant.
                                                                                                            
 
                                                                                                            Les outils de développement des navigateurs
                                                                                                            
@@ -116,7 +116,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript
 
 
                                                                                                            Faîtes une copie locale de notre exemple broken-ajax.html (voir aussi le code source). Si vous regardez dans la console, vous verrez le résultat suivant :
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Le message d'erreur affiche "TypeError: jsonObj is null", et le numéro de ligne signifiée et le 37. Si nous regardons le code source, la section de code concernée est celle-ci :
                                                                                                            
 
@@ -127,7 +127,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript
 
   ...
 
-
                                                                                                            Le code casse aussitôt qu'on essaye d'accèder à jsonObj (ce qui comme vous pouvez vous y attendre, est supposé être un objet JSON). C'est supposé aller le chercher dans un fichier externe .json en utilisant l'appel XMLHttpRequest suivant :
                                                                                                            
+
                                                                                                            Le code casse aussitôt qu'on essaye d'accèder à jsonObj (ce qui comme vous pouvez vous y attendre, est supposé être un objet JSON). C'est supposé aller le chercher dans un fichier externe .json en utilisant l'appel XMLHttpRequest suivant :
                                                                                                            var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
 var request = new XMLHttpRequest();
@@ -142,7 +142,7 @@ showHeroes(superHeroes);
                                                                                                            L'API Console
                                                                                                            
 
-
                                                                                                            Vous savez peut-être déjà ce qui ne va pas avec ce code, mais analysons-le un peu plus pour vous montrer comment vous pouvez l'examiner. Premièrement, il y a une API Console qui permet au code JavaScript d'interragir avec la console JavaScript du navigateur. Il y a un nombre de fonctionnalités disponibles, mais la principale que vous utiliserez le plus souvent est console.log(), qui affiche un message d'erreur personnalisé dans la console.
                                                                                                            
+
                                                                                                            Vous savez peut-être déjà ce qui ne va pas avec ce code, mais analysons-le un peu plus pour vous montrer comment vous pouvez l'examiner. Premièrement, il y a une API Console qui permet au code JavaScript d'interragir avec la console JavaScript du navigateur. Il y a un nombre de fonctionnalités disponibles, mais la principale que vous utiliserez le plus souvent est console.log(), qui affiche un message d'erreur personnalisé dans la console.
                                                                                                            Essayer d'insérer la ligne suivante juste avant la ligne 31 (en gras au-dessus) :
                                                                                                            
 
@@ -150,7 +150,7 @@ showHeroes(superHeroes);
                                                                                                            Rafraîchissez la page dans le navigateur, et vous obtiendrez un résultat dans la console comme celui-ci :
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Le résultat de console.log() montre que l'objet superHeroes ne semble pas contenir quoi que ce soit, bien que vous remarquerez que l'erreur a maintenant changé en "TypeError: heroes is undefined". Cela montre que l'erreur est intermittente, mettant ainsi en évidence qu'il s'agit d'une erreur asynchrone. Corrigeons l'erreur actuelle et avançons — retirer la ligne console.log(), et mettez à jour ce bloc de code :
                                                                                                            
 
@@ -172,15 +172,15 @@ showHeroes(superHeroes);
                                                                                                            Utiliser le débogueur JavaScript
                                                                                                            
 
-
                                                                                                            Nous avons résolu un problème, mais nous sommes toujours coincés avec le message d'erreur "TypeError: heroes is undefined", reporté à la ligne 51. Examinons-la maintenant, en utilisant une fonctionnalité plus sophistiquée des outils de développement web : le débogueur JavaScript comme il est appellé dans Firefox.
                                                                                                            
+
                                                                                                            Nous avons résolu un problème, mais nous sommes toujours coincés avec le message d'erreur "TypeError: heroes is undefined", reporté à la ligne 51. Examinons-la maintenant, en utilisant une fonctionnalité plus sophistiquée des outils de développement web : le débogueur JavaScript comme il est appellé dans Firefox.
                                                                                                            
-
                                                                                                            Note : Des outils similaires sont disponibles dans d'autres navigateurs ; le Sources tab dans Chrome, le Débogueur dans Safari (voir Safari Web Development Tools), etc.
                                                                                                            
+
                                                                                                            Note : Des outils similaires sont disponibles dans d'autres navigateurs ; le Sources tab dans Chrome, le Débogueur dans Safari (voir Safari Web Development Tools), etc.
                                                                                                            
 
                                                                                                            Dans Firefox, le Débogueur se présente comme suit :
                                                                                                            
 
-
                                                                                                            
+
                                                                                                              
  
                                                                                                            • Sur la gauche, vous pouvez sélectionner le script que vous voulez déboguer (dans ce cas nous n'en n'avons qu'un seul).
                                                                                                              • 
@@ -192,7 +192,7 @@ showHeroes(superHeroes);
 
 
                                                                                                              Mettons-nous au travail. Pour commencer, nous savons que l'erreur est renvoyée à la ligne 51. Cliquez sur la ligne numéro 51 dans le panneau central pour y ajouter un point d'arrêt (vous verrez une flèche bleue apparaître au-dessus de celle-ci). Maintenant rafraichissez la page (Cmd/Ctrl + R) — la navigateur arrêtera l'exécution du code à la ligne 51. A ce moment, le panneau de droite va se mettre à jour pour montrer des informations très utiles.
                                                                                                              
 
-
                                                                                                              
+
                                                                                                              
 
 
                                                                                                                
  
                                                                                                              • En-dessous de Points d'arrêt, vous verrez le détail du point d'arrêt que vous avez configuré.
                                                                                                                • 
@@ -206,15 +206,15 @@ showHeroes(superHeroes);
  
                                                                                                              • Développez la portée showHeroes — vous pouvez voir depuis celle-ci que la variable heroes n'est pas définie, indiquant qu'accèder à la propriété members de jsonObj (première ligne de la fonction) ne marche pas.
                                                                                                                • 
  
                                                                                                              • Vous pouvez également voir que la variable jsonObj stock une chaîne de caractères, pas un objet JSON.
                                                                                                                • 
  
                                                                                                              • En examinant plus loin la pile d'exécutuion, cliquez sur request.onload dans la section Pile d'exécution. La vue va se mettre à jour pour afficher la fonction request.onload dans le panneau central, et sa portée dans la section Portées.
                                                                                                                • 
- 
                                                                                                              • Maintenant si vous développez la portée de request.onload, vous verrez que la variable superHeroes est également une chaîne de caractères, pas un objet. C'est la solution — notre appel XMLHttpRequest retourne le JSON comme du texte, pas comme du JSON.
                                                                                                                • 
+ 
                                                                                                              • Maintenant si vous développez la portée de request.onload, vous verrez que la variable superHeroes est également une chaîne de caractères, pas un objet. C'est la solution — notre appel XMLHttpRequest retourne le JSON comme du texte, pas comme du JSON.
                                                                                                                • 
 
 
 
                                                                                                                
-
                                                                                                                Note : Nous aimerions que vous essayez de résoudre ce problème par vous-même. Pour vous donner un indice, vous avez le choix entre tell the XMLHttpRequest object explicitly to return JSON format, ou conversion entre objet et texte après l'arrivée de la réponse. Si vous restez bloqué, consultez notre exemple fixed-ajax.html.
                                                                                                                
+
                                                                                                                Note : Nous aimerions que vous essayez de résoudre ce problème par vous-même. Pour vous donner un indice, vous avez le choix entre tell the XMLHttpRequest object explicitly to return JSON format, ou conversion entre objet et texte après l'arrivée de la réponse. Si vous restez bloqué, consultez notre exemple fixed-ajax.html.
                                                                                                                
 
                                                                                                                
 
 
                                                                                                                
-
                                                                                                                Note : L'onglet débogueur a tant d'autres fonctionnalités utiles que nous n'aborderons pas ici, par exemple les points d'arrêt conditionnels et les expressions espionnes. Pour bien plus d'informations, voyez la page du Débogueur.
                                                                                                                
+
                                                                                                                Note : L'onglet débogueur a tant d'autres fonctionnalités utiles que nous n'aborderons pas ici, par exemple les points d'arrêt conditionnels et les expressions espionnes. Pour bien plus d'informations, voyez la page du Débogueur.
                                                                                                                
 
                                                                                                                
 
 
                                                                                                                Les problèmes de performance
                                                                                                                
@@ -225,11 +225,11 @@ showHeroes(superHeroes);
  
                                                                                                              • Eviter de charger plus de JavaSacript que nécessaire, réunissez vos scripts dans un seul fichier en utilisant une solution comme Browserify. En général, réduire le nombre de requêtes HTTP est très bon pour la performance.
                                                                                                                • 
  
                                                                                                              • S'assurer que vos fichiers sont le plus petits en les minifiant avant de les charger sur votre serveur de production. Minifier réduit tout le code en une seule et immense ligne, donnant au fichier une taille beaucoup moins importante. C'est vilain, mais vous n'avez pas besoin de la lire lorsque c'est terminé ! Cette tâche est la mieux réalisée avec un outil de minification comme Uglify (il y aussi une version en ligne — voir JSCompress.com).
                                                                                                                • 
  
                                                                                                              • Lorsque que vous utilisez des APIs, assurez-vous de désactiver les fonctionnalités de l'API quand elles ne sont pas utilisées ; certains appels d'API peuvent être très coûteux en puissance de traitement. Par exemple, lorsque vous montrez un stream video, assurez-vous que s'est désactivé quand vous ne pouvez pas le voir. Quand vous tracer la localisation d'un appareil en utilisant des appels répétés de Géolocalisation, assurez-vous de le désactiver quand l'utilisateur arrête de l'utiliser.
                                                                                                                • 
- 
                                                                                                              • Les animations peuvent être très coûteuses pour la performance. Beaucoup de librairies JavaScript fournissent des possibilités d'animation programmée avec JavaScript, mais c'est beaucoup plus rentable de faire les animations via les fonctionnalités natives des navigateurs comme les Animations CSS (ou la naissante Web Animations API) qu'en JavaScript. Lisez  Animating like you just don’t care with Element.animate pour des théories très utiles sur l'animation coûteuse, des conseils sur comment améliorer la performance des animations, et des informations à propos de l'API Web Animations.
                                                                                                                • 
+ 
                                                                                                              • Les animations peuvent être très coûteuses pour la performance. Beaucoup de librairies JavaScript fournissent des possibilités d'animation programmée avec JavaScript, mais c'est beaucoup plus rentable de faire les animations via les fonctionnalités natives des navigateurs comme les Animations CSS (ou la naissante Web Animations API) qu'en JavaScript. Lisez  Animating like you just don’t care with Element.animate pour des théories très utiles sur l'animation coûteuse, des conseils sur comment améliorer la performance des animations, et des informations à propos de l'API Web Animations.
                                                                                                                • 
 
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Le Writing Fast, Memory-Efficient JavaScript de Addy Osmani contient beaucoup de détails et de astuces impeccables pour améliorer les performances en JavaScript.
                                                                                                              
+
                                                                                                              Note : Le Writing Fast, Memory-Efficient JavaScript de Addy Osmani contient beaucoup de détails et de astuces impeccables pour améliorer les performances en JavaScript.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Les problèmes JavaScript en navigateur croisé
                                                                                                              
@@ -245,58 +245,58 @@ showHeroes(superHeroes);
 
 
                                                                                                              Utiliser des fonctionnalités JavaScript/API modernes
                                                                                                              
 
-
                                                                                                              Dans l'article précédent nous décrivions quelques façons dont les erreurs HTML et CSS et les fonctionnalités non reconnues peuvent être gérées grâce à la nature du langage. JavaScript n'est toutefois pas autant permissif que le HTML et le CSS — si le moteur de JavaScript rencontre une faute ou une syntaxe inconnue, le plus souvent il renverra des erreurs.
                                                                                                              
+
                                                                                                              Dans l'article précédent nous décrivions quelques façons dont les erreurs HTML et CSS et les fonctionnalités non reconnues peuvent être gérées grâce à la nature du langage. JavaScript n'est toutefois pas autant permissif que le HTML et le CSS — si le moteur de JavaScript rencontre une faute ou une syntaxe inconnue, le plus souvent il renverra des erreurs.
                                                                                                              
 
-
                                                                                                              Il y a plusieurs fonctionnalités modernes du langage JavaScript décrites dans les versions récentes des spécifications (ECMAScript 6 / ECMAScript Next) qui ne marchent tout simplement pas sur les plus vieux navigateurs. Certaines d'entre elles sont des améliorations syntaxiques (essentiellement une façon plus simple, adéquate d'écrire ce que vous pouvez déjà écrire en utilisant des fonctionnalités existantes), et certaines offrent de nouvelles possibilités intéressantes.
                                                                                                              
+
                                                                                                              Il y a plusieurs fonctionnalités modernes du langage JavaScript décrites dans les versions récentes des spécifications (ECMAScript 6 / ECMAScript Next) qui ne marchent tout simplement pas sur les plus vieux navigateurs. Certaines d'entre elles sont des améliorations syntaxiques (essentiellement une façon plus simple, adéquate d'écrire ce que vous pouvez déjà écrire en utilisant des fonctionnalités existantes), et certaines offrent de nouvelles possibilités intéressantes.
                                                                                                              
 
 
                                                                                                              Par exemple :
                                                                                                              
 
 
                                                                                                                
- 
                                                                                                              • Les Promises sont une super nouvelle fonctionnalité pour réaliser des opérations asynchrones et s'assurer que c'est opérations sont complètes avant que le code qui s'appuie sur eux ne soit utiliser pour autre chose. A titre d'exemple, l'API Fetch (un équivalent moderne de XMLHTTPRequest) utilise les promises pour rapporter les ressources à travers le réseau et s'assurer que la réponse a été retournée avant qu'elles ne soient utilisées (par exemple afficher une image dans un élément {{htmlelement("img")}} ). Elles ne sont pas du tout supportées par IE mais sont supportées par tous les navigateurs modernes.
                                                                                                                • 
- 
                                                                                                              • Les fonctions fléchées apportent une syntaxe courte, plus convenable pour écrire des anonymous functions, ce qui a aussi d'autres avantages (voir Fonctions Fléchées). Comme exemple rapide, voir arrow-function.html (voir aussi le code source). Les fonctions fléchées sont supportées par tous les navigateurs modernes, excepté par IE et Safari.
                                                                                                                • 
- 
                                                                                                              • Déclarer le mode strict en haut de votre code JavaScript l'amène à être décomposé en une liste de règles plus strictes, impliquant que plus d'avertissements et d'erreurs seront retournés, et certaines choses seront rejetées qui auraient normalement été acceptées. C'est probablement une bonne idée d'utiliser le mode stricte, comme il permet une amélioration et une meilleur efficacité du code, bien qu'il ait un support limité/incomplet selon les navigateurs (voir Le mode strict dans les navigateurs).
                                                                                                                • 
- 
                                                                                                              • Les tableaux typés permettent au code JavaScript d'accéder et de manipuler des données binaires brutes, ce qui est indispensable pour les APIs navigateur par exemple qui commencent à manipuler les streams des données vidéo et audio brutes.
                                                                                                                • 
+ 
                                                                                                              • Les Promises sont une super nouvelle fonctionnalité pour réaliser des opérations asynchrones et s'assurer que c'est opérations sont complètes avant que le code qui s'appuie sur eux ne soit utiliser pour autre chose. A titre d'exemple, l'API Fetch (un équivalent moderne de XMLHTTPRequest) utilise les promises pour rapporter les ressources à travers le réseau et s'assurer que la réponse a été retournée avant qu'elles ne soient utilisées (par exemple afficher une image dans un élément {{htmlelement("img")}} ). Elles ne sont pas du tout supportées par IE mais sont supportées par tous les navigateurs modernes.
                                                                                                                • 
+ 
                                                                                                              • Les fonctions fléchées apportent une syntaxe courte, plus convenable pour écrire des anonymous functions, ce qui a aussi d'autres avantages (voir Fonctions Fléchées). Comme exemple rapide, voir arrow-function.html (voir aussi le code source). Les fonctions fléchées sont supportées par tous les navigateurs modernes, excepté par IE et Safari.
                                                                                                                • 
+ 
                                                                                                              • Déclarer le mode strict en haut de votre code JavaScript l'amène à être décomposé en une liste de règles plus strictes, impliquant que plus d'avertissements et d'erreurs seront retournés, et certaines choses seront rejetées qui auraient normalement été acceptées. C'est probablement une bonne idée d'utiliser le mode stricte, comme il permet une amélioration et une meilleur efficacité du code, bien qu'il ait un support limité/incomplet selon les navigateurs (voir Le mode strict dans les navigateurs).
                                                                                                                • 
+ 
                                                                                                              • Les tableaux typés permettent au code JavaScript d'accéder et de manipuler des données binaires brutes, ce qui est indispensable pour les APIs navigateur par exemple qui commencent à manipuler les streams des données vidéo et audio brutes.
                                                                                                                • 
 
                                                                                                              
 
 
                                                                                                              Il y a également beaucoup de nouvelles APIs qui apparaissent dans les navigateurs récents, qui ne fonctionnent pas sur les plus vieux navigateurs, par exemple :
                                                                                                              
 
 
                                                                                                                
- 
                                                                                                              • L'API IndexedDB, L'API Web Storage, et d'autres pour stocker des données d'un site web côté client.
                                                                                                                • 
- 
                                                                                                              • L'API Web Workers pour exécuter du JavaScript dans un thread séparé, aidant à améliorer la performance.
                                                                                                                • 
- 
                                                                                                              • L'API WebGl pour des graphiques 3D réels.
                                                                                                                • 
- 
                                                                                                              • L'API Web Audio pour de la manipulation audio avancée.
                                                                                                                • 
- 
                                                                                                              • L'API WebRTC pour la connectivité multi-personne, de la vidéo/audio en temps réel (par ex. une vidéo conférence)
                                                                                                                • 
- 
                                                                                                              • L'API WebVR pour concevoir des expériences en réalité virtuelle dans le navigateur (par ex. contrôler une vue 3D avec de l'introduction de données depuis le disque dur VR)
                                                                                                                • 
+ 
                                                                                                              • L'API IndexedDB, L'API Web Storage, et d'autres pour stocker des données d'un site web côté client.
                                                                                                                • 
+ 
                                                                                                              • L'API Web Workers pour exécuter du JavaScript dans un thread séparé, aidant à améliorer la performance.
                                                                                                                • 
+ 
                                                                                                              • L'API WebGl pour des graphiques 3D réels.
                                                                                                                • 
+ 
                                                                                                              • L'API Web Audio pour de la manipulation audio avancée.
                                                                                                                • 
+ 
                                                                                                              • L'API WebRTC pour la connectivité multi-personne, de la vidéo/audio en temps réel (par ex. une vidéo conférence)
                                                                                                                • 
+ 
                                                                                                              • L'API WebVR pour concevoir des expériences en réalité virtuelle dans le navigateur (par ex. contrôler une vue 3D avec de l'introduction de données depuis le disque dur VR)
                                                                                                                • 
 
                                                                                                              
 
 
                                                                                                              Il y a plusieurs stratégies pour gérer les incompatibilités entre navigateurs concernant le support de fonctionnalité ; explorons les plus courantes.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Ces stratégies n'existent pas dans des endroits distincts — bien sûr, vous pouvez les combiner autant que nécessaire. Par exemple, vous pourriez utiliser une fonction de détection pour déterminer si une fonctionnalité est supportée ; si elle ne l'est pas, vous pouvez ensuite exécuter le code pour charger un polyfill ou une libraire pour gérer le manque de support.
                                                                                                              
+
                                                                                                              Note : Ces stratégies n'existent pas dans des endroits distincts — bien sûr, vous pouvez les combiner autant que nécessaire. Par exemple, vous pourriez utiliser une fonction de détection pour déterminer si une fonctionnalité est supportée ; si elle ne l'est pas, vous pouvez ensuite exécuter le code pour charger un polyfill ou une libraire pour gérer le manque de support.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Fonctionnalité de détection
                                                                                                              
 
-
                                                                                                              L'idée derrière une fonctionnalité de détection est que vous pouvez exécuter un test pour déterminer si une fonctionnalité est supportée dans le navigateur courant, et ensuite exécuter conditionnellement un code pour fournir une expérience acceptable sur chaque navigateur qui supporte et ne supporte pas la fonctionnalité. A titre d'exemple rapide, l'API Geolocalisation (qui présente des données de localisation pour l'appareil sur lequel le navigateur est en train d'être exécuté) a un point d'entrée principal pour son utilisation — une propriété geolocation disponible dans l'objet global Navigator.  Par conséquent, vous pouvez détecter si le navigateur supporte la géolocalisation ou non en utilisant quelque chose comme suit :
                                                                                                              
+
                                                                                                              L'idée derrière une fonctionnalité de détection est que vous pouvez exécuter un test pour déterminer si une fonctionnalité est supportée dans le navigateur courant, et ensuite exécuter conditionnellement un code pour fournir une expérience acceptable sur chaque navigateur qui supporte et ne supporte pas la fonctionnalité. A titre d'exemple rapide, l'API Geolocalisation (qui présente des données de localisation pour l'appareil sur lequel le navigateur est en train d'être exécuté) a un point d'entrée principal pour son utilisation — une propriété geolocation disponible dans l'objet global Navigator.  Par conséquent, vous pouvez détecter si le navigateur supporte la géolocalisation ou non en utilisant quelque chose comme suit :
                                                                                                              
 
-
                                                                                                              if("geolocation" in navigator) {
-  navigator.geolocation.getCurrentPosition(function(position) {
+
                                                                                                              if("geolocation" in navigator) {
+  navigator.geolocation.getCurrentPosition(function(position) {
     // show the location on a map, perhaps using the Google Maps API
-  });
-} else {
+  });
+} else {
   // Give the user a choice of static maps instead perhaps
-}
                                                                                                              
+}
                                                                                                              
 
-
                                                                                                              Vous pouvez également écrire un test de ce type pour une fonctionnalité CSS, par exemple en testant l'existence de element.style.property (par ex. paragraph.style.transform !== undefined). Mais autant pour CSS que JavaScript, il est probablement préférable d'utiliser une librairie de fonction de détection établie plutôt que d'écrire la votre tout le temps. Modernizr est la norme standard pour les tests de fonction de détection.
                                                                                                              
+
                                                                                                              Vous pouvez également écrire un test de ce type pour une fonctionnalité CSS, par exemple en testant l'existence de element.style.property (par ex. paragraph.style.transform !== undefined). Mais autant pour CSS que JavaScript, il est probablement préférable d'utiliser une librairie de fonction de détection établie plutôt que d'écrire la votre tout le temps. Modernizr est la norme standard pour les tests de fonction de détection.
                                                                                                              
 
 
                                                                                                              Enfin, ne confondez pas fonction de détection avec le détecteur navigateur (qui détecte quel navigateur en particulier accède au site) — c'est une terrible pratique qui devrait être découragée à tout prix. Voir {{anch("Using bad browser sniffing code")}}, plus tard, pour plus de détails.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Certaines fonctionnalités sont connues pour être indétectables — voir la liste des Undetectables de Modernizr.
                                                                                                              
+
                                                                                                              Note : Certaines fonctionnalités sont connues pour être indétectables — voir la liste des Undetectables de Modernizr.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : La fonction de détection sera couverte avec beaucoup plus de détails dans son propre article dédié, plus tard dans le module.
                                                                                                              
+
                                                                                                              Note : La fonction de détection sera couverte avec beaucoup plus de détails dans son propre article dédié, plus tard dans le module.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Les librairies
                                                                                                              
@@ -307,22 +307,22 @@ showHeroes(superHeroes);
 
 
                                                                                                                
  
                                                                                                              • Les librairies utilitaires : Fournissent une quantité de fonctions pour rendre les tâches sans intérêts plus simples et moins ennuyantes à gérer. jQuery par exemple fournit son propre système de sélecteurs et de librairies de manipulation de DOM, pour permettre le choix du type de sélecteur CSS, des éléments en JavaScript et une construction du DOM plus simple. Ce n'est plus aussi important aujourd'hui nous avons des fonctionnalités modernes comme les méthodes {{domxref("Document.querySelector()")}}/{{domxref("Document.querySelectorAll()")}}/{{domxref("Node")}} disponibles selon les navigateurs, mais ça peut toujours être utile quand vous avez besoin de supporter de plus vieux navigateurs.
                                                                                                                • 
- 
                                                                                                              • Les librairies de confort : Rendent les choses difficiles plus facile à faire. Par exemple, l'API WebGL est vraiment complexe et  se révèle difficile à écrire directement, alors la librairie Three.js (et d'autres) est construite au-dessus de WebGL et apporte une API plus simple pour créer des objets 3D courants, des aspects, des textures etc. L'API Service Worker est aussi très complexe à utiliser, alors des librairies de code ont commencé à apparaitre pour rendre des cas d'usage des Service Worker plus facile à implémenter (voir le Service Worker Cookbook pour plusieurs extrait de code utiles).
                                                                                                                • 
+ 
                                                                                                              • Les librairies de confort : Rendent les choses difficiles plus facile à faire. Par exemple, l'API WebGL est vraiment complexe et  se révèle difficile à écrire directement, alors la librairie Three.js (et d'autres) est construite au-dessus de WebGL et apporte une API plus simple pour créer des objets 3D courants, des aspects, des textures etc. L'API Service Worker est aussi très complexe à utiliser, alors des librairies de code ont commencé à apparaitre pour rendre des cas d'usage des Service Worker plus facile à implémenter (voir le Service Worker Cookbook pour plusieurs extrait de code utiles).
                                                                                                                • 
  
                                                                                                              • Les librairies d'effets : Ces librairies sont conçues pour vous permettre d'ajouter facilement des effets spéciaux à votre site web. C'était plus utile quand {{glossary("DHTML")}} était à la mode, et implémentait des effets impliquant beaucoup de JavaScript complexe, mais de nos jours les navigateurs ont construit une quantité de fonctionnalités en CSS3 et des APIs pour implémenter les effets plus facilement. Pour une liste de librairies, se référer à JavaScripting.com/animation.
                                                                                                                • 
  
                                                                                                              • Les librairies d'UI : Fournissent des méthodes pour implémenter des fonctionnalités UI complexes qui serait autrement compliquées à implémenter et à faire fonctionner en navigateur croisé, par exemple jQuery UI et Foundation. Elles ont tendance à être utilisées comme les bases de la configuration de sites complets ; c'est souvent difficile de les implémenter uniquement pour une fonctionnalité UI.
                                                                                                                • 
- 
                                                                                                              • Les librairies de nomalisation : Vous fournissent une syntaxe simple qui vous permet de compléter facilement une tâche sans avoir à vous soucier des différences entre navigateur. la librairie utilisera les APIs appopriées en arrière-plan donc la fonctionnalité marchera qu'importe le navigateur (en théorie). Par exemple, LocalForage est une librairie pour le stockage de données côté client, qui fournit une syntaxe simple pour stocker et extraire les données. En arrière-plan, elle utilise la meilleure API que la navigateur possède pour stocker les données,  que ça soit IndexedDB, Web Storage, ou encore WebSQL (qui est maintenant désapprouvée, mais qui est encore supportée dans certaines vieilles versions de Safari/IE). Comme autre exemple, JQuery.
                                                                                                                • 
+ 
                                                                                                              • Les librairies de nomalisation : Vous fournissent une syntaxe simple qui vous permet de compléter facilement une tâche sans avoir à vous soucier des différences entre navigateur. la librairie utilisera les APIs appopriées en arrière-plan donc la fonctionnalité marchera qu'importe le navigateur (en théorie). Par exemple, LocalForage est une librairie pour le stockage de données côté client, qui fournit une syntaxe simple pour stocker et extraire les données. En arrière-plan, elle utilise la meilleure API que la navigateur possède pour stocker les données,  que ça soit IndexedDB, Web Storage, ou encore WebSQL (qui est maintenant désapprouvée, mais qui est encore supportée dans certaines vieilles versions de Safari/IE). Comme autre exemple, JQuery.
                                                                                                                • 
 
                                                                                                              
 
 
                                                                                                              Lorsque vous choissisez une librairie pour l'utiliser, assurez-vous qu'elle fonctionne sur l'ensemble des navigateurs que vous voulez supporter, et tester vos implémentations minutieusement. Assurez-vous également que la librairie est répandue et bien supportée, et qu'elle ne va pas devenir obsolète la semaine prochaine. Parler à d'autres développeurs pour savoir ce qu'ils peuvent vous recommander, regarder l'activité et combien de contributeurs la librairie a sur Github (ou qu'importe où elle est stockée), etc.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : JavaScripting.com vous donne une idée d'à peu près combien de librairies JavaScript sont disponibles, et peut être utile pour trouver une librairie dans un but précis.
                                                                                                              
+
                                                                                                              Note : JavaScripting.com vous donne une idée d'à peu près combien de librairies JavaScript sont disponibles, et peut être utile pour trouver une librairie dans un but précis.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              L'utilisation de librairie à un niveau basique consiste à télécharger les fichiers de la librairie (JavaScript, peut-être un peu de CSS ou d'autres dépendances) et à les attacher à votre page (par ex. via un élément {{htmlelement("script")}}, bien qu'il y ait normalement plein d'autres options d'utilisation pour de telles librairies, comme les installer comme des composants Bower, ou les inclure comme des dépendances avec le module de paquets Webpack. Vous devrez lire les pages d'installation individuelles des librairies pour plus d'information.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Vous allez aussi tomber sur des frameworks JavaScript pendant votre voyage dans le Web, comme Ember et Angular. Alors que les librairies sont souvent utilisées pour résoudre des problèmes individuels et ajoutées dans des sites existants, les frameworks ont tendances à être utilisés plus pour des solutions complètes pour développer des applications web complexes.
                                                                                                              
+
                                                                                                              Note : Vous allez aussi tomber sur des frameworks JavaScript pendant votre voyage dans le Web, comme Ember et Angular. Alors que les librairies sont souvent utilisées pour résoudre des problèmes individuels et ajoutées dans des sites existants, les frameworks ont tendances à être utilisés plus pour des solutions complètes pour développer des applications web complexes.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Les Polyfills
                                                                                                              
@@ -334,9 +334,9 @@ showHeroes(superHeroes);
 
                                                                                                              Observons cet exercice — dans cet exemple nous allons utiliser un polyfill Fetch pour fournir du support pour une API Fetch dans de vieux navigateurs ; nous avons toutefois également besoin d'utiliser le polyfill es6-promise, comme Fetch utilise largement les promises, et les navigateurs qui ne les supportent pas seront toujours bloqués.
                                                                                                              
 
 
                                                                                                                
- 
                                                                                                              1. Pour commencer, faîtes une copie locale de notre exemple fetch-polyfill.html et de notre belle image de fleurs dans un nouveau répertoire. Nous allons écrire du code pour récupérer l'image de fleurs et l'afficher sur la page.
                                                                                                                2. 
- 
                                                                                                              2. Ensuite, sauvegarder les copies de Fetch polyfill et de es6-promises polyfill dans le même répertoire que le HTML.
                                                                                                                3. 
- 
                                                                                                              3. Appliquer les scripts de polyfill à la page en utilisant le code suivant — placez-les au-dessus de l'élément {{htmlelement("script")}} existant ainsi ils seront déjà disponibles sur la page quand on essaiera d'utiliser Fetch :
+ 
                                                                                                              4. Pour commencer, faîtes une copie locale de notre exemple fetch-polyfill.html et de notre belle image de fleurs dans un nouveau répertoire. Nous allons écrire du code pour récupérer l'image de fleurs et l'afficher sur la page.
                                                                                                                5. 
+ 
                                                                                                              5. Ensuite, sauvegarder les copies de Fetch polyfill et de es6-promises polyfill dans le même répertoire que le HTML.
                                                                                                                6. 
+ 
                                                                                                              6. Appliquer les scripts de polyfill à la page en utilisant le code suivant — placez-les au-dessus de l'élément {{htmlelement("script")}} existant ainsi ils seront déjà disponibles sur la page quand on essaiera d'utiliser Fetch :
   
                                                                                                                <script src="es6-promise.js"></script>
 <script src="fetch.js"></script>
                                                                                                                
  
                                                                                                                7. 
@@ -352,50 +352,50 @@ fetch('flowers.jpg').then(function(response) {
 });
  
  
                                                                                                              7. Maintenant si vous le chargez dans un navigateur qui ne supporte pas Fetch (Safari et IE sont des candidats de choix), vous devriez quand même voir l'image de la fleur apparaitre — cool !
                                                                                                                
-  
                                                                                                                8. 
+  
 
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Vous pouvez consulter notre version terminée sur fetch-polyfill-finished.html (voir aussi le code source).
                                                                                                              
+
                                                                                                              Note : Vous pouvez consulter notre version terminée sur fetch-polyfill-finished.html (voir aussi le code source).
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Une fois encore, il y a plusieurs manières différentes d'utiliser les différents polyfills que vous allez rencontrer — consulter chaque documentation individuelle d'un polyfill.
                                                                                                              
+
                                                                                                              Note : Une fois encore, il y a plusieurs manières différentes d'utiliser les différents polyfills que vous allez rencontrer — consulter chaque documentation individuelle d'un polyfill.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Une chose à laquelle vous devez penser est "pourquoi devrions-nous toujours charger le code polyfill, même si nous n'en avons pas besoin ?" C'est une bonne remarque — plus vos sites vont devenir complexes et plus vous aller commencer à utiliser de librairies, de polyfills, etc., vous pouvez commencer à charger beaucoup de code supplémentaire, qui peut commencer à affecter la performance, spécialement sur des appareils peu puissants. Il est donc normal de ne charger les fichiers que quand ils sont nécessaires.
                                                                                                              
 
 
                                                                                                              Faire cela nécessite un peu de code supplémentaire dans votre JavaScript. Vous avez besoin d'un test de détection de caractéristiques qui détecte si le navigateur supporte la fonctionnalité que vous essayez d'utiliser :
                                                                                                              
 
-
                                                                                                              if (browserSupportsAllFeatures()) {
+
                                                                                                              if (browserSupportsAllFeatures()) {
   main();
-} else {
-  loadScript('polyfills.js', main);
+} else {
+  loadScript('polyfills.js', main);
 }
 
-function main(err) {
-  // actual app code goes in here
-}
                                                                                                              
+function main(err) {
+  // actual app code goes in here
+}
                                                                                                              
 
 
                                                                                                              En premier temps on exécute une condition qui vérifie si la fonction browserSupportAllFeatures() retourne true. Si oui, on exécute la fonction main(), qui contiendra tout le code de notre app. browserSupportAllFeatures() ressemble à ça :
                                                                                                              
 
-
                                                                                                              function browserSupportsAllFeatures() {
-  return window.Promise && window.fetch;
-}
                                                                                                              
+
                                                                                                              function browserSupportsAllFeatures() {
+  return window.Promise && window.fetch;
+}
                                                                                                              
 
-
                                                                                                              Ici on vérifie si l'objet Promise et la fonction fetch() existent dans le navigateur. Si les deux existent, la fonction retourne true. Si la fonction retourne false, alors on exécute le code à l'intérieur de la deuxième partie de la condition — elle exécute une fonction appelée loadScript(), qui charge les polyfills dans la page, puis exécute main() après que le chargement soit terminé. loadScript() ressemble à ça :
                                                                                                              
+
                                                                                                              Ici on vérifie si l'objet Promise et la fonction fetch() existent dans le navigateur. Si les deux existent, la fonction retourne true. Si la fonction retourne false, alors on exécute le code à l'intérieur de la deuxième partie de la condition — elle exécute une fonction appelée loadScript(), qui charge les polyfills dans la page, puis exécute main() après que le chargement soit terminé. loadScript() ressemble à ça :
                                                                                                              
 
-
                                                                                                              function loadScript(src, done) {
-  var js = document.createElement('script');
+
                                                                                                              function loadScript(src, done) {
+  var js = document.createElement('script');
   js.src = src;
-  js.onload = function() {
+  js.onload = function() {
     done();
   };
-  js.onerror = function() {
-    done(new Error('Failed to load script ' + src));
+  js.onerror = function() {
+    done(new Error('Failed to load script ' + src));
   };
-  document.head.appendChild(js);
-}
+  document.head.appendChild(js);
+}
 
                                                                                                              
 
 
                                                                                                              Cette fonction créé un nouvel élément <script>, puis applique son attribut src au chemin que nous avons spécifié en premier argument ('polyfills.js' dont nous parlions dans le code au-dessus). Une fois qu'il est chargé, nous exécutons la fonction que nous avons spécifié en deuxième argument (main()). Si une erreur se produit pendant le chargement du script, on continue d'appeler la fonction, mais avec une erreur personnalisée que nous pouvons retrouver pour faciliter le débug d'un problème s'il arrive.
                                                                                                              
@@ -405,7 +405,7 @@ fetch('flowers.jpg').then(function(response) {
 
                                                                                                              Vous pouvez voir le code en direct sur fetch-polyfill-only-when-needed.html (voir aussi le code source). Nous aimerions être clairs sur le fait qu'on ne peut s'attribuer ce code — il a été écrit à la base par Philip Walton. Aller voir son article Loading Polyfills Only When Needed pour le code original, et beaucoup d'explications utiles autour de ce large sujet.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Il y a certaines options externes à prendre en considération, par exemple Polyfill.io — c'est une librairie méta-polyfill qui va regarder toutes les capacités de chaque navigateur et appliquer les polyfills nécessaires, selon quelles APIs et fonctionnalités JS vous utilisez dans votre code.
                                                                                                              
+
                                                                                                              Note : Il y a certaines options externes à prendre en considération, par exemple Polyfill.io — c'est une librairie méta-polyfill qui va regarder toutes les capacités de chaque navigateur et appliquer les polyfills nécessaires, selon quelles APIs et fonctionnalités JS vous utilisez dans votre code.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Le transpiling Javascript
                                                                                                              
@@ -413,7 +413,7 @@ fetch('flowers.jpg').then(function(response) {
 
                                                                                                              Une autre option qui et devenue populaire pour les gens qui veulent utiliser des fonctionnalités Javascript modernes dès maintenant consiste à convertir le code qui utilise les fonctionnalités ECMAScript 6/ECMAScript 2015 en une version qui fonctionnera sur les vieux navigateurs.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Cela s'appelle le "transpiling" — vous n'êtes pas en train de compiler du code à un niveau inférieur pour qu'il soit exécuté sur un ordinateur (comme vous l'auriez fait avec du code C) ; en fait, vous êtes en train de le transformer dans une syntaxe qui existe à un niveau similaire d'abstraction pour qu'il puisse être utilisé de la même manière, mais avec des conditions légèrement différentes (dans ce cas, transformer un type de JavaScript dans un autre).
                                                                                                              
+
                                                                                                              Note : Cela s'appelle le "transpiling" — vous n'êtes pas en train de compiler du code à un niveau inférieur pour qu'il soit exécuté sur un ordinateur (comme vous l'auriez fait avec du code C) ; en fait, vous êtes en train de le transformer dans une syntaxe qui existe à un niveau similaire d'abstraction pour qu'il puisse être utilisé de la même manière, mais avec des conditions légèrement différentes (dans ce cas, transformer un type de JavaScript dans un autre).
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Pour l'exemple, nous parlions des fonctions fléchées (voir arrow-function.html en direct, et voir le code source) plus tôt dans l'article, qui ne marchent que sur les tout nouveaux navigateurs :
                                                                                                              
@@ -429,7 +429,7 @@ fetch('flowers.jpg').then(function(response) {
 
                                                                                                              La meilleure façon d'essayer Babel et d'utiliser la version en ligne, qui vous permet d'entrer votre code source sur la gauche, et une version transpilée sort sur la droite.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Il y a plein de façon d'utiliser Babel (exécuteurs de tâche, outil d'automatisation, etc.), comme vous le verrez sur la page d'installation.
                                                                                                              
+
                                                                                                              Note : Il y a plein de façon d'utiliser Babel (exécuteurs de tâche, outil d'automatisation, etc.), comme vous le verrez sur la page d'installation.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Utiliser une mauvaise détection de code de navigateur
                                                                                                              
@@ -449,7 +449,7 @@ if(ua.indexOf('Firefox') !== -1) {
 
                                                                                                              L'idée était assez bonne — détecter quel navigateur affiche le site, et exécuter le code approprié pour s'assurer que le navigateur sera à même de bien utiliser votre site.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Essayez maintenant d'ouvrir votre console JavaScript et d'exécuter navigator.userAgent pour voir ce qui est retourné.
                                                                                                              
+
                                                                                                              Note : Essayez maintenant d'ouvrir votre console JavaScript et d'exécuter navigator.userAgent pour voir ce qui est retourné.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              Cependant, le temps passant, les développeurs ont commencé à voir des graves problèmes avec cette approche. Pour commencer, le code était source d'erreur. Et si une nouvelle fonctionnalité ne marche pas sur disons, Firefox 10 et inférieur, on implémente du code pour détecter cela, puis Firefox 11 arrive — est-ce qu'il supportera cette fonctionnalité ? Firefox 11 ne sera sûrement pas supporté parce qu'il n'est pas Firefox 10. Vous aurez à changer tout votre code de détection régulièrement.
                                                                                                              
@@ -457,7 +457,7 @@ if(ua.indexOf('Firefox') !== -1) {
 
                                                                                                              Beaucoup de développeurs on implémenté de mauvais détecteur de code de navigateur et ne l'ont pas maintenu, et les navigateurs ont commencé à être bloqués en allant sur des sites web contenant des fonctionnalités qu'ils avaient déjà implémenté. C'est devenu une pratique commune que les navigateurs commencent à mentir à propos de quel navigateur ils étaient dans leur chaîne d'user-agent (ou déclarer qu'ils étaient tous les navigateurs), pour passer outre les détecteurs de code. Les navigateurs ont également implémenté des moyens pour permettre aux utilisateurs de changer quels chaîne d'user-agent le navigateur doit retourné lorsqu'il est interrogé par du JavaScript. Tout cela fait du détecteur de code bien plus qu'une source d'erreur, et d'inutilité.
                                                                                                              
 
 
                                                                                                              
-
                                                                                                              Note : Vous devriez lire History of the browser user-agent string de Aaron Andersen pour une présentation utile et amusante de cette situation.
                                                                                                              
+
                                                                                                              Note : Vous devriez lire History of the browser user-agent string de Aaron Andersen pour une présentation utile et amusante de cette situation.
                                                                                                              
 
                                                                                                              
 
 
                                                                                                              La leçon à retenir ici est — ne JAMAIS utiliser de détecteur de code. Le seul cas d'usage pour le détecteur de code de nos jours c'est si vous implémentez un fix pour un bug pour une version très particulière d'un navigateur en particulier. Même dans ce cas, la plupart des bugs sont fixés rapidement dans le cycle rapide des sorties des navigateurs. Cela n'arrive pas très souvent. {{anch("Feature detection")}} est presque toujours une meilleure option — si vous détectez si une fonctionnalité est supportée, vous n'aurez pas besoin de changer votre code quand de nouvelles versions de navigateur sortiront, et les tests sont bien plus fiables.
                                                                                                              
@@ -466,7 +466,7 @@ if(ua.indexOf('Firefox') !== -1) {
 
 
                                                                                                              Gérer les préfixes JavaScript
                                                                                                              
 
-
                                                                                                              Dans l'article précédent, nous parlions quelque peu de la gestion des préfixes CSS. Alors, les nouvelles implémentations JavaScript utilisent parfois aussi des préfixes, bien que JavaScript utilise le camel case plutôt que l'hyphenation comme CSS. Par exemple, si un préfixe est utilisé sur un objet d'une toute belle API appelée Ojbect :
                                                                                                              
+
                                                                                                              Dans l'article précédent, nous parlions quelque peu de la gestion des préfixes CSS. Alors, les nouvelles implémentations JavaScript utilisent parfois aussi des préfixes, bien que JavaScript utilise le camel case plutôt que l'hyphenation comme CSS. Par exemple, si un préfixe est utilisé sur un objet d'une toute belle API appelée Ojbect :
                                                                                                              
 
 
                                                                                                                
  
                                                                                                              • Mozilla utilisera mozObject
                                                                                                                • 
@@ -474,14 +474,14 @@ if(ua.indexOf('Firefox') !== -1) {
  
                                                                                                              • Microsoft utilisera msObject
                                                                                                                • 
 
                                                                                                              
 
-
                                                                                                              Voici un exemple, issu de notre demo violent-theremin (voir le code source), qui utilise une combinaison de l'API Canvas et de l'API Web Audio pour créer un outil de dessin marrant (et bruyant) :
                                                                                                              
+
                                                                                                              Voici un exemple, issu de notre demo violent-theremin (voir le code source), qui utilise une combinaison de l'API Canvas et de l'API Web Audio pour créer un outil de dessin marrant (et bruyant) :
                                                                                                              
 
 
                                                                                                              var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
                                                                                                              
 
 
                                                                                                              Dans le cas de l'API Web Audio, les principaux points d'entrée pour utiliser l'API étaient supportés dans Chrome/Opera via les versions préfixées webkit (ils supportent dorénavant les versions non préfixées). Le moyen le plus simple de contourner cette situation est de créer une nouvelle version des objets qui sont  préfixés dans certains navigateurs, et de la rendre égale à la version non préfixée, OU à la version préfixée (OU n'importe quelles versions préfixées qui méritent d'être éxaminées) — quelle que soit celle supportée par le navigateur affichant le site elle sera utilisée.
                                                                                                              
 
-
                                                                                                              Ensuite utilisez cet objet pour manipuler l'API, plutôt que l'original. Dans ce cas nous créons un constructeur AudioContext modifié, puis nous créons une nouvelle instance de contexte audio à utiliser pour notre codage Web Audio.
                                                                                                              
+
                                                                                                              Ensuite utilisez cet objet pour manipuler l'API, plutôt que l'original. Dans ce cas nous créons un constructeur AudioContext modifié, puis nous créons une nouvelle instance de contexte audio à utiliser pour notre codage Web Audio.
                                                                                                              
 
 
                                                                                                              Ce modèle peut être appliqué pour toutes les fonctionnalités JavaScript préfixées. Les librairies/polyfills JavaScript utilise également ce type de code, pour faire abstraction au maximum des différences entre navigateurs pour le développeur.
                                                                                                              
 
@@ -495,7 +495,7 @@ var audioCtx = new AudioContext();
                                                                                                              
 
 
                                                                                                              Trouver de l'aide
                                                                                                              
 
-
                                                                                                              Il y'a bien d'autres problèmes que vous allez rencontrer avec le JavaScript ; la chose la plus importante à vraiment savoir est comment trouver des réponses en ligne. Consultez la section Trouver de l'aide de l'article sur le HTML et CSS pour nos meilleurs conseils.
                                                                                                              
+
                                                                                                              Il y'a bien d'autres problèmes que vous allez rencontrer avec le JavaScript ; la chose la plus importante à vraiment savoir est comment trouver des réponses en ligne. Consultez la section Trouver de l'aide de l'article sur le HTML et CSS pour nos meilleurs conseils.
                                                                                                              
 
 
                                                                                                              Résumé
                                                                                                              
 
@@ -508,12 +508,12 @@ var audioCtx = new AudioContext();
 
                                                                                                              Dans ce module
                                                                                                              
 
 
diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html
index ea67dd363c..e739854c4d 100644
--- a/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html
+++ b/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html
@@ -7,13 +7,13 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies
 
 
                                                                                                              {{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Introduction","Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS", "Learn/Tools_and_testing/Cross_browser_testing")}}
                                                                                                              
 
-
                                                                                                              Cet article commence en donnant un aperçu sur le sujet des tests sur navigateurs (croisé), répondant aux questions telles que "qu'est-ce que le test en navigateur croisé ?", "Quels sont les problèmes les plus communs que vous allez rencontrer ?", et "quelles sont les principales approches pour tester, identifier, et fixer les problèmes ?"
                                                                                                              
+
                                                                                                              Cet article commence en donnant un aperçu sur le sujet des tests sur navigateurs (croisé), répondant aux questions telles que "qu'est-ce que le test en navigateur croisé ?", "Quels sont les problèmes les plus communs que vous allez rencontrer ?", et "quelles sont les principales approches pour tester, identifier, et fixer les problèmes ?"
                                                                                                              
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis :
    
-    
                                                                                                            Connaissances de la base des langages HTML, CSS et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.
                                                                                                            
+    
                                                                                                            Connaissances de la base des langages HTML, CSS et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.
                                                                                                            
                                                                                                                		
   
                                                                                                            
   
                                                                                                            
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                            
+
                                                                                                            
-   
+   
@@ -43,7 +43,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies
 
                                                                                                            Tout au long des sections à venir, nous allons mettre en place une liste de support dans ce format.
                                                                                                            
-
                                                                                                            Note : Yahoo est le premier à avoir rendu cette approche répandue, avec leur approche de Support de navigateur classé.
                                                                                                            
+
                                                                                                            Note : Yahoo est le premier à avoir rendu cette approche répandue, avec leur approche de Support de navigateur classé.
                                                                                                            
 
                                                                                                            Déductions logiques
                                                                                                            
@@ -53,7 +53,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies
 
                                                                                                            Par exemple, si vous habitez en Europe de l'Ouest ou en Amérique du Nord, vous devez savoir que la plupart des gens utilisent des ordinateurs de bureau/portable Windows et Mac, et que les navigateurs principaux sont Chrome, Firefox, Safari, IE, et Edge. Vous n'aurez sûrement besoin que de tester uniquement les dernières versions des trois premiers, étant donné que ces navigateurs reçoivent des mises à jour régulières. Pour Edge et IE vous n'aurez que besoin de tester les deux dernières versions ; ils doivent tous aller dans le niveau de grade A.
                                                                                                            
-
                                                                                                            Note : Vous ne pouvez avoir qu'une seule version d'IE ou d'Edge installée sur une machine à la fois, vous aurez donc probablement besoin d'utiliser une machine virtuelle, ou une autre stratégie pour faire les tests nécessaires. Voir {{anch("Virtual machines")}} plus tard.
                                                                                                            
+
                                                                                                            Note : Vous ne pouvez avoir qu'une seule version d'IE ou d'Edge installée sur une machine à la fois, vous aurez donc probablement besoin d'utiliser une machine virtuelle, ou une autre stratégie pour faire les tests nécessaires. Voir {{anch("Virtual machines")}} plus tard.
                                                                                                            
 
                                                                                                            Beaucoup de personnes utilisent iOS et Android, vous aurez donc aussi besoin de tester les dernières versions d'iOS Safari, les deux dernières versions de l'ancien Android stock browser, et Chrome et Firefox pour iOS et Android. Idéalement, vous devriez tester sur un téléphone et une tablette de chaque système d'exploitation, afin de vous assurer que les designs responsives fonctionnent bien.
                                                                                                            
@@ -71,7 +71,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies
 
                                                                                                            Si vous vivez autre part, ou travaillez sur un site qui va être livré autre part (par ex. dans un pays ou un endroit en particulier), alors vous aurez sûrement des navigateurs communs différents à tester.
                                                                                                            
-
                                                                                                            Note : "Le PDG de mon entreprise utilise un Blackberry, nous devons donc nous assurer que cela apparaîtra parfaitement sur ce support" peut aussi être un argument persuasif.
                                                                                                            
+
                                                                                                            Note : "Le PDG de mon entreprise utilise un Blackberry, nous devons donc nous assurer que cela apparaîtra parfaitement sur ce support" peut aussi être un argument persuasif.
                                                                                                            
 
                                                                                                            Les statistiques de support navigateur
                                                                                                            
@@ -114,14 +114,14 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies
 
 
                                                                                                            Par défaut, vous devriez voir ce tableau de rapport, comme ceci :
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Il y a une énorme quantité de donnée que vous pouvez regarder en utilisant Google Analytics — des rapports personnalisés dans différentes catégories, etc. — et nous n'avons pas le temps pour tous les aborder. Démarrer avec Analytics fournit une aide utile sur les rapports (et plus) pour les débutants.
                                                                                                            Vous devriez aussi vous intéresser aux différentes options du menu gauche, et voir quels types de données vous pouvez trouver. Par exemple, vous pouvez trouver quels navigateurs et quels systèmes d'exploitation vos utilisateurs utilisent en sélectionnant Audience > Technologie > Navigateur & OS du menu gauche.
                                                                                                            
-
                                                                                                            Note : Lorsque vous utilisez Google Analytics, vous devez pour prévenir des biais trompeurs, par ex. "Nous n'avons aucun utilisateur de Firefox Mobile" peut vous amener à ne pas vous soucier de supporter Firefox Mobile. Mais vous n'allez pas avoir un seul utilisateur de Firefox Mobile si le site ne fonctionnait pas dessus dès le départ.
                                                                                                            
+
                                                                                                            Note : Lorsque vous utilisez Google Analytics, vous devez pour prévenir des biais trompeurs, par ex. "Nous n'avons aucun utilisateur de Firefox Mobile" peut vous amener à ne pas vous soucier de supporter Firefox Mobile. Mais vous n'allez pas avoir un seul utilisateur de Firefox Mobile si le site ne fonctionnait pas dessus dès le départ.
                                                                                                            
 
                                                                                                            Autres cas
                                                                                                            
@@ -146,7 +146,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies
 
 
                                                                                                            Considérez l'exemple suivant (voir le code source, et aussi l'exemple exécuté en direct) :
                                                                                                            
 
-
                                                                                                            
+
                                                                                                            Les critères de test pour cette fonctionnalité peuvent être rédigés comme ceci :
                                                                                                            
 
@@ -207,18 +207,18 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies
 
                                                                                                            Nous couvrirons chacune des autres options plus bas.
                                                                                                            
-
                                                                                                            Note : Certains efforts ont été effectué afin de créer des labos d'appareils accessibles au public — voir Open Device Labs.
                                                                                                            
+
                                                                                                            Note : Certains efforts ont été effectué afin de créer des labos d'appareils accessibles au public — voir Open Device Labs.
                                                                                                            
 
                                                                                                            
-
                                                                                                            Note : Nous devons aussi prendre en considération l'accessibilité — il y a plusieurs outils utiles que vous pouvez installer sur votre machine afin de faciliter les tests d'accessibilité, mais nous les couvrirons dans l'article Gestion des problèmes communs d'accessibilité, plus tard dans le cours.
                                                                                                            
+
                                                                                                            Note : Nous devons aussi prendre en considération l'accessibilité — il y a plusieurs outils utiles que vous pouvez installer sur votre machine afin de faciliter les tests d'accessibilité, mais nous les couvrirons dans l'article Gestion des problèmes communs d'accessibilité, plus tard dans le cours.
                                                                                                            
 
                                                                                                            Les émulateurs
                                                                                                            Les émulateurs sont essentiellement des programmes qui s'exécutent à l'intérieur de votre ordinateur et simulent des appareils ou des conditions particulières d'appareil d'un certain type, ils vous permettent de faire certains tests plus aisément qu'en ayant à trouver une combinaison de matériels/logiciels à tester.
                                                                                                            
 
-
                                                                                                            Un émulateur peut être aussi simple à tester qu'une condition d'appareil. Par exemple, si vous voulez faire quelques tests rapides et sales de la largeur/hauteur de vos media queries pour le responsive design, vous pouvez utiliser le Mode Design Responsive de Firefox. Safari possède également un mode similaire, qui peut être activé en allant dans Safari > Préférences, et en cochant Show Develop menu, puis en choisissant Develop > Enter Responsive Design Mode. Chrome propose également quelque chose de similaire : Device mode (voir Simuler un Appareil Mobile avec le Device Mode).
                                                                                                            
+
                                                                                                            Un émulateur peut être aussi simple à tester qu'une condition d'appareil. Par exemple, si vous voulez faire quelques tests rapides et sales de la largeur/hauteur de vos media queries pour le responsive design, vous pouvez utiliser le Mode Design Responsive de Firefox. Safari possède également un mode similaire, qui peut être activé en allant dans Safari > Préférences, et en cochant Show Develop menu, puis en choisissant Develop > Enter Responsive Design Mode. Chrome propose également quelque chose de similaire : Device mode (voir Simuler un Appareil Mobile avec le Device Mode).
                                                                                                            Le plus souvent, vous allez devoir installer un émulateur. Les appareils/navigateurs les plus courants que vous allez devoir tester sont les suivants :
                                                                                                            
 
@@ -236,7 +236,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies
 
                                                                                                            
-
                                                                                                            Note : Beaucoup d'émulateurs requièrent actuellement l'utilisation d'une machine virtuelle (voir en-dessous) ; quand c'est le cas, les instructions sont souvent fournies, et/ou l'utilisation de la machine virtuelle est inclue dans l'installeur de l'émulateur.
                                                                                                            
+
                                                                                                            Note : Beaucoup d'émulateurs requièrent actuellement l'utilisation d'une machine virtuelle (voir en-dessous) ; quand c'est le cas, les instructions sont souvent fournies, et/ou l'utilisation de la machine virtuelle est inclue dans l'installeur de l'émulateur.
                                                                                                            
 
                                                                                                            Les machines virtuelles
                                                                                                            
@@ -244,7 +244,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies
 
                                                                                                            Les machines virtuelles sont des applications qui s'exécutent sur le bureau de votre ordinateur et vous permettent d'exécuter les simulations de tous les systèmes d'exploitation, chacun compartimenté sur son propre disque dur virtuel (souvent représenté par un seul large fichier existant sur le disque dur de la machine hôte). Il y a plusieurs applis de machine virtuelle populaire, comme Parallels, VMWare, et Virtual Box; personnellement, nous préférons la dernière, parce qu'elle est gratuite.
                                                                                                            
-
                                                                                                            Note : Nous avons besoin de beaucoup d'espace disponible sur le disque dur pour exécuter les émulations de machine virtuelle ; chaque système d'exploitation que vous émulez peut prendre beaucoup de mémoire. Vous aurez tendance à choisir l'espace de disque dur que vous voulez pour chaque installation ; vous pouvez vous en sortir avec environ 10Go, mais certaines sources recommandent d'augmenter à 50Go ou plus, alors le système d'exploitation s'éxécutera de façon fiable. Une bonne option fournit par la plupart des applis de machine virtuelle est de créer des disques durs à allocations dynamiques qui grossissent et rétrécissent en fonction que les besoins surviennent.
                                                                                                            
+
                                                                                                            Note : Nous avons besoin de beaucoup d'espace disponible sur le disque dur pour exécuter les émulations de machine virtuelle ; chaque système d'exploitation que vous émulez peut prendre beaucoup de mémoire. Vous aurez tendance à choisir l'espace de disque dur que vous voulez pour chaque installation ; vous pouvez vous en sortir avec environ 10Go, mais certaines sources recommandent d'augmenter à 50Go ou plus, alors le système d'exploitation s'éxécutera de façon fiable. Une bonne option fournit par la plupart des applis de machine virtuelle est de créer des disques durs à allocations dynamiques qui grossissent et rétrécissent en fonction que les besoins surviennent.
                                                                                                            
 
                                                                                                            Pour utiliser Virtual Box, vous avez besoin de :
                                                                                                            
@@ -252,7 +252,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies
 
                                                                                                              
  
                                                                                                            1. Procurez-vous un disque d'installation ou une image (par ex. un ISO) du système d'exploitation que vous voulez émuler. Virtual Box est en mesure de vous les fournir ; la plupart, comme les OSs de Windows, sont des produits commerciaux qui ne peuvent être distribués gratuitement.
                                                                                                              2. 
  
                                                                                                            2. Téléchargez l'installeur approprié pour votre système d'exploitation et installez-le.
                                                                                                              3. 
- 
                                                                                                            3. Ouvrez l'appli ; vous verrez une vue ressemblant à ceci : 
                                                                                                              4. 
+ 
                                                                                                            4. Ouvrez l'appli ; vous verrez une vue ressemblant à ceci : 
                                                                                                              5. 
  
                                                                                                            5. Pour créer une nouvelle machine virtuelle, appuyer sur le bouton Nouveau dans le coin en haut à gauche.
                                                                                                              6. 
  
                                                                                                            6. Suivez les instructions et remplissez les boîtes de dialogues suivantes comme il se doit. Vous allez :
   
                                                                                                                
@@ -267,15 +267,15 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies
 
 
                                                                                                                Maintenant la nouvelle virtual box devrait apparaître dans le menu gauche de la fenêtre de l'interface principale de Virtual Box. A ce stade, vous pouvez double-cliquer dessus pour ouvrir la virtual box — cela commencera à démarrer la machine virtuelle, mais il n'y aura pas encore le système d'exploitation d'installé. A cet instant vous devez préciser à la boîte de dialogue l'image de votre programme d'installation, et les étapes s'exécuteront une par une dans la machine virtuelle, exactement comme si c'était un vrai ordinateur.
                                                                                                                
 
-
                                                                                                                
+
                                                                                                                
 
 
                                                                                                                
-
                                                                                                                Important : Vous devez vous assurez que vous avez l'image du système d'exploitation que vous voulez installer sur la machine virtuelle existante à ce stade, et l'installer complètement. Si vous annulé le processus à ce stade, cela peut rendre la machine virtuelle inutilisable, et vous amener à la supprimer et en créer une nouvelle. Ce n'est pas fatal, mais c'est ennuyant.
                                                                                                                
+
                                                                                                                Attention : Vous devez vous assurez que vous avez l'image du système d'exploitation que vous voulez installer sur la machine virtuelle existante à ce stade, et l'installer complètement. Si vous annulé le processus à ce stade, cela peut rendre la machine virtuelle inutilisable, et vous amener à la supprimer et en créer une nouvelle. Ce n'est pas fatal, mais c'est ennuyant.
                                                                                                                
 
                                                                                                                
 
 
                                                                                                                Une fois que le processus est complété, vous devriez avoir une machine virtuelle exécutant un système d'exploitation à l'intérieur d'une fenêtre sur votre ordinateur hôte.
                                                                                                                
 
-
                                                                                                                
+
                                                                                                                
 
 
                                                                                                                Vous devez vous occuper de l'installation de ce système d'exploitation virtuel exactement comme d'une installation réelle — par exemple, de même que vous devez installer les navigateurs que vous voulez tester, installez un programme d'antivirus pour vous protégez des virus.
                                                                                                                
 
@@ -293,7 +293,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies
 
 
 
                                                                                                                
-
                                                                                                                Note : Une autre bonne chose à propos des machines virtuelles, c'est que les images de disque virtuel sont clairement autonomes. Si vous travaillez en équipe, vous pouvez créer une image disque, puis la copier et vous la passer. Assurez-vous juste d'avoir les licences requises pour exécuter toutes les copies de Windows ou qu'importe ce que vous exécutez, si c'est un produit licencié.
                                                                                                                
+
                                                                                                                Note : Une autre bonne chose à propos des machines virtuelles, c'est que les images de disque virtuel sont clairement autonomes. Si vous travaillez en équipe, vous pouvez créer une image disque, puis la copier et vous la passer. Assurez-vous juste d'avoir les licences requises pour exécuter toutes les copies de Windows ou qu'importe ce que vous exécutez, si c'est un produit licencié.
                                                                                                                
 
                                                                                                                
 
 
                                                                                                                Automatisation et applis commerciales
                                                                                                                
@@ -329,11 +329,11 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies
 
                                                                                                                Ces étapes sont conçues pour s'assurer que le navigateur que vous êtes en train de tester est aussi "pure" que possible. C-à-d qu'il n'y a rien d'installé qui pourrait affecter les résultats des tests.
                                                                                                                
 
 
                                                                                                                
-
                                                                                                                Note : Une autre option faiblement utile, si vous avez le matériel disponible est de tester vos sites sur des téléphones bas de gammes/d'autres appareils — plus vos sites vont s'agrandir et les fonctionnalités avoir plus d'effets, plus vous avez des chances que votre site subisse des ralentissements, il vous faut donc prendre la performance comme une nouvelle considération importante. Essayer de faire marcher vos fonctionnalités sur des appareils bas de gamme, cela rendra l'expérience bien meilleure sur des appareils haut de gamme.
                                                                                                                
+
                                                                                                                Note : Une autre option faiblement utile, si vous avez le matériel disponible est de tester vos sites sur des téléphones bas de gammes/d'autres appareils — plus vos sites vont s'agrandir et les fonctionnalités avoir plus d'effets, plus vous avez des chances que votre site subisse des ralentissements, il vous faut donc prendre la performance comme une nouvelle considération importante. Essayer de faire marcher vos fonctionnalités sur des appareils bas de gamme, cela rendra l'expérience bien meilleure sur des appareils haut de gamme.
                                                                                                                
 
                                                                                                                
 
 
                                                                                                                
-
                                                                                                                Note : Certains environnement de développement côté serveur fournissent des mécanismes très utiles pour sortir les modifications sur le site pour seulement un sous-ensemble d'utilisateurs, très utile pour sortir des fonctionnalités testées par un sous-ensemble d'utilisateurs sans avoir besoin de mettre en place un serveur de développement séparé. Un bon exemple est Django Waffle Flags.
                                                                                                                
+
                                                                                                                Note : Certains environnement de développement côté serveur fournissent des mécanismes très utiles pour sortir les modifications sur le site pour seulement un sous-ensemble d'utilisateurs, très utile pour sortir des fonctionnalités testées par un sous-ensemble d'utilisateurs sans avoir besoin de mettre en place un serveur de développement séparé. Un bon exemple est Django Waffle Flags.
                                                                                                                
 
                                                                                                                
 
 
                                                                                                                Résumé
                                                                                                                
@@ -349,14 +349,14 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies
 
                                                                                                                Dans ce module
                                                                                                                
 
 
 
 
                                                                                                                 
                                                                                                                
diff --git a/files/fr/learn/tools_and_testing/github/index.html b/files/fr/learn/tools_and_testing/github/index.html
index 31795e70df..07494d8d8a 100644
--- a/files/fr/learn/tools_and_testing/github/index.html
+++ b/files/fr/learn/tools_and_testing/github/index.html
@@ -14,7 +14,7 @@ original_slug: Apprendre/Outils_et_tests/GitHub
 ---
 
                                                                                                                {{LearnSidebar}}
                                                                                                                
 
-
                                                                                                                Tous les développeurs utiliseront une sorte de système de contrôle des versions (version control system ou VCS en anglais), un outil leur permettant de collaborer avec d'autres développeurs sur un projet sans prendre le risque que l'un d'eux écrase le travail d'un autre, et de revenir à une version précédente de la base de code si un problème est découvert plus tard. Le plus populaires de ces outils (au mois parmi les développeurs) est Git, ainsi que GitHub, un site vous proposant d'héberger vos dépôts de code et plusieurs outils pour travailler avec eux. Ce module vise à vous enseigner ce que vous devez savoir à propos de ces deux outils.
                                                                                                                
+
                                                                                                                Tous les développeurs utiliseront une sorte de système de contrôle des versions (version control system ou VCS en anglais), un outil leur permettant de collaborer avec d'autres développeurs sur un projet sans prendre le risque que l'un d'eux écrase le travail d'un autre, et de revenir à une version précédente de la base de code si un problème est découvert plus tard. Le plus populaires de ces outils (au mois parmi les développeurs) est Git, ainsi que GitHub, un site vous proposant d'héberger vos dépôts de code et plusieurs outils pour travailler avec eux. Ce module vise à vous enseigner ce que vous devez savoir à propos de ces deux outils.
                                                                                                                
 
 
                                                                                                                Vue d'ensemble
                                                                                                                
 
@@ -29,16 +29,16 @@ original_slug: Apprendre/Outils_et_tests/GitHub
 
 
                                                                                                                Les systèmes de contrôle des versions fournissent des outils pour répondre à ces besoins. Git est un exrmple d'un tel système, et GitHub est un site web avec une infrastructure qui propose un serveur Git et d'autres outils très pratiques pour travailler avec des dépôts Git individuellement ou en équipe, tel que le rapportage de problèmes liés au code, la relecture et validation de code, la gestion de projet par différentes fonctions comme l'assignation de tâches et les statistiques sur l'utilisation de tâches, et plus encore.
                                                                                                                
 
-
                                                                                                                
-
                                                                                                                Note: Git est actuellement un système de contrôle des versions distribué, signifiant qu'une copie complète du dépôt contenant la base de code est fait sur votre ordinateur (et celui de tous les autres participants). Vous modifiez votre propre copie et puis vous les envoyez vers le serveur, où un administrateur pourra décider de les fusionner avec la copie commune ou non.
                                                                                                                
+
                                                                                                                
+
                                                                                                                Note : Git est en fait un système de contrôle des versions distribué, signifiant qu'une copie complète du dépôt contenant la base de code est fait sur votre ordinateur (et celui de tous les autres participants). Vous modifiez votre propre copie et puis vous les envoyez vers le serveur, où un administrateur pourra décider de les fusionner avec la copie commune ou non.
                                                                                                                
 
                                                                                                                
 
 
                                                                                                                
-
                                                                                                                Vous cherchez à devenir un développeur web front-end ?
                                                                                                                
+
                                                                                                                Vous cherchez à devenir un développeur web front-end ?
                                                                                                                
 
 
                                                                                                                Nous avons mis ensemble un cours incluant toutes les informations nécessaires dont vous avez besoin pour atteindre votre objectif.
                                                                                                                
 
-
                                                                                                                Commencer
                                                                                                                
+
                                                                                                                Commencer
                                                                                                                
 
                                                                                                                
 
 
                                                                                                                Prérequis
                                                                                                                
@@ -55,8 +55,8 @@ original_slug: Apprendre/Outils_et_tests/GitHub
 
 
                                                                                                                Il est aussi préférable que vous ayiez quelques connaissances fondamentales sur le terminal, par exemple du déplacement entre dossiers, de la création de fichiers et de la modification du PATH du système.
                                                                                                                
 
-
                                                                                                                
-
                                                                                                                Note: Github n'est pas le seul site et un ensemble d'outils que vous pouvez utiliser avec Git. Il existe d'autres alternatives telles que GitLab que vous pourriez essayer. Vous pouvez même tenter de configurer votre propre serveur Git et l'utiliser à la place de GitHub. Nous nous en sommes tenus à GitHub dans ce cours pour vous montrer une seule manière de faire.
                                                                                                                
+
                                                                                                                
+
                                                                                                                Note : GitHub n'est pas le seul site et un ensemble d'outils que vous pouvez utiliser avec Git. Il existe d'autres alternatives telles que GitLab que vous pourriez essayer. Vous pouvez même tenter de configurer votre propre serveur Git et l'utiliser à la place de GitHub. Nous nous en sommes tenus à GitHub dans ce cours pour vous montrer une seule manière de faire.
                                                                                                                
 
                                                                                                                
 
 
                                                                                                                Guides
                                                                                                                
@@ -76,8 +76,8 @@ original_slug: Apprendre/Outils_et_tests/GitHub
  
                                                                                                                Les issues (problèmes) sont comme un forum pour votre projet GitHub, où chacun peut venir poser des questions et rapporter des problèmes, et vous pouvez gérer les mises à jour (par exemple assigner certaines personnes à la résolution de problèmes, à la clarification de problèmes ou à l'information de la correction de problèmes). Cet article vous donne ce dont vous avez besoin de savoir à propos des issues.
                                                                                                                
 
 
-
                                                                                                                
-
                                                                                                                Note: Il existe beaucoup d'autres choses que vous pouvez faire avec Git et GitHub, mais nous pensons que ce qui précède représente le minimum dont vous aurez besoin pour commencer à utiliser Git efficacement. Au fur et à mesure de votre progression avec Git, vous comprendrez de plus en plus qu'il est facile de faire des erreurs quand on commence à utiliser des commandes plus complexes. Ne vous inquiétez pas, même les développeurs web aguerris pensent que Git est parfois déroutant, et résolvent souvent des problèmes en cherchant des solutions sur internet ou en consultat des sites comme Flight rules for Git et Dangit, git!
                                                                                                                
+
                                                                                                                
+
                                                                                                                Note : Il existe beaucoup d'autres choses que vous pouvez faire avec Git et GitHub, mais nous pensons que ce qui précède représente le minimum dont vous aurez besoin pour commencer à utiliser Git efficacement. Au fur et à mesure de votre progression avec Git, vous comprendrez de plus en plus qu'il est facile de faire des erreurs quand on commence à utiliser des commandes plus complexes. Ne vous inquiétez pas, même les développeurs web aguerris pensent que Git est parfois déroutant, et résolvent souvent des problèmes en cherchant des solutions sur internet ou en consultat des sites comme Flight rules for Git et Dangit, git!
                                                                                                                
 
                                                                                                                
 
 
                                                                                                                Voir aussi
                                                                                                                
diff --git a/files/fr/learn/tools_and_testing/index.html b/files/fr/learn/tools_and_testing/index.html
index 49178ba3ef..4eaf03b5c7 100644
--- a/files/fr/learn/tools_and_testing/index.html
+++ b/files/fr/learn/tools_and_testing/index.html
@@ -17,19 +17,19 @@ original_slug: Apprendre/Outils_et_tests
 ---
 
                                                                                                                {{LearnSidebar}}
                                                                                                                
 
-
                                                                                                                Une fois que vous commencerez à être à l'aise avec les langages de programmation web (comme le HTML, le CSS, et le JavaScript), et acquerrez plus d'expérience, lirez plus de ressources, et apprendrez plus de choses, vous commencerez à tomber sur toute sorte d'outils, comme par exemple des scripts CSS et JavaScript, des outils de tests et d'automatisation, et bien plus encore. Au fur et à mesure que vos projets web deviendront de plus en plus grands et complexes, vous allez vouloir savoir comment utiliser certains de ces outils et élaborer des tests fiables pour votre code. Cette partie de la zone d'apprentissage cherche à vous donner tout ce dont vous avez besoin afin de commencer sur de bonnes bases et faire des choix informés.
                                                                                                                
+
                                                                                                                Une fois que vous commencerez à être à l'aise avec les langages de programmation web (comme le HTML, le CSS, et le JavaScript), et acquerrez plus d'expérience, lirez plus de ressources, et apprendrez plus de choses, vous commencerez à tomber sur toute sorte d'outils, comme par exemple des scripts CSS et JavaScript, des outils de tests et d'automatisation, et bien plus encore. Au fur et à mesure que vos projets web deviendront de plus en plus grands et complexes, vous allez vouloir savoir comment utiliser certains de ces outils et élaborer des tests fiables pour votre code. Cette partie de la zone d'apprentissage cherche à vous donner tout ce dont vous avez besoin afin de commencer sur de bonnes bases et faire des choix informés.
                                                                                                                
 
 
                                                                                                                L'industrie du web est un endroit excitant où travailler, mais ce n'est pas sans ses complications. Les technologies de base que nous utilisons pour concevoir des sites web sont assez stables maintenant, mais de nouvelles fonctionnalités sont ajoutées continuellement, et de nouveaux outils — qui les rendent faciles d'utilisation, et sont construits sur ces technologies — apparaissent constamment. En plus de cela, il ne faut pas oublier de vérifier que notre code utilise les meilleures pratiques qui permettront à notre projet de fonctionner sur différents navigateurs et appareils, et d'être aussi utilisable par des personnes ayant un handicap.
                                                                                                                
 
 
                                                                                                                Savoir précisément quels outils prendre peut parfois être une tâche difficile, c'est pourquoi nous avons écrit cette séries d'articles, afin de vous expliquer quels types d'outils existent, ce qu'ils peuvent faire pour vous et comment se servir des plus utilisés dans l'industrie.
                                                                                                                
 
 
                                                                                                                
-
                                                                                                                Note: parce que de nouveaux outils apparaissent tout le temps et que les anciens se démodent, nous avons écrit ceci afin d'être aussi neutre que possible — nous voulons nous concentrer premièrement et essentiellement sur les tâches générales que ces outils vont vous aider à accomplir, plutôt que de parler des outils qui sont spécifiques à une tâche. Nous devons bien sûr vous montrer comment utiliser un outil avant de vous en apprendre les techniques spécifiques, mais gardez à l'esprit que les outils que nous vous montrons ne sont pas forcément les meilleurs, ni les seuls disponibles — dans la plupart des cas il existe d'autre façons de faire, mais nous voulons vous fournir une méthodologie claire et qui fonctionne.
                                                                                                                
+
                                                                                                                Note : parce que de nouveaux outils apparaissent tout le temps et que les anciens se démodent, nous avons écrit ceci afin d'être aussi neutre que possible — nous voulons nous concentrer premièrement et essentiellement sur les tâches générales que ces outils vont vous aider à accomplir, plutôt que de parler des outils qui sont spécifiques à une tâche. Nous devons bien sûr vous montrer comment utiliser un outil avant de vous en apprendre les techniques spécifiques, mais gardez à l'esprit que les outils que nous vous montrons ne sont pas forcément les meilleurs, ni les seuls disponibles — dans la plupart des cas il existe d'autre façons de faire, mais nous voulons vous fournir une méthodologie claire et qui fonctionne.
                                                                                                                
 
                                                                                                                
 
 
                                                                                                                Parcours d'apprentissage
                                                                                                                
 
-
                                                                                                                Vous devriez vraiment apprendre les langages de base HTML, CSS, et JavaScript avant d'essayer d'utiliser les outils présentés ici. Par exemple, vous allez avoir besoin de connaître les fondamentaux de ces langages avant de commencer à déboguer des erreurs dans un code source web complexe, ou utiliser efficacement les librairies JavaScript , ou encore écrire des tests et les utiliser sur vos codes, etc.
                                                                                                                
+
                                                                                                                Vous devriez vraiment apprendre les langages de base HTML, CSS, et JavaScript avant d'essayer d'utiliser les outils présentés ici. Par exemple, vous allez avoir besoin de connaître les fondamentaux de ces langages avant de commencer à déboguer des erreurs dans un code source web complexe, ou utiliser efficacement les librairies JavaScript , ou encore écrire des tests et les utiliser sur vos codes, etc.
                                                                                                                
 
 
                                                                                                                Vous avez d'abord besoin d'une base solide.
                                                                                                                
 
@@ -38,6 +38,6 @@ original_slug: Apprendre/Outils_et_tests
 
                                                                                                                
  
                                                                                                                Outils de développement web
                                                                                                                
  
                                                                                                                Dans ce module, nous explorons les différents types d'outils de développement web. Ceci inclut de connaître les tâches les plus courantes que vous serez amenés à résoudre, comment les intégrer au sein d'un workflow, et les meilleurs outils actuellement disponibles afin d'effectuer ces tâches.
                                                                                                                
- 
                                                                                                                Test à travers différents navigateurs
                                                                                                                
+ 
                                                                                                                Test à travers différents navigateurs
                                                                                                                
  
                                                                                                                Ce module est orienté spécifiquement vers les tests de projets web à travers différents navigateurs. Ici on cherche à identifier quel type d'audience vous ciblez (ex. de quels utilisateurs, navigateurs et appareils avez vous le plus besoin de vous soucier?), comment faire des tests, les principaux problèmes auxquels vous devrez faire face avec différents types de codes et comment en venir à bout, quels outils sont les plus adaptés pour vous aider à cerner et résoudre ces problèmes, et comment utiliser l'automatisation afin d'accélérer les tests.
                                                                                                                
 
                                                                                                                
diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html
index 9905d1e7ae..ff9e62f0b8 100644
--- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html
+++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html
@@ -18,7 +18,7 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_
 
 
                                                                                                                Au cours de tout process de développement, vous allez très certainement être confronté à la nécessité d'exécuter des commandes dans un terminal (ce que l'on appelle "travailler en ligne de commande"). Cet article vous propose une introduction au terminal et vous dévoile les commandes essentielles dont vous aurez besoin, la façon de les chaîner, et comment ajouter vos propres outils d'interface en ligne de commande (CLI, command line interface).
                                                                                                                
 
-
                                                                                                            
  
   
                                                                                                            
    Prérequis :Connaissances avec le noyau des langages HTML, CSS, et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.Connaissances avec le noyau des langages HTML, CSS, et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.
   
                                                                                                            
   
                                                                                                            
    Objectif :
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
                                                                                                            
+
                                                                                                            
@@ -129,7 +129,7 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_
 
                                                                                                            
-
                                                                                                            Note : On trouve  sur le web un bon nombre de tutoriels de qualité qui permettent d'aller beaucoup plus loin avec la ligne de commande — ceci n'est qu'une brève introduction ! L'auteur de ces lignes lui-même a sa propre série de vidéos de formation au terminal (80% de réduction en utilisant le code mdn au moment du paiement — 19$).
                                                                                                            
+
                                                                                                            Note : On trouve  sur le web un bon nombre de tutoriels de qualité qui permettent d'aller beaucoup plus loin avec la ligne de commande — ceci n'est qu'une brève introduction ! L'auteur de ces lignes lui-même a sa propre série de vidéos de formation au terminal (80% de réduction en utilisant le code mdn au moment du paiement — 19$).
                                                                                                            
 
                                                                                                            Pour aller plus loin, voyons maintenant comment utiliser quelques-uns de ces outils en ligne de commande. Commencez par ouvrir votre programme de terminal (ou console) !
                                                                                                            
@@ -153,7 +153,7 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_
 
                                                                                                            cd ..
                                                                                                            
-
                                                                                                            Note: Raccourci vraiment utile sur un terminal, la touche tab émule la saisie automatique des mots dont vous connaissez l'existence, ce qui vous évite de les taper en entier. Par exemple, après avoir tapé les deux commandes ci-dessus, essayez de taper cd B puis de presser la touche tab — cela devrait saisir automatiquement le nom de répertoire Bureau, à condition qu'il soit présent dans le répertoire courant. Gardez ceci à l'esprit tout en poursuivant.
                                                                                                            
+
                                                                                                            Note : Raccourci vraiment utile sur un terminal, la touche tab émule la saisie automatique des mots dont vous connaissez l'existence, ce qui vous évite de les taper en entier. Par exemple, après avoir tapé les deux commandes ci-dessus, essayez de taper cd B puis de presser la touche tab — cela devrait saisir automatiquement le nom de répertoire Bureau, à condition qu'il soit présent dans le répertoire courant. Gardez ceci à l'esprit tout en poursuivant.
                                                                                                            
 
                                                                                                            Si le répertoire que vous visez est placé assez loin dans l'arborisation des fichiers, il vous faut connaître le chemin (on dit souvent path, qui est le terme anglais) pour vous y rendre. Cela devient en général plus facile à mesure que vous vous familiarisez avec la structure de votre système de fichiers, mais si vous n'êtes pas sûr vous pouvez le retrouver en combinant la commande ls avec des clicks dans votre Explorer ou autre gestionnaire graphique de fichiers, ce qui va vous permettre de voir où se trouve le répertoire (ou dossier) cherché par rapport à votre répertoire actuel (= répertoire courant).
                                                                                                            
@@ -171,7 +171,7 @@ cd src
                                                                                                            Notez que si vous commencez le chemin par un slash, vous le rendez absolu, par exemple /Utilisateurs/votre-nom/Bureau. Omettre le premier slash comme nous l'avons fait ci-dessus construit un chemin relatif à votre répertoire de travail actuel. C'est exactement la même chose qu'une URL dans un navigateur. Un slash au début signifie "à la racine du site web", alors qu'omettre le slash signifie "l'URL est relative à ma page courante".
                                                                                                            
-
                                                                                                            Note: Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. cd Bureau\projet\src — cela peut vous paraître vraiment étrange, mais si la question vous intéresse, regardez cette vidéo YouTube (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft.
                                                                                                            
+
                                                                                                            Note : Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. cd Bureau\projet\src — cela peut vous paraître vraiment étrange, mais si la question vous intéresse, regardez cette vidéo YouTube (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft.
                                                                                                            
 
                                                                                                            Lister le contenu d'un répertoire
                                                                                                            
@@ -199,11 +199,11 @@ cd src
                                                                                                            A vanilla mac terminal and a more colorful custom mac terminal, showing a file listing - the result of running the ls -l command
                                                                                                            
-
                                                                                                            Note: Pour savoir exactement quelles sont les options d'une commande, vous pouvez consulter sa page de manuel (man page en anglais). Pour cela, tapez la commande man suivie du nom de la commande que vous cherchez, par exemple man ls. La page de manuel va s'ouvrir dans le lecteur de texte par défaut de votre terminal (par exemple, less sur mon terminal), et vous allez pouvoir faire défiler la page avec les touches de flèches ou un mécanisme similaire. La page de manuel liste toutes les options de façon très détaillée, ce qui peut être un peu intimidant au début, mais au moins vous savez où les trouver si vous en avez besoin. Lorsque vous avez terminé avec la page de manuel, vous la refermez avec la commande "quitter" de votre visionneur de texte (pour less c'est "q" ; si ce n'est pas évident cherchez sur Internet).
                                                                                                            
+
                                                                                                            Note : Pour savoir exactement quelles sont les options d'une commande, vous pouvez consulter sa page de manuel (man page en anglais). Pour cela, tapez la commande man suivie du nom de la commande que vous cherchez, par exemple man ls. La page de manuel va s'ouvrir dans le lecteur de texte par défaut de votre terminal (par exemple, less sur mon terminal), et vous allez pouvoir faire défiler la page avec les touches de flèches ou un mécanisme similaire. La page de manuel liste toutes les options de façon très détaillée, ce qui peut être un peu intimidant au début, mais au moins vous savez où les trouver si vous en avez besoin. Lorsque vous avez terminé avec la page de manuel, vous la refermez avec la commande "quitter" de votre visionneur de texte (pour less c'est "q" ; si ce n'est pas évident cherchez sur Internet).
                                                                                                            
 
                                                                                                            
-
                                                                                                            Note: Pour lancer une commande avec des options multiples, on peut en général les regrouper dans une seule chaîne de caractères après le tiret, par exemple ls -lah, ou ls -ltrh. Exercez-vous à consulter la page man de ls pour savoir ce que vous donnent ces options !
                                                                                                            
+
                                                                                                            Note : Pour lancer une commande avec des options multiples, on peut en général les regrouper dans une seule chaîne de caractères après le tiret, par exemple ls -lah, ou ls -ltrh. Exercez-vous à consulter la page man de ls pour savoir ce que vous donnent ces options !
                                                                                                            
 
                                                                                                            Maintenant que vous connaissez ces deux commandes fondamentales, allez un peu fouiller dans votre système de fichiers en naviguant à partir de votre répertoire.
                                                                                                            
@@ -224,7 +224,7 @@ cd src
                                                                                                            
-
                                                                                                            Note : Beaucoup de commandes de terminal autorisent l'emploi d'astérisques comme caractère "joker", dont le sens est "une séquence de caractères quelconque". Cela vous permet d'exécuter une commande en une seule fois sur un nombre potentiellement important de fichiers qui correspondent au modèle donné. À titre d'exemple, rm mdn-* va effacer tous les fichiers qui commencent par mdn-. rm mdn-*.bak va effacer tous les fichiers qui commencent par mdn- et finissent par .bak.
                                                                                                            
+
                                                                                                            Note : Beaucoup de commandes de terminal autorisent l'emploi d'astérisques comme caractère "joker", dont le sens est "une séquence de caractères quelconque". Cela vous permet d'exécuter une commande en une seule fois sur un nombre potentiellement important de fichiers qui correspondent au modèle donné. À titre d'exemple, rm mdn-* va effacer tous les fichiers qui commencent par mdn-. rm mdn-*.bak va effacer tous les fichiers qui commencent par mdn- et finissent par .bak.
                                                                                                            
 
                                                                                                            Le terminal — une pratique à risque ?
                                                                                                            
@@ -454,7 +454,7 @@ printMe(myObj);
                                                                                                          • En tant qu'élément des contrôles continus d'intégration grâce à des outils tels que Github Actions.
                                                                                                            • 
 
-
                                                                                                            Nous préférons personnellement la deuxième solution — quand on code par exemple sur VS Code, Prettier entre en jeu et nettoie le formatage lors de chaque  enregistrement. Vous trouverez dans les Prettier docs beaucoup plus d'informations sur les différentes façons d'utiliser Prettier.
                                                                                                            
+
                                                                                                            Nous préférons personnellement la deuxième solution — quand on code par exemple sur VS Code, Prettier entre en jeu et nettoie le formatage lors de chaque  enregistrement. Vous trouverez dans les Prettier docs beaucoup plus d'informations sur les différentes façons d'utiliser Prettier.
                                                                                                            Autres outils à essayer
                                                                                                            
 
diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.html b/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.html
index c954b9395a..e19a510d2f 100644
--- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.html
+++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.html
@@ -17,23 +17,23 @@ translation_of: Learn/Tools_and_testing/Understanding_client-side_tools
 ---
 
                                                                                                            {{LearnSidebar}}
                                                                                                            
 
-
                                                                                                            Les outils côté client peuvent être intimidants, mais cette série d'articles vise à illustrer le but de certains des types d'outils côté client les plus courants, à expliquer les outils que vous pouvez enchaîner, comment les installer à l'aide de gestionnaires de packages et les contrôler à l'aide de la ligne de commande. Nous terminons en fournissant un exemple complet de chaîne d'outils vous montrant comment devenir productif.
                                                                                                            
+
                                                                                                            Les outils côté client peuvent être intimidants, mais cette série d'articles vise à illustrer le but de certains des types d'outils côté client les plus courants, à expliquer les outils que vous pouvez enchaîner, comment les installer à l'aide de gestionnaires de packages et les contrôler à l'aide de la ligne de commande. Nous terminons en fournissant un exemple complet de chaîne d'outils vous montrant comment devenir productif.
                                                                                                            Conditions prérequises
                                                                                                            
 
-
                                                                                                            Vous devez vraiment apprendre les bases des langages HTML, CSS, et JavaScript avant d'essayer d'utiliser les outils détaillés ici.
                                                                                                            
+
                                                                                                            Vous devez vraiment apprendre les bases des langages HTML, CSS, et JavaScript avant d'essayer d'utiliser les outils détaillés ici.
                                                                                                            Guides
                                                                                                            
- 
                                                                                                            Vue d'ensemble de l'outillage côté client
                                                                                                            
+ 
                                                                                                            Vue d'ensemble de l'outillage côté client
                                                                                                            
  
                                                                                                            Dans cet article, nous vous proposons un aperçu des outils Web modernes, des types d'outils disponibles et de l'endroit où vous les rencontrerez dans le cycle de vie du développement d'applications Web, et comment trouver de l'aide sur des outils individuels.
                                                                                                            
- 
                                                                                                            Cours intensif en ligne de commande
                                                                                                            
+ 
                                                                                                            Cours intensif en ligne de commande
                                                                                                            
  
                                                                                                            Dans votre processus de développement, vous devrez sans aucun doute exécuter une commande dans le terminal (ou sur la "ligne de commande" - ce sont en fait la même chose). Cet article fournit une introduction au terminal, les commandes essentielles que vous devrez y saisir, comment enchaîner des commandes et comment ajouter vos propres outils d'interface de ligne de commande (CLI).
                                                                                                            
- 
                                                                                                            Principes de base de la gestion des paquets
                                                                                                            
+ 
                                                                                                            Principes de base de la gestion des paquets
                                                                                                            
  
                                                                                                            Dans cet article, nous examinerons en détail les gestionnaires de paquets pour comprendre comment nous pouvons les utiliser dans nos propres projets - pour installer les dépendances des outils de projet, les maintenir à jour, etc.
                                                                                                            
- 
                                                                                                            Introduction d'une chaîne d'outils complète
                                                                                                            
+ 
                                                                                                            Introduction d'une chaîne d'outils complète
                                                                                                            
  
                                                                                                            Dans les deux derniers articles de la série, nous solidifierons vos connaissances en matière d'outillage en vous guidant tout au long du processus de création d'un exemple de chaîne d'outils d'étude de cas. Nous irons de la mise en place d'un environnement de développement sensible et de la mise en place d'outils de transformation au déploiement effectif de votre application sur Netlify. Dans cet article, nous allons présenter l'étude de cas, configurer notre environnement de développement et configurer nos outils de transformation de code.
                                                                                                            
- 
                                                                                                            Déployer notre application
                                                                                                            
+ 
                                                                                                            Déployer notre application
                                                                                                            
  
                                                                                                            Dans le dernier article de notre série, nous prenons l'exemple de chaîne d'outils que nous avons construit dans l'article précédent et nous l'ajoutons afin de pouvoir déployer notre exemple d'application. Nous poussons le code sur GitHub, le déployons à l'aide de Netlify et vous montrons même comment ajouter un test simple au processus.
                                                                                                            
 
                                                                                                            
-- 
cgit v1.2.3-54-g00ecf


                                                                                                            
  
   
                                                                                                            
    Prérequis :