From d596e86a4f13b04981f51d327af257b07e6d21c3 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 14 Nov 2021 14:23:22 +0100 Subject: Prepare Learning Area section for Markdown conversion (#2738) * Remove summary, spans and fonts * Remove notranslate class * Remove ids other than headings * Remove hidden blocks * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * Fix notes * Remove code in pre, sub/sup and some styles * fix dls * fix absolute / english links * fix figures and others * fix other issues from report * Fix other one-off issues excl. imgs * Fix images * Fixes #2842 for Learning area --- files/fr/learn/html/cheatsheet/index.html | 317 +++++++++++++++++++----------- 1 file changed, 207 insertions(+), 110 deletions(-) (limited to 'files/fr/learn/html/cheatsheet') diff --git a/files/fr/learn/html/cheatsheet/index.html b/files/fr/learn/html/cheatsheet/index.html index a3839113a3..f9fcdc2434 100644 --- a/files/fr/learn/html/cheatsheet/index.html +++ b/files/fr/learn/html/cheatsheet/index.html @@ -14,174 +14,271 @@ original_slug: Apprendre/HTML/Cheatsheet

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

-

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

+

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

-

Mise en forme inline

+

Éléments en ligne

-

Un élément dit « en ligne » ou inline prend autant d'espace que nécessaire. Ces éléments sont disposés horizontalement les uns à la suite des autres, à la façon des mots dans une phrase ou des livres dans une bibliothèque.

+

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

- +
- - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - - + + + - - - + + + - - - + + + + + + + + + + + + +
UtilisationFragment de codeRésultatUsageÉlémentExemple
Un lien simple<a href="https://developer.mozilla.org">Un lien vers MDN</a>Un lien vers MDNUn lien{{HTMLElement("a")}}
<a href="https://example.org">
+Un lien vers example.org</a>.
+ {{EmbedLiveSample("a-example", 100, 60)}}
Une image simple<img src="https://developer.mozilla.org/media/img/mdn-logo-sm.png" />Une image{{HTMLElement("img")}}
<img src="beast.png" width="25" />
+ {{EmbedLiveSample("img-example", 100, 60)}}
Un texte avec emphase<em>Je suis distingué</em>Je suis distinguéUn conteneur en ligne{{HTMLElement("span")}}
Utilisé pour grouper des éléments, par exemple pour <span style="color:blue">les mettre en forme</span>.
+ {{EmbedLiveSample("span-example", 100, 60)}}
Un texte marqué comme important<strong>Je suis important</strong>Je suis importantEmphase du texte{{HTMLElement("em")}}
<em>La classe non ?</em>.
+ {{EmbedLiveSample("em-example", 100, 60)}}
Un texte mis en avant<mark>Remarquez-moi</mark>Remarquez-moiTexte idiomatique{{HTMLElement("i")}}
+Marque la phrase <i>généralement en italique</i>.
+ {{EmbedLiveSample("i-example", 100, 60)}}
Barrer du texte qui n'est plus pertinent<s>Je ne suis plus d'actualité ou plus pertinent</s>Je ne suis plus d'actualité ou plus pertinentTexte d'attention{{HTMLElement("b")}}
+Met en avant un <b>mot ou une phrase d'une certaine importance</b>.
+ {{EmbedLiveSample("b-example", 100, 60)}}
Souligner pour ajouter une annotation non-textuelleCeci est <u>mal orthographié</u>Ceci est mal orthographiéTexte d'importance{{HTMLElement("strong")}}
<strong>Ce contenu est important !</strong>
+ {{EmbedLiveSample("strong-example", 100, 60)}}
Du texte qui doit être affiché en indiceH<sub>2</sub>OH2OMarquer du texte{{HTMLElement("mark")}}
<mark>Vous me voyez ?</mark>
+ {{EmbedLiveSample("mark-example", 100, 60)}}
Du texte qui doit être affiché en exposantM<sup>me</sup> de BovaryMme de BovaryTexte barré{{HTMLElement("s")}}
<s>Je ne suis plus pertinent.</s>
+ {{EmbedLiveSample("s-example", 100, 60)}}
Une citation dans le cours du texteIl a dit : <q>Je suis ton père.</q>Il a dit : Je suis ton père.Mise en indice{{HTMLElement("sub")}}
H<sub>2</sub>O
+ {{EmbedLiveSample("sub-example", 100, 60)}}
Texte de commentaire{{HTMLElement("small")}}
+Utilisé pour représenter <small>les petites
+notes </small> d'un document.
+{{EmbedLiveSample("small-example", 100, 60)}}
Adresse{{HTMLElement("address")}}
<address>15 Rue du Bourg</address>
+{{EmbedLiveSample("address-example", 100, 60)}}
Citation textuelle{{HTMLElement("cite")}}
Pour plus d'informations sur les monstres,
+voir <cite>Le monstrueux livre des monstres</cite>.
+ {{EmbedLiveSample("cite-example", 100, 60)}}
Mise en exposant{{HTMLElement("sup")}}
x<sup>2</sup>
+ {{EmbedLiveSample("sup-example", 100, 60)}}
Citation en ligne{{HTMLElement("q")}}
+<q>Toi aussi mon fils ?</q>, a-t-il dit.
+{{EmbedLiveSample("q-example", 100, 60)}}
Un saut de ligneLigne 1 <br/> Ligne 2Ligne 1
- Ligne 2		{{HTMLElement("br")}}
Ligne 1<br>Ligne 2
+{{EmbedLiveSample("br-example", 100, 80)}}
Du code informatique (code « machine »)<code>System.print.File("coucou")</code>System.print.File("coucou")Un saut de ligne possible{{HTMLElement("wbr")}}
+<div style="width: 200px">
+  Llanfair<wbr>pwllgwyngyllgogerychwyrngogogoch.
+</div>
+{{EmbedLiveSample("wbr-example", 100, 80)}}
Un fichier audio intégré<audio controls src="https://mdn.mozillademos.org/files/2587/AudioTest%20%281%29.mp3">L'élément <code>audio</code> n'est pas supporté.</audio> - - Date{{HTMLElement("time")}}
+Utilisé pour mettre en forme la date. Par exemple :
+<time datetime="2020-05-24" pubdate>
+Publié le 24 mai 2020</time>.
+{{EmbedLiveSample("time-example", 100, 60)}}
Un fichier vidéo intégré<video controls src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4">L'élément <code>video</code> n'est pas supporté.</video> - - Code{{HTMLElement("code")}}
+Ce texte est au format normal,
+mais <code>celui-ci représente du code</code>.
+{{EmbedLiveSample("code-example", 100, 60)}}
Audio{{HTMLElement("audio")}}
+<audio controls="controls">
+  <source="t-rex-roar.mp3" type="audio/mpeg">
+  Votre navigateur ne prend pas en charge audio.
+</audio>
+{{EmbedLiveSample("audio-example", 100, 80)}}
Video{{HTMLElement("video")}}
+<video controls  width="250"
+  src="https://archive.org/download/ElephantsDream/ed_hd.ogv" >
+  L'élément <code>video</code> n'est pas pris en charge.
+</video>
+{{EmbedLiveSample("video-example", 100, 200)}}
-

Mise en forme block

+

Éléments de bloc

-

Les éléments de bloc (block en anglais) s'organisent différemment. Ils prennent toute la largeur de la page. Étant donné qu'ils prennent toute cette largeur, on ne peut donc pas les disposer côté à côte horizontalement. Leur organisation sera plutôt celle de paragraphes dans une dissertation ou celle d'étages dans un immeuble.

+

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

- +
- - - + + + - - - + + - - - + + + - - - + + + - - - + + + - - - + + + + + + + + + + + + + + + + + -
UtilisationFragment de codeRésultatUsageÉlémentExemple
Un paragraphe simple -

<p>Je suis un paragraphe</p>
- <p>Je suis un autre paragraphe</p>

- 		-

Je suis un paragraphe

- -

Je suis un autre paragraphe

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

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

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

+</ul>
+{{EmbedLiveSample("ul-example", 100, 100)}} +
Des titres de différents niveaux (du plus important au moins important) -

<h2>Un titre de niveau 2</h2>
- <h3>Un titre de niveau 3</h3>
- <h4>Un titre de niveau 4</h4>
- <h5>Un titre de niveau 5</h5>

- 		-

Un titre de niveau 2

- -

Un titre de niveau 3

- -

Un titre de niveau 4

- -
Un titre de niveau 5
+ 		Une liste ordonnée{{HTMLElement("ol")}}
+<ol>

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

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

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

+  <dd>La définition du terme</dd>
+  <dt>Un autre terme</dt>
+  <dd>La définition d'un autre terme</dd>
+</dl>
+{{EmbedLiveSample("dl-example", 100, 150)}}
Un séparateur horizontal{{HTMLElement("hr")}}
+avant<hr>après
+{{EmbedLiveSample("hr-example", 100, 100)}} +
Un titre{{HTMLElement("Heading_Elements", "<h1>-<h6>")}}
+<h1> Titre de niveau 1 </h1>
+<h2> Titre de niveau 2 </h2>
+<h3> Titre de niveau 3 </h3>
+<h4> Titre de niveau 4 </h4>
+<h5> Titre de niveau 5 </h5>
+<h6> Titre de niveau 6 </h6>
+{{EmbedLiveSample("h1-h6-example", 100, 350)}} +
+ \ No newline at end of file -- cgit v1.2.3-54-g00ecf