By default the bottom
of an image is aligned with the text as shown in this paragraph.
You can preview a document in progress with NCSA Mosaic (and some other Web browsers). Open it with the Open Local command under the File menu.After you edit the source HTML file, save the changes. Return to NCSA Mosaic and Reload the document. The changes are reflected in the on-screen display.
<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 to see the formatted version
of the example.
HTML uses markup tags to tell the Web browser how to display the text. The above example uses:
HTML tags consist of a left angle bracket (<), (a ``less than'' symbol to mathematicians), followed by name of the tag and closed by a right angular bracket (>). Tags are usually paired, e.g. <H1> and </H1>. The ending tag looks just like the starting tag except a slash (/) precedes the text within the brackets. In the example, <H1> tells the browser to start formatting a level-one heading; </H1> tells the browser that the heading is complete.
The primary exception to the pairing rule is the <P> tag. There is no such thing as </P>.
NOTE: HTML is not case sensitive. <title> is equivalent to <TITLE> or <TiTlE>.
Not all tags are supported by all World Wide Web browsers. If a browser does not support a tag, it just ignores it.
In the X Window System and Microsoft Windows versions of NCSA Mosaic, the Document Title field is at the top of the screen just below the pulldown menus. In NCSA Mosaic for Macintosh, text tagged as <TITLE> appears as the window title.
<Hy>Text of heading </Hy >
where y is a number between 1 and 6 specifying the level of the heading.
For example, the coding for the ``Headings'' section heading above is
<H3>Headings</H3>
Welcome to HTML.
This is the first paragraph. <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 <P> tag.
Important: You must separate paragraphs with <P>. 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 <P> tags, the document would become one large paragraph. (The exception is text tagged as ``preformatted,'' explained below.) For instance, the following would produce identical output as the first barebones 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>
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 <P> tags).
NCSA Mosaic handles <P> by ending the current paragraph and inserting a blank line.
In HTML+, a successor to HTML currently in development, <P> becomes a ``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>
The difference is that the </P> closing tag can always be omitted. (That is, 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.
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
<P ALIGN=CENTER>
This is a centered paragraph. This is HTML+, so you can't do it yet.
This change won't effect any documents you write now, and they will continue to look just the same with HTML+ browsers.
In fact, starting every paragraph with <P>, even currently with HTML, would be a good habit to start acquiring. As noted, it's not required, but it will ease your transition to HTML+. Browsers should ignore any unnecessary <P>s.
HTML's single hypertext-related tag is <A>, which stands for anchor. To include an anchor in your document:
Here is an sample hypertext reference:
<A HREF="MaineStats.html">Maine</A>
This entry makes word ``Maine'' the hyperlink to the document MaineStats.html, which is in the same directory as the first document. You can link to documents in other directories by specifying the relative path from the current document to the linked document. For example, a link to a file NJStats.html located in the subdirectory AtlanticStates would be:
<A HREF="AtlanticStates/NJStats.html">New Jersey</A>
These are called relative links. You can also use the absolute pathname of the file if you wish.
However, use abolute 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.
scheme://host.domain[:port]/path/filename
where scheme is one of
The port number can generally be omitted. (Which means, unless someone tells you otherwise, leave it out.)
For example if you wanted to insert a link to this primer, you would include
<A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">
NCSA's Beginner's Guide to HTML</A>
in your document. This would make the text ``NCSA's Beginner's Guide to HTML'' a hyperlink leading to this document.
For more information on URLs, look at
Here's <A NAME="Jabberwocky">some text</a>.
Now when you create the link in document A, you include not only the filename, but also the named anchor, separated by a hash mark(#).
This is my <A HREF="documentB.html#Jabberwocky">link</a> to document B.
Now clicking on the word ``link'' in document A sends the reader directly to the words ``some text'' in document B.
For example, to link to the ``Jabberwocky'' anchor from within the same file (Document B), you would use
This is <A HREF="#Jabberwocky">Jabberwocky link</A> from within Document B.
Below an example two-item list:
<UL>
<LI> apples
<LI> bananas
</UL>
The output is
Different viewers display unordered lists differently. A browser might use bullets, filled circles, or dashes to indicate the items.
The <LI> items can contain multiple paragraphs. Just separate the paragraphs with the <P> paragraph tags.
<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>
The result is
The following is an example description list:
<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 a one of
the participating institutions 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>
The output looks like:
The <DT> and <DD> entries can contain multiple paragraphs (separated by <P> paragraph tags), lists, or other description information.
The display of an unnumbered list varies with the browser. A browser may not provide successive levels of indentation or modify the bullets used at each level.
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
<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 *
Hypertext references can be used within <PRE> sections. You should avoid using other HTML tags within <PRE> sections, however, because the formatting will differ from browser to browser.
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 on special characters below.
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
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 out the true meaning of its creed. We hold these truths to be self-evident that all men are created equal.
For example, the last line of the online version of this primer is
<ADDRESS>
A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
</ADDRESS>
The result is
A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.eduIn 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., the World Wide Web browser).
The other advantage of logical tags is that it helps enforce consistency in your documents. It's easier to tag something as <H1> 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 <STRONG> tag. Most browsers render it in bold text. However, it is possible that someone would prefer that these sections be rendered in red instead. Logical styles offer this flexibility.
Some browsers support nested character format tags (for example, using <B><I>some text</I></B> to indicate bold-italic text). Other browsers, however, use only the innermost tag (here, <I>) to determine the formatting. It is recommended that you do not nest character format tags.
To use one of these characters in an HTML document, you must enter its escape sequence instead:
There are additional escape sequences to support accented characters. For example:
Many such escapes exist and are available in a listing from CERN.
NOTE: Unlike the rest of HTML, the escape sequences are case sensitive. You cannot, for instance, use < instead of <.
One use of <BR> is in formatting addresses:
National Center for Supercomputing Applications<BR>
605 East Springfield Avenue<BR>
Champaign, Illinois 61820-5518 <BR>
To include an inline image in your document, use
<IMG SRC=image_URL>
where image_URL is the URL of the image file. The syntax forIMG SRC URLs is identical to that used in anchors. If the image file is a GIF file, then the file name part of image_URL must end with .gif. Similarly, file names 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.
Use the ALIGN=TOP
parameter if you want the browser to align adjacent text with the top
of the image as shown in this paragraph. The full inline image tag
with the top alignment is:
<IMG ALIGN=top SRC=image_URL>
ALIGN=MIDDLE
aligns the text with the center of the image.
<IMG SRC = "UpArrow.gif" ALT="Up">
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.''
To include a reference to a graphic in an external document, use
<A HREF = image_URL>link anchor</A>
The exact same syntax is used for links to external animations and sounds. For example,
<A HREF = "QuickTimeMovie.mov">link anchor</A>
specifies a link to a QuickTime movie. In fact, the only difference is the file extension of the linked file. Some common file types and their extensions are
Make sure your intended audience has the necessary viewers. Most UNIX workstations, for instance, are not able to view QuickTime movies.
<B>This is an example of <DFN>overlapping</B>HTML tags.</DFN>
The word ``overlapping'' is contained within both the <B> and <DFN> tags. How will the browser format it? You won't know until you look, and different browsers will likely react differently to this construct. In general, avoid overlapping tags.
<H1><A HREF="Destination.html">My heading</A></H1>
Do not embed a heading or another HTML element within an anchor:
<A HREF="Destination.html">
<H1>My heading</H1>
</A>
Although most browsers will currently handle this, it is forbidden by the official HTML and HTML+ specifications, and it will not work with future browsers.
Character formatting tags are used to modify the appearance of other tags:
<UL><LI><B>A bold list item<B>
<UL>
<LI><I>An italic list item</I>
</UL>
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:
<UL><LI><H1>A large heading</H1>
<UL>
<LI><H2>Something slightly smaller</H2>
</UL>
Although some browsers, such as NCSA Mosaic for the X Window System, format this quite nicely, it is unpredictable (because it is undefined) how other browsers will handle it. For compatibility with all browsers, avoid these kind of constructs.
What's the difference? This is again a question of SGML. The semantic meaning of <H1> is that it's the main heading of a document and that it should be followed by the content of the document. A browser that formats <H1> as centered text on the page is likely to get confused if it finds that tag within a list.
Character formatting tags also are generally not additive. You might expect that
<B><I>some text</I></B>
would produce bold italic text. On some browsers it does; other browsers interpret only the innermost tag (here, the italics).
If this happens, first make sure that the referenced image does in fact exist, that the hyperlink has the correct information in the link entry, and that the file permission is set appropriately (world-readable).
<TITLE>A Longer Example</TITLE>
<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 inlined 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>
Click here to see the formatted version.