ÈÝÆ÷

Ŀ¼
  1. °üº¬Ò»¸öÎï¼þ: OBJECT ÔªËØ
    1. Îï¼þ³ǫ̃»¯: PARAM ÔªËØ
    2. Îï¼þÉùÃ÷µÄʵÀý
    3. Îï¼þ¶ÔÆ뷽ʽ
  2. °üº¬Ò»ÕÅͼÏñ: IMG ÔªËØ
    1. ͼÏñ¶ÔÆ뷽ʽ
  3. °üº¬Ò»¸ö¿ÉÔËÐÐС³ÌÐò: APPLET ÔªËØ
  4. ÔÚÒ»·Ý HTML Öаüº¬ÁíÒ»·Ý HTMLÎĵµ
  5. ÔÚ HTML ÎĵµÖаüº¬Ò»¸öͼÏñÓ³Éä
    1. ¿Í»§¶ËͼÏñÓ³Éä
    2. ͨ¹ý MAP ºÍ AREA µÄ¿Í»§¶ËͼÏñÓ³Éä
    3. ·þÎñÆ÷¶ËͼÏñÓ³Éä
  6. ͼÏñ, Îï¼þºÍСÔËÐгÌÐòµÄ¿ÉÊÓ±íÏÖ
  7. Èç¹ûÖ¸¶¨½»»¥Îı¾
Ï Ãæ µÄ Õ ½Ú Ãè Êö ÁË ÓÉ HTML Ìá ¹© µÄ Óà ÓÚ ÔÚ ÎÄ µµ ÖÐ °ü º¬ Ò» ¸ö ×Ê  Ô´ µÄ ²» ͬ µÄ ½á ¹¹. HTML ÔÊ Ðí ×÷ Õß °ü º¬ Îï¼þ, ͼÏñ, СÔËÐгÌʽ, Îļþ ºÍ ͼÏñÓ³Ïñ.

°üº¬Ò»¸öÎï¼þ:OBJECT ÔªËØ

<!ENTITY % OAlign "(texttop|middle|textmiddle|baseline|
                             textbottom|left|center|right)">

<!ELEMENT OBJECT - - (PARAM | %block)*>
<!ATTLIST OBJECT
  %attrs                           -- %coreattrs, %i18n, %events --
  declare     (declare)  #IMPLIED  -- declare but don't instantiate flag --
  classid     %URL       #IMPLIED  -- identifies an implementation --
  codebase    %URL       #IMPLIED  -- some systems need an additional URL --
  data        %URL       #IMPLIED  -- reference to object's data --
  type     %ContentType #IMPLIED  -- Internet content type for data --
  codetype %ContentType #IMPLIED  -- Internet content type for code --
  standby     CDATA      #IMPLIED  -- message to show while loading --
  align       %OAlign    #IMPLIED  -- positioning inside document --
  height      %Length    #IMPLIED  -- suggested height --
  width       %Length    #IMPLIED  -- suggested width --
  border      %Length    #IMPLIED  -- suggested link border width --
  hspace      %Length    #IMPLIED  -- suggested horizontal gutter --
  vspace      %Length    #IMPLIED  -- suggested vertical gutter --
  usemap      %URL       #IMPLIED  -- reference to image map --
  shapes      (shapes)   #IMPLIED  -- object has shaped hypertext links --
  name        %URL       #IMPLIED  -- submit as part of form --
  ÌØ ÐÔ ¶¨ Òå
 
codebase = classid Ö¸ ¶¨ µÄ »ù ±¾ · ¾¶ (¾Í ÊÇ Ëµ µ± Îï ¼þ Ðè Òª ´ú Âë µÄ Ê± ºò, Ëü ¸ø ³ö »ù URL). Èç ¹û Õâ ¸ö ÌØ ÐÔ Ã» ÓÐ Ö¸ ¶¨, Ëü µÄ ȱ Ê¡ Öµ ÊÇ µ± Ç° ÎÄ µµ µÄ »ù URL. ²¢ ²» ÊÇ Ëù ÓÐ µÄ äÖ È¾ ½á ¹¹ Ðè Òª Õâ ¸ö ÌØ ÐÔ.
classid = codetype = [MIMETYPES]), ´Ë ÐΠʽ ÊÇ ÓÉ classid Ö¸ ¶¨ µÄ äÖ È¾ ½á ¹¹. µ± classid ±» Ö¸ ¶¨ ʱ Õâ ¸ö ÌØ ÐÔ ÊÇ ¿É Ñ¡ µÄ ²¢ ÇÒ ÊÇ ½¨ Òé µÄ, Òò Ϊ Ëü ÔÊ Ðí Óà »§ ´ú Àí Æ÷ À´ ±Ü Ãâ µ÷ Èë ²» Ìá ¹© ý Ìå ÐΠʽ. Èç ¹û û ÓÐ ÏÔ Ê½ µØ ¸ø ³ö Õâ ¸ö ÌØ ÐÔ µÄ Öµ, Ëü Ôò ȱ Ê¡ Ϊ data = type = data ˵ Ã÷ µÄ Êý ¾Ý »¥ Áª Íø ý Ìå ÐΠʽ (Internet Media Type, ²Î ¼û data ±» Ö¸ ¶¨ ʱ Ëü ÊÇ ¿É Ñ¡ µÄ ²¢ ÇÒ ÊÇ ½¨ Òé µÄ, Òò Ϊ Ëü ÔÊ ÐíÓà »§ ´ú Àí Æ÷ ±Ü Ãâ µ÷ Èë ²» Ìá ¹© µÄ ý Ìå ÐΠʽ. Èç ¹û Õâ ¸ö ÌØ ÐÔ Öµ û ÓÐ ±» ÏÔ Ê½ µØ ¸ø ³ö, Óà »§ ´ú Àí Æ÷ ×Ô ÐÐ ÅÐ ¶Ï ±» äÖ È¾ µÄ Êý ¾Ý ÐΠʽ.
declare
ÔÚ ÏÔ Ê¾ µÄ ʱ ºò, Õâ ¸ö ²¼ ¶û ÌØ ÐÔ Ê¹ Ö» ʹ Óà µ± Ç° OBJECT µÄ Éù Ã÷. Îï ¼þ ±Ø Ðë Á¢ ¼´ ±» ºó À´ µÄ OBJECT ¶¨ Òå Ö¸ Ã÷.
standby = align = texttop|middle|textmiddle|baseline|textbottom|left|center|right
²» ÔÞ ³É. Õâ ¸ö ÌØ ÐÔ Ö¸ ¶¨ ÁË Îï ¼þ µÄ λ Öà ÒÔ ¼° Χ ÈÆ µÄ ÉÏ Ï Òé. Ëü ¿É ÄÜ µÄ Öµ ÔÚ Ìؼþ¶ÔÆ뷽ʽ ÖÐ ±» ¶¨ Òå.
´ó ¶à Êý Óà »§ ´ú Àí Æ÷ °ü º¬ ¶Ô ³£ ¹æ Êý ¾Ý ÐΠʽ Èç ÎÄ ±¾, GIF ͼ Ïñ, ÑÕ É«, ×Ö Ìå ºÍ ¿É ¿Ø ͼ Ïñ Ôª ËØ µÄ äÖ È¾ ЊϢ. Ϊ ÁË äÖ È¾ Ëü ÃÇ Ìì Éú ²» Ìá ¹© µÄ Êý ¾Ý ÐΠʽ, Óà »§ ´ú Àí Æ÷ ͨ ³£ ÔË ÐÐ Íâ ²¿ ³Ì ʽ. OBJECT Ôª ËØ ÔÊ Ðí ×÷ Õß À´ ¿Ø ÖÆ Óà »§ ´ú Àí Æ÷ ÔÚ ÄÚ ¿Í »¹ ÊÇ Íâ ²¿ ´¦ Àí °ü º¬ µÄ Îï ¼þ.
ÔÚ ´ó ¶à Êý ͨ ³£ µÄ Çé ¿ö ÏÂ, Ò» ¸ö ²å Èë µÄ äÖ È¾ ½á ¹¹ Ö¸ ¶¨ ÁË ÐŠϢ µÄ Èý ÖÖ ÐΠʽ:
 
  • äÖ È¾ ½á ¹¹ µÄ ¹á ³¹
  • ±» äÖ È¾ µÄ Êý ¾Ý
  • ÔÚ äÖ È¾ ½á ¹¹ ÔË ÐРʱ Ðè  Òª µÄ ¶î Íâ Öµ.
ÔÚ Ò» ¶¨ µÄ Çé ¿ö ÏÂ, Ëü ÎÞ Ðè Ö¸ ¶¨ Ëù ÓÐ µÄ Õâ Щ ÐŠϢ. Àý Èç, ij Щ äÖ È¾ ½á ¹¹ ¿É ÄÜ ²» Ðè Òª Êý ¾Ý (Èç °ü º¬ С ÔË ÐÐ ³Ì ʽ µÄ С ¶¯ »­). Æä Ëü äÖ È¾ ½á ¹¹ ²¢ ²» Ðè Òª ÔË ÐРʱ ³õ ʼ »¯. ×î ºó, ij Щ äÖ È¾ ½á ¹¹ ²¢ ²» Ðè  Òª ¶î Íâ µÄ Ö´ ÐРЊϢ, ¾Í ÊÇ Ëµ Óà »§ ´ú Àí Æ÷ ×Ô ÐÐ ¿É ÄÜ ÒÑ ¾­ Öª Ïþ Èç ºÎ À´ äÖ È¾ Õâ Щ ý Ìå ÐΠʽ (Èç GIF ͼ Ïñ).

ÔÚ HTML ÖÐ,  OBJECT Ôª ËØ Ö¸ ¶¨ ÁË äÖ È¾ ½á ¹¹ µÄ λ Öà ÒÔ ¼° äÖ È¾ ½á ¹¹ Ðè µÄ Êý ¾Ý µÄ λ ÖÃ. Õâ Щ ÌØ ÐÔ Í¨ ¹ý OBJECT Ôª ËØ µÄ ЊϢ À´ Ö¸ ¶¨. PARAM Ôª ËØ Ö¸ Ò» ¸ö ¶¯ ÐР̬ Öµ µÄ ¼¯. ÎÒ ÃÇ ÔÚ ºó Ãæ ÑÐ ¾¿ Õâ ¸ö Ôª ËØ, ÔÚ Îï¼þ³õʼ»¯ ²¿ ·Ö.

Ò» ¸ö Óà »§ ´ú Àí Æ÷ ±Ø Ðë ¸ù ¾Ý Ï ÁÐ µÄ ÓÅ ÏÈ È¨ ·¨ Ôò À´ ½â Òë OBJECT Ôª ËØ:

  1. Óà »§ ´ú Àí Æ÷ ±Ø Ðë Ê× ÏÈ ³¢ ÊÔ Ôª ËØ ÌØ ÐÔ ¶¨ Òå µÄ ½á ¹¹.
  2. ²» ¹Ü ʲ ô Ô­ Òò Èç ¹û Óà »§ ´ú Àí Æ÷ ²» ÄÜ äÖ È¾ Õâ ¸ö ½á ¹¹ (û ÓÐ Éè ÖÃ, ×Ê Ô´ ȱ ·¦ ÒÔ ¼° ´í Îó ½¨ ¹¹), µ« Ëü ±Ø Ðë ³¢ ÊÔ äÖ È¾ Ôª ËØ ÄÚ ÈÝ.
ÔÚ Ï Ãæ µÄ Àý  ³Ì ÖÐ, ÎÒ ÃÇ ²å Èë ÁË Ò» ¸ö Ðé ¹¹ µÄ ÒÔ Python (´ó òþ) Óï ÑÔ Ð´ µÄ äÖ È¾ ½á ¹¹ À´ ÏÔ Ê¾ Ò» ¸ö µç ÄÔ Ê± ÖÓ. Õâ ¸ö ¿É ͨ ÐÐ ³Ì  ʽ ÎÞ Ðè ¶î Íâ µÄ Êý ¾Ý ºÍ ÔË ÐР̬ Öµ. classid ÌØ ÐÔ Ö¸ ¶¨ С ÔË ÐÐ ³Ì ʽ µÄ λ ÖÃ:
    
<OBJECT classid="http://www.miamachina.it/analogclock.py">
</OBJECT>
ÎÒ ÃÇ ½¨ Òé ͨ ¹ý °ü º¬ OBJECT ÄÚ ÈÝ ÖÐ µÄ ½» »¥ ÎÄ ×Ö À´ Íê ³É Õâ ¸ö Éù Ã÷. ´Ë Àý ÖÐ Óà »§ ´ú Àí Æ÷ ÎÞ ·¨ äÖ È¾ Õâ ¸ö ÖÓ.
    
<OBJECT classid="http://www.miamachina.it/analogclock.py">
An animated clock.
</OBJECT>
×¢ Òâ Óà »§ ´ú Àí Æ÷ ½« ÔÚ ½â Òë OBJECT Éù Ã÷ µÄ ͬ ʱ äÖ È¾ Õâ ¸ö ÖÖ. ÔÚ Îï ¼þ µÚ Ò» ´Î Éù Ã÷ ʱ äÖ È¾ ½á ¹¹ ¿É ÄÜ »á ÑÓ ³Ù (ÔÚ Ï Ãè Êö).
Ò» ¸ö OBJECT Ôª ËØ ¶¨ Òå µÄ ÖØ Òª Ó° Ïì ÊÇ Ö¸ Ã÷ ½» »¥ Îï ¼þ µÄ äÖ È¾ ½á ¹¹; ÿ ¸ö °ó ¶¨ µÄ OBJECT Éù Ã÷ Ö¸ ¶¨ Ò» ¸ö ½» »¥ äÖ È¾ ½á ¹¹. Èç ¹û Ò» ¸ö Óà »§ ´ú Àí Æ÷ ÎÞ ·¨ äÖ È¾ Ò» ¸ö Íâ ²¿ OBJECT, Ëü ³¢ ÊÔ äÖ È¾ Ëü µÄ ÄÚ ÈÝ, ¿É ÒÔ ÊÇ Áí Ò» ¸ö OBJECT Ôª ËØ µÈ.
ÔÚ Ï Ãæ µÄ Àý ³Ì ÖÐ, ÎÒ ÃÇ Ç¶ Èë Êý ¸ö OBJECT Éù Ã÷ À´ ¾Ù Àý ˵ Ã÷ äÖ È¾ ¹¤ ×÷. Óà »§ ´ú Àí Æ÷ ½« ³¢  ÊÔ äÖ  Ⱦ Ëü ÄÜ ¹» µÄ µÚ Ò» ¸ö OBJECT Ôª ËØ, ͨ ¹ý Ï Ãæ µÄ ´Î Ðò: (1) Ò» ¸ö Óà Python (´ó òþ) Óï ÑÔ Ð´ µÄ µØ Çò С ÔË ÐÐ ³Ì ʽ, (2) Ò» ¸ö µØ Çò µÄ MPEG ¶¯ »­, (3) Ò» ¸ö µØ Çò µÄ GIF ͼ Ïñ, (4) ½» »¥ ÎÄ ±¾
<OBJECT title="The Earth as seen from space"
           classid="http://www.observer.mars/TheEarth.py">
 <OBJECT data="TheEarth.mpeg" type="application/mpeg">
  <OBJECT src="TheEarth.gif">
   The <STRONG>Earth</STRONG> as seen from space.
  </OBJECT>
 </OBJECT>
</OBJECT>
Íâ ²¿ Éù Ã÷ Ö¸ ¶¨ Ò» ¸ö С ÔË ÐÐ ³Ì ʽ ²» Ðè Òª Êý ¾Ý ºÍ ³õ ʼ Öµ. µÚ ¶þ ¸ö Éù Ã÷ Ö¸ Ã÷ Ò» ¸ö MPEG µç Ó° ²¢ ÇÒ ÓÉ ÓÚ Ã» ÓÐ ¶¨ Òå Ò» ¸ö äÖ È¾ ½á ¹¹, Ëü ÒÀ ¿¿ Óà »§ ´ú Àí Æ÷ À´ ´¦ Àí Õâ ¸ö ¶¯ »­. ÎÒ ÃÇ »¹ Éè Öà ÁË
ÄÚ ²ã Óë Íâ ²¿ Êý ¾Ý µÄ ±È ½Ï. ±» äÖ È¾ µÄ Êý ¾Ý ¿É ÒÔ Í¨ ¹ý Á½ ÖÖ Í¾ ¾¶ À´ Ö¸ ¶¨: ÄÚ ²ã ºÍ ºÍ À´ ×Ô ÓÚ Íâ ²¿ ×Ê Ô´ µÄ. ÐÎ ³É ·½ ·¨ ͨ ³£ ½« Òý Æð ¸ü ¿ì ËÙ  µÄ äÖ È¾, µ« ÔÚ äÖ È¾ ´ó Á¿ Êý ¾Ý ʱ È´ ÊÇ ²» Ïà ÒË µÄ.

Îï¼þ³õʼ»¯: PARAM ÔªËØ

<!ELEMENT PARAM - O EMPTY       -- named property value -->
<!ATTLIST PARAM
  name        CDATA      #REQUIRED -- property name --
  value       CDATA      #IMPLIED  -- property value --
  valuetype (DATA|REF|OBJECT) DATA -- How to interpret value --
  type        CDATA      #IMPLIED  -- Internet media type --
  >
¿ª ʼ ±ê ¼Ç: Ðè Òª, ½á Êø ±ê ¼Ç: ½û Ö¹
ÌØ ÐÔ ¶¨ Òå
 
name = value = valuetype = data|ref|object
Õâ ¸ö ÌØ ÐÔ Ö¸ ³ö value ÌØ ÐÔ µÄ ÐΠʽ. ¿É ÄÜ µÄ Öµ Ϊ:
  • data: Õâ ¸ö ÓÉ value ˵ Ã÷ µÄ Öµ ÔÚ ½â ¾ö ÁË ÈÎ ºÎ µÄ °ó ¶¨ ×Ö ·û ºÍ Êý ×Ö ×Ö ·û ºó ½« Ö± ½Ó ×÷ Ϊ Ò» ¸ö ×Ö ·û ´® ´« ËÍ ¸ø äÖ È¾ »ú ÖÆ. Õâ ÊÇ Õâ ¸ö ÌØ ÐÔ µÄ ȱ  Ê¡ Öµ ²¢ ¿É ÄÜ ³ö ÏÖ ÔÚ Ôª ËØ µÄ ¿ª ʼ ±ê ¼Ç ÖÐ.
  • ref: Õâ ¸ö ÓÉ value Ö¸ ¶¨ µÄ Öµ ÊÇ Ò» ¸ö URL, Ëü Ö¸ Ã÷ ÁË Ò» ¸ö ×Ê  Ô´ µÄ ¶¯ ÐР̬ Öµ ´æ ·Å ÔÚ ÄÄ Àï. Õâ ¸ö URL ±Ø Ðë ²» ±ä µØ ´« ËÍ ¸ø äÖ È¾ ½á ¹¹, ¾Í ÊÇ Ëµ û ÓÐ ¾ö ¶¨ ¹ý.
  • object: Õâ ¸ö ÓÉ Éù Ã÷ µÄ Öµ ÊÇ Ò» ¸ö URL Ƭ ¶Ï ²¢ ÓÉ  OBJECT Éù Ã÷ ÔÚ Í¬ Ò» ƪ  ÎÄ µµ ÖÐ Éè ¶¨. ÔÚ ´Ë Àý  ÖÐ, OBJECT ¶¨ Òå ±Ø Ðë ÒÔ Ëü µÄ id ÌØ ÐÔ ±ê ʶ.
type = valuetype Ö» ÓÐ ÔÚ ÌØ ÐÔ ±» ¶¨ Òå Ϊ "ref" ʱ,  ´Ë ÌØ ÐÔ Ö¸ ¶¨ ÁË ÓÉ value ÌØ ¶¨ Ö¸ ×Ê Ô´ µÄ »¥ Áª Íø ý Ìå ÐΠʽ (²Î ¼û
PARAM Ôª ËØ Ö¸ ¶¨ Ò» ¸ö ¿É ±» ÔË ÐРʱ äÖ È¾ ½á ¹¹ µÄ Éè Öà ×é. ÈÎ Òâ Êý Á¿ µÄ PARAM Ôª ËØ ¿É ÒÔ ³ö ÏÖ ÓÚ Ò» ¸ö OBJECT Éù Ã÷ µÄ ¿ª ʼ ²¿ ·Ö. Ãû ³Æ ºÍ Öµ µÄ Óï ·¨ ¼Ù ¶¨ ÄÜ ¹» ±» äÖ È¾ ½á ¹¹ Àí ½â. Ãû ³Æ ºÍ Öµ ͨ ¹ý ±ê ×¼ Êä Èë ´« ËÍ ¸ø äÖ È¾ »ú ÖÆ.
ÎÒ ÃÇ »Ø µ½ ÎÒ ÃÇ µÄ ÖÓ Àý ³Ì. Õâ ´Î, ÎÒ ÃÇ ¼Ù ¶¨ äÖ È¾ »ú ÖÆ (ÖÓ) ÄÜ ¹» ´¦ Àí Á½ ¸ö ¶¨ Òå ³õ ʼ ¸ß ¶È ºÍ ¿í ¶È µÄ ÔË ÐР̬ ²Î Êý. ÎÒ ÃÇ Í¨ ¹ý ³õ ʼ µÄ Á½ ¸ö PARAM Ôª ËØ À´ Éè ¶¨ Ò» ¸ö 40x40 µÄ ³¤ ·½ ÐÎ.
    
<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 apps.
</OBJECT>
Since the default valuetype for a PARAM element is "data", we could replace the above declarations with either:
 
<PARAM name="height" value="40">
<PARAM name="width" value="40" >
or:
 
<PARAM name="height" value="40" data>
<PARAM name="width" value="40"  data>
(The latter form -- the value "data" only for valuetype attribute -- is possible due to the DTD definition of this attribute.)
In the following example, run-time data for the rendering mechanism'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.
<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 render a message while the rendering mechanism loads.
Rendering mechanisms are located by URLs. As we discussed in the section on URLs, the first segment of an absolute URL specifies the protocol used to transfer the data designated by the URL. For HTML documents, this protocol is generally "http". Some rendering mechanisms might employ other protocols. For instance, when specifying a Java rendering mechanism, you may use URLs that begin with "java" and for ActiveX applets, you may use "clsid".
In the following example, we insert a Java applet into an HTML document.
<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/octet-stream"
           classid="java:program.start">
</OBJECT>
Some rendering schemes require additional information to identify their implementation and must be told where to find that information. You may give path information to the rendering mechanism via the codebase attribute.
<OBJECT codetype="application/octet-stream"
           classid="java:program.start">
           codebase="http://foooo.bar.com/java/myimplementation/"
</OBJECT>
The following example specifies (with the classid attribute) an ActiveX rendering mechanism via a URL that begins with the protocol information "clsid". The data attribute locates the data to render (another clock).
<OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
           data="http://www.acme.com/ole/clock.stm">
This application is not supported.
</OBJECT>

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:
  • Data may be retrieved from the network by the user agent one time (during the declaration) and reused for each instantiation.
  • It is possible to instantiate an object from a different location in the document, for example, by activating a link.
  • It is possible to specify objects as run-time data for other objects.
To declare an rendering mechanism 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, you 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 rendering mechanism defined with the declare attribute is instantiated every time the OBJECT is referenced thereafter.

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.
<OBJECT declare
           id="earth_declaration" 
           data="TheEarth.mpeg" 
           type="application/mpeg">
  <OBJECT src="TheEarth.gif">
   The <STRONG>Earth</STRONG> as seen from space.
  </OBJECT>
</OBJECT>
...later in the document...
Click to see 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 rendering mechanism 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).
<OBJECT declare
     id="tribune"
     type="application/x-webfont"
     data="tribune.gif">
</OBJECT>
...view the poem in KublaKhan.txt here...
<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.

Object alignment

The align attribute has been deprecated for this element in favor of style sheets.

The align attribute specifies the position of an object with respect to its context.

The following values place an object in the heart of text:

  • texttop: means the top of the object should be vertically aligned with the top of the current text line.
  • middle: means the middle of the object should be vertically aligned with the current baseline.
  • textmiddle: means the middle of the object should be vertically aligned with the position midway between the baseline and the x-height for the current font. The x-height is defined as the top of a lower case x in Western writing systems. If the text font is an all-caps style, user agents should use the height of a capital X. For other writing systems, user agents should align the middle of the object with the middle of the text.
  • baseline: means the bottom of the object should be vertically aligned with the current baseline.
  • textbottom: means the bottom of the object should be vertically aligned with the bottom of the current text line.
Three other values, left, center, and right, cause an object to float. They are discussed in the section on Including an image: the IMG element
<!-- To avoid problems with text-only 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         CDATA      #IMPLIED  -- description for text only browsers --
  align       %IAlign    #IMPLIED  -- vertical or horizontal alignment --
  height      %Pixels    #IMPLIED  -- suggested height in pixels --
  width       %Pixels    #IMPLIED  -- suggested width in pixels --
  border      %Pixels    #IMPLIED  -- suggested link border width --
  hspace      %Pixels    #IMPLIED  -- suggested horizontal gutter --
  vspace      %Pixels    #IMPLIED  -- suggested vertical gutter --
  usemap      %URL       #IMPLIED  -- use client-side image map --
  ismap       (ismap)    #IMPLIED  -- use server-side image map --
  >
Start tag: required, End tag: forbidden
Attribute definitions
 
src = align = bottom|middle|top|left|right
Deprecated. This attribute specifies the position of the image with respect its surrounding context. Its values are explained in the section on image alignment.
The IMG element embeds an image in the current document at the location of the element's definition. However, we recommend using the OBJECT element to insert an image into a document.

The height and width attributes of this element override the natural height and width of the source image. User agents should scale the image appropriately.

In an earlier example, we defined a link to a family photo. Here, we insert the photo directly into the current document
...preceding text...
I just returned from vacation! Here's a photo of my family at the lake:
<IMG src="http://www.somecompany.com/People/Ian/vacation/family.png"
     alt="A photo of my family at the lake.">
This may be expressed with the OBJECT element as follows:
...preceding text...
I just returned from vacation! Here's a photo of my family at the lake:
<OBJECT data="http://www.somecompany.com/People/Ian/vacation/family.png"
        type="image/png">
A photo of my family at the lake.
</OBJECT>
The alt attribute specifies alternate text when the image cannot be displayed (see below for information on how to specify alternate text ).

Image alignment

The align attribute has been deprecated for this element in favor of style sheets.

The align attribute specifies the position of an object with respect to its context.

The following values place an object in the heart of text:

  • bottom: means that the bottom of the image should be vertically aligned with the current baseline. This is the default value.
  • middle: means that the center of the image should be vertically aligned with the current baseline.
  • top: means that the top of the image should be vertically aligned with the top of the current text line.
Two other values, left and right, cause the image to float. They are discussed in the section on Differing interpretations of align. Existing 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.

Including an applet: the APPLET element

APPLET is deprecated.
<!ELEMENT APPLET - - (PARAM | %inline)*>
<!ATTLIST APPLET
  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         CDATA      #IMPLIED   -- description for text only browsers --
  name        CDATA      #IMPLIED   -- allows applets to find each other --
  width       %Pixels    #REQUIRED  -- suggested width in pixels --
  height      %Pixels    #REQUIRED  -- suggested height in pixels --
  align       %IAlign    #IMPLIED   -- vertical or horizontal alignment --
  hspace      %Pixels    #IMPLIED   -- suggested horizontal gutter --
  vspace      %Pixels    #IMPLIED   -- suggested vertical gutter --
  >
Start tag: required, End tag: required
Attribute definitions
 
codebase = code = name = width = height = align = bottom|middle|top|left|right
This attribute specifies the position of the object with respect to its surrounding context. Its values are explained in the section on image alignment.
archive = codebase. Preloading resources can significantly improve the performance of applets.
object = 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. The content must be ignored otherwise.

The following sample Java applet:
<APPLET code="Bubbles.class" width="500" height="500">
Java applet that draws animated bubbles.
</APPLET>
may be rewritten as follows with OBJECT:
<OBJECT codetype="application/octet-stream"
        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.
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/octet-stream"
        classid="AudioItem" 
        width="15" height="15">
<PARAM name="snd" value="Hello.au|Welcome.au">
Java applet that plays a welcoming sound.
</OBJECT>

Including HTML in another HTML document

Sometimes, rather than linking to another document, it is helpful to include the contents of an HTML document in another HTML document. We recommend using the OBJECT element with the data attribute for this purpose.
For instance, the following line will include the contents of piece_to_include.html at the location where the OBJECT definition occurs.
...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...
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.
Careful file inclusions. Be careful if you attempt to include a section of an HTML document defined by an anchor. The entire document after the anchor definition will be included, and you might unwittingly include unwanted end tags (for elements such as BODY, HTML, etc.) in your document.
The IFRAME element may also be used to insert an inline frame containing text in an HTML document.

Including an image map in an HTML document

An image map allows users authors to specify active regions of an image or object and assign a specific action to each region (e.g., retrieve a document, run a program, etc.)

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:

  • Server-side. When a user activates a region of a server-side image map with a mouse, the pixel coordinates of the click are sent to the server where the document is housed. The server interprets the coordinates and performs some action.
  • Client-side. When a user activates a region of a client-side image map with a mouse, the pixel coordinates are interpreted by the user agent. The user agent selects a link that was specified for the activated region and follows it.
Client-side image maps are preferred over server-side image maps. It is possible to implement client-side image maps with several elements.
Non-graphical representation of image maps. Non-graphical user agents may render client-side image maps as sets of textual links. The textual region may be activated by keyboard input.

Client-side image maps

The following attributes are defined for several elements (A and AREA). They allow authors to specify a set of geometrical regions and associate URLs with them.
Attribute definitions
 
shape = default|rect|circle|poly
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 = length-list
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 OBJECT element.
Attribute definitions
 
shapes
When set, this boolean attribute specifies that the object being defined is an image map. The contents of the OBJECT element will specify the active regions.
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.
<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="circ" 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>
If the OBJECT element includes a shapes attribute, user agents must parse the contents of the element to look for anchors.

If two or more defined regions overlap, the region defined first takes precedence (i.e., responds to user input).

Client-side image maps with MAP and AREA

The MAP and AREA elements provide an alternate mechanism for client side image maps.
<!ELEMENT MAP - - (AREA)*>
<!ATTLIST MAP
  %coreattrs;                      -- id, class, style, title --
  name        CDATA     #IMPLIED
  >
Start tag: required, End tag: required
<!ELEMENT AREA - O EMPTY>
<!ATTLIST AREA
  shape       %Shape    rect      -- controls interpretation of coords --
  coords      %Coords   #IMPLIED  -- comma separated list of values --
  href        %URL      #IMPLIED  -- this region acts as hypertext link --
  target      CDATA     #IMPLIED  -- where to render linked resource -- 
  nohref      (nohref)  #IMPLIED  -- this region has no action --
  alt         CDATA     #REQUIRED -- description for text only browsers --
  tabindex    NUMBER    #IMPLIED  -- position in tabbing order --
  >
Start tag: required, End tag: forbidden
Attribute definitions
 
nohref
When set, this boolean attribute specifies that a region has no associated link.
Several elements (OBJECT, IMG, and INPUT) allow the following attribute to specify an associated client-side image map.
Attribute definitions
 
usemap = MAP and AREA.
We can rewrite the previous example in terms of MAP and AREA. We still create an OBJECT that will insert an image. We associate the object and the image map by setting the usemap attribute on the OBJECT and the name attribute of the MAP element to the same value.
<OBJECT data="navbar1.gif" usemap="#map1"></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=circ 
          coords="184,200,60">
 <AREA href="top10.html" 
          alt="Top Ten" 
          shape="poly" 
          coords="276,0,373,28,50,50,276,0">
</MAP>
The alt attribute specifies alternate text for cases when the image map may not be displayed (see below for information on how to specify alternate text).
Note: MAP is not backwards compatible with HTML 2.0 user agents.

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 with the IMG element. To do so, set the boolean attribute ismap in the IMG definition. The associated map of regions must be specified with the usemap attribute.

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

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 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 previous example, if the user clicks at at the location x=10, y=27 then the derived URL is "/cgibin/navbar.map?10,27".

In the following example, the first active region defines a client-side link. The second defines a server-side link, but doesn't assign a specific shape to it (this is accomplished with the "default" value of the shape attribute). Since the regions of the two links overlap, the first takes precedence of the later definition. Thus, a click anywhere but in the rectangle will cause the click's coordinates to be sent to the server.
<OBJECT data="game.gif" shapes>
  <A href="guide.html" shape="rect" coords="0,0,118,28">
        Rules of the Game</A>
  <A href="http://www.acme.com/cgi-bin/competition"
        ismap 
        shape="default">
        Guess the location</a>
</OBJECT>

Visual presentation of images, objects, and applets

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

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. Both attributes take values of type length.

Images or objects that are the content of an A element are sometimes surrounded by a border. The border attribute specifies the width of this border.

How to specify alternate text

Attribute definitions
 
alt = lang attribute.
Several non-textual elements (IMG, AREA, APPLET, and INPUT) allow authors 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.

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

  • Do not specify meaningless alternate text when including images intended to format a page. In this case, the alternate text should be the empty string (""). In any case, authors should not use images to format pages; style sheets should be used instead.
  • Do not specify meaningless alternate text (e.g., "dummy text"). Not only will this frustrate users, it will slow down user agents that must convert text to speech or braille output.
The alt attribute is mandatory for the AREA element, but optional for IMG, APPLET, and INPUT.

When an author does not set the alt attribute for the IMG or APPLET elements, user agents should supply the alternate text, calculated in the following order:

  1. If the title has been specified, its value should be used as alternate text.
  2. Otherwise, if HTTP headers provide title information when the included object is retrieved, this information should be used as alternate text.
  3. Otherwise, if the included object contains text fields (e.g., GIF images contain some text fields), information extracted from the text fields should be used as alternate text. Since user agents may have to retrieve an entire object first in order to extract textual information, user agents may adopt more economical approaches (e.g., content negotiation).
  4. Otherwise, in the absence of other information, user agents should use the file name (minus the extension) as alternate text.
When an author does not set the alt attribute for the INPUT element, user agents should supply the alternate text, calculated in the following order:
  1. If the title has been specified, its value should be used as alternate text.
  2. Otherwise, if the name has been specified, its value should be used as alternate text.
  3. Otherwise (submit and reset buttons), the value of the type attribute should be used as alternate text.