INTRODUCTION
HTML is a basic tool for designing a web page. It
stands for Hyper Text Markup Language. It is used for
documentation of the web page.
HTML is a combination of hyper text and markup
language. Hypertext is a way of crating multimedia
documents, it also provides links between the documents
and markup language is a method for embedding special tags
which describe the structure as well as the behavior of a
document.
HTML have a well-defined syntax and a formal
structure. The world wide web consortium(w3c) is the
primary organization that attempts to standardize HTML.
HTML is based on the Standard Generalized Marking
Language(SGML) a much large document processing system.
Purpose of HTML
• Developing intranet or extranet sites
• Developing help files
• Developing sites for entertainment
• Developing network applications
Tools Needed To Develop HTML
• HTML Editor Notepad
• A Web Browser Internet Explorer,Firefox,Chrome
• A Graphic Tool Picture is in Graphic Interchange
Format(GIF)
• A Web Server Used for putting web site in WWW
Advantages of HTML
1. HTML is a set of codes which can be used to create active
documents, and that is the document where other can
interact.
2. It provides the facility that jump from topic to topic rather
than finding and reading information linearly.
3. We can make that document interactive through special
hypertext links.
4. It tells the browser how to display the contents of
documents including text images and other support
media.
Structure of HTML Document
<Html>
<Head>
<Title> Title Name </Title>
</Head>
<Body>
Web Contents
</Body>
</Html>
Header Section
The header can contain identifying and other
supplementary information about the document or
media information.
The title is the heading that appears as the title of the
window.
Body Section
The body contain actually document content and HTML
markup used to structure or format the documents. The
body tag can have various attributes that are
background color , text color etc.
Simple Example
<html>
<head>
<title> A Simple HTML</title>
</head>
<body>
Welcome to the world wide web of HTML
</body>
</html>
OutPut Of the Simple Example
HTML Font Face Tag
Font face tag use for changing the font of your text, color of text
and size of text.
e.g.
<html>
<head>
<title>
Welcome To MyWorld!!!!!!!!!!
</title>
</head>
<body>
<font face="Impact" color="Pink" size="6">
Hello
</font>
</body>
</html>
Output Of the Font Tag
The BoldFace Tag(B) : The B tag displays text in boldface type.
The Italic Tag(I): The I tag displays text in Italic type.
The Underline Tag(U): The U tag underlines the text it encloses. Gaps between words in
the enclosed text are also underlined.
<br> means Break line means space between two words.
e.g.
<html>
<body>
<b> Hello</b>
<br><br>
<i> Hi</i>
<br><br>
<u>Dear</u>
</body>
</html>
Output
Heading Style Tags of HTML
The tag H1 to H6 display headings. The headings are used to structure information.
Headings are usually displayed in a bolder, larger font than normal body text. The <h1>
heading is the largest, uppermost, most important heading. The <h6> is the smallest
heading.
Example:
<html>
<head>
Heading Styles
</head>
<body>
<br><br>
<h1> Welcome to MyWorld</h1><br><br>
<h2> Welcome to MyWorld</h2><br><br>
<h3> Welcome to MyWorld</h3><br><br>
<h4> Welcome to MyWorld</h4><br><br>
<h5> Welcome to MyWorld</h5><br><br>
<h6> Welcome to MyWorld</h6><br><br>
</body>
</html>
Output
HTML Center Tag
This tag is used for aligning text to the center of the document. This tag is
always produced on the new line.
<html>
<head>
Center tag
</head>
<body>
<br><br>
<font face="Impact" color="orange" size="7">
<center>
HyperText Markup Language
</center>
</font>
</body>
</html>
Output
The Paragraph Tag
Using this tag we can create paragraph.
<html>
<head>
Paragraph
</head>
<body>
<br><br>
<font face="Impact" color="orange" size="7">
<center>
Microsoft Office
</center>
<p>
Notepad is a basic text editor that you can use to create simple documents.
The most common use for Notepad is to view or edit text (.txt) files, but many users find
Notepad a simple tool for creating Web pages.
Because Notepad supports only very basic formatting, you cannot accidentally
save special formatting in documents that need to remain pure text. This is especially
useful when creating HTML documents for a Web page because special characters or
other formatting may not appear in your published Web page or may even cause errors.
</p>
</font>
</body>
</html>
Output
The Horizontal Rule Tag
HR is used to draw horizontal rules across the browser window. A horizontal rule
is typically used to separate sections within a document. It has two tags such as
width and align.
<html>
<head>
Paragraph
</head>
<body>
<br><br>
<font face="Impact" color="orange" size="7">
<center>
Microsoft Office
</center>
<hr width="100%" color="Blue" size="5">
<p>
Notepad is a basic text editor that you can use to create simple documents. The
most common use for Notepad is to view or edit text (.txt) files, but many users find Notepad
a simple tool for creating Web pages.
</p>
</font>
</body>
</html>
Output
Align Tags
<html>
<head>
Paragraph
</head>
<body>
<br><br>
<font face="Impact" color="orange" size="7">
<center>
Microsoft Office
</center>
<hr width="100%" color="Blue" size="5">
<p align="right">
Notepad is a basic text editor that you can use to create simple documents. The most
common use for Notepad is to view or edit text (.txt) files, but many users find Notepad
a simple tool for creating Web pages.
</p>
</font>
</body>
</html>
Output
<html>
<head>
Paragraph
</head>
<body>
<br><br>
<font face="Impact" color="orange" size="7">
<center>
Microsoft Office
</center>
<hr width="100%" color="Blue" size="5">
<p align="center">
Notepad is a basic text editor that you can use to create simple documents.
The most common use for Notepad is to view or edit text (.txt) files, but many
users find Notepad a simple tool for creating Web pages.
</p>
</font>
</body>
</html>
Output
The Block-Quote Tag
The BlockQuote tag indents a block of text. The objective of this tag is for quoting
paragraphs, although you can use it anywhere that you want paragraphs to be
indented.
Example
<html>
<head>
Paragraph
</head>
<body>
<br><br>
<font face="Impact" color="orange" size="7">
<hr width="100%" color="Blue" size="5">
<p><blockquote><blockquote>
Notepad is a basic text editor that you can use to create simple documents. The most
common use for Notepad is to view or edit text (.txt) files, but many users find Notepad a simple
tool for creating Web pages.
Because Notepad supports only very basic formatting, you cannot accidentally save
special formatting in documents that need to remain pure text.
</p></blockquote></blockquote>
</font>
</body>
</html>
Output
The pre Tag
The pre tag displays preformatted text. This is used especially for text
files that use the specific numbers of spaces and characters to line
things up. The pre element displays all white space and line breaks
exactly as they appear inside the pre tag.
<html>
<body>
<font face="Impact" color="Pink" size="6">
<pre>
Keerti
The Quick Brown
The Lazy Dogs
</pre>
</font>
</body>
</html>
Output
The Subscript Tag
The SUB tag displays text as a subscript. A subscript appears slightly below the
baseline i.e. bottom edge and in a smaller font.
Example
<html>
<head>
Subscript
</head>
<body>
<br>
<br>
<font face="Impact" color="Pink" size="6">
H <sub> 2 </sub> O
</font>
</body>
</html>
Output
The Superscript Tag
The SUP tag displays text as a superscript. A superscript appears slightly above the top
of the preceding text and in a smaller font.
<html>
<head>
Superscript
</head>
<body>
<br>
<br>
<font face="Impact" color="Pink" size="6">
10<sup>th</sup>
</font>
</body>
</html>
Output
The Color Tag
The colors in webpages can be divided into three types:
• Background color :- To change the color of background of
the page. Also you can use the image for a background also.
• Text Color:- To change the color of the text and link colors.
This color also be given to the document.
• Link Color :- To change the link colors having the attributes
as Link, Vlink , Alink .
The Background Color
<html>
<body bgcolor="Blue">
<font face="Impact" color="Pink" size="6">
<pre>
Keerti
The Quick Brown
The Lazy Dogs
</pre>
</font>
</body>
</html>
Output
The Background Image
<html>
<body background="D:\Sonali\Programming
data\Html\Basic Tags\[Link]">
<font face="Impact" color="Pink" size="6">
<pre>
OM NAMAH SHIVAYA
</pre>
</font>
</body>
</html>
Output
The Anchor Tag
The HTML uses the <a> (anchor) tag to create a link to another
document. An anchor can point to any resource on the web : an HTML
page, an image, a source file , a movie etc.
The syntax of creating an anchor :
<a href=“url/Whole Path”> Text to be displayed</a>
The anchor tag allows you to create links to other internet pages,
documents and downloadable files. Anything that appears between the
begin and end anchor tags will take you to that address when clicked.
The Body Link
<html>
<br><br>
<body link="Red" Vlink="Brown" Alink="Green">
<a href=" D:\Sonali\Programming data\Html\Basic
Tags\[Link]">Image</a>
</body>
</html>
Output
<html>
<body>
<a href="D:\Sonali\Programming data\Html\Basic
Tags\[Link]">Image</a>
</body>
</html>
Output
The anchor tag for
another document
<html>
<body>
<a href="[Link]">Show The another
Document</a>
</body>
</html>
Output
The Image Tag
We can use image using image tag also. To insert an
image into web page use the <img> element and set the
SRC attribute of the element equal to the url of the
image. You can give align attribute also. Alignment is
left,right,center.
Example:
<html>
<body>
<img src="D:\Sonali\Programming data\Html\Basic
Tags\[Link]" align="left">
</body>
</html>
Output
The Marquee Tag
We can move the text using this tag. This creates a scrolling effect and
can be tailored to include any HTML content. We also gives behaviour so that it
appears in a different ways. We also give direction for scrolling.
Example :
<html>
<body>
<marquee bgcolor="Blue" behaviour="slide" scrollamont="3">
<font face="Impact"color="Pink" size="6">
Sonali
</font>
</body>
</html>
Output
<html>
<body>
<marquee direction="left" bgcolor="Blue" behaviour="alternate"
scrollamont="3">
<font face="Impact"color="Pink" size="6">
Sonali
</font>
</body>
</html>
Output
<html>
<body>
<marquee direction="right" bgcolor="Blue" behaviour="alternate"
scrollamont="3">
<font face="Impact"color="Pink" size="6">
Sonali
</font>
</body>
</html>
Output
<html>
<body>
<marquee direction="up" bgcolor="Blue"
behaviour="alternate" scrollamont="3">
<font face="Impact"color="Pink" size="6">
Sonali
</font>
</body>
</html>
Output
<html>
<body>
<marquee direction="down" bgcolor="Blue" behaviour="alternate"
scrollamont="3">
<font face="Impact"color="Pink" size="6">
Sonali
</font>
</body>
</html>
Output
Text Level Tags
<html>
<body>
<b>This text is bold</b>
<br>
<strong>
This text is strong
</strong>
<br>
<big>
This text is big
</big>
<br>
<em>
This text is emphasized
</em>
<br>
<i>
This text is italic
</i>
<br>
<small>
This text is small
</small>
<br>
This text contains
<sub>
subscript
</sub>
<br>
This text contains
<sup>
superscript
</sup>
</body>
</html>
Output
Lists In HTML
HTML has 3 basic forms of lists:
• Ordered List/Numbered List (OL): - The OL tag displays an ordered
list. Ordered list are surrounded by the <OL> </OL> tags and each
items within the list being with the <LI> tag. The browser
determines the default numbering style, but you can use the tag
TYPE attributes to change the numbering sequence and style.
Ordered list is used to indicate that the elements are ordered i.e.
they appear in specific order.
• Unordered List(UL) :- The UL tag displays a bulleted list. List is
indicated by using <UL></UL>? Tags and each items are separately
by<LI>. A browser adds a bullets filled with circle, square,empty
circle,disc by using TYPE attribute.
• Definitions List(DL):- DL list in which each item in the list has a term
and a definition fro that term, arranged so that the term somehow is
highlighted out from the text.
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
Output
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
<html>
<head> <title> Definition List</title></head>
<body>
<h3> Components of HTML</h3>
<DL>
<DT> Element </DT>
<DD>It has paired tag</DD>
<DT>Attribute</DT>
<DD>It is used to give additional information to the
element</DD>
</DL>
</body>
</html>
Output
Nested Lists
One list putting in other list is called as Nesting Lists.i.e. just putting entire
list structure inside another list as one of its elements. The nested list just become
another element of the first list and it is indented from the rest of the list like.
Nested lists especially well for menu like entities in which user want to
show hierarchy.
Example:
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Output
Table
A table represents information in a tabular way, like a spreadsheet
distributed across a grid of rows and columns.
The tables are used on websites for two major purposes:
• The obvious purpose of arranging information in a table.
• The less obvious – but more widely used-purpose of creating a page layout with
the use of hidden tables.
Following are the different parts of table:
1) Caption 2) Table Row(TR) 3) Table Heading(TH) 4) Table Cells 5) Table Data(TD)
The caption indicates what the table is about. The table heading label the
rows, columns or both. The TH usually are in larger font that is different from the rest
of the table. TH also are optional. Table cells are the individual square in the table. A
cell can contain normal table data or TH. Table Data is the values in the table itself.
The combination of TH and TD makes up the sum of the table. The table gives border
attribute always which indicates the thickness, in pixels of the border to draw around
the table.
Table Caption
<html>
<body>
<h4>
This table has a caption,
</h4>
<table border="1">
<caption>My Caption</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Output
Output
<html>
<body>
<p>
Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Output
Table with Thick Boarder
<html>
<body>
<h4>With a thick border:</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Output
Table with very thick border
<html>
<body>
<h4>With a very thick border:</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Output
Table Horizontal Header
<html>
<body>
<h4>Table Horizontal headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Output
Table Vertical Headers
<html>
<body>
<h4>Table Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Output
Row-Span and Cols-Span Attributes of Table
Using the <tr> tag rows can be added to the
tables. Using <td> tag you can add columns to the
table. To edit the table any time you can just delete
the whole <tr> tag to delete a particular row and can
add<tr> tags as per requirement. For this purpose we
use Rowspan and Colsspan attribute.
The Colsspan attribute specifies the number of
columns spanned by the current cell. The default
value is “1”.
The Rowspan attribute specifies the number of
rows spanned by the current cell. The default
value is “1”.
Cols Span Example
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Output
Row Span Example
<html>
<body>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Output
Cellpadding Attribute
It determines the amount of space , in pixels, between the border of a cell and
contents of the cell. The default value is “1”.
Example :
<html>
<body>
<h4>Without cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Output
Cellspacing Attribute
It determines the amount of space, in pixels, between individuals cells in a table. The
default value is “2”.
Example
<html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing:</h4>
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Output
Table with Alignments
<html>
<body>
<table width="400" border="1">
<tr>
<th align="left">Money spent on....</th>
<th align="right">January</th>
<th align="right">February</th>
</tr>
<tr>
<td align="left">Clothes</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">Make-Up</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">Food</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">Sum</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>
Output
Forms
Forms consist of two parts, the visible aspect, fields, labels and buttons
and the invisible aspects , the processing script, field names and invisible fields.
Users interact with the forms through the visible elements called controls or
input items. These include text fields, text areas, check boxes, radio buttons,
menus, images and buttons. Users modify the input by entering text, selecting
menu items, changing settings and clicking buttons or images before submitting
the form.
Example:
<html>
<body>
<center>
<font face="Book Antiqua"color="black"size="8">Form
</font></center>
<table border="0"width="90%">
<tr>
<td>Name</td>
<td><input type="text">
</td>
</tr>
<tr>
<td>address</td>
<td><textarea rows="6"cols="50">
</textarea>
</td></tr>
<tr>
<td>Password</td>
<td><input type="password"></td>
</tr>
<tr>
<td>Entertenment</9:36 AM 1/30/2010td>
<td><input type="checkbox">Playing Casio
<input type="checkbox">
Dancing
</tr>
<tr>
<td>Gender</gd>
<td><input
type="radio"name="m">Male<input
type="radio"name="m">Female
</tr>
<tr>
<td>country</td>
<td><select><option>India
<option>England
<option>China
</select>
Date<select><option>1
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6 </select>
Year<select><option>2000
<option>2001
<option>2002
<option>2003
<option>2004
<option>2005
<option>2006
<option>2007
<option>2008
</select></tr>
<tr>
<td>
<input type="button"value="Click me">
Output
Action Attribute
It specifies the URL of the program to be invoked when the
form is submitted. The Action attribute is required if any action is to
occur when the user presses a submit button in the form.
Example
<html>
<body>
<form action="[Link]">
<table border="0"width="100%">
<tr><td>
<pre><font face="Bauhaus 93"color="black"size="6">
KEERTI</font><font face="Bauhaus 93"color="black"size="2">
Computer Institute</font>
</pre>
</td>
<td div align="center">
<font face="Copperplate Gothic
Bold"color="black"size="6">
<u>INOUIRY FORM</u></font>
<font face="Copperplate Gothic
Bold"color="black"size="2"><center>
<pre>07,Pushpa Shanti Towers,Serve No.147,
Behind Kothrud Petrol Pump,Kothrud,
Pune-411 [Link]. :25386051.</pre>
</center>
</td>
<td>
<font face="Copperplate Gothic
Bold"color="black"size="2">
<center>
No. 492
</font>
</td>
</tr>
</table>
<table border="0"width="100%">
<td>
Name :</td>
<td>First Name:</td>
<td> <input type="text">
</td>
<td>Middle Name</td>
<td><input type="text">
</td>
<td>Last Name</td>
<td><input type="text">
</td>
<tr>
<td>Address:</td>
<td><textarea rows="3"cols="30"></textarea>
</td></tr>
<tr>
<td>Tel No:</td>
<td><input type="text">
</td></tr>
<tr>
<td>Date of Birth:
</td>
Date
<td><select><option>1
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
<option>7
<option>8
<option>9</select>
Month<select><option>Jan
<option>Feb
<option>March
<option>Aprial
<option>May
June</select>Year<select><option>1991
<option>1991
<option>1992
<option>1993
<option>1994
<option>1995
<option>1996</select></td></tr>
<tr>
<td>Mother Tongue:</td>
<td><input type="text">
</td></tr>
<tr>
<td>Last Colleg/School Attended:</td>
<td><input type="text">
</td></tr>
<tr><td>Current Occupation:</td>
<td><input type="text">
</td></tr>
<tr>
<td>Privious Knowledge of Computer :</td>
<td><input type="radio"name="n">Yes
<input type="radio"name="n">No</tr>
<tr>
<td>If Yes please specify:</td>
<td><input type="text">
</td></tr>
<tr>
<td>How you know about Keerti :</td>
<td><input type="checkbox">1 Students</td>
<td><input type="checkbox">Others</td>
<td><input type="checkbox">Hording</td>
<td><input type="checkbox">Prospect</td>
<td><input
type="checkbox">Newspaper</td></tr>
<tr>
<td>Interested in:</td>
<td><input type="text">
</td>
<td align="right">Batch & Timing:</td>
<td><input type="text">
</td></tr>
</table>
<p align="right"><input type="text">
</p><p align="right">Signature of Student/
guardians
<br>
<center>
<font face="Copperplate Gothic
Bold"color="black"size="6">
OFFICE USE ONLY</tr></font>
</center>
<pre>
Remark :<input
type="text"size="80%">
Will Join On :<input type="text"> Name
of Counsellor : <input type="text">
Counsellors Sign:<input type="text">
<br>
<center>
<font face="Copperplate Gothic
Bold"color="black"size="6">
Followup</tr></font>
<table
border="3"bordercolor="black"height="90%"
width="90%" cellspacing="3">
<tr>
<th>date</th>
<th>Timing</th>
<th>Counsellor Name</th>
<th>Remark</th></tr>
<tr align="center">
<td>1</td>
<td>8.30am to10.30am</td>
<td>abc</td>
<td>abcdef</td>
<td>
</td>
</table>
<input type="submit"value="submit">
Output
Frames
With frames, you can display more than one HTML document in the
same browser window. Each HTML document is called a frame and each frame
is independent of the others. 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 .
One of the most beneficial feature of frames is it lets the user to have
multiple pages in the same browser. Using frames we can keep one part of the
page static while changing the other parts of the page. If we create a top frame
we can use it as a header i.e. as that page is static it acts like an include page.
Frames can be used to reduce server load, as there as is no need to reload all
the pages whenever a new page is visited. It reduces downloading time.
The web developer must keep track of more HTML documents. It is
difficult to print the entire page. Framing must be kept simple, because it
causes navigation confusion which frames will change when link is clicked.
Frameset Tag
This tag defines a set of frames the at appear in a web browser window. It
contains one or more frame tags that each describes a frame. An html
document that contains a frameset tag cannot contain a Body tag. It specifies
frame layout(vertical or horizontal).
Example
<html>
<frameset cols="40,90">
<frame src="[Link]"name="a">
<frame src="[Link]"name="b">
</frameset>
</html>
<html>
<frameset cols="30,90">
<frame src="[Link]"name="m">
<frameset cols="30,90">
<frame src="[Link]"name="n">
</frameset>
</html>
<html>
<frameset rows="20,70">
<frame src="[Link]">
<frameset cols="30,90">
<frame src="[Link]">
<frameset rows="20,50">
<frame src="[Link]">
<frameset cols="20,50">
<frame src="[Link]">
<frame src="[Link]">
</frameset >
Output