SELFHTML/Aides à la navigation HTML/XHML Multimédia | SELFHTML/Aides à la navigation HTML/XHML Multimédia |
Aligner un objet par rapport au texte qui l'entoureÉtant donné que l'élément object est un 
élément incorporé, les objets peuvent être placés au beau milieu d'un texte. Si l'objet est plus haut que la hauteur de la ligne, alors le texte de cette ligne doit être aligné verticalement par rapport à l'objet. En l'absence de toute mention, le texte est aligné en bas de l'objet. Vous pouvez pourtant fixer vous même à l'aide d'un attribut comment le texte doit être aligné par rapport à l'objet. Cer attribut est toutefois classé en cours d'abandon et doit à l'avenir disparaître du standard HTML. Le même effet peut à vrai dire être obtenu également grâce aux 
feuilles de style CSS.
Les mentions ne sont pourtant significatives que si l'affichage se fait à l'aide d'un plugiciel et qu'il est possible directement dans la fenêtre d'affichage du navigateur Web.
<!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>C'EST ICI <object data="haste.mid" type="audio/x-midi" width="200" height="100" align="middle">
Votre navigateur ne peut malheureusement pas afficher l'objet !
</object> QUE L'ON JOUE</h1>
</body>
</html>
|
Avec l'attribut align= vous pouvez aligner le texte environnant verticalement par rapport à l'objet (align = aligner).
Avec align="top" le texte est aligné en haut de l'objet incorporé (top = haut).
Avec align="middle" le texte est aligné au milieu de l'objet incorporé (middle = milieu).
Avec align="bottom" le texte est aligné an bas de l'objet incorporé (bottom = bas).
Pour aligner proprement les objets et les textes les uns par rapport aux autres, vous pouvez également travailler avec des 
tableaux sans quadrillage.
Netscape interprète encore d'autres affectations de valeurs qui ne font toutefois pas partie du standard HTML et génèrent du code HTML non valide:
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).
Avec 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). .
Avec 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). .
Avec 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.
|
Faire passer le texte à côté de l'objetLes objets référencés peuvent être alignés à gauche ou à droite. Le texte entoure alors l'objet. Avec deux autres attributs, vous pouvez créer de l'espace par rapport au contexte pour que le texte ne "colle" pas à l'objet. Vous pouvez également interrompre le flux de texte automatique pour forcer sa poursuite sous l'objet. Tous les attributs nécessaires pour le faire sont toutefois classés en cours d'abandon et doivent disparaître à l'avenir du standard HTML. Le même effet peut à vrai dire être obtenu avec les feuilles de style CSS.
<!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 bgcolor="#333333" text="#FFFFFF">
<h1>
<object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
width="200" height="200" align="left" hspace="10" vspace="7">
<param name="movie" VALUE="neucler.swf">
</object>
Animation !
</h1>
<p>elle peut être belle si vous elle ne dérange pas.
Ceci est un petit film Flash d'à peine un kilooctet.
<br clear="all"></p>
<h2>Félicitations !</h2>
<p>Le texte se poursuit dessous.</p>
</body>
</html>
|
Avec les mentions align="left" ou align="right" vous faites en sorte que le navigateur aligne l'objet à gauche ou à droite et affiche le texte qui suit à droite ou à gauche à côté de l'objet pour l'entourer
(align = alignement, left = gauche, right = droite). Le contexte peut contenir divers éléments, par exemple également des
titres ou des listes.
Pour créer un espace entre l'objet et le texte qui l'entoure vous disposez des attributs hspace= et vspace=.
Avec hspace= [pixels] vous déterminez l'espace entre un objet et d'autres éléments à sa gauche ou à sa droite (hspace = horizontal space = espace horizontal ).
Avec vspace= [pixels] vous déterminez l'espace entre un objet et d'autres éléments au dessus ou en dessous (vspace = vertical space = espace vertical ).
L'attribut hspace= concerne toujours l'espace du bord gauche et
du bord droit de l'objet, la mention vspace= toujours l'espace du
bord supérieur et inférieur . Si par exemple vous définissez hspace= pour un objet aligné à gauche , un espace ne sera pas seulement créé entre le bord droit de l'objet et le texte qui le côtoie mais aussi entre le bord gauche de l'objet et le bord de la fenêtre d'affichage. Pour l'éviter, vous pouvez travailler de façon plus précise en utilisant les feuilles de style CSS.
Vous pouvez noter les deux attributs ou seulement l'un d'entre eux.
Pour interrompre le flux de texte automatique et forcer ce qui suit à être affiché sous l'objet, vous pouvez noter un passage à la ligne (retour du chariot) avec l'attribut clear=.
Avec <br clear="all"> vous obtenez que le flux du texte s'interrompe dès la ligne suivante de façon à ce qu'il se poursuive sous l'objet.
Avec <br clear="left"> vous obtenez que le flux de texte passe dès la ligne suivante sous un objet aligné à gauche pour y être poursuivi.
Avec <br clear="right"> vous obtenez que le flux de texte passe dès la ligne suivante sous un objet aligné à droite pour y être poursuivi.
|
|
Afficher un texte d'avertissement pendant le chargementLes objets multimédia ou les programmes exécutables comme les applets Java peuvent occasionner en partie des temps de chargement plus longs. Même quand les fichiers eux mêmes ne sont pas plus grands que la moyenne des fichiers HTML ou graphiques, les plugiciels ou interpréteurs de durée doivent être activés chez l'utilisateur. Cela demande du temps.
Pour ne pas laisser l'utilisateur dans l'incertitude sur les temps d'attente et les processus de chargement, vous pouvez mentionner un texte d'annonce qui sera affiché chez l'utilisateur jusqu'au chargement complet de l'objet incorporé.
<!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>Bâtissez un pont !</h1>
<p><object classid="java:Bridges.class" codetype="application/java-vm" width="350"
height="420"
standby="Le jeu est en cours de chargement. Veuillez patienter s'il vous plaît...">
<param name="Color" value="white">
</object></p>
<p>Cliquez sur les carreaux blancs. Essayez de bâtir un pont rouge entre le haut et le bas
du jeu. Les bleus essaient de vous en empêcher.</p>
</body>
</html>
|
Dans le repère d'ouverture <object> vous pouvez avec la
mention standby= mentionner un texte d'annonce pour le processus
de chargement.
|
|
N'afficher l'instance d'un objet qu'à la demande de l'utilisateurVous pouvez définir un objet qui n'est d'abord que déclaré. Pour qu'il soit affiché ou exécuté, il doit être activé. Cela peut se faire au moyen d'un lien à l'objet déclaré , ou par un autre objet qui déclenche l'initialisation.
Les navigateurs qui ne connaissent pas cette option (parmi lesquels également Netscape et l'Explorer Internet MS) lancent la diffusion tout de suite.
<!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>Tu veux ou tu veux pas?</h1>
<p><object declare id="Marquee" classid="java:zticker.class" codetype="application/java" width="600" height="60">
<param name="msg" value="Tu sais ce que tu veux!">
<param name="href" value="../../../index.htm">
<param name="speed" value="5">
<param name="bgco" value="255,255,0">
<param name="txtco" value="255,000,000">
<param name="hrefco" value="255,255,255">
</object></p>
<p><a href="#Marquee">Afficher le texte animé</a></p>
</body>
</html>
|
Dans le repère d'ouverture <object> vous pouvez en
mentionnant l'attribut autonome declare définir un objet comme étant déclaré (declare = déclarer, mentionner).
Avec l' attribut universel id= vous pouvez définir une ancre cible dans
l'objet, dans l'exemple: "Marquee" (id = identifier = identificateur). Le nom ne doit pas être trop long et ne peut contenir d'espace, de caractère spécial ou de signes avec accent. Le premier signe doit être une lettre, ensuite les chiffres sont également permis. N'utilisez comme caractère spéciaux dans le nom tout au plus le tiret de soulignement (_), le trait d'union (-), les deux points (:) ou le point (.). les majuscules et les minuscules sont différenciées.
Avec le lien à l'ancre cible (voir l'exemple ci-dessus) vous pouvez laisser
l'utilisateur activer l'objet. Pour l'attribut href notez le signe dièse d'introduction (#) suivi par le nom id de l'objet.
|
|
Formater des objets avec les feuilles de style en cascade CSSLes feuilles de style CSS proposent des propriétés à l'aide desquelles les deux fonctions aligner un objet par rapport au texte qui l'entoure et faire passer le texte à côté de l'objet sont réalisables exactement comme avec HTML. Le "réglage fin" est même beaucoup plus précis avec les CSS. Il vous faut travailler avec les feuilles de style CSS si vous voulez obtenir les effets décrits ici 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Formater des objets avec les feuilles de style en cascade CSS</title>
</head>
<body>
<h1>C'EST ICI <object data="breeze.mid" type="audio/x-midi" width="200" height="100"
style="vertical-align:middle; margin-left:30px; margin-right:30px;">
Votre navigateur ne peut malheureusement pas afficher l'objet !
</object> QUE L'ON JOUE</h1>
</body>
</html>
|
Avec style="vertical-align:middle" placé dans un repère <object> vous obtenez la même chose qu'avec align="middle",
avec style="vertical-align:text-top" vous obtenez la même chose qu'avec align="top",
et avec style="vertical-align:text-bottom" vous obtenez la même chose qu'avec align="bottom".
Avec les mentions CSS margin-left:30px; et margin-right:30px; a été ménagé dans l'exemple ci-dessus un espace de 30 pixels à gauche et à droite par rapport au texte. Quand vous voulez faire passer le texte autour d'un objet (cela n'a pas été fait dans l'exemple ci-dessus), vous pouvez avec une mention telle que style="float:left; margin-right:20px; margin-bottom:10px" obtenir que l'objet soit aligné à gauche, et que le texte qui suit l'objet passe à sa droite. Ce faisant, un espace de 20 pixels sera respecté entre l'objet et le texte (à gauche de l'objet par contre et à la différence de l'attribut HTML hspace=, aucun espace de 20 pixels n'est créé). En bas, un espace de 10 pixels a été défini par rapport au texte.
|
| |
 |
Incorporer des applets Java (traditionnel)
|
 |
Incorporer des objets
|
| SELFHTML/Aides à la navigation HTML/XHML Multimédia |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
