Médiaforma

All posts in HTLM5 / CSS3

Cliquez sur une des images :

Cette formation accompagne le Guide de survie HTML5/CSS3 et le complète en proposant des vidéos pour vous aider dans vos développements.




Ce code nécessite un navigateur compatible HTML5/CSS3. Dans le cas contraire, les réglages n’auront aucun effet.

Type

Start Color – Red
Start Color – Green
Start Color – Blue
Start Horiz Pos
Start Vert Pos
Start Radial
Angle (Moz lin)
End Color – Red
End Color – Green
End Color – Blue
End Horiz Pos
End Vert Pos
End Radial

Déplacez les curseurs ou modifiez le contenu des zones de texte pour modifier le gradient affiché dans la zoine de rendu et générer le code CSS …

Si rien ne se passe, cela signifie que votre navigateur n’est pas compatible HTML5/CSS3.



Ce code nécessite un navigateur compatible HTML5/CSS3. Dans le cas contraire, la bordure de l’image ne sera pas modifiée.

Style
Width
Red
Green
Blue
Radius-topleft
Radius-topright
Radius-bottomleft
Radius-bottomright

Le code CSS à utiliser

Déplacez les curseurs ou modifiez le contenu des zones de texte pour modifier la bordure de l’image et générer le code CSS …

Si rien ne se passe, cela signifie que votre navigateur n’est pas compatible HTML5/CSS3.


Voici deux générateurs de code CSS3 pour vous aider dans vos développements :

cliquez ici pour accéder au générateur de bordures CSS3

cliquez ici pour accéder au générateur de gradients CSS3


Ca y est, la formation vidéo au HTML5/CSS3 est disponible. C’est véritablement le plus court chemin pour apprendre le standard de développement de demain. Cliquez sur l’image pour connaître le contenu de la formation et prévisualiser gratuitement une de ses vidéos.


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>


L’élément audio

Tester le code


<!DOCTYPE HTML>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>L'élément audio</title>
  </head>

  <body>
    <audio controls preload="auto" autobuffer>
      <source src="son.ogg" type="audio/ogg">
      <source src="son.aac" type="audio/aac">
      <source src="son.mp3" type="audio/mp3">
      <source src="son.wav" type="audio/wav">
      <source src="son.aiff" type="audio/aiff">
      <source src="son.au" type="audio/au">
      <a href="son.mp3">Télécharger <cite>le commentaire audio au format mp3</cite></a>
    </audio>
  </body>
</html>

L’élément video

Tester le code


<!DOCTYPE HTML>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>L'élément video</title>
  </head>
  <body>
    <video controls>
      <source src="https://www.mediaforma.com/win7/videx/nettoyage-disque.mp4" type="video/mp4" />
      <source src="https://www.mediaforma.com/win7/videx/nettoyage-disque.ogg" type="video/ogg" />
      <object width="800" height="600" type="application/x-shockwave-flash" data="https://www.mediaforma.com/win7/videx/nettoyage-disque.swf">
        <param name="movie" value="https://www.mediaforma.com/win7/videx/nettoyage-disque.ogg" />
        <param name="flashvars" value="controlbar=over&image=https://www.mediaforma.com/win7/videx/nettoyer-disque.jpg&file=https://www.mediaforma.com/win7/videx/nettoyage-disque.mp4" type="video/mp4" />
        <img src="https://www.mediaforma.com/win7/videx/nettoyer-disque.jpg" width="640" height="360" alt="Nettoyage du disque"
           title="Le navigateur ne supporte pas la balise ≶video>. Téléchargez la vidéo en cliquant sur le lien ci-dessous" />
      </object>
      <p><a href="https://www.mediaforma.com/win7/videx/nettoyage-disque.mp4">Télécharger la vidéo</a>.</p>
    </video>
  </body>
</html>

L’élément canvas

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>L'élément canvas</title>
    <script>
      function init()
      {
        var elem = document.getElementById('cannevas');
        if (!elem)
        {
          return;
        }

        var context = elem.getContext('2d');
        if (!context)
        {
          return;
        }
        context.fillStyle = '#ff0 ';
        context.fillRect(0, 0, 150, 100);
      }
    </script>
  </head>

  <body onload="init();">
    <canvas id="cannevas" width="400" height="250">
      Votre navigateur ne supporte pas la balise HTML5 <canvas>
    </canvas>
  </body>
</html>

Les méthodes de tracé 2D dans un canevas

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Tracé 2D dans un cannevas</title>
    <script>
      function trace1()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.fillStyle = '#f00 ';
        context.fillRect(10,10,150,150);
      }
      function trace2()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.lineWidth = 1;
        context.strokeStyle = '#00f ';
        context.strokeRect(10,10,150,150);
      }
      function trace3()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.fillStyle = '#f00 ';
        context.fillRect(10,10,150,150);
        context.clearRect(20,20,100,60);
      }
      function trace4()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.strokeStyle = '#00f';
        context.lineWidth = 10;
        context.lineCap = 'round';
        context.lineJoin = 'round';
        context.beginPath();
        context.moveTo(30,30);
        context.lineTo(130,50);
        context.lineTo(90,110);
        context.lineTo(70,30);
        context.lineTo(35,130);
        context.closePath();
        context.stroke();
      }
      function trace5()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.strokeStyle = '#00f';
        context.lineWidth = 5;
        context.lineCap = 'round';
        context.lineJoin = 'round';
        context.beginPath();
        context.moveTo(30,30);
        context.rect(30,30,130,130);
        context.stroke();
      }
      function trace6()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.strokeStyle = '#00f';
        context.lineWidth = 10;
        context.lineCap = 'round';
        context.lineJoin = 'round';
        context.beginPath();
        context.moveTo(30,30);
        context.lineTo(130,50);
        context.lineTo(90,110);
        context.lineTo(70,30);
        context.lineTo(35,130);
        context.closePath();
        context.fill();
      }
      function trace7()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.fillStyle = '#00f';
        context.beginPath();
        context.arc(80,80,60,0,2*Math.PI, false);
        context.fill();
      }
      function trace8()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.fillStyle = '#0f0';
        context.beginPath();
        context.arc(80,80,60,0,Math.PI, false);
        context.fill();
      }
      function trace9()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.linewidth = 10;
        context.beginPath();
        context.moveTo(20,20);
        context.bezierCurveTo(20,100, 90,10, 150, 150);
        context.stroke();
      }
      function trace10()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,180,180);
        context.linewidth = 10;
        context.beginPath();
        context.moveTo(20,20);
        context.quadraticCurveTo(20,100, 150, 150);
        context.stroke();
      }
    </script>
  </head>

  <body>
    <canvas id="cannevas" width="200" height="190" style="border: dotted;">
      Votre navigateur ne supporte pas la balise HTML5 <canvas>
    </canvas>
    <br>
    <button onclick="trace1()">Carré rouge</button>
    <button onclick="trace2()">Carré vide à bordure bleue</button>
    <button onclick="trace3()">Effacement d'une zone rectangulaire</button>
    <button onclick="trace4()">Tracé d'un chemin</button>
    <button onclick="trace5()">Tracé rectangulaire</button>
    <button onclick="trace6()">Remplissage d'un chemin</button>
    <button onclick="trace7()">Cercle bleu</button>
    <button onclick="trace8()">Arc de cercle vert</button>
    <button onclick="trace9()">Courbe de Bézier</button>
    <button onclick="trace10()">Courbe quadratique</button>
  </body>
</html>

Des images dans un canevas

Exemple 1

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Des images dans un cannevas</title>
    <script>
      function init()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        var img = new Image();
        img.onload = function()
        {
          context.drawImage(img,0,0);
        }
        img.src = 'fbas.png';
      }
    </script>
  </head>

  <body onload="init();">
    <canvas id="cannevas" width="250" height="200" style="border: dotted;">
      Votre navigateur ne supporte pas la balise HTML5 <canvas>
    </canvas>
  </body>
</html>

Exemple 2

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Des images dans un cannevas</title>
    <script>
      function init()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        img.onload = function()
        {
          for (var i=0;i<3;i++)
          {
           for (var j=0;j<2;j++)
           {
           context.drawImage(img,j*50,i*38,50,38);
           }
          }
        }
        img.src = 'fbas.png';
      }
    </script>
  </head>

  <body onload="init();">
    <canvas id="cannevas" width="250" height="200" style="border: dotted;">
      Votre navigateur ne supporte pas la balise HTML5 <canvas>
    </canvas>
  </body>
</html>

Exemple 3

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Des images dans un cannevas</title>
    <script>
      function init()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.drawImage(document.getElementById('cadre'), 0, 0)
        context.drawImage(document.getElementById('image'), 100, 300, 400, 400, 50, 40, 300, 370);
      }
    </script>
  </head>

  <body onload="init();">
    Résultat :<br>
    <canvas id="cannevas" width="400" height="440">
      Votre navigateur ne supporte pas la balise HTML5 <canvas>
    </canvas>
    <br>A partir de ces images :<br>
    <img src="cadre.png" id="cadre" width="200" height="300">
    <img src="elephant.jpg" id="image" width="170" height="270">
  </body>
</html>

Du texte dans un canevas

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Du texte dans un cannevas</title>
    <script>
      function init()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.fillStyle = '#f0f';
        context.font = 'italic 30px Algerian';
        context.textBaseline = 'top';
        context.fillText ('Un simple texte', 0, 0);
        context.strokeStyle = '#0f0';
        context.font = 'bold 30px Algerian';
        context.strokeText('Un simple texte', 0, 50);
      }
    </script>
  </head>

  <body onload="init();">
    <canvas id="cannevas" width="350" height="200" style="border: dotted;">
      Votre navigateur ne supporte pas la balise HTML5 <canvas>
    </canvas>
  </body>
</html>

Des effets spéciaux dans un canevas

Tester le code


Transformations
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Transformations dans un cannevas</title>
    <script>
      function trace1()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        var gradienthoriz = context.createLinearGradient(0, 0, 300, 0);
        gradienthoriz.addColorStop(0,"white");
        gradienthoriz.addColorStop(0.5,"red");
        context.clearRect(0,0,190,190);
        context.fillStyle = gradienthoriz;
        context.fillRect(10,10,150, 150);
      }
      function trace2()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,190,190);
        context.fillStyle = "red";
        context.shadowOffsetX = 5;
        context.shadowOffsetY = 5;
        context.shadowBlur = 4;
        context.shadowColor = 'rgba(255, 0, 0, 0.5)';
        context.fillRect(10,10,150, 150);
      }
      function trace3()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,190,190);
        var img = new Image();
        img.src = 'fbas.png';
        context.drawImage(img,0,0);
        context.fillStyle = 'rgba(255, 0, 0, 0.5)';
        context.fillRect(10,10,150,150);
      }
      function trace4()
      {
        var elem = document.getElementById('cannevas');
        var context = elem.getContext('2d');
        context.clearRect(0,0,190,190);
        var img = new Image();
        img.src = 'fbas.png';
        context.rotate(45 * Math.PI / 180);
        context.drawImage(img,60,-100);
      }
    </script>
  </head>
  <body>
    <canvas id="cannevas" width="200" height="190" style="border: dotted;">
      Votre navigateur ne supporte pas la balise HTML5 <canvas>
    </canvas>
    <br>
    <button onclick="trace1()">Gradient</button>
    <button onclick="trace2()">Ombre portée</button>
    <button onclick="trace3()">Transparence</button>
    <button onclick="trace4()">Transformation</button>
  </body>
</html>

Graphiques vectoriels SVG

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Utilisation d'un fichier SVG</title>
  </head>
  <body>
    <object type="image/svg+xml" data="departements.svg" width="800" height="600">
      <p>Votre navigateur ne supporte pas le SVG.</p>
    </object>
  </body>
</html>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg>
  ...
  <path id="dp11" fill="#ffffff" d="M 274,438 L 273,442 L 270,440 L 266,440 L 266,439 L 264,439 L 260,441 L 259,438 L 256,441 L 257,443 L 254,444 L 253,447 L 251,448 L 253,451 L 252,452 L 262,457 L 263,464 L 263,467 L 264,472 L 259,472 L 257,474 L 264,479 L 267,477 L 272,482 L 271,483 L 272,483 L 280,479 L 278,476 L 278,473 L 296,473 L 296,470 L 300,468 L 305,472 L 308,473 L 307,468 L 308,461 L 305,461 L 303,458 L 305,456 L 308,459 L 311,457 L 313,455 L 313,453 L 311,453 L 310,450 L 307,450 L 305,446 L 303,446 L 301,445 L 301,442 L 300,443 L 300,445 L 298,445 L 298,448 L 294,450 L 292,446 L 290,447 L 288,446 L 287,443 L 288,441 L 288,439 L 287,439 L 281,439 L 275,438 L 274,438 z " />
  ...
  <text x="549" y="523" id="tp0">2a</text>
  <text x="557" y="483" id="tp20">2b</text>
  ...
</svg>