[XHTML] Les images

Voici un petit - ou grand je ne sais pas encore xD - tuto sur les images. (: Car en effet, un site sans images c'est ~~moche~~ fade. Et justement... Je suis là pour le défader (O_o) un peu. xD

Déjà, vous devez savoir qu'une image peut être de plusieurs formats mais qu'elle n'en a qu'un seul. Le plus léger des formats est le jpeg. Mais il en existe beaucoup d'autres comme le gif, le png et le bmp. Pour les sites on se sert beaucoup du png car ce format gère ce que l'on appelle la transparence, mais c'est une autre histoire. (x

On retiendra que le jpg est le plus répandu et le plus utilisé pour ce qui est photo.
Le png est utilisé pour ce qui n'est pas "photo". Il existe deux versions 8 bits et 24 bits ce qui apporte un changement au niveau des couleurs. On note qu'il gère la transparence et que c'est le format le plus récent. IE 6 ne gère pas la transparence.
Le gif est vieux et très répandu par habitude. Le png est mieux que le gif car l'image est plus légère et les couleurs plus jolies. Toutefois, le gif est - ou peut être - animé contrairement au png.

Le bmp est à bannir car il est mal supporté sur le web.

Pensez à enregistrer vos images de la manière suivante :
pas de majuscules
pas d'accent
pas de caractères spéciaux
pas d'espace
extension en minuscule

Insérer une image dans une page web.

Ouuuuuais ! Ca devient enfin intéressant xD

Pour mettre une image sur un site on utilise une balise seule <img />
Deux attributs sont indispensables pour cette balise.
src : qui indique où est l'image. En général elle se trouve dans un dossier séparé appelé images. Ca marche comme pour un lien ; donc le chemin est soit relatif soit.. Absolu. C'est bien, vous suivez. (x
alt : ou texte alternatif. C'est un bidule qui décrit rapidement votre image. Lorsque que votre image ne s'affiche pas, c'est ce petit texte qui apparaîtra. Il est notamment utile pour les personnes handicapées.

Pour l'exemple, je vous demande d'enregistrer dans le bon dossier et avec un bon nom cette image : https://i.servimg.com/u/f64/13/84/03/86/476610.jpg

Code:


oooooh ! Les jolis n'arbres :D 
<img src="images/palmiers.jpg" alt="Photo de Palmiers" title="C'est beau hein ? (:"/>


Simple non ? (:
Comme dans l'exemple ci dessus, vous pouvez ajouter une bulle d'aide. C'est à ça que sert l'attribut title.

Une image peut-être cliquable. Pour cela il suffit d'entourer son code par un lien comme ceux que l'on a vu précédemment.

Code:


Et voici une image cliquable : 
<a href="http://attractive.1fr1.net/"><img src="images/palmiers.jpg" alt="Photo de Palmiers" title="Clique pour voyager !" /></a>


Taaaaaaaaaadaaaaaaaaaaaam !
Le petit ennui est le cadre autour de la photo. Heureusement, on peut l'enlever... Avec du CSS !
*faut que je pense à écrire ce tuto xD*

[/font][/color]