Programming the Web 06CS73 SAMPLE QUESTIONS

Q1a. Explain standard XHTML Document structure Q1b. What is web server? Name any three web servers 5

Q2. What is hypertext protocol? Explain the request phase and response phase in detail? 10

Q3a. Explain HTML Frames with an example. Q3b. List and explain the purpose of DTD?

5 5

Q4. Create and validate a XHTML document that defines a table with columns for state, state bird, state flower and state tree. There must be at least five states as rows in the table. You must also include alt attribute specifications. Also apply background color and border width for the table. 10 Q5. Explain the usage of character entities in XHTML. List out at least 8 character entities with their meaning. 10

Q6a. Explain HTML Frameset. Create a HTML Program with horizontal and vertical frameset. 5 Q6b.Write notes on: 5

56

Name servers Proxy Servers

7. Explain the following tags with examples:

10

Align and valign attributes Cell padding and cell spacing attributes

8a. what is the difference in the effect of a paragraph tag and a break tag? Explain 5 8b. State and explain general Server characteristics 5

Q9a. What are CSS Style sheets? What is the advantage of document-level style sheets over inline style sheets? 5 Q9b. Describe the two ways to embed a JavaScript script in an XHTML document. 5 Q10. What are the various MYSQL data types available? Explain. 10

Q11a. What is the purpose of a style class selector and generic class? 5

Q11b. Explain for-in loop used in JavaScript with an example? 5 Q12. Explain font and list properties used in CSS with an example. 10

Q13a. Write a note on CSS Box Model. 5

57

Q13b. Write a note on string properties and methods used in JavaScript 5

Q14a.What are pseudo-classes? Write a CSS file that adds different colors to a hyperlink.. 5 Q14b. Write notes on Object creation and Modification with suitable examples 5 15. Given the following table of data about several planets of our solar system, create a Web page that enables users to enter a planet name and, at the click of a button, have the distance and diameter appear either in an alert box or (as extra credit) in separate fields of the page. 10

Planet Distance from the Sun Diameter Mercury 36 million miles 3,100 miles Venus 67 million miles 7,700 miles Earth 93 million miles 7,920 miles Mars 141 million miles 4,200 miles

16. Write a Perl program to change the password of user and grant him required permission. 10

Q17a. What is a query string? How is a query string transmitted to the server with the get and post method. 5

Q17b. Explain the three phases of event processing in the DOM 2 event model 5

58

Q18. What is CGI? Write a note on CGILinkage 10

Q19a. What is CGI.pm module? Give 5 different methods which are used to create html output and their functions. 5

Q19b. What are events? What is an event handler? 5 Q20. List any 7 Events and their attributes. 10

Q21a. Write a note on Navigator object

Q21b. Explain various forms of element positioning in dynamic javascript 5

Q22a. What is the purpose of shortcuts in CGI.pm? 5

Q22b. Write a note on HTTP Cookies. Where are cookies stored? 5

23. Write a program in javascript to illustrate Changing of colors and fonts dynamically 10 24. Write a javascript program to illustrate Element visibility property 10

59

Programming the Web 06CS73 ANSWERS TO SAMPLE QUESTIONS

1b. Provide responses to browser requests, either existing documents or dynamically built documents. Web servers run as background processes in the operating system.

WAMP Server Apache Server IIS Server.

2. The protocol used by ALL Web communications Request Phase HTTP method domain part of URL HTTP ver. Header fields blank line Message body An example of the first line of a request: GET /degrees.html HTTP/1.1 Form: Status line Response header fields blank line Response body Status line format: HTTP version status code explanation Example: HTTP/1.1 200 OK

60

(Current version is 1.1) Status code is a three-digit number; first digit specifies the general status 1 => Informational 2 => Success 3 => Redirection 4 => Client error 5 => Server error The header field, Content-type, is required

3a. Frames are rectangular sections of the display window, each of which can display a different document Because frames are no longer part of XHTML, you cannot validate a document that includes frames The <frameset> tag specifies the number of frames and their layout in the window. 3b. Some servers can serve documents that are in the document root of other machines called as PROXY SERVER. DNS servers or name servers - convert fully qualified domain names to IPs.

4. Program OUTPUT and creation of table using <table> </table> tags. Background and fore ground color and border width using bgcolor , border-width property tags. 5. A Collection of special characters that are needed in document, but cannot be typed. Eg: small raised circle that represents degrees. These are names for the characters by the browser.

An entity in a document is replaced by its associated character by the browser. Char. Entity Meaning & &amp; Ampersand < &lt; Less than > &gt; Greater than &quot; Double quote &apos; Single quote &frac14; One quarter &frac12; One half &frac34; Three quarters &deg; Degree (space) &nbsp; Non-breaking space. 6a. The <frameset> tag specifies the number of frames and their layout in the window

61

<frameset> takes the place of <body> An asterisk after some other specification gives the remainder of the height of the window Examples:

<frameset rows = "150, 200, 300"> <frameset rows = "25%, 50%, 25%"> <frameset rows = "50%, 20%, *" > <frameset rows = "50%, 25%, 25%" cols = "40%, *"> The <frame> tag specifies the content of a frame The first <frame> tag in a <frameset> specifies the content of the first frame, etc. Row-major order is used Frame content is specified with the src attribute Without a src attribute, the frame will be empty (such a frame CANNOT be filled later) If <frameset> has fewer <frame> tags than frames, the extra frames are empty. 6b. The doctype declaration should be the very first thing in an HTML document, before the <html> tag. The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in. The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly.

7. The align attribute controls the horizontal placement of the contents in a table cell Values are left, right, and center (default) align is an attribute of <tr>, <th>, and <td> elements The valign attribute controls the vertical placement of the contents of a table cell Values are top, bottom, and center (default) valign is an attribute of <th> and <td> elements SHOW cell_align.html and display it The cellspacing attribute of <table> is used to specify the distance between cells in a table The cellpadding attribute of <table> is used to specify the spacing between the content of a cell and the inner walls of the cell

8. Paragraph in HTML doesnot insert a new blank line, whereas in XHTML a new line is considered. It displays the contents, whereas <br> is an empty tag.

62

Provide responses to browser requests, either existing documents or dynamically built documents Browser-server connection is now maintained through more than one requestresponse cycle All communications between browsers and servers use Hypertext Transfer Protocol (HTTP) Apache (open source, fast, reliable) Directives (operation control): ServerName ServerRoot ServerAdmin, DocumentRoot Alias Redirect DirectoryIndex UserDir

9a. CSS stands for Cascading Style Sheets Styles define how to display HTML elements An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly! To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. 9b. Two locations for JavaScript server different purposes JavaScript in the head element will react to user input and be called from other locations JavaScript in the body element will be executed once as the page is loaded 10. Following are the various datatypes available in MYSQL TINY INT SMALL INT MEDIUM INT INTEGER same as INT BIGINT FLOAT DOUBLE DECIMAL. Etc. 11a. The class Selector With the class selector you can define different styles for the same type of HTML element. Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Used to allow different occurrences of the same tag to use different style specifications

63

A style class has a name, which is attached to a tag name A generic class can be defined if you want a style to apply to more than one kind of tag A generic class must be named, and the name must begin with a period Example, .really-big { } 11b. Syntax for (identifier in object) statement or compound statement The loop lets the identifier take on each property in turn in the object Printing the properties in my_car: for (var prop in my_car) document.write("Name: ", prop, "; Value: ", my_car[prop], "<br />"); Result: Name: make; Value: Ford Name: model; Value: Contour SVT 12. Font properties are: font-family Value is a list of font names - browser uses the first in the list it has font-family: Arial, Helvetica, Courier Generic fonts: serif, sans-serif, cursive, fantasy, and monospace (defined in CSS) font-size Possible values: a length number or a name, such as smaller, xx-large, etc. font-style italic, oblique (useless), normal font-weight - degrees of boldness bolder, lighter, bold, normal Could specify as a multiple of 100 (100 900) font For specifying a list of font properties font: bolder 14pt Arial Helvetica Order must be: style, weight, size, name(s) List properties list-style-type Unordered lists Bullet can be a disc (default), a square, or a circle Set it on either the <ul> or <li> tag On <ul>, it applies to list items Could use an image for the bullets in an unordered list Example: <li style = "list-style-image:

64

url(bird.jpg)"> On ordered lists - list-style-type can be used to change the sequence values 13a. The CSS box model is essentially a box that wraps around HTML elements, and consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements. 13b. One property: length Note to Java programmers, this is not a method! Character positions in strings begin at index 0 CharAt(), indexOf(), substring,toLowercase,toUppercase are the various string methods avaialble

it

14a. Pseudo classes are styles that apply when something happens, rather than because the target element simply exists Names begin with colons <html> <head> <style type="text/css"> a:link {color:#FF0000} /* unvisited link */ a:visited {color:#00FF00} /* visited link */ a:hover {color:#FF00FF} /* mouse over link */ a:active {color:#0000FF} /* selected link */ </style> </head> <body> <p><b><a href="default.asp" target="_blank">This is a link</a></b></p> <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p> <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p> </body> </html> 14b. The new expression is used to create an object This includes a call to a constructor The new operator creates a blank object, the constructor creates and initializes all properties of the object Properties of an object are accessed using a dot notation: object.property Properties are not variables, so they are not declared

65

 An object may be thought of as a Map/Dictionary/Associative-Storage The number of properties of an object may vary dynamically in JavaScript 15. Use alert box, create a button and textfield and display the output using alert box() 16. Create Mysql user. Change the MySQL root password when logging in to the server. # mysqladmin password student Access is now denied without password. Use p switch Login as mysql u root p Also use mysql database and grant privileges for a new user. Mysql>USE mysql; Database changed mysql> GRANT SELECT,INSERT,UPDATE,DELETE ON people.* TO apache@localhost IDENTIFIED BY `LampIsCool`; Apache user can do everything within the database, but cannot delete people database. The user apache can access people database from localhost only. The IDENTIFIED BY clause sets the apache users password to LampIsCool. Login as $ mysql u apache -p 17a. When the POST method is used, the query string can be read from standard input The CONTENT_LENGTH environment variable tells how many characters can be read When The GET method is used, the query string is given by the value of the environment variable QUERY_STRING. 17b. Three traversal phases are defined In the capturing phase each node from the document root to the target node, in order, is examined. If the node is not the target node and there is a handler for that event at the node and The handler is enabled for capture for the node, the handler is executed. Then all handlers registered for the target node, if any, are executed. In the bubbling phase each node from the parent of the target node to the root node, in order, is examined. 18. The Common Gateway Interface (CGI) is a protocol describing a standard way of providing server-side active web content Under circumstances determined by the server, an HTTP request will cause a program to run

66

The output from the program will be the response returned to the client making the request

There are several common ways a web server can use to determine if a web request should cause a CGI program to execute Usually, the determination is based on the target of the request Certain directories can be designated as containing CGI programs Often cgi-bin is used Certain file extensions can be designated as signifying a CGI program .pl usually identifies a Perl script.

19a. Writing a CGI program from scratch is very tedious Creating HTML requires numerous print statements Retrieving data from the query strings is tricky One of the reasons for Perls popularity for CGI programming is the powerful pattern matching facilities which greatly ease the task of parsing a query string The Perl module CGI.pm provides numerous functions to help with both of these problems 19b. Events represent activity in the environment including, especially, user actions such as moving the mouse or typing on the keyboard An event handler is a program segment designed to execute when a certain event occurs Events are represented by JavaScript objects Registration is the activity of connecting a script to a type of event

20. Event Tag Attribute blur onblur change onchange click onclick focus onfocus load onload mousedown onmousedown mousemove onmousemove mouseout onmouseout mouseover onmouseover mouseup onmouseup select onselect submit onsubmit unload onunload Write a note on each of these events.

67

21a. Properties of the navigator object allow the script to determine characteristics of the browser in which the script is executing The appName property gives the name of the browser The appVersion gives the browser version. 21b. The position property specifies the position mode Value is absolute or relative or static Absolute position specifies where an element appears relative to the containing element In static position mode, the default, elements are placed left to right, top to bottom The top and left properties are ignored for static positioning Relative position mode allows changing position relative to where the element would be with static positioning This could be used to create superscripts or subscripts by moving text up or down relative to its normal position. 22. Writing a CGI program from scratch is very tedious Creating HTML requires numerous print statements Retrieving data from the query strings is tricky One of the reasons for Perls popularity for CGI programming is the powerful pattern matching facilities which greatly ease the task of parsing a query string Shortcut functions return string values containing HTML code Note, the string must be printed out to actually become part of the response Some functions take no arguments print br; puts the tag <br/> into the response Some functions can be given a single argument which becomes the content of the tag print h1(A Header) puts <h1>A Header</h1> into the response 23. <html> <head> <title> Dynamic colors </title> <script type = "text/javascript"> <!-// ******************************************************** // // The event handler function to dynamically set the

68

// color of background or foreground function setColor(where, newColor) { if (where == "background") document.body.style.backgroundColor = newColor; else document.body.style.color = newColor; } // ******************************************************** // // --> </script> </head> <body> <p style = "font-family: Times; font-style: italic; font-size: 24pt" > This small page illustrates dynamic setting of the foreground and background colors for a document </p> <form action = ""> <p> Background color: <input type = "text" name = "background" size = "10" onchange = "setColor('background', this.value)" /> <br /> Foreground color: <input type = "text" name = "foreground" size = "10" onchange = "setColor('foreground', this.value)" /> <br /> </p> </form> </body> </html>

<!-- This is dynLink.html Illustrates dynamic font styles and colors for links -->
<html> <head> <title> Dynamic fonts for links </title>

69

<style type = "text/css"> .regText {font: Times; font-size: 16pt;} </style> </head> <body> <p class = "regText"> The state of <a style = "color: blue;" onmouseover = "this.style.color = 'red'; this.style.font = 'italic 26pt Times';" onmouseout = "this.style.color = 'blue'; this.style.font = 'normal 26pt Times';"> Washington </a> produces many of our nation's apples. </p> </body> </html>

24. <!-- showHide.html Illustrates visibility control of elements --> <html> <head> <title> Visibility control </title> <script type = "text/javascript"> <!-// ******************************************************** // // The event handler function to toggle the visibility // of the airplane image function flipImag() { dom = document.getElementById("airplane").style; // Flip the visibility adjective to whatever it is not now if (dom.visibility == "visible") dom.visibility = "hidden"; else dom.visibility = "visible"; } // --> </script>

70

</head> <body> <form action = ""> <div id = "airplane" style = "position: relative; visibility: hidden;"> <img src = "../images/c172.gif" alt = "(Picture of airplane)" /> </div> <p> <br /> <input type = "button" value = "Toggle airplane" onclick = "flipImag()" /> </p> </form> </body> </html>

71