Html

Table Examples

2010-11-27T07:36:00.001-08:00

Html Table Examples

Cell

Cell1

Cell2

Cell1

Cell2

Cell1	Cell2
Cell3	Cell4

Tables - Attributes

2010-11-27T07:35:00.003-08:00

HTML Tables - Attributes

<table border= “1”> The border of a table sets the pixel width of the lines around and between cells in the table.

<table bordercolor="red">Coloring The Border, if border value is not "0"

<table width=”100”> width of the table.

<width="100%"> The code above will stretch the table to the full width (100%) of the page

You can use either a percentage of the page width or an exact pixel value (px).

<table height=”50”> height of the table. It defines the height of the overall table. A pixel value is generally used, but a percentage can be used as well.

<table align=”left”> ; Align the content in a table cell, You can use "left" (default), "right", and "center" to align your table.

<table bgcolor=”#ffff00”> or <table bgcolor=”red”> Using Background Colors

<table background=”picture.gif”> Using Background Images

<table cellpadding=”2”> Cellpadding adds space between a cell's content and the borders of the cell

<table cellspacing=”2”> increase the distance between the cells.

Tag Attributes

2010-11-27T07:35:00.001-08:00

Html <td> Tag Attributes

<td colspan=”2”> it spans 2 columns.

<td rowspan=”2”> it spans 2 rows.

<td bgcolor=”#00ffff”> / <td bgcolor=”red”> Coloring The Cell.

<td width=”250”> width of the Cell.

< td height=”50”> height of the Cell.

<td background=”picture.gif”> Using Background Images For a cell

<td align=”left”>, <td align=”right”>; <td align=”center”> Align the content in a cell, You can use "left" (default), "right", and "center" to align your table.

<td valign="top”>, <td valign="middle”>, <td valign="bottom”>, <td valign="baseline”> ; The VALIGN attribute has four values you can use to vertically position your cells' content: "top", "middle" (default), "bottom" and "baseline

Tables - Examples for Colspan and Rowspan

2010-11-27T07:34:00.001-08:00

html Tables - Examples for Colspan and Rowspan

1		2	3
4			5
6	7	8	9

1	2	6	3
4	5		7
4	8		9

Name="Keywords" Tag

2010-11-07T02:54:00.003-08:00

Name="Keywords" Tag

The meta tag can be used to pass on a list of "keywords" to a search engine. The search engine will use this list when determining what searches should include your page.

Code Syntax :

Example :

Name="Description" Tag

2010-11-07T02:54:00.001-08:00

Name="Description" Tag

A Web page description for search engines.

Code Syntax :

Example :

Title Tags - document title

2010-11-07T02:53:00.004-08:00

Title Tags - document title

The most important use for this element is to give the search engines some basic information about your HTML document such as the most important keywords that appear inside the document and a short description of the document´s content.

You’ll use the title tag in every single web page you create.

The title of a webpage appears in your browser´s title bar when you view the page.

Code Syntax :

<title>Web Page Heading</title>

Other MetaTags

2010-11-07T02:53:00.003-08:00

Other MetaTags

Name="Robots"
“Robots Meta Tag” are used to control if you want a spider or a bot to index a html page or not. You can give permission to index your whole site and the spider will crawl all your pages.

Some search engines (not all) fully obey the “Robots Meta Tag”.

all	This is the default. It means that the spiders (or robots) can index this page and follow all links on this page. If you want robots to index everything and follow everything, then just skip the robots tag. The robots will index and follow everything automatically. To "index" means to place in their database so it is available for searches
none	none instructs the browser to basically ignore the page. Don't index anything and don't follow any links.
index	The robot should index the page.
noindex	The robot may not index the page, but it is welcome to follow links on the page.
follow	The robot may follow links on the page.
nofollow	The robot is welcome to index the page, but may not follow any links on the page.

Code Syntax :

Example

How do I prevent the spiders from following links on my page?

NAME="COPYRIGHT"

2010-11-07T02:53:00.001-08:00

NAME="COPYRIGHT"

A copyright statement.

Code Syntax :

HTTP-EQUIV="CONTENT-TYPE"

2010-11-07T02:52:00.004-08:00

HTTP-EQUIV="CONTENT-TYPE"

This meta element gives information about the character encoding that is being used for the text of a document, and also the type of file it is.

Code Syntax :

You can find the one for your language at http://www.iana.org/assignments/character-sets

HTTP-EQUIV="CONTENT-LANGUAGE"

2010-11-07T02:52:00.003-08:00

HTTP-EQUIV="CONTENT-LANGUAGE"

Declares the primary natural language(s) of the document. May be used by search engines to categorize by language.

Code Syntax :

NAME="AUTHOR"

2010-11-07T02:52:00.001-08:00

NAME="AUTHOR"

The author's name and Surname.

Code Syntax :

HTTP-EQUIV="EXPIRES"

2010-11-07T02:51:00.002-08:00

HTTP-EQUIV="EXPIRES"

The date and time after which the document should be considered expired.

Code Syntax :

HTTP-EQUIV="REFRESH"

2010-11-07T02:51:00.001-08:00

HTTP-EQUIV="REFRESH"

Visit this page click here - (HTTP-EQUIV="REFRESH") for this topic.

Text Formating- For Example-Free Codes

2010-09-26T06:24:00.000-07:00

Text Formating - For Example - Free Codes

* <abbr title="abbreviation">abbreviation.</abbr>

abbreviation...

* <acronym title="acronym">Acronym...</acronym>

Acronym...

* <kbd>Keyboard</kbd>

Keyboard

* <span title="Title Text">Span Example</span>

Span Example

* <strong>Strong Text</strong>

Strong Text

* <del>STRIKETHROUGH</del>

~~STRIKETHROUGH~~

* Blok Start <blockquote> blockquote Text</blockquote>Block End Blok Start

blockquote Text

Block End

* <blink>Blinking</blink> Blinking

* <small>Small Text</small>

Small Text

* <big>Big Text</big> Big Text

* O<sub>2</sub> O₂

* X<sup>2</sup> X²

* <b>Bold Text</b> Bold Text <u>Underline text</u> Underline text

* <i>İtalic Text</i> İtalic Text

* <address> ADDRESS </address>

ADDRESS

* Pre Example

               ----|---
             /\ | /\
             / \ | / \
             /____\|/____\
             \       /|\     /
             \ / | \ /
             \/__|__\/

*<code><% ...%></code>


 <% ...%>

* <tt>typewriter text</tt> typewriter text

*<em>emphasize text</em> emphasize text

*<nobr>Text will not break or wrap the screen</nobr> Text will not break or wrap the screen.

*<samp>Makes text standard fixed width.</samp> Makes text standard fixed width.

*<KBD>Makes text standard fixed width.</KBD> Makes text standard fixed width.

*<CITE> Makes text italic.</CITE> Makes text italic.

*<bdo dir="rtl">read right to left </bdo> read right to left

*<S>Puts a strikeout line through the enclosed text.</S> ~~Puts a strikeout line through the enclosed text.~~

*inserted text <ins>inserted text</ins> inserted text

[ HTML Headings - Header Tags
Text Style Codes
Text Alignment
Divisions tag <div>...</div> : Text Justification
The <br> Tag
The <P> Tag : Paragraph
The <HR> Tag
Advanced Text Formating
Fonts ]

Headings - Header Tags

2010-09-26T06:22:00.002-07:00

HTML Headings - Header Tags

Heading levels range from 1 (level 1 heading) to 6 (level 6 heading)

<H1> gives the largest size heading
<H6> gives the smallest size heading.

For example :

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

* Will look like this in the browser:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

You could use inline styles to change size, color, weight, decoration, border, all sorts of things!

For example :

<h2 style="color:yellow">H2 with a Yellow Color Style</h2>

H2 with a Yellow Color Style

Centering Text

For example :

<H3 align=center>This is what you want centered</H3>

This is what you want centered

[ Text Formating - For Example - Free Codes
Text Style Codes
Text Alignment
Divisions tag <div>...</div> : Text Justification
The <br> Tag
The <P> Tag : Paragraph
The <HR> Tag
Advanced Text Formating
Fonts ]

Text Style Codes

2010-09-26T06:22:00.001-07:00

Text Style Codes

Bold :

This is Bold...

Italics :

<i>This is Italic...</i>

This is Italic...

Underline :

<u>This is Underline..</u>

This is Underline..

[ Text Formating - For Example - Free Codes
HTML Headings - Header Tags
Text Alignment
Divisions tag <div>...</div> : Text Justification
The <br> Tag
The <P> Tag : Paragraph
The <HR> Tag
Advanced Text Formating
Fonts ]

Text Alignment

2010-09-26T06:21:00.001-07:00

Text Alignment

Centering Text

<center> ... </center> tags :

Align everything inside the tags with the center of the Html document.

For example :

<center>This text will be centered</center>

* Will look like this in the browser:

This Text will be centered

[ Text Formating - For Example - Free Codes
HTML Headings - Header Tags
Text Style Codes
Divisions tag <div>...</div> : Text Justification
The <br> Tag
The <P> Tag : Paragraph
The <HR> Tag
Advanced Text Formating
Fonts ]

Divisions tag
...
: Text Justification

2010-09-26T06:20:00.000-07:00

Divisions tag <div>...</div> : Text Justification

ALING Arrtibute ; LEFT - RIGHT - CENTER

<div align=left>...</div> -- default -- for left justified text
<div align=right>...</div> -- for right justified text
<div align=center>...</div> -- same as using <center>...</center> Tag.

For example :

<div align=left>This text will be displayed Left justified</div>
<div align=right>This text will be displayed right justified</div>
<div align=center>This text will be centered</div>

* Will look like this in the browser:

This text will be displayed Left justified

This text will be displayed right justified

This text will be centered

[ Text Formating - For Example - Free Codes
HTML Headings - Header Tags
Text Style Codes
Text Alignment
The <br> Tag
The <P> Tag : Paragraph
The <HR> Tag
Advanced Text Formating
Fonts ]

The
Tag

2010-09-26T06:19:00.002-07:00

The <br> Tag

BR stands for line BReak.

This tag causes a single line break.

For example :

Text Line 1<br>Text Line 2<br>Text Line 3<br>Text Line 4

* Will look like this in the browser:

Text Line 1
Text Line 2
Text Line 3
Text Line 4

You can use the <br> tag to make as many line breaks

For example :

Text Line 1<br><br><br><br>Text Line 4

* Will look like this in the browser:

Text Line 1

Text Line 4

[ Text Formating - For Example - Free Codes
HTML Headings - Header Tags
Text Style Codes
Text Alignment
Divisions tag <div>...</div> : Text Justification
The <P> Tag : Paragraph
The <HR> Tag
Advanced Text Formating
Fonts ]

The
Tag : Paragraph

2010-09-26T06:19:00.001-07:00

The <P> Tag : Paragraph

This tag inserts a blank line and starts a new paragraph.

For Example

<p>First Paragraph<br> Text Line 1</p>
<p>Second Paragraph.<br> Text Line 1<br> Text Line 2</p>

* Will look like this in the browser:

First Paragraph
Text Line 1

Second Paragraph.
Text Line 1
Text Line 2

[ Text Formating - For Example - Free Codes
HTML Headings - Header Tags
Text Style Codes
Text Alignment
Divisions tag <div>...</div> : Text Justification
The <br> Tag
The <HR> Tag
Advanced Text Formating
Fonts ]

The
Tag

2010-09-26T06:15:00.000-07:00

The <HR> Tag

HR stands for Horizontal Rule

You can put a line across the html page with a <hr> tag.

For example :

SPECIFY HEIGHT OF THE HR

SPECIFY WIDTH OF THE HR

WIDTH IN PERCENTAGES

SPECIFY ALIGNMENT OF THE HR

SPECIFY NO SHADE ON THE HR

SPECIFY COLOR OF THE HR

<hr color=#FFFF00 width=45%> yellow

[ Text Formating - For Example - Free Codes
HTML Headings - Header Tags
Text Style Codes
Text Alignment
Divisions tag <div>...</div> : Text Justification
The <br> Tag
The <P> Tag : Paragraph
Advanced Text Formating
Fonts ]

Html Makes an unordered list

2010-07-12T14:39:00.000-07:00

Html Makes an unordered list

Here is an example of an unordered list:

Example Code Syntax :

<h5>Unordered List :</h5>
<ul>
<li>List item 1
<li>List item 2
<li>List item 2
</ul>

will look like this in the browser:

Unordered List :

List Item 1
List Item 2
List Item 3

Html Makes an Ordered List

2010-07-12T14:38:00.000-07:00

Html Makes an Ordered List

You can also make an ordered list:

An ordered list provides a list of items as 1, 2, 3, etc; A, B, C, etc; I,II, III, etc; or a, b, c, etc. By default, when creating an ordered list, the browser assumes the 1, 2, 3 style.

Here is an example of an Ordered list :

Example Code Syntax :

<h5>Ordered list :</h5>
<ol>
<li> part a
<li> part b
<li> part c
</ol>

will look like this in the browser:

Ordered list :
1. part a
2. part b
3. part c

We can change the type of an ordered list.

Example Code Syntax :

<ol type="A">
<li>First list item
<li>Second list item
<li>Another list item
</ol>

will look like this in the browser:

First list item
Second list item
Another list item

Other Example :

Example Code Syntax :

<ol type="I">
<li>First list item
<li>Second list item
<li>Another list item
</ol>

will look like this in the browser:

First list item
Second list item
Another list item

Other Example :

Example Code Syntax :

<ol type="1" start="10">
<li>First list item
<li>Second list item
<li>Another list item
</ol>

will look like this in the browser:

First list item
Second list item
Another list item

Other Example :

Example Code Syntax :

<ul type="circle">
<li>First list item
<li>Second list item
<li>Another list item
</ul>

will look like this in the browser:

First list item
Second list item
Another list item

Description / Definition Lists

2010-07-12T14:37:00.000-07:00

Html Description / Definition Lists

Definition lists ( <DL> ) are fairly much what their name says that they are. Such type of list is very useful for making a glossary or such. Definition lists contain a definition term ( <DT> ) as well as a definition ( <DD> ).

Here is an example of an Definition List :

Example Code Syntax :

<dl>
<dt> Title 1
<dd> Definition 1
<dt> Title 2
<dd> Definition 2
:
:
:
<dt> Title N
<dd> Definition N
</dl>

will look like this in the browser:

Title1: Definition1
Title2: Definition2
:
:
:
TitleN: DefinitionN

Nested Lists / Nest Lists

2010-07-12T14:36:00.000-07:00

Nested Lists / Nest Lists

Sometimes it is appropriate to have a list within a list--a nested list. One must be careful when organizing such a list, though, since they can easily become unorganized and confusing. It is best to not nest more than three levels.

Here is an example of an Nested List :

Example Code Syntax :

<UL>
<LI>These are a few of my favorite foods
<UL>
<LI>Peach
<LI>Apples
<LI>Orange
</UL>
<LI>These are some foods I dislike
<UL>
<LI>Oysters
<LI>Legs
<LI>Spinach
</UL>
</UL>

will look like this in the browser:

These are a few of my favorite foods
- Peach
- Apples
- Orange
These are some foods I dislike
- Oysters
- Legs
- Spinach

Image Attribute

2010-06-16T15:29:00.000-07:00

Html Image Attribute

WIDTH: used for specifying the width of the image
HEIGHT: specifies height
BORDER: displays a border around the image.
ALT: Defines a short description of the image
HSPACE: inserts space at the left and right of the image
VSPACE: inserts space at the top and bottom of the image
ALIGN: aligns other HTML elements such as text around the image.( top / bottom / middle / left / right)

Labels »» [Using an Image as a Link] [How to Include Images in Web Pages ]

Tags Frame Support noframes

2010-01-02T07:00:00.002-08:00

<noframes> tags : Frame Support

This tag containing some text for browsers that do not support frames. You should include a <noframes> section with your <frameset> pages for people whose browsers don't support frames.

<html>
<head>
<title>Frames Example</title>
</head>
<title>My FrameSet</title>
<frameset cols="150,*">
<frame src="frame-3.htm" name="Linking">
<frame src="frame-2.htm" name="Targeting">
</frameset
<noframes>
<body>
This text will appear only if the browser does not support frames.
</body>
</noframes>
</frameset>
</html>

Labels »» [Frameset Examples] [Linking To Frame] [Iframe Attributes Example Linking Iframe] [Frame Frameset Attributes]

Frameset Examples

2010-01-02T07:00:00.001-08:00

Frameset Examples

<html> <head> <title>Frames Red Page A</title> </head> <body bgcolor="#FF0000"> <div align="center"> <font color="#FFFFFF">A Sheet</font> </div> </body> </html>	frame-a.htm will look like this in the browser:
<html> <head> <title>Frame Blue Page B</title> </head> <body bgcolor="#0000FF"> <div align="center"> <font color="#FFFFFF">B Sheet</font> </div> </body> </html>	frame-b.htm will look like this in the browser:
<html> <head> <title>Frames Green Page C</title> </head> <body bgcolor="#00FF00"> <div align="center"> <font color="#FFFFFF">C Sheet</font> </div> </body> </html>	frame-c.htm will look like this in the browser:
<html> <head> <title>Frames Black Page D</title> </head> <body bgcolor="#000000"> <div align="center"> <font color="#FFFFFF">D Sheet</font> </div> </body> </html>	frame-d.htm will look like this in the browser:

Frameset Example - Application

<html> <head> <title>Frameset Example - Application 3</title> </head> <frameset rows="50%,50%"> <frameset cols=","> <frame name=" red" src="frame-a.htm"> <frame name=" blue" src="frame-b.htm"> </frameset> <frame name=" green" src="frame-c.htm"> </frameset> <body> </body> </html>	will look like this in the browser:
<html> <head> <title>Frameset Example - Application 2</title> </head> <frameset cols="150,"> <frame name=" red" src="frame-a.htm"> <frameset rows="100,"> <frame name=" blue" src="frame-b.htm"> <frame name=" green" src="frame-c.htm"> </frameset> </frameset> <body> </body> </html>	will look like this in the browser:
<html> <head> <title>Frameset Example - Application 1</title> </head> <frameset rows="," cols=","> <frame name="red" src="frame-a.htm"> <frame name="blue" src="frame-b.htm"> <frame name="green" src="frame-c.htm"> <frame name="black" src="frame-d.htm"> </frameset> <body> </body> </html>	will look like this in the browser:
<html> <head> <title>Frameset Example- Application 4</title> </head> <frameset rows=",,"> <frame name=" red" src="frame-a.htm"> <frameset cols=",*"> <frame name=" blue" src="frame-b.htm"> <frame name=" green" src="frame-c.htm"> </frameset> <frame name=" black" src="frame-d.htm"> </frameset> <body> </body> </html>	will look like this in the browser:

Labels »» [noframes tags Frame Support] [Linking To Frame] [Iframe Attributes Example Linking Iframe] [Frame Frameset Attributes]

Linking To Frame

2010-01-02T06:57:00.000-08:00

Linking To Frame

Targeting Frame Link
Naming Frame

Make up a name and use the Name attribute in the individual frame tag.

<html>
<head>
<title>My FrameSet</title>
<frameset cols="150,*">
<frame src="frame-3.htm" name="Linking">
<frame src="frame-2.htm" name="Targeting">
</frameset>
<body>
</body>
</html>

Targeting Link

The link on my Linking page frame-3.htm use a TARGET attribute set to Targeting. This will cause the link to be loaded in the frame named Targeting instead of the default Linking frame.

<a href="target.htm" target="Targeting"> Bridge</a>

Labels »» [noframes tags Frame Support] [Frameset Examples] [Iframe Attributes Example Linking Iframe] [Frame Frameset Attributes]

Iframe Attributes Example Linking Iframe

2010-01-02T06:56:00.001-08:00

Iframe

Iframe (from Inline Frame) creates an inline frame that contains another Html document.

Syntax:

Iframe Attributes

Iframe Example:

Linking Iframe

Example:

Target = Iframe name

Labels »» [noframes tags Frame Support] [Frameset Examples] [Linking To Frame] [Frame Frameset Attributes]

Marquee Codes Attribute

2009-12-13T13:38:00.000-08:00

Marquee Codes / Attribute

1.Attribute: Loop

Note: the marquee will stop after the number of times looped

Code syntax ;

<marquee loop="5">Slide Text </marquee>

This looping marquee loops 5 times and stops.

Slide Text

2.Attribute: Bgcolor

Code syntax ;

<marquee bgcolor="#00ff00">Slide Text </marquee>

Slide Text

3.Attributes: direction/right or left

Note: direction left is the default direction

Code syntax ;

<marquee direction="right">Slide Text </marquee>

Slide Text

4.Attributes: width and/or height

Code syntax ;

<marquee width="125">Slide Text </marquee>

Slide Text

5.Attributes: behavior/slide

Code syntax ;

<marquee behavior="slide">Slide Text </marquee>

This sliding marquee slides once and stops.

Slide Text

6.Attributes: behavior/alternate

Code syntax ;

<marquee behavior="alternate">Slide Text</marquee>

Slide Text

7.Attributes: scrollamount

Note: this will determine the speed of the marquee

Code syntax ;

<marquee scrollamount="30">Slide Text</marquee>

Slide Text

8.Attributes: scrolldelay

Note: this will delay the speed of the marquee

Code syntax ;

<marquee scrolldelay="200">Slide Text</marquee>

Slide Text

9.Attributes: scrolldelay/scrollamount

Note: this might take a little practice & tweaking.

Code syntax ;

<marquee scrolldelay="480" scrollamount="375">
Slide Text </marquee>

Slide Text

Labels »» [Marquue Slide Image] [Marquee to drive dynamic / Marquee Control] [Marquee Properties]

Marquue Slide Image

2009-12-13T13:37:00.000-08:00

Marquue Slide Image

Labels »» [Marquee Examples Codes Attribute] [Marquee to drive dynamic / Marquee Control] [Marquee Properties]

Marquee to drive dynamic / Marquee Control

2009-12-13T13:31:00.001-08:00

Marquee to drive dynamic / Marquee Control

Pausing the text when mouse is over the text:

Code Syntax :

<marquee onmouseover="this.stop();" onmouseout="this.start();" > <a href="http://html-lesson.blogspot.com">Html Lesson</a> </marquee>

will look like this in the browser:

Html Lesson

Labels »» [Marquee Examples Codes Attribute] [Marquue Slide Image] [Marquee Properties]

Links Between My Own Pages

2009-11-07T01:35:00.001-08:00

Links Between My Own Pages

link to page1.htm

Link syntax:

<a href="page1.html">Click here to go to page 1</a>

If page2.htm were placed in a subfolder (named "myfolder"), the link could look like this:

Link syntax:

<a href="myfolder/page2.htm">Click here to go to page 2</a>

a link from page 2 (in the subfolder) to page1.htm would look like this:

Link syntax:

<a href="../page1.htm">Click here to go to page 1</a>

Labels »» [Links Attribute] [Links E-MAIL] [Internal Links Within a Web Page] [Hyperlinks For Downloads] [Default Links; Base] [Creating Hyperlinks Using Images] [Image Maps] [Creating Link to Other Web Site]

Links Attribute

2009-11-07T01:32:00.001-08:00

The <a> Attribute

The HTML anchor element <a>, is used to define hyperlinks. The <a> tag defines an anchor

</a> ends the entire link command

The href Attribute

The href attribute defines the link address

Note: HREF stands for Hypertext REFerence.

TITLE Attribute

TITLE attribute is, through which you can provide some explanatory text for that link.

Html Code syntax:

<A HREF="http://www.html-lesson.blogspot.com" title="Go to html-lesson.blogspot.com's mainpage">Html Lesson Homepage</A>

To see this attribute in action, place your mouse over the link.

will look like this in the browser:

Html Lesson Homepage

The target Attribute

The target attribute defines whether to open the page in a separate window, or to open the link in the current browser window.

target=" _blank" Opens new page in a new browser window

target="_self" Loads the new page in current window

target="_parent" Loads new page into a frame that is superior to where the link lies

target="_top" Loads new page into the current browser window, cancelling all frames

target="frame_name" Loads new page into named frame

<A HREF="http://www.html-lesson.blogspot.com" target="_blank">Html Lesson Homepage</A>

Labels »» [Links Between My Own Pages] [Links E-MAIL] [Internal Links Within a Web Page] [Hyperlinks For Downloads] [Default Links; Base] [Creating Hyperlinks Using Images] [Image Maps] [Creating Link to Other Web Site]

Links E-MAIL - using the MAILTO

2009-11-07T01:27:00.001-08:00

E-MAIL - using the MAILTO

E-Mail Link syntax:

Labels »» [Links Between My Own Pages] [Links Attribute] [Internal Links Within a Web Page] [Hyperlinks For Downloads] [Default Links; Base] [Creating Hyperlinks Using Images] [Image Maps] [Creating Link to Other Web Site]

Internal Links Within a Web Page

2009-11-07T01:25:00.000-08:00

Internal Links Within a Web Page

You can also create internal links within a page

Named anchor syntax:

A named anchor inside an HTML document:

The link syntax to a named anchor:

The # in the href attribute defines a link to a named anchor.

will look like this in the browser

| Jump to the Top |

Labels »» [Links Between My Own Pages] [Links Attribute] [Links E-MAIL] [Hyperlinks For Downloads] [Default Links; Base] [Creating Hyperlinks Using Images] [Image Maps] [Creating Link to Other Web Site]

Links Hyperlinks For Downloads

2009-11-07T01:24:00.001-08:00

Hyperlinks For Downloads

<a href="lesson.zip">Download This File</a>

Labels »» [Links Between My Own Pages] [Links Attribute] [Links E-MAIL] [Internal Links Within a Web Page] [Default Links; Base] [Creating Hyperlinks Using Images] [Image Maps] [Creating Link to Other Web Site]

Default Links; Base

2009-11-07T01:12:00.002-08:00

Default Links; Base

Use the <base> tag in the head element to set a default URL for all links on a page to go to.

Example Html Code syntax:

Labels »» [Links Between My Own Pages] [Links Attribute] [Links E-MAIL] [Internal Links Within a Web Page] [Hyperlinks For Downloads] [Creating Hyperlinks Using Images] [Image Maps] [Creating Link to Other Web Site]

Links Creating Hyperlinks Using Images

2009-11-07T01:12:00.001-08:00

Creating Hyperlinks Using Images

Example Html Code syntax:

will look like this in the browser:

Labels »» [Links Between My Own Pages] [Links Attribute] [Links E-MAIL] [Internal Links Within a Web Page] [Hyperlinks For Downloads] [Default Links; Base] [Image Maps] [Creating Link to Other Web Site]

html Links Image Maps

2009-11-07T01:10:00.001-08:00

Image Maps

An image-map is an image with clickable areas. The <map> tag is used to define a client-side image-map.

Example Html Code syntax:

</map>

will look like this in the browser:

shape / coords Attribute

Use of the shape and coords attribute in a link, to create an image map:

shape Attribute Values

default ; Specifies the entire region

rect ; Defines a rectangular region

circle ; Defines a circular region

poly ; Defines a polygonal region

coords Attribute Values

x1,y1,x2,y2 If the shape attribute is set to "rect", it specifies the coordinates of the left-top corner and the right-bottom corner of the rectangle

x,y,radius If the shape attribute is set to "circ", it specifies the coordinates of the circle center and the radius

x1,y1,x2,y2,..,xn,yn If the shape attribute is set to "poly", it specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser must add the last coordinate pair to close the polygon

Labels »» [Links Between My Own Pages] [Links Attribute] [Links E-MAIL] [Internal Links Within a Web Page] [Hyperlinks For Downloads] [Default Links; Base] [Creating Hyperlinks Using Images] [Creating Link to Other Web Site]

html Terms

2009-10-06T09:29:00.000-07:00

HTML Terms

-A-

ADDRESS - Information On author

APPLET - Java applet

AREA - client-side image map area

A - anchor

ABBR - abbreviated form (e.g., WWW, HTTP, etc.)

-B-

BUTTON - push button

BR - forced line break

BODY - document body

BLOCKQUOTE - long quotation

BIG - large text style

BASEFONT - base font size

BASE - document base URI

B - bold text style

-C-

COLGROUP - table column group

COL - table column

CODE - computer code fragment

CITE - citation

CENTER - shorthand for DIV align=center

CAPTION - table caption

-D-

DT - definition term

DL - definition list

DIV - generic language / style container

DIR - directory list

DFN - instance definition

DEL - delete text

DD - definition description

-E-

EM - emphasis

-F-

FRAMESET - windows subdivision

FRAME - subwindow

FORM - interactive font

FONT - local chance to font

FIELDSET - form control group

-H-

HTML - document root element

HR - horizontal rule

HEAD - Document head

H1, H2, H3, H4, H5, H6 - heading

-I-

INS - inserted text

INPUT - form control

IMG - Embedded image

IFRAME - inline subwindow

I - italic text style

-K-

KBD - text to be entered by the user

-L-

LINK - a media- independent link

LI - list item

LEGEND - fieldset legend

LABEL - form field label text

-M-

META - generic metainformation

MENU - menu list

MAP - client- side image map

-N-

NOSCRIPT - alternate content container for none script- based rendering

NOFRAMES - alternate content container for none frame- based rendering

-O-

OPTION - selectable choise

OPTGROUP - option group

OL - ordered list

OBJECT - generic embedded object

-P-

PRE - preformatted text

PARAM - named property value

P - paragraph

-Q-

Q - short inline quotation

-S-

SUP - superscript

SUB - subscript

SPAN - generic language/style container

STYLE - style info

STRONG - strong emphasis

STRIKE - strike-throught text

SMALL - small text style

SELECT - option selector

SCRİPT - script statements

SAMP - sample program outputi script etc.

S - strike-throught text style

-T-

TT - teletype or monospaced text style

TR - table row

THEAD - table header

TH - table header cell

TFOOT - table footer

TEXTAREA - multi-line text field

TD - table data cell

TBODY - table body

TITLE - document title

-U-

UL - unordered list

U - underline text style

-V-

VAR - instance of a variable or program argument

Privacy Policy

2009-10-06T09:28:00.001-07:00

Privacy Policy

At html-lesson.blogspot.com, the privacy of our visitors is of extreme importance to us. This privacy policy document outlines the types of personal information is received and collected by html-lesson.blogspot.com and how it is used.

Cookies and Web Beacons

html-lesson.blogspot.com does use cookies to store information about visitors preferences, record user-specific information on which pages the user access or visit, customize Web page content based on visitors browser type or other information that the visitor sends via their browser.

DoubleClick DART Cookie

Google, as a third party vendor, uses cookies to serve ads on html-lesson.blogspot.com.

Google's use of the DART cookie enables it to serve ads to users based on their visit to html-lesson.blogspot.com and other sites on the Internet.

Users may opt out of the use of the DART cookie by visiting the Google ad and content network privacy policy at the following URL - http://www.google.com/privacy_ads.html

The third-party ad servers or ad networks use technology to the advertisements and links that appear on html-lesson.blogspot.com send directly to your browsers. They automatically receive your IP address when this occurs. Other technologies (such as cookies, JavaScript, or Web Beacons) may also be used by the third-party ad networks to measure the effectiveness of their advertisements and / or to personalize the advertising content that you see.

html-lesson.blogspot.com has no access to or control over these cookies that are used by third-party advertisers.

You should consult the respective privacy policies of these third-party ad servers for more detailed information on their practices as well as for instructions about how to opt-out of certain practices. html-lesson.blogspot.com's privacy policy does not apply to, and we cannot control the activities of, such other advertisers or web sites.

If you wish to disable cookies, you may do so through your individual browser options. More detailed information about cookie management with specific web browsers can be found at the browsers' respective websites.

If you require any more information or have any questions about our privacy policy, please feel free to contact us by email at Me.

What is HTML?

2009-01-14T13:35:00.001-08:00

What is HTML?

HTML are initials that stand for Hyper Text Markup Language, HTML is a language for describing web pages. HTML is not a programming language, it is a markup language.

HTML defines the structure and layout of a Web document by using a variety of tags and attributes. The correct structure for an HTML document starts with <HTML><HEAD>(enter here what document is about)<BODY> and ends with </BODY></HTML>.

All the information you'd like to include in your Web page fits in between the <BODY> and </BODY> tags.

Basic HTML Code / Tags

<html>
<head>
<title> For Simple Web Page</title>
</head>

<body >

<h1> My first page </h1>

This is my first web page and I can say anything I want in here.

</body>
</html>

Notes:

1. Most HTML tags require an 'opening' and 'closing'
2. A web page requires an opening and closing HTML tag i.e. <html> .. web page here.. </html>
3. The top section of the web page requires a 'head' section i.e. <head> ... </head>
4. Inside the 'head' you can place a title (which will be the name you see when you add the site to your favorites / bookmarks) i.e. <head> <title> ..text for favorites..</title></head>
5. After closing the <head>, the next section is the <body> In other words the body is inside the <html> and </html> but it's below the <head> ... </head> section.

What is Markup?

Markup means that specific portions of a document are marked up to indicate how they should be displayed in the browser.

How does it work?

HTML consists of a series of short codes typed into a text-file by the site author — these are the tags. The text is then saved as a html file, and viewed through a browser, like Internet Explorer or Netscape Navigator. This browser reads the file and translates the text into a visible form, hopefully rendering the page as the author had intended. Writing your own HTML entails using tags correctly to create your vision. You can use anything from a rudimentary text-editor to a powerful graphical editor to create HTML pages.

How to Include Images in Web Pages

2009-01-14T13:13:00.001-08:00

How to Include Images in Web Pages

Three kinds of images files .gif, .jpg and .png are used on the Internet

jpeg or .jpg stands for Joint Photographic Experts Group

PNG stands for portable network graphic

GIF stands for General Image Format

These kinds of images files.tiff, .eps, .psd, .cdr aren't used on the Internet

syntax:

IMG stands for image. The IMG tag is used to insert images within the text.

The SRC (stands for SouRCe) attribute determines the source of the image file.

If image.jpg were placed in a subfolder (named "myfolder"),

syntax:

Labels »» [Using an Image as a Link] [image Attribute]

Html Links Creating Link to Other Web Site

2009-01-14T10:50:00.001-08:00

Creating Link to Other Web Site

Link syntax:

<a href="http://www.html-lesson.blogspot.com">Html Link Lesson</a>

will look like this in the browser:

Html Link Lesson

html Standard Tags

2009-01-13T12:07:00.001-08:00

html Standard Tags

HTML <html> tag

<html> Contains the document

HTML <head> tag

<head> Defines the document's header block

The following tags can be added to the head section: <meta>, <script>, <style>, and <title>.

HTML <title> tag

The <title> tag defines the title of the document, and is the only required element in the head section!

HTML <body> tag

The BODY tag contains the actual contents of the document.

<body> Contains the renderable elements

Here are some BODY attribute usage examples:

Other Example

Bgcolor: The background color of the document.

Background: An image to use as the background.

Text: Specifies the color of the text in the document.

ALink : Specifies the color of the active links in the document.

Link : Specifies the color of all the links in the document.

Hlink : Specifies the color of the link-hover .

Vlink: Specifies the color of the visited links in the document.

topmargin : Sets the top margin for your body element.

leftmargin : Sets left-margin for your body element.

rightmargin : Sets the right margin for your body element.

marginbottom : Sets the bottom margin for your body element.

Here is A simple HTML document, with the minimum of required tags:

<html>
<head>
<title>Title of the Document</title>
</head>

<body>
The Content of the Document..
</body>

</html>

Tables

2008-10-23T12:06:00.000-07:00

HTML Tables

Tables are defined with the <table>...</table> tags. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag).

Code Syntax:

<table>

<tr>
<td>
first table row, first data item
</td>
<td>
first table row, second table data item
</td>
</tr>

<tr>
<td>
second table row, first data item
</td>
<td>
second table row, second table data item
</td>
</tr>

</table>

html Tables - Examples for Colspan and Rowspan
Html <td> Tag Attributes
HTML Tables - Attributes
Html Table Examples

Advanced text Formating

2008-07-08T14:34:00.001-07:00

Advanced Text Formating

<strong></strong>	you can give stronger emphasis by using the openning tag <strong> and the closing tag </strong>
<big></big>	to make the text a little bigger
<small></small>	to make the text a little smaller.
<em></em>	To emphasize text, usually in italics
<sub></sub>	(subscript) - Renders the text in sub-script, below the normal line.
<sup></sup>	(Supscript - )Renders the text in super-script, above the normal line
<del></del>	strike-through - Stands for deleted text,
<ins></ins>	This tag indicates an inserted text in a document
<u></u>	UNDERLINING TEXT -
<i></i>	ITALICS - İtalic Text
<b></b>	BOLD Text
<!-- -->	ADDING A COMMENT -- (Inserts hidden comments) A comment begins with "<!--" and ends with "-->".
<nobr></nobr>	Text will not break or wrap the screen
<s> </s>	Creates a strike-through effect. There was also <strike>
<pre> </pre>	PREFORMATTING - This Tag allows you to keep the original line breaks and spacing that you have inserted into the text in your HTML document.
<tt></tt>	To display text in a monospaced teletype font. TT stands for TeleType font (also known as Typewriter Text)
<address></address>	The ADDRESS element should be used if you want to enclose contact information - such as addresses and phone numbers.
<bdo dir="rtl"></bdo>	If your text is meant to be read right-to-left
<code></code>	CODE is used to enclose a sample of computer code
<abbr></abbr>	Abbreviation - This is used to show an ABBReviated version of a word
<ACRONYM TITLE="x"> </ACRONYM>	Similar to the <abbr> tag
<kbd></kbd>	The KBD element is used to indicate text which should be entered by the user.
<blink> </blink>	Blinking- Makes the text blink
&nbsp	Make one character space
<blockquote></blockquote>	To indicate that a block of text is a quotation
<SPAN>…</SPAN>	This tag was brought in specifically to work with stylesheets in applying classes
<SAMP></SAMP>	Makes text standard fixed width.
<PLAINTEXT></PLAINTEXT>	Displays everything as plain text.
<CITE> </CITE>	Makes text italic

Formatting Text

2008-07-06T23:56:00.001-07:00

Formatting Text

Font Codes : <font>..</font>

Changing Font Size

The <font>..</font> tag used to set the size of the font from 1 (smallest) to 7 (largest)

Important: there isn't <font size=8> tag, it is treated as <font size=7>

For Example :

<font size="1">Font Size = 1</font>
<font size="2"> Font Size = 2</font>
<font size="3"> Font Size = 3</font> -- normal text size
<font size="4"> Font Size = 4</font>
<font size="5"> Font Size = 5</font>
<font size="6"> Font Size = 6</font>
<font size="7"> Font Size = 7</font>

* Will look like this in the browser:

Font Size = 1
Font Size = 2
Font Size = 3 -- normal text size
Font Size = 4
Font Size = 5
Font Size = 6
Font Size = 7

Changing The Font's Face

For Example :

<font face="arial">This is ARIAL</font>
<font face="comic sans ms">This is COMIC SANS MS</font>

* Will look like this in the browser:

This is ARIAL
This is COMIC SANS MS
Colored Text

For Example :

<font color="#FF0000">Font Color Red</font>
<font color="#FFFF45">Font Color Yellow</font>

* Will look like this in the browser:

Font Color Red
Font Color Yellow

Frame Frame Attributes

2008-06-25T14:27:00.000-07:00

HTML FRAMES

A frameset is in the <head> of a page that will hold only the frameset code. Don't use the <body></body> tags together with the <frameset></frameset> tags.

FRAMESET Attributes

COLS: how many cols in the frameset
ROWS: how many rows in the frameset
FRAMEBORDER: if the frames should have borders

FRAMESPACING: space between the frames
BORDER: space between frames
BORDERCOLOR: color of frame borders

Scrollbar
SCROLLING= YES - NO - AUTO; specifies whether or not a scrollbar will be present on a frame’s border.

YES - a scrollbar to be visible on a frame.
NO - no scrollbar to be visible on a frame.
AUTO - default - allows the browser to decide whether or not scrollbars are needed and, if so, to place them where necessary.

Example

Frames can be organized into ROWS or COLS (columns) by coding dimensions in the frameset tag. The size of the frames are put between quotes in the ROW or COLS attributes. An asterisk (*) can be used to represent any remaining screen space that's not already been assigned to other frames. Either pixels or percentages can be used to size frames.

Labels »» [noframes tags Frame Support] [Frameset Examples] [Linking To Frame] [Iframe Attributes Example Linking Iframe]

List Examples Tutoring List

2008-06-24T04:49:00.000-07:00

Tutoring List / List Examples

Makes an unordered list

Nested Lists / Nest Lists

Description / Definition Lists

Makes an Ordered List

Metatags Adding Meta Tags

2008-06-22T11:42:00.000-07:00

Html META Tags Lesson

Adding Meta Tags to Your Web Html Documents

Meta tags are a powerful tool for generating effects and passing data along to search engines.You can add metadata to your web pages by placing <meta> tags between the <head> and </head> tags.

1 - Name="Keywords" Tag

2 - Name="Description" Tag

3 - Title Tags - document title

4 - Other MetaTags

5 - NAME="COPYRIGHT"

6 - HTTP-EQUIV="CONTENT-TYPE"

7 - HTTP-EQUIV="CONTENT-LANGUAGE"

8 - NAME="AUTHOR"

9 - HTTP-EQUIV="EXPIRES"

10 - HTTP-EQUIV="REFRESH"

music media code Sound

2008-06-18T23:24:00.000-07:00

Adding Sounds

HTML MUSIC / MEDIA CODE - Sound

To add sounds to a web page. You will use the <EMBED> tag

This tag supports many common sound file formats... such as ..wav .wma .au .mp3 .mpg .mpeg .avi, .mid

Example Code Syntax :

Creating a player

Width : the width of the media player.

Height : the height of the media player.

To make the music play automatically the parameter is Autostart="TRUE"
You can put "FALSE" instead of "TRUE" so the person visiting your page will have to click on the play button for it to start.

Hidden - if this value is true then the media player will not be displayed. (Values are true/false)

Volume - set the volume of the media file. The range is 0-100. (default is 50)

loop - sets the media file to repeat or not

Normally the file will stop playing after it is completed the first time. so if you want it to start over once it is done use the attribute loop="true"

loop="true" ; bgsound sound continuously. (Values are true/false)

You can also use a number value to loop the sound a specific amount of times, for example loop="3" will play the background sound three times, then stop.

Transition Effects Internet Explorer Enter Exit

2008-06-17T08:28:00.000-07:00

Internet Explorer Effects

Transition Effects

Page-Exit, Page-Enter and Site-Exit, Site-Enter Effects

Internet Explorer has some built in special effects which you can use on your html pages. They are effects already available in IE6 and earlier. You simply add a <META> tag, with attributes designed particularly for transitions, to the top of your page.

You have four options as to when the transition will occur: Page-Exit, Page-Enter, Site-Exit, Site-Enter

Code Syntax ;

<META HTTP-EQUIV="Page-Enter" CONTENT="RevealTrans (Duration=4, Transition=#">
<META HTTP-EQUIV="Page-Exit" CONTENT="RevealTrans (Duration=4, Transition=#">
<META HTTP-EQUIV="Site-Enter" CONTENT="RevealTrans (Duration=4, Transition=#">
<META HTTP-EQUIV="Site-Exit" CONTENT="RevealTrans (Duration=4, Transition=#">

Transition = #

0 - Box in
1 - Box out
2 - Circle in
3 - Circle out
4 - Wipe up
5 - Wipe down
6 - Wipe right
7 - Wipe left
8 - Vertical blinds
9 - Horizpntal blinds
10 - Checkerboard across
11 - Checkerboard down
12 - Random dissolve
13 - Split vertical in
14 - Split vertical out
15 - Split horizontal in
16 - Split horizontal out
17 - Strips left down
18 - Strips left up
19 - Strips right down
20 - Strips right up
21 - Random bars horizpntal
22 - Random bars vertical
23 - Random

Example :

Perform a random transition effect for 4 seconds upon entering the page.

Marquee Properties

2008-06-16T00:11:00.000-07:00

Properties for <MARQUEE ...>

Marquee Properties

bgcolor="Color_Code" - Chooses a background color.

width="X" - Specifies the width of the marquee this can be in a percent or in pixels.

height="X" - Specifies the height of the marquee this can be in a percent or in pixels.

direction="X" - Specifies in which direction to scroll text. Up, Down, Left, or Right.

scrollamount="x" - Specifies how fast to scroll the text. A value of 10 is fine for most purposes.

behavior="scroll" - This is the default value.

behavior="slide" - This makes the marquee scroll then stop when it reaches the side.

behavior="alternate" - This makes the marquee go back and forward.

loop="x" - This will make the marquee scroll X amount of times.

Labels »» [Marquee Examples Codes Attribute] [Marquue Slide Image] [Marquee to drive dynamic / Marquee Control]

Redirect to a web address Redirecting URL

2008-06-14T21:59:00.001-07:00

Meta refresh - Redirect to a web address :

Redirecting URL

The syntax :

Place the following HTML redirect code between the <HEAD> and </HEAD> tags of your HTML code.

<meta http-equiv="refresh" content="N; URL=other web address">

Example:

<html>
<title>Redirect to other web address</title>
<meta http-equiv="refresh" content="3;url=http://www.html-lesson.blogspot.com">

<body>

Redirect to http://www.html-lesson.blogspot.com after 3 seconds.

</body>
</html>

content="3" : Redirect to http://www.html-lesson.blogspot.com after 3 seconds.
content="0" : Redirect to http://www.html-lesson.blogspot.com immediately.

Special Characters

2008-06-13T04:42:00.001-07:00

Special Character

Characters	Decimal Code




!	!
"	"
#	#
$	$
%	%
&	&
'	'
(	(
)	)
*	*
+	+
,	,
-	-
.	.
/	/
0	0
1	1
2	2
3	3
4	4
5	5
6	6
7	7
8	8
9	9
:	:
;	;
<	<
=	=
>	>
?	?
@	@
A	A
B	B
C	C
D	D
E	E
F	F
G	G
H	H
I	I
J	J
K	K
L	L
M	M
N	N
O	O
P	P
Q	Q
R	R
S	S
T	T
U	U
V	V
W	W
X	X
Y	Y
Z	Z
[	[
\	\
]	]
^	^
_	_
`	`
a	a
b	b
c	c
d	d
e	e
f	f
g	g
h	h
i	i
j	j
k	k
l	l
m	m
n	n
o	o
p	p
q	q
r	r
s	s
t	t
u	u
v	v
w	w
x	x
y	y
z	z
{	{
\|	\|
}	}
~	~

¡	¡
¢	¢
£	£
¤	¤
¥	¥
¦	¦
§	§
¨	¨
©	©
ª	ª
«	«
¬	¬

®	®
¯	¯
°	°
±	±
²	²
³	³
´	´
µ	µ
¶	¶
·	·
¸	¸
¹	¹
º	º
»	»
¼	¼
½	½
¾	¾
¿	¿
À	À
Á	Á
Â	Â
Ã	Ã
Ä	Ä
Å	Å
Æ	Æ
Ç	Ç
È	È
É	É
Ê	Ê
Ë	Ë
Ì	Ì
Í	Í
Î	Î
Ï	Ï
Ğ	Ð
Ñ	Ñ
Ò	Ò
Ó	Ó
Ô	Ô
Õ	Õ
Ö	Ö
×	×
Ø	Ø
Ù	Ù
Ú	Ú
Û	Û
Ü	Ü
İ	Ý
Ş	Þ
ß	ß
à	à
á	á
â	â
ã	ã
ä	ä
å	å
æ	æ
ç	ç
è	è
é	é
ê	ê
ë	ë
ì	ì
í	í
î	î
ï	ï
ğ	ð
ñ	ñ
ò	ò
ó	ó
ô	ô
õ	õ
ö	ö
÷	÷
ø	ø
ù	ù
ú	ú
û	û
ü	ü
ı	ý
ş	þ
ÿ	ÿ

Color Name Codes Colors

2008-06-13T04:33:00.000-07:00

Color Codes

Color Name

HTML colors can be defined as a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB).
The lowest value that can be given to one light source is 0 (hex #00) and the highest value is 255 (hex #FF).

There are 256*256*256 = 16.400.000 Color Codes.

Here are Some Hexadecimal web color codes

`#000000`	`#000020`	`#000040`	`#000060`	`#000080`	`#0000a0`	`#0000c0`	`#0000ff`
`#002000`	`#002020`	`#002040`	`#002060`	`#002080`	`#0020a0`	`#0020c0`	`#0020ff`
`#004000`	`#004020`	`#004040`	`#004060`	`#004080`	`#0040a0`	`#0040c0`	`#0040ff`
`#006000`	`#006020`	`#006040`	`#006060`	`#006080`	`#0060a0`	`#0060c0`	`#0060ff`
`#008000`	`#008020`	`#008040`	`#008060`	`#008080`	`#0080a0`	`#0080c0`	`#0080ff`
`#00a000`	`#00a020`	`#00a040`	`#00a060`	`#00a080`	`#00a0a0`	`#00a0c0`	`#00a0ff`
`#00c000`	`#00c020`	`#00c040`	`#00c060`	`#00c080`	`#00c0a0`	`#00c0c0`	`#00c0ff`
`#00ff00`	`#00ff20`	`#00ff40`	`#00ff60`	`#00ff80`	`#00ffa0`	`#00ffc0`	`#00ffff`

`#200000`	`#200020`	`#200040`	`#200060`	`#200080`	`#2000a0`	`#2000c0`	`#2000ff`
`#202000`	`#202020`	`#202040`	`#202060`	`#202080`	`#2020a0`	`#2020c0`	`#2020ff`
`#204000`	`#204020`	`#204040`	`#204060`	`#204080`	`#2040a0`	`#2040c0`	`#2040ff`
`#206000`	`#206020`	`#206040`	`#206060`	`#206080`	`#2060a0`	`#2060c0`	`#2060ff`
`#208000`	`#208020`	`#208040`	`#208060`	`#208080`	`#2080a0`	`#2080c0`	`#2080ff`
`#20a000`	`#20a020`	`#20a040`	`#20a060`	`#20a080`	`#20a0a0`	`#20a0c0`	`#20a0ff`
`#20c000`	`#20c020`	`#20c040`	`#20c060`	`#20c080`	`#20c0a0`	`#20c0c0`	`#20c0ff`
`#20ff00`	`#20ff20`	`#20ff40`	`#20ff60`	`#20ff80`	`#20ffa0`	`#20ffc0`	`#20ffff`

`#400000`	`#400020`	`#400040`	`#400060`	`#400080`	`#4000a0`	`#4000c0`	`#4000ff`
`#402000`	`#402020`	`#402040`	`#402060`	`#402080`	`#4020a0`	`#4020c0`	`#4020ff`
`#404000`	`#404020`	`#404040`	`#404060`	`#404080`	`#4040a0`	`#4040c0`	`#4040ff`
`#406000`	`#406020`	`#406040`	`#406060`	`#406080`	`#4060a0`	`#4060c0`	`#4060ff`
`#408000`	`#408020`	`#408040`	`#408060`	`#408080`	`#4080a0`	`#4080c0`	`#4080ff`
`#40a000`	`#40a020`	`#40a040`	`#40a060`	`#40a080`	`#40a0a0`	`#40a0c0`	`#40a0ff`
`#40c000`	`#40c020`	`#40c040`	`#40c060`	`#40c080`	`#40c0a0`	`#40c0c0`	`#40c0ff`
`#40ff00`	`#40ff20`	`#40ff40`	`#40ff60`	`#40ff80`	`#40ffa0`	`#40ffc0`	`#40ffff`

`#600000`	`#600020`	`#600040`	`#600060`	`#600080`	`#6000a0`	`#6000c0`	`#6000ff`
`#602000`	`#602020`	`#602040`	`#602060`	`#602080`	`#6020a0`	`#6020c0`	`#6020ff`
`#604000`	`#604020`	`#604040`	`#604060`	`#604080`	`#6040a0`	`#6040c0`	`#6040ff`
`#606000`	`#606020`	`#606040`	`#606060`	`#606080`	`#6060a0`	`#6060c0`	`#6060ff`
`#608000`	`#608020`	`#608040`	`#608060`	`#608080`	`#6080a0`	`#6080c0`	`#6080ff`
`#60a000`	`#60a020`	`#60a040`	`#60a060`	`#60a080`	`#60a0a0`	`#60a0c0`	`#60a0ff`
`#60c000`	`#60c020`	`#60c040`	`#60c060`	`#60c080`	`#60c0a0`	`#60c0c0`	`#60c0ff`
`#60ff00`	`#60ff20`	`#60ff40`	`#60ff60`	`#60ff80`	`#60ffa0`	`#60ffc0`	`#60ffff`

`#800000`	`#800020`	`#800040`	`#800060`	`#800080`	`#8000a0`	`#8000c0`	`#8000ff`
`#802000`	`#802020`	`#802040`	`#802060`	`#802080`	`#8020a0`	`#8020c0`	`#8020ff`
`#804000`	`#804020`	`#804040`	`#804060`	`#804080`	`#8040a0`	`#8040c0`	`#8040ff`
`#806000`	`#806020`	`#806040`	`#806060`	`#806080`	`#8060a0`	`#8060c0`	`#8060ff`
`#808000`	`#808020`	`#808040`	`#808060`	`#808080`	`#8080a0`	`#8080c0`	`#8080ff`
`#80a000`	`#80a020`	`#80a040`	`#80a060`	`#80a080`	`#80a0a0`	`#80a0c0`	`#80a0ff`
`#80c000`	`#80c020`	`#80c040`	`#80c060`	`#80c080`	`#80c0a0`	`#80c0c0`	`#80c0ff`
`#80ff00`	`#80ff20`	`#80ff40`	`#80ff60`	`#80ff80`	`#80ffa0`	`#80ffc0`	`#80ffff`

`#a00000`	`#a00020`	`#a00040`	`#a00060`	`#a00080`	`#a000a0`	`#a000c0`	`#a000ff`
`#a02000`	`#a02020`	`#a02040`	`#a02060`	`#a02080`	`#a020a0`	`#a020c0`	`#a020ff`
`#a04000`	`#a04020`	`#a04040`	`#a04060`	`#a04080`	`#a040a0`	`#a040c0`	`#a040ff`
`#a06000`	`#a06020`	`#a06040`	`#a06060`	`#a06080`	`#a060a0`	`#a060c0`	`#a060ff`
`#a08000`	`#a08020`	`#a08040`	`#a08060`	`#a08080`	`#a080a0`	`#a080c0`	`#a080ff`
`#a0a000`	`#a0a020`	`#a0a040`	`#a0a060`	`#a0a080`	`#a0a0a0`	`#a0a0c0`	`#a0a0ff`
`#a0c000`	`#a0c020`	`#a0c040`	`#a0c060`	`#a0c080`	`#a0c0a0`	`#a0c0c0`	`#a0c0ff`
`#a0ff00`	`#a0ff20`	`#a0ff40`	`#a0ff60`	`#a0ff80`	`#a0ffa0`	`#a0ffc0`	`#a0ffff`

`#c00000`	`#c00020`	`#c00040`	`#c00060`	`#c00080`	`#c000a0`	`#c000c0`	`#c000ff`
`#c02000`	`#c02020`	`#c02040`	`#c02060`	`#c02080`	`#c020a0`	`#c020c0`	`#c020ff`
`#c04000`	`#c04020`	`#c04040`	`#c04060`	`#c04080`	`#c040a0`	`#c040c0`	`#c040ff`
`#c06000`	`#c06020`	`#c06040`	`#c06060`	`#c06080`	`#c060a0`	`#c060c0`	`#c060ff`
`#c08000`	`#c08020`	`#c08040`	`#c08060`	`#c08080`	`#c080a0`	`#c080c0`	`#c080ff`
`#c0a000`	`#c0a020`	`#c0a040`	`#c0a060`	`#c0a080`	`#c0a0a0`	`#c0a0c0`	`#c0a0ff`
`#c0c000`	`#c0c020`	`#c0c040`	`#c0c060`	`#c0c080`	`#c0c0a0`	`#c0c0c0`	`#c0c0ff`
`#c0ff00`	`#c0ff20`	`#c0ff40`	`#c0ff60`	`#c0ff80`	`#c0ffa0`	`#c0ffc0`	`#c0ffff`

`#ff0000`	`#ff0020`	`#ff0040`	`#ff0060`	`#ff0080`	`#ff00a0`	`#ff00c0`	`#ff00ff`
`#ff2000`	`#ff2020`	`#ff2040`	`#ff2060`	`#ff2080`	`#ff20a0`	`#ff20c0`	`#ff20ff`
`#ff4000`	`#ff4020`	`#ff4040`	`#ff4060`	`#ff4080`	`#ff40a0`	`#ff40c0`	`#ff40ff`
`#ff6000`	`#ff6020`	`#ff6040`	`#ff6060`	`#ff6080`	`#ff60a0`	`#ff60c0`	`#ff60ff`
`#ff8000`	`#ff8020`	`#ff8040`	`#ff8060`	`#ff8080`	`#ff80a0`	`#ff80c0`	`#ff80ff`
`#ffa000`	`#ffa020`	`#ffa040`	`#ffa060`	`#ffa080`	`#ffa0a0`	`#ffa0c0`	`#ffa0ff`
`#ffc000`	`#ffc020`	`#ffc040`	`#ffc060`	`#ffc080`	`#ffc0a0`	`#ffc0c0`	`#ffc0ff`
`#ffff00`	`#ffff20`	`#ffff40`	`#ffff60`	`#ffff80`	`#ffffa0`	`#ffffc0`	`#ffffff`

Here are Some Hexadecimal web color codes And Color name.

Color Name	Color Code	Color
`AliceBlue`	`#F0F8FF`
AntiqueWhite	`#FAEBD7`
Aqua	`#00FFFF`
Aquamarine	`#7FFFD4`
Azure	`#F0FFFF`
Beige	`#F5F5DC`
Bisque	`#FFE4C4`
Black	`#000000`
BlanchedAlmond	`#FFEBCD`
Blue	`#0000FF`
BlueViolet	`#8A2BE2`
Brown	`#A52A2A`
BurlyWood	`#DEB887`
CadetBlue	`#5F9EA0`
Chartreuse	`#7FFF00`
Chocolate	`#D2691E`
Coral	`#FF7F50`
CornflowerBlue	`#6495ED`
Cornsilk	`#FFF8DC`
Crimson	`#DC143C`
Cyan	`#00FFFF`
DarkBlue	`#00008B`
DarkCyan	`#008B8B`
DarkGoldenRod	`#B8860B`
DarkGray	`#A9A9A9`
DarkGreen	`#006400`
DarkKhaki	`#BDB76B`
DarkMagenta	`#8B008B`
DarkOliveGreen	`#556B2F`
Darkorange	`#FF8C00`
DarkOrchid	`#9932CC`
DarkRed	`#8B0000`
DarkSalmon	`#E9967A`
DarkSeaGreen	`#8FBC8F`
DarkSlateBlue	`#483D8B`
DarkSlateGray	`#2F4F4F`
DarkTurquoise	`#00CED1`
DarkViolet	`#9400D3`
DeepPink	`#FF1493`
DeepSkyBlue	`#00BFFF`
DimGray	`#696969`
DodgerBlue	`#1E90FF`
Feldspar	`#D19275`
FireBrick	`#B22222`
FloralWhite	`#FFFAF0`
ForestGreen	`#228B22`
Fuchsia	`#FF00FF`
Gainsboro	`#DCDCDC`
GhostWhite	`#F8F8FF`
Gold	`#FFD700`
GoldenRod	`#DAA520`
Gray	`#808080`
Green	`#008000`
GreenYellow	`#ADFF2F`
HoneyDew	`#F0FFF0`
HotPink	`#FF69B4`
IndianRed	`#CD5C5C`
Indigo	`#4B0082`
Ivory	`#FFFFF0`
Khaki	`#F0E68C`
Lavender	`#E6E6FA`
LavenderBlush	`#FFF0F5`
LawnGreen	`#7CFC00`
LemonChiffon	`#FFFACD`
LightBlue	`#ADD8E6`
LightCoral	`#F08080`
LightCyan	`#E0FFFF`
LightGoldenRodYellow	`#FAFAD2`
LightGrey	`#D3D3D3`
LightGreen	`#90EE90`
LightPink	`#FFB6C1`
LightSalmon	`#FFA07A`
LightSeaGreen	`#20B2AA`
LightSkyBlue	`#87CEFA`
LightSlateBlue	`#8470FF`
LightSlateGray	`#778899`
LightSteelBlue	`#B0C4DE`
LightYellow	`#FFFFE0`
Lime	`#00FF00`
LimeGreen	`#32CD32`
Linen	`#FAF0E6`
Magenta	`#FF00FF`
Maroon	`#800000`
MediumAquaMarine	`#66CDAA`
MediumBlue	`#0000CD`
MediumOrchid	`#BA55D3`
MediumPurple	`#9370D8`
MediumSeaGreen	`#3CB371`
MediumSlateBlue	`#7B68EE`
MediumSpringGreen	`#00FA9A`
MediumTurquoise	`#48D1CC`
MediumVioletRed	`#C71585`
MidnightBlue	`#191970`
MintCream	`#F5FFFA`
MistyRose	`#FFE4E1`
Moccasin	`#FFE4B5`
NavajoWhite	`#FFDEAD`
Navy	`#000080`
OldLace	`#FDF5E6`
Olive	`#808000`
OliveDrab	`#6B8E23`
Orange	`#FFA500`
OrangeRed	`#FF4500`
Orchid	`#DA70D6`
PaleGoldenRod	`#EEE8AA`
PaleGreen	`#98FB98`
PaleTurquoise	`#AFEEEE`
PaleVioletRed	`#D87093`
PapayaWhip	`#FFEFD5`
PeachPuff	`#FFDAB9`
Peru	`#CD853F`
Pink	`#FFC0CB`
Plum	`#DDA0DD`
PowderBlue	`#B0E0E6`
Purple	`#800080`
Red	`#FF0000`
RosyBrown	`#BC8F8F`
RoyalBlue	`#4169E1`
SaddleBrown	`#8B4513`
Salmon	`#FA8072`
SandyBrown	`#F4A460`
SeaGreen	`#2E8B57`
SeaShell	`#FFF5EE`
Sienna	`#A0522D`
Silver	`#C0C0C0`
SkyBlue	`#87CEEB`
SlateBlue	`#6A5ACD`
SlateGray	`#708090`
Snow	`#FFFAFA`
SpringGreen	`#00FF7F`
SteelBlue	`#4682B4`
Tan	`#D2B48C`
Teal	`#008080`
Thistle	`#D8BFD8`
Tomato	`#FF6347`
Turquoise	`#40E0D0`
Violet	`#EE82EE`
VioletRed	`#D02090`
Wheat	`#F5DEB3`
White	`#FFFFFF`
WhiteSmoke	`#F5F5F5`
Yellow	`#FFFF00`
YellowGreen	`#9ACD32`

Html

Table Examples

Html Table Examples

Tables - Attributes

HTML Tables - Attributes

Tag Attributes

Html <td> Tag Attributes

Tables - Examples for Colspan and Rowspan

html Tables - Examples for Colspan and Rowspan

Name="Keywords" Tag

Name="Description" Tag

Title Tags - document title

Other MetaTags

NAME="COPYRIGHT"

HTTP-EQUIV="CONTENT-TYPE"

HTTP-EQUIV="CONTENT-LANGUAGE"

NAME="AUTHOR"

HTTP-EQUIV="EXPIRES"

HTTP-EQUIV="REFRESH"

Text Formating- For Example-Free Codes

Headings - Header Tags

Heading 2

Heading 3

Heading 4

Heading 6

H2 with a Yellow Color Style

This is what you want centered

Text Style Codes

Text Alignment

Divisions tag ... : Text Justification

The Tag

The Tag : Paragraph

The Tag

Html Makes an unordered list

Html Makes an Ordered List

Description / Definition Lists

Nested Lists / Nest Lists

Image Attribute

Html Image Attribute

Tags Frame Support noframes

<noframes> tags : Frame Support

Frameset Examples

Frameset Example - Application

Linking To Frame

Linking To Frame

Targeting Link

Iframe Attributes Example Linking Iframe

Iframe

Linking Iframe

Marquee Codes Attribute

Marquee Codes / Attribute

Marquue Slide Image

Marquue Slide Image

Marquee to drive dynamic / Marquee Control

Marquee to drive dynamic / Marquee Control

Links Between My Own Pages

Links Between My Own Pages

Links Attribute

The <a> Attribute

Links E-MAIL - using the MAILTO

E-MAIL - using the MAILTO

Internal Links Within a Web Page

Internal Links Within a Web Page

Links Hyperlinks For Downloads

Hyperlinks For Downloads

Default Links; Base

Default Links; Base

Links Creating Hyperlinks Using Images

Creating Hyperlinks Using Images

html Links Image Maps

Image Maps

html Terms

HTML Terms

Privacy Policy

Privacy Policy

What is HTML?

How to Include Images in Web Pages

How to Include Images in Web Pages

Html Links Creating Link to Other Web Site

Creating Link to Other Web Site

Divisions tag
...
: Text Justification

The
Tag

The
Tag : Paragraph

The
Tag