<a href="http://c.casalemedia.com/c?

s=68472
src="http://as.casalemedia.com/s?s=68472&u=http%3A

Quick HTML Coding Reminders width="300" height="250" border="0"></

Home | Easy to Use Hex Code Color Picker

Formatting

Code Sample Description

<b>text</b> text Makes text bold
<i>text</i> text Makes text italics
<u>text</u> text Makes text underlined
_text text Lowers text and makes it smaller. eg. Ag12
text
^text Raises text and makes it smaller. eg. 1010
Makes text blink in some browsers. Try and
<blink>text</blink> text
avoid.
<strike>text</strike> text Strikes through a line as in crossed out
<tt>text</tt> text Makes the text appear as on a classic typewriter
<pre>text</pre> text Makes text exactly as it is, including spaces.
<em>text</em> text Makes text bold
<strong>text</strong> text Makes text italics

Resizing

Code Sample Description

<big>text</big> text increase the size by one
<small>text</small> text decrease the size by one

<h1>text</h1> writes text in biggest heading

text
<h6>text</h6> text
writes text in smallest heading
 <font size="1">text</font> text writes text in smallest font size. (8 pt)

<font size="7">text</font>
text writes text in biggest font size (36 pt)

Layout

Code Description
Adds paragraph break after the text. Normally two line
<p>text</p>
breaks
<p align="left">text</p> Justify text in paragraph to left
<p align="center">text</p> Justify text in paragraph to center
<p align="right">text</p> Justify text in paragraph to right
text<br> Adds a single line break where the tag is
Turns off automatic line breaks - even if text is wider
<nobr>text</nobr>
than the window.
Allows the browser to insert a line break at exactly this
text<wbr>
point - even if the text is within <nobr> tags.
<center>text</center> Center the text
<div align="center">text</div> Center text
<div align="left">text</div> Left justify text
<div align="right">text</div> Right justify text

Listing

<ul> = Unordered List

Code Description
Makes a bulleted list using the default bullet
<ul>
type:
<li>text</li>
 text
<li>text</li>
 text
<li>text</li>
</ul>
 text
Starts a bulleted list using discs as bullets:
 This is one line
<ul type="disc">  This is another line

And this is the final line


<ul type="circle"> Starts a bulleted list using circles as bullets:
o This is one line
 o This is another line

o And this is the final line

Starts a bulleted list using squares as bullets:
 This is one line
<ul type="square">  This is another line

 And this is the final line

<ol> = Ordered List

Code Description
Makes a numbered list using the default
<ol>
number type:
<li>text</li>
1. text
<li>text</li>
2. text
<li>text</li>
</ol>
3. text
Starts a numbered list, first # being 5.
5. This is one line
<ol start="5"> 6. This is another line

7. And this is the final line

Starts a numbered list, using capital letters.
A. This is one line
<ol type="A"> B. This is another line

C. And this is the final line

Starts a numbered list, using small letters.
a. This is one line
<ol type="a"> b. This is another line

c. And this is the final line

Starts a numbered list, using capital roman
numbers.
I. This is one line
<ol type="I">
II. This is another line

III. And this is the final line

<ol type="i"> Starts a numbered list, using small roman
numbers.
i. This is one line
ii. This is another line
 iii. And this is the final line
Starts a numbered list, using normal numbers.
1. This is one line
<ol type="1"> 2. This is another line

3. And this is the final line

An example of how type and start can be
combined.
<ol type="I" VII. This is one line
start="7"> VIII. This is another line

IX. And this is the final line

Changing Font Colors, Font and Size

<font color="red" face="arial" size="2">Your Text Here</font>

Your Text Here

Not all of the parameters are required. For example, you can leave out 'face=' and keep
'size=' and 'color=' or vise versa.

Links

To pages at other sites

Click <a href="http://www.google.com">here</a> to go to Google.

Click here to go to Google.

To local pages

If the link is to another file stored in the same folder as the HTML page, you can leave
out the domain reference (http://www.domainhere.com/):

Click <a href="index.htm">here</a> to go to my index page.

Click here to go to my index page.

Images
To insert an image into a webpage you would use the following code:

<img src="http://www.htmlpages.com/logo.gif">

If the image is stored in the same folder as the HTML page, you can leave out the domain
reference (http://www.domainhere.com/) and simply insert the image with this code:

<img src="logo.gif">

You can adjust the height and size of the image by adding the 'height=' and 'width='
parameters to the image tag. For example:

<img src="http://www.htmlpages.com/logo.gif" height="100" width="90" >

You can also add or remove a border from you picture by adding 'border=' and either the
number 0 or a number greater than 0. This indicates the border thickness. If your image
has a border and you want to remove it set the border to 0.

<img src="http://www.htmlpages.com/logo.gif" border=2>

Inserting images (GIF and jpg)

Adding a link to an image

HTML tags can be combined within each other. For example if you want to make an
image with a hyperlink attached to it. So take your html code and your image code:

<a href="index.html">My Index Page</a>

My Index Page

<img src="http://www.htmlpages.com/logo.gif">

Remember anything between the <a> and </a> tags will be clickable so we need to place
the image code between them.
<a href="index.html"><img src="http://www.htmlpages.com/logo.gif"></a>

If your image has a border around it, use the 'border=' parameter to turn it off or increase
it.

<a href="index.html"><img src="http://www.htmlpages.com/logo.gif" border=0></a>

You can also have your link open in a new window by adjusting the 'target=' parameter:

<a href="index.html" target="_blank">Click to open in new window</a>

Click to open in new window

Email Links
You can add your email address to a webpage so that when clicked opens up the person's
email client. This isn't recommended these days because of spam bots. Spam bots crawl
through and steal your email address. For more information on how to protect against it
read Spam Proof Your Email Addresses.

<a href="mailto:j.smith@youremailaddress.org">Email Me - Click me for example</a>

Email Me - Click me for example

You can also have it automatically insert a subject and email body as seen below:

<a href="mailto:j.smith@youremailaddress.org?subject=News&body=Great news, I now

know basic HTML code!">Email John - Click me for example</a>

Email John - Click me for example

Backgrounds

Colors

You are able to add a fixed colored background to your web pages by adjusting the
<body> tag. The body tag is only found in the document once and should not be
duplicated. This adjusts the background color for the entire page just just elements of it.

<body bgcolor="yellow">

Your entire webpage would have a background color like this.

<body bgcolor="red">

Your entire webpage would have a background color like this.

Your can also use hex code (hexadecimal code). These codes are symbolic of most of the
colors and their shades. Each hex code is made up of six characters and sometimes a hash
(#) which isn't necessary. As hex is 16 and there 6 characters that's 166 = 16,777,216
different colors. For more information on hexadecimal color and a easy to use color pick
see here.

<body bgcolor="#F556CC">

Your entire webpage would have a background color like this.

<body bgcolor="#83CBA0">

Your entire webpage would have a background color like this.

You can also use a pre-selected image of your choice such as a favorite picture or
wallpaper. Once again you need to adjust the body tag which should be built into your
html code structure.

<body background="mywallpaper.jpg">

Your entire webpage would have a background color like this:

You can also 'fix' your background image so when you scroll it doesn't move. However
this doesn't work on all browsers. See the example below:

<body background="mywallpaper.jpg" bgproperties="fixed">

You need frames enabled to see this sample. <a href="learnhtml-fixedbg.htm"

target="_blank">Click Here</a>

 
Tables

Tables are defined with the table tag:

<table></table>

Tables are made up of rows and columns, therefore the table tags alone won't build your
tables. To add rows to your table use tables rows:

<tr></tr>

To divide your table into columns use the table divide tag:

<td></td>

For a table with one column use can use the below code:

<table border=1>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</table>

Row 1
Row 2
Row 3

For a table with two columns you can use this code:

<table border=1 >

<tr>
<td>Row 1 - Left </td>
<td>Row 1 - Right </td>
</tr>
<tr>
<td>Row 2 - Left</td>
<td>Row 2 - Right </td>
</tr>
<tr>
<td>Row 3 - Left</td>
<td>Row 3 - Right </td>
</tr>
</table>

Row 1 - Left Row 1 - Right

Row 2 - Left Row 2 - Right
Row 3 - Left Row 3 - Right