SELFHTML/Quickbar
HTML
Graphiques en HTML SELFHTML/Quickbar
HTML
Graphiques en HTML
Référencer les graphiques (généralités)Pour incorporer des graphiques dans vos fichiers HTML, il vous faut
référencer les fichiers aux endroits désirés. Les formats de fichiers
graphiques appropriés au WWW sont GIF et JPEG (voyez à ce sujet 
graphiques appropriés au WWW).
<img src="fichier.gif"> <img src="fichier.jpg"> |
Le référence de graphique commence avec <img src= (img = image = image, src = source = source). Après le signe égal entrez le nom du fichier graphique, destination du lien (dans les exemples: "fichier.gif" ou. "fichier.jpg"). Le nom du fichier doit figurer entre guillemets. La commande pour la référence de graphique se termine par >.
Les exemples ci-dessus supposent que le fichier graphique se trouve dans le
même répertoire que le fichier HTML dans lequel le fichier graphique est
référencé. Vous pouvez référencer également des 
Graphiques dans d'autres répertoires
et même des Graphiques sur d'autres serveurs WWW.
Si vous établissez des fichiers HTML pour le WWW faites attention à
ce que les fichiers graphiques qui y sont référencés ne soient pas trop
grands car des grands graphiques provoquent des long délais de chargement et
découragent l'utilisateur. Réduisez dans vos graphiques le nombre de couleurs
le cas échéant, réduisez la taille de l'image et n'entassez pas trop de
graphiques dans un seul fichier HTML. Dans chaque cas vous devez indiquer les
largeur et hauteur du Graphique.
Pour afficher un graphique seul sans texte à côté, il est préférable de
noter avant et après la référence du graphique un Changement de paragraphe.
Ainsi par exemple: <p><img src="fichier.gif"></p>.
Sinon vous pouvez écrire sur le graphique ou mettre le graphique au milieu du texte courant.
Avec une interface utilisateur graphique comme MS-Windows, Macintosh, OS/2 et autres les navigateurs graphiques peuvent montrer les graphiques référencés directement dans la fenêtre d'affichage. Des navigateurs WWW pour des interfaces orientées texte (par exemple DOS- en mode texte, Unix en mode texte) doivent appeler un programme d'affichage graphique distinct pour afficher un graphique.
Si vous structurez de façon entièrement graphique à savoir presque pas de
texte mais seulement des références graphiques des fichiers importants de
votre projet WWW la page d'accueil par exemple vous rendez difficile le
travail des moteurs de recherche utilisés par de nombreux services de recherche
sur le WWW. Ces moteurs de recherche auront alors du mal à identifier votre
projet. En cas de doute vous devez peser ce qui est pour vous le plus
important: l'apparence 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é
des informations Meta.
|
Référencer les graphiques d'un autre répertoirePour des projets plus importants il est judicieux de répartir les fichiers dans plusieurs répertoires. Cela permet d'avoir une meilleure vue d'ensemble. Afin que les projets restent transmissibles sur d'autres ordinateurs dont l'arborescence est différente il vous faut travailler pour les références de graphiques avec des noms de chemin relatifs.
<img src="répertoire/fichier.gif"> <img src="répertoire/sous-répertoire/fichier.gif"> <img src="../fichier.gif"> <img src="../../../fichier.gif"> <img src="../ailleurs/fichier.gif"> |
La référence de graphique est régie par la commande HTML et les conditions
pour référencer les graphiques (généralités).
La référence de graphique comporte la mention de chemin relatif et le nom de
fichier du fichier graphique.
Pour les noms de chemin relatif le répertoire dans lequel le fichier HTML qui contient la référence de graphique se trouve est le point de référence et sera appelé ci-après "répertoire actuel ".
Si le fichier graphique se trouve dans un répertoire un niveau plus bas que le répertoire actuel notez le nom du sous répertoire puis une barre oblique puis le nom du fichier graphique. Si le fichier graphique se trouve dans un répertoire un niveau plus haut que le répertoire actuel notez deux points puis une barre oblique puis le nom du fichier graphique Pour des fichiers graphiques plus éloignés vous devez vous devez noter plusieurs répertoires l'un après l'autre comme dans les exemples ci-dessus.
Utilisez toujours pour séparer les noms de répertoire la barre oblique simple même si vous établissez votre projet dans un environnement DOS- Windows. Le navigateur WWW a besoin de cette donnée sous forme de barres obliques simples.
|
|
Référencer les graphiques d'un autre serveur WWWChaque graphique apparaissant dans un projet WWW est un fichier distinct et a pour cette raison sa propre adresse Internet. Vous pouvez référencer dans votre projet WWW n'importe quel fichier graphique dont vous avez l'adresse Internet exacte.
<img src="http://www.netzwelt.com/selfhtml/xdance1.gif"> |
La référence de graphique est régie par la commande HTML et les conditions
pour référencer les graphiques (généralités).
La référence graphique comporte l'adresse Internet du fichier graphique.
Si vous référencez des graphiques d'autres serveurs WWW vous occasionnez une charge du réseau supplémentaire. Les références des graphiques d'autres serveurs Internet devraient déjà pour cette raison rester une exception.
Si vous référencez des graphiques d'un autre projet WWW demandez auparavant à son concepteur s'il est d'accord.
Pour les références de graphiques d'autres projets WWW il faut vous attendre à ce que la référence graphique cesse tout à coup de fonctionner parce que le concepteur de l'autre projet a modifié son projet par exemple et ce faisant effacé ou renommé le graphique.
|
|
alternative en texteSi vous établissez des fichiers HTML pour le WWW vous devez dans toute la mesure du possible pour des références de graphiques utiliser la possibilité offerte d'incorporer simultanément une alternative en texte au graphique. Le texte est affiché quand pour quelque raison que ce soit (et Dieu sait qu'il y en a!) le graphique ne peut êtres affiché chez l'utilisateur. Certains navigateurs montrent l'alternative en texte sous forme d'info-bulle quand on passe lentement avec la souris sur le graphique.
<img src="fichier.gif" alt="Descriptif de l'image"> |
Le texte à afficher en alternative au graphique est noté à l'intérieur de la commande pour la référence de graphique. Le texte à afficher en alternative est introduit par la commande alt= (alt = alternative). Puis suit entre guillemets l'alternative en texte.
L'alternative en texte est affichée aussi pour des graphiques importants avant que les graphiques ne soient chargés. Ainsi l'utilisateur peut déjà s'informer sur le contenu du graphique avant que le graphique lui même ne soit affiché à l'écran.
|
|
Cadres autour de graphiquesVous pouvez décider que le navigateur dessine un cadre autour du graphique.
<img src="fichier.gif" border=10> |
En mentionnant border= dans la référence du graphique un cadre est défini autour du graphique (border = bordure). La valeur est donnée en pixels pour l'épaisseur du cadre.
|
|
Noms pour les graphiquesVous pouvez décider d'attribuer un nom au fichier. C'est judicieux en
liaison avec JavaScript. Le nom d'un graphique peut par exemple être
important pour l'objet JavaScript objet-image.
<img src="fichier.gif" name="mongraphique"> |
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. Seuls les lettres, les chiffres et les tirets de soulignement "_" sont permis. Majuscules et minuscules sont différenciées.
|
|
Adresse URL avec descriptif pour les graphiquesSi la possibilité de noter une courte alternative en texte à un graphique 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é.
<h1<a name="Descriptif">Infos sur le graphique</a></h1> etc... <img src="fichier.gif" longdesc="#Descriptif"> |
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.
Dans notre exemple la destination du lien se trouve dans le même fichier que la
référence graphique. Après longdesc= est défini un lien avec une
ancre et avec la commande <a name=> est définie à un
autre endroit l'ancre de ce nom. Cela fonctionne exactement de la même façon
que pour des Liens à
l'intérieur d'un fichier.
Vous pouvez aussi après longdesc= mentionner un autre fichier ou une
adresse URL absolue. Cette mention doit être faite entre guillemets.
|
|
Autres possibilitésLe repère <img> peut comporter des 
attributs universels.
Si vous connaissez HTML déjà un peu mieux essayez donc aussi les
possibilités que vous offrent les feuilles de style CSS.
Grâce à elles vous pouvez en plus formater les graphiques. Il vous faut d'abord
savoir comment définir des feuilles de style.
Vous serez ensuite en mesure d'utiliser les commandes de feuilles de style. En
rapport avec ce qui a été décrit ici sont intéressantes les mentions de
feuilles de style suivantes:
Paragraphes, marges, alignement
Cadres et mise en page
Couleurs et images
d'arrière plan
Positionner des
éléments
|
| |
après: |
Largeur et hauteur de graphiques
|
avant: |
Liens internes au navigateur
|
SELFHTML/Quickbar
HTML
Graphiques en HTML
Serge François, 13405@free.fr
