Reference: HTML Reference Page

*Page skeleton
*Lists
*Tables

*Color settings
*Links
*Frames

*Text
*Images
*Forms

*Page layout
*Lines
*Image maps

Html Tag Reference List

Basic Page Skeleton.

<html></html>
Tells the browser this is a HTML document and shows that you expect it to be able to be seen on the World Wide Web!
<head></head>
Means you are going to include some information which is not exactly going to be seen on your Web page, but is provided about your document.
<title></title>
Puts the name of the document in the title bar
<body></body>
The meat and potatoes of your Web page, that people see, goes between these tags.
This is the comment tag. Everything in the comment tag is ignored by the browser and doesn't show up on a Web page. Helps a would-be programmer write notes about his/her html for future reference about what earth they thought they were doing.

<HTML>
<HEAD>
<TITLE> Own Title </TITLE>
</HEAD>
<BODY>
Page contents.
</BODY>
</HTML>

brown bar thingy
Body tag color commands.

<body bgcolor="?">
Determines your page's background color, using one of the 16 color names or RGB codes.
<body text="?">
Determines your page's text color, using one of the 16 color names or RGB codes.
<body link="?">
Determines the color of your page's unvisited links, using one of the 16 color names or RGB codes.
<body vlink="?">
Determines the color of your page's visited links, using one of the 16 color names or RGB codes.
<body alink="?">
Determines the color of your page's links when they are clicked on, using one of the 16 color names or RGB codes.
<body background="name.gif/jpg">
Uses an image, (gif or jpeg), as your page's background.

brown bar thingy
Text Tags.

<u></u>
Anything between these tags will be underlined.
<i></i>
Anything between these tags will be in italics.
<b></b>
Anything between these tags will be bold.
<tt></tt>
Use for uniform,typewriter text.
<font size="?"></font>
Font sizes ranging from 1 (smallest) to 7 (largest).
<font face="?"></font>
For different font styles.
<font color="?"></font>
For different font colors using one of the
16 color names or RGB codes.
<h1></h1> - <h6></h6>
For different sized headlines ranging from
h1(largest) to h6(smallest).
<pre></pre>
For preformatted text

brown bar thingy
Page layout.

<p>
Use for a new paragraph.
<br>
Use <BR> to start a fresh, new line.
<blockquote></blockquote>
Text between these tags will be 'block indented'.
<center></center>
Anything between these tags will be centered.
<div align="left/center/right"> </div>
Everything between these tags will be aligned to the left, center or right of your page.
<p align="left/center/right"> </p>
Aligns a paragraph to the left, right, or center of your page.

brown bar thingy
List tags.

<ul></ul>
Used to make an unordered or bulleted list.
<ul> <li type="disc/circle/square"> </ul>
type="disc" creates round, filled-in bullets.
type="circle" creates round, unfilled bullets.
type="square" creates square bullets.
<ol></ol>
Used to make an ordered or numbered list.
<ol> <li type="1/ I,i / A,a"> </ol>
type="1" creates numbers before each list item.
type="I/i" creates roman numerals before each list item.
type="A/a"creates alphabet letters before each list item.
*For roman numerals and the alphabet, you can choose between upper and lowercase.
<li>
Put before each list item in ordered and unordered lists.
-Makes a bullet in bullet lists.
-Makes a number in numbered lists.
<dl></dl>
Used to make a definition list.
<dt>
DT=Definition Term and is put before each topic or term.
<dd>
DD=Definition Data and is put before each each definition or explanation.
With this tag you write whatever text you like that you want to come under the topic or term you wrote.

brown bar thingy
Links.

<a href="url"> Click on this text.</a>
Makes a hyperlink from text.
<a href="url" target="_blank"> Dum de dum...</a>
Makes a hyperlink that will open in a new browser window.
<a href="url" target="_top"> Dum de dum...</a>
Makes a hyperlink that will open in the full browser window.
<a href="url" target="_self"> Dum de dum...</a>
Makes a page open in the same browser window or frame. In fact, if a target is not included in the direction, then it will always open in the same browser window or frame so...
<a href="url"> <img src="?"> </a>
Makes a hyperlink from an image.
<a href="url"><img src="?" border="0"> </a>
Makes a hyperlink from an image without a border.
<a href="mailto:email"></a>
Allows people to contact you through an e-mail, mailto link.
<a name="name"></a>
Makes a target location within a document
<a href="#name"></a>
Links to that target location from elsewhere in your site.

brown bar thingy
Non-text picture stuff.

<img src="image name">
Puts a picture on your page.
<img src="image name" align="?">
To change the position of an image on your page insert, align="left/right/top/bottom/center" into the image tag.
<img src="image name" hspace="?">
To create a space to the left and right of a picture put hspace="?" in the image tag.
hspace="?" is the attribute representing horizontal space.
<img src="image name" vspace="?">
To create a space above and below a picture, put vspace="?" in the 'image tag.
vspace="?" is the attribute representing vertical space.
<img src="image name" height="?">
Used to set the height of your image. (in pixels)
<img src="image name" width="?">
Used to set the width of your image. (in pixels)
<img src="image name" border="?">
Sets size of border around an image. (in pixels)

brown bar thingy
Horizontal line tags.

<hr>
Makes a line across your page.
<hr size="?">
Determines the height (in pixels) you want your line to be.
<hr width="?">
Alters how long your rule stretches across your page.
in percentage or pixels.
<hr noshade>
Makes a dark or filled-in line.
<hr color="?">
Changes the color of your line using one of the 16 color names or RGB codes. (Only for Internet Explorer 4+)
<hr align="left/center/right">
Add align="left/center/right to the <hr> tag, to make your line appear to the left, center or right of your page. If not added, your line will automatically be centered.

brown bar thingy
Table Tags

<table></table>
Information between these 2 tags will be set in a table.
<tr></tr>
Information between these 2 tags will be in a horizontal row across your table. Within each table row are a number of blocks or cells called TD.
<td></td>
Information between these 2 tags will be put in one block or table cell within a table row.
<th></th>
Make an individual column or row heading in your table
Basically a normal cell with bold, centered text.
<table border="?">
Gives your table a border. (Border size is set in pixels.)
<table width="?">
Changes the table width using a % or numerical value.
<table width="?">
Changes the height of a table using a numerical value.
<td align="left/center/right">
Positions data horizontally within table cells if put in the <TD> tag.
<tr align="left/center/right">
Positions data horizontally within a table row.
<td valign="top/middle/bottom">
Positions data vertically within table cells if put in the <TD> tag.
<tr valign="top/middle/bottom">
Positions data vertically within table a table row.
<td colspan="?">
Determines how many columns a single td cell will stretch across.
<td colspan="2"> - table cell will stretch across 2 columns.
<td rowspan="?">
Determines how many rows a single td cell will stretch down.
<td rowspan="2"> - table cell will stretch down 2 rows.
<table cellspacing="?">
Determines the amount of space between <TD> cells.
<table cellpadding="?">
Determines the amount of space between the walls of the table's cells and whatever information is inside the cells.
<tr bgcolor="?">
Changes the background color of a table row using one of the 16 color names or RGB codes.
<td bgcolor="?">
Changes the background color of an individual <TD> cell using one of the 16 color names or RGB codes.
<td nowrap>
Stops the lines within a cell from being broken to fit he table.

Frame Tags.

<frameset></frameset>
tag in a frames document; can also be nested in other framesets
<frameset rows="?, ?">
Defines the rows in a frameset, using number in pixels or width %.
<frameset cols="?, ?">
Defines the columnsin a frameset, using number in pixels, width %.
<frame>
Defines an individual frame or area within a frameset
<frame src="url">
Specifies which HTML document or page should appear.
<frame name="chosen name">
Gives a name to a frame, or region, so it may be targeted by other frames.
<noframes></noframes>
Put a message, a link or an entirely new page between these tags for people using browsers that don't support frames.
<frame marginwidth="?">
Sets the margin width in pixels of the left and right sides of your frame. Should set at a value of 1 or more.
<frame marginheight="?">
Sets your frame's top and bottom margin widths in pixels.
Should set at a value of 1 or more.
<frame scrolling="yes/no/auto">
Put scrolling="yes/no/auto" in the frame src tag to set that frame's scrollbar. Don't add this and the scrolling is automatically set at auto.
<frame noresize>
Means you, the user, can't resize a frame with your cursor and spoil the intended look of a page.

brown bar thingy
Form Tags.

<form></form>
Creates a form.
<input type="text" name="name" size="20">
For a single-line text box 20 pixels long. Size sets length.
<textarea name="name" cols=30 rows=5></textarea>
For a text box area 30 columns wide and 5 rows deep. Columns set the width; rows set the height.
<input type="checkbox" name="name">
For a simple checkbox.
Text you want beside the checkbox is placed after the tag.
<input type="radio" name="name" value="?">
For a form's radio button. Text follows tag Text you want beside the radio button is placed after the tag.
<select name="name" size="?"></select>
For a pop-up box or pulldown menu from which the user can select 1 option. Size determines the number of menu items shown on the page before you need to click and scroll.
<select name="name" multiple></select>
For a menu from which the user can select or choose more than one answer option.
<option>
The <OPTION> tag is used in a form, after <SELECT>.
It has 2 commands:
selected - initially selects the option.
*If you have a pop-up list in which only 1 line is visible. (size="1") then, option selected put before one of your answer choices will make it the answer that appears in your white box.
*If your entire list of answer options is visible (size="No of answer options") then, option selected will cause that particular answer to be hi-lited blue.
value - teaches the value to the form for processing.
<input type="submit" value="name">
For a send/submit button.
<input type="image" border=0 name="name" src="?.gif">
For a send/submit button using an image instead of text.
<input type="reset">
For a clear/reset button

brown bar thingy
Image Map Tags.

<map></map>
Used for image maps to describe each 'clickable' area in the image and where the area links to when clicked on.
<map> <area></map>
Link information, plus the shape and coordinates of the clickable areas on the image are contained in the <area> tag.
<map name="?"></map>
The map code needs a name so that the <IMG> tag knows to refer to it for the map information.

To the top

Thank you for visiting this page
Click to peruse our SpinNet Homepage.

Page created by Kimberly Rigby. / For any comments or questions,click here!