KIT GRAPHIQUE - Télécharger des kits graphiques

Les images ou logos sont une partie très importante en HTML car elles permettent de personnaliser vos pages, il en existe plusieurs formats : GIF, JPG, PNG, BMP.

• Balises

On utilise la balise IMG et l'attribut SRC, cet attribut indique l' url de l'image et est obligatoire.

On l'utilise comme ceci: <img src="exemple/hippo.jpg" / >
ce qui donne:

pour positionner l'image on peut utulisez la balises P comme pour le texte
ex pour une image au centre <p align="center"><img src="exemple/hippo.jpg" / ></p>
ce qui donne:

Attribut: align

L'attribut align utilise plusieurs valeurs et permet de positionner l'image par rapport à un texte (middle, top, bottom) utiliser pour les petits commentaires et (left, right) pour noyer l'image dans le texte .

Align Middle: aligne le texte à mi-hauteur de l'image
ex: <img src="exemple/hipo.jpg" align="middle"/ > Tipo, l'hippo rigolo

ce qui donne: Tipo, l'hippo rigolo Grand exemple)

Align Top: aligne le texte au niveau supérieur de l'image
ex: <img src="exemple/hipo.jpg" align="top"/ > Tipo, l'hippo rigolo

ce qui donne: Tipo, l'hippo rigolo (Grand exemple)

Align Bottom: aligne le texte au niveau inférieure de l'image
ex: <img src="exemple/hipo.jpg" align="bottom"/ > Tipo, l'hippo rigolo

ce qui donne: Tipo, l'hippo rigolo (Grand exemple)

Align left: aligne le texte à gauche de l'image
ex: <img src="exemple/hipo.jpg" align="left"/ > Tipo, l'hippo rigolo
ce qui donne:
Tipo, l'hippo rigolo (Grand exemple)

Align right: aligne le texte à droite de l'image
ex: <img src="exemple/hipo.jpg" align="right"/ > Tipo, l'hippo rigolo
ce qui donne:
Tipo, l'hippo rigolo (Grand exemple)

Attribut: alt

L'attribut alt permet d'afficher un texte à la place d'une image manquante
ex: <img src="exemple/hipo.jpg" alt="Tipo, l'hipo rigolo" / >

ce qui donne:

Attribut: border

l'attribut Border permet de mettre ou d'enlever (dans la cas ou l'image sert de lien) une bordure à l'image, il est esprimé en pixels, par default 0 et en cas de liens 1
ex: <img src="exemple/hipo.jpg" border="2"/ > Tipo, l'hippo rigolo
ce qui donne:
Tipo, l'hippo rigolo

Attribut: height et width

Les attributs height et width permettent de redimensionner l'image, la valeur est exprimé en pixels
ex: <img src="exemple/hipo.jpg" > <img src="exemple/hipo.jpg" width="70" height="100" >
ce qui donne:

Attribut: hspace et vspace

Les attributs hspace et vspace permettent de créer un espace autour de l'image, on les utilise surtout avec l'attribut align pour me pas coller les textes à l'image, leurs valeurs s'exprime en pixels
ex à l'interieur d'un cadre :<img src="exemple/hipo.jpg" > <img src="exemple/hipo.jpg" vspace="20" hspace="20"

Tipo

Tipo

(grand exemple)

Vous pouvez utiliser vspace et hspace seul.

---

<<Précédent | Retour Tutos | Retour HTML | Suivant>>