HTML primer - Vicki Brown, April 1997
So you're going to create some Web pages...
If you're creating Web pages, you may find this Primer for Web pages useful. This introduction covers the basics of HTML (HyperText Markup Language), concentrating on a handful of useful HTML formatting commands (tags). This page provides annotation and examples for those basic HTML tags.
Even if you plan to create all of your pages with a specialized web page creator, it can't hurt to have a basic understanding of the underlying HTML code. If nothing else, this knowledge will come in handy when you see a page you like, View the source, and want to use the same cute stuff in your web pages!
Note that I use a Mac so some of this is Mac-oriented.
HTML Primer(Vicki Brown, email@example.com)
Here are a few hints and recommendations that may help you:
Web pages are interpreted dynamically by the web browser, using a "mark-up" language called HTML (Hypertext Markup Language). That is, the web page that the user sees is not the same as the page its creator edited. Consequently, the process of creating web pages is one step removed from the web page as displayed.
The process of creating web pages involves both the specification of text and formatting. The text is edited in much the same manner as you would use for any text document. The formatting, however, is controlled by means of a small set of formatting tags, commands enclosed in angle brackets: < and >. Many tags have open and close versions. The close version has a / in front of the tag name. Many tags also have attributes which can be added (optionally) to change the behaviour of the html.
The entire HTML document is then enclosed
in a set of "overhead" tags.
These tags tell the Browser that the page is HTML, and provide general
instructions about the primary parts of the page.
<HTML>and end (close) with
</HTML>In between, you put everything else, starting with a
<HEAD>and followed by a
Within the page Head, you can specify a Title. The Title is what Netscape shows in the Browser Window title bar. The title of this page is HTML primer.
<TITLE>HTML primer</TITLE>A basic page layout would then look like this:
<HTML> <HEAD> <TITLE>page title</TITLE> </HEAD> <BODY> </BODY> </HTML>
TextWithin the body of the page, the text you type is free format. HTML is not (usually) white-space conscious. Judicious use of indentation and newlines can be used to make your text and code neater and easier to read (highly recommended!) but Browsers will generally ignore it (unless told to do otherwise). You can force white space with certain tags, e.g. <BR> for line break, and <P> for new paragraph.
A line break <BR>
whereas a paragraph mark provides some extra space between lines.
The text you type is also, generally, set in whichever font the user has chosen in his Browser preferences, e.g. Times 12pt. The font and size can be changed using the <FONT> </FONT> tags. Attributes specify the typeface, color and/or size. For example
<FONT SIZE="+3" COLOR="red">Oh Boy! Cool News!!!</FONT>produces
Oh Boy! Cool News!!!
Text size can also be controlled by section headers, discussed below.
Text style (e.g. bold) is handled separately, not by attributes to the FONT tag. For example, <B> begins a bold section of text. </B> ends the bold and returns to normal text.
For Emphatic (typically Italic) text, use <EM> and </EM>. Note, however, that most web browsers fail to display the space following an italicized word (SIGH).
For Typewriter (monospace) text,
use <TT> and </TT>.
Typewriter text is commonly used for presenting items
(such as commands) that must be typed exactly as shown.
The <PRE> (pre-formatted) tag, discussed below,
also creates typewriter text.
To continue the example, the < character is coded as <.
is coded as &.
Many other special characters are available, each with its own code. All
have a 3-digit numeric code; many also have a named code, as in the previous
between <CENTER> </CENTER> tags.
Each paragraph will be centered.
You can indent text from both margins as a Block Quote (indented) by placing it between <BLOCKQUOTE> </BLOCKQUOTE> tags.</BLOCKQUOTE>
Text between <PRE> </PRE> tags is considered pre-formatted. No line break tags are necessary. White space is used for paragraphs. Indentation is as you place it in the code. And the text is shown in mono-space font.</PRE>
Section headers come in several sizes. Headers are formatted as text enclosed between <H#> </H#> tags, where # is replaced by a number representing the desired size. 1 is the largest; 6 is about the smallest reasonable header size.
Headers are set in bold. The text following the header is always a new paragraph.
Occasionally, you may want to specify a new section more firmly, by drawing a line across the page between sections. The <HR> tag specifies a horizontal rule.
Often, it is convenient to format text as lists. Two common types of lists are unordered (aka bullet) lists, and ordered (or numbered) lists The most list type common on this site is the Unordered List.
Unordered lists are made up of list items, marked with the <LI> tag (a single tag; not a pair), enclosed between a pair of <UL> </UL> tags, thus:
<UL> <LI>item one <LI>item two <LI>item three </UL>
For an ordered list, use a <OL> </OL> pair. The list items are still denoted with <LI>:
<UL> <P><LI>If you see something you like, select "Document Source" from the Netscape View menu and see how the author did it! <P><LI> Avoid spaces and MacOS option characters in file/folder names. </UL>becomes
<TABLE BORDER> <TR> <TD>Name</TD> <TD>Extension</TD> <TD>Email address</TD> <TD>Department</TD> </TR> <TR> <TD>Fred Smith</TD> <TD>5-5555</TD> <TD>firstname.lastname@example.org</TD> <TD>Dept. of Redundancy Dept.</TD> </TR> </TABLE>
Note that many additional attributes can be specified in the Table and TD tags.
An image are specified by the <IMG ...> tag. The path to the file to be displayed is given in the SRC="..." attribute. Paths use Unix-style pathname syntax, e.g. ../../Images/file.gif. The HTML to display the image below
is written as
<IMG SRC="testpat.gif">It is often appropriate to specify a text string to be used if the image cannot be displayed for some reason, e.g. the user has turned off image autoloading or the image file cannot be found. This alternate text is provided in the ALT= attribute. For example
<IMG SRC="Images/cool.gif" ALT="Cool graphic">.produces
because the image cool.gif could not be found in the location given.
A Word of Caution: A few images can spice things up, but too many images
may be more annoying than they're worth, especially over a slow connection. Also,
images can eat up disk space quickly; if your space is limited, take care.
Make each image worth that thousand words!
There are several types of anchors (specified as attributes to the ><A> tag). Two very common types (in use throughout this site) are the HREF and NAME types.
HREF is used to point to files, mailto: links, other sites (http, ftp, and so on) and to marked locations within a page. NAME is used to mark locations within a page to be linked to later by an HREF.
Note again that HREF or NAME is an attribute of the <A> tag (placed within the <A and > brackets) while the text the user sees (and clicks on) comes between the <A> and </A> tags
A link which sends Email:
To mark a location within a file, use the NAME attribute. For example, the Overview header on this page is coded as:
<A NAME="_Overview"><H4>Overview</H4></A>Note that tags can be nested, allowing the header to be marked, with the <H3> header tags inside the anchor. When using an HREF to link to an anchor created with NAME, preceed the name with #. Thus, the NAME anchor is created as
<A NAME="_Value">text</A>and referenced as
<A HREF="#_Value">Marked text</A>The name (e.g. "_Value") can be anything you like.
Learning MoreThere are plenty of good books on HTML and the Web. Some are better than others. Be sure to leaf through any book that interests you before you buy!
There are also sites on the Web with tips and information about HTML and creating Web pages. Some are mentioned in the Tips & Tools page on this site.
Lastly, the best way to learn is to observe, and to do. View the source for the pages on this site and other sites. Get a good editor, and start creating Web pages.
Last modified February 5, 1998 vlb