From e26d24940b2234a1a5e63b19d19d298bf36354e2 Mon Sep 17 00:00:00 2001 From: julieng Date: Sun, 14 Nov 2021 14:30:32 +0100 Subject: move *.html to *.md --- files/fr/learn/html/cheatsheet/index.html | 284 ------ files/fr/learn/html/cheatsheet/index.md | 284 ++++++ .../add_a_hit_map_on_top_of_an_image/index.html | 125 --- .../add_a_hit_map_on_top_of_an_image/index.md | 125 +++ .../author_fast-loading_html_pages/index.html | 119 --- .../howto/author_fast-loading_html_pages/index.md | 119 +++ .../html/howto/define_terms_with_html/index.html | 150 ---- .../html/howto/define_terms_with_html/index.md | 150 ++++ files/fr/learn/html/howto/index.html | 137 --- files/fr/learn/html/howto/index.md | 137 +++ .../html/howto/use_data_attributes/index.html | 80 -- .../learn/html/howto/use_data_attributes/index.md | 80 ++ .../use_javascript_within_a_webpage/index.html | 98 --- .../howto/use_javascript_within_a_webpage/index.md | 98 +++ files/fr/learn/html/index.html | 61 -- files/fr/learn/html/index.md | 61 ++ .../advanced_text_formatting/index.html | 673 --------------- .../advanced_text_formatting/index.md | 673 +++++++++++++++ .../creating_hyperlinks/index.html | 334 -------- .../creating_hyperlinks/index.md | 334 ++++++++ .../introduction_to_html/debugging_html/index.html | 194 ----- .../introduction_to_html/debugging_html/index.md | 194 +++++ .../document_and_website_structure/index.html | 291 ------- .../document_and_website_structure/index.md | 291 +++++++ .../getting_started/index.html | 725 ---------------- .../introduction_to_html/getting_started/index.md | 725 ++++++++++++++++ .../html_text_fundamentals/index.html | 951 --------------------- .../html_text_fundamentals/index.md | 951 +++++++++++++++++++++ .../fr/learn/html/introduction_to_html/index.html | 66 -- files/fr/learn/html/introduction_to_html/index.md | 66 ++ .../marking_up_a_letter/index.html | 104 --- .../marking_up_a_letter/index.md | 104 +++ .../structuring_a_page_of_content/index.html | 97 --- .../structuring_a_page_of_content/index.md | 97 +++ .../the_head_metadata_in_html/index.html | 287 ------- .../the_head_metadata_in_html/index.md | 287 +++++++ .../adding_vector_graphics_to_the_web/index.html | 180 ---- .../adding_vector_graphics_to_the_web/index.md | 180 ++++ .../images_in_html/index.html | 504 ----------- .../images_in_html/index.md | 504 +++++++++++ .../learn/html/multimedia_and_embedding/index.html | 72 -- .../learn/html/multimedia_and_embedding/index.md | 72 ++ .../mozilla_splash_page/index.html | 111 --- .../mozilla_splash_page/index.md | 111 +++ .../other_embedding_technologies/index.html | 397 --------- .../other_embedding_technologies/index.md | 397 +++++++++ .../responsive_images/index.html | 236 ----- .../responsive_images/index.md | 236 +++++ .../video_and_audio_content/index.html | 315 ------- .../video_and_audio_content/index.md | 315 +++++++ files/fr/learn/html/tables/advanced/index.html | 476 ----------- files/fr/learn/html/tables/advanced/index.md | 476 +++++++++++ files/fr/learn/html/tables/basics/index.html | 557 ------------ files/fr/learn/html/tables/basics/index.md | 557 ++++++++++++ files/fr/learn/html/tables/index.html | 44 - files/fr/learn/html/tables/index.md | 44 + .../html/tables/structuring_planet_data/index.html | 73 -- .../html/tables/structuring_planet_data/index.md | 73 ++ 58 files changed, 7741 insertions(+), 7741 deletions(-) delete mode 100644 files/fr/learn/html/cheatsheet/index.html create mode 100644 files/fr/learn/html/cheatsheet/index.md delete mode 100644 files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html create mode 100644 files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md delete mode 100644 files/fr/learn/html/howto/author_fast-loading_html_pages/index.html create mode 100644 files/fr/learn/html/howto/author_fast-loading_html_pages/index.md delete mode 100644 files/fr/learn/html/howto/define_terms_with_html/index.html create mode 100644 files/fr/learn/html/howto/define_terms_with_html/index.md delete mode 100644 files/fr/learn/html/howto/index.html create mode 100644 files/fr/learn/html/howto/index.md delete mode 100644 files/fr/learn/html/howto/use_data_attributes/index.html create mode 100644 files/fr/learn/html/howto/use_data_attributes/index.md delete mode 100644 files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html create mode 100644 files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md delete mode 100644 files/fr/learn/html/index.html create mode 100644 files/fr/learn/html/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html create mode 100644 files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html create mode 100644 files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/debugging_html/index.html create mode 100644 files/fr/learn/html/introduction_to_html/debugging_html/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html create mode 100644 files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/fr/learn/html/introduction_to_html/getting_started/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html create mode 100644 files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/index.html create mode 100644 files/fr/learn/html/introduction_to_html/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html create mode 100644 files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html create mode 100644 files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html create mode 100644 files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.md delete mode 100644 files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md delete mode 100644 files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md delete mode 100644 files/fr/learn/html/multimedia_and_embedding/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/index.md delete mode 100644 files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md delete mode 100644 files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md delete mode 100644 files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md delete mode 100644 files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md delete mode 100644 files/fr/learn/html/tables/advanced/index.html create mode 100644 files/fr/learn/html/tables/advanced/index.md delete mode 100644 files/fr/learn/html/tables/basics/index.html create mode 100644 files/fr/learn/html/tables/basics/index.md delete mode 100644 files/fr/learn/html/tables/index.html create mode 100644 files/fr/learn/html/tables/index.md delete mode 100644 files/fr/learn/html/tables/structuring_planet_data/index.html create mode 100644 files/fr/learn/html/tables/structuring_planet_data/index.md (limited to 'files/fr/learn/html') diff --git a/files/fr/learn/html/cheatsheet/index.html b/files/fr/learn/html/cheatsheet/index.html deleted file mode 100644 index f9fcdc2434..0000000000 --- a/files/fr/learn/html/cheatsheet/index.html +++ /dev/null @@ -1,284 +0,0 @@ ---- -title: Cheatsheet HTML -slug: Learn/HTML/Cheatsheet -tags: - - Cheatsheet - - HTML - - Intermediate - - Learn -translation_of: Learn/HTML/Cheatsheet -original_slug: Apprendre/HTML/Cheatsheet ---- -
{{draft}}
- -

Lorsqu'on utilise {{Glossary("HTML")}}, une antisèche, une page rapide et récapitulative (cheatsheet) peut s'avérer plutôt pratique pour se souvenir rapidement de quelle balise HTML utiliser dans quel cas. MDN possède également une documentation HTML exhaustive ainsi que différents tutoriels HTML détaillés. Toutefois, dans la plupart des cas, il suffit juste d'une rapide vérification afin de pouvoir continuer. Cet article, sous la forme d'une antisèche synthétique, est là pour fournir des exemples de codes concis pour les usages les plus fréquents des éléments les plus utilisés.

- -
-

Note : Les balises HTML doivent en premier lieu être utilisées pour leur sémantique et non pour leur apparence. Il est toujours possible de modifier la mise en forme d'une balise donnée grâce à {{Glossary("CSS")}}. Aussi, quand vous utilisez HTML, soyez concentré-e sur la signification plutôt que sur l'apparence finale.

-
- -

Éléments en ligne

- -

Un élément est une partie d'une page web. Certains éléments sont agissent comme des conteneurs : ils sont grands et contiennent de plus petits éléments. Certains éléments sont plus petits et sont imbriqués dans des éléments plus grands. Par défaut les éléments « en ligne » apparaissent les uns à côté des autres sur une page web. Ils prennent autant de largeur que nécessaire sur une page et s'organisent horizontalement à la façon des mots dans une phrase ou des livres dans une bibliothèque. Tous les éléments en ligne peuvent être placés à l'intérieur de l'élément <body>.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UsageÉlémentExemple
Un lien{{HTMLElement("a")}}
<a href="https://example.org">
-Un lien vers example.org</a>.
- {{EmbedLiveSample("a-example", 100, 60)}}
Une image{{HTMLElement("img")}}
<img src="beast.png" width="25" />
- {{EmbedLiveSample("img-example", 100, 60)}}
Un conteneur en ligne{{HTMLElement("span")}}
Utilisé pour grouper des éléments, par exemple pour <span style="color:blue">les mettre en forme</span>.
- {{EmbedLiveSample("span-example", 100, 60)}}
Emphase du texte{{HTMLElement("em")}}
<em>La classe non ?</em>.
- {{EmbedLiveSample("em-example", 100, 60)}}
Texte idiomatique{{HTMLElement("i")}}
-Marque la phrase <i>généralement en italique</i>.
- {{EmbedLiveSample("i-example", 100, 60)}}
Texte d'attention{{HTMLElement("b")}}
-Met en avant un <b>mot ou une phrase d'une certaine importance</b>.
- {{EmbedLiveSample("b-example", 100, 60)}}
Texte d'importance{{HTMLElement("strong")}}
<strong>Ce contenu est important !</strong>
- {{EmbedLiveSample("strong-example", 100, 60)}}
Marquer du texte{{HTMLElement("mark")}}
<mark>Vous me voyez ?</mark>
- {{EmbedLiveSample("mark-example", 100, 60)}}
Texte barré{{HTMLElement("s")}}
<s>Je ne suis plus pertinent.</s>
- {{EmbedLiveSample("s-example", 100, 60)}}
Mise en indice{{HTMLElement("sub")}}
H<sub>2</sub>O
- {{EmbedLiveSample("sub-example", 100, 60)}}
Texte de commentaire{{HTMLElement("small")}}
-Utilisé pour représenter <small>les petites
-notes </small> d'un document.
-{{EmbedLiveSample("small-example", 100, 60)}}
Adresse{{HTMLElement("address")}}
<address>15 Rue du Bourg</address>
-{{EmbedLiveSample("address-example", 100, 60)}}
Citation textuelle{{HTMLElement("cite")}}
Pour plus d'informations sur les monstres,
-voir <cite>Le monstrueux livre des monstres</cite>.
- {{EmbedLiveSample("cite-example", 100, 60)}}
Mise en exposant{{HTMLElement("sup")}}
x<sup>2</sup>
- {{EmbedLiveSample("sup-example", 100, 60)}}
Citation en ligne{{HTMLElement("q")}}
-<q>Toi aussi mon fils ?</q>, a-t-il dit.
-{{EmbedLiveSample("q-example", 100, 60)}}
Un saut de ligne{{HTMLElement("br")}}
Ligne 1<br>Ligne 2
-{{EmbedLiveSample("br-example", 100, 80)}}
Un saut de ligne possible{{HTMLElement("wbr")}}
-<div style="width: 200px">
-  Llanfair<wbr>pwllgwyngyllgogerychwyrngogogoch.
-</div>
-{{EmbedLiveSample("wbr-example", 100, 80)}}
Date{{HTMLElement("time")}}
-Utilisé pour mettre en forme la date. Par exemple :
-<time datetime="2020-05-24" pubdate>
-Publié le 24 mai 2020</time>.
-{{EmbedLiveSample("time-example", 100, 60)}}
Code{{HTMLElement("code")}}
-Ce texte est au format normal,
-mais <code>celui-ci représente du code</code>.
-{{EmbedLiveSample("code-example", 100, 60)}}
Audio{{HTMLElement("audio")}}
-<audio controls="controls">
-  <source="t-rex-roar.mp3" type="audio/mpeg">
-  Votre navigateur ne prend pas en charge audio.
-</audio>
-{{EmbedLiveSample("audio-example", 100, 80)}}
Video{{HTMLElement("video")}}
-<video controls  width="250"
-  src="https://archive.org/download/ElephantsDream/ed_hd.ogv" >
-  L'élément <code>video</code> n'est pas pris en charge.
-</video>
-{{EmbedLiveSample("video-example", 100, 200)}}
- -

Éléments de bloc

- -

Les éléments de bloc, en revanche, occupent toutes la largeur de la page. Ils occupent une ligne entière et ne sont pas apposés les uns à côtés des autres. Ils s'empilent plutôt à l'instar des paragraphes dans un texte.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UsageÉlémentExemple
Un paragraphe{{HTMLElement("p")}}
-<p>Je suis un paragraphe</p>
-<p>Et un autre paragraph</p>
-{{EmbedLiveSample("p-example", 100, 150)}} -
Une citation étendue{{HTMLElement("blockquote")}}
Ils sont alors dit :
-<blockquote>L'élément blockquote indique une citation étendue.</blockquote>
-{{EmbedLiveSample("blockquote-example", 100, 100)}} -
Information supplémentaire{{HTMLElement("details")}}
-<details>
-  <summary>Anti-sèche HTML</summary>
-  <p>Éléments en ligne</p>
-  <p>Éléments de bloc</p>
-</details>
-{{EmbedLiveSample("details-example", 100, 150)}} -
Une liste non-ordonnée{{HTMLElement("ul")}}
-<ul>

-  <li>Je suis un élément de liste</li>

-  <li>Et moi un autre</li>

-</ul>
-{{EmbedLiveSample("ul-example", 100, 100)}} -
Une liste ordonnée{{HTMLElement("ol")}}
-<ol>

-  <li>Je suis le premier élément</li>

-  <li>Et moi le deuxième</li>

-</ol>
-{{EmbedLiveSample("ol-example", 100, 100)}} -
Une liste de définitions{{HTMLElement("dl")}}
-<dl>
-  <dt>Un terme</dt>

-  <dd>La définition du terme</dd>
-  <dt>Un autre terme</dt>
-  <dd>La définition d'un autre terme</dd>
-</dl>
-{{EmbedLiveSample("dl-example", 100, 150)}} -
Un séparateur horizontal{{HTMLElement("hr")}}
-avant<hr>après
-{{EmbedLiveSample("hr-example", 100, 100)}} -
Un titre{{HTMLElement("Heading_Elements", "<h1>-<h6>")}}
-<h1> Titre de niveau 1 </h1>
-<h2> Titre de niveau 2 </h2>
-<h3> Titre de niveau 3 </h3>
-<h4> Titre de niveau 4 </h4>
-<h5> Titre de niveau 5 </h5>
-<h6> Titre de niveau 6 </h6>
-{{EmbedLiveSample("h1-h6-example", 100, 350)}} -
\ No newline at end of file diff --git a/files/fr/learn/html/cheatsheet/index.md b/files/fr/learn/html/cheatsheet/index.md new file mode 100644 index 0000000000..f9fcdc2434 --- /dev/null +++ b/files/fr/learn/html/cheatsheet/index.md @@ -0,0 +1,284 @@ +--- +title: Cheatsheet HTML +slug: Learn/HTML/Cheatsheet +tags: + - Cheatsheet + - HTML + - Intermediate + - Learn +translation_of: Learn/HTML/Cheatsheet +original_slug: Apprendre/HTML/Cheatsheet +--- +
{{draft}}
+ +

Lorsqu'on utilise {{Glossary("HTML")}}, une antisèche, une page rapide et récapitulative (cheatsheet) peut s'avérer plutôt pratique pour se souvenir rapidement de quelle balise HTML utiliser dans quel cas. MDN possède également une documentation HTML exhaustive ainsi que différents tutoriels HTML détaillés. Toutefois, dans la plupart des cas, il suffit juste d'une rapide vérification afin de pouvoir continuer. Cet article, sous la forme d'une antisèche synthétique, est là pour fournir des exemples de codes concis pour les usages les plus fréquents des éléments les plus utilisés.

+ +
+

Note : Les balises HTML doivent en premier lieu être utilisées pour leur sémantique et non pour leur apparence. Il est toujours possible de modifier la mise en forme d'une balise donnée grâce à {{Glossary("CSS")}}. Aussi, quand vous utilisez HTML, soyez concentré-e sur la signification plutôt que sur l'apparence finale.

+
+ +

Éléments en ligne

+ +

Un élément est une partie d'une page web. Certains éléments sont agissent comme des conteneurs : ils sont grands et contiennent de plus petits éléments. Certains éléments sont plus petits et sont imbriqués dans des éléments plus grands. Par défaut les éléments « en ligne » apparaissent les uns à côté des autres sur une page web. Ils prennent autant de largeur que nécessaire sur une page et s'organisent horizontalement à la façon des mots dans une phrase ou des livres dans une bibliothèque. Tous les éléments en ligne peuvent être placés à l'intérieur de l'élément <body>.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UsageÉlémentExemple
Un lien{{HTMLElement("a")}}
<a href="https://example.org">
+Un lien vers example.org</a>.
+ {{EmbedLiveSample("a-example", 100, 60)}}
Une image{{HTMLElement("img")}}
<img src="beast.png" width="25" />
+ {{EmbedLiveSample("img-example", 100, 60)}}
Un conteneur en ligne{{HTMLElement("span")}}
Utilisé pour grouper des éléments, par exemple pour <span style="color:blue">les mettre en forme</span>.
+ {{EmbedLiveSample("span-example", 100, 60)}}
Emphase du texte{{HTMLElement("em")}}
<em>La classe non ?</em>.
+ {{EmbedLiveSample("em-example", 100, 60)}}
Texte idiomatique{{HTMLElement("i")}}
+Marque la phrase <i>généralement en italique</i>.
+ {{EmbedLiveSample("i-example", 100, 60)}}
Texte d'attention{{HTMLElement("b")}}
+Met en avant un <b>mot ou une phrase d'une certaine importance</b>.
+ {{EmbedLiveSample("b-example", 100, 60)}}
Texte d'importance{{HTMLElement("strong")}}
<strong>Ce contenu est important !</strong>
+ {{EmbedLiveSample("strong-example", 100, 60)}}
Marquer du texte{{HTMLElement("mark")}}
<mark>Vous me voyez ?</mark>
+ {{EmbedLiveSample("mark-example", 100, 60)}}
Texte barré{{HTMLElement("s")}}
<s>Je ne suis plus pertinent.</s>
+ {{EmbedLiveSample("s-example", 100, 60)}}
Mise en indice{{HTMLElement("sub")}}
H<sub>2</sub>O
+ {{EmbedLiveSample("sub-example", 100, 60)}}
Texte de commentaire{{HTMLElement("small")}}
+Utilisé pour représenter <small>les petites
+notes </small> d'un document.
+{{EmbedLiveSample("small-example", 100, 60)}}
Adresse{{HTMLElement("address")}}
<address>15 Rue du Bourg</address>
+{{EmbedLiveSample("address-example", 100, 60)}}
Citation textuelle{{HTMLElement("cite")}}
Pour plus d'informations sur les monstres,
+voir <cite>Le monstrueux livre des monstres</cite>.
+ {{EmbedLiveSample("cite-example", 100, 60)}}
Mise en exposant{{HTMLElement("sup")}}
x<sup>2</sup>
+ {{EmbedLiveSample("sup-example", 100, 60)}}
Citation en ligne{{HTMLElement("q")}}
+<q>Toi aussi mon fils ?</q>, a-t-il dit.
+{{EmbedLiveSample("q-example", 100, 60)}}
Un saut de ligne{{HTMLElement("br")}}
Ligne 1<br>Ligne 2
+{{EmbedLiveSample("br-example", 100, 80)}}
Un saut de ligne possible{{HTMLElement("wbr")}}
+<div style="width: 200px">
+  Llanfair<wbr>pwllgwyngyllgogerychwyrngogogoch.
+</div>
+{{EmbedLiveSample("wbr-example", 100, 80)}}
Date{{HTMLElement("time")}}
+Utilisé pour mettre en forme la date. Par exemple :
+<time datetime="2020-05-24" pubdate>
+Publié le 24 mai 2020</time>.
+{{EmbedLiveSample("time-example", 100, 60)}}
Code{{HTMLElement("code")}}
+Ce texte est au format normal,
+mais <code>celui-ci représente du code</code>.
+{{EmbedLiveSample("code-example", 100, 60)}}
Audio{{HTMLElement("audio")}}
+<audio controls="controls">
+  <source="t-rex-roar.mp3" type="audio/mpeg">
+  Votre navigateur ne prend pas en charge audio.
+</audio>
+{{EmbedLiveSample("audio-example", 100, 80)}}
Video{{HTMLElement("video")}}
+<video controls  width="250"
+  src="https://archive.org/download/ElephantsDream/ed_hd.ogv" >
+  L'élément <code>video</code> n'est pas pris en charge.
+</video>
+{{EmbedLiveSample("video-example", 100, 200)}}
+ +

Éléments de bloc

+ +

Les éléments de bloc, en revanche, occupent toutes la largeur de la page. Ils occupent une ligne entière et ne sont pas apposés les uns à côtés des autres. Ils s'empilent plutôt à l'instar des paragraphes dans un texte.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UsageÉlémentExemple
Un paragraphe{{HTMLElement("p")}}
+<p>Je suis un paragraphe</p>
+<p>Et un autre paragraph</p>
+{{EmbedLiveSample("p-example", 100, 150)}} +
Une citation étendue{{HTMLElement("blockquote")}}
Ils sont alors dit :
+<blockquote>L'élément blockquote indique une citation étendue.</blockquote>
+{{EmbedLiveSample("blockquote-example", 100, 100)}} +
Information supplémentaire{{HTMLElement("details")}}
+<details>
+  <summary>Anti-sèche HTML</summary>
+  <p>Éléments en ligne</p>
+  <p>Éléments de bloc</p>
+</details>
+{{EmbedLiveSample("details-example", 100, 150)}} +
Une liste non-ordonnée{{HTMLElement("ul")}}
+<ul>

+  <li>Je suis un élément de liste</li>

+  <li>Et moi un autre</li>

+</ul>
+{{EmbedLiveSample("ul-example", 100, 100)}} +
Une liste ordonnée{{HTMLElement("ol")}}
+<ol>

+  <li>Je suis le premier élément</li>

+  <li>Et moi le deuxième</li>

+</ol>
+{{EmbedLiveSample("ol-example", 100, 100)}} +
Une liste de définitions{{HTMLElement("dl")}}
+<dl>
+  <dt>Un terme</dt>

+  <dd>La définition du terme</dd>
+  <dt>Un autre terme</dt>
+  <dd>La définition d'un autre terme</dd>
+</dl>
+{{EmbedLiveSample("dl-example", 100, 150)}} +
Un séparateur horizontal{{HTMLElement("hr")}}
+avant<hr>après
+{{EmbedLiveSample("hr-example", 100, 100)}} +
Un titre{{HTMLElement("Heading_Elements", "<h1>-<h6>")}}
+<h1> Titre de niveau 1 </h1>
+<h2> Titre de niveau 2 </h2>
+<h3> Titre de niveau 3 </h3>
+<h4> Titre de niveau 4 </h4>
+<h5> Titre de niveau 5 </h5>
+<h6> Titre de niveau 6 </h6>
+{{EmbedLiveSample("h1-h6-example", 100, 350)}} +
\ No newline at end of file diff --git a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html deleted file mode 100644 index 2bd7ccebb6..0000000000 --- a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Ajouter une carte de zones cliquables sur une image -slug: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image -tags: - - Guide - - HTML - - Intermediate - - Navigation -translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image -original_slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image ---- -

Dans cet article, nous verrons comment construire une carte imagée cliquable en commençant par les inconvénients de cette méthode.

- - - - - - - - - - - - -
Prérequis :Vous devez au préalable savoir comment créer un document HTML simple et connaître comment ajouter des images accessibles à une page web.
Objectifs :Apprendre comment faire pour que différentes zones d'une même image pointent vers différentes pages.
- -
-

Attention : Cet article n'aborde que les cartes générées côté client. Les cartes de zones générées côté serveur ne doivent pas être utilisée car elles ne sont accessibles qu'aux utilisateurs ayant des souris.

-
- -

Les cartes imagées cliquables et leurs inconvénients

- -

Lorsque vous imbriquez une image dans un élément {{htmlelement("a")}}, l'image entière pointe vers une page web. En revanche, les cartes imagées contiennent plusieurs régions (aussi appelées « hotspots » en anglais) qui pointent chacunes vers une ressource distincte.

- -

Auparavant, les cartes imagées était assez populaires mais, malgré cette popularité, elles posent quelques problèmes en termes de performances et d'accessibilité.

- -

Les liens textuels (éventuellement mis en formes avec CSS) sont préférables à ces cartes car ils sont plus légers, plus faciles à maintenir, plus utiles pour le référencement et qu'ils sont supportés par les outils d'accessibilité.

- -

Comment insérer une carte imagée

- -

Étape 1 : l'image

- -

N'importe quelle image ne fera pas l'affaire pour construire une telle carte.

- - - -

On insère une image de la même façon que d'habitude (avec un élément {{htmlelement("img")}} et un texte dans l'attribut {{htmlattrxref("alt",'img')}}). Si l'image n'est présente qu'à des fins de navigations, alt peut être laissé vide : alt="", si les valeurs pour les différents {{htmlattrxref("alt",'area')}} sont bien renseignés dans les éléments {{htmlelement('area')}} que nous allons présenter.

- -

Cette image contiendra une attribut spécial {{htmlattrxref("usemap","img")}}. Celui-ci doit désigner avec un nom unique et sans espace la carte imagée. C'est ce nom qu'on placera dans cet attribut usemap :

- -
<img
-  src="image-map.png"
-  alt=""
-  usemap="#exemple-map-1" />
-
- -

Étape 2 : Activer les régions actives

- -

Dans cette étape, nous allons remplir le code de l'élément {{htmlelement('map')}}. Celui-ci n'a besoin que d'un seul attribut : {{htmlattrxref("name","map")}} dont la valeur doit correspondre à celle utilisée pour l'attribut usemap vue juste avant :

- -
<map name="exemple-map-1">
-
-</map>
-
- -

Dans cet élément <map>, on aura besoin d'utiliser les éléments {{htmlelement('area')}}. Chacun de ces éléments correspondra à une région donnée. Afin que la navigation au clavier reste intuitive, il faudra veiller à ce que l'ordre de ces éléments HTML corresponde bien à l'ordre visuel des régions.

- -

Les éléments <area> sont des éléments vides mais qui utilisent quatres attributs :

- -
-
{{htmlattrxref('shape','area')}}
-
{{htmlattrxref('coords','area')}}
-
-

shape (« forme » en anglais) prend l'une de ces quatre valeurs : circle (pour un cercle), rect (pour un rectangle), poly (pour un polygone) ou default (une zone default occupera l'image entière à laquelle on aura retiré les autres zones déjà définies). La forme choisie détermine les informations de coordonnées qui seront utiles dans coords.

- -
    -
  • Pour un cercle (circle) : on fournira les coordonnées X/Y du centre, suivies par la longueur du rayon.
    • -
  • Pour un rectange (rect) : on fournira les coordonnées X/Y des coins haut/gauche et bas/droite.
    • -
  • Pour un polygone (poly) : on fournira les coordonnées X/Y de chacun des sommets (et donc au moins six valeurs).
    • -
- -

Les coordonnées exprimées sont données en pixels CSS.

- -

Dans le cas où les définitions de certaines régions se chevauchent, ce sera l'ordre des zones qui donnera la priorité.

-
-
{{htmlattrxref('href','area')}}
-
Cet attribut est l'URL de la ressource vers laquelle on crée un lien. Elle peut être laissée vide si on ne souhaite pas créer de lien pour cette région.
-
{{htmlattrxref('alt','area')}}
-
-

Un attribut obligatoire qui indique aux personnes la direction ou le rôle du lien. Ce texte alt ne sera affiché que lorsque l'image ne sera pas disponible. Pour plus d'informations, voir nos conseils pour écrire des hyperliens accessibles.

- -

Vous pouvez écrire alt="" si l'attribut href est vide et que l'image entière possède déjà un attribut alt renseigné.

-
-
- -
<map name="exemple-map-1">
-  <area shape="circle" coords="200,250,25"
-    href="page-2.html" alt="exemple de cercle" />
-
-  <area shape="rect" coords="10, 5, 20, 15"
-    href="page-3.html" alt="exemple de rectangle" />
-
-</map>
- -

Étape 3 : S'assurer que la carte fonctionne pour chacun

- -

Ce n'est pas encore fini. Il est nécessaire de s'assurer que la carte fonctionne bien sur différents navigateurs et appareils. Vous pouvez essayer de naviguer en utilisant uniquement de clavier. Vous pouvez également désactiver les images.

- -

Si votre carte imagée mesure plus de 240px environ, vous devrez réfléchir à comment l'ajuster pour que celle-ci soit adaptative. Il ne suffira pas de redimensionner l'image pour les écrans plus petits car les coordonnées qui resteraient les mêmes ne correspondraient plus aux différents points de l'image.

- -

Si vous devez nécessairement utiliser de telles cartes, vous pouvez regarder ce plugin jQuery réalisé par Matt Stow. Dudley Storey illustre une méthode qui consiste à utiliser SVG pour réaliser un effet de carte imagée ainsi qu'une bidouille pour les images matricielles avec une combinaison de SVG.

- -

En savoir plus

- - diff --git a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md new file mode 100644 index 0000000000..2bd7ccebb6 --- /dev/null +++ b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md @@ -0,0 +1,125 @@ +--- +title: Ajouter une carte de zones cliquables sur une image +slug: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image +tags: + - Guide + - HTML + - Intermediate + - Navigation +translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image +original_slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image +--- +

Dans cet article, nous verrons comment construire une carte imagée cliquable en commençant par les inconvénients de cette méthode.

+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable savoir comment créer un document HTML simple et connaître comment ajouter des images accessibles à une page web.
Objectifs :Apprendre comment faire pour que différentes zones d'une même image pointent vers différentes pages.
+ +
+

Attention : Cet article n'aborde que les cartes générées côté client. Les cartes de zones générées côté serveur ne doivent pas être utilisée car elles ne sont accessibles qu'aux utilisateurs ayant des souris.

+
+ +

Les cartes imagées cliquables et leurs inconvénients

+ +

Lorsque vous imbriquez une image dans un élément {{htmlelement("a")}}, l'image entière pointe vers une page web. En revanche, les cartes imagées contiennent plusieurs régions (aussi appelées « hotspots » en anglais) qui pointent chacunes vers une ressource distincte.

+ +

Auparavant, les cartes imagées était assez populaires mais, malgré cette popularité, elles posent quelques problèmes en termes de performances et d'accessibilité.

+ +

Les liens textuels (éventuellement mis en formes avec CSS) sont préférables à ces cartes car ils sont plus légers, plus faciles à maintenir, plus utiles pour le référencement et qu'ils sont supportés par les outils d'accessibilité.

+ +

Comment insérer une carte imagée

+ +

Étape 1 : l'image

+ +

N'importe quelle image ne fera pas l'affaire pour construire une telle carte.

+ + + +

On insère une image de la même façon que d'habitude (avec un élément {{htmlelement("img")}} et un texte dans l'attribut {{htmlattrxref("alt",'img')}}). Si l'image n'est présente qu'à des fins de navigations, alt peut être laissé vide : alt="", si les valeurs pour les différents {{htmlattrxref("alt",'area')}} sont bien renseignés dans les éléments {{htmlelement('area')}} que nous allons présenter.

+ +

Cette image contiendra une attribut spécial {{htmlattrxref("usemap","img")}}. Celui-ci doit désigner avec un nom unique et sans espace la carte imagée. C'est ce nom qu'on placera dans cet attribut usemap :

+ +
<img
+  src="image-map.png"
+  alt=""
+  usemap="#exemple-map-1" />
+
+ +

Étape 2 : Activer les régions actives

+ +

Dans cette étape, nous allons remplir le code de l'élément {{htmlelement('map')}}. Celui-ci n'a besoin que d'un seul attribut : {{htmlattrxref("name","map")}} dont la valeur doit correspondre à celle utilisée pour l'attribut usemap vue juste avant :

+ +
<map name="exemple-map-1">
+
+</map>
+
+ +

Dans cet élément <map>, on aura besoin d'utiliser les éléments {{htmlelement('area')}}. Chacun de ces éléments correspondra à une région donnée. Afin que la navigation au clavier reste intuitive, il faudra veiller à ce que l'ordre de ces éléments HTML corresponde bien à l'ordre visuel des régions.

+ +

Les éléments <area> sont des éléments vides mais qui utilisent quatres attributs :

+ +
+
{{htmlattrxref('shape','area')}}
+
{{htmlattrxref('coords','area')}}
+
+

shape (« forme » en anglais) prend l'une de ces quatre valeurs : circle (pour un cercle), rect (pour un rectangle), poly (pour un polygone) ou default (une zone default occupera l'image entière à laquelle on aura retiré les autres zones déjà définies). La forme choisie détermine les informations de coordonnées qui seront utiles dans coords.

+ +
    +
  • Pour un cercle (circle) : on fournira les coordonnées X/Y du centre, suivies par la longueur du rayon.
    • +
  • Pour un rectange (rect) : on fournira les coordonnées X/Y des coins haut/gauche et bas/droite.
    • +
  • Pour un polygone (poly) : on fournira les coordonnées X/Y de chacun des sommets (et donc au moins six valeurs).
    • +
+ +

Les coordonnées exprimées sont données en pixels CSS.

+ +

Dans le cas où les définitions de certaines régions se chevauchent, ce sera l'ordre des zones qui donnera la priorité.

+
+
{{htmlattrxref('href','area')}}
+
Cet attribut est l'URL de la ressource vers laquelle on crée un lien. Elle peut être laissée vide si on ne souhaite pas créer de lien pour cette région.
+
{{htmlattrxref('alt','area')}}
+
+

Un attribut obligatoire qui indique aux personnes la direction ou le rôle du lien. Ce texte alt ne sera affiché que lorsque l'image ne sera pas disponible. Pour plus d'informations, voir nos conseils pour écrire des hyperliens accessibles.

+ +

Vous pouvez écrire alt="" si l'attribut href est vide et que l'image entière possède déjà un attribut alt renseigné.

+
+
+ +
<map name="exemple-map-1">
+  <area shape="circle" coords="200,250,25"
+    href="page-2.html" alt="exemple de cercle" />
+
+  <area shape="rect" coords="10, 5, 20, 15"
+    href="page-3.html" alt="exemple de rectangle" />
+
+</map>
+ +

Étape 3 : S'assurer que la carte fonctionne pour chacun

+ +

Ce n'est pas encore fini. Il est nécessaire de s'assurer que la carte fonctionne bien sur différents navigateurs et appareils. Vous pouvez essayer de naviguer en utilisant uniquement de clavier. Vous pouvez également désactiver les images.

+ +

Si votre carte imagée mesure plus de 240px environ, vous devrez réfléchir à comment l'ajuster pour que celle-ci soit adaptative. Il ne suffira pas de redimensionner l'image pour les écrans plus petits car les coordonnées qui resteraient les mêmes ne correspondraient plus aux différents points de l'image.

+ +

Si vous devez nécessairement utiliser de telles cartes, vous pouvez regarder ce plugin jQuery réalisé par Matt Stow. Dudley Storey illustre une méthode qui consiste à utiliser SVG pour réaliser un effet de carte imagée ainsi qu'une bidouille pour les images matricielles avec une combinaison de SVG.

+ +

En savoir plus

+ + diff --git a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.html b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.html deleted file mode 100644 index 8dd4f33264..0000000000 --- a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Astuces de création de pages HTML à affichage rapide -slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages -tags: - - HTML - - Performance -translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages -original_slug: Web/Guide/HTML/Astuces_de_création_de_pages_HTML_à_affichage_rapide ---- -

C'est connu, les internautes sont de grands impatients, ils veulent des résultats immédiats, avec des gros titres et des réponses courtes et efficaces. 
- Une page web optimisé prévoit non seulement un site plus réactif, mais aussi de réduire la charge sur vos serveurs Web et votre connexion Internet. Cela peut être crucial pour les gros sites ou des sites qui ont un pic de trafic dans des circonstances exceptionnelles (telles que les Unes des journaux fracassantes). De plus, Google en tient compte pour son classement.

- -

Réduire le poids de la page

- -

Le poids de la page est de loin le facteur le plus important dans les performances de chargement de votre page. Pour les améliorer, on peut procéder de diverses manières:

- - - -

Téléchargez le html d'abords, puis le CSS et le JavaScript nécessaires à son affichage, de sorte que l'utilisateur obtienne rapidement une réponse apparente au cours du chargement de la paget. Ce contenu est généralement du texte, et peuvent donc bénéficier de la compression de texte dans le modem, fournissant ainsi une réponse encore plus rapide à l'utilisateur.

- -

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 nécessaire pour télécharger une page.

- - - -

Les videos sont diffusées progressivement depuis le serveur, elles ne ralentisseent donc pas le chargement de votre page.

- -

Réduire les domaines des recherches

- -

Étant donné que chaque requete DNS demande du temps, le temps de chargement de la page va augmenter avec l'augmentation du nombre de domaines séparés figurant dans le lien CSS, JavaScript et image (src). Vous devez toujours prendre soin de n'utiliser que le nombre minimum nécessaire de différents domaines dans vos pages.

- -

Réutiliser le contenu du cache

- -

Assurez-vous que tout contenu qui peut être mis en cache, est mis en cache, et avec un temps d'expiration appropriée.
- En particulier, attention à l'en-tête "Last-Modified". Elle permet la mise en cache de la page; grâce à cette en-tête, l'information est transmise au navigateur (ou "user agent") sur le fichier qu'il veut charger, comme lors de sa dernière modification. La plupart des serveurs web ajoute automatiquement l'en-tête "Last-Modified" aux pages statiques (par exemple. html,. css), basé sur la date de la dernière modification stockées dans le système de fichiers. Avec des pages dynamiques (p. ex. Php,. Aspx), ceci, bien sûr, ne peut pas être fait, et l'en-tête n'est pas envoyé.
- En particulier pour les pages qui sont générées dynamiquement, une petite recherche sur ce sujet est bénéfique. Il peut être quelque peu complexe, mais il permettra d'économiser beaucoup de demandes de page sur des pages qui ne devraient normalement pas être mis en cache.
-
- Plus d'informations:
-
-    1. HTTP Conditional Get for RSS Hackers
-    2. HTTP 304: Not Modified
-    3. On HTTP Last-Modified and ETag

- -

Réduire le nombre de scripts en ligne

- -

Les scripts intégrés peut être coûteux pour le chargement de la page, puisque l'analyseur (ou parser) doit supposer qu'un script intégré pourrait modifier la structure de la page quand le "parsing" est en cours. Il est donc préférable, en général, de réduire l'utilisation des scripts intégrés et l'utilisation de document.write(), en particulier au contenu de sortie. Ces manipulations peuvent améliorer chargement globale de la page. Utilisez des méthodes modernes de W3C-DOM pour manipuler le contenu de la page pour les navigateurs modernes, plutôt que des approches plus fondées sur document.write ().

- -

Utilisez le CSS moderne et des balises valides

- -

L'utilisation de CSS modernes réduit la quantité de balisage, et peut réduire la nécessité de "spacer" les images, en termes de disposition, et peut très souvent remplacer des images de texte stylisé - qui "coutent" beaucoup plus que l'équivalent texte-et-CSS.
- Utiliser des balises valides a d'autres avantages. Tout d'abord, les navigateurs n'ont pas besoin d'effectuer de corrections d'erreurs lors de l'analyse du code HTML.
- En outre, la validité du balisage permet la libre utilisation d'autres outils qui peuvent pré-traiter vos pages web. Par exemple, HTML Tidy  peut supprimer des espaces blancs et des balises facultatives, mais il refusera de s'exécuter sur une page avec des erreurs de balisage graves.

- -

Segmentez votre contenu

- -

Remplacer la mise en page basé sur des <table> par des blocs <div>, plutôt que des <table> très imbriquée comme dans l'exemple suivant:

- -
<TABLE>
-  <TABLE>
-    <TABLE>
-          ...
-    </TABLE>
-  </TABLE>
-</TABLE>
-
-
- -

Préferez des <table> non-imbriquées ou <div> comme dans l'exemple suivant:

- -
> TABLE <TABLE> ...</
-> TABLE <TABLE> ...</
-> TABLE <TABLE> ...</
- -

Préciser la taille des images et des tableaux

- -

Si le navigateur peut immédiatement déterminer la hauteur et/ou la largeur de vos images et tableaux, il sera capable d'afficher une page web sans avoir à refondre le contenu. Cela n'augmente pas seulement la vitesse d'affichage de la page, mais aussi à empêcher les changements gênants dans la disposition d'une page lors du chargement. Pour cette raison, la hauteur et la largeur doit être spécifié pour les images, chaque fois que possible.
- Les tableaux doivent utiliser le sélecteur CSS selector:property combination:

- -
  table-layout: fixed;
-
-
- -

et doit spécifier la largeur des colonnes en utilisant le COL et les balises html COLGROUP.

- -

Choisissez les versions des navigateur ciblés

- -


- Pour atteindre les plus grandes améliorations dans la conception de la page, assurez-vous que des exigences raisonnables de l'agent utilisateur (user-agent) soit définies pour les projets. Cela ne nécessite pas que votre contenu apparaisse parfaitement sur tous les navigateurs, et surtout pas dans les navigateurs d'une version anterieure.
-
- Idéalement, vous devriez vous concentrez sur l'examen des navigateurs modernes qui prennent en charge des normes pertinentes. Il peut s'agir de: Firefox 5, Internet Explorer 9 sur Windows, Opera 11 sous Windows et Safari 5 sur Mac OS X.
-
- Notez, cependant, que beaucoup de conseils énumérés dans cette page sont des techniques de bon sens qui s'applique à tous, et peuvent être appliquées à n'importe quelle page web, indépendamment des exigences relatives des navigateurs.

- -

Liens connexes

- -


-     * Optimisez vos pages avec Yslow
-     * Livre: "Speed Up Your Site" par Andy King
-     * Site Optimization Tutorial (WebMonkey) (en anglais) 
-     * Best Practices for Speeding Up Your Web Site (en anglais) 

- -

 

- -

Document d'information d'origine
-
-     * https://developer.mozilla.org/en/Tips_for_Authoring_Fast-loading_HTML_Pages

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 new file mode 100644 index 0000000000..8dd4f33264 --- /dev/null +++ b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md @@ -0,0 +1,119 @@ +--- +title: Astuces de création de pages HTML à affichage rapide +slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages +tags: + - HTML + - Performance +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +original_slug: Web/Guide/HTML/Astuces_de_création_de_pages_HTML_à_affichage_rapide +--- +

C'est connu, les internautes sont de grands impatients, ils veulent des résultats immédiats, avec des gros titres et des réponses courtes et efficaces. 
+ Une page web optimisé prévoit non seulement un site plus réactif, mais aussi de réduire la charge sur vos serveurs Web et votre connexion Internet. Cela peut être crucial pour les gros sites ou des sites qui ont un pic de trafic dans des circonstances exceptionnelles (telles que les Unes des journaux fracassantes). De plus, Google en tient compte pour son classement.

+ +

Réduire le poids de la page

+ +

Le poids de la page est de loin le facteur le plus important dans les performances de chargement de votre page. Pour les améliorer, on peut procéder de diverses manières:

+ + + +

Téléchargez le html d'abords, puis le CSS et le JavaScript nécessaires à son affichage, de sorte que l'utilisateur obtienne rapidement une réponse apparente au cours du chargement de la paget. Ce contenu est généralement du texte, et peuvent donc bénéficier de la compression de texte dans le modem, fournissant ainsi une réponse encore plus rapide à l'utilisateur.

+ +

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 nécessaire pour télécharger une page.

+ + + +

Les videos sont diffusées progressivement depuis le serveur, elles ne ralentisseent donc pas le chargement de votre page.

+ +

Réduire les domaines des recherches

+ +

Étant donné que chaque requete DNS demande du temps, le temps de chargement de la page va augmenter avec l'augmentation du nombre de domaines séparés figurant dans le lien CSS, JavaScript et image (src). Vous devez toujours prendre soin de n'utiliser que le nombre minimum nécessaire de différents domaines dans vos pages.

+ +

Réutiliser le contenu du cache

+ +

Assurez-vous que tout contenu qui peut être mis en cache, est mis en cache, et avec un temps d'expiration appropriée.
+ En particulier, attention à l'en-tête "Last-Modified". Elle permet la mise en cache de la page; grâce à cette en-tête, l'information est transmise au navigateur (ou "user agent") sur le fichier qu'il veut charger, comme lors de sa dernière modification. La plupart des serveurs web ajoute automatiquement l'en-tête "Last-Modified" aux pages statiques (par exemple. html,. css), basé sur la date de la dernière modification stockées dans le système de fichiers. Avec des pages dynamiques (p. ex. Php,. Aspx), ceci, bien sûr, ne peut pas être fait, et l'en-tête n'est pas envoyé.
+ En particulier pour les pages qui sont générées dynamiquement, une petite recherche sur ce sujet est bénéfique. Il peut être quelque peu complexe, mais il permettra d'économiser beaucoup de demandes de page sur des pages qui ne devraient normalement pas être mis en cache.
+
+ Plus d'informations:
+
+    1. HTTP Conditional Get for RSS Hackers
+    2. HTTP 304: Not Modified
+    3. On HTTP Last-Modified and ETag

+ +

Réduire le nombre de scripts en ligne

+ +

Les scripts intégrés peut être coûteux pour le chargement de la page, puisque l'analyseur (ou parser) doit supposer qu'un script intégré pourrait modifier la structure de la page quand le "parsing" est en cours. Il est donc préférable, en général, de réduire l'utilisation des scripts intégrés et l'utilisation de document.write(), en particulier au contenu de sortie. Ces manipulations peuvent améliorer chargement globale de la page. Utilisez des méthodes modernes de W3C-DOM pour manipuler le contenu de la page pour les navigateurs modernes, plutôt que des approches plus fondées sur document.write ().

+ +

Utilisez le CSS moderne et des balises valides

+ +

L'utilisation de CSS modernes réduit la quantité de balisage, et peut réduire la nécessité de "spacer" les images, en termes de disposition, et peut très souvent remplacer des images de texte stylisé - qui "coutent" beaucoup plus que l'équivalent texte-et-CSS.
+ Utiliser des balises valides a d'autres avantages. Tout d'abord, les navigateurs n'ont pas besoin d'effectuer de corrections d'erreurs lors de l'analyse du code HTML.
+ En outre, la validité du balisage permet la libre utilisation d'autres outils qui peuvent pré-traiter vos pages web. Par exemple, HTML Tidy  peut supprimer des espaces blancs et des balises facultatives, mais il refusera de s'exécuter sur une page avec des erreurs de balisage graves.

+ +

Segmentez votre contenu

+ +

Remplacer la mise en page basé sur des <table> par des blocs <div>, plutôt que des <table> très imbriquée comme dans l'exemple suivant:

+ +
<TABLE>
+  <TABLE>
+    <TABLE>
+          ...
+    </TABLE>
+  </TABLE>
+</TABLE>
+
+
+ +

Préferez des <table> non-imbriquées ou <div> comme dans l'exemple suivant:

+ +
> TABLE <TABLE> ...</
+> TABLE <TABLE> ...</
+> TABLE <TABLE> ...</
+ +

Préciser la taille des images et des tableaux

+ +

Si le navigateur peut immédiatement déterminer la hauteur et/ou la largeur de vos images et tableaux, il sera capable d'afficher une page web sans avoir à refondre le contenu. Cela n'augmente pas seulement la vitesse d'affichage de la page, mais aussi à empêcher les changements gênants dans la disposition d'une page lors du chargement. Pour cette raison, la hauteur et la largeur doit être spécifié pour les images, chaque fois que possible.
+ Les tableaux doivent utiliser le sélecteur CSS selector:property combination:

+ +
  table-layout: fixed;
+
+
+ +

et doit spécifier la largeur des colonnes en utilisant le COL et les balises html COLGROUP.

+ +

Choisissez les versions des navigateur ciblés

+ +


+ Pour atteindre les plus grandes améliorations dans la conception de la page, assurez-vous que des exigences raisonnables de l'agent utilisateur (user-agent) soit définies pour les projets. Cela ne nécessite pas que votre contenu apparaisse parfaitement sur tous les navigateurs, et surtout pas dans les navigateurs d'une version anterieure.
+
+ Idéalement, vous devriez vous concentrez sur l'examen des navigateurs modernes qui prennent en charge des normes pertinentes. Il peut s'agir de: Firefox 5, Internet Explorer 9 sur Windows, Opera 11 sous Windows et Safari 5 sur Mac OS X.
+
+ Notez, cependant, que beaucoup de conseils énumérés dans cette page sont des techniques de bon sens qui s'applique à tous, et peuvent être appliquées à n'importe quelle page web, indépendamment des exigences relatives des navigateurs.

+ +

Liens connexes

+ +


+     * Optimisez vos pages avec Yslow
+     * Livre: "Speed Up Your Site" par Andy King
+     * Site Optimization Tutorial (WebMonkey) (en anglais) 
+     * Best Practices for Speeding Up Your Web Site (en anglais) 

+ +

 

+ +

Document d'information d'origine
+
+     * https://developer.mozilla.org/en/Tips_for_Authoring_Fast-loading_HTML_Pages

diff --git a/files/fr/learn/html/howto/define_terms_with_html/index.html b/files/fr/learn/html/howto/define_terms_with_html/index.html deleted file mode 100644 index c4a834b1a4..0000000000 --- a/files/fr/learn/html/howto/define_terms_with_html/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: Définir des termes avec HTML -slug: Learn/HTML/Howto/Define_terms_with_HTML -tags: - - Beginner - - Guide - - HTML - - Learn -translation_of: Learn/HTML/Howto/Define_terms_with_HTML -original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML ---- -

HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on emploie (que ce soit intégré dans le texte ou dans un glossaire à part). Dans cet article, nous verrons comment correctement définir les termes utilisés au sein d'un document.

- - - - - - - - - - - - -
Prérequis :Vous devez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre comment introduire de nouveaux mots-clés et comment construire une liste de définitions.
- -

Lorsqu'on souhaite définir un terme, on utilise généralement un dictionnaire ou un glossaire. Les dictionnaires et glossaires permettent d'associer formellement des termes clés avec une ou plusieurs descriptions. Par exemple :

- -
-
-
Bleu (adjectif)
-
La couleur du ciel lors d'un temps clair.
- Le ciel est bleu.
-
-
- -

Mais il arrive fréquemment qu'on définisse des termes de façon moins formelle, comme ici :

- -
-

Firefox est le navigateur web créé et développé par la Fondation Mozilla.

-
- -

Pour gérer ces différents cas d'utilisation, {{Glossary("HTML")}} fournit différents éléments qui permettent de marquer les termes définis et leurs descriptions afin que vos lecteurs puissent utiliser ces informations.

- -

Comment écrire un description informelle

- -

Dans certains manuels, à la première occurence d'un terme, celui-ci est placé en gras et défini immédiatement.

- -

On peut procéder de cette façon avec HTML. En revanche, HTML ne gère pas l'aspect visuel d'un document, uniquement son contenu. On utilisera l'élément {{htmlelement("dfn")}} qui permet d'identifier la première occurence d'un terme. Attention, <dfn> enveloppe le terme à définir et pas sa définition (qui elle s'étend sur le paragraphe courant) :

- -
<p><dfn>Firefox</dfn> est le navigateur créé et développé par la Fondation Mozilla.</p>
-
- -
-

Note : On utilise également parfois le gras pour mettre en avant du contenu. Le gras, en tant que tel, est un concept qui n'appartient pas à HTML mais à la mise en forme. En revanche, pour mettre en avant (utiliser une emphase), il existe des éléments HTML tout indiqués.

-
- -

Cas spécifique : les abréviations

- -

En ce qui concerne les abréviations, il est préférable de les identifier séparement grâce à l'élément {{htmlelement("abbr")}} afin que les lecteurs d'écrans puissent les utiliser correctement. Comme pour la définition d'un nouveau terme, une abréviation doit être définie lors de sa première apparition.

- -
<p>
-  <dfn><abbr>HTML</abbr> (hypertext markup language)</dfn>
-   est un langage de description utilisé pour structurer des documents sur le Web.
-</p>
- -
-

Note : La spécification HTML met en avant l'attribut title pour expliciter les termes de l'abréviation. Cependant, il reste nécessaire d'utiliser le texte classique pour fournir une explication car le contenu de l'attribut title ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également ce qui est noté dans les spécifications.

-
- -

Améliorer l'accessibilité

- -

{{HTMLElement('dfn')}} identifie le terme qui est défini et indique que le paragraphe courant définit le terme. Il y a donc une relation implicite entre l'élément <dfn> et l'élément qui le contient. Si vous souhaitez avoir une relation plus formelle ou que votre définition ne s'étend que sur une ou plusieurs phrases plutôt que sur l'ensemble du paragraphe, vous pouvez utiliser l'attribut aria-discribedby pour associer, formellement, un terme à sa définition :

- -
<p>
-  <span id="ff">
-    <dfn aria-describedby="ff">Firefox</dfn>
-    est le navigateur web créé et développé par la Fondation Mozilla.
-  </span>
-  Vous pouvez le télécharger sur <a href="http://www.mozilla.org">mozilla.org</a>
-</p>
- -

Les technologies d'assistance à la navigation pourront tirer parti de cet attribut pour fournir un texte alternatif pour un terme donné. aria-describedby peut être utilisé pour n'importe quelle balise contenant un mot-clé à définir (il n'est pas nécessaire que ce soit <dfn>). aria-describedby utilise un référence à l'{{htmlattrxref('id')}} de l'élément qui contient la description.

- -

Comment construire une liste de descriptions

- -

Les listes de descriptions sont des listes de termes associés à leur description (par exemple une liste de définition, des entrées d'un dictionnaire, une FAQ, des paires de clés-valeurs, etc.).

- -
-

Note : Les listes de descriptions ne doivent pas être utilisées pour retranscrire des dialogues. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici quelques recommandations pour retranscrire un dialogue dans un document web.

-
- -

Les termes à décrire sont placés dans des éléments {{htmlelement("dt")}} et la description, qui suit immédiatement, est placée dans un ou plusieurs éléments {{htmlelement("dd")}}. Enfin, l'ensemble de la liste est placé au sein d'un élément {{htmlelement("dl")}}.

- -

Un exemple simple

- -

Voici un exemple simple qui dresse une liste de descriptions de plats :

- -
<dl>
-  <dt>jambalaya</dt>
-    <dd>
-      une entrée à base de riz qui contient généralement
-      du poulet, des saucisses, des fruits de mer et des
-      épices
-    </dd>
-
-  <dt>sukiyaki</dt>
-    <dd>
-      une spécialité japonaise à base de fines tranches de
-      viande, de légumes, de nouilles et qui est cuite dans
-      un sauce soja et du saké
-    </dd>
-
-  <dt>chianti</dt>
-    <dd>
-      un vin italien, sec, originaire de Toscane
-    </dd>
-</dl>
-
- -
-

Note : La structure de base qu'on voit dans cet exemple alterne les termes (<dt>) et leurs descriptions (<dd>). Si deux (ou plusieurs) termes apparaissent les uns à la suite des autres, la description qui suit s'appliquera à tout ces termes. Si deux (ou plusieurs) descriptions se suivent, elles s'appliqueront au dernier terme.

-
- -

Améliorer l'aspect visuel

- -

Voici comment un navigateur affichera la liste précédente :

- -

{{EmbedLiveSample("Un_exemple_simple", 600, 180)}}

- -

Si vous souhaitez que les termes soient plus visibles, vous pouvez les écrire en gras. Cela ne change rien au contenu, donc ce ne sera pas HTML qui sera utilisé. En revanche, cela modifie la mise en forme et nous allons donc utiliser CSS et plus particulièrement la propriété {{cssxref("font-weight")}} :

- -
dt {
-  font-weight: bold;
-}
-
- -

Cela permettra d'obtenir le résultat suivant :

- -

{{EmbedLiveSample("Comment_construire_une_liste_de_descriptions", 600, 180)}}

- -

En savoir plus

- - diff --git a/files/fr/learn/html/howto/define_terms_with_html/index.md b/files/fr/learn/html/howto/define_terms_with_html/index.md new file mode 100644 index 0000000000..c4a834b1a4 --- /dev/null +++ b/files/fr/learn/html/howto/define_terms_with_html/index.md @@ -0,0 +1,150 @@ +--- +title: Définir des termes avec HTML +slug: Learn/HTML/Howto/Define_terms_with_HTML +tags: + - Beginner + - Guide + - HTML + - Learn +translation_of: Learn/HTML/Howto/Define_terms_with_HTML +original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML +--- +

HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on emploie (que ce soit intégré dans le texte ou dans un glossaire à part). Dans cet article, nous verrons comment correctement définir les termes utilisés au sein d'un document.

+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre comment introduire de nouveaux mots-clés et comment construire une liste de définitions.
+ +

Lorsqu'on souhaite définir un terme, on utilise généralement un dictionnaire ou un glossaire. Les dictionnaires et glossaires permettent d'associer formellement des termes clés avec une ou plusieurs descriptions. Par exemple :

+ +
+
+
Bleu (adjectif)
+
La couleur du ciel lors d'un temps clair.
+ Le ciel est bleu.
+
+
+ +

Mais il arrive fréquemment qu'on définisse des termes de façon moins formelle, comme ici :

+ +
+

Firefox est le navigateur web créé et développé par la Fondation Mozilla.

+
+ +

Pour gérer ces différents cas d'utilisation, {{Glossary("HTML")}} fournit différents éléments qui permettent de marquer les termes définis et leurs descriptions afin que vos lecteurs puissent utiliser ces informations.

+ +

Comment écrire un description informelle

+ +

Dans certains manuels, à la première occurence d'un terme, celui-ci est placé en gras et défini immédiatement.

+ +

On peut procéder de cette façon avec HTML. En revanche, HTML ne gère pas l'aspect visuel d'un document, uniquement son contenu. On utilisera l'élément {{htmlelement("dfn")}} qui permet d'identifier la première occurence d'un terme. Attention, <dfn> enveloppe le terme à définir et pas sa définition (qui elle s'étend sur le paragraphe courant) :

+ +
<p><dfn>Firefox</dfn> est le navigateur créé et développé par la Fondation Mozilla.</p>
+
+ +
+

Note : On utilise également parfois le gras pour mettre en avant du contenu. Le gras, en tant que tel, est un concept qui n'appartient pas à HTML mais à la mise en forme. En revanche, pour mettre en avant (utiliser une emphase), il existe des éléments HTML tout indiqués.

+
+ +

Cas spécifique : les abréviations

+ +

En ce qui concerne les abréviations, il est préférable de les identifier séparement grâce à l'élément {{htmlelement("abbr")}} afin que les lecteurs d'écrans puissent les utiliser correctement. Comme pour la définition d'un nouveau terme, une abréviation doit être définie lors de sa première apparition.

+ +
<p>
+  <dfn><abbr>HTML</abbr> (hypertext markup language)</dfn>
+   est un langage de description utilisé pour structurer des documents sur le Web.
+</p>
+ +
+

Note : La spécification HTML met en avant l'attribut title pour expliciter les termes de l'abréviation. Cependant, il reste nécessaire d'utiliser le texte classique pour fournir une explication car le contenu de l'attribut title ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également ce qui est noté dans les spécifications.

+
+ +

Améliorer l'accessibilité

+ +

{{HTMLElement('dfn')}} identifie le terme qui est défini et indique que le paragraphe courant définit le terme. Il y a donc une relation implicite entre l'élément <dfn> et l'élément qui le contient. Si vous souhaitez avoir une relation plus formelle ou que votre définition ne s'étend que sur une ou plusieurs phrases plutôt que sur l'ensemble du paragraphe, vous pouvez utiliser l'attribut aria-discribedby pour associer, formellement, un terme à sa définition :

+ +
<p>
+  <span id="ff">
+    <dfn aria-describedby="ff">Firefox</dfn>
+    est le navigateur web créé et développé par la Fondation Mozilla.
+  </span>
+  Vous pouvez le télécharger sur <a href="http://www.mozilla.org">mozilla.org</a>
+</p>
+ +

Les technologies d'assistance à la navigation pourront tirer parti de cet attribut pour fournir un texte alternatif pour un terme donné. aria-describedby peut être utilisé pour n'importe quelle balise contenant un mot-clé à définir (il n'est pas nécessaire que ce soit <dfn>). aria-describedby utilise un référence à l'{{htmlattrxref('id')}} de l'élément qui contient la description.

+ +

Comment construire une liste de descriptions

+ +

Les listes de descriptions sont des listes de termes associés à leur description (par exemple une liste de définition, des entrées d'un dictionnaire, une FAQ, des paires de clés-valeurs, etc.).

+ +
+

Note : Les listes de descriptions ne doivent pas être utilisées pour retranscrire des dialogues. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici quelques recommandations pour retranscrire un dialogue dans un document web.

+
+ +

Les termes à décrire sont placés dans des éléments {{htmlelement("dt")}} et la description, qui suit immédiatement, est placée dans un ou plusieurs éléments {{htmlelement("dd")}}. Enfin, l'ensemble de la liste est placé au sein d'un élément {{htmlelement("dl")}}.

+ +

Un exemple simple

+ +

Voici un exemple simple qui dresse une liste de descriptions de plats :

+ +
<dl>
+  <dt>jambalaya</dt>
+    <dd>
+      une entrée à base de riz qui contient généralement
+      du poulet, des saucisses, des fruits de mer et des
+      épices
+    </dd>
+
+  <dt>sukiyaki</dt>
+    <dd>
+      une spécialité japonaise à base de fines tranches de
+      viande, de légumes, de nouilles et qui est cuite dans
+      un sauce soja et du saké
+    </dd>
+
+  <dt>chianti</dt>
+    <dd>
+      un vin italien, sec, originaire de Toscane
+    </dd>
+</dl>
+
+ +
+

Note : La structure de base qu'on voit dans cet exemple alterne les termes (<dt>) et leurs descriptions (<dd>). Si deux (ou plusieurs) termes apparaissent les uns à la suite des autres, la description qui suit s'appliquera à tout ces termes. Si deux (ou plusieurs) descriptions se suivent, elles s'appliqueront au dernier terme.

+
+ +

Améliorer l'aspect visuel

+ +

Voici comment un navigateur affichera la liste précédente :

+ +

{{EmbedLiveSample("Un_exemple_simple", 600, 180)}}

+ +

Si vous souhaitez que les termes soient plus visibles, vous pouvez les écrire en gras. Cela ne change rien au contenu, donc ce ne sera pas HTML qui sera utilisé. En revanche, cela modifie la mise en forme et nous allons donc utiliser CSS et plus particulièrement la propriété {{cssxref("font-weight")}} :

+ +
dt {
+  font-weight: bold;
+}
+
+ +

Cela permettra d'obtenir le résultat suivant :

+ +

{{EmbedLiveSample("Comment_construire_une_liste_de_descriptions", 600, 180)}}

+ +

En savoir plus

+ + diff --git a/files/fr/learn/html/howto/index.html b/files/fr/learn/html/howto/index.html deleted file mode 100644 index e5f130e8ca..0000000000 --- a/files/fr/learn/html/howto/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Apprendre à utiliser HTML pour résoudre des problèmes -slug: Learn/HTML/Howto -tags: - - CodingScripting - - HTML -translation_of: Learn/HTML/Howto -original_slug: Apprendre/HTML/Comment ---- -

Une fois les bases acquises, il n'existe pas de voie idéale pour apprendre {{Glossary("HTML")}}. Vous pouvez ensuite progresser à votre rythme, en utilisant les balises qui vous sont utiles. HTML n'est qu'un ensemble de balises que vous pouvez utiliser pour structurer votre document et lui ajouter des fonctionnalités supplémentaires. Dans les articles suivants, nous travaillerons sur différents exemples illustrant comment utiliser HTML pour résoudre des problèmes fréquents qu'on rencontre lorsqu'on développe pour le Web. Si vous avez besoin d'explications détaillées sur une balise HTML donnée, n'hésitez pas à consulter notre référence HTML.

- -

Cas d'utilisation fréquents

- -

HTML permet de résoudre de nombreux problèmes qui se posent lors de la conception de sites web. Il est très probable que vous rencontriez au moins l'un de ces scénarios :

- -

Structure de base

- -

En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec :

- - - -

Sémantique de base pour le texte

- -

Le but de HTML est de fournir des informations sémantiques (c'est-à-dire sur le sens) d'un document et de ce qui le compose. HTML permettra donc de répondre à de nombreuses questions sur le sens du texte qu'on veut utiliser dans un document.

- - -

Les hyperliens

- -

Les {{Glossary("hyperlien", "hyperliens")}} rendent la navigation très simple sur le web, ils peuvent être utilisés de différentes façons :

- - - -

Images et multimédia

- - - -

Script et mise en forme

- -

HTML ne permet que de gérer la structure et le contenu d'un document. Pour régler les aspects de styles, on utilisera du {{glossary("CSS")}}, pour l'aspect interactif et script, on utilisera {{glossary("JavaScript")}}.

- - - -

Intégrer du contenu

- - - -

Problèmes avancés ou rares

- -

Au-delà des briques de bases qu'on peut assembler dans les exemples précédents, HTML reste très riche et offre des fonctionnalités avancées qui permettent de résoudre de nombreux problèmes complexes. Ces articles décrivent certains de ces problèmes, moins fréquents, et expliquent comment les résoudre :

- -

Les formulaires

- -

Les formulaires correspondent à une structure HTML complexe qui permet d'envoyer des données d'une page web vers un serveur web. Nous vous invitons à suivre le guide dédié aux formulaires. Vous pouvez commencer ici :

- - - -

Les informations tabulaires

- -

Certaines informations doivent être organisées en tableaux, sur des colonnes et des lignes. Les tableaux sont une des structures HTML les plus complexes et s'avèrent particulièrement difficiles à maîtriser de A à Z :

- - - -

La représentation de données

- - - -

Interactivité

- - - -

Sémantique avancée pour les éléments textuels

- - - -

Images et multimédia avancés

- - - -

L'internationalisation

- -

HTML n'est pas monolingue. Il existe des outils qui permettent de résoudre les problèmes fréquents qui se posent lorsqu'on internationalise du contenu.

- - \ No newline at end of file diff --git a/files/fr/learn/html/howto/index.md b/files/fr/learn/html/howto/index.md new file mode 100644 index 0000000000..e5f130e8ca --- /dev/null +++ b/files/fr/learn/html/howto/index.md @@ -0,0 +1,137 @@ +--- +title: Apprendre à utiliser HTML pour résoudre des problèmes +slug: Learn/HTML/Howto +tags: + - CodingScripting + - HTML +translation_of: Learn/HTML/Howto +original_slug: Apprendre/HTML/Comment +--- +

Une fois les bases acquises, il n'existe pas de voie idéale pour apprendre {{Glossary("HTML")}}. Vous pouvez ensuite progresser à votre rythme, en utilisant les balises qui vous sont utiles. HTML n'est qu'un ensemble de balises que vous pouvez utiliser pour structurer votre document et lui ajouter des fonctionnalités supplémentaires. Dans les articles suivants, nous travaillerons sur différents exemples illustrant comment utiliser HTML pour résoudre des problèmes fréquents qu'on rencontre lorsqu'on développe pour le Web. Si vous avez besoin d'explications détaillées sur une balise HTML donnée, n'hésitez pas à consulter notre référence HTML.

+ +

Cas d'utilisation fréquents

+ +

HTML permet de résoudre de nombreux problèmes qui se posent lors de la conception de sites web. Il est très probable que vous rencontriez au moins l'un de ces scénarios :

+ +

Structure de base

+ +

En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec :

+ + + +

Sémantique de base pour le texte

+ +

Le but de HTML est de fournir des informations sémantiques (c'est-à-dire sur le sens) d'un document et de ce qui le compose. HTML permettra donc de répondre à de nombreuses questions sur le sens du texte qu'on veut utiliser dans un document.

+ + +

Les hyperliens

+ +

Les {{Glossary("hyperlien", "hyperliens")}} rendent la navigation très simple sur le web, ils peuvent être utilisés de différentes façons :

+ + + +

Images et multimédia

+ + + +

Script et mise en forme

+ +

HTML ne permet que de gérer la structure et le contenu d'un document. Pour régler les aspects de styles, on utilisera du {{glossary("CSS")}}, pour l'aspect interactif et script, on utilisera {{glossary("JavaScript")}}.

+ + + +

Intégrer du contenu

+ + + +

Problèmes avancés ou rares

+ +

Au-delà des briques de bases qu'on peut assembler dans les exemples précédents, HTML reste très riche et offre des fonctionnalités avancées qui permettent de résoudre de nombreux problèmes complexes. Ces articles décrivent certains de ces problèmes, moins fréquents, et expliquent comment les résoudre :

+ +

Les formulaires

+ +

Les formulaires correspondent à une structure HTML complexe qui permet d'envoyer des données d'une page web vers un serveur web. Nous vous invitons à suivre le guide dédié aux formulaires. Vous pouvez commencer ici :

+ + + +

Les informations tabulaires

+ +

Certaines informations doivent être organisées en tableaux, sur des colonnes et des lignes. Les tableaux sont une des structures HTML les plus complexes et s'avèrent particulièrement difficiles à maîtriser de A à Z :

+ + + +

La représentation de données

+ + + +

Interactivité

+ + + +

Sémantique avancée pour les éléments textuels

+ + + +

Images et multimédia avancés

+ + + +

L'internationalisation

+ +

HTML n'est pas monolingue. Il existe des outils qui permettent de résoudre les problèmes fréquents qui se posent lorsqu'on internationalise du contenu.

+ + \ No newline at end of file diff --git a/files/fr/learn/html/howto/use_data_attributes/index.html b/files/fr/learn/html/howto/use_data_attributes/index.html deleted file mode 100644 index f18055985b..0000000000 --- a/files/fr/learn/html/howto/use_data_attributes/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Utiliser les attributs de données -slug: Learn/HTML/Howto/Use_data_attributes -tags: - - Guide - - HTML - - Web -translation_of: Learn/HTML/Howto/Use_data_attributes -original_slug: Apprendre/HTML/Comment/Utiliser_attributs_donnes ---- -
{{LearnSidebar}}
- -

HTML5 est conçu avec le souci de l'extensibilité pour les données qui doivent être associées avec un élément particulier sans qu'on leur donne une signification spécifique. Les attributs data-* nous permettent de stocker des informations supplémentaires sur les éléments sémantiques standard sans avoir recours à des attributs non-standard ni à des propriétés supplémentaires du DOM, ni à {{domxref("Node.setUserData()")}}.

- -

Syntaxe HTML

- -

La syntaxe est simple. Tout attribut d'un élément dont le nom commence par data- est un attribut de données (data attribute). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela :

- -
<article
-  id="voitureelectrique"
-  data-columns="3"
-  data-index-number="12314"
-  data-parent="voitures">
-...
-</article>
- -

Accéder via du code JavaScript

- -

Lire les valeurs de ces attributs avec du JavaScript est également très simple. Vous pourriez utiliser {{domxref("Element.getAttribute", "getAttribute()")}} avec leur nom HTML complet pour les lire, mais le standard les définit d'une manière plus simple : un {{domxref("DOMStringMap")}} peut être lu via une propriété {{domxref("HTMLElement.dataset", "dataset")}}.

- -

Pour obtenir un attribut data avec l'objet dataset, repérez la propriété avec la partie du nom de l'attribut qui suit le préfixe data- (notez que les tirets sont convertis en camelCase).

- -
var article = document.getElementById('voitureelectrique');
-
-article.dataset.columns // "3"
-article.dataset.indexNumber // "12314"
-article.dataset.parent // "voitures"
- -

Chaque propriété est une chaîne et peut être en lecture et écriture. Dans le cas ci-dessus passer le paramètre article.dataset.columns = 5 mettrait l'attribut à "5".

- -

Accéder via du code CSS

- -

Remarquez que, dans la mesure où les attributs data sont de simples attributs HTML, vous pouvez même y accéder par les CSS. Par exemple, pour afficher les données associées à l'article, vous pouvez utiliser des contenus générés en CSS avec la fonction {{cssxref("attr")}} :

- -
article::before {
-  content: attr(data-parent);
-}
- -

Vous pouvez également utiliser les sélecteurs d'attributs en CSS pour modifier les styles en fonction des données :

- -
article[data-columns='3'] {
-  width: 400px;
-}
-article[data-columns='4'] {
-  width: 600px;
-}
- -

Tout cela est visible dans l'exemple JSBin. 

- -

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 où sont utilisés les contenus générés et les transitions CSS (exemple JSBin).

- -

Comme les valeurs des données sont des chaînes, toutes les valeurs doivent être entre guillemets " " sinon le formatage de style sera inopérant.

- -

Problèmes

- -

Ne stockez pas de contenu qui devrait être visible dans les attributs data, car les technologies d'assistance pourraient ne pas y avoir accès. De plus, les moteurs de recherche pourraient ne pas indexer les valeurs des attributs de données. 

- -

Les principaux problèmes à prendre en considération sont le support d'Internet Explorer et la performance. Internet Explorer 11+ prend en charge le standard, mais toutes les versions antérieures  ne prennent pas en charge le dataset. Pour prendre en charge IE 10 et versions inférieures vous avez besoin d'accéder aux attributs data avec {{domxref("Element.getAttribute", "getAttribute()")}}. De plus, la la performance de lecture des attributs de données, au stockage dans des structures de données JavaScript est assez faible. Utiliser un dataset est même plus lent que lire les données avec getAttribute().

- -

Mais ceci dit, pour les métadonnées personnalisées associées aux éléments, c'est une excellente solution.

- -

Avec Firefox 49.0.2 (et peut-être dans les versions antérieures ou ultérieures), les attributs data qui dépassent 1022 attributs ne seront pas lisibles par Javascript (EcmaScript 4).

- -

Voir aussi

- - diff --git a/files/fr/learn/html/howto/use_data_attributes/index.md b/files/fr/learn/html/howto/use_data_attributes/index.md new file mode 100644 index 0000000000..f18055985b --- /dev/null +++ b/files/fr/learn/html/howto/use_data_attributes/index.md @@ -0,0 +1,80 @@ +--- +title: Utiliser les attributs de données +slug: Learn/HTML/Howto/Use_data_attributes +tags: + - Guide + - HTML + - Web +translation_of: Learn/HTML/Howto/Use_data_attributes +original_slug: Apprendre/HTML/Comment/Utiliser_attributs_donnes +--- +
{{LearnSidebar}}
+ +

HTML5 est conçu avec le souci de l'extensibilité pour les données qui doivent être associées avec un élément particulier sans qu'on leur donne une signification spécifique. Les attributs data-* nous permettent de stocker des informations supplémentaires sur les éléments sémantiques standard sans avoir recours à des attributs non-standard ni à des propriétés supplémentaires du DOM, ni à {{domxref("Node.setUserData()")}}.

+ +

Syntaxe HTML

+ +

La syntaxe est simple. Tout attribut d'un élément dont le nom commence par data- est un attribut de données (data attribute). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela :

+ +
<article
+  id="voitureelectrique"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="voitures">
+...
+</article>
+ +

Accéder via du code JavaScript

+ +

Lire les valeurs de ces attributs avec du JavaScript est également très simple. Vous pourriez utiliser {{domxref("Element.getAttribute", "getAttribute()")}} avec leur nom HTML complet pour les lire, mais le standard les définit d'une manière plus simple : un {{domxref("DOMStringMap")}} peut être lu via une propriété {{domxref("HTMLElement.dataset", "dataset")}}.

+ +

Pour obtenir un attribut data avec l'objet dataset, repérez la propriété avec la partie du nom de l'attribut qui suit le préfixe data- (notez que les tirets sont convertis en camelCase).

+ +
var article = document.getElementById('voitureelectrique');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "voitures"
+ +

Chaque propriété est une chaîne et peut être en lecture et écriture. Dans le cas ci-dessus passer le paramètre article.dataset.columns = 5 mettrait l'attribut à "5".

+ +

Accéder via du code CSS

+ +

Remarquez que, dans la mesure où les attributs data sont de simples attributs HTML, vous pouvez même y accéder par les CSS. Par exemple, pour afficher les données associées à l'article, vous pouvez utiliser des contenus générés en CSS avec la fonction {{cssxref("attr")}} :

+ +
article::before {
+  content: attr(data-parent);
+}
+ +

Vous pouvez également utiliser les sélecteurs d'attributs en CSS pour modifier les styles en fonction des données :

+ +
article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}
+ +

Tout cela est visible dans l'exemple JSBin. 

+ +

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 où sont utilisés les contenus générés et les transitions CSS (exemple JSBin).

+ +

Comme les valeurs des données sont des chaînes, toutes les valeurs doivent être entre guillemets " " sinon le formatage de style sera inopérant.

+ +

Problèmes

+ +

Ne stockez pas de contenu qui devrait être visible dans les attributs data, car les technologies d'assistance pourraient ne pas y avoir accès. De plus, les moteurs de recherche pourraient ne pas indexer les valeurs des attributs de données. 

+ +

Les principaux problèmes à prendre en considération sont le support d'Internet Explorer et la performance. Internet Explorer 11+ prend en charge le standard, mais toutes les versions antérieures  ne prennent pas en charge le dataset. Pour prendre en charge IE 10 et versions inférieures vous avez besoin d'accéder aux attributs data avec {{domxref("Element.getAttribute", "getAttribute()")}}. De plus, la la performance de lecture des attributs de données, au stockage dans des structures de données JavaScript est assez faible. Utiliser un dataset est même plus lent que lire les données avec getAttribute().

+ +

Mais ceci dit, pour les métadonnées personnalisées associées aux éléments, c'est une excellente solution.

+ +

Avec Firefox 49.0.2 (et peut-être dans les versions antérieures ou ultérieures), les attributs data qui dépassent 1022 attributs ne seront pas lisibles par Javascript (EcmaScript 4).

+ +

Voir aussi

+ + diff --git a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html deleted file mode 100644 index e57980829e..0000000000 --- a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Utiliser JavaScript au sein d'une page web -slug: Learn/HTML/Howto/Use_JavaScript_within_a_webpage -tags: - - Beginner - - HTML - - JavaScript - - OpenPractices -translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage -original_slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web ---- -

Dans cet article, nous verrons comment améliorer les pages web en ajoutant du code JavaScript dans des documents HTML.

- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Savoir comment utiliser du code JavaScript dans un fichier HTML et apprendre les bonnes pratiques afin que le code JavaScript utilisé soit accessible.
- -

À propos de JavaScript

- -

{{Glossary("JavaScript")}} est un langage de programmation principalement utilisé côté client et qui peut également être utilisé côté serveur. Il permet entre autres de rendre les pages web interactives. JavaScript offre une myriade de possibilités.

- -
-

Note : Dans cet article, nous verrons le code HTML nécessaire pour utiliser du code JavaScript. Si vous souhaitez apprendre JavaScript, vous pouvez démarrer par notre article sur les bases de JavaScript. Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter le Guide JavaScript.

-
- -

Comment déclencher le code JavaScript depuis le document HTML

- -

Dans un navigateur, JavaScript ne fait rien « tout seul ». Il a besoin d'être lancé depuis les pages web HTML. Pour appeler du code JavaScript depuis votre document HTML, vous aurez besoin de l'élément {{htmlelement("script")}}. Il y a deux méthodes pour utiliser script : une qui sert lorsqu'on souhaite utiliser un script contenu dans un fichier tiers et une qui sert lorsqu'on intègre directement le code du script dans la page web.

- -

Faire référence à un script externe

- -

Généralement, un script est écrit dans un fichier .js à part. Pour exécuter un script depuis un fichier dans la page web, il suffira d'utiliser {{HTMLElement ('script')}} avec un attribut src pointant vers le fichier du script en utilisant l'URL du fichier :

- -
<script src="chemin/vers/le/script.js"></script>
- -

Inscrire le code JavaScript dans le document HTML

- -

Il est également possible d'insérer du code JavaScript directement dans la balise <script> sans fournir d'attribut src.

- -
<script>
-window.addEventListener('load', function () {
-  console.log('Cette fonction est exécutée une fois quand la page est chargée.');
-});
-</script>
- -

Cette méthode peut s'avérer pratique quand on n'utilise qu'un code très court. Cela dit, utiliser des fichiers séparés pour stocker le code JavaScript vous permettra :

- - - -

Utiliser les scripts de façon accessible

- -

L'accessibilité est un enjeu majeur du développement logiciel. JavaScript peut rendre un site web plus accessible lorsqu'il est utilisé correctement. Il peut aussi détruire toute trace d'accessibilité s'il est utilisé sans aucune considération. Voici quelques pratiques qui vous permettront de tirer le meilleur parti de JavaScript pour l'accessibilité :

- - - -

En savoir plus

- - diff --git a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md new file mode 100644 index 0000000000..e57980829e --- /dev/null +++ b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md @@ -0,0 +1,98 @@ +--- +title: Utiliser JavaScript au sein d'une page web +slug: Learn/HTML/Howto/Use_JavaScript_within_a_webpage +tags: + - Beginner + - HTML + - JavaScript + - OpenPractices +translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage +original_slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web +--- +

Dans cet article, nous verrons comment améliorer les pages web en ajoutant du code JavaScript dans des documents HTML.

+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Savoir comment utiliser du code JavaScript dans un fichier HTML et apprendre les bonnes pratiques afin que le code JavaScript utilisé soit accessible.
+ +

À propos de JavaScript

+ +

{{Glossary("JavaScript")}} est un langage de programmation principalement utilisé côté client et qui peut également être utilisé côté serveur. Il permet entre autres de rendre les pages web interactives. JavaScript offre une myriade de possibilités.

+ +
+

Note : Dans cet article, nous verrons le code HTML nécessaire pour utiliser du code JavaScript. Si vous souhaitez apprendre JavaScript, vous pouvez démarrer par notre article sur les bases de JavaScript. Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter le Guide JavaScript.

+
+ +

Comment déclencher le code JavaScript depuis le document HTML

+ +

Dans un navigateur, JavaScript ne fait rien « tout seul ». Il a besoin d'être lancé depuis les pages web HTML. Pour appeler du code JavaScript depuis votre document HTML, vous aurez besoin de l'élément {{htmlelement("script")}}. Il y a deux méthodes pour utiliser script : une qui sert lorsqu'on souhaite utiliser un script contenu dans un fichier tiers et une qui sert lorsqu'on intègre directement le code du script dans la page web.

+ +

Faire référence à un script externe

+ +

Généralement, un script est écrit dans un fichier .js à part. Pour exécuter un script depuis un fichier dans la page web, il suffira d'utiliser {{HTMLElement ('script')}} avec un attribut src pointant vers le fichier du script en utilisant l'URL du fichier :

+ +
<script src="chemin/vers/le/script.js"></script>
+ +

Inscrire le code JavaScript dans le document HTML

+ +

Il est également possible d'insérer du code JavaScript directement dans la balise <script> sans fournir d'attribut src.

+ +
<script>
+window.addEventListener('load', function () {
+  console.log('Cette fonction est exécutée une fois quand la page est chargée.');
+});
+</script>
+ +

Cette méthode peut s'avérer pratique quand on n'utilise qu'un code très court. Cela dit, utiliser des fichiers séparés pour stocker le code JavaScript vous permettra :

+ + + +

Utiliser les scripts de façon accessible

+ +

L'accessibilité est un enjeu majeur du développement logiciel. JavaScript peut rendre un site web plus accessible lorsqu'il est utilisé correctement. Il peut aussi détruire toute trace d'accessibilité s'il est utilisé sans aucune considération. Voici quelques pratiques qui vous permettront de tirer le meilleur parti de JavaScript pour l'accessibilité :

+ + + +

En savoir plus

+ + diff --git a/files/fr/learn/html/index.html b/files/fr/learn/html/index.html deleted file mode 100644 index 95e31501ca..0000000000 --- a/files/fr/learn/html/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 'Apprendre le HTML : guides et didacticiels' -slug: Learn/HTML -tags: - - Apprentissage - - Débutant - - Guide - - HTML - - Introduction - - Rubrique -translation_of: Learn/HTML -original_slug: Apprendre/HTML ---- -
{{LearnSidebar}}
- -
-
-

Pour créer des sites Web, vous devez connaître le {{Glossary('HTML')}} — technique fondamentale utilisée pour définir la structure d'une page Web. HTML est utilisé pour dire si votre contenu web doit être reconnu en tant que paragraphe, liste, en-tête, lien, image, lecteur multimédia, formulaire ou l'un des nombreux autres éléments disponibles ou même un nouvel élément à définir par vous même.

-
-
- -

Parcours d'apprentissage

- - - -

L'idéal serait que vous débutiez votre parcours d'apprentissage par l'étude du HTML. Commencez par lire Introduction au HTML. Vous pouvez ensuite passer à l'étude de sujets plus avancés comme :

- - - -

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, et comprendre comment créer et gérer les fichiers,comme détaillé dans Gérer les fichiers — ces deux articles font partie de notre module Commencer avec le Web dédié aux débutants.

- -

Il est recommandé de passer par Commencer avec le Web avant d'étudier ce sujet, mais ce n'est pas absolument nécessaire ; une grande partie de ce qui est couvert dans l'article Les bases du HTML est également couvert dans notre module Introduction au HTML, quoique beaucoup plus en détail.

- -

Modules

- -

Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les parcourir. Vous devriez commencer par le premier.

- -
-
Introduction au HTML
-
Ce module prépare le terrain, en vous familiarisant avec les concepts importants et la syntaxe, en examinant comment appliquer le HTML au texte, comment créer des hyperliens et comment utiliser le HTML pour structurer une page Web.
-
Multimedia et intégration
-
Ce module explore comment utiliser le HTML pour incorporer du multimédia dans vos pages Web, y compris les diverses façons d'inclure des images, et comment intégrer de la vidéo, de l'audio et même d'autres pages Web entières.
-
Tableaux HTML
-
Représenter des sous forme de tableaux sur une page Web de manière compréhensible, {{Glossary("Accessibilité", "accessible")}}} peut être un défi. Ce module porte sur le balisage basique des tableaux, ainsi que des fonctions plus complexes telles que l'implémentation de légendes et de résumés.
-
Formulaire HTML
-
Les formulaires sont une partie très importante du Web — ils fournissent la grande partie des fonctionnalités dont vous avez besoin pour interagir avec les sites Web, par exemple enregistrement et connexion, envoi de commentaires, achat de produits et plus encore. Ce module vous permet de commencer à créer la partie des formulaires côté client.
-
- -

Résolution de problèmes courants en HTML

- -

Utilisation du HTML pour la solution de problèmes courants fournit des liens vers des contenus expliquant comment utiliser le HTML pour résoudre les problèmes très courants lors de la création d'une page Web : titrer, ajouter des images ou des vidéos, mettre en évidence du contenu, créer un formulaire de base, etc.

- -

Voir aussi

- -
-
HTML (HyperText Markup Language) sur MDN
-
Le portail de la documentation du HTML sur MDN, comprenant les références détaillées des éléments et des attributs — si vous voulez savoir, par exemple, quels sont les attributs d'un élément ou quelles valeurs peut prendre un attributif, c'est le bon endroit pour débuter.
-
\ No newline at end of file diff --git a/files/fr/learn/html/index.md b/files/fr/learn/html/index.md new file mode 100644 index 0000000000..95e31501ca --- /dev/null +++ b/files/fr/learn/html/index.md @@ -0,0 +1,61 @@ +--- +title: 'Apprendre le HTML : guides et didacticiels' +slug: Learn/HTML +tags: + - Apprentissage + - Débutant + - Guide + - HTML + - Introduction + - Rubrique +translation_of: Learn/HTML +original_slug: Apprendre/HTML +--- +
{{LearnSidebar}}
+ +
+
+

Pour créer des sites Web, vous devez connaître le {{Glossary('HTML')}} — technique fondamentale utilisée pour définir la structure d'une page Web. HTML est utilisé pour dire si votre contenu web doit être reconnu en tant que paragraphe, liste, en-tête, lien, image, lecteur multimédia, formulaire ou l'un des nombreux autres éléments disponibles ou même un nouvel élément à définir par vous même.

+
+
+ +

Parcours d'apprentissage

+ + + +

L'idéal serait que vous débutiez votre parcours d'apprentissage par l'étude du HTML. Commencez par lire Introduction au HTML. Vous pouvez ensuite passer à l'étude de sujets plus avancés comme :

+ + + +

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, et comprendre comment créer et gérer les fichiers,comme détaillé dans Gérer les fichiers — ces deux articles font partie de notre module Commencer avec le Web dédié aux débutants.

+ +

Il est recommandé de passer par Commencer avec le Web avant d'étudier ce sujet, mais ce n'est pas absolument nécessaire ; une grande partie de ce qui est couvert dans l'article Les bases du HTML est également couvert dans notre module Introduction au HTML, quoique beaucoup plus en détail.

+ +

Modules

+ +

Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les parcourir. Vous devriez commencer par le premier.

+ +
+
Introduction au HTML
+
Ce module prépare le terrain, en vous familiarisant avec les concepts importants et la syntaxe, en examinant comment appliquer le HTML au texte, comment créer des hyperliens et comment utiliser le HTML pour structurer une page Web.
+
Multimedia et intégration
+
Ce module explore comment utiliser le HTML pour incorporer du multimédia dans vos pages Web, y compris les diverses façons d'inclure des images, et comment intégrer de la vidéo, de l'audio et même d'autres pages Web entières.
+
Tableaux HTML
+
Représenter des sous forme de tableaux sur une page Web de manière compréhensible, {{Glossary("Accessibilité", "accessible")}}} peut être un défi. Ce module porte sur le balisage basique des tableaux, ainsi que des fonctions plus complexes telles que l'implémentation de légendes et de résumés.
+
Formulaire HTML
+
Les formulaires sont une partie très importante du Web — ils fournissent la grande partie des fonctionnalités dont vous avez besoin pour interagir avec les sites Web, par exemple enregistrement et connexion, envoi de commentaires, achat de produits et plus encore. Ce module vous permet de commencer à créer la partie des formulaires côté client.
+
+ +

Résolution de problèmes courants en HTML

+ +

Utilisation du HTML pour la solution de problèmes courants fournit des liens vers des contenus expliquant comment utiliser le HTML pour résoudre les problèmes très courants lors de la création d'une page Web : titrer, ajouter des images ou des vidéos, mettre en évidence du contenu, créer un formulaire de base, etc.

+ +

Voir aussi

+ +
+
HTML (HyperText Markup Language) sur MDN
+
Le portail de la documentation du HTML sur MDN, comprenant les références détaillées des éléments et des attributs — si vous voulez savoir, par exemple, quels sont les attributs d'un élément ou quelles valeurs peut prendre un attributif, c'est le bon endroit pour débuter.
+
\ No newline at end of file diff --git a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html deleted file mode 100644 index d3602ccd19..0000000000 --- a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ /dev/null @@ -1,673 +0,0 @@ ---- -title: Formatage avancé du texte -slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting -tags: - - Apprendre - - Citation - - Codage - - Débutant - - Guide - - HTML - - Texte - - abréviation - - listes descriptives - - sémantique -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting -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. Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.

- - - - - - - - - - - - -
Prérequis :Être familiarisé avec les bases du HTML, traitées à la page Commencer avec le HTML et du formatage de texte HTML, décrit dans les Fondamentaux du texte HTML.
Objectifs :Apprendre comment utiliser des éléments HTML moins connus pour baliser des fonctions sémantiques avancées.
- -

Listes descriptives

- -

Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser des listes simples en HTML, mais sans mentionner le troisième type de liste que vous rencontrerez à l'occasion — les listes descriptives. L'objectif de ces listes est de marquer une série d'éléments et leurs descriptions associées, comme termes et définition, ou bien questions et réponse. Voici l'exemple d'un ensemble de termes et leur définitions :

- -
soliloque
-Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).
-monologue
-Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.
-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")}} (description term) et chaque description d'un élément {{htmlelement("dd")}} (description definition). Terminons en balisant l'exemple ci‑dessus :

- -
<dl>
-  <dt>soliloque</dt>
-  <dd>Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).</dd>
-  <dt>monologue</dt>
-  <dd>Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.</dd>
-  <dt>aparté</dt>
-  <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd>
-</dl>
- -

Les styles par défaut du navigateur vont afficher les listes de définition avec des descriptions indentées par rapport aux termes. les styles de MDN suivent de très près cette convention, mais soulignent davantage les définitions en les mettant en gras.

- -
-
soliloque
-
Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).
-
monologue
-
Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.
-
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.
-
- -

Notez qu'il est autorisé d'avoir un terme seul avec de multiples descriptions, par exemple :

- -
-<dl>
- <dt>aparté</dt>
- <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd>
- <dd>En écriture, une partie de contenu relative au sujet en cours, mais qui, ne s'inscrivant pas dans le flux principal du contenu, est donc présentée à part (souvent dans un encadré sur le côté).</dd>
-</dl>
-
- -

Apprentissage interactif : balisez une série de définitions

- -

Il est temps de se faire la main sur les listes de définitions ; ajoutez les élements au texte brut dans le champ Code modifiable pour que faire apparaître une liste de définitions dans la Zone de rendu. Vous pouvez essayer en utilisant vos propes termes et définitions si vous le souhaitez.

- -

Si vous faites une erreur, vous pouvez toujours réinitialiser grace au bouton Réinitialiser. Si vous êtes vraiment bloqué, cliquez sur Voir la solution.

- - - - - - - - - - - -

{{ EmbedLiveSample('Apprentissage_interactif_balisez_une_série_de_définitions', 700, 350, "", "", "hide-codepen-jsfiddle") }}

- -

Citations

- -

Le HTML possède également des fonctionnalités pour marquer les citations. Le choix de l'élément à utiliser dépend du type de citation : en ligne ou par bloc.

- -

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

- -
<p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc
-de citation</em>) indique que le bloc de texte inclus est une citation étendue.</p>
- -

Exemple de bloc de citation

-

Pour le changer en bloc de citation, on ferait simplement ceci :

- -
<blockquote cite="/fr/docs/Web/HTML/Element/blockquote">
-  <p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>)
-     indique que le bloc de texte inclus est une citation étendue.</p>
-</blockquote>
- -

Le navigateur l'affichera par défaut sous forme d'un paragraphe indenté, avec l'indication qu'il s'agit d'une citation ; MDN agit de même et y ajoute un style personnalisé :

-

{{EmbedLiveSample("Blocs_de_citation")}}

- -

Citations en ligne

- -

Les citations en ligne fonctionnent exactement de la même manière, sauf que l'on utilise l'élément {{htmlelement("q")}}. Par exemple, le balisage suivant contient une citation de la page MDN <q> :

- -

Exemple de citation en ligne

- -
<p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu
-pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p>
- -

Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci :

- -

{{EmbedLiveSample("Exemple_de_citation_en_ligne")}}

- -

Citations

- -

Le contenu de l'attribut {{htmlattrxref("cite","blockquote")}} semble utile, malheureusement les navigateurs, lecteurs d'écran, etc. n'en font pas grand chose. Il n'y a pas possibilité de faire afficher différemment au navigateur le contenu d'un cite sans utiliser votre propre JavaScript ou style CSS. Si vous souhaitez rendre disponible la source de la citation sur votre page, la meilleure façon de le faire est d'inclure l'élément {{htmlelement("cite")}} à coté de l'élément citation. Cet élément est vraiment destiné à contenir le nom de la source de la citation — c'est-à-dire le nom du livre ou de la personne auteur de la citation — mais il n'y a aucune raison pour laquelle vous n'avez pas pu lier le texte à l'intérieur de <cite> à la source de la citation d'une manière ou d'une autre :

- -
<p>Selon la <a href="/fr/docs/Web/HTML/Element/blockquote">
-<cite>page blockquote du MDN</cite></a>:
-</p>
-
-<p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>)
-   indique que le bloc de texte inclus est une citation étendue.</p>
-
-<p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu
-   pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p>
- — <a href="/fr/docs/Web/HTML/Element/q">
-<cite>page q du MDN</cite></a>.</p>
- -

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.

- - - -

Apprentissage actif : Qui a dit quoi ?

- -

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. -
  2. une partie du troisième paragraphe soit balisée en tant que citation en ligne, comprenant aussi un attribut cite.
    3. -
  3. vous incorporiez un élément <cite> pour chaque citation
    4. -
- -

L'origine des citations dont vous aurez besoin se trouvent aux pages :

- - - -

Si vous faites une erreur, vous pourrez toujours tout réinitialiser en pressant le bouton de même nom. Si vous êtes vraiment bloqué, pressez le bouton Voir la solution pour obtenir la réponse.

- - - - - - - -

{{ EmbedLiveSample('Apprentissage_actif_Qui_a_dit_quoi', 700, 450, "", "", "hide-codepen-jsfiddle") }}

- -

Abréviations

- -

Un autre élément assez commun rencontré en se promenant dans le Web est l'élément {{htmlelement("abbr")}}}}. Il s'utilise pour entourer une abréviation ou un acronyme et donner le développement complet du terme (inclus dans un attribut {{htmlattrxref("title")}}}. Voyons quelques exemples :

- -
<p>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</p>
-
-<p>Je pense que le <abbr title="Révérend">R.</abbr> Green l'a fait dans la cuisine avec une tronçonneuse.</p>
- - - -

Leur affichage correspond aux deux phrases suivantes (le développement de l'abréviation apparaît dans une infobulle quand le pointeur de souris passe sur le terme) :

- -

Nous utilisons l'HTML pour structurer nos documents web.

- -

Je pense que le R. Green l'a fait dans la cuisine avec une tronçonneuse.

- -
-

Note : Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que <abbr>, destiné spécifiquement aux acronymes plutôt qu'aux abréviations. Il est cependant tombé en désuétude — il n'était pas aussi bien pris en charge dans les navigateurs que <abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser <abbr> à la place.

-
- -

Apprentissage actif : marquer une abréviation

- -

Pour cet apprentissage actif, nous aimerions que vous balisiez simplement une abréviation. Vous pouvez utiliser notre élément ci-après ou le remplacer par un de votre cru.

- - - - - - - -
{{ EmbedLiveSample('Apprentissage_actif_marquer_une_abréviation', 700, 300, "", "", "hide-codepen-jsfiddle") }}
- -

Balisage des détails de contact

- -

HTML possède l'élément {{htmlelement("address")}} pour baliser des détails de contact. Enveloppez simplement vos coordonnées, par exemple :

- -
<address>
-  <p>Chris Mills, Manchester, The Grim North, UK</p>
-</address>
- -

Une chose à retenir cependant : l'élément {{htmlelement("address")}} est destiné à marquer les coordonnées de la personne ayant écrit le document HTML et non pas n'importe quelle adresse. Donc, ce qui précède ne serait acceptable que si Chris avait écrit le document sur lequel ce balisage apparaît. Notez que serait également acceptable ce qui suit :

- -
<address>
-  <p>Page écrite par <a href="../authors/chris-mills/">Chris Mills</a>.</p>
-</address>
- -

Exposants et indices

- -

Vous devrez parfois utiliser exposants et indices pour marquer des éléments comme dates, formules chimiques et équations mathématiques de façon à ce qu'ils aient une bonne signification. On effectue ce travail à l'aide des éléments {{htmlelement("sup")}} et {{htmlelement("sub")}}. Par exemple :

- -
<p>Ma date de naissance est le 1<sup>er</sup> mai 2001.</p>
-<p>La formule chimique de la caféine est C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
-<p>Si x<sup>2</sup> égale 9, x doit valoir 3 ou -3.</p>
- -

Les sorties produites par ces lignes de code se présentent comme suit :

- -

Ma date de naissance est le 1er mai 2001.

- -

La formule chimique de la caféine est C8H10N4O2.

- -

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 :

- - - -

Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple other-semantics.html) :

- -
<pre><code>var para = document.querySelector('p');
-
-para.onclick = function() {
-  alert('Owww, arrête de me toucher !');
-}</code></pre>
-
-<p>N'utilisez pas d'éléments de présentation comme <code>&lt;font&gt;</code> et <code>&lt;center&gt;</code>.</p>
-
-<p>Dans l'exemple JavaScript ci‑dessus, <var>para</var> représente un élément paragraphe.</p>
-
-
-<p>Sélectionnez la totalité du texte avec <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
-
-<pre>$ <kbd>ping mozilla.org</kbd>
-<samp>PING mozilla.org (63.245.208.195) 56(84) bytes of data.
-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 :

- -

{{ EmbedLiveSample('Représentation_du_code_informatique','100%',300) }}

- -

Balisage des heures et dates

- -

HTML fournit également l'élément {{htmlelement("time")}}} pour marquer les heures et les dates dans un format lisible par machine. Par exemple :

- -
<time datetime="2016-01-20">20 janvier 2016</time>
- -

En quoi est-ce utile ? Eh bien, il y a beaucoup de façons différentes dont les humains écrivent les dates. La date ci-dessus pourrait s'écrire comme suit :

- - - -

Mais ces différents formes ne sont pas facilement reconnaissables par les ordinateurs — que se passerait‑il si vous vouliez saisir automatiquement les dates de tous les événements dans une page et les insérer dans un calendrier ? L'élément {{htmlelement("time")}}} vous permettra d'attacher un horodatage non ambigu lisible par machine à cette fin.

- -

L'exemple de base ci-dessus ne fournit qu'une simple date lisible par machine, mais il y a beaucoup d'autres options possibles, par exemple :

- -
<!-- Simple date standard -->
-<time datetime="2016-01-20">20 janvier 2016</time>
-<!-- Juste l'année et le mois -->
-<time datetime="2016-01">janvier 2016</time>
-<!-- Juste le mois et les jour -->
-<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 ! -->
-<time datetime="19:30:01.856">19h30m1,856s</time>
-<!-- Date et heure -->
-<time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time>
-<!-- Date et heure avec décalage de fuseau horaire -->
-<time datetime="2016-01-20T19:30+01:00">19h30, le 20 janvier 2016 corespond à 20h30 en France</time>
-<!-- Appel d'un numéro de semains donné -->
-<time datetime="2016-W04">La 4e semaine de 2016</time>
- -

Résumé

- - - -

Nous voici arrivés à la fin de notre étude de la sémantique des textes en HTML. N'oubliez pas que ce qui précède ne constitue pas la liste exhaustive des éléments texte en HTML — nous avons essayé de couvrir essentiellement les plus courants dans la nature ou du moins ceux que nous avons pensé intéressants. Pour en voir plus, jetez un coup d'oeil à notre Référence des éléments HTML (la section sémantique de texte en ligne serait un bon point de départ.) Dans l'article suivant, nous examinerons les éléments HTML à utiliser pour structurer les diverses parties d'un document HTML.

- -

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}

- -

Dans ce module

- - 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 new file mode 100644 index 0000000000..d3602ccd19 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md @@ -0,0 +1,673 @@ +--- +title: Formatage avancé du texte +slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +tags: + - Apprendre + - Citation + - Codage + - Débutant + - Guide + - HTML + - Texte + - abréviation + - listes descriptives + - sémantique +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +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. Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.

+ + + + + + + + + + + + +
Prérequis :Être familiarisé avec les bases du HTML, traitées à la page Commencer avec le HTML et du formatage de texte HTML, décrit dans les Fondamentaux du texte HTML.
Objectifs :Apprendre comment utiliser des éléments HTML moins connus pour baliser des fonctions sémantiques avancées.
+ +

Listes descriptives

+ +

Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser des listes simples en HTML, mais sans mentionner le troisième type de liste que vous rencontrerez à l'occasion — les listes descriptives. L'objectif de ces listes est de marquer une série d'éléments et leurs descriptions associées, comme termes et définition, ou bien questions et réponse. Voici l'exemple d'un ensemble de termes et leur définitions :

+ +
soliloque
+Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).
+monologue
+Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.
+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")}} (description term) et chaque description d'un élément {{htmlelement("dd")}} (description definition). Terminons en balisant l'exemple ci‑dessus :

+ +
<dl>
+  <dt>soliloque</dt>
+  <dd>Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).</dd>
+  <dt>monologue</dt>
+  <dd>Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.</dd>
+  <dt>aparté</dt>
+  <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd>
+</dl>
+ +

Les styles par défaut du navigateur vont afficher les listes de définition avec des descriptions indentées par rapport aux termes. les styles de MDN suivent de très près cette convention, mais soulignent davantage les définitions en les mettant en gras.

+ +
+
soliloque
+
Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).
+
monologue
+
Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.
+
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.
+
+ +

Notez qu'il est autorisé d'avoir un terme seul avec de multiples descriptions, par exemple :

+ +
+<dl>
+ <dt>aparté</dt>
+ <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd>
+ <dd>En écriture, une partie de contenu relative au sujet en cours, mais qui, ne s'inscrivant pas dans le flux principal du contenu, est donc présentée à part (souvent dans un encadré sur le côté).</dd>
+</dl>
+
+ +

Apprentissage interactif : balisez une série de définitions

+ +

Il est temps de se faire la main sur les listes de définitions ; ajoutez les élements au texte brut dans le champ Code modifiable pour que faire apparaître une liste de définitions dans la Zone de rendu. Vous pouvez essayer en utilisant vos propes termes et définitions si vous le souhaitez.

+ +

Si vous faites une erreur, vous pouvez toujours réinitialiser grace au bouton Réinitialiser. Si vous êtes vraiment bloqué, cliquez sur Voir la solution.

+ + + + + + + + + + + +

{{ EmbedLiveSample('Apprentissage_interactif_balisez_une_série_de_définitions', 700, 350, "", "", "hide-codepen-jsfiddle") }}

+ +

Citations

+ +

Le HTML possède également des fonctionnalités pour marquer les citations. Le choix de l'élément à utiliser dépend du type de citation : en ligne ou par bloc.

+ +

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

+ +
<p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc
+de citation</em>) indique que le bloc de texte inclus est une citation étendue.</p>
+ +

Exemple de bloc de citation

+

Pour le changer en bloc de citation, on ferait simplement ceci :

+ +
<blockquote cite="/fr/docs/Web/HTML/Element/blockquote">
+  <p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>)
+     indique que le bloc de texte inclus est une citation étendue.</p>
+</blockquote>
+ +

Le navigateur l'affichera par défaut sous forme d'un paragraphe indenté, avec l'indication qu'il s'agit d'une citation ; MDN agit de même et y ajoute un style personnalisé :

+

{{EmbedLiveSample("Blocs_de_citation")}}

+ +

Citations en ligne

+ +

Les citations en ligne fonctionnent exactement de la même manière, sauf que l'on utilise l'élément {{htmlelement("q")}}. Par exemple, le balisage suivant contient une citation de la page MDN <q> :

+ +

Exemple de citation en ligne

+ +
<p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu
+pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p>
+ +

Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci :

+ +

{{EmbedLiveSample("Exemple_de_citation_en_ligne")}}

+ +

Citations

+ +

Le contenu de l'attribut {{htmlattrxref("cite","blockquote")}} semble utile, malheureusement les navigateurs, lecteurs d'écran, etc. n'en font pas grand chose. Il n'y a pas possibilité de faire afficher différemment au navigateur le contenu d'un cite sans utiliser votre propre JavaScript ou style CSS. Si vous souhaitez rendre disponible la source de la citation sur votre page, la meilleure façon de le faire est d'inclure l'élément {{htmlelement("cite")}} à coté de l'élément citation. Cet élément est vraiment destiné à contenir le nom de la source de la citation — c'est-à-dire le nom du livre ou de la personne auteur de la citation — mais il n'y a aucune raison pour laquelle vous n'avez pas pu lier le texte à l'intérieur de <cite> à la source de la citation d'une manière ou d'une autre :

+ +
<p>Selon la <a href="/fr/docs/Web/HTML/Element/blockquote">
+<cite>page blockquote du MDN</cite></a>:
+</p>
+
+<p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>)
+   indique que le bloc de texte inclus est une citation étendue.</p>
+
+<p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu
+   pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p>
+ — <a href="/fr/docs/Web/HTML/Element/q">
+<cite>page q du MDN</cite></a>.</p>
+ +

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.

+ + + +

Apprentissage actif : Qui a dit quoi ?

+ +

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. +
  2. une partie du troisième paragraphe soit balisée en tant que citation en ligne, comprenant aussi un attribut cite.
    3. +
  3. vous incorporiez un élément <cite> pour chaque citation
    4. +
+ +

L'origine des citations dont vous aurez besoin se trouvent aux pages :

+ + + +

Si vous faites une erreur, vous pourrez toujours tout réinitialiser en pressant le bouton de même nom. Si vous êtes vraiment bloqué, pressez le bouton Voir la solution pour obtenir la réponse.

+ + + + + + + +

{{ EmbedLiveSample('Apprentissage_actif_Qui_a_dit_quoi', 700, 450, "", "", "hide-codepen-jsfiddle") }}

+ +

Abréviations

+ +

Un autre élément assez commun rencontré en se promenant dans le Web est l'élément {{htmlelement("abbr")}}}}. Il s'utilise pour entourer une abréviation ou un acronyme et donner le développement complet du terme (inclus dans un attribut {{htmlattrxref("title")}}}. Voyons quelques exemples :

+ +
<p>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</p>
+
+<p>Je pense que le <abbr title="Révérend">R.</abbr> Green l'a fait dans la cuisine avec une tronçonneuse.</p>
+ + + +

Leur affichage correspond aux deux phrases suivantes (le développement de l'abréviation apparaît dans une infobulle quand le pointeur de souris passe sur le terme) :

+ +

Nous utilisons l'HTML pour structurer nos documents web.

+ +

Je pense que le R. Green l'a fait dans la cuisine avec une tronçonneuse.

+ +
+

Note : Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que <abbr>, destiné spécifiquement aux acronymes plutôt qu'aux abréviations. Il est cependant tombé en désuétude — il n'était pas aussi bien pris en charge dans les navigateurs que <abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser <abbr> à la place.

+
+ +

Apprentissage actif : marquer une abréviation

+ +

Pour cet apprentissage actif, nous aimerions que vous balisiez simplement une abréviation. Vous pouvez utiliser notre élément ci-après ou le remplacer par un de votre cru.

+ + + + + + + +
{{ EmbedLiveSample('Apprentissage_actif_marquer_une_abréviation', 700, 300, "", "", "hide-codepen-jsfiddle") }}
+ +

Balisage des détails de contact

+ +

HTML possède l'élément {{htmlelement("address")}} pour baliser des détails de contact. Enveloppez simplement vos coordonnées, par exemple :

+ +
<address>
+  <p>Chris Mills, Manchester, The Grim North, UK</p>
+</address>
+ +

Une chose à retenir cependant : l'élément {{htmlelement("address")}} est destiné à marquer les coordonnées de la personne ayant écrit le document HTML et non pas n'importe quelle adresse. Donc, ce qui précède ne serait acceptable que si Chris avait écrit le document sur lequel ce balisage apparaît. Notez que serait également acceptable ce qui suit :

+ +
<address>
+  <p>Page écrite par <a href="../authors/chris-mills/">Chris Mills</a>.</p>
+</address>
+ +

Exposants et indices

+ +

Vous devrez parfois utiliser exposants et indices pour marquer des éléments comme dates, formules chimiques et équations mathématiques de façon à ce qu'ils aient une bonne signification. On effectue ce travail à l'aide des éléments {{htmlelement("sup")}} et {{htmlelement("sub")}}. Par exemple :

+ +
<p>Ma date de naissance est le 1<sup>er</sup> mai 2001.</p>
+<p>La formule chimique de la caféine est C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+<p>Si x<sup>2</sup> égale 9, x doit valoir 3 ou -3.</p>
+ +

Les sorties produites par ces lignes de code se présentent comme suit :

+ +

Ma date de naissance est le 1er mai 2001.

+ +

La formule chimique de la caféine est C8H10N4O2.

+ +

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 :

+ + + +

Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple other-semantics.html) :

+ +
<pre><code>var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('Owww, arrête de me toucher !');
+}</code></pre>
+
+<p>N'utilisez pas d'éléments de présentation comme <code>&lt;font&gt;</code> et <code>&lt;center&gt;</code>.</p>
+
+<p>Dans l'exemple JavaScript ci‑dessus, <var>para</var> représente un élément paragraphe.</p>
+
+
+<p>Sélectionnez la totalité du texte avec <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
+
+<pre>$ <kbd>ping mozilla.org</kbd>
+<samp>PING mozilla.org (63.245.208.195) 56(84) bytes of data.
+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 :

+ +

{{ EmbedLiveSample('Représentation_du_code_informatique','100%',300) }}

+ +

Balisage des heures et dates

+ +

HTML fournit également l'élément {{htmlelement("time")}}} pour marquer les heures et les dates dans un format lisible par machine. Par exemple :

+ +
<time datetime="2016-01-20">20 janvier 2016</time>
+ +

En quoi est-ce utile ? Eh bien, il y a beaucoup de façons différentes dont les humains écrivent les dates. La date ci-dessus pourrait s'écrire comme suit :

+ + + +

Mais ces différents formes ne sont pas facilement reconnaissables par les ordinateurs — que se passerait‑il si vous vouliez saisir automatiquement les dates de tous les événements dans une page et les insérer dans un calendrier ? L'élément {{htmlelement("time")}}} vous permettra d'attacher un horodatage non ambigu lisible par machine à cette fin.

+ +

L'exemple de base ci-dessus ne fournit qu'une simple date lisible par machine, mais il y a beaucoup d'autres options possibles, par exemple :

+ +
<!-- Simple date standard -->
+<time datetime="2016-01-20">20 janvier 2016</time>
+<!-- Juste l'année et le mois -->
+<time datetime="2016-01">janvier 2016</time>
+<!-- Juste le mois et les jour -->
+<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 ! -->
+<time datetime="19:30:01.856">19h30m1,856s</time>
+<!-- Date et heure -->
+<time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time>
+<!-- Date et heure avec décalage de fuseau horaire -->
+<time datetime="2016-01-20T19:30+01:00">19h30, le 20 janvier 2016 corespond à 20h30 en France</time>
+<!-- Appel d'un numéro de semains donné -->
+<time datetime="2016-W04">La 4e semaine de 2016</time>
+ +

Résumé

+ + + +

Nous voici arrivés à la fin de notre étude de la sémantique des textes en HTML. N'oubliez pas que ce qui précède ne constitue pas la liste exhaustive des éléments texte en HTML — nous avons essayé de couvrir essentiellement les plus courants dans la nature ou du moins ceux que nous avons pensé intéressants. Pour en voir plus, jetez un coup d'oeil à notre Référence des éléments HTML (la section sémantique de texte en ligne serait un bon point de départ.) Dans l'article suivant, nous examinerons les éléments HTML à utiliser pour structurer les diverses parties d'un document HTML.

+ +

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html deleted file mode 100644 index abaeb6d167..0000000000 --- a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ /dev/null @@ -1,334 +0,0 @@ ---- -title: Création d'hyperliens -slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks -tags: - - Apprendre - - Codage - - Débutant - - Guide - - HTML - - Liens - - Title - - URL - - absolu - - hyperliens - - relatif -translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks -original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web une toile. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens.

- - - - - - - - - - - - -
Prérequis :Être familiarisé avec les bases du HTML, traitées à la page Commencer avec le HTML et du formatage de texte HTML, décrit dans les Fondamentaux du texte HTML.
Objectif :Apprendre à implémenter un hyperlien efficacement, et à relier de multiples fichiers ensemble.
- -

Qu'est-ce un hyperlien ?

- -

Les hyperliens sont l'une des plus passionnantes innovations que le web a à offrir. De fait, ils ont été une fonctionnalité du Web depuis le tout début, mais ils sont ce qui fait du Web une toile — ils nous permettent de lier nos documents à n'importe quel autre document (ou autre ressource) voulu ; nous pouvons faire des liens vers des parties précises de documents et rendre des applications disponibles à une simple adresse web (contrairement aux applications natives, qui doivent être installées et tout le travail). À peu près tout contenu web peut être converti en lien, de sorte que cliqué (ou activé autrement), il dirigera le navigateur vers une autre adresse web ({{glossary("URL")}}).

- -
-

Note : Une URL peut pointer vers des fichiers HTML, des fichiers textes, des images, des documents textuels, des fichiers vidéo ou audio et tout ce qui peut exister sur le Web. Si le navigateur Web ne sait pas comment afficher ou gérer un fichier, il vous demande si vous voulez ouvrir le fichier (dans ce cas, la responsabilité de l'ouverture et de la gestion du fichier incombe à l'application native adéquate sur l'appareil) ou bien télécharger le fichier (auquel cas, vous pouvez essayer de vous en occuper plus tard).

-
- -

La page d'accueil de la BBC, par exemple, contient un nombre important de liens pour pointer, non seulement vers de multiples articles d'actualité, mais encore vers d'autres zones du site (fonctionnalité de navigation) , des pages d'inscription/de connexion (outils utilisateur) et plus encore.

- -

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

- -

Anatomie d'un lien

- -

Un lien élémentaire se crée en intégrant le texte (ou tout autre contenu, cf. {{anch("Liens de niveau bloc")}}) que vous voulez transformer en lien dans un élément {{htmlelement("a")}} et en lui affectant un attribut {{htmlattrxref("href", "a")}} (également connu comme étant une Hypertext Reference) contenant l'adresse web vers laquelle vous voulez que le lien pointe.

- -
<p>Je suis en train de créer un lien à
-<a href="https://www.mozilla.org/fr/">la page d'accueil Mozilla</a>.
-</p>
- -

qui donne le résultat suivant :

- -

Je suis en train de créer un lien à la page d'accueil de Mozilla.

- -

Ajouter des informations d'assistance avec l'attribut title

- -

L'autre attribut qu'il est possible d'ajouter à un lien est title ; il est destiné à contenir des informations utiles supplémentaires à propos du lien, comme le type d'informations contenes dans la page ou ce qu'il faut savoir. Par exemple :

- -
<p>Je suis en train de créer un lien à
-<a href="https://www.mozilla.org/fr/"
-   title="Le meilleur endroit pour trouver plus d'informations sur la
-  mission de Mozilla et la manière de contribuer">la page d'accueil Mozilla</a>.
-</p>
- -

Voici le résultat (le contenu de title apparaît dans une info-bulle quand le pointeur de souris passe sur le lien) :

- -

Je suis en train de créer un lien vers la page d'accueil de Mozilla

- -
-

Note : le title d'un lien n'est révélé que lors du survol de la souris, ce qui signifie que les personnes utilisant les commandes clavier pour naviguer dans les pages web auront des difficultés à accéder aux informations de title. Si une information de title est vraiment importante pour l'utilisation d'une page, alors vous devez la présenter de manière accessible à tout utilisateur, par exemple, en la mettant dans le texte normal.

-
- -

Apprentissage actif : création de votre propre exemple de lien

- -

C'est l'heure de l'apprentissage actif : veuillez créer un document HTML avec un éditeur de code local (notre fichier modèle index.html fera parfaitement l'affaire).

- - - -

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 . Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises <a></a>.

- -
<a href="https://www.mozilla.org/fr/">
-  <img src="mozilla-image.png" alt="logo mozilla pointant sur la page d'accueil mozilla">
-</a>
- -
-

Note : Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article.

-
- -

Une brève présentation des URL et des chemins

- -

Pour bien maîtriser les cibles des liens, vous avez besoin d'avoir compris ce que sont les URL et les chemins. Cette section vous donne les informations voulues pour y parvenir.

- -

Une URL, ou Uniform Resource Locator, est simplement une chaîne textuelle qui définit où se situe quelque chose sur le Web. Par exemple, la page d'accueil en anglais de Mozilla est située à l'adresse https://www.mozilla.org/en-US/.

- -

Les URL utilisent des chemins pour trouver des fichiers. Les chemins indiquent où dans le système de fichiers, se trouve celui qui vous intéresse. Regardons un exemple simple de structure de répertoires (voir le dossier creating-hyperlinks).

- -

Une simple structure de répertoire. Le répertoire parent s'appelle creating-hyperlinks et contient deux fichiers appelés index.html et contacts.html, et deux répertoires appelés projects et pdfs, qui contiennent respectivement un fichier index.html et un fichier project-brief.pdf.

- -

La racine de cette structure de répertoires s'appelle creating-hyperlinks. Quand vous travaillez localement sur un site web, vous avez un dossier contenant l'intégralité du site. Dans la racine, nous avons un fichier index.html et un contacts.html. Sur un site réel, index.html serait notre page d'accueil ou portail (page web servant de point d'entrée à un site web ou à une section particulière d'un site web).

- -

Il y a aussi deux répertoires dans la racine — pdfs et projects. Chacun d'eux comporte un seul fichier — respectivement un PDF (project-brief.pdf) et un fichier index.html. Notez que vous pouvez heureusement avoir deux fichiers index.html dans un projet, pour autant qu'ils se trouvent dans deux emplacements différents dans le système de fichiers. De nombreux sites web le font. Le second index.html peut être le portail des informations relatives au projet.

- - - -
-

Note : Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. ../../../complexe/path/to/my/file.html.

-
- -

Fragments de documents

- -

Il est possible de faire un lien vers une partie donnée d'un document HTML (désignée du terme fragment de document), plutôt que juste le haut du document. Pour ce faire, vous devrez d'abord assigner un attribut {{htmlattrxref("id")}} à l'élément sur lequel vous voulez pointer. Il est généralement logique d'établir un lien vers une rubrique précise, ainsi cela ressemble à quelque chose comme :

- -
<h2 id="Adresse_mailing">Adresse de mailing</h2>
- -

Puis, pour faire un lien vers cet id précisément, il convient de l'indiquer à la fin de l'URL, précédé d'un croisillon (#) :

- -
<p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p>
- -

Vous pouvez même utiliser une référence au fragment de document seul pour faire un lien vers une autre partie du même document :

- -
<p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p>
- -

URL absolue vs. URL relative

- -

Deux termes que vous rencontrerez sur le Web sont URL absolue et URL relative :

- -

URL absolue : pointe sur un emplacement défini de manière absolue sur le web, y compris en précisant le {{glossary("protocol","protocole")}} et le {{glossary("domain name","nom de domaine")}}. Ainsi par exemple, si une page index.html est téléversée dans le dossier nommé projects à la racine du serveur web, et que le domaine du site est http://www.example.com, la page sera accessible à l'adresse http://www.example.com/projects/index.html (ou même seulement http://www.example.com/projects/, du fait que la plupart des serveurs web cherchent pour le chargement une page d'accueil comme index.htm, si ce n'est pas précisé dans l'URL).

- -

Une URL absolue pointera toujours vers le même emplacement, quel que soit l'endroit où elle est utilisée.

- -

URL relative : pointe vers un emplacement qui est relatif au fichier à partir duquel vous établissez le lien, tout comme ce que nous avons vu précédemment. Donc, si nous voulons créer un lien depuis notre fichier d'exemple en http://www.example.com/projects/index.html vers un fichier PDF dans le même dossier, l'URL sera seulement le nom du fichier — càd., project-brief.pdf — pas besoin d'information supplémentaire. Si le PDF est disponible dans un sous-dossier de projects appelé pdfs, le lien relatif serait pdfs/project-brief.pdf (l'URL absolue équivalente serait http://www.example.com/projects/pdfs/project-brief.pdf.)

- -

Une URL relative pointera vers des emplacements différents en fonction de l'endroit où se situe le fichier qui est utilisé ; par exemple, si nous déplacions notre index.html du dossier projects vers la racine du site web (au niveau le plus élevé, dans aucun dossier), le lien de l'URL relative pdfs/project-brief.pdf qui s'y trouve pointerait alors vers un fichier situé en http://www.example.com/pdfs/project-brief.pdf, et non vers un fichier situé en http://www.example.com/projects/pdfs/project-brief.pdf.

- -

Bien sûr, l'emplacement du fichier project-brief.pdf et du dossier pdfs ne changera pas subitement du fait que vous avez déplacé le fichier index.html : cela aura pour effet que votre lien pointera vers un mauvais emplacement, de sorte que cela ne fonctionnera pas si on clique dessus. Vous devez être prudent !

- -

Meilleures pratiques de liens

- -

Il y a quelques bonnes pratiques à suivre pour l'écriture de liens. Jetons-y un coup d'œil.

- - - -

Utilisez une formulation claire des liens

- -

Il est facile de mettre des liens sur une page. Mais ce n'est pas suffisant. Nous devons rendre nos liens accessibles à tous les lecteurs, indépendamment de leur contexte d'installation et des outils qu'ils préfèrent. Par exemple :

- - - -

Regardons un exemple particulier :

- -

Bon texte de lien: Télécharger Firefox

- -
<p><a href="https://firefox.com/">
-  Télécharger Firefox
-</a></p>
- -

Mauvais texte de lien : Cliquer ici pour télécharger Firefox

- -
<p><a href="https://firefox.com/">
-  Cliquer ici
-</a>
-pour télécharger Firefox</p>
-
- -

Autres conseils :

- - - -

Utilisez des liens relatifs partout où c'est possible

- -

Compte tenu de la description ci-dessus, vous pourriez penser qu'utliser des liens absolus tout le temps est une bonne idée ; après tout, ils ne sont pas brisés si une page est déplacée, comme c'est le cas avec les liens relatifs. Mais, vous devez utiliser des liens relatifs partout où c'est possible pour pointer vers d'autres emplacements à l'intérieur d'un même site web. (pour les liens vers un autre site web, vous aurez besoin d'utiliser un lien absolu) :

- - - -

Liaison vers des ressources non-HTML : signalez‑les clairement

- -

Quand faites un lien vers une ressource à télécharger (comme un PDF ou un document Word ) ou lue en flux (comme une video ou de l'audio) ou qui a un autre effet potentiellement inattendu (qui ouvre d'une fenêtre pop-up ou qui charge une vidéo Flash), vous devez le signaler clairement pour réduire toute confusion. Cela peut être parfaitement ennuyeux, par exemple :

- - - -

Voici quelques exemples suggérant les genres de texte pouvant être employé :

- -
<p><a href="http://www.exemple.com/rapport-volumineux.pdf">
-  Télécharger le rapport des ventes (PDF, 10Mo)
-</a></p>
-
-<p><a href="http://www.exemple.com/flux-video/" target="_blank">
-  Regarder la vidéo (le flux s'ouvre dans un nouvel onglet, qualité HD)
-</a></p>
-
-<p><a href="http://www.exemple.com/jeu-de-voiture">
-  Jouer au jeu de voiture (nécessite Flash)
-</a></p>
- -

Utilisez l'attribut download pour faire un lien vers un téléchargement

- -

Quand vous faites un lien avec une ressource qui doit être téléchargée plutôt qu'ouverte dans le navigateur, vous pouvez utiliser l'attribut download pour fournir un nom d'enregistrement par défaut. Voici un exemple avec un lien de téléchargement vers la version Windows la plus récente de Firefox :

- -
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR"
-   download="firefox-latest-64bit-installer.exe">
-  Télécharger la version de Firefox pour Windows la plus récente (64-bit)(français, France)
-</a>
- -

Apprentissage actif : création d'un menu de navigation

- -

Pour cet exercice, nous aimerions que vous reliiez ensemble quelques pages par un menu de navigation pour créer un web site multi-page. C'est une manière courante de créer un site web, la même structure de page est utilisée sur chaque page, y compris le même menu de navigation, de sorte que quand les liens sont cliqués, cela vous donne l'impression de rester au même endroit, tandis qu'un contenu différent est présenté.

- -

Vous aurez besoin de faire des copies locales des quatre pages suivantes, toutes dans le même dossier (voyez aussi le dossier navigation-menu-start pour une liste complète des fichiers).

- - - -

Vous devez :

- -
    -
  1. Ajouter une liste non-ordonnée à l'endroit indiqué sur une page, qui contiendra les noms des pages à relier. Un menu de navigation n'est habituellement qu'une liste de liens, donc c'est ok sur le plan sémantique.
    2. -
  2. Changer chaque nom de page en un lien vers cette page.
    3. -
  3. Copier le menu de navigation dans chaque page.
    4. -
  4. Sur chaque page, enlever seulement le lien vers cette page, c'est source de confusion et sans objet pour une page que d'inclure un lien vers elle-même, et l'absence d'un lien constitue un bon rappel visuel pour se souvenir sur quelle page vous êtes actuellement.
    5. -
- -

L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui suit :

- -

Un exemple d'un menu de navigation HTML simple, avec les éléments page d'accueil, images, projets et menu des réseaux sociaux.

- -
-

Note : si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier navigation-menu-marked-up pour voir la réponse correcte.

-
- -

Liens de courriel

- -

Il est possible de créer des liens ou des boutons qui, losrqu'ils sont cliqués, ouvrent un nouveau message de courriel sortant plutôt que de faire un lien vers une ressource ou une page. C'est fait en utilisant l'élément {{HTMLElement("a")}} et le schéma d'URL mailto:.

- -

Sous sa forme la plus basique et la plus communément utilisée, un lien mailto: indique simplement l'adresse du destinataire voulu. Par exemple :

- -
<a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a>
-
- -

Ceci donne un résultat qui ressemble à ceci : Envoyer un courriel à nullepart.

- -

En fait, l'adresse de courriel est même optionnelle. Si vous l'omettez (c'est-à-dire, si votre {{htmlattrxref("href", "a")}} est simplement "mailto:"), une nouvelle fenêtre de courriel sortant sera ouverte par le client de courriel de l'utilisateur, sans adresse de destination encore spécifiée. C'est souvent utile comme pour les liens "Partager" que lesquels les utilisateurs peuvent cliquer pour envoyer un email à l'adresse de leur choix.

- -

Spécification des détails

- -

En plus de l'adresse mail, vous pouvez fournir d'autres informations. En fait, tous les champs d'en-tête standards peuvent être ajoutés à l'URL mailto que vous fournissez. Les plus couramment utilisés parmi ceux-ci sont subject, cc et body (qui n'est pas à proprement parler un champ d'en-tête, mais qui vous permet d'indiquer un court message de contenu pour le nouveau courriel). Chaque champ est indiqué en termes de requête.

- -

Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body :

- -
<a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&bcc=nom3@rapidtables.com&subject=L%27objet%20du%20courriel&body=Le%20corps%20du%20courriel">
-  Envoyer un mail avec copie, copie cachée, sujet et corps de message
-</a>
- -
-

Note : La valeur de chaque champ doit être codée à la façon d'une URL, c'est-à-dire que les caractères non-imprimables (les caractères "invisibles" tels que les tabulations, les retours chariot et les sauts de page) et les espaces doivent être percent-escaped. Notez également l'utilisation du point d'interrogation (?) pour séparer l'URL principale des valeurs de champ et de l'esperluette (&) pour séparer chaque champ dans l'URL mailto:. C'est la notation standard des requêtes URL. Lire La méthode GET pour comprendre ce pourquoi la notation de requête URL est habituellement le plus souvent utilisée.

-
- -

Voici quelques autres exemples d'URL mailto :

- - - -

Résumé

- -

C'est tout pour les liens, du moins pour l'instant ! Vous reviendrez aux liens plus loin dans le cours quand vous en serez arrivé à les mettre en forme. Pour la prochaine étape HTML, nous reviendrons à l'analyse sémantique du texte et verrons quelques fonctionnalités plus avancées ou inhabituelles que vous trouverez utiles : le formatage avancé de texte est votre prochain arrêt.

- -
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Dans ce module

- - 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 new file mode 100644 index 0000000000..abaeb6d167 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md @@ -0,0 +1,334 @@ +--- +title: Création d'hyperliens +slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +tags: + - Apprendre + - Codage + - Débutant + - Guide + - HTML + - Liens + - Title + - URL + - absolu + - hyperliens + - relatif +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web une toile. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens.

+ + + + + + + + + + + + +
Prérequis :Être familiarisé avec les bases du HTML, traitées à la page Commencer avec le HTML et du formatage de texte HTML, décrit dans les Fondamentaux du texte HTML.
Objectif :Apprendre à implémenter un hyperlien efficacement, et à relier de multiples fichiers ensemble.
+ +

Qu'est-ce un hyperlien ?

+ +

Les hyperliens sont l'une des plus passionnantes innovations que le web a à offrir. De fait, ils ont été une fonctionnalité du Web depuis le tout début, mais ils sont ce qui fait du Web une toile — ils nous permettent de lier nos documents à n'importe quel autre document (ou autre ressource) voulu ; nous pouvons faire des liens vers des parties précises de documents et rendre des applications disponibles à une simple adresse web (contrairement aux applications natives, qui doivent être installées et tout le travail). À peu près tout contenu web peut être converti en lien, de sorte que cliqué (ou activé autrement), il dirigera le navigateur vers une autre adresse web ({{glossary("URL")}}).

+ +
+

Note : Une URL peut pointer vers des fichiers HTML, des fichiers textes, des images, des documents textuels, des fichiers vidéo ou audio et tout ce qui peut exister sur le Web. Si le navigateur Web ne sait pas comment afficher ou gérer un fichier, il vous demande si vous voulez ouvrir le fichier (dans ce cas, la responsabilité de l'ouverture et de la gestion du fichier incombe à l'application native adéquate sur l'appareil) ou bien télécharger le fichier (auquel cas, vous pouvez essayer de vous en occuper plus tard).

+
+ +

La page d'accueil de la BBC, par exemple, contient un nombre important de liens pour pointer, non seulement vers de multiples articles d'actualité, mais encore vers d'autres zones du site (fonctionnalité de navigation) , des pages d'inscription/de connexion (outils utilisateur) et plus encore.

+ +

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

+ +

Anatomie d'un lien

+ +

Un lien élémentaire se crée en intégrant le texte (ou tout autre contenu, cf. {{anch("Liens de niveau bloc")}}) que vous voulez transformer en lien dans un élément {{htmlelement("a")}} et en lui affectant un attribut {{htmlattrxref("href", "a")}} (également connu comme étant une Hypertext Reference) contenant l'adresse web vers laquelle vous voulez que le lien pointe.

+ +
<p>Je suis en train de créer un lien à
+<a href="https://www.mozilla.org/fr/">la page d'accueil Mozilla</a>.
+</p>
+ +

qui donne le résultat suivant :

+ +

Je suis en train de créer un lien à la page d'accueil de Mozilla.

+ +

Ajouter des informations d'assistance avec l'attribut title

+ +

L'autre attribut qu'il est possible d'ajouter à un lien est title ; il est destiné à contenir des informations utiles supplémentaires à propos du lien, comme le type d'informations contenes dans la page ou ce qu'il faut savoir. Par exemple :

+ +
<p>Je suis en train de créer un lien à
+<a href="https://www.mozilla.org/fr/"
+   title="Le meilleur endroit pour trouver plus d'informations sur la
+  mission de Mozilla et la manière de contribuer">la page d'accueil Mozilla</a>.
+</p>
+ +

Voici le résultat (le contenu de title apparaît dans une info-bulle quand le pointeur de souris passe sur le lien) :

+ +

Je suis en train de créer un lien vers la page d'accueil de Mozilla

+ +
+

Note : le title d'un lien n'est révélé que lors du survol de la souris, ce qui signifie que les personnes utilisant les commandes clavier pour naviguer dans les pages web auront des difficultés à accéder aux informations de title. Si une information de title est vraiment importante pour l'utilisation d'une page, alors vous devez la présenter de manière accessible à tout utilisateur, par exemple, en la mettant dans le texte normal.

+
+ +

Apprentissage actif : création de votre propre exemple de lien

+ +

C'est l'heure de l'apprentissage actif : veuillez créer un document HTML avec un éditeur de code local (notre fichier modèle index.html fera parfaitement l'affaire).

+ + + +

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 . Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises <a></a>.

+ +
<a href="https://www.mozilla.org/fr/">
+  <img src="mozilla-image.png" alt="logo mozilla pointant sur la page d'accueil mozilla">
+</a>
+ +
+

Note : Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article.

+
+ +

Une brève présentation des URL et des chemins

+ +

Pour bien maîtriser les cibles des liens, vous avez besoin d'avoir compris ce que sont les URL et les chemins. Cette section vous donne les informations voulues pour y parvenir.

+ +

Une URL, ou Uniform Resource Locator, est simplement une chaîne textuelle qui définit où se situe quelque chose sur le Web. Par exemple, la page d'accueil en anglais de Mozilla est située à l'adresse https://www.mozilla.org/en-US/.

+ +

Les URL utilisent des chemins pour trouver des fichiers. Les chemins indiquent où dans le système de fichiers, se trouve celui qui vous intéresse. Regardons un exemple simple de structure de répertoires (voir le dossier creating-hyperlinks).

+ +

Une simple structure de répertoire. Le répertoire parent s'appelle creating-hyperlinks et contient deux fichiers appelés index.html et contacts.html, et deux répertoires appelés projects et pdfs, qui contiennent respectivement un fichier index.html et un fichier project-brief.pdf.

+ +

La racine de cette structure de répertoires s'appelle creating-hyperlinks. Quand vous travaillez localement sur un site web, vous avez un dossier contenant l'intégralité du site. Dans la racine, nous avons un fichier index.html et un contacts.html. Sur un site réel, index.html serait notre page d'accueil ou portail (page web servant de point d'entrée à un site web ou à une section particulière d'un site web).

+ +

Il y a aussi deux répertoires dans la racine — pdfs et projects. Chacun d'eux comporte un seul fichier — respectivement un PDF (project-brief.pdf) et un fichier index.html. Notez que vous pouvez heureusement avoir deux fichiers index.html dans un projet, pour autant qu'ils se trouvent dans deux emplacements différents dans le système de fichiers. De nombreux sites web le font. Le second index.html peut être le portail des informations relatives au projet.

+ + + +
+

Note : Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. ../../../complexe/path/to/my/file.html.

+
+ +

Fragments de documents

+ +

Il est possible de faire un lien vers une partie donnée d'un document HTML (désignée du terme fragment de document), plutôt que juste le haut du document. Pour ce faire, vous devrez d'abord assigner un attribut {{htmlattrxref("id")}} à l'élément sur lequel vous voulez pointer. Il est généralement logique d'établir un lien vers une rubrique précise, ainsi cela ressemble à quelque chose comme :

+ +
<h2 id="Adresse_mailing">Adresse de mailing</h2>
+ +

Puis, pour faire un lien vers cet id précisément, il convient de l'indiquer à la fin de l'URL, précédé d'un croisillon (#) :

+ +
<p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p>
+ +

Vous pouvez même utiliser une référence au fragment de document seul pour faire un lien vers une autre partie du même document :

+ +
<p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p>
+ +

URL absolue vs. URL relative

+ +

Deux termes que vous rencontrerez sur le Web sont URL absolue et URL relative :

+ +

URL absolue : pointe sur un emplacement défini de manière absolue sur le web, y compris en précisant le {{glossary("protocol","protocole")}} et le {{glossary("domain name","nom de domaine")}}. Ainsi par exemple, si une page index.html est téléversée dans le dossier nommé projects à la racine du serveur web, et que le domaine du site est http://www.example.com, la page sera accessible à l'adresse http://www.example.com/projects/index.html (ou même seulement http://www.example.com/projects/, du fait que la plupart des serveurs web cherchent pour le chargement une page d'accueil comme index.htm, si ce n'est pas précisé dans l'URL).

+ +

Une URL absolue pointera toujours vers le même emplacement, quel que soit l'endroit où elle est utilisée.

+ +

URL relative : pointe vers un emplacement qui est relatif au fichier à partir duquel vous établissez le lien, tout comme ce que nous avons vu précédemment. Donc, si nous voulons créer un lien depuis notre fichier d'exemple en http://www.example.com/projects/index.html vers un fichier PDF dans le même dossier, l'URL sera seulement le nom du fichier — càd., project-brief.pdf — pas besoin d'information supplémentaire. Si le PDF est disponible dans un sous-dossier de projects appelé pdfs, le lien relatif serait pdfs/project-brief.pdf (l'URL absolue équivalente serait http://www.example.com/projects/pdfs/project-brief.pdf.)

+ +

Une URL relative pointera vers des emplacements différents en fonction de l'endroit où se situe le fichier qui est utilisé ; par exemple, si nous déplacions notre index.html du dossier projects vers la racine du site web (au niveau le plus élevé, dans aucun dossier), le lien de l'URL relative pdfs/project-brief.pdf qui s'y trouve pointerait alors vers un fichier situé en http://www.example.com/pdfs/project-brief.pdf, et non vers un fichier situé en http://www.example.com/projects/pdfs/project-brief.pdf.

+ +

Bien sûr, l'emplacement du fichier project-brief.pdf et du dossier pdfs ne changera pas subitement du fait que vous avez déplacé le fichier index.html : cela aura pour effet que votre lien pointera vers un mauvais emplacement, de sorte que cela ne fonctionnera pas si on clique dessus. Vous devez être prudent !

+ +

Meilleures pratiques de liens

+ +

Il y a quelques bonnes pratiques à suivre pour l'écriture de liens. Jetons-y un coup d'œil.

+ + + +

Utilisez une formulation claire des liens

+ +

Il est facile de mettre des liens sur une page. Mais ce n'est pas suffisant. Nous devons rendre nos liens accessibles à tous les lecteurs, indépendamment de leur contexte d'installation et des outils qu'ils préfèrent. Par exemple :

+ + + +

Regardons un exemple particulier :

+ +

Bon texte de lien: Télécharger Firefox

+ +
<p><a href="https://firefox.com/">
+  Télécharger Firefox
+</a></p>
+ +

Mauvais texte de lien : Cliquer ici pour télécharger Firefox

+ +
<p><a href="https://firefox.com/">
+  Cliquer ici
+</a>
+pour télécharger Firefox</p>
+
+ +

Autres conseils :

+ + + +

Utilisez des liens relatifs partout où c'est possible

+ +

Compte tenu de la description ci-dessus, vous pourriez penser qu'utliser des liens absolus tout le temps est une bonne idée ; après tout, ils ne sont pas brisés si une page est déplacée, comme c'est le cas avec les liens relatifs. Mais, vous devez utiliser des liens relatifs partout où c'est possible pour pointer vers d'autres emplacements à l'intérieur d'un même site web. (pour les liens vers un autre site web, vous aurez besoin d'utiliser un lien absolu) :

+ + + +

Liaison vers des ressources non-HTML : signalez‑les clairement

+ +

Quand faites un lien vers une ressource à télécharger (comme un PDF ou un document Word ) ou lue en flux (comme une video ou de l'audio) ou qui a un autre effet potentiellement inattendu (qui ouvre d'une fenêtre pop-up ou qui charge une vidéo Flash), vous devez le signaler clairement pour réduire toute confusion. Cela peut être parfaitement ennuyeux, par exemple :

+ + + +

Voici quelques exemples suggérant les genres de texte pouvant être employé :

+ +
<p><a href="http://www.exemple.com/rapport-volumineux.pdf">
+  Télécharger le rapport des ventes (PDF, 10Mo)
+</a></p>
+
+<p><a href="http://www.exemple.com/flux-video/" target="_blank">
+  Regarder la vidéo (le flux s'ouvre dans un nouvel onglet, qualité HD)
+</a></p>
+
+<p><a href="http://www.exemple.com/jeu-de-voiture">
+  Jouer au jeu de voiture (nécessite Flash)
+</a></p>
+ +

Utilisez l'attribut download pour faire un lien vers un téléchargement

+ +

Quand vous faites un lien avec une ressource qui doit être téléchargée plutôt qu'ouverte dans le navigateur, vous pouvez utiliser l'attribut download pour fournir un nom d'enregistrement par défaut. Voici un exemple avec un lien de téléchargement vers la version Windows la plus récente de Firefox :

+ +
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR"
+   download="firefox-latest-64bit-installer.exe">
+  Télécharger la version de Firefox pour Windows la plus récente (64-bit)(français, France)
+</a>
+ +

Apprentissage actif : création d'un menu de navigation

+ +

Pour cet exercice, nous aimerions que vous reliiez ensemble quelques pages par un menu de navigation pour créer un web site multi-page. C'est une manière courante de créer un site web, la même structure de page est utilisée sur chaque page, y compris le même menu de navigation, de sorte que quand les liens sont cliqués, cela vous donne l'impression de rester au même endroit, tandis qu'un contenu différent est présenté.

+ +

Vous aurez besoin de faire des copies locales des quatre pages suivantes, toutes dans le même dossier (voyez aussi le dossier navigation-menu-start pour une liste complète des fichiers).

+ + + +

Vous devez :

+ +
    +
  1. Ajouter une liste non-ordonnée à l'endroit indiqué sur une page, qui contiendra les noms des pages à relier. Un menu de navigation n'est habituellement qu'une liste de liens, donc c'est ok sur le plan sémantique.
    2. +
  2. Changer chaque nom de page en un lien vers cette page.
    3. +
  3. Copier le menu de navigation dans chaque page.
    4. +
  4. Sur chaque page, enlever seulement le lien vers cette page, c'est source de confusion et sans objet pour une page que d'inclure un lien vers elle-même, et l'absence d'un lien constitue un bon rappel visuel pour se souvenir sur quelle page vous êtes actuellement.
    5. +
+ +

L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui suit :

+ +

Un exemple d'un menu de navigation HTML simple, avec les éléments page d'accueil, images, projets et menu des réseaux sociaux.

+ +
+

Note : si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier navigation-menu-marked-up pour voir la réponse correcte.

+
+ +

Liens de courriel

+ +

Il est possible de créer des liens ou des boutons qui, losrqu'ils sont cliqués, ouvrent un nouveau message de courriel sortant plutôt que de faire un lien vers une ressource ou une page. C'est fait en utilisant l'élément {{HTMLElement("a")}} et le schéma d'URL mailto:.

+ +

Sous sa forme la plus basique et la plus communément utilisée, un lien mailto: indique simplement l'adresse du destinataire voulu. Par exemple :

+ +
<a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a>
+
+ +

Ceci donne un résultat qui ressemble à ceci : Envoyer un courriel à nullepart.

+ +

En fait, l'adresse de courriel est même optionnelle. Si vous l'omettez (c'est-à-dire, si votre {{htmlattrxref("href", "a")}} est simplement "mailto:"), une nouvelle fenêtre de courriel sortant sera ouverte par le client de courriel de l'utilisateur, sans adresse de destination encore spécifiée. C'est souvent utile comme pour les liens "Partager" que lesquels les utilisateurs peuvent cliquer pour envoyer un email à l'adresse de leur choix.

+ +

Spécification des détails

+ +

En plus de l'adresse mail, vous pouvez fournir d'autres informations. En fait, tous les champs d'en-tête standards peuvent être ajoutés à l'URL mailto que vous fournissez. Les plus couramment utilisés parmi ceux-ci sont subject, cc et body (qui n'est pas à proprement parler un champ d'en-tête, mais qui vous permet d'indiquer un court message de contenu pour le nouveau courriel). Chaque champ est indiqué en termes de requête.

+ +

Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body :

+ +
<a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&bcc=nom3@rapidtables.com&subject=L%27objet%20du%20courriel&body=Le%20corps%20du%20courriel">
+  Envoyer un mail avec copie, copie cachée, sujet et corps de message
+</a>
+ +
+

Note : La valeur de chaque champ doit être codée à la façon d'une URL, c'est-à-dire que les caractères non-imprimables (les caractères "invisibles" tels que les tabulations, les retours chariot et les sauts de page) et les espaces doivent être percent-escaped. Notez également l'utilisation du point d'interrogation (?) pour séparer l'URL principale des valeurs de champ et de l'esperluette (&) pour séparer chaque champ dans l'URL mailto:. C'est la notation standard des requêtes URL. Lire La méthode GET pour comprendre ce pourquoi la notation de requête URL est habituellement le plus souvent utilisée.

+
+ +

Voici quelques autres exemples d'URL mailto :

+ + + +

Résumé

+ +

C'est tout pour les liens, du moins pour l'instant ! Vous reviendrez aux liens plus loin dans le cours quand vous en serez arrivé à les mettre en forme. Pour la prochaine étape HTML, nous reviendrons à l'analyse sémantique du texte et verrons quelques fonctionnalités plus avancées ou inhabituelles que vous trouverez utiles : le formatage avancé de texte est votre prochain arrêt.

+ +
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Dans ce module

+ + 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 deleted file mode 100644 index ed0cfa6a2b..0000000000 --- a/files/fr/learn/html/introduction_to_html/debugging_html/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: Déboguer de l'HTML -slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML -tags: - - Codage - - Débutant - - Erreur - - Guide - - HTML - - Validation - - débogage - - validateur -translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML -original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider à trouver et corriger les erreurs en HTML.

- - - - - - - - - - - - -
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.
Objectif :Apprendre les bases de l'utilisation des outils de débogage pour détecter des problèmes en HTML.
- -

Déboguer n'est pas un problème

- -

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.

- -

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.

- -

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 :

- - - - - -

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

- -

Voici le moment venu d'étudier le caractère permissif du code 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. 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>
-
-    <p>Quelles sont les causes d'erreur en HTML ?
-
-    <ul>
-      <li>Éléments non fermés : si un élément n'est <strong>pas
-          fermé proprement, ses effets peuvent déborder sur des
-          zones que vous ne souhaitiez pas.
-
-      <li>Éléments incorrectement imbriqués : imbriquer des
-          éléments proprement est également très important pour
-          que le code se comporte correctement.
-          <strong>caractères gras <em>ou gras et italiques ?</strong>
-          qu'est‑ce ?</em>
-
-      <li>Attributs non fermés : autre source courante de problèmes
-          en HTML. Voici un exemple: <a href="https://www.mozilla.org/>
-          lien à la page d'accueil de Mozilla</a>
-    </ul>
    -
    4. -
  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.
      • -
    • 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. -
  5. Revoyons maintenant comment le navigateur a vu le balisage, par comparaison au balisage du code source. Pour ce faire, utilisons les outils de développement du navigateur. Si vous n'êtes pas un familier de l'utilisation des outils de développement du navigateur, prenez quelques minutes pour revoir Découverte des outils de développement du navigateur.
    6. -
  6. Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble : L'inspecteur HTML dans Firefox, avec le paragraphe de l'exemple en surbrillance, montrant le texte "Quelles sont les causes d'erreurs en HTML ? Ici, vous pouvez voir que l'élément de paragraphe a été fermé par le navigateur.
    7. -
  7. 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 : - 
      <strong>caractères gras
-  <em>ou caractères gras et italiques ?</em>
-</strong>
-<em> qu'est ce ?</em>
      -
      • -
    • Le lien avec les guillemets manquants a été illico détruit. Le dernier élément li ressemble à ceci : - 
      <li>
-  <strong>Attributs non fermés : autre source courante de problèmes
-en HTML. Voici un exemple :</strong>
-</li>
      -
      • -
    -
    8. -
- -

Validation d'un HTML

- -

Comme vous pouvez le voir dans l'exemple ci-dessus, il faut s'assurer que votre HTML est bien formé ! Mais comment ? Dans un petit fichier comme celui qui précède, il est facile de chercher dans les lignes et de trouver les erreurs, mais qu'en est-il d'un document HTML énorme et complexe ?

- -

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

- -

Pour définir le HTML à valider, vous pouvez donner une adresse web (Validate by URI) , téléverser un fichier HTML (Validate by File Upload) ou entrer directement du code HTML (Validate by Direct Input).

- -

Apprentissage actif : validation d'un document HTML

- -

Essayons cet outil avec notre document exemple.

- -
    -
  1. D'abord, chargez le Markup Validation Service dans un des onglets du navigateur, si ce n'est déjà fait.
    2. -
  2. Basculez sur l'onglet Validate by Direct Input.
    3. -
  3. Copiez la totalité du code du document (pas uniquement l'élément body) et collez-le dans la grande zone de texte affichée dans Markup Validation Service.
    4. -
  4. Pressez le bouton Check.
    5. -
- -

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.

- -

Interprétation des messages d'erreur

- -

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.

- - - -

Si vous ne comprenez pas ce que signifie chaque message d'erreur, ne vous inquiétez pas — une bonne idée consiste à corriger quelques erreurs à la fois. Puis essayez de revalider le HTML pour voir les erreurs restantes. Parfois, la correction d'une erreur en amont permet aussi d'éliminer d'autres messages d'erreur — plusieurs erreurs sont souvent causées par un même problème, avec une sorte d'effet domino.

- -

Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie :

- -

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

- -

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.

- -

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}

- - - -

Dans ce module

- - 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 new file mode 100644 index 0000000000..ed0cfa6a2b --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/debugging_html/index.md @@ -0,0 +1,194 @@ +--- +title: Déboguer de l'HTML +slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML +tags: + - Codage + - Débutant + - Erreur + - Guide + - HTML + - Validation + - débogage + - validateur +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider à trouver et corriger les erreurs en HTML.

+ + + + + + + + + + + + +
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.
Objectif :Apprendre les bases de l'utilisation des outils de débogage pour détecter des problèmes en HTML.
+ +

Déboguer n'est pas un problème

+ +

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.

+ +

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.

+ +

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 :

+ + + + + +

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

+ +

Voici le moment venu d'étudier le caractère permissif du code 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. 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>
+
+    <p>Quelles sont les causes d'erreur en HTML ?
+
+    <ul>
+      <li>Éléments non fermés : si un élément n'est <strong>pas
+          fermé proprement, ses effets peuvent déborder sur des
+          zones que vous ne souhaitiez pas.
+
+      <li>Éléments incorrectement imbriqués : imbriquer des
+          éléments proprement est également très important pour
+          que le code se comporte correctement.
+          <strong>caractères gras <em>ou gras et italiques ?</strong>
+          qu'est‑ce ?</em>
+
+      <li>Attributs non fermés : autre source courante de problèmes
+          en HTML. Voici un exemple: <a href="https://www.mozilla.org/>
+          lien à la page d'accueil de Mozilla</a>
+    </ul>
    +
    4. +
  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.
      • +
    • 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. +
  5. Revoyons maintenant comment le navigateur a vu le balisage, par comparaison au balisage du code source. Pour ce faire, utilisons les outils de développement du navigateur. Si vous n'êtes pas un familier de l'utilisation des outils de développement du navigateur, prenez quelques minutes pour revoir Découverte des outils de développement du navigateur.
    6. +
  6. Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble : L'inspecteur HTML dans Firefox, avec le paragraphe de l'exemple en surbrillance, montrant le texte "Quelles sont les causes d'erreurs en HTML ? Ici, vous pouvez voir que l'élément de paragraphe a été fermé par le navigateur.
    7. +
  7. 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 : + 
      <strong>caractères gras
+  <em>ou caractères gras et italiques ?</em>
+</strong>
+<em> qu'est ce ?</em>
      +
      • +
    • Le lien avec les guillemets manquants a été illico détruit. Le dernier élément li ressemble à ceci : + 
      <li>
+  <strong>Attributs non fermés : autre source courante de problèmes
+en HTML. Voici un exemple :</strong>
+</li>
      +
      • +
    +
    8. +
+ +

Validation d'un HTML

+ +

Comme vous pouvez le voir dans l'exemple ci-dessus, il faut s'assurer que votre HTML est bien formé ! Mais comment ? Dans un petit fichier comme celui qui précède, il est facile de chercher dans les lignes et de trouver les erreurs, mais qu'en est-il d'un document HTML énorme et complexe ?

+ +

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

+ +

Pour définir le HTML à valider, vous pouvez donner une adresse web (Validate by URI) , téléverser un fichier HTML (Validate by File Upload) ou entrer directement du code HTML (Validate by Direct Input).

+ +

Apprentissage actif : validation d'un document HTML

+ +

Essayons cet outil avec notre document exemple.

+ +
    +
  1. D'abord, chargez le Markup Validation Service dans un des onglets du navigateur, si ce n'est déjà fait.
    2. +
  2. Basculez sur l'onglet Validate by Direct Input.
    3. +
  3. Copiez la totalité du code du document (pas uniquement l'élément body) et collez-le dans la grande zone de texte affichée dans Markup Validation Service.
    4. +
  4. Pressez le bouton Check.
    5. +
+ +

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.

+ +

Interprétation des messages d'erreur

+ +

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.

+ + + +

Si vous ne comprenez pas ce que signifie chaque message d'erreur, ne vous inquiétez pas — une bonne idée consiste à corriger quelques erreurs à la fois. Puis essayez de revalider le HTML pour voir les erreurs restantes. Parfois, la correction d'une erreur en amont permet aussi d'éliminer d'autres messages d'erreur — plusieurs erreurs sont souvent causées par un même problème, avec une sorte d'effet domino.

+ +

Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie :

+ +

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

+ +

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.

+ +

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html deleted file mode 100644 index 2ffb0e3cdf..0000000000 --- a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html +++ /dev/null @@ -1,291 +0,0 @@ ---- -title: Structure de Site Web et de document -slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure -tags: - - Codage - - Disposition - - Débutant - - Guide - - HTML - - Page - - Site - - blocs - - sémantique -translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure -original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML","Apprendre/HTML/Introduction_à_HTML")}}
-
- -

De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.

- - - - - - - - - - - - -
Prérequis :Être familiarisé avec les bases du HTML, traitées à la page Commencer avec le HTML et du formatage de texte HTML, décrit dans les Fondamentaux du texte HTML. Comment fonctionnent les liens hyperlinks , comme décrit dans Création d'hyperliens.
Objectif : -

Apprendre comment structurer votre document en utilisant des balises sémantiques et comment élaborer la structure d'un site web simple.

-
- -

Principales parties d'un document

- -

Les pages web peuvent sembler assez différentes les unes des autres, mais elles ont toutes tendance à partager des composantes standard similaires, sauf si la page affiche une vidéo ou un jeu en plein écran, relève d'une sorte de projet artistique ou... est simplement mal structurée :

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

Quelques informations autour du sujet, liens, citations, annonces, etc. Habituellement c'est contextuel au contenu principal (par exemple sur une page d'informations, la barre latérale peut contenir la biographie de l'auteur, ou des liens vers des articles connexes) mais il y a aussi des cas où vous trouverez des éléments récurrents comme un système de navigation secondaire.

-
-
Pied de page
-
-

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 exemple simple de structure de site Web comportant un titre principal, un menu de navigation, un contenu principal, une barre latérale et un pied de page.

- -

HTML pour structurer un contenu

- -

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 » ?

- -
-

Note : Les daltoniens représentent environ 8% de la population mondiale ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait 285 millions de personnes aveugles et malvoyantes dans le monde, alors que la population totale était d'environ 7 milliards d'habitants).

-
- -

Dans votre code HTML, vous pouvez marquer des sections de contenu selon leur fonction — vous pouvez utiliser des éléments qui représentent sans ambiguïté les sections de contenu décrites ci-dessus, et les technologies d'assistance comme les lecteurs d'écran peuvent reconnaître ces éléments et vous aider avec des tâches comme « trouver la navigation principale » ou « trouver le contenu principal ». Comme nous l'avons mentionné plus tôt dans le cours, le fait de ne pas utiliser la bonne structure d'éléments et la bonne sémantique pour le bon travail a un certain nombre de conséquences.

- -

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 :

- - - -

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). Nous aimerions que vous regardiez cet exemple et que vous recherchiez dans le listing suivant les sections constituant les diverses parties du visuel.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-
-    <title>Intitulé de ma page</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="style.css">
-
-    <!-- Les trois lignes ci‑dessous sont un correctif pour que la sémantique
-         HTML5 fonctionne correctement avec les anciennes versions de
-         Internet Explorer-->
-    <!--[if lt IE 9]>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
-    <![endif]-->
-  </head>
-
-  <body>
-    <!-- Voici notre en‑tête principale utilisée dans toutes les pages
-         de notre site web -->
-    <header>
-      <h1>En-tête</h1>
-    </header>
-
-    <nav>
-      <ul>
-        <li><a href="#">Accueil</a></li>
-        <li><a href="#">L'équipe</a></li>
-        <li><a href="#">Projets</a></li>
-        <li><a href="#">Contact</a></li>
-      </ul>
-
-       <!-- Un formulaire de recherche est une autre façon de naviguer de
-            façon non‑linéaire dans un site. -->
-
-       <form>
-         <input type="search" name="q" placeholder="Rechercher">
-         <input type="submit" value="Lancer !">
-       </form>
-     </nav>
-
-    <!-- Ici nous mettons le contenu de la page -->
-    <main>
-
-      <!-- Il contient un article -->
-      <article>
-        <h2>En-tête d'article</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
-
-        <h3>Sous‑section</h3>
-        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
-        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
-
-        <h3>Autre sous‑section</h3>
-        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
-        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
-      </article>
-
-      <!-- Le contenu « à côté » peut aussi être intégré dans le contenu
-           principal -->
-      <aside>
-        <h2>En relation</h2>
-        <ul>
-          <li><a href="#">Combien j'aime être près des rivages</a></li>
-          <li><a href="#">Combien j'aime être près de la mer</a></li>
-          <li><a href="#">Bien que dans le nord de l'Angleterre</a></li>
-          <li><a href="#">Il n'arrête jamais de pleuvoir</a></li>
-          <li><a href="#">Eh bien…</a></li>
-        </ul>
-      </aside>
-
-    </main>
-
-    <!-- Et voici notre pied de page utilisé sur toutes les pages du site -->
-    <footer>
-      <p>©Copyright 2050 par personne. Tous droits reversés.</p>
-    </footer>
-
-  </body>
-</html>
- -

Prenez le temps voulu pour regarder ce code et le comprendre — les commentaires inclus doivent également vous aider à comprendre. Il n'y a pas grand-chose d'autre à faire dans cet article, car la clé pour comprendre une mise en page de document est d'écrire une bonne structure HTML, puis de la mettre en page avec les CSS. Nous attendrons donc que vous ayez commencé à étudier la mise en page avec les CSS.

- -

Plus de détails à propos des éléments de mise en page

- -

La compréhension détaillée de la signification globale de tous les éléments de la mise en page HTML est importante — vous l'acquerrez au fur et à mesure avec l'expérience dans le développement web. Vous pouvez trouver beaucoup de détails en parcourant la référence aux éléments HTML. Pour l'instant, il convient de bien comprendre les principales définitions :

- - - -

Enveloppes non‑sémantiques

- -

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 :

- -
<p>Le Roi retourna ivre à sa chambre à une heure, la bière ne l'aidant en rien
-alors qu'il titubait en travers de la porte <span class="editor-note">
-[Note du rédacteur : Pour cette scène, la lumière doit être faible].</span></p>
- -

Dans ce cas, la note du rédacteur est simplement supposée fournir une indication supplémentaire pour le metteur en scène de la pièce ; elle n'est pas censée avoir une signification sémantique supplémentaire. Pour les utilisateurs malvoyants, les CSS seraient peut-être utilisés pour distancer légèrement la note du texte principal.

- -

{{HTMLElement("div")}} est un élément de niveau bloc non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur bloc de sémantique à utiliser, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple, imaginez un widget de panier d'achat que vous pourriez choisir d'afficher à n'importe quel moment sur un site de commerce électronique :

- -
<div class="panier">
-  <h2>Panier d'achat</h2>
-  <ul>
-    <li>
-      <p><a href=""><b>Boucles d'oreilles en argent</b></a>: €99,95.</p>
-      <img src="../products/3333-0985/thumb.png" alt="Boucles d'oreilles en argent">
-    </li>
-    <li>
-      ...
-    </li>
-  </ul>
-  <p>Total des achats : €237,89</p>
-</div>
- -

Ce n'est pas vraiment un élément <aside> et il n'a pas forcément de relation avec l'essentiel du contenu de la page (vous le souhaitez visible de partout). Il ne justifie pas particulièrement l'utilisation d'une <section>, car il ne fait pas partie du contenu principal de la page. Donc un <div> est bien dans ce cas. Nous avons incorporé un panneau indicateur que les lecteurs d'écran puissent le signaler.

- -
-

Attention : les div sont si pratiques à utiliser qu'on est tenté de les utiliser à l'excès. Comme ils ne portent aucune valeur sémantique, ils encombrent votre code HTML. Prenez soin de ne les utiliser que s'il n'y a pas de meilleure solution sémantique et essayez de réduire leur utilisation au minimum sinon vous aurez du mal à mettre à jour et à maintenir vos documents.

-
- -

Sauts de ligne et traits horizontaux

- -

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 :

- -
<p>Il y avait une fois une fille nommée Nell<br>
-Qui aimait écrire du HTML<br>
-Mais ses structures et sémantiques affligeantes<br>
-rendaient de ses marquages la lecture inélégante.</p>
- -

Sans éléments <br>, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, HTML ignore la plupart des blancs) ; avec des <br> dans le code, voici le rendu de ce qui précède :

- -

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 :

- -

Exemple avec hr

- -
<p>Ron était acculé dans un angle par des Netherbeasts en maraude. Effrayé, mais déterminé à protéger ses amis, il a levé sa baguette et s'est préparé à se battre, espérant que son appel de détresse serait entendu.</p>
-<hr>
-<p>Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.</p>
- -

sera rendu ainsi :

-

{{EmbedLiveSample("Exemple_avec_hr")}}

- -

Planification d'un site web simple

- -

Une fois planifié le contenu d'une simple page Web, l'étape logique suivante est d'essayer de déterminer le contenu que vous voulez mettre sur le site Web en entier, les pages dont vous avez besoin et la façon dont elles doivent être organisées et les liens les unes vers les autres pour la meilleure expérience utilisateur possible. C'est ce qu'on appelle {{glossary("Information architecture")}} (architecture de l'information). Dans un grand site web complexe, beaucoup de planification peut entrer dans ce processus, mais pour un simple site Web de quelques pages, cela peut être assez simple et amusant !

- -
    -
  1. Gardez à l'esprit que vous aurez quelques éléments communs à la plupart des pages (sinon à toutes) — comme le menu de navigation et le contenu du pied de page. Si votre site est destiné à une entreprise, par exemple, c'est une bonne idée d'avoir les informations de contact dans le pied de page de chaque page. Notez ce que vous voulez avoir en commun dans chaque page. les caractéristiques communes du site de voyage pour aller sur chaque page : titre et logo, contact, copyright, termes et conditions, choix de la langue, politique d'accessibilité.
    2. -
  2. Ensuite, dessinez une esquisse de ce à quoi vous voudriez que la structure de chaque page ressemble (elle pourrait ressembler à notre simple site Web ci-dessus.) Notez ce que chaque bloc va être. Un diagramme simple d'une structure d'exemple de site, avec un en-tête, une zone de contenu principal, deux barres latérales optionnelles et un pied de page.
    3. -
  3. Maintenant, faites un remue-méninges sur tous les autres contenus (qui ne sont pas communs à toutes les pages) que vous voulez avoir sur votre site Web - écrivez une grande liste. Une longue liste de toutes les fonctionnalités que nous pourrions mettre sur notre site de voyage, de la recherche, aux offres spéciales et aux informations spécifiques à chaque pays.
    4. -
  4. Ensuite, essayez de trier tous ces éléments de contenu par groupes, pour vous donner une idée des parties qui pourraient aller ensemble sur diverses pages. C'est très similaire à une technique appelée {{glossary("Card sorting","Tri de cartes")}}.Les articles qui devraient apparaître sur un site de vacances triés en 5 catégories : Recherche, spéciaux, informations spécifiques au pays, résultats de la recherche et choses à acheter.
    5. -
  5. Essayez maintenant d'esquisser un plan de site grossier — entourez d'un cercle chaque page de votre site et tracez des flèches pour montrer les flux de travail typiques entre pages. La page d'accueil sera probablement au centre et en lien vers la plupart sinon la totalité des autres ; la plupart des pages d'un petit site devraient être disponibles à partir de la navigation principale, bien qu'il y ait des exceptions. Vous voudrez peut-être aussi ajouter des notes sur la présentation des choses. Une carte du site montrant la page d'accueil, la page du pays, les résultats de recherche, la page spéciale, la page de paiement et la page d'achat.
    6. -
- -

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 ?

- -
-

Note : Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard.

-
- -

Résumé

- -

Vous devriez avoir maintenant une meilleure idée de la façon de structurer une page web ou un site web. Dans le dernier article de ce module, nous étudierons comment déboguer le HTML.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_à_HTML")}}

- -

Dans ce module

- - 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 new file mode 100644 index 0000000000..2ffb0e3cdf --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md @@ -0,0 +1,291 @@ +--- +title: Structure de Site Web et de document +slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +tags: + - Codage + - Disposition + - Débutant + - Guide + - HTML + - Page + - Site + - blocs + - sémantique +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML","Apprendre/HTML/Introduction_à_HTML")}}
+
+ +

De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.

+ + + + + + + + + + + + +
Prérequis :Être familiarisé avec les bases du HTML, traitées à la page Commencer avec le HTML et du formatage de texte HTML, décrit dans les Fondamentaux du texte HTML. Comment fonctionnent les liens hyperlinks , comme décrit dans Création d'hyperliens.
Objectif : +

Apprendre comment structurer votre document en utilisant des balises sémantiques et comment élaborer la structure d'un site web simple.

+
+ +

Principales parties d'un document

+ +

Les pages web peuvent sembler assez différentes les unes des autres, mais elles ont toutes tendance à partager des composantes standard similaires, sauf si la page affiche une vidéo ou un jeu en plein écran, relève d'une sorte de projet artistique ou... est simplement mal structurée :

+ +
+
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.
+
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
+
+

Quelques informations autour du sujet, liens, citations, annonces, etc. Habituellement c'est contextuel au contenu principal (par exemple sur une page d'informations, la barre latérale peut contenir la biographie de l'auteur, ou des liens vers des articles connexes) mais il y a aussi des cas où vous trouverez des éléments récurrents comme un système de navigation secondaire.

+
+
Pied de page
+
+

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 exemple simple de structure de site Web comportant un titre principal, un menu de navigation, un contenu principal, une barre latérale et un pied de page.

+ +

HTML pour structurer un contenu

+ +

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 » ?

+ +
+

Note : Les daltoniens représentent environ 8% de la population mondiale ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait 285 millions de personnes aveugles et malvoyantes dans le monde, alors que la population totale était d'environ 7 milliards d'habitants).

+
+ +

Dans votre code HTML, vous pouvez marquer des sections de contenu selon leur fonction — vous pouvez utiliser des éléments qui représentent sans ambiguïté les sections de contenu décrites ci-dessus, et les technologies d'assistance comme les lecteurs d'écran peuvent reconnaître ces éléments et vous aider avec des tâches comme « trouver la navigation principale » ou « trouver le contenu principal ». Comme nous l'avons mentionné plus tôt dans le cours, le fait de ne pas utiliser la bonne structure d'éléments et la bonne sémantique pour le bon travail a un certain nombre de conséquences.

+ +

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 :

+ + + +

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). Nous aimerions que vous regardiez cet exemple et que vous recherchiez dans le listing suivant les sections constituant les diverses parties du visuel.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>Intitulé de ma page</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="style.css">
+
+    <!-- Les trois lignes ci‑dessous sont un correctif pour que la sémantique
+         HTML5 fonctionne correctement avec les anciennes versions de
+         Internet Explorer-->
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <!-- Voici notre en‑tête principale utilisée dans toutes les pages
+         de notre site web -->
+    <header>
+      <h1>En-tête</h1>
+    </header>
+
+    <nav>
+      <ul>
+        <li><a href="#">Accueil</a></li>
+        <li><a href="#">L'équipe</a></li>
+        <li><a href="#">Projets</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+
+       <!-- Un formulaire de recherche est une autre façon de naviguer de
+            façon non‑linéaire dans un site. -->
+
+       <form>
+         <input type="search" name="q" placeholder="Rechercher">
+         <input type="submit" value="Lancer !">
+       </form>
+     </nav>
+
+    <!-- Ici nous mettons le contenu de la page -->
+    <main>
+
+      <!-- Il contient un article -->
+      <article>
+        <h2>En-tête d'article</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+
+        <h3>Sous‑section</h3>
+        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
+        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
+
+        <h3>Autre sous‑section</h3>
+        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
+        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
+      </article>
+
+      <!-- Le contenu « à côté » peut aussi être intégré dans le contenu
+           principal -->
+      <aside>
+        <h2>En relation</h2>
+        <ul>
+          <li><a href="#">Combien j'aime être près des rivages</a></li>
+          <li><a href="#">Combien j'aime être près de la mer</a></li>
+          <li><a href="#">Bien que dans le nord de l'Angleterre</a></li>
+          <li><a href="#">Il n'arrête jamais de pleuvoir</a></li>
+          <li><a href="#">Eh bien…</a></li>
+        </ul>
+      </aside>
+
+    </main>
+
+    <!-- Et voici notre pied de page utilisé sur toutes les pages du site -->
+    <footer>
+      <p>©Copyright 2050 par personne. Tous droits reversés.</p>
+    </footer>
+
+  </body>
+</html>
+ +

Prenez le temps voulu pour regarder ce code et le comprendre — les commentaires inclus doivent également vous aider à comprendre. Il n'y a pas grand-chose d'autre à faire dans cet article, car la clé pour comprendre une mise en page de document est d'écrire une bonne structure HTML, puis de la mettre en page avec les CSS. Nous attendrons donc que vous ayez commencé à étudier la mise en page avec les CSS.

+ +

Plus de détails à propos des éléments de mise en page

+ +

La compréhension détaillée de la signification globale de tous les éléments de la mise en page HTML est importante — vous l'acquerrez au fur et à mesure avec l'expérience dans le développement web. Vous pouvez trouver beaucoup de détails en parcourant la référence aux éléments HTML. Pour l'instant, il convient de bien comprendre les principales définitions :

+ + + +

Enveloppes non‑sémantiques

+ +

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 :

+ +
<p>Le Roi retourna ivre à sa chambre à une heure, la bière ne l'aidant en rien
+alors qu'il titubait en travers de la porte <span class="editor-note">
+[Note du rédacteur : Pour cette scène, la lumière doit être faible].</span></p>
+ +

Dans ce cas, la note du rédacteur est simplement supposée fournir une indication supplémentaire pour le metteur en scène de la pièce ; elle n'est pas censée avoir une signification sémantique supplémentaire. Pour les utilisateurs malvoyants, les CSS seraient peut-être utilisés pour distancer légèrement la note du texte principal.

+ +

{{HTMLElement("div")}} est un élément de niveau bloc non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur bloc de sémantique à utiliser, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple, imaginez un widget de panier d'achat que vous pourriez choisir d'afficher à n'importe quel moment sur un site de commerce électronique :

+ +
<div class="panier">
+  <h2>Panier d'achat</h2>
+  <ul>
+    <li>
+      <p><a href=""><b>Boucles d'oreilles en argent</b></a>: €99,95.</p>
+      <img src="../products/3333-0985/thumb.png" alt="Boucles d'oreilles en argent">
+    </li>
+    <li>
+      ...
+    </li>
+  </ul>
+  <p>Total des achats : €237,89</p>
+</div>
+ +

Ce n'est pas vraiment un élément <aside> et il n'a pas forcément de relation avec l'essentiel du contenu de la page (vous le souhaitez visible de partout). Il ne justifie pas particulièrement l'utilisation d'une <section>, car il ne fait pas partie du contenu principal de la page. Donc un <div> est bien dans ce cas. Nous avons incorporé un panneau indicateur que les lecteurs d'écran puissent le signaler.

+ +
+

Attention : les div sont si pratiques à utiliser qu'on est tenté de les utiliser à l'excès. Comme ils ne portent aucune valeur sémantique, ils encombrent votre code HTML. Prenez soin de ne les utiliser que s'il n'y a pas de meilleure solution sémantique et essayez de réduire leur utilisation au minimum sinon vous aurez du mal à mettre à jour et à maintenir vos documents.

+
+ +

Sauts de ligne et traits horizontaux

+ +

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 :

+ +
<p>Il y avait une fois une fille nommée Nell<br>
+Qui aimait écrire du HTML<br>
+Mais ses structures et sémantiques affligeantes<br>
+rendaient de ses marquages la lecture inélégante.</p>
+ +

Sans éléments <br>, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, HTML ignore la plupart des blancs) ; avec des <br> dans le code, voici le rendu de ce qui précède :

+ +

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 :

+ +

Exemple avec hr

+ +
<p>Ron était acculé dans un angle par des Netherbeasts en maraude. Effrayé, mais déterminé à protéger ses amis, il a levé sa baguette et s'est préparé à se battre, espérant que son appel de détresse serait entendu.</p>
+<hr>
+<p>Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.</p>
+ +

sera rendu ainsi :

+

{{EmbedLiveSample("Exemple_avec_hr")}}

+ +

Planification d'un site web simple

+ +

Une fois planifié le contenu d'une simple page Web, l'étape logique suivante est d'essayer de déterminer le contenu que vous voulez mettre sur le site Web en entier, les pages dont vous avez besoin et la façon dont elles doivent être organisées et les liens les unes vers les autres pour la meilleure expérience utilisateur possible. C'est ce qu'on appelle {{glossary("Information architecture")}} (architecture de l'information). Dans un grand site web complexe, beaucoup de planification peut entrer dans ce processus, mais pour un simple site Web de quelques pages, cela peut être assez simple et amusant !

+ +
    +
  1. Gardez à l'esprit que vous aurez quelques éléments communs à la plupart des pages (sinon à toutes) — comme le menu de navigation et le contenu du pied de page. Si votre site est destiné à une entreprise, par exemple, c'est une bonne idée d'avoir les informations de contact dans le pied de page de chaque page. Notez ce que vous voulez avoir en commun dans chaque page. les caractéristiques communes du site de voyage pour aller sur chaque page : titre et logo, contact, copyright, termes et conditions, choix de la langue, politique d'accessibilité.
    2. +
  2. Ensuite, dessinez une esquisse de ce à quoi vous voudriez que la structure de chaque page ressemble (elle pourrait ressembler à notre simple site Web ci-dessus.) Notez ce que chaque bloc va être. Un diagramme simple d'une structure d'exemple de site, avec un en-tête, une zone de contenu principal, deux barres latérales optionnelles et un pied de page.
    3. +
  3. Maintenant, faites un remue-méninges sur tous les autres contenus (qui ne sont pas communs à toutes les pages) que vous voulez avoir sur votre site Web - écrivez une grande liste. Une longue liste de toutes les fonctionnalités que nous pourrions mettre sur notre site de voyage, de la recherche, aux offres spéciales et aux informations spécifiques à chaque pays.
    4. +
  4. Ensuite, essayez de trier tous ces éléments de contenu par groupes, pour vous donner une idée des parties qui pourraient aller ensemble sur diverses pages. C'est très similaire à une technique appelée {{glossary("Card sorting","Tri de cartes")}}.Les articles qui devraient apparaître sur un site de vacances triés en 5 catégories : Recherche, spéciaux, informations spécifiques au pays, résultats de la recherche et choses à acheter.
    5. +
  5. Essayez maintenant d'esquisser un plan de site grossier — entourez d'un cercle chaque page de votre site et tracez des flèches pour montrer les flux de travail typiques entre pages. La page d'accueil sera probablement au centre et en lien vers la plupart sinon la totalité des autres ; la plupart des pages d'un petit site devraient être disponibles à partir de la navigation principale, bien qu'il y ait des exceptions. Vous voudrez peut-être aussi ajouter des notes sur la présentation des choses. Une carte du site montrant la page d'accueil, la page du pays, les résultats de recherche, la page spéciale, la page de paiement et la page d'achat.
    6. +
+ +

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 ?

+ +
+

Note : Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard.

+
+ +

Résumé

+ +

Vous devriez avoir maintenant une meilleure idée de la façon de structurer une page web ou un site web. Dans le dernier article de ce module, nous étudierons comment déboguer le HTML.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_à_HTML")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/getting_started/index.html b/files/fr/learn/html/introduction_to_html/getting_started/index.html deleted file mode 100644 index dce8e89b0e..0000000000 --- a/files/fr/learn/html/introduction_to_html/getting_started/index.html +++ /dev/null @@ -1,725 +0,0 @@ ---- -title: Commencer avec le HTML -slug: Learn/HTML/Introduction_to_HTML/Getting_started -tags: - - Attributs - - Codage - - Commentaires - - Débutant - - Elements - - Entités - - Guide - - HTML - - espace -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started -original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started ---- -
{{LearnSidebar}}
- -
{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Cet article porte sur les fondements du HTML, pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour exciter votre intérêt.

- - - - - - - - - - - - -
Prérequis :Notions sur le fonctionnement d'un ordinateur, avoir installé les logiciels de base et savoir gérer les fichiers.
Objectif :Se familiariser avec le langage HTML et acquérir de la pratique en écrivant quelques éléments HTML.
- -

Qu'est ce que le HTML ?

- -

{{glossary("HTML")}} (HyperText Markup Language) n'est pas un langage de programmation : c'est un langage de balisage qui sert à indiquer au navigateur comment structurer les pages web visitées. Il peut être aussi compliqué ou aussi simple que le développeur web souhaite qu'il soit. Le HTML se compose d'une série d'{{glossary("Elément", "éléments")}} avec lesquels vous pouvez encadrer, envelopper ou baliser différentes parties du contenu pour les faire apparaître ou agir d'une certaine manière. Des {{glossary("balise", "balises")}} encadrantes peuvent transformer une petite partie de contenu en un lien vers une autre page sur le Web, mettre des mots en italique, etc. Par exemple, prenons la phrase suivante :

- -
Mon chat est très grincheux
- -

Si nous voulons que cette ligne reste en l'état, nous pouvons dire qu'il s'agit d'un paragraphe en l'enveloppant d'un élément paragraphe ({{htmlelement("p")}}) :

- -
<p>Mon chat est très grincheux</p>
- -
-

Note : Les éléments en HTML sont insensibles à la casse, c'est-à-dire qu'ils peuvent être écrits en majuscules ou en minuscules. Par exemple, un élément {{htmlelement("title")}}} peut être écrit <title>, <TITLE>, <Title>, <TiTlE>, etc. et il fonctionnera parfaitement. La meilleure pratique, cependant, est d'écrire tous les éléments en minuscules pour des raisons de cohérence, de lisibilité et autres.

-
- -

Anatomie d'un élément HTML

- -

Regardons notre élément paragraphe d'un peu plus près :

- -

- -

Les principales parties de notre élément sont :

- -
    -
  1. La balise ouvrante : il s'agit du nom de l'élément (dans ce cas, p), encadré par un chevron ouvrant (<) et un chevron fermant (>). Elle indique où l'élément commence ou commence à prendre effet — dans ce cas où commence le paragraphe ;
    2. -
  2. La balise fermante : c'est la même que la balise ouvrante, sauf qu'elle comprend une barre oblique (/) avant le nom de l'élément. Elle indique la fin de l'élément — dans ce cas, la fin du paragraphe. Ne pas inclure une balise de fermeture est une erreur fréquente chez les débutants, et peut amener des résultats étranges ;
    3. -
  3. Le contenu : il s'agit du contenu de l'élément. Dans notre cas, c'est simplement du texte ;
    4. -
  4. L'élément : l'ensemble balise ouvrante, balise fermante et contenu constituent l'élément.
    5. -
- -

Apprentissage actif : créer votre premier élément HTML

- -

Modifiez la ligne ci-dessous dans la Zone de saisie en la mettant entre les balises <em> et </em> (mettez <em> avant pour ouvrir l'élément et </em> après pour fermer l'élément) — cette opération doit mettre en relief la ligne en l'écrivant en italiques. Vous devriez constater la mise à jour de la modification directement dans la Zone de rendu.

- -

Si vous faites une erreur, vous pouvez toujours réinitialiser avec le bouton Réinitialiser. Si vous êtes vraiment coincé, appuyez sur le bouton Voir la solution pour la réponse.

- - - - - - - -

{{ EmbedLiveSample('Apprentissage_actif_créer_votre_premier_élément_HTML', 700, 400, "", "","hide-codepen-jsfiddle")}}

- -

Eléments imbriqués

- -

Vous pouvez mettre des éléments à l'intérieur d'autres éléments — cela s'appelle l'imbrication. Si vous voulez affirmer que votre chat est très grincheux, vous pouvez mettre le mot « très » dans l'élément {{htmlelement("strong")}}, pour qu'il soit fortement mis en valeur :

- -
<p>Mon chat est <strong>très</strong> grincheux.</p>
- -

Vous devez toutefois vous assurer que vos éléments sont correctement imbriqués : dans l'exemple ci-dessus, nous avons ouvert l'élément p en premier, puis l'élément strong, donc nous devons fermer l'élément strong d'abord, puis l'élément p. Ce qui suit est incorrect :

- -
<p>Mon chat est <strong>très grincheux.</p></strong>
- -

Les éléments doivent être ouverts et fermés correctement afin d'être clairement à l'intérieur ou à l'extérieur l'un de l'autre. Si les balises se chevauchent comme dans l'exemple ci-dessus, votre navigateur web essaiera de deviner ce que vous vouliez dire, et vous pourrez obtenir des résultats inattendus. Autant éviter !

- -

Éléments bloc vs en ligne

- -

Il existe deux catégories importantes d'éléments en HTML que vous devez connaître : les éléments de niveau bloc et les éléments en ligne.

- - - -

Prenez l'exemple suivant :

- -
<em>premier</em><em>deuxième</em><em>troisième</em>
-
-<p>quatrième</p><p>cinquième</p><p>sixième</p>
-
- -

{{htmlelement("em")}} est un élément en ligne et, comme vous pouvez le voir ci-dessous, les trois premiers éléments s'affichent sur la même ligne sans qu'il n'y ait d'espace entre eux. Par contre, {{htmlelement("p")}} est un élément de niveau bloc, donc chaque élément apparaît sur une nouvelle ligne et un espace apparaît au-dessus et au-dessous de chacun d'eux (l'espacement est dû au style CSS par défaut du navigateur qui s'applique aux paragraphes).

- -

{{ EmbedLiveSample('Éléments_bloc_vs_en_ligne', 700, 200, "", "") }}

- -
-

Note : HTML5 a redéfini les catégories d'éléments dans HTML5 : voir catégories de contenu d'éléments. Bien que ces définitions soient plus précises et moins ambiguës que celles qui précèdent, elles sont beaucoup plus compliquées à comprendre que « block » et « inline ». Nous nous en tiendrons donc à cela tout au long de ce sujet.

-
- -
-

Note : les termes « block » et « inline », tels qu'utilisés dans cet article, ne doivent pas être confondus avec les types de boîtes des CSS portant les mêmes noms. Alors qu'ils sont corrélés par défaut, modifier le type d'affichage des CSS ne modifie pas la catégorie d'un élément et n'affecte pas les éléments qu'il pourrait contenir ni ceux dans lequel il pourrait être contenu. Une des raisons pour lesquelles HTML5 a abandonné ces termes était d'éviter cette confusion assez courante.

-
- -
-

Note : Vous trouverez des pages de référence utiles incluant des listes d'éléments de niveau bloc et d'éléments en ligne.

-
- -

Éléments vides

- -

Tous les éléments ne suivent pas le modèle ci-dessus d'ouverture de balise, puis contenu, puis fermeture de balise. Certains éléments ne sont composés que d'une balise. Ils servent généralement à insérer / incorporer quelque chose dans le document à l'endroit où ils sont mis. Par exemple, l'élément <img /> ou {{htmlelement("img")}} insère une image dans une page à l'endroit où il est placé (la balise auto-fermante <img /> est à privilégier) :

- -
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" />
- -

Cela affichera l'élément suivant sur votre page :

- -

{{ EmbedLiveSample('Éléments_vides', 700, 300, "", "", "hide-codepen-jsfiddle") }}

- -

Attributs

- -

Les éléments peuvent aussi avoir des attributs, qui comme suit:

- -

&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>

- -

Les attributs contiennent des informations supplémentaires sur l'élément sans qu'elles n'apparaissent dans le contenu réel. Dans ce cas, l'attribut class vous permet de donner à l'élément un nom d'identification qui peut ensuite être utilisé pour cibler l'élément afin de lui attribuer un style CSS ou un comportement particulier, par exemple.

- -

Pour créer un attribut, il faut :

- -
    -
  1. insérer un espace entre cet attribut et le nom de l'élément (ou l'attribut précédent, si l'élément possède déjà un ou plusieurs attributs) ;
    2. -
  2. donner un nom à l'attribut, puis ajouter un signe égal ;
    3. -
  3. donner une valeur à l'attribut, entourée par des guillemets d'ouverture et de fermeture.
    4. -
- -

Apprentissage actif : ajouter des attributs à un élément

- -

Un autre exemple d'un élément est {{htmlelement("a")}}. Il représente une ancre et permet de transformer en lien l'élément qu'il enveloppe. Il peut recevoir un certain nombre d'attributs, mais voici les deux principaux :

- - - -

Modifiez la ligne ci-dessous dans la Zone de saisie pour la transformer en lien vers votre site web préféré. Tout d'abord, ajoutez l'élément <a>, puis l'attribut href, puis l'attribut title. Vous pourrez voir la mise à jour de vos modifications en direct dans la Zone de rendu. Vous devriez voir un lien qui, lorsque vous passez votre pointeur de souris dessus, affiche le contenu de l'attribut title et, lorsque vous cliquez dessus, va à l'adresse web indiquée dans l'élément href. N'oubliez pas d'inclure un espace entre le nom de l'élément et chacun des attributs.

- -

Si vous faites une erreur, vous pouvez toujours réinitialiser la zone de saisie en cliquant sur le bouton Réinitialiser. Si vous êtes vraiment coincé, cliquez sur le bouton Voir la solution pour afficher la réponse.

- - - - - - - -

{{ EmbedLiveSample('Apprentissage_actif_ajouter_des_attributs_à_un_élément', 700, 400,"","","hide-codepen-jsfiddle") }}

- -

Les attributs booléens

- -

Vous verrez parfois des attributs sans valeur définie : c'est tout à fait autorisé. Ils sont appelés attributs booléens ; ils ne peuvent avoir qu'une seule valeur, généralement la même que le nom de l'attribut. Par exemple, prenez l'attribut {{htmlattrxref ("disabled", "input")}}, que vous pouvez affecter aux éléments input (éléments de saisie d'un formulaire) si vous voulez les désactiver (ils seront alors grisés) afin que l'utilisateur ne puisse pas y saisir de données.

- -
<input type="text" disabled="disabled">
- -

Pour aller plus vite, il est parfaitement possible d'écrire cette même ligne de la façon suivante (nous avons également inclus un élément input non-désactivé pour référence, pour que vous puissiez vous faire une meilleure idée de ce qui se passe) :

- -
<input type="text" disabled>
-
-<input type="text">
-
- -

Ces deux exemples vous donneront le résultat suivant :

- -

{{ EmbedLiveSample('Les_attributs_booléens', 700, 100) }}

- -

Omettre des guillemets autour des valeurs d'attribut

- -

Si vous regardez ce qui se passe sur le Web, vous rencontrerez tous types de styles de balises étranges, y compris des valeurs d'attribut sans guillemets. C'est permis dans certaines circonstances, mais cela va briser votre balisage dans d'autres. Par exemple, si nous revisitons notre exemple de lien ci-dessus, nous pourrons écrire une version de base avec seulement l'attribut href, comme ceci :

- -
<a href=https://www.mozilla.org/>mon site web favori</a>
- -

Cependant, si nous ajoutons l'attribut title dans ce même style, cela devient incorrect :

- -
<a href=https://www.mozilla.org/ title=La page d\'accueil Mozilla >mon site web favori</a>
- -

En effet, le navigateur interprétera mal la balise, pensant que l'attribut title est en fait quatre attributs — un attribut title avec la valeur « La » et trois attributs booléens, « page », « d\'accueil » et « Mozilla ». Ce n'est évidemment pas ce qui était prévu et cela provoquera des erreurs ou un comportement inattendu dans le code, comme on le voit dans l'exemple en direct ci-dessous. Essayez de passer la souris sur le lien pour voir ce que le texte de title donne.

- -

{{ EmbedLiveSample("Omettre_des_guillemets_autour_des_valeurs_dattribut", 700, 100, "", "", "hide-codepen-jsfiddle") }}

- -

Nous vous recommandons de toujours inclure les guillemets afin d'éviter ce type de problèmes, mais aussi pour que le code soit plus lisible.

- -

Guillemets simples ou doubles ?

- -

Dans cet article, vous remarquerez que les valeurs des attributs sont toutes entre des guillemets doubles (" "). Vous pouvez cependant voir des guillemets simples (' ') dans le code HTML de certaines personnes. C'est purement une question de style, et vous êtes libre de choisir la solution que vous préférez. Les deux lignes suivantes sont équivalentes :

- -
<a href="http://www.exemple.com">Un lien vers mon exemple.</a>
-
-<a href='http://www.example.com'>Un lien vers mon exemple</a>
- -

Vous devez cependant vous assurer de ne pas les mélanger. Ce qui suit n'est pas correct :

- -
<a href="http://www.exemple.com'>Un lien vers mon exemple.</a>
- -

Si vous avez utilisé un type de guillemets dans votre code HTML, vous pouvez imbriquer l'autre type :

- -
<a href="http://www.exemple.com" title="N'est-ce pas drôle ?">Un lien vers mon exemple.</a>
- -

Si vous souhaitez imbriquer le même type de guillemets, vous devez utiliser une entité HTML pour représenter ce caractère spécial.

- -

Anatomie d'un document HTML

- -

Les éléments HTML basiques ne sont pas très utiles si on les prend séparément. Nous allons voir comment combiner des éléments individuels pour former une page HTML entière :

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Ma page test</title>
-  </head>
-  <body>
-    <p>Voici ma page web</p>
-  </body>
-</html>
- -

Ici, nous avons :

- -
    -
  1. <!DOCTYPE html> : le type de document. Quand HTML était jeune (vers 1991/2), les doctypes étaient censés agir comme des liens vers un ensemble de règles que la page HTML devait suivre pour être considérée comme un bon HTML, ce qui pouvait signifier la vérification automatique des erreurs et d'autres choses utiles. Habituellement, ils ressemblaient à ceci : - - 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    - Cependant, de nos jours personne ne se soucie vraiment d'eux, et ils sont juste un artefact historique qui doit être inclus pour que tout fonctionne bien. <!DOCTYPE html> est la chaîne de caractères la plus courte qui soit un doctype valide. C'est tout ce que vous avez vraiment besoin de savoir.
    2. -
  2. <html></html> : l'élément <html>. Cet élément est le contenant de tout le code de la page et est parfois connu comme l'élément racine.
    3. -
  3. <head></head> : l'élément <head>. Cet élément a le rôle de conteneur pour toute chose que vous souhaitez inclure dans la page HTML qui ne soit pas du contenu à afficher aux visiteurs de la page : mots clés, description de page que vous souhaitez voir apparaître dans les résultats de recherche, style CSS, déclarations de jeu de caractères et plus encore. Nous vous en dirons plus à ce sujet dans l'article suivant de la série.
    4. -
  4. <meta charset="utf-8"> : cet élément définit que le jeu de caractères à utiliser pour votre document est UTF-8. Ce jeu comporte la quasi‑totalité des caractères de toutes les écritures de langues humaines connues. Actuellement, il peut pour l'essentiel gérer tout contenu textuel que vous y pourriez mettre. Il n'y a aucune raison de ne pas définir cela et il peut permettre d'éviter certains problèmes plus tard.
    5. -
  5. <title></title> : l'élément title. Il définit le titre de la page, celui qui s'affiche dans l'onglet du navigateur dans lequel la page est chargée et qui est utilisé pour décrire la page lorsque vous la marquez ou l'ajoutez aux favoris.
    6. -
  6. <body></body> : l'élément <body>. Il contient tout le contenu que vous souhaitez afficher aux internautes lorsqu'ils visitent votre page, que ce soit du texte, des images, des vidéos, des jeux, des pistes audio jouables ou autre.
    7. -
- -

Apprentissage actif : ajouter certaines fonctionnalités à un document HTML

- -

Si vous voulez essayer d'écrire du HTML sur votre ordinateur en local, vous pouvez :

- -
    -
  1. copier l'exemple de page HTML ci-dessus.
    2. -
  2. créer un nouveau fichier dans votre éditeur de texte.
    3. -
  3. coller le code dans le nouveau fichier texte.
    4. -
  4. enregistrer le fichier sous index.html.
    5. -
- -
-

Note : Vous pouvez également trouver ce modèle HTML dans le dépôt GitHub MDN Learning Area.

-
- -

Vous pouvez maintenant ouvrir ce fichier dans un navigateur Web pour voir à quoi ressemble le rendu, puis modifier le code et actualiser le navigateur pour voir le résultat. Initialement, il ressemblera à ceci:

- -

Une simple page HTML affichant Voici ma pageDans cet exercice, vous pouvez modifier le code sur votre ordinateur, comme indiqué ci-dessus, ou directement dans la fenêtre d'exemple modifiable ci-dessous (la fenêtre d'exemple modifiable représente uniquement le contenu de l'élément <body>. ) Nous aimerions que vous le fassiez en suivant les étapes suivantes :

- - - -

Si vous faites une erreur, vous pouvez toujours recommencer en utilisant le bouton Réinitialiser. Si vous êtes vraiment coincé, appuyez sur le bouton Voir la solution pour l'afficher.

- - - - - - - -

{{ EmbedLiveSample('Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML', 700, 600, "", "", "hide-codepen-jsfiddle") }}

- -

Espace vide en HTML

- -

Dans les exemples ci-dessus, vous avez peut-être remarqué que beaucoup d'espaces sont inclus dans le code — ce n'est pas nécessaire du tout. Les deux extraits de code suivants sont équivalents:

- -
<p>Les chiens sont idiots.</p>
-
-<p>Les chiens        sont
-           idiots.</p>
- -

Peu importe la quantité d'espace que vous utilisez (pour inclure des espaces, ou aussi des sauts de ligne), l'analyseur HTML réduit chacun à un seul espace lors du rendu du code. Alors, pourquoi utiliser autant d'espace blanc? La réponse est la lisibilité — car il est tellement plus facile de comprendre ce qui se passe dans votre code si vous l'avez bien formaté, et non pas simplement l'écrire dans un grand désordre. Dans notre HTML, nous avons chaque élément imbriqué indenté par deux espaces plus que celui qui le contient. C'est à vous de choisir le style de formatage que vous utilisez (combien d'espaces pour chaque niveau d'indentation, par exemple), mais vous devriez envisager d'utiliser une sorte de formatage.

- -

Références d'entités : inclure les caractères spéciaux en HTML

- -

En HTML, les caractères <, >,",' et & sont des caractères spéciaux. Ils font partie de la syntaxe HTML elle-même, alors comment inclure un de ces caractères dans du texte, par exemple si vous voulez vraiment utiliser une esperluette(&) ou un signe inférieur(<), qui ne soit pas interpré en tant que code comme les navigateurs pourraient le faire ?

- -

Nous devons utiliser les références des caractères — codes spéciaux qui représentent des caractères et peuvent être utilisés dans ces circonstances exactes. Chaque référence de caractère est démarrée avec une esperluette (&), et se termine par un point-virgule (;).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Le caractèreRéference équivalent
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
- -

Dans l'exemple ci-dessous, voici deux paragraphes parlant de techniques Web :

- -
<p>En HTML, un paragraphe se définit avec l'élément <p>.</p>
-
-<p>En HTML, un paragraphe se définit avec l'élément &lt;p&gt;.</p>
- -

Dans la zone de rendu en direct ci-dessous, vous pouvez voir que le premier paragraphe n'est pas correctement affiché : le navigateur interprète le second <p> comme le début d'un nouveau paragraphe ! Le deuxième paragraphe est bien affiché, car nous avons remplacé les signes inférieur(<) et supérieur(>) par leurs références de caractère.

- -

{{ EmbedLiveSample("Références_dentités", 700, 200, "", "", "hide-codepen-jsfiddle") }}

- -
-

Note : Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia : Liste des entités caractère de XML et HTML.

-
- -

Commentaires en HTML

- -

En HTML, comme pour la plupart des langages de programmation, il existe un mécanisme permettant d'écrire des commentaires dans le code. Les commentaires sont ignorés par le navigateur et invisibles à l'utilisateur. Leur but est de permettre d'inclure des commentaires dans le code pour dire comment il fonctionne, que font les diverses parties du code, etc. Cela peut s'avérer très utile si vous revenez à un codage que vous n'avez pas travaillé depuis 6 mois et que vous ne pouvez pas vous rappeler ce que vous avez fait — ou si vous donnez votre code à quelqu'un d'autre pour qu'il y travaille.

- -

Pour transformer une section de contenu dans votre fichier HTML en commentaire, vous devez la mettre dans les marqueurs spéciaux <!-- et-->, par exemple :

- -
<p>Je ne suis pas dans un commentaire</p>
-
-<!-- <p>Je suis dans un commmentaire!</p> -->
- -

Comme vous pouvez le voir ci-dessous, le premier paragraphe apparaît dans le rendu de l'éditeur en ligne, mais le second n'apparaît pas.

- -

{{ EmbedLiveSample('Commentaires_en_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }}

- -

Résumé

- -

Vous avez atteint la fin de l'article — nous espérons que vous avez apprécié de faire le tour des bases du HTML ! À ce stade, vous devez comprendre à quoi ce langage ressemble, comment il fonctionne à un niveau de base, et être en mesure d'écrire quelques éléments et attributs. C'est parfait pour le moment, car dans les articles suivants, nous allons approfondir certaines des choses que vous venez de voir, et introduire de nouveaux aspects du langage. Restez à l'écoute !

- -
-

Note : À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style CSS. CSS est le langage utilisé pour composer vos pages Web (par exemple, changer la police ou les couleurs, ou modifier la mise en page). HTML et CSS vont très bien ensemble, comme vous allez bientôt le découvrir.

-
- -

Voir aussi

- - - -
{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Dans ce module

- - diff --git a/files/fr/learn/html/introduction_to_html/getting_started/index.md b/files/fr/learn/html/introduction_to_html/getting_started/index.md new file mode 100644 index 0000000000..dce8e89b0e --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/getting_started/index.md @@ -0,0 +1,725 @@ +--- +title: Commencer avec le HTML +slug: Learn/HTML/Introduction_to_HTML/Getting_started +tags: + - Attributs + - Codage + - Commentaires + - Débutant + - Elements + - Entités + - Guide + - HTML + - espace +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Cet article porte sur les fondements du HTML, pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour exciter votre intérêt.

+ + + + + + + + + + + + +
Prérequis :Notions sur le fonctionnement d'un ordinateur, avoir installé les logiciels de base et savoir gérer les fichiers.
Objectif :Se familiariser avec le langage HTML et acquérir de la pratique en écrivant quelques éléments HTML.
+ +

Qu'est ce que le HTML ?

+ +

{{glossary("HTML")}} (HyperText Markup Language) n'est pas un langage de programmation : c'est un langage de balisage qui sert à indiquer au navigateur comment structurer les pages web visitées. Il peut être aussi compliqué ou aussi simple que le développeur web souhaite qu'il soit. Le HTML se compose d'une série d'{{glossary("Elément", "éléments")}} avec lesquels vous pouvez encadrer, envelopper ou baliser différentes parties du contenu pour les faire apparaître ou agir d'une certaine manière. Des {{glossary("balise", "balises")}} encadrantes peuvent transformer une petite partie de contenu en un lien vers une autre page sur le Web, mettre des mots en italique, etc. Par exemple, prenons la phrase suivante :

+ +
Mon chat est très grincheux
+ +

Si nous voulons que cette ligne reste en l'état, nous pouvons dire qu'il s'agit d'un paragraphe en l'enveloppant d'un élément paragraphe ({{htmlelement("p")}}) :

+ +
<p>Mon chat est très grincheux</p>
+ +
+

Note : Les éléments en HTML sont insensibles à la casse, c'est-à-dire qu'ils peuvent être écrits en majuscules ou en minuscules. Par exemple, un élément {{htmlelement("title")}}} peut être écrit <title>, <TITLE>, <Title>, <TiTlE>, etc. et il fonctionnera parfaitement. La meilleure pratique, cependant, est d'écrire tous les éléments en minuscules pour des raisons de cohérence, de lisibilité et autres.

+
+ +

Anatomie d'un élément HTML

+ +

Regardons notre élément paragraphe d'un peu plus près :

+ +

+ +

Les principales parties de notre élément sont :

+ +
    +
  1. La balise ouvrante : il s'agit du nom de l'élément (dans ce cas, p), encadré par un chevron ouvrant (<) et un chevron fermant (>). Elle indique où l'élément commence ou commence à prendre effet — dans ce cas où commence le paragraphe ;
    2. +
  2. La balise fermante : c'est la même que la balise ouvrante, sauf qu'elle comprend une barre oblique (/) avant le nom de l'élément. Elle indique la fin de l'élément — dans ce cas, la fin du paragraphe. Ne pas inclure une balise de fermeture est une erreur fréquente chez les débutants, et peut amener des résultats étranges ;
    3. +
  3. Le contenu : il s'agit du contenu de l'élément. Dans notre cas, c'est simplement du texte ;
    4. +
  4. L'élément : l'ensemble balise ouvrante, balise fermante et contenu constituent l'élément.
    5. +
+ +

Apprentissage actif : créer votre premier élément HTML

+ +

Modifiez la ligne ci-dessous dans la Zone de saisie en la mettant entre les balises <em> et </em> (mettez <em> avant pour ouvrir l'élément et </em> après pour fermer l'élément) — cette opération doit mettre en relief la ligne en l'écrivant en italiques. Vous devriez constater la mise à jour de la modification directement dans la Zone de rendu.

+ +

Si vous faites une erreur, vous pouvez toujours réinitialiser avec le bouton Réinitialiser. Si vous êtes vraiment coincé, appuyez sur le bouton Voir la solution pour la réponse.

+ + + + + + + +

{{ EmbedLiveSample('Apprentissage_actif_créer_votre_premier_élément_HTML', 700, 400, "", "","hide-codepen-jsfiddle")}}

+ +

Eléments imbriqués

+ +

Vous pouvez mettre des éléments à l'intérieur d'autres éléments — cela s'appelle l'imbrication. Si vous voulez affirmer que votre chat est très grincheux, vous pouvez mettre le mot « très » dans l'élément {{htmlelement("strong")}}, pour qu'il soit fortement mis en valeur :

+ +
<p>Mon chat est <strong>très</strong> grincheux.</p>
+ +

Vous devez toutefois vous assurer que vos éléments sont correctement imbriqués : dans l'exemple ci-dessus, nous avons ouvert l'élément p en premier, puis l'élément strong, donc nous devons fermer l'élément strong d'abord, puis l'élément p. Ce qui suit est incorrect :

+ +
<p>Mon chat est <strong>très grincheux.</p></strong>
+ +

Les éléments doivent être ouverts et fermés correctement afin d'être clairement à l'intérieur ou à l'extérieur l'un de l'autre. Si les balises se chevauchent comme dans l'exemple ci-dessus, votre navigateur web essaiera de deviner ce que vous vouliez dire, et vous pourrez obtenir des résultats inattendus. Autant éviter !

+ +

Éléments bloc vs en ligne

+ +

Il existe deux catégories importantes d'éléments en HTML que vous devez connaître : les éléments de niveau bloc et les éléments en ligne.

+ + + +

Prenez l'exemple suivant :

+ +
<em>premier</em><em>deuxième</em><em>troisième</em>
+
+<p>quatrième</p><p>cinquième</p><p>sixième</p>
+
+ +

{{htmlelement("em")}} est un élément en ligne et, comme vous pouvez le voir ci-dessous, les trois premiers éléments s'affichent sur la même ligne sans qu'il n'y ait d'espace entre eux. Par contre, {{htmlelement("p")}} est un élément de niveau bloc, donc chaque élément apparaît sur une nouvelle ligne et un espace apparaît au-dessus et au-dessous de chacun d'eux (l'espacement est dû au style CSS par défaut du navigateur qui s'applique aux paragraphes).

+ +

{{ EmbedLiveSample('Éléments_bloc_vs_en_ligne', 700, 200, "", "") }}

+ +
+

Note : HTML5 a redéfini les catégories d'éléments dans HTML5 : voir catégories de contenu d'éléments. Bien que ces définitions soient plus précises et moins ambiguës que celles qui précèdent, elles sont beaucoup plus compliquées à comprendre que « block » et « inline ». Nous nous en tiendrons donc à cela tout au long de ce sujet.

+
+ +
+

Note : les termes « block » et « inline », tels qu'utilisés dans cet article, ne doivent pas être confondus avec les types de boîtes des CSS portant les mêmes noms. Alors qu'ils sont corrélés par défaut, modifier le type d'affichage des CSS ne modifie pas la catégorie d'un élément et n'affecte pas les éléments qu'il pourrait contenir ni ceux dans lequel il pourrait être contenu. Une des raisons pour lesquelles HTML5 a abandonné ces termes était d'éviter cette confusion assez courante.

+
+ +
+

Note : Vous trouverez des pages de référence utiles incluant des listes d'éléments de niveau bloc et d'éléments en ligne.

+
+ +

Éléments vides

+ +

Tous les éléments ne suivent pas le modèle ci-dessus d'ouverture de balise, puis contenu, puis fermeture de balise. Certains éléments ne sont composés que d'une balise. Ils servent généralement à insérer / incorporer quelque chose dans le document à l'endroit où ils sont mis. Par exemple, l'élément <img /> ou {{htmlelement("img")}} insère une image dans une page à l'endroit où il est placé (la balise auto-fermante <img /> est à privilégier) :

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" />
+ +

Cela affichera l'élément suivant sur votre page :

+ +

{{ EmbedLiveSample('Éléments_vides', 700, 300, "", "", "hide-codepen-jsfiddle") }}

+ +

Attributs

+ +

Les éléments peuvent aussi avoir des attributs, qui comme suit:

+ +

&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>

+ +

Les attributs contiennent des informations supplémentaires sur l'élément sans qu'elles n'apparaissent dans le contenu réel. Dans ce cas, l'attribut class vous permet de donner à l'élément un nom d'identification qui peut ensuite être utilisé pour cibler l'élément afin de lui attribuer un style CSS ou un comportement particulier, par exemple.

+ +

Pour créer un attribut, il faut :

+ +
    +
  1. insérer un espace entre cet attribut et le nom de l'élément (ou l'attribut précédent, si l'élément possède déjà un ou plusieurs attributs) ;
    2. +
  2. donner un nom à l'attribut, puis ajouter un signe égal ;
    3. +
  3. donner une valeur à l'attribut, entourée par des guillemets d'ouverture et de fermeture.
    4. +
+ +

Apprentissage actif : ajouter des attributs à un élément

+ +

Un autre exemple d'un élément est {{htmlelement("a")}}. Il représente une ancre et permet de transformer en lien l'élément qu'il enveloppe. Il peut recevoir un certain nombre d'attributs, mais voici les deux principaux :

+ + + +

Modifiez la ligne ci-dessous dans la Zone de saisie pour la transformer en lien vers votre site web préféré. Tout d'abord, ajoutez l'élément <a>, puis l'attribut href, puis l'attribut title. Vous pourrez voir la mise à jour de vos modifications en direct dans la Zone de rendu. Vous devriez voir un lien qui, lorsque vous passez votre pointeur de souris dessus, affiche le contenu de l'attribut title et, lorsque vous cliquez dessus, va à l'adresse web indiquée dans l'élément href. N'oubliez pas d'inclure un espace entre le nom de l'élément et chacun des attributs.

+ +

Si vous faites une erreur, vous pouvez toujours réinitialiser la zone de saisie en cliquant sur le bouton Réinitialiser. Si vous êtes vraiment coincé, cliquez sur le bouton Voir la solution pour afficher la réponse.

+ + + + + + + +

{{ EmbedLiveSample('Apprentissage_actif_ajouter_des_attributs_à_un_élément', 700, 400,"","","hide-codepen-jsfiddle") }}

+ +

Les attributs booléens

+ +

Vous verrez parfois des attributs sans valeur définie : c'est tout à fait autorisé. Ils sont appelés attributs booléens ; ils ne peuvent avoir qu'une seule valeur, généralement la même que le nom de l'attribut. Par exemple, prenez l'attribut {{htmlattrxref ("disabled", "input")}}, que vous pouvez affecter aux éléments input (éléments de saisie d'un formulaire) si vous voulez les désactiver (ils seront alors grisés) afin que l'utilisateur ne puisse pas y saisir de données.

+ +
<input type="text" disabled="disabled">
+ +

Pour aller plus vite, il est parfaitement possible d'écrire cette même ligne de la façon suivante (nous avons également inclus un élément input non-désactivé pour référence, pour que vous puissiez vous faire une meilleure idée de ce qui se passe) :

+ +
<input type="text" disabled>
+
+<input type="text">
+
+ +

Ces deux exemples vous donneront le résultat suivant :

+ +

{{ EmbedLiveSample('Les_attributs_booléens', 700, 100) }}

+ +

Omettre des guillemets autour des valeurs d'attribut

+ +

Si vous regardez ce qui se passe sur le Web, vous rencontrerez tous types de styles de balises étranges, y compris des valeurs d'attribut sans guillemets. C'est permis dans certaines circonstances, mais cela va briser votre balisage dans d'autres. Par exemple, si nous revisitons notre exemple de lien ci-dessus, nous pourrons écrire une version de base avec seulement l'attribut href, comme ceci :

+ +
<a href=https://www.mozilla.org/>mon site web favori</a>
+ +

Cependant, si nous ajoutons l'attribut title dans ce même style, cela devient incorrect :

+ +
<a href=https://www.mozilla.org/ title=La page d\'accueil Mozilla >mon site web favori</a>
+ +

En effet, le navigateur interprétera mal la balise, pensant que l'attribut title est en fait quatre attributs — un attribut title avec la valeur « La » et trois attributs booléens, « page », « d\'accueil » et « Mozilla ». Ce n'est évidemment pas ce qui était prévu et cela provoquera des erreurs ou un comportement inattendu dans le code, comme on le voit dans l'exemple en direct ci-dessous. Essayez de passer la souris sur le lien pour voir ce que le texte de title donne.

+ +

{{ EmbedLiveSample("Omettre_des_guillemets_autour_des_valeurs_dattribut", 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

Nous vous recommandons de toujours inclure les guillemets afin d'éviter ce type de problèmes, mais aussi pour que le code soit plus lisible.

+ +

Guillemets simples ou doubles ?

+ +

Dans cet article, vous remarquerez que les valeurs des attributs sont toutes entre des guillemets doubles (" "). Vous pouvez cependant voir des guillemets simples (' ') dans le code HTML de certaines personnes. C'est purement une question de style, et vous êtes libre de choisir la solution que vous préférez. Les deux lignes suivantes sont équivalentes :

+ +
<a href="http://www.exemple.com">Un lien vers mon exemple.</a>
+
+<a href='http://www.example.com'>Un lien vers mon exemple</a>
+ +

Vous devez cependant vous assurer de ne pas les mélanger. Ce qui suit n'est pas correct :

+ +
<a href="http://www.exemple.com'>Un lien vers mon exemple.</a>
+ +

Si vous avez utilisé un type de guillemets dans votre code HTML, vous pouvez imbriquer l'autre type :

+ +
<a href="http://www.exemple.com" title="N'est-ce pas drôle ?">Un lien vers mon exemple.</a>
+ +

Si vous souhaitez imbriquer le même type de guillemets, vous devez utiliser une entité HTML pour représenter ce caractère spécial.

+ +

Anatomie d'un document HTML

+ +

Les éléments HTML basiques ne sont pas très utiles si on les prend séparément. Nous allons voir comment combiner des éléments individuels pour former une page HTML entière :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ma page test</title>
+  </head>
+  <body>
+    <p>Voici ma page web</p>
+  </body>
+</html>
+ +

Ici, nous avons :

+ +
    +
  1. <!DOCTYPE html> : le type de document. Quand HTML était jeune (vers 1991/2), les doctypes étaient censés agir comme des liens vers un ensemble de règles que la page HTML devait suivre pour être considérée comme un bon HTML, ce qui pouvait signifier la vérification automatique des erreurs et d'autres choses utiles. Habituellement, ils ressemblaient à ceci : + + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    + Cependant, de nos jours personne ne se soucie vraiment d'eux, et ils sont juste un artefact historique qui doit être inclus pour que tout fonctionne bien. <!DOCTYPE html> est la chaîne de caractères la plus courte qui soit un doctype valide. C'est tout ce que vous avez vraiment besoin de savoir.
    2. +
  2. <html></html> : l'élément <html>. Cet élément est le contenant de tout le code de la page et est parfois connu comme l'élément racine.
    3. +
  3. <head></head> : l'élément <head>. Cet élément a le rôle de conteneur pour toute chose que vous souhaitez inclure dans la page HTML qui ne soit pas du contenu à afficher aux visiteurs de la page : mots clés, description de page que vous souhaitez voir apparaître dans les résultats de recherche, style CSS, déclarations de jeu de caractères et plus encore. Nous vous en dirons plus à ce sujet dans l'article suivant de la série.
    4. +
  4. <meta charset="utf-8"> : cet élément définit que le jeu de caractères à utiliser pour votre document est UTF-8. Ce jeu comporte la quasi‑totalité des caractères de toutes les écritures de langues humaines connues. Actuellement, il peut pour l'essentiel gérer tout contenu textuel que vous y pourriez mettre. Il n'y a aucune raison de ne pas définir cela et il peut permettre d'éviter certains problèmes plus tard.
    5. +
  5. <title></title> : l'élément title. Il définit le titre de la page, celui qui s'affiche dans l'onglet du navigateur dans lequel la page est chargée et qui est utilisé pour décrire la page lorsque vous la marquez ou l'ajoutez aux favoris.
    6. +
  6. <body></body> : l'élément <body>. Il contient tout le contenu que vous souhaitez afficher aux internautes lorsqu'ils visitent votre page, que ce soit du texte, des images, des vidéos, des jeux, des pistes audio jouables ou autre.
    7. +
+ +

Apprentissage actif : ajouter certaines fonctionnalités à un document HTML

+ +

Si vous voulez essayer d'écrire du HTML sur votre ordinateur en local, vous pouvez :

+ +
    +
  1. copier l'exemple de page HTML ci-dessus.
    2. +
  2. créer un nouveau fichier dans votre éditeur de texte.
    3. +
  3. coller le code dans le nouveau fichier texte.
    4. +
  4. enregistrer le fichier sous index.html.
    5. +
+ +
+

Note : Vous pouvez également trouver ce modèle HTML dans le dépôt GitHub MDN Learning Area.

+
+ +

Vous pouvez maintenant ouvrir ce fichier dans un navigateur Web pour voir à quoi ressemble le rendu, puis modifier le code et actualiser le navigateur pour voir le résultat. Initialement, il ressemblera à ceci:

+ +

Une simple page HTML affichant Voici ma pageDans cet exercice, vous pouvez modifier le code sur votre ordinateur, comme indiqué ci-dessus, ou directement dans la fenêtre d'exemple modifiable ci-dessous (la fenêtre d'exemple modifiable représente uniquement le contenu de l'élément <body>. ) Nous aimerions que vous le fassiez en suivant les étapes suivantes :

+ + + +

Si vous faites une erreur, vous pouvez toujours recommencer en utilisant le bouton Réinitialiser. Si vous êtes vraiment coincé, appuyez sur le bouton Voir la solution pour l'afficher.

+ + + + + + + +

{{ EmbedLiveSample('Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML', 700, 600, "", "", "hide-codepen-jsfiddle") }}

+ +

Espace vide en HTML

+ +

Dans les exemples ci-dessus, vous avez peut-être remarqué que beaucoup d'espaces sont inclus dans le code — ce n'est pas nécessaire du tout. Les deux extraits de code suivants sont équivalents:

+ +
<p>Les chiens sont idiots.</p>
+
+<p>Les chiens        sont
+           idiots.</p>
+ +

Peu importe la quantité d'espace que vous utilisez (pour inclure des espaces, ou aussi des sauts de ligne), l'analyseur HTML réduit chacun à un seul espace lors du rendu du code. Alors, pourquoi utiliser autant d'espace blanc? La réponse est la lisibilité — car il est tellement plus facile de comprendre ce qui se passe dans votre code si vous l'avez bien formaté, et non pas simplement l'écrire dans un grand désordre. Dans notre HTML, nous avons chaque élément imbriqué indenté par deux espaces plus que celui qui le contient. C'est à vous de choisir le style de formatage que vous utilisez (combien d'espaces pour chaque niveau d'indentation, par exemple), mais vous devriez envisager d'utiliser une sorte de formatage.

+ +

Références d'entités : inclure les caractères spéciaux en HTML

+ +

En HTML, les caractères <, >,",' et & sont des caractères spéciaux. Ils font partie de la syntaxe HTML elle-même, alors comment inclure un de ces caractères dans du texte, par exemple si vous voulez vraiment utiliser une esperluette(&) ou un signe inférieur(<), qui ne soit pas interpré en tant que code comme les navigateurs pourraient le faire ?

+ +

Nous devons utiliser les références des caractères — codes spéciaux qui représentent des caractères et peuvent être utilisés dans ces circonstances exactes. Chaque référence de caractère est démarrée avec une esperluette (&), et se termine par un point-virgule (;).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Le caractèreRéference équivalent
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

Dans l'exemple ci-dessous, voici deux paragraphes parlant de techniques Web :

+ +
<p>En HTML, un paragraphe se définit avec l'élément <p>.</p>
+
+<p>En HTML, un paragraphe se définit avec l'élément &lt;p&gt;.</p>
+ +

Dans la zone de rendu en direct ci-dessous, vous pouvez voir que le premier paragraphe n'est pas correctement affiché : le navigateur interprète le second <p> comme le début d'un nouveau paragraphe ! Le deuxième paragraphe est bien affiché, car nous avons remplacé les signes inférieur(<) et supérieur(>) par leurs références de caractère.

+ +

{{ EmbedLiveSample("Références_dentités", 700, 200, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note : Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia : Liste des entités caractère de XML et HTML.

+
+ +

Commentaires en HTML

+ +

En HTML, comme pour la plupart des langages de programmation, il existe un mécanisme permettant d'écrire des commentaires dans le code. Les commentaires sont ignorés par le navigateur et invisibles à l'utilisateur. Leur but est de permettre d'inclure des commentaires dans le code pour dire comment il fonctionne, que font les diverses parties du code, etc. Cela peut s'avérer très utile si vous revenez à un codage que vous n'avez pas travaillé depuis 6 mois et que vous ne pouvez pas vous rappeler ce que vous avez fait — ou si vous donnez votre code à quelqu'un d'autre pour qu'il y travaille.

+ +

Pour transformer une section de contenu dans votre fichier HTML en commentaire, vous devez la mettre dans les marqueurs spéciaux <!-- et-->, par exemple :

+ +
<p>Je ne suis pas dans un commentaire</p>
+
+<!-- <p>Je suis dans un commmentaire!</p> -->
+ +

Comme vous pouvez le voir ci-dessous, le premier paragraphe apparaît dans le rendu de l'éditeur en ligne, mais le second n'apparaît pas.

+ +

{{ EmbedLiveSample('Commentaires_en_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

Résumé

+ +

Vous avez atteint la fin de l'article — nous espérons que vous avez apprécié de faire le tour des bases du HTML ! À ce stade, vous devez comprendre à quoi ce langage ressemble, comment il fonctionne à un niveau de base, et être en mesure d'écrire quelques éléments et attributs. C'est parfait pour le moment, car dans les articles suivants, nous allons approfondir certaines des choses que vous venez de voir, et introduire de nouveaux aspects du langage. Restez à l'écoute !

+ +
+

Note : À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style CSS. CSS est le langage utilisé pour composer vos pages Web (par exemple, changer la police ou les couleurs, ou modifier la mise en page). HTML et CSS vont très bien ensemble, comme vous allez bientôt le découvrir.

+
+ +

Voir aussi

+ + + +
{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html deleted file mode 100644 index 213a383e88..0000000000 --- a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html +++ /dev/null @@ -1,951 +0,0 @@ ---- -title: Fondamentaux du texte HTML -slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals -tags: - - Apprendre - - Débutant - - Guide - - HTML - - Introduction à l'HTML - - Listes - - Paragraphes - - Texte - - Titres - - sémantique -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals -original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
- -

L'un des principaux buts de HTML est de structurer du texte et lui donner du sens (ce que l'on appelle la {{glossary("sémantique")}}) afin que le navigateur puisse l'afficher correctement. Cet article explique comment {{glossary("HTML")}} peut être utilisé pour structurer une page en ajoutant des titres et des paragraphes, en marquant des emphases, en créant des listes, et bien plus encore.

- - - - - - - - - - - - -
Pré-requis: -

Connaître les bases du langage HTML, telles que traitées à la page Commencer avec le HTML.

-
Objectif: -

Apprendre comment ajouter des balises dans une page de texte simple pour la structurer et lui donner du sens — en incluant des paragraphes, des titres, des listes, des emphases et des citations.

-
- -

Les bases : titres et paragraphes

- -

La plupart des textes structurés comprennent des titres et des paragraphes, que ce soit dans les romans, les journaux, les livres scolaires, les magazines, etc.

- -

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

- -

Le contenu structuré facilite la lecture et la rend plus agréable.

- -

En HTML, les paragraphes doivent être contenus dans un élément {{htmlelement("p")}}, comme ceci :

- -
<p>Je suis un paragraphe, oh oui je le suis.</p>
- -

Chaque titre doit être contenu dans un élément titre :

- -
<h1>Je suis le titre de l'histoire.</h1>
- -

Il y a 6 éléments de titre — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, et {{htmlelement("h6")}}. Chaque élément représente un niveau de titre différent ; <h1> représente le titre principal, <h2> représente un sous-titre, <h3> représente un sous-sous-titre, et ainsi de suite jusqu'au niveau de titre le plus bas qui correspond à <h6>.

- -

Implémentation de la hiérarchie structurale

- -

Dans une histoire, la balise <h1> représenterait le titre de l'histoire, les balises <h2> représenteraient les titres des chapitres, les balises <h3> les sous-sections des chapitres, en poursuivant ainsi jusqu'à la balise <h6>.

- -
<h1>L'ennui mortel</h1>
-
-<p>par Chris Mills</p>
-
-<h2>Chapitre I : La nuit noire</h2>
-
-<p>Il faisait nuit noire. Quelque part une chouette ululait. La pluie tombait sur ...</p>
-
-<h2>Chapitre II : Le silence éternel</h2>
-
-<p>Notre protagoniste ne pouvait même pas murmurer à l'ombre de la silhouette...</p>
-
-<h3>Le spectre parle</h3>
-
-<p>Plusieurs heures s'étaient écoulées, quand soudain le spectre assis se releva et s'exclama : « S'il vous plaît, ayez pitié de mon âme ! »...</p>
- -

C'est vous qui décidez ce que représentent les éléments utilisés tant que la hiérarchie a du sens. Vous devez cependant garder à l'esprit quelques bonnes pratiques lorsque vous créez de telles structures :

- - - -

Pourquoi faut-il structurer un document ?

- -

Pour répondre à cette question, regardons la page text-start.html — le point de départ de l'exemple que nous allons utiliser dans cet article (une recette). Enregistrez une copie de ce fichier sur votre ordinateur car vous en aurez besoin pour les exercices qui vont suivre. Le corps de ce document contient plusieurs parties sans aucune balise ; elles sont seulement séparées par des retours chariots (obtenus en pressant la touche Entrée ou ⏎)

- -

Cependant, si l'on ouvre ce document dans un navigateur, il sera affiché sous forme d'un gros bloc de texte !

- -

Une page Web qui montre un mur de texte non formaté, parce qu'il n'y a pas d'éléments sur la page pour la structurer.

- -

Ceci est dû au fait qu'il n'y a aucun élément indiquant la structure du contenu, et donc le navigateur ne sait pas différencier ce qui est un titre d'un paragraphe. De plus :

- - - -

Il est donc nécessaire d'ajouter des balises de structuration du contenu.

- -

Apprentissage actif : structurer le contenu

- -

Dans l'exemple ci-dessous, ajoutez des balises dans le texte de la zone Code modifiable afin qu'il fasse apparaître un titre et deux paragraphes dans le champ Sortie directe.

- -

Si vous faites une erreur, vous pouvez recommencer en appuyant sur le bouton Réinitialiser. Si vous êtes bloqués, appuyez sur le bouton Voir la solution pour afficher la réponse.

- - - - - - - -

{{ EmbedLiveSample('Apprentissage_actif_structurer_le_contenu', 700, 370) }}

- -

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.)

- -

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 ».

- -
<h1>Ceci est un titre principal</h1>
- -

Par défaut, le navigateur l'affiche avec une police de caractères de grande taille pour qu'il ait l'apparence d'un titre (même si vous pourriez lui donner l'apparence de n'importe quel élément avec le CSS). Plus important encore, sa valeur sémantique est utilisée de différentes manières, notamment par les moteurs de recherche ou les lecteurs d'écran (comme expliqué plus haut).

- -

D'autre part, vous pouvez faire ressembler n'importe quel élément à un titre principal. Par exemple :

- -
<span style="font-size: 32px; margin: 21px 0;">Est-ce un titre principal?</span>
- -

C'est un élément {{htmlelement("span")}}. Il n'a pas de valeur sémantique. Il s'utilise autour d'un contenu auquel vous souhaitez appliquer un style CSS (ou le modifier avec du JavaScript) sans lui donner une signification supplémentaire (vous en apprendrez plus à ce propos plus loin dans ce cours). Nous lui avons appliqué du CSS pour qu'il ressemble à un titre principal, mais comme il n'a pas de valeur sémantique, il ne bénéficie d'aucune des valeurs sémantiques décrites plus haut. Il est conseillé d'utiliser des éléments HTML adaptés à leur rôle.

- -

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.

- -

Listes non-ordonnées

- -

Les listes non-ordonnées sont utilisées pour représenter des listes d'éléments pour lesquelles l'ordre n'a pas d'importance. Prenons par exemple une liste de courses :

- -
lait
-œufs
-pain
-houmous
- -

Les listes non-ordonnées débutent par un élément {{htmlelement("ul")}} (unorderd list) qui enveloppe tous les éléments de la liste:

- -
<ul>
-lait
-œufs
-pain
-houmous
-</ul>
- -

Chaque item est contenu dans un élément {{htmlelement("li")}} (list item):

- -
<ul>
-  <li>lait</li>
-  <li>œufs</li>
-  <li>pain</li>
-  <li>houmous</li>
-</ul>
- -

Apprentissage actif : mettre des balises à une liste non-ordonnée

- -

Modifiez l'exemple ci-dessous pour créer votre propre liste HTML non-ordonnée.

- - - - - - - -

{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_à_une_liste_non-ordonnée', 700, 400) }}

- -

Listes ordonnées

- -

Les listes ordonnées permettent de représenter des listes dans lesquelles l'ordre des éléments a de l'importance — prenons par exemple une série de directions à suivre:

- -
Roulez jusqu'au bout de la route
-Tournez à droite
-Allez tout droit aux deux premiers ronds-points
-Tournez à gauche au troisième rond-point
-Roulez sur 300 mètres, l'école est sur votre droite
- -

Les balises suivent la même structure que pour les listes ordonnées, à cela près que la liste est contenue dans l'élément {{htmlelement("ol")}} (ordered list), et non dans <ul>:

- -
<ol>
-  <li>Roulez jusqu'au bout de la route</li>
-  <li>Tournez à droite</li>
-  <li>Allez tout droit aux deux premiers ronds-points</li>
-  <li>Tournez à gauche au troisième rond-point</li>
-  <li>Roulez sur 300 mètres, l'école est sur votre droite</li>
-</ol>
- -

Apprentissage actif : baliser une liste ordonnée

- -

Modifiez l'exemple ci‑dessous pour créer votre propre liste HTML ordonnée.

- - - - - - - -

{{ EmbedLiveSample('Apprentissage_actif_baliser_une_liste_ordonnée', 700, 500) }}

- -

Apprentissage actif : mettre des balises pour une recette de cuisine

- -

Si vous êtes arrivé jusqu'ici dans l'article, vous avez toutes les connaissances nécessaires pour mettre en forme la recette de cuisine donnée en exemple. Vous pouvez soit télécharger le fichier text-start.html et le modifier de votre côté, soit faire l'exercice dans l'exemple modifiable ci-dessous. Il est conseillé de le modifier localement, sur votre machine, car vous pourrez alors enregistrer votre travail. Si vous utilisez l'exemple modifiable de cette page, le travail sera perdu à l'ouverture suivante de la page. Chaque méthode a ses avantages et ses inconvénients.

- - - - - - - -

{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_pour_une_recette_de_cuisine', 700, 500) }}

- -

Si vous êtes bloqué, vous pouvez cliquer sur le bouton Voir la solution, ou alors regarder l'exemple text-complete.html sur le dépôt GitHub.

- -

Imbriquer des listes

- -

Il est parfaitement possible d'imbriquer une liste dans une autre. Il se peut que vous vouliez insérer une liste à puces derrière une même puce de niveau supérieur. Prenons par exemple la deuxième liste de la recette :

- -
<ol>
-  <li>Ôter la peau de l'ail et le hacher grossièrement.</li>
-  <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li>
-  <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.</li>
-  <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li>
-  <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li>
-</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 :

- -
<ol>
-  <li>Ôter la peau de l'ail et le hacher grossièrement.</li>
-  <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li>
-  <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.
-    <ul>
-      <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li>
-      <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li>
-    </ul>
-  </li>
-</ol>
-
- -

N'hésitez pas à revenir au dernier apprentissage actif pour modifier vous même la liste correspondante dans la recette.

- -

Soulignement et importance

- -

Dans le langage, nous mettons souvent l'accent sur certains mots pour modifier le sens d'une phrase et pour marquer certains mots comme étant importants ou différents d'une manière ou d'une autre. HTML fournit divers éléments de sémantique pour nous permettre de marquer un contenu textuel avec de tels effets. Dans cette section, nous examinerons quelques-uns des plus courants.

- -

Emphase

- -

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. »

- -

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.

- -

En HTML, nous utilisons l'élément {{htmlelement("em")}} (emphase) pour marquer ces circonstances. Outre rendre le document plus intéressant à lire, ces marqueurs sont reconnus par les lecteurs d'écran et exprimés sur un ton de voix différent. Les navigateurs utilisent l'italique par défaut, mais il ne faut pas utiliser cette balise pour mettre en italique. Pour cela, utilisez un élément {{htmlelement("span")}} et du CSS, ou plus simplement un élément {{htmlelement("i")}} (voir ci-dessous).

- -
<p>Je suis <em>content</em> que vous n'ayez pas été <em>en retard</em>.</p>
- -

Grande importance

- -

Pour mettre l'accent sur des mots très importants, nous les soulignons d'un ton particulier dans la langue parlée et nous les mettons en caractères gras dans la langue écrite. Par exemple :

- -

Ce liquide est hautement toxique.

- -

Je compte sur vous. Ne soyez pas en retard !

- -

En HTML, nous utilisons l'élément {{htmlelement("strong")}} (forte importance) comme balise de telles circonstances. En plus de rendre le document plus lisible, ces balises sont reconnues par les lecteurs d'écran et énoncées avec des intonations différentes. Par défaut, les navigateurs mettent le texte marqué en gras, mais il ne faut pas utiliser cette balise pour mettre en gras. Pour cela, utilisez un élément {{htmlelement("span")}}} et du CSS, ou plus simplement un élément {{htmlelement("b")}} (voir ci-dessous).

- -
<p>Ce liquide est <strong>hautement toxique</strong>.</p>
-
-<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p>
- -

Il est possible d'imbriquer strong et em :

- -
<p>Ce liquide est <strong>hautement toxique</strong> —
-si vous en buvez, <strong>vous pourriez en <em>mourir</em></strong>.</p>
- -

Apprentissage actif : soulignez l'important

- -

Dans ce paragraphe d'apprentissage actif, nous avons donné un exemple modifiable. À l'intérieur, nous aimerions que vous essayiez d'ajouter de l'emphase et de l'importance aux mots quand vous pensez qu'ils en ont besoin, juste pour une bonne pratique.

- - - - - - - - -

{{ EmbedLiveSample("Apprentissage_actif_soulignez_l'important", 700, 500) }}

- -

Italique, gras, soulignement…

- -

Les éléments dont nous avons discuté jusqu'à présent ont une sémantique bien définie. La situation avec {{htmlelement("b")}}, {{htmlelement("i")}} et {{htmlelement("u")}} est un peu plus complexe. Ils sont apparus pour que les personnes puissent écrire du texte en gras, en italique ou souligné à une époque où le CSS était encore mal ou pas du tout pris en charge. De tels éléments, qui n'affectent que la présentation et non la sémantique, sont appelés éléments de présentation et ne devraient plus être utilisés, car comme nous l'avons vu précédemment, la sémantique a la plus grande importance pour l'accessibilité, le référencement, etc.

- -

HTML5 a redéfini <b>, <i> et <u> avec de nouveaux rôles sémantiques quelques peu déroutants.

- -

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.

- - - -
-

Note : Un petit avertissement à propos du soulignement : les gens associent fortement soulignement et hyperliens. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément <u> que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait.

-
- -
<!-- noms scientifiques -->
-<p>
-  Le colibri à gorge rouge (<i>Archilochus colubris</i>)
-  est le colibri le plus courant dans l'ouest de l'Amérique du Nord.
-</p>
-
-<!-- mots dans une langue étrangère -->
-<p>
-  Le menu était un océan de mots exotiques comme <i lang="uk-latn">vatrushka</i>,
-  <i lang="id">nasi goreng</i> et <i lang="en">porridge</i>.
-</p>
-
-<!-- une faute d'orthographe connue -->
-<p>
-  Un jour, j'apprendrai comment mieux <u style="text-decoration-line: underline; text-decoration-style: wavy;">épeler</u>.
-</p>
-
-<!-- Mettre en évidence les mots‑clés dans un ensemble d'instructions -->
-<ol>
-  <li>
-    <b>Trancher</b> deux morceaux de pain dans la miche.
-  </li>
-  <li>
-    <b>Mettre</b> une rondelle de tomate et une feuille de laitue
-    entre les deux tranches de pain.
-  </li>
-</ol>
- -

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, 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")}}

- -

Dans ce module

- - 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 new file mode 100644 index 0000000000..213a383e88 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md @@ -0,0 +1,951 @@ +--- +title: Fondamentaux du texte HTML +slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +tags: + - Apprendre + - Débutant + - Guide + - HTML + - Introduction à l'HTML + - Listes + - Paragraphes + - Texte + - Titres + - sémantique +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+ +

L'un des principaux buts de HTML est de structurer du texte et lui donner du sens (ce que l'on appelle la {{glossary("sémantique")}}) afin que le navigateur puisse l'afficher correctement. Cet article explique comment {{glossary("HTML")}} peut être utilisé pour structurer une page en ajoutant des titres et des paragraphes, en marquant des emphases, en créant des listes, et bien plus encore.

+ + + + + + + + + + + + +
Pré-requis: +

Connaître les bases du langage HTML, telles que traitées à la page Commencer avec le HTML.

+
Objectif: +

Apprendre comment ajouter des balises dans une page de texte simple pour la structurer et lui donner du sens — en incluant des paragraphes, des titres, des listes, des emphases et des citations.

+
+ +

Les bases : titres et paragraphes

+ +

La plupart des textes structurés comprennent des titres et des paragraphes, que ce soit dans les romans, les journaux, les livres scolaires, les magazines, etc.

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

Le contenu structuré facilite la lecture et la rend plus agréable.

+ +

En HTML, les paragraphes doivent être contenus dans un élément {{htmlelement("p")}}, comme ceci :

+ +
<p>Je suis un paragraphe, oh oui je le suis.</p>
+ +

Chaque titre doit être contenu dans un élément titre :

+ +
<h1>Je suis le titre de l'histoire.</h1>
+ +

Il y a 6 éléments de titre — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, et {{htmlelement("h6")}}. Chaque élément représente un niveau de titre différent ; <h1> représente le titre principal, <h2> représente un sous-titre, <h3> représente un sous-sous-titre, et ainsi de suite jusqu'au niveau de titre le plus bas qui correspond à <h6>.

+ +

Implémentation de la hiérarchie structurale

+ +

Dans une histoire, la balise <h1> représenterait le titre de l'histoire, les balises <h2> représenteraient les titres des chapitres, les balises <h3> les sous-sections des chapitres, en poursuivant ainsi jusqu'à la balise <h6>.

+ +
<h1>L'ennui mortel</h1>
+
+<p>par Chris Mills</p>
+
+<h2>Chapitre I : La nuit noire</h2>
+
+<p>Il faisait nuit noire. Quelque part une chouette ululait. La pluie tombait sur ...</p>
+
+<h2>Chapitre II : Le silence éternel</h2>
+
+<p>Notre protagoniste ne pouvait même pas murmurer à l'ombre de la silhouette...</p>
+
+<h3>Le spectre parle</h3>
+
+<p>Plusieurs heures s'étaient écoulées, quand soudain le spectre assis se releva et s'exclama : « S'il vous plaît, ayez pitié de mon âme ! »...</p>
+ +

C'est vous qui décidez ce que représentent les éléments utilisés tant que la hiérarchie a du sens. Vous devez cependant garder à l'esprit quelques bonnes pratiques lorsque vous créez de telles structures :

+ + + +

Pourquoi faut-il structurer un document ?

+ +

Pour répondre à cette question, regardons la page text-start.html — le point de départ de l'exemple que nous allons utiliser dans cet article (une recette). Enregistrez une copie de ce fichier sur votre ordinateur car vous en aurez besoin pour les exercices qui vont suivre. Le corps de ce document contient plusieurs parties sans aucune balise ; elles sont seulement séparées par des retours chariots (obtenus en pressant la touche Entrée ou ⏎)

+ +

Cependant, si l'on ouvre ce document dans un navigateur, il sera affiché sous forme d'un gros bloc de texte !

+ +

Une page Web qui montre un mur de texte non formaté, parce qu'il n'y a pas d'éléments sur la page pour la structurer.

+ +

Ceci est dû au fait qu'il n'y a aucun élément indiquant la structure du contenu, et donc le navigateur ne sait pas différencier ce qui est un titre d'un paragraphe. De plus :

+ + + +

Il est donc nécessaire d'ajouter des balises de structuration du contenu.

+ +

Apprentissage actif : structurer le contenu

+ +

Dans l'exemple ci-dessous, ajoutez des balises dans le texte de la zone Code modifiable afin qu'il fasse apparaître un titre et deux paragraphes dans le champ Sortie directe.

+ +

Si vous faites une erreur, vous pouvez recommencer en appuyant sur le bouton Réinitialiser. Si vous êtes bloqués, appuyez sur le bouton Voir la solution pour afficher la réponse.

+ + + + + + + +

{{ EmbedLiveSample('Apprentissage_actif_structurer_le_contenu', 700, 370) }}

+ +

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.)

+ +

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 ».

+ +
<h1>Ceci est un titre principal</h1>
+ +

Par défaut, le navigateur l'affiche avec une police de caractères de grande taille pour qu'il ait l'apparence d'un titre (même si vous pourriez lui donner l'apparence de n'importe quel élément avec le CSS). Plus important encore, sa valeur sémantique est utilisée de différentes manières, notamment par les moteurs de recherche ou les lecteurs d'écran (comme expliqué plus haut).

+ +

D'autre part, vous pouvez faire ressembler n'importe quel élément à un titre principal. Par exemple :

+ +
<span style="font-size: 32px; margin: 21px 0;">Est-ce un titre principal?</span>
+ +

C'est un élément {{htmlelement("span")}}. Il n'a pas de valeur sémantique. Il s'utilise autour d'un contenu auquel vous souhaitez appliquer un style CSS (ou le modifier avec du JavaScript) sans lui donner une signification supplémentaire (vous en apprendrez plus à ce propos plus loin dans ce cours). Nous lui avons appliqué du CSS pour qu'il ressemble à un titre principal, mais comme il n'a pas de valeur sémantique, il ne bénéficie d'aucune des valeurs sémantiques décrites plus haut. Il est conseillé d'utiliser des éléments HTML adaptés à leur rôle.

+ +

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.

+ +

Listes non-ordonnées

+ +

Les listes non-ordonnées sont utilisées pour représenter des listes d'éléments pour lesquelles l'ordre n'a pas d'importance. Prenons par exemple une liste de courses :

+ +
lait
+œufs
+pain
+houmous
+ +

Les listes non-ordonnées débutent par un élément {{htmlelement("ul")}} (unorderd list) qui enveloppe tous les éléments de la liste:

+ +
<ul>
+lait
+œufs
+pain
+houmous
+</ul>
+ +

Chaque item est contenu dans un élément {{htmlelement("li")}} (list item):

+ +
<ul>
+  <li>lait</li>
+  <li>œufs</li>
+  <li>pain</li>
+  <li>houmous</li>
+</ul>
+ +

Apprentissage actif : mettre des balises à une liste non-ordonnée

+ +

Modifiez l'exemple ci-dessous pour créer votre propre liste HTML non-ordonnée.

+ + + + + + + +

{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_à_une_liste_non-ordonnée', 700, 400) }}

+ +

Listes ordonnées

+ +

Les listes ordonnées permettent de représenter des listes dans lesquelles l'ordre des éléments a de l'importance — prenons par exemple une série de directions à suivre:

+ +
Roulez jusqu'au bout de la route
+Tournez à droite
+Allez tout droit aux deux premiers ronds-points
+Tournez à gauche au troisième rond-point
+Roulez sur 300 mètres, l'école est sur votre droite
+ +

Les balises suivent la même structure que pour les listes ordonnées, à cela près que la liste est contenue dans l'élément {{htmlelement("ol")}} (ordered list), et non dans <ul>:

+ +
<ol>
+  <li>Roulez jusqu'au bout de la route</li>
+  <li>Tournez à droite</li>
+  <li>Allez tout droit aux deux premiers ronds-points</li>
+  <li>Tournez à gauche au troisième rond-point</li>
+  <li>Roulez sur 300 mètres, l'école est sur votre droite</li>
+</ol>
+ +

Apprentissage actif : baliser une liste ordonnée

+ +

Modifiez l'exemple ci‑dessous pour créer votre propre liste HTML ordonnée.

+ + + + + + + +

{{ EmbedLiveSample('Apprentissage_actif_baliser_une_liste_ordonnée', 700, 500) }}

+ +

Apprentissage actif : mettre des balises pour une recette de cuisine

+ +

Si vous êtes arrivé jusqu'ici dans l'article, vous avez toutes les connaissances nécessaires pour mettre en forme la recette de cuisine donnée en exemple. Vous pouvez soit télécharger le fichier text-start.html et le modifier de votre côté, soit faire l'exercice dans l'exemple modifiable ci-dessous. Il est conseillé de le modifier localement, sur votre machine, car vous pourrez alors enregistrer votre travail. Si vous utilisez l'exemple modifiable de cette page, le travail sera perdu à l'ouverture suivante de la page. Chaque méthode a ses avantages et ses inconvénients.

+ + + + + + + +

{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_pour_une_recette_de_cuisine', 700, 500) }}

+ +

Si vous êtes bloqué, vous pouvez cliquer sur le bouton Voir la solution, ou alors regarder l'exemple text-complete.html sur le dépôt GitHub.

+ +

Imbriquer des listes

+ +

Il est parfaitement possible d'imbriquer une liste dans une autre. Il se peut que vous vouliez insérer une liste à puces derrière une même puce de niveau supérieur. Prenons par exemple la deuxième liste de la recette :

+ +
<ol>
+  <li>Ôter la peau de l'ail et le hacher grossièrement.</li>
+  <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li>
+  <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.</li>
+  <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li>
+  <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li>
+</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 :

+ +
<ol>
+  <li>Ôter la peau de l'ail et le hacher grossièrement.</li>
+  <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li>
+  <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.
+    <ul>
+      <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li>
+      <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li>
+    </ul>
+  </li>
+</ol>
+
+ +

N'hésitez pas à revenir au dernier apprentissage actif pour modifier vous même la liste correspondante dans la recette.

+ +

Soulignement et importance

+ +

Dans le langage, nous mettons souvent l'accent sur certains mots pour modifier le sens d'une phrase et pour marquer certains mots comme étant importants ou différents d'une manière ou d'une autre. HTML fournit divers éléments de sémantique pour nous permettre de marquer un contenu textuel avec de tels effets. Dans cette section, nous examinerons quelques-uns des plus courants.

+ +

Emphase

+ +

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. »

+ +

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.

+ +

En HTML, nous utilisons l'élément {{htmlelement("em")}} (emphase) pour marquer ces circonstances. Outre rendre le document plus intéressant à lire, ces marqueurs sont reconnus par les lecteurs d'écran et exprimés sur un ton de voix différent. Les navigateurs utilisent l'italique par défaut, mais il ne faut pas utiliser cette balise pour mettre en italique. Pour cela, utilisez un élément {{htmlelement("span")}} et du CSS, ou plus simplement un élément {{htmlelement("i")}} (voir ci-dessous).

+ +
<p>Je suis <em>content</em> que vous n'ayez pas été <em>en retard</em>.</p>
+ +

Grande importance

+ +

Pour mettre l'accent sur des mots très importants, nous les soulignons d'un ton particulier dans la langue parlée et nous les mettons en caractères gras dans la langue écrite. Par exemple :

+ +

Ce liquide est hautement toxique.

+ +

Je compte sur vous. Ne soyez pas en retard !

+ +

En HTML, nous utilisons l'élément {{htmlelement("strong")}} (forte importance) comme balise de telles circonstances. En plus de rendre le document plus lisible, ces balises sont reconnues par les lecteurs d'écran et énoncées avec des intonations différentes. Par défaut, les navigateurs mettent le texte marqué en gras, mais il ne faut pas utiliser cette balise pour mettre en gras. Pour cela, utilisez un élément {{htmlelement("span")}}} et du CSS, ou plus simplement un élément {{htmlelement("b")}} (voir ci-dessous).

+ +
<p>Ce liquide est <strong>hautement toxique</strong>.</p>
+
+<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p>
+ +

Il est possible d'imbriquer strong et em :

+ +
<p>Ce liquide est <strong>hautement toxique</strong> —
+si vous en buvez, <strong>vous pourriez en <em>mourir</em></strong>.</p>
+ +

Apprentissage actif : soulignez l'important

+ +

Dans ce paragraphe d'apprentissage actif, nous avons donné un exemple modifiable. À l'intérieur, nous aimerions que vous essayiez d'ajouter de l'emphase et de l'importance aux mots quand vous pensez qu'ils en ont besoin, juste pour une bonne pratique.

+ + + + + + + + +

{{ EmbedLiveSample("Apprentissage_actif_soulignez_l'important", 700, 500) }}

+ +

Italique, gras, soulignement…

+ +

Les éléments dont nous avons discuté jusqu'à présent ont une sémantique bien définie. La situation avec {{htmlelement("b")}}, {{htmlelement("i")}} et {{htmlelement("u")}} est un peu plus complexe. Ils sont apparus pour que les personnes puissent écrire du texte en gras, en italique ou souligné à une époque où le CSS était encore mal ou pas du tout pris en charge. De tels éléments, qui n'affectent que la présentation et non la sémantique, sont appelés éléments de présentation et ne devraient plus être utilisés, car comme nous l'avons vu précédemment, la sémantique a la plus grande importance pour l'accessibilité, le référencement, etc.

+ +

HTML5 a redéfini <b>, <i> et <u> avec de nouveaux rôles sémantiques quelques peu déroutants.

+ +

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.

+ + + +
+

Note : Un petit avertissement à propos du soulignement : les gens associent fortement soulignement et hyperliens. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément <u> que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait.

+
+ +
<!-- noms scientifiques -->
+<p>
+  Le colibri à gorge rouge (<i>Archilochus colubris</i>)
+  est le colibri le plus courant dans l'ouest de l'Amérique du Nord.
+</p>
+
+<!-- mots dans une langue étrangère -->
+<p>
+  Le menu était un océan de mots exotiques comme <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> et <i lang="en">porridge</i>.
+</p>
+
+<!-- une faute d'orthographe connue -->
+<p>
+  Un jour, j'apprendrai comment mieux <u style="text-decoration-line: underline; text-decoration-style: wavy;">épeler</u>.
+</p>
+
+<!-- Mettre en évidence les mots‑clés dans un ensemble d'instructions -->
+<ol>
+  <li>
+    <b>Trancher</b> deux morceaux de pain dans la miche.
+  </li>
+  <li>
+    <b>Mettre</b> une rondelle de tomate et une feuille de laitue
+    entre les deux tranches de pain.
+  </li>
+</ol>
+ +

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, 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")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/index.html b/files/fr/learn/html/introduction_to_html/index.html deleted file mode 100644 index d4a5b51dbd..0000000000 --- a/files/fr/learn/html/introduction_to_html/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Introduction au HTML -slug: Learn/HTML/Introduction_to_HTML -tags: - - Codage - - HTML - - Introduction au HTML - - Landing - - Liens - - Structure - - Texte - - head - - sémantique -translation_of: Learn/HTML/Introduction_to_HTML -original_slug: Apprendre/HTML/Introduction_à_HTML ---- -
{{LearnSidebar}}
- -

Dans son cœur, {{glossary("HTML")}} est un langage vraiment simple, composé d'éléments appliquables à des fragments de texte dans un document pour leur donner un sens différent (est-ce un paragraphe ? est-ce une liste à puces ? est-ce une partie de tableau ?), pour structurer un document en sections logiques (a‑t‑il un en-tête ? est-il sur trois colonnes ? a-t-il un menu de navigation ?) et pour intégrer du contenu comme images ou vidéos dans une page. Ce module est une introduction aux deux premiers concepts ; il présente les notions fondamentales et la syntaxe à connaître pour comprendre le HTML.

- -

Prérequis

- -

Il n'y a pas besoin de connaissances préalables en HTML pour parcourir ce module, mais vous devez au moins être familier des ordinateurs et d'une utilisation passive du Web (càd. juste le parcourir et consommer son contenu). Vous devriez avoir un environnement de travail en place tel que détaillé dans cet article et comprendre comment créer et gérer des fichiers tel qu'expliqué dans cet autre article — ces deux articles font partie du module Démarrer avec le Web qui s'adresse aux débutants.

- -
-

Note : Si vous travaillez sur un ordinateur, tablette ou autre appareil sur lequel il n'est pas posssible de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code grâce à des outils en ligne comme JSBin ou Thimble.

-
- -

Guides

- -

Ce module contient les articles suivants vous permettant de parcourir toute la théorie des bases du HTML ; il vous donnera amplement l'occasion de tester vos compétences.

- -
-
Commencer avec le HTML
-
Cet article porte sur les fondements du HTML pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour attiser votre intérêt.
-
Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML
-
head dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML grâce des CSS), des liens aux favicons et des méta-données (auteur du document, mots-clés décrivant le document, etc.).
-
Les concepts fondamentaux du HTML liés au texte
-
Un des rôles principaux du HTML est de donner un sens au texte (on dit aussi sémantiser), afin que le navigateur sache comment l'afficher correctement. Cet article montre comment utiliser le HTML pour fractionner un bloc de texte en une structure avec titres et paragraphes, ajouter des marques d'emphase ou d'importance à des mots, créer des listes, etc.
-
Créer des hyperliens
-
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
-
Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article Les concepts fondamentaux du HTML liés au texte. Les éléments abordés ici sont moins connus mais tout aussi utiles. 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
-
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
-
Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider.
-
- -

Évaluations

- -

Les exercices suivants vous permettront de tester votre compréhension des bases du HTML couvertes dans les guides ci‑dessus.

- -
-
Utiliser les bons éléments pour une lettre
-
Tôt ou tard, nous apprenons tous à écrire une lettre ; cet exemple est utile pour tester vos compétences en mise en forme de texte. L'exercice consiste à baliser une lettre.
-
Organiser la structure d'une page
-
Dans cette évaluation, vous devrez organiser la structure d'une page simple avec un en-tête, un pied de page, un menu de navigation, un contenu principal et une barre latérale.
-
- -

Voir également

- -
-
Web literacy basics 1
-
Un excellent cours de la fondation Mozilla qui évoque et teste un grand nombre de compétences évoquées dans le module « Introduction à HTML ». Les apprenants peuvent s'y familiariser avec la lecture, l'écriture et la participation au Web dans ce module en six parties. Découvrez les fondations du Web à travers la production et la collaboration.
-
diff --git a/files/fr/learn/html/introduction_to_html/index.md b/files/fr/learn/html/introduction_to_html/index.md new file mode 100644 index 0000000000..d4a5b51dbd --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/index.md @@ -0,0 +1,66 @@ +--- +title: Introduction au HTML +slug: Learn/HTML/Introduction_to_HTML +tags: + - Codage + - HTML + - Introduction au HTML + - Landing + - Liens + - Structure + - Texte + - head + - sémantique +translation_of: Learn/HTML/Introduction_to_HTML +original_slug: Apprendre/HTML/Introduction_à_HTML +--- +
{{LearnSidebar}}
+ +

Dans son cœur, {{glossary("HTML")}} est un langage vraiment simple, composé d'éléments appliquables à des fragments de texte dans un document pour leur donner un sens différent (est-ce un paragraphe ? est-ce une liste à puces ? est-ce une partie de tableau ?), pour structurer un document en sections logiques (a‑t‑il un en-tête ? est-il sur trois colonnes ? a-t-il un menu de navigation ?) et pour intégrer du contenu comme images ou vidéos dans une page. Ce module est une introduction aux deux premiers concepts ; il présente les notions fondamentales et la syntaxe à connaître pour comprendre le HTML.

+ +

Prérequis

+ +

Il n'y a pas besoin de connaissances préalables en HTML pour parcourir ce module, mais vous devez au moins être familier des ordinateurs et d'une utilisation passive du Web (càd. juste le parcourir et consommer son contenu). Vous devriez avoir un environnement de travail en place tel que détaillé dans cet article et comprendre comment créer et gérer des fichiers tel qu'expliqué dans cet autre article — ces deux articles font partie du module Démarrer avec le Web qui s'adresse aux débutants.

+ +
+

Note : Si vous travaillez sur un ordinateur, tablette ou autre appareil sur lequel il n'est pas posssible de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code grâce à des outils en ligne comme JSBin ou Thimble.

+
+ +

Guides

+ +

Ce module contient les articles suivants vous permettant de parcourir toute la théorie des bases du HTML ; il vous donnera amplement l'occasion de tester vos compétences.

+ +
+
Commencer avec le HTML
+
Cet article porte sur les fondements du HTML pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour attiser votre intérêt.
+
Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML
+
head dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML grâce des CSS), des liens aux favicons et des méta-données (auteur du document, mots-clés décrivant le document, etc.).
+
Les concepts fondamentaux du HTML liés au texte
+
Un des rôles principaux du HTML est de donner un sens au texte (on dit aussi sémantiser), afin que le navigateur sache comment l'afficher correctement. Cet article montre comment utiliser le HTML pour fractionner un bloc de texte en une structure avec titres et paragraphes, ajouter des marques d'emphase ou d'importance à des mots, créer des listes, etc.
+
Créer des hyperliens
+
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
+
Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article Les concepts fondamentaux du HTML liés au texte. Les éléments abordés ici sont moins connus mais tout aussi utiles. 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
+
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
+
Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider.
+
+ +

Évaluations

+ +

Les exercices suivants vous permettront de tester votre compréhension des bases du HTML couvertes dans les guides ci‑dessus.

+ +
+
Utiliser les bons éléments pour une lettre
+
Tôt ou tard, nous apprenons tous à écrire une lettre ; cet exemple est utile pour tester vos compétences en mise en forme de texte. L'exercice consiste à baliser une lettre.
+
Organiser la structure d'une page
+
Dans cette évaluation, vous devrez organiser la structure d'une page simple avec un en-tête, un pied de page, un menu de navigation, un contenu principal et une barre latérale.
+
+ +

Voir également

+ +
+
Web literacy basics 1
+
Un excellent cours de la fondation Mozilla qui évoque et teste un grand nombre de compétences évoquées dans le module « Introduction à HTML ». Les apprenants peuvent s'y familiariser avec la lecture, l'écriture et la participation au Web dans ce module en six parties. Découvrez les fondations du Web à travers la production et la collaboration.
+
diff --git a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html deleted file mode 100644 index faa34e068d..0000000000 --- a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Faire une lettre -slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter -tags: - - Codage - - Débutant - - Evaluation - - HTML - - Liens - - Texte - - en-tête -translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter -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.

- - - - - - - - - - - - -
Prérequis :Avant de se lancer dans cet exercice, vous devez déja avoir travaillé Commencer avec le HTML, Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML, Fondamentaux du texte HTML, Création d'hyperliens et Formatage avancé du texte.
Objectif :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 <head>.
- -

Point de départ

- -

Pour commencer cet exercice, vous devez récupérer le texte brut que vous allez baliser et les CSS à inclure 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 ou Thimble pour faire l'exercice.)

- -

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 en ligne :

- - - -

Dans l'en‑tête du document :

- - - -

Conseils et astuces

- - - -

Exemple

- -

La capture d'écran suivante montre ce à quoi la lettre devrait ressembler après le balisage.

- -

Présentation de la lettre

- -

É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 ou sur le canal IRC #mdn sur Mozilla 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")}}

- -

Dans ce module

- - 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 new file mode 100644 index 0000000000..faa34e068d --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md @@ -0,0 +1,104 @@ +--- +title: Faire une lettre +slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +tags: + - Codage + - Débutant + - Evaluation + - HTML + - Liens + - Texte + - en-tête +translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +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.

+ + + + + + + + + + + + +
Prérequis :Avant de se lancer dans cet exercice, vous devez déja avoir travaillé Commencer avec le HTML, Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML, Fondamentaux du texte HTML, Création d'hyperliens et Formatage avancé du texte.
Objectif :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 <head>.
+ +

Point de départ

+ +

Pour commencer cet exercice, vous devez récupérer le texte brut que vous allez baliser et les CSS à inclure 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 ou Thimble pour faire l'exercice.)

+ +

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 en ligne :

+ + + +

Dans l'en‑tête du document :

+ + + +

Conseils et astuces

+ + + +

Exemple

+ +

La capture d'écran suivante montre ce à quoi la lettre devrait ressembler après le balisage.

+ +

Présentation de la lettre

+ +

É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 ou sur le canal IRC #mdn sur Mozilla 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")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html deleted file mode 100644 index 0fa7c74921..0000000000 --- a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Structurer une page de contenu -slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content -translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content -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.

- - - - - - - - - - - - -
Prérequis :Avant de commencer cette évaluation, vous devriez avoir déjà travaillé sur le reste du cours, en particulier sur Structure de Site Web et de document
Objectif :Tester vos connaissances sur la structure des pages web et d'une représentation prospective d'un design de mise en page avec un balisage.
- -

Point de départ

- -

Pour commencer cet exercice, vous pouvez télécharger l'archive contenant les fichiers nécessaires à cette évaluation. Elle contient :

- - - -

Décompressez l'archive sur votre ordinateur, ou bien utilisez un site web comme JSBin ou Thimble pour faire votre évaluation.

- -

Aperçu du projet

- -

Dans ce projet, l'objectif est d'ajouter des éléments structurels au contenu de la page d'accueil d'un site d'observation d'oiseaux pour parfaire sa mise en page. La page devra contenir :

- - - -

Vous devez ajouter les enveloppes appropriées pour :

- - - -

Vous devez aussi

- - - -

Conseils et astuces

- - - -

Exemple

- -

La capture d'écran suivante montre un exemple de ce à quoi la page d'accueil peut ressembler après avoir été balisée.

- -

L'exemple de l'exercice complété ; une page web unique sur l'observation des oiseaux, comprenant un en-tête "Observons les oiseaux", des photos d'oiseaux et un message de bienvenue.

- -

É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 ou sur le canal IRC #mdn sur Mozilla 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")}}

- -

Dans ce module

- - 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 new file mode 100644 index 0000000000..0fa7c74921 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md @@ -0,0 +1,97 @@ +--- +title: Structurer une page de contenu +slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +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.

+ + + + + + + + + + + + +
Prérequis :Avant de commencer cette évaluation, vous devriez avoir déjà travaillé sur le reste du cours, en particulier sur Structure de Site Web et de document
Objectif :Tester vos connaissances sur la structure des pages web et d'une représentation prospective d'un design de mise en page avec un balisage.
+ +

Point de départ

+ +

Pour commencer cet exercice, vous pouvez télécharger l'archive contenant les fichiers nécessaires à cette évaluation. Elle contient :

+ + + +

Décompressez l'archive sur votre ordinateur, ou bien utilisez un site web comme JSBin ou Thimble pour faire votre évaluation.

+ +

Aperçu du projet

+ +

Dans ce projet, l'objectif est d'ajouter des éléments structurels au contenu de la page d'accueil d'un site d'observation d'oiseaux pour parfaire sa mise en page. La page devra contenir :

+ + + +

Vous devez ajouter les enveloppes appropriées pour :

+ + + +

Vous devez aussi

+ + + +

Conseils et astuces

+ + + +

Exemple

+ +

La capture d'écran suivante montre un exemple de ce à quoi la page d'accueil peut ressembler après avoir été balisée.

+ +

L'exemple de l'exercice complété ; une page web unique sur l'observation des oiseaux, comprenant un en-tête "Observons les oiseaux", des photos d'oiseaux et un message de bienvenue.

+ +

É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 ou sur le canal IRC #mdn sur Mozilla 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")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html deleted file mode 100644 index af254c337d..0000000000 --- a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ /dev/null @@ -1,287 +0,0 @@ ---- -title: Qu'avez-vous dans la tête ? Métadonnées en HTML -slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML -translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML -original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}
- -

L'en-tête {{glossary("Head", "head")}} dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML avec des CSS), des liens aux favicons personnalisés et d'autres méta-données (auteur du document, mots-clés décrivant le document, etc.). Cet article porte sur tout ceci et plus, pour vous donner de bonnes bases pour gérer les balises et le code qui devraient figurer dans l'en-tête.

- - - - - - - - - - - - -
Prérequis:Connaître les bases du HTML, telles qu'elles sont exposées dans l'article Commencer avec le HTML
Objectifs:En savoir plus sur la balise <head> du HTML, son objet, les éléments les plus importants qu'elle peut contenir et l'effet qu'elle peut avoir sur le document HTML.
- -

Qu'est-ce que l'en-tête de HTML ?

- -

Revoyons le document HTML de base de l' article précédent:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Ma page test</title>
-  </head>
-  <body>
-    <p>Voici ma page</p>
-  </body>
-</html>
- -

Le contenu de l'en-tête HTML {{htmlelement("head")}} — à la difference du contenu de l'élément {{htmlelement("body")}} (affiché quand la page est chargée par le navigateur) — n'est pas affiché dans la page du navigateur. Le travail de la balise <head> est de contenir les {{glossary("Metadata", "métadonnées")}} à propos du document. Dans l'exemple ci-dessus, l'en-tête est plutôt petit :

- -
<head>
-  <meta charset="utf-8">
-  <title>Ma page test</title>
-</head>
- -

Toutefois dans les pages plus importantes, l'en-tête peut contenir un grand nombre d'éléments — essayez d'aller sur certains de vos sites web préférés et utilisez les outils de développement pour vérifier le contenu de l'en-tête. Notre objectif ici n'est pas de vous montrer comment utiliser tout ce qui peut être mis dans l'élément <head>, mais plutôt de vous apprendre à utiliser les outils les plus évidents, que vous souhaiterez inclure dans l'en-tête, et vous les rendre plus familiers. Commençons.

- -

Ajouter un titre

- -

Nous avons déjà vu l'élément {{htmlelement ("title")}} — qui peut être utilisé pour ajouter un intitulé au document. Il peut toutefois être confondu avec l'élément {{htmlelement ("h1")}}, pour ajouter un en‑tête de haut nieau au contenu de votre page dans l'élément {{htmlelement("body")}} — quelquefois désigné comme étant le « titre de la page ». Mais ce sont des choses différentes !

- - - -

Apprentissage actif : inspection d'un exemple simple

- -
    -
  1. Pour commencer cet apprentissage actif, nous vous invitons à télécharger une copie de notre page-titre-exemple sur le dépôt Github. Pour ce faire, soit : - -
      -
    1. copiez et collez le code hors de la page dans un nouveau fichier texte dans votre éditeur de code, puis sauvegardez-le dans un endroit raisonnable.
      2. -
    2. pressez le bouton « Raw » de la page : le texte brut apparaît dans un nouvel onglet du navigateur. Ensuite, choisissez Fichier> Enregistrer la page sous ... dans le menu du navigateur, puis choisissez un endroit pour enregistrer le fichier.
      3. -
    -
    2. -
  2. Maintenant, ouvrez le fichier dans votre navigateur. Vous devriez voir quelque chose comme ça : -

    Une simple page web page dont <title> a la valeur «Élément <title>» et <h1> la valeur Élément <h1>.Il devrait désormais être évident de situer où le contenu de <h1> apparaît et où celui de <title> apparaît !

    -
    3. -
  3. -

    Vous devriez aussi essayer d'ouvrir ce code dans votre éditeur, modifier le contenu de ces éléments, puis rafraîchir la page dans votre navigateur. Amusez-vous avec ces fonctions.

    -
    4. -
- -

Le contenu de l'élément <title> est aussi utilisé de manières différentes . Par exemple, si vous tentez de marquer cette page dans vos Marques-pages ( Marques-pages > Marquer cette page ou bien l'étoile dans la barre d'outils de Firefox), vous verrez que le contenu de <title> est suggéré comme nom pour le marque-page.

- -

Une page Web marquée dans Firefox ; le nom du signet a été automatiquement rempli avec le contenu de l'élément <title>.

- -

Le contenu de <title> est aussi utilisé dans les résultats de recherches, comme vous le verrez ci‑dessous.

- -

Métadonnées : l'élément <meta>

- -

Les métadonnées sont des données qui décrivent des données, et le langage HTML a une manière « officielle » d'ajouter des métadonnées à un document — l'élément {{htmlelement("meta")}}. Bien sûr, d'autres choses, dont nous parlons dans cet article, pourraient aussi être considérées comme des métadonnées. Il y a une panoplie d'autres éléments de type <meta> qui auraient pu figurer dans l'en-tête de votre page, mais nous n'en parlerons pas pour l'instant, car ce serait trop déroutant. À la place, nous expliquerons quelques éléments que vous pourriez voir, juste pour vous donner une idée.

- -

Définition de l'encodage des caractères du document

- -

Dans l'exemple que nous avons vu au-dessus, cette ligne était présente :

- -
<meta charset="utf-8">
- -

Cet élément définit l'encodage des caractères du document - le jeu de caractères qu'il est autorisé à utiliser. utf-8 est un jeu de caractères universel qui inclut à peu près tous les caractères des langues humaines. Cela signifie que votre page web sera capable de gérer l'affichage de n'importe quelle langue ; c'est donc une bonne idée de le définir dans chaque page web que vous créez ! Par exemple, votre page peut gérer l'anglais et le japonais sans aucun souci :

- -

Une page Web contenant des caractères français et japonais, le jeu de caractères étant universel ou utf-8. Les deux langues s'affichent correctement.Si vous définissez votre encodage de caractères en ISO-8859-1 , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement perturbé :

- -

Une page Web contenant des caractères français et japonais, l'encodage des caractères étant réglé sur ISO latin. Les caractères japonais ne s'affichent pas correctement.

- -
-

Note : Certains navigateurs (par ex. Chrome) corrigent automatiquement les encodages incorrects, ainsi selon le navigateur utilisé, ce problème pourrait vous passer totalement inaperçu. Vous devriez quand même définir un encodage utf-8 sur votre page de toutes façons pour éviter tout problème potentiel avec d'autres navigateurs.

-
- -

Apprentissage actif : expérience avec l'encodage des caractères

- -

Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur <title> (la page title-example.html), faites un essai de modification de la valeur de la métadonnée charset en ISO-8859-1 et ajoutez le japonais à votre page. Voici le code que nous avons utilisé :

- -
<p>Japanese example: ご飯が熱い。</p>
- -

Ajouter le nom de l'auteur et une description

- -

De nombreux éléments <meta> icontiennent les attributs name et content :

- - - -

Il est utile d'inclure ces deux méta-éléments dans votre page pour définir son auteur et donner une courte description de son contenu. Voyons un exemple :

- -
<meta name="author" content="Chris Mills">
-<meta name="description" content="La Zone Apprentissage des documents web
-du MDN a pour but de donner aux débutants du Web tout ce qu'ils doivent
-savoir pour commencer le développement de pages webs et d'applications.">
- -

Préciser l'auteur peut être intéressant dans certains cas : il est utile de savoir qui a écrit la page pour le contacter et lui poser des questions à propos du contenu. Certains systèmes de gestion de contenu procèdent à l'extraction automatique des informations sur l'auteur de la page et les rendent disponibles à cette fin.

- -

Définir une description qui incorpore des mots-clés relatifs au contenu de la page est utile ; votre page pourra ainsi apparaître plus haut dans la liste de recherches par pertinence créée par un moteur de recherche (ce processus se nomme Search Engine Optimization ou {{glossary("SEO")}} — optimisation du moteur de recherche.)

- -

Apprentissage actif : utilisation des descriptions dans les moteurs de recherche.

- -

La description est aussi utilisée dans le résultat des moteurs de recherche. Faisons un exercice pour mieux comprendre.

- -
    -
  1. Allez sur la page d'accueil de Mozilla Developer Network.
    2. -
  2. Regardez le source de la page (Clic droit/Ctrl, choissisez « Code source de la page » dans le menu contextuel.)
    3. -
  3. Trouvez la balise méta description. Elle ressemble à ceci : - 
    <meta name="description" content="MDN Web Docs fournit
- des informations sur les technologies web ouvertes comme HTML,
- CSS et les API utilisées pour les sites web et les applications
- web. On y trouve également de la documentation destinées aux
- développeurs à propos des produits Mozilla tels que les
- outils de développement de Firefox.">
    -
    4. -
  4. Maintenant, cherchez « Mozilla Developer Network » sur votre moteur de recherche favori (nous avons utilisé Google). Vous remarquerez que le contenu de la <meta> description et de l'élément <title> sont utilisés dans les résultats de recherche. Cela vaut vraiment la peine ! -

    Une page de recherche Google pour "MDN web docs"

    -
    5. -
- -
-

Note : Avec Google, vous verrez quelques sous-pages pertinentes de MDN listées sous le lien de la page d'accueil — ce sont des liens du site ; ils sont configurables dans les outils de Google's webmaster tools - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google.

-
- -
-

Note : Plusieurs fonctions <meta> ne sont plus utilisées. Par exemple, l'élément <meta> keyword (<meta name= "keywords" content="mettez, vos, mot-clés, ici">) — qui est censé fournir des mots-clés pour les moteurs de recherche, afin de déterminer la pertinence de la page pour différents termes de recherche — est ignoré par les moteurs de recherche, car les polluposteurs remplissaient simplement la liste avec des centaines de mots-clés, biaisant les résultats.

-
- -

Autres types de métadonnées

- -

En parcourant le web, vous trouverez d'autres types de métadonnées. Beaucoup de fonctionnalités que vous verrez sur les sites webs sont des créations propriétaires, conçues pour être utilisées sur certains sites ( comme les réseaux sociaux ) avec des informations spécifiques qu'ils peuvent utiliser ;

- -

Par exemple, Open Graph Data est un protocole de métadonnées que Facebook a inventé pour fournir des métadonnées plus riches pour les sites webs. Dans le code source de MDN vous trouverez ceci :

- -
<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
-<meta property="og:description" content="MDN Web Docs fournit des
-informations sur les technologies web ouvertes comme HTML, CSS et les API
-utilisées pour les sites web et les applications web. On y trouve également
-de la documentation destinées aux développeurs à propos des produits
-Mozilla tels que les outils de développement de Firefox.">
-<meta property="og:title" content="Mozilla Developer Network">
- -

En conséquence, lorsque vous faites un lien à MDN sur Facebook, le lien apparaît avec une image et une description : une expérience plus riche pour les utilisateurs.

- -

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter a aussi une métadonnée propriétaire, qui a un effet similaire quand l'URL du site est affichée sur twitter.com. Par exemple:

- -
<meta name="twitter:title" content="Mozilla Developer Network">
- -

Ajouter des icônes personnalisées à un site

- -

Pour enrichir davantage le design de votre site, vous pouvez ajouter des références à des icônes personnalisées dans vos métadonnées et celles-ci seront affichées dans certains contextes.

- -

La petite favicône, qui existe depuis de nombreuses années, a été la première icône de ce type, une icône de 16 x 16 pixels utilisée dans de multiples endroits. Vous verrez des favicônes affichés dans chaque onglet du navigateur pour chaque page ouverte et à côté des pages marquées dans le panneau des signets.

- -

Une favicône peut être ajoutée à votre page de la façon suivante :

- -
    -
  1. Enregistrez-la dans le même répertoire que la page d'index du site, sous le format .ico (la plupart des navigateurs prendront en charge les favicônes dans des formats plus communs comme .gif ou .png, mais utiliser le format ICO assurera son fonctionnement depuis Internet Explorer 6.)
    2. -
  2. Ajoutez la ligne suivante dans votre <head> du HTML pour la référencer : - 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    -
    3. -
- -

Voici un exemple de favicône dans un panneau de favoris :

- -

Le panneau de signets Firefox, montrant un exemple de signet avec une favicône affichée à côté.

- -

Il existe de nombreux autres types d'icônes à considérer aussi actuellement. Par exemple, vous trouverez ceci dans le code source de la page d'accueil MDN :

- -
<!-- troisième-génération iPad avec haute-résolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
-<!-- iPhone avec haute-résolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">
-<!-- iPad de première et deuxième génération : -->
-<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png">
-<!-- iPhone non-Retina, iPod Touch et appareils Android 2.1+: -->
-<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">
-<!-- favicône de base -->
-<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png">
- -

Les commentaires expliquent ce à quoi chaque icône est utilisée — ces éléments incluent des fonctionnalités telles que la fourniture d'une icône haute résolution à utiliser lorsque le site Web est enregistré sur l'écran d'accueil d'un iPad.

- -

Ne vous préoccupez pas de la mise en œuvre de tous ces types d'icônes maintenant — il s'agit d'une fonctionnalité assez avancée ; vous n'avez pas besoin de la connaître pour avancer dans le cours. Le but principal ici est de vous faire savoir à quoi elles ressemblent si vous les rencontriez en parcourant le code source d'autres sites web.

- -

Application des CSS et JavaScript au HTML

- -

À peu près tous les sites web que vous rencontrerez actuellement utiliseront des {{glossary("CSS")}} pour agrémenter leur aspect, et {{glossary("JavaScript")}} pour assurer les fonctionnalités interactives, telles que lecteurs vidéo, cartes géographiques, jeux et plus encore. Ceux-ci sont le plus souvent appliqués à une page web en utilisant respectivement les éléments {{htmlelement("link")}} et {{htmlelement("script")}}.

- - - -

Apprentissage actif : appliquer des CSS et du JavaScript à une page

- -
    -
  1. Pour commencer cet apprentissage actif, prenez une copie de nos fichiers meta-example.html, script.js et style.css , et enregistrez-les sur votre ordinateur dans un même répertoire. Assurez-vous qu'ils sont enregistrés avec les noms et les extensions de fichier corrects.
    2. -
  2. Ouvrez le fichier HTML à la fois dans votre navigateur et votre éditeur de texte.
    3. -
  3. En suivant les informations fournies ci-dessus, ajoutez les éléments {{htmlelement("link")}} et {{htmlelement("script")}} à votre HTML, afin que les CSS et le JavaScript soient appliqués au HTML.
    4. -
- -

Si a été fait correctement, après avoir enregistré le HTML, puis actualisé la page, vous verrez que les choses ont changé :

- -

Exemple montrant une page sur laquelle on a appliqué du CSS et du JavaScript. Le CSS a rendu la page verte, alors que le JavaScript a ajouté une liste dynamique à la page.

- - - -
-

Note : Si vous êtes coincé dans cet exercice et que vous ne pouvez pas obtenir le CSS / JS à appliquer, essayez de vérifier notre exemple de page css-and-js.html .

-
- -

Définition de la langue principale du document

- -

Enfin, il convient de mentionner que vous pouvez (et devrez vraiment) définir la langue de votre page. Cela peut être fait en ajoutant l'attribut lang à la balise ouvrante HTML (voir meta-example.html.)

- -
<html lang="fr">
- -

Ceci est utile de plusieurs façons. Votre document sera indexé plus efficacement par les moteurs de recherche si son langage est défini (ce qui lui permet d'apparaître correctement dans les résultats spécifiques à la langue, par exemple) et il est utile pour les personnes visuellement déficientes utilisant un lecteur d'écran (par exemple, le mot « six » existe en français et en anglais, mais se prononce différemment.)

- -

Vous pouvez également définir des sous-sections de votre document pour qu'elles soient reconnues comme étant en différentes langues. Par exemple, nous pourrions définir la partie en langue japonaise pour qu'elle soit reconnue comme telle, de la manière suivante :

- -
<p>Exemple en japonais : <span lang="jp">ご飯が熱い。</span>.</p>
- -

Ces codes sont définis par la norme ISO 639-1. Vous en trouverez plus sur Etiquettes langues en HTML et XML (en).

- -

Résumé

- -

Cela marque la fin de notre tour rapide de l'en-tête HTML — il y a beaucoup plus de possibilités ici, mais un panorama exhaustif serait ennuyeux et susceptible de vous embrouiller à ce stade, nous voulions simplement vous donner une idée des éléments les plus courants. Dans l'article suivant, nous allons étudier les fondamentaux du texte HTML.

- -

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.md new file mode 100644 index 0000000000..af254c337d --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.md @@ -0,0 +1,287 @@ +--- +title: Qu'avez-vous dans la tête ? Métadonnées en HTML +slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

L'en-tête {{glossary("Head", "head")}} dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML avec des CSS), des liens aux favicons personnalisés et d'autres méta-données (auteur du document, mots-clés décrivant le document, etc.). Cet article porte sur tout ceci et plus, pour vous donner de bonnes bases pour gérer les balises et le code qui devraient figurer dans l'en-tête.

+ + + + + + + + + + + + +
Prérequis:Connaître les bases du HTML, telles qu'elles sont exposées dans l'article Commencer avec le HTML
Objectifs:En savoir plus sur la balise <head> du HTML, son objet, les éléments les plus importants qu'elle peut contenir et l'effet qu'elle peut avoir sur le document HTML.
+ +

Qu'est-ce que l'en-tête de HTML ?

+ +

Revoyons le document HTML de base de l' article précédent:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ma page test</title>
+  </head>
+  <body>
+    <p>Voici ma page</p>
+  </body>
+</html>
+ +

Le contenu de l'en-tête HTML {{htmlelement("head")}} — à la difference du contenu de l'élément {{htmlelement("body")}} (affiché quand la page est chargée par le navigateur) — n'est pas affiché dans la page du navigateur. Le travail de la balise <head> est de contenir les {{glossary("Metadata", "métadonnées")}} à propos du document. Dans l'exemple ci-dessus, l'en-tête est plutôt petit :

+ +
<head>
+  <meta charset="utf-8">
+  <title>Ma page test</title>
+</head>
+ +

Toutefois dans les pages plus importantes, l'en-tête peut contenir un grand nombre d'éléments — essayez d'aller sur certains de vos sites web préférés et utilisez les outils de développement pour vérifier le contenu de l'en-tête. Notre objectif ici n'est pas de vous montrer comment utiliser tout ce qui peut être mis dans l'élément <head>, mais plutôt de vous apprendre à utiliser les outils les plus évidents, que vous souhaiterez inclure dans l'en-tête, et vous les rendre plus familiers. Commençons.

+ +

Ajouter un titre

+ +

Nous avons déjà vu l'élément {{htmlelement ("title")}} — qui peut être utilisé pour ajouter un intitulé au document. Il peut toutefois être confondu avec l'élément {{htmlelement ("h1")}}, pour ajouter un en‑tête de haut nieau au contenu de votre page dans l'élément {{htmlelement("body")}} — quelquefois désigné comme étant le « titre de la page ». Mais ce sont des choses différentes !

+ + + +

Apprentissage actif : inspection d'un exemple simple

+ +
    +
  1. Pour commencer cet apprentissage actif, nous vous invitons à télécharger une copie de notre page-titre-exemple sur le dépôt Github. Pour ce faire, soit : + +
      +
    1. copiez et collez le code hors de la page dans un nouveau fichier texte dans votre éditeur de code, puis sauvegardez-le dans un endroit raisonnable.
      2. +
    2. pressez le bouton « Raw » de la page : le texte brut apparaît dans un nouvel onglet du navigateur. Ensuite, choisissez Fichier> Enregistrer la page sous ... dans le menu du navigateur, puis choisissez un endroit pour enregistrer le fichier.
      3. +
    +
    2. +
  2. Maintenant, ouvrez le fichier dans votre navigateur. Vous devriez voir quelque chose comme ça : +

    Une simple page web page dont <title> a la valeur «Élément <title>» et <h1> la valeur Élément <h1>.Il devrait désormais être évident de situer où le contenu de <h1> apparaît et où celui de <title> apparaît !

    +
    3. +
  3. +

    Vous devriez aussi essayer d'ouvrir ce code dans votre éditeur, modifier le contenu de ces éléments, puis rafraîchir la page dans votre navigateur. Amusez-vous avec ces fonctions.

    +
    4. +
+ +

Le contenu de l'élément <title> est aussi utilisé de manières différentes . Par exemple, si vous tentez de marquer cette page dans vos Marques-pages ( Marques-pages > Marquer cette page ou bien l'étoile dans la barre d'outils de Firefox), vous verrez que le contenu de <title> est suggéré comme nom pour le marque-page.

+ +

Une page Web marquée dans Firefox ; le nom du signet a été automatiquement rempli avec le contenu de l'élément <title>.

+ +

Le contenu de <title> est aussi utilisé dans les résultats de recherches, comme vous le verrez ci‑dessous.

+ +

Métadonnées : l'élément <meta>

+ +

Les métadonnées sont des données qui décrivent des données, et le langage HTML a une manière « officielle » d'ajouter des métadonnées à un document — l'élément {{htmlelement("meta")}}. Bien sûr, d'autres choses, dont nous parlons dans cet article, pourraient aussi être considérées comme des métadonnées. Il y a une panoplie d'autres éléments de type <meta> qui auraient pu figurer dans l'en-tête de votre page, mais nous n'en parlerons pas pour l'instant, car ce serait trop déroutant. À la place, nous expliquerons quelques éléments que vous pourriez voir, juste pour vous donner une idée.

+ +

Définition de l'encodage des caractères du document

+ +

Dans l'exemple que nous avons vu au-dessus, cette ligne était présente :

+ +
<meta charset="utf-8">
+ +

Cet élément définit l'encodage des caractères du document - le jeu de caractères qu'il est autorisé à utiliser. utf-8 est un jeu de caractères universel qui inclut à peu près tous les caractères des langues humaines. Cela signifie que votre page web sera capable de gérer l'affichage de n'importe quelle langue ; c'est donc une bonne idée de le définir dans chaque page web que vous créez ! Par exemple, votre page peut gérer l'anglais et le japonais sans aucun souci :

+ +

Une page Web contenant des caractères français et japonais, le jeu de caractères étant universel ou utf-8. Les deux langues s'affichent correctement.Si vous définissez votre encodage de caractères en ISO-8859-1 , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement perturbé :

+ +

Une page Web contenant des caractères français et japonais, l'encodage des caractères étant réglé sur ISO latin. Les caractères japonais ne s'affichent pas correctement.

+ +
+

Note : Certains navigateurs (par ex. Chrome) corrigent automatiquement les encodages incorrects, ainsi selon le navigateur utilisé, ce problème pourrait vous passer totalement inaperçu. Vous devriez quand même définir un encodage utf-8 sur votre page de toutes façons pour éviter tout problème potentiel avec d'autres navigateurs.

+
+ +

Apprentissage actif : expérience avec l'encodage des caractères

+ +

Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur <title> (la page title-example.html), faites un essai de modification de la valeur de la métadonnée charset en ISO-8859-1 et ajoutez le japonais à votre page. Voici le code que nous avons utilisé :

+ +
<p>Japanese example: ご飯が熱い。</p>
+ +

Ajouter le nom de l'auteur et une description

+ +

De nombreux éléments <meta> icontiennent les attributs name et content :

+ + + +

Il est utile d'inclure ces deux méta-éléments dans votre page pour définir son auteur et donner une courte description de son contenu. Voyons un exemple :

+ +
<meta name="author" content="Chris Mills">
+<meta name="description" content="La Zone Apprentissage des documents web
+du MDN a pour but de donner aux débutants du Web tout ce qu'ils doivent
+savoir pour commencer le développement de pages webs et d'applications.">
+ +

Préciser l'auteur peut être intéressant dans certains cas : il est utile de savoir qui a écrit la page pour le contacter et lui poser des questions à propos du contenu. Certains systèmes de gestion de contenu procèdent à l'extraction automatique des informations sur l'auteur de la page et les rendent disponibles à cette fin.

+ +

Définir une description qui incorpore des mots-clés relatifs au contenu de la page est utile ; votre page pourra ainsi apparaître plus haut dans la liste de recherches par pertinence créée par un moteur de recherche (ce processus se nomme Search Engine Optimization ou {{glossary("SEO")}} — optimisation du moteur de recherche.)

+ +

Apprentissage actif : utilisation des descriptions dans les moteurs de recherche.

+ +

La description est aussi utilisée dans le résultat des moteurs de recherche. Faisons un exercice pour mieux comprendre.

+ +
    +
  1. Allez sur la page d'accueil de Mozilla Developer Network.
    2. +
  2. Regardez le source de la page (Clic droit/Ctrl, choissisez « Code source de la page » dans le menu contextuel.)
    3. +
  3. Trouvez la balise méta description. Elle ressemble à ceci : + 
    <meta name="description" content="MDN Web Docs fournit
+ des informations sur les technologies web ouvertes comme HTML,
+ CSS et les API utilisées pour les sites web et les applications
+ web. On y trouve également de la documentation destinées aux
+ développeurs à propos des produits Mozilla tels que les
+ outils de développement de Firefox.">
    +
    4. +
  4. Maintenant, cherchez « Mozilla Developer Network » sur votre moteur de recherche favori (nous avons utilisé Google). Vous remarquerez que le contenu de la <meta> description et de l'élément <title> sont utilisés dans les résultats de recherche. Cela vaut vraiment la peine ! +

    Une page de recherche Google pour "MDN web docs"

    +
    5. +
+ +
+

Note : Avec Google, vous verrez quelques sous-pages pertinentes de MDN listées sous le lien de la page d'accueil — ce sont des liens du site ; ils sont configurables dans les outils de Google's webmaster tools - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google.

+
+ +
+

Note : Plusieurs fonctions <meta> ne sont plus utilisées. Par exemple, l'élément <meta> keyword (<meta name= "keywords" content="mettez, vos, mot-clés, ici">) — qui est censé fournir des mots-clés pour les moteurs de recherche, afin de déterminer la pertinence de la page pour différents termes de recherche — est ignoré par les moteurs de recherche, car les polluposteurs remplissaient simplement la liste avec des centaines de mots-clés, biaisant les résultats.

+
+ +

Autres types de métadonnées

+ +

En parcourant le web, vous trouverez d'autres types de métadonnées. Beaucoup de fonctionnalités que vous verrez sur les sites webs sont des créations propriétaires, conçues pour être utilisées sur certains sites ( comme les réseaux sociaux ) avec des informations spécifiques qu'ils peuvent utiliser ;

+ +

Par exemple, Open Graph Data est un protocole de métadonnées que Facebook a inventé pour fournir des métadonnées plus riches pour les sites webs. Dans le code source de MDN vous trouverez ceci :

+ +
<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
+<meta property="og:description" content="MDN Web Docs fournit des
+informations sur les technologies web ouvertes comme HTML, CSS et les API
+utilisées pour les sites web et les applications web. On y trouve également
+de la documentation destinées aux développeurs à propos des produits
+Mozilla tels que les outils de développement de Firefox.">
+<meta property="og:title" content="Mozilla Developer Network">
+ +

En conséquence, lorsque vous faites un lien à MDN sur Facebook, le lien apparaît avec une image et une description : une expérience plus riche pour les utilisateurs.

+ +

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter a aussi une métadonnée propriétaire, qui a un effet similaire quand l'URL du site est affichée sur twitter.com. Par exemple:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

Ajouter des icônes personnalisées à un site

+ +

Pour enrichir davantage le design de votre site, vous pouvez ajouter des références à des icônes personnalisées dans vos métadonnées et celles-ci seront affichées dans certains contextes.

+ +

La petite favicône, qui existe depuis de nombreuses années, a été la première icône de ce type, une icône de 16 x 16 pixels utilisée dans de multiples endroits. Vous verrez des favicônes affichés dans chaque onglet du navigateur pour chaque page ouverte et à côté des pages marquées dans le panneau des signets.

+ +

Une favicône peut être ajoutée à votre page de la façon suivante :

+ +
    +
  1. Enregistrez-la dans le même répertoire que la page d'index du site, sous le format .ico (la plupart des navigateurs prendront en charge les favicônes dans des formats plus communs comme .gif ou .png, mais utiliser le format ICO assurera son fonctionnement depuis Internet Explorer 6.)
    2. +
  2. Ajoutez la ligne suivante dans votre <head> du HTML pour la référencer : + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

Voici un exemple de favicône dans un panneau de favoris :

+ +

Le panneau de signets Firefox, montrant un exemple de signet avec une favicône affichée à côté.

+ +

Il existe de nombreux autres types d'icônes à considérer aussi actuellement. Par exemple, vous trouverez ceci dans le code source de la page d'accueil MDN :

+ +
<!-- troisième-génération iPad avec haute-résolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
+<!-- iPhone avec haute-résolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">
+<!-- iPad de première et deuxième génération : -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png">
+<!-- iPhone non-Retina, iPod Touch et appareils Android 2.1+: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">
+<!-- favicône de base -->
+<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png">
+ +

Les commentaires expliquent ce à quoi chaque icône est utilisée — ces éléments incluent des fonctionnalités telles que la fourniture d'une icône haute résolution à utiliser lorsque le site Web est enregistré sur l'écran d'accueil d'un iPad.

+ +

Ne vous préoccupez pas de la mise en œuvre de tous ces types d'icônes maintenant — il s'agit d'une fonctionnalité assez avancée ; vous n'avez pas besoin de la connaître pour avancer dans le cours. Le but principal ici est de vous faire savoir à quoi elles ressemblent si vous les rencontriez en parcourant le code source d'autres sites web.

+ +

Application des CSS et JavaScript au HTML

+ +

À peu près tous les sites web que vous rencontrerez actuellement utiliseront des {{glossary("CSS")}} pour agrémenter leur aspect, et {{glossary("JavaScript")}} pour assurer les fonctionnalités interactives, telles que lecteurs vidéo, cartes géographiques, jeux et plus encore. Ceux-ci sont le plus souvent appliqués à une page web en utilisant respectivement les éléments {{htmlelement("link")}} et {{htmlelement("script")}}.

+ + + +

Apprentissage actif : appliquer des CSS et du JavaScript à une page

+ +
    +
  1. Pour commencer cet apprentissage actif, prenez une copie de nos fichiers meta-example.html, script.js et style.css , et enregistrez-les sur votre ordinateur dans un même répertoire. Assurez-vous qu'ils sont enregistrés avec les noms et les extensions de fichier corrects.
    2. +
  2. Ouvrez le fichier HTML à la fois dans votre navigateur et votre éditeur de texte.
    3. +
  3. En suivant les informations fournies ci-dessus, ajoutez les éléments {{htmlelement("link")}} et {{htmlelement("script")}} à votre HTML, afin que les CSS et le JavaScript soient appliqués au HTML.
    4. +
+ +

Si a été fait correctement, après avoir enregistré le HTML, puis actualisé la page, vous verrez que les choses ont changé :

+ +

Exemple montrant une page sur laquelle on a appliqué du CSS et du JavaScript. Le CSS a rendu la page verte, alors que le JavaScript a ajouté une liste dynamique à la page.

+ + + +
+

Note : Si vous êtes coincé dans cet exercice et que vous ne pouvez pas obtenir le CSS / JS à appliquer, essayez de vérifier notre exemple de page css-and-js.html .

+
+ +

Définition de la langue principale du document

+ +

Enfin, il convient de mentionner que vous pouvez (et devrez vraiment) définir la langue de votre page. Cela peut être fait en ajoutant l'attribut lang à la balise ouvrante HTML (voir meta-example.html.)

+ +
<html lang="fr">
+ +

Ceci est utile de plusieurs façons. Votre document sera indexé plus efficacement par les moteurs de recherche si son langage est défini (ce qui lui permet d'apparaître correctement dans les résultats spécifiques à la langue, par exemple) et il est utile pour les personnes visuellement déficientes utilisant un lecteur d'écran (par exemple, le mot « six » existe en français et en anglais, mais se prononce différemment.)

+ +

Vous pouvez également définir des sous-sections de votre document pour qu'elles soient reconnues comme étant en différentes langues. Par exemple, nous pourrions définir la partie en langue japonaise pour qu'elle soit reconnue comme telle, de la manière suivante :

+ +
<p>Exemple en japonais : <span lang="jp">ご飯が熱い。</span>.</p>
+ +

Ces codes sont définis par la norme ISO 639-1. Vous en trouverez plus sur Etiquettes langues en HTML et XML (en).

+ +

Résumé

+ +

Cela marque la fin de notre tour rapide de l'en-tête HTML — il y a beaucoup plus de possibilités ici, mais un panorama exhaustif serait ennuyeux et susceptible de vous embrouiller à ce stade, nous voulions simplement vous donner une idée des éléments les plus courants. Dans l'article suivant, nous allons étudier les fondamentaux du texte HTML.

+ +

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html deleted file mode 100644 index e8cddd0909..0000000000 --- a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: Ajouter des images vectorielles à une page web -slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web -tags: - - Graphics - - Guide - - HTML - - Intermediate - - Learn - - SVG -translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web -original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web ---- -

{{LearnSidebar}}
- {{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

- -

Les graphiques vectoriels sont les images adaptatives par excellence : légères et redimensionnables à volonté. Dans cet article, nous verrons comment intégrer des images vectorielles dans une page web.

- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple et comment insérer une image dans un document HTML.
Objectifs :Apprendre comment intégrer une image SVG dans une page web.
- -

Qu'est-ce que SVG ? Qu'apporte-t-il ?

- -

SVG est un langage basé sur {{glossary("XML")}} qui permet de décrire des images vectorielles. Commençons par définir ce qu'est une image vectorielle.

- -

Certaines images (appelées images « matricielles ») sont en fait des tableaux de carrés colorés (appelés pixels). Si on agrandit une image de ce type, à un moment, on arrive à distinguer ces carrés et une ligne diagonale deviendra un « escalier » crénelé.

- -

Au contraire, les images vectorielles décrivent des lignes et des formes. On obtient donc une image qui est toujours nette, quelle que soit la résolution de l'écran ou l'agrandissement effectué sur l'image. Une ligne diagonale sera donc toujours lisse. Une seule image source suffit car il est possible de redimensionner l'image avec CSS plutôt qu'en utilisant srcset et sizes.

- -

De plus, les fichiers dans lesquels on stocke les images vectorielles sont beaucoup plus légers que leurs homologues matriciels. Le texte utilisé dans une image vectorielle reste accessible (ce qui peut également être utilisé lors du référencement). Les images SVG se prêtent particulièrement bien aux animations scriptées car chaque composant des images sera représenté dans le {{glossary("DOM")}}.

- -

Il est possible de coder le SVG à la main grâce à un éditeur de texte. En revanche, pour réaliser des images moyennement complexes, il est préférable d'utiliser un éditeur graphique dédié, comme Inkscape. Malheureusement, les téléphones ne permettent pas de prendre des photos qui soient des images vectorielles mais Inkscape possède une fonctionnalité appelée Trace Bitmap qui permet de passer d'une image matricielle à une image vectorielle. Attention à l'utilisation de fichiers SVG complexes, le traitement de ces fichiers par le navigateur pourra entraîner une baisse des performances.

- -
-

Note : Sous Inkscape, préférez le format « SVG simple » pour sauvegarder vos fichiers, cela permet d'économiser de l'espace. Pour plus d'informations sur la préparation, lire cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web.

-
- -

La méthode rapide : {{htmlelement("img")}}

- -

Vous pouvez simplement faire référence à un fichier SVG au sein de l'élément {{htmlelement("img")}}, comme vous l'auriez fait avec une image matricielle. Il faudra utiliser l'attribut height ou width (voire les deux si le fichier SVG ne possède pas de ratio inhérent). Si ce n'est pas déjà fait, vous pouvez lire ce tutoriel sur <img>.

- -
<img
-    src="equilateral.svg"
-    alt="un triangle aux trois côtés égaux"
-    height="87px"
-    width="100px" />
- -

Avantages

- - - -

Inconvénients

- - - -
-

Note :

- -
- -

Comment inclure une image SVG directement dans le code du document

- -

Il suffit d'ouvrir le fichier SVG avec un éditeur de texte, de copier le tout puis de le coller dans le document. Assurez-vous que votre fragment de code commence et finit avec la balise <svg>. Voici un exemple très simple que vous pouvez directement copier-coller dans votre document :

- -
<svg width="300" height="200">
-    <rect width="100%" height="100%" fill="green" />
-</svg>
-
- -

La balise <svg> n'a pas besoin des attributs version, baseProfile ou xmlns. Assurez-vous de bien retirer les déclarations d'espaces de noms (namespace) éventuellement introduites par Inkscape (en effet, HTML ne tolère que les espaces de noms XHTML, XLink, MathML et SVG). Si vous souhaitez optimiser votre fichier de façon plus approfondie, vous pouvez utiliser SVG Optimiser ou Scour.

- -

Avantages

- - - -

Inconvénients

- - - - - -

Comment intégrer un SVG dans un élément {{htmlelement("object")}}

- -

Cette syntaxe est assez simple et permet également de définir un contenu à utiliser quand SVG n'est pas supporté :

- -
<object data="parallelogramme.svg"
-    width="300"
-    height="250"
-    type="image/svg+xml">
-
-<img src="parallelogramme.png"
-    alt="un quadrilatère dont les côtés sont parallèles deux à deux" />
-
-</object>
-
-
- -

Inconvénients

- - - -

Comment intégrer un SVG avec un élément {{htmlelement("iframe")}}

- -

Vous pouvez ouvrir des images SVG dans votre navigateur de la même façon qu'on peut ouvrir des pages web. Intégrer des images SVG dans un élément <iframe> n'est donc qu'une variation de l'intégration d'une page web dans une autre page web.

- -

Voici un rapide exemple :

- -
<iframe src="triangle.svg" width="500" height="500" sandbox>
-    <img src="triangle.png" alt="Un triangle avec trois côtés inégaux" />
-</iframe>
- -

iframe permet d'afficher un contenu de secours qui ne sera affiché que si le navigateur ne supporte pas les iframe.

- -

De plus, sauf si le SVG et la page web actuelle ont la même {{glossary('origine')}}, il n'est pas possible d'utiliser JavaScript pour manipuler le SVG depuis la page web.

- -

En savoir plus

- - diff --git a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md new file mode 100644 index 0000000000..e8cddd0909 --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md @@ -0,0 +1,180 @@ +--- +title: Ajouter des images vectorielles à une page web +slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +tags: + - Graphics + - Guide + - HTML + - Intermediate + - Learn + - SVG +translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web +--- +

{{LearnSidebar}}
+ {{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

+ +

Les graphiques vectoriels sont les images adaptatives par excellence : légères et redimensionnables à volonté. Dans cet article, nous verrons comment intégrer des images vectorielles dans une page web.

+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple et comment insérer une image dans un document HTML.
Objectifs :Apprendre comment intégrer une image SVG dans une page web.
+ +

Qu'est-ce que SVG ? Qu'apporte-t-il ?

+ +

SVG est un langage basé sur {{glossary("XML")}} qui permet de décrire des images vectorielles. Commençons par définir ce qu'est une image vectorielle.

+ +

Certaines images (appelées images « matricielles ») sont en fait des tableaux de carrés colorés (appelés pixels). Si on agrandit une image de ce type, à un moment, on arrive à distinguer ces carrés et une ligne diagonale deviendra un « escalier » crénelé.

+ +

Au contraire, les images vectorielles décrivent des lignes et des formes. On obtient donc une image qui est toujours nette, quelle que soit la résolution de l'écran ou l'agrandissement effectué sur l'image. Une ligne diagonale sera donc toujours lisse. Une seule image source suffit car il est possible de redimensionner l'image avec CSS plutôt qu'en utilisant srcset et sizes.

+ +

De plus, les fichiers dans lesquels on stocke les images vectorielles sont beaucoup plus légers que leurs homologues matriciels. Le texte utilisé dans une image vectorielle reste accessible (ce qui peut également être utilisé lors du référencement). Les images SVG se prêtent particulièrement bien aux animations scriptées car chaque composant des images sera représenté dans le {{glossary("DOM")}}.

+ +

Il est possible de coder le SVG à la main grâce à un éditeur de texte. En revanche, pour réaliser des images moyennement complexes, il est préférable d'utiliser un éditeur graphique dédié, comme Inkscape. Malheureusement, les téléphones ne permettent pas de prendre des photos qui soient des images vectorielles mais Inkscape possède une fonctionnalité appelée Trace Bitmap qui permet de passer d'une image matricielle à une image vectorielle. Attention à l'utilisation de fichiers SVG complexes, le traitement de ces fichiers par le navigateur pourra entraîner une baisse des performances.

+ +
+

Note : Sous Inkscape, préférez le format « SVG simple » pour sauvegarder vos fichiers, cela permet d'économiser de l'espace. Pour plus d'informations sur la préparation, lire cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web.

+
+ +

La méthode rapide : {{htmlelement("img")}}

+ +

Vous pouvez simplement faire référence à un fichier SVG au sein de l'élément {{htmlelement("img")}}, comme vous l'auriez fait avec une image matricielle. Il faudra utiliser l'attribut height ou width (voire les deux si le fichier SVG ne possède pas de ratio inhérent). Si ce n'est pas déjà fait, vous pouvez lire ce tutoriel sur <img>.

+ +
<img
+    src="equilateral.svg"
+    alt="un triangle aux trois côtés égaux"
+    height="87px"
+    width="100px" />
+ +

Avantages

+ + + +

Inconvénients

+ + + +
+

Note :

+ +
+ +

Comment inclure une image SVG directement dans le code du document

+ +

Il suffit d'ouvrir le fichier SVG avec un éditeur de texte, de copier le tout puis de le coller dans le document. Assurez-vous que votre fragment de code commence et finit avec la balise <svg>. Voici un exemple très simple que vous pouvez directement copier-coller dans votre document :

+ +
<svg width="300" height="200">
+    <rect width="100%" height="100%" fill="green" />
+</svg>
+
+ +

La balise <svg> n'a pas besoin des attributs version, baseProfile ou xmlns. Assurez-vous de bien retirer les déclarations d'espaces de noms (namespace) éventuellement introduites par Inkscape (en effet, HTML ne tolère que les espaces de noms XHTML, XLink, MathML et SVG). Si vous souhaitez optimiser votre fichier de façon plus approfondie, vous pouvez utiliser SVG Optimiser ou Scour.

+ +

Avantages

+ + + +

Inconvénients

+ + + + + +

Comment intégrer un SVG dans un élément {{htmlelement("object")}}

+ +

Cette syntaxe est assez simple et permet également de définir un contenu à utiliser quand SVG n'est pas supporté :

+ +
<object data="parallelogramme.svg"
+    width="300"
+    height="250"
+    type="image/svg+xml">
+
+<img src="parallelogramme.png"
+    alt="un quadrilatère dont les côtés sont parallèles deux à deux" />
+
+</object>
+
+
+ +

Inconvénients

+ + + +

Comment intégrer un SVG avec un élément {{htmlelement("iframe")}}

+ +

Vous pouvez ouvrir des images SVG dans votre navigateur de la même façon qu'on peut ouvrir des pages web. Intégrer des images SVG dans un élément <iframe> n'est donc qu'une variation de l'intégration d'une page web dans une autre page web.

+ +

Voici un rapide exemple :

+ +
<iframe src="triangle.svg" width="500" height="500" sandbox>
+    <img src="triangle.png" alt="Un triangle avec trois côtés inégaux" />
+</iframe>
+ +

iframe permet d'afficher un contenu de secours qui ne sera affiché que si le navigateur ne supporte pas les iframe.

+ +

De plus, sauf si le SVG et la page web actuelle ont la même {{glossary('origine')}}, il n'est pas possible d'utiliser JavaScript pour manipuler le SVG depuis la page web.

+ +

En savoir plus

+ + diff --git a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html deleted file mode 100644 index abda8ddf31..0000000000 --- a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html +++ /dev/null @@ -1,504 +0,0 @@ ---- -title: Les images en HTML -slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML -tags: - - Débutant - - Guide - - HTML - - Image - - Title - - alt text - - figcaption - - figure - - img - - src -translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML -original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
- -

Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée.  Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}},  utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} .

- - - - - - - - - - - - -
Prérequis :Notions élémentaires en informatique, installation des outils de base, bases  de la manipulation des fichiers, fondamentaux du HTML (comme décrit dans  Commencer avec le Web).
Objectifs :Apprendre à intégrer des images simples en HTML, à les légender d'un intitulé, et à mettre en relation ces images HTML avec les images d'arrière-plan du CSS.
- -

Comment intégrer une image à une page web ?

- -

Pour mettre une image simple sur une page web, nous utiliserons l'élément {{htmlelement("img")}}.  C'est un {{glossary("empty element","élément vide")}} (ce qui signifie qu'il ne contient ni texte ni balise de fermeture) qui demande au moins un attribut pour fonctionner — src (souvent appelé par son nom entier:  source). L'attribut src contient un chemin pointant vers l'image que vous voulez intégrer, qui peut être une URL absolue ou relative, de la même manière que l'élément  {{htmlelement("a")}}  href= attribue des valeurs.

- -
-

Note : Vous devriez lire  Une brève présentation des URL et des chemins  pour vous rafraîchir la mémoire avant de continuer.

-
- -

Donc, par exemple, si votre image s'appelle dinosaur.jpg, et qu'elle est située dans le même répertoire que votre page HTML, vous pouvez intégrer cette image comme ceci (URL relative) :

- -
<img src="dinosaur.jpg">
- -

Et si cette image se trouve dans un sous-répertoire images situé dans le même dossier que la page HTML (ce que Google recommande pour  {{glossary("SEO")}}/dans un but d'indexation et d'optimisation de la recherche), alors vous l'intégrerez comme ceci :

- -
<img src="images/dinosaur.jpg">
- -

Ainsi de suite.

- -
-

Note : Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. dinosaur.jpg est infiniment mieux que img835.png.

-
- -

Vous pouvez intégrer l'image en utilisant son URL absolue, par exemple :

- -
<img src="https://www.example.com/images/dinosaur.jpg">
- -

Ce n'est pas trés efficace, cela fait travailler le navigateur plus qu'il ne devrait, il cherche l'adresse IP depuis le serveur DNS à chaque fois etc... Vous devriez autant que possible garder vos images du site sur le même serveur que la page HTML.

- -
-

Attention : La plupart des images ont des droits d'auteur. N'affichez jamais une image sur votre site à moins que :
-
- 1) Ce soit votre image (vous en êtes le créateur),
- 2) vous ayez reçu une permission explicite et écrite du propriètaire de l'image ou,
- 3) que vous ayez une preuve indiscutable que cette image appartient au domaine public.
-
- Les violations des lois sur les droits d'auteur sont non seulement illégales mais aussi non-éthiques. De plus, ne faites jamais pointer votre attribut src vers une image hébergée sur le site de quelqu'un d'autre sans en avoir l'autorisation. Cela s'appelle du "hotlinking". Souvenez-vous que voler de la bande passante à quelqu'un est aussi illégal. Cela ralentit aussi votre page et vous laisse sans contrôle si l'image est enlevée ou remplacée par une autre plus gênante...

-
- -

Le code au-dessus vous donnera, à peu prés, le résultat suivant :

- -

A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it

- -
-

Note : Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même.

-
- -
-

Note : Vous trouverez les exemples finis de cette section sur Github (regardez aussi le  code source .)

-
- -

Texte alternatif

- -

Le prochain attribut que nous allons étudier est alt. Sa valeur est supposée être un descriptif sous forme de texte de l'image, à utiliser dans les cas où l'image ne peut être affichée. Exemple : le code au-dessus pourrait être modifié de cette manière :

- -
<img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
-          it has a large head with long sharp teeth">
- -

La manière la plus simple de tester votre texte alt est de mal épeler votre nom de fichier intentionnellement. Si dans l'exemple, la photo était épelée dinosooooor.jpg, le navigateur ne l'afficherait pas mais afficherait le texte alt à la place :

- -

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

- -

Pourquoi vous verrez partout du texte alt ? Vous en aurez besoin car c'est très pratique en maintes occasions :

- - - -

Que devriez-vous noter dans vos attributs alt ? En premier lieu, cela dépend de la raison pour laquelle cette image se trouve là. En d'autres mots, ce que vous perdriez si cette image ne s'affichait pas :

- - - -

Le but est de livrer essentiellement une expérience de qualité, même quand les images ne peuvent être vues. Cela assure à tous les utilisateurs de ne rien manquer du contenu. Essayez de ne pas afficher les images dans votre navigateur et regardez ce qu'il se passe. Vous allez vite réaliser que le texte fourni à la place est réellement utile.

- -
-

Note : Pour plus d'informations, voyez notre guide  Textes Alternatifs

-
- -

Largeur et hauteur (width-height)

- -

Vous pouvez vous servir des attributs  width et height pour spécifier la largeur et la hauteur de votre image. Vous pouvez trouver la largeur et la hauteur de différentes manières. Sur Mac, par exemple, vous pouvez utiliser   Cmd + I pour afficher l'info relative au fichier image. Pour revenir à notre exemple, nous pourrions faire ceci :

- -
<img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
-          it has a large head with long sharp teeth"
-     width="400"
-     height="341">
- -

Cela ne fait pas grande différence à l'affichage dans des circonstances normales. Mais, si l'image n'est pas affichée, disons que l'utilisateur est juste arrivé sur la page et qu'elle n'est pas encore chargée, vous remarquerez que le navigateur laisse un espace pour qu'elle y apparaisse :

- -

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

- -

C'est une bonne pratique, cela donne une page se chargeant plus rapidement et en douceur.

- -

De toutes manières, vous ne devez pas altérer la taille de vos images avec les attributs  HTML . Si vous réglez la taille de l'image trop grande, vous aurez un résultat avec beaucoup de "grain", flou ou trop petit et vous dépensez de la bande passante en téléchargeant une image qui ne convient pas aux besoins de l'utilisateur.  Votre image peut aussi sortir distordue, si vous n'en maintenez pas le bon  Format d'image. Vous devriez utiliser un éditeur d'images pour la mettre à la bonne taille avant de la mettre dans votre page web.

- -
-

Note : Si vous devez absolument modifier une taille d' image, vous devriez vous servir de  CSS .

-
- -

Titre d'images

- -

Comme décrit dans le chapitre  Création d'hyperliens , vous pouvez aussi ajouter un attribut title aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :

- -
<img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
-          it has a large head with long sharp teeth"
-     width="400"
-     height="341"
-     title="A T-Rex on display in the Manchester University Museum">
- -

Cela donne une info-bulle avec le texte entré dans l'attribut title :

- -

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

- -

Il n'est pas essentiel d'inclure des informations dans les images. Il est souvent préférable d'écrire ces informations dans le texte principal plutôt qu'attaché à l'image. Ils peuvent être très utile dans d'autres circonstances, par exemple dans une galerie d'images où vous n'avez pas de place pour les légendes.

- -

Pédagogie active : incorporer une image

- -

À vous de jouer maintenant ! Cette section dédiée à l'apprentissage interactif va vous tenir en haleine avec un simple exercice d'intégration d'image. Vous allez un peu travailler l'anglais aussi. Il vous est fourni une étiquette basique {{htmlelement("img")}} ; Il va vous falloir incorporer l'image située à l'URL suivante :

- -

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

- -

Nous avons dit plus tôt de ne jamais faire de "hotlinking" sur d'autres serveurs mais c'est ici dans un but d'apprentissage, donc on oublie ça pour cette fois.

- -

Nous avons encore quelques petites choses pour vous :

- - - -

Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  Reset .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton Show solution :

- - - - - - - -

{{ EmbedLiveSample('Pédagogie_active_incorporer_une_image', 700, 350, "", "", "hide-codepen-jsfiddle") }}

- - - -

Légender des images avec figure et figcaption

- -

En parlant de légendes, il y a de nombreuses manières d'en ajouter qui ira avec votre image. Par exemple, rien ne vous empêche de faire ceci :

- -
<div class="figure">
-  <img src="images/dinosaur.jpg"
-       alt="The head and torso of a dinosaur skeleton;
-            it has a large head with long sharp teeth"
-       width="400"
-       height="341">
-
-  <p>A T-Rex on display in the Manchester University Museum.</p>
-</div>
- -

C'est bon. Ça contient ce que vous voulez et c'est aisément stylisable en CSS.  Mais il y a un problème : il n'y a rien de sensé qui relie l'image à sa légende. Ce qui peut poser des problèmes à un lecteur d'écran. Par exemple, quand vous avez 50 images, quelle légende va avec quelle image ?

- -

Une meilleure solution consiste en l'utilisation des éléments HTML5 {{htmlelement("figure")}} et {{htmlelement("figcaption")}} . Ils ont été conçus pour cela : fournir un conteneur sémantique aux objets et lier clairement cet objet à sa légende. Notre exemple précédent pourrait être réécrit comme ceci :

- -
<figure>
-  <img src="images/dinosaur.jpg"
-       alt="The head and torso of a dinosaur skeleton;
-            it has a large head with long sharp teeth"
-       width="400"
-       height="341">
-
-  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
-</figure>
- -

L'élément {{htmlelement("figcaption")}}  dit au navigateur et aux technologies d'assistance que la légende décrit le contenu de l'autre élément {{htmlelement("figure")}}.

- -
-

Note : D'un  point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte alt devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble.

-
- -

Un objet <figure> n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui :

- - - -

Cet objet peut être un ensemble d'images, des bribes de code, de l'audio, de la vidéo, des équations, un tableau ou bien d'autres choses.

- -

Pédagogie active : créer un objet figure

- -

Dans cette section, nous allons vous demander de récupérer le code fini de la section "Pédagogie active" précédente et d'y faire ceci :

- - - -

Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  Reset .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton Show solution :

- - - - - - - - - - - -

{{ EmbedLiveSample('Pédagogie_active_créer_un_objet_figure', 700, 350, "", "", "hide-codepen-jsfiddle") }}

- -

Images d'arrière-plan CSS

- -

Vous pouvez également utiliser du CSS pour intégrer des images dans vos pages web (ou JavaScript, mais c'est une autre histoire). Les propriétés CSS {{cssxref("background-image")}} et background , sont utilisées pour contrôler le placement de l'image d'arrière-plan. Par exemple, pour placer une image d'arrière-plan sur chaque paragraphe de la page, vous pourriez faire ceci :

- -
p {
-  background-image: url("images/dinosaur.jpg");
-}
- -

Le résultat est probablement plus facile à positionner et contrôler qu'une image HTML. Donc, pourquoi s'ennuyer avec des images HTML ?... Comme il y est fait allusion au-dessus, les images CSS sont là seulement pour la décoration. Si vous voulez ajouter quelque chose d'agréable à votre page pour en enrichir le visuel, c'est étudié pour. Mais, ces images n'ont pas d'indication sémantique. Elles ne peuvent pas avoir d'équivalent texte, sont invisibles aux lecteurs d'écran, etc... C'est le moment, pour l'image HTML, de se mettre en valeur !

- -

En résumé : si une image a du sens, en terme de contenu, vous devriez utiliser une image HTML. Si une image n'est que pure décoration, il vaut mieux utiliser les images d'arrière-plan CSS.

- -
-

Note : Vous en apprendrez beaucoup plus sur les  CSS background images dans notre topic  CSS .

-
- -

C'est tout pour l'instant. Nous avons découvert en détails les images et légendes. Dans le prochain article, nous monterons en régime pour aborder la manière d'utiliser HTML pour intégrer des vidéos et de l'audio dans une page web.

- -

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

- -

Dans ce module :

- - 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 new file mode 100644 index 0000000000..abda8ddf31 --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md @@ -0,0 +1,504 @@ +--- +title: Les images en HTML +slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +tags: + - Débutant + - Guide + - HTML + - Image + - Title + - alt text + - figcaption + - figure + - img + - src +translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée.  Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}},  utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} .

+ + + + + + + + + + + + +
Prérequis :Notions élémentaires en informatique, installation des outils de base, bases  de la manipulation des fichiers, fondamentaux du HTML (comme décrit dans  Commencer avec le Web).
Objectifs :Apprendre à intégrer des images simples en HTML, à les légender d'un intitulé, et à mettre en relation ces images HTML avec les images d'arrière-plan du CSS.
+ +

Comment intégrer une image à une page web ?

+ +

Pour mettre une image simple sur une page web, nous utiliserons l'élément {{htmlelement("img")}}.  C'est un {{glossary("empty element","élément vide")}} (ce qui signifie qu'il ne contient ni texte ni balise de fermeture) qui demande au moins un attribut pour fonctionner — src (souvent appelé par son nom entier:  source). L'attribut src contient un chemin pointant vers l'image que vous voulez intégrer, qui peut être une URL absolue ou relative, de la même manière que l'élément  {{htmlelement("a")}}  href= attribue des valeurs.

+ +
+

Note : Vous devriez lire  Une brève présentation des URL et des chemins  pour vous rafraîchir la mémoire avant de continuer.

+
+ +

Donc, par exemple, si votre image s'appelle dinosaur.jpg, et qu'elle est située dans le même répertoire que votre page HTML, vous pouvez intégrer cette image comme ceci (URL relative) :

+ +
<img src="dinosaur.jpg">
+ +

Et si cette image se trouve dans un sous-répertoire images situé dans le même dossier que la page HTML (ce que Google recommande pour  {{glossary("SEO")}}/dans un but d'indexation et d'optimisation de la recherche), alors vous l'intégrerez comme ceci :

+ +
<img src="images/dinosaur.jpg">
+ +

Ainsi de suite.

+ +
+

Note : Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. dinosaur.jpg est infiniment mieux que img835.png.

+
+ +

Vous pouvez intégrer l'image en utilisant son URL absolue, par exemple :

+ +
<img src="https://www.example.com/images/dinosaur.jpg">
+ +

Ce n'est pas trés efficace, cela fait travailler le navigateur plus qu'il ne devrait, il cherche l'adresse IP depuis le serveur DNS à chaque fois etc... Vous devriez autant que possible garder vos images du site sur le même serveur que la page HTML.

+ +
+

Attention : La plupart des images ont des droits d'auteur. N'affichez jamais une image sur votre site à moins que :
+
+ 1) Ce soit votre image (vous en êtes le créateur),
+ 2) vous ayez reçu une permission explicite et écrite du propriètaire de l'image ou,
+ 3) que vous ayez une preuve indiscutable que cette image appartient au domaine public.
+
+ Les violations des lois sur les droits d'auteur sont non seulement illégales mais aussi non-éthiques. De plus, ne faites jamais pointer votre attribut src vers une image hébergée sur le site de quelqu'un d'autre sans en avoir l'autorisation. Cela s'appelle du "hotlinking". Souvenez-vous que voler de la bande passante à quelqu'un est aussi illégal. Cela ralentit aussi votre page et vous laisse sans contrôle si l'image est enlevée ou remplacée par une autre plus gênante...

+
+ +

Le code au-dessus vous donnera, à peu prés, le résultat suivant :

+ +

A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it

+ +
+

Note : Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même.

+
+ +
+

Note : Vous trouverez les exemples finis de cette section sur Github (regardez aussi le  code source .)

+
+ +

Texte alternatif

+ +

Le prochain attribut que nous allons étudier est alt. Sa valeur est supposée être un descriptif sous forme de texte de l'image, à utiliser dans les cas où l'image ne peut être affichée. Exemple : le code au-dessus pourrait être modifié de cette manière :

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth">
+ +

La manière la plus simple de tester votre texte alt est de mal épeler votre nom de fichier intentionnellement. Si dans l'exemple, la photo était épelée dinosooooor.jpg, le navigateur ne l'afficherait pas mais afficherait le texte alt à la place :

+ +

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

+ +

Pourquoi vous verrez partout du texte alt ? Vous en aurez besoin car c'est très pratique en maintes occasions :

+ + + +

Que devriez-vous noter dans vos attributs alt ? En premier lieu, cela dépend de la raison pour laquelle cette image se trouve là. En d'autres mots, ce que vous perdriez si cette image ne s'affichait pas :

+ + + +

Le but est de livrer essentiellement une expérience de qualité, même quand les images ne peuvent être vues. Cela assure à tous les utilisateurs de ne rien manquer du contenu. Essayez de ne pas afficher les images dans votre navigateur et regardez ce qu'il se passe. Vous allez vite réaliser que le texte fourni à la place est réellement utile.

+ +
+

Note : Pour plus d'informations, voyez notre guide  Textes Alternatifs

+
+ +

Largeur et hauteur (width-height)

+ +

Vous pouvez vous servir des attributs  width et height pour spécifier la largeur et la hauteur de votre image. Vous pouvez trouver la largeur et la hauteur de différentes manières. Sur Mac, par exemple, vous pouvez utiliser   Cmd + I pour afficher l'info relative au fichier image. Pour revenir à notre exemple, nous pourrions faire ceci :

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341">
+ +

Cela ne fait pas grande différence à l'affichage dans des circonstances normales. Mais, si l'image n'est pas affichée, disons que l'utilisateur est juste arrivé sur la page et qu'elle n'est pas encore chargée, vous remarquerez que le navigateur laisse un espace pour qu'elle y apparaisse :

+ +

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

+ +

C'est une bonne pratique, cela donne une page se chargeant plus rapidement et en douceur.

+ +

De toutes manières, vous ne devez pas altérer la taille de vos images avec les attributs  HTML . Si vous réglez la taille de l'image trop grande, vous aurez un résultat avec beaucoup de "grain", flou ou trop petit et vous dépensez de la bande passante en téléchargeant une image qui ne convient pas aux besoins de l'utilisateur.  Votre image peut aussi sortir distordue, si vous n'en maintenez pas le bon  Format d'image. Vous devriez utiliser un éditeur d'images pour la mettre à la bonne taille avant de la mettre dans votre page web.

+ +
+

Note : Si vous devez absolument modifier une taille d' image, vous devriez vous servir de  CSS .

+
+ +

Titre d'images

+ +

Comme décrit dans le chapitre  Création d'hyperliens , vous pouvez aussi ajouter un attribut title aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"
+     title="A T-Rex on display in the Manchester University Museum">
+ +

Cela donne une info-bulle avec le texte entré dans l'attribut title :

+ +

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

+ +

Il n'est pas essentiel d'inclure des informations dans les images. Il est souvent préférable d'écrire ces informations dans le texte principal plutôt qu'attaché à l'image. Ils peuvent être très utile dans d'autres circonstances, par exemple dans une galerie d'images où vous n'avez pas de place pour les légendes.

+ +

Pédagogie active : incorporer une image

+ +

À vous de jouer maintenant ! Cette section dédiée à l'apprentissage interactif va vous tenir en haleine avec un simple exercice d'intégration d'image. Vous allez un peu travailler l'anglais aussi. Il vous est fourni une étiquette basique {{htmlelement("img")}} ; Il va vous falloir incorporer l'image située à l'URL suivante :

+ +

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

+ +

Nous avons dit plus tôt de ne jamais faire de "hotlinking" sur d'autres serveurs mais c'est ici dans un but d'apprentissage, donc on oublie ça pour cette fois.

+ +

Nous avons encore quelques petites choses pour vous :

+ + + +

Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  Reset .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton Show solution :

+ + + + + + + +

{{ EmbedLiveSample('Pédagogie_active_incorporer_une_image', 700, 350, "", "", "hide-codepen-jsfiddle") }}

+ + + +

Légender des images avec figure et figcaption

+ +

En parlant de légendes, il y a de nombreuses manières d'en ajouter qui ira avec votre image. Par exemple, rien ne vous empêche de faire ceci :

+ +
<div class="figure">
+  <img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341">
+
+  <p>A T-Rex on display in the Manchester University Museum.</p>
+</div>
+ +

C'est bon. Ça contient ce que vous voulez et c'est aisément stylisable en CSS.  Mais il y a un problème : il n'y a rien de sensé qui relie l'image à sa légende. Ce qui peut poser des problèmes à un lecteur d'écran. Par exemple, quand vous avez 50 images, quelle légende va avec quelle image ?

+ +

Une meilleure solution consiste en l'utilisation des éléments HTML5 {{htmlelement("figure")}} et {{htmlelement("figcaption")}} . Ils ont été conçus pour cela : fournir un conteneur sémantique aux objets et lier clairement cet objet à sa légende. Notre exemple précédent pourrait être réécrit comme ceci :

+ +
<figure>
+  <img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341">
+
+  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
+</figure>
+ +

L'élément {{htmlelement("figcaption")}}  dit au navigateur et aux technologies d'assistance que la légende décrit le contenu de l'autre élément {{htmlelement("figure")}}.

+ +
+

Note : D'un  point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte alt devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble.

+
+ +

Un objet <figure> n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui :

+ + + +

Cet objet peut être un ensemble d'images, des bribes de code, de l'audio, de la vidéo, des équations, un tableau ou bien d'autres choses.

+ +

Pédagogie active : créer un objet figure

+ +

Dans cette section, nous allons vous demander de récupérer le code fini de la section "Pédagogie active" précédente et d'y faire ceci :

+ + + +

Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  Reset .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton Show solution :

+ + + + + + + + + + + +

{{ EmbedLiveSample('Pédagogie_active_créer_un_objet_figure', 700, 350, "", "", "hide-codepen-jsfiddle") }}

+ +

Images d'arrière-plan CSS

+ +

Vous pouvez également utiliser du CSS pour intégrer des images dans vos pages web (ou JavaScript, mais c'est une autre histoire). Les propriétés CSS {{cssxref("background-image")}} et background , sont utilisées pour contrôler le placement de l'image d'arrière-plan. Par exemple, pour placer une image d'arrière-plan sur chaque paragraphe de la page, vous pourriez faire ceci :

+ +
p {
+  background-image: url("images/dinosaur.jpg");
+}
+ +

Le résultat est probablement plus facile à positionner et contrôler qu'une image HTML. Donc, pourquoi s'ennuyer avec des images HTML ?... Comme il y est fait allusion au-dessus, les images CSS sont là seulement pour la décoration. Si vous voulez ajouter quelque chose d'agréable à votre page pour en enrichir le visuel, c'est étudié pour. Mais, ces images n'ont pas d'indication sémantique. Elles ne peuvent pas avoir d'équivalent texte, sont invisibles aux lecteurs d'écran, etc... C'est le moment, pour l'image HTML, de se mettre en valeur !

+ +

En résumé : si une image a du sens, en terme de contenu, vous devriez utiliser une image HTML. Si une image n'est que pure décoration, il vaut mieux utiliser les images d'arrière-plan CSS.

+ +
+

Note : Vous en apprendrez beaucoup plus sur les  CSS background images dans notre topic  CSS .

+
+ +

C'est tout pour l'instant. Nous avons découvert en détails les images et légendes. Dans le prochain article, nous monterons en régime pour aborder la manière d'utiliser HTML pour intégrer des vidéos et de l'audio dans une page web.

+ +

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

+ +

Dans ce module :

+ + diff --git a/files/fr/learn/html/multimedia_and_embedding/index.html b/files/fr/learn/html/multimedia_and_embedding/index.html deleted file mode 100644 index 445c2724fe..0000000000 --- a/files/fr/learn/html/multimedia_and_embedding/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Multimédia et Intégration -slug: Learn/HTML/Multimedia_and_embedding -tags: - - Apprentissage - - Audio - - Codage - - Débutant - - Evaluation - - Flash - - Guide - - HTML - - Image Vectorielle - - Images - - Interactivité - - SVG - - Video - - iframes - - imagemaps -translation_of: Learn/HTML/Multimedia_and_embedding -original_slug: Apprendre/HTML/Multimedia_and_embedding ---- -

{{LearnSidebar}}

- -

Jusqu'ici, nous avons vu et utilisé beaucoup de texte dans ce cours mais le web serait vraiment ennuyeux s'il n'utilisait que du texte.  Voyons ensemble la manière de le rendre plus vivant avec plus de contenu intéressant ! Ce module explore l'utilisation d'HTML pour inclure du contenu multimedia dans vos pages web. Cela comprend les différentes manières d'ajouter des images, d'intégrer de la video, de l'audio et même des pages web entières. 

- -

Prérequis

- -

Pour commencer ce module dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML comme il est recommandé dans l'article : introduction au HTML. Nous vous recommandons de passer du temps sur cette introduction en premier lieu (ou un article équivalent d'initiation au HTML) puis de repasser ici pour continuer.

- -
-

Note : Si vous travaillez sur une tablette, ordinateur ou autre périphérique où vous n'auriez pas la capacité de créer vos propres fichiers, sachez que vous pouvez tester (la plupart) de vos lignes de code sur des programmes en ligne comme JSBin ou Thimble.

-
- -

Guides

- -

Ce module contient les articles suivants, qui vous guideront à travers les fondamentaux de l'intégration multimedia sur une page web.

- -
-
Images en HTML
-
Il existe d'autres types de multimedia à prendre en compte mais il est logique de commencer par cet élément si humble qu'est  l'élément {{htmlelement("img")}}. Il est utilisé pour integrér une simple image dans une page web. Au long de cet article, nous verrons son utilisation en détails, des rudiments à l'annotation par légendes en utilisant {{HTMLElement("figure")}}, et de quelle manière il est liè  aux images d'arrière-plan de CSS.
-
Vidéo et contenu audio
-
Ensuite, nous étudierons la façon d'utiliser les éléments HTML5 {{HTMLElement("video")}} et {{HTMLElement("audio")}}, pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs,  enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens.
-
De <object> à <iframe> — autres techniques d'intégration
-
À ce stade, nous aimerions faire un pas de côté, en examinant quelques éléments qui vous permettent d'intégrer une grande variété de types de contenu dans vos pages web : les éléments {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} et {{HTMLElement("object")}}. <iframe> est fait pour intégrer d'autres pages web, les deux autres vous autorisent à faire de même pour les PDFs, SVG, et même Flash — une technologie en voie de disparition, mais que vous pouvez encore voir de façon semi-régulière.
-
Ajouter des images vectorielles sur le Web 
-
Les images vectorielles peuvent être très utiles dans certaines situations. Contrairement aux formats classiques comme le PNG/JPG, elles ne se déforment pas lorsqu'on les agrandit et peuvent rester lisses lorsqu'on les met à l'échelle. Cet article vous présente ce que sont les images vectorielles et comment inclure le populaire format {{glossary("SVG")}} dans les pages web.
-
Images adaptatives
-
-

Dans cet article, nous allons découvrir le concept d'images adaptatives — des images qui fonctionnent bien sur des appareils dont les tailles d'écran, les résolutions et autres caractéristiques sont très différentes — et examiner les outils fournis par HTML pour aider à les mettre en œuvre. Cela permet d'améliorer les performances des différents appareils. Les images adaptatives ne sont qu'une partie du responsive design, un futur sujet CSS que vous pourrez apprendre.

-
-
- -

Évaluations

- -

Les évaluations qui suivent sont là pour tester votre compréhension des bases du HTML traitées dans les guides ci-dessus.

- -
-
Évaluation : page d'accueil Mozilla
-
Cette évaluation concernera vos connaissances de quelques unes des techniques traitées dans les articles de ce module, vous amenant à ajouter des images et vidéos à une page de garde « funky » développant les atouts de Mozilla !
-
- -

À voir aussi

- -
-
Intégrer une carte interactive en haut d'une image
-
Une représentation cartographique fournit un mécanisme qui lie différents secteurs d'une image à différents endroits. Pensez à une carte qui fournirait des informations plus approfondies sur chaque pays sur lequel vous cliquez. Cette technique peut parfois être d'une grande utilité.
-
Web Principes fondamentaux 2
-
-

Un excellent cours de Mozilla qui explore et teste les compétences développées dans le module :  Multimedia et intégration. Approfondissez les fondamentaux de la composition de pages web, concevez des outils pour l'accessibilité, le partage de ressources, découvrez l'utilisation de supports en ligne et la mutualisation du travail (ce qui signifie que votre travail est librement disponible et partagé avec d'autres). 

-
-
diff --git a/files/fr/learn/html/multimedia_and_embedding/index.md b/files/fr/learn/html/multimedia_and_embedding/index.md new file mode 100644 index 0000000000..445c2724fe --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/index.md @@ -0,0 +1,72 @@ +--- +title: Multimédia et Intégration +slug: Learn/HTML/Multimedia_and_embedding +tags: + - Apprentissage + - Audio + - Codage + - Débutant + - Evaluation + - Flash + - Guide + - HTML + - Image Vectorielle + - Images + - Interactivité + - SVG + - Video + - iframes + - imagemaps +translation_of: Learn/HTML/Multimedia_and_embedding +original_slug: Apprendre/HTML/Multimedia_and_embedding +--- +

{{LearnSidebar}}

+ +

Jusqu'ici, nous avons vu et utilisé beaucoup de texte dans ce cours mais le web serait vraiment ennuyeux s'il n'utilisait que du texte.  Voyons ensemble la manière de le rendre plus vivant avec plus de contenu intéressant ! Ce module explore l'utilisation d'HTML pour inclure du contenu multimedia dans vos pages web. Cela comprend les différentes manières d'ajouter des images, d'intégrer de la video, de l'audio et même des pages web entières. 

+ +

Prérequis

+ +

Pour commencer ce module dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML comme il est recommandé dans l'article : introduction au HTML. Nous vous recommandons de passer du temps sur cette introduction en premier lieu (ou un article équivalent d'initiation au HTML) puis de repasser ici pour continuer.

+ +
+

Note : Si vous travaillez sur une tablette, ordinateur ou autre périphérique où vous n'auriez pas la capacité de créer vos propres fichiers, sachez que vous pouvez tester (la plupart) de vos lignes de code sur des programmes en ligne comme JSBin ou Thimble.

+
+ +

Guides

+ +

Ce module contient les articles suivants, qui vous guideront à travers les fondamentaux de l'intégration multimedia sur une page web.

+ +
+
Images en HTML
+
Il existe d'autres types de multimedia à prendre en compte mais il est logique de commencer par cet élément si humble qu'est  l'élément {{htmlelement("img")}}. Il est utilisé pour integrér une simple image dans une page web. Au long de cet article, nous verrons son utilisation en détails, des rudiments à l'annotation par légendes en utilisant {{HTMLElement("figure")}}, et de quelle manière il est liè  aux images d'arrière-plan de CSS.
+
Vidéo et contenu audio
+
Ensuite, nous étudierons la façon d'utiliser les éléments HTML5 {{HTMLElement("video")}} et {{HTMLElement("audio")}}, pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs,  enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens.
+
De <object> à <iframe> — autres techniques d'intégration
+
À ce stade, nous aimerions faire un pas de côté, en examinant quelques éléments qui vous permettent d'intégrer une grande variété de types de contenu dans vos pages web : les éléments {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} et {{HTMLElement("object")}}. <iframe> est fait pour intégrer d'autres pages web, les deux autres vous autorisent à faire de même pour les PDFs, SVG, et même Flash — une technologie en voie de disparition, mais que vous pouvez encore voir de façon semi-régulière.
+
Ajouter des images vectorielles sur le Web 
+
Les images vectorielles peuvent être très utiles dans certaines situations. Contrairement aux formats classiques comme le PNG/JPG, elles ne se déforment pas lorsqu'on les agrandit et peuvent rester lisses lorsqu'on les met à l'échelle. Cet article vous présente ce que sont les images vectorielles et comment inclure le populaire format {{glossary("SVG")}} dans les pages web.
+
Images adaptatives
+
+

Dans cet article, nous allons découvrir le concept d'images adaptatives — des images qui fonctionnent bien sur des appareils dont les tailles d'écran, les résolutions et autres caractéristiques sont très différentes — et examiner les outils fournis par HTML pour aider à les mettre en œuvre. Cela permet d'améliorer les performances des différents appareils. Les images adaptatives ne sont qu'une partie du responsive design, un futur sujet CSS que vous pourrez apprendre.

+
+
+ +

Évaluations

+ +

Les évaluations qui suivent sont là pour tester votre compréhension des bases du HTML traitées dans les guides ci-dessus.

+ +
+
Évaluation : page d'accueil Mozilla
+
Cette évaluation concernera vos connaissances de quelques unes des techniques traitées dans les articles de ce module, vous amenant à ajouter des images et vidéos à une page de garde « funky » développant les atouts de Mozilla !
+
+ +

À voir aussi

+ +
+
Intégrer une carte interactive en haut d'une image
+
Une représentation cartographique fournit un mécanisme qui lie différents secteurs d'une image à différents endroits. Pensez à une carte qui fournirait des informations plus approfondies sur chaque pays sur lequel vous cliquez. Cette technique peut parfois être d'une grande utilité.
+
Web Principes fondamentaux 2
+
+

Un excellent cours de Mozilla qui explore et teste les compétences développées dans le module :  Multimedia et intégration. Approfondissez les fondamentaux de la composition de pages web, concevez des outils pour l'accessibilité, le partage de ressources, découvrez l'utilisation de supports en ligne et la mutualisation du travail (ce qui signifie que votre travail est librement disponible et partagé avec d'autres). 

+
+
diff --git a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html deleted file mode 100644 index 37cd4e8230..0000000000 --- a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: 'Évaluation : page d''accueil Mozilla' -slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page -translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page -original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
- -

Dans cette partie, nous testerons vos connaissances des quelques techniques abordées dans les articles de ce module, en vous demandant d'ajouter des images et des vidéos à une super page d'accueil entièrement dédiée à Mozilla !

- - - - - - - - - - - - -
Prérequis :Avant de vous attaquer à cette étude, vous devriez avoir déjà travaillé sur les paragraphes précédents composant le module Multimedia et Intégration.
Objectif:Tester vos connaissances sur l'intégration d'images et vidéos dans des pages web ainsi que des techniques d'images adaptatives (images "responsive").
- -

Point de départ

- -

Pour démarrer cette étude, vous devez aller chercher toutes les images et l'HTML disponibles dans le répertoire mdn-splash-page-start sur github. Mettez le contenu du fichier index.html dans un fichier appelé index.html sur votre disque dur local, dans un nouveau répertoire. Puis copiez pattern.png dans le même dossier (clic droit sur l'image pour le menu des options).

- -

Allez dans le répertoire originals chercher les différentes images et faites la même chose; vous aurez peut-être à les enregistrer dans un nouveau dossier pour l'instant, au cas où vous auriez besoin d'en manipuler certaines en utilisant un éditeur graphique avant de pouvoir les utiliser.

- -
-

Note : le fichier HTML en exemple contient un bon nombre de CSS, pour styliser la page. Vous n'avez pas besoin de modifier le CSS, juste l'HTML dans l'élément {{htmlelement("body")}} — tant que vous insérez les bonnes balises, le style sera cohérent.

-
- -

Énoncé du projet

- -

Dans cette étude, nous vous présentons une page d'accueil Mozilla quasiment finie, qui a pour but de définir, en des termes agréables et intéressants, les objectifs de Mozilla et de fournir des liens vers des ressources supplémentaires. Malheureusement, aucune image ni vidéo n'a été ajoutée pour l'instant — c'est votre boulot ! Vous devez ajouter des choses qui donnent du sens à la page et la rendent belle. Les sous-sections suivantes détaillent ce que vous aurez besoin de faire :

- -

Préparer les images

- -

Avec votre éditeur d'images favori, créez des versions de 400 et 120 px de large de :

- - - -

Donnez-leur des noms similaires comme :  firefoxlogo400.png et firefoxlogo120.png.

- -

Continuons avec mdn.svg, ces images seront vos icônes pour lier aux ressources externes, contenues dans l'espacefurther-info. Vous ferez aussi un lien vers le logo firefox dans l'en-tête du site. Réservez toutes ces copies dans le même dossier que l'index.html.

- -

Puis, créez une version paysage de 1200px de large de red-panda.jpg, et une version portrait de 600px de large qui montre le panda en gros plan. Encore une fois, nommez-les de manière similaire pour les identifier facilement. Réservez toutes ces copies dans le même dossier que l'index.html.

- -
-

Note : Vous devriez optimiser vos images JPG et PNG pour les rendre le plus petit possible tout en restant de bonne qualité. tinypng.com est une bonne aide pour faire ça aisément.

-
- -

Ajouter un logo à l'en-tête

- -

A l'intèrieur de l'élément {{htmlelement("header")}} , ajoutez un élément {{htmlelement("img")}} qui intégrera une petite version du logo firefox dans l'en-tête.

- -

Ajouter une vidéo dans le contenu principal de l'article

- -

Dans l'élément {{htmlelement("article")}}  (juste en-dessous de la balise d'ouverture), intégrez la vidéo YouTube trouvée ici : https://www.youtube.com/watch?v=ojcNcvb1olg, en utilisant les outils YouTube appropriés pour générer le code. La vidéo devra faire 400px de large.

- -

Ajouter des images adaptatives aux liens vers les ressources externes

- -

Dans l'élément {{htmlelement("div")}} de la catégorie further-info vous trouverez quatre autres éléments {{htmlelement("a")}} — chacun d'eux liant vers une page intéressante traitant de Mozilla. Pour compléter cette section, vous devrez insérer un élément {{htmlelement("img")}} dans ceux contenant les attributs {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}} adéquats.

- -

Dans tous les cas (sauf un — lequel serait naturellement adaptatif ?) nous voulons que le navigateur desserve la version 120px de large quand la largeur du cadre est de 480px ou moins, ou la version 400px de large dans les autres cas.

- -

Assurez-vous de faire correspondre les bonnes images avec les liens corrects !

- -
-

Note : Pour tester correctement les exemples srcset/sizes, vous devez charger votre site sur un serveur (utiliser Github pages est une solution simple et gratuite), ensuite vous pouvez tester si tout se déroule correctement en utilisant des outils de développeur, comme expliqué dans Responsive images: useful developer tools.

-
- -

Un panda rouge créatif

- -

Dans l'élément {{htmlelement("div")}} de la catégorie red-panda, nous voulons insérer un élément {{htmlelement("picture")}} qui affiche le petit portrait du panda si le cadre est de 600px de large, ou moins, et le paysage dans les autres cas.

- -

Exemple

- -

La capture d'écran suivante montre à quoi devrait ressembler la page d'accueil aprés avoir été correctement balisée, avec un affichage large et un étroit.

- -

A wide shot of our example splash page

- -

A narrow shot of our example splash page

- -

Évaluation

- -

Si vous suivez cette étude en faisant partie d'un programme de cours organisé, vous devriez pouvoir montrer votre travail à votre professeur/mentor pour une correction. Si vous apprenez seul, alors vous pourrez obtenir des informations et des corrections en demandant sur le  fil de discussion concernant cet exercice, ou sur le canal IRC #mdn sur Mozilla IRC. Essayez de faire l'exercice d'abord — On ne gagne rien en trichant !

- -

{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

- -

 

- -

Dans ce module :

- - - -

 

diff --git a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md new file mode 100644 index 0000000000..37cd4e8230 --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md @@ -0,0 +1,111 @@ +--- +title: 'Évaluation : page d''accueil Mozilla' +slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Dans cette partie, nous testerons vos connaissances des quelques techniques abordées dans les articles de ce module, en vous demandant d'ajouter des images et des vidéos à une super page d'accueil entièrement dédiée à Mozilla !

+ + + + + + + + + + + + +
Prérequis :Avant de vous attaquer à cette étude, vous devriez avoir déjà travaillé sur les paragraphes précédents composant le module Multimedia et Intégration.
Objectif:Tester vos connaissances sur l'intégration d'images et vidéos dans des pages web ainsi que des techniques d'images adaptatives (images "responsive").
+ +

Point de départ

+ +

Pour démarrer cette étude, vous devez aller chercher toutes les images et l'HTML disponibles dans le répertoire mdn-splash-page-start sur github. Mettez le contenu du fichier index.html dans un fichier appelé index.html sur votre disque dur local, dans un nouveau répertoire. Puis copiez pattern.png dans le même dossier (clic droit sur l'image pour le menu des options).

+ +

Allez dans le répertoire originals chercher les différentes images et faites la même chose; vous aurez peut-être à les enregistrer dans un nouveau dossier pour l'instant, au cas où vous auriez besoin d'en manipuler certaines en utilisant un éditeur graphique avant de pouvoir les utiliser.

+ +
+

Note : le fichier HTML en exemple contient un bon nombre de CSS, pour styliser la page. Vous n'avez pas besoin de modifier le CSS, juste l'HTML dans l'élément {{htmlelement("body")}} — tant que vous insérez les bonnes balises, le style sera cohérent.

+
+ +

Énoncé du projet

+ +

Dans cette étude, nous vous présentons une page d'accueil Mozilla quasiment finie, qui a pour but de définir, en des termes agréables et intéressants, les objectifs de Mozilla et de fournir des liens vers des ressources supplémentaires. Malheureusement, aucune image ni vidéo n'a été ajoutée pour l'instant — c'est votre boulot ! Vous devez ajouter des choses qui donnent du sens à la page et la rendent belle. Les sous-sections suivantes détaillent ce que vous aurez besoin de faire :

+ +

Préparer les images

+ +

Avec votre éditeur d'images favori, créez des versions de 400 et 120 px de large de :

+ + + +

Donnez-leur des noms similaires comme :  firefoxlogo400.png et firefoxlogo120.png.

+ +

Continuons avec mdn.svg, ces images seront vos icônes pour lier aux ressources externes, contenues dans l'espacefurther-info. Vous ferez aussi un lien vers le logo firefox dans l'en-tête du site. Réservez toutes ces copies dans le même dossier que l'index.html.

+ +

Puis, créez une version paysage de 1200px de large de red-panda.jpg, et une version portrait de 600px de large qui montre le panda en gros plan. Encore une fois, nommez-les de manière similaire pour les identifier facilement. Réservez toutes ces copies dans le même dossier que l'index.html.

+ +
+

Note : Vous devriez optimiser vos images JPG et PNG pour les rendre le plus petit possible tout en restant de bonne qualité. tinypng.com est une bonne aide pour faire ça aisément.

+
+ +

Ajouter un logo à l'en-tête

+ +

A l'intèrieur de l'élément {{htmlelement("header")}} , ajoutez un élément {{htmlelement("img")}} qui intégrera une petite version du logo firefox dans l'en-tête.

+ +

Ajouter une vidéo dans le contenu principal de l'article

+ +

Dans l'élément {{htmlelement("article")}}  (juste en-dessous de la balise d'ouverture), intégrez la vidéo YouTube trouvée ici : https://www.youtube.com/watch?v=ojcNcvb1olg, en utilisant les outils YouTube appropriés pour générer le code. La vidéo devra faire 400px de large.

+ +

Ajouter des images adaptatives aux liens vers les ressources externes

+ +

Dans l'élément {{htmlelement("div")}} de la catégorie further-info vous trouverez quatre autres éléments {{htmlelement("a")}} — chacun d'eux liant vers une page intéressante traitant de Mozilla. Pour compléter cette section, vous devrez insérer un élément {{htmlelement("img")}} dans ceux contenant les attributs {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}} adéquats.

+ +

Dans tous les cas (sauf un — lequel serait naturellement adaptatif ?) nous voulons que le navigateur desserve la version 120px de large quand la largeur du cadre est de 480px ou moins, ou la version 400px de large dans les autres cas.

+ +

Assurez-vous de faire correspondre les bonnes images avec les liens corrects !

+ +
+

Note : Pour tester correctement les exemples srcset/sizes, vous devez charger votre site sur un serveur (utiliser Github pages est une solution simple et gratuite), ensuite vous pouvez tester si tout se déroule correctement en utilisant des outils de développeur, comme expliqué dans Responsive images: useful developer tools.

+
+ +

Un panda rouge créatif

+ +

Dans l'élément {{htmlelement("div")}} de la catégorie red-panda, nous voulons insérer un élément {{htmlelement("picture")}} qui affiche le petit portrait du panda si le cadre est de 600px de large, ou moins, et le paysage dans les autres cas.

+ +

Exemple

+ +

La capture d'écran suivante montre à quoi devrait ressembler la page d'accueil aprés avoir été correctement balisée, avec un affichage large et un étroit.

+ +

A wide shot of our example splash page

+ +

A narrow shot of our example splash page

+ +

Évaluation

+ +

Si vous suivez cette étude en faisant partie d'un programme de cours organisé, vous devriez pouvoir montrer votre travail à votre professeur/mentor pour une correction. Si vous apprenez seul, alors vous pourrez obtenir des informations et des corrections en demandant sur le  fil de discussion concernant cet exercice, ou sur le canal IRC #mdn sur Mozilla IRC. Essayez de faire l'exercice d'abord — On ne gagne rien en trichant !

+ +

{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

+ +

 

+ +

Dans ce module :

+ + + +

 

diff --git a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html deleted file mode 100644 index c840ee2f9e..0000000000 --- a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html +++ /dev/null @@ -1,397 +0,0 @@ ---- -title: Des objets aux « iframe » — autres techniques d'intégration -slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies -tags: - - Apprentissage - - Article - - Codage - - Débutant - - Flash - - Guide - - HTML - - Integration - - Multimédia et intégration - - Object - - embed - - iframe -translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies -original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
- -

Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les  <iframe> servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement.

- - - - - - - - - - - - -
Prérequis :Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et articles précédents de ce module.
Objectif :Apprendre comment incorporer des éléments, tels que d'autres pages ou des clips Flash,  dans des pages Web à l'aide de {{htmlelement("object")}}, {{htmlelement("embed")}}, et {{htmlelement("iframe")}}.
- -

Une courte histoire de l'intégration

- -

Il y a longtemps, sur le Web, il était courant d'utiliser des cadres pour créer des sites Web - des petites parties de site Web stockées dans des pages HTML individuelles. Ces cadres étaient intégrés dans un document maître appelé frameset (ensemble de cadres) qui permettait de préciser la zone de l'écran que chaque cadre devait occuper, un peu comme le dimensionnement de colonnes et de lignes dans un tableau. Cette technique a été considérée comme le summum de la zénitude du milieu des années 90 jusqu'à leur fin. Il était évident qu'une page Web éclatée en petits morceaux était meilleure pour la vitesse du téléchargement — et tout à fait remarquable avec des connexions réseau si lentes à l'époque. Cette façon de procéder posait cependant de nombreux problèmes, qui l'emportaient de loin sur tout ce qui était positif à mesure que la vitesse du réseau s'accélérait, de sorte que vous ne la verrez plus utilisée.

- -

 

- -

Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les applets Java et Flash — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes : accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner.

- -

Enfin, l'élément {{htmlelement("iframe")}} est apparu (avec d'autres moyens d'intégration de contenu, comme {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc). Cet élément permet d'intégrer un document web entier dans un autre, comme s'il s'agissait d'un élément {{htmlelement("img")}}} ou d'un autre élément de ce type. Il  est régulièrement utilisé aujourd'hui.

- -

Maintenant que la leçon d'histoire est terminée, passons à autre chose et voyons comment utiliser certains d'entre eux.

- -

 

- -

Apprentissage actif : utilisations classiques de l'intégration

- -

Dans cet article, passons directement à l'apprentissage actif pour vous donner tout de suite une idée concrète de l'utilité des techniques d'intégration. Le monde en ligne connaît très bien Youtube, mais beaucoup de gens ne connaissent pas les facilités de partage dont il dispose. Voyons comment Youtube nous permet d'intégrer une vidéo dans toute page qui nous plairait à l'aide d'un élément {{htmlelement("iframe")}}}.

- -
    -
  1. D'abord, allez sur Youtube et choisissez une vidéo qui vous plaise.
    2. -
  2. Au‑dessous de la vidéo, vous devez trouver un bouton Share (Partager) — cliquez‑le pour afficher les options de partage.
    3. -
  3. Sélectionnez le bouton Embed (Intégrer) et vous obtiendrez un morceau de code <iframe> — copiez‑le.
    4. -
  4. Inserez ce code dans la boîte Input ci‑dessous, et voyez le résultat dans Output.
    5. -
- -

En prime, vous pouvez aussi essayer d'intégrer une carte Google Map dans l'exemple.

- -
    -
  1. Allez sur Google Maps et trouvez une carte qui vous plaise.
    2. -
  2. Cliquez sur le  « Menu Hamburger » (trois lignes horizontales) en haut à gauche de l'interface utilisateur.
    3. -
  3. Selectionnez l'option Share or embed map (Partager ou intégrer une carte).
    4. -
  4. Selectionnez l'option Embed map (intégrer une carte), qui vous fournira du code <iframe> — copiez‑le.
    5. -
  5. Inserez‑le dans la boîte Input di‑dessous et voyez le résultat dans Output.
    6. -
- -

Si vous faites une erreur, vous pouvez toujours réinitialiser le tout avec le bouton Réinitialiser. Si vous êtes vraiment bloqué, pressez le bouton Afficher la solution pour voir la réponse.

- - - - - - - -

{{ EmbedLiveSample("Apprentissage_actif_utilisations_classiques_de_l'intégration", 700, 600, "", "", "hide-codepen-jsfiddle") }}

- -

Iframes en détail

- -

Alors, facile et amusant, non ? Les éléments {{htmlelement("iframe")}} sont conçus pour intégrer d'autres documents Web dans le document en cours de traitement. C'est ce qu'il y a de mieux pour incorporer des contenus tierce‑partie dans un site Web, contenus sur lesquels vous n'aurez peut‑être pas de contrôle direct, mais pour lesquels vous ne voulez pas implémenter votre propre version — comme une vidéo de fournisseurs de vidéo en ligne, un système de commentaires comme Disqus, des cartes de fournisseurs en ligne, des bandeaux publicitaires, etc. Les exemples modifiables en direct utilisés dans ce cours ont été implémentés avec des <iframe>.

- -

Il y a de sérieux {{anch("problèmes de sécurité")}} à prendre en considération avec <iframe>, comme nous le verrons plus loin, mais cela ne veut pas dire que vous ne devez pas les utiliser dans vos sites Web — cela demande juste un peu de connaissance et de soin à la conception. Examinons le code un peu plus en détail. Disons que vous voulez intégrer le glossaire MDN dans une de vos pages Web — vous pourriez tenter quelque chose comme :

- -
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
-        width="100%" height="500" frameborder="0"
-        allowfullscreen sandbox>
-  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
-    Lien de repli pour les navigateurs ne prenant pas en charge iframe  </a> </p>
-</iframe>
- -

Cet exemple inclut les éléments de base essentiels nécessaires à l'utilisation d'un <iframe> :

- -
-
{{htmlattrxref('allowfullscreen','iframe')}}
-
Si activé, <iframe> pourra être mis en mode plein écran avec Full Screen API (un peu hors‑sujet dans cet article).
-
{{htmlattrxref('frameborder','iframe')}}
-
Si défini à la valeur 1, demande à l'explorateur de tracer une bordure entre cadres, c'est le comportement par défaut. 0 supprime la bordure. L'utilisation d'un tel attribut n'est plus trop recommandée, car le même résultat peut être obtenu en mieux avec {{cssxref('border')}}: none; dans le {{Glossary('CSS')}}.
-
{{htmlattrxref('src','iframe')}}
-
Cet attribut, comme  avec {{htmlelement("video")}} ou {{htmlelement("img")}}, contient un chemin vers l'URL du document à intégrer.
-
{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}
-
Ces attributs définissent la largeur et la hauteur souhaitée pour <iframe>.
-
Contenu de repli
-
Comme pour d'autres éléments semblables, tels {{htmlelement("video")}}, vous pouvez préciser un contenu de repli entre les balises ouvrantes et fermantes <iframe></iframe> qui seront affichées si l'explorateur ne prend pas en charge <iframe>. Dans notre cas nous avons mis un lien vers une page. Il est peu vraisemblable que vous rencontriez de nos jours un explorateur qui ne prenne pas en charge <iframe>.
-
{{htmlattrxref('sandbox','iframe')}}
-
Cet attribut n'est fonctionnel que dans des explorateurs un peu plus récents, contrairement aux autres attributs de  <iframe> (par ex. IE 10 et au‑delà). Il requiert des paramètres de sécurité renforcés ; nous vous en disons plus dans le paragraphe suivant.
-
- -
-

Note : Afin d'améliorer la vitesse, il est pertinent de définir l'attribut src de iframe avec JavaScript après que le chargement du contenu principal est effectué. La page est utilisable plus tôt et le temps de chargement officiel de la page est diminué (une métrique {{glossary("SEO")}} importante).

-
- -

Problèmes de sécurité

- -

Nous avons dit plus haut qu'il y avait des problèmes en matière de sécurité — entrons maintenant un peu plus dans le détail. Nous ne nous attendons pas à cette problèmatique vous soit parfaiment claire dès la première lecture ; nous voulons simplement vous y sensibiliser et fournir un point de référence auquel vous pourrez revenir quand vous aurez plus d'expérience et commencerez à prévoir l'utilisation de <iframe> dans vos travaux et expérimentations. Car, il n'y a pas de craintes inutiles à avoir et refuser d'utiliser <iframe> — il faut juste être prudent. Poursuivons ...

- -

Fabricants de navigateurs et développeurs Web ont appris à la dure que <iframe> constitue sur le Web une cible commune (terme officiel : un vecteur d'attaque) pour des personnes mal intentionnées (souvent appelés hackeurs (pirates), ou plus exactement, crackeurs).  <iframe> est une porte d'entrée pour les attaques de ces personnes quand ils essaient de modifier malicieusement une page Web ou d'amener des utilisateurs à faire quelque chose qu'ils ne voudraient pas faire, comme révéler des informations confidentielles comme noms d'utilisateur et mots de passe. Pour cette raison, les ingénieurs spécialistes et les développeurs de navigateurs ont développé divers mécanismes de sécurité pour rendre <iframe> plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous.

- -
-

Note : Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de <iframe> : les hackeurs incorporent un <iframe> invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles.

-
- -

Un exemple rapide d'abord - essayez de charger l'exemple précédent que nous avons montré ci-dessus dans votre navigateur - vous pouvez le trouver en direct sur Github (voyez le code source aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la Console dans les outils de développement du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing (Chargement interdit par X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre) . C'est parce que les développeurs qui ont construit MDN ont inclus un paramètre sur le serveur des pages du site empêchant l'intégration de ces pages sur un autre site avec <iframe> (voir {{anch("Configurer les directives CSP")}}, ci-dessous). Parfaitement sensé — il n'y a aucune raison d'intégrer une page entière de MDN dans d'autres pages, sauf à vouloir les intégrer dans votre site et les prétendre vôtres, ou bien tenter de voler des données par l'intermédiaire d'un détournement de clic, actions qui sont tous les deux des malhonnêtetés. De plus, si tout le monde se mettait à faire cela, toute la bande passante supplémentaire nécessaire commencerait à coûter un paquet d'argent à Mozilla.

- -

N'intégrer que si nécessaire

- -

Il est parfois judicieux d'intégrer un contenu tiers — comme une vidéo YouTube ou des cartes — mais vous pouvez vous éviter bien des maux de tête si vous n'intégrez du contenu tierce partie qu'en cas de nécessité. Pour la sécurité sur le Web, voici une bonne règle d'or : "On n'est jamais trop prudent. Si vous l'avez fait, vérifiez quand même. Si quelqu'un d'autre l'a fait, supposez que c'est dangereux jusqu'à preuve du contraire."

- -

Outre la sécurité, vous devez également prendre en considération les questions de propriété intellectuelle. La plupart des contenus sont protégés par des droits d'auteur, hors ligne et en ligne, même du contenu auquel vous ne vous attendez pas (par exemple, la plupart des images sur Wikimedia Commons). N'affichez jamais de contenu sur votre page Web à moins que vous en soyez propriétaire ou que les propriétaires vous aient donné une autorisation écrite sans équivoque. Les sanctions en cas de violation du droit d'auteur sont sévères. Encore une fois, on n'est jamais trop prudent.

- -
-

Si le contenu est sous licence, vous devez en respecter les termes. Par exemple, le contenu de MDN est sous licence CC-BY-SA. Cela signifie que vous devez correctement porter à notre crédit toute citation de notre contenu, même si vous y apportez des modifications substantielles.

-
- -

Utilisez HTTPS

- -

{{Glossary("HTTPS")}} est la version chiffrée de {{Glossary("HTTP")}}. Vous devriez alimenter vos serveurs Web en utilisant HTTPS chaque fois que c'est possible :

- -
    -
  1.     HTTPS réduit les risques d'altération du contenu distant lors du transfert,
    2. -
  2.     HTTPS empêche le contenu intégré d'accéder à celui du document parent, et inversement.
    3. -
- -

L'utilisation de HTTPS nécessite un certificat de sécurité, ce qui peut être coûteux (bien que Let's Encrypt facilite les choses) — si vous ne pouvez pas en obtenir un, vous pouvez charger votre document parent sur le serveur en HTTP. Cependant, en raison de la deuxième fonctionnalité de HTTPS indiquée ci-dessus, et dans ce cas les histoires de coût n'interviennent plus, vous ne devez jamais intégrer du contenu tierce partie avec HTTP (dans le meilleur des cas, le navigateur Web de votre utilisateur lui affichera un avertissement effrayant). Toutes les sociétés sérieuses, rendant leur contenu disponible pour une intégration via un <iframe>, le rendront disponible avec HTTPS — regardez les URLs à l'intérieur de l'attribut src de <iframe> lorsque vous intégrez du contenu Google Maps ou YouTube, par exemple.

- -
-

Note : Github pages allows content to be served via HTTPS by default, so is useful for hosting content. If you are using different hosting and are not sure, ask your hosting provider about it.

-
- -

Toujours utiliser l'attribut  sandbox

- -

Pour minimiser la possibilité que des attaquants commettent des actions néfastes  sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il  fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un sandbox (bac à sable).

- -

Un contenu en dehors du « bac à sable » peut faire beaucoup trop de choses (exécuter du JavaScript, soumettre des formulaires, des fenêtres « popup », etc.). Par défaut, vous devez imposer toute restriction disponible avec un attribut sandbox sans paramètres, comme montré dans notre exemple précédent.

- -

Si c'est absolument nécessaire, vous pouvez ajouter des permissions une à une (en tant que valeur de l'attribut sandbox="") — voir l'entrée de référence {{htmlattrxref('sandbox','iframe')}} pour toutes les options disponibles. Il est important de noter que vous ne devez jamais mettre à la fois les valeurs allow-scripts et allow-same-origin aux attributs de la « sandbox » — dans ce cas,, le contenu intégré pourrait contourner la politique de sécurité originelle qui empêche les sites d'exécuter des scripts et donc utiliser JavaScript pour désactiver complètement le « bac à sable ».

- -
-

Note : Mettre le code dans le « bac à sable » n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un <iframe>). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}.

-
- -

Configurer  les directives CSP

- -

{{Glossary("CSP")}} est un acronyme pour « content security policy » (politique de sécurité du contenu) ; les directives CSP fournissent un ensemble d'en‑têtes HTTP (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les <iframe>, vous pouvez configurer votre serveur pour qu'il adresse une en‑tête appropriée X-Frame-Options. Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques) ; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut.

- -
-

Note : Lisez le post de Frederik Braun sur On the X-Frame-Options Security Header pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article.

-
- -

Les éléments <embed> et <object>

- -

Les éléments {{htmlelement("embed")}} et {{htmlelement("object")}} ont une fonction différente de {{htmlelement("iframe")}}} — ces éléments sont des outils d'intégration à caractère général pour importer plusieurs types de contenu externe ; cela comprend des technologies de greffons comme Java Applets ou Flash, PDF (affichable dans le navigateur avec un greffon PDF) et même du contenu comme des vidéos, du SVG ou des images !

- -
-

Note : Un greffon est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native.

-
- -

Cependant, il est peu probable que vous utilisiez beaucoup ces éléments — les applets ne sont plus utilisés depuis des années, Flash n'est plus très apprécié pour un certain nombre de raisons (voir {{anch("Le cas « greffons »")}}}, ci-dessous), les PDF ont tendance à être plutôt liés qu'intégrés, et les autres contenus tels que les images et la vidéo disposent d'éléments d'intégration beaucoup plus faciles à manipuler. Les greffons et ces méthodes d'intégration sont assurément une technique traditionnelle héritée : nous les mentionnons principalement au cas où vous les rencontreriez dans certaines circonstances, comme des intranets ou des projets d'entreprise.

- -

Si vous avez besoin d'intégrer du contenu de greffon, vous aurez besoin de ce minimum d'information :

- -

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 {{htmlelement("embed")}}{{htmlelement("object")}}
{{glossary("URL")}} du contenu à intégrer{{htmlattrxref('src','embed')}}{{htmlattrxref('data','object')}}
{{glossary("type MIME", 'type de media')}} précis du contenu intégré{{htmlattrxref('type','embed')}}{{htmlattrxref('type','object')}}
hauteur et largeur (en pixels CSS) de la boîte contrôlée par le greffon{{htmlattrxref('height','embed')}}
- {{htmlattrxref('width','embed')}}		{{htmlattrxref('height','object')}}
- {{htmlattrxref('width','object')}}
noms et valeurs à passer en paramètre au greffonattributs adéquats avec ces noms et valeurséléments de la simple balise {{htmlelement("param")}}, contenus dans <object>
contenu HTML indépendant en repli en cas de ressources inaccessiblesnon pris en charge (<noembed> a été abandonné)contenu dans <object>, après les éléments <param>
- -

 

- -
-

Note : <object> requiert un attribut data, un attribut type, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). typemustmatch empêche le fichier incorporé d'être exécuté avant que l'attribut type indique le type exact de média. typemustmatch  peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon).

-
- -

Voici un exemple utilisant l'élément {{htmlelement("embed")}} pour intégrer un film Flash (voyez ceci en direct sur Github ainsi que le code source également):

- -
<embed src="whoosh.swf" quality="medium"
-       bgcolor="#ffffff" width="550" height="400"
-       name="whoosh" align="middle" allowScriptAccess="sameDomain"
-       allowFullScreen="false" type="application/x-shockwave-flash"
-       pluginspage="http://www.macromedia.com/go/getflashplayer">
- -

Plutôt horrible, n'est-ce pas ? Le HTML généré par l'outil Adobe Flash avait tendance à être encore pire, utilisant un élément <objet> avec un élément <embed> intégré pour couvrir toutes les bases (voir un exemple.) Flash a même été utilisé avec succès comme contenu de repli pour la vidéo HTML5, pendant un certain temps, mais cela est de plus en plus souvent considéré comme non nécessaire.

- -

Regardons maintenant un exemple avec <object> ; il intègre  un PDF dans une  (voir  l'exemple en direct et le code source) :

- -
<object data="mypdf.pdf" type="application/pdf"
-        width="800" height="1200" typemustmatch>
-  <p>Vous ne possédez pas de greffon PDF, mais vous pouvez <a href="myfile.pdf">télécharger le fichier PDF.</a></p>
-</object>
- -

Les PDF étaient un tremplin nécessaire entre le papier et le numérique, mais ils posent de nombreux problèmes d'accessibilité et peuvent être difficiles à lire sur de petits écrans. Ils ont encore tendance à être populaires dans certains cercles, mais il est préférable d'établir un lien vers eux pour qu'ils puissent être téléchargés ou lus sur une page séparée, plutôt que de les intégrer dans une page Web.

- -

Le cas « greffons »

- -

Il était une fois des greffons qui s'étaient rendus indispensables sur le Web. Vous souvenez-vous de l'époque où vous deviez installer Adobe Flash Player juste pour regarder un film en ligne ? Et puis vous avez constamment reçu des alertes ennuyeuses pour la mise à jour de Flash Player et de votre environnement d'exécution Java. Depuis, les technologies Web sont devenues beaucoup plus robustes, et cette époque est révolue. Pour la plupart des applications, il est temps d'arrêter de diffuser du contenu dépendant de greffons et de commencer à tirer profit des technologies Web à la place.

- -

Mettez‑vous à portée de tout le monde. Tout le monde a un navigateur, mais les greffons sont de plus en plus rares, surtout chez les utilisateurs mobiles. Puisque le Web est largement utilisable sans greffons, les gens préfèront aller sur les sites de vos concurrents plutôt que d'installer un greffon.

- - - -

Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("JavaScript")}} peuvent facilement faire le travail pour vous sans besoin d'applets Java ou d'une technologie ActiveX/BHO dépassée. Au lieu de compter sur Adobe Flash, utilisez la vidéo HTML5 pour vos besoins en médias, SVG pour les graphiques vectoriels et Canvas pour les images et animations complexes. Peter Elst écrivait déjà il y a quelques années qu'Adobe Flash est rarement le bon outil pour le travail, sauf pour les jeux spécialisés et les applications d'affaires. Quant à ActiveX, même le navigateur{{glossary("Microsoft Edge", "Edge")}} de Microsoft ne le prend plus en charge.

- -

Résumé

- -

Le problème de l'intégration de contenus tiers dans des documents web peut rapidement devenir très complexe : dans cet article nous avons donc essayé de le présenter de manière simple et classique — en espérant la méthode pertinente même si elle touche à certaines fonctionnalités parmi les plus avancées des techniques impliquées. Pour commencer, il est peu probable que vous utilisiez l'intégration pour autre chose que l'intégration de contenu tiers de cartes ou vidéos dans vos pages. L'expérience grandissant, il est vraisemblable que vous lui trouverez d'autres utilisations.

- -

D'autres techniques impliquent l'intégration de contenu externe en plus de celles discutées ici. Nous en avons vu dans des articles précédents, comme {{htmlelement("video")}}}, {{htmlelement("audio")}}, et {{htmlelement("img")}}}, mais il y en a d'autres à découvrir, comme {{htmlelement("canvas")}} pour les graphiques 2D et 3D générés en JavaScript, et {{htmlelement("svg")}} pour intégrer des graphiques vectoriels. Nous verrons SVG dans le prochain article de ce module.

- -

 

- -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}

- -

 

- -

Dans ce module

- - - -

 

diff --git a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md new file mode 100644 index 0000000000..c840ee2f9e --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md @@ -0,0 +1,397 @@ +--- +title: Des objets aux « iframe » — autres techniques d'intégration +slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +tags: + - Apprentissage + - Article + - Codage + - Débutant + - Flash + - Guide + - HTML + - Integration + - Multimédia et intégration + - Object + - embed + - iframe +translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les  <iframe> servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement.

+ + + + + + + + + + + + +
Prérequis :Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et articles précédents de ce module.
Objectif :Apprendre comment incorporer des éléments, tels que d'autres pages ou des clips Flash,  dans des pages Web à l'aide de {{htmlelement("object")}}, {{htmlelement("embed")}}, et {{htmlelement("iframe")}}.
+ +

Une courte histoire de l'intégration

+ +

Il y a longtemps, sur le Web, il était courant d'utiliser des cadres pour créer des sites Web - des petites parties de site Web stockées dans des pages HTML individuelles. Ces cadres étaient intégrés dans un document maître appelé frameset (ensemble de cadres) qui permettait de préciser la zone de l'écran que chaque cadre devait occuper, un peu comme le dimensionnement de colonnes et de lignes dans un tableau. Cette technique a été considérée comme le summum de la zénitude du milieu des années 90 jusqu'à leur fin. Il était évident qu'une page Web éclatée en petits morceaux était meilleure pour la vitesse du téléchargement — et tout à fait remarquable avec des connexions réseau si lentes à l'époque. Cette façon de procéder posait cependant de nombreux problèmes, qui l'emportaient de loin sur tout ce qui était positif à mesure que la vitesse du réseau s'accélérait, de sorte que vous ne la verrez plus utilisée.

+ +

 

+ +

Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les applets Java et Flash — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes : accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner.

+ +

Enfin, l'élément {{htmlelement("iframe")}} est apparu (avec d'autres moyens d'intégration de contenu, comme {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc). Cet élément permet d'intégrer un document web entier dans un autre, comme s'il s'agissait d'un élément {{htmlelement("img")}}} ou d'un autre élément de ce type. Il  est régulièrement utilisé aujourd'hui.

+ +

Maintenant que la leçon d'histoire est terminée, passons à autre chose et voyons comment utiliser certains d'entre eux.

+ +

 

+ +

Apprentissage actif : utilisations classiques de l'intégration

+ +

Dans cet article, passons directement à l'apprentissage actif pour vous donner tout de suite une idée concrète de l'utilité des techniques d'intégration. Le monde en ligne connaît très bien Youtube, mais beaucoup de gens ne connaissent pas les facilités de partage dont il dispose. Voyons comment Youtube nous permet d'intégrer une vidéo dans toute page qui nous plairait à l'aide d'un élément {{htmlelement("iframe")}}}.

+ +
    +
  1. D'abord, allez sur Youtube et choisissez une vidéo qui vous plaise.
    2. +
  2. Au‑dessous de la vidéo, vous devez trouver un bouton Share (Partager) — cliquez‑le pour afficher les options de partage.
    3. +
  3. Sélectionnez le bouton Embed (Intégrer) et vous obtiendrez un morceau de code <iframe> — copiez‑le.
    4. +
  4. Inserez ce code dans la boîte Input ci‑dessous, et voyez le résultat dans Output.
    5. +
+ +

En prime, vous pouvez aussi essayer d'intégrer une carte Google Map dans l'exemple.

+ +
    +
  1. Allez sur Google Maps et trouvez une carte qui vous plaise.
    2. +
  2. Cliquez sur le  « Menu Hamburger » (trois lignes horizontales) en haut à gauche de l'interface utilisateur.
    3. +
  3. Selectionnez l'option Share or embed map (Partager ou intégrer une carte).
    4. +
  4. Selectionnez l'option Embed map (intégrer une carte), qui vous fournira du code <iframe> — copiez‑le.
    5. +
  5. Inserez‑le dans la boîte Input di‑dessous et voyez le résultat dans Output.
    6. +
+ +

Si vous faites une erreur, vous pouvez toujours réinitialiser le tout avec le bouton Réinitialiser. Si vous êtes vraiment bloqué, pressez le bouton Afficher la solution pour voir la réponse.

+ + + + + + + +

{{ EmbedLiveSample("Apprentissage_actif_utilisations_classiques_de_l'intégration", 700, 600, "", "", "hide-codepen-jsfiddle") }}

+ +

Iframes en détail

+ +

Alors, facile et amusant, non ? Les éléments {{htmlelement("iframe")}} sont conçus pour intégrer d'autres documents Web dans le document en cours de traitement. C'est ce qu'il y a de mieux pour incorporer des contenus tierce‑partie dans un site Web, contenus sur lesquels vous n'aurez peut‑être pas de contrôle direct, mais pour lesquels vous ne voulez pas implémenter votre propre version — comme une vidéo de fournisseurs de vidéo en ligne, un système de commentaires comme Disqus, des cartes de fournisseurs en ligne, des bandeaux publicitaires, etc. Les exemples modifiables en direct utilisés dans ce cours ont été implémentés avec des <iframe>.

+ +

Il y a de sérieux {{anch("problèmes de sécurité")}} à prendre en considération avec <iframe>, comme nous le verrons plus loin, mais cela ne veut pas dire que vous ne devez pas les utiliser dans vos sites Web — cela demande juste un peu de connaissance et de soin à la conception. Examinons le code un peu plus en détail. Disons que vous voulez intégrer le glossaire MDN dans une de vos pages Web — vous pourriez tenter quelque chose comme :

+ +
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
+        width="100%" height="500" frameborder="0"
+        allowfullscreen sandbox>
+  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
+    Lien de repli pour les navigateurs ne prenant pas en charge iframe  </a> </p>
+</iframe>
+ +

Cet exemple inclut les éléments de base essentiels nécessaires à l'utilisation d'un <iframe> :

+ +
+
{{htmlattrxref('allowfullscreen','iframe')}}
+
Si activé, <iframe> pourra être mis en mode plein écran avec Full Screen API (un peu hors‑sujet dans cet article).
+
{{htmlattrxref('frameborder','iframe')}}
+
Si défini à la valeur 1, demande à l'explorateur de tracer une bordure entre cadres, c'est le comportement par défaut. 0 supprime la bordure. L'utilisation d'un tel attribut n'est plus trop recommandée, car le même résultat peut être obtenu en mieux avec {{cssxref('border')}}: none; dans le {{Glossary('CSS')}}.
+
{{htmlattrxref('src','iframe')}}
+
Cet attribut, comme  avec {{htmlelement("video")}} ou {{htmlelement("img")}}, contient un chemin vers l'URL du document à intégrer.
+
{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}
+
Ces attributs définissent la largeur et la hauteur souhaitée pour <iframe>.
+
Contenu de repli
+
Comme pour d'autres éléments semblables, tels {{htmlelement("video")}}, vous pouvez préciser un contenu de repli entre les balises ouvrantes et fermantes <iframe></iframe> qui seront affichées si l'explorateur ne prend pas en charge <iframe>. Dans notre cas nous avons mis un lien vers une page. Il est peu vraisemblable que vous rencontriez de nos jours un explorateur qui ne prenne pas en charge <iframe>.
+
{{htmlattrxref('sandbox','iframe')}}
+
Cet attribut n'est fonctionnel que dans des explorateurs un peu plus récents, contrairement aux autres attributs de  <iframe> (par ex. IE 10 et au‑delà). Il requiert des paramètres de sécurité renforcés ; nous vous en disons plus dans le paragraphe suivant.
+
+ +
+

Note : Afin d'améliorer la vitesse, il est pertinent de définir l'attribut src de iframe avec JavaScript après que le chargement du contenu principal est effectué. La page est utilisable plus tôt et le temps de chargement officiel de la page est diminué (une métrique {{glossary("SEO")}} importante).

+
+ +

Problèmes de sécurité

+ +

Nous avons dit plus haut qu'il y avait des problèmes en matière de sécurité — entrons maintenant un peu plus dans le détail. Nous ne nous attendons pas à cette problèmatique vous soit parfaiment claire dès la première lecture ; nous voulons simplement vous y sensibiliser et fournir un point de référence auquel vous pourrez revenir quand vous aurez plus d'expérience et commencerez à prévoir l'utilisation de <iframe> dans vos travaux et expérimentations. Car, il n'y a pas de craintes inutiles à avoir et refuser d'utiliser <iframe> — il faut juste être prudent. Poursuivons ...

+ +

Fabricants de navigateurs et développeurs Web ont appris à la dure que <iframe> constitue sur le Web une cible commune (terme officiel : un vecteur d'attaque) pour des personnes mal intentionnées (souvent appelés hackeurs (pirates), ou plus exactement, crackeurs).  <iframe> est une porte d'entrée pour les attaques de ces personnes quand ils essaient de modifier malicieusement une page Web ou d'amener des utilisateurs à faire quelque chose qu'ils ne voudraient pas faire, comme révéler des informations confidentielles comme noms d'utilisateur et mots de passe. Pour cette raison, les ingénieurs spécialistes et les développeurs de navigateurs ont développé divers mécanismes de sécurité pour rendre <iframe> plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous.

+ +
+

Note : Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de <iframe> : les hackeurs incorporent un <iframe> invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles.

+
+ +

Un exemple rapide d'abord - essayez de charger l'exemple précédent que nous avons montré ci-dessus dans votre navigateur - vous pouvez le trouver en direct sur Github (voyez le code source aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la Console dans les outils de développement du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing (Chargement interdit par X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre) . C'est parce que les développeurs qui ont construit MDN ont inclus un paramètre sur le serveur des pages du site empêchant l'intégration de ces pages sur un autre site avec <iframe> (voir {{anch("Configurer les directives CSP")}}, ci-dessous). Parfaitement sensé — il n'y a aucune raison d'intégrer une page entière de MDN dans d'autres pages, sauf à vouloir les intégrer dans votre site et les prétendre vôtres, ou bien tenter de voler des données par l'intermédiaire d'un détournement de clic, actions qui sont tous les deux des malhonnêtetés. De plus, si tout le monde se mettait à faire cela, toute la bande passante supplémentaire nécessaire commencerait à coûter un paquet d'argent à Mozilla.

+ +

N'intégrer que si nécessaire

+ +

Il est parfois judicieux d'intégrer un contenu tiers — comme une vidéo YouTube ou des cartes — mais vous pouvez vous éviter bien des maux de tête si vous n'intégrez du contenu tierce partie qu'en cas de nécessité. Pour la sécurité sur le Web, voici une bonne règle d'or : "On n'est jamais trop prudent. Si vous l'avez fait, vérifiez quand même. Si quelqu'un d'autre l'a fait, supposez que c'est dangereux jusqu'à preuve du contraire."

+ +

Outre la sécurité, vous devez également prendre en considération les questions de propriété intellectuelle. La plupart des contenus sont protégés par des droits d'auteur, hors ligne et en ligne, même du contenu auquel vous ne vous attendez pas (par exemple, la plupart des images sur Wikimedia Commons). N'affichez jamais de contenu sur votre page Web à moins que vous en soyez propriétaire ou que les propriétaires vous aient donné une autorisation écrite sans équivoque. Les sanctions en cas de violation du droit d'auteur sont sévères. Encore une fois, on n'est jamais trop prudent.

+ +
+

Si le contenu est sous licence, vous devez en respecter les termes. Par exemple, le contenu de MDN est sous licence CC-BY-SA. Cela signifie que vous devez correctement porter à notre crédit toute citation de notre contenu, même si vous y apportez des modifications substantielles.

+
+ +

Utilisez HTTPS

+ +

{{Glossary("HTTPS")}} est la version chiffrée de {{Glossary("HTTP")}}. Vous devriez alimenter vos serveurs Web en utilisant HTTPS chaque fois que c'est possible :

+ +
    +
  1.     HTTPS réduit les risques d'altération du contenu distant lors du transfert,
    2. +
  2.     HTTPS empêche le contenu intégré d'accéder à celui du document parent, et inversement.
    3. +
+ +

L'utilisation de HTTPS nécessite un certificat de sécurité, ce qui peut être coûteux (bien que Let's Encrypt facilite les choses) — si vous ne pouvez pas en obtenir un, vous pouvez charger votre document parent sur le serveur en HTTP. Cependant, en raison de la deuxième fonctionnalité de HTTPS indiquée ci-dessus, et dans ce cas les histoires de coût n'interviennent plus, vous ne devez jamais intégrer du contenu tierce partie avec HTTP (dans le meilleur des cas, le navigateur Web de votre utilisateur lui affichera un avertissement effrayant). Toutes les sociétés sérieuses, rendant leur contenu disponible pour une intégration via un <iframe>, le rendront disponible avec HTTPS — regardez les URLs à l'intérieur de l'attribut src de <iframe> lorsque vous intégrez du contenu Google Maps ou YouTube, par exemple.

+ +
+

Note : Github pages allows content to be served via HTTPS by default, so is useful for hosting content. If you are using different hosting and are not sure, ask your hosting provider about it.

+
+ +

Toujours utiliser l'attribut  sandbox

+ +

Pour minimiser la possibilité que des attaquants commettent des actions néfastes  sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il  fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un sandbox (bac à sable).

+ +

Un contenu en dehors du « bac à sable » peut faire beaucoup trop de choses (exécuter du JavaScript, soumettre des formulaires, des fenêtres « popup », etc.). Par défaut, vous devez imposer toute restriction disponible avec un attribut sandbox sans paramètres, comme montré dans notre exemple précédent.

+ +

Si c'est absolument nécessaire, vous pouvez ajouter des permissions une à une (en tant que valeur de l'attribut sandbox="") — voir l'entrée de référence {{htmlattrxref('sandbox','iframe')}} pour toutes les options disponibles. Il est important de noter que vous ne devez jamais mettre à la fois les valeurs allow-scripts et allow-same-origin aux attributs de la « sandbox » — dans ce cas,, le contenu intégré pourrait contourner la politique de sécurité originelle qui empêche les sites d'exécuter des scripts et donc utiliser JavaScript pour désactiver complètement le « bac à sable ».

+ +
+

Note : Mettre le code dans le « bac à sable » n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un <iframe>). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}.

+
+ +

Configurer  les directives CSP

+ +

{{Glossary("CSP")}} est un acronyme pour « content security policy » (politique de sécurité du contenu) ; les directives CSP fournissent un ensemble d'en‑têtes HTTP (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les <iframe>, vous pouvez configurer votre serveur pour qu'il adresse une en‑tête appropriée X-Frame-Options. Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques) ; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut.

+ +
+

Note : Lisez le post de Frederik Braun sur On the X-Frame-Options Security Header pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article.

+
+ +

Les éléments <embed> et <object>

+ +

Les éléments {{htmlelement("embed")}} et {{htmlelement("object")}} ont une fonction différente de {{htmlelement("iframe")}}} — ces éléments sont des outils d'intégration à caractère général pour importer plusieurs types de contenu externe ; cela comprend des technologies de greffons comme Java Applets ou Flash, PDF (affichable dans le navigateur avec un greffon PDF) et même du contenu comme des vidéos, du SVG ou des images !

+ +
+

Note : Un greffon est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native.

+
+ +

Cependant, il est peu probable que vous utilisiez beaucoup ces éléments — les applets ne sont plus utilisés depuis des années, Flash n'est plus très apprécié pour un certain nombre de raisons (voir {{anch("Le cas « greffons »")}}}, ci-dessous), les PDF ont tendance à être plutôt liés qu'intégrés, et les autres contenus tels que les images et la vidéo disposent d'éléments d'intégration beaucoup plus faciles à manipuler. Les greffons et ces méthodes d'intégration sont assurément une technique traditionnelle héritée : nous les mentionnons principalement au cas où vous les rencontreriez dans certaines circonstances, comme des intranets ou des projets d'entreprise.

+ +

Si vous avez besoin d'intégrer du contenu de greffon, vous aurez besoin de ce minimum d'information :

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 {{htmlelement("embed")}}{{htmlelement("object")}}
{{glossary("URL")}} du contenu à intégrer{{htmlattrxref('src','embed')}}{{htmlattrxref('data','object')}}
{{glossary("type MIME", 'type de media')}} précis du contenu intégré{{htmlattrxref('type','embed')}}{{htmlattrxref('type','object')}}
hauteur et largeur (en pixels CSS) de la boîte contrôlée par le greffon{{htmlattrxref('height','embed')}}
+ {{htmlattrxref('width','embed')}}		{{htmlattrxref('height','object')}}
+ {{htmlattrxref('width','object')}}
noms et valeurs à passer en paramètre au greffonattributs adéquats avec ces noms et valeurséléments de la simple balise {{htmlelement("param")}}, contenus dans <object>
contenu HTML indépendant en repli en cas de ressources inaccessiblesnon pris en charge (<noembed> a été abandonné)contenu dans <object>, après les éléments <param>
+ +

 

+ +
+

Note : <object> requiert un attribut data, un attribut type, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). typemustmatch empêche le fichier incorporé d'être exécuté avant que l'attribut type indique le type exact de média. typemustmatch  peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon).

+
+ +

Voici un exemple utilisant l'élément {{htmlelement("embed")}} pour intégrer un film Flash (voyez ceci en direct sur Github ainsi que le code source également):

+ +
<embed src="whoosh.swf" quality="medium"
+       bgcolor="#ffffff" width="550" height="400"
+       name="whoosh" align="middle" allowScriptAccess="sameDomain"
+       allowFullScreen="false" type="application/x-shockwave-flash"
+       pluginspage="http://www.macromedia.com/go/getflashplayer">
+ +

Plutôt horrible, n'est-ce pas ? Le HTML généré par l'outil Adobe Flash avait tendance à être encore pire, utilisant un élément <objet> avec un élément <embed> intégré pour couvrir toutes les bases (voir un exemple.) Flash a même été utilisé avec succès comme contenu de repli pour la vidéo HTML5, pendant un certain temps, mais cela est de plus en plus souvent considéré comme non nécessaire.

+ +

Regardons maintenant un exemple avec <object> ; il intègre  un PDF dans une  (voir  l'exemple en direct et le code source) :

+ +
<object data="mypdf.pdf" type="application/pdf"
+        width="800" height="1200" typemustmatch>
+  <p>Vous ne possédez pas de greffon PDF, mais vous pouvez <a href="myfile.pdf">télécharger le fichier PDF.</a></p>
+</object>
+ +

Les PDF étaient un tremplin nécessaire entre le papier et le numérique, mais ils posent de nombreux problèmes d'accessibilité et peuvent être difficiles à lire sur de petits écrans. Ils ont encore tendance à être populaires dans certains cercles, mais il est préférable d'établir un lien vers eux pour qu'ils puissent être téléchargés ou lus sur une page séparée, plutôt que de les intégrer dans une page Web.

+ +

Le cas « greffons »

+ +

Il était une fois des greffons qui s'étaient rendus indispensables sur le Web. Vous souvenez-vous de l'époque où vous deviez installer Adobe Flash Player juste pour regarder un film en ligne ? Et puis vous avez constamment reçu des alertes ennuyeuses pour la mise à jour de Flash Player et de votre environnement d'exécution Java. Depuis, les technologies Web sont devenues beaucoup plus robustes, et cette époque est révolue. Pour la plupart des applications, il est temps d'arrêter de diffuser du contenu dépendant de greffons et de commencer à tirer profit des technologies Web à la place.

+ +

Mettez‑vous à portée de tout le monde. Tout le monde a un navigateur, mais les greffons sont de plus en plus rares, surtout chez les utilisateurs mobiles. Puisque le Web est largement utilisable sans greffons, les gens préfèront aller sur les sites de vos concurrents plutôt que d'installer un greffon.

+ + + +

Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("JavaScript")}} peuvent facilement faire le travail pour vous sans besoin d'applets Java ou d'une technologie ActiveX/BHO dépassée. Au lieu de compter sur Adobe Flash, utilisez la vidéo HTML5 pour vos besoins en médias, SVG pour les graphiques vectoriels et Canvas pour les images et animations complexes. Peter Elst écrivait déjà il y a quelques années qu'Adobe Flash est rarement le bon outil pour le travail, sauf pour les jeux spécialisés et les applications d'affaires. Quant à ActiveX, même le navigateur{{glossary("Microsoft Edge", "Edge")}} de Microsoft ne le prend plus en charge.

+ +

Résumé

+ +

Le problème de l'intégration de contenus tiers dans des documents web peut rapidement devenir très complexe : dans cet article nous avons donc essayé de le présenter de manière simple et classique — en espérant la méthode pertinente même si elle touche à certaines fonctionnalités parmi les plus avancées des techniques impliquées. Pour commencer, il est peu probable que vous utilisiez l'intégration pour autre chose que l'intégration de contenu tiers de cartes ou vidéos dans vos pages. L'expérience grandissant, il est vraisemblable que vous lui trouverez d'autres utilisations.

+ +

D'autres techniques impliquent l'intégration de contenu externe en plus de celles discutées ici. Nous en avons vu dans des articles précédents, comme {{htmlelement("video")}}}, {{htmlelement("audio")}}, et {{htmlelement("img")}}}, mais il y en a d'autres à découvrir, comme {{htmlelement("canvas")}} pour les graphiques 2D et 3D générés en JavaScript, et {{htmlelement("svg")}} pour intégrer des graphiques vectoriels. Nous verrons SVG dans le prochain article de ce module.

+ +

 

+ +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}

+ +

 

+ +

Dans ce module

+ + + +

 

diff --git a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html deleted file mode 100644 index 29f0d234da..0000000000 --- a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html +++ /dev/null @@ -1,236 +0,0 @@ ---- -title: Images adaptatives -slug: Learn/HTML/Multimedia_and_embedding/Responsive_images -translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images -original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
- -

Dans cet article, nous allons préciser le concept d'images adaptatives — images qui s'adaptent aux appareils selon les différentes tailles d'écran, résolutions et autres caractéristiques de ce type — et examiner les outils fournis par HTML pour faciliter leur mise en œuvre. Les images adaptatives ne sont qu'une partie (elles préparent le terrain) de la conception de sites web adaptatifs, sujet sur lequel vous en apprendrez beaucoup plus dans un prochain module au sujet des CSS.

- - - - - - - - - - - - -
Prérequis :Vous devriez connaître les fondamentaux de HTML et comment ajouter des images statiques à une page web.
Objectifs :Apprendre comment utiliser des fonctionnalités comme srcset et l'élément <picture> pour implémenter des solutions d'images adaptatives sur les sites web.
- -

Pourquoi des images adaptatives ?

- -

Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Un site web classique a peut-être une image d'en-tête pour flatter le regard des visiteurs, plus peut-être quelques images de contenu plus loin. Imaginons que vous souhaitez que l'image d'en-tête couvre toute la largeur de l'en-tête et que l'image de contenu s'insère quelque part à l'intérieur de la colonne de contenu. Voici un exemple simple :

- -

Cet exemple de site est montré tel qu'il s'affiche sur un écran large - ici la première image s'affiche bien, et comme elle est suffisamment grande on voit le détail de l'image (promeneurs) en son centre

- -

Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez voir cet exemple en direct et trouver son code source sur GitHub). Nous ne nous attarderons pas sur les CSS, excepté pour préciser ceci :

- - - -

Tout cela c'est très bien, mais le problème apparaît lorsque vous commencez à regarder le site sur un écran étroit — l'en-tête semble correct, mais commence à prendre beaucoup de hauteur pour un mobile, et la première image de contenu d'autre part n'est pas terrible — à cette taille, vous avez du mal à distinguer les personnes !

- -

Notre site d'exemple vu sur un écran étroit  la première image est réduite à telle point qu'il est difficile d'y voir les détails.

- -

Quand le site est vu sur un écran étroit, il serait préférable de montrer une version recadrée de l'image sur les parties importantes de la vue au lieu de faire voir des bâtiments, et peut-être quelque chose entre les deux pour un écran de largeur moyenne comme une tablette — ce problème relève de décisions de nature artistique.

- -

De plus, il n'est pas nécessaire d'intégrer des images aussi volumineuses sur une page destinée à être affichée sur l'écran minuscule d'un mobile ; c'est le problème des changements de résolution — une image matricielle est définie sur un certain nombre de pixels de large et un certain nombre de pixels de haut ; comme on a pu le voir à propos des graphiques vectoriels, une image matricielle paraît pixelisée si elle est affichée plus grande que sa taille d'origine (alors qu'un graphique vectoriel ne l'est pas).

- -

Et si elle est montrée significativement plus petite que sa taille d'origine, c'est un gaspillage de bande passante — les personnes utilisant des navigateurs mobiles en particulier ne veulent pas gaspiller leur bande passante en téléchargeant une grande image destinée à des ordinateurs de bureau, alors qu'une petite image ferait l'affaire pour leur appareil. La solution idéale serait d'avoir plusieurs résolutions disponibles et de servir des tailles appropriées selon le type d'appareil accédant au site web.

- -

Pour compliquer encore plus les choses, certains appareils ont des écrans à haute résolution, écrans qui ont besoin d'images plus grandes que ce à quoi on pourrait s'attendre pour s'afficher correctement. Il s'agit pratiquement du même problème, mais dans un contexte légèrement différent.

- -

Vous pouvez penser que des images vectorielles sont la solution à ces problèmes : elles le sont dans une certaine mesure — elles sont à la fois de petite taille et se mettent à l'échelle. Utilisez‑les partout où c'est possible. Mais elles ne conviennent pas à tous les types d'images — parfaites pour des graphiques simples, des motifs, des éléments d'interface, etc., il devient très compliqué de créer une image vectorielle avec le genre de détails que l'on trouve dans une photo, par exemple. Les formats matriciels comme JPEG sont plus adaptés au type d'images affiché dans l'exemple ci-dessus.

- -

Ce type de problème n'existait pas quand le web a vu le jour, du début jusqu'au milieu des années 90 — à l'époque, les seuls appareils permettant de naviguer sur le web étaient les ordinateurs de bureau et les portables, de sorte que les ingénieurs et rédacteurs de spécifications pour les navigateurs ne pouvaient même pas imaginer l'existence de ces problèmes. Pour résoudre les problèmes indiqués ci-dessus, les techniques d'images adaptatives sont de mise en œuvre récente : elles offrent au navigateur plusieurs fichiers d'images, soit montrant tous la même chose mais avec un nombre de pixels différent (commutation de résolution), soit des images différentes selon l'espace alloué (décisions artistiques).

- -
-

Note : Toutes les nouvelles fonctionnalités présentées dans cet article — srcset/sizes/<picture> — sont toutes prises en charge dans les versions de navigateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris le navigateur Edge de Microsoft, même si ce n'est pas le cas d'Internet Explorer).

-
- -

Comment créer des images adaptatives ?

- -

Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément <img> du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a sans doute de meilleurs outils que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir.

- -

Commutations de résolution : tailles différentes

- -

Alors, quel est le problème à résoudre à l'aide des commutations de résolution ? Nous voulons afficher un contenu d'image identique, juste plus grand ou plus petit selon l'appareil — c'est la situation de la deuxième image du contenu de notre exemple précédent. L'élément standard <img> vous permet classiquement de ne faire pointer le navigateur que vers un seul fichier source :

- -
<img src="elva-fairy-800w.jpg" alt="Elva habillée en fée">
- -

Mais il est possible d'utiliser deux nouveaux attributs — srcset et sizes — permettant de fournir plusieurs images source avec des indications pour permettre au navigateur de faire le bon choix. Vous trouverez un exemple de cela dans le fichier responsive.html sur GitHub (voyez aussi le code source) :

- -
-<img srcset="elva-fairy-480w.jpg 480w,
-             elva-fairy-800w.jpg 800w"
-     sizes="(max-width: 600px) 480px,
-            800px"
-     src="elva-fairy-800w.jpg"
-     alt="Elva dressed as a fairy">
-
- -

Les attributs srcset et sizes paraissent complexes, mais ils ne sont pas difficiles à comprendre si vous les formatez comme indiqué ci-dessus, avec une partie différente de la valeur de l'attribut sur chaque ligne. Chaque valeur contient une liste séparée par des virgules et chaque partie de la liste est composée de trois sous-parties. Passons maintenant en revue leur contenu.

- -

srcset définit l'ensemble des images offertes au choix du navigateur, et la taille de chaque image. Avant chaque virgule, nous avons écrit :

- -
    -
  1. un nom de fichier image (elva-fairy-480w.jpg),
    2. -
  2. un espace,
    3. -
  3. la largeur intrinsèque en pixels (480w) — notez l'utilisation de l'unité w, et non px comme vous auriez pu penser. C'est la taille réelle de l'image; qui peut être trouvée en examinant les propriétés du fichier image sur l'ordinateur (par exemple sur un Mac, sélectionnez l'image dans le Finder, puis appuyez sur Cmd + I pour faire apparaître l'écran des infos).
    4. -
- -

sizes définit un ensemble de conditions pour le média (par ex. des largeurs d'écran) et indique quelle taille d'image serait la plus adaptée si certaines conditions sont satisfaites — ce sont les conditions dont nous avons parlé plus haut. Dans ce cas, nous écrivons avant chaque virgule :

- -
    -
  1. une condition pour le média ((max-width:480px)) — vous pourrez en savoir plus à ce propos dans l'article sur les CSS, mais pour le moment disons simplement que cette condition pour le média décrit un état possible de l'écran. Dans notre cas, nous disons « si la largeur de fenêtre est de 480 pixels ou moins »,
    2. -
  2. une espace,
    3. -
  3. la largeur de la place occupée par l'image si la condition pour le média est vraie (440px).
    4. -
- -
-

Note : pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (px, em) ou relative au viewport (vw), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). Le navigateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média.

-
- -

Ainsi, une fois ces attributs en place, le navigateur va :

- -
    -
  1. noter la largeur du périphérique,
    2. -
  2. vérifier quelle est la première condition vraie pour le média dans la liste des tailles,
    3. -
  3. noter la largeur d'emplacement demandée par le média,
    4. -
  4. charger l'image référencée dans la liste srcset qui est la plus proche de la taille choisie.
    5. -
- -

Et c'est tout ! Donc à ce stade, si un navigateur prenant en charge une largeur de vue de 480 px charge la page, la condition pour le média (max-width: 480px) sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier elva-fairy-480w.jpg sera chargé, car sa largeur intrinsèque (480w) est celle qui est la plus proche de 440px. L'image 800 px a une taille de 128 Ko sur disque alors que la version 480 px n'occupe que 63 Ko — une économie de 65Ko. Imaginez maintenant qu'il s'agisse d'une page avec beaucoup d'images. L'utilisation de cette technique peut permettre aux personnes naviguant sur mobile d'économiser beaucoup de bande passante.

- -
-

Note : lorsque vous testez cela avec un navigateur de bureau, si ce dernier échoue à charger l'image la plus étroite alors que vous avez réduit la largeur de la fenêtre au maximum, regardez la taille du viewport (dont vous pouvez avoir une approximation via l'instruction document.querySelector("html").clientWidth dans la console JavaScript). Selon les navigateurs, il existe différentes tailles minimales au-delà desquelles on ne pourra pas plus réduire la fenêtre (tailles minimales qui pourraient être plus larges qu'on ne le pense). Lorsque vous testez avec un navigateur mobile, vous pouvez utiliser les outils comme la page about:debugging de Firefox pour inspecter la page chargée sur le mobile à l'aide des outils de développement pour navigateur de bureau.

-

Pour observer les images chargées, vous pouvez utiliser l'onglet Moniteur réseau dans les outils de développement de Firefox.

-
- -

Les navigateurs les plus anciens qui ne prennent pas en charge ces fonctionnalités les ignorent; poursuivent et chargent normalement l'image référencée dans l'attribut src.

- -
-

Note : dans l'élément <head> du document, vous trouvez la ligne <meta name="viewport" content="width=device-width"> : ceci force les navigateurs mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains navigateurs mobiles mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception).

-
- - -

Commutation de résolution : même taille, résolutions différentes

- -

Si votre ordinateur prend en charge plusieurs résolutions d'affichage, mais que tout le monde voit l'image avec la même taille effective sur l'écran, vous pouvez permettre au navigateur de choisir une image de résolution appropriée en utilisant srcset avec x-descriptors et sans sizes — une syntaxe un peu plus facile en quelque sorte ! Vous pouvez trouver un exemple de ce à quoi cela ressemble dans srcset-resolutions.html (voir aussi le code source) :

- -
<img srcset="elva-fairy-320w.jpg,
-             elva-fairy-480w.jpg 1.5x,
-             elva-fairy-640w.jpg 2x"
-     src="elva-fairy-640w.jpg" alt="Elva habillée en fée">
-
- -

Une photo d'une petite fille habillée en fée avec un filtre appliqué à l'image pour obtenir l'effet d'une vieille photo.Dans cet exemple, le CSS suivant est appliqué à l'image de façon à ce qu'elle ait une largeur de 320 pixels à l'écran (également nommée pixels CSS) :

- -
img {
-  width: 320px;
-}
- -

Dans ce cas, sizes n'est pas nécessaire — le navigateur détermine simplement la résolution d'affichage de l'écran et montre l'image la plus appropriée référencée dans srcset. Donc si le dispositif accédant à la page a un affichage standard/basse résolution, avec un pixel de dispositif représentant chaque pixel CSS, l'image elva-fairy-320w.jpg sera chargée (le 1x est implicite, donc vous n'avez pas besoin de l'inclure.) Si le dispositif a une haute résolution de deux pixels de dispositif par pixel CSS ou plus, l'image elva‑fairy-640w.jpg sera chargée. L'image 640px a une taille de 93 Ko, alors que l'image 320 px n'a qu'une taille de 39 Ko.

- -

Décision de nature artistique

- -

Pour résumer, le problème des décisions de nature artistique réside dans le choix des modifications à apporter à l'image selon les diverses tailles d'affichage. Par exemple, si un instantané d'un grand plan paysager avec une personne au milieu, correctement affiché sur un site web avec le navigateur d'un ordinateur de bureau, est rétréci lorsque ce même site est visionné sur un navigateur de mobile, cet instantané risque d'avoir mauvaise mine, car la personne sera vraiment minuscule et difficile à voir. Il serait probablement préférable de montrer sur un mobile une image portrait plus petite d'un zoom sur la personne. L'élément <picture> nous permet d'implémenter ce type de solution.

- -

Revenons à notre exemple initial du fichier not-responsive.html. Cette image nécessite d'opérer un choix de nature artistique :

- -
<img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras">
- -

Arrangeons cela avec <picture>} ! Comme pour <vidéo> et <audio>, l'élément <picture> est une enveloppe conteneur de plusieurs éléments <source>} ; ces éléments indiquent plusieurs sources différentes entre lesquelles le navigateur peut choisir ; ils sont suivis du très important élément <img>}. Le code dans responsive.html ressemblera à :

- -
<picture>
-  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
-  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
-  <img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras">
-</picture>
-
- - - -

Ce code nous permet d'afficher une image adaptée à la fois sur un écran large et sur un écran étroit, comme montré ci‑dessous :

- -

Notre exemple vu sur un écran assez large : la première image est OK et on voit le détail au centre.Notre exemple vu sur un écran étroit où l'élément picture permet de passer la première image à une image en portrait, plus utile sur un écran étroit.

- -
-

Note : vous ne devez utiliser l'attribut media qu'avec un scénario de décision de nature artistique ; quand vous utilisez media, ne mettez pas de conditions pour le média avec l'attribut sizes.

-
- -

Pourquoi ne peut-on pas réaliser cela avec le CSS ou du JavaScript ?

- -

Lorsque le navigateur commence à charger une page, il commence à télécharger (précharger) toutes les images avant que l'analyseur principal n'ait commencé à charger et à interpréter le CSS et le JavaScript de la page. Cette technique est utile, car elle permet de réduire de 20 % en moyenne le temps de chargement des pages. Cependant, elle n'est d'aucune aide pour les images adaptatives, d'où la nécessité de mettre en œuvre des solutions comme srcset. Vous ne pourriez pas, par exemple, charger l'élément <img>}, puis détecter la largeur de fenêtre avec JavaScript et changer dynamiquement l'image source pour une image plus petite si désiré. À ce moment-là, l'image originale aurait déjà été chargée, et vous chargeriez en plus la petite image, ce qui est encore pire en termes d'image adaptative.

- - - -

Utilisez largement les formats d'image modernes

- -

Il existe plusieurs nouveaux formats d'image très intéressants (comme WebP et JPEG-2000) qui sont à la fois de taille réduite et de haute qualité. Toutefois, la prise en charge par les navigateurs est ponctuelle.

- -

<picture> nous permet de servir encore les plus vieux navigateurs. Vous pouvez indiquer le type MIME dans les attributs type de façon à ce que le navigateur puisse immédiatement rejeter les types de fichiers non pris en charge :

- -
<picture>
-  <source type="image/svg+xml" srcset="pyramid.svg">
-  <source type="image/webp" srcset="pyramid.webp">
-  <img src="pyramid.png" alt="Pyramide régulière constituée de quatre triangles équilatéraux">
-</picture>
-
- - - -

Testez vos compétences !

- -

Et vous voici à la fin de cet article, mais saurez-vous vous rappeler les informations les plus importantes ? Vous pourrez trouver une évaluation détaillée pour tester ces compétences à la fin du module : voir Créer une page de présentation de Mozilla.

- -

Résumé

- -

Voilà notre paquet‑cadeau pour des images adaptatives — nous espérons que ces nouvelles techniques vous plaisent. Résumons, nous vous avons exposé deux méthodes distinctes pour résoudre ce problème :

- - - -

Cet article est aussi la conclusion de l'ensemble du module Multimedia et intégration ! Avant de passer à autre chose, il vous reste à essayer notre évaluation multimédia et à voir comment vous vous en sortez. Amusez-vous bien.

- -

Voir aussi

- - - -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
- -

Dans ce module

- - \ No newline at end of file diff --git a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md new file mode 100644 index 0000000000..29f0d234da --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md @@ -0,0 +1,236 @@ +--- +title: Images adaptatives +slug: Learn/HTML/Multimedia_and_embedding/Responsive_images +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Dans cet article, nous allons préciser le concept d'images adaptatives — images qui s'adaptent aux appareils selon les différentes tailles d'écran, résolutions et autres caractéristiques de ce type — et examiner les outils fournis par HTML pour faciliter leur mise en œuvre. Les images adaptatives ne sont qu'une partie (elles préparent le terrain) de la conception de sites web adaptatifs, sujet sur lequel vous en apprendrez beaucoup plus dans un prochain module au sujet des CSS.

+ + + + + + + + + + + + +
Prérequis :Vous devriez connaître les fondamentaux de HTML et comment ajouter des images statiques à une page web.
Objectifs :Apprendre comment utiliser des fonctionnalités comme srcset et l'élément <picture> pour implémenter des solutions d'images adaptatives sur les sites web.
+ +

Pourquoi des images adaptatives ?

+ +

Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Un site web classique a peut-être une image d'en-tête pour flatter le regard des visiteurs, plus peut-être quelques images de contenu plus loin. Imaginons que vous souhaitez que l'image d'en-tête couvre toute la largeur de l'en-tête et que l'image de contenu s'insère quelque part à l'intérieur de la colonne de contenu. Voici un exemple simple :

+ +

Cet exemple de site est montré tel qu'il s'affiche sur un écran large - ici la première image s'affiche bien, et comme elle est suffisamment grande on voit le détail de l'image (promeneurs) en son centre

+ +

Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez voir cet exemple en direct et trouver son code source sur GitHub). Nous ne nous attarderons pas sur les CSS, excepté pour préciser ceci :

+ + + +

Tout cela c'est très bien, mais le problème apparaît lorsque vous commencez à regarder le site sur un écran étroit — l'en-tête semble correct, mais commence à prendre beaucoup de hauteur pour un mobile, et la première image de contenu d'autre part n'est pas terrible — à cette taille, vous avez du mal à distinguer les personnes !

+ +

Notre site d'exemple vu sur un écran étroit  la première image est réduite à telle point qu'il est difficile d'y voir les détails.

+ +

Quand le site est vu sur un écran étroit, il serait préférable de montrer une version recadrée de l'image sur les parties importantes de la vue au lieu de faire voir des bâtiments, et peut-être quelque chose entre les deux pour un écran de largeur moyenne comme une tablette — ce problème relève de décisions de nature artistique.

+ +

De plus, il n'est pas nécessaire d'intégrer des images aussi volumineuses sur une page destinée à être affichée sur l'écran minuscule d'un mobile ; c'est le problème des changements de résolution — une image matricielle est définie sur un certain nombre de pixels de large et un certain nombre de pixels de haut ; comme on a pu le voir à propos des graphiques vectoriels, une image matricielle paraît pixelisée si elle est affichée plus grande que sa taille d'origine (alors qu'un graphique vectoriel ne l'est pas).

+ +

Et si elle est montrée significativement plus petite que sa taille d'origine, c'est un gaspillage de bande passante — les personnes utilisant des navigateurs mobiles en particulier ne veulent pas gaspiller leur bande passante en téléchargeant une grande image destinée à des ordinateurs de bureau, alors qu'une petite image ferait l'affaire pour leur appareil. La solution idéale serait d'avoir plusieurs résolutions disponibles et de servir des tailles appropriées selon le type d'appareil accédant au site web.

+ +

Pour compliquer encore plus les choses, certains appareils ont des écrans à haute résolution, écrans qui ont besoin d'images plus grandes que ce à quoi on pourrait s'attendre pour s'afficher correctement. Il s'agit pratiquement du même problème, mais dans un contexte légèrement différent.

+ +

Vous pouvez penser que des images vectorielles sont la solution à ces problèmes : elles le sont dans une certaine mesure — elles sont à la fois de petite taille et se mettent à l'échelle. Utilisez‑les partout où c'est possible. Mais elles ne conviennent pas à tous les types d'images — parfaites pour des graphiques simples, des motifs, des éléments d'interface, etc., il devient très compliqué de créer une image vectorielle avec le genre de détails que l'on trouve dans une photo, par exemple. Les formats matriciels comme JPEG sont plus adaptés au type d'images affiché dans l'exemple ci-dessus.

+ +

Ce type de problème n'existait pas quand le web a vu le jour, du début jusqu'au milieu des années 90 — à l'époque, les seuls appareils permettant de naviguer sur le web étaient les ordinateurs de bureau et les portables, de sorte que les ingénieurs et rédacteurs de spécifications pour les navigateurs ne pouvaient même pas imaginer l'existence de ces problèmes. Pour résoudre les problèmes indiqués ci-dessus, les techniques d'images adaptatives sont de mise en œuvre récente : elles offrent au navigateur plusieurs fichiers d'images, soit montrant tous la même chose mais avec un nombre de pixels différent (commutation de résolution), soit des images différentes selon l'espace alloué (décisions artistiques).

+ +
+

Note : Toutes les nouvelles fonctionnalités présentées dans cet article — srcset/sizes/<picture> — sont toutes prises en charge dans les versions de navigateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris le navigateur Edge de Microsoft, même si ce n'est pas le cas d'Internet Explorer).

+
+ +

Comment créer des images adaptatives ?

+ +

Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément <img> du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a sans doute de meilleurs outils que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir.

+ +

Commutations de résolution : tailles différentes

+ +

Alors, quel est le problème à résoudre à l'aide des commutations de résolution ? Nous voulons afficher un contenu d'image identique, juste plus grand ou plus petit selon l'appareil — c'est la situation de la deuxième image du contenu de notre exemple précédent. L'élément standard <img> vous permet classiquement de ne faire pointer le navigateur que vers un seul fichier source :

+ +
<img src="elva-fairy-800w.jpg" alt="Elva habillée en fée">
+ +

Mais il est possible d'utiliser deux nouveaux attributs — srcset et sizes — permettant de fournir plusieurs images source avec des indications pour permettre au navigateur de faire le bon choix. Vous trouverez un exemple de cela dans le fichier responsive.html sur GitHub (voyez aussi le code source) :

+ +
+<img srcset="elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 600px) 480px,
+            800px"
+     src="elva-fairy-800w.jpg"
+     alt="Elva dressed as a fairy">
+
+ +

Les attributs srcset et sizes paraissent complexes, mais ils ne sont pas difficiles à comprendre si vous les formatez comme indiqué ci-dessus, avec une partie différente de la valeur de l'attribut sur chaque ligne. Chaque valeur contient une liste séparée par des virgules et chaque partie de la liste est composée de trois sous-parties. Passons maintenant en revue leur contenu.

+ +

srcset définit l'ensemble des images offertes au choix du navigateur, et la taille de chaque image. Avant chaque virgule, nous avons écrit :

+ +
    +
  1. un nom de fichier image (elva-fairy-480w.jpg),
    2. +
  2. un espace,
    3. +
  3. la largeur intrinsèque en pixels (480w) — notez l'utilisation de l'unité w, et non px comme vous auriez pu penser. C'est la taille réelle de l'image; qui peut être trouvée en examinant les propriétés du fichier image sur l'ordinateur (par exemple sur un Mac, sélectionnez l'image dans le Finder, puis appuyez sur Cmd + I pour faire apparaître l'écran des infos).
    4. +
+ +

sizes définit un ensemble de conditions pour le média (par ex. des largeurs d'écran) et indique quelle taille d'image serait la plus adaptée si certaines conditions sont satisfaites — ce sont les conditions dont nous avons parlé plus haut. Dans ce cas, nous écrivons avant chaque virgule :

+ +
    +
  1. une condition pour le média ((max-width:480px)) — vous pourrez en savoir plus à ce propos dans l'article sur les CSS, mais pour le moment disons simplement que cette condition pour le média décrit un état possible de l'écran. Dans notre cas, nous disons « si la largeur de fenêtre est de 480 pixels ou moins »,
    2. +
  2. une espace,
    3. +
  3. la largeur de la place occupée par l'image si la condition pour le média est vraie (440px).
    4. +
+ +
+

Note : pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (px, em) ou relative au viewport (vw), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). Le navigateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média.

+
+ +

Ainsi, une fois ces attributs en place, le navigateur va :

+ +
    +
  1. noter la largeur du périphérique,
    2. +
  2. vérifier quelle est la première condition vraie pour le média dans la liste des tailles,
    3. +
  3. noter la largeur d'emplacement demandée par le média,
    4. +
  4. charger l'image référencée dans la liste srcset qui est la plus proche de la taille choisie.
    5. +
+ +

Et c'est tout ! Donc à ce stade, si un navigateur prenant en charge une largeur de vue de 480 px charge la page, la condition pour le média (max-width: 480px) sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier elva-fairy-480w.jpg sera chargé, car sa largeur intrinsèque (480w) est celle qui est la plus proche de 440px. L'image 800 px a une taille de 128 Ko sur disque alors que la version 480 px n'occupe que 63 Ko — une économie de 65Ko. Imaginez maintenant qu'il s'agisse d'une page avec beaucoup d'images. L'utilisation de cette technique peut permettre aux personnes naviguant sur mobile d'économiser beaucoup de bande passante.

+ +
+

Note : lorsque vous testez cela avec un navigateur de bureau, si ce dernier échoue à charger l'image la plus étroite alors que vous avez réduit la largeur de la fenêtre au maximum, regardez la taille du viewport (dont vous pouvez avoir une approximation via l'instruction document.querySelector("html").clientWidth dans la console JavaScript). Selon les navigateurs, il existe différentes tailles minimales au-delà desquelles on ne pourra pas plus réduire la fenêtre (tailles minimales qui pourraient être plus larges qu'on ne le pense). Lorsque vous testez avec un navigateur mobile, vous pouvez utiliser les outils comme la page about:debugging de Firefox pour inspecter la page chargée sur le mobile à l'aide des outils de développement pour navigateur de bureau.

+

Pour observer les images chargées, vous pouvez utiliser l'onglet Moniteur réseau dans les outils de développement de Firefox.

+
+ +

Les navigateurs les plus anciens qui ne prennent pas en charge ces fonctionnalités les ignorent; poursuivent et chargent normalement l'image référencée dans l'attribut src.

+ +
+

Note : dans l'élément <head> du document, vous trouvez la ligne <meta name="viewport" content="width=device-width"> : ceci force les navigateurs mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains navigateurs mobiles mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception).

+
+ + +

Commutation de résolution : même taille, résolutions différentes

+ +

Si votre ordinateur prend en charge plusieurs résolutions d'affichage, mais que tout le monde voit l'image avec la même taille effective sur l'écran, vous pouvez permettre au navigateur de choisir une image de résolution appropriée en utilisant srcset avec x-descriptors et sans sizes — une syntaxe un peu plus facile en quelque sorte ! Vous pouvez trouver un exemple de ce à quoi cela ressemble dans srcset-resolutions.html (voir aussi le code source) :

+ +
<img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="Elva habillée en fée">
+
+ +

Une photo d'une petite fille habillée en fée avec un filtre appliqué à l'image pour obtenir l'effet d'une vieille photo.Dans cet exemple, le CSS suivant est appliqué à l'image de façon à ce qu'elle ait une largeur de 320 pixels à l'écran (également nommée pixels CSS) :

+ +
img {
+  width: 320px;
+}
+ +

Dans ce cas, sizes n'est pas nécessaire — le navigateur détermine simplement la résolution d'affichage de l'écran et montre l'image la plus appropriée référencée dans srcset. Donc si le dispositif accédant à la page a un affichage standard/basse résolution, avec un pixel de dispositif représentant chaque pixel CSS, l'image elva-fairy-320w.jpg sera chargée (le 1x est implicite, donc vous n'avez pas besoin de l'inclure.) Si le dispositif a une haute résolution de deux pixels de dispositif par pixel CSS ou plus, l'image elva‑fairy-640w.jpg sera chargée. L'image 640px a une taille de 93 Ko, alors que l'image 320 px n'a qu'une taille de 39 Ko.

+ +

Décision de nature artistique

+ +

Pour résumer, le problème des décisions de nature artistique réside dans le choix des modifications à apporter à l'image selon les diverses tailles d'affichage. Par exemple, si un instantané d'un grand plan paysager avec une personne au milieu, correctement affiché sur un site web avec le navigateur d'un ordinateur de bureau, est rétréci lorsque ce même site est visionné sur un navigateur de mobile, cet instantané risque d'avoir mauvaise mine, car la personne sera vraiment minuscule et difficile à voir. Il serait probablement préférable de montrer sur un mobile une image portrait plus petite d'un zoom sur la personne. L'élément <picture> nous permet d'implémenter ce type de solution.

+ +

Revenons à notre exemple initial du fichier not-responsive.html. Cette image nécessite d'opérer un choix de nature artistique :

+ +
<img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras">
+ +

Arrangeons cela avec <picture>} ! Comme pour <vidéo> et <audio>, l'élément <picture> est une enveloppe conteneur de plusieurs éléments <source>} ; ces éléments indiquent plusieurs sources différentes entre lesquelles le navigateur peut choisir ; ils sont suivis du très important élément <img>}. Le code dans responsive.html ressemblera à :

+ +
<picture>
+  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
+  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
+  <img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras">
+</picture>
+
+ + + +

Ce code nous permet d'afficher une image adaptée à la fois sur un écran large et sur un écran étroit, comme montré ci‑dessous :

+ +

Notre exemple vu sur un écran assez large : la première image est OK et on voit le détail au centre.Notre exemple vu sur un écran étroit où l'élément picture permet de passer la première image à une image en portrait, plus utile sur un écran étroit.

+ +
+

Note : vous ne devez utiliser l'attribut media qu'avec un scénario de décision de nature artistique ; quand vous utilisez media, ne mettez pas de conditions pour le média avec l'attribut sizes.

+
+ +

Pourquoi ne peut-on pas réaliser cela avec le CSS ou du JavaScript ?

+ +

Lorsque le navigateur commence à charger une page, il commence à télécharger (précharger) toutes les images avant que l'analyseur principal n'ait commencé à charger et à interpréter le CSS et le JavaScript de la page. Cette technique est utile, car elle permet de réduire de 20 % en moyenne le temps de chargement des pages. Cependant, elle n'est d'aucune aide pour les images adaptatives, d'où la nécessité de mettre en œuvre des solutions comme srcset. Vous ne pourriez pas, par exemple, charger l'élément <img>}, puis détecter la largeur de fenêtre avec JavaScript et changer dynamiquement l'image source pour une image plus petite si désiré. À ce moment-là, l'image originale aurait déjà été chargée, et vous chargeriez en plus la petite image, ce qui est encore pire en termes d'image adaptative.

+ + + +

Utilisez largement les formats d'image modernes

+ +

Il existe plusieurs nouveaux formats d'image très intéressants (comme WebP et JPEG-2000) qui sont à la fois de taille réduite et de haute qualité. Toutefois, la prise en charge par les navigateurs est ponctuelle.

+ +

<picture> nous permet de servir encore les plus vieux navigateurs. Vous pouvez indiquer le type MIME dans les attributs type de façon à ce que le navigateur puisse immédiatement rejeter les types de fichiers non pris en charge :

+ +
<picture>
+  <source type="image/svg+xml" srcset="pyramid.svg">
+  <source type="image/webp" srcset="pyramid.webp">
+  <img src="pyramid.png" alt="Pyramide régulière constituée de quatre triangles équilatéraux">
+</picture>
+
+ + + +

Testez vos compétences !

+ +

Et vous voici à la fin de cet article, mais saurez-vous vous rappeler les informations les plus importantes ? Vous pourrez trouver une évaluation détaillée pour tester ces compétences à la fin du module : voir Créer une page de présentation de Mozilla.

+ +

Résumé

+ +

Voilà notre paquet‑cadeau pour des images adaptatives — nous espérons que ces nouvelles techniques vous plaisent. Résumons, nous vous avons exposé deux méthodes distinctes pour résoudre ce problème :

+ + + +

Cet article est aussi la conclusion de l'ensemble du module Multimedia et intégration ! Avant de passer à autre chose, il vous reste à essayer notre évaluation multimédia et à voir comment vous vous en sortez. Amusez-vous bien.

+ +

Voir aussi

+ + + +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Dans ce module

+ + \ No newline at end of file diff --git a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html deleted file mode 100644 index 75e2a70ecd..0000000000 --- a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ /dev/null @@ -1,315 +0,0 @@ ---- -title: Contenu audio et vidéo -slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -tags: - - Article - - Audio - - Débutant - - Guide - - HTML - - Légendes - - Video - - pistes (audio ou texte) - - sous‑titres -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
- -

Maintenant que nous sommes à l'aise pour ajouter de simples images dans une page web, nous passons à l'étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans cet article, nous nous contenterons de le faire avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}}. Nous terminerons en apprenant comment ajouter des légendes et des sous-titres à vos vidéos.

- - - - - - - - - - - - -
Prérequis :Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et Images en HTML.
Objectifs :Apprendre à intégrer vidéos et audios dans une page web et y ajouter des légendes et des sous-titres.
- -

Audio et vidéo sur le web

- -

Les développeurs ont toujours voulu utiliser la vidéo et l'audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d'une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images). Au départ, les technologies embarquées telles que HTML n'avaient pas la capacité d'intégrer de la vidéo ou de l'audio, donc, les solutions « propriétaires » (ou basées sur des greffons) comme Flash (puis, plus tard, Silverlight) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d'accessibilité.

- -

Une solution embarquée devrait résoudre la plupart de ces problèmes. Heureusement, après quelques années, la spécification {{glossary("HTML5")}} apportait ces améliorations avec les éléments  {{htmlelement("video")}} et {{htmlelement("audio")}} et des {{Glossary("API","APIs")}}{{Glossary("JavaScript")}} flambants neufs pour les contrôler. Nous ne verrons pas JavaScript ici — nous poserons juste les fondamentaux qui peuvent être obtenus avec HTML.

- -

Nous ne vous apprendrons pas à produire des fichiers audio ou vidéo  — cela demande des compétences totalement différentes. Nous vous conseillons ce lien Github fichiers d'échantillons audio et vidéo et exemples de code pour votre expérience personnelle, au cas où vous ne pourriez pas y accéder par vous-même.

- -
-

Note : Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme YouTube, Dailymotion, et Vimeo. Pour l'audio, voyez Soundcloud  par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant.

-
- -

L' élément <video>

- -

L'élément {{htmlelement("video")}} vous permet d'intégrer de la vidéo très facilement. En voici un exemple :

- -
<video src="rabbit320.webm" controls>
-  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.webm">lien sur la vidéo</a>.</p>
-</video>
- -

Les fonctionnalités de ce code sont :

- -
-
{{htmlattrxref("src","video")}}
-
De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut src (source) contient le chemin vers la vidéo que vous voulez intégrer.  Cela fonctionne de la même manière.
-
{{htmlattrxref("controls","video")}}
-
Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'épilepsie.) Vous devez vous servir de l'attribut  controls pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'API JavaScript adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume.
-
Le paragraphe dans la balise <video>
-
Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément <video> , cela offre un texte alternatif qui peut être ce que vous voulez ; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise.
-
- -

La vidéo intégrée donnerait quelque chose comme ça :

- -

A simple video player showing a video of a small white rabbit

- -

Faites un essai avec l'exemple ici. (voyez aussi le code source.)

- -

Gestion de différents formats

- -

Il y a un problème avec l'exemple au-dessus que vous avez dû rencontrer si vous avez accédé au lien « exemple ici » avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d'audio.

- -

Voyons-en rapidement la terminologie. Les formats comme le MP3, MP4 et le WebM sont appelés des formats conteneurs. Ils contiennent plusieurs parties qui, ensemble, donnent l'intégralité de la chanson ou de la vidéo — comme une piste audio, une piste vidéo et les métadonnées qui décrivent le média qui est lu.

- -

Les pistes audio et vidéo sont aussi de différents formats, par exemple :

- - - -

Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur.

- -
-

Note : Ce n'est pas si simple, comme vous pouvez le voir dans le tableau de compatibilité des codecs audio-vidéo. En outre, de nombreux navigateurs de plateforme mobile peuvent lire un format non pris en charge en le transférant au lecteur multimédia du système sous-jacent. Mais pour l'instant nous nous contenterons de ce qui précède.

-
- -

Les formats ci-dessus ont été créés pour compresser la vidéo et l'audio dans des fichiers gérables (les fichiers vidéo et audio bruts sont très volumineux). Les navigateurs contiennent différents {{Glossary("Codec","Codecs")}}, comme Vorbis ou H.264, utilisés pour convertir le son et la vidéo compressés en binaire et inversement. Comme indiqué ci-dessus, les navigateurs ne supportent malheureusement pas tous les mêmes codecs, vous devrez donc fournir plusieurs fichiers pour chaque production de média. S'il vous manque le bon codec pour décoder le média, il ne pourra pas être lu.

- -

 

- -
-

Note : Vous êtes peut-être surpris de l'existence d'une telle situation. Les formats MP3 (pour l'audio) et MP4/H.264 (pour la vidéo) sont tous deux largement pris en charge et de bonne qualité. Cependant, ils sont également grevés de brevets — les brevets américains couvrent le MP3 jusqu'en 2017 au moins et le H.264 jusqu'en 2027 au plus tôt, ce qui signifie que les navigateurs ne détenant pas de licence doivent payer d'énormes sommes d'argent pour pouvoir utiliser ces formats. En outre, beaucoup de personnes évitent, par principe, les logiciels propriétaires et leur préférent des formats ouverts. C'est pourquoi nous devons fournir plusieurs formats pour une prise en charge par différents navigateurs.

- -

 

-
- -

Alors, comment faire ? Jetez un coup d'œil à l'exemple qui suit, mis à jour, (essayez-le directement ici aussi) :

- -
<video controls>
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien sur la vidéo</a>.</p>
-</video>
- -

Ici, nous avons retiré l'attribut src de la balise <video> et inclus des éléments {{htmlelement("source")}} séparés qui pointent vers des sources appropriées. Dans ce cas, le navigateur parcourra les éléments <source> et jouera le premier dont il peut prendre en charge le codec. Inclure des sources WebM et MP4 devraient suffire pour lire votre vidéo sur la plupart des plateformes et navigateurs de nos jours.

- -

Chaque élément <source> possède également un attribut de type. C'est facultatif, mais il est conseillé de les inclure — ils contiennent le type {{glossary("MIME type","MIME")}} des fichiers vidéo, et les navigateurs peuvent le lire et sauter immédiatement les vidéos qu'ils ne comprennent pas. Si le type n'est pas indiqué, le navigateur va charger et essayer de lire chaque fichier jusqu'à ce qu'il en trouve un qu'il prenne en charge, ce qui demande du temps et des ressources.

- -

 

- -
-

Note : L'article sur les formats média pris en charge contient quelques types {{glossary("MIME type","MIME")}} courants.

-
- -

Autres fonctionnalités de <video>

- -

Il y a possibilité d'inclure d'autres fonctionnalités dans une vidéo HTML5. Regardez notre troisième exemple :

- -
<video controls width="400" height="400"
-       autoplay loop muted
-       poster="poster.png">
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien à la vidéo</a>.</p>
-</video>
-
- -

Cela produit une sortie du type suivant :

- -

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!

- -

Voici les nouvelles fonctionnalités :

- -
-
{{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}}
-
Il est possible de contrôler la taille de la vidéo soit avec ces attributs, soit avec le {{Glossary("CSS")}}. Dans les deux cas, les vidéos conservent le rapport largeur‑hauteur natif — désigné sous le vocable rapport de proportions. Si ce dernier ne correspond pas aux tailles indiquées, la vidéo occupera tout l'espace horizontal et l'espace non rempli sera de la couleur d'arrière plan unie par défaut.
-
{{htmlattrxref("autoplay","video")}}
-
Cet attribut permet de lancer immédiatement la lecture de l'audio ou de la vidéo pendant que le reste de la page se charge. Nous vous déconseillons d'utiliser la lecture automatique de vidéos (ou audio) sur vos sites, car les utilisateurs peuvent trouver cela vraiment ennuyeux.
-
{{htmlattrxref("loop","video")}}
-
Cet attribut permet de relancer en boucle la lecture de la vidéo (ou de l'audio). Cette façon de procéder pouvant être mal perçue, ne l'utilisez que si c'est vraiment nécessaire.
-
{{htmlattrxref("muted","video")}}
-
Cet attribut coupe le son de la vidéo par défaut.
-
{{htmlattrxref("poster","video")}}
-
Cet attribut prend comme valeur l'URL d'une image affichée avant la lecture de la vidéo. Il s'utilise en tant que logo de démarrage ou de publicité.
-
{{htmlattrxref("preload","video")}}
-
-

Cet attribut s'utilise pour mettre en tampon les gros fichiers. Il peut prendre 3 valeurs :

- -
    -
  • "none" : ne pas mettre le fichier dans un tampon
    • -
  • "auto" : mettre le fichier média dans un tampon
    • -
  • "metadata" : ne mettre que les métadonnées dans le tampon
    • -
-
-
- -

Vous trouverez cet exemple prêt pour l'interprétation sur Github ( voir aussi le  code source). Notez que nous n'avons pas inséré l'attribut autoplay dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster !

- -

L'élément  <audio>

- -

L'élément {{htmlelement("audio")}} fonctionne exactement de la même manière que l'élément {{htmlelement("video")}}, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci :

- -
<audio controls>
-  <source src="viper.mp3" type="audio/mp3">
-  <source src="viper.ogg" type="audio/ogg">
-  <p>Votre navigateur ne prend pas en charge l'audio HTML5. Voici, à la place, un <a href="viper.mp3">lien sur l'audio</a>.</p>
-</audio>
- -

Vous verrez quelque chose de ce genre dans un navigateur :

- -

A simple audio player with a play button, timer, volume control, and progress bar

- -
-

Note : Vous pouver lancer la démo de l'audio en direct sur Github (voir aussi le code source de l'interpréteur.)

-
- -

Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Voici les autres différences avec les vidéos HTML5 :

- - - -

Excepté ce qui précéde, <audio> accepte les mêmes fonctionnalités que <video> — revoyez les sections ci-desssus pour plus d'informations à ce propos.

- -

Afficher du texte dans une vidéo

- -

Nous allons maintenant parler d'un concept un peu plus avancé vraiment utile à connaître. Beaucoup de gens ne peuvent pas ou ne veulent pas entendre le contenu audio/vidéo qu'ils trouvent sur le Web, du moins à certains moments. Par exemple :

- - - -

Ne serait-il pas agréable de pouvoir fournir à ces personnes la transcription des paroles prononcés dans l'audio ou la vidéo ? Eh bien, avec des vidéos HTML5 vous le pouvez, à l'aide du format WebVTT et de l'élément {{htmlelement("track")}}.

- -
-

Note : « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante.

-
- -

WebVTT est un format d'écriture de fichiers texte ; il contient nombre de chaînes de texte avec des métadonnées comme l'instant dans la vidéo où vous souhaitez l'affichage du texte, et même une information succinte sur le style et la position de celui‑ci. Ces chaînes textuelles sont appelées des marqueurs, les plus courants étant :

- -
-
les sous‑titres (subtitles)
-
Traductions d'éléments d'une langue étrangère pour les personnes ne comprenant pas les paroles de l'audio.
-
les légendes (captions) 
-
Transcriptions synchrones de dialogues ou de descriptions de sons significatifs, pour permettre aux personnes ne pouvant entendre le son de comprendre ce qui se passe.
-
les descriptions programmées (descriptions) 
-
Textes convertis en audio, pour aider les personnes avec des défauts de vision.
-
- -

Un fichier WebVTT typique ressemblera à :

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

Pour qu'il soit affiché avec la diffusion du média HTML, il faut :

- -
    -
  1. Enregistrer le fichier avec l'extension .vtt dans un endroit sensé.
    2. -
  2. Lier le fichier .vtt avec l'élément {{htmlelement("track")}}. <track> doit être placé entre les balises <audio> ou <video>, mais après tous les éléments <source>. Utilisez l'attribut {{htmlattrxref("kind","track")}} pour préciser si les marqueurs sont  subtitles, captions ou descriptions. Plus loin, utilisez l'attribut {{htmlattrxref("srclang","track")}} pour indiquer au navigateur la langue dans laquelle sont écrit les sous‑titres.
    3. -
- -

Voici un exemple :

- -
<video controls>
-    <source src="example.mp4" type="video/mp4">
-    <source src="example.webm" type="video/webm">
-    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
-</video>
- -

Il en résultera une vidéo dont les sous-titres seront affichés un peu comme ceci :

- -

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

- -

Pour plus de détails, lisez Ajouter des légendes et des sous‑titres aux vidéos HTML5. Vous trouverez un exemple, écrit par Ian Devlin, accompagnant cet article sur Github (voyez le code source aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton « CC » et selectionner une option — English, Deutsch ou Español. 

- -
-

Note : Les pistes texte peuvent aussi vous aider avec {{glossary("SEO")}}, car les moteurs de recherche sont très performants sur le texte. Les pistes textes permettent aussi aux moteurs de recherche de faire un lien direct à un point particulier de la vidéo.

-
- -

Apprentissage interactif : intégrer vos propres vidéos et audios

- -

Pour cet exercice, nous aimerions (idéalement) que vous partiez « dans le monde » pour enregistrer vos propres vidéos et pistes audio — la plupart des téléphones actuels vous permettent facilement de le faire, et, à condition que vous puissiez le transférer sur l'ordinateur, vous pouvez l'utiliser. Vous allez devoir convertir dans les formats adaptés, WebM et MP4 pour la vidéo,  MP3 et Ogg pour l'audio. Il y a de nombreux progammes vous permettant de faire ça sans difficulté comme Miro Video Converter et Audacity. Nous aimerions que vous essayiez !

- -

Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos  échantillons audio et vidéo pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence.

- -

Il vous faudra :

- -
    -
  1. Préserver vos fichiers audio et vidéo dans un nouveau dossier sur votre ordinateur.
    2. -
  2. Créer un nouveau fichier HTML dans le même répertoire nommé :  index.html.
    3. -
  3. Ajouter des éléments  <audio> et  <video> dans la page; faire en sorte qu'ils affichent les contrôles par défaut du navigateur.
    4. -
  4. Leur attribuer (aux deux) des éléments <source> que le navigateur puisse trouver le meilleur format audio et le charger. N'oubliez pas d'inclure les attributs  type.
    5. -
  5. Donner à l'élément <video> une image qui sera affichée avant que la vidéo ne démarre. Amusez-vous à créer votre propre visuel de l'affiche.
    6. -
- -

En bonus, vous pouvez chercher des textes à intégrer et ajouter des légendes à vos vidéos.

- -

Résumé

- -

Emballez, c'est pesé ! Nous espérons que vous avez pris plaisir avec ces pages vidéo et audio. Au chapitre suivant, nous découvrirons des manières différentes d'intégrer du contenu sur le Web en se servant de technologies comme {{htmlelement("iframe")}} et {{htmlelement("object")}}.

- -

Consultez aussi :

- - - -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

- -

 

- -

Contenu du module :

- - - -

 

- -
-
- - diff --git a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md new file mode 100644 index 0000000000..75e2a70ecd --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md @@ -0,0 +1,315 @@ +--- +title: Contenu audio et vidéo +slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +tags: + - Article + - Audio + - Débutant + - Guide + - HTML + - Légendes + - Video + - pistes (audio ou texte) + - sous‑titres +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Maintenant que nous sommes à l'aise pour ajouter de simples images dans une page web, nous passons à l'étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans cet article, nous nous contenterons de le faire avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}}. Nous terminerons en apprenant comment ajouter des légendes et des sous-titres à vos vidéos.

+ + + + + + + + + + + + +
Prérequis :Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et Images en HTML.
Objectifs :Apprendre à intégrer vidéos et audios dans une page web et y ajouter des légendes et des sous-titres.
+ +

Audio et vidéo sur le web

+ +

Les développeurs ont toujours voulu utiliser la vidéo et l'audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d'une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images). Au départ, les technologies embarquées telles que HTML n'avaient pas la capacité d'intégrer de la vidéo ou de l'audio, donc, les solutions « propriétaires » (ou basées sur des greffons) comme Flash (puis, plus tard, Silverlight) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d'accessibilité.

+ +

Une solution embarquée devrait résoudre la plupart de ces problèmes. Heureusement, après quelques années, la spécification {{glossary("HTML5")}} apportait ces améliorations avec les éléments  {{htmlelement("video")}} et {{htmlelement("audio")}} et des {{Glossary("API","APIs")}}{{Glossary("JavaScript")}} flambants neufs pour les contrôler. Nous ne verrons pas JavaScript ici — nous poserons juste les fondamentaux qui peuvent être obtenus avec HTML.

+ +

Nous ne vous apprendrons pas à produire des fichiers audio ou vidéo  — cela demande des compétences totalement différentes. Nous vous conseillons ce lien Github fichiers d'échantillons audio et vidéo et exemples de code pour votre expérience personnelle, au cas où vous ne pourriez pas y accéder par vous-même.

+ +
+

Note : Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme YouTube, Dailymotion, et Vimeo. Pour l'audio, voyez Soundcloud  par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant.

+
+ +

L' élément <video>

+ +

L'élément {{htmlelement("video")}} vous permet d'intégrer de la vidéo très facilement. En voici un exemple :

+ +
<video src="rabbit320.webm" controls>
+  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.webm">lien sur la vidéo</a>.</p>
+</video>
+ +

Les fonctionnalités de ce code sont :

+ +
+
{{htmlattrxref("src","video")}}
+
De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut src (source) contient le chemin vers la vidéo que vous voulez intégrer.  Cela fonctionne de la même manière.
+
{{htmlattrxref("controls","video")}}
+
Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'épilepsie.) Vous devez vous servir de l'attribut  controls pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'API JavaScript adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume.
+
Le paragraphe dans la balise <video>
+
Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément <video> , cela offre un texte alternatif qui peut être ce que vous voulez ; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise.
+
+ +

La vidéo intégrée donnerait quelque chose comme ça :

+ +

A simple video player showing a video of a small white rabbit

+ +

Faites un essai avec l'exemple ici. (voyez aussi le code source.)

+ +

Gestion de différents formats

+ +

Il y a un problème avec l'exemple au-dessus que vous avez dû rencontrer si vous avez accédé au lien « exemple ici » avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d'audio.

+ +

Voyons-en rapidement la terminologie. Les formats comme le MP3, MP4 et le WebM sont appelés des formats conteneurs. Ils contiennent plusieurs parties qui, ensemble, donnent l'intégralité de la chanson ou de la vidéo — comme une piste audio, une piste vidéo et les métadonnées qui décrivent le média qui est lu.

+ +

Les pistes audio et vidéo sont aussi de différents formats, par exemple :

+ + + +

Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur.

+ +
+

Note : Ce n'est pas si simple, comme vous pouvez le voir dans le tableau de compatibilité des codecs audio-vidéo. En outre, de nombreux navigateurs de plateforme mobile peuvent lire un format non pris en charge en le transférant au lecteur multimédia du système sous-jacent. Mais pour l'instant nous nous contenterons de ce qui précède.

+
+ +

Les formats ci-dessus ont été créés pour compresser la vidéo et l'audio dans des fichiers gérables (les fichiers vidéo et audio bruts sont très volumineux). Les navigateurs contiennent différents {{Glossary("Codec","Codecs")}}, comme Vorbis ou H.264, utilisés pour convertir le son et la vidéo compressés en binaire et inversement. Comme indiqué ci-dessus, les navigateurs ne supportent malheureusement pas tous les mêmes codecs, vous devrez donc fournir plusieurs fichiers pour chaque production de média. S'il vous manque le bon codec pour décoder le média, il ne pourra pas être lu.

+ +

 

+ +
+

Note : Vous êtes peut-être surpris de l'existence d'une telle situation. Les formats MP3 (pour l'audio) et MP4/H.264 (pour la vidéo) sont tous deux largement pris en charge et de bonne qualité. Cependant, ils sont également grevés de brevets — les brevets américains couvrent le MP3 jusqu'en 2017 au moins et le H.264 jusqu'en 2027 au plus tôt, ce qui signifie que les navigateurs ne détenant pas de licence doivent payer d'énormes sommes d'argent pour pouvoir utiliser ces formats. En outre, beaucoup de personnes évitent, par principe, les logiciels propriétaires et leur préférent des formats ouverts. C'est pourquoi nous devons fournir plusieurs formats pour une prise en charge par différents navigateurs.

+ +

 

+
+ +

Alors, comment faire ? Jetez un coup d'œil à l'exemple qui suit, mis à jour, (essayez-le directement ici aussi) :

+ +
<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien sur la vidéo</a>.</p>
+</video>
+ +

Ici, nous avons retiré l'attribut src de la balise <video> et inclus des éléments {{htmlelement("source")}} séparés qui pointent vers des sources appropriées. Dans ce cas, le navigateur parcourra les éléments <source> et jouera le premier dont il peut prendre en charge le codec. Inclure des sources WebM et MP4 devraient suffire pour lire votre vidéo sur la plupart des plateformes et navigateurs de nos jours.

+ +

Chaque élément <source> possède également un attribut de type. C'est facultatif, mais il est conseillé de les inclure — ils contiennent le type {{glossary("MIME type","MIME")}} des fichiers vidéo, et les navigateurs peuvent le lire et sauter immédiatement les vidéos qu'ils ne comprennent pas. Si le type n'est pas indiqué, le navigateur va charger et essayer de lire chaque fichier jusqu'à ce qu'il en trouve un qu'il prenne en charge, ce qui demande du temps et des ressources.

+ +

 

+ +
+

Note : L'article sur les formats média pris en charge contient quelques types {{glossary("MIME type","MIME")}} courants.

+
+ +

Autres fonctionnalités de <video>

+ +

Il y a possibilité d'inclure d'autres fonctionnalités dans une vidéo HTML5. Regardez notre troisième exemple :

+ +
<video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png">
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien à la vidéo</a>.</p>
+</video>
+
+ +

Cela produit une sortie du type suivant :

+ +

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!

+ +

Voici les nouvelles fonctionnalités :

+ +
+
{{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}}
+
Il est possible de contrôler la taille de la vidéo soit avec ces attributs, soit avec le {{Glossary("CSS")}}. Dans les deux cas, les vidéos conservent le rapport largeur‑hauteur natif — désigné sous le vocable rapport de proportions. Si ce dernier ne correspond pas aux tailles indiquées, la vidéo occupera tout l'espace horizontal et l'espace non rempli sera de la couleur d'arrière plan unie par défaut.
+
{{htmlattrxref("autoplay","video")}}
+
Cet attribut permet de lancer immédiatement la lecture de l'audio ou de la vidéo pendant que le reste de la page se charge. Nous vous déconseillons d'utiliser la lecture automatique de vidéos (ou audio) sur vos sites, car les utilisateurs peuvent trouver cela vraiment ennuyeux.
+
{{htmlattrxref("loop","video")}}
+
Cet attribut permet de relancer en boucle la lecture de la vidéo (ou de l'audio). Cette façon de procéder pouvant être mal perçue, ne l'utilisez que si c'est vraiment nécessaire.
+
{{htmlattrxref("muted","video")}}
+
Cet attribut coupe le son de la vidéo par défaut.
+
{{htmlattrxref("poster","video")}}
+
Cet attribut prend comme valeur l'URL d'une image affichée avant la lecture de la vidéo. Il s'utilise en tant que logo de démarrage ou de publicité.
+
{{htmlattrxref("preload","video")}}
+
+

Cet attribut s'utilise pour mettre en tampon les gros fichiers. Il peut prendre 3 valeurs :

+ +
    +
  • "none" : ne pas mettre le fichier dans un tampon
    • +
  • "auto" : mettre le fichier média dans un tampon
    • +
  • "metadata" : ne mettre que les métadonnées dans le tampon
    • +
+
+
+ +

Vous trouverez cet exemple prêt pour l'interprétation sur Github ( voir aussi le  code source). Notez que nous n'avons pas inséré l'attribut autoplay dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster !

+ +

L'élément  <audio>

+ +

L'élément {{htmlelement("audio")}} fonctionne exactement de la même manière que l'élément {{htmlelement("video")}}, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci :

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Votre navigateur ne prend pas en charge l'audio HTML5. Voici, à la place, un <a href="viper.mp3">lien sur l'audio</a>.</p>
+</audio>
+ +

Vous verrez quelque chose de ce genre dans un navigateur :

+ +

A simple audio player with a play button, timer, volume control, and progress bar

+ +
+

Note : Vous pouver lancer la démo de l'audio en direct sur Github (voir aussi le code source de l'interpréteur.)

+
+ +

Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Voici les autres différences avec les vidéos HTML5 :

+ + + +

Excepté ce qui précéde, <audio> accepte les mêmes fonctionnalités que <video> — revoyez les sections ci-desssus pour plus d'informations à ce propos.

+ +

Afficher du texte dans une vidéo

+ +

Nous allons maintenant parler d'un concept un peu plus avancé vraiment utile à connaître. Beaucoup de gens ne peuvent pas ou ne veulent pas entendre le contenu audio/vidéo qu'ils trouvent sur le Web, du moins à certains moments. Par exemple :

+ + + +

Ne serait-il pas agréable de pouvoir fournir à ces personnes la transcription des paroles prononcés dans l'audio ou la vidéo ? Eh bien, avec des vidéos HTML5 vous le pouvez, à l'aide du format WebVTT et de l'élément {{htmlelement("track")}}.

+ +
+

Note : « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante.

+
+ +

WebVTT est un format d'écriture de fichiers texte ; il contient nombre de chaînes de texte avec des métadonnées comme l'instant dans la vidéo où vous souhaitez l'affichage du texte, et même une information succinte sur le style et la position de celui‑ci. Ces chaînes textuelles sont appelées des marqueurs, les plus courants étant :

+ +
+
les sous‑titres (subtitles)
+
Traductions d'éléments d'une langue étrangère pour les personnes ne comprenant pas les paroles de l'audio.
+
les légendes (captions) 
+
Transcriptions synchrones de dialogues ou de descriptions de sons significatifs, pour permettre aux personnes ne pouvant entendre le son de comprendre ce qui se passe.
+
les descriptions programmées (descriptions) 
+
Textes convertis en audio, pour aider les personnes avec des défauts de vision.
+
+ +

Un fichier WebVTT typique ressemblera à :

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

Pour qu'il soit affiché avec la diffusion du média HTML, il faut :

+ +
    +
  1. Enregistrer le fichier avec l'extension .vtt dans un endroit sensé.
    2. +
  2. Lier le fichier .vtt avec l'élément {{htmlelement("track")}}. <track> doit être placé entre les balises <audio> ou <video>, mais après tous les éléments <source>. Utilisez l'attribut {{htmlattrxref("kind","track")}} pour préciser si les marqueurs sont  subtitles, captions ou descriptions. Plus loin, utilisez l'attribut {{htmlattrxref("srclang","track")}} pour indiquer au navigateur la langue dans laquelle sont écrit les sous‑titres.
    3. +
+ +

Voici un exemple :

+ +
<video controls>
+    <source src="example.mp4" type="video/mp4">
+    <source src="example.webm" type="video/webm">
+    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+</video>
+ +

Il en résultera une vidéo dont les sous-titres seront affichés un peu comme ceci :

+ +

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

+ +

Pour plus de détails, lisez Ajouter des légendes et des sous‑titres aux vidéos HTML5. Vous trouverez un exemple, écrit par Ian Devlin, accompagnant cet article sur Github (voyez le code source aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton « CC » et selectionner une option — English, Deutsch ou Español. 

+ +
+

Note : Les pistes texte peuvent aussi vous aider avec {{glossary("SEO")}}, car les moteurs de recherche sont très performants sur le texte. Les pistes textes permettent aussi aux moteurs de recherche de faire un lien direct à un point particulier de la vidéo.

+
+ +

Apprentissage interactif : intégrer vos propres vidéos et audios

+ +

Pour cet exercice, nous aimerions (idéalement) que vous partiez « dans le monde » pour enregistrer vos propres vidéos et pistes audio — la plupart des téléphones actuels vous permettent facilement de le faire, et, à condition que vous puissiez le transférer sur l'ordinateur, vous pouvez l'utiliser. Vous allez devoir convertir dans les formats adaptés, WebM et MP4 pour la vidéo,  MP3 et Ogg pour l'audio. Il y a de nombreux progammes vous permettant de faire ça sans difficulté comme Miro Video Converter et Audacity. Nous aimerions que vous essayiez !

+ +

Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos  échantillons audio et vidéo pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence.

+ +

Il vous faudra :

+ +
    +
  1. Préserver vos fichiers audio et vidéo dans un nouveau dossier sur votre ordinateur.
    2. +
  2. Créer un nouveau fichier HTML dans le même répertoire nommé :  index.html.
    3. +
  3. Ajouter des éléments  <audio> et  <video> dans la page; faire en sorte qu'ils affichent les contrôles par défaut du navigateur.
    4. +
  4. Leur attribuer (aux deux) des éléments <source> que le navigateur puisse trouver le meilleur format audio et le charger. N'oubliez pas d'inclure les attributs  type.
    5. +
  5. Donner à l'élément <video> une image qui sera affichée avant que la vidéo ne démarre. Amusez-vous à créer votre propre visuel de l'affiche.
    6. +
+ +

En bonus, vous pouvez chercher des textes à intégrer et ajouter des légendes à vos vidéos.

+ +

Résumé

+ +

Emballez, c'est pesé ! Nous espérons que vous avez pris plaisir avec ces pages vidéo et audio. Au chapitre suivant, nous découvrirons des manières différentes d'intégrer du contenu sur le Web en se servant de technologies comme {{htmlelement("iframe")}} et {{htmlelement("object")}}.

+ +

Consultez aussi :

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

+ +

 

+ +

Contenu du module :

+ + + +

 

+ +
+
+ + diff --git a/files/fr/learn/html/tables/advanced/index.html b/files/fr/learn/html/tables/advanced/index.html deleted file mode 100644 index 7a6f46a012..0000000000 --- a/files/fr/learn/html/tables/advanced/index.html +++ /dev/null @@ -1,476 +0,0 @@ ---- -title: 'Tableaux HTML : dispositions avancées et accessibilité' -slug: Learn/HTML/Tables/Advanced -tags: - - Accessibilité - - Apprentissage - - Article - - Avancés - - Codage - - Débutant - - En-têtes - - HTML - - Imbrication - - Portée - - Tableaux - - caption - - resume - - tbody - - tfoot - - thead -translation_of: Learn/HTML/Tables/Advanced -original_slug: Apprendre/HTML/Tableaux/Advanced ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
- -

Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.

- - - - - - - - - - - - -
Prérequis :Les bases de HTML (voir Introduction au HTML).
Objectif :En apprendre plus sur les fonctionnalités HTML plus avancées et l'accessibilité aux tableaux.
- -

Ajouter un titre aux tableaux avec <caption>

- -

Vous pouvez intituler un tableau en mettant son titre dans un élément {{htmlelement("caption")}} et en englobant le tout dans un élément {{htmlelement("table")}}. Mettez le titre juste après la balise ouvrante <table>.

- -
<table>
-  <caption>Dinosaures dans le Jurassique</caption>
-
-  ...
-</table>
- -

Comme vous pouvez le voir sur le bref exemple ci-dessus, le titre consiste en une description synthétique du contenu du tableau. C'est utile pour tous les lecteurs qui souhaitent savoir rapidement si le tableau peut leur être utile, sans avoir à parcourir tout le contenu, en particulier s'ils sont malvoyants. Plutôt que de faire lire au lecteur d'écran de nombreuses cellules pour savoir sur quoi porte le tableau, il ou elle peut se fier au titre, puis décider de lire ou non le tableau dans le détail.

- -

Le titre est placé directement sous la balise <table>.

- -
-

Note : L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <table> pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément <caption>,  car summary est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTML5, et ne peut être lu par l'utilisateur courant  (il n'apparaît pas dans la page).

-
- -

Apprentissage actif : Ajouter un titre

- -

Essayons en revisitant un exemple rencontré dans l'article précédent.

- -
    -
  1. Ouvrez le planning du professeur de langue de la fin de Tableaux HTML : notions de base ou faites une copie locale du fichier timetable-fixed.html.
    2. -
  2. Ajoutez un titre approprié pour le tableau.
    3. -
  3. Enregistrez votre code et ouvrez-le dans un navigateur pour voir à quoi il ressemble.
    4. -
- -
-

Note : Vous pouvez trouver notre version sur GitHub — voir timetable-caption.html (voir aussi directement).

-
- -

Ajout d'une structure avec <thead>, <tfoot>, et <tbody>

- -

Comme vos tableaux deviennent un peu plus structurellement complexes, il est utile d'en améliorer la définition. Une façon claire d'y parvenir consiste à utiliser les éléments {{htmlelement("thead")}}, {{htmlelement("tfoot")}} et {{htmlelement("tbody")}}, qui vous permettent de marquer l'en-tête, le pied et le corps du tableau.

- -

Ces éléments ne rendent pas le tableau plus accessible aux utilisateurs de lecteurs d'écran, et n'entraînent aucune amélioration visuelle par eux-mêmes. Ils sont cependant très utiles pour la présentation et la mise en page — agissant comme des accroches pour l'ajout des CSS. Pour vous donner quelques exemples intéressants, dans le cas d'un grand tableau, vous pouvez répéter l'en-tête et le pied de page sur chaque page imprimée ; vous pouvez prévoir l'affichage du corps sur une seule page et accéder au contenu par défilement vers le haut ou vers le bas.

- -

Pour les utiliser :

- - - -
-

Note : <tbody> est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément <tbody> et regardez le code HTML dans les outils de développement de votre navigateur — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi  vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau.

-
- -

Apprentissage actif : Ajout d'une structure au tableau

- -

Mettons en œuvre ces nouveaux éléments.

- -
    -
  1. D'abord, faites une copie locale des fichiers spending-record.html et minimal-table.css dans un nouveau dossier.
    2. -
  2. Essayez de les ouvrir dans un navigateur — vous verrez que cela paraît correct, mais gagnerait à être amélioré. La ligne "SUM" qui contient les totaux des montants dépensés semble être au mauvais endroit et il manque certains détails du code.
    3. -
  3. Mettez la ligne d'en-têtes en évidence avec l'élément <thead> , la ligne des totaux ("SUM") dans un <tfoot>, et le reste du contenu dans un <tbody>.
    4. -
  4. Enregistrez et actualisez, et vous verrez que l'ajout de l'élément <tfoot> a renvoyé la ligne "SUM" en bas du tableau.
    5. -
  5. Ensuite, ajoutez un attribut {{htmlattrxref("colspan","td")}}  pour générer une cellule Total ("SUM") couvrant les quatre premières colonnes, ainsi le nombre réel apparaît au pied de la colonne « Coût ».
    6. -
  6. Ajoutons un style supplémentaire au tableau, pour vous donner une idée de l'utilité de ces éléments pour l'application des CSS. Dans le <head> du document HTML, vous pouvez voir un élément {{htmlelement("style")}} vide, ajoutez les lignes suivantes de code CSS : - 
    tbody {
-  font-size: 90%;
-  font-style: italic;
-}
-
-tfoot {
-  font-weight: bold;
-}
-
    -
    7. -
  7. Enregistrez, actualisez et regardez le résultat. Si <tbody> et <tfoot> n'étaient pas en place, vous devriez écrire plus de commandes plus complexes (sélection/règles) pour l'application des mêmes styles.
    8. -
- -
-

Note : Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (Introduction aux CSS est un bon moyen de commencer ; il y a aussi un article spécifique sur l'esthétique des tables).

-
- -

Le code de votre tableau fini devrait ressembler à quelque chose comme :

- - - -

{{ EmbedLiveSample("Apprentissage_actif_Ajout_d'une_structure_au_tableau", '100%', 300, "", "", "hide-codepen-jsfiddle") }}

- -
-

Note : Vous pouvez aussi le trouver sur Github  spending-record-finished.html (voir aussi le résultat directement).

-
- -

Tableaux imbriqués

- -

Il est possible d'inclure un tableau dans un autre, à condition d'en spécifier la structure complète, y compris l'élément <table>. Ce n'est généralement pas vraiment conseillé, car cette opération rend le balisage plus confus et moins accessible pour les utilisateurs de lecteurs d'écran, alors que dans de nombreux cas, il suffit d'insérer des cellules/lignes/colonnes supplémentaires dans un tableau existant. Mais il est parfois nécessaire de le faire, quand par exemple vous souhaitez importer facilement des données provenant d'autres sources.

- -

Le balisage suivant montre un tableau simple imbriqué :

- -
<table id="table1">
-  <tr>
-    <th>title1</th>
-    <th>title2</th>
-    <th>title3</th>
-  </tr>
-  <tr>
-    <td id="nested">
-      <table id="table2">
-        <tr>
-          <td>cell1</td>
-          <td>cell2</td>
-          <td>cell3</td>
-        </tr>
-      </table>
-    </td>
-    <td>cell2</td>
-    <td>cell3</td>
-  </tr>
-  <tr>
-    <td>cell4</td>
-    <td>cell5</td>
-    <td>cell6</td>
-  </tr>
-</table>
- -

Voici la sortie qui en résulte :

- - - - - - - - - - - - - - - - - - - -
title1title2title3
- - - - - - - - -
cell1cell2cell3
- 		cell2cell3
cell4cell5cell6
- -

Tableaux pour utilisateurs malvoyants

- -

Rappelons brièvement comment nous utilisons les tableaux de données. Un tableau peut être un outil pratique pour accéder rapidement à une donnée et rechercher différentes valeurs. Par exemple, un bref coup d'oeil sur le tableau suivant suffit pour savoir combien de bagues ont été vendues à Gand en août dernier. Pour comprendre ces informations, nous faisons visuellement l'association entre les données du tableau et les en-têtes de colonnes et/ou de lignes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Articles vendus Août 2016
  VêtementsAccessoires
  PantalonsJupesRobesBraceletsBagues
BelgiqueAnvers5622437223
Gand4618506115
Bruxelles5127386928
Pays-basAmsterdam8934698538
Utrecht8012433619
- -

Mais que faire si vous ne pouvez pas créer ces associations visuelles ? Comment pouvez-vous lire un tableau comme celui ci-dessus ? Les personnes malvoyantes utilisent souvent un lecteur d'écran qui leur lit les informations des pages web. Ce n'est pas un problème quand vous lisez du texte brut, mais l'interprêtation d'un tableau peut constituer un défi pour une personne aveugle. Néanmoins, avec le balisage approprié, nous pouvons remplacer des associations visuelles par des associations programmées.

- -
-

Note : Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les  données de l'OMS en 2017.

-
- -

Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible.

- -

Utilisation des en-têtes de colonnes et de lignes

- -

Les lecteurs d'écran identifieront tous les en-têtes et les utiliseront pour réaliser automatiquement les associations entre ces en-têtes et les cellules correspondantes.  La combinaison des en-têtes des colonnes et des lignes doit permettre d'identifier et d'interprêter les données de chaque cellule. Ainsi, les utilisateurs de lecteurs d'écran peuvent accéder aux données d'une façon similaire à celle des utilisateurs voyants.

- -

Nous avons déjà traité des en-têtes dans notre article précédent — voir Ajouter des en-têtes avec <th> .

- -

L'attribut scope

- -

Aux balises <th>, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément <th> pour indiquer précisément à un lecteur d'écran si la cellule contient un en-tête de colonne ou de ligne — par exemple, sommes‑nous dans un en-tête de ligne, ou de colonne ? En revenant à notre exemple d'enregistrement de dépenses vu plus tôt, il est possible de définir sans ambiguité un en-tête de colonne comme étant un en-tête de colonne ainsi :

- -
<thead>
-  <tr>
-    <th scope="col">Achats</th>
-    <th scope="col">Ou ?</th>
-    <th scope="col">Date</th>
-    <th scope="col">Avis</th>
-    <th scope="col">Coût (€)</th>
-  </tr>
-</thead>
- -

Et chaque ligne pourrait également avoir une définition de son en-tête comme ceci (à condition d'avoir ajouté des en-têtes de lignes comme des en-têtes de colonnes):

- -
<tr>
-  <th scope="row">Coupe de cheveux</th>
-  <td>Coiffeur</td>
-  <td>12/09</td>
-  <td>Bonne idée</td>
-  <td>30</td>
-</tr>
- -

Les lecteurs d'écran reconnaîtront un balisage structuré comme celui-ci et permettront à leurs utilisateurs de lire en une fois une colonne ou une ligne entière par exemple.

- -

scope a deux autres valeurs possibles — colgroup et rowgroup. Elles sont utilisées pour les en-têtes qui couvrent plusieurs colonnes ou lignes. Si vous revenez au tableau « Articles vendus... » au début de ce paragraphe du présent article, vous voyez que la cellule « Vêtements » se trouve au-dessus des cellules  « Pantalons », « Jupes » et « Robes ». Toutes ces cellules sont marquées comme en-têtes (<th>), mais « Vêtements » est un en-tête de niveau supérieur qui définit trois « sous-en-têtes ». « Vêtements » comportera donc un attribut  scope="colgroup", alors que les autres doivent recevront un attribut scope="col".

- -

Les attributs id et headers

- -

Une alternative à l'usage de l'attribut scope est l'utilisation des attributs {{htmlattrxref("id")}} et {{htmlattrxref("headers", "td")}} pour créer une association entre en-têtes et cellules. Ils sont utilisés de la manière suivante :

- -
    -
  1. Vous ajoutez un identifiant unique id à chaque élément <th>.
    2. -
  2. Vous ajoutez un attribut headers à chaque élément  <td> . Chaque attribut headers doit contenir une liste des id de tous les éléments <th> qu'il contient, séparés par des espaces.
    3. -
- -

Votre tableau HTML possède donc la position explicite de chaque cellule dans le tableau, définie par les en-têtes de chaque colonne et chaque ligne qui en font partie, un peu comme dans une feuille de calcul. Pour un bon fonctionnement, le tableau a réellement besoin d'en-têtes de colonnes et de lignes.

- -

En revenant à notre exemple de tableau des dépenses et des coûts, les deux extraits précédents pourraient être réécrits ainsi :

- -
<thead>
-  <tr>
-    <th id="purchase">Achats</th>
-    <th id="location">Où ?</th>
-    <th id="date">Date</th>
-    <th id="evaluation">Avis</th>
-    <th id="cost">Coût (€)</th>
-  </tr>
-</thead>
-<tbody>
-<tr>
-  <th id="haircut">Coupe de cheveux</th>
-  <td headers="location haircut">Coiffeur</td>
-  <td headers="date haircut">12/09</td>
-  <td headers="evaluation haircut">Bonne idée</td>
-  <td headers="cost haircut">30</td>
-</tr>
-
-  ...
-
-</tbody>
- -
-

Note : Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise beaucoup plus de balisage et ne laisse aucune marge d'erreur.  L'approche scope est généralement suffisante pour la plupart des tableaux.

-
- -

Apprentissage actif : jouer avec scope et headers

- -
    -
  1. Pour cet exercice final, nous aimerions que vous fassiez une copie locale de items‑sold.html et minimal-table.css, dans un nouveau répertoire.
    2. -
  2. Maintenant essayez d'ajouter un attribut scope approprié pour améliorer ce tableau.
    3. -
  3. Enfin, essayez avec une autre copie du fichier initial, de faire un tableau plus accessible en utilisant les attributs id et headers.
    4. -
- -
-

Note : Vous pouvez contrôler votre travail en le comparant à nos exemples finis  — voir items-sold-scope.html (voir aussi directement)
-          et items-sold-headers.html (voir aussi directement).

-
- -

Résumé

- -

Il reste encore quelques autres choses à apprendre sur les tableaux HTML, mais nous vous avons vraiment indiqué tout ce qu'il est nécessaire de savoir pour le moment. À ce stade, vous voulez peut-être en apprendre plus sur les styles de tableaux HTML — voyez alors Décor des tableaux.

- -
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
- -
-
-

Dans ce module

- - -
-
diff --git a/files/fr/learn/html/tables/advanced/index.md b/files/fr/learn/html/tables/advanced/index.md new file mode 100644 index 0000000000..7a6f46a012 --- /dev/null +++ b/files/fr/learn/html/tables/advanced/index.md @@ -0,0 +1,476 @@ +--- +title: 'Tableaux HTML : dispositions avancées et accessibilité' +slug: Learn/HTML/Tables/Advanced +tags: + - Accessibilité + - Apprentissage + - Article + - Avancés + - Codage + - Débutant + - En-têtes + - HTML + - Imbrication + - Portée + - Tableaux + - caption + - resume + - tbody + - tfoot + - thead +translation_of: Learn/HTML/Tables/Advanced +original_slug: Apprendre/HTML/Tableaux/Advanced +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+ +

Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.

+ + + + + + + + + + + + +
Prérequis :Les bases de HTML (voir Introduction au HTML).
Objectif :En apprendre plus sur les fonctionnalités HTML plus avancées et l'accessibilité aux tableaux.
+ +

Ajouter un titre aux tableaux avec <caption>

+ +

Vous pouvez intituler un tableau en mettant son titre dans un élément {{htmlelement("caption")}} et en englobant le tout dans un élément {{htmlelement("table")}}. Mettez le titre juste après la balise ouvrante <table>.

+ +
<table>
+  <caption>Dinosaures dans le Jurassique</caption>
+
+  ...
+</table>
+ +

Comme vous pouvez le voir sur le bref exemple ci-dessus, le titre consiste en une description synthétique du contenu du tableau. C'est utile pour tous les lecteurs qui souhaitent savoir rapidement si le tableau peut leur être utile, sans avoir à parcourir tout le contenu, en particulier s'ils sont malvoyants. Plutôt que de faire lire au lecteur d'écran de nombreuses cellules pour savoir sur quoi porte le tableau, il ou elle peut se fier au titre, puis décider de lire ou non le tableau dans le détail.

+ +

Le titre est placé directement sous la balise <table>.

+ +
+

Note : L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <table> pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément <caption>,  car summary est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTML5, et ne peut être lu par l'utilisateur courant  (il n'apparaît pas dans la page).

+
+ +

Apprentissage actif : Ajouter un titre

+ +

Essayons en revisitant un exemple rencontré dans l'article précédent.

+ +
    +
  1. Ouvrez le planning du professeur de langue de la fin de Tableaux HTML : notions de base ou faites une copie locale du fichier timetable-fixed.html.
    2. +
  2. Ajoutez un titre approprié pour le tableau.
    3. +
  3. Enregistrez votre code et ouvrez-le dans un navigateur pour voir à quoi il ressemble.
    4. +
+ +
+

Note : Vous pouvez trouver notre version sur GitHub — voir timetable-caption.html (voir aussi directement).

+
+ +

Ajout d'une structure avec <thead>, <tfoot>, et <tbody>

+ +

Comme vos tableaux deviennent un peu plus structurellement complexes, il est utile d'en améliorer la définition. Une façon claire d'y parvenir consiste à utiliser les éléments {{htmlelement("thead")}}, {{htmlelement("tfoot")}} et {{htmlelement("tbody")}}, qui vous permettent de marquer l'en-tête, le pied et le corps du tableau.

+ +

Ces éléments ne rendent pas le tableau plus accessible aux utilisateurs de lecteurs d'écran, et n'entraînent aucune amélioration visuelle par eux-mêmes. Ils sont cependant très utiles pour la présentation et la mise en page — agissant comme des accroches pour l'ajout des CSS. Pour vous donner quelques exemples intéressants, dans le cas d'un grand tableau, vous pouvez répéter l'en-tête et le pied de page sur chaque page imprimée ; vous pouvez prévoir l'affichage du corps sur une seule page et accéder au contenu par défilement vers le haut ou vers le bas.

+ +

Pour les utiliser :

+ + + +
+

Note : <tbody> est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément <tbody> et regardez le code HTML dans les outils de développement de votre navigateur — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi  vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau.

+
+ +

Apprentissage actif : Ajout d'une structure au tableau

+ +

Mettons en œuvre ces nouveaux éléments.

+ +
    +
  1. D'abord, faites une copie locale des fichiers spending-record.html et minimal-table.css dans un nouveau dossier.
    2. +
  2. Essayez de les ouvrir dans un navigateur — vous verrez que cela paraît correct, mais gagnerait à être amélioré. La ligne "SUM" qui contient les totaux des montants dépensés semble être au mauvais endroit et il manque certains détails du code.
    3. +
  3. Mettez la ligne d'en-têtes en évidence avec l'élément <thead> , la ligne des totaux ("SUM") dans un <tfoot>, et le reste du contenu dans un <tbody>.
    4. +
  4. Enregistrez et actualisez, et vous verrez que l'ajout de l'élément <tfoot> a renvoyé la ligne "SUM" en bas du tableau.
    5. +
  5. Ensuite, ajoutez un attribut {{htmlattrxref("colspan","td")}}  pour générer une cellule Total ("SUM") couvrant les quatre premières colonnes, ainsi le nombre réel apparaît au pied de la colonne « Coût ».
    6. +
  6. Ajoutons un style supplémentaire au tableau, pour vous donner une idée de l'utilité de ces éléments pour l'application des CSS. Dans le <head> du document HTML, vous pouvez voir un élément {{htmlelement("style")}} vide, ajoutez les lignes suivantes de code CSS : + 
    tbody {
+  font-size: 90%;
+  font-style: italic;
+}
+
+tfoot {
+  font-weight: bold;
+}
+
    +
    7. +
  7. Enregistrez, actualisez et regardez le résultat. Si <tbody> et <tfoot> n'étaient pas en place, vous devriez écrire plus de commandes plus complexes (sélection/règles) pour l'application des mêmes styles.
    8. +
+ +
+

Note : Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (Introduction aux CSS est un bon moyen de commencer ; il y a aussi un article spécifique sur l'esthétique des tables).

+
+ +

Le code de votre tableau fini devrait ressembler à quelque chose comme :

+ + + +

{{ EmbedLiveSample("Apprentissage_actif_Ajout_d'une_structure_au_tableau", '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note : Vous pouvez aussi le trouver sur Github  spending-record-finished.html (voir aussi le résultat directement).

+
+ +

Tableaux imbriqués

+ +

Il est possible d'inclure un tableau dans un autre, à condition d'en spécifier la structure complète, y compris l'élément <table>. Ce n'est généralement pas vraiment conseillé, car cette opération rend le balisage plus confus et moins accessible pour les utilisateurs de lecteurs d'écran, alors que dans de nombreux cas, il suffit d'insérer des cellules/lignes/colonnes supplémentaires dans un tableau existant. Mais il est parfois nécessaire de le faire, quand par exemple vous souhaitez importer facilement des données provenant d'autres sources.

+ +

Le balisage suivant montre un tableau simple imbriqué :

+ +
<table id="table1">
+  <tr>
+    <th>title1</th>
+    <th>title2</th>
+    <th>title3</th>
+  </tr>
+  <tr>
+    <td id="nested">
+      <table id="table2">
+        <tr>
+          <td>cell1</td>
+          <td>cell2</td>
+          <td>cell3</td>
+        </tr>
+      </table>
+    </td>
+    <td>cell2</td>
+    <td>cell3</td>
+  </tr>
+  <tr>
+    <td>cell4</td>
+    <td>cell5</td>
+    <td>cell6</td>
+  </tr>
+</table>
+ +

Voici la sortie qui en résulte :

+ + + + + + + + + + + + + + + + + + + +
title1title2title3
+ + + + + + + + +
cell1cell2cell3
+ 		cell2cell3
cell4cell5cell6
+ +

Tableaux pour utilisateurs malvoyants

+ +

Rappelons brièvement comment nous utilisons les tableaux de données. Un tableau peut être un outil pratique pour accéder rapidement à une donnée et rechercher différentes valeurs. Par exemple, un bref coup d'oeil sur le tableau suivant suffit pour savoir combien de bagues ont été vendues à Gand en août dernier. Pour comprendre ces informations, nous faisons visuellement l'association entre les données du tableau et les en-têtes de colonnes et/ou de lignes.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Articles vendus Août 2016
  VêtementsAccessoires
  PantalonsJupesRobesBraceletsBagues
BelgiqueAnvers5622437223
Gand4618506115
Bruxelles5127386928
Pays-basAmsterdam8934698538
Utrecht8012433619
+ +

Mais que faire si vous ne pouvez pas créer ces associations visuelles ? Comment pouvez-vous lire un tableau comme celui ci-dessus ? Les personnes malvoyantes utilisent souvent un lecteur d'écran qui leur lit les informations des pages web. Ce n'est pas un problème quand vous lisez du texte brut, mais l'interprêtation d'un tableau peut constituer un défi pour une personne aveugle. Néanmoins, avec le balisage approprié, nous pouvons remplacer des associations visuelles par des associations programmées.

+ +
+

Note : Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les  données de l'OMS en 2017.

+
+ +

Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible.

+ +

Utilisation des en-têtes de colonnes et de lignes

+ +

Les lecteurs d'écran identifieront tous les en-têtes et les utiliseront pour réaliser automatiquement les associations entre ces en-têtes et les cellules correspondantes.  La combinaison des en-têtes des colonnes et des lignes doit permettre d'identifier et d'interprêter les données de chaque cellule. Ainsi, les utilisateurs de lecteurs d'écran peuvent accéder aux données d'une façon similaire à celle des utilisateurs voyants.

+ +

Nous avons déjà traité des en-têtes dans notre article précédent — voir Ajouter des en-têtes avec <th> .

+ +

L'attribut scope

+ +

Aux balises <th>, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément <th> pour indiquer précisément à un lecteur d'écran si la cellule contient un en-tête de colonne ou de ligne — par exemple, sommes‑nous dans un en-tête de ligne, ou de colonne ? En revenant à notre exemple d'enregistrement de dépenses vu plus tôt, il est possible de définir sans ambiguité un en-tête de colonne comme étant un en-tête de colonne ainsi :

+ +
<thead>
+  <tr>
+    <th scope="col">Achats</th>
+    <th scope="col">Ou ?</th>
+    <th scope="col">Date</th>
+    <th scope="col">Avis</th>
+    <th scope="col">Coût (€)</th>
+  </tr>
+</thead>
+ +

Et chaque ligne pourrait également avoir une définition de son en-tête comme ceci (à condition d'avoir ajouté des en-têtes de lignes comme des en-têtes de colonnes):

+ +
<tr>
+  <th scope="row">Coupe de cheveux</th>
+  <td>Coiffeur</td>
+  <td>12/09</td>
+  <td>Bonne idée</td>
+  <td>30</td>
+</tr>
+ +

Les lecteurs d'écran reconnaîtront un balisage structuré comme celui-ci et permettront à leurs utilisateurs de lire en une fois une colonne ou une ligne entière par exemple.

+ +

scope a deux autres valeurs possibles — colgroup et rowgroup. Elles sont utilisées pour les en-têtes qui couvrent plusieurs colonnes ou lignes. Si vous revenez au tableau « Articles vendus... » au début de ce paragraphe du présent article, vous voyez que la cellule « Vêtements » se trouve au-dessus des cellules  « Pantalons », « Jupes » et « Robes ». Toutes ces cellules sont marquées comme en-têtes (<th>), mais « Vêtements » est un en-tête de niveau supérieur qui définit trois « sous-en-têtes ». « Vêtements » comportera donc un attribut  scope="colgroup", alors que les autres doivent recevront un attribut scope="col".

+ +

Les attributs id et headers

+ +

Une alternative à l'usage de l'attribut scope est l'utilisation des attributs {{htmlattrxref("id")}} et {{htmlattrxref("headers", "td")}} pour créer une association entre en-têtes et cellules. Ils sont utilisés de la manière suivante :

+ +
    +
  1. Vous ajoutez un identifiant unique id à chaque élément <th>.
    2. +
  2. Vous ajoutez un attribut headers à chaque élément  <td> . Chaque attribut headers doit contenir une liste des id de tous les éléments <th> qu'il contient, séparés par des espaces.
    3. +
+ +

Votre tableau HTML possède donc la position explicite de chaque cellule dans le tableau, définie par les en-têtes de chaque colonne et chaque ligne qui en font partie, un peu comme dans une feuille de calcul. Pour un bon fonctionnement, le tableau a réellement besoin d'en-têtes de colonnes et de lignes.

+ +

En revenant à notre exemple de tableau des dépenses et des coûts, les deux extraits précédents pourraient être réécrits ainsi :

+ +
<thead>
+  <tr>
+    <th id="purchase">Achats</th>
+    <th id="location">Où ?</th>
+    <th id="date">Date</th>
+    <th id="evaluation">Avis</th>
+    <th id="cost">Coût (€)</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <th id="haircut">Coupe de cheveux</th>
+  <td headers="location haircut">Coiffeur</td>
+  <td headers="date haircut">12/09</td>
+  <td headers="evaluation haircut">Bonne idée</td>
+  <td headers="cost haircut">30</td>
+</tr>
+
+  ...
+
+</tbody>
+ +
+

Note : Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise beaucoup plus de balisage et ne laisse aucune marge d'erreur.  L'approche scope est généralement suffisante pour la plupart des tableaux.

+
+ +

Apprentissage actif : jouer avec scope et headers

+ +
    +
  1. Pour cet exercice final, nous aimerions que vous fassiez une copie locale de items‑sold.html et minimal-table.css, dans un nouveau répertoire.
    2. +
  2. Maintenant essayez d'ajouter un attribut scope approprié pour améliorer ce tableau.
    3. +
  3. Enfin, essayez avec une autre copie du fichier initial, de faire un tableau plus accessible en utilisant les attributs id et headers.
    4. +
+ +
+

Note : Vous pouvez contrôler votre travail en le comparant à nos exemples finis  — voir items-sold-scope.html (voir aussi directement)
+          et items-sold-headers.html (voir aussi directement).

+
+ +

Résumé

+ +

Il reste encore quelques autres choses à apprendre sur les tableaux HTML, mais nous vous avons vraiment indiqué tout ce qu'il est nécessaire de savoir pour le moment. À ce stade, vous voulez peut-être en apprendre plus sur les styles de tableaux HTML — voyez alors Décor des tableaux.

+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+ +
+
+

Dans ce module

+ + +
+
diff --git a/files/fr/learn/html/tables/basics/index.html b/files/fr/learn/html/tables/basics/index.html deleted file mode 100644 index fe9ef9ef91..0000000000 --- a/files/fr/learn/html/tables/basics/index.html +++ /dev/null @@ -1,557 +0,0 @@ ---- -title: 'Tableaux HTML : notions de base' -slug: Learn/HTML/Tables/Basics -tags: - - Apprentissage - - Article - - Bases - - Codage - - Débutant - - En-têtes - - HTML - - Tableaux - - cellule - - col - - colgroup - - colspan - - rangées - - rowspan -translation_of: Learn/HTML/Tables/Basics -original_slug: Apprendre/HTML/Tableaux/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
- -

Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, les cellules, les en-têtes, les cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.

- - - - - - - - - - - - -
Prérequis :Les bases de HTML (voir Introduction au HTML).
Objectif :Se familiariser avec les tableaux HTML.
- -

Qu'est-ce qu'un tableau ?

- -

Un tableau est un ensemble structuré de données (table de données) présentées en lignes et colonnes. Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d'ouverture de la piscine du quartier.

- -

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

- -

A swimming timetable showing a sample data table

- -

Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800 :

- -

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

- -

Il n'est donc pas étonnant que les créateurs du HTML fournissent un moyen de structurer et de présenter des tableaux de données sur le Web .

- -

Comment fonctionne un tableau ?

- -

L'avantage du tableau tient dans sa rigueur. L'information est facilement interprétée par  des associations visuelles entre les en‑têtes de lignes et colonnes. Cherchez dans la table ci-dessous par exemple et trouvez une planète géante gazeuse du système jovien avec 62 lunes. Vous pouvez trouver la réponse en associant les en-têtes de lignes et colonnes pertinents.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Données sur les planètes du système solaire (repris de Nasa's Planetary Fact Sheet - Metric).
NomMasse (1024kg)Diamètre (km)Densité (kg/m3)Gravité (m/s2)Durée du jour (hours)Distance du Soleil (106km)Température moyenne (°C)Nombre de lunesNotes
Planètes telluriquesMercure0.3304,87954273.74222.657.91670La plus proche du Soleil
Venus4.8712,10452438.92802.0108.24640
Terre5.9712,75655149.824.0149.6151Notre monde
Mars0.6426,79239333.724.7227.9-652La planète rouge
Planètes joviennesGéantes gazeusesJupiter1898142,984132623.19.9778.6-11067La plus grosse planète
Saturne568120,5366879.010.71433.5-14062
Géantes glacéesUranus86.851,11812718.717.22872.5-19527
Neptune10249,528163811.016.14495.1-20014
Planètes nainesPluton0.01462,37020950.7153.35906.4-2255Déclassée en tant que planète en 2006 mais décision controverséee.
- -

Lorsque cela est fait correctement, même les personnes malvoyantes peuvent interpréter des données tabulaires dans un tableau HTML — un tableau HTML réussi doit permettre la perception des données à des utilisateurs déficients visuels ou malvoyants.

- -

Style de tableau

- -

Vous pouvez également regarder sur l'exemple réel sur GitHub ! Vous remarquerez sur celui-ci que le tableau est légèrement plus lisible  — car le tableau figurant ci-dessus présente un style minimal, alors que sa version sur GitHub est liée à un  CSS plus signifiant.

- -

Ne vous faites pas d'illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d'informations de style avec CSS, ainsi qu'une structure solide avec HTML. Dans ce module nous nous concentrons sur la partie HTML ; pour en savoir plus sur la partie CSS, vous devrez lire notre article Style et tableaux quand vous aurez fini ici.

- -

Nous n'approfondirons pas le CSS dans ce module, mais nous avons écrit une feuille de style minimale CSS à utiliser ici, feuille de style qui rendra les tableaux plus lisibles qu'avec un format par défaut sans style. Vous trouverez cette feuille de style ici, et également un exemple HTML d'application de cette feuille de style là — ensemble ils vous donneront un bon point de départ pour expérimenter sur les tableaux HTML.

- -

Quand NE PAS utiliser de tableaux en HTML ?

- -

Les tableaux HTML ne doivent être utilisés que pour des données tabulaires — c'est pour cela qu'ils sont conçus. Malheureusement, beaucoup de gens ont utilisé les tableaux HTML pour organiser des pages Web, par exemple : une ligne pour contenir l'en-tête, une ligne pour les colonnes de contenu, une ligne pour le pied de page, etc. Vous pouvez trouver plus de détails et un exemple avec Mises en page dans notre Module d'apprentissage à l'Accessibilité. Cette dispostion a été couramment utilisée car la prise en charge des CSS parmi les navigateurs avait pour coutume d'être effroyable ; ces mises en page sont beaucoup moins fréquentes de nos jours, mais vous pouvez toujours les voir dans certains recoins du Web.

- -

Bref, utiliser les tableaux pour la mise en page au lieu des techniques des CSS est une mauvaise idée. En voici les principales raisons :

- -
    -
  1. Les tableaux de mise en page diminuent l'accessibilité aux malvoyants : les lecteurs d'écran, utilisés par les non-voyants, interprêtent les balises d'une page HTML et lisent à haute voix le contenu à l'utilisateur. Comme les tables ne sont pas le bon outil pour la mise en page et que le balisage est plus complexe qu'avec les techniques de mise en page des CSS, la sortie des lecteurs d'écran sera source de confusion pour leurs utilisateurs.
    2. -
  2. Les tables produisent de la bouillie : Comme mentionné ci-dessus, les mises en page sur la base de tableaux comportent généralement des structures de balisage plus complexes que des techniques de mise en page appropriées. Le code résultant sera plus difficile à écrire, à maintenir et à déboguer.
    3. -
  3. Les tableaux ne s'adaptent pas automatiquement : Si vous utilisez les propriétés de mise en page ({{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} ou {{htmlelement("div")}}), leur largeur est par défaut 100% de celle du parent. Par contre, les tableaux sont dimensionnés en fonction de leur contenu par défaut, de sorte que des mesures supplémentaires sont nécessaires pour que le style du tableau fonctionne effectivement sur les différents types d'écran.
    4. -
- -

Apprentissage actif : créer votre premier tableau

- -

Nous avons assez parlé théorie, alors, plongeons dans un exemple pratique et construisons un tableau simple.

- -
    -
  1. Avant tout, faites une copie locale de blank-template.html et minimal-table.css dans un nouveau répertoire de votre ordinateur.
    2. -
  2. Le contenu de chaque tableau est encadré par ces deux balises : <table></table>. Ajoutez‑les dans le corps de votre HTML.
    3. -
  3. Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément  <td> (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau : - 
    <td>Bonjour, je suis votre première cellule.</td>
    -
    4. -
  4. Si nous voulons une rangée de quatre cellules, nous devons copier la première trois fois. Mettez à jour le contenu du tableau pour avoir quelque chose comme : - 
    <td>Bonjour, je suis votre première cellule </td>
-<td>je suis votre deuxième cellule</td>
-<td>je suis votre troisième cellule</td>
-<td>je suis votre quatrième cellule</td>
    -
    5. -
- -

Comme vous le verrez, les cellules ne sont pas placées les unes en dessous des autres, mais elles sont automatiquement affichées dans une même ligne. chaque élément <td> crée une cellule simple et ensemble elles forment la première ligne. Toutes les cellules que nous ajoutons allongent la ligne.

- -

Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise <tr> (« tr » comme « table rangée »). Étudions cela maintenant.

- -
    -
  1. Placez les quatre cellules que vous avez créées entre deux balises <tr> ainsi : - - 
    <tr>
-  <td>Bonjour, je suis votre première cellule </td>
-  <td>je suis votre deuxième cellule </td>
-  <td>je suis votre troisième cellule </td>
-  <td>je suis votre quatrième cellule </td>
-</tr>
    -
    2. -
  2. Maintenant, vous avez fait une ligne, faites en encore une ou deux — chaque ligne doit être encadrée de <tr>, et comprend chaque cellule encadrée par <td>.
    3. -
- -

Il devrait en résulter un tableau qui ressemble à :

- - - - - - - - - - - - - - - - -
Bonjour, je suis votre première cellule.je suis votre deuxième cellule.je suis votre troisième celluleje suis votre quatrième cellule
Deuxième ligne, première cellule.Cellule 2.Cellule 3.Cellule 4.
- -
-

Note : Vous pouvez également trouver cela sur GitHub simple-table.html (voir en direct aussi).

-
- -

Ajouter des en-têtes avec <th>

- -

Intéressons-nous maintenant aux en-têtes du tableau — cellules spéciales qui débutent une ligne ou une colonne et définissent le type de données que contiennent la rangée ou la colonne (à titre d'exemple, voir les cellules "Personne" et "Âge" dans le premier exemple illustré dans cet article). Pour comprendre pourquoi ils sont utiles, regardez l'exemple du tableau suivant. Tout d'abord, le code source :

- -
<table>
-  <tr>
-    <td>&nbsp;</td>
-    <td>Knocky</td>
-    <td>Flor</td>
-    <td>Ella</td>
-    <td>Juan</td>
-  </tr>
-  <tr>
-    <td>Race</td>
-    <td>Jack Russell</td>
-    <td>Poodle</td>
-    <td>Streetdog</td>
-    <td>Cocker Spaniel</td>
-  </tr>
-  <tr>
-    <td>Age</td>
-    <td>16</td>
-    <td>9</td>
-    <td>10</td>
-    <td>5</td>
-  </tr>
-  <tr>
-    <td>Propriétaire</td>
-    <td>Belle-mère</td>
-    <td>Moi</td>
-    <td>Moi</td>
-    <td>Belle-soeur</td>
-  </tr>
-  <tr>
-    <td>Habitudes alimentaires</td>
-    <td>Mange tous les restes</td>
-    <td>Grignotte la nourriture</td>
-    <td>Mange copieusement</td>
-    <td>Mange jusqu'à ce qu'il éclate</td>
-  </tr>
-</table>
- -

Maintenant, le rendu du tableau réel :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KnockyFlorEllaJuan
RaceJack RussellPoodleStreetdogCocker Spaniel
Age169105
PropriétaireBelle-mèreMoiMoiBelle-soeur
Habitudes alimentairesMange tous les restesGrignotte la nourritureMange copieusementMange jusqu'à ce qu'il éclate
- -

Le problème ici c'est que, bien que vous puissiez comprendre le tableau, il n'est pas aussi facile de croiser les données que cela pourrait être. Si les en-têtes de colonnes et de lignes se démarquaient d'une manière ou d'une autre, ce serait mieux.

- -

Apprentissage actif : en-tête de tableau

- -

Améliorons ce tableau.

- -
    -
  1. En premier lieu, faites une copie des fichiers dogs-table.html et minimal-table.css dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple « Dogs » ci-dessus.
    2. -
  2. Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <th> (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise <td>, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les <td> des cellules entourant le tableau par des <th>.
    3. -
  3. Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes.
    4. -
- -
-

Note : Vous pouvez trouver notre exemple achevé dogs-table-fixed.html sur GitHub (voir en direct aussi).

-
- -

Pourquoi les en-têtes sont-ils utiles ?

- -

Nous avons déjà partiellement répondu à cette question — il vous est plus facile de trouver les données que vous cherchez quand les en-têtes sont marqués clairement, et la conception globale du tableau paraît meilleure.

- -
-

Note : Les en-têtes de tableau sont accompagnés d'un style par défaut — ils sont en gras et centrés même si vous n'ajoutez pas votre propre style pour les démarquer.

-
- -

Les en-têtes de tableau ont un autre avantage — avec l'attribut scope (que nous étudierons dans le prochain article), ils rendent les tableaux plus accessibles en associant chaque en-tête à toutes les données des cellules d'une ligne ou d'une colonne. Les lecteurs d'écran peuvent alors lire toute une ligne ou une colonne de données, ce qui peut être très utile.

- -

Étendre des cellules sur plusieurs lignes ou colonnes

- -

Parfois, nous voulons qu'une cellule couvre plusieurs lignes ou colonnes. Prenez l'exemple simple suivant, qui montre le nom d'animaux communs. Dans certains cas, nous voulons montrer les noms du mâle et de la femelle à côté du nom générique de l'animal. Parfois nous ne le faisons pas, et nous voulons alors que le nom générique de l'animal s'étende sur toute la largeur du tableau.

- -

Le code initial ressemble à cela :

- -
<table>
-  <tr>
-    <th>Animaux</th>
-  </tr>
-  <tr>
-    <th>Hippopotame</th>
-  </tr>
-  <tr>
-    <th>Cheval</th>
-    <td>Jument</td>
-  </tr>
-  <tr>
-    <td>Étalon</td>
-  </tr>
-  <tr>
-    <th>Crocodile</th>
-  </tr>
-  <tr>
-    <th>Poulet</th>
-    <td>Coq</td>
-  </tr>
-  <tr>
-    <td>Coq</td>
-  </tr>
-</table>
- -

Mais le résultat ne nous donne pas ce que nous voulions :

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Animaux
Hippopotame
ChevalJument
Étalon
Crocodile
PouletCoq
Coq
- -

Nous avons besoin d'un moyen pour étendre "Animaux", "Hippopotame" et "Crocodile" sur deux colonnes, and "Cheval" et "Poulet" sur deux lignes. Heureusement, les en-têtes de tableau et les cellules ont les attributs colspan et rowspan, ce qui nous permet justement de faire cela. Les deux acceptent une valeur numérique correspondant au nombre de colonnes ou de lignes à couvrir. Par exemple, colspan="2" génère une cellule sur deux colonnes.

- -

Utilisons colspan et rowspan pour améliorer ce tableau.

- -
    -
  1. Tout d'abord, faites une copie locale de nos fichiers animals-table.html et minimal-table.css dans un nouveau répertoire sur votre ordinateur. Le HTML contient le même exemple d'animaux vu ci-dessus.
    2. -
  2. Ensuite, utilisez colspan pour mettre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes.
    3. -
  3. Enfin, utilisez rowspan pour mettre « Cheval » and « Poulet » sur deux lignes.
    4. -
  4. Enregistrez et ouvrez votre code sur un navigateur pour voir l'amélioration.
    5. -
- -
-

Note : Vous pouvez trouver l'exemple achevé dans animals-table-fixed.html sur GitHub (voir en direct aussi).

-
- -

Attribuer un style commun aux colonnes

- -

Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments <col> and <colgroup>. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne  — vous devez généralement spécifier les éléments de style dans chaque  <td> ou <th> de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.

- -

Premier exemple

-

Observez l'exemple simple suivant :

- -
<table>
-  <tr>
-    <th>Data 1</th>
-    <th style="background-color: yellow">Data 2</th>
-  </tr>
-  <tr>
-    <td>Calcutta</td>
-    <td style="background-color: yellow">Orange</td>
-  </tr>
-  <tr>
-    <td>Robots</td>
-    <td style="background-color: yellow">Jazz</td>
-  </tr>
-</table>
- -

Ce qui nous donne comme résultat :

-

{{EmbedLiveSample("Premier_exemple")}}

- -

Ce n'est pas idéal, car nous devons répéter les informations de style dans les trois cellules de la colonne  (nous aurions probablement défini une classe dans un projet réel et spécifié le style dans une feuille de style séparée). À la place, nous pouvons préciser l'information une seule fois dans un élément <col>. Les éléments <col> sont utilisés dans un conteneur <colgroup> juste en-dessous de la balise <table>. Nous pourrions créer le même effet que  celui vu plus haut en spécifiant notre tableau comme suit :

- -

Autres exemples

- -
 <table>
-   <colgroup>
-    <col>
-    <col style="background-color: yellow">
-  </colgroup>
-  <tr>
-    <th>Data 1</th>
-    <th>Data 2</th>
-  </tr>
-  <tr>
-    <td>Calcutta</td>
-    <td>Orange</td>
-  </tr>
-  <tr>
-    <td>Robots</td>
-    <td>Jazz</td>
-  </tr>
-</table>
- -

En effet, nous définissons deux « styles de colonnes », les informations de style pour chaque colonne. Nous n'appliquons pas de style pour la première colonne, mais nous devons inclure un élément <col>  vide — si nous ne le faisons pas, le style indiqué s'appliquera à la première colonne.

- -

Si nous voulions appliquer les informations de style aux deux colonnes, nous devrions juste inclure un élément <col> avec un attribut span, comme ceci :

- -
<colgroup>
-  <col style="background-color: yellow" span="2">
-</colgroup>
- -

Comme colspan et rowspan, span reçoit une valeur numérique qui précise le nombre de colonnes sur lesquelles le style s'applique.

- -

Apprentissage actif : colgroup et col

- -

Maintenant, il est temps de vous y mettre vous-même.

- -

Ci-dessous, vous pouvez voir le planning d'un professeur de langues. Le vendredi, elle a une nouvelle classe pour l'enseignement du néerlandais toute la journée, mais elle enseigne aussi l'allemand pendant de courtes périodes les mardis et jeudis. Elle veut souligner les colonnes des jours où elle enseigne.

- -

{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}

- -

Recréez le tableau en suivant les étapes ci-dessous.

- -
    -
  1. Tout d'abord, faites une copie locale du fichier timetable.html dans un nouveau répertoire sur votre ordinateur. Le HTML contient le tableau vu ci-dessus, à l'exception des informations de style des colonnes.
    2. -
  2. Ajoutez un élément <colgroup>  au début du tableau, juste en dessous de la balise <table>,dans lequel vous pouvez ajouter vos éléments <col> (voir les étapes restantes ci-dessous).
    3. -
  3. Les deux premières colonnes doivent rester sans style.
    4. -
  4. Ajoutez une couleur de fond à la troisième colonne. La valeur de votre attribut style est background-color:#97DB9A;
    5. -
  5. Définissez une largeur différente pour la quatrième colonne. La valeur de votre attribut style est width: 42px;
    6. -
  6. Ajoutez une couleur de fond pour la cinquième colonne. La valeur de votre attribut style est background-color: #97DB9A;
    7. -
  7. Ajoutez une couleur de fond différente et une bordure pour la sixième colonne, pour signifier que c'est une journée spéciale et qu'elle enseigne à une nouvelle classe. Les valeurs de votre attribut style sont background-color:#DCC48E; border:4px solid #C1437A;
    8. -
  8. Les deux derniers jours sont libres, alors pas de couleur de fond mais une largeur à spécifier ; la valeur de votre attribut style est width: 42px;
    9. -
- -

Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version timetable-fixed.html (à voir aussi directement) sur GitHub .

- -

Résumé

- -

Cela ne fait que compléter les bases des tableaux HTML. Dans l'article suivant, nous allons voir quelques fonctionnalités de tableaux un peu plus avancées et commencer à penser à quel point elles sont accessibles pour les malvoyants.

- -
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
- - - -
-

Dans ce module

- - -
diff --git a/files/fr/learn/html/tables/basics/index.md b/files/fr/learn/html/tables/basics/index.md new file mode 100644 index 0000000000..fe9ef9ef91 --- /dev/null +++ b/files/fr/learn/html/tables/basics/index.md @@ -0,0 +1,557 @@ +--- +title: 'Tableaux HTML : notions de base' +slug: Learn/HTML/Tables/Basics +tags: + - Apprentissage + - Article + - Bases + - Codage + - Débutant + - En-têtes + - HTML + - Tableaux + - cellule + - col + - colgroup + - colspan + - rangées + - rowspan +translation_of: Learn/HTML/Tables/Basics +original_slug: Apprendre/HTML/Tableaux/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, les cellules, les en-têtes, les cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.

+ + + + + + + + + + + + +
Prérequis :Les bases de HTML (voir Introduction au HTML).
Objectif :Se familiariser avec les tableaux HTML.
+ +

Qu'est-ce qu'un tableau ?

+ +

Un tableau est un ensemble structuré de données (table de données) présentées en lignes et colonnes. Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d'ouverture de la piscine du quartier.

+ +

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

+ +

A swimming timetable showing a sample data table

+ +

Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800 :

+ +

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

+ +

Il n'est donc pas étonnant que les créateurs du HTML fournissent un moyen de structurer et de présenter des tableaux de données sur le Web .

+ +

Comment fonctionne un tableau ?

+ +

L'avantage du tableau tient dans sa rigueur. L'information est facilement interprétée par  des associations visuelles entre les en‑têtes de lignes et colonnes. Cherchez dans la table ci-dessous par exemple et trouvez une planète géante gazeuse du système jovien avec 62 lunes. Vous pouvez trouver la réponse en associant les en-têtes de lignes et colonnes pertinents.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Données sur les planètes du système solaire (repris de Nasa's Planetary Fact Sheet - Metric).
NomMasse (1024kg)Diamètre (km)Densité (kg/m3)Gravité (m/s2)Durée du jour (hours)Distance du Soleil (106km)Température moyenne (°C)Nombre de lunesNotes
Planètes telluriquesMercure0.3304,87954273.74222.657.91670La plus proche du Soleil
Venus4.8712,10452438.92802.0108.24640
Terre5.9712,75655149.824.0149.6151Notre monde
Mars0.6426,79239333.724.7227.9-652La planète rouge
Planètes joviennesGéantes gazeusesJupiter1898142,984132623.19.9778.6-11067La plus grosse planète
Saturne568120,5366879.010.71433.5-14062
Géantes glacéesUranus86.851,11812718.717.22872.5-19527
Neptune10249,528163811.016.14495.1-20014
Planètes nainesPluton0.01462,37020950.7153.35906.4-2255Déclassée en tant que planète en 2006 mais décision controverséee.
+ +

Lorsque cela est fait correctement, même les personnes malvoyantes peuvent interpréter des données tabulaires dans un tableau HTML — un tableau HTML réussi doit permettre la perception des données à des utilisateurs déficients visuels ou malvoyants.

+ +

Style de tableau

+ +

Vous pouvez également regarder sur l'exemple réel sur GitHub ! Vous remarquerez sur celui-ci que le tableau est légèrement plus lisible  — car le tableau figurant ci-dessus présente un style minimal, alors que sa version sur GitHub est liée à un  CSS plus signifiant.

+ +

Ne vous faites pas d'illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d'informations de style avec CSS, ainsi qu'une structure solide avec HTML. Dans ce module nous nous concentrons sur la partie HTML ; pour en savoir plus sur la partie CSS, vous devrez lire notre article Style et tableaux quand vous aurez fini ici.

+ +

Nous n'approfondirons pas le CSS dans ce module, mais nous avons écrit une feuille de style minimale CSS à utiliser ici, feuille de style qui rendra les tableaux plus lisibles qu'avec un format par défaut sans style. Vous trouverez cette feuille de style ici, et également un exemple HTML d'application de cette feuille de style là — ensemble ils vous donneront un bon point de départ pour expérimenter sur les tableaux HTML.

+ +

Quand NE PAS utiliser de tableaux en HTML ?

+ +

Les tableaux HTML ne doivent être utilisés que pour des données tabulaires — c'est pour cela qu'ils sont conçus. Malheureusement, beaucoup de gens ont utilisé les tableaux HTML pour organiser des pages Web, par exemple : une ligne pour contenir l'en-tête, une ligne pour les colonnes de contenu, une ligne pour le pied de page, etc. Vous pouvez trouver plus de détails et un exemple avec Mises en page dans notre Module d'apprentissage à l'Accessibilité. Cette dispostion a été couramment utilisée car la prise en charge des CSS parmi les navigateurs avait pour coutume d'être effroyable ; ces mises en page sont beaucoup moins fréquentes de nos jours, mais vous pouvez toujours les voir dans certains recoins du Web.

+ +

Bref, utiliser les tableaux pour la mise en page au lieu des techniques des CSS est une mauvaise idée. En voici les principales raisons :

+ +
    +
  1. Les tableaux de mise en page diminuent l'accessibilité aux malvoyants : les lecteurs d'écran, utilisés par les non-voyants, interprêtent les balises d'une page HTML et lisent à haute voix le contenu à l'utilisateur. Comme les tables ne sont pas le bon outil pour la mise en page et que le balisage est plus complexe qu'avec les techniques de mise en page des CSS, la sortie des lecteurs d'écran sera source de confusion pour leurs utilisateurs.
    2. +
  2. Les tables produisent de la bouillie : Comme mentionné ci-dessus, les mises en page sur la base de tableaux comportent généralement des structures de balisage plus complexes que des techniques de mise en page appropriées. Le code résultant sera plus difficile à écrire, à maintenir et à déboguer.
    3. +
  3. Les tableaux ne s'adaptent pas automatiquement : Si vous utilisez les propriétés de mise en page ({{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} ou {{htmlelement("div")}}), leur largeur est par défaut 100% de celle du parent. Par contre, les tableaux sont dimensionnés en fonction de leur contenu par défaut, de sorte que des mesures supplémentaires sont nécessaires pour que le style du tableau fonctionne effectivement sur les différents types d'écran.
    4. +
+ +

Apprentissage actif : créer votre premier tableau

+ +

Nous avons assez parlé théorie, alors, plongeons dans un exemple pratique et construisons un tableau simple.

+ +
    +
  1. Avant tout, faites une copie locale de blank-template.html et minimal-table.css dans un nouveau répertoire de votre ordinateur.
    2. +
  2. Le contenu de chaque tableau est encadré par ces deux balises : <table></table>. Ajoutez‑les dans le corps de votre HTML.
    3. +
  3. Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément  <td> (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau : + 
    <td>Bonjour, je suis votre première cellule.</td>
    +
    4. +
  4. Si nous voulons une rangée de quatre cellules, nous devons copier la première trois fois. Mettez à jour le contenu du tableau pour avoir quelque chose comme : + 
    <td>Bonjour, je suis votre première cellule </td>
+<td>je suis votre deuxième cellule</td>
+<td>je suis votre troisième cellule</td>
+<td>je suis votre quatrième cellule</td>
    +
    5. +
+ +

Comme vous le verrez, les cellules ne sont pas placées les unes en dessous des autres, mais elles sont automatiquement affichées dans une même ligne. chaque élément <td> crée une cellule simple et ensemble elles forment la première ligne. Toutes les cellules que nous ajoutons allongent la ligne.

+ +

Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise <tr> (« tr » comme « table rangée »). Étudions cela maintenant.

+ +
    +
  1. Placez les quatre cellules que vous avez créées entre deux balises <tr> ainsi : + + 
    <tr>
+  <td>Bonjour, je suis votre première cellule </td>
+  <td>je suis votre deuxième cellule </td>
+  <td>je suis votre troisième cellule </td>
+  <td>je suis votre quatrième cellule </td>
+</tr>
    +
    2. +
  2. Maintenant, vous avez fait une ligne, faites en encore une ou deux — chaque ligne doit être encadrée de <tr>, et comprend chaque cellule encadrée par <td>.
    3. +
+ +

Il devrait en résulter un tableau qui ressemble à :

+ + + + + + + + + + + + + + + + +
Bonjour, je suis votre première cellule.je suis votre deuxième cellule.je suis votre troisième celluleje suis votre quatrième cellule
Deuxième ligne, première cellule.Cellule 2.Cellule 3.Cellule 4.
+ +
+

Note : Vous pouvez également trouver cela sur GitHub simple-table.html (voir en direct aussi).

+
+ +

Ajouter des en-têtes avec <th>

+ +

Intéressons-nous maintenant aux en-têtes du tableau — cellules spéciales qui débutent une ligne ou une colonne et définissent le type de données que contiennent la rangée ou la colonne (à titre d'exemple, voir les cellules "Personne" et "Âge" dans le premier exemple illustré dans cet article). Pour comprendre pourquoi ils sont utiles, regardez l'exemple du tableau suivant. Tout d'abord, le code source :

+ +
<table>
+  <tr>
+    <td>&nbsp;</td>
+    <td>Knocky</td>
+    <td>Flor</td>
+    <td>Ella</td>
+    <td>Juan</td>
+  </tr>
+  <tr>
+    <td>Race</td>
+    <td>Jack Russell</td>
+    <td>Poodle</td>
+    <td>Streetdog</td>
+    <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+    <td>Age</td>
+    <td>16</td>
+    <td>9</td>
+    <td>10</td>
+    <td>5</td>
+  </tr>
+  <tr>
+    <td>Propriétaire</td>
+    <td>Belle-mère</td>
+    <td>Moi</td>
+    <td>Moi</td>
+    <td>Belle-soeur</td>
+  </tr>
+  <tr>
+    <td>Habitudes alimentaires</td>
+    <td>Mange tous les restes</td>
+    <td>Grignotte la nourriture</td>
+    <td>Mange copieusement</td>
+    <td>Mange jusqu'à ce qu'il éclate</td>
+  </tr>
+</table>
+ +

Maintenant, le rendu du tableau réel :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KnockyFlorEllaJuan
RaceJack RussellPoodleStreetdogCocker Spaniel
Age169105
PropriétaireBelle-mèreMoiMoiBelle-soeur
Habitudes alimentairesMange tous les restesGrignotte la nourritureMange copieusementMange jusqu'à ce qu'il éclate
+ +

Le problème ici c'est que, bien que vous puissiez comprendre le tableau, il n'est pas aussi facile de croiser les données que cela pourrait être. Si les en-têtes de colonnes et de lignes se démarquaient d'une manière ou d'une autre, ce serait mieux.

+ +

Apprentissage actif : en-tête de tableau

+ +

Améliorons ce tableau.

+ +
    +
  1. En premier lieu, faites une copie des fichiers dogs-table.html et minimal-table.css dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple « Dogs » ci-dessus.
    2. +
  2. Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <th> (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise <td>, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les <td> des cellules entourant le tableau par des <th>.
    3. +
  3. Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes.
    4. +
+ +
+

Note : Vous pouvez trouver notre exemple achevé dogs-table-fixed.html sur GitHub (voir en direct aussi).

+
+ +

Pourquoi les en-têtes sont-ils utiles ?

+ +

Nous avons déjà partiellement répondu à cette question — il vous est plus facile de trouver les données que vous cherchez quand les en-têtes sont marqués clairement, et la conception globale du tableau paraît meilleure.

+ +
+

Note : Les en-têtes de tableau sont accompagnés d'un style par défaut — ils sont en gras et centrés même si vous n'ajoutez pas votre propre style pour les démarquer.

+
+ +

Les en-têtes de tableau ont un autre avantage — avec l'attribut scope (que nous étudierons dans le prochain article), ils rendent les tableaux plus accessibles en associant chaque en-tête à toutes les données des cellules d'une ligne ou d'une colonne. Les lecteurs d'écran peuvent alors lire toute une ligne ou une colonne de données, ce qui peut être très utile.

+ +

Étendre des cellules sur plusieurs lignes ou colonnes

+ +

Parfois, nous voulons qu'une cellule couvre plusieurs lignes ou colonnes. Prenez l'exemple simple suivant, qui montre le nom d'animaux communs. Dans certains cas, nous voulons montrer les noms du mâle et de la femelle à côté du nom générique de l'animal. Parfois nous ne le faisons pas, et nous voulons alors que le nom générique de l'animal s'étende sur toute la largeur du tableau.

+ +

Le code initial ressemble à cela :

+ +
<table>
+  <tr>
+    <th>Animaux</th>
+  </tr>
+  <tr>
+    <th>Hippopotame</th>
+  </tr>
+  <tr>
+    <th>Cheval</th>
+    <td>Jument</td>
+  </tr>
+  <tr>
+    <td>Étalon</td>
+  </tr>
+  <tr>
+    <th>Crocodile</th>
+  </tr>
+  <tr>
+    <th>Poulet</th>
+    <td>Coq</td>
+  </tr>
+  <tr>
+    <td>Coq</td>
+  </tr>
+</table>
+ +

Mais le résultat ne nous donne pas ce que nous voulions :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Animaux
Hippopotame
ChevalJument
Étalon
Crocodile
PouletCoq
Coq
+ +

Nous avons besoin d'un moyen pour étendre "Animaux", "Hippopotame" et "Crocodile" sur deux colonnes, and "Cheval" et "Poulet" sur deux lignes. Heureusement, les en-têtes de tableau et les cellules ont les attributs colspan et rowspan, ce qui nous permet justement de faire cela. Les deux acceptent une valeur numérique correspondant au nombre de colonnes ou de lignes à couvrir. Par exemple, colspan="2" génère une cellule sur deux colonnes.

+ +

Utilisons colspan et rowspan pour améliorer ce tableau.

+ +
    +
  1. Tout d'abord, faites une copie locale de nos fichiers animals-table.html et minimal-table.css dans un nouveau répertoire sur votre ordinateur. Le HTML contient le même exemple d'animaux vu ci-dessus.
    2. +
  2. Ensuite, utilisez colspan pour mettre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes.
    3. +
  3. Enfin, utilisez rowspan pour mettre « Cheval » and « Poulet » sur deux lignes.
    4. +
  4. Enregistrez et ouvrez votre code sur un navigateur pour voir l'amélioration.
    5. +
+ +
+

Note : Vous pouvez trouver l'exemple achevé dans animals-table-fixed.html sur GitHub (voir en direct aussi).

+
+ +

Attribuer un style commun aux colonnes

+ +

Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments <col> and <colgroup>. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne  — vous devez généralement spécifier les éléments de style dans chaque  <td> ou <th> de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.

+ +

Premier exemple

+

Observez l'exemple simple suivant :

+ +
<table>
+  <tr>
+    <th>Data 1</th>
+    <th style="background-color: yellow">Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td style="background-color: yellow">Orange</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td style="background-color: yellow">Jazz</td>
+  </tr>
+</table>
+ +

Ce qui nous donne comme résultat :

+

{{EmbedLiveSample("Premier_exemple")}}

+ +

Ce n'est pas idéal, car nous devons répéter les informations de style dans les trois cellules de la colonne  (nous aurions probablement défini une classe dans un projet réel et spécifié le style dans une feuille de style séparée). À la place, nous pouvons préciser l'information une seule fois dans un élément <col>. Les éléments <col> sont utilisés dans un conteneur <colgroup> juste en-dessous de la balise <table>. Nous pourrions créer le même effet que  celui vu plus haut en spécifiant notre tableau comme suit :

+ +

Autres exemples

+ +
 <table>
+   <colgroup>
+    <col>
+    <col style="background-color: yellow">
+  </colgroup>
+  <tr>
+    <th>Data 1</th>
+    <th>Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td>Orange</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td>Jazz</td>
+  </tr>
+</table>
+ +

En effet, nous définissons deux « styles de colonnes », les informations de style pour chaque colonne. Nous n'appliquons pas de style pour la première colonne, mais nous devons inclure un élément <col>  vide — si nous ne le faisons pas, le style indiqué s'appliquera à la première colonne.

+ +

Si nous voulions appliquer les informations de style aux deux colonnes, nous devrions juste inclure un élément <col> avec un attribut span, comme ceci :

+ +
<colgroup>
+  <col style="background-color: yellow" span="2">
+</colgroup>
+ +

Comme colspan et rowspan, span reçoit une valeur numérique qui précise le nombre de colonnes sur lesquelles le style s'applique.

+ +

Apprentissage actif : colgroup et col

+ +

Maintenant, il est temps de vous y mettre vous-même.

+ +

Ci-dessous, vous pouvez voir le planning d'un professeur de langues. Le vendredi, elle a une nouvelle classe pour l'enseignement du néerlandais toute la journée, mais elle enseigne aussi l'allemand pendant de courtes périodes les mardis et jeudis. Elle veut souligner les colonnes des jours où elle enseigne.

+ +

{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}

+ +

Recréez le tableau en suivant les étapes ci-dessous.

+ +
    +
  1. Tout d'abord, faites une copie locale du fichier timetable.html dans un nouveau répertoire sur votre ordinateur. Le HTML contient le tableau vu ci-dessus, à l'exception des informations de style des colonnes.
    2. +
  2. Ajoutez un élément <colgroup>  au début du tableau, juste en dessous de la balise <table>,dans lequel vous pouvez ajouter vos éléments <col> (voir les étapes restantes ci-dessous).
    3. +
  3. Les deux premières colonnes doivent rester sans style.
    4. +
  4. Ajoutez une couleur de fond à la troisième colonne. La valeur de votre attribut style est background-color:#97DB9A;
    5. +
  5. Définissez une largeur différente pour la quatrième colonne. La valeur de votre attribut style est width: 42px;
    6. +
  6. Ajoutez une couleur de fond pour la cinquième colonne. La valeur de votre attribut style est background-color: #97DB9A;
    7. +
  7. Ajoutez une couleur de fond différente et une bordure pour la sixième colonne, pour signifier que c'est une journée spéciale et qu'elle enseigne à une nouvelle classe. Les valeurs de votre attribut style sont background-color:#DCC48E; border:4px solid #C1437A;
    8. +
  8. Les deux derniers jours sont libres, alors pas de couleur de fond mais une largeur à spécifier ; la valeur de votre attribut style est width: 42px;
    9. +
+ +

Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version timetable-fixed.html (à voir aussi directement) sur GitHub .

+ +

Résumé

+ +

Cela ne fait que compléter les bases des tableaux HTML. Dans l'article suivant, nous allons voir quelques fonctionnalités de tableaux un peu plus avancées et commencer à penser à quel point elles sont accessibles pour les malvoyants.

+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ + + +
+

Dans ce module

+ + +
diff --git a/files/fr/learn/html/tables/index.html b/files/fr/learn/html/tables/index.html deleted file mode 100644 index e29779b351..0000000000 --- a/files/fr/learn/html/tables/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Les tableaux en HTML -slug: Learn/HTML/Tables -tags: - - Article - - CodingScripting - - Débutant - - Guide - - HTML - - Landing - - Module - - Tableaux -translation_of: Learn/HTML/Tables -original_slug: Apprendre/HTML/Tableaux ---- -
{{LearnSidebar}}
- -

Une tâche assez courante en HTML consiste à structurer des données sous forme de tableaux. HTML dispose d'un certain nombre d'éléments avec attributs à cet effet. Couplé avec un peu de CSS pour styliser ces tableaux, HTML facilite l'affichage d'informations dans des tableaux sur le web comme les emplois du temps de l'école par exemple, les horaires d'ouverture de la piscine du quartier ou des statistiques à propos de votre équipe de football ou de dinosaures favorite. Ce module parcourt tout ce que vous devez savoir pour structurer des données sous forme de tableaux en utilisant HTML.

- -

Prérequis

- -

Avant de commencer ce module, vous devez déjà connaître les bases du HTML  — voyez Introduction au HTML.

- -
-

Note : Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous devriez essayer (la plupart) des exemples de code dans un programme de codage en ligne comme JSBin ou Thimble.

-
- -

Guides

- -

Ce module contient les articles suivants :

- -
-
Bases à propos des Tableaux en HTML
-
Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, cellules, en-têtes, cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.
-
Caractéristiques avancées des Tableaux HTML et accessibilité
-
Dans le second article de ce module, nous allons aborder quelques fonctionnalités plus avancées des tableaux en HTML — comme les intitulés / résumés et le regroupement de rangées dans des sections d'en-tête, de corps ou de pied — ainsi que l'accessibilité aux tableaux pour des utilisateurs ayant des problèmes visuels.
-
- -

Évaluation des connaissances

- -
-
Structuration de données sur les planètes
-
Pour une évaluation des connaissances en matière de tableaux, nous vous  fournissons quelques données sur les planètes du système solaire et nous vous demandons de les structurer sous forme de tableau HTML.
-
diff --git a/files/fr/learn/html/tables/index.md b/files/fr/learn/html/tables/index.md new file mode 100644 index 0000000000..e29779b351 --- /dev/null +++ b/files/fr/learn/html/tables/index.md @@ -0,0 +1,44 @@ +--- +title: Les tableaux en HTML +slug: Learn/HTML/Tables +tags: + - Article + - CodingScripting + - Débutant + - Guide + - HTML + - Landing + - Module + - Tableaux +translation_of: Learn/HTML/Tables +original_slug: Apprendre/HTML/Tableaux +--- +
{{LearnSidebar}}
+ +

Une tâche assez courante en HTML consiste à structurer des données sous forme de tableaux. HTML dispose d'un certain nombre d'éléments avec attributs à cet effet. Couplé avec un peu de CSS pour styliser ces tableaux, HTML facilite l'affichage d'informations dans des tableaux sur le web comme les emplois du temps de l'école par exemple, les horaires d'ouverture de la piscine du quartier ou des statistiques à propos de votre équipe de football ou de dinosaures favorite. Ce module parcourt tout ce que vous devez savoir pour structurer des données sous forme de tableaux en utilisant HTML.

+ +

Prérequis

+ +

Avant de commencer ce module, vous devez déjà connaître les bases du HTML  — voyez Introduction au HTML.

+ +
+

Note : Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous devriez essayer (la plupart) des exemples de code dans un programme de codage en ligne comme JSBin ou Thimble.

+
+ +

Guides

+ +

Ce module contient les articles suivants :

+ +
+
Bases à propos des Tableaux en HTML
+
Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, cellules, en-têtes, cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.
+
Caractéristiques avancées des Tableaux HTML et accessibilité
+
Dans le second article de ce module, nous allons aborder quelques fonctionnalités plus avancées des tableaux en HTML — comme les intitulés / résumés et le regroupement de rangées dans des sections d'en-tête, de corps ou de pied — ainsi que l'accessibilité aux tableaux pour des utilisateurs ayant des problèmes visuels.
+
+ +

Évaluation des connaissances

+ +
+
Structuration de données sur les planètes
+
Pour une évaluation des connaissances en matière de tableaux, nous vous  fournissons quelques données sur les planètes du système solaire et nous vous demandons de les structurer sous forme de tableau HTML.
+
diff --git a/files/fr/learn/html/tables/structuring_planet_data/index.html b/files/fr/learn/html/tables/structuring_planet_data/index.html deleted file mode 100644 index 303bf2fdf9..0000000000 --- a/files/fr/learn/html/tables/structuring_planet_data/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: "Revue\_: structurer les données des planètes" -slug: Learn/HTML/Tables/Structuring_planet_data -translation_of: Learn/HTML/Tables/Structuring_planet_data -original_slug: Apprendre/HTML/Tableaux/Structuring_planet_data ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
- -

Dans notre évaluation, nous vous fournissons des données sur les planètes de notre système solaire pour vous permettre de les structurer dans un tableau HTML.

- - - - - - - - - - - - -
Prérequis :Avant de tenter cette évaluation, vous devez déjà avoir travaillé tous les articles de ce module.
Objectif :Vérifier la compréhension des tableaux HTML et des fonctionnalités associées.
- -

Point de départ

- -

Pour commencer cette évaluation, créez des copies locales de blank-template.html, minimal-table.css et planets-data.txt dans un nouveau répertoire dans votre ordinateur.

- -
-

Note : Vous pouvez aussi utiliser un site commeJSBin ou Thimble pour votre évaluation. Vous pouvez coller les HTML, CSS et JavaScript dans l'un de ces éditeurs en ligne. Si votre éditeur en ligne n'a pas de panneaux séparés JavaScript/CSS, n'hésitez pas à les mettre en ligne <script>/<style> dans la page HTML.

-
- -

Résumé du projet

- -

Vous travaillez dans une école ; actuellement, vos étudiants étudient les planètes de notre système solaire, et vous souhaitez leur fournir un ensemble de données faciles à suivre, pour rechercher des faits et des chiffres sur les planètes. Un tableau de données HTML serait idéal : vous devez prendre les données brutes disponibles et les organiser en tableau, en suivant les étapes ci-dessous.

- -

Le tableau terminé devrait ressembler à celui-ci :

- -

- -

Vous pouvez aussi regarder l'exemple ici (sans regarder le code source — ne trichez pas !)

- - - -

Étapes à suivre

- -

Les étapes suivantes décrivent ce que vous devez faire pour complèter l'exemple de tableau. Toutes les données dont vous avez besoin sont contenues dans le fichier planets-data.txt. Si vous avez du mal à visualiser les données, regardez l'exemple donné dans le lien ci-dessus, ou essayez de dessiner un diagramme.

- -
    -
  1. Ouvrez votre copie de blank-template.html, et commencez le tableau en lui donnant un conteneur extérieur, un en-tête et un corps de tableau. Vous n'avez pas besoin d'un pied de tableau dans cet exemple.
    2. -
  2. Ajoutez la légende fournie à votre tableau.
    3. -
  3. Ajoutez une ligne à l'en-tête contenant tous les en-têtes de colonnes.
    4. -
  4. Créez toutes les lignes de contenu du corps du tableau, en vous rappelant de faire systématiquement tous les en-têtes de lignes.
    5. -
  5. Assurez-vous que tout le contenu est inséré dans les cellules de droite - dans les données brutes, chaque ligne de données d'une planète est affiché à côté de la planète associée.
    6. -
  6. Ajoutez les attributs pour créer des en-têtes de lignes et colonnes ne pouvant être confondus avec les lignes, colonnes et groupes de lignes dont ils sont les en-têtes.
    7. -
  7. Ajoutez une bordure noire pour entourer la colonne contenant les noms des planètes (en-têtes de lignes).
    8. -
- -

Conseils et astuces

- - - -

Correction

- -

Si vous réalisez cette évaluation dans le cadre d'un cours organisé, vous devez pouvoir remettre votre travail à votre professeur/formateur pour la correction. Si vous êtes en auto-apprentissage, alors vous pouvez obtenir aisément le guide de correction par une demande auprès de Learning Area Discourse thread, ou dans le #mdn canal IRC sur Mozilla IRC. Essayez d'abord l'exercice — il n'y a rien à gagner en trichant !

- -

{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}

diff --git a/files/fr/learn/html/tables/structuring_planet_data/index.md b/files/fr/learn/html/tables/structuring_planet_data/index.md new file mode 100644 index 0000000000..303bf2fdf9 --- /dev/null +++ b/files/fr/learn/html/tables/structuring_planet_data/index.md @@ -0,0 +1,73 @@ +--- +title: "Revue\_: structurer les données des planètes" +slug: Learn/HTML/Tables/Structuring_planet_data +translation_of: Learn/HTML/Tables/Structuring_planet_data +original_slug: Apprendre/HTML/Tableaux/Structuring_planet_data +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

Dans notre évaluation, nous vous fournissons des données sur les planètes de notre système solaire pour vous permettre de les structurer dans un tableau HTML.

+ + + + + + + + + + + + +
Prérequis :Avant de tenter cette évaluation, vous devez déjà avoir travaillé tous les articles de ce module.
Objectif :Vérifier la compréhension des tableaux HTML et des fonctionnalités associées.
+ +

Point de départ

+ +

Pour commencer cette évaluation, créez des copies locales de blank-template.html, minimal-table.css et planets-data.txt dans un nouveau répertoire dans votre ordinateur.

+ +
+

Note : Vous pouvez aussi utiliser un site commeJSBin ou Thimble pour votre évaluation. Vous pouvez coller les HTML, CSS et JavaScript dans l'un de ces éditeurs en ligne. Si votre éditeur en ligne n'a pas de panneaux séparés JavaScript/CSS, n'hésitez pas à les mettre en ligne <script>/<style> dans la page HTML.

+
+ +

Résumé du projet

+ +

Vous travaillez dans une école ; actuellement, vos étudiants étudient les planètes de notre système solaire, et vous souhaitez leur fournir un ensemble de données faciles à suivre, pour rechercher des faits et des chiffres sur les planètes. Un tableau de données HTML serait idéal : vous devez prendre les données brutes disponibles et les organiser en tableau, en suivant les étapes ci-dessous.

+ +

Le tableau terminé devrait ressembler à celui-ci :

+ +

+ +

Vous pouvez aussi regarder l'exemple ici (sans regarder le code source — ne trichez pas !)

+ + + +

Étapes à suivre

+ +

Les étapes suivantes décrivent ce que vous devez faire pour complèter l'exemple de tableau. Toutes les données dont vous avez besoin sont contenues dans le fichier planets-data.txt. Si vous avez du mal à visualiser les données, regardez l'exemple donné dans le lien ci-dessus, ou essayez de dessiner un diagramme.

+ +
    +
  1. Ouvrez votre copie de blank-template.html, et commencez le tableau en lui donnant un conteneur extérieur, un en-tête et un corps de tableau. Vous n'avez pas besoin d'un pied de tableau dans cet exemple.
    2. +
  2. Ajoutez la légende fournie à votre tableau.
    3. +
  3. Ajoutez une ligne à l'en-tête contenant tous les en-têtes de colonnes.
    4. +
  4. Créez toutes les lignes de contenu du corps du tableau, en vous rappelant de faire systématiquement tous les en-têtes de lignes.
    5. +
  5. Assurez-vous que tout le contenu est inséré dans les cellules de droite - dans les données brutes, chaque ligne de données d'une planète est affiché à côté de la planète associée.
    6. +
  6. Ajoutez les attributs pour créer des en-têtes de lignes et colonnes ne pouvant être confondus avec les lignes, colonnes et groupes de lignes dont ils sont les en-têtes.
    7. +
  7. Ajoutez une bordure noire pour entourer la colonne contenant les noms des planètes (en-têtes de lignes).
    8. +
+ +

Conseils et astuces

+ + + +

Correction

+ +

Si vous réalisez cette évaluation dans le cadre d'un cours organisé, vous devez pouvoir remettre votre travail à votre professeur/formateur pour la correction. Si vous êtes en auto-apprentissage, alors vous pouvez obtenir aisément le guide de correction par une demande auprès de Learning Area Discourse thread, ou dans le #mdn canal IRC sur Mozilla IRC. Essayez d'abord l'exercice — il n'y a rien à gagner en trichant !

+ +

{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}

-- cgit v1.2.3-54-g00ecf