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