Conception de pages pour un navigateur

Ajouter une image

La balise <img> et ses attributs

L'insertion d'un emplacement pour une image se fait avec la balise <img>.

Remarque : la balise <img> n'a pas besoin d'être fermée (pas de </img>).

 

Les attributs obligatoires de la balise <img> sont :

Nom de l'attribut Valeurs possibles Remarque
src URL Permet de préciser le fichier image qui doit être affiché dans l'emplacement
alt Chaine de caractère Texte de description de l'image

 

L'URL du fichier image

L'URL (Uniform Resource Locator) est le chemin que le navigateur doit suivre dans l'arborescence des données pour aller du fichier *.htm au fichier image.

 

Considérons l'arborescence suivante pour les données (cf. Bien organiser les données) :

 

Dossier racine du site

pages

p1.htm

p2.htm

images

img1.gif

img2.jpg

index.htm

 

L'URL du fichier img1.gif relativement au fichier p1.htm est : ../images/img1.gif.

 

L'URL du fichier img1.gif relativement au fichier index.htm est : ../img1.gif.

La mise en forme

La mise en forme se fait à l'aide des styles. On pourra entre autre utiliser les styles suivants :

Nom du style Valeurs possibles Remarque
width Valeur numérique Permet de définir la larguer de l'image
height Valeur numérique Permet de définir la hauteur de l'image
vertical-align Valeur numérique ou top, bottom, baseline, middle, sub, super, text-bottom, text-top. La valeur par défaut est baseline. Permet de définir l'alignement vertical de l'image
border Cf. Les styles pour les blocs Permet de définir la bordure de l'image

 

Remarque : pour centrer une image, il faut l'inserer dans une balise de paragraphe avec la valeur center pour le style text-align.

Exemples

Avec l'arborescence précédente pour les fichiers :

 

• Le code à utiliser pour insérer l'image 1 dans le fichier p1.htm est  :

<img src="../images/img1.gif" alt="description de l'image 1" style="width:100%; height:100%">

 

• Le code à utiliser pour insérer l'image 1 centrée dans le fichier index.htm est :

<p style="text-align:center"><img src="../img1.gif" alt="description de l'image 1" style="width:100%; height:100%"></p>

  Valid XHTML 1.0 Transitional   Valid CCS

ostralo.net