What is HTML ? |
HyperText Markup Language (HTML) is markup language for web pages. HTML elements are the basic building-blocks of webpages.HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.
The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts in languages such as JavaScript which affect the behavior of HTML webpages.
Structure of HTML |
An HTML document has two* main parts:
head. The head element contains title and meta data of a web document.
body. The body element contains the information that you want to display on a web page.
To make your web pages compatible with HTML 4, you need to add a document type declaration (DTD) before the HTML element. Many web authoring software add DTD and basic tags automatically when you create a new web page.
In a web page, the first tag (specifically, <html>) indicates the markup language that is being used for the document. The <head> tag contains information about the web page. Lastly, the content appears in the <body> tag. The following illustration provides a summary.
<html>
<head>
<title> contains title </title>
</head>
<body>
<!--content of the web page-->
</body>
</html>
HTML tag's structure |
The majority of HTML tags belong to a container tag set. A container tag set consists of a start tag delimited by "<" and ">" and an end tag, delimited by "</" and ">." In some cases, the end tag is optional.
HTML Attributes
- HTML elements can have attributes
- Attributes provide additional information about an element
- Attributes are always specified in the start tag
- Attributes come in name/value pairs like: name="value"
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.
SYNTAX
<ELEMENT ATTRIB1="val1" ATTRIB2="val2" ... ATTRIBn="valn">
Content
</ELEMENT>
Content
</ELEMENT>
EXAMPLE
<FORM ACTION=”url.cgi” METHOD=”post”> ... </FORM>
Forms make use of a container tag set in which both the start and end tags are required.
Getting Started with HTML |
HTML doctypes
A doctype declaration refers to the rules for the markup language, so that the browsers render the content correctly.
Example
An HTML document with a doctype of HTML 4.01 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML Different Doctypes
The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
The doctype declaration should be the very first thing in an HTML document, before the <html> tag.
Tips: Always add a doctype to your pages. This helps the browsers to render the page correctly!
HTML 4.01 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font and center). Framesets are not allowed:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
"http://www.w3.org/TR/html4/frameset.dtd">
HTML DOCTYPE Element
Tag | Description |
Defines the document type. This declaration goes before the <html> start tag |
HTML Comments
Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.
Comments are written like this:
<!-- This is a comment -->
EXAMPLE
<html>
<head><title>comment</title></head>
<body>
<!-- <p> this is comment </p> -->
</body>
</html>
HTML <head> tag
Definition and Usage
The <head> element is a container for all the head elements.
The <head> element must include a title for the document, and can include scripts, styles, meta information, and more.
The following elements can go inside the <head> element:
- <title> (this element is required in the head section)
- <style>
- <base>
- <link>
- <meta>
- <script>
- <noscript>
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
Note: Browsers automatically add some empty space (a margin) before and after each heading.
Headings Are Important
Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages.
Since users may skim your pages by its headings, it is important to use headings to show the document structure.
H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.
HTML Lines
The <hr /> tag creates a horizontal line in an HTML page.The hr element can be used to separate content:
Example
<p>This is a paragraph</p><hr />
<p>This is a paragraph</p><hr />
<p>This is a paragraph</p>
<p>This is a paragraph</p><hr />
<p>This is a paragraph</p>
Difference between container and non-container tag
The difference between a container tag and an empty tag is quite simple. a conatiner tag is the one which has to be closed and an empty tag doesnt need to be closed.
for example:
CONTAINER TAG
<html> is the opening tag
</html> is the closing tag
<a href=""> is the opening tag
</a> is the closing tag
(closing is required)
<html> is the opening tag
</html> is the closing tag
<a href=""> is the opening tag
</a> is the closing tag
(closing is required)
EMPTY TAG (Non-Container Tag)
<img src="url">
<br>
<hr>
=> HTML Paragraphs
HTML documents are divided into paragraphs. Paragraphs are defined with the <p> tag. Browsers automatically add an empty line before and after a paragraph.
Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is another paragraph</p>
=> HTML Line Breaks
Use the <br /> tag if you want a line break (a new line) without starting a new paragraph
Example
<p>This is<br />a para<br />graph with line breaks</p>
=>The HTML <font> Tag
The <font> tag is deprecated in HTML 4, and removed from HTML5.
The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations.
In HTML 4, style sheets (CSS) should be used to define the layout and display properties for many HTML elements.
The example below shows how the HTML could look by using the <font> tag:
Example
<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>
Working with Text Formating tags |
Working with character tags
A tag that is applied to an individual character is known as a character tag. A character tag can be grouped into two categories: physical and logical. (Note: physical styles are associated with physical character tags; logical styles are associated with logical character tags.)
As you work with these tags to style your text in different ways, you will discover that there is not really big difference how the text is displayed on a browser. For instance, you can italicize your text using the <i> tag (a physical character tag) or <em> tag (a logical character tag). Why does that make any difference? It depends on whether you are using italics for the sake of using italics or whether you are using italics to convey some special meaning. While a physical character tag controls how to format the text, a logical character tag describes how the text is being used, without regard to how it should be formatted. Thus a logical style would be used to convey some meaning while a physical style would not.
Physical styles
As mentioned above, a physical character tag controls how the characters are formatted. For instance, you might display some characters as bold or italic. Listing 1 displays some common physical character tags.
common physical character tags | ||
Tag | Description | Renders as |
<b> | bold | displays text as bold |
<big> | big | displays text in a big font |
<i> | italics | displays text as italic |
<s> or <strike> * | strike | displays text with a line through it |
<small> | small | displays text in a small font |
<sub> | subscript | displays the text as subscript — text that displays below the baseline of the text |
<sup> | Sup erscript | displays the text as superscript — text that has baseline above the baseline of the rest of the text |
<tt> | teletype | displays the text with fixed-width font |
<u> | underline | underlines the text |
Listing 2 displays some examples of the common physical character tags.
Examples of common physical character tags | |
HTML code | Output |
This is <b>bold</b> | This is bold |
This is <big>big font</big> | This is big font |
This is <i>italic</i> | This is italic |
Was <s>$50</s>; now $40 | Was $50; now $40 |
This is <small>small</small> | This is small |
H<sub>2</sub>O | H2O |
May 5<sup>th</sup> 2005 | May 5th 2005 |
<tt>fixed-width font</tt> | fixed-width font |
This is <u>underlined</u> | This is underlined |
Logical styles
A logical character tag describes how the text is being used, not necessarily how it is formatted. Listing 3 displays common examples logical character tags.
common logical character tags | ||
Tag | Description | Renders as |
<cite> | citation | emphasizes the text in italics. |
<code> | code sample | Displays some characters as code usually in Courier font (i.e., fixed-width font) |
<del> | deleted text | displays text with a line through it; renders differently in Netscape and Internet Explorer |
<dfn> | definition | italics; renders differently in Netscape and Internet Explorer |
<em> | emphasis | emphasizes the text in some way usually as italic. |
<ins> | inserted text | underlined; renders differently in Netscape and Internet Explorer |
<kbd> | code sample | fixed-width font |
<samp> | code sample | fixed-width font |
<strong> | strong | Text is emphasized more strongly than usually as bold. |
<var> | program variable | italics |
Examples of logical tags | |
HTML code | Output |
This is used for a short <cite>quote</cite>. | This is used for a short quote. |
<code>y = m * x + b</code> | y = m * x + b |
<del>Deleted</del> text | Deleted text |
<dfn>definition</dfn> text | definition text |
This is <em> emphasized </em>. | This is emphasized . |
<ins>inserted</ins> text | inserted text |
<kbd>code</kbd> sample | code sample |
<samp>code</samp> sample | code sample |
This is <strong>strong</strong>. | This is strong. |
<var>program</var> variable | program variable |
Note that both logical and physical tags are two-sided tags (requiring an opening and closing tag). Also, the character tags can also be nested to format some text as
<b><i>this is bold and italicized</i></b>
which will result in :
When you nest tags, make sure to closed them properly. Although the output of the following code is same, the tags are not closed properly:
<b><i>this is bold and italicized</b></i>
Do you notice why? Well, because the tags are overlapped: the <i> tag should be closed first because it was the last tag that was opened. The <b> tag should be closed last as it is the first tag that is opened. In general, a tag that is opened last, should be closed first. A tag that is opened first should be closed last.
In summary, use the characters tags to either format text with physical tags or to describe some text with predefined logical tags. Also, remember to properly close nested tags.
HTML Text Formatting Tags
Tag | Description |
Defines bold text | |
Defines big text | |
Defines emphasized text | |
Defines italic text | |
Defines small text | |
Defines strong text | |
Defines subscripted text | |
Defines superscripted text | |
Defines inserted text | |
Defines deleted text |
HTML "Computer Output" Tags
Tag | Description |
Defines computer code text | |
Defines keyboard text | |
Defines sample computer code | |
Defines teletype text | |
Defines a variable | |
Defines preformatted text |
HTML Citations, Quotations, and Definition Tags
Tag | Description |
Defines an abbreviation | |
Defines an acronym | |
Defines contact information for the author/owner of a document | |
Defines the text direction | |
Defines a long quotation | |
Defines a short quotation | |
Defines a citation | |
Defines a definition term |
HTML Lists |
The most common HTML lists are ordered and unordered lists:
HTML Lists
An ordered list:
| An unordered list:
|
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a browser:
- Coffee
- Milk
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
How the HTML code above looks in a browser:
- Coffee
- Milk
HTML Definition Lists
A definition list is a list of items, with a description of each item.
The <dl> tag defines a definition list.
The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
How the HTML code above looks in a browser:
Coffee
- black hot drink
Milk
- white cold drink
Order List:
Definition and Usage
The <ol> tag defines an ordered list.
An ordered list can be numerical or alphabetical.
Use the <li> tag to define list items.
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute | Value | Description | DTD |
compact | Deprecated. Use styles instead. Specifies that the list should render smaller than normal | TF | |
number | Deprecated. Use styles instead. Specifies the start value of an ordered list | TF | |
1 A a I i | Deprecated. Use styles instead. Specifies the kind of marker to use in the list | TF |
Standard Attributes
The <ol> tag supports the following standard attributes:
Attribute | Value | Description | DTD |
class | classname | Specifies a classname for an element | STF |
dir | rtl ltr | Specifies the text direction for the content in an element | STF |
id | id | Specifies a unique id for an element | STF |
lang | language_code | Specifies a language code for the content in an element | STF |
style | style_definition | Specifies an inline style for an element | STF |
title | text | Specifies extra information about an element | STF |
xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
Li tag:
Definition and Usage
The <li> tag defines a list item.
Tips and Notes
Tip: Use CSS to define the type of list.
Differences Between HTML and XHTML
NONE
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute | Value | Description | DTD |
1 A a I i disc square circle | Deprecated. Use styles instead. Specifies which kind of bullet point will be used | TF | |
number | Deprecated. Use styles instead. Specifies the value of a list item. The following list items will increment from that number (only for <ol> lists) | TF |
Standard Attributes
The <li> tag supports the following standard attributes:
Attribute | Value | Description | DTD |
class | classname | Specifies a classname for an element | STF |
dir | rtl ltr | Specifies the text direction for the content in an element | STF |
id | id | Specifies a unique id for an element | STF |
lang | language_code | Specifies a language code for the content in an element | STF |
style | style_definition | Specifies an inline style for an element | STF |
title | text | Specifies extra information about an element | STF |
xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
DL tag:
Definition and Usage
The <dl> tag defines a definition list.
The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list).
Differences Between HTML and XHTML
NONE
Standard Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
The <dl> tag supports the following standard attributes:
Attribute | Value | Description | DTD |
class | classname | Specifies a classname for an element | STF |
dir | rtl ltr | Specifies the text direction for the content in an element | STF |
id | id | Specifies a unique id for an element | STF |
lang | language_code | Specifies a language code for the content in an element | STF |
style | style_definition | Specifies an inline style for an element | STF |
title | text | Specifies extra information about an element | STF |
xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
DT tag:
Definition and Usage
The <dt> tag defines an item in a definition list.
The <dt> tag is used in conjunction with <dl> (defines the definition list) and <dd> (describes the item in the list).
Differences Between HTML and XHTML
NONE
Standard Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
The <dt> tag supports the following standard attributes:
Attribute | Value | Description | DTD |
class | classname | Specifies a classname for an element | STF |
dir | rtl ltr | Specifies the text direction for the content in an element | STF |
id | id | Specifies a unique id for an element | STF |
lang | language_code | Specifies a language code for the content in an element | STF |
style | style_definition | Specifies an inline style for an element | STF |
title | text | Specifies extra information about an element | STF |
xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
DD tag:
Definition and Usage
The <dd> tag is used to describe an item in a definition list.
The <dd> tag is used in conjunction with <dl> (defines the definition list) and <dt> (defines the item in the list).
Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc.
Differences Between HTML and XHTML
NONE
Standard Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
The <dd> tag supports the following standard attributes:
Attribute | Value | Description | DTD |
class | classname | Specifies a classname for an element | STF |
dir | rtl ltr | Specifies the text direction for the content in an element | STF |
id | id | Specifies a unique id for an element | STF |
lang | language_code | Specifies a language code for the content in an element | STF |
style | style_definition | Specifies an inline style for an element | STF |
title | text | Specifies extra information about an element | STF |
xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
HTML Frames |
HTML Frames
With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.
The disadvantages of using frames are:
- Frames are not expected to be supported in future versions of HTML
- Frames are difficult to use. (Printing the entire page is difficult).
- The web developer must keep track of more HTML documents
The HTML frameset Element
The frameset element holds one or more frame elements. Each frame element can hold a separate document.
The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them.
The HTML frame Element
The <frame> tag defines one particular window (frame) within a frameset.
In the example below we have a frameset with two columns.
The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The document "frame_a.htm" is put into the first column, and the document "frame_b.htm" is put into the second column:
<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>
<frameset > Element :
Definition and Usage
The <frameset> tag defines a frameset.
The <frameset> element holds one or more <frame> elements. Each <frame> element can hold a separate document.
The <frameset> element specifies HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them.
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute | Value | Description | DTD |
pixels % * | Specifies the number and size of columns in a frameset | F | |
pixels % * | Specifies the number and size of rows in a frameset | F |
Standard Attributes
The <frameset> tag supports the following standard attributes:
Attribute | Value | Description | DTD |
class | classname | Specifies a classname for an element | F |
id | id | Specifies a unique id for an element | F |
style | style_definition | Specifies an inline style for an element | F |
title | text | Specifies extra information about an element | F |
<frame> element :
Definition and Usage
The <frame> tag defines one particular window (frame) within a <frameset>.
Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to resize, etc.
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute | Value | Description | DTD |
0 1 | Specifies whether or not to display a border around a frame | F | |
URL | Specifies a page that contains a long description of the content of a frame | F | |
pixels | Specifies the top and bottom margins of a frame | F | |
pixels | Specifies the left and right margins of a frame | F | |
name | Specifies the name of a frame | F | |
noresize | Specifies that a frame is not resizable | F | |
yes no auto | Specifies whether or not to display scrollbars in a frame | F | |
URL | Specifies the URL of the document to show in a frame | F |
Standard Attributes
The <frame> tag supports the following standard attributes:
Attribute | Value | Description | DTD |
class | classname | Specifies a classname for an element | F |
id | id | Specifies a unique id for an element | F |
style | style_definition | Specifies an inline style for an element | F |
title | text | Specifies extra information about an element | F |
Example
A simple three-framed page:
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
HTML Form |
HTML <form> Element :
Definition and Usage
The <form> tag is used to create an HTML form for user input.
The <form> element can contain one or more of the following form elements:
An HTML form is used to pass data to a server.
Tip: The <form> element is a block-level element, and browsers create a line break before and after a form.
Required Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute | Value | Description | DTD |
URL | Specifies where to send the form-data when a form is submitted | STF |
Optional Attributes
Attribute | Value | Description | DTD |
MIME_type | Specifies the types of files that the server accepts (that can be submitted through a file upload) | STF | |
character_set | Specifies a list of character encodings that the server accepts | STF | |
application/x-www-form-urlencoded multipart/form-data text/plain | Specifies how the form-data should be encoded when submitting it to the server (only for method="post") | STF | |
get post | Specifies the HTTP method to use when sending form-data | STF | |
name | Specifies the name of a form | TF | |
_blank _self _parent _top framename | Deprecated. Specifies where to display the response that is received after submitting the form | TF |
Standard Attributes
The <form> tag supports the following standard attributes:
Attribute | Value | Description | DTD |
class | classname | Specifies a classname for an element | STF |
dir | rtl ltr | Specifies the text direction for the content in an element | STF |
id | id | Specifies a unique id for an element | STF |
lang | language_code | Specifies a language code for the content in an element | STF |
style | style_definition | Specifies an inline style for an element | STF |
title | text | Specifies extra information about an element | STF |
xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
Example
An HTML form with two input fields and one submit button:
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
Sub elements of <form> tag :
<input> tag :
Definition and Usage
The <input> tag is used to select user information.
<input> elements are used within a <form> element to declare input controls that allow users to input data.
An input field can vary in many ways, depending on the type attribute.
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute | Value | Description | DTD |
audio/* video/* image/* MIME_type | Specifies the types of files that the server accepts (only for type="file") | STF | |
left right top middle bottom | Deprecated. Use styles instead. Specifies the alignment of an image input (only for type="image") | TF | |
text | Specifies an alternate text for an image (only for type="image") | STF | |
checked | Specifies that an <input> element should be preselected when the page loads (for type="checkbox" or type="radio") | STF | |
disabled | Specifies that an <input> element should be disabled | STF | |
number | Specifies the maximum number of characters allowed in an <input> element | STF | |
name | Specifies the name of an <input> element | STF | |
readonly | Specifies that an input field should be read-only | STF | |
number | Specifies the width, in characters, of an <input> element | STF | |
URL | Specifies the URL of the image to use as a submit button (only for type="image") | STF | |
button checkbox file hidden image password radio reset submit text | Specifies the type of <input> element | STF | |
text | Specifies the value of an <input> element | STF |
Standard Attributes
The <input> tag supports the following standard attributes:
Attribute | Value | Description | DTD |
accesskey | character | Specifies a keyboard shortcut to access an element | STF |
class | classname | Specifies a classname for an element | STF |
dir | rtl ltr | Specifies the text direction for the content in an element | STF |
id | id | Specifies a unique id for an element | STF |
lang | language_code | Specifies a language code for the content in an element | STF |
style | style_definition | Specifies an inline style for an element | STF |
tabindex | number | Specifies the tab order of an element | STF |
title | text | Specifies extra information about an element | STF |
xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
<textarea> tag :
Definition and Usage
The <textarea> tag defines a multi-line text input control.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).
The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.
Required Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute | Value | Description | DTD |
number | Specifies the visible width of a text area | STF | |
number | Specifies the visible number of lines in a text area | STF |
Optional Attributes
Attribute | Value | Description | DTD |
disabled | Specifies that a text area should be disabled | STF | |
text | Specifies the name for a text area | STF | |
readonly | Specifies that a text area should be read-only | STF |
Standard Attributes
The <textarea> tag supports the following standard attributes:
Attribute | Value | Description | DTD |
accesskey | character | Specifies a keyboard shortcut to access an element | STF |
class | classname | Specifies a classname for an element | STF |
dir | rtl ltr | Specifies the text direction for the content in an element | STF |
id | id | Specifies a unique id for an element | STF |
lang | language_code | Specifies a language code for the content in an element | STF |
style | style_definition | Specifies an inline style for an element | STF |
tabindex | number | Specifies the tab order of an element | STF |
title | text | Specifies extra information about an element | STF |
xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
Example
An HTML text area:
<textarea rows="2" cols="20">
At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP.
</textarea>
At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP.
</textarea>
<select> tag :
Definition and Usage
The <select> tag is used to create a drop-down list.
The <option> tags inside the <select> element define the available options in the list.
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute | Value | Description | DTD |
disabled | Specifies that a drop-down list should be disabled | STF | |
multiple | Specifies that multiple options can be selected at once | STF | |
name | Defines a name for the drop-down list | STF | |
number | Defines the number of visible options in a drop-down list | STF |
Standard Attributes
The <select> tag supports the following standard attributes:
Attribute | Value | Description | DTD |
class | classname | Specifies a classname for an element | STF |
dir | rtl ltr | Specifies the text direction for the content in an element | STF |
id | id | Specifies a unique id for an element | STF |
lang | language_code | Specifies a language code for the content in an element | STF |
style | style_definition | Specifies an inline style for an element | STF |
tabindex | number | Specifies the tab order of an element | STF |
title | text | Specifies extra information about an element | STF |
xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
Example
Create a drop-down list with four options:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<label> tag :
Definition and Usage
The <label> tag defines a label for an <input> element.
The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control.
The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute | Value | Description | DTD |
element_id | Specifies which form element a label is bound to | STF |
Standard Attributes
The <label> tag supports the following standard attributes:
Attribute | Value | Description | DTD |
accesskey | character | Specifies a keyboard shortcut to access an element | STF |
class | classname | Specifies a classname for an element | STF |
dir | rtl ltr | Specifies the text direction for the content in an element | STF |
id | id | Specifies a unique id for an element | STF |
lang | language_code | Specifies a language code for the content in an element | STF |
style | style_definition | Specifies an inline style for an element | STF |
title | text | Specifies extra information about an element | STF |
xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
<legend> tag:
Definition and Usage
The <legend> tag defines a caption for the <fieldset> element.
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute | Value | Description | DTD |
top bottom left right | Deprecated. Use styles instead. Specifies the alignment of the caption | TF |
Standard Attributes
The <legend> tag supports the following standard attributes:
Attribute | Value | Description | DTD |
accesskey | character | Specifies a keyboard shortcut to access an element | STF |
class | classname | Specifies a classname for an element | STF |
dir | rtl ltr | Specifies the text direction for the content in an element | STF |
id | id | Specifies a unique id for an element | STF |
lang | language_code | Specifies a language code for the content in an element | STF |
style | style_definition | Specifies an inline style for an element | STF |
title | text | Specifies extra information about an element | STF |
xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
Example
Group related elements in a form:
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
Links are specified in HTML using the <a> tag.
The <a> tag can be used in two ways:
- To create a link to another document, by using the href attribute
- To create a bookmark inside a document, by using the name attribute
HTML Link Syntax
The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>
The href attribute specifies the destination of a link.
Example
<a href="http://www.abc.com/">Visit W3Schools</a>
which will display like this: Visit W3Schools
Clicking on this hyperlink will send the user to W3Schools' homepage.
Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute | Value | Description | DTD |
char_encoding | Specifies the character-set of a linked document | STF | |
coordinates | Specifies the coordinates of a link | STF | |
URL | Specifies the URL of the page the link goes to | STF | |
language_code | Specifies the language of the linked document | STF | |
section_name | Specifies the name of an anchor | STF | |
text | Specifies the relationship between the current document and the linked document | STF | |
text | Specifies the relationship between the linked document and the current document | STF | |
default rect circle poly | Specifies the shape of a link | STF | |
_blank _parent _self _top framename | Specifies where to open the linked document | TF |
Standard Attributes
The <a> tag supports the following standard attributes:
Attribute | Value | Description | DTD |
accesskey | character | Specifies a keyboard shortcut to access an element | STF |
class | classname | Specifies a classname for an element | STF |
dir | rtl ltr | Specifies the text direction for the content in an element | STF |
id | id | Specifies a unique id for an element | STF |
lang | language_code | Specifies a language code for the content in an element | STF |
style | style_definition | Specifies an inline style for an element | STF |
tabindex | number | Specifies the tab order of an element | STF |
title | text | Specifies extra information about an element | STF |
xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
The example below will open the linked document in a new browser window or a new tab:
Example
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
HTML Links - The name Attribute
The name attribute specifies the name of an anchor.
The name attribute is used to create a bookmark inside an HTML document.
Note: The upcoming HTML5 standard suggests using the id attribute instead of the name attribute for specifying the name of an anchor. Using the id attribute actually works also for HTML4 in all modern browsers.
Bookmarks are not displayed in any special way. They are invisible to the reader.
Example
A named anchor inside an HTML document:
<a name="tips">Useful Tips Section</a>
Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a>
Or, create a link to the "Useful Tips Section" from another page:
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
Visit the Useful Tips Section</a>
The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.
Each table may have an associated caption (see the CAPTION element) that provides a short description of the table's purpose. A longer description may also be provided (via the summary attribute) for the benefit of people using speech or Braille-based user agents.
Table rows may be grouped into a head, foot, and body sections, (via the THEAD, TFOOT and TBODY elements, respectively). Row groups convey additional structural information and may be rendered by user agents in ways that emphasize this structure. User agents may exploit the head/body/foot division to support scrolling of body sections independently of the head and foot sections. When long tables are printed, the head and foot information may be repeated on each page that contains table data.
Table cells may either contain "header" information (see the TH element) or "data" (see the TD element). Cells may span multiple rows and columns. The HTML 4 table model allows authors to label each cell so that non-visual user agents may more easily communicate heading information about the cell to the user. Not only do these mechanisms greatly assist users with visual disabilities, they make it possible for multi-modal wireless browsers with limited display capabilities (e.g., Web-enabled pagers and phones) to handle tables.
<table> tag Attributes :
id – unique alphanumeric identifier.
Class – class of the element
title – holds the additional information
bgcolor – defines background color
border – defines table border ( numaric value )
cellspacing – defines space between table-cells
cellpadding – defines space between cell contant and cell border
HTML Table Tags
Tag | Description |
Defines a table | |
Defines a table header | |
Defines a table row | |
Defines a table cell | |
Defines a table caption | |
Defines a group of columns in a table, for formatting | |
Defines attribute values for one or more columns in a table | |
Groups the header content in a table | |
Groups the body content in a table |
<td> and <th> tag attributes :
This attribute specifies the number of rows spanned by the current cell. The default value of this attribute is one ("1"). The value zero ("0") means that the cell spans all rows from the current row to the last row of the table section (THEAD, TBODY, or TFOOT) in which the cell is defined.
This attribute specifies the number of columns spanned by the current cell. The default value of this attribute is one ("1"). The value zero ("0") means that the cell spans all columns from the current column to the last column of the column group (COLGROUP) in which the cell is defined.
Deprecated. This attribute supplies user agents with a recommended cell width.
Deprecated. This attribute supplies user agents with a recommended cell height.
<tr> tag attributes :
Attributes defined elsewhere
- id, class (document-wide identifiers)
- lang (language information), dir (text direction)
- title (element title)
- style (inline style information )
- bgcolor (background color)
- align, char, charoff, valign (cell alignment)
Table Example
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How the HTML code above looks in a browser:
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
Example 2 :
<table border="1" width="300px" cellspacing="5" cellpadding="10" bordercolor="red">
<tr>
<th>Id</th><th>Name</th><th>class</th>
</tr>
<tr>
<td>1</td><td>abc</td><td>fybca</td>
</tr>
<tr>
<td>1</td><td>abc</td><td>fybca</td>
</tr>
<tr>
<td colspan="3" align="center">fybca</td>
</tr>
</table>
HTML <img> tag |
Definition and Usage
The <img> tag defines an image in an HTML page.
The <img> tag has two required attributes: src and alt.
Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.
Tip: To link an image to another document, simply nest the <img> tag inside <a> tags.
Required Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute | Value | Description | DTD |
text | Specifies an alternate text for an image | STF | |
URL | Specifies the URL of an image | STF |
Optional Attributes
Attribute | Value | Description | DTD |
top bottom middle left right | Deprecated. Use styles instead. Specifies the alignment of an image according to surrounding elements | TF | |
pixels | Deprecated. Use styles instead. Specifies the width of the border around an image | TF | |
pixels % | Specifies the height of an image | STF | |
pixels | Deprecated. Use styles instead. Specifies the whitespace on left and right side of an image | TF | |
ismap | Specifies an image as a server-side image-map | STF | |
URL | Specifies the URL to a document that contains a long description of an image | STF | |
#mapname | Specifies an image as a client-side image-map | STF | |
pixels | Deprecated. Use styles instead. Specifies the whitespace on top and bottom of an image | TF | |
pixels % | Specifies the width of an image | STF |
Standard Attributes
The <img> tag supports the following standard attributes:
Attribute | Value | Description | DTD |
class | classname | Specifies a classname for an element | STF |
dir | rtl ltr | Specifies the text direction for the content in an element | STF |
id | id | Specifies a unique id for an element | STF |
lang | language_code | Specifies a language code for the content in an element | STF |
style | style_definition | Specifies an inline style for an element | STF |
title | text | Specifies extra information about an element | STF |
xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
Example
How to insert an image:
<img src="smiley.gif" alt="Smiley face" height="42" width="42" />
Definition and Usage
The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute | Value | Description | DTD |
number | Deprecated. Use styles instead. Specifies the maximum number of characters per line | TF |
Standard Attributes
The <pre> tag supports the following standard attributes:
Attribute | Value | Description | DTD |
class | classname | Specifies a classname for an element | STF |
dir | rtl ltr | Specifies the text direction for the content in an element | STF |
id | id | Specifies a unique id for an element | STF |
lang | language_code | Specifies a language code for the content in an element | STF |
style | style_definition | Specifies an inline style for an element | STF |
title | text | Specifies extra information about an element | STF |
xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
Example
Preformatted text:
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
<Div> and <Span> tag |
<div> tag :
Definition and Usage
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used to group block-elements to format them with styles.
Optional Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute | Value | Description | DTD |
left right center justify | Deprecated. Use styles instead. Specifies the alignment of the content inside a <div> element | TF |
Standard Attributes
The <div> tag supports the following standard attributes:
Attribute | Value | Description | DTD |
class | classname | Specifies a classname for an element | STF |
dir | rtl ltr | Specifies the text direction for the content in an element | STF |
id | id | Specifies a unique id for an element | STF |
lang | language_code | Specifies a language code for the content in an element | STF |
style | style_definition | Specifies an inline style for an element | STF |
title | text | Specifies extra information about an element | STF |
xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
Example
A section in a document that will be displayed in green:
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
<span> tag :
Definition and Usage
The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or a part of a document.
When the text is hooked in a <span> element you can add styles to the content, or manipulate the content with for example JavaScript.
Standard Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
The <span> tag supports the following standard attributes:
Attribute | Value | Description | DTD |
class | classname | Specifies a classname for an element | STF |
dir | rtl ltr | Specifies the text direction for the content in an element | STF |
id | id | Specifies a unique id for an element | STF |
lang | language_code | Specifies a language code for the content in an element | STF |
style | style_definition | Specifies an inline style for an element | STF |
title | text | Specifies extra information about an element | STF |
xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
Example
A text with a <span> element that is styled with CSS:
<p>My mother has <span style="color:lightblue">light blue</span> eyes.</p>
HTML Image Map |
What is an image map?
An image map is an active clickable image that loads different web pages depending on what part of the image is clicked. In an image map, the image is divided into regions or areas with each region or area linked to a different URL. Thus an image map links the various areas of an image with a series of URLs. These regions or areas are also called hotspots. Thus an image map is an image on a web page that contains hotspots. An image map on your site is to your website what a real map is to finding the Cancun hotels or island resort you are staying on while on your Mexican or Dominican Republic vacation- they guide a person on your website easily.
For example, here is a simple menu I created in Paint Shop Pro. This is one image that has been divided into four areas with each area linking to a different page on my website.
As you move the mouse pointer over any of the four areas, notice the URL on the Status bar at the bottom of the browser window and notice that as you go into another region, the URL changes to the URL of the new region. Now take a moment and click in the various areas to see the different web pages load. When you visit a link, click on the BACK button to return to this page.
ADVANTAGES OF USING IMAGE MAPS
- Image maps provide an alternative to loading a page containing several linked images.
- The image map allows you to use a single image to provide links to a number of different URLs. This is especially useful if you have a website with a lot of images and you do not want to slow down the loading of pages over slow connections.
- Image maps can provide an aesthetically pleasing alternative to cluttered pages.
- Image maps work independently of your web server. That is, image maps are interpreted by the visitor's browser and not by your web server. With image maps, you place all the necessary data to run the map in your HTML document. Thus when a visitor (a client) clicks on the image, the browser processes the coordinates of the clicked point without any interaction with your web server whether it be shared hosting or not. So the visitor's browser does all the work.
Some web designers also include alternative text links for the image map. That is, the links in the image map are also repeated somewhere else on the web page as text links as in:
| <A HREF="index.htm">Home Page</A> | <A HREF="intro.htm">Introduction</A> |
These text links are usually placed at the bottom of the web page. You may wish to include text links for browsers that do not display images. These include non-graphical browsers such as Lynx as well as browsers who have had their images turned off.
CREATING OUR FIRST IMAGE MAP
We will now study our first image map and we will do it with the above image. Here again is the image.
Here are the statements that give this image map.
First we have the image tag which is:
<P ALIGN="center"><IMG SRC="map1.gif" WIDTH="400" HEIGHT="25" BORDER="0" USEMAP="#menuline" ALT="Image Map"></P>
Discussion:
- The first part of this statement (<P ALIGN="center">) centers the image using a paragraph tag. Note the </P> at the end of the statement to indicate that the paragraph ends and the centering is turned off.
- The name of the image is map1.gif. Because of the absence of a path to the image, it is assumed that the image is located in the same folder as the HTML document.
- The width of the image is 400 pixels and the height is 25 pixels.
- There is no border around the image (BORDER="0"). This was just a personal choice. You may wish to include a border around the image.
- The attribute USEMAP tells the browser that this is an image map defined under the name menuline. Thus USEMAP="#menuline" tells the browser to USE the MAP file named menuline located somewhere in this HTML document. The # indicates an internal link on the same page - much like that of a page jump (Lesson Six). The USEMAP attribute tells the browser which image map file to use for the image. This example uses the image map file named menuline. We must associate a name with the map file and the name you choose is up to you. The map file contains all the necessary data to run the image map. You can have any number of image maps in the same HTML document as each image map will have its own unique name. Note that the name is case sensitive. Thus USEMAP="#menuline" is different from USEMAP="#Menuline".
You can think of an image map having basically two parts - (1) the image itself and (2) an invisible map placed over the image. This invisible map breaks the image down into areas (also called regions or hotspots) and assigns a link to each area. These areas are defined by coordinates. Thus when the visitor clicks on the image, USEMAP="#menuline" tells the browser to go to the map file named menuline to determine the required links and hotspots.
Here are the lines for the map file named menuline with a discussion to follow:
<BODY>
<MAP NAME="menuline">
<AREA SHAPE="rect" COORDS="0,0,100,24" HREF="index.htm">
<AREA SHAPE="rect" COORDS="101,0,200,24" HREF="intro.htm">
<AREA SHAPE="rect" COORDS="201,0,300,24" HREF="lesson21.htm">
<AREA SHAPE="rect" COORDS="301,0,400,24" HREF="topics.htm">
</MAP>
<MAP NAME="menuline">
<AREA SHAPE="rect" COORDS="0,0,100,24" HREF="index.htm">
<AREA SHAPE="rect" COORDS="101,0,200,24" HREF="intro.htm">
<AREA SHAPE="rect" COORDS="201,0,300,24" HREF="lesson21.htm">
<AREA SHAPE="rect" COORDS="301,0,400,24" HREF="topics.htm">
</MAP>
- I will explain later how these numbers in the COORDS attribute were derived.
- I placed the MAP element right after the opening BODY tag but it can be placed anywhere in the BODY of the HTML document. The map file and the image itself are two separate and distinct objects which combine to produce an effect.
- Having the image map data for an image map in a completely separate HTML file is not supported by Firefox and possibly by other browsers as well. Therefore you should place the map file in the same HTML document as the image tag that references the map.
- The MAP element provides ALL the image map data. All the information on the hotspots in the image is found here. Note that MAP is a container element in that everything between the opening and closing MAP tags is part of the map file.
- The MAP element has one attribute which is the NAME attribute. In our example, the value of the NAME attribute is menuline (NAME="menuline") which matches the name in the IMG tag. Note that the # symbol is not required here.
- Note that this map file contains a number of AREA tags which are located between the opening and closing MAP tags. Recall that our image has four regions or areas and that is why there are four AREA tags. In other words, each hot zone is defined by an AREA tag.
- The HREF attribute specifies the URL that the hotspot points to. Thus if the visitor clicks in the first hotspot, the browser will load my home page which is called index.htm. You can of course link to a web page located anywhere on the World Wide Web. Just make sure to include the complete URL of the web page you are linking to.
- The AREA tag is also used to define the SHAPE of the region or hotspot. Note that the SHAPE of each region or hotspot is that of a RECTANGLE. SHAPE="rect" could also be written as SHAPE="rectangle". As we will learn in the next section, the shape can also be a circle or a polygon.
- The COORDS attribute defines the coordinates of the shape.
The above coordinates in our map file can be broken down as follows:
Note that for <AREA SHAPE="rect" COORDS="0,0,100,24" HREF="index.htm">, the "0,0,100,24" breaks down into two pairs of coordinates - namely 0,0 and 100,24. The first pair of coordinates represents the top left corner of the rectangular region and the second pair represents the bottom right corner of the rectangle. That's all it takes to define a rectangular region - two pairs of coordinates.
With any pair of coordinates, such as with 100,24, the first number (100) represent the horizontal distance in pixels from the left side of the image and the second number (24) represents the vertical distance in pixels from the top of the image.
Note that ALL the numbers in the COORDS attribute are separated with commas (,). I have also seen pairs of coordinates separated with a space as in:
COORDS="0,0 100,24"
However, the World Wide Web Consortium (the W3C) recommends using commas for separators.
If you think back to the Mathematics classroom, points on a graph are often written in the form (x,y) where x represents the horizontal distance from the center (or origin) and y represents the vertical distance from the center. Thus a rectangular hotspot is defined as COORDS="x1,y1,x2,y2" where x1,y1 is the top left corner point of the rectangle and x2,y2 is the bottom right corner point of the rectangle. Thus you can translate the COORDS attribute for the second region or hotspot as "The rectangle goes from x=101, y=0 to x=200, y=24". Thus what the MAP element does is lay a point graph (a map) over the image. The map is simply an invisible grid of points. The image is there for the visual. It is only there for the user to see and use as a guide. It is the map that is laying on top of the image that is used by the browser - thus the name IMAGE MAP.
Now where do these coordinates come from? I got them from Paint Shop Pro but you can get them from any paint program. For example, if you have a paint program, save this image without the image map. I named it map1.gif. Here is the image without the image map:
Now load the image into your paint program. With Paint Shop Pro, when you move the mouse pointer over the image you can see the coordinates changing on the status bar at the bottom of the screen. Note that the top left corner is 0,0 and that the bottom right corner of the first hotspot is around 100,24. I simply recorded these numbers and entered them in the AREA tag. Note that coordinates for any hotspot is based on the fact that the top left corner of any image is defined to be 0,0.
If you do not have a paint program, you can download your own copy of Paint Shop Pro, by choosing "Download Paint Shop Pro and Mapedit" from the links at the very top of this page.
There are also image map making software that will do all the work for you in creating an image map and we will get into that later in this lesson.
The rectangle is not the only shape involved in image maps. The following section deals with all the possible shapes for an image map.
Problem 1: If the URL for CNN is www.cnn.com/ and if the hotspot is a rectangle defined by 25,70 and 115,135 what would be the AREA tag?