INDEX
PAGE DATE OF SUBMISSION
[Link]. TITLE NO. EXPERIMENT DATE SIGNATURE
1 Creation of website using HTML5.
2 Create a webpage using HTML and CSS code to design a web
page.
3 Use of Audio on web pages using HTML5
4 Use of Audio on web pages using HTML5
5 Navigation on an image using Client side image Mapping in
web page using html 5.
6
10
11
12
PRACTICAL NO. 1
AIM: 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 [Link]. Use any theme such as
college profile or company profile etc. Every page must contain proper Meta information and design web page as follows1) 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.
[Link]
<!doctype html>
OUTPUT <html>
<head><title>homepage</title>
<meta charset="utf-8">
<meta name=college content="aided college">
<meta name=college content="unaided college">
<style>
body,img{font-family:"lucida handwriting"; border:solid; background-color:skyblue; font-
size:12px}
</style> </head>
<body><center>
<h2 align=right><a href="[Link]"><b>"enroll now"<b></a></h2>
<img src="c:\users\sandip\pictures\saved pictures\[Link]" height=250 width=500
alt="college" title="my college"><br><br>
<h1>best college in mumbai </h1>
<p><b><u><i>"A" <mark>Graded</mark> Colleges In Mumbai.
<br>You can select as per your choice</i></u></b></p> <br>
<h2> list of best college in mumbai </h2>
<a href="[Link]"><h3>aided </h3> </a>
<a href="[Link]"><h3>unaided </h3> </a>
</body></html>
[Link]
<!doctype html>
<html>
<head>
<title>page 1</title>
OUTPUT <style>
h1,ol{font-family:"Lucida Handwriting"; border:solid; background-color:orange; font-size:20px}
</style>
</head>
<body>
<center>
<h1> LIST OF AIDED COLLEGE </H1>
<ol type=1>
<LI>THAKUR COLLEGE</LI>
<LI> DALMIA COLLEGE</LI>
<LI>SVP COLLEGE </LI>
<LI>SHAILENDRA COLLEGE</LI>
<LI>BALBHARTI COLLEGE </LI>
</ol>
</center>
</body>
</html>
[Link]
OUTPUT <!doctype html>
<html>
<head>
<title>link 2</title>
<style>
h1,ul{font-family:"Lucida Handwriting"; border:solid; background-color:yellow; font-size:20px}
</style>
</head>
<body>
<br><br><br>
<h1> LIST OF UNAIDED COLLEGE </H1>
<ul type=CIRCLE>
<LI>NL COLLEGE</LI>
<LI> MATRUCHHAYA COLLEGE</LI>
<LI>MITHIBAI COLLEGE </LI>
<LI>BALBHARTI COLLEGE</LI>
<LI>MK COLLEGE </LI>
</ul>
</body>
</html>
[Link]
<!doctype html>
<html>
<head><title>ENROLLMENT FORM</title>
<style>
form,h1{font-family:"Lucida Handwriting"; border:solid; background-color:pink; font-size:20px}
</style></head>
OUTPUT
<body><center>
<h1><u>ENROLLMENT FORM</u></h1>
<FORM action="">
FULL NAME :<input type=name><br><br>
CONTACT :<input type=tel><br><br>
ADDRESS : <textarea rows=2 cols=50></textarea> <br><br>
EMAIL_ID :<input type=email><br><br>
GENDER : <input type=radio name=X>MALE
<input type=radio name=X>FEMALE <br><br>
DOB : <input type=DATE><br><br>
STREAM : <SELECT>
<OPTION>SCIENCE </OPTION>
<OPTION>COMMERCE </OPTION>
<OPTION>ARTS </OPTION>
</SELECT> <BR><BR>
PHOTO : <input type=FILE><BR><BR>
SIGNATURE :<input type=FILE><BR><BR>
<input type=submit value=submit>
<input type=reset value=clear>
</form>
</body>
</html>
PRACTICAL NO. 2
AIM: 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:
<html>
<head><title> Tourist Place </title>
<style>
section{background-color:yellow; width:50%; height:50%; float:left; color:black; font-size:30px; outline-
OUTPUT style:solid;}
aside{background-color:pink; width:50%; height:50%; float:right; color:black; font-size:30px; outline-
style:solid;}
</style> </head>
<body>
<header style="background-color:lightblue; color:deeppink; text-align:center; height:30%;
width:100%; font-size:50px; outline-style:solid"><br>Tourist places </header>
<header>
<section>
<b> City </b>
<ol>
<li> Pune </li>
<li> Delhi </li>
<li> Banglore </li>
<li> Hyderabad </li>
</ol> </section>
<aside>
<p> Tourist places in Pune </p>
<ul>
<li> Shaniwarwada </li>
<li> Sinhgad </li>
<li> Kelkar Museum </li>
</ul>
</aside></header>
</body></html>
PRACTICAL NO. 3
AIM: Use of Audio on web pages using HTML5.
Create a webpage named [Link] 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 [Link] 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).
[Link]
<!doctype html>
<html>
<head>
<title>audio</title></head>
<body bgcolor=orange><center>
<br><br><br><br>
<h1>Inserting Audio </h1>
<audio controls autoplay loop>
<source src="C:\Users\SANDIP\Music\music\kalimba.mp3"
type=audio/mp3>
</audio>
</body>
</html>
[Link]
<!doctype html>
<html>
<head>
<title>multiple sources</title></head>
<body bgcolor=orange><center>
<br><br><br><br>
<h1>Inserting Audio With Multiple Sources </h1>
<audio controls autoplay loop>
<source src="C:\Users\SANDIP\Music\music\[Link]" type="audio/ogg">
<source src="C:\Users\SANDIP\Music\music\[Link]" type="audio/wav">
<source src="C:\Users\SANDIP\Music\music\kalimba.mp3" type="audio/mp3">
</audio>
</body>
</html>
PRACTICAL NO. 4
AIM: 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 audio file that plays a sound automatically with controls. The dimension of video area
should be 100*100 pixels. The browser should display the message with appropriate attribute when audio file is not supported by browser. The code
must incorporate the list of video files formats (like webM, MP4 or ogg etc)
[Link]
<!doctype html>
<html>
<head>
<title> video </title></head>
<body bgcolor=orange><center>
<br><br><br><br>
<h1>Inserting Video </h1>
<video controls autoplay loop height=200 width=200>
<source src="C:\Users\SANDIP\Videos\sample video\video1.mp4" type=video/mp4>
</video>
</body>
</html>
[Link]
<!doctype html>
<html>
<head>
<title> multiple sources </title></head>
<body bgcolor=orange><center>
<br><br><br><br>
<h1>Inserting Video With multiple Sources </h1>
<video controls autoplay loop height=200 width=200>
<source src="C:\Users\SANDIP\Videos\sample video\[Link]" type="video/ogg">
<source src="C:\Users\SANDIP\Videos\sample video\[Link]" type="video/webm">
<source src="C:\Users\SANDIP\Videos\sample video\video1.mp4" type="video/mp4">
</video>
</body>
</html>
PRACTICAL NO. 5
AIM: Navigation on an image using Client side image Mapping in web page using html 5.
Create a webpage named [Link] 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/IrfanView/Pinta. Each shape should be mapped or navigate with a
different URL that should navigate to a local webpage
[Link]
<!doctype html>
<html>
<head>
<title>image mapping</title>
</head>
<body bgcolor=black>
<center>
<img src="[Link]" usemap=#abc>
<map name=abc>
<area shape="rect" coords="168,72,377,162" title="rectangle" href="[Link]">
<area shape="circle" coords="110,65,50,80" title="circle" href="[Link]">
<area shape="poly" coords="536,89,608,141,579,233,492,233,466,142" title="polygon"
href="[Link]">
</map>
</body>
</html>
[Link]
[Link]
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title> rectangle </title> <title> polygon </title>
</head> </head>
<body bgcolor=black text=white> <body bgcolor=black text=white>
<br><br><br><br> <br><br><br><br>
<center> <center>
<h1>THIS IS RECTANGLE PAGE </h1> <h1>THIS IS POLYGON PAGE </h1>
</center> </center>
</body> </body>
</html> </html>
[Link]
<!doctype html>
<html>
<head>
<title> circle </title>
</head>
<body bgcolor=black text=white>
<br><br><br><br>
<center>
<h1>THIS IS CIRCLE PAGE </h1>
</center>
</body>
</html>
OUTPUT FOR PRINTOUT:
PRACTICAL NO.1
[Link] :
[Link]:
[Link]
[Link]
Practical no 2
output :
Practical no:3
Output
[Link]
[Link]
Practical no .4 (Output)
[Link]
[Link]
Practical no.5
Output
[Link]
Practical No. 10
AIM : Write a PHP program to check if a person is eligible to vote or not. The program
should include the following-
1) Minimum age required for vote is 18.
2) Use PHP functions.
3) Use Decision making statement.
CODE :
<html>
<body bgcolor=orange>
<center><br><br><br>
<?php
function vote()
{
$name = "ABC";
$age = 19;
if ($age >= 18)
{
echo $name . ", You are eligible for Vote";
}
else
{
echo $name . ", You are not eligible for Vote. ";
}
}
vote();
?>
</center>
</body>
</html>
