SELFHTML: HTML/XHTML / Graphiques / Aligner les graphiques

	Aligner les graphiques
	Aligner le graphique par rapport au texte qui l'entoure Laisser le texte passer à côté du graphique Aligner des graphiques et autres contenus à l'aide de tableaux Aligner les graphiques avec les feuilles de style CSS

Aligner le graphique par rapport au texte qui l'entoure

Étant donné que l'élément img est un élément incorporé, les graphiques peuvent être placés au beau milieu d'un texte. Mais si le graphique est plus haut que la hauteur de ligne, alors il faut que le texte de la même ligne soit aligné d'une façon ou d'une autre par rapport au graphique. Si vous ne mentionnez rien d'autre, le texte sera aligner en bas du graphique. Vous pouvez toutefois fixer vous-même grâce à un attribut comment le texte doit être aligné par rapport au graphique. Cet attribut, il est vrai, est classé en cours d'abandon est doit disparaître à l'avenir du standard HTML. Le même résultat peut être à vrai dire obtenu avec les feuilles de style CSS.

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>À quoi pense le penseur?</h1>

<p>Est-ce que le penseur pense
<img src="penseur.gif" width="70" height="137" align="top" alt="penseur">
au haut?</p>
<hr>
<p>Est-ce que le penseur pense
<img src="penseur.gif" width="70" height="137" align="middle" alt="penseur">
au milieu?</p>
<hr>
<p>Est-ce que le penseur pense
<img src="penseur.gif" width="70" height="137" align="bottom" alt="penseur">
au bas?</p>

</body>
</html>

Explication:

L'exemple montre trois petits paragraphes de texte qui devraient en principe passer sur une ligne. Pour ces trois paragraphes, le même graphique a été placé au beau milieu du texte. Dans les trois paragraphes, le graphique qui y est noté est aligné avec le texte qui le précède et qui le suit à l'aide de HTML.

Avec l'attribut HTML align= dans le repère <img>, vous pouvez aligner le texte de la même ligne sur le graphique (align = alignement):
Avec align="top" le texte est aligné en haut du graphique (top = haut).
Avec align="middle" le texte est aligné au milieu du graphique (middle = milieu).
Avec align="bottom" le texte est aligné en bas du graphique (bottom = bas).

Attention:

Les navigateurs interprètent pour certains encore d'autres mentions. Celles-ci ne font pourtant pas partie du standard HTML et conduisent toutefois pour cette raison à du code HTML invalide. Qu'elles soient malgré tout mentionnées ici:
Avec align="texttop" vous alignez l'inscription en haut du graphique, à savoir au bord supérieur du plus petit texte qui suit (texttop = en haut avec le texte).
Mit align="absmiddle" vous alignez l'inscription dans le milieu absolu du graphique, même avec des tailles de texte différentes (absmiddle = absolute middle = au milieu dans tous les cas).
Mit align="absbottom" vous alignez l'inscription en bas du graphique à savoir au bord inférieur du plus petit texte de la ligne(absbottom = absolute bottom = en bas dans tous les cas).
Mit align="baseline" vous alignez l'inscription exactement comme avec la mention standard align="bottom". C'est pourquoi il vaut mieux que vous utilisiez la mention standard.

Laisser le texte passer à côté du graphique

Les graphiques que vous référencez avec le repère <img> peuvent être alignés à gauche ou à droite. Le texte entoure alors le graphique. Avec deux autres attributs, vous pouvez créer de l'espace entre le graphique et le texte qui l'entoure de façon à ce que le texte ne "colle" pas au graphique. Vous pouvez aussi interrompre le flux de texte automatique et forcer la poursuite sous le graphique. Tous les attributs pour le faire sont il est vrai, classés en cours d'abandon et doivent disparaître à l'avenir du standard HTML. Le même résultat peut être également obtenu avec les feuilles de style CSS.

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><img src="texte.gif" width="311" height="194" align="left" vspace="10" hspace="20" alt="Texte?">Un texte</h1>

<p>Certains textes ne se révèlent qu'à la distance nécessaire.
<!-- etc. -->
Mais ceci est le vrai texte. et il passe même il est vrai à côté du graphique.<br clear="all"></p>

</body>
</html>

Explication:

Avec align="left" vous alignez un graphique à gauche. Le texte noté à la suite passe à sa droite.
Avec align="right" vous pouvez aligner le graphique à droite. Le texte noté à la suite passe à sa gauche.
On parle ici seulement pour simplifier de "texte noté à la suite". Il peut s'agir d'éléments de votre choix, donc par exemple également d'autres graphiques de tableaux de références multimédia etc.

Pour créer un espace entre le graphique et le flux de texte, les attributs hspace= et vspace= sont disponibles.
Avec hspace= [pixels] vous déterminez l'espace entre un graphique et d'autres éléments à sa gauche ou à sa droite (hspace = horizontal space = espace horizontal).
Avec vspace= [Pixel] vous déterminez l'espace entre un graphique et d'autres éléments au dessus ou en dessous (vspace = vertical space = espace vertical).
L'attribut hspace= concerne toujours l'espace à gauche et à droite du graphique, vspace= toujours l'espace en haut et en bas du graphique. Quand par exemple vous définissez pour un graphique aligné à gauche l'attribut hspace=, il n'y a pas qu'à droite du graphique que l'espace sera créé mais également à gauche par rapport au bord de la fenêtre d'affichage. Pour éviter cela, vous pouvez travailler avec plus de précision en utilisant les feuilles de style CSS.
Vous pouvez noter les deux attributs mais aussi seulement l'un d'entre eux.

Pour interrompre le flux de texte automatique et forcer sa poursuite sous le graphique, vous pouvez noter un passage à la ligne avec l'attribut clear=.
Avec <br clear="all"> vous obtenez que le flux de texte soit poursuivi dans tous les cas dès la ligne suivante, sous le graphique.
Avec <br clear="left"> vous obtenez que le flux de texte soit poursuivi dès la ligne suivante, sous un graphique aligné à gauche.
Mit <br clear="right"> vous obtenez que le flux de texte soit poursuivi dès la ligne suivante, sous un graphique aligné à droite.

Aligner des graphiques et autres contenus à l'aide de tableaux

Dans la pratique, il arrive fréquemment que vous ayez à placer des graphiques proprement les uns à côté des autres en leur affectant une légende. Dans de tels cas, vous pouvez travailler avec des tableaux "sans quadrillage", donc invisibles.

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>

<div align="center">
<table border="0" cellpadding="4" width="600">
 <tr>
  <th><h3>Joie machiavélique</h3></th>
  <th><h3>Étonnement</h3></th>
  <th><h3>Doute</h3></th>
  <th><h3>Embarras</h3></th>
 </tr><tr>
  <td align="center"><img src="expression_1.gif" width="100" height="100" alt="joie machiavélique"></td>
  <td align="center"><img src="expression_2.gif" width="100" height="100" alt="étonnement"></td>
  <td align="center"><img src="expression_3.gif" width="100" height="100" alt="doute"></td>
  <td align="center"><img src="expression_4.gif" width="100" height="100" alt="embarras"></td>
 </tr><tr>
  <td align="center" valign="top">c'est la plus belle joie mais elle peut créer l'inimitié</td>
  <td align="center" valign="top">à l'origine de la philosophie, il est toujours sous-estimé par ceux qui ont raison</td>
  <td align="center" valign="top">il convient parfois mais ne doit pas être un frein à la formation permanente</td>
  <td align="center" valign="top">il est très désagréable ne protège pourtant pas éternellement</td>
 </tr>
</table>
</div>

</body>
</html>

Explication:

Dans l'exemple, est défini un tableau sans quadrillage (border="0") avec quatre colonnes. Dans la première ligne, il y a quatre légendes, dans la deuxième les quatre graphiques correspondants, et dans la troisième les quatre textes qui s'y rapportent. Le tableau est centré dans un passage commun (<div align="center">...</div>) et a une largeur de 600 pixels.

Avec cellpadding="4" dans le repère d'ouverture <table>, on s'assure que les contenus des cellules ne se touchent pas trop.

Avec align="center" les cellules de données sont centrées. Étant donné que les légendes peuvent varier en longueur, on obtient grâce à valign="top" dans les cellules de données qu'elles soient toutes alignées en haut.

Aligner les graphiques avec les feuilles de style CSS

Les feuilles de style CSS offrent des propriétés à l'aide desquelles les deux fonctions aligner le graphique par rapport au texte qui l'entoure et Laisser le texte passer à côté du graphique peuvent être aussi bien réalisées qu'avec HTML. Le "réglage fin" est même beaucoup plus précis à l'aide des CSS. Vous êtes obligé de travailler avec les CSS si vous voulez obtenir les effets décrits dans cette partie tout en travaillant avec la variante HTML "Strict".
Pour employer des feuilles de style CSS, il vous faut d'abord savoir comment définir des formats CSS. Ensuite, vous serez en mesure d'appliquer les propriétés CSS. En relation avec ce qui vient d'être décrit les données de feuilles de style suivantes sont aussi intéressantes:
vertical-align (alignement vertical)
float (flux de texte)
clear (poursuite pour le flux de texte)
marge extérieure et espace

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>À quoi pense le penseur</h1>

<p>Est-ce que le penseur pense
<img src="penseur.gif" width="70" height="137" style="vertical-align:text-top" alt="penseur">
au haut?</p>
<hr>
<p>Est-ce que le penseur pense
<img src="penseur.gif" width="70" height="137" style="vertical-align:middle" alt="penseur">
au milieu?</p>
<hr>
<p>Est-ce que le penseur pense
<img src="penseur.gif" width="70" height="137" style="vertical-align:text-bottom" alt="penseur">
au bas?</p>
<hr>

<h2><img src="texte.gif" width="311" height="194" style="float:left; margin-right:20px;
margin-bottom:10px" alt="Texte?">ou bien pense-t il à ...?</h2>

<p>Certains textes ne se révèlent qu'à la distance nécessaire.
<!-- etc. -->
Mais ceci est le vrai texte. et il passe même il est vrai à côté du graphique.<br clear="all"></p>

</body>
</html>

Explication:

Avec style="vertical-align:text-top" placé dans un repère <img> vous obtenez la même chose qu'avec align="top",
avec style="vertical-align:middle" la même chose qu'avec align="middle",
et avec style="vertical-align:text-bottom" la même chose qu'avec align="bottom".
Avec style="float:left; margin-right:20px; margin-bottom:10px" on obtient que le graphique soit aligné à gauche et que le texte qui suit passe à la droite du graphique. Ce faisant, un espace de 20 pixels entre le texte et le graphique est maintenu (à gauche du graphique par contre et contrairement à l'attribut HTML hspace=, aucun espace de 20 pixels n'est créé). Vers le bas, donc par rapport au texte qui suit en dessous est défini un espace de 10 pixels.

Attention:

Netscape 4.x coupe l'affichage de la pire façon qui soit. C'est malheureusement un exemple typique de la façon dont Netscape freine le développement vers un travail plus conforme au standard.


	Graphiques en tant que liens
	Incorporer des graphiques

SELFHTML/Aides à la navigation

HTML/XHML

Graphiques