Images : ajouter des images à votre page
Insérez et mettez en forme des images sur votre page web
Images : ajouter des images à votre page est une leçon HTML for Kids gratuite sur CoddyKit. Ceci est la leçon 4 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.
Images : ajouter des illustrations à votre page
Bienvenue dans la prochaine leçon ! Aujourd’hui, nous allons apprendre à ajouter des images à vos pages web. Les images rendent vos pages plus attrayantes et amusantes !
Que sont les images en HTML ?
Les images sont ajoutées aux pages web à l’aide de la balise <img>. Il s’agit d’une balise à fermeture automatique, ce qui signifie qu’elle n’a pas besoin d’une balise fermante comme </img>.
Apprenons à l’utiliser !
Ajouter une image
Pour ajouter une image, utilisez l’attribut src afin d’indiquer l’emplacement du fichier image.
Exemple :
Dans cet exemple :
src: indique le fichier image.alt: fournit un texte de remplacement si l’image ne peut pas être affichée.
<img src="https://www.w3.org/html/logo/img/html5-display.png"
alt="A beautiful view" />
Texte alternatif (attribut alt)
L’attribut alt décrit l’image. Il est important pour l’accessibilité et aide les moteurs de recherche à comprendre votre image.
Exemple :
Si l’image ne se charge pas, le texte "A beautiful sunset over the ocean" s’affichera à la place.
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A beautiful sunset over the ocean" />
Ajouter les dimensions d’une image
Vous pouvez contrôler la taille de votre image à l’aide des attributs width et height.
Exemple :
Cet exemple définit une image de 300 pixels de largeur et de 200 pixels de hauteur.
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A red flower" width="300" height="200" />
Créer un lien sur une image
Vous pouvez transformer une image en lien cliquable en la plaçant à l’intérieur d’une balise <a>.
Exemple :
Lorsque l’utilisateur clique sur l’image, il est dirigé vers https://example.com.
<a href="https://example.com">
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Example Logo" />
</a>
Utiliser des images en ligne
Vous pouvez utiliser des images hébergées en ligne en indiquant leur URL dans l’attribut src.
Exemple :
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Online Image" />
Essayez par vous-même
Créons une page web simple avec des images. Voici un exemple :
<!DOCTYPE html>
<html>
<head>
<title>My Image Page</title>
</head>
<body>
<h1>Welcome to My Gallery</h1>
<img src="cat.jpg" alt="A cute cat" width="400" />
<p>This is my adorable cat!</p>
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A playful dog" />
<p>This is a friendly dog from the internet!</p>
</body>
</html>
Bravo !
Félicitations ! Vous avez appris à ajouter des images à vos pages web, à définir leurs dimensions et même à les relier à d’autres pages. Les images rendent vos pages web plus intéressantes et agréables à regarder. Dans la prochaine leçon, nous apprendrons à créer des tableaux pour organiser les données. Préparez-vous à rendre vos pages encore plus fonctionnelles !
Questions Fréquemment Posées
La leçon « Images : ajouter des images à votre page » est-elle gratuite ?
Oui — le texte complet de « Images : ajouter des images à votre page » 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 « Images : ajouter des images à votre page » ?
Insérez et mettez en forme des images sur votre page web 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 4 sur 4.
Combien de temps prend la leçon « Images : ajouter des images à votre page » ?
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
- Titres et paragraphes
- Listes : ordonnées et non ordonnées
- Liens : relier le Web
- Images : ajouter des images à votre page