Scribd
Upload
82 views

Vidyaa Vikas College of Engineering & Technology TIRUCHENGODE - 637 214

1. The document is a record notebook for a student named Sowmiya containing details of her resume prepared using HTML tags and CSS. 2. The resume contains personal details, objective, qualifications, interests, skills, extracurricular activities, and a declaration section. 3. Styling is applied using internal CSS, inline CSS and an external CSS stylesheet to modify colors, text alignment and other style properties.

Uploaded by

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

Vidyaa Vikas College of Engineering & Technology TIRUCHENGODE - 637 214

1. The document is a record notebook for a student named Sowmiya containing details of her resume prepared using HTML tags and CSS. 2. The resume contains personal details, objective, qualifications, interests, skills, extracurricular activities, and a declaration section. 3. Styling is applied using internal CSS, inline CSS and an external CSS stylesheet to modify colors, text alignment and other style properties.

Uploaded by

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

VIDYAA VIKAS COLLEGE OF ENGINEERING &

TECHNOLOGY

TIRUCHENGODE -- 637 214

DEPARTMENT OF MASTER OF COMPUTER APPLICATIONS

RECORD NOTEBOOK

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

Register No. : …………………………………………..……

Subject Code : ………………………………………..………

Subject : …………………………………………………
VIDYAA VIKAS COLLEGE OF ENGINEERING &
TECHNOLOGY

TIRUCHENGODE -- 637 214

DEPARTMENT OF MASTER OF COMPUTER APPLICATIONS

Certified that this is the bonafide record of work done by


Selvan /Selvi ………………………………………………. With register
number ………………………….... of III Year / V Semester during the
academic year 2018-2019 for the MC5312 Web Programming Laboratory.

Staff-in-charge Head of the Department

Submitted to the university practical examination held on ………………

Internal Examiner External Examiner


TABLE OF CONTENTS

S.NO. DATE NAME OF THE PROGRAM PAGE NO. SIGNATURE


EX.NO:

DATE:

Resume Preparation using HTML Tag with W3C Validator


Aim:
To Prepare a resume using HTML Tags and validate the HTML tags using the
validator (https://validator.w3.org/check).

Algorithm:
Step1: Start the Process.

Step2: Create your basic Detail of your profile on a word processor and store it.

Step3: Save your basic details of your document and store it in text (.txt) format.

Step4: Open the html editor to create a webpage of our resume.

Step5: Create a document type declaration: <! DOCTYPE html>.

Step6: Open the container tag <html> and end with </html>.

Step7: Create <head > and <title > tag and ends with </head > and </title >.

Step8: Create a document tag <body> to create a resume and ends with

</body>

Step9: Prepare a resume using the tags like <h1>, <p>, <b>, <ol>, <ul> for our

documents.

Step10: Using the w3cvalidator (https://validator.w3.org) validate your html

elements.

Step11: Stop the Process.


Program:
<html>
<head>
<title>Resume Preparation</title>
<br><br>
<font color="red">
<h1><center>Resume</center></h1></font>
<div align="right">
<p ><strong>Sowmiya</strong><br>
Devanankurichi(P.o),<br>
Tiruchengode(T.k),<br>
Namakkal(D.t).<br>
sowmiyasugumar11@gmail.com
</p>
</div>
<hr>
<p class="head"><strong>Objective</font></strong></p>
<p class="head">To hunt down a challenging position to contribute a
massive role in the fast growing and competitive field</p>
<p class ="head"><strong>Qualification</strong><br></p>
<ul>
<li><span class="head">Master of Computer Application in
Vivekanandha Insitute of Information and Management Studies,<br>
tiruchengode from Anna Unniversity aggregate is 8.5</span></li>
<li><span class="head">Bachelor of ComputerScience in Vellalar
college for Women,Erode from<br>Bharathiytar University with
76%in2015-2018</span></li>
<li><span class="head">Higher Secondary School in Shri Renga
Vidhyalaya,Namakkal with 86%in <br>2013-2015</span></li>
<li><span class="head">S.S.L.C in Shri Renga Vidhyalaya,Namakkal
with 91% in 2013</span></li>
</ul>
<p class="head"><strong>Intrests</strong></p>
</ul>
<li>Drawing</li>
<li>Photography</li>
<li>Design</li>
<li>Programming</li>
<li>ComputerScience</li>
</ul>
<p class="head"><strong>Skills</strong></p>
<ul>
<li>Student Techonology Intern for wiltton school district</li>
<li>BabySitter</li>
</ul>
<p class="head"><strong>Extracurriculuars</strong></p>
<ul>
<li>Recycling club</li>
<li>Gardening club</li>
<li>Book Club</li>
</ul>
<p><strong>DECLARATION</strong></p>
<p> I do here my conform that the information given in above the true
through the best of knowledge brief.</p>
</div>
<div class="right"></div>
</body>
</head>
</html>
Output of Resume Preparation:

Resume
Sowmiya
Devanankurichi(P.o),
Tiruchengode(T.k),
Namakkal(D.t).
sowmiyasugumar11@gmail.com

Objective

To hunt down a challenging position to contribute a massive role in the fast


growing and competitive field

Qualification

 Master of Computer Application in Vivekanandha Insitute of Information


and Management Studies,
tiruchengode from Anna Unniversity aggregate is 8.5
 Bachelor of ComputerScience in Vellalar college for Women,Erode from
Bharathiytar University with 76%in2015-2018
 Higher Secondary School in Shri Renga Vidhyalaya,Namakkal with 86%in
2013-2015
 S.S.L.C in Shri Renga Vidhyalaya,Namakkal with 91% in 2013

Intrests

 Drawing
 Photography
 Design
 Programming
 ComputerScience

Skills

 Student Techonology Intern for wiltton school district


 BabySitter

Extracurriculuars

 Recycling club
 Gardening club
Output of W3C Validator:

1. https://validator.w3.org/check

2. 13 Errors, 4 warning(s)
EX.NO:

DATE:

Resume Preparation using HTML Tag with Cascading Style Sheet

Aim:

To Prepare a resume using the HTML tags and design using the
Cascading Style Sheet.

Algorithm:
Step1: Start the Process.

Step2: Create your basic Detail of your profile on a word processor and store it.

Step3: Save your basic details of your document and store it in text (.txt) format.

Step4: Open the html editor to create a webpage of our resume.

Step5: Create a document type declaration: <! DOCTYPE html>.

Step6: Open the container tag <html> and end with </html>.

Step7: Create <head > and <title > tag and ends with </head > and </title >.

Step8: Create a document tag <body> to create a resume and ends with </body>.

Step9: Prepare a resume using the tags like <h1>, <p>, <b>, <ol>, <ul> for our
documents.

Step 10: To access the ways of inserting style like External CSS, Internal CSS,
Inline CSS to modify the style of web pages.

Step 11: Stop the Process.


Program:

<html>
<head>
<title>Resume Preparation</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<br><br>
<style>
body
h1 {
color: pink;
margin-left: 40px;
}
</style>
<font color="red">
<h1><center>Resume</center></h1></font>
<div align="right">
<p style="color:red;"><strong>Sowmiya</strong><br>
Devanankurichi(P.o),<br>
Tiruchengode(T.k),<br>
Namakkal(D.t).<br>
sowmiyasugumar11@gmail.com
</p>
</div>
<hr>
<p class="head"><strong>Objective</font></strong></p>
<p class="head">To hunt down a challenging position to contribute a
massive role in the fast growing and competitive field</p>
<p class="head"><strong>Qualification</strong><br></p>
<ul>
<li><span class="head">Master of Computer Application in
Vivekanandha Insitute of Information and Management Studies,<br>
tiruchengode from Anna Unniversity aggregate is 8.5</span></li>
<li><span class="head">Bachelor of ComputerScience in Vellalar college
for Women,Erode from<br>Bharathiytar University with 76%in2015-
2018</span></li>
<li><span class="head">Higher Secondary School in Shri Renga
Vidhyalaya,Namakkal with 86%in <br>2013-2015</span></li>
<li><span class="head">S.S.L.C in Shri Renga Vidhyalaya,Namakkal
with 91% in 2013</span></li>
</ul>
<p class="head"><strong>Intrests</strong></p>
<ul>
<li>Drawing</li>
<li>Photography</li>
<li>Design</li>
<li>Programming</li>
<li>ComputerScience</li>
</ul>
<p class="head"><strong>Skills</strong></p>
<ul>
<li>Student Techonology Intern for wiltton school district</li>
<li>BabySitter</li>
</ul>
<p class="head"><strong>Extracurriculuars</strong></p>
<ul>
<li>Recycling club</li>
<li>Gardening club</li>
<li>Book Club</li>
</ul>
<p><strong>DECLARATION</strong></p>
<p> I do here my conform that the information given in above the true
through the best of knowledge brief.</p>
</div>
<div class="right"></div>
</body>
</head>
</html>

mystyle.css:

Body
{
background-color: lightblue;
}
Output:

Resume
Sowmiya
Devanankurichi(P.o),
Tiruchengode(T.k),
Namakkal(D.t).
sowmiyasugumar11@gmail.com

Objective

To hunt down a challenging position to contribute a massive role in the fast


growing and competitive field

Qualification

 Master of Computer Application in Vivekanandha Insitute of Information


ana Management Studies,
tiruchengode from Anna Unniversity aggregate is 8.5
 Bachelor of ComputerScience in Vellalar college for Women,Erode from
Bharathiytar University with 76%in2015-2018
 Higher Secondary School in Shri Renga Vidhyalaya,Namakkal with 86%in
2013-2015
 S.S.L.C in Shri Renga Vidhyalaya,Namakkal with 91% in 2013

Intrests

 Drawing
 Photography
 Design
 Programming
 ComputerScience

Skills

 Student Techonology Intern for wiltton school district


 BabySitter

Extracurriculuars

 Recycling club
 Gardening club
 Book Club

DECLARATION

I do here my conform that the information given in above the true through the best
of knowledge brief.
EX.NO :

DATE :

Image Drag and Drop using API’s

Aim:
To display an image in a web page using html and to drag and drop of a image
using HTML API’s.

Algorithm:
Step 1: Start the Process.

Step 2: Create a source of an image element and set the drag gable attribute to
true.

Step 3: Create the ondragstart attribute calls a function, drag(event).

Step 4: Create a function drag(ev).

Step 5: Create a event ev.dataTransfer.setData method sets the data type and the
value of the dragged data.

Step 6: Create a function drop(ev).

Step 7: Create a function allowdrop(ev).

Step 8: Set the ondragover event specifies where the dragged data can be
dropped.

Step 9: Do the ondrop attribute when the dragged data to be dropped using
function drop().

Step 10: Stop the Process.


Program:

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1
{
width: 250px;
height: 250px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the image into the rectangle:</p>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="image.jpg" draggable="true"
ondragstart="drag(event)" width="250" height="250">
</body>
</html>
Output:
EX.NO :

DATE :

Image Drag and Drop using API’s

Aim:

Algorithm:
Program:

<html>
<head>
<title>Student Registration Form</title>
<script type="text/javascript" src="validate1.js">
</script>
</head>
<body>
<form method="post" name="StudentRegistration"
onSubmit="return(validate1());">
<table cellpadding="2" width="50%" 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>Applicant Name</td>
<td><input type="text" name="studentname" id="studentname"
size="30"></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername"
size="30"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>
<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress" id="personaladdress"
size="30"></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno"
size="30"></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" 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="male" size="10">Female
</td>
</tr>
<tr>
<td>PostApplied for</td>
<td><input type="text" name="postapplied" id="paddress"
size="30"></td>
</tr>
<tr>
<td>City</td>
<td><select name="city">
<option value="-1"selected>select..</option>
<option value="Cochin">Cochin</option>
<option value="Hyderabad">Hyderabad</option>
<option value="Banglore">Banglore</option></select></td>
</tr>
<tr>
<td>Educational Qualification</td>
<td><select name="Education">
<option value="-1" selected>select..</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="B.Tech">B.Tech</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="Chennai">Chennai</option>
<option value="Ernakulam">Ernakulam</option>
<option value="Secundrabad">Secundrabad</option>
<option value="Ramanagara">Ramanagara</option>
</select></td>
</tr>
<tr>
<td>State</td>
<td><select name="state">
<option value="-1" selected>select..</option>
<option value="Tamilnadu">Tamilnadu</option>
<option value="Kerala">Kerala</option>
<option value="Andhra">Andhra</option>
<option value="Karnataka">Karnataka</option>
</select></td>
</tr>
<tr>
<td>
<input type="reset">
</td>
<td colspan="2">
<input type="submit" value="SubmitFormss"/>
</td>
</tr>
</table>
</form>
</body>
</html>

Validate1:
function validate1()
{
if( document.StudentRegistration.studentname.value == "" )
{
alert( "Please provide your Applicant's Name!" );
document.StudentRegistration.studentname.focus() ;
return false;
}
if( document.StudentRegistration.fathername.value == "" )
{
alert( "Please provide your Father Name!" );
document.StudentRegistration.fathername.focus() ;
return false;
}
if( document.StudentRegistration.dob.value == "" )
{
alert( "Please provide your DOB!" );
document.StudentRegistration.dob.focus() ;
return false;
}
if( document.StudentRegistration.personaladdress.value == "" )
{
alert( "Please provide your Personal Address!" );
document.StudentRegistration.personaladdress.focus() ;
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;
}
if( document.StudentRegistration.mobileno.value == "" ||
isNaN( document.StudentRegistration.mobileno.value) ||
document.StudentRegistration.mobileno.value.length != 10 )
{
alert( "Please provide a Mobile No in the format 123." );
document.StudentRegistration.mobileno.focus() ;
return false;
}
var email = document.StudentRegistration.emailid.value;
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 ( ( StudentRegistration.sex[0].checked == false ) && (
StudentRegistration.sex[1].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
return false;
}
if( document.StudentRegistration.postapplied.value == "" )
{
alert( "Please provide your Post Applied!" );
document.StudentRegistration.paddress.focus() ;
return false;
}
if( document.StudentRegistration.city.value == "-1" )
{
alert( "Please provide your City!" );
document.StudentRegistration.city.focus() ;
return false;
}
if( document.StudentRegistration.Education.value == "-1" )
{
alert( "Please provide your Education!" );
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;
}
return( true );
}
Output:
EX.NO :

DATE :

Image Drag and Drop using API’s

Aim:

To Prepare a

Algorithm:
Program:
<html>
<head>
<title>Student Registration Form</title>
<script type="text/javascript">
function validate()
{
if(document.StudentCgpa.studentregisterno.value == "")
{
alert( "Please provide your Student Register No!" );
document.StudentCgpa.studentregisterno.focus();
return false;
}
if( document.StudentCgpa.studentname.value == "")
{
alert( "Please provide your Student Name!" );
document.StudentCgpa.studentname.focus();
return false;
}
if( document.StudentCgpa.semester.value == "")
{
alert( "Please provide your Semester!" );
document.StudentCgpa.semester.focus();
return false;
}

if( document.StudentCgpa.mark1.value == "")


{
alert( "Please provide your Mark1 Value!" );
document.StudentCgpa.mark1.focus();
return false;
}
if( document.StudentCgpa.mark2.value == "")
{
alert( "Please provide your Mark2 Value!" );
document.StudentCgpa.mark2.focus();
return false;
}
if( document.StudentCgpa.mark3.value == "")
{
alert( "Please provide your Mark3 Value!" );
document.StudentCgpa.mark3.focus();
return false;
}
if( document.StudentCgpa.mark4.value == "")
{
alert( "Please provide your Mark4 Value!" );
document.StudentCgpa.mark4.focus();
return false;
}
if( document.StudentCgpa.mark5.value == "")
{
alert( "Please provide your Mark5 Value!" );
document.StudentCgpa.mark5.focus();
return false;
}
var a=parseInt(document.StudentCgpa.mark1.value);
var b=parseInt(document.StudentCgpa.mark2.value);
var c=parseInt(document.StudentCgpa.mark3.value);
var d=parseInt(document.StudentCgpa.mark4.value);
var e=parseInt(document.StudentCgpa.mark5.value);
var result=a+b+c+d+e;
var average=result/5;
var grade=average/10;
document.StudentCgpa.total.value=result;
document.StudentCgpa.average.value=average;
document.StudentCgpa.grade.value=grade;
}
</script>
</head>
<body onload="document.StudentCgpa.studentregisterno.focus()">
<form method="post" name="StudentCgpa">
<table cellpadding="2" width="50%" bgcolor="99FFFF" align="center"
cellspacing="2">
<tr>
<td colspan=2>
<center>
<strong><font size="4">Student CGPA Calculator</font></strong>
</center>
</td>
</tr>
<tr>
<td>Student Register No</td>
<td><input type="text" name="studentregisterno" size="30"></td>
</tr>
<tr>
<td>Student Name</td>
<td><input type="text" name="studentname" size="30"></td>
</tr>
<tr>
<td>Semester</td>
<td><input type="text" name="semester" size="30"></td>
</tr>
<tr>
<td>Mark 1</td>
<td><input type="text" name="mark1" size="30"></td>
</tr>
<tr>
<td>Mark 2</td>
<td><input type="text" name="mark2" size="30"></td>
</tr>
<tr>
<td>Mark 3</td>
<td><input type="text" name="mark3" size="30"></td>
</tr>
<tr>
<td>Mark 4</td>
<td><input type="text" name="mark4" size="30"></td>
</tr>
<tr>
<td>Mark 5</td>
<td><input type="text" name="mark5" size="30"></td>
</tr>
<tr>
<td>Total</td>
<td><input type="text" name="total" size="30"></td>
</tr>
<tr>
<td>Average</td>
<td><input name="average" type="text" id="average" size="30"></td>
</tr>
<tr>
<td>CGPA</td>
<td><input name="grade" type="text" id="grade" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2">
<input name="calculatecgpa" type="button" onClick="validate()"
value="Calculate CGPA"/></td>
</tr>
</table>
</form>
</body>
</html>
Output:

EX.NO :

DATE :
Image Drag and Drop using API’s

Aim:

To Prepare a

Algorithm:

Program:

<html>
<head>
<title>Student Registration Form</title>
<script type="text/javascript">
function validate()
{
var panidentity = document.getElementById("panno");
if( document.pancard.firstname.value == "" )
{
alert( "Please provide your First Name!" );
document.pancard.firstname.focus() ;
return false;
}
if( document.pancard.lastname.value == "" )
{
alert( "Please provide your Last Name!" );
document.pancard.lastname.focus();
return false;
}
if( document.pancard.fathersname.value == "" )
{
alert( "Please provide your Fathers Name!" );
document.pancard.fathersname.focus();
return false;
}
if( document.pancard.dob.value == "" )
{
alert( "Please provide your DOB!" );
document.pancard.dob.focus() ;
return false;
}
if( document.pancard.address.value == "" )
{
alert( "Please provide your Address!" );
document.pancard.address.focus() ;
return false;
}
if( document.pancard.mobileno.value == "" )
{
alert( "Please provide your Mobile NO!" );
document.pancard.mobileno.focus() ;
return false;
}
if( document.pancard.panno.value == "" )
{
alert( "Please provide your pan NO!" );
document.pancard.panno.focus() ;
return false;
}
if ( document.pancard.panno.value != "" )
{
var panPattern = /^([a-zA-Z]{5})(\d{4})([a-zA-Z]{1})$/;
var p = document.pancard.panno.value;
if (p.search(panPattern) == -1)
{
alert("Invalid Pan No");
document.pancard.panno.value='';
document.pancard.panno.focus() ;
return false;
}
}
if( !document.pancard.cbox.checked )
{
alert( "Please Ensure the terms and Conditions!" );
document.pancard.panno.focus() ;
return false;
}
}
</script>
</head>
<body onLoad="document.pancard.firstname.focus()">
<form method="post" name="pancard" >
<table cellpadding="2" width="50%" bgcolor="99FFFF" align="center"
cellspacing="2">
<tr>
<td colspan=2>
<center><strong><font size="4">Pan Card Details </font></strong>
</center></td>
</tr>
<tr>
<td>First Name </td>
<td><input type="text" name="firstname" size="30"></td>
</tr>
<tr>
<td>Last Name </td>
<td><input type="text" name="lastname" size="30"></td>
</tr>
<tr>
<td>Fathers Name </td>
<td><input type="text" name="fathersname" size="30"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" size="30"></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address" size="30"></td>
</tr>
<tr>
<td>Mobile No</td>
<td><input type="text" name="mobileno" size="30"></td>
</tr>
<tr>
<td>PAN No</td>
<td><input name="panno" type="text" size="30" maxlength="10"></td>
</tr>
<tr>
<td>
<input type="checkbox" name="cbox"> <b><u>I Agree To ALL Terms
And Conditions</u></b>
</td>
</tr>
<tr>
<td>
<input type="reset"></td>
<td colspan="2"><input name="validatepan" type="button"
onClick="validate()" value="Validate Pan" /></td>
</tr>
</table>
</form>
</body>
</html>

Output:
EX.NO :

DATE :

Image Drag and Drop using API’s

Aim:

To Prepare a

Algorithm:

You might also like