23CS1201 - WEB APPLICATION DEVELOPMENT
EX.No.: 1
DATE :
CREATE A WEB PAGE WITH THE FOLLOWING USING HTML
a. To embed a map in a web page
b. To fix the hot spots in that map
c. Show all the related information when the hot spots are clicked.
AIM
To create a web page , embed a map in a web page fix hot spots and show all the
related information
PROGRAM
<!DOCTYPE html>
<html>
<head>
<title> Imagemap example</title>
</head>
<body>
<h2 align=center style="color:darkgreen;background:pink">
move the mouse pointer on the area of chennai, karnataka and srilanka
</h2>
<center>
<img src="tamilnadu.jpg" usemap="#mymap">
<map name="mymap">
<area href="chennai.jpg"
alt="chennai information"
shape="circle"
coords="472,48,10" />
<area href="bangalore.jpg"
alt="karnataka informaiton"
shape="rect"
coords="170,55,256,86" />
<area href="srilanka.jpg"
alt="click to see srilanka information"
shape="poly"
coords="474,334,563,379,438,465,461,349" />
</map>
</body>
</html>
PANIMALAR ENGINEERING COLLEGE Page |1
23CS1201 - WEB APPLICATION DEVELOPMENT
OUTPUT
RESULT
The above web page was created and executed successfully
PANIMALAR ENGINEERING COLLEGE Page |2
23CS1201 - WEB APPLICATION DEVELOPMENT
EX.No.: 2
DATE :
CREATE A PERSONAL BLOG TO DESCRIBE FEATURES IN YOUR COLLEGE
USING HTML MULTIMEDIA ELEMENTS AND CSS ELEMENTS
AIM
To create a personal blog to describe features in your college using HTML and CSS
PROGRAM
HOME.HTML
<!DOCTYPE html>
<html>
<head>
<title>using css style sheet</title>
<style type=text/css>
h1{
background:gold;
color:darkred;
text-transform:uppercase;
border:10px double red;
text-shadow:-4px 4px 0px magenta;
font-size:400%;
text-align:center;
}
td{
color:blue;
background:white;
text-align:center;
font-size:20pt;
font-family:Lucida Handwriting,Arial Black;
font-weight:bold;
}
td:hover,a:hover{
color:white;
background:blue;
text-transform:uppercase;
}
a{text-decoration:none;}
PANIMALAR ENGINEERING COLLEGE Page |3
23CS1201 - WEB APPLICATION DEVELOPMENT
#address{
border:10px solid red;
padding:20px 40px;
border-radius:50px;
background:gold;
width:300px;
text-align:center;
color:black;
font-weight:bold;
font-size:16pt;
}
email{
font:italic bold 22px/30px Georgia,serif;
color:darkgreen;
}
div{
padding:10px;
border:5px solid navy;
border-radius:50px;
color:white;
background:URL('flow11.jpg');
font-size:16pt;
display:none;
}
</style>
<script>
function show(){
document.getElementById('phone').style.display='block';
}
function hide(){
document.getElementById('phone').style.display='none';
}
</script>
</head>
<body style="background-image:URL('rice.jpg');">
<center>
<h1>panimalar enginering college</h1>
<p id="address">
jaishakthi educational trust<br/>
PANIMALAR ENGINEERING COLLEGE Page |4
23CS1201 - WEB APPLICATION DEVELOPMENT
banglore trunk road<br/>
nazarathpet,poonamllee<br/>
chennai-600123
</p>
<table border=2 cellpadding=10 cellspacing 10 width=50%>
<tr>
<td><a href="courses.html">course offered</a></td>
</tr>
<tr>
<td onmouseover="show()" onmouseout="hide()">contact us</td>
</tr>
</table>
<br/>
<br/>
<div id="phone">
phone:044-26490404/0505/0717<br/>
fax:044-26490101<br/>
E-mail:<span class="email">info@panimalar.ac.in</span>
</div>
</body>
</html>
MYCSS2.CSS
h1{
color:white;
font-size:22pt;
font-family:"Arial";
background:url("flow11.jpg");
text-transform:uppercase;
}
UL{
background:url("rice2.jpg");
}
UL LI{
list-style-image:url("bullet.gif");
color:red;
font:italic bold 30px/50px Georgia,serif;
text-shadow:-2px -2px 0px yellow;
}
PANIMALAR ENGINEERING COLLEGE Page |5
23CS1201 - WEB APPLICATION DEVELOPMENT
COURSES.HTML
<html>
<head>
<link rel=stylesheet href="mycss2.css" type="text/css" />
</head>
<body>
<h1>course offered by panimalr engineering college</h1>
<ul>
<li>B.E CSE</li>
<li>BE ECE</li>
<li>BE CIVIL</li>
<li>BE MECHANICAL</li>
<li>BE EEE</li>
<li>BE IT</li>
</ul>
<h1 align=center><a href="home.html">home</a></h1>
</body>
</html>
OUTPUT
Home.html
PANIMALAR ENGINEERING COLLEGE Page |6
23CS1201 - WEB APPLICATION DEVELOPMENT
Courses.html
RESULT
The above personal blog for our college created using HTML and CSS
PANIMALAR ENGINEERING COLLEGE Page |7
23CS1201 - WEB APPLICATION DEVELOPMENT
EX.No.: 3
DATE :
CREATE YOUR OWN RESUME USING HTML 5 TAGS. ADD STYLES TO
YOUR RESUME USING CSS 3 PROPERTIES AND ADD CSS3 ANIMATION
TO YOUR PROFILE
AIM
To enhance look and feel of your resume using Cascading Style Sheet, so that it will be
attractive
PROGRAM
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>My Personal and Educational detail</TITLE>
<style tyle=text/css>
ul,dir{
list-style-image:url("bullet.gif");
}
h1,h2
{
color:brown;
background:pink;
font-family:Georgia;
text-transform:uppercase;
}
th{
color:darkred;
background:pink;
text-transform:uppercase;
font-weight:bold;
font-size:14pt;
border:'red thick solid';
}
td
PANIMALAR ENGINEERING COLLEGE Page |8
23CS1201 - WEB APPLICATION DEVELOPMENT
{
color:black;
background:lightgreen;
font-weight:bold;
font-size:12pt;
text-transform:capitalize;
border:'red thick solid';
line-height:20pt;
}
</style>
</HEAD>
<BODY background="images/bg1.gif">
<h1 align=center>Resume</h1>
<hr>
<table width=100%>
<tr>
<td width=80%>
<img src="passport.jpg" width=150/>
</td>
<td>
<p>
K.Rajendran<br/>
No.25,Karanai Garden III<sup>rd</sup> Street<br/>
West Saidapet <br/>
Chennai - 600 015<br/>
E-mail :
<A href="mailto:Kajendran@hotmail.com">Kajendran@hotmail.com</A><br/>
mobile:9788025153
</p>
</td>
</tr>
</table>
<hr>
<P align=justify>I
K. Rajendran,currently doing my B.E., Computer Science and engineering at
Panimalar Engineering College,chennai - 600123. I am having knowledge in latest
computer technologies in the field of
PANIMALAR ENGINEERING COLLEGE Page |9
23CS1201 - WEB APPLICATION DEVELOPMENT
Information Technology. I am having technical Exposure in Orthodox language such
as C, C++, JAVA as well as latest internet technologies such as HTML,
JavaScript, VBScript, Perl, ASP.Net and JSP, Python,etc
</P>
<hr/>
<h2>Softwre Knowledge</h2>
<hr/>
<dir>
<li>Programming languages : C, C++,JAVA,Python
<li>RDBMS:Oracle 11, SQL Server, Sybase
<li>Client Side Scripting Technology:JavaScript, VBScript, HTML
<li>Server Side Scripting Technology:ASP.Net, JSP , PHP, ColdFusion
<li>Operating System:Ms-Dos, Unix, Windows, Novel Netware, Windows NT, Linux,
Macintosh
</dir>
<hr/>
<h2>Personal Detail</h2>
<hr/>
<ul>
<li>Date of Birth: 5-06-72
<li>Father Name: N. Krishnan
<li>Permanent Address:
<pre>
Semmar Village & Post
Perangiyur (Via)
Villupuram Dt
Pin:607107
</pre>
<li>Passport Details:
<ol>
<li>Reg.No : A3849921
<li>Expiry Date : 13-10.2027
</ol>
<li>Nationality: Indian
<li>Religion:Hindu
</ul>
<hr/>
<h2>Educational Qualification</h2>
PANIMALAR ENGINEERING COLLEGE P a g e | 10
23CS1201 - WEB APPLICATION DEVELOPMENT
<hr/>
<table width=100% bgColor=cyan border=15>
<tr>
<th>S NO.</th>
<th>Education Qualification</th>
<th>Institution</th>
<th>Board / University</th>
<th>Percentage Secured</th>
</tr>
<tr>
<td>1.</td>
<td>SSLC</td>
<td>Govt. Boys Higher Secondary school, K K Nagar</td>
<td>Tamilnadu State Board</td>
<td>65%</td>
</tr>
<tr>
<td>2.</td>
<td>HSC</td>
<td>Kendra Vidyalaya,Ashok Nagar</td>
<td>Central Board</td>
<td>67%</td>
</tr>
<tr>
<td>3</td>
<td>B.E.(CSE)</td>
<td>Panimalar Engineering Collecge</td>
<td>Anna University</td>
<td>67%</td>
</tr>
</table>
<hr>
</BODY>
</HTML>
PANIMALAR ENGINEERING COLLEGE P a g e | 11
23CS1201 - WEB APPLICATION DEVELOPMENT
OUTPUT
RESULT
The above Resume was formatted using CSS
PANIMALAR ENGINEERING COLLEGE P a g e | 12
23CS1201 - WEB APPLICATION DEVELOPMENT
EX.No.: 4(A)
DATE :
Create a web page with the embedded style sheets
AIM
Demonstrate the feature of embedded style sheets. It also describe type of style sheets
such as tag selector, ID selector and class selector
PROGRAM
<html>
<head>
<title> using embedded style sheet</title>
<style type=text/css>
h1
{
background:pink;
color:brown;
text-transform:uppercase;
}
p
{
text-align:justify;
color:navy;
font-family:'Verdana','Arial Black';
text-decoration:bold;
text-transform:capitalize;
}
#MYID
{
color:darkred;
text-transform:uppercase;
font-family:'Monotype Corsiva','Times New Roman';
}
.myclass
{
background-image:URL('orangeslice.jpg');
PANIMALAR ENGINEERING COLLEGE P a g e | 13
23CS1201 - WEB APPLICATION DEVELOPMENT
color:white;
font-family:'Arial Black','Times New Roman';
}
</style>
</head>
<body>
<h1>this is first level heading</h1>
<p>this is paragraph</p>
<h1>this is another first level heading</h1>
<p>this is another paragraph</p>
<p ID="MYID">this is paragraph using ID selector MYID</p>
<p class="myclass">this is paragraph using class selector myclass</p>
</body>
</html>
OUTPUT
RESULT
The above web page was created using embedded style sheet
PANIMALAR ENGINEERING COLLEGE P a g e | 14
23CS1201 - WEB APPLICATION DEVELOPMENT
EX.No.: 4(B)
DATE :
Create a web page with external style sheets
AIM
Demonstrate the feature of external style sheets.
PROGRAM
MYCSS.CSS
h1
{
background:pink;
color:brown;
text-transform:uppercase;
}
p
{
text-align:justify;
color:navy;
font-family:'Verdana','Arial Black';
text-decoration:bold;
text-transform:capitalize;
}
EXTERNALCSS.HTML
<html>
<head>
<link rel=stylesheet href="mycss.css" type="text/css">
</head>
<body>
<h1> This is heading </H1>
<p>This paragraph </p>
<h1> This is another heading </H1>
<p>This another paragraph </p>
</body>
</html>
PANIMALAR ENGINEERING COLLEGE P a g e | 15
23CS1201 - WEB APPLICATION DEVELOPMENT
OUTPUT
RESULT
The above web page was created using external style sheet mycss.css
PANIMALAR ENGINEERING COLLEGE P a g e | 16
23CS1201 - WEB APPLICATION DEVELOPMENT
EX.No.: 4(C)
DATE :
Create a web page with the inline style sheets
AIM
Demonstrate the feature of line style sheets.
PROGRAM
<html>
<head>
<title> using inline style sheet</title>
</style>
</head>
<body>
<h1 style="background:pink;color:brown;text-transform:uppercase;">
this is heading formatted using inline stylesheet
</h1>
<h1>
this is another heading with no inline style sheet
</h1>
<p style="text-transform:capitalize;color:darkred;font-size:18pt">
this is paragraph formatted using inline style sheet
</p>
<p>
this is another paragraph with no inline style sheet
</p>
</body>
</html>
PANIMALAR ENGINEERING COLLEGE P a g e | 17
23CS1201 - WEB APPLICATION DEVELOPMENT
OUTPUT
RESULT
The above web page was created using inline style sheet
PANIMALAR ENGINEERING COLLEGE P a g e | 18
23CS1201 - WEB APPLICATION DEVELOPMENT
EX.No.: 5
DATE :
Design the user registration web page using various HTML 5 form controls
AIM
Design User Registration form using using HTML 5 form controls
PROGRAM
<html>
<body>
<center>
<hr>
<h2>IndiaPage Guest Book Registration form</h2>
<hr>
<form name=frm method="post" onSubmit="xyz.com/store.asp">
<table align=center width=65%>
<tr>
<th align=right width=50%>Visitor Name </th>
<th align=left width=50%><input type=text name=vname></th>
</tr>
<tr>
<th align=right>Password </th>
<th align=left><input type=password name=pwd></th>
</tr>
<tr>
<th align=right>Gender</th>
<th align=left>
<input type=radio name=sex value="M" checked>Male
<input type=radio name=sex value="F" >Female
</th>
</tr>
PANIMALAR ENGINEERING COLLEGE P a g e | 19
23CS1201 - WEB APPLICATION DEVELOPMENT
<tr>
<th align=right>Email Address </th>
<th align=left>
<input type=email name=email size=50 required>
</th>
</tr>
<tr>
<th align=right>Age</th>
<th align=left>
<input type=number name=age size=2 maxlength=2>
</th>
</tr>
<tr>
<th align=right>Date of birth</th>
<th align=left>
<input type=date name=dob/>
</th>
</tr>
<tr>
<th align=right>Religion</th>
<th align=left>
<select name=religion>
<option value="H" selected>Hindu</option>
<option value="M">Muslim</option>
<option value="C">Christian</option>
</select>
</th>
</tr>
<tr>
<th colspan=2>
<HR>
<b>Tell us your interests</b> <br>
<HR/>
<INPUT type=checkbox name=interest>Entertainment
PANIMALAR ENGINEERING COLLEGE P a g e | 20
23CS1201 - WEB APPLICATION DEVELOPMENT
<INPUT type=checkbox name=interest> News
<INPUT type=checkbox name=interest> Home & Family
<INPUT type=checkbox name=interest> Beauty & Fashion
<INPUT type=checkbox name=interest> Sports & Games
<INPUT type=checkbox name=interest> Travel<br/>
<INPUT type=checkbox name=interest>Computer & Technology
<INPUT type=checkbox name=interest>Education
<INPUT type=checkbox name=interest>Automobiles
<HR/>
</th>
</tr>
<tr>
<th colspan=2>
Your Suggestion:<br/>
<textarea rows=10 cols=60 name="suggestion">
</textarea>
</th>
</tr>
<tr>
<td colspan=2 align=center>
<input type=submit>
<input type=reset>
</td>
</tr>
</table>
</form>
</body>
</html>
PANIMALAR ENGINEERING COLLEGE P a g e | 21
23CS1201 - WEB APPLICATION DEVELOPMENT
OUTPUT
RESULT
The above user registration form is created using various HTML 5 form controls
PANIMALAR ENGINEERING COLLEGE P a g e | 22
23CS1201 - WEB APPLICATION DEVELOPMENT
EX.No.: 6
DATE :
Demostrate how to embed output of other web pages and youtube in your
website using IFrame
AIM
Our Aim is to embed output of other website and youtube in your web page using
IFrame
PROGRAM
<!DOCTYPE html>
<head>
<style>
h1{
border:1px double #0000FF;
background-color:gold;
}
</style>
</head>
<h1>Dynamically Writing HTML code on IFrame</h1>
<iframe id="frame1"
title="Inline Frame Example"
width="500"
height="115"
srcdoc="<h1>This content is <i>displayed in IFrame</i></h1>"
frameborder=1>
</iframe>
<h1>Embedding other html page in IFrame</h1>
<iframe id="frame2"
width="1000"
height="215"
src="home.html"
frameborder=1>
</iframe>
PANIMALAR ENGINEERING COLLEGE P a g e | 23
23CS1201 - WEB APPLICATION DEVELOPMENT
<h1>embedding Youtube video in IFrame</h1>
<iframe width="450" height="315"
src="https://www.youtube.com/embed/JHq3pL4cdy4"
frameborder="0"
allowfullscreen>
</iframe>
</body>
</html>
OUTPUT
RESULT
Embedding output of other webpages and youtube completed successfylly
PANIMALAR ENGINEERING COLLEGE P a g e | 24
23CS1201 - WEB APPLICATION DEVELOPMENT
EX.No.: 7
DATE :
Demonstrate CSS 3 drag and drop feature with suitable example
AIM
To write a CSS 3 code to drag and drop elements from one position to another within
the webpage
PROGRAM
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div{
width:150px;
height:120px;
border:1px solid #aaaaaa;
}
</style>
<script>
function startDrag(event)
{
event.dataTransfer.setData("Text",event.target.id);
}
function allowDrop(event)
{
event.preventDefault();
}
function acceptDrop(event)
{
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
PANIMALAR ENGINEERING COLLEGE P a g e | 25
23CS1201 - WEB APPLICATION DEVELOPMENT
</script>
</head>
<body>
<img id="myImg"
src="fish.jpg"
draggable="true"
ondragstart="startDrag(event)" />
<br>
<p>Drag the fish image into the rectangle:</p>
<div id="div1"
ondrop="acceptDrop(event)"
ondragover="allowDrop(event)"></div>
</body>
</html>
OUTPUT
Before drag drop
PANIMALAR ENGINEERING COLLEGE P a g e | 26
23CS1201 - WEB APPLICATION DEVELOPMENT
After drag drop
RESULT
CSS 3 drag and drop feature implemented successfully
PANIMALAR ENGINEERING COLLEGE P a g e | 27
23CS1201 - WEB APPLICATION DEVELOPMENT
EX.No.: 8
DATE :
Demonstrate the use canvas to create interactive web page
AIM
To design an interactive webpage using <canvas> element
PROGRAM
<!DOCTYPE html>
<html>
<head>
<script>
function showCoords(event)
{
var x = event.clientX;
var y = event.clientY;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var r=Math.floor(Math.random() * 256);
var g=Math.floor(Math.random() * 256);
var b=Math.floor(Math.random() * 256);
mycolor="rgb("+r+","+g+","+b+")";
ctx.fillStyle=mycolor;
ctx.beginPath();
ctx.arc(x,y,40,0,360);
ctx.fill();
}
</script>
</head>
<body>
<h1 style="border:2px double red;background:yellow;">
Move Mouse pointer over the area of rectangle
</h1>
<canvas id="myCanvas"
width="600" height="300"
style="border:1px solid #ff0000;"
PANIMALAR ENGINEERING COLLEGE P a g e | 28
23CS1201 - WEB APPLICATION DEVELOPMENT
onMouseMove="showCoords(event)">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>
OUTPUT
RESULT
Interactive web page is successfully created using <canvas>
PANIMALAR ENGINEERING COLLEGE P a g e | 29
23CS1201 - WEB APPLICATION DEVELOPMENT
EX.No.: 9
DATE :
Demonstrate the feature of background-image, background-attachment and
border-image property
AIM
To design the webpage to demonstrate background-image and border-image property
PROGRAM
<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
body
{
background-image:url('background2.jpg');
background-repeat:repeat;
background-attachment: fixed;
margin:50px;
}
h2
{
width: 300px;
height: 100px;
border-width: 60px;
border-style: groove;
border-image: url(rose.jpg);
border-image-slice: 30;
border-image-repeat: stretch;
}
h1 {
width: 300px;
height: 100px;
border-width: 60px;
PANIMALAR ENGINEERING COLLEGE P a g e | 30
23CS1201 - WEB APPLICATION DEVELOPMENT
border-style: ridge;
border-image: url(rose.jpg);
border-image-slice: 30;
border-image-repeat: space;
}
</style>
</head>
<body>
<h2>stretching the image border</h2>
<h1>Repeating the image border</h1>
</body>
</html>
OUTPUT
RESULT
Webpage with background-image and border-image property is designed successfully
PANIMALAR ENGINEERING COLLEGE P a g e | 31
23CS1201 - WEB APPLICATION DEVELOPMENT
EX.No.: 10
DATE :
Design a web page using CSS Transition and Transform property
AIM
To design the webpage to demonstrate CSS transition and transform property
PROGRAM
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s 2s , transform 2s 4s;
}
div:hover
{
width: 300px;
height: 300px;
background: yellow;
transform: rotate(180deg);
}
</style>
<body>
<h1>Move over the div element below:</h1>
<div></div>
</body>
</html>
PANIMALAR ENGINEERING COLLEGE P a g e | 32
23CS1201 - WEB APPLICATION DEVELOPMENT
OUTPUT
Before moving mouse pointer on rectangle
After moving mouse pointer on rectangle
RESULT
Webpage successfully designed using CSS transition and transform property
PANIMALAR ENGINEERING COLLEGE P a g e | 33
23CS1201 - WEB APPLICATION DEVELOPMENT
EX.No.: 11
DATE :
Design a web page using CSS animation property
AIM
To design the webpage to demonstrate CSS animation property
PROGRAM
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: example 5s ease-in 2s infinite reverse;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
</body>
</html>
PANIMALAR ENGINEERING COLLEGE P a g e | 34
23CS1201 - WEB APPLICATION DEVELOPMENT
OUTPUT
Animation initial position:
Animation in the middle:
After moving mouse pointer on rectangle
RESULT
Webpage successfully designed using CSS animation property
PANIMALAR ENGINEERING COLLEGE P a g e | 35
23CS1201 - WEB APPLICATION DEVELOPMENT
EX.No.: 12
DATE :
Create a website for a small business using Wordpress
AIM
To create a free small business website using wordpress
STEPS:
STEP 1: Open www.wordpress.org in the browser. From the website click “Get
Wordpress” button displayed in the top-right corner of the webpage. This will bring
the following output in the browser. In that click “see all recommended hosts”
button
STEP 2: From list of web hosting service providers, choose wordpress.com as your
web hosting service provider
PANIMALAR ENGINEERING COLLEGE P a g e | 36
23CS1201 - WEB APPLICATION DEVELOPMENT
STEP 3: from the “create account” screen, either you can login with gmail account or
select “continue with email” option to create your wordpress account
STEP 4: from the “choose your domain” screen choose your web site address and
domain name for your web site
PANIMALAR ENGINEERING COLLEGE P a g e | 37
23CS1201 - WEB APPLICATION DEVELOPMENT
STEP 5: select either “choose a theme” or “design your own” option. I opted for
“design your own” option:
STEP 6: from “select pattern”, you can select template for header, footer, intro,
gallery, contact, etc, which is shown below. Once completed selecting various
pattern then click “select style” button in the bottom of the screen, then click
“select pages” button:
:
STEP 7: Now you will be landed with the following screen, in that click “save and
continue” button:
PANIMALAR ENGINEERING COLLEGE P a g e | 38
23CS1201 - WEB APPLICATION DEVELOPMENT
STEP 8: Finally click “start adding content” button to edit your web page content:
PANIMALAR ENGINEERING COLLEGE P a g e | 39
23CS1201 - WEB APPLICATION DEVELOPMENT
OUTPUT
PANIMALAR ENGINEERING COLLEGE P a g e | 40
23CS1201 - WEB APPLICATION DEVELOPMENT
RESULT
Webpage for small business created successfully using wordpress
PANIMALAR ENGINEERING COLLEGE P a g e | 41
23CS1201 - WEB APPLICATION DEVELOPMENT
EX.No.: 13
DATE :
Create a course website using Wordpress
AIM
To create a free small business website using wordpress
STEPS:
STEP 1: Open www.wordpress.org in the browser. From the website click “Get
Wordpress” button displayed in the top-right corner of the webpage. This will bring
the following output in the browser. In that click “see all recommended hosts”
button
STEP 2: From list of web hosting service providers, choose wordpress.com as your
web hosting service provider
PANIMALAR ENGINEERING COLLEGE P a g e | 42
23CS1201 - WEB APPLICATION DEVELOPMENT
STEP 3: from the “create account” screen, either you can login with gmail account or
select “continue with email” option to create your wordpress account
STEP 4: from the “choose your domain” for your web site. In our case the chosen
domain name is “https://kajendran8.wordpress.com/”
STEP 5: select either “choose a theme” or “design your own” option. I opted for
“choose a theme” option
STEP 6: from the list of theme displayed select best theme for your educational web
site. Finally edit your web page replace all the template with your content. Then
publish and launch your web site for public audience
PANIMALAR ENGINEERING COLLEGE P a g e | 43
23CS1201 - WEB APPLICATION DEVELOPMENT
OUTPUT
PANIMALAR ENGINEERING COLLEGE P a g e | 44
23CS1201 - WEB APPLICATION DEVELOPMENT
RESULT
A course website for web application development is created successfully using wordpress
PANIMALAR ENGINEERING COLLEGE P a g e | 45
