Rungta College of Engineering & Technology: 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.
Title
Date of Issue
Compiled by
Rahul Shrivastava
Astt.Prof.
RCET/CSE/LABMANUAL/
Web Technology Lab
11-July-2013
Verified by
Version
Beta
Date of Revision
Approved by
---
HOD
Department of Computer Science & Engineering

Rungta College of Engineering & Tehnology ,Bhilai
INDEX
Objectives
Importance
Pre-requisite
System Specification
..8
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.
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
Lab-6
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.
Modify the above program to get the current semester also (restricted to be a
number from 1 to 8)
Lab Manual: CS-(Web Technology)
30
34
Page 2

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.
38
Lab-8
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
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.
46
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
53
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
4
5
6
7
Modify the XHTML web page according to the requirement of user with the help of java
script functions.
Create XML program to store various information
Execute queries to create and modify employee database.
Write perl and php program to to perform various basic operation according to users
requirement.
Develop dynamic program using perl/php with mysql.
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
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.
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.
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.
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.
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.
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
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.
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
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:
Report Book
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
FAQS
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?
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

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.
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
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>
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%">
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.
2.
3.
4.
5.
6.
Add an XHTML <!DOCTYPE> to the first line of every page

Add an xmlns attribute to the html element of every page
Change all element names to lowercase
Close all empty elements
Change all attribute names to lowercase
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
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.
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.
Page 19

Practice Exercise:
S.No.
Query statement
1
heading, paragraph.
2
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
Web page design
Remarks
up language
correctly
Report Book
Problem Statement
Lab Exercise 5.
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:
Websites:
www.w3schools.com
FAQS
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?
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>
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>
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
Write XHTML document with java script having for loop.
Write a XHTML document to Input: A number n obtained using prompt, Output: The first n
Fibonacci numbers.
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
Remarks
keeping in mind all the correct syntax of mark up
language
correctly
Report Book
Problem Statement
Lab Exercise 5.
Page 24

POST LAB ASSIGNMENT
Write an XHTML document with java script to perform menu driven arithmetic operation?
REFERENCES
Bibliography:
Websites:
www.w3schools.com
FAQS
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?
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

Develop XHTML web page containing java script.
THEORY

The <script> Tag

<script>
</script>
Page 26

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.

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.
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>
{
document.getElementById("demo").innerHTML="My First JavaScript
Function";
}
Page 27

</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()
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
Web page design
Remarks
up language
correctly
Report Book
Problem Statement
Lab Exercise 5.
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:
www.w3schools.com
FAQS

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

THEORY

The <script> Tag

<script>
</script>
Page 30

More often, we want to execute code when an event occurs, like when the user clicks a
button.

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.
Example
<!DOCTYPE html>
<html>
<head>
<script>
{
Function";
}
</script>
</head>
<body>
Page 31

</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][09][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
Develop and demonstrate, using Javascript script, a XHTML document that collects the USN
1
( 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
Remarks
up language
correctly
Report Book
Problem Statement
Lab Exercise 5.
Page 32

POST LAB ASSIGNMENT
REFERENCES
Bibliography:
Websites:
www.w3schools.com
FAQS

What are the various datatypes in javascript?
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

THEORY

The <script> Tag

<script>
</script>
button.
Page 34

content.
Example
<!DOCTYPE html>
<html>
<head>
<script>
{
Function";
}
</script>
</head>
<body>
</body>
</html>
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][09][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.
1
Query statement
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
Remarks
up language
correctly
Report Book
Problem Statement
Lab Exercise 5.
Page 36

POST LAB ASSIGNMENT
REFERENCES
Bibliography:
Websites:
www.w3schools.com
FAQS

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

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

The <script> Tag

<script>
</script>
button.
Page 38

content.
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
Web page design
Remarks
up language
correctly
Report Book
Problem Statement
Lab Exercise 5.
Page 39

POST LAB ASSIGNMENT
academic detail validate that web page using java script having regular expression and event
handlers.
REFERENCES
Bibliography:
Websites:
www.w3schools.com
FAQS

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

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>
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");
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:
{
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;
}
}
Example
Page 43

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

method="post">
Email: <input type="text" name="email">
</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
Web page design
Remarks
up language
correctly
Report Book
Problem Statement
Lab Exercise 5.
POST LAB ASSIGNMENT
Page 44

REFERENCES
Bibliography:
Websites:
www.w3schools.com
FAQS

Explain java script functions of validation
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

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

HTML
JavaScript
What is XML?

Page 46


XML is not a replacement for HTML.
XML and HTML were designed with different goals:

<note>
<to>Tove</to>
<from>Jani</from>
</note>
and a message body.

Page 47



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
When an HTML form is submitted
When a user strokes a key
Page 48

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

{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
Example
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()"
method="post">
First name: <input type="text" name="fname">
</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:
{
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;
}
}
Page 50


Example
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();"
method="post">
Email: <input type="text" name="email">
</form>
Practice Exercise:
S.No.
Query statement
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
Remarks
up language
correctly
Report Book
Problem Statement
Lab Exercise 5.
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.
Create XML page to store employee information.
Page 51

REFERENCES
Bibliography:
Websites:
www.w3schools.com
FAQS

What is XML ?
Difference between XML and HTML?
Why we need to create XML web page?
Page 52

LAB -10
PROBLEM STATEMENT
To Create an XSLT style sheet for one student element of the above document and use it to
create a display of that element.
OBJECTIVES

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
Page 53

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 sourcetree into an XML result-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
XML was designed to transport and store data.
HTML was designed to display data.
Page 54

HTML
JavaScript
What is XML?


XML is not a replacement for HTML.
XML and HTML were designed with different goals:

<note>
<to>Tove</to>
<from>Jani</from>
</note>
Page 55

and a message body.



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.
Page 56

Practice Exercise:
S.No.
Query statement
1
To Create an XSLT style sheet for one student element of the above document and use
it to create a display of that element.
ACCEPTANCE CRITERIA
Web page design
Remarks
up language
correctly
Report Book
Problem Statement
Lab Exercise 5.
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.
Create XSLT sheet to display and store employee information.
REFERENCES
Bibliography:
Websites:
www.w3schools.com
Page 57

FAQS

What is XML ?
Difference between XML and HTML?
Why we need to create XML web page?
What is XSLT?
How does it works?
Page 58

Rungta College of Engineering & Technology: Lab Manual CS-322364 (22) : Web Technology

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Rungta College of Engineering & Technology: Lab Manual CS-322364 (22) : Web Technology

Enviado por

Direitos autorais:

Formatos disponíveis

RUNGTA COLLEGE OF

ENGINEERING & TECHNOLOGY

COMPUTER SCIENCE & ENGINEERING

Department of Computer Science & Engineering

Report Book Format

a) Develop and demonstrate, using Javascript script, a XHTML document that

Lab Manual: CS-(Web Technology)

Department of Computer Science & Engineering

Develop and demonstrate, using JavaScript script, a XHTML document

Design an XML document to store information about a student in an engineering

Lab Manual: CS-(Web Technology)

Department of Computer Science & Engineering

Lab Manual: CS-(Web Technology)

Department of Computer Science & Engineering

A Glimpse Into The Future

Lab Manual: CS-(Web Technology)

Department of Computer Science & Engineering

Lab Manual: CS-(Web Technology)

Department of Computer Science & Engineering

Computer basic functionality.

Lab Manual: CS-(Web Technology)

Department of Computer Science & Engineering

Pentium IV 2.4 GHz.

Lab Manual: CS-(Web Technology)

: Windows XP. Etc.

Department of Computer Science & Engineering

REPORT BOOK FORMAT

Lab Manual: CS-(Web Technology)

Department of Computer Science & Engineering

Design basic html and CSS document.

HTML stands for Hyper Text Markup Language

Lab Manual: CS-(Web Technology)

Department of Computer Science & Engineering

CSS stands for Cascading Style Sheets

Lab Manual: CS-(Web Technology)

Department of Computer Science & Engineering

POST LAB ASSIGNMENT

HTML and XML complete reference.

How to link External style sheet in html document?

Lab Manual: CS-(Web Technology)

Department of Computer Science & Engineering

Design basic html and CSS document.

HTML stands for Hyper Text Markup Language

Lab Manual: CS-(Web Technology)

Department of Computer Science & Engineering

The Most Important Differences from HTML:

XHTML DOCTYPE is mandatory

XHTML elements must be properly nested

Attribute names must be in lower case

Lab Manual: CS-(Web Technology)

Department of Computer Science & Engineering

<!DOCTYPE ....> Is Mandatory

XHTML Elements Must Be Properly Nested

XHTML Elements Must Always Be Closed

Lab Manual: CS-(Web Technology)

Department of Computer Science & Engineering

Empty Elements Must Also Be Closed

XHTML Elements Must Be In Lower Case

Attribute Names Must Be In Lower Case

Lab Manual: CS-(Web Technology)

Department of Computer Science & Engineering

Attribute Values Must Be Quoted

How to Convert from HTML to XHTML