Scribd
Upload
116 views

Code For Index - HTML: Experiment No. 1

Uploaded by

neetasangolkar2575
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
116 views

Code For Index - HTML: Experiment No. 1

Uploaded by

neetasangolkar2575
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/ 20

Advanced Web Designing

Experiment No. 1
Title: Creation of website using HTML5

Create a website using HTML5 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
HTML5. The form must contain text element and email address of the company or person. Include the submit
button.

Code for index.html

<!Doctype html>
<html>
<head>
<title>Mahatma Phule Junior College</title>
<meta charset = "utf-8">
<meta name = "description" content="MP college website">
<meta name = "keywords" content= "Mahatma Phule,College website, MP college">
<style>
h1
{
background-color:red;
color:white;
font-family:algerian;
border-radius:25px
}
img
{

border:4px solid darkblue;

border-radius:25px;

</style>

</head>

<body bgcolor = "skyblue">

<h1 align = "center"> Mahatma Phule Junior College, Pune</h1>

<p>This Website contains information about Mahatma Phule junior College, Pune. M.P College is English
Medium Junior College with Science , Arts and Commerce Streams, established on 14th March 2005.It is one of
the best leading colleges in pune. </p>

<big>Today its name known to all for the high standard of teaching.</big><br>

<i>Our Aim is to impart high quality education and values to students.</i><br>

<mark>M.P College affiliated to Maharashtra State Board</mark><br><br>

<center>

<img src = "mp.jpeg" width = "400" height = "250" alt = " MP junior College".><br>

<a href = page2.html>Click to fill feedback/enrolment form</a>

</center>

</body>

</html>

Code for page2.html

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset = "utf-8">
<meta name = "description" content="MP college website">
<style>
table
{
background-color:silver;
border-radius:5px;
}

h1
{
background-color: blue;
color:white;
font-family:comic sans ms;
border-radius: 25px;
}
</style>
</head>
<body bgcolor = " skyblue">
<h1 align = "center">MP Junior College, Pune</h1>
<h2 align = "center"> Feedback Form </h2>
<center>
<form name = "f1">
<table>
<tr>
<td>Enter Your Name</td><td><input type = "text" name = "name" placeholder="your name"</td></tr>
<tr>
<td>Enter Email Id</td><td><input type = "email" name = "Email" placeholder="your email id"</td></tr>
<tr>
<td>Enter Address</td><td><textarea name = "tx" rows = "5" cols="20"></textarea></td></tr>
<tr><th colspan = "2"><input type = "submit", name = "submit" value="submit"></th></tr>

</table>
</form>
<br>
<a href = "index.html">Click here to go to Home Page</a>
</center>
</body>
</html>
Advanced Web Designing
Experiment No. 2
Title: Use of Audio on web pages using HTML5

Create a webpage named audio.html to set an audio file in web page with controls such that it uses
HTMLS 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 audio1.html which provides multiple source file formats for the same
audio filethat 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).

Code for audio.html

<!doctype html>
<html>
<head>
<title>Single Audio file with controls</title>
</head>
<body>
<h1 align = "center"> This is a program which plays an Audio file as soon as it is ready</h1>
<audio src ="india.mp3" controls autoplay loop = "-1">
</audio>
</body>
</html>

Code for audio1.html

<!Doctype html>
<html>
<head>
<title>Multiple Audio Files with Controls</title>
</head>
<body>
<h1 align = "center"> Multiple Audio Files with Controls</h1>
<h2>The text between the audio tags will only be displayed in
browsersthat do not support the audio element.</h2>
<audio controls autoplay>
<source src = "india.mp3" type = "audio/mp3">
<source src = "india.wav" type = "audio/wav">
<source src = "india.ogg" type =
"audio/ogg"> Your browser does not
support the audio element.
</audio>
</body>
</html>
Advanced Web Designing
Experiment No. 3
Title: 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
Videofilethatplaysasoundautomatically withcontrols. Thedimension 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 mustincorporate the list of video files formats (like webM,
MP4 or ogg etc).
Code for video.html
<!Doctype html>
<html>
<head>
<title>Program to play video file on web page with controls</title>
</head>
<body>
<h1 align = "center"> Single Video File on web Page with Controls</h1>
<video src = "nature.mp4" width = "500" height ="500" controls autoplay loop = "-1" >
</video>
</body>
</html>

Code for video1.html

<!Doctype html>
<html>
<head>
<title>Multiple Video File on web page with controls</title>
</head>
<body>
<h1 align = "center"> This page contains a video with dimention 100 by 100 px</h1>
<h2>The text between the video tags will only be displayed in
browsers thatdo not support the video element</h2>
<video width = "100" height = "100" controls autoplay >
<source src = "nature.mp4" type = "video/mp4">
<source src = "nature.ogg" type = "video/ogg">
<source src = "nature.webm" type =
"video/webm"> Your browser does not support
give audio file format.
</video>
<body>
</html>
Advanced Web Designing
Experiment No. 4
Title: Navigation on an image using Client side image Mapping in web page using html 5.

Create a webpage named “imagemap.html” with an inserted image having jpeg, png, or gif extension.
Create 3 different shapes ( like rectangle, circle and polygon ) which do not overlap. Note the co-ordinates
making use of Ms-Paint/GIMP/Irfan View/Pinta. Each shape should be mapped or navigate with a different
URLthat should navigate to a local webpage.
Code for imagemap.html
<!doctype html>
<html>
<head>
<title> Client side image mapping></title>
</head>
<body>
<h1 align = "center">Client side image mapping program</h1>
<img src ="sky.jpg" usemap = "#mymap">
<map name = "mymap">
<area shape = "circle" coords="200,158,22" href ="page1.html " alt =" beach" >
<area shape = "rect" coords="89,105,184,135" href =" page2.html " alt = "Water">
<area shape = "poly" coords="170,12,124,39,141,80,198,80,215,39" href ="page3.html " alt = "sky">
</map>
</body>
</html>

Code for page1.html


<html>
<head>
<title>First Local Page</title>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>

Code for page2.html


<!DOCTYPE html>
<html>
<head>
<title>second local page</title>
</head>
<body>
<h1>Highest level of heading</h1>
</body>
</html>
Code for page3.html

<html>
<head>
<title>third local page</title>
</head>
<body>
<i>This is a text in italic</i>
</body>
</html>
Advanced Web Designing
Experiment No. 5
Title: 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 stylesheet for the left and right section with background color and font styles.

Code for tourist.html


<html>
<head>
<title>
Tourist Places
</title>
<style>
section{background-color:pink;width:50%;height:50%;float:right}
aside{background-color:lightyellow;width:50%;height:50%;float:left}
ol{font-style:italic;font-size:20pt}

ul{font-weight:bold;font-size:20pt}

</style>
</head>

<body>
<header style="background-color:skyblue;height:100pt">
<h1 align="center">Tourist Places </h1>
</header>

<aside>
<h3>city</h3>
<ol>
<li>Pune</li>
<li>Banglore</li>
<li>Hydrabad</li>
<li>Delhi</li>
</ol>
</aside>

<section>
<h3>Tourist Places in Pune</h3>
<ul>
<li>Shanivarvada</li>
<li>Kelkar Museum</li>
<li>Sinhgad Fort </li>
</ul>
</section>
</body>
</html>
Advanced Javascript
Experiment No.6
Title: Create a web page in HTML having a white background and two Button Objects.
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 clicking, 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 automotically 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.

Code for color.html

<!DOCTYPE html>
<html>
<head>
<title>Background Colors</title>
</head>
<body>
<h1 align = "center"> 7 Different & visibly distinct background colors(Page 1/Color.html)</h1>
<form name = "form1">
<center>
<input type = "button" value = " Change Colors" onMouseOver= "f1()">
<input type = "button" value = " Message Display" onClick= "msg()">
</center>
</form>
</body>
<script type = "text/javascript">
function f1()
{
document.bgColor="red";
window.setTimeout("f2()",1500);
}
function f2()
{
document.bgColor="green";
window.setTimeout("f3()",1500);
}
function f3()
{
document.bgColor="pink";
window.setTimeout("f4()",1500);
}
function f4()
{
document.bgColor="orange";
window.setTimeout("f5()",1500);
}
function f5()
{
document.bgColor="skyblue";
window.setTimeout("f6()",1500);
}
function f6()
{
document.bgColor="violet";
window.setTimeout("f7()",1500);
}
function f7()
{
document.bgColor="aqua";
window.setTimeout("f1()",1500);
}
function msg()
{
window.status = " Display of 7 different colors";
}
</script>
</html>

Code for color1.html

<!DOCTYPE html>
<html>
<head>
<title>7 Different & visibly distinct background colors(Page 2/Color2.html)</title>
</head>
<body onLoad = "f1()" onbeforeunload = "return msg()">
<h1 align = "center"> Different background colors</h1>
</body>
<script type = "text/javascript">
function f1()
{
document.bgColor="red";
window.setTimeout("f2()",1500);
}
function f2()
{
document.bgColor="green";
window.setTimeout("f3()",1500);
}
function f3()
{
document.bgColor="pink";
window.setTimeout("f4()",1500);
}
function f4()
{
document.bgColor="orange";
window.setTimeout("f5()",1500);
}
function f5()
{
document.bgColor="skyblue";
window.setTimeout("f6()",1500);
}
function f6()
{
document.bgColor="violet";
window.setTimeout("f7()",1500);
}
function f7()
{
document.bgColor="aqua";
window.setTimeout("f1()",1500);
}
function msg()
{
return " Do you want to close this window?";
}
</script>
</html>
Advanced Javascript
Experiment No. 7
Title: Create event driven JavaScript program (count number of vowels).
Create event driven JavaScript program for the following. Make use of appropriate variables, JavaScript inbuilt
string functions and control structures.

 To accept string from user and count number of vowels in the given string.

Code for countvowel.html

<!Doctype html>
<html>
<head>
<title> String Functions</title>
</head>
<body>
<form name = form1>
Enter name string: <input type = "text" name ="t1"> <br><br>
<input type = "button" value = "Count Vowels" onClick=calc()>
</form>
</body>
<script type = "text/javascript">
function calc()
{
var s, i , ch , cnt ;

/* usage of variables
s = Stores actual string submitted by user.
i = index of characters/letters/alphabets in string
ch = to get character stored at index i
cnt = maintain count of vowels in given string . initial value of cnt = 0;

e.g string given is s = "ABe"

for A ……. i = 0 , ch = A, cnt = 1


for B-----------= 1, ch= B, cnt = 1
for e -------- i = 2 , ch = e , cnt =2 */

cnt = 0;
s = form1.t1.value;
for(i=0;i<=s.length;i++)
{
ch=s.charAt(i);
if(ch =="A"||ch=="a"||ch=="E"||ch=="e"||ch=="I"||ch=="i"||ch=="O"||ch=="o"||ch=="U"||ch=="u")
cnt++;
}

alert("No. of Vowels in Given String are :" +cnt);


}
</script>
</html>
Advanced Javascript
Experiment No. 8
Title:Create JavaScript program for the given form
validations.
Create JavaScript program for the following form validations.
Make use of HTML5 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 once and 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.
Code for validation.html
<!DOCTYPE html>
<html>
<head>
<title>JAVAScript</title>
</head>
<body>
<h1>Information Form</h1>
<form name="f1">
Your Name
<input type="text" name="txt_name">
<br>
<br>
Address
<textarea name="txt_address" placeholder="Permanent Address"/></textarea>
<br>
<br>
Contact
<input type="tel" name="telephone" maxlength="10">
<br><br>
Email
<input type="email" name="txt_email" pattern="[A-Z a-z]{0-9}-[@]{1}-[.]{1}">
<br>
<br>
<input type="button" name="b1" value="submit" onclick="validate_email()">
</form>
</body>
<script type="text/javascript">
function validate_email()
{
var x=f1.txt_email.value;
var at_pos=x.indexOf("@");
var last_pos=x.lastIndexOf("@");
var firstdot_pos=x.indexOf(".");
var dot_pos=x.lastIndexOf(".");

if (at_pos<1||dot_pos<at_pos+2||dot_pos+2>=x.length||firstdot_pos<at_pos||at_pos<last_pos)
{
alert("Not an Valid email address");
f1.txt_email.focus();
}
else
{
alert("Valid Email Address");
return true;
}
}
</script>
</html>
Advanced Javascript
Experiment No. 9
Title: Create event driven JavaScript program (palindrome or not).
Create event driven JavaScript program for the following. Make use of appropriate variables,
JavaScript inbuilt string functions and control structures.
To accept string from user and reverse the given string and check whether it is palindrome or not.
Code for palindrome.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<form name="f1">
Enter the string to check it is palindrome or not!
<br>
<input type="text" name="t1">
<br>
<br>
<input type="button" name="check_palin" value="Check String" onclick="chk_palindrome()">
</form>
<script type="text/javascript">
function chk_palindrome()
{
var str,str_case,i,len;
str=f1.t1.value;
str_case=str.toLowerCase();
len=str_case.length;
var p=1;
for(i=0;i<len/2;i++)
{
if(str_case.charAt(i)!=str_case.charAt(len-1-i))
{
p=0;
break;
}
}
if(p==1)
{
alert("Entered string is Palindrome");
}
else
{
alert("Entered string is Not a Palindrome")
}

}
</script>

</body>
</html>
Server Side Scripting(PHP)
Experiment No. 10
Title:PHP program to check if a person is eligible to vote or not.
Write a PHP program to check if a person is eligible to vote or not. The program should
include the following-
 Minimum age required for vote is 18.
 Use PHP functions.
 Use Decision making statement .
Code for age.html

<!Doctype html>

<html>

<body>

<h1 align = "center"> Person Eligible to vote or not</h1>

<form method ="post" action ="age.php">

Enter the age of user<input type="number" name = "age"><br><br>

<input type="submit" name = "submit" value="Check Eligibility">

</form>

</body>

</html>

Code for 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";

?>
Server Side Scripting(PHP)
Experiment No. 11
Title: Use of PHP to count the total number of vowels(a,e,i,o,u) in the string.
Write a PHP function to count the total number of vowels (a,e,i,o,u) from the string. Accept a
string by using HTML form.

Code for vowels.html


<!doctype html>
<html>
<head>
<title>PHP program to count total no of vowels in a string</title>
</head>
<h1 align ="center">String functions</h1>
<body>
< form method ="post" action="b.php">
Enter String: <input type ="text" name ="str"><br><br>
<input type = "submit" name ="submit" value ="Count Vowels">
</form>
</body>
</html>
Code for b.php

<?php
if(isset($_POST['submit']))
{
$str=strtolower($_POST['str']);
$vowels=array('a','e','i','o','u');
$len=strlen($str);
$num=0;
for($i=0;$i<$len;$i++)
{
if(in_array($str[$i],$vowels))
{
$num++;
}
}
echo "Number of vowels: $num";
}
?>
Server Side Scripting(PHP)
Experiment No. 12
Title: PHP program to save marks of English, Hindi, Marathi, Maths and Information Technology in an
array.
Write a PHP program to save marks of English, Hindi, Marathi, Maths and Information Technology in an array.
Display marks of individual subject along with total marks and percentage.

Code for marks.php

<?php
$marks=array(75,88,91,79,83);
$total=0;
$i=0;
echo "<b>marks in English: " .$marks[0] .",<br>Marks in Hindi ".$marks[1].",
<br>Marks in Marathi " .$marks[2] .",<br>Marks in Maths ".$marks[3] .",
<br>Marks in Information Technology " .$marks[4] . ".";

for($i=0;$i<count($marks);$i++)
{
$total=$total+$marks[$i];
}
$per=$total*100/500;
echo "<br> Total marks obtained by student: $total";
echo "<br> Percentage Obtain is: $per";
?>

You might also like