SOP 1. Create a website using HTML5 and CSS using any 4 CSS properties.
Write a
code for two separate pages having different file names such as first page Index.html
and second page as page2.htm. Every page must contain proper Meta data information
and design as follows-
The Index page must contain a heading that is highest among other text on pages and
must be at the center of the page. There must be a paragraph that introduces general
information about the theme and atleast 3 style tags and one image with alternate text.
Page must be connected with proper navigational links.
The second page must contain a feedback or enrollment form related with theme
chosen features of HTML5. The form must contain text element and and email address
of the company or person. Include the Submit Button.
PAGE 1:
<!DOCTYPE html>
<html>
<head>
<title>
Tata Group
</title>
<meta charset="utf-8">
<meta name="author" content="Physical Tags">
<style>
h1 [border-style:dotted}
p/color:red;font-size:15pt)
body{background-color:pink)
b/text-decoration:overline)
u{text-align:right}
</style>
</head>
<body>
<h1 align="center">Tata Sons Private Limited</h1>
<p>
66% of the equity share capital of Tata Sons is held by philanthropic trusts, which support education,
health, livelihood generation, and art and culture. Each Tata company orenterprise operates
independently under the guidance and supervision of its own Board of Directors.
</p>
<b>Governance Philosophy</b><br><br>
<b>Tata Code of Conduct</i><br><br>
<u>Tata Business Excellence Model (TBEM)</u><br><br>
<h3>Image of Tata Industries</h3>
<img src="D:\users\download.jpg" width="200" height="250" alt="Tata Industries">
<br><br>
<a href="E:\XII COM IT 2020-21\SOP Web\SOP1\second.html">Second Page</a>
</body>
</html>
PAGE 2:
<!DOCTYPE html>
<html>
<head>
<title>
Forms
</title>
<meta charset="utf-8">
<meta name="author" content="Form">
<style>
h1{border-style:dashed)
body{background-color:aqua)
</style>
</head>
<body>
<h1 align="center">Enrollment Form</h1>
<form name="fl">
Enter Your Name
<input type="text" name="t1" required>
<br><br>
Enter your Email ID
<input type="email" name="emailid"><br><br>
<input type="submit" name="submitbtn" value="Submit">
</form>
<a href="E:\XII COM IT 2020-21\SOP Web\SOP1\index.html">First Page</a>
</body>
</html>
Sop 2: 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 Inline style sheet in the top
section to display background colour for the text ‘Tourist places’. Use internal stylesheet for the left and
right section with background colours and font styles.
<!DOCTYPE html>
<html>
<head>
<title>SOP2 Advanced Web Designing Practical</title>
<style type="text/css">
ol{font-size: 20px;
margin-left: 240px;
background-color: #f7f5d2;
width:190px;
aside:width:50%;float:left;}
ul{font-size: 20px;
max-width: 190px;
background-color: pink;
margin-left: 480px;
display: block;}
</style>
</head>
<body>
<header style="background-color:skyblue;height: 100px;">
<h1 align="center">Tourist Places</h1>
</header>
<aside>
<ol>
<h3>City</h3>
<li>Pune</li>
<li>Bangalore</li>
<li>Hyderabad</li>
<li>Delhi</li>
</ol>
</aside>
<section>
<ul>
<h3>Tourist Places in Pune</h3>
<li> Shanivarwada</li>
<li> Kelkar Museum</li>
<li>Sinhgad Fort</li>
</ul>
</section>
</body>
</html>
SOP3 : 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 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 Seat no – B39 Destination - Delhi Both pages should be interlinked. Create external stylesheet
with relevant tags
!DOCTYPE html>
<html>
<head>
<title>SOP3 Demostration</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="lightyellow">
<table>
<tr>
<td>
<label for="name">
Traveller Name:
</label>
<input type="text" name="Traveller_name" id="name">
</td>
</tr>
<tr>
<td>
<label for="date">Travelling Date:</label>
<input type="date" name="Travelling_date" id="date"></td>
</tr>
<tr>
<td>
<label for="phone_no">
Telephone No:
</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{2}-[0-9]{10}">
</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit" id="Submit" src="Submit.png"
onclick="window.location.href='second_page.html';">
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Second Page Html</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<ul>
<li>
Name of Transporter - Air Asia
</li>
<li>
Time - 09:30 AM
</li>
<li>
Seat No - B39
</li>
<li>
Destination - Delhi
</li>
</ul>
<input type="submit" name="submit" value="Back" onclick="history.back();">
</div>
</body>
</html>
SOP4: Creation of website using HTML 5 and CSS. Create a webpage as given layout use ,,,, with CSS.
<!DOCTYPE html>
<html>
<head>
<style>
header(background-color:pink;width:100%;height:20%)
nav (background-color:skyblue;width:100%;height:20%)
aside[background-color:grey;width:40%;float:right] section{background-color:lightyellow;
width:60%;height:10%;float:left)
article(background-color:violet;width: 60%;height:40%)
footer(background-color:blue;width:100%;height:30%)
</style>
</head>
<body>
<header>
<h3>News</h3>
Local and National News
</header>
<br>
<nav>
<a href="http://www.home.in">HOME</a>
<a href="http://www.archives.in">ARCHIVES</a>
<a href="http://www.about.in">ABOUT</a>
<br>
</nav>
<br>
<aside>
<h3>Be a News Reporter</h3>
If you see news happening - Send us a text.</aside>
<article>Local News</article>
<section>
h4>Fire fighters rescue man from building this is local news1</h
(reporter name date)<br>
This is the fighter details text. This is the story of fighter <br>
This is the detail of rescue man. This is the story of how he rescued<br>
</section>
<br>
<section>
<h4>New library to be built this is local news 2</h4>
(reporter name,date)<br>
This is the story text. This is the story text. <br>
This is the story text. This is the story text.<br>
</section>
<br>
<article><b>National News</b></article>
<section>
<h4>Snow strom is making travel difficult</h4>
(reporter name,date)<br>
This is the story of Snow strom. This is the story of distroial of storm<br>
This is the story part continued. This is the story text continued<br>
</section>
<article>
<h4>Thousands are without power</h4>
reporter name,date)<br>
This is the story of not having power. This is the story text continued<br>
This is the story bad effect. This is the story about dsitroyal of economy <br>
</article>
<br>
<footer>Footer Information</footer>
</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 html 5 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 with controls. The browser should display the message with appropriate
attribute when audio tag is not supported by browser. The code must incorporate the list of sound files
formats (like wav, MP3 or ogg etc).
PAGE 1:
<html>
<head>
<title>Single Audio with controls</title>
</head>
<body>
<h1 align="center">Audio with controls</hl>
<p>
<audio controls autoplay loop="-1">
<sourcesrc="D:\users\audio\file_example_MP3_700KB.mp3"
type="audio/mp3">
</audio>
</body>
</html>
PAGE 2:
<!DOCTYPE html>
<html>
<head>
<title>
Multiple Audio Files with controls</title>
</head>
<body>
<h1 align="center">Multiple Audio Files with controls</hl>
<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="D:\users\audio\file_example_MP3_700KB.mp3" type="audio/mp3">
Yourbrowser does not support the audio element.
</audio>
</body>
</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. 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 browser should display
the message with appropriate attribute when video tag is not supported by browser. The code must
incorporate the list of video files formats(like webM, MP4 or ogg etc).
PAGE 1:
<!DOCTYPE html>
<html>
<head>
<title>
Single Video File on Web Page with controls
</title>
</head>
<body>
<h1 align="center">Single Video File on Web Page with controls</h1>
<video src="D:\users\Video\SampleVideo_1280x720_5mb.mp4" controls
width="150" height="150" loop="-1" autoplay>
</video>
</body>
</html>
PAGE 2:
<!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>
<h2>
The text between the video tags will only be displayed in browsers that do nor
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="D:\users\Video\SampleVideo_1280x720_5mb.mp4" type="video/mp4"><source src="E:\
XII SCI IT 2020-21\video\movie.webm" type="video/webm">
<source src="E:\XII SCI IT 2020-21\video\movie.ogg" type="video/ogg">
</video>
</body>
</html>
SOP 7: Navigation on an image using Client side image Mapping in web page using html 5. ¬ 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/IrfanView/Pinta. Each shape should be mapped or navigate with a
different URL that should navigate to a local webpage.
<!DOCTYPE html>
<html>
<head>
<title>
Client Side Image Mapping
</title>
</head>
<body>
<h1 align="center">Client Side Image Mapping</h1>
<img src="D:\users\sample image.jpg" width="250"-usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="44,29,244,81" href="E:\XII SCI IT 2020-21\SOPWeb SOP7\pagel.html"
alt="Page1..html"><area shape="circ"SCI IT 2020-21\SOP
coords="380,271,60" href="E:\XII Web\SOP7\-page2.html" alt="Page2.html"> <area shape="poly"
coords="162,279,81,373,191,431,168,368,245,388" href="E:\XII" \XI SCI IT 2020-21\SOP Web\SOP7\ \
page3.html" alt="Page3.html">
</map>
</body>
</html>
