HTML Book
Uploaded by
Mike chitiHTML Book
Uploaded by
Mike chitiHTML Forms
HTML forms are used to pass data to a server.
A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and
more. A form can also contain select lists, text area, field set, legend, and label elements.
The <form> tag is used to create an HTML form:
<form>
.
input elements
.
</form>
HTML Forms - The Input Element
The most important form element is the input element.
The input element is used to select user information.
An input element can vary in many ways, depending on the type attribute. An input element can
be of type text field, checkbox, password, radio button, submit button, and more.
The most used input types are described below.
Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
How the HTML code above looks in a browser:
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of a text field is 20
characters.
Password Field
<input type="password" /> defines a password field:
<form>
Password: <input type="password" name="pwd" />
</form>
How the HTML code above looks in a browser:
Password:
Note: The characters in a password field are masked (shown as asterisks or circles).
Radio Buttons
<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE one of
a limited number of choices:
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
How the HTML code above looks in a browser:
Male
Female
Checkboxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE
options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
How the HTML code above looks in a browser:
I have a bike
I have a car
Submit Button
<input type="submit" /> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the
form's action attribute. The file defined in the action attribute usually does something with the
received input:
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
How the HTML code above looks in a browser:
Submit
Username:
If you type some characters in the text field above, and click the "Submit" button, the browser
will send your input to a page called "html_form_action.asp". The page will show you the
received input.
More Input Examples
Radio buttons
How to create radio buttons.
Checkboxes
How to create checkboxes. A user can select or unselect a checkbox.
Simple drop-down list
How to create a simple drop-down list.
Drop-down list with a pre-selected value
How to create a drop-down list with a pre-selected value.
Textarea
How to create a multi-line text input control. In a text-area the user can write an unlimited
number of characters.
Create a button
How to create a button.
Form Examples
Fieldset around form-data
How to create a border around elements in a form.
<html>
<body>
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30" /><br />
E-mail: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>
</body>
</html>
Form with text fields and a submit button
How to create a form with two text fields and a submit button.
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
First name: <input type="text" name="FirstName" value="Mickey" /><br />
Last name: <input type="text" name="LastName" value="Mouse" /><br />
<input type="submit" value="Submit" />
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"html_form_action.asp".</p>
</body>
</html>
Form with checkboxes
How to create a form with two checkboxes and a submit button.
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
<br /><br />
<input type="submit" value="Submit" />
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"html_form_action.asp".</p>
</body>
</html>
Form with radio buttons
How to create a form with two radio buttons, and a submit button.
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female<br />
<input type="submit" value="Submit" />
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"html_form_action.asp".</p>
</body>
</html>
Send e-mail from a form
How to send e-mail from a form.
<html>
<body>
<h3>Send e-mail to [email protected]:</h3>
<form action="MAILTO:[email protected]" method="post" enctype="text/plain">
Name:<br />
<input type="text" name="name" value="your name" /><br />
E-mail:<br />
<input type="text" name="mail" value="your email" /><br />
Comment:<br />
<input type="text" name="comment" value="your comment" size="50" />
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
HTML <select> Tag
Example
Create a select list with four options:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Try it yourself »
Definition and Usage
The <select> tag is used to create a select list (drop-down list).
The <option> tags inside the select element define the available options in the list.
Browser Support
The <select> tag is supported in all major browsers.
Differences Between HTML and XHTML
NONE
Tips and Notes
Tip: The select element is a form control and can be used in a form to collect user input.
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
disabled disabled Specifies that a drop-down list should be disabled STF
multiple multiple Specifies that multiple options can be selected STF
name name Specifies the name of a drop-down list STF
Specifies the number of visible options in a drop-down
size number STF
list
Standard Attributes
The <select> tag supports the following standard attributes:
Attribute Value Description DTD
class classname Specifies a classname for an element STF
rtl
dir Specifies the text direction for the content in an element STF
ltr
id id Specifies a unique id for an element STF
lang language_code Specifies a language code for the content in an element STF
style style_definition Specifies an inline style for an element STF
tabindex number Specifies the tab order of an element STF
title text Specifies extra information about an element STF
xml:lang language_code Specifies a language code for the content in an element, STF
in XHTML documents
More information about Standard Attributes.
Event Attributes
The <select> tag supports the following event attributes:
Attribute Value Description DTD
onblur script Script to be run when an element loses focus STF
onchange script Script to be run when an element change STF
onclick script Script to be run on a mouse click STF
ondblclick script Script to be run on a mouse double-click STF
onfocus script Script to be run when an element gets focus STF
onmousedown script Script to be run when mouse button is pressed STF
onmousemove script Script to be run when mouse pointer moves STF
Script to be run when mouse pointer moves out of an
onmouseout script STF
element
Script to be run when mouse pointer moves over an
onmouseover script STF
element
onmouseup script Script to be run when mouse button is released STF
onkeydown script Script to be run when a key is pressed STF
onkeypress script Script to be run when a key is pressed and released STF
Onkeyup script Script to be run when a key is released STF
HTML Form Tags
Tag Description
<form> Defines an HTML form for user input
<input /> Defines an input control
<textarea> Defines a multi-line text input control
<label> Defines a label for an input element
<fieldset> Defines a border around elements in a form
<legend> Defines a caption for a fieldset element
<select> Defines a select list (drop-down list)
<optgroup> Defines a group of related options in a select list
<option> Defines an option in a select list
<button> Defines a push button
HTML <option> Tag
Example
A drop-down list with four options:
<select>
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
HTML <textarea> Tag
Example
A simple text area:
<textarea rows="2" cols="20">
At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML,
SQL, ASP, and PHP.
</textarea>
Try it yourself »
Definition and Usage
The <textarea> tag defines a multi-line text input control.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width font
(usually Courier).
The size of a textarea can be specified by the cols and rows attributes, or even better; through
CSS' height and width properties.
Browser Support
The <textarea> tag is supported in all major browsers.
Differences Between HTML and XHTML
NONE
Required Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
cols number Specifies the visible width of a text-area STF
rows number Specifies the visible number of rows in a text-area STF
Optional Attributes
Attribute Value Description DTD
disabled disabled Specifies that a text-area should be disabled STF
name name_of_textarea Specifies the name for a text-area STF
readonly readonly Specifies that a text-area should be read-only STF
Standard Attributes
The <textarea> tag supports the following standard attributes:
Attribute Value Description DTD
accesskey character Specifies a keyboard shortcut to access an element STF
class classname Specifies a classname for an element STF
rtl
dir Specifies the text direction for the content in an element STF
ltr
id id Specifies a unique id for an element STF
lang language_code Specifies a language code for the content in an element STF
style style_definition Specifies an inline style for an element STF
tabindex number Specifies the tab order of an element STF
title text Specifies extra information about an element STF
Specifies a language code for the content in an element,
xml:lang language_code STF
in XHTML documents
More information about Standard Attributes.
Event Attributes
The <textarea> tag supports the following event attributes:
Attribute Value Description DTD
onblur script Script to be run when an element loses focus STF
onchange script Script to be run when an element change STF
onclick script Script to be run on a mouse click STF
ondblclick script Script to be run on a mouse double-click STF
onfocus script Script to be run when an element gets focus STF
onmousedown script Script to be run when mouse button is pressed STF
onmousemove script Script to be run when mouse pointer moves STF
Script to be run when mouse pointer moves out of an
onmouseout script STF
element
Script to be run when mouse pointer moves over an
onmouseover script STF
element
onmouseup script Script to be run when mouse button is released STF
onkeydown script Script to be run when a key is pressed STF
onkeypress script Script to be run when a key is pressed and released STF
onkeyup script Script to be run when a key is released STF
onselect script Script to be run when an element is selected STF
More information about Event Attributes.
Your browser does not support inline frames or is currently configured not to display inline frames.
HTML Frames
« Previous Next Chapter »
HTML <label> Tag
Example
An simple HTML form with two input fields and related labels :
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
Try it yourself »
Definition and Usage
The <label> tag defines a label for an input element.
The label element does not render as anything special for the user. However, it provides a
usability improvement for mouse users, because if the user clicks on the text within the label
element, it toggles the control.
The for attribute of the <label> tag should be equal to the id attribute of the related element to
bind them together.
Browser Support
The <label> tag is supported in all major browsers.
Note: Not supported in Safari 2 or earlier versions.
Differences Between HTML and XHTML
NONE
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
for element_id Specifies which form element a label is bound to STF
Standard Attributes
The <label> tag supports the following standard attributes:
Attribute Value Description DTD
accesskey character Specifies a keyboard shortcut to access an element STF
class classname Specifies a classname for an element STF
rtl
dir Specifies the text direction for the content in an element STF
ltr
id id Specifies a unique id for an element STF
lang language_code Specifies a language code for the content in an element STF
style style_definition Specifies an inline style for an element STF
title text Specifies extra information about an element STF
Specifies a language code for the content in an element,
xml:lang language_code STF
in XHTML documents
More information about Standard Attributes.
Event Attributes
The <label> tag supports the following event attributes:
Attribute Value Description DTD
onblur script Script to be run when an element loses focus STF
onclick script Script to be run on a mouse click STF
ondblclick script Script to be run on a mouse double-click STF
onfocus script Script to be run when an element gets focus STF
onmousedown script Script to be run when mouse button is pressed STF
onmousemove script Script to be run when mouse pointer moves STF
Script to be run when mouse pointer moves out of an
onmouseout script STF
element
Script to be run when mouse pointer moves over an
onmouseover script STF
element
onmouseup script Script to be run when mouse button is released STF
onkeydown script Script to be run when a key is pressed STF
onkeypress script Script to be run when a key is pressed and released STF
onkeyup script Script to be run when a key is released STF
With frames, several Web pages can be displayed in the same browser window.
ATTENTION. Do not expect frames to be supported in future versions of HTML.
HTML <optgroup> Tag
Example
Group together related options with <optgroup> tags:
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Try it yourself »
Definition and Usage
The <optgroup> tag is used to group together related options in a select list.
If you have a long list of options, groups of related options are easier to handle for the user.
Browser Support
The <optgroup> tag is supported in all major browsers.
Differences Between HTML and XHTML
NONE
Required Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
label text Specifies a description for a group of options STF
Optional Attributes
Attribute Value Description DTD
disabled disabled Specifies that an option group should be disabled STF
Standard Attributes
The <optgroup> tag supports the following standard attributes:
Attribute Value Description DTD
class classname Specifies a classname for an element STF
rtl
dir Specifies the text direction for the content in an element STF
ltr
id id Specifies a unique id for an element STF
lang language_code Specifies a language code for the content in an element STF
style style_definition Specifies an inline style for an element STF
title text Specifies extra information about an element STF
Specifies a language code for the content in an element,
xml:lang language_code STF
in XHTML documents
More information about Standard Attributes.
Event Attributes
The <optgroup> tag supports the following event attributes:
Attribute Value Description DTD
onclick script Script to be run on a mouse click STF
ondblclick script Script to be run on a mouse double-click STF
onmousedown script Script to be run when mouse button is pressed STF
onmousemove script Script to be run when mouse pointer moves STF
Script to be run when mouse pointer moves out of an
onmouseout script STF
element
Script to be run when mouse pointer moves over an
onmouseover script STF
element
onmouseup script Script to be run when mouse button is released STF
onkeydown script Script to be run when a key is pressed STF
onkeypress script Script to be run when a key is pressed and released STF
onkeyup script Script to be run when a key is released STF
Try-It-Yourself Examples
Vertical frameset
How to make a vertical frameset with three different documents.
Horizontal frameset
How to make a horizontal frameset with three different documents.
(You can find more examples at the bottom of this page)
HTML Frames
With frames, you can display more than one HTML document in the same browser window.
Each HTML document is called a frame, and each frame is independent of the others.
The disadvantages of using frames are:
Frames are not expected to be supported in future versions of HTML
Frames are difficult to use. (Printing the entire page is difficult).
The web developer must keep track of more HTML documents
The HTML frameset Element
The frameset element holds one or more frame elements. Each frame element can hold a separate
document.
The frameset element states HOW MANY columns or rows there will be in the frameset, and
HOW MUCH percentage/pixels of space will occupy each of them.
The HTML frame Element
The <frame> tag defines one particular window (frame) within a frameset.
In the example below we have a frameset with two columns.
The first column is set to 25% of the width of the browser window. The second column is set to
75% of the width of the browser window. The document "frame_a.htm" is put into the first
column, and the document "frame_b.htm" is put into the second column:
<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>
Note: The frameset column size can also be set in pixels (cols="200,500"), and one of the
columns can be set to use the remaining space, with an asterisk (cols="25%,*").
Basic Notes - Useful Tips
Tip: If a frame has visible borders, the user can resize it by dragging the border. To prevent a
user from doing this, you can add noresize="noresize" to the <frame> tag.
Note: Add the <noframes> tag for browsers that do not support frames.
Important: You cannot use the <body></body> tags together with the <frameset></frameset>
tags! However, if you add a <noframes> tag containing some text for browsers that do not
support frames, you will have to enclose the text in <body></body> tags! See how it is done in
the first example below.
More Examples
How to use the <noframes> tag
How to use the <noframes> tag (for browsers that do not support frames).
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
2.example
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
</frameset>
</html>
Nested framesets
How to create a frameset with three documents, and how to mix them in rows and columns.
<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm" />
<frameset cols="25%,75%">
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</frameset>
</html>
Frameset with noresize="noresize"
How to use the noresize attribute. Move the mouse over the borders between the frames and
notice that you cannot move the borders.
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm" />
<frame noresize="noresize" src="frame_b.htm" />
</frameset>
</html>
Navigation frame
How to make a navigation frame. The navigation frame contains a list of links with the second
frame as the target. The file called "tryhtml_contents.htm" contains three links. The source code
of the links:
<a href ="frame_a.htm" target ="showframe">Frame a</a><br>
<a href ="frame_b.htm" target ="showframe">Frame b</a><br>
<a href ="frame_c.htm" target ="showframe">Frame c</a>
The second frame will show the linked document.
<html>
<frameset cols="120,*">
<frame src="tryhtml_contents.htm" />
<frame src="frame_a.htm" name="showframe" />
</frameset>
</html>
Jump to a specified section within a frame
Two frames. One of the frames has a source to a specified section in a file. The specified section
is made with <a name="C10"> in the "link.htm" file.
<html>
<frameset cols="20%,80%">
<frame src="frame_a.htm" />
<frame src="link.htm#C10" />
</frameset>
</html>
Jump to a specified section with frame navigation
Two frames. The navigation frame (content.htm) to the left contains a list of links with the
second frame (link.htm) as a target. The second frame shows the linked document. One of the
links in the navigation frame is linked to a specified section in the target file. The HTML code in
the file "content.htm" looks like this: <a href ="link.htm" target ="showframe">Link without
Anchor</a><br><a href ="link.htm#C10" target ="showframe">Link with Anchor</a>.
<html>
<frameset cols="180,*">
<frame src="content.htm" />
<frame src="link.htm" name="showframe" />
</frameset>
</html>
HTML Frame Tags
Tag Description
<frameset> Defines a set of frames
<frame /> Defines a sub window (a frame)
<noframes> Defines a noframe section for browsers that do not handle frames
HTML Iframes
« Previous Next Chapter »
An iframe is used to display a web page within a web page.
Syntax for adding an iframe:
<iframe src="URL"></iframe>
The URL points to the location of the separate page.
Iframe - Set Height and Width
The height and width attributes are used to specify the height and width of the iframe.
The attribute values are specified in pixels by default, but they can also be in percent (like
"80%").
Example
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
Try it yourself »
Iframe - Remove the Border
The frameborder attribute specifies whether or not to display a border around the iframe.
Set the attribute value to "0" to remove the border:
Example
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
Try it yourself »
Use iframe as a Target for a Link
An iframe can be used as the target frame for a link.
The target attribute of a link must refer to the name attribute of the iframe:
Example
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
Try it yourself »
HTML iframe Tag
Tag Description
<iframe> Defines an inline sub window (frame)
HTML Colors
« Previous Next Chapter »
Colors are displayed combining RED, GREEN, and BLUE light.
Color Values
HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red,
Green, and Blue color values (RGB).
The lowest value that can be given to one of the light sources is 0 (in HEX: 00). The highest
value is 255 (in HEX: FF).
HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign.
Color Values
Color Color HEX Color RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
Try it yourself »
16 Million Different Colors
The combination of Red, Green, and Blue values from 0 to 255, gives more than 16 million
different colors (256 x 256 x 256).
If you look at the color table below, you will see the result of varying the red light from 0 to 255,
while keeping the green and blue light at zero.
To see the full list of color mixes when RED varies from 0 to 255, click on one of the HEX or
RGB values below.
Red Light Color HEX Color RGB
#000000 rgb(0,0,0)
#080000 rgb(8,0,0)
#100000 rgb(16,0,0)
#180000 rgb(24,0,0)
#200000 rgb(32,0,0)
#280000 rgb(40,0,0)
#300000 rgb(48,0,0)
#380000 rgb(56,0,0)
#400000 rgb(64,0,0)
#480000 rgb(72,0,0)
#500000 rgb(80,0,0)
#580000 rgb(88,0,0)
#600000 rgb(96,0,0)
#680000 rgb(104,0,0)
#700000 rgb(112,0,0)
#780000 rgb(120,0,0)
#800000 rgb(128,0,0)
#880000 rgb(136,0,0)
#900000 rgb(144,0,0)
#980000 rgb(152,0,0)
#A00000 rgb(160,0,0)
#A80000 rgb(168,0,0)
#B00000 rgb(176,0,0)
#B80000 rgb(184,0,0)
#C00000 rgb(192,0,0)
#C80000 rgb(200,0,0)
#D00000 rgb(208,0,0)
#D80000 rgb(216,0,0)
#E00000 rgb(224,0,0)
#E80000 rgb(232,0,0)
#F00000 rgb(240,0,0)
#F80000 rgb(248,0,0)
#FF0000 rgb(255,0,0)
Shades of Gray
Gray colors are created by using an equal amount of power to all of the light sources.
To make it easier for you to select the correct shade, we have created a table of gray shades for
you:
Gray Shades Color HEX Color RGB
#000000 rgb(0,0,0)
#080808 rgb(8,8,8)
#101010 rgb(16,16,16)
#181818 rgb(24,24,24)
#202020 rgb(32,32,32)
#282828 rgb(40,40,40)
#303030 rgb(48,48,48)
#383838 rgb(56,56,56)
#404040 rgb(64,64,64)
#484848 rgb(72,72,72)
#505050 rgb(80,80,80)
#585858 rgb(88,88,88)
#606060 rgb(96,96,96)
#686868 rgb(104,104,104)
#707070 rgb(112,112,112)
#787878 rgb(120,120,120)
#808080 rgb(128,128,128)
#888888 rgb(136,136,136)
#909090 rgb(144,144,144)
#989898 rgb(152,152,152)
#A0A0A0 rgb(160,160,160)
#A8A8A8 rgb(168,168,168)
#B0B0B0 rgb(176,176,176)
#B8B8B8 rgb(184,184,184)
#C0C0C0 rgb(192,192,192)
#C8C8C8 rgb(200,200,200)
#D0D0D0 rgb(208,208,208)
#D8D8D8 rgb(216,216,216)
#E0E0E0 rgb(224,224,224)
#E8E8E8 rgb(232,232,232)
#F0F0F0 rgb(240,240,240)
#F8F8F8 rgb(248,248,248)
#FFFFFF rgb(255,255,255)
Web Safe Colors?
Some years ago, when computers supported max 256 different colors, a list of 216 "Web Safe
Colors" was suggested as a Web standard, reserving 40 fixed system colors.
The 216 cross-browser color palette was created to ensure that all computers would display the
colors correctly when running a 256 color palette.
This is not important today, since most computers can display millions of different colors.
Anyway, here is the list:
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
HTML Color Values
« Previous Next Chapter »
Sorted by Hex Value
Same list sorted by color name
Color Name HEX Color Shades Mix
Black #000000 Shades Mix
Navy #000080 Shades Mix
DarkBlue #00008B Shades Mix
MediumBlue #0000CD Shades Mix
Blue #0000FF Shades Mix
DarkGreen #006400 Shades Mix
Green #008000 Shades Mix
Teal #008080 Shades Mix
DarkCyan #008B8B Shades Mix
DeepSkyBlue #00BFFF Shades Mix
DarkTurquoise #00CED1 Shades Mix
MediumSpringGreen #00FA9A Shades Mix
Lime #00FF00 Shades Mix
SpringGreen #00FF7F Shades Mix
Aqua #00FFFF Shades Mix
Cyan #00FFFF Shades Mix
MidnightBlue #191970 Shades Mix
DodgerBlue #1E90FF Shades Mix
LightSeaGreen #20B2AA Shades Mix
ForestGreen #228B22 Shades Mix
SeaGreen #2E8B57 Shades Mix
DarkSlateGray #2F4F4F Shades Mix
DarkSlateGrey #2F4F4F Shades Mix
LimeGreen #32CD32 Shades Mix
MediumSeaGreen #3CB371 Shades Mix
Turquoise #40E0D0 Shades Mix
RoyalBlue #4169E1 Shades Mix
SteelBlue #4682B4 Shades Mix
DarkSlateBlue #483D8B Shades Mix
MediumTurquoise #48D1CC Shades Mix
Indigo #4B0082 Shades Mix
DarkOliveGreen #556B2F Shades Mix
CadetBlue #5F9EA0 Shades Mix
CornflowerBlue #6495ED Shades Mix
MediumAquaMarine #66CDAA Shades Mix
DimGray #696969 Shades Mix
DimGrey #696969 Shades Mix
SlateBlue #6A5ACD Shades Mix
OliveDrab #6B8E23 Shades Mix
SlateGray #708090 Shades Mix
SlateGrey #708090 Shades Mix
LightSlateGray #778899 Shades Mix
LightSlateGrey #778899 Shades Mix
MediumSlateBlue #7B68EE Shades Mix
LawnGreen #7CFC00 Shades Mix
Chartreuse #7FFF00 Shades Mix
Aquamarine #7FFFD4 Shades Mix
Maroon #800000 Shades Mix
Purple #800080 Shades Mix
Olive #808000 Shades Mix
Gray #808080 Shades Mix
Grey #808080 Shades Mix
SkyBlue #87CEEB Shades Mix
LightSkyBlue #87CEFA Shades Mix
BlueViolet #8A2BE2 Shades Mix
DarkRed #8B0000 Shades Mix
DarkMagenta #8B008B Shades Mix
SaddleBrown #8B4513 Shades Mix
DarkSeaGreen #8FBC8F Shades Mix
LightGreen #90EE90 Shades Mix
MediumPurple #9370D8 Shades Mix
DarkViolet #9400D3 Shades Mix
PaleGreen #98FB98 Shades Mix
DarkOrchid #9932CC Shades Mix
YellowGreen #9ACD32 Shades Mix
Sienna #A0522D Shades Mix
Brown #A52A2A Shades Mix
DarkGray #A9A9A9 Shades Mix
DarkGrey #A9A9A9 Shades Mix
LightBlue #ADD8E6 Shades Mix
GreenYellow #ADFF2F Shades Mix
PaleTurquoise #AFEEEE Shades Mix
LightSteelBlue #B0C4DE Shades Mix
PowderBlue #B0E0E6 Shades Mix
FireBrick #B22222 Shades Mix
DarkGoldenRod #B8860B Shades Mix
MediumOrchid #BA55D3 Shades Mix
RosyBrown #BC8F8F Shades Mix
DarkKhaki #BDB76B Shades Mix
Silver #C0C0C0 Shades Mix
MediumVioletRed #C71585 Shades Mix
IndianRed #CD5C5C Shades Mix
Peru #CD853F Shades Mix
Chocolate #D2691E Shades Mix
Tan #D2B48C Shades Mix
LightGray #D3D3D3 Shades Mix
LightGrey #D3D3D3 Shades Mix
PaleVioletRed #D87093 Shades Mix
Thistle #D8BFD8 Shades Mix
Orchid #DA70D6 Shades Mix
GoldenRod #DAA520 Shades Mix
Crimson #DC143C Shades Mix
Gainsboro #DCDCDC Shades Mix
Plum #DDA0DD Shades Mix
BurlyWood #DEB887 Shades Mix
LightCyan #E0FFFF Shades Mix
Lavender #E6E6FA Shades Mix
DarkSalmon #E9967A Shades Mix
Violet #EE82EE Shades Mix
PaleGoldenRod #EEE8AA Shades Mix
LightCoral #F08080 Shades Mix
Khaki #F0E68C Shades Mix
AliceBlue #F0F8FF Shades Mix
HoneyDew #F0FFF0 Shades Mix
Azure #F0FFFF Shades Mix
SandyBrown #F4A460 Shades Mix
Wheat #F5DEB3 Shades Mix
Beige #F5F5DC Shades Mix
WhiteSmoke #F5F5F5 Shades Mix
MintCream #F5FFFA Shades Mix
GhostWhite #F8F8FF Shades Mix
Salmon #FA8072 Shades Mix
AntiqueWhite #FAEBD7 Shades Mix
Linen #FAF0E6 Shades Mix
LightGoldenRodYellow #FAFAD2 Shades Mix
OldLace #FDF5E6 Shades Mix
Red #FF0000 Shades Mix
Fuchsia #FF00FF Shades Mix
Magenta #FF00FF Shades Mix
DeepPink #FF1493 Shades Mix
OrangeRed #FF4500 Shades Mix
Tomato #FF6347 Shades Mix
HotPink #FF69B4 Shades Mix
Coral #FF7F50 Shades Mix
Darkorange #FF8C00 Shades Mix
LightSalmon #FFA07A Shades Mix
Orange #FFA500 Shades Mix
LightPink #FFB6C1 Shades Mix
Pink #FFC0CB Shades Mix
Gold #FFD700 Shades Mix
PeachPuff #FFDAB9 Shades Mix
NavajoWhite #FFDEAD Shades Mix
Moccasin #FFE4B5 Shades Mix
Bisque #FFE4C4 Shades Mix
MistyRose #FFE4E1 Shades Mix
BlanchedAlmond #FFEBCD Shades Mix
PapayaWhip #FFEFD5 Shades Mix
LavenderBlush #FFF0F5 Shades Mix
SeaShell #FFF5EE Shades Mix
Cornsilk #FFF8DC Shades Mix
LemonChiffon #FFFACD Shades Mix
FloralWhite #FFFAF0 Shades Mix
Snow #FFFAFA Shades Mix
Yellow #FFFF00 Shades Mix
LightYellow #FFFFE0 Shades Mix
Ivory #FFFFF0 Shades Mix
White #FFFFFF Shades Mix
HTML 4.01 Quick List
« Previous Next Chapter »
HTML Quick List from W3Schools. Print it, fold it, and put it in your pocket.
HTML Basic Document
<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body>
</html>
Heading Elements
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>
Text Elements
<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>
Logical Styles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
Physical Styles
<b>This text is bold</b>
<i>This text is italic</i>
Links
Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text" /></a>
Mailto link: <a href="mailto:[email protected]">Send e-mail</a>
A named anchor:
<a name="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>
Unordered list
<ul>
<li>Item</li>
<li>Item</li>
</ul>
Ordered list
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
Tables
<table border="1">
<tr>
<th>Tableheader</th>
<th>Tableheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
Frames
<frameset cols="25%,75%">
<frame src="page1.htm" />
<frame src="page2.htm" />
</frameset>
Forms
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="email" size="40" maxlength="50" />
<input type="password" />
<input type="checkbox" checked="checked" />
<input type="radio" checked="checked" />
<input type="submit" value="Send" />
<input type="reset" />
<input type="hidden" />
<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
Entities
< is the same as <
> is the same as >
© is the same as ©
Other Elements
<!-- This is a comment -->
<blockquote>
Text quoted from a source.
</blockquote>
<address>
Written by W3Schools.com<br />
<a href="mailto:[email protected]">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>
HTML Meta
« Previous Next Chapter »
Try-It-Yourself Examples
Document description
Use the meta element to describe the document.
Document keywords
Use the meta element to define the keywords of a document.
Redirect a user
How to redirect a user to a new web address.
The HTML meta Element
Metadata is information about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed
on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document,
last modified, and other metadata.
The <meta> tag always goes inside the head element.
The metadata can be used by browsers (how to display content or reload page), search engines
(keywords), or other web services.
Keywords for Search Engines
Some search engines will use the name and content attributes of the meta element to index your
pages.
The following meta element defines a description of a page:
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
The following meta element defines keywords for a page:
<meta name="keywords" content="HTML, CSS, XML" />
The intention of the name and content attributes is to describe the content of a page.
Note: A lot of webmasters have used <meta> tags for spamming, like repeating keywords (or
using wrong keywords) for higher ranking. Therefore, most search engines have stopped using
<meta> tags to index/rank pages.
HTML Scripts
« Previous Next Chapter »
JavaScripts make HTML pages more dynamic and interactive.
Try-It-Yourself Examples
Insert a script
How to insert a script into an HTML document.
Use of the <noscript> tag
How to handle browsers that do not support scripting, or have scripting disabled.
The HTML script Element
The <script> tag is used to define a client-side script, such as a JavaScript.
The script element either contains scripting statements or it points to an external script file
through the src attribute.
The required type attribute specifies the MIME type of the script.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of
content.
The script below writes Hello World! to the HTML output:
Example
<script type="text/javascript">
document.write("Hello World!")
</script>
Try it yourself »
Tip: To learn more about JavaScript, visit our JavaScript tutorial!
The HTML noscript Element
The <noscript> tag is used to provide an alternate content for users that have disabled scripts in
their browser or have a browser that doesn’t support client-side scripting.
The noscript element can contain all the elements that you can find inside the body element of a
normal HTML page.
The content inside the noscript element will only be displayed if scripts are not supported, or are
disabled in the user’s browser:
Example
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
Try it yourself »
HTML Script Tags
Tag Description
<script> Defines a client-side script
<noscript> Defines an alternate content for users that do not support client-side scripts
HTML Entities
« Previous Next Chapter »
Reserved characters in HTML must be replaced with character entities.
HTML Entities
Some characters are reserved in HTML.
It is not possible to use the less than (<) or greater than (>) signs in your text, because the
browser will mix them with tags.
To actually display reserved characters, we must use character entities in the HTML source code.
A character entity looks like this:
&entity_name;
OR
&#entity_number;
To display a less than sign we must write: < or <
Tip: The advantage of using an entity name, instead of a number, is that the name is easier to
remember. However, the disadvantage is that browsers may not support all entity names (the
support for entity numbers is very good).
Non-breaking Space
A common character entity used in HTML is the non-breaking space ( ).
Browsers will always truncate spaces in HTML pages. If you write 10 spaces in your text, the
browser will remove 9 of them, before displaying the page. To add spaces to your text, you can
use the character entity.
HTML Entities Example
Experiment with HTML character entities: Try it yourself
HTML Useful Character Entities
Note: Entity names are case sensitive!
Result Description Entity Name Entity Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
§ section § §
© copyright © ©
® registered trademark ® ®
™ trademark ™ ™
For a complete reference of all character entities, visit our HTML Entities Reference.
HTML Uniform Resource Locators
« Previous Next Chapter »
A URL is another word for a web address.
A URL can be composed of words, such as "w3schools.com", or an Internet Protocol (IP)
address: 192.68.20.50. Most people enter the name of the website when surfing, because names
are easier to remember than numbers.
URL - Uniform Resource Locator
When you click on a link in an HTML page, an underlying <a> tag points to an address on the
world wide web.
A Uniform Resource Locator (URL) is used to address a document (or other data) on the world
wide web.
A web address, like this: http://www.w3schools.com/html/default.asp follows these syntax rules:
scheme://host.domain:port/path/filename
Explanation:
scheme - defines the type of Internet service. The most common type is http
host - defines the domain host (the default host for http is www)
domain - defines the Internet domain name, like w3schools.com
:port - defines the port number at the host (the default port number for http is 80)
path - defines a path at the server (If omitted, the document must be stored at the root
directory of the web site)
filename - defines the name of a document/resource
Common URL Schemes
The table below lists some common schemes:
Scheme Short for.... Which pages will the scheme be used for...
http HyperText Transfer Protocol Common web pages starts with http://. Not encrypted
Secure web pages. All information exchanged are
https Secure HyperText Transfer Protocol
encrypted
For downloading or uploading files to a website.
ftp File Transfer Protocol
Useful for domain maintenance
file A file on your computer
HTML URL Encoding
« Previous Next Chapter »
URL encoding converts characters into a format that can be transmitted over the Internet.
URL - Uniform Resource Locator
Web browsers request pages from web servers by using a URL.
The URL is the address of a web page, like: http://www.w3schools.com.
URL Encoding
URLs can only be sent over the Internet using the ASCII character-set.
Since URLs often contain characters outside the ASCII set, the URL has to be converted into a
valid ASCII format.
URL encoding replaces non ASCII characters with a "%" followed by two hexadecimal digits.
URLs cannot contain spaces. URL encoding normally replaces a space with a + sign.
Try It Yourself
If you click the "Submit" button below, the browser will URL encode the input before it is sent
to the server. A page at the server will display the received input.
Hello Günter Submit
Try some other input and click Submit again.
URL Encoding Examples
Character URL-encoding
€ %80
£ %A3
© %A9
® %AE
À %C0
Á %C1
 %C2
à %C3
Ä %C4
Å %C5
HTML Web Server
« Previous Next Chapter »
To make your web site visible to the world, you'll have to store it on a web server.
Hosting your own Web site
Hosting your web site on your own server is always an option. Here are some points to consider:
Hardware Expenses
To run a "real" web site, you will have to buy some powerful server hardware. Don't expect that
a low cost PC will do the job. You will also need a permanent (24 hours a day ) high-speed
connection.
Software Expenses
Remember that server-licenses often are higher than client-licenses. Also note that server-
licenses might have limits on number of users.
Labor Expenses
Don't expect low labor expenses. You have to install your own hardware and software. You also
have to deal with bugs and viruses, and keep your server constantly running in an environment
where "everything could happen".
Using an Internet Service Provider
Renting a server from an Internet Service Provider (ISP) is a common option.
Most small companies store their web site on a server provided by an ISP. Here are some
advantages:
Connection Speed
Most ISPs have very fast connections to the Internet.
Powerful Hardware
ISPs often have powerful web servers that can be shared by several companies. You can also
expect them to have an effective load balancing, and necessary backup servers.
Security and Stability
ISPs are specialists on web hosting. Expect their servers to have more than 99% up time, the
latest software patches, and the best virus protection.
Things to Consider with an ISP
24-hour support
Make sure your ISP offers 24-hours support. Don't put yourself in a situation where you cannot
fix critical problems without having to wait until the next working day. Toll-free phone could be
vital if you don't want to pay for long distance calls.
Daily Backup
Make sure your ISP runs a daily backup routine, otherwise you may lose some valuable data.
Traffic Volume
Study the ISP's traffic volume restrictions. Make sure that you don't have to pay a fortune for
unexpected high traffic if your web site becomes popular.
Bandwidth or Content Restrictions
Study the ISP's bandwidth and content restrictions. If you plan to publish pictures or broadcast
video or sound, make sure that you can.
E-mail Capabilities
Make sure your ISP supports the e-mail capabilities you need.
Database Access
If you plan to use data from databases on your web site, make sure your ISP supports the
database access you need.
HTML / XHTML Standard Event Attributes
« Previous Next Reference »
Standard Event Attributes
HTML 4 added the ability to let events trigger actions in a browser, like starting a JavaScript
when a user clicks on an element.
To learn more about programming events, please visit our JavaScript tutorial and our DHTML
tutorial.
Below is the standard event attributes that can be inserted into HTML / XHTML elements to
define event actions.
<body> and <frameset> Events
The two attributes below can only be used in <body> or <frameset>:
Attribute Value Description
onload script Script to be run when a document load
onunload script Script to be run when a document unload
Form Events
The attributes below can be used in form elements:
Attribute Value Description
onblur script Script to be run when an element loses focus
onchange script Script to be run when an element change
onfocus script Script to be run when an element gets focus
onreset script Script to be run when a form is reset
onselect script Script to be run when an element is selected
onsubmit script Script to be run when a form is submitted
Image Events
The attribute below can be used with the img element:
Attribute Value Description
onabort script Script to be run when loading of an image is interrupted
Keyboard Events
Valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param,
script, style, and title.
Attribute Value Description
onkeydown script Script to be run when a key is pressed
onkeypress script Script to be run when a key is pressed and released
onkeyup script Script to be run when a key is released
Mouse Events
Valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param,
script, style, and title.
Attribute Value Description
onclick script Script to be run on a mouse click
ondblclick script Script to be run on a mouse double-click
onmousedown script Script to be run when mouse button is pressed
onmousemove script Script to be run when mouse pointer moves
Script to be run when mouse pointer moves out of an
onmouseout script
element
onmouseover script Script to be run when mouse pointer moves over an element
onmouseup script Script to be run when mouse button is released
HTML ASCII Reference
« Previous Next Reference »
The ASCII character-set is used to send information between computers on the Internet.
The ASCII Character Set
ASCII stands for the "American Standard Code for Information Interchange". It was designed in
the early 60's, as a standard character-set for computers and hardware devices like teleprinters
and tapedrives.
ASCII is a 7-bit character set containing 128 characters.
It contains the numbers from 0-9, the uppercase and lowercase English letters from A to Z, and
some special characters.
The character-sets used in modern computers, HTML, and Internet are all based on ASCII.
The following table lists the 128 ASCII characters and their equivalent HTML entity codes.
ASCII Printable Characters
ASCII Character HTML Entity Code Description
  space
! ! exclamation mark
" " quotation mark
# # number sign
$ $ dollar sign
% % percent sign
& & ampersand
' ' apostrophe
( ( left parenthesis
) ) right parenthesis
* * asterisk
+ + plus sign
, , comma
- - hyphen
. . period
/ / slash
0 0 digit 0
1 1 digit 1
2 2 digit 2
3 3 digit 3
4 4 digit 4
5 5 digit 5
6 6 digit 6
7 7 digit 7
8 8 digit 8
9 9 digit 9
: : colon
; ; semicolon
< < less-than
= = equals-to
> > greater-than
? ? question mark
@ @ at sign
A A uppercase A
B B uppercase B
C C uppercase C
D D uppercase D
E E uppercase E
F F uppercase F
G G uppercase G
H H uppercase H
I I uppercase I
J J uppercase J
K K uppercase K
L L uppercase L
M M uppercase M
N N uppercase N
O O uppercase O
P P uppercase P
Q Q uppercase Q
R R uppercase R
S S uppercase S
T T uppercase T
U U uppercase U
V V uppercase V
W W uppercase W
X X uppercase X
Y Y uppercase Y
Z Z uppercase Z
[ [ left square bracket
\ \ backslash
] ] right square bracket
^ ^ caret
_ _ underscore
` ` grave accent
a a lowercase a
b b lowercase b
c c lowercase c
d d lowercase d
e e lowercase e
f f lowercase f
g g lowercase g
h h lowercase h
i i lowercase i
j j lowercase j
k k lowercase k
l l lowercase l
m m lowercase m
n n lowercase n
o o lowercase o
p p lowercase p
q q lowercase q
r r lowercase r
s s lowercase s
t t lowercase t
u u lowercase u
v v lowercase v
w w lowercase w
x x lowercase x
y y lowercase y
z z lowercase z
{ { left curly brace
| | vertical bar
} } right curly brace
~ ~ tilde
ASCII Device Control Characters
The ASCII device control characters were originally designed to control hardware devices.
Control characters have nothing to do inside an HTML document.
ASCII Character HTML Entity Code Description
NUL � null character
SOH  start of header
STX  start of text
ETX  end of text
EOT  end of transmission
ENQ  enquiry
ACK  acknowledge
BEL  bell (ring)
BS  backspace
HT 	 horizontal tab
LF line feed
VT  vertical tab
FF  form feed
CR carriage return
SO  shift out
SI  shift in
DLE  data link escape
DC1  device control 1
DC2  device control 2
DC3  device control 3
DC4  device control 4
NAK  negative acknowledge
SYN  synchronize
ETB  end transmission block
CAN  cancel
EM  end of medium
SUB  substitute
ESC  escape
FS  file separator
GS  group separator
RS  record separator
US  unit separator
DEL  delete (rubout)
HTML Character Sets
« Previous Next Reference »
HTML Character Sets
To display an HTML page correctly, the browser must know what character-set to use.
The character-set for the early world wide web was ASCII. ASCII supports the numbers from 0-
9, the uppercase and lowercase English alphabet, and some special characters.
Complete ASCII reference.
Since many countries use characters which are not a part of ASCII, the default character-set for
modern browsers is ISO-8859-1.
Complete ISO-8859-1 reference.
If a web page uses a different character-set than ISO-8859-1, it should be specified in the <meta>
tag.
Try it yourself
ISO Character Sets
It is the International Standards Organization (ISO) that defines the standard character-sets for
different alphabets/languages.
The different character-sets being used around the world are listed below:
Character set Description Covers
North America, Western Europe, Latin America, the
ISO-8859-1 Latin alphabet part 1
Caribbean, Canada, Africa
ISO-8859-2 Latin alphabet part 2 Eastern Europe
ISO-8859-3 Latin alphabet part 3 SE Europe, Esperanto, miscellaneous others
ISO-8859-4 Latin alphabet part 4 Scandinavia/Baltics (and others not in ISO-8859-1)
The languages that are using a Cyrillic alphabet
ISO-8859-5 Latin/Cyrillic part 5 such as Bulgarian, Belarusian, Russian and
Macedonian
ISO-8859-6 Latin/Arabic part 6 The languages that are using the Arabic alphabet
The modern Greek language as well as
ISO-8859-7 Latin/Greek part 7
mathematical symbols derived from the Greek
ISO-8859-8 Latin/Hebrew part 8 The languages that are using the Hebrew alphabet
The Turkish language. Same as ISO-8859-1 except
ISO-8859-9 Latin 5 part 9
Turkish characters replace Icelandic ones
Latin 6 Lappish, Nordic,
ISO-8859-10 The Nordic languages
Eskimo
Similar to ISO 8859-1 but replaces some less
ISO-8859-15 Latin 9 (aka Latin 0) common symbols with the euro sign and some
other missing characters
ISO-2022-JP Latin/Japanese part 1 The Japanese language
ISO-2022-JP-2 Latin/Japanese part 2 The Japanese language
ISO-2022-KR Latin/Korean part 1 The Korean language
The Unicode Standard
Because the character-sets listed above are limited in size, and are not compatible in multilingual
environments, the Unicode Consortium developed the Unicode Standard.
The Unicode Standard covers all the characters, punctuations, and symbols in the world.
Unicode enables processing, storage and interchange of text data no matter what the platform, no
matter what the program, no matter what the language.
The Unicode Consortium
The Unicode Consortium develops the Unicode Standard. Their goal is to replace the existing
character-sets with its standard Unicode Transformation Format (UTF).
The Unicode Standard has become a success and is implemented in XML, Java, ECMAScript
(JavaScript), LDAP, CORBA 3.0, WML, etc. The Unicode standard is also supported in many
operating systems and all modern browsers.
The Unicode Consortium cooperates with the leading standards development organizations, like
ISO, W3C, and ECMA.
Unicode can be implemented by different character-sets. The most commonly used encodings
are UTF-8 and UTF-16:
Character-set Description
A character in UTF8 can be from 1 to 4 bytes long. UTF-8 can represent any
UTF-8 character in the Unicode standard. UTF-8 is backwards compatible with ASCII. UTF-
8 is the preferred encoding for e-mail and web pages
16-bit Unicode Transformation Format is a variable-length character encoding for
Unicode, capable of encoding the entire Unicode repertoire. UTF-16 is used in
UTF-16
major operating systems and environments, like Microsoft Windows
2000/XP/2003/Vista/CE and the Java and .NET byte code environments
Tip: The first 256 characters of Unicode character-sets correspond to the 256 characters of ISO-
8859-1.
Tip: All HTML 4 processors already support UTF-8, and all XHTML and XML processors
support UTF-8 and UTF-16!
HTML Language Code Reference
« Previous Next Reference »
ISO Language Codes
The HTML lang attribute can be used to declare the language of a Web page or a portion of a
Web page. This is meant to assist search engines and browsers.
According to the W3C recommendation you should declare the primary language for each Web
page with the lang attribute inside the <html> tag, like this:
<html lang="en">
...
</html>
In XHTML, the language is declared inside the <html> tag as follows:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
...
</html>
ISO 639-1 Language Codes
ISO 639-1 defines abbreviations for languages. In HTML and XHTML they can be used in the
lang and xml:lang attributes.
Language ISO Code
Abkhazian ab
Afar aa
Afrikaans af
Albanian sq
Amharic am
Arabic ar
Armenian hy
Assamese as
Aymara ay
Azerbaijani az
Bashkir ba
Basque eu
Bengali (Bangla) bn
Bhutani dz
Bihari bh
Bislama bi
Breton br
Bulgarian bg
Burmese my
Byelorussian (Belarusian) be
Cambodian km
Catalan ca
Cherokee
Chewa
Chinese (Simplified) zh
Chinese (Traditional) zh
Corsican co
Croatian hr
Czech cs
Danish da
Divehi
Dutch nl
Edo
English en
Esperanto eo
Estonian et
Faeroese fo
Farsi fa
Fiji fj
Finnish fi
Flemish
French fr
Frisian fy
Fulfulde
Galician gl
Gaelic (Scottish) gd
Gaelic (Manx) gv
Georgian ka
German de
Greek el
Greenlandic kl
Guarani gn
Gujarati gu
Hausa ha
Hawaiian
Hebrew he, iw
Hindi hi
Hungarian hu
Ibibio
Icelandic is
Igbo
Indonesian id, in
Interlingua ia
Interlingue ie
Inuktitut iu
Inupiak ik
Irish ga
Italian it
Japanese ja
Javanese jv
Kannada kn
Kanuri
Kashmiri ks
Kazakh kk
Kinyarwanda (Ruanda) rw
Kirghiz ky
Kirundi (Rundi) rn
Konkani
Korean ko
Kurdish ku
Laothian lo
Latin la
Latvian (Lettish) lv
Limburgish ( Limburger) li
Lingala ln
Lithuanian lt
Macedonian mk
Malagasy mg
Malay ms
Malayalam ml
Maltese mt
Maori mi
Marathi mr
Moldavian mo
Mongolian mn
Nauru na
Nepali ne
Norwegian no
Occitan oc
Oriya or
Oromo (Afan, Galla) om
Papiamentu
Pashto (Pushto) ps
Polish pl
Portuguese pt
Punjabi pa
Quechua qu
Rhaeto-Romance rm
Romanian ro
Russian ru
Sami (Lappish)
Samoan sm
Sangro sg
Sanskrit sa
Serbian sr
Serbo-Croatian sh
Sesotho st
Setswana tn
Shona sn
Sindhi sd
Sinhalese si
Siswati ss
Slovak sk
Slovenian sl
Somali so
Spanish es
Sundanese su
Swahili (Kiswahili) sw
Swedish sv
Syriac
Tagalog tl
Tajik tg
Tamazight
Tamil ta
Tatar tt
Telugu te
Thai th
Tibetan bo
Tigrinya ti
Tonga to
Tsonga ts
Turkish tr
Turkmen tk
Twi tw
Uighur ug
Ukrainian uk
Urdu ur
Uzbek uz
Venda
Vietnamese vi
Volapük vo
Welsh cy
Wolof wo
Xhosa xh
Yi
Yiddish yi, ji
Yoruba yo
Zulu zu
HTML ISO-8859-1 Reference
« Previous Next Reference »
Modern browsers supports several character-sets:
ASCII character set
Standard ISO character sets
Mathematical symbols, Greek letters, and other symbols
ISO-8859-1
ISO-8859-1 is the default character set in most browsers.
The first 128 characters of ISO-8859-1 is the original ASCII character-set (the numbers from 0-
9, the uppercase and lowercase English alphabet, and some special characters).
The higher part of ISO-8859-1 (codes from 160-255) contains the characters used in Western
European countries and some commonly used special characters.
Entities are used to implement reserved characters or to express characters that cannot easily be
entered with the keyboard.
Reserved Characters in HTML
Some characters are reserved in HTML and XHTML. For example, you cannot use the greater
than or less than signs within your text because the browser could mistake them for markup.
HTML and XHTML processors must support the five special characters listed in the table below:
Character Entity Number Entity Name Description
" " " quotation mark
' ' ' (does not work in IE) apostrophe
& & & ampersand
< < < less-than
> > > greater-than
Note: Entity names are case sensitive!
ISO 8859-1 Symbols
Character Entity Number Entity Name Description
  non-breaking space
¡ ¡ ¡ inverted exclamation mark
¢ ¢ ¢ cent
£ £ £ pound
¤ ¤ ¤ currency
¥ ¥ ¥ yen
¦ ¦ ¦ broken vertical bar
§ § § section
¨ ¨ ¨ spacing diaeresis
© © © copyright
ª ª ª feminine ordinal indicator
« « « angle quotation mark (left)
¬ ¬ ¬ negation
­ ­ soft hyphen
® ® ® registered trademark
¯ ¯ ¯ spacing macron
° ° ° degree
± ± ± plus-or-minus
² ² ² superscript 2
³ ³ ³ superscript 3
´ ´ ´ spacing acute
µ µ µ micro
¶ ¶ ¶ paragraph
· · · middle dot
¸ ¸ ¸ spacing cedilla
¹ ¹ ¹ superscript 1
º º º masculine ordinal indicator
» » » angle quotation mark (right)
¼ ¼ ¼ fraction 1/4
½ ½ ½ fraction 1/2
¾ ¾ ¾ fraction 3/4
¿ ¿ ¿ inverted question mark
× × × multiplication
÷ ÷ ÷ division
ISO 8859-1 Characters
Character Entity Number Entity Name Description
À À À capital a, grave accent
Á Á Á capital a, acute accent
   capital a, circumflex accent
à à à capital a, tilde
Ä Ä Ä capital a, umlaut mark
Å Å Å capital a, ring
Æ Æ Æ capital ae
Ç Ç Ç capital c, cedilla
È È È capital e, grave accent
É É É capital e, acute accent
Ê Ê Ê capital e, circumflex accent
Ë Ë Ë capital e, umlaut mark
Ì Ì Ì capital i, grave accent
Í Í Í capital i, acute accent
Î Î Î capital i, circumflex accent
Ï Ï Ï capital i, umlaut mark
Ð Ð Ð capital eth, Icelandic
Ñ Ñ Ñ capital n, tilde
Ò Ò Ò capital o, grave accent
Ó Ó Ó capital o, acute accent
Ô Ô Ô capital o, circumflex accent
Õ Õ Õ capital o, tilde
Ö Ö Ö capital o, umlaut mark
Ø Ø Ø capital o, slash
Ù Ù Ù capital u, grave accent
Ú Ú Ú capital u, acute accent
Û Û Û capital u, circumflex accent
Ü Ü Ü capital u, umlaut mark
Ý Ý Ý capital y, acute accent
Þ Þ Þ capital THORN, Icelandic
ß ß ß small sharp s, German
à à à small a, grave accent
á á á small a, acute accent
â â â small a, circumflex accent
ã ã ã small a, tilde
ä ä ä small a, umlaut mark
å å å small a, ring
æ æ æ small ae
ç ç ç small c, cedilla
è è è small e, grave accent
é é é small e, acute accent
ê ê ê small e, circumflex accent
ë ë ë small e, umlaut mark
ì ì ì small i, grave accent
í í í small i, acute accent
î î î small i, circumflex accent
ï ï ï small i, umlaut mark
ð ð ð small eth, Icelandic
ñ ñ ñ small n, tilde
ò ò ò small o, grave accent
ó ó ó small o, acute accent
ô ô ô small o, circumflex accent
õ õ õ small o, tilde
ö ö ö small o, umlaut mark
ø ø ø small o, slash
ù ù ù small u, grave accent
ú ú ú small u, acute accent
û û û small u, circumflex accent
ü ü ü small u, umlaut mark
ý ý ý small y, acute accent
þ þ þ small thorn, Icelandic
ÿ ÿ ÿ small y, umlaut mark
Examples
1.
<html>
<body>
The full URL of this document is:
<script type="text/javascript">
document.write(document.URL);
</script>
</body>
</html>
2. Return the number of links in a document
<html>
<body>
<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>
<p><a href="/js/">JavaScript Tutorial</a></p>
<p>Number of areas/links:
<script type="text/javascript">
document.write(document.links.length);
</script></p>
</body>
</html>
Using Cascading style Sheet
<body>
<h1>Buy a television by dragging it to the shopping cart</h1>
<div id=”targetDiv”></div>
<div id=”television”
style=”left:200px; top:100px; width:80px; height:80px;”
onmousedown=”handleDown(event);”>Television</div>
<div id=”target”
style=”left:300px; top:300px; width:200px; height:100px;”>
Shopping Cart</div>
</body>
You might also like
- Short Notes Form Controls - Form Tags, Form AttributesNo ratings yetShort Notes Form Controls - Form Tags, Form Attributes3 pages
- HTML Forms and Input: Try It Yourself - ExamplesNo ratings yetHTML Forms and Input: Try It Yourself - Examples5 pages
- Class-5A-HTMLForm Elements-Form AttributesNo ratings yetClass-5A-HTMLForm Elements-Form Attributes15 pages
- HTML Form and PHP HTML Form: ITS332 - LABNo ratings yetHTML Form and PHP HTML Form: ITS332 - LAB6 pages
- Forms: Forms Are Used To Collect Data Inputted by A User. They Can Be Used As AnNo ratings yetForms: Forms Are Used To Collect Data Inputted by A User. They Can Be Used As An7 pages
- Forms: HTML Forms Are Used To Select Different Kinds of User InputNo ratings yetForms: HTML Forms Are Used To Select Different Kinds of User Input12 pages
- Q3 MODULE4 G10 PROGRAMMING MANGALDAN-NHS-FinalNo ratings yetQ3 MODULE4 G10 PROGRAMMING MANGALDAN-NHS-Final11 pages
- CCS 212 Web Design and Publishing NOTESNo ratings yetCCS 212 Web Design and Publishing NOTES69 pages
- Unit 16 - Procedural Programming AssignmentNo ratings yetUnit 16 - Procedural Programming Assignment4 pages
- LUSAS 14.5 Error Fix and Modification Release NoteNo ratings yetLUSAS 14.5 Error Fix and Modification Release Note2 pages
- Multiple Choice Questions of Microsoft ExcelNo ratings yetMultiple Choice Questions of Microsoft Excel3 pages
- Astras Faq - Frequently Asked Questions: Allocation Network GMBHNo ratings yetAstras Faq - Frequently Asked Questions: Allocation Network GMBH12 pages
- Upgrade Oracle Database From 12.1.0.2 To 19.3.0.0No ratings yetUpgrade Oracle Database From 12.1.0.2 To 19.3.0.05 pages
- Design of E-Learning System Using Service Oriented Architecture (SOA)No ratings yetDesign of E-Learning System Using Service Oriented Architecture (SOA)50 pages
- ABAP RESTful Application Programming - Naming Conventions For Development ObjectsNo ratings yetABAP RESTful Application Programming - Naming Conventions For Development Objects13 pages
- Lilly Emails Sent: Generated by User: C183910 On: Record Count: Remote - Source: From: To: AliasNo ratings yetLilly Emails Sent: Generated by User: C183910 On: Record Count: Remote - Source: From: To: Alias3 pages
- Learning To Script With AutoIt V3 (Last Updated 17 Feb 2010)No ratings yetLearning To Script With AutoIt V3 (Last Updated 17 Feb 2010)106 pages
- 1.1.5 Lab - Installing The Virtual MachinesNo ratings yet1.1.5 Lab - Installing The Virtual Machines4 pages
- Free Software For Students & Educators - AutoCAD - AutodeskNo ratings yetFree Software For Students & Educators - AutoCAD - Autodesk5 pages
- The Official Full Circle Magazine Index - Full Circle IndexNo ratings yetThe Official Full Circle Magazine Index - Full Circle Index96 pages
