Practical No.
1
SOP : 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
centre 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.
CODING :Company profile
Index.html
<!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:15px}
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 equity share capital of Tata Sons is held by philanthropic trusts
which supports education ,under the guifance and supervision of its
own Board of Director<p>
<b>Governence Philosophy<b><br><br>
<u> Tata Buisness excellence Model (TBEM)</u><br><br>
<img src="D:\tata image .png" width="250" height="250"><br><br>
<br>
<a href="second.html"> Second Page</a>
</body>
</html>
Second.html
<!doctype html>
<html>
<head>
<title>Form</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="f1">
Enter you name:<input type="text" name="t1" required><br><br>
Enter your e mail ID:<input type="email" name="email id"><br><br>
<input type="submit" name="submitbtn" value="submit">
<a href="C:\Users\Admin\Desktop\Index.html">First page</a>
</form>
</body>
</html>
**************OUTPUT************ Tata Company
Practical No.2
SOP : 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 stylesheet for the left and right section with background color and font
styles.
Tourist places
City Tourist places in Pune
1. Pune • Shanivarwada
2. Banglore • Kelkar Museum
3. Hyderabad • Sinhgad fort
4. Delhi
Coding:
<!doctype html>
<html>
<head>
<title> tourist places </title>
<style>
section{background-color:pink; width:50%; height:50%; float:right}
aside{width:50%;float:left}
ol{font-style:italic;font-size:15pt}
ul{font-style:italic;font-size:15pt}
</style>
</head>
<body>
<header style="background-color:skyblue;height:100pt">
<h1 align="center"> Tourist Place </h1>
</header>
<br>
<aside>
<h3>City</h3>
<ol>
<li> Pune</li>
<li> Banglore </li>
<li>Hyderabad </li>
<li>Delhi</li>
</ol>
</aside>
<section>
<h3> Tourist place in pune </h3>
<ul>
<li>Shanivarwada</li>
<li>Kelkar Museum </li>
<li>Sinhgad fort </li>
<li> Aga khan palace</li>
<ul>
</section>
</body>
</html>
***************OUTPUT****************
Practical No.3
SOP : 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
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 audio1.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).
Coding:
Single Audio File with controls
Audio1.html
<! DOCTYPE html>
<html>
<head>
<title> single Audio File with controls </title>
</head>
<body>
<h1 align="center"> single Audio File with controls </h1>
<audio controls autoplay loop=”-1”>
<source src ="C:\Users\admin\Desktop\poonam\program\audio_video\test.mp3"
type="audio/mp3">
</audio>
</body>
</html>
**************** Output *************
Multiple Audio File with controls : Audio2.html
<! DOCTYPE html>
<html>
<head>
<title> Multiple Audio File with controls </title>
</head>
<body>
<h1 align="center">Multiple Audio File with controls </h1>
<h2>The text betwee the audio tags will only be display
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 = “C:\Users\admin\Desktop\poonam\program\audio_video\test.wav"
type="audio/wav">
<source src ="C:\Users\admin\Desktop\poonam\program\audio_video\test.mp3"
type="audio/mp3">
<source src ="C:\Users\admin\Desktop\poonam\program\audio_video\test.ogg"
type="audio/ogg">
your browser does not support the audio element
</audio></body></html>
***************** OUTPUT ********************
Practical No.4
SOP : 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).
Coding : Multiple Video File on Web Page with controls
Video1.html
<head>
<title>Multiple Video File on Web Page with controls</title>
</head>
<body>
<h1 align="center">Mutiple Video File on Web page with controls</h1>
<h2> The text between the video tags will only be displayed in browsers
that do not support the video element </h2>
<h3>List of video files formats</h3>
<ol>
<li> webM-video/webM </li>
<li> mp4-video/mpeg </li>
<li> ogg-video/ogg </li>
</ol>
<video controls width="200" height="200" autoplay>
<source src ="C:\Users\admin\Desktop\poonam\program\audio_video\test.webm"
type ="video/webm">
<source src="C:\Users\admin\Desktop\poonam\program\audio_video\test.mp4"
type="video/mp4>
<source src="C:\Users\admin\Desktop\poonam\program\audio_video\test.ogg"
type="video/ogg">
</video>
</body>
</html>
******************* OUTPUT **************
Single Video File without controls
<html>
<head>
<title> Single Video File on Web Page without controls</title>
</head>
<body>
<h1 align="center"> Single Video File on Web Page without controls </h1>
<video width="200" height="200" >
<source src ="C:\Users\admin\Desktop\poonam\program\audio_video\test.webm"
type ="video/webm">
</video>
</body>
</html>
*********************** OUTPUT ******************************
Practical No.5
SOP : 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 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.
Coding:
Image mapping
<!doctype html>
<html>
<head>
<title>image mapping</title>
</head>
<body>
<h1 align="center"> Client side image mapping </h1>
<img src="C:\Users\admin\Pictures\sample picture\Tulips.jpg" alt="image"
usemap="#test">
<map name="test">
<area shape="rect" coords="44,29,244,81" alt="page1" href="page1.html">
<area shape="circle" coords="380,271,50" alt="page 2" href="page2.html">
<area shape="poly" coords="162,279,81,373,191,431,168,368,245,388" alt="page 3"
href="page3.html">
</map>
</body>
</html>
Page1.html
<html>
<head>
<title>page 1</title>
</head>
<body>
<p> this is page 1</p>
</body>
</html>
Page2.html
<html>
<head>
<title>page 2</title>
</head>
<body>
<p> this is page
2</p>
</body>
</html>
<html>
Page3.html
<head>
<title>page 3</title>
</head>
<body>
<p> this is page
3</p>
</body>
</html>
*******Output******
