244386041.

doc 1 od 221
HTML Tutorial
HTML Tutorial
In our HTML tutorial you will learn how to use HTML to create your
own Web site.
HTML is very easy to learn!
HTML Examples
Learn by 100 examples! With our editor, you can edit HTML, and click on a test
button to view the result.
Try-It-Yourself!
HTML Quiz Test
Test your HTML skills at W3Schools!
Start HTML Quiz!
HTML e!erences
At W3Schools you will find complete HTML references about tags, attributes,
colors, entities, and more.
HTML 4.01 References
HTML Exam " #et $our %iploma!
W3Schools' Online Certification Program is the perfect solution for busy
professionals who need to balance work, family, and career building.
The HTML Developer Certificate is for developers who want to document their
knowledge of HTML 4.01, XHTML, and CSS.
HTML Developer Certificate!
Table o! &ontents
HTML 'asic
The World Wide Web
This chapter explains what the World Wide Web is. It explains the difference
between a Web browser and a Web server. It also explains how a Web browser
(like Internet Explorer or Netscape Navigator) fetches and displays a Web page.
HTML Introduction
This chapter explains what HTML is, and how HTML "markup tags" are used to
format a Web page. It tells you how to create an HTML file, and how to view it in
your browser. It also explains how to view the source of an HTML document, and
gives you some basic guidelines for using HTML tags.
HTML Elements
This chapter explains how HTML documents are made up of HTML elements, and
how HTML elements are defined using HTML tags.
Basic HTML Tags
The best way to learn HTML is to look at others examples. In this chapter we
have created some easy examples to teach you the basic HTML tags.
With our HTML editor you can both study the examples and edit them on
your own.
244386041.doc 2 od 221
HTML Formatting
This chapter uses the same simple HTML editor that you find in the previous
chapter to demonstrate HTML formatting tags. It shows the text formatting tags,
the computer output tags, the citation tags, the quotation tags, and the
definition tags.
HTML Character Entities
Some characters have a special meaning in HTML, like the less than sign (<) that
defines the start of an HTML tag. If we want the browser to actually display a
less than sign, we have to use a character entity in the HTML source.
HTML Links
This chapter demonstrates HTML link tags. You will see how to insert and control
the links on your page. A mail link is also demonstrated.
HTML Frames
This chapter demonstrates HTML frame tags. You will see how to make vertical,
horizontal, and mixed framesets.
HTML Tables
This chapter demonstrates different HTML tables. It shows how to insert a table
header, a table border, and an image in a table cell. It also shows how to define
cells that span more than one row or column, and how to control the white space
between the cell content and its borders.
HTML Lists
This chapter demonstrates different HTML lists. It shows different types of
ordered and unordered lists. It also shows how you can nest lists in an HTML
document.
HTML Forms
This chapter demonstrates HTML forms and input tags. It shows how to create
text fields, check-boxes, and radio-buttons. It also shows how to put the input
fields in a form with a submit button. When the submit button is pushed the
"user-input" is sent to another file.
HTML Images
This chapter demonstrates HTML image tags. It shows how to insert an image,
how to align an image. It also shows how to create an image-map with click-able
regions.
HTML Background
This chapter demonstrates how to use HTML backgrounds.
HTML ()vance)
HTML Layout
This chapter demonstrates how to use HTML tables to format the layout of an
HTML page.
HTML Fonts
This chapter demonstrates the HTML <font> tag. It shows how to change the
font type and size of HTML text output.
Why use HTML 4.0
This chapter explains why you should start using HTML 4.0, and forget about
earlier versions of HTML like HTML 3.2.
HTML Styles
This chapter demonstrates HTML style tags. It shows how to use styles in an
HTML document, and how to link to an external style sheet. It also shows how to
define sections in a document.
244386041.doc 3 od 221
HTML Head
This chapter demonstrates HTML header tags. It shows the different tags that go
inside the head element.
HTML Meta
This chapter demonstrates HTML meta tags. It explains the use of meta tags for
providing description and keyword information.
HTML URL
This chapter explains Uniform Resource Locators - the method by which
documents and data are addressed on the Web.
HTML Scripting
This chapter demonstrates HTML script tags. It shows how to insert a script in an
HTML document, and how to handle browsers that do not support scripting. It
also shows how to insert an object to an HTML document.
Roll your own Web Server
After you have studied our examples, you might wonder how you can publish
your work. This chapter tells you how.
HTML Software
This chapter describes some of the most popular HTML software.
HTML Examples*Quiz
HTML Examples
Lots of HTML Examples !!!
HTML Quiz Test
Test your HTML skills !!!
HTML e!erences
HTML 4.01 Quick List
An HTML 4.01 Quick Reference - to put in your pocket.
HTML 4.01 Reference
A complete HTML 4.01 reference! All HTML 4.01 tags with lots of examples and
tips. The reference also indicates the elements that are deprecated in HTML 4.01,
and the browsers version support for each tag.
HTML 4.01 Standard Attributes
Each tag has attributes. The attributes for each tag are listed in the examples in
the "HTML 4.01 Reference" page. The attributes listed here are the core an)
lan+ua+e attributes all the tags has as standard (with few exceptions). This
reference describes the attributes, and shows the possible values for each.
HTML 4.01 Event Attributes
All the event attributes the tags has as standard (with few exceptions). This
reference describes the attributes, and shows the possible values for each.
HTML ASCII Reference
A 7-BIT ASCII reference, defining the original ASCII codes used for transmitting
HTML data over the Web.
HTML URL-encoding Reference
A reference of ASCII characters in URL-encoding form (hexadecimal format).
HTML 4.01 Entities
How to write special characters in HTML. In HTML there are some characters, like
"&" and "<", that have a special meaning.
244386041.doc 4 od 221
HTML Colors
All HTML colors. You can click on one of the colors to see it as a background with
each of the text colors.
HTTP Messages
HTTP Status Messages.
&omputer ,o-e
&ustomer. "Should I hit the letter zero or the number zero?"
The Worl) Wi)e Web
What is the Worl) Wi)e Web/
The World Wide Web (WWW) is most often called the Web.
The Web is a network of computers all over the worl).
All the computers in the Web can communicate with each other.
All the computers use a communication stan)ar) calle) HTT0.
How )oes the WWW wor-/
Web information is stored in documents called Web pa+es.
Web pages are files stored on computers called Web servers.
Computers reading the Web pages are called Web clients.
Web clients view the pages with a program called a Web browser.
Popular browsers are Internet Explorer an) 1etscape 1avi+ator.
How )oes the browser !etch the pa+es/
A browser fetches a Web page from a server by a re2uest.
A request is a standard HTTP request containing a pa+e a))ress.
A page address looks like this: http.**www.someone.com*pa+e.htm.
How )oes the browser )isplay the pa+es/
All Web pages contain instructions !or )isplay
The browser displays the page by rea)in+ these instructions.
The most common display instructions are called HTML ta+s.
HTML tags look like this 3p4This is a 0ara+raph3*p4.
Who is ma-in+ the Web stan)ar)s/
The Web standards are not ma)e up by Netscape or Microsoft.
244386041.doc 5 od 221
The rule-making body of the Web is the W5&.
W3C stands for the Worl) Wi)e Web &onsortium.
W3C puts together specifications for Web stan)ar)s.
The most essential Web standards are HTML6 &77 an) 8ML.
The latest HTML standard is 8HTML 9.:.
Internet ,o-e
&ustomer: "I don't have a computer. Is the internet available in book form?"
Intro)uction to HTML
What is an HTML ;ile/
HTML stands for Hyper Text Markup Language
An HTML file is a text file containing small mar-up ta+s
The markup tags tell the Web browser how to )isplay the page
An HTML file must have an htm or html file extension
An HTML file can be created using a simple text e)itor
%o $ou Want to Try It/
If you are running Windows, start Notepad (or start SimpleText if you are on a
Mac) and type in the following text:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
Save the file as "mypage.htm".
Start your Internet browser. Select "Open" (or "Open Page") in the File menu of
your browser. A dialog box will appear. Select "Browse" (or "Choose File") and
locate the HTML file you just created - "mypage.htm" - select it and click "Open".
Now you should see an address in the dialog box, for example
"C:\MyDocuments\mypage.htm". Click OK, and the browser will display the page.
Example Explaine)
The first tag in your HTML document is <html>. This tag tells your browser that
this is the start of an HTML document. The last tag in your document is </html>.
This tag tells your browser that this is the end of the HTML document.
244386041.doc 6 od 221
The text between the <head> tag and the </head> tag is header information.
Header information is not displayed in the browser window.
The text between the <title> tags is the title of your document. The title is
displayed in your browser's caption.
The text between the <body> tags is the text that will be displayed in your
browser.
The text between the <b> and </b> tags will be displayed in a bold font.
HTM or HTML Extension/
When you save an HTML file, you can use either the .htm or the .html extension.
We have used .htm in our examples. It might be a bad habit inherited from the
past when some of the commonly used software only allowed three letter
extensions.
With newer software we think it will be perfectly safe to use .html.
1ote on HTML E)itors.
You can easily edit HTML files using a WYSIWYG (what you see is what you get)
editor like FrontPage, Claris Home Page, or Adobe PageMill instead of writing
your markup tags in a plain text file.
But if you want to be a skillful Web developer, we strongly recommend that you
use a plain text editor to learn your primer HTML.
;re2uently (s-e) Questions
Q. (!ter I have e)ite) an HTML !ile6 I cannot view the result in my
browser. Why/
(. Make sure that you have saved the file with a proper name and extension like
"c:\mypage.htm". Also make sure that you use the same name when you open
the file in your browser.
Q. I have trie) to e)it an HTML !ile but the chan+es )on<t show in the
browser. Why/
(. The browser caches your pages so it doesn't have to read the same page
twice. When you have changed a page, the browser doesn't know that. Use the
browser's refresh/reload button to force the browser to read the edited page.
Q. &an I use both Internet Explorer an) 1etscape 1avi+ator/
(. Yes, you can do all your training with both Netscape 3.0 or higher, and
Internet Explorer 3.0 or higher. However, a few of the examples in our advanced
classes assume you are running Internet Explorer 4.0 or 5.0, or Netscape 6.0.
Q. %oes my computer have to run Win)ows/ What about a Mac/
(. You can do all your training on a non Windows computer like a Mac. However,
a few of the examples in our higher classes assume that you are running a newer
version of Windows, like Windows 98 or Windows 2000.
HTML Elements
244386041.doc 7 od 221
HTML )ocuments are text !iles ma)e up o! HTML elements.
HTML elements are )e!ine) usin+ HTML ta+s.
HTML Ta+s
HTML tags are used to mark-up HTML elements
HTML tags are surrounded by the two characters 3 an) 4
The surrounding characters are called an+le brac-ets
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start ta+6 the second tag is the en) ta+
The text between the start and end tags is the element content
HTML tags are not case sensitive6 <b> means the same as <B>
HTML Elements
Remember the HTML example from the previous page:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
This is an HTML element:
<b>This text is bold</b>
The HTML element starts with a start ta+: <b>
The content of the HTML element is: This text is bold
The HTML element ends with an en) ta+: </b>
The purpose of the <b> tag is to define an HTML element that should be
displayed as bold.
This is also an HTML element:
<body>
This is my first homepage. <b>This text is bold</b>
</body>
This HTML element starts with the start tag <body>, and ends with the end tag
</body>.
The purpose of the <body> tag is to define the HTML element that contains the
body of the HTML document.
Why )o We =se Lowercase Ta+s/
We have just said that HTML tags are not case sensitive: <B> means the same
as <b>. When you surf the Web, you will notice that most tutorials use
uppercase HTML tags in their examples. We always use lowercase tags. Why?
244386041.doc 8 od 221
If you want to prepare yourself for the next generations of HTML you should start
using lowercase tags. The World Wide Web Consortium (W3C) recommends
lowercase tags in their HTML 4 recommendation, and XHTML (the next
generation HTML) demands lowercase tags.
Ta+ (ttributes
Tags can have attributes. Attributes can provide additional information about the
HTML elements on your page.
This tag defines the body element of your HTML page: <body>. With an added
bgcolor attribute, you can tell the browser that the background color of your
page should be red, like this: <body bgcolor="red">.
This tag defines an HTML table: <table>. With an added border attribute, you
can tell the browser that the table should have no borders: <table border="0">
Attributes always come in name/value pairs like this: name="value".
Attributes are always added to the start tag of an HTML element.
Quote 7tyles6 >re)> or <re)</
Attribute values should always be enclosed in quotes. Double style quotes are the
most common, but single style quotes are also allowed.
In some rare situations, like when the attribute value itself contains quotes, it is
necessary to use single quotes:
name='John "ShotGun" Nelson'
'asic HTML Ta+s
The most important ta+s in HTML are ta+s that )e!ine hea)in+s6
para+raphs an) line brea-s.
The best way to learn HTML is to wor- with examples. We have create) a
very nice HTML e)itor !or you. With this e)itor6 you can e)it the HTML
source co)e i! you li-e6 an) clic- on a test button to view the result.
Try it $oursel! " Examples
<html>
<body>
The content of the body element is displayed in your browser.
</body>
</html>
244386041.doc 9 od 221
The content of the body element is displayed in your browser.
This example is a very simple HTML document, with only a minimum of HTML
tags. It demonstrates how the text inside a body element is displayed in the
browser.
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>Paragraph elements are defined by the p tag.</p>
</body>
</html>
This is a paragraph.
This is a paragraph.
This is a paragraph.
Paragraph elements are defined by the p tag.
This example demonstrates how the text inside paragraph elements is displayed
in the browser.
(You can find more examples at the bottom of this page)
Hea)in+s
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest
heading. <h6> defines the smallest heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
244386041.doc 10 od 221
<h6>This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading.
0ara+raphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML automatically adds an extra blank line before and after a paragraph.
Line 'rea-s
The <br> tag is used when you want to end a line, but don't want to start a new
paragraph. The <br> tag forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line breas</p>
The <br> tag is an empty tag. It has no closing tag.
&omments in HTML
The comment tag is used to insert a comment in the HTML source code. A
comment will be ignored by the browser. You can use comments to explain your
code, which can help you when you edit the source code at a later date.
<!"" This is a #omment "">
Note that you need an exclamation point after the opening bracket, but not
before the closing bracket.
'asic 1otes " =se!ul Tips
When you write HTML text, you can never be sure how the text is displayed in
another browser. Some people have large computer displays, some have small.
The text will be reformatted every time the user resizes his window. Never try to
format the text in your editor by adding empty lines and spaces to the text.
HTML will truncate the spaces in your text. Any number of spaces count as one.
Some extra information: In HTML a new line counts as one space.
Using empty paragraphs <p> to insert blank lines is a bad habit. Use the <br>
tag instead. (But don't use the <br> tag to create lists. Wait until you have
learned about HTML lists.)
You might have noticed that paragraphs can be written without the closing tag
</p>. Don't rely on it. The next version of HTML will not allow you to skip ANY
closing tags.
HTML automatically adds an extra blank line before and after some elements, like
before and after a paragraph, and before and after a heading.
We use a horizontal rule (the <hr> tag), to separate the sections in our tutorials.
More Examples
244386041.doc 11 od 221
More paragraphs
This example demonstrates some of the default behaviors of paragraph
elements.
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of your browser window.
If you resize the browser window, the number of lines in this paragraph will
change.
</p>
244386041.doc 12 od 221
</body>
</html>
This paragraph contains a lot of lines in the source code, but the browser
ignores it.
This paragraph contains a lot of spaces in the source code, but the
browser ignores it.
The number of lines in a paragraph depends on the size of your browser
window. If you resize the browser window, the number of lines in this
paragraph will change.
Line breaks
This example demonstrates the use of line breaks in an HTML document.
<html>
<body>
<p>
To break<br>lines<br>in a<br>paragraph,<br>use the br tag.
</p>
</body>
</html>
To break
lines
in a
paragraph,
use the br tag.
Poem problems
This example demonstrates some problems with HTML formatting.
<html>
<body>
244386041.doc 13 od 221
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
<p>Note that your browser simply ignores your formatting!</p>
</body>
</html>
My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies
over the ocean. Oh, bring back my Bonnie to me.
Note that your browser simply ignores your formatting!
Headings
This example demonstrates the tags that display headings in an HTML document.
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
244386041.doc 14 od 221
<p>Use heading tags only for headings. Don't use them just to make something
bold. Use other tags for that.</p>
</body>
</html>
This is hea)in+ 9
This is hea)in+ ?
This is hea)in+ 5
This is heading 4
This is heading 5
This is heading 6
Use heading tags only for headings. Don't use them just to make
something bold. Use other tags for that.
Center aligned heading
This example demonstrates a center aligned heading.
html>
<body>
<h1 align="center">This is heading 1</h1>
<p>The heading above is aligned to the center of this page. The heading above
is aligned to the center of this page. The heading above is aligned to the center
of this page.</p>
</body>
</html>
244386041.doc 15 od 221
This is hea)in+ 9
The heading above is aligned to the center of this page. The heading
above is aligned to the center of this page. The heading above is aligned
to the center of this page.
Horizontal rule
This example demonstrates how to insert a horizontal rule.
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
</body>
</html>
The hr tag defines a horizontal rule:
This is a paragraph
This is a paragraph
This is a paragraph
Hidden comments
This example demonstrates how to insert a hidden comment in the HTML source
code.
244386041.doc 16 od 221
<html>
<body>
<!--This comment will not be displayed-->
<p>This is a regular paragraph</p>
</body>
</html>
This is a regular paragraph
Background color
This example demonstrates adding a background-color to an HTML page.
<html>
<body bgcolor="yellow">
<h2>Look: Colored Background!</h2>
</body>
</html>
Loo-. &olore) 'ac-+roun)!
'asic HTML Ta+s
Ta+ %escription
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment
244386041.doc 17 od 221
HTML Text ;ormattin+
HTML )e!ines a lot o! elements !or !ormattin+ output6 li-e bol) or italic
text.
'elow are a lot o! examples that you can try out yoursel!.
Examples
Text formatting
This example demonstrates how you can format text in an HTML document.
html>
<body>
<b>This text is bold</b>
<br>
<strong>
This text is strong
</strong>
<br>
<big>
This text is big
</big>
<br>
<em>
This text is emphasized
</em>
<br>
<i>
This text is italic
244386041.doc 18 od 221
</i>
<br>
<small>
This text is small
</small>
<br>
This text contains
_subscript
<br>
This text contains
^superscript
</body>
</html>
This text is bol)
This text is stron+
This text is big
This text is emphasized
This text is italic
This text is small
This text contains
subscript
This text contains
superscript
Preformatted text
This example demonstrates how you can control the line breaks and spaces with
the pre tag.
<html>
<body>
244386041.doc 19 od 221
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
This is
preformatted text.
$t preser%es both spa#es
and line breas.
The pre tag is good for displaying computer code:
for i & 1 to 1'
print i
next i
"Computer output" tags
This example demonstrates how different "computer output" tags will be
displayed.
<html>
<body>
<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
244386041.doc 20 od 221
<br>
<tt>Teletype text</tt>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>
<p>
<b>Note:</b> These tags are often used to display computer/programming
code.
</p>
</body>
</html>
Computer code
Keyboard input
Teletype text
Sample text
Computer variable
1ote. These tags are often used to display computer/programming code.
Address
This example demonstrates how to write an address in an HTML document.
<html>
<body>
<address>
Donald Duck<br>
BOX 555<br>
Disneyland<br>
244386041.doc 21 od 221
USA
</address>
</body>
</html>
Donald Duck
BOX 555
Disneyland
USA
Abbreviations and acronyms
This example demonstrates how to handle an abbreviation or an acronym.
<html>
<body>
<abbr title="United Nations">UN</abbr>
<br>
<acronym title="World Wide Web">WWW</acronym>
<p>The title attribute is used to show the spelled-out version when holding the
mouse pointer over the acronym or abbreviation.</p>
<p>This only works for the acronym element in IE 5.</p>
<p>This works for both the abbr and acronym element in Netscape 6.2.</p>
</body>
</html>
UN
WWW
244386041.doc 22 od 221
The title attribute is used to show the spelled-out version when holding
the mouse pointer over the acronym or abbreviation.
This only works for the acronym element in IE 5.
This works for both the abbr and acronym element in Netscape 6.2.
Text direction
This example demonstrates how to change the text direction.
<html>
<body>
<p>
If your browser supports bi-directional override (bdo), the next line will be
written from the right to the left (rtl):
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
If your browser supports bi-directional override (bdo), the next line will be
written from the right to the left (rtl):
Here is some Hebrew text
Quotations
This example demonstrates how to handle long and short quotations.
<html>
<body>
244386041.doc 23 od 221
Here comes a long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is
a long quotation. This is a long quotation.
</blockquote>
Here comes a short quotation:
<q>
This is a short quotation
</q>
<p>
With the block quote element, the browser inserts line breaks and margins, but
the q element does not render as anything special.
</p>
</body>
</html>
Here comes a long quotation
!"is is a long quotation. !"is is a long quotation. !"is is a long quotation. !"is
is a long quotation. !"is is a long quotation.
Here comes a s"ort quotation !"is is a s"ort quotation
With the block quote element, the browser inserts line breaks and
margins, but the q element does not render as anything special.
Deleted and inserted text
This example demonstrates how to mark a text that is deleted or inserted to a
document.
<html>
244386041.doc 24 od 221
<body>
<p>
a dozen is
<del>twenty</del>
<ins>twelve</ins>
pieces
</p>
<p>
Most browsers will overstrike deleted text and underline inserted text.
</p>
<p>
Some older browsers will display deleted or inserted text as plain text.
</p>
</body>
</html>
dozen is twelve pieces
Most browsers will overstrike deleted text and underline inserted text.
Some older browsers will display deleted or inserted text as plain text.
How to @iew HTML 7ource
Have you ever seen a Web page and wondered "How do they do that?"
244386041.doc 25 od 221
To find out, simply click on the VIEW option in your browsers toolbar and select
SOURCE or PAGE SOURCE. This will open a window that shows you the actual
HTML of the page.
Text ;ormattin+ Ta+s
The 3tt4 3i4 3b4 3bi+4 3small4 ta+s
%e!inition an) =sa+e
The following elements are all font style elements. They are not
deprecated, but it is possible to achieve richer effects using style sheets.
<tt> #enders as telet$%e or mono s%aced te&t
<i> #enders as italic te&t
<b> #enders as 'old te&t
<big> #enders as 'igger te&t
<small> #enders as smaller te&t
%i!!erences 'etween HTML an) 8HTML
NONE
Example
Source Output
(tt)!elet$%e te&t(*tt)('r *)
(i)+talic te&t(*i)('r *)
('),old te&t(*')('r *)
('ig),ig te&t(*'ig)('r *)
(small)-mall te&t(*small)('r *)
Teletype text
Italic text
Bold text
,ig te&t
-mall te&t
The 3em4 3stron+4 3)!n4 3co)e4
3samp4 3-b)4 3var4 3cite4 ta+s
%e!inition an) =sa+e
244386041.doc 26 od 221
The following elements are all phrase elements. They are not deprecated,
but it is possible to achieve a much richer effect using style sheets.
<em> #enders as em%"asi.ed te&t
<strong> #enders as strong em%"asi.ed te&t
<dfn> /e0ines a de0inition term
<code> /e0ines com%uter code te&t
<samp> /e0ines sam%le com%uter code
<kbd> /e0ines 1e$'oard te&t
<var> /e0ines a 2aria'le
<cite> /e0ines a citation
%i!!erences 'etween HTML an) 8HTML
NONE
Example
Source Output
(em)3m%"asi.ed te&t(*em)('r *)
(strong)-trong te&t(*strong)('r *)
(d0n)/e0inition term(*d0n)('r *)
(code)4om%uter code te&t(*code)('r *)
(sam%)-am%le com%uter code te&t(*sam%)('r *)
(1'd)5e$'oard te&t(*1'd)('r *)
(2ar)6aria'le(*2ar)('r *)
(cite)4itation(*cite)
Emphasized text
Strong text
Definition term
Computer code text
Sample computer code text
Keyboard text
Variable
Citation
The 3sub4 an) 3sup4 Ta+s
%e!inition an) =sa+e
The <sub> tag defines subscript text. The <sup> tag defines superscript
text.
%i!!erences 'etween HTML an) 8HTML
244386041.doc 27 od 221
NONE
Example
Source Output
!"is te&t contains
(su')su'scri%t(*su')
!"is te&t contains
(su%)su%erscri%t(*su%)
!"is te&t contains
su'scri%t
!"is te&t contains
su%erscri%t
The 3ins4 ta+
%e!inition an) =sa+e
Defines inserted text.
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
Tip. Use it together with the <del> tag to describe updates and
modifications to a document.
Example
Source Output
a do.en is (del)20(*del) (ins)12(*ins) %ieces7 a do.en is 12 %ieces7
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
cite U#8 9 U#8 to anot"er document :"ic" e&%lains :"$ -!;
244386041.doc 28 od 221
t"e te&t :as inserted
datetime <<<<==// /e0ines t"e date and time :"en t"e te&t :as
inserted
-!;
The 3)el4 ta+
%e!inition an) =sa+e
Defines text that has been deleted in a document.
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
Tip. Use it together with the <ins> tag to describe updates and
modifications in a document.
Example
Source Output
a do.en is (del)20(*del) 12 %ieces a do.en is 12 %ieces
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
cite U#8 /e0ines a U#8 to anot"er document :"ic"
e&%lains :"$ t"e te&t :as deleted or inserted
-!;
datetime <<<<==// /e0ines t"e date and time t"e te&t :as deleted -!;
The 3s4 an) 3stri-e4 ta+s
%e!inition an) =sa+e
244386041.doc 29 od 221
The <s> and <strike> tags defines strikethrough text.
%i!!erences 'etween HTML an) 8HTML
The <s> and <strike> elements were deprecated in HTML 4.01.
The <s> and <strike> elements are not supported in XHTML 1.0 Strict
DTD.
Tips an) 1otes
Tip. Use <del> instead!
Example
Source Output
9 ne: 2ersion is (s)not $et a2aila'le.(*s)
no: a2aila'le7
('r *)
('r *)
9 ne: 2ersion is (stri1e)not $et
a2aila'le.(*stri1e) no: a2aila'le7
9 ne: 2ersion is not $et a2aila'le. no:
a2aila'le7
9 ne: 2ersion is not $et a2aila'le. no:
a2aila'le7
The 3u4 ta+
%e!inition an) =sa+e
The <u> tag defines underlined text.
%i!!erences 'etween HTML an) 8HTML
The u element was deprecated in HTML 4.01.
The u element is not supported in XHTML 1.0 Strict DTD.
Tips an) 1otes
Tip. Do not underline text - a user confuses it with a hyperlink!!
Example
244386041.doc 30 od 221
Source Output
9 ne: 2ersion is (u)no: a2aila'le7(*u) 9 ne: 2ersion is no: a2aila'le7
Ta+ %escription
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<s> Deprecated. Use <del> instead
<strike> Deprecated. Use <del> instead
<u> Deprecated. Use styles instead
>&omputer Autput> Ta+s
Ta+ %escription
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<pre> Defines preformatted text
<listing> Deprecated. Use <pre> instead
<plaintext> Deprecated. Use <pre> instead
<xmp> Deprecated. Use <pre> instead
The 3pre4 ta+
%e!inition an) =sa+e
244386041.doc 31 od 221
The pre element defines preformatted text. The text enclosed in the pre
element usually preserves spaces and line breaks. The text renders in a
fixed-pitch font.
%i!!erences 'etween HTML an) 8HTML
The "width" attribute of the pre element was deprecated in HTML 4.01.
The "width" attribute of the pre element is not supported in XHTML 1.0
Strict DTD.
1ote on 3pre4
It is worth noting that while <xmp> is deprecated, the <pre> tag does
not perform all of the functions of <xmp>:
<pre><b>Hello</b></pre> displays Hello
<xmp><b>Hello</b></xmp> displays <b>Hello</b>
Example
Source Output
(%re)
!"is te&t is
in a 0i&ed>%itc"
0ont? and it %reser2es
'ot" s%aces and
line 'rea1s
(*%re)
This text is
in a fixed"pit#h
font( and it preser%es
both spa#es and
line breas
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
:idt" num'er /e0ines t"e ma&imum num'er o0 c"aracters %er
line @usuall$ 40? 80? or 132A
!;
&itations6 Quotations6 an) %e!inition Ta+s
Ta+ %escription
<abbr> Defines an abbreviation
<acronym> Defines an acronym
244386041.doc 32 od 221
<address> Defines an address element
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term
The 3abbr4 ta+
%e!inition an) =sa+e
Indicates an abbreviated form, like "Inc.", "etc.". By marking up
abbreviations you can give useful information to browsers, spell checkers,
translation systems and search-engine indexers.
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
Tip. In some browsers the title attribute can be used to show the full
version of the expression when you are holding the mouse over the
abbreviation.
Example
Source Output
(a''r titleBCUnited
NationsC)UN(*a''r)
UN
The 3acronym4 ta+
%e!inition an) =sa+e
244386041.doc 33 od 221
The <acronym> tag defines the start of an acronym, like "NATO" and
"F.B.I". By marking up acronyms you can give useful information to
browsers, spell checkers, translation systems and search-engine indexers.
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
Tip. In some browsers the title attribute can be used to show the full
version of the expression when you are holding the mouse over the
acronym.
Example
Source Output
<acronym title="World Wide
Web">WWW</acronym>
WWW
The 3a))ress4 ta+
%e!inition an) =sa+e
The <address> tag defines the start of an address. You should use it to
define addresses, signatures, or authorships of documents.
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
1ote. The address usually renders in italic. Most browsers will add a line
break before and after the address element, but line breaks inside the text
you have to insert yourself.
Example
244386041.doc 34 od 221
Source Output
(address)
/onald /uc1('r *)
,o& 555('r *)
/isne$land
(*address)
Donald Duck
Box 555
Disneyland
The 3bloc-2uote4 ta+
%e!inition an) =sa+e
The <blockquote> tag defines the start of a long quotation.
%i!!erences 'etween HTML an) 8HTML
The <blockquote> tag is supposed to contain only block-level elements
within it, and not just plain text.
To validate the page as strict XHTML, you must add a block-level element
around the text within the <blockquote> tag, like this:
<blockquote>
<p>here is a long quotation here is a long quotation</p>
</blockquote>
Tips an) 1otes
1ote. The blockquote element creates white space on both sides of the
text.
Example
Source Output
Here comes a long quotation
('loc1quote) "ere is a long
quotation "ere is a long quotation
"ere is a long quotation "ere is a
long quotation "ere is a long
quotation "ere is a long quotation
"ere is a long quotation "ere is a
long quotation "ere is a long
quotation "ere is a long quotation
Here comes a long quotation
"ere is a long quotation "ere is a long
quotation "ere is a long quotation "ere is
a long quotation "ere is a long quotation
"ere is a long quotation "ere is a long
quotation "ere is a long quotation "ere is
a long quotation "ere is a long quotation
"ere is a long quotation
244386041.doc 35 od 221
"ere is a long quotation
(*'loc1quote)
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
cite U#8 U#8 o0 t"e quote? i0 it is ta1en 0rom t"e :e' -!;
The 3b)o4 ta+
%e!inition an) =sa+e
The bdo element overrides the default text direction.
%i!!erences 'etween HTML an) 8HTML
NONE
Example
Source Output
('do dirBCrtlC)Here is some He're:
te&t(*'do)
Here is some He're: te&t
The 324 ta+
%e!inition an) =sa+e
The <q> tag defines the start of a short quotation.
%i!!erences 'etween HTML an) 8HTML
244386041.doc 36 od 221
NONE
Tips an) 1otes
1ote. The q element does not render as anything special, you have to use
styles to format the text.
Example
Source Output
Here comes a s"ort quotation
(q)"ere is a s"ort quotation "ere is a
s"ort quotation(*q)
Here comes a s"ort quotation "ere is a s"ort quotation
"ere is a s"ort quotation
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
cite citation /e0ines a citation 0or t"e quotation -!;
HTML &haracter Entities
7ome characters li-e the 3 character6 have a special meanin+ in HTML6
an) there!ore cannot be use) in the text.
To )isplay a less than si+n B3C in HTML6 we have to use a character
entity.
&haracter Entities
Some characters have a special meaning in HTML, like the less than sign (<) that
defines the start of an HTML tag. If we want the browser to actually display these
characters we must insert character entities in the HTML source.
A character entity has three parts: an ampersand (&), an entity name or a # and
an entity number, and finally a semicolon (;).
To display a less than sign in an HTML document we must write: DltE or DFG:E
244386041.doc 37 od 221
The advantage of using a name instead of a number is that a name is easier to
remember. The disadvantage is that not all browsers support the newest entity
names, while the support for entity numbers is very good in almost all browsers.
1ote that the entities are case sensitive.
This example lets you experiment with character entities: Character Entities
1on"brea-in+ 7pace
The most common character entity in HTML is the non-breaking space.
Normally HTML will truncate spaces in your text. If you write 10 spaces in your
text HTML will remove 9 of them. To add spaces to your text, use the &nbsp;
character entity.
The Most &ommon &haracter Entities.
esult %escription Entity 1ame Entity 1umber
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" quotation mark &quot; &#34;
' apostrophe &#39;
7ome Ather &ommonly =se) &haracter Entities.
esult %escription Entity 1ame Entity 1umber
cent &cent; &#162;
pound &pound; &#163;
yen &yen; &#165;
section &sect; &#167;
copyright &copy; &#169;
registered trademark &reg; &#174;
multiplication &times; &#215;
division &divide; &#247;
To see a full list of HTML character entities go to our HTML Entities Reference.
HTML Lin-s
HTML uses a hyperlin- to lin- to another )ocument on the Web.
Examples
244386041.doc 38 od 221
Create hyperlinks
This example demonstrates how to create links in an HTML document.
<html>
<body>
<p>
<a href="lastpage.htm">
This text</a> is a link to a page on
this Web site.
</p>
<p>
<a href="http://www.microsoft.com/">
This text</a> is a link to a page on
the World Wide Web.
</p>
</body>
</html>
This text is a link to a page on this Web site.
This text is a link to a page on the World Wide Web.
An image as a link
This example demonstrates how to use an image as a link.
(You can find more examples at the bottom of this page)
<html>
<body>
<p>
244386041.doc 39 od 221
You can also use an image as a link:
<a href="lastpage.htm">
<img border="0" src="buttonnext.gif" width="65" height="38">
</a>
</p>
</body>
</html>
You can also use an image as a link:
The (nchor Ta+ an) the Hre! (ttribute
HTML uses the 3a4 BanchorC ta+ to create a lin- to another )ocument.
An anchor can point to any resource on the Web: an HTML page, an image, a
sound file, a movie, etc.
The syntax of creating an anchor:
<a href&)*rl)>Text to be displayed</a>
The <a> tag is used to create an anchor to link from, the href attribute is used
to address the document to link to, and the words between the open and close of
the anchor tag will be displayed as a hyperlink.
This anchor defines a link to W3Schools:
<a href&)http+//www.w3s#hools.#om/)>,isit -3.#hools!</a>
The line above will look like this in a browser:
Visit W3Schools!
The Tar+et (ttribute
With the target attribute, you can define where the linked document will be
opened.
The line below will open the document in a new browser window:
<a href&)http+//www.w3s#hools.#om/)
target&)/blan)>,isit -3.#hools!</a>
The (nchor Ta+ an) the 1ame (ttribute
244386041.doc 40 od 221
The name attribute is used to create a named anchor. When using named
anchors we can create links that can jump directly into a specific section on a
page, instead of letting the user scroll around to find what he/she is looking for.
Below is the syntax of a named anchor:
<a name&)label)>Text to be displayed</a>
The name attribute is used to create a named anchor. The name of the anchor
can be any text you care to use.
The line below defines a named anchor:
<a name&)tips)>0sef*l Tips .e#tion</a>
You should notice that a named anchor is not displayed in a special way.
To link directly to the "tips" section, add a # sign and the name of the anchor to
the end of a URL, like this:
<a href&)http+//www.w3s#hools.#om/html/lins.asp1tips)>
2*mp to the 0sef*l Tips .e#tion</a>
A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will
look like this:
<a href&)1tips)>2*mp to the 0sef*l Tips .e#tion</a>
'asic 1otes " =se!ul Tips
Always add a trailing slash to subfolder references. If you link like this:
href="http://www.w3schools.com/html", you will generate two HTTP requests to
the server, because the server will add a slash to the address and create a new
request like this: href="http://www.w3schools.com/html/"
Named anchors are often used to create "table of contents" at the beginning of a
large document. Each chapter within the document is given a named anchor, and
links to each of these anchors are put at the top of the document.
If a browser cannot find a named anchor that has been specified, it goes to the
top of the document. No error occurs.
More Examples
Open a link in a new browser window
This example demonstrates how to link to another page by opening a new
window, so that the visitor does not have to leave your Web site.
<html>
<body>
<a href="lastpage.htm" target="_blank">Last Page</a>
<p>
If you set the target attribute of a link to "_blank",
the link will open in a new window.
244386041.doc 41 od 221
</p>
</body>
</html>
8ast Dage
If you set the target attribute of a link to "_blank", the link will open in a
new window.
Link to a location on the same page
This example demonstrates how to use a link to jump to another part of a
document.
<html>
<body>
<p>
<a href="#C4">
See also Chapter 4.
</a>
</p>
<p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
244386041.doc 42 od 221
<a name="C4"><h2>Chapter 4</h2></a>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
244386041.doc 43 od 221
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
See also Chapter 4.
&hapter 9
This chapter explains ba bla bla
&hapter ?
This chapter explains ba bla bla
&hapter 5
This chapter explains ba bla bla
&hapter H
244386041.doc 44 od 221
This chapter explains ba bla bla
&hapter I
This chapter explains ba bla bla
&hapter G
This chapter explains ba bla bla
&hapter J
This chapter explains ba bla bla
&hapter K
This chapter explains ba bla bla
&hapter L
This chapter explains ba bla bla
&hapter 9:
This chapter explains ba bla bla
&hapter 99
This chapter explains ba bla bla
&hapter 9?
This chapter explains ba bla bla
&hapter 95
This chapter explains ba bla bla
&hapter 9H
This chapter explains ba bla bla
&hapter 9I
This chapter explains ba bla bla
&hapter 9G
This chapter explains ba bla bla
&hapter 9J
This chapter explains ba bla bla
244386041.doc 45 od 221
Break out of a frame
This example demonstrates how to break out of a frame, if your site is locked in
a frame.
<html>
<body>
<p>Locked in a frame?</p>
<a href="http://www.w3schools.com/"
target="_top">Click here!</a>
</body>
</html>
Locked in a frame?
Click here!
Create a mailto link
This example demonstrates how to link to a mail message (will only work if you
have mail installed).
<html>
<body>
<p>
This is a mail link:
<a href="mailto:someone@microsoft.com?subject=Hello%20again">
Send Mail</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to
<b>ensure</b> that the browser will display your text properly.
</p>
</body>
</html>
244386041.doc 46 od 221
This is a mail link: Send Mail
1ote. Spaces between words should be replaced by %20 to ensure that
the browser will display your text properly.
Create a mailto link 2
This example demonstrates a more complicated mailto link.
<html>
<body>
<p>
This is another mailto link:
<a href="mailto:someone@microsoft.com?
cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject
=Summer%20Party&body=You%20are%20invited%20to%20a%20big
%20summer%20party!">Send mail!</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to
<b>ensure</b> that the browser will display your text properly.
</p>
</body>
</html>
This is another mailto link: Send mail!
1ote. Spaces between words should be replaced by %20 to ensure that
the browser will display your text properly.
Lin- Ta+s
Ta+ %escription
<a> Defines an anchor
244386041.doc 47 od 221
The 3a4 ta+
%e!inition an) =sa+e
The <a> tag defines an anchor element. An anchor can be used in two
ways:
1. !o create a lin1 to anot"er document '$ using t"e "re0 attri'ute
2. !o create a 'oo1mar1 inside a document? '$ using t"e name or id attri'ute
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
1ote. A linked page is normally displayed in the current browser window,
unless you specify another target.
Example
Source Output
<p>Linking to W3Schools:
<a href="http://www.w3schools.com">
W3Schools</a>
</p>
<p>
Opening W3Schools a new browser window:
<a href="http://www.w3schools.com"
target="_blank">W3Schools</a>
</p>
Linking to W3Schools:
W3Schools
Opening W3Schools a new
browser window: W3Schools
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
c"arset character_encoding -%eci0ies t"e c"aracter encoding
o0 t"e target U#8
-!;
244386041.doc 48 od 221
coords if shape="rect" then
coords="left,top,right,bottom"
if shape="circ" then
coords="centerx,centery,radius"
if shape="poly" then
coords="x1,y1,x2,y2,..,xn,yn"
-%eci0ies t"e coordinates
a%%ro%riate to t"e s"a%e attri'ute
to de0ine a region o0 an image 0or
image ma%s
-!;
"re0 URL !"e target U#8 o0 t"e lin1 -!;
"re0lang language_code -%eci0ies t"e 'ase language o0 t"e
target U#8
-!;
name section_name Names an anc"or. Use t"is
attri'ute to create a 'oo1mar1 in a
document.
In future versions of
XHTML the name attribute
will be replaced by the id
attribute!!
-!;
rel alternate
designates
st$les"eet
start
ne&t
%re2
contents
inde&
glossar$
co%$rig"t
c"a%ter
section
su'section
a%%endi&
"el%
'oo1mar1
-%eci0ies t"e relations"i% 'et:een
t"e current document and t"e
target U#8
-!;
re2 alternate
designates
st$les"eet
start
ne&t
%re2
contents
inde&
glossar$
co%$rig"t
c"a%ter
-%eci0ies t"e relations"i% 'et:een
t"e target U#8 and t"e current
document
-!;
244386041.doc 49 od 221
section
su'section
a%%endi&
"el%
'oo1mar1
s"a%e rect
rectangle
circ
circle
%ol$
%ol$gon
/e0ines t"e t$%e o0 region to 'e
de0ined 0or ma%%ing in t"e current
area tag. Used :it" t"e coords
attri'ute.
-!;
target E'lan1
E%arent
Esel0
Eto%
Where to open the target
URL.
E'lan1 > t"e target U#8
:ill o%en in a ne: :indo:
Esel0 > t"e target U#8 :ill
o%en in t"e same 0rame as
it :as clic1ed
E%arent > t"e target U#8
:ill o%en in t"e %arent
0rameset
Eto% > t"e target U#8 :ill
o%en in t"e 0ull 'od$ o0 t"e
:indo:
!;
t$%e mime_tpe -%eci0ies t"e =+=3
@=ulti%ur%ose +nternet =ail
3&tensionsA t$%e o0 t"e target
U#8
-!;
HTML ;rames
With !rames6 you can )isplay more than one Web pa+e in the same
browser win)ow.
Examples
Vertical frameset
This example demonstrates how to make a vertical frameset with three different
documents.
<html>
244386041.doc 50 od 221
<frameset cols="25%,50%,25%">
<frame src="tryhtml_frame_a.htm">
<frame src="tryhtml_frame_b.htm">
<frame src="tryhtml_frame_c.htm">
</frameset>
</html>
Horizontal frameset
This example demonstrates how to make a horizontal frameset with three
different documents.
<html>
<frameset rows="25%,50%,25%">
<frame src="tryhtml_frame_a.htm">
<frame src="tryhtml_frame_b.htm">
<frame src="tryhtml_frame_c.htm">
</frameset>
</html>
How to use the <noframes> tag
This example demonstrates how to use the <noframes> tag.
(You can find more examples at the bottom of this page)
<html>
244386041.doc 51 od 221
<frameset cols="25%,50%,25%">
<frame src="tryhtml_frame_a.htm">
<frame src="tryhtml_frame_b.htm">
<frame src="tryhtml_frame_c.htm">
<noframes>
<body>Your browser does not
handle frames!</body>
</noframes>
</frameset>
</html>
;rames
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:
The web developer must keep track of more HTML documents
It is difficult to print the entire page
The ;rameset Ta+
The <frameset> tag defines how to divide the window into frames
Each frameset defines a set of rows or columns
The values of the rows/columns indicate the amount of screen area each
row/column will occupy
The ;rame Ta+
The <frame> tag defines what HTML document to put into each frame
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 HTML document "frame_a.htm" is put
244386041.doc 52 od 221
into the first column, and the HTML document "frame_b.htm" is put into the
second column:
<frameset #ols&)253(453)>
<frame sr#&)frame/a.htm)>
<frame sr#&)frame/b.htm)>
</frameset>
'asic 1otes " =se!ul Tips
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.
Add the <noframes> tag for browsers that do not support frames.
More Examples
Mixed frameset
This example demonstrates how to make a frameset with three documents, and
how to mix them in rows and columns.
<html>
<frameset rows="50%,50%">
<frame src="tryhtml_frame_a.htm">
<frameset cols="25%,75%">
<frame src="tryhtml_frame_b.htm">
<frame src="tryhtml_frame_c.htm">
</frameset>
</frameset>
</html>
Frameset with noresize="noresize"
This example demonstrates the noresize attribute. The frames are not resizable.
Move the mouse over the borders between the frames and notice that you can
not move the borders.
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="tryhtml_frame_a.htm">
244386041.doc 53 od 221
<frameset cols="25%,75%">
<frame noresize="noresize" src="tryhtml_frame_b.htm">
<frame noresize="noresize" src="tryhtml_frame_c.htm">
</frameset>
</frameset>
</html>
Navigation frame
This example demonstrates 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 ="tryhtml_frame_a.htm" target ="showframe">Frame a</a><br>
<a href ="tryhtml_frame_b.htm" target ="showframe">Frame b</a><br>
<a href ="tryhtml_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="tryhtml_frame_a.htm"
name="showframe">
</frameset>
</html>
Inline frame
This example demonstrates how to create an inline frame (a frame inside an
HTML page).
<html>
<body>
<iframe src="default.asp"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
244386041.doc 54 od 221
</html>
Jump to a specified section within a frame
This example demonstrates 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="tryhtml_frame_a.htm">
<frame src="link.htm#C10">
</frameset>
</html>
>tryhtmlM!rameMa.htm>
<html>
<body bgcolor="#8F8FBD">
<h3>Frame A</h3>
</body>
</html>
>lin-.htm >
<html>
<body>
<a name="C1"><h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<a name="C2"><h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
244386041.doc 55 od 221
<a name="C3"><h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<a name="C4"><h2>Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<a name="C5"><h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<a name="C6"><h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<a name="C7"><h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<a name="C8"><h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<a name="C9"><h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<a nameN>&9:>><h2>Chapter 10</h2></a>
<p>This chapter explains ba bla bla</p>
<a name="C11"><h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<a name="C12"><h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<a name="C13"><h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<a name="C14"><h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<a name="C15"><h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
244386041.doc 56 od 221
<a name="C16"><h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<a name="C17"><h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
Jump to a specified section with frame navigation
This example demonstrates 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>
>content.htm>
<html>
<body>
<a href ="link.htm" target ="showframe">Link without Anchor</a><br>
<a href ="link.htm#C10" target ="showframe">Link with Anchor</a>
</body>
</html>
>lin-.htm>
<html>
244386041.doc 57 od 221
<body>
<a name="C1"><h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<a name="C2"><h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<a name="C3"><h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<a name="C4"><h2>Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<a name="C5"><h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<a name="C6"><h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<a name="C7"><h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<a name="C8"><h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
244386041.doc 58 od 221
<a name="C9"><h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<a name="C10"><h2>Chapter 10</h2></a>
<p>This chapter explains ba bla bla</p>
<a name="C11"><h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<a name="C12"><h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<a name="C13"><h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<a name="C14"><h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<a name="C15"><h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<a name="C16"><h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<a name="C17"><h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
244386041.doc 59 od 221
</body>
</html>
;rame Ta+s
Ta+ %escription
<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
<iframe> Defines an inline sub window (frame)
The 3!rameset4 ta+
%e!inition an) =sa+e
The frameset element defines a frameset. It is used to organize multiple
windows (frames). Each frame holds a separate document. In its simplest
use, the frameset element states only how many columns or rows there
will be in the frameset. You must use the cols or the rows attribute.
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
1ote. If you want to validate a page containing frames, be sure the DTD
is set to "Frameset DTD". Read more about XHTML Validation.
1ote. Do not use the body element on a page containing frames. The
frames wont work if you do that.
Example
Source Output
(a "re0BC%lanets."tmC targetBCE'lan1C)6ie: t"is %age
0or t"e result(*a)
The source co)e in >planets.htm>.
6ie: t"is %age 0or t"e result
244386041.doc 60 od 221
<html>
<frameset cols = "25%, 25%,*">
<frame src ="venus.htm" />
<frame src ="sun.htm" />
<frame src ="mercur.htm" />
</frameset>
</html>
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
cols %i&els
F
G
/e0ines t"e num'er and si.e o0 columns in a
0rameset
;
ro:s %i&els
F
G
/e0ines t"e num'er and si.e o0 ro:s in a 0rameset ;
The 3!rame4 ta+
%e!inition an) =sa+e
Defines a sub window (a frame).
%i!!erences 'etween HTML an) 8HTML
In HTML the <frame> tag has no end tag.
In XHTML the <frame> tag must be properly closed.
Tips an) 1otes
1ote. If you want to validate a page containing frames, be sure the DTD
is set to "Frameset DTD". Read more about XHTML Validation.
1ote. Do not use the body element on a page containing frames. The
frames wont work if you do that.
244386041.doc 61 od 221
Example
Source Output
(a "re0BC%lanets."tmC targetBCE'lan1C)6ie:
t"is %age 0or t"e result(*a)
The source co)e in
>planets.htm>.
<html>
<frameset cols = "25%, 25%,*">
<frame src ="venus.htm" />
<frame src ="sun.htm" />
<frame src ="mercur.htm" />
</frameset>
</html>
6ie: t"is %age 0or t"e result
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
0rame'order 0
1
-%eci0ies :"et"er or not to dis%la$ 'order around
t"e 0rame
;
longdesc U#8 9 U#8 to a long descri%tion o0 t"e 0rame contents.
Use it 0or 'ro:sers t"at do not su%%ort 0rames
;
margin"eig"t %i&els /e0ines t"e to% and 'ottom margins in t"e 0rame ;
margin:idt" %i&els /e0ines t"e le0t and rig"t margins in t"e 0rame ;
name 0rameEname /e0ines a unique name 0or t"e 0rame @to use in
scri%tsA
;
noresi.e noresi.e W"en set to noresi.e t"e user cannot resi.e t"e
0rame
;
scrolling $es
no
auto
/etermines scroll'ar action ;
src U#8 /e0ines t"e U#8 o0 t"e 0ile to s"o: in t"e 0rame ;
The 3i!rame4 ta+
244386041.doc 62 od 221
%e!inition an) =sa+e
The iframe element creates an inline frame that contains another
document.
%i!!erences 'etween HTML an) 8HTML
NONE
Example
Source Output
(i0rame
src BC*de0ault.as%C)
(*i0rame)
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
align le0t
rig"t
to%
middle
'ottom
-%eci0ies "o: to align t"e i0rame according to t"e
surrounding te&t
!;
0rame'order 1
0
-%eci0ies :"et"er or not to dis%la$ a 0rame 'order !;
"eig"t %i&els
F
/e0ines t"e "eig"t o0 t"e i0rame !;
longdesc U#8 9 U#8 to a long descri%tion o0 t"e 0rame contents !;
margin"eig"t %i&els /e0ines t"e to% and 'ottom margins o0 t"e i0rame !;
margin:idt" %i&els /e0ines t"e le0t and rig"t margins o0 t"e i0rame !;
name 0rameEname -%eci0ies a unique name o0 t"e i0rame @to use in
scri%tsA
!;
scrolling $es
no
auto
/e0ine scroll 'ars !;
src U#8 !"e U#8 o0 t"e document to s"o: in t"e i0rame !;
244386041.doc 63 od 221
:idt" %i&els
F
/e0ines t"e :idt" o0 t"e i0rame !;
The 3no!rames4 ta+
%e!inition an) =sa+e
The noframes element displays text for browsers that do not handle
frames. The noframes element goes inside the frameset element.
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
1ote. If a browser handles frames, it will not display the text in the
noframes element.
1ote. If you want to validate a page containing frames, be sure the DTD
is set to "Frameset DTD". Read more about XHTML Validation.
1ote. The <noframes> tag are not allowed in XHTML 1.0 Strict DTD.
Example
<frameset cols = "25%, 25%,*">
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
<frame src ="venus.htm" />
<frame src ="sun.htm" />
<frame src ="mercur.htm" />
</frameset>
HTML Tables
With HTML you can create tables.
244386041.doc 64 od 221
Examples
Tables
This example demonstrates how to create tables in an HTML document.
<html>
<body>
<p>
Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>One row and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
244386041.doc 65 od 221
</tr>
</table>
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Each table starts with a table tag. Each table row starts with a tr tag. Each
table data starts with a td tag.
One column:
100
One row and three columns:
100 200 300
244386041.doc 66 od 221
Two rows and three columns:
100 200 300
400 500 600
Table borders
This example demonstrates different table borders.
(You can find more examples at the bottom of this page)
<html>
<body>
<h4>With a normal border:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With a thick border:</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
244386041.doc 67 od 221
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With a very thick border:</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
With a normal border:
;irst #o:
-econd #o:
With a thick border:
;irst #o:
-econd #o:
244386041.doc 68 od 221
With a very thick border:
;irst #o:
-econd #o:
Tables
Tables are defined with the <table> tag. A table is divided into rows (with the
<tr> tag), and each row is divided into data cells (with the <td> tag). The
letters td stands for "table data," which is the content of a data cell. A data cell
can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
<table border&)1)>
<tr>
<td>row 1( #ell 1</td>
<td>row 1( #ell 2</td>
</tr>
<tr>
<td>row 2( #ell 1</td>
<td>row 2( #ell 2</td>
</tr>
</table>
How it looks in a browser:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
Tables an) the 'or)er (ttribute
If you do not specify a border attribute the table will be displayed without any
borders. Sometimes this can be useful, but most of the time, you want the
borders to show.
To display a table with borders, you will have to use the border attribute:
<table border&)1)>
<tr>
<td>5ow 1( #ell 1</td>
<td>5ow 1( #ell 2</td>
</tr>
</table>
Hea)in+s in a Table
Headings in a table are defined with the <th> tag.
<table border&)1)>
<tr>
<th>6eading</th>
<th>7nother 6eading</th>
244386041.doc 69 od 221
</tr>
<tr>
<td>row 1( #ell 1</td>
<td>row 1( #ell 2</td>
</tr>
<tr>
<td>row 2( #ell 1</td>
<td>row 2( #ell 2</td>
</tr>
</table>
How it looks in a browser:
Hea)in+ (nother Hea)in+
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
Empty &ells in a Table
Table cells with no content are not displayed very well in most browsers.
<table border&)1)>
<tr>
<td>row 1( #ell 1</td>
<td>row 1( #ell 2</td>
</tr>
<tr>
<td>row 2( #ell 1</td>
<td></td>
</tr>
</table>
How it looks in a browser:
row 1, cell 1 row 1, cell 2
row 2, cell 1
Note that the borders around the empty table cell are missing.
To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make
the borders visible:
<table border&)1)>
<tr>
<td>row 1( #ell 1</td>
<td>row 1( #ell 2</td>
</tr>
<tr>
<td>row 2( #ell 1</td>
<td>8nbsp9</td>
</tr>
</table>
How it looks in a browser:
row 1, cell 1 row 1, cell 2
row 2, cell 1
244386041.doc 70 od 221
'asic 1otes " =se!ul Tips
The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad
browser support. Expect this to change in future versions of XHTML. If you have
Internet Explorer 5.0 or newer, you can view a working example in our XML
tutorial.
More Examples
Table with no border
This example demonstrates a table with no borders.
<html>
<body>
<h4>This table has no borders:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>And this table has no borders:</h4>
<table border="0">
244386041.doc 71 od 221
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
This table has no borders:
100 200 300
400 500 600
And this table has no borders:
100 200 300
400 500 600
Headings in a table
This example demonstrates how to display table headers.
<html>
<body>
<h4>Table headers:</h4>
<table border="1">
244386041.doc 72 od 221
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
244386041.doc 73 od 221
</table>
</body>
</html>
Table headers:
Name Telepone Telepone
,ill Hates 555 77 854 555 77 855
Vertical headers:
!irst Name" ,ill Hates
Telepone" 555 77 854
Telepone" 555 77 855
Empty cells
This example demonstrates how to use "&nbsp;" to handle cells that have no
content.
<html>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>
244386041.doc 74 od 221
<p>
As you can see, one of the cells has no border. That is because it is empty. Try to
insert a space in the cell. Still it has no border.
</p>
<p>
The trick is to insert a no-breaking space in the cell.
</p>
<p>No-breaking space is a character entity. If you don't know what a character
entity is, read the chapter about it.
</p>
<p>The no-breaking space entity starts with an ampersand ("&"),
then the letters "nbsp", and ends with a semicolon (";")
</p>
<p>
</p>
</body>
</html>
-ome te&t -ome te&t
-ome te&t
As you can see, one of the cells has no border. That is because it is empty.
Try to insert a space in the cell. Still it has no border.
The trick is to insert a no-breaking space in the cell.
244386041.doc 75 od 221
No-breaking space is a character entity. If you don't know what a
character entity is, read the chapter about it.
The no-breaking space entity starts with an ampersand ("&"), then the
letters "nbsp", and ends with a semicolon (";")
Table with a caption
This example demonstrates a table with a caption.
<html>
<body>
<h4>
This table has a caption,
and a thick border:
</h4>
<table border="6">
<caption>My Caption</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
244386041.doc 76 od 221
</table>
</body>
</html>
This table has a caption and a thick border:
=$ 4a%tion
100 200 300
400 500 600
Table cells that span more than one row/column
This example demonstrates how to define table cells that span more than one
row or one column.
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
244386041.doc 77 od 221
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
!ell that spans two columns:
Name Telepone
,ill Hates 555 77 854 555 77 855
!ell that spans two rows:
!irst Name" ,ill Hates
Telepone"
555 77 854
555 77 855
Tags inside a table
This example demonstrates how to display elements inside other elements.
244386041.doc 78 od 221
<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
244386041.doc 79 od 221
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
This is a paragraph
This is another paragraph
!"is cell contains a ta'le
9 ,
4 /
!"is cell contains a list
a%%les
'ananas
%inea%%les
H388I
Cell padding
This example demonstrates how to use cellpadding to create more white space
between the cell content and its borders.
<html>
<body>
<h4>Without cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
244386041.doc 80 od 221
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Without cellpadding:
;irst #o:
-econd #o:
With cellpadding:
244386041.doc 81 od 221
;irst #o:
-econd #o:
Cell spacing
This example demonstrates how to use cellspacing to increase the distance
between the cells.
<html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing:</h4>
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
244386041.doc 82 od 221
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Without cellspacing:
;irst #o:
-econd #o:
With cellspacing:
;irst #o:
-econd #o:
Add a background color or a background image to a table
This example demonstrates how to add a background to a table.
<html>
<body>
<h4>A background color:</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
244386041.doc 83 od 221
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>A background image:</h4>
<table border="1"
background="/images/bgdesert.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
A background color:
;irst #o:
-econd #o:
A background image:
244386041.doc 84 od 221
;irst #o:
-econd #o:
Add a background color or a background image to a table cell
This example demonstrates how to add a background to one or more table cells.
<html>
<body>
<h4>Cell backgrounds:</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="/images/bgdesert.jpg">
Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
!ell backgrounds:
;irst #o:
-econd #o:
244386041.doc 85 od 221
Align the content in a table cell
This example demonstrates how to use the "align" attribute to align the content
of cells, to create a "nice-looking" table.
<html>
<body>
<table width="400" border="1">
<tr>
<th align="left">Money spent on....</th>
<th align="right">January</th>
<th align="right">February</th>
</tr>
<tr>
<td align="left">Clothes</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">Make-Up</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">Food</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
244386041.doc 86 od 221
<tr>
<th align="left">Sum</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>
#one$ spent on%%%% &anuar$ !ebruar$
4lot"es J241.10 J50.20
=a1e>U% J30.00 J44.45
;ood J730.40 J650.00
Sum '())(%*) '+,,%-*
The frame attribute
This example demonstrates how to use the "frame" attribute to control the
borders around the table.
<html>
<body>
<p>
If you see no frames around the tables in these examples, your browser is too
old, or does not support it.
</p>
<h4>With frame="border":</h4>
<table frame="border">
<tr>
<td>First</td>
244386041.doc 87 od 221
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="box":</h4>
<table frame="box">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="void":</h4>
<table frame="void">
<tr>
<td>First</td>
<td>Row</td>
</tr>
244386041.doc 88 od 221
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="above":</h4>
<table frame="above">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="below":</h4>
<table frame="below">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
244386041.doc 89 od 221
<td>Row</td>
</tr>
</table>
<h4>With frame="hsides":</h4>
<table frame="hsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="vsides":</h4>
<table frame="vsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
244386041.doc 90 od 221
</table>
<h4>With frame="lhs":</h4>
<table frame="lhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="rhs":</h4>
<table frame="rhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
244386041.doc 91 od 221
</body>
</html>
If you see no frames around the tables in these examples, your browser is
too old, or does not support it.
With "rame#$border$:
;irst #o:
-econd #o:
With "rame#$bo%$:
;irst #o:
-econd #o:
With "rame#$void$:
;irst #o:
-econd #o:
With "rame#$above$:
;irst #o:
-econd #o:
With "rame#$below$:
;irst #o:
-econd #o:
With "rame#$hsides$:
;irst #o:
-econd #o:
With "rame#$vsides$:
;irst #o:
-econd #o:
With "rame#$lhs$:
;irst #o:
-econd #o:
With "rame#$rhs$:
244386041.doc 92 od 221
;irst #o:
-econd #o:
Table Ta+s
Ta+ %escription
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer
The 3table4 ta+
%e!inition an) =sa+e
The <table> tag defines a table. Inside a <table> tag you can put table
headers, table rows, table cells, and other tables.
%i!!erences 'etween HTML an) 8HTML
The "align" and "bgcolor" attributes of the table element were deprecated
in HTML 4.01.
The "align" and "bgcolor" attributes of the table element are not supported
in XHTML 1.0 Strict DTD.
Example
Source Output
(ta'le 'order B C1C)
(tr)
(td)4ell 9(*td)
(td)4ell ,(*td)
(*tr)
(*ta'le)
4ell 9 4ell ,
244386041.doc 93 od 221
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
align le0t
center
rig"t
9ligns t"e ta'le. /e%recated. Use st$les instead. !;
'gcolor rg'@&?&?&A
K&&&&&&
colorname
-%eci0ies t"e 'ac1ground color o0 t"e ta'le.
/e%recated. Use st$les instead.
!;
'order %i&els -%eci0ies t"e 'order :idt".
Tip. Set border="0" to display tables
with no borders!
-!;
cell%adding %i&els
F
-%eci0ies t"e s%ace 'et:een t"e cell :alls and
contents
-!;
cells%acing %i&els
F
-%eci0ies t"e s%ace 'et:een cells -!;
0rame 2oid
a'o2e
'elo:
"sides
l"s
r"s
2sides
'o&
'order
-%eci0ies "o: t"e outer 'orders s"ould 'e
dis%la$ed.
1ote. Must be used in conjunction with
the "border" attribute!
-!;
rules none
grou%s
ro:s
cols
all
-%eci0ies t"e "ori.ontal*2ertical di2ider lines.
1ote. Must be used in conjunction with
the "border" attribute!
-!;
summar$ te&t -%eci0ies a summar$ o0 t"e ta'le 0or s%eec">
s$nt"esi.ing*non>2isual 'ro:sers
-!;
:idt" F
%i&els
-%eci0ies t"e :idt" o0 t"e ta'le -!;
The 3th4 ta+
244386041.doc 94 od 221
%e!inition an) =sa+e
Defines a table header cell in a table. The text within the th element
usually renders in bold.
%i!!erences 'etween HTML an) 8HTML
The "bgcolor", "height", "width", and "nowrap" attributes of the th element
were deprecated in HTML 4.01.
The "bgcolor", "height", "width", and "nowrap" attributes of the th element
are not supported in XHTML 1.0 Strict DTD.
Example
Source Output
(ta'le 'order B C1C)
(tr)
(t")Header 1(*t")
(t")Header 2(*t")
(*tr)
(tr)
(td)4ell 9(*td)
(td)4ell ,(*td)
(*tr)
(*ta'le)
.eader ( .eader /
4ell 9 4ell ,
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
a''r a''rEte&t -%eci0ies an a''re2iated 2ersion o0 t"e content in a
cell
-!;
align le0t
rig"t
center
Lusti0$
c"ar
-%eci0ies t"e "ori.ontal alignment o0 cell content -!;
a&is categor$Enames /e0ines a name 0or a cell -!;
'gcolor rg'@&?&?&A
K&&&&&&
colorname
-%eci0ies t"e 'ac1ground color o0 t"e ta'le cell.
/e%recated. Use st$les instead.
!;
244386041.doc 95 od 221
c"ar c"aracter -%eci0ies :"ic" c"aracter to align te&t on.
1ote. Only used if align="char"!
-!;
c"aro00 %i&els
F
-%eci0ies t"e alignment o00set to t"e 0irst c"aracter
to align on.
1ote. Only used if align="char"!
-!;
cols%an num'er +ndicates t"e num'er o0 columns t"is cell s"ould
s%an
-!;
"eaders "eaderEcellsMEid 9 s%ace>se%arated list o0 cell +/s t"at su%%l$
"eader in0ormation 0or t"e cell. !"is attri'ute
allo:s te&t>onl$ 'ro:sers to render t"e "eader
in0ormation 0or a gi2en cell
-!;
"eig"t %i&els -%eci0ies t"e "eig"t o0 t"e ta'le cell. /e%recated.
Use st$les instead.
!;
no:ra% no:ra% W"et"er to disa'le or ena'le automatic te&t
:ra%%ing in t"is cell. /e%recated. Use st$les
instead.
!;
ro:s%an num'er +ndicates t"e num'er o0 ro:s t"is cell s"ould s%an -!;
sco%e col
colgrou%
ro:
ro:grou%
-%eci0ies i0 t"is cell %ro2ides "eader in0ormation
0or t"e rest o0 t"e ro: t"at contains it @ro:A? or 0or
t"e rest o0 t"e column @colA? or 0or t"e rest o0 t"e
ro: grou% t"at contains it @ro:grou%A? or 0or t"e
rest o0 t"e column grou% t"at contains it
-!;
2align to%
middle
'ottom
'aseline
-%eci0ies t"e 2ertical alignment o0 cell content -!;
:idt" %i&els
F
-%eci0ies t"e :idt" o0 t"e ta'le cell. /e%recated.
Use st$les instead.
!;
The 3t)4 ta+
%e!inition an) =sa+e
Defines a cell in a table.
%i!!erences 'etween HTML an) 8HTML
The "bgcolor", "height", "width", and "nowrap" attributes of the td element
were deprecated in HTML 4.01.
244386041.doc 96 od 221
The "bgcolor", "height", "width", and "nowrap" attributes of the td element
are not supported in XHTML 1.0 Strict DTD.
Example
Source Output
(ta'le 'order B C1C)
(tr)
(td)4ell 9(*td)
(td)4ell ,(*td)
(*tr)
(*ta'le)
4ell 9 4ell ,
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
a''r a''rEte&t -%eci0ies an a''re2iated 2ersion o0 t"e content in a
cell
-!;
align le0t
rig"t
center
Lusti0$
c"ar
-%eci0ies t"e "ori.ontal alignment o0 cell content -!;
a&is categor$Enames /e0ines a name 0or a cell -!;
'gcolor rg'@&?&?&A
K&&&&&&
colorname
-%eci0ies t"e 'ac1ground color o0 t"e ta'le cell.
/e%recated. Use st$les instead.
!;
c"ar c"aracter -%eci0ies :"ic" c"aracter to align te&t on.
1ote. Only used if align="char"!
-!;
c"aro00 %i&els
F
-%eci0ies t"e alignment o00set to t"e 0irst c"aracter
to align on.
1ote. Only used if align="char"!
-!;
cols%an num'er +ndicates t"e num'er o0 columns t"is cell s"ould
s%an
-!;
"eaders "eaderEcellsMEid 9 s%ace>se%arated list o0 cell +/s t"at su%%l$
"eader in0ormation 0or t"e cell. !"is attri'ute
allo:s te&t>onl$ 'ro:sers to render t"e "eader
-!;
244386041.doc 97 od 221
in0ormation 0or a gi2en cell
"eig"t %i&els -%eci0ies t"e "eig"t o0 t"e ta'le cell. /e%recated.
Use st$les instead.
!;
no:ra% no:ra% W"et"er to disa'le or ena'le automatic te&t
:ra%%ing in t"is cell. /e%recated. Use st$les
instead.
!;
ro:s%an num'er +ndicates t"e num'er o0 ro:s t"is cell s"ould s%an -!;
sco%e col
colgrou%
ro:
ro:grou%
-%eci0ies i0 t"is cell %ro2ides "eader in0ormation
0or t"e rest o0 t"e ro: t"at contains it @ro:A? or 0or
t"e rest o0 t"e column @colA? or 0or t"e rest o0 t"e
ro: grou% t"at contains it @ro:grou%A? or 0or t"e
rest o0 t"e column grou% t"at contains it
-!;
2align to%
middle
'ottom
'aseline
-%eci0ies t"e 2ertical alignment o0 cell content -!;
:idt" %i&els
F
-%eci0ies t"e :idt" o0 t"e ta'le cell. /e%recated.
Use st$les instead.
!;
The 3tr4 ta+
%e!inition an) =sa+e
Defines a row in a table.
%i!!erences 'etween HTML an) 8HTML
The "bgcolor" attribute of the tr element were deprecated in HTML 4.01.
The "bgcolor" attribute of the tr element are not supported in XHTML 1.0
Strict DTD.
Example
Source Output
(ta'le 'order B C1C)
(tr)
(td)4ell 9(*td)
(td)4ell ,(*td)
(*tr)
(*ta'le)
4ell 9 4ell ,
244386041.doc 98 od 221
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
align rig"t
le0t
center
Lusti0$
c"ar
/e0ines t"e te&t alignment in cells -!;
'gcolor rg'@&?&?&A
K&&&&&&
colorname
-%eci0ies t"e 'ac1ground color o0 t"e ta'le cell.
/e%recated. Use st$les instead.
!;
c"ar c"aracter -%eci0ies :"ic" c"aracter to align te&t on.
1ote. Only used if align="char"!
-!;
c"aro00 %i&els
F
-%eci0ies t"e alignment o00set to t"e 0irst c"aracter
to align on.
1ote. Only used if align="char"!
-!;
2align to%
middle
'ottom
'aseline
-%eci0ies t"e 2ertical te&t alignment in cells -!;
The 3caption4 ta+
%e!inition an) =sa+e
This element defines a table caption. The <caption> tag must be inserted
immediately after the <table> tag. You can specify only one caption per
table. Usually the caption will be centered above the table.
%i!!erences 'etween HTML an) 8HTML
The "align" attribute of the caption element was deprecated in HTML 4.01.
The "align" attribute of the caption element is not supported in XHTML 1.0
Strict DTD.
Example
244386041.doc 99 od 221
Source Output
<table border="1">
<caption>This is a
caption</caption>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
!"is is a ca%tion
4ell 1 4ell 2
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
align le0t
rig"t
to%
'ottom
Ho: to align t"e ca%tion. /e%recated. Use st$les
instead.
!;
The 3col+roup4 ta+
%e!inition an) =sa+e
Defines groups of table columns. With this element, you can group
columns for formatting. This element is only valid inside the <table> tag.
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
1ote. The colgroup element is an empty element that contains attributes
only. To create columns, you must specify td elements within a tr element.
Example
244386041.doc 100 od 221
This example creates a table with four columns, with the first three
columns in one colgroup, and the last column in the second colgroup:
Source Output
(ta'le 'orderBC1C)
(colgrou% s%anBC3C
st$leBCcolorK;;0000NC)
(*colgrou%)
(tr)
(td)1(*td)
(td)2(*td)
(td)3(*td)
(td)4(*td)
(*tr)
(*ta'le)
1 2 3 4
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
align rig"t
le0t
center
Lusti0$
c"ar
/e0ines t"e "ori.ontal alignment o0 t"e contents in
t"e column grou%
-!;
c"ar c"aracter /e0ines a c"aracter to use to align te&t on @use
:it" alignBCc"arCA
-!;
c"aro00 %i&els
F
/e0ines an alignment o00set to t"e 0irst c"aracter to
align on? as set :it" c"ar
-!;
s%an num'er /e0ines t"e num'er o0 columns t"e (colgrou%)
s"ould s%an
-!;
2align to%
middle
'ottom
'aseline
/e0ines t"e 2ertical alignment o0 t"e contents in
t"e column grou%
-!;
:idt" F
%i&els
relati2eElengt"
/e0ines t"e :idt" o0 t"e column grou%.
1ote. The width attribute can be
overridden by settings in <col>!
-!;
The 3col4 ta+
244386041.doc 101 od 221
%e!inition an) =sa+e
Defines the attribute values for one or more columns in a table. You can
only use this element inside a colgroup. Use this element when you want
to specify different attribute values to a column inside a colgroup. Without
a col element a column will inherit all its attribute values from the column
group.
%i!!erences 'etween HTML an) 8HTML
In HTML the <col> tag has no end tag.
In XHTML the <col> tag must be properly closed.
Tips an) 1otes
1ote. The col element is an empty element that contains attributes only.
To create columns, you must specify td elements within a tr element.
Example
Source Output
!"is e&am%le s"o:s a colgrou% t"at "as t"ree
columns o0 di00erent :idt"s
(ta'le 'orderBC1C)
(colgrou% s%anBC3C)
(col :idt"BC20C)(*col)
(col :idt"BC50C)(*col)
(col :idt"BC80C)(*col)
(*colgrou%)
(tr)
(td)1(*td)
(td)2(*td)
(td)3(*td)
(td)4(*td)
(*tr)
(*ta'le)
!"is e&am%le s"o:s a colgrou% t"at "as t"ree
columns o0 di00erent :idt"s
1 2 3 4
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
244386041.doc 102 od 221
align rig"t
le0t
center
Lusti0$
c"ar
/e0ines t"e "ori.ontal alignment o0 t"e content in
t"e ta'le cell? in t"e column
-!;
c"ar c"aracter /e0ines a c"aracter to use to align te&t on @use
:it" alignBCc"arCA
-!;
c"aro00 %i&els
F
/e0ines an alignment o00set to t"e 0irst c"aracter to
align on? as set :it" c"ar
-!;
s%an num'er /e0ines t"e num'er o0 columns t"e (col) s"ould
s%an
-!;
2align to%
middle
'ottom
'aseline
/e0ines t"e 2ertical alignment o0 t"e content in t"e
ta'le cell? in t"e column
-!;
:idt" F
%i&els
relati2eElengt"
/e0ines t"e :idt" o0 t"e column.
1ote. Overrides the width set in
<colgroup>
-!;
The 3thea)4 ta+
%e!inition an) =sa+e
Defines a table header.
The thead, tfoot and tbody elements enables you to group rows in a table.
When you create a table, you might want to have a header row, some
rows with data, and a row with totals at bottom. This division enables
browsers to support scrolling of table bodies independently of the table
header and footer. When long tables are printed, the table header and
footer information may be repeated on each page that contains table data.
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
1ote. The <thead> must have a <tr> tag inside!
1ote. If you use the thead, tfoot and tbody elements, you must use every
element. They should appear in this order: <thead>, <tfoot> and
244386041.doc 103 od 221
<tbody>, so that browsers can render the foot before receiving all the
data. You must use these tags within the table element.
1ote. The <thead>,<tbody> and <tfoot> elements are seldom used,
because of bad browser support. Expect this to change in future versions
of XHTML. If you have Internet Explorer 5.0 or newer, you can view an
example in our XML tutorial.
Example
Source Output
(ta'le 'order B C1C)
(t"ead)
(tr)
(td)!"is te&t is in t"e !H39/(*td)
(*tr)
(*t"ead)
(t0oot)
(tr)
(td)!"is te&t is in t"e !;II!(*td)
(*tr)
(*t0oot)
(t'od$)
(tr)
(td)!"is te&t is in t"e !,I/<(*td)
(*tr)
(*t'od$)
(*ta'le)
!"is te&t is in t"e !H39/
!"is te&t is in t"e !;II!
!"is te&t is in t"e !,I/<
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
align rig"t
le0t
center
Lusti0$
c"ar
/e0ines t"e te&t alignment in cells -!;
c"ar c"aracter -%eci0ies :"ic" c"aracter to align te&t on.
1ote. Only used if align="char"!
-!;
c"aro00 %i&els
F
-%eci0ies t"e alignment o00set to t"e 0irst c"aracter
to align on.
-!;
244386041.doc 104 od 221
1ote. Only used if align="char"!
2align to%
middle
'ottom
'aseline
-%eci0ies t"e 2ertical te&t alignment in cells
The 3tbo)y4 ta+
%e!inition an) =sa+e
Defines a table body.
The thead, tfoot and tbody elements enables you to group rows in a table.
When you create a table, you might want to have a header row, some
rows with data, and a row with totals at bottom. This division enables
browsers to support scrolling of table bodies independently of the table
header and footer. When long tables are printed, the table header and
footer information may be repeated on each page that contains table data.
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
1ote. The <tbody> must have a <tr> tag inside!
1ote. If you use the thead, tfoot and tbody elements, you must use every
element. They should appear in this order: <thead>, <tfoot> and
<tbody>, so that browsers can render the foot before receiving all the
data. You must use these tags within the table element.
1ote. The <thead>,<tbody> and <tfoot> elements are seldom used,
because of bad browser support. Expect this to change in future versions
of XHTML. If you have Internet Explorer 5.0 or newer, you can view an
example in our XML tutorial.
Example
Source Output
(ta'le 'order B C1C)
(t"ead)
(tr)
(td)!"is te&t is in t"e !H39/(*td)
!"is te&t is in t"e !H39/
!"is te&t is in t"e !;II!
!"is te&t is in t"e !,I/<
244386041.doc 105 od 221
(*tr)
(*t"ead)
(t0oot)
(tr)
(td)!"is te&t is in t"e !;II!(*td)
(*tr)
(*t0oot)
(t'od$)
(tr)
(td) !"is te&t is in t"e !,I/<(*td)
(*tr)
(*t'od$)
(*ta'le)
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
align rig"t
le0t
center
Lusti0$
c"ar
/e0ines t"e te&t alignment in cells -!;
c"ar c"aracter -%eci0ies :"ic" c"aracter to align te&t on.
1ote. Only used if align="char"!
-!;
c"aro00 %i&els
F
-%eci0ies t"e alignment o00set to t"e 0irst c"aracter
to align on.
1ote. Only used if align="char"!
-!;
2align to%
middle
'ottom
'aseline
-%eci0ies t"e 2ertical te&t alignment in cells -!;
The 3t!oot4 ta+
%e!inition an) =sa+e
Defines a table footer.
244386041.doc 106 od 221
The thead, tfoot and tbody elements enables you to group rows in a table.
When you create a table, you might want to have a header row, some
rows with data, and a row with totals at bottom. This division enables
browsers to support scrolling of table bodies independently of the table
header and footer. When long tables are printed, the table header and
footer information may be repeated on each page that contains table data.
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
1ote. The <tfoot> must have a <tr> tag inside!
1ote. If you use the thead, tfoot and tbody elements, you must use every
element. They should appear in this order: <thead>, <tfoot> and
<tbody>, so that browsers can render the foot before receiving all the
data. You must use these tags within the table element.
1ote. The <thead>,<tbody> and <tfoot> elements are seldom used,
because of bad browser support. Expect this to change in future versions
of XHTML. If you have Internet Explorer 5.0 or newer, you can view an
example in our XML tutorial.
Examples
Source Output
(ta'le 'order B C1C)
(t"ead)
(tr)
(td)!"is te&t is in t"e !H39/(*td)
(*tr)
(*t"ead)
(t0oot)
(tr)
(td)!"is te&t is in t"e !;II!(*td)
(*tr)
(*t0oot)
(t'od$)
(tr)
(td)!"is te&t is in t"e !,I/<(*td)
(*tr)
(*t'od$)
(*ta'le)
!"is te&t is in t"e !H39/
!"is te&t is in t"e !;II!
!"is te&t is in t"e !,I/<
244386041.doc 107 od 221
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
align rig"t
le0t
center
Lusti0$
c"ar
/e0ines t"e te&t alignment in cells -!;
c"ar c"aracter -%eci0ies :"ic" c"aracter to align te&t on.
1ote. Only used if align="char"!
-!;
c"aro00 %i&els
F
-%eci0ies t"e alignment o00set to t"e 0irst c"aracter
to align on.
1ote. Only used if align="char"!
-!;
2align to%
middle
'ottom
'aseline
-%eci0ies t"e 2ertical te&t alignment in cells -!;
HTML Lists
HTML supports or)ere)6 unor)ere) an) )e!inition lists.
Examples
An unordered list
This example demonstrates an unordered list.
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
244386041.doc 108 od 221
<li>Milk</li>
</ul>
</body>
</html>
An &nordered 'ist:
4o00ee
!ea
=il1
An ordered list
This example demonstrates an ordered list.
(You can find more examples at the bottom of this page)
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
An Ordered 'ist:
1. 4o00ee
2. !ea
3. =il1
244386041.doc 109 od 221
=nor)ere) Lists
An unordered list is a list of items. The list items are marked with bullets
(typically small black circles).
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<*l>
<li>:offee</li>
<li>;il</li>
</*l>
Here is how it looks in a browser:
Coffee
Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists,
etc.
Ar)ere) Lists
An ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol>
<li>:offee</li>
<li>;il</li>
</ol>
Here is how it looks in a browser:
1. Coffee
2. Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists,
etc.
%e!inition Lists
A definition list is not a list of items. This is a list of terms and explanation of the
terms.
A definition list starts with the <dl> tag. Each definition-list term starts with the
<dt> tag. Each definition-list definition starts with the <dd> tag.
<dl>
<dt>:offee</dt>
<dd><la# hot drin</dd>
<dt>;il</dt>
<dd>-hite #old drin</dd>
</dl>
Here is how it looks in a browser:
Coffee
Black hot drink
Milk
244386041.doc 110 od 221
White cold drink
Inside a definition-list definition (the <dd> tag) you can put paragraphs, line
breaks, images, links, other lists, etc.
More Examples
Different types of ordered lists
This example demonstrates different types of ordered lists.
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
244386041.doc 111 od 221
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
(umbered list:
1. 9%%les
244386041.doc 112 od 221
2. ,ananas
3. 8emons
4. Iranges
'etters list:
9. 9%%les
,. ,ananas
4. 8emons
/. Iranges
'owercase letters list:
a. 9%%les
'. ,ananas
c. 8emons
d. Iranges
)oman numbers list:
+. 9%%les
++. ,ananas
+++. 8emons
+6. Iranges
'owercase )oman numbers list:
i. 9%%les
ii. ,ananas
iii. 8emons
i2. Iranges
Different types of unordered Lists
This example demonstrates different types of unordered lists.
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
244386041.doc 113 od 221
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
*isc bullets list:
9%%les
,ananas
8emons
Iranges
244386041.doc 114 od 221
!ircle bullets list:
o 9%%les
o ,ananas
o 8emons
o Iranges
+,uare bullets list:
9%%les
,ananas
8emons
Iranges
Nested list
This example demonstrates how you can nest lists.
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
244386041.doc 115 od 221
</html>
A nested 'ist:
4o00ee
!ea
o ,lac1 tea
o Hreen tea
=il1
Nested list 2
This example demonstrates a more complicated nested list.
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
244386041.doc 116 od 221
</ul>
</body>
</html>
A nested 'ist:
4o00ee
!ea
o ,lac1 tea
o Hreen tea
4"ina
90rica
=il1
Definition list
This example demonstrates a definition list.
<html>
<body>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
A *e-nition 'ist:
244386041.doc 117 od 221
4o00ee
,lac1 "ot drin1
=il1
W"ite cold drin1
List Ta+s
Ta+ %escription
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines a definition term
<dd> Defines a definition description
<dir> Deprecated. Use <ul> instead
<menu> Deprecated. Use <ul> instead
The 3ol4 ta+
%e!inition an) =sa+e
The <ol> tag defines the start of an ordered list.
%i!!erences 'etween HTML an) 8HTML
The "compact", "start" and "type" attributes of the ol element were
deprecated in HTML 4.01.
The "compact", "start" and "type" attributes of the ol element are not
supported in XHTML 1.0 Strict DTD.
Tips an) 1otes
Tip. Use styles to define the type of list.
Example
Source Output
(ol)
(li)4o00ee(*li)
1. 4o00ee
244386041.doc 118 od 221
(li)!ea(*li)
(*ol)
2. !ea
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
com%act com%actErendering /e%recated. Use st$les instead !;
start startEonEnum'er -%eci0ies t"e num'er to start on. /e%recated. Use
st$les instead
!;
t$%e 9
a
+
i
1
-%eci0ies t"e t$%e o0 t"e list. /e%recated. Use
st$les instead
!;
The 3ul4 ta+
%e!inition an) =sa+e
The <ul> tag defines an unordered list.
%i!!erences 'etween HTML an) 8HTML
The "compact" and "type" attributes of the ul element were deprecated in
HTML 4.01.
The "compact" and "type" attributes of the ul element are not supported
in XHTML 1.0 Strict DTD.
Tips an) 1otes
Tip. Use styles to define the type of list.
Example
Source Output
(ul)
(li)4o00ee(*li)
4o00ee
244386041.doc 119 od 221
(li)!ea(*li)
(*ul)
!ea
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
com%act com%actErendering /e%recated. Use st$les instead !;
t$%e disc
square
circle
-%eci0ies t"e t$%e o0 t"e list. /e%recated. Use
st$les instead
!;
The 3li4 ta+
%e!inition an) =sa+e
The <li> tag defines the start of a list item. The <li> tag is used in both
ordered (<ol>) and unordered lists (<ul>).
%i!!erences 'etween HTML an) 8HTML
The "type" and "value" attributes of the li element were deprecated in
HTML 4.01.
The "type" and "value" attributes of the li element are not supported in
XHTML 1.0 Strict DTD.
Tips an) 1otes
Tip. Use styles to define the type of list.
Examples
Source Output
(ol)
(li)4o00ee(*li)
(li)!ea(*li)
(*ol)
1. 4o00ee
2. !ea
4o00ee
244386041.doc 120 od 221
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
!ea
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
t$%e 9
a
+
i
1
disc
square
circle
-%eci0ies t"e t$%e o0 t"e list. /e%recated. Use
st$les instead
!;
2alue num'erEo0ElistEitem /e%recated. Use st$les instead !;
The 3)l4 ta+
%e!inition an) =sa+e
The <dl> tag defines a definition list.
%i!!erences 'etween HTML an) 8HTML
NONE
Example
Source Output
(dl)
(dt)4o00ee(*dt)
(dd),lac1 "ot drin1(*dd)
(dt)=il1(*dt)
(dd)W"ite cold drin1(*dd)
(*dl)
4o00ee
,lac1 "ot drin1
=il1
W"ite cold drin1
244386041.doc 121 od 221
The 3)t4 ta+
%e!inition an) =sa+e
The <dt> tag defines the start of a term in a definition list.
%i!!erences 'etween HTML an) 8HTML
NONE
Example
Source Output
(dl)
(dt)4o00ee(*dt)
(dd),lac1 "ot drin1(*dd)
(dt)=il1(*dt)
(dd)W"ite cold drin1(*dd)
(*dl)
4o00ee
,lac1 "ot drin1
=il1
W"ite cold drin1
The 3))4 ta+
%e!inition an) =sa+e
The <dd> tag defines the description of a term in a definition list.
%i!!erences 'etween HTML an) 8HTML
NONE
Example
Source Output
(dl)
(dt)4o00ee(*dt)
4o00ee
,lac1 "ot drin1
244386041.doc 122 od 221
(dd),lac1 "ot drin1(*dd)
(dt)=il1(*dt)
(dd)W"ite cold drin1(*dd)
(*dl)
=il1
W"ite cold drin1
The 3)ir4 ta+
%e!inition an) =sa+e
The <dir> tag defines a directory list.
%i!!erences 'etween HTML an) 8HTML
The dir element was deprecated in HTML 4.01.
The dir element is not supported in XHTML 1.0 Strict DTD.
Tips an) 1otes
Tip. Use style sheets to define the type of list.
Example
Source Output
(dir)
(li)"tml(*li)
(li)&"tml(*li)
(*dir)
"tml
&"tml
The 3menu4 ta+
%e!inition an) =sa+e
The <menu> tag defines a menu list.
%i!!erences 'etween HTML an) 8HTML
244386041.doc 123 od 221
The menu element was deprecated in HTML 4.01.
The menu element is not supported in XHTML 1.0 Strict DTD.
Tips an) 1otes
Tip. Use styles to define the type of list.
Example
Source Output
(menu)
(li)"tml(*li)
(li)&"tml(*li)
(*menu)
"tml
&"tml
HTML ;orms an) Input
HTML ;orms are use) to select )i!!erent -in)s o! user input.
Examples
Text fields
This example demonstrates how to create text fields on a HTML page. A user can
write text in a text field.
<html>
<body>
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
244386041.doc 124 od 221
<input type="text" name="lastname">
</form>
</body>
</html>
;irst name
8ast name
Password fields
This example demonstrates how to create a password field on a HTML page.
(You can find more examples at the bottom of this page)
<html>
<body>
<form>
Username:
<input type="text" name="user">
<br>
Password:
<input type="password" name="password">
</form>
<p>
Note that when you type characters in a password field, the browser displays
asterisks or bullets instead of the characters.
</p>
</body>
</html>
Username
Dass:ord
244386041.doc 125 od 221
Note that when you type characters in a password field, the browser
displays asterisks or bullets instead of the characters.
;orms
A form is an area that can contain form elements.
Form elements are elements that allow the user to enter information (like text
fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a
form.
A form is defined with the <form> tag.
<form>
<inp*t>
<inp*t>
</form>
Input
The most used form tag is the <input> tag. The type of input is specified with
the type attribute. The most commonly used input types are explained below.
Text ;iel)s
Text fields are used when you want the user to type letters, numbers, etc. in a
form.
<form>
=irst name+
<inp*t type&)text) name&)firstname)>
<br>
>ast name+
<inp*t type&)text) name&)lastname)>
</form>
How it looks in a browser:
First name:
Last name:
Note that the form itself is not visible. Also note that in most browsers, the width
of the text field is 20 characters by default.
a)io 'uttons
Radio Buttons are used when you want the user to select one of a limited
number of choices.
<form>
<inp*t type&)radio) name&)sex) %al*e&)male)> ;ale
<br>
<inp*t type&)radio) name&)sex) %al*e&)female)> =emale
</form>
244386041.doc 126 od 221
How it looks in a browser:
Male
Female
Note that only one option can be chosen.
&hec-boxes
Checkboxes are used when you want the user to select one or more options of a
limited number of choices.
<form>
<inp*t type&)#he#box) name&)bie)>
$ ha%e a bie
<br>
<inp*t type&)#he#box) name&)#ar)>
$ ha%e a #ar
</form>
How it looks in a browser:
I have a bike
I have a car
The ;orm<s (ction (ttribute an) the 7ubmit 'utton
When the user clicks on the "Submit" button, the content of the form is sent to
another file. The form's action attribute defines the name of the file to send the
content to. The file defined in the action attribute usually does something with
the received input.
<form name&)inp*t) a#tion&)html/form/a#tion.asp)
method&)get)>
0sername+
<inp*t type&)text) name&)*ser)>
<inp*t type&)s*bmit) %al*e&).*bmit)>
</form>
How it looks in a browser:
Username:
Submit
If you type some characters in the text field above, and click the "Submit"
button, you will send your input to a page called "html_form_action.asp". That
page will show you the received input.
More Examples
Checkboxes
This example demonstrates how to create check-boxes on a HTML page. A user
can select or unselect a checkbox.
<html>
<body>
244386041.doc 127 od 221
<form>
I have a bike:
<input type="checkbox" name="Bike">
<br>
I have a car:
<input type="checkbox" name="Car">
</form>
</body>
</html>
+ "a2e a 'i1e
+ "a2e a car
Radiobuttons
This example demonstrates how to create radio-buttons on a HTML page.
<html>
<body>
<form>
Male:
<input type="radio" checked
name="Sex" value="male">
<br>
Female:
<input type="radio"
name="Sex" value="female">
</form>
244386041.doc 128 od 221
<p>
When a user clicks on a radio-button, the button becomes checked, and all other
buttons with the same name become unchecked
</p>
</body>
</html>
=ale
;emale
When a user clicks on a radio-button, the button becomes checked, and all
other buttons with the same name become unchecked
Simple drop down box
This example demonstrates how to create a simple drop-down box on a HTML
page. A drop-down box is a selectable list.
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
</form>
</body>
244386041.doc 129 od 221
</html>
Volvo
Another drop down box
This example demonstrates how to create a simple drop-down box with a pre-
selected value.
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat" selected>Fiat
<option value="audi">Audi
</select>
</form>
</body>
</html>
Fiat
Textarea
This example demonstrates how to create a text-area (a multi-line text input
control). A user can write text in the text-area. In a text-area you can write an
unlimited number of characters.
<html>
<body>
<p>
This example #annot be edited
be#a*se o*r editor *ses a textarea
for inp*t(
244386041.doc 130 od 221
and yo*r browser does not allow
a textarea inside a textarea.
</p>
<textarea rows&)1') #ols&)3')>
The #at was playing in the garden.
</textarea>
</body>
</html>
This example cannot be edited
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.
The cat was playing in the gard
Create a button
This example demonstrates how to create a button. On the button you can define
your own text.
<html>
<body>
244386041.doc 131 od 221
<form>
<input type="button" value="Hello world!">
</form>

</body>
</html>
Fieldset around data
This example demonstrates how to draw a border with a caption around your
data.
<html>
<body>
<fieldset>
<legend>
Health information:
</legend>
<form>
Height <input type="text" size="3">
Weight <input type="text" size="3">
</form>
</fieldset>
<p>
If there is no border around the input form, your browser is too old.
</p>
244386041.doc 132 od 221
</body>
</html>
Healt" in0ormation
Heig"t Weig"t
If there is no border around the input form, your browser is too old.
;orm Examples
Form with input fields and a submit button
This example demonstrates how to add a form to a page. The form contains two
input fields and a submit button.
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
Type your first name:
<input type="text" name="FirstName" value="Mickey" size="20">
<br>Type your last name:
<input type="text" name="LastName" value="Mouse" size="20">
<br>
<input type="submit" value="Submit">
</form>
<p>
If you click the "Submit" button, you will send your input to a new page called
html_form_action.asp.
</p>
244386041.doc 133 od 221
</body>
</html>
!$%e $our 0irst name
Mickey
!$%e $our last name
Mouse
Submit
If you click the "Submit" button, you will send your input to a new page
called html_form_action.asp.
Form with checkboxes
This form contains two checkboxes, and a submit button.
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
I have a bike:
<input type="checkbox" name="Bike" checked>
<br>
I have a car:
<input type="checkbox" name="Car">
<br>
<input type="submit" value="Submit">
</form>
<p>
If you click the "Submit" button, you send your input to a new page called
html_form_action.asp.
244386041.doc 134 od 221
</p>
</body>
</html>
+ "a2e a 'i1e
+ "a2e a car
Submit
If you click the "Submit" button, you send your input to a new page called
html_form_action.asp.
Form with radiobuttons
This form contains two radio buttons, and a submit button.
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
Male:
<input type="radio" name="Sex" value="Male" checked>
<br>
Female:
<input type="radio" name="Sex" value="Female">
<br>
<input type ="submit" value ="Submit Now!">
</form>
<p>
244386041.doc 135 od 221
If you click the "Submit" button, you will send your input to a new page called
html_form_action.asp.
</p>
</body>
</html>
=ale
;emale
Submit Now!
If you click the "Submit" button, you will send your input to a new page
called html_form_action.asp.
Send e-mail from a form
This example demonstrates how to send e-mail from a form.
<html>
<body>
<form action="MAILTO:someone@w3schools.com" method="post"
enctype="text/plain">
<h3>This form sends an e-mail to W3Schools.</h3>
Name:<br>
<input type="text" name="name"
value="yourname" size="20">
<br>
Mail:<br>
<input type="text" name="mail"
value="yourmail" size="20">
<br>
Comment:<br>
<input type="text" name="comment"
244386041.doc 136 od 221
value="yourcomment" size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
This !orm sen)s an e"mail to W57chools.
Name
yourname
=ail
yourmail
4omment
yourcomment
Send Reset
;orm Ta+s
Ta+ %escription
<form> Defines a form for user input
<input> Defines an input field
<textarea> Defines a text-area (a multi-line text input control)
<label> Defines a label to a control
<fieldset> Defines a fieldset
<legend> Defines a caption for a fieldset
<select> Defines a selectable list (a drop-down box)
<optgroup> Defines an option group
<option> Defines an option in the drop-down box
<button> Defines a push button
<isindex> Deprecated. Use <input> instead
The 3!orm4 ta+
244386041.doc 137 od 221
%e!inition an) =sa+e
The form element creates a form for user input. A form can contain
textfields, checkboxes, radio-buttons and more. Forms are used to pass
user-data to a specified URL.
%i!!erences 'etween HTML an) 8HTML
NONE
Example
Source Output
(0orm actionBC0ormEaction.as%C
met"odBCgetC)
;irst name
(in%ut t$%eBCte&tC nameBC0nameC
2alueBC=ic1e$C *)
('r *)
8ast name
(in%ut t$%eBCte&tC nameBClnameC
2alueBC=ouseC *)
('r *)
(in%ut t$%eBCsu'mitC 2alueBC-u'mitC *)
(*0orm)
(%)
+0 $ou clic1 t"e C-u'mitC 'utton? $ou :ill send
$our in%ut to a ne: %age called
0ormEaction.as%.
(*%)
;irst name
Mickey
8ast name
Mouse
Submit
If you click the "Submit" button, you
will send your input to a new page
called form_action.asp.
e2uire) (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
action U#8 9 U#8 t"at de0ines :"ere to send t"e data :"en
t"e su'mit 'utton is %us"ed
-!;
244386041.doc 138 od 221
Aptional (ttributes
Attribute Value Description DTD
acce%t list o0
contentt$%es
9 comma se%arated list o0 content t$%es t"at t"e
ser2er t"at %rocesses t"is 0orm :ill "andle
correctl$
-!;
acce%t>c"arset c"arsetElist 9 comma se%arated list o0 %ossi'le c"aracter sets
0or t"e 0orm data. !"e de0ault 2alue is Cun1no:nC
-!;
enct$%e mimet$%e !"e mime t$%e used to encode t"e content o0 t"e
0orm
-!;
met"od get
%ost
!"e H!!D met"od 0or sending data to t"e action
U#8. /e0ault is get.
metho)N>+et>. This method sends the
form contents in the URL: URL?
name=value&name=value. 1ote. If the
form values contains non-ASCII
characters or exceeds 100 characters
you MUST use method="post".
metho)N>post>. This method sends
the form contents in the body of the
request. 1ote. Most browsers are
unable to bookmark post requests.
-!;
name 0ormEname /e0ines a unique name 0or t"e 0orm !;
target E'lan1
Esel0
E%arent
Eto%
Where to open the target URL.
E'lan1 > t"e target U#8 :ill o%en in a ne:
:indo:
Esel0 > t"e target U#8 :ill o%en in t"e
same 0rame as it :as clic1ed
E%arent > t"e target U#8 :ill o%en in t"e
%arent 0rameset
Eto% > t"e target U#8 :ill o%en in t"e 0ull
'od$ o0 t"e :indo:
!;
The 3input4 ta+
%e!inition an) =sa+e
The <input> tag defines the start of an input field where the user can
enter data.
244386041.doc 139 od 221
%i!!erences 'etween HTML an) 8HTML
In HTML the <input> tag has no end tag.
In XHTML the <input> tag must be properly closed.
Tips an) 1otes
1ote. The input element is empty, it contains attributes only.
Tip. Use the label element to define a label to a form control.
Example
Source Output
(0orm actionBC0ormEaction.as%C
met"odBCgetC)
;irst name
(in%ut t$%eBCte&tC nameBC0nameC
2alueBC=ic1e$C *)
('r *)
8ast name
(in%ut t$%eBCte&tC nameBClnameC
2alueBC=ouseC *)
('r *)
(in%ut t$%eBCsu'mitC 2alueBC-u'mitC *)
(*0orm)
(%)
+0 $ou clic1 t"e C-u'mitC 'utton? $ou :ill send
$our in%ut to a ne: %age called
0ormEaction.as%.
(*%)
First name:
Mickey
Last name:
Mouse
Submit
If you click the "Submit" button, you
will send your input to a new page
called form_action.asp.
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
acce%t listEo0EmimeEt$%es 9 comma>se%arated list o0 =+=3 t$%es t"at
indicates t"e =+=3 t$%e o0 t"e 0ile trans0er.
-!;
244386041.doc 140 od 221
1ote. Only used with type="file"
align le0t
rig"t
to%
te&tto%
middle
a'smiddle
'aseline
'ottom
a's'ottom
/e0ines t"e alignment o0 te&t 0ollo:ing t"e image.
1ote. Only used with type="image"
!;
alt te&t /e0ines an alternate te&t 0or t"e image.
1ote. Only used with type="image"
-!;
c"ec1ed c"ec1ed +ndicates t"at t"e in%ut element s"ould 'e c"ec1ed
:"en it 0irst loads.
1ote. Used with type="checkbox" and
type="radio"
-!;
disa'led disa'led /isa'les t"e in%ut element :"en it 0irst loads so
t"at t"e user can not :rite te&t in it? or select it.
1ote. Cannot be used with
type="hidden"
-!;
ma&lengt" num'er /e0ines t"e ma&imum num'er o0 c"aracters
allo:ed in a te&t 0ield.
1ote. Only used with type="text"
-!;
name 0ieldEname /e0ines a unique name 0or t"e in%ut element.
1ote. This attribute is required with
type="button", type="checkbox",
type="file", type="hidden",
type="image", type="password",
type="text", and type="radio"
-!;
readonl$ readonl$ +ndicates t"at t"e 2alue o0 t"is 0ield cannot 'e
modi0ied.
1ote. Only used with type="text"
-!;
si.e num'erEo0Ec"ar /e0ines t"e si.e o0 t"e in%ut element.
1ote. Cannot be used with
type="hidden"
-!;
src U#8 /e0ines t"e U#8 o0 t"e image to dis%la$. -!;
244386041.doc 141 od 221
1ote. Only used with type="image"
t$%e 'utton
c"ec1'o&
0ile
"idden
image
%ass:ord
radio
reset
su'mit
te&t
Indicates the type of the input element.
The default value is "text"
1ote. This is not a required attribute,
but we think you should include it. If
omitted, IE 5.5 will still display a text
field, but Netscape 4.7 will not.
-!;
2alue 2alue !or buttons0 reset buttons and submit buttons"
/e0ines t"e te&t on t"e 'utton.
;or ima+e buttons. Defines the
symbolic result of the field passed to a
script.
;or chec-boxes an) ra)io buttons.
Defines the result of the input element
when clicked. The result is sent to the
form's action URL.
;or hi))en6 passwor)6 an) text
!iel)s. Defines the default value of the
element.
1ote. Cannot be used with type="file"
1ote. This attribute is required with
type="checkbox" and type="radio"
-!;
The 3textarea4 ta+
%e!inition an) =sa+e
Defines a text-area (a multi-line text input control). A user can write text
in the text-area. In a text-area you can write an unlimited number of
characters. The default font in the text-area is fixed pitch.
%i!!erences 'etween HTML an) 8HTML
NONE
244386041.doc 142 od 221
Example
Source Output
(te&tarea ro:sBC2C colsBC20C)
!"e cat :as %la$ing in t"e garden. -uddenl$ a
dog s"o:ed u%.....
(*te&tarea)
The cat was playing in the gard
e2uire) (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
cols num'er -%eci0ies t"e num'er o0 columns 2isi'le in t"e
te&t>area
-!;
ro:s num'er -%eci0ies t"e num'er o0 ro:s 2isi'le in t"e te&t>
area
-!;
The 3label4 ta+
%e!inition an) =sa+e
Defines a label to a control. If you click the text within the label element,
it is supposed to toggle the control.
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
1ote. The "for" attribute binds a label to another element. Set the value
of the "for" attribute equal to the value of the "id" attribute of the related
element.
Example
244386041.doc 143 od 221
Source Output
<p>Try clicking on the text
labels:</p>
(0orm nameBCin%utC actionBCC)
(in%ut t$%eBCradioC nameBCse&C idBCmaleC *)
(la'el 0orBCmaleC)=ale(*la'el)
('r *)
(in%ut t$%eBCradioC nameBCse&C
idBC0emaleC *)
(la'el 0orBC0emaleC);emale(*la'el)
(*0orm)
Try clicking on the text labels:
=ale
;emale
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
0or idEo0Eanot"erE0ield /e0ines :"ic" 0orm element t"e la'el is 0or. -et
to an +/ o0 a 0orm element.
1ote. If this attribute is not specified,
the label is associated with its
contents.
-!;
The 3!iel)set4 ta+
%e!inition an) =sa+e
The fieldset element draws a box around its containing elements.
%i!!erences 'etween HTML an) 8HTML
NONE
Example
Source Output
(0ieldset)
Heig"t (in%ut t$%eBCte&tC si.eBC3C *)
Heig"t Weig"t
244386041.doc 144 od 221
Weig"t (in%ut t$%eBCte&tC si.eBC3C *)
(*0ieldset)
The 3le+en)4 ta+
%e!inition an) =sa+e
The legend element defines a caption for a fieldset.
%i!!erences 'etween HTML an) 8HTML
NONE
Example
Source Output
(0ieldset)
(legend)Healt" in0ormation(*legend)
Heig"t (in%ut t$%eBCte&tC si.eBC3C *)
Weig"t (in%ut t$%eBCte&tC si.eBC3C *)
(*0ieldset)
Healt" in0ormationHeig"t Weig"t
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
align le0t
center
rig"t
/e0ines t"e alignment 0or contents in t"e 0ieldset !;
The 3select4 ta+
%e!inition an) =sa+e
The select element creates a drop-down list.
244386041.doc 145 od 221
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
Tip. Use this tag in the form element to accept user input.
Example
Source Output
(select)
(o%tion 2alue BC2ol2oC)6ol2o(*o%tion)
(o%tion 2alue BCsaa'C)-aa'(*o%tion)
(o%tion 2alue BCo%elC)I%el(*o%tion)
(o%tion 2alue BCaudiC)9udi(*o%tion)
(*select)
Volvo
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
disa'led disa'led W"en set? it disa'les t"e dro%>do:n list -!;
multi%le multi%le W"en set? it s%eci0ies t"at multi%le items can 'e
selected at a time
-!;
name uniqueEname /e0ines a unique name 0or t"e dro%>do:n list -!;
si.e num'er /e0ines t"e num'er o0 2isi'le items in t"e dro%>
do:n list
-!;
The 3opt+roup4 ta+
%e!inition an) =sa+e
Defines an option group. This element allows you to group choices. When
you have a long list of options, groups of related choices are easier to
handle.
%i!!erences 'etween HTML an) 8HTML
244386041.doc 146 od 221
NONE
Example
Source Output
(select)
(o%tgrou% la'elBC-:edis" 4arsC)
(o%tion 2alue BC2ol2oC)6ol2o(*o%tion)
(o%tion 2alue BCsaa'C)-aa'(*o%tion)
(*o%tgrou%)
(o%tgrou% la'elBCHerman 4arsC)
(o%tion 2alue BCmercedesC)=ercedes(*o%tion)
(o%tion 2alue BCaudiC)9udi(*o%tion)
(*o%tgrou%)
(*select)
Volvo
e2uire) (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
la'el te&tEla'el /e0ines t"e la'el 0or t"e o%tion grou% -!;
Aptional (ttributes
Attribute Value Description DTD
disa'led disa'led /isa'les t"e o%tion>grou% :"en it 0irst loads -!;
The 3option4 ta+
%e!inition an) =sa+e
The option element defines an option in the drop-down list.
%i!!erences 'etween HTML an) 8HTML
In HTML the <option> tag has no end tag.
In XHTML the <option> tag must be properly closed.
Tips an) 1otes
244386041.doc 147 od 221
1ote. The <option> tag can be used without any attributes, but you
usually need the value attribute, which indicates what is sent to the
server.
1ote. Use this tag in conjunction with the select element, elsewhere it is
meaningless.
Example
Source Output
(select)
(o%tion 2alue BC2ol2oC)6ol2o(*o%tion)
(o%tion 2alue BCsaa'C)-aa'(*o%tion)
(o%tion 2alue BCo%elC selectedBCselectedC)I%el(*o%tion)
(o%tion 2alue BCaudiC)9udi(*o%tion)
(*select)
Opel
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
disa'led disa'led -%eci0ies t"at t"e o%tion s"ould 'e disa'led :"en
it 0irst loads
-!;
la'el te&t /e0ines a la'el to use :"en using (o%tgrou%) -!;
selected selected -%eci0ies t"at t"e o%tion s"ould a%%ear selected
@:ill 'e dis%la$ed 0irst in t"e listA
-!;
2alue te&t /e0ines t"e t"e 2alue o0 t"e o%tion to 'e sent to t"e
ser2er
-!;
The 3button4 ta+
%e!inition an) =sa+e
Defines a push button. Inside a button element you can put content, like
text or images. This is the difference between this element and buttons
created with the input element.
%i!!erences 'etween HTML an) 8HTML
NONE
244386041.doc 148 od 221
Example
Source Output
('utton)4lic1 =e7(*'utton) 4lic1 =e7
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
disa'led disa'led /isa'les t"e 'utton -!;
name 'uttonEname -%eci0ies a unique name 0or t"e 'utton -!;
t$%e 'utton
reset
su'mit
/e0ines t"e t$%e o0 'utton -!;
2alue someE2alue -%eci0ies an initial 2alue 0or t"e 'utton. !"e 2alue
can 'e c"anged '$ a scri%t
-!;
HTML Ima+es
With HTML you can )isplay ima+es in a )ocument.
Examples
Insert images
This example demonstrates how to display images in your Web page.
<html>
<body>
<p>
An image:
<img src="constr4.gif"
244386041.doc 149 od 221
width="144" height="50">
</p>
<p>
A moving image:
<img src="hackanm.gif"
width="48" height="48">
</p>
<p>
Note that the syntax of inserting a moving image is no different from that of a
non-moving image.
</p>
</body>
</html>
image:
A moving image:
Note that the syntax of inserting a moving image is no different from that
of a non-moving image.
Insert images from different locations
This example demonstrates how to display images from another folder or another
server in your Web page.
<html>
<body>
244386041.doc 150 od 221
<p>
An image from another folder:
<img src="/images/netscape.gif"
width="33" height="32">
</p>
<p>
An image from W3Schools:
<img src="http://www.w3schools.com/images/ie.gif" width="73" height="68">
</p>
</body>
</html>
An image from another folder:
An image from W3Schools:
(You can find more examples at the bottom of this page)
The Ima+e Ta+ an) the 7rc (ttribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only and it has
no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for
"source". The value of the src attribute is the URL of the image you want to
display on your page.
The syntax of defining an image:
<img sr#&)*rl)>
244386041.doc 151 od 221
The URL points to the location where the image is stored. An image named
"boat.gif" located in the directory "images" on "www.w3schools.com" has the
URL: http://www.w3schools.com/images/boat.gif.
The browser puts the image where the image tag occurs in the document. If you
put an image tag between two paragraphs, the browser shows the first
paragraph, then the image, and then the second paragraph.
The (lt (ttribute
The alt attribute is used to define an "alternate text" for an image. The value of
the alt attribute is an author-defined text:
<img sr#&)boat.gif) alt&)<ig <oat)>
The "alt" attribute tells the reader what he or she is missing on a page if the
browser can't load images. The browser will then display the alternate text
instead of the image. It is a good practice to include the "alt" attribute for each
image on a page, to improve the display and usefulness of your document for
people who have text-only browsers.
'asic 1otes " =se!ul Tips
If an HTML file contains ten images - eleven files are required to display the page
right. Loading images take time, so my best advice is: Use images carefully.
More Examples
Background image
This example demonstrates how to add a background image to an HTML page.
<html>
<body background="background.jpg">
<h3>Look: A background image!</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat itself.</p>
</body>
</html>
244386041.doc 152 od 221
Loo-. ( bac-+roun) ima+e!
Both gif and jpg files can be used as HTML backgrounds.
If the image is smaller than the page, the image will repeat itself.
Aligning images
This example demonstrates how to align an image within the text.
<html>
<body>
<p>
An image
<img src ="/images/xhtml.gif"
align="bottom" width="100" height="50">
in the text
</p>
<p>
An image
<img src ="/images/xhtml.gif"
align="middle" width="100" height="50">
in the text
</p>
<p>
An image
<img src ="/images/xhtml.gif"
align="top" width="100" height="50">
244386041.doc 153 od 221
in the text
</p>
<p>Note that bottom alignment is the default alignment</p>
<p>
An image
<img src ="/images/xhtml.gif"
width="100" height="50">
in the text
</p>
<p>
<img src ="/images/xhtml.gif"
width="100" height="50">
An image before the text
</p>
<p>
An image after the text
<img src ="/images/xhtml.gif"
width="100" height="50">
</p>
</body>
</html>
244386041.doc 154 od 221
An image in the text
An image in the text
An image in the text
Note that bottom alignment is the default alignment
An image in the text
An image before the text
An image after the text
Let the image float
This example demonstrates how to let an image float to the left or right of a
paragraph.
<html>
<body>
<p>
<img src ="/images/xhtml.gif"
align ="left" width="100" height="50">
A paragraph with an image. The align attribute of the image is set to "left". The
image will float to the left of this text.
</p>
<p>
244386041.doc 155 od 221
<img src ="/images/xhtml.gif"
align ="right" width="100" height="50">
A paragraph with an image. The align attribute of the image is set to "right". The
image will float to the right of this text.
</p>
</body>
</html>
A paragraph with an image. The align attribute of the image is
set to "left". The image will float to the left of this text.
A paragraph with an image. The align attribute of the image
is set to "right". The image will float to the right of this text.
Adjust images to different sizes
This example demonstrates how to adjust images to different sizes.
<html>
<body>
<p>
<img src="/images/hackanm.gif"
width="20" height="20">
</p>
<p>
<img src="/images/hackanm.gif"
width="45" height="45">
</p>
244386041.doc 156 od 221
<p>
<img src="/images/hackanm.gif"
width="70" height="70">
</p>
<p>
You can make a picture larger or smaller changing the values in the "height" and
"width" attributes of the
img tag.
</p>
</body>
</html>
You can make a picture larger or smaller changing the values in the
"height" and "width" attributes of the img tag.
Display an alternate text for an image
This example demonstrates how to display an alternate text for an image. The
"alt" attribute tells the reader what he or she is missing on a page if the browser
can't load images. It is a good practice to include the "alt" attribute for each
image on a page.
<html>
<body>
244386041.doc 157 od 221
<img src="/images/goleft.gif" alt="Go Left" width="32" height="32">
<p>
Text-only browsers will only display the text in the "alt" attribute, which is "Go
Left".
Note that if you hold the mouse pointer over the image it will display the text.
</p>
</body>
</html>
Text-only browsers will only display the text in the "alt" attribute, which is
"Go Left". Note that if you hold the mouse pointer over the image it will
display the text.
Make a hyperlink of an image
This example demonstrates how to use an image as a link.
<html>
<body>
<p>
You can also use an image as a link:
<a href="lastpage.htm">
<img border="0" src="buttonnext.gif" width="65" height="38">
</a>
</p>
</body>
</html>
244386041.doc 158 od 221
You can also use an image as a link:
Create an image map
This example demonstrates how to create an image map, with clickable regions.
Each of the regions is a hyperlink.
<html>
<body>
<p>
Click on one of the planets to watch it closer:
</p>
<img src="/images/planets.gif"
width="145" height="126"
usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="rect"
coords="0,0,82,126"
alt="Sun"
href="sun.htm">
<area shape="circle"
coords="90,58,3"
alt="Mercury"
244386041.doc 159 od 221
href="mercur.htm">
<area shape="circle"
coords="124,58,8"
alt="Venus"
href="venus.htm">
</map>
<p>
<b>Note:</b> We use both an <b>id</b> and a <b>name</b> attribute in
the map tag
because some versions of Netscape don't understand the id attribute.</p>
</body>
</html>
Click on one of the planets to watch it closer:
1ote. We use both an i) and a name attribute in the map tag because
some versions of Netscape don't understand the id attribute.
244386041.doc 160 od 221
Turn an image into an image map
This example demonstrates how to turn an image into an image map. You will
see that if you move the mouse over the image, the coordinates will be displayed
on the status bar.
<html>
<body>
<p>
Move the mouse over the image, and look at the status bar to see how the
coordinates change.
</p>
<p>
<a href="tryhtml_ismap.htm">
<img src="/images/planets.gif"
ismap width="146" height="126">
</a>
</p>
</body>
</html>
Move the mouse over the image, and look at the status bar to see how the
coordinates change.
244386041.doc 161 od 221
Ima+e Ta+s
Ta+ %escription
<img> Defines an image
<map> Defines an image map
<area> Defines an area inside an image map
The 3im+4 ta+
%e!inition an) =sa+e
The img element defines an image.
%i!!erences 'etween HTML an) 8HTML
In HTML the <img> tag has no end tag.
In XHTML the <img> tag must be properly closed.
The "align", "border", "hspace", and "vspace" attributes of the image
element were deprecated in HTML 4.01.
The "align", "border", "hspace", and "vspace" attributes of the image
element are not supported in XHTML 1.0 Strict DTD.
Example
Source Output
(img srcBCangr$.gi0C altBC9ngr$C *)
e2uire) (ttributes
244386041.doc 162 od 221
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
alt te&t /e0ines a s"ort descri%tion o0 t"e image -!;
src U#8 !"e U#8 o0 t"e image to dis%la$ -!;
Aptional (ttributes
Attribute Value Description DTD
align to%
'ottom
middle
le0t
rig"t
-%eci0ies "o: to align t"e image according to
surrounding te&t. /e%recated. Use st$les instead
!;
'order %i&els /e0ines a 'order around an image. /e%recated.
Use st$les instead
!;
"eig"t %i&els
F
/e0ines t"e "eig"t o0 an image -!;
"s%ace %i&els /e0ines :"ite s%ace on t"e le0t and rig"t side o0
t"e image. /e%recated. Use st$les instead
!;
isma% U#8 /e0ines t"e image as a ser2er>side image ma% -!;
longdesc U#8 9 U#8 to a document t"at contains a long
descri%tion o0 t"e image
-!;
usema% U#8 /e0ines t"e image as a client>side image ma%.
8oo1 at t"e (ma%) and (area) tags to 0igure out
"o: it :or1s
-!;
2s%ace %i&els /e0ines :"ite s%ace on t"e to% and 'ottom o0 t"e
image. /e%recated. Use st$les instead
!;
:idt" %i&els
F
-ets t"e :idt" o0 an image -!;
The 3map4 ta+
%e!inition an) =sa+e
Defines a client-side image-map. An image-map is an image with clickable
regions.
%i!!erences 'etween HTML an) 8HTML
244386041.doc 163 od 221
NONE
Tips an) 1otes
1ote. The area element is always nested inside the map element. The
area element defines the regions in the image map.
1ote. The usemap attribute in <image> refers to the i) or name
(browser dependant) attribute in <map>, therefore we have added both
the id and name attributes to <map>.
Example
Source Output
(%)4lic1 on one o0 t"e %lanets(*%)
<img src ="images/planets.gif"
width ="145" height ="126"
alt="Planets"
usemap ="#planetmap" />
<map id ="planetmap"
name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
href ="sun.htm" target ="_blank"
alt="Sun" />
<area shape ="circle" coords ="90,58,3"
href ="mercur.htm" target ="_blank"
alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
href ="venus.htm" target ="_blank"
alt="Venus" />
</map>
Click on one of the planets:
e2uire) (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
id uniqueEname /e0ines a unique name 0or t"e ma% tag -!;
Aptional (ttributes
244386041.doc 164 od 221
Attribute Value Description DTD
name uniqueEname /e0ines a unique name 0or t"e ma% tag @0or
'ac1:ards com%a'ilit$A.
-!;
The 3area4 ta+
%e!inition an) =sa+e
Defines a region in an image map.
%i!!erences 'etween HTML an) 8HTML
In HTML the <area> tag has no end tag.
In XHTML the <area> tag must be properly closed.
Tips an) 1otes
This element is always nested inside a <map> tag.
1ote. The usemap attribute in <image> refers to the i) or name
(browser dependant) attribute in <map>, therefore we have added both
the id and name attributes to <map>.
Example
Source Output
(%)4lic1 on one o0 t"e %lanets(*%)
<img src ="images/planets.gif"
width ="145" height ="126"
alt="Planets"
usemap ="#planetmap" />
<map id ="planetmap"
name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
href ="sun.htm" target ="_blank"
alt="Sun" />
<area shape ="circle" coords ="90,58,3"
href ="mercur.htm" target ="_blank"
alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
href ="venus.htm" target ="_blank"
Click on one of the planets:
244386041.doc 165 od 221
alt="Venus" />
</map>
e2uire) (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
alt te&t -%eci0ies an alternate te&t 0or
t"e area
-!;
Aptional (ttributes
Attribute Value Description DTD
coords i0 s"a%eBCrectC t"en
coordsBCle0t?to%?rig"t?'ottomC
if shape="circ" then
coords="centerx,centery,radius"
if shape="poly" then
coords="x1,y1,x2,y2,..,xn,yn"
-%eci0ies t"e coordinates 0or
t"e clic1a'le area
-!;
"re0 U#8 -%eci0ies t"e target U#8 o0 t"e
area
-!;
no"re0 true
0alse
3&cludes an area 0rom t"e
image ma%
-!;
s"a%e rect
rectangle
circ
circle
%ol$
%ol$gon
/e0ines t"e s"a%e o0 t"e area -!;
target E'lan1
E%arent
Esel0
Eto%
Where to open the target
URL.
E'lan1 > t"e target U#8
:ill o%en in a ne:
:indo:
Esel0 > t"e target U#8
:ill o%en in t"e same
0rame as it :as clic1ed
E%arent > t"e target U#8
!;
244386041.doc 166 od 221
:ill o%en in t"e %arent
0rameset
Eto% > t"e target U#8
:ill o%en in t"e 0ull
'od$ o0 t"e :indo:
HTML 'ac-+roun)s
( +oo) bac-+roun) can ma-e a Web site loo- really +reat.
Examples
Good background and text color
An example of a background color and a text color that makes the text on the
page easy to read.
<html>
<body bgcolor="#d0d0d0">
<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph.
</p>
<p>
This is another paragraph. This is another paragraph. This is another paragraph.
This is another paragraph.
</p>
</body>
244386041.doc 167 od 221
</html>
This is a paragraph. This is a paragraph. This is a paragraph. This is a
paragraph. This is a paragraph.
This is another paragraph. This is another paragraph. This is another
paragraph. This is another paragraph.
Bad background and text color
An example of a background color and a text color that makes the text on the
page difficult to read.
<html>
<body bgcolor="#ffffff" text="yellow">
<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph.
</p>
<p>
This is another paragraph. This is another paragraph. This is another paragraph.
This is another paragraph.
</p>
</body>
</html>
This is a paragraph. This is a paragraph. This is a paragraph. This is a
paragraph. This is a paragraph.
This is another paragraph. This is another paragraph. This is another
paragraph. This is another paragraph.
(You can find more examples at the bottom of this page)
244386041.doc 168 od 221
'ac-+roun)s
The <body> tag has two attributes where you can specify backgrounds. The
background can be a color or an image.
'+color
The bgcolor attribute sets the background to a color. The value of this attribute
can be a hexadecimal number, an RGB value, or a color name.
<body bg#olor&)1'''''')>
<body bg#olor&)rgb?'('('@)>
<body bg#olor&)bla#)>
The lines above all set the background color to black.
'ac-+roun)
The background attribute sets the background to an image. The value of this
attribute is the URL of the image you want to use. If the image is smaller than
the browser window, the image will repeat itself until it fills the entire browser
window.
<body ba#gro*nd&)#lo*ds.gif)>
<body ba#gro*nd&)http+//www.w3s#hools.#om/#lo*ds.gif)>
The URL can be relative (as in the first line above) or absolute (as in the second
line above).
1ote. If you want to use a background image, you should keep in mind:
Will the background image increase the loading time too much? Tip:
Image files should be maximum 10k
Will the background image look good with other images on the page?
Will the background image look good with the text colors on the page?
Will the background image look good when it is repeated on the page?
Will the background image take away the focus from the text?
'asic 1otes " =se!ul Tips
The bgcolor, background, and the text attributes in the <body> tag are
deprecated in the latest versions of HTML (HTML 4 and XHTML). The World Wide
Web Consortium (W3C) has removed these attributes from its recommendations.
In future versions of HTML, style sheets (CSS) will be used to define the layout
and display properties of HTML elements.
Few of the most visited web sites use background images.
The most used background colors are: white, black and gray.
More Examples
Good background image
An example of a background image and a text color that makes the text on the
page easy to read.
<html>
244386041.doc 169 od 221
<body background="background.jpg">
<h3>Image Background</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat itself.</p>
</body>
</html>
Ima+e 'ac-+roun)
Both gif and jpg files can be used as HTML backgrounds.
If the image is smaller than the page, the image will repeat itself.
Good background image 2
An example of a background image and a text color that makes the text on the
page easy to read.
<html>
<body background="paper.gif">
<h3>Image Background</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat itself.</p>
</body>
</html>
244386041.doc 170 od 221
Ima+e 'ac-+roun)
Both gif and jpg files can be used as HTML backgrounds.
If the image is smaller than the page, the image will repeat itself.
Bad background image
An example of a background image and a text color that makes the text on the
page very difficult to read.
<html>
<body background="rock.jpg">
<h3>Image Background</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat itself.</p>
</body>
</html>
Ima+e 'ac-+roun)
Both gif and jpg files can be used as HTML backgrounds.
If the image is smaller than the page, the image will repeat
&omputer ,o-e
7upport. "Type dir, space, a, colon."
&ustomer. "With a space after 'space'?"
HTML ()vance)
HTML Layout
244386041.doc 171 od 221
Everywhere on the Web you will !in) pa+es that are !ormatte) li-e
newspaper pa+es usin+ HTML columns.
HTML Layout " =sin+ Tables
One very common practice with HTML,
is to use HTML tables to format the
layout of an HTML page.
A part of this page is formatted with
two columns, like a newspaper page.
As you can see at this page, there is a
left column and a right column.
This text is displayed in the left column.
An HTML <table> is used to divide a
part of this Web page into two columns.
The trick is to use a table without
borders, and maybe a little extra cell-
padding.
No matter how much text you add to
this page, it will stay inside its column
borders.
7ame Layout " &olor ())e)
One very common practice with HTML,
is to use HTML tables to format the
layout of an HTML page.
A part of this page is formatted with
two columns, like a newspaper page.
As you can see at this page, there is a
left column and a right column.
An HTML <table> is used to divide a
part of this Web page into two columns.
This text is displayed in the right
column.
The trick is to use a table without
borders, and maybe a little extra cell-
padding.
No matter how much text you add to
this page, it will stay inside its column
borders.
Examples
Dividing a part of an HTML page into table columns is very easy to do. To let you
experiment with it, we have put together this simple example.
<html>
<body>
<table border="0" width="100%" cellpadding="10">
244386041.doc 172 od 221
<tr>
<td width="50%" valign="top">
This is some text. This is some text. This is some text. This is some text. This is
some text.
</td>
<td width="50%" valign="top">
Another text. Another text. Another text. Another text. Another text. Another
text. Another text.
</td>
</tr>
</table>
</body>
</html>
!"is is some te&t. !"is is some te&t. !"is is
some te&t. !"is is some te&t. !"is is some
te&t.
9not"er te&t. 9not"er te&t. 9not"er te&t.
9not"er te&t. 9not"er te&t. 9not"er te&t.
9not"er te&t.
HTML ,o-e
7tu)ent. "How do you spell HTML?"
HTML ;onts
The 3!ont4 ta+ in HTML is )eprecate). It is suppose) to be remove) in a
!uture version o! HTML.
244386041.doc 173 od 221
Even i! a lot o! people are usin+ it6 you shoul) try to avoi) it6 an) use
styles instea).
The HTML 3!ont4 Ta+
With HTML code like this, you can specify both the size and the type of the
browser output :
<p>
<font siAe&)2) fa#e&),erdana)>
This is a paragraph.
</font>
</p>
<p>
<font siAe&)3) fa#e&)Times)>
This is another paragraph.
</font>
</p>
Try it yourself
<html>
<body>
<p><font size="2" face="Verdana">
This is a paragraph.
</font></p>
<p><font size="5" face="Times">
This is another paragraph.
</font></p>
</body>
</html>
This is a paragraph.
This is another paragraph.
244386041.doc 174 od 221
;ont (ttributes
(ttribute Example 0urpose
size="number" size="2" Defines the font size
size="+number" size="+1" Increases the font size
size="-number" size="-1" Decreases the font size
face="face-name" face="Times" Defines the font-name
color="color-value" color="#eeff00" Defines the font color
color="color-name" color="red" Defines the font color
The 3!ont4 Ta+ 7houl) 1AT be =se)
The <font> tag is deprecated in the latest versions of HTML (HTML 4 and
XHTML).
The World Wide Web Consortium (W3C) has removed the <font> tag from its
recommendations. In future versions of HTML, style sheets (CSS) will be used to
define the layout and display properties of HTML elements.
The i+ht Way to %o It " With 7tyles
Set the font of text
This example demonstrates how to set the font of a text.
<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:courier">A paragraph</p>
</body>
</html>
( hea)in+
A paragraph
Set the font size of text
This example demonstrates how to set the font size of a text.
<html>
244386041.doc 175 od 221
<body>
<h1 style="font-size:150%">A heading</h1>
<p style="font-size:80%">A paragraph</p>
</body>
</html>
( hea)in+
A paragraph
Set the font color of text
This example demonstrates how to set the color of a text.
<html>
<body>
<h1 style="color:blue">A heading</h1>
<p style="color:red">A paragraph</p>
</body>
</html>
( hea)in+
A paragraph
Set the font, font size, and font color of text
This example demonstrates how to set the font, font size, and font color of a
text.
<html>
<body>
<p style="font-family:verdana;font-size:80%;color:green">
This is a paragraph with some text in it. This is a paragraph with some text in it.
This is a paragraph with some text in it. This is a paragraph with some text in it.
</p>
</body>
244386041.doc 176 od 221
</html>
This is a paragraph with some text in it. This is a paragraph with some text in it. This is a
paragraph with some text in it. This is a paragraph with some text in it.
Where to Learn More (bout 7tyle 7heets/
;irst o!!. Finish the last chapters in our HTML tutorial !!! In the following
chapters we will explain why some tags, like <font>, are to be removed from the
HTML recommendations, and how to insert a style sheet in an HTML document.
To learn more about style sheets: Study our CSS Tutorial.
Why use HTML H.:/
HTML 5.? Was @ery Wron+ !
The original HTML was never inten)e) to contain tags for !ormattin+ a
document. HTML tags were intended to define the content of the document like:
<p>This is a paragraph</p>
<ul>This is an unordered list</ul>.
When tags like <font> and color attributes were added to the HTML 3.2
specification, it started a )evelopers< ni+htmare. Development of large web
sites where fonts and color information had to be added to every single Web
page, became a long, expensive and unduly painful process.
What is so #reat (bout HTML H.: /
With HTML 4.0 all formatting can be moved out of the HTML document and into a
separate style sheet.
Because HTML 4.0 separates the presentation of the document from its structure,
we have got what we always needed: Total control of presentation layout without
messing up the document content.
What 7houl) $ou )o (bout It /
Stop using presentation style attributes inside your HTML tags.
Our complete HTML Tag Reference indicates deprecated HTML 4.0 tags and
attributes. It also includes a lot of examples with complete source code.
Also take a look at our CSS Section and start a new developer life.
0repare $oursel! !or 8HTML
XHTML is the next generation of HTML. You should start preparing for it now. The
most important thing you can do is to start writing valid HTML 4.01. Also start
244386041.doc 177 od 221
writing your tags in lower case. Always close your tag elements. Never end a
paragraph without </p>.
1ATE. The official HTML 4.01 recommends the use of lower case tags.
If you want to read about how this web site was converted to XHTML. Go to our
XHTML School.
@ali)ate $our HTML ;iles as HTML H.:9
An HTML document is validated against a Document Type Definition (DTD).
Before an HTML file can be properly validated, a correct DTD must be added as
the first line of the file.
The HTML 4.01 Strict DTD includes elements and attributes that have not been
deprecated or do not appear in framesets:
<!BC:TDEF 6T;> E0<>$:
)"//-3://BTB 6T;> 4.'1//FG)
)http+//www.w3.org/T5/html4/stri#t.dtd)>
The HTML 4.01 Transitional DTD includes everything in the strict DTD plus
deprecated elements and attributes:
<!BC:TDEF 6T;> E0<>$:
)"//-3://BTB 6T;> 4.'1 Transitional//FG)
)http+//www.w3.org/T5/html4/loose.dtd)>
The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus
frames as well:
<!BC:TDEF 6T;> E0<>$:
)"//-3://BTB 6T;> 4.'1 =rameset//FG)
)http+//www.w3.org/T5/html4/frameset.dtd)>
Test $our HTML With the W5& @ali)ator
Input your page address in the box below
like http://www.w3schools.com/
Validate the page
&omputer ,o-e
&ustomer. What P?
7upport. The P on your keyboard.
&ustomer. What do you mean?
7upport. P on your keyboard.
&ustomer. I'm not going to do that!
HTML 7tyles
244386041.doc 178 od 221
With HTML H.: all !ormattin+ can be move) out o! the HTML )ocument
an) into a separate style sheet.
Examples
Styles in HTML
This example demonstrates how to format an HTML document with style
information added to the <head> section.
<html>
<head>
<style>
h1 {color: red}
h3 {color: blue}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h3>This is header 3</h3>
</body>
</html>
This is hea)er 9
This is hea)er 5
244386041.doc 179 od 221
Link that is not underlined
This example demonstrates how to make a link that is not underlined, using a
style attribute.
<html>
<body>
<a href="lastpage.htm"
style="text-decoration:none">
THIS IS A LINK!
</a>
</body>
</html>
THIS IS A LINK!
Link to an external style sheet
This example demonstrates how to use the <link> tag to link to an external style
sheet.
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" >
</head>
<body>
<h1>I am formatted with a linked style sheet</h1>
<p>Me too!</p>
</body>
</html>
244386041.doc 180 od 221
I am !ormatte) with a lin-e) style sheet
Me too!
How to =se 7tyles
When a browser reads a style sheet, it will format the document according to it.
There are three ways of inserting a style sheet:
External 7tyle 7heet
An external style sheet is ideal when the style is applied to many pages. With an
external style sheet, you can change the look of an entire Web site by changing
one file. Each page must link to the style sheet using the <link> tag. The <link>
tag goes inside the head section.
<head>
<lin rel&)stylesheet) type&)text/#ss)
href&)mystyle.#ss)>
</head>
Internal 7tyle 7heet
An internal style sheet should be used when a single document has a unique
style. You define internal styles in the head section with the <style> tag.
<head>
<style type&)text/#ss)>
body Hba#gro*nd"#olor+ redI
p Hmargin"left+ 2'pxI
</style>
</head>
Inline 7tyles
An inline style should be used when a unique style is to be applied to a single
occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style
attribute can contain any CSS property. The example shows how to change the
color and the left margin of a paragraph:
<p style&)#olor+ red9 margin"left+ 2'px)>
This is a paragraph
</p>
To learn more about styles, visit our CSS tutorial.
7tyle Ta+s
Ta+ %escription
244386041.doc 181 od 221
<style> Defines a style definition
<link> Defines a resource reference
<div> Defines a section in a document
<span> Defines a section in a document
<font> Deprecated. Use styles instead
<basefont> Deprecated. Use styles instead
<center> Deprecated. Use styles instead
The 3style4 ta+
%e!inition an) =sa+e
Defines a style in a document.
The style element goes in the head section. If you want to include a style
sheet in your page, you should define the style sheet externally, and link
to it using <link>.
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
Tip. To learn more about style sheets, visit our CSS Tutorial.
Example
Source
("ead)
(st$le t$%eBCte&t*cssC)
"1 Ocolor redP
"3 Ocolor 'lueP
(*st$le)
(*"ead)
e2uire) (ttributes
244386041.doc 182 od 221
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
t$%e te&t*css /e0ines t"e content>t$%e -!;
Aptional (ttributes
Attribute Value Description DTD
media screen
tt$
t2
%roLection
"and"eld
%rint
'raille
aural
all
!"e destination medium 0or t"e st$le in0ormation -!;
The 3)iv4 ta+
%e!inition an) =sa+e
The <div> tag defines a division/section in a document.
%i!!erences 'etween HTML an) 8HTML
The "align" attribute of the div element was deprecated in HTML 4.01.
The "align" attribute of the div element is not supported in XHTML 1.0
Strict DTD.
Tips an) 1otes
1ote. Browsers usually place a line break before and after the div
element.
Tip. Use the <div> tag to group block-elements to format them with
styles.
Example
Source Output
244386041.doc 183 od 221
!"is is some te&t (di2
st$leBCcolorK;;0000NC)
("4)!"is is a "eader in a di2
section(*"4)
(%)!"is is a %aragra%" in a di2
section(*%)
(*di2)
!"is is some te&t
This is a header in a div section
This is a paragraph in a div section
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
align le0t
rig"t
to%
'ottom
Ho: to align t"e te&t in t"e di2 element.
/e%recated. Use st$les instead.
!;
The 3span4 ta+
%e!inition an) =sa+e
The <span> tag is used to group inline-elements in a document.
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
Tip. Use the <span> tag to group inline-elements to format them with
styles
Example
Source Output
(%)!"is is a %aragra%" (s%an
st$leBCcolorK0000;;NC)!"is is a
%aragra%"(*s%an) !"is is a %aragra%"(*%)
This is a paragraph This is a
paragraph This is a paragraph
244386041.doc 184 od 221
<p>
<span style="color:#00DD45;">
This is another paragraph
</span>
</p>
This is another paragraph
The 3base!ont4 ta+
%e!inition an) =sa+e
Defines a base font.
%i!!erences 'etween HTML an) 8HTML
The basefont element was deprecated in HTML 4.01.
The basefont element is not supported in XHTML 1.0 Strict DTD.
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
color rg'@&?&?&A
K&&&&&&
colorname
-%eci0ies t"e te&t color. /e%recated. Use st$les
instead.
!;
0ace listEo0E0ontnames -%eci0ies t"e 0ont to use. /e%recated. Use st$les
instead.
!;
si.e de0aultEte&tEsi.e
@a num'er 0rom 1
to 7A
;ont si.e 0or 0ont elements. /e%recated. Use
st$les instead.
!;
The 3center4 ta+
%e!inition an) =sa+e
Centers its enclosed text horizontally.
244386041.doc 185 od 221
HTML Hea)
Examples
The title of a document
The title information inside a head element is not displayed in the browser
window.
<html>
<head>
<title>The title is not displayed</title>
</head>
<body>
<p>This text is displayed</p>
</body>
</html>
This text is displayed
One target for all links
This example demonstrates how to use the base tag to let all the links on a page
open in a new window.
<html>
<head>
<base target="_blank">
</head>
244386041.doc 186 od 221
<body>
<p>
<a href="http://www.w3schools.com"
target="_blank">This link</a>
will load in a new window because the target attribute is set to "_blank".
</p>
<p>
<a href="http://www.w3schools.com">
This link</a>
will also load in a new window even without a target attribute.
</p>
</body>
</html>
This link will load in a new window because the target attribute is set to
"_blank".
This link will also load in a new window even without a target attribute.
The Hea) Element
The head element contains general information, also called meta-information,
about a document. Meta means "information about".
You can say that meta-data means information about data, or meta-information
means information about information.
In!ormation Insi)e the Hea) Element
The elements inside the head element should not be displayed by a browser.
244386041.doc 187 od 221
According to the HTML standard, only a few tags are legal inside the head
section. These are: <base>, <link>, <meta>, <title>, <style>, and <script>.
Look at the following illegal construct:
<head>
<p>This is some text</p>
</head>
In this case the browser has two options:
Display the text because it is inside a paragraph element
Hide the text because it is inside a head element
If you put an HTML element like <h1> or <p> inside a head element like this,
most browsers will display it, even if it is illegal.
Should browsers forgive you for errors like this? We don't think so. Others do.
Hea) Ta+s
Ta+ %escription
<head> Defines information about the document
<title> Defines the document title
<base> Defines a base URL for all the links on a page
<link> Defines a resource reference
<meta> Defines meta information
Ta+ %escription
<!DOCTYPE> Defines the document type. This tag goes before the <html>
start tag.
The 3hea)4 ta+
%e!inition an) =sa+e
The head element can contain information about the document. The
browser does not display the "head information" to the user. The following
tags can be in the head section: <base>, <link>, <meta>, <script>,
<style>, and <title>.
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
244386041.doc 188 od 221
Always specify a title for the document!
Example
Source
("tml)
<head>
<title>Title of the document</title>
</head>
<body>
...
...
...
</body>
</html>
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
%ro0ile U#8 9 s%ace se%arated list o0 U#8Ms t"at contains meta
data in0ormation a'out t"e %age
-!;
The 3title4 ta+
%e!inition an) =sa+e
This element defines the title of the document.
%i!!erences 'etween HTML an) 8HTML
NONE
Example
244386041.doc 189 od 221
("tml)
<head>
<title>XHTML Tag Reference</title>
</head>
<body>
The content of the document......
</body>
</html>
The 3base4 ta+
%e!inition an) =sa+e
The base element specifies a base URL for all the links in a page.
%i!!erences 'etween HTML an) 8HTML
In HTML the <base> tag has no end tag.
In XHTML the <base> tag must be properly closed.
Tips an) 1otes
1ote. The <base> tag must go inside the head element.
Example
Assume that the absolute address for an image is:
(img srcBC"tt%**:::.:3sc"ools.com*images*smile.gi0C *)
Now we insert the <base> tag, which specifies a base URL for all of the
links in a page, in the head section of a page:
("ead)
('ase "re0BC"tt%**:::.:3sc"ools.com*images*C *)
(*"ead)
When inserting images on the page in the example above, we just have to
specify the relative address, and the browser will look for that file using
the full URL, "http://www.w3schools.com/images/smile.gif":
(img srcBCsmile.gi0C *)
244386041.doc 190 od 221
e2uire) (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
"re0 U#8 -%eci0ies t"e U#8 to use as t"e 'ase U#8 0or lin1s in t"e
%age
-!;
Aptional (ttributes
Attribute Value Description DTD
target E'lan1
E%arent
Esel0
Eto%
W"ere to o%en all t"e lin1s on t"e %age. !"is attri'ute can 'e
o2erridden '$ using t"e target attri'ute in eac" lin1.
E'lan1 > all t"e lin1s :ill o%en in ne: :indo:s
Esel0 > all t"e lin1s :ill o%en in t"e same 0rame t"e$
:"ere clic1ed
E%arent > all t"e lin1s :ill o%en in t"e %arent 0rameset
Eto% > all t"e lin1s :ill o%en in t"e 0ull 'od$ o0 t"e
:indo:
!;
The 3meta4 ta+
%e!inition an) =sa+e
The <meta> element provides meta-information about your page, such as
descriptions and keywords for search engines and refresh rates.
%i!!erences 'etween HTML an) 8HTML
In HTML the <meta> tag has no end tag.
In XHTML the <meta> tag must be properly closed.
Tips an) 1otes
1ote. The <meta> tag always goes inside the head element.
1ote. Metadata is always passed as name/value pairs.
Examples
244386041.doc 191 od 221
Define ke$1ords for searc engines"
(meta nameBC1e$:ordsC contentBCH!=8? /H!=8? 4--? Q=8? QH!=8? Ra2a-cri%t?
6,-cri%tC *)
Define a description of $our 1eb page"
(meta nameBCdescri%tionC contentBC;ree We' tutorials on H!=8? 4--? Q=8? and QH!=8C
*)
Define te last revision of $our page"
(meta nameBCre2isedC contentBCHege #e0snes? 6*10*99C *)
2efres page ever$ * seconds"
(meta "tt%>equi2BCre0res"C contentBC5C *)
e2uire) (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
content someEte&t /e0ines meta in0ormation to 'e associated :it"
"tt%>equi2 or name
-!;
Aptional (ttributes
Attribute Value Description DTD
"tt%>equi2 content>t$%e
e&%ires
re0res"
set>coo1ie
4onnects t"e content attri'ute to an H!!D "eader -!;
name aut"or
descri%tion
1e$:ords
generator
re2ised
others
4onnects t"e content attri'ute to a name -!;
sc"eme someEte&t /e0ines a 0ormat to 'e used to inter%ret t"e 2alue
o0 t"e content attri'ute
-!;
HTML Meta
244386041.doc 192 od 221
Examples
Document description
Information inside a meta element describes the document.
<html>
<head>
<meta name="author"
content="Jan Egil Refsnes">
<meta name="revised"
content="Jan Egil Refsnes,6/10/99">
<meta name="generator"
content="Microsoft FrontPage 4.0">
</head>
<body>
<p>
The meta attributes of this document identify the author and the editor software.
</p>
</body>
</html>
The meta attributes of this document identify the author and the editor
software.
Document keywords
Information inside a meta element describes the document's keywords.
<html>
<head>
<meta name="description"
content="HTML examples">
244386041.doc 193 od 221
<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
</head>
<body>
<p>
The meta attributes of this document describe the document and its keywords.
</p>
</body>
</html>
The meta attributes of this document describe the document and its
keywords.
Redirect a user
This example demonstrates how to redirect a user if your site address has
changed.
<html>
<head>
<meta http-equiv="Refresh"
content="5;url=http://www.w3schools.com">
</head>
<body>
<p>
Sorry! We have moved! The new URL is: <a
href="http://www.w3schools.com">http://www.w3schools.com</a>
</p>
<p>
You will be redirected to the new address in five seconds.
</p>
244386041.doc 194 od 221
<p>
If you see this message for more than 5 seconds, please click on the link above!
</p>
</body>
</html>
The Meta Element
As we explained in the previous chapter, the head element contains general
information (meta-information) about a document.
HTML also includes a meta element that goes inside the head element. The
purpose of the meta element is to provide meta-information about the
document.
Most often the meta element is used to provide information that is relevant to
browsers or search engines like describing the content of your document.
1ote. W3C states that "Some user agents support the use of META to refresh
the current page after a specified number of seconds, ith the option of
replacing it by a different !"#. Authors should not use this techni$ue to forard
users to different pages, as this ma%es the page inaccessible to some users.
#nstead, automatic page forarding should be done using ser&er'side redirects"
at http://www.w3.org/TR/html4/struct/global.html#adef-http-equiv.
Oeywor)s !or 7earch En+ines
Some search engines on the WWW will use the name and content attributes of
the meta tag to index your pages.
This meta element )e!ines a )escription o! your pa+e.
<meta name="description" content="Free Web tutorials on HTML, CSS, XML, and
XHTML">

This meta element )e!ines -eywor)s !or your pa+e.
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript,
VBScript">
The intention of the name and content attributes is to describe the content of a
page.
However, since too many webmasters have used meta tags for spamming, like
repeating keywords to give pages a higher ranking, some search engines have
stopped using them entirely.
You can read more about search engines in our Web Building Tutorial.
=n-nown Meta (ttributes
244386041.doc 195 od 221
Sometimes you will see meta attributes that are unknown to you like this:
<meta name="security" content="low">
Then you just have to accept that this is something unique to the site or to the
author of the site, and that it has probably no relevance to you.
You can see a complete list of the meta element attributes in our
Complete HTML 4.01 Tag Reference.
HTML =ni!orm esource Locators
HTML Lin-s
When you click on a link in an HTML document like this: Last Page, an underlying
<a> tag points to a place (an address) on the Web with an href attribute value
like this: <a href="lastpage.htm">Last Page</a>.
The Last Page link in the example is a link that is relative to the Web site that
you are browsing, and your browser will construct a full Web address like
http://www.w3schools.com/html/lastpage.htm to access the page.
=ni!orm esource Locators
Something called a Uniform Resource Locator (URL) is used to address a
document (or other data) on the World Wide Web. A full Web address like this:
http://www.w3schools.com/html/lastpage.htm follows these syntax rules:
scheme:..host.)omain:port.path.!ilename
The scheme is defining the type of Internet service. The most common type is
http.
The )omain is defining the Internet )omain name like w3schools.com.
The host is defining the domain host. If omitted, the default host for http is
www.
The .port is defining the port number at the host. The port number is normally
omitted. The default port number for http is K:.
The path is defining a path (a sub directory) at the server. If the path is
omitted, the resource (the document) must be located at the root directory of
the Web site.
The !ilename is defining the name of a document. The default filename might be
default.asp, or index.html or something else depending on the settings of the
Web server.
=L 7chemes
Some examples of the most common schemes can be found below:
7chemes (ccess
file a file on your local PC
ftp a file on an FTP server
http a file on a World Wide Web Server
244386041.doc 196 od 221
gopher a file on a Gopher server
news a Usenet newsgroup
telnet a Telnet connection
WAIS a file on a WAIS server
(ccessin+ a 1ews+roup
The following HTML code:
<a href="news:alt.html">HTML Newsgroup</a>
creates a link to a newsgroup like this HTML Newsgroup.
%ownloa)in+ with ;T0
The following HTML code:
<a href="ftp://www.w3schools.com/ftp/winzip.exe">Download WinZip</a>
creates a link to download a file like this: Download WinZip.
(The link doesn't work. Don't try it. It is just an example. W3Schools doesn't
really have an ftp directory.)
Lin- to your Mail system
The following HTML code:
<a href="mailto:someone@w3schools.com">someone@w3schools.com</a>
creates a link to your own mail system like this:
someone@w3schools.com
HTML 7cripts
()) scripts to HTML pa+es to ma-e them more )ynamic an) interactive.
Examples
Insert a script
This example demonstrates how to insert a script into your HTML document.
<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
244386041.doc 197 od 221
</script>
</body>
</html>
Hello Worl)!
Work with browsers that do not support scripts
This example demonstrates how to handle browsers that do not support
scripting.
<html>
<body>
<script type="text/javascript">
<!--
document.write("If this is displayed, your browser supports scripting!")
//-->
</script>
<noscript>No JavaScript support!</noscript>
<p>
A browser that does not support JavaScript will show the text in the noscript
element.
</p>
</body>
</html>
+0 t"is is dis%la$ed? $our 'ro:ser su%%orts scri%ting7 No Ra2a-cri%t su%%ort7
A browser that does not support JavaScript will show the text in the
noscript element.
Insert a 7cript into HTML 0a+e
244386041.doc 198 od 221
A script in HTML is defined with the <script> tag. Note that you will have to use
the type attribute to specify the scripting language.
<html>
<head>
</head>
<body>
<s#ript type&)text/Ja%as#ript)>
do#*ment.write?)6ello -orld!)@
</s#ript>
</body>
</html>
The script above will produce this output:
Hello World!
1ote. To learn more about scripting in HTML, visit our JavaScript School.
How to Han)le Al)er 'rowsers
A browser that does not recognize the <script> tag at all, will display the
<script> tag's content as text on the page. To prevent the browser from doing
this, you should hide the script in comment tags. An old browser (that does not
recognize the <script> tag) will ignore the comment and it will not write the
tag's content on the page, while a new browser will understand that the script
should be executed, even if it is surrounded by comment tags.
Example
,ava7cript.
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
@'7cript.
<script type="text/vbscript">
<!--
document.write("Hello World!")
'-->
</script>
The 3noscript4 Ta+
In addition to hiding the script inside a comment, you can also add a <noscript>
tag.
The <noscript> tag is used to define an alternate text if a script is NOT executed.
This tag is used for browsers that recognize the <script> tag, but does not
support the script inside, so this browser will display the text inside the
<noscript> tag instead. However, if a browser supports the script inside the
<script> tag it will ignore the <noscript> tag.
244386041.doc 199 od 221
Example
,ava7cript.
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>
@'7cript.
<script type="text/vbscript">
<!--
document.write("Hello World!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>
7cript Ta+s
Ta+ %escription
<script> Defines a script
<noscript> Defines an alternate text if the script is not executed
<object> Defines an embedded object
<param> Defines run-time settings (parameters) for an object
<applet> Deprecated. Use <object> instead
The 3script4 ta+
%e!inition an) =sa+e
Defines a script, such as a JavaScript.
%i!!erences 'etween HTML an) 8HTML
The "language" attribute of the script element was deprecated in HTML
4.01.
The "language" attribute of the script element is not supported in XHTML
1.0 Strict DTD.
Tips an) 1otes
244386041.doc 200 od 221
1ote. Code within this element is executed immediately when the page is
loaded, if it is not in a function. Script that appears after a <frameset>
tag will be ignored.
Example
Source Output
(scri%t t$%eBCte&t*La2ascri%tC)
document.:rite@CHello World7CA
(*scri%t)
Hello World7
e2uire) (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
t$%e te&t*ecmascri%t
te&t*La2ascri%t
te&t*Lscri%t
te&t*2'scri%t
te&t*2's
te&t*&ml
+ndicates t"e =+=3 t$%e o0 t"e scri%t -!;
Aptional (ttributes
Attribute Value Description DTD
c"arset c"arset /e0ines t"e c"aracter encoding used in scri%t -!;
de0er de0er +ndicates t"at t"e scri%t is not going to generate
an$ document content. !"e 'ro:ser can continue
%arsing and dra:ing t"e %age
-!;
language La2ascri%t
li2escri%t
2'scri%t
other
-%eci0ies t"e scri%ting language. /e%recated. Use
t"e t$%e attri'ute instead.
!;
src U#8 /e0ines a U#8 to a 0ile t"at contains t"e scri%t
@instead o0 inserting t"e scri%t into $our H!=8
document? $ou can re0er to a 0ile t"at contains t"e
scri%tA
-!;
The 3noscript4 ta+
244386041.doc 201 od 221
%e!inition an) =sa+e
The noscript element is used to define an alternate content (text) if a
script is NOT executed.
This tag is used for browsers that recognizes the <script> tag, but does
not support the script in it.
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
1ote. If a browser supports scripting, it will not display the text in the
noscript element.
1ote. Browsers that do not recognize the <script> tag will display the
tag's content as text on the page. To prevent the browser from doing this,
you should hide the script in comment tags. An old browser (one that does
not recognize the <script> tag) will ignore the comment and will not write
the tag's content on the page, while a new browser will understand that
the script should be executed, even if it is surrounded by comment tags!
Examples
&avaScript"
('od$)
...
...
(scri%t t$%eBCte&t*La2ascri%tC)
(7>>
document.:rite@CHello World7CA
**>>)
(*scri%t)
(noscri%t)<our 'ro:ser does not su%%ort Ra2a-cri%t7(*noscri%t)
...
...
(*'od$)
@'7cript.
<body>
...
...
<script type="text/vbscript">
<!--
244386041.doc 202 od 221
document.write("Hello World!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>
...
...
</body>
The 3obPect4 ta+
%e!inition an) =sa+e
Defines an embedded object. Use this element to add multimedia to your
XHTML page. This element allows you to specify the data and parameters
for objects inserted into HTML documents, and the code that can be used
to display/manipulate that data.
%i!!erences 'etween HTML an) 8HTML
NONE
Tips an) 1otes
1ote. An object element can appear inside the head or the body element.
The text between the <object> and </object> is the alternate text, for
browsers that do not support this tag. The <param> tags define run-time
settings for the object.
Tip. For images use the <img> tag instead of the <object> tag.
Example
Source Output
(o'Lect classidBCclsid;08/;954>8592>11/1>,169>
0040;0283628C idBC-lider1C :idt"BC100C "eig"tBC50C)
(%aram nameBC,order-t$leC 2alueBC1C *)
(%aram nameBC=ouseDointerC 2alueBC0C *)
(%aram nameBC3na'ledC 2alueBC1C *)
(%aram nameBC=inC 2alueBC0C *)
(%aram nameBC=a&C 2alueBC10C *)
(*o'Lect)
244386041.doc 203 od 221
Aptional (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
align le0t
rig"t
to%
'ottom
/e0ines t"e te&t alignment around t"e o'Lect !;
arc"i2e U#8 9 s%ace se%arated list o0 U#8Ms to arc"i2es. !"e
arc"i2es contains resources rele2ant to t"e o'Lect
-!;
'order %i&els /e0ines a 'order around t"e o'Lect !;
classid class +/ /e0ines a class +/ 2alue as set in t"e Windo:s
#egistr$ or a U#8
-!;
code'ase U#8 /e0ines :"ere to 0ind t"e code 0or t"e o'Lect -!;
codet$%e =+=3 t$%e !"e internet media t$%e o0 t"e code re0erred to '$
t"e classid attri'ute
-!;
data U#8 /e0ines a U#8 t"at re0ers to t"e o'LectMs data -!;
declare declare /e0ines t"at t"e o'Lect s"ould onl$ 'e declared?
not created or instantiated until needed
-!;
"eig"t %i&els /e0ines t"e "eig"t o0 t"e o'Lect -!;
"s%ace %i&els /e0ines t"e "ori.ontal s%acing around t"e o'Lect !;
name uniqueEname /e0ines a unique name 0or t"e o'Lect @to use in
scri%tsA
-!;
stand'$ te&t /e0ines a te&t to dis%la$ :"ile t"e o'Lect is
loading
-!;
t$%e =+=3Et$%e /e0ines t"e =+=3 t$%e o0 data s%eci0ied in t"e
data attri'ute
-!;
usema% U#8 -%eci0ies a U#8 o0 a client>side image ma% to 'e
used :it" t"e o'Lect
-!;
2s%ace %i&els /e0ines t"e 2ertical s%acing around t"e o'Lect !;
:idt" %i&els /e0ines t"e :idt" o0 t"e o'Lect -!;
The 3applet4 ta+
244386041.doc 204 od 221
%e!inition an) =sa+e
Defines an embedded applet.
%i!!erences 'etween HTML an) 8HTML
The applet element was deprecated in HTML 4.01.
The applet element is not supported in XHTML 1.0 Strict DTD.
Tips an) 1otes
1ote. To include applets, use the object element if possible (as the
<applet> tag is not supported in XHTML 1.0 Strict DTD).
e2uire) (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
"eig"t %i&els /e0ines t"e "eig"t o0 t"e a%%let !;
:idt" %i&els /e0ines t"e :idt" o0 t"e o'Lect !;
Aptional (ttributes
Attribute Value Description DTD
align le0t
rig"t
to%
'ottom
middle
'aseline
te&tto%
a'smiddle
a's'ottom
/e0ines t"e te&t alignment around t"e a%%let !;
alt te&t 9n alternate te&t to 'e dis%la$ed i0 t"e 'ro:ser
su%%ort a%%lets 'ut cannot run t"is a%%let
!;
arc"i2e U#8 9 U#8 to t"e a%%let :"en it is stored in a Ra2a
9rc"i2e or S+D 0ile
!;
code U#8 9 U#8 t"at %oints to t"e class o0 t"e a%%let !;
code'ase U#8 +ndicates t"e 'ase U#8 o0 t"e a%%let i0 t"e code
attri'ute is relati2e
!;
"s%ace %i&els /e0ines t"e "ori.ontal s%acing around t"e a%%let !;
244386041.doc 205 od 221
name uniqueEname /e0ines a unique name 0or t"e a%%let @to use in
scri%tsA
!;
o'Lect name /e0ines t"e name o0 t"e resource t"at contains a
seriali.ed re%resentation o0 t"e a%%let
!;
title te&t 9dditional in0ormation to 'e dis%la$ed in tool ti% !;
2s%ace %i&els /e0ines t"e 2ertical s%acing around t"e a%%let !;
The 3param4 ta+
%e!inition an) =sa+e
The param element allows you to specify the run-time settings for an
object inserted into XHTML documents.
%i!!erences 'etween HTML an) 8HTML
In HTML the <param> tag has no end tag.
In XHTML the <param> tag must be properly closed.
Example
Source Output
(o'Lect classidBCclsid;08/;954>8592>11/1>,169>
0040;0283628C idBC-lider1C :idt"BC100C "eig"tBC50C)
(%aram nameBC,order-t$leC 2alueBC1C *)
(%aram nameBC=ouseDointerC 2alueBC0C *)
(%aram nameBC3na'ledC 2alueBC1C *)
(%aram nameBC=inC 2alueBC0C *)
(%aram nameBC=a&C 2alueBC10C *)
(*o'Lect)
e2uire) (ttributes
%T% indicates in which DTD the attribute is allowed. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
name uniqueEname /e0ines a unique name 0or t"e %arameter -!;
244386041.doc 206 od 221
Aptional (ttributes
Attribute Value Description DTD
t$%e =+=3 t$%e -%eci0ies t"e internet media t$%e 0or t"e %arameter -!;
2alue 2alue -%eci0ies t"e 2alue o0 t"e %arameter -!;
2aluet$%e data
re0
o'Lect
-%eci0ies t"e =+=3 t$%e o0 t"e 2alue -!;
ea)y to 0ublish $our Wor-/
$our ;irst 7tep. ( 0ersonal Web 7erver
If you want other people to view your pages, you must publish them.
To publish your work, you have to copy your files to a web server.
Your own PC can act as a web server if it is connected to a network.
If you are running Windows 98, you can use the PWS (Personal Web
Server).
PWS is hiding in the PWS folder in your Windows CD.
0ersonal Web 7erver B0W7C
PWS turns any Windows computer into a Web server. PWS is easy to install and
ideal for developing and testing Web applications. PWS has been optimized for
workstation use, but has all the requirements of a full Web server. It also runs
Active Server Pages (ASP) just like its larger brother IIS.
How to Install a 0ersonal Web 7erver B0W7C.
Browse your Windows installation to see if you have installed PWS.
If not, install PWS from the PWS directory on your Windows CD.
Follow the instructions and get your Personal Web Server up and running.
Read more about Microsoft's Personal Web Server.
Internet In!ormation 7erver BII7C
Windows 2000's built-in Web server IIS, makes it easy to build large applications
for the Web. Both PWS and IIS include ASP, a server-side scripting standard that
can be used to create dynamic and interactive Web applications. IIS is also
available for Windows NT.
If you want to read more about ASP, you should study our ASP School.
Read more about Microsoft's Internet Information Services.
244386041.doc 207 od 221
$our 1ext 7tep. ( 0ro!essional Web 7erver
If you do not want to use PWS or IIS, you must upload your files to a
public server.
Most Internet Service Providers (ISP's) will offer to host your web pages.
If your employer has an Internet Server, you can ask him to host your Web
site.
If you are really serious about this, you should install your own Internet
Server.
Before you select an ISP, make sure you read W3Schools Web Hosting Tutorial !!
HTML Examples
'asic Ta+s
A very simple HTML document
How text inside paragraphs is displayed
More paragraphs
The use of line breaks
Poem problems (some problems with HTML formatting)
Heading tags
Center aligned heading
Insert a horizontal rule
Comments in the HTML source
Add a background color
Add a background image
;ormattin+ Text
Text formatting
Preformatted text (how to control line breaks and spaces)
Different computer-output tags
Insert an address
Abbreviations and acronyms
Long and short quotations
How to mark deleted and inserted text
Lin-s
How to create hyperlinks
Set an image as a link
Open a link in a new browser window
Jump to another part of a document (on the same page)
Break out of a frame
How to link to a mail message (will only work if you have mail installed)
;rames
244386041.doc 208 od 221
How to create a vertical frameset with 3 different documents
How to create a horizontal frameset with 3 different documents
How to mix a frameset in rows and columns
How to create a navigation frame
Inline frame (a frame inside an HTML page)
Jump to a specified section within a frame
Jump to a specified section with frame navigation
Tables
Simple tables
Different table borders
Table with no borders
Headings in a table
Empty cells
Table with a caption
Table cells that span more than one row/column
Tags inside a table
Cell padding (control the white space between cell content and the borders
Cell spacing (control the distance between cells)
Add a background color or a background image to a table
Add a background color or a background image to a table cell
Align the content in a table cell
The new frame attribute
Lists
An unordered list
An ordered list
Different types of ordered lists
Different types of unordered Lists
Nested list
Nested list 2
Definition list
;orms an) Input
How to create input fields
Password fields
Checkboxes
Radiobuttons
Simple drop-down box (a selectable list)
Another drop-down box with a pre-selected value
Textarea (a multi-line text input field)
Create a button
Draw a border with a caption around data
Form with an input field and a submit button
Form with checkboxes and a submit button
Form with radiobuttons and a submit button
Send a mail from a form
244386041.doc 209 od 221
Ima+es
Insert images
Insert images from another folder or another server
Align an image within a text
Let the image float to the left/right of a paragraph
Adjust images to different sizes
Display an alternate text for an image (if the browser can't load images)
Make a hyperlink of an image
Create an image-map, with click-able regions
'ac-+roun)s
Good background and text color
Bad background and text color
Good background image
Good background image 2
Bad background image
7tyles
Styles in the head section of an HTML document
Link that is not underlined
Link to an external style sheet
The Hea) 7ection
Set a title of a document
One target for all links on a page
The Meta Ta+
Document description
Document keywords
Redirect a user to another URL
7cripts
Insert a script
Handle browsers that do not support scripts
HTML H.:9 Quic- List
HTML Quic- List !rom W57chools. 0rint it6 !ol) it6 an) put it in your
poc-et.
244386041.doc 210 od 221
HTML 'asic %ocument
<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>
Hea)in+ 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>
Lo+ical 7tyles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
0hysical 7tyles
<b>This text is bold</b>
<i>This text is italic</i>
Lin-s6 (nchors6 an) Ima+e Elements
<a href="http://www.w3schools.com/">This is a Link</a>
<a href="http://www.w3schools.com/"><img src="URL" alt="Alternate
Text"></a>
<a href="mailto:someone@microsoft.com">Send e-mail</a>
A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>
=nor)ere) list
244386041.doc 211 od 221
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
Ar)ere) list
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
%e!inition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
Tables
<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
;rames
<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
;orms
<form action="http://www.somewhere.com/somepage.asp"
method="post/get">
<input type="text" name="lastname" value="Nixon" size="30"
maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
244386041.doc 212 od 221
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60" cols="20"></textarea>
</form>
Entities
&lt; is the same as <
&gt; is the same as >
&#169; is the same as
Ather Elements
<!-- This is a comment -->
<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>
7ource . http.**www.w5schools.com*html*htmlM2uic-.asp
HTML H.:9 e!erence
Ar)ere) (lphabetically
See also: Ordered by Function
11: indicates the earliest version of Netscape that supports the tag
IE: indicates the earliest version of Internet Explorer that supports the tag
Ta+ %escription 11 IE
<!--...--> Defines a comment 3.0 3.0
<!DOCTYPE> Defines the document type
<a> Defines an anchor 3.0 3.0
<abbr> Defines an abbreviation 6.2
<acronym> Defines an acronym 6.2 4.0
<address> Defines an address element 4.0 4.0
<applet> Deprecated. Defines an applet 2.0 3.0
244386041.doc 213 od 221
<area> Defines an area inside an image map 3.0 3.0
<b> Defines bold text 3.0 3.0
<base> Defines a base URL for all the links in a page 3.0 3.0
<basefont> Deprecated. Defines a base font 3.0 3.0
<bdo> Defines the direction of text display 6.2 5.0
<big> Defines big text 3.0 3.0
<blockquote> Defines a long quotation 3.0 3.0
<body> Defines the body element 3.0 3.0
<br> Inserts a single line break 3.0 3.0
<button> Defines a push button 6.2 4.0
<caption> Defines a table caption 3.0 3.0
<center> Deprecated. Defines centered text 3.0 3.0
<cite> Defines a citation 3.0 3.0
<code> Defines computer code text 3.0 3.0
<col> Defines attributes for table columns 3.0
<colgroup> Defines groups of table columns 3.0
<dd> Defines a definition description 3.0 3.0
<del> Defines deleted text 6.2 4.0
<dir> Deprecated. Defines a directory list 3.0 3.0
<div> Defines a section in a document 3.0 3.0
<dfn> Defines a definition term 3.0
<dl> Defines a definition list 3.0 3.0
<dt> Defines a definition term 3.0 3.0
<em> Defines emphasized text 3.0 3.0
<fieldset> Defines a fieldset 6.2 4.0
<font> Deprecated. Defines the font face, size, and color of text 3.0 3.0
<form> Defines a form 3.0 3.0
<frame> Defines a sub window (a frame) 3.0 3.0
<frameset> Defines a set of frames 3.0 3.0
<h1> to <h6> Defines header 1 to header 6 3.0 3.0
<head> Defines information about the document 3.0 3.0
<hr> Defines a horizontal rule 3.0 3.0
<html> Defines an html document 3.0 3.0
<i> Defines italic text 3.0 3.0
<iframe> Defines an inline sub window (frame) 6.0 4.0
<img> Defines an image 3.0 3.0
<input> Defines an input field 3.0 3.0
<ins> Defines inserted text 6.2 4.0
244386041.doc 214 od 221
<isindex> 3.0 3.0
<kbd> Defines keyboard text 3.0 3.0
<label> Defines a label for a form control 6.2 4.0
<legend> Defines a title in a fieldset 6.2 4.0
<li> Defines a list item 3.0 3.0
<link> Defines a resource reference 4.0 3.0
<map> Defines an image map 3.0 3.0
<menu> Deprecated. Defines a menu list 3.0 3.0
<meta> Defines meta information 3.0 3.0
<noframes> Defines a noframe section 3.0 3.0
<noscript> Defines a noscript section 3.0 3.0
<object> Defines an embedded object 3.0
<ol> Defines an ordered list 3.0 3.0
<optgroup> Defines an option group 6.0 6.0
<option> Defines an option in a drop-down list 3.0 3.0
<p> Defines a paragraph 3.0 3.0
<param> Defines a parameter for an object 3.0 3.0
<pre> Defines preformatted text 3.0 3.0
<q> Defines a short quotation 6.2
<s> Deprecated. Defines strikethrough text 3.0 3.0
<samp> Defines sample computer code 3.0 3.0
<script> Defines a script 3.0 3.0
<select> Defines a selectable list 3.0 3.0
<small> Defines small text 3.0 3.0
<span> Defines a section in a document 4.0 3.0
<strike> Deprecated. Defines strikethrough text 3.0 3.0
<strong> Defines strong text 3.0 3.0
<style> Defines a style definition 4.0 3.0
<sub> Defines subscripted text 3.0 3.0
<sup> Defines superscripted text 3.0 3.0
<table> Defines a table 3.0 3.0
<tbody> Defines a table body 4.0
<td> Defines a table cell 3.0 3.0
<textarea> Defines a text area 3.0 3.0
<tfoot> Defines a table footer 4.0
<th> Defines a table header 3.0 3.0
<thead> Defines a table header 4.0
<title> Defines the document title 3.0 3.0
244386041.doc 215 od 221
<tr> Defines a table row 3.0 3.0
<tt> Defines teletype text 3.0 3.0
<u> Deprecated. Defines underlined text 3.0 3.0
<ul> Defines an unordered list 3.0 3.0
<var> Defines a variable 3.0 3.0
<xmp> Deprecated. Defines preformatted text. Use <pre> instead 3.0 3.0
HTML H.: 7tan)ar) (ttributes
HTML tags can have attributes. The special attributes for each tag are listed
under each tag description. The attributes listed here are the core and language
attributes that are standard for all tags (with a few exceptions):
&ore (ttributes
Not valid in base, head, html, meta, param, script, style, and title elements.
(ttribute @alue %escription
class class(rule or style(rule The class of the element
id id(name A unique id for the element
style style(definition An inline style definition
title tooltip(text A text to display in a tool tip
Lan+ua+e (ttributes
Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.
(ttribute @alue %escription
dir ltr | rtl Sets the text direction
lang language(code Sets the language code
Oeyboar) (ttributes
(ttribute @alue %escription
accesskey character Sets a keyboard shortcut to access
an element
tabindex number Sets the tab order of an element
HTML H.: Event (ttributes
244386041.doc 216 od 221
New to HTML 4.0 is the ability to let HTML events trigger actions in the browser,
like starting a JavaScript when a user clicks on an HTML element. Below is a list
of attributes that can be inserted into HTML tags to define event actions.
If you want to learn more about programming with these events, you should
study our JavaScript tutorial and our DHTML tutorial.
Win)ow Events
Only valid in body and frameset elements.
(ttribute @alue %escription
onload script Script to be run when a document loads
onunload script Script to be run when a document unloads
;orm Element Events
Only valid in form elements.
(ttribute @alue %escription
onchange script Script to be run when the element changes
onsubmit script Script to be run when the form is submitted
onreset script Script to be run when the form is reset
onselect script Script to be run when the element is selected
onblur script Script to be run when the element loses focus
onfocus script Script to be run when the element gets focus
Oeyboar) Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param,
script, style, and title elements.
(ttribute @alue %escription
onkeydown script What to do when key is pressed
onkeypress script What to do when key is pressed and released
onkeyup script What to do when key is released
Mouse Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param,
script, style, title elements.
(ttribute @alue %escription
244386041.doc 217 od 221
onclick script What to do on a mouse click
ondblclick script What to do on a mouse double-click
onmousedown script What to do when mouse button is pressed
onmousemove script What to do when mouse pointer moves
onmouseout script What to do when mouse pointer moves out of an
element
onmouseover script What to do when mouse pointer moves over an
element
onmouseup script What to do when mouse button is released
HTML J"'IT (7&II e!erence
HTML uses stan)ar) J"'IT (7&II when transmittin+ )ata over the Web.
J"'IT (7&II represents 9?K )i!!erent character values B:"9?JC.
J"'IT 0rintable (7&II &haracters
esult %escription Entity 1umber
space &#32;
! exclamation mark &#33;
" quotation mark &#34;
# number sign &#35;
$ dollar sign &#36;
% percent sign &#37;
& ampersand &#38;
' apostrophe &#39;
( left parenthesis &#40;
) right parenthesis &#41;
* asterisk &#42;
+ plus sign &#43;
, comma &#44;
- hyphen &#45;
. period &#46;
/ slash &#47;
0 digit 0 &#48;
244386041.doc 218 od 221
1 digit 1 &#49;
2 digit 2 &#50;
3 digit 3 &#51;
4 digit 4 &#52;
5 digit 5 &#53;
6 digit 6 &#54;
7 digit 7 &#55;
8 digit 8 &#56;
9 digit 9 &#57;
: colon &#58;
; semicolon &#59;
< less-than &#60;
= equals-to &#61;
> greater-than &#62;
? question mark &#63;
@ at sign &#64;
A uppercase A &#65;
B uppercase B &#66;
C uppercase C &#67;
D uppercase D &#68;
E uppercase E &#69;
F uppercase F &#70;
G uppercase G &#71;
H uppercase H &#72;
I uppercase I &#73;
J uppercase J &#74;
K uppercase K &#75;
L uppercase L &#76;
M uppercase M &#77;
N uppercase N &#78;
O uppercase O &#79;
P uppercase P &#80;
Q uppercase Q &#81;
R uppercase R &#82;
S uppercase S &#83;
T uppercase T &#84;
U uppercase U &#85;
V uppercase V &#86;
244386041.doc 219 od 221
W uppercase W &#87;
X uppercase X &#88;
Y uppercase Y &#89;
Z uppercase Z &#90;
[ left square bracket &#91;
\ backslash &#92;
] right square bracket &#93;
^ caret &#94;
_ underscore &#95;
` grave accent &#96;
a lowercase a &#97;
b lowercase b &#98;
c lowercase c &#99;
d lowercase d &#100;
e lowercase e &#101;
f lowercase f &#102;
g lowercase g &#103;
h lowercase h &#104;
i lowercase i &#105;
j lowercase j &#106;
k lowercase k &#107;
l lowercase l &#108;
m lowercase m &#109;
n lowercase n &#110;
o lowercase o &#111;
p lowercase p &#112;
q lowercase q &#113;
r lowercase r &#114;
s lowercase s &#115;
t lowercase t &#116;
u lowercase u &#117;
v lowercase v &#118;
w lowercase w &#119;
x lowercase x &#120;
y lowercase y &#121;
z lowercase z &#122;
{ left curly brace &#123;
| vertical bar &#124;
244386041.doc 220 od 221
} right curly brace &#125;
~ tilde &#126;
J"'IT (7&II %evice &ontrol &haracters
ASCII device control characters were originally designed to control hardware
devices like printers and tape drives. These characters have nothing to do inside
any HTML document.
esult %escription Entity 1umber
NUL null character &#00;
SOH start of header &#01;
STX start of text &#02;
ETX end of text &#03;
EOT end of transmission &#04;
ENQ enquiry &#05;
ACK acknowledge &#06;
BEL bell (ring) &#07;
BS backspace &#08;
HT horizontal tab &#09;
LF line feed &#10;
VT vertical tab &#11;
FF form feed &#12;
CR carriage return &#13;
SO shift out &#14;
SI shift in &#15;
DLE data link escape &#16;
DC1 device control 1 &#17;
DC2 device control 2 &#18;
DC3 device control 3 &#19;
DC4 device control 4 &#20;
NAK negative acknowledge &#21;
SYN synchronize &#22;
ETB end transmission block &#23;
CAN cancel &#24;
EM end of medium &#25;
SUB substitute &#26;
ESC escape &#27;
FS file separator &#28;
GS group separator &#29;
RS record separator &#30;
244386041.doc 221 od 221
US unit separator &#31;
DEL delete (rubout) &#127;