Pour cette partie il nous faut d'abord un fichier image (jpg, png, gif...). N'importe quelle image peut faire l'affaire (dans les limites de la décence et du bon goût, nous sommes en cours...). Nous aurons besoin de connaître son URL. Pour obtenir l'URL d'une image trouvée sur un site, faire un clic doit dessus et choisir "copier l'adresse de l'image" dans le menu contextuel. Certaines règles sont à respecter (voir post-it ci-contre) mais pour les besoins de l'exercice on peut les oublier momentanément.
Supposons qu'elle s'appelle 'monimage.jpg' et qu'elle soit enregistrée dans le dossier de travail 'essais_HTML_et_CSS'.
Code :
<img src="monimage.jpg">Résultat :
Autres attributs recommandés de la balise <img>:
L'attribut "alt" permet d'indiquer le contenu de l'image pour le cas où elle ne pourrait pas être affichée (si elle est introuvable, par exemple).
<img src="monimage.jpg" alt="texte de remplacement">
Les attributs "height" et "width" permettent d'indiquer la taille en pixels de l'image affichée.
Si un seul des deux est indiqué, l'image garde ses proportions initiales.
<img src="monimage.jpg" height="120">
<img src="monimage.jpg" height="60" width="150" >
Les attributs id et title s'appliquent aux images comme aux autres éléments HTML
Une image peut être utilisée pour faire, un lien en incorporant la balise <img> entre les balises<a> et </a>