Scribd
Upload
58 views43 pages

HTML - Updated 25-8-20

HTML stands for Hyper Text Markup Language. It is a formatting language used to define the appearance and contents of a web page. HTML allows us to organize text, graphics, audio, and video on a web page using tags like <b>, <i>, <ul>, and <ol> that tell the browser how to display different elements. Tim Berners-Lee created HTML at CERN in the early 1990s.

Uploaded by

TIT18 JAVID ALI L
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
58 views43 pages

HTML - Updated 25-8-20

HTML stands for Hyper Text Markup Language. It is a formatting language used to define the appearance and contents of a web page. HTML allows us to organize text, graphics, audio, and video on a web page using tags like <b>, <i>, <ul>, and <ol> that tell the browser how to display different elements. Tim Berners-Lee created HTML at CERN in the early 1990s.

Uploaded by

TIT18 JAVID ALI L
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 43

HTML stands for Hyper Text Markup Language.

It is a formatting language used to


define the appearance and contents of a web page. It allows us to organize text, graphics,
audio, and video on a web page.
Key Points:
 The word Hypertext refers to the text which acts as a link.
 The word markup refers to the symbols that are used to define structure of the text.
The markup symbols tells the browser how to display the text and are often called
tags.
 The word Language refers to the syntax that is similar to any other language.
HTML was created by Tim Berners-Lee at CERN.

HTML Versions

The following table shows the various versions of HTML:

Version Year

HTML 1.0 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.0 1999

XHTML 2000

HTML5 2012

HTML Tags

Tag is a command that tells the web browser how to display the text, audio, graphics or
video on a web page.
Key Points:
 Tags are indicated with pair of angle brackets.
 They start with a less than (<) character and end with a greater than (>) character.
 The tag name is specified between the angle brackets.
 Most of the tags usually occur in pair: the start tag and the closing tag.
 The start tag is simply the tag name is enclosed in angle bracket whereas the closing
tag is specified including a forward slash (/).
 Some tags are the empty i.e. they don’t have the closing tag.
 Tags are not case sensitive.
 The starting and closing tag name must be the same. For example <b> hello </i> is
invalid as both are different.
 If you don’t specify the angle brackets (<>) for a tag, the browser will treat the tag
name as a simple text.
 The tag can also have attributes to provide additional information about the tag to the
browser.

Basic tags

The following table shows the Basic HTML tags that define the basic web page:

Tag Description

<html> </html> Specifies the document as a web page.

<head> </head> Specifies the descriptive information about the web documents.

<title> </title> Specifies the title of the web page.

<body> </body> Specifies the body of a web document.

The following code shows how to use basic tags.


<html>
<head> Heading goes here…</head>
<title> Title goes here…</title>
<body> Body goes here…</body>
</html>

Formatting Tags

The following table shows the HTML tags used for formatting the text:

Tag Description
<b> </b> Specifies the text as bold. Eg. this is bold text

<em> </em> It is a phrase text. It specifies the emphasized text. Eg. Emphasized text

<strong> </strong> It is a phrase tag. It specifies an important text. Eg. this is strong text

<i> </i> The content of italic tag is displayed in italic. Eg. Italic text

<sub> </sub> Specifies the subscripted text. Eg. X1

<sup> </sup> Defines the superscripted text. Eg. X2

<ins> </ins> Specifies the inserted text. Eg. The price of pen is now 2015.

<del> </del> Specifies the deleted text. Eg. The price of pen is now 2015.

<mark> </mark> Specifies the marked text. Eg. It is raining

Table Tags

Following table describe the commonaly used table tags:

Tag Description

<table> </table> Specifies a table.

<tr> </tr> Specifies a row in the table.

<th> </th> Specifies header cell in the table.

<td> </td> Specifies the data in an cell of the table.

<caption> </caption> Specifies the table caption.


<colgroup> </colgroup> Specifies a group of columns in a table for formatting.

List tags

Following table describe the commonaly used list tags:

Tag Description

<ul> </ul> Specifies an unordered list.

<ol> </ol> Specifies an ordered list.

<li> </li> Specifies a list item.

<dl> </dl> Specifies a description list.

<dt> </dt> Specifies the term in a description list.

<dd> </dd> Specifies description of term in a description list.

Frames

Frames help us to divide the browser’s window into multiple rectangular regions. Each
region contains separate html web page and each of them work independently.
A set of frames in the entire browser is known as frameset. It tells the browser how to divide
browser window into frames and the web pages that each has to load.
The following table describes the various tags used for creating frames:

Tag Description

<frameset> It is replacement of the <body> tag. It doesn’t contain the tags that are normally
</frameset> used in <body> element; instead it contains the <frame> element used to add
each frame.

<frame> Specifies the content of different frames in a web page.


</frame>

<base> </base> It is used to set the default target frame in any page that contains links whose
contents are displayed in another frame.

Forms

Forms are used to input the values. These values are sent to the server for processing. Forms
uses input elements such as text fields, check boxes, radio buttons, lists, submit buttons etc.
to enter the data into it.
The following table describes the commonly used tags while creating a form:

Tag Description

<form> </form> It is used to create HTML form.

<input> </input> Specifies the input field.

<textarea> </textarea> Specifies a text area control that allows to enter multi-line text.

<label> </label> Specifies the label for an input element.


<!DOCTYPE html>

<html>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

<p><b>Tip:</b> Use h1 to h6 elements only for headings. Do not use them just to make text
bold or big. Use other tags for that.</p>

</body>

</html>
<!DOCTYPE html>

<html>

<body>

<h1 style="text-align:center">This is heading 1</h1>

<h2 style="text-align:left">This is heading 2</h2>

<h3 style="text-align:right">This is heading 3</h3>

<h4 style="text-align:justify">This is heading 4</h4>

</body>

</html>

<!DOCTYPE html>
<html>

<head>
<title>HTML pre Tag</title>
</head>

<body>
<pre>
This text is
in a fixed-pitch
font, and it preserves
both spaces and line breaks
</pre>
</body>

</html>
Tag Description

<code> Defines a piece of computer code

<samp> Defines sample output from a computer program

<kbd> Defines keyboard input

<var> Defines a variable


<!DOCTYPE html>

<html>

<head>

<title>HTML br Tag</title>

</head>

<body>

<p>This is before the line break<br>

and this after the line break.

</p>

</body>

</html>

<p>The HTML <code>button</code> tag defines a clickable button.</p>

<p>The CSS <code>background-color</code> property defines the background color of an


element.</p>

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>

<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>


<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the
base, and <var>h</var> is the vertical height.</p>

<p>Message from my computer:</p>

<p><samp>File not found.<br>Press F1 to continue</samp></p>


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 the following result −

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


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

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 the following result −

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 the following result −

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 the following result −

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"> - Upper-Case Letters.
<ol type = "a"> - Lower-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 the following result −

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 the following result −

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 the following result −

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 the following result −

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 the following result −

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" >
<!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 the following result −

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

<!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>
This will produce the following result −
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

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

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

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 the distance between cell borders and the content within a cell.
<!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>

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

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

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

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

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

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>.
<!DOCTYPE html>
<html>

<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>
<!DOCTYPE html>

<html>

<head>

<title>TIME TABLE</title>

</head>

<body>

<table border = "1" cellspacing="1" bordercolor="blue" bgcolor="yellow">

<tr>

<th colspan="8">TIME TABLE</th>

</tr>

<tr>

<th>DAYS</th>

<th>1</th>

<th>2</th>

<th>3</th>

<th rowspan="7">lunch break</th>

<th>4</th>

<th>5</th>

<th>6</th>

</tr>

<tr>

<td>MONDAY</td>

<td>Accounts</td>
<td>English</td>

<td>Statistics</td>

<td>Banking</td>

<td align="center">-</td>

<td align="center">EP</td>

</tr>

<tr>

<td>TUESDAY</td>

<td>Statistics</td>

<td>Banking</td>

<td>English</td>

<td>Accounts</td>

<td align="center">-</td>

<td align="center">-</td>

</tr>

<tr>

<td>WEDNESDAY</td>

<td>English</td>

<td>Statistics</td>

<td>Accounts</td>

<td align="center">EP</td>

<td>Banking</td>

<td align="center">-</td>

</tr>

<tr>

<td>THURSDAY</td>

<td align="center">-</td>
<td align="center">CA</td>

<td>Statistics</td>

<td>English</td>

<td align="center">EP</td>

<td align="center">-</td>

</tr>

<tr>

<td>FRIDAY</td>

<td>Banking</td>

<td>Statistics</td>

<td>English</td>

<td colspan="2" align="center">ICT</td>

<td align="center">CA</td>

</tr>

<tr>

<td>SATURSDAY</td>

<td>Banking</td>

<td align="center">CA</td>

<td>Statistics</td>

<td colspan="2" align="center">English</td>

<td>Accounts</td>

</tr>

</table>

</body>

</html>
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.
Advantages of Using Frames

There are a number of advantages to using frames in Web pages:


 Mastheads, banners, ads, sidebars, and menus can remain visible at all times, while the
main content is displayed in a separate scrollable window.
 Content displayed in frames on multiple pages only requires that a single page be created
and maintained. Similar content included in table-based page layouts, for example, has to
be included in each page where it is displayed.
 Differing foreground colors, background colors, and background images can be
displayed in different frames, with a light-colored fore-ground against a dark-colored
background in one frame and the reverse in another frame, for example.
 Frames can make it easier for users to navigate a multi-page Web site, in that menus and
tables of contents can remain visible at all times within their own frame, while content is
switched in and out of a separate main content frame.

Disadvantages of Using Frames

 Search engines and Web directories might rank pages created using frames lower in
search query lists than they would if no frames were being used, because the root page
that contains the frame codes lacks textual content that can be indexed.
 Search engine robots also might not be able to follow frame links (links to pages
displayed in the individual frame windows) and thus may not be able to index other
pages included in a framed site.
 Using search engines or other third-party links, visitors can directly access a page outside
of the frame where the author intends it to be displayed. That can be confusing, because
the page's content is viewed out of context. Such visitors may also have trouble finding
their way to the rest of your site if the framed page lacks links that they can follow.
 Users of older browsers that do not support frames may not be able to view your site. At
least one newer browser, the Opera browser, allows users to disable the display of framed
sites.
 While some text-only browsers will display frame links, users may not be able to
decipher the function or purpose of the listed links based on the content of the links
alone.
 Visitors cannot bookmark the individual framed pages within a framed site; they can only
bookmark the initial page that contains the frame codes.
 Only the title of the top-level page (containing the frame codes) is displayed in a
browser's window. Titles created for framed pages are not displayed.
 Although many browsers allow users to open a framed page in a separate window by
right-clicking on the page and selecting an option, the most widely used browser, Internet
Explorer, does not.
 The use of frames in a site can make it difficult to print a particular page.

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 −

<!DOCTYPE html>
<html>

<head>
<title>HTML Frames</title>
</head>
<noframes>
<body>Your browser does not support frames.</body>
</noframes>

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

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

The <frameset> Tag Attributes

Following are important attributes of the <frameset> tag −

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".
1 A percentage of the browser window. For example, to create three vertical frames, use cols
= "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

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

Following are the important attributes of <frame> tag −

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

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

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

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

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.

longdesc
8
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 –
<!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
<!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 −
<!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>

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 −

Sr.No Option & Description

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

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

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

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.

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"

9
width
This attribute specifies the width of <iframe>.
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.

Insert Image

You can insert any image in your web page by using <img> tag. Following is the simple
syntax to use this tag.
<img src = "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 test.htm and image file test.png in the
same directory −
<!DOCTYPE html>
<html>

<head>
<title>Using Image in Webpage</title>
</head>

<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>

</html>
This will produce the following result −
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 all the images in a separate directory. So let's keep HTML file test.htm in
our home directory and create a subdirectory images inside the home directory where we
will keep our image test.png.

Example

Assuming our image location is "image/test.png", try the following example −


<!DOCTYPE html>
<html>

<head>
<title>Using Image in Webpage</title>
</head>

<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>

</html>
This will produce the following result −

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>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>

</html>
This will produce the following result −

Set Image Border

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>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>

</html>
This will produce the following result −

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>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
</body>

</html>
This will produce the following result −

You might also like