i. Use Tables to layout HTML pages
ii. Use <span> and <div> tags to provide a layout to the above page instead of table
layout
iii. Use Frames to divide the page contents into different parts
iv. Embed Audio and Video into your HTML webpage
tablelayout.html
<html>
<table width="100%" height="100%" border="1" cellpadding="5">
<tr>
<th colspan="2" bgcolor="Khaki">
<header ><h1>MAR DIONYSIUS COLLEGE</h1>
<h2>PAZHANJI</h1></header></h2>
</th>
</tr>
<tr>
<td valign="top" width="20%" bgcolor="LightBlue"><left><h2>Links</h2>
<ul>
<li>
<a href="http://14.139.185.6/website/Syll/#">BCA Syllabus</a>
</li>
<li> <a href="http://mdcollege.edu.in/">College Website</a>
</li>
<li>
<a href="http://www.universityofcalicut.info/index.php?option=com_frontpage&Itemid=1">Calicut University Website</a>
</li>
</ul></left>
</td>
<td valign="top" bgcolor="YellowGreen">
<img src="COMPUTER.jpg" alt="description" width="100%" height="300" class="center">
<p align="justify"><strong>Computer Application is one of the thrust areas in Science and
technology. In appreciation of its growing importance in business
and the industrial scenario,the University established a Department
of Computer Applications to facilitate research and human resources
development in the subject. The Department offers Bachelors' programme
in Computer Applications (B.C.A)</strong></p></td>
</tr>
<tr>
<td colspan="2" height="10%" bgcolor="Pink"><center>© BCA, Dept. of Computer Application</center></td>
</tr>
</table>
</html>
Divlayout.html
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style = "width:100%;background-color:#b5dcb3;">
<h1><center>MAR DIONYSIUS COLLEGE</center></h1>
<h2><center>PAZHANJI</center></h2>
<div style = "background-color:LightBlue;float:left;width:20%;height:500px;">
<b>Left Menu</b>
<br><a href="http://mdcollege.edu.in/">College Website</a>
<br><a href="http://www.universityofcalicut.info/index.php?option=com_frontpage&Itemid=1">Calicut University Website</a>
</div>
<div style = "background-color:#eee;float:left;width:60%;height:500px;" >
<p><img src="COMPUTER.jpg" alt="description" width="100%" height="300" class="center"></p>
<video width="320" height="140" controls>
<source src="nature.webm" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div style = "background-color:#aaa; float:right;width:20%;height:500px;">
<b>Right Menu</b>
<br><a href="http://14.139.185.6/website/Syll/#">BCA Syllabus</a>
</div>
<div style = "background-color:#b5dcb3; clear:both">
<center>© BCA, Dept. of Computer Application
</center>
</div>
</div>
</body>
</html>
Output Screenshot
No comments:
Post a Comment