HTML Reference Sheet

Document Structure

<HTML>: This tag is placed at the beginning of the source document. Its companion tag is placed at the very end of the source document. These tags enclose both the head and body of the source document.
<HEAD>: This tag and its companion end tag are placed at the beginning and end of the document heading. The document title and parameters for the browser are placed inside these tags.
<TITLE>: This tag identifies the document title. The <TITLE> tags are enclosed within the <HEAD> tags.
<BODY>: This tag is placed at the beginning of the content information in the source document. Its companion tag is placed at the end of the content information of the source document.

Headings

<H1>: This is the size of H1 heading text.
<H2>: This is the size of H2 heading text.
<H3>: This is the size of H3 heading text.
<H4>: This is the size of H4 heading text.
<H5>: This is the size of H5 heading text.
<H6>: This is the size of H6 heading text.

Divisions and Paragraphs

<DIV>

This tag is used divide a body of text into distinct sections.

In some browsers, the text of each section is rendered differently.

One section may be in italics, while another may be rendered in a distinct font.

<P>

The paragraph tag will insert a blank line between paragraphs. This will help you to tell when the first paragraph ends and the second paragraph begins.

The second paragraph begins below the space. A paragraph may include text, hyperlinks, lists, tables, and images.

Formatted Lists

<UL>

The unordered list tag sets up a list of related items that have no special order or sequence. Each item in the list is bulleted. The closing tag is required to end the list.

My Interests:

Reading
Skiing
Biking
Swimming
Oil Painting

<OL>

The ordered list tag sets up a list of related items that have a special order or sequence. Each item in the list is numbered (or lettered). The closing tag is required to end the list.

Making a Peanut Butter and Jelly Sandwich

Spread peanut butter on a slice of bread
Spread jelly on top of the peanut butter
Lay a second slice of bread on top of the jelly
Press firmly

<LI>

This tag defines each item a list. Its companion end tag is not required. In the two examples above, each bulleted or numbered item is preceeded by the <LI> tag in the source document.

<DL>

The definition list tag sets up a list of terms. This is an ideal way to present a glossary, list of terms, or other name-value list in HTML. Each item in a definition list is composed of two parts: a term followed by its definition or explanation. Browsers normally render the term at the left margin and render the definition below it and indented. (This reference list uses definition list tags to show the tags and their uses!)

Web Page Acronyms

HTML: HyperText Markup Language
URL: Uniform Resource Locator

<DT>: This tag defines each term in a definition list. Its companion end tag is not required. In the example above, the terms HTML and URL are preceeded by the <DT> tag in the source document.
<DD>: This tag defines each definition in a definition list. Its companion end tag is not required. In the example above, the definitions HyperText Markup Language and Uniform Resource Locator are preceeded by the <DD> tag in the source document.

Content-based Style Tags

<CITE>: This tag indicates that the enclosed text is a bibliographic citation like a book or magazine title and is usually rendered in italics:
Generation X Goes to College
<CODE>: This tag will display the text in a monospaced, teletypewriter style. It was designed to display computer source code: to handle buttonclick go to next page
<DFN>: This tag is intended to set apart a definition in INTERNET EXPLORER.
<EM>: This tag presents the enclosed text with emphasis.
Emphasized text is usually displayed in italics.
<KBD>: This tag indicates text that is typed on a keyboard: Type menu to return to the main menu.
<SAMP>: This tag displays a sample or literal sequence of characters: A sample such as ae is usually displayed in a different font.
<STRONG>: This tag presents the enclosed text with a strong emphasis:
Strong text is usually displayed in boldface.
<VAR>: This tag indicates a variable name or user-supplied value used in computer programming and is usually rendered in a monospaced or italic font.
username

Physical Style Tags

<B>: This tag will render your text in boldface
<BIG>: This tag will display your text one font size larger in NETSCAPE
<BLINK>: This tag will make your text blink.
<I>: This tag will render your text in an italic typeface.
<SMALL>: This tag will display your text one font size smaller in NETSCAPE.
<S> and <STRIKE>: These tags will place a ~~strike~~ through your text.
<SUB>: This tag will display the enclosed text _{half a character lower} than the current text.
<SUP>: This tag will display the enclosed text ^{half a character higher} than the current text.
<TT>: This tag will render your text in monospaced typeface.
<U>: This tag will underline your text.

Expanded Font Handling

<BASEFONT>: This tag lets you define the basic size for the font that the browsers use to display normal document text. This text has a basefont size of 5. This is the default basefont size of 3. This text has a basefont size of 1.
<FONT>: This tag lets you change short segments of text. You can use the attributes of size, face, and color with assigned values to implement these changes.

Precise Spacing and Layout

<BR>: This tag lets you break a line of text,
So that you can see what's coming next.
Separate lines
Make poems look fine!
<NOBR>: Use the nobreak tag to make sure an entire text phrase or URL stays intact on a single line. The following URL has a nobreak tag: http://rvcc.raritanval.edu. The entire URL will always be displayed on a single line.
<WBR>: This tag tells the browser when it may insert a line break in an otherwise nonbreakable sequence of text.
<PRE>: Any text enclosed in the preformatting tag will be rendered in exactly the character and line spacing defined in the HTML source document. (What You See Is What You Get!)
<CENTER>: This tag centers the text in each line of a block of text after the text flow is filled and wrapped. The center alignment remains in effect until it is cancelled with its end tag.

Block Quotes

<BLOCKQUOTE>: All text within this tag is set off from the regular document text,
usually with slightly more-indented left and right margins, and sometimes an italicized typeface.

Addresses

<ADDRESS>: This tag tells your browser that the enclosed text is an address such as
Webmaster
RVCC
P.O. Box 3300
Somerville, NJ

Special Character Encoding

The characters listed below indicate tags and special references. To use these characters within the content of your document you will need to use special encoding so that the browser will display them properly.

Special character code includes an ampersand (&), followed by the hash mark (#), a specific number that defines the character, and a semicolon (;). Some special characters also have names that define the character. These names may be substituted for the hash mark (#) and number in the encoding sequence. There are many special characters other than the ones shown below.

< is written with the following code:: < or <
> is written with the following code:: > or >
& is written with the following code:: & or &

Hyperlinks

<A>

The anchor tag creates source links to other web pages or other sections of the current web page. It also creates anchors or specific target areas within your web page.

<A HREF=>

The HREF attribute of the anchor tag specifies the URL of the target of the link. After the = type in the URL of the target web page. The example shows a link from the Hyperlink RVCC Home Page to the Raritan Valley Community College Home Page. Below it is the source code.

RVCC Home Page
<A HREF="www.raritanval.edu">RVCC Home Page</A>

Instead of words, an image may be a link to a target web page. An example and its source code is shown below. If the file rvccarch.jpg was available, the ? would be replaced by a picture of the RVCC arch. Like the words above, the image is linked to the Raritan Valley Community College Home Page.

<A NAME=>

The NAME attribute of the anchor tag places a section identifier within a web page, thereby establishing a section of the web page as a target. Often the <A NAME=> is placed next to a section title. The following example shows the title of the Education section of a web page resume. The source code identifying this title as a target is shown below it.

EDUCATION

<A NAME="education">EDUCATION</A>

The menu at the top of the resume would include a hyperlink to the Education section as shown below. The source code is shown below it.

Education

<A HREF="#education">Education</A>

Images

<IMG>

The image tag inserts an image into a web page. The image may be a photograph, drawing, or clip art. Browsers will support two image file types: .JPG (Joint Photographic Experts Group) and .GIF (Graphics Interchange Format). All image files must be located in the same directory as the source document or they will not be displayed by the browser. Image has no closing tag.

<IMG SRC=>

The SRC attribute of the image tag is required; its value is the filename of the image placed inside quotation marks. ("filename.jpg" OR "filename.gif").

<IMG SRC WIDTH= HEIGHT=>

The WIDTH and HEIGHT attributes of the image tag specify the size of the image in pixels (picture elements). Specifying this attribute allows the browser to calculate the size of the image and reserve space before actually downloading the image. This will make the image render faster.

<IMG SRC WIDTH= HEIGHT= ALT=>

The ALT attribute of the image tag specifies alternative text the browser may show if image display is not possible or disabled by the user.

The example below shows an image tag with its attributes of SRC, WIDTH, HEIGHT, and ALT. In a web page, the tag below will display the picture "mydog.jpg" which is 100 pixels wide and 150 pixels high. If the browser cannot display the picture, it will display the sentence, "A picture of my dog!"