CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML 5 - Les fondamentaux

Comment insérer une image dans une page HTML

Retour à la formation
Chapitre 18 Leçon 1
Précédent
Suivant

Découvrez comment insérer une image dans une page HTML en utilisant la balise IMG à travers un guide détaillé.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons aborder en détail comment insérer une image dans une page HTML. Pour commencer, créez un dossier images dans le répertoire de votre site web. Utilisez Sublime Text pour faire un clic droit et ajouter un nouveau dossier nommé images. Ensuite, placez votre image dans ce dossier.

Pour insérer l’image, utilisez la balise auto-fermante IMG. Veillez à indiquer correctement la source de l’image (src), qui référence le dossier et le nom du fichier d’image avec son extension (ex : laptop.jpg). Respectez les majuscules et minuscules dans les noms de fichiers pour éviter les erreurs lors du chargement sur un serveur web.

Nous examinerons également les attributs essentiels de la balise image, tels que alt pour le texte alternatif, width pour la largeur et height pour la hauteur. Ces attributs jouent un rôle crucial dans le référencement web et l’accessibilité, ainsi que dans l’optimisation de l'affichage des images. Nous verrons comment spécifier et ajuster ces attributs pour que l’image s’affiche correctement selon les dimensions du navigateur web.

Objectifs de cette leçon

L'objectif de cette vidéo est de permettre aux utilisateurs de comprendre et de maitriser l’insertion d’images sur une page HTML en utilisant la balise IMG, ainsi qu'à apprendre à configurer ses différents attributs.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir une connaissance de base en HTML et en utilisation de Sublime Text ou tout autre éditeur de code.

Métiers concernés

Cette compétence est essentielle pour des métiers tels que Développeur Front-End, Web Designer et Intégrateur Web.

Alternatives et ressources

Des alternatives à Sublime Text peuvent inclure Visual Studio Code, Atom, ou encore Notepad++.

Questions & Réponses

L'attribut 'alt' fournit un texte alternatif qui décrit l'image, essentiel pour le référencement et l'accessibilité.
Parce que les serveurs web distinguent les majuscules et minuscules, ce qui peut entraîner des erreurs de chargement si le nom ne correspond pas exactement.
Le navigateur calcule automatiquement la taille optimale de l'image pour l'afficher au bon format.