PRACTICAL FILE

WEB DEVELOPMENT LAB

(7CS7A)

Student Name : Pankaj taparia

Uni. Roll No. : 16EGJCS738
Section : E
Branch : Computer Science
Year (B.Tech.) : 4th Year/7th SEM.

Global Institute of Technology, Jaipur

Department of Computer Science & Engineering
(Rajasthan Technical University, KOTA)
2019-2020
Web Development Lab Roll no. 16EGJCS738

LAB Evaluation
Name of Presence Date Conduction Writing of Checking Via VA Total Faculty
Experiment in the of Experiment of Marks Signature
practical Experiment Practical Practical
Copy copy

Marks (1) (3) (2) (1) (3) (10)

Expt. 1

Expt. 2

Expt. 3

Expt. 4

Expt.5

Expt. 6

Expt. 7

Expt. 8

Expt. 9

Expt. 10

Expt. 11

Expt. 12

Expt. 13

Expt. 14

Total
Sessional
Scored by
the Student

Page | 2
Web Development Lab Roll no. 16EGJCS738

List of Experiments
S. No. Experiments to be Conducted
Exp:- 1

Exp:- 2

Exp:- 3

Exp:- 4

Exp:- 5

Exp:- 6

Exp:- 7

Exp:- 8

Exp:- 9

Exp:-10

Exp:-11

Exp:-12

Page | 3
Web Development Lab Roll no. 16EGJCS738

COURSE OBJECTIVES CONTRIBUTION TO PROGRAM OUTCOMES

COURSE OBJECTIVE PROGRAM OUTCOME

1) Apply the knowledge to manage and to
handle web site design and development to a) Graduates will demonstrate an ability to
solve the real world problems. identify formulate and solve the web based
2) Gain a reputed designation as good web problems.
designer and web developer ethically by b) Ability to apply conceptual skills of web
applying advance web technologies. site design and development.
3) Be successfully accepted in future’s c) Graduate can participate and succeed in
development scenario as an engineering Competitive examinations like GATE etc.
graduate pursuit of lifelong learning. d) Graduate will show the understanding of
4)Exhibit team spirit management & impact of Computer engineering
solutions on the society and also be aware
effective communication dealings. of contemporary issues.

Course Outcomes (student learning outcomes)

Graduate of the program will:

1. Demonstrate an understanding of Web Development Lab.

2. They are able to understand the difference among the various scripting languages.
3. Demonstrate proficiency in using web site design and development according to
market demand.
4. Can show their ability to apply conceptual skills of Web Site Design and
Development.
5. Graduates will show interest towards the development of different modern and
efficient tool.
6. Graduates will able to know about the HTML, CSS, VB Script, Java Script, Apache
Web Server, Internet Information Server, Active X Controls, JSP, ASP, Java Servlets,
PHP, Ajax Programming, Web Services

Page | 4
Web Development Lab Roll no. 16EGJCS738

Page | 5
Web Development Lab Roll no. 16EGJCS738

Experiment 1
Q. 1 What is HTML. Explain popular tags used in web page designing.

Ans. – The definition of HTML is Hyper Text Markup Language. Hypertext is the method
by which you move around the web by clicking on the special links called hyperlink.
Markup is what the HTML tags do to the text inside in them.

 HTML tag: It is the root of the html document which is used to specify that the
document is html.
 Head tag: Head tag is used to contain all the head element in the html file. It
contains the title, style, meta, … etc tag.
 Body tag: It is used to define the body of html document. It contains image, tables,
lists, … etc.
 Title tag: It is used to define the title of html document.

Q. 2 Differentiate Client side scripting and server side scripting with the help of
example.

Ans. - Server-side scripting is a technique of programming for producing the code which
can run software on the server side, in simple words any scripting or programming that can
run on the web server is known as server-side scripting. The operations like customization
of a website, dynamic change in the website content, response generation to the user’s
queries, accessing the database, and so on are performed at the server end.

Client-side scripting is performed to generate a code that can run on the client end
(browser) without needing the server side processing. Basically, these types of scripts are
placed inside an HTML document. The client-side scripting can be used to examine the
user’s form for the errors before submitting it and for changing the content according to the
user input.

Q. 3 Explain the procedure to design HTML pages(e.g. Editors, Browsers, page

format)

Ans. – Follow the following steps:

1. Open Notepad(PC).
2. Write some HTML code in the following format.

Page | 6
Web Development Lab Roll no. 16EGJCS738

3. Save the HTML page with .html or .htm extension.

4. View the HTML page in your Web Browser(Google Chrome).

Q. 4 Assignment 1 – It has 3 tasks, you have to write the code and output snapshot
after each task.

Task 1 – Design the below page with the help of HTML. (Sample output)

Sol. –

<html>

<head>

<title>Task 1</title>

</head>

<body>

<h1>Countries and cities</h1>

Page | 7
Web Development Lab Roll no. 16EGJCS738

<ol type="I">

<li>USA

<ol type="a">

<li>Detroit</li>

<li>Seatlle</li>

</ol>

</li>

<li>Norway

<ol type="a">

<li>Oslo</li>

<li>Trondheim</li>

</ol>

</li>

<li>Italy

<ol type="a">

<li>Rome</li>

<li>Venize</li>

</ol>

</li>

</ol>

<b style="border:1px solid black;">Roll No:</b>16EGJCS738

</body>

</html>

Page | 8
Web Development Lab Roll no. 16EGJCS738

Task 2 Design the below page with the help of HTML. Create Page1, Page2,
Page3 to link below page. Add relevant information to the pages.

Sol. –

Main Page:

<html>

Page | 9
Web Development Lab Roll no. 16EGJCS738

<head>

<title>Task 2</title>

</head>

<body>

<h1>Here is where i am learning html links</h1>

<h3>The following are some links.</h3><br>

<a href="p1.html">Take me to Page 1</a><br><br>

<a href="p2.html">Take me to Page 2</a><br><br>

<a href="p3.html">Take me to Page 3</a><br><br>

<b style="border:1px solid black;">Roll No:</b>16EGJCS738

</body>

</html>

Page 1:

<html>

<head>

<title>Task 2</title>

</head>

<body>

<h1>Here is where i am learning html links</h1>

<h3>The following are some links.</h3><br>

<a href="main.html">Take me to Main page</a><br><br>

<a href="p2.html">Take me to Page 2</a><br><br>

<a href="p3.html">Take me to Page 3</a><br><br>

<b style="border:1px solid black;">Roll No:</b>16EGJCS738

</body>

</html>

Page | 10
Web Development Lab Roll no. 16EGJCS738

Page 2 :

<html>

<head>

<title>Task 2</title>

</head>

<body>

<h1>Here is where i am learning html links</h1>

<h3>The following are some links.</h3><br>

<a href="main.html">Take me to Main page</a><br><br>

<a href="p1.html">Take me to Page 1</a><br><br>

<a href="p3.html">Take me to Page 3</a><br><br>

<b style="border:1px solid black;">Roll No:</b>16EGJCS738

</body>

</html>

Page 3 :

<html>

<head>

<title>Task 2</title>

</head>

<body>

<h1>Here is where i am learning html links</h1>

<h3>The following are some links.</h3><br>

<a href="main.html">Take me to Main page</a><br><br>

<a href="p1.html">Take me to Page 1</a><br><br>

<a href="p2.html">Take me to Page 2</a><br><br>

<b style="border:1px solid black;">Roll No:</b>16EGJCS738

Page | 11
Web Development Lab Roll no. 16EGJCS738

</body>

</html>

Task 3 –Create a webpage in HTML with the help of following instructions

1. A title for the browser

2. A title for your web page

3. 5 HTML paragraphs with relevant information about your web page.

4. A heading for each paragraph

5. An unordered list of 3 items in the first paragraph

6. An ordered list of 3 items in the third paragraph. All the text should be in italics

Page | 12
Web Development Lab Roll no. 16EGJCS738

7. Go back to step 4 and add another list item which will be a link. Create a link with the
text Here's the link to my favourite website. Make sure that the link directs users
to your favourite website

8. After Paragraphs 5, insert an image of your choice and make it hyperlink (clickable)
to relevant website.

9. At the end of the main body text, use the appropriate character entity to include a
copyright symbol with your name, roll no., branch and year.

Sol. <html>

<head>

<title>Task 3</title>

</head>

<body>

<p>

<h2>Paragraph 1</h2>

This is Pankaj taparia.<br>I am student of Global Institute Of

Technology.<br>I live in Jaipur.<br>

<h3>Colours</h3>

<ul>

<li>Black</li>

<li>White</li>

<li>Red</li>

<li><a href="task1.html">Here is a link</a></li>

</ul>

</p>

<p>

<h2>Paragraph 2</h2>

Page | 13
Web Development Lab Roll no. 16EGJCS738

This is Pankaj taparia.<br>I am student of Global Institute Of

Technology.<br>I live in Jaipur.

</p>

<p>

<h2>Paragraph 3</h2>

This is Pankaj taparia.<br>I am student of Global Institute Of

Technology.<br>I live in Jaipur.<br>

<h3>Colours</h3>

<i><ul>

<li>Black</li>

<li>White</li>

<li>Red</li>

</ul>

</i>

</p>

<p>

<h2>Paragraph 4</h2>

This is Pankaj taparia.<br>I am student of Global Institute Of

Technology.<br>I live in Jaipur.

</p>

<p>

<h2>Paragraph 5</h2>

This is Pankaj taparia.<br>I am student of Global Institute Of

Technology.<br>I live in Jaipur.

</p>

<a href = "task1.html"><img src="landscape.jpg " alt = "Not Available" style

=

"width:300px;height:300px"></a>

Page | 14
Web Development Lab Roll no. 16EGJCS738

<br>

&copy; Pankaj taparia, 16EGJCS738, B-Tech, 2019

</body>

</html>

Experiment 2
Assignment 1 -Create the following structure of tables and form with the help of
HTML. Write the solution code and output snapshot of the following task.

Task 1

Page | 15
Web Development Lab Roll no. 16EGJCS738

Sol –
<html>

<head>

<style>

table,th,td{

border:1px solid black;

border-collapse:collapse;

width:60%;

tr,th,td{

text-align:center;

padding:20px;

</style>

</head>

<body>

<table>

<tr>

<th style="background-color:green;color:white;">Name</th>

Page | 16
Web Development Lab Roll no. 16EGJCS738

<th style="background-color:green;color:white;">Age</th>

<thcolspan=2 style="background-color:green;color:white;">Location</th>

</tr>

<tr>

<td rowspan=2>Aziz</td>

<td rowspan=2>26</td>

<td>Chicago</td>

<td>IL</td>

</tr>

<tr>

<td>San Diego</td>

<td>CA</td>

</tr>

<tr>

<td>Jen</td>

<td>40</td>

<td>New York</td>

<td>IL</td>

</tr>

<tr>

<td>Jorden</td>

<td>30</td>

Page | 17
Web Development Lab Roll no. 16EGJCS738

<td>London</td>

<td>LK</td>

</tr>

<tr>

<td colspan=4 style="background-color:blue;text-align:center;color:white;">Footer</td>

</tr>

</table>

</body>

</html>

Task 2

Sol –
<html>

Page | 18
Web Development Lab Roll no. 16EGJCS738

<title>Table2</title>

<style>

table,tr,td,th{

border:1px solid black;

border-collapse: collapse;

text-align:center;

padding:10px;

</style>

</head>

<body>

<table style="border:2px solid black;">

<th>

<td>Monday</td>

<td>Tuesday</td>

<td>Wednesday</td>

<td>Thursday</td>

<td>Friday</td>

</th>

<tr>

<td>1:00</td>

<td rowspan=2 style="background:moccasin;">Office</td>

<td></td>

<td rowspan=2 style="background:moccasin;">Office</td>

<td rowspan=8 style="background:moccasin;">Office Hours by Appt.</td>

<td rowspan=2 style="background:moccasin;">Office</td>

Page | 19
Web Development Lab Roll no. 16EGJCS738

</tr>

<tr>

<td>1:30</td>

<td rowspan=2 style="background:gray;">Deep Meaning</td>

</tr>

<tr>

<td>2:00</td>

<td rowspan=3 style="background:lime;">MAT</td>

<td rowspan=3 style="background:lime;">MAT</td>

<td rowspan=3 style="background:lime;">MAT</td>

</tr>

<tr>

<td>2:30</td>

<td></td>

</tr>

<tr>

<td>3:00</td>

<td rowspan=3 style="background:gray;">EC Meaning</td>

</tr>

<tr>

<td>3:30</td>

<td rowspan=3 style="background:magenta;">CSC</td>

<td rowspan=3 style="background:magenta;">CSC</td>

<td rowspan=3 style="background:magenta;">CSC</td>

</tr>

<tr>

Page | 20
Web Development Lab Roll no. 16EGJCS738

<td>4:00</td>

</tr>

<tr>

<td>4:30</td>

<td></td>

</tr>

</table>

<br>

<b style="border:1px solid black;">Roll No:</b>16EGJCS738

</body>

</html>

Task 3

Page | 21
Web Development Lab Roll no. 16EGJCS738

Sol –
<html>

<title>Table3</title>

<style>

table,tr,td,th{

border:1px solid black;

border-collapse: collapse;

text-align:center;

</style>

</head>

<body>

<table style="border-collapse: separate;">

<tr>

<td rowspan=3><b>Day</b></td>

<td colspan=3><b>Seminar</b></td>

</tr>

<tr>

<td colspan=2><b>Schedule</b></td>

<td colspan=2 rowspan=2><b>Topic</b></td>

Page | 22
Web Development Lab Roll no. 16EGJCS738

</tr>

<tr>

<td><b>Begin</b></td>

<td><b>End</b></td>

</tr>

<tr>

<td rowspan = 2>Monday</td>

<td rowspan = 2 style="background:moccasin;">8:00 am</td>

<td rowspan = 2 style="background:lavender;">5:00 pm</td>

<td>Introduction to xml</td>

</tr>

<tr>

<td>Validity DTD and Relax NG</td>

</tr>

<tr>

<td rowspan = 4>Tuesday</td>

<td style="background:moccasin;">8:00 am</td>

<td style="background:moccasin;">11:00 am</td>

<td rowspan = 2>XPath</td>

</tr>

<tr>

<td rowspan = 2 style="background:moccasin;">11:00 am</td>

<td rowspan = 2 style="background:palegreen;">2:00 pm</td>

</tr>

<tr>

<td rowspan = 2>XSL Transformation</td>

Page | 23
Web Development Lab Roll no. 16EGJCS738

</tr>

<tr>

<td style="background:palegreen;">2:00 am</td>

<td style="background:lavender;">5:00 am</td>

</tr>

<tr>

<td>Wednesday</td>

<td style="background:moccasin;">8:00 am</td>

<td style="background:palegreen;">12:00 pm</td>

<td>XSL formating object</td>

</tr>

</table>

<br>

<b style="border:1px solid black;">Roll No:</b>16EGJCS738

</body>

</html>

Task 4

Page | 24
Web Development Lab Roll no. 16EGJCS738

Sol. –

<!DOCTYPE html>

<html>

<head>

<title>16EGJCS738</title>

</head>

<body >

<center><div align="center" style="width: 25%;height: auto;padding: 12px;background-

color:#20b2aa ">

<p style="color: white;font-size: 28px;">APPDECORS<br></p>

<p style="color: white; margin-top: 10px;font-size: 20px;">Login to your

account<br></p>

<input type="text" name="username" style="border-radius: 5px;width: 60%;height: 25px;"

placeholder="Username"><br>

<input type="text" name="password" style="margin-top: 5px;border-radius: 5px;width:

60%;height: 25px;" placeholder="Password"><br>

<button style="background-color: green;margin-top: 7px;border: hidden;background-

color: rgb(0,255,205);width: 60%;height: 25px;">Login</button><br>

<div style="margin-top: 30px;"><a style="color: white;font-size:12px;text-decoration:

none; " href="#abc">Forgot Password ?</a></div>

</div>

Page | 25
Web Development Lab Roll no. 16EGJCS738

<div align="center" style="width: 25%;height: auto;padding: 12px;background-

color:#d3d3d3 ">

<p style="color:#20b2aa;font-size: 25px; ">NOT A MEMBER YET?</p>

<button style="border-radius: 10px;background-color: #20b2aa;width: 30%;border:

none;color: white;">Sign up</button>

</div>

</center>

</body>

</html>

Page | 26
Web Development Lab Roll no. 16EGJCS738

Experiment 3
Assignment 1- Create the following registration page with the help of HTML

Task 1

Sol-

<html>

<body style="background-color: #007acc">

<form align="center">

<table>

<tr>

Page | 27
Web Development Lab Roll no. 16EGJCS738

<td>First Name</td><td><input type="text"></td>

</tr>

<tr>

<label><td>Last Name</td><td><input type="text"></td></label>

</tr>

<tr>

<label ><td>Date of Birth</td><td><input type="date"></td><br></label>

</tr>

<tr>

<label><td>Email Id</td><td><input type="email"></td><br></label>

</tr>

<tr>

<label><td>Mobile no</td><td><input type="tel"></td><br></label>

</tr>

<tr>

<label><td>Gender</td>

<td><input type="radio">Male

<input type="radio">Female</td>

</label>

</tr>

<tr>

<label><td>Address</td><td><input type="textarea" rows="10"

cols="20"></td><br></label>

</tr>

<tr>

<label><td>Country</td>

<td><input list="countries">

Page | 28
Web Development Lab Roll no. 16EGJCS738

<datalist id="countries">

<option value="india">

<option value="australia">

<option value="england">

<option value="russia">

</datalist></td>

</label>

</tr>

<tr>

<td>Hobbies</td>

<td>

<input type="checkbox">Drawing

<input type="checkbox">Singing

<input type="checkbox">Dancing

<input type="checkbox">Cycling

</td>

</tr>

<tr>

<td style="padding-bottom: 100px;">Qualification:</td>

<td>

<table>

<tr>

<th>S.No.</th>

<th>Examination</th>

<th>Board</th>

<th>Percentage</th>

Page | 29
Web Development Lab Roll no. 16EGJCS738

<th>Year Of Passing</th>

</tr>

<tr>

<td>1.</td>

<td>Class X</td>

<td><input type="text"></td>

<td><input type="text"></td>

<td><input type="text"></td>

</tr>

<tr>

<td>2.</td>

<td>Class XII</td>

<td><input type="text"></td>

<td><input type="text"></td>

<td><input type="text"></td>

</tr>

<tr>

<td>3.</td>

<td>Graduation</td>

<td><input type="text"></td>

<td><input type="text"></td>

<td><input type="text"></td>

</tr>

<tr>

<td>4.</td>

<td>Masters</td>

Page | 30
Web Development Lab Roll no. 16EGJCS738

<td><input type="text"></td>

<td><input type="text"></td>

<td><input type="text"></td>

</tr>

</table>

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

<input type="reset" value="Reset"/>

</td>

</table>

<div id="content" style="float:left;width:200px;height:700px;">

</div>

</form>

</body>

</html>

Page | 31
Web Development Lab Roll no. 16EGJCS738

Assignment 2 –

Task 1

What is CSS. Discuss in detail about the types of CSS.

Page | 32
Web Development Lab Roll no. 16EGJCS738

Sol- Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language like HTML. A CSS file has
extention .css and internet media type is text/css.CSS is designed to enable the sepration of
presentation and content, including layout, colors and fonts.
Types of css:
 Inline CSS
 Internal or Embedded CSS
 External CSS

Inline CSS: Inline CSS contains the CSS property in the body section attached with
element is known as inline CSS. This kind of style is specified within an HTML tag using
style attribute.

Internal or Embedded CSS: This can be used when a single HTML document must be
styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the
CSS is embedded within the HTML file.

External CSS: External CSS contains separate CSS file which contains only style property
with the help of tag attributes (For example class, id, heading, … etc). CSS property written
in a separate file with .css extension and should be linked to the HTML document
using link tag. This means that for each element, style can be set only once and that will be
applied across web pages.

Task 2

Sol-

Page | 33
Web Development Lab Roll no. 16EGJCS738

1. <style type=”text/css”>
Opening of style tag in which type attribute is used.The value "text/css"
indicates that the content is CSS.

2. h1
h1 is a tag in html. Here h1 indicates that above design formatting is applied
to h1 tag.
3. {
Opening braces.

4. Color: #cd5c5c;
The "color" propertyspecifies the color of the text for the h1. #cd5c5c is
color code

5. Font-size: 14px;

Font size of the text is 14 pixel.

6. Font-family: Verdana, sans-serif;

in css font family is used to change the type of font. Verdana and sans-serif
are type of font.

7. Text-transform:uppercase;
It is used to change the text in uppercase,lowercase,titlecase or camelcase.
8. }
Closing braces.
9. /*my css code*/
Comment in css code. “/*” opening and “*/” closing of comment.
10. </style>
Ending of style tag.

Page | 34
Web Development Lab Roll no. 16EGJCS738

Assignment 3 Create the following layout with the help of HTML.

<html>
<head>
<style>
table{

border-collapse: collapse;

border:2px solid blue;

width:400px;

height:600px;

.a{

border:1px solid blue;

.b{

Page | 35
Web Development Lab Roll no. 16EGJCS738

border:1px solid blue;

#x{

border:1px solid blue;

background-color:skyblue;

height:120px;

#y{

border:1px solid blue;

background-color:orange;

height=40px;

#z{

border:1px solid blue;

height=60px;

background-color:skyblue;

</style>

</head>
<body>
<Table>
<tr><td colspan=3 id="x"></td></tr>
<tr><td colspan=3 id="y"></td></tr>
<tr><td rowspan=3 class="a"></td>
<td class="b"></td>
<td rowspan=3 class="a"></td></tr>
<tr><td height="150" width="180"></td></tr>

Page | 36
Web Development Lab Roll no. 16EGJCS738

<tr><td class="b"></td></tr>
<tr><td colspan=3 id="z"></td></tr>
</table>
</body>
</html>

Page | 37
Web Development Lab Roll no. 16EGJCS738

Page | 38
Web Development Lab Roll no. 16EGJCS738

<html>
<head>
<style>
#a{
width: 300px;
height: 50px;
color:yellow; }
#b{
width: 300px;
height: 30px;
color:yellow; }
#c{
width: 170px;
height: 150px;
color:orange; }
#d{

Page | 39
Web Development Lab Roll no. 16EGJCS738

width: 80px;
height: 150px;
color:orange; }
#e{
width: 80px;
height: 100px;
color:orange; }
#f{
width: 80px;
height: 100px;
color:orange; }
#g{
height: 30px;
color:yellow; }
</style>
</head>
<body>
<Table>
<tr>
<td id="a" style="Background-color:brown;" colspan=2>
<header>&ltheader&gt</header>
</td></tr>
<tr>
<td id="b" style="Background-color:darkmagenta;" colspan=2>
<nav>&ltnav&gt<nav>
</td></tr>
<tr>
<td id="c" style="Background-color:lawngreen;">
<article>&ltarticle&gt</article>
</td>
<td id="d" style="Background-color:darkcyan;">

Page | 40
Web Development Lab Roll no. 16EGJCS738

<Section>&ltsection&gt</Section></td>
</tr>
<tr>
<td id="e" style="Background-color:lawngreen;">
<article>&ltarticle&gt</article></td>
<td id="f" style="Background-color:blue;">
<aside>&ltaside&gt</td>
</tr>
<tr><td colspan=2 style="Background-color:green;">
<footer id="g">&ltfooter&gt</footer>
</td></tr>
</table>
</body>
</html>

Page | 41
Web Development Lab Roll no. 16EGJCS738

………………………………………………………………………………………………

<html>

<head> LAYOUT

<style> table,tr,td

{ border : 1px solid black;

width: 250px;

height: 90px;

</style>

</head>

<body>

<Table>

<tr><td colspan=3> </td></tr>

Page | 42
Web Development Lab Roll no. 16EGJCS738

<tr><td colspan=3> </td></tr>

<tr><td> </td>

<td> </td>

<td> </td></tr>

<tr><td colspan=3> </td></tr>

</Table>

</body>

</html>

Page | 43