DHANALAKSHMI COLLEGE OF ENGINEERING

Tambaram, Chennai – 601301

DEPARTMENT OF COMPUTER SCIENCE AND

ENGINEERING

CCS375 – WEB TECHNOLOGIES LABORATORY

Register Number : ………….................................................................................

Student Name : ……………………………………………….........................

Year and Semester : …………………………………………………………….......

1
 Name : ……………………………………………………………………………………………

Year : ……………………………………………… … Semester : ………………………………

Branch: ………………………………………………………………………………………………….

University Register Number:

Certificate
Certified that this is a bonafide record of the work done by Mr/Ms………………………...........................

in the CCS375 – WEB TECHNOLOGIES LABORATORY during the year………………………..

Signature of Faculty In-charge Signature of Head of Department

This record work is submitted for Anna University Practical Examination - NOV/DEC 2024 which is

conducted on………………………………

INTERNAL EXAMINER EXTERNAL EXAMINER

2
 DHANALAKSHMI COLLEGE OF ENGINEERING

INSTITUTION VISION

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

conforming to global standards through value-based quality education, and research excellence.

INSTITUTION MISSION

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

3
 DEPARTMENT OF COMPUTER SCIENCE AND
ENGINEERING

DEPARTMENT VISION

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

DEPARTMENT MISSION

M1: To develop highly competent and globally employable engineers in the field of Computer Science
and Engineering
M2: To inculcate human values among the student community to realize their societal commitment
M3: To provide learning ambience for enhancing innovations, research, and values among the students
M4: To facilitate the students to work with recent tools and technologies
M5: To motivate and guide the students to take up higher studies and establish entrepreneurial ventures

4
PROGRAM EDUCATIONAL OBJECTIVES (PEOs)

PEO1: Apply their technical competence in computer science to solve real world problems, with
technical and people leadership.
PEO2: Conduct cutting edge research and develop solutions on problems of social relevance.
PEO3: Work in a business environment, exhibiting team skills, work ethics, adaptability and lifelong
learning.

PROGRAM SPECIFIC OUTCOMES (PSOs)

The students will be able to

PSO1: Exhibit design and programming skills to build and automate business solutions using cutting
edge technologies.
PSO2: Strong theoretical foundation leading to excellence and excitement towards research, to
provideelegant solutions to complex problems.
PSO3: Ability to work effectively with various engineering fields as a team to design, build and develop
system applications.

5
 PROGRAM OUTCOMES (POs)

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

fundamentalsand an engineering specialization to the solution of complex engineering problems.
PO2: Problem analysis: Identify, formulate, review research literature, and analyze complex
engineeringproblems reaching substantiated conclusions using first principles of mathematics, natural
sciences, andengineering sciences.
PO3: Design/development of solutions: Design solutions for complex engineering problems and
designsystem 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
normsof 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.
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
engineeringand 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

6
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 ina database server.

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

7
List of Equipment: (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
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′Reill

8
 INDEX

S. DATE EXPERIMENT PAGE MARKS SIGN

No No.
1 WEB PAGE CREATION WITH IMAGE
MAP
2 WEB PAGE WITH ALL TYPES OF
CASCADING STYLE SHEETS
3 VALIDATING WEB FORM USING
DHTML
4 INSTALL APACHE WEB SERVER ON
UBUNTU
5 INVOKING SERVLETS FROM HTML
FORM
6.A ONLINE EXAMINATION USING JSP

6.B DISPLAYING STUDENT MARK LIST

USING JSP
7.A SIMPLE XML FILE FOR ADDRESS
BOOK
7.B XML DOCUMENT WITH
ATTRIBUTES

7.C XML SCHEMA

7.D XSLT TRANSFORMATION FROM

XSL TO XML (BOOK SHOP)
8 INSTALLATION OF VSCODE AND
EXTENSIONS
9 TIME TABLE SCHEDULE USING
HTML
10 PROFILE PAGE

9
EX.NO:1
DATE: 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>

10
 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>
<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>

11
Note:
Store the image (India_map.jpg) in current folder

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.

12
EX.NO:2
WEB PAGE WITH ALL TYPES OF CASCADING STYLE
DATE:
SHEETS

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;
.ani
{
font-family:tahoma;
font-style:italic;

13
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>Dhanalakshmi college of engineering</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"> Dhanalakshmi college of engineering <br>It is approved by AICTE(All India
Council for Technical Education). It is affliated to Anna University.<br></p>
<h2 class="vid"> Dhanalakshmi college of engineering </h2> <br>
<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>

14
 </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:

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

16
EX.NO:3
VALIDATING WEB FORM USING DHTML
DATE:

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. Step 11: 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;
}

17
.style2 {
color:
#000099;
font-weight:
bold;
background-color:#00CCFF;

}
#Layer2
{ position:abso
lute;
width:1040px;
height:4
9px; 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();retur
n false
}
if(!isNaN(document.validate.name.value))
{
alert("enter the valid name");
document.validate.name.focus();
document.validate.name.value="";ret
urn 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();ret
18
urn 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();ret
urn false

}
if(document.validate.address.value=="")
{
alert("enter the address")
document.validate.address.focus();ret
urn 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();retur
n false
}
if(!isNaN(document.validate.state.value))
{
alert("enter the valid state")
document.validate.state.focus();
document.validate.state.value="";ret
urn false
}
if(document.validate.pincode.value=="")
{
alert("enter the pincode ")
document.validate.pincode.focus();re
turn false
}
if( isNaN(document.validate.pincode.value))
{
alert("enter a valid pincode")

19
 document.validate.pincode.focus();re
turn 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();
return false
}
if(document.validate.email.value=="")
{
alert("enter the email id")
document.validate.email.focus();retu
rn false
}
if(!(document.validate.email.value==""))
{
var x=document.validate.email.valuevar
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();ret
urn 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();ret
urn false
}
if(document.validate.qualification.value=="0")
{
alert("enter the qualification")
document.validate.qualification.focu
s(); return false

20
 }
if(document.validate.experience.value=="0")
{
alert("enter the experience")
document.validate.experience.focus();retu
rn false
}
if(document.validate.project.value=="")
{
alert("enter the project description")
document.validate.project.focus();ret
urn 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>

21
<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>
<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>

22
<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>

<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>

23
<textarea name="project" id="project"></textarea>
</label></td>
</tr>
<tr>

<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>

24
 </form>
</div>
<div id="Layer2"><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 SideScripts
for Validating Web Form Controls.

25
EX.NO:4
Install Apache Web Server on Ubuntu
DATE:

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 Apachesoftware 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 makeyourself

superuser. sudo su

● Update Ubuntu package: Use the following command to update theUbuntu package list.

sudo apt update

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

26
 ●
After completion of the installation process, the Apache server automatically start. The
status of the Apache server can be checked byusing the following command.

sudo systemctl status apache2

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

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

27
EX.NO:5
INVOKING SERVLETS FROM HTML FORM
DATE: .

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>

28
 <servlet-class>server</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>Register</servlet-name>
<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.

29
EX.NO:6.A
ONLINE EXAMINATION USING JSP
DATE:

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())
{
30
if(i==1)
{

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)
{
System.out.println("<h4>Your Mark Is : "+mark+"</h4>");
System.out.println("<h3>Congratulations....! You Are Eligible For The Next Round...</h3>");
}
else
{
System.out.println("<h4>Your Mark is : "+mark+"</h4>");
System.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

31
 <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>

OUTPUT:

RESULT:

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

32
EX.NO:6.B
DISPLAYING STUDENT MARK LIST USING JSP
DATE:

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.

PROGRAM:

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/>

<%

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

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
33
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>

stud.HTML:
<html>

<head>

<title>Three Tier Application</title>

<style type="text/css">

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

</style>

34
 </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>

OUTPUT:

35
 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.

36
EX.NO:7.A
SIMPLE XML FILE FOR ADDRESS BOOK
DATE:

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>

37
 OUTPUT:

RESULT:

The XML Document executed successfully.

38
EX.NO:7.B
Develop a lexical analyzer to recognize a few patterns in C.
DATE: (Ex.identifiers, constants, comments, operators etc.).

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="9443394
43"
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]
m" Streetname="North Car
Street" Houseno="77/99a"
Area="Rockfort"
Pincode="600002"
City="tiruchirappalli"
State="Tamilnadu"
/>
<PERSON3
Name="Sushmi
tha" Age="47"
Dob="09-02-
1970"

39
Mobile="9789548789"
Mail="[email protected]
m" Streetname="Haneefa
Colony" Houseno="548"
Area="Vaniyambadi"
Pincode="625689"
City="Vaniyamba
di"
State="Tamilnadu
"
/>
</ADDRESSBOOK>

OUTPUT:

RESULT:

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

40
EX.NO:7.C
Develop a lexical analyzer to recognize a few patterns in C.
DATE: (Ex.identifiers, constants, comments, operators etc.).

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

41
RESULT :-

A XML Schema has been created

42
EX.NO:7.D
XSLT transformation from XSL to XML (BOOK SHOP)
DATE:

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:

CODE:
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>

43
<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>
<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/Tra
nsform" 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>

44
 OUTPUT:

RESULT:

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

45
EX.NO:8
Install Visual Studio Code using GUI on Ubuntu
DATE:

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
Step 4: 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.

46
Download VS Code
installerSave the file to your
device.
Double-click the *.deb file to launch the installer.

VS Code deb installer for

UbuntuClick the Install button.

47
Visual Studio Code GUI install on Ubuntu

Once you complete the steps, Visual Studio Code will install, and it’ll the beavailable 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 pressEnter:
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:

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

48
 Type the following
command to import the Microsoft GPC key and press Enter:

wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudoapt-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/vscod
e 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 softwareupdate manager, or you can use the sudo apt update
followed by the sudo apt upgrade command.

49
 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 anextension via the VS Code Marketplace:

Click on the “Extensions” button in the Activity Bar. It’s located on theside of VS Code’s client. Alternatively,
you can use the keyboardshortcut “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 the top of the page to filter your results.

Each extension in the list will have a brief description, the downloadcount (the number of times it

has been downloaded), the publisher’sname, and a rating from zero to five stars.
50
You can click each extension on the list to see more details beforecommitting to a
download. Details include a changelog, frequentlyasked questions, and a list of
contributions and dependencies the extension gives to and requires from VS Code,
respectively.

51
52
Extensions are a great way to customize and enhance the capabilities ofVS 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.

53
EX.NO:9
TIME-TABLE SCHEDULE USING HTML
DATE:

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>
<head>
<title>Timetable</title>
</head>
<body>
<h1 align="center">TIME TABLE</h1>
<table border="5" cellspacing="0" cellpadding="5" align="center">
<tr>
<th align="center">Day/Period</th>
<th align="center">I<br>9:30-10:20</th>
<th align="center">II<br>10:20-11:10</th>
<th align="center">III<br>11:10-12:00</th>
<th align="center">12:00-12:40<br>LUNCH</th>
<th align="center">IV<br>12:40-1:30</th>
<th align="center">V<br>1:30-2:20</th>
<th align="center">VI<br>2:20-3:10</th>
<th align="center">VII<br>3:10-4:00</th>
</tr>
<tr>
<td align="center"><b>Monday</b></td>
<td align="center">Eng</td>
<td align="center">Mat</td>
<td align="center">Che</td>
<td rowspan="6" align="center"><b>LUNCH</b></td>
<td align="center">Phy</td>
<td colspan="3" align="center">LAB</td>
</tr>
<tr>
<td align="center"><b>Tuesday</b></td>
<td colspan="3" align="center">LAB</td>
<td align="center">Phy</td>
<td align="center">SPORTS</td>
54
 <td align="center">LIBRARY</td>
</tr>
<tr>
<td align="center"><b>Wednesday</b></td>
<td align="center">Mat</td>
<td align="center">Phy</td>
<td align="center">Eng</td>
<td align="center">Che</td>
<td colspan="3" align="center">LIBRARY</td>
</tr>
<tr>
<td align="center"><b>Thursday</b></td>
<td align="center">Phy</td>
<td align="center">Eng</td>
<td align="center">Che</td>
<td colspan="3" align="center">LAB</td>
</tr>
<tr>
<td align="center"><b>Friday</b></td>
<td colspan="3" align="center">LAB</td>
<td align="center">Mat</td>
<td align="center">Che</td>
<td align="center">Eng</td>
</tr>
<tr>
<td align="center"><b>Saturday</b></td>
<td align="center">Eng</td>
<td align="center">Che</td>
<td align="center">Mat</td>
<td colspan="3" align="center">SEMINAR</td>
</tr>
</table>
</body>
</html>

OUTPUT:

RESULT:

Time-Table schedule has been developed using HTML

55
EX.NO:10

DATE:
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;
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;
}
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;">

56
 <a href="#"><i class="fa fa-dribbble"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<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.

57