HTML Quick Reference

The Tag The Code How it Looks
The Basic Tags and the Layout
<html> </html>

Indicates the beginning and end of a html document.

<html>

<head>
<title>Page Title</title>
</head>

<body>

Text and other HTML tags are placed after the body tag; i.e. to show text in a certain way, to put in images, etc.

After HTML tags & text, the HTML document is closed.

</body>
</html>
Page Title - Explorer X
Text and other HTML tags are placed after the body tag; i.e. to show text in a certain way, to put in images, etc. After HTML tags & text, the HTML document is closed.
<head> </head>

Contain tags providing information that isn't displayed on the Web page itself.
<title> </title>

Displays the enclosed text in the title bar of the browser.
<body> </body>

Contains page contents.

Document Tags effect the entire web page.

<body> </body>

Defines background, default text color and hyperlink colors.

Attributes:
bgcolor=color
link=color
vlink=color
alink=color
background="image source"

 <body bgcolor="#ffffff" text="#000000">
<p>"The sky above the port was the color of television, tuned to a dead channel."</p>
<p>Neuromancer</p></body>

"The sky above the port was the color of television, tuned to a dead channel."

Neuromancer
Color is a six digit hexadecimal code which signifies the color; i.e.
Red=ff0000, Green=00ff00, Blue=0000ff, White=ffffff, Black=000000, Yellow=ffff00

Block Format Tags
cause a line break and possibly change the formatting of characters.
<p> </p>

Creates a new paragraph

Attributes:
align=[left][right][center]

 <p>Saavik: He's so...human.</p>
<p>Spock: Nobody's perfect, Saavik.</p>
<p align=right>Star Trek</p>

Saavik: He's so...human.

Spock: Nobody's perfect, Saavik.

Star Trek

<br>

Inserts a line break

 <p align=center>Yesterday I was a dog.<br>Today I'm a dog.<br>Tomorrow I'll probably<br>still be a dog.</p>
<p align=left>Sigh! There's so little hope for advancement. </p>
<p align=right>Snoopy</p>

Yesterday I was a dog.
Today I'm a dog.
Tomorrow I'll probably
still be a dog.

Sigh! There's so little hope for advancement.

Snoopy

<h1> </h1>

Creates the largest Heading

<h2> </h2> Smaller
<h3> </h3> Smaller
<h4> </h4> Smaller
<h5> </h5> Smaller
<h6> </h6> Smallest

Attributes:
align=[left][right][center]

 <h1>Shazam!</h1>
<h2>Shazam!</h2>
<h3>Shazam!</h3>
<h4>Shazam!</h4>
<h5>Shazam!</h5>
<h6>Shazam!</h6>
<p align=right>Gomer Pyle</p>

Shazam!

Shazam!

Shazam!

Shazam!

Shazam!
Shazam!

Gomer Pyle

<blockquote> </blockquote>

Indents text from both sides

 <blockquote>Imagination is more important than knowledge.</blockquote>
<p align=right>Albert Einstein</p>
Imagination is more important than knowledge.

Albert Einstein

<hr>

Inserts a horizontal rule

Attributes:
align=[left][right][center]
color=color
width=# of pixels or percent
size=# of pixels

 <hr>
Character Formatting Tags
change the formatting of characters but do not cause a line break.
<font> </font>

Sets size, color, and type [face] of font.

Attributes:
face="typefont"
color=color
size=# of pixels

 <p><font face="Broadway" color="#006600" size=4>You've broken ape law.</font></p>
<p align=right>Planet of the Apes</p>

You've broken ape law.

Planet of the Apes

<b> </b>

Creates Bold text

 Wizard of Oz: <b>I am Oz, the Great and Terrible.</b> Wizard of Oz: I am Oz, the Great and Terrible.
<i> </i>

Displays text usually in italics.

 Dr. Frederick Frankenstein: <i>It's alive! </i> Dr. Frederick Frankenstein: It's alive!
<tt> </tt>

Displays text in a TeleType style font.

 <tt>Frankenstein's Monster: Friend... good.</tt> Frankenstein's Monster: Friend... good.
<big> </big>

Increases the size of the enclosed text.

 Homer: <big>"Press the any key... hmmm..... where's the any key?"</big> Homer: "Press the any key ... hmmm..... where's the any key?"
<small> </small>

Decreases the size of the enclosed text.

 <small>When the tweedle beetles battle with their paddles in a bottle full of water on a noodle-eating poodle, it's a tweedle beetle noodle poodle water bottle paddle battle. </small>
<p align=right>Fox in Sox</p>		 When the tweedle beetles battle with their paddles in a bottle full of water on a noodle-eating poodle, it's a tweedle beetle noodle poodle water bottle paddle battle.

Fox in Sox

<sub> </sub>

Displays text as a Subscript.

 H<sub>2 </sub>O H2O
<sup> </sup>

Displays text as a Superscript.

 x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup> x2 + y2 = z2
<strike> </strike>

Displays text with a line Striking through it.

 Willy Wonka: <strike>We have so much time, and so little to do!</strike> Strike that, reverse it. Willy Wonka: We have so much time, and so little to do! Strike that, reverse it.
List Tags create lists.
<ol> </ol>

Creates an ordered/numbered list.

 <ol>The Four Primary Design Elements are:
<li>Line</li>
<li>Type</li>
<li>Shape</li>
<li>Texture</li>
</ol>
    The Four Primary Design Elements are:
  1. Line
  2. Type
  3. Shape
  4. Texture
<li> </li>

Identifies list items in ordered and unordered lists.
<ul> </ul>

Creates an unordered/ bulleted list.

<ul>The Four Primary Design Principles are: <li>Balance</li>
<li>Contrast</li>
<li>Unity</li>
<li>Value & Color</li>
</ul>
    The Four Primary Design Principles are:
  • Balance
  • Contrast
  • Unity
  • Value & Color
<dl> </dl>

Creates a definition list

 <dl>
<dt>Hyperlink</dt>
<dd>"A relationship between two anchors, called the head and the tail. The link goes from the tail to the head. The head and tail are also known as destination and source, respectively."</dd>
</dl>
Hyperlink
"A relationship between two anchors, called the head and the tail. The link goes from the tail to the head. The head and tail are also known as destination and source, respectively."
<dt> </dt>

Used to format the term in a definition list.
<dd> </dd>

Used to format the definition in a definition list.
Hyperlinks and Images
<a> </a>

Creates a hyperlink

Attributes:
href=URL
name=Name

 <p>
<a href="http://www.w3.org">
W3C</a> Links to another site </p>

<p><a href="htmlinks.html">
Sites</a> Links to a Page at same Site </p>
<p><a href="#bottom">
Bottom of Page</a> Links to a target in the document</p>

<p><a href=
"mailto:Sksteinbr@aol.com">
Sksteinbr@aol.com</a>
Links to Email</p>

<p>Creates a target
"<a name=bottom> Bottom of Page</a>"</p>

W3C Links to another site

Sites Links to a Page at same Site

Bottom of Page Links to a target in the document

Sksteinbr@aol.com Links to Email

Creates a target "Bottom of Page"

<img>

Inserts an image.

Attributes:
src="source name"
border=# of pixels

<img src="v_sign.gif">

 

[ Top of Page ]
[ Temple of Learning ] [ HTML Lab 1 ]
[ TheDoors ] [ Links to Resources ]

: - ) sharon

Sksteinbr@aol.com

Revised 11/25/2002

 1