Insérer un média avec des balises HTML
- Fiche de cours
- Quiz
- Profs en ligne
- Videos
- Application mobile
- Connaitre la version HTML du moment.
- Savoir intégrer des images, du son et de la vidéo grâce à des balises spécifiques.
- Connaitre la notion de chemin spécifique des fichiers importés.
- Connaitre la notion d’extension .htm caractéristique des fichiers web.
- Connaitre la notion de taille d’un fichier son et d’un fichier vidéo.
- Grâce à un simple éditeur de texte (bloc-note), il est possible de coder en HTML.
- On peut insérer dans le code source du texte, des images, du son et de la vidéo afin d’améliorer la présentation des pages web.
- Connaitre la notion de structure de base d’un document HTML
- Connaitre les principales extensions des fichiers sons, images et vidéos
- Savoir utiliser le bloc-note de Windows comme éditeur de texte
Les développeurs web ont réussi à intégrer des images, des sons et même des vidéos sur le web. Grâce à HTML5, cela est devenu possible.
Pour intégrer un média (image, son, vidéo) dans une page, il faut utiliser des balises spécifiques.
Le langage HTML est un langage de « balisage », c’est-à-dire qu’il nécessite l’utilisation de balises qui permettent d’indiquer comment va être présenté un document. Il permet également d’établir des liens avec d’autres documents.
Il peut s’agir d’un lien externe sur le net, ou d’un lien vers le disque dur.
Pour insérer une image, il faut respecter l’extension de l’image (.gif, .jpg ou .png).
On souhaite ajouter une image externe à la page web.
- Taper le code suivant dans l’éditeur de contenu
- Visualiser le résultat dans le navigateur
Pour insérer un son ou une vidéo, il est recommandé d’utiliser un lien externe ; il s’agit d’éviter de saturer le disque dur car les fichiers sons peuvent prendre beaucoup de place.
Il existe beaucoup de formats de sons audio (.mp3, .wav, .ogg, etc.), mais il faut que le navigateur soit compatible.
Une chanson nécessite en moyenne :
- 1,6 Mo si elle est enregistrée au format MP3 ;
- 17,5 Mo si elle est enregistrée au format WAV.
Il faut copier le lien de ce média dans la balise HTML <a href="http://…">…</a>, laquelle permet d’intégrer un lien externe vers une page web.
On va créer le fichier HTML« avion.htm » avec l’éditeur de code intégré de Windows, à savoir Bloc-notes.
C’est ce fichier htm qui permet de générer la page web associée grâce à l’utilisation du navigateur. L’extension « .htm » permet, tout comme l’extension « .html », de définir un fichier web. Elles sont toutes deux reconnues et ouvertes par un navigateur.
Taper « bloc-notes » dans la barre de commande de Windows :
Le bloc-note se charge.
Taper le code dans l’éditeur.
Cliquer sur « Fichier » puis
« Enregistrer ».
Nommer le fichier « avion.htm ».
Pour intégrer le fichier son dans le
fichier HTML, il faut intégrer le
fichier son dans la zone BODY du code.
Le fichier « avion.htm »
possède ainsi le code suivant.
- Le fichier « avion.htm » et le fichier « avion.mp3 » (ou « avion.ogg ») doivent être contenus dans le même dossier et doivent nécessairement respecter la même orthographe dans les deux fichiers.
- Il faut choisir la bonne syntaxe : <source src="avion.mp3">
- « avion.mp3 » est un fichier au format MP3 et représente la valeur de l’attribut « src ».
- Il est possible de changer le format du fichier son ; il faut pour cela ajouter un autre type de format au document, comme par exemple <source src="avion.ogg">.
|
|
On peut entendre le son de l’avion en cliquant sur le bouton play
.
Comment as-tu trouvé ce cours ?
Évalue ce cours !
Vous avez obtenu75%de bonnes réponses !
Recevez l'intégralité des bonnes réponses ainsi que les rappels de cours associés :
Fiches de cours les plus recherchées
SNT
Lire un fichier HTML ou HTM
SNT
Éditer une page HTML avec différents outils
SNT
Le langage CSS et les sélecteurs
SNT
Changer la couleur avec des sélecteurs CSS
SNT
L'URL
SNT
La requête HTTP
SNT
Le modèle client/serveur
SNT
Télécharger une page web sur un serveur
SNT
L'usage des réseaux sociaux
SNT
Violence et protection sur les réseaux sociaux
Fermer
Accédez gratuitement à
