Les Images - Cours XHTML

Introduction

Info

L'image que nous allons utiliser, s'appelle "imagecour.gif".
Elle se trouve dans le répertoire : https://www.aliasdmc.fr/courshtml/exemple/
Pour plus d'information sur la balise <IMG> allez dans le glossaire XHTML.

Insertion d'une image

Info

Pour insérer une image, il faut utiliser la balise XHTML <IMG>.

Taper le code <img src="https://www.aliasdmc.fr/courshtml/exemple/imagecour.gif" /> et visualisez.
Si vous connaissez la taille de l'image définissez la.
J'ai lu que cela facilitait l'affichage de l'image...?

La taille d'"imagecour" est de 100 pixels de longueur et 66 pixels de hauteur.
Nous taperons :
Exemple de code :
<img src="https://www.aliasdmc.fr/courshtml/exemple/imagecour.gif" width="100" height="66" />
Il n'est pas nécessaire de mettre "px", car la taille est toujours en pixel par défaut.

Les bordures d'une image

info

Il est possible de créer une bordure. Cela me semble, pas très intéressant.
J'aborde le problème de la bordure car quand vous créez un lien sur l'image, le navigateur vous crée un contour qui n'est pas forcément le bienvenue.
Il me semble donc nécessaire de connaître la propriété css pour border l'enlever.
Exemple de code :
<img src="imagecour.gif" style="border-width:0"/>

En savoir plus sur border

Exercice

L'exercice suivant consiste à introduire une image avec une bordure de 3 (toujours en Px par défaut), puis une image avec lien et une image avec lien mais sans bordure.
Tapez :
Exemple de code :
<a href="#" ><img src="imagecour.gif" style="border-width:3" /></a>
<br />
<a href="#" ><img src="imagecour.gif" /
<br />
<a href="#" ><img src="imagecour.gif" style="border-width:0" /></a>

Si vous ne savez pas ce qu'est un lien, ce n'est pas grave, taper bêtement le texte. Je vous expliquerais dans le chapitre suivant.

Alignement d'une image par rapport au texte

Info

Tout d'abord voyons comment s'aligne l'image par défaut.
Taper le code suivant :
Exemple de code :
<p><img src="imagecour.gif" /> Du texte </p>

Voici du texte.

Maintenant nous allons aligner verticalement l'image par rapport au texte grâce à la feuille de style vertical-align.
Tapez :
Exemple de code :
<p><img src="imagecour.gif" style="vertical-align:middle" /> Du texte </p>

En savoir plus sur vertical-align

Maintenant nous allons aligner horizontalement l'image par rapport au texte grâce à la feuille de style float.
Tapez :
Exemple de code :
<p><img src="imagecour.gif" style="float:right" /> Du texte </p>

En savoir plus sur float

Pour plus d'information sur les attributs align de la balise HTML IMG utilisez le glossaire HTML.

Les marges d'une image

Info

Il est possible de créer une marge autour de l'image.
Cela permet par exemple que le texte ne vienne pas coller la bordure de l'image.
Pour cela, il faut utiliser la feuille de style margin.
Tapez :
Exemple de code :
<p><img src="imagecour.gif" style="float:right;margin:10px" /> Du texte </p>

En savoir plus sur margin
Chapitre les listes
Chapitre les liens
La balise HTML et XHTML IMG permet de mettre une image dans le document html. <IMG> Exemple :<img src="../images/balise/rouge.gif" width="50" height=...[Voir]La propriété de Marge CSS MARGIN permet de spécifier individuellement ou globalement l'espace entre la bordure d'un élément HTML ou XHTML et la bordur...[Voir]La propriété de bordure CSS BORDER est 482|un raccourci qui permet de spécifier le style de la bordure Css (pointillé, solide,...), l'épaisseur de la ...[Voir]