diff options
Diffstat (limited to 'files/fr/learn/html/introduction_to_html')
7 files changed, 108 insertions, 108 deletions
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 7882566979..ea26226dfd 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 @@ -57,7 +57,7 @@ Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser [ aparté Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte. -Les listes descriptives utilisent une enveloppe de balisage différente de celle des autres types de listes — {{htmlelement("dl")}} ; chaque terme est en plus entouré d'un élément {{htmlelement("dt")}} (**d**escription **t**erm) et chaque description d'un élément {{htmlelement("dd")}} (**d**escription **d**efinition). Terminons en balisant l'exemple ci‑dessus : +Les listes descriptives utilisent une enveloppe de balisage différente de celle des autres types de listes — {{htmlelement("dl")}} ; chaque terme est en plus entouré d'un élément {{htmlelement("dt")}} (**d**escription **t**erm) et chaque description d'un élément {{htmlelement("dd")}} (**d**escription **d**efinition). Terminons en balisant l'exemple ci‑dessus : ```html <dl> @@ -229,7 +229,7 @@ Le HTML possède également des fonctionnalités pour marquer les citations. Le ### Blocs de citation -Si une section ou un contenu de niveau bloc (que ce soit un paragraphe, de multiples paragraphes, une liste, etc.) est cité depuis une autre origine, vous pouvez le signaler en le mettant dans un élément {{htmlelement("blockquote")}} et en incluant une URL qui pointe vers la source de la citation dans un attribut {{htmlattrxref("cite","blockquote")}}. Par exemple, le balisage suivant provient de la page MDN pour l'élément `<blockquote>` : +Si une section ou un contenu de niveau bloc (que ce soit un paragraphe, de multiples paragraphes, une liste, etc.) est cité depuis une autre origine, vous pouvez le signaler en le mettant dans un élément {{htmlelement("blockquote")}} et en incluant une URL qui pointe vers la source de la citation dans un attribut {{htmlattrxref("cite","blockquote")}}. Par exemple, le balisage suivant provient de la page MDN pour l'élément `<blockquote>` : ```html <p>L'<strong>Élément HTML <code><blockquote></code></strong> (ou <em>Élément HTML bloc @@ -247,7 +247,7 @@ Pour le changer en bloc de citation, on ferait simplement ceci : </blockquote> ``` -Le navigateur l'affichera par défaut sous forme d'un paragraphe indenté, avec l'indication qu'il s'agit d'une citation ; MDN agit de même et y ajoute un style personnalisé : +Le navigateur l'affichera par défaut sous forme d'un paragraphe indenté, avec l'indication qu'il s'agit d'une citation ; MDN agit de même et y ajoute un style personnalisé : {{EmbedLiveSample("Blocs_de_citation")}} @@ -262,7 +262,7 @@ Les citations en ligne fonctionnent exactement de la même manière, sauf que l' pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p> ``` -Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci : +Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci : {{EmbedLiveSample("Exemple_de_citation_en_ligne")}} @@ -286,18 +286,18 @@ Le contenu de l'attribut {{htmlattrxref("cite","blockquote")}} semble utile, mal Les citations sont affichées avec un police italique par défaut. Vous pouvez voir l'affichage de ce code dans l'exemple [quotations.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html). -### Apprentissage actif : Qui a dit quoi ? +### Apprentissage actif : Qui a dit quoi ? -Il est temps de faire un autre apprentissage actif ! Dans cet exemple, nous souhaiterions que : +Il est temps de faire un autre apprentissage actif ! Dans cet exemple, nous souhaiterions que : 1. vous marquiez le paragraphe central comme étant une citation comprenant un attribut `cite`. 2. une partie du troisième paragraphe soit balisée en tant que citation en ligne, comprenant aussi un attribut `cite`. 3. vous incorporiez un élément `<cite>` pour chaque citation -L'origine des citations dont vous aurez besoin se trouvent aux pages : +L'origine des citations dont vous aurez besoin se trouvent aux pages : - http\://www\.brainyquote.com/quotes/authors/c/confucius.html pour la citation de Confucius, -- http\://www\.affirmationsforpositivethinking.com/index.html pour « The Need To Eliminate Negative Self Talk » (_De la nécessité d'éliminer un discours négatif sur soi‑même_). +- http\://www\.affirmationsforpositivethinking.com/index.html pour « The Need To Eliminate Negative Self Talk » (_De la nécessité d'éliminer un discours négatif sur soi‑même_). Si vous faites une erreur, vous pourrez toujours tout réinitialiser en pressant le bouton de même nom. Si vous êtes vraiment bloqué, pressez le bouton _Voir la solution_ pour obtenir la réponse. @@ -311,9 +311,9 @@ Si vous faites une erreur, vous pourrez toujours tout réinitialiser en pressant <p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> <textarea id="code" class="input" style="min-height: 150px; width: 95%"> -<p>Salut et bienvenue sur ma page de motivation. Comme Confucius a dit en son temps :</p> +<p>Salut et bienvenue sur ma page de motivation. Comme Confucius a dit en son temps :</p> <p>La lenteur avec laquelle vous allez n'a pas d'importance tant que vous ne vous arrêtez pas.</p> -<p>J'aime aussi ce concept de pensée positive « Il est nécessaire d'éliminer le discours négatif sur soi-même » (comme dit dans « Affirmations for Positive Thinking ».)</p> +<p>J'aime aussi ce concept de pensée positive « Il est nécessaire d'éliminer le discours négatif sur soi-même » (comme dit dans « Affirmations for Positive Thinking ».)</p> </textarea> <div class="playable-buttons"> @@ -375,7 +375,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<p>Salut et bienvenue sur ma page de motivation. Comme <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> a dit en son temps :</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>La lenteur avec laquelle vous allez n\'a pas d\'importance tant que vous ne vous arrêtez pas.</p>\n</blockquote>\n\n<p>J\'aime aussi le concept de pensée positive <q cite="http://www.affirmationsforpositivethinking.com/index.htm"> Il est nécessaire d\'éliminer le discours négatif sur soi-même </q> (comme dit dans <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>'; +var htmlSolution = '<p>Salut et bienvenue sur ma page de motivation. Comme <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> a dit en son temps :</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>La lenteur avec laquelle vous allez n\'a pas d\'importance tant que vous ne vous arrêtez pas.</p>\n</blockquote>\n\n<p>J\'aime aussi le concept de pensée positive <q cite="http://www.affirmationsforpositivethinking.com/index.htm"> Il est nécessaire d\'éliminer le discours négatif sur soi-même </q> (comme dit dans <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -442,7 +442,7 @@ Je pense que le R. Green l'a fait dans la cuisine avec une tronçonneuse. > **Note :** Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que `<abbr>`, destiné spécifiquement aux acronymes plutôt qu'aux abréviations. Il est cependant tombé en désuétude — il n'était pas aussi bien pris en charge dans les navigateurs que \<abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser \<abbr> à la place. -### Apprentissage actif : marquer une abréviation +### Apprentissage actif : marquer une abréviation Pour cet apprentissage actif, nous aimerions que vous balisiez simplement une abréviation. Vous pouvez utiliser notre élément ci-après ou le remplacer par un de votre cru. @@ -579,7 +579,7 @@ HTML possède l'élément {{htmlelement("address")}} pour baliser des détails d </address> ``` -Une chose à retenir cependant : l'élément {{htmlelement("address")}} est destiné à marquer les coordonnées de la personne ayant écrit le document HTML et non pas _n'importe quelle_ adresse. Donc, ce qui précède ne serait acceptable que si Chris avait écrit le document sur lequel ce balisage apparaît. Notez que serait également acceptable ce qui suit : +Une chose à retenir cependant : l'élément {{htmlelement("address")}} est destiné à marquer les coordonnées de la personne ayant écrit le document HTML et non pas _n'importe quelle_ adresse. Donc, ce qui précède ne serait acceptable que si Chris avait écrit le document sur lequel ce balisage apparaît. Notez que serait également acceptable ce qui suit : ```html <address> @@ -597,7 +597,7 @@ Vous devrez parfois utiliser exposants et indices pour marquer des éléments co <p>Si x<sup>2</sup> égale 9, x doit valoir 3 ou -3.</p> ``` -Les sorties produites par ces lignes de code se présentent comme suit : +Les sorties produites par ces lignes de code se présentent comme suit : Ma date de naissance est le 1<sup>er</sup> mai 2001. @@ -607,15 +607,15 @@ Si x^2 égale 9, x doit valoir 3 ou -3. ## Représentation du code informatique -HTML met à votre dispositon un certain nombre d'éléments pour marquer du code informatique : +HTML met à votre dispositon un certain nombre d'éléments pour marquer du code informatique : -- {{htmlelement("code")}} : pour marquer des parties génériques de code. -- {{htmlelement("pre")}} : pour conserver les blancs (généralement dans les blocs de code) — si vous indentez ou mettez des blancs en excès dans votre texte, les navigateurs les ignoreront et vous ne les verrez plus dans le rendu de la page. Par contre si vous enveloppez le texte dans des balises \<pre>\</pre>, les blancs seront rendus tels qu'il se présentent dans votre éditeur de texte. -- {{htmlelement("var")}} : pour marquer spécifiquement les noms de variables. -- {{htmlelement("kbd")}} : pour marquer les touches de clavier (et autres types d'entrées) à presser sur l'ordinateur. -- {{htmlelement("samp")}} : pour marquer une sortie de programme. +- {{htmlelement("code")}} : pour marquer des parties génériques de code. +- {{htmlelement("pre")}} : pour conserver les blancs (généralement dans les blocs de code) — si vous indentez ou mettez des blancs en excès dans votre texte, les navigateurs les ignoreront et vous ne les verrez plus dans le rendu de la page. Par contre si vous enveloppez le texte dans des balises \<pre>\</pre>, les blancs seront rendus tels qu'il se présentent dans votre éditeur de texte. +- {{htmlelement("var")}} : pour marquer spécifiquement les noms de variables. +- {{htmlelement("kbd")}} : pour marquer les touches de clavier (et autres types d'entrées) à presser sur l'ordinateur. +- {{htmlelement("samp")}} : pour marquer une sortie de programme. -Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple [other-semantics.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html)) : +Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple [other-semantics.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html)) : ```html <pre><code>var para = document.querySelector('p'); @@ -636,7 +636,7 @@ para.onclick = function() { 64 bytes from mozilla.org (63.245.208.195): icmp_seq=1 ttl=46 time=191 ms</samp></pre> ``` -Ce code se présente ainsi : +Ce code se présente ainsi : {{ EmbedLiveSample('Représentation_du_code_informatique','100%',300) }} @@ -673,7 +673,7 @@ L'exemple de base ci-dessus ne fournit qu'une simple date lisible par machine, m <time datetime="01-20">20 janvier</time> <!-- Juste l'heure, heure et minutes --> <time datetime="19:30">19h30</time> -<!-- Vous pouvez aussi mettre les secondes et les millisecondes ! --> +<!-- Vous pouvez aussi mettre les secondes et les millisecondes ! --> <time datetime="19:30:01.856">19h30m1,856s</time> <!-- Date et heure --> <time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time> 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 7883e57b89..fdc4ee1fad 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 @@ -215,7 +215,7 @@ Autres conseils : - Ne répétez pas l'URL dans le texte du lien — les URL sont moches, et elles le sont encore plus à entendre quand un lecteur d'écran les épèle. - Ne dites pas « lien » ou « liens vers... » dans le texte du lien, ce n'est que du rabâchage. Les lecteurs d'écran indiquent aux gens qu'il y a un lien. Les utilisateurs visuels verront aussi qu'il y a un lien, du fait que les liens sont généralement de couleur différente et soulignés (de façon générale, cette convention tacite ne devrait pas être trahie, car les utilisateurs y sont très habitués). - Faites que vos étiquettes de lien soient aussi courtes que possible : les liens longs agacent particulièrement les utilisateurs de lecteurs d'écran, qui doivent en écouter la lecture entière. -- Minimiser les cas où plusieurs copies d'un même texte pointent vers des emplacements différents. Afficher une liste de liens hors contexte peut poser problème aux utilisateurs de lecteurs d'écran : ainsi plusieurs liens tous étiquetés « cliquez ici », « cliquez ici », « cliquez ici » seront source de confusion. +- Minimiser les cas où plusieurs copies d'un même texte pointent vers des emplacements différents. Afficher une liste de liens hors contexte peut poser problème aux utilisateurs de lecteurs d'écran : ainsi plusieurs liens tous étiquetés « cliquez ici », « cliquez ici », « cliquez ici » seront source de confusion. ### Utilisez des liens relatifs partout où c'est possible 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 f30e1ee88b..21ba749a22 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 @@ -20,7 +20,7 @@ original_slug: Apprendre/HTML/Introduction_à _HTML/Debugging_HTML <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Être familiarisé avec les bases du HTML, traitées aux pages <a @@ -38,7 +38,7 @@ original_slug: Apprendre/HTML/Introduction_à _HTML/Debugging_HTML </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Apprendre les bases de l'utilisation des outils de débogage pour détecter des problèmes en HTML. @@ -51,32 +51,32 @@ 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. -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. +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. ## HTML et le débogage -HTML n'est pas aussi compliqué à comprendre que le Rust. HTML n'est pas compilé sous une forme différente avant que le navigateur n'ait fait son analyse et affiche le résultat (il est _interprété_, pas _compilé_). Et la syntaxe des {{glossary("element","éléments")}} HTML est sans doute beaucoup plus facile à comprendre qu'un « vrai langage de programmation » tel le Rust, le {{glossary("JavaScript")}} ou le {{glossary("Python")}}. La façon dont les navigateurs analysent le HTML est beaucoup plus **permissive** que celle des langages de programmation, ce qui est à la fois une bonne et une mauvaise chose. +HTML n'est pas aussi compliqué à comprendre que le Rust. HTML n'est pas compilé sous une forme différente avant que le navigateur n'ait fait son analyse et affiche le résultat (il est _interprété_, pas _compilé_). Et la syntaxe des {{glossary("element","éléments")}} HTML est sans doute beaucoup plus facile à comprendre qu'un « vrai langage de programmation » tel le Rust, le {{glossary("JavaScript")}} ou le {{glossary("Python")}}. La façon dont les navigateurs analysent le HTML est beaucoup plus **permissive** que celle des langages de programmation, ce qui est à la fois une bonne et une mauvaise chose. ### Code permissif -Que voulons‑nous dire par permissif ? Et bien, quand vous faites une erreur dans du code, vous rencontrerez deux types principaux d'erreurs : +Que voulons‑nous dire par permissif ? Et bien, quand vous faites une erreur dans du code, vous rencontrerez deux types principaux d'erreurs : -- **Erreurs de syntaxe** : ce sont des « fautes d'orthographe » dans le code qui font que le programme ne fonctionne vraiment pas, comme l'erreur du Rust ci‑dessus. Elles sont généralement faciles à corriger pour autant que vous soyez à l'aise avec la syntaxe du langage et que vous sachiez ce que signifie le message d'erreur. -- **Erreurs de logique** : ce sont des erreurs dans lesquelles la syntaxe est réellement correcte, mais pour lesquelles le code ne correspond pas à vos souhaits, ce qui veut dire que le programme ne s'exécute pas correctement. Elles sont généralement plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas de message d'erreur pour vous guider à la source de l'erreur. +- **Erreurs de syntaxe** : ce sont des « fautes d'orthographe » dans le code qui font que le programme ne fonctionne vraiment pas, comme l'erreur du Rust ci‑dessus. Elles sont généralement faciles à corriger pour autant que vous soyez à l'aise avec la syntaxe du langage et que vous sachiez ce que signifie le message d'erreur. +- **Erreurs de logique** : ce sont des erreurs dans lesquelles la syntaxe est réellement correcte, mais pour lesquelles le code ne correspond pas à vos souhaits, ce qui veut dire que le programme ne s'exécute pas correctement. Elles sont généralement plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas de message d'erreur pour vous guider à la source de l'erreur. -HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de manière permissive : la page s'affiche toujours même s'il y a des erreurs de syntaxe. Les navigateurs intègrent des règles indiquant comment interpréter un balisage incorrectement écrit, de sorte que vous obtiendrez toujours quelque chose à l'exécution, même si ce n'est pas ce que vous attendiez. Mais cela reste, bien sûr, toujours un problème ! +HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de manière permissive : la page s'affiche toujours même s'il y a des erreurs de syntaxe. Les navigateurs intègrent des règles indiquant comment interpréter un balisage incorrectement écrit, de sorte que vous obtiendrez toujours quelque chose à l'exécution, même si ce n'est pas ce que vous attendiez. Mais cela reste, bien sûr, toujours un problème ! > **Note :** HTML est analysé de façon permissive parce que, lorsque le Web a été créé pour la première fois, on a décidé qu'il était plus important de permettre aux gens de publier leur contenu que de s'assurer d'une syntaxe absolument correcte. Le web ne serait probablement pas aussi populaire qu'il l'est aujourd'hui, s'il avait été plus strict dans ses débuts. -### Apprentissage actif : étude avec un code permissif +### Apprentissage actif : étude avec un code permissif 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é**). -2. Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci : -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é) : +2. Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci : +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é) : <h1>Exemple de HTML à déboguer</h1> @@ -98,34 +98,34 @@ Voici le moment venu d'étudier le caractère permissif du code HTML. lien à la page d'accueil de Mozilla</a> </ul> -4. Revoyons les problèmes : +4. 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. - - Cette partie est mal imbriquée : `<strong>caractères gras <em>ou gras et italiques ?</strong> qu'est ce ?</em>`. Pas facile de dire comment il faut interpréter cela en raison du problème précédent. + - Cette partie est mal imbriquée : `<strong>caractères gras <em>ou gras et italiques ?</strong> qu'est ce ?</em>`. Pas facile de dire comment il faut interpréter cela en raison du problème précédent. - La valeur de l'attribut {{htmlattrxref("href","a")}} n'a pas de guillemet double fermant. C'est ce qui semble avoir posé le plus gros problème — le lien n'a pas été mentionné du tout. 5. Revoyons maintenant comment le navigateur a vu le balisage, par comparaison au balisage du code source. Pour ce faire, utilisons les outils de développement du navigateur. Si vous n'êtes pas un familier de l'utilisation des outils de développement du navigateur, prenez quelques minutes pour revoir [Découverte des outils de développement du navigateur](/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs). -6. Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble :  -7. 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) : +6. Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble :  +7. 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. - - L'endroit où le premier élément `<strong>` doit être fermé n'est pas clair, donc le navigateur a enveloppé séparément chaque bloc de texte avec ses propres balises `strong`, jusqu'à la fin du document ! - - L'imbrication incorrecte a été corrigée ainsi : + - L'endroit où le premier élément `<strong>` doit être fermé n'est pas clair, donc le navigateur a enveloppé séparément chaque bloc de texte avec ses propres balises `strong`, jusqu'à la fin du document ! + - L'imbrication incorrecte a été corrigée ainsi : ```html <strong>caractères gras - <em>ou caractères gras et italiques ?</em> + <em>ou caractères gras et italiques ?</em> </strong> - <em> qu'est ce ?</em> + <em> qu'est ce ?</em> ``` - - Le lien avec les guillemets manquants a été illico détruit. Le dernier élément `li` ressemble à ceci : + - Le lien avec les guillemets manquants a été illico détruit. Le dernier élément `li` ressemble à ceci : ```html <li> <strong>Attributs non fermés : autre source courante de problèmes - en HTML. Voici un exemple :</strong> + en HTML. Voici un exemple :</strong> </li> ``` @@ -156,17 +156,17 @@ Cela vous donnera une liste d'erreurs et autres informations. Les messages d'erreur sont généralement utiles, mais parfois non ; avec un peu de pratique, vous trouverez comment les interpréter pour corriger votre code. Passons en revue les messages d'erreur et voyons leur signification. Chaque message est accompagné d'un numéro de ligne et de colonne pour faciliter la localisation de l'erreur. -- « 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. -- « 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 : +- « 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. +- « 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 : exemple: <a href="https://www.mozilla.org/>lien à la page d'accueil de Mozilla</a> ↩ </ul>↩ </body>↩</html> > **Note :** un attribut sans guillemet fermant peut entraîner un élément ouvert car le reste du document est interprété comme le contenu de l'attribut. -- « Unclosed element `ul` » : n'est pas vraiment utile, car l'élément {{htmlelement("ul")}} _est_ correctement fermé. Cette erreur ressort car l'élément {{htmlelement("a")}} n'est pas fermé en raison de l'absence de guillemet fermant. +- « Unclosed element `ul` » : n'est pas vraiment utile, car l'élément {{htmlelement("ul")}} _est_ correctement fermé. Cette erreur ressort car l'élément {{htmlelement("a")}} n'est pas fermé en raison de l'absence de guillemet fermant. Si vous ne comprenez pas ce que signifie chaque message d'erreur, ne vous inquiétez pas — une bonne idée consiste à corriger quelques erreurs à la fois. Puis essayez de revalider le HTML pour voir les erreurs restantes. Parfois, la correction d'une erreur en amont permet aussi d'éliminer d'autres messages d'erreur — plusieurs erreurs sont souvent causées par un même problème, avec une sorte d'effet domino. @@ -176,7 +176,7 @@ Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannièr ## Résumé -Voilà donc une introduction au débogage HTML, qui devrait vous donner des compétences utiles sur lesquelles compter lorsque vous commencerez à déboguer des CSS, du JavaScript ou d'autres types de code plus tard dans votre carrière. Ceci marque également la fin des articles d'apprentissage du module Introduction au HTML — maintenant vous pouvez faire un auto‑test avec nos évaluations : le lien ci‑dessous vous dirige sur la première. +Voilà donc une introduction au débogage HTML, qui devrait vous donner des compétences utiles sur lesquelles compter lorsque vous commencerez à déboguer des CSS, du JavaScript ou d'autres types de code plus tard dans votre carrière. Ceci marque également la fin des articles d'apprentissage du module Introduction au HTML — maintenant vous pouvez faire un auto‑test avec nos évaluations : le lien ci‑dessous vous dirige sur la première. {{PreviousMenuNext("Apprendre/HTML/Introduction_à _HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à _HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à _HTML")}} 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 47adb3bded..a58a366f71 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 @@ -22,7 +22,7 @@ De même que HTML est utilisé pour définir les diverses parties indépendantes <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Être familiarisé avec les bases du HTML, traitées à la page <a @@ -41,7 +41,7 @@ De même que HTML est utilisé pour définir les diverses parties indépendantes </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> <p> Apprendre comment structurer votre document en utilisant des balises @@ -59,7 +59,7 @@ Les pages web peuvent sembler assez différentes les unes des autres, mais elles - En‑tête (header) - : Généralement une grande bande placée en travers au haut de la page avec un titre ou un logo. C'est là où les principales informations du site restent d'une page à l'autre. - Barre de navigation - - : Elle fait le lien vers les principales parties du site ; d'habitude, elle est présentée sous forme de boutons de menu, de liens ou d'onglets. Comme l'en‑tête, la barre de navigation reste souvent cohérente d'une page à l'autre — avoir une navigation destructurée ne peut conduire qu'à de la confusion et la frustation pour le lecteur. Beaucoup de créateurs de site considèrent la barre de navigation partie de l'en‑tête et non comme un composant individuel, mais ce n'est pas une exigence. En fait certains soutiennent également que le fait d'avoir les deux séparés est préférable pour l'accessibilité, car les lecteurs d'écran lisent mieux les deux éléments s'ils sont séparés. + - : Elle fait le lien vers les principales parties du site ; d'habitude, elle est présentée sous forme de boutons de menu, de liens ou d'onglets. Comme l'en‑tête, la barre de navigation reste souvent cohérente d'une page à l'autre — avoir une navigation destructurée ne peut conduire qu'à de la confusion et la frustation pour le lecteur. Beaucoup de créateurs de site considèrent la barre de navigation partie de l'en‑tête et non comme un composant individuel, mais ce n'est pas une exigence. En fait certains soutiennent également que le fait d'avoir les deux séparés est préférable pour l'accessibilité, car les lecteurs d'écran lisent mieux les deux éléments s'ils sont séparés. - Contenu principal - : Une grande zone au centre contenant la majeure partie du contenu unique de la dite page web, par ex. la vidéo à regarder, ou le corps de l'article à parcourir, ou la carte à lire, ou les dernières nouvelles etc. C'est la partie du site variable de page en page. - Barre latérale @@ -68,7 +68,7 @@ Les pages web peuvent sembler assez différentes les unes des autres, mais elles - : Une bande au bas de la page qui contient généralement, en petits caractères, des avis de droit d'auteur ou des coordonnées de contact. C'est un endroit pour mettre de l'information commune (comme l'en-tête), mais il s'agit dans ce cas d'informations non‑critiques, voire secondaires par rapport au site Web lui-même. Le pied de page est aussi parfois utilisé à des fins de {{Glossary("SEO")}}, en fournissant des liens pour un accès rapide à des contenus prisés. - Un « site web typique » pourrait ressembler à quelque chose comme ceci : + Un « site web typique » pourrait ressembler à quelque chose comme ceci :  @@ -76,21 +76,21 @@ Les pages web peuvent sembler assez différentes les unes des autres, mais elles L'exemple simple affiché ci-dessus n'est pas très beau, mais il est parfaitement correct pour illustrer un exemple typique de mise en page d'un site web. Certains sites Web ont plus de colonnes, d'autres sont beaucoup plus complexes, mais vous voyez l'idée. Avec le bon CSS, vous pouvez utiliser à peu près n'importe quel élément pour envelopper les différentes sections et obtenir l'apparence que vous voulez, mais comme nous l'avons déjà dit, nous devons respecter la sémantique et **utiliser le bon élément pour le bon travail**. -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 » ? +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). -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). +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). -Pour mettre en œuvre le marquage sémantique, HTML fournit des balises dédiées que vous pourrez utiliser pour représenter ces parties, par exemple : +Pour mettre en œuvre le marquage sémantique, HTML fournit des balises dédiées que vous pourrez utiliser pour représenter ces parties, par exemple : -- **header :** {{htmlelement("header")}}. -- **barre de navigation :** {{htmlelement("nav")}}. -- **contenu principal :** {{htmlelement("main")}}, avec diverses sous‑sections de contenu représentées à l'aide de des éléments {{HTMLElement("article")}}, {{htmlelement("section")}} et {{htmlelement("div")}}. -- **barre latérale :** {{htmlelement("aside")}} ; souvent mise à l'intérieur de l'élément {{htmlelement("main")}}. -- **pied de page :** {{htmlelement("footer")}}. +- **header :** {{htmlelement("header")}}. +- **barre de navigation :** {{htmlelement("nav")}}. +- **contenu principal :** {{htmlelement("main")}}, avec diverses sous‑sections de contenu représentées à l'aide de des éléments {{HTMLElement("article")}}, {{htmlelement("section")}} et {{htmlelement("div")}}. +- **barre latérale :** {{htmlelement("aside")}} ; souvent mise à l'intérieur de l'élément {{htmlelement("main")}}. +- **pied de page :** {{htmlelement("footer")}}. -### Apprentissage actif : exploration du code de l'exemple +### Apprentissage actif : exploration du code de l'exemple Notre exemple affiché plus haut est représenté par le code ci‑après (vous le trouverez également [dans le dépôt Github](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html)). Nous aimerions que vous regardiez cet exemple et que vous recherchiez dans le listing suivant les sections constituant les diverses parties du visuel. @@ -193,7 +193,7 @@ La compréhension détaillée de la signification globale de tous les éléments Parfois, vous êtes dans la situation où vous ne trouvez pas l'élément sémantique idéal pour regrouper certaines entités ou envelopper certains contenus. D'autres fois, vous souhaitez simplement regrouper un ensemble d'éléments pour en faire une entité unique pour des {{glossary("CSS")}} ou des {{glossary("JavaScript")}}. Pour de tels cas, HTML met à votre disposition les éléments {{HTMLElement("div")}} et {{HTMLElement("span")}}}. Utilisez‑les de préférence avec un attribut {{htmlattrxref('class')}} approprié, en quelque sorte étiquetez‑les pour pouvoir les cibler plus facilement. -{{HTMLElement("span")}} est un élément en ligne non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur élément de sémantique textuelle pour envelopper votre contenu, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple : +{{HTMLElement("span")}} est un élément en ligne non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur élément de sémantique textuelle pour envelopper votre contenu, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple : ```html <p>Le Roi retourna ivre à sa chambre à une heure, la bière ne l'aidant en rien @@ -217,7 +217,7 @@ Dans ce cas, la note du rédacteur est simplement supposée fournir une indicati ... </li> </ul> - <p>Total des achats : €237,89</p> + <p>Total des achats : €237,89</p> </div> ``` @@ -227,9 +227,9 @@ Ce n'est pas vraiment un élément `<aside>` et il n'a pas forcément de relatio ### Sauts de ligne et traits horizontaux -Les éléments {{htmlelement("br")}} et {{htmlelement("hr")}} sont utilisés à l'occasion et il convient de les connaître : +Les éléments {{htmlelement("br")}} et {{htmlelement("hr")}} sont utilisés à l'occasion et il convient de les connaître : -`<br>` crée un saut de ligne dans un paragraphe ; c'est le seul moyen de forcer une structure rigide quand vous voulez obtenir une suite de lignes courtes fixes, comme dans une adresse postale ou un poème. Par exemple : +`<br>` crée un saut de ligne dans un paragraphe ; c'est le seul moyen de forcer une structure rigide quand vous voulez obtenir une suite de lignes courtes fixes, comme dans une adresse postale ou un poème. Par exemple : ```html <p>Il y avait une fois une fille nommée Nell<br> @@ -238,14 +238,14 @@ Mais ses structures et sémantiques affligeantes<br> rendaient de ses marquages la lecture inélégante.</p> ``` -Sans éléments `<br>`, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, [HTML ignore la plupart des blancs](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#whitespace_in_html)) ; avec des \<br> dans le code, voici le rendu de ce qui précède : +Sans éléments `<br>`, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, [HTML ignore la plupart des blancs](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#whitespace_in_html)) ; avec des \<br> dans le code, voici le rendu de ce qui précède : Il y avait une fois une fille nommée Nell Qui aimait écrire du HTML Mais ses structures et sémantiques affligeantes rendaient de ses marquages la lecture inélégante. -`Les éléments <hr>` créent un trait horizontal dans le document marquant un changement thématique dans le texte (comme un changement de sujet ou de scène). Visuallement, c'est juste un trait horizontal, comme dans cet exemple : +`Les éléments <hr>` créent un trait horizontal dans le document marquant un changement thématique dans le texte (comme un changement de sujet ou de scène). Visuallement, c'est juste un trait horizontal, comme dans cet exemple : ### Exemple avec hr @@ -255,7 +255,7 @@ rendaient de ses marquages la lecture inélégante. <p>Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.</p> ``` -sera rendu ainsi : +sera rendu ainsi : {{EmbedLiveSample("Exemple_avec_hr")}} @@ -269,7 +269,7 @@ Une fois planifié le contenu d'une simple page Web, l'étape logique suivante e 4. Ensuite, essayez de trier tous ces éléments de contenu par groupes, pour vous donner une idée des parties qui pourraient aller ensemble sur diverses pages. C'est très similaire à une technique appelée {{glossary("Card sorting","Tri de cartes")}}. 5. Essayez maintenant d'esquisser un plan de site grossier — entourez d'un cercle chaque page de votre site et tracez des flèches pour montrer les flux de travail typiques entre pages. La page d'accueil sera probablement au centre et en lien vers la plupart sinon la totalité des autres ; la plupart des pages d'un petit site devraient être disponibles à partir de la navigation principale, bien qu'il y ait des exceptions. Vous voudrez peut-être aussi ajouter des notes sur la présentation des choses.  -### Apprentissage actif : créez la cartographie de votre propre site +### Apprentissage actif : créez la cartographie de votre propre site Essayez d'effectuer l'exercice ci-dessus pour un site web de votre propre création. Sur quel sujet aimeriez-vous faire un site ? diff --git a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md index 215bfa8613..db5e3a2e72 100644 --- a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md +++ b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md @@ -245,9 +245,9 @@ textarea.onkeyup = function(){ ### Pourquoi a-t-on besoin de sémantique ? -La sémantique est utilisée partout autour de nous — on se fie à nos précédentes experiences pour savoir à quoi servent les objets du quotidien; quand on voit quelque chose, on sait à quoi cela sert. Par exemple, on s'attend à ce qu'un feu rouge de signalisation signifie « Stop » et qu'un feu vert signifie « Avancez ». Les choses peuvent vite devenir plus compliquées si de mauvaises sémantiques sont appliquées (existe-t-il un pays dans lequel un feu rouge signifie que l'on peut passer ? Je ne l'espère pas.) +La sémantique est utilisée partout autour de nous — on se fie à nos précédentes experiences pour savoir à quoi servent les objets du quotidien; quand on voit quelque chose, on sait à quoi cela sert. Par exemple, on s'attend à ce qu'un feu rouge de signalisation signifie « Stop » et qu'un feu vert signifie « Avancez ». Les choses peuvent vite devenir plus compliquées si de mauvaises sémantiques sont appliquées (existe-t-il un pays dans lequel un feu rouge signifie que l'on peut passer ? Je ne l'espère pas.) -Dans la même optique, il faut s'assurer que l'on utilise les bons élements et que l'on donne la bonne signification, la bonne fonction et la bonne apparence à notre contenu. Dans ce contexte, l'élément {{htmlelement("h1")}} est aussi un élement sémantique. Il donne au texte auquel il s'applique la fonction (ou la signification) de « titre principal de la page ». +Dans la même optique, il faut s'assurer que l'on utilise les bons élements et que l'on donne la bonne signification, la bonne fonction et la bonne apparence à notre contenu. Dans ce contexte, l'élément {{htmlelement("h1")}} est aussi un élement sémantique. Il donne au texte auquel il s'applique la fonction (ou la signification) de « titre principal de la page ». ```html <h1>Ceci est un titre principal</h1> @@ -265,7 +265,7 @@ C'est un élément {{htmlelement("span")}}. Il n'a pas de valeur sémantique. Il ## Listes -Intéressons-nous maintenant aux listes. Il y a des listes partout dans la vie — de la liste de courses à la liste de directions que vous suivez inconsciemment pour rentrer chez vous tous les jours, sans oublier la liste des instructions que vous suivez dans ce tutoriel ! Les listes sont aussi très répandues sur le Web, nous allons nous intéresser aux trois différents types de liste. +Intéressons-nous maintenant aux listes. Il y a des listes partout dans la vie — de la liste de courses à la liste de directions que vous suivez inconsciemment pour rentrer chez vous tous les jours, sans oublier la liste des instructions que vous suivez dans ce tutoriel ! Les listes sont aussi très répandues sur le Web, nous allons nous intéresser aux trois différents types de liste. ### Listes non-ordonnées @@ -600,7 +600,7 @@ Si vous êtes arrivé jusqu'ici dans l'article, vous avez toutes les connaissanc Ingrédients - 1 boîte (400 g) de pois chiches (garbanzos) + 1 boîte (400 g) de pois chiches (garbanzos) 175g de crème de sésame 6 tomates séchées un demi poivron rouge @@ -620,7 +620,7 @@ Si vous êtes arrivé jusqu'ici dans l'article, vous avez toutes les connaissanc Mettez l'houmous fini au réfrigérateur dans un récipient fermé. Vous le garderez ainsi pendant environ une semaine. S'il se met à fermenter, jettez‑le sans hésiter. - L'houmous peut être congelé ; consommez‑le dans les deux mois qui suivent sa congélation.</textarea> + L'houmous peut être congelé ; consommez‑le dans les deux mois qui suivent sa congélation.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="Réinitialiser"> @@ -749,7 +749,7 @@ Il est parfaitement possible d'imbriquer une liste dans une autre. Il se peut qu </ol> ``` -Comme les deux dernières puces de la liste sont très liées à celle qui les précède (elles semblent être des sous-instructions ou des choix correspondant à cette puce), il peut être judicieux de les regrouper dans une même liste non-ordonnée, et placer cette liste dans le quatrième item. Cela ressemblerait alors à ceci : +Comme les deux dernières puces de la liste sont très liées à celle qui les précède (elles semblent être des sous-instructions ou des choix correspondant à cette puce), il peut être judicieux de les regrouper dans une même liste non-ordonnée, et placer cette liste dans le quatrième item. Cela ressemblerait alors à ceci : ```html <ol> @@ -774,9 +774,9 @@ Dans le langage, nous mettons souvent l'accent sur certains mots pour modifier l Dans le langage parlé, pour accentuer, nous insistons sur certains mots, modifiant subtilement le sens de ce que nous disons. De même, dans le langage écrit, nous avons tendance à mettre un certain accent sur des mots en les écrivant en italique. Par exemple, les deux phrases suivantes ont des significations différentes. -« Je suis content que vous n'ayez pas été en retard. » +« Je suis content que vous n'ayez pas été en retard. » -« Je suis _content_ que vous n'ayez pas été _en retard_. » +« Je suis _content_ que vous n'ayez pas été _en retard_. » La première phrase semble indiquer que le locuteur est vraiment soulagé que la personne n'aie pas été en retard. En revanche, la seconde a une tonalité sarcastique ou passive-agressive, exprimant la gêne que la personne soit arrivée un peu en retard. @@ -799,7 +799,7 @@ En HTML, nous utilisons l'élément {{htmlelement("strong")}} (forte importance) ```html <p>Ce liquide est <strong>hautement toxique</strong>.</p> -<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p> +<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p> ``` Il est possible d'imbriquer `strong` et `em` : @@ -809,7 +809,7 @@ Il est possible d'imbriquer `strong` et `em` : si vous en buvez, <strong>vous pourriez en <em>mourir</em></strong>.</p> ``` -### Apprentissage actif : soulignez l'important +### Apprentissage actif : soulignez l'important Dans ce paragraphe d'apprentissage actif, nous avons donné un exemple modifiable. À l'intérieur, nous aimerions que vous essayiez d'ajouter de l'emphase et de l'importance aux mots quand vous pensez qu'ils en ont besoin, juste pour une bonne pratique. @@ -950,8 +950,8 @@ HTML5 a redéfini `<b>`, `<i>` et `<u>` avec de nouveaux rôles sémantiques que Voici la meilleure règle d'or : il est probablement approprié d'utiliser `<b>`, `<i>`, ou `<u>` pour communiquer le sens traditionnellement associé aux caractères gras, italiques ou soulignés, à condition qu'il n'y ait pas d'élément plus approprié. Toutefois, il demeure toujours essentiel de garder présent à l'esprit le concept d'accessibilité. L'écriture en italique n'est pas très utile aux personnes utilisant des lecteurs d'écran ou un système d'écriture autre que l'alphabet latin. - {{HTMLElement('i')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec l'italique : des mots étrangers, une désignation taxonomique, des termes techniques, une pensée… -- {{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras : des mots‑clés, des noms de produits, une phrase liminaire… -- {{HTMLElement('u')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec le soulignement : noms propres, mauvaise orthographe... +- {{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras : des mots‑clés, des noms de produits, une phrase liminaire… +- {{HTMLElement('u')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec le soulignement : noms propres, mauvaise orthographe... > **Note :** Un petit avertissement à propos du soulignement : **les gens associent fortement soulignement et hyperliens**. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément `<u>` que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait. @@ -987,7 +987,7 @@ Voici la meilleure règle d'or : il est probablement approprié d'utiliser `<b>` ## Résumé -C'est tout pour l'instant ! Cet article doit vous avoir donné une bonne idée de la façon de commencer à baliser le texte en HTML et présenté les éléments les plus importants dans ce domaine. Il existe énormément d'autres éléments sémantiques à connaître dans ce domaine ; nous en verrons beaucoup plus dans notre article « More Semantic Elements », plus loin dans ce cours. Dans le prochain article, nous examinerons en détail comment [créer des hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks), qui est peut-être l'élément le plus important sur le Web. +C'est tout pour l'instant ! Cet article doit vous avoir donné une bonne idée de la façon de commencer à baliser le texte en HTML et présenté les éléments les plus importants dans ce domaine. Il existe énormément d'autres éléments sémantiques à connaître dans ce domaine ; nous en verrons beaucoup plus dans notre article « More Semantic Elements », plus loin dans ce cours. Dans le prochain article, nous examinerons en détail comment [créer des hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks), qui est peut-être l'élément le plus important sur le Web. {{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}} diff --git a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md index 9e8ff0d14d..12354630db 100644 --- a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md +++ b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md @@ -14,12 +14,12 @@ original_slug: Apprendre/HTML/Introduction_à _HTML/Marking_up_a_letter --- {{LearnSidebar}}{{PreviousMenuNext("Apprendre/HTML/Introduction_à _HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_à _HTML")}} -Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de `<head>` en HTML. +Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de `<head>` en HTML. <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Avant de se lancer dans cet exercice, vous devez déja avoir travaillé <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started" @@ -41,7 +41,7 @@ Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exempl </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Tester vos connaissances en balisage HTML simple et avancé de texte, d'hyperliens et de ce qu'il convient de mettre dans l'élément @@ -55,30 +55,30 @@ Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exempl Pour commencer cet exercice, vous devez récupérer le [texte brut que vous allez baliser](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt) et les CSS [à inclure](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt) dans l'HTML. Créez un nouveau fichier `.html` avec l'éditeur de texte dans lequel vous allez travailler (ou bien utilisez un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire l'exercice.) -## Projet « lettre » +## Projet « lettre » Pour ce projet, votre tâche consiste à baliser une lettre destinée à être hébergée dans l'intranet d'une université. La lettre est une réponse d'une chercheuse en poste à une doctorante éventuelle à propos de sa candidature pour travailler à l'université. -Sémantique de blocs/structures : +Sémantique de blocs/structures : - Il convient que vous donniez à la totalité du document une structure appropriée comprenant le type de document et les éléments {{htmlelement("html")}}, {{htmlelement("head")}} et {{htmlelement("body")}}. -- La lettre doit être marquée avec une structure de paragraphes et d'en‑têtes, en prenant en considération les points suivants : un en‑tête de haut niveau (la ligne « Re : ») et trois en-têtes de deuxième niveau. +- La lettre doit être marquée avec une structure de paragraphes et d'en‑têtes, en prenant en considération les points suivants : un en‑tête de haut niveau (la ligne « Re : ») et trois en-têtes de deuxième niveau. - Les dates de début des semestres, les sujets d'étude et les danses exotiques seront balisées avec les types de listes appropriés. - Mettez les deux adresses dans l'élement {{htmlelement("address")}}. En plus, chaque ligne des adresses doit être mise sur une nouvelle ligne sans que ce soit un nouveau paragraphe. -Sémantique en ligne : +Sémantique en ligne : -- Les noms de l'expéditeur et du destinataire (et « Tél » et « e‑mail ») doivent être marqués comme étant de grande importance. +- Les noms de l'expéditeur et du destinataire (et « Tél » et « e‑mail ») doivent être marqués comme étant de grande importance. - Les quatre dates du document doivent être indiquées dans des éléments appropriés contenant des dates lisibles par la machine. -- La première adresse et la première date de la lettre doivent recevoir une valeur d'attribut de classe « sender-column » ; le CSS que vous ajouterez plus tard les alignera à droite, comme c'est le cas dans une mise en page de lettre classique. +- La première adresse et la première date de la lettre doivent recevoir une valeur d'attribut de classe « sender-column » ; le CSS que vous ajouterez plus tard les alignera à droite, comme c'est le cas dans une mise en page de lettre classique. - Les cinq acronymes/abréviations dans le corps du texte de la lettre seront marqués pour permettre leur développement. - Les six indices/exposants seront balisés de manière appropriée. -- Les symboles « degré », « plus grand que » , « multiplier » seront marqués avec les références d'entités voulues. +- Les symboles « degré », « plus grand que » , « multiplier » seront marqués avec les références d'entités voulues. - Essayez de marquer au moins deux mots importants en gras/italique. -- Deux emplacements nécessitent un hyperlien ; ajoutez les liens appropriés avec des intitulés. Pour l'emplacement sur lequel le lien pointe, utilisez simplement http\://example.com. +- Deux emplacements nécessitent un hyperlien ; ajoutez les liens appropriés avec des intitulés. Pour l'emplacement sur lequel le lien pointe, utilisez simplement http\://example.com. - La citation et la devise de l'université doivent être marquées avec les éléments appropriés. -Dans l'en‑tête du document : +Dans l'en‑tête du document : - Le jeu de caractères sera précisé comme étant utf-8 avec la balise `meta` appropriée. - L'auteur de la lettre sera indiqué dans une balise `meta` adéquate. @@ -86,8 +86,8 @@ Dans l'en‑tête du document : ## Conseils et astuces -- Utilisez le [validateur HTML W3C](https://validator.w3.org/) pour valider votre HTML ; Vous aurez des points supplémentaires s'il est valide. -- Il n'est pas nécessaire de connaître les CSS pour faire cet exercice ; vous avez juste besoin de le mettre dans un élément HTML. +- Utilisez le [validateur HTML W3C](https://validator.w3.org/) pour valider votre HTML ; Vous aurez des points supplémentaires s'il est valide. +- Il n'est pas nécessaire de connaître les CSS pour faire cet exercice ; vous avez juste besoin de le mettre dans un élément HTML. ## Exemple @@ -97,7 +97,7 @@ La capture d'écran suivante montre ce à quoi la lettre devrait ressembler aprà ## Évaluation -Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez l'exercice d'abord — il n'y a rien à gagner à tricher ! +Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez l'exercice d'abord — il n'y a rien à gagner à tricher ! {{PreviousMenuNext("Apprendre/HTML/Introduction_to_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_to_HTML")}} diff --git a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md index 2f14f32358..88d0da5d1b 100644 --- a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md +++ b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md @@ -7,7 +7,7 @@ original_slug: Apprendre/HTML/Introduction_à _HTML/Structuring_a_page_of_content {{LearnSidebar}} {{PreviousNext("Apprendre/HTML/Introduction_à _HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à _HTML")}} -Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page. +Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page. <table class="standard-table"> <tbody> @@ -34,13 +34,13 @@ Il est essentiel de savoir structurer une page de contenu prête à être mise e ## Point de départ -Pour commencer cet exercice, vous pouvez télécharger [l'archive contenant les fichiers nécessaires](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true) à cette évaluation. Elle contient : +Pour commencer cet exercice, vous pouvez télécharger [l'archive contenant les fichiers nécessaires](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true) à cette évaluation. Elle contient : - le fichier HTML auquel vous allez devoir ajouter le balisage structurel, - le fichier CSS pour styliser la page, - les images utilisées dans la page. -Décompressez l'archive sur votre ordinateur, ou bien utilisez un site web comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire votre évaluation. +Décompressez l'archive sur votre ordinateur, ou bien utilisez un site web comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire votre évaluation. ## Aperçu du projet @@ -50,7 +50,7 @@ Dans ce projet, l'objectif est d'ajouter des éléments structurels au contenu d - une zone de contenu principal de deux colonnes : un bloc principal avec le texte de bienvenue et une barre latérale avec des vignettes d'images, - un pied de page avec les informations de droits d'auteur et les crédits. -Vous devez ajouter les enveloppes appropriées pour : +Vous devez ajouter les enveloppes appropriées pour : - l'en-tête - le menu de navigation @@ -65,8 +65,8 @@ Vous devez aussi ## **Conseils et astuces** -- Utilisez le « [W3C HTML validator »](https://validator.w3.org/) pour valider votre HTML ; vous aurez des points bonus si la validation s'opère autant que possible (la ligne « googleapis » est une ligne utilisée pour importer des polices personnalisées dans la page à partir du service « Google Fonts » ; elle ne sera pas validée, donc ne vous en inquiétez pas). -- Il n'est pas nécessaire de connaître quoi que ce soit des CSS pour faire cet exercice ; vous avez juste besoin de placer les CSS fournies dans l'élément HTML. +- Utilisez le « [W3C HTML validator »](https://validator.w3.org/) pour valider votre HTML ; vous aurez des points bonus si la validation s'opère autant que possible (la ligne « googleapis » est une ligne utilisée pour importer des polices personnalisées dans la page à partir du service « Google Fonts » ; elle ne sera pas validée, donc ne vous en inquiétez pas). +- Il n'est pas nécessaire de connaître quoi que ce soit des CSS pour faire cet exercice ; vous avez juste besoin de placer les CSS fournies dans l'élément HTML. - Les CSS jointes sont conçues de telle sorte que les éléments structuraux adéquats ont été ajoutés dans le balisage, ils apparaîtront en vert dans le rendu de la page. - Si vous êtes bloqué et ne voyez pas où mettre tel élément, cela peut vous aider de tracer un diagramme des blocs de disposition de la page et d'écrire sur chaque élément ce qui, à votre avis devrait envelopper chaque bloc. @@ -78,7 +78,7 @@ La capture d'écran suivante montre un exemple de ce à quoi la page d'accueil p ## Évaluation -Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez l'exercice d'abord — il n'y a rien à gagner à tricher ! +Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez l'exercice d'abord — il n'y a rien à gagner à tricher ! {{PreviousMenu("Apprendre/HTML/Introduction_à _HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à _HTML")}} |