wt+handout-1

7/23/2019 WT+Handout-1

1/16

M.Tech (SE) Java / Web Technologies -by Sreenivasulu Handout - 1

UNT -

NT!"#U$T"N%

HTML stands for Hyper Text Markup Language.HTML is a language for describing web

pages.HTML is a language for describing web pages.HTML instructions divide the text of a

document into blocks called elements.

An element in HTML represents some kind of structure or semantics and generally consists of a

start tag, content, and an end tag.The following is a paragraph element

!p" This is the content of the paragraph element. !#p"

Tags are used to mark up the start and end of an HTML element. A start tag consists of an openingangle bracket $!% followed by the element name, &ero or more space separated attribute#value pairs,

and a closing angle bracket $"%.

'xample( A start tag with no attributes !p"

'nd tags consist of an opening angle bracket followed by a forward slash, the element name, and a

closing angle bracket !#p"

An attribute defines a property for an element, consists of an attribute#value pair, and appears within

the element)s start tag. An element)s start tag may contain any number of space separated attribute#value pairs.

A markup language is a set of markup tags. HTML uses markup tags to describe web pages

*tructure of an HTML page

A HTML page has two sections $'lements% H'A+ , -+. The head is used for text and tags that

do not show directly on the page. The body is used for text and tags that are shown directly on thepage .

T/TL', M'TA are the 'lements that appear within H'A+ element.

The title of a webpage appears in your browser0s title bar when you view the page.

The M'TA element used in the H'A+ section is an empty element, i.e. the M'TA element consistsonly of an opening tag. The most important use for this element is to give the search engines somebasic information about your HTML document such as the most important keywords that appear

inside the document and a short description of the document0s content.

!meta name12keywords2 content12keyword3, keyword4, ...2"

M/M' types

The 5orld 5ide 5eb actually uses M/M' types $Multipurpose /nternet Mail 'xtension% to define

the type of a particular piece of information being sent from a 5eb server to a browser. A browserin turn determines, from the M/M' type, how the data should be treated.

#e&a'tent o no'ation Technolog* + J,ET


2/16


HTML Headings are defined with the !H3" to !H6" tags.!H3" defines the largest heading. !H6"

defines the smallest heading.

!H3"This is h3!#H3"

!H4"This is h4!#H4"!H7"This is h7!#H7"

!H8"This is h8!#H8"

!H9"This is h9!#H9"!H6"this is h6!#H6"

ists HTML supports ordered, unordered and definition ListsUno'de'ed istsTo create bulleted lists $:nordered Lists% we use a !ul" and a !#ul" tag at the beginning and theend of the list. List items are added using !li" and !#li" tags

'xample 3 $ Type the following code in ;ote pad editor , save as ex3.html and open in a browser%

!html"!body"

!h8"ranches Available!#h8"

!ul type12disc2"!li"


3/16


#einition ists is not a list of single items. /t is a list of items $terms%, with a description of eachitem $term%. A definition list starts with a !dl" tag $definition list%. 'ach term starts with a !dt" tag

$definition term%. 'ach description starts with a !dd" tag $definition description%

Ea&le%

!html"!body"

!dl"

!dt"


4/16


HTM agesTo embed an image into a web page, the image first needs to exist in either .Bpg, .gif, or .png format

To embed the image into your web page, use the !img #" tag,

!img src12image3.gif2 width123@@2 height123@@2 alt12/mage 3 2 #"

s'c (( >e=uired attribute. This is the path to the image. /t can be either an absolute path, or arelative path idth ((( This specifies the width to display the image. height (( This specifiesthe height to display the image. alt Alternate text. This specifies text to be used in case thebrowser#user agent canCt render the image.

0'aes%5ith frames, you can display more than one HTML document in the same browserwindow. 'ach HTML document is called a frame, and each frame is independent of the others.

The frameset $frameset3.html%

!html"!head"

!title"Drameset page!title"!#head"

!frameset cols 1 249, E2"

!frame src 12left.html2 #"!frame src 12right.html2 #"

!#frameset"!#html"

The left frame $left.html%

!html"!body style12background(colorgreen2"

!p"This is the left frame !#p"

!#body"!#html"

The right frame $right.html%

!html"

!body style12background(coloryellow2"!p"This is the right frame !#p"!#body"

!#html"

0o'sA form is an area that can contain form elements. Dorm elements are elements that allow the user toenter information . A form is defined using the !form"!#form" tags.

The n&ut TagThis is the most commonly used tag within HTML forms . /t allows you to specify various types ofuser input fields such as text, radio buttons, checkboxes etc.



5/16


TetText fields are used for when you want the user to type text or numbers into the form.

!input type12text2 "

Ea&le %

!html"!body"

!form action12MA/LT-g.sreenivasulu4Fgmail.com2 method12post2 enctype12text#plain2"

;ame !input type12text2 name12name2 si&e124@2" !br"e(mail !input type12text2 name12mail2 si&e124@2" !br"

eset2"

!#form"!#body"

!#html"

!adio ,utton>adio uttons are used when you want the user to select one of a limited number of choices.!form"

!input type12radio2 name12sex2 value12male2 #" Male

!br #"!input type12radio2 name12sex2 value12female2 #" Demale

!#form"

$hecboes


6/16


!select"

!option"


7/16


!link rel12stylesheet2 href12style.css2 type12text#css2"

nte'nal St*le SheetAn internal style sheet should be used when a single document has a uni=ue style. ou define

internal styles in the head section with the !style" tag.

!head"

!style type12text#css2"body Ibackground(color redK

p Imargin(left 4@pxK

!#style"!#head"

nline St*lesAn inline style should be used when a uni=ue style is to be applied to a single occurrence of an

element.

!p style12color red margin(left 4@px2"

This is a paragraph!#p"

$lass


8/16


classes.

#2The div element is the generic block element. ou can use div to apply styles to large sectionsof HTML, such as multiple paragraphs.!div style12color@@DD@@2"

!h7"This is a header!#h7"!p"This is a paragraph.!#p"

!#div"

S34N The span element is the generic inline element. :sed over a span.!p" My friend has !span *tyle 1 2colorlightskybluefont(weightbol2 "light blue!#span" eyes

$SS 3'o&e'tiesare divided into the below given logical groups

$SS 0ont 3'o&e'tiesThe


9/16


The


10/16


J424S$!3T

JavaSc'i&t is a new scripting language which is being developed by ;etscape.Oava*cript is acompact, obBect(based scripting language for 5eb pages

JavaSc'i&t and JavaAlthough the names are almost the same, Oava*cript isnCt the same as Oava. These are two different

techni=ues for /nternet programming. Oava is a real programming language, and you can create real

programs with it.Oava*cript is a scripting language. ou could even say that Oava*cript is rather anextension to HTML than a separate computer language. /tCs so tightly integrated with HTML that

you could call it 2Oava*cript markup language.2 Oava*cript coders donCt care too much about realprogramming, they Bust make different nice effects by inserting small Oava*cript code fragments

into their 5eb pages.

Oava*cript can be inserted into a HTML file by using !*/GT" tag or can be created as a sepetate

.5s file and can be inserted into the HTML

*sc'i&t.5s

function popup$% I

alert$2Hello 5orld2%K

'xample :sing external Oava*cript Dile!html"

!head"

!*/GT LA;N:AN'12Oava*cript2 *>


11/16


#ialog boesOava*cript has three kind of popup $dialog% boxes Alert box,


12/16


function disp$%

I

var name1prompt$2Glease enter your name2,2*reenivas2%if $nameR1null UU nameR122%

Idocument.write$2Hello 2 V name V 2R How are you todayW2%

K

K!#script"

!#head"

!body"!input type12button2 onclick12disp$%2 value12*how prompt box2 #"

!#body"!#html"

oo&ing and ,'anching%

o'loops allow a set of statements to be repeated or looped through a specified number of timesfor loop example

for $i13 i!13@ iVV% I

document.writeln$2i12 V i% K

hile loop allow a set of statements to be repeated or looped throughuntil a certain condition is met.

hile loop examplei 1 3while $i!19% I

document.write$2Xt2Vi%

i 1 i V 3 K

sitch statement

Sitchstatements are used to select which statements are to be executed depending on a variableCs

value matching a label.

ch1window.prompt$C'nter any number from 3 to 7C%

switch $ch% I

case C3C alert$C;umber entered is 3C% break case C4C alert$C;umber entered is 4C% break

case C7C alert$C;umber entered is 7C% break default alert$C;umber entered is not between 3 to 7 C%

K



13/16


JavaSc'i&t 0unctionsA function contains code that will be executed by an event or by a call to the function.

*yntaxfunction functionname$var3,var4,...,var?%

I

some codeK

'xample!html"

!head"!script type12text#Bavascript2"

function product$a,b%

Ireturn aEb

K!#script"

!#head"

!body"!script type12text#Bavascript2"

document.write$product$8,7%%!#script"

!#body"

!#html"

Ea&leThis is a very simple script. /t opens up an alert message box which displays whatever is typed in

the text box.

!HTML"

!H'A+"!*/GT LA;N:AN'12Oava*cript2"

function Msgox $textstring% I

alert $textstring% K

!#*/GT"!#H'A+"

!-+"

!D->M"!/;G:T ;AM'12text32 TG'1Text"

!/;G:T ;AM'12submit2 TG'1utton JAL:'12*how Me2on


14/16


Ea&le% To $hange ,acg'ound $olo' o the &age on button $lic.!HTML"

!H'A+"!*/GT LA;N:AN'12Oava*cript2"

function changecolor$code% Idocument.bg'+2 onclick12changecolor$CredC%2"

!input type12button2 name12utton42 value12N>'';2 onclick12changecolor$CgreenC%2"!input type12button2 name12utton72 value12L:'2 onclick12changecolor$CblueC%2"

!input type12button2 name12utton82 value125H/T'2 onclick12changecolor$CwhiteC%2"

!#form"!#-+"

!#HTML"

!HTML"

!H'A+"!*/GT"

function get*elect$s% Ireturn s.optionsYs.selected/ndexZ.value

K

!#*/GT"!#H'A+"

!-+"!D->M"

!*'L''

!-+"

Try inputting a value less than &ero!D->M"

!/;G:T TG'12text2 onlur12validate$this.value%2"!#D->M"

!#-+"

!#HTML"

!html"

!head"!script language12Bavascript2"

function show'lement$%I

var txt1document.get'lementy/d$2txt2%

alert$txt.value% var t1document.get'lementsy;ame$2txt2%

alert$t.value%K

!#script"

!#head"!body"

!input type12text2 name12txt2 id12txt2"!br"!br"!input type12button2 value12'nter Text and


16/16


document.write$str.toLowerL%document.writeln$document.domain%

document.writeln$document.anchors.length% ## will give no of anchor elemets

document.bg

wt+handout-1

Documents