8/9/2019 02 JWT-UNIT-1

1/58

1

HTML INTRODUCTION

HTML stands for Hypertext Markup Language used to create web pages. It is a markup language

which identifies the elements of the web pages. HTML contains the set of labels and tags which has

predefined meanings used to render the information in a browsers (I! Mo"illa! #etscape #a$igator etc%. It

is combination of Hypertextand markup HyperTextis the method by which you mo$e around on the

web & by clicking on special text called hyperlinkswhich bring you to the next page and Markup is what

HTML tagsdo to the text inside them. They mark it as a certain type of text ( italicized text! for

example% .HTML has two types of markup' tags and character entities.

Tagsare constructed of brackets between which the tag is placed. Tags are placed around segments

of text! so there is usually a companion end tag which is identical to the start tag except it includes a

forward slash. Here are start and end tags for a title'

8/9/2019 02 JWT-UNIT-1

2/58

*

CORE HTML ELEMENT,

Lets start by taking the four main elements that form the basic structure of e$ery document.

+HTML,! +H/0,! +TITL, and +20,.

The

8/9/2019 02 JWT-UNIT-1

3/58

)

). 4RE/ORM'TTED TE.T- 4ometimes your text follow the exact format of how it is written in

the HTML document.

8/9/2019 02 JWT-UNIT-1

4/58

name>gen"er> :alue>male>#

*+T

8/9/2019 02 JWT-UNIT-1

17/58

1

'ttri2ute 4urp!se

type Indicates that you want to create a radio button

Name the name of the form control.

6alue The $alue that will sent to the ser$er

checke" Indicates that the option is selected by default.

,ie Indicates the si"e of the radio button in pixel

+form, #ame ' +input typeABtextB $alueABmd fero"B si"eAB1>B-,+br,

7assword'+input typeABpasswordB $alueABmd fero"B si"eAB1>B maxlengthAB1>B-,

/ddress ' +textarea colsAB1*B rowsAB)B-,+-textarea,+br, Languages '+input typeABcheckboxB nameABskillB $alueABhtmlB-,html

+input typeABcheckboxB nameABskillB $alueAB3a$aB-,3a$a

+input typeABcheckboxB nameABskillB $alueAB.netB-,.net+br,

9ender ' +input typeABradioB nameABgenderB $alueABmaleB checked -,male +input typeABradioB nameABgenderB $alueABfemaleB-,female+br,

+input typeABbuttonB $alueABsubmitB onclickABlogin(%B-,+br,+-form,

A;,elect (!xes - / drop down select box allows users to select one item from a drop&down menu. It takes

less space than radio button controls. / drop&down select box is created by using +4L5T, element

while each indi$idual option is contained in +27TI2#, element within +4L5T, tag.

'ttri2utes 4urp!se

Name The name of the control

,ie It is used to present the scrolling bar to the list box.

Multiple It allows users to select multiple options from the list.

8/9/2019 02 JWT-UNIT-1

18/58

1P

La2el /n alternati$e way of labeling options.

+4L5T #/MAJcolorJ,

+27TI2# /LCAJredJ,60+-27TI2#,

+27TI2# /LCAJgreenJ 4L5T0,96#+-27TI2#,

+27TI2# /LCAJblueJ,LC+-27TI2#,+-4L5T,

0r!uping Opti!ns 9ith the

can group them together using the +optgroup, element. The +optgroup, carry a label attribute whose

$alue is a label for that group of options.

+select nameAJfacultyJ, +optgroup labelAJcse&departmentJ,

+option $alueAJfero",md fero" khanani+-option,

+option $alueAJsimranJ,simran banu khanani+-option, +option $alueAJaf3alJ,kha3a af"aluddin+-option,

+-optgroup,

+optgroup labelAJece&departmentJ,

+option $alueAJmansoor aliJ,mansoor ali+-option,

+option $alueAJmd mueetJ,md mueet+-option, +option $alueAJmd fasihuddinJ,md fasihuddin +-option,

+-optgroup,+-select,

*+T

8/9/2019 02 JWT-UNIT-1

19/58

1R

G;/ile (elect (!x - :ile select ox is also known as File upload boxwhich allows a user to upload a file

to your web site from his computer. It can be created by using the +I#7CT, element whose type

attribute $alue is 7ile. The accept attribute has been added to the +I#7CT, element to indicate the MIM

types of the files that can be selected for upload.

7ile> N'ME >7ileUpl!a"> 'CCE4T>image#>#

; Hi""en C!ntr!ls - Hidden controls can use to pass information between pages without the user seeing

it. i.e. It will not $isible to the user while it will displayed in the browser! but it can be seen by looking at

the source code of the page. Therefore !Hidden controls are mainly used for sending the any sensiti$e

information that you do not want the user to seethe hidden control can be created using the +I#7CT,

element whose typeattribute $alue is hi""en; nameand valuecan still send to the ser$er for a hidden

form control! the hidden control must carry name and $alue attributes.

+input typeAJhiddenJ nameAJhide page sent fromJ $alueAJrits homeJ-,

+input typeAJsubmitJ $alueAJclick to seeJ-,

HTML /R'ME,- :rames di$ide a browser window into se$eral separate pieces or panes! each pane

containing a separate HTML page. It allows that you can load a reload single page without ha$ing to

reload the entire contents of the browser window. / collection of frames in the browser window is known

as aframeset. The

8/9/2019 02 JWT-UNIT-1

20/58

*O

'ttri2ute 4urp!se

c!ls It specifies how many columns are contained in the frameset and the si"e of each column.

:or example! to create three columns in browser window! the first take *O percent! secondtakes ?O and third takes )O.

COL,>?BJBJ@BJ>

r!9s It is used to specify the rows in the frameset which works like colsattribute.

RO+,>?BJBJ@BJ>

2!r"er The border attribute specifies the width of the border of each frame in pixel.

(ORDER>8>

7rame2!r"er It specifies whether a three&dimensional border should be displayed between frames.

/R'ME(ORDER>)E,>

7ramespacing This attribute specifies the amount of space between frames in a frameset.

/R'ME,4'CIN0 >8B>

The main;html>

name It allows you to gi$e the name of the frame to indicate to which frame a document should

be loaded.

N'ME>main>

n!resie This attribute pre$ents a user from resi"ing the frame

NORE,IFE>NORE,IFE>

7rame2!r"er It specifies whether a border of the frame shown or not./R'ME(ORDER>)E,#NO>

scr!lling This attribute allows a user to controls the scrollbars in a possible $alues.

,CROLLIN0 >)E,#NO#'UTO>

8/9/2019 02 JWT-UNIT-1

21/58

*1

*. @hen your main document is $ery long and na$igation bar pro$ides shortcuts to parts of the main

document.

). @hen you do not want to reload the whole page.

Example 3 in"ex;html

+:6/M4T 52L4AJ*OO!UJ :6/M47/5I#9AJ1OJ, +:6/M 465AJna$igation.htmlJ #/MAJna$igationJ :6/M2606AJOJ #264IN-,

+:6/M 465AJmain.htmlJ #/MAJmainJ :6/M2606AJOJ #264IN-,

+:6/M4T,

na:igati!n;html

+body bgcolorABS????ffB,+h*,na$igation+-h*,clicks below links to na$igate to the main frame

+ul,+li,+a hrefABmobile.htmlB targetABmainB,+b,mobiles+-a,+-li,

+li,+a hrefABcomputersB targetABmainB,computers+-a,+-li,+li,+a hrefABbooks.htmlB targetABmainB,books+-a,+-li,

+li,+a hrefABgarments.htmlB targetABmainB,garments+-a,+-li,

+-ul,+-body,

main;html

+body bgcolorABSRRff??B,

+font colorABredB si"eABPB faceABgeorgiaB,M/I# @I#02@+-font,

+-body,

*+T

8/9/2019 02 JWT-UNIT-1

22/58

**

The targetattribute can also takes the other attributes $alues as follows

6alue 4urp!se

Ksel7 Loads the page into the current frame

K2lank Loads the page into new browser window.

Kparent Loads the page into the parent @indow.

Kt!p Loads the page into the browser window! replacing anycurrent window.

NE,TED /R'M,ET,- ou can create a nested frameset by using +frameset, element in the place of

one of the +frame, elements.

+frameset rowsAB*O!>O!UB framespacingAB>B,

+frame srcABtop.htmlB nameABna$igationB frameborderABOB noresi"e-, +frameset colsABU!PO!UB framespacingAB>B,

+frame srcABleft.htmlB nameABleftB frameborderABOB noresi"e-,

+frame srcABmid.htmlB nameABmidB frameborderABOB noresi"e-,

+frame srcABright.htmlB nameABrightB frameborderABOB noresi"e-, +-frameset,

+frame srcABbottom.htmlB nameABbottomB frameborderABOB noresi"e-,

+frameset,

+-frameset,+frameset,

*+T

8/9/2019 02 JWT-UNIT-1

23/58

*)

C',C'DIN0 ,T)LE ,HEET, 1C,,&- 5ascading style sheets (544% allows you to control the style of

the web page. It can controls the colors! si"e of the fonts! the width and colors of lines and the amount of

white space between items on the page. 5ascading style sheets are also known for specifying the style of

the page elements like spacing! margins etc.! separately from the structure of the document like text! links

etc.! This makes pages more manageable and easy to change when reuired.

1. Csing style sheets makes all pages of a web site ha$e a same look and 5L/44 is used to applystyles.

*. Csing 544 makes the programmer specify the precise font type! si"e! color and other

properties of displayed text. 544 are reusable! creating once and reusing them reduces

programming effort.

). 544 allows to specify element background and colors.

. 544 with box model are able to control the margins! borders! padding etc.!

C,, ,4ECI/IC'TION 1RULE,&- 544 works by allowing you to associate rule with the elements that

appear in the document. These rules specify that how the content of those elements should be rendered.

selector declaration

*+T

8/9/2019 02 JWT-UNIT-1

24/58

*pxG

Link t! the 9e2 page as 7!ll!9s

+H/0,

+LI#= T7AJT;T-544J 6LAJ4TL4HTJ H6:AJ0-:ero"2ne-My4tyle.cssJ -,

+-H/0,

,T)LE C+A--,ELECTOR - 4tyle classes is an extension of Internal 4tyle sheet which carries the

544 rules and allows you to match with an element carrying a class attribute.

N!te' / class can be created within +H/0, element preceded by dot or full stop(.%

THE&,ELECTOR- The idselector works 3ust like a classselector but with the $alue of I0 attributes.

6ather than using a period or full stop before the $alue of the idattribute! you 3ust use a hash1&sign.

+head,

+style typeAJtext-cssJ,.large &&&&&&&&&&&&&&&&&&&&&&class selector

E

font&si"e ' )>ptF font&family ' georgiaF

font&style ' italicF

G

.background &&&&&&&&&&&&&&&&&& class selectorE

background&color'S??ccffF

text&align'centerFG

E

background&color'SffccffF text&align'centerF

*+T

8/9/2019 02 JWT-UNIT-1

27/58

*

padding'

8/9/2019 02 JWT-UNIT-1

28/58

*P

4r!perty 6alue

7!nt37amily arial!$erdana!sans&serif!courier!impact!georgiaK

7!nt3sie *px!x&small!medium!)pt!x&largeK..

7!nt39eight #ormal!bold!bolder!lighter!1OO!*OO..

7!nt3style #ormal!italic!obliue

?; Text /!rmatting

4r!perty 6alue

C!l!r red!green

text3align left!right!center

:ertical3align baseline!sub!super!top!middle!bottomK.

text3"ec!rati!n underline!o$erline!line&through!blink

text3trans7!rm none!capitali"e!uppercase!lowercase

letter3spacing 1OpxKK.. some $alue

9!r"3spacing 1OpxK.. Ksome $alue

9hite3spacing normal!pre!nowrap

text3sha"!9 O.)em!O.>em black

N!te -

px' /pixelis the smallest unit of resolution on a screen.

em'/n emunit corresponds directly to the font&si"e of the reference element.

ex'The exshould be the height of a lower case x.

@; (!r"er 4r!perty

4r!perty 6alue

2!r"er3c!l!r red!green!

2!r"er3style none!solid!dottd!dashed!double!groo$e!inset!outset

2!r"er39i"th

8/9/2019 02 JWT-UNIT-1

29/58

*R

Link styles for links in general

6isite" styles for links that ha$e already been $isited

'cti:e styles for links that are currently acti$e(clicked%

H!:er styles for when someone is ho$ering o$er a link.

; (ackgr!un" 4r!perty

4r!perty 6alue

2ackgr!un"3c!l!r red!green!

2ackgr!un"3image url(V:ero"2ne-images-rits.3pegJ%

2ackgr!un"3p!siti!n Left!right!top!bottom!center.

INTRODUCTION TO *'6,CRI4T

8a$a4cript is also called as 84cript. It is originally created by #etscape. Microsofts $ersion of

8a$a4cript is called as Jcript. The Internet xplorer browser contains the Vava-cript nterpreterJ!

which processes the commands of a script written in 8a$a4cript.

&efinition' 8a$a4cript is the most popular web scripting language in use today. It lets us to

combine programs in our web pages and run these programs in a web browser. It allows us to design

HTML programs that enhance the functionality and appearance of web pages.

+html, +head,

+title,welcome to 3a$a script +-title, +script languageAB8a$a4criptB,

document.writeln(B+h1,+center,+b,@elcome To 8a$a4cript 7rogramming+-h1,B%F

+-script,

+-head,+body,

*+T

8/9/2019 02 JWT-UNIT-1

30/58

)O

+-body,

+-html,

*a:a,cript /eatures

1. 8a$a4cript is an ob3ect&based language that is confined to run within the web

browsers only.

*. 8a$a4cript is an interpreted language and reuires no compilation steps.

). 8a$a4cript can directly be embedded in HTML files. The HTML files with embedded 8a$a4cript

commands interpreted by any browser that is 8a$a4cript enabled.

. 8a$a4cript is platform independent! but! browser dependent. The 8a$a4cript applications work on

any machine that has an appropriate 8a$a4cript enabled browser installed. / 8a$a4cript program

de$eloped on a Cnix machine will work perfectly on a @indows machine.

*+T

8/9/2019 02 JWT-UNIT-1

31/58

8/9/2019 02 JWT-UNIT-1

32/58

)*

Un"e7ine"- / $alue that is undefined is a $alue held by a $ariable after it has been created! but

before a $alue has been assigned to it.

+script languageAB8a$a4criptB,

$ar first!second!n1!n*!sumF firstAwindow.prompt(Bnter the first number 'B!BOB%F

secondAwindow.prompt(Bnter the second number 'B!BOB%F n1AparseInt(first%F

n*AparseInt(second%F

sum A n1n*F

document.writeln(B+h1,+center,+b,The 4um is 'BsumB+-h1,+-center,+-b,B%F+-script,

/UNCTION,- In 8a$a4cript functions are $ery important! which is piece of code mean to pro$ide

definite functionality to the whole programY @e can write the code into a function and call that function to

execute the code in it. :unctions can also be called as modules. The programmer can write functions todefine specific tasks that may be used at many places in a script. :unctions are basically of two types

1. Cser defined or 7rogrammer defined functions.

*. 7redefined or 9lobal or built&in functions

*+T

8/9/2019 02 JWT-UNIT-1

33/58

))

User "e7ine" /uncti!n- Cser&defined functions are those functions that are defined by the

user-programmer specific to the application. :unctions allow the programmer to di$ide the entire big

program into smaller modules. There are se$eral reasons why a big program needs to be di$ided into

smaller modules.

1. This approach makes the program de$elopment more managea2le;

*. Reusa2ility using existing functions to create new programs.

). It a$oids repetition of the code in the program.

These functions can also be referred as Vprogrammer&defined functionsJ. The syntax for defining a

function is'

function functionZname [argument list\

E code

G

To return a $alue from the function! we use the VreturnJ statement. / function is in$oked (or

called% by a function call. The function call specifies the function name and pro$ides information as

arguments that the called function needs to do its task.

+rite a *a:a,cript pr!gram that change the 2ackgr!un" c!l!r "ynamically 1DHTML&

function change5olor(%

E

$ar colorAdocument.getlementyId(BcolorsB%.$alueFif(colorAABredB%E

document.bg5olorAcolorFG

else if(colorAABgreenB%Edocument.bg5olorAcolorFG

else if(colorAABblueB%E

document.bg5olorAcolorFG

elseE$ar colorAprompt(Bnter our :a$ourite 5olor 'B!BcyanB%F

document.bg5olorAcolorF

G

4re"e7ine" 7uncti!n- These functions are built&in function which has some predefined meanings which

pro$ide many functionalities to our program

8;is/inite1&-It takes numeric $alue as an argument and returns trueonly if the gi$en number is 7inite

numeric. 2therwisefalse.

?;isNaN1& - It takes an argument and returns a truestatus only if the argument is not a number elsefalse.

*+T

8/9/2019 02 JWT-UNIT-1

34/58

),calculating the fibonacci series....+-h>,+-caption,

+tr,

+td,enter the number '+-td,

+td,+input typeABtextB nameABnumberB-,+-td,

*+T

8/9/2019 02 JWT-UNIT-1

37/58

)

+-tr,

+tr,

+td,fibonacci $alues '+-td, +td,+input typeABtextB nameABresultB-,+-td,

+-tr,

+tr,+td colspanAB*B alignABcenterB,+input typeABbuttonB $alue A BcalculateB

onclickABget:ibonacci(%B-,+-td,

+table,+-form,

+-body,

'RR'), - In 8a$a4cript! an array is an built&in ob3ect which can be created using new keyword. /n

array is a collection of contiguous memory address locations which shares a common name. /n array

starts with BPindex and ends with sie38

:ar name ne9 'rray1?B&%

@here nameAarrayZname! newAkeyword(an operator which allocates memory%!/rrayAob3ect!si"eA*O

@rite a 84 to calculate the smallest and largest of gi$en numbers.

+script,$ar iAO!min!3!temp!maxF

$ar num A new /rray(%F

for(iAOFi+>Fi%

E $ar nAwindow.prompt(Bnter the number ' B(i1%BB!BOB%F

num[i\AparseInt(n%F

GmaxAnum[O\F

minAnum[O\F

for(iA1Fi+num.lengthFi% E

if(num[i\,max%

maxAnum[i\F else

if(num[i\+min%

minAnum[i\F

G

*+T

8/9/2019 02 JWT-UNIT-1

38/58

)P

document.writeln(B+5#T6,+hr,+b,ntered #umbers 'B%F

for(iAOFi+num.lengthFi%

E document.write(B+b, DnbspFDnbspFDnbspFDnbspFDnbspFBnum[i\%F

G

document.writeln(B+6,+,M/;IMCM ' BmaxB+6,MI#IMCM +-u, ' Bmin%Fdocument.writeln(B+hr,B%F

+-script,

+body bgcolorABS/R01OB,+-body,

'RR') METHOD,

8;push1& - It is method to insert data into an array.

e;g - $ar student A new /rray(V:ero"J!J:asiJ!J/f"alJ%F

student;push(V/tifJ%F!utput -:ero"!:asi!/f"al!/tif si"eA% )

max1n8n?& It displays maximum of two numbers. Math.max()!>% >

a2s1n& It displays the absolute $alue of the number entered. Math.abs(>% >

ceil1n& It displays the rounded $alue of the integer entered. Math.ceil(>.

8/9/2019 02 JWT-UNIT-1

39/58

)R

p!91n8n?& It calculate the power of n1 o$er the n* Math.pow(*!)% P

r!un"1n& It round the $alue to its nearest integer Math.round(>.>% ?

7l!!r1n& It rounds to the largest integer Math.floor(>.*% >.O

sQrt1n& It displays the suare root of entered number Math.srt(R% )

sin1n& It displays the trigonometric sine $alue of a number Math.sin(RO% 1

c!s1n& It displays the trigonometric cosine $alue of a number Math.cos(O% 1tan1n& It displays the trigonometric tangent $alue of a number Math.tan(% 1

exp1n& It displays the exponential(ex% $alue entered Math.exp(*% .)P

l!g1n& It displays the logarithmic (logx% $alue entered Math.log(*% O.?)R

,TRIN0 O(*ECT- / string is a series of characters. / string may include letters! digits and special

characters like ! &! U! -!D!and others. / string is an ob3ect of type W stringP. 4tring literals (constants% are

written as a seuence of characters in double uotation marks or single uotation marks as follows.

$ar s1 A V:62NJF or s*AJM0JF s)AJ3a$ascriptJ

$ar address A VHo 'P&!/"ampuraJF

Meth!"sName Descripti!n Example Outputcharat1in"ex& It returns the character at specified index

$alue

s1.char/t(*% 6

c!ncat1string& It concat two strings. s*.concat(s1% md fero"

in"ex!7 1character& It returns the indexof the character specified s1.index(W6% *

lastin"ex1character& It returns the indexof last occurrence of the

character specified in a 4tring.

s1.lastIndex(Wo% )

slice1starten"& It returns the start and end specified

characters.

s1.slice(1!)% 62

split1character& It returns the string at specified split character s1.split(W6% :!2N

su2str1startlength& It returns the substring of arguments specified s1.substring(O!)% :62

t!l!9ercase1& It con$erts the upper case string to upper case s1.toLower5ase(% :ero"t!uppercase1& It con$erts the lower case string to upper case s).toCpper5ase(% 8//456I7T

charC!"e't1in"ex& 6eturns the Cnicode $alue of the character

7r!mCharC!"e1:alue8& 5on$erts the list of Cnicode $alues to a string

@rite a script to demonstrate string ob3ects methods

+script, $ar s1 A B62/L I#4TITCT 2: T5H /#0 45I#5BF

$ar s* A B@elcome to 8a$a4criptBF

document.writeln(B+H*,B%F

document.writeln(B5haracter at index O in B s1 Bis '&&B s1.char/t(O%%F document.writeln(B+br,5haracter code at index O in B s1 Bis '&&B s1.char5ode/t(O%%F

document.writeln(B+br,To Lower case is '&&B s1.toLower5ase(%%F

document.writeln(B+br,5oncat of s1 and s* is '&&B s1.concat(s*%%F document.writeln(B+br,substring of s* '&&B s*.substring()!%%F

+-script,

*+T

8/9/2019 02 JWT-UNIT-1

40/58

8/9/2019 02 JWT-UNIT-1

41/58

R representing hour.

setDate1& 4et the day of the month(1 to )1%

set/ull)ear1& 4ets the full year in local time

setH!urs1& 4ets the hours in local time

setMillisec!n"s1& 4ets the number of milliseconds in local time

setMinutes1& 4ets the minutes in local time

set,ec!n"s1& 4ets the seconds in local time

getTime1& 6eturns the number of milliseconds between 3an 1!1RO and the time in the

0ate ob3ect.

t!,tring1& 6eturns a string representation of the date and time locale to the system

t!L!cale,tring1& 6eturns a string representation of the date and time locale to the system

t!UT,tring1& 6eturns a string representation of the date and time. in the form of *P 8uly!*OOR

*O'1'>>

:alueO71& The time in numbers of milliseconds

+html,+head,

+title,0ate D Time +-title,

*+T

8/9/2019 02 JWT-UNIT-1

42/58

8/9/2019 02 JWT-UNIT-1

43/58

8/9/2019 02 JWT-UNIT-1

44/58

8/9/2019 02 JWT-UNIT-1

45/58

reuire additional support from applications or embedded controls to make changes. Typically! 0HTML

documents are self&contained! using styles and a script to process user input and directly manipulate the

HTML elements! attributes! styles! and text of the document.

In short! 0HTML eliminates the shortcomings of static pages. ou can create inno$ati$e @eb sites!

on the Internet or on an intranet! without ha$ing to sacrifice performance for interacti$ity. #ot only does

0HTML enhance the userXs perception of your documents! it also impro$es ser$er performance by

reducing reuests to the ser$er.

HTML DHTML

HTML is used to create static web pages 0HTML is used to create dynamic web pages

It consists of simple HTML tags It consist of HTML5448a$ascripts

It does not alter the text and graphics on web pages

unless web page gets changed

It does alter the text and graphics on web pages unless

web page gets changed

It is $ery simple to create but less interacti$e It is complex to create but more attracti$e

*'6',CRI4T O(*ECT MODEL 1(OM& 'ND COLLECTION

The central idea of ob3ect model is to create the ob3ects of some HTML elements! present them on

a webpage and retrie$ing the properties of the HTML elements to change the position on a web page

dynamically. The ob3ect reference can be created using&attribute and using the innerText property we

can access the corresponding HTML element.

*+T

@indow

document history screene$ent na$igator frames

8/9/2019 02 JWT-UNIT-1

46/58

8/9/2019 02 JWT-UNIT-1

47/58

8/9/2019 02 JWT-UNIT-1

48/58

emB idABhead1B,0ynamic 5olors+-h1,

+a hrefAB3a$ascript' change5olor(XredX%FB,60+-a,!

*+T

8/9/2019 02 JWT-UNIT-1

49/58

8/9/2019 02 JWT-UNIT-1

50/58

>O

+br,

+b,/ddress *'+-b, +input nameABaddress*B si"eAB*>B typeABtextB,

+br,+b,5ity'+-b, +input nameABcityB si"eAB1B typeABtextB,

+-di$,

+-form,

+-body,+-html,

DHTML Images

+html,+head,

+script typeABtext-3a$ascriptB,

ccAOFfunction changeimage(%

Eif (ccAAO%

E ccA1F

document.getlementyId(XmyimageX%.srcABfero"2ne.3pgBF

Gelse

E

*+T

8/9/2019 02 JWT-UNIT-1

51/58

>1

ccAOF

document.getlementyId(XmyimageX%.srcABfero".3pgBF

GG

+-script,

+-head,+body,

+img idABmyimageB onclickABchangeimage(%B borderABOB srcABfero".3pgB widthAB1OOB heightAB1POB -,

+p,5lick to turn on-off the light+-p,+-body,

+-html,

DHTML M!use E:ents

+html,

+head,

+script typeAJtext-3a$ascriptJ,function one(%

E myimg.srcAJ0'^fero"one^flower1.3pgJF

G

function two(%E

myimg.srcAJ0'^fero"one^flower*.3pgJF

G

+-script,+-head,

+body,

+center,+img id AJmyimgJ onmousedownAJone(%J onmouseupAJtwo(%J srcAJ0'^fero"one^flower*.3pgJ

heightAJ*OOJ widthAJ*OOJ-,

+p, 5lick this image to change it +-p,+-center,

+-body,

+-html,

DHTML ,tyles

The 4tyle of an HTML element on the web page can be changed dynamically when the user interactsthrough e$ents.

+HTML,+H/0,

+TITL,0ynamic 4tyles +-TITL,

+456I7T, function start(%

*+T

8/9/2019 02 JWT-UNIT-1

52/58

>*

E

$ar text A prompt(Bnter your nameB!BB%F

para.innerHTML A B@elcome &+u,+i, B textF G

+-456I7T,

+-H/0,+20 onloadABstart(%B 952L26AJcyanJ,

+5#T6,+h1 idABparaB,+-h1,

+-20,+-HTML,

DHTML 4!siti!ning- HTML elements can be positioned dynamically on a web page by using script.

+HTML,

+H/0,+TITL,0ynamic 7ositioning +-TITL,

+4TL,

.left E text&align'leftF G .right E text&align'rightF G

.middle E text&align'centerF G

+-4TL,

+456I7T, function start(%

E

$ar position A document.getlementyId(BpositionB%.$alueF para.class#ameApositionF

G

+-456I7T,+-H/0,

+20 952L26ABmagentaB,

+h1 idABparaB,0ymamic 7osition Text+-h1,

+br,+center,+select idABpositionB onchangeABstart(%B,

+option $alueABB,4LT /LI9#M#T...+-option,

+option $alueABleftB,L:T+-option,+option $alueABrightB,6I9HT+-option,

+option $alueABmiddleB,5#T6+-option,

+-select,+-20,

+-HTML,

*+T

8/9/2019 02 JWT-UNIT-1

53/58

>)

/ILTER, 'ND TR'N,ITION,

:ilters gi$e a great $ariety of $isual effects in the web pages dynamically and transitions gi$es

$ertical and hori"ontal blinds effects etc. we can also con$ert colored images to gray in response to user

actions and we can also create a shadows to a text to appears like three dimensional $iew.Filters and

Transitionare ,T)LEob3ect properties.

'":antages-

1. To achie$e special effects.

*. To be able to create animated $isual transitions between web pages.). To be able to modify the filters dynamically using 0HTML.

8; /lip /ilters -filphflipv Transparency 9ith the chroma7ilter-3 To get the mirror effects on text

or images we ha$e to use flip filters such as filph(hori"ontal%!flip$($ertical%.:ilters are applied in4TL attribute.

+T0 4TLAJfilter'fliphJ,M0 :62N+T0, :lip the text hori"ontally.

?; Image mask an" Image /ilters ' in!ert, gray and "ray' Image mask filter is used to create to

mask the image. /nd image filters in$ert! gray and ;ray are used to filters the images as negati$e

effect! gray scale image and in$ersion of gray scale image respecti$ely.

@; '""ing sha"!9 t! text - The shadow filter effects the text shadow around the text which gi$es the

)&dimensional appearance.

+HTML,+H/0,

+TITL, :ilters +-TITL,

+4TL, table E

font&si"e'*emF

border&style'groo$eF text&align'center

*+T

8/9/2019 02 JWT-UNIT-1

54/58

>S]S0r.4I6/8C00I#S

SOS]SMr.6/NIC00I#SSOPS]SM./ /THI:S

S1OS]SM0 :62N =H/#/#I

S*OS]S:/4IHC00I#SS)OS]S=H/8/ /:N/LC00I#S

S

8/9/2019 02 JWT-UNIT-1

58/58

>P

and in the database file(rits.txt% we ha$e mentioned two headers such as mpZId and mpZ#ame which

can be represented in 0HTML using the tag +param nameABCseHeaderB $alueABT6CB-,

In our program we used Tabular 0ata 5ontrol ob3ect which is an /cti$e; control which can be

used to bind the database file(rits.txt% and In the body section! we used the span element in which data

field is referred by "ata7l">EmpKName> which is mentined in our database file(rits.txt%.