diff options
Diffstat (limited to 'contrib/ntp/html/htmlprimer.htm')
| -rw-r--r-- | contrib/ntp/html/htmlprimer.htm | 1198 |
1 files changed, 1198 insertions, 0 deletions
diff --git a/contrib/ntp/html/htmlprimer.htm b/contrib/ntp/html/htmlprimer.htm new file mode 100644 index 0000000..898a583 --- /dev/null +++ b/contrib/ntp/html/htmlprimer.htm @@ -0,0 +1,1198 @@ +<!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> + |
