« Le langage HTML/Images » : différence entre les versions

Un livre de Wikilivres.
Contenu supprimé Contenu ajouté
+
+ correction orthographe/grammaire
Ligne 1 : Ligne 1 :
<noinclude>{{Le langage HTML}}</noinclude>
<noinclude>{{Le langage HTML}}</noinclude>


Une image est insérée avec la balise <code>img</code> en spécifiant avec l'attribut <code>src</code> ''(source)'' le chemin de l'image à inclure (sous la forme d'un adresse réticulaire, URL) et avec l'attribut <code>alt</code> l'éventuel texte de remplacement de l'image :
Une image est insérée avec la balise <code>img</code> en spécifiant avec l'attribut <code>src</code> ''(source)'' le chemin de l'image à inclure (sous la forme d'une adresse réticulaire, URL) et avec l'attribut <code>alt</code> l'éventuel texte de remplacement de l'image :
; XHTML
; XHTML
&lt;img src="mon_image.png" alt="texte si l'image n'est pas affichée" /&gt;
&lt;img src="mon_image.png" alt="texte si l'image n'est pas affichée" /&gt;
Ligne 19 : Ligne 19 :
== L'attribut <code>src</code> ==
== L'attribut <code>src</code> ==


L'attribut <code>src</code> contient donc l'adresse à laquelle on va charcher l'image (voir le chapitre ''[[Programmation HTML|Liens]]''). On peut utiliser une adresse absolue ou relative.
L'attribut <code>src</code> contient donc l'adresse à laquelle on va chercher l'image (voir le chapitre ''[[Programmation HTML|Liens]]''). On peut utiliser une adresse absolue ou relative.


Il faut cependant proscrire l'inclusion des objets (images, sons, vidéo) situés sur d'autres sites, ce que l'on appelle des « liens à chaud » ''(hot links)''. En effet, cela génère du traffic sur le serveur cible au lieu de son propre serveur, ce que le serveur cible peut considérer comme du « vol de [[w:bande passante|bande passante]] ». Par ailleurs, le fait que l'on utilise l'objet original n'implique pas un respect du [[w:droit d'auteur|droit d'auteur]] : certes on n'a pas fait de copie de l'objet, mais on utilise l'objet, et cela doit se faire avec l'accord de l'auteur et/ou de ses ayants droit.
Il faut cependant proscrire l'inclusion des objets (images, sons, vidéo) situés sur d'autres sites, ce que l'on appelle des « liens à chaud » ''(hot links)''. En effet, cela génère du trafic sur le serveur cible au lieu de son propre serveur, ce que le serveur cible peut considérer comme du « vol de [[w:bande passante|bande passante]] ». Par ailleurs, le fait que l'on utilise l'objet original n'implique pas un respect du [[w:droit d'auteur|droit d'auteur]] : certes on n'a pas fait de copie de l'objet, mais on utilise l'objet, et cela doit se faire avec l'accord de l'auteur et/ou de ses ayants-droit.


Donc, si par exemple notre page web est <code><nowiki>http://www.monsite.com/mapage.html</nowiki></code> et que l'on veut inclure l'image <code><nowiki>http://www.autresite.com/images/img1.png</nowiki></code>, les deux solutions acceptables sont :
Donc, si par exemple notre page web est <code><nowiki>http://www.monsite.com/mapage.html</nowiki></code> et que l'on veut inclure l'image <code><nowiki>http://www.autresite.com/images/img1.png</nowiki></code>, les deux solutions acceptables sont :
* demander l'utorisation au toilemestre du site <code><nowiki>http://www.autresite.com/</nowiki></code>, importer l'image sur son propre site et l'exploiter en local, en affichant l'origine de l'image et les conditions d'utilisation imposées par le site d'origine ;
* demander l'autorisation au toilemestre du site <code><nowiki>http://www.autresite.com/</nowiki></code>, importer l'image sur son propre site et l'exploiter en local, en affichant l'origine de l'image et les conditions d'utilisation imposées par le site d'origine ;
: par exemple, si l'on place l'image en <code><nowiki>http://www.monsite.com/image/img1.png</nowiki></code>, on peut écrire
: par exemple, si l'on place l'image en <code><nowiki>http://www.monsite.com/image/img1.png</nowiki></code>, on peut écrire
{{vert|&lt;img}} src="/image/img1.png" … {{vert|/>}} {{vert|&lt;br />}}
{{vert|&lt;img}} src="/image/img1.png" … {{vert|/>}} {{vert|&lt;br />}}
Ligne 30 : Ligne 30 :
{{vert|&lt;a}} href="<nowiki>http://www.autresite.com/</nowiki>">Autresite.com{{vert|&lt;/a>}},
{{vert|&lt;a}} href="<nowiki>http://www.autresite.com/</nowiki>">Autresite.com{{vert|&lt;/a>}},
tous droits réservés
tous droits réservés
* ne pas inclure l'image mais faire le liens vers cette image, ou mieux vers la page Web contenant cette image ; par exemple
* ne pas inclure l'image mais faire le lien vers cette image, ou mieux vers la page Web contenant cette image ; par exemple
Voir l'illustration sur l'article dédié
Voir l'illustration sur l'article dédié
du site {{vert|&lt;a}} href="<nowiki>http://www.autresite.com/lapage.html</nowiki>"{{vert|>}}Autresite.com{{vert|&lt;/a>}}
du site {{vert|&lt;a}} href="<nowiki>http://www.autresite.com/lapage.html</nowiki>"{{vert|>}}Autresite.com{{vert|&lt;/a>}}
Ligne 38 : Ligne 38 :
Il est nécessaire de donner, pour chaque image, un texte de remplacement pour les navigateurs ne supportant pas l'affichage d'images ou pour des raisons d'[[w:Accessibilité du Web|accessibilité des pages web]] (cf normes W3C). Le texte de remplacement est spécifié par l'attribut <code>alt</code> :
Il est nécessaire de donner, pour chaque image, un texte de remplacement pour les navigateurs ne supportant pas l'affichage d'images ou pour des raisons d'[[w:Accessibilité du Web|accessibilité des pages web]] (cf normes W3C). Le texte de remplacement est spécifié par l'attribut <code>alt</code> :
&lt;img src="bienvenue.png" alt="Bienvenue !" /&gt;
&lt;img src="bienvenue.png" alt="Bienvenue !" /&gt;



Lorsqu'une image ne véhicule pas d'information, ce texte doit être vide (n'oubliez pas que le <code>alt</code> est lu ou rendu en braille pour un malvoyant), l'attribut est alors présent sous la forme :
Lorsqu'une image ne véhicule pas d'information, ce texte doit être vide (n'oubliez pas que le <code>alt</code> est lu ou rendu en braille pour un malvoyant), l'attribut est alors présent sous la forme :

Version du 4 mai 2009 à 12:46

Une image est insérée avec la balise img en spécifiant avec l'attribut src (source) le chemin de l'image à inclure (sous la forme d'une adresse réticulaire, URL) et avec l'attribut alt l'éventuel texte de remplacement de l'image :

XHTML
<img src="mon_image.png" alt="texte si l'image n'est pas affichée" />
HTML
<img src="mon_image.png" alt="texte si l'image n'est pas affichée">

Par la suite, nous considérerons du XHTML. Pour du HTML, supprimez simplement la barre de fraction avant la fermeture de la balise.

La balise img peut avoir divers attributs facultatifs. Seuls les attributs src et alt sont obligatoires.

  • align : alignement de l'image (peut prendre les valeurs top, bottom, middle, left ou right) ;
  • alt : texte de remplacement (affiché si le navigateur ne peut afficher l'image) ; cet attribut est obligatoire, il permet notamment à un malvoyant de comprendre l'image qu'il ne peut voir (son logiciel lit le texte à voix haute ou le transforme en braille) ;
  • title : titre de l'image (s'affiche en info bulle dans le navigateur) ;
  • border : largeur de la bordure de l'image (valeur exprimée en pixels) ;
  • height : hauteur de l'image (si aucune valeur spécifiée, l'image garde sa hauteur normale) ;
  • width : largeur de l'image (si aucune valeur spécifiée, l'image garde sa largeur normale).

L'attribut src

L'attribut src contient donc l'adresse à laquelle on va chercher l'image (voir le chapitre Liens). On peut utiliser une adresse absolue ou relative.

Il faut cependant proscrire l'inclusion des objets (images, sons, vidéo) situés sur d'autres sites, ce que l'on appelle des « liens à chaud » (hot links). En effet, cela génère du trafic sur le serveur cible au lieu de son propre serveur, ce que le serveur cible peut considérer comme du « vol de bande passante ». Par ailleurs, le fait que l'on utilise l'objet original n'implique pas un respect du droit d'auteur : certes on n'a pas fait de copie de l'objet, mais on utilise l'objet, et cela doit se faire avec l'accord de l'auteur et/ou de ses ayants-droit.

Donc, si par exemple notre page web est http://www.monsite.com/mapage.html et que l'on veut inclure l'image http://www.autresite.com/images/img1.png, les deux solutions acceptables sont :

  • demander l'autorisation au toilemestre du site http://www.autresite.com/, importer l'image sur son propre site et l'exploiter en local, en affichant l'origine de l'image et les conditions d'utilisation imposées par le site d'origine ;
par exemple, si l'on place l'image en http://www.monsite.com/image/img1.png, on peut écrire
<img src="/image/img1.png" … /> <br />
Reproduit avec l'aimable autorisation de
<a href="http://www.autresite.com/">Autresite.com</a>,
tous droits réservés 
  • ne pas inclure l'image mais faire le lien vers cette image, ou mieux vers la page Web contenant cette image ; par exemple
Voir l'illustration sur l'article dédié
du site <a href="http://www.autresite.com/lapage.html">Autresite.com</a>

L'attribut alt

Il est nécessaire de donner, pour chaque image, un texte de remplacement pour les navigateurs ne supportant pas l'affichage d'images ou pour des raisons d'accessibilité des pages web (cf normes W3C). Le texte de remplacement est spécifié par l'attribut alt :

<img src="bienvenue.png" alt="Bienvenue !" />

Lorsqu'une image ne véhicule pas d'information, ce texte doit être vide (n'oubliez pas que le alt est lu ou rendu en braille pour un malvoyant), l'attribut est alors présent sous la forme :

<img src="image_decorative.png" alt="" />

Note
Microsoft Internet Explorer affiche le texte alternatif dans une info-bulle ; ce comportement est erroné puisque c'est normalement le titre (voir ci-dessous) qui est affiché en info-bulle.

L'attribut title

Il est possible d'attribuer un titre à chaque image en plus de l'information alternative (alt). L'attribut title doit contenir une information optionnelle sur l'image, ou reproduire l'attribut alt: Les navigateurs affichent cette information dans une info bulle :

<img src="renard.png" alt="Renard en promenade" title="Renard en promenade" />
Remarque
Les attributs alt et title peuvent être cumulés.

Les attributs height et width

Si l'on omet ces attributs, l'image s'affiche en grandeur réelle (pixel pour pixel).

Si l'on indique une des dimensions (la largeur ou la hauteur), l'autre dimension est calculée pour que l'image s'affiche avec ses proportions originales.

Le fait d'indiquer les deux dimensions peut faciliter l'affichage : les images sont chargées après le texte, le navigateur peut ainsi réserver la place nécessaire, sinon, il doit décaler le texte au fur et à mesure que les images sont chargées. Il peut donc être intéressant d'indiquer les dimensions même si l'on utilise les dimensions originales de l'image. Cependant, l'auteur doit bien s'assurer que les proportions (rapport largeur/hauteur) sont respectées, sous peine que l'image s'affiche déformée.