Médiaforma

Guide de survie – HTML5 avancé

Print Friendly, PDF & Email

Barres de progression

Exemple 1

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>L'élément progress</title>
    <style>
      label
      {
        display: inline-block;
        width: 200px;
      }
    </style>
    <script>
      function init()
      {
        var el = document.getElementById('progress-js');
        el.setAttribute("value","65");
      }
    </script>
  </head>
  <body onload="init();">
    <ul>
      <li>
        <label>Indeterminé</label>
        <progress max="100"></progress>
      </li>
      <li>
        <label>Progress = 30%</label>
        <progress max="10" value="3"></progress>
      </li>
      <li>
        <label>Progress = 100%</label>
        <progress max="2345" value="2345"></progress>
      </li>
      <li>
        <label>Progress contrôlé par Javascript</label>
        <progress max="100" id="progress-js"></progress>
      </li>
    </ul>
   </body>
</html>

Exemple 2

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>L'élément progress</title>
    <style>
      label
      {
        display: inline-block;
        width: 200px;
      }
      meter { width: 200px; }
    </style>
    <script>
      function init()
      {
        var el = document.getElementById('meter-js');
        el.setAttribute("value","65");
      }
    </script>
  </head>
  <body onload="init();">
    <ul class="compact">
      <li>
        <label>Indeterminé</label>
        <meter></progress>
      </li>
      <li>
        <label>Meter = 0.5</label>
        <meter value="0.5"></meter>
      </li>
      <li>
        <label>Meter = 0.2 avec low = 0.2</label>
        <meter value="0.2" low="0.2"></meter>
      </li>
      <li>
        <label>Meter = maximum</label>
        <meter value="1"></meter>
      </li>
      <li>
        <label>Meter contrôlé par Javascript</label>
        <meter min="0" max="100" id="meter-js"></meter>
      </li>
    </ul>
   </body>
</html>

MathML et HTML5

Exemple 1

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>MathML dans HTML5</title>
  </head>
  <body>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <mrow>
        <mi>a</mi>
        <msup>
          <mi>x</mi>
          <mn>2</mn>
        </msup>
        <mo>+</mo>
        <mi>b</mi>
        <mi>x<mi>
        <mo>+</mo>
        <mi>c</mi>
        <mo>=</mo>
        <mn>0</mn>
      </mrow>
    </math>
  </body>
</html>

Exemple 2

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>MathML dans HTML5</title>
  </head>
  <body>
    Equation :<br>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <mrow>
        <mi>a</mi>
        <msup>
          <mi>x</mi>
          <mn>2</mn>
        </msup>
        <mo>+</mo>
        <mi>b</mi>
        <mi>x<mi>
        <mo>+</mo>
        <mi>c</mi>
        <mo>=</mo>
        <mn>0</mn>
      </mrow>
    </math>
    <p>Solution :<br>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <mi>x</mi>
      <mo>=</mo>
      <mfrac>
        <mrow>
          <mo>-</mo>
          <mi>b</mi>
          <mo>±</mo>
          <msqrt>
           <msup>
           <mi>b</mi>
           <mn>2</mn>
           </msup>
           <mo>-</mo>
           <mn>4</mn>
           <mi>a</mi>
           <mi>c</mi>
          </msqrt>
        </mrow>
        <mrow>
          <mn>2</mn>
          <mi>a</mi>
        </mrow>
      </mfrac>
    </math>
</body>
</html>

WAI-ARIA et HTML5

Tester le code


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Un document HTML5 avec en-tête, bas de page, menu, zone annexe et Zone de contenu</title>
    <link rel="stylesheet" href="style.css">
    <script src="Creation-elements-HTML5.js"></script>
  </head>
  <body role="document">
    <header role="banner">
      <h1>En-tête du document</h1>
      Texte de l'en-tête
    </header>
    <nav role="navigation">
      <h2>Menu</h2>
      <ul>
        <li><a href=”page1.htm”>Page 1</a></li>
        <li><a href=”page2.htm”>Page 2</a></li>
        <li><a href=”page3.htm”>Page 3</a></li>
      </ul>
      <br><br><br>
    </nav>
    <aside role="complementary">
      Texte affiché dans la partie droite de la page avec la balise <aside><br><br>
    </aside>
    <article>
      <h2>Premier article</h2>
        <p>Texte du premier article</p>
    </article>
    <article>
      <h2>Deuxième article</h2>
        <p>Texte du deuxième article</p>
    </article>
    <footer role="contentinfo">
      <p>Copyright et e-mail du Webmaster</p>
    </footer>
  </body>
</html>

Microformats

hCard

<div>
   <img src="www.monsite.com/maphoto.jpg" />
   <strong>Michel Martin</strong>
   Auteur chez Pearson
   47 bis, rue des Vinaigriers
   75010 Paris

</div>
<div class="vcard">
   <img class="photo" src="www.monsite.com/maphoto.jpg" />
   <strong class="fn">Michel Martin</strong>
   <span class="title">Auteur</span> chez <span class="org">Pearson</span>
   <span class="adr">
      <span class="street-address">47 bis, rue des Vinaigriers</span>
      <span class="postal-code">75010</span>
      <span class="locality">Paris</span>
   </span>
</div>

hCalendar

<div id="hcalendar-Conférence-Salle-C12" class="vevent">
  <a class="url" href=”http://www.microsoft.com/fr/fr/default.aspx”>
  <abbr class="dtstart" title="2010-12-10T09:00+01:0000">December 10, 2010 9h00</abbr> –
  <abbr class="dtend" title="2010-12-10T23:00+01:00">23:00</abbr> :
  <span class="summary">Conférence Salle C12</span> au
  <span class="location">Campus Microsoft</span></a>
  <div class="description">Office 365</div>
</div>

hReview

<div>
  <span>5 étoiles sur 5</span>
  <h4>Windows 7 Facile est très efficace</h4>
  <span>Critique : <span>Zorbox</span> - 10 Décembre 2010</span>
  <blockquote>
  <p>Le Guide du débutant HTML5/CSS3, des éditions Pearson est un excellent guide pour tous ceux qui veulent découvrir les possibilités de ces langages.
  Il propose des sujets proches des utilisateurs et montre comment les mettre en oeuvre en proposant du code directement utilisable. A conseiller à tous ceux qui veulent bien commencer avec HTML5/CSS3. </p>
  </blockquote>
  <p>Date de visite : <span>Décembre 2010</span></p>
</div>
<div class="hreview">
  <span><span class="rating">5</span> étoiles sur 5</span>
  <h4 class="summary">Le Guide de survie HTML5/CSS3 est très efficace</h4>
  <span class="reviewer vcard">Critique : <span class="fn">Zorbox</span> -
  <abbr class="dtreviewed" title="20101210T2300-0700">10 Décembre 2010</abbr></span>
  <div class="description item vcard">
  <p>Le Guide du débutant HTML5/CSS3, des <span class="fn org">éditions Pearson</span> est un excellent guide pour tous ceux qui veulent découvrir les possibilités de ces langages.
  Il propose des sujets proches des utilisateurs et montre comment les mettre en oeuvre en proposant du code directement utilisable. A conseiller à tous ceux qui veulent bien commencer avec HTML5/CSS3.</p>
  </blockquote>
  <p>Date de visite : <span>Décembre 2010</span></p>
</div>

Media Queries

Tester le code


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Media Queries</title>
    <style>
      div
      {
        border: dotted 1px #666;
        padding: 5px 10px;
        margin: 40px;
      }
      @media (max-device-width: 480px)
      {
        .iphone
        {
          background: red;
        }
      }
      @media (max-width: 600px)
      {
        .inf600
        {
          background: red;
        }
      }
      @media (min-width: 900px)
      {
        .sup900
        {
          background: red;
        }
      }
      @media (min-width: 600px) and (max-width: 900px)
      {
        .de600a900
        {
          background: red;
        }
      }
    </style>
  </head>
  <body>
    <div class="iphone">Cette div apparaît en rouge si la largeur maximale de l'écran est de 480 pixels</div>
    <div class="inf600">Cette div apparaît en rouge si la largeur de la fenêtre est inférieure à 600 pixels</div>
    <div class="de600a900">Cette div apparaît en rouge si la largeur de la fenêtre est comprise entre 600 et 900 pixels</div>
    <div class="sup900">Cette div apparaît en rouge si la largeur de la fenêtre est supérieure à 900 pixels</div>
  </body>
</html>

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

No comments yet.