Jusqu'ici, nous avons vu et utilisé beaucoup de texte dans ce cours mais le web serait vraiment ennuyeux s'il n'utilisait que du texte.  Voyons ensemble la manière de le rendre plus vivant avec plus de contenu intéressant ! Ce module explore l'utilisation d'HTML pour inclure du contenu multimedia dans vos pages web. Cela comprend les différentes manières d'ajouter des images, d'intégrer de la video, de l'audio et même des pages web entières. 

Prérequis :

Pour commencer ce module dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML comme il est recommandé dans l'article : introduction au HTML. Nous vous recommandons de passer du temps sur cette introduction en premier lieu (ou un article équivalent d'initiation au HTML) puis de repasser ici pour continuer.

Note : Si vous travaillez sur une tablette, ordinateur ou autre périphérique où vous n'auriez pas la capacité de créer vos propres fichiers, sachez que vous pouvez tester (la plupart) de vos lignes de code sur des programmes en ligne comme JSBin ou Thimble.

Guides

Ce module contient les articles suivants, qui vous guideront à travers les fondamentaux de l'intégration multimedia sur une page web.

Images en HTML
Il existe d'autres types de multimedia à prendre en compte mais il est logique de commencer par cet élément si humble qu'est  l'élément <img>. Il est utilisé pour integrér une simple image dans une page web. Au long de cet article, nous verrons son utilisation en détails, des rudiments à l'annotation par légendes en utilisant <figure>, et de quelle manière il est liè  aux images d'arrière-plan de CSS.
Vidéo et contenu audio
Ensuite, nous étudierons la façon d'utiliser les éléments HTML5<video> et <audio> , pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs,  enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens.
De <object> à <iframe> — autres techniques d'intégration
A ce point précis, nous aimerions prendre un peu de recul pour approfondir quelques éléments qui vous permettront d'intégrer une grande variété de types de contenu dans vos pages web :  les éléments <iframe>, <embed> et <object>. <iframe> est fait pour intégrer d'autres pages web, les deux autres vous autorisent à faire de même pour les PDFs, SVG, et même Flash — une technologie en fin de vie mais que vous rencontrerez encore par-ci, par-là.
Ajouter des graphiques vectoriels sur le Web 
Les graphiques vectoriels peuvent être d'une grande utilité dans certains cas. Contrairement à des formats usuels comme  PNG/JPG, ils ne distordent ni ne pixellisent quand vous zoomez dessus. Ils peuvent rester lisses lors d'une mise à l'échelle. Cet article vous initie aux graphiques vectoriels et aussi à comment inclure le format si populaire SVG dans des pages web.
Images adaptatives
Avec, aujourd'hui, tant d'équipements différents capables de parcourir le web — des smartphones aux PC de bureau — un concept essentiel à maîtriser dans le monde du web moderne est le design adaptatif. Cela consiste en la création de pages web qui sont capables de changer leurs caractéristiques pour s'adapter aux tailles d'écrans, résolutions, etc... Nous aborderons ceci en détails plus tard, dans le module consacré au CSS, mais pour l'instant, nous observerons les outils dont HTML dispose pour créer ces images adaptatives, dont l'élément <picture>.

Évaluations

Les évaluations qui suivent sont là pour tester votre compréhension des bases du HTML traitées dans les guides ci-dessus.

Page de garde Mozilla
Cette évaluation concernera vos connaissances de quelques unes des techniques traitées dans les articles de ce module, vous amenant à ajouter des images et vidéos à une page de garde « funky » développant les atouts de Mozilla !

À voir aussi

Intégrer une carte interactive en haut d'une image
Une représentation cartographique fournit un mécanisme qui lie différents secteurs d'une image à différents endroits. Pensez à une carte qui fournirait des informations plus approfondies sur chaque pays sur lequel vous cliquez. Cette technique peut parfois être d'une grande utilité.
Web Principes fondamentaux 2

Un excellent cours de Mozilla qui explore et teste les compétences développées dans le module :  Multimedia et intégration. Approfondissez les fondamentaux de la composition de pages web, concevez des outils pour l'accessibilité, le partage de ressources, découvrez l'utilisation de supports en ligne et la mutualisation du travail (ce qui signifie que votre travail est librement disponible et partagé avec d'autres). 

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Dralyab, AntoineJacquet, zakaila, Ilphrin
Dernière mise à jour par : Dralyab,