Images
Fait partie de la section Fundamentals du Journey HTML de Coddy — leçon 23 sur 60.
Les images peuvent rendre votre page web plus attrayante, et les ajouter en HTML est simple en utilisant la balise <img>. La balise <img> est auto-fermante, ce qui signifie qu'elle n'a pas besoin d'une balise de fermeture.
Pour afficher une image, vous devez utiliser l'attribut src. Cet attribut spécifie l'emplacement de l'image (URL ou chemin du fichier). Voici un exemple :
<img src="https://coddy.tech/images/bit.svg" />Dans cet exemple, le navigateur chargera et affichera l'image à partir de l'URL https://coddy.tech/images/bit.svg.
Les balises auto-fermantes, comme <img>, n'ont pas besoin d'une balise de fermeture. Elles se terminent par /> et sont utilisées pour les éléments qui n'ont pas de contenu à l'intérieur.
Défi
FacileAjoutez une image au document HTML, vous pouvez utiliser l'URL de l'exemple de la leçon ou n'importe quelle autre URL.
Assurez-vous de voir une image !
Aide-mémoire
La balise <img> affiche des images et est auto-fermante (aucune balise de fin n'est nécessaire) :
<img src="https://coddy.tech/images/bit.svg" />L'attribut src spécifie l'emplacement de l'image (URL ou chemin du fichier). Les balises auto-fermantes se terminent par />.
Essayez vous-même
<!DOCTYPE html>
<html>
<body>
<!-- Écrivez le code ici -->
</body>
</html>Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Fundamentals
1Les bases du HTML
Qu'est-ce que le HTML ?Structure de base du HTMLBalises et élémentsImbrication et fermeture des balisesCommentaires en HTML7Page de profil personnel
Présentation du projetSection d'en-tête2Texte et mise en forme
TitresParagraphesSauts de ligneTexte en gras et italiqueGras et italique (suite)Récapitulatif - Mise en forme8Formulaires et champs de saisie, partie 1
Bases des formulairesChamps de texteAttributs des champsChamp de mot de passeLibellés pour les champsRécapitulatif - Formulaire de base11Page d'inscription à un événement
Aperçu du projetSection d'en-tête3Travailler avec les listes
Liste non ordonnéeListe ordonnéeListes imbriquéesRécapitulatif - Les listes6Mise en page
DivisionsSpans en ligneBalises sémantiquesSections et articlesRécapitulatif - Mise en page