Accueil

Internet
Logiciels
Sur le Net
Le Dicos
Liens

Pages Perso
HTML
Javascript
Images

Site
Sondages
Plan
Rechercher
Le Forum
Le Livre d'Or
Newsletters
Mail

Intègrer une Image

Formats - Balise - Attribut

Formats

Il existe deux formats d'images très courament utilisé sur le web, en raison de leurs compacité :

-> Gif : Ce format est principalement utilisé pour les images utilisant peu de couleurs. C'est pour cette raison que le nombre maximum de couleur est de 256. Seront en Gif, graphiques, logos, titres et boutons. C'est le format le plus utilisé. Son autre avantage indéniable est la possibilité de créer des images transparentes. Autrement dit, une zone transparente sera invisible, et prendra la couleur du fond.
Gif Gif Transparent Gif Animé

-> Jpg : Ce format est par contre utilisé pour les photos comptant un nombre important de couleurs. Toutes les photos seront donc mieux optimisées dans ce format. Il existe plusieurs niveaux de compressions pour diminuer la taille (en Kilo Octet) de l'image mais ceci en abaissant la qualité de l'image.

Ces deux formats sont donc spécifiques aux Web, car ils ont étés conçus pour prendre une place minimum. A vous de faire le juste milieu entre qualité et taille de l'image. On considère en général qun Gif prend entre 0 et 10 Ko, et un Jpg entre 5 et 150 Ko pour les grosses images. Si vos images dépassent ces intervales, pensez au temps de chargement de celles-ci pour le visiteur, et réduisez leurs taille.

Ces formats sont gérés par tous les logiciels de traitement d'image actuels : Paint Shop Pro, Photoshop... Procurez-en vous un pour manipuler ces formats, il vous sera indispensable de bien les connaître pour assurer le graphisme de votre site. Le meilleur moyen d'apprendre un de ces logiciel est d'acheter un bon livre sur le sujet, une méthode complête et rapide.

Balise

Voila la balise pour insérer une image dans un document : <IMG>. Mais celle-ci n'est pas suffisante pour insérer une image et choisir la façon dont elle s'affichera. Donc nous la compléterons avec ses attributs, sans quoi, voila ce que nous obtiendrons :

Attibuts

Les attributs d'une image sont essentiels car ils permettent de définir exactement les propriétés de l'affichage de l'image sur la page. En voici la liste :

SRC : Cet attribut est la plus importante. Elle définie le chemin d'accès de l'image, son emplacement dans le site. Ce chemin d'accès se défini comme dans un explorateur Windows, avec des / pour séparer les dossiers et .. pour revenir dans le dossier précedent. Imaginons que votre page HTML se trouve dans le dossier "pages" et votre image dans "images", voici le code à copier :

<IMG SRC="../images/camion.gif"> :

BORDER : Comme son nom l'indique, il sert à indiquer la bordure autour d'une image. Un attribut à préciser losque l'image est un lien sinon, une bordure de 1 est appliquée par défaut.

<IMG BORDER=0>
<IMG BORDER=4>

Le nombre doit être au minimum de 0 et va jusqu'à l'infini. Mais il est préférable de ne pas dépasser 3 ou 4, car une bordure épaisse enlaidit l'image.

ALIGN : Il est possible grace à cette balise de choisir l'alignement vertical du texte à coté de l'image, comme dans cet exemple :

Texte aligné en haut
Texte aligné au milieu
Texte aligné en bas

ALT : Cet attribut permet de fournir un texte alternatif à l'image lorsque son affichage est impossible où interdit par le navigateur si l'option a été activé. Soit le texte est affiché si l'image ne s'affiche pas, soit le texte apparait au pointage de la souris :

Camion Camion

WIDTH & HEIGHT : Ces deux attributs définissent la taille de l'affichage l'image. Il peuvent soit être exprimé en Pixel, soit en Pourcentage, calculé par rapport à la taille d'origine. Si un seul de ces attibuts est indiqués, le second est automatiquement calculépour que l'image garde sa proportion :

<IMG SRC="camion.gif"> <IMG SRC="camion.gif" WIDTH=50%> <IMG SRC="camion.gif" WIDTH=120> <IMG SRC="camion.gif" WIDTH=150 HEIGHT=50>


Prochaine Leçon ->Création de Liens