NRI INSTITUTE OF INFORMATION SCIENCE
& TECHNOLOGY BHOPAL
DEPARTMENT OF COMPUTER SCIENCE &
ENGINEERING
LAB MANUAL
Web Engineering
(CS – 802)
BACHELOR OF ENGINEERING (B.E)
LAB MANUAL WEB ENGINEERING {CS-802} Page 1
NRI INSTITUTE OF INFORMATION
SCIENCE & TECHNOLOGY
FORM
NIIST/A/10
NO
DEPT NAME: Computer Science &
Engineering
NIIST BHOPAL
REV.
BRANCH CSE 0
LIST OF EXPERIMENT NO
REV.
SEMESTER VIII 30/06/2011
DT
SUBJECT/CODE :- WEB ENGINEERING / CS 802
S. NO. LIST OF EXPERIMENT
1 Write html code to: 1. perform Text formatting, 2. Insert contact information.
Write html code to: 1. Show how to mark deleted and inserted text, 2. Show how
2
to insert horizontal lines.
Write html code to: 1. Preformatted text (how to control line breaks and spaces),
3
2. Create hyperlinks
Write html code to: 1. open link in a new browser window, 2. Jump to another part
4
of a document
5 Write html code to: 1. Create password field, 2. Specify a title for a document
6 Write DHTML code to Shake the window
7 Write DHTML code to Drop down navigation (select box).
8 Write DHTML code to demonstrate Cursor position.
9 Write a Program that show online exam using JavaScript.
10 Write a Program for form validation using JavaScript.
LAB MANUAL WEB ENGINEERING {CS-802} Page 2
Subject Name: Web Engineering (Practical)
Subject Code: CS-802
Course Outcomes:
After completion of this course students will be able to
CO1: design webpage in HTML using different tags link & list.
CO2: Students will be able to design webpage using HTML table & frame.
CO3: design webpage using XML and Study of different web sources: - IIS, Apache,
WAMP.
CO4: implement security mechanism in web page for user authentication and
authorization.
CO5: implement online payment system for E-Commerce website.
LAB MANUAL WEB ENGINEERING {CS-802} Page 3
EXPERIMENT 1
1. TITLE: Write html code to: 1. perform Text formatting, 2. Insert contact information.
2. OBJECTIVES: At the end of the program students will able to understand
About HTML tags.
How to run Web Page.
3 SUBJECT RELATED OUTCOMES
Learn how to HTML tags work.
How we can create Static Page.
4. THEORY: Hyper Text Markup Language (HTML) is the main markup language for creating web pages
and other information that can be displayed in a web browser
Write HTML Using Notepad or TextEdit
HTML can be edited by using a professional HTML editor like:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good way to learn HTML.
Follow the 4 steps below to create your first web page with Notepad.
Step 1: Open Notepad
To open Notepad in Windows 7 or earlier:
Click Start (bottom left on your screen). Click All Programs. Click Accessories. Click Notepad.
To open Notepad in Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Step 2: Write Some HTML
Write or copy some HTML into Notepad.
Step 3: Save the HTML Page
Save the file on your computer.
Select File > Save as in the Notepad menu.
You can use either .htm or .html as file extension. There is no difference, it is up to you.
Step 4: View HTML Page in Your Browser
Double-click your saved HTML file
LAB MANUAL WEB ENGINEERING {CS-802} Page 4
5. ASSESMENT: Logic: 30%
Error free output: 40%
Submission of program 30%
6. CONCLUSION:
This experiment is to study how to use tags to perform Text formatting & insert contact information.
7. Source Code:
Source Code 1 to Perform Text formatting:
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
Output 1:
This text is bold
This text is strong
This text is big
This text is emphasized
Source Code 2 to Insert contact information:
This text is italic
<html>
This text is small
<body>
This is subscript and superscript
LAB MANUAL WEB ENGINEERING {CS-802} Page 5
<address>
Written by NIIST<br />
<a href="[Link] us</a><br />
Address: Bhopal, M.P..<br />
Phone: +12 34 56 78
</address>
</body>
</html>
Output 2:
Written by NIIST
Email us
Bhopal, M.P..
Phone: +12 34 56 78
LAB MANUAL WEB ENGINEERING {CS-802} Page 6
EXPERIMENT 2
1. TITLE: Write html code to: 1. Show how to mark deleted and inserted text, 2. Show how to insert
horizontal lines.
2. OBJECTIVES: At the end of the program students will able to understand
How to mark deleted insert and insert text using HTML tags.
How to insert line in web page.
3. SUBJECT RELATED OUTCOMES
Learn how to HTML tag works to mark deleted and inserted text.
How we can create Static Page and insert horizontal lines.
4. THEORY: HTML Tags
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
HTML tags normally come in pairs like <p> and </p>
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, but with a slash before the tag name.
HTML Formatting Elements
In the previous chapter, you learned about HTML styling, using the HTML style attribute.
HTML also defines special elements, for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:
Bold text
Important text
Italic text
Emphasized text
Marked text
Small text
Deleted text
Inserted text
Subscripts
Superscripts
LAB MANUAL WEB ENGINEERING {CS-802} Page 7
5. ASSESMENT: Logic: 30%
Error free output: 40%
Submission of program 30%
6. CONCLUSION:
This experiment is to study how to use HTML to Show how to mark deleted and inserted text & how to insert
horizontal lines.
7. Source Code:
Source Code 1 to Show how to mark deleted and inserted text:
<html>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>
</body>
</html>
Output 1:
My favorite color is blue red!
Notice that browsers will strikethrough deleted text and underline inserted text.
Source Code 2 to Show how to insert horizontal lines:
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
LAB MANUAL WEB ENGINEERING {CS-802} Page 8
<p>This is a paragraph</p>
</body>
</html>
Output 2:
The hr tag defines a horizontal rule:
This is a paragraph
This is a paragraph
This is a paragraph
LAB MANUAL WEB ENGINEERING {CS-802} Page 9
EXPERIMENT 3
1. TITLE: Write html code to: 1. Preformatted text (how to control line breaks and spaces), 2. Create
hyperlinks.
2. OBJECTIVES: At the end of the program students will able to understand
How to control line breaks and spaces.
How to create hyperlinks.
3. SUBJECT RELATED OUTCOMES
Learn how to use HTML to line breaks and spaces.
How we can create hyperlinks.
4. THEORY:
HTML Links - Hyperlinks
HTML links are hyperlinks.
A hyperlink is an element, a text, or an image that you can click on, and jump to another document.
HTML Links - Syntax
In HTML, links are defined with the <a> tag:
Link Syntax:
<a href="url">link text</a>
The href attribute specifies the destination address ([Link]
The link text is the visible part
5. ASSESMENT: Logic: 30%
Error free output: 40%
Submission of program 30%
6. CONCLUSION:
This experiment is to study how to use HTML to control line breaks and spaces & to create hyperlinks.
7. Source Code:
Source Code 1 to control line breaks and spaces:
<html>
<body>
LAB MANUAL WEB ENGINEERING {CS-802} Page 10
<pre>
This is preformatted text.
It preserves both spaces and line breaks.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
Output 1:
This is
preformatted text.
It preserves both spaces
and line breaks.
The pre tag is good for displaying computer code:
Source Code 2 to Create hyperlinks:
for i = 1 to 10
print i
<html>
next i
<body>
<p>
<a href="[Link]">HTML Tutorial</a> This is a link to a page on this website.
</p> <p>
<a href="[Link] This is a link to a website on the World Wide Web.
</p>
</body>
</html>
Output 2:
HTML Tutorial This is a link to a page on this website.
LAB MANUAL
Google WEB
This is ENGINEERING
a link to a website {CS-802}
on the World Wide Web. Page 11
EXPERIMENT 4
1. TITLE: Write html code to: 1. Open link in a new browser window, 2. Jump to another part of a
document
2. OBJECTIVES: At the end of the program students will able to understand
How to use HTML tags for “Open link in a new browser window” functionality.
How to Jump to another part of a document in static page.
3. SUBJECT RELATED OUTCOMES
Learn how to use code HTML to open link in a new browser window.
How we can create code for Jump to another part of a document in static page.
4. THEORY:
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
This example will open the linked document in a new browser window or in a new tab:
Example
<a href="[Link] target="_blank">Visit W3Schools!</a>
Target Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
framename Opens the linked document in a named frame
5. ASSESMENT: Logic: 30%
Error free output: 40%
Submission of program 30%
LAB MANUAL WEB ENGINEERING {CS-802} Page 12
6. CONCLUSION:
This experiment is to study how to use HTML to open link in a new browser window & Jump to another part
of a document
7. Source Code:
Source Code 1 to open link in a new browser window:
<html>
<body>
<a href="[Link] target="_blank">Visit [Link]!</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser window.</p>
</body>
</html>
Output 1:
Visit [Link]!
If you set the target attribute to "_blank", the link will open in a new browser window.
Source Code 2 to Jump to another part of a document:
<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
LAB MANUAL WEB ENGINEERING {CS-802} Page 13
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
Output 2:
See also Chapter 4.
Chapter 1
This chapter explains ba bla bla
Chapter 2
This chapter explains ba bla bla
Chapter 3
This chapter explains ba bla bla
Chapter 4
This chapter explains ba bla bla
Chapter 5
This chapter explains ba bla bla
LAB MANUAL WEB ENGINEERING {CS-802} Page 14
EXPERIMENT 5
1. TITLE: Write html code to: 1. Create password field, 2. Specify a title for a document
2. OBJECTIVES: At the end of the program students will able to understand
How to use HTML tags to create password field
How to specify a title for a document.
3. SUBJECT RELATED OUTCOMES
Learn how to use code HTML to create password field.
How we can create code for Specify a title for a document in static page.
4. THEORY:
HTML Forms
The <form> Element
HTML forms are used to collect user input.
The <form> element defines an HTML form
HTML forms contain form elements.
Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more.
The <input> Element
The <input> element is the most important form element.
The <input> element has many variations, depending on the type attribute.
Here are the types used in this chapter:
Type Description
text Defines normal text input
radio Defines radio button input (for selecting one of many choices)
submit Defines a submit button (for submitting the form)
When to Use POST?
You should use POST:
LAB MANUAL WEB ENGINEERING {CS-802} Page 15
If the form is updating data, or includes sensitive information (password).
POST offers better security because the submitted data is not visible in the page address.
5. ASSESMENT: Logic: 30%
Error free output: 40%
Submission of program 30%
6. CONCLUSION:
This experiment is to study how to use HTML to create password field & Specify a title for a document.
7. Source Code:
Source Code 1 to specify a title for a document:
<html>
<body>
<form action="">
Username: <input type="text" name="user" /><br />
Password: <input type="password" name="password" />
</form>
<p><b>Note:</b> The characters in a password field are masked (shown as asterisks or circles).</p>
</body>
</html>
Output 1:
cse
Username:
*****
Password:
Source Code 2 to specify a title for a document:
Note: The characters in a password field are masked (shown as asterisks or circles).
<html>
<head>
<title>My first HTML page</title>
</head>
<body>
LAB MANUAL WEB ENGINEERING {CS-802} Page 16
<p>The content of the body element is displayed in the browser.</p>
<p>The content of the title element is displayed in the browser's title.</p>
</body>
</html>
Output 2:
The content of the body element is displayed in the browser.
The content of the title element is displayed in the browser's title.
LAB MANUAL WEB ENGINEERING {CS-802} Page 17
EXPERIMENT 6
1. TITLE: Write DHTML code to shake the window.
2. OBJECTIVES: At the end of the program students will able to understand
How to use DHTML to shake the window.
3. SUBJECT RELATED OUTCOMES
Learn how to code DHTML to provide shaking window functionality in a web page.
[Link]: Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies used together
to create interactive and animated web sites by using a combination of a static markup language (such
as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (such
as CSS), and the Document Object Model
5. ASSESMENT: Logic: 30%
Error free output: 40%
Submission of program 30%
6. CONCLUSION:
This experiment is to study how to use DHTML code to shake the window.
7. Source Code:
<html>
<head>
<script>
function startEQ()
{
richter=5;
[Link](0,richter);
[Link](0,-richter);
[Link](richter,0);
[Link](-richter,0);
timer=setTimeout("startEQ()",10);
}
LAB MANUAL WEB ENGINEERING {CS-802} Page 18
function stopEQ()
{
clearTimeout(timer);
}
</script>
</head>
<body>
<form>
<input type="button" onclick="startEQ()" value="Start an earthquake">
<br />
<br />
<input type="button" onclick="stopEQ()" value="Stop the earthquake">
</form>
</body>
</html>
Output:
LAB MANUAL WEB ENGINEERING {CS-802} Page 19
EXPERIMENT 7
1. TITLE: Write DHTML code to Drop down navigation (select box).
2. OBJECTIVES: At the end of the program students will able to understand
How to use DHTML code to create selection box.
3. SUBJECT RELATED OUTCOMES
Learn how to code DHTML to provide Drop down navigation functionality in a web page.
4. THEORY: HTML allows scripting languages to change variables in a web page's definition language,
which in turn affects the look and function of otherwise "static" HTML page content, after the page has been
fully loaded and during the viewing process. Thus the dynamic characteristic of DHTML is the way it
functions while a page is viewed, not in its ability to generate a unique page with each page load.
5. ASSESMENT: Logic: 30%
Error free output: 40%
Submission of program 30%
6. CONCLUSION:
This experiment is to study how to use DHTML code to Drop down navigation (select box)..
7. Source Code:
<html>
<head>
<script type="text/javascript">
function go()
{
location=[Link][0].[Link];
}
</script>
</head>
<body>
<form>
<select id="gowhere" onchange="go()">
<option>-Select location-
LAB MANUAL WEB ENGINEERING {CS-802} Page 20
<option value="/asp/[Link]">ASP Coding
<option value="/flash/[Link]">Flash Tutorial
<option value="/js/[Link]">JavaScripts
</select>
</form>
</body>
</html>
Output:
LAB MANUAL WEB ENGINEERING {CS-802} Page 21
EXPERIMENT 8
1. TITLE: Write DHTML code to demonstrate Cursor position.
2. OBJECTIVES: At the end of the program students will able to understand
How to use DHTML code to show cursor position.
3. SUBJECT RELATED OUTCOMES
Learn how to code DHTML to show cursor position in a web page.
4. THEORY: DHTML allows authors to add effects to their pages that are otherwise difficult to achieve. In
short words: scripting language is changing the DOM and page style.
Simply put, DHTML is the combination of HTML, CSS and JavaScript.
Animate text and images in their document, independently moving each element from any starting point
to any ending point, following a predetermined path or one chosen by the user.
Embed a ticker that automatically refreshes its content with the latest news, stock quotes, or other data.
Use a form to capture user input, and then process, verify and respond to that data without having to send
data back to the server.
Include rollover buttons or drop-down menus.
5. ASSESMENT: Logic: 30%
Error free output: 40%
Submission of program 30%
6. CONCLUSION:
This experiment is to study how to use DHTML code to demonstrate Cursor position.
7. Source Code:
<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=[Link];
y=[Link];
alert("X coords: " + x + ", Y coords: " + y);
LAB MANUAL WEB ENGINEERING {CS-802} Page 22
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>Click in the document. An alert box will alert the x and y coordinates of the cursor.</p>
</body>
</html>
Output:
Output:
LAB MANUAL WEB ENGINEERING {CS-802} Page 23
EXPERIMENT 9
1. TITLE: Write a Program that show online exam using JavaScript.
2. OBJECTIVES: At the end of the program students will able to understand
How to use Java Script code to create online exam.
3. SUBJECT RELATED OUTCOMES
Learn how to code Java Script to create online exam in a web page.
4. THEORY: JavaScript is a dynamic computer programming language. It is most commonly used as part
of web browsers, whose implementations allow client-side scripts to interact with the user, control the
browser, communicate asynchronously, and alter the document content that is displayed.[5] It is also used in
server-side network programming with runtime environments such as [Link], game development and the
creation of desktop and mobile applications.
5. ASSESMENT: Logic: 30%
Error free output: 40%
Submission of program 30%
6. CONCLUSION:
This experiment is to study how to use java script code to show online exam.
7. Source Code:
<html>
<head>
<title>Exam</title>
<script language=”javascript”>
function exam(form)
{
var i=0;
if([Link][2].checked)
i=i+1;
if([Link][0].checked)
i=i+1;
if([Link][0].checked)
LAB MANUAL WEB ENGINEERING {CS-802} Page 24
i=i+1;
if([Link][1].checked)
i=i+1;
[Link]("Thank You Taking Online Exam! Your Score is: "+i);
}
</script>
</head>
<body bgcolor=”megneta”>
<form onSubmit=”exam(this)”>
<center><h1><blink>WELCOME TO ONLINE EXAM FORM</blink></h1></center>
<p>
<h1>1)Which is platform independent language</h1>
<input type=”radio” name=”one” value=”c++”>
<label>c++</label>
<input type=”radio” name=”one” value=”c”>
<label>c</label>
<input type=”radio” name=”one” value=”java”>
<label>java</label>
<input type=”radio” name=”one” value=”basic”>
<label>BASIC</label>
</p>
<p>
<h1>2) Which is class of all class in java</h1>
<input type=”radio” name=”three” value=”object”>
<label>Object</label>
<input type=”radio” name=”three” value=”math”>
<label>Math</label>
<input type=”radio” name=”three” value=”system”>
<label>System</label>
<input type=”radio” name=”three” value=”graphic”>
<label>Graphic</label> </p>
<p>
<h1>3)Frame package is in which package</h1>
<input type=”radio” name=”four” value=”awt”>
<label>AWT</label>
LAB MANUAL WEB ENGINEERING {CS-802} Page 25
<input type=”radio” name=”four” value=”applet”>
<label>Applet</label>
<input type=”radio” name=”four” value=”lang”>
<label>Lang</label>
<input type=”radio” name=”four” value=”swing”>
<label>Swing</label>
</p>
<p>
<h1>4)Java does not support</h1>
<input type=”radio” name=”five” value=”inheritance”>
<label>Inheritance</label>
<input type=”radio” name=”five” value=”multiple inheritance”>
<label>Multilple inheritance</label>
<input type=”radio” name=”five” value=”polymorphism”>
<label>Polymorphism</label>
<input type=”radio” name=”five” value=”encryption”>
<label>Encryption</label>
</p>
<p><center>
<input type=”submit” value=”Submit”>
<input type =”reset” value=”Reset”>
</center></p>
</body>
</html>
Output:
LAB MANUAL WEB ENGINEERING {CS-802} Page 26
LAB MANUAL WEB ENGINEERING {CS-802} Page 27
EXPERIMENT 10
1. TITLE: Write a Program for form validation using JavaScript.
2. OBJECTIVES: At the end of the program students will able to understand
How to use Java Script code for form validation.
3. SUBJECT RELATED OUTCOMES
Learn how to code Java Script for form validation in a web page.
4. THEORY: With the HTML DOM, JavaScript can access and change all the elements of an HTML
document.
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
With the object model, JavaScript gets all the power it needs to create dynamic HTML:
JavaScript can change all the HTML elements in the page
JavaScript can change all the HTML attributes in the page
JavaScript can change all the CSS styles in the page
JavaScript can remove existing HTML elements and attributes
JavaScript can add new HTML elements and attributes
JavaScript can react to all existing HTML events in the page
JavaScript can create new HTML events in the page
5. ASSESMENT: Logic: 30%
Error free output: 40%
Submission of program 30%
6. CONCLUSION:
This experiment is to study how to use java script code for form validation.
LAB MANUAL WEB ENGINEERING {CS-802} Page 28
7. Source Code:
<html>
<head><title>Form Validation</title>
<script language="JavaScript">
function checkrequired(form)
{
var pass=true;
if ([Link])
{
for (i=0;i<[Link];i++)
{
var tempobj=[Link][i]
if ([Link](0,8)=="required")
{
if([Link]=="text"&&[Link]=='')
{
alert("One or more of the required fields are not completed. Please complete them, then submit
again!")
return false;
}}
}}
else
return true;
}
</script>
</head>
<body bgcolor="GREEN"><font color="white" face="Cambria">
<h1><center><BLINK>FORM VALIDATION EXAMPLE 2</BLINK></center></h1>
<form onSubmit="return checkrequired(this)" onReset="imageslist(this)">
<pre>
Name: <input type="text" name="requiredname">*required
EMail: <input type="text" name="requiredemail">*required
Hobby: <select name="requiredhobby">
<option>Select</option>
<option>Writing</option>
<option>Playing</option>
<option>Listening to music</option>
<option>Travelling</option>
LAB MANUAL WEB ENGINEERING {CS-802} Page 29
<option>Gardening</option>
<option>Other</option>
</select>
Comments: <textarea name="comments" wrap="NOWRAP"></textarea>
<P>
<input type="submit" value="Submit" name="submit"> <input type="reset" value="Reset"
name="reset"></P>
</pre>
</form>
</body>
</html>
Output:
LAB MANUAL WEB ENGINEERING {CS-802} Page 30