Scribd
Upload
3 views45 pages

HTML Lists Notes

The document provides an overview of HTML lists, including unordered lists (<ul>), ordered lists (<ol>), and definition lists (<dl>), detailing their structure, attributes, and examples. It also covers HTML tables, explaining how to create tables with rows and columns, use table headings, and adjust cell spacing and padding. Additionally, it discusses attributes for customizing table appearance, such as background colors and images, as well as table dimensions and captions.

Uploaded by

franckarani
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views45 pages

HTML Lists Notes

The document provides an overview of HTML lists, including unordered lists (<ul>), ordered lists (<ol>), and definition lists (<dl>), detailing their structure, attributes, and examples. It also covers HTML tables, explaining how to create tables with rows and columns, use table headings, and adjust cell spacing and padding. Additionally, it discusses attributes for customizing table appearance, such as background colors and images, as well as table dimensions and captions.

Uploaded by

franckarani
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

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
<!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 following result:

 Beetroot
 Ginger
 Potato
 Radish

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

1
Example

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

<!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 following result:

 Beetroot
 Ginger
 Potato
 Radish

Example

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

<!DOCTYPE html>
<html>
<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 following result:

 Beetroot
 Ginger
 Potato
 Radish

2
Example

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

<!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 following result:

o Beetroot
o Ginger
o Potato
o 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
<!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 following result:

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

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


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

Example

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

<!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 following result:

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

Example

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

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>

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

This will produce following result:

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

Example

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

<!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 following result:

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

Example

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

<!DOCTYPE html>
<html>
<head>

5
<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 following result:

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

Example

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

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

6
<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" >

<!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>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:

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

HTML Definition Lists


HTML and XHTML support 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
<!DOCTYPE html>
<html>

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

This will produce following result:

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

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

Example
<!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 following result:

Row 1, Column 1 Row 1, Column 2


Row 2, Column 1 Row 2, Column 2

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

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.

Example

9
<!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 following result:

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

Cellpadding and Cellspacing Attributes


There are two attribiutes called cellpadding and cellspacing which you will use to adjust the
white space in your table cells. The cellspacing attribute defines the width of the border, while
cellpadding represents the distance between cell borders and the content within a cell.

Example
<!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>

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

This will produce 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
<!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 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

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

Example
<!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 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

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

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/[Link]">

12
<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 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 heightattrubutes. You can specify table
width or height in terms of pixels or in terms of percentage of available screen area.

Example
<!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 following result:

Row 1, Column 1 Row 1, Column 2

13
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
<!DOCTYPE html>
<html>
<head>
<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 following result:

This is the caption


row 1, column 1 row 1, columnn 2
row 2, column 1 row 2, columnn 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>

14
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</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 following result:

This is the head of the table


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

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.

<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>

15
</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 following result:

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

HTML <style> Tag


The HTML <style> tag is used for declaring style sheets within your HTML document.

16
The <style> element does not represent actual content for the user. Rather, it is used for styling
the content.

Syntax
The <style> tag is written as <style></style> with the style sheet inserted between the start
and end tags.

Like this:

<style>
Styles here...
</style>

You can use the type attribute to specify the style sheet language. In HTML 4 this is a required
attribute. From HTML5 it is optional. Like this:

<style type="text/css">
Styles here...
</style>

TABLE WITH STYLES

<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
<style>
table, th, td {
border: 1px solid orange;
}
</style>
</head>
<body>
<table>
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>

17
</table>
</body>
</html>

Styling USING COLOR


<!doctype html>
<html>
<head>
<title>Title...</title>
<style type="text/css">
p {color:green;}
h1 {color:orange;}
</style>
</head>
<body>
Content...
</body>
</html>

HTML Frames
18
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.

Example

Following is the example to create three horizontal frames:

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="/html/top_frame.htm" />
<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 following result:

19
Example

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

<!DOCTYPE html>
<html>
<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 following result:

The <frameset> Tag Attributes


Following are important attributes of the <frameset> tag:

20
Attribute Description
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 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="10%, 80%,10%".
cols  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.

This attribute works just like the cols attribute and takes the same values, but it is
used to specify the rows in the frameset. For example to create two horizontal
rows
frames, use rows="10%, 90%". You can specify the height of each row in the same
way as explained above for columns.
This attribute specifies the width of the border of each frame in pixels. For example
border
border="5". A value of zero means no border.
This attribute specifies whether a three-dimensional border should be displayed
frameborder between frames. This attrubute takes value either 1 (yes) or 0 (no). For example
frameborder="0" specifies no border.
This attribute specifies the amount of space between frames in a frameset. This can
framespacing take any integer value. For example framespacing="10" means there should be 10
pixels spacing between each frames.

The <frame> Tag Attributes


Following are important attributes of <frame> tag:

Attribute Description
This attribute is used to give the file name that should be loaded in the frame. Its
src value can be any URL. For example, src="/html/top_frame.htm" will load an
HTML file available in html directory.
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
name
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.
This attribute specifies whether or not the borders of that frame are shown; it
frameborder 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 This attribute allows you to specify the width of the space between the left and

21
right of the frame's borders and the frame's content. The value is given in pixels.
For example marginwidth="10".
This attribute allows you to specify the height of the space between the top and
marginheight bottom of the frame's borders and its contents. The value is given in pixels. For
example marginheight="10".
By default you can resize any frame by clicking and dragging on the borders of a
noresize frame. The noresize attribute prevents a user from being able to resize the frame.
For example noresize="noresize".
This attribute controls the appearance of the scrollbars that appear on the frame.
scrolling This takes values either "yes", "no" or "auto". For example scrolling="no" means it
should not have scroll bars.
This attribute allows you to provide a link to another page containing a long
longdesc description of the contents of the frame. For example
longdesc="[Link]"

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 [Link] 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 [Link] file has following code:

<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols="200, *">
<frame src="/html/[Link]" name="menu_page" />
<frame src="/html/[Link]" name="main_page" />
<noframes>
<body>
Your browser does not support frames.
</body>

22
</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 menubar implemented by [Link] file. The second column fills in
remaining space and will contain the main part of the page and it is implemented by [Link]
file. For all the three links available in menubar, we have mentioned target frame as main_page,
so whenever you click any of the links in menubar, available link will open in main_page.

Following is the content of [Link] file

<!DOCTYPE html>
<html>
<body bgcolor="#4a7d49">
<a href="[Link] target="main_page">Google</a>
<br /><br />
<a href="[Link] target="main_page">Microsoft</a>
<br /><br />
<a href="[Link] target="main_page">BBC News</a>
</body>
</html>

Following is the content of [Link] file:

<!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 [Link] file, it produces following result:

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

Option Description
_self Loads the page into the current frame.
_blank Loads a page into a new browser [Link] a new window.
Loads the page into the parent window, which in the case of a single frameset is the
_parent
main browser window.

23
_top Loads the page into the browser window, replacing any current frames.
targetframe Loads the page into a named targetframe.

Examples of frames

EXAMPLES

On this page you can see examples of different framesets.

top
bottom

<frameset rows="16%,84%">
<frame src="[Link]" name="top">
<frame src="[Link]" name="bottom">
</frameset>

tr
tl

bottom

<frameset rows="16%,84%">
<frameset cols="50%,50%">
<frame src="[Link]" name="tl">
<frame src="[Link]" name="tr">
</frameset>
<frame src="[Link]" name="bottom">
</frameset>

top

24
left right

<frameset rows="16%,84%">
<frame src="[Link]" name="top">
<frameset cols="50%,50%">
<frame src="[Link]" name="left">
<frame src="[Link]" name="right">
</frameset>
</frameset>

topleft topright

botleft botright

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


<frame src="[Link]" name="topleft">
<frame src="[Link]" name="topright">
<frame src="[Link]" name="botleft">
<frame src="[Link]" name="botright">
</frameset>

topleft topright
brtl brtr
botleft botrbot

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


<frame src="[Link]" name="topleft">
<frame src="[Link]" name="topright">
<frame src="[Link]" name="botleft">
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="[Link]" name="brtl">
<frame src="[Link]" name="brtr">
</frameset>
<frame src="[Link]" name="botrbot">

25
</frameset>
</frameset>

topleft topright

botleft botright

<frameset rows="240,240" cols="320,320">


<frame src="[Link]" name="topleft">
<frame src="[Link]" name="topright">
<frame src="[Link]" name="botleft">
<frame src="[Link]" name="botright">
</frameset>

topleft topright

botleft botright

<frameset rows="50%,*" cols="320,*">


<frame src="[Link]" name="topleft">
<frame src="[Link]" name="topright">
<frame src="[Link]" name="botleft">
<frame src="[Link]" name="botright">
</frameset>

HTML frames allow authors to present documents in multiple views, which may be independent
windows or subwindows. Multiple views offer designers a way to keep certain information
visible, while other views are scrolled or replaced. For example, within the same window, one
frame might display a static banner, a second a navigation menu, and a third the main document
that can be scrolled through or replaced by navigating in the second frame.

Here is a simple frame document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"


"[Link]
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>

26
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<NOFRAMES>
<P>This frameset document contains:
<UL>
<LI><A href="contents_of_frame1.html">Some neat contents</A>
<LI><IMG src="contents_of_frame2.gif" alt="A neat image">
<LI><A href="contents_of_frame3.html">Some other neat contents</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>

that might create a frame layout something like this:

---------------------------------------
| | |
| | |
| Frame 1 | |
| | |
| | |
|---------| |
| | Frame 3 |
| | |
| | |
| | |
| Frame 2 | |
| | |
| | |
| | |
| | |
---------------------------------------

If the user agent can't display frames or is configured not to, it will render the contents of the
NOFRAMES element.

16.2 Layout of frames


An HTML document that describes frame layout (called a frameset document) has a different
makeup than an HTML document without frames. A standard document has one HEAD section
and one BODY. A frameset document has a HEAD, and a FRAMESET in place of the BODY.

The FRAMESET section of a document specifies the layout of views in the main user agent
window. In addition, the FRAMESET section can contain a NOFRAMES element to provide
alternate content for user agents that do not support frames or are configured not to display
frames.

27
Elements that might normally be placed in the BODY element must not appear before the first
FRAMESET element or the FRAMESET will be ignored.

16.2.1 The FRAMESET element


<![%[Link]; [
<!ELEMENTFRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) -- window subdivision-->
<!ATTLIST FRAMESET
%coreattrs; -- id, class, style, title --
rows%MultiLengths; #IMPLIED -- list of lengths,
default: 100% (1 row) --
cols%MultiLengths; #IMPLIED -- list of lengths,
default: 100% (1 col) --
onload%Script; #IMPLIED -- all the frames have been loaded --
onunload%Script; #IMPLIED -- all the frames have been removed --
>
]]>

Attribute definitions

rows = multi-length-list[CN]

This attribute specifies the layout of horizontal frames. It is a comma-separated list of pixels,
percentages, and relative lengths. The default value is 100%, meaning one row.

cols = multi-length-list[CN]

This attribute specifies the layout of vertical frames. It is a comma-separated list of pixels,
percentages, and relative lengths. The default value is 100%, meaning one column.

Attributes defined elsewhere

 id, class (document-wide identifiers)


 title (element title)
 style (inline style information)
 onload, onunload (intrinsic events)

The FRAMESET element specifies the layout of the main user window in terms of rectangular
subspaces.

Rows and columns

Setting the rows attribute defines the number of horizontal subspaces in a frameset. Setting the
cols attribute defines the number of vertical subspaces. Both attributes may be set
simultaneously to create a grid.

28
If the rows attribute is not set, each column extends the entire length of the page. If the cols
attribute is not set, each row extends the entire width of the page. If neither attribute is set, the
frame takes up exactly the size of the page.

Frames are created left-to-right for columns and top-to-bottom for rows. When both attributes are
specified, views are created left-to-right in the top row, left-to-right in the second row, etc.

The first example divides the screen vertically in two (i.e., creates a top half and a bottom half).

<FRAMESET rows="50%, 50%">


...the rest of the definition...
</FRAMESET>

The next example creates three columns: the second has a fixed width of 250 pixels (useful, for
example, to hold an image with a known size). The first receives 25% of the remaining space and
the third 75% of the remaining space.

<FRAMESET cols="1*,250,3*">
...the rest of the definition...
</FRAMESET>

The next example creates a 2x3 grid of subspaces.

<FRAMESET rows="30%,70%" cols="33%,34%,33%">


...the rest of the definition...
</FRAMESET>

For the next example, suppose the browser window is currently 1000 pixels high. The first view
is allotted 30% of the total height (300 pixels). The second view is specified to be exactly 400
pixels high. This leaves 300 pixels to be divided between the other two frames. The fourth
frame's height is specified as "2*", so it is twice as high as the third frame, whose height is only
"*" (equivalent to 1*). Therefore the third frame will be 100 pixels high and the fourth will be
200 pixels high.

<FRAMESET rows="30%,400,*,2*">
...the rest of the definition...
</FRAMESET>

Absolute lengths that do not sum to 100% of the real available space should be adjusted by the
user agent. When underspecified, remaining space should be allotted proportionally to each
view. When overspecified, each view should be reduced according to its specified proportion of
the total space.

Nested frame sets

Framesets may be nested to any level.

29
In the following example, the outer FRAMESET divides the available space into three equal
columns. The inner FRAMESET then divides the second area into two rows of unequal height.

<FRAMESET cols="33%, 33%, 34%">


...contents of first frame...
<FRAMESET rows="40%, 50%">
...contents of second frame, first row...
...contents of second frame, second row...
</FRAMESET>
...contents of third frame...
</FRAMESET>

Sharing data among frames

Authors may share data among several frames by including this data via an OBJECT element.
Authors should include the OBJECT element in the HEAD element of a frameset document and
name it with the id attribute. Any document that is the contents of a frame in the frameset may
refer to this identifier.

The following example illustrates how a script might refer to an OBJECT element defined for an
entire frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"


"[Link]
<HTML>
<HEAD>
<TITLE>This is a frameset with OBJECT in the HEAD</TITLE>
<!-- This OBJECT is not rendered! -->
<OBJECT id="myobject" data="[Link]"></OBJECT>
</HEAD>
<FRAMESET>
<FRAME src="[Link]" name="bianca">
</FRAMESET>
</HTML>

<!-- In [Link] -->


<HTML>
<HEAD>
<TITLE>Bianca's page</TITLE>
</HEAD>
<BODY>
...the beginning of the document...
<P>
<SCRIPT type="text/javascript">
[Link]
</SCRIPT>
...the rest of the document...
</BODY>
</HTML>

30
The next example features nested FRAMESET elements to define two frames in the first row
and one frame in the second row:

<FRAMESET ROWS="*,100">
<FRAMESET COLS="40%,*">
<FRAME NAME="Menu" SRC="[Link]" TITLE="Menu">
<FRAME NAME="Content" SRC="[Link]" TITLE="Content">
</FRAMESET>
<FRAME NAME="Ad" SRC="[Link]" TITLE="Advertisement">
<NOFRAMES>
<BODY>
<H1>Table of Contents</H1>
<UL>
<LI>
<A HREF="reference/html40/">HTML 4 Reference</A>
</LI>
<LI>
<A HREF="reference/wilbur/">HTML 3.2 Reference</A>
</LI>
<LI>
<A HREF="reference/css/">CSS Guide</A>
</LI>
</UL>
<P>
<IMG SRC="[Link]" ALT="Ad: Does your bank charge too much?">
</P>
</BODY>
</NOFRAMES>
</FRAMESET>

HTML LINKS
You can create a link in an HTML page to another document, by using the HREF attribute. You
can use HREF attribute to links within your own directory tree limit or you can links to external
websites too.

TYPES OF LINKS

31
Internal Links

When you link your pages within your own directory tree limit is called Internal Link. While a
user browsing your website , the browser is already in your directory, then you can points links
from the current directory and don ' t need to specify a full URL path.

consider a directory hierarchy like this

If you are in HTML directory of [Link] , and you want to link an html page
tables/[Link] from HTML directory you can code like this

<a href="tables/[Link]">Table Border</a>

Here in this case you can avoid a full URL path like :

<a href="[Link] Border</a>

If all your html files are in the same directory , you can give just file name and extension in
HREF attribute.

External Links

External links which link your pages to other web sites.

e.g. If you want to create an external link from your website to [Link] help page, you can code
like this:

<a href="[Link] Help</a>

In order to create an external link to another web site, you need to know the other web site URL
with full path.

The src attribute identifies an image by a URL. The image defined by the URL is retrieved by
the browser and inserted into the document when the page loads. There are three different kinds
of URLs that can be used in the src attribute:

32
Relative vs. absolute path links
This is a link with relative path URL:

<a href="link/[Link]">Text Link</a>

The code will generate this link:

Text Link

Absolute

This is a link with absolute path URL:

<a href="[Link] Link</a>

The code will generate this link:

Text Link

TYPES OF URLS

Absolute URLs

Absolute

This refers to a URL where the full path is provided. For example:

<a href="[Link] Tutorial</a>

Relative URLs

This refers to a URL where the path, relative to the current location, is provided.

A relative URL does not include the domain name, and is relative to either the current
page, or the current domain. If you begin the URL without a slash ( / ), it will be
relative to the current page. If you begin with a slash, it will be relative to the domain.
It is almost always the best idea to use source URLs which are relative to the domain,
not the page. They will not break if the page content is moved or copied. Additionally,
when linking to images on your own site, it is almost always best to use relative URLs
rather than absolute URLs. This way, the URLs won't break when you change

33
domains (which will happen automatically if you use a development or staging server
in addition to your production one).
<imgsrc="/wp-content/uploads/[Link]">

Root relative
This refers to a URL where the path, relative to the domain's root, is provided.

For example, if we want to reference the


[Link] URL, and the current location is
[Link] we could use this:

HTML anchor link


HTML anchor link [Link] to link in the same page in HTML.

 Link to anchor on same page


 Link to anchor on another page

Link to anchor on same page


<a href="#example">Example headline</a>

The code will create this link:

Example headline

When pressing the above link the browser will jump to the heading below, with this code:

<h5><a id="example"></a>Example headline</h5>

Example headline

Some text...

Link to anchor on another page


<a href="../[Link]#generator">HTML link code generator</a>

The code will create this link:

34
HTML link code generator

When pressing the link the browser will jump to the html-link page section that has this code:

<h2><a id="generator"></a>HTML link code generator</h2>

HTML Download Link


How to write download link in HTML.

Download link is a link that is used to download a file from the server to the browser's directory
on the local disk.

The download link code is written as:

<a href="test_file.zip">Download File</a>

The code will create this link:

Download File

The code has the following parts:

 <a> is the link tag.


 href attribute sets the file to download.
 Download File is the text of the link.
 </a> is the link end tag.

HTML mailto link


mailto: HTML e-mail link, what is it, how to create, examples and code generator.

What is mailto link


Mailto link is a type of HTML link that activates the default mail client on the computer for
sending an e-mail.

The web browser requires a default e-mail client software installed on his computer in order to
activate the e-mail client.

If you have Microsoft Outlook, for example as your default mail client, pressing a mailto link
will open a new mail window.

35
How to create mailto link in HTML
The mailto link is written like regular link with extra parameters inside the href attribute:

<a href="[Link] text</a>

Parameter Description

[Link] e-mail recipient address

cc=name@[Link] carbon copy e-mail address

bcc=name@[Link] blind carbon copy e-mail address

subject=subject text subject of e-mail

body=body text body of e-mail

? first parameter delimiter

& other parameters delimiter

mailto examples
Mail to email address

<a href="[Link] mail</a>

The code will generate this link:

Send mail

Pressing the above link will open a new mail window:

36
Mail to email address with subject

<a href="[Link]
mail with subject</a>

The %20 represents space character.

The code will generate this link:

Send mail with subject

Pressing the above link will open a new mail window:

37
Mail to email address with cc, bcc, subject and body

<a href="[Link]
cc=name2@[Link]&bcc=name3@[Link]
&amp;subject=The%20subject%20of%20the%20email
&amp;body=The%20body%20of%20the%20email">
Send mail with cc, bcc, subject and body</a>

The %20 represents space character.

The code will generate this link:

Send mail with cc, bcc, subject and body

Pressing the above link will open a new mail window:

38
How to add spaces in the mail's subject or body
You can add spaces by writing %20 in the text of the subject or body.

<a href="[Link]
%20message%20body">Send mail</a>

How to add line break in the mail's body


You can add newline by writing %0D%0A in the text of the body.

<a href="[Link] mail</a>

Mailto link code generator


Link text:

To:

39
Cc:

Bcc:

Subject:

Body:

Generated HTML code:

Generated link view (change code & press Update View):

HTML button link

HTML button link code.

HTML button link

Without javascript:

<form action="../[Link]">
<input type="submit" value="This is a button link">
</form>

40
With javascript:

<input type="button" value="This is button link" onclick="[Link]='../html-


[Link]'">

Link color
Changing link color is done with css styling:

<a href="link/[Link]" style="color:red">Link color page</a>

The code will generate this link:

Link color page

Changing link background color is done with css styling:

<a href="link/[Link]" style="background-color:#ffffa0">Link color page</a>

The code will generate this link:

Link color page

HTML Images
Images are very important to beautify as well as to depict many complex concepts in simple way
on your web page. This tutorial will take you through simple steps to use images in your web
pages.

41
Adding pictures to the pages of your website can often make them more pleasing to the eye and
convey information better than using text alone. This process is accomplished by using HTML
code and an image file. The file can be from a different web page or stored on a web server.

Using the <img> tag


Within the HTML code for a web page, you may add an image using the <img>tag. Within the
<img> tag, you need to specify four attributes:

 Src - The source attribute indicates the location of the image. You may use a relative path
if the image is on the same server as your site, but images from another site require
absolute paths.
 Alt - The alternate text attribute is a written description of the image.
 Width - The width of the image.
 Height - The height of the image.

An optional attribute is Border, which allows you to specify a border around the image. The
border attribute is defined in pixel size. For example, using border=1 in the <img> tag means the
border around the image would be 1 pixel wide.

Note: The Border attribute has been deprecated in HTML5 and is not supported.

Insert Image
You can insert any image in your web page by using <img> tag. Following is the simple syntax
to use this tag.

<imgsrc="Image URL" ... attributes-list/>

The <img> tag is an empty tag, which means that it can contain only list of attributes and it has
no closing tag.

Example

To try following example, let's keep our HTML file [Link] and image file [Link] in the same
directory:

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<imgsrc="/html/images/[Link]"alt="Test Image"/>
</body>
</html>

42
You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify
correct image file name in src attribute. Image name is always case sensitive.

The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the
image cannot be displayed.

Set Image Location


Usually we keep our all the images in a separate directory. So let's keep HTML file [Link] in
our home directory and create a subdirectory images inside the home directory where we will
keep our image [Link].

Example

Assuming our image location is "/html/image/[Link]", try the following example:

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<imgsrc="/html/images/[Link]"alt="Test Image"/>
</body>
</html>

Set Image Width/Height


You can set image width and height based on your requirement using width and height
attributes. You can specify width and height of the image in terms of either pixels or percentage
of its actual size.

Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<imgsrc="/html/images/[Link]"alt="Test Image"width="150"height="100"/>
</body>
</html>

Set Image Border

43
By default image will have a border around it, you can specify border thickness in terms of
pixels using border attribute. A thickness of 0 means, no border around the picture.

Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<imgsrc="/html/images/[Link]"alt="Test Image"border="3"/>
</body>
</html>

This will produce following result:

Setting image Border

Set Image Alignment


By default image will align at the left side of the page, but you can use align attribute to set it in
the center or right.

Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<imgsrc="/html/images/[Link]"alt="Test Image"border="3"align="right"/>
</body>
</html>

Examples
The following examples show the actual HTML used to add the image at the top of this page.
They may be inserted anywhere in the body of your page. The first has a shorter URL because
the image is stored on our server; the second is how you would link to our image.

Example 1:

44
<imgsrc="pictures/[Link]" alt="3D HTML Letters" width="317" height="218">

Example 2:

<imgsrc="[Link] alt="3D HTML Letters"


width="317" height="218">

FORMATS OF IMAGES
The most common image formats to use for pictures, photos, logos, and other images is JPEG,
GIF, and PNG. Other image formats that are not widely supported such as BMP may not work in
all browsers.

45

You might also like