Web Program Record PDF

EX.
NO : 1
CREATE YOUR OWN RESUME USING HTML5 TAGS
DATE :
AIM:
To write a html program to create RESUME and display it.
PROCEDURE:
1.Start the document with the format <!doctype> and <html> tag.
2.Use the <body> tag in the document to design.
3.The <header>tag and <ul>and <li> tags are used to highlight the heading and the ordering the
items.
4.The informations were include in it using respective tags.
the</body>tag is ended.
5.Atlast end of the document with the </html>tag.
1
CODINGS:
<!Doctype html>
<html>
<head>
<title>MYRESUME</title>
<link rel="stylesheet" href="resume.css" />
</head>
<body class="over">
<header>
<h1 class="head_content">CURRICULUM VITAE</h1>
<div>
<div style="float:right;padding-bottom:10px;">
<img src="profile.jpg" alt="Profile" />
</div>
<div class="address_info">
<p>Name:B.S.RAJESH</p>
<p>Contact No:159897314</p>
<p>Email:rajesharun@gmail.com</p>
</div></div>
</header>
<section>
<h2 class="heading">Education</h2>
<span class="deparment">MCA (Thirumalai Engineering College)</span>
<hr class="line_break" />
</section>
<div>
<h2 class="heading">Objective</h2>
<p class="objective">An objective is a short statement that clarifies your goals regarding the type of
employment desired and how your skills make you a good fit.</p>
</div>
<section>
<h2 class="heading">Technical skills</h2>
<ul>
<li class="list_head">
Programming languages:
2
<ul>
<li class="list_item">Java</li>
<li class="list_item">C</li>
<li class="list_item">C#</li>
</ul>
</li>
<li class="list_head">Web design
<ul>
<li class="list_item">
HTML
</li>
<li class="list_item">CSS</li>
<li class="list_item">PHP</li>
<li class="list_item">JAVASCRIPT</li>
<li class="list_item">AJAX</li>
</ul>
</li>
</ul>
</section>
<section>
<div>
<h2 class="heading">Declaration</h2>
<p class="declaration">Declaration is used to say that the information you provided in your resume
or CV is genuine. So just write this. I here by declare that the above information is true and best of my
knowledge. But let me tell as per latest patter, its good and okay if you don't mention declaration part.</p>
</div>
</section>
</body>
</html>
3
OUTPUT:
4
RESULT:
Thus the above program using html5 tag is created and displayed successfully.
5
EX. NO : 2 DEBUG AND VALIDATE YOUR RESUME USING W3C
DATE : VALIDATOR
AIM:
To write a program to debug and validate your resume using w3c validator and to fix issues.
PROCEDURE:
1.Start the program with the format <!doctype> and <html> tags in the document.
2.Insert the css tag in the document by<style> tag in this.
3.Then the <margin> and <padding>tags were used to align the document.
4.After it the </style> is ended.
5.Open the <body>tag to give the content to the document.
6.The <head> is used to display the heading of the document.
7.Then<ahref> were also used to link the another page.
8.Close the </body>tag.
9.Atlast </html> tag too ended.
6
CODINGS:
<!Doctype html>
<html>
<head>
<title>W3C validation</title>
</head>
<style>
h2,.link_content
{
text-align: center;
}
h2
{
margin: 0px;
color:#fff;
background: blue;
padding:60px 0px;
}
.link_content
{
color:#fff;
background:#fdcd85;
padding: 17%;
font-size: 20px;
}
.link_content a
{
border:3px solid #fff;
padding: 20px;
text-decoration: none;
}
.link_content a:hover
{
color:blue;
background: #fff;
}
7
</style>
<body>
<div>
<div>
<h2>W3C Validation</h2>
</div>
<div class="link_content">
<a href="https://validator.w3.org/#validate_by_upload" target="_blank">Validate your code: Click
here</a>
</div>
</div>
</body>
</html>
8
OUTPUT:
9
RESULT:
Thus the above program used to debug and validate the resume using w3c validator is successfully
displayed.
10
EX. NO : 3
ADD STYLES TO YOUR RESUME USING CSS 3 PROPERTIES
DATE :
AIM:
To create a program to add styles to your resume using css3 properties.
PROCEDURE:
1.Start the document with the format <!doctype> and <html>tag.

2.Add the Inline,Internal and External style to the document based on the priority.
3.Adding css3 properties to our profile.
4.Use <body> tag to display the content of the document.
5. The </body> tag is ended.
6.Close the </html>.
11
CODINGS:
Resume.css
h1
{
text-decoration:underline;
}
header
{
border-bottom: 1px solid #000;
padding: 18px;
}
header p
{
color:#FF5733;
font-family:Courier New;
}
.head_content
{
text-align:center;
color:#58D68D;
}
.heading
{
font-family:Courier;
color:blue;
}
.heading:hover
{
color:pink;
}
.address_info
{
font-size:23px;
font-weight:bold;
12
font-family:Verdana;
}
.line_break
{
height:1px;
background-color:#000;
}
.list_item
{
font-family:Georgia;
font-size:18px;
font-weight:bold;
color:orange;
}
.list_item:hover
{
color:green;
}
.list_head
{
font-size:20px;
font-weight:bold;
color:#000;
font-family:Helvetica;
}
.deparment,.objective
{
font-size:20px;
}
.declaration
{
font-size:20px;
}
13
OUTPUT:
14
RESULT:
Thus the above program on adding styles to the resume using css3 properties is successfully
displayed.
15
EX. NO : 4 a.)ADDING FUNCTIONALITIES USING ANY 2 OF HTML5
DATE : API’S
AIM:
To create a program to add functionalities using any 2 of html5 API’s.
PROCEDURE:
1.Start the document with the format<!doctype>and <html>tag.

2.<script>tag is used to give scripting in the document.
3.Use the <head>and <title>tag and end the </title> tag after title has given.
4.Use the <body> tag contain the info about the document.
5.Add the <style>tag,<script>tag and <div>tags are included.
6.<!- -Drag/Drop- -> used to drag and drop the content.
7.End the </script>,</body> and the </html>tags.
16
CODINGS:
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 API's</title>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
.drag
{
margin: auto;
width:30%;
border: 1px solid;
padding: 25px;
}
h2
{
text-align: center;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
17
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
// local storage
</script>
</head>
<body>

<section>
<div class="drag">
<h2>Drag/Drop</h2>
<p>Drag the image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br>
<img id="drag1" src="jop.jpeg" draggable="true" ondragstart="drag(event)" width="336"
height="69">
</div>
</section>

<div style="text-align: center;">

<h2>Local Storage</h2>
<label>Name: </label><p id="result"></p>
</div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "first storage");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
18
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web
Storage...";
}
</script>
</body>
</html>
19
OUTPUT:
20
RESULT:
Thus the above program adding functionalities in html5 of API’s is successfully created and
displayed.
21
EX. NO : 4 b.)CREATE STUDENT REGISTRATION FORM FOR JOB
DATE : APLLICATION AND VALIDATE USING JAVASCRIPT
AIM:
To create a student registration form for job application and validate the form using javascript.
PROCEDURE:
1.Start the document with format <!doctype> and <html>tag.

2.Use <style> tag in the document. And add<head>tag.
3.Add the <Script>tag for scripting in the document.
4.Add <form>tag to add label and text in the form.
5.Close the </script> and</head>tag.
6.End </form>tag and </script>tag.
7.Atlast end the document by closing the </html>tag.
22
CODINGS:
<!Doctype html>
<html>
<head>
<title>Jop Application</title>
<style>
body
{
background: url("jop.jpeg");
background-repeat: no-repeat;
background-size: cover;
}
.jop_form
{
width: 30%;
margin: auto;
border: 3px solid #fff;
padding: 30px;
border-radius: 6px;
}
.t1
{
float: right;
padding: 5px 10px;;
}
.model
{
padding:10px 0px;
font-size: 20px;
}
#address
{
overflow: auto;
}
.submit
{
23
text-align: center;
padding: 15px 0px;
}
.submit a
{
border: 2px solid #fff;
color:#fff;
padding: 10px;
border-radius: 10px;
}
.submit a:hover
{
color:blue;
border: 2px solid blue;
}
</style>
<script>
function jop()
{
a=document.getElementById("name").value;
b=document.getElementById("dob").value;
c=document.getElementById("education").value;
d=document.getElementById("email").value;
e=document.getElementById("phone").value;
if(a == "" && b == "" && c == "" && d == "" && e == "")
{
alert("Enter your information");
}
else{
alert("valid");
}
}
</script>
</head>
<body>
<header>
24
<h2 style="text-align: center;">JOP APPLICATION</h2>
</header>
<section>
<div class="jop_form">
<form action="">
<div class="model">
<label>Full name *</label><input type="text" name="name" placeholder="Full Name" id="name"
class="t1" />
</div>
<div class="model">
<label>Date of birth *</label><input type="text" placeholder="Date of birth" id="dob" name="dob"
class="t1" />
</div>
<div class="model">
<label style="padding-right: 45%;">Gender</label><input type="radio" name="gender" id="male"
/><label>male</label>
<input type="radio" name="gender" id="female" value="female" /><label>female</label>
</div>
<div class="model">
<label>Education *</label><input type="text" placeholder="Education" id="education"
name="education" class="t1" />
</div>
<div class="model">
<label>Resume</label><input type="file" id="file" name="file" class="t1" />
</div>
<div class="model">
<label>Address</label><input type="text" placeholder="Address" id="address" name="address"
class="t1" />
</div>
<div class="model">
<label>Email *</label><input type="email" placeholder="Email" id="email" name="email"
class="t1" />
</div>
<div class="model">
<label>Phone *</label><input type="text" name="phone" placeholder="Phone" id="phone"
class="t1" />
</div>
25
<h2>Previous/Current Employment Details</h2>
<div class="model">
<label>Company name</label><input type="text" id="company_name" placeholder="Previous
Company Name" class="t1" />
</div>
<div class="model">
<label>Date of joining</label><input type="date" id="date" name="date" class="t1" />
</div>
<div class="model">
<label>Date of leaving</label><input type="date" id="dat" name="dat" class="t1" />
</div>
<div class="submit">
<a href="" onclick="jop()">Submit</a>
</div>
</form>
</div>
</section>
</body>
</html>
26
OUTPUT:
27
RESULT:
Thus the above program of creation job application form is successfully validated and displayed.
28
EX.NO:5 a.)CREATE CGPA CALCULATOR USING HTML,CSS AND
DATE: JAVASCRIPT AND FUNCTIONS IN JAVASCRIPT
AIM:
To create a CGPA calculator in web browser using html,css and javascript and use the function of
javascript.
PROCEDURE:
1.Start the program with the format<!doctype> and <html>tag.

2.Initiate the program with <title>tag.
3.Use <style> tag to add css in it.
4.Add the <form>tag to present the calculator on a form.
5.<body> tag contain content to be filled and to display the CGPA in the form.
6.<input type= > on clicking to get the percentage.
7.Use <script>tag is write the scripting in the document.
8.Close </style>,</script>tags.
9.Atlast end </html>tag.
29
CODINGS:
<!Doctype html>
<html>
<head>
<title>CGPA calculator</title>
<style>
.head_content
{
color:blue;
}
.form_content
{
width:100%;
text-align:center;
//border:1px solid #000;
}
.inside_form
{
border: 2px solid blue;
border-radius:20px;
text-align: center;
width: 30%;
margin: auto;
}
input
{
margin:10px;
border-radius:5px;
border:1px solid pink;
}
.sub
{
background-color:blue;
color:#fff;
padding:10px;
30
}
label
{
font-weight:bold;
}
</style>
</head>
<body>
<div class="form_content">
<div class="inside_form">
<h2 class="head_content">GET PERCENTAGE</h2>
<form>
<label>Mark1</label><input type="text" id="mark1" /><br>
<a href="javascript:void(0)" onclick="per()" class="sub">Get Marks</a><br>
<label>Grade</label><input type="text" id="grade" /><br>
<label>Percentage</label><input type="text" id="percentage" />
</form>
</div>
</div>
<script>
function per()
{
var m1=Number(document.getElementById("mark1").value);
var n=m1+m2+m3;
var m=n/3;
if(m < 60){
document.getElementById("grade").value="Grade : F";
}
else if (m < 70) {
document.getElementById("grade").value="Grade : D";
}
else if (m<=80)
{
31
document.getElementById("grade").value="Grade : C";
} else if (m<=90) {
document.getElementById("grade").value="Grade : B";
} else if (m<=100) {
document.getElementById("grade").value="Grade : A";
}
document.getElementById("percentage").value=m+"%";
}
</script>
</body>
</html>
32
OUTPUT:
33
RESULT:
Thus the above program to create the CGPA calculator in web browser is successfully created and
displayed.
34
EX.NO:5
b.)CREATE A QUIZ PROGRAM USING JAVASCRIPT
DATE:
AIM:
To create a quiz program with adaptive questions using javascript.
PROCEDURE:
1.Start the program with the format<!doctype>and<html>tag.

2.Use <script> to give scripting in the form.
3.Add <head>before the script tag.and </script>tag is end.
4.<body>tag which contain the content of the document.
5.Then end the </script></body>tag.
6.Atlast end with the </html>tag.
35
CODINGS:
<!Doctype html>
<html lang="en">
<head>
<title>Quiz</title>
<style>
.quiz_form
{
width:100%;
}
.quiz
{
margin: auto;
background-color:bisque;
width: 40%;
padding: 20px 0px;
}
li
{
color:blue;
}
h2
{
text-align: center;
text-decoration: underline;
}
.check
{
text-align: center;
}
a
{
background: blue;
color: #fff;
padding: 10px;
36
font-weight: bold;
border:2px solid transparent;
border-radius: 6px;
}
a:hover
{
color:blue;
background: #fff;
border:2px solid blue;
}
</style>
</head>
<body>
<section class="quiz_form">
<div class="quiz">
<h2>QUIZ</h2>
<ol>
<form action="" method="get" enctype="multipart/form-data">
<li><p>What does HTML stand for?
</p></li>
<input type="radio" id="radio" name="quiz11" />Hyper Text Markup Language<br>
<input type="radio" id="radio2" name="quiz11" /><span>Home Tool Markup
Language</span><br>
<input type="radio" id="radio3" name="quiz11" />Hyperlinks and Text Markup Language
<li><p>Who is making the Web standards?
</p></li>
<input type="radio" id="radio4" name="quiz2" />Microsoft<br>
<input type="radio" id="radio5" name="quiz2" />The World Wide Web Consortium<br>
<input type="radio" id="radio6" name="quiz2" />Google
<li><p>What is the correct HTML element for inserting a line break?</p></li>
<input type="radio" id="radio7" name="quiz3" />br<br>
<input type="radio" id="radio8" name="quiz3" />lb<br>
<input type="radio" id="radio9" name="quiz3" />break
<li><p> What is the correct HTML for adding a background color?</p></li>
<input type="radio" id="radio10" name="quiz4" />body bg="yellow"<br>
<input type="radio" id="radio11" name="quiz4" />body style="background-color:yellow;"<br>
37
<input type="radio" id="radio12" name="quiz4" />background-yellow-background
<li><p>Choose the correct HTML element to define important text</p></li>
<input type="radio" id="radio13" name="quiz5" />b<br>
<input type="radio" id="radio14" name="quiz5" />i<br>
<input type="radio" id="radio15" name="quiz5" />Strong<br>
</form>
</ol>
<div class="check">
<a href="javascript:void(0)" onclick="quiz()">CHECK IT</a>
</div>
</div>
</section>
<script>
function quiz(){
// alert("me");
var a=document.getElementById("radio").checked;
var b=document.getElementById("radio2").checked;
var c=document.getElementById("radio3").checked;
var d=document.getElementById("radio4").checked;
var e=document.getElementById("radio5").checked;
var f=document.getElementById("radio6").checked;
var g=document.getElementById("radio7").checked;
var h=document.getElementById("radio8").checked;
var i=document.getElementById("radio9").checked;
var j=document.getElementById("radio10").checked;
var k=document.getElementById("radio11").checked;
var l=document.getElementById("radio12").checked;
var m=document.getElementById("radio13").checked;
var n=document.getElementById("radio13").checked;
var o=document.getElementById("radio13").checked;
if(a == true)
{
document.write("Hyper Text Markup Language : <b>True</b><br>")
}
else if(b == true)
{
document.write("Home Tool Markup Language : <b>False</b><br>");
38
}
else
{
document.write("Hyperlinks and Text Markup Language : <b>False</b><br>");
}
if(d == true)
{
document.writeln("Microsoft : <b>False</b><br>")
}
else if(e == true)
{
document.writeln("The World Wide Web Consortium : <b>True</b><br>");
}
else
{
document.writeln("Google : <b>False</b><br>");
}
if(g == true)
{
document.writeln("br : <b>True</b><br>")
}
else if(h == true)
{
document.writeln("lb : <b>False</b><br>");
}
else
{
document.writeln("break : <b>False</b><br>");
}
if(j == true)
{
document.writeln("body bg='yellow' : <b>False</b><br>")
}
else if(k == true)
{
document.writeln("body style='background-color:yellow;': <b>True</b><br>");
39
}
else
{
document.writeln("background-yellow-background : <b>False</b><br>");
}
if(m == true)
{
document.writeln("b : <b>True</b><br>")
}
else if(n == true)
{
document.writeln("i : <b>False</b><br>");
}
else
{
document.writeln("Strong : <b>True</b><br>");
}
}
</script>
</body>
</html>
40
OUPTUT:
41
RESULT:
Thus the above program quiz with adaptive question using javascript is successfully displayed.
42
EX.NO:6 CREATE A PAN CARD VALIDATION FROM USING OBJECT
DATE: ORIENTED JAVASCRIPT
AIM:
To create a pan card validation using object oriented javascript.Get user name,pan number last digit to
be alphabet and validate the pan number.
PROCEDURE:
1.Start the program with the format<!doctype>and <html>tag.

2.Add <title>tag to give title to the document.
3.<style>tag is used to add css in the document.
4.End the Style and head tag.
5.Add<body>tag to give the pan card number and validate the number.
6.<form>tag used to put the information in the form
7.Again use <script> tag to validate the pan number.
8.End </body> and</html>tag.
43
CODINGS:
<!Doctype html>
<html>
<head>
<title>Pan validation</title>
<style>
.head_content img
{
float: left;
width: 7%;
padding: 0px 26px;
border-radius: 50%;
}
h1
{
text-align: center;
}
.sec_content
{
width: 100%;
background-color: cornsilk;
}
.sec_part
{
margin: auto;
width:30%;
}
.form_element
{
padding:20px 0px;
}
input
{
padding: 7px;
float: right;
width: 50%;
44
border-radius: 3px;
}
label
{
font-size: 22px;
}
.head_content
{
background: blue;
padding: 30px 0px;
color:#fff;
}
.submission
{
padding: 50px 0px;
text-align: center;
}
.submission a
{
border: 2px solid;
padding: 15px 50px;
font-size: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<header class="head_content">
<img src="pan.jpg" alt="PAN_CARD" />
<h1>PAN card Validation</h1>
</header>
<section class="sec_content">
<div class="sec_part">
<form action="" name="form1">
<div class="form_element">
45
<label>First Name: *</label><input type="text" name="first_name" placeholder="First Name"
id="fn" />
</div>
<label>Last Name: *</label><input type="text" name="last_name" placeholder="Last Name"
id="ln" />
</div>
<label>Phone no: *</label><input type="text" name="phone" placeholder="Phone Number"
id="phone" />
</div>
<label>Email: *</label><input type="email" name="email" placeholder="Email ID" id="email"
/>
</div>
<label>Pincode: </label><input type="text" name="pin" placeholder="Pincode" id="pin" />
</div>
<label>Pan Number: *</label><input type="text" name="number" placeholder="Pan Number"
id="text1" /><br>
Enter the pan number(End with alphabet)*
</div>
<div class="submission">
<a href="javascript:void(0);" onclick="validate()">Submit</a>
</div>
</form>
</div>
</section>
<script>
function validate()
{
text1=document.getElementById("text1").value;
fn=document.getElementById("fn").value;
ln=document.getElementById("ln").value;
phone=document.getElementById("phone").value;
email=document.getElementById("email").value;
46
pin=document.getElementById("pin").value;
if(fn=="" && ln=="" && phone=="" && email=="" && text1=="")
{
alert("Enter Field information");
}
else{
str=text1.charAt(text1.length-1);
letters = /^[A-Za-z]+$/;
var com=str.match(letters);
if(com != null)
{
alert("pan condition true");
}
else{
alert("pan condition false");
}
}
}
</script>
</body>
</html>
47
OUTPUT:
48
RESULT:
Thus the above program of validating the pan card number is successfully displayed.
49
EX.NO : 7 a.)CREATE AN ONLINE EVENT REGISTRATION FORM
DATE : USING JQUERY
AIM:
To create a Online Event Registration form using Jquery.
PROCEDURE:
1.Start the program with the format<!doctype> and <html>tag.

2.Open the <head> tag.
3.Add <title>tag to name the title of the document.
4.<script src="bootstrap.js"></script>
<script src="jquery-3.3.1.js"></script>
<script src="jquery.validate.min.js"></script>
5.<form>tag is used in the document.Inside the form tag <label> to get what we want.And the <input
type =“ ”>to give details.
6.Then the form is ended.
7.<script> tag used to check the email is valid.
8.End the </script>after the validation.And end the</body>tag too.
9.Atlast end the document with</html> tag.
50
CODINGS:
<!Doctype html>
<html>
<head>
<title>Online Event Registration</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<script src="bootstrap.js"></script>
<style>
.form_model
{
margin: auto;
width: 30%;
transform: rotate(-17deg);
border: 4px solid #4f77b7;
padding: 20px;
font-size: 20px;
}
h1
{
background: #4f77b7;
padding: 38px;
color:#fff;
}
.model
{
padding: 20px;
position:relative;
}
.model i
{
position: absolute;
right: 29px;
51
top: 26px;
}
.t1
{
float: right;
padding: 7px 30px;
}
.submit
{
margin: 10px;
text-align: center;
}
.submit input
{
color:#fff;
border-radius: 4px;
padding: 10px 20px;;
border: 2px solid green;
background: green;
}
/*
.form-control-feedback
{
display: none;
}
*/
.fa-check
{
color:#2b8428;
}
.fa-times
{
color:#ea4335;
}
</style>
52
</head>
<body>
<header>
<h1 style="text-align: center">ZEAM EVENTS</h1>
</header>
<section>
<div class="form_model">
<h3 style="text-align: center;">Sign up</h3>
<p>Already have an account?<span><a href="">Log in.</a></span></p>
<form action="javascript:void(0);" class="form_val">
<div class="model">
<label>Email address</label><input type="email" id="text" name="text" class="t1" />
<i class="fa fa-times form-control-feedback"></i>
</div>
<div class="model">
<label>Password</label><input type="password" id="password" name="password" class="t1" /><i
class="fa fa-times form-control-feedback"></i>
</div>
<div class="model">
<label>Phone Number</label><input type="text" id="phone" name="phone" class="t1" />
</div>
<div class="submit" style='text-align: center;'>
<input type="submit" value="Register" class="form-control" />
</div>
<p>By signing up, I agree to Eventbrite's terms of service, privacy policy, and community
guidelines.</p>
</form>
</div>
</section>
<script>
js=$.noConflict();
js(document).ready(function() {
js('.form_val').validate({
rules: {
email: {
required: true,
email: true
53
},
},
highlight: function(element, errorClass, validClass) {

js(element).nextAll('.form-control-feedback').show().removeClass('fa-check').addClass('fa-times');
js(element).addClass(errorClass).removeClass(validClass);
js(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
success: function(element) {
js(element).nextAll('.form-control-feedback').show().removeClass('fa-times').addClass('fa-check');
element.closest('.form-group').removeClass('has-error').addClass('has-success');
js(element).remove();
}
});
});
</script>
</body>
</html>
54
OUTPUT:
55
RESULT:
Thus the above program Online event registration is done successfully.
56
EX.NO:7 b.)CREATE A ONLINE VIDEO PLAYER AND CREATE
DATE: CUSTOM PLAYLIST USING JQUERY
AIM:
To create a program online video player which will allow you to play videos from your system.And also
create a custom playlist using JQuery.
PROCEDURE:
1.Start the document with the format <!doctype> and <html>tag.

2.Open the <head> and <title> tag.
3.<head>tag used to giving heading inside the program to be highlight.After this tag add <section>tag.
4. <script src="jquery-3.3.1.js"></script>
<script src="jquery.jplayer.js"></script>
And this used to play online videos using jquery.
5.<head> tag is created to give heading as “video playlist”.
6.<video src=”path of the video available” control styles=width:” ”</video> to add the video in the
program.
7.Close the </section></body>tag.
8.Atlast end the document with</html> tag.
57
CODINGS:
<!Doctype html>
<html>
<head>
<title>Video Playlist</title>
<script src="jquery.jplayer.js"></script>
<style>
h1
{
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Video Playlist</h1>
</header>
<section>
<div style="float: left;">
<video src="video/Kannama%20kannama%20-
%20Rekka%20original%201080p%20HD%20full%20video%20song.mp4" controls style="width:
137%"></video>
</div><div>
<div style="float: right">
<h3>Related Videos</h3><div>
<video src="video/Dhanush%20Anushya-Thendral%20Vanthu%20Theendum%20Pothu-
Video.mp4" controls></video>
</div>
<div>
</div>
<div>
58
</div>
<div>
</div>
<div>
</div>
</div>
</div>
</section>
</body>
</html>
59
OUTPUT:
60
RESULT:
Thus the above program to create online video player and custom playlist using jquery is successfully
created and displayed.
61
EX.NO:8 CONSTRUCT A JSON FOR A BOOKSTORE AND VALIDATE
DATE: IT USING JQUERY
AIM:
To create a JSON for a bookstore and validate it using JSON validator such as http://jsonlint.com \and
parse the json file to list the in the category “fiction” using javascript.
PROCEDURE:
1.Start the document with the format<!doctype> and <html> tag.

2.<head> tag is used to give heading.And css is included by the<style>tag.
3.End </style> and </head>tag.
4.Open the <header> tag to give the heading JSON Validation and end it.
5.<form> tag is to give input to by using the <input type= “” />
And <section>tag is opened and ended</section>in the form tag itself.
6.<script> tag used to find the number of books is placed in which rack and end the</script>tag.
7.End the </body> and </html>tag.
62
CODINGS:
<!Doctype html>
<html>
<head>
<title>BookStore Validation</title>
<style>
h1
{
text-align: center;
}
div
{
border: 2px solid #000;
padding: 10px;
margin: auto;
width:35%;
}
h3
{
margin-top: 40%;
border: 2px solid #000;
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1>JSON Validation</h1>
</header>
<section>
<div>
<pre>
'[
{ "department":"Social", "place":"Rack1","books":"20" },
63
{ "department":"History", "place":"Rack2","books":"25" },
{ "department":"Tamil", "place":"Rack3","books":"15" },
{"department":"English", "place":"Rack4", "books":"30"},
{"department":"Maths","place":"Rack5", "books":"20"},
{"department":"Education", "place":"Rack6", "books":"20"},
{"department":"Media","place":"Rack7", "books":"30"},
{"department":"Activity", "place":"Rack8", "books":"20"},
{"department":"Goverment","place":"Rack9", "books":"18"},
{"department":"Internation", "place":"Rack10", "books":"22"}
]';
</pre>
<form>
<label>Enter Department: </label><input type="text" id="get" name="book" />
<a href="javascript:void(0)" onclick="js()">Get Rack</a>
</form>
<p id="result"></p>
<h3>Validation Copy the JSON Code and <span><a href="https://jsonlint.com/">Click
here</a></span></h3>
</div>
</section>
<script>
function js()
{
var JSONString =
'[{"department":"Social","place":"Rack1"},{"department":"History","place":"Rack2"},{"department":"Math
s","place":"Rack3"}]';
var JSONObject = JSON.parse(JSONString);
console.log(JSONObject);
var par=document.getElementById("get").value;
if(par == "social")
{
alert(JSONObject[0]["place"]);
}
else if(par == "history")
{
64
}
else if(par == "maths")
{
}
}
</script>
</body>
</html>
65
OUTPUT:
66
RESULT:
Thus the above program constructing JSON books store and validate it by using jquery is successfully
done.
67
EX.NO:9 CREATING A SINGLE PAGE APPLICATION TO SEARCH FOR
DATE: A MOVIE TRAILER AND POSTERS FOR VARIOUS MOVIES
AIM:
To create a single web page application to search for a movie trailer and display it and posters for
various movie.
PROCEDURE:
1.Start the program with the format<!doctype>and<html>tag.

2.Open the <head> tag and<title>tag to give title to the document.
3.Use the link <link rel=” ” href=” ”>tag.
4.Add the script tag to invoke
<script src="bootstrap.js"></script>
5.Add <style> to include padding,margin,background,then close the Style and head tag.
6.Open the <body> tag and<section> tag.
7.Include <div> and <form> inside the section tag.
8.end the </div >,</form>, </section> tag.
9.Again <script> is used to check the information given after the validation end it.
10. End it with </body> and </html> tag.
11.Reuse of <html> tag to list the movie playlist.
12.Same procedure is done to make the movie playlist by using the div tag in this.
13.End it with </html> tag.
68
CODINGS:
<!Doctype html>
<html>
<head>
<title>Movie Login</title>
<style>
.form_model
{
margin: auto;
width: 30%;
/*transform: rotate(-17deg);*/
border: 4px solid #4f77b7;
padding: 20px;
font-size: 20px;
}
h1
{
background: #4f77b7;
padding: 38px;
color:#fff;
}
.model
{
padding: 20px;
position:relative;
}
.model i
{
position: absolute;
right: 29px;
top: 26px;
}
.t1
{
float: right;
padding: 7px 30px;
69
}
.submit
{
margin: 10px;
text-align: center;
}
.submit input
{
color:#fff;
border-radius: 4px;
border: 2px solid green;
background: green;
}
.fa-check
{
color:#2b8428;
}
.fa-times
{
color:#ea4335;
}
</style>
</head>
<body>
<section class="login">
<div class="form_model">
<h3 style="text-align: center;">Login</h3>
<form action="javascript:void(0);" class="form_val">
<div class="model">
<label>Email address</label><input type="email" id="text" name="text" class="t1" />
<i class="fa fa-times form-control-feedback"></i>
</div>
<div class="model">
<label>Password</label><input type="password" id="password" name="password" class="t1" /><i
class="fa fa-times form-control-feedback"></i>
70
</div>
<div class="submit" style='text-align: center;'>
<a href="movie.html" class="form-control">Register</a>
</div>
</form>
</div>
</section>
</body>
</html>
71
<!Doctype html>
<html>
<head>
<title>Movie List</title>
<style>
h1
{
background: blue;
padding: 30px;
color: #fff;
}
form
{
float: right;
padding: 0px 70px;
}
input
{
padding: 7px;
width: 100%;
}
</style>
</head>
<body>
<header>
<div>
<h1 style="text-align: center;">Movies List</h1>
</div>
</header>
<section>
<form action="javascript:void(0)">
<label style="font-size: 25px;">Search </label><input type="search"
href="https://www.google.com/" />
</form>
<div style="float: left;">
72
<video src="video/Kaattukuyilu_HDRip_-_Thalapathi_HD-1.mp4" controls></video>
<form>
<input type="file" value="upload"/>
</form>
</div>

</section>
</body></html>
73
OUTPUT:
74
RESULT:
Thus the above program to construct a single web page applicaton to display movie trailer and poster
for various trailers has been successfully done.
75
EX.NO:10 USING PHP AND MYSQL DEVELOP PROGRAM TO ACCEPT
DATE: BOOK INFORMATION
AIM:
Using PHP and MySql to develop a program to accept the book information accession
number,title,author abd web pages to store the information in the database.Search and result the specific
with the proper headings.
PROCEDURE:
1.Start with tag<?php> .

2.Create a connection by giving
$conn = new mysqli($servername, $username, $password);
3.To check the connection:
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
4.echo “ ”;(display what the content in it)

5. $conn->close(); closing the connection.
6.End with the end of php ?>
Create table:
1.Again start with<?php>tag.
2.Creating table in php
$table="CREATE TABLE books(id INT(6) unsigned AUTO_INCREMENT primary key,Title
varchar(255),Author varchar(255),Edition varchar(255),Publish varchar(255))";
3.Inserting in the table
$t=$_POST["book_name"];
$a=$_POST["author"];
$e=$_POST["edition"];
$p=$_POST["publish"];
$sql = "INSERT INTO books(Title,Author,Edition,Publish)
VALUES('$t','$a','$e','$p')";
4.Close the connection n php.
5.To make connection in mysql using fetch:
76
$conn=mysqli_connect($servername,$username,$password,$db);
$fetch=$_POST["fetch"];
6.End the mysql connection:
mysqli_close($conn);
?>
7.Now Start with <html>tag.Open head and body tag into it.
8.<form><section><body> were also include in that to put information in that.
9.End with </html>tag.
77
CODINGS:
Create Database.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
// Create connection
$conn = new mysqli($servername, $username, $password);
// Check connection
}
// Create database
$sql = "CREATE DATABASE bookstore";
if ($conn->query($sql) === TRUE) {
echo "Database created successfully";
} else {
echo "Error creating database: " . $conn->error;
}
$conn->close();
?>
CreateTable.php
<?php
$servername="localhost";
$username="root";
$password="";
$db="bookstore";
$conn=new mysqli($servername,$username,$password,$db);
if($conn->connect_error)
{
die("not connected".$conn->connect_error);
78
}
else
{
echo "connected successfully"."<br />";
}
$table="CREATE TABLE books(id INT(6) unsigned AUTO_INCREMENT primary key,Title
varchar(255),Author varchar(255),Edition varchar(255),Publish varchar(255))";
if($conn->query($table) === TRUE)
{
echo "created";
}
else
{
echo $conn->error;
}
$conn->close();
?>
Insertbooks.php
<?php
$servername="localhost";
$username="root";
$password = "";
$dbname = "bookstore";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
}
$t=$_POST["book_name"];
$a=$_POST["author"];
$e=$_POST["edition"];
$p=$_POST["publish"];
$sql = "INSERT INTO books(Title,Author,Edition,Publish)
VALUES('$t','$a','$e','$p')";
79
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
Fetch.php
<?php
$servername="127.0.0.1";
$username="root";
$password="";
$db="bookstore";
$conn=mysqli_connect($servername,$username,$password,$db);
$fetch=$_POST["fetch"];
$selectcontent="SELECT * FROM books where title='$fetch'";
$find=mysqli_query($conn,$selectcontent);
echo "<style>table tr td{border:1px solid #000;}</style>";
echo "<table>";
if(mysqli_num_rows($find) >0)
{
while($row=mysqli_fetch_assoc($find))
{
echo
"<tr><td>"."id".$row["id"]."</td><td>"."Title".$row["Title"]."</td><td>"."Author".$row["Author"]."</td>
<td>"."Edition".$row["Edition"]."</td><td>"."Publish".$row["publish"]"</td></tr>";
}
}
else
{
echo "not found";
}
mysqli_close($conn);
?>
80
Fetch.html
<!Doctype html>
<html>
<head><title>Books</title></head>
<body>
<section>
<h2>Book Search</h2>
<form action="fetch.php" method="post" enctype="multipart/form-data">
<input type="text" name="fetch" id="fetch" />
<input type="submit" value="Search" />
</form>
</section>
</body>
</html>
81
OUTPUT:
82
RESULT:
Thus the above program is created and displayed successfully.
83
EX.NO:11 DEVELOP SOCIAL MEDIA WEB PAGE USING
DATE: HTML5,CSS3,PHP,AJAX,JQUERY
AIM:
To create and develop a social media web page usng different language html5,css3,php,ajax and jquery,
PROCEDURE:
1.Start the program with the format<!doctype> and <html>

2.Add the <head>tag and<title>-------</title>tag.
3.<script src="jquery-3.3.1.js"></script>invoke scripting.
4.<style> implement to give padding, margin,etc in the document.
5.End the style and head tag.
6.Add <header> and heading given end tha tag.
7.Open the <section> tag include number of <img src=” ”>.
8.Use <label>-----</label>input type=” ”name=” ”>in it.end the </section>
9.Open <script>and <script>nefore the head tag ends.
10.End with the </html>tag.
84
CODINGS:
<!Doctype html>
<html>
<head>
<title>Insprit</title>
<style>
h1
{
text-align: center;
color:#fff;
}
body
{
margin: 0;
}
header
{
background: Blue;
padding: 30px;
}
.side_bar
{
width: 20%;
float: left;
padding:0 0 17% 0;
border:5px solid #000;
}
.owl_content
{
background-color: aquamarine;
width: 79%;
padding: 0;
border:1px solid #000;
float: right;
85
}
.chat
{
width: 50px;
border-radius: 50%;
}
.social
{
margin: auto;
width: 80%;
}
.social img
{
width: 50%;
}
input
{
display: block;
margin: 20px;
}
.display
{
display: none;
width: 20%;
display: block;
float: right;
}
</style>
</head>
<body>
<header>
<h1>INSPRIT</h1>
</header>
<section>
<div class="side_bar">
<h3 style="text-decoration:underline;">Chats</h3>
86
<p><img src="im.jpg" alt="chat1" class="chat" /><a href="javascript:void(0)">First Chat</a></p>
</div>
<div class="owl_content">
<div>
<div style="float:right">
<p class="toggle" style="float:right;color:blue;font-size:30px;">Images</p>
<img src="im.jpg" alt="im" class="display" />
</div>
</div>
<h3 style="text-align:center;padding:30px 0px;">Insprit Chats</h3>
<div class="social">
<img src="im.jpg" alt="chat" ><div>
<label>Comments</label><input type="text" name="chat"/>
<input type="submit" value="chat" />
</div></div>
<img src="im.jpg" alt="chat" >
<div>
<label>Comments</label><input type="text" name="chat" />
</div></div>
<div>
</div></div>
<div>
</div></div>
</div>
</section>
<script>
js=$.noConflict();
87
js('.toggle').click(function(){
js(".display").toggle();
});
</script>
</body>
</html>
88
OUTPUT:
89
RESULT:
Thus the above program is created and dispayed successfully.
90

Web Program Record PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Program Record PDF

Uploaded by

Copyright:

Available Formats

EX.

1.Start the document with the format <!doctype> and <html>tag.

1.Start the document with the format<!doctype>and <html>tag.

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div style="text-align: center;">

1.Start the document with format <!doctype> and <html>tag.

1.Start the program with the format<!doctype> and <html>tag.

1.Start the program with the format<!doctype>and<html>tag.

1.Start the program with the format<!doctype>and <html>tag.

1.Start the program with the format<!doctype> and <html>tag.

highlight: function(element, errorClass, validClass) {

1.Start the document with the format <!doctype> and <html>tag.

1.Start the document with the format<!doctype> and <html> tag.

1.Start the program with the format<!doctype>and<html>tag.

1.Start with tag<?php> .

4.echo “ ”;(display what the content in it)

1.Start the program with the format<!doctype> and <html>

You might also like