HTML
SOP 1 : Creation of website using HTML5
Create a website using HTML5 and CSS using any 4 CSS properties.
1) Write a code for 2 separate pages having different file names such as first page as Index.
html and second page 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
follows-
2) The index page must contain a heading which is highest among other text on pages and
must be at centre of the page.
3) 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.
4) 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.
[Link]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="author" content="Physical Tags">
<style>
h1{border-style:dotted}
p{color:red}
body{background-color:pink}
b{text-decoration:overline}
</style>
</head>
<body>
<h1 align="center">Tata Sons Private Limited</h1>
<p>66% of the equality share capital of tata sons is held by philanthropic trust,which support
education,health,livelihood and art and culture.</p>
<b>Governance Philosophy</b><br>
<i>Tata Code Of Condut</i><br>
<u>Tata Business Excellence Model</u><br>
<h3>Image Of Tata Industries</h3>
<img src="[Link]" width="200" height="250" alt="Tata Industries">
<a href="[Link]">Second Page</a>
</body>
<html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="author" content="form">
</head>
<body>
<h1 align="center">Enrollment Form</h1>
<form>
Enter Your Name:<input type="text" name="t1" required><br>
Enter Your Email Id:<input type="email" name="emailid"><br>
<input type="submit" value="submit">
</form>
<a href="[Link]">First Page</a>
</body>
</html>
Output-
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 displays tourist places
of any one of the city . Use Inline style sheet in the top section to display background color
for the text ‘Tourist places’.
Use internal style sheet for the left and right section with background color and font styles
[Link]
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
section{background-color:yellow;width:50%;height:50%;float:left;color:black;font-size:30px;}
aside{background-color:pink;width:50%;height:50%;float:right;color:black;font-size:30px;}
</style>
</head>
<body>
<header style="background-color:lightblue;color:deeppink;text-
align:center;height:30%;width:100%;font-size:50px">Tourist places
</header>
<header>
<section>
<b>City</b>
<ol>
<li>Pune</li>
<li>Delhi</li>
<li>Banglore</li>
<li>Hyderabad</li>
</ol>
</section>
<aside>
<p>Tourist places in Pune</p>
<ul>
<li>Shaniwarwada</li>
<li>Sinhgad</li>
<li>Kelkar Museum</li>
</ul>
</aside>
</header>
</body>
</html>
Output-
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 style sheet with relevant tags.
[Link]
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1 align="center">Traveller Information Form</h1>
<form>
Enter Traveller Name:<input type="text" name="t1"><br>
Enter Date of Travel:<input type="date" name="t2"><br>
Enter Telephone No:<input type="tel" name="t3" pattern="[0-9]{2}-[0-9]{10}"><br>
<input type="image" src="[Link]" alt="submit"><br>
<a href="[Link]">Next Page</a>
</form>
</body>
</html>
[Link]
body{backgraound-color:skyblue;color:black;}
[Link]
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1 align="center">Information about Transporter</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>
<a href="[Link]">Previous Page</a>
</body>
</html>
Output-
SOP 4 : Use of Audio on web pages using HTML5.
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]
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<h1 align="center">Single Audio with controls</h1>
<audio controls autoplay loop="-1">
<source src="test.mp3" type="audio/mpeg">
</audio>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<h1 align="center">Multiple Audio with controls</h1>
<h2>The text between the audio tags will only be displayed in browser 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="test.mp3" type="audio/mp3">
<source src="[Link]" type="audio/ogg">
<source src="[Link]" type="audio/wav">
Your browser does not support the audio element
</audio>
</body>
</html>
Output-
SOP 5 : Use of video on web pages using html5.
Create a webpage named [Link] 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).
[Link]
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<h1 align="center">Single video with controls</h1>
<video src="movie.mp4" width="150" height="150" loop="-1" autoplay>
</video>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<h1 align="center">Multiple video with controls</h1>
<h2>The text between the video tags will only be displayed in browser that do not support the
video element</h2>
<h3>List of video files formats</h3>
<ol>
<li>mp4-video/mpeg</li>
<li>ogg-video/ogg</li>
<li>webM-video/wabM</li>
</ol>
<video controls width="100" height="100" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
<source src="[Link]" type="video/wabM">
</video>
</body>
</html>
Output-
