J'aimerais présenter mon premier tuto (bon plutôt basique mais faut bien commencer par quelque chose non ?
).
Insérer une image est plutôt simple mais, pour un débutant, il peut y avoir un petit souci dans le codage ou dans je ne sais quoi...
Bon, faisons les choses dans l'ordre :
Pour insérer une image on doit utiliser la balise <img/> que l'on placera dans le code Html entre les balises <body> </body>. Vous remarquerez qu'en xHTML, on mettra un / à la fin de la balise.
On utilise principalement 2 attributs. Il existe l'attribut scrqui est essentiel à l'affichage de l'image. Le second attribut est alt. Ce dernier est obligatoire dans le xHTML 1.0 mais pas en HTML. Il existe plusieurs autres attributs (voir liste en fin de tutorial).
Petites explications :
L'attribut src permet d'indiquer à quel endroit se trouve l'image ( on peut l'indiquer avec un lien absolu ( en utilisant le fameux http ) ou un lien relatif ( qui correspond au dossier ou au sous dossier ou se trouve l'image ).
L'attribut alt permet de donner un nom à l'image au cas où il y aurait un problème d'affichage (image au mauvais endroit ou absente par exemple). De plus, il est apparemment dit que si on ne met pas cet attribut le site ne serait pas validé en xHTML ( ce qui serait dommage non ?
).
Enfin, voici le code proprement dit :
Lien relatif :
Code :
- Code: Tout sélectionner
<img src="images/pneu.gif" alt="pneu" />
Lien absolu :
Code :
- Code: Tout sélectionner
<img src="http://www.lesitedupneu.com/images/pneu.gif" alt="pneu" />
On peut bien sûr apporter d'autre plus à une image sur un site mais ce n'est pas l'objet de ce petit tuto !!!!
Liste d'atributs d'affichage des images (à la demande de Patoch
) :
align (bottom ; center ; left ; middle ; top right)
alt (Texte alternatif au cas où l'image ne s'affiche pas)
border (Nombre de pixels de la bordure. La couleur de la bordure peut être définie par l'attribut LINK ou TEXT de la balise <BODY> )
height (Hauteur de l'image (en pixels ou en %))
hspace (Nombre de pixels d'ajustement entre l'image et le texte adjacent (horizontalement).
longdesc (URL de la description de l'image)
lowsrc (Image alternative(généralemnt plus petite) affichée le temps que la vraie image soit chargée par le navigateur)
name (Permet de définir un nom pour l'image. Cet attribut est notamment utile pour la gestion des images en JavaScript)
src (URL de l'image)
title (Texte alternatif au cas où l'image ne s'affiche pas)
semap (URL ou nom de l'ancre définissant l'image réactive)
vspace (Nombre de pixels d'ajustement entre l'image et le texte verticalement)
width (Largeur de l'image en pixels ou en %)
Bonne chance les pinguins!!
à bientôt sur la glace
