WT For Bcom 4thnew and 5thold Sem

lOMoARcPSD|15671295
WT for Bcom 4th(new) and 5th(old) Sem
Bussiness law (Palamuru University)
Scan to open on Studocu
Studocu is not sponsored or endorsed by any college or university

Downloaded by Pradeep Kumar (gkpradip@gmail.com)
lOMoARcPSD|15671295
HTML
UNIT 1
Introduction to HTML
HTML stands for Hyper Text Markup Language. It is a markup language to use in developing web
pages. In similar way the HTML programs having Tags. HTML creates web pages with help of a number of
built-in tags. Consider to create HTML page (web page) the following concepts listed below.
 Every HTML program should be start with <html> opening tag. And end with </html> close tag.
 Every HTML program saved with “filename.html”.
 HTML does not follow case sensitive. Hence writing HTML program in any case like lower case or
upper case letters.
 HTML program contains Tag. It Tags are two types. They are Opening Tags and close Tags. Here
Opening tag represent as “<tagname>”, and closing tag represent as “</tagname>”.
Structure of HTML Program
In HTML program structure is divided into following 3 major sections as follow below
1. HTML Section
2. HEAD Section
3. BODY Section
1. HTML Section: This section used to we can start the HTML program and end HTML Program.
This Section as follow <html>……</html>. After <html> tag immediately we can start Head
Section.

lOMoARcPSD|15671295
2. HEAD Section: This section is define as follow <head>--------</head>. This section usually contain
<title> tag.
<title> tag: this tag used to display title name of the web page. It tag always define within the
<head>……</head> tag.
3. BODY Section: this section begin after closing the HEAD Section. The BODY Section is define as
follow <body>…………</body>. This section is used to entire information about the web page.
Example Program:
<html>
<head>
<title> my first html program </title>
</head>
<body>
NIVEDITHA DEGREE COLLEGE
KKT
</body>
</html>
OUTPUT:
Features of HTML
 HTML is a static web page
 HTML is not case sensitive
 HTML is Error free language
 HTML is a simple and easy language.
 It provides to specially to add audio files, images, into a web pages.
 HTML is platform independence; it can run any platform like windows, Linux operating system.
 Every element (tags) of HTML should be enclosed between angular brackets (< >).
 HTML programs to run on web browser. (internet Explorer).
Advantages of HTML:
 It is widely used on WEB
 Every Bowser support HTML Language.
2

lOMoARcPSD|15671295
 Easy to learn and use it.

 It is by default in every windows operating system, so we need not any special software.
Dis-Advantages of HTML:
 We can create any static web pages, if we need dynamic web pages but it HTML is not useful.
 We can write HTML program, it having a lot code formatting a simple web page.
 Security features are not good in HTML.
Heading Tags:- (Padded tags)
i. Heading tags are used in html to display various types of headings such as, heading to a site,
heading to a page, heading to a paragraph etc.
ii. There are different heading tags to display headings.
iii. The size of headings tags goes on decreases from <h1> to <h6>.
iv. The various heading are as follows
<h1> -------------------------------------- </h1>
<h2> -------------------------------------- </h2>
<h3> -------------------------------------- </h3>
<h4> -------------------------------------- </h4>
<h5> -------------------------------------- </h5>
<h6> -------------------------------------- </h6>
 Write an HTML program to display various f=heading tags in HTML
<Html>
<head>
<title> Heading Demo </title>
</head>
<body>
<h1> Welcome </h1>
<h2> Welcome </h2>
<h3> Welcome </h3>
<h4> Welcome </h4>
<h5> Welcome </h5>
<h6> Welcome </h6>
</body>
</html>
Output: - Welcome
Welcome
Welcome
Welcome
Welcome
Welcome

lOMoARcPSD|15671295
Hyperlink:- (Anchor Tag)
i. Anchor tag <a> is used in html to create hyperlinks.

ii. A hyperlink is a link when it is accessed, transfers the control from one web page to another
webpage.
iii. Therefore hyperlinks are used to navigate from one webpage to another webpage.
 Write a program to create the hyperlinks as a text
<html>
<head>
<title> demo of the hyper links </title>
</head>
<body>
<h1> Welcom </h1>
<a href=”address of the page to open as hyperlink”> This is a Web World </a>
</body>
</html>
Attributes of Anchor Tag <a>:-
1. Href: - Specifies the address of the resource to be opened when the link is accesses.
Image tag: -
<img> is a tag defined in html which is used to create foreground images.
Attributes of Image Tag: -
i. Src: - Specifies the address of the image to be loaded.
ii. Width: - Specifies the width of the image.
iii. Height: - Specifies the height of the image.
 Write a program to displays images.
<html>
<head>
<title> Demo of the Image tags </title>
</head>
<body>
<img src =”images.jpg” width=”100” height=”100”> </img>
</body>
</html>
Images as Hyperlinks:-
i. If we place an img tag with in an anchor tag then the imge become hyperlink.

lOMoARcPSD|15671295
 Write a program to displays images acting as Hyperlink.

<html>
<head>
<title> Demo of the Image Hyperlinks </title>
</head>
<body>
<a href=”flower.jpg”>
</a>
</body> </html>
Text formatting Tags

HTML having different types of formatting text tags. Formatting means to design text in our styles.
Formatting tags are used for display content of the body with different styles. These formatting tags
represented always within the body section. The following are the formatting text tag listed below.
1. Bold: To display the content of the data in Bold format. It is represented as <b>……</b>.
2. Italic: To display the content of the data in Italic format. It is represented as <i>……</i>.
3. Underline: To display the content of the data with Underline format. It is represented as <u>……</u>.
4. Big: To display the content of the data with Bold format. It is represented as <big>……</big>.
5. Small: To display the content of the data in Small size of the text. It is represented as
<small>……</small>.
6. Variable: To display the content of the data in Variable format with different programming languages. It
is represented as <var>……</var>.
7. Address: To display the content of the data in Address format. It is represented as
<address>……</address>.
8. Emphasis: To display the content of the data in Italic format. It is represented as <emp>……</emp>.
9. Superscript: To display the content of the data in Superscript format like as X2, 32. It is represented as
<sup>……</sup>.
10. Subscript: To display the content of the data in Subscript format like as H2O. It is represented as
<sub>……</sub>.
.
11. Strike: To display the content of the data with a line over the data. It is represented as
<strike>……</strike>.
Example Program:
<html>
<head>
<title> text format </title>

lOMoARcPSD|15671295
</head>
<body>
<em>good morning</em><br>
<cite>Niveditha</cite><br>
<big>Degree</big><br>
<small>College</small><br>
<address>h.no.1-4-75<br>
KKT<br>
</address><br>
<strong>welcome</strong><br>
<var>c=a+b</var><br>
<code>while(i<=4)<br>
i=i+1
</code><br>
<b>hai</b><br>
<i>rani</i><br>
<u>neha sri</u><br>
<tt>amma</tt><br>
x<sum>2</sub><br>
a<sup>4</sup><br>
<blink>hello</blink><br>
</body>
</html>
LISTS in HTML
A list is a collection of a items in particular manner. In HTML having 3 types of list, they are
i. Order List
ii. Un Order List
iii. Definition List.
i. Order List:
 Order list is also a collection of items with marks with numbers or alphabets or Roman numbers.
 It order list defined in HTML by using the tag <ol>……</ol>
 <li> is tag, it defined with in a <ol>….</ol> tag. <li> tag means list items.
Syntax:
<ol type=”value”>
<li>…….</li>

lOMoARcPSD|15671295
<li>…….</li>
<li>…….</li>
</ol>
 <ol> tag having one attribute name as “type”.
 Type attributes used in <ol> tag it define which type order to be display in list items.
<ol type=”1”> order list displayed with numerical order(numbers)
<ol type=”A”> order list displayed with Capital Alphabets order(A to Z)
<ol type=”a”> order list displayed with Small Alphabets order(a to z)
<ol type=”I”> order list displayed with Capital Roman Numbers order(I,II,III,IV,V…… etc)
<ol type=”i”> order list displayed with Small Roman Numbers order(i,ii,iii,iv,v…… etc)
Example Programs:
<html>
<head>
<title> order list </title>
</head>
<body>
<h1>Degree Cources<br/></h1>
<ol type="1">
<li> B.Sc </li>
<li> B.Com</li>
<li>B.Zc</li>
<li>BA</li>
</ol>
</body>
</html>
OUTOUT:
ii. Un Order List:

 Un Order list is also a collection of items with marks with Bullets, circle, square, disc symbols.
 It Un order list defined in HTML by using the tag <ul>……</ul>
 <li> is tag, it defined with in a <ul>….</ul> tag. <li> tag means list items.
7

lOMoARcPSD|15671295
Syntax:
<ul type=”value”>
<li>…….</li>
<li>…….</li>
<li>…….</li>
</ul>
 <ul> tag having one attribute name as “type”.
 Type attributes used in <ul> tag it define which Symbol to be display on before of the list items.
<ul type=”Bullets”> un order list displayed with Bullet symbol
<ul type=”disc”> un order list displayed with Disc symbol
<ul type=”Square”> un order list displayed with Square symbol
<ul type=”circle”> un order list displayed with circle symbol
Example Program
<html>
<head>
<title> Un order list </title>
</head>
<body>
<h1>Degree Cources<br/></h1>
<ul type="circle">
<li> B.Sc </li>
<li> B.Com</li>
<li>B.Zc</li>
<li>BA</li>
</ul>
</body>
</html>
OUTPUT:
iii. Definition List:

 Every definition item declaration having 2 parts. They are Definition Title and Definition data.
8

lOMoARcPSD|15671295
 <dl> is a tag to define in HTML to create definition list.

 <dt> tag means definition title. It tag is used in <dl> tag. <dt> tag is used for creating definition title.
 <dd> tag means definition data or definition description. It tag defined in <dl> tag. It is used for
creating definition data.
Syntax:
<dl>
<dt>……….</dt>
<dd>--------------------</dd>
<dl>
Example Program:
<html>
<head>
<title> definition list </title>
</head>
<body>
<dl>
<dt> Def1 </dt>
<dd> this is first program for definition code </dd>
<dt> Def2 </dt>
<dd> this code for practice perpouse </dd>
</dl>
</body>
</html>
OUTPUT:
Frames and Framesets in HTML

 Frames and framesets are used in HTML to open more than one web pages in a single browser at a
time.
 Framesets are divided into the window (web browser body) through Horizontally or vercically.
 Each part of the window is referred as frame.
 Framesets are divided the window in three types. They are

lOMoARcPSD|15671295
i. Horizontal frameset
ii. Vertical frameset
iii. Both combination of horizontal and vertical frameset.
i. Horizontal Frameset:
Attribute of the <frameset> tag we can use “rows” attribute. <frameset> tag always declared
within the <head>……</head> tag.
Frame 1
Frame 2
Frame 3
Frame 3
Syntax:
<frameset rows=”vau1, value2,….”>
<frame src=”url”>
</frameset>
Example Program:
<html>
<head>
<title>Horizontal frameset</title>
<frameset rows="50,25,25">
<frame src="www.google.com">
<frame src="www.facebook.com">
<frame src="www.gmail.com">
</frameset>
</head>
<body>
</body>
</html>
OUTPUT:
10

lOMoARcPSD|15671295
ii. Vertical Frameset:

Attribute of the <frameset> tag we can use “cols” attribute. <frameset> tag always declared
Frame1 Frame2 Frame3
Syntax:
<frameset cols=”vau1, value2,….”>
</frameset>
Example Program:
<html>
<head>
<title>Vertical frameset</title>
<frameset rows="50,25,25">
</frameset>
</head>
<body>
</body>
</html>
OUTPUT:
Google Facebook Gmail
11

lOMoARcPSD|15671295
iii. Both Combination of Horizontal and vertical Frameset:

Attribute of the <frameset> tag we can use “rows” and “cols” attribute. To create both combination of
horizontal and vertical frameset we can use nested <frameset> tag.<frameset> tag always declared
Frame 1
Frame3
Frame2
Syntax:
<frameset rows=”vau1, value2,….”>
<frameset cols=”vau1, value2,….”>
</frameset>
</frameset>
Example Program:
<html>
<head>
<title>Horizontal frameset</title>
<frameset rows="50,50">
<frameset cols="50,50">
</frameset>
</frameset>
</head>
<body>
</body>
</html>
OUTOUT:
Google
Facebook Gmail
12

lOMoARcPSD|15671295
Tables in HTML
In html data can be represented in a table format. This approach data is organized in terms of rows
and columns is called as table. An intersection of rows and columns is called as “cell”. In HTML table
having different types of tag. They are
i. <table>….<.table>: This is used for creating table format in html.
ii. <tr>……</tr>: <tr> means table row. It tag used for creating table row in a table. <tr> tag
always declared in <table>…..</table>tag.
iii. <td>…..</td>: <td> means table data or table description. It tag used to creating table data in a
table. It tag always declared in <tr>….</tr> tag.
iv. <th>….</th>: <th> means table heading. It tag used for creating table column heading in a table.
It tag always declared in <tr>….</tr> tag.
v. <caption>….</caption>: it tag used for giving a title of a table.
Syntax:
<table>
<tr>
<td>-------</td>
<td>-------</td>
<td>-------</td>
</tr>
<tr>
<td>-------</td>
<td>-------</td>
<td>-------</td>
</tr>
</table>
Example Program:
<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table >
<tr>
<td> Sno</td>
<td> Sname</td>
</tr>
13

lOMoARcPSD|15671295
<tr>
<td> 101</td>
<td> ABC</td>
</tr>
</table>
</body>
</html>
Output:-
Sno Sname
101 ABC
Attributes of Table:
1. Border------------------------------ Pixels
2. Bordercolor------------------------ any color
3. Bgcolor------------------------------ any color
4. Background------------------------ image path
5. Height------------------------------- Pixels/percentage (%)
6. Width-------------------------------- Pixels/percentage (%)
7. Align--------------------------------- left, right and center
8. Valign-------------------------------- top, middle, and bottom
9. Rules--------------------------------- rows, cols, all, and none
10. Cellspacing-------------------------- Pixels
11. Cellpadding-------------------------- Pixels
12. colspan-------------------------------- Pixels
13. rowspan------------------------------- Pixels
Programs:
Eg: - Without border
<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table >
<tr>
<td> Sno</td>
<td> Sname</td>
</tr>
<tr>
<td> 101</td>
14

lOMoARcPSD|15671295
<td> ABC</td>
</tr>
</table>
</body>
</html>
Output:-
Sno Sname
101 ABC
Eg2:- With Border attributes

<html>
<head>
<title>
Table tag demo
</title>
</head>
<body>
<table border=3>
<tr>
<td> Sno</td>
<td> Sname</td>
</tr>
<tr>
<td> 101</td>
<td> ABC</td>
</tr>
</table>
</body>
</html>
Output:-
Sno Sname
101 ABC
Eg3:- Table tag with border, bordercolor, bgcolor and background. (first four attribute)
<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table border=3 bordercolor="red" bgcolor="lightgreen"
background="D:\bhanu\rasooi123.jpg">
<tr>
15

lOMoARcPSD|15671295
<th> Sno</td>
<th> Sname</td>
</tr>
<tr>
<td> 101</td>
<td> ABC</td>
</tr>
<tr>
<td> 102</td>
<td> CBA</td>
</tr>
</table>
</body>
</html>
Output:-
Eg4:- Table level and Cell Level Attribute

<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table border=3 bordercolor="red" >
<tr>
<th bgcolor="lightgreen"> Sno</th>
<th> Sname</th>
</tr>
<tr>
<td> 101</td>
<td background="D:\bhanu\rasooi123.jpg"> ABC</td>
</tr>
<tr>
<td> 102</td>
<td> CBA</td>
</tr>
</table>
</body>
</html>
16

lOMoARcPSD|15671295
Output:-
Height and Width:-

Specifying the width and height on your table can make your page much easier to control.
Difference Between Pixels and percentage:-
There are 2 ways of marking the width & Height of your table.
1. by specifying certain no.of pixels
2. marking using %
Pixels:-
Pixels are fixed size units that are used in screen media, pixels will make certain length & stay their,
one pixel is equal to one dot on your computer screen.
Percentage (%):-
It is scalable for all kinds of devices like pc’s, mobiles etc.
Eg5:- Table tag with Height, Width attribute
<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table border=3 bordercolor="red" width=300 height=300 background="D:\bhanu\rasooi123.jpg"
bgcolor="lightgreen">
<tr>
<th > Sno</th>
<th> Sname</th>
</tr>
<tr>
<td> 101</td>
<td > ABC</td>
</tr>
<tr>
<td> 102</td>
<td> CBA</td>
</tr>
</table>
</body>
</html>
Output:-
17

lOMoARcPSD|15671295
Eg6:- Table tag with Height, Width attribute

<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table border=3 bordercolor="red" width=30 height=30 background="D:\bhanu\rasooi123.jpg"
bgcolor="lightgreen">
<tr>
<th > Sno</th>
<th> Sname</th>
</tr>
<tr>
<td> 101</td>
<td > ABC</td>
</tr>
<tr>
<td> 102</td>
<td> CBA</td>
</tr>
</table>
</body>
</html>
Output:-
Sno Sname
101 ABC
102 CBA
18

lOMoARcPSD|15671295
Eg7: - Table tag with rules attribute (Rules=none)

<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table border=3 bordercolor="red" width=300 height=300 bgcolor="lightgreen" rules=none >
<tr>
<th align="center" > Sno</th>
<th align="center" > Sname</th>
</tr>
<tr>
<td align="center" > 101</td>
<td align="center" > ABC</td>
</tr>
<tr>
<td align="center" > CBA</td>
</tr>
</table>
</body>
</html>
Output:-
Eg8: - Table tag with rules attribute (Rules=rows)

<html>
<head>
<title>
table tag demo
</title>
19

lOMoARcPSD|15671295
</head>
<body>
<table border=3 bordercolor="red" width=300 height=300 bgcolor="lightgreen" rules=rows >
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Output:-
Eg9: - Table tag with rules attribute (Rules=cols)

<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table border=3 bordercolor="red" width=300 height=300 bgcolor="lightgreen" rules=cols >
<tr>
</tr>
20

lOMoARcPSD|15671295
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Output:-
Eg10: - Table tag with rules attribute (Rules=cols)

<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table border=3 bordercolor="red" width=300 height=300 bgcolor="lightgreen" rules=all >
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Output:-
21

lOMoARcPSD|15671295
CellSpacing:-
This attribute is used to change the spacing between the cells.
Cellpadding:-
This attribute is used to change the space between the content to the inner adjust of a
cell.
Systax :- <table cellpadding=”x”>
Here x means pixels values like 1, 2, 3,…. (numeric values).
Eg11:- Table with cellpadding attribute
<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table border=3 cellpadding=15>
<tr>
<th align="center" > Emp Id</th>
<th align="center" > Emp Name</th>
<th align="center" > Location</th>
</tr>
<tr>
<td align="center" > Hyd</td>
</tr>
<tr>
<td align="center" > Mumbai</td>
</tr>
22

lOMoARcPSD|15671295
<tr>
<td align="center" >abc </td>
<td align="center" > Chennai</td>
</tr>
<tr>
<td align="center" > XYZ</td>
<td align="center" >Bangalore</td>
</tr>
</table>
</body>
</html>
Output:-
Output for Without cellpadding attribute above the example
Cellspacing:-
By using this attribute you can control the distance between cells with the help of
pixels.
Systax :- <table cellspacing=”x”>

Here x means pixels values like 1, 2, 3,…. (numeric values).
Eg12:- Table with cellspacing attribute

<html>
<head>
<title>
table tag demo
</title>
</head>
23

lOMoARcPSD|15671295
<body>
<table border=3 cellspacing=15>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td align="center" >Bangalore</td>
</tr>
</table>
</body>
</html>
Output:-
Output for Without cellspacing attribute above the example
24

lOMoARcPSD|15671295
Eg13:- Table with CAPTION Tag

<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<caption align="bottom"> Employee Table </caption>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td align="center" >Bangloor</td>
</tr>
</table>
</body>
</html>
Output:-
25

lOMoARcPSD|15671295
Colspan and Rowspan:-

These 2 features allow you to extend columns and rows across multiple other
columns and rows.
1. Colspan:-
It is extends cell in a horizontal (left and right) row.
Syntax: - <td colspan=”x”>
Here x means numbers.
Eg14:- Table with colspan attribute
<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<caption align="bottom"> Employee Table </caption>
<tr>
</tr>
<tr>
<td align="center" colspan=2> ABC</td>
</tr>
<tr>
</tr>
<tr>
</tr>
26

lOMoARcPSD|15671295
<tr>
</tr>
</table>
</body>
</html>
Output:-
2. Rowspan:-
It is extends cell in a vertically (up and down) row.
Syntax: - <td rowspan=”x”>
Here x means numbers.
Forms in HTML
 HTML forms are used to carry the data from client to server. These forms perform as interface
between the client and server.
 <form>is tag is used to create HTML form.
 Form contains different types of controls which accepts information to the client.
 The various controls or form elements supported by HTML Forms. They are listed below
1. Text Field
a. Textbox
b. Password Box
2. Text Area
3. Button
a. Normal Button
b. Submit Button
c. Reset Button
4. Check Box
5. Radio Button
27

lOMoARcPSD|15671295
6. Select Menu
7. File Upload
1. Text Field:
The text field is most commonly used input form control for user giving a data. It Text field in HTML
divided into two types. They are
i. Textbox: The textbox is most common input tag and to make HTML form. <input> tag
means the input element is useful, it reoffered input data in out HTML form. The textbox is
used in HTML form; it allows only single line of data.
Syntax:
<input type=”text”>
ii. Password Box: The Password field look among invisible text field. The user type the
character into the password box, then the characters will be displays in the form of “****” or
“. . . . . “.
Syntax:
<input type=”password”>
Example Program:
<html>
<head>
<title> form program</title>
</head>
<body>
<form>
UserName: <input type="text"><br/>
Password: <input type="password"><br/>
<input type="button" value="Login">
<input type="button" value="Cancel">
</form>
</body>
</html>
OUTPUT:
28

lOMoARcPSD|15671295
2. Text Area or Multi Line Input Control:

The <textarea> is a tag to create Multi line text input field in HTML Form. It allows users to type unlimited
lines of data. When the form is submitted then these multi lines of data will be sent to the server.
Syntax:
<textarea>
-----------
----------
</textarea>
3. Buttons:
There are ways in html to create the buttons by using the <input> tag.
Syntax:
<input type=”button” valu=”buttonname”> to create normal button
<input type=”submit”> to create submit button submit button means in HTML forms, user fill all
the form input controls, then submit the form data then we can the button “submit button”.
<input type=”reset”> to create reset button.
<input type=”cancel”> to create cancel button.
Example program:
<html>
<head>
<title>Form program</title>
</head>
<body>
<h1> Student Form</h1>
<form>
Name: <input type="text"><br/>
Father Name: <input type="text"><br/>
Address:<textarea> </textarea><br/>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
OUTPUT:
29

lOMoARcPSD|15671295
4. Radio Button:
It refers one of many combinations. Radio buttons grouping all same attributes but it values will be different.
Syntax:
<input type=”radio” value=”text”>
5. Check box:
The check box control, we can give list of items to selects from list more than one items. We can select more
than one item by using Yes/No option.
Syntax:
<input type=”checkbox” value=”text”>
Example Program:
<html>
<head>
</head>
<body>
<form>
<input type="radio" value="Male"> Male
<input type="radio" value="FeMale"> FeMale <br/>
To Know Language: <br/>
<input type="checkbox" value="Telugu"> Telugu <br/>
<input type="checkbox" value="English"> English <br/>
<input type="checkbox" value="Hindi"> Hindi<br/>
30

lOMoARcPSD|15671295
</form>
</body>
</html>
OUTPUT:
6. Select Menu:
<select> and <option> tags are implements select menu in HTML forms. The <select> tag to define
select menu structure without any options.
<option> tag to define list of items (options) in the select menu. <option> tag is define within a
<select> tag.
Syntax:
<select>
<option> value </option>
</select>
Example Program:
<html>
<head>
</head>
<body>
<form>
31

lOMoARcPSD|15671295
<input type="radio" value="FeMale"> FeMale <br/>
To Know Language: <br/>
<input type="checkbox" value="Telugu"> Telugu <br/>
<input type="checkbox" value="English"> English <br/>
<input type="checkbox" value="Hindi"> Hindi<br/>
District: <select>
<option> select</option>
<option> Wanaparthy</option>
<option> Maabubnagr</option>
<option> Gadwal</option>
<option> Narayanpeta</option>
<option> Nagarkurnool</option>
</select> <br/>
</form>
</body>
</html>
OUTPUT:
Web Design Principles

1. Web publishing is a process through which can publish websites on WWW
2. Before beginning to create websites we should follow below
a. Identifying our target audience.
b. Have a statement of purpose.
c. Know our main objectives.
3. A good interface design as follow below
a. Should simple, consistent, stable, free-standing web pages with clear navigation.
32

lOMoARcPSD|15671295
b. Should not have dead end pages.

c. Should have a means of collecting feedbacks.
4. While designing a site the following points should be kept in mind.
a. Hierarchy
b. Relationships
c. Sequence
d. Home page design
e. Support for FAQ
5. A good web page design should be include the following features.
a. Graphics balance and organization
b. Page header and footers.
c. Tables to content text layout.
d. Page size appropriate to the type of document.
e. Text shat should appear the same irrespective of type of software used to browser the page.
f. Video and audio files should be used when they are absolutely necessary.
g. Image map can be used to create multiple links in one graphics image.
h. Various files formats can used for graphics are GIF, PNG, JPEG and BITMAP.
33

lOMoARcPSD|15671295
UNIT 2
AN OVERVIEW OF DYNAMIC WEB PAGES & DYNAMIC
WEB PAGE & CSS (Cascading Style Sheets)
Web Page:
Web page is a document available on World Wide Web. A web page can contain large amount of
information including text, graphics, audio, video and hyperlinks.
Static Web page:
 Static web pages are also known as stationary web page. They are loaded on the client’s browser as
exactly they are stored on the web server. Such web pages contain only static information. User can
only read the information but can’t do any modification or interact with the information.
Static web pages are created using only HTML. Static web pages are only used when the information is no
more required to be modified.
Dynamic Web page:

 Dynamic web page shows different information at different point of time. It is possible to change a
portion of a web page by dynamically changing its contents through applying logic to the static
HTML elements.
DHTML Introduction
 DHTML stands for Dynamic Hyper Text Markup Language.
 It is a group of technologies including HTML, Java Script, VB Script, DOM(Document Object
Model), and CSS.
 DHTML allows creating dynamic web pages.
 Dynamic web pages information can be modified after the page is loaded.
 For example, a piece of text can be modified from the text size or text color or move text location
from one place to another place in response to the user location etc.

lOMoARcPSD|15671295
Difference between HTML and DHTML

HTML DHTML
1. HTML stands for Hyper Text Markup DHTML stands for Dynamic Hyper Text
Language Markup Language
2. HTML is used for developing Static web
DHTML is used for developing Dynamic web pages
pages
3. HTML is not programming language but is DHTML is Document Object Model Language along
only presentation language with Presentation Language.
Contents of the DHTML can be place Dynamically;
4. HTML contents cannot placed dynamically
it means the contents can be modified.
5. HTML is not an independent developed
DHTML is a combination of technologies including
language, but it is developed version of
HTML, CSS, DOM, Java Script and VB Script.
SGML.
CSS (Cascading Style Sheets)
 CSS stands for Cascading Style Sheet.
 CSS used for to adding styles in out HTML programs or in our web pages.
 It allows specifying the styles of various HTML elements (Tags) separately from the structure of
HTML documents.
 This separation of styles from the content allows the updating (modification) in HTML document is
very easy.
 By using Style sheets we can specify the styles of various HTML elements (Tags) at one place.
Syntax:
selector
{
Property : values;
}
Example:
b
{
Color : red;
}
Difference between HTML and CSS
HTML CSS
HTML stands for Hyper Text Markup
CSS Stands for Cascading Style Sheet
Language
HTML having several Tags CSS having Selector, Propery, and Values
HTML is used for only creating normal web CSS is used for only adding styles in our HTML
pages but not adding styles in our web pages. documents ( web pages).

lOMoARcPSD|15671295
Types of CSS
We can define styles in our HTML Documents in 3 different ways. They are
1. External Style Sheet
2. Internal Style Sheet or Embedded Style Sheet
3. Inline Style Sheet.
1. External Style Sheet:

 In External Style sheet, all the styles various HTML tags are specified in a separate notepad file,
these styles can be linked another notepad HTML program.
 By using External Style Sheet, we can provide a uniform look to all the documents in web pages.
 The advantages of External Style Sheet is modifying the styles in one file, it will be reflected in all
web pages.
 <link> is tag to define in HTML to link a CSS file into HTML document. This tag always define in a
<head>----</head> tag.
Steps for creating External Style Sheet
Step 1:
 First to open a new notepad file, in that notepad we can write all styles of various HTML elements.
b
{
color:red;
}
i
{
font-size:25px;
}
Step 2:
 The above CSS file, we can save as “filename.css” like as “styles.css”.
Step 3:
 Again to open another new notepad, in that new notepad, we can write HTML program.
<html>
<head>
<title> External Style Sheet Program </title>
<link rel="stylesheet" type="text/css" href="d:\style.css">
</head>
<body>
<b>Niveditha</b>
<i>degree college></i>
<b>kothakota</b>
<i>wanaparthy</i>
</body>
</html>
3

lOMoARcPSD|15671295
 The above program using <link> tag, this tag used for link to the CSS file into the HTML program
file.
2. Internal Style Sheet or Embedded Style Sheet
 In embedded Style Sheet, we can define all the styles of various HTML elements (tags) within our
HTML program.
 In that HTML program we can use <style> tag. It tag used to define a styles of various html elements
(tags). It tag always to declare within a <head>-----</head> tag.
Syntax:
<style type=”text/css”>
Selector
{
Property : value;
}
</style>
 The following program to demonstrate Internal Style Sheet (Embedded Style Sheet).
Program:
<html>
<head>
<style type="text/css">
b
{
color:blue;
}
i
{
font-size:25px;
}
</style>
</head>
<body>
<b>Niveditha</b>
<b>kothakota</b>
<i>wanaparthy</i>
</body>
</html>

lOMoARcPSD|15671295
3. Inline Style Sheet

 In Inline Style Sheet, we can specify the styles within the line of HTML element (tag). These styles
specify within the HTML tag by using the attribute “style”.
Syntax:
<tagname style=”propery:value”> data </tagname>
Example Program
<html>
<head>
</head>
<body>
<b style="color:red">Niveditha</b>
<i style="font-size:30px">degree college></i>
<b style="color:blue">kothakota</b>
<i style="font-size:10px">wanaparthy</i>
</body>
</html>
Selectors and it Types

 CSS selector means where we want to apply the styles various HTML tags are called as CSS
Selector.
 There are several types selectors available in CSS. They are
i. Class Selector
ii. ID Selector
iii. The Element Selector
iv. Grouped Selector
v. Content Selector
i. The Element Tag Selector:
It is used to define tag or element associated with html.
Syntax:
Tagname
{
Property : values;
}
Example:
B
{
Color:red;
}
5

lOMoARcPSD|15671295
Example Program:
<html>
<head>
b
{
color:blue;
}
i
{
font-size:25px;
}
</style>
</head>
<body>
<b>Niveditha</b>
<b>kothakota</b>
<i>wanaparthy</i>
</body>
</html>
ii. Class Selector:
It used to define styles without re define HTML tags. In the class selector we can use the class name.in that
declaring the class selector start with “.” (period) symbol. The syntax of the class selector as follow below
Syntax:
.Classname
{
Property:value:
}
Example:
Abc
{
Color:red;
}
Note: The class selector styles to apply HTML element (tags), we are using the attribute in tag “class”.

lOMoARcPSD|15671295
Example Program:
<html>
<head>
.abc
{
color:blue;
}
.xyz
{
font-size:25px;
}
</style>
</head>
<body>
<b class="abc">Niveditha</b>
<i class="abc">degree college></i>
<b class="xyz">kothakota</b>
<i class="xyz">wanaparthy</i>
</body>
</html>
iii. ID Selector:
It used to define styles without re define HTML tags. In the ID selector we can use the class name.in that
declaring the ID selector start with “#” (Hash) symbol. The syntax of the ID selector as follow below
Syntax:
#IDname
{
Property:value:
}
Example:
#Abc
{
Color:red;
}
Note: The ID selector styles to apply HTML element (tags), we are using the attribute in tag “id”.
Example Program:
<html>
<head>
#abc
{
7

lOMoARcPSD|15671295
color:blue;
}
#xyz
{
font-size:25px;
}
</style>
</head>
<body>
<b id="abc">Niveditha</b>
<i id="abc">degree college></i>
<b id="xyz">kothakota</b>
<i id="xyz">wanaparthy</i>
</body>
</html>
iv. Grouped Selector:
If there are more than one elements (tags) having same styles, then it is easy for used Grouped Selector. In
Grouped selector declaring we can use the symbol comma (,) for separating selectors where we want to
applying the styles in HTML tags.
Syntax:
Selector1,selector2,selector3,…….
{
Property:value;
}
Example:
b,i,u
{
Color:red;
}
Example Program:
<html>
<head>
b,i
{
color:blue;
}
</style>
</head>
<body>
<b>Niveditha</b>
8

lOMoARcPSD|15671295
<b>kothakota</b>
<i>wanaparthy</i>
</body>
</html>
v. Content Selector:
If there are more than one element (tags) having same styles, then it is easy for used Content Selector. In
Content selector declaring we can use the Blank white space ( ) for separating selectors where we want to
applying the styles in HTML tags.
Syntax:
Selector1 selector2 selector3 …….
{
Property:value;
}
Example:
b i u
{
Color:red;
}
Example Program:
<html>
<head>
bi
{
color:blue;
}
</style>
</head>
<body>
<b>Niveditha</b>
<b>kothakota</b>
<i>wanaparthy</i>
</body>
</html>

lOMoARcPSD|15671295
CSS Property:
The following table to display all the main properties available in CSS.
CSS Property Category Property
Font-family
Font-size
Font
Font-color
Font-style
Color
Text-align
Text Text-valign
Text-decoration
Text-direction
Bgcolor
Background Background-img
Background-position
Bottom
Top
Right
Position
Left
Align
Valign
Padding
Padding-left
Padding Padding-right
Padding-top
Padding-bottom
1. Font properties:
The font can be controlled by using different CSS font properties. In CSS font properties having 4
properties. They are
i. Font-family: To specify the type face of the font.
ii. Font-size: To specify the size of the font.
iii. Font-color: To specify the color of the font.
iv. Font-style: To specify the styles of the font like as Bold, Italic, Underline of the font.
Example program:
<html>
<head>
<title> Font Properties Program </title>
10

lOMoARcPSD|15671295
b
{
font-color:blue;
font-size:25px
}
i
{
font-color:red;
font-size:25px
font-style:underline:
}
</style>
</head>
<body>
<b>Niveditha</b>
<b>kothakota</b>
<i>wanaparthy</i>
</body>
</html>
2. Text Properties:
i. Color: To specify the color of the text.
ii. Text-align: To specify the alignment (position) of the text like as (Right, left, center).
iii. Text-valign: To specify the Vertical alignment (position) of the text like as (top, bottom,
Middle).
iv. Text-decoration: To apply effects of the text like as (Under line, Over Line, Strike Through).
v. Text-direction: To Specify the direction of the text with left to right or right to left.
Example program:
<html>
<head>
<title> Text Properties Program </title>
b
{
11

lOMoARcPSD|15671295
color:blue;
text-align:center;
}
i
{
color:red;
text-decoration:overline;
}
</style>
</head>
<body>
<b>Niveditha</b>
<b>kothakota</b>
<i>wanaparthy</i>
</body>
</html>
3. Background Properties:
i. Bgcolor: To specify color of the background.
ii. Background-img: To specify the image of the background.
iii. Background-position: To Specify position of the background image and text.
4. Position Properties:
i. Bottom: To specify bottom of the text.
ii. Top: To specify top of the text
iii. Right: To specify right of the text.
iv. Left: To specify left of the text
v. Align: To specify Horizontal position of the text.
vi. valign: To specify vertical position of the text.
5. Padding Properties:
i. Padding: To Specify Equal spaces between all the borders (left, right, top, bottom).
ii. Padding-left: To Specify of the text with only left border space. But no other borders spaces.
iii. Padding-right: To Specify of the text with only right border space. But no other borders spaces.
iv. Padding-top: To Specify of the text with only top border space. But no other borders spaces.
v. Padding-bottom: To Specify of the text with only bottom border space. But no other borders
spaces.
12

lOMoARcPSD|15671295
Filters:
 Filters are used for to provide visual effect to the web pages.
 Filters are declared by Microsoft, it work only on windows based version of internet explorer.
 Applying filters to the text and images filters area a property of a style sheet which are used to
specify filters to the various html elements.
 Filters cannot add a new content, that means it does not allow any modification.
 In CSS having different types of filters. They are:
1. Flip Filter
2. Chroma filter
3. Invert filter
4. X-Ray Filter
5. Gray Filter
6. Shadow Filter
7. Blur Filter.
1. Flip Filter:
 Flip filters are used for mirroring of the text or images with horizontally and vertically.
 Flipv is a filter used for mirroring of the text or images with vertically.
 Fliph is a filter used for mirroring of the text or images with horizontally.
 Flipv is a filter used for mirroring of the text or images with vertically.
Example Program:
<html>
<head>
<title>The flip filter</title>
<style type = "text/css">
table
13

lOMoARcPSD|15671295
{
font-size: 3em;
font-family: Arial, sans-serif;
border-style: ridge ;
border-collapse: collapse
}
td
{
border-style: groove;
padding: 15px
}
</style>
</head>
<body>
<table>
<tr>
<td style = "filter: fliph">Text</td>
<td>Text</td>
</tr>
<tr>
<td style = "filter: flipv fliph">Text</td>
<td style = "filter: flipv">Text</td>
</tr>
</table>
</body>
</html>
OUTPUT:
14

lOMoARcPSD|15671295
2. Chroma Filter:
It is a filter, which is used for to provide a transparency effect. Chroma filters specify a transparency
effect to the color also.
Syntax:
Chroma(color=”value” enable=”true”);
3. Invert Filter:
Invert filters are used for negative effect to the given images. Negative effect means dark area become
lights and light area becomes dark.
Syntax:
filter: invert;
4. X-Ray Filter:
This filter is used for applying X-Ray effect to the given image. X-Ray effect means applying Gray Scale
effect to invert filter.
Syntax:
Filter:X-ray;
5. Gray Filter:
This filter used for applying Gray scale effect to the given image. Gray scale effect means eliminating all
colors of the give image and only the brightness available in an image.
Syntax:
Filter: gray;
Example Program:
<html>
<head>
<title> filters program</title>
</head>
<body>
<img src="C:\images\flower.jpg"> no filter effect </img>
<img src="C:\images\flower.jpg" style="filter:invert"> invert filter effect </img>
<img src="C:\images\flower.jpg" style="filter:X-ray"> X-Ray filter effect </img>
<img src="C:\images\flower.jpg" style="filter:grayscale"> Gray Scale filter effect </img>
</body>
</html>
15

lOMoARcPSD|15671295
6. Shadow Filter:
Shadow filter is used to create an attenuated shadow in the direction and color specified. This is a filter that
lies in between Dropshadow and Glow. The following parameters can be used in this filter
 Color: The color that you want the shadow to be.
 Direction: The direction of the blur, going clockwise, rounded to 45-degree increments. The default
value is 270 (left).
 0 = Top, 45 = Top right, 90 = Right, 135 = Bottom right, 180 = Bottom, 225 = Bottom left,
270 = Left, 315 = Top left
7. Blur Filter or Motion Blur:

Motion Blur is used to create blurred pictures or text with the direction and strength. The following
parameters can be used in this filter −
 Add: True or false. If true, the image is added to the blurred image; and if false, the image is not
added to the blurred image.
 Direction: The direction of the blur, going clockwise, rounded to 45-degree increments. The default
value is 270 (left).
 0 = Top, 45 = Top right, 90 = Right, 135 = Bottom right, 180 = Bottom, 225 = Bottom left,
270 = Left, 315 = Top left
Transitions
 Transitions are used to provide visual effect to the webpage.
 Transitions are developed by Microsoft. So it is supported by internet Explorer.
 Transitions are to allow to transfer one page to another page with a visual effect like random
dissolve, Horizontal blinks, Box-in, Box-out, Circle-in, Circle-out and Diamond.
 A few effects we can apply in transitions can use randomly, 3D Effects and also use in filters.
 There are 2 types of transitions.
i. Blend Transitions
ii. Reveal Transitions
i. Blend Transitions:
The blend transitions allows content of the element to fade-in or fade-out. The blend transitions also specify
using a HTML syntax as follow
Syntax:
Filter: blend(duratiom=0.001);
16

lOMoARcPSD|15671295
ii. Reveal Transitions:
The reveal Transitions is a set of pre-defined transitions effects like as Box-in, Box-out, Circle-in, Circle-
out, Horizontal and Vertical swipes.
Syntax:
Filter: Reveal(duration=0.01, Transition:box-in);
17

lOMoARcPSD|15671295
UNIT 3
JAVA SCRIPT
Introduction to Java script:
1. Java script was designed to add mathematical applications into a webpages.
2. Java script is a scripting language.
3. Scripting language is a light weight programming language.
4. Java script is usually embedded direct into a HTML webpages.
5. Java script is a interpreted language. ( interpreted means program run without compilation).
How to add Java Script into our HTML program
The webpages contains HTML code as well as Java Script code. The Java Script can be added into our
webpages following two ways.
1. Writing the Java Script code in our HTML program using <script>……</script>. It tag always declared
within a <head>……</head> tag.
2. Using <link> tag in our HTML program (means external java script).
The <script> tag:
The <script> tag is, can be used for we write Java Script program in our HTML program code. It tag always
declared within a <head>……</head> tag.
Syntax:
<script type=”text/javascript”>
---------------------------
---------------------------
</script>
OR
<script language=”javascript”>
---------------------------
---------------------------
</script>
Example:
<html>
<head>
<title> sample program for java script </title>
Document.write(“welcome javascript program”);
</script>
</head>
<body>
</body>

lOMoARcPSD|15671295
</html>
Java Script Variable:

A JavaScript variable is simply a name of storage location. There are two types of variables in JavaScript :
local variable and global variable.
There are some rules while declaring a JavaScript variable (also known as identifiers).
1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.

2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different variables.
Note: A Variable is created by preceding it with keyword “var” despite of any data will be stored in that
variable.
Example:
Var x; // correct declaration
Var x=10; // correct declaration
Var b2=20; // correct declaration
Var 2b=20; // wrong declaration
JavaScript local variable
A JavaScript local variable is declared inside block or function. It is accessible within the function or block
only. For example:
function abc()
{
var x=10;//local variable
}
</script>
JavaScript global variable
A JavaScript global variable is accessible from any function. A variable i.e. declared outside the function
or declared with window object is known as global variable. For example:
var data=200;//gloabal variable
function a( )
{
document.writeln(data);
}
function b( )
{
document.writeln(data);
}
a();//calling JavaScript function
2

lOMoARcPSD|15671295
b();
</script>
Java Script Data types

Data Type: The Data type is used to indicate the type of data value stored in a variable. The Data type of a
variable is specified at the time of variable declaration.
Data Types of Java Script:
Java Script Data Type can be classified into many types. They are
1. Boolean Data Type
2. String Data Type
3. Null Data Type
4. Number Data Type
1. Boolean Data Type: A Boolean value is either true or false values only allowing data types is called
as Boolean Data Type in Java Script.
2. String Data Type: String means sequence of characters or collection of characters and it is enclosed
within a double quotes (“ “). It data type allowing only characters or sequence of characters in Java
Script.
3. Null Data Type: It is a special value in Java Script. The Null value represent just empty value. It
null value allowing data in a java script.
4. Number Data Type: In java Script the Number can be consists of any type numerical values. it also
support both negative & positive numbers. It data type consist of two types.
i. Integer: in Java Script we can express only rounded values. it express three ways they are
a. Decimal [based 10]: a normal integer without pointing value.
b. Octal [based 8]: it is an integer with “0 to 7”.
c. Hexadecimal [based 16]: it is an integer with “0 to 9” and “A to H”.
ii. Floating: floating point values can be expressed with a pointing values.
Example:
Var x=10; //number as integer data type
Var y=10.5; //number as floating data type
Var ch=”ndc”; // string data type
Java Script Operators

Operator is symbol that performs certain operation like arithmetic operations, logical operations and so on.
In a Java Script having different types of operators as follow below
1. Arithmetic Operators
2. Comparison (Relational) Operators

lOMoARcPSD|15671295
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic operations on the operands. The following operators are
known as JavaScript arithmetic operators.
Operator Description Example
+ Addition 10+20 = 30
- Subtraction 20-10 = 10
* Multiplication 10*20 = 200
/ Division 20/10 = 2
% Modulus (Remainder) 20%10 = 0
<html>
<body>
<script type = "text/javascript">
var a = 33;
var b = 10;
var result;
document.write("a + b = ");
result = a + b;
document.write(result);
document.write("a - b = ");
result = a - b;
document.write("a / b = ");
result = a / b;

lOMoARcPSD|15671295
document.write("a % b = ");
result = a % b;
</script>
</body>
</html>
JavaScript Comparison Operators

The JavaScript comparison operator compares the two operands. The comparison operators are as follows:
== Is equal to 10==20 = false
!= Not equal to 10!=20 = true
> Greater than 20>10 = true
>= Greater than or equal to 20>=10 = true
< Less than 20<10 = false
<= Less than or equal to 20<=10 = false
<html>
<head>
<title> relational operator program</title>
var a = 10;
var b = 20;
document.write("Result of = =”+(a == b));
document.write("Result of != ”+(a != b));
document.write("Result of <”+(a < b));
document.write("Result of <=”+(a <= b));
document.write("Result of >”+(a > b));
document.write("Result of >=”+(a >= b));
</script>
</head>
5

lOMoARcPSD|15671295
<body>
</body>
</html>
JavaScript Bitwise Operators
he bitwise operators perform bitwise operations on operands. The bitwise operators are as follows:
-- Description Example
& Bitwise AND (10==20 & 20==33) = false
| Bitwise OR (10==20 | 20==33) = false
^ Bitwise XOR (10==20 ^ 20==33) = false
~ Bitwise NOT (~10) = -10
<< Bitwise Left Shift (10<<2) = 40
>> Bitwise Right Shift (10>>2) = 2
>>> Bitwise Right Shift with Zero (10>>>2) = 2
JavaScript Logical Operators
The following operators are known as JavaScript logical operators.
&& Logical AND (10==20 && 20==33) = false
|| Logical OR (10==20 || 20==33) = false
! Logical Not !(10==20) = true
JavaScript Assignment Operators
The following operators are known as JavaScript assignment operators.

lOMoARcPSD|15671295
= Assign 10+10 = 20
+= Add and assign var a=10; a+=20; Now a = 30
-= Subtract and assign var a=20; a-=10; Now a = 10
*= Multiply and assign var a=10; a*=20; Now a = 200
/= Divide and assign var a=10; a/=2; Now a = 5
%= Modulus and assign var a=10; a%=2; Now a = 0
JavaScript Conditional
JavaScript supports conditional statements which are used to perform different actions based on different
conditions. JavaScript supports the following forms of if..else statement
1. If Statement
2. If else statement
3. if else if statement
JavaScript If statement
The if statement is the fundamental control statement that allows JavaScript to make decisions and execute
statements conditionally.
if(expression)
{
//content to be evaluated
}
<html>
<body>
<script>
var a=20;
if(a>10)
{
document.write("value of a is greater than 10");
7

lOMoARcPSD|15671295
}
</script>
</body>
</html>
JavaScript If...else Statement
It evaluates the content whether condition is true of false. The syntax of JavaScript if-else statement is given
below.
if(expression)
{
//content to be evaluated if condition is true
}
Else
{
//content to be evaluated if condition is false
}
Ex:
<html>
<body>
<script>
var a=20;
if(a%2==0)
{
document.write("a is even number");
}
Else
{
document.write("a is odd number");
}
</script>
</body>
</html>

lOMoARcPSD|15671295
JavaScript Switch
The JavaScript switch statement is used to execute one code from multiple expressions. It is just like else
if statement that we have learned in previous page. But it is convenient than if..else..if because it can be used
with numbers, characters etc.
switch(expression)
{
case value1:
code to be executed;
break;
case value2:
code to be executed;
break;
......
default:
code to be executed if above values are not matched;
}
Ex:
<html>
<body>
<script>
var grade='B';
var result;
switch(grade)
{
case 'A':
result="A Grade";
break;
case 'B':
result="B Grade";
break;
case 'C':
result="C Grade";
break;
9

lOMoARcPSD|15671295
default:
result="No Grade";
}
</script>
</body>
</html>
JavaScript Loops
The JavaScript loops are used to iterate the piece of code using for, while, do while or for-in loops. It
makes the code compact. It is mostly used in array.
There are four types of loops in JavaScript.
1. for loop
2. while loop
3. do-while loop
4. for-in loop
1) JavaScript For loop
The JavaScript for loop iterates the elements for the fixed number of times. It should be used if number of
iteration is known. The syntax of for loop is given below.
for (initialization; condition; increment)

{
code to be executed
}
Ex:
<html>
<body>
<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}
</script>
10

lOMoARcPSD|15671295
</body>
</html>
2) JavaScript while loop
The JavaScript while loop iterates the elements for the infinite number of times. It should be used if
number of iteration is not known. The syntax of while loop is given below.
while (condition)
{
code to be executed
}
Ex:
<html>
<body>
<script>
var i=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}
</script>
</body>
</html>
3) JavaScript do while loop
The JavaScript do while loop iterates the elements for the infinite number of times like while loop. But,
code is executed at leastonce whether condition is true or false. The syntax of do while loop is given below.
Do
{
code to be executed
}while (condition);
Ex:
<html>
<body>
<script>
var i=21;
do
11

lOMoARcPSD|15671295
{
document.write(i + "<br/>");
i++;
}while (i<=25);
</script>
</body>
</html>
Java Script Function

A function is a self-contained block of a code that performs a specific task. It solve complex problems by
dividing a program into small programs. A functions in Java Script to dividing into 2 types. They are
1. User-defined Functions
2. Built-in Functions.
1. User-Defined Functions: This functions are created by the user and also used by the user is called as
User-defined Functions. It user-defined function declaring as follow 3 parts.
a. Function declaration
b. Function definition
c. Function call
a. Function Declaration: it declaration of function , that consist of function keyword, function name,
function parameters, and terminated with semicolon(;). Function declaration is also called as function
prototype. It function declaration is optional in a Java Script.
Syntax: function functionname(par1,par2,….);
Ex: function add(var a, var b, var c);
b. Function definition: it is a complete description of functionality of a code. Actually function
definition tells what a performing and how it is performing. A function definition contain function
body. Function name, along with their parameter list.
Syntax:
Function functionname(apr1,par2,…)
{
-----------
}
Ex: function add(var a, var b)
{
Var c=a+b;
document.write( c );
}
12

lOMoARcPSD|15671295
c. Function calling / function call: a function can be called with the function name along with list of
parameters. When a function a call, then function is executed than the program execution control
transfer to the function definition and function definition will be executed.
Syntax:
Functionname(value1,value2,……);
html>
<head>
function add( )
{
Var a=10;
Var b=20;
Var c=a+b;
document.write(c);
}
add( );
</script>
</head>
<body>
</body>
</html>
Passing parameters to functions:
Parameters can be passed into 2 ways. Namely pass by value and pass by reference. In Java Script only
support passes by value (call by value). The calling function to pass a value to the function parameter.
html>
<head>
function add(var a,var b)
{
Var c=a+b;
document.write(c);
}
add(20,30);
</script>
</head>
<body>
</body>
</html>
Arrays in Java Script:
The collection of data elements with similar data types is called as Array. Or an array contain a set of
homogenous items. But in Java Script an array contain homogenous items and also non- homogenous items.
Creating and Accessing array elements:
An array can be declared as follow below
Syntax:
Var variablename(size)={valu1,value2,…..};
Ex: var a(5)={10,20,30,40,50};
13

lOMoARcPSD|15671295
Program:
<html>
<head>
<title> array program </title>
var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++)
{
document.write(emp[i] + "<br/>");
}
</script>
</head>
<body>
</body>
</html>
OBJECTS in JAVA SCRIPT
A javaScript object is an entity having state and behavior (properties and method). For example: car, pen,
bike, chair, glass, keyboard, monitor etc. JavaScript is an object-based language. Everything is an object in
JavaScript. Java objects are two types. They are
1. built in objects
2. user defined object
JavaScript Built in Objects
It is used for users but not creating. The following are the different types of Built-in objects in java scripts.
They are
1. String Object
2. Date Object
3. Math Object
4. Number Object
5. Boolean object
1. Math Object: Java Script having some mathematical functions, it functions to performed in out Java
Script for mathematical calculation by using the objects are called Maths Objects. In Java Script having
several types of mathematical functions. They are
14

lOMoARcPSD|15671295
Sr.No. Method & Description
1 abs()
Returns the absolute value of a number.
2 ceil()
Returns the smallest integer greater than or equal to a number.
3 cos()
Returns the cosine of a number.
4 exp()
Returns EN, where N is the argument, and E is Euler's constant, the base of the natural
logarithm.
5 floor()
Returns the largest integer less than or equal to a number.
6 log()
Returns the natural logarithm (base E) of a number.
7 max()
Returns the largest of zero or more numbers.
8 min()
Returns the smallest of zero or more numbers.
9 pow()
Returns base to the exponent power, that is, base exponent.
10 round()
Returns the value of a number rounded to the nearest integer.
11 sin()
Returns the sine of a number.
12 sqrt()
Returns the square root of a number.
13 tan()
Returns the tangent of a number.
2. String Object
15

lOMoARcPSD|15671295
String objects are used for implementing a string functions in out Java Script. A string function to
perform on sequence of characters. In java script having several types of String functions. They are
1. toLowerCase( ): Returns the calling string value converted to lower case.
Syntax: str.toLowerCase( );
Ex:
Var str=”NIVEDITA”;
Str.toLowerCase( );
O/P: niveditha
2. toUpperCase( ) : Returns the calling string value converted to upper case.
Syntax: str.toUpperCase( );
Ex:
Var str=”nivedita”;
Str.toLowerCase( );
O/P: NIVEDITA
3. concate( ): Combines the text of two strings and returns a new string.
Syntax: str1.concate(str2);
Ex: var str1=”nivedith” ;
Var str2=”degree college”;
Var str3=str1.concate(str2);
Document.write(str3);
O/P: niveditha degree college
4. charAt( ): Returns the character at the specified index
Syntax: str.charAT(indexvalue);
Ex: var str-“niveditha”;
Str.charAt(2);
O/P: v
5. indexOf( ): Returns the index within the calling String object of the first occurrence of the specified
value, or -1 if not found.
Syntax: str.indexOf(‘character’);
Ex: var str-“niveditha”;
Str.indexOf(‘I’);
O/P: 1
6. substr( ): Returns the characters in a string beginning at the specified location through the specified
number of characters.
16

lOMoARcPSD|15671295
3. Date Objects:
Date objects are implementing the date and time functions. It is important specification in every program
in java script. In java script having several types of date and time functions. They are
METHOD DESCRIPTION
Date() It returns presents day’s date and time.
getDate() It returns the day for the specified date.
getDay() It returns the day of the week for the specified date.
getFullYear() It returns the year of the specified date.
getYear() This method returns the year in the specified date.
getHours() It returns the hour in a specified date.
getMilliseconds() It returns the milliseconds in the specified date.
getMinutes() It returns the minutes in the specified date.
getMonth() It returns the month in the specified date. This also find the month.
getSeconds() This method returns the seconds in the specified date.
getTime() This method returns the date in terms of numeric value as milliseconds.
setDate() This method sets the day of the month for a specified date.
setFullYear() This method sets the full year for a specified date.
4. Boolean Object:
Boolean objects are implementing a logical function that defining methods and properties, that help
manipulate of Boolean objects. In java script if a Boolean values are needed then it automatically created
Boolean objects can also created by the user when the Boolean values are “0” or “null” or “empty string”
is equal to false other wise Boolean value is “1” or “not null” or “string”.
5. Number Objects:
Number Objects is also known as store objects. It objects used to store the numeric values into a
variable. The programmers using java script, the number object created automatically when the
declaration of a variable along with value.
17

lOMoARcPSD|15671295
UNIT 4
JAVA SCRIPT EVENT HANDLING
Event:
JavaScript's interaction with HTML is handled through events that occur when the user or the
browser manipulates a page.
When the page loads, it is called an event. When the user clicks a button, that click too is an event.
Other examples include events like pressing any key, closing a window, resizing a window, etc.
Examples of Events:
 A Mouse Click
 A Web page or Image is loading
 Mouse pointer over a hotspot on the web page
 Selecting input field an HTML forms
 Submitting an HTML form
 Pressing keys on keyboard
Types of Events:
Generally in java script having two types of events. They are
i. Window Events
ii. User Events.
i. Window Events: Window events are the events that occur as soon as something happens to the
window. They occurs when the page loads or window or when the focus moves to and from a
window frame. Window Events are flowing below
a. Alert Window
b. Prompt Window
c. Confirm Window
ii. User Events: User Events are the events occurs when user interact with page elements by using
mouse or keyboard or other pointing devices.
Commonly used User Events in Java Script:

lOMoARcPSD|15671295
1. onAbort Event:
onAbort event occur when the loading of an image stops or abort. When the users presses the stop
button onr redirects the page before the image than onAbort event occurs. This event is handked by the
onAbort event handler.
Example:
<html>
<head>
</head>
<body>
<img src="C:\Users\Himabindu\OneDrive\Pictures\Saved pictures\logo.jpg" onAbort="alert('The
loading action has been aborted\nTry again later') ">
</body>
</html>
2. onClick:
When an element or mouse is clicked event handler calls the java script function. The specific java script
code or function is being executed on the occurrence of the click a button on a form.
Example:
<html>
<head>
<title>onclick program</title>
<script language="javascript">
function function1()
{
alert("you have Clicked a button");
}
</script>
</head>
<body>
<input type="button" value="Click" onClick="function1()">
</body>
</html>
OUTPUT:

lOMoARcPSD|15671295
3. onDblClick
it is same as onClick event handler. But in onClick event to perform when a user to click a button in a form
with once by using mouse than the onClick event will performed. But in onDblClick event to perform when
a user to click a button in a form with double times by using mouse than the onDblClick event will be
performed
Example:
<html>
<head>
<title>onDblclick program</title>
{
alert("you have Double Clicked a button");
}
</script>
</head>
<body>
<input type="button" value="Click" onDblClick="function1()">
</body>
</html>
OUTPUT
4. onError:
onError event occurs whether there is a java script error. The onError event is used to launch a script that
writes messages to the status bar of the browser.
Example:
<html>
<head>
<title>onerror program</title>
{
alert("Image not loaded");
}
</script>
</head>
<body>
<img src="C:\logo.jpg" onError="function1() ">
</body>
</html>
3

lOMoARcPSD|15671295
OUTPUT:
5. onFocus:
When a window frame or form element is focused on, the onFocus event handler calls java script function.
The specific java script code or function will be executed on the occurrence of a function event. The element
can be focused by clicking on it or by tabbing.
Example:
<html>
<head>
<title>onfocus program</title>
function function1(x)
{
x.style.background = "yellow";
}
</script>
</head>
<body>
Enter your name: <input type="text" onfocus="function1(this)">
</body>
</html>
OUTPUT
6. onKeyPress:
The onKeyPress event occurs when the user presses the key or hold down the key on key board. This event
is handled by onKeyPress event handler.
Example:
<html>
<head>
<title>onKeyPress program</title>
function function1( )
{
4

lOMoARcPSD|15671295
alert("The Key is Pressed on Keyboard");

}
</script>
</head>
<body>
Enter your name: <input type="text" onKeyPress="function1()">
</body>
</html>
OUTPUT:
7. onKeyUp:
The onKeyUp event occurs when the user release the key or hold and down and release the key on key
board. This event is handled by onKeyUp event handler. onKeyUp event invoke when e key is released over
the element.
Example:
<html>
<head>
<title>onKeyUp program</title>
{
alert("The Key is up (Released) on Keyboard");
}
</script>
</head>
<body>
Enter your name: <input type="text" onKeyup="function1()">
</body>
</html>
8. onKeyDown:
The onKeyDown event occurs when the user Press (down) the key or hold down the key on key board. This
event is handled by onKeyDown event handler. onKeyUp event invoke when e key is Pressed Down over
the element.
Example:
<html>
<head>
<title>onKeyDown program</title>
5

lOMoARcPSD|15671295
{
alert("The Key is Pressed Down on Keyboard");
}
</script>
</head>
<body>
Enter your name: <input type="text" onKeyDown="function1()">
</body>
</html>
OUTPUT:
9. onLoad:
onLoad event gets invoked as soon as a web page is opened. It is handled by the onLoad event handler. It is
mostly used when a web page loads its complete content.
Example:
<html>
<head>
<title>onLoad program</title>
function function1( )
{
alert("the Web Page is loaded");
}
</script>
</head>
<body onLoad="function1()">
<h1>NDC</h1>
<h2>NDC</h2>
<h3>NDC</h3>
<h4>NDC</h4>
<h5>NDC</h5>
<h6>NDC</h6>
</body>
</html>

lOMoARcPSD|15671295
OPTPUT:
10. onMouseDown:
The onMouseDown event occurs when the user Mouse Button is Pressed. This event is handled by
onMouseDown event handler. onMouseDown event invoke when the User Mouse Button (left/right) Pressed
Down.
Example:
<html>
<head>
<title>onMouseDown program</title>
{
alert("The Mouse Button Pressed Down");
}
</script>
</head>
<body>
Enter your name: <input type="text" onMouseDown="function1()">
</body>
</html>
OUTPUT:

lOMoARcPSD|15671295
11. onMousUp:
The onMouseUp event occurs when the user Mouse Button is Released. This event is handled by
onMouseUp event handler. onMouseUp event invoke when the User Mouse Button (left/right) Released Up
Example:
<html>
<head>
<title>onMouseUp program</title>
{
alert("The Mouse Button was Released Up");
}
</script>
</head>
<body>
Enter your name: <input type="text" onMouseUp="function1()">
</body>
</html>
OUTPUT:
12. onMouseMove:
onMouseMove event occurs when the mouse pointer moves when it is on an element. This event is handled
by onMouseMove event handler. The browser will be checking the mouse pointer position constantly. If any
changes in mouse pointer position is observed. Then the onMouseMove event is generated.
Example:
<html>
<head>
<title>onMouseMove program</title>
{
alert("The Mouse pointer was Moved");
}
</script>
</head>
<body>

lOMoARcPSD|15671295
Enter your name: <input type="text" onMouseMove="function1()">

</body>
</html>
OUTPUT
13. onMouseOver:
onMuseOver event will occur when the mouse pointer is moved over an element. This event is handled by
the onMuseOver event handler. The programmer can code this event and even add an alert when mouse
pointer is moved onto any element.
14. onMouseOut:
onMuseOut event will occur when the mouse pointer is out from over an element. This event is handled by
the onMuseOut event handler. The programmer can code this event and even add an alert when mouse
pointer is out onto any element.
Example:
<html>
<head>
<title>onMousOver and onMouseOut program</title>
{
alert("The Mouse pointer is over on the Textbox");
}
{
alert("The Mouse pointer is Out from the Textbox");
}
</script>
</head>
<body>
Enter your name: <input type="text" onMouseOver="function1()"
onMouseOut="function2()">
</body>
</html>
OUTPUT

lOMoARcPSD|15671295
15. onReset:
onReset event occurs when a form is reset. This event is handled by the onReset event handler. When any
form is rest, all the form controls data will clear at a time.
Example:
<html>
<head>
<title>onRest program</title>
{
alert("the form is reset (cleared form data)");
}
</script>
</head>
<body>
<h1> Student Form </h1>
<form onReset="function1()">
Student Name: <input type="text"><br/>
Student Father Name: <input type="text"><br/>
Student Mother Name: <input type="text"><br/>
Student Mobile Number: <input type="text"><br/>
<input type="radio" value="FeMale"> Female <br/>
Course: <select>
<option>Select Course</option>
<option>BA</option>
<option>BCom</option>
<option>BSc</option>
</select> <br/>
<input type="button" value="Submit">
</form>
</body>
</html>
10

lOMoARcPSD|15671295
OUTPUT
16. OnResize:
The onResize event occurs when the browser window is resized. This event is handled by onResize event
handler. This event cannot be cancelled. All the browsers support this operation. But internet explorer fires
this event when browser or event is resized.
17. onSelect:
onSelect event occurs when some text is selected in any element. This event is handled by the onSelect
event handler.
Example:
<html>
<head>
<title>onSelect program</title>
{
alert("The Text is selected on text box");
}
</script>
</head>
<body>
Enter your name: <input type="text" onSelect="function1()">
</body>
</html>
OUTPUT:
18. onSubmit:
It is a form based event. Whenever user fills ihe given form and ensures that entire information to store on
server then user click “submit” button than onSubmit event will performed and the form information sent to
the server. This event handled by onSubmit event handler. This event occurs whien the user to click submit
button in form.
11

lOMoARcPSD|15671295
Example:
<html>
<head>
<title>onSubmit program</title>
{
alert("the form is Submitted successfully");
}
</script>
</head>
<body>
<h1> Student Form </h1>
<form onSubmit="function1()">
Student Name: <input type="text"><br/>
Student Father Name: <input type="text"><br/>
Student Mother Name: <input type="text"><br/>
Student Mobile Number: <input type="text"><br/>
<input type="radio" value="FeMale"> Female <br/>
Course: <select>
<option>Select Course</option>
<option>BA</option>
<option>BCom</option>
<option>BSc</option>
</select> <br/>
<input type="submit" value="submit">
</form>
</body>
</html>
OUTPUT:
12

lOMoARcPSD|15671295
19. onUnload:
The onUnload event gets invoked as soon as the given web document is closed. It is handled by the
onUnload Event handler. It mostly occurs when the user close the browser Or web page.
20. onDragDrop:
when the user drags the mouse and drop the onDragDrop event occurs. This event is handled by the
onDragDrop event handler. This event is mostly occurs when a object like a file or shortcut is dragged and
dropped into the window. This event handler will make use of object properties such as data, type, target,
screen x, screen y and modifiers.
Exxample:
<html>
<head>
<style type = "text/css">
#boxA, #boxB
{
float:left;padding:10px;margin:10px; -moz-user-select:none;
}
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
function dragStart(ev)
{
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to drag the purple box around.</div>
<div id = "boxA" draggable = "true"
ondragstart = "return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id = "boxB">Dustbin</div>
</center>
</body>
</html>
13

lOMoARcPSD|15671295
UNIT 5
XML
(Extensible Markup Language)
XML Introduction:
 XML stands for Extensible Markup Language.
 XML was derived from SGML (Standard Generalized Markup Language).
 XML allows creating user defined tags.
 XML is a language used for developing a E-Commerce Applications.
 XML is a language; it is used for developing other languages.
 All XML programs are saved as “filename.xml”.
 Every XML program start with as follow below
<? Xml version=”1.0” ?>
Creating an XML Document(program):
An XML document is side to be a valid XML document, if it is satisfy the following conditions
a. The XML document should have at least on element or one tag.
b. All elements (tags) must be defined in a top level elements called as “Root” element.
Example Program:
Write an XML program using college information system.
<?xml version="1.0"?>
<college>
<students>
<sname>Ramu</sname>
<course>BCOM</course>
</students>
<staff>
<staffname>Krishnaiah</staffname>
<dept>commerce</dept>
</staff>
</college>

lOMoARcPSD|15671295
Difference Between XML and HTML

HTML XML
HTML stands for Hypertext
1 XML stands for Extensible Markup Language
Markup Language
HTML is language used for
2 XML is language used for describing a text in a webpage.
formatting a text in a webpage.
Every tag in HTML is Pre-
3 Every tag in a XML is User defined.
defined
In HTML, every tag need not
4 In XML, every tag Must have a closing tag.
having a closing tag.
Every HTML program start with Every XML program start with
5
<html>…………..</html> <?XML version=”1.0”?>
HTML displays only content of
6 the result but not program XML displays both content of the result and program structure.
structure.
XML to allow create or developing other new languages.
Example:
 WML (wireless markup language) used for mobile
applications
 Mathmal used for mathematical formulas
 CML(Chemical Markup language)used for chemical
HTML does not allow or does not formulas.
7
support any other new languages.  XFRML (Extensible financial reports Markup
language)used for financial reports in business
applications.
 SMIL(Synchronized multimedia interface
language)used for developing Multimedia applications
8. HTML is not case sensitive. XML must be follow case sensitive.

XML DTD (XML Document Type Definition):
 An XML document is a well formatted XML document, if it is satisfy XML DTD or XML schema.
 XML DTD is used to specify the rules for XML Documents.
 XML DTD provides a method to verify the validity of an XML document.
 <! DOCTYPE DOCUMENT> is a tag used in XML to create XML DTD.
2

lOMoARcPSD|15671295
 <!ELEMENT> is tag to define validation to each element in XML document.

<!DOCTYPE roottagname [
<!ELEMENT tagname (…….)>
<!ENTITY tagname (…….)>
------------------------------------
---------------------------------------
]>
 Following are some rules specified by using XML DTD.
i. X(Y.Z)it means X is a root (parent) element and Y,Z are sub (child) elements of X
ii. X+it means one or more child elements of X
iii. X*it means zero (0) or more child elements of X
iv. X?it means zero (0) or one (1) child of X
v. X(#PCDATA)it means X element contain only text.
Example Program:
Create XML DTD for college information system with following rules.
i. A College having CName, CAddress, and Students.
ii. Students having one or More students.
iii. Each student has a sname, sclass, saddress.
Program:
<!DOCUTYPE DOCUMENT [
<! ELEMENT College(Cname,Caddress,Students)>
<! ELEMENT CName(#PCDATA)>
<! ELEMENT CAddress(#PCDATA)>
<! ELEMENT Students(Student+)>
<! ELEMENT Student(Sname,Sclass,Saddress)>
<! ELEMENT Sname(#PCDATA)>
<! ELEMENT Sclass(#PCDATA)>
<! ELEMENT Saddress(#PCDATA)>
]>
<college>
<CName>NDC</CName>
<CAddress>KKT<CAddress>
<Students>
<student>
<sname>Ramu</sname>
3

lOMoARcPSD|15671295
<Sclass>BCOM</Sclass>
<Saddress>KKT</Saddress>
</student>
<student>
<sname>Rani</sname>
<Sclass>BSc</Sclass>
<Saddress>WNP</Saddress>
</student>
</students>
</college>
XSL (Extensible Style Sheet Language)

 XSL stands for extensible style sheet language and it is used for adding the styles in our XML
document.
 XSL use another language named as XSLT
 XSLT stands for Extensible style sheet language transformation.
 X path is a language for navigating XML document.
 Following code structure is used to add XSL file into XML document
 <?xml-stylesheet type='text/xsl' href='style.xsl'?>
XSLT: (Extensible Style Sheet Language Transformation)
 XSL is used to transformation an XML document into another XML document or another type of
document that recognized by a web browser like HTML or XHTML.
 Normally XSLT done by transforming each xml element into an XHTML element.
 We can added XSLT or we can remove XSLT then the output file effected from the browser.
 A common way to describe the transformation process is to say that XSLT an XML document into
an XML tree .
XSLT Using X PATH:
 XSLT uses X PATH to find information in an XML documents.
 X PATH is used to navigating through element and attributes in an XML Document.
 X PATH is syntax for defining part of an XML document.
 X PATH is a major element in XSLT.
Example:
<?XML version=”1.0”?>
<xsl:stylesheet =”XSL Transformation”>
<college>

lOMoARcPSD|15671295
<CName>NDC</CName>
<CAddress>KKT<CAddress>
<Students>
<student>
<sname>Ramu</sname>
<Sclass>BCOM</Sclass>
<Saddress>KKT</Saddress>
</student>
<student>
<sname>Rani</sname>
<Sclass>BSc</Sclass>
<Saddress>WNP</Saddress>
</student>
</students>
</college>
XML DOM (Document Object Model)
They are most commonly two models used in XML environment. They are SAX and DOM.
SAX: SAX used when declaring with collection of data, this data of XML document is passing from one
place to another place with convert intermediate language.
DOM:
 DOM stands for Document Object Model.
 It defines a standard way to access and manipulate documents.
 The Document Object Model (DOM) is a programming API for HTML and XML documents. It
defines the logical structure of documents and the way a document is accessed and manipulated.
 The Document Object Model is to provide a standard programming interface that can be used in a
wide variety of environments and applications.
 The Document Object Model can be used with any programming language.
 XML DOM defines a standard way to access and manipulate XML documents.
 Any one write XML program in any language, all those XML programs can be implemented in
different ways.
 The DOM views document as tree model. This is a logical view of the document.
 There is a no requirement for creating a tree data structure
 Each node of the tree, each XML element is modeled as an object.

lOMoARcPSD|15671295
 The DOM expressed the whole of the document to application. It also scriptable, so application can
manipulate the individual nodes.
 HTML can also viewed as XML document and accessed through DOM structure.
XML Program:
<books>
<book>
<title>Effective Java</title>
<author>Joshua Bloch</author>
<year> 2009 </year>
</book>
<book>
<title>Effective Java</title>
<author>Scott Meyers</author>
<year> 2010 </year>
</book>
</books>
The Above Program using XML DOM as follow below

lOMoARcPSD|15671295
XML Query Language:

1. XML Query Language (XQL) provides a mechanism for retrieving and interpreting Extensible
Markup Language (XML) data.
2. XQL is similar to Extensible Style Sheet Language (XSL) patterns and use XML data model.
3. XQL expressions are easily parsed, easy to type, and can be used in verity software environment.
4. XQL is used in web browsers, XML middle ware, practical extraction and report language (perl)
libraries and command line utilities.
5. XQL uses the XML path language (X PATH) which is used by both XSL transformation (XSLT)
and XML pointer Language (XML POINTER).
6. The following list shows the ways in which X PATH is used.
i. Create expressions that can address parts of an XML documents.
ii. Manipulate strings, numbers, and Boolean operators.
iii. Matches set of nodes in a documents.
7. X PATH models an XML document as a tree of nodes of different types, including elements,
attributes and text.
8. X PATH expressions can identify these nodes in the XML document based on their type, name, and
values as well as the relationship of a node to other nodes in the documents.
9. The X PATH expressions are a core part of XSLT transformations, which associate the objects with
templates to create a new XML document .
10. Expressions using the X PATH syntax can also be performed directly against the XML DOM.
11. XQUERY uses X PATH expressions syntax to address specific parts of an XML documents.
12. XQL is programming language that can express arbitrary XML to XML data transformation.
XQL Applications
1. Extracting information from database for use in web services.
2. Generating summary reports on data stored in an XML database.
3. Searching textual documents on web for relevant information and compiling the result.
4. Selecting and transformation the XML data to XHTML to be published on the web.
5. Pulling data from databases to be used for the application integration.
Example:
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
<book category="WEB">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
7

lOMoARcPSD|15671295
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
<book category="WEB">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>
UNIT 3 Remaining Topics

HTML DOM:
A Document Object Model is a programming interface for HTML (HyperText Markup
Language) and XML (eXtensible Markup Language) documents. It provides a data representation
comprising all the objects, depicting the structure and content of the document on the web. Every webpage
has its own DOM that represents the page so that programs can alter its structure, look, and content.
In simpler terms, when a browser loads a webpage, it creates a model of that page. This model is the DOM
tree and is filed in the browser’s memory. It provides functionality globally to the document, including how
to obtain the page details and create new elements in the document. Remember, DOM is neither a part of
HTML nor JavaScript; it’s a separate set of rules. All the major browser makers implement it and it
covers two primary sections:
 Creation of the DOM tree
 Manipulation of the DOM tree
We will cover both these areas in this tutorial so you will understand how JavaScript actually works with the
DOM. For now, let’s see what a DOM tree looks like and its different components with the help of a
program.
Program:
<html>
<head>
<title>DOM Model</title>
</head>
<body>
8

lOMoARcPSD|15671295
<h1>DataFlair’s Tutorial</h1>
<p>DOM Tree</p>
<p id = "text">This is a text element in the DOM tree.</p>
</body>
</html>
JavaScript HTML DOM Tree
Difference between Server Side Scripting and Client Side Scripting

Client side scripting :
web browsers execute client side scripting. It is use when browsers has all code. Source code used to
transfer from web server to user’s computer over internet and run directly on browsers. It is also used for
validations and functionality for user events.
It allows for more interactivity. It usually performs several actions without going to user. It cannot be
basically used to connect to databases on web server. These scripts cannot access file system that resides
at web browser. Pages are altered on basis of users choice. It can also used to create “cookies” that store
data on user’s computer.
Server side scripting :
Web servers are used to execute server side scripting. They are basically used to create dynamic pages. It

lOMoARcPSD|15671295
can also access the file system residing at web server. Server-side environment that runs on a scripting
language is a web-server.
Scripts can be written in any of a number of server-side scripting language available. It is used to retrieve
and generate content for dynamic pages. It is used to require to download plugins. In this load times are
generally faster than client-side scripting. When you need to store and retrieve information a database will
be used to contain data. It can use huge resources of server. It reduces client-side computation overhead.
Server sends pages to request of user/client.
Difference between client side scripting and server side scripting :
Client side scripting Server side scripting
Source code is not visible to user because it’s output

Source code is visible to user.
of server side is a HTML page.
It usually depends on browser and it’s In this any server side technology can be use and it does
version. not depend on client.
It runs on user’s computer. It runs on web server.
There are many advantages link with this

The primary advantage is it’s ability to highly customize,
like faster.
response
response times, a more interactive
requirements, access rights based on user.
application.
It does not provide security for data. It provides more security for data.
It is a technique use in web development in It is a technique that uses scripts on web server to produce
which scripts runs on clients browser. a response that is customized for each clients request.
HTML, CSS and javascript are used. PHP, Python, Java, Ruby are used.
10

WT For Bcom 4thnew and 5thold Sem

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WT For Bcom 4thnew and 5thold Sem

Uploaded by

Copyright:

Available Formats

lOMoARcPSD|15671295

WT for Bcom 4th(new) and 5th(old) Sem

Bussiness law (Palamuru University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

 Easy to learn and use it.

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Hyperlink:- (Anchor Tag)

i. Anchor tag <a> is used in html to create hyperlinks.

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

 Write a program to displays images acting as Hyperlink.

Text formatting Tags

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

ii. Un Order List:

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

iii. Definition List:

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

 <dl> is a tag to define in HTML to create definition list.

Frames and Framesets in HTML

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

ii. Vertical Frameset:

Frame1 Frame2 Frame3

Google Facebook Gmail

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

iii. Both Combination of Horizontal and vertical Frameset:

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Eg2:- With Border attributes

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Eg4:- Table level and Cell Level Attribute

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Height and Width:-

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Eg6:- Table tag with Height, Width attribute

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Eg7: - Table tag with rules attribute (Rules=none)

Eg8: - Table tag with rules attribute (Rules=rows)

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Eg9: - Table tag with rules attribute (Rules=cols)

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Eg10: - Table tag with rules attribute (Rules=cols)

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Output for Without cellpadding attribute above the example

Systax :- <table cellspacing=”x”>

Eg12:- Table with cellspacing attribute

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Output for Without cellspacing attribute above the example

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Eg13:- Table with CAPTION Tag

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Colspan and Rowspan:-

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

2. Text Area or Multi Line Input Control:

Downloaded by Pradeep Kumar (gkpradip@gmail.com)

Downloaded by Pradeep Kumar (gkpradip@gmail.com)