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 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 center 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.
Index.html
<!DOCTYPE html> <html> <head>
<title>SOP 1</title>
<meta name = "keywords" content = "Meta Tags, Metadata"/>
</head>
<body bgcolor="pink">
<h1> <center> <font face=" Lucida Bright"size="7"color="blue"face="algebrian" <b>
<u> Krishna Mahavidyalaya, Rethare Bk.||</center> </b></u></font></h1>
<center><img src="kmr.jpg"align="center" alt= "KMR College"></center>
<center><font face=" Times New Roman"size="4"color=" blue"face="algebrian"<p>
<u> Krishna Mahavidyalaya,Junior and Senior, Rethare Bk. </u></p> <p><u> It is managed by
Shetkari Shikshan Prasarak Mandal, Rethare Bk.</u>
</p></center>
<center>
<p><i>Various Degrees, UnderGraduation courses conducted are of Arts, Commerce, and
Science. </i></p>
<p><i>Undergraduate courses such as HSC Arts, Commerce and Science. </i></p>
<p>Our promise is to bring the best educational facilities to our students by maintaining a
sharp focus on the pursuit of knowledge and skills.</p>
<center><a href="2 page.html">Click Here for Second Page</a>
</font></center>
</body> </html>
2page.html
<!Doctype html> <html>
<head><title> Example of creation website </title>
<meta name = "keywords" content = "Meta Tags, Metadata"/> </head>
<body bgcolor="pink"><center><a href="index.html"><b>INDEX PAGE</b></a></center><h1
align="center">
<font color="red">FEEDBACK</font></h1> <from method="post"><table border="5" align="center"
cellspacing="6" bordercolor="orange"><thcolspan="4"><sup><font
color="red"></font></sup></th><tr><td>Name<sup><font color="red">*</font></sup></td>
<td><input type="text" maxlength="10" Name="na" value="Prasad
Thorat"></td></tr><tr><td>Address</td><td><input type="text" maxlength="10" Name="na"
value="Karad"></td></tr><tr><td>City</td><td>
<select name="City"><option>Mumbai<option>Pune<option>Satara<option>Karad</select> </td> </tr>
<tr><td>Country<sup><font color="red">*</font></sup></td><td><select name="Country">
<option>India<option>USA<option>London<option>Austrilia<option>Newziland</select></td></tr><tr>
<td>Gender</td><td><name="Gender"><input type="radio" name="r1"checked>Male<br>
<input type="radio"name="r1">Female</td></tr><tr><td>Phone no.</td>
<td> <input type="text" maxlength="10"name="ph" value="8275278407"</td></tr>
<tr><td>E-mail<sup><font color="red"></font></sup></td><td><input type="text"
value="
[email protected]" maxlength="15"></td></tr> <tr><td>Comment
about<br>Information about Cricket</td>
<td><input type="Comment"name="co"value="It is very important to know the information about all
Cricketrs in India "></td></tr><tr><td colspan="2"><input type="submit"name="sub">
<input type="reset" name="res"></td></tr></table></form></body></html>
Index.html
<!DOCTYPE html>
<html> <head> <title>Frameset</title> </head>
<frameset rows="30,70"> <frame src="first.html">
<frameset cols="1,1"> <frame src="second.html"> <frame src="third.html">
</frameset> </frameset> </html>
First.html
<!DOCTYPE html>
<html> <head> </head> <body style= "background-color:blue" >
<center> <h1 style= "align:center; color:pink" >Tourist places</h1> </center>
</body> </html>
Second.html
<!DOCTYPE html> <html><head><title></title></head>
<body style="background-color: cyan">
City <ol type="1"> <li>Pune</li> <li>Banglore</li> <li>Hyderabad</li> <li>Delhi</li>
</ol> </body> </html>
Third.html
<!DOCTYPE html>
<html> <head> <title></title> </head>
<body style="background-color: pink">
Tourist places in Pune
<ul type="disc">
<li>Shanivarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad fort</li>
</ul> </body> </html>
SOP 3 : Create a website using HTML and CSS code to design
webpages 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.
1. Index.html
<!DOCTYPE html>
<html><head><title>Traveller Info</title>
<link rel="stylesheet" type="text/css" href="my.css"></head><body>
<h1>Traveller Information</h1> <form action="page2.html" method="">
<table> <tr><td>Enter Traveller Name</td>
<td><input type="text" name="t1"></td>
</tr> <tr><td>Select Travel Date</td>
<td><input type="date" name="d1"></td></tr> <tr>
<td>Enter telephone Number</td>
<td><input type="Number" name="n1"></td>
</tr><tr><td><input type="submit" name="s1"
value="submit"></td></tr></table></form></body></html>
2. Page2.html
<!DOCTYPE html>
<html><head><title></title>
<link rel="stylesheet" type="text/css" href="my.css">
</head><body>
<h1>Transporter Information</h1><ul>
<li>Name of transporter : Air Asia </li>
<li>Time : 09:30 am</li>
<li>Seat no : B39 </li>
<li>Destination : Delhi</li></ul></body></html>
SOP 5 : 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 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 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).
Audio.html
<!DOCTYPE html>
<html>
<head>
<title>Use of Audio on web pages using HTML5</title>
</head>
<body>
<audio controls loop="-1">
<source src="songs.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Audio1.html
<!DOCTYPE html>
<html>
<head>
<title>Use of Audio on web pages using HTML5</title>
</head>
<body>
<audio controls autoplay>
<source src="songs.ogg" type="audio/ogg">
<source src="songs.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
SOP6 . 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.
1. Video.html
<!DOCTYPE html> <html>
<head>
<title>Single Video File </title>
</head>
<body bgcolor="orange">
<center>
<h1 align="center"> Single Video File on Web page with controls </h1>
<video width="250" height="250" controls autoplay>
<source src="Video.mp4" type="Video.mp4">
</center>
</video> </body> </html>
Vedio1.html
<!DOCTYPE html><html>
<head><title></title></head>
<body bgcolor="pink"> <center> <h1> Multiple Video File on Web Page with Controls</h1>
<video width="200" height="200" controls autoplay>
<source src="Video.mp4" type="video/mp4">
<source src="example.ogg" type="video/ogg">
Your browser does not support the video tag.
</center> </video>
</body> </html>
