Basic HTML Cheat Sheet
Prepared for the IMG seminar, "Basic HTML"

TABLE OF CONTENTS

The Basic Template
Text Style Tags
Text Formatting Tags
Lists
Images
Links

1. The Basic Template:

<HTML>
<HEAD> <TITLE> Put the page title here. </TITLE>
</HEAD>


<BODY>

The document goes here.

</BODY>
</HTML>

2. Text Style Tags

a. Headers:
Sets off text and indicates size

<Hn>This is a header </Hn>, where n is 1(large) to 6(small). Headers automatically force a blank lines above and below.

A Header of size H2

b. Boldface

<B> Make this boldface</B>

Make this boldface

c. Italic

<I> Make this italic</I>

Make this italic

d. Preformatted
( as it appears in the source document)

<PRE> 

Keep this
		text
		exactly           as it 
			a p p e a r s!

</PRE>

Keep this
		text
		exactly           as it 
			a p p e a r s!
e. Font Sizes

<FONT SIZE = n> text </FONT> where n is an integer from 1 to 7.

Font size 1 Font size 7 Note: Unlike headers, 1 is small and 7 is large. Also unlike headers, changes in font sizes do not force blank lines.

3. Text Formatting Tags

a. Paragraph
The tag <P> forces a blank line to be inserted.

This is the end of the paragraph. <P> This begins another.

This is is the end of the paragraph.

This begins another.

b. Line break

Break this line before the last<BR<word

appears on the page as:

Break this line before the last
word

c. Center

<CENTER>center this on the page</CENTER>

center this on the page

d. Horizontal rules (or lines)

<HR> : a shaded horizontal rule, full width:
<HR NOSHADE>: a solid horizontal rule, full width:
<HR ALIGN = right WIDTH = 50%> A rule half the width of the page, on the right-hand side:
<hr noshade size=20 width=30%>: A solid rule, 20 pixels thick, 30% to width of the page (centering is default)

d. Quotations:

BLOCKQUOTE sets off a quoted paragraph.

As the venerable taller of tales and incomparable moralist Aesop said,.<BLOCKQUOTE> "A cock was once strutting . . . for those that can prize them. " </BLOCKQUOTE>

As the venerable taller of tales and incomparable moralist Aesop said,

"A cock was once strutting up and down the farmyard among the hens when suddenly he espied something shinning amid the straw. "Ho! ho!" quoth he, "that's for me," and soon rooted it out from beneath the straw. What did it turn out to be but a Pearl that by some chance had been lost in the yard? "You may be a treasure," quoth Master Cock, "to men that prize you, but for me I would rather have a single barley-corn than a peck of pearls." Precious things are for those that can prize them. "

4. Lists

a. Unordered list,
Items are indicated with dots
name of list
<UL>
<LI> item one
<LI> item two
<LI> last item
</UL>		name of list
  • item one
  • item two
  • last item
 Favorite things
  • Kitten Whiskers
  • Warm Mittens
  • Doorbells

b. Ordered list
Items are numbered
name of list
<OL>
<LI> item one
<LI> item two
<LI> last item
</oL>		name of list
  1. item one
  2. item two
  3. last item
 How to bake a cake
  1. Buy cake mix
  2. Follow directions
  3. Take credit

c. Description or definition lists
Name of List <DL>
<DT> term 1
<DD> description1
<DT> term 2
<DD> description 2
</DL>		 Name of List
term 1
description 1
term 2
description 2
Jobs
1994-1996
Supervised lifeguards
1993-1994
Sales clerk
Dishwasher

d. Lists can be mixed.
For instance:
Mixed List
<UL>
<LI>top level
  <OL><LI> choice a
  <LI> choice b
  </OL>
<LI>second level
<LI>>third level
<UL>>
 Mixed List
  • top level
    1. choice a
    2. choice b
  • second level
  • third level
(The indentation in the HTML is not necessary, but it makes it easier to keep track of things as you write.)

5. Images

These are also called inline images. The simplest and most frequently used image command is

<IMG SRC="name_of_image_file">

<IMG SRC="frog.gif">

appears as

Notice the quotation marks. Be sure that you use straight quotes and not curly quotes.

The parameter "SRC" tells the browser where to find the file containing the image. Although in most cases, HTML tags are not case sensitive, the name of the file may be.

Other parameters that may appear in the image tag are "ALIGN" and "ALT." Here is an example of a more complex tag.

<IMG ALIGN=MIDDLE ALT="text substitute" SRC="image_file.ext">

ALIGN indicates where the following text should be relative to the image. Options are "top," 'middle," and "bottom." If you do not want it by the picture, follow the image tag with a <P> tag. "Align=left" set the image to the left and wraps the text around it. Follow the text with <br clear=all>.
ALT allows text to be substituted for the image for persons using text-only browsers such as LYNX. In the example above, they would see the words "text substitute" in the place of the image.
Examples of Image Tags
<IMG Align=top SRC="frog.gif" > Frog Frog
<IMG Align=middle SRC="frog.gif"> FrogFrog
<IMG ALIGN=LEFT SRC="frog.gif"> There is nothing more pleasant on a summers's evening than the sound of the frogs -- from spring peepers to bullfrogs -- as they sing their songs. I lay in my bed listening and find myself relaxed as at no other time.<BR clear=all> There is nothing more pleasant on a summers's evening than the sound of the frogs -- from spring peepers to bullfrogs -- as they sing their songs. I lay in my bed listening and find myself relaxed as at no other time.
<IMG ALT="BULLFROG" SRC="frog.gif"> BULLFROG

(This is what you would see in non-graphical browser. Otherwise it would ignore the IMG tag.)

6. Anchors, Hyperlink References, and Links

a. Link to an external file.

<A HREF="filename.ext"> the anchor, i.e. what you "click on" </A>
Examples:
<A HREF="http://www.auburn.edu">Auburn</A>

will present the link "Auburn" highlighted on the page. When you click on "Auburn," you will go to the AU home page (which has the address "http://www.auburn.edu." Here it is.

Auburn

An external file can be a page (as above), a picture

<A HREF="hawk.jpg">Click here to see a hawk</A>

Click here to see a hawk

or a sound

<A HREF="jupiter.au">The Jupiter theme</a> from Holst's <I> The Planets</I>;

The Jupiter theme from Holst's The Planets

b. Internal link.
An internal link link one part of your page to another. For instance, the items in a table of contents may be linked to the appropriate sections of the page.

Creating an internal link is a two step process.

  1. Set up an internal address to link to in your document:

    <A name ="pick_a_name"></A>Internal location

  2. Set up anchor to link from in your document:

    <A HREF="#pick_a_name"> Click here to get to internal location

NOTE: # denotes internal address

Example:

<B>Table of Contents
/B><BR>
<A HREF="#dogs">Go To Dogs>/A>
. . . . .
. . . . .
. . . . .

<A name ="dogs"></A<Collies<br>
Fox Terriers<br>
German Shepherds<br>

This will place "Collies" at the top of your screen when you click on "Go To Dogs."

Try it

Table of Contents
Go To Dogs
. . . . .
. . . . .
. . . . .

Collies
Fox Terriers
German Shepherds

c. Link from "thumbnail picture" to fullsize picture.

<A HREF="fullsize.jpg"> <IMG SRC="thumbnail.jpg"> </A>

NOTE: This is really the same as the other links, except instead of words being highlighted as the link on the page, the thumbnail picture will be highlighted (surrounded with a colored border).

Example:

<A HREF="rose.jpg"> <IMG SRC="roset.jpg"></A>

d. Link to email
Your readers can send email to you.

Send comments to your-name at

<A HREF="mailto:your-full-email-address">your-full-email-address </A>

For this to work correctly, the mail preferences of the sender (under OPTIONS in Netscape) must be set correctly.

Example:

Send your comments to Nick Backscheider at <A HREF="mailto:backsni@mail.auburn.edu">backsni@mail.auburn.edu</A>

appears as

Send your comments to Nick Backscheider at backsni@mail.auburn.edu

Send your comments to the Instructional Media Group, Auburn University, care of Nick Backscheider at backsni@mail.auburn.edu

Last updated: Tuesday, 18-Jan-2000 10:24:06 CST