UNIT – I Introduction: HTML stands for Hypertext Markup Language.

It is used to display the document in the web browsers. HTML pages can be developed to be simple text or to be complex multimedia program containing sound, moving images and java applets. HTML is considered to be the global publishing format for Internet. It is not a programming language. HTML was developed by Tim Berners-Lee. HTML standards are created by a group of interested organizations called W3C (world wide web consortium). In HTML formatting is specified by using tags. A tag is a format name surrounded by angle brackets. End tags which switch a format off also contain a forward slash. • • • • • Points to be remembered for HTML tags: Tags are delimited by angled brackets. They are not case sensitive i.e., <head>, <HEAD> and <Head> is equivalent. If a browser not understand a tag it will usually ignore it. Some characters have to be replaced in the text by escape sequences. White spaces, tabs and newlines are ignored by the browser.

Structure of an HTML document: All HTML documents follow the same basic structure. They have the root tag as <html>, which contains <head> tag and <body> tag. The head tag is used for control information by the browser and the body tag contains the actual user information that is to be displayed on the screen. The basic document is shown below. <html> <head> <title> Basic HTML document </title> </head> <body> <h1> Welcome to the world of Web Technologies</h1> <p> A sample HTML program written by Amer </p> </body> </html>

w w

jn . w

w tu

r o

. ld

m co

Besides head and body tag, there are some other tags like title, which is a sub tag of head, that displays the information in the title bar of the browser. <h1> is used to display the line in its own format i.e., bold with some big font size. <p> is used to write the content in the form of paragraph. Comments in HTML documents start with <! and end with >. Each comment can contain as many lines of text as you like. If comment is having more lines, then each line must start and end with -- and must not contain -- within its body. <! -- this is a comment line - -- which can have more lines - ->

Basic HTML tags 1. Body tag : Body tag contain some attributes such as bgcolor, background etc. bgcolor is used for background color, which takes background color name or hexadecimal number and #FFFFFF and background attribute will take the path of the image which you can place as the background image in the browser. <body bgcolor=”#F2F3F4” background= “c:\amer\imag1.gif”> 2. Paragraph tag: Most text is part of a paragraph of information. Each paragraph is aligned to the left, right or center of the page by using an attribute called as align. <p align=”left” | “right” | “center”> 3. Heading tag: HTML is having six levels of heading that are commonly used. The largest heading tag is <h1> . The different levels of heading tag besides <h1> are <h2>, <h3>, <h4>, <h5> and <h6>. These heading tags also contain attribute called as align. <h1 align=”left” | “right” | “center”> . . . . <h2> 4. hr tag: This tag places a horizontal line across the system. These lines are used to break the page. This tag also contains attribute i.e., width which draws the horizontal line with the screen size of the browser. This tag does not require an end tag. <hr width=”50%”>. 5. base font: This specify format for the basic text but not the headings. <basefont size=”10”> 6. font tag: This sets font size, color and relative values for a particular text. <font size=”10” color=”#f1f2f3”> 7. bold tag: This tag is used for implement bold effect on the text <b> ……. </b> 8. Italic tag: This implements italic effects on the text. <i>…….</i> 9. strong tag: This tag is used to always emphasized the text <strong>……….</strong>

w w

jn . w

w tu

r o

. ld

m co

10. tt tag: This tag is used to give typewriting effect on the text <tt>……..</tt> 11. sub and sup tag: These tags are used for subscript and superscript effects on the text. <sub> ……….</sub> <sup>………..</sup> 12. Break tag: This tag is used to the break the line and start from the next line. <br> 13. &amp &lt &gt &nbsp &quot These are character escape sequence which are required if you want to display characters that HTML uses as control sequences. Example: < can be represented as &lt.

14. Anchor tag: This tag is used to link two HTML pages, this is represented by <a> <a href=” path of the file”> some text </a> href is an attribute which is used for giving the path of a file which you want to link. Example 1: mypage.html <html> HTML code to implement common tags.

<head> <! -- This page implements common html tags --> <title> My Home page </title> </head> <body >

w w

jn . w

w tu

r o

. ld

m co

<h1 align="center"> GREEN FORT ENGINEERING COLLEGE</h1> <h2 align="center"> Bandlaguda, Hyderabad</h2> <basefont size=4> <p> This college runs under the <tt>management</tt> of <font size=5> <b><i>&quot Syed Hashim Education Society&quot &amp it is</i></b></font><br> affiliated to <strong> JNTU</strong> <hr size=5 width=80%> <h3> <u>&ltSome common tags&gt</u> </h3><br>

numbered list and a definition list. ld m co ..</li> The ordered(numbered) and unordered(bulleted) lists are each made up of sets of list items. </dl> This tag is used for the third category i.</ol> This tag is used for unordered list which uses a number in front of each list item or it uses any element which is mentioned in the type attribute of the <ol> tag. <ol type=”1” | ”a” | “I” start=”n”>….. bulleted list.<a href="F:\feroz\wtlab\prog1\list.. Lists can be easily embedded easily in another list to provide a complex but readable structures.. Lists provides straight forward index in the web site..html"> Table </a><br> </body> </html> Lists: One of the most effective ways of structuring a web site is to use lists. <dd> ….e.. Example 2: HTML code showing list tags. HTML provides three types of list i.</dd> This is a sub tag of the <dd> tag. The different tags used in lists are explained below.</dt> This is a sub tag of the <dl> tag called as definition term. w w tu r o . <dl>…. definition of the terms are enclosed within these tags. <html> <head> <title> list page </title> </head> w w jn .e. where numbers or bullet is not used in front of the list item. This tag is used to write list items <ul type=”disc” | “square” | ”circle” > …. definition list. <li> …. <dt>…. which is used for marking the items whose definition is provided in the next data definition.html"> List </a><br> <a href="F:\feroz\wtlab\prog1\table.. start attribute is used for indicating the starting number of the list.</ul> This tag is used for basic unordered list which uses a bullet in front of each tag. The definition may include any text or block. every thing between the tag is encapsulated within <li> tags. instead it uses definition for the items.

ld m co . The main use of table is that they are used to structure the pieces of information and to structure the whole web page. <th>……</th> This is again a sub tag of the <tr> tag.<body> <h3> Course details </h3><br> <ul type="disc"> <li> Computer Science and Engineering </li> <li> Information Technology</li> <li> Electronics and Communication </li> </ul><br> <ol type="I" start=4> <li> Mechanical Engineering</li> <li> Electronics and Electrical Engineering</li> </ol><br> <h3> Subject Details </h3><br> <dl> <dt> Web Technologies</dt> </dl> </body> </html> <dd> This subject is related to the technologies used in web applications</dd> <a href="d:\feroz\gfec\wtlab\asgm1.. Tables are find all over the web application. </tr> This is the sub tag of <table> tag. This tag is used to show the table heading . The attributes of the table will control in formatting of the table. Below are some of the tags used in table. <table align=”center” | “left” | “right” border=”n” width=”n%” cellpadding=”n” cellspacing=”n”>………………</table> Every thing that we write between these two tags will be within a table. Width attribute sets the amount of screen that table will use. each row of the table has to be delimited by these tags. Cell padding determines how much space there is between the contents of a cell and its border. <tr> ….html">back</a> Tables: Table is one of the most useful HTML constructs. w w tu r o . cell spacing sets the amount of white space between cells. w w jn .

Browsers display a limited range of image types. Images are one of the aspect of web pages. elements and links.</td> This tag is used to give the content of the table.<td>…. alink the color of a currently active link. To change the color of links or of the page background hexadecimal values are placed in the <body> tag.. then download time becomes intolerable. Example 3: HTML code showing the use of table tag <html> <head> <title> table page</title> </head> <body> <table align="center" cellpadding="2" cellspacing="2" border="2"> <caption>Time for III year IT</caption> <tr><th> I period </th> <th> II peiord> </th> </tr> <tr> <td> wt </td> <td> uml</td> </tr> </table> </body> </html> Color and Image: Color can be used for background. <body bgcolor = “#nnnnnn” text = “#nnnnnn” link= “#nnnnnn” vlink= “#nnnnnn” alink = “#nnnnnn”> The vlink attribute sets the color of links visited recently. The six figure hexadecimal values must be enclosed in double quotes and preceded by a hash(#). and if too many images are used. ld m co . w w jn . w w tu r o . Loading of images is a slow process.

</frameset> <frame name=”name” src=”filename” scrolling =” yes” | “no” frameborder =”0”|”1”> .. When we talk about frames actually we are referring to frameset. which appears in the body of the text rather than on the whole page is given below <img src=”URL” height=”n” width=”n” align = “top” | “center” | “bottom” > Example 4: HTML code that implements color and image <html> <head> <! -. frameset and frame <frameset cols=” % .e. each of which is displayed inside a separate frame. which is a special type of web page.gif”> </body> </html> Example 5: HTML code that implements background image <html> <head> <! -. %” | rows=” % . w w tu r o .. ld m co Frames: Frames provide a pleasing interface which makes your web site easy to navigate. The frameset contains a set of references to HTML files.This page implements color and image --> <title> My Home page </title> </head> <body bgcolor="gray" text="magneta" vlink="yellow" alink="brown"> <img src= ”d:\feroz\gfec\wtlab\asgm1. There are two tags related to frames i. Another tag that displays the image in the web page.This page implements background image --> <title> My Home page </title> </head> <body background=”d:\feroz\gfec\wtlab\asgm1.gif "> </body> </html> w w jn . %”>…….<body background = “URL”> This tag will set a background image present in the URL.

The tags used inside the form tag are: <input type = “text” | “password” | “checkbox” | “radio” | “submit” name=”string” value=”string” size=”n”> In the above tag. w w tu r o . They are usually used to let the user to send information back to the server but can also be used to simplify navigation on complex web sites. Checkbox: It provides a simple checkbox. Password: It works exactly as text. and it is more secure than get. Post can be used to send large amount of data. the data is included as part of the URL. radio and submit button. The post method encodes the data within the body of the message. Radio: This creates a radio button. Submit: This creates a button which displays the value attribute as its text. ld m co . but the content is not displayed to the screen. Text: It is used to input the characters of the size n and if the value is given than it is used as a default value.</form> When get is used.</select> This tag helps to have a list of item from which a user can choose. It uses single line of text. instead an * is used. Each component can be given a separate name using the name attribute. It is used to send the data to the server. <option value=”string” selected>……</option> The select statement will have several options from which the user can choose. The values will be displayed as the user moves through the list and the chosen one returned to the server. password. w w jn . checkbox. They are always grouped together with a same name but different values.Forms: Forms are the best way of adding interactivity of element in a web page. <forms action=”URL” method = “post” | “get”>…….. where all the values can be selected unlike radio button. The name of the particular select tag and the name of the chosen option are returned. the attribute type is used to implement text. <select name=”string”>…. The tags that use to implement forms are as follows.

E <input type="radio" name="g" value="f">Female <option value=cse selected>CSE <option value=it>CSIT </select> <p <p align="left">Qualification: <br><input type="checkbox" name="q" value="be">B.</textarea> This creates a free format of plain text into which the user can enter anything they like.<textarea name=”string” rows=”n” cols=”n”>……. w w tu r o . The area will be sized at rows by cols but supports automatic scrolling. Example 6: HTML code that implements forms <html> <head> <title>form</title> </head> <body> <p align="left">Name:<input type="text" maxlength=30 size=15> <p align="left">Password:<input type="password" maxlenght=10 size=15> <input type="checkbox" name="q" value="me">M.E <p align="left">Gender:<br> <input type="radio" name="g" value="m">Male <p align="left">course:<select name="course" size=1> scrolling=yes></textarea> <p align="center"><input type="submit" name="s" value="Accept"> <p align="center"><input type="reset" name="c" value="Ignore"> </body> </html> Example 7: HTML code that implements frames <html> <head> <title> My page </title> </head> w w align="left">Address:<br><textarea jn . ld m co cols=5 name="addr" rows=4 .

The declaration has two parts: a property and a value. A style has two parts: a selector and a set of declarations. Declarations must be separated using colons and terminated using semicolons.html"> <frameset cols="25%.50%"> <frame name="b" src="f:\feroz\wtlab\index. • Style can be defined within the basic HTML tag.} jn . property: value …….<frameset rows="25%.html"> <frame name="abc" src="f:\feroz\wtlab\welcome. There are three mechanisms by which we can apply styles to our HTML documents.html"> </frameset> </frameset> </html> Cascading Stylesheets: One of the most important aspects of HTML is the capability to separate presentation and content. A style is simply a set of formatting instructions that can be applied to a piece of text. The selector is used to create a link between the rule and the HTML tag. Font-style: normal | italic | oblique Font-weight: normal | bold | bolder | lighter Font-size: small | medium | large | smaller | larger Backgrounds and Colors Color: value Background-color: value Background-image: URL Text Text-decoration: none | underline | overline Text-transformation: none | uppercase | lowercase Text-align: left | right | center | justify w w Selector{property: value. • Style can be defined in the <head> tag • Styles can be defined in external files called stylesheets which can then be used in any document by including the stylesheet via a URL. w w tu r o . Properties and values in styles: Fonts: Font-family: <family name.50%"> <frame name="a" src="f:\feroz\wtlab\asgm1. ld m co .

m{border-width:thick. ld m co UNIT II .text-decoration:link. <p class="mid">Jawaharlal Technological University Hyderabad</p> w w jn .mid{font-family:BankGothicLtBT.font-style:italic.Text-indentation : length | percentage Example 7: HTML code representing cascading style sheet <html> <head> <title>My Web Page</title> <style type="text/css"> h1{font-family:mssanserif.border-color:red.color:red.border-style:dashed} text-indentation:60%} </style> </head> <body class="m"> <h1> Green Fort Engineering College</h1> </div> </body> </html> .border:thin groove} .font-size:30.fontweight:bold.background-color:blue.texttransformation:uppercase. w w tu r o .

• It is widely supported in browser • It gives easy access to document object and can manipulate most of them.alert(agent+" "+major).toLowerCase(). Dynamic HTML is a combination of content formatted using HTML. JavaScript originates from a language called LiveScript. var minor=parseInt(navigator. but we require a language that is dynamic in nature to develop web pages a client side. The set of tokens and constructs are same in both the language.write(agent+" "+major).appVersion). The syntax of both the language is very close to each other. a scripting language and DOM. } function farewell() { window. w w jn . var agent=navigator. JavaScript is a simple language which is only suitable for simple tasks. Benefits of JavaScript Following are some of the benefits that JavaScript language possess to make the web site dynamic. window. The idea was to find a language which can be used at client side. cascading stylesheets. document. but not complicated as Java. • Special plug-in are not required to use JavaScript • JavaScript is secure language JavaScript code resembles the code of C language. w w tu r o . ld m co .appVersion).userAgent. Example 8: A Sample JavaScript program <html> <head><title>java script program</title> <script languague="javascript"> function popup() { var major=parseInt(navigator.Introduction to JavaScript A number of technologies are present that develops the static web page. • JavaScript can give interesting animations with many multimedia data types.alert("Farewell and thanks for visiting").

toUpperCase()).} </script> </head> <body onLoad="popup()" onUnload="farewell()"> </body> </html> • • • • • JavaScript program contains variables. document. Script does not require main function and exit condition.toUpperCase()).pr. document. Functions have parameters which are passed inside parenthesis Variables are declared using the keyword var. Each line is terminated by a semicolon. Blocks of code must be surrounded by curly brackets. is :</h2>"+ rno. sname=prompt("Enter your Name"). } </script> w w jn . document.toUpperCase()). ld m co .writeln("<h2> Your Branch Name is :</h2>"+br. Example 9: JavaScript program that shows the use of variables. datatypes <html> <head> <script languate="javascript"> function disp() { <title> My Sample JavaScript program</title> var rno. rno=prompt("Enter your registration number"). document. objects and functions. w w tu r o .br.close(). br=prompt("Enter your branch Name").writeln("<h2> Your Overall Percentage is :</h2>"+pr).writeln("<h2> Your Registration No.writeln("<h2> Your Name is :</h2>"+sname. document. pr=prompt("Enter the percentage").sname.

but uses the concept of objects. } return(f). document.close(). Objects can have functions and variables. To differentiate between global w w jn . <body> <script language="javascript"> function fact(n) { var i. ld m co .i<=n.writeln("Factorial of "+x+" is "+f). The new keyword used here is to create an object. </script> </body> </html> Objects in JavaScript JavaScript is not a pure object oriented programming language. w w tu r o . for(i=1.</head> <body onLoad="disp()"> </body> </html> Example 10: JavaScript program showing the using of constructs <html> <head> <title> Factorial</title> </head.n. } var x.f=1.i++) { f=f*i. f=fact(x). x=prompt("Enter the number"). document.f. it allocates memory and storage.

} </script> </head. Example 11: JavaScript program using objects <html> <head> <script language=”javascript”> function demo1() { Popup(“Hello”). ld m co Regular Expression A script language may take name data from a user and have to search through the string one character at a time. a dot is placed between the object name and the property. When referring to a property of an object. alert(obj.y=y.x=x. 4). Obj= new sample (2.variables and those which are part of an object but may have the same name. w w tu r o . The usual approach in scripting language is to create a pattern called a regular expression which describes a set of characters that may be present in a string.y). . var string = “can you find the target”. JavaScript uses this keyword. whether a method or a variable. var pattern = “target”.y) { this. <body onLoad=”demo1( )”> </body> </html> w w jn .x + obj. this. } function sample(x.

var msg=” Have you met Amer recently”. Dynamic patterns are created using the Example 12: JavaScript code to implement RegExp <html> <head> <body> <script language=”javascript”> var re = new RegExp(“[A | a]mer”).exec(string). var string = “can you find the target”. pattern. } else { alert(“ I didn’t find it”).match(pattern). search(pattern) w w jn .string. regex = new RegExp(“feroz | amer”). var pattern = new RegExp(“target”). Regular expression is a javascript object.exec(msg). keyword new. ld m co . var res= re. w w tu r o . if(res) { alert( “ I found “ + res[0]). replace(pattern1. as shown below. Class String functions match(pattern) This function searches a matching pattern. pattern2) Searches for pattern1. Returns array holding the results. If the search is successful pattern1 is replaced with pattern2. But the above code can also be written using regular expression as a parameter. } </script> </body> </html> Functions: Regular Expressions are manipulated using the functions which belong to either the RegExp or String class.

write("Candidate name is : "+c1).value.c. t2. The document has a number of properties that can be accessed by JavaScript programs and used to manipulate the content of the page. t2. The form object Two aspects of the form can be manipulated through JavaScript.js function validate() { var t1=document.write(“<body>”). Document. If the search fails. Write or writeln Html pages can be created using JavaScript. t2. Example 13: Validate. the index of the start of the match is returned. ld m co .document.write(“<h1> Hello </h1>”).write("</body>"). Returns an array test(string) Searches for a match in its parameter string. Second you can actually build forms through JavaScript.Searches for a pattern in the string. Document. var t2=parent.bg. Class RegExp functions exec(string) Executes a search for a matching pattern in its parameter string.close(). t2. First. the data that is entered onto your form can be checked at submission.open().forms[0]. Built in objects: The document object A document is a web page that is being either displayed or created. most commonly and probably most usefully.frames['f4']. the function returns -1. If the match is successful.write("<body bgcolor="+bg1+">").value.elements. holding the results of the operation. This is done by using the write or writeln methods of the document object. } w w jn . otherwise returns false. Returns true if a match is found. w w tu r o . var bg1=t1. var c1=t1. t2.

Date(year.js"> </script> </head> <body> <form> Background Color: <input type="text" size=16 name="bg" value="white"> Candidate's name:<input type="text" size=16 name="c"> <input type="button" value="showit" onClick="validate()"> </form> </body> </html> The browser object Some of the properties of the browser object is as follows Navigator.Mypage. second]) Create a new Date object based upon numerical values for the year. month and day. ld m co Construct an empty date object. Navigator.appCodeName The internal name for the browser. The Date object JavaScript provides functions to perform many different date manipulation. Optional time values may also be supplied. month.appVersion This is the public name of the browser. platform on which the browser is running. getDate( ) Return the day of the month getDay( ) Return an integer representing the day of the week.appVersion The version number. Date( ) w w jn .userAgent The strings appCodeName and appVersion concatenated together. getFullYear( ) .html <html> <head> <script language = "javascript src= "D:\Documents and Settings \ Amer\ Desktop \ amer\ p6 \ validate. day [. Navigator. w w tu r o . minute.hour. Navigator. Some of the functions are mentioned below.

Event Blur Change w w w jn . The table below shows event. Events: JavaScript is a event-driven system. A form elementor a link is clicked twice in rapid succession Input focus is given to an element. The reverse of blur A key is pressed but not released . event handler and the description about the event handler. getSeconds( ) Return the second field of the Date object. toString( ) Returns the Date as a string. day]) Set the year value of the object. Nothing happens unless it is initiated by an event outside the script. getMinutes( ) Return the minutes field of the Date object. setDate(day ) Set the day value of the object.Return the year as a four digit number. Accepts values in the range 1 to 31. The value of a field in a form has been changed by the entering or deleting data. usually when moving from a field of a form or from the form itself. ld m co onChange Click Double click Focus Keydown onClick onDblClick onFocus onKeyDown Description The input focus is moved from the object. The mouse is clicked over an element of a page. Optionally also sets month and day values. getHours( ) Return the hour field of the Date object. Handler onBlur w tu r o .month. setFullYear( year [.

*"> <frame name="f1" src=""> <frameset cols="20%. Example 14. Following program shows the validation of data which uses two frames.html"> </frameset> </frameset> </frameset> </html> w w jn . One common request is for a way of validating the username and password.html"> <frame name="f4" src="D:\Documents and Settings\Amer\Desktop\amer\p6\profile. JavaScript code for data validation Mypage.*"> <frame name="f3" src="D:\Documents and Settings\Amer\Desktop\amer\p6\reg. ld m co .html <html> <head> <title>frame page </title> </head> <frameset rows="20%. A pressed key is released The page is loaded by the browser A mouse button is pressed The mouse is moved The mouse pointer moves off an element The mouser pointer moved over an element A window is moved A window is resized A form is submitted The user leaves the web page. in one frame user is going to enter the data and in the other frame equivalent result is going to be displayed.Keypress Keyup Load Mousedown Mousemove Mouseout Mouseover Move Resize Submit Unload onKeyPress onKeyUp onLoad onMouseDown onMouseMove onMouseOut onMouseOver onMove onResize onSubmit onUnload A key is pressed. Dynamic HTML with JavaScript Data Validation Data validation is the common process that takes place in the web sites. w w tu r o .*"> <frame name="f2" src=""> <frameset cols="50%.

write("<body bgcolor="+bg1+">"). ld m co . t2. var c1=t1.open().Myform. var t2=parent.html <html> <head> <script language = "javascript" src = "D:\ Documents and Settings \ Amer\ Desktop\ amer\ p6\ validate.value.document.js"> </script> </head> <body> <form> Background Color: <input type="text" size=16 name="bg" value="white"> Candidate's name:<input type="text" size=16 name="c"> <input type="button" value="showit" onClick="validate()"> </form> </body> </html> Validate.bg. w w tu r o .forms[0].close().js function validate() { var t1=document.frames['f4']. t2. t2. } w w jn . t2.elements. t2.value. var bg1=t1.write("</body>").c.write("Candidate name is : "+c1).

A well formed document is one which follows all of the rules of XML. There are many languages which shows how the data is displayed but no one describes what the data is. XML should also conforms the rules set out in the DTD. Tags are matched and do not overlap. A valid XML document has its own DTD. XML is a subset of SGML. Example 15. It is also serves as version declaration and says that the file is XML. which are often called as tags. Sample XML program <?xml version=”1. w w tu r o . There are many XML parsers that checks the document and its DTD XML elements w w jn . XML is used to describe the structure of a document not the way that is presented. The first line is the processing instruction which tells applications how to handle the XML.UNIT III XML: Defining Data for Web Applications The markup language developed to add structural and formatting information to data and which was designed to be simple enough to be included in any application that language is Standard Generalized Markup Language and was adopted as standard by International Organization for Standardization(ISO). XML is the recommendation of World Wide Consortium (W3C). Markup is nothing but instructions. This is the point at which XML enters. ld m co . and the document contains an XML declaration.0”?> <college> <studdetail> <regno>05j0a1260</regno> <name> <firstname>feroz></firstname> <lastname>amer</lastname> </name> <country name="india"/> <branch>csit</branch> </studdetail> </college> Valid an Well Formed XML XML documents may be either valid or well formed. empty elements are ended properly. The structure of basic XML is shown below which resembles HTML.

.-> Processing Instructions: Processing Instructions are used to control applications. The statement that includes DTD in XML file is <?DOCTYPE cust SYSTEM “customer. Where the content of the tag is missing. Most of the markup in an XML document is element markup. Control Information There are three types of control information i.-comment text . ld m co . it appears as <content/> Attributes: Sometimes it is important that elements have information associated with them without that information becoming a separate element. and entities.XML documents are composed of three things i. The DTD is usually present in separate file. they don’t have content.. Example 16: A Complete XML program <?xml version=”1. Unlike HTML these must be properly nested and closed in the reverse of the order in which they were opened. processing instructions.0”?> <!DOCTYPE stud S?YSTEM “student.0”> Document Type Declarations: Each XML document has an associated DTD. One of the processing instructions is <?xml version=”1. and document type declaration. elements. Empty tags: Some tags are empty. w w tu r o . comments.dtd”> Entities Entities are used to create small pieces of data which you want to use repeatedly throughout your schema.dtd”> <college> <studdetail> <regno>05j0a1260</regno> <name> w w jn . so that it can be used by many files. control information. Case Sensitive: XML is case sensitive and you must use lower case for your markup. again unlike HTML. Each XML tag has to have a closing tag. They take the form as <!.e. Comments: XML comments are exactly same as HTML. Each document has a single root element which contains al of the other markup. Elements are surrounded by tags much as they are in HTML. Nesting tags: Even the simplest XML document has nested tags.e.

DTD are document centric. country. XML schema is itself an XML application which means when you use it your only need a single grammar and can use your normal XML editor to create it..<firstname>feroz></firstname> <lastname>amer</lastname> </name> <country name="india"/> <branch>csit</branch> </studdetail> </college> Document Type Definition Document type definition have been successfully used in SGML applications for many year. w w tu r o .”> <xsd:element name = “college”> <xsd:complexType> <xsd:sequence> .. Example 17: XML Schema for XML document shown in Example 14 <?xml version =”1. They are well understood.. There are plenty of tools that support DTD DTD for the XML document shown in the Example 15 is as follows <!ELEMENT college(studetail+)> <!ELEMENT studetail(regno.... lastname)> <!ELEMENT firstname(#PCDATA)> <!ELEMENT country(#PCDATA)> <!ELEMENT lastname(#PCDATA)> XML Schema w w <!ATTLIST country name CDATA #REQUIRED> <!ELEMENT branch(#PCDATA)> jn . ld m co W3C developed a technology called XML schema which they accepted as a recommendation. name+... branch)> <!ELEMENT regno(#PCDATA)> <!ELEMENT name(firstname.0” ?> <xsd:schema xmlns =” http://.

w w jn . SAX-based parsers run quickly. The views XML document as trees.e.<xsd:element name = “studetail”> <xsd:complexType> <xsd:sequence> <xsd:element name = “regno” type = “xsd:string”/> <xsd:element name = “name”> <xsd:complexType> <xsd:sequence> <xsd:element name = “firstname” type=”xsd:string”/> <xsd:element name= “lastname” type = “xsd:string”/> <xsd:element name = “country”> <xsd:complexType> <xsd:attribute name = “India” type= “xsd:string”/> </xsd:complexType> </xsd:element> xsd:element name = “branch” type = “xsd:string”/> </xsd:sequence> </xsd:complexType> </xsd:element> </xsd:sequence> </xsd:complexType> </xsd:element> </xsd:sequence> </xsd:complexType> </xsd:element> </xsd:schema> Document Object Model XML parsers can handle documents in any way that their developers choose. add new elements. The DOM API specifies the logical structure of XML documents and the ways in which they can be accessed and manipulated. It is also scriptable so applications can manipulate the individual nodes. and modify the content of existing elements. DOM-complaint applications include all of the functionality needed to handle XML documents. They can build static documents.. The DOM API is just a specification. The DOM exposes the whole of the document to applications. ld m co . w w tu r o . SAX and DOM. DOM is and application program interface (API) for XML documents. delete elements. navigate and search through them. This type of parsers are usually used with java. SAX parsers are used when dealing with streams of data. There are two models commonly used for parsers i.

They create a style for a specific XML element. ld m co <xsl:value-of select=”country/@name” /> <xsl:value-of select = “branch”/> </xsl:for-each> </xsl:for-each> </body> </xsl:template> </xsl:stylesheet> .e.xsl”?. Here goes the XSL file <xsl:stylesheet smlns:xsl =”uri:xsl”. <xsl:for-each select = “college”> <xsl:for-each select = “studetail”> <xsl:for-each select = “name”> <xsl:value-of select = “regno”/> </xsl:for-each> w w <xsl:value-of select = “firstname”/> <xsl:value-of select = “lastname”/> jn . XSL basically transforms one data structure to another i. with XSL a template is created. <xsl:template match=”/”> <html> <body> <h1> Student Database </h1. Example 18: Here is the XSL file for the XML document of Example 14 This line must be included in the XML document which reference stylesheet <?xml:stylesheet type = “text/xsl” href = “student. w w tu r o . XSL stylesheet are not the same as HTML cascading stylesheets. XML to HTML..Presenting XML XML documents are presented using Extensible Stylesheet which expresses stylesheets.

One example of this is a button on a graphical user interface. the java beans technology could not operate. This is a very important feature of Java Bean API. The configuration settings of a bean can be saved in persistent storage and restored at a later time. The properties. Design pattern for properties Property is a subset of a bean’s state. Public void setN( ). w w tu r o . Public T getN( ). A bean may be visible to an end user. such as forecasting the performance of a stock portfolio. Auxiliary software can be provided to help a person configure a bean.UNIT IV JAVA BEANS Introduction to Java Beans A Java Beans is software component that has been designed to be reusable in a variety of different environments. ld m co . such as checking the spelling of a document. events and methods of a bean that are exposed to an application builder tool can be controlled. It may perform simple function. There is no restriction on the capability of a Bean. BDK Introspection Introspection is the process of analyzing a bean to determine its capabilities. or complex function. It can be identified by the following design patterns. A bean may register to receive events from other objects and can generate events that are sent to other objects. which makes it useful in global markets. Without introspection. because it allows an application builder tool to present information about a component to a software designer. A bean may be designed to operate correctly in different locales. w w jn . The values that are assigned to the properties determine the behavior and appearance of that component. where N is the name of the property and T is its type. One way exposed the properties. run-anywhere” paradigm. Simple properties: A simple property has a single value. Advantages of Java Beans • • • • • • A bean obtains all the benefits of Java’s “write once. events and methods of bean to application builder tool is using simple naming conventions. A bean may be designed to work autonomously on a user’s workstation or to work in cooperation with a set of other distributed components.

Example 17: Application that uses TickTock bean to automatically control the Color bean Steps: Using BeanInfo Interface This interface defines several methods. Public Boolean isN ( ). Go to menu bar of the bean box and select Edit | Events | propetyChange. Public void setN(Boolean value). Public void setN(T values[ ]). where N is the name of the property and T is its type. Using Bound Properties A bean that has a bound property generates an event when the property is changed. We can extend this class and override on or more of them. w w 1. The event is of type PropertyChangeEvent and is sent to objects that previously registered an interest in receiving such notifications. w w tu r o . events. ld m co . 3. Move the cursor so that it is inside the Colors bean display area .Boolean properties: A Boolean property has a value of true or false. Public T[ ] getN( ). Indexed properties An indexed property consists of multiple values. Public void setN(int index. Public Boolean getN( ). the dialog box allows your to choose a method that should be invoked when this event occurs. and methods of bean. jn . Select the entry labeled “change” and click the Ok button. including the three methods just shown. including these: PropertyDescription[ ] getPropertyDescriptors( ) EventSetDescriptor[ ] getEventSetDescriptors( ) MethodDescriptor[ ] getMethodDescriptors( ) The above methods will return array of objects that provide information about the properties. SimpleBeanInfo is a class that provides default implementations of the BeanInfo interface. Public T getN(int index). where N is name of the property. We can now see a line extending from the button to the cursor 2. and click the left mouse button. It can be identified by the following design patterns. It can be identified by the following design patterns. See the Event Target Dialog dialog box. T value).

It is sent to objects that previously registered an interest in receiving such notifications. Methods in this interface allow a bean to execute in environments where graphical user interface is not available. Customizers A bean developer can provide a customizer that helps another developer configure this software. This event is generated when bound or constrained properties are changed. The event is of type PropertyChangeEvent. This class is used to obtain information about a Bean An exception of this type is generated if a problem occurs when analyzing a bean. events and methods of a Bean. A customizer can provide a step-by-step guide through the process that must be followed to use the component in a specific context. r o . ld m co Class BeanDescriptor Beans IntrospectionException PropertyChangeEvent PropertyDescriptor Description This class provides information about a Bean. A method in this interface is invoked when a bound property is changed. This interface allows a designer to provide a graphical user interface through which a Bean may be configured. Instances of this class describe a property of a Bean . A Persistence Persistence is the ability to save a Bean to nonvolatile storage and retrieve it at a later time. The information that is particularly important are the configuration settings. w w tu Description Methods present in this interface are used to initialize Beans that are also applets This interface allows a designer to specify information about the properties.Constrained Properties A bean that has a constrained property generates an event when an attempt is made to change its value. Methods in this interface determine if a Bean is executing in design mode. This capability allows a Bean to operate differently according to its run-time environment. Java Beans API Interface AppletInitializer BeanInfo Customizer DesignMode PropertyChangeListener Visibility w w jn .

Servlet will read the data provided to it in the form of HTTP request and also formulate it. When a user enters a URL to a web browser. The web server maps this request with a particular servlet. init( ). The servlet is dynamically retrieved and loaded into the address space of the web server.*. then destroy( ) method is called by the server to relinquish resources w w jn . • The full functionality of java class libraries is available to a servlet..e. . This method is invoked when the servlet is first loaded into memory. These methods are called at different times by the servlet. ld m co Java Servlet Development Kit The Java Servlet Development Kit contains the class libraries that you will need to create servlet. There are several advantages of servlet: • Performance is significantly better. The browser generate HTTP request to the appropriate web server. Servlets execute within the address space of a web server. w w tu r o . The servlet remains in the server’s address space and is available for any HTTP request. When a user request for a web page by entering the URL in the browser. This HTTP request is received by the web server. the browser generates an HTTP request for the URL and sends it to the appropriate server.*. A Simple Servlet Example 19 Sample servlet program HelloServlet. • Java security manager on the server enforces a set of restrictions to protect the resources on a server machine. service( ) and destroy( ).sun.java import java.servlet. The web server maps this request with a specific file. JSDK is available from the Sun Microsystems web site at java. The file is returned in the form of HTTP response. Several web servers. Here the initialization parameters are passed to the servlet.com. The server then invokes the service method of the servlet to process the HTTP request. they are written in java .io. Microsoft offer servlet API. To handle these request at server side we require servlet. When the servlet is unloaded from the server. import javax. from different vendors such as Sun. • Servlets are platform independent. Then server invokes init( ) method of the servlet. Life cycle of a servlet There are three methods related to the life cycle of a servlet i.UNIT V Introduction to Servlets Servlets are used at server side.

close( ). w w tu Description Declares life cycle methods for a servlet Allows servlets to get initialization parameters Enables servlets to log events Used to read data from a client request Used to read data to a client response Description Implements the Servlet and ServletConfig Provides an input stream for reading requests from a client Provides an output stream for writing responses to a client. ServletRespone res) throws ServletException.servlet package: There are number of interfaces and classes present in this package.getWriter( ). pw. IOException { res.e. javax. } } Servlet API There are two packages that are required to build servlets i. Interface Servlet ServletConfig ServletContext ServletRequest ServletResponse Class GenericServlet ServletInputStream ServletOutputStream ServletException w w jn . Indicates that a servlet error occurred.http. pw. they are described below.setCcontentType(“text/html”). r o . printerWriter pw = res. javax.public class HelloServlet extends GenericServlet { public void service(ServletRequest req. ld m co Following are the interfaces and their methods Servlet Interface void destroy Called when the servlet is unloaded ServletConfig getServletConfig() Returns a ServletConfig object that contains any initialization parameters String getServletInfo Returns a string describing the servlet void init() Called when the servlet is initialized void service Called to process a request from a client .servlet and javax.println(“Hello”). These packages constitute servlet API.servlet..

int offset. It is implemented by the server and provides an input stream that a servlet developer can use to read the data from a client request. one more method is added which returns the actual number of bytes read Int readLine(byte[ ] buffer. r o . Returns information about the server.ServletConfig Interface ServletContext getServletContext String getInitParmeter(String param) getInitParameterNames() ServletContext interface getAtrribute(String attr) String getServiceInfo() Servlet getServlet(String sname) getServletNames() ServletRequest Interface String getParameter(String pname) getParameterNames() String[ ] getParameterValues() String getProtocol() String getServerName() Int getServerPort() Returns the context for this servlet Returns the value of the initialization parameter name param Returns all initialization parameter names Returns the value of the server attribute named attr. int size) w w jn . In addition to this. w w tu Returns the value of the parameter named pname Returns the parameter names for this request Returns the parameter values for this request Returns a description of the protocol Returns the name of the server Returns the port number. ld m co Returns a PrintWriter that can be used to write character data to the response Returns a ServletOutputStream that can be used to write binary data to the response . Returns the names of servlets in the server ServletResponse Interface PrinterWriter getWriter() ServletOutputStream getOutputStream() Following are the classes and their methods GenericServlet class This class implements Servlet and ServletConfig interfaces ServletInputStream class The ServletInputStream class extends InputStream. Returns the servlet named sname.

setContentType(“text/html”). The class has the following contructor ServletException( ) ServletException(String s) Reading Servlet Parameters Example 20: Servlet program showing reading servlet parameters Import java.*. res.getParameter(pname). IOException { ServletConfig sc= getServletConfig(). IOException { PrintWriter pw=res. ServletResponse res) throws ServletException.getWriter. While(e. import javax. } Pw. PrintWriter pw=res. w w jn .servlet. Enumeration e = req.getWriter(). Pw. println() methods. ServletResponse res) throws ServletException. w w tu r o .getParameterNames(). ld m co .*.println(“ Name : “+ sc. Import java. Pw.*.*. } } Reading Initialization parameters Example 21: Servlet program showing reading initialization parameters import java.io. pw. It defines the print() and ServletException class This class indicates that a servlet problem has occurred. public void service(ServletRequest req. String pvalue=req.print(pname + “ =”).close().getInitParameter(“name”)).println(pvalue). which output data to the stream. Public class ParameterServlet extends GenericServlet { Public void service(ServletRequest req.ServletOutputStream class ServletOutputStream class extends OutputStream.io.servlet.hasMoreElements()) { String pname = (String)e.nextElement().

Cookies are valuable for tracking user activities. w tu r o .pw. A cookie is stored on a client and contains state information. they are as follows: Interface HttpServletRequest HttpServletResponse HttpSession HttpSessionContext Class Cookie HttpServlet Description Enables servlets to read data from an HTTP request Enables servlets to write data to an HTTP response. String s) Void sendRedirect(String url) w w w jn .close(). Allows session data to be read and written Allows sessions to be managed Description Allows state information to be stored on a client machine Provides methods to handle HTTP requests and responses Following are the interfaces and their methods description HttpServletRequest Interface Cookie[ ] getCookies String getMethod() String getQueryString() String getRemoteUser() String getRequestedSessionId() String getServletPath() HttpServletResponse Interface Void addCookie(Cookie cookie) Void sendError(int c) Void sendError(int c . Returns the ID of the session Returns the part of the URL that identifies the servlet Adds cookie to the HTTP response. Send the error code c to the client Send the error code c and the message s Redirects the client to url Cookie class The Cookie class encapsulates a cookie. ld m co Returns an array of the cookies in this request Returns the HTTP method for this request Returns any query string in the URL Returns the name of the user who issued this request.http package There are number of classes and interfaces present in this package. } } javax.servlet. A servlet can write a .

ServletException. Performs an HTTP GET HttpServletResponse res) Void doPost(HSR req. import javax. Some of the information that is used saved includes the cookie’s • Name • Value • Expiration date • Domain and path Following are the methods that are used by the Cookie class String getComment() String getDomain() Int getMaxAge() String getName() String getPath() Boolean getSecure() Int getVersion() Void setComment(String c) Void setDomain(String d) Void setPath(String p) Void setSecure(boolean secure) Returns the comment Returns the domain Returns the age Returns the name Returns the path Returns true if the cookie is secure Returns the version Sets the comment to c Sets the domain to d Sets the path to p Sets the security flag to secure HttpServlet Class The HttpServlet class extends GenericServlet. HSR res) Called by the server when and HTTP request arrives for this servlet.*. w w tu r o . Handling HTTP Requests and Responses Example 22: Servlet program handling HTTP GET requests import java.servlet. ld m co HttpServletResponse res) throws . HSR res) Performs and HTTP POST Void service(HSR req.servlet. It is commonly used when developing servlets that receive and process HTTP requests. IOException { w w jn .*.io.*. public class GetServlet extends HttpServlet { public void doGet(HttpServletRequest req.cookie to a user’s machine via the addCookie() method of the HttpServletResponse interface. import javx. Following are the methods used by HttpServlet class Void doGet(HttpServletRequest req.http. The names and values of cookies are stored on the user’s machine.

setContentType(“text/html”). pw. w w tu r o . } Note: Same program you can use for Handling HTTP POST requests instead of using doGet we can use doPost w w jn . PrintWriter pw=res. ld m co .getWriter().String name=req.getParameter(“name”). pw. pw.close().println(name). res.println(“The Name is “).

Sign up to vote on this title
UsefulNot useful