paragraph tags. Numbered Lists A numbered list (also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except it uses
- instead of
- tag. The following HTML code
- oranges
- peaches
- grapes
- NCSA
- 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.
- Cornell Theory Center
- 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.
- and
- entries can contain multiple paragraphs (separated by
paragraph tags), lists, or other definition information. Nested Lists 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. An example nested list:
- A few New England states:
- Vermont
- New Hampshire
- One Midwestern state:
- Michigan
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#!/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 *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 * Hyperlinks can be used withinsections. You should avoid using other HTML tags within
sections, however. Note that because <, >, and & have special meaning in HTML, you have to use their escape sequences (<, >, and &, respectively) to enter these characters. See the section Special Characters[48] for more information. EXTENDED QUOTATIONS Use the
tag to include quotations in a separate block on the screen. Most browsers generally indent to separate it from surrounding text. An example:
I still have a dream. It is a dream deeply rooted in the American dream.
The result is: I still have a dream. It is a dream deeply rooted in the American dream. I have a dream that one day this nation will rise up and live o ut the true meaning of its creed. We hold these truths to be self -evident that all men are created equal. ADDRESSES The 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. For example, the last line of the online version of this guide is A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu The result is A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu NOTE: is notused for postal addresses. See ``Forced Line Breaks'' on page 10 to see how to format postal addresses. Character Formatting You can code individual words or sentences with special styles. There are two types of styles: logical and physical. Logical stylestag text according to its meaning, while physical stylesspecify 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.'' PHYSICAL VERSUS LOGICAL: USE LOGICAL STYLES WHEN POSSIBLE 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.'' 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). The other advantage of logical tags is that they help enforce consistency in your documents. It's easier to tag something asI 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.
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 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. Logical Styles for a word being defined. Typically displayed in italics. (NCSA Mosaic is a World Wide Web browser.) for emphasis. Typically displayed in italics. (Watch out for pickpockets.) for titles of books, films, etc. Typically displayed in italics. (A Beginner's Guide to HTML)
for snippets of computer code. Displayed in a fixed-width font. (TheThe word ``overlapping'' is contained within both the and 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. EMBED ANCHORS AND CHARACTER TAGS, BUT NOTHING ELSE It is acceptable to embed anchors within another HTML element:header file) 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 passwd to change your password.) for computer status messages. Displayed in a fixed-width font. (Segmentation fault: Core dumped.) for strong emphasis. Typically displayed in bold. (Important) for a ``metasyntactic'' variable, where the user is to replace the variable with a specific instance. Typically displayed in italics. (rm filename deletes the file.) Physical Styles bold text italic text typewriter text, e.g. fixed-width font. USING CHARACTER TAGS To apply a character style, Start with , where tag is the desired character formatting tag, to indicate the beginning of the tagged text. Enter the tagged text. End the passage with . SPECIAL CHARACTERS Escape Sequences 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.) To use one of these characters in an HTML document, you must enter its escape sequence instead: < the escape sequence for < > the escape sequence for > & the escape sequence for & " the escape sequence for _ Additional escape sequences support accented characters. For example: ö the escape sequence for a lowercase o with an umlaut: v ñ the escape sequence for a lowercase n with an tilde: q È the escape sequence for an uppercase E with a grave accent: H A full list of supported characters[49] can be found at CERN. NOTE: Unlike the rest of HTML, the escape sequences are case sensitive. You cannot, for instance, use < instead of <. Forced Line Breaks The
tag forces a line break with no extra space between lines. (By contrast, most browsers format theparagraph tag with an additional blank line to more clearly indicate the beginning the new paragraph.) One use of
is in formatting addresses: National Center for Supercomputing Applications
605 East Springfield Avenue
Champaign, Illinois 61820-5518
Horizontal Rules The
tag produces a horizontal line the width of the browser window. In-line Images 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. To include an in-line image, usewhere image_URL is the URL of the image file. The syntax for IMG SRC URLs is identical to that used in an anchor HREF. If the image file is a GIF file, then the filename part of image_URL must end with .gif. Filenames of X Bitmap images must end with .xbm. By default the bottom of an image is aligned with the text as shown in this paragraph. Add the ALIGN=TOPoption 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:
where UpArrow.gif 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.'' External Images, Sounds, and Animations 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. To include a reference to an external image, use link anchor 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, link anchor 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 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: This is an example of overlapping HTML tags.
My heading
Do not embed a heading or another HTML element within an anchor:My heading
Although most browsers currently handle this example, it is forbidden by the official HTML and HTML+ specifications, and will not work with future browsers. Character tags modify the appearance of other tags:- A bold list item
- An italic list item
A large heading
Something slightly smaller
- tag as opposed to embedding a
within a
- ? This is again a question of SGML. The semantic meaning of
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
within a list. Character formatting tags also are generally not additive. You might expect that some text would produce bold-italic text. On some browsers it does; other browsers interpret only the innermost tag (here, the italics). CHECK YOUR LINKS When an
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). A Longer Example Here is a longer example of an HTML document:
A Longer Example A Longer Example
This is a simple HTML document. This is the first paragraph.This is the second paragraph, which shows special effects. This is a word in italics. This is a word in bold. Here is an in-lined GIF image:
.
This is the third paragraph, which demonstrates links. Here is a hypertext link from the word foo to a document called _subdir/myfile.html_. (If you try to follow this link, you will get an error screen.)
A second-level header
Here is a section of text that should display as a fixed-width font:On the stiff twig up there Hunches a wet black rook Arranging and rearranging its feathers in the rain ...This is a unordered list with two items:- cranberries
- blueberries
Me (me@mycomputer.univ.edu) Click here[50] to see the formatted version. In addition to tags already discussed, this example also uses the ... and ... 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. For More Information This guide is only an introduction to HTML and not a comprehensive reference. Below are additional sources of information. FILL-OUT FORMS 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 Fill-out Forms Overview[51] STYLE GUIDES The following offer advice on how to write ``good'' HTML: Composing Good HTML[52] CERN's style guide for online hypert[53] OTHER INTRODUCTORY DOCUMENTS These cover similar information as this guide: How to Write HTML Files[54] Introduction to HTML[55] ADDITIONAL REFERENCES The HTML Quick Reference Guide[56], which provides a comprehensive listing of HTML codes The official HTML specification[57] A description of SGML[58], the Standard Generalized Markup Language Dan Connolly's HTML Design Notebook[59]. Dan Connolly is one of the originators of HTML. ___________________________________ National Center for Supercomputing Applications / pubs@ncsa.uiuc.edu *** References from this document *** [1] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.1 [2] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.2 [3] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3 [4] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.1 [5] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.2 [6] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.2.1 [7] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.2.2 [8] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.2.3 [9] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.3 [10] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.3.1 [11] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.3.2 [12] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.3.3 [13] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.3.3.4 [14] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.4 [15] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.4.1 [16] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.4.1.1 [17] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.4.1.2 [18] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.4.1.3 [19] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.4.1.4 [20] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.4.2 [21] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.4.3 [22] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.4.4 [23] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5 [24] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5.1 [25] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5.1.1 [26] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5.1.2 [27] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5.2 [28] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5.3 [29] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5.3.1 [30] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5.3.2 [31] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5.3.3 [32] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.6 [33] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.6.1 [34] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.7 [35] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.8 [36] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.8.1 [37] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.8.2 [38] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.8.3 [39] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.9 [40] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.10 [41] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.10.1 [42] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.10.2 [43] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.10.3 [44] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.10.4 [45] http://www.ncsa.uiuc.edu/General/Internet/WWW/MinimalHTML.html [46] http://info.cern.ch/hypertext/WWW/Addressing/Addressing.html [47] http://www.ncsa.uiuc.edu/demoweb/url-primer.html [48] http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#A1.5.3 [49] http://info.cern.ch/hypertext/WWW/MarkUp/ISOlat1.html [50] http://www.ncsa.uiuc.edu/General/Internet/WWW/LongerExample.html [51] http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html [52] http://www.willamette.edu/html-composition/strict-html.html [53] http://info.cern.ch/hypertext/WWW/Provider/Style/Introduction.html [54] http://www.ucc.ie/info/net/htmldoc.html [55] http://melmac.harris-atd.com/about_html.html [56] http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html [57] http://info.cern.ch/hypertext/WWW/MarkUp/MarkUp.html [58] http://info.cern.ch/hypertext/WWW/MarkUp/SGML.html [59] http://www.hal.com/~connolly/drafts/html-design.html % ====== Internet headers and postmarks (see DECWRL::GATEWAY.DOC) ====== % 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 % 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 % Received: from www0.cern.ch by dxmint.cern.ch (5.65/DEC-Ultrix/4.3) id AA01289; Fri, 30 Sep 1994 14:22:58 +010 % 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 % From: listserv@www0.cern.ch (The CERN WWW Team) % To: star::dritter % Subject: A Beginner's Guide to HTML (URL: http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html)
- . The items are tagged using the same