 	A Beginner's Guide to HTML  	---------------------------  L        (URL: http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html)         O                                                      A Beginner's Guide to HTML 4                           A BEGINNER'S GUIDE TO HTML'                                         M    This is a primer for producing documents in HTML, the markup language used     by the World Wide Web.             Acronym Expansion[1]       '       What This Primer Doesn't Cover[2]                Creating HTML Documents[3]       "       The Minimal HTML Document[4]              Basic Markup Tags[5]              Titles[6]               Headings[7]               Paragraphs[8]        #       Linking to Other Documents[9]        2       Relative Links Versus Absolute Pathnames[10]       "       Uniform Resource Locator[11]       9       Anchors to Specific Sections in Other Documents[12]        L       Anchors to Specific Sections Within           the Current Document[13]                      Additional Markup Tags[14]              Lists[15]               Unnumbered Lists[16]              Numbered Lists[17]              Definition Lists[18]              Nested Lists[19]              Preformatted Text[20]               Extended Quotes[21]               Addresses[22]               Character Formatting[23]       K       Physical Versus Logical:           Use Logical Tags When Possible[24]                      Logical Styles[25]              Physical Styles[26]               Using Character Tags[27]              Special Characters[28]              Escape Sequences[29]              Forced Line Breaks[30]              Horizontal Rules[31]              In-line Images[32]       H       Alternate Text for Viewers           That Can't Display Images[33]       1       External Images, Sounds, and Animations[34]               Troubleshooting[35]                Avoid Overlapping Tags[36]       I       Embed Anchors and Character Tags,         But Not Anything Else[37]               Check Your Links[38]              A Longer Example[39]              For More Information[40]              Fill-out Forms[41]              Style Guides[42]       &       Other Introductory Documents[43]              Additional References[44]         Acronym Expansion   <   WWW                    World Wide Web (or Web, for short).                           L   SGML                   Standard Generalized Markup Language  --  this is aF                          standard for     describing markup languages.                              DTD                            I                          Document Type Definition  --  this is a specific A                          markup language,     written using SGML.                               HTML                           N                          HyperText Markup Language  --  HTML is a SGML DTD. InL                          practical     terms, HTML is a collection of stylesO                          (indicated by markup tags)     that define the various A                          components of a World Wide Web document.                             What This Primer Doesn't Cover  %    This primer assumes that you have:      N       at least a passing knowledge of how to use NCSA Mosaic or some     other       Web browser        M       a general understanding of how Web servers and client browsers     work        E       access to a Web server for which you would like to produce HTML H       documents, or that you wish to produce HTML documents for personal	       use         Creating HTML Documents   K    HTML documents are in plain (also known as ASCII) text format and can be O    created using any text editor (e.g., Emacs or vi on UNIX machines). A couple M    of Web browsers (tkWWW for X Window System machines and CERN's Web browser D    for NeXT computers) include rudimentary HTML editors in a WYSIWYGG    environment. There are also some WYSIWIG editors available now (e.g. N    HotMetal for Sun Sparcstations, HTML Edit for Macintoshes). You may wish toA    try one of them first before delving into the details of HTML.      J        You can preview a document in progress with NCSA Mosaic (and     soJ      me other Web browsers). Open it with the Open Local     command under       the File menu.       H            After you edit the source HTML file, save the changes. ReturnJ         to NCSA Mosaic and Reload the document. The     changes are reflec"      ted in the on-screen display.          THE MINIMAL HTML DOCUMENT    (    Here is a bare-bones example of HTML:     ,     <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>  >    Click here[45] to see the formatted version of the example.     M    HTML uses markup tags to tell the Web browser how to display the text. The     above example uses:     N       the <TITLE> tag (and corresponding </TITLE>    tag), which specifies the       title of the document        3       the <H1> header tag (and corresponding </H1>)        %       the <P> paragraph-separator tag        L    HTML tags consist of a left angle bracket (<), (a ``less than'' symbol toM    mathematicians), followed by name of the tag and closed by a right angular L    bracket (>). Tags are usually paired, e.g. <H1> and </H1>. The ending tagO    looks just like the starting tag except a slash (/) precedes the text within O    the brackets. In the example, <H1> tells the Web browser to start formatting L    a level-one heading; </H1>tells the browser that the heading is complete.     L    The primary exception to the pairing rule is the <P>tag. There is no such    thing as </P>.      G    NOTE: HTML is not case sensitive. <title>is equivalent to <TITLE> or     <TiTlE>.      O    Not all tags are supported by all World Wide Web browsers. If a browser does )    not support a tag, it just ignores it.         BASIC MARKUP TAGS    	     Title      J    Every HTML document should have a title. A title is generally displayedB    separately from the document and is used primarily for documentN    identification in other contexts (e.g., a WAIS search). Choose about half a4    dozen words that describe the document's purpose.     J        In the X Window System and Microsoft Windows versions of NCSA     MI      osaic, the Document Title field is at the     top of the screen just J      below the pulldown menus. In NCSA     Mosaic for Macintosh, text tagg2      ed as <TITLE>    appears as the window title.            Headings     O    HTML has six levels of headings, numbered 1 through 6, with 1 being the most N    prominent. Headings are displayed in larger and/or bolder fonts than normalK    body text. The first heading in each document should be tagged <H1>. The      syntax of the heading tag is:         <Hy>Text of heading</Hy >     K    where y is a number between 1 and 6 specifying the level of the heading.      H    For example, the coding for the ``Headings'' section heading above is          <H3>Headings</H3>           Title versus first heading       F    In many documents, the first heading is identical to the title. ForN    multipart documents, the text of the first heading should be suitable for aN    reader who is already browsing related information (e.g., a chapter title),M    while the title tag should identify the document in a wider context (e.g., G    include both the book title and the chapter title, although this can !    sometimes become overly long).           Paragraphs     K    Unlike documents in most word processors, carriage returns in HTML files J    aren't significant. Word wrapping can occur at any point in your sourceJ    file, and multiple spaces are collapsed into a single space. (There areJ    couple of exceptions; space following a <P>or <Hy> tag, for example, isJ    ignored.) Notice that in the bare-bones example, the first paragraph is    coded as           Welcome to HTML.$     This is the first paragraph. <P>  I    In the source file, there is a line break between the sentences. A Web J    browser ignores this line break and starts a new paragraph only when it    reaches a <P> tag.      L    Important: You must separate paragraphs with <P>. The browser ignores anyN    indentations or blank lines in the source text. HTML relies almost entirelyI    on the tags for formatting instructions, and without the <P> tags, the I    document becomes one large paragraph. (The exception is text tagged as K    ``preformatted,'' which is explained below.) For instance, the following G    would produce identical output as the first bare-bones HTML example:      ?     <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>   H    However, to preserve readability in HTML files, headings should be onH    separate lines, and paragraphs should be separated by blank lines (in    addition to the <P> tags).      J        NCSA Mosaic handles <P> by ending the current paragraph     and ins      erting a blank line.        G    In HTML+, a successor to HTML currently in development, <P>becomes a D    ``container'' of text, just as the text of a level-one heading is&    ``contained'' within<H1> ... </H1>:          <P> !     This is a paragraph in HTML+.      </P>  O    The difference is that the </P> closing tag can always be omitted. (That is, N    if a browser sees a <P>, it knows that there must be an implied </P> to end=    the previous paragraph.) In other words, in HTML+, <P>is a !    beginning-of-paragraph marker.      N    The advantage of this change is that you will be able to specify formattingO    options for a paragraph. For example, in HTML+, you will be able to center a     paragraph by coding          <P ALIGN=CENTER>H     This is a centered paragraph. This is HTML+, so you can't do it yet.  O    This change won't effect any documents you write now, and they will continue -    to look just the same with HTML+ browsers.         LINKING TO OTHER DOCUMENTS   N    The chief power of HTML comes from its ability to link regions of text (andI    also images) to another document. The browser highlights these regions M    (usually with color and/or underlines) to indicate that they are hypertext 9    links (often shortened to hyperlinks or simply links).      J    HTML's single hypertext-related tag is <A>, which stands for anchor. To&    include an anchor in your document:     C       Start the anchor with <A . (There's a space after     the A.)        L       Specify the document that's being pointed to by entering the parameterF        HREF=_filename_    followed by a closing right angle bracket: >       I       Enter the text that will serve as the hypertext link in the current        document.        (       Enter the ending anchor tag: </A>.       )    Here is an sample hypertext reference:      '     <A HREF=_MaineStats.html_>Maine</A>   D    This entry makes the word ``Maine'' the hyperlink to the documentM    MaineStats.html, which is in the same directory as the first document. You H    can link to documents in other directories by specifying the relativeO    pathfrom the current document to the linked document. For example, a link to J    a file NJStats.html located in the subdirectory AtlanticStateswould be:     8     <A HREF=_AtlanticStates/NJStats.html_>New Jersey</A>  M    These are called relative links. You can also use the absolute pathname of @    the file if you wish. Pathnames use the standard UNIX syntax.     ,     Relative Links Versus Absolute Pathnames     5    In general, you should use relative links, because             You have less to type.       K       It's easier to move a group of documents to another location, because 2       the relative path names will still be valid.       I    However, use absolute pathnames when linking to documents that are not O    directly related. For example, consider a group of documents that comprise a J    user manual. Links within this group should be relative links. Links toL    other documents (perhaps a reference to related software) should use fullN    path names. This way, if you move the user manual to a different directory,.    none of the links would have to be updated.          Uniform Resource Locator     J    The World Wide Web uses Uniform Resource Locators (URLs) to specify theJ    location of files on other servers. A URL includes the type of resourceJ    being accessed (e.g., gopher, WAIS), the address of the server, and the'    location of the file. The syntax is:      ,    scheme://host.domain[:port]/path/filename         where scheme is one of         file                           O                          a file on your local system, or a file on an anonymous #                          FTP server                            :   http                   a file on a World Wide Web server                           2   gopher                 a file on a Gopher server                           0   WAIS                   a file on a WAIS server                           ,   news                   an Usenet newsgroup                           ?   telnet                 a connection to a Telnet-based service                            M    The port number can generally be omitted. (That means unless someone tells      you otherwise, leave it out.)     L    For example, to include a link to this primer in your document, you would    use     N     <A HREF = _http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html_>'     NCSA's Beginner's Guide to HTML</A>   N    This would make the text ``NCSA's Beginner's Guide to HTML'' a hyperlink to    this document.      (    For more information on URLs, look at     N           WWW Names and Addresses, URIs, URLs, URNs[46], written     by people
       at CERN        M           A Beginner's Guide to URLs[47], located on the NCSA Mosaic     Help 
       menu       1     Links to Specific Sections in Other Documents      J    Anchors can also be used to move to a particular section in a document.K    Suppose you wish to set a link from document A and a specific section in J    document B. (Call this file documentB.html.) First you need to set up aE    named anchor in document B. For example, to set up an anchor named '    ``Jabberwocky'' to document B, enter      0     Here's <A NAME = _Jabberwocky_>some text</a>  M    Now when you create the link in document A, include not only the filename, ;    but also the named anchor, separated by a hash mark (#).      M     This is my <A HREF = _documentB.html#Jabberwocky_>link</A> to document B.   O    Now clicking on the word ``link'' in document A sends the reader directly to )    the words ``some text'' in document B.      :     Links to Specific Sections Within the Current Document     D    The technique is exactly the same except the filename is omitted.     K    For example, to link to the Jabberwocky anchor from within the same file     (Document B), use     N     This is <A HREF = _#Jabberwocky_>Jabberwocky link</A> from within Document B.   Additional Markup Tags  I    The preceding is sufficient to produce simple HTML documents. For more L    complex documents, HTML has tags for several types of lists, preformattedH    sections, extended quotations, character formatting, and other items.        LISTS    <    HTML supports unnumbered, numbered, and definition lists.          Unnumbered Lists         To make an unnumbered list,     *       Start with an opening list <UL> tag.       O       Enter the <LI> tag followed by the individual     item. (No closing </LI>        tag is needed.)        (       End with a closing list </UL> tag.       "    Below an example two-item list:          <UL>     <LI> apples      <LI> bananas	     </UL>       The output is:             apples       
       bananas        O    The <LI> items can contain multiple paragraphs. Just separate the paragraphs     with the <P> paragraph tags.           Numbered Lists     H    A numbered list (also called an ordered list, from which the tag nameM    derives) is identical to an unnumbered list, except it uses <OL>instead of N    <UL>. The items are tagged using the same <LI> tag. The following HTML code          <OL>     <LI> oranges     <LI> peaches     <LI> grapes 	     </OL>   "    produces this formatted output:     
       oranges        
       peaches               grapes            Definition Lists     O    A definition list usually consists of alternating a term (abbreviated as DT) J    and a definition (abbreviated as DD). Web browsers generally format the    definition on a new line.     4    The following is an example of a definition list:          <DL>
     <DT> NCSA C     <DD> NCSA, the National Center for Supercomputing Applications, ?          is located on the campus of the University of Illinois D          at Urbana-Champaign. NCSA is one of the participants in theG          National MetaCenter for Computational Science and Engineering.      <DT> Cornell Theory CenterF     <DD> CTC is located on the campus of Cornell University in Ithaca,H          New York. CTC is another participant in the National MetaCenter3          for Computational Science and Engineering. 	     </DL>       The output looks like:      E   NCSA                   NCSA, the National Center for Supercomputing J                          Applications, is located     on the campus of theM                          University of Illinois at Urbana-Champaign.     NCSA N                          is one of the participants in the National MetaCenterG                          for     Computational Science and Engineering.                               Cornell Theory Center N                          CTC is located on the campus of Cornell University inL                          Ithaca, New     York. CTC is another participant inN                          the National MetaCenter for     Computational Science)                          and Engineering.                            N    The <DT> and <DD> entries can contain multiple paragraphs (separated by <P>;    paragraph tags), lists, or other definition information.           Nested Lists     L    Lists can be arbitrarily nested, although in practice you probably shouldO    limit the nesting to three levels. You can also have a number of paragraphs, 8    each containing a nested list, in a single list item.          An example nested list:           <UL>"     <LI> A few New England states:         <UL>         <LI> Vermont         <LI> New Hampshire
         </UL>      <LI> One Midwestern state:         <UL>         <LI> Michigan 
         </UL> 	     </UL>   "    The nested list is displayed as            A few New England states:        
       Vermont               New Hampshire               One Midwestern state:               Michigan          PREFORMATTED TEXT    N    Use the <PRE> tag (which stands for ``preformatted'') to generate text in aL    fixed-width font and cause spaces, new lines, and tabs to be significant.N    (That is, multiple spaces are displayed as multiple spaces, and lines breakH    in the same locations as in the source HTML file.) This is useful for5    program listings. For example, the following lines      	     <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>  
    display as             #!/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 *  M    Hyperlinks can be used within <PRE> sections. You should avoid using other +    HTML tags within <PRE>sections, however.      N    Note that because <, >, and & have special meaning in HTML, you have to useN    their escape sequences (&lt;, &gt;, and &amp;, respectively) to enter theseK    characters. See the section Special Characters[48] for more information.         EXTENDED QUOTATIONS    L    Use the <BLOCKQUOTE> tag to include quotations in a separate block on theO    screen. Most browsers generally indent to separate it from surrounding text.          An example:          <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>       The result is:      H        I still have a dream. It is a dream deeply rooted in the American         dream.       J            I have a dream that one day this nation will rise up and live oJ      ut     the true meaning of its creed. We hold these truths to be self1      -evident     that all men are created equal.           ADDRESSES    N    The <ADDRESS> tag is generally used to specify the author of a document andM    a means of contacting the author (e.g., an email address). This is usually     the last item in a file.      D    For example, the last line of the online version of this guide is     
     <ADDRESS> :     A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu     </ADDRESS>      The result is     O                          A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu O                                                                                 N    NOTE: <ADDRESS> is notused for postal addresses. See ``Forced Line Breaks''4    on page 10 to see how to format postal addresses.      Character Formatting  L    You can code individual words or sentences with special styles. There areN    two types of styles: logical and physical. Logical stylestag text accordingL    to its meaning, while physical stylesspecify the specific appearance of aG    section. For example, in the preceding sentence, the words ``logical M    styles'' was tagged as a ``definition.'' The same effect (formatting those G    words in italics), could have been achieved via a different tag that 3    specifies merely ``put these words in italics.''      ;   PHYSICAL VERSUS LOGICAL: USE LOGICAL STYLES WHEN POSSIBLE    L    If physical and logical styles produce the same result on the screen, whyN    are there both? We devolve, for a couple of paragraphs, into the philosophyM    of SGML, which can be summed in a Zen-like mantra: ``Trust your browser.''      K    In the ideal SGML universe, content is divorced from presentation. Thus, M    SGML tags a level-one heading as a level-one heading, but does not specify J    that the level-one heading should be, for instance, 24-point bold TimesN    centered on the top of a page. The advantage of this approach (it's similarO    in concept to style sheets in many word processors) is that if you decide to M    change level-one headings to be 20-point left-justified Helvetica, all you F    have to do is change the definition of the level-one heading in the;    presentation device (i.e., your World Wide Web browser).      O    The other advantage of logical tags is that they help enforce consistency in L    your documents. It's easier to tag something as <H1>than to remember thatO    level-one headings are 24-point bold Times or whatever. The same is true for J    character styles. For example, consider the <STRONG> tag. Most browsersM    render it in bold text. However, it is possible that a reader would prefer M    that these sections be displayed in red instead. Logical styles offer this     flexibility.           Logical Styles     I   <DFN>                  for a word being defined. Typically displayed in F                          italics. (NCSA     Mosaic is a World Wide Web"                          browser.)                           M   <EM>                   for emphasis. Typically displayed in italics. (Watch 2                          out for     pickpockets.)                           M   <CITE>                 for titles of books, films, etc. Typically displayed E                          in italics.     (A Beginner's Guide to HTML)                            F   <CODE>                 for snippets of computer code. Displayed in aJ                          fixed-width font.     (The <stdio.h> header file)                           O    <KBD>                 for user keyboard entry. Should be displayed in a bold M                          fixed-width     font, but many browsers render it in I                          the plain fixed-width font.     (Enter passwd to /                          change your password.)                            E   <SAMP>                 for computer status messages. Displayed in a H                          fixed-width font.     (Segmentation fault: Core!                          dumped.)                            J   <STRONG>               for strong emphasis. Typically displayed in bold.$                          (Important)                           O   <VAR>                  for a ``metasyntactic'' variable, where the user is to K                          replace     the variable with a specific instance. I                          Typically displayed in italics.     (rm filename +                          deletes the file.)                                 Physical Styles      "   <B>                    bold text                           $   <I>                    italic text                           @   <TT>                   typewriter text, e.g. fixed-width font.                              USING CHARACTER TAGS       To apply a character style,     M       Start with <tag>, where    tag is the desired character formatting tag, 5         to indicate the beginning of the tagged text.               Enter the tagged text.       "       End the passage with </tag>.          SPECIAL CHARACTERS        Escape Sequences     L    Four characters of the ASCII character set -- the left angle bracket (<),M    the right angle bracket (>), the ampersand (&) and the double quote (_) -- M    have special meaning within HTML and therefore cannot be used ``as is'' in O    text. (The angle brackets are used to indicate the beginning and end of HTML I    tags, and the ampersand is used to indicate the beginning of an escape 
    sequence.)      I    To use one of these characters in an HTML document, you must enter its     escape sequence instead:      2   &lt;                   the escape sequence for <                           2   &gt;                   the escape sequence for >                           2   &amp;                  the escape sequence for &                           2   &quot;                 the escape sequence for _                           H    Additional escape sequences support accented characters. For example:     N   &ouml;                 the escape sequence for a lowercase o with an umlaut:                          v                           O   &ntilde;               the escape sequence for a lowercase n with an tilde: q                                                       L   &Egrave;               the escape sequence for an uppercase E with a grave"                          accent: H                           B     A full  list of supported characters[49] can be found at CERN.     N    NOTE: Unlike the rest of HTML, the escape sequences are case sensitive. You2    cannot, for instance, use &LT; instead of &lt;.          Forced Line Breaks     J    The <BR> tag forces a line break with no extra space between lines. (ByO    contrast, most browsers format the <P>paragraph tag with an additional blank B    line to more clearly indicate the beginning the new paragraph.)     .    One use of <BR> is in formatting addresses:     7     National Center for Supercomputing Applications<BR> #     605 East Springfield Avenue<BR> &     Champaign, Illinois 61820-5518<BR>       Horizontal Rules     K    The <HR> tag produces a horizontal line the width of the browser window.       In-line Images  N    Most Web browsers can display in-line images (that is, images next to text)M    that are in X Bitmap (XBM) or GIF format. Each image takes time to process N    and slows down the initial display of the document, so generally you should/    not include too many or overly large images.      #    To include an in-line image, use           <IMG SRC=image_URL>   O    where image_URL is the URL of the image file. The syntax for IMG SRC URLs is M    identical to that used in an anchor HREF. If the image file is a GIF file, I    then the filename part of image_URL must end with .gif. Filenames of X $    Bitmap images must end with .xbm.     N    By default the bottom of an image is aligned with the text as shown in this
    paragraph.      N    Add the ALIGN=TOPoption if you want the browser to align adjacent text withN    the top of the image as shown in this paragraph. The full in-line image tag    with the top alignment is:      !     <IMG ALIGN=top SRC=image_URL>   <    ALIGN=MIDDLEaligns the text with the center of the image.     7   ALTERNATE TEXT FOR BROWSERS THAT CAN'T DISPLAY IMAGES    M    Some World Wide Web browsers, primarily those that run on VT100 terminals, I    cannot display images. The ALT option allows you to specify text to be 2    displayed when an image cannot be. For example:     (     <IMG SRC = _UpArrow.gif_ ALT = _Up_>  J    where UpArrow.gif is the picture of an upward pointing arrow. With NCSAH    Mosaic and other graphics-capable viewers, the user sees the up arrowN    graphic. With a VT100 browser, such as lynx, the user sees the word ``Up.''     ' External Images, Sounds, and Animations   H    You may want to have an image open as a separate document when a userO    activates a link on either a word or a smaller, in-line version of the image I    included in your document. This is considered an external image and is O    useful if you do not wish to slow down the loading of the main document with     large in-line images.     3    To include a reference to an external image, use      '     <A HREF = image_URL>link anchor</A>   O    Use the same syntax is for links to external animations and sounds. The only D    difference is the file extension of the linked file. For example,     1    <A HREF = _QuickTimeMovie.mov_>link anchor</A>      J    specifies a link to a QuickTime movie. Some common file types and their    extensions are:     "   File Type              Extension                              Plain text             .txt                               HTML document          .html                              GIF image              .gif                               TIFF image             .tiff                              XBM bitmap image       .xbm                            &   JPEG image             .jpg or .jpeg                              PostScript file        .ps                              AIFF sound             .aiff                              AU sound               .au                              QuickTime movie        .mov                            &   MPEG movie             .mpeg or .mpg                           H    Make sure your intended audience has the necessary viewers. Most UNIX<    workstations, for instance, cannot view QuickTime movies.      Troubleshooting      AVOID OVERLAPPING TAGS   !    Consider this snippet of HTML:      B     <B>This is an example of <DFN>overlapping</B> HTML tags.</DFN>  O    The word ``overlapping'' is contained within both the <B>and <DFN> tags. How K    does the browser format it? You won't know until you look, and different N    browsers will likely react differently. In general, avoid overlapping tags.     4   EMBED ANCHORS AND CHARACTER TAGS, BUT NOTHING ELSE   A    It is acceptable to embed anchors within another HTML element:      8     <H1><A HREF = _Destination.html_>My heading</A></H1>  C    Do not embed a heading or another HTML element within an anchor:      !     <A HREF = _Destination.html_>      <H1>My heading</H1>      </A>  O    Although most browsers currently handle this example, it is forbidden by the H    official HTML and HTML+ specifications, and will not work with future    browsers.     6    Character tags modify the appearance of other tags:     #     <UL><LI><B>A bold list item</B>          <UL>&         <LI><I>An italic list item</I>	     </UL>   M    However, avoid embedding other types of HTML element tags. For example, it O    is tempting to embed a heading within a list, in order to make the font size 
    larger:     $     <UL><LI><H1>A large heading</H1>         <UL>/         <LI><H2>Something slightly smaller</H2> 	     </UL>   N    Although some browsers, such as NCSA Mosaic for the X Window System, formatM    this construct quite nicely, it is unpredictable (because it is undefined) J    what other browsers will do. For compatibility with all browsers, avoid    these kinds of constructs.      M    What's the difference between embedding a <B> within a <LI> tag as opposed J    to embedding a <H1>within a <LI>? This is again a question of SGML. TheK    semantic meaning of <H1> is that it's the main heading of a document and L    that it should be followed by the content of the document.Thus it doesn't*    make sense to find a <H1>within a list.     N    Character formatting tags also are generally not additive. You might expect    that           <B><I>some text</I></B>   K    would produce bold-italic text. On some browsers it does; other browsers 8    interpret only the innermost tag (here, the italics).        CHECK YOUR LINKS   M    When an <IMG> tag points at an image that does not exist, a dummy image is N    substituted. When this happens, make sure that the referenced image does inM    fact exist, that the hyperlink has the correct information in the URL, and B    that the file permission is set appropriately (world-readable).      A Longer Example  0    Here is a longer example of an HTML document:     
     <HEAD>#     <TITLE>A Longer Example</TITLE>      </HEAD> 
     <BODY>     <H1>A Longer Example</H1> 5     This is a simple HTML document. This is the first      paragraph. <P>I     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> C     This is the third paragraph, which demonstrates links.  Here is I     a hypertext link from the word <A HREF = _subdir/myfile.html_>foo</A> 6     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>6     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>0     This is a unordered list with two items: <P>     <UL>     <LI> cranberries     <LI> blueberries	     </UL> /     This is the end of my example document. <P> 2     <ADDRESS>Me (me@mycomputer.univ.edu)</ADDRESS>     </BODY>   /    Click here[50] to see the formatted version.      O    In addition to tags already discussed, this example also uses the <HEAD> ... G    </HEAD> and <BODY> ... </BODY>tags, which separate the document into G    introductory information about the document and the main text of the M    document. These tags don't change the appearance of the formatted document L    at all, but are useful for several purposes (for example, NCSA Mosaic forN    Macintosh 2.0, for example, allows you to browse just the header portion ofD    document before deciding whether to download the rest), and it is'    recommended that you use these tags.       For More Information  E    This guide is only an introduction to HTML and not a comprehensive :    reference. Below are additional sources of information.        FILL-OUT FORMS   M    One major feature not discussed here is fill-out forms, which allows users I    to return information to the World Wide Web server. For information on <    fill-out forms, look at this  Fill-out Forms Overview[51]        STYLE GUIDES   <    The following offer advice on how to write ``good'' HTML:     !           Composing Good HTML[52]        2           CERN's style guide for online hypert[53]          OTHER INTRODUCTORY DOCUMENTS   1    These cover similar information as this guide:      %           How to Write HTML Files[54]        "           Introduction to HTML[55]          ADDITIONAL REFERENCES    C           The HTML Quick Reference Guide[56],      which provides a )       comprehensive listing of HTML codes        -           The official HTML specification[57]        N       A      description of SGML[58], the Standard Generalized Markup Language       N           Dan Connolly's HTML Design Notebook[59].      Dan Connolly is one of       the originators of HTML.            &    ___________________________________     O            National Center for Supercomputing Applications / pubs@ncsa.uiuc.edu O                                                                                        % *** References from this document *** F [1] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.1F [2] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.2F [3] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3H [4] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.1H [5] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.2J [6] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.2.1J [7] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.2.2J [8] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.2.3H [9] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.3K [10] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.3.1 K [11] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.3.2 K [12] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.3.3 K [13] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.3.4 G [14] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.4 I [15] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.4.1 K [16] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.4.1.1 K [17] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.4.1.2 K [18] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.4.1.3 K [19] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.4.1.4 I [20] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.4.2 I [21] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.4.3 I [22] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.4.4 G [23] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5 I [24] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5.1 K [25] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5.1.1 K [26] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5.1.2 I [27] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5.2 I [28] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5.3 K [29] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5.3.1 K [30] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5.3.2 K [31] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5.3.3 G [32] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.6 I [33] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.6.1 G [34] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.7 G [35] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.8 I [36] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.8.1 I [37] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.8.2 I [38] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.8.3 G [39] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.9 H [40] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.10J [41] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.10.1J [42] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.10.2J [43] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.10.3J [44] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.10.4C [45] http://www.ncsa.uiuc.edu/General/Internet/WWW/MinimalHTML.html A [46] http://info.cern.ch/hypertext/WWW/Addressing/Addressing.html 5 [47] http://www.ncsa.uiuc.edu/demoweb/url-primer.html I [48] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5.3 : [49] http://info.cern.ch/hypertext/WWW/MarkUp/ISOlat1.htmlE [50] http://www.ncsa.uiuc.edu/General/Internet/WWW/LongerExample.html S [51] http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html @ [52] http://www.willamette.edu/html-composition/strict-html.htmlG [53] http://info.cern.ch/hypertext/WWW/Provider/Style/Introduction.html , [54] http://www.ucc.ie/info/net/htmldoc.html1 [55] http://melmac.harris-atd.com/about_html.html 9 [56] http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html 9 [57] http://info.cern.ch/hypertext/WWW/MarkUp/MarkUp.html 7 [58] http://info.cern.ch/hypertext/WWW/MarkUp/SGML.html 9 [59] http://www.hal.com/~connolly/drafts/html-design.html     H % ====== Internet headers and postmarks (see DECWRL::GATEWAY.DOC) ======w % Received: from inet-gw-2.pa.dec.com by us2rmc.zko.dec.com (5.65/rmc-22feb94) id AA06001; Fri, 30 Sep 94 09:31:44 -040 o % Received: from dxmint.cern.ch by inet-gw-2.pa.dec.com (5.65/10Aug94) id AA29960; Fri, 30 Sep 94 06:23:12 -070 p % Received: from www0.cern.ch by dxmint.cern.ch (5.65/DEC-Ultrix/4.3) id AA01289; Fri, 30 Sep 1994 14:22:58 +010T % Received: by www0.cern.ch (5.x/SMI-4.0) id AA06344; Fri, 30 Sep 1994 14:22:40 +010' % Date: Fri, 30 Sep 1994 14:22:40 +0100 / % Message-Id: <9409301322.AA06344@www0.cern.ch> ! % Reply-To: listserv@www0.cern.ch 1 % From: listserv@www0.cern.ch (The CERN WWW Team)  % To: star::dritter k % Subject: A Beginner's Guide to HTML (URL: http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html)  