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 :

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