Visites

   visiteurs

   visiteurs en ligne

TOUS LES ARTICLES

Fermer GUITARE DEBUTANT

Fermer HARMONIE

Fermer INFORMATIQUE

Fermer SON

DES VIDEOS PERSO

Fermer La Caina (lounge music)

Fermer Rock en Stock

Fermer Star d'un Jour (concours de chant)

Fermer les armures ont des oreilles

PHOTOS

Fermer  diaporamas

Webmaster - Infos
Préférences

Se reconnecter
---

Votre nom (ou pseudo) :

Votre code secret


 Nombre de membres 23 membres


Connectés :

( personne )
icone informatique.pngINFORMATIQUE - XHTML - insérer une image

Les balises fonctionnent en général par paire. Il existe aussi des balises seules que l’on a pas besoin de refermer. Ce sont les balises "auto-fermantes". Dans ce cas elles ont la forme <balise />. Attention, notez bien qu’il y a un espace entre "balise" et "/". Elles servent à insérer des éléments dans la page.

Nous allons maintenant apprendre à insérer une image. Pour cet exemple je vais prendre comme image, le logo du site musikos.fr "logo.jpg". L’extension ".jpg" indique que ce fichier est une image. Bien entendu afin de préparer cette insertion d’image, j’ai préalablement déposé le fichier "logo.jpg" dans le dossier "Mon Site Web".
En XHTML, il existe une balise (auto-fermante) qui va nous servir à insérer une image dans notre page. C’est la balise <img />
Il est évident que l’insertion de cette balise sous cette forme, nous indique bien que l’on veut insérer une image, mais déjà on peut se demander : quelle image ?
C’est là qu’interviennent les attributs

LES ATTRIBUTS

Les balises peuvent également posséder des attributs, c’est à dire des précisions les concernant.

Prenons l’exemple de notre balise <img />
Cette balise va nous permettre d’insérer une image dans notre page. C’est une balise auto-fermante ; nous n’avons pas besoin de la refermer par une balise fermante. On se rend compte que cette balise n’indique pas le nom de l’image (la source) que l’on veut insérer. On va donc rajouter à l’intérieur de cette balise ce que l’on appelle un attribut. Notre balise va donc prendre la forme :

<img src="logo.jpg" />

Nous avons donc ici notre premier attribut src="logo.jpg"

Un attribut se compose en deux parties :
- Le nom de l’attribut. Dans l’exemple précédent le nom est : scr=
- La valeur de l’attribut. Dans l’exemple précédent la valeur est : "logo.jpg" (la valeur d’un attribut se trouve toujours entre guillemet).

Une balise peut contenir plusieurs attributs. Nous allons donc rajouter l’attribut alt=
Cet attribut suivit de sa valeur (entre guillemet) sous forme de texte, permet qu’un ordinateur (équipé pour un malvoyant) lise à voix haute une description de l’image (ou la transforme en braille).

<img src="logo.jpg" alt="voici le logo du site musikos.fr" />

Nous pouvons également agir sur la taille de l’image à l’écran grâce à deux attributs supplémentaires :
- L’attribut width= indiquant la largeur en pixels de notre image.
- L’attribut height= indiquant la hauteur en pixels de notre image.

<img src="logo.jpg" width="143" height="123" alt="voici le logo du site musikos.fr />

Donc si l’on traduit la ligne de code ci-dessus, nous avons :

- la balise : je veux insérer une image (voici le code --->) <img---------- />
- 1er attribut : Cette image va être le fichier "logo.jpg" (voici le code --->) src="logo.jpg"
- 2eme attribut : Sa largeur va être de 143 pixels (voici le code --->) width="143"
- 3eme attribut : Sa hauteur va être de 123 pixels (voici le code --->) height="123"
- 4eme attribut : Si un malvoyant pointe sur cette image, je veux que son synthétiseur vocal lui annonce : "voici le logo du site musikos.fr" (voici le code --->) alt="voici le logo du site musikos.fr"

Pour la balise <img /> les attributs src= et alt= sont obligatoires. Les attributs width= et height= sont facultatifs (si absents alors l’image aura sa taille d’origine).

IMPORTANT !

La balise <img /> doit obligatoirement se situer dans un paragraphe, c’est à dire entre les balises <p> et </p>
Les attributs ne se mettent que dans les balises entrantes ou les balises auto-fermantes.
Chaque attribut doit impérativement avoir une valeur.
Les valeurs des attributs sont entre guillemet.


Date de création : 23/11/2010 @ 19:20
Dernière modification : 23/11/2010 @ 19:20
Catégorie : INFORMATIQUE
Page lue 3683 fois


Imprimer l'article Imprimer l'article


react.gifRéactions à cet article

Personne n'a encore laissé de commentaire.
Soyez donc le premier !


cadeau.gifSpécial !

 

me motiver pour continuer
Recherche




Annonces
^ Haut ^