Différences

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

--- prog:html [2024/03/04 23:07] – Formattage du code root
+++ prog:html [2024/11/03 23:33] (Version actuelle) – [Paragraphes] : oublie de / pour fermer un tag root
@@ Ligne 148: / Ligne 148: @@
     <ul>
       <li>liste non ordonnée imbriquée</li>
-    <ul>
+    </ul>
   </li>
-<ol>
+</ol>
 </code> | <HTML>
 <ol>
@@ Ligne 156: / Ligne 156: @@
     <ul>
       <li>liste non ordonnée imbriquée</li>
-    <ul>
+    </ul>
   </li>
-<ol>
+</ol>
 </HTML> |
@@ Ligne 168: / Ligne 168: @@
   <dd>Description 1</dd>
   <dd>Description 2</dd>
-<dl>
+</dl>
 </code> | <HTML>
 <dl>
@@ Ligne 174: / Ligne 174: @@
   <dd>Description 1</dd>
   <dd>Description 2</dd>
-<dl>
+</dl>
 </HTML> |
@@ Ligne 327: / Ligne 327: @@
 Attribut ''alt'' : pour un texte alternatif décrivant l'image.
-Attribut ''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 ''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.
@@ Ligne 363: / Ligne 413: @@
   * ''<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> |