From f19525aabd103f754c4c385c7bc0e2bea56d71ae Mon Sep 17 00:00:00 2001 From: Carolyn Wu <87150472+cw118@users.noreply.github.com> Date: Sun, 6 Mar 2022 16:32:09 +0100 Subject: Markdown fixes part 6 (fr/learn) (#4405) * MD037/38 fixes, no spaces in code/emphasis * Remaining MD037/38/39 fixes for fr/learn * Missed markdown fixes --- .../accessibility/css_and_javascript/index.md | 6 +++--- files/fr/learn/accessibility/html/index.md | 4 ++-- files/fr/learn/accessibility/multimedia/index.md | 2 +- .../accessibility/what_is_accessibility/index.md | 4 ++-- .../set_up_a_local_testing_server/index.md | 2 +- .../common_questions/what_is_a_web_server/index.md | 2 +- .../what_software_do_i_need/index.md | 4 ++-- .../css/building_blocks/styling_tables/index.md | 2 +- .../css/css_layout/legacy_layout_methods/index.md | 2 +- .../css/css_layout/responsive_design/index.md | 2 +- files/fr/learn/css/first_steps/index.md | 2 +- files/fr/learn/css/howto/index.md | 2 +- .../learn/css/styling_text/fundamentals/index.md | 2 +- .../forms/basic_native_form_controls/index.md | 2 +- files/fr/learn/forms/form_validation/index.md | 2 +- .../how_to_build_custom_form_controls/index.md | 4 ++-- .../forms/how_to_structure_a_web_form/index.md | 2 +- .../forms/html_forms_in_legacy_browsers/index.md | 4 ++-- .../index.md | 2 +- .../sending_and_retrieving_form_data/index.md | 6 +++--- .../sending_forms_through_javascript/index.md | 2 +- files/fr/learn/forms/styling_web_forms/index.md | 4 ++-- files/fr/learn/forms/your_first_form/index.md | 4 ++-- .../dealing_with_files/index.md | 4 ++-- .../fr/learn/getting_started_with_the_web/index.md | 2 +- .../installing_basic_software/index.md | 6 +++--- .../javascript_basics/index.md | 4 ++-- .../publishing_your_website/index.md | 2 +- .../howto/author_fast-loading_html_pages/index.md | 2 +- .../learn/html/howto/use_data_attributes/index.md | 2 +- files/fr/learn/html/index.md | 2 +- .../advanced_text_formatting/index.md | 2 +- .../creating_hyperlinks/index.md | 4 ++-- .../introduction_to_html/debugging_html/index.md | 2 +- .../document_and_website_structure/index.md | 4 ++-- files/fr/learn/html/introduction_to_html/index.md | 2 +- .../images_in_html/index.md | 6 +++--- .../learn/html/multimedia_and_embedding/index.md | 2 +- .../other_embedding_technologies/index.md | 4 ++-- .../responsive_images/index.md | 2 +- .../video_and_audio_content/index.md | 12 ++++++------ files/fr/learn/html/tables/basics/index.md | 2 +- .../asynchronous/timeouts_and_intervals/index.md | 2 +- .../build_your_own_function/index.md | 2 +- .../building_blocks/conditionals/index.md | 6 +++--- .../javascript/building_blocks/events/index.md | 10 +++++----- .../javascript/building_blocks/functions/index.md | 4 ++-- .../building_blocks/image_gallery/index.md | 2 +- files/fr/learn/javascript/building_blocks/index.md | 2 +- .../building_blocks/looping_code/index.md | 22 +++++++++++----------- .../building_blocks/return_values/index.md | 2 +- .../client-side_web_apis/introduction/index.md | 4 ++-- .../javascript/first_steps/a_first_splash/index.md | 8 ++++---- .../learn/javascript/first_steps/arrays/index.md | 4 ++-- .../first_steps/silly_story_generator/index.md | 4 ++-- .../learn/javascript/first_steps/strings/index.md | 2 +- .../first_steps/useful_string_methods/index.md | 2 +- .../first_steps/what_is_javascript/index.md | 4 ++-- files/fr/learn/javascript/objects/json/index.md | 2 +- .../objects/object_building_practice/index.md | 6 +++--- .../javascript/objects/object_prototypes/index.md | 6 +++--- .../learn/server-side/django/admin_site/index.md | 2 +- .../django/development_environment/index.md | 6 +++--- files/fr/learn/server-side/django/index.md | 2 +- .../learn/server-side/django/introduction/index.md | 2 +- files/fr/learn/server-side/django/models/index.md | 2 +- .../django/tutorial_local_library_website/index.md | 2 +- .../first_steps/client-server_overview/index.md | 2 +- .../first_steps/website_security/index.md | 4 ++-- files/fr/learn/server-side/index.md | 2 +- .../cross_browser_testing/accessibility/index.md | 2 +- .../cross_browser_testing/html_and_css/index.md | 6 +++--- .../cross_browser_testing/javascript/index.md | 4 ++-- .../testing_strategies/index.md | 2 +- files/fr/learn/tools_and_testing/github/index.md | 2 +- .../command_line/index.md | 4 ++-- 76 files changed, 136 insertions(+), 136 deletions(-) (limited to 'files') diff --git a/files/fr/learn/accessibility/css_and_javascript/index.md b/files/fr/learn/accessibility/css_and_javascript/index.md index dacf718e80..3743469254 100644 --- a/files/fr/learn/accessibility/css_and_javascript/index.md +++ b/files/fr/learn/accessibility/css_and_javascript/index.md @@ -93,7 +93,7 @@ Vous devriez : - Vos listes devraient ressembler à des listes. - La couleur du texte doit présenter un contraste suffisant avec la couleur de fond. -Voir [Fondamentaux du texte HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals) et [ Introduction au style de texte](/fr/docs/Learn/CSS/Styling_text) pour plus d'informations. +Voir [Fondamentaux du texte HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals) et [Introduction au style de texte](/fr/docs/Learn/CSS/Styling_text) pour plus d'informations. #### Texte mis en emphase @@ -190,7 +190,7 @@ Tableaux pour la présentation des données tabulées. Vous pouvez voir un bon exemple simple de  [table-css.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html) et ([en direct](https://mdn.github.io/learning-area/accessibility/css/table-css.html)). -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 @@ -293,7 +293,7 @@ function validate(e) { 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()](/fr/docs/Web/API/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()](/fr/docs/Web/API/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`. diff --git a/files/fr/learn/accessibility/html/index.md b/files/fr/learn/accessibility/html/index.md index 7d23870cc5..80bab3a496 100644 --- a/files/fr/learn/accessibility/html/index.md +++ b/files/fr/learn/accessibility/html/index.md @@ -482,7 +482,7 @@ Cela met en évidence l’importance non seulement d’utiliser des noms de fich 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](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML) et[ Images adaptatives](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web) pour plus d’informations sur la mise en œuvre des images et les meilleures pratiques. +> **Note :** Lisez [Les images en HTML](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML) et [Images adaptatives](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web) 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. @@ -530,7 +530,7 @@ Malheureusement, la plupart des lecteurs d’écran ne semblent pas encore assoc ``` -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. diff --git a/files/fr/learn/accessibility/multimedia/index.md b/files/fr/learn/accessibility/multimedia/index.md index 1f6b2ad8c0..3586388ef4 100644 --- a/files/fr/learn/accessibility/multimedia/index.md +++ b/files/fr/learn/accessibility/multimedia/index.md @@ -50,7 +50,7 @@ Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniqu ## 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é](/fr/docs/Apprendre/a11y/HTML)  —  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é](/fr/docs/Apprendre/a11y/HTML)  —  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: diff --git a/files/fr/learn/accessibility/what_is_accessibility/index.md b/files/fr/learn/accessibility/what_is_accessibility/index.md index a0bf7727ec..39f6cd5296 100644 --- a/files/fr/learn/accessibility/what_is_accessibility/index.md +++ b/files/fr/learn/accessibility/what_is_accessibility/index.md @@ -112,7 +112,7 @@ Contrairement à d’autres problèmes d’accessibilité web, il est impossible 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  r[apport 2014 sur le statut d'invalidité ](http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf)(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é](http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf) (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](https://apprendreaeduquer.fr/fonctions-cognitives/) de apprendreaeduquer fournit une extension utile de ces idées et mérite certainement d'être lue. @@ -139,7 +139,7 @@ D'autre part, si vous travaillez sur un site web de galerie présentant des œuv 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é](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility) 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é](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility) couvre les spécificités d'accessibilité qui doivent être testées plus en détail. Résumer : diff --git a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md index 04f3d40be2..6f8b958dec 100644 --- a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md +++ b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md @@ -49,7 +49,7 @@ Vous savez que vous avez lancé l'exemple depuis un fichier local, lorsque l'URL 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 : -- **Ils sont basés sur des requêtes asynchrones**. Certains navigateurs comme Chrome n'exécutent pas de requêtes asynchrones (voyez [Récolter des données depuis le serveur ](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)) si vous lancez simplement l'exemple comme un fichier local. Cela est dû à des restrictions de sécurité (voir [Sécurité des sites Web](/fr/docs/Learn/Server-side/First_steps/Website_security) pour en savoir plus). +- **Ils sont basés sur des requêtes asynchrones**. Certains navigateurs comme Chrome n'exécutent pas de requêtes asynchrones (voyez [Récolter des données depuis le serveur](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)) si vous lancez simplement l'exemple comme un fichier local. Cela est dû à des restrictions de sécurité (voir [Sécurité des sites Web](/fr/docs/Learn/Server-side/First_steps/Website_security) pour en savoir plus). - **Ils mettent en œuvre un langage spécifique, tournant sur le serveur**. Des langages côté-serveur (comme PHP ou Python) nécessitent un environnement spécifique fourni par le serveur pour interpréter le code et donner des résultats. ## Créer un serveur HTTP local simple diff --git a/files/fr/learn/common_questions/what_is_a_web_server/index.md b/files/fr/learn/common_questions/what_is_a_web_server/index.md index e3961daf4d..ab4cfd0cd1 100644 --- a/files/fr/learn/common_questions/what_is_a_web_server/index.md +++ b/files/fr/learn/common_questions/what_is_a_web_server/index.md @@ -115,6 +115,6 @@ Il y a tellement de serveurs d'applications qu'il est difficile d'en suggérer u Maintenant que vous connaissez les serveurs web, vous pourriez : -- continuer votre lecture avec[ combien ça coûte de faire quelque chose sur le Web](/fr/docs/Apprendre/Publier_sur_le_Web_combien_ça_coûte) +- continuer votre lecture avec [combien ça coûte de faire quelque chose sur le Web](/fr/docs/Apprendre/Publier_sur_le_Web_combien_ça_coûte) - en savoir plus sur [les différents logiciels nécessaires à la création d'un site web](/fr/docs/Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web) - poursuivre avec quelque chose de plus pratique comme [comment transférer des fichiers vers un serveur web](/fr/docs/Apprendre/Transférer_des_fichiers_vers_un_serveur_web). diff --git a/files/fr/learn/common_questions/what_software_do_i_need/index.md b/files/fr/learn/common_questions/what_software_do_i_need/index.md index 8b3b46c806..bc77e82145 100644 --- a/files/fr/learn/common_questions/what_software_do_i_need/index.md +++ b/files/fr/learn/common_questions/what_software_do_i_need/index.md @@ -167,7 +167,7 @@ Voici une capture d'écran qui illustre l'allure d'un éditeur de texte avancé ### 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 ?](/fr/docs/Learn/How_much_does_it_cost)). 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](https://en.wikipedia.org/wiki/Rsync) et [Git/Github](https://help.github.com/articles/using-a-custom-domain-with-github-pages). +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 ?](/fr/docs/Learn/How_much_does_it_cost)). 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](https://en.wikipedia.org/wiki/Rsync) et [Git/Github](https://help.github.com/articles/using-a-custom-domain-with-github-pages). > **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. @@ -214,7 +214,7 @@ Comme vous le savez sans doute déjà, vous avez besoin d'un navigateur web pour - [Microsoft Internet Explorer](http://windows.microsoft.com/fr-fr/internet-explorer/download-ie) - [Apple Safari](http://www.apple.com/safari/) -Si votre site s'adresse à un public particulier (par exemple un pays spécifique ou une plate-forme donnée), vous pourrez avoir à tester votre site sur des navigateurs supplémentaires comme [Opera](http://www.opera.com/), [Dolphin](http://dolphin.com/) ou[ UC Browser](http://www.ucweb.com/ucbrowser/). +Si votre site s'adresse à un public particulier (par exemple un pays spécifique ou une plate-forme donnée), vous pourrez avoir à tester votre site sur des navigateurs supplémentaires comme [Opera](http://www.opera.com/), [Dolphin](http://dolphin.com/) ou [UC Browser](http://www.ucweb.com/ucbrowser/). Cela se complique quand on réalise que certains navigateurs ne fonctionnent que sur certains systèmes d'exploitation. Apple Safari ne fonctionne que sur iOS et Mac OS, Internet Explorer ne fonctionne que sur Windows, etc. Face à ce problème, mieux vaut tirer parti de services comme [Browsershots](http://browsershots.org/) ou [Browserstack](http://www.browserstack.com/). Browsershots fournit des captures d'écran de votre site, tel qu'il est rendu dans les différents navigateurs. Browserstack vous permet de complètement contrôler des machines virtuelles afin que vous puissiez tester votre site sur les environnements les plus fréquents. Sinon, vous pouvez mettre en place votre propre machine virtuelle mais cela demandera quelques connaissances (si vous choisissez cette option, Microsoft met à disposition, sur [modern.ie](https://modern.ie), une machine virtuelle prête à être utilisée). diff --git a/files/fr/learn/css/building_blocks/styling_tables/index.md b/files/fr/learn/css/building_blocks/styling_tables/index.md index 253f8338c6..bfebc37bc0 100644 --- a/files/fr/learn/css/building_blocks/styling_tables/index.md +++ b/files/fr/learn/css/building_blocks/styling_tables/index.md @@ -252,7 +252,7 @@ table { } ``` -- Plus haut, nous avons vu comment on utilisait le sélecteur {{cssxref(":nth-child")}} pour sélectionner un élément enfant. Il est aussi possible de donner une formule en paramètre afin qu'il sélectionne une suite d'éléments. La formule 2n-1 sélectionne tous les enfants impairs (1, 3, 5, etc.) et la formule 2n sélectionne tous les enfants pairs (2, 4, 6, etc.). Nous avons utilisé les mots-clés `odd` (impair) et `even `(pair) dans notre code ; ils font exactement la même chose que les formules susmentionnées. Dans ce cas, nous donnons aux lignes paires et impaires des couleurs différentes (clinquantes) +- Plus haut, nous avons vu comment on utilisait le sélecteur {{cssxref(":nth-child")}} pour sélectionner un élément enfant. Il est aussi possible de donner une formule en paramètre afin qu'il sélectionne une suite d'éléments. La formule 2n-1 sélectionne tous les enfants impairs (1, 3, 5, etc.) et la formule 2n sélectionne tous les enfants pairs (2, 4, 6, etc.). Nous avons utilisé les mots-clés `odd` (impair) et `even` (pair) dans notre code ; ils font exactement la même chose que les formules susmentionnées. Dans ce cas, nous donnons aux lignes paires et impaires des couleurs différentes (clinquantes) - Nous avons également ajouté un motif d'arrière-plan répétitif sur toutes les lignes ; il donne un peu de bruit (un `.png` semi-transparent avec un peu de distorsion visuelle) pour donner une certaine texture. - Finalement, nous avons donné à toute la table une couleur de fond unie de façon à ce que les navigateurs qui ne prennent pas en charge le sélecteur `:nth-child` disposent encore d'une teinte de fond pour les lignes du corps de tableau. diff --git a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md index 7fd67d23b5..6d0e3d27ee 100644 --- a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md +++ b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md @@ -562,7 +562,7 @@ Regardez dans le fichier skeleton.css, vous verrez la  CSS appliquée quand on } ``` -Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieur d'une ligne, donc avec notre exemple précédent nous aurons besoin d'un `
` supplémentaire ou d'un autre élément de la classe `row` imbriqué entre le `
` de `content `et les véritables conteneurs `
`de contenu. Nous avons aussi déjà fait cela. +Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieur d'une ligne, donc avec notre exemple précédent nous aurons besoin d'un `
` supplémentaire ou d'un autre élément de la classe `row` imbriqué entre le `
` de `content` et les véritables conteneurs `
` de contenu. Nous avons aussi déjà fait cela. Disposons maintenant les boîtes conteneur. Skeleton est fondé sur une trame de 12 colonnes. Les boîtes de la ligne supérieure nécessitent toutes des classes `one column` pour qu'elles se répartissent à raison de une par colonne. diff --git a/files/fr/learn/css/css_layout/responsive_design/index.md b/files/fr/learn/css/css_layout/responsive_design/index.md index 87fefdde89..9c4fafc963 100644 --- a/files/fr/learn/css/css_layout/responsive_design/index.md +++ b/files/fr/learn/css/css_layout/responsive_design/index.md @@ -280,7 +280,7 @@ Pourquoi est-ce nécessaire? Parce que les navigateurs mobiles ont tendance à m Cette balise meta existe car lorsque l'Iphone original fut lancé et que les gens commencèrent à regarder des sites web sur un petit écran de téléphone, la plupart des sites n'étaient pas optimisés pour les mobiles. Le navigateur mobile définissait donc la largeur de la fenêtre d'affichage à 960 pixels, affichait la page à cette largeur et affichait le résultat sous la forme d'une version zoomée de la disposition du bureau. Les autres navigateurs mobiles (comme sur Google Android) faisaient la même chose. Les utilisateurs pouvaient zoomer et parcourir le site Web pour voir les éléments qui les intéressaient, mais l'affichage était mauvais. Vous le verrez toujours aujourd'hui si vous avez le malheur de tomber sur un site qui n'est pas responsive. -Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant `width = device-width`, vous remplacez la largeur par défaut d'Apple de `width = 960px `par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu. +Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant `width = device-width`, vous remplacez la largeur par défaut d'Apple de `width = 960px` par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu. **Vous devriez donc toujours inclure la ligne HTML ci-dessus dans la tête de vos documents.** diff --git a/files/fr/learn/css/first_steps/index.md b/files/fr/learn/css/first_steps/index.md index 3861ea29db..be0e15cdfc 100644 --- a/files/fr/learn/css/first_steps/index.md +++ b/files/fr/learn/css/first_steps/index.md @@ -44,5 +44,5 @@ Ce module contient les articles suivants, qui vous présenteront les bases théo ## Voir aussi -- Literacy[ Web intermédiaire 1 : Introduction au CSS](/fr/docs/) +- Literacy [Web intermédiaire 1 : Introduction au CSS](/fr/docs/) - : 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/howto/index.md b/files/fr/learn/css/howto/index.md index f613014a6c..c31fe1ece3 100644 --- a/files/fr/learn/css/howto/index.md +++ b/files/fr/learn/css/howto/index.md @@ -38,7 +38,7 @@ Les liens suivants pointent vers des solutions aux problèmes courants que vous - [Comment contrôler le contenu débordant](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_d%C3%A9passements) - [Comment contrôler la partie des boîtes CSS dessinées au-dessus de l'arrière-plan](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#L%27arri%C3%A8re-plan) - [Comment définir _"inline_", _"block"_ et _"inline-block"_ ?](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte) -- [Comment créer des boîtes fantaisies ](/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes) (lire aussi le module [Styles pour boites](/fr/docs/Learn/CSS/Styling_boxes), généralités). +- [Comment créer des boîtes fantaisies](/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes) (lire aussi le module [Styles pour boites](/fr/docs/Learn/CSS/Styling_boxes), généralités). - [Comment utiliser `background-clip` pour contrôler combien de boîtes sont impactées par l'image de fond-d'écran](/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes#Les_arri%C3%A8re-plans) - [Comment changer complètement le modèle de boîte en utilisant `box-sizing`](/fr/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely) - [Comment contrôler l'arrière-plan](/fr/docs/Learn/CSS/Styling_boxes/Backgrounds) diff --git a/files/fr/learn/css/styling_text/fundamentals/index.md b/files/fr/learn/css/styling_text/fundamentals/index.md index c56023c1f9..6b635b6014 100644 --- a/files/fr/learn/css/styling_text/fundamentals/index.md +++ b/files/fr/learn/css/styling_text/fundamentals/index.md @@ -262,7 +262,7 @@ CSS fournit quatre propriétés communes pour modifier le poids et l'emphase vis - {{cssxref("font-style")}} : utilisé pour appliquer ou enlever le style italique. Les valeurs possibles sont les suivantes (vous ne l'utiliserez que rarement, sauf si vous souhaitez désactiver le style italique pour une raison quelconque) : - `normal` : fige le texte en police normale (suppression du style italique existant). - - `italic `: met le texte en  _version italique de la police_ si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place. + - `italic` : met le texte en  _version italique de la police_ si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place. - `oblique` : force le texte à utiliser une version simulée de fonte italique, créée en _inclinant la version normale_. - {{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): diff --git a/files/fr/learn/forms/basic_native_form_controls/index.md b/files/fr/learn/forms/basic_native_form_controls/index.md index 5258dc363f..2d74518150 100644 --- a/files/fr/learn/forms/basic_native_form_controls/index.md +++ b/files/fr/learn/forms/basic_native_form_controls/index.md @@ -550,7 +550,7 @@ Attention : la prise en charge du widget `color` n'est pas très bonne actuellem Il existe d'autres types de widgets qui ne peuvent pas être classés facilement à cause de leur comportement très particulier, mais qui sont toujours très utiles. -> **Note :** Vous trouverez les exemples de cette section sur GitHub à l'adresse [other-examples.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html) (à voir aussi[ directement](https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html)). +> **Note :** Vous trouverez les exemples de cette section sur GitHub à l'adresse [other-examples.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html) (à voir aussi [directement](https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html)). ### Sélection de fichier diff --git a/files/fr/learn/forms/form_validation/index.md b/files/fr/learn/forms/form_validation/index.md index 6709ff5102..351da31325 100644 --- a/files/fr/learn/forms/form_validation/index.md +++ b/files/fr/learn/forms/form_validation/index.md @@ -222,7 +222,7 @@ Supprimez maintenant le contenu de l'élément `` et remplacez-le par le s ``` - 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. +- 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. ```html hidden input:invalid { diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md index 62c865a50b..80f5e7f772 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md @@ -773,11 +773,11 @@ Mais attendez, avons‑nous vraiment terminé ? 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](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA"). ARIA signifie « Accessible Rich Internet Application » et c'est une[ norme W3C ](http://www.w3.org/TR/wai-aria/)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](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA"). ARIA signifie « Accessible Rich Internet Application » et c'est une [norme W3C](http://www.w3.org/TR/wai-aria/) 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](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") est l'attribut [`role`](/fr/docs/Accessibility/ARIA/ARIA_Techniques "/en-US/docs/Accessibility/ARIA/ARIA_Techniques"). L'attribut [`role `](/fr/docs/Accessibility/ARIA/ARIA_Techniques "/en-US/docs/Accessibility/ARIA/ARIA_Techniques") 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`](/fr/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role "/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role"). 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](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") est l'attribut [`role`](/fr/docs/Accessibility/ARIA/ARIA_Techniques "/en-US/docs/Accessibility/ARIA/ARIA_Techniques"). L'attribut [`role`](/fr/docs/Accessibility/ARIA/ARIA_Techniques "/en-US/docs/Accessibility/ARIA/ARIA_Techniques") 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`](/fr/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role "/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role"). 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")}}. diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/index.md b/files/fr/learn/forms/how_to_structure_a_web_form/index.md index 2e3c1fd3fe..a0a7954b36 100644 --- a/files/fr/learn/forms/how_to_structure_a_web_form/index.md +++ b/files/fr/learn/forms/how_to_structure_a_web_form/index.md @@ -189,7 +189,7 @@ Chaque groupe de fonctionnalités séparées doit être contenu dans un élémen 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](/fr/docs/Learn/HTML/Forms/The_native_form_widgets)). 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](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et des [CSS pour notre formulaire de paiement ](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css)dans un nouveau répertoire. +1. Pour commencer, faites une copie locale de notre [fichier modèle vierge](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et des [CSS pour notre formulaire de paiement](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css) dans un nouveau répertoire. 2. Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML : ```html diff --git a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md index e9380806b1..01405dcce2 100644 --- a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md +++ b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md @@ -22,7 +22,7 @@ En fait, lire la documentation sur ces navigateurs est la chose la plus importan - [le Blog WebKit](https://www.webkit.org/blog/) et [Planet WebKit](http://planet.webkit.org/) rassemblent les meilleurs articles par les déveoppeurs WebKit. - [l](https://www.chromestatus.com/features)e site État de la p[lateforme Chrome](https://www.chromestatus.com/features) est aussi importante. - - ainsi que le[ site web Apple .](https://developer.apple.com/technologies/safari/) + - ainsi que le [site web Apple](https://developer.apple.com/technologies/safari/). ### Documentation indépendante @@ -200,7 +200,7 @@ Modernizr.load({ L'équipe de Modernizr fait une maintenance opportune de grande liste de « [polyfills »](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-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](http://modernizr.com/docs/). +> **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](http://modernizr.com/docs/). ### Faites attention aux performances diff --git a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md index e4193009bc..4834f1872d 100644 --- a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md +++ b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md @@ -1871,7 +1871,7 @@ Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des compor ### Widget `range` -Il n'y a pas de méthode standard pour changer le style de la poignée de` range` et Opera n'a aucun moyen de modifier le rendu par défaut du widget `range`. +Il n'y a pas de méthode standard pour changer le style de la poignée de `range` et Opera n'a aucun moyen de modifier le rendu par défaut du widget `range`. diff --git a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md index c530eaae7f..71ddd327e2 100644 --- a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md +++ b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md @@ -94,7 +94,7 @@ De nombreuses pages anciennes utilisent la notation suivante pour indiquer que l ### L'attribut method -Cet attribut définit comment les données sont envoyées. Le [Protocole HTTP ](/fr/docs/Web/HTTP)fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode `GET` et la méthode `POST`. +Cet attribut définit comment les données sont envoyées. Le [Protocole HTTP](/fr/docs/Web/HTTP) fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode `GET` et la méthode `POST`. Pour bien comprendre la différence entre ces deux méthodes, il convient d'examiner comment le protocole HTTP marche. Chaque fois qu'on veut atteindre une ressource sur Internet, le navigateur envoie une requête à une URL. Une requête HTTP consiste en deux parties : un en-tête (header) qui contient les métadonnées sur les capacités du navigateur, et un corps (body) qui contient les informations nécessaires au serveur pour effectuer la requête. @@ -167,7 +167,7 @@ Quand le formulaire est soumis avec la méthode `POST`, aucune donnée n'est ajo 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. +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](https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html)). @@ -238,7 +238,7 @@ if __name__ == "__main__": Les deux prototypes référencés dans le code ci‑dessus sont les suivants : -- [form.html ](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html): Le même formulaire que celui vu plus haut dans la section [La méthode POST](#the_post_method) mais avec l'attribut `action` défini à la valeur `\{{url_for('hello')}}`. (C'est un modèle [Jinja2](https://jinja.pocoo.org/docs/2.9/), qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. `url_for('hello')` dit en gros « à rediriger sur `/hello` quand le formulaire est soumis ».) +- [`form.html`](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html) : Le même formulaire que celui vu plus haut dans la section [La méthode POST](#the_post_method) mais avec l'attribut `action` défini à la valeur `\{{url_for('hello')}}`. (C'est un modèle [Jinja2](https://jinja.pocoo.org/docs/2.9/), qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. `url_for('hello')` dit en gros « à rediriger sur `/hello` quand le formulaire est soumis ».) - [greeting.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/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](/fr/docs/Learn/Server-side/Django/development_environment#installing_python_3), 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. diff --git a/files/fr/learn/forms/sending_forms_through_javascript/index.md b/files/fr/learn/forms/sending_forms_through_javascript/index.md index 2a91434804..f0e64a4440 100644 --- a/files/fr/learn/forms/sending_forms_through_javascript/index.md +++ b/files/fr/learn/forms/sending_forms_through_javascript/index.md @@ -28,7 +28,7 @@ L'envoi asynchrone de données arbitraires est connu sous le nom AJAX, qui signi -Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant,[ JSON](/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON) a remplacé XML et est de plus en plus courant aujourd'hui. +Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant, [JSON](/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON) a remplacé XML et est de plus en plus courant aujourd'hui. Mais ni XML ni JSON ne s'adaptent à l'encodage des demandes de données de formulaire. Les données de formulaire (`application/x-www-form-urlencoded`) sont constituées de listes de paires clé/valeur codées par URL. Pour la transmission de données binaires, la requête HTTP est transformée en données `multipart/form‑data`. diff --git a/files/fr/learn/forms/styling_web_forms/index.md b/files/fr/learn/forms/styling_web_forms/index.md index 1882911bf7..89c4f12824 100644 --- a/files/fr/learn/forms/styling_web_forms/index.md +++ b/files/fr/learn/forms/styling_web_forms/index.md @@ -169,7 +169,7 @@ Regardons sur un exemple concret la façon de composer un formulaire HTML. Cela ### HTML -Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier[ article de ce guide](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML "/en-US/docs/HTML/Forms/My_first_HTML_form") ; il ne comporte que quelques identifiants supplémentaires et un titre. +Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier [article de ce guide](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML "/en-US/docs/HTML/Forms/My_first_HTML_form") ; il ne comporte que quelques identifiants supplémentaires et un titre. ```html @@ -202,7 +202,7 @@ C'est ici que le « fun » commence ! Avant de commencer à coder, nous avons be 1. L'[image de fond](/files/4151/background.jpg "The postcard background") de la carte postale — téléchargez cette image et sauvegardez‑la dans le même répertoire que votre fichier HTML de travail. 2. Une police de machine à écrire : [« Secret Typewriter » de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Secret-Typewriter) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus. -3. Une police d'écriture manuelle : [ « Journal » de fontsquirrel.com ](http://www.fontsquirrel.com/fonts/Journal)— téléchargez le fichier TTF dans le même répertoire que ci‑dessus. +3. Une police d'écriture manuelle : [« Journal » de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Journal) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus. diff --git a/files/fr/learn/forms/your_first_form/index.md b/files/fr/learn/forms/your_first_form/index.md index 6b6a1bd89f..bf49454b8c 100644 --- a/files/fr/learn/forms/your_first_form/index.md +++ b/files/fr/learn/forms/your_first_form/index.md @@ -151,7 +151,7 @@ Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre n ![](form-no-style.png) -> **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](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html) ([ ](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)ou[ également directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)). +> **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](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html) (ou [également directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)). 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. @@ -259,7 +259,7 @@ Pour nommer vos données vous devez utiliser l'attribut `name` pour identifier b ... ``` -Dans notre exemple, le formulaire enverra trois informations nommées respectivement « `user_name` », « `user_email `» et « `user_message` ». Ces informations seront envoyées à l'URL « `/my-handling-form-page` » avec la méthode HTTP POST. +Dans notre exemple, le formulaire enverra trois informations nommées respectivement « `user_name` », « `user_email` » et « `user_message` ». Ces informations seront envoyées à l'URL « `/my-handling-form-page` » avec la méthode HTTP POST. Du côté du serveur, le script à l'URL « `/my-handling-form-page` » recevra les données sous forme d'une liste de trois éléments clé/valeur intégrés à la requête HTTP. À vous de définir comment ce script va manipuler les données. Chacun des langages serveurs (PHP, Python, Ruby, Java, C#, etc.) a son propre mécanisme pour traiter ces données. Il n'appartient pas à ce guide d'approfondir ce sujet, mais si vous souhaitez en savoir plus, nous avons mis quelques exemples dans l'article [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires). diff --git a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md index 9d836ccf25..888c4afd58 100644 --- a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md +++ b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md @@ -38,8 +38,8 @@ La réponse la plus simple est d'utiliser le trait d'union (-) pour les noms de Cela dit, regardons la structure que le site de test devrait avoir. Les éléments retrouvés quasiment dans tout projet de site web sont un fichier HTML d'index, des dossiers pour les images, les scripts et les feuilles de style. Créons‑les maintenant : 1. **`index.html`** : ce fichier contiendra généralement le contenu de votre page d'accueil, c'est-à-dire le texte et les images que les gens verront lorsqu'ils arriveront sur votre site. Avec votre éditeur de texte, créez un fichier nommé `index.html` puis enregistrez‑le dans votre dossier `site-test`. -2. **un dossier` images`** : ce dossier contiendra toutes les images utilisées pour votre site. Créez un dossier nommé `images` dans votre dossier `site-test`. -3. **un dossier `styles` **: ce dossier contiendra le code des CSS utilisé pour la mise en forme du contenu (par exemple pour définir les couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier nommé `styles` dans votre dossier `site-test`. +2. **un dossier `images`** : ce dossier contiendra toutes les images utilisées pour votre site. Créez un dossier nommé `images` dans votre dossier `site-test`. +3. **un dossier `styles`** : ce dossier contiendra le code des CSS utilisé pour la mise en forme du contenu (par exemple pour définir les couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier nommé `styles` dans votre dossier `site-test`. 4. **un dossier `scripts`** : ce dossier contiendra le code JavaScript utilisé pour ajouter des fonctionnalités interactives sur votre site (par exemple, des boutons qui permettent de charger des données lorsqu'on clique dessus). Créez un dossier nommé `scripts` dans votre dossier `site-test`. > **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 ! diff --git a/files/fr/learn/getting_started_with_the_web/index.md b/files/fr/learn/getting_started_with_the_web/index.md index 311ec1a5d6..ab6e125564 100644 --- a/files/fr/learn/getting_started_with_the_web/index.md +++ b/files/fr/learn/getting_started_with_the_web/index.md @@ -58,4 +58,4 @@ Une succession d'opérations complexes, dont vous n'avez pas forcément à vous ## Voir aussi -[Le Web démystifié ](https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g): une grande série de vidéos expliquant les fondamentaux du Web, visant à parfaire des débutants dans le développement Web. Créée par [Jérémie Patonnier](https://twitter.com/JeremiePat). +[Le Web démystifié](https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g) : une grande série de vidéos expliquant les fondamentaux du Web, visant à parfaire des débutants dans le développement Web. Créée par [Jérémie Patonnier](https://twitter.com/JeremiePat). diff --git a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md index a582609752..7b45872eec 100644 --- a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md +++ b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md @@ -20,8 +20,8 @@ Dans cet article, nous allons vous montrer les outils dont vous aurez besoin pou ## 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, ](https://code.visualstudio.com/)[Atom,](https://atom.io/) [Sublime Text](https://www.sublimetext.com/) ou [Notepad++](https://notepad-plus-plus.org/)) ou un éditeur hybride ([Dreamweaver](http://www.adobe.com/products/dreamweaver.html)). 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](https://www.mozilla.org/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Safari](https://www.apple.com/safari/), [Internet Explorer et ](http://windows.microsoft.com/fr-fr/internet-explorer/download-ie)[Microsoft Edge](https://www.microsoft.com/en-us/windows/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](https://code.visualstudio.com/), [Atom,](https://atom.io/) [Sublime Text](https://www.sublimetext.com/) ou [Notepad++](https://notepad-plus-plus.org/)) ou un éditeur hybride ([Dreamweaver](http://www.adobe.com/products/dreamweaver.html)). 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](https://www.mozilla.org/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Safari](https://www.apple.com/safari/), [Internet Explorer](http://windows.microsoft.com/fr-fr/internet-explorer/download-ie) et [Microsoft Edge](https://www.microsoft.com/en-us/windows/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](http://www.gimp.org/), [Paint.NET](http://www.getpaint.net/), [Krita](https://krita.org/) ou [Photoshop](http://www.adobe.com/uk/products/photoshop.html) 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](http://git-scm.com/) est l'outil lde contrôle de version le plus connu et le service d'hébergement de code [GitHub](https://github.com), 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](http://git-scm.com/) remplace de plus en plus le FTP à cette fin). Il existe une grande quantité de programmes de ce genre comme [Cyberduck](https://cyberduck.io/), [Fetch](http://fetchsoftworks.com/) et [FileZilla](https://filezilla-project.org/). @@ -35,7 +35,7 @@ Cette liste peut paraître effrayante, mais heureusement vous pouvez vous lancer ### Installer un éditeur de texte -Vous avez probablement un éditeur de texte basique sur votre ordinateur. Par défaut Windows propose [Notepad](https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29) et[ ](https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29)macOS, [TextEdit](https://fr.wikipedia.org/wiki/TextEdit). Pour les distributions Linux cela varie. Ubuntu propose [gedit](https://fr.wikipedia.org/wiki/Gedit) par défaut. +Vous avez probablement un éditeur de texte basique sur votre ordinateur. Par défaut Windows propose [Notepad](https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29) et macOS, [TextEdit](https://fr.wikipedia.org/wiki/TextEdit). Pour les distributions Linux cela varie. Ubuntu propose [gedit](https://fr.wikipedia.org/wiki/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](https://code.visualstudio.com/),  qui est un éditeur libre offrant des aperçus en direct et des conseils de code. diff --git a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md index c1cde8396b..c921163441 100644 --- a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md +++ b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md @@ -111,7 +111,7 @@ let myVariable = 'Bob'; myVariable = 'Étienne'; ``` -Notez que les variables peuvent contenir des[ types différents de données](/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives) : +Notez que les variables peuvent contenir des [types différents de données](/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives) :
@@ -392,7 +392,7 @@ Dans cette section, nous allons incorporer une autre image au site en utilisant 5. Sauvegardez tous les fichiers puis chargez `index.html` dans le navigateur. Maintenant, si vous cliquez sur l'image, elle doit changer pour l'autre ! -Dans cet exemple, nous utilisons une référence vers l'élement {{htmlelement("img")}} grâce à la variable `myImage`. Ensuite, nous égalons la propriété du gestionnaire d'événement `onclick `de cette variable à une fonction sans nom (une fonction anonyme). Maintenant chaque fois que cet élément est cliqué : +Dans cet exemple, nous utilisons une référence vers l'élement {{htmlelement("img")}} grâce à la variable `myImage`. Ensuite, nous égalons la propriété du gestionnaire d'événement `onclick` de cette variable à une fonction sans nom (une fonction anonyme). Maintenant chaque fois que cet élément est cliqué : 1. nous récupèrons la valeur de l'attribut `src` de l'image. 2. nous utilisons une structure conditionnelle pour voir si la valeur de `src` est égale au chemin de l'image originale : diff --git a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md index d238ffeb25..3e684306e0 100644 --- a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md +++ b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md @@ -87,7 +87,7 @@ Pour en savoir plus, voyez [GitHub Pages Help](https://docs.github.com/en/github - [Qu'est-ce qu'un serveur web](/fr/docs/Learn/Common_questions/What_is_a_web_server) - [Comprendre les noms de domaine](/fr/docs/Learn/Common_questions/What_is_a_domain_name) - [Combien ça coûte de faire quelque chose sur le Web ?](/fr/docs/Learn/Common_questions/How_much_does_it_cost) -- [Deploy a Website ](https://www.codecademy.com/learn/deploy-a-website): un bon tutoriel de Codecademy qui va plus un peu plus loin et qui montre quelques techniques supplémentaires. +- [Deploy a Website](https://www.codecademy.com/learn/deploy-a-website) : un bon tutoriel de Codecademy qui va plus un peu plus loin et qui montre quelques techniques supplémentaires. - [Hébergement de sites web statiques gratuit ou peu cher](http://alignedleft.com/resources/cheap-web-hosting), un billet en anglais par Scott Murray qui permet d'avoir une meilleure idée des services disponibles. {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}} diff --git a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md index 68bdbac865..82dda020c3 100644 --- a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md +++ b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md @@ -22,7 +22,7 @@ Téléchargez le html d'abords, puis le CSS et le JavaScript nécessaires à son ### Réduisez le nombre de fichiers -Réduire le nombre de fichiers référencés dans une page web diminue le nombre de connexions [HTTP ](/en/HTTP "https://developer.mozilla.org/en/HTTP")nécessaire pour télécharger une page. +Réduire le nombre de fichiers référencés dans une page web diminue le nombre de connexions [HTTP](/en/HTTP "https://developer.mozilla.org/en/HTTP") nécessaire pour télécharger une page. - Utilisez le moins d'images possible sur votre site (et de gif animés ofc). Preferez des [boutons graphiques en CSS](http://css-tricks.com/examples/ButtonMaker/). - Compressez vos images (éviter les .png). Vous pouvez pour cela utiliser [Gimp](http://www.gimp.org/) ou [Imagemagik](http://www.imagemagick.org/script/index.php). diff --git a/files/fr/learn/html/howto/use_data_attributes/index.md b/files/fr/learn/html/howto/use_data_attributes/index.md index e4658b76de..4e494f5e2d 100644 --- a/files/fr/learn/html/howto/use_data_attributes/index.md +++ b/files/fr/learn/html/howto/use_data_attributes/index.md @@ -63,7 +63,7 @@ article[data-columns='4'] { } ``` -Tout cela est visible dans l'exemple[ JSBin](https://jsbin.com/ujiday/2/edit). +Tout cela est visible dans l'exemple [JSBin](https://jsbin.com/ujiday/2/edit). Les attributs data peuvent aussi être stockés pour inclure des informations qui changent constamment, telles que les cores dans un jeu. L'utilisation des sélecteurs CSS et de l'accès par le JavaScript permettent ici de créer des effets sympas sans avoir à écrire vos propres routines d'affichage. Regardez cet exemple de [capture vidéo d'écran](https://www.youtube.com/watch?v=On_WyUB1gOk) où sont utilisés les contenus générés et les transitions CSS ([exemple JSBin](https://jsbin.com/atawaz/3/edit)). diff --git a/files/fr/learn/html/index.md b/files/fr/learn/html/index.md index 9cb2a9e77e..fc00b9925e 100644 --- a/files/fr/learn/html/index.md +++ b/files/fr/learn/html/index.md @@ -20,7 +20,7 @@ original_slug: Apprendre/HTML L'idéal serait que vous débutiez votre parcours d'apprentissage par l'étude du HTML. Commencez par lire [Introduction au HTML](/fr/docs/Web/Guide/HTML/Introduction). Vous pouvez ensuite passer à l'étude de sujets plus avancés comme : - les [CSS](/fr/docs/Learn/CSS), et comment les utiliser pour donner un style au HTML (par exemple, modifier la taille du texte et les polices utilisées, ajouter des bordures et des ombres portées, mettre en page avec plusieurs colonnes, ajouter des animations et autres effets visuels). -- le[ JavaScript](/fr/docs/Learn/JavaScript), et comment l'utiliser pour ajouter des fonctionnalités dynamiques aux pages Web (par exemple, trouver votre emplacement et le tracer sur une carte, faire apparaître/disparaître des éléments d'interface utilisateur lorsque vous basculez un bouton, enregistrer les données des utilisateurs localement sur leurs ordinateurs, et bien plus encore). +- le [JavaScript](/fr/docs/Learn/JavaScript), et comment l'utiliser pour ajouter des fonctionnalités dynamiques aux pages Web (par exemple, trouver votre emplacement et le tracer sur une carte, faire apparaître/disparaître des éléments d'interface utilisateur lorsque vous basculez un bouton, enregistrer les données des utilisateurs localement sur leurs ordinateurs, et bien plus encore). Avant de commencer ce sujet, vous devriez avoir au moins une connaissance de base de l'utilisation des ordinateurs et de l'utilisation passive du Web (c'est-à-dire juste le regarder, de consommer le contenu). Vous devriez avoir un environnement de travail de base tel que précisé dans [Installer les outils de base](/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software), et comprendre comment créer et gérer les fichiers,comme détaillé dans [Gérer les fichiers](/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files) — ces deux articles font partie de notre module [Commencer avec le Web](/fr/docs/Learn/Getting_started_with_the_web) dédié aux débutants. diff --git a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md index 4640bbfe99..7882566979 100644 --- a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md +++ b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md @@ -17,7 +17,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting --- {{LearnSidebar}}{{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](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). 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](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). 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.
diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md index 0ec412de20..7883e57b89 100644 --- a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md +++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md @@ -100,7 +100,7 @@ C'est l'heure de l'apprentissage actif : veuillez créer un document HTML avec u ### Liens de niveau bloc -Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des [éléments bloc ](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#éléments_bloc_ou_en_ligne). Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises ``. +Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des [éléments bloc](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#éléments_bloc_ou_en_ligne). Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises ``. ```html @@ -201,7 +201,7 @@ Regardons un exemple particulier :

``` -**Mauvais** texte de lien : [Cliquer ici ](https://firefox.com/)pour télécharger Firefox +**Mauvais** texte de lien : [Cliquer ici](https://firefox.com/) pour télécharger Firefox ```html

diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/index.md b/files/fr/learn/html/introduction_to_html/debugging_html/index.md index 499393a774..f30e1ee88b 100644 --- a/files/fr/learn/html/introduction_to_html/debugging_html/index.md +++ b/files/fr/learn/html/introduction_to_html/debugging_html/index.md @@ -74,7 +74,7 @@ HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de ma Voici le moment venu d'étudier le caractère permissif du code HTML. -1. Primo, télécharchez notre démo [debug-example ](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html)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é**). +1. Primo, télécharchez notre démo [debug-example](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html) 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. 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. ](fr-html-errone.png) 3. 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é) : diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md index d320dd8741..47adb3bded 100644 --- a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md +++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md @@ -78,7 +78,7 @@ L'exemple simple affiché ci-dessus n'est pas très beau, mais il est parfaiteme 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](http://www.color-blindness.com/2006/04/28/colorblind-population/) 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](https://fr.wikipedia.org/wiki/D%C3%A9ficience_visuelle) dans le monde, alors que la population totale était [d'environ 7 milliards ](https://fr.wikipedia.org/wiki/Population_mondiale)d'habitants). +> **Note :** Les daltoniens représentent environ [8% de la population mondiale](http://www.color-blindness.com/2006/04/28/colorblind-population/) 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](https://fr.wikipedia.org/wiki/D%C3%A9ficience_visuelle) dans le monde, alors que la population totale était [d'environ 7 milliards](https://fr.wikipedia.org/wiki/Population_mondiale) 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](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure). @@ -281,7 +281,7 @@ Vous devriez avoir maintenant une meilleure idée de la façon de structurer une ## Voir aussi -- [Using HTML sections and outlines ](/fr/docs/Web/HTML/Element/Heading_Elements): Guide avancé des éléments de la sémantique et des algorithmes descriptifs du HTML5. +- [Using HTML sections and outlines](/fr/docs/Web/HTML/Element/Heading_Elements) : Guide avancé des éléments de la sémantique et des algorithmes descriptifs du HTML5. {{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/index.md b/files/fr/learn/html/introduction_to_html/index.md index e8f5daa255..dc05434973 100644 --- a/files/fr/learn/html/introduction_to_html/index.md +++ b/files/fr/learn/html/introduction_to_html/index.md @@ -37,7 +37,7 @@ Ce module contient les articles suivants vous permettant de parcourir toute la t - [Créer des hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) - : Les hyperliens sont vraiment importants — ce sont eux qui tissent la toile du Web. Cet article montre la syntaxe requise pour faire un lien et expose les meilleures pratiques concernant les liens. - [La mise en forme avancée du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) - - : 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](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). Les éléments abordés ici sont moins connus mais tout aussi utiles. 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](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). Les éléments abordés ici sont moins connus mais tout aussi utiles. 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. - [La structure d'un document et d'un site web](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) - : 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. - [Déboguer du code HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) diff --git a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md index ef0939e769..ab1dce1e31 100644 --- a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md @@ -92,7 +92,7 @@ Le code au-dessus vous donnera, à peu prés, le résultat suivant : > **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](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) (regardez aussi le  [code source ](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html).) +> **Note :** Vous trouverez les exemples finis de cette section sur [Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) (regardez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html).) ### Texte alternatif @@ -120,7 +120,7 @@ Que devriez-vous noter dans vos attributs `alt` ? En premier lieu, cela dépend - **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 ](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#bplien). Dans de tels cas, vous pouvez, soit l'inclure dans le même élément ``, soit dans l'attribut `alt` de l'image – utilisez ce qui marche le mieux dans votre cas. +- **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](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#bplien). Dans de tels cas, vous pouvez, soit l'inclure dans le même élément ``, 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](/fr/docs/Web/CSS/text-shadow)  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. @@ -151,7 +151,7 @@ De toutes manières, vous ne devez pas altérer la taille de vos images avec les ### Titre d'images -Comme décrit dans le chapitre  [Création d'hyperliens ](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks), 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](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks), 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 : ```html à \