LAB MANUAL CS-322364(22): Web Technology

RUNGTA COLLEGE OF ENGINEERING & TECHNOLOGY (Approved by AICTE, New Delhi & Affiliated to CSVTU, Bhilai) Kohka Kurud Road Bhilai [C.G.] LAB MANUAL CS-322364(22): Web Technology Department of COMPUTER SCIENCE & ENGINEERING Document No. RCET/CSE/LABMANUAL/ Version Beta Title Web Technology Lab Date of Issue 11-July-2013 Date of Revision --- Compiled by Verified by Approved by Rahul Shrivastava Astt.Prof. HOD

INDEX Objectives Importance Pre-requisite System Specification Guidelines Report Book Format Lab-1 Develop and demonstrate a HTML document that illustrates the use external style sheet, ordered list, table, borders, padding, color, and the <span> tag. 4 5 7..8 9 9 10 Lab-2 Lab-3 Develop and demonstrate a XHTML document that illustrates the use external style sheet, ordered list, table, borders, padding, color, and the <span> tag. Develop and demonstrate a XHTML file that includes JavaScript script for the following problems: a) Input: A number n obtained using prompt, Output: The first n Fibonacci numbers b) Input: A number n obtained using prompt, Output: A table of numbers from 1 to n and their squares using alert 13 22 Lab-4 Develop and demonstrate a XHTML file that includes Javascript script that uses functions for the following problems: a) Parameter: A string, Output: The position in the string of the left-most vowel b) Parameter: A number, Output: The number with its digits in the reverse order 26 Lab-5 a) Develop and demonstrate, using Javascript script, a XHTML document that collects the RollNo ( the valid format is: A digit from 1 to 4 followed by two upper-case characters followed by two digits followed by two upper-case characters followed by three digits; no embedded spaces allowed- e.g. 1AB23CD356, 1GC13CS345) of the user. Event handler must be included for the form element that collects this information to validate the input. Messages in the alert windows must be produced when errors are detected. 30 Lab-6 Modify the above program to get the current semester also (restricted to be a number from 1 to 8) 34 Lab Manual: CS-(Web Technology) Page 2

Lab-7 Lab-8 Develop and demonstrate, using JavaScript script, a XHTML document that contains three short paragraphs of text, stacked on top of each other, with only enough of each showing so that the mouse cursor can be placed over some part of them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to become completely visible. Modify the above document so that when a paragraph is moved from the To Modify the above document so that when a paragraph is moved from top stacking position, it returns to its original position rather than to the the top stacking position, it returns to its original position rather than bottom. to the bottom 38 41 Design an XML document to store information about a student in an engineering college affiliated to CSVTU. The information must include RollNo, Name, Name of the College, Branch, Year of Joining, and e-mail id. Make up Lab-9 sample data for 5 students. Create a CSS style sheet and use it to display the document. Create an XSLT style sheet for one student element of the above document and use Lab-10 it to create a display of that element 46 53 Lab Manual: CS-(Web Technology) Page 3

OBJECTIVES On completion of this Lab student shall be able to : S.No. Objectives 1 Create web pages and apply basic HTML and XHTML tag. 2 Develop XHTML web page which include java script. 3 Modify the XHTML web page according to the requirement of user with the help of java script functions. 4 Create XML program to store various information 5 Execute queries to create and modify employee database. 6 Write perl and php program to to perform various basic operation according to user s requirement. 7 Develop dynamic program using perl/php with mysql. Lab Manual: CS-(Web Technology) Page 4

IMPORTANCE 1. HTML is important as the base language that css, javascript and php plug in to. It provides the content that css styles, javascript enhances and php links to a database (to simplify their functions). 2. 99.9% of the time or so, web applications are outputting HTML/CSS/JavaScript to the browser, so you need to understand them if you're going to output them, just like you need to understand English if you are going to output text in English. 3. If you want to possess a credible online presence that reflects your company and provides a platform to contend with competent rivals HTML is the best language for website creation. It's several benefits a number of them are: 1. A significant benefit of HTML it is free of charge and no need to install any software. 2. HTML is simple to use and understand. and high speed loading time. 3. All browsers support HTML. 4. Most development tools whatever they are paid or free all support HTML. 5. HTML and XML syntax is extremely similar. A Glimpse Into The Future Web technology has evolved through several stages, including ISAM, SQL/Relational, and XML: ISAM. Although ISAM has not been formally standardized as a data model, thanks to the dominance of Cobol and the effect of that dominance on database management, there is a common set of wellunderstood expectations for an ISAM DBMS. In the ISAM paradigm, entities are records. Attributes are understood to be data stored starting at a specific offset for a specific length. The application is responsible for maintaining relationships, usually performed in much the same way as the relational model, where entities are collected in OS files, and the application (and thus the developer) is responsible for knowing which set of records is in which file. The application can include multiple types of records in one file, but any differences in entity type within a file must be implemented, understood, and maintained by the application. SQL/Relational. From a theoretical standpoint, the SQL paradigm and relational model are not synonymous. In fact, SQL can be used to build result sets that do not meet relational requirements. However, the average computing professional is not interested in purely theoretical DBMSs, and when most people use a relational database, they are almost invariably using SQL to manipulate the data (whether directly or under the covers, as is often the case with ADO). XML. XML is not a database paradigm. It is a portable persistence mechanism. However, in a distributed computing environment, XML fragments may be viewed as small, disconnected databases because the integration task required at the receiving end is equivalent to integrating data from two different database paradigms. Each of these fragments (or minidatabases) is self-containing and conforms to a set of rules. Additional rules have been added by the introduction of XML schema, but Lab Manual: CS-(Web Technology) Page 5

these are not necessary to the existence of the XML fragment - it can be understood by an XML parser independently of the additional rules. The additional rules are used primarily to ease the impedance mismatch that occurs when a system of loosely structured data is incorporated into a system of more highly structured data. Post relational DBMS: There are many number of visions about the future of data storage. However, based on the history of database technology and practice. The desired evolution of DBMSs, therefore that decouples the storage mechanism from the access mechanism. One way to think of this is that there is an underlying DBMS that operates only in terms of very generic database concepts, analogous to an abstract class in object-oriented programming. Lab Manual: CS-(Web Technology) Page 6

PRE-REQUISITE Before you continue you should have a basic understanding of the following: Computer basic functionality. Basic understanding of internet / www/ web pages. Lab Manual: CS-(Web Technology) Page 7

SYSTEM SPECIFICATION Hardware Requirements: System : Pentium IV 2.4 GHz. Hard Disk : 40 GB. Ram : 512 MB. Software Requirements: Operating system : Windows XP. Etc. Lab Manual: CS-(Web Technology) Page 8

GUIDELINES Students must be in the lab before lab activity starts. No late coming is tolerated without prior consent from the respective lecturer. Failure to do so may eliminate your mark for that particular lab session. Always keep identity cards. Students need to maintain a proper decorum in the computer lab. Students must use the equipment with care. Any damage caused is punishable. Students are required to carry their observation / programs book with completed exercises while entering the lab. Students are supposed to occupy the machines allotted to them and are not supposed to talk or make noise in the lab. The allocation is put up on the lab notice board. Lab can be used in free time / lunch hours by the students who need to use the systems after taking prior permission from the lab in-charge. Lab records need to be submitted on or before date of submission. Follow good web application development practices. Assessment for each exercise on a scale of (10): Correct implementation of concept used.. Correct formation of web pages. REPORT BOOK FORMAT A lab record should be maintained separately by each student which should contain : Problem Statement Lab Exercise Observation for each practice exercise. Only write Challenge-1 in report book. Demonstrate other higher challenges to the faculty and gain marks. Lab Manual: CS-(Web Technology) Page 9

LAB -1 PROBLEM STATEMENT Develop and demonstrate a HTML document that illustrates the use external style sheet, ordered list, table, borders, padding, color, and the <span> tag. OBJECTIVES On completion of Lab 1 student shall be able to: Design basic html and CSS document. Develop HTML web page with link from external style sheet. THEORY What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages HTML Tags HTML markup tags are usually called HTML tags HTML tags are keywords (tag names) surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, with a forward slash before the tag name Start and end tags are also called opening tags and closing tags. Lab Manual: CS-(Web Technology) Page 10

What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations: The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value. Practice Exercise: S.No. Query statement 1 Develop and demonstrate basic HTML document that illustrate the use of HTML heading, paragraph. 2 Develop and demonstrate basic HTML document that illustrate the use of HTML ordered list. 3 Develop and demonstrate a HTML document that illustrates the use of HTML Tables. 4 Develop and demonstrate basic CSS document on the basis of following criteria: 1. Set body background color: white and link the external CSS document to html file. 2. Set table border to 2px solid and padding 0px. 3. Set table header border to 2px solid blue and padding 8px. 4. Set table data border to 1px solid blue and padding 8px. 5. Set ordered list font size to 80% and list style as lower-roman. 6. Set span properties as font size -100%, font style-italic, and background color olive. 5 Develop and demonstrate a HTML document that illustrates the use external style sheet, ordered list, table, borders, padding, color, and the <span> tag. Lab Manual: CS-(Web Technology) Page 11

ACCEPTANCE CRITERIA For the acceptance of your program keep in mind following set of points that you have to cover while developing a program and record book:- Acceptance Points Web page design Correct implementation Report Book Remarks Web page must be designed in proper way by keeping in mind all the correct syntax of mark up language HTML,CSS, XHTML code must implemented correctly It consists of following sections: Problem Statement Lab Exercise 5. Observation after each practice exercise POST LAB ASSIGNMENT Create a XHTML web page for your personal profile which consist of your personal detail and academic detail. REFERENCES Bibliography: HTML and XML complete reference. Websites: www.w3schools.com FAQ S What is HTML? What is a tag? How to link External style sheet in html document? What is a difference between HTML and XHTML? What is document type declaration? Write tag syntax used for heading, paragraph and tables? Lab Manual: CS-(Web Technology) Page 12

LAB -2 PROBLEM STATEMENT Develop and demonstrate a XHTML document that illustrates the use external style sheet, ordered list, table, borders, padding, color, and the <span> tag. OBJECTIVES On completion of Lab 2 student shall be able to: Design basic html and CSS document. Develop XHTML web page with link from external style sheet. THEORY What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages HTML Tags HTML markup tags are usually called HTML tags HTML tags are keywords (tag names) surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, with a forward slash before the tag name Start and end tags are also called opening tags and closing tags. Lab Manual: CS-(Web Technology) Page 13

Why XHTML? Many pages on the internet contain "bad" HTML. The following HTML code will work fine if you view it in a browser (even if it does NOT follow the HTML rules): <html> <head> <title>this is bad HTML</title> <body> <h1>bad HTML <p>this is a paragraph </body> XML is a markup language where documents must be marked up correctly and "well-formed". Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret a "bad" markup language. Therefore - by combining the strengths of HTML and XML, XHTML was developed. XHTML is HTML redesigned as XML. The Most Important Differences from HTML: Document Structure XHTML DOCTYPE is mandatory The XML namespace attribute in <html> is mandatory <html>, <head>, <title>, and <body> is mandatory XHTML Elements XHTML elements must be properly nested XHTML elements must always be closed XHTML elements must be in lowercase XHTML documents must have one root element XHTML Attributes Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden Lab Manual: CS-(Web Technology) Page 14

<!DOCTYPE...> Is Mandatory An XHTML document must have an XHTML DOCTYPE declaration. The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html>, must specify the xml namespace for the document. The example below shows an XHTML document with a minimum of required tags: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>title of document</title> </head> <body>... </body> </html> XHTML Elements Must Be Properly Nested In HTML, some elements can be improperly nested within each other, like this: <b><i>this text is bold and italic</b></i> In XHTML, all elements must be properly nested within each other, like this: <b><i>this text is bold and italic</i></b> XHTML Elements Must Always Be Closed This is wrong: <p>this is a paragraph <p>this is another paragraph This is correct: <p>this is a paragraph</p> <p>this is another paragraph</p> Lab Manual: CS-(Web Technology) Page 15

Empty Elements Must Also Be Closed This is wrong: A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="happy face"> This is correct: A break: <br /> A horizontal rule: <hr /> An image: <img src="happy.gif" alt="happy face" /> XHTML Elements Must Be In Lower Case This is wrong: <BODY> <P>This is a paragraph</p> </BODY> This is correct: <body> <p>this is a paragraph</p> </body> Attribute Names Must Be In Lower Case This is wrong: <table WIDTH="100%"> This is correct: <table width="100%"> Lab Manual: CS-(Web Technology) Page 16

Attribute Values Must Be Quoted This is wrong: <table width=100%> This is correct: <table width="100%"> How to Convert from HTML to XHTML 1. Add an XHTML <!DOCTYPE> to the first line of every page 2. Add an xmlns attribute to the html element of every page 3. Change all element names to lowercase 4. Close all empty elements 5. Change all attribute names to lowercase 6. Quote all attribute values Introduction to XML XML was designed to transport and store data. HTML was designed to display data. What You Should Already Know Before you continue you should have a basic understanding of the following: HTML JavaScript What is XML? XML stands for EXtensible Markup Language XML is a markup language much like HTML XML was designed to carry data, not to display data XML tags are not predefined. You must define your own tags XML is designed to be self-descriptive XML is a W3C Recommendation Lab Manual: CS-(Web Technology) Page 17

The Difference Between XML and HTML XML is not a replacement for HTML. XML and HTML were designed with different goals: XML was designed to transport and store data, with focus on what data is HTML was designed to display data, with focus on how data looks HTML is about displaying information, while XML is about carrying information. XML Does Not DO Anything Maybe it is a little hard to understand, but XML does not DO anything. XML was created to structure, store, and transport information. The following example is a note to Tove, from Jani, stored as XML: <note> <to>tove</to> <from>jani</from> <heading>reminder</heading> <body>don't forget me this weekend!</body> </note> The note above is quite self descriptive. It has sender and receiver information, it also has a heading and a message body. But still, this XML document does not DO anything. It is just information wrapped in tags. Someone must write a piece of software to send, receive or display it. With XML You Invent Your Own Tags The tags in the example above (like <to> and <from>) are not defined in any XML standard. These tags are "invented" by the author of the XML document. That is because the XML language has no predefined tags. The tags used in HTML are predefined. HTML documents can only use tags defined in the HTML standard (like <p>, <h1>, etc.). XML allows the author to define his/her own tags and his/her own document structure. Lab Manual: CS-(Web Technology) Page 18

XML is Not a Replacement for HTML XML is a complement to HTML. It is important to understand that XML is not a replacement for HTML. In most web applications, XML is used to transport data, while HTML is used to format and display the data. My best description of XML is this: XML is a software- and hardware-independent tool for carrying information. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations: The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value. Lab Manual: CS-(Web Technology) Page 19

Practice Exercise: S.No. Query statement 1 Develop and demonstrate basic HTML document that illustrate the use of HTML heading, paragraph. 2 Develop and demonstrate basic HTML document that illustrate the use of HTML ordered list. 3 Develop and demonstrate a HTML document that illustrates the use of HTML Tables. 4 Develop and demonstrate basic CSS document on the basis of following criteria: 1. Set body background color: white and link the external CSS document to html file. 2. Set table border to 2px solid and padding 0px. 3. Set table header border to 2px solid blue and padding 8px. 4. Set table data border to 1px solid blue and padding 8px. 5. Set ordered list font size to 80% and list style as lower-roman. 6. Set span properties as font size -100%, font style-italic, and background color olive. 5 Develop and demonstrate a XHTML document that illustrates the use external style sheet, ordered list, table, borders, padding, color, and the <span> tag. ACCEPTANCE CRITERIA For the acceptance of your program keep in mind following set of points that you have to cover while developing a program and record book:- Acceptance Points Web page design Correct implementation Report Book Remarks Web page must be designed in proper way by keeping in mind all the correct syntax of mark up language HTML,CSS, XHTML code must implemented correctly It consists of following sections: Problem Statement Lab Exercise 5. Observation after each practice exercise Lab Manual: CS-(Web Technology) Page 20

POST LAB ASSIGNMENT Create a XHTML web page for your personal profile which consist of your personal detail and academic detail. REFERENCES Bibliography: HTML and XML complete reference. Websites: www.w3schools.com FAQ S What is HTML? What is a tag? How to link External style sheet in html document? What is a difference between HTML and XHTML? What is document type declaration? Write tag syntax used for heading, paragraph and tables? Lab Manual: CS-(Web Technology) Page 21

LAB -3 PROBLEM STATEMENT Develop and demonstrate a XHTML file that includes JavaScript script for the following problems: a) Input: A number n obtained using prompt, Output: The first n Fibonacci numbers b) Input: A number n obtained using prompt, Output: A table of numbers from 1 to n and their squares using alert OBJECTIVES On completion of Lab 3 Student shall be able to: Develop XHTML file that include JavaScript. THEORY JavaScript is a Scripting Language A scripting language is a lightweight programming language. JavaScript is programming code that can be inserted into HTML pages. JavaScript inserted into HTML pages, can be executed by all modern web browsers. JavaScript is easy to learn. JavaScripts in HTML must be inserted between <script> and </script> tags. JavaScripts can be put in the <body> and in the <head> section of an HTML page. The <script> Tag To insert a JavaScript into an HTML page, use the <script> tag. The <script> and </script> tells where the JavaScript starts and ends. The lines between the <script> and </script> contain the JavaScript: <script> alert("my First JavaScript"); </script> Lab Manual: CS-(Web Technology) Page 22

JavaScript Functions and Events The JavaScript statements in the example above, are executed while the page loads. More often, we want to execute code when an event occurs, like when the user clicks a button. If we put JavaScript code inside a function, we can call that function when an event occurs. You will learn much more about JavaScript functions and events in later chapters. JavaScript in <head> or <body> You can place an unlimited number of scripts in an HTML document. Scripts can be in the <body> or in the <head> section of HTML, and/or in both. It is a common practice to put functions in the <head> section, or at the bottom of the page. This way they are all in one place and do not interfere with page content. A JavaScript Function in <head> In this example, a JavaScript function is placed in the <head> section of an HTML page. The function is called when a button is clicked: Example <!DOCTYPE html> <html> <head> <script> function myfunction() { document.getelementbyid("demo").innerhtml="my First JavaScript Function"; } </script> </head> <body> <h1>my Web Page</h1> <p id="demo">a Paragraph</p> <button type="button" onclick="myfunction()">try it</button> </body> </html> Lab Manual: CS-(Web Technology) Page 23

Practice Exercise: S.No Query statement 1 Write to the XHTML Document with Java Script. 2 Change XHTML document with Java Script. 3. Declare 3 a Declare the variable, assign a value to it, and display it. 4. Write a XHTML document with java script having conditional if.else. 5. Write a XHTML document with java script having pop up box. 1. Alert box 2. Confirm box 3. Prompt box 6 Write XHTML document with java script having for loop. 7 Write a XHTML document to Input: A number n obtained using prompt, Output: The first n Fibonacci numbers. 8 Write a XHTML to Input: A number n obtained using prompt, Output: A table of numbers from 1 to n and their squares using alert. ACCEPTANCE CRITERIA For the acceptance of your program keep in mind following set of points that you have to cover while developing a program and record book:- Acceptance Points Web page design Correct implementation Report Book Remarks Web page must be designed in proper way by keeping in mind all the correct syntax of mark up language HTML,CSS, XHTML code must implemented correctly It consists of following sections: Problem Statement Lab Exercise 5. Observation after each practice exercise Lab Manual: CS-(Web Technology) Page 24

POST LAB ASSIGNMENT Write an XHTML document with java script to perform menu driven arithmetic operation? REFERENCES Bibliography: HTML and XML complete reference. Websites: www.w3schools.com FAQ S What is Java Script and why we need this? Demonstrate java script document writing? Demonstrate java script looping? Demonstrate java script if..else? Demonstrate java script pop up box? Lab Manual: CS-(Web Technology) Page 25

LAB -4 PROBLEM STATEMENT To Develop and demonstrate a XHTML file that includes Java script that uses functions for the following problems: a) Parameter: A string, Output: The position in the string of the left-most vowel b) Parameter: A number, Output: The number with its digits in the reverse order OBJECTIVES On completion of Lab 4 student shall be able to: Design basic html and CSS document. Develop XHTML web page containing java script. THEORY JavaScript is a Scripting Language A scripting language is a lightweight programming language. JavaScript is programming code that can be inserted into HTML pages. JavaScript inserted into HTML pages, can be executed by all modern web browsers. JavaScript is easy to learn. JavaScripts in HTML must be inserted between <script> and </script> tags. JavaScripts can be put in the <body> and in the <head> section of an HTML page. The <script> Tag To insert a JavaScript into an HTML page, use the <script> tag. The <script> and </script> tells where the JavaScript starts and ends. The lines between the <script> and </script> contain the JavaScript: <script> alert("my First JavaScript"); </script> Lab Manual: CS-(Web Technology) Page 26

JavaScript Functions and Events The JavaScript statements in the example above, are executed while the page loads. More often, we want to execute code when an event occurs, like when the user clicks a button. If we put JavaScript code inside a function, we can call that function when an event occurs. You will learn much more about JavaScript functions and events in later chapters. JavaScript in <head> or <body> You can place an unlimited number of scripts in an HTML document. Scripts can be in the <body> or in the <head> section of HTML, and/or in both. It is a common practice to put functions in the <head> section, or at the bottom of the page. This way they are all in one place and do not interfere with page content. A JavaScript Function in <head> In this example, a JavaScript function is placed in the <head> section of an HTML page. The function is called when a button is clicked: Example <!DOCTYPE html> <html> <head> <script> function myfunction() { document.getelementbyid("demo").innerhtml="my First JavaScript Function"; } Lab Manual: CS-(Web Technology) Page 27

</script> </head> <body> <h1>my Web Page</h1> <p id="demo">a Paragraph</p> <button type="button" onclick="myfunction()">try it</button> </body> </html> Procedure :- Question 3a :- 1. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. Get the string from the user using prompt() 3. Validate input string (should be only alphabets, a - z) using the regular expression /^*a-za-z++$/ and alert the user for invalid input using alert() 4. Convert the string to lowercase using tolowercase() 5.Use indexof(<vowel>) for each vowel to get the position of the vowel in the string. 6. Print the leftmost vowel i.e., print the lowest index got from indexof(). Question 3b :- 1. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. Get the number to be reversed from the user using prompt() 3. Validate input number (should be a positive number between 0 to 9) using the regular expression /^[0-9++$/ and alert the user for invalid input using alert() 4. Reverse the number using modulus operation. 5. Use math.floor(number/10) to get the floor of number after division (used for reversing) 6. Display the reversed string using alert() Lab Manual: CS-(Web Technology) Page 28

Practice Exercise: S.No. Query statement 1 Parameter: A string, Output: The position in the string of the left-most vowel. 2 Parameter: A number, Output: The number with its digits in the reverse order ACCEPTANCE CRITERIA For the acceptance of your program keep in mind following set of points that you have to cover while developing a program and record book:- Acceptance Points Web page design Correct implementation Report Book Remarks Web page must be designed in proper way by keeping in mind all the correct syntax of mark up language HTML,CSS, XHTML code must implemented correctly It consists of following sections: Problem Statement Lab Exercise 5. Observation after each practice exercise POST LAB ASSIGNMENT Create a XHTML web page for your personal profile which consists of your personal detail and academic detail validate that web page using java script. REFERENCES Bibliography: HTML and XML complete reference. Websites: www.w3schools.com FAQ S What is Java Script and why we need this? Demonstrate java script document writing? Demonstrate java script looping? Demonstrate java script if..else? Demonstrate java script pop up box? Lab Manual: CS-(Web Technology) Page 29

LAB -5 PROBLEM STATEMENT Develop and demonstrate, using Javascript script, a XHTML document that collects the RollNo ( the valid format is: A digit from 1 to 4 followed by two upper-case characters followed by two digits followed by two upper-case characters followed by three digits; no embedded spaces allowed- e.g. 1AB23CD356, 1GC13CS345) of the user. Event handler must be included for the form element that collects this information to validate the input. Messages in the alert windows must be produced when errors are detected. OBJECTIVES On completion of Lab 5 student shall be able to: Design basic html and CSS document. Develop XHTML web page containing java script. THEORY JavaScript is a Scripting Language A scripting language is a lightweight programming language. JavaScript is programming code that can be inserted into HTML pages. JavaScript inserted into HTML pages, can be executed by all modern web browsers. JavaScript is easy to learn. JavaScripts in HTML must be inserted between <script> and </script> tags. JavaScripts can be put in the <body> and in the <head> section of an HTML page. The <script> Tag To insert a JavaScript into an HTML page, use the <script> tag. The <script> and </script> tells where the JavaScript starts and ends. The lines between the <script> and </script> contain the JavaScript: <script> alert("my First JavaScript"); </script> Lab Manual: CS-(Web Technology) Page 30

JavaScript Functions and Events The JavaScript statements in the example above, are executed while the page loads. More often, we want to execute code when an event occurs, like when the user clicks a button. If we put JavaScript code inside a function, we can call that function when an event occurs. You will learn much more about JavaScript functions and events in later chapters. JavaScript in <head> or <body> You can place an unlimited number of scripts in an HTML document. Scripts can be in the <body> or in the <head> section of HTML, and/or in both. It is a common practice to put functions in the <head> section, or at the bottom of the page. This way they are all in one place and do not interfere with page content. A JavaScript Function in <head> In this example, a JavaScript function is placed in the <head> section of an HTML page. The function is called when a button is clicked: Example <!DOCTYPE html> <html> <head> <script> function myfunction() { document.getelementbyid("demo").innerhtml="my First JavaScript Function"; } </script> </head> <body> <h1>my Web Page</h1> <p id="demo">a Paragraph</p> Lab Manual: CS-(Web Technology) Page 31

<button type="button" onclick="myfunction()">try it</button> </body> </html> Procedure :- Question 3a :- 1. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. Get the USN from the user using prompt() 3. Validate USN input by the user using the regular expression : /[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/ 4. If the USN format is correct, alert the user with a message, else alert the user with the format DAADDAADDD (for eg: 1PE09CS001) Practice Exercise: S.No. Query statement 1 Develop and demonstrate, using Javascript script, a XHTML document that collects the USN ( the valid format is: A digit from 1 to 4 followed by two upper-case characters followed by two digits followed by two upper-case characters followed by three digits; no embedded spaces allowed) of the user. Event handler must be included for the form element that collects this information to validate the input. Messages in the alert windows must be produced when errors are detected. ACCEPTANCE CRITERIA For the acceptance of your program keep in mind following set of points that you have to cover while developing a program and record book:- Acceptance Points Web page design Correct implementation Report Book Remarks Web page must be designed in proper way by keeping in mind all the correct syntax of mark up language HTML,CSS, XHTML code must implemented correctly It consists of following sections: Problem Statement Lab Exercise 5. Observation after each practice exercise Lab Manual: CS-(Web Technology) Page 32

POST LAB ASSIGNMENT Create a XHTML web page for your personal profile which consists of your personal detail and academic detail validate that web page using java script. REFERENCES Bibliography: HTML and XML complete reference. Websites: www.w3schools.com FAQ S What is Java Script and why we need this? Demonstrate java script document writing? What are the various datatypes in javascript? Demonstrate java script if..else? Lab Manual: CS-(Web Technology) Page 33

LAB -6 PROBLEM STATEMENT Modify the above program to get the current semester also (restricted to be a number from 1 to 8) OBJECTIVES On completion of Lab 6 student shall be able to: Design basic html and CSS document. Develop XHTML web page containing java script. THEORY JavaScript is a Scripting Language A scripting language is a lightweight programming language. JavaScript is programming code that can be inserted into HTML pages. JavaScript inserted into HTML pages, can be executed by all modern web browsers. JavaScript is easy to learn. JavaScripts in HTML must be inserted between <script> and </script> tags. JavaScripts can be put in the <body> and in the <head> section of an HTML page. The <script> Tag To insert a JavaScript into an HTML page, use the <script> tag. The <script> and </script> tells where the JavaScript starts and ends. The lines between the <script> and </script> contain the JavaScript: <script> alert("my First JavaScript"); </script> JavaScript Functions and Events The JavaScript statements in the example above, are executed while the page loads. More often, we want to execute code when an event occurs, like when the user clicks a button. If we put JavaScript code inside a function, we can call that function when an event occurs. You will learn much more about JavaScript functions and events in later chapters. Lab Manual: CS-(Web Technology) Page 34

JavaScript in <head> or <body> You can place an unlimited number of scripts in an HTML document. Scripts can be in the <body> or in the <head> section of HTML, and/or in both. It is a common practice to put functions in the <head> section, or at the bottom of the page. This way they are all in one place and do not interfere with page content. A JavaScript Function in <head> In this example, a JavaScript function is placed in the <head> section of an HTML page. The function is called when a button is clicked: Example <!DOCTYPE html> <html> <head> <script> function myfunction() { document.getelementbyid("demo").innerhtml="my First JavaScript Function"; } </script> </head> <body> <h1>my Web Page</h1> <p id="demo">a Paragraph</p> <button type="button" onclick="myfunction()">try it</button> </body> </html> Lab Manual: CS-(Web Technology) Page 35

Procedure: Question :- 1. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. Get the USN and Semester from the user using prompt() 3. Validate USN input by the user using the regular expression : /[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/ 4. If the USN format is correct, alert the user with a message, else alert the user with the format DAADDAADDD (for eg: 1PE09CS001) 5. Validate Semester by the user using the regular expression : /[1-8]$/ 6. If the Semester is correct, alert the user with a message, else alert the user with the valid semester number (1 8). Practice Exercise: S.No. Query statement 1 If the Semester is correct, alert the user with a message, else alert the user with the valid semester number (1 8). ACCEPTANCE CRITERIA For the acceptance of your program keep in mind following set of points that you have to cover while developing a program and record book:- Acceptance Points Web page design Correct implementation Report Book Remarks Web page must be designed in proper way by keeping in mind all the correct syntax of mark up language HTML,CSS, XHTML code must implemented correctly It consists of following sections: Problem Statement Lab Exercise 5. Observation after each practice exercise Lab Manual: CS-(Web Technology) Page 36

POST LAB ASSIGNMENT Create a XHTML web page for your personal profile which consists of your personal detail and academic detail validate that web page using java script. REFERENCES Bibliography: HTML and XML complete reference. Websites: www.w3schools.com FAQ S What is Java Script and why we need this? Demonstrate java script document writing? Demonstrate java script looping? Demonstrate java script if..else? Demonstrate java script pop up box? Lab Manual: CS-(Web Technology) Page 37

LAB -7 PROBLEM STATEMENT To Develop and demonstrate, using JavaScript script, a XHTML document that contains three short paragraphs of text, stacked on top of each other, with only enough of each showing so that the mouse cursor can be placed over some part of them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to become completely visible. OBJECTIVES On completion of Lab 7 student shall be able to: Design basic html and CSS document. Develop XHTML web page containing java script and event handling. THEORY JavaScript is a Scripting Language A scripting language is a lightweight programming language. JavaScript is programming code that can be inserted into HTML pages. JavaScript inserted into HTML pages, can be executed by all modern web browsers. JavaScript is easy to learn. JavaScripts in HTML must be inserted between <script> and </script> tags. JavaScripts can be put in the <body> and in the <head> section of an HTML page. The <script> Tag To insert a JavaScript into an HTML page, use the <script> tag. The <script> and </script> tells where the JavaScript starts and ends. The lines between the <script> and </script> contain the JavaScript: <script> alert("my First JavaScript"); </script> JavaScript Functions and Events The JavaScript statements in the example above, are executed while the page loads. More often, we want to execute code when an event occurs, like when the user clicks a button. If we put JavaScript code inside a function, we can call that function when an event occurs. You will learn much more about JavaScript functions and events in later chapters. Lab Manual: CS-(Web Technology) Page 38

JavaScript in <head> or <body> You can place an unlimited number of scripts in an HTML document. Scripts can be in the <body> or in the <head> section of HTML, and/or in both. It is a common practice to put functions in the <head> section, or at the bottom of the page. This way they are all in one place and do not interfere with page content. A JavaScript Function in <head> In this example, a JavaScript function is placed in the <head> section of an HTML page. The function is called when a button is clicked: Practice Exercise: S.No. Query statement 1 To Develop and demonstrate, using JavaScript script, a XHTML document that contains three short paragraphs of text, stacked on top of each other, with only enough of each showing so that the mouse cursor can be placed over some part of them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to become completely visible. ACCEPTANCE CRITERIA For the acceptance of your program keep in mind following set of points that you have to cover while developing a program and record book:- Acceptance Points Web page design Correct implementation Report Book Remarks Web page must be designed in proper way by keeping in mind all the correct syntax of mark up language HTML,CSS, XHTML code must implemented correctly It consists of following sections: Problem Statement Lab Exercise 5. Observation after each practice exercise Lab Manual: CS-(Web Technology) Page 39

POST LAB ASSIGNMENT Create a XHTML web page for your personal profile which consists of your personal detail and academic detail validate that web page using java script having regular expression and event handlers. REFERENCES Bibliography: HTML and XML complete reference. Websites: www.w3schools.com FAQ S What is Java Script and why we need this? Demonstrate java script document writing? Demonstrate java script looping? Demonstrate java script if..else? Lab Manual: CS-(Web Technology) Page 40

LAB -8 PROBLEM STATEMENT To Modify the above document so that when a paragraph is moved from the top stacking position, it returns to its original position rather than to the bottom OBJECTIVES On completion of Lab 8 student shall be able to: Design basic html and CSS document. Develop XHTML web page containing java script with event handler. THEORY Reacting to Events A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element. To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute: onclick=javascript Examples of HTML events: When a user clicks the mouse When a web page has loaded When an image has been loaded When the mouse moves over an element When an input field is changed When an HTML form is submitted When a user strokes a key In this example, the content of the <h1> element is changed when a user clicks on it: <!DOCTYPE html> <html> <body> <h1 onclick="this.innerhtml='ooops!'">click on this text!</h1> </body> </html> Lab Manual: CS-(Web Technology) Page 41

In this example, a function is called from the event handler: Example <!DOCTYPE html> <html> <head> <script> function changetext(id) { id.innerhtml="ooops!"; } </script> </head> <body> <h1 onclick="changetext(this)">click on this text!</h1> </body> </html> JavaScript Form Validation JavaScript can be used to validate data in HTML forms before sending off the content to a server. Form data that typically are checked by a JavaScript could be: has the user left required fields empty? has the user entered a valid e-mail address? has the user entered a valid date? has the user entered text in a numeric field? Required Fields The function below checks if a field has been left empty. If the field is blank, an alert box alerts a message, the function returns false, and the form will not be submitted: function validateform() { var x=document.forms["myform"]["fname"].value; if (x==null x=="") { alert("first name must be filled out"); Lab Manual: CS-(Web Technology) Page 42

return false; } } The function above could be called when a form is submitted: Example <form name="myform" action="demo_form.asp" onsubmit="return validateform()" method="post"> First name: <input type="text" name="fname"> <input type="submit" value="submit"> </form> E-mail Validation The function below checks if the content has the general syntax of an email. This means that the input data must contain an @ sign and at least one dot (.). Also, the @ must not be the first character of the email address, and the last dot must be present after the @ sign, and minimum 2 characters before the end: function validateform() { var x=document.forms["myform"]["email"].value; var atpos=x.indexof("@"); var dotpos=x.lastindexof("."); if (atpos<1 dotpos<atpos+2 dotpos+2>=x.length) { alert("not a valid e-mail address"); return false; } } The function above could be called when a form is submitted: Example Lab Manual: CS-(Web Technology) Page 43

<form name="myform" action="demo_form.asp" onsubmit="return validateform();" method="post"> Email: <input type="text" name="email"> <input type="submit" value="submit"> </form> Procedure: Question :- 1. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. Declare function totop() 3. Prepare the CSS Document having style sheet for paragraph. 4. Declare different paragraph id. Practice Exercise: S.No. Query statement 1 Modify the above document so that when a paragraph is moved from the top stacking position, it returns to its original position rather than to the bottom ACCEPTANCE CRITERIA For the acceptance of your program keep in mind following set of points that you have to cover while developing a program and record book:- Acceptance Points Web page design Correct implementation Report Book Remarks Web page must be designed in proper way by keeping in mind all the correct syntax of mark up language HTML,CSS, XHTML code must implemented correctly It consists of following sections: Problem Statement Lab Exercise 5. Observation after each practice exercise POST LAB ASSIGNMENT Create a XHTML web page for your personal profile which consists of your personal detail and academic detail validate that web page using java script. Lab Manual: CS-(Web Technology) Page 44

REFERENCES Bibliography: HTML and XML complete reference. Websites: www.w3schools.com FAQ S What is Java Script and why we need this? Demonstrate java script document writing? Demonstrate java script looping? Demonstrate java script if..else? Demonstrate java script pop up box? Explain java script functions of validation Lab Manual: CS-(Web Technology) Page 45

LAB -9 PROBLEM STATEMENT To Design an XML document to store information about a student in an engineering college affiliated to CSVTU. The information must include RollNo, Name, Name of the College, Branch, Year of Joining, and e-mail id. Make up sample data for 5 students. Create a CSS style sheet and use it to display the document. OBJECTIVES On completion of Lab 9 student shall be able to: Design basic html and CSS document. Develop XHTML web page containing XML java script with event handler. THEORY Introduction to XML XML was designed to transport and store data. HTML was designed to display data. What You Should Already Know Before you continue you should have a basic understanding of the following: HTML JavaScript What is XML? XML stands for EXtensible Markup Language XML is a markup language much like HTML XML was designed to carry data, not to display data XML tags are not predefined. You must define your own tags XML is designed to be self-descriptive XML is a W3C Recommendation Lab Manual: CS-(Web Technology) Page 46

XML is not a replacement for HTML. XML and HTML were designed with different goals: The Difference Between XML and HTML XML was designed to transport and store data, with focus on what data is HTML was designed to display data, with focus on how data looks HTML is about displaying information, while XML is about carrying information. XML Does Not DO Anything Maybe it is a little hard to understand, but XML does not DO anything. XML was created to structure, store, and transport information. The following example is a note to Tove, from Jani, stored as XML: <note> <to>tove</to> <from>jani</from> <heading>reminder</heading> <body>don't forget me this weekend!</body> </note> The note above is quite self descriptive. It has sender and receiver information, it also has a heading and a message body. But still, this XML document does not DO anything. It is just information wrapped in tags. Someone must write a piece of software to send, receive or display it. With XML You Invent Your Own Tags The tags in the example above (like <to> and <from>) are not defined in any XML standard. These tags are "invented" by the author of the XML document. That is because the XML language has no predefined tags. The tags used in HTML are predefined. HTML documents can only use tags defined in the HTML standard (like <p>, <h1>, etc.). XML allows the author to define his/her own tags and his/her own document structure. Lab Manual: CS-(Web Technology) Page 47