HTML Pages - A HTML Coding Reminder Guide

Quick HTML Coding Reminders

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
<sub>text</sub>	_text	Lowers text and makes it smaller. eg. Ag₁₂
<sup>text</sup>	^text	Raises text and makes it smaller. eg. 10¹⁰
<blink>text</blink>	text	Makes text blink in some browsers. Try and 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>	text	writes text in biggest heading
<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
<p>text</p>	Adds paragraph break after the text. Normally two line 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
<nobr>text</nobr>	Turns off automatic line breaks - even if text is wider than the window.
text<wbr>	Allows the browser to insert a line break at exactly this 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
<ul> <li>text</li> <li>text</li> <li>text</li> </ul>	Makes a bulleted list using the default bullet type: text text text
<ul type="disc">	Starts a bulleted list using discs as bullets: This is one line This is another line And this is the final line
<ul type="circle">	Starts a bulleted list using circles as bullets: This is one line This is another line And this is the final line
<ul type="square">	Starts a bulleted list using squares as bullets: This is one line This is another line And this is the final line

<ol> = Ordered List

Code	Description
<ol> <li>text</li> <li>text</li> <li>text</li> </ol>	Makes a numbered list using the default number type: text text text
<ol start="5">	Starts a numbered list, first # being 5. This is one line This is another line And this is the final line
<ol type="A">	Starts a numbered list, using capital letters. This is one line This is another line And this is the final line
<ol type="a">	Starts a numbered list, using small letters. This is one line This is another line And this is the final line
<ol type="I">	Starts a numbered list, using capital roman numbers. This is one line This is another line And this is the final line
<ol type="i">	Starts a numbered list, using small roman numbers. This is one line This is another line And this is the final line
<ol type="1">	Starts a numbered list, using normal numbers. This is one line This is another line And this is the final line
<ol type="I" start="7">	An example of how type and start can be combined. This is one line This is another line And this is the final line

Changing Font Colors, Font and Size

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:

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:

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

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.

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

Remember anything between the <a> and </a> tags will be clickable so we need to place the image code between them.

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

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.

Your entire webpage would have a background color like this.

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 16⁶ = 16,777,216 different colors. For more information on hexadecimal color and a easy to use color pick see here.

Your entire webpage would have a background color like this.

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.

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:

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:

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:

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

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

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

text

text