HTML Quick Reference Sheet

TAGS THAT SET UP THE DOCUMENT

<HTML>
Tells browser file is in HTML format.
</HTML>
<HEAD>
Info. not displayed in browser window.
</HEAD>
<TITLE>
Title, appears in top bar of browser.
</TITLE>
<BODY>
Material displayed in browser window.
</BODY>
Example:
<HTML>
<HEAD>
<TITLE> Title of Page </TITLE>
</HEAD>
<BODY>
Material displayed in browser window
</BODY>
</HTML>

TAGS THAT AFFECT TEXT

<H#> Headings </H#>, # can be 1 to 6:
<H1>

largest heading size

 </H1>
<H6>
smallest heading size
 </H6>
<P> Paragraph.

<BR> Line break.

<BLOCKQUOTE>

Blockquote text.
</BLOCKQUOTE> <CENTER>
Centered text.
</CENTER>

<I>Italicized text.</I>

<B>Bold text.</B>

LISTS

Bulleted List

<UL>
<LI> Item One.
<LI> Item Two.
</UL>

Example:

  • Item One.
  • Item Two.
Ordered List

<OL>
<LI> Item One.
<LI> Item Two.
</OL>

Example:

  1. Item One.
  2. Item Two.
Nested List

<UL>
<LI> Item One.
<UL>
<LI> Sub-Item 1.
<LI> Sub-Item 2.
</UL>
</UL>

Example:

  • Item One.
    • Sub-Item 1.
    • Sub-Item 2.

LINKS

Absolute Click <A HREF= "http://address/filename.html"> here. </A>
Relative Click <A HREF= "filename.html"> here. </A>
Same Page Mark where to link to:
This is where I want you to <A NAME="SOMENAME">link to. </A>
Link to get there:
Click <A HREF="#SOMENAME">here. </A>

GRAPHICS

<HR> Inserts horizontal rule, or line.
<IMG attributes SRC="graphics file name or URL" > Places an image on the page.

Optional attributes include:

ALT="text", specifies alternative text if graphic cannot be displayed.
ALIGN=left or right , positions graphic against left or right margin of page.
HSPACE=x , inserts x pixels to the left and right of the image.
VSPACE=x , inserts x pixels to the top and bottom of the image.
WIDTH=x and HEIGHT=x , specifies graphics' size.
BORDER=x , specifies width of border.

TABLES

A table with k rows and n columns of cells containing data is specified as follows:

<TABLE table-attributes>

<TR> // row 1
<TD datum-attributes>row 1 column 1</TD>
... // row 1, columns 2 through n-1 go here
<TD datum-attributes>row 1 column n</TD>
</TR>
... // rows 2 through k-1 go here
<TR> // row k
<TD datum-attributes>row k column 1</TD>
... // row k, columns 2 through n-1 go here
<TD datum-attributes>row k column n</TD>
</TR>
</TABLE>

Use the special token &nbsp; as the contents of an empty table cell.

Optional table-attributes include:

BORDER=x, sets width of the border, in pixels. Omit or set to 0 if border not wanted.
CELLSPACING=x, sets width of space separating the cells of a table

Optional datum-attributes include:

ALIGN=left or center or right, specifies horizontal alignment of datum in cell.
VALIGN=top or middle or bottom , specifies vertical alignment of datum in cell.
WIDTH=x , specifies width of the cell in pixels, or percent of table width if ends in %.
HEIGHT= x , specifies height of the cell in pixels, or percent of table height if ends in %.
BGCOLOR =color, specifies background color of the cell.

Example:
<TABLE BORDER=3>
<TR>
<TD>Row 1 Column 1</TD>
<TD>Row 1 Column 2</TD>
</TR>
<TR>
<TD>Row 2 Column 1</TD>
<TD>Row 2 Column 2</TD>
</TR>
</TABLE>
Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2

Nested Example:
<TABLE BORDER=1>
<TR>
<TD>Row 1 Column 1
<TABLE BORDER=1>
<TR>
<TD>Here's a</TD>
<TD>Nested Table</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
Row 1 Column 1
Here's a Nested Table