@3 Diffusion Web

Soyez polis avec les nerds, ils seront plus tard vos patrons! – Bill Gates

Capsule 3 – HTML et Médias

Objectifs de la capsule

  • Créer une page Web  à partir de canevas HTML5 comprenant:
    • Images locales et distantes
    • Vidéo de type Youtube
    • Bande sonore

Ressources en ligne

WWW3Schools – HTML  |   WW3Scools – CSS  |   OpenClassrooms – HTML5-CSS3

Documents en ligne

HTML5 et éléments multimédias

Exemple éclair de code

<!– ——————————-CANEVAS DE BASE ———————————– –>

<!DOCTYPE html>
<html>
<head>
<meta charset= »utf-8″ />
<title>Medias</title>
</head>
<body>
<h1>Les médias</h1>
<h2>Les images</h2>
<img src= »images/infonuagique.png » alt= »Image d’un ordinateur dans un nuage » width= »250px »>
<br>
<img src= »http://img-cdn1.iha.fr/1769100006956/Chambres-d-hotes-bed-and-breakfast-Saint-nazaire-La-Milonga-bed-breakfast_6.jpeg &raquo; alt= »Caillou ressemblant à un canard » width= »50% »>
<h2>Youtube</h2>

<h2>Video locale</h2>
<video width= »600″ controls>
<source src= »videos/dessine_mouton.mp4″ type= »video/mp4″>
<source src= »videos/dessine_mouton.ogv » type= »video/ogg »>
<source src= »videos/dessine_mouton.webm » type= »video/webm »>
Votre fureteur est vieux… 😦 Il ne peut lire une video
</video>
</body>
</html>

 Vidéo en classe…

Publicités

Laisser un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

Site Web personnel

REMISE DU PROJET17 janvier 2019
34 jours restant(s)

Votre site WordPress

Le grand jour arrivera30 mai 2019
5 mois restant(s)