HTML Cheat Sheet

The Four Required Tags

<html>,
</html>

Enclose all HTML code in these tags. Start and end your file with these tags.

<head>,
</head>

Nest inside the <html> element.

<title>text</title>

      

Nest inside the <head> element. Makes text the title of your webpage -- it appears in the title bar of your browser.

<body>,
</body>
bgcolor="color"

text="color"

link="color"

vlink="color"

alink="color"

background="url"

Nest inside the <html> element

Set the background of the page.
Set the text color.
Set the (non-visited) link color.
Set the visited link color.
Set the active link color.
Set the background of the page (a tiled image)

Text Formatting

<i>text</i>

      

Italicizes text.

<b>text</b>

      

Makes text bold.

<p>
align="location"

Breaks a paragraph where you put this tag. Closing tag optional.

If you use the align attribute, use the closing tag, and enclose the entire paragraph between the opening and closing tags.
"location" can be "left", "center", or "right". This will justify the text in the paragraph to the left or right, or center it.

<br>

      

Breaks the current line of text where you put this tag. No closing tag.

<hr>
align="location"

color="color"

size="number"

width="number"

Draw a horizontal rule (line). No closing tag.

"location" should be "left", "right", or "center"
"color" should be a color name or RGB code.
"size" is in pixels -- represents the height of the bar.
"number" is either in pixels or is a percent (ex: "140" or "85%")

<h1>text</h1> through <h6>text</h6>
align="location"

Makes text a heading. h1 (level 1 heading) is the most important heading, h6 the least important.

"location" can be "left", "right", or "center"

<font>text</font>
face="name"

size="number"

color="color"

Changes the font style for text.

Change the face of the font. For "name", try "sans-serif", for a clean look.
For "number", use a number 1-7 for an absolute size, or "-7" to "+7" for a relative size.
"color" can be the name of a color or an RGB code.

<center>,
</center>

Centers everything between the opening and closing tags.

Displays text with all linebreaks, spaces, and tabs intact.
(Recall that usually HTML ignores those things.)

Lists (can be nested)

<ol>,
</ol>

Makes an ordered (numbered) list.

<ul>,
</ul>

Makes an unordered (bulleted) list.

<li>

      

Place inside your <ol> or <ul> element. Each item in your list should begin with this tag. Closing tag optional.

Hyperlinks

href="url"

Makes a link (anchor) out of text. text can contain other HTML tags, like images.

"url" should be the URL of the document to link to. Can be absolute or relative.

Images

<img>

src="url"
align="location"
border="number"
alt="text"
vspace="number"
hspace="number"
height="number"
width="number"

Put an image in your webpage wherever this tag is located. No closing tag.

"url" is the URL of the image. Can be absolute or relative.
"location" can be "left", "right", "top", "middle", "bottom"
"number" is the size of the border around the image; only applies inside links
"text" is the alternative text displayed if the image is not shown (for whatever reason)
vspace and hspace set the number of pixels to pad the image with (vertically/horizontally)
height and width set the number of pixels that the height and width of the image should take up.

Tables

<table>,
</table>
cellspacing="number"

cellpadding="number"

border="number"

width="number"

bgcolor="color"

Put your table inside these tags.

Set the number of pixels separating cells from each other.
Set the number of pixels separating the text in a cell from its edges.
Set the size of the border around the table.
"number" is either in pixels or is a percent (ex: "140" or "85%")
bgcolor sets the background color of the table.

<tr>,
</tr>
can use align, valign, bgcolor

      

Each row of your table goes inside these tags.

(see below for description of these attributes)

<td>text</td>
colspan="number"

rowspan="number"

align="location"

valign="location"

width="number"

bgcolor="color"

Each cell of your table is represented by one of these tags. text is displayed in the cell. text can include almost anything HTML can do: images, links, lists, other tables, etc.

colspan and rowspan let this cell of the table take up more than one column or row. Specify the number of columns or rows
this cell should take up.
align can be "left", "right", "center"; valign can be "top", "middle", "bottom"
"number" is either in pixels or is a percent (ex: "140" or "85%")
bgcolor sets the background color of this particular cell.

The Four Required Tags
<html>, </html>	Enclose all HTML code in these tags. Start and end your file with these tags.
<head>, </head>	Nest inside the <html> element.
<title>text</title>	Nest inside the <head> element. Makes text the title of your webpage -- it appears in the title bar of your browser.
<body>, </body> bgcolor="color" text="color" link="color" vlink="color" alink="color" background="url"	Nest inside the <html> element Set the background of the page. Set the text color. Set the (non-visited) link color. Set the visited link color. Set the active link color. Set the background of the page (a tiled image)

Text Formatting
<i>text</i>	Italicizes text.
<b>text</b>	Makes text bold.
<p> align="location"	Breaks a paragraph where you put this tag. Closing tag optional. If you use the align attribute, use the closing tag, and enclose the entire paragraph between the opening and closing tags. "location" can be "left", "center", or "right". This will justify the text in the paragraph to the left or right, or center it.
<br>	Breaks the current line of text where you put this tag. No closing tag.
<hr> align="location" color="color" size="number" width="number"	Draw a horizontal rule (line). No closing tag. "location" should be "left", "right", or "center" "color" should be a color name or RGB code. "size" is in pixels -- represents the height of the bar. "number" is either in pixels or is a percent (ex: "140" or "85%")
<h1>text</h1> through <h6>text</h6> align="location"	Makes text a heading. h1 (level 1 heading) is the most important heading, h6 the least important. "location" can be "left", "right", or "center"
<font>text</font> face="name" size="number" color="color"	Changes the font style for text. Change the face of the font. For "name", try "sans-serif", for a clean look. For "number", use a number 1-7 for an absolute size, or "-7" to "+7" for a relative size. "color" can be the name of a color or an RGB code.
<center>, </center>	Centers everything between the opening and closing tags.
<pre>text</pre>	Displays text with all linebreaks, spaces, and tabs intact. (Recall that usually HTML ignores those things.)


Lists (can be nested)
<ol>, </ol>	Makes an ordered (numbered) list.
<ul>, </ul>	Makes an unordered (bulleted) list.
<li>	Place inside your <ol> or <ul> element. Each item in your list should begin with this tag. Closing tag optional.

Hyperlinks
<a>text</a> href="url"	Makes a link (anchor) out of text. text can contain other HTML tags, like images. "url" should be the URL of the document to link to. Can be absolute or relative.

Images
<img> src="url" align="location" border="number" alt="text" vspace="number" hspace="number" height="number" width="number"	Put an image in your webpage wherever this tag is located. No closing tag. "url" is the URL of the image. Can be absolute or relative. "location" can be "left", "right", "top", "middle", "bottom" "number" is the size of the border around the image; only applies inside links "text" is the alternative text displayed if the image is not shown (for whatever reason) vspace and hspace set the number of pixels to pad the image with (vertically/horizontally) height and width set the number of pixels that the height and width of the image should take up.

Tables
<table>, </table> cellspacing="number" cellpadding="number" border="number" width="number" bgcolor="color"	Put your table inside these tags. Set the number of pixels separating cells from each other. Set the number of pixels separating the text in a cell from its edges. Set the size of the border around the table. "number" is either in pixels or is a percent (ex: "140" or "85%") bgcolor sets the background color of the table.
<tr>, </tr> can use align, valign, bgcolor	Each row of your table goes inside these tags. (see below for description of these attributes)
<td>text</td> colspan="number" rowspan="number" align="location" valign="location" width="number" bgcolor="color"	Each cell of your table is represented by one of these tags. text is displayed in the cell. text can include almost anything HTML can do: images, links, lists, other tables, etc. colspan and rowspan let this cell of the table take up more than one column or row. Specify the number of columns or rows this cell should take up. align can be "left", "right", "center"; valign can be "top", "middle", "bottom" "number" is either in pixels or is a percent (ex: "140" or "85%") bgcolor sets the background color of this particular cell.

CMPSCI 120 HTML Cheat Sheet