Journal Programs Journal Programs Journal Programs

Practical No -01
SOP 1.1
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 index.html
and the second page as page2.html. Use any theme such as a 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 and must have at least 3
physical style tags and one image with alternate text. This page must be connected
to another page with proper navigational links.
2) The 2nd page must contain the feedback or enrollment form related to the theme
chosen with features of HTML5. The form must contain a text element and the email
address of the company or person. Include the submit button.

Requirement of 1st page Tags used in the program
Heading should be highest <h1>PACE Junior Science College</h1>
Heading should be at center of the page
Should 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.
<style>
h1{background-color:lime;text-align:center;}
h6{text-align:center}
p{font-size:20}
body{background-color:yellow;}
</style>
<img src="C:UsersAnnPicturespace.jpg "
alt="college" height="150" width="200">
This page must be connected to another pages with
proper navigational links.
<a href="page2.html">Click here to go Second page
for Student Enrollment</a>

<!DOCTYPE html>
<html>
<head>
<title>College Website</title>
<style>
h1{background-color:lime;text-align:center;}
h6{text-align:center}
p{font-size:20}
body{background-color:yellow;}
</style>
<meta name="description" content="College Website">
</head>
<body>
<h1> PACE Junior Science College</h1>
<p> Four years ago,<i> IIT-ian's Pace</i> introduced the unique concept of integrated learning for
Competitive Exams,Board Exams through partnerships with the most reputed schools and colleges across
Mumbai. In 2009, the<u> Government of Maharashtra </u>entrusted IIT<sub>ian's</sub>
Pace with the responsibility to manage two Junior Science colleges in collaboration with
the<b>MCGM.</b></p> <br>
<img src="C:UsersAnnPicturespace.jpg " alt="college" height="150" width="200"><br>
<a href="page2.html">Click here to go Second page for Student Enrollment</a>
</body></html>

Requirement of 2nd page Tags used in the program
The 2nd page must contain the feedback or
enrollment 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.
<form name="f1">
//We have chosen Student Enrollment Form as our
theme.
/*We have included :
name,
age, address,
email address,
contact number
Gender
and a submit button
in our form.*/
</form>

<!DOCTYPE html>
<html>
<head>
<title>second page</title>
<meta name="author" content="pace">
<style>
body{background-color:pink}
h1{text-align:center;font-family:cambria;text-decoration:underline}
h3{color:green}
</style>
</head>

<body>
<h1 align="center">Student Enrollment Form</h1>
<form name="f1">
<h3>
Enter your Name:<input type="text" name="n1" required><br>
Enter your Age:<input type="number" name="a1"><br>
Enter your Address:<textarea name="ta" placeholder="home address">
</textarea><br><br>
Enter your E-mail Id:<input type="email" name="e1"><br>
Contact Number:<input type="tel" name="tele" pattern=”[0-9]{2}-[0-9]{10}”><br>
Gender:
<input type="radio" name="g1" value=”m”> male
<input type="radio" name="g1" value=”f” >female <br>
<input type="submit" value="Submit" >
</h3>
</form>
Click on the picture below to go to First Page:<br>
<a href="C:UsersAnnDesktopindex.html">
<img src="C:UsersAnnPictureswatersplash.jpg" alt="college"
border="5" width="80" height="100"></a><br>
</body>
</html>

Practical No - 02
• The top section will display the heading, “ Tourist places”
in the header. The section on the left has a list of cities.
• The right-hand side displays tourist places in any one of
the cities.
• Use the Inline style sheet in the top section to display the
background color for the text “Tourist places”.
• Use an internal style sheet for the left-right section with
background color and font styles.

Requirement of the page Tags used in the program
The top section will display the heading,
“ Tourist places”
in the header.
Use the Inline style sheet in the top section to
display the background color for the text “Tourist
places”.
<header style="background-color:lightblue;
width:100%;font-weight:900;
fontsize:35px;color:DeepPink;
text-align:center">
Tourist places
</header>
The section on the left has a list of cities.
The right-hand side displays tourist places in any
one of the cities.
Use an internal style sheet for the left-right section
with background color and font styles.
<style>
section {float: left; width:50%;
background-color: yellow}
aside {float: right; width:50%;
background-color: pink}
ol{font-style:normal;font-size:20px}
ul{font-style:normal;font-size:20px}
</style>

The section on the left has a list of cities.
<section>
<h3>City</h3>
<ol>
<li>Pune</li>
<li>Banglore</li>
<li>Hydreabad</li>
<li>Delhi</li>
</ol>
</section>
The right-hand side displays tourist places in
any
one of the cities.
<aside>
<h3>Tourist places in Pune</h3>
<ul>
<li>Shanivarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad fort</li>
</ul>
</aside>

<!DOCTYPE html>
<html>
<head><title>tourist places</title>
<style>
section {float: left; width:50%; background-color: yellow}
aside {float: right; width:50%; background-color: pink}
ol{font-style:normal;font-size:20px}
ul{font-style:normal;font-size:20px}
</style> </head>
<body>
<header style="background-color:lightblue;width:100%;font-weight:900;fontsize:35px;color:DeepPink;text-align:center">
Tourist places
</header>
<section>
<h3>City</h3>
<ol>
<li>Pune</li>
<li>Banglore</li>
<li>Hydreabad</li>
<li>Delhi</li>
</ol>
</section>

<aside>
<h3>Tourist places in Pune</h3>
<ul>
<li>Shanivarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad fort</li>
<br>
</ul>
</aside>
</body>
</html>

Practical No - 03
1. Create a website using HTML & CSS code to design webpage as
follows :-
The first webpage will accept the
name of the traveller,
date of travel,
telephone number.
It also has a submit button as an image.
2. 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

The first webpage will accept the
name of the traveller,
date of travel,
telephone number.
It also has a submit button as an
image.
<p>
Enter the name of the traveller:
<input type="text" value="enter full name"
name="t1"><br><br>
Enter date of travel:
<input type="date" name="d1"><br><br>
Enter telephone number:
<input type="tel" name="phone"><br><br>
<input type="image" src="C:UsersAnnPicturessubmit.png"
width="70“ height="70" alt="submit"><br>
</p>

traveller.html
<!DOCTYPE html>
<html>
<head><title>webpage 1</title>
<link type="text/css" rel="stylesheet" href="one.css">
</head>
<body bgcolor="silver">
<form name="f1">
<h1>Traveller's Details</h1>
<p>
Enter name of the traveller:
<input type="text" value="enter full name" name="t1"><br><br>
Enter date of travel:<input type="date" name="d1"><br><br>
Enter telephone number:<input type="tel" name="phone"><br><br>
<input type="image" src="C:UsersAnnPicturessubmit.png" width="70“ height="70"
alt="submit"><br>
</p><br>
click on flight details:
<a href="C:UsersAnnDesktopsop1transporter.html">Flight Details</a>
</form>
</body>
</html>

2. The second webpage has information
about
• the name of transporter,
• time,
• seat no and
• destination displayed one below the other in
the form of an unordered list as
Name of transporter-Air Asia
Time-09.30 am
Seat no-B39
Destination-Delhi.
<body bgcolor="lime" >
<h1>Transporter's Details</h1>
<ul>
<li>Name of Transpoter- Air Asia</li>
<li>Time-09.30am</li>
<li>Seat No-B39</li>
<li>Destination-Delhi</li>
</ul>
<br>
Click on travellers details:
<a href="C:UsersAnnDesktopsop1traveller.html">
Traveller's Details</a>
</body>

transporter.html
<!DOCTYPE html>
<html>
<head><title>web page creation</title>
<link type="text/css" rel="stylesheet" href="one.css">
</head>
<body bgcolor="lime" >
<h1>Transporter's Details</h1>
<ul>
<li>Name of Transpoter- Air Asia</li>
<li>Time-09.30am</li>
<li>Seat No-B39</li>
<li>Destination-Delhi</li>
</ul>
<br>click on travellers details:
<a href="C:UsersAnnDesktopsop1traveller.html">Traveller's Details</a>
</body></html>

Both pages should be interlinked .create
external stylesheet with relevant tags.
one.css
h1{text-align:center;color:blue;background-
color:pink}
p{color:blue;text-align:center;}
a{border:dashed;}

Practical No – 04
SOP 4: A
Create a web page named audio.html to set an audio file in
the web page with controls such that it uses HTML5
elements.
The audio file must play as soon as the webpage loads in
the browser and will start over again every time it is
completed.
 AIM:
• To create an audio file with controls that plays ,as soon as
the webpage loads and start over again, every time when it

<!doctype html>
<html>
<head>
<title>audio with controls</title>
</head>
<body>
<h1 align="center">audio with controls</h1>
<audio controls autoplay loop>
<source src="d:hpdesktopsymphony.mp3“
type="audio/mp3">
</audio>
</body>
</html>

Practical No – 04
SOP 4: B
Create another webpage named audio1.html
which provides multiple source file formats for the
same audio file that plays a sound with controls.
The code must incorporate the list of sound file
formats (like wav, mp3 or ogg etc).

<!DOCTYPE html>
<html><head><title> Multiple Audio Files with Controls
</title></head>
<body>
<h1 align="center">Multiple Audio Files with Controls</h1>
<h3>List of audio files formats</h3>
<ol>
<li>mp3-audio/mp3</li>
<li>ogg-audio/ogg</li>
<li>wav-audio/wav</li>
<li>aac-audio/aac</li>
</ol>
<audio controls >
<source src="D:HPDesktop rocks.mp3" type="audio/mp3">
<source src="D:HPDesktopsample audio filesrocks.ogg"
type="audio/ogg">
<source src="D:HPDesktopsample audio files rocks.wav"
type="audio/wav">

Practical No – 05
SOP 5: A
USE OF VIDEO ON WEB PAGES USING HTML 5
• Create a web page named video.html to display a video file on the web
page and plays automatically.
• The dimension of the video area should be 150*150 pixels.

CODING:
<!DOCTYPE html>
<html><head>
<title> Play video file automatically </title>
</head>
<body>
<h1> Play video file automatically </h1>
<video src=" C:UsersVideosCaptureshumans.mp4“ type="video/mp4"
width="150" height="150" autoplay>
</video>
</body>
</html>

Practical No – 05
SOP 5: B
• Create another web page which provides multiple source file
formats for the same video that plays a video with controls.
• The dimension of the video area should be 300*300 pixels.
• The code must incorporate the list of video files format
like:
webM,
MP4,
ogg.

<!DOCTYPE html>
<html><head><title>Video file with controls</title></head>
<body >
<h3>List of video files formats</h3>
<ol>
<li>mp4</li>
<li>ogg</li>
<li>webm</li>
</ol>
<h1> Video file with multiple source file formats that plays a video with controls</h1>
<video controls width="300" height="300" >
<source src="C:UsersAnnVideosCaptureshumans.mp4" type="video/mp4">
<source src=" C:UsersAnnVideosCaptureshumans.ogg" type="video/ogg">
<source src="C:UsersAnnVideosCaptureshumans .webm" type="video/webm">
</video>
</body></html>

Practical No – 06
• Create a webpage named imagemap.html with an inserted image having a .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/Irfan View/Pinta.
• Each shape should be mapped or navigated with a different URL, one of the clickable area
should navigate to a local webpage.

<!DOCTYPE HTML>
<html><head> <title> Image Mapping </title> </head>
<body>
<img src="C:UsersPC 32Picturesbridge.jpg" usemap="#test">
<map name="test">
<area shape="rect" coords="115,67,322,156" href="homepage.html">
<area shape="circle" coords="616,240,80" href="https://www.google.com">
<area shape="poly" coords="749,61,753,249,960,254" href="https://www. mu.ac.in">
</map>
</body>
</html>

homepage.html
<!DOCTYPE HTML>
<html><head> <title> Homepage</title> </head>
<body bgcolor="pink">
<h1> welcome to homepage</h1>
</body>
</html>

Journal Programs Journal Programs Journal Programs

Journal Programs Journal Programs Journal Programs

Recommended

Recommended

More Related Content

Similar to Journal Programs Journal Programs Journal Programs

Similar to Journal Programs Journal Programs Journal Programs (20)

Recently uploaded

Recently uploaded (20)

Journal Programs Journal Programs Journal Programs