Scribd
Upload
41 views27 pages

Practicals

The document outlines a series of practical exercises involving HTML, CSS, and JavaScript for creating web pages with various functionalities. It includes tasks such as designing a tourist information webpage, implementing audio and video elements, creating image maps, and developing interactive JavaScript programs for temperature conversion and grade calculation. Each practical exercise provides code examples and requirements for web development skills.

Uploaded by

jogibhupendra88
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
41 views27 pages

Practicals

The document outlines a series of practical exercises involving HTML, CSS, and JavaScript for creating web pages with various functionalities. It includes tasks such as designing a tourist information webpage, implementing audio and video elements, creating image maps, and developing interactive JavaScript programs for temperature conversion and grade calculation. Each practical exercise provides code examples and requirements for web development skills.

Uploaded by

jogibhupendra88
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/ 27

PRACTICAL NO:01

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.

<!DOCTYPE html>
<html>
<head>
<title>
Tourist Places
</title>
<style>
section{background-color:pink;width:50%;height:50%;float:right}
aside{background-color:yellow;height:50%;width:50%;float:left}
ol{font-style:italic;font-size:15pt}
ul{font-weight:bold;font-size:20pt}
</style>
</head>
<body>
<header style="background-color:skyblue;height:150pt">
<h1 align="center">Tourists Places</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 places 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 :02

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 stylesheet with relevant tags.
A)FORM.html
<html>
<head>
<title>
Information Form
</title>
<link rel="stylesheet" type="text/css" href="ext.css">
</head>
<body>
<h1 align="center">Traveller Information Form</h1>
<form name="f1">
Enter Your Name
<input type="text" name="name" autocomplete><br><br>
Select Date of Travel
<input type="date" name="trvdate"><br><br>
Enter Telphone Number
<input type="tel" name="phone" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-
9]{4}" required><br><br>
<input type="submit" name="submit" value="submit">
</form>
<br><br>
<a href="file:///C:/Users/Admin/Downloads/second.html">Second page
<img src="C:\Users\Admin\Pictures\42977465._SX318_.jpg" width="150" height="150">
</a>
</body>
</html>
Output:
b)SECOND.html
<html>
<head>
<title>
Information About Transport
</title>
<link rel="stylesheet" type="text/css" href="ext.css">
</head>
<body>
<h1 align="center">Information about Transport</h1>
<ul>
<li>Name of Transort</li>
<li>Time-09.30</li>
<li>Seat no-B39</li>
<li>Destination-Delhi</li>
</ul>
<a href="file:///C:/Users/Admin/Downloads/form.html">Connect to First Page</a>
</body>
</html>
3)ext.css
h1{background-color:green;border-style:double}
body{background-color:lightgreen}
ul{font-family:algerian}
PRACTICAL NO: 03
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).
1)Single audio
<!DOCTYPE html>
<html>
<head>
<title>
Single audio file format
</title>
</head>
<body>
<h1 align="center">Single audio file with controls</h1>
<audio controls autoplay loop="-1" >
<source src="C:\Users\Admin\Music\file_example_MP3_700KB.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Output:
2)Multiple Audio
<!DOCTYPE html>
<html>
<head>
<title>
multiple audio files format
</title>
</head>
<body>
<h1 align="center">Multiple audio file with controls</h1>
<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 format</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\Music\file_example_MP3_700KB.mp3" type="audio/mpeg">
<source src="C:\Users\Admin\Music\ogg audio file.ogg" type="audio/ogg">
<source src="C:\Users\Admin\Music\wav audio file.wav" type="audio/wav">
your browser does not support the audio element
</audio>
</body>
</html>
Output:
PRACTICAL NO: 04
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).
A)) Single Video
<!DOCTYPE html>
<html>
<head>
<title>
Single Video with controls
</title>
</head>
<body>
<h1 align="center">Single Video With Controls</h1>
<video controls width="500" height="500" autoplay>
<source src="C:\Users\admin\Videos\ogg video file.ogg" type="video/ogg">
</video>
</body>
</html>

OUTPUT:
B))Multiple Videos
<!DOCTYPE html>
<html>
<head>
<title>
Multiple Video Files on Webpage with controls
</title>
</head>
<body>
<h1 align="center">Multiple Video Files on Webpage 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>Lists of Video Files Format</h3>
<ol>
<li>mp4-video/mpeg</li>
<li>ogg-video/ogg</li>
<li>webm-video</li>
</ol>
<video controls width="500" height="500" autoplay>
<source src="C:\Users\admin\Videos\file_example_MP4_480_1_5MG.mp4"
type="video/mpeg">
<source src="C:\Users\admin\Music\ogg video file.ogg" type="video/ogg">
<source src="C:\Users\admin\Videos\file_example_WEBM_640_1_4MB.webm"
type="video/webm">
Your Browser does not support the video element.
</video>
</body>
</html>

OUTPUT:
PRACTICAL NO: 05
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.
<!DOCTYPE html>
<html>
<head>
<title>
Client side Image mapping
</title>
</head>
<body>
<h1 align="center">Client Side Image Mapping </h1>
<img src="C:\Users\admin\Pictures\butterfly.jpg" width="600" height="600"
usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="44,29,244,81" href="https://www.mahahsscboard.in/"
alt="Maharashtra Board">
<area shape="circ" coords="380,271,60" href="file:///C:/Users/admin/Pictures/flower.webp"
alt="Image">
<area shape="poly" coords="162,279,81,373,191,431,168,368,245,388" href="https://mu.ac.in/"
alt="Mumbai University">
</map>
</body>
</html>

Output:
PRACTICAL NO: 06
Create a web page in HTML having a white background and two Button Objects. Write code using JavaScript such
that when the mouse is placed over the first button object without clicking, the color of the background of the
page should change after every __ seconds. There should at least be 7 different and visibly distinct background
colors excluding the default color. When the second button object is clicked, appropriate message should be
displayed in Browsers status bar.
Create another web page using JavaScript where the background color changes automatically after every ___
seconds. This event must be triggered automatically after the page gets loaded in the browser. There should at
least be 7 different and visibly distinct background colors. When the page is unloaded, the appropriate alert
message should be displayed
1)onClick.html
<html>
<head>
<title>
Background Colours
</title>
</head>
<body>
<h1 align="Center">7 Different & Visibility distinct background Colors</h1>
<form name="frm1">
<center>
<input type="button" name="btncolor" value="change colors" onMouseOver="f1()">
<input type="button" name="btncolor" value="Message Display" onClick="msg()">
</form>
</body>
<script type="text/javascript">
function f1()
{
document.bgColor="red";
window.setTimeout("f2()",1500);
}
function f2()
{
document.bgColor="green";
window.setTimeout("f3()",1500);
}
function f3()
{
document.bgColor="pink";
window.setTimeout("f4()",1500);
}
function f4()
{
document.bgColor="orange";
window.setTimeout("f5()",1500);
}
function f5()
{
document.bgColor="skyblue";
window.setTimeout("f6()",1500);
}
function f6()
{
document.bgColor="violet";
window.setTimeout("f7()",1500);
}
function f7()
{
document.bgColor="aqua";
window.setTimeout("f1()",1500);
}
function msg()
{
window.status="Display of 7 Different Colors";
}
</script>
</html>
Output:
2)onLoad.html
<!DOCTYPE html>
<html>
<head>
<title>
background colors
</title>
</head>
<body onLoad="f1()" onUnload="msg()">
<h1 align="center">7 Different & Visibility distinct background Colours</h1>
</body>
<script type="text/javascript">
function f1()
{
document.bgColor="red";
window.setTimeout("f2()",1500);
}
function f2()
{
document.bgColor="green";
window.setTimeout("f3()",1500);
}
function f3()
{
document.bgColor="pink";
window.setTimeout("f4()",1500);
}
function f4()
{
document.bgColor="orange";
window.setTimeout("f5()",1500);
}
function f5()
{
document.bgColor="skyblue";
window.setTimeout("f6()",1500);
}
function f6()
{
document.bgColor="violet";
window.setTimeout("f7()",1500);
}
function f7()
{
document.bgColor="aqua";
window.setTimeout("f1()",1500);
}
function msg()
{
alert("Display of 7 Different Colors");
}
</script>
</html>
Output:
PRACTICAL NO: 07
Create event driven JavaScript program for the following. Make use of appropriate variables,
JavaScript inbuilt string functions and control structures.
To accept string from user and count number of vowels in the given string.
<!DOCTYPE html>
<html>
<head>
<title>
Accept any string from the user and count and display the number of vowels
</title>
</head>
<body>
<script type="text/javascript">
var str,i,ch,count=0;
str=prompt("Enter the String Value");
for(i=0;i<=str.length;i++)
{
ch=str.charAt(i);
if(ch=='A'||ch=='a'||ch=='E'||ch=='e'||ch=='I'||ch=='i'||ch=='O'||ch=='o'||ch=='U'||ch=='u')
count=count+1;
}
document.write("Number of occurence of vowels in given string are="+count);
</script>
</body>
</html>
Output:
PRACTICAL NO: 08
Create event driven JavaScript program to convert temperature to and from Celsius, Fahrenheit.
Formula: c/5= (f-32)/9
[where c=Temperature in Celsius and f=Temperature in Fahrenheit.]
Output format : 40 Celsius=104 Fahrenheit
45 Fahrenheit = 7.22222222 Celsius
<!DOCTYPE html>
<html>
<head>
<title>
Celsius
</title>
</head>
<body>
<h2>Javascript Celsius to Fahrenhiet</h2>
<p>Insert a number into one of the Input Field</p>
<p><input type="text" id="c" onkeyup="convert('C')">Degree celsius</p>
<p><input type="text" id="f" onkeyup="convert('F')">Degree Fahrenhiet</p>
<p>Note that the <b>Math.round()</b> method is used,so that the result will be return as an
integer.</p>
<script type="text/javascript">
function convert(degree)
{
var x;
if(degree=="C")
{
x=document.getElementById("c").value*9/5+32;
document.getElementById("f").value=Math.round(x);
}
else
{
x=document.getElementById("f").value*5/9-32*5/9;
document.getElementById("c").value=Math.round(x);
}
}
</script>
</body>
</html>
Output:
PRACTICAL NO: 09

Create event driven JavaScript program to convert temperature to and from Celsius, Fahrenheit.
Formula: c/5= (f-32)/9
[where c=Temperature in Celsius and f=Temperature in Fahrenheit.]
Output format : 40 Celsius=104 Fahrenheit
45 Fahrenheit = 7.22222222 Celsius
Range Grade
35 to 60 F
61 to 70 D
71 to 80 C
81 to 90 B
91 to 100 A

<!DOCTYPE html>
<html>
<head>
<title>
Average Marks of Student
</title>
</head>
<body>
<h1 align="center">Average marks of Student</h1>
<form name="frm1">
Enter Marks of English:
<input type="number" name="t1"><br><br>
Enter Marks of Maths:
<input type="number" name="t2"><br><br>
Enter Marks of Physics:
<input type="number" name="t3"><br><br>
Enter Marks of chemistry:
<input type="number" name="t4"><br><br>
Enter Marks of IT:
<input type="number" name="t5"><br><br>
Enter Marks Biology:
<input type="number" name="t6"><br><br>
<input type="button" name="btnclick" value="print grade" onClick="grade()">
</form>
</body>
<script type="text/javascript">
function grade()
{
var m1,m2,m3,m4,m5,m6,avg;
m1=parseInt(frm1.t1.value);
m2=parseInt(frm1.t2.value);
m3=parseInt(frm1.t3.value);
m4=parseInt(frm1.t4.value);
m5=parseInt(frm1.t5.value);
m6=parseInt(frm1.t6.value);
avg=(m1+m2+m3+m4+m5+m6)/6;
alert("Average Marks of Students is"+avg);
if(avg>=91 && avg<=100)
{
grade = 'A';
}
else if(avg>=81 && avg<=90)
{
grade = 'B';
}
else if(avg>=71 && avg<=80)
{
grade = 'C';
}
else if(avg>=61 && avg<=70)
{
grade = 'D';
}
else if (avg>=35 && avg<=60)
{
grade = 'F';
}
alert ("Grade of the student is: "+ grade);
}
</script>
</html>
Output:

You might also like