Scribd
Upload
67 views

Chameli Devi Group of Institutions, Indore: Laboratory Manual

The document is a laboratory manual for a Web Engineering course. It contains instructions and procedures for 10 experiments related to building web pages using HTML, CSS, JavaScript and other web technologies. The manual includes a cover page with the course name and institution, a table of contents listing the 10 experiments, and 1-2 pages of content for each experiment outlining the aim, required tags or concepts, example code, and sample test questions. The experiments cover topics like creating basic HTML pages, using tables, frames, forms, and integrating features like images, links, styles and scripts.

Uploaded by

Zim
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
67 views

Chameli Devi Group of Institutions, Indore: Laboratory Manual

The document is a laboratory manual for a Web Engineering course. It contains instructions and procedures for 10 experiments related to building web pages using HTML, CSS, JavaScript and other web technologies. The manual includes a cover page with the course name and institution, a table of contents listing the 10 experiments, and 1-2 pages of content for each experiment outlining the aim, required tags or concepts, example code, and sample test questions. The experiments cover topics like creating basic HTML pages, using tables, frames, forms, and integrating features like images, links, styles and scripts.

Uploaded by

Zim
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

WEB ENGINEERING LABORATORY

CHAMELI DEVI GROUP OF


INSTITUTIONS, INDORE

LABORATORY
MANUAL

WEB ENGINEERING
(CS - 7003)

VII SEM (CSE)

DEPARTMENT OF
COMPUTER SCIENCE AND
ENGINEERING
CHAMELI DEVI GROUP OF INSTITUTIONS, INDORE. DEPARTMENT OF COMPUTER SCIENCE & ENGG.
WEB ENGINEERING LABORATORY

CHAMELI DEVI GROUP OF INSTITUTIONS


INDORE (M.P.)

DEPARTMENT OF
COMPUTER SCIENCE AND ENGINEERING

CERTIFICATE

This is to certify that Mr./Ms………………………………………………………………with RGPV

Enrollment No. 0832 ..…………………………..has satisfactorily completed the course of experiments

in …………………….……………………………………………...………laboratory, as prescribed by

Rajiv Gandhi Proudyogiki Vishwavidyalaya, Bhopal for ……… Semester of the Computer Science and

Engineering Department during year 2019 −20.

Signature of Faculty In-charge

CHAMELI DEVI GROUP OF INSTITUTIONS, INDORE. DEPARTMENT OF COMPUTER SCIENCE & ENGG.
WEB ENGINEERING LABORATORY

DEPT. OF COMPUTER SCIENCE & ENGG.


2019-20
Sl. Expt. Name of the Experiment Date of Signature
No. No. Conduction of
Faculty-
in-Charge
01. 1 Create a home page which has an image and a list to
navigate to other pages of the same site

02. 2 Create a web page to display University Mark sheet Using


Tables Tag

03. 3 Create a home page which will have various frames for the
user to navigate different sections of a site.

04. 4 Create a Form which has text fields, text area, checkbox,
radio button, submit button, reset button, drop down box,
image (if required).

05. 5 Create a web page to apply validation in registration form.

06. 6 Create a web page that gives complete control over layout
of a web page and the appearance of the contents.

07. 7 Create a web page to display a digital clock at the status


bar using JavaScript.

08. 8 Create a web page to implement div and layer tag.

09. 9 Create a web page which displays the student details using
XML?

Create a web page which display the date and time of last
10. 10 visited users using cookies.

CHAMELI DEVI GROUP OF INSTITUTIONS, INDORE. DEPARTMENT OF COMPUTER SCIENCE & ENGG.
WEB ENGINEERING LABORATORY

INDEX
EXPT. No. - 1. Create a home page which has an image and a list to navigate to other pages of the same
site.

Aim: To understand basic tag of HTML.

Theory:
Basics of HTML: -
Hyper Text Markup Language (HTML) is a markup language developed by the W3C people. It is
basically a markup language which describes how the documents are to be formatted.

HTML has two basic entities, the “Tags” (Formatting commands) and the strings within the tags called
as the “Directives”. Most of the tags have the following syntax: - <something> that indicates the
beginning of the tag and a </something> that indicates the end of the tag.

HTML Document Structure:


<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>

Formatting and Fonts:


<br> - break tag – makes output on the next line.
<p> - paragraph tag – places a blank line before the line it is on.
<hr> - horizontal tag – creates a line or horizontal rule.
<pre> - preformatted tag - enables one to embed text that is already formatted .
<i> - Italic font
<b> - Bold font
<em> - Emphasis
<sup> - Superscript
<sub> - Subscript

Font Size:
<font> tag and <h….> tag
<h1> - 24 pt <font size=7> - 36 pt
<h2> - 18 pt <font size=6> - 24 pt
<h3> - 12 pt <font size=5> - 18 pt
<h4> - 12 pt bold <font size=4> - 12 pt bold
<h5> - 10 pt <font size=3> - 12 pt plain
<h6> - 7 pt <font size=2> - 9 pt

Text alignment:
CHAMELI DEVI GROUP OF INSTITUTIONS, INDORE. DEPARTMENT OF COMPUTER SCIENCE & ENGG.
WEB ENGINEERING LABORATORY

<p align=”center”> - align the text in center.


<h1 align=”left”> - align the text in left.
<h2 align=”right”> - align the text in right.
The “align” tag can be used with <p> tag and <h….> tag

Color:
1. Set background color and text color - <body bgcolor=”blue” text=”red”>
<body bgcolor=”#800000”>
2. Set text color only - <font color=”brown”>

Lists:
1. Unordered List (<ul>) (<li> - list item)
<ul>
<li>
<li>
</ul>
to change actual character (bullet):
<ul type=”square”> (other characters are circle, disc (default))
2. Ordered List (<ol>)
<ol>
<li>
<li>
</ol>
to change numbering scheme:
<ol type=i> (other schems are a,A,I,i,1(default))
3. Definition List (<dl>)
<dl>
<dt>
<dd>
</dl>
(<dt> - definition term, <dd> - definition data)

NOTE:
● Tags can either be in lower case or upper case, i.e. there is no difference between <html> and
<HTML>
● The order in which parameters of the tag are given is not significant since each of these
parameters is named.
● HTML does not provide any structure to Web Pages. It also mixes the content with the
formatting.

1. Use of <HTML><HEAD><TITLE><BODY> Tags


2. Use of <H1> to <H6> Tags
3. Use of <img> Tag
4. Use of <br>, <hr>,<p> Tags
5. Use of All Text Formatting Tags like
<b>, <i>, <u>, <em>, <big>, <small>, <sub>, <sup>, <address>, <del>, <ins>
6. Use of Hyperlink i.e. <a></a> Tag.

CHAMELI DEVI GROUP OF INSTITUTIONS, INDORE. DEPARTMENT OF COMPUTER SCIENCE & ENGG.
WEB ENGINEERING LABORATORY

Viva Questions:
1) What is HTML?
2) What are some common lists that are used when designing a page?
3) How many HTML heading levels are there?
4) What is image map?
5) What is a marquee?

CHAMELI DEVI GROUP OF INSTITUTIONS, INDORE. DEPARTMENT OF COMPUTER SCIENCE & ENGG.
WEB ENGINEERING LABORATORY

EXPT. No. - 2. Create a web page to display University Mark sheet Using Tables Tag.

Aim: To understand table tag.

Theory:
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is
divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of
a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
Tags required are as follows:
1) <table>…..</table> -Defines a table
Attribute of table
Border If you do not specify a border attribute the table will be displayed without any borders
<table border="1">
Cell Padding- To create more white space between the cell content and its borders
<table border="1" cell padding="10">
Cell Spacing- To increase the distance between the cells
<table border="1" cell spacing="10">
2) <th> .. </th>- Displays heading in the table
3) <tr>..</tr> -Divides table into rows
4) <td>..</td>- Divide into data cells
5) <Caption>...</caption>- It gives title for a table

Viva Questions:
1) Why doesn't <TABLE WIDTH="100%"> use the full browser width?
2) How to create nest tables within tables in HTML?
3) What is button tag?
4) What is the difference between progress and meter tag?
5) What are empty HTML elements?

CHAMELI DEVI GROUP OF INSTITUTIONS, INDORE. DEPARTMENT OF COMPUTER SCIENCE & ENGG.
WEB ENGINEERING LABORATORY

EXPT. No. - 3. Create a home page which will have various frames for the user to navigate different
sections of a site.

Aim: To understand the working of frame tag.


Theory:
With frames, you can display more than one HTML document in the same browser window. Each HTML
document is called a frame, and each frame is independent of the others.

Tags required are as follows


1) <frameset> ..</frameset> - Defines how to divide the window into frames Attributes of
frameset.
cols – To divide a frame vertically
<frameset cols="25%, 75 %">
rows – To divide a frame horizontally
<frameset rows="25%, 50%,25%">

The frameset column size value can also be set in pixels (cols="200,500"), and one of the Columns can
be set to use the remaining space (cols="25 %,*").

2) <frame>-Defines what HTML document to put into each frame Attributes of frame Src- location
of file
name – name of the frame
3) <noframes>..</noframes> -Defines a no frame section for browsers that cannot display frames

Viva Questions:
1) What is semantic HTML?
2) Explain non breaking space in HTML
3) How do you clear a floated element?
4) What is a closure?
5) What’s the name of the new HTML5 element that begins with the letter K?

CHAMELI DEVI GROUP OF INSTITUTIONS, INDORE. DEPARTMENT OF COMPUTER SCIENCE & ENGG.
WEB ENGINEERING LABORATORY

EXPT. No. - 4. Create a Form which has text fields, text area, checkbox, radio button, submit button,
reset button, drop down box, image (if required).

Aim: To understand the labeling control of form and user interface elements.

Theory:
A form is an area that can contain form elements. Form elements are elements that allow the user to
enter information (like text fields, text area fields, dropdown menus, radio buttons, checkboxes, etc.)

Tags required are as follows:


1) <form>...</form>- A form is defined with this tag.
Attribute of form:
Action-When the user clicks on the "Submit" button, the content of the form is sent to another file.
The form's action attribute defines the name of the file to send the content to.
<form name="input" action="html_form_action.asp">

2) <input> -The most used form tag is the <input> tag. The type of input is specified with the type
attribute. The most commonly used input types are explained below.

Textfields- <input type="text" name =”fname”>


Radio Buttons- <input type="radio" name="gender" value=”male”>
Checkboxes- <input type="checkbox" name="vehicle" value="Bike">
Submit Button- <input type="submit" value="Submit">
Reset Button- <input type="reset" value="Reset">
<textarea> Used to accept multiple lines from the user </textarea>
<Select> Used to create a drop down list </select>

Viva Questions:
1) How many tags can be used to separate section of texts?
2) What is SVG?
3) What is a <dl> tag in HTML?
4) What is the difference between Canvas and SVG graphics?
5) What is data list tag?

CHAMELI DEVI GROUP OF INSTITUTIONS, INDORE. DEPARTMENT OF COMPUTER SCIENCE & ENGG.
WEB ENGINEERING LABORATORY

EXPT. No. - 5. Create a web page to apply validation with registration form.

Aim: To understand the client site and server site validation.

Theory:
To apply validation with registration form and you have to check before submitting the form whether
1. Any field of the form is empty?
2. Email address is a valid email address or not, (first letter should be always character, it should
contain @ etc.)
3. Password should not be more than 6 characters long.

Viva Questions:
1) What are logical and physical tags in HTML?
2) How do I add midi music to my web page?
3) What are new Media Elements in HTML5?
4) Explain various HTML list tags.
5) Explain HTML background.

CHAMELI DEVI GROUP OF INSTITUTIONS, INDORE. DEPARTMENT OF COMPUTER SCIENCE & ENGG.
WEB ENGINEERING LABORATORY

EXPT. No. -6. Create a web page to that give complete control over layout of a web page and the
appearance of the contents.

Aim: To understand Cascade Style Sheet.

Theory:
CSS is a set of specifications called rules that give you complete control over layout of a web page and
the appearance of the contents.
You have to implement 4 ways of adding CSS to a web page-
1) Embedding CSS
2) Linking to an external CSS
3) Importing an external CSS
4) Inline CSS

Viva Questions:
1) What is CSS?
2) Explain Cell Padding and Cell Spacing.
3) How to open a link in new tab or window?
4) How to redirect using HTML?
5) How to create a button which acts like a link?

CHAMELI DEVI GROUP OF INSTITUTIONS, INDORE. DEPARTMENT OF COMPUTER SCIENCE & ENGG.
WEB ENGINEERING LABORATORY

EXPT. No. -7. Create a web page to display a digital clock at the status bar using JavaScript.

Aim: To understand the concept of JavaScript and method of Date Object.

Theory:
A Clock can be displayed using the help of Date () Object.
var myDate= new Date();

Methods of Date Object-


1) getHours ()- Returns the hour of a date object (from 023)
2) getMinutes ()- Returns the minutes of a date object (from 059)
3) getSeconds ()-Returns the seconds of a date Object.(from 059)

We have to use the method setTimeout() & clearTimeout().

setTimeout()-It belongs to window objects. It is used to call a function or evaluate an expression after a
specified number of milliseconds.

Syntax- setTimeout( code,millisecond, lang)


where
Code-A pointer to a function ot the code to be executed.

Millisecond-The no. of milliseconds to wait before executing the code,

Lang-Optional,it is the scripting language.

clearTimeout()-This also belongs to window object. It cancels a timeout that is set with the
setTimeout() method

Viva Questions:
1) What is the use of history object?
2) How to write comment in JavaScript?
3) What is the difference between JavaScript and jscript?
4) Is JavaScript case sensitive language?
5) What is DOM? What is the use of document object?

CHAMELI DEVI GROUP OF INSTITUTIONS, INDORE. DEPARTMENT OF COMPUTER SCIENCE & ENGG.
WEB ENGINEERING LABORATORY

EXPT. No. -8. Create a web page to implement div and layer tag.

Aim: To understand the role of division tag in web form.

Theory:
1) The Div tag defines division/section in a HTML document. Browser generally places a line break
before and after <div> element. <div> tag is used to group together block elements to format them
with styles.

2) Layer tag allows us to position blocks of content in the webpage. These contents may overlap each
other be transparent, opaque, visible or even invisible.

Viva Questions:
1) What is the Use of SPAN in HTML and give one example?
2) What are the different ways in which website layout can be made?
3) What is the importance of Doctype in HTML?
4) Differentiate different types of Doctypes from one another
5) Why it is important to set the Meta information?

CHAMELI DEVI GROUP OF INSTITUTIONS, INDORE. DEPARTMENT OF COMPUTER SCIENCE & ENGG.
WEB ENGINEERING LABORATORY

EXPT. No. -9 Create a web page which displays the student details using XML?

Aim: To create a web page for displaying student details.

Theory:
XML:- XML stands for Extensible Mark-up Language. It is a text-based mark-up language derived from
Standard Generalized Mark-up Language (SGML).
XML tags identify the data and are used to store and organize the data, rather than specifying how to
display it like HTML tags, which are used to display the data. XML is not going to replace HTML in the
near future, but it introduces new possibilities by adopting many successful features of HTML.
There are three important characteristics of XML that make it useful in a variety of systems and
solutions −
● XML is extensible − XML allows you to create your own self-descriptive tags, or language, that
suits your application.
● XML carries the data, does not present it − XML allows you to store the data irrespective of
how it will be presented.
● XML is a public standard − XML was developed by an organization called the World Wide Web
Consortium (W3C) and is available as an open standard.

<message>
<text>Hello, world!</text>
</message>

For displays the student details using XML, we create these three files using any editor like notepad.

1. Student.Xml
2. Student.dtd
3. Student.html

Viva Questions:
1) How XML is different from HTML?
2) What is the meaning of version in XML?
3) What is XML DOM?
4) What is SAX in XML?
5) What is a well formed XML document?

CHAMELI DEVI GROUP OF INSTITUTIONS, INDORE. DEPARTMENT OF COMPUTER SCIENCE & ENGG.
WEB ENGINEERING LABORATORY

EXPT. No. -10. Create a web page which display the date and time of last visited users using cookies.

Aim: To understand about role of cookies and cookies validity in web browser.

Theory:
Cookies:- A cookie is a message given to a web browser by a web server. The browser stores the
message in a text file. The message is then sent back to the server each time the browser requests a
page from the server.

Setting a Cookie in PHP- PHP program to store current date-time in a cookie and display the Last
visited date-time on the web page upon revisiting the same web page. The code is quite simple and
small. We are making use of the set cookie () function where we will store the date and time value
during the first visit of the user.
During the second visit, we will just check if the cookie is already set, if yes then display the time stored
in the cookie variable.
The setcookie() function is used to set a cookie in PHP. Make sure you call the setcookie() function
before any output generated by your script otherwise cookie will not set. The basic syntax of this
function can be given with:

setcookie(name, value, expire, path, domain, secure);


It also specify that the cookie will expire after 30 days (30 days * 24 hours * 60 min * 60 sec).

Viva Questions:
1) What is the difference between local storage and cookies?
2) What is difference between session storage and local storage?
3) What is the lifetime of local storage?
4) How can we add and remove data from local storage?
5) What are web workers and why do we need them?

CHAMELI DEVI GROUP OF INSTITUTIONS, INDORE. DEPARTMENT OF COMPUTER SCIENCE & ENGG.

You might also like