"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> objects, Images, et Applets dans les documents HTML

13 objets, Images, et Applets

Sommaire

  1. Introduction aux objets, images, et applets
  2. Inclusion d'images : l'élément IMG
  3. Inclusion générique : l'élément OBJECT
    1. Règles pour le rendu des objects
    2. Initialisation des objets : l'élément PARAM
    3. Schéma de nommage globale pour les objects
    4. Déclarations d'objet et instantiations
  4. Inclusion d'applet : l'élément APPLET
  5. Inclusion d'HTML dans un autre document HTML
  6. Images cliquables
    1. Images cliquables côté client
    2. Images cliquables côté serveur
  7. Présentation visuelle des images, des objets, et des applets
    1. Largeur et hauteur
    2. Espace autour des images et des objects
    3. Bordures
    4. Alignement
  8. Comment spécifier les textes alternatifs

13.1 Introduction aux objets, images, et applets

Les fonctionnalités multimédia du HTML permettent aux auteurs d'inclure des des images, des applets (programmes qui sont automatiquement téléchargés et exécutés par la machine de l'utilisateur), video clips, et autres documents HTML dans leurs pages.

Par exemple, pour inclure une image PNG dans un document, les auteurs peuvent écrire :

<BODY>
<P>Voici un gros-plan du Grand Canyon :
<OBJECT data="canyon.png" type="image/png">
voici un <EM>gros-planp</EM> du Grand Canyon.
</OBJECT>
</BODY>

Les versions précédentes de HTML peremettaient aux auteurs d'inclure les images (via IMG) et les applets (via APPLET). Ces éléments ont plusieurs limitations :

Pour résoudre ces problèmes, HTML 4.0 introduit l'élément OBJECT, qui offre une solution passe-partout aux problèmes génériques d'inclusion. L'élément OBJECT permet aux auteurs HTML de spécifié tou ce qui est requis par un objet pour son affichage par un client : code source, valeurs initiales, et données temps réel. Dans cette spécification, le terme "object" est utilisé pour décrire les choses que les personnes veulent placer dans les documents ; communément appelées, ces choses sont : applets, plug-ins, décodeur de média, etc.

Le nouvel élément OBJECT assume donc des tâches qui étaient gérées par des éléments existants. Considérons la charte suivante des fonctionnalités :

Type d'inclusion Elément spécifique Elément générique
Image IMG OBJECT
Applet APPLET (Périmé.) OBJECT
Autre document HTML IFRAME OBJECT

La charte indique que chaque type d'inclusion a une solution spécifique et une solution générale. L'élément générique OBJECT servira comme la solution pour intégrer de nouveaux types de média.

Pour inclure les images, les auteurs peuvent continuer √ utiliser l'élément IMG, également.

Pour inclure les applets, les auteurs devraient utiliser l'élément OBJECT car l'élément APPLET est périmé.

Pour inclure un document HTML dan sun autre, les auteurs peuvent toujours utiliser le nouvel élément IFRAME ou l'élément OBJECT. Dans les 2 cas, le document inclus reste indépendant du document principal. Les clients visuels peuvent présenter le document inclus dans une fenêtre distincte √ l'intérieur du document principal. Consultez la section sur l' inclusion HTML dans un autre document HTML pour une comparaison entre OBJECT et IFRAME pour l'inclusion des documents.

Les images et autres objets inclus peuvent avoir des hyperliens associés, que ce soit par le mécanisme de liens standard, mais également via une image map. Une image map spécifie des regions géométriques actives d'un objet inclu et attribue un lien √ chaque région. Lorsqu'ils sont activés, ces liens peuvent permettre l'obtention d'un document, peuvent éxécuter un programme sur le serveur, etc.

Dans les sections suivantes, nous abordons les nombreux mécanismes disponibles pour les auteurs pour les inclusions multimedia et la création de ces image maps pour ces inclusions.

13.2 Inclure une image: l'élément IMG

<!-- To avoid problems with text-only UAs as well as
   to make image content understandable and navigable
   to users of non-visual UAs, you need to provide
   a description with ALT, and avoid server-side image maps -->
<!ELEMENT IMG - O EMPTY            --  Embedded image -->
<!ATTLIST IMG
  %attrs;                          -- %coreattrs, %i18n, %events --
  src         %URL;      #REQUIRED -- URL of image to embed --
  alt         %Text;     #REQUIRED -- short description --
  longdesc    %URL;      #IMPLIED  -- link to long description (complements alt) --
  height      %Length;   #IMPLIED  -- override height --
  width       %Length;   #IMPLIED  -- override width --
  align       %IAlign;   #IMPLIED  -- vertical or horizontal alignment --
  border      %Length;   #IMPLIED  -- link border width --
  hspace      %Pixels;   #IMPLIED  -- horizontal gutter --
  vspace      %Pixels;   #IMPLIED  -- vertical gutter --
  usemap      %URL;      #IMPLIED  -- use client-side image map --
  ismap       (ismap)    #IMPLIED  -- use server-side image map --
  >

Start tag: required, End tag: forbidden

Définitions des attributs

src = url [CT]
Cet attribut spécifie la localisation d'une ressource image. Les exemples de format d'image largement reconnu inclue le GIF, JPEG, et PNG.
longdesc = url [CT]
Cet attribut spécifie un lien vers une longue description de l'image. Cette description devrait compléter la description courte fournie en utilisant l'attribut alt. Quand l'image √ une image map associée, Cet attribut devrait fournir l'information √ propos des contenus de l'image map. Ceci est particulièrement important pour les images maps côté serveur.

Attributs définis partout

L'élément IMG inclue une image dans le document courant √ la place de la définition de l'élément. L'élément IMG n'a pas de contenu ; Cette image est généralement remplacée par l'image désignée par l'attribut src, √ l'exception près des images alignées √ droite ou √ gauche qui sont "habillées" hors ligne.

Dans une exemple précédent, nous avons défini une lien vers une photo de famille. Ici, nous insérons directement l'image dans le document courant :

<BODY>
<P>Je reviens tout juste de vacances ! Voici une photo de ma famille au bord du lac :
<IMG src="http://www.somecompany.com/People/Ian/vacation/family.png"
     alt="Une photo de ma famille au bord du lac.">
</BODY>

Cette inclusion peut être également réalisée avec l'élément OBJECT comme suit :

<BODY>
<P>Je reviens tout juste de vacances ! Voici une photo de ma famille au bord du lac :
<OBJECT data="http://www.somecompany.com/People/Ian/vacation/family.png"
        type="image/png">
Une photo de ma famille au bord du lac.
</OBJECT>
</BODY>

L'attribut alt spécifie le texte alternatif qui est affiché lorsque l'image ne peut pas être affichée. (voir plus loin pour avoir de l'information sur la manière de spécifier le texte alternatif ). Les clients doivent afficher le texte alternatif quand ils ne peuvent afficher les images, quand ils ne savent pas interpréter un certain type d'image ou lorsqu'ils sont configurés pour ne pas afficher les images.

L'exemple suivant montre comment l'attribut longdesc peut être utilisé pour fournir une description plus détaillée :

<BODY>
<P>
<IMG src="sitemap.gif"
     alt="HP Labs Site Map"
     longdesc="sitemap.html">
</BODY>

L'attribut alt fournit une description courte de l'image. Cela devrait être suffisante pour permettre s'ils désirent suivre le lien donné par l'attribut longdesc vers la description détaillée, ici "sitemap.html".

Consultez la section sur la présentation visuel des objets, images, et applets pour obtenir des informations √ propos de la taille des images, les alignements, et les bordures.

13.3 Inclusion générique : l'élément OBJECT

<!ELEMENT OBJECT - - (PARAM | %flow;)*
 -- generic embedded object -->
<!ATTLIST OBJECT
  %attrs;                          -- %coreattrs, %i18n, %events --
  declare     (declare)  #IMPLIED  -- declare but don't instantiate flag --
  classid     %URL;      #IMPLIED  -- identifies an implementation --
  codebase    %URL;      #IMPLIED  -- base URL for classid, data, archive --
  data        %URL;      #IMPLIED  -- reference to object's data --
  type     %ContentType; #IMPLIED  -- content type for data --
  codetype %ContentType; #IMPLIED  -- content type for code --
  archive     %URL;      #IMPLIED  -- space separated archive list --
  standby     %Text;     #IMPLIED  -- message to show while loading --
  height      %Length;   #IMPLIED  -- override height --
  width       %Length;   #IMPLIED  -- override width --
  align       %IAlign;   #IMPLIED  -- vertical or horizontal alignment --
  border      %Length;   #IMPLIED  -- link border width --
  hspace      %Pixels;   #IMPLIED  -- horizontal gutter --
  vspace      %Pixels;   #IMPLIED  -- vertical gutter --
  usemap      %URL;      #IMPLIED  -- use client-side image map --
  shapes      (shapes)   #IMPLIED  -- object has shaped hypertext links --
  export      (export)   #IMPLIED  -- export shapes to parent  --
  name        CDATA      #IMPLIED  -- submit as part of form --
  tabindex    NUMBER     #IMPLIED  -- position in tabbing order --
  >

Start tag: required, End tag: required

Définitions des attributs

classid = url [CT]
Cet attribut peut être utilisé pour spécifier la localisation d'un objet de l'implémentation via une URL. Cela peut être utilisé avec, ou comme une alternative √ l'attribut data, dépendant du type de l'objet traité.
codebase = url [CT]
Cet attribut spécifie le chemin de base utilisé pour traiter les URLs relatives spécifiées par les attributs classid, data, et archive. Lorsque il est absent, la valeur par défaut est l'URL de base du document courant.
codetype = content-type [CI]
Cet attribut spécifie le type de contenu des données attendu lors du téléchargement des objets spécifiés par classid. Cet attribut est optionnel mais recommandé car lorsque classid est spécifié alors le client peut éviter de charger de l'information dont le type de contenu lui est inconnu. Quand il est absent, sa valeur par défaut est l'attribut type.
data = url [CT]
Cet attribut peut être utilisé pour définir la localisation des données de l'objet, par exemple les données d'une image pour des objets définissant des images, ou plus générallement, une forme sérialisée d'un objet qui peut être utilisé pour le recréer. Si il es donné comme une URL relative, cela devrait être interprêté relativement √ l'attribut codebase.
type = content-type [CI]
Cet attribut spécifie le type de contenu pour les données spécifiées par data. Cet attribut est optionnel mais recommandé, lorsque data est spécifié, cela permet le client pour éviter le chargement d'information de types de contenu non supportés.
archive = url list [CT]
Cet attribut peut être utilisé pour spécifier une liste d'URLs séparées par des espaces pour les archives contenant des ressources relatives √ l'objet, qui peuvent inclure les ressources spécifiées par les attributs classid et data. Les archives préchargées résulteront générallement en des temps de chargement réduits des objets. Les archives spécifiées par des URLs relatives devraient être interprêtées relativement par l'attribut codebase.
declare [CI]
Lorsqu'il est présent, cet attribut booléen transforme la définition OBJECT courante en déclaration seulement. L'objet doit être défini par une définition subséquente de OBJECT dse réferrant √ cette déclaration.
standby = text [CS]
Cet attribut spécifie un message que le client peut afficher pendant le charmenet et la mise en place des données de l'objet.

Attributs définis partout

La plupart des clients ont des mécanismes internes pour traiter et afficher les types de données communs comme le texte, les images GIF, couleurs, polices, et une variété d'éléments graphiques. Pour traiter les types de données qu'ils ne supportent pas par défaut, les clients utilisent généralement des applications externes. L'élément OBJECT permet aux auteurs de contrôler comment les données devraient être traitées √ l'extérieur ou par un quelques programmes, spécifiés par l'auteur, qui affiche les données au sein du client.

Dans le cas le plus général, un auteur peut avoir besoin de spécifier 3 types d'information :

L'élément OBJECT permet aux auteurs de spécifier les trois types de données, mais les auteurs ne son tpas obligés de spécifier les 3 types √ la fois. Par exemple, certains objets n'ont pas forcément besoin (e.g., une applet autonome qui réalise une petite animation). D'autres ne requèrent pas d'initialisation temps réel. D'autres n'ont pas besoin d'information de mise en place, i.e., le client peut toujours déterminer par lui-même comment il doit afficher les données (e.g., GIF images).

Les auteurs spécifie une mise en place d'un objet et la localisation des données √ afficher via l'élément OBJECT. Pour spécifier des valeurs temps réel, les auteurs peuvent utiliser l'élément PARAM, qui est présenté dans la section sur l'initialisation des objets.

13.3.1 Règles pour l'affichage des objets

Un client doit interprêter un élément OBJECT en suivant les règles de priorité suivantes :

  1. Le client doit premièrement tenter d'afficher l'objet. Il ne devrait pas afficher les contenus des éléments, mais il doit les examiner au cas où l'élément contiendrait des enfants directs qui sont des éléments PARAM (voir initialisation d'objets) ou des éléments MAP (voir image maps côté client).
  2. Si le client n'est pas capable d'afficher l'objet pour une raison quelconque (mal configuré, absence de ressources, mauvaise architecture, etc.), il doit tenter d'afficher son contenu.

Dans l'exemple suivant, Nous insérons une applet horloge analogique dans un document via l'élément OBJECT. L'applet, écrit en Python, ne réclame pas de données additionnelles ou de valeurs temps réel. L'attribut classid spécifie la localisation de l'applet :

<P><OBJECT classid="http://www.miamachina.it/analogclock.py">
</OBJECT>

Notez que l'horloge sera affiché aussitôt que le client interprête cette déclaration OBJECT. Il est possible de retarder l'affichage d'un objet en déclarant tout d'abord l'objet (décrit plus loin).

Les auteurs devraient compléter cette déclaration par l'inclusion de texte alternatif comme le contenu de OBJECT au cas où le client ne puisse afficher l'horloge.

<P><OBJECT classid="http://www.miamachina.it/analogclock.py">
Une horloge animée.
</OBJECT>

Une des conséquences signifcatives de la conception de l'élément OBJECT est que cela offre un mécanisme pour spécifier une affichage d'objet alternatif. Chaque déclaration de OBJECT incluse peut spécifier des types de contenu différent. Si un client ne peut pas afficher l'élément OBJECT le plus extérieur, il tente d'afficher les contenus, qui peuvent être un autre élément OBJECT, etc.

Dans l'exemple suivant, nous avons inclus plusieurs déclarations OBJECT pour illustrer comment l'affichage alternatif fonctionne. Un client tentera tout d'abord d'afficher le premier élément OBJECT possible, dans l'ordre suivant : (1) une applet Terre écrit en Python, (2) une animation MPEG de la Terre, (3) une image GIF de la Terre, (4) un texte alternatif.

<P>                 <!-- Tout d'abord, l'applet en Python -->
<OBJECT title="La Terre vue de l'espace"
        classid="http://www.observer.mars/TheEarth.py">
                    <!-- Ensuite, la video MPEG -->
  <OBJECT data="TheEarth.mpeg" type="application/mpeg">
                    <!-- Ensuite, l'image GIF -->
    <OBJECT data="TheEarth.gif" type="image/gif">
                    <!-- Ensuite, le texte -->
     La <STRONG>Terre</STRONG> vue de l'espace.
    </OBJECT>
  </OBJECT>
</OBJECT>

La déclaration la plus extérieure spécifie une applet qui ne requère aucune donnée ou valeurs initiales. La seconde déclaration spécifie une animation MPEG et, comme ils n'y a pas de localisation choisie pour le traitement du MPEG, elle laise le soin au navigateur de traiter l'animation. Nous avons également précisé l'attribut type pour qu'un client incpable de traiter le MPEG ne télécharge pas √ travers le réseau le fichier "TheEarth.mpeg". La troisième déclaration spécifie l'emplacement d'un fichier GIF et fournit le texte alternatif dans le cas où tous les autres mécanismes auraient échoué.

Données internes vs données externes. Les données affichables peuvent être proposées de 2 faŸons : √ l'intérieur et √ partir d'une ressource externe. Bien que la méthode formelle permettra généralement un affichage plus rapide, elle n'est pas obligatoire lorsque l'on considère l'affichage d'un grand nombre de données.

Voici un exemple qui illsutre de quel faŸon les données internes peuvent alimenter un élément OBJECT:

<P>
<OBJECT id="clock1"
        classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
        data="data:application/x-oleobject;base64, ...base64 data...">
    Une horloge.
</OBJECT>

Consultez la section sur la présentation visuel des objets, images, et applets pour avoir plus d'informations √ propos de la taille, alignement et bordures des objets.

13.3.2 Initialisation d'objet : l'élément PARAM

<!ELEMENT PARAM - O EMPTY          -- named property value -->
<!ATTLIST PARAM
  id          ID         #IMPLIED  -- document-wide unique id --
  name        CDATA      #REQUIRED -- property name --
  value       CDATA      #IMPLIED  -- property value --
  valuetype (DATA|REF|OBJECT) DATA -- How to interpret value --
  type     %ContentType; #IMPLIED  -- content type for value
                                      when valuetype=ref --
  >

Start tag: required, End tag: forbidden

Définitions des attributs

name = cdata
Cet attribut définit le nom d'un paramètre temps-réel, considéré connu par l'objet inséré. Bien que le nom de la propriété est insensible √ la casse dépendant de l'implémentation de l'objet spécifié.
value = cdata
Cet attribut spécifie la valeur du paramètre temps-réel spécifié par un name. Les valeurs propriétés n'ont pas de signification particulière en HTML ; leur signification est déterminé par l'objet en question.
valuetype = data|ref|object [CI]
Cet attribut spécifie le type de la valeur attribut. Des valeurs possibles :
  • data : C'est la valeur par défaut pour l'attribut. Cela signifie que la valeur spécifié par value sera évalué et passé au traitement de l'objet comme une cha‰ne de caractère..
  • ref : La valeur spécifié par value est une URL qui désigne une ressource où des valeurs temps-réels sont stockées. Cela permet aux outils d'assistance d'indentifier les URLs données comme des paramètres. L'URL doit être passée √ l'objet telle quelle, i.e., non résolue.
  • object : La valeur spécifié value est un identificateur qui réferre √ une déclaration OBJECT dans le même document. L'identificateur doit être la valeur de l'ensemble d'attribut id pour l'élément déclaré OBJECT.
type = content-type [CI]
Cet attribut spécifie le type de contenu de la ressource désignée par l'attribut value seulement dans le cas où valuetype est égal √ "ref". Cet attribut spécifie alors pour le client, le type de valeurs qui sera disponible √ l'URL indiquée par value.

Attributs définis partout

l'élément PARAM spécifie un ensemble de valeurs qui peuvent être requises par un objet pendant son éxécution. Any number of PARAM elements may appear in the content of an OBJECT or APPLETelement, in any order, but must be placed at the start of the content of the enclosing OBJECT or APPLET element.

The syntax of names and values is assumed to be understood by the object's implementation. This document does not specify how user agents should retrieve name/value pairs nor how they should interpret parameter names that appear twice.

We return to the clock example to illustrate the use of PARAM: suppose that the applet is able to handle two run-time parameters that define its initial height and width. We can set the initial dimensions to 40x40 pixels with two PARAM elements.

<P><OBJECT classid="http://www.miamachina.it/analogclock.py">
<PARAM name="height" value="40" valuetype="data">
<PARAM name="width" value="40" valuetype="data">
This user agent cannot render Python applications.
</OBJECT>

In the following example, run-time data for the object's "Init_values" parameter is specified as an external resource (a GIF file). The value of the valuetype attribute is thus set to "ref" and the value is a URL designating the resource.

<P><OBJECT classid="http://www.gifstuff.com/gifappli"
       standby="Loading Elvis...">
<PARAM name="Init_values"
       value="./images/elvis.gif">
       valuetype="ref">
</OBJECT>

Note that we have also set the standby attribute so that the user agent may display a message while the rendering mechanism loads.

When an OBJECT element is rendered, user agents must search the content for only those PARAM elements that are direct children and "feed" them to the OBJECT.

Thus, in the following example, if "obj1" is rendered, "param1" applies to "obj1" (and not "obj2"). If "obj1" is not rendered and "obj2" is, "param1" is ignored, and "param2" applies to "obj2". If neither OBJECT is rendered, neither PARAM applies.

<P>
<OBJECT id="obj1">
   <PARAM name="param1">
   <OBJECT id="obj2">
      <PARAM name="param2">
   </OBJECT>
</OBJECT>

13.3.3 Global naming schemes for objects

The location of an object's implementation is given by a URL. As we discussed in the intro to URLs, the first segment of an absolute URL specifies the naming scheme used to transfer the data designated by the URL. For HTML documents, this scheme is frequently "http". Some applets might employ other naming schemes. For instance, when specifying a Java applet, auteurs may use URLs that begin with "java" and for ActiveX applets, auteurs may use "clsid".

In the following example, we insert a Java applet into an HTML document.

<P><OBJECT classid="java:program.start">
</OBJECT>

By setting the codetype attribute, a user agent can decide whether to retrieve the Java application based on its ability to do so.

<OBJECT codetype="application/java-archive"
        classid="java:program.start">
</OBJECT>

Some rendering schemes require additional information to identify their implementation and must be told where to find that information. auteurs may give path information to the object's implementation via the codebase attribute.

<OBJECT codetype="application/java-archive"
        classid="java:program.start">
        codebase="http://foooo.bar.com/java/myimplementation/"
</OBJECT>

The following example specifies (with the classid attribute) an ActiveX object via a URL that begins with the naming scheme "clsid". The data attribute locates the data to render (another clock).

<P><OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
        data="http://www.acme.com/ole/clock.stm">
This application is not supported.
</OBJECT>

13.3.4 Object declarations and instantiations

The preceding examples have only illustrated isolated object definitions. When a document is to contain more than one instance of the same object, it is possible to separate the declaration of the object from its instantiations. Doing so has several advantages:

To declare an object so that it is not executed when read by the user agent, set the boolean declare attribute in the OBJECT element. At the same time, auteurs must identify the declaration by setting the id attribute in the OBJECT element to a unique value. Later instantiations of the object will refer to this identifier.

A declared OBJECT must appear in a document before the first instance of that OBJECT.

An object defined with the declare attribute is instantiated every time an element that refers to that object requires it to be rendered (e.g., a link that refers to it is activated, an object that refers to it is activated, etc.).

In the following example, we declare an OBJECT and cause it so be instantiated by referring to it from a link. Thus, the object can be activated by clicking on some highlighted text, for example.

<P><OBJECT declare
        id="earth.declaration"
        data="TheEarth.mpeg"
        type="application/mpeg">
   The <STRONG>Earth</STRONG> as seen from space.
</OBJECT>
...later in the document...
<P>A neat <A href="#earth.declaration"> animation of The Earth!</A>

The following example illustrates how to specify run-time values that are other objects. In this example, we send text (a poem, in fact) to a hypothetical mechanism for viewing poems. The object recognizes a run-time parameter named "font" (say, for rendering the poem text in a certain font). The value for this parameter is itself an object that inserts (but does not render) the font object. The relationship between the font object and the poem viewer object is achieved by (1) assigning the id "tribune" to the font object declaration and (2) referring to it from the PARAM element of the poem viewer object (with valuetype and value).

<P><OBJECT declare
     id="tribune"
     type="application/x-webfont"
     data="tribune.gif">
</OBJECT>
...view the poem in KublaKhan.txt here...
<P><OBJECT classid="http://foo.bar.com/poem_viewer"
           data="KublaKhan.txt">
<PARAM name="font" valuetype="object" value="#tribune">
<P>You're missing a really cool poem viewer ...
</OBJECT>

User agents that don't support the declare attribute must render the contents of the OBJECT declaration.

13.4 Including an applet: the APPLET element

APPLET is deprecated (with all its attributes) in favor of OBJECT.
<!ELEMENT APPLET - - (PARAM | %flow;)* -- Java applet -->
<!ATTLIST APPLET
  %coreattrs;                      -- id, class, style, title --
  codebase    %URL;      #IMPLIED  -- optional base URL for applet --
  archive     CDATA      #IMPLIED  -- comma separated archive list --
  code        CDATA      #IMPLIED  -- applet class file --
  object      CDATA      #IMPLIED  -- serialized applet file --
  alt         %Text;     #IMPLIED  -- short description --
  name        CDATA      #IMPLIED  -- allows applets to find each other --
  width       %Length;   #REQUIRED -- initial width --
  height      %Length;   #REQUIRED -- initial height --
  align       %IAlign;   #IMPLIED  -- vertical or horizontal alignment --
  hspace      %Pixels;   #IMPLIED  -- horizontal gutter --
  vspace      %Pixels;   #IMPLIED  -- vertical gutter --
  >

Start tag: required, End tag: required

Attribute definitions

codebase = url [CT]
This attribute specifies the base URL for the applet. If this attribute is not specified, then it defaults the same base URL as for the current document. Values for this attribute may only refer to subdirectories of the directory containing the current document.
code = cdata [CS]
This attribute specifies either the name of the class file that contains the applet's compiled applet subclass or the path to get the class, including the class file itself. It is interpreted with respect to the applet's codebase. One of code or object must be present.
name = cdata [CS]
This attribute specifies a name for the applet instance, which makes it possible for applets on the same page to find (and communicate with) each other.
archive = url-list [CT]
This attribute specifies a comma-separated list of URLs for archives containing classes and other resources that will be "preloaded". The classes are loaded using an instance of an AppletClassLoader with the given codebase. Relative URLs for archives are interpreted with respect to the applet's codebase. Preloading resources can significantly improve the performance of applets.
object = cdata [CS]
This attribute names a resource containing a serialized representation of an applet's state. It is interpreted relative to the applet's codebase. The serialized data contains the applet's class name but not the implementation. The class name is used to retrieve the implementation from a class file or archive.

When the applet is "deserialized" the start() method is invoked but not the init() method. Attributes valid when the original object was serialized are not restored. Any attributes passed to this APPLET instance will be available to the applet. auteurs should use this feature with extreme caution. An applet should be stopped before it is serialized.

Either code or object must be present. If both code and object are given, it is an error if they provide different class names.

width = length [CI]
This attribute specifies the initial width of the applet's display area (excluding any windows or dialogs that the applet creates).
height = length [CI]
This attribute specifies the initial height of the applet's display area (excluding any windows or dialogs that the applet creates).

Attributes defined elsewhere

This element, supported by all Java-enabled browsers, allows designers to embed a Java applet in an HTML document. It has been deprecated in favor of the OBJECT element.

The content of the APPLET acts as alternate information for user agents that don't support this element or are currently configured not to support applets. User agents must ignore the content otherwise.

DEPRECATED EXAMPLE:
In the following example, the APPLET element includes a Java applet in the document. Since no codebase is supplied, the applet is assumed to be in the same directory as the current document.

<APPLET code="Bubbles.class" width="500" height="500">
Java applet that draws animated bubbles.
</APPLET>

This example may be rewritten as follows with OBJECT as follows:

<P><OBJECT codetype="application/java"
        classid="java:Bubbles.class"
        width="500" height="500">
Java applet that draws animated bubbles.
</OBJECT>

Initial values may be supplied to the applet via the PARAM element.

DEPRECATED EXAMPLE:
The following sample Java applet:

<APPLET code="AudioItem" width="15" height="15">
<PARAM name="snd" value="Hello.au|Welcome.au">
Java applet that plays a welcoming sound.
</APPLET>

may be rewritten as follows with OBJECT:

<OBJECT codetype="application/java"
        classid="AudioItem"
        width="15" height="15">
<PARAM name="snd" value="Hello.au|Welcome.au">
Java applet that plays a welcoming sound.
</OBJECT>

13.5 Including HTML in another HTML document

Sometimes, rather than linking to another HTML document, it is helpful to include it directly into a primary HTML document. auteurs may use either the IFRAME element or the OBJECT element for this purpose, but the elements differ in some ways. Not only do the two elements have different content models, the IFRAME element may be a target frame (see the section on specifying target frame information for details) and may be "selected" by a user agent as the focus for printing, viewing HTML source, etc. User agents may render selected frames elements in ways that distinguish them from unselected frames (e.g., by drawing a border around the selected frame).

An embedded document is entirely independent of the document in which it is embedded. For instance, relative URLs within the embedded document resolve according to the base URL of the embedded document, not that of the main document. Also, an embedded document does not inherit style information from the main document. An embedded document is only rendered within another document (e.g., in a subwindow); it remains otherwise independent.

For instance, the following line includes the contents of embed_me.html at the location where the OBJECT definition occurs.

...text before...
<OBJECT data="embed_me.html">
Warning: embed_me.html could not be included.
</OBJECT>
...text after...

Recall that the contents of OBJECT must only be rendered if the file specified by the data attribute cannot be loaded.

The behavior of a user agent in cases where a file includes itself is not defined.

13.6 Image maps

Image maps allow auteurs to specify regions of an image or object and assign a specific action to each region (e.g., retrieve a document, run a program, etc.) When the region is activated by the user, the action is executed.

An image map is created by associating an object with a specification of sensitive geometric areas on the object.

There are two types of image maps:

Client-side image maps are preferred over server-side image maps.

13.6.1 Client-side image maps

HTML 4.0 has two mechanisms for specifying client-side image maps:

  1. An element employs an image map that is defined outside the element itself. In this case, the MAP and AREA elements define the image map. This method is available for the IMG, OBJECT, and INPUT elements.
  2. An element's content contains the image map. This method is only available for the OBJECT element.

For an OBJECT image map, the two methods are mutually exclusive. The presence of either the usemap attribute or the shapes attribute for an OBJECT implies that the object being included is an image.

Furthermore, when the OBJECT element has an associated client-side image map, user agents may implement user interaction with the OBJECT solely in terms of the client-side image map. This allows user agents (such as an audio browser or robot) to interact with the OBJECT without having to process it; the user agent may even elect not to retrieve (or process) the object. When an OBJECT has an associated image map, auteurs should not expect that the object will be retrieved or processed by every user agent.

Alternate access to image maps 

User agents and auteurs should offer textual alternates to graphical image maps for cases when graphics are not available or the user cannot access them.

When MAP and AREA are used, auteurs are required to provide alternate text for each active region by way of the alt attribute (see below for information on how to specify alternate text). User agents may use this alternate text to create substitute textual links. These links may be activated in a variety of ways (keyboard, voice activation, etc.).

In the case of an OBJECT with the shapes attribute set, auteurs are required to specify links within the content of the OBJECT itself. Each link defines both the geometry of an active region and the destination program, document, or other resource. When the OBJECT element can be displayed, its content is ignored except for the definitions of the regions. When the OBJECT cannot be displayed, its contents are rendered normally, including the links. Thus, auteurs are not required to specify alternate text via an alt attribute. This technique also allows richer alternate content that what may be achieved with AREA and its alt attribute.

Client-side image maps with MAP, AREA, and usemap 

All elements that may specify a client-side image map that is external to the element must identify by name the MAP element that defines the image map. The usemap attribute links an element to its image map.

Attribute definitions

usemap = url [CT]
This attribute specifies the location of a map defined by MAP and AREA. The value of this attribute must match the value of the name attribute for MAP.
name = cdata [CI]
This attribute assigns a name to the image map defined by this element.

Here are the DTD fragments for MAP and AREA.

<!ELEMENT MAP - - (AREA)+ -- client-side image map -->
<!ATTLIST MAP
  %attrs;                          -- %coreattrs, %i18n, %events --
  name        CDATA      #REQUIRED  -- name of image map for refs by usemap --
  >

Start tag: required, End tag: required

<!ELEMENT AREA - O EMPTY -- client-side image map area -->
<!ATTLIST AREA
  %attrs;                          -- %coreattrs, %i18n, %events --
  shape       %Shape;    rect      -- controls interpretation of coords --
  coords      %Coords;   #IMPLIED  -- comma separated list of lengths --
  href        %URL;      #IMPLIED  -- URL for linked resource --
  target   %FrameTarget;    #IMPLIED -- render in this frame --
  nohref      (nohref)   #IMPLIED  -- this region has no action --
  alt         %Text;     #REQUIRED -- short description --
  tabindex    NUMBER     #IMPLIED  -- position in tabbing order --
  accesskey  %Character; #IMPLIED  -- accessibility key character --
  onfocus     %Script;   #IMPLIED  -- the element got the focus --
  onblur      %Script;   #IMPLIED  -- the element lost the focus --
  >

Start tag: required, End tag: forbidden

Attribute definitions

shape = default|rect|circle|poly [CI]
This attribute specifies the shape of a region. Possible values:
  • default: Specifies the entire region.
  • rect: Define a rectangular region.
  • circle: Define a circular region.
  • poly: Define a polygonal region.
coords = coordinates [CN]
This attribute specifies the position a shape on the screen. The number and order of values depends on the shape being defined. Possible combinations:
  • rect: left-x, top-y, right-x, bottom-y.
  • circle: center-x, center-y, radius.
  • poly: x1, y1, x2, y2, ..., xN, yN.

Coordinates are relative to the top, left corner of the object. All values are lengths. All values are separated by commas.

nohref [CI]
When set, this boolean attribute specifies that a region has no associated link.

Attributes defined elsewhere

In the following example, we create a client-side image map for the OBJECT element with MAP and AREA. We associate the image and the image map by (1) naming the image map with the name attribute of the MAP element and (2) designating that map by setting the usemap attribute on the OBJECT element.

<P><OBJECT data="navbar1.gif"
                 type="image/gif"
                 usemap="#map1">
<P>This is a navigation bar.
</OBJECT>

<MAP name="map1">
 <AREA href="guide.html"
          alt="Access Guide"
          shape="rect"
          coords="0,0,118,28">
 <AREA href="search.html"
          alt="Search"
          shape="rect"
          coords="184,0,276,28">
 <AREA href="shortcut.html"
          alt="Go"
          shape="circle"
          coords="184,200,60">
 <AREA href="top10.html"
          alt="Top Ten"
          shape="poly"
          coords="276,0,373,28,50,50,276,0">
</MAP>

Here is a similar version using the IMG element instead of OBJECT (with the same MAP declaration):

<P><IMG src="navbar1.gif" usemap="#map1" alt="navigation bar">

If two or more defined regions overlap, the competing AREA element defined earliest in the document takes precedence (i.e., responds to user input).

Note: MAP is not backwards compatible with HTML 2.0 user agents.

Client-side image maps for OBJECT with shapes 

Attribute definitions

shapes [CI]
When set, this boolean attribute specifies that the element has an image map and that its contents contain the geometric descriptions of the active regions.
export [CI]
When set, this boolean attribute allows an image map defined within this element's content to be exported to an enclosing OBJECT element. This is only useful when inner and outer OBJECT elements are both images and have the same size.

The second way to specify a client-side image map for an OBJECT element is for the author to set the shapes attribute and then to define the image map within the element's content. Each region of the image map is specified by a link (the A element) that has an associated geometric shape (via the shape attribute). The presence of the shapes attribute implies that user agents must parse the contents of the element to look for anchors.

In the following example, we create a client-side image map for the OBJECT element by associating URLs with regions specified by a series of A elements.

<P><OBJECT data="navbar.gif" shapes>
 <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
 <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
 <A href="search.html" shape="circle" coords="184,200,60">Search</A> |
 <A href="top10.html" shape="poly" coords="276,0,373,28,50,50,276,0">Top Ten</A>
</OBJECT>

Nested OBJECT elements are useful for providing fallbacks in case a user agent doesn't support certain formats. For example:

<P>
<OBJECT data="navbar.png" type="image/png">
  <OBJECT data="navbar.gif" type="image/gif">
    text describing the image...
  </OBJECT>
</OBJECT>

If the user agent doesn't support the PNG format, it tries to render the GIF image. If it doesn't support GIF (e.g., it's a speech-based user agent), it defaults to the text description provided as the content of the inner OBJECT element.

When OBJECT elements are nested this way, auteurs may share image maps among them. A nested OBJECT shares an image map specified via the shapes attribute with its parent OBJECT by setting its export attribute:

<P>
<OBJECT data="navbar.png" type="image/png" shapes>
  <OBJECT data="navbar.gif" type="image/gif" shapes export>
    <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
    <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
    <A href="search.html" shape="circle" coords="184,200,60">Search</A> |
    <A href="top10.html" shape="poly" coords="276,0,373,28,50,50,276,0">Top Ten</A>
  </OBJECT>
</OBJECT>

If the user agent is able to render an OBJECT element, and this element includes the shapes attribute, then the user agent must look within its content for shaped regions defined by A elements. This process continues within nested OBJECT elements provided these elements include both the shapes and the export attributes.

If the nested OBJECT element defines an image map that should not be shared with its parent, then the the export attribute must not be set.

13.6.2 Server-side image maps

Server-side image maps may be interesting in cases where the image map is too complicated for a client-side image map.

It is only possible to define a server-side image map for the IMG and INPUT elements.

In the case of IMG, the IMG must be enclosed by an A element.

In the case of INPUT, the INPUT must be of type "image".

In both cases, the boolean attribute ismap [CI] on the element must be set.

When the user activates the link by clicking on the image, the screen coordinates are sent directly to the server where the document resides. Screen coordinates are expressed as screen pixel values relative to the image. For normative information about the definition of a pixel and how to scale it, please consult [CSS1].

In the following example, the active region defines a server-side link. Thus, a click anywhere on the image will cause the click's coordinates to be sent to the server.

<P><A href="http://www.acme.com/cgi-bin/competition">
        <IMG src="game.gif" ismap alt="target"></A>

The location clicked is passed to the server as follows. The user agent derives a new URL from the URL specified by the href attribute of the A element, by appending `?' followed by the x and y coordinates, separated by a comma. The link is then followed using the new URL. For instance, in the given example, if the user clicks at at the location x=10, y=27 then the derived URL is "http://www.acme.com/cgi-bin/competition?10,27".

User agents that do not offer the user a means to select specific coordinates (e.g., non-graphical user agents that rely on keyboard input, speech-based user agents, etc.) should send the coordinates "0,0" to the server when the link is activated.

13.7 Visual presentation of images, objets, and applets

All IMG and OBJECT attributes that concern visual alignment and presentation have been deprecated in favor of style sheets.

13.7.1 Width and height

Attribute definitions
width = length [CN]
Image and object width override.
height = length [CN]
Image and object override.

When specified, the width and height attributes tell user agents to override the natural image or object size in favor of these values.

When the object is an image, it is scaled. User agents should do their best to scale an object or image to match the width and height specified by the author. Note that lengths expressed as percentages are based on the horizontal or vertical space currently available, not on the natural size of the image, object, or applet.

The height and width attributes give user agents an idea of the size of an image or object so that they may reserve space for it and continue rendering the document while waiting for the image data.

13.7.2 White space around images and objects

The vspace and hspace attributes specify the amount of white space to be inserted to the left and right (hspace) and above and below (vspace) an IMG, APPLET, OBJECT. The default value for these attributes is not specified, but is generally a small, non-zero length. Both attributes take values of type length.

13.7.3 Borders

An image or object may be surrounded by a border (e.g., when a border is specified by the user or when the image is the content of an A element).

Attribute definitions
border = pixels
Deprecated. The border attribute specifies the width of this border in pixels. The default value for this attribute depends on the user agent.

13.7.4 Alignment

The align attribute specifies the position of an IMG, OBJECT, or APPLET with respect to its context.

The following values for align concern the object's position with respect to surrounding text:

Two other values, left and right, cause the image to float to the current left or right margin. They are discussed in the section on floating objects.

Differing interpretations of align. User agents vary in their interpretation of the align attribute. Some only take into account what has occurred on the text line prior to the element, some take into account the text on both sides of the element.

13.8 How to specify alternate text

Attribute definitions

alt = text [CS]
For user agents that cannot display images, forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the lang attribute.

Several non-textual elements (IMG, AREA, APPLET, and INPUT) require auteurs to specify alternate text to serve as content when the element cannot be rendered normally. Specifying alternate text assists users without graphic display terminals, users whose browsers don't support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc.

The alt attribute must be specified for the IMG and AREA elements. It is optional for the INPUT and APPLET elements.

While alternate text may be very helpful, it must be handled with care. auteurs should observe the following guidelines:

Implementors should consult the section on generating alternate text for information about how to handle cases of omitted alternate text.