Médiaforma

Guide de survie – Regroupement du contenu

Print Friendly, PDF & Email

Le concept de boîte

Tester le code


<!DOCTYPE html">
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Le concept de boîtes</title>
  </head>
  <body >
    <div style="width:250px; height=60px; margin: 20px; padding: 10px; background-color: yellow;">
    Ce texte est affiché à l'intérieur de la balise div
    </div>
  </body>
</html>

Les différents styles de listes HTML

Tester le code


<!DOCTYPE html">
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Styles de listes HTML</title>
  </head>
  <body>
    <b>Liste non ordonnée</b>
    <ul>
      <li>Premier élément</li>
      <li>Deuxième élément</li>
      <li>Troisième élément</li>
    </ul>
    <b>Liste ordonnée</b>
    <ol>
      <li>Premier élément</li>
      <li>Deuxième élément</li>
      <li>Troisième élément</li>
    </ol>
    <b>Liste de termes et de descriptions</b>
    <dl>
      <dt><dfn>Bit</dfn></dt>
      <dd>Information représentée par un symbole à deux valeurs généralement notées 0 et 1, associées aux deux états d'un dispositif.</dd>
      <dt><dfn>Octet</dfn></dt>
      <dd>Ensemble ordonné de huit éléments binaires traités comme un tout.</dd>
    </dl>
  </body>
</html>

Choisir le style d’une liste

Tester le code


<!DOCTYPE html">
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Différents styles de liste</title>
    <style>
      .rond {list-style-type: disc;}
      .carre {list-style-type: square;}
      .decimal: {list-style-type: decimal;}
    </style>
  </head>
  <body>
    <ul class="rond">
       <li>Premier élément</li>
       <li>Deuxième élément</li>
       <li>Troisième élément</li>
    </ul>
    <ul class="carre">
       <li>Premier élément</li>
       <li>Deuxième élément</li>
       <li>Troisième élément</li>
    </ul>
    <ol class="decimal">
       <li>Premier élément</li>
       <li>Deuxième élément</li>
       <li>Troisième élément</li>
    </ol>
  </body>
</html>

Des images à la place des puces

Tester le code


<!DOCTYPE html">
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Des images à la place des puces</title>
    <style>
      .puce {list-style-image: url(puce.gif);}
    </style>
 </head>
  <body>
    <ul class="puce">
       <li>Premier élément</li>
       <li>Deuxième élément</li>
       <li>Troisième élément</li>
    </ul>
  </body>
</html>

Des images centrées à la place des puces

Tester le code


<!DOCTYPE html">
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Des images centrées à la place des puces</title>
    <style>
      ul
      {
        list-style-type: none;
      }
      li
      {
        background-image: url(puce.gif);
        background-repeat: no-repeat;
        background-position: 0 -0.4em;
        padding-left: 3em;
        line-height:22px;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <ul>
       <li>Premier élément</li>
       <li>Deuxième élément</li>
       <li>Troisième élément</li>
    </ul>
  </body>
</html>

Légendage 1

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Eléments et légendes</title>
    <style>
      img, video, figcaption
      {
        display: block;
      }
    </style>
  </head>
  <body>
    <figure>
      <img src="grenouille.jpg" width="200px" border="1" />
      <figcaption>Légende de la figure 1</figcaption>
    </figure>

    <p>
    <figure>
      <img src="cabane.jpg" height="200px" border="1" />
      <figcaption>Légende de la figure 2</figcaption>
    </figure>

    <p>
    <figure>
      <video src="video1.mp4" width="200" border="1"></video>
      <figcaption>Légende de la vidéo 1</figcaption>
    </figure>

    <p>
    <figure>
      <video src="video2.mp4" width="200" border="1" ></video>
      <figcaption>Légende de la vidéo 2</figcaption>
    </figure>

  </body>
</html>

Légendage 2

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Eléments et légendes</title>
  </head>
  <body>
    <p>Le <a href="#1">listing 1</a> représente le code à utiliser pour afficher une vidéo en HTML5.</p>
    <figure id="1">
      <figcaption>Listing 1. Affichage d'une vidéo en HTML5.</figcaption>
      <pre><code>
        <video src="nom de la vidéo" width="largeur" height="hauteur">
        </video>
      </code></pre>
    </figure>

    <figure>
      <p>Si on venait à nous séparer,<br>
      Jamais je ne m'en remettrais,<br>
      Il fait si bon être à tes cotés,<br>
      Que plus rien ne semble mauvais.<br>
      Tu es ma joie de vivre,<br>
      Mon seul et unique bonheur,<br>
      Ton amour m'enivre,<br>
      Et fait chavirer mon coeur.</p>
      <figcaption><cite>Pour toi, mon amour éternel</cite> (extrait). Hubert</figcaption>
    </figure>
  </body>
</html>

Texte non proportionnel

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Balise pre</title>
  </head>
  <body>
    Ce code affiche une imagette sur laquelle le visiteur peut cliquer pour afficher la vidéo "Enregistrer le son du PC" :<br>
    <pre>
    <a href="https://www.mediaforma.com/uneminuteparjour/video/enregistrer-son-pc.php">
      <img src="https://www.mediaforma.com/uneminuteparjour/thumbs/enregistrer-son-pc.jpg" border=0>
    </a>
  </pre>

  <br><p>
  Ce code affiche une imagette sur laquelle le visiteur peut cliquer pour afficher la vidéo "Enregistrer le son du PC" :<br>
  <pre>
    <a href="https://www.mediaforma.com/uneminuteparjour/video/enregistrer-son-pc.php">
      <img src="https://www.mediaforma.com/uneminuteparjour/thumbs/enregistrer-son-pc.jpg" border=0>
    <a>
  </pre>
</body>
</html>

Citations

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Citations</title>
    <style>
      .avecstyle
      {
        font-family: "Courrier News", serif;
        border : 2px solid #000;
        margin: 10px 0 0 0;
        padding: 10px;
        background-color: #D4FEAE;
      }
    </style>
  </head>
  <body>
    <p>Cette citation de Lao Tseu provient du site <b>www.evene.fr</b> :
    <blockquote cite="www.evene.fr">
      Le sage équarrit sans blesser<br>
      Incline sans porter atteinte<br>
      Rectifie sans faire violence<br>
      Et resplendit sans aveugler.<br>
    </blockquote></p>
    Cette même citation est mise en forme avec un style CSS :
    <blockquote cite="www.evene.fr" class="avecstyle">
      Le sage équarrit sans blesser<br>
      Incline sans porter atteinte<br>
      Rectifie sans faire violence<br>
      Et resplendit sans aveugler.<br>
    </blockquote>
  </body>
</html>

Rupture thématique

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Rupture thématique</title>
    <style>
      .hrstyle1
      {
        text-align:left;
        margin-left: 30px;
        width:500px;
        height:30px;
        background: url(_fond.gif);
      }
    </style>
  </head>
  <body>
    Premier thème abordé dans le document
    <hr>
    Deuxième thème abordé dans le document
    <hr class="hrstyle1">
    Troisième thème abordé dans le document
  </body>
</html>

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.