I. Introduction▲
HTML5 (HyperText Markup Language 5) est la dernière révision majeure du langage HTML. Il s'agit du format de données conçu pour représenter les pages Web.
Vous allez tout savoir ou presque pour utiliser toutes les nouvelles possibilités d'HTML5.
Avec la méthode "Développement Facile", vous allez apprendre à développer des sites Web à la fois attrayants et robustes en HTML5.
Retrouvez un extrait de la formation gratuite HTML5 Facile, composée de plus de 30 cours professionnels pour vous aider à progresser rapidement avec la maîtrise du langage HTML5.
II. Comment créer une page HTML5▲
Ce premier cours vous apprend comment créer une page HTML5,
avec le doctype, la première balise html, l'entête, l'encodage et le corps de la page Web.
C'est parti pour le cours vidéo ci-dessous.
Et voici l'exemple de code HTML5 décrit dans la vidéo.
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
-->
<title>HTML5</title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
III. Comment mettre en forme rapidement votre texte avec HTML5▲
Dans ce cours vidéo, apprenez à effectuer la mise en forme de votre texte en HTML5.
Passez votre texte en gras ou en italique. Apprenez à le mettre en exposant ou en indice.
Enfin apprenez à ajouter des commentaires dans votre code HTML5.
Tout est dans le cours vidéo ci-dessous.
Ci-dessous, le code vu dans la vidéo
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
-->
<title>HTML5</title>
<meta charset="UTF-8">
</head>
<body>
<p>
<!-- début du contenu de la page -->
<b>HTML5</b> sur la première ligne <br /><br />
<b>CSS</b> sur la deuxième ligne !<br /><br />
<i><b>HTML5</b></i> sur la première ligne <br /><br />
<b>CSS</b> sur la deuxième ligne !<br /><br />
<b>HTML5</b> sur la première ligne <br />
<del>CSS</del> sur la deuxième ligne ! <br /><br />
(a + b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup> <br /> H<sub>2</sub>O <br /><br />
<i>HTML5</i> sur la première ligne <br />La balise <i> ... </i> met du texte en italique.
</p>
</body>
</html>
IV. Comment mettre en forme rapidement votre texte avec CSS3▲
Dans la vidéo précédente vous avez appris à mettre en forme votre texte grâce au HTML5, vous allez à présent apprendre à le mettre en forme grâce à CSS3.
Avec CSS3 vous pourrez aller beaucoup plus loin dans la mise en forme de votre texte.
Gras, italique, couleur, taille de la police et bien d'autres éléments n'auront plus de secret pour vous.
Ci-dessous, l'exemple de code
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
-->
<title>HTML5</title>
<meta charset="UTF-8">
<style type="text/css">
h1 {color: #336699;}
#txtCenter { text-align: center;}
#txtSouligne { text-decoration: underline;}
span { font-weight: bold;margin: 30px; }
.txtItalic { font-style : italic;}
#title { font-size: 32px;}
div {margin: 30px;}
</style>
</head>
<body>
<h1>HTML5 en couleur sur la première ligne !</h1>
<span class="txtItalic">HTML5 en italique</span> sur la première ligne !
<span>HTML5 en gras</span> sur la première ligne !<br />
<div id="title">HTML5 32 pixels sur la première ligne !</div>
<div id="txtCenter">HTML5 centré sur la première ligne !</div>
<div id="txtSouligne">HTML5 souligné sur la première ligne !</div>
</body>
</html>
V. La méthode HTML5 pour définir les titres, citations, les listes, les paragraphes▲
Grâce à ce cours, organisez correctement vos pages en HTML5.
Vous pourrez ainsi définir les titres, les citations, les lites à puces, les paragraphes, etc.
Tout est dans le cours vidéos ci-dessous.
Le code de la vidéo ci-dessous
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
-->
<title>HTML5</title>
<meta charset="UTF-8">
<style type="text/css">
h1 {color: #336699;}
#txtCenter { text-align: center;}
#txtSouligne { text-decoration: underline;}
span { font-weight: bold;}
.txtItalic { font-style : italic;}
#title { font-size: 32px;}
</style>
</head>
<body>
<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
<p>Premier paragraphe avec beaucoup de texte. Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression</p>
<p>Deuxième paragraphe avec beaucoup de texte. Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
<blockquote>Créez des applications performantes dans votre langage de programmation.</blockquote>
<p>Développement Facile :</p>
<hr>
<p>Créez des applications performantes dans votre langage de programmation.</p>
Les langages web :
<ol>
<li>ActionScript</li>
<li>JavaScript</li>
<li>PHP</li>
<li>HTML5</li>
</ol>
Les langages web :
<ul>
<li>ActionScript</li>
<li>JavaScript</li>
<li>PHP</li>
<li>HTML5</li>
</ul>
Les langages web :
<ol>
<li>Les titres</li>
<li>Les listes des langages
<ul>
<li>ActionScript</li>
<li>JavaScript</li>
<li>PHP</li>
<li>HTML5</li>
</ul></li>
</ol>
</body>
</html>
VI. Découvrez les nouvelles balises HTML5 header section nav footer▲
De nouvelles balises HTML5 ont fait leur apparition pour vous simplifier la vie.
Découvrez les balises header, section, nav et footer dans le cours vidéo ci-dessous.
Ces balises vous permettent une meilleure présentation de votre page Web.
En bonus, une présentation des balises progress et mark.
Exemple de code ci-dessous
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
-->
<title>HTML5</title>
<meta charset="UTF-8">
</head>
<body>
<header>
<img src="07-logo.png" alt="07-logo">
<span>Phrase d'accueil du site</span>
<h1>Titre</h1>
<h2>Sous-Titre</h2>
</header>
<nav>
<ul>
<li><a href="">Accueil</a></li>
<li><a href="">Articles</a></li>
<li><a href="">Vidéos</a></li>
<li><a href="">Formations</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<section>
<h1>Titre de <mark>l'article</mark> de la page</h1>
<article>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices
diam.Lorem ipsum dolor sit amet, consectetuer adipiscing
elit...</p>
</article>
<progress value= "80" max="100">80%</progress>
</section>
<figure>
<img src="logo1.png" alt="">
<img src="logo2.png" alt="">
<figcaption>Les logos</figcaption>
</figure>
<aside>
<h3>Anciens Articles</h3>
<ul>
<li><a href="">Août 2013</a></li>
<li><a href="">Juillet 2013</a></li>
<li><a href="">Juin 2013</a></li>
<li><a href="">Mai 2013</a></li>
</ul>
</aside>
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
VII. Comment définir vos liens avec HTML5▲
Dans la vidéo suivante, vous apprendrez tout ce qu'il faut savoir pour définir les liens.
Vous saurez tout sur la balise <a> et ses différentes façons de l'utiliser.
Le code de la vidéo ci-dessous
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
-->
<title>HTML5</title>
<meta charset="UTF-8">
<style type="text/css">
h1 {color: #336699;}
#txtCenter { text-align: center;}
#txtSouligne { text-decoration: underline;}
span { font-weight: bold;}
.txtItalic { font-style : italic;}
#title { font-size: 32px;}
</style>
</head>
<body id="haut">
<header>
<span>Slogan d'accueil du site</span>
</header>
<p>Premier paragraphe avec beaucoup de texte. Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression</p>
<p>Deuxième paragraphe avec beaucoup de texte. Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
<p>Développement Facile :</p>
<hr>
<p>Créez des applications performantes dans votre langage de programmation.</p>
<a href="http://www.dev-facile.com/">Dev Facile</a><br /><br />
<a href="http://www.dev-facile.com/contact.htm">Contactez Dev Facile</a>
<a href="mailto:contact@dev-facile.com?subject=FormationHTML5">Nous contacter</a><br /><br />
<a href="mailto:contact@dev-facile.com?cc=matthieu@dev-facile.com">Nous contacter</a><br /><br />
<a href="mailto:contact@dev-facile.com?subject=FormationHTML5&cc=matthieu@dev-facile.com">Nous contacter</a><br /><br />
<p>Accéder à la suite : <a href="page2.htm" target="_blank">cliquez ici</a>.</p>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, <br /><br /><br /><br />quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. <br /><br /><br /><br />Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.<br /><br /><br /><br /><br /><br /><br /><br />
On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même.
<br /><br /><br /><br />L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte.
Du texte.' est qu'il possède une distribution de lettres plus <br /><br /><br /><br />ou moins normale, et en tout cas comparable avec celle du français standard.
De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum'<br /><br /><br /><br />
vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions <br /><br /><br /><br />sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes).</p>
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
<a href="#haut">Remonter en haut</a>
</footer>
</body>
</html>
VIII. Recevez gratuitement la formation "HTML5 Facile"▲
Si vous souhaitez aller beaucoup plus loin dans la création de site Web performants,
vous pouvez recevoir gratuitement la formation "HTML5 Facile" avec des cours pas à pas, accompagnés des codes source commentés.
Ainsi, vous progressez à votre rythme, avec un suivi personnalisé et individuel. Vous avez également la possibilité de poser toutes vos questions techniques sous chaque cours.
Cliquez simplement ici pour recevoir gratuitement la formation HTML5 FacileCliquez simplement ici pour recevoir gratuitement la formation HTML5 Facile
IX. Remerciements▲
Merci beaucoup à l'équipe de rédaction de Developpez.com de contribuer à la diffusion de ce tutoriel.
J'adresse également un merci tout particulier à Jacques Jeanjacques_jean pour sa relecture orthographique.
