PART A: HTML
1) Design a web page to Show your College and its departments details using basic text
formatting tags (at least 4)
<html>
<head>
<title>college website</title>
</head>
<body bgcolor="silver">
<img src="college.jpg" height=600 width="100%">
<h1> <center>SAFI INSTITUTE, VAZHAYOOR</h1><br>
<i> <center> Affliated To university of calicut </center> </i><br>
<h2> <b>Departments</b><br> </h2>
<ul>
<b><li type="disk"> Bsc.Computer Science <br>
<li type="disc">Bsc Micro Biology <br>
<li type="disc">BA Economics<br>
<li type="disc">BSc Psychology <br>
<li type="disc">BA English<br>
<li type="disc">BA Food Technology<br>
<li type="disc">BCom Finance<br>
<li type="disc">BCA </b>
</body>
</html>
Output
2) Design a web page to show image as link (include two different links)
<html>
<head>
<title>Internal and External Links </title>
</head>
<body>
<a name="top">
<center><h1 >Social Media </h2></center>
<a name="top">
<a href="https://www.instagram.com">Instagram</a><br>
<a href="https://www.facebook.com">Facebook</a><br>
<a href="https://www.twitter.com">Twitter </a><br>
<img src="socialmedia.jpg" width="100%" height=600><br>
<a href="#top">TOP</a>
<br><br><br>
</body>
</html>
3) Create a webpage to show photo album (minimum 4 photos)
<html>
<title>Photp Album</title>
<body bgcolor="pink">
<body align="center">
<h1 align="center">Flowers Album </h1>
<img src="rose.jpg" height="41%" width="33%" >
<img src="dahlia.jpg" height="41%" width="33%" >
<img src="Sunflower.jpg" height="41%" width="33%" ><br>
<img src="lotus.jpg"height="41%" width="33%" >
<img src="coneflowers.jpg" height="41%" width="33%" >
<img src="jasmine.jpg" height="41%" width="33%" > <br>
</body>
</html>
4) Divide a webpage into 3 parts using frames and include a background image, table and
hyper link in the parts
<html>
<head>
<frameset rows = "60%,20%,20%">
<frame name="top" src="image.html">
<frame name="main" src="link.html">
<frame name="bottom" src="table.html">
</frameset>
</head>
</html>
image.html
<html>
<body style="background-repeat:no-repeat" background="tiger.jpg">
</body>
</html>
link.html
<html>
<a href="https://www.google.com">Visit google.com!</a> <br>
<a href="https://www.facebook.com">Visit facebook.com!</a> <br>
<a href="https://www.instagram.com/">Visit instagram.com!</a>
</body>
</html>
table.html
<html>
<body>
<table border="5">
<tr>
<th>R.No</th>
<th>Name</th>
<th>Department</th>
</tr>
<tr>
<td>101</td>
<td>Shyam</td>
<td>CS</td>
</tr>
<tr>
<td>102</td>
<td>Salim</td>
<td>BCA</td>
</tr>
<tr>
<td>103</td>
<td>Alice</td>
<td>BCA</td>
</tr>
</body>
</html>
5) Design a web page to show the product details of a computer, printer and scanner with
images
<html>
<body>
<img src="computer.jpg" width="19%" height="29%"><br>
Asus vivo book<br>
Price :Rs.28,000<br>
<img src="scanner.jpg"width="19%" height="29%"><br>
canon LIDE300 scanner<br>
Price :Rs.4124<br>
<img src="printer.jpg"width="18%" height="29%"><br>
HP Laserjet Pro M126nw Multi<br>
Price :Rs.16,499
</body>
</html>
6) Create a webpage for student registration form(include address, gender(radio
button),qualification(select box),languages known(checkbox))
<html>
<head>
<title> Student Registration form </title>
</head>
<body>
<h1> Student Registration form</h1>
Name :     <input type="text" name="nm"><br> <br>
Address:   <textarea row="5" cols="10"></textarea><br> <br>
Gender : <input type="radio" name="gen" value="M">M
<input type="radio" name="gen" value="F">F<br>
Qualification : <select name="qual">
<option value="PG">PG
<option value="UG">UG
<option value="PLUS TWO">PLUS TWO
<option value="SSLC">SSLC
</select><br>
Language :<br>
<input type="checkbox" name="lan" value="English">English <br>
<input type="checkbox" name="lan" value="Malayalam">Malayalam<br>
<input type="checkbox" name="lan" value="Hindi">Hindi
<br>
<input type="button" value="submit">
<input type="reset" value="clear">
</body>
</html>
7) Crete a web page to show details (Fee, Duration etc.,) of courses offered by your college
using hyperlink(give links to navigate to next, previous and home pages)
<html>
<body>
<h2 align="center">SAFI INSTITUTE OF ADVANCED STUDY</h2><br>
<font color="red">
<b><u>Courses:</u></b><br><br>
<a href="Bsc.html">BCA</a><br>
<a href="Bcom.html">BCom</a>
</font>
</body>
</html>
Bsc.html
<html>
<body>
<b>BCA</b><br><br>
Duration :3years<br><br>
<a href="fee1.html">Fee</a><br>
<a href="course.html">Home</a><br>
</body>
</html>
fee1.html
<html>
<body>
<b>B.Sc. COMPUTERS SCIENCE </b><br><br>
<b>Fee Structure:</b><br>
<i>Admission Fee:2000<br>
Tution fee :18000</i><br><br>
<a href="course.html">Home</a><br>
<a href="Bcom.html">Previous</a>
</body>
</html>
Bcom.html
<html>
<body>
<b>Bachelor of Commerce</b><br><br>
Duration :3 years<br><br>
<a href="fee.html">Fee</a><br>
<a href="course.html">Home</a><br>
</body>
</html>
fee.html
<html>
<body>
<b>Bachelor of Commerce</b><br><br>
<b>Fee Structure:</b><br>
<i>Admission Fee:2000<br>
Tution fee :9000</i><br><br>
<a href="course.html">Home</a><br>
<a href="Bcom.html">Previous</a>
</body>
</html>
8) Create a webpage to show university infrastructure using table tag
<html>
<head>
<h2 align="center">Calicut University </h2>
<h3>Infrastructure/Facilities :</h3>
<table border="1">
<tr>
<td> <center><img src="library.jpg"></center></th>
<th style="font-size: 12px;"> <p align="justify">Calicut University
library has a collection over 90,000 books and subscription 218
journals & 10 newspapers. The library has a rich collection of books,
journals, maps, CDs, theses, dissertations etc. The collection includes
107948 books and about 2500 volumes of journals</p> </th>
</tr>
<tr>
<td> <center><img src="hostel.jpg"></center></td>
<th style="font-size: 12px;"><p align="justify">Food services are
made available in the campus. In addition to the main canteen, there
are four cafeterias in various locations of the university to cater to the
need of students, staff, and visitors.Boys Hostel Number of beds -
376 |In-Campus Hostel, Girls Hostel Number of beds - 1028 | In-
Campus Hostel </p> </th>
</tr>
<tr>
<td> <center><img src="sports complex.jpg"></center></td>
<th style="font-size: 12px;"> <p align="justify">Available Facilities:
Basketball Court | Cricket Ground| Football Ground | Tennis Court |
400 Mts. Track | Sports Pavilion | Volleyball Court | Handball Court |
Ball Badminton Court | Kho-Kho Court | Kabaddi Court | Synthetic
Indoor Stadium <p> </th>
</tr>
<tr>
<td> <center><img src="labs.jpg"></center></td>
<th style="font-size: 12px;"> <p align="justify">Available Facilities:
Computer Lab|Language Lab </p> </th>
</tr>
</table>
</body>
</html>
9) Show the following table in a webpage
<html>
<body>
<table border="1" align="center">
<tr>
<th rowspan="2">Train Name</th>
<th rowspan="2">Source</th>
<th rowspan="2">Destination</th>
<th colspan="2">Time</th>
</tr>
<tr>
<th>Arriveal</th>
<th>Departure</th>
</tr>
<tr height="20">
<td></td> <td></td> <td></td> <td></td> <td></td>
</tr>
<tr height="20">
<td></td> <td></td> <td></td> <td></td> <td></td>
</tr>
</table>
</body>
</html>
10) Display drinks menu (Hot Drinks and Cool drinks) in restaurant
using definition list.
<html>
<head>
<title>web page</title>
</head>
<body>
<h1 align="center">Hot Drinks And Cool Drinks</h1>
<dl>
<dt><b><u>Hot Drinks:</u></b></dt>
<dd>Coffee</dd>
<dd>Tee</dd>
<dd>Horlicks</dd
</dl>
<dl>
<dt><b><u>Cool Drinks:</u></b></dt>
<dd>Pinapple</dd>
<dd>Mango</dd>
<dd>Chicku</dd>
</dl>
</body>
</html>
11) Display web page to show tri color flag using div tag (use
primary colors)
<html>
<head>
<title> flag</title>
</head>
<body>
<div>
<div style="background-color:orange;height:100px;width:500px;" > </div>
<div style="background-color:white;height:100px;width:500px;" >
<img src="chakram.png" height="100px" style="margin:0px
200px"></div>
<div style=background-color:green;height:100px;width:500px; > </div>
</div>
</body>
</html>
12) Design a webpage to display syllabus of your course using list
tag.(use ordered, unordered format as main, sub main and sub- sub
main and use numbers special types of bullets in appropriate places)
<html>
<body>
<h1 align="center"> BCA </h1>
<h3>Syllabus:</h3>
<ol type="1">
<li><b>First Semester</b></li>
<ul type="disc">
<li>Essential english language skills</li>
<li>literature in english</li>
<li>Computer Fundamentals & HTML</li>
<li>complementary</li>
<ol>
<li type=i>Statistics</li>
<li type=i>Mathematics</li>
</ol>
</ul>
<li><b>Second Semester</b></li>
<ul type="disc">
<li>Readings on kerala</li>
<li>Reading from finges</li>
<li>Problem solving using C</li>
<li>complementary</li>
<ol>
<li type=i>Statistics</li>
<li type=i>Mathematics</li>
</ol>
</ul>
<li><b>Third Semester</b></li>
<ul type="disc">
<li>Python prgramming</li>
<li>Sensors and Transducers</li>
<li>Data Structure using C</li>
<li>complementary</li>
<ol>
<li type=i>Statistics</li>
<li type=i>Mathematics</li>
</ol>
</ul>
</body>
</html>
13) Design a html page to show the use of iframe
<html>
<head>
<title>HTML iframe Tag</title>
</head>
<body style="text-align: center">
<h1>The iframe element</h1>
<iframe src= "computer.jpg" height="400"
width="35%"></iframe><br>
<iframe src="lap.jpeg"height="200"width="25%"> </iframe>
</body>
</html>
14) Design a webpage using internal style sheet for setting styles to
heading, body and table.
<html>
<head>
<style>
body {
font-family: Arial;
background-color: lightgreen;
margin: 30;
padding: 20;
}
h1 {
text-align: center;
font-size: 28px;
color: red;
}
h2 {
font-size: 20px;
color: green;
}
h3 {
font-size: 18px;
color: orange;
}
table {
background-color:yellow;
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: lightblue;
font-weight: bold;
}
a{
text-decoration: none;
color: #0078d4;
}
a: hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Internal Style Sheet</h1>
<p>This is a sample web page with styles set using an internal
style sheet. </p>
<h2>Football</h2>
<p>Football is a family of team sports that involve, to varying
degrees, kicking a ball to score a goal. </p>
<h3>Footballer</h3>
<table>
<tr>
<th>Player Name</th>
<th>Country</th>
<th>Club</th>
</tr>
<tr>
<td><a href="#">Messi</a></td>
<td>Argentina</a></td>
<td>Inter Miami CF</a></td>
</tr>
<tr>
<td><a href="#">Sunil Chhetri</a></td>
<td>India</a></td>
<td>Bengaluru FC</a></td>
</tr>
</table>
</body>
</html>
15. Design a webpage to show the use of external style sheet
htmlpart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Simple Webpage</h1>
<p>This is a paragraph styled with an external CSS file.</p>
</body>
</html>
styles.css
body {
font-family: Arial, sans-serif;
background-color: #c0c0c0;
color: #333;
margin: 0;
padding: 20px;
}
h1 {
color: #4CAF50;
}
p{
font-size: 16px;
}
