HTML for Kids · Leçon

Attributs HTML

Comprenez comment ajouter des informations supplémentaires à vos éléments à l’aide d’attributs

Attributs HTML est une leçon HTML for Kids gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML for Kids, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML for Kids comprend 4 leçons au total.

Multimédia : ajouter des vidéos et de l’audio

Bienvenue dans la prochaine leçon ! Aujourd’hui, nous allons apprendre à ajouter des vidéos et de l’audio à vos pages web. Le multimédia rend vos pages plus interactives et amusantes !

Pourquoi ajouter du multimédia ?

Les vidéos et l’audio peuvent rendre vos pages web :

plus attrayantes
informatives et amusantes
interactives

Apprenons à les ajouter avec HTML !

Ajouter une vidéo

Les vidéos sont ajoutées à l’aide de la balise <video>. Vous pouvez indiquer le fichier vidéo à l’aide de l’attribut src.

Exemple :

Dans cet exemple :

src : indique le fichier vidéo.
controls : ajoute les commandes de lecture, de pause et de volume.
width : définit la largeur de la vidéo.

<video src="example.mp4" controls width="400"></video>

Ajouter plusieurs formats vidéo

Tous les navigateurs ne prennent pas en charge les mêmes formats vidéo. Vous pouvez inclure plusieurs sources à l’aide de la balise <source>.

Exemple :

<video controls width="400">
  <source src="example.mp4" type="video/mp4">
  <source src="example.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Ajouter de l’audio

L’audio est ajouté à l’aide de la balise <audio>. Vous pouvez indiquer le fichier audio à l’aide de l’attribut src.

Dans cet exemple :

src : indique le fichier audio.
controls : ajoute les commandes de lecture, de pause et de volume.

<audio src="example.mp3" controls></audio>

Ajouter plusieurs formats audio

Comme pour les vidéos, vous pouvez inclure plusieurs sources audio afin d’améliorer la compatibilité avec les navigateurs.

Exemple :

<audio controls>
  <source src="example.mp3" type="audio/mpeg">
  <source src="example.ogg" type="audio/ogg">
  Your browser does not support the audio tag.
</audio>

Lecture automatique et boucle

Vous pouvez lancer automatiquement les vidéos et l’audio ou les lire en boucle en ajoutant les attributs autoplay et loop.

Exemple :

Remarque : la lecture automatique peut être désactivée dans certains navigateurs pour des raisons liées à l’expérience utilisateur.

<audio src="example.mp3" autoplay loop></audio>

Intégrer des vidéos YouTube

Vous pouvez intégrer des vidéos YouTube à votre page à l’aide de la balise <iframe>.

Exemple :

Remplacez example par l’ID unique de la vidéo.

<iframe width="560" height="315" src="https://www.youtube.com/embed/example" frameborder="0" allowfullscreen></iframe>

Bravo !

Félicitations ! Vous avez appris à ajouter des vidéos, de l’audio et même des contenus YouTube intégrés à vos pages web. Le multimédia rend votre contenu plus dynamique et attrayant. Dans la prochaine leçon, nous nous intéresserons à la mise en forme avec CSS pour donner une apparence remarquable à vos pages web. Préparez-vous à explorer le monde du design !

Questions Fréquemment Posées

La leçon « Attributs HTML » est-elle gratuite ?

Oui — le texte complet de « Attributs HTML » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML for Kids, passe à CoddyKit PRO. Le cours HTML for Kids comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Attributs HTML » ?

Comprenez comment ajouter des informations supplémentaires à vos éléments à l’aide d’attributs Tu pratiques HTML for Kids avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML for Kids ?

Aucune expérience préalable n'est requise. HTML for Kids sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Attributs HTML » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML for Kids ?

Oui. Chaque leçon HTML for Kids inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à HTML for Kids