Menu des cours HTML
Il vous intrigue, il vous interpelle, vous en avez besoin, et pour certains vous l'utilisez sans même vous en rendre compte de par un éditeur. Bref, il est temps de mettre les choses au clair et d'apprendre "enfin" l'HTML ... moins courament appellé l'hypertexte markup language.
Nous verrons ici plus précisemment la version 4 de HTML.

Gestion de graphismes

Ce que nous appellerons Graphisme est une image, une couleur d'arrière plan ou une image d'arrière plan.

Définir la couleur de fond :

Pour définir la couleur d'arrière plan de l'ensemble de la page courante, ce sera l'attribut bgcolor de <body> qui sera employé en prenant une couleur comme valeur.

Exemple : <body bgcolor="#999">

Ici, toute la page prendre un gris foncé comme couleur de fond. Pour connaitre la signification des couleurs, reportez-vous à un encadré vu dans un chapitre précédent.

Définir une image d'arrière plan :

Pour afficher une image en arrière plan, la méthode sera la même que pour une simple couleur hormis que ce sera l'attribut background qui sera utilisé en lui passant en valeur le chemin de l'image à afficher.

Exemple : <body background="imges/ex_cours.gif">
Remarque :
L'image définie sera par défaut dupliquée jusqu'à remplir intégralement la page. Beaucoup d'options sont disponible pour réguler et diriger les images d'arrière plan, mais ceci avec CSS (Cascading Style Sheet).

Osons un écart et apprenons un code CSS :
<body style="background-image: url(images/ex_cours.gif); bakground-repeat: repeat-x">

Dans ce cas, l'image d'arrière plan définie dans url() ne sera dupliquée que sur la largeur de la page (-x). Ceci pour vous donner un avant-goût des possibilités de CSS qui seront vues prochainement dans d'autres cours JSAND.

Afficher une image :

Une image sur le Web correspond au format les plus courant .gif (Graphics Interchange Format) et .jpg (Joint Photographic Expert's Group). Elle sera appellée grâce à <img> et prenda au minimum obligatoirement src comme attribut qui prendra comma valeur le chemin source de l'image à afficher.

Exemple : <img src="images/ex_cours.gif">

Résultat :

Remarque :
Les images JPEG peuvent porter l'extension .jpg ou .jpeg, il n'y a aucune différence entre les deux, bien qu'il ne faut pas se tromper en les appellant.
Remarque :
Le format PNG (.png) a été dévelloppé pour viser à remplacer le format GIF. Au départ utilisable gratuitement, le format GIF est devenu payant lorsque la société a décidé de réclamer le paiement de droits pour l'usage de la technologie LZW. Pour éviter tout problème, le W3C (World Wide Web Consortium) a décidé de propager l'utilisation du PNG. Ce langage a donc été créé en octobre 1996 et est basé sur l'algorithme de compression Lempel-Ziv-Welch (LZW), une technologie brevetée par Unisys en 1995. Ceci dit, vous pouvez utiliser le format GIF en toute tranquilité, des milliards de pages l'utilisent et ce n'est pas demain la veille que l'on vous demandera des comptes. De plus, le PNG est encore peu fiable sous Internet Explorer.


Définir les tailles :

Il est préférable de toujours définir les tailles des images, permettant une rapidité de calcul inférieur pour leur affichage. Pour en désigner sa largeur ce sera son homonyne anglosaxon width qui sera utilisé et ce sera height pour sa hauteur. Ces deux attributs de img prendront comme valeur les tailles respectives de l'image et en pixels. Il donc également possible d'agrandir ou de rétraissir uen image par rapport à se taille réelle, mais il faut bien savoir que le fait de la rétrécir n'est qu'un écrasement des pixels, et que de ce fait, une image très grande réduite de cette façon à une petite taille s'affichera aussi lentement que si elle était grande.

Exemple : <img src="images/ex_cours.gif" width="80" height="60">

Résultat :



Afficher une infobulle sur l'image :

Pour afficher ce petit rectangle jaune qui apparait lorsque l'on passe la souris sur l'image, ce sera l'attribut alt de img qui sera utilisé. A la base utilisé pour les navigations sans images, il sert maintenant surtout pour sa fonction d'infobulle.

Exemple :
<img src="images/ex_cours.gif" alt="Enervante cette image, non ?">

Laissez votre curseur dessus :

Résultat :
Enervante cette image, non ?


Si on navigue en mode sans-images :

Résultat :
Enervante cette image, non ?
Remarque :
Comme vous pouvez le constater, une image qui a un problème d'affichage est représentée par un rectangle muni d'une petite croix rouge dans son coin supérieur gauche. Le texte de alt est donc affiché dedans pour indiquer à la base aux utilisateurs de navigateurs textes ce qu'ils auraient dû voir. En principe, le rectangle correspond à la dimension de l'image si ses tailles ont été indiquées (cf: plus haut). Si ce n'est pas le cas, il prend la taille du contenu de alt, comme dans cet exemple.


Ajouter une bordure :

Par logique anglosaxonne, border est là pour ça. Cet attribut de img prendra comme valeur l'épaisseur en pixels souhaité.


Exemple : <img src="images/ex_cours.gif" border="3">

Résultat :

Remarque :
Le bordure d'une image qui servira également de lien prendra les même codes de couleurs que les liens. Pour le cas concret le plus courant, la bordure sera bleu normalement, et violette si le visiteur a déjà actionné le lien.


Comment centrer une image ?

Cette question n'aurait en principe pas lieu d'être, mais il est peut-être préférable de la préciser. En principe, vous êtes actuellement capable de centrer une image. Pour cela, rappellez-vous de la façon dont on centre un texte, et pensez que c'est idem.

Exemple : <div align="center"><img src="images/ex_cours.gif" border="1" width="250" height="176" alt="Image centrée"></div>

Résultat :
Image centrée


Vous remarquerez au passage que j'ai ici utilisé tous les attributs vu dans ce chapitre en une seule fois.


Je tiens à préciser qu'il existe également un système de zone sensible utilisable sur les images qui permet de définir un endroit précis de l'image qui peut être cliqué.
Ce système fonctionant avec un code demandant des points précis de coordonnées de l'image, il s'avère vite très compliqué et plus prise de tête qu'autre chose. Je ne perdrais donc pas de temps à vous le détailler ici, c'est inutile, et je vous renvoi donc vers l'utilisation d'éditeurs HTML tels que Macromedia Dreamweaver.

Pour organiser tout cela, voyons à présent les tableaux, plus utiles que vous ne le pensez...



<< Précédent - Sommaire - Suivant >>

Un problème ? Quelque chose que vous n'avez pas saisit ?
Posez vos questions sur les forums(+) !


Toute reproduction interdite - Intégralement écrits par le Webmaster
Valid XHTML 1.0! Valid CSS!
By JSAND [All right reserved] - Windows est une marque de Microsoft Corporation
Toute copie compléte comme partielle sans autorisation est passible d'amende - Avertissements