diff options
Diffstat (limited to 'files/fr/learn/html/cheatsheet/index.md')
| -rw-r--r-- | files/fr/learn/html/cheatsheet/index.md | 284 |
1 files changed, 284 insertions, 0 deletions
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 +--- +<div>{{draft}}</div> + +<p>Lorsqu'on utilise {{Glossary("HTML")}}, une antisèche, une page rapide et récapitulative (<em>cheatsheet</em>) peut s'avérer plutôt pratique pour se souvenir rapidement de quelle balise HTML utiliser dans quel cas. MDN possède également une <a href="/fr/docs/Web/HTML/Element">documentation HTML exhaustive</a> ainsi que différents <a href="/fr/Apprendre/HTML/Comment">tutoriels HTML détaillés</a>. 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.</p> + +<div class="note"> +<p><strong>Note :</strong> 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.</p> +</div> + +<h2>Éléments en ligne</h2> + +<p>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 <code><body></code>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Usage</th> + <th scope="col">Élément</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td>Un lien</td> + <td>{{HTMLElement("a")}}</td> + <td id="a-example"><pre class="brush: html"><a href="https://example.org"> +Un lien vers example.org</a>.</pre> + {{EmbedLiveSample("a-example", 100, 60)}}</td> + </tr> + <tr> + <td>Une image</td> + <td>{{HTMLElement("img")}}</td> + <td id="img-example"><pre class="brush: html"><img src="beast.png" width="25" /></pre> + {{EmbedLiveSample("img-example", 100, 60)}}</td> + </tr> + <tr> + <td>Un conteneur en ligne</td> + <td>{{HTMLElement("span")}}</td> + <td id="span-example"><pre class="brush: html">Utilisé pour grouper des éléments, par exemple pour <span style="color:blue">les mettre en forme</span>.</pre> + {{EmbedLiveSample("span-example", 100, 60)}}</td> + </tr> + <tr> + <td>Emphase du texte</td> + <td>{{HTMLElement("em")}}</td> + <td id="em-example"><pre class="brush: html"><em>La classe non ?</em>.</pre> + {{EmbedLiveSample("em-example", 100, 60)}}</td> + </tr> + <tr> + <td>Texte idiomatique</td> + <td>{{HTMLElement("i")}}</td> + <td id="i-example"><pre class="brush: html"> +Marque la phrase <i>généralement en italique</i>.</pre> + {{EmbedLiveSample("i-example", 100, 60)}}</td> + </tr> + <tr> + <td>Texte d'attention</td> + <td>{{HTMLElement("b")}}</td> + <td id="b-example"><pre class="brush: html"> +Met en avant un <b>mot ou une phrase d'une certaine importance</b>.</pre> + {{EmbedLiveSample("b-example", 100, 60)}}</td> + </tr> + <tr> + <td>Texte d'importance</td> + <td>{{HTMLElement("strong")}}</td> + <td id="strong-example"><pre class="brush: html"><strong>Ce contenu est important !</strong></pre> + {{EmbedLiveSample("strong-example", 100, 60)}}</td> + </tr> + <tr> + <td>Marquer du texte</td> + <td>{{HTMLElement("mark")}}</td> + <td id="mark-example"><pre class="brush: html"><mark>Vous me voyez ?</mark></pre> + {{EmbedLiveSample("mark-example", 100, 60)}}</td> + </tr> + <tr> + <td>Texte barré</td> + <td>{{HTMLElement("s")}}</td> + <td id="s-example"><pre class="brush: html"><s>Je ne suis plus pertinent.</s></pre> + {{EmbedLiveSample("s-example", 100, 60)}}</td> + </tr> + <tr> + <td>Mise en indice</td> + <td>{{HTMLElement("sub")}}</td> + <td id="sub-example"><pre class="brush: html">H<sub>2</sub>O</pre> + {{EmbedLiveSample("sub-example", 100, 60)}}</td> + </tr> + <tr> + <td>Texte de commentaire</td> + <td>{{HTMLElement("small")}}</td> + <td id="small-example"><pre class="brush: html"> +Utilisé pour représenter <small>les petites +notes </small> d'un document.</pre> +{{EmbedLiveSample("small-example", 100, 60)}}</td> + </tr> + <tr> + <td>Adresse</td> + <td>{{HTMLElement("address")}}</td> + <td id="address-example"><pre class="brush: html"><address>15 Rue du Bourg</address></pre> +{{EmbedLiveSample("address-example", 100, 60)}}</td> + </tr> + <tr> + <td>Citation textuelle</td> + <td>{{HTMLElement("cite")}}</td> + <td id="cite-example"><pre class="brush: html">Pour plus d'informations sur les monstres, +voir <cite>Le monstrueux livre des monstres</cite>.</pre> + {{EmbedLiveSample("cite-example", 100, 60)}}</td> + </tr> + <tr> + <td>Mise en exposant</td> + <td>{{HTMLElement("sup")}}</td> + <td id="sup-example"><pre class="brush: html">x<sup>2</sup></pre> + {{EmbedLiveSample("sup-example", 100, 60)}}</td> + </tr> + <tr> + <td>Citation en ligne</td> + <td>{{HTMLElement("q")}}</td> + <td id="q-example"><pre class="brush: html"> +<q>Toi aussi mon fils ?</q>, a-t-il dit.</pre> +{{EmbedLiveSample("q-example", 100, 60)}}</td> + </tr> + <tr> + <td>Un saut de ligne</td> + <td>{{HTMLElement("br")}}</td> + <td id="br-example"><pre class="brush: html">Ligne 1<br>Ligne 2</pre> +{{EmbedLiveSample("br-example", 100, 80)}}</td> + </tr> + <tr> + <td>Un saut de ligne possible</td> + <td>{{HTMLElement("wbr")}}</td> + <td id="wbr-example"><pre class="brush: html"> +<div style="width: 200px"> + Llanfair<wbr>pwllgwyngyllgogerychwyrngogogoch. +</div></pre> +{{EmbedLiveSample("wbr-example", 100, 80)}}</td> + </tr> + <tr> + <td>Date</td> + <td>{{HTMLElement("time")}}</td> + <td id="time-example"><pre class="brush: html"> +Utilisé pour mettre en forme la date. Par exemple : +<time datetime="2020-05-24" pubdate> +Publié le 24 mai 2020</time>.</pre> +{{EmbedLiveSample("time-example", 100, 60)}}</td> + </tr> + <tr> + <td>Code</td> + <td>{{HTMLElement("code")}}</td> + <td id="code-example"><pre class="brush: html"> +Ce texte est au format normal, +mais <code>celui-ci représente du code</code>.</pre> +{{EmbedLiveSample("code-example", 100, 60)}}</td> + </tr> + <tr> + <td>Audio</td> + <td>{{HTMLElement("audio")}}</td> + <td id="audio-example"><pre class="brush: html"> +<audio controls="controls"> + <source="t-rex-roar.mp3" type="audio/mpeg"> + Votre navigateur ne prend pas en charge audio. +</audio></pre> +{{EmbedLiveSample("audio-example", 100, 80)}}</td> + </tr> + <tr> + <td>Video</td> + <td>{{HTMLElement("video")}}</td> + <td id="video-example"><pre class="brush: html"> +<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></pre> +{{EmbedLiveSample("video-example", 100, 200)}}</td> + </tr> + </tbody> +</table> + +<h2>Éléments de bloc</h2> + +<p>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.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Usage</th> + <th scope="col">Élément</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td>Un paragraphe</td> + <td>{{HTMLElement("p")}}</td> + <td id="p-example"><pre class="brush: html"> +<p>Je suis un paragraphe</p> +<p>Et un autre paragraph</p></pre> +{{EmbedLiveSample("p-example", 100, 150)}} + </td> + </tr> + <tr> + <td>Une citation étendue</td> + <td>{{HTMLElement("blockquote")}}</td> + <td id="blockquote-example"><pre class="brush: html">Ils sont alors dit : +<blockquote>L'élément blockquote indique une citation étendue.</blockquote></pre> +{{EmbedLiveSample("blockquote-example", 100, 100)}} + </td> + </tr> + <tr> + <td>Information supplémentaire</td> + <td>{{HTMLElement("details")}}</td> + <td id="details-example"><pre class="brush: html"> +<details> + <summary>Anti-sèche HTML</summary> + <p>Éléments en ligne</p> + <p>Éléments de bloc</p> +</details></pre> +{{EmbedLiveSample("details-example", 100, 150)}} + </td> + </tr> + <tr> + <td>Une liste non-ordonnée</td> + <td>{{HTMLElement("ul")}}</td> + <td id="ul-example"><pre class="brush: html"> +<ul><br> + <li>Je suis un élément de liste</li><br> + <li>Et moi un autre</li><br> +</ul></pre> +{{EmbedLiveSample("ul-example", 100, 100)}} + </td> + </tr> + <tr> + <td>Une liste ordonnée</td> + <td>{{HTMLElement("ol")}}</td> + <td id="ol-example"><pre class="brush: html"> +<ol><br> + <li>Je suis le premier élément</li><br> + <li>Et moi le deuxième</li><br> +</ol></pre> +{{EmbedLiveSample("ol-example", 100, 100)}} + </td> + </tr> + <tr> + <td>Une liste de définitions</td> + <td>{{HTMLElement("dl")}}</td> + <td id="dl-example"><pre class="brush: html"> +<dl> + <dt>Un terme</dt><br> + <dd>La définition du terme</dd> + <dt>Un autre terme</dt> + <dd>La définition d'un autre terme</dd> +</dl></pre> +{{EmbedLiveSample("dl-example", 100, 150)}} + </td> + </tr> + <tr> + <td>Un séparateur horizontal</td> + <td>{{HTMLElement("hr")}}</td> + <td id="hr-example"><pre class="brush: html"> +avant<hr>après</pre> +{{EmbedLiveSample("hr-example", 100, 100)}} + </td> + </tr> + <tr> + <td>Un titre</td> + <td>{{HTMLElement("Heading_Elements", "<h1>-<h6>")}}</td> + <td id="h1-h6-example"><pre class="brush: html"> +<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></pre> +{{EmbedLiveSample("h1-h6-example", 100, 350)}} + </td> + </tr> + </tbody> +</table>
\ No newline at end of file |