Scribd
Upload
106 views16 pages

SOP1 HTML

Uploaded by

Etteka Dhalait
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
106 views16 pages

SOP1 HTML

Uploaded by

Etteka Dhalait
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/ 16

SOP1: Advanced Web Designing

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 the first page as in- dex.html, 2nd page as page2.html
as form.html. Use any theme such as college profile or company profile etc. Every page must
contain proper Meta information and design webpage as follows-

The index page must contain a heading which is highest among other text on pages and must be
at the center of the page. There must be a paragraph which introduces general information about
the theme chosen and 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.

The 2nd page must contain the feedback or enrollment form related to the theme chosen with a
feature of html5. The form must contain a text element and email address of the company or
person .Include the submit button.

Program: index.html

<html>
<head>
<title>College Profile</title>
<style>
Body
{
background-color:powderblue;
}
h1
{
color:blue;
text-align:center;
text-decoration:underline;
}
p
{
font-weight:bold;
color:black;
font-style:100;
}
</style>
</head>
<body>
<h1><b>Azam Campus</b></h1>
<p><font size="6">
<i>
The Mission of M.C.E. Society’s / President is to be a global, socially conscious Center of
Excellence in the conservation, creation, Advancement and dissemination of knowledge,
equipped to take up challenges of the enormous change taking place all around and committed
to empower its faculty and students to contribute meaningfully to economic, technological and
social development and progress
</i></font>
</p><br><br>
<center><img src="1.jpg" height="250" width="550" border="3" alt="College
Building"><br><br>
<h3><a href="page2.html">Click here to fill Form</a></h3></center>
</body>
</html>

Page2.html

<html>
<head><title>college profile 2</title>
<style>
Body
{background-color:powderblue;
}
h1
{
color:blue;
text-align:center;
text-decoration:underline;
}
</style>
</head>
<body>
<h1><b>Azam Campus</b></h1>
<form>
<h2 align=center>Enrollment Form</h2>
Name<input type="text"><br><br>
Email<input type="email"><br><br>
<input type="Submit" value="Submit">
</form>
<center><h3><a href="page.html">Home page</a></h3></center>
</body>
</html>

Question. 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 a
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 style sheet for the left and right section with background colors and font styles.

Program : tourist.html

<html>
<head>
<title>TOURIST PLACES</title>
<style>
header
{
background-color:skyblue;
height:25%;
width:99%;
border:3px solid;
}
section
{
background-color:yellow;
height:65%;
width:49.5%;
float:left;
border:3px solid;
}
aside
{
background-color:pink;
height:65%;
width:49%;
float:left;
border:3px solid;
}

</style>
</head>
<body>
<header>
<h1 style="text-align:center;color:deeppink;font-size:35px">
Tourist Places
</h1>
</header>
<section>
<h2>
City
<ol>
<li>Pune
<li>Bangalore
<li>Hyderabad
<li>Delhi</ol>
</h2>
</section>
<aside>
<h2>
Tourist Places in pune
<ul>
<li>Shaniwarwada</li>
<li>Kelkar Museum</li>
<li>Singhad Fort</li>
</ul>
</h2>
</aside>
</body>
</html>

Output:-
SOP Question. 3

The first webpage will accept the name of the traveler, 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

Seat no: B39

Destination: Delhi

Program:

Traveller.htm

<html>
<head>
<title>TOUR & TRAVELS</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1><b>TOURS & TRAVELS </b></h1>
<h2>Fill the following form </h2><br>
<form>
Name of the traveller<input type="text" required maxlength="20" size="50">
<br><br>
Date of travel <input type="date"> <br><br>
Telephone number <input type="tel" pattern='[0-9]{10}'> <br><br>
</form>
<input type="image" name="Submit" src="C:\Users\Admin\Desktop\submit-button-shows-
submitting-submission-application-38142019.webp" height="200" width="200"
onclick="window.location='trav.html';">
</body>
</html>
trav.html
<html>
<head>
<title>TOUR & TRAVELS</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>
<b>Tours & Travels</b>
</h1>
<h4>
<ul>
<li>Name of transporter - Air Asia
<li>Time - 9:30 am
<li>Seat No - B39
<li>Destination - Delhi
</ul></h4>
<input type="submit"name="submit" value="Back" onclick="history.back();">
</body> </html>
Output of first page:

Output of second page:-


SOP Question. 5
Create a web page named audio.html to set an audio file in web page with control such that it
use HTML5

elements. The audio file must play as soon as the web page load in browser and it will start over
again every time when it is completed.

Create another web page named audio one.html with provides multiple source file formats for
the same audio file that please 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 format (like wav,mp3 or oggi etc).

Program:

<!DOCTYPE html>
<html>
<head>
<title>Audio</title>
<body>
<h1>Audio with Control</h1>
<audio controls>
<source src="horse.ogv" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Output:

Audio1.html

<!DOCTYPE html>
<html>
<head>
<title>Audio</title>
<body>
<h1>Multiple Audio with 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>
<source src="horse.ogv" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</body>
</html>
Output:
SOP 6 Question:

Create a web page named video.html to display a video file in the web page and play
automatically. The dimensions of video area should be 150* 150* pixels.

Create another web page which provides multiple source file format for the same video file that
plays a video with controls. The dimensions of video area should be 300* 300* pixels. The code
must incorporate the list of video file formats (like webM,MP4 or ogg.etc).

Program: (video.html)

<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<h1 align="centre">Video file on web page with controls</h1>
<video width="150" height="150" controls autoplay loop>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Output:
With control:

<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<h1 align="centre">Video file on web page with controls</h1>
<h3>List of sound files format</h3>
<ol>
<li>mp3-video/mp3</li>
<li>ogg-video/ogg</li>
<li>WebM-video/WebM</li>
</ol>
<video width="300" height="300" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Output:
SOP 8 Question:

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 coordinates making use of Ms-Paint/GIMP/IrfanView/Pinta. Each shape should
be mapped or navigated with a different URL, one of the clickable areas should navigate to a
local webpage.

Program:

<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more
about the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.html">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>
Output:

You might also like