LG

Outils pour utilisateurs

Outils du site

Piste :
prog:html

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
prog:html [2024/03/12 08:12] – [Images] : ajout de sizes pour img rootprog:html [2024/11/03 23:33] (Version actuelle) – [Paragraphes] : oublie de / pour fermer un tag root
Ligne 148: Ligne 148:
     <ul>     <ul>
       <li>liste non ordonnée imbriquée</li>       <li>liste non ordonnée imbriquée</li>
-    <ul>+    </ul>
   </li>   </li>
-<ol>+</ol>
 </code> | <HTML> </code> | <HTML>
 <ol> <ol>
Ligne 156: Ligne 156:
     <ul>     <ul>
       <li>liste non ordonnée imbriquée</li>       <li>liste non ordonnée imbriquée</li>
-    <ul>+    </ul>
   </li>   </li>
-<ol>+</ol>
 </HTML> | </HTML> |
  
Ligne 168: Ligne 168:
   <dd>Description 1</dd>   <dd>Description 1</dd>
   <dd>Description 2</dd>   <dd>Description 2</dd>
-<dl>+</dl>
 </code> | <HTML> </code> | <HTML>
 <dl> <dl>
Ligne 174: Ligne 174:
   <dd>Description 1</dd>   <dd>Description 1</dd>
   <dd>Description 2</dd>   <dd>Description 2</dd>
-<dl>+</dl>
 </HTML> | </HTML> |
  
Ligne 342: Ligne 342:
  
 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. 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,
 +           100vw">
 +  <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,
 +           500px">
 +  <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.   * ''<figure>'' et ''<figcaption>'' : ajoute un texte lié à l'image.
Ligne 538: Ligne 574:
  
 Il existe aussi ''<embed>'' pour faire la même chose c'est l'ancienne syntaxe. 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===== =====Exemples=====
  
prog/html.1710227559.txt.gz · Dernière modification : 2024/03/12 08:12 de root