Basic Table Tags

The three most important tags for tables is the opening table tag, <table> and the table row and table data tags - <tr> and <td> respectively.
The <tr> tag represents a row for the table
The <td> tag represents a cell inside the row.
Now, with that in mind, let's create a simple table:
<table>
<tr> <td>A</td> <td>B</td> <td>C</td> </tr>
<tr> <td>X</td> <td>Y</td> <td>Z</td> </tr>
</table>
And this is what the table would look like published:

A	B	C
X	Y	Z

Notice that by looking at the code, you can tell how many rows and columns are included just by looking at the code. The two opening <tr> tags indicate two rows and the three opening <td> tags on each line represents three data cells (or three columns).

Adding Table Borders

Adding a border simply involves inserting the border attribute to the opening table tag. So in the above table the code would be adjusted accordingly:
<table border="2">
<tr><td>A</td> <td>B</td> <td>C</td> </tr>
<tr><td>X</td> <td>Y</td> <td>Z</td> </tr>
</table>
Notice the "2" represents the thickness of the border. If you had set it to "0" then there would have been no border at all. If you wanted it very thick then you could set it to 8, for example. So now your table will look like this:

A	B	C
X	Y	Z

Changing a Table's Border Color

You can change the color of a table border by simply adding the bordercolor attribute.
<table border="2" bordercolor="red">
<tr><td>A</td> <td>B</td> <td>C</td> </tr>
<tr><td>X</td> <td>Y</td> <td>Z</td> </tr>
</table>
And here's what it would look like...

A	B	C
X	Y	Z

Adjusting Table Cell Spacing and Cell Padding

You can increase the space within the table cells and the space between the cells by using the cellpadding and cellspacing attributes.
The cellspacing attribute adjusts the space between the cells and cellpadding adjusts the space within (around) the cell.
<table border="2" cellspacing="10" cellpadding="3">
<tr><td>A</td> <td>B</td> <td>C</td> </tr>
<tr><td>X</td> <td>Y</td> <td>Z</td> </tr>
</table>
This is what the table would look like now...

A	B	C
X	Y	Z

See how setting the cellspacing attribute to "10" drastically increased the spacing between the cells, and the cellpadding attribute set to "3" added a little of space within each individual cell.

Specifying a Table Width

You can specify the width of a table by using either a percentage or a pixel width.
<table width="100%" border="2">
<tr><td>A</td> <td>B</td> <td>C</td> </tr>
<tr><td>X</td> <td>Y</td> <td>Z</td> </tr>
</table>
Since the width is set to 100% that means the table will take up 100% of the screen and the columns in the table will be adjusted evenly. Here's what it would look like.

A	B	C
X	Y	Z

As we mentioned, you can also set the table width using pixels instead of percentages. So instead of setting it to 100%, you could set it to 300 pixels:
<table width="300" border="2">
<tr><td>A</td> <td>B</td> <td>C</td> </tr>
<tr><td>X</td> <td>Y</td> <td>Z</td> </tr>
</table>
The table would look like this:

A	B	C
X	Y	Z

Setting Column Widths

Sometimes you may not always want your columns to be the same size. If this is the case, you need to set values on your table data <td> cells. Again, you can set them by using percentages or pixel widths.
<table width="300" border="2">
<tr> <td width="70%"> A</td> <td>B</td> <td>C</td> </tr>
<tr> <td width="70%"> X</td> <td>Y</td> <td>Z</td> </tr>
</table>
This is what this table would look like.

A	B	C
X	Y	Z

See how the column width for the first column in both rows is set to 70%. Notice there is no value set for the other 2 columns. If you do not set a value for the remaining columns, their width will automatically be adjusted to take up the remaining space and they'll share it equally.

Since the table width is set to 300 pixels, and the first column is instructed to take up 70% of those 300 pixels (roughly 210 pixels), the other 2 columns divide the remaining 30% of the table (roughly 45 pixels a piece).

You could also have expressed the column widths of this table in pixels instead of percentages. The code would have looked like this:

</table>

A	B	C
A	B	C

See how the width of the columns in each row add up to 300 (210 + 45 + 45) -- which is the width of the table.

What's the Difference Between Using Percentages and Pixel Widths

Many people prefer to express their table width and column widths in percentages because that will ensure that the table takes up the same amount of screen no matter how big or small the screen resolution is.
If someone is using a 21 inch monitor to view your site and you have a table width set to 300 pixels, the table will show up very small on their screen. However if you set the table width to 70%, it will take up 70% of the screen no matter what size the person is using.
So it's really up to you to decide what's the best layout for your tables.

Specifying a Table's Height

You can also set the table height by adding the height tag to the table code.
<table height="250" width="300" border="2">
<tr><td width="210">A</td> <td width="45">B</td> <td width="45">C</td> </tr>
<tr><td width="210">A</td> <td width="45">B</td> <td width="45">C</td></tr>
</table>
Which will produce the following table:

A	B	C
A	B	C

Horizontally Aligning the Content Inside Tables

The content inside a cell is left aligned by default, but you can also center or right align the text as well by using the align attributes.
<table width="300" border="2">
<tr><td width="210" align="center" >A</td> <td width="45">B</td> <td width="45">C</td> </tr>
<tr><td width="210" align="center" >A</td> <td width="45">B</td> <td width="45">C</td></tr>
</table>

A	B	C
A	B	C

See how the first column is aligned to the center? You can also right align the columns by using the align="right" inside the <td> cells.

Vertically Aligning the Content Inside the Table Cells

So far we've kept the table cell alignment at the default, which is the middle. Notice in the above table that the A, B, and C are all three aligned in the middle of their cells. Well you can change their alignment to either top, bottom, or middle by using the valign (which stands for vertical align) tag:
<table height="250" width="300" border="2">
<tr><td valign="top" width="210">A</td> <td width="45">B</td> <td width="45">C</td> </tr>
<tr><td valign="top" width="210">A</td> <td width="45">B</td> <td width="45">C</td></tr>
</table>

A	B	C
A	B	C

I've set the table height to "250" so the alignment would be more noticeable. Notice that the A in both rows are aligned to the top. You can also align to the "bottom" or the "middle".

Creating a Left Navigation Layout With Tables

As we mentioned earlier, most left and right navigations are created using tables. All you do is create a table with one row, two columns and no border. Then align both of your columns to the top (using the valign tag) so your text will start in the top of the columns, not the middle. Depending on if you're going to have a right or left navigation, you'll make one column significantly smaller than the other.
Here's a simple left navigation layout:
<table width="100%" border="0">
<tr><td valign="top" width=" 25% ">Left Nav Links Here</td> <td valign="top" width=" 75% ">Body Here</td> </tr>
</table>
And here's what it would look like:

Left Nav Links Here

Body Here

Notice I set the border to "0" but it's still showing in the example. I just did that to show how the layout would look. If you set your border to "0" you won't see any lines around your table.
So there ya have it! That's a general overview of tables. There's so much more you can do with them, but if you can understand the basic layout, you'll be able to do so much with the design of your web site.

html tags, html tutorial,html color codes,HTML codes,HTML valid,HTML color codes,HTML tutorial,HTML examples,html codes,HTML code?,HTML format,HTML text code?,HTML text codes,html web fonts,HTML Fonts,HTML Font Code,HTML font codes?, HTML Code Tutorial,html tags,,html tags chart,HTML Tags and Attributes,HTML syntax,,HTML Background,HTML code for a background,html reference,reference to HTML,HTML Reference examples,html href,HTML href Attribute,html table, HTML Table Basics.,html table color,html table border color,html table tags,html table border style,HTML Reference Guide, complete reference to HTML

Special Characters

html tags, html tutorial,html color codes,HTML codes,HTML valid,HTML color codes,HTML tutorial,HTML examples,html codes,HTML code?,HTML format,HTML text code?,HTML text codes,html web fonts,HTML Fonts,HTML Font Code,HTML font codes?, HTML Code Tutorial,html tags,,html tags chart,HTML Tags and Attributes,HTML syntax,,HTML Background,HTML code for a background,html reference,reference to HTML,HTML Reference examples,html href,HTML href Attribute,html table, HTML Table Basics.,html table color,html table border color,html table tags,html table border style,HTML Reference Guide, complete reference to HTML

Special Characters

Code	Symbol	Description
™	™	Trademark
&	&	Ampersand
®	®	Registered trademark
©	©	Copyright
&dagger;	†	Dagger
»	»	Right pointing double angle quotation mark
«	«	Left pointing double angle quotation mark
	—	Em-dash
°	30°	Degree
¼	¼	Quarter
½	½	Half
¾	¾	Three quarters
·	·	Middle dot
¡	¡	Inverted exclamation mark

Basic Structure HTML Page

Basic Structure of an HTML Page

Here you will see a sample HTML page with the basic structure.

<html>
<head>
<title>Title that is displayed at the top of your web browser and also used as the title by many search engines</title>
<meta name="description" content="10-15 word description of your site read by some search engines">
<meta name="keywords" content="main keywords of your site separated by commas. Read by some search engines">
</head>
<body>
<p align="left">
This is my new web page. I hope you like it. Please come back and visit again. If you need help creating your web site visit <a href="http://www.2createawebsite.com">2 Create a Website.com</a>.
</p>
</body>
</html>

html tags, html tutorial,html color codes,HTML codes,HTML valid,HTML color codes,HTML tutorial,HTML examples,html codes,HTML code?,HTML format,HTML text code?,HTML text codes,html web fonts,HTML Fonts,HTML Font Code,HTML font codes?, HTML Code Tutorial,html tags,,html tags chart,HTML Tags and Attributes,HTML syntax,,HTML Background,HTML code for a background,html reference,reference to HTML,HTML Reference examples,html href,HTML href Attribute,html table, HTML Table Basics.,html table color,html table border color,html table tags,html table border style,HTML Reference Guide, complete reference to HTML

Basic Text & Font Tags

New Paragraph: <p> Starts a new paragraph and creates a blank line between your new paragraph and the one above it.
The closing tag is </p>, but is not mandatory.
Line Break: <br> This will break your text to the next line. Two <br> tags is equivalent to one <p> tag.  There's no closing tag needed for this one.
Bold: <b>  Closing tag is </b>
Underline: <u>   Closing tag is </u>
Italics: <i>   Closing tag is </i>
Centering text: <center> Closing tag is </center>
Left aligning text: <p align="left"> Just use </p> for the closing tag
Right aligning text: <p align="right"> Just use </p> for the closing tag
Change text color: <font color="red"> The ending for any font tag is </font>
If you want more colors, you can also use
Changing font face: <font face="Arial">
Change font size: <font size="3"> (choose between 1 and 7)
Blinking Text: <blink> </blink> (only works in Netscape)
Scrolling Text: <marquee> </marquee> (only works in Internet Explorer)

html tags, html tutorial,html color codes,HTML codes,HTML valid,HTML color codes,HTML tutorial,HTML examples,html codes,HTML code?,HTML format,HTML text code?,HTML text codes,html web fonts,HTML Fonts,HTML Font Code,HTML font codes?, HTML Code Tutorial,html tags,,html tags chart,HTML Tags and Attributes,HTML syntax,,HTML Background,HTML code for a background,html reference,reference to HTML,HTML Reference examples,html href,HTML href Attribute,html table, HTML Table Basics.,html table color,html table border color,html table tags,html table border style,HTML Reference Guide, complete reference to HTML

HTML Unordered

HTML Unordered List

<UL> - </UL> are the starting and ending tags of Unordered lists. List items are included using the <LI> tag.
Unordered lists also support the TYPE attribute that takes disc, circle or square as its value.

<UL>
<LI>Item One
<LI>Item Two
<LI>Item Three
<LI>Item Four
</UL>

is displayed as

Item One
Item Two
Item Three
Item Four

Using TYPE="square" on the list above will result in

Item One
Item Two
Item Three
Item Four

html tags, html tutorial,html color codes,HTML codes,HTML valid,HTML color codes,HTML tutorial,HTML examples,html codes,HTML code?,HTML format,HTML text code?,HTML text codes,html web fonts,HTML Fonts,HTML Font Code,HTML font codes?, HTML Code Tutorial,html tags,,html tags chart,HTML Tags and Attributes,HTML syntax,,HTML Background,HTML code for a background,html reference,reference to HTML,HTML Reference examples,html href,HTML href Attribute,html table, HTML Table Basics.,html table color,html table border color,html table tags,html table border style,HTML Reference Guide, complete reference to HTML

HTML coding

HTML coding - HTML Lists

We all understand the importance of lists in everyday life. They are an indispensable tool for cataloging and indexing various objects and events. Two kinds of lists are very common and used by us regularly. The Ordered Lists help us keep an organized inventory wherein the list items are ranked while in Unordered lists, the classification is not important and the list items do not occur in any assorted order.
HTML provides us with 5 different kinds of lists out of which 3 are routinely used. These lists are block-formatting elements that define a block structure and help in a logical layout of the document. The five lists are:

<OL> - </OL>: Ordered List
<UL> - </UL>: Unordered List
<DL> - </DL>: Definition List
<MENU> - </MENU>: Menu List (sparsely used)
<DIR> - </DIR>: Directory List (sparsely use)

HTML Ordered

HTML Ordered List

If the ranking of items is desired, we employ ordered lists. To place individual list items, you use the <LI> tag as

<OL>
<LI>Item One
<LI>Item Two
<LI>Item Three
<LI>Item Four
</OL>

The code above is displayed by the browser as

Item One
Item Two
Item Three
Item Four

You would have noticed that the list items show some indentation on the left and some space is inserted before and after the list. This makes the reading of the list easy and helps it to stand out from the other text. An ending tag for a list item </LI> is not required.
Numbers are the default bullets in ordered lists but you can change this using the TYPE attribute of <OL> tag. This attribute takes one of the five values:

TYPE="a": Lowercase alphabet
TYPE="A": Uppercase Alphabet
TYPE="i": Lowercase Roman Numerals
TYPE="I": Uppercase Roman Numerals
TYPE="1": Regular number (default)

Thus,

<OL TYPE="A">
<LI>Item One
<LI>Item Two
<LI>Item Three
</OL>

is displayed as

Item One
Item Two
Item Three

Another attribute is COMPACT (without any value) but is generally ignored by the browsers.

HTML Reference

Basic Structure:

Specifies a comment. Anything between these tags will be skipped by the browser.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">
This is the necessary first element of any HTML 3.2 compliant document.
<HTML>.....< /HTML>
Encloses the entire document.
<HEAD>.....< /HEAD>
Encloses the head of the document. The following optional tags are placed inside the head.
1. <TITLE>.....< /TITLE>
  Indicates the title of the document that is used as the window caption. This is the second of the two required tags for any HTML 3.2 compliant document.
2. <BASE href="http://some.network/file.html">
  Specifies the base URL of the document. This is used when dereferencing relative URLs in the page.
3. <BASE href="http://some.net/file.html" TARGET="...">
  Also specifies the base target frame that all links will default to. See the LINK tag for possible values used in TARGET.
4. <META attribut1 attribute2>
  This element can be used to specify name/value pairs describing various properties of the document. Below are some examples:
  To have your page automatically reloaded every X seconds, use the following:
  <META HTTP-EQUIV="REFRESH" CONTENT=X >
  To have a different page automatically loaded after X seconds, use the following:
  <META HTTP-EQUIV="REFRESH" CONTENT="X; URL=http://some.address/file.html">
  To specify an expiration date for the page so that it will be reloaded after a certain date, use:
  <META HTTP-EQUIV="Expires" CONTENT="Mon, 23 Sep 1996 01:21:00 GMT">
  To specify keywords for certain search services to use, do the following:
  <META HTTP-EQUIV="Keywords" CONTENT="keyword1, keyword2, ...">
  To specify a description of your page for certain search services to use, do the following:
  <META HTTP-EQUIV="Description" CONTENT="Describe your site here....">
5. <LINK attribute=" HREF="..." >
  Currently this tag is not widely supported, however in the future browsers will use a list of these tags to generate a navigation bar for the site. Without browser support, this tag can still be useful for site maintenance.
  1. REL="..."--Specifies the type of relationship of the link to this page. Possible values are: "home", "toc" (table of contents), "index", "glossary", "copyright", "bookmark", "up", "next", "previous", and "help".
  2. REV="..."--Used instead of REL, this specifies a reverse relationship from this page to the link. Possible values are: "made" (author, set HREF=email address) and all the ones used in REL.
  3. HREF="..."--Specifies the address of the link.
  4. TITLE="..."--Specifies a title for the link.
<BODY attribute1="..." attribute2="...">.....< /BODY>
Encloses the main body of the document.
1. ALINK="..."--Specifies the color of the activated links in the page.
2. BACKGROUND="..."--Specifies an image to be tiled as background.
3. BGCOLOR="..."--Specifies the background color.
4. BGPROPERTIES=FIXED--Fixes the background image so that it doesn't scroll. (IE)
5. LEFTMARGIN="n"--Specifies the left margin for the entire page. (IE)
6. LINK="..."--Specifies the color of the links in the page.
7. TEXT="..."--Specifies the color of the text in the page.
8. TOPMARGIN="n"--Specifies the top margin for the entire page. (IE)
9. VLINK="..."--Specifies the color of the followed links in the page.
  
  NOTE:Color is always expressed as RGB (Red Green Blue), where each color has a value between 0 and 255 expressed in hex notation. For example, BGCOLOR=#FFFF00 sets the background color to yellow. For more information check out Colors of the Web.
<BASEFONT attribute=">
Sets the default font properties for the entire page.
1. SIZE="..."--Sets the size of the font to any number between 1 and 7 with 3 being default. Relative sizes also work, e.g. SIZE=+2 .
2. COLOR="..."--Specifies the default font color for the page.
3. Name="..."--Specifies the typeface of the default font.
<Hn>...< /Hn>
Makes the enclosed text a heading of various sizes where n is any number ranging from 1 to 6, and 1 creates the biggest heading while 6 creates the smallest.
<ISINDEX>
Displays a text box indicating the presence of a searchable index. Simply adding this tag will not create a searchable page. The server must be set up to support it.
1. ACTION="..."--Specifies the location of the gateway program to which the search string should be passed.
2. PROMPT="..."--Specifies an alternate prompt for the text box.

HTML syntax

Simple Text Formatting

These tags have not changed since HTML 4

Description	Example Syntax	Result
Bolded Text	<b>Bolded Text</b>	Bolded Text
Italicized Text	<i>Italicized Text</i>	Italicized Text
Deleted Text	<del>Deleted Text</del>	~~Deleted Text~~
Big Text	<big>Big Text</big>	Big Text
Small Text	<small>Small Text</small>	Small Text
Subscript	H<sub>2</sub>O	H₂O
Superscript	3 x 10<sup>8</sup>	3 x 10⁸
HTML Ignore	<xmp><b>Text</b>&#60;/xmp>	<b>Text</b>
Hyperlink	<a href="http://www.google.com">Google</a>	Google
Email Hyperlink	<a href="mailto:mail@mail.com">mail@mail.com</a>	mail@mail.com

CSS Text Formatting

These features must be used as arguments of the "style" argument of a "span" or "div" tag surrounding the text.

Attributes may be combined under style="" of the SPAN tag and seperated by a semicolon as such: <span style="attribute:value;attribute2:value">Text</span>

Description	Attribute Syntax	Result
Underlined Text	text-decoration:underline	Underlined Text
Font Color	color:red	Red Text
Aligned Text	text-align:left/right/center	Text will be aligned to the left, right, or center
Change the Font	font-family:fontname	Text will be in style "fontname"
Font Size	font-size:200%	2x Size Text

Self-closing Tags

Tags that, by definition, contain nothing between the opening and closing tags must self-close with a space and forward slash:

Images	<img src="something.jpg" />
Carriage Return	<br />
Horizontal Breaking Line	<hr />

Useful Characters

This is a small list of characters that may be useful in the E-logs. For a more complete list, see Character Chart.

Note:All characters are of the format: (ampersand)(charname)(semicolon).

Description	Syntax	Result
Function Symbol	&fnof;	ƒ
Greek Capital Letter	&(Lettername);	Δ yields Δ
Greek Lowercase Letter	&(lettername);	δ yields δ
Arrows	↑, ↓, ←, →, &crarr;, ↔	↑, ↓, ←, →, ↵, ↔
For All Symbol	∀	∀
Partial Differential	∂	∂
"There Exists" Symbol	∃	∃
Empty/Null Set	∅	∅
Nable Symbol	∇	∇
"Element of" Symbol	∈	∈
"Not an Element of" Symbol	∉	∉
"Contains as Member" Symbol	&ni;	∋
Radical Sign	√	√
"Proportional To" Symbol	&prop;	∝
Infinity Symbol	∞	∞
Angle Symbol	&ang;	∠
Integral Symbol	∫	∫
"Therefore" Symbol	&there4;	∴
"Similar to" Symbol	&sim;	∼
"Almost Equal to" Symbol	≈	≈
"Not Equal to" Symbol	≠	≠
"Equivalent to" Symbol	&equiv;	≡
"Less-than or Equal to" Symbol	≤	≤
"Greather-than or Equal to" Symbol	≥	≥
"Vector Product" Symbol	&otimes;	⊗
"Perpendicular to" Symbol	&perp;	⊥
"Much Greater Than" Symbol	»	»
"Much Less Than" Symbol	«	«
Degree Symbol	°	°
"Plus/Minus Error" Symbol	±	±
"Letter O with Slash" Symbol	Ø	Ø
No break space

How to Create Lists

Unordered list:

uses <ul> and </ul> tags, and each list item must be inside <li> and </li>

Example: <ul> <li>List item</li> <li>Second Iten</li> <li>Third Item</li> <ul> Yields:

List item
Second Item
Third Item

Ordered list:

uses <ol> and </ol> tags, and each list item must be inside <li> and </li>

Example:

List item
Second Item
Third Item

How to Create Tables

Simple data tables consist of three parts: <table>, <tr> and <td> Where all elements are contained within the <table> tags, <tr> tags surround a row, and <td> tags surround a table cell's content. As an example, the code: <table border="1"> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table> Yields the table with a border (notice above the use of the border="1" attribute to create a border):

Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

HTML format

TEXT FORMAT

These are the tags for text formats:

<b>text</b>	writes text as bold
*<i>text</i>*	writes text in italics
<u>text</u>	writes underlined text
<sub>_text</sub>	lowers text and makes it smaller
<sup>^text</sup>	lifts text and makes it smaller
<blink>text</blink>	guess yourself! (Note: Netscape only.)
<strike>~~text~~</strike>	strikes a line through the text
<tt>`text`</tt>	writes text as on a classic typewriter
<pre>`text`</pre>	writes text exactly as it is, including spaces.
<em>text</em>	usually makes text italic
<strong>text<strong>	usually makes text bold

TEXT SIZE

These are the tags for changing the font size.

<big>text</big>	increase the size by one
<small>text</small>	decrease the size by one
<h1>text</h1>	writes text in biggest heading
<h6>text</h6>	writes text in smallest heading
<font size="1">text</font>	writes text in smallest fontsize. (8 pt)
<font size="7"> text</font>	writes text in biggest fontsize (36 pt)

The <small> and <big> tags are special in that they can be repeated. If you want to increase the font size with a factor two, then you could do it like this:

bla bla bla <big><big>whatever</big></big> bla bla bla

TEXT LAYOUT

These tags will let you control the layout.

HTML	EXPLANATION
<p>text</p>	Adds a paragraph break after the text. (2 linebreaks).
<p align="left">text</p>	Left justify text in paragraph.
<p align="center">text</p>	Center text in paragraph.
<p align="right">text</p>	Right justify text in paragraph.
text<br>	Adds a single linebreak where the tag is.
<nobr>text</nobr>	Turns off automatic linebreaks - even if text is wider than the window.
text<wbr>	Allows the browser to insert a linebreak at exactly this point - even if the text is within <nobr> tags.
<center>text</center>	Center text.
<div align="center">text</div>	Center text.
<div align="left">text</div>	Left justify text.
<div align="right">text</div>	Right justify text.

HTML valid

html tags, html tutorial,html color codes,HTML codes,HTML valid,HTML color codes,HTML tutorial,HTML examples,html codes,HTML code?,HTML format,HTML text code?,HTML text codes,html web fonts,HTML Fonts,HTML Font Code,HTML font codes?, HTML Code Tutorial,html tags,,html tags chart,HTML Tags and Attributes,HTML syntax,,HTML Background,HTML code for a background,html reference,reference to HTML,HTML Reference examples,html href,HTML href Attribute,html table HTML Table Basics.,html table color,html table border color,html table tags,html table border style

HTML VALIDATOR (based on Tidy and OpenSP)

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page.

The extension is based on Tidy and OpenSP. Both algorithms were originally developed by the Web Consortium W3C. And now extended and improved by a lot of persons. Both algorithms are embedded inside Mozilla/Firefox and makes the validation locally on your machine, without sending HTML to a third party server.

HTML Tidy is a helpful program that tries to help people to correct their HTML errors. It finds HTML errors and classifies them in 3 categories:
- errors: HTML errors that Tidy cannot fix or understand.
- warnings: HTML errors that Tidy can fix automatically
- (optional) accessibility warnings: HTML warnings for the 3 priority levels defined in W3c WAI
OpenSP, is SGML parser, is a professional algorithm. It is the same program running inside And now, you can embed it in Firefox !

There is also an automatic "Clean up" button that will do his best to propose you a cleaned version of your page, without errors.

FIREFOX 4.0 BETA VERSION ONLY

Download : version 0.9.0.0 - Windows only (read below)

HTML codes

html tags, html tutorial,html color codes,HTML codes,HTML valid,HTML color codes,HTML tutorial,HTML examples,html codes,HTML code?,HTML format,HTML text code?,HTML text codes,html web fonts,HTML Fonts,HTML Font Code,HTML font codes?, HTML Code Tutorial,html tags,,html tags chart,HTML Tags and Attributes,HTML syntax,,HTML Background,HTML code for a background,html reference,reference to HTML,HTML Reference examples,html href,HTML href Attribute,html table HTML Table Basics.,html table color,html table border color,html table tags,html table border style

FOUNDATION TAGS
GENERAL COMMENTS: These tags are the foundation of a web page, and as such they must be included in every page.		Video

<!DOCTYPE ...	The doctype 'tells' the browser how to read and interpret the HTML (markup*) code.	Video
<html> ... </html>	Creates the HTML page
<head> ... </head>
<title> ... </title>	Sets the page title
<body> ... </body>	What you see on the page falls between these tags
About 'markup' :	Web pages can be written in either HTML or XHTML ... both are 'markup' languages.

Html color codes

html tags, html tutorial,html color codes,HTML codes,HTML valid,HTML color codes,HTML tutorial,HTML examples,html codes,HTML code?,HTML format,HTML text code?,HTML text codes,html web fonts,HTML Fonts,HTML Font Code,HTML font codes?, HTML Code Tutorial,html tags,,html tags chart,HTML Tags and Attributes,HTML syntax,,HTML Background,HTML code for a background,html reference,reference to HTML,HTML Reference examples,html href,HTML href Attribute,html table
HTML Table Basics.,html table color,html table border color,html table tags,html table border style

HTML color codes and names

Major hexadecimal color codes

Color	Color Code	Color	Color Code
Red	#FF0000	White	#FFFFFF
Turquoise	#00FFFF	Light Grey	#C0C0C0
Light Blue	#0000FF	Dark Grey	#808080
Dark Blue	#0000A0	Black	#000000
Light Purple	#FF0080	Orange	#FF8040
Dark Purple	#800080	Brown	#804000
Yellow	#FFFF00	Burgundy	#800000
Pastel Green	#00FF00	Forest Green	#808000
Pink	#FF00FF	Grass Green	#408080

Color code chart

Use our HTML color picker if you need to choose from an almost infinite variety of colors. Also, if you like a color scheme of a web page view Tip142 for a fantastic tool that can be used to gather that page's color codes.

COLOR NAME	CODE	COLOR
Black	#000000	Black
Gray0	#150517	Gray0
Gray18	#250517	Gray18
Gray21	#2B1B17	Gray21
Gray23	#302217	Gray23
Gray24	#302226	Gray24
Gray25	#342826	Gray25
Gray26	#34282C	Gray26
Gray27	#382D2C	Gray27
Gray28	#3b3131	Gray28
Gray29	#3E3535	Gray29
Gray30	#413839	Gray30
Gray31	#41383C	Gray31
Gray32	#463E3F	Gray32
Gray34	#4A4344	Gray34
Gray35	#4C4646	Gray35
Gray36	#4E4848	Gray36
Gray37	#504A4B	Gray37
Gray38	#544E4F	Gray38
Gray39	#565051	Gray39
Gray40	#595454	Gray40
Gray41	#5C5858	Gray41
Gray42	#5F5A59	Gray42
Gray43	#625D5D	Gray43
Gray44	#646060	Gray44
Gray45	#666362	Gray45
Gray46	#696565	Gray46
Gray47	#6D6968	Gray47
Gray48	#6E6A6B	Gray48
Gray49	#726E6D	Gray49
Gray50	#747170	Gray50
Gray	#736F6E	Gray
Slate Gray4	#616D7E	Slate Gray4
Slate Gray	#657383	Slate Gray
Light Steel Blue4	#646D7E	Light Steel Blue4
Light Slate Gray	#6D7B8D	Light Slate Gray
Cadet Blue4	#4C787E	Cadet Blue4
Dark Slate Gray4	#4C7D7E	Dark Slate Gray4
Thistle4	#806D7E	Thistle4
Medium Slate Blue	#5E5A80	Medium Slate Blue
Medium Purple4	#4E387E	Medium Purple4
Midnight Blue	#151B54	Midnight Blue
Dark Slate Blue	#2B3856	Dark Slate Blue
Dark Slate Gray	#25383C	Dark Slate Gray
Dim Gray	#463E41	Dim Gray
Cornflower Blue	#151B8D	Cornflower Blue
Royal Blue4	#15317E	Royal Blue4
Slate Blue4	#342D7E	Slate Blue4
Royal Blue	#2B60DE	Royal Blue
Royal Blue1	#306EFF	Royal Blue1
Royal Blue2	#2B65EC	Royal Blue2
Royal Blue3	#2554C7	Royal Blue3
Deep Sky Blue	#3BB9FF	Deep Sky Blue
Deep Sky Blue2	#38ACEC	Deep Sky Blue2
Slate Blue	#357EC7	Slate Blue
Deep Sky Blue3	#3090C7	Deep Sky Blue3
Deep Sky Blue4	#25587E	Deep Sky Blue4
Dodger Blue	#1589FF	Dodger Blue
Dodger Blue2	#157DEC	Dodger Blue2
Dodger Blue3	#1569C7	Dodger Blue3
Dodger Blue4	#153E7E	Dodger Blue4
Steel Blue4	#2B547E	Steel Blue4
Steel Blue	#4863A0	Steel Blue
Slate Blue2	#6960EC	Slate Blue2
Violet	#8D38C9	Violet
Medium Purple3	#7A5DC7	Medium Purple3
Medium Purple	#8467D7	Medium Purple
Medium Purple2	#9172EC	Medium Purple2
Medium Purple1	#9E7BFF	Medium Purple1
Light Steel Blue	#728FCE	Light Steel Blue
Steel Blue3	#488AC7	Steel Blue3
Steel Blue2	#56A5EC	Steel Blue2
Steel Blue1	#5CB3FF	Steel Blue1
Sky Blue3	#659EC7	Sky Blue3
Sky Blue4	#41627E	Sky Blue4
Slate Blue	#737CA1	Slate Blue
Slate Blue	#737CA1	Slate Blue
Slate Gray3	#98AFC7	Slate Gray3
Violet Red	#F6358A	Violet Red
Violet Red1	#F6358A	Violet Red1
Violet Red2	#E4317F	Violet Red2
Deep Pink	#F52887	Deep Pink
Deep Pink2	#E4287C	Deep Pink2
Deep Pink3	#C12267	Deep Pink3
Deep Pink4	#7D053F	Deep Pink4
Medium Violet Red	#CA226B	Medium Violet Red
Violet Red3	#C12869	Violet Red3
Firebrick	#800517	Firebrick
Violet Red4	#7D0541	Violet Red4
Maroon4	#7D0552	Maroon4
Maroon	#810541	Maroon
Maroon3	#C12283	Maroon3
Maroon2	#E3319D	Maroon2
Maroon1	#F535AA	Maroon1
Magenta	#FF00FF	Magenta
Magenta1	#F433FF	Magenta1
Magenta2	#E238EC	Magenta2
Magenta3	#C031C7	Magenta3
Medium Orchid	#B048B5	Medium Orchid
Medium Orchid1	#D462FF	Medium Orchid1
Medium Orchid2	#C45AEC	Medium Orchid2
Medium Orchid3	#A74AC7	Medium Orchid3
Medium Orchid4	#6A287E	Medium Orchid4
Purple	#8E35EF	Purple
Purple1	#893BFF	Purple1
Purple2	#7F38EC	Purple2
Purple3	#6C2DC7	Purple3
Purple4	#461B7E	Purple4
Dark Orchid4	#571B7e	Dark Orchid4
Dark Orchid	#7D1B7E	Dark Orchid
Dark Violet	#842DCE	Dark Violet
Dark Orchid3	#8B31C7	Dark Orchid3
Dark Orchid2	#A23BEC	Dark Orchid2
Dark Orchid1	#B041FF	Dark Orchid1
Plum4	#7E587E	Plum4
Pale Violet Red	#D16587	Pale Violet Red
Pale Violet Red1	#F778A1	Pale Violet Red1
Pale Violet Red2	#E56E94	Pale Violet Red2
Pale Violet Red3	#C25A7C	Pale Violet Red3
Pale Violet Red4	#7E354D	Pale Violet Red4
Plum	#B93B8F	Plum
Plum1	#F9B7FF	Plum1
Plum2	#E6A9EC	Plum2
Plum3	#C38EC7	Plum3
Thistle	#D2B9D3	Thistle
Thistle3	#C6AEC7	Thistle3
Lavender Blush2	#EBDDE2	Lavender Blush2
Lavender Blush3	#C8BBBE	Lavender Blush3
Thistle2	#E9CFEC	Thistle2
Thistle1	#FCDFFF	Thistle1
Lavender	#E3E4FA	Lavender
Lavender Blush	#FDEEF4	Lavender Blush
Light Steel Blue1	#C6DEFF	Light Steel Blue1
Light Blue	#ADDFFF	Light Blue
Light Blue1	#BDEDFF	Light Blue1
Light Cyan	#E0FFFF	Light Cyan
Slate Gray1	#C2DFFF	Slate Gray1
Slate Gray2	#B4CFEC	Slate Gray2
Light Steel Blue2	#B7CEEC	Light Steel Blue2
Turquoise1	#52F3FF	Turquoise1
Cyan	#00FFFF	Cyan
Cyan1	#57FEFF	Cyan1
Cyan2	#50EBEC	Cyan2
Turquoise2	#4EE2EC	Turquoise2
Medium Turquoise	#48CCCD	Medium Turquoise
Turquoise	#43C6DB	Turquoise
Dark Slate Gray1	#9AFEFF	Dark Slate Gray1
Dark Slate Gray2	#8EEBEC	Dark slate Gray2
Dark Slate Gray3	#78c7c7	Dark Slate Gray3
Cyan3	#46C7C7	Cyan3
Turquoise3	#43BFC7	Turquoise3
Cadet Blue3	#77BFC7	Cadet Blue3
Pale Turquoise3	#92C7C7	Pale Turquoise3
Light Blue2	#AFDCEC	Light Blue2
Dark Turquoise	#3B9C9C	Dark Turquoise
Cyan4	#307D7E	Cyan4
Light Sea Green	#3EA99F	Light Sea Green
Light Sky Blue	#82CAFA	Light Sky Blue
Light Sky Blue2	#A0CFEC	Light Sky Blue2
Light Sky Blue3	#87AFC7	Light Sky Blue3
Sky Blue	#82CAFF	Sky Blue
Sky Blue2	#79BAEC	Sky Blue2
Light Sky Blue4	#566D7E	Light Sky Blue4
Sky Blue	#6698FF	Sky Blue
Light Slate Blue	#736AFF	Light Slate Blue
Light Cyan2	#CFECEC	Light Cyan2
Light Cyan3	#AFC7C7	Light Cyan3
Light Cyan4	#717D7D	Light Cyan4
Light Blue3	#95B9C7	Light Blue3
Light Blue4	#5E767E	Light Blue4
Pale Turquoise4	#5E7D7E	Pale Turquoise4
Dark Sea Green4	#617C58	Dark Sea Green4
Medium Aquamarine	#348781	Medium Aquamarine
Medium Sea Green	#306754	Medium Sea Green
Sea Green	#4E8975	Sea Green
Dark Green	#254117	Dark Green
Sea Green4	#387C44	Sea Green4
Forest Green	#4E9258	Forest Green
Medium Forest Green	#347235	Medium Forest Green
Spring Green4	#347C2C	Spring Green4
Dark Olive Green4	#667C26	Dark Olive Green4
Chartreuse4	#437C17	Chartreuse4
Green4	#347C17	Green4
Medium Spring Green	#348017	Medium Spring Green
Spring Green	#4AA02C	Spring Green
Lime Green	#41A317	Lime Green
Spring Green	#4AA02C	Spring Green
Dark Sea Green	#8BB381	Dark Sea Green
Dark Sea Green3	#99C68E	Dark Sea Green3
Green3	#4CC417	Green3
Chartreuse3	#6CC417	Chartreuse3
Yellow Green	#52D017	Yellow Green
Spring Green3	#4CC552	Spring Green3
Sea Green3	#54C571	Sea Green3
Spring Green2	#57E964	Spring Green2
Spring Green1	#5EFB6E	Spring Green1
Sea Green2	#64E986	Sea Green2
Sea Green1	#6AFB92	Sea Green1
Dark Sea Green2	#B5EAAA	Dark Sea Green2
Dark Sea Green1	#C3FDB8	Dark Sea Green1
Green	#00FF00	Green
Lawn Green	#87F717	Lawn Green
Green1	#5FFB17	Green1
Green2	#59E817	Green2
Chartreuse2	#7FE817	Chartreuse2
Chartreuse	#8AFB17	Chartreuse
Green Yellow	#B1FB17	Green Yellow
Dark Olive Green1	#CCFB5D	Dark Olive Green1
Dark Olive Green2	#BCE954	Dark Olive Green2
Dark Olive Green3	#A0C544	Dark Olive Green3
Yellow	#FFFF00	Yellow
Yellow1	#FFFC17	Yellow1
Khaki1	#FFF380	Khaki1
Khaki2	#EDE275	Khaki2
Goldenrod	#EDDA74	Goldenrod
Gold2	#EAC117	Gold2
Gold1	#FDD017	Gold1
Goldenrod1	#FBB917	Goldenrod1
Goldenrod2	#E9AB17	Goldenrod2
Gold	#D4A017	Gold
Gold3	#C7A317	Gold3
Goldenrod3	#C68E17	Goldenrod3
Dark Goldenrod	#AF7817	Dark Goldenrod
Khaki	#ADA96E	Khaki
Khaki3	#C9BE62	Khaki3
Khaki4	#827839	Khaki4
Dark Goldenrod1	#FBB117	Dark Goldenrod1
Dark Goldenrod2	#E8A317	Dark Goldenrod2
Dark Goldenrod3	#C58917	Dark Goldenrod3
Sienna1	#F87431	Sienna1
Sienna2	#E66C2C	Sienna2
Dark Orange	#F88017	Dark Orange
Dark Orange1	#F87217	Dark Orange1
Dark Orange2	#E56717	Dark Orange2
Dark Orange3	#C35617	Dark Orange3
Sienna3	#C35817	Sienna3
Sienna	#8A4117	Sienna
Sienna4	#7E3517	Sienna4
Indian Red4	#7E2217	Indian Red4
Dark Orange3	#7E3117	Dark Orange3
Salmon4	#7E3817	Salmon4
Dark Goldenrod4	#7F5217	Dark Goldenrod4
Gold4	#806517	Gold4
Goldenrod4	#805817	Goldenrod4
Light Salmon4	#7F462C	Light Salmon4
Chocolate	#C85A17	Chocolate
Coral3	#C34A2C	Coral3
Coral2	#E55B3C	Coral2
Coral	#F76541	Coral
Dark Salmon	#E18B6B	Dark Salmon
Salmon1	#F88158	Pale Turquoise4
Salmon2	#E67451	Salmon2
Salmon3	#C36241	Salmon3
Light Salmon3	#C47451	Light Salmon3
Light Salmon2	#E78A61	Light Salmon2
Light Salmon	#F9966B	Light Salmon
Sandy Brown	#EE9A4D	Sandy Brown
Hot Pink	#F660AB	Hot Pink
Hot Pink1	#F665AB	Hot Pink1
Hot Pink2	#E45E9D	Hot Pink2
Hot Pink3	#C25283	Hot Pink3
Hot Pink4	#7D2252	Hot Pink4
Light Coral	#E77471	Light Coral
Indian Red1	#F75D59	Indian Red1
Indian Red2	#E55451	Indian Red2
Indian Red3	#C24641	Indian Red3
Red	#FF0000	Red
Red1	#F62217	Red1
Red2	#E41B17	Red2
Firebrick1	#F62817	Firebrick1
Firebrick2	#E42217	Firebrick2
Firebrick3	#C11B17	Firebrick3
Pink	#FAAFBE	Pink
Rosy Brown1	#FBBBB9	Rosy Brown1
Rosy Brown2	#E8ADAA	Rosy Brown2
Pink2	#E7A1B0	Pink2
Light Pink	#FAAFBA	Light Pink
Light Pink1	#F9A7B0	Light Pink1
Light Pink2	#E799A3	Light Pink2
Pink3	#C48793	Pink3
Rosy Brown3	#C5908E	Rosy Brown3
Rosy Brown	#B38481	Rosy Brown
Light Pink3	#C48189	Light Pink3
Rosy Brown4	#7F5A58	Rosy Brown4
Light Pink4	#7F4E52	Light Pink4
Pink4	#7F525D	Pink4
Lavender Blush4	#817679	Lavendar Blush4
Light Goldenrod4	#817339	Light Goldenrod4
Lemon Chiffon4	#827B60	Lemon Chiffon4
Lemon Chiffon3	#C9C299	Lemon Chiffon3
Light Goldenrod3	#C8B560	Light Goldenrod3
Light Golden2	#ECD672	Light Golden2
Light Goldenrod	#ECD872	Light Goldenrod
Light Goldenrod1	#FFE87C	Light Goldenrod1
Lemon Chiffon2	#ECE5B6	Lemon Chiffon2
Lemon Chiffon	#FFF8C6	Lemon Chiffon
Light Goldenrod Yellow	#FAF8CC	Light Goldenrod Yellow

Basic Table Tags

Adding Table Borders

Changing a Table's Border Color

Adjusting Table Cell Spacing and Cell Padding

Specifying a Table Width

Setting Column Widths

What's the Difference Between Using Percentages and Pixel Widths

Specifying a Table's Height

Horizontally Aligning the Content Inside Tables

Vertically Aligning the Content Inside the Table Cells

Creating a Left Navigation Layout With Tables

Special Characters

Basic Structure of an HTML Page

Basic Text & Font Tags

HTML Unordered List

HTML coding - HTML Lists

HTML Ordered List

Basic Structure:

CSS Text Formatting

Self-closing Tags

Useful Characters

How to Create Lists

HTML VALIDATOR (based on Tidy and OpenSP)

FIREFOX 4.0 BETA VERSION ONLY

HTML color codes and names

Major hexadecimal color codes

All in One HTML

What is HTML