SOP 1 :
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 name
such first page as Index. html, second page as [Link] 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. It must have at least 3 physical style tags and one image with
alternate text. This page must be connected to other page with proper navigational
links. 2) The 2nd page must contain the feedback or enrolment form related with
theme chosen with feature of HTML5. The form must contain text element and email
address of the company or person. Include the submit button.
[Link]
<!DOCTYPE html>
<head>
<title>Symbiosis Junior College</title>
<meta name= "college" content="Symbiosis Junior College" >
<style>
h1 {border-style: dotted}
p { color="red"; font size= 15pt}
body { background-color: pink}
b {text-decoration: overline}
</style></head>
<body>
<h1 align="center"> Symbiosis Junior College </h1>
<p> There are various junior colleges which are affiliated with Maharashtra State
board and provides education for various streams and subjects. Arts, Commerce and
Science are popular streams that students can opt [Link] are vocational courses
also which offers various skill based courses and training programs.</p>
<b> Salient Features of Junior College</b><br>
<i>Courses available in the college</i><br>
<u> Arts, Commerce and Science</u><br><i>Streams are as follows</i><br>
<u>Arts, Commerce, Science</u> <br>
<img src= "[Link]" alt="best junior college"><br>
<a href="[Link]"> second page</a>
</body></html>
[Link]
<html>
<head>
<title> Forms </title>
<meta name= "college" content="Symbiosis Junior College" >
<style>
h1{border-style: dashed}
body{background-color:pink}
</style>
</head>
<body>
<h1 align="center" > Enrollment Form </h1>
<form name="f1" align="center"> Enter Your Name
<input type="text" name="t1" required ><br><br>
Enter your E-mail ID
<input type="email" name="emailid"><br><br>
<input type="submit" name="submitbtn" value="submit">
</form>
<a href="[Link]" align="center">First Page</a>
</body> </html>
Output:
SOP 2 :
Create a webpage using HTML and CSS code to design a webpage 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 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.
[Link]
<html>
<head>
<title> tourist places </title>
<style>
aside{ background-color: pink; width: 50%; height:30%; float:left}
section{ background-color: yellow; width:50%; height:30%; float: right}
</style> </head>
<body>
<header style="background-color: lightblue;color:deeppink;text-
align:center;height:30%; width:100%; font-size: 50px;
outline-style: solid">tourist places</header>
<section>
<b>Cities </b>
<ol>
<li>pune</li>
<li>banglore</li>
<li>Hyderabad </li>
<li>delhi </li>
</ol> </section>
<aside>
<b><p>Tourist places in pune</p></b>
<ul>
<li>shanivarwada</li>
<li>Kelkar museum</li>
<li>sinhagad fort</li></ul></aside></body> </html>
Output :
SOP 3 :
Create a website using HTML and CSS code to design a webpages as follows - The
first webpage will accept the name of the traveller, date of travel, telephone number.
It also has a 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.
[Link]
<html>
<head>
<link rel= "stylesheet" type= "text/css" href = "[Link]">
</head>
<body>
<h1>Traveller Information </h1>
<form name= "f1">
Name of traveller <input type ="text"><br>
Date of travel <input type="date"><br>
Telephone number <input type="tel"><br>
<input type = "image" src= "[Link]">
</form><a href = "[Link]"> Transporter Info </a>
</body></html>
2 : [Link]
<!DOCTYPE html>
<head>
<link rel= "stylesheet" type= "text/css" href = "[Link]">
</head>
<h1>Transporter Information </h1>
<ul>
<li> Name of transporter - Air Asia </li>
<li> Time - 09.30am </li>
<li> Seat no. B39 </li>
<li> Destination - Delhi </li>
</ul><a href = "[Link]"> Transporter Info </a>
</body></html>
[Link]
h1
font- family : times new roman;
border: solid;
text - align : center
body
background - color : pink
}
Output:
SOP 4
Use of Audio on Web pages using HTML 5
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]
<html>
<head>
<title>Audio Control</title>
</head>
<body>
<h1>single audio control</h1>
<audio src="file_example_MP3_700KB.mp3"controls autoplay loop="-1">
</audio>
</body></html>
PART 2
<html><head>
<title>Audio Control</title></head>
<body>
<h1>Multiple Audio Control</h1>
<h3>List of sound files format </h3>
<ol>
<li>mp3-audio/mpeg </li>
<li>ogg-audio/ogg</li>
<li> wav-audio/wav</li>
</ol>
<audio controls autoplay loop="-1">
<source src="file_example_MP3_700KB.mp3" type="audio/mp3">
<source src="file_example_OOG_1MG.ogg" type="audio/ogg">
<source src="file_example_WAV_1MG.wav" type="audio/wav">
</audio>
</body></html>
SOP 5 :
Use of video on webpages using HTML5. Create a webpage named [Link] to
display a video file on webpage and plays automatically. 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 with controls. The
dimension of video area should be 300* 300 pixels. The code must incorporate the
list of video files formats (like webM, MP4 or ogg etc).
<!doctype html>
<head><title>Single Video files with controls</title>
</head>
<body>
<h1 align="centre">
Single video file on web page with controls</h1>
<video src="d:\SampleVideo_1280x720_1mb (1).mp4" width="320"height="240"controls
autoplay>
</video></body>
</html>
<!doctype html>
<body>
<h1 align="centre">
multiple video lines on web page with controls</h1>
<h3>list of video file formats</h3>
<ol>
<li>mp3-video/mpeg</li>
<li>ogg-video/ogg</li>
<li>webM-video/webM</li>
</ol>
<video width="320"height="240"controls>
<source src="C:\Users\sjclab10\Downloads\SampleVideo_1280x720_1mb
(1).mp4"type="video/mp4">
<source src="C:\Users\sjclab10\Downloads\SampleVideo_1280x720_1mb
(1).ogg"type="video/ogg">
<source src="C:\Users\sjclab10\Downloads\SampleVideo_1280x720_1mb
(1).webM"type="video/webm">
your browser does not support the multiple file formats</video></body></html>
SOP 6 image map
Navigation on an image using Client side image Mapping in web page using HTML5.
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 down the co-ordinates making use of Ms-paint/GIMP/Irfan
View/Pinta. Each shape should be map or navigate with a different URL, one of the
clickable area should navigate to local webpage.
[Link]
<html>
<head>
<title>IMAGE MAP</title>
</head>
<body>
<h1>Client Side Image Mapping</h1>
<img src="[Link]" height="500" width="500"usemap="#imagemap" alt="Image
of Science Fair">
<map name="imagemap">
<area href="[Link] coords="0,0,70,50"alt="google
site"/>
<area href="great_wall_china.html"shape="circle" coords="100,120,20"
alt="great wall of china"/>
<area href=[Link] shape="poly" coords="80,120,150,150,180,200"
alt="maharashtra stateboard site"/>
</map>
</body>
</html>
Output: