This site hosted by Free.ProHosting.com
Google

M A S T A   T O W N  :  WEB-RES  :  HTML Guide

This quick reference guide can help both beginners and intermediates on HTML.

HTML Document | Headings | Font Sizes | Font Colors | Font Faces | Font Styles | Font Example | Text Link | Picture | Picture Link | Lists | Basic Table | Table w/ Colspan | Table w/ Rowspan | Table Features | Alignment | Horizontal Ruler | Scrolling Marquee

HTML Document
<html>
<head>
<title>Document Title</title>
</head>
<body>

Page Content
All the below codes belong here

</body>
</html> 		Main attributes in the body tag:
bgcolor="FFFFFF" - background color
link="0000FF" - link color
vlink="00FF00" - visited link color
alink="FF0000" - active link color
BACK TO TOP

Headings

Heading 1

<h1>Heading 1</h1>

Heading 2

<h2>Heading 2</h2>

Heading 3

<h3>Heading 3</h3>

Heading 4

<h4>Heading 4</h4>
Heading 5
<h5>Heading 5</h5>
Heading 6
<h6>Heading 6</h6>
NOTE: Personally, I don't recommend Headings.  I prefer to stick with fonts.
BACK TO TOP

Font Sizes
Size 7<font size="7">Size 7</font>
Size 6<font size="6">Size 6</font>
Size 5<font size="5">Size 5</font>
Size 4<font size="4">Size 4</font>
Size 3<font size="3">Size 3</font>
Size 2<font size="2">Size 2</font>
Size 1<font size="1">Size 1</font>
NOTE: There are only 7 font sizes that you can use in HTML.
BACK TO TOP

Font Colors
Black<font color="000000">Black</font>
White<font color="FFFFFF">White</font>
Red<font color="FF0000">Red</font>
Green<font color="00FF00">Green</font>
Blue<font color="0000FF">Blue</font>
Yellow<font color="FFFF00">Yellow</font>
Purple<font color="8000FF">Purple</font>
Purple2<font color="6600CC">Purple2</font>
NOTE: For more HTML safe colours visit my HTML Colours.
BACK TO TOP

Font Faces
Times<font face="Times New Roman">Times</font>
Comic<font face="Comic Sans MS">Comic</font>
Arial<font face="Arial">Arial</font>
Verdana<font face="Verdana">Verdana</font>
Impact<font face="Impact">Impact</font>
Courier<font face="Courier">Courier</font>
Wingdings<font face="Wingdings">Wingdings</font>
NOTE: Be sure to use common fonts or else a font that is uncommon might not appear on someone's screen if they don't have it on their computer.
BACK TO TOP

Font Styles
Bold<b>Bold</b>
Italic<i>Italic</i>
Underline<u>Underline</u>
Strikeout<strike>Strikeout</strike>
Normal SubNormal <sub>Sub</sub>
BACK TO TOP

Font Example
The following is an example using all the attributes of the font tag.
Size 4, Color Red, Face Arial, Italic
<font size="4" color="FF0000" face="Arial"><i>Size 4, Color Red, Face Arial, Italic</i></font>
BACK TO TOP

Text Link
Plain text - don't click
<a href="anylink.html">Plain text link - don't click</a>
Decorated text link - don't click
<a href="anylink.html"><font size="5" face="Impact">Decorated text link you don't have to click</font<>/a>
BACK TO TOP

Picture
The below code shows an average image tag with all it's attributes like width, where x represents the width of the image; height, where y represents the height of the image; and alt, which gives the image an alternative text that appears when the cursor is on the image or when the image is not loaded.
<img src="picture.gif" width="x" height="y" alt="Alternative Text">
Picture
<img src="picture.gif" width="200" height="30" alt="Picture">
BACK TO TOP

Picture Link
Linked Picture
<a href="anylink.html"><img src="linkpic.gif" width="200" height="30" alt="Linked Picture" border="0"></a>
NOTE: When linking pictures you can get rid of the border, which is a line that surrounds the image, by adding border="0" like I have done above.
BACK TO TOP

Lists
NAME EXAMPLE HTML CODE
Ordered List
  1. OL Item 1
  2. OL Item 2
  3. OL Item 3
 <ol>
<li>OL Item 1
<li>OL Item 2
<li>OL Item 3
</ol>
Un-numbered List
  • UL Item 1
  • UL Item 2
  • UL Item 3
 <ul>
<li>UL Item 1
<li>UL Item 2
<li>UL Item 3
</ul>
Definition List
Term 1
Description 1
Term 2
Description 2
 <dl>
<dt>Term 1
<dd>Description 1
<dt>Term 2
<dd>Description 2
</dl>
BACK TO TOP

Basic Table
Row One - Column 1 Row One - Column 2 Row One - Column 3
Row Two - Column 1 Row Two - Column 2 Row Two - Column 3
<table border="1" cellpadding="2" cellspacing="2">
<tr>
<td>Row One - Column 1</td>
<td>Row One - Column 2</td>
<td>Row One - Column 3</td>
</tr>
<tr>
<td>Row Two - Column 1</td>
<td>Row Two - Column 2</td>
<td>Row Two - Column 3</td>
</tr>
</table>
NOTE: The table tag contains a border attribute (no border is border="0"), cellpadding, cellspacing (experiment with the numbers of cellpadding and cellspacing), and usually width, which can be in pixels (ie. width="40") or as a percent (ie. width="70%").
BACK TO TOP

Table with Colspan
Row One - Columns 1 to 3
Row Two - Column 1 Row Two - Column 2 Row Two - Column 3
<table border="1" cellpadding="2" cellspacing="2">
<tr>
<td colspan="3">Row One - Columns 1 to 3</td>
</tr>
<tr>
<td>Row Two - Column 1</td>
<td>Row Two - Column 2</td>
<td>Row Two - Column 3</td>
</tr>
</table>
BACK TO TOP

Table with Rowspan
Column One - Rows 1 Column Two - Row 1 Column Three - Row 1
Column Two - Row 2 Colums Three - Row 2
<table border="1" cellpadding="2" cellspacing="2">
<tr>
<td rowspan="2">Column One - Rows 1</td>
<td>Column Two - Row 1</td>
<td>Column Three - Row 1</td>
</tr>
<tr>
<td>Column Two - Row 2</td>
<td>Column Three - Row 2</td>
</tr>
</table>
BACK TO TOP

Table Features
Left Aligned Centered Right Aligned
Top Middle Bottom
35 Height 120 Width Red BG Colour
<table border="1" cellpadding="2" cellspacing="2" width="490">
<tr>
<td align="left">Left Aligned</td>
<td align="center">Centered</td>
<td align="right">Right Aligned</td>
</tr>
<tr height="50">
<td valign="top">Top</td>
<td valign="middle">Middle</td>
<td valign="bottom">Bottom</td>
</tr>
<tr>
<td height="35">35 Height</td>
<td width="120">120 Width</td>
<td bgcolor="red">Red BG Color</td>
</tr>
</table>
BACK TO TOP

Alignment

Paragraph Left

 <p>Paragraph Left</p>

Paragraph Center

 <p align="center">Paragraph Center</p>

Paragraph Right

 <p align="right">Paragraph Right</p>
For the below tag, you can use any HTML object, such as links, images, tables, etc. to center.
Object Center
 <center>Object Center</center>
BACK TO TOP

Horizontal Ruler
<hr>
<hr width="350" align="right">
(I.E. Only)
<hr color="FF0000" width="40%">
BACK TO TOP

Scrolling Marquee (I.E. Only)
SIMPLE MARQUEE
<marquee>SIMPLE MARQUEE</marquee>
DETAILED MARQUEE
<font face="Arial"><marquee width="200" bgcolor="000099" scrollamount="3" scrolldelay="10">DETAILED MARQUEE</marquee></font>
NOTE: You can use all or some of the attributes for the marquee tag.  I have just shown the common ones so you can see what each does.
BACK TO TOP

More still to come... like learning frames and Java Script codes.
Let me know if this HTML reference guide has helped you.

© 1999 MASTA TOWN Ltd.  All Rights Reserved.
this site is created by mastatown@hotmail.com






Just a counter
Click Here!