Scribd
Upload
346 views15 pages

Advanced Web Design (HTML Sops) 2024-25-1

Uploaded by

ashishbawdekar01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
346 views15 pages

Advanced Web Design (HTML Sops) 2024-25-1

Uploaded by

ashishbawdekar01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

SOP 1

TITLE : 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.

Program code:
Index.html
<!doctype html>
<html>
<head>
<title>Changu Kana Thakur College </title>
<meta name="author" content="Changu Kana Thakur College">
<meta name="description" content="college information">
<style>
body{background-color:lightpink}
h1{text-align:center;background-color:cyan;color:red}
p{color:blue;font-family:Arial;border:double;font:size:20px}
</style>
</head>
<body>
<center>
<img src="collegelogo.jpg" alt="college image1" height="50" width="50">
</center>
<h1>Changu Kana Thakur College</h1>
<img src="collegeimage.jpg" alt="college image" height="400" width="400">
<p>College Information:
This is junior college of Arts, Commerce,Science Faculties.<br>
About J. B. S. P. Sanstha :<br>

<b>Name of Sanstha : Janardan Bhagat Shikshan Prasarak Sanstha, Panvel.</b><br>


<u>Establishment : In 1994</u><br>
<mark>
<i>President : Shri. Arunshethji Bhagat<br>
Chairman : Shri. Ramshethji Thakur</i></mark><br> <br>
</p>
<a href="page2.html">Registration Form </a><br><br>
</body>
</html>

Form.html
<!doctype html>
<html>
<head>
<title>CHANGU KANA THAKUR COLLEGE</title>
<meta name="author" content="college">
<meta name="description" content="college information">
</head>
<body bgcolor="pink" text="blue">
<h1 align="center">CHANGU KANA THAKUR COLLEGE</h1><br><br>
<h2>Registration Form: </h2><br><br>
<form>
Full Name : <input type="text" name="t1" autocomplete> <br><br>
Email Id : <input type="email" name="emailid" required><br><br>

<input type="submit" name="bt1" value="SUBMIT"><br><br>


</form>
<a href="index.html">Home Page </a><br><br>

</body>
</html>
Page2.html
SOP 2

Title : 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 displays tourist places
of any one of the city .
Use Inline style sheet in the top section to display background color for the text
‘Touristplaces’. Use internal stylesheet for the left and right section with
background color and font styles.

Touristplaces.html

<!DOCTYPE html>
<html>
<head> <title>sop2</title>
<style>
aside{background-color:yellow;float:left;width:50%}
section{background-color:pink;float:right;width:50%;}
ol{font-size:20px}
ul{font-size:20px}
</style>
</head>
<body>
<header style="color:black;text-align:center;display:block-
inline;border:solid;background-color:blue">
<h1>Tourist Places</h1>
</header>
<aside>
<h2>city</h2>
<ol>
<li>Pune</li>
<li>Bangolore</li>
<li>Hydrabad</li>
<li>Delhi</li>
</ol>
</aside>
<section>
<h2>Tourist places in pune</h2>
<ul>
<li>Shanivarwada</li>
<li>kelkar</li>
<li>sinhagad fort</li><br>
</ul>
</section>
</body>
</html>

Touristplaces.html
SOP 5
Use of Audio on web PAGES using HTML5.

Create A Webpage Named Audio1.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 Audio2.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).

Audio1.html

<!doctype html>
<html>
<head><title>Inserting Audio</title>
</head>
<body bgcolor="yellow" text="green">
<h1 align="center">INSERTING AUDIO IN WEB PAGE WITH CONTROLS</h1>
<audio src="latasong.mp3" type="audio/mp3" controls autoplay loop="-1">
</audio>
<BR><BR><BR><BR>
AUTOPLAY ATTRIBUTE DOES NOT SUPPORTED BY CHROME BUT
SUPPORTED BY INTERNET EXPLORER .
</body>
</html>
Audio2.html:
<!doctype html>
<html>
<head><title>inserting audio</title>
</head>
<body bgcolor="#94312b" text="yellow">
<h1 align="center">INSERTING MULTIPLE AUDIO FILES WITH
CONTROLS</h1>
<H2>LIST OF SOUND/AUDIO FILE FORMATS</H2>
<OL>
<LI>MP3 AUDIO FILE</LI>
<LI>WAVE AUDIO FILE</LI>
<LI>OGG AUDIO FILE</LI>
</OL>
<Audio controls autoplay loop="-1">
<source src="latasong.ogg" type="audio/ogg">
<source src="latasong.mp3" type="audio/mp3">
<source src="latasong.wav" type="audio/wav">
</audio>
<BR><BR>
INTERNET EXPLORER SUPPORT .WAV FILE BUT DOES NOT SUPPORT
.OGG FILE
<BR>CHROME SUPPORT .OGG FILE BUT AUTOPLAY ATTRIBUTE DOES
NOT WORK
</body>
</html>
Output :
Audio1.html :

Audio2.html
SOP 6
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).

VIDEO1.HTML

<!doctype html>
<html><head><title>inserting video</title>
</head>
<body bgcolor="cyan" text="red">
<h1 align="center">INSERTING VIDEO WITH CONTROLS </h1>
<video src="independence day.mp4" type="video/mp4" height="150" width="150"
controls loop="-1" autoplay>
</video>
<br><br>
CHROME DOES NOT SUPPORT AUTOPLAY ATTIBUTE BUT INTERNET
EXPLORER SUPPORT IT.
</body>
</html>
video2.html

<!doctype html>
<html>
<head><title>inserting video</title>
</head>
<body bgcolor="purple" text="white">
<h1 align="center">INSERTING MULTIPLE VIDEO WITH CONTROLS</h1>
<h2>list of video file formats</h2>
<ol>
<li>MP4 VIDEO FILE</li>
<li>WEBM VIDEO FILE</li>
<li>AVI VIDEO FILE</li>
</ol>
<video height="100" width="100" controls autoplay loop="-1">
<source src="independence day.mp4" type="video/mp4">
<source src="independence day.webm" type="video/webm">
<source src="independence day.ogg" type="video/ogg">
</video><br><br>
CHROME SUPPORT .OGG VIDEO FILE FORMAT AND I.E SUPPORT .MP4 VIDEO
FILE FORMAT
</body>
</html>
VIDEO1 OUTPUT

VIDEO2 OUTPUT
SOP7 :
TITLE : NAVIGATION ON AN IMAGE MAPPING USING CLIENT SIDE
IMAGE MAPPING IN WEB PAGE USING HTML5.

Create a web page named imagemap.html with an inserted image having jpeg,png or
gif extension . Create 3 different shapes (like rectangle , circle and plygoan) which
do not overlap . Note the coordinates making use of Ms-Paint/GIMP/Irfan
View/Pinta . Each shape should be mapped or navigate with a different URL that
should navigate to local web page .

imagemap.html :

<!doctype html>
<html><head><title>CLIENT SIDE IMAGE MAPPING</title>
</head>
<body>
<h1 align="center">CLIENT SIDE IMAGE MAPPING</h1>
<img src="natureimg.jpg" usemap="#test">
<map name="test">
<area shape="rect" coords="237,143,496,337" href="Page1.html" alt="localpage1">
<area shape="circle" coords="1355,174,84" href="Page2.html" alt="localpage2">
<area shape="poly" coords="1624,654,1673,700,1669,745,1624,763,1592,705"
href="Page3.html" alt=" localpage3">
</map>
</body>
</html>
Page1.html :

<!doctype html>
<html><head><title>ckt college</title>
</head>
<body bgcolor="violet" text="white">
<h1 align="center">RAMKRSHNA COLLEGE , PUNE</h1>
</body>
</html>

Page2.html :

<!doctype html>
<html><head><title>Ramkrishna college</title>
</head>
<body bgcolor="violet" text="white">
<h1 align="center">RAMKRSHNA COLLEGE , PUNE</h1>
</body>
</html>

Page3.html :
<!doctype html>
<html><head><title>Vivekanand college</title>
</head>
<body bgcolor="green" text="red">
<h1 align="center">VIVEKANAND COLLEGE ,KOLHAPUR</h1>
</body>
</html>His life story is success story of a common man.
</BODY>
</HTML>
Imagemap.html :

Page1.html :
Page2.html:

Page3.html:

You might also like