Scribd
Upload
62 views

HTML - Tables

The document discusses HTML tables and their basic structure and formatting. Some key points: - HTML tables allow arranging data like text and images into rows and columns using <table>, <tr>, and <td> tags. - <th> is used for table headings, which are centered and bold by default. - Attributes like border, cellpadding, cellspacing control borders and spacing. - colspan and rowspan merge cells across rows or columns. - Background colors and images can be set on the whole table or individual cells. - Width and height attributes set the table dimensions.

Uploaded by

WAAD IBRA
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
62 views

HTML - Tables

The document discusses HTML tables and their basic structure and formatting. Some key points: - HTML tables allow arranging data like text and images into rows and columns using <table>, <tr>, and <td> tags. - <th> is used for table headings, which are centered and bold by default. - Attributes like border, cellpadding, cellspacing control borders and spacing. - colspan and rowspan merge cells across rows or columns. - Background colors and images can be set on the whole table or individual cells. - Width and height attributes set the table dimensions.

Uploaded by

WAAD IBRA
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 50

1/29/2020 HTML - Tables - Tutorialspoint

HTML - Tables

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows
and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and
<td> tag is used to create data cells. The elements under <td> are regular and left aligned by default

Example

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Tables</title>
</head>

<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

</body>
</html>

This will produce the following result −

Row 1, Column 1 Row 1, Column 2


Row 2, Column 1 Row 2, Column 2

Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If you do
not need a border, then you can use border = "0".

https://www.tutorialspoint.com/html/html_tables.htm 1/10
1/29/2020 HTML - Tables - Tutorialspoint

Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to
represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise
you can use <th> element in any row. Headings, which are defined in <th> tag are centered and bold by
default.

Example

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Header</title>
</head>

<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>

<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>

This will produce the following result −

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

Cellpadding and Cellspacing Attributes

There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in
your table cells. The cellspacing attribute defines space between table cells, while cellpadding represents

https://www.tutorialspoint.com/html/html_tables.htm 2/10
1/29/2020 HTML - Tables - Tutorialspoint

the distance between cell borders and the content within a cell.

Example

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Cellpadding</title>
</head>

<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>

This will produce the following result −

Name Salary

Ramesh Raman 5000

Shabbir Hussein 7000

Colspan and Rowspan Attributes


You will use colspan attribute if you want to merge two or more columns into a single column. Similar way
you will use rowspan if you want to merge two or more rows.

Example

Live Demo
https://www.tutorialspoint.com/html/html_tables.htm 3/10
1/29/2020 HTML - Tables - Tutorialspoint

<!DOCTYPE html>
<html>

<head>
<title>HTML Table Colspan/Rowspan</title>
</head>

<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>

This will produce the following result −

Column 1 Column 2 Column 3


Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

Tables Backgrounds

You can set table background using one of the following two ways −

bgcolor attribute − You can set background color for whole table or just for one cell.

background attribute − You can set background image for whole table or just for one cell.

You can also set border color also using bordercolor attribute.

https://www.tutorialspoint.com/html/html_tables.htm 4/10
1/29/2020 HTML - Tables - Tutorialspoint

Note − The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use these
attributes.

Example

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Background</title>
</head>

<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>

This will produce the following result −

Column 1 Column 2 Column 3


Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

https://www.tutorialspoint.com/html/html_tables.htm 5/10
1/29/2020 HTML - Tables - Tutorialspoint

Here is an example of using background attribute. Here we will use an image available in /images
directory.

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Background</title>
</head>

<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>

This will produce the following result. Here background image did not apply to table's header.

Column 1 Column 2 Column 3


Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

Table Height and Width


You can set a table width and height using width and height attributes. You can specify table width or
height in terms of pixels or in terms of percentage of available screen area.

https://www.tutorialspoint.com/html/html_tables.htm 6/10
1/29/2020 HTML - Tables - Tutorialspoint

Example

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Width/Height</title>
</head>

<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>

</html>

This will produce the following result −

Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2

Table Caption

The caption tag will serve as a title or explanation for the table and it shows up at the top of the table.
This tag is deprecated in newer version of HTML/XHTML.

Example

Live Demo
<!DOCTYPE html>
<html>

<head>
https://www.tutorialspoint.com/html/html_tables.htm 7/10
1/29/2020 HTML - Tables - Tutorialspoint

<title>HTML Table Caption</title>


</head>

<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>

<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>

<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>

</html>

This will produce the following result −

This is the caption


row 1, column 1 row 1, column 2
row 2, column 1 row 2, column 2

Table Header, Body, and Footer


Tables can be divided into three portions − a header, a body, and a foot. The head and foot are rather
similar to headers and footers in a word-processed document that remain the same for every page, while
the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are −

<thead> − to create a separate table header.

<tbody> − to indicate the main body of the table.

<tfoot> − to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups of data. But it is
notable that <thead> and <tfoot> tags should appear before <tbody>

Example

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Table</title>
https://www.tutorialspoint.com/html/html_tables.htm 8/10
1/29/2020 HTML - Tables - Tutorialspoint

</head>

<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>

<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>

</table>
</body>

</html>

This will produce the following result −

This is the head of the table


Cell 1 Cell 2 Cell 3 Cell 4
This is the foot of the table

Nested Tables

You can use one table inside another table. Not only tables you can use almost all the tags inside table
data tag <td>.

Example

Following is the example of using another table and other tags inside a table cell.

Live Demo
<!DOCTYPE html>
<html>

https://www.tutorialspoint.com/html/html_tables.htm 9/10
1/29/2020 HTML - Tables - Tutorialspoint

<head>
<title>HTML Table</title>
</head>

<body>
<table border = "1" width = "100%">

<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>

</table>
</body>

</html>

This will produce the following result −

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

https://www.tutorialspoint.com/html/html_tables.htm 10/10
1/29/2020 HTML - Lists - Tutorialspoint

HTML - Lists

HTML offers web authors three ways for specifying lists of information. All lists must contain one or more
list elements. Lists may contain −

<ul> − An unordered list. This will list items using plain bullets.
<ol> − An ordered list. This will use different schemes of numbers to list your items.

<dl> − A definition list. This arranges your items in the same way as they are arranged in a
dictionary.

HTML Unordered Lists

An unordered list is a collection of related items that have no special order or sequence. This list is
created by using HTML <ul> tag. Each item in the list is marked with a bullet.

Example

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

This will produce the following result −

Beetroot
Ginger
Potato
Radish

https://www.tutorialspoint.com/html/html_lists.htm 1/10
1/29/2020 HTML - Lists - Tutorialspoint

The type Attribute


You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc.
Following are the possible options −

<ul type = "square">


<ul type = "disc">
<ul type = "circle">

Example

Following is an example where we used <ul type = "square">

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

This will produce the following result −

Beetroot
Ginger
Potato
Radish

Example

Following is an example where we used <ul type = "disc"> −

Live Demo
<!DOCTYPE html>
<html>

https://www.tutorialspoint.com/html/html_lists.htm 2/10
1/29/2020 HTML - Lists - Tutorialspoint

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

This will produce the following result −

Beetroot
Ginger
Potato
Radish

Example

Following is an example where we used <ul type = "circle"> −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

This will produce the following result −

https://www.tutorialspoint.com/html/html_lists.htm 3/10
1/29/2020 HTML - Lists - Tutorialspoint

Beetroot
Ginger
Potato
Radish

HTML Ordered Lists

If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be
used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for
each successive ordered list element tagged with <li>.

Example

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result −

1. Beetroot
2. Ginger
3. Potato
4. Radish

The type Attribute


You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number.
Following are the possible options −

https://www.tutorialspoint.com/html/html_lists.htm 4/10
1/29/2020 HTML - Lists - Tutorialspoint

<ol type = "1"> - Default-Case Numerals.


<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

Example

Following is an example where we used <ol type = "1">

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result −

1. Beetroot
2. Ginger
3. Potato
4. Radish

Example

Following is an example where we used <ol type = "I">

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

https://www.tutorialspoint.com/html/html_lists.htm 5/10
1/29/2020 HTML - Lists - Tutorialspoint

<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result −

I. Beetroot
II. Ginger
III. Potato
IV. Radish

Example

Following is an example where we used <ol type = "i">

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result −

https://www.tutorialspoint.com/html/html_lists.htm 6/10
1/29/2020 HTML - Lists - Tutorialspoint

i. Beetroot
ii. Ginger
iii. Potato
iv. Radish

Example

Following is an example where we used <ol type = "A" >

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result −

A. Beetroot
B. Ginger
C. Potato
D. Radish

Example

Following is an example where we used <ol type = "a">

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

https://www.tutorialspoint.com/html/html_lists.htm 7/10
1/29/2020 HTML - Lists - Tutorialspoint

<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result −

a. Beetroot
b. Ginger
c. Potato
d. Radish

The start Attribute

You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are
the possible options −

<ol type = "1" start = "4"> - Numerals starts with 4.


<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.

Example

Following is an example where we used <ol type = "i" start = "4" >

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>

https://www.tutorialspoint.com/html/html_lists.htm 8/10
1/29/2020 HTML - Lists - Tutorialspoint

<li>Radish</li>
</ol>
</body>

</html>

This will produce the following result −

iv. Beetroot
v. Ginger
vi. Potato
vii. Radish

HTML Definition Lists

HTML and XHTML supports a list style which is called definition lists where entries are listed like in a
dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other
name/value list.
Definition List makes use of following three tags.
<dl> − Defines the start of the list
<dt> − A term
<dd> − Term definition
</dl> − Defines the end of the list

Example

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Definition List</title>
</head>

<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>

</html>

https://www.tutorialspoint.com/html/html_lists.htm 9/10
1/29/2020 HTML - Lists - Tutorialspoint

This will produce the following result −

HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol

https://www.tutorialspoint.com/html/html_lists.htm 10/10
1/29/2020 HTML - Text Links - Tutorialspoint

HTML - Text Links

A webpage can contain various links that take you directly to other pages and even specific parts of a
given page. These links are known as hyperlinks.

Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus
you can create hyperlinks using text or images available on a webpage.
Note − I recommend you to go through a short tutorial on Understanding URL

Linking Documents
A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening
<a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the
linked document. Following is the simple syntax to use <a> tag.

<a href = "Document URL" ... attributes-list>Link Text</a>

Example

Let's try following example which links http://www.tutorialspoint.com at your page −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Hyperlink Example</title>
</head>

<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
</body>

</html>

This will produce the following result, where you can click on the link generated to reach to the home page
of Tutorials Point (in this example).

Click following link

Tutorials Point

https://www.tutorialspoint.com/html/html_text_links.htm 1/6
1/29/2020 HTML - Text Links - Tutorialspoint

The target Attribute


We have used target attribute in our previous example. This attribute is used to specify the location where
linked document is opened. Following are the possible options −

Sr.No Option & Description

1
_blank

Opens the linked document in a new window or tab.

2
_self

Opens the linked document in the same frame.

3
_parent

Opens the linked document in the parent frame.

4
_top

Opens the linked document in the full body of the window.

5
targetframe

Opens the linked document in a named targetframe.

Example

Try following example to understand basic difference in few options given for target attribute.

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>

<body>
<p>Click any of the following links</p>
<a href = "/html/index.htm" target = "_blank">Opens in New</a> |
<a href = "/html/index.htm" target = "_self">Opens in Self</a> |
<a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
<a href = "/html/index.htm" target = "_top">Opens in Body</a>
</body>

https://www.tutorialspoint.com/html/html_text_links.htm 2/6
1/29/2020 HTML - Text Links - Tutorialspoint

</html>

This will produce the following result, where you can click on different links to understand the difference
between various options given for target attribute.

Click any of the following links

Opens in New | Opens in Self | Opens in Parent | Opens in Body

Use of Base Path

When you link HTML documents related to the same website, it is not required to give a complete URL for
every link. You can get rid of it if you use <base> tag in your HTML document header. This tag is used to
give a base path for all the links. So your browser will concatenate given relative path to this base path
and will make a complete URL.

Example

Following example makes use of <base> tag to specify base URL and later we can use relative path to all
the links instead of giving complete URL for every link.

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>

<body>
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
</body>

</html>

This will produce the following result, where you can click on the link generated HTML Tutorial to reach to
the HTML tutorial.
Now given URL <a href = "/html/index.htm" is being considered as <ahref =
"http://www.tutorialspoint.com/html/index.htm"

https://www.tutorialspoint.com/html/html_text_links.htm 3/6
1/29/2020 HTML - Text Links - Tutorialspoint

Click following link

HTML Tutorial

Linking to a Page Section

You can create a link to a particular section of a given webpage by using name attribute. This is a two-
step process.

Note − The name attribute deprecated in HTML5. Do not use this attribute. Use id and title attribute
instead.

First create a link to the place where you want to reach with-in a webpage and name it using <a...> tag as
follows −

<h1>HTML Text Links <a name = "top"></a></h1>

Second step is to create a hyperlink to link the document and place where you want to reach −

<a href = "/html/html_text_links.htm#top">Go to the Top</a>

This will produce following link, where you can click on the link generated Go to the Top to reach to the
top of the HTML Text Link tutorial.

Go to the Top

Setting Link Colors

You can set colors of your links, active links and visited links using link, alink and vlink attributes of
<body> tag.

Example

Save the following in test.htm and open it in any web browser to see how link, alink and vlink attributes
work.

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Hyperlink Example</title>
https://www.tutorialspoint.com/html/html_text_links.htm 4/6
1/29/2020 HTML - Text Links - Tutorialspoint

<base href = "https://www.tutorialspoint.com/">


</head>

<body alink = "#54A250" link = "#040404" vlink = "#F40633">


<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
</body>

</html>

This will produce the following result. Just check color of the link before clicking on it, next check its color
when you activate it and when the link has been visited.

Click following link

HTML Tutorial

Download Links

You can create text link to make your PDF, or DOC or ZIP files downloadable. This is very simple; you just
need to give complete URL of the downloadable file as follows −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Hyperlink Example</title>
</head>

<body>
<a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
</body>

</html>

This will produce following link and will be used to download a file.

Download PDF File

File Download Dialog Box

https://www.tutorialspoint.com/html/html_text_links.htm 5/6
1/29/2020 HTML - Text Links - Tutorialspoint

Sometimes it is desired that you want to give an option where a user will click a link and it will pop up a
"File Download" box to the user instead of displaying actual content. This is very easy and can be
achieved using an HTTP header in your HTTP response.

For example, if you want make a Filename file downloadable from a given link then its syntax will be as
follows.

#!/usr/bin/perl

# Additional HTTP Header


print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";

# Open the target file and list down its content as follows
open( FILE, "<FileName" );

while(read(FILE, $buffer, 100)){


print("$buffer");
}

Note − For more detail on PERL CGI programs, go through tutorial PERL and CGI .

https://www.tutorialspoint.com/html/html_text_links.htm 6/6
1/29/2020 HTML - Image Links - Tutorialspoint

HTML - Image Links

We have seen how to create hypertext link using text and we also learnt how to use images in our
webpages. Now, we will learn how to use images to create hyperlinks.

Example

It's simple to use an image as hyperlink. We just need to use an image inside hyperlink at the place of text
as shown below −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Image Hyperlink Example</title>
</head>

<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">
<img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>

</html>

This will produce the following result, where you can click on the images to reach to the home page of
Tutorials Point.

Click following link

This was the simplest way of creating hyperlinks using images. Next we will see how we can create
Mouse-Sensitive Image Links.

Mouse-Sensitive Images

https://www.tutorialspoint.com/html/html_image_links.htm 1/5
1/29/2020 HTML - Image Links - Tutorialspoint

The HTML and XHTML standards provides a feature that lets you embed many different links inside a
single image. You can create different links on the single image based on different coordinates available
on the image. Once different links are attached to different coordinates, we can click different parts of the
image to open target documents. Such mouse-sensitive images are known as image maps.

There are two ways to create image maps −

Server-side image maps − This is enabled by the ismap attribute of the <img> tag and requires
access to a server and related image-map processing applications.

Client-side image maps − This is created with the usemap attribute of the <img> tag, along
with corresponding <map> and <area> tags.

Server-Side Image Maps

Here you simply put your image inside a hyper link and use ismap attribute which makes it special image
and when the user clicks some place within the image, the browser passes the coordinates of the mouse
pointer along with the URL specified in the <a> tag to the web server. The server uses the mouse-pointer
coordinates to determine which document to deliver back to the browser.

When ismap is used, the href attribute of the containing <a> tag must contain the URL of a server
application like a cgi or PHP script etc. to process the incoming request based on the passed coordinates.
The coordinates of the mouse position are screen pixels counted from the upper-left corner of the image,
beginning with (0,0). The coordinates, preceded by a question mark, are added to the end of the URL.

For example, if a user clicks 20 pixels over and 30 pixels down from the upper-left corner of the following
image −
Which has been generated by the following code snippet −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>ISMAP Hyperlink Example</title>
</head>

<body>
<p>Click following link</p>

<a href = "/cgi-bin/ismap.cgi" target = "_self">


<img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>

</html>

https://www.tutorialspoint.com/html/html_image_links.htm 2/5
1/29/2020 HTML - Image Links - Tutorialspoint

Click following link

Then the browser sends the following search parameters to the web server which can be processed by
ismap.cgi script or map file and you can link whatever documents you like to these coordinates −

/cgi-bin/ismap.cgi?20,30

This way you can assign different links to different coordinates of the image and when those coordinates
are clicked, you can open corresponding linked document. To learn more about ismap attribute, you can
check How to use Image ismap?

Note − You will learn CGI programming when you will study Perl programming. You can write your
script to process these passed coordinates using PHP or any other script as well. For now, let's
concentrate on learning HTML and later you can revisit this section.

Client-Side Image Maps


Client side image maps are enabled by the usemap attribute of the <img /> tag and defined by special
<map> and <area> extension tags.

The image that is going to form the map is inserted into the page using the <img /> tag as a normal
image, except it carries an extra attribute called usemap. The value of the usemap attribute is the value
which will be used in a <map> tag to link map and image tags. The <map> along with <area> tags define
all the image coordinates and corresponding links.
The <area> tag inside the map tag, specifies the shape and the coordinates to define the boundaries of
each clickable hotspot available on the image. Here's an example from the image map −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>USEMAP Hyperlink Example</title>
</head>

<body>
<p>Search and click the hotspot</p>
https://www.tutorialspoint.com/html/html_image_links.htm 3/5
1/29/2020 HTML - Image Links - Tutorialspoint

<img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
<!-- Create Mappings -->

<map name = "html">


<area shape = "circle" coords = "80,80,20"
href = "/css/index.htm" alt = "CSS Link" target = "_self" />

<area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link"


href = "/jquery/index.htm" target = "_self" />
</map>
</body>

</html>

This will produce the following result −

Search and click the hotspot

Coordinate System

The actual value of coords is totally dependent on the shape in question. Here is a summary, to be
followed by detailed examples −
rect = x11 , y11 , x22 , y22

x11 and y1 are the coordinates of the upper left corner of the rectangle; x22 and y22 are the
coordinates of the lower right corner.

circle = xcc , ycc , radius

xcc and ycc are the coordinates of the center of the circle, and radius is the circle's radius. A circle
centered at 200,50 with a radius of 25 would have the attribute coords = "200,50,25"
poly = x11 , y11 , x22 , y22 , x33 , y33 , ... xnn , ynn

The various x-y pairs define vertices (points) of the polygon, with a "line" being drawn from one
point to the next point. A diamond-shaped polygon with its top point at 20,20 and 40 pixels
across at its widest points would have the attribute coords = "20,20,40,40,20,60,0,40".

All coordinates are relative to the upper-left corner of the image (0,0). Each shape has a related URL. You
can use any image software to know the coordinates of different positions.
https://www.tutorialspoint.com/html/html_image_links.htm 4/5
1/29/2020 HTML - Image Links - Tutorialspoint

https://www.tutorialspoint.com/html/html_image_links.htm 5/5
1/29/2020 HTML - Email Links - Tutorialspoint

HTML - Email Links

It is not difficult to put an HTML email link on your webpage but it can cause unnecessary spamming
problem for your email account. There are people, who can run programs to harvest these types of emails
and later use them for spamming in various ways.
You can have another option to facilitate people to send you emails. One option could be to use HTML
forms to collect user data and then use PHP or CGI script to send an email.
A simple example, check our Contact Us Form. We take user feedback using this form and then we
are using one CGI program which is collecting this information and sending us email to the one given
email ID.

Note − You will learn about HTML Forms in HTML Forms and you will learn about CGI in our another
tutorial Perl CGI Programming .

HTML Email Tag

HTML <a> tag provides you option to specify an email address to send an email. While using <a> tag as
an email tag, you will use mailto: email address along with href attribute. Following is the syntax of using
mailto instead of using http.

<a href = "mailto: [email protected]">Send Email</a>

This code will generate the following link which you can use to send email.

Send Email

Now, if a user clicks this link, it launches one Email Client (like Lotus Notes, Outlook Express etc. )
installed on your user's computer. There is another risk to use this option to send email because if user do
not have email client installed on their computer then it would not be possible to send email.

Default Settings
You can specify a default email subject and email body along with your email address. Following is the
example to use default subject and body.

<a href = "mailto:[email protected]?subject = Feedback&body = Message">


Send Feedback
</a>

This code will generate the following link which you can use to send email.

Send Feedback
https://www.tutorialspoint.com/html/html_email_links.htm 1/2
1/29/2020 HTML - Email Links - Tutorialspoint

https://www.tutorialspoint.com/html/html_email_links.htm 2/2
1/29/2020 HTML - Frames - Tutorialspoint

HTML - Frames

HTML frames are used to divide your browser window into multiple sections where each section can load
a separate HTML document. A collection of frames in the browser window is known as a frameset. The
window is divided into frames in a similar way the tables are organized: into rows and columns.

Disadvantages of Frames

There are few drawbacks with using frames, so it's never recommended to use frames in your webpages
−

Some smaller devices cannot cope with frames often because their screen is not big enough to
be divided up.
Sometimes your page will be displayed differently on different computers due to different screen
resolution.

The browser's back button might not work as the user hopes.

There are still few browsers that do not support frame technology.

Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines, how
to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols
attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which HTML
document shall open into the frame.

Note − The <frame> tag deprecated in HTML5. Do not use this element.

Example

Following is the example to create three horizontal frames −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Frames</title>
</head>

<frameset rows = "10%,80%,10%">


<frame name = "top" src = "/html/top_frame.htm" />
https://www.tutorialspoint.com/html/html_frames.htm 1/9
1/29/2020 HTML - Frames - Tutorialspoint

<frame name = "main" src = "/html/main_frame.htm" />


<frame name = "bottom" src = "/html/bottom_frame.htm" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>

</frameset>

</html>

This will produce the following result −

Top Frame

Main Frame

Bottom Frame

Example

Let's put the above example as follows, here we replaced rows attribute by cols and changed their width.
This will create all the three frames vertically −

Live Demo
<!DOCTYPE html>
<html>
https://www.tutorialspoint.com/html/html_frames.htm 2/9
1/29/2020 HTML - Frames - Tutorialspoint

<head>
<title>HTML Frames</title>
</head>

<frameset cols = "25%,50%,25%">


<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

</html>

This will produce the following result −

Main Frame
Top Frame Bottom Frame

The <frameset> Tag Attributes


Following are important attributes of the <frameset> tag −

https://www.tutorialspoint.com/html/html_frames.htm 3/9
1/29/2020 HTML - Frames - Tutorialspoint

Sr.No Attribute & Description

cols

Specifies how many columns are contained in the frameset and the size of each column. You
can specify the width of each column in one of the four ways −

Absolute values in pixels. For example, to create three vertical frames, use cols = "100, 500,
100".
A percentage of the browser window. For example, to create three vertical frames, use cols =
1 "10%, 80%, 10%".

Using a wildcard symbol. For example, to create three vertical frames, use cols = "10%, *,
10%". In this case wildcard takes remainder of the window.

As relative widths of the browser window. For example, to create three vertical frames, use cols
= "3*, 2*, 1*". This is an alternative to percentages. You can use relative widths of the browser
window. Here the window is divided into sixths: the first column takes up half of the window, the
second takes one third, and the third takes one sixth.

rows
This attribute works just like the cols attribute and takes the same values, but it is used to
2 specify the rows in the frameset. For example, to create two horizontal frames, use rows =
"10%, 90%". You can specify the height of each row in the same way as explained above for
columns.

border
3 This attribute specifies the width of the border of each frame in pixels. For example, border =
"5". A value of zero means no border.

frameborder

4 This attribute specifies whether a three-dimensional border should be displayed between


frames. This attribute takes value either 1 (yes) or 0 (no). For example frameborder = "0"
specifies no border.

framespacing

5 This attribute specifies the amount of space between frames in a frameset. This can take any
integer value. For example framespacing = "10" means there should be 10 pixels spacing
between each frames.

The <frame> Tag Attributes

https://www.tutorialspoint.com/html/html_frames.htm 4/9
1/29/2020 HTML - Frames - Tutorialspoint

Following are the important attributes of <frame> tag −

https://www.tutorialspoint.com/html/html_frames.htm 5/9
1/29/2020 HTML - Frames - Tutorialspoint

Sr.No Attribute & Description

src

1 This attribute is used to give the file name that should be loaded in the frame. Its value can be
any URL. For example, src = "/html/top_frame.htm" will load an HTML file available in html
directory.

name

This attribute allows you to give a name to a frame. It is used to indicate which frame a
2 document should be loaded into. This is especially important when you want to create links in
one frame that load pages into an another frame, in which case the second frame needs a
name to identify itself as the target of the link.

frameborder

3 This attribute specifies whether or not the borders of that frame are shown; it overrides the
value given in the frameborder attribute on the <frameset> tag if one is given, and this can take
values either 1 (yes) or 0 (no).

marginwidth

4 This attribute allows you to specify the width of the space between the left and right of the
frame's borders and the frame's content. The value is given in pixels. For example marginwidth
= "10".

marginheight
5 This attribute allows you to specify the height of the space between the top and bottom of the
frame's borders and its contents. The value is given in pixels. For example marginheight = "10".

noresize

6 By default, you can resize any frame by clicking and dragging on the borders of a frame. The
noresize attribute prevents a user from being able to resize the frame. For example noresize =
"noresize".

scrolling

7 This attribute controls the appearance of the scrollbars that appear on the frame. This takes
values either "yes", "no" or "auto". For example scrolling = "no" means it should not have scroll
bars.

8
longdesc

https://www.tutorialspoint.com/html/html_frames.htm 6/9
1/29/2020 HTML - Frames - Tutorialspoint

This attribute allows you to provide a link to another page containing a long description of the
contents of the frame. For example longdesc = "framedescription.htm"

Browser Support for Frames

If a user is using any old browser or any browser, which does not support frames then <noframes>
element should be displayed to the user.

So you must place a <body> element inside the <noframes> element because the <frameset> element is
supposed to replace the <body> element, but if a browser does not understand <frameset> element then
it should understand what is inside the <body> element which is contained in a <noframes> element.

You can put some nice message for your user having old browsers. For example, Sorry!! your browser
does not support frames. as shown in the above example.

Frame's name and target attributes


One of the most popular uses of frames is to place navigation bars in one frame and then load main
pages into a separate frame.

Let's see following example where a test.htm file has following code −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Target Frames</title>
</head>

<frameset cols = "200, *">


<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

</html>

Here, we have created two columns to fill with two frames. The first frame is 200 pixels wide and will
contain the navigation menu bar implemented by menu.htm file. The second column fills in remaining
space and will contain the main part of the page and it is implemented by main.htm file. For all the three
links available in menu bar, we have mentioned target frame as main_page, so whenever you click any of
the links in menu bar, available link will open in main page.

Following is the content of menu.htm file

Live Demo
https://www.tutorialspoint.com/html/html_frames.htm 7/9
1/29/2020 HTML - Frames - Tutorialspoint

<!DOCTYPE html>
<html>

<body bgcolor = "#4a7d49">


<a href = "http://www.google.com" target = "main_page">Google</a>
<br />
<br />

<a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>


<br />
<br />

<a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>


</body>

</html>

Following is the content of main.htm file −

Live Demo
<!DOCTYPE html>
<html>

<body bgcolor = "#b5dcb3">


<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>

</html>

When we load test.htm file, it produces following result −

Google
This is main page and content from any link will be
Microsoft displayed here.
BBC News So now click any link and see the result.

Now you can try to click links available in the left panel and see the result. The targetattribute can also
take one of the following values −

https://www.tutorialspoint.com/html/html_frames.htm 8/9
1/29/2020 HTML - Frames - Tutorialspoint

Sr.No Option & Description

_self
1
Loads the page into the current frame.

_blank
2
Loads a page into a new browser window. Opening a new window.

_parent
3 Loads the page into the parent window, which in the case of a single frameset is the main
browser window.

_top
4
Loads the page into the browser window, replacing any current frames.

targetframe
5
Loads the page into a named targetframe.

https://www.tutorialspoint.com/html/html_frames.htm 9/9
1/29/2020 HTML - Iframes - Tutorialspoint

HTML - Iframes

You can define an inline frame with HTML tag <iframe>. The <iframe> tag is not somehow related to
<frameset> tag, instead, it can appear anywhere in your document. The <iframe> tag defines a
rectangular region within the document in which the browser can display a separate document, including
scrollbars and borders. An inline frame is used to embed another document within the current HTML
document.

The src attribute is used to specify the URL of the document that occupies the inline frame.

Example
Following is the example to show how to use the <iframe> −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Iframes</title>
</head>

<body>
<p>Document content goes here...</p>

<iframe src = "/html/menu.htm" width = "555" height = "200">


Sorry your browser does not support inline frames.
</iframe>

<p>Document content also go here...</p>


</body>

</html>

This will produce the following result −

https://www.tutorialspoint.com/html/html_iframes.htm 1/4
1/29/2020 HTML - Iframes - Tutorialspoint

Document content goes here...

Google

Microsoft

BBC News

Document content also go here...

The <Iframe> Tag Attributes

Most of the attributes of the <iframe> tag, including name, class, frameborder, id, longdesc, marginheight,
marginwidth, name, scrolling, style, and title behave exactly like the corresponding attributes for the
<frame> tag.

Note − The frameborder, marginwidth, longdesc, scrolling, marginheight attributes deprecated in


HTML5. Do not use these attributes.

https://www.tutorialspoint.com/html/html_iframes.htm 2/4
1/29/2020 HTML - Iframes - Tutorialspoint

Sr.No Attribute & Description

1
src

This attribute is used to give the file name that should be loaded in the frame. Its value can be
any URL. For example, src = "/html/top_frame.htm" will load an HTML file available in html
directory.

2
name

This attribute allows you to give a name to a frame. It is used to indicate which frame a
document should be loaded into. This is especially important when you want to create links in
one frame that load pages into an another frame, in which case the second frame needs a
name to identify itself as the target of the link.

3
frameborder

This attribute specifies whether or not the borders of that frame are shown; it overrides the
value given in the frameborder attribute on the <frameset> tag if one is given, and this can take
values either 1 (yes) or 0 (no).

4
marginwidth

This attribute allows you to specify the width of the space between the left and right of the
frame's borders and the frame's content. The value is given in pixels. For example marginwidth
= "10".

5
marginheight

This attribute allows you to specify the height of the space between the top and bottom of the
frame's borders and its contents. The value is given in pixels. For example marginheight = "10".

6
height

This attribute specifies the height of <iframe>.

7
scrolling

This attribute controls the appearance of the scrollbars that appear on the frame. This takes
values either "yes", "no" or "auto". For example scrolling = "no" means it should not have scroll
bars.

8
longdesc
This attribute allows you to provide a link to another page containing a long description of the
contents of the frame. For example longdesc = "framedescription.htm"
https://www.tutorialspoint.com/html/html_iframes.htm 3/4
1/29/2020 HTML - Iframes - Tutorialspoint

9
width

This attribute specifies the width of <iframe>.

https://www.tutorialspoint.com/html/html_iframes.htm 4/4
1/29/2020 HTML - Blocks - Tutorialspoint

HTML - Blocks

All the HTML elements can be categorized into two categories (a) Block Level Elements (b)Inline
Elements.

Block Elements

Block elements appear on the screen as if they have a line break before and after them. For example, the
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address>
elements are all block level elements. They all start on their own new line, and anything that follows them
appears on its own new line.

Inline Elements

Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line
of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>,
<code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements.

Grouping HTML Elements


There are two important tags which we use very frequently to group various other HTML tags (i) <div> tag
and (ii) <span> tag

The <div> tag

This is the very important block level tag which plays a big role in grouping various other HTML tags and
applying CSS on group of elements. Even now <div> tag can be used to create webpage layout where we
define different parts (Left, Right, Top etc.) of the page using <div> tag. This tag does not provide any
visual change on the block but this has more meaning when it is used with CSS.

Example

Following is a simple example of <div> tag. We will learn Cascading Style Sheet (CSS) in a separate
chapter but we used it here to show the usage of <div> tag −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML div Tag</title>
</head>

<body>

https://www.tutorialspoint.com/html/html_blocks.htm 1/4
1/29/2020 HTML - Blocks - Tutorialspoint

<!-- First group of tags -->


<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>

<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>

<!-- Second group of tags -->


<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>

</html>

This will produce the following result −

https://www.tutorialspoint.com/html/html_blocks.htm 2/4
1/29/2020 HTML - Blocks - Tutorialspoint

This is first group

Following is a list of vegetables

Beetroot
Ginger
Potato
Radish

This is second group

Following is a list of fruits

Apple
Banana
Mango
Strawberry

The <span> tag

The HTML <span> is an inline element and it can be used to group inline-elements in an HTML
document. This tag also does not provide any visual change on the block but has more meaning when it is
used with CSS.
The difference between the <span> tag and the <div> tag is that the <span> tag is used with inline
elements whereas the <div> tag is used with block-level elements.

Example

Following is a simple example of <span> tag. We will learn Cascading Style Sheet (CSS) in a separate
chapter but we used it here to show the usage of <span> tag −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML span Tag</title>
</head>

<body>
<p>This is <span style = "color:red">red</span> and this is
<span style = "color:green">green</span></p>
</body>

</html>

https://www.tutorialspoint.com/html/html_blocks.htm 3/4
1/29/2020 HTML - Blocks - Tutorialspoint

This will produce the following result −

This is red and this is green

https://www.tutorialspoint.com/html/html_blocks.htm 4/4

You might also like