Différences

Ci-dessous, les différences entre deux révisions de la page.

--- prog:html [2024/02/26 05:57] – [Paragraphes] : ajout de "<br>" root
+++ prog:html [2024/11/03 23:33] (Version actuelle) – [Paragraphes] : oublie de / pour fermer un tag root
@@ Ligne 61: / Ligne 61: @@
 =====body=====
-====Balises====
+====Structure de la page====
-===Structure de la page===
 {{:prog:html:structure.png?900|}}
@@ Ligne 86: / Ligne 84: @@
   * ''<footer>'' : bas de page.
-===Paragraphes===
+====Paragraphes====
   * ''<h1>'' jusqu'à ''<h6>'' (header) : ''<h1>'' désigne le titre de la page et ne doit être présent qu'une seule fois.
@@ Ligne 92: / Ligne 91: @@
 Attribut ''id'' : désigne un point d'ancrage pour les liens hypertexte,
-| <code>
+| <code html>
 <h1>h1 header</h1>
 <h2>h2 header</h2>
@@ Ligne 110: / Ligne 109: @@
   * ''<p>'' : les paragraphes. A ne pas confondre avec ''<br />''.
-| <code>
+| <code html>
 Texte
@@ Ligne 134: / Ligne 133: @@
 Par exemple : utiliser ''<p>'' pour délimiter les couplets et refrains d'une chanson et utiliser ''<br />'' pour les rimes.
-| <code>
+| <code html>
 Ligne 1<br />
 Ligne 2
@@ Ligne 144: / Ligne 143: @@
   * ''<ul>'', ''<ol>'' et ''<li>'' : listes pucées. Début et fin de la liste non numérotée ''<ul>'' (unordered list), début et fin de la liste numérotée ''<ol>'' (ordered list), élément dans les listes ''<li>'' (list item).
-| <code>
+| <code html>
 <ol>
   <li>liste ordonnée
     <ul>
       <li>liste non ordonnée imbriquée</li>
-    <ul>
+    </ul>
   </li>
-<ol>
+</ol>
 </code> | <HTML>
 <ol>
@@ Ligne 157: / Ligne 156: @@
     <ul>
       <li>liste non ordonnée imbriquée</li>
-    <ul>
+    </ul>
   </li>
-<ol>
+</ol>
 </HTML> |
   * ''<dl>'', ''<dt>'', ''<dd>'' : listes non pucées. Début et fin de la liste sans puce ''<dl>'' (description list), terme ''<dt>'' (description term) et détails ''<dd>'' (description details).
-| <code>
+| <code html>
 <dl>
   <dt>Terme</dt>
   <dd>Description 1</dd>
   <dd>Description 2</dd>
-<dl>
+</dl>
 </code> | <HTML>
 <dl>
@@ Ligne 175: / Ligne 174: @@
   <dd>Description 1</dd>
   <dd>Description 2</dd>
-<dl>
+</dl>
 </HTML> |
   * ''%%<cite>%%'' et ''%%<blockquote>%%'' et son attribut ''cite'' (n'est pas affiché).
-| <code>
+| <code html>
 <blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
 <p>blabla</p>
@@ Ligne 194: / Ligne 193: @@
 On peut aussi combiner ''%%<blockquote>%%'' et ''%%<cite>%%''
-| <code>
+| <code html>
 <blockquote>
   <p>Text</p>
@@ Ligne 212: / Ligne 211: @@
   * ''<address>''. Texte libre à l'intérieur. Met en italique.
-| <code>
+| <code html>
 <address>
   <a href="mailto:jim@example.com">jim@example.com</a><br />
@@ Ligne 224: / Ligne 223: @@
 </HTML> |
-  * ''<code>'', ''<var>'', ''<kbd>'', ''<samp>'' : police monospace. Pour faire du multi-ligne, il faut entourer par ''<pre><code><code></pre>''.
+  * ''<code>'', ''<var>'', ''<kbd>'', ''<samp>'' : police monospace. Pour faire du multi-ligne, il faut entourer par ''<pre><code></code></pre>''.
 Toutes les affichages sont identiques. ''code'' représente du code informatique, ''var'' représente une variable, ''kbd'' représente la commande saisie au clavier, ''samp'' représente la sortie standard.
-===Groupes de mots===
+====Groupes de mots====
   * ''%%<span>%%'' : modification du style sans mise en évidence par les crawlers.
-| <code>
+| <code html>
 <span style="font-size: 32px; margin: 21px 0; display: block;">
   Is this a top level heading?
@@ Ligne 244: / Ligne 243: @@
   * ''<em>'' (emphasis) : accentuer un mot pour les crawlers. Met également en italique.
-| <code>I am <em>glad</em> you weren't <em>late</em>.</code> | <HTML>I am <em>glad</em> you weren't <em>late</em>.</HTML> |
+| <code html>I am <em>glad</em> you weren't <em>late</em>.</code> | <HTML>I am <em>glad</em> you weren't <em>late</em>.</HTML> |
   * ''<strong>'' (important) : accentuer fortement un mot pour les crawlers . Met également en gras.
-| <code>This liquid is <strong>highly toxic</strong>.</code> | <HTML>This liquid is <strong>highly toxic</strong>.</HTML> |
+| <code html>This liquid is <strong>highly toxic</strong>.</code> | <HTML>This liquid is <strong>highly toxic</strong>.</HTML> |
   * ''<mark>'' (pertinence) pour les crawlers. Met également en surligné.
-| <code>This liquid is <mark>highly toxic</mark>.</code> | <HTML>This liquid is <mark>highly toxic</mark>.</HTML> |
+| <code html>This liquid is <mark>highly toxic</mark>.</code> | <HTML>This liquid is <mark>highly toxic</mark>.</HTML> |
   * Obsolète : ''<i>'' (italic), ''<b>'' (bold), ''<u>'' (underline). Préférer span + CSS.
@@ Ligne 260: / Ligne 259: @@
 La documentation de Mozilla indique de mettre le format à l'intérieur du ''<a>''.
-| <code>
+| <code html>
 <a href="https://developer.mozilla.org/en-US/">
   <h1>MDN Web Docs</h1>
@@ Ligne 282: / Ligne 281: @@
   * ''%%<q>%%'' et son attribut ''cite'' (n'est pas affiché).
-| <code>
+| <code html>
 <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">blabla</q>
 </code> | <HTML>
@@ Ligne 292: / Ligne 291: @@
   * ''<abbr>'' et son attribut ''title'' (abréviation).
-| <code>
+| <code html>
 <abbr title="Reverend">Rev.</abbr>
 </code> | <HTML>
@@ Ligne 300: / Ligne 299: @@
   * ''<sup>'' (exposant) et ''%%<sub>%%'' (indice).
-| <code>
+| <code html>
 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>
 </code> | <HTML>
@@ Ligne 308: / Ligne 307: @@
   * ''<time>'' : pour distinguer l'affichage visuel et l'affichage normalisé.
-| <code>
+| <code html>
 <time datetime="2016-01-20">20 January 2016</time>
 </code> | <HTML>
@@ Ligne 314: / Ligne 313: @@
 </HTML> |
+=====Multimédia=====
+====Images====
+  * ''<img>'' : affiche une image
+| <code html>
+<img src="mdn_logo.svg" alt="Mozilla logo" />
+</code> | <HTML>
+<img src="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks/mdn_logo.svg" alt="MDN Web Docs" height=120 />
+</HTML> |
+Attribut ''alt'' : pour un texte alternatif décrivant l'image.
+Attributs ''width'' et ''height'' : dimension en pixel. La taille doit correspondre aux dimensions de l'image. Ce n'est pas fait pour redimensionner l'image (sauf taille dynamique dans la page). Si seulement un des deux attributs est indiqué, le ratio de la taille de l'image sera conservé.
+Attributs ''srcset'' et ''sizes'' : afficher une image spécifique en fonction de la largeur de l'image affichée. Souvent la dimension de l'image dépend de la largeur d'affichage.
+<code html>
+<img
+  srcset="img-480w.jpg 480w, img-800w.jpg 800w"
+  sizes="(max-width: 600px) 480px,
+px"
+  src="img-800w.jpg" />
+</code>
+Dans ''srcset'', il faut mettre la liste des images avec leur dimension. On met ''w'' pour indiquer la largeur (''width'') en pixel.
+Dans ''sizes'', il y a la largeur (en ''px'') en fonction d'une condition ''CSS''. La première condition vraie est appliquée donc l'ordre est important.
+  * ''<picture>''
+Il permet d'afficher des images de façon dynamique mais de façon plus fine, toujours sur la base de condition ''CSS''.
+<code html>
+<picture>
+  <source media="(max-width: 799px)" srcset="elva-480w.jpg" />
+  <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
+  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
+</picture>
+</code>
+ou encore :
+<code html>
+<picture>
+  <source media="(orientation: landscape)"
+    srcset="land-small-car-image.jpg 200w,
+            land-medium-car-image.jpg 600w,
+            land-large-car-image.jpg 1000w"
+    sizes="(min-width: 700px) 500px,
+           (min-width: 600px) 400px,
+vw">
+  <source media="(orientation: portrait)"
+    srcset="port-small-car-image.jpg 700w,
+            port-medium-car-image.jpg 1200w,
+            port-large-car-image.jpg 1600w"
+    sizes="(min-width: 768px) 700px,
+           (min-width: 1024px) 600px,
+px">
+  <img src="land-medium-car-image.jpg" alt="Car">
+</picture>
+</code>
+[[https://blog.bitsrc.io/why-you-should-use-picture-tag-instead-of-img-tag-b9841e86bf8b|Why You Should Use Picture Tag Instead of Img Tag]] {{ :prog:html:why_you_should_use_picture_tag_instead_of_img_tag_by_chameera_dulanga_bits_and_pieces_14_03_2024_06_56_06_.html |Archive du 25/01/2021 le 14/03/2024}}
+  * ''<figure>'' et ''<figcaption>'' : ajoute un texte lié à l'image.
+| <code html>
+<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>
+</code> | <HTML>
+<figure>
+  <img
+    src="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks/mdn_logo.svg"
+    alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+    width="400" />
+  <figcaption>
+    A T-Rex on display in the Manchester University Museum.
+  </figcaption>
+</figure>
+</HTML> |
+  * ''<canvas>'' et 2D
+  * ''<canvas>'' et ''WebGL''
+  * ''<svg>''
+Il est possible d'inclure l'image via ''%%<img src="equilateral.svg" />%%'' ou directement ''<svg>...</svg>''.
+Dans le premier cas, l'image peut être mise en cache. Mais les css de la page n'impacteront pas l'image ''svg''.
+Dans le cas où l'image est "inline", c'est l'inverse.
+====Vidéos====
+  * ''<video>''
+| <code html>
+<video src="rabbit320.webm" controls>
+  <source src="rabbit320.webm" type="video/webm" />
+    <p>
+    Your browser doesn't support HTML video. Here is a
+    <a href="rabbit320.webm">link to the video</a> instead.
+  </p>
+</video>
+</code> | <HTML>
+<video src="/lib/exe/fetch.php?media=prog:html:rabbit320.webm" controls>
+  <p>
+    Your browser doesn't support HTML video. Here is a
+    <a href="/lib/exe/fetch.php?media=prog:html:rabbit320.webm">link to the video</a> instead.
+  </p>
+</video>
+</HTML> |
+Il est aussi possible de mettre plusieurs formats de vidéo :
+<code html>
+<video controls>
+  <source src="rabbit320.mp4" type="video/mp4" />
+  <source src="rabbit320.webm" type="video/webm" />
+  <p>
+    Your browser doesn't support this video. Here is a
+    <a href="rabbit320.mp4">link to the video</a> instead.
+  </p>
+</video>
+</code>
+Liste des attributs :
+<code html>
+<video
+  controls
+  width="400"
+  height="400"
+  autoplay
+  loop
+  muted
+  preload="auto"
+  poster="poster.png">
+  <source src="/lib/exe/fetch.php?media=prog:html:rabbit320.webm" type="video/webm" />
+  <p>
+    Your browser doesn't support this video. Here is a
+    <a href="rabbit320.mp4">link to the video</a> instead.
+  </p>
+</video>
+</code>
+  * ''<track>'' : ajout des sous-titres
+On peut utiliser le format ''vtt''.
+<code>
+WEBVTT
+:00:00.000 --> 00:00:12.000
+<v Test>[Test]</v>
+NOTE This is a comment and must be preceded by a blank line
+:00:18.700 --> 00:00:21.500
+This blade has a dark past.
+:00:22.800 --> 00:00:26.800
+It has shed much innocent blood.
+</code>
+Les numéros 0/1/2 s'incrémentent pour chaque texte.
+Il est possible de mettre plusieurs ''track'', une pour chaque sous-titre.
+| <code html>
+<video controls>
+  <source src="example.webm" type="video/webm" />
+  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish" />
+</video>
+</code> | <HTML>
+<video controls>
+  <source src="/lib/exe/fetch.php?media=prog:html:rabbit320.webm" type="video/webm" />
+  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish" />
+</video>
+</HTML> |
+====Audio====
+  * ''%%<audio>%%''
+La syntaxe est proche de ''%%<video>%%''. Les attributs sont les mêmes sauf ''height'', ''width'' et ''poster'' qui n'existent pas.
+| <code html>
+<audio controls>
+  <source src="viper.mp3" type="audio/mp3" />
+  <source src="viper.ogg" type="audio/ogg" />
+  <p>
+    Your browser doesn't support this audio file. Here is a
+    <a href="viper.mp3">link to the audio</a> instead.
+  </p>
+</audio>
+</code> | <HTML>
+<audio controls>
+  <source src="viper.mp3" type="audio/mp3" />
+  <source src="viper.ogg" type="audio/ogg" />
+  <p>
+    Your browser doesn't support this audio file. Here is a
+    <a href="viper.mp3">link to the audio</a> instead.
+  </p>
+</audio>
+</HTML> |
+====Contenu externe====
+  * ''<iframe>'' : affiche du contenu externe.
+| <code html>
+<iframe width="560" height="315"
+src="https://www.youtube-nocookie.com/embed/T3twGCdofGA?si=50WCDE7BqTocjyY7"
+title="YouTube video player" frameborder="0"
+allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
+picture-in-picture; web-share" allowfullscreen></iframe>
+</code> | <HTML>
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/T3twGCdofGA?si=50WCDE7BqTocjyY7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+</HTML> |
+Attributs sans commentaire : ''width'', ''height'' et ''allowfullscreen''.
+''sandbox'' : toujours le mettre quand le widget est compatible (donc pas Google).
+  * ''<object>''
+| <code html>
+<object data="mypdf.pdf" type="application/pdf" width="800" height="1200">
+  <p>
+    You don't have a PDF plugin, but you can
+    <a href="mypdf.pdf">download the PDF file. </a>
+  </p>
+</object>
+</code> | <HTML>
+<object data="/lib/exe/fetch.php?media=doc:fs:fat_specs_1.03.pdf" type="application/pdf" width="800" height="1200">
+  <p>
+    You don't have a PDF plugin, but you can
+    <a href="mypdf.pdf">download the PDF file. </a>
+  </p>
+</object>
+</HTML> |
+Il existe aussi ''<embed>'' pour faire la même chose c'est l'ancienne syntaxe.
+=====Données=====
+  * ''<table>'' (tableau) avec ''<tr>'' (ligne / row) et ''<td>'' (cellule / data).
+| <code html>
+<table>
+  <tr>
+    <td>Hi, I'm your first cell.</td>
+    <td>I'm your second cell.</td>
+  </tr>
+  <tr>
+    <td>I'm your third cell.</td>
+    <td>I'm your fourth cell.</td>
+  </tr>
+</table>
+</code> | <HTML>
+<table>
+  <tr>
+    <td>Hi, I'm your first cell.</td>
+    <td>I'm your second cell.</td>
+  </tr>
+  <tr>
+    <td>I'm your third cell.</td>
+    <td>I'm your fourth cell.</td>
+  </tr>
+</table>
+</HTML> |
+Les entêtes ''th'' sont des cellules, pas des lignes ou des colonnes.
+Il est aussi possible de fusionner les cellules et colonnes avec ''rowspan'' et ''colspan''.
+| <code html>
+<table>
+  <tr>
+    <th colspan="2">Animals</th>
+  </tr>
+  <tr>
+    <th colspan="2">Hippopotamus</th>
+  </tr>
+  <tr>
+    <th rowspan="2">Horse</th>
+    <td>Mare</td>
+  </tr>
+  <tr>
+    <td>Stallion</td>
+  </tr>
+  <tr>
+    <th colspan="2">Crocodile</th>
+  </tr>
+  <tr>
+    <th rowspan="2">Chicken</th>
+    <td>Hen</td>
+  </tr>
+  <tr>
+    <td>Rooster</td>
+  </tr>
+</table>
+</code> | <HTML>
+<table>
+  <tr>
+    <th colspan="2">Animals</th>
+  </tr>
+  <tr>
+    <th colspan="2">Hippopotamus</th>
+  </tr>
+  <tr>
+    <th rowspan="2">Horse</th>
+    <td>Mare</td>
+  </tr>
+  <tr>
+    <td>Stallion</td>
+  </tr>
+  <tr>
+    <th colspan="2">Crocodile</th>
+  </tr>
+  <tr>
+    <th rowspan="2">Chicken</th>
+    <td>Hen</td>
+  </tr>
+  <tr>
+    <td>Rooster</td>
+  </tr>
+</table>
+</HTML> |
+Enfin, il est possible de changer le style de chaque colonne avec ''colgroup'' et ''col''.
+| <code html>
+<table>
+  <colgroup>
+    <col span="2">
+    <col style="background-color:#97DB9A;">
+    <col style="width:42px;">
+    <col style="background-color:#97DB9A;">
+    <col style="background-color:#DCC48E; border:4px solid #C1437A;">
+    <col span="2" style="width:42px;">
+  </colgroup>
+  <tr>
+    <td>&nbsp;</td>
+    <th>Mon</th>
+    <th>Tues</th>
+    <th>Wed</th>
+    <th>Thurs</th>
+    <th>Fri</th>
+    <th>Sat</th>
+    <th>Sun</th>
+  </tr>
+</table>
+</code> | <HTML>
+<table>
+  <colgroup>
+    <col span="2">
+    <col style="background-color:#97DB9A;">
+    <col style="width:42px;">
+    <col style="background-color:#97DB9A;">
+    <col style="background-color:#DCC48E; border:4px solid #C1437A;">
+    <col span="2" style="width:42px;">
+  </colgroup>
+  <tr>
+    <td>&nbsp;</td>
+    <th>Mon</th>
+    <th>Tues</th>
+    <th>Wed</th>
+    <th>Thurs</th>
+    <th>Fri</th>
+    <th>Sat</th>
+    <th>Sun</th>
+  </tr>
+  <tr>
+    <th>1st period</th>
+    <td>English</td>
+    <td>&nbsp;</td>
+    <td>&nbsp;</td>
+    <td>German</td>
+    <td>Dutch</td>
+    <td>&nbsp;</td>
+    <td>&nbsp;</td>
+  </tr>
+</table>
+</HTML> |
+Utiliser ''<caption>'' pour ajouter un titre à la table.
+Il est aussi possible de mettre les lignes d'entête dans un ''<thead>'', les lignes de bas de tableau dans un ''<tfoot>'' et les lignes restants dans un ''<tbody>''.
+Enfin, il est possible d'expliciter les entêtes des lignes et colonnes avec l'attribut ''scope=%%"col"%%'' ou ''scope=%%"row"%%''. Si des cellules d'entête sont fusionnées avec ''colspan'' ou ''rowspan'', il faut utiliser ''colgroup'' et ''rowgroup''.
+| <code html>
+<table>
+  <caption>Titre</caption>
+  <thead>
+    <tr>
+      <td>&nbsp;</td>
+      <th scope="col">Mon</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1st period</th>
+      <td>English</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <td>Dernier1</td>
+      <th scope="col">Dernier2</th>
+    </tr>
+  </tfoot>
+</table>
+</code> | <HTML>
+<table>
+  <caption>Titre</caption>
+  <thead>
+    <tr>
+      <td>&nbsp;</td>
+      <th scope="col">Mon</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1st period</th>
+      <td>English</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <td>Dernier1</td>
+      <th scope="col">Dernier2</th>
+    </tr>
+  </tfoot>
+</table>
+</HTML> |
+=====Exemples=====
+{{ prog:html:mozilla-syntaxe-exemple.html |Syntaxe Mozilla}} [[https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter|Marking up a letter]]
+{{ :prog:html:mozilla-structure-exemple.html |structure Mozilla}} [[https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content|Structuring a page of content]]
+=====Cas particuliers=====
+  * html invalide
+Si l'arbre html est invalide, le navigateur va faire des modifications (pouvant varier en fonction des navigateurs) pour rendre le XML valide.
+Il existe des validateurs HTML : [[https://validator.w3.org/|The W3C Markup Validation Service]].
+Exemple :
+<code html>
+<p>What causes errors in HTML?
+<ul>...
+</code>
+va devenir
+<code html>
+<p>What causes errors in HTML?</p>
+<ul></code>