Les images - Cours HTML

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 HTML ( Voir les propriétés de la Balise HTML )..

Insertion d'une image

Info

Pour insérer une image, il faut utiliser la balise HTML <IMG>. La balise IMG est une balise simple, elle n'a pas de balise de fermeture.

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="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 un contour ou bordure. Cela me semble, pas très intéressant.
J'aborde le problème du contour 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 l'attribut 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 :
<img src="imagecour.gif" border="3">
<BR>
<A href="#" ><img src="imagecour.gif"></A>
<BR>
<A href="#" ><img src="imagecour.gif" border="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 :
<IMG src="imagecour.gif"> puis copiez et collez du texte.
Voici du texte.

Maintenant nous allons aligner le bas du texte avec le bas de l'image.
Tapez :
<IMG src="imagecour.gif" align="absbottom"> puis copiez et collez du texte.

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

Créer un espace entre l'image et le texte

Info

Le texte collé à l'image n'est pas très beau.

Nous allons étudier l'espacement horizontal qui permet de décaler le texte horizontalement par rapport à l'image.
Pour cela mettez dans la balise <IMG> l'attribut HSPACE, donnez lui une valeur.

Tapez par exemple :
Exemple de code :
<IMG src="imagecour.gif" HSPACE="5" Align="left">
puis copiez et collez du texte.
Voici du texte.

Nous allons étudier l'espacement vertical qui permet de décaler le texte verticalement par rapport à l'image.
Pour cela mettez dans la balise <IMG> l'attribut VSPACE, donnez lui une valeur.
Tapez par exemple :
Exemple de code :
<IMG src="imagecour.gif" VSPACE="20" HSPACE="20" Align="left">
puis copiez et collez deux fois du texte.

Insertion d'une image de fond

Info

Vous pouvez insérer une image de fond.
Cette caractéristique se détermine dans la balise HTML <BODY> grâce à l'attribut BACKGROUND="url".
Sachez que une image placé en fond se répète jusqu'à ce qu'elle remplisse tout le document HTML.
Vous verrez qu'une image n'ayant pas de bons raccords fait de votre fond, un fond très laid.

Pour voir nous allons mettre en fond une image.
Tapez dans la balise <BODY> :
Exemple de code :
<BODY BACKGROUND="imagecour.gif">
Internet Explorer offre d'autres possibilités que vous pourrez voir dans le Glossaire HTML à la balise HTML <BODY>.

Les images réactives

Info

Il faut savoir qu'il est possible de déterminer de zones réactives sur une image. Il est très difficile de déterminer ces zones si vous ne possédez pas de logiciel de dessin ou logiciel comme Dreamweaver ou Frontpage...
Pour plus d'information voir les balises <IMG>, <MAP> et <AREA>.

La seul chose que je puisse faire c'est de vous montrez une image ayant les trois types de zone possible.
Voici le code a recopier.
Pour plus d'information sur les zones réactives voir le Glossaire HTML Balise AREA.

Révision des balises

Exercice

Voici un petit exercice qui consiste à recréer une page HTML.
Pour cet exercice, il faut avoir été consulté le glossaire.
La page à recréer.
Pas très belle.
Voici les références :
- image de fond "poisson1.gif"
- carre rouge "rouge.gif" taille 50 X 50.
Les images se trouve dans le répertoire : https://www.aliasdmc.fr/courshtml/exemple/
Chapitre le texte
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 balise HTML et XHTML BODY contient le corps du document html, c'est à dire toutes les informations visibles par l'internaute.<BODY> </BODY> C'est...[Voir]La balise HTML MAP spécifie un ensemble de zones réactives d'une image.<MAP> </MAP> La balise HTML MAP contient la balise <AREA> qui définie une zone ...[Voir]La balise HTML et XHTML AREA définie une zone réactive dans ensemble de zones réactives définie par la balise HTML et XHTML MAP, elle n'a pas en HTML ...[Voir]