home *** CD-ROM | disk | FTP | other *** search
/ Computer Shopper 133 / dpcs0399.iso / INTERNET / COFFEE / HTMLED55 / SETUP.EXE / file0177.bin < prev    next >
Encoding:
Text File  |  1998-11-04  |  13.2 KB  |  122 lines
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
  2.    "http://www.w3.org/TR/REC-html40/strict.dtd">
  3. <html lang=en-us>
  4. <head>
  5. <title>IMG - Inline Image</title>
  6. <link rev=Made href="mailto:liam@htmlhelp.com">
  7. <link rel=Start href="../index.html">
  8. <link rel=Glossary href="http://www.htmlhelp.com/glossary/glossary.html">
  9. <link rel=Copyright href="http://www.htmlhelp.com/copyright.html">
  10. <link rel=StyleSheet href="../style.css" type="text/css">
  11. <link rel=StyleSheet href="../aural.css" type="text/css" media=aural>
  12. <meta http-equiv="Content-Script-Type" content="text/javascript">
  13. <meta name="author" content="Liam Quinn">
  14. <meta name="description" content="A description of HTML 4.0's IMG element for inline images.">
  15. <meta name="keywords" content="img element, image, images, inline image, inlined, inlining, HyperText Markup Language, HTML, HTML4, HTML 4.0, Web Design Group, WDG, <img> tag">
  16. <script type="text/javascript">
  17. <!--
  18. function toggle() {
  19.   if (document.all.toggler.value == "Hide non-strict attributes") {
  20.      document.styleSheets[0].addRule("div.transitional", "display:none");
  21.      document.styleSheets[0].addRule("li.transitional", "display:none");
  22.      document.styleSheets[0].addRule(".transitional", "speak:none");
  23.      document.all.toggler.value = "Show non-strict attributes";
  24.   } else {
  25.      document.styleSheets[0].addRule("div.transitional", "display:block");
  26.      document.styleSheets[0].addRule("li.transitional", "display:list-item");
  27.      document.styleSheets[0].addRule(".transitional", "speak:inherit");
  28.      document.all.toggler.value = "Hide non-strict attributes";
  29.   }
  30. }
  31. // -->
  32. </script>
  33. </head>
  34. <body>
  35. <h2><img src="../wdglogo1.gif" width=250 height=83 alt="The Web Design Group"></h2>
  36. <h1>IMG - Inline Image</h1>
  37. <script type="text/javascript">
  38. <!--
  39.   if (document.styleSheets) {
  40.     var gt;
  41.     gt = unescape(new String("%3E"));
  42.  
  43.     document.write("<p" + gt + "<input type=button value=\"Hide non-strict attributes\" id=toggler accesskey=s onclick=\"toggle()\"" + gt + "<\/p" + gt);
  44.   }
  45. // -->
  46. </script>
  47. <table>
  48.   <tr valign=top>
  49.     <th>Syntax</th>
  50.     <td><strong class=required><IMG></strong></td>
  51.   </tr>
  52.   <tr valign=top>
  53.     <th>Attribute Specifications</th>
  54.     <td>
  55.       <ul>
  56.         <li><strong class=required>SRC=<var><a href="../values.html#uri">URI</a></var> (location of image)</strong></li>
  57.         <li><strong class=required>ALT=<var><a href="../values.html#text">Text</a></var> (alternate text)</strong></li>
  58.         <li>LONGDESC=<var><a href="../values.html#uri">URI</a></var> (link to long description)</li>
  59.         <li>WIDTH=<var><a href="../values.html#length">Length</a></var> (image width)</li>
  60.         <li>HEIGHT=<var><a href="../values.html#length">Length</a></var> (image height)</li>
  61.         <li>USEMAP=<var><a href="../values.html#uri">URI</a></var> (client-side image map)</li>
  62.         <li>ISMAP (server-side image map)</li>
  63.         <li class=transitional>ALIGN=top|middle|bottom|left|right (image alignment)</li>
  64.         <li class=transitional>BORDER=<var><a href="../values.html#length">Length</a></var> (link border width)</li>
  65.         <li class=transitional>HSPACE=<var><a href="../values.html#pixels">Pixels</a></var> (horizontal gutter)</li>
  66.         <li class=transitional>VSPACE=<var><a href="../values.html#pixels">Pixels</a></var> (vertical gutter)</li>
  67.         <li><a href="../attrs.html">common attributes</a></li>
  68.       </ul>
  69.     </td>
  70.   </tr>
  71.   <tr valign=top>
  72.     <th>Contents</th>
  73.     <td>Empty</td>
  74.   </tr>
  75.   <tr valign=top>
  76.     <th>Contained in</th>
  77.     <td><a href="../inline.html">Inline elements</a>, <a href="../block.html">block-level elements</a> except <a href="../block/pre.html">PRE</a></td>
  78.   </tr>
  79. </table>
  80. <p>The <strong class=html>IMG</strong> element specifies an <em>inline image</em>. The required <strong class=html>SRC</strong> attribute specifies the location of the image. The image can be any format, though browsers generally only support <acronym title="Graphics Interchange Format">GIF</acronym> and <acronym title="Joint Photographic Experts Group">JPEG</acronym> images. Support for the <acronym title="Portable Network Graphics"><a href="http://www.cdrom.com/pub/png/">PNG</a></acronym> image format is growing slowly.</p>
  81. <p>The required <strong class=html>ALT</strong> attribute provides alternate text for those not loading images. Effective <strong class=html>ALT</strong> text should generally give the <em>function</em> of the image rather than a <em>description</em> of the image. For example, <strong class=html>ALT="Welcome to XYZ Corp."</strong> would be more appropriate than <strong class=html>ALT="XYZ Corp. Logo"</strong> for a company's logo on its welcome page. Good <strong class=html>ALT</strong> text is crucial to the document's accessibility for the significant portion of users who do not load images; see <cite><a href="http://www.htmlhelp.com/feature/art3.htm">Use of ALT texts in IMGs</a></cite> for a thorough discussion.</p>
  82. <p>The <strong class=html>LONGDESC</strong> attribute gives the location of a long description of the image. This attribute should be used to provide a long description of an image where this would be useful. For example, a painting, graph, or corporate logo could be given a description so that blind and other text-only users can develop a mental picture of the image.</p>
  83. <p>The <strong class=html>WIDTH</strong> and <strong class=html>HEIGHT</strong> attributes are most useful when they specify the exact dimensions of the image in pixels. This allows image-loading browsers to reserve the proper amount of space for the image and continue to render the rest of the document, thus giving the appearance of a faster-loading page.</p>
  84. <p class=note>Unfortunately, many graphical browsers will use these dimensions when not loading images, which can cause the <strong class=html>ALT</strong> text to be cut off if the image is small or the <strong class=html>ALT</strong> text is large. In such cases, authors may wish to leave off the <strong class=html>WIDTH</strong> and <strong class=html>HEIGHT</strong> attributes, depending on the importance of the <strong class=html>ALT</strong> text and the placement of the image on the page (an image towards the end of the document without <strong class=html>WIDTH</strong> and <strong class=html>HEIGHT</strong> attributes will generally not noticeably slow the rendering of the page).</p>
  85. <p>Authors can also specify different dimensions for the <strong class=html>WIDTH</strong> and <strong class=html>HEIGHT</strong> attributes, in which case browsers should scale the image. Percentages, relative to the horizontal or vertical space available (<em>not</em> relative to the image's natural size) can also be specified, though these are not as widely supported as pixel lengths. Since browsers typically do a poor job of scaling images, authors should avoid using <strong class=html>WIDTH</strong> and <strong class=html>HEIGHT</strong> for this purpose as much as possible.</p>
  86. <div class=transitional>
  87. <p>The <strong class=html>ALIGN</strong> attribute, <a href="../deprecated.html">deprecated</a> in HTML 4.0, specifies the alignment of the image. The values <strong class=html>top</strong>, <strong class=html>middle</strong>, and <strong class=html>bottom</strong> specify the image's position with respect to surrounding content on its left and right.</p>
  88. <div class=note>
  89. <p><strong class=html>ALIGN=middle</strong> aligns the center of the image with the current baseline. To center the image horizontally on the page, place the image in a centered block, <i lang=la>e.g.</i>,</p>
  90. <p class=example><code class=html><H1 ALIGN=center><IMG SRC="logo.gif" ALT="Welcome to XYZ Company"></H1></code></p>
  91. </div>
  92. <p>The other <strong class=html>ALIGN</strong> values, <strong class=html>left</strong> and <strong class=html>right</strong>, specify a <em>floating</em> image; the image is placed at the left or right margin and content flows around it. To place content below the image, use <strong class=html><BR CLEAR=left|right|all></strong> as appropriate.</p>
  93. <p class=note>The <strong class=css><a href="http://www.htmlhelp.com/reference/css/text/vertical-align.html">vertical-align</a></strong> and <strong class=css><a href="http://www.htmlhelp.com/reference/css/box/float.html">float</a></strong> properties of <a href="http://www.htmlhelp.com/reference/css/">Cascading Style Sheets</a> provide more flexible methods of aligning images.</p>
  94. <p>The <strong class=html>BORDER</strong> attribute, <a href="../deprecated.html">deprecated</a> in HTMLá4.0, specifies the width of the image's border. Specifying <strong class=html>BORDER=0</strong> will eliminate the border around a linked image in most browsers, though some allow the user to override this. Authors should only use <strong class=html>BORDER=0</strong> if the image would be clearly recognizable as a link, or as a method of de-emphasizing a link. For example:</p>
  95. <p class=example><code class=html><A HREF="reference/"><IMG SRC="icon/reference.gif" ALT="" WIDTH=90 HEIGHT=90 BORDER=0>Web Authoring Reference</A></code></p>
  96. <p>The <a href="../deprecated.html">deprecated</a> <strong class=html>HSPACE</strong> and <strong class=html>VSPACE</strong> attributes allow an author to suggest horizontal gutters and vertical gutters, respectively, around the image. The value must be in pixels and applies to both sides of the image. <a href="http://www.htmlhelp.com/reference/css/">Style sheets</a> provide more flexibility in specifying the space around images.</p>
  97. </div>
  98. <p>The <strong class=html>USEMAP</strong> attribute is used with client-side image maps to give the location of the <a href="map.html">map definition</a>. While this value may be a full <a href="../values.html#uri">URI</a>--allowing a single map definition to be applied to multiple pages--<a href="http://www.netscape.com/navigator/">Netscape Navigator</a> will only find map definitions in the same file, effectively limiting the <strong class=html>USEMAP</strong> value to a fragment identifier such as <strong class=html>"#map"</strong>.</p>
  99. <p>The <strong class=html>ISMAP</strong> attribute is used with server-side image maps. When the <strong class=html>ISMAP</strong> attribute is included with a linked image and the user clicks the image, the image coordinates clicked are sent to the server, from which a location can be returned. The method of handling the coordinates is server-dependent, but the <a href="http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemapping.html">NCSA server's method</a> is most common.</p>
  100. <p>Server-side image maps are better supported than client-side image maps, but almost all browsers today support both methods. Client-side image maps are generally preferred since they do not require an extra request to the server (and so are faster), and since they allow a usable menu to be provided to text-only users. Using both methods in combination is a good approach, since browsers supporting client-side image maps will use that method while older browsers will use the server-side image map. An example follows:</p>
  101. <p class=example><code class=html><A HREF="/cgi-bin/imagemap/sitemap.map"><IMG SRC="sitemap.gif" ALT="Site Map" ISMAP USEMAP="#map" WIDTH=100 HEIGHT=100></A></code></p>
  102. <p>A <strong class=html><a href="map.html">MAP</a></strong> element named <strong class=html>map</strong> would have to be included in the same document.</p>
  103. <h2>More Information</h2>
  104. <ul>
  105.   <li><a href="http://www.w3.org/TR/REC-html40/struct/objects.html#edef-IMG">IMG in <abbr class=initialism title="World Wide Web Consortium">W3C</abbr> HTMLá4.0 Recommendation</a></li>
  106.   <li><a href="http://www.w3.org/TR/REC-html32#img">IMG in <abbr class=initialism title="World Wide Web Consortium">W3C</abbr> HTMLá3.2 Recommendation</a></li>
  107.   <li><a href="http://www.w3.org/MarkUp/html-spec/html-spec_5.html#SEC5.10">IMG in HTMLá2.0 Standard</a></li>
  108.   <li><a href="http://www.htmlhelp.com/reference/wilbur/special/img.html">IMG in <abbr class=initialism title="Web Design Group">WDG</abbr> HTMLá3.2 Reference</a></li>
  109.   <li><a href="http://www.hut.fi/u/jkorpela/HTML3.2/5.31.html">IMG in <cite>Learning HTMLá3.2 by Examples</cite></a></li>
  110.   <li><a href="http://www.htmlhelp.com/feature/art3.htm">Use of ALT texts in IMGs</a></li>
  111.   <li><a href="http://www.htmlhelp.com/design/imageuse.htm">Image Use on the Web</a></li>
  112.   <li><a href="http://www.landfield.com/faqs/jpeg-faq/"><acronym title="Joint Photographic Experts Group">JPEG</acronym> <abbr class=initialism title="Frequently Asked Questions">FAQ</abbr></a></li>
  113.   <li><a href="http://www.cdrom.com/pub/png/"><acronym>PNG</acronym> (Portable Network Graphics) Home Page</a></li>
  114. </ul>
  115. <div class=footer>
  116. <address>Maintained by <a href="http://www.htmlhelp.com/%7Eliam/">Liam Quinn</a> <<a href="mailto:liam@htmlhelp.com">liam@htmlhelp.com</a>></address>
  117. <p class=toolbar><a href="http://www.htmlhelp.com/"><img src="../wdglogo-small.gif" width=105 height=40 alt="Web Design Group ~"></a> <a href="../index.html" rel=Start>HTMLá4.0áReference</a>á~ <a href="../olist.html">ElementsábyáFunction</a>á~ <a href="../alist.html">ElementsáAlphabetically</a></p>
  118. <p class=copyright><a href="http://www.htmlhelp.com/copyright.html">Copyright ⌐</a> 1998 Liam Quinn. All rights reserved.</p>
  119. </div>
  120. </body>
  121. </html>
  122.