Guidegratuit

GUIDEGRATUIT.COM

Apprenez à créer un site en HTML simplement et progressivement...

Accueil

Introduction importante
Le HTML c'est quoi ?
Notre projet
Equipez vous

Votre première page
Gérer le texte
Mise en page
Images
Tableaux
Liens
Couleurs
Formulaires
Hébergeurs de sites
Mise en ligne FTP
Frames
Autres cours

Résumé des balises
Le dico du site
Vos questions (F.A.Q.)
Le Forum
Liens utiles

Contact webmaster
Copyright

LES IMAGES

Nous avons fait le tour des bases de la présentation d'un texte, c'est bien... Mais un texte sans image c'est un peu ennuyeux... Alors voyons maintenant comment insérer des images dans notre page HTML.

Quelle image pour le web ?

Commençons par récupérer une image. Vous pouvez prendre n'importe quelle image à partir du moment où son extension est reconnu par le navigateur. Les extensions reconnues et particulièrement utilisées sont les images .GIF (images en 256 couleurs maximum), les images .JPG (16 millions de couleurs) ou parfois les .BMP.

Attention tout de même pour les .BMP, n'oubliez pas que vous travaillez pour Internet et pas pour un CD Rom ! Il faut garder à l'esprit que votre visiteur n'a pas forcément une connexion extrèmement rapide. Choisissez donc une image légère en ko ! Un ordre d'idée ? Je vous dirais de ne jamais dépasser les 60 ko d'images par page mais c'est également du cas par cas en fonction de votre site (Un CV devra évidemment être rapide à charger mais un gallerie de photos pourra être plus longue).

Pour notre exercice nous prendrons une image nommée "monimage.gif" que je vous fournis ci-dessous.

il s'agit d'un gif animé.

Pour l'enregistrer sur votre disque faites un clic droit dessus et "enregistrer l'image sous..".

Important : mettez cette image dans le même repertoire que votre page HTML normalement nommée "cv.html".

Vous remarquerez au passage (et je le souligne une fois de plus) que le nom de notre image ne comporte ni espace, ni majuscule, ni signes spéciaux afin d'être disponible en ligne (que ceux qui ne comprennent pas relisent les premiers cours :)))) ...).

Insérer l'image dans la page.

Vous êtes d'accord avec moi je pense, nous avons dans le même repertoire une image (monimage.gif) et une page HTML (cv.html) !?!
Nous allons donc devoir dire à notre navigateur : "affiche moi l'image monimage.gif" ! Rien de plus simple, suivez le guide :

La balise à utiliser est plus longue que d'habitude, il faut en effet taper :

<IMG SRC="monimage.gif">

Mon dieu que c'était difficile n'est ce pas :) ? J'explique maintenant le code : IMG signifie IMAGE et SRC signifie SOURCE... Vous dites donc au navigateur que le fichier image se nomme "monimage.gif", il le comprendra très bien et l'affichera ! Une preuve ? Allons y !

Prenez votre fichier "cv.html" et ouvrez le à l'aide du Bloc Notes de windows...
Ajoutez le lien vers l'image sous votre adresse et profitez en également pour retirer le gras et l'italique sur votre adresse (ça vous fera réviser :) ...)

Le résultat devrait donc être le suivant :

<HTML>

<BODY>
<CENTER><H2>C.V. Interactif</H2>
<HR WIDTH=25%></CENTER>
<I>Pierre</I> <B>Durand</B>
15, rue Manin - 75019 Paris
<IMG SRC="monimage.gif">
</BODY>

</HTML>

Voici le résultat que vous devez obtenir à l'écran :

Cliquez ici pour voir le résultat dans une fenêtre de navigateur

N'oubliez pas que votre image doit être dans le même repertoire que votre page HTML pour réussir l'exercice ci-dessus. Nous verrons prochainement comment organiser les fichiers dans plusieurs dossiers...

Préciser la taille des images.

Vous avez réussi ? Bravo et continuons donc... Nous allons voir comment préciser la taille d'une image. Quelle utilité me direz vous puisque l'image s'affiche correctement sans donner sa taille ? Eh bien il y a deux utilités principales :

1- Si vous avez précisé la taille de l'image dans la balise toute votre page s'affichera d'un coup (en laissant les emplacements des images vides) puis, une fois que tous les textes seront affichés, les images se chargeront ! Donc, si vous avez une page chargée en image, cela n'empéchera pas votre visiteur de lire les textes en attendant le chargement complet des images.
Si vous n'avez pas précisé les tailles des images dans la balise la page arrêtera de se charger à chaque fois qu'il y a une image à afficher... C'est ennuyeux !

2- Cela pourra également vous permettre de déformer une image (de lui donner la largeur et la hauteur de votre choix) ! Cela permettra d'aggrandir ou de réduire une photo, mais également de pratiquer de nombreuses astuces de mise en page grâce à des images transparentes ou de couleur unique... mais nous verrons ça plus tard... Comment ça ? Vous en avez marre que je dise "on verra ça plus tard" ? OK ! Voyons ça maintenant alors :)

Prenons une image de 5 pixels x 5 pixels toute rouge :

et nommée très justement imagerouge.gif :)

Enregistrez cette image (de la même façon que "monimage.gif") et apprenons maintenant la nouvelle balise :

<IMG SRC="imagerouge.gif" WIDTH="50" HEIGHT="2"> où WIDTH signifie largeur et HEIGHT signifie hauteur !
Le résultat sera une déformation de mon image originale en aggrandissant la largeur a 50 pixels et en réduisant la hauteur à 2 pixels !

Le résultat est le suivant :

une petite ligne rouge qui pourra remplacer avantageusement la balise <HR> parfois :)

Magnifique non ? L'image étant toute rouge la déformation ne se voit pas mais avec une image comme "monimage.gif" regardez le résultat de <IMG SRC="monimage.gif" WIDTH="150" HEIGHT="20">

une grosse déformation très laide mais qui pourra vous donner des idées !

Comment connaitre la taille d'une image ?

Vous avez une image dont vous ne connaissez pas la taille en pixel ? Utilisez un éditeur d'image ou tout simplement faites là glisser dans votre navigateur puis faites un clic droit dessus et choisissez "Propriétés" dans le menu déroulant !

Reprenons le fichier "cv.html" et le Bloc Notes de windows...

Ajoutez à la balise de l'image la largeur (30 pixels) et la hauteur (28 pixels) de l'image pour permettre l'affichage rapide de la page (même si pour le moment cela ne se voit pas).

Le résultat sera donc :

<HTML>

<BODY>
<CENTER><H2>C.V. Interactif</H2>
<HR WIDTH=25%></CENTER>
<I>Pierre</I> <B>Durand</B>
15, rue Manin - 75019 Paris
<IMG SRC="monimage.gif" WIDTH="30" HEIGHT="28" >
</BODY>

</HTML>

<IMG SRC="nomdevotreimage.extension" WIDTH="largeurenpixel" HEIGHT="hauteurenpixel"> : pour insérer vos images.