HTML PRACTICAL
Code: -
Index.html
<html>
<head>
<title>
</title>
<style>
pre{font-size:20px;color:grey}
</style>
</head>
<body bgcolor="skyblue">
<h1 style="color:red;text-align:center;border:3px dotted">Thakur Ramnarayan College
of Arts & Commerce </h1>
<hr size="5" color="blue">
<img src="trcac.jpg" alt="college name" align="left" height=200 width=200>
<pre><b>
Thakur Educational Trust,
S.V. Road,
Dahisar East,
Mumbai - 400068.
</b></pre><br><br><br>
<hr size="5" color="blue">
<p><h4>
Thakur Ramnarayan College of Arts and Commerce is a new gem in the necklace of the
Thakur group. Backed by the visionary spirit of the Thakur group, this College brings to
Dahisar, world class infrastructure – facilities and amenities for a new generation of
students.
The college will provide a robust platform those who want to make a career in arts,
commerce and science streams.</h4></p>
<a href="Page2.html"> Click here for Registration</a>
</body>
</html>
Page2.html
<html>
<head>
<title>
</title>
</head>
<body bgcolor="pink">
<h2> Registration From </h2>
Name : <input type="text" name="t1" placeholder="Write Your name"
required><br><br>
Address : <textarea autofocus></textarea><br><br>
Gender :
<input type="radio" name="r1">Male
<input type="radio" name="r1">female
<br><br>
Contact No. <input type="tel" maxlength="10" ><br><br>
Hobbies
<input type="checkbox">Cricket
<input type="checkbox">Football
<input type="checkbox">carrom
<input type="checkbox">chess
<input type="checkbox">Swimming<br><br>
<input type="submit" value="submit">
<br><br>
<a href="index.html">click here for index page</a>
</body>
</html>
Code: -
Touristplaces.html
<!DOCTYPE html>
<html>
<head>
<title>Tourist Places</title>
<style>
*{box-sizing:border-box;}
div{width:50%;border:5px solid black;}
.left{float:left;font-size:25px;font-style:italic;background-color:yellow;height:300px;}
.right{float:right;font-size:25px;font-style:italic;background-
color:deeppink;height:300px;}
</style>
</head>
<body>
<div style="width:100%;background-color:skyblue;color:deeppink;border:5px solid
black">
<h1 align="center">Tourist Places</h1>
</div>
<div class="left">
<ol>
<b>City</b>
<li>Pune</li>
<li>Banglore</li>
<li>Hyderabad</li>
<li>Delhi</li>
</ol>
</div>
<div class="right">
<ul>
Tourist places in Pune
<li>Shaniwarwada</li>
<li>Kelkar Musium</li>
<li>Sinhgad Fort</li>
</ul>
</div>
</body>
</html>
Code: -
Firstpage.html
<!doctype html>
<html>
<head>
<title>TRCAC Travels</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<center><img src="logo.png" height="150" width="20%"></center>
<h1 align="center">TRCAC Travels </h1> <form name="f1">
<table align="center">
<tr><td>Name of Traveller:</td>
<td><input type="text" name="t1"></td>
</tr>
<tr><td>Date of Travel:</td>
<td><input type="date" name="d1"></td>
</tr>
<tr>
<td>Telephone no.:</td>
<td><input type="tel" name="telephone" maxlength="10"></td>
</tr>
<tr>
<th colspan="2">
<input type="image" width="110" height="80" name="submit" src="submit.jpg"
alt="Click here to submit"></th>
</tr>
</table>
</form>
<center><a href="info.html">Travel Information</a></center>
</body>
</html>
Info.html
<!doctype html>
<html>
<head>
<title>TRCAC Travels</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<center><img src="trcac.jpg" height="200" width="60%"></center>
<h1 align="center">Travel Information</h1>
<ul type="square">
<li> Name of Transporter - Air Asia </li>
<li>Time - 9:30 am</li>
<li> Seat No - B39 </li>
<li> Destination – Delhi </li>
</ul> <a href="Firstpage.html">
<img src="trcac.jpg" width="100" height="80" alt="Click here to go Home page"></a>
</body>
</html>
style.css
body{background-color: pink;color:brown;font-size:25px;font-family:calibri;}
h1{color:blue;font-style:oblique;font-family:Arial Rounded MT;}
table{border-radius:10px;border:1px maroon inset;}
Code: -
Sop4.html
<!DOCTYPE html>
<html>
<head>
<title>Sop4 <title>
<style type="text/css">
body{background-color: lightgrey;}
nav{background-color: blue;height:30px;line-height: 30px;font-size: 18px;
font-family: sans-serif;}
span{font-size: 20px;}
a{color:white;padding: 15px;}
section{float: left; width: 70%;background-color: grey; margin: 5px 0;}
article{background-color: white; margin: 0 5px;}
footer{background-color: blue; line-height: 20px; height:20px; margin: 5px 0;
color: white; padding:12px; font-size: 20px; font-family: sans-serif; clear:both;}
aside{float: right; width: 29%;margin: 5px 0;background-color: grey;}
h2,h3,h1,p{margin : 5px 0; padding :0 10px;}
</style>
</head>
<body>
<header>
<h1>News</h1>
<h3> Local and National News</h3>
<nav>
<a href="#"><span>H</span>OME</a>
<a href="#"><span>A</span>rchives</a>
<a href="#"><span>A</span>bout</a>
</nav>
</header>
<aside>
<h2>BE A NEWS REPORTER</h2>
<p>If you see news happening. Send us a Text.</p>
</aside>
<section>
<h2>Local News</h2>
<article>
<h3>Fire Fighters rescue man from building this is local news 1</h3>
<p>(reporter name, date)</p>
<p> This is the fighter details. This is the story of fighter.<br>
This is the detail of rescue man. This is the story of how is rescued.</p>
</article>
<article>
<h3>New Library to be built this is local news 2</h3>
<p>(reporter name,date)</p>
<p> This is the story text. This is the story text.<br>
This is the story text. This is the story text.</p>
</article>
</section>
<section>
<h2>National News</h2>
<article>
<h3>Snow storm is making travel difficult </h3>
<p>(reporter name, date)</p>
<p>This is the story snow storm. This is the story distoiral of storm.<br>
This is the story part continued . This is the story text continued.</p>
</article>
<article>
<h3>Thousands are without power</h3>
<p>(reporter name, date)</p><br>
<p>This is the story of not having power. This is the story text continued.
<br> This is the story bad effect. This is the story about destroyal of economy.</p>
</article>
</section>
<footer>
footer information
</footer>
</body>
</html>
Code: -
Audio.html
<!doctype html>
<html>
<head>
<title>Inserting Audio on web Page using HTML5</title>
</head>
<body bgcolor="yellow">
<h1>Inserting Audio on web Page using HTML5 </h1>
<audio src="music1.mp3" controls loop="-1" autoplay> </audio>
</body>
</html>
Audio1.html
<!doctype html>
<html>
<head>
<title>Inserting Audio on web Page using HTML5</title>
</head>
<body bgcolor="yellow">
<h1>Inserting Audio on web Page using HTML5 </h1>
<audio controls loop="-1" autoplay>
<source src="music1.wav" type="audio/mpeg">
<source src="music2.ogg" type="audio/mpeg">
<source src="music3.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Code: -
Video.html
<!doctype html>
<html>
<head>
<title>Inserting Video on web Page using HTML5</title>
</head>
<body bgcolor="yellow">
<h1 align="center">Inserting Video on web Page using HTML5 </h1>
<video src="video1.mp4" controls autoplay height="150" width="150">
</video>
</body>
</html>
Video1.html
<!doctype html>
<html>
<head>
<title>Inserting Video on web Page using HTML5</title>
</head>
<body bgcolor="yellow">
<h1>Inserting Video on web Page using HTML5 </h1>
<video controls autoplay height="100" width="100">
<source src="video1.mp4" type="video/mp4">
<source src="video2.ogg" type="video/ogg>
<source src="video3.WebM" type="video/WebM"> </video>
</video>
</body>
</html>
Code: -
Imagemapping.html
<!doctype html>
<html>
<head>
<title>Client Side Image Mapping</title>
</head>
<body bgcolor="skyblue">
<h1 align="center"> Client Side Image Mapping </h1>
<img src="trcac1.jpg" usemap="#trcac">
<map name="trcac">
<area shape="circle" coords="98,22,40" href="index.html" alt="This is local web page
named Index">
<area shape="rect" coords="91,155,169,115" href="video.html" alt="This is local web
page named Video">
<area shape="poly" coords="48,60,85,90,70,139,,25,139,12,90" href="audio.html"
alt="This is local web page named Audio">
</map>
</body>
</html>
