Fiche de cours

Insérer un média avec des balises HTML

Lycée > Seconde > SNT > Insérer un média avec des balises HTML

Fiche de cours
Quiz et exercices
Vidéos et podcasts

Objectifs

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.

Points clés

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.

Pour bien comprendre

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.

1. Rappel

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.

2. Insérer une image dans une page

a. Principe

Pour insérer une image, on peut utiliser la balise <IMG src=urlimg>, où « urlimg » correspond à l’emplacement source où l’on peut trouver votre image.
Il peut s’agir d’un lien externe sur le net, ou d’un lien vers le disque dur.

Remarque
Pour insérer une image, il faut respecter l’extension de l’image (.gif, .jpg ou .png).

b. Exemple d'insertion d'une image dans le code HTML

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

3. Insérer un son ou une vidéo dans une page

a. Principe

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.

Remarque
Il existe beaucoup de formats de sons audio (.mp3, .wav, .ogg, etc.), mais il faut que le navigateur soit compatible.

Exemples
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.

Un clip vidéo nécessite en moyenne 600 Mo environ pour une dizaine de minutes.

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.

b. Exemple d'insertion d'un son dans le code HTML

Étape 1 : Créer le fichier HTML

On va créer le fichier HTML« avion.htm » avec l’éditeur de code intégré de Windows, à savoir Bloc-notes.

Remarque
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 ».

Étape 2 : Intégrer le fichier son dans le fichier HTML

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.

Remarques

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">.

Étape 3 : Visualiser le fichier « avion.htm » grâce au navigateur

Remarque
On peut entendre le son de l’avion en cliquant sur le bouton play

Évalue ce cours !

Note 4.2 / 5. Nombre de vote(s) : 5

Des quiz et exercices pour mieux assimiler sa leçon

La plateforme de soutien scolaire en ligne myMaxicours propose des quiz et exercices en accompagnement de chaque fiche de cours. Les exercices permettent de vérifier si la leçon est bien comprise ou s’il reste encore des notions à revoir.

S’abonner

Des exercices variés pour ne pas s’ennuyer

Les exercices se déclinent sous toutes leurs formes sur myMaxicours ! Selon la matière et la classe étudiées, retrouvez des dictées, des mots à relier ou encore des phrases à compléter, mais aussi des textes à trous et bien d’autres formats !

Dans les classes de primaire, l’accent est mis sur des exercices illustrés très ludiques pour motiver les plus jeunes.

S’abonner

Des quiz pour une évaluation en direct

Les quiz et exercices permettent d’avoir un retour immédiat sur la bonne compréhension du cours. Une fois toutes les réponses communiquées, le résultat s’affiche à l’écran et permet à l’élève de se situer immédiatement.

myMaxicours offre des solutions efficaces de révision grâce aux fiches de cours et aux exercices associés. L’élève se rassure pour le prochain examen en testant ses connaissances au préalable.

S’abonner

Des vidéos et des podcasts pour apprendre différemment

Certains élèves ont une mémoire visuelle quand d’autres ont plutôt une mémoire auditive. myMaxicours s’adapte à tous les enfants et adolescents pour leur proposer un apprentissage serein et efficace.

Découvrez de nombreuses vidéos et podcasts en complément des fiches de cours et des exercices pour une année scolaire au top !

S’abonner

Des podcasts pour les révisions

La plateforme de soutien scolaire en ligne myMaxicours propose des podcasts de révision pour toutes les classes à examen : troisième, première et terminale.

Les ados peuvent écouter les différents cours afin de mieux les mémoriser en préparation de leurs examens. Des fiches de cours de différentes matières sont disponibles en podcasts ainsi qu’une préparation au grand oral avec de nombreux conseils pratiques.

S’abonner

Des vidéos de cours pour comprendre en image

Des vidéos de cours illustrent les notions principales à retenir et complètent les fiches de cours. De quoi réviser sa prochaine évaluation ou son prochain examen en toute confiance !

S’abonner

Profs en ligne

Découvrez le soutien scolaire en ligne avec myMaxicours

Plongez dans l'univers de myMaxicours et découvrez une approche innovante du soutien scolaire en ligne, conçue pour captiver et éduquer les élèves de CP à la terminale. Notre plateforme se distingue par une riche sélection de contenus interactifs et ludiques, élaborés pour stimuler la concentration et la motivation à travers des parcours d'apprentissage adaptés à chaque tranche d'âge. Chez myMaxicours, nous croyons en une éducation où chaque élève trouve sa place, progresse à son rythme et développe sa confiance en soi dans un environnement bienveillant.

Profitez d'un accès direct à nos Profs en ligne pour une assistance personnalisée, ou explorez nos exercices et corrigés pour renforcer vos connaissances. Notre assistance scolaire en ligne est conçue pour vous accompagner à chaque étape de votre parcours éducatif, tandis que nos vidéos et fiches de cours offrent des explications claires et concises sur une multitude de sujets. Avec myMaxicours, avancez sereinement sur le chemin de la réussite scolaire, armé des meilleurs outils et du soutien de professionnels dédiés à votre épanouissement académique.

EXERCE-TOI EN T'ABONNANT