HTML Cheat sheet

A quick reference to basic HTML tags, and their uses

 

 

Welcome to my HTML cheat sheet.  This is a quick reference in case you just can’t remember a particular tag.   The tags themselves are in red.

 

 

Basic Tags

 

<html></html>

Creates an HTML document

 

<head></head>

sets off the title and other information that isn’t displayed on the web page itself

 

<title></title>

puts the name of  the document in the title bar

 

 

Body Attributes

 

<body bgcolor=?>

sets the background color using name or hex value

may or may not require qoutes

 

<body bg properties=fixed>

causes the background not to scroll while the content scrolls

 

<body text=?>

sets the text color using name or hex value

 

<body link=?>

sets the link color using name or hex value

 

<body vlink=?>

sets the visited link color using name or hex value

 

<body alink=?>

sets the color of links on click(active link)

 

 

 

Text Tags

 

<pre></pre>

creates pre formatted text

 

<h1></h1>

creates the largest headline

 

<h6></h6>

creates the smallest headline

 

<b></b>

creates bold text

 

<i></i>

creates italicized text

 

<tt></tt>

creates teletype, or typewriter style text

 

<cite></cite>

creates a citation, usually italic

 

<em></em>

emphasizes a word(with italic or bold)

 

<strong></strong>

emphasizes a word(with bold or italic)

 

<font size=?></font>

sets size of font from 1  to 7

 

<font color=?></font>

sets font color using name or hex value

 

 

Links

 

<a href=”url”>link text, or image tag</a>

creates a hyperlink

 

<a href=”mailto:email”>link text or image tag</a>

creates a mailto link

 

<a href=”url” target=”?”>link text or image tag</a>

loads the page into the specified frame or window, target can be:  frame name, _blank

 

<a name=”NAME”></a>

creates a target location within a document

 

<a href=”#NAME”></a>

links to the target location from elsewhere in the document

 

 

Formatting

 

<p></p>

creates a new paragraph

 

<p align=?>

Aligns paragraph to the right, left, or center

 

<br>

inserts a line break

 

<blockqoute></blockqoute>

indents text from both sides

 

<dl></dl>

creates a definition list

 

<dt>

precedes each definition term

 

<dd>

precedes each definition

 

<ol></ol>

creates a numbered list

 

<li></li>

creates each list item, and adds a number

 

<ul></ul>

creates a bulleted list

 

<div align=?>

a generic tag used to format large blocks of HTML, also used for stylesheets

 

 

Graphics

 

<img src=”path/name”>

adds an image

 

<img src=”path/name” target=”_blank”>

forces the image into a new browser window

useful for large photos, thumbnail galleries

 

<img src=”path/name” align=?>

aligns an image: left, right, center, bottom, top, middle

 

<img src=”path/name” border=?>

sets size of border around an image

 

<hr>

inserts a horizontal rule

 

<hr size=?>

sets height of rule

 

<hr width=?>

sets width of rule, in percentage or absolute value

 

<hr noshade>

creates a rule without a shadow

 

 

Tables

 

<table></table>

creates a table

 

<tr></tr>

sets off each row in a table

 

<td></td>

sets off each cell in a row

 

<th></th>

sets off the table header

(a normal cell with bold, centered text)

 

 

Table Attributes

 

 

<table border=#>

sets width of border around table cells

 

<table cellspacing=#>

sets amount of space between table cells

 

<table cellpadding=#>

sets the amount of space between a cells border, and its contents

 

<table width=# or %>

sets width of table in pixels, or as a percentage of document width

 

<tr align=?> or <td align=?>

sets alignment for cell or cells (left, right, center)

 

<tr valign=?> or <td valign=?>

sets vertical alignment for cells (top, middle, or bottom)

 

<td colspan=#>

sets the number of columns a cell should span

 

<td rowspan=#>

set the number of rows a cell should span (default=1)

 

<td nowrap>

prevents  the lines within  a cell from being broken to fit

 

 

Frames

 

<frameset></frameset>

replaces the body tag in a frames document, can also be nested in other framesets

 

<frameset rows=”value,Value”>

defines the rows within a frameset, using number in pixels, or % of width

 

<frameset cols=”value, value”>

defines the number of columns in a frameset, using the number of pixels, or % of width

 

<frame>

defines a single frame, or region within a frameset

 

<nobanner>

forces banner ads placed by script into a pop up window

 

<noframes></noframes>

defines what will appear in browsers that do not support frames

 

 
Frames Attributes

 

<frame src=”url”>

specifies which HTML document should be diplayed initially

 

<frame name=”name”>

names the frame so that it may be targeted by links, and other frames

 

<frame marginwidth=#>

defines the left and right margins for the frame, must be equal to or greater than 1

 

<frame marginheight=#>

defines the top and bottom margins for the frame, must be equal to or greater than one

 

<frame scrolling=value>

sets whether the fram has a scrollbar, yes, no, or auto

default is auto

 

<frame noresize>

prevents the user from resizing the frame

 

 
Forms

For forms to do anything, you will have to run a CGI script.  The HTML just creates the appearance of the form

 

<form></form>

creates all forms

 

<select multiple name=”name” size=?></select>

creates a scrolling menu. Size sets the number of items before you need to scroll

 

<option>

sets off each menu item

 

<select name=”name”></select>

creates a pulldown menu

 

<option>

sets off each menu item

 

<textarea name=”name” cols=40 rows=8></textarea>

creates a text box area, columns set the width, rows set the height

 

<input type=”checkbox” name=”name”>

creates a checkbox, text follows tag

 

<input type=”radio” name=”name” value=”x”>

creates a radio button, text follows tag

 

<input type=text name=”foo” size=20

creates a one line text area, size sets length in characters

 

<input type=”submit” value=”name”

creates a submit button

 

<input type=”image” border=0 name=”name” src=”/path/name”>

creates a submit button using an image

 

<input type=”reset”>

creates a reset button