Kaushal Vikas Kendra

DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

A website is a way to deliver information to the users which are connected with it. The
contents of a website is stored in a place called web server indicating a single domain.
Generally, a domain name is known as URL (Universal Resource Locater) or (Uniform
Resource Locater) of that web server. User sends a request to the server via web protocol
HTTP/HTTPS, then, the web server respond to the user's request. This response is a file or a
page known as web page, this type of web page is created by using markup language like
HTML, which holds the information in the form of text, images, animation, links, audio, video
etc.
So one line definition of a website is:
"A website is a collection of web pages which delivers information to the user, from the web
server over the network".
Generally, a website is divided into two categories, i.e. Static and Dynamic.
1. Static website: contain fixed number of pages and format, which delivers information
to the user. User cannot change the content of web page while page is running on the
user's browser. This kind of web sites are created using HTML and CSS technology.
Example of static websites are informative website, tutorial website etc.
2. Dynamic websites: can change the web page contents while the page is running on the
user's browser. This kind of websites is created using any client side scripting
language like JavaScript, and server side scripting language like PHP, ASP.NET, JSP etc.
Client side scripting language is use to prepare dynamic design, handling events etc.
and server-side scripting language is use to manage session and cookies, storing and
retrieving data from database etc. Example of Dynamic website are e-commerce sites,
on-line form application, job portal sites, social networking sites etc.
Difference between Static Website and Dynamic Website
S.No Static websites Dynamic websites
Static websites contain fixed number of Dynamic websites can create web page
pages. dynamically.
Theme and content of web page may change on
Theme and content of web page is fixed.
run time.
Static websites load quickly on clients Dynamic websites take some time to load on
browser because it contain some clients browser because it process the request
markup code. on server.
Dynamic sites can deal with database and
Static sites never use database
generate the contents dynamic using database
connectivity.
queries.
Static website directly run on browser Dynamic website run the application on server
and does not need other server and the output will display on clients browser in
application language. Static website are the form of HTML. Dynamic website are created
created using HTML and CSS. using PHP, Asp.NET, JSP, Python etc.
Dynamic websites are not easy to develop
Static websites are easy to develop and because they need qualified developer to create
a bit experienced people can develop it. it, manage it, test it and maintain security of
application and database.
In static website if we want to change Dynamic websites provide the facilities that is
the page content then we have to make possible to change the page content using server

1|Page
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

changes many times on many pages. application. And need to change on only once.
Advantages of Web Application
1. Web application just need to be installed only on the web server, whereas desktop
application need to be installed on every computer where you want to access them.
2. Maintenance, support are easier to provide.
3. Only a browser is required on the client machine to access a web application.
4. Accessible from anywhere, just you need a Internet connection.
5. Cross platform - can run on any operating system.
Define HTML
HTML stands for Hyper Text Markup Language, developed by Tim Berners-Lee in 1991. HTML
is used to create static web pages or a website. Hyper Text simply means "Text within a Text".
A text has a link within it, is a hypertext. Every time when you click on a word which brings
you to a new web page. HTML is a markup language means that everything should be written
inside the tags. HTML tags are the keyword surrounded by the angle brackets.
HTML is not a case sensitive language, it means that the HTML tags can be written in
lowercase or in uppercase. HTML code can be written in any text editor such as Notepad,
Notepad++, Adobe Dreamweaver, Brackets, Sublime etc. and the output will be displayed on
the web browser(Google Chrome, Mozilla Firefox, Opera, Safari) etc.
HTML tags are divided into two categories:
1. Empty tag / Single tag / unpaired tag: This type of tags does not contain any other tag
or text. They are started and ended in a same line. HTML tag with no content is known
as empty tag. Example of empty tags are: <br> , <hr> , <img> etc.
2. Container tag / Double tag / Pair tag: This type of tags have an opening tag, some text
and tags enclosed in it and a closing tag. Example of container tags are: <html>
</html>, <body> </body>, <ol> </ol> etc.
Note: All Tags must be inserted inside HTML tag. HTML tag act as a container for all other
tags.
HTML Tag
HTML tag encloses the entire HTML document. HTML tag divides the web page into two
separate sections i.e. head section and body section.
Head section is defined by <head> tag, it represents the document's header, which can keep
other HTML tags like <title>, <link> etc.
Title tag: The <title> tag is use to mention the document's title.
Link tag: The <link> tag is used to link the external CSS Style Sheet.
Structure of HTML Page
The basic structure of the HTML page is shown in the below mentioned figure.

2|Page
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

HTML Body Tag

The HTML body tag represents the web page in which the text or images can be displayed. The
HTML body tag acts as a container for other HTML tags.
HTML Body tag can contains attributes, Attributes are used to provide some additional
information to the tags, so that HTML tags can work better.
Attributes Description
Bgcolor stands for background color. It is use to change the document's
Bgcolor* background color. Color can be given in any one of the following formats:
bgcolor="Red" or bgcolor="#f1f1f1".
Text* Use to set the default foreground color of the document i.e. text color
Background attribute specifies a background picture. The picture is tiled behind
Background*
the text on the page.
Link* Specify the Hyperlink color
Alink* Change the color of active link
Vlink* Change the visited hyperlink color
Note: * - denotes deprecated tag in HTML5
HTML Headings
HTML Headings can be used to define Titles/Headings in the web page. In HTML, there are 6
different levels of headings available, i.e. <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. H1 is the
highest heading and H6 is the smallest heading. HTML Heading tags can be used as follows:
Example 1: Different types of Headings.
<h1>This is Heading 1 </h1>
<h2>This is Heading 2 </h2>
<h3>This is Heading 3 </h3>
<h4>This is Heading 4 </h4>

3|Page
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

<h5>This is Heading 5 </h5>

<h6>This is Heading 6 </h6>
Output:
Note: Use only HTML heading tags to define the headings in the web page. Don't use heading
tags to make text BIG or bold. Search engines use your headings to index the structure and
content of your web pages.
HTML Heading Exercise
Exercise 1: Headings with different paragraph alignments.

EX.
Write five lines your Nation & save it as Assignment 1-Nation. Apply different heading effect
HTML Paragraph
The <p> tag is used to define a paragraph on the HTML page. Each text of paragraph should go
in between an opening <p> and a closing </p> tag.
Attributes Description
To change the paragraph's alignment.
Align
Values are left, center, right and justified. Default is left.
Exercise
Write few lines showing all 4 kind of alignments
HTML Horizontal Line
HTML <hr> tag stands for Horizontal Ruler, it is used to create a horizontal line on the HTML
document.
By default <hr> tag will appear with a width of 100%, a height of 2px, and a 3D border.
hr tag is a empty tag, you do not need to close hr tag
Attribut
Description
e
Width Specifies the width of a horizontal line.
Use to change the line alignment. Values are left, center, right.
Align
Default is center.
Size Use to change the height of a line.
Color Use to change the color of a line.
Example 1: Horizontal Line using hr tag with styling .

4|Page
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

HTML Font Tag

HTML Font tag is use to change the text size, text color and font of the text. The table
below lists the font attributes:
Attribut
Description
e
Face To change font of the text.
To change text size. Size value must be between 1 and 7. Default font size is
Size
3.
Color To change text color.
Syntax:
<font color="red"> Text with Red color. </font>
<font size="5"> Text with font size 5. </font>
<font face="Lucida Handwriting"> Text with font face "Lucida Handwriting". </font>
<font color="red" size="5" face="Lucida Handwriting"> Text Size='5' Color='red'
face='Lucida Handwriting'. </font>
Some common HTML Tags are:
HTML Tag Description
<br> Break row: anything following it starts from the new line.
<b> ... </b>
To Make Text Bold
<strong> ... </strong>
<i> ... </i>
To Make Text Italic
<em> ... </em>
<u> ... </u>
To Make Text Underline
<ins> ... </ins>

5|Page
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

^... To create text as Superscript, X2

_... To create text as Subcript, H2O
<strike> ... </strike>
<s> ... </s> To Strike the Text
<del> ... </del>
<small> tag makes the font size one point smaller i.e. 2. Default Font size
<small> ... </small>
is 3.
<big> ... </big> <big> tag makes the font size one point larger i.e. 4.
<center> ... </center> To Make the Text alignment center.
&nbsp Stands for Non Breaking Space, use to spacing between the text.
<q> ... </q> Use for Quotation mark.

<blockquote> ...
Use for indent the text (left, right margin)
</blockquote>

Comment tag (<!>), Escape Sequence&LT, &GT, &amp , & copy, &reg

Assignment
1) Write a paragraph about website from assignment
 Apply two lines at Top & Bottom.
 Divide the paragraph into three paragraphs.
 Give the title Dwarkadheesh Academy (this should appear on the title bar).
 Make the background color as Grey and text color as Red.
 Give the heading MY first Web Page as H1 tag

Assignment (Address)
2) Write a sample HTML code to display an address in exactly the same way a given here
Hiteshi & Roopak Luthra
<S-12>, Param Puri
Delhi-59
Assignment (Learning)

Here we are learning that learn and earn is the way of Leaving

So leave while you learn

Write the above text as displayed.
Assignment (Big Sale)

Write the HTML to produce the following:

Big SALE ! Oct.25th – Oct 31st.
“We are having our picnic tomorrow !” in normal- sized blue text, but with the word “picnic” at larger
size in bright red.
Make all text on a page green, but make Big sale yellow.
Assignment (Indentation)
Write the HTML to create the following indentation effect:
6|Page
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

Suresh Kumar
Aditi Singh
And Sunil Kumar
All are VIP persons.

HTML List
HTML Lists are used to group related pieces of information together, so that they are
clearly associated with each other and easy to read. Lists are used all the time on the
web for navigation menus, product features etc.
In HTML, there are 3 types of List availabe, They are:
Unordered list
Ordered list
Description list
Unordered List
An unordered list is a collection of related list items that have no special order or
sequence. Unordered list is created by using HTML <ul> tag, each item in the list is
defined with <li> tag, and will be displayed as a bullet.
Attributes:
Type - Disc, circle, square.
Ordered List
If you are required to put your list items in a number or in a sequence instead of bullets
then HTML ordered list is useful. <ol> tag is use to create HTML Ordered List.
Attributes:
Start - Specifies the starting number for a list.
Type - 'a', 'A', 'i', 'I', '1'
Description List
A description list is a list of terms, with a description of each term. The <dl> tag defines
the description list, the <dt> tag defines the term (Heading), and the <dd> tag, describes
each term.

Nested Unordered List

7|Page
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

Assignment (Students)

1. Himanshu
2. Bhuwan
3. Jyotika
4. Sonia

Assignment (Children)
o Gungun
o Roopak
o Saavy
o Khyara
o Divya
o Sunny

Assignment (Eatables)

1. Fruits
 Grapes
 Apple
 Banana
2. Vegetables
 Lady Finger
 Brinjal
 Spinach
 Tomato

8|Page
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

3. Milk Products
o Cheese
o Curd
o Ghee

Assignment (ABC)
Write the HTML to create the following ordered list:
A-Apple
B-Baby
C-Cat

Assignment (India)
Prepare a list for the following
State of India
1. Northern part of India
F. Kashmir
G. Delhi
H. Himachal Pradesh
2. Middle part of India
F. Madhya Pradesh
G. Gujarat
3. Eastern part of India
 West Bengal
 Assam
 Orissa
4. Western part of India
 Maharashtra
 Goa
5. Southern part of India
F. Keral
G. Tamilnadu
H. Hyderabad

Assignment
Prepare a list of your 10 different friends. List should have their names address and phone number.
Make use of Definition list.
HTML Marquee tag
HTML Marquee tag is used to scroll text or images either horizontal or vertical direction. In
the web page scrolling text can be used to display news in notice section, breaking news,
latest offer etc.
Attribute Description
Scrollamount Scrollamount specifies the speed of marquee text.
Specifies the scrolling type of the marquee. Possible value: scroll, slide and alternate.
Behavior
Default is scroll.

9|Page
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

Bgcolor Specifies the marquee background color.

Specifies the direction in which marquee should scroll. Possible values: left, right, up, or
Direction
down, default is left.
Specifies how many times to repeat marquee. Value can be set to 1, 0 and -1 (infinite). The
Loop
default value is infinite.
Width,
Specifies the width and height of the marquee area.
Height
Hspace Specifies horizontal space around the marquee.
Vspace Specifies vertical space around the marquee.
Practical
 Write BYTES COMPUTER INSTITUTE. Apply Behavior & BG color.
 Modify the above to show all the three behavior one by one.
 Write any line after the text & apply a marquee effect so that text appears for 2 times only &
from top to bottom. Remember marquee should be applied on text only.

HTML Image Tag

To insert or apply image in your webpage, use HTML <img> tag.
Syntax: <img src="url">
In order to apply image, img tag must have src attribute, src is the image URL or path. In
HTML5, there is no need to close <img> tag as it is a empty tag.
Attribute Description
Src src specifies a source path for the image to be displayed on the webpage.
Height
Specifies the height and width of the image.
Width
Align* To change image alignment, possible values are: Left and Right.
Border* Specifies the thickness of a border to be drawn around the image.
Alt attribute specifies the Alternate text that appears when the image is unable to
Alt
display.
Title Title attribute is used to provide information in the form of tooltip.
hspace* Specifies the margin space on the left and right side of an image
vspace* Specifies the margin space on the top and bottom of an image.
Note: * - denotes deprecated tag in HTML5
Assignment
Make a file having 4 images
Make a file with 3 images in different lines
HTML Table tag
The HTML table allows you to arrange data in a tabular (row and column) format. Data can be
text, images, links, etc. The HTML tables are created using the <table> tag in which <tr> tag is
used to create table row and <td> tag is used to create table data / table column.
Common attributes of Table tag are:
Attribute Description
Border Specify the width of a border.

10 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

Bordercolo
Specify border color.
r
Align To Change table alignment. Possible value can be left, center or right, Default is left.
Cellpadding represents the distance between cell border and the content within a
Cellpadding
cell.
Cellspacing Cellspacing specifies the space between cells in the table.
Width To change table width in terms of pixel or percentage.
Height To change table height in terms of pixel or percentage.
Colspan To merge two or more columns into a single column.
Rowspan To merge two or more rows into a single row.
Bgcolor Specifies the background color, can be used in table, tr, th, td tag.
Background Specifies the background image for the table.
Some more tags that can be used with table tag are:
<caption> tag defines a table caption, it must be inserted immediately after the <table> tag.
<th> tag is used to specify Table Heading.
Assignment
Assignment 17
The World Raffle Result
Game Red Wings Black Harwks
1 3 2
2 4 1
3 0 8
4 8 7
5 2 1
Assignment

THE EXTREME CUP RESULT

Game Red Wings Black Hawks
1 3 2
2 4 1
3 0 8
4 8 7
5 21 1

11 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

Assignment
THE DESIGN CONSULTATIONS
S-12 Param Puri, Uttam Nagar
New Delhi-110018
Balance Sheet as on 31.03.2001

Liabilities Amount Assets Amount

Capital A/C Fixed Assets
Sh. Jitender 56472.10 Furniture & 5686.00
Luthra Fixture
(+) Profit 55680.00 (-) Dep @ 10% 568.00
(-) Drawings 48000.00 5118.00
64152.10 Scooter 17059.00
(-) Dep @ 25% 4365.00
12694.00
Current Liabilities Current Assets
Expenses Payable Cash in Hand 8592.10
Wages & Salary 14355.00 P.N.B.S.F. A/C 2103.00
Income Receivable 50000.00

HTML Hyperlink
A webpage can contain various links that take you directly to other page, these links are
known as hyperlinks. Hyperlinks allow visitors to navigate between webpages or websites by
clicking on a word or a image.
A Hyperlink is specified using HTML tag <a>, this tag is known as anchor tag and anything

12 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

between the opening <a> tag and closing </a> tag becomes part of hyperlink. When a user
clicks on that part linked document will be opened.
Attributes of Anchor tag are:

Attribut
Description
e
Href Stands for Hyperlink Reference, use to specify the file name to be linked.
Specifies where to open the linked document. Its values are:
_blank: Specifies to load the linked file into a new blank window/tab.
Target
_self: Load the file into the same tab window in which the linked text was clicked in.
Default target value is _self
Title The title attribute is used to provide a tooltip on the hyperlinked.
Specifies an in-line style for the tag. Style attribute can be use to decorate the hyperlinked text
underline its value can be as follows:
text-decoration: none;
Style
text-decoration: overline;
text-decoration: line-through;
text-decoration: underline;
Syntax:
<a href="home.html"> Hyperlink Text Here </a>
<a href="home.html" target="_blank"> Hyperlink Text Here </a>
<a href="home.html" title="Click Me"> Hyperlink Text Here </a>
<a href="home.html" style="text-decoration: none;"> Hyperlink Text Here </a>
When you move the mouse over a link, the mouse arrow will turn into a little hand. By
Default, An unvisited link is blue color e, when you click on it, link will be visited, A visited
link is purple color, and when you press and hold the mouse left button link become active
until you release the button, Default Active link is red color with a underline.
Create a Bookmark
HTML Bookmarks are used to links to the same page on a specific part. Bookmarks can be
useful if your webpage is very long. When the link is clicked, the page will scroll to the
location with the bookmark. For example: <h2 id="bookmark">Bookmark
Then, add a link to the bookmark
<a href="#bookmark">Jump to Bookmark</a>
You can also link the bookmark from another page: <a href="html-
hyperlink.html#bookmark">Jump to Bookmark</a>
Assignment
Make 3 files bytes| address | internet . and create a hyperlink between three of them

Assignment
Create two links in a file at top and bottom and jump between them Give the gap of 30 lines & link
them.

Assignment
Wap to create link to various search engine
Google
13 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

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

Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use frames in your
webpages −
 Some smaller devices cannot cope with frames often because their screen is not big enough to
be divided up.
 Sometimes your page will be displayed differently on different computers due to different
screen resolution.
 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame technology.

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

Example

Following is the example to create three horizontal frames −

Live Demo

<!DOCTYPE html>
<html>

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

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

<frame name = "top" src = "/html/top_frame.htm" />
<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>
14 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

</frameset>

</html>
This will produce the following result −

Example

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

<!DOCTYPE html>
<html>

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

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

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

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

</html>
This will produce the following result –

15 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

The <frameset> Tag Attributes

Following are important attributes of the <frameset> tag −

Sr.No Attribute & Description

1
Cols
Specifies how many columns are contained in the frameset and the size of each
column. You can specify the width of each column in one of the four ways −
Absolute values in pixels. For example, to create three vertical frames, use cols = "100,
500, 100".
A percentage of the browser window. For example, to create three vertical frames,

16 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

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

1
src
This attribute is used to give the file name that should be loaded in the frame. Its value

17 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

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

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

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

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

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

18 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

"framedescription.htm"

Browser Support for Frames

If a user is using any old browser or any browser, which does not support frames then <noframes>
element should be displayed to the user.
So you must place a <body> element inside the <noframes> element because the <frameset> element
is supposed to replace the <body> element, but if a browser does not understand <frameset>
element then it should understand what is inside the <body> element which is contained in a
<noframes> element.
You can put some nice message for your user having old browsers. For example, Sorry!! your browser
does not support frames. as shown in the above example.

Frame's name and target attributes

One of the most popular uses of frames is to place navigation bars in one frame and then load main
pages into a separate frame.
Let's see following example where a test.htm file has following code −
Live Demo

<!DOCTYPE html>
<html>

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

<frameset cols = "200, *">

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

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

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

19 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

Live Demo

<!DOCTYPE html>
<html>

<body bgcolor = "#4a7d49">

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

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

<br />
<br />

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

</body>

</html>
Following is the content of main.htm file −
Live Demo

<!DOCTYPE html>
<html>

<body bgcolor = "#b5dcb3">

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

</html>
When we load test.htm file, it produces following result −
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.

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

3
_parent
20 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

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

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

5 targetframe
Loads the page into a named targetframe.

Example 1: Create three horizontal frames:

Same way you can create frame Vertically.

Example 2: Vertical Frame with navigation

21 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

Example 3: Create the Following Layout using Frame Tag.

H T M L Fo r m E l e m e n t s
HTML forms are required when you want to collect some data from user. For
example during user registration you would like to collect information like
name, email id, phone number, address etc. Common HTML forms are
Registration form, Login Form, Contact us form, Entry form, Survey form,
Subscription form, Feedback form etc.
The different types of HTML Form elements are:
Input Type Text
The Input type text is the most common and most important form element, in
which user can enter information in the form of text. It allow visitors to enter
text in a single line.
Single-line text input: It allow visitors to enter text in a single line.
Password text input: It provide a way for user's to securely enter a password.
22 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

The text entered in password box is protected so that it cannot be readable,

usually by replacing each character with a asterisk ("*") symbol or a dot ("•").
This character may vary depending on the user browser and Operating System.

Multi-line text input: If you want to accept text in the form of multiple lines,
then use HTML <textarea> tag.
Example 1: Three different types of HTML textbox's.

<form>
Username <input type="text">
Password <input type="password" />
Description <textarea rows="5" cols="22"></textarea>
</form>
HTML Input type text attributes are:
Attribute Description
Size Specify the width of text box.
maxlength The maximum number of characters allowed in a text
box.
Value Specifies the intial value for the control.
placeholder Specifies the intial value for the control in grey color.
disabled To Disable the text box.
readonly To make the text box readonly.
required Cannot leave it empty, value is required.

After making a textbox disabled or readonly, user would not be able to write or
edit text written inside the textbox, user can only read the text.

Input Type Checkbox

Input type checkbox are used when more than one option is required to be
selected.
Example 2: Input type checkbox.

23 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

Select Games:
<input type="checkbox" checked="true"> Hockey
<input type="checkbox"> Football
<input type="checkbox"> Cricket
<input type="checkbox"> VolleyBall

Input type checkbox attributes are:

Attribut
Description
e

checked To checked the checkbox by default.

disabled To make the checkbox disabled.

Input Type Radio

Input type radio buttons are used when only one option is required to be
selected out of many available options.
Example 3: Input type radio.

Select Gender:
<input type="radio" name="gender" Checked="true"> Male
<input type="radio" name="gender"> Female
Input type radio button attributes are:
Attribute Description
checked To checked the radio button by
default
disabled To make the radio button disabled.

Assignment
 Create a form having username, password, description and gender. Gender
should be a radio button . Use fieldset for Gender

 Wap to accept hobbies from set of 6 hobbies through checkbox. Select at

least 3 hobbies

Input type select

Select box is use to provide various options in the form of drop down list, from
where a user can select one or more options.
Example 4: HTML Select Box.

Select Age:

24 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

<select>
<option>Select</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
</select>
Select Box attributes are:
Attribute Description
selected To make a option as default selected
Size To change select box size/height
multiple To allow select box with multiple selection.
To make a group of options and specify group
optgroup
label.
autofocus To make a option default selected.

Note: Hold down the ctrl key to select multiple dis-continuous selection or press
shift key for continuous selection.

Example 5: Select optgroup tag.

<select>
<option>Select</option>
<optgroup label="Web Designing">
<option>HTML</option>
<option>CSS</option>
<option>JS</option>
<option>Bootstrap</option>
</optgroup>

25 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

<optgroup label="Web Development">

<option>Jquery</option>
<option>PHP</option>
<option>MySQL</option>
<option>SEO</option>
</optgroup>
</select>
Exercise 6: Select Box

Exercise
Rewrite the hobbies program using select- option .

Input type file

If you want to allow a user to upload a file in your web server, than you need to
design HTML code for selecting a file and PHP code for uploading file in server.
This example show you only the HTML code, PHP code will be discuss in PHP
tutorial
Example 7: Input type file

Select File To Upload:

<input type="file">
Input type file has a attribute accept, whose value can be: .gif , .jpg , image/* ,
audio/* , video/*
<input type="file" accept=".gif">
<input type="file" accept=".jpg">
<input type="file" accept=".gif, .jpg">
<input type="file" accept="image/*">
<input type="file" accept="audio/*">
<input type="file" accept="video/*">
<input type="file" accept="audio/*, video/*">

Input type button

In HTML, you can create a clickable button width 3 ways. i.e.
26 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

1. Simple Button - use to create a simple button which will perform some action
when user clicks on it, action is the function written in any scripting language
like javascript.

2. Submit button - Creates a button that automatically submits a form and

redirect you to another page mentioned in action attribute.

3. Reset button - Creates a button that automatically resets form elements to

their initial values.

Excercise

<input type="button" value="Simple Button">

<input type="submit" value="Submit Button">
<input type="reset" value="Reset Button">
In the above example, Username is set with 'Enter name' value and maxlength is
10, Password field is readonly, Email textbox with placeholder 'Enter Email',
Description with multiple lines.

HTML Fieldset tag

HTML fieldset and legend tag
is use to groups related elements. The legend tag defines a caption for the
fieldset element.
Eg.
<form>
<fieldset>
<legend>Choose your favorite monster</legend>

27 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

<input type="radio">kraken<br>
<input type="radio">sasquatch <br>
</fieldset>
</form>

28 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

29 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

HTML Image Maps

With image maps, you can add clickable areas on an image.
Image Maps
The <map> tag defines an image-map. An image-map is an image with clickable areas.
Click on the computer, the phone, or the cup of coffee in the image below:

30 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

Example
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
Try it Yourself »
How Does it Work?
The idea behind an image map is that you should be able to perform different actions depending on
where in the image you click.
To create an image map you need an image, and a map containing some rules that describe the clickable
areas.

The Image
The image is inserted using the <img> tag. The only difference from other images is that you must add
a usemap attribute:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
The usemap value starts with a hash tag # followed by the name of the image map, and is used to create
a relationship between the image and the image map.
Note: You can use any image as an image map.

The Map
Then add a <map> element.
The <map> element is used to create an image map, and is linked to the image by using
the name attribute:
<map name="workmap">
The name attribute must have the same value as the usemap attribute.
Note: You may insert the <map> element anywhere you like, it does not have to be inserted right after
the image.

The Areas
Then add the clickable areas.
A clickable area is defined using an <area> element.
Shape
You must define the shape of the area, and you can choose one of these values:
 rect - defines a rectangular region
 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region
Coordinates
You must define some coordinates to be able to place the clickable area onto the image.
The coordinates come in pairs, one for the x-axis and one for the y-axis.
The coordinates 34, 44 is located 34 pixels from the left margin and 44 pixels from the top:

31 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

The coordinates 270, 350 is located 270 pixels from the left margin and 350 pixels from the top:

Now you have enough data to create a clickable rectangular area:

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
his is the area that becomes clickable and will send the user to the page computer.htm:
Circle
To add a circle area, first locate the coordinates of the center of the circle:
337, 300
Then specify the radius of the circle:
32 | P a g e
 Kaushal Vikas Kendra
DwarkaDheesh Academy
Plot no 83, Amberhai, Sector 19, Dwarka

44 pixels

Now you have enough data to create a clickable circular area:

<area shape="circle" coords="337, 300, 44" href="coffee.htm">

This is the area that becomes clickable and will send the user to the page coffee.htm:

33 | P a g e