Lab Manual (CS-802) Viii Sem (Cse) : Web Engineering Laboratory

WEB ENGINEERING LABORATORY 1
LAB MANUAL
(CS-802)
VIII SEM (CSE)
CHAMELIDEVI GROUP OF
INSTITUTIONS, INDORE
CHAMELI DEVI GROUP OF INSTITUTIONS, INDORE. DEPARTMENT OF COMPUTER SCIENCE & ENGG.
CHAMELI DEVI GROUP OF INSTITUTIONS

INDORE (M.P.)
DEPARTMENT OF
COMPUTER SCIENCE &
ENGINEERING
CERTIFICATE
This is to certify that Mr./Ms……………………………………………………………… with RGTU
Enrollment No. 0832 ..…………………………..has satisfactorily completed the course of experiments in
…………………….……………………………………………...………laboratory, as prescribed by Rajiv
Gandhi Proudhyogiki Vishwavidhyalaya, Bhopal for ……… Semester of the Computer Science and
Engineering Department during year 20….…  ....
Signature of
Faculty In-charge
INDEX
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.
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.
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.
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.
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?
EXPT. No. - 2. Create a web page to display University Mark sheet Using Tables Tag
Aim: To understand table tag.

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?
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.
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 noframe 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?
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.
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?
EXPT. No. - 5. Create a web page to apply validation with registration form.
Aim: To understand the client site and server site validation.
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.
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.
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?
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.
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?
EXPT. No. -8. Create a web page to implement div and layer tag.
Aim: To understand the role of division tag in web form.
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?
EXPT. No. -9 Create a web page which displays the student details using XML?
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?
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.
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?

Lab Manual (CS-802) Viii Sem (Cse) : Web Engineering Laboratory

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Lab Manual (CS-802) Viii Sem (Cse) : Web Engineering Laboratory

Încărcat de

Drepturi de autor:

Formate disponibile

WEB ENGINEERING LABORATORY 1

VIII SEM (CSE)

CHAMELI DEVI GROUP OF INSTITUTIONS

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

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

…………………….……………………………………………...………laboratory, as prescribed by Rajiv

Engineering Department during year 20….…  ....

Sl. Expt. Name of the Experiment Date of Signature

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

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

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

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

Aim: To understand table tag.

Tags required are as follows:

2) <th> .. </th>- Displays heading in the table

Aim: To understand the working of frame tag.

Tags required are as follows

Tags required are as follows:

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

A Clock can be displayed using the help of Date () Object.

Methods of Date Object-

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

Syntax- setTimeout( code,millisecond, lang)

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

Lang-Optional,it is the scripting language.

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

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

S-ar putea să vă placă și