LAB MANUAL CS (22): Web Technology

(1)

LAB MANUAL

CS-322364(22): Web Technology

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

Department

of

COMPUTER SCIENCE & ENGINEERING

RUNGTA COLLEGE OF

ENGINEERING & TECHNOLOGY

(Approved by AICTE, New Delhi & Affiliated to CSVTU, Bhilai)

(2)

INDEX

Objectives …………4

Importance …………5

Pre-requisite …………7

System Specification ………..8

Guidelines …………9

Report Book Format …………9

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. …………10

Lab-2 Develop and demonstrate a XHTML document that illustrates the use external

style sheet, ordered list, table, borders, padding, color, and the <span> tag. …………13

Lab-3

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

…………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

(3)

Lab-7

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 top stacking position, it returns to its original position rather than to the bottom.

…………38

Lab-8

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

…………41

Lab-9

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.

…………46

Lab-10

Create an XSLT style sheet for one student element of the above document and use

(4)

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.

(5)

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 well-understood 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

(6)

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.

(7)

PRE-REQUISITE

Before you continue you should have a basic understanding of the following:

 Computer basic functionality.

(8)

SYSTEM SPECIFICATION

Hardware Requirements:

System : Pentium IV 2.4 GHz. Hard Disk : 40 GB.

Ram : 512 MB.

Software Requirements:

Operating system : Windows XP. Etc.

(9)

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.

(10)

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 containHTML 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

(11)

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 2pxsolid 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.

(12)

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 Remarks

Web page design

Web page must be designed in proper way by keeping in mind all the correct syntax of mark up language

Correct implementation HTML,CSS, XHTML code must implemented

correctly

Report Book

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?

(13)

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

 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 containHTML 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

(14)

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):

<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

(15)

<!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>

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>

(16)

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:

(17)

Attribute Values Must Be Quoted

This is wrong:

<table width=100%> This is correct:

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

(18)

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>

<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.).

(19)

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.

(20)

Practice Exercise:

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 2pxsolid 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

Web page design

correctly

Report Book

(21)

POST LAB ASSIGNMENT

 Create a XHTML web page for your personal profile which consist of your personal detail and academic detail.

REFERENCES

Bibliography

:

Websites:

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?

(22)

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:

alert("My First JavaScript"); </script>

(23)

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>

function myFunction() {

document.getElementById("demo").innerHTML="My First JavaScript Function"; }

</script>

</head> <body>

<p id="demo">A Paragraph</p>

(24)

Practice Exercise:

S.No Query statement

1 Write to the XHTML Document with Java Script. 2 Change XHTML document with Java Script. 3

3. Declare 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

Web page design

correctly

Report Book

(25)

POST LAB ASSIGNMENT

 Write an XHTML document with java script to perform menu driven arithmetic operation?

REFERENCES

Bibliography

:

Websites:

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?

(26)

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

 Develop XHTML web page containing java script.

THEORY

JavaScript is a Scripting Language

The <script> Tag

(27)

JavaScript Functions and Events

 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>

Example

<head>

document.getElementById("demo").innerHTML="My First JavaScript Function";

(28)

</script>

</head> <body>

</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()

(29)

Practice Exercise:

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

Web page design

correctly

Report Book

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

:

Websites:

FAQ’S

(30)

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.

THEORY

JavaScript is a Scripting Language

The <script> Tag

(31)

JavaScript Functions and Events

Example

<head>

}

</script>

</head> <body>

(32)

</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:

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

Web page design

correctly

Report Book

(33)

POST LAB ASSIGNMENT

REFERENCES

Bibliography

:

Websites:

FAQ’S

 What are the various datatypes in javascript?

(34)

LAB -6

PROBLEM STATEMENT

THEORY

JavaScript is a Scripting Language

The <script> Tag

JavaScript Functions and Events

Modify the above program to get the current semester also (restricted to be a number from 1 to 8)

(35)

Example

<head>

}

</script>

</head> <body>

</body> </html>

(36)

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:

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

Web page design

correctly

Report Book

(37)

POST LAB ASSIGNMENT

REFERENCES

Bibliography

:

Websites:

FAQ’S

(38)

LAB -7

PROBLEM STATEMENT

 Develop XHTML web page containing java script and event handling.

THEORY

JavaScript is a Scripting Language

The <script> Tag

JavaScript Functions and Events

 If we put JavaScript code inside a function, we can call that function when an event occurs. 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.

(39)

Practice Exercise:

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

Web page design

correctly

Report Book

(40)

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

:

Websites:

FAQ’S

(41)

LAB -8

PROBLEM STATEMENT

 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>

<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1> </body>

</html>

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

(42)

In this example, a function is called from the event handler:

Example

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=="")

(43)

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

(44)

<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:

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

Web page design

correctly

Report Book

POST LAB ASSIGNMENT

(45)

REFERENCES

Bibliography

:

Websites:

FAQ’S

 Demonstrate java script pop up box?

(46)

LAB -9

PROBLEM STATEMENT

 Develop XHTML web page containing XML java script with event handler.

THEORY

Introduction to XML

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 W3C Recommendation

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.

(47)

The Difference Between XML and HTML

XML is not a replacement for HTML.

XML and HTML were designed with different goals:

XML Does Not DO Anything

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.).

(48)

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.

XML is a W3C Recommendation

XML became a W3C Recommendation on February 10, 1998.

To read more about the XML activities at W3C, please read our W3C Tutorial.

XML is Everywhere

XML is now as important for the Web as HTML was to the foundation of the Web. XML is the most common tool for data transmissions between all sorts of applications.

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

(49)

In this example, the content of the <h1> element is changed when a user clicks on it: <!DOCTYPE html>

<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1> </body>

</html>

In this example, a function is called from the event handler:

Example

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

(50)

function validateForm()

{

var x=document.forms["myForm"]["fname"].value;

if (x==null || x=="")

{

alert("First name must be filled out");

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;

(51)

The function above could be called when a form is submitted:

Example

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();"

method="post">

Email: <input type="text" name="email">

<input type="submit" value="Submit">

</form>

Practice Exercise:

1 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.

ACCEPTANCE CRITERIA

Web page design

correctly

Report Book

POST LAB ASSIGNMENT

(52)

REFERENCES

Bibliography

:

Websites:

FAQ’S

 Demonstrate java script pop up box?

 What is XML ?

 Difference between XML and HTML?

(53)

LAB -10

PROBLEM STATEMENT

 Develop XHTML web page containing XML java script with event handler.

 Develop XSLT sheet.

THEORY

XSLT Introduction

XSLT is a language for transforming XML documents into XHTML documents or to other XML documents.

XPath is a language for navigating in XML documents.

 HTML / XHTML

 XML / XML Namespaces

 XPath

What is XSLT?  XSLT stands for XSL Transformations

 XSLT is the most important part of XSL

 XSLT transforms an XML document into another XML document

 XSLT uses XPath to navigate in XML documents

 XSLT is a W3C Recommendation

To Create an XSLT style sheet for one student element of the above document and use it to create a display of that element.

(54)

XSLT = XSL Transformations

XSLT is the most important part of XSL.

XSLT is used to transform an XML document into another XML document, or another type of document that is recognized by a browser, like HTML and XHTML. Normally XSLT does this by transforming each XML element into an (X)HTML element.

With XSLT you can add/remove elements and attributes to or from the output file. You can also rearrange and sort elements, perform tests and make decisions about which elements to hide and display, and a lot more.

A common way to describe the transformation process is to say that XSLT transforms an XML source-tree into an XML result-source-tree.

XSLT Uses XPath

XSLT uses XPath to find information in an XML document. XPath is used to navigate through elements and attributes in XML documents.

If you want to study XPath first, please read our XPath Tutorial.

How Does it Work?

In the transformation process, XSLT uses XPath to define parts of the source document that should match one or more predefined templates. When a match is found, XSLT will transform the matching part of the source document into the result document.

XSLT is a W3C Recommendation

XSLT became a W3C Recommendation 16. November 1999.

Introduction to XML

(55)

 HTML

 JavaScript

What is XML?  XML stands for EXtensible Markup Language

 XML is a W3C Recommendation

The Difference Between XML and HTML

XML is not a replacement for HTML.

XML and HTML were designed with different goals:

XML Does Not DO Anything