From 22b97f7dbf9a84111828b539342454e4dcf3032f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Wed, 22 Sep 2021 13:42:59 +0200 Subject: Basic linting (flaw fixing, link updates, gremlins removal) for HTML Intro in LA (#2337) --- .../debugging_html/fr-erreur.png | Bin 0 -> 27411 bytes .../debugging_html/fr-html-errone.png | Bin 0 -> 39401 bytes .../debugging_html/fr-inspecteur.png | Bin 0 -> 80064 bytes .../debugging_html/fr-liste-erreur.png | Bin 0 -> 39761 bytes .../introduction_to_html/debugging_html/fr-w3c.png | Bin 0 -> 65316 bytes .../introduction_to_html/debugging_html/index.html | 36 ++++++++++----------- 6 files changed, 18 insertions(+), 18 deletions(-) create mode 100644 files/fr/learn/html/introduction_to_html/debugging_html/fr-erreur.png create mode 100644 files/fr/learn/html/introduction_to_html/debugging_html/fr-html-errone.png create mode 100644 files/fr/learn/html/introduction_to_html/debugging_html/fr-inspecteur.png create mode 100644 files/fr/learn/html/introduction_to_html/debugging_html/fr-liste-erreur.png create mode 100644 files/fr/learn/html/introduction_to_html/debugging_html/fr-w3c.png (limited to 'files/fr/learn/html/introduction_to_html/debugging_html') diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/fr-erreur.png b/files/fr/learn/html/introduction_to_html/debugging_html/fr-erreur.png new file mode 100644 index 0000000000..ab7047f328 Binary files /dev/null and b/files/fr/learn/html/introduction_to_html/debugging_html/fr-erreur.png differ diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/fr-html-errone.png b/files/fr/learn/html/introduction_to_html/debugging_html/fr-html-errone.png new file mode 100644 index 0000000000..737073a12a Binary files /dev/null and b/files/fr/learn/html/introduction_to_html/debugging_html/fr-html-errone.png differ diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/fr-inspecteur.png b/files/fr/learn/html/introduction_to_html/debugging_html/fr-inspecteur.png new file mode 100644 index 0000000000..df86857d91 Binary files /dev/null and b/files/fr/learn/html/introduction_to_html/debugging_html/fr-inspecteur.png differ diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/fr-liste-erreur.png b/files/fr/learn/html/introduction_to_html/debugging_html/fr-liste-erreur.png new file mode 100644 index 0000000000..9761aae712 Binary files /dev/null and b/files/fr/learn/html/introduction_to_html/debugging_html/fr-liste-erreur.png differ diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/fr-w3c.png b/files/fr/learn/html/introduction_to_html/debugging_html/fr-w3c.png new file mode 100644 index 0000000000..251c80b696 Binary files /dev/null and b/files/fr/learn/html/introduction_to_html/debugging_html/fr-w3c.png differ 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 870342584b..34d758d938 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 @@ -23,7 +23,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML Prérequis : - Être familiarisé avec les bases du HTML, traitées aux pages Commencer avec le HTML,  Fondamentaux du texte HTML et Création d'hyperliens. + Être familiarisé avec les bases du HTML, traitées aux pages Commencer avec le HTML, Fondamentaux du texte HTML et Création d'hyperliens. Objectif : @@ -36,9 +36,9 @@ 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.

+

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.

HTML et le débogage

@@ -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. 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>
 
@@ -91,7 +91,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML
           lien à la page d'accueil de Mozilla</a>
     </ul>
    5. -
  5. Revoyons  les problèmes : +
  6. Revoyons les problèmes :
    • Les élements {{htmlelement("p")}} (paragraphe) et {{htmlelement("li")}} (élément de liste) n'ont pas de balise de fermeture. En voyant l'image ci‑dessus, cela ne semble pas avoir trop sévèrement affecté le rendu, car on voit bien où un élément se termine et où le suivant commence.
    • Le premier élément {{htmlelement("strong")}} n'a pas de balise de fermeture. C'est un peu plus problématique, car il n'est pas possible de dire où l'élément est supposé se terminer. En fait, tout le reste du texte est en gras.
      • @@ -100,7 +100,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML
  7. 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.
    8. -
  8. 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.
    9. +
  9. 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.
  10. 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,7 +127,7 @@ 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).

      @@ -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

      @@ -152,7 +152,7 @@ en HTML. Voici un exemple :</strong>
      • « End tag li implied, but there were open elements » (2 instances) : ces messages indiquent qu'un élément ouvert devrait être fermé. La balise de fermeture est implicite, mais pas réellement mise. L'information ligne/colonne pointe sur la première ligne après laquelle la balise de fermeture devrait réellement se situer, mais c'est un bon indice pour voir ce qui ne va pas.
        • -
      • « Unclosed element strong » : C'est facile à comprendre — un élément  {{htmlelement("strong")}} n'est pas fermé ; l'information ligne/colonne pointe directement dessus.
        • +
      • « Unclosed element strong » : C'est facile à comprendre — un élément {{htmlelement("strong")}} n'est pas fermé ; l'information ligne/colonne pointe directement dessus.
      • « End tag strong violates nesting rules » : signale des éléments incorrectement imbriqués et l'information ligne/colonne signale là où cela se trouve.
      • « End of file reached when inside an attribute value. Ignoring tag » : c'est peu clair ; la remarque se rapporte au fait qu'il y a une valeur d'attribut improprement formée quelque part, peut-être près de la fin du fichier car la fin du fichier apparaît dans la valeur de l'attribut. Le fait que le navigateur ne rende pas le lien est un bon indice pour dire que cet élément est en faute.
      • « End of file seen and there were open elements » : c'est un peu ambigu, mais se réfère au fait qu'à la base des éléments ouverts n'ont pas été proprement fermés. Les numéros de ligne pointent sur les dernières lignes du fichier et ce message d'erreur vient avec une ligne de code qui désigne un exemple d'élément ouvert : @@ -169,7 +169,7 @@ en HTML. Voici un exemple :</strong>

        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é

        @@ -182,13 +182,13 @@ en HTML. Voici un exemple :</strong>

        Dans ce module

        -- cgit v1.2.3-54-g00ecf