Scribd
Upload
31 views

Program Web

Uploaded by

k.k.deenadhayalan1410
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
31 views

Program Web

Uploaded by

k.k.deenadhayalan1410
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 55

MADURAI KAMARAJ UNIVERSITY COLLEGE

ALAGAR KOVIL ROAD,


MADURAI – 625 002.

WEB PROGRAMMING

Record Notebook

NAME :

BRANCH : SEMESTER

UNIVERSITY REGNO:
MADURAI KAMARAJ UNIVERSITY COLLEGE
ALAGAR KOVIL ROAD,
MADURAI – 625 002.

CERTIFICATE
NAME OF LABORATORY :

UNIVERSITY REGNO :

BRANCH : SEMESTER

Certified that this the bonafide record of work done by

During the semester( ) in the

Year 2022 – 2023.

INTERNAL EXAMINER EXTERNAL EXAMINER

Submitted for the Practical Examination held on

At Madurai Kamaraj University College, Madurai.

Date: Head of Department


CONTENT

S.No TITLE Signature

1 Education Details in a tabular format

2 Creating Resume in webpage

3 Create a login form with navigated to profile page

4 Create a frameset having header, navigation and content section

Prompt for user’s name and display it on the


5
screen using Java script

6 Unorder List

7 Order List

8 Include Image

9 Background Image

10 First Page

11 Second Page

12 BSC CS

13 BCA

14 BSC IT

15 Demonstrate the usage Various types of CSS

16 student record and validate it using Java script


1.Education details in a tabular format
<html>
<head>
<title>Education details</title>
</head>
<body>
<h1 align="center"
style="color:blue">EDUCATION
DETAILS</h1><br><br>
<table border="1" background="gray"
cellspacing="5" cellpadding="5">
<th>SNo</th>
<th>Course</th>
<th>Board/University</th>
<th>School/College</th>
<th>Year of Passing</th>
<th>Percentage</th>
<tr>
<td>1</td>
<td>10</td>
<td>ICSE</td>
<td>DPS</td>
<td>2008</td>
<td>90</td>
</tr>
<tr>
<td>2</td>
<td>12</td>
<td>ICSE</td>
<td>DPS</td>
<td>2010</td>
<td>95</td>
</tr>
</table>
</body>
</html>

Output:
2. Creating Resume In Webpage

<DOCTYPE html>
<html>
<head>
<title>Resume</title>
<style>
</style>
</head>
</body>
<header>
<h1>John Doe</h1>
<p>Web Developer</p>
</header>
<section>
<h2>Summary</h2>
<p>A Highly Motivated and skilled web developer with 5 years of
experience in designing and developing web sites.</p>
</section>
<section>
<h2>Skills</h2>
<u1>
<li>HTML5</li>
<li>CSS3</li>
<li>Javascript</li>
<li>jOuery</li>
<li>Bootstrap</li>
<li>React</li>
<li>Node.js</li>
<li>Express.js</li>
<li>MongoDB</li>
</u1>
</section>
<section>
<h2>Experience</h2>
<h3>Web Developer ABC Company</h2>
<p>June 2018- present</p>
<u1>
<li>Designed and developing responsive websited using
HTML,CSS,Javascript,jQuery.</li>
<li>Integreted Bootsrap frameworkto improve website design and
user experience</li>
<li>Implemented node.js and Express.js to create dynamic web
applications</li>
<li>worked with MongoDB to develop and maintain databases of web
application</li>
</u1>
</section>
<section>
<h2>Education</h2>
<h3>Bachelor of science in computer science-XYz University</h3>
<p>September 2014+June 2018</p>
</section>
</body>
</html>

Output:
3. create a login form with navigated to profile page

<html>
<body>
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post"
action="profile.html" id="myform"
onSubmit="return validateform()">
Name: <input type="text" name="name"><br/>
Password: <input type="password"
name="password"><br/>
<input type="submit" value="register">
</form>
</body>
</html>
profile.html:
<html>
<head>
<title>MKU </title>
</head>
<body bgcolor="gray">
<font size="8">
<a href="about_us.html">ABOUT
US</a>&nbsp;&nbsp;
<a href="biography.html">OUR
SERVICES</a>&nbsp;&nbsp;
<a href="contact_us.html">CONTACT
US</a></font>
</body>
</html>
Output:
4. create a frameset having header, navigation and
content sections
<html>
<FRAMESET Rows = "30%,*" >
<Frame Src="head.html" >
<FRAMESET Cols = "25%,*">
<Frame Src="navigation.html" >
<Frame Src="content.html" >
</FRAMESET>
</FRAMESET>
</html>
Output:
5. Prompt for user’s name and display it on the screen
using Java script
<html>
<head>
<title>
Greetings </title>
</head>
<body>
<script language="JavaScript">
firstName = prompt("Please Enter your name", "");
document.write("Hello " +
firstName + ", welcome to my Web page.");
</script>
<p> This is my web page... </p>
</body>
</html>
Output:
eeee eee eeee eee eee e
15. Demonstrate the usage Various types of CSS

main.css
<html>
<head>
<title>CSS</title>
<link rel="stylesheet" href="style.css">
<style>
.name {
color:#049CA2;
font-size:40px;
font-weight:bold;
}
.learn {
color: #F3090D;
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<!-- Site navigation menu -->
<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="aboutus.html">About Us</a>
</ul>
<!-- Main content -->
<h1>MADURAI KAMARAJ UNIVERSITY
COLLEGE</h1>
<p>Welcome to my styled page!
<p>Madurai Kamaraj University, is on its relentless
journey for the past 52 years surmounting hurdles of
indigenous and exotic nature on its way and has passed
through the tests of accreditation towards reaching the
status of excellence. University is aware that the process
of achieving excellence is continuous and therefore, all
efforts are in progress to keep up the momentum.</p>
<div class ="name">Dept of MCA(Internal)</div>
<div class ="learn">A Tutorial on Internal Cascading
Style Sheet</div>
</div>
<!-- Sign and date the page, it's only polite! -->
<address>Made 5 May 2022<br>
by myself.</address>
style.css
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
output:
16. student record and validate it using Java script
<html>
<head>
<script type="text/javascript"
src="validate.js"></script>
</head>
<body>
<form action="#" name="StudentRegistration"
onsubmit="return(validate());">
<table cellpadding="2" width="20%"
bgcolor="99FFFF" align="center"
cellspacing="2">
<tr>
<td colspan=2>
<center><font size=4><b>Student Registration
Form</b></font></center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name=textnames
id="textname" size="30"></td>
</tr>

<tr>
<td>Father Name</td>
<td><input type="text" name="fathername"
id="fathername"
size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress"
id="paddress" size="30"></td>
</tr>
<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male"
size="10">Male
<input type="radio" name="sex" value="Female"
size="10">Female</td>
</tr>
<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW
DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>
<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW
DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode"
id="pincode" size="30"></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid"
id="emailid" size="30"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob"
size="30"></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno"
id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit"
value="Submit Form" /></td>
</tr>
</table>
</form>
</body>
</html>

validate.js
function validate()
{
if( document.StudentRegistration.textnames.value
== "" )
{
alert( "Please provide your Name!" );
document.StudentRegistration.textnames.focus() ;
return false;
}
if( document.StudentRegistration.fathername.value
== "" )
{
alert( "Please provide your Father Name!" );
document.StudentRegistration.fathername.focus() ;
return false;
}
if( document.StudentRegistration.paddress.value ==
"" )
{
alert( "Please provide your Postal Address!" );
document.StudentRegistration.paddress.focus() ;
return false;
}
if(
document.StudentRegistration.personaladdress.value
== "" )
{
alert( "Please provide your Personal Address!" );
document.StudentRegistration.personaladdress.focus() ;
return false;
}
if ( ( StudentRegistration.sex[0].checked == false )
&& ( StudentRegistration.sex[1].checked == false )
)
{
alert ( "Please choose your Gender: Male or Female"
);
return false;
}
if( document.StudentRegistration.City.value == "-1"
)
{
alert( "Please provide your City!" );
document.StudentRegistration.City.focus() ;
return false;
}
if( document.StudentRegistration.Course.value == "-
1" )
{
alert( "Please provide your Course!" );
return false;
}
if( document.StudentRegistration.District.value =="-1" )
{
alert( "Please provide your Select District!" );
return false;
}
if( document.StudentRegistration.State.value == "-
1" )
{
alert( "Please provide your Select State!" );
return false;
}
if( document.StudentRegistration.pincode.value ==
"" ||
isNaN(
document.StudentRegistration.pincode.value) ||
document.StudentRegistration.pincode.value.length
!= 6 )
{
alert( "Please provide a pincode in the format
######." );
document.StudentRegistration.pincode.focus() ;
return false;
}
var email =
document.StudentRegistration.emailid.value;
atpos = email.indexOf
atpos = email.indexOf("@");
dotpos = email.lastIndexOf(".");
if (email == "" || atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.StudentRegistration.emailid.focus() ;
return false;
}
if( document.StudentRegistration.dob.value == "" )
{
alert( "Please provide your DOB!" );
document.StudentRegistration.dob.focus() ;
return false;
}
if( document.StudentRegistration.mobileno.value ==
"" ||
isNaN(
document.StudentRegistration.mobileno.value) ||
document.StudentRegistration.mobileno.value.lengt
h != 10 )
{
alert( "Please provide a Mobile No in the format
123." );
document.StudentRegistration.mobileno.focus() ;
return false;
}
return( true );
}
Output:

You might also like