Oswal Shikshan and Rahat Sangh Sanchalit
Shree Halari Visa Oswal Vidyalaya & Jr. College, Bhiwandi
INFORMATION TECHNOLOGY PRACTICAL.
IT Teacher: SUNIL Y. SHUKLA (M.C.A) & RANI KOKKULA. (M.Sc.CS)
SKILL SET: 01 HTML (Science & Commerce)
SOP:01
AIM: Creation of website using HTML5.
Create a website using HTML5 and CSS using any 4 CSS properties. Write a code for 2 separates
pages having different file names such as first page as index.html second page as page2.html. Use
college theme. 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
the page. There must be a paragraph which introduces general information about the theme must
have at least 3 physical tags and one image with alternate text. This page must be connected to other
two pages with proper navigational links.
2. The second page must contain the feedback or enrolment form related with theme with features
of HTML5. The form must contain text element and email address of the company pr persona. Include
the submit button.
Code:
index.html
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-align:center;
color:red;
background-color:Yellow;
letter-spacing:5pt}
</style>
<meta name="author" content="College website">
</head>
<body>
<h1> S.H.V.O.V AND JR.COLLEGE </h1>
<p> This is one of the <b> best Jr. College</b> in <i>BHIWANDI</i>.
It has <u>Two Streams: </u> COMMERCE AND SCIENCE.
All subjects have specialist qualified faculty. </p> <br> <br>
<img src="COLLEGE photo.jpg" alt="click here to submit" height=200 width=200> <br> <br>
<a href="form.html"> Click for form </a>
</body>
</html>
form.html
<!DOCTYPE html>
<html>
<head>
<title> Registration form </title>
<meta name="author" content="College website">
</head>
<form>
<h1> Application form </h1>
EMAIL<input type="email" name="email"> <br>
PHONE NUMBER <input type="tel" name="number"> <br>
SUBMIT <input type="button" name="Submit" value="Submit"> <br> <br>
<a href="index.html"> Home Page </a> <br> <br>
</form>
</body>
</html>
SOP:02
AIM : CREATION OF WEBSITE USING HTML5 AND CSS.
Design the of the webpages are as follows
The first webpage will accept the name of the traveller, date of travel, telephone number. It also has
submit button as an image.
The second webpage has information about the name of transporter, time, seat no and 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.
Code:
sop3a.html
<!DOCTYPE html>
<html>
<head> <title> Application Form </title>
<link rel="stylesheet" type="text/css" href="style.css"> </head>
<body>
<form>
<h1> APPLICATION FORM </h1> <br> <br>
NAME OF TRAVELLER<input type="text" name="OK"> <br> <br>
DATE OF TRAVEL <input type="date" name="pk"> <br> <br>
TELEPHONE NUMBER <input type="tel" name="number"> <br> <br>
<input type="image" src="submit.jpeg" height="100" weight="100"> <br> <br>
<a href="sop3b.html"> 1st page </a> <br> <br>
</body>
</html>
sop3b.html
<!DOCTYPE html>
<html>
<head> <title> Transporter Details </title>
<link rel="stylesheet" type="text/css" href="style.css"> </head>
<body>
<h1> DETAILS </h1> <br>
<ul>
<li> NAME OF TRANSPORTER- AIR ASIA </li>
<li> SEAT NUMBER-B39 </li>
<li> DESTINATION-DELHI</li>
</ul>
<a href="sop3a.html"> Application </a>
</body>
</html>
SOP:03
AIM: Use of audio on web page using HTML5.
Create a webpage named audio. Html to set an audio file in web page with controls such that it used
that it used html 5 element. 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 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].
Code:
audiosingle.html
<!DOCTYPE html>
<html>
<head>
<title>Single Audio with controls</title>
</head>
<body>
<h1 align="center">Audio with controls</h1>
<audio controls autoplay loop="-1">
<source src="mangal.mp3" type="audio/mpeg">
</audio>
</body>
</html>
audiomultiple.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 browsers that do not support the audio
element.</h2>
<h3>List of sound files formats</h3>
<ol>
<li>mp3-audio/mpeg</li>
<li>ogg-audio/ogg</li>
<li>wav-audio/wav</li>
</ol>
<audio controls autoplay>
<source src="mangal.mp3" type="audio/wav">
<source src="mangal.mp3" type="audio/mp3">
<source src="mangal.mp3" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>
SOP:04
AIM: Use of video on web page using HTML5.
Create a webpage named video.html to display a video file on web page and play automatically with
controls. The dimension of video area should be 150* 150 pixels.
Create another webpage which provide multiple source file format for the same video file that plays
a sounds 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].
Code:
videosingle.html
<!DOCTYPE html>
<html>
<head>
<title>
Single Video File on Web Page with controls
</title>
</head>
<body>
<h1 align="center">Single Video File on Web with controls</h1>
<video src="sandeshe.mp4" controls width="150" height="150" loop="-1" autoplay>
</video>
</body>
</html>
videomultiple.html
<!DOCTYPE html>
<html>
<head>
<title>
Multiple Video File on Web Page with controls
</title>
</head>
<body>
<h1 align="center">
Multiple Video File on Web Page with controls</h1>
</h1>
<h2>
The text between the Video tags will only be displayed in browsers that do not support 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="100" height="100" autoplay>
<source src="sandeshe.mp4" type="video/mp4">
<source src="sandeshe.webm" type="video/webm">
<source src="sandeshe.ogg" type="video/ogg">
</video>
</body>
</html>
SOP:05
AIM: Client side image mapping.
Create a webpage named imagemp.html with an inserted image having jpg, png or gif extension.
Create 3 different shapes which do not overlap. Note co-ordinate making use of MS-Paint/GIMP etc.
Each shape should be mapped or navigate with a different URL that should navigate to a local
webpage.
Code:
imgmap.html
<!DOCTYPE html>
<html>
<head>
<title> Image mapping </title>
</head>
<body>
<h2>Image Maps</h2>
<p>Click on the Laptop, the mobile phone, or the cup of coffee to go to a new page and read more
about the topic:</p>
<img src="work.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="laptop.html">
<area shape="poly" coords="290,172,293,240,333,250,327,172" alt="Phone" href="phone.html">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.html">
</map>
</body>
</html>
laptop.html
<!DOCTYPE html>
<html>
<head>
<title> Laptop </title>
</head>
<h1> Laptop </h1>
This is laptop. We use it to create reports.
</body>
</html>
phone.html
<!DOCTYPE html>
<html>
<head>
<title> Mobile phone </title>
</head>
<h1> Mobile phone </h1>
This is Mobile Phone. We use it for calling.
</body>
</html>
coffee.html
<!DOCTYPE html>
<html>
<head>
<title> Coffee </title>
</head>
<h1> A cup of coffee. </h1>
This is a cup of coffee. It’s a good refreshment.
</body>
</html>
