L E    I M A G E S

Les Formats d'Image:
Avant de passer aux balises, il faut savoir ce qui suit.

 

Les deux formats d'image reconnus sur le Web, sont le format GIF (version 89a) et le format JPEG.

 
Pour le format GIF (maximum 256 couleurs), on retiendra la caractéristique "entrelacé" qui permet de charger progressivement l'image lors de l'ouverture de la page.

 
Ces deux formats donnent des résultats assez équivalents bien que JPG soit plutôt recommandé pour des images avec des tons nuancés ou dégradés.

 

L'ennemi sur le Web, c'est la taille des images! Plus l'image sera grande, plus le temps de chargement sera long... au risque de décourager vos visiteurs. Si cela est possible, une image en 16 couleurs peut très bien faire l'affaire. Présenter une petite image indiquant un lien vers l'image complète est également un bon conseil.

 

Il n'est pas inutile de prévoir dans votre panoplie de compositeur Web, un logiciel de retouches d'images. A ce propos "Paint Shop Pro" a la triple qualité d'être disponible en shareware, d'être très intuitif et d'être performant. En outre, un tel logiciel vous permettra de composer vos propres images et ainsi de personnaliser vos pages.

Dois-je rappeler qu'il est très facile de se faire une bibliothèque d'images tout en surfant sur le Web? Avec Netscape  ou Internet Explorer, il suffit de se positionner sur l'image, de cliquer avec le bouton gauche de la souris et de suivre les instructions du menu déroulant (Save Image As...).

Le code Html est :

<IMG SRC="Adresse de l'image">

Afficher l'image qui se trouve à l'adresse...

La balise image possède de nombreux attributs:

Texte alternatif

alt="****"

Pour les browser n'ayant pas l'option "image" activée

Dimensions

width=?
height=?

Hauteur et largeur (en pixels)

Bordure

border=?

(en pixels)

Alignement

align=top
align=middle
align=botton
align=left
align=right

haut
milieu
bas
droite
gauche

Commentaires :

En Html, l'image ne fait pas partie de votre document. Le browser va la chercher à l'adresse indiquée. Généralement, on place les images dans le même répertoire que les pages Html.

Presque en conséquence logique de ceci, le fait d'utiliser la même image à plusieurs reprises dans un fichier Html ne modifie en rien sa taille.

Prévoir un texte pour les browsers n'ayant pas l'option image activée, permet au lecteur de ne pas perdre le fil de l'exposé et peut-être d'activer cette option pour découvrir votre oeuvre.

Il est important pour la fluidité de l'affichage de préciser la taille en hauteur et largeur de l'image car le browser peut ainsi connaissant l'emplacement à réserver pour celle-ci, continuer à afficher le texte. 

L'attribut Align

L'attribut align positionne l'image par rapport au texte :

<IMG SRC="HELP.gif" align=TOP>Fichier d'aide
<IMG SRC="HELP.gif" align=CENTER>Fichier d'aide
<IMG SRC="HELP.gif" align=BOTTOM>Fichier d'aide

Lien sur image:

 

    En cliquant sur l'image, vous ouvrirez cette image à son format normal.


    Les balises sont :

    <A HREF="BALLOONSa.jpg"><IMG SRC="BALLOONS.jpg"></A>

    Remarquons que les images cliquables sont entourées d'une bordure.


 

 

Accueil

Index

Précédent 

Suivant

 

 

Les browsers intègrent un outil de mise en forme intéressant pour clarifier la présentation de votre texte. C'est la ligne horizontale.


 

La syntaxe en est fort simple:

Ligne horizontale

[Horizontal Rule]

<HR>

Insérer une ligne horizontale

 

  Ce tag  simple, nous permettra de comprendre   le fonctionnement du navigateur. D'abord, vous avez déjà découvert au fil de vos erreurs qu'il est plutôt gentil car il s'efforce toujours d'afficher quelque chose. 

Ensuite, il vous ménage le travail en prenant à sa charge des valeurs par défaut d'un certain nombre d'attributs. Dans le cas présent, les valeurs par défaut de la balise <HR> sont : 

Une épaisseur de trait de 2 pixels, un alignement centré et une largeur de 100% de la fenêtre. Vous pouvez très bien modifier au gré de votre fantaisie les valeurs de ces différents attributs.

Epaisseur

<HR size=?>

en pixels

Largeur

<HR width=?>
<HR width="%">

en pixels
en % de la fenêtre

Alignement

<HR align=left>
<HR align=right>
<HR align=center>

gauche
droite
centré

Il est donc tout à fait équivalent d'écrire:

  • <HR> ou

  • <HR size=2 align=center width="100%">

 Faisons un  petit exercice:


Avec l'éditeur de texte

<H3 align=center>Omar KHOLOUD</H3>


<HR align=center size=8 width="50%">

Avec le browser

Commentaires:

    • On préférera spécifier la largeur en % de la fenêtre plutôt qu'en pixels car l'affichage s'adaptera ainsi à toutes les tailles et résolutions d'écran.

    • On peut préférer l'usage d'images comme séparateur (comme c'est la cas ici) pour personnaliser son ouvrage.

        

 
Google

Accueil

Index

Précédent 

Suivant