Scribd
Upload
28 views

Practical No 1

The document defines HTML tags and their purposes. It contains tables that list common tags used for basic page structure, formatting text, forms and input, images, audio/video, links, lists, tables, styles and semantics, meta info, and programming. The tags are grouped based on their functions and each tag is concisely defined. The document also provides an example of an HTML page code using ordered, unordered, and nested lists.

Uploaded by

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

Practical No 1

The document defines HTML tags and their purposes. It contains tables that list common tags used for basic page structure, formatting text, forms and input, images, audio/video, links, lists, tables, styles and semantics, meta info, and programming. The tags are grouped based on their functions and each tag is concisely defined. The document also provides an example of an HTML page code using ordered, unordered, and nested lists.

Uploaded by

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

WEB DEVELOPMENT ER NO:211240116059

(315606)

Practical No: 1

Aim: Basic tags in HTML

Tag Description
<!DOCTYPE> Defines the document type

<html> Defines an HTML document

<head> Defines information about the document

<title> Defines a title for the document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

<p> Defines a paragraph

<br> Inserts a single line break

<hr> Defines a thematic change in the content

<!--...--> Defines a comment

Page | 1
WEB DEVELOPMENT ER NO:211240116059
(315606)

Formatting
Tag Description
Not supported in HTML5. Use <abbr> instead.
<acronym> Defines an acronym
<abbr> Defines an abbreviation or an acronym
Defines contact information for the author/owner of a
<address> document/article
<b> Defines bold text
Isolates a part of text that might be formatted in a different direction
<bdi> from other text outside it
<bdo> Overrides the current text direction
Not supported in HTML5. Use CSS instead.
<big> Defines big text
<blockquote> Defines a section that is quoted from another source

Not supported in HTML5. Use CSS instead.


<center> Defines centered text
<cite> Defines the title of a work
<code> Defines a piece of computer code
<del> Defines text that has been deleted from a document

<dfn> Represents the defining instance of a term


<em> Defines emphasized text
Not supported in HTML5. Use CSS instead. Defines font,
<font> color, and size for text
<i> Defines a part of text in an alternate voice or mood
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<pre> Defines preformatted text
<progress> Represents the progress of a task
<q> Defines a short quotation

Page | 2
WEB DEVELOPMENT ER NO:211240116059
(315606)

Defines what to show in browsers that do not support ruby annotations


<rp>
Defines an explanation/pronunciation of characters (for East Asian
<rt> typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<small> Defines smaller text
Not supported in HTML5. Use <del> or <s> instead. Defines
<strike> strikethrough text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<template Defines a template
>
<time> Defines a date/time
Not supported in HTML5. Use CSS instead. Defines
<tt> teletype text
<u> Defines text that should be stylistically different from normal text
<var> Defines a variable
<wbr> Defines a possible line-break

Forms and Input

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<button> Defines a clickable button
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form

Page | 3
WEB DEVELOPMENT ER NO:211240116059
(315606)

<legend> Defines a caption for a <fieldset> element


<datalist> Specifies a list of pre-defined options for input controls

<output> Defines the result of a calculation

Tag Description
<frame> Not supported in HTML5.

Defines a window (a frame) in a frameset

<frameset> Not supported in HTML5.

Defines a set of frames

<noframes> Not supported in HTML5.

Frames
Defines an alternate content for users that do not support frames

<iframe> Defines an inline frame

Images
Tag Description
<img> Defines an image
<map> Defines a client-side image-map
<area> Defines an area inside an image-map
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<figcaption Defines a caption for a <figure> element
>
<figure> Specifies self-contained content
<picture> Defines a container for multiple image resources
<svg> Defines a container for SVG graphics

Audio / Video
Tag Description
<audio> Defines sound content

Page | 4
WEB DEVELOPMENT ER NO:211240116059
(315606)

Defines multiple media resources for media elements (<video>, <audio> and
<source <picture>)
>
<track> Defines text tracks for media elements (<video> and <audio>)
<video> Defines a video or movie

Links
Ta Description
g
<a> Defines a hyperlink
Defines the relationship between a document and an external resource (most
<link> used to link to style sheets)
<nav> Defines navigation links

Lists
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dir> Not supported in HTML5. Use <ul> instead.
Defines a directory list
<dl> Defines a description list
<dt> Defines a term/name in a description list
<dd> Defines a description of a term/name in a description list
Tables
Tag Description
<table> Defines a table
<caption> Defines a table caption
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Specifies column properties for each column within a <colgroup> element
<col>
<colgroup Specifies a group of one or more columns in a table for formatting
>

Page | 5
WEB DEVELOPMENT ER NO:211240116059
(315606)

Styles and Semantics


Tag Description
<style> Defines style information for a document
<div> Defines a section in a document
<span> Defines a section in a document
<header> Defines a header for a document or section
<footer> Defines a footer for a document or section
<main> Specifies the main content of a document
<section> Defines a section in a document

<article> Defines an article


<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<summary> Defines a visible heading for a <details> element
<data> Links the given content with a machine-readable translation

Meta Info
Tag Description
<head> Defines information about the document
<meta> Defines metadata about an HTML document
<base> Specifies the base URL/target for all relative URLs in a document
Not supported in HTML5. Use CSS instead.
<basefont> Specifies a default color, size, and font for all text in a document
Programming
Tag Description
<script> Defines a client-side script
Defines an alternate content for users that do not support client-side scripts
<noscript>
<applet> Not supported in HTML5. Use <embed> or <object> instead.
Defines an embedded applet
<embed> Defines a container for an external (non-HTML) application
<object> Defines an embedded object
<param> Defines a parameter for an object

Page | 6
WEB DEVELOPMENT ER NO:211240116059
(315606)

Practical-2

Aim: - Create a web page to demonstrate working of ordered, unordered and


nested list.
<!doctype html>

<html>

<head><title>Practical-2</title></head><body style="background-color:powderblue;">

<p><h3>List Formatting</h3></p>

<p> MY HOBBIES (ordered list)</P>

<ol type="a">

<li>Playing Cricket</li>

<li>Playing volleyball</li>

<li>Playing Pool</li>

<li>Playing Basketball</li>

<li>To Do Creative Art </li>

</ol>

<p> MY FAVOURITE FOOD (unordered list)</P>

<ul type="square">

<li>Pani-Puri</li>

<li>Pizza</li>
<li>Chinese</li>
<li>Maxican</li>
</ul>
<p> TYPES OF TEA/COFFEE (nested list)</P>
<ul>
<li>Coffee</li>
</body>
</html>

Page | 7
WEB DEVELOPMENT ER NO:211240116059
(315606)

Output:-
<ul>

<li>NESCAFE</li>

<li>Cappacini</li>

</ul>

<li>Tea</li>

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

<li>Milk</li>

</ul>

Page | 8
WEB DEVELOPMENT ER NO:211240116059
(315606)

Practical-3

Aim: - Create the below given table:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Practical</title>

<style>

.color1{ background-color: blueviolet;}

.color2{ background-color: brown; }

.color3{ background-color: aqua; }

.color4{ background-color:burlywood; }

</style>

</head>

<body>

<div>

<table border="1" style="text-align: center;">

<tr>

<th colspan="4">Work Contact Points</th>


</tr>

<tr>

<th>Name</th>

Page | 9
WEB DEVELOPMENT ER NO:211240116059
(315606)

<th>Email</th>

<th>Phone</th>

<th>Floor/Block</th>

</tr>

<tr>

<td class="color1">Fred</td>

<td class="color2">[email protected]</td>

<td class="color1">123456</td>

<td class="color3" rowspan="2">1/A</td>

</tr>

<tr>

<td class="color2">Jon</td>

<td class="color1">[email protected]</td>

<td class="color2">123457</td>

</tr>

<tr>

<td class="color1">Bill</td>

<td class="color2">[email protected]</td>

<td class="color1">123489</td>

<td class="color4" rowspan="3">3/C</td>

</tr>

<tr>
<td class="color2">Jane</td>

<td class="color1">[email protected]</td>

<td class="color2">128589</td>

Page | 10
WEB DEVELOPMENT ER NO:211240116059
(315606)

</tr>
<tr>
<td class="color1">Alison</td>

<td class="color2">[email protected]</td>

<td class="color1">123458</td>

</tr>
</table>

</div>

</body>

</html>

Output: -

Page | 11
WEB DEVELOPMENT ER NO:211240116059
(315606)

Practical-4

Aim: Using frames divide the web page as


follows. (Source code)

frame1.html frame2.html
<html> <html>
<body <body style="background-
style="background- color:red;">
color:cyan;"> <h1>here is
<h1>look in the box at the some information</h1>
right for some inforation</h1> </body>
</body> </html>
</html>
frame3.html frame4.html
<html> <html>
<body style="background- <body
color:blue;"> style="background-
<H1>This is header.</H1> color:purple;">
</body> <H1>This is footer.</H1>
</html> </body>
</html>

Main Code:

<html>

<head>

<title>frameset</title>

</head>

<frameset rows="10%,20%,*">

<frame src="frame3.html">

<frameset cols="30%,70%,*">

<frame src="frame1.html">

<frame src="frame2.html">

</frameset>

Page | 12
WEB DEVELOPMENT ER NO:211240116059
(315606)

<frameset s="50%,50%,*">

<frame src="frame4.html">

</frameset>

</html>

Output:

Page | 13
WEB DEVELOPMENT ER NO:211240116059
(315606)

Practical-5

Aim: Create a HTML5 web page which shows the use of Canvas.

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Canvas</title>

</head>

<body>

<canvas id="myCanvas" width="500" height="600" style="border:1px solid


#d3d3d3;">Your browser does not support the HTML canvas tag</canvas>

<script>

var c =

document.getElementById("myCanvas");

varctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(250, 300, 250, 0, 10 * Math.PI);

ctx.stroke();

ctx.font = "70px time new

roman"; ctx.strokeText("Hello

World", 77, 330);

ctx.moveTo(400,100);

ctx.lineTo(100,500);

Page | 14
WEB DEVELOPMENT ER NO:211240116059
(315606)

ctx.moveTo(100,100);

ctx.lineTo(400,500);

ctx.stroke();

</script>

</body>

</html>

Output:

Page | 15
WEB DEVELOPMENT ER NO:211240116059
(315606)

Practical-6
Aim: Create a HTML5 web page which shows the use of Audio & Video.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Audio and Video</title>

</head>

<body align="center">

<h1>GTU University</h1>

<hr>

<h3>Here's the Audio for you</h3>

<audio controls>

<source src="audio1.mp3"

type="audio/mp3"> Your browser does

not support the audio element.

</audio>

<hr>

<h3>Here's the video for you</h3>

<video width="600" height="350" controls>

<source src="video.mp4"

Page | 16
WEB DEVELOPMENT ER NO:211240116059
(315606)

type="video/mp4"> Your browser

does not support the video tag.

</video>

</body>

</html>

Output:

Page | 17
WEB DEVELOPMENT ER NO:211240116059
(315606)

Practical-7
Aim: Create a student registration form using the following tags <form>,
<input>, <textarea>, <button>, <select>, <option>The registration form
must consist of following information:
First Name, Middle Name, Last Name, Gender (use radio button), Address,
Phone No., email id, Hobbies (use checkbox), City, State, Country, College
Name (use dropdown menu)
Code:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Registration Form</title>

</head>

<body>

<h1> Student Registration Form</h1>

<form>

<table>

<tr> <td>First Name :</td>

<td><input type="text" placeholder="Enter Your Name" name=""></td>

</tr>

<tr> <td> Middle Name :</td>

<td><input type="text" placeholder="Enter Your Name" name=""></td>

</tr>

<tr> <td> Last Name :</td>


<td><input type="text" placeholder="Enter Your Name" name=""></td> </tr>

Page | 18
WEB DEVELOPMENT ER NO:211240116059
(315606)

<tr>

<td> Gender :</td>

<td><input type="radio" name="gender"> Male</td>

<td><input type="radio" name="gender"> Female</td>

</tr> <tr>

<td>Address :</td>

<td><textarea name="address" id="address" cols="20" rows="3"></textarea></td>

</tr>

<tr>

<td> Phone No. :</td>

<td><select>

<option>91</option>

<option >92</option>

<option >93</option>

<option>94</option>

<option >95</option>

</select>

<input type="phone" placeholder="99791*****" name=""></td>

</tr> <tr>

<td> Email :</td>

<td><input type="mail" name="Email" placeholder="Enter Mail"></td>

</tr>

<tr>

<td> Hobbies :

</td>

Page | 19
WEB DEVELOPMENT ER NO:211240116059
(315606)

<td><input type="checkbox" name="hobby"> Cricket</td>

<td><input type="checkbox" name="hobby"> Football</td>

<td><input type="checkbox" name="hobby">BasketBall</td>

<td><input type="checkbox" name="hobby"> Hockey</td> </tr>

<tr>

<td> City :</td>

<td><input type="text" name="" placeholder="Enter Your City"></td>

</tr>

<tr> <td> State :</td>

<td><input type="text" name=""placeholder="Enter Your State"></td>

</tr>

<tr> <td>Country :</td>

<td>

<input type="text" name="" placeholder="Enter Your Country">

</td>

</tr>

<tr>

<td>College :

</td>

<td><select name="college" id="">

<option value="SPCE">SPCE</option>

<option value="nirma">Nirma</option>

<option value="SVIT"> SVIT</option>

<option value="LD">LD</option>

</select></td>

Page | 20
WEB DEVELOPMENT ER NO:211240116059
(315606)

</tr>

<tr>

<td><input type="submit" value="submit"></td>

<td><input type="reset" name="" id="" value="reset"></td>

</tr>

</table>

</form>

</body>

</html>

Output:

Page | 21
WEB DEVELOPMENT ER NO:211240116059
(315606)

Practical-8
Aim: - Design a simple form to register for new user including username, password,
email, mobile number, gender, hobbies and address using CSS.

<!DOCTYPE html>

<html>

<style>

input[type=text],

select { width:

50%;

padding: 12px

20px; margin:

8px 0; display:

inline-block;

border: 1px

solid #ccc;

border-radius:

4px;

box-sizing: border-box;

input[type=su
bmit] {
width:
100%;
background-color:
#4CAF50; color:
white;

Page | 22
WEB DEVELOPMENT ER NO:211240116059
(315606)

padding:
14px 20px;
margin: 8px
0; border:
none;
border-
radius: 4px;
cursor:
pointer;
}
input[type=submit]:hove

r { background-color:

#45a049;

div {

border-radius: 5px;

background-color:

#f2f2f2; padding:

20px;

</style>

<body>

<h3>Using CSS to style an HTML Form</h3>

<div>

<form action="/action_page.php">

<label for="fname">User Name</label>

<input type="text" id="fname" name="firstname" placeholder="Your username..">

Page | 23
WEB DEVELOPMENT ER NO:211240116059
(315606)

<p> </p> <label for="email">Email</label>

<input type="text" id="email" name="Email" placeholder="Your email..">

<p> </p>

<label for="mobilenumber">Mobile Number</label>

<input type="text" id="mobilenumber" name="Mobile Number" placeholder="Your


mobile number..">

<p> </p>

<label for="lname">Password</label>

<input type="text" id="lname" name="type your password" placeholder="Your


password..">

<p> </p>

<label for="email">Address</label>

<input type="text" id="email" name="Email" placeholder="Your address..">

<p> </p> <label for="gender">Gender</label>

<p> </p>

<form>

<input type="radio" id="hobbies" name="hobbies" value="Male">

<label for="html">MALE</label><br>

<input type="radio" id="hobbies" name="hobbies" value="CSS">

<label for="css">FEMALE</label><br>

<p> </p>

<label for="hobbies">Hobbies</label>

<p> </p>

<form>

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">

<label for="vehicle1">Reading</label><br>

Page | 24
WEB DEVELOPMENT ER NO:211240116059
(315606)

<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">

<label for="vehicle2">Swimming</label><br>

<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">

<label for="vehicle3">Singing</label>

</form>

<input type="submit" value="Submit">

</form>

</div>

</body>

</html>

Output:

Page | 25
WEB DEVELOPMENT ER NO:211240116059
(315606)

Practical-9
Aim:-Create HTML page to create menu using HTML and CSS.
<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<stye
l>
body
{
marg
in: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow:
hidden;
background-color: #333;
}
.topnav
a{
float:
left;
color:
#f2f2f2
;
text-align:
center;
padding: 14px
16px; text-
decoration:
none; font-
size: 17px;
}
.topnav a:hover {
background-
color: #ddd;
color: black; }

Page | 26
WEB DEVELOPMENT ER NO:211240116059
(315606)

.topnav a.active {

background-color:
#04AA6D; color:
white;
} </style> </head> <body>

<div class="topnav">

<a class="active" href="#home">Dashboard</a>

<a href="#news">News</a>

<a href="#contact">Contact Us!</a>

<a href="#about">More</a>

</div>

</body>

</html>

Output:

Page | 27
WEB DEVELOPMENT ER NO:211240116059
(315606)

Practical – 10

AIM : Write a program to display the calendar using javascript code by getting
the year from the user.

<html>
<head>
<script
language="javascript">
function
day_title(day_name)
{
document.write("<td align=center width=35
bgcolor=lightblue><b>"+day_name+"</b></td>");
}
function fill_table(month,month_len)
{
day=1;
document.write("<table border=1 cellspacing=3 cellpadding=3%>");
document.write("<td colspan=7 align=center bgcolor=red><b>"+month+"
"+year+"</b><tr>"); day_title("Sun");
day_title("Mon");
day_title("Tue");
day_title("Wed");
day_title("Thu");
day_title("Fri");
day_title("Sat");
document.write("</tr>
<tr>"); for(var i=1;
i<start_day;i++)
{
document.write("<td>");

Page | 28
WEB DEVELOPMENT ER NO:211240116059
(315606)

}
for(var i=start_day; i<8;i++)
{
document.write("<td align=center
bgcolor=silver>"+day+"</td>"); day++;
}
document.write("
<tr>");
while(day<=mont
h_len)
{
for(var i=1; i<=7 && day<=month_len;i++)
{
document.write("<td align=center
bgcolor=silver>"+day+"</td>"); day++;
}
document.write("
<tr>");
start_day=i;
}
document.write("</tr></table><br>");
}
year=prompt("enter 4 digit year
",2016); today=new
Date("January 1, "+year);
start_day=today.getDay()+1;
fill_table("January", 31);

if (year%4==0)
fill_table("February
", 29); else

Page | 29
WEB DEVELOPMENT ER NO:211240116059
(315606)

fill_table("February", 28);
fill_table("March", 31);
fill_table("April", 30);
fill_table("May", 31);
fill_table("June", 30);
fill_table("July", 31);
fill_table("August", 31);
fill_table("September", 30);
fill_table("October", 31);
fill_table("November", 30);
fill_table("December", 31);
</script>
</head>
</html>

OUTPUT :

Page | 30
WEB DEVELOPMENT ER NO:211240116059
(315606)

Practical – 11
AIM : Write a program To create a html registration form and to validate the form using
javascript code.
<html>
<script >
function
reset1()
{
x=confirm("It will clear all the text
entered") if(x==true)
{
document.form1.t0.value=""
document.form1.t1.value=""
document.form1.t2.value=""
document.form1.ta.value=""
document.form1.t3.value=""
document.form1.t4.value=""
document.form1.country.value=""
document.form1.r1[0].checked=false
document.form1.r1[1].checked=false
document.form1.c1.checked=false
document.form1.c2.checked=false
document.form1.c3.checked=false
document.form1.c4.checked=false
document.form1.t1.focus()
}
}
function check()
{
var
ee=document.form1.t0.val

Page | 31
WEB DEVELOPMENT ER NO:211240116059
(315606)

ue; var
atpos=ee.indexOf("@");
var dotpos=ee.lastIndexOf(".");
if(atpos<1||dotpos<atpos+2||dotpos+2>=ee.length)
{
alert("please enter a valid
email id")
document.form1.t0.value=""
document.form1.t0.focus()
}
else if((document.form1.t1.value=="")||(!(isNaN(document.form1.t1.value))))
{
alert("please enter the correct
name")
document.form1.t1.value=""
document.form1.t1.focus()
}
else if((document.form1.t2.value=="")||(isNaN(document.form1.t2.value)))
{
alert("please enter the age
correctly")
document.form1.t2.value=""
document.form1.t2.focus()
}
else if((document.form1.t2.value>40)||(document.form1.t2.value<18))
{

alert("Sorry you age is beyound the

limits") document.form1.t2.value=""

document.form1.t2.focus()

Page | 32
WEB DEVELOPMENT ER NO:211240116059
(315606)

else if(document.form1.ta.value=="")

alert("please enter the

address")

document.form1.ta.focus

()

else if((document.form1.r1[0].checked==false)&&(document.form1.r1[1].checked==false))

alert("please select Male or

Female")

document.form1.r1[0].focus()

else if((document.form1.country.value==""))

alert("please select a country")

document.form1.country.focus()

else

if((document.form1.c1.checked==false)&&(document.form1.c2.checked==false)&

& (document.form1.c3.checked==false))

alert("please select the the languages

Page | 33
WEB DEVELOPMENT ER NO:211240116059
(315606)

known") document.form1.c1.focus()

else if(document.form1.t3.value=="")

alert("please enter the

password")

document.form1.t3.focus()

else if(document.form1.t4.value=="")

alert("please Re-Enter the

password")

document.form1.t4.focus()

else if(document.form1.t4.value!=document.form1.t3.value)

alert(" passwrd mismatch please enter the

password") document.form1.t3.focus()

else

if((document.form1.t0.value!="")&&(document.form1.t1.value!="")&&(document.form1.t2.

value

!="

Page | 34
WEB DEVELOPMENT ER NO:211240116059
(315606)

")&&

(document.form1.t3.value!="")&&(document.form1.t4.value!="")&&(document.form1.ta.val

ue!= "")

&&

((document.form1.r1[0].checked!=false)||(document.form1.r1[0].checked!=false))&&((docu

ment. for

m1.c1.checked!

=false)||(document.form1.c2.checked!=false)||(document.form1.c3.checked!=false)||(docume

nt.for m1.

c4.checked!=false)||

(document.form1.c5.checked!=false)))

x=confirm("you have entered the datas correctly,want to submit the

form") if(x)

document.lay.visibility="show"

return false;

</script>

<body bgcolor="lightblue" text="red" style="font-size:15pt;font-family:Garamond"

onload=document.form1.t0.focus()

Page | 35
WEB DEVELOPMENT ER NO:211240116059
(315606)

onsubmit="return check()"><center>

<h2>ENTRY FORM</h2></center>

<form action="server.php" name=form1 method=post >

<table name=tab cellspacing=20pt>

<tr><td align=left><h2>Enter your email id :</h2> </td><td align=right><input type=text

name=t0

size=18>

<tr><td align=left><h2>Enter your Name :</h2> </td><td align=right><input type=text

name=t1 size=18>

<tr><td align=left><h2>Enter your Age :</h2> </td><td align=right><input type=text

name=t2 maxlength=3 size=4>

<tr><td align=left><h2>Enter your Address :</h2> </td><td align=right><textarea

name=ta rows=5

cols=15></textarea>

<tr><td align=left><h2>Sex :</h2> </td><td align=left><input type=radio name=r1

value="female">Female<br>

<input type=radio name=r1 value=male>Male</td>

<tr><td align=left><h2>Nationality :</h2> </td><td align=left><select name="country">

<option selected="" value="">(Please select a country)</option>

<option value="AF">India</option>

<option value="AL">Canada</option>

<option value="DZ">Australia</option>

<option value="AS">Russia</option>

Page | 36
WEB DEVELOPMENT ER NO:211240116059
(315606)

<option value="AD">USA</option>

</select></td>

<tr><td align=left><h2>Languages Known :</h2> </td><td align=left><center>(select more

than one)</center>

<input type=checkbox name=c1 value=c>C<br>

<input type=checkbox name=c2 value=c++>C++<br>

<input type=checkbox name=c3 value=java>JAVA<br>

</td>

<tr><td align=left><h2>Enter your Password :</h2> </td><td align=right><input

type=password name=t3 size=18>

<tr><td align=left><h2>Re-type Password :</h2> </td><td align=right><input type=password

name=t4 size=18>

</table>

<center>

<input type=button value=" reset " onClick=reset1()>

<input type=button value=" check " onClick=check()>

<h3>Before submitting the datas please click the check Button</h3>

<input type="submit" value=" submit "></center>

</form>

</body>

</html>

Page | 37
WEB DEVELOPMENT ER NO:211240116059
(315606)

OUTPUT :

Page | 38
WEB DEVELOPMENT ER NO:211240116059
(315606)

Page | 39
WEB DEVELOPMENT ER NO:211240116059
(315606)

Practical-12
Aim: Implement 2D transformation on Web page.

<html>

<head>
<title>Web programming Practical-10</title>
<style>
div#h1
{
width:

200px;
height:

100px;
background-

color: pink;
border: 1px solid
black;

-ms-transform:
translate(50px,100px);
transform:
translate(50px,100px);
}div#h
2{
width:
200px;
height:
100px;

Page | 40
WEB DEVELOPMENT ER NO:211240116059
(315606)

background-color:
lightblue; border: 1px
solid black;
-ms-transform:
rotate(20deg);

transform:
rotate(20deg);}

div#h3{
width:
200px;

height:
100px;

background-
color: pink;
border: 1px solid
black;
-ms-transform: scale(0.5,0.5);
transform:
scale(0.5,0.5);}
div#h4{
width:
200px;
height:
100px;
background-color:
lightblue; border: 1px

solid black;

Page | 41
WEB DEVELOPMENT ER NO:211240116059
(315606)

-ms-transform:
skew(20deg,10deg);
transform:

skew(20deg,10deg);}
div#h5{

width:
200px;
height:
100px;
background-
color:pink;
border: 1px
solid black;
-ms-transform: matrix(1, -0.2, 0, 1, 0, 0);

transform: matrix(1, -0.2, 0, 1,


0, 0);} p{
font-weight: bold;
} div#h6{
margin:
150px;
width:
200px;
height:
100px;
background-color:
lightblue; border: 1px

solid black;

Page | 42
WEB DEVELOPMENT ER NO:211240116059
(315606)

-ms-transform:
scaleX(2);
transform:
scaleX(2);
}
div#h7{
margin:
150px;

width:
200px;
height:
100px;
background-
color: pink;
border: 1px solid
black;
-ms-transform:
scaleY(0.5);
transform:

scaleY(0.5);

}
div#h8
{

width:
200px;
height:

100px;

Page | 43
WEB DEVELOPMENT ER NO:211240116059
(315606)

background-color:
lightblue; border: 1px
solid black;

-ms-transform:
skewX(20deg);
transform:
skewX(20deg);
}div#h9{ width:
200px; height: 100px;
background-
color: pink;

border: 1px solid


black;

-ms-transform: skewY(-
20deg); transform:
skewY(-20deg);
}</style>
</head><body>
<p>rotate</p>
<br><br>

<div id="h2">Hello</div>
<p>scale</p>
<div id="h3">Web Programming</div>
<p>skew</p>
<div id="h4">Compiler Design</div>

<p>matrix</p>
<div id="h5">Cryptography</div><br><br>

Page | 44
WEB DEVELOPMENT ER NO:211240116059
(315606)

<p>translate</p>

<div id="h1">Programming</div>
<br><br><br><br><br>
<p>scaleX</p>
<div id="h6">Hello</div>
<p>scaleY</p>
<div id="h7">Web programming</div>

<p>skewX</p>
<div id="h8">Compiler Design</div>
<p>skewY</p>
<div id="h9">Cryptography</div>
</body>
</html>

Output:-

Page | 45
WEB DEVELOPMENT ER NO:211240116059
(315606)

Practical-13

Aim : A) Write a JavaScript to find highest from given three values.


<html>

<head>
<script> function largest()
{ var num1, num2, num3;
num1 = Number(document.getElementById("N").value); num2 =
Number(document.getElementById("M").value); num3 =
Number(document.getElementById("O").value); if(num1>num2 &&
num1>num3)
{
document.getElementById('rst').innerText=num1+" is large";

}
else if(num2>num1 && num2>num3)
{
document.getElementById('rst').innerText=num2+" is large";
}
else if(num3>num1 && num3>num1)
{

document.getElementById('rst').innerText=num3+" is large";
}}
</script>
</head>
<body style="background-color:rgb(31, 67, 185); color:white;">

<h1>Calculate highest among three numbers</h1>


<hr color="white">
<br>
Enter 1<sup>st</sup> number: <input type="text"
Page | 46
WEB DEVELOPMENT ER NO:211240116059
(315606)

id="N"></input><br> Enter 2<sup>nd</sup> number: <input


type="text" id="M"></input><br> Enter 3<sup>rd</sup> number:
<input type="text" id="O"></input><br> <br>

<p id="rst"></p>
<hr color="white">
<center><button onclick="largest()">OK</button>

</body>
</html>

Output:-

Aim : B) Write JavaScript to calculate factorial of n.


<html>

<head>

<title> Factorial of a Number </title>

</head>

<body style="background-color:black; color:white;">

Page | 47
WEB DEVELOPMENT ER NO:211240116059
(315606)

<h2> Factorial of a Number using JavaScript </h2>

<h3> Enter the valid number...! </h3>

<input type = "number" min="1" id = "num">

<button type = "button" onclick = "submit()"> Submit </button>

<h3> Factorial: <span id = "answer"> </span> </h3>

<script>// This function will get value from user and pass it to Factorial function
function submit(){

var num = parseInt( document.getElementById("num").value); if( isNaN(num) )

{ alert(" Enter valid number "); return;

}var factorial = calcFact(num); document.getElementById("answer").innerHTML = factorial;

function calcFact( num )

{ var i;

var fact = 1;

for( i = 1; i <= num; i++ )

{ fact = fact * i; }
return fact;
}
</script>
</body>
</html>

Page | 48
WEB DEVELOPMENT ER NO:211240116059
(315606)

Output:-

Aim : C) Write Javascript to check whether given number is palindrome or not.


<html>
<head>
<script>
function Palindrome()
{var rem, temp, final = 0;
var number =
Number(document.getElementById("N").value); temp
= number;
while(number>0)
{rem = number%10;
number =
parseInt(number/10);
final = final*10+rem;
} if(final==temp)
{
window.alert("The input number is Palindrome");
}else
{
window.alert("The input number is not Palindrome");
}

Page | 49
WEB DEVELOPMENT ER NO:211240116059
(315606)

} </script>
</head>
<body style="background-color:turquoise; color:black;">
<br>
<h1>No. is Palindrome or not</h1>
Enter No:<input type="text" name="n" id = "N"/>
<hr color="white">
<br>
<button onClick="Palindrome()">CHECK</button>
</body>
</html>

Output:-

Practical-14

Page | 50
WEB DEVELOPMENT ER NO:211240116059
(315606)

Aim: Create CD Catalogue Table in XML and display it using XSL Style Sheet.

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/xsl" href="cd.xsl"?>

<catalog>

<cd>

<title>Empire Burlesque</title>

<artist> Bob Dylan </artist>

<country> USA </country>

<company> Columbia </company>

<price> 10.90 </price>

<year> 1985 </year> </cd>

<cd>

<title> Hide your heart </title>

<artist> Bonnie Tyler </artist>

<country> UK </country>

<company> CBS Records </company>

<price> 9.90 </price>

<year> 1968 </year></cd>

<cd>

<title> Greatest Hits </title>

<artist> Dolly Parton </artist>

<country> USA </country>

<company> RCA </company>

<price> 9.90 </price>

Page | 51
WEB DEVELOPMENT ER NO:211240116059
(315606)

<year> 1962 </year> </cd

<cd>

<title> Still get the blues </title>

<artist> Gary Moore </artist>

<country> UK </country>

<company> Virgin Records </company>

<price> 10.20 </price>

<year> 1990 </year></cd>

<cd>

<title> Eros </title>

<artist> Eros ramazzotti </artist>

<country> EU </country>

<company> BMG </company>

<price> 9.90 </price>

<year> 1997 </year></cd>

<cd>

<title> One night only </title>

<artist> Bee Gees </artist>

<country> UK </country>

<company> Polydor </company>

<price> 10.90 </price>

<year> 1996 </year></cd>

</cd>

</catalog>

Code of XSL file:

Page | 52
WEB DEVELOPMENT ER NO:211240116059
(315606)

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="Transform">

<xsl:template match="/">

<html> <body>

<h1 style="color: darkmagenta;"><i>CD Catalog</i></h1>

<h3 style="color: darkslateblue;">Printed: June 20,2007</h3>

<table border="1">

<tr style="color: green;">

<th>Title</th>

<th>Artist</th>

<th>Country</th>

<th>Company</th>

<th>Price</th>

<th>Year</th>

</tr> <xsl:for-each select="catalog/cd">

<tr> <td><xsl:value-of select="title" />Empire Burlesque</td>

<td><xsl:value-of select="artist" />Bob Dylan</td>

<td><xsl:value-of select="country" />USA</td>

<td><xsl:value-of select="company" />Columbia</td>

<td><xsl:value-of select="price" />10.90</td>

<td><xsl:value-of select="year" />1985</td>

</tr>

<tr> <td><xsl:value-of select="title" />Hide Your Heart</td>


<td><xsl:value-of select="artist" />Bonnie Tyler</td>

<td><xsl:value-of select="country" />UK</td>

<td><xsl:value-of select="company" />CBS Records</td>

Page | 53
WEB DEVELOPMENT ER NO:211240116059
(315606)

<td><xsl:value-of select="price" />9.90</td>

<td><xsl:value-of select="year" />1968</td>

</tr>

<tr>
<td><xsl:value-of select="title" />Greatest Hits</td>
<td><xsl:value-of select="artist" />Dolly Parton</td>
<td><xsl:value-of select="country" />USA</td>
<td><xsl:value-of select="company" />RCA</td>
<td><xsl:value-of select="price" />9.90</td>
<td><xsl:value-of select="year" />1982</td>
</tr>
<tr> <td><xsl:value-of select="title" />Still got the blues</td>
<td><xsl:value-of select="artist" />Gary Moore</td>
<td><xsl:value-of select="country" />UK</td>
<td><xsl:value-of select="company" />Virgin Records</td>
<td><xsl:value-of select="price" />10.20</td>
<td><xsl:value-of select="year" />1990</td>
</tr>
<tr>
<td><xsl:value-of select="title" />Eros</td>
<td><xsl:value-of select="artist" />Eros ramazzotti</td>
<td><xsl:value-of select="country" />EU</td>
<td><xsl:value-of select="company" />BMG</td>
<td><xsl:value-of select="price" />9.90</td>
<td><xsl:value-of select="year" />1997</td>
</tr>
<tr> <td><xsl:value-of select="title" />One night only</td>
<td><xsl:value-of select="artist" />Bees Gees</td>
<td><xsl:value-of select="country" />UK</td>
<td><xsl:value-of select="company" />Polydor</td>

Page | 54
WEB DEVELOPMENT ER NO:211240116059
(315606)

<td><xsl:value-of select="price" />10.90</td>


<td><xsl:value-of select="year" />1998</td>
</tr>
</xsl:for-each>
</table> </body>
</html> </xsl:template>
</xsl:stylesheet>

Output:-

Practical-15

Page | 55
WEB DEVELOPMENT ER NO:211240116059
(315606)

Aim : Creating the javascript file to handle our Json.


<html>

<head>

<title>P.17 sending data </title>

</head>

<body>

<h2>JSON string from a JavaScript object</h2>

<p id="demo"></p>

<script> var obj= { name: "NIRAV", age: 24,

city:"VADODARA" }; var myJSON= JSON.stringify(obj);

document.getElementById("demo").innerHTML= myJSON;</script>

</body> </html>

Output:-

Code of Receiving data:

<html> <head>

<title> Web programming Practical-17 Receiving data </title>

</head>

<body>

<h2>Create Object from JSON String.</h2>

<p id="demo"></p>

<script> var txt = '{"name":"NIRAV", "age":24, "city":"VADODARA"}'


var obj= JSON.parse(txt);
document.getElementById("demo").innerHTML= obj.name + ", " +
obj.age;
</script>

</body> </html>

Page | 56
WEB DEVELOPMENT ER NO:211240116059
(315606)

Output:-

Code of Storing data:

<html>

<head>

<title> Web programming Practical-17 storing data </title>

</head> <body>

<h2>Store and retrieve data from local storage.</h2>

<p id="demo"></p>

<script> var myObj, myJSON, text, obj;

//Storing data: myObj= { name: "NIRAV", age: 24, city: "VARODARA" }; myJSON=
JSON.stringify(myObj); localStorage.setItem("testJSON", myJSON); //Retrieving data: text =
localStorage.getItem("testJSON"); obj= JSON.parse(text);
document.getElementById("demo").innerHTML= obj.name;

</script> </body> </html>

Output:

Practical – 16

Page | 57
WEB DEVELOPMENT ER NO:211240116059
(315606)

Aim : Write a PHP code to print your personal details.


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head> <body> <form action=""

method="POST"> Name: <input type="text"

name="name"> <br><br> Enrollment no.: <input

type="number" name="enno"><br><br> Dep.: <input

type="text" name="dep"><br><br>

<input type="submit" value="Submit">

</form> </body>

</html> <?php if(isset($_POST['name']) && isset($_POST['enno']) && isset($_POST['dep'])){ echo


$_POST['name']."<br>"; echo $_POST['enno']."<br>"; echo $_POST['dep']."<br>";

} ?>

Output:

Page | 58
WEB DEVELOPMENT ER NO:211240116059
(315606)

Practical-17
Aim : Write a PHP code for database connection with MySQL and also
perform insert and delete.
<?php

$servername="localhost";

$username="root";

$password="";

$conn=mysqli_connect($servername,$username,$password

); if(!$conn){ die("Sorry we failed to connect:".

mysqli_connect_error());

} else { echo "Connection was successful <br>"; }

$sql="CREATE DATABASE dbJay"; $result=mysqli_query($conn,$sql);

if($result){ echo "The db was craeted successfully. <br>"; }

else{ echo "The db was not craeted successfully because of this error---

>".mysqli_error($conn);

} ?>

Output:

Code for Creating Table in Database:

<?php

Page | 59
WEB DEVELOPMENT ER NO:211240116059
(315606)

$servername="localhost";

$username="root";

$password="";

$db="dbJay";

$conn=mysqli_connect($servername,$username,$passwo

rd,$db); if(!$conn){ die("Sorry we failed to connect:".

mysqli_connect_error());

else{ echo "Connection was successful <br>"; }

$sql="CREATE TABLE PERSON(NAME VARCHAR(10),ROLLNO INT(20))";

$result=mysqli_query($conn,$sql);

if($result){ echo "The Table was craeted

successfully. <br>";

} else{ echo "The Table was not craeted successfully because of this error---

>".mysqli_error($conn); }

?>

Output:-

Page | 60
WEB DEVELOPMENT ER NO:211240116059
(315606)

Practical-18
Aim: Write a program to connect to database.
HTML code

<?php

$servername = "localhost";

$username = "root";

$password = "";

$db = "practical";

$conn = new mysqli($servername, $username,

$password, $db); if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

echo "Connected successfully";

?>
Output:

Page | 61
WEB DEVELOPMENT ER NO:211240116059
(315606)

Page | 62

You might also like