Comment rendre votre site web interactif avec du contenu multimédia en HTML5

Matthieu - Développement Facile

Formation sur le langage HTML5 pour ajouter du contenu multimédia à votre site web et le rendre interactif
À travers cinq cours complets en vidéo, accompagnés d'exemples de code source, vous allez apprendre à ajouter du contenu multimédia comme des images, des vidéos et du son.
Vous apprendrez également à maîtriser le potentiel des formulaires en HTML5.

Commentez cet article : Commentez ♪

- Titre : Comment rendre votre site web interactif avec du contenu multimédia en HTML5

- Auteur : Matthieu - Développement Facile

- Parution : 22 juin 2014

- Licence : Le contenu de cet article est rédigé par Développement Facile et est mis à disposition selon les termes de la Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 3.0 non transposé. Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright ® 2013 Developpez.com.

Sommaire

- I. Introduction

- II. Comment utiliser toutes les possibilités des images avec HTML5

- III. Comment ajouter un player audio HTML5

- IV. Comment ajouter un player vidéo HTML5

- V. Les nouveaux formulaires HTML5 - partie 1

- VI. Les nouveaux formulaires HTML5 - partie 2

- VII. Recevez gratuitement la formation « HTML5 Facile »

- VIII. Remerciements

I - Introduction

HTML5 (HyperText Markup Language 5) la dernière révision majeure du langage HTML permet aujourd'hui d'inclure facilement du contenu multimédia dans les pages web.
En utilisant une méthode de formation structurée, pas à pas et orientée pratique, vous pourrez rapidement réaliser de magnifique site web.

Avec la Méthode Développement Facile, vous allez apprendre à développer des sites web complets 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 utiliser toutes les possibilités des images avec HTML5

Dans cette vidéo, vous apprendrez à inclure des images dans votre page web.
Vous verrez d'abord les différents formats d'images utilisables,
puis vous rentrerez dans le vif du sujet avec la balise <img> et toutes ses options.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Ci-dessous l'exemple de code (remplacez 06-logo.png par votre propre image et placez-la dans le même répertoire que le code source)

<!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">
a {background-color: #E2A9F3;}
</style>

</head>

<body id="haut">

<header>
<span>Slogan d'accueil du site</span>
</header>

<img src="06-logo.png" width="150" height="150" alt="Logo Dev Facile" /> <br /><br />

<img src="06-logo.png" width="150" height="150" alt="Logo Dev Facile" style="border:3px dotted black;" /> <br /><br />

<a href="http://www.programmation-facile.com/">
&nbsp;&nbsp;&nbsp;&nbsp;<img src="06-logo.png" width="150" height="150" alt="Logo Dev Facile" style="border: none;" /> &nbsp;&nbsp;&nbsp;
</a><br /><br />

<a href="http://www.programmation-facile.com/"><img src="06-logo.png" width="150" height="150" alt="Logo Dev Facile" style="border: none;" /></a><br /><br />

<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
<a href="#haut">Remonter en haut</a>
</footer>
</body>
</html>

III - Comment ajouter un player audio HTML5

Dans cette vidéo, vous apprendrez à ajouter simplement et rapidement un player audio dans votre page web en HTML5.
Ici, vous verrez comment vous servir de la balise <audio> et de ses options. Dans un second temps, vous aborderez les différents formats audio disponibles. Enfin vous verrez comment utiliser la balise <source> pour gérer plusieurs fichiers audio.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Exemple de code ci-dessous (remplacez 10-jingle.xxx, par votre fichier audio préféré)

<!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>
fieldset { border : 2px solid #4040A4;
width : 550px;}
span {margin-right:24px;}
</style>
</head>
<body>

<audio controls preload>
<source src="10-jingle.ogg"/>
<source src="10-jingle.mp3"/>
<source src="10-jingle.acc"/>
Votre navigateur ne supporte pas la balise audio. </audio>

<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>

IV - Comment ajouter un player vidéo HTML5

Maintenant que vous avez appris à ajouter du contenu audio à votre site web, vous voudrez sûrement ajouter de la vidéo.
C'est ici que ça se passe.
Comme dans le chapitre précédent, vous verrez d'abord la balise <video> et ses options,
puis les différents formats vidéo supportés
Et enfin, comme pour la balise audio, la balise source pour gérer différents formats vidéo.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Exemple du code de la vidéo ci-dessous (Téléchargez ici le fichier vidéo pour l'exemple)

<!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>
fieldset { border : 2px solid #4040A4;
width : 550px;}
span {margin-right:24px;}
</style>

</head>
<body>

<video controls preload>
<source src="11-intro.mp4"/>
Votre navigateur ne supporte pas la balise vidéo. </video>

<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>

V - Les nouveaux formulaires HTML5 - partie 1

En HTML5 les formulaires sont devenus très puissants.
Dans ce premier cours vidéo, vous allez apprendre à :
- organiser des formulaires complexed ;
- suggérer du texte ;
- vérifier une adresse mail ;
- vérifier une URL.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Ci-dessous, un exemple de code source très complet

<!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>
span {margin-right: 25px;}
</style>

<script type="text/javascript">
function afficher(choix)
{
document.getElementById("valeur").innerHTML = " "+choix;
}
</script>
</head>

<body>
<form action="exemple.html" autocomplete="on">
Nombre de Formations demandées<br />
<input name="curseur" type="range" min="1" max="5" value="3" step="1" style="margin-top: 10px; width: 155px;" onchange="afficher(this.value)"><br />

<div style="margin-top: -2px">
<span style="margin-left: 5px;">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<p>Vous avez choisi : <span id="valeur">...</span>formations</p>

<p>
<fieldset style="width:220px;"><legend>Cochez les langages web</legend>
<input type="checkbox" name="as">ActionScript<br />
<input type="checkbox" name="js">JavaScript<br />
<input type="checkbox" name="asm">Assembleur<br /></fieldset>
</p>

<p>
<fieldset style="width:220px;"> <legend>Cochez les langages objet</legend>
<input type="checkbox" name="asm">Assembleur<br />
<input type="checkbox" name="php">PHP<br />
<input type="checkbox" name="html">HTML5<br /></fieldset>
</p>

<p>
Choisissez un langage :
<input type="text" list="langages"> <datalist id="langages">
<option label="ActionScript" value="ActionScript"></option>
<option label="JavaScript" value="JavaScript"></option>
<option label="PHP" value="PHP"></option>
<option label="html" value="html"></option>
</datalist>
</p>

<p>
Renseignez votre Email :
<input type="email" name="mail" required><br />
</p>

<p>
Renseignez l'URL de votre site  :
<input type="url" name="adresse" required><br />
</p>

<input type="submit"> <input type="reset">

</form>

</body>
</html>

VI - Les nouveaux formulaires HTML5 - partie 2

Dans cette 2e vidéo sur les formulaires en HTML5 vous allez apprendre à utiliser des champs dans différents formats :
numérique, date, horaire, recherche.
Vous verrez également la palette de couleurs et les curseurs.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Ci-dessous, un exemple de code présenté 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">

<style>
fieldset { border : 2px solid #4040A4;
width : 550px;}
span {margin-right:24px;}
</style>

</head>
<body>

<form action="mailto:matthieu@devfacile.com" method="post" enctype="text/plain">

<p>
<fieldset>
<legend><i>Client</i></legend>
Nom et prénom : <input type="text" name="Nom" required placeholder="Nom et Prénom"><br>
Adresse: <input type="text" name="Adresse" size="30" required><br>
Code Postal : <input type="number" name="CP" ><br>
Pays : <input type="text" readonly name="Pays" value="France">
</fieldset>
</p>

<p>
<fieldset>
<legend><i>Formation</i></legend>
Intitulé : <input type="text" name="Modele" placeholder="PHP Expert"><br>
Quantité : <br />
<input type="range" name="Taille" min="1" max="4" step="1" value="2">
<div>
<span style="margin-left: 5px;">1</span>
<span>2</span>
<span style="margin-left: 5px;">3</span>
<span style="margin-left: 5px;">4</span>
</div>
</p>

<p>
Mode de paiement : <input type="text" name="paiment" size="60" required placeholder="virement, CB, Paypal, chèque"><br />
</fieldset>
</p>

<p>
Renseignez vos dates : <br />
Date de départ : <input type="date" name="depart"><br />
Date d'arrivée : <input type="date" name="arrivee"> <br />
Date d'expiration : <input type="month" name="expire"> <br />
</p>

<p>
Livraison à : <br />
<input type="time" min="09:00" max="17:00" step="60" value="11:00"><br />
</p>

<p>
Choisissez votre couleur : <br />
<input type="color">
</p>

<p>
<input type="submit" value="Commander">
<input type="reset" value="Effacer">
</p>
</form>

</body>
</html>

VII - Recevez gratuitement la formation « HTML5 Facile »

Si vous souhaitez aller 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 Facile

VIII - 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 Jean pour sa relecture orthographique.