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.
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 |
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 :
 |
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. |
<!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>
<!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>
<!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>
<!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>
<!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>
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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
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>
<!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>
Téléchargez gratuitement ce mini-dossier PDF dans votre boîte mail.