A Beginner's Guide to HTML
The Minimal HTML Document
Here is a bare-bones example of HTML:
<HTML>
<HEAD>
<TITLE>The simplest HTML example</TITLE>
</HEAD>
<BODY>
<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>
Here is how to <A HREF=HTTP:HTMLCODESHEET.HTML>jump </A>to another file or computer.<p>
</BODY>
</HTML>
To see what this page looks like, click here.
HTML Tags
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 Web 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 line breaks. Owing to the way browsers work (they ignore them), the <P> tag is rarely followed by an
</P>.
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
<HEAD> ... </HEAD> and <BODY> ... </BODY> tags, which separate the document into introductory
information about the document and the main text of the document.
<TITLE> appears as the window title.
<H1> Heading eg. <H3>Headings</H3>
<P> You must separate paragraphs with <P>.
<A HREF="MaineStats.html">Maine</A> An Anchor to MainStats.html
<A HREF="AtlanticStates/NJStats.html">New Jersey</A> One in a subdirectory.
<A HREF = "http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html"> Link to
a remote document
<A HREF = "documentB.html#Jabberwocky">link</A> jump to "Jbberwocky" in doc B
<UL> indicates an unnumbered list
<LI> list item (puts a bullet in front)
<OL> Ordered list (puts numbers by items)
<LI> tag specifies item in list
<DT> A definition term
<DD> definition that follows term
<UL> Indent
<PRE> preformatted text
Logical styles
<BLOCKQUOTE> includes quotations in a separate block on the screen.
<ADDRESS> used to specify the author of a document- the last item in a file.
<DFN> a word being defined. Typically displayed in italics.
<EM> emphasis. Typically displayed in italics.
<CITE>for titles of books, films, etc. Typically displayed in italics.
<CODE> for snippets of computer code. Displayed in a fixed-width font.
<KBD>for user keyboard entry. Should be displayed in a bold fixed-width font
<SAMP> for computer status messages. Displayed in a fixed-width font.
<STRONG> for strong emphasis. Typically displayed in bold.
<VAR> for a ``metasyntactic'' variable
Physical Styles
<B> bold text
<I> italic text
<TT> typewriter text, e.g. fixed-width font.
Special Characters
< the escape sequence for <
> the escape sequence for >
& the escape sequence for &
" the escape sequence for "
ö the escape sequence for a lowercase o with an umlaut: ö
ñ the escape sequence for a lowercase n with an tilde: ñ
È the escape sequence for an uppercase E with a grave accent:
NOTE: Unlike the rest of HTML, the escape sequences are case sensitive. You cannot,
for instance, use < instead of <.
Forced Line Breaks
<BR> forces a line break with no extra space between lines.
<HR> tag produces a horizontal line the width of the browser window.
<IMG SRC=image_URL > To include an in-line image
<IMG ALIGN=top SRC=image_URL > Alligns the top of an image to the text line
<IMG SRC = "UpArrow.gif" ALT = "Up"> browsers that cannot support images write "Up"
<A HREF = image_URL >link anchor</A> To include a reference to an external image when you click on "link anchor"
<A HREF = "QuickTimeMovie.mov">link anchor</A> Links to a movie
File Types and Extensions
Some common file types and their extensions. Make sure your intended audience has
the necessary viewers. Most UNIX workstations, for instance, cannot view QuickTime
movies.
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
Another example of an HTML document:
<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 = "mike2small.gif">.
<P>
This is the third paragraph, which demonstrates links. Here is
a hypertext link from the word <A HREF = "barebonesexample2.html">example</A>
to a document called "barebonesexample2.html". (This the
first page we marked up.) <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>
To see what this page looks like, click here.