HTML Tutorial

HTML Frames

2008-09-23T04:47:00.001-07:00

With frames, you can display more than one Web
page in the same browser window.

Examples

Vertical
frameset

This example demonstrates how to make a vertical frameset with three different
documents.

Horizontal
frameset

This example demonstrates how to make a horizontal frameset with three different
documents.

(You can find more examples at the bottom of this page)

Frames

With frames, you can display more than one HTML document in
the same browser window. Each HTML document is called a frame, and each frame is
independent of the others.

The disadvantages of using frames are:

The web developer must keep track of more HTML documents
It is difficult to print the entire page

The Frameset Tag

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 Frame Tag

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 into the first column, and the HTML document
"frame_b.htm" is put into the second column:

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

Note: The frameset column size value can also be set in
pixels (cols="200,500"), and one of the columns can be set to use the
remaining space (cols="25%,*").

Basic Notes - Useful 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.

Important: You cannot use the <body></body>
tags together with the <frameset></frameset> tags! However, if you
add a <noframes> tag containing some text for browsers that do not support
frames, you will have to enclose the text in <body></body> tags! See
how it is done in the first example below.

More Examples

How
to use the <noframes> tag

This example demonstrates how to use the <noframes> tag.

Mixed
frameset

This example demonstrates how to make a frameset with three documents, and how
to mix them in rows and columns.

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.

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 ="frame_a.htm" target ="showframe">Frame
a</a><br>

<a href ="frame_b.htm" target ="showframe">Frame
b</a><br>

<a href ="frame_c.htm" target ="showframe">Frame
c</a>

The second frame will show the linked document.

Inline
frame

This example demonstrates how to create an inline frame (a frame inside an HTML
page).

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.

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>.

Frame Tags

Tag	Description
<frameset>	Defines a set of frames
<frame>	Defines a sub window (a frame)
<noframes>	Defines a noframe section for browsers that do not handle frames
<iframe>	Defines an inline sub window (frame)

HTML Links

2008-09-23T04:46:00.002-07:00

HTML uses a hyperlink to link to another
document on the Web.

Examples

Create
hyperlinks

This example demonstrates how to create links in an HTML document.

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)

The Anchor Tag and the Href Attribute

HTML uses the <a> (anchor) tag to create a link to
another document.

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="url">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.w3schools.com/">Visit W3Schools!</a>

The line above will look like this in a browser:

Visit W3Schools!

The Target Attribute

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.w3schools.com/"
target="_blank">Visit W3Schools!</a>

The Anchor Tag and the Name Attribute

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">Useful Tips Section</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.w3schools.com/html_links.asp#tips">
Jump to the Useful Tips Section</a>

A hyperlink to the Useful Tips Section from WITHIN the file
"html_links.asp" will look like this:

<a href="#tips">Jump to the Useful Tips Section</a>

Basic Notes - Useful 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.

Link
to a location on the same page

This example demonstrates how to use a link to jump to another part of a
document.

Break
out of a frame

This example demonstrates how to break out of a frame, if your site is locked in
a frame.

Create
a mailto link

This example demonstrates how to link to a mail message (will only work if you
have mail installed).

Create
a mailto link 2

This example demonstrates a more complicated mailto link.

Link Tags

Tag	Description
<a>	Defines an anchor

HTML Character Entities

2008-09-23T04:46:00.001-07:00

Some characters like the < character, have a
special meaning in HTML, and therefore cannot be used in the text.

To display a less than sign (<) in HTML, we
have to use a character entity.

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 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:
< or <

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.

Note that the entities are case sensitive.

This example lets you experiment with character entities: Character
Entities

Non-breaking Space

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   character entity.

The Most Common Character Entities:

Result	Description	Entity Name	Entity Number
	non-breaking space
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
"	quotation mark	"	"
'	apostrophe	' (does not work in IE)	'

Some Other Commonly Used Character Entities:

Result	Description	Entity Name	Entity Number
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
€	euro	€	€
§	section	§	§
©	copyright	©	©
®	registered trademark	®	®
×	multiplication	×	×
÷	division	÷	÷

To see a full list of HTML character entities go to our HTML
Entities Reference.

HTML Text Formatting

2008-09-23T04:45:00.000-07:00

HTML defines a lot of elements for formatting
output, like bold or italic text.

Below are a lot of examples that you can try out
yourself:

Examples

Text
formatting

This example demonstrates how you can format text in an HTML document.

Preformatted
text

This example demonstrates how you can control the line breaks and spaces with
the pre tag.

"Computer
output" tags

This example demonstrates how different "computer output" tags will be
displayed.

Address

This example demonstrates how to write an address in an HTML document.

Abbreviations
and acronyms

This example demonstrates how to handle an abbreviation or an acronym.

Text
direction

This example demonstrates how to change the text direction.

Quotations

This example demonstrates how to handle long and short quotations.

Deleted
and inserted text

This example demonstrates how to mark a text that is deleted or inserted to a
document.

How to View HTML Source

Have you ever seen a Web page and wondered "Hey! How did
they do that?"

To find out, click the VIEW option in your browser's toolbar
and select SOURCE or PAGE SOURCE. This will open a window that shows you the
HTML code of the page.

Text Formatting Tags

Tag	Description
<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

"Computer Output" Tags

Tag	Description
<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

Citations, Quotations, and Definition Tags

Tag	Description
<abbr>	Defines an abbreviation
<acronym>	Defines an acronym
<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

HTML Attributes

2008-09-23T04:37:00.000-07:00

Attributes provide additional information to an
HTML element.

HTML Tag Attributes

HTML tags can have attributes. Attributes provide
additional information to an HTML element.

Attributes always come in name/value pairs like this:
name="value".

Attributes are always specified in the start tag of an HTML
element.

Attributes Example 1:

<h1> defines the start of a heading.

<h1 align="center"> has additional information
about the alignment.

Try
it yourself: Center aligned heading

Attributes Example 2:

<body> defines the body of an HTML document.

<body bgcolor="yellow"> has additional
information about the background color.

Try
it yourself: Background color

Attributes Example 3:

<table> defines an HTML table. (You will learn more
about HTML tables later)

<table border="1"> has additional information
about the border around the table.

Use Lowercase Attributes

Attributes and attribute values are case-insensitive. However,
the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute
values in their HTML 4 recommendation, and XHTML demands lowercase
attributes/attribute values.

Always Quote Attribute Values

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'

Basic HTML Tags

2008-09-23T04:35:00.001-07:00

The most important tags in HTML are tags that
define headings, paragraphs and line breaks.

The best way to learn HTML is to work with
examples. We have created a very nice HTML editor for you. With this editor, you
can edit the HTML source code if you like, and click on a test button to view
the result.

Try it Yourself - Examples

A
very simple HTML document

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.

Simple
paragraphs

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)

Headings

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>
<h6>This is a heading</h6>

HTML automatically adds an extra blank line before and after a
heading.

Paragraphs

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.

Don't Forget the Closing Tag

You might have noticed that paragraphs can be written without
end tags </p>:

<p>This is a paragraph
<p>This is another paragraph

The example above will work in most browsers, but don't rely
on it. Future version of HTML will not allow you to skip ANY end tags.

Closing all HTML elements with an end tag is a future-proof
way of writing HTML. It also makes the code easier to understand (read and
browse) when you mark both where an element starts and where it ends.

Line Breaks

The <br> tag is used when you want to break 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 breaks</p>

Try
it yourself

The <br> tag is an empty tag. It has no end tag like
</br>, since a closing tag doesn't make any sense.

<br> or <br />

More and more often you will see the <br> tag written
like this: <br />

Because the <br> tag has no end tag (or closing tag), it
breaks one of the rules for future HTML (the XML based XHTML), namely that all
elements must be closed.

Writing it like <br /> is a future proof way of closing
(or ending) the tag inside the opening tag, accepted by both HTML and XML.

Comments 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 comment -->

Note that you need an exclamation point after the opening
bracket, but not before the closing bracket.

Recap on HTML Elements

Each HTML element has an element name (body, h1, p,
br)
The start tag is the name surrounded by angle
brackets: <h1>
The end tag is a slash and the name surrounded by
angle brackets </h1>
The element content occurs between the start tag and
the end tag
Some HTML elements have no content
Some HTML elements have no end tag

Basic Notes - Useful 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.)

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

More
paragraphs

This example demonstrates some of the default behaviors of paragraph elements.

Line
breaks

This example demonstrates the use of line breaks in an HTML document.

Poem
problems

This example demonstrates some problems with HTML formatting.

Headings

This example demonstrates the tags that display headings in an HTML document.

Horizontal
rule

This example demonstrates how to insert a horizontal rule.

Hidden
comments

This example demonstrates how to insert a hidden comment in the HTML source
code.

Basic HTML Tags

If you lookup the basic HTML tags in the reference below, you
will see that the reference contains additional information about tag
attributes.

You will learn more about HTML tag attributes in the next
chapter of this tutorial.

Tag	Description
<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

HTML Elements

2008-09-23T04:29:00.000-07:00

HTML documents are text files made up of HTML
elements.

HTML elements are defined using HTML tags.

HTML Tags

HTML tags are used to mark-up HTML elements
HTML tags are surrounded by the two characters < and
>
The surrounding characters are called angle brackets
HTML tags normally come in pairs like <b> and
</b>
The first tag in a pair is the start tag, the second
tag is the end tag
The text between the start and end tags is the element
content
HTML tags are not case sensitive, <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 tag: <b>

The content of the HTML element is: This text is bold

The HTML element ends with an end tag: </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 do We Use Lowercase Tags?

We have just said that HTML tags are not case sensitive:
<B> means the same as <b>. If you surf the Web, you will notice that
plenty of web sites use uppercase HTML tags in their source code. We always use
lowercase tags. Why?

If you want to follow the latest web standards, you should
always use 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.

Introduction to HTML

2008-09-23T04:09:00.000-07:00

What is an HTML File?

HTML stands for Hyper Text Markup Language
An HTML file is a text file containing small markup tags
The markup tags tell the Web browser how to display
the page
An HTML file must have an htm or html file
extension
An HTML file can be created using a simple text editor

Do You Want to Try It?

If you are running Windows, start Notepad.

If you are on a Mac, start SimpleText.

In OSX start TextEdit and change the following preferences:
Open the "Format" menu and select "Plain text" instead of
"Rich text". Then open the "Preferences" window under the
"Text Edit" menu and select "Ignore rich text commands in HTML
files". Your HTML code will probably not work if you do not change the
preferences above!

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 Explained

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.

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.

Note on HTML Editors:

You can easily edit HTML files using a WYSIWYG (what you see
is what you get) editor like FrontPage or Dreamweaver, instead of writing your
markup tags in a plain text file.

However, if you want to be a skillful Web developer, we
strongly recommend that you use a plain text editor to learn your primer HTML.

Frequently Asked Questions

Q: After I have edited an HTML file, I cannot view the
result in my browser. Why?

A: 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 edited an HTML file, but the changes don't show
in the browser. Why?

A: A browser caches pages so it doesn't have to read the same page twice.
When you have modified a page, the browser doesn't know that. Use the browser's
refresh/reload button to force the browser to reload the page.

Q: What browser should I use?

A: You can do all the training with all of the well-known browsers, like
Internet Explorer, Firefox, Netscape, or Opera. However, some of the examples in
our advanced classes require the latest versions of the browsers.

Q: Does my computer have to run Windows? What about a Mac?

A: You can do all your training on a non-Windows computer like a Mac.

HTML Tutorial

2008-09-23T04:07:00.000-07:00

HTML Tutorial

In this HTML tutorial you will learn how to use
HTML to create your own Web site.

HTML is very easy to learn!

You will enjoy it!

Start
learning HTML now!

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 References

At W3Schools you will find complete HTML references about
tags, attributes, colors, entities, and more.

HTML 4.01
References

HTML Exam - Get Your Diploma!

Get Your Diploma!

W3Schools' Online Certification Program is the perfect
solution for busy professionals who need to balance work, family, and
career building.

The HTML
Certificate is for developers who want to document their knowledge
of HTML, XHTML, and CSS.

The JavaScript
Certificate is for developers who want to document their knowledge
of JavaScript and the HTML DOM.

The ASP
Certificate is for developers who want to document their knowledge
of ASP, SQL, and ADO.