► 1.
Advanced Web Design
► AIM: -EXPT NO 1 : Creation of website using HTML5
Create a website using HTMLS and CSS using any 4 CSS properties. Write a code for 2
separate pages having different file names such as first page as Index. html and second
page as page2.html. Use any theme such as college profile or company profile etc.
Every page must contain proper Meta information and design web page as follows :
1) The index page must contain a heading which is highest among other text on
pages and must be at centre of the page. There must be a paragraph which
introduces general information about the theme chosen must have at least 3
physical style tags and one image with alternate text. This page must be
connected to other two pages with proper navigational links.
2) The 2nd page must contain the feedback or enrolment form related with
theme chosen with features of HTMLS. The form must contain text element and
email address of the company or person. Include the submit button.
APPRATUS:-________________________________
PROCEDURE:-
Coding:
index.html
<!DOCTYPE html>
<html>
<head>
<title> Tata
Group
</title>
<meta charset="utf-8">
<meta name="author" content="Physical Tags">
<style>
hl {border-style:dotted}
p{color:red;font-size:15pt}
body{background-color:pink}
b{text-decoration:overline}
u{text-align:right}
</style>
</head>
<body>
<hl align="center">Tata Sons Private Limited</hl>
P-3 SOP HAND BOOK
<p>
66% of the equity share capital of Tata Sons is held by philanthropic trusts, which
support education, health, livelihood generation, and art and culture. Each Tata
company or enterprise operates independently under the guidance and
supervision of its own Board of Directors.
<Ip>
<b>Govemance Philosophy</b><br><br>
<i>Tata Code of Conduct</ i><br><br>
<u>Tata Business Excellence Model (TBEM)</u><br><br>
<h3>Image of Tata Industries</h3>
<img src="E:\XII SCI IT 2020-21\images\tata.jpg" width="200" height="250"
alt='Tata Industries">
<br><br>
<a href="E:\XII SCI IT 2020-21\SOP Web\SOPl \second.html">Second Page</a>
</body>
</html>
second.html
<!OOCTYPE html>
<html>
<head>
<title>
Forms
</title>
<meta charset="utf-8">
<meta name="author'' content="Form">
<style>
hl {border-style:dashed}
body{background-color:aqua}
</style>
</head>
<body>
<hl align="center">Enrollment Form</hl><fprm >>name="fl">
Enter Your Name
<input type="text" name="tl" required>
<br><br>
Enter your Email ID
<input type="email" name="emailid"><br><br>
<input type="submit" name="submitbtn" value="Submit">
</form>
<a href="E:\XII SCI IT 2020-21 \SOP Web\SOPl \index.html">First Page</a>
</body>
</html>
© PDB-PKVM - Information Technology (97) SOP HAND BOOK
Page 4
► EXPT NO 2 : Create a webpage using HTML and CSS code to design a web page as the
layout displayed below.
The top section will display the heading, 'Tourist places' in header. The section on
the left has list of cities. The right hand side displays tourist places of any one of the
city.
Use Inline style sheet in the top section to display background color for the text
'Tourist places'. Use internal style sheet for the left and right section with
background color and font styles.
Tourist places
City Tourist places in Pune
1. Pune • Shanivarwada
2. Banglore • Kelkar Museum
3. Hyderabad • Sinhgad fort
4. Delhi
Coding:
pagel.html
<!DOCTYPE html>
<html>
<head>
<title>
Tourist Places
</title>
<style>
section{background-color:pink;width:50%;height:50%;float:right)
aside{width:50%;float:left}
ol{font-style:italic;font-size:15pt)
ul{font-weight:bold;font-size:20pt)
</style>
</head>
<body>
<header style="background-color:skyblue;height:lOOpt">
<hl align="center">Tourist Places</hl>
</header>
<br>
<aside>
<h3>City</h3>
<ol>
<li>Pune</li>
<li>Banglore</li>
<Ii>H yberabad< /Ii>
<li>Delhi</li>
</ol>
</aside>
<section>
<h3>Tourist places in Pune</h3>
<upl>
<li>Shanivarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad fort</li>
<li>Aga khan Palace</li>
</ul>
</section>
</body>
</html>
► EXPT NO 3 : Create a website using HTML and CSS code to design
WebPages asfollows:
The first webpage will accept the name of the traveler, date of travel, telephone
number . It also has submit button as an image.
The second webpage has information about the name of transporter, time, seatnoand
destination displayed one below the other in the form of unordered list as
Name of transporter - Air Asia Time - 09:30 am
Seat no - B39 Destination • Delhi
Both pages should be interlinked. Create external stylesheet with relevant tags.
Coding:
pagel.html
<!DOCTYPE html>
<html>
<head>
<title>
Information Form
</title>
<link rel="stylesheet" type="text/ css" href="external.css">
</head>
<body>
<hl align="center">Traveller Infomation form</hl>
<form name="fl">
Enter your name
<input type="text" name="name" auotcomplete><br><br>
Select Date of Travel
<input type="date" name="trvdate"><br><br>
Enter Telephone Number
<input type="tel" name="phone" placeholder="l23-456-
7890"pattem="[0-9]{3}-[0-9] 13} [0-9]{4}" required><br><br>
<input type="submit" name="submit" value="Submit">
</form>
<br><br>
<a href="E:\XII SCI IT 2020-21\SOP Web\SOP3\page2.html''>
<img src="E:\XII SCI IT 2020-21\images\submit.jpg" width="l50"></a>
</body>
</html>
page2.html
<html>
<head>
<title>
Information about Transporter
</title>
<link rel="stylesheet" type="text/ css" href="extemal.css">
</head>
<body>
<hl align="center">Information about Transporter</hl>
<ul>
<li> Name of Transporter· Air Asia</li>
<Ii>Time - 09.30 am</li>
<li>Seat no - B39</li>
<li>Destination - Delhi</li>
</ul>
<a href="E:\XII SCI IT 2020-21 \SOP Web\SOP3\pagel.html">Connect First
Page</a>
</body>
</html>
extemal.css
hl {background-color:green;border-style:double)
body(background-color:lightgreen)
ul(font-farnily:Algerian)
► EXPT NO 4 : Creation of website using HTML5 and CSS.
Create a webpage as given layout use <nav>,<header>,<footer>,<aside>, <article>with
CSS.
Coding:
Semantic.html
<!DOCTYPE html>
<html>
<head>
<style>
header{background-color:pink;width:100%;height:20%}
nav{background-color:skyblue;width:l00¾;height:20%}
aside{background-color:grey;width:40%;float:right)
section{background-color:lightyellow;width:60%;height:10%;float:left)
article{background-color:violet;width: 60%;height:40%}
footer{background-color:blue;width:100%;height:30%)
</style></head>
<body>
<header>
<h3>News</h3>
Local and National News
</header><br>
<nav>
<a href="http:/ /www.home.in">HOME</a>
<a href="http://www.archives.in">ARCHIVES</a>
<a href="http:/ /www.about.in">ABOUT</ a>
<br></nav>
<br><aside>
<h3>Be a News Reporter</h3>
If you see news happening- Send us a text.</aside>
<article> Local News</article>
<section>
<h4>Fire fighters rescue man from building this is local news</h4>
(reporter name,date)<br>
This is the fighter details text. This is the story of fighter<br>
This is the detail of rescue man. This is the story of how he rescued<br>
</section>
<br>
<section>
<h4>New library to be built this is local news 2</h4>
(reporter name,date)<br>
This is the story text. This is the story text.<br>
This is the story text. This is the story text.<br>
</section>
<br>
<article><b> National News</b></ article>
<section>
<h4>Snow strom is making travel difficult</h4>
(reporter name,date)<br>
This is the story of Snow strom. This is the story of distroial of storm<br>
This is the story part continued. This is the story text continued<br>
</section>
<article>
<h4>Thousands are without power</h4>
(reporter name,date)<br>
This is the story of not having power. This is the story text continued <br>
This is the story bad effect. This is the story about dsitroyal of economy<br>
</article>
<br>
<footer>Footer Information</footer>
</body>
</html>
© PDB-PKVM - Information Technology (97) SOP HAND BOOK
Page 10
EXPT NO 5 : Use of Audio on web pages using HTMLS.
Create a webpage named audio.html to set an audio file in web page with controls
such that it uses HTML5 elements. The audio file must play as soon as the webpage
loads in browser and it will start over again, every time when it is completed.
Create another webpage named audiol.html which provides multiple source file
formats for the same audio file that plays a sound automatically with controls. The
browser should display the message with appropriate attribute, when audio file is not
supported by browser. The code must incorporate the list of sound files formats (like
wav, MP3 or ogg etc).
Coding:
audio.html
<!DOCTYPE html>
<html>
<head>
<title>Single Audio with controls</title>
</head>
<body>
<hl align="center">Audio with controls</hl>
<audiocontrols autoplay loop="-1">
<source src="C:\ Users\Public\Music\Sample Music\Kalimba.mp3"
type="audio/mpeg">
</audio>
</body>
</html>
Output:
Audiol.html
<!DOCTYPE html>
<html>
<head>
<title>
Multiple Audio Files with controls</title>
</head>
<body>
<hl align="center">Multiple Audio Files with controls</hl>
<h2>
The text between the audio tags will only be displayed in browsers that do not
support the audio element.</h2>
<h3>List of sound files formats</h3>
<ol>
<li>mp3 - audio/rnpeg</li>
<li>ogg- audio/ogg</li>
<li>wav - audio/wav</li>
</ol>
<audio controls autoplay>
<source src="E:\XII SCI IT 2020-21 \sound\test.wav" type="audio/wav">
<source src="E: \XII SCI IT 2020-21 \sound\ test.mp3" type="audio/ mp3">
<source src="E:\XII SCI IT 2020-21 \sound\test.ogg" type="audio / ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>
© PDB-PKVM - Information Technology (97) SOP HAND BOOK
Page 12
EXPT NO 6: Use of video on web pages using htmL5.
Create a webpage named video.HTML to display a video file on web page and
plays automatically with controls. The dimension of video area should be 150
* 150 pixels. Create another webpage which provide multiple source file formats
for the same video file that plays a video automatically with controls. The dimension
of video area should be 100*100 pixels. The browser should display the message
with appropriate attribute when video file is not supported by browser. The code
must incorporate the list of video files formats (like webM, MP4 or ogg etc).
Coding:
Video.html
<!DOCTYPE html>
<html>
<head>
<title>
Single Video File on Web Page with controls
</title>
</head>
<body>
<hl align="center">Single Video File on Web Page with controls</,hl>
<video src="C: \ Users\Public\ Videos\Sample Videos \shuttle.mp4" controls
width="150" height="150" loop="-1" autoplay>
</video>
</body>
</html>
videol.htrnl
<!DOCTYPE html>
<html>
<head>
<title>
Multiple Video File on Web Page with controls
.</title>
</head>
<body>
<hl align="center">
Multiple Video File on Web Page with controls
</hl>
<h2>
The text between the video tags will only be displayed in browsers that do notsupport
the video element.</h2>
<h3>List of video files formats</h3>
<ol>
<li>mp3 -video/mpeg</li>
<li>ogg-video/ogg</li>
<li>WebM- vfideo/webM</li>
</ol>
<video controls width="lO0" height="l00" autoplay>
<source src="E:\XII SCI IT 2020-21 \video\movie.mp4" type="video/mp4">
<source src=''E: \XII SCI IT 2020-21 \ video\movie.webm" type="video/webm">
<source src="E:\XII SCI IT 2020-21 \ video\movie.egg" type="video/ ogg">
</video>
</body>
</html>
► Javascript
► EXPT NO 7 : Create a web page in HTML having a white background and two
Button Objects. Write code using JavaScript such that when the mouse is placed
over the first button object without dicking, the color of the background of the
page should change after every seconds. There should at least be 7 different
and visibly distinct background colors excluding the default color. When the
second button object is clicked, appropriate message should be displayed in
Browsers status bar.
Create another web page using JavaScript where the background color changes
automatically after every seconds. This event must be triggered automatically
after the page gets loaded in the browser. There should at least be 7 different
and visibly distinct background colors. When the page is unloaded, the
appropriate alert message should be displayed.
Coding: color.html
<!DOCTYPE html>
<html>
<head>
<title>
Background Colors
</title>
</head>
<body>
<hl align="center">7 Different & visibly distinct background colors</hl>
<form name="frml">
<center>
<input type="button" name="btncolor" value="Change Colors"
onMouseOver="fl()">
<input type="button" name="btnmsg" value="Message Display" onClick="msg()">
</form>
</body>
<script type="text/javascript">function fl()
document.bgColor="red";
window.setTimeout(''f2()",1500);
function f2()
document.bgCo]or="green";
window.setTimeout("f3()",1500);
function f3()
document.bgColor="pink";
window.setTimeout("f4()",1500);
function f4()
document.bgColor="orange"; window.setTimeout("fS()",1500);
function f5()
document.bgColor='"skyblue"; window.setTimeout("f6()",1500);
function f6()
document.bgColor="voilet"; window.setTimeout("f7()",1500);
function f7()
document.bgColor="aqua"; window.setTimeout("fl()",1500);
function msg()
window.status="Display of 7 different colors";
</script></html>
document.bgColor=''skyblue''; window.setTimeout(''f6()",1500);
function f6()
document.bgColor="voilet"; window.setTimeout("f7()",1500);
function £7()
document.bgColor="aqua"; window.setTimeout("fl()",1500);
function msg()
alert("Display of 7 different colors");
</script>
</html>
► EXPT NO 8 : Create JavaScript program for the following form validations. Make
use ofHTML5 properties to do the following validations :
1) Name, address, contact number and email are required fields of the form.
2) Address field should show the hint value which will disappear when field
gets focus or key press event.
3) Telephone number should be maximum 10 digit number only.
4) Email field should contain valid email address, @ should appear only onceand
not at the beginning or at end. It must contain at least one dot(.).
5) Make use of pattern attribute for email to accept lowercase, uppercase
alphabets, digits and specified symbols.
Coding: email.html
<html><body>
<form name="frml"> Enter Name
<input type="text" name="tl"><br><br> Enter
Address<br><textarea name="t2"
placeholder="PERMENANT
ADDRESS"></textarea><br><br>
Enter Telehpone Number
<input type="tel" maxlength="lO"><br><br> Enter Email
Address
<input type="email" name="t3" pattern="[A-Z a-z]{S)-[@]{1)-[.]{l)"
placeholder="
[email protected]"><br><br>
<input type="button" name="bl" value="Submit" onClick="chk()">
</form></body>
<script type="text/javascript"> function
chk()
var x=frml.t3.value;
var atpos=x.indexOf("@"); var
lastat=x.lastindexOf("@");var
firstdot=x.indexOf(".");
var dotpos =x.lastindexOf(".");
if(atpos<l I I dotpos<atpos+2 I I dotpos+2>=x.length I I firstdot<atpos I I atpos<lastat)
alert("Not a valid email address"');
frml.t3.focus(); else
alert("Email address is accepted");
return true;
</script>
</html>
► EXPT NO 9 : Create event driven JavaScript program for the following. Make
use ofappropriate variables, JavaScript inbuilt string functions and control
structures.
To accept string from user and count number of vowels in the given string.
Coding:
<!DOCTYPE html>
<html>
<head>
<title>
String functions
</title>
</head>
<body>
<form name="frml">
Enter Your Name
<input type="text" name="tl"><br><br>
<input type="button" name="btncheck" value="Count Vowels" onClick="cnt()">
</form>
</body>
<script type="text/javascript">
function cnt()
I
var s,i,ch,c;
c=O;
s=frml.tl.value;
for(i=0;i<=s.length;i++)
I
ch=s.charAt(i);
if(ch=="A" I I ch=="a" I I ch=="E" I I ch=="e" I I ch=="I" I I ch=="i" I I ch=="O"
I I ch=="o" I I ch=="U" I I ch=="u")
c++;
alert("Number of Vowels in string are "+c);
)
</script>
</html>
► EXPT NO10 : Create event driven JavaScript program for the
F ollowing. Make use ofappropriate variables, JavaScript inbuilt
string functions and control structures.
To accept string from user and reverse the given string and check whether
ii ispalindrome or not.
Coding:
palindrome.html
<!DOCTYPE html>
<html>
<head>
<title>
Palindrome
</title>
</head>
<body>
<form name="frml ">
Enter Your Name
<input type="text" name="tl"><br><br>
<input type="button" name="btncheck" value="Check Palindrome"
onClick="chk()">
</form>
</body>
<script type="text/javascript">
function chk()
{
var a,s,i,ch,n;
a=frml.tl.value;
s=a.toLowerCase();
n=s.length;
varp=l;
for(i=O; i<n/2;i++)
if1s.charAt(i)!= s.charAt(n-1-i))
(
p=O;
break;
if(p==l)
alert("String is Palindrome");
else
alert("String is not a Palindrome");
</script>
</html>
EXPT NO11: Create JavaScript program which compute the average marks of students.
Accept six subject marks of student from user. Calculate average marks of student which
is used to determine the corresponding grades.
Range Grade
35 to 60 F
61 to 70 D
71 to 80 C
81 to 90 B
91 to 100 A
Coding:
grade.html
<html>'
<body>-
<form name="frml">
Enter Marks of English
<input type="number" name="tl"><br><br>
Enter Marks of Maths
<input type="number" name="f2"><br><br>
Enter Marks of Physics
<input type="number" name="t3"><br><br>
Enter Marks of Chemistry
<input type="number" name="t4"><br><br>
Enter Marks of IT
<input type="number" name="t5"><br><br>
<input type="button" name="btnclick" value="Print Grade" onClick="grade()">
</form>
</body>
Page 21
<script type="text/javascript">
function grade()
var ml,m2,m3,m4,m5,a;
ml=frml.tl.value;
m2=frml.t2.value;
m3=frml.t3.value;
m4=frml.t4.value;
m5=frml.t5.value;
a=(ml +m2+m3+m4+m5) /5;
alert("Average Marks of Student is "+a);
if(a>=91)
alert("Grade A");
else
if(a>=81)
alert("Grade B");
else
if(a>=71)
alert("Grade C");
else
if(a>=61)
alert("Grade ");
else
alert("Grade F');
</script>
<html>
EXPT NO 12 Write a JavaScript function to get difference between two dates in days.
Create apage in HTML that contains input box to accept date from user. The input
boxes should be used by users to enter their date of birth in the format dd-mm-yyyy.
Do not make use of any dropdown boxes.
Example:
date_diff.:..indays('04/02/2019', '11/04/2019'); date_diff_indays('0l/01/2020',
'31/01/2019');
Output:
66
-30
Coding: date.html
<html>
<head>
<script type="text/javascript"> function
GetDays(i_Datel, i_Date2)
var str=i_Datel;
var day= str.slice(O, 2); var
month= str.slice(3, 5);var
year= str.slice(6, 10);
//this is first date
dtl =new Date(month +"/"+day+"/"+ year); var
strl=i_Date2;
var dayl = strl.slice(O, 2); var
monthl = strl.slice(3, 5);var
yearl = str1.slice(6, 10);
I I this is second date
dt2 =new Date(monthl + "/" + dayl + "/" + yearl);var
one_day=1000*60"60*24;
. var datel_ms = dtl.getTime();var
date2_ms = dt2.getTime();
var difference_ms = date2_ms - datel_ms;
document.writeln(Math.round(difference_ms/one_day)); l
</script>
</head>
<body>
<form name="form_task">
Datel:<input type="text" name="dl" placeholder="dd/mm/yyyy">
<br>
<br>
Date2:<input type="text" name="d2" placeholder="dd/mm/ yyyy">
<br><br>
<input type="button" value="Submit" onclick="GetDays(dl.value,d2.vah,ie)">
</form>
</body></html>
3. Server-Side Scripting (PHP)
► EXPT NO13 : Write a PHP program to check if a person is eligible to vote or
not. Theprogram should include the following-
Minimum age required for vote is 18.Use
PHP functions.
Use Decision making statement.
Coding:
age.html
<html>
<body>
<hl align="center">Person Eligible to vote or not</hl>
<form method="post" action="age.php">
Enter Your age
<input type="text" name="age"><br><br>
<input type="submit" name="submit" value="Check Eligible">
</form> </body>
</html>
age.php
<?php
if(isset($_POST['submit']))
$age= $_POST['age'];
if($age>=18)
echo "<br><br>You are Eligible to vote";
else
echo "<br><br>You are not Eligible to vote";
EXPT NO14 : Write a PHP function to count the total number of vowels (a,e,i,o,u) fromthe
string.Accept a string by using HTML form.
Coding:
vowel.html
<html>
<body>
<hi align="center">String Functions</hl>
<form method="post" action="vowel.php">Enter
Sring
<input type="text" name="str"><br><br>
<input type="subrnit" name="submit" value="Count Vowels">
</form>
</body>
</html>
vowel.php
<?php if(isset($_POST['submit']))
{
$str = strtolower($_POST['str']);
$voweIs =. array( a ,e,1,0, u ;
t I I !1•• ! ! I ')
$!en= strlen($str);
$num=0;
for($i=O; $i<$len; $1++){
if(in_array($str[$i], $vowels))
{
$num++;
echo "Number of vowels :.$num";
► EXPT NO 15 : Write a PHP program to perform the following operations on
anassociative array.
Display elements of an array along with their keys.
Displaythe size of an array.
Delete an element from an array'from the given index.
Coding:
array.php
<?php
$ml=
array(''English"=>"SS",
"Hindi" >"60",
"Maths"=>"70".,
"Marathi"=>"85");
echo "<br><br><b>Elements of an array along with their keys :</b>";
echo "<br> <br> Your score ".$ml['English']."in English";
echo "<br> <br> Your score ".$ml['Hindi']. "in Hindi";
echo "<br> <br> Your score ".$ml['Maths']. "in Maths";
echo "<br> <br> Your score ".$ml['Marathi']. "in Marathi";
echo "<br><br><b>Size of an array is :</b>".count($ml);
array_splice($ml,0,1);
echo "<br><br><b>After deleting array is :</b>";
foreach($ml as $x => $x_value)
echo "<br><br>Key=". $x. ",Value=". $x_value;
echo "<br>";
