lOMoARcPSD|20739160

CCS375 - Web Technologies Lab Manual

Web Technology (Anna University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by dhivya sri ([email protected])
 lOMoARcPSD|20739160

DHANALAKSHMI COLLEGE OF ENGINEERING

Tambaram, Chennai – 601 301

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CCS375 – WEB TECHNOLOGIES LABORATORY

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

DHANALAKSHMI COLLEGE OF ENGINEERING

Tambaram, Chennai – 601 301

Subject Code : CCS375

Subject Name : Web Technologies Lab

University : Anna University, Chennai

Regulation : 2021R

Year/Semester : III year / V Sem

Prepared By Reviewed By Approved By

Name

Signature

Designation

Date

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

DHANALAKSHMI COLLEGE OF ENGINEERING

Our Institute is committed to produce highly disciplined, conscientious, and enterprising

professionals conforming to global standards through value-based quality education, and

research excellence.

M1: To provide competent technical manpower capable of meeting the global industrial
requirements through excellence in education

M2: To establish the Center of Excellence on the cutting-edge technologies that initiate new
ideas, leading to the emergence of innovators, leaders, and entrepreneurs

M3: To instill the highest level of self-confidence, professionalism, academic excellence,

and
engineering ethics

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

To impart knowledge in Computer Science and Engineering through quality education and
to develop engineers with global employability, entrepreneurship capability, research
focus and social responsibility.

M1: To develop highly competent and globally employable engineers in the field of
ComputerScience and Engineering

M2: To inculcate human values among the student community to realize their societalCommitment
M3: To provide learning ambience for enhancing innovations, research, and valuesamong
the students M4: To facilitate the students to work with recent tools and technologies

M5: To motivate and guide students to take up higher studies and establishentrepreneurial
ventures

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

PROGRAM EDUCATIONAL OBJECTIVES

PEO1: Fundamentals: To equip students with fundamental knowledge in

Mathematics, Science and Engineering to solve real world problems

PEO2: Core Competence: To develop proficiency as computer engineers with an

ability to solve a wide range of computational problems in industry, government, or
other work environments

PEO3: Breadth: To provide relevant training and experience to bridge the gap
between the institute and industry, which enables them to find solutions for real-
time problems using modern technologies

PEO4: Professional Skills: To bestow students with adequate training and provide
opportunities to enhance critical thinking, communication, teamwork, leadership
skills and ethical behaviour

PEO5: Life Long Learning: To develop the ability of students to establish themselves
as professionals in Computer Science and Engineering with awareness to pursue
higher education and adopt the changes in work environment through lifelong
learning

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

PROGRAM OUTCOMES

PO1: Engineering knowledge: Apply the knowledge of mathematics, science, engineering

fundamentals, and engineering specialization to the solution of complex engineering
problems.

PO2: Problem analysis: Identify, formulate, review research literature, and analyze
complex engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.

PO3: Design/Development of solutions: Design solutions for complex engineering

problems and design system components or processes that meet the specified needs with
appropriate consideration for the public health and safety, and the cultural, societal, and
environmental considerations.

PO4: Conduct investigations of complex problems: Use research-based knowledge and

research methods including design of experiments, analysis and interpretation of data, and
synthesis of the information to provide valid conclusions.

PO5: Modern tool usage: Create, select, and apply appropriate techniques, resources, and
modern engineering and IT tools including prediction and modeling to complex
engineering activities with an understanding of the limitations.

PO6: The engineer and society: Apply reasoning informed by the contextual knowledge to
assess societal, health, safety, legal and cultural issues and the consequent responsibilities
relevant to the professional engineering practice.

PO7: Environment and sustainability: Understand the impact of the professional

engineering solutions in societal and environmental contexts, and demonstrate the
knowledge of, and need for sustainable development.

PO8: Ethics: Apply ethical principles and commit to professional ethics and
responsibilities and norms of the engineering practice.

PO9: Individual and team work: Function effectively as an individual, and as a member
or leader in diverse teams, and in multidisciplinary settings.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

PO10: Communication: Communicate effectively on complex engineering activities

with the engineering community and with society at large, such as, being able to
comprehend and write effective reports and design documentation, make effective
presentations, and give and receive clear instructions.

PO11: Project management and finance: Demonstrate knowledge and understanding

of the engineering and management principles and apply these to one’s own work, as
a member and leader in a team, to manage projects and in multidisciplinary
environments.

PO12: Life-long learning: Recognize the need for, and have the preparation and
ability to engage in independent and life-long learning in the broadest context of
technological change.

PROGRAM SPECIFIC OUTCOMES

PSO1: To apply software engineering principles and practices for developing

quality software for scientific and business applications

PSO2: To adapt the emerging Information and Communication Technology tools in

various domains for fulfilling research gaps

PSO3: To analyses design and develop computing solutions by applying foundational

concepts of Computer Science and Engineering

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

CCS375 WEB TECHNOLOGIES LABORATORY LTPC

0042

COURSE OBJECTIVES:
● To understand different Internet Technologies
● To learn java-specific web services architecture
● To Develop web applications using frameworks

List of Experiments

1. Create a web page with the following using HTML.

• To embed an image map in a web page.
• To fix the hot spots.
• Show all the related information when the hot spots are clicked.

2. Create a web page with all types of Cascading style sheets.

3. Client Side Scripts for Validating Web Form Controls using DHTML.

4. Installation of Apache Tomcat web server.

5. Write programs in Java using Servlets:

● To invoke servlets from HTML forms.

● Session Tracking.

6. Write programs in Java to create three-tier applications using JSP and Databases

● For conducting on-line examination.

● For displaying student mark list.

Assume that student information is available in a database which has been stored in
a database server.

7. Programs using XML – Schema – XSLT/XSL.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

List of Equipments: (30 Students per Batch)

Tools: Ubuntu OS, Visual Studio Code / Gedit, Apache Tomcat Webserver, MySQL DB.

TOTAL: 30 PERIODS

COURSE OUTCOMES:
At the end of this course, the students will be able to: CO1:
Construct a basic website using HTML and CSS CO1:
Construct a basic website using HTML
CO2: Build dynamic web page with validation using Java Script objects and by
applying different
CO3: Develop server side programs using Servlets and JSP.
CO4: Construct simple web pages in PHP and to represent data in XML format.
CO5: Develop interactive web applications.

TEXTBOOKS:

1. Deitel and Deitel and Nieto, Internet and World Wide Web - How to Program, Prentice
Hall, 5th Edition, 2011.
2. Jeffrey C and Jackson, Web Technologies A Computer Science Perspective, Pearson
Education, 2011.
3. Angular 6 for Enterprise-Ready Web Applications, Doguhan Uluca, 1st edition, Packt
Publishing

REFERENCES:

1. Stephen Wynkoop and John Burke “Running a Perfect Website”, QUE, 2nd Edition,1999.
2. Chris Bates, Web Programming – Building Intranet Applications, 3rd Edition, Wiley
Publications, 2009.
3. Gopalan N.P. and Akilandeswari J., “Web Technology”, Prentice Hall of India, 2011.
4. UttamK.Roy, “Web Technologies”, Oxford University Press, 2011.
5. Angular: Up and Running: Learning Angular, Step by Step, Shyam Seshadri, 1st edition,
O′Reilly

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Exp.No List of Experiments

1 Create a web page with the following using HTML.

● To embed an image map in a web page.
● To fix the hot spots.
● Show all the related information when the hot spots are clicked.
2 Create a web page with all types of Cascading style sheets.

3 Client Side Scripts for Validating Web Form Controls using DHTML.

4 Installation of Apache Tomcat web server.

5 Write programs in Java using Servlets:

● To invoke servlets from HTML forms.
● Session Tracking.
6 Write programs in Java to create three-tier applications using JSP and Databases
● For conducting on-line examination.
● For displaying student mark list. Assume that student information is
available in a database which has been stored in a database server.
7 Programs using XML – Schema – XSLT/XSL.

Additional Experiments - Contents beyond syllabus

S. No. Name of Experiments

1 Installing virtual studio code extensions (any three)

2 Create a Webpage for showing Timetable

3 Create a Faculty Profile/Student Profile.

Open Ended Experiments

S. No. Name of Experiments

1 Create a Mobile Responsive Website for Small Business.

2
Create a (complete) Responsive Online Education Website Using HTML/CSS/JS
/PHP

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

1. Web Page Creation with Image Map

Aim:

To create a web page which includes a map and display the related information when a hot spot is clicked in
the map.

Algorithm:

1. Create a html file with map tag.

2. Set the source attribute of the img tag to the location of the image and also set the use map attribute. 3.
Specify an area with name, shape and href set to the appropriate values.
4. Repeat step 3 as many hot spots you want to put in the map.
5. Create html files for each and every hot spot the user will select.

Program:

ImageMap.html
<HTML>
<HEAD>
<TITLE>Image Map</TITLE> </HEAD>
<BODY>
<img src="india_map.jpg" usemap="#metroid" ismap="ismap" > <map name="metroid"
id="metroid">
<area href="TamilNadu.html" shape="circle" coords="208,606,50" title="TamilNadu"/>
<area href="Karnataka.html" shape="rect" coords = "130,531,164,535" title ="Karnataka" />
<area href="AndhraPradesh.html" shape="poly" coords =
"227,490,238,511,230,536,198,535,202,503" title ="Andhra Pradesh" />
<area href="Kerala.html" shape="rect" coords = "154,606,166,621" title ="Kerala" /> </map>
</BODY>
</HTML>
TamilNadu.html
<HTML><HEAD>
<TITLE>About Tamil Nadu</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Tamil Nadu</H1></CENTER> <HR>
<UL>
<LI>Area : 1,30,058 Sq. Kms.</LI>
<LI>Capital : Chennai</LI>
<LI>Language : Tamil</LI>
<LI>Population : 6,21,10,839</LI> </UL><hr>
<a href='ImageMap.html'>India Map</a>
</BODY>
</HTML>
Karnataka.html
<HTML>
<HEAD>
<TITLE>About Karnataka</TITLE> </HEAD>
<BODY>
<CENTER><H1>Karnataka</H1></CENTER>
<HR>
5
<UL>
<LI>Area : 1,91,791 Sq. Kms</LI>

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

<LI>Capital : Bangalore</LI>
<LI>Language : Kannada</LI>
<LI>Population : 5,27,33,958</LI>
</UL>
<hr>
<a href='ImageMap.html'>India Map</a>
</BODY>
</HTML>
AndhraPradesh.html
<HTML>
<HEAD>
<TITLE>About Andhra Pradesh</TITLE> </HEAD>
<BODY>
<CENTER><H1>Andhra Pradesh</H1></CENTER> <HR>
<UL>
<LI>Area : 2,75,068 Sq. Kms</LI>
<LI>Capital : Hyderabad</LI>
<LI>Language : Telugu</LI>
<LI>Population : 7,57,27,541</LI>
</UL>
<hr>
<a href='ImageMap.html'>India Map</a>
</BODY>
</HTML>
Kerala.html
<HTML>
<HEAD>
<TITLE>About Kerala</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Kerala</H1></CENTER>
<HR>
<UL>
<LI>Area : 38,863 Sq. Kms.</LI>
<LI>Capital : Thiruvananthapuram</LI>
<LI>Language : Malayalam</LI>
<LI>Population : 3,18,38,619</LI>
</UL>
<hr>
<a href='ImageMap.html'>India Map</a>
</BODY></HTML>
Note:
Store the image (India_map.jpg) in current folder

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Output

Result:

Thus the creation of a web page which includes a map and display the related in-formation when a hot spot
is clicked in the map was executed successfully.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Exercise 2
Aim:

To create a web page that displays college information using various style sheet

Algorithm:

1. Create a web page with frame sets consisting two frames

2. In the first frame include the links
3. In the second frame set display the web page of the link
4. Create a external style sheets
5. Create a embedded style sheets
6. Create a inline and internal style sheets and make it link to the external style sheets

Program:

XYZ.CSS:

h3
{
font-family:arial;
font-size:20;
color:cyan
}
table{
border-color:green
}
td
{
font-size:20pt;
color:magenta
}

HTML CODE:

<html>
<head>
<h1>
<center>ALL STYLE SHEETS</center>
</h1>
<title>USE of INTERNAL and EXTERNAL STYLESHEETS </title>
<link rel="stylesheet" href="xyz.css" type="text/css">
<style type="text/css">
.vid
{
font-family:verdana;
font-style:italic;
color:red;
text-align:center
}

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

.ani
{
font-family:tahoma;
font-style:italic;
font-size:20;
text-align:center;
}
font
{
font-family:georgia;
color:blue;
font-size:20
}
ul
{
list-style-type:circle
}
p
{
font-family: georgia, serif;
font-size: x-small;
}
hr
{
color: #ff9900; height: 1px
}
a:hover
{
color: #ff0000;
text-decoration: none
}
</style>
</head>
<body>
<h1 style="color:blue;margin-left:30px;">Welcome</h1> //In-line style Sheet
<ol style="list-style-type:lower-alpha">
<b>St.Anne’s College of Engineering and Technology </b>
<br>
<br>
<br>
<li> EEE</li>
<li> ECE </li>
<li> MECH</li>
<li> CSE</li>
</ol>
<p style="font-size:20pt;color:purple">Details</p>
<p class="ani">St.Anne’s College <br>It is approved by AICTE(All India Council for
Technical Education). It is affliated to Anna University.<br></p>
<h2 class="vid"> St.Anne’s college of engineering </h2> <br>
<font>It is an ISO certified Institution

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

</font>
<br>
<br>
<font>
<h2>List of Courses offered</h2>
<ul>
<li>Computer Science and Engineering</li>
<li>Ece</li>
<li>mech</li>
<li>eee</li>
</ul>
</font>
<h3>Results of cse students</h3>
<table width="100%" cellspacing="2" cellpadding="2" border="5"> <tr>
<th>S.NAME</th> <th>MARKS</th> <th>RESULT</th>
</tr>
<tr>
<td align="center">Suppriya</td> <td align="center">100</td>
<td align="center">pass</td>
</tr>
<tr>
<td align="center">Devishree</td> <td align="center">99</td>
<td align="center">pass</td>
</tr>
<tr>
<td align="center">Vinayagam</td> <td align="center">98</td>
<td align="center">pass</td> </tr>
</table>
</body>
</html>

Output:

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Result:

Thus the creation of a web page that displays college information using various style sheet was successfully
executed and verified.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Exercise 3

VALIDATING WEB FORM USING DHTML

AIM:
To write the HTML codes using JAVA Script and CSS to create Client Side Scripts for
Validating Web Form Controls.

ALGORITHM:

Step 1 : Open the notepad.

Step 2 : Create the HTML header and give the title as “WebForm”.
Step 3 : Specify the style type as “text/css”.
Step 4 : Define the properties for the Layout and Layer.
Step 5 : Specify the script type as “text/javascript”.
Step 6 : Create a function as “validate()”.
Step 7 : Specify the conditions for the form to be created using javascript.
Step 8 : Open the body of the HTML.
Step 9 : Create the division as “Layer”.
Step 10: Create a form and name it. Create a table for better alignment of the contents of the
form.
Step11: Specify the requirements of the form like Name, Qualification, Date Of Birth, etc.
Step 12: Define the input type, name and id of all the required parameters.
Step 13: Create a “Submit” button and make a link to the function using onclick=“validate()”.
Step 14: Save and run the HTML file to get the output.

PROGRAM:

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#Layer1 {
position:absolute;
width:1047px;
height:792px;
z-index:1;
left: 103px;
top: 80px;
}
.style1 {
color: #000099;
font-weight: bold;
background-color:#00CCFF;
}
.style2 {
color: #000099;
font-weight: bold;
background-color:#00CCFF;
}
#Layer2 {
position:absolute;
width:1040px;
Downloaded by dhivya sri ([email protected])
 lOMoARcPSD|20739160

height:49px;
z-index:2;
left: 59px;
top: 9px;
}
.style3 {
color: #006666;
font-weight: bold;
background-color:#E0D2F0;
}

body{
background-color:#DADADA;
}
</style>
<script type="text/javascript">
function validation()
{
if(document.validate.name.value=="")
{
alert("enter the full name")
document.validate.name.focus();
return false
}
if(!isNaN(document.validate.name.value))
{
alert("enter the valid name");
document.validate.name.focus();
document.validate.name.value="";
return false
}
if(document.validate.day.value=="0")
{
alert("enter the day")
document.validate.day.focus();
return false
}
if(document.validate.month.value=="0")
{
alert("enter the month")
document.validate.month.focus();
return false
}
if(document.validate.year.value=="0")
{
alert("enter the year")
document.validate.year.focus();
return false
}
if(document.validate.gender.value=="0")
{
alert("enter the gender")
document.validate.gender.focus();
return false

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

}
if(document.validate.address.value=="")
{
alert("enter the address")
document.validate.address.focus();
return false
}
if(document.validate.city.value=="")
{
alert("enter the city")
document.validate.city.focus();
return false
}
if(!isNaN(document.validate.city.value))
{
alert("enter the valid City")
document.validate.city.focus();
document.validate.city.value="";
return false
}
if(document.validate.state.value=="")
{
alert("enter the state")
document.validate.state.focus();
return false
}
if(!isNaN(document.validate.state.value))
{
alert("enter the valid state")
document.validate.state.focus();
document.validate.state.value="";
return false
}
if(document.validate.pincode.value=="")
{
alert("enter the pincode ")
document.validate.pincode.focus();
return false
}
if( isNaN(document.validate.pincode.value))
{
alert("enter a valid pincode")
document.validate.pincode.focus();
return false
}
if(document.validate.pincode.value.length!=6)
{
alert("please enter the valid pincode")
document.validate.pincode.focus();
return false
}
if(document.validate.address.value=="")
{
alert("enter the address")
document.validate.address.focus();

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

return false
}
if(document.validate.email.value=="")
{
alert("enter the email id")
document.validate.email.focus();
return false
}
if(!(document.validate.email.value==""))
{
var x=document.validate.email.value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
document.validate.email.focus();
return false;
}
}
if(document.validate.mobile.value=="")
{
alert("enter the mobile no")
document.validate.mobile.focus();
return false
}
if( isNaN(document.validate.mobile.value))
{
alert("enter a valid mobile no")
document.validate.mobile.focus();
document.validate.mobile.value="";
return false
}
if(document.validate.mobile.value.length !=10)
{
alert("enter the valid mobile no")
document.validate.mobile.focus();
document.validate.mobile.select();
return false
}
if(document.validate.qualification.value=="0")
{
alert("enter the qualification")
document.validate.qualification.focus();
return false
}
if(document.validate.experience.value=="0")
{
alert("enter the experience")
document.validate.experience.focus();
return false
}
if(document.validate.project.value=="")
{
alert("enter the project description")

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

document.validate.project.focus();
return false
}
if(document.validate.salary.value=="")
{
alert("enter the salary ")
document.validate.salary.focus();
return false
}
if( isNaN(document.validate.salary.value))
{
alert("enter a valid salary")
document.validate.salary.focus();
document.validate.salary.value="";
return false
}
}

</script>
</head>

<body>
<div id="Layer1">
<form id="validate" name="validate" method="post" action="">
<p>&nbsp;</p>
<table width="886" border="0" cellspacing="2" cellpadding="2">

<tr>
<td colspan="2"><div align="center" class="style1">Personal Details </div></td>
<td width="30" rowspan="10">&nbsp;</td>
<td colspan="2"> <div align="center" class="style2">Education and Experience </div></td>
</tr>
<tr>
<td width="111">Full Name</td>
<td width="255"><label>
<input name="name" type="text" id="name" />
</label></td>
<td width="152">Qualification</td>
<td width="217"><select name="qualification">
<option value="0">Select</option>
<option value="1">UG</option>
<option value="2">PG</option>

<option value="3">PHD</option>

</select></td>
</tr>
<tr>
<td>Date of Birth </td>
<td><select name="day">
<option value="0">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
Downloaded by dhivya sri ([email protected])
 lOMoARcPSD|20739160

<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>

<select name="month">
<option value="0">Month</option>
<option value="1">Janauray</option>
<option value="2">Feburary</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">Sepetember</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select name="year">
<option value="0">Year</option>
<option value="1">2009</option>
<option value="2">2008</option>
<option value="3">2007</option>
<option value="4">2006</option>
<option value="5">2005</option>
<option value="6">2004</option>
<option value="7">2003</option>

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

<option value="8">2002</option>
<option value="9">2001</option>
<option value="10">2000</option>
<option value="11">1999</option>
<option value="12">1998</option>
<option value="13">1997</option>
<option value="14">1996</option>
<option value="15">1997</option>
<option value="16">1996</option>
<option value="17">1995</option>
<option value="18">1994</option>
<option value="19">1993</option>
<option value="20">1992</option>
<option value="21">1991</option>
<option value="22">1990</option>
<option value="23">1989</option>
<option value="24">1988</option>
<option value="25">1987</option>
<option value="26">1986</option>
<option value="27">1985</option>
<option value="28">1984</option>
<option value="29">1983</option>
<option value="30">1982</option>
<option value="31">1981</option>
<option value="32">1980</option>
</select></td>
<td>Work Experience </td>
<td><select name="experience">
<option value="0">Select</option>
<option value="1">Fresher</option>
<option value="2">1 yr</option>
<option value="3">2 yrs</option>
<option value="4">3 yrs</option>
<option value="5">4 yrs</option>
<option value="6">5 yrs</option>
<option value="7">>5 yrs</option>

</select></td>
</tr>
<tr>
<td height="70">Sex</td>
<td><select name="gender" id="gender" >
<option value="0">Select Gender</option>
<option value="1">Male</option>

<option value="2">Female</option>
</select></td>
<td>Project Description </td>
<td><label>
<textarea name="project" id="project"></textarea>
</label></td>
</tr>
<tr>
Downloaded by dhivya sri ([email protected])
 lOMoARcPSD|20739160

<td>Address</td>
<td><label>
<textarea name="address" id="address"></textarea>
</label></td>
<td>Expected Salary P.A </td>
<td><label>
<input name="salary" type="text" id="salary" />
</label></td>
</tr>
<tr>
<td>City</td>
<td><label>
<input name="city" type="text" id="city" />
</label></td>
<td colspan="2" rowspan="5">&nbsp;</td>
</tr>
<tr>
<td>State</td>
<td><label>
<input name="state" type="text" id="state" />
</label></td>
</tr>
<tr>
<td>PinCode</td>
<td><label>
<input name="pincode" type="text" id="pincode" />
</label></td>
</tr>
<tr>
<td>Email ID</td>
<td><label>
<input name="email" type="text" id="email" />
</label></td>
</tr>
<tr>
<td>Mobile Number</td>
<td><label>
<input name="mobile" type="text" id="mobile" />
</label></td>
</tr>
<tr>
<td colspan="5"><label>
<div align="center">
<input type="submit" name="Submit" value="Submit" onclick="return validation()" />
<label>
<input type="reset" name="Submit2" value="Reset" />
</label>
</div>
</label></td>
</tr>
</table>

</form>
</div>
<div id="Layer2">

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

<div align="center">
<h1 class="style3">Job Registration Form </h1>
</div>
</div>
</body>
</html>

Output

RESULT:
The HTML page has been created using JAVA Script and CSS to create Client Side
Scripts for Validating Web Form Controls.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Exercise 4 Install Apache Web Server on Ubuntu

Aim:
To install an Apache Web Server on Ubuntu System.

Algorithm:

Step 1: Install Apache.

To install the Apache package on Ubuntu, use the command:
sudo apt-get install apache2. ...

Step 2: Verify Apache Installation.

To verify Apache was installed correctly,
open a web browser and type in the address bar: http://local.server.ip.

Step 3: Configure Your Firewall.

Apache is an open source web server software created and maintained by Apache
software foundation. Since it an open source so it is free to use. It is a web server
used for one or more HTTP based websites. It is widely used by web hosting
companies to provide shared and virtual hosting.

Steps to install the Apache server:

● Make Superuser: Open terminal and use following command to make
yourself superuser.
sudo su

● Update Ubuntu package: Use the following command to update the

Ubuntu package list.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

sudo apt update

● Install Apache: After installing the Ubuntu package list, use the following
command to install apache server.
sudo apt install apache2

● After completion of the installation process, the Apache server

automatically start. The status of the Apache server can be checked by
using the following command.
sudo systemctl status apache2

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

● Open the browser and type localhost or 127.0.0.1 on the address bar. It
will display the default page of the Apache server.

Result:
An Apache Web Server has been installed on Ubuntu System.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Exercise 5
INVOKING SERVLETS FROM HTML FORM

AIM:

To write a java program to invoke servlets from HTML form.

ALGORITHM:

client.html
(1) Create a web page using HTML form that contains the fields such as text, password and one submit
button.
(2) Set the URL of the server as the value of form’s action attribute.
(3) Run the HTML program.
(4) Submit the form data to the server.
server.java
(1) Define the class server that extends the property of the class GenericServlet.
(2) Handle the request from the client by using the method service() of GenericServlet class.
(3) Get the parameter names from the HTML form by using the method getParameterNames().
(4) Get the parameter values from the HTML forms by using the method getParameter().
(5) Send the response to the client by using the method of PrintWriter class.

server.java:

import java.io.*;
import java.util.*;
import javax.servlet.*;
public class server extends GenericServlet
{
public void service(ServletRequest req,ServletResponse res)throws ServletException,IOException
{
PrintWriter pw=res.getWriter();
pw.print("<h3>Registration Successful...</h3>");
Enumeration e=req.getParameterNames();
while(e.hasMoreElements())
{
String str1=(String)e.nextElement();
String str2=req.getParameter(str1);
pw.print(str1+"="+str2+"<br/>");
}
pw.close();
}
}

web.xml:
<web-app>
<servlet>
<servlet-name>Register</servlet-name>
<servlet-class>server</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>Register</servlet-name>
Downloaded by dhivya sri ([email protected])
 lOMoARcPSD|20739160

<url-pattern>/server</url-pattern>
</servlet-mapping>
</web-app>

Client.HTML:

<html>
<head>
<title>Invoking Servlet From HTML</title>
</head>
<body bgcolor="violet">
<form name="form1" method="post" action="http://localhost:8080/servlets1/server">
<fieldset>
<legend>Registration</legend>
Enter E-mail&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
<input type="text" name="LoginID" size="25"/><br/><br/>
Enter Password:
<input type="password" name="Password" size="25">
<input type="submit" Value="SUBMIT">
</fieldset>
</form>
</body>
</html>

Output:

Result:
Java program has been developed to invoke servlets from HTML form.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Exercise 6

6a. ONLINE EXAMINATION USING JSP

AIM:

To create a three tier application for conducting online examination using JSP and database.

ALGORITHM:

1. Design the HTML page (ExamClient.html) with the following

a) Create a form to get the input from the user.
b) Use radio buttons to make various options for the questions.
c) Set the URL of the server (ExamServer.jsp) as the value of the action attribute.
d) Use submit button to invoke the server and send the form data to the server.
2. Create the JSP file with the following
a) Read the input from the client.
b) Retrieve the answers from the database.
c) Match the answers from the user with the correct answers from the database table.
d) For each correct answer increment the mark by 5.
e) Server displays the mark and result to the client as a response.

ExamServer.jsp:

<%@page contentType="text/html" language="java" import="java.sql.*"%>

<html>
<head>
<title>Online Exam Server</title>
<style type="text/css">
body{background-color:black;font-family:courier;color:blue}
</style>
</head>
<body>
<h2 style="text-align:center">ONLINE EXAMINATION</h2>
<p>
<a href="ExamClient.html">Back To Main Page</a>
</p>
<hr/>
<%
String str1=request.getParameter("ans1");
String str2=request.getParameter("ans2");
String str3=request.getParameter("ans3");
int mark=0;
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:examDS");
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("SELECT * FROM examTab");
int i=1;
while(rs.next())
{
if(i==1)
{

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

String dbans1=rs.getString(1);
if(str1.equals(dbans1))
{
mark=mark+5;
}
}
if(i==2)
{
String dbans2=rs.getString(1);
if(str2.equals(dbans2))
{
mark=mark+5;
}
}
if(i==3)
{
String dbans3=rs.getString(1);
if(str3.equals(dbans3))
{
mark=mark+5;
}
}
i++;
}
if(mark>=10)
{
out.println("<h4>Your Mark Is : "+mark+"</h4>");
out.println("<h3>Congratulations....! You Are Eligible For The Next Round...</h3>");
}
else
{
out.println("<h4>Your Mark is : "+mark+"</h4>");
out.println("<h3>Sorry....!! You Are Not Eligible For The Next Round...</h3>");
}
%>
</form>
</body>
</html>

ExamClient.HTML:

<html>
<head>
<title>Online Exam Client</title>
<style type="text/css">
body{background-color:black;font-family:courier;color:blue}
</style>
</head>
<body>
<h2 style="text-align:center">ONLINE EXAMINATION</h2>
<h3>Answer the following questions (5 marks for each correct answer)</h3>
<hr/>
<form name="examForm" method="post" action="ExamServer.jsp">
1. All computers must have <br/>
<input type="radio" name="ans1" value="Operating System">Operating System

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

<input type="radio" name="ans1" value="Application Software">Application Software

<input type="radio" name="ans1" value="CD Drive">CD Drive
<input type="radio" name="ans1" value="Microsoft word">Microsoft word
<br/><br/>
2. The term PC means <br/>
<input type="radio" name="ans2" value="Private Computer">Private Computer
<input type="radio" name="ans2" value="Professional Computer">Professional Computer
<input type="radio" name="ans2" value="Personal Computer">Personal Computer
<input type="radio" name="ans2" value="Personal Calculator">Personal Calculator
<br/><br/>
3.C was developed by?<br/>
<input type="radio" name="ans3" value="Dennis Ritchie">Dennis Ritchie
<input type="radio" name="ans3" value="Stroustrup">Stroustrup
<input type="radio" name="ans3" value="David Ritchie">David Ritchie
<input type="radio" name="ans3" value="Charles Babbage">Charles Babbage
<br/><br/>
<input type="submit" value="Check Your Result"/>
</form>
</body>
</html>

Result:

A three tier application for conducting online examination using JSP and database has been
successfully developed.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

6 b. DISPLAYING STUDENT MARK LIST USING JSP

AIM:

To create a three tier application for displaying student mark list using JSP and database.

ALGORITHM:

1. Design the HTML page (stud.html) with the following

a) Create a form to get the input (Register Number) from the user.

b) Set the URL of the server (marklist.jsp) as the value of the action attribute.

c) Use submit button to invoke the server and send the form data to the server.

2. Create the JSP file with the following

a) Read the parameter value (Register Number) from the form by using the method getParameter().

b) Server retrieves the details from the database table with respect to the form input.

c) Server displays the mark list to the client as the response.

marklist.jsp:

<%@ page contentType="text/html" language="java" import="java.sql.*"%>

<html>

<head>

<title>Three Tier Application</title>

<style type="text/css">

body{color:blue;font-family:courier;text-align:center}

</style>

</head>

<body>

<h2>EXAMINATION RESULT</h2><hr/>

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

<%

String str=request.getParameter("regno");

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

Connection con=DriverManager.getConnection("jdbc:odbc:markDS");

Statement stmt=con.createStatement();

ResultSet rs=stmt.executeQuery("SELECT*FROM markTab WHERE rno="+str);

while(rs.next())

%>

Register No:<%=rs.getObject(1)%><br/>

Name:<%=rs.getObject(2)%><br/>

<table border="1">

<th>SUBJECT</th><th>Mark</th>

<tr><td>Network Programming and Management</td><td><%=rs.getObject(3)%></td></tr>

<tr><td>Object Oriented Analysis and Design</td><td><%=rs.getObject(4)%></td></tr>

<tr><td>Cryptography and Network Security</td><td><%=rs.getObject(5)%></td></tr>

<tr><td>Embedded Systems</td><td><%=rs.getObject(6)%></td></tr>

<tr><td>Web Technology</td><td><%=rs.getObject(7)%></td></tr>

<tr><td>Software Requirement and Engineering</td><td><%=rs.getObject(8)%></td></tr>

</table>

<%

%>

<br/>

<a href="stud.html">Back</a>

</body>

</html>

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

stud.HTML:

<html>

<head>

<title>Three Tier Application</title>

<style type="text/css">

body{color:blue;font-family:courier;text-align:center}

</style>

</head>

<body>

<h2>EXAMINATION RESULT</h2><hr/>

<form name="f1" method"GET" action="marklist.jsp">

Enter Your Reg.No:

<input type="text" name="regno"/><br/><br/>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;

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

</form>

</body>

<html>

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Result:

A three tier application for displaying student mark list using JSP and database has been developed.create a
three tier application for displaying student mark list using JSP and database.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Exercise 7
7.a. SIMPLE XML FILE FOR ADDRESS BOOK

Aim :-
To create a simple XML document

Algorithm :

Step 1: open notepad.

Step 2: define root element as addbook
Step 3: Define Element as details.
Step 4: define sub element like name,DOB,city,state,pincode, work.
Step 5: define attribute for the work as title and company.
Step 6: close all the tag of subsequent element
Step 7. save the file with .xml extension.
Step 7: Open Browser and open the XML file.

Code: (XML file)

<?xml version="1.0"?>
<addbook>
<details>
<name>Yuvaraj</name>
<DOB>2-january-1978</DOB>
<city>Chennai</city>
<state>Tamilnadu</state>
<pincode>600089</pincode>
<work title="Project Manager" company="TCS" city="Chennai"></work>
<phoneno>984002561</phoneno>
<email>[email protected]</email>
</details>
<details>
<name>Venkatesh</name>
<DOB>30-March-1982</DOB>
<city>Ville Parle</city>
<state>Mumbai</state>
<pincode>876001</pincode>
<work title="HR" company="Wipro" city="Mumbai"></work>
<phoneno>9600560190</phoneno>
<email>[email protected]</email>
</details>
</addbook>

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Output:

Result: The XML Document executed successfully.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

7 b. XML document with attributes

Aim :-

To create a simple XML document with attributes

Algorithm :

Step 1:open notepad.

Step 2: define root element as ADDRESSBOOK
Step 3: Define Sub Element .
Step 4: define sub attributes like name, DOB, city, state, pincode, email, phone.
Step 5: close all the tags
Step 6. save the file with .xml extension.
Step 7: Open Browser and open the XML file.

XML Code:

<ADDRESSBOOK>
<PERSON1
Name="N Krishnamoorthy"
Age="45"
Dob="06-02-1976"
Mobile="944339443"
Mail="[email protected]"
Streetname="Thiruneermalai Road"
Houseno="303"
Area="Thirumudivakkam"
Pincode="600044"
City="Chennai"
State="Tamilnadu"
/>
<PERSON2
Name="Balavinayagam"
Age="27"
Dob="09-06-1990"
Mobile="9600365435"
Mail="[email protected]"
Streetname="North Car Street"
Houseno="77/99a"
Area="Rockfort"
Pincode="600002"
City="tiruchirappalli"
State="Tamilnadu"
/>
<PERSON3
Name="Sushmitha"
Age="47"
Dob="09-02-1970"
Mobile="9789548789"
Mail="[email protected]"
Streetname="Haneefa Colony"
Houseno="548"
Area="Vaniyambadi"
Pincode="625689"

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

City="Vaniyambadi"
State="Tamilnadu"
/>
</ADDRESSBOOK>

Output:

Result:

The simple XML document for generating address book is done with the attributes.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

7. c. XML SCHEMA

Aim :-

To create a XML Schema

Algorithm :

Step 1: open editor /notepad for creating .dtd file for xml schema definition .
Step 2: define the data types of elements which is to be defined in xml file.
Step 3: close the root element of .dtd file and save it.
Step 4: Open another editor/ notepad for xml file
Step 5: define respected element as defined in the .dtd file and define the value.
Step6. close all the subsequent elements tag.
Step 7: save the file with .xml extension
Step 8: Open Browser and open the XML file.

XML SCHEMA
<?xml version="1.0"?>
<xs:schema>
<xmlns:xs="http://www.w3.org/2001/XMLNS schema"
target namespace="http://www.w3schools.com
element form default="qualified">
<xs:element name="to"type="xs:string"/>
<xs:element name="heading"type=xs:string"/>
<xs:element name="body"type="xs:string"/>
</xs:sequence>
</xs:complex type>
</xs:element>
</xs:schema>

XML file
<?xml version="1.0"?>
<note xmlns="http://www.w3cschools.com"
xmlns:xsi="http://www.w3.org/2001/XMLNS schema_instance"
xsi:xmlSchemaLocation="http:/w3cschoools.com note.xsd">
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>don't forgot me</body>
</note

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Result :-

A XML Schema has been created.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

7d. XSLT transformation from XSL to XML (BOOK SHOP)

Aim: To create a simple XSLT transformation from XSL to XML.

Algorithm:

Step-1: Create a XSLT document using notepad.

Step-2: Using XSLT document, we can create a style sheet like Font Style, Font Size, bgcolor,..etc. and write
the following code:
Step-3: Save the document as :“style.xsl”.
Step-4: Then create a XML document.
Step-5: Create a Link with the XSLT document using href tag=”style.xsl” and write the following code:
Step-6: Save the document as “Book.xml”.
Step-7: Then execute the xml file and view the output:

Coding:
XML File
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="style.xsl"?>
<BooksforYou>
<Book BookID = "1000">
<Title>If Tomorrow Comes</Title>
<Rate>275</Rate>
<Author>Krishna Kumar</Author>
<Publication>Pearson</Publication>
<ISBN>111-222-333</ISBN>
</Book>
<Book BookID ="1001">
<Title>.NET Expert Guide</Title>
<Rate>475</Rate>
<Author>James</Author>
<Publication>Microsoft Press</Publication>
<ISBN>121-222-333</ISBN>
</Book>
<Book BookID ="1002">
<Title>C Projects</Title>
<Rate>275</Rate>
<Author>YashwantP.Kanetkar</Author>
<Publication>BPB Publications</Publication>
<ISBN>111-232-333</ISBN>
</Book>
<Book BookID ="1003">
<Title>Let us C</Title>
<Rate>225</Rate>
<Author>YashwantP.Kanetkar</Author>
<Publication>BPB Publications</Publication>
<ISBN>111-222-353</ISBN>
</Book>
<Book BookID ="1004">
<Title>Com and Beyond in VC++</Title>
<Rate>375</Rate>
<Author>YashvantP.Kanetkar</Author>

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

<Publication>BPB Publications</Publication>
<ISBN>111-555-333</ISBN>
</Book>
</BooksforYou>
//XSLT DOCUMENT
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheetxmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0" >
<xsl:template match="/">
<html>
<body background="tech.gif">
<h1 align="center">
<font color="blue">Books at your own Cyber Shoppe</font>
</h1>
<table border="4" cellpadding="10" cellspacing="5" align="center"
bgcolor="lightgreen" bordercolor="green">
<tbody>
<tr>
<th>Book ID</th>
<th>Title</th>
<th>Rate</th>
<th>Author</th>
<th>Publication</th>
<th>ISBN</th>
</tr>
<xsl:for-each select="BooksforYou/Book">
<tr>
<td><xsl:value-of select="@BookID"/></td>
<td><xsl:value-of select="Title"/></td>
<td><xsl:value-of select="Rate"/></td>
<td><xsl:value-of select="Author"/></td>
<td><xsl:value-of select="Publication"/></td>
<td><xsl:value-of select="ISBN"/></td>
</tr>
</xsl:for-each>
</tbody>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Result:

Thus the program to convert the simple XSLT transformation from XSL to
XML has been executed successfully.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Additional Exercises:

1. Install Visual Studio Code using GUI on Ubuntu

Aim:

To install VS code on Ubuntu

Algorithm:

Step 1: Download the application

Step 2: install the application usig GUI mode or Command mode.

Step 3: Open the application

Step4: Add/ Install VS Code extension

Step 5: Stop.

Procedure:

To download and install Visual Studio Code, use these steps:

Open Visual Studio Code page.

Click the .deb button to download the Ubuntu installer.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Download VS Code installer

Save the file to your device.
Double-click the *.deb file to launch the installer.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

VS Code deb installer for Ubuntu

Click the Install button.

Visual Studio Code GUI install on Ubuntu

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Once you complete the steps, Visual Studio Code will install, and it’ll the be
available from the “apps” menu.

How to install Visual Studio Code with Snap on Ubuntu

Snap is the store that officially supports the distribution of Visual Studio Code.

To install VS Code with Snap, use these steps:

Open Terminal.
Type the following command to install Visual Studio Code on Linux and press
Enter:
sudo snap install --classic code

Install Visual Studio Code with Snap

After you complete the steps, you can start the editor from the “apps” menu. Also,
when an new update is update is available, the Snap daemon will update the
application automatically.

How to install Visual Studio Code using apt-get on Ubuntu

To install VS Code using terminal command, use these steps:

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Open Terminal.
Type the following command and press Enter:
sudo apt-get update
Type the following command and press Enter:
sudo apt install software-properties-common apt-transport-https wget
Type the following command to import the Microsoft GPC key and press
Enter:
wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo
apt-key add –
Type the following command to enable VS Code repository and press Enter:
sudo add-apt-repository "deb [arch=amd64]
https://packages.microsoft.com/repos/vscode stable main"
Type the following command to install Visual Studio Code and press Enter:
sudo apt-get install code

Install Visual Studio Code with apt-get

Once you complete the steps, Visual Studio Code will install on your device. If a
new update is available, you should be able to update through the Ubuntu software
update manager, or you can use the sudo apt update followed by the sudo apt
upgrade command.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

b. Install Extensions in VS Code

VS Code has an integrated extension marketplace that is used to

find, install, and/or manage your extensions. Here’s how to install an

extension via the VS Code Marketplace:

Click on the “Extensions” button in the Activity Bar. It’s located on

the side of VS Code’s client. Alternatively, you can use the keyboard

shortcut “Ctrl+Shift+X” to open the “Extensions” screen.

This will bring you to the “Extensions” list. VS Code automatically

sorts Extensions by popularity. You can also use the search box on

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

the top of the page to filter your results.

Each extension in the list will have a brief description, the download

count (the number of times it has been downloaded), the

publisher’s name, and a rating from zero to five stars.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

You can click each extension on the list to see more details before

committing to a download. Details include a changelog, frequently

asked questions, and a list of contributions and dependencies the

extension gives to and requires from VS Code, respectively.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

If you’re using a proxy to access the internet, you’ll need to set up VS

Code to use a proxy server as well to connect to the internet and

download extensions.

Once you’ve found an extension you like to install, click on its details.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

You’ll see an “Install” button under the extension’s name.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Click the “Install” button, and the extension will automatically

download and install on your device.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

The “Install” button will now change to a “Manage” button that looks

like a gear.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

Extensions are a great way to customize and enhance the capabilities of

VS Code to suit your personal or professional needs. A computer that is

connected to the internet without a proxy server will usually have no

problems downloading and installing extensions automatically through

the integrated marketplace.

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

2. Time-Table schedule using HTML

Aim:

To create a Time-Table schedule using HTML

Algorithm:

Step 1: Create a <html> tag.

Step 2: Create a table using the tags <table></table>.

Step 3: Create rows in the table using <tr>This is the row tag</tr>.

Step 4: Insert the data into rows using <td> Table Data</td> tags.

Step 5: Close the table tag.

Step 6: Close the HTML tag </html>.

Code:

<!DOCTYPE html>
<html>

<body>
<h1>TIME TABLE</h1>
<table border="5" cellspacing="0" align="center">
<!--<caption>Timetable</caption>-->
<tr>
<td align="center" height="50"
width="100"><br>
<b>Day/Period</b></br>
</td>
<td align="center" height="50"
width="100">
<b>I<br>9:30-10:20</b>
</td>
<td align="center" height="50"
width="100">
<b>II<br>10:20-11:10</b>

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

</td>
<td align="center" height="50"
width="100">
<b>III<br>11:10-12:00</b>
</td>
<td align="center" height="50"
width="100">
<b>12:00-12:40</b>
</td>
<td align="center" height="50"
width="100">
<b>IV<br>12:40-1:30</b>
</td>
<td align="center" height="50"
width="100">
<b>V<br>1:30-2:20</b>
</td>
<td align="center" height="50"
width="100">
<b>VI<br>2:20-3:10</b>
</td>
<td align="center" height="50"
width="100">
<b>VII<br>3:10-4:00</b>
</td>
</tr>
<tr>
<td align="center" height="50">
<b>Monday</b></td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">Che</td>
<td rowspan="6" align="center" height="50">
<h2>L<br>U<br>N<br>C<br>H</h2>
</td>
<td colspan="3" align="center"
height="50">LAB</td>
<td align="center" height="50">Phy</td>
</tr>
<tr>
<td align="center" height="50">
<b>Tuesday</b>
</td>
<td colspan="3" align="center"
Downloaded by dhivya sri ([email protected])
 lOMoARcPSD|20739160

height="50">LAB
</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">SPORTS</td>
</tr>
<tr>
<td align="center" height="50">
<b>Wednesday</b>
</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">phy</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td colspan="3" align="center"
height="50">LIBRARY
</td>
</tr>
<tr>
<td align="center" height="50">
<b>Thursday</b>
</td>
<td align="center" height="50">Phy</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td colspan="3" align="center"
height="50">LAB
</td>
<td align="center" height="50">Mat</td>
</tr>
<tr>
<td align="center" height="50">
<b>Friday</b>
</td>
<td colspan="3" align="center"
height="50">LAB
</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Phy</td>
</tr>
<tr>
Downloaded by dhivya sri ([email protected])
 lOMoARcPSD|20739160

<td align="center" height="50">

<b>Saturday</b>
</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Mat</td>
<td colspan="3" align="center"
height="50">SEMINAR
</td>
<td align="center" height="50">SPORTS</td>
</tr>
</table>
</body>

</html>

Output:

Result:

Time-Table schedule has been developed using HTML

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

3. Profile Page

Aim:

Create a Profile page using HTML

Algorithm:

Step 1: Create a HTML Page with basic details

Step 2: Create a CSS (internal / external) for the HTML page.

Step 3: Use the image tag to display profile picture in HTML page

Step 4: Show case the details in HTML file

Step 5: Run the HTML file in any one of the supported browsers.

Step 6: Stop

HTML Code:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

">

<style>

.card {

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

max-width: 300px;

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

margin: auto;

text-align: center;

font-family: arial;

.title {

color: grey;

font-size: 18px;

button {

border: none;

outline: 0;

display: inline-block;

padding: 8px;

color: white;

background-color: #000;

text-align: center;

cursor: pointer;

width: 100%;

font-size: 18px;

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

a{

text-decoration: none;

font-size: 22px;

color: black;

button:hover, a:hover {

opacity: 0.7;

</style>

</head>

<body>

<h2 style="text-align:center">User Profile Card</h2>

<div class="card">

<img src="/yuvaraj.jpg" alt="Yuvaraj" style="width:100%">

<h1>Yuvaraj Natarajan</h1>

<p class="title">CEO & Founder, Findietech Private Limited</p>

<p>Findietech University</p>

<div style="margin: 24px 0;">

<a href="#"><i class="fa fa-dribbble"></i></a>

<a href="#"><i class="fa fa-twitter"></i></a>

Downloaded by dhivya sri ([email protected])

 lOMoARcPSD|20739160

<a href="#"><i class="fa fa-linkedin"></i></a>

<a href="#"><i class="fa fa-facebook"></i></a>

</div>

<p><button>Contact</button></p>

</div>

</body>

</html>

Output:

Result:

A Profile page has been developed using HTML.

Downloaded by dhivya sri ([email protected])