Scribd
Upload
11 views13 pages

Comp Journal 1

The document outlines a series of practical exercises for advanced web designing using HTML5 and CSS, aimed at students in grade XII. Each practical includes the creation of different web pages, such as a college profile, feedback form, tourist places, and audio/video embedding. Additionally, it covers client-side image mapping techniques for navigation on web pages.

Uploaded by

alsobignyaapadhee
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
11 views13 pages

Comp Journal 1

The document outlines a series of practical exercises for advanced web designing using HTML5 and CSS, aimed at students in grade XII. Each practical includes the creation of different web pages, such as a college profile, feedback form, tourist places, and audio/video embedding. Additionally, it covers client-side image mapping techniques for navigation on web pages.

Uploaded by

alsobignyaapadhee
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/ 13

INFORMATION TECHNOLOGY- SKILL ORINTED PRACTICALS (SOP) STD : XII

ADVANCED WEB DESIGNING


PRACTICAL NO : 1
AIM : CREATION OF WEBSITE USING HTML5
index.html

<!doctype HTML>
<html>
<head>
<title>College Profile
</title>

<meta name="keywords" content="idubs,college,teachers,students">


<meta name="description" content="A college website which have information related to students ,
teachers and data">
<meta charset="utf-8">

<style>
body{background-color:pink}
h1{border-style:dotted;border-color:red}
p{margin-left:50px;font-size:20px}
b{color:red}
i{color:blue}
u{color:green}
</style>

</head>
<body>
<h1 align="center">IDUBS JR College of commerce and science</h1>
<p>
<b>The I.D.U.B.S. junior College was started in 1975. </b>
<br><br>
<i>It can be proudly as curtained that ours was the First Institution to manage
Higher Secondary School in Bhandup. </i>
<br><br>
<u> The college is attached to the Hindi medium School and recognized and aided by the
Government of Maharashtra.</u>
</p>
<br>

<img src="school.jpg" alt="college profile" border="2"height="200" width="200">


<br>

<nav>
<a href="page2.html">FEEDBACK FORM</a>
</nav>

</body>
</html>
page2.html

<!DOCTYPE html>
<html>
<head>
<title>feedback form</title>

<meta name="keywords" content="idubs,college,teachers,students">


<meta name="description" content="A college website which have information related to students
,teachers and data">
<meta charset="utf-8">

<style>
body{background-color:yellow}
h1{border-style:dashed;border-color:red}
</style>

</head>
<body>
<h1 align="center">FEEDBACK FORM</h1>

<form name="f1">
Enter your name:<input type="text" name="t1" required>
<br><br>
Enter your email address:<input type="email" name="e1">
<br><br>
enter your feedback:<textarea rows="5" cols="10"></textarea>
<br><br>
<input type="submit" name="b1" value="submit">
</form>

<nav>
<a href="index.html">GO TO HOME PAGE</a>
</nav>

</body>
</html>
PRACTICAL NO : 2
AIM : CREATION OF WEBSITE USING HTML AND CSS CODE TO DESIGN A WEBPAGE

page1.html

<!DOCTYPE html>
<html>
<head>
<title> Tourist places</title>

<style>
aside{background-color:yellow;float:left;width:50%;height:50%}
section{background-color:pink;float:right;width:50%;height:50%}
ol{font-style:italic;font-size:20px}
ul{font-weight:bold;font-size:20px}
</style>

</head>
<body>

<header style="background-color:skyblue;height:100px">
<h1 align="center">Tourist places</h1>
</header>

<aside>
<h3>City</h3>
<ol>
<li>Pune</li>
<li>Banglore</li>
<li>Hydrabad</li>
<li>Delhi</li>
</ol>
</aside>

<section>
<h3>Tourist Places in Pune</h3>
<ul>
<li>Shanirvarwada</li>
<li>Kelkar Museum</li>
<li>Singhgad fort</li>
</ul>
</section>

</body>
</html>
PRACTICAL NO : 3

AIM : CREATE A WEBSITE USING HTML AND CSS CODE TO DESIGN WEBPAGES

page1.html

<!DOCTYPE html>
<html>
<head>
<title>first page</title>

<link rel="stylesheet" type="text/css" href="external.css">

</head>
<body>
<h1 align="center">Traveller Information</h1>

<form name="f1" action="page2.html">


Name of the Traveller:
<input type="text" name="t1">
<br><br>
Date of the travel:
<input type="date" name="d1">
<br><br>
Mobile No:<input type="tel" name="n1" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-
9]{4}" required>
<br><br>
<input type="image" src="submit.png" height="150" width="150">
</form>

</body>
</html>
page2.html

<!DOCTYPE html>
<html>
<head>
<title>information about transpoter</title>

<link rel="stylesheet" type="text/css" href="external.css">

</head>
<body>
<h1 align="center">Transporter Information</h1>

<ul>
<li>Name of the transpoter :Air Asia</li>
<li>Time :10.00 am</li>
<li>Seat No : B39</li>
<li>Destination : Delhi</li>
</ul>

<a href="page1.html"> go to first page</a>


</body>
</html>
PRACTICAL NO : 4
AIM : USE OF AUDIO ON WEBPAGES USING HTML5
audio.html

<!DOCTYPE html>
<html>
<head>
<title>Single Audio with controls </title>
</head>
<body>
<h1 align="center">Audio file(single source) with controls</h1>

<audio autoplay controls loop="-1">


<source src="aashayein.mp3" type="audio/mpeg">
</audio>

</body>
</html>

Audio1.html
<!DOCTYPE html>
<html>
<head>
<title>Multiple Audio with controls</title>
</head>
<body>

<h1 align="center">Multiple Audio 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> Lists of sound file formats</h3>


<ol>
<li> mp3- audio/mpeg</li>
<li>ogg-audio/ogg</li>
<li>wav-audio/wav</li>
</ol>

<audio autoplay controls>


<source src="aashayein.mp3" type="audio/mpeg">
<source src="lakshya.mp3" type="audio/mpeg">
<h4>your browser doesnot support the audio element</h4>
</audio>

</body>
</html>
PRACTICAL NO : 5
AIM : USE OF VIDEO ON WEBPAGES USING HTML5

video.html

<!DOCTYPE html>
<html>
<head>
<title>Single Audio with controls </title>
</head>
<body>
<h1 align="center">Video file(single source) with controls</h1>

<video autoplay controls height="150" width="150">


<source src="aye watan.mp4" type="video/mp4">
</video>

</body>
</html>

Video1.html

<!DOCTYPE html>
<html>
<head>
<title>Multiple Video with controls</title>
</head>
<body>

<h1 align="center">Video file(multiple source) 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> Lists of video file formats</h3>


<ol>
<li> mp3- video/mpeg</li>
<li>ogg-video/ogg</li>
<li>wavM-video/wavM</li>
</ol>

<video autoplay controls height="100" width="100">


<source src="aye watan.mp4" type="video/mp4">
<source src="teri mitti.mp4" type="video/mp4">
<h4> your browser doesnot support the video element</h4>
</video>

</body>
</html>
PRACTICAL NO : 6
AIM : NAVIGATION ON AN IMAGE USING CLIENT SIDE IMAGE MAPPING IN WEB PAGE
USING HTML 5

imagemap.html

<!DOCTYPE html>
<html>
<head>
<title>Client side Image Mapping</title>
</head>
<body>

<h1 align="center">Client side Image Mapping</h1>

<img src="flower1.jpg" usemap="#imagemap">

<map name="imagemap">
<area shape="rect" coords="18,19,183,129" href="http://www.google.com" alt="google">
<area shape="circle" coords="298,217,80" href="http://www.yahoo.com" alt="yahoo">
<area shape="poly" coords="142,318,52,408,150,504,239,407" href="a.html" alt="This is local page">
</map>

</body>
</html>

a.html
<html>
<head>
<title>image mapping</title>
</head>
<body>
<h1> This is local page</h1>
</body>
</html>
OUTPUT
Practical no : 1
Practical no : 2
Practical No : 3
Practical No : 4
Practical No : 5
Practical No : 6

You might also like