Scribd
Upload
151 views42 pages

Web1,2 Units

Web basics satavahana university

Uploaded by

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

Web1,2 Units

Web basics satavahana university

Uploaded by

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

Downloaded From: [Link].

com WEB TECHNOLOGIES

WEB TECHNOLOGIES

UNIT – I
HTML
Introduction to Markup Languages, common tags, headers, text styles, Linking, Text
Formatting, types of Lists, Tables, Frames , Images and anchors.
Layouts: Backgrounds, colors and text, Layout with table, Advanced Layouts: Frames and
Layers.
DYNAMIC HTML: Cascading Style Sheets: Inline styles, CSS with STYLE element,
Conflicting Styles, Linking External Style sheets, Positioning elements, Text flow and box
model.
UNIT – II
DYNAMIC HTML
Object Model and Collections: Object referencing, Collections all and children, Dynamic
styles and positioning, Using the frame collection.
Event Model: onclick, onload, onerror, onmousemove, onmouseover, onmouseout
Filters and Transitions: flipv, fliph,chroma,image masks, image filters, adding shadows to
text, creating gradients with alpa, making text glow, motion with blur, wave filter, drop
shadow and light
Data binding with Tabular Data control: Introduction, simple data binding, moving a record
set, binding to an image and table, sorting table data.
UNIT – III
JavaScript
Introduction, simple programming, Obtaining User Input with prompt Dialogs,
Operators(arithmetic, Decision making, assignment, logical, increment and decrement)
Control Structures - if… else selection statement, while, do… while repetitions statement, for
statement, switch statement, break and continue statements. Functions – program modules in
JavaScript, programmer defined functions, function definition, Random-number generator,
scope rules, global functions, recursion, JavaScript: Arrays.
UNIT – IV
JavaScript
Objects – Math Object, String Object, Date Object, Boolean & Number Object, document
and window Objects. Event Model – onclick, onload, onerror, onmouseover, onmouseout,
onfocus, onblur, onsubmit, onreset, more DHTML events. Filter and Transitions – flipv,
fliph, chroma, masks, invert, gray, xray, shadow to text, alpha, glow,
wave, dropshadow, light, blendTrans, revealTrans.

Prepared By : A Kanaka Raju 1


Downloaded From: [Link] WEB TECHNOLOGIES

UNIT 1
HTML
Features of HTML:
1. HTML is stands for Hyper Text Markup Language
2. It is introduced by Tim berners lee in the year of 1990.
3. It is not a case sensitive language.
4. It is used to create static web pages.
5. It uses predefined tags.
6. It does not display errors.
7. It is used to display the web pages.
8. It is a client side scripting language.
9. It uses tags. Tag is a keyword.
10. It contains both opening and closing of the tags.
11. It is derived from SGML.
12. These files are created by editor like notepad
13. These documents are run by using web browser like internet explorer.
14. It is a browser dependent scripting language.
HTML code can be classified into 3 types HTML CODE Container tags Non container tags
Special entities
1. Container Tags: It will be both tags(opening and closing tags) Ex:
2. Non container tags: It will have only opening tags
Ex: <br>, <hr>
3. Special entities: It will have no tags but start with “&symbol”
Ex: <&lt>, <&gt>
Comments in HTML:
Comments helps to describe the activity of a program. The comments in html can be declared
as follows Syntax:
<!-- It is a comment statement - ->
There should not a space between angular bracket and exclamation mark
This comment begins with <! - - and ended with - - >
Also note one thing that there should not be any - - inside the comment
Structure of HTML program:
<html>
<head>
<title> name of the program</title>
</head>
<body>
actual stuff or text
</body>
</html>
i. <html>…..</html> Tag or HTML section
This tag is used to tell the browser that every thing contained between them is html code for
creating web page. <html> shows starting of html page and </html> shows ending of the html
page.
ii. <head>…..</head> Tag or HEAD section
This tag contains the head of an html document. This tag holds information about the
document. Such as its title. There are rags that can appear only in this section like
<title>,<link>, <Meta> .
<head> shows opening tag and </head> shows closing tag

Prepared By : A Kanaka Raju 2


Downloaded From: [Link] WEB TECHNOLOGIES

Syntax:
<head>
<title> web page</title>
</head>
iii. <body>…..</body> Tag or BODY Section
This tag describes the body section of the HTML structure. This tag contains body of the
html document. The body part of html program will help us to create a look and feel of the
web page
<body> shows opening tag and </body> shows closing tag
Syntax: <body>
Text
</body>
This body tag has some attributes
BACKGROUND :This attribute is used to set a background of a browser like some
image
BGCOLOR: this attribute specifies the color of the browser’s background
BOTTOMMARGIN: it is used to set the bottom margin or empty space at the bottom of
the document in pixels
LEFT MARGIN: it is used to set the left margin or empty space at the left of the
document in pixels
TOP MARGIN: it is used to set the left margin or empty space at the top of the
document in pixels
RIGHT MARGIN: it is used to set the left margin or empty space at the right of the
document in pixels
TEXT: It specifies the color of the text in the document
SCROLL: It specifies weather a vertical scroll bar appears to right of the document, can
be YES or NO
EX:-
<HTML>
<HEAD>
<TITLE> MY WEBPAGE</TITLE>
</HEAD>
<BODY bgcolor=”skyblue” text=”red” leftmargin=”200” rightmargin=”300”
scroll=”YES” >
THIS IS MY FIRST WEBPAGE created using html
</BODY>
</HTML>
Attribute:
1. Attributes provides additional information to the tag.
2. It provides more details about the tag
3. Attributes always write with in opening tag
4. Attributes always followed by “=” sign and attributes value must be written in
inverted commas
5. Attributes have default values

Prepared By : A Kanaka Raju 3


Downloaded From: [Link] WEB TECHNOLOGIES

6. Attributes name and attributes values are not case sensitive


7. Attributes contains name and values pairs
Ex:
<body bgcolor=”orange” text=”blue”>shiv</body>
HEADER TAG:
These tags are used to display text as some header
The heading tag is denoted by h1,h2, h3, h4, h5 and h6
When we use heading tags they automatically appear in new lines
attributes of heading tag:
We can add align attribute the heading styles.
Syntax:
<H1 align=”left/right/center”> text</h1>
Align attribute it is used to display text at left/center/right in a webpage
The value must be double quoted
<HTML>
<HEAD>
<H1 align=”left”> KIMS </H2>
<H2 align=”center”> KIMS </H3>
<H3 align=”right”> KIMS </H1>
<H4> KIMS </H4>
<H5> KIMS </H5>
<H6> KIMS </H6>
</HEAD>
</HTML>
Output:
KIMS
KIMS
KIMS
KIMS
KIMS
KIMS
Text Formatting:
These tags are used to apply special appearance to the text
It is also called physical tags
To change the appearance of text is called text formatting
These tags are available in so many forms
Bold <B></B> To make text Bold Text
Italic <I></I> To make text Italic Text
Underline <U></U> To make text Text
underline
Strikeout <STRIKE></STRIKE> To strike out the text Text
Strikeout <S></S> It is similar to bold Text
Subscript <SUB></SUB> To make text super AX2+BX+C=0 Here

Prepared By : A Kanaka Raju 4


Downloaded From: [Link] WEB TECHNOLOGIES

2
script is superscript
Superscript <SUP></SUP> To make text sub H20 Here 2 is sub
script script
Typewriter <TT></TT> displays text in a
monospaced font
Center <CENTER></CENTER> (for both text and
images)
Font Size <FONT SIZE=?></FONT> (ranges from 1-7)
Change Font <FONT SIZE="+|-
Size ?"></FONT>
Base Font Size <BASEFONT SIZE=?> (from 1-7; default is
3)
Font Color <FONT
COLOR="#$$$$$$"></FONT>
Select Font <FONT
FACE="***"></FONT>
Ex:
<html>
<head><title>formatting</title></head>
<body>
This is normal text
<b>This is normal text</b><br>
<i>This is normal text</i><br>
<u>This is normal text</u><br>
<tt>This is normal text</tt><br>
<strong>This is normal text</strong><br>
<strike>This is normal text</strike><br>
ax<sup>2</sup>+bx+c=0<br>
c<sub>6</sub>h<sub>6</sub>o<sub>12</sub>
</body>
</html>
Font Tag:
This tag is used to change the font size, name, color
It contains both opening and closing tag
<font></font>
It contains several attributes such as color, size, face
Syntax:
<Font face=”value” size=”value” color=”color name”> text to be formatted with Specified
properties</font>
Color Attribute: It is used to specify the color name or hexadecimal code
Syntax:
Color=”color”

Prepared By : A Kanaka Raju 5


Downloaded From: [Link] WEB TECHNOLOGIES

Ex: color=”red”
Size Attribute: It is used to specify the size of the text
It contains 1 to 7 size values
1 is smallest and standards is 3
Syntax:
size=”value”
Ex: size=”2”
Face Attribute: It is used to specify the font face
Ex: arial, times new roman, monotype corsiva, book man old style etc.,
Syntax:
Font face=”face name”
Ex: font face=”arial”
Example program:
<html>
<head><title>formatting</title></head>
<body>
<font face="arial" size="4" color="red">
This is normal text
</font>
</body>
</html>
Lists:
These are used it place lists in web pages following table shows how list will be placed in
web page with all styles
HTML Supports 3 types of lists
1. Ordered list
2. Un ordered list
3. Data Definition List
Lists are of 3 types:
1. Ordered list
It is used to place list with serial numbers as
1,2,3,4…..
A,B,C,D,E…
a,b,c,d,e…..
i,ii,iii,iv,v……
I,II,III,IV,V……
Syntax:
<ol type=”A/a/1/i/I”>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
<li>list item4</li>
- -- --- - -- -- - -
- -- --- - -- -- - -
- -- --- - -- -- - -

Prepared By : A Kanaka Raju 6


Downloaded From: [Link] WEB TECHNOLOGIES

- -- --- - -- -- - -
<li>list item n</li>
</ol>
2. Unordered list
We can give bullets to list elements as follows

oCircle
 Disc
 Square

<ul type=”disc/circle/square”>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
<li>list item4</li>
- -- --- - -- -- - -
- -- --- - -- -- - -
- -- --- - -- -- - -
- -- --- - -- -- - -
<li>list item n</li>
</ul>
3. definition list:
It is used to display a list in defination order
The tag is used for definition list is <dl>
It contain <dd> <dt>
<dd>Data definition
<dt> data term
Syntax:
<dl>
<dt> data term1</dt>
<dd>Data definition</dd>
<dt> data term2</dt>
<dd>Data definition</dd>
<dt> data term3</dt>
<dd>Data definition</dd>
<dt> data term4</dt>
<dd>Data definition</dd>
</dl>
Data item1: Definition
Data item2: Definition
Data item3: Definition
Data item4: Definition
Table Tag:
1. Table is a intersection of rows and columns
2. Rows indicates record and columns indicate fields

Prepared By : A Kanaka Raju 7


Downloaded From: [Link] WEB TECHNOLOGIES

3. Using table tag we can create the table It contain opening tag <table>. And sub tags
table row <tr> ,table data <td>,table head <th>
4. The sub tags also contain closing tags.
Table Row:
It is used to define the table row
It contains both opening & closing tags <tr, </tr>
Syntax: <tr> data</tr>
Table data:
It is used to define table data i.e., cell data
It contains opening & closing tags <td>, </td>
Syntax: <td> item </td>
Table head:
It is used to define header row
It contains opening tag and closing tags <th> </th>
Syntax: <th> head name</th>
Ex:
SNO SNAME GROUP
1 Anas BCOM
2 Raza BSC
Program:
<html>
<body>
<table>
<tr>
<th>sno.</th>
<th>Sname.</th>
<th>Group</th>
</tr>
<tr>
<td>1.</td>
<td>Anas.</td>
<td>BCOM</td>
</tr>
<tr>
<td>2.</td>
<td>Raza.</td>
<td>BSc</td>
</tr>
</body>
</html>
Table Border:
It is used to specify the width of the borders around a table border
Formatting Table: Each cell in table content may be horizontally
and vertically
The align text in cells we are using align, valign

Prepared By : A Kanaka Raju 8


Downloaded From: [Link] WEB TECHNOLOGIES

1. Align: It is used to align the text horizontally in the cell


The attributes are left/right/center/justify
<td align=”value”>text</td>
Program:
<html>
<body>
<table>
<tr> <td align=”center”>Sno</td>
<td align=”center”>Sname</td>
<td>Group</td>
</tr>
<tr> <td align=”left”>1</td>
<td align=”right”>Anas</td>
<td>BCOM</td> </tr>
<tr> <td align=”left”>2</td>
<td align=”right”>Raza</td>
<td>BSc</td> </tr>
</body>
</html>
2. Valign: It is used to align the text vertically in the cell
The attributes are baseline/middle/bottem
<td valign=”value”>text</td>
Program:
<html>
<body>
<table>
<tr> <td align=”center”>sno.</td>
<td align=”center”>Sname.</td>
<td>Group</td>
</tr>
<tr> <td align=”left”>1.</td>
<td align=”right”>Anas.</td>
<td>BCOM</td> </tr>
<tr> <td align=”left”>2.</td>
<td align=”right”>Raza.</td>
<td>BSc</td> </tr>
</body>
</html>
Hyperlinks:
A link is created with i8n a webpage or web site, which is used to navigate from one page to
another or in the same page or one website.
A link create a using hypertext is known as “hyperlink”
Hyper Text:
Any text displayed with in a webpage is called hypertext
Any hyperlink will have two places

Prepared By : A Kanaka Raju 9


Downloaded From: [Link] WEB TECHNOLOGIES

1. Source place: From where we create own hyperlink


2. target place: When click on source place link which [place it should navigate
To create a hyperlink we have to use Anchor tag
<a> …….</a>
Types of hyperlink:
1. Internal link
2. External link
1. Internal link: If the hyperlink is created with in a single webpage. That is source and
target present with in the same webpage is called internal hyperlink.
For internal hyperlink we need to write anchor tag
Syntax: <a href=”URL”> display text</a>
Link in the same web page:
We can also make an link in the same web page, to navigate in the document form one
point to another, which can be done as follows
Ex:
<html>
<head>
</head>
<body>
<a href="#html">
HTML</a><br>
<a href="#vb">
VBScript</a><br>
<a href="#dhtml">
DHTML</a><br>
<a href="#asp">
ASP</a><br>
<a href="#xml">
XML</a>><br>
<p>
<H1><a id="html">HTML</a></h1>
Hyper text mark up Language
</p>
<br>
<p>
<H1><a id="vbs">vbscript</a></h1>
Visual Basic Scripting Language
</p><br>
<p>
<H1><a id="dhtml">dhtml</a></h1>
Dynamic Hyper text mark up Language
</p><br>
<p>
<H1><a id="asp">asp</a></h1>
Active server pages

Prepared By : A Kanaka Raju 10


Downloaded From: [Link] WEB TECHNOLOGIES

</p><br>
<p>
<H1><a id="xml">xml</a></h1>
Extensible Markup Language (XML)
</p>
</body>
</html>
2. External link:
A link created between different pages of a website or between different websites.
For external hyperlink we need not to write code for target place
Syntax:
<a Href=”URL”>Display Text”</a>
Ex:
Prepare a document
<html>
<body>
<u> Courses</u>
<a href=”[Link]”> commerce</a>
<a href=”[Link]”> science</a>
</body>
</html>
And save the above file with [Link]
Prepare second file
<html>
<body>
<u> Courses</u>
<ol>
<li>[Link] CA</li>
<li>[Link] GEN</li>
<li>[Link] Taxation</li>
<li>[Link] Insurance</li>
</ol>
<a href=”[Link]”> main</a>
</body>
</html>
And save the above file with [Link]
Prepare third file
<html>
<body>
<u> Courses</u>
<ol>
<li>[Link] MPC</li>
<li>[Link] MPCs</li>
<li>[Link] MStCs</li>
<li>[Link] MCCs</li>

Prepared By : A Kanaka Raju 11


Downloaded From: [Link] WEB TECHNOLOGIES

<li>[Link] MPCA</li>
</ol>
<a href=”[Link]”> main</a>
</body>
</html>
save above file with [Link]
Frames:
3. A web page can be divided into parts, called frames
4. A frame supports multiple documents or websites or web pages can be embedded in a
single webpage
5. Html frames allows us to present documents in multiple views
6. Using, multiple views we can keep certain information visible and at the same time
other views are scrolled or replaced
7. For example with in the same window one frame can display a company information,
a second frame can be a navigation menu, and a third frame may display selected
documents
8. Various frames can be set in one browser window
9. Frames can be divided in 3 forms
Horizontal frames Vertical frames Horizontal & vertical frames

We use <frameset> tag to create frames


Syntax: <frameset>
<frame name=”name” src=” file path”>
</frameset>
PREPARE A FILE
<html>
<head>
</head>
<body background="D:\[Link]">
</body>
</html>
Save the above file with [Link]
PREPARE A FILE
<html>
<body>
Basic elements <BR>
Structural definition<BR>
Presentation formatting<BR>
Links and graphics <BR>
Dividers <BR>
Lists <BR>
Backgrounds and colors <BR>
Special characters <BR>

Prepared By : A Kanaka Raju 12


Downloaded From: [Link] WEB TECHNOLOGIES

Forms <BR>
Tables <BR>
Frames <BR>
</body></html>
Save the above file with [Link]
PREPARE A FILE
<html><body>
<H1>
EXPLANATION OF THE OF THE TOPIC SELECTED IS:
</body></html>
Save the above file with [Link]
Now we use [Link], [Link] and [Link] in frames
Horizontal frames
A web page can be divided into rows
<html>
<frameset rows=”30%70%”>
<frame name=”a” src=”file path”>
<frame name=”b” src=”file path”>
</frameset>
</html>
EX:
<html>
<frameset rows="40%,60%">
<frame name="a" src=
" C:\Documents and Settings\
Anas Raza\Desktop\[Link]">
<frame name="b" src=
"C:\Documents and Settings\Anas Raza\Desktop\[Link]">
</frameset>
</html>
Vertical frames
A web page can be divided into cols
<html>
<frameset cols=”30%70%”>
<frame name=”a” src=”file path”>
<frame name=”b” src=”file path”>
</frameset>
</html>
EX:
<html>
<frameset cols="40%,60%">
<frame name="a" src="C:\Documents and Settings
\Anas Raza\Desktop\[Link]">
<frame name="b" src="C:\Documents and Settings
\Anas Raza\Desktop\[Link]">

Prepared By : A Kanaka Raju 13


Downloaded From: [Link] WEB TECHNOLOGIES

</frameset>
</html>
Horizontal & Vertical frames
A web page can be divided into cols
<html>
<frameset rows=”20%80%”>
<frame name=”a” src=”file path”>
<frameset cols=”30%70%”>
<frame name=”b” src=”file path”>
<frame name=”c” src=”file path”>
</frameset>
</frameset>
</html>
Ex:
<html>
<frameset rows="20%,80%">
<frame name="a" src=
"C:\Documents and Settings\
Anas Raza\Desktop\[Link]">
<frameset cols="30%,70%">
<frame name="b" src="C:\Documents and Settings\AnasRaza\Desktop\[Link]">
<frame name="c" src="C:\Documents and Settings\Anas Raza\Desktop\[Link]">
</frameset>
</frameset>
</html>
Image tag:
1. We can display image in the webpage
2. The tag is <img> tag
3. It contain src, align, width, height attributes
Src (Source) : To display an image in a web page we need to use the src attribute, The value
of the source attribute is the url of an image.
Align: It is used to align the image on a web page, The values are top, middle, bottom, left
and right
Width & height: It is used to specify the width
and height of the image, The value specified can
represent the size in pixels or percentage of the
original width and height.
Syntax:
<img src=”URL” align=”value”
width=”value” height=”value”>
Ex:
<img src=”[Link]” align=”middle”
width=”300” height=”200”>
Program:
<html>

Prepared By : A Kanaka Raju 14


Downloaded From: [Link] WEB TECHNOLOGIES

<head>
</head>
<body>
<img src="D:\[Link]" width="200" height="300"></a>
</body>
</html>
webpage background is white in color. You may not like it, but no worries. HTML provides
you following two good ways to decorate your webpage background.
 HTML Background with Colors
 HTML Background with Images
Now let's see both the approaches one by one using appropriate examples.
Html Background with Colors:
The bgcolor attribute is used to control the background of an HTML element, specifically
page body and table backgrounds.
Note − The bgcolor attribute deprecated in HTML5. Do not use this attribute.
Following is the syntax to use bgcolor attribute with any HTML tag.
<tagname bgcolor = "color_value"...>
This color_value can be given in any of the following formats −
<table bgcolor = "lime" >
<table bgcolor = "#f1f1f1" >
<table bgcolor = "rgb(0,0,120)" >
Example
Here are the examples to set background of an HTML tag −
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>
<table bgcolor = "yellow" width = "100%">
<tr><td>This background is yellow</td></tr>
</table>
<table bgcolor = "#6666FF" width = "100%">
<tr><td>This background is sky blue</td></tr>
</table>
<table bgcolor = "rgb(255,0,255)" width = "100%">
<tr><td>This background is green</td></tr>
</table>
</body>
</html>
This will produce the following result −

Prepared By : A Kanaka Raju 15


Downloaded From: [Link] WEB TECHNOLOGIES

HTML Layout - Using Tables


The simplest and most popular way of creating layouts is using HTML <table> tag. These
tables are arranged in columns and rows, so you can utilize these rows and columns in
whatever way you like.
Example
For example, the following HTML layout example is achieved using a table with 3 rows and
2 columns but the header and footer column spans both columns using the colspan attribute −
<html>
<head><title>HTML Layout using Tables</title>/head>
<body>
<table width = "100%" border = "0">
<tr><td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1></td>
</tr>
<tr valign = "top"><td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br/> HTML<br /> PHP<br /> PERL.../td>
<td bgcolor = "#eee" width = "100" height = "200">
Technical and Managerial Tutorials</td>
</tr>
<tr><td colspan = "2" bgcolor = "#b5dcb3"><center>
Copyright © 2007 [Link]</center></td>
</tr></table>
</body></html>
This will produce the following result −

Advanced layouts: using layers


The HTML <layer> tag is used to position and animate (through scripting) elements in a
page. A layer can be thought of as a separate document that resides on top of the main one,
all existing within one window.
This tag has support in Netscape 4 and higher versions of it.
Example
This example creates three overlapping layers. The back one is red, the middle one is blue,
and the front one is green.
<html>
<head>
<title>HTML layer Tag</title>

Prepared By : A Kanaka Raju 16


Downloaded From: [Link] WEB TECHNOLOGIES

</head>
<body>
<layer id = "layer1" top = "250" left = "50" width = "200"
height = "200" bgcolor = "red">
<p>layer 1</p>
</layer>
<layer id = "layer2" top = "350" left = "150" width = "200"
height = "200" bgcolor = "blue">
<p>layer 2</p>
</layer>
<layer id = "layer3" top = "450" left = "250" width = "200"
height = "200" bgcolor = "green">
<p>layer 3</p>
</layer>
</body>
</html>

Prepared By : A Kanaka Raju 17


Downloaded From: [Link] WEB TECHNOLOGIES

UNIT II
Dynamic HTML
Features of DHTML:
 DHTML is stands for Dynamic Hypertext Markup Language.
 It is not a scripting language.
 It is combination of different technologies like CSS, DOM and java sript.
 It is used for creating dynamic webpages.
Javascript: It is a Client-side Scripting language. Javascript is supported by most of the browser,
also have cookies collection to determine the user needs.
CSS: The abbrevation of CSS is Cascading Style Sheet. It helps in the styling of the web pages
and helps in designing of the pages. The CSS rules for DHTML will be modified at different
levels using JS with event handlers which adds a significant amount of dynamism with very little
code.
DOM: It is known as a dynamic Object Model which act as the weakest links in it. The only
defect in it is that most of the browser does not support DOM. It is a way to manipulate the static
contents.
DHTML Features:
DOM:
 It stands for document object model
 DHTML provides comprehensive object model for HTML
 This model exposes all page elements is objects
 The objects can easily manipulated
 DHTML also provides full support from keyboard & mouse events on all page
elements.
Dynamic Content:
 Text or graphics can be added, deleted, modified on the page
 Ex: a webpage can be displayed on updated head line with out refreshing the page.
 The text surrounding the head line will reflow automatically
Dynamic Cascading style sheet:
 Any CSS attribute including color and font can be updated without a serve round
trip
 Text can change color and size when a mouse pointer passes over it
 Multimedia filters and transmissions effects can be applied to html elements
simply by adding the filter css attribute.
Absolute positioning:
 With DHTML and CSS positioning coordinates for existing page content can be
updated at any time to create animated effects without reloading thepage.
Data Binding:
 DHTML Provides data driven applications for front end which can be built to
present, manipulate, and update the data on the client without number of round
trips to the server.

Prepared By : A Kanaka Raju 18


Downloaded From: [Link] WEB TECHNOLOGIES

Cascading Style Sheets(CSS):


Cascading style sheets helps us to specify presentation of elements on the webpage.
The spacing between the text and margins is allowed using CSS.
Using CSS we can determine the style and layout of the web page
It represents the W3 Consortium.
Style Sheet effort to improve on the tag & attribute based style of formatting.
For above reason most of Style Attributes & Style tags have been reproduced.
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.


The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly
braces.
In the following example all <p> elements will be center-aligned, with a red text color:
The element Selector
The element selector selects elements based on the element name.
You can select all <p> elements on a page like this (in this case, all <p> elements will be center-
aligned, with a red text color):
Example
p{
text-align: center;
color: red;
}
The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one
unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
The style rule below will be applied to the HTML element with id="para1":
Example
#para1 {
text-align: center;
color: red;
}
The class Selector
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of the
class.
In the example below, all HTML elements with class="center" will be red and center-aligned:
Prepared By : A Kanaka Raju 19
Downloaded From: [Link] WEB TECHNOLOGIES

Example
.center {
text-align: center;
color: red;
}
Grouping Selectors
If you have elements with the same style definitions, like this:
h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
In the example below we have grouped the selectors from the code above:
Example
h1, h2, p {
text-align: center;
color: red;
}
Various Style sheets are
1) Inline 2)Embedded 3)External 4)Imported
1. Inline Style Sheets:
 These are designed by using the “Style” attribute to insert a style role directly into
a HTML Tag.
 Styles are used to define how the HTML elements can be displayed on the
webpage.
 The styles are normally stored in style sheets
Syntax: Selector(Property:Value)
For Example:
P
{
Font-family:Arial;
Color:Red;
}
Here Selector P is used
For which the properties are font_famiy and color
Prepared By : A Kanaka Raju 20
Downloaded From: [Link] WEB TECHNOLOGIES

The properties are assigned with the values are Arial,Red.


If we want to define more than one property then we have to separate these properties with semi
colon(;).
Example: for inline style sheet.
<html>.
<head><title>My DHTMLpage with CSS <tittle></head>
<body>
<p>This is a simple text</p>
<p style=”font_size:30pt; font_family:script”> this text is different</p>
<p style=”font_size:40pt;color:#ff0000”> this text is in color</p>
</body>
</html>
These are used when the style is needed only with in the document.
[Link] style sheets:
 In embedded style sheets we write all desired selectors along with properties and
values in the head section
 In the body section newly defined selector tags are used with the actual content
 The following DHTML script we have defined h1,h2,h3 and P selectors
 For each selectors different property and values set.
 The most important thing is writing the embedded style sheets is that we should
mention the style type.
Style type=”text/css” in head section
Using above style type browser knows the program is making use of Cascading style sheet
Example for Embedded style sheet:
<html>
<head>
<title>Embedded style sheet</title>
</head>
<style type =”text/css”>
H1
{
Font_family:arial
}
H2
{
Font_family:Arial;
Color:Red;
Left:20px
}
H3
{
font_family:arial
color:blue
}
P
{
Prepared By : A Kanaka Raju 21
Downloaded From: [Link] WEB TECHNOLOGIES

Font_size:14pt;
Foont_family:verdana
}
Special
{
Color:green
}
</ style>
</head>
<body>
<h1><center> this page is created using ESS</center></h1>
<h2> this line is aligned left and red in color</h2>
<p>
The embedded style sheet
This paragraph is written in verdana
</p>
<h3> this is a blue<a href =”[Link]”> colored</a>
</h3>
</body>
</html>
3. External style sheet:
 Sometimes we need to apply particular style to more than one webpage in such
cases we use external style sheets.
 The idea of this style sheet is that the desired style is stored in one .css file
 The css file name has to be mentioned in our web pages.
 Then the styles defined in .css file will be applied to all these web pages
Example for Embedded style sheet:
<html>
<head>
<link rel=”stylesheet” type=”text/css”href=”d:\dhtml_examples\[Link]”>
</head><body>
<h1 class=”special”> this page is created using ESS</h1>
<h2>this line is aligned left and red colored</h2>
<p> the ess is the compact representation of the cascading style sheets
This papragraph is written in monotype corsiva font with font size of 14
</p>
</body>
</html>
<!—the file name [Link] can be opened in notepad
h1
{
Font_family:arial
}
h2
{
Font_family:timesnew roman;
Prepared By : A Kanaka Raju 22
Downloaded From: [Link] WEB TECHNOLOGIES

Color:red;
Left:20px;
}
P
{
Font_size:14pt;
Font_family:monotype corsiva
}
Special
{
Color: green
}
<link> tag:
We want to link the external style sheet then we have to use link tag which is to be written in
head section
Link tells the browser some file linked to the webpage
Rel= style sheet tells the browser that this linked thing a stylesheet
Href=” “ denotesthe path name of style sheet file
Type=”text/css”  tells the browser that it is reading is text which is affected by the cascading
stylesheet.
Advantage:
If we want to change any style then we have to modify only one file
Note: In our main program we have to simpy used the tag elements and style for these tag
elements are defined in [Link] file. H1,H2,P body, a, link
4. Imported style sheets:
 It is use the @ import notation
 Using import notation to link the document to style sheet
 On @ import role links a document to style sheet
 It contain the URL which is the style sheet location
 You can import any of external style sheet using @ import notation by inserting
multiple @ import declaration and each with the URL
 Importing multiple style sheet can result in a filter of style sheet.
Conflicting Styles:
There are three possible sources for styles sheets – browser defaults, preset user styles and
author styles (eg in the STYLE section of a document). Author styles have a greater
precedence than preset user styles. Any conflicts will be resolved in favor of the author
styles.
One {text-decoration: none}
applies the text-decoration property to all A elements whose CLASS attribute is set to nodec.
The default browser rendering of an A element is to underline, but here is set to none. The
text-decoration property applies decorations to text within an element. Other allowed value is
overline, line-through and blink. The .nodec appended to A is an extension of class styles –
this style will apply only to A elements that specify nodec as their class.
A: hover {text-decoratoin: underline;
color: red;
backgraound-color: #CCFFCC}
Prepared By : A Kanaka Raju 23
Downloaded From: [Link] WEB TECHNOLOGIES

specify a style for hover, which is a pseudo-class. Pseudo-classes give the author access to
content not specifically declared in the document. The hover pseudo-class is dynamically
activated when the user moves the mouse cursor over an A element.
LI EM {color: red;
Font-weight: bold}
Declare a style for all EM elements that are children of LI elements. The declaration syntax
for applying rules to multiple elements is similar.
UL {margin-left: 75px}
UL {text-decoration: underline;
Margin-left: 15px}
Specify that all nested lists (UL elements that are children of UL elements) will be underlined
and have a left-hand margin of 15 pixels. A pixel is relative-length measurement – it varies in
size based on screen resolution. Other relative lengths are em (the size of the font), ex (the so-
called “x-height” of the font, which is usually set to the height of a lowercase x) and
percentages (eg margin-left: 10%). To set an element to display text at 150% of its normal
size, the syntax is font-size: 1.5em. The other units of measurement available in CSS are
absolute-length measurements. These are in (inches), cm (centimeters), mm (millimeters), pt
(points – 1pt = 1/72 in) and pc (picas – 1pc = 12pt).

Prepared By : A Kanaka Raju 24


Downloaded From: [Link] WEB TECHNOLOGIES

Example
<HTML>
<HEAD>
<TITLE>Conflicting Styles</TITLE>
<STYLE TYPE = "text/css">
One {text-decoration: none}
Two {text-decoratoin: underline;
color: red;
background-color:red}
LI EM {color: red;
Font-weight: bold}
UL {margin-left: 75px}
UL UL {text-decoration: underline;

Margin-left: 15px}
</STYLE>
</HEAD>
<BODY>
<H1>Dynamic HTML - <EM>Cascading Style Sheets</EM></H1>
<UL>
<LI>Lesson 01: Introduction</LI>
<LI>Lesson 02: Inline Styles</LI>
<LI>Lesson 03: Style Sheets
<UL>
<LI><EM>Example 01</EM></LI>
<LI>Example 02</LI>
<LI>Example 03</LI>
</UL></LI>
<LI>Lesson 04: Conflicting Styles</LI>
<LI>Lesson 05: Linking External Style Sheets </LI>
<P><A CLASS = "nodec" HREF = "[Link]">Go to the
Introduction</A></P>
</BODY>
</HTML>

Text Flow and Box Model


A browser normally places text and element son screen in the order they are in the HTML
file. However, as we saw with absolute positioning, it is possible to remove elements from
the normal flow of text. Floating allows moving an element to one side of the screen –
other content in the document will then flow around the floated element. In addition, each
block-level element has a box draw around it, known as the box model – the properties of
this box are easily adjusted.
<DIV STYLE = “text-align: center”>

shows that text inside an element can be aligned by setting the text-align property, whose
Prepared By : A Kanaka Raju 25
Downloaded From: [Link] WEB TECHNOLOGIES

possible values are left, center, right and justify. In addition to text, whole elements can be
floated to the left or right of a document. This means that any nearby text will wrap
around the floated element.
<DIV STYLE = “float: right; margin: .5em>
shows that text inside the element float to the right side of the screen. The second
property, margin determines the distance between the edge of the element and any text
outside the element. When elements are rendered on the screen using the box model, the
content of each element is surrounded by padding, a border and margins. Margins for
individual sides of the element can be specified by using margin-top, margin-right, margin-
left and margin-bottom.

<DIV STYLE = “float: right; padding: .5em”


This padding is the distance between the content inside an element and the edge of the
element. Like the margin, the padding can be set for each side of the box with padding-
top, padding-right, padding-left and padding-bottom.
<SPAN STYLE = “clear: right”>
shows that can be interrupt the flow of text around a floated element by setting the clear
property to the same direction the element is floated – right or left. Setting the clear
property to all interrupts the flow on both sides of the document. Note that the box model
only applies to block-level elements such as DIV, P and H1 – the box model does not
apply to inline-level elements such as EM, STRONG and SPAN.
Another property included around every block-level element on screen is the border. The
border lies between the padding space and the margin space and have numerous properties
to adjust its appearance.
Example

<HTML>
<HEAD>
<TITLE>Flowing Text Around Floating Element</TITLE>
<STYLE TYPE = "text/css">
DIV {background-color: #FFCCFF;
Margin-bottom: .5em;
Font-size: 1.5em;
Width: 50%}
</STYLE>
</HEAD>
<BODY>
<DIV STYLE = "text-align: center">Centered text</DIV>
<DIV STYLE = "text-align: right">Right-aligned text</DIV>
<DIV STYLE = "float: right; margin: .5em">This is some floated text, floated
text, floated text.</DIV>

Prepared By : A Kanaka Raju 26


Downloaded From: [Link] WEB TECHNOLOGIES

<P>
Here is some floated text, floated text, floated text.
Here is some floated text, floated text, floated text.
Here is some floated text, floated text, floated text.
Here is some floated text, floated text, floated text.
Here is some floated text, floated text, floated text.
Here is some floated text, floated text, floated text.
Here is some floated text, floated text, floated text.
Here is some floated text, floated text, floated text.
</P>
<P><DIV STYLE = "float: right; padding: .5em"> Here is some floated text,
floated text, floated text.</DIV>
Here is some floated text, floated text, floated text.
Here is some floated text, floated text, floated text.
Here is some floated text, floated text, floated text.
<SPAN STYLE = "clear: right"> Here is some floated text, floated text,
floated text.
</SPAN></P>
</BODY>
</HTML>

Document object Model


It is a platform add language natural interface. That permits to access & update the context,
structure and style of a document.
The DOM includes a model for a how a standard set of objects representing HTML
Documenting, the HTML documents are combined an interface for accessing and manipulating
them
The DOM expresses the structure of html document
It describes the doc structure in terms of
1. The type of tags on the page
2. the no of tags on then page
3. the order of these tags on the page
4. the properties of these tags
5. the presentation nature of elements
6. DOM creates an object for each element on the pages
7. these objects have child objects and properties & every child objects have child objects
and properties
8. these makes a hierarchy of object as displayed

Windows

Location frames Document Event History

anchor
Prepared By : A Kanaka Raju Filters all plugins applet 27
Downloaded From: [Link] WEB TECHNOLOGIES

 The window object is the top most object in the Hierarchy


 The document is the child object of window object
 It represents the page loaded in the browser window
 A part of object model also contains collections
 A collection is an array
 An array holding one or more objects
 These all collection on the doc. Object represents all the elements in the doc. Hierarchy.

Dynamic HTML: Object Model and Collections

 The object model gives access to all elements of a Web page, whose properties and
attributes can thus be retrieved or modified by scripting.
 The value of the id attribute of an element becomes the name of the object representing
that element.
 The various HTML attributes of the element become properties of this object (which can
be modified).
 For example, the value of the innerText property of a p element is the text within that
element.
 So, if we have a P element with id pText, we can dynamically change the rendering of
this element with, e.g., [Link]=“Good bye!”;
 This is dynamic content. In the following example, the function (not the window method)
alert is used to pop up an alert box.
Example:
<html>
<head>
<title>object model</title>
<script type = "text/javascript"> function start()
{
alert( [Link] ); [Link] = "Good bye!";
}
</script>
</head>
<body onload = "start()">
<p id = "pText">hello!</p>
</body>
</html>
Prepared By : A Kanaka Raju 28
Downloaded From: [Link] WEB TECHNOLOGIES

When the page is loaded, the following appears both in the window and in an alert box:
Hello!
After the alert box is dismissed, the following appears in the window:
Good bye!
Collections
A collection is an array of related objects on a page.
The all collection of an element (syntactically a property) is a collection of all the elements
in it in order of appearance.
This gives us reference even to elements that lack ID attributes.
Like all collections, it has a length property.
For example,
[Link][ i ]
references the ith element in the document.
The following are needed for the next example.
The innerHTML property of a p element is like the innerText property but may contain
HTML formatting.
The tagName property of an element is the name of the HTML element.
Example:
<html>
<!-- Using the all collection -->
<head>
<title>Object Model</title>
<script type = "text/javascript"> var elements = "";
function start()
{
for ( var loop = 0; loop < [Link] ; ++loop )
elements += "<BR>" +[Link][ loop ].tagName; [Link] += elements;
}
</script>
</head>
<body onload = "start()">
<p id = "pText">Elements on this Web page:</p>
</body>
</html>
Output:
Elements on this Web page:
HTML
HEAD
TITLE
!
SCRIPT
BODY
P
Collection all and children:
 Note that the tagName property of a comment is !.

Prepared By : A Kanaka Raju 29


Downloaded From: [Link] WEB TECHNOLOGIES

 The children collection for an object is like the all collection but contains only the
next level down in the hierarchy.
 For example, an BODY element has a p, h3 and INPUT child.
 In the following example, function f1( ) does a object hierarchy rooted at object.
 The body tag is<body bgcolor="red" id="x">
 When the page is loaded, this calls child, passing it the second object in the hierarchy.
 (The first element is the comment at the top of the file.)
 When control returns from the call, the string in global variable elements (containing
the hierarchical description of the objects) is appended to the value of the
[Link](i).tagName.
Example:
<!-- The children collection -->
<html>
<head>
<title>children collection</title>
<script language="JavaScript">
function f1()
{
var m = [Link];
for (i=0; i<[Link]; i++)
[Link]([Link](i).tagName+"<br>");
}
</script>
</head>
<body bgcolor="red" id="x">
<p>hello</p>
<h3>kims</h3>
<input type="button" value="the body element childrens are:"
onclick="f1();">
</body>
</html>
Dynamic Styles and Positioning:
We can change an element’s style dynamically.
Most HTML elements have a style object as a property.
The names of the properties of this object used in JavaScript are generally their
HTML names modified to avoid the “-“ (seen as subtraction in JavaScript) – e.g.,
HTML JavaScript
background-color backgroundColor
border-width borderWidth
font-family fontFamily
We can make assignments to these properties, dynamically changing the element’s
rendering – e.g.,
[Link]=16;
Suppose an element’s CSS position property is declared to be either absolute or
relative.

Prepared By : A Kanaka Raju 30


Downloaded From: [Link] WEB TECHNOLOGIES

Then we can move it by manipulating any of the top, left, right, or bottom CSS
properties of its style object.
– This is dynamic positioning.
Example
Suppose in the body we have
<p id = "pText1"
style = "position: absolute; top: 35"> XXX</p>
and in the script we have
[Link] = 100;
Then the rendering XXX of the pText1 element will be shifted right 100 pixels.
We can also change the class attribute of an element by assigning the name of a class
we have defined to the element’s className property.
Example
Suppose in the body we have
<p id = "pText2">CCC</p>
in the style sheet we have defined
.bigText { font-size: 2em }
and in the script we have
[Link] = "bigText";
Then the rendering of XXX will be twice as large as the surrounding text.
Example:
<html>
<head>
<title>Dynamic Styles</title>
<style type = "text/css">
.bigText { font-size: 2em }
</style>
<script type = "text/javascript"> function start()
{
alert( "Go!" );
[Link] = 16;
[Link] = 100;
[Link] = "bigText";
}
</script>
</head>
<body onload = "start()">
<p id = "pText1"
STYLE = "position: absolute; top: 35"> XXX</p>
<p id = "pText2">CCC</p>
</body>
</html>
The initial rendering is:

Prepared By : A Kanaka Raju 31


Downloaded From: [Link] WEB TECHNOLOGIES

After the alert dialog box is dismissed, the rendering is:

To get perceptible dynamic effects, we need some way to control when element attributes
and properties are changed.
The setInterval method of the window object, used as
[Link]( “function_name()”, msec),
invokes function function_name every msecs milliseconds.
Method setTimeout has the same parameters, but it waits msecs milliseconds before
invoking function_name only once.
Both setInterval and setTimeout return values, which can be assigned to variables.
Method clearInterval takes the value returned by setInterval and terminates the timed
function’s executions.
Method clearTimeout takes the value returned by setTimeout and stops the timer before it
fires (if it hasn’t already).
Example
timer = [Link]( “f()”, 1000);
…
[Link]( timer );
Example
<html>
<head>
<title>Dynamic Positioning</title>
<script language = "javascript"> var speed = 5;
var count = 10;
var direction = 1;
var firstLine = "Text growing"; var fontStyle =
[ "serif", "sans-serif", "monospace" ]; var fontStylecount = 0;
function start()
{
[Link]( "run()", 100 );
}
function run()
{
count += speed;
if ( ( count % 200 ) == 0 ) { speed *= -1;
direction = !direction;
[Link] =( speed < 0 ) ? "red" : "blue" ;
firstLine =( speed < 0 ) ? "Text shrinking" :"Text growing";
[Link] =fontStyle[ ++fontStylecount % 3 ];
}
Prepared By : A Kanaka Raju 32
Downloaded From: [Link] WEB TECHNOLOGIES

[Link] = count / 3;
[Link] = count;
[Link] = firstLine +"<BR> Font size: " +count + "px";
}
</script>
</head>
<body onload = "start()">
<p id = "pText"
STYLE = "position: absolute; left: 0;font-family: serif; color: blue">
Welcome!</p>
</body>
</html>
Cross-Frame Referencing
With frame sets, we have the problem of referencing elements that are on different pages.
In a page loaded into a frame, parent references the parent page (containing a frame
element with the current page’s URL as the value of its src attribute).
Then [Link] is the collection of frames in the parent of the current page.
We can reference any page that is the source of some frame in the parent’s frame set
either
· by using the ordinal (0 to the number of frames minus one) of the frame within the
frame set as an index or
· by using the value of the name attribute of the desired frame as an argument.
Example
[Link][ 1 ]
[Link]( “lower” )
This gets us to the document level of the page.
If no page is loaded into the selected frame, the frame’s document object is still defined
– designating the space rendered for that frame in the rendering of the parent.
Example
[Link]( “lower” ).[Link]( “<p>lower</p>” );
Example:
The following is a page that defines a frame set. One of its frames has “[Link]”
as the value of its SRC attribute.
<html>
<head>
<title>Frames collection</title> </HEAD>
<frameset rows = "100, *">
<frame src = "[Link]" name = "upper"> <frame src = "" name =
"lower"></frameset>
</html>The following is file [Link]:
<html>
<head>
<title>The frames collection</title>
<script type = "text/javascript"> function start()
{
[Link]( "lower" ).[Link]( "<p>lower</p>" );
Prepared By : A Kanaka Raju 33
Downloaded From: [Link] WEB TECHNOLOGIES

}
</script>
</head>
<body onload = "start()">
<p>upper</p>
</body>
</html>
Event Handling:
Event: that response with the event it is called event
Event is a action that are recognized by the controls such as text box, buttons checkbox….etc.,
Events are built in document
Event handling:
An event is a notification that occurs in response to the action such as changing the state.
Event handling are divided in two types
1. Keyboard events
2. Mouse Events.
Keyboard events:
When the user interacted with the keyboard the keyboard events are generated. The events
occurs when the user pres or release a keyboard key.
The down and key up events fired when a key changes
The key board events also include shift control alter.
The events will be fired when
1) Key press [Link] up [Link] down
Mouse Events:
The event will be fired when the user clicks the mouse on the object or element with HTML
script ,java script; We are able to response to onclick such as mouse move, mouse up, mouse
down…etc.
(i) onload event: The event will be fired when we finished the code successfully and it
is used in the body tag.
 The page has been loaded in to the client side.
 The load event is used to update the content used
(ii) Event on click : The event will be fired when we click the mouse on the object
(iii)on mouse move event: the event The event will be fired whenever the mouse is
moving to perform action
 It uses coordinate system on the mouse position on mouse over and on mouse event.
(iv) on mouse over and on mouse event: when the mouse over cursor moves over an
element on the mouse over is fired for that element when the mouse cursor leaves the
element the on mouse event is fired.
(v) On error event: the error dialogue box represented on error event. The error dialogue
box contains errors to handling the errors. We can use the error event to launch error
handling code.
(vi) On focus and on blur: these are particularly useful for when dealing with the forms.
The on focus event fires when an element gains focus. When the user the uses the tab
key on the element and on blur files when an element host the focus.
(vii) On mouse down: the on mouse down event will be fired when pressing the
mouse down on the object or element
Prepared By : A Kanaka Raju 34
Downloaded From: [Link] WEB TECHNOLOGIES

(viii) On mouse up : the on mouse event will be fired when we press the mouse up on
the object or element.
(ix) On click: the event will be fired when we click the mouse on the object element
(x) On double click: the event will be fired when we double click on the object or
element.
o The key down & key up events fired when a key changes its state
o The keyboard events also includes shift, ctrl, alter shift and keyboard combination of
keys pressing the event also fired.
Example programs for Events:
onclick():
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>
onload():
<html>
<head><title>Javascript Form Events : keyword this</title>
<script>
function onload()
{
alert("page is loaded");
}
</script>
</head>
<body onload="onload()">
<p>this is onload function</p>
</body>
</html>
onerror():
<html>
<body>
<img src="[Link]" onerror="myFunction()">

Prepared By : A Kanaka Raju 35


Downloaded From: [Link] WEB TECHNOLOGIES

<p>A function is triggered if an error occurs when loading the image. The function shows an
alert box with a text</p>
<script>
function myFunction() {
alert('The image could not be loaded.');
}
</script>
</body>
</html>
Mouse over and Mouse out:
<html>
<head>
<script type = "text/javascript">
<!--
function over() {
[Link] ("Mouse Over");
}
function out() {
[Link] ("Mouse Out");
}
//-->
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
Onfocus:
<html>
<body>
Enter your name: <input type="text" id="fname" onblur="myFunction()">
<p>When you leave the input field, a function is triggered which transforms the input text to
upper case.</p>
<script>
function myFunction() {
var x = [Link]("fname");
[Link] = [Link]();
}
</script>
</body>
</html>
Onsubmit:
<html>
Prepared By : A Kanaka Raju 36
Downloaded From: [Link] WEB TECHNOLOGIES

<body>
<form onsubmit="f1()">
Enter name: <input type="text">
<input type="submit" value="submit">
</form>
function f1()
{
alert("the form is submitted");
}
</script>
</body>
</html>
Onreset:
<html>
<body>
<p>When you reset the form, a function is triggered which alerts some text.</p>
<form onreset="f1()">
Enter name: <input type="text">
<input type="reset">
</form>
<script>
f1() {
alert("The form was reset");
}
</script>
</body>
</html>
Data binding with Tabular Data control:
Data binding is a DHTML feature that lets you easily bind individual elements in your document
to data from another source, such as a database or comma-delimited text file. When the
document is loaded, the data is automatically retrieved from the source and formatted and
displayed within the element.
Data binding and control
 With data binding, data need no longer reside exclusively on the server. The data can be
maintained on the client and in a manner that distinguishes that data from the XHTML
markup on the page.
 Data are sent to the client and then all subsequent manipulations take place on that data
directly on the client, thus eliminating server activity and network delays.
 To bind external data to XHTML elements, Internet Explorer employs software capable
of connecting the browser to live data sources. These are known as Data Source Objects
(DSOs).
 There are several DSOs available. The most popular DSO is the Tabular Data Control
(TDC).
Simple Data Binding:
The following example will binds the text file to HTML <table> element.

Prepared By : A Kanaka Raju 37


Downloaded From: [Link] WEB TECHNOLOGIES

Consider a simple example where we store the name, age and sex of 6 persons in a text
file. Now, we want to extract this data and display it on the web page in a tabular form.
The text file looks like this:
[Link]:
Name, age, gender
Premshree, 19, male
Ajith, 21, male
Usha, 20, female
John, 22, male
Flora, 18, female
Samuel, 20, male
Using the <table> tag to handle Tabular Data Control
By using the <TABLE> tag, we can display this data by merely using a skeleton HTML
block:
Corresponding HTML page:
<HTML>
<HEAD>
<OBJECT ID="data2" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="[Link]">
<PARAM NAME="UseHeader" VALUE="TRUE">
<PARAM NAME="FieldDelim" VALUE=",">
</OBJECT>
</HEAD>
<BODY>
<TABLE DATASRC="#data2" BORDER="2">
<THEAD>
<TH>Name :</TH>
<TH>Age :</TH>
<TH>Sex :</TH>
</THEAD>
<TR>
<TD><SPAN DATAFLD="name"></SPAN></TD>
<TD><SPAN DATAFLD="age"></SPAN></TD>
<TD><SPAN DATAFLD="sex"></SPAN></TD>
</TR>
</TABLE>
<BODY>
</HTML>
We added the DATASRC attribute only once into the <TABLE> tag itself, The three
table columns (TDs) of the table will hold the information for the specified database column,
denoted by using the DATAFLD attribute. IE will automatically generate the corresponding
HTML codes to display and separate each data inside the columns.
The output will look like this:
Name : Age : Sex :
Premshree 19 Male

Prepared By : A Kanaka Raju 38


Downloaded From: [Link] WEB TECHNOLOGIES

Name : Age : Sex :


ajith 21 Male
Usha 20 female
John 22 Male
Flora 18 female
Samuel 20 Male

Moving a record set in Tabular Data Control using JavaScript:


The tabular data control contains some properties and methods for any client-side language
like JavaScript to manipulate. Some of the important ones are:
 recordset : This property creates a reference point to the data file.
 EOF : This property is used to check if we have reached the end of the file.
 moveFirst() : Point to the first data item (first row).
 moveNext() : Point to the next data item from current position.
 movePrevious(): point to the previous data item from the current position.
 moveLast() : Point to the last data item (last row).
 BOF: This property is used to check if we have reached the beginning of a file.
Now let us create a simple text file
Ex: “[Link]”
Name, age, gender
Premshree pillai, 19, male
Ajith, 21, male
Usha, 20, female
John, 22, male
Flora, 18, female
Samuel, 20, male

By using the <TABLE> tag, we can display this data record by record just clicking the buttons.
Corresponding HTML page:
<HTML> <HEAD>
<OBJECT ID="data3" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="[Link]">
<PARAM NAME="UseHeader" VALUE="TRUE">
<PARAM NAME="FieldDelim" VALUE=",">
</OBJECT>
<SCRIPT LANGUAGE="JavaScript">
function movenxt()
{
var dataSet=[Link]; //Get the complete data record set Output:
[Link](); //Go to next data row
}
function moveprv()
{

Prepared By : A Kanaka Raju 39


Downloaded From: [Link] WEB TECHNOLOGIES

var dataSet=[Link]; //Get the complete data record set


[Link](); //Go to next data row
}
</SCRIPT></head>
<body>
<h1> employee data list</h1>
<div DATASRC="#data3" DATAFLD="name"></div>
<div DATASRC="#data3" DATAFLD="age"></div>
<div DATASRC="#data3" DATAFLD="sex"></div>
<input type= button value="prev" onclick="moveprv()">
<input type= button value="next" onclick="movenxt()">
</BODY>
</HTML>
Binding to an image:
It is also possible that we can bind data control to an <img> tag. This tag uses two main
properties they are:
1. DATASRC
2. DATAFLD
DATASRC: it specifies the file in which <img> tag “src” attribute values are stored. Generally it
contains the locations of the images which are bind
DATAFLD: it specifies the field name of images locations in the data file.
The following example binds images to data control. It moves through the various images when
user clicks on “Next” and “Previous” buttons.
Each time user clicks on Next and Previous buttons the location of the images are changed
according to the rows in a data file.
[Link] (contains locations of the images) data file

location  filed name


c:/[Link]
c:/[Link]

c:/[Link]

Corresponding HTML page:


<HTML> <HEAD>
<OBJECT ID="images" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="[Link]">
<PARAM NAME="UseHeader" VALUE="TRUE">
</OBJECT>
<SCRIPT LANGUAGE="JavaScript">
function movenxt() Output:
{
var dataSet=[Link]; //Get the complete data record set
[Link](); //Go to next data row
if ([Link])
[Link]
Prepared By : A Kanaka Raju 40
Downloaded From: [Link] WEB TECHNOLOGIES

}
function moveprv()
{
var dataSet=[Link]; //Get the complete data record set
[Link](); //Go to next data row
if ([Link])
[Link]
}
</SCRIPT></head>
<body>
<h1> Different shape Images</h1>
<img DATASRC="#images" DATAFLD="location" width=200 height=200/>
<input type= button value="Previous" onclick="moveprv ()">
<input type= button value="Next" onclick="movenxt ()">
</BODY> </HTML>
Binding to a table:
Binding data to a table element is perhaps the most important feature of data binding.
<!-- Using Data Binding with tables -->
<html>
<head>
<title>Data Binding and Tables</title>
<object id = "Colors" classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name = "DataURL" value = "[Link]" />
<param name = "UseHeader" value = "TRUE" />
<param name = "TextQualifier" value = "@" />
<param name = "FieldDelim" value = "|" />
</object>
</head>
<body style = "background-color: darkseagreen">
<h1>Binding Data to a <code>table</code></h1>
<table datasrc = "#Colors" style = "border-style: ridge; border-color: darkseagreen; background-
color: lightcyan">
<thead>
<tr style = "background-color: mediumslateblue">
<th>Color Name</th>
<th>Color RGB Value</th>
</tr>
</thead>
<tbody>
<tr style = "background-color: lightsteelblue">
<td><span datafld = "ColorName"></span></td>
<td><span datafld = "ColorHexRGBValue" style = "font-family: monospace">
</span>
</td>
</tr>
</tbody>
• Bind the table by adding the datasrc attribute to the opening table tag. We complete the
data binding by adding the datafld attribute to span tags that reside in the table cells.
Sorting table data:
We can sort the data of tabular data control dynamically by setting “sort” property value and “Reset()”
method
Sort : it is a property, that specifies the sort column name
Prepared By : A Kanaka Raju 41
Downloaded From: [Link] WEB TECHNOLOGIES

+column_name : data will be sorted in this column in Ascending order


-column_name : data will be sorted in this column in Descending order
Reset(): it is a method that refreshes the displayed data according to setting of sort property
The following example sorts names and ages of employee
[Link] (Data file: contains data of employees) Output:

name,age,gender  field
names
vinod,25,male

usha,23,female

ravi,22,male
Corresponding HTML page:
srinu,24,male
<html>
madhu,21,female
<head> <title> ex on data control </title>
<OBJECT ID="emp" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
arun,26,male
<PARAM NAME="DataURL" VALUE="[Link]">
<PARAM NAME="UseHeader" VALUE="TRUE"> <PARAM NAME="FieldDelim" VALUE=",">
</OBJECT>
<body>
<script>
<TABLE DATASRC="#emp" BORDER="2">
function namesort()
<THEAD>
{
<TH>Name :</TH>
[Link]="name";
<TH>Age :</TH>
[Link]()
<TH>Gender :</TH>
}
</THEAD><TR>
function agesort()
<TD><SPAN DATAFLD="name"></SPAN></TD>
{
<TD><SPAN DATAFLD="age"></SPAN></TD>
[Link]="age";
<TD><SPAN DATAFLD="gender"></SPAN></TD></TR>
[Link]()
} </table><input type=button value="Sort Name"
</script> onclick="namesort()">
</head> <input type=button value= "Sort Age" onclick="agesort()">

</body>

</html>

Prepared By : A Kanaka Raju 42

You might also like