SELFHTML: HTML/XHTML / Graphiques / incorporer des graphiques

	Incorporer des graphiques
	Généralités sur les graphiques Définir une référence de graphique Largeur et hauteur de graphiques Bordures autour de graphiques Noms pour les graphiques Descriptif pour les graphiques Autres informations

Généralités sur les graphiques

Pour incorporer des graphiques dans vos fichiers HTML, il vous faut référencer les fichiers aux endroits désirés dans le code source HTML. Les formats de fichiers graphiques appropriés au Web sont GIF et JPEG mais peu à peu aussi PNG (voyez à ce sujet formats graphiques pour pages Web).

Quand vous créez des fichiers HTML pour la toile, vous devez veiller à ce que les graphiques qui y sont référencés ne soient pas trop grands, car des graphiques importants occasionnent des temps de chargement longs et découragent l'utilisateur. Réduisez le cas échéant le nombre de couleurs pour vos graphiques, la taille de l'image et ne mettez pas trop de références graphiques dans un seul fichier HTML. Dans tous les cas, vous devez mentionner aussi les largeur et hauteur.

Les graphiques sont pour HTML des éléments incorporés. Dans la variante HTML "Strict" ces éléments doivent être placés dans des éléments de bloc par exemple dans un paragraphe de texte ou dans un passage commun ou également dans une cellule de tableau.

Avec une interface utilisateur graphique, telle que MS-Windows, Macintosh, KDE et autres, les navigateurs Web peuvent afficher les graphiques référencés directement dans leur fenêtre d'affichage. Les navigateurs Web pour des interfaces orientées texte (par exemple DOS en mode texte, Unix en mode texte) doivent appeler un programme de visualisation graphique séparé pour afficher un graphique.

Quand vous mettez en forme entièrement de façon graphique des fichiers HTML de votre projet Web, par exemple la page d'accueil, que vous n'utilisez presque pas de texte mais seulement des références de graphiques, vous compliquez l'identification du contenu de votre projet par les programmes de recherche automatique sont se servent beaucoup de services de recherche sur la toile. Dans le doute vous devez mettre en balance ce qui est pour vous le plus important: l'aspect graphique ou l'identification du contenu. Au cas où vous structurez d'importants fichiers HTML de votre projet WWW principalement avec des références graphiques il vous faut alors au moins utiliser la possibilité offerte par les Mentions Meta concernant le contenu.

Définir une référence de graphique

Vous pouvez référencer un graphique à un endroit de votre choix.

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<h1>Petit rat</h1>

<p><img src="sourisdansante.gif" alt="petit rat"></p>

</body>
</html>

Explication:

Pour les références de graphiques existent en HTML le repère <img> (img = image = image, src = source = source). Il s'agit d'un repère autonome sans contenu et ne nécessitant pas de repère de fermeture. Grâce à des attributs, vous déterminez les détails de la référence du graphique. Deux attributs sont obligatoires et doivent toujours être mentionnés:

Avec l'attribut src= vous précisez le fichier graphique désiré. S'y appliquent les règles pour référencer en HTML. Quand par exemple le fichier graphique se trouve dans le même répertoire que le fichier HTML où se trouve le fichier graphique, alors il suffit de mentionner simplement le nom du fichier du graphique - comme dans l'exemple ci-dessus. Le référencement avec des mentions de chemin relatives ou absolues est pourtant également possible de la même façon, par exemple:
<img src="repertoire/fichier.gif" alt="graphique"> <img src="repertoire/sousrep/fichier.gif" alt="graphique"> <img src="../fichier.gif alt="graphique""> <img src="../../../fichier.gif" alt="graphique"> <img src="../ailleurs/fichier.gif" alt="graphique">
Même le référencement avec une URI complète est possible par exemple:
<img src="http://actuel.fr.selfhtml.org/taggi01.gif" alt="Taggi">

Pour l'attribut alt= entrez une alternative en texte pour le cas où le graphique ne peut être affiché. Il existe de nombreuses raisons pour lesquelles un graphique ne peut pas être affiché; par exemple, parce que l'utilisateur a désactivé l'affichage de graphiques dans son navigateur, ou bien parce que l'utilisateur a interrompu le chargement de la page avant que le graphique ne soit transmis. L'alternative en texte peut être un simple mot mais peut être aussi un court descriptif comme par exemple:
<img src="vuedavion.jpg alt="vue aérienne du terrain du 27/05/2001 à environ 300m d'altitude">
L'attribut alt est obligatoire d'après le standard HTML. Si pour une raison quelconque, vous ne voulez pas noter d'alternative en texte, par exemple parce qu'il s'agit de "pixels transparents", alors notez alt="" - une chaîne de caractères vide comme valeur affectée.

Attention:

Vous pouvez donc incorporer des graphiques d'adresses externes dans vos pages sans autre formalité. Demandez cependant dans ce cas, l'autorisation de celui qui propose le graphique, car l'incorporation de graphiques est - à la différence du contenu des pages extérieures - une appropriation de contenus extérieurs. Il n'existe pas non plus de garantie que la référence de graphique fonctionnera toujours à l'avenir, car si le détenteur du site retire le graphique de ses pages ou le renomme il n'y aura plus affichée chez vous que ce que l'on appelle une broken image image au lien rompu.

Veillez lors de l'affectation de valeur à l'attribut src à respecter à tout prix les majuscules et minuscules des noms de fichiers et de répertoires. La plupart des ordinateurs serveurs tournent avec des systèmes d'exploitation qui différencient sévèrement les majuscules des minuscules. Le plus simple et le plus sûr est d'employer des minuscules pour tous les noms de fichiers et de répertoires - en faisant de même lors de l'attribution d'un nom quand vous référencez dans le fichier HTML.

Netscape interprète un attribut spécifique lowsrc=, que vous pouvez noter en plus de l'attribut src, et pour lequel vous mentionnez un fichier graphique moins gourmand en mémoire que le graphique référencé avec src= . Le graphique lowsrc et alors chargé en premier par le navigateur et il peut déjà l'afficher pendant que l'autre graphique est chargé. Cet attribut génère cependant du code HTML non valide et s'est avéré superflu dans la pratique.

Quand vous travaillez conformément à XHTML vous devez marquer l'élément img comme étant vide. Pour ce faire, notez le repère autonome sous la forme <img... />.
De plus amples renseignements à ce sujet dans le chapitre sur XHTML et HTML.

Largeur et hauteur de graphiques

Quand vous incorporez des graphiques dans des fichiers HTML que vous voulez proposer sur la toile, vous devez toujours mentionner la largeur et la hauteur du graphique. Ainsi le navigateur Web prend déjà dans le fichier HTML sa taille et ne doit pas attendre d'avoir lu l'information d'entête correspondante du fichier graphique. Cela lui permet de construire la page Web sans attendre, et, pour les graphiques qu'il n'a pas encore lus, de leur réserver déjà une place libre correspondant à leur taille. Quand vous ne mentionnez ni largeur ni hauteur, le navigateur attend par contre pour afficher la page Web d'avoir lu toutes les mentions de taille dans les fichiers graphiques incorporés, ou bien il doit corriger l'affichage à l'écran, ce qui n'est pas très esthétique.

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<h1>Ours dansant</h1>

<p><img src="oursdansant.gif" width="368" height="383" alt="ours dansant"></p>

</body>
</html>

Explication:

Avec l'attribut width= [pixels] mentionnez la largeur du graphique et avec height= [pixels] sa hauteur (width = largeur, height = hauteur).

Pour obtenir la largeur et la hauteur exactes d'un graphique, vous avez besoin soit d'un programme graphique qui affiche ces valeurs, soit d'un éditeur HTML qui lors de l'incorporation d'un graphique lit tout de suite ces données dans l'entête du fichier graphique et insère ces mentions automatiquement dans le repère <img>.

Attention:

Vous pouvez également faire des mentions sur la largeur et la hauteur d'un graphique qui diffèrent intentionnellement des dimensions effectives du graphique. Vous pouvez ainsi obtenir des effets de distorsion intéressants comme on en voit dans les dessins animés.

Outre des mentions en pixels pour width= et height= les mentions en pourcentage sont également permises. De telles mentions se réfèrent à l'espace disponible. Quand par exemple le graphique se trouve dans un paragraphe de texte normal, la mention width="100%", fait en sorte que le graphique est représenté sur toute la largeur de la fenêtre d'affichage (déduction faite des marges de la page Web affichée). Le graphique en sera déformé. Une mention en pourcentage est appropriée par exemple pour les graphiques qui représentent une ligne (comparez avec les barres (lignes de séparation)), pour étendre cette ligne sur la largeur totale.

Si vous avez un graphique que vous aimeriez répéter à un autre endroit en plus petit (par exemple un logo qui doit être affiché en grand sur la page d'accueil et en plus petit dans les sous-pages), vous n'avez pas besoin de deux graphiques. Il suffit pour représenter un graphique plus petit de réduire proportionnellement les données relatives à sa largeur et à sa hauteur. Si votre logo par exemple mesure 300 pixels de large sur 200 pixels de haut, vous pouvez le représenter deux fois plus petit en mentionnant pour l'incorporer width=150 height=100. Ce n'est cependant judicieux que si le grand graphique a déjà été affiché et se trouve dans la mémoire cache du navigateur WWW.

Bordures autour de graphiques

Vous pouvez décider que le navigateur dessine une bordure autour du graphique. Toutefois, l'attribut correspondant est classé en cours d'abandon et doit disparaître du standard HTML à l'avenir. L'encadrement est également possible avec les feuilles de style CSS qui offrent beaucoup plus de possibilités.

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<h1>Arbre au crépuscule</h1>

<p><img src="arbre.jpg" width="320" height="400" border="4" alt="Arbre au crépuscule"></p>

</body>
</html>

Explication:

En mentionnant border= dans la référence du graphique une bordure est définie autour du graphique (border = bordure). La valeur est donnée en pixels et exprime l'épaisseur de la bordure. La couleur de la bordure est celle qu'aurait le texte au même endroit.

Noms pour les graphiques

Vous pouvez décider d'attribuer un nom au fichier graphique. C'est judicieux en liaison avec JavaScript. Le nom d'un graphique peut par exemple être important pour l'objet JavaScript images.

Exemple:

<p><img src="arbre.jpg" width="320" height="400" name="vue_arbre" alt="arbre au crépuscule"></p>

Explication:

Avec name= à l'intérieur d'une référence graphique vous attribuez un nom au graphique. Le nom doit être placé entre guillemets, ne doit pas être trop long et ne peut comporter d'espaces, de caractères spéciaux ni de signes avec accent. Le premier signe doit être une lettre. Ensuite les chiffres sont également permis. Seuls les lettres, les chiffres et le tiret de soulignement (_), le trait d'union, (-), les deux points (:) ou le point (.) sont permis. En prenant JavaScript en considération, le nom ne peut contenir que les lettres, les chiffres et le tiret de soulignement (_). Les majuscules et les minuscules sont différenciées par des langages tels que JavaScript.

Descriptif pour les graphiques

Si la possibilité de noter une courte alternative en texte à un graphique avec alt= ne vous suffit pas, vous pouvez aussi à partir de HTML 4.0 établir un lien à un emplacement ou à un fichier où se trouvent de plus amples informations sur le graphique. Le navigateur pourrait par exemple ne proposer un lien avec cet endroit que si le graphique ne peut être affiché.

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<h1>Belle Époque</h1>

<p>
<img src="retro.jpg" width="271" height="265" alt="Belle Époque" longdesc="retro.htm">
</p>

</body>
</html>

Explication:

Avec l'attribut longdesc= vous pouvez établir un lien avec un endroit où le graphique sera décrit plus précisément sous forme de texte. Une URI est permise, c'est à dire que pour la mention s'appliquent les règles pour référencer en HTML.

Attention:

Seul Netscape 6.0 soutient cet attribut jusqu'alors et cela très secrètement: avec la touche droite de la souris cliquer sur le graphique et choisir l'option propriétés dans le menu contextuel, et dans la boite de dialogue qui apparaît alors, cliquer sur l'adresse figurant pour la description.

Autres informations

Dans le sommaire de référence HTML vous trouverez des données précisant où le repère <img> peut être mis, quels attributs il peut avoir et ce à quoi il faut veiller pour ces différents attributs :
référence pour les éléments pour les références de graphiques (<img>)
référence pour les attributs pour les références de graphiques (<img>)

Le chapitre graphisme contient une introduction sur les graphiques conformes pour la toile avec des exemples et des descriptions pour les différentes techniques graphiques.