Scribd
Upload
67 views48 pages

Web Technology Lab Assignments Guide

Uploaded by

sambuj122
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
67 views48 pages

Web Technology Lab Assignments Guide

Uploaded by

sambuj122
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Lab File

On
Web Technology
(KCS652)
Submitted for
Bachelor of Technology
In
Computer Science and Engineering
At

Krishna Engineering College, Ghaziabad


2020-21

Submitted To Submitted by
Mr. Veer Bhadra Ambuj Singh
Assistant Professor 1816110024
KEC, Ghaziabad
Web Technology Lab

1. Write an HTML code to display your education details in a tabular


format.
2. Write an HTML code to display your CV on a web page.
3. Write an HTML code to create a Home page having three links:
About Us, Our Services and Contact Us. Create separate web
pages for the three links.
4. Write an HTML code to create a login form. On submitting the
form, the user should get navigated to a profile page.
5. Write an HTML code to create a Registration Form. On submitting
the form, the user should be asked to login with this new
credentials.
6. Write an HTML code to create your Institute website, Department
Website and Tutorial website for specific subject.
7. Write an HTML code to illustrate the usage of the following:
 Ordered List
 Unordered List
 Definition List
8. Write an HTML code to create a frameset having header, navigation
and content sections.
9. Write an HTML code to demonstrate the usage of inline
CSS. [Link] an HTML code to demonstrate the usage of
internal CSS. [Link] an HTML code to demonstrate the usage
of external CSS.
[Link] a Java script to prompt for users name and display it on the
screen.
[Link] HTML form for keeping student record and
validate it using Java script.
[Link] an HTML program to design an entry form of student details
and send it to store at database server like SQL, Oracle or MS
Access.
[Link] programs using Java script for Web Page to display
browsers information.
16. Create an applet which will have a line, an Oval & a Rectangle
[Link] program in XML and create a style sheet in CSS & display
the
document in internet explorer.
18. Write an XML program to display products
Solutions
1.
<html>
<head>
<title>Education details</title>
</head>

<body>
<h1 align="center" style="color:blue">EDUCATION DETAILS</h1><br><br>
<table border="1" background="gray" cellspacing="5" cellpadding="5">
<th>SNo</th>
<th>Course</th>
<th>Board/University</th>
<th>School/College</th>
<th>Year of Passing</th>
<th>Percentage</th>
<tr>
<td>1</td>
<td>10</td>
<td>CBSE</td>
<td>HOLY MISSION SCHOOL</td>
<td>2O16</td>
<td>10 CGPA</td>
</tr>
<tr>
<td>2</td>
<td>12</td>
<td>BSEB</td>
<td>HOLY MISSION SCHOOL</td>
<td>2018</td>
<td>63.2</td>
</tr>
</table>
</body>
</html>
2.
<html>
<head>
<title>RESUME | XYZ</title>
</head>
<body>
<!-- BEGIN DIV FOR OVERALL BOX -->
<div id="resume">
<!-- THIS DIV CENTERS OUR HEADING -->

<h1>XYZ</h1>
<h2>KG 53, GHAZIABAD</h2>
<h2>U.P., 201001</h2>
<br />
<!-- END CENTERING DIV -->
</div>

<h2>Profile</h2>
<p>
STUDENT
</p>
<br />
<h2>Education</h2>
<h3>Bachelor of Technology , Computer Science
<br />
Graduating June 2022</h3>
<p>
Dr. A P J Abdul Kalam Technical University Uttar Pradesh
</p>
<ul>
<li>
krishna engineering college
</li>
</ul>
<h3>Project</h3>
<ul>
<li>RESTAURANT BILLING MANAGEMENT
</li>
</ul>
<h3>XII</h3>
<p>
central board of secondary education
</p>
<ul>
<li>
HOLY MISSION SCHOOL
</li>
<li>

</li>
</ul>
<br />
<h2>Related Experience</h2>
<h3>KEC GHAZIABAD, 2021 -present</h3>

<p>
STUDENT
</p>
<ul>
<li>

</li>
<li>

</li>
</ul>

Lectures in the CSE class.

Answers questions and demonstrate as needed.

<h3>Kenmore Youth Ministry, Kenmore, WA 2000-2001</h3>


<p>
Camp Group Leader
</p>
<ul>
<li>

</li>
<li> helping
</li>
</ul>

Participated in community youth group activities.

Developed activity programs now utilized by the youth ministry in children improve reading
skills.
<h3>Franciscan Care Center Nursing Home,
<br />
Seattle, WA 1999 - 2000 </h3>
<p>
Volunteer Recreation Worker
</p>
<ul>
<li>

</li>
<li>

</li>
</ul>

Provided social support to patients by reading to them, writing letters, and visiting with them.

Formed friendships which enriched lives of patients

<!-- THIS DIV CENTERS OUR LINKS -->


<div id="bottom">
<p>
<a href="[Link]">RESUME HOME</a> | <a href="#">SIMPLE RESUME</a> | <a
href="[Link]">COMPLEX RESUME</a> | <a href="[Link]" target="_blank">SEE
HTML</a> | <a href="[Link]" target="_blank">SEE CSS</a>
</p>
</div>
<!-- END CENTERING LINKS -->

<!-- END DIV FOR OVERALL BOX -->


</div>
</body>
</html>
3.<html>
<head>
<title>XYZ's Page</title>
</head>
<body bgcolor="gray">
<font size="8">
<a href="about_us.html">ABOUT US</a>&nbsp;&nbsp;

<a href="[Link]">OUR SERVICES</a>&nbsp;&nbsp;


<a href="contact_us.html">CONTACT US</a></font>
</body>
</html>
4. <div id="login_form">
<form name="f1" method="post" action="[Link]" id="f1">
<table>
<tr>
<td class="f1_label">User Name :</td><td><input type="text"
name="username" value="" />
</td>
</tr>
<tr>
<td class="f1_label">Password :</td><td><input
type="password" name="password" value="" />
</td>
</tr>
<tr>
<td>
<input type="submit" name="login" value="Log In" style="font-
size:18px; " />
</td>
</tr>
</table>
</form>
</div>
5. <html>
<head>
<script type="text/javascript" src="[Link]"></script>
</head>
<body>
<form action="#" name="StudentRegistration" onsubmit="return(validate());">

<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"


cellspacing="2">

<tr>
<td colspan=2>
<center><font size=4><b>Student Registration Form</b></font></center>
</td>
</tr>

<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>

<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername"
size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>

<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>

<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>

<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>

<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="[Link]">[Link]</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>

<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>

</tr>

<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>

</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>

<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>

<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
</body>
</html>
6.

<html>
<head>
<title>Institute of Engineering</title>
</head>
<body>
<ul>
<li><a href="[Link]
<li><a
href="[Link]
<li><a href="[Link]
<li><a href="/about/visiting">Visit</a></li>
<li class="last-side-tactical"><a href="/atoz"
id="wm- az">W&amp;M A-Z</a></li>
</ul>
</nav>
<nav id="side_top_nav">
<ul>
<li ><a href="/about" id="about" title="About William
&#38; Mary">About</a></li>
<li ><a href="/academics" id="academics"
title="InstituteAcademics">Academics</a></li>
<li ><a href="/admission" id="admission" title="InstituteAdmission &#38;
Aid">Admission &#38; Aid</a></li>
<li ><a href="/research" id="research"
title="InstituteResearch">Research</a></li>
<li ><a href="/campuslife" id="campus" title="InstituteCampus
Life">Campus Life</a></li>
<li ><a href="/news" id="news_events"
title="InstituteNews">News</a></li>
<li><a href="[Link] id="athletics"
title="InstituteAthletics">Athletics</a></li>
<li><a href="[Link] id="alumni"
title="InstituteAlumni">Alumni</a></li>
<li><a href="/giving" id="giving" title="InstituteGiving">Giving</a></li>
</ul>
</nav>
</div>
<header id="main-header"><div id="topbar"><a class="action_left icon-font"
href="#" id="menu_btn">&#xe9bd;</a><a class="mobile-header-logo"
href="[Link]"><img alt="William and Mary" id="top_mark"
src="img/wm_wordmark_single_line_green.png"/></a><a class="action_right
icon-font" href="#" id="search_btn">&#xe986;</a></div>
<div id="desktop_header">

<nav id="tactical_nav">
<ul>
<li>
<a href="[Link]
</li>
<li>
<a href="[Link]
</li>
<li>
<a href="[Link]
</li>
<li>
<a href="/about/visiting">Visit</a>
</li>
<li>
<a href="/atoz" id="wm-az">W&amp;M A-Z</a>
</li>
</ul>
<
</nav>

<nav id="global_nav"><ul><li><a href="/about" id="about" >About</a>


</li><li><a href="/academics" id="academics" >Academics</a>
</li><li><a href="/admission" id="admission" >Admission &amp; Aid</a>
</li><li><a href="/research" id="research" >Research</a>
</li><li><a href="/campuslife" id="campus" >Campus life</a>
</li><li><a href="/news" id="news_events" >News</a>
</li><li><a href="[Link] id="athletics">Athletics</a>
</li><li><a href="[Link] id="alumni">Alumni</a>
</li><li><a href="/giving" id="giving" >Giving</a>
</li></ul>
</nav>

</div>
<!-- end desktop_header -->
</header>
<!-- end main_header -->

<nav class="footer_col" id="audience_links">


<a href="/alumnigateway">Alumni</a>
<a href="/currentstudents">Current Students</a>
<a href="/employers">Employers</a>
<a href="/facultystaff">Faculty &amp; Staff</a>
<a href="/parentsandfamilies">Parents &amp; Families</a>
<a href="/friends">Friends &amp; Neighbors</a>
</nav>
<nav class="footer_col" id="additional_links">
<a href="[Link]
<a href="/offices/hr/careers">Careers at W&amp;M</a>
<a href="/offices/compliance/policies">Policies</a>
<a href="/about/administration/emergency">Emergency
Information</a>
<a href="/aboutthissite">About this Site</a>
</nav>
<div id="contact_info">
<a href="/" class="wordmark">
<img alt="The College of William and Mary" id="footer_mark"
src="/img/wm_wordmark_single_line_white.png"/>
</a>
<p>Williamsburg, VA
<br/>
<a href="/contactus" class="contact-us">Contact Us</a>
All Rights Reserved &#169;
<span id="footercopyyear"></span>
</p>
</div>
</div>
</footer>

<div></div>
</body>
</html>
7.

<html>
<head>
<title> My First Page </title>
</head>
<body>
<UL type='A'>
<LI>Red
<LI>Blue
<LI>Green
<LI>White
</UL><br>

<OL type='square'>
<LI>Red
<LI>Blue
<LI>Green
<LI>White
</OL><br>

<dl>
<dt>Red</dt>
<dd>Red color has the highest wavelength.</dd>
<dt>Violet</dt>
<dd>Violet color has the shortest wavelength.</dd>
</body>
</html>
8.

<html>
<FRAMESET Rows = "30%,*" >
<Frame Src="[Link]" >
<FRAMESET Cols = "25%,*">
<Frame Src="[Link]" >
<Frame Src="[Link]" >
</FRAMESET>
</FRAMESET>
</html>
9.
<!DOCTYPE html>
<html>

<body>
<h1 style="color:blue" align="center">This is a Blue Heading</h1>
<p style="color:red">This is a red paragraph with inline css</p>

</body>
</html>
10.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p{
color:red;
font-family:courier;
font-size:160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
11.
Css

#para1
{ color:
red;
text-align: center;
font-family:courier;
}

h1{
color:blue;
font-size:200%;
text-align:right;
background-color: #6495ed;
}

#para {
color: green;
text-align: center;
font-size:500%;
}

p{
border:1px solid black;
padding:10px;
margin:30px;
background-color: #e0ffff;
}

body {

background-image:url("[Link]");

div{
text-decoration:overline;
font-size:200%;
}
Html code

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>

<h1>This is a heading</h1>
<p id="para">This is a green paragraph.</p>
<p id="para1">This is a red paragraph.</p>

<p>This is some paragraph.</p>

<div>html is a markup language. it stands for hypertext mark up


language. it is used to create web pages. html has a very simple syntax.
html uses tags for formatting and for placing objects. html is interpreted
by the browser. it is case-insensitive.</div>

</body>
</html>
12.

<html>
<head>
<title>

Greetings </title>
</head>
<body>
<script language="JavaScript">
firstName = prompt("Please enter your name", "");
[Link]("Hello " +

firstName + ", welcome to my Web page.");


</script>
<p> This is my web page... </p>
</body>
</html>
13.

<html>
<head>
<script type="text/javascript" src="[Link]"></script>
</head>
<body>
<form action="#" name="StudentRegistration" onsubmit="return(validate());">

<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"


cellspacing="2">

<tr>
<td colspan=2>
<center><font size=4><b>Student Registration Form</b></font></center>
</td>
</tr>

<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>

<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername"
size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>

<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>

<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>

<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="[Link]">[Link]</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>

<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>

</tr>
<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>

</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>

<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>

<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
</body>
</html>
Javascript

function validate()
{
if( [Link] == "" )
{
alert( "Please provide your Name!" );
[Link]() ;
return false;
}
if( [Link] == "" )
{
alert( "Please provide your Father Name!" );
[Link]() ;
return false;
}

if( [Link] == "" )


{
alert( "Please provide your Postal Address!" );
[Link]() ;
return false;
}
if( [Link] == "" )
{
alert( "Please provide your Personal Address!" );
[Link]() ;
return false;
}
if ( ( [Link][0].checked == false )
&& ( [Link][1].checked == false ) )
{
alert ( "Please choose your Gender: Male or
Female" ); return false;
}
if( [Link] == "-1" )
{
alert( "Please provide your City!" );
[Link]() ;
return false;
}
if( [Link] == "-1" )
{
alert( "Please provide your Course!" );

return false;
}
if( [Link] == "-1" )
{
alert( "Please provide your Select District!" );

return false;
}
if( [Link] == "-1" )
{
alert( "Please provide your Select State!" );

return false;
}
if( [Link] == "" ||
isNaN( [Link]) ||
[Link] != 6 )
{
alert( "Please provide a pincode in the format ######." );
[Link]() ;
return false;
}
var email = [Link];
atpos = [Link]("@");
dotpos = [Link](".");
if (email == "" || atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
[Link]() ;
return false;
}
if( [Link] == "" )
{
alert( "Please provide your DOB!" );
[Link]() ;
return false;
}
if( [Link] == "" ||
isNaN( [Link]) ||
[Link] != 10 )
{
alert( "Please provide a Mobile No in the format
123." );
[Link]() ;
return false;
}
return( true );
}
14.

<!DOCTYPE html>
<html>
<head>
<title>PHP insertion</title>
<link href="css/[Link]" rel="stylesheet">
</head>
<body>
<div class="maindiv">
<!--HTML Form -->
<div class="form_div">
<div class="title">
<h2>Insert Data In Database Using PHP.</h2>
</div>
<form action="[Link]" method="post">
<!-- Method can be set as POST for hiding values in URL-->
<h2>Form</h2>
<label>Name:</label>
<input class="input" name="name" type="text" value="">
<label>Email:</label>
<input class="input" name="email" type="text" value="">
<label>Contact:</label>
<input class="input" name="contact" type="text" value="">
<label>Address:</label>
<textarea cols="25" name="address" rows="5"></textarea><br>
<input class="submit" name="submit" type="submit" value="Insert">
</form>
</div>
</div>
</body>
</html>

<?php
$connection = mysql_connect("localhost", "root", ""); // Establishing
Connection with Server
$db = mysql_select_db("colleges", $connection); // Selecting Database from
Server
if(isset($_POST['submit'])){ // Fetching variables of the form which travels in
URL
$name = $_POST['name'];
$email = $_POST['email'];
$contact = $_POST['contact'];
$address = $_POST['address'];
if($name !=''||$email !=''){
//Insert Query of SQL
$query = mysql_query("insert into students(student_name, student_email,
student_contact, student_address) values ('$name', '$email', '$contact',
'$address')");
echo "<br/><br/><span>Data Inserted successfully...!!</span>";
}
else{
echo "<p>Insertion Failed <br/> Some Fields are Blank. !!</p>";
}
}
mysql_close($connection); // Closing Connection with Server
?>
15.

<html>
<head>
<title>Browser Information</title>
</head>
<body>
<h1>Browser Information</h1>
<hr>
<p>
The <b>navigator</b> object contains the following
information about the browser you are using.
</p>
<ul>
<script LANGUAGE="JavaScript" type="text/javascript">
[Link]("<li><b>Code Name:</b> " + [Link]);
[Link]("<li><b>App Name:</b> " + [Link]);
[Link]("<li><b>App Version:</b> " + [Link]);
[Link]("<li><b>User Agent:</b> " + [Link]);
[Link]("<li><b>Language:</b> " + [Link]);
[Link]("<li><b>Platform:</b> " + [Link]);
</script>
</ul>
<hr>
</body>
</html>
16.

import [Link].*;
import [Link].*;

public class Shapes extends


Applet{ int x=300,y=100,r=50;
public void paint(Graphics g){
[Link](30,300,200,10);
[Link](x-r,y-r,100,100);
[Link](400,50,200,100);
}
}
17.

<?xml-stylesheet href="[Link]"?>
<ARTICLE>
<HEADLINE>A Fairytale</HEADLINE>
<AUTHOR>John Brown</AUTHOR>
<PARA>
Once upon a time, in a kingdom called Pansia lived a brave King. He
loved to play
<INSTRUMENT>flute</INSTRUMENT>
One fine day he called his ministers to hear him play the instrument.
</PARA>
</ARTICLE>

ARTICLE {
font-family: serif;
background: white; color: #003
}
AUTHOR {
font-size: large;
margin: 1em 0
}
HEADLINE
{
font-size: x-large;
margin-bottom: 1em
}
PARA {
text-indent: 1em;
text-align: justify
}
INSTRUMENT
{
font-style: italic
}
18.

<?xml-stylesheet href="[Link]"?>
<ARTICLE>
<HEADLINE>A Fairytale</HEADLINE>
<AUTHOR>John Brown</AUTHOR>
<PARA>
Once upon a time, in a kingdom called Pansia lived a brave King. He
loved to play
<INSTRUMENT>flute</INSTRUMENT>
One fine day he called his ministers to hear him play the instrument.
</PARA>
</ARTICLE>

You might also like