1200 lines
40 KiB
HTML
1200 lines
40 KiB
HTML
<!-- $NetBSD: HTMLPrimer.html,v 1.1 1998/12/30 20:20:33 mcr Exp $ -->
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Draft//EN">
|
|
<HTML>
|
|
<HEAD>
|
|
<TITLE>A Beginner's Guide to HTML</TITLE>
|
|
</HEAD>
|
|
|
|
<BODY>
|
|
<H1>A Beginner's Guide to HTML</H1>
|
|
|
|
<P>
|
|
This is a primer for producing documents in HTML, the markup language
|
|
used by the World Wide Web.
|
|
|
|
<UL>
|
|
<LI><A HREF="#A1.1">Acronym Expansion</A>
|
|
<LI><A HREF="#A1.2">What This Primer Doesn't Cover</A>
|
|
<LI><A HREF="#A1.3">Creating HTML Documents</A>
|
|
<UL>
|
|
<LI><A HREF="#A1.3.1">The Minimal HTML Document</A>
|
|
<LI><A HREF="#A1.3.2">Basic Markup Tags</A>
|
|
<UL>
|
|
<LI><A HREF="#A1.3.2.1">Titles</A>
|
|
<LI><A HREF="#A1.3.2.2">Headings</A>
|
|
<LI><A HREF="#A1.3.2.3">Paragraphs</A>
|
|
</UL>
|
|
<LI><A HREF="#A1.3.3">Linking to Other Documents</A>
|
|
<UL>
|
|
<LI><A HREF="#A1.3.3.1">Relative Links Versus Absolute Pathnames</A>
|
|
<LI><A HREF="#A1.3.3.2">Uniform Resource Locator</A>
|
|
<LI><A HREF="#A1.3.3.3">Anchors to Specific Sections in Other Documents</A>
|
|
<LI><A HREF="#A1.3.3.4">Anchors to Specific Sections Within
|
|
the Current Document</A>
|
|
</UL>
|
|
</UL>
|
|
<LI><A HREF="#A1.4">Additional Markup Tags</A>
|
|
<UL>
|
|
<LI><A HREF="#A1.4.1">Lists</A>
|
|
<UL>
|
|
<LI><A HREF="#A1.4.1.1">Unnumbered Lists</A>
|
|
<LI><A HREF="#A1.4.1.2">Numbered Lists</A>
|
|
<LI><A HREF="#A1.4.1.3">Definition Lists</A>
|
|
<LI><A HREF="#A1.4.1.4">Nested Lists</A>
|
|
</UL>
|
|
<LI><A HREF="#A1.4.2">Preformatted Text</A>
|
|
<LI><A HREF="#A1.4.3">Extended Quotes</A>
|
|
<LI><A HREF="#A1.4.4">Addresses</A>
|
|
</UL>
|
|
|
|
<LI><A HREF="#A1.5">Character Formatting</A>
|
|
<UL>
|
|
<LI><A HREF="#A1.5.1">Physical Versus Logical:
|
|
Use Logical Tags When Possible</A>
|
|
<UL>
|
|
<LI><A HREF="#A1.5.1.1">Logical Styles</A>
|
|
<LI><A HREF="#A1.5.1.2">Physical Styles</A>
|
|
</UL>
|
|
<LI><A HREF="#A1.5.2">Using Character Tags</A>
|
|
<LI><A HREF="#A1.5.3">Special Characters</A>
|
|
<UL>
|
|
<LI><A HREF="#A1.5.3.1">Escape Sequences</A>
|
|
<LI><A HREF="#A1.5.3.2">Forced Line Breaks</A>
|
|
<LI><A HREF="#A1.5.3.3">Horizontal Rules</A>
|
|
</UL>
|
|
</UL>
|
|
<LI><A HREF="#A1.6">In-line Images</A>
|
|
<UL>
|
|
<LI><A HREF="#A1.6.1">Alternate Text for Viewers
|
|
That Can't Display Images</A>
|
|
</UL>
|
|
<LI><A HREF="#A1.7">External Images, Sounds, and Animations</A>
|
|
<LI><A HREF="#A1.8">Troubleshooting</A>
|
|
<UL>
|
|
<LI><A HREF="#A1.8.1">Avoid Overlapping Tags</A>
|
|
<LI><A HREF="#A1.8.2">Embed Anchors and Character Tags,
|
|
But Not Anything Else</A>
|
|
<LI><A HREF="#A1.8.3">Check Your Links</A>
|
|
</UL>
|
|
<LI><A HREF="#A1.9">A Longer Example</A>
|
|
<LI><A HREF="#A1.10">For More Information</A>
|
|
<UL>
|
|
<LI><A HREF="#A1.10.1">Fill-out Forms</A>
|
|
<LI><A HREF="#A1.10.2">Style Guides</A>
|
|
<LI><A HREF="#A1.10.3">Other Introductory Documents</A>
|
|
<LI><A HREF="#A1.10.4">Additional References</A>
|
|
</UL>
|
|
</UL>
|
|
|
|
<H2><A NAME = "A1.1">Acronym Expansion</A></H2>
|
|
<DL COMPACT>
|
|
<DT><I>WWW</I>
|
|
<DD>World Wide Web (or Web, for short).
|
|
<DT><I>SGML</I>
|
|
<DD>Standard Generalized Markup Language -- this is a standard for
|
|
describing markup languages.
|
|
<DT><CITE>DTD</CITE>
|
|
<DD>Document Type Definition -- this is a specific markup language,
|
|
written using SGML.
|
|
<DT><CITE>HTML</CITE>
|
|
<DD>HyperText Markup Language -- HTML is a SGML DTD. In practical
|
|
terms, HTML is a collection of styles (indicated by markup tags)
|
|
that define the various components of a World Wide Web document.
|
|
HTML was invented by Tim Berners-Lee while at CERN. He is now director
|
|
of the W3 Consortium.
|
|
</DL>
|
|
|
|
<H2><A NAME = "A1.2">What This Primer Doesn't Cover</A></H2>
|
|
<P>
|
|
This primer assumes that you have:
|
|
|
|
<UL>
|
|
<LI>at least a passing knowledge of how to use NCSA Mosaic or some
|
|
other Web browser
|
|
<LI>a general understanding of how Web servers and client browsers
|
|
work
|
|
<LI>access to a Web server for which you would like to produce HTML
|
|
documents, or that you wish to produce HTML documents for personal
|
|
use
|
|
</UL>
|
|
|
|
<H2><A NAME = "A1.3">Creating HTML Documents</A></H2>
|
|
<P>
|
|
HTML documents are in plain (also known as ASCII) text format and can
|
|
be created using any text editor (e.g., Emacs or vi on UNIX machines).
|
|
A couple of Web browsers (tkWWW for X Window System machines and CERN's
|
|
Web browser for NeXT computers) include rudimentary HTML editors in
|
|
a WYSIWYG environment. There are also some WYSIWIG editors available
|
|
now (e.g. HotMetal for Sun Sparcstations, HTML Edit for Macintoshes).
|
|
You may wish to try one of them first before delving into the details
|
|
of HTML.
|
|
<BLOCKQUOTE>
|
|
<I>You can preview a document in progress with NCSA Mosaic (and
|
|
some </I><I>other Web browsers). Open it with the </I><B>Open Local
|
|
</B><I>command under the </I><B>File</B><I> menu. </I>
|
|
|
|
<P>
|
|
<I>After you edit the source HTML file, save the changes. Return
|
|
to NCSA </I><I>Mosaic and </I><B>Reload</B><I> the document. The
|
|
changes are reflected in the on-</I><I>screen display.</I>
|
|
|
|
</BLOCKQUOTE>
|
|
|
|
<H3><A NAME = "A1.3.1">The Minimal HTML Document</A></H3>
|
|
<P>
|
|
Here is a bare-bones example of HTML:
|
|
|
|
<PRE>
|
|
<TITLE>The simplest HTML example</TITLE>
|
|
<H1>This is a level-one heading</H1>
|
|
Welcome to the world of HTML.
|
|
This is one paragraph.<P>
|
|
And this is a second.<P>
|
|
</PRE>
|
|
|
|
<A HREF=MinimalHTML.html>Click here</A> to see the formatted version
|
|
of the example.
|
|
|
|
<P>
|
|
HTML uses markup tags to tell the Web browser how to display the text.
|
|
The above example uses:
|
|
|
|
<UL>
|
|
<LI>the <SAMP><TITLE></SAMP> tag (and corresponding <SAMP></TITLE></SAMP>
|
|
tag), which specifies the title of the document
|
|
<LI>the <SAMP><H1></SAMP> header tag (and corresponding <SAMP></H1></SAMP>)
|
|
<LI>the <SAMP><P></SAMP> paragraph-separator tag
|
|
</UL>
|
|
|
|
<P>
|
|
HTML tags consist of a left angle bracket (<SAMP><</SAMP>), (a ``less
|
|
than'' symbol to mathematicians), followed by name of the tag and closed
|
|
by a right angular bracket (<SAMP>></SAMP>). Tags are usually paired,
|
|
e.g. <SAMP><H1></SAMP> and <SAMP></H1></SAMP>. The ending
|
|
tag looks just like the starting tag except a slash (/) precedes the
|
|
text within the brackets. In the example, <SAMP><H1></SAMP> tells
|
|
the Web browser to start formatting a level-one heading; <SAMP></H1></SAMP>
|
|
tells the browser that the heading is complete.
|
|
|
|
<P>
|
|
The primary exception to the pairing rule is the <SAMP><P></SAMP>
|
|
tag. There is no such thing as <SAMP></P></SAMP>.
|
|
|
|
<P>
|
|
<STRONG>NOTE:</STRONG><I> HTML is not case sensitive. </I><SAMP><title></SAMP><I>
|
|
is equivalent to </I><SAMP><TITLE></SAMP><I> or </I><SAMP><TiTlE></SAMP><I>.
|
|
</I>
|
|
|
|
<P>
|
|
Not all tags are supported by all World Wide Web browsers. If a browser
|
|
does not support a tag, it just ignores it.
|
|
|
|
<H3><A NAME = "A1.3.2">Basic Markup Tags</A></H3>
|
|
<H4><A NAME = "A1.3.2.1">Title</A></H4>
|
|
<P>
|
|
Every HTML document should have a title. A title is generally displayed
|
|
separately from the document and is used primarily for document identification
|
|
in other contexts (e.g., a WAIS search). Choose about half a dozen
|
|
words that describe the document's purpose.
|
|
<BLOCKQUOTE>
|
|
<I>In the X Window System and Microsoft Windows versions of NCSA
|
|
</I><I>Mosaic, the </I><B>Document Title</B><I> field is at the
|
|
top of the screen just below the </I><I>pulldown menus. In NCSA
|
|
Mosaic for Macintosh, text tagged as </I><SAMP><TITLE></SAMP>
|
|
<I>appears as the window title.</I>
|
|
|
|
</BLOCKQUOTE>
|
|
|
|
<H4><A NAME = "A1.3.2.2">Headings</A></H4>
|
|
<P>
|
|
HTML has six levels of headings, numbered 1 through 6, with 1 being
|
|
the most prominent. Headings are displayed in larger and/or bolder
|
|
fonts than normal body text. The first heading in each document should
|
|
be tagged <SAMP><H1></SAMP>. The syntax of the heading tag is:
|
|
|
|
<P>
|
|
<SAMP><H</SAMP><VAR>y</VAR><SAMP>></SAMP><VAR>Text of heading</VAR><SAMP>
|
|
</H</SAMP><VAR>y</VAR><SAMP> ></SAMP>
|
|
|
|
<P>
|
|
where <VAR>y</VAR> is a number between 1 and 6 specifying the level
|
|
of the heading.
|
|
|
|
<P>
|
|
For example, the coding for the ``Headings'' section heading above
|
|
is
|
|
|
|
<PRE>
|
|
<H3>Headings</H3>
|
|
</PRE>
|
|
|
|
<H5><A NAME = "A1.3.2.2.1">Title versus first heading</A></H5>
|
|
<P>
|
|
In many documents, the first heading is identical to the title. For
|
|
multipart documents, the text of the first heading should be suitable
|
|
for a reader who is already browsing related information (e.g., a chapter
|
|
title), while the title tag should identify the document in a wider
|
|
context (e.g., include both the book title and the chapter title, although
|
|
this can sometimes become overly long).
|
|
|
|
<H4><A NAME = "A1.3.2.3">Paragraphs</A></H4>
|
|
<P>
|
|
Unlike documents in most word processors, carriage returns in HTML
|
|
files aren't significant. Word wrapping can occur at any point in your
|
|
source file, and multiple spaces are collapsed into a single space.
|
|
(There are couple of exceptions; space following a <SAMP><P></SAMP>
|
|
or <SAMP><H</SAMP><VAR>y</VAR><SAMP>></SAMP> tag, for example,
|
|
is ignored.) Notice that in the bare-bones example, the first paragraph
|
|
is coded as
|
|
|
|
<PRE>
|
|
Welcome to HTML.
|
|
This is the first paragraph. <P>
|
|
</PRE>
|
|
|
|
<P>
|
|
In the source file, there is a line break between the sentences. A
|
|
Web browser ignores this line break and starts a new paragraph only
|
|
when it reaches a <SAMP><P></SAMP> tag.
|
|
|
|
<P>
|
|
<STRONG>Important:</STRONG> You must separate paragraphs with <SAMP><P></SAMP>.
|
|
The browser ignores any indentations or blank lines in the source text.
|
|
HTML relies almost entirely on the tags for formatting instructions,
|
|
and without the <SAMP><P></SAMP> tags, the document becomes one
|
|
large paragraph. (The exception is text tagged as ``preformatted,''
|
|
which is explained below.) For instance, the following would produce
|
|
identical output as the first bare-bones HTML example:
|
|
|
|
<PRE>
|
|
<TITLE>The simplest HTML example</TITLE><H1>This is a level
|
|
one heading</H1>Welcome to the world of HTML. This is one
|
|
paragraph.<P>And this is a second.<P>
|
|
</PRE>
|
|
|
|
<P>
|
|
However, to preserve readability in HTML files, headings should be
|
|
on separate lines, and paragraphs should be separated by blank lines
|
|
(in addition to the <SAMP><P></SAMP> tags).
|
|
<BLOCKQUOTE>
|
|
<I>NCSA Mosaic handles <P> by ending the current paragraph
|
|
and insert</I><I>ing a blank line. </I>
|
|
|
|
</BLOCKQUOTE>
|
|
|
|
<P>
|
|
In HTML+, a successor to HTML currently in development, <SAMP><P></SAMP>
|
|
becomes a ``container'' of text, just as the text of a level-one heading
|
|
is ``contained'' within<SAMP><H1> ... </SAMP><SAMP></H1></SAMP>:
|
|
|
|
<PRE>
|
|
<P>
|
|
This is a paragraph in HTML+.
|
|
</P>
|
|
</PRE>
|
|
|
|
<P>
|
|
The difference is that the <SAMP></P></SAMP> closing tag can
|
|
always be omitted. (That is, if a browser sees a <SAMP><P></SAMP>,
|
|
it knows that there must be an implied <SAMP></P></SAMP> to end
|
|
the previous paragraph.) In other words, in HTML+, <SAMP><P></SAMP>
|
|
is a beginning-of-paragraph marker.
|
|
|
|
<P>
|
|
The advantage of this change is that you will be able to specify formatting
|
|
options for a paragraph. For example, in HTML+, you will be able to
|
|
center a paragraph by coding
|
|
|
|
<PRE>
|
|
<SAMP><P ALIGN=CENTER></SAMP>
|
|
This is a centered paragraph. This is HTML+, so you can't do it yet.
|
|
</PRE>
|
|
|
|
<P>
|
|
This change won't effect any documents you write now, and they will
|
|
continue to look just the same with HTML+ browsers.
|
|
|
|
<H3><A NAME = "A1.3.3">Linking to Other Documents</A></H3>
|
|
<P>
|
|
The chief power of HTML comes from its ability to link regions of text
|
|
(and also images) to another document. The browser highlights these
|
|
regions (usually with color and/or underlines) to indicate that they
|
|
are hypertext links (often shortened to <DFN>hyperlinks</DFN> or simply
|
|
<DFN>links</DFN>).
|
|
|
|
<P>
|
|
HTML's single hypertext-related tag is <SAMP><A></SAMP>, which
|
|
stands for <DFN>anchor</DFN>. To include an anchor in your document:
|
|
|
|
<OL>
|
|
<LI>Start the anchor with <SAMP><A</SAMP> . (There's a space after
|
|
the <CODE>A</CODE>.)
|
|
<LI>Specify the document that's being pointed to by entering the parameter
|
|
<SAMP>HREF="</SAMP><VAR>filename</VAR><SAMP>"</SAMP>
|
|
followed by a closing right angle bracket: <SAMP>></SAMP>
|
|
<LI>Enter the text that will serve as the hypertext link in the current
|
|
document.
|
|
<LI>Enter the ending anchor tag: <SAMP></A></SAMP>.
|
|
</OL>
|
|
|
|
<P>
|
|
Here is an sample hypertext reference:
|
|
|
|
<PRE>
|
|
<A HREF="MaineStats.html">Maine</A>
|
|
</PRE>
|
|
|
|
<P>
|
|
This entry makes the word ``Maine'' the hyperlink to the document <SAMP>MaineStats.html</SAMP>,
|
|
which is in the same directory as the first document. You can link
|
|
to documents in other directories by specifying the <DFN>relative path</DFN>
|
|
from the current document to the linked document. For example, a link
|
|
to a file <SAMP>NJStats.html</SAMP> located in the subdirectory <SAMP>AtlanticStates</SAMP>
|
|
would be:
|
|
|
|
<PRE>
|
|
<A HREF="AtlanticStates/NJStats.html">New Jersey</A>
|
|
</PRE>
|
|
|
|
<P>
|
|
These are called <VAR>relative links</VAR>. You can also use the absolute
|
|
pathname of the file if you wish. Pathnames use the standard UNIX syntax.
|
|
|
|
<H4><A NAME = "A1.3.3.1">Relative Links Versus Absolute Pathnames</A></H4>
|
|
<P>
|
|
In general, you should use relative links, because
|
|
|
|
<OL>
|
|
<LI>You have less to type.
|
|
<LI>It's easier to move a group of documents to another location, because
|
|
the relative path names will still be valid.
|
|
</OL>
|
|
|
|
<P>
|
|
However, use absolute pathnames when linking to documents that are
|
|
not directly related. For example, consider a group of documents that
|
|
comprise a user manual. Links within this group should be relative
|
|
links. Links to other documents (perhaps a reference to related software)
|
|
should use full path names. This way, if you move the user manual to
|
|
a different directory, none of the links would have to be updated.
|
|
|
|
<H4><A NAME = "A1.3.3.2">Uniform Resource Locator</A></H4>
|
|
<P>
|
|
The World Wide Web uses Uniform Resource Locators (URLs) to specify
|
|
the location of files on other servers. A URL includes the type of
|
|
resource being accessed (e.g., gopher, WAIS), the address of the server,
|
|
and the location of the file. The syntax is:
|
|
|
|
<P>
|
|
<VAR>scheme</VAR><SAMP>://</SAMP><VAR>host.domain</VAR><SAMP>[:</SAMP><VAR>port</VAR><SAMP>]/</SAMP><VAR>path</VAR><SAMP>/</SAMP><VAR>filename</VAR>
|
|
|
|
<P>
|
|
where <VAR>scheme</VAR> is one of
|
|
|
|
<DL COMPACT>
|
|
<DT><SAMP>file</SAMP>
|
|
<DD>
|
|
<DT>
|
|
<DD>a file on your local system, or a file on an anonymous FTP server
|
|
|
|
<DT><SAMP>http</SAMP>
|
|
<DD>a file on a World Wide Web server
|
|
<DT><SAMP>gopher</SAMP>
|
|
<DD>a file on a Gopher server
|
|
<DT><SAMP>WAIS</SAMP>
|
|
<DD>a file on a WAIS server
|
|
<DT><SAMP>news</SAMP>
|
|
<DD>an Usenet newsgroup
|
|
<DT><SAMP>telnet</SAMP>
|
|
<DD>a connection to a Telnet-based service
|
|
</DL>
|
|
|
|
<P>
|
|
The <VAR>port</VAR> number can generally be omitted. (That means unless
|
|
someone tells you otherwise, leave it out.)
|
|
|
|
<P>
|
|
For example, to include a link to this primer in your document, you
|
|
would use
|
|
|
|
<PRE>
|
|
<A HREF = "http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">
|
|
NCSA's Beginner's Guide to HTML</A>
|
|
</PRE>
|
|
|
|
<P>
|
|
This would make the text ``NCSA's Beginner's Guide to HTML'' a hyperlink
|
|
to this document.
|
|
|
|
<P>
|
|
For more information on URLs, look at
|
|
|
|
<UL>
|
|
<LI><A HREF = "http://www.w3.org/hypertext/WWW/Addressing/Addressing.html">
|
|
<CITE>WWW Names and Addresses, URIs, URLs, URNs</CITE></A>, written
|
|
by people at CERN
|
|
<LI><A HREF = "http://www.ncsa.uiuc.edu/demoweb/url-primer.html">
|
|
<CITE>A Beginner's Guide to URLs</CITE></A>, located on the NCSA Mosaic
|
|
<B>Help</B> menu
|
|
</UL>
|
|
|
|
<H4><A NAME = "A1.3.3.3">Links to Specific Sections in Other Documents</A></H4>
|
|
<P>
|
|
Anchors can also be used to move to a particular section in a document.
|
|
Suppose you wish to set a link from document A and a specific section
|
|
in document B. (Call this file <SAMP>documentB.html</SAMP>.) First
|
|
you need to set up a <DFN>named anchor</DFN> in document B. For example,
|
|
to set up an anchor named ``Jabberwocky'' to document B, enter
|
|
|
|
<PRE>
|
|
Here's <A NAME = "Jabberwocky">some text</a>
|
|
</PRE>
|
|
|
|
<P>
|
|
Now when you create the link in document A, include not only the filename,
|
|
but also the named anchor, separated by a hash mark (#).
|
|
|
|
<PRE>
|
|
This is my <A HREF = "documentB.html#Jabberwocky">link</A> to document B.
|
|
</PRE>
|
|
|
|
<P>
|
|
Now clicking on the word ``link'' in document A sends the reader directly
|
|
to the words ``some text'' in document B.
|
|
|
|
<H4><A NAME = "A1.3.3.4">Links to Specific Sections Within the Current Document</A></H4>
|
|
<P>
|
|
The technique is exactly the same except the filename is omitted.
|
|
|
|
<P>
|
|
For example, to link to the Jabberwocky anchor from within the same
|
|
file (Document B), use
|
|
|
|
<PRE>
|
|
This is <A HREF = "#Jabberwocky">Jabberwocky link</A> from within Document B.
|
|
</PRE>
|
|
|
|
<H2><A NAME = "A1.4">Additional Markup Tags</A></H2>
|
|
<P>
|
|
The preceding is sufficient to produce simple HTML documents. For more
|
|
complex documents, HTML has tags for several types of lists, preformatted
|
|
sections, extended quotations, character formatting, and other items.
|
|
|
|
<H3><A NAME = "A1.4.1">Lists</A></H3>
|
|
<P>
|
|
HTML supports unnumbered, numbered, and definition lists.
|
|
|
|
<H4><A NAME = "A1.4.1.1">Unnumbered Lists</A></H4>
|
|
<P>
|
|
To make an unnumbered list,
|
|
|
|
<OL>
|
|
<LI>Start with an opening list <SAMP><UL></SAMP> tag.
|
|
<LI>Enter the <SAMP><LI></SAMP> tag followed by the individual
|
|
item. (No closing <SAMP></LI></SAMP> tag is needed.)
|
|
<LI>End with a closing list <SAMP></UL></SAMP> tag.
|
|
</OL>
|
|
|
|
<P>
|
|
Below an example two-item list:
|
|
|
|
<PRE>
|
|
<UL>
|
|
<LI> apples
|
|
<LI> bananas
|
|
</UL>
|
|
</PRE>
|
|
|
|
<P>
|
|
The output is:
|
|
|
|
<UL>
|
|
<LI>apples
|
|
<LI>bananas
|
|
</UL>
|
|
|
|
<P>
|
|
The <SAMP><LI></SAMP> items can contain multiple paragraphs.
|
|
Just separate the paragraphs with the <SAMP><P></SAMP> paragraph
|
|
tags.
|
|
|
|
<H4><A NAME = "A1.4.1.2">Numbered Lists</A></H4>
|
|
<P>
|
|
A numbered list (also called an ordered list, from which the tag name
|
|
derives) is identical to an unnumbered list, except it uses <SAMP><OL></SAMP>
|
|
instead of <SAMP><UL></SAMP>. The items are tagged using the
|
|
same <SAMP><LI></SAMP> tag. The following HTML code
|
|
|
|
<PRE>
|
|
<OL>
|
|
<LI> oranges
|
|
<LI> peaches
|
|
<LI> grapes
|
|
</OL>
|
|
</PRE>
|
|
|
|
<P>
|
|
produces this formatted output:
|
|
|
|
<OL>
|
|
<LI>oranges
|
|
<LI>peaches
|
|
<LI>grapes
|
|
</OL>
|
|
|
|
<H4><A NAME = "A1.4.1.3">Definition Lists </A></H4>
|
|
<P>
|
|
A definition list usually consists of alternating a term (abbreviated
|
|
as <SAMP>DT</SAMP>) and a definition (abbreviated as <SAMP>DD</SAMP>).
|
|
Web browsers generally format the definition on a new line.
|
|
|
|
<P>
|
|
The following is an example of a definition list:
|
|
|
|
<PRE>
|
|
<DL>
|
|
<DT> NCSA
|
|
<DD> NCSA, the National Center for Supercomputing Applications,
|
|
is located on the campus of the University of Illinois
|
|
at Urbana-Champaign. NCSA is one of the participants in the
|
|
National MetaCenter for Computational Science and Engineering.
|
|
<DT> Cornell Theory Center
|
|
<DD> CTC is located on the campus of Cornell University in Ithaca,
|
|
New York. CTC is another participant in the National MetaCenter
|
|
for Computational Science and Engineering.
|
|
</DL>
|
|
</PRE>
|
|
|
|
<P>
|
|
The output looks like:
|
|
|
|
<DL COMPACT>
|
|
<DT>NCSA
|
|
<DD>NCSA, the National Center for Supercomputing Applications, is located
|
|
on the campus of the University of Illinois at Urbana-Champaign.
|
|
NCSA is one of the participants in the National MetaCenter for
|
|
Computational Science and Engineering.
|
|
<DT>Cornell Theory Center
|
|
<DD>CTC is located on the campus of Cornell University in Ithaca, New
|
|
York. CTC is another participant in the National MetaCenter for
|
|
Computational Science and Engineering.
|
|
</DL>
|
|
|
|
<P>
|
|
The <SAMP><DT></SAMP> and<SAMP> <DD></SAMP> entries can
|
|
contain multiple paragraphs (separated by <SAMP><P></SAMP> paragraph
|
|
tags), lists, or other definition information.
|
|
|
|
<H4><A NAME = "A1.4.1.4">Nested Lists</A></H4>
|
|
<P>
|
|
Lists can be arbitrarily nested, although in practice you probably
|
|
should limit the nesting to three levels. You can also have a number
|
|
of paragraphs, each containing a nested list, in a single list item.
|
|
|
|
<P>
|
|
An example nested list:
|
|
|
|
<PRE>
|
|
<UL>
|
|
<LI> A few New England states:
|
|
<UL>
|
|
<LI> Vermont
|
|
<LI> New Hampshire
|
|
</UL>
|
|
<LI> One Midwestern state:
|
|
<UL>
|
|
<LI> Michigan
|
|
</UL>
|
|
</UL>
|
|
</PRE>
|
|
|
|
<P>
|
|
The nested list is displayed as
|
|
|
|
<UL>
|
|
<LI>A few New England states:
|
|
<UL>
|
|
<LI>Vermont
|
|
<LI>New Hampshire
|
|
</UL>
|
|
<LI>One Midwestern state:
|
|
<UL>
|
|
<LI>Michigan
|
|
</UL>
|
|
</UL>
|
|
|
|
<H3><A NAME = "A1.4.2">Preformatted Text</A></H3>
|
|
<P>
|
|
Use the<SAMP> <PRE></SAMP> tag (which stands for ``preformatted'')
|
|
to generate text in a fixed-width font and cause spaces, new lines,
|
|
and tabs to be significant. (That is, multiple spaces are displayed
|
|
as multiple spaces, and lines break in the same locations as in the
|
|
source HTML file.) This is useful for program listings. For example,
|
|
the following lines
|
|
|
|
<PRE>
|
|
<PRE>
|
|
#!/bin/csh
|
|
cd $SCR
|
|
cfs get mysrc.f:mycfsdir/mysrc.f
|
|
cfs get myinfile:mycfsdir/myinfile
|
|
fc -02 -o mya.out mysrc.f
|
|
mya.out
|
|
cfs save myoutfile:mycfsdir/myoutfile
|
|
rm *
|
|
</PRE>
|
|
</PRE>
|
|
|
|
<P>
|
|
display as
|
|
|
|
<PRE>
|
|
#!/bin/csh
|
|
cd $SCR
|
|
cfs get mysrc.f:mycfsdir/mysrc.f
|
|
cfs get myinfile:mycfsdir/myinfile
|
|
fc -02 -o mya.out mysrc.f
|
|
mya.out
|
|
cfs save myoutfile:mycfsdir/myoutfile
|
|
rm *
|
|
</PRE>
|
|
|
|
<P>
|
|
Hyperlinks can be used within <SAMP><PRE></SAMP> sections. You
|
|
should avoid using other HTML tags within <SAMP><PRE></SAMP>
|
|
sections, however.
|
|
|
|
<P>
|
|
Note that because <, >, and & have special meaning in HTML,
|
|
you have to use their escape sequences (<SAMP>&lt;</SAMP>, <SAMP>&gt;</SAMP>,
|
|
and <SAMP>&amp;</SAMP>, respectively) to enter these characters.
|
|
See the section <A HREF = "#A1.5.3">
|
|
Special Characters</A> for more information.
|
|
|
|
<H3><A NAME = "A1.4.3">Extended Quotations</A></H3>
|
|
<P>
|
|
Use the <SAMP><BLOCKQUOTE></SAMP> tag to include quotations in
|
|
a separate block on the screen. Most browsers generally indent to separate
|
|
it from surrounding text.
|
|
|
|
<P>
|
|
An example:
|
|
|
|
<PRE>
|
|
<BLOCKQUOTE>
|
|
I still have a dream. It is a dream deeply rooted in the
|
|
American dream. <P>
|
|
I have a dream that one day this nation will rise up and
|
|
live out the true meaning of its creed. We hold these truths
|
|
to be self-evident that all men are created equal. <P>
|
|
</BLOCKQUOTE>
|
|
</PRE>
|
|
|
|
<P>
|
|
The result is:
|
|
<BLOCKQUOTE>
|
|
I still have a dream. It is a dream deeply rooted in the American
|
|
dream.
|
|
|
|
<P>
|
|
I have a dream that one day this nation will rise up and live out
|
|
the true meaning of its creed. We hold these truths to be self-evident
|
|
that all men are created equal.
|
|
|
|
</BLOCKQUOTE>
|
|
|
|
<H3><A NAME = "A1.4.4">Addresses</A></H3>
|
|
<P>
|
|
The <SAMP><ADDRESS></SAMP> tag is generally used to specify the
|
|
author of a document and a means of contacting the author (e.g., an
|
|
email address). This is usually the last item in a file.
|
|
|
|
<P>
|
|
For example, the last line of the online version of this guide is
|
|
|
|
<PRE>
|
|
<ADDRESS>
|
|
A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
|
|
</ADDRESS>
|
|
</PRE>
|
|
|
|
<P>
|
|
The result is
|
|
<ADDRESS>A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu </ADDRESS>
|
|
|
|
<P>
|
|
<STRONG>NOTE:</STRONG> <SAMP><ADDRESS></SAMP> is <EM>not</EM>
|
|
used for postal addresses. See ``Forced Line Breaks'' on page 10 to
|
|
see how to format postal addresses.
|
|
|
|
<H2><A NAME = "A1.5">Character Formatting</A></H2>
|
|
<P>
|
|
You can code individual words or sentences with special styles. There
|
|
are two types of styles: logical and physical. <DFN>Logical styles</DFN>
|
|
tag text according to its meaning, while <DFN>physical styles</DFN>
|
|
specify the specific appearance of a section. For example, in the preceding
|
|
sentence, the words ``logical styles'' was tagged as a ``definition.''
|
|
The same effect (formatting those words in italics), could have been
|
|
achieved via a different tag that specifies merely ``put these words
|
|
in italics.''
|
|
|
|
<H3><A NAME = "A1.5.1">Physical Versus Logical: Use Logical Styles When Possible</A></H3>
|
|
<P>
|
|
If physical and logical styles produce the same result on the screen,
|
|
why are there both? We devolve, for a couple of paragraphs, into the
|
|
philosophy of SGML, which can be summed in a Zen-like mantra: ``Trust
|
|
your browser.''
|
|
|
|
<P>
|
|
In the ideal SGML universe, content is divorced from presentation.
|
|
Thus, SGML tags a level-one heading as a level-one heading, but does
|
|
not specify that the level-one heading should be, for instance, 24-point
|
|
bold Times centered on the top of a page. The advantage of this approach
|
|
(it's similar in concept to style sheets in many word processors) is
|
|
that if you decide to change level-one headings to be 20-point left-justified
|
|
Helvetica, all you have to do is change the definition of the level-one
|
|
heading in the presentation device (i.e., your World Wide Web browser).
|
|
|
|
<P>
|
|
The other advantage of logical tags is that they help enforce consistency
|
|
in your documents. It's easier to tag something as <SAMP><H1></SAMP>
|
|
than to remember that level-one headings are 24-point bold Times or
|
|
whatever. The same is true for character styles. For example, consider
|
|
the <SAMP><STRONG></SAMP> tag. Most browsers render it in bold
|
|
text. However, it is possible that a reader would prefer that these
|
|
sections be displayed in red instead. Logical styles offer this flexibility.
|
|
|
|
<H4><A NAME = "A1.5.1.1">Logical Styles</A></H4>
|
|
<DL COMPACT>
|
|
<DT><SAMP><DFN></SAMP>
|
|
<DD>for a word being defined. Typically displayed in italics. (<DFN>NCSA
|
|
</DFN><DFN>Mosaic</DFN> is a World Wide Web browser.)
|
|
<DT><SAMP><EM></SAMP>
|
|
<DD>for emphasis. Typically displayed in italics. (<EM>Watch out for
|
|
pick</EM><EM>pockets</EM>.)
|
|
<DT><SAMP><CITE></SAMP>
|
|
<DD>for titles of books, films, etc. Typically displayed in italics.
|
|
(<CITE>A </CITE><CITE>Beginner's Guide to HTML</CITE>)
|
|
<DT><SAMP><CODE></SAMP>
|
|
<DD>for snippets of computer code. Displayed in a fixed-width font.
|
|
(The <SAMP><stdio.h></SAMP> header file)
|
|
<DT> <SAMP><KBD></SAMP>
|
|
<DD>for user keyboard entry. Should be displayed in a bold fixed-width
|
|
font, but many browsers render it in the plain fixed-width font.
|
|
(Enter <KBD>passwd</KBD> to change your password.)
|
|
<DT><SAMP><SAMP></SAMP>
|
|
<DD>for computer status messages. Displayed in a fixed-width font.
|
|
(<SAMP>Segmentation fault: Core dumped.</SAMP>)
|
|
<DT><SAMP><STRONG></SAMP>
|
|
<DD>for strong emphasis. Typically displayed in bold. (<STRONG>Important</STRONG>)
|
|
|
|
<DT><SAMP><VAR></SAMP>
|
|
<DD>for a ``metasyntactic'' variable, where the user is to replace
|
|
the variable with a specific instance. Typically displayed in italics.
|
|
(<KBD>rm</KBD> <VAR>filename</VAR> deletes the file.)
|
|
</DL>
|
|
|
|
<H4><A NAME = "A1.5.1.2">Physical Styles</A></H4>
|
|
<DL COMPACT>
|
|
<DT><SAMP><B></SAMP>
|
|
<DD>bold text
|
|
<DT><SAMP><I></SAMP>
|
|
<DD>italic text
|
|
<DT><SAMP><TT></SAMP>
|
|
<DD>typewriter text, e.g. fixed-width font.
|
|
</DL>
|
|
|
|
<H3><A NAME = "A1.5.2">Using Character Tags</A></H3>
|
|
<P>
|
|
To apply a character style,
|
|
|
|
<OL>
|
|
<LI>Start with <SAMP><</SAMP><VAR>tag</VAR><SAMP>></SAMP>, where<SAMP>
|
|
</SAMP><VAR>tag</VAR> is the desired character formatting tag,
|
|
to indicate the beginning of the tagged text.
|
|
<LI>Enter the tagged text.
|
|
<LI>End the passage with <SAMP></</SAMP><VAR>tag</VAR><SAMP>></SAMP>.
|
|
</OL>
|
|
|
|
<H3><A NAME = "A1.5.3">Special Characters</A></H3>
|
|
<H4><A NAME = "A1.5.3.1">Escape Sequences</A></H4>
|
|
<P>
|
|
Four characters of the ASCII character set -- the left angle bracket
|
|
(<), the right angle bracket (>), the ampersand (&) and the
|
|
double quote (") -- have special meaning within HTML and therefore
|
|
cannot be used ``as is'' in text. (The angle brackets are used to indicate
|
|
the beginning and end of HTML tags, and the ampersand is used to indicate
|
|
the beginning of an escape sequence.)
|
|
|
|
<P>
|
|
To use one of these characters in an HTML document, you must enter
|
|
its <DFN>escape </DFN><DFN>sequence</DFN> instead:
|
|
|
|
<DL COMPACT>
|
|
<DT><SAMP>&lt;</SAMP>
|
|
<DD>the escape sequence for <
|
|
<DT><SAMP>&gt;</SAMP>
|
|
<DD>the escape sequence for >
|
|
<DT><SAMP>&amp;</SAMP>
|
|
<DD>the escape sequence for &
|
|
<DT><SAMP>&quot;</SAMP>
|
|
<DD>the escape sequence for "
|
|
</DL>
|
|
|
|
<P>
|
|
Additional escape sequences support accented characters. For example:
|
|
|
|
<DL COMPACT>
|
|
<DT><SAMP>&ouml;</SAMP>
|
|
<DD>the escape sequence for a lowercase o with an umlaut: ö
|
|
|
|
<DT><SAMP>&ntilde;</SAMP>
|
|
<DD>the escape sequence for a lowercase n with an tilde: ñ
|
|
<DT><SAMP>&Egrave;</SAMP>
|
|
<DD>the escape sequence for an uppercase E with a grave accent: È
|
|
|
|
</DL>
|
|
|
|
<P>
|
|
<A HREF = "http://www.w3.org/hypertext/WWW/MarkUp/ISOlat1.html"> A full
|
|
list of supported characters</A> is available.
|
|
|
|
<P>
|
|
<STRONG>NOTE:</STRONG> Unlike the rest of HTML, the escape sequences
|
|
are case sensitive. You cannot, for instance, use &LT; instead
|
|
of &lt;.
|
|
|
|
<H4><A NAME = "A1.5.3.2">Forced Line Breaks</A></H4>
|
|
<P>
|
|
The <SAMP><BR></SAMP> tag forces a line break with no extra space
|
|
between lines. (By contrast, most browsers format the <SAMP><P></SAMP>
|
|
paragraph tag with an additional blank line to more clearly indicate
|
|
the beginning the new paragraph.)
|
|
|
|
<P>
|
|
One use of <SAMP><BR></SAMP> is in formatting addresses:
|
|
|
|
<PRE>
|
|
National Center for Supercomputing Applications<BR>
|
|
605 East Springfield Avenue<BR>
|
|
Champaign, Illinois 61820-5518<BR>
|
|
</PRE>
|
|
|
|
<H4><A NAME = "A1.5.3.3">Horizontal Rules</A></H4>
|
|
<P>
|
|
The <SAMP><HR> tag </SAMP>produces a horizontal line the width
|
|
of the browser window.
|
|
|
|
<H2><A NAME = "A1.6">In-line Images</A></H2>
|
|
<P>
|
|
Most Web browsers can display in-line images (that is, images next
|
|
to text) that are in X Bitmap (XBM) or GIF format. Each image takes
|
|
time to process and slows down the initial display of the document,
|
|
so generally you should not include too many or overly large images.
|
|
|
|
<P>
|
|
To include an in-line image, use
|
|
|
|
<PRE>
|
|
<IMG SRC=<VAR>image_URL</VAR>>
|
|
</PRE>
|
|
|
|
<P>
|
|
where <VAR>image_URL</VAR> is the URL of the image file. The syntax
|
|
for <SAMP>IMG SRC </SAMP>URLs is identical to that used in an anchor
|
|
<SAMP>HREF</SAMP>. If the image file is a GIF file, then the filename
|
|
part of <VAR>image_URL </VAR><STRONG>must</STRONG> end with <SAMP>.gif</SAMP>.
|
|
Filenames of X Bitmap images must end with <SAMP>.xbm</SAMP>.
|
|
|
|
<P>
|
|
<IMG SRC = "Graphics/RandomPic.gif" ALT = "">By default the bottom
|
|
of an image is aligned with the text as shown in this paragraph.
|
|
|
|
<P>
|
|
<IMG SRC = "Graphics/RandomPic.gif" ALT = "" ALIGN = TOP>
|
|
Add the <SAMP>ALIGN=TOP</SAMP>
|
|
option if you want the browser to align adjacent text with the top
|
|
of the image as shown in this paragraph. The full in-line image tag
|
|
with the top alignment is:
|
|
|
|
<PRE>
|
|
<IMG ALIGN=top SRC=<VAR>image_URL</VAR>>
|
|
</PRE>
|
|
|
|
<P>
|
|
<IMG SRC = "Graphics/RandomPic.gif" ALT = "" ALIGN = MIDDLE>
|
|
<SAMP>ALIGN=MIDDLE</SAMP>
|
|
aligns the text with the center of the image.
|
|
|
|
<H3><A NAME = "A1.6.1">Alternate Text for Browsers That Can't Display Images</A></H3>
|
|
<P>
|
|
Some World Wide Web browsers, primarily those that run on VT100 terminals,
|
|
cannot display images. The <SAMP>ALT</SAMP> option allows you to specify
|
|
text to be displayed when an image cannot be. For example:
|
|
|
|
<PRE>
|
|
<IMG SRC = "UpArrow.gif" ALT = "Up">
|
|
</PRE>
|
|
|
|
<P>
|
|
where <SAMP>UpArrow.gif </SAMP>is the picture of an upward pointing
|
|
arrow. With NCSA Mosaic and other graphics-capable viewers, the user
|
|
sees the up arrow graphic. With a VT100 browser, such as lynx, the
|
|
user sees the word ``Up.''
|
|
|
|
<H2><A NAME = "A1.7">External Images, Sounds, and Animations</A></H2>
|
|
<P>
|
|
You may want to have an image open as a separate document when a user
|
|
activates a link on either a word or a smaller, in-line version of
|
|
the image included in your document. This is considered an external
|
|
image and is useful if you do not wish to slow down the loading of
|
|
the main document with large in-line images.
|
|
|
|
<P>
|
|
To include a reference to an external image, use
|
|
|
|
<PRE>
|
|
<A HREF = <VAR>image_URL</VAR>>link anchor</A>
|
|
</PRE>
|
|
|
|
<P>
|
|
Use the same syntax is for links to external animations and sounds.
|
|
The only difference is the file extension of the linked file. For example,
|
|
|
|
<P>
|
|
<SAMP><A HREF = "QuickTimeMovie.mov">link anchor</A></SAMP>
|
|
|
|
<P>
|
|
specifies a link to a QuickTime movie. Some common file types and their
|
|
extensions are:
|
|
|
|
<DL COMPACT>
|
|
<DT><STRONG>File Type</STRONG>
|
|
<DD><STRONG>Extension</STRONG>
|
|
<DT>Plain text
|
|
<DD><SAMP>.txt</SAMP>
|
|
<DT>HTML document
|
|
<DD><SAMP>.html</SAMP>
|
|
<DT>GIF image
|
|
<DD><SAMP>.gif</SAMP>
|
|
<DT>TIFF image
|
|
<DD><SAMP>.tiff</SAMP>
|
|
<DT>XBM bitmap image
|
|
<DD><SAMP>.xbm</SAMP>
|
|
<DT>JPEG image
|
|
<DD><SAMP>.jpg</SAMP> or <SAMP>.jpeg</SAMP>
|
|
<DT>PostScript file
|
|
<DD><SAMP>.ps</SAMP>
|
|
<DT>AIFF sound
|
|
<DD><SAMP>.aiff</SAMP>
|
|
<DT>AU sound
|
|
<DD><SAMP>.au</SAMP>
|
|
<DT>QuickTime movie
|
|
<DD><SAMP>.mov</SAMP>
|
|
<DT>MPEG movie
|
|
<DD><SAMP>.mpeg</SAMP> or <SAMP>.mpg</SAMP>
|
|
</DL>
|
|
|
|
<P>
|
|
Make sure your intended audience has the necessary viewers. Most UNIX
|
|
workstations, for instance, cannot view QuickTime movies.
|
|
|
|
<H2><A NAME = "A1.8">Troubleshooting</A></H2>
|
|
<H3><A NAME = "A1.8.1">Avoid Overlapping Tags</A></H3>
|
|
<P>
|
|
Consider this snippet of HTML:
|
|
|
|
<PRE>
|
|
<B>This is an example of <DFN>overlapping</B> HTML tags.</DFN>
|
|
</PRE>
|
|
|
|
<P>
|
|
The word ``overlapping'' is contained within both the <SAMP><B></SAMP>
|
|
and <SAMP><DFN></SAMP> tags. How does the browser format it?
|
|
You won't know until you look, and different browsers will likely react
|
|
differently. In general, avoid overlapping tags.
|
|
|
|
<H3><A NAME = "A1.8.2">Embed Anchors and Character Tags, But Nothing Else</A></H3>
|
|
<P>
|
|
It is acceptable to embed anchors within another HTML element:
|
|
|
|
<PRE>
|
|
<H1><A HREF = "Destination.html">My heading</A></H1>
|
|
</PRE>
|
|
|
|
<P>
|
|
<EM>Do not</EM> embed a heading or another HTML element within an anchor:
|
|
|
|
<PRE>
|
|
<A HREF = "Destination.html">
|
|
<H1>My heading</H1>
|
|
</A>
|
|
</PRE>
|
|
|
|
<P>
|
|
Although most browsers currently handle this example, it is forbidden
|
|
by the official HTML and HTML+ specifications, and will not work with
|
|
future browsers.
|
|
|
|
<P>
|
|
Character tags modify the appearance of other tags:
|
|
|
|
<PRE>
|
|
<UL><LI><B>A bold list item</B>
|
|
<UL>
|
|
<LI><I>An italic list item</I>
|
|
</UL>
|
|
</PRE>
|
|
|
|
<P>
|
|
However, avoid embedding other types of HTML element tags. For example,
|
|
it is tempting to embed a heading within a list, in order to make the
|
|
font size larger:
|
|
|
|
<PRE>
|
|
<UL><LI><H1>A large heading</H1>
|
|
<UL>
|
|
<LI><H2>Something slightly smaller</H2>
|
|
</UL>
|
|
</PRE>
|
|
|
|
<P>
|
|
Although some browsers, such as NCSA Mosaic for the X Window System,
|
|
format this construct quite nicely, it is unpredictable (because it
|
|
is undefined) what other browsers will do. For compatibility with all
|
|
browsers, avoid these kinds of constructs.
|
|
|
|
<P>
|
|
What's the difference between embedding a <SAMP><B></SAMP> within
|
|
a <SAMP><LI></SAMP> tag as opposed to embedding a <SAMP><H1></SAMP>
|
|
within a <SAMP><LI></SAMP>? This is again a question of SGML.
|
|
The semantic meaning of <SAMP><H1></SAMP> is that it's the main
|
|
heading of a document and that it should be followed by the content
|
|
of the document.Thus it doesn't make sense to find a <SAMP><H1></SAMP>
|
|
within a list.
|
|
|
|
<P>
|
|
Character formatting tags also are generally not additive. You might
|
|
expect that
|
|
|
|
<PRE>
|
|
<B><I>some text</I></B>
|
|
</PRE>
|
|
|
|
<P>
|
|
would produce bold-italic text. On some browsers it does; other browsers
|
|
interpret only the innermost tag (here, the italics).
|
|
|
|
<H3><A NAME = "A1.8.3">Check Your Links</A></H3>
|
|
<P>
|
|
When an <SAMP><IMG></SAMP> tag points at an image that does not
|
|
exist, a dummy image is substituted. When this happens, make sure that
|
|
the referenced image does in fact exist, that the hyperlink has the
|
|
correct information in the URL, and that the file permission is set
|
|
appropriately (world-readable).
|
|
|
|
<H2><A NAME = "A1.9">A Longer Example</A></H2>
|
|
<P>
|
|
Here is a longer example of an HTML document:
|
|
|
|
<PRE>
|
|
<HEAD>
|
|
<TITLE>A Longer Example</TITLE>
|
|
</HEAD>
|
|
<BODY>
|
|
<H1>A Longer Example</H1>
|
|
This is a simple HTML document. This is the first
|
|
paragraph. <P>
|
|
This is the second paragraph, which shows special effects. This is a
|
|
word in <I>italics</I>. This is a word in <B>bold</B>.
|
|
Here is an in-lined GIF image: <IMG SRC = "myimage.gif">.
|
|
<P>
|
|
This is the third paragraph, which demonstrates links. Here is
|
|
a hypertext link from the word <A HREF = "subdir/myfile.html">foo</A>
|
|
to a document called "subdir/myfile.html". (If you
|
|
try to follow this link, you will get an error screen.) <P>
|
|
<H2>A second-level header</H2>
|
|
Here is a section of text that should display as a
|
|
fixed-width font: <P>
|
|
<PRE>
|
|
On the stiff twig up there
|
|
Hunches a wet black rook
|
|
Arranging and rearranging its feathers in the rain ...
|
|
</PRE>
|
|
This is a unordered list with two items: <P>
|
|
<UL>
|
|
<LI> cranberries
|
|
<LI> blueberries
|
|
</UL>
|
|
This is the end of my example document. <P>
|
|
<ADDRESS>Me (me@mycomputer.univ.edu)</ADDRESS>
|
|
</BODY>
|
|
</PRE>
|
|
|
|
<A HREF=LongerExample.html>Click here</A> to see the formatted version.
|
|
|
|
<P>
|
|
In addition to tags already discussed, this example also uses the <SAMP><HEAD>
|
|
... </HEAD> </SAMP>and <SAMP><BODY> ... </BODY></SAMP>
|
|
tags, which separate the document into introductory information about
|
|
the document and the main text of the document. These tags don't change
|
|
the appearance of the formatted document at all, but are useful for
|
|
several purposes (for example, NCSA Mosaic for Macintosh 2.0, for example,
|
|
allows you to browse just the header portion of document before deciding
|
|
whether to download the rest), and it is recommended that you use these
|
|
tags.
|
|
|
|
<H2><A NAME = "A1.10">For More Information</A></H2>
|
|
<P>
|
|
This guide is only an introduction to HTML and not a comprehensive
|
|
reference. Below are additional sources of information.
|
|
|
|
<H3><A NAME = "A1.10.1">Fill-out Forms</A></H3>
|
|
<P>
|
|
One major feature not discussed here is fill-out forms, which allows
|
|
users to return information to the World Wide Web server. For information
|
|
on fill-out forms, look at this
|
|
<A HREF = "/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html"> Fill-out
|
|
Forms Overview</A>
|
|
|
|
<H3><A NAME = "A1.10.2">Style Guides</A></H3>
|
|
<P>
|
|
The following offer advice on how to write ``good'' HTML:
|
|
|
|
<UL>
|
|
<LI><A HREF = "http://www.willamette.edu/html-composition/strict-html.html">
|
|
<CITE>Composing Good HTML</CITE></A>
|
|
<LI>
|
|
<A HREF = "http://www.w3.org/hypertext/WWW/Provider/Style/Introduction.html">
|
|
CERN's style guide for online hypertext</A>
|
|
</UL>
|
|
|
|
<H3><A NAME = "A1.10.3">Other Introductory Documents</A></H3>
|
|
These cover similar information as this guide:
|
|
<UL>
|
|
<LI><A HREF = "http://www.ucc.ie/info/net/htmldoc.html">
|
|
<CITE>How to Write HTML Files</CITE></A>
|
|
<LI><A HREF = "http://melmac.corp.harris.com/about_html.html">
|
|
<CITE>Introduction to HTML</CITE></A>
|
|
</UL>
|
|
|
|
<H3><A NAME = "A1.10.4">Additional References</A></H3>
|
|
<UL>
|
|
<LI><A HREF = "http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html">
|
|
<CITE>The HTML Quick Reference Guide</CITE></A>,
|
|
which provides a comprehensive listing of HTML codes
|
|
<LI><A HREF = "http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html">
|
|
The official HTML specification</A>
|
|
<LI><A HREF = "http://www.w3.org/hypertext/WWW/MarkUp/SGML.html">A
|
|
description of SGML</A>, the Standard Generalized Markup Language
|
|
<LI><A HREF
|
|
= "http://www.ietf.cnri.reston.va.us/html.charters/html-charter.html">
|
|
<cite>The HTML Working Group of the IETF</cite></A>.
|
|
</UL>
|
|
<HR>
|
|
<ADDRESS>
|
|
National Center for Supercomputing Applications / pubs@ncsa.uiuc.edu
|
|
</ADDRESS>
|
|
</BODY>
|
|
|