contrib/ntp/html/htmlprimer.htm

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Draft//EN">
   2 <HTML>
   3 <HEAD>
   4 <TITLE>A Beginner's Guide to HTML</TITLE>
   5 </HEAD>
   6
   7 <BODY>
   8 <H1>A Beginner's Guide to HTML</H1>
   9
  10 <P>
  11 This is a primer for producing documents in HTML, the markup language
  12 used by the World Wide Web.
  13
  14 <UL>
  15 <LI><A HREF="#A1.1">Acronym Expansion</A>
  16 <LI><A HREF="#A1.2">What This Primer Doesn't Cover</A>
  17 <LI><A HREF="#A1.3">Creating HTML Documents</A>
  18     <UL>
  19     <LI><A HREF="#A1.3.1">The Minimal HTML Document</A>
  20     <LI><A HREF="#A1.3.2">Basic Markup Tags</A>
  21       <UL>
  22       <LI><A HREF="#A1.3.2.1">Titles</A>
  23       <LI><A HREF="#A1.3.2.2">Headings</A>
  24       <LI><A HREF="#A1.3.2.3">Paragraphs</A>
  25       </UL>
  26     <LI><A HREF="#A1.3.3">Linking to Other Documents</A>
  27       <UL>
  28       <LI><A HREF="#A1.3.3.1">Relative Links Versus Absolute Pathnames</A>
  29       <LI><A HREF="#A1.3.3.2">Uniform Resource Locator</A>
  30       <LI><A HREF="#A1.3.3.3">Anchors to Specific Sections in Other Documents</A>
  31       <LI><A HREF="#A1.3.3.4">Anchors to Specific Sections Within
  32           the Current Document</A>
  33       </UL>
  34     </UL>
  35 <LI><A HREF="#A1.4">Additional Markup Tags</A>
  36     <UL>
  37     <LI><A HREF="#A1.4.1">Lists</A>
  38       <UL>
  39       <LI><A HREF="#A1.4.1.1">Unnumbered Lists</A>
  40       <LI><A HREF="#A1.4.1.2">Numbered Lists</A>
  41       <LI><A HREF="#A1.4.1.3">Definition Lists</A>
  42       <LI><A HREF="#A1.4.1.4">Nested Lists</A>
  43       </UL>
  44     <LI><A HREF="#A1.4.2">Preformatted Text</A>
  45     <LI><A HREF="#A1.4.3">Extended Quotes</A>
  46     <LI><A HREF="#A1.4.4">Addresses</A>
  47     </UL>
  48
  49 <LI><A HREF="#A1.5">Character Formatting</A>
  50     <UL>
  51     <LI><A HREF="#A1.5.1">Physical Versus Logical:
  52          Use Logical Tags When Possible</A>
  53       <UL>
  54       <LI><A HREF="#A1.5.1.1">Logical Styles</A>
  55       <LI><A HREF="#A1.5.1.2">Physical Styles</A>
  56       </UL>
  57     <LI><A HREF="#A1.5.2">Using Character Tags</A>
  58     <LI><A HREF="#A1.5.3">Special Characters</A>
  59       <UL>
  60       <LI><A HREF="#A1.5.3.1">Escape Sequences</A>
  61       <LI><A HREF="#A1.5.3.2">Forced Line Breaks</A>
  62       <LI><A HREF="#A1.5.3.3">Horizontal Rules</A>
  63       </UL>
  64     </UL>
  65 <LI><A HREF="#A1.6">In-line Images</A>
  66       <UL>
  67       <LI><A HREF="#A1.6.1">Alternate Text for Viewers
  68           That Can't Display Images</A>
  69       </UL>
  70 <LI><A HREF="#A1.7">External Images, Sounds, and Animations</A>
  71 <LI><A HREF="#A1.8">Troubleshooting</A>
  72     <UL>
  73     <LI><A HREF="#A1.8.1">Avoid Overlapping Tags</A>
  74     <LI><A HREF="#A1.8.2">Embed Anchors and Character Tags,
  75         But Not Anything Else</A>
  76     <LI><A HREF="#A1.8.3">Check Your Links</A>
  77     </UL>
  78 <LI><A HREF="#A1.9">A Longer Example</A>
  79 <LI><A HREF="#A1.10">For More Information</A>
  80     <UL>
  81     <LI><A HREF="#A1.10.1">Fill-out Forms</A>
  82     <LI><A HREF="#A1.10.2">Style Guides</A>
  83     <LI><A HREF="#A1.10.3">Other Introductory Documents</A>
  84     <LI><A HREF="#A1.10.4">Additional References</A>
  85     </UL>
  86 </UL>
  87
  88 <H2><A NAME = "A1.1">Acronym Expansion</A></H2>
  89 <DL COMPACT>
  90 <DT><I>WWW</I>
  91 <DD>World Wide Web (or Web, for short).
  92 <DT><I>SGML</I>
  93 <DD>Standard Generalized Markup Language  --  this is a standard for
  94     describing markup languages.
  95 <DT><CITE>DTD</CITE>
  96 <DD>Document Type Definition  --  this is a specific markup language,
  97     written using SGML.
  98 <DT><CITE>HTML</CITE>
  99 <DD>HyperText Markup Language  --  HTML is a SGML DTD. In practical
 100     terms, HTML is a collection of styles (indicated by markup tags)
 101     that define the various components of a World Wide Web document.
 102 HTML was invented by Tim Berners-Lee while at CERN. He is now director
 103 of the W3 Consortium.
 104 </DL>
 105
 106 <H2><A NAME = "A1.2">What This Primer Doesn't Cover</A></H2>
 107 <P>
 108 This primer assumes that you have:
 109
 110 <UL>
 111 <LI>at least a passing knowledge of how to use NCSA Mosaic or some
 112     other Web browser
 113 <LI>a general understanding of how Web servers and client browsers
 114     work
 115 <LI>access to a Web server for which you would like to produce HTML
 116     documents, or that you wish to produce HTML documents for personal
 117     use
 118 </UL>
 119
 120 <H2><A NAME = "A1.3">Creating HTML Documents</A></H2>
 121 <P>
 122 HTML documents are in plain (also known as ASCII) text format and can
 123 be created using any text editor (e.g., Emacs or vi on UNIX machines).
 124 A couple of Web browsers (tkWWW for X Window System machines and CERN's
 125 Web browser for NeXT computers) include rudimentary HTML editors in
 126 a WYSIWYG environment. There are also some WYSIWIG editors available
 127 now (e.g. HotMetal for Sun Sparcstations, HTML Edit for Macintoshes).
 128 You may wish to try one of them first before delving into the details
 129 of HTML.
 130 <BLOCKQUOTE>
 131     <I>You can preview a document in progress with NCSA Mosaic (and
 132     some </I><I>other Web browsers). Open it with the </I><B>Open Local
 133     </B><I>command under the </I><B>File</B><I> menu. </I>
 134
 135     <P>
 136     <I>After you edit the source HTML file, save the changes. Return
 137     to NCSA </I><I>Mosaic and </I><B>Reload</B><I> the document. The
 138     changes are reflected in the on-</I><I>screen display.</I>
 139
 140 </BLOCKQUOTE>
 141
 142 <H3><A NAME = "A1.3.1">The Minimal HTML Document</A></H3>
 143 <P>
 144 Here is a bare-bones example of HTML:
 145
 146 <PRE>
 147     &lt;TITLE&gt;The simplest HTML example&lt;/TITLE&gt;
 148     &lt;H1&gt;This is a level-one heading&lt;/H1&gt;
 149     Welcome to the world of HTML.
 150     This is one paragraph.&lt;P&gt;
 151     And this is a second.&lt;P&gt;
 152 </PRE>
 153
 154 <A HREF=MinimalHTML.html>Click here</A> to see the formatted version
 155 of the example.
 156
 157 <P>
 158 HTML uses markup tags to tell the Web browser how to display the text.
 159 The above example uses:
 160
 161 <UL>
 162 <LI>the <SAMP>&lt;TITLE&gt;</SAMP> tag (and corresponding <SAMP>&lt;/TITLE&gt;</SAMP>
 163     tag), which specifies the title of the document
 164 <LI>the <SAMP>&lt;H1&gt;</SAMP> header tag (and corresponding <SAMP>&lt;/H1&gt;</SAMP>)
 165 <LI>the <SAMP>&lt;P&gt;</SAMP> paragraph-separator tag
 166 </UL>
 167
 168 <P>
 169 HTML tags consist of a left angle bracket (<SAMP>&lt;</SAMP>), (a ``less
 170 than'' symbol to mathematicians), followed by name of the tag and closed
 171 by a right angular bracket (<SAMP>&gt;</SAMP>). Tags are usually paired,
 172 e.g. <SAMP>&lt;H1&gt;</SAMP> and <SAMP>&lt;/H1&gt;</SAMP>. The ending
 173 tag looks just like the starting tag except a slash (/) precedes the
 174 text within the brackets. In the example, <SAMP>&lt;H1&gt;</SAMP> tells
 175 the Web browser to start formatting a level-one heading; <SAMP>&lt;/H1&gt;</SAMP>
 176 tells the browser that the heading is complete.
 177
 178 <P>
 179 The primary exception to the pairing rule is the <SAMP>&lt;P&gt;</SAMP>
 180 tag. There is no such thing as <SAMP>&lt;/P&gt;</SAMP>.
 181
 182 <P>
 183 <STRONG>NOTE:</STRONG><I> HTML is not case sensitive. </I><SAMP>&lt;title&gt;</SAMP><I>
 184 is equivalent to </I><SAMP>&lt;TITLE&gt;</SAMP><I> or </I><SAMP>&lt;TiTlE&gt;</SAMP><I>.
 185 </I>
 186
 187 <P>
 188 Not all tags are supported by all World Wide Web browsers. If a browser
 189 does not support a tag, it just ignores it.
 190
 191 <H3><A NAME = "A1.3.2">Basic Markup Tags</A></H3>
 192 <H4><A NAME = "A1.3.2.1">Title</A></H4>
 193 <P>
 194 Every HTML document should have a title. A title is generally displayed
 195 separately from the document and is used primarily for document identification
 196 in other contexts (e.g., a WAIS search). Choose about half a dozen
 197 words that describe the document's purpose.
 198 <BLOCKQUOTE>
 199     <I>In the X Window System and Microsoft Windows versions of NCSA
 200     </I><I>Mosaic, the </I><B>Document Title</B><I> field is at the
 201     top of the screen just below the </I><I>pulldown menus. In NCSA
 202     Mosaic for Macintosh, text tagged as </I><SAMP>&lt;TITLE&gt;</SAMP>
 203     <I>appears as the window title.</I>
 204
 205 </BLOCKQUOTE>
 206
 207 <H4><A NAME = "A1.3.2.2">Headings</A></H4>
 208 <P>
 209 HTML has six levels of headings, numbered 1 through 6, with 1 being
 210 the most prominent. Headings are displayed in larger and/or bolder
 211 fonts than normal body text. The first heading in each document should
 212 be tagged <SAMP>&lt;H1&gt;</SAMP>. The syntax of the heading tag is:
 213
 214 <P>
 215 <SAMP>&lt;H</SAMP><VAR>y</VAR><SAMP>&gt;</SAMP><VAR>Text of heading</VAR><SAMP>
 216 &lt;/H</SAMP><VAR>y</VAR><SAMP> &gt;</SAMP>
 217
 218 <P>
 219 where <VAR>y</VAR> is a number between 1 and 6 specifying the level
 220 of the heading.
 221
 222 <P>
 223 For example, the coding for the ``Headings'' section heading above
 224 is
 225
 226 <PRE>
 227     &lt;H3&gt;Headings&lt;/H3&gt;
 228 </PRE>
 229
 230 <H5><A NAME = "A1.3.2.2.1">Title versus first heading</A></H5>
 231 <P>
 232 In many documents, the first heading is identical to the title. For
 233 multipart documents, the text of the first heading should be suitable
 234 for a reader who is already browsing related information (e.g., a chapter
 235 title), while the title tag should identify the document in a wider
 236 context (e.g., include both the book title and the chapter title, although
 237 this can sometimes become overly long).
 238
 239 <H4><A NAME = "A1.3.2.3">Paragraphs</A></H4>
 240 <P>
 241 Unlike documents in most word processors, carriage returns in HTML
 242 files aren't significant. Word wrapping can occur at any point in your
 243 source file, and multiple spaces are collapsed into a single space.
 244 (There are couple of exceptions; space following a <SAMP>&lt;P&gt;</SAMP>
 245 or <SAMP>&lt;H</SAMP><VAR>y</VAR><SAMP>&gt;</SAMP> tag, for example,
 246 is ignored.) Notice that in the bare-bones example, the first paragraph
 247 is coded as
 248
 249 <PRE>
 250     Welcome to HTML.
 251     This is the first paragraph. &lt;P&gt;
 252 </PRE>
 253
 254 <P>
 255 In the source file, there is a line break between the sentences. A
 256 Web browser ignores this line break and starts a new paragraph only
 257 when it reaches a <SAMP>&lt;P&gt;</SAMP> tag.
 258
 259 <P>
 260 <STRONG>Important:</STRONG> You must separate paragraphs with <SAMP>&lt;P&gt;</SAMP>.
 261 The browser ignores any indentations or blank lines in the source text.
 262 HTML relies almost entirely on the tags for formatting instructions,
 263 and without the <SAMP>&lt;P&gt;</SAMP> tags, the document becomes one
 264 large paragraph. (The exception is text tagged as ``preformatted,''
 265 which is explained below.) For instance, the following would produce
 266 identical output as the first bare-bones HTML example:
 267
 268 <PRE>
 269     &lt;TITLE&gt;The simplest HTML example&lt;/TITLE&gt;&lt;H1&gt;This is a level
 270     one heading&lt;/H1&gt;Welcome to the world of HTML. This is one
 271     paragraph.&lt;P&gt;And this is a second.&lt;P&gt;
 272 </PRE>
 273
 274 <P>
 275 However, to preserve readability in HTML files, headings should be
 276 on separate lines, and paragraphs should be separated by blank lines
 277 (in addition to the <SAMP>&lt;P&gt;</SAMP> tags).
 278 <BLOCKQUOTE>
 279     <I>NCSA Mosaic handles &lt;P&gt; by ending the current paragraph
 280     and insert</I><I>ing a blank line. </I>
 281
 282 </BLOCKQUOTE>
 283
 284 <P>
 285 In HTML+, a successor to HTML currently in development, <SAMP>&lt;P&gt;</SAMP>
 286 becomes a ``container'' of text, just as the text of a level-one heading
 287 is ``contained'' within<SAMP>&lt;H1&gt; ... </SAMP><SAMP>&lt;/H1&gt;</SAMP>:
 288
 289 <PRE>
 290     &lt;P&gt;
 291     This is a paragraph in HTML+.
 292     &lt;/P&gt;
 293 </PRE>
 294
 295 <P>
 296 The difference is that the <SAMP>&lt;/P&gt;</SAMP> closing tag can
 297 always be omitted. (That is, if a browser sees a <SAMP>&lt;P&gt;</SAMP>,
 298 it knows that there must be an implied <SAMP>&lt;/P&gt;</SAMP> to end
 299 the previous paragraph.) In other words, in HTML+, <SAMP>&lt;P&gt;</SAMP>
 300 is a beginning-of-paragraph marker.
 301
 302 <P>
 303 The advantage of this change is that you will be able to specify formatting
 304 options for a paragraph. For example, in HTML+, you will be able to
 305 center a paragraph by coding
 306
 307 <PRE>
 308     <SAMP>&lt;P ALIGN=CENTER&gt;</SAMP>
 309     This is a centered paragraph. This is HTML+, so you can't do it yet.
 310 </PRE>
 311
 312 <P>
 313 This change won't effect any documents you write now, and they will
 314 continue to look just the same with HTML+ browsers.
 315
 316 <H3><A NAME = "A1.3.3">Linking to Other Documents</A></H3>
 317 <P>
 318 The chief power of HTML comes from its ability to link regions of text
 319 (and also images) to another document. The browser highlights these
 320 regions (usually with color and/or underlines) to indicate that they
 321 are hypertext links (often shortened to <DFN>hyperlinks</DFN> or simply
 322 <DFN>links</DFN>).
 323
 324 <P>
 325 HTML's single hypertext-related tag is <SAMP>&lt;A&gt;</SAMP>, which
 326 stands for <DFN>anchor</DFN>. To include an anchor in your document:
 327
 328 <OL>
 329 <LI>Start the anchor with <SAMP>&lt;A</SAMP> . (There's a space after
 330     the <CODE>A</CODE>.)
 331 <LI>Specify the document that's being pointed to by entering the parameter
 332     <SAMP>HREF=&quot;</SAMP><VAR>filename</VAR><SAMP>&quot;</SAMP>
 333     followed by a closing right angle bracket: <SAMP>&gt;</SAMP>
 334 <LI>Enter the text that will serve as the hypertext link in the current
 335     document.
 336 <LI>Enter the ending anchor tag: <SAMP>&lt;/A&gt;</SAMP>.
 337 </OL>
 338
 339 <P>
 340 Here is an sample hypertext reference:
 341
 342 <PRE>
 343     &lt;A HREF=&quot;MaineStats.html&quot;&gt;Maine&lt;/A&gt;
 344 </PRE>
 345
 346 <P>
 347 This entry makes the word ``Maine'' the hyperlink to the document <SAMP>MaineStats.html</SAMP>,
 348 which is in the same directory as the first document. You can link
 349 to documents in other directories by specifying the <DFN>relative path</DFN>
 350 from the current document to the linked document. For example, a link
 351 to a file <SAMP>NJStats.html</SAMP> located in the subdirectory <SAMP>AtlanticStates</SAMP>
 352 would be:
 353
 354 <PRE>
 355     &lt;A HREF=&quot;AtlanticStates/NJStats.html&quot;&gt;New Jersey&lt;/A&gt;
 356 </PRE>
 357
 358 <P>
 359 These are called <VAR>relative links</VAR>. You can also use the absolute
 360 pathname of the file if you wish. Pathnames use the standard UNIX syntax.
 361
 362 <H4><A NAME = "A1.3.3.1">Relative Links Versus Absolute Pathnames</A></H4>
 363 <P>
 364 In general, you should use relative links, because
 365
 366 <OL>
 367 <LI>You have less to type.
 368 <LI>It's easier to move a group of documents to another location, because
 369     the relative path names will still be valid.
 370 </OL>
 371
 372 <P>
 373 However, use absolute pathnames when linking to documents that are
 374 not directly related. For example, consider a group of documents that
 375 comprise a user manual. Links within this group should be relative
 376 links. Links to other documents (perhaps a reference to related software)
 377 should use full path names. This way, if you move the user manual to
 378 a different directory, none of the links would have to be updated.
 379
 380 <H4><A NAME = "A1.3.3.2">Uniform Resource Locator</A></H4>
 381 <P>
 382 The World Wide Web uses Uniform Resource Locators (URLs) to specify
 383 the location of files on other servers. A URL includes the type of
 384 resource being accessed (e.g., gopher, WAIS), the address of the server,
 385 and the location of the file. The syntax is:
 386
 387 <P>
 388 <VAR>scheme</VAR><SAMP>://</SAMP><VAR>host.domain</VAR><SAMP>[:</SAMP><VAR>port</VAR><SAMP>]/</SAMP><VAR>path</VAR><SAMP>/</SAMP><VAR>filename</VAR>
 389
 390 <P>
 391 where <VAR>scheme</VAR> is one of
 392
 393 <DL COMPACT>
 394 <DT><SAMP>file</SAMP>
 395 <DD>
 396 <DT>
 397 <DD>a file on your local system, or a file on an anonymous FTP server
 398
 399 <DT><SAMP>http</SAMP>
 400 <DD>a file on a World Wide Web server
 401 <DT><SAMP>gopher</SAMP>
 402 <DD>a file on a Gopher server
 403 <DT><SAMP>WAIS</SAMP>
 404 <DD>a file on a WAIS server
 405 <DT><SAMP>news</SAMP>
 406 <DD>an Usenet newsgroup
 407 <DT><SAMP>telnet</SAMP>
 408 <DD>a connection to a Telnet-based service
 409 </DL>
 410
 411 <P>
 412 The <VAR>port</VAR> number can generally be omitted. (That means unless
 413 someone tells you otherwise, leave it out.)
 414
 415 <P>
 416 For example, to include a link to this primer in your document, you
 417 would use
 418
 419 <PRE>
 420     &lt;A HREF = &quot;http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html&quot;&gt;
 421     NCSA's Beginner's Guide to HTML&lt;/A&gt;
 422 </PRE>
 423
 424 <P>
 425 This would make the text ``NCSA's Beginner's Guide to HTML'' a hyperlink
 426 to this document.
 427
 428 <P>
 429 For more information on URLs, look at
 430
 431 <UL>
 432 <LI><A HREF = "http://www.w3.org/hypertext/WWW/Addressing/Addressing.html">
 433     <CITE>WWW Names and Addresses, URIs, URLs, URNs</CITE></A>, written
 434     by people at CERN
 435 <LI><A HREF = "http://www.ncsa.uiuc.edu/demoweb/url-primer.html">
 436     <CITE>A Beginner's Guide to URLs</CITE></A>, located on the NCSA Mosaic
 437     <B>Help</B> menu
 438 </UL>
 439
 440 <H4><A NAME = "A1.3.3.3">Links to Specific Sections in Other Documents</A></H4>
 441 <P>
 442 Anchors can also be used to move to a particular section in a document.
 443 Suppose you wish to set a link from document A and a specific section
 444 in document B. (Call this file <SAMP>documentB.html</SAMP>.) First
 445 you need to set up a <DFN>named anchor</DFN> in document B. For example,
 446 to set up an anchor named ``Jabberwocky'' to document B, enter
 447
 448 <PRE>
 449     Here's &lt;A NAME = &quot;Jabberwocky&quot;&gt;some text&lt;/a&gt;
 450 </PRE>
 451
 452 <P>
 453 Now when you create the link in document A, include not only the filename,
 454 but also the named anchor, separated by a hash mark (#).
 455
 456 <PRE>
 457     This is my &lt;A HREF = &quot;documentB.html#Jabberwocky&quot;&gt;link&lt;/A&gt; to document B.
 458 </PRE>
 459
 460 <P>
 461 Now clicking on the word ``link'' in document A sends the reader directly
 462 to the words ``some text'' in document B.
 463
 464 <H4><A NAME = "A1.3.3.4">Links to Specific Sections Within the Current Document</A></H4>
 465 <P>
 466 The technique is exactly the same except the filename is omitted.
 467
 468 <P>
 469 For example, to link to the Jabberwocky anchor from within the same
 470 file (Document B), use
 471
 472 <PRE>
 473     This is &lt;A HREF = &quot;#Jabberwocky&quot;&gt;Jabberwocky link&lt;/A&gt; from within Document B.
 474 </PRE>
 475
 476 <H2><A NAME = "A1.4">Additional Markup Tags</A></H2>
 477 <P>
 478 The preceding is sufficient to produce simple HTML documents. For more
 479 complex documents, HTML has tags for several types of lists, preformatted
 480 sections, extended quotations, character formatting, and other items.
 481
 482 <H3><A NAME = "A1.4.1">Lists</A></H3>
 483 <P>
 484 HTML supports unnumbered, numbered, and definition lists.
 485
 486 <H4><A NAME = "A1.4.1.1">Unnumbered Lists</A></H4>
 487 <P>
 488 To make an unnumbered list,
 489
 490 <OL>
 491 <LI>Start with an opening list <SAMP>&lt;UL&gt;</SAMP> tag.
 492 <LI>Enter the <SAMP>&lt;LI&gt;</SAMP> tag followed by the individual
 493     item. (No closing <SAMP>&lt;/LI&gt;</SAMP> tag is needed.)
 494 <LI>End with a closing list <SAMP>&lt;/UL&gt;</SAMP> tag.
 495 </OL>
 496
 497 <P>
 498 Below an example two-item list:
 499
 500 <PRE>
 501     &lt;UL&gt;
 502     &lt;LI&gt; apples
 503     &lt;LI&gt; bananas
 504     &lt;/UL&gt;
 505 </PRE>
 506
 507 <P>
 508 The output is:
 509
 510 <UL>
 511 <LI>apples
 512 <LI>bananas
 513 </UL>
 514
 515 <P>
 516 The <SAMP>&lt;LI&gt;</SAMP> items can contain multiple paragraphs.
 517 Just separate the paragraphs with the <SAMP>&lt;P&gt;</SAMP> paragraph
 518 tags.
 519
 520 <H4><A NAME = "A1.4.1.2">Numbered Lists</A></H4>
 521 <P>
 522 A numbered list (also called an ordered list, from which the tag name
 523 derives) is identical to an unnumbered list, except it uses <SAMP>&lt;OL&gt;</SAMP>
 524 instead of <SAMP>&lt;UL&gt;</SAMP>. The items are tagged using the
 525 same <SAMP>&lt;LI&gt;</SAMP> tag. The following HTML code
 526
 527 <PRE>
 528     &lt;OL&gt;
 529     &lt;LI&gt; oranges
 530     &lt;LI&gt; peaches
 531     &lt;LI&gt; grapes
 532     &lt;/OL&gt;
 533 </PRE>
 534
 535 <P>
 536 produces this formatted output:
 537
 538 <OL>
 539 <LI>oranges
 540 <LI>peaches
 541 <LI>grapes
 542 </OL>
 543
 544 <H4><A NAME = "A1.4.1.3">Definition Lists </A></H4>
 545 <P>
 546 A definition list usually consists of alternating a term (abbreviated
 547 as <SAMP>DT</SAMP>) and a definition (abbreviated as <SAMP>DD</SAMP>).
 548 Web browsers generally format the definition on a new line.
 549
 550 <P>
 551 The following is an example of a definition list:
 552
 553 <PRE>
 554     &lt;DL&gt;
 555     &lt;DT&gt; NCSA
 556     &lt;DD&gt; NCSA, the National Center for Supercomputing Applications,
 557          is located on the campus of the University of Illinois
 558          at Urbana-Champaign. NCSA is one of the participants in the
 559          National MetaCenter for Computational Science and Engineering.
 560     &lt;DT&gt; Cornell Theory Center
 561     &lt;DD&gt; CTC is located on the campus of Cornell University in Ithaca,
 562          New York. CTC is another participant in the National MetaCenter
 563          for Computational Science and Engineering.
 564     &lt;/DL&gt;
 565 </PRE>
 566
 567 <P>
 568 The output looks like:
 569
 570 <DL COMPACT>
 571 <DT>NCSA
 572 <DD>NCSA, the National Center for Supercomputing Applications, is located
 573     on the campus of the University of Illinois at Urbana-Champaign.
 574     NCSA is one of the participants in the National MetaCenter for
 575     Computational Science and Engineering.
 576 <DT>Cornell Theory Center
 577 <DD>CTC is located on the campus of Cornell University in Ithaca, New
 578     York. CTC is another participant in the National MetaCenter for
 579     Computational Science and Engineering.
 580 </DL>
 581
 582 <P>
 583 The <SAMP>&lt;DT&gt;</SAMP> and<SAMP> &lt;DD&gt;</SAMP> entries can
 584 contain multiple paragraphs (separated by <SAMP>&lt;P&gt;</SAMP> paragraph
 585 tags), lists, or other definition information.
 586
 587 <H4><A NAME = "A1.4.1.4">Nested Lists</A></H4>
 588 <P>
 589 Lists can be arbitrarily nested, although in practice you probably
 590 should limit the nesting to three levels. You can also have a number
 591 of paragraphs, each containing a nested list, in a single list item.
 592
 593 <P>
 594  An example nested list:
 595
 596 <PRE>
 597     &lt;UL&gt;
 598     &lt;LI&gt; A few New England states:
 599         &lt;UL&gt;
 600         &lt;LI&gt; Vermont
 601         &lt;LI&gt; New Hampshire
 602         &lt;/UL&gt;
 603     &lt;LI&gt; One Midwestern state:
 604         &lt;UL&gt;
 605         &lt;LI&gt; Michigan
 606         &lt;/UL&gt;
 607     &lt;/UL&gt;
 608 </PRE>
 609
 610 <P>
 611 The nested list is displayed as
 612
 613 <UL>
 614 <LI>A few New England states:
 615     <UL>
 616     <LI>Vermont
 617     <LI>New Hampshire
 618     </UL>
 619 <LI>One Midwestern state:
 620     <UL>
 621     <LI>Michigan
 622     </UL>
 623 </UL>
 624
 625 <H3><A NAME = "A1.4.2">Preformatted Text</A></H3>
 626 <P>
 627 Use the<SAMP> &lt;PRE&gt;</SAMP> tag (which stands for ``preformatted'')
 628 to generate text in a fixed-width font and cause spaces, new lines,
 629 and tabs to be significant. (That is, multiple spaces are displayed
 630 as multiple spaces, and lines break in the same locations as in the
 631 source HTML file.) This is useful for program listings. For example,
 632 the following lines
 633
 634 <PRE>
 635     &lt;PRE&gt;
 636       #!/bin/csh
 637       cd $SCR
 638       cfs get mysrc.f:mycfsdir/mysrc.f
 639       cfs get myinfile:mycfsdir/myinfile
 640       fc -02 -o mya.out mysrc.f
 641       mya.out
 642       cfs save myoutfile:mycfsdir/myoutfile
 643       rm *
 644     &lt;/PRE&gt;
 645 </PRE>
 646
 647 <P>
 648 display as
 649
 650 <PRE>
 651       #!/bin/csh
 652       cd $SCR
 653       cfs get mysrc.f:mycfsdir/mysrc.f
 654       cfs get myinfile:mycfsdir/myinfile
 655       fc -02 -o mya.out mysrc.f
 656       mya.out
 657       cfs save myoutfile:mycfsdir/myoutfile
 658       rm *
 659 </PRE>
 660
 661 <P>
 662 Hyperlinks can be used within <SAMP>&lt;PRE&gt;</SAMP> sections. You
 663 should avoid using other HTML tags within <SAMP>&lt;PRE&gt;</SAMP>
 664 sections, however.
 665
 666 <P>
 667 Note that because &lt;, &gt;, and &amp; have special meaning in HTML,
 668 you have to use their escape sequences (<SAMP>&amp;lt;</SAMP>, <SAMP>&amp;gt;</SAMP>,
 669 and <SAMP>&amp;amp;</SAMP>, respectively) to enter these characters.
 670 See the section <A HREF = "#A1.5.3">
 671 Special Characters</A> for more information.
 672
 673 <H3><A NAME = "A1.4.3">Extended Quotations</A></H3>
 674 <P>
 675 Use the <SAMP>&lt;BLOCKQUOTE&gt;</SAMP> tag to include quotations in
 676 a separate block on the screen. Most browsers generally indent to separate
 677 it from surrounding text.
 678
 679 <P>
 680 An example:
 681
 682 <PRE>
 683     &lt;BLOCKQUOTE&gt;
 684     I still have a dream. It is a dream deeply rooted in the
 685     American dream. &lt;P&gt;
 686     I have a dream that one day this nation will rise up and
 687     live out the true meaning of its creed. We hold these truths
 688     to be self-evident that all men are created equal. &lt;P&gt;
 689     &lt;/BLOCKQUOTE&gt;
 690 </PRE>
 691
 692 <P>
 693 The result is:
 694 <BLOCKQUOTE>
 695     I still have a dream. It is a dream deeply rooted in the American
 696     dream.
 697
 698     <P>
 699     I have a dream that one day this nation will rise up and live out
 700     the true meaning of its creed. We hold these truths to be self-evident
 701     that all men are created equal.
 702
 703 </BLOCKQUOTE>
 704
 705 <H3><A NAME = "A1.4.4">Addresses</A></H3>
 706 <P>
 707 The <SAMP>&lt;ADDRESS&gt;</SAMP> tag is generally used to specify the
 708 author of a document and a means of contacting the author (e.g., an
 709 email address). This is usually the last item in a file.
 710
 711 <P>
 712 For example, the last line of the online version of this guide is
 713
 714 <PRE>
 715     &lt;ADDRESS&gt;
 716     A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
 717     &lt;/ADDRESS&gt;
 718 </PRE>
 719
 720 <P>
 721 The result is
 722 <ADDRESS>A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu </ADDRESS>
 723
 724 <P>
 725 <STRONG>NOTE:</STRONG> <SAMP>&lt;ADDRESS&gt;</SAMP> is <EM>not</EM>
 726 used for postal addresses. See ``Forced Line Breaks'' on page 10 to
 727 see how to format postal addresses.
 728
 729 <H2><A NAME = "A1.5">Character Formatting</A></H2>
 730 <P>
 731 You can code individual words or sentences with special styles. There
 732 are two types of styles: logical and physical. <DFN>Logical styles</DFN>
 733 tag text according to its meaning, while <DFN>physical styles</DFN>
 734 specify the specific appearance of a section. For example, in the preceding
 735 sentence, the words ``logical styles'' was tagged as a ``definition.''
 736 The same effect (formatting those words in italics), could have been
 737 achieved via a different tag that specifies merely ``put these words
 738 in italics.''
 739
 740 <H3><A NAME = "A1.5.1">Physical Versus Logical: Use Logical Styles When Possible</A></H3>
 741 <P>
 742 If physical and logical styles produce the same result on the screen,
 743 why are there both? We devolve, for a couple of paragraphs, into the
 744 philosophy of SGML, which can be summed in a Zen-like mantra: ``Trust
 745 your browser.''
 746
 747 <P>
 748 In the ideal SGML universe, content is divorced from presentation.
 749 Thus, SGML tags a level-one heading as a level-one heading, but does
 750 not specify that the level-one heading should be, for instance, 24-point
 751 bold Times centered on the top of a page. The advantage of this approach
 752 (it's similar in concept to style sheets in many word processors) is
 753 that if you decide to change level-one headings to be 20-point left-justified
 754 Helvetica, all you have to do is change the definition of the level-one
 755 heading in the presentation device (i.e., your World Wide Web browser).
 756
 757 <P>
 758 The other advantage of logical tags is that they help enforce consistency
 759 in your documents. It's easier to tag something as <SAMP>&lt;H1&gt;</SAMP>
 760 than to remember that level-one headings are 24-point bold Times or
 761 whatever. The same is true for character styles. For example, consider
 762 the <SAMP>&lt;STRONG&gt;</SAMP> tag. Most browsers render it in bold
 763 text. However, it is possible that a reader would prefer that these
 764 sections be displayed in red instead. Logical styles offer this flexibility.
 765
 766 <H4><A NAME = "A1.5.1.1">Logical Styles</A></H4>
 767 <DL COMPACT>
 768 <DT><SAMP>&lt;DFN&gt;</SAMP>
 769 <DD>for a word being defined. Typically displayed in italics. (<DFN>NCSA
 770     </DFN><DFN>Mosaic</DFN> is a World Wide Web browser.)
 771 <DT><SAMP>&lt;EM&gt;</SAMP>
 772 <DD>for emphasis. Typically displayed in italics. (<EM>Watch out for
 773     pick</EM><EM>pockets</EM>.)
 774 <DT><SAMP>&lt;CITE&gt;</SAMP>
 775 <DD>for titles of books, films, etc. Typically displayed in italics.
 776     (<CITE>A </CITE><CITE>Beginner's Guide to HTML</CITE>)
 777 <DT><SAMP>&lt;CODE&gt;</SAMP>
 778 <DD>for snippets of computer code. Displayed in a fixed-width font.
 779     (The <SAMP>&lt;stdio.h&gt;</SAMP> header file)
 780 <DT> <SAMP>&lt;KBD&gt;</SAMP>
 781 <DD>for user keyboard entry. Should be displayed in a bold fixed-width
 782     font, but many browsers render it in the plain fixed-width font.
 783     (Enter <KBD>passwd</KBD> to change your password.)
 784 <DT><SAMP>&lt;SAMP&gt;</SAMP>
 785 <DD>for computer status messages. Displayed in a fixed-width font.
 786     (<SAMP>Segmentation fault: Core dumped.</SAMP>)
 787 <DT><SAMP>&lt;STRONG&gt;</SAMP>
 788 <DD>for strong emphasis. Typically displayed in bold. (<STRONG>Important</STRONG>)
 789
 790 <DT><SAMP>&lt;VAR&gt;</SAMP>
 791 <DD>for a ``metasyntactic'' variable, where the user is to replace
 792     the variable with a specific instance. Typically displayed in italics.
 793     (<KBD>rm</KBD> <VAR>filename</VAR> deletes the file.)
 794 </DL>
 795
 796 <H4><A NAME = "A1.5.1.2">Physical Styles</A></H4>
 797 <DL COMPACT>
 798 <DT><SAMP>&lt;B&gt;</SAMP>
 799 <DD>bold text
 800 <DT><SAMP>&lt;I&gt;</SAMP>
 801 <DD>italic text
 802 <DT><SAMP>&lt;TT&gt;</SAMP>
 803 <DD>typewriter text, e.g. fixed-width font.
 804 </DL>
 805
 806 <H3><A NAME = "A1.5.2">Using Character Tags</A></H3>
 807 <P>
 808 To apply a character style,
 809
 810 <OL>
 811 <LI>Start with <SAMP>&lt;</SAMP><VAR>tag</VAR><SAMP>&gt;</SAMP>, where<SAMP>
 812     </SAMP><VAR>tag</VAR> is the desired character formatting tag,
 813     to indicate the beginning of the tagged text.
 814 <LI>Enter the tagged text.
 815 <LI>End the passage with <SAMP>&lt;/</SAMP><VAR>tag</VAR><SAMP>&gt;</SAMP>.
 816 </OL>
 817
 818 <H3><A NAME = "A1.5.3">Special Characters</A></H3>
 819 <H4><A NAME = "A1.5.3.1">Escape Sequences</A></H4>
 820 <P>
 821 Four characters of the ASCII character set -- the left angle bracket
 822 (&lt;), the right angle bracket (&gt;), the ampersand (&amp;) and the
 823 double quote (&quot;) -- have special meaning within HTML and therefore
 824 cannot be used ``as is'' in text. (The angle brackets are used to indicate
 825 the beginning and end of HTML tags, and the ampersand is used to indicate
 826 the beginning of an escape sequence.)
 827
 828 <P>
 829 To use one of these characters in an HTML document, you must enter
 830 its <DFN>escape </DFN><DFN>sequence</DFN> instead:
 831
 832 <DL COMPACT>
 833 <DT><SAMP>&amp;lt;</SAMP>
 834 <DD>the escape sequence for &lt;
 835 <DT><SAMP>&amp;gt;</SAMP>
 836 <DD>the escape sequence for &gt;
 837 <DT><SAMP>&amp;amp;</SAMP>
 838 <DD>the escape sequence for &amp;
 839 <DT><SAMP>&amp;quot;</SAMP>
 840 <DD>the escape sequence for &quot;
 841 </DL>
 842
 843 <P>
 844 Additional escape sequences support accented characters. For example:
 845
 846 <DL COMPACT>
 847 <DT><SAMP>&amp;ouml;</SAMP>
 848 <DD>the escape sequence for a lowercase o with an umlaut: &ouml;
 849
 850 <DT><SAMP>&amp;ntilde;</SAMP>
 851 <DD>the escape sequence for a lowercase n with an tilde: &ntilde;
 852 <DT><SAMP>&amp;Egrave;</SAMP>
 853 <DD>the escape sequence for an uppercase E with a grave accent: &Egrave;
 854
 855 </DL>
 856
 857 <P>
 858 <A HREF = "http://www.w3.org/hypertext/WWW/MarkUp/ISOlat1.html"> A full
 859 list of supported characters</A> is available.
 860
 861 <P>
 862 <STRONG>NOTE:</STRONG> Unlike the rest of HTML, the escape sequences
 863 are case sensitive. You cannot, for instance, use &amp;LT; instead
 864 of &amp;lt;.
 865
 866 <H4><A NAME = "A1.5.3.2">Forced Line Breaks</A></H4>
 867 <P>
 868 The <SAMP>&lt;BR&gt;</SAMP> tag forces a line break with no extra space
 869 between lines. (By contrast, most browsers format the <SAMP>&lt;P&gt;</SAMP>
 870 paragraph tag with an additional blank line to more clearly indicate
 871 the beginning the new paragraph.)
 872
 873 <P>
 874 One use of <SAMP>&lt;BR&gt;</SAMP> is in formatting addresses:
 875
 876 <PRE>
 877     National Center for Supercomputing Applications&lt;BR&gt;
 878     605 East Springfield Avenue&lt;BR&gt;
 879     Champaign, Illinois 61820-5518&lt;BR&gt;
 880 </PRE>
 881
 882 <H4><A NAME = "A1.5.3.3">Horizontal Rules</A></H4>
 883 <P>
 884 The <SAMP>&lt;HR&gt; tag </SAMP>produces a horizontal line the width
 885 of the browser window.
 886
 887 <H2><A NAME = "A1.6">In-line Images</A></H2>
 888 <P>
 889 Most Web browsers can display in-line images (that is, images next
 890 to text) that are in X Bitmap (XBM) or GIF format. Each image takes
 891 time to process and slows down the initial display of the document,
 892 so generally you should not include too many or overly large images.
 893
 894 <P>
 895 To include an in-line image, use
 896
 897 <PRE>
 898     &lt;IMG SRC=<VAR>image_URL</VAR>&gt;
 899 </PRE>
 900
 901 <P>
 902 where <VAR>image_URL</VAR> is the URL of the image file. The syntax
 903 for <SAMP>IMG SRC </SAMP>URLs is identical to that used in an anchor
 904 <SAMP>HREF</SAMP>. If the image file is a GIF file, then the filename
 905 part of <VAR>image_URL </VAR><STRONG>must</STRONG> end with <SAMP>.gif</SAMP>.
 906 Filenames of X Bitmap images must end with <SAMP>.xbm</SAMP>.
 907
 908 <P>
 909 <IMG SRC = "Graphics/RandomPic.gif" ALT = "">By default the bottom
 910 of an image is aligned with the text as shown in this paragraph.
 911
 912 <P>
 913 <IMG SRC = "Graphics/RandomPic.gif" ALT = "" ALIGN = TOP>
 914 Add the <SAMP>ALIGN=TOP</SAMP>
 915 option if you want the browser to align adjacent text with the top
 916 of the image as shown in this paragraph. The full in-line image tag
 917 with the top alignment is:
 918
 919 <PRE>
 920     &lt;IMG ALIGN=top SRC=<VAR>image_URL</VAR>&gt;
 921 </PRE>
 922
 923 <P>
 924 <IMG SRC = "Graphics/RandomPic.gif" ALT = "" ALIGN = MIDDLE>
 925 <SAMP>ALIGN=MIDDLE</SAMP>
 926 aligns the text with the center of the image.
 927
 928 <H3><A NAME = "A1.6.1">Alternate Text for Browsers That Can't Display Images</A></H3>
 929 <P>
 930 Some World Wide Web browsers, primarily those that run on VT100 terminals,
 931 cannot display images. The <SAMP>ALT</SAMP> option allows you to specify
 932 text to be displayed when an image cannot be. For example:
 933
 934 <PRE>
 935     &lt;IMG SRC = &quot;UpArrow.gif&quot; ALT = &quot;Up&quot;&gt;
 936 </PRE>
 937
 938 <P>
 939 where <SAMP>UpArrow.gif </SAMP>is the picture of an upward pointing
 940 arrow. With NCSA Mosaic and other graphics-capable viewers, the user
 941 sees the up arrow graphic. With a VT100 browser, such as lynx, the
 942 user sees the word ``Up.''
 943
 944 <H2><A NAME = "A1.7">External Images, Sounds, and Animations</A></H2>
 945 <P>
 946 You may want to have an image open as a separate document when a user
 947 activates a link on either a word or a smaller, in-line version of
 948 the image included in your document. This is considered an external
 949 image and is useful if you do not wish to slow down the loading of
 950 the main document with large in-line images.
 951
 952 <P>
 953 To include a reference to an external image, use
 954
 955 <PRE>
 956     &lt;A HREF = <VAR>image_URL</VAR>&gt;link anchor&lt;/A&gt;
 957 </PRE>
 958
 959 <P>
 960 Use the same syntax is for links to external animations and sounds.
 961 The only difference is the file extension of the linked file. For example,
 962
 963 <P>
 964 <SAMP>&lt;A HREF = &quot;QuickTimeMovie.mov&quot;&gt;link anchor&lt;/A&gt;</SAMP>
 965
 966 <P>
 967 specifies a link to a QuickTime movie. Some common file types and their
 968 extensions are:
 969
 970 <DL COMPACT>
 971 <DT><STRONG>File Type</STRONG>
 972 <DD><STRONG>Extension</STRONG>
 973 <DT>Plain text
 974 <DD><SAMP>.txt</SAMP>
 975 <DT>HTML document
 976 <DD><SAMP>.html</SAMP>
 977 <DT>GIF image
 978 <DD><SAMP>.gif</SAMP>
 979 <DT>TIFF image
 980 <DD><SAMP>.tiff</SAMP>
 981 <DT>XBM bitmap image
 982 <DD><SAMP>.xbm</SAMP>
 983 <DT>JPEG image
 984 <DD><SAMP>.jpg</SAMP> or <SAMP>.jpeg</SAMP>
 985 <DT>PostScript file
 986 <DD><SAMP>.ps</SAMP>
 987 <DT>AIFF sound
 988 <DD><SAMP>.aiff</SAMP>
 989 <DT>AU sound
 990 <DD><SAMP>.au</SAMP>
 991 <DT>QuickTime movie
 992 <DD><SAMP>.mov</SAMP>
 993 <DT>MPEG movie
 994 <DD><SAMP>.mpeg</SAMP> or <SAMP>.mpg</SAMP>
 995 </DL>
 996
 997 <P>
 998 Make sure your intended audience has the necessary viewers. Most UNIX
 999 workstations, for instance, cannot view QuickTime movies.
1000
1001 <H2><A NAME = "A1.8">Troubleshooting</A></H2>
1002 <H3><A NAME = "A1.8.1">Avoid Overlapping Tags</A></H3>
1003 <P>
1004 Consider this snippet of HTML:
1005
1006 <PRE>
1007     &lt;B&gt;This is an example of &lt;DFN&gt;overlapping&lt;/B&gt; HTML tags.&lt;/DFN&gt;
1008 </PRE>
1009
1010 <P>
1011 The word ``overlapping'' is contained within both the <SAMP>&lt;B&gt;</SAMP>
1012 and <SAMP>&lt;DFN&gt;</SAMP> tags. How does the browser format it?
1013 You won't know until you look, and different browsers will likely react
1014 differently. In general, avoid overlapping tags.
1015
1016 <H3><A NAME = "A1.8.2">Embed Anchors and Character Tags, But Nothing Else</A></H3>
1017 <P>
1018 It is acceptable to embed anchors within another HTML element:
1019
1020 <PRE>
1021     &lt;H1&gt;&lt;A HREF = &quot;Destination.html&quot;&gt;My heading&lt;/A&gt;&lt;/H1&gt;
1022 </PRE>
1023
1024 <P>
1025 <EM>Do not</EM> embed a heading or another HTML element within an anchor:
1026
1027 <PRE>
1028     &lt;A HREF = &quot;Destination.html&quot;&gt;
1029     &lt;H1&gt;My heading&lt;/H1&gt;
1030     &lt;/A&gt;
1031 </PRE>
1032
1033 <P>
1034 Although most browsers currently handle this example, it is forbidden
1035 by the official HTML and HTML+ specifications, and will not work with
1036 future browsers.
1037
1038 <P>
1039 Character tags modify the appearance of other tags:
1040
1041 <PRE>
1042     &lt;UL&gt;&lt;LI&gt;&lt;B&gt;A bold list item&lt;/B&gt;
1043         &lt;UL&gt;
1044         &lt;LI&gt;&lt;I&gt;An italic list item&lt;/I&gt;
1045     &lt;/UL&gt;
1046 </PRE>
1047
1048 <P>
1049 However, avoid embedding other types of HTML element tags. For example,
1050 it is tempting to embed a heading within a list, in order to make the
1051 font size larger:
1052
1053 <PRE>
1054     &lt;UL&gt;&lt;LI&gt;&lt;H1&gt;A large heading&lt;/H1&gt;
1055         &lt;UL&gt;
1056         &lt;LI&gt;&lt;H2&gt;Something slightly smaller&lt;/H2&gt;
1057     &lt;/UL&gt;
1058 </PRE>
1059
1060 <P>
1061 Although some browsers, such as NCSA Mosaic for the X Window System,
1062 format this construct quite nicely, it is unpredictable (because it
1063 is undefined) what other browsers will do. For compatibility with all
1064 browsers, avoid these kinds of constructs.
1065
1066 <P>
1067 What's the difference between embedding a <SAMP>&lt;B&gt;</SAMP> within
1068 a <SAMP>&lt;LI&gt;</SAMP> tag as opposed to embedding a <SAMP>&lt;H1&gt;</SAMP>
1069 within a <SAMP>&lt;LI&gt;</SAMP>? This is again a question of SGML.
1070 The semantic meaning of <SAMP>&lt;H1&gt;</SAMP> is that it's the main
1071 heading of a document and that it should be followed by the content
1072 of the document.Thus it doesn't make sense to find a <SAMP>&lt;H1&gt;</SAMP>
1073 within a list.
1074
1075 <P>
1076 Character formatting tags also are generally not additive. You might
1077 expect that
1078
1079 <PRE>
1080     &lt;B&gt;&lt;I&gt;some text&lt;/I&gt;&lt;/B&gt;
1081 </PRE>
1082
1083 <P>
1084 would produce bold-italic text. On some browsers it does; other browsers
1085 interpret only the innermost tag (here, the italics).
1086
1087 <H3><A NAME = "A1.8.3">Check Your Links</A></H3>
1088 <P>
1089 When an <SAMP>&lt;IMG&gt;</SAMP> tag points at an image that does not
1090 exist, a dummy image is substituted. When this happens, make sure that
1091 the referenced image does in fact exist, that the hyperlink has the
1092 correct information in the URL, and that the file permission is set
1093 appropriately (world-readable).
1094
1095 <H2><A NAME = "A1.9">A Longer Example</A></H2>
1096 <P>
1097 Here is a longer example of an HTML document:
1098
1099 <PRE>
1100     &lt;HEAD&gt;
1101     &lt;TITLE&gt;A Longer Example&lt;/TITLE&gt;
1102     &lt;/HEAD&gt;
1103     &lt;BODY&gt;
1104     &lt;H1&gt;A Longer Example&lt;/H1&gt;
1105     This is a simple HTML document. This is the first
1106     paragraph. &lt;P&gt;
1107     This is the second paragraph, which shows special effects.  This is a
1108     word in &lt;I&gt;italics&lt;/I&gt;.  This is a word in &lt;B&gt;bold&lt;/B&gt;.
1109     Here is an in-lined GIF image: &lt;IMG SRC = &quot;myimage.gif&quot;&gt;.
1110     &lt;P&gt;
1111     This is the third paragraph, which demonstrates links.  Here is
1112     a hypertext link from the word &lt;A HREF = &quot;subdir/myfile.html&quot;&gt;foo&lt;/A&gt;
1113     to a document called &quot;subdir/myfile.html&quot;. (If you
1114     try to follow this link, you will get an error screen.) &lt;P&gt;
1115     &lt;H2&gt;A second-level header&lt;/H2&gt;
1116     Here is a section of text that should display as a
1117     fixed-width font: &lt;P&gt;
1118     &lt;PRE&gt;
1119         On the stiff twig up there
1120         Hunches a wet black rook
1121         Arranging and rearranging its feathers in the rain ...
1122     &lt;/PRE&gt;
1123     This is a unordered list with two items: &lt;P&gt;
1124     &lt;UL&gt;
1125     &lt;LI&gt; cranberries
1126     &lt;LI&gt; blueberries
1127     &lt;/UL&gt;
1128     This is the end of my example document. &lt;P&gt;
1129     &lt;ADDRESS&gt;Me (me@mycomputer.univ.edu)&lt;/ADDRESS&gt;
1130     &lt;/BODY&gt;
1131 </PRE>
1132
1133 <A HREF=LongerExample.html>Click here</A> to see the formatted version.
1134
1135 <P>
1136 In addition to tags already discussed, this example also uses the <SAMP>&lt;HEAD&gt;
1137 ... &lt;/HEAD&gt; </SAMP>and <SAMP>&lt;BODY&gt; ... &lt;/BODY&gt;</SAMP>
1138 tags, which separate the document into introductory information about
1139 the document and the main text of the document. These tags don't change
1140 the appearance of the formatted document at all, but are useful for
1141 several purposes (for example, NCSA Mosaic for Macintosh 2.0, for example,
1142 allows you to browse just the header portion of document before deciding
1143 whether to download the rest), and it is recommended that you use these
1144 tags.
1145
1146 <H2><A NAME = "A1.10">For More Information</A></H2>
1147 <P>
1148 This guide is only an introduction to HTML and not a comprehensive
1149 reference. Below are additional sources of information.
1150
1151 <H3><A NAME = "A1.10.1">Fill-out Forms</A></H3>
1152 <P>
1153 One major feature not discussed here is fill-out forms, which allows
1154 users to return information to the World Wide Web server. For information
1155 on fill-out forms, look at this
1156 <A HREF = "/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html"> Fill-out
1157 Forms Overview</A>
1158
1159 <H3><A NAME = "A1.10.2">Style Guides</A></H3>
1160 <P>
1161 The following offer advice on how to write ``good'' HTML:
1162
1163 <UL>
1164 <LI><A HREF = "http://www.willamette.edu/html-composition/strict-html.html">
1165     <CITE>Composing Good HTML</CITE></A>
1166 <LI>
1167 <A HREF = "http://www.w3.org/hypertext/WWW/Provider/Style/Introduction.html">
1168     CERN's style guide for online hypertext</A>
1169 </UL>
1170
1171 <H3><A NAME = "A1.10.3">Other Introductory Documents</A></H3>
1172 These cover similar information as this guide:
1173 <UL>
1174 <LI><A HREF = "http://www.ucc.ie/info/net/htmldoc.html">
1175     <CITE>How to Write HTML Files</CITE></A>
1176 <LI><A HREF = "http://melmac.corp.harris.com/about_html.html">
1177     <CITE>Introduction to HTML</CITE></A>
1178 </UL>
1179
1180 <H3><A NAME = "A1.10.4">Additional References</A></H3>
1181 <UL>
1182 <LI><A HREF = "http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html">
1183     <CITE>The HTML Quick Reference Guide</CITE></A>,
1184     which provides a comprehensive listing of HTML codes
1185 <LI><A HREF = "http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html">
1186     The official HTML specification</A>
1187 <LI><A HREF = "http://www.w3.org/hypertext/WWW/MarkUp/SGML.html">A
1188     description of SGML</A>, the Standard Generalized Markup Language
1189 <LI><A HREF
1190 = "http://www.ietf.cnri.reston.va.us/html.charters/html-charter.html">
1191 <cite>The HTML Working Group of the IETF</cite></A>.
1192 </UL>
1193 <HR>
1194 <ADDRESS>
1195 National Center for Supercomputing Applications / pubs@ncsa.uiuc.edu
1196 </ADDRESS>
1197 </BODY>
1198