Notes for Web Technology on the basis of GGSIPU BCA Syllabus

By Savleen Kaur, Assistant Professor IITM-JP, GGSIPU New Delhi Page | 1

DHTML
Once a web server processes a web page and sends it to the computer requesting it (called the 'Client'
computer) it cannot get any more data from the server unless a new request is made. So to move around
this drawback we use Dynamic HTML (DHTML) which is combining HTML and a scripting language
that runs on the Client's browser to bring special effects to otherwise static pages. The scripting language
that we will be using is JavaScript as most browsers support it. The scripting language can be used to alter
HTML data shown (or present but hidden) on the current page by manipulating the properties for the
HTML tags involved.
Dynamic HTML" is typically used to describe the combination of HTML, style sheets and scripts that
allows documents to be animated. Dynamic HTML allows a web page to change after it's loaded into the
browser - there doesn't have to be any communication with the web server for an update. You can think of
it as 'animated' HTML. For example, a piece of text can change from one size or color to another, or a
graphic can move from one location to another, in response to some kind of user action, such as clicking a
button. It is a browser feature that allows your browser (Netscape Navigator 4.x orhigher, or
Microsoft Internet Explorer 4.x or higher) to be dynamic. A dynamic browser can alter a Web
pages look after the document has loaded.

Dynamic (relative to Web) refers to:
Web pages that respond to user requests through buttons or other types of
controls
Various types of effects such as animation that appear automatically in a Web
browser


Advantages of DHTML

(1) DHTML makes documents dynamic. Dynamic documents :

Allow the designer to control how the HTML displays Web pages
content.

React and change with the actions of the visitor.

Can exactly position any element in the window, and change that
position after the document has loaded.
Notes for Web Technology on the basis of GGSIPU BCA Syllabus





By Savleen Kaur, Assistant Professor IITM-JP, GGSIPU New Delhi Page | 2


Can hide and show content as needed.

(2) DHTML allows any HTML element(any object on the screen that can be controlled
independently using JavaScript) in Internet Explorer to be manipulated at any time, turning plain
HTML into dynamic HTML.

(3) With DHTML, changes occur entirely on the client-side( on the users browser).

(4) Using DHTML gives the author more control over how the page is formatted and how
content is positioned on the page.

Components of DHTML

Dynamic HTML includes the following components:

Conventional HTML

Scripts Small programs designed to manipulate Web pages.

Document Object Model (DOM) The road map through which you can locate any
element in an HTML document and use a scripting language, such as JavaScript, to
change the elements properties.

Absolute Positioning The elements on the page are placed in a fixed location, as
opposed to relative positioning, in which an elements location is relative to particular
elements on the page.

Multimedia filters Multimedia features that create visual effects for text, images, and
other objects, without imposing long download times on the user.


Note: Conventional HTML and Scripts component of DHML are already
covered.



Notes for Web Technology on the basis of GGSIPU BCA Syllabus





By Savleen Kaur, Assistant Professor IITM-JP, GGSIPU New Delhi Page | 3

The Document Object Model (DOM)

What is the DOM?

The DOM is like a roadmap of your Web page. You describe a path that leads
from the HTML document down to the various elements on the page. The DOM for an image called
button1 would be: document.images.button1.

The Document Object Model was created with these four goals in mind:
To delineate a hierarchical structure representing all parts of a Web document.
To allow the modification of that structure through adding and removing content.
To provide a way to monitor and manipulate the characteristics of content on the page.
To provide information about how the items on a page interrelate with the user and each other

What Does the DOM Allow us to Do?

The Web page author can connect any element on the screen to a JavaScript. He or she can use scripts to
control everything on the page and to change virtually anything at any time.

Some examples of effects the designer can create using the DOM with script:
o A buttons image changes when the user passes the mouse over it.
o The user can drag text or images around on a page.
o Some of the items on a page mover around without user interaction and end up
positioned exactly where the author wants them.
o When the user positions the mouse over an image, text appears.
o The Web page author can change the formatting of text, graphics, and tables on
the fly.
Notes for Web Technology on the basis of GGSIPU BCA Syllabus





By Savleen Kaur, Assistant Professor IITM-JP, GGSIPU New Delhi Page | 4

o Parts of the page are dynamically created or destroyed as they appear on the screen

How the DOM works?

The DOM works by tracing a path from the script down to the individual elements
to be acted upon with the HTML document. The steps in this hierarchy are:
window
(parent)
(frame)
document
ID
image
link
anchor
form

Components of the DOM
The DOM is comprised of these components:
Objects The object is the basic unit of the DOM. Every element on the page is
part of the DOM. Text and images are examples of objects. A table would be a
parent object; its cells would be children of the table. A form named MyForm
could be referred to as: <FORM NAME=MyForm>

Properties Properties are adjectives that describe parts of the Web page. Examples could include
height, width, color, and size. If a
Notes for Web Technology on the basis of GGSIPU BCA Syllabus





By Savleen Kaur, Assistant Professor IITM-JP, GGSIPU New Delhi Page | 5

cell border is two pixels wide, its width property would be referenced as:
WIDTH=5.

Events An event is an action or occurrence of a Web page. When an event
occurs on a page, the item that received the event notifies the DOM that the event
has occurred. This is called firing the event. An event is trapped, or handled, if a
script is present that responds to the firing of that event. The script is called an
event handler. Some examples of events:
o onMouseDown Fired when the user presses the mouse button.
o onMouseOver Fired when the user positions the mouse pointer over an object.
o onMouseOut - Fired when the user moves the mouse pointer outside the
boundaries of an object.
o onKeyPress Fired when the user presses a key.
o onFocus Fired when the object receives the focus.
o onClick Fired when the mouse button is clicked over an area

Methods They describe the actions an object can take. For example, the open
method directs the window to open a new browser window. Other examples are
focus, Run, and reload

Collections Collections are lists of items that are associated with a particular
object. For example, the collection name images is a list of all image objects.



Notes for Web Technology on the basis of GGSIPU BCA Syllabus





By Savleen Kaur, Assistant Professor IITM-JP, GGSIPU New Delhi Page | 6

Properties of DOM:

1) innerHTML- it lets you change the content of elements between the start tag and the end tag;
treats text as HTML.
2) innerText- it lets you change the text between the start and the end tag.
3) outerText- it lets you change all the text including the start and the end tags.
4) outerHTML- it lets you change the content of an element including the start and end tags; treats
text as HTML.

Example of the properties:
innerText and innerHTML:

<html><head><script>
function changeheading()
{header.innerText="this is new heading 1";}
function changeHeading2()
{header.innerHTML="<br><br><pre> Hello</pre>"}
</script></head>
<body>
<h1 id=header onclick="changeheading()" onmouseout="changeHeading2()">this is heading
1</h1></body></html>

outerHTML:
<html><head><script>
function changeheader()
{
header.outerHTML="<br><br><pre> Hello</pre>";

Notes for Web Technology on the basis of GGSIPU BCA Syllabus





By Savleen Kaur, Assistant Professor IITM-JP, GGSIPU New Delhi Page | 7

}</script></head>
<body>
<h1 id=header onclick=changeheader()>Dynamic HTML</h1>
</body></html>

Positioning:

CSS introduces the position property to have greater control over the display of the Web documents.
There are two ways of defining the position of elements. These are:

Absolute Positioning
Relative Positioning

Absolute Positioning:

<img src=abc.gif style=position:absolute;top:0px;left:0px;z-index:1>

The above statement positions the img element on the page. On specifying the position attributes as
absolute removes it from the normal flow of elements on the page and positions the element according to
its distance from top,left,right or bottom margins of its parent element. The z-index attribute is used to
layer the overlapping elements. Elements that have higher z-index value are displayed in the front of
elements with lower z-index values. The following example shows how the element can be positioned.

<body>
<img
src="file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%20Pic
tures/Blue%20hills.jpg" width="50" height="50" style="position:relative;top:20px;border-
width:thick;left:30px;z-index:2">
Notes for Web Technology on the basis of GGSIPU BCA Syllabus





By Savleen Kaur, Assistant Professor IITM-JP, GGSIPU New Delhi Page | 8

<h2 style="position:absolute;top:20px;left:30px;z-index:3">Hello this is a heading</h2>
</body>
Relative Positioning:
In relative positioning the elements are specified based on its natural flow in the document. For example:
if a paragraph falls 10pixels below a heading, and you specify, the paragraph to be top:10px, it will end
up20pixels below heading. The code below illustrates how relative positioning can be implemented.

<body>
<img
src="file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%20Pic
tures/Blue%20hills.jpg" width="50" height="50" style="position:relative;top:20px;border-
width:thick;left:30px;z-index:2">
<h2 style="position:relative;top:20px;left:30px;z-index:3">Hello this is a heading</h2>
</body>

Event Handling in DHTML
One of the keys to create a dynamic pages is the use of the event handlers. These event handler allow to
execute the specific script code in response to user or system initiated actions. The DOM provides the
methods for capturing events so that you can perform your own actions in response to them. It also
provides an event object which contains information specific to a given event that can be used by an event
processing code.
Event bubbling (supported only in Internet Explorer) When an object fires an
event, it also notifies its parent object that the event has occurred. The event
continues to travel, or bubble, up the hierarchy until it reaches the top or the
bubbling action is cancelled.

Events are:
onmouseDown Fired when the user presses the mouse button.
Notes for Web Technology on the basis of GGSIPU BCA Syllabus





By Savleen Kaur, Assistant Professor IITM-JP, GGSIPU New Delhi Page | 9

onmouseOver Fired when the user positions the mouse pointer over an object. onmouseout - Fired
when the user moves the mouse pointer outside the
boundaries of an object.
onkeypress Fired when the user presses a key.
onfocus Fired when the object receives the focus.
onclick Fired when the mouse button is clicked over an area.
onblur- occurs when the element loses the focus.
ondblclick- occurs when an element is double clicked.
onkeyup- Occurs when your key goes up.

Examples of Events are:
OnMouseEffect
<body>
<img
src="file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%20Pic
tures/Winter.jpg"
onmouseover="this.src='file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pict
ures/Sample%20Pictures/Blue%20hills.jpg'"
onmouseout="this.src='file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictur
es/Sample%20Pictures/Winter.jpg'"></body></html>
Onblur:
<html><head><script>
function myFunction(x)
{x.value=x.value.toUpperCase();
document.write(x.value);}
</script></head><body>
Enter your name: <input type="text" onblur="myFunction(this)">
Notes for Web Technology on the basis of GGSIPU BCA Syllabus





By Savleen Kaur, Assistant Professor IITM-JP, GGSIPU New Delhi Page | 10

<p>When you leave the input field, a function is triggered which transforms the input text to upper
case.</p></body></html>
Ondblclick
<html><head><script>
function myFunction()
{document.getElementById("demo").innerHTML="Hello World";}
</script></head><body>
<p id="demo" ondblclick="myFunction()">Doubleclick this paragraph to trigger a
function.</p></body></html>

onfocus
<html><head><script>
function myFunction(x)
{x.style.background="yellow";}
</script></head><body>
Enter your name: <input type="text" onfocus="myFunction(this)">
<p>When the input field gets focus, a function is triggered which changes the background-
color.</p></body></html>

onkeypress
<html><head><script>
function myFunction()
{alert("You pressed a key inside the input field");}
</script></head><body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" onkeypress="myFunction()">
Notes for Web Technology on the basis of GGSIPU BCA Syllabus





By Savleen Kaur, Assistant Professor IITM-JP, GGSIPU New Delhi Page | 11

</body></html>


onKeyup
<html><head><script>
function Button1(event)
{alert(event.keyCode);}
</script></head>
<body onkeyup="Button1(event)">
<p><b>Note:</b> Make sure the right frame has focus when trying this example!</p>
<p>Press a key on your keyboard. An alert box will alert the keycode of the key.</p></body>
</html>

Filters
Microsoft-specific DHTML uses visual filters and dynamic CSS. Visual filterslet you perform
visual effects on graphics and text on a Web page. Dynamic CSS enables you to change the
visual appearance as well as the position of elements on the screen. Visual filters modify the
appearance of the content of an object.
Types of Filters:

1) Flipv & Fliph Filter: This filter is used to create a mirror effect by flipping the content
vertically and horizontally respectively.

Example:
<html><head><title>Filters-flipV</title></head>
<body><div>The text is turned upside down</div><br><br><br>
Notes for Web Technology on the basis of GGSIPU BCA Syllabus





By Savleen Kaur, Assistant Professor IITM-JP, GGSIPU New Delhi Page | 12

<div style="position:absolute;filter:fliph;font-family:jokerman;color:green">
The text is turned upside down </div><br><br>
<div style="position:absolute;filter:flipv;">The text is turned upside
down</div></body></html>

2) Glow Filter: This filter is used to glow the text by giving a colour impact to the content.
Strength parameter is used to increase or decrease glow effect.

Example:
<body>
<div style="position:absolute; filter:glow(strength=6,color=red);">
Hello There</div></body>


3) Invert Filter: Negative image effect. Dark areas become light and light areas become
dark.

4) Gray Filter: Grayscale image effect. All color is stripped from the image, only
brightness data remains


5) Xray Filter: Inversion of the grayscale effect.

Example:
<head> <title>Misc. Image filters</title> </head>
<body>
<table border=1>
<tr><td>Normal</td> <td>Grayscale</td> </tr>
Notes for Web Technology on the basis of GGSIPU BCA Syllabus





By Savleen Kaur, Assistant Professor IITM-JP, GGSIPU New Delhi Page | 13

<tr><td><img src =
"file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%2
0Pictures/Sunset.jpg" alt = "normal scenic view" /></td>
<td><img src =
"file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%2
0Pictures/Sunset.jpg" style = "filter: gray" alt = "gray scenic view"/> </td> </tr>
<tr><td>Xray</td> <td>Invert</td> </tr>
<tr>
<td><img src =
"file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%2
0Pictures/Water%20lilies.jpg" style = "filter: xray"
alt = "xray scenic view"/>
</td>
<td><img src =
"file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%2
0Pictures/Water%20lilies.jpg" style = "filter: invert"
alt = "inverted scenic view"/>
</td> </tr></table> </body></html>


6) Shadow Filter: Create a shadow effect through the color and direction parameters.
Greater the value of direction lesser will be the shadow effect

Example:
<H1 STYLE="POSITION:ABSOLUTE; FILTER:SHADOW(DIRECTION=1,
COLOR=GREEN);">SHADOW EFFECT</H1>

7) Wave filter: It allows user to apply sine-wave distortions to text and images on Web
pages. Parameters are:
Notes for Web Technology on the basis of GGSIPU BCA Syllabus





By Savleen Kaur, Assistant Professor IITM-JP, GGSIPU New Delhi Page | 14

Add- Adds a copy of the text or image underneath the filtered effect
Freq-Determines the frequency of the wave applied
phase -Indicates the phase shift of the wave

Example:
<body>
<h2 style="position:absolute;
filter:wave(add=0,phase=0,freq=4,strength=4);">Wassup</h2>
</div></body>

8) Mask Filter: To create a masking effect.
Example:
</body><div><h1 style="position:absolute; top:125; left:20;
filter:mask(color=blue);">Heyyuoo</h1></div></body>
Transition:
Transitions are used to give power point effects to the content of the web page. Transitions are set as
values of the filter property just as filters.

There are two types of Transitions:

Blend Trans- it is used to give fade in fade out effect to the content.
Reveal Trans- it is used to apply 24 power point effects.




Notes for Web Technology on the basis of GGSIPU BCA Syllabus





By Savleen Kaur, Assistant Professor IITM-JP, GGSIPU New Delhi Page | 15

Both the transitions make use of some predefined functions. Those are:

1) start()- It is used to initiate the transition.

2) apply()- to apply the particular transition to the content.

2) run()- to execute the transition effect successfully.

Examples of transition:

Reveal
<html><head><script>

function start()
{
htext.filters.revealTrans.apply();
htext.innerText="after the transition effect";
htext.filters.revealTrans.play();
}

</script></head>
<body>
<h2 id="htext" style="width:400px; height=200px;
filter:revealTrans(duration=5.000,transition=09)" onclick="start()">
Example of reveal trans
</h2></body></html>
Notes for Web Technology on the basis of GGSIPU BCA Syllabus





By Savleen Kaur, Assistant Professor IITM-JP, GGSIPU New Delhi Page | 16



Blend

<html><head><script>
function start()
{
htext.filters.blendTrans.apply();
htext.innerText="after the transition effect";
htext.filters.blendTrans.play();
}

</script></head><body>
<h2 id="htext" style="width:400px; height=200px; filter:blendTrans(duration=2.000)"
onclick="start()">
Example of blend trans
</h2></body></html>