SOP 1:-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 display tourist places in any one
of the city.
Use Incline style sheet in the section to display background colour for the text
‘Tourist places’.Use internal stylesheet for the left and right section with
background colour and font styles.
Tourist places
City Tourist places in
1.Pune Pune
2.Bangal Shaniwar
ore wada
3.Hyder Kelkar
abad Museum
4.Delhi Sinhgad
fort
<!DOCTYPE html>
<html>
<head>
<title>
Tourist Places
</title>
<style>
section{background-color:pink;width:49%;height:50%;float:right;border-
style:dashed}
aside{background-color:yellow;width:49%;height:50%;float:left;border-
style:dashed}
ol{font-style:italic;font-size:15pt}
ul{font-weight:bold;font-size:20pt}
</style>
</head>
<body>
<header style="background-color:skyblue;height:100pt;border-style:dashed">
<h1 align="center">Tourist Places</h1>
</header>
<br>
<aside>
<h3>City</h3>
<ol>
<li>Pune</li>
<li>Banglore</li>
<li>Hyderabad</li>
<li>Delhi</li>
</ol>
</aside>
<section>
<h3>Tourist places in Pune</h3>
<ul>
<li>Shanivarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad fort</li>
<li>Aga Khan Palace</li>
</ul>
</section>
</body>
</html>
OUTPUT
SOP 2:-Create a website using HTML and CSS code to design a web
pages as follows-
The first webpage will accept the name of the traveller, Date of travel,
telephone number.It also has submit button as on image.
The second webpage has information about name of the transport, time, seat
no and destination displayed one below the other in the form of unordered list
as
Name of transporter- Air Asia
Seat no-B39
Destination-Delhi
Both pages should be interlinked. Create external stylesheet with relevant
tags.
page1.html
<!DOCTYPE html>
<html>
<head><title>Travellers Entry Form</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<h1>HOLY CROSS TOURS & TRAVELS</h1>
<h2>Traveller Registration Form</h1>
<form> NAME: <input type="text" autocomplete><br><br>
Date of Travelling:<input type="date" name="bday"><br><br>
Telephone number: <input type="tel" name="phone"><br><br>
<input type="image" src="neha.jpg" alt="Click here to submit" height="100"
width="100"><br><br>
<a href="page2.html">Click here for Transporters detail</a>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head><title>External style sheet example</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<h1>HOLY CROSS TOURS & TRAVELS</h1>
<h2>Transporters Details</h2>
<ul type="disc">
<li><h3>Name of Transporter-Air Asia</h3>
<li><h3>Time-9.30 AM</h3>
<li><h3>Seat No-B39</h3>
<li><h3>Destination-Delhi</h3>
</ul>
<a href="page1.html">Click here for Travellers detail</a>
</body>
</html>
style1.css
h1{color:navy;border:Solid;text-align:center}
body{background-color:orange}
h2{color:green;text-decoration:underline}
SOP 3:- 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 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 files not supported by browser. The code must incorporate the list
of sound files format(like wav,MP3 or oggetc).
Single Audio with controls
<!DOCTYPE html>
<html>
<head>
<title>Single Audio with controls</title>
</head>
<body>
<h1 align=center> Single Audio with controls</h1>
<audio src="sound1.mp3" type="audio/mp3" controls >
</audio>
</body>
</html>
Multiple Audio Files with controls
<!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 Audio File Formats</h3>
<ol>
<li> mp3--audio/mpeg</li>
<li> wav--audio/wav</li>
<li> ogg--audio/ogg</li>
</ol>
<audio controls autoplay>
<source src = "sound1.mp3" type = "audio/mp3" >
<source src ="sound1.wav" type = "audio/wav" >
<source src = "sound1.ogg"type = "audio/ogg" >
Your browser does not support the <audio> element.
</audio>
</body>
</html>
SOP 4:- Use of video on web page using html 5.
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 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 dimensions
of video area should be 100* 100pixels. The browser should display the
message with appropriate attribute when audio files not supported by the
browser. The code must incorporate the list of video files format (like
web,MP4 or oggetc).
Single Video with controls
<!DOCTYPE html>
<html>
<head>
<title>Single Video with controls</title>
</head>
<body>
<h1 align=”center”> Single Video with controls</h1>
<video src="video.mp4" controls autoplay height=”150” width=”150”>
</video>
</body>
</html>
Multiple Video Files with controls
<!DOCTYPE html>
<html>
<head>
<title>Multiple Video Files with controls</title>
</head>
<body>
<h1 align=center>Multiple Video Files with controls</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 File Formats</h3>
<ol>
<li> mp4--Video/mpeg</li>
<li> webM--Video/webM</li>
<li> ogg--Video/ogg</li>
</ol>
<Video controls autoplay>
<source src = " video.mp4" type = "Video/mp4" >
<source src ="video.webm" type = "Video/webm" >
<source src = "video.ogg" type = "Video/ogg" >
Your browser does not support the <video> element.
</Video>
</body>
</html>
SOP 5:- Navigation on an image using Client side image mapping in web
page using html 5.
Create a webpage named imagemap.html with inserted image having
jpeg, ping or gift extension. Create 3 different shapes(like rectangle,
circle and ploygon) which do not overlap. Note the co-ordinates making
use of MS-paint/GIMP/Irfan view/Pinta. Each shape should navigate to a
local webpage.
Client side image map.html
<!DOCTYPE html>
<html>
<head><title>IMAGE MAP</title></head>
<body>
<h1>An Example of Client Side Image Map</h1>
<img src="holy.jpg" usemap="#abc" height="1000" width="1000" alt="IMAGE
of Holy Cross">
<map name="abc">
<area href="form.html" shape="RECT" coords="0,0,93,65" alt="form"/>
<area href="color.html" shape="CIRCLE" coords="118,140 ,40" alt="color
picker"/>
<area href="aj.html" shape="POLY" coords="145,187,198,215,245,280,305"
alt="Internal CSS"/>
</map>
</body>
</html>
color.html
<!DOCTYPE html>
<html>
<head><title>Good Morning</title></head>
<body>
<h1>have a beautiful day</h1>
</body>
</html>
form.html
<!DOCTYPE html>
<html>
<head>
<title>hello </title></head>
<body>
<h1>have a nice day</h1>
</body>
</html>
aj.html
<!DOCTYPE html>
<html>
<head>
<title>hi </title></head>
<body>
<h1>have a good day</h1>
</body>
</html>
