HTML Programs

Html Programs
1. Design a web page to Show your College and its departments details using
basic text formatting tags (at least 4)
<html>
<head>
<title>Page Title</title>
</head>
<body align="center">

<h1>Peekay CICS Arts & Science College</h1>

<h2>Computer Science Department</h2>
<b><u>Features:-</u></b> <br>
<i>Extended Library</i><br>
<i>computer Lab</i><br>
<i>Placement Assistance</i><br><br>
<b><u>Faculties:-</u></b> <br>
Habeebu Rahman <sub>(Hod) </sub><br>
Sheena E <sub>Asst.pro </sub><br>
</body>
</html>
2. Design a web page to show image as link (include two different links)
<html>
<head>
</head>

<h1>Images as links</h1>
<a href="a.jpg"> <img width="150" src="a.jpg" /> </a>
<a href="b.jpg"> <img width="150" src="b.jpg" /> </a>
</body>
</html>
3. Create a webpage to show photo album (minimum 4 photos)
<html>
<head>
</head>

<h1>Photo Album</h1>
<table align="center">
<tr>
<td><img width="150" src="a.jpg" /></td>
<td><img width="150" src="b.jpg" /></td>
<td><img width="150" src="c.jpg" /></td>
</tr>
<tr>
<td><img width="150" src="d.jpg" /></td>
<td><img width="150" src="e.jpg" /></td>
<td><img width="150" src="f.jpg" /></td>
</tr>
</table>
</body>
</html>
4. Divide a webpage into 3 parts using frames and include a background
image, table and hyper link in the parts
Lab4.html
<html>
<head>
</head>

<frameset rows = "50%,30%,20%">
<frame name = "top" src = "top_frame.html" />
<frame name = "main" src = "main_frame.html" />
<frame name = "bottom" src = "bottom_frame.html" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
Main_frame.html
<html>
<head>
</head>
<body >
<table border="1" width="50%" align="center">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Top_frame.html
<html>
<head>
</head>
<body style="background-image:url(a.jpg)">
</body>
</html>
Bottom_frame.html
<html>
<head>
</head>
<a href="https://www.google.com/">click here to goto Google</a> <br>
<a href="https://www.facebook.com/">click here to goto Facebook</a>
</body>
</html>
5. Design a web page to show the product details of a computer, printer and
scanner with images
<html>
<head>
</head>
<body >

<h1>Definition List</h1>
<dl>
<dt><h3>Computer</h3></dt>
<dd>
<img src="computer.jpg" width="200px" /><br>
an electronic device for storing and processing data, typically in binary
form, according to instructions given to it in a variable program.
</dd>
<dt><h3>Printer</h3></dt>
<dd>
<img src="printer.jpg" width="200px" /><br>
a printer is a peripheral machine which makes a persistent representation
of graphics or text, usually on paper. While most output is human-readable, bar
code printers are an example of an expanded use for printers.
</dd>
<dt><h3>Scanner</h3></dt>
<dd>
<img src="scanner.jpg" width="200px" /><br>
An image scanner—often abbreviated to just scanner, is a device that
optically scans images, printed text, handwriting or an object and converts it to a
digital image. Commonly used in offices are variations of the desktop flatbed
scanner where the document is placed on a glass window for scanning.
</dd>
</dl>
</body>
</html>
6. Create a webpage for student registration form(include address, gender(radio
button),qualification(select box),languages known(checkbox))
<html>
<head>
</head>
<body >

<form>
student name: <input type="text" name="username"><br>
age: <input type="text" name="age"><br>
gender: <input type="radio" name="gender">Male <input type="radio"
name="gender">FeMale <br>
Qualification: <select name="qualification">
<option>SSLC</option>
<option>+2</option>
<option >Degree</option>
<option>PG</option>
</select> <br>
Languages Known: <input type="checkbox"
name="malayalam">Malayalam <input type="checkbox" name="hindi">Hindi
<input type="checkbox" name="english">English <br>
Address: <textarea name="address"></textarea> <br><br><br>
<input type="submit" value="save" />
</form>
</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)
Lab7.html
<html>
<head>
</head>

<p>Peekay CICS Arts & Science College is a self financing College approved by
the Govt. of Kerala and affiliated to the University of Calicut. .
The college was established by the Calicut Islamic Cultural Society (CICS), P.O.
Kolathara, Calicut, in 2013.
Within a short span of time, the college has successfully carved a distinctive
niche in the temple of fame among all other self financing institutions under the
University.
The college has been a perfect launching pad for furthering the aspirations of
students aiming for academic advancement.
To impart quality education, fully devoted and committed teachers including
retired professors render their distinguished services.</p>
<a href ="courses.html" >courses offered(Next)</a> <br>
<a href ="details.html" >Fee and duration(Next)</a>
</body>
</html>
Courses.html
<html>
<head>
</head>
<body>
by
home pages)-->
<h1>Courses offered </h1>

<ul>
<li>B.com CA</li>
<li>B.com Finance</li>
<li>BBA</li>
<li>BCA</li>
<li>BSc. Computer Science</li>
<li>BSc. Psychology</li>
<li>BSc. Mathematics</li>
<li>BA . English</li>
<li>Msc. Psychology</li>
</ul>
<a href ="lab7.html" >home(Previous)</a> <br>
<a href ="details.html" >Fee and duration(Next)</a>

</body>
</html>
Details.html
<html>
<head>
</head>
<body >
by
home pages)-->
<h1>Courses offered </h1>

<h3> Bcom. CA </h3>
<mark>Fee:12000 Duration:3 year</mark>
<p>B.Com CA - Full Form is Bachelor of Commerce With Computer Applications
- One of the important B.Com related Course </p>
<h3> Bcom. Finance </h3>

<p>Bachelor of Commerce [B.Com] in Finance is an undergraduate Commerce
course. ... B.Com Finance syllabus covers the basics of courses like security
analysis, derivatives markets, financial management, risk management, etc. </p>
<h3> BBA </h3>

<p>BBA is an undergraduate Business Management Course. The full form of
BBA is "Bachelor of Business Administration." BBA Course is designed to
provide a basic understanding of management education and to train the
students in communication skills effectively, which inculcate entrepreneurship
skills and decision making</p>
<a href ="lab7.html" >home(Previous)</a> <br>
<a href ="courses.html" >Courses(Next)</a>

</body>
</html>
8. Create a webpage to show university infrastructure using table tag
<html>
<head>
</head>


<tr>
<th>Course</th>
<th>Department</th>
<th>Duration</th>
<th>HOD</th>
<th>Class Advisor</th>
</tr>
<tr>
<td>Bcom CA</td>
<td rowspan="3">Commerce</td>
<td>3 year</td>
<th rowspan="3">Prof. Sureshan </th>
<td>Asst. professor smitha </td>
</tr>
<tr>
<td>Bcom Finance</td>
<td>3 year</td>
<td>Asst. professor Murshid </td>
</tr>
<tr>
<td>BBA</td>
<td>3 year</td>
<td>Asst. professor santhosh </td>
</tr>
<tr>
<td>BCA</td>
<td rowspan="2">Computer Science</td>
<td>3 year</td>
<th rowspan="2">Habeebu Rahman </th>
<td>Asst. professor Numna </td>
</tr>
<tr>
<td>Bsc CS</td>
<td>3 year</td>
<td>Asst. professor sheena </td>
</tr>
</table>
</body>
</html>
9. Show the following table in a webpage
<html>
<head>
</head>

<h1>Peekay CICS Arts & Science College </h1>

<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>Arrival</th>
<th>Departure</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>>
<td>data</td>
<td>data</td>
</tr>
</table>
</body>
</html>
10. Display drinks menu (Hot Drinks and Cool drinks) in restaurant using
definition list.
<html>
<head>
</head>
<body align="center" >

<h1>Hot Drinks and Cool drinks</h1>
<h2> <mark><u>Hot</u></mark> </h2>

<dl>
<dt><h3>Fresh ginger tea</h3></dt>
<dd>
Warming, spicy ginger tea has a long history of use for stomach ache and
nausea.
</dd>
<dt><h3>Fruit tea</h3></dt>
<dd>
If you fancy something fruity, flavoursome fruit tea is a good low-calorie
option.
</dd>
<dt><h3>Fresh mint tea</h3></dt>
<dd>
Mint tea is low in calories, a great palate cleanser and has traditionally
been used to aid digestion. Wash and tear up a handful of mint leaves, add to a
small teapot and top up with boiling water. Avoid Moroccan mint tea in
restaurants, as it can be loaded with sugar.
</dd>
</dl>
<h2><mark> <u>Cool</u> </mark></h2>

<dl>
<dt><h3> Buttermilk (Chaas)</h3></dt>
<dd>
Buttermilk or popularly known as chaas is an amazing curd-based drink
that is undoubtedly an Indian favourite. Chaas is a brilliant digestive, and the
addition of spices like jeera only enhances the benefits it has to offer
</dd>
<dt><h3>Coconut Water</h3></dt>
<dd>
A chilled glass of coconut water can instantly cheer you up. The mild
sweetness and fresh taste makes it just the perfect drink to keep summer blues
at bay.
</dd>
<dt><h3>Sugarcane Juice</h3></dt>
<dd>
It makes for an energy drink and helps build up plasma and body fluids,
helping you counter dehydration and dullness. Adding mint leaves to the juice will
only help enhance the taste of your summer drink.
</dd>
</dl>
</body>
</html>
11. Display web page to show tri color flag using div tag (use primary colors)
<html>
<head>
<style>
#container{
width:500px;
height:300px;
border:2px solid;
}
#orange{
background-color:#FF9933;
height:100px;
}
#white{
background-color:#ffffff;
height:100px;
}
#green{
background-color:#138808;
height:100px;
}
</style>
</head>
<body >

<h1>Flag</h1>
<div id="container">
<div id="orange">
</div>
<div id="white">
</div>
<div id="green">
</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>
<head>
</head>
<body>

<h1 align="center">BCA syllabus</h1>

<ol>
<li><h3>Semester 1</h3></li>
<ul>
<li>English-1</li>
<li>English-2</li>
<li>Language</li>
<li>Html</li>
<ol type="I">
<li>Theory</li>
<li>Practical</li>
</ol>
<li>Mathematics</li>
<li>Statitics</li>
</ul>
<ul type="square">
<li>English-1</li>
<li>English-2</li>
<li>C programming</li>
<ol type="I">
<li>Theory</li>
<li>Practical</li>
</ol>
<li>Statitics</li>
</ul>
<ul type="disc">
<li>Data Structure</li>
<ol type="I">
<li>Theory</li>
<li>Practical</li>
</ol>
<li>C++</li>
<ol type="I">
<li>Theory</li>
<li>Practical</li>
</ol>
<li>Statitics</li>
</ul>
<ul type="disc">
<li>RDBMS</li>
<ol type="I">
<li>Theory</li>
<li>Practical</li>
</ol>
<li>PHP</li>
<ol type="I">
<li>Theory</li>
<li>Practical</li>
</ol>
<li>E commerce</li>
<li>TOC</li>
</ul>
<ul type="disc">
<li>Java Programming</li>
<ol type="I">
<li>Theory</li>
<li>Practical</li>
</ol>
<li>Mini Project</li>
<li>Software Engineering</li>
<li>AI</li>
</ul>
<ul type="disc">
<li>Android Programming</li>
<ol type="I">
<li>Theory</li>
<li>Practical</li>
</ol>
<li>Project</li>
<li>IOT</li>
<li>Software testing</li>
</ul>
</ol>
</body>
</html>
13. Create web page to show page link, file link, and external link
<html>
<head>
</head>

<h1 >Links in html </h1>

<h3><a href="Tulips.jpg"> Link to a image file </a></h3> <br>
<h3><a href="link.html"> Link to another page </a></h3> <br>
<h3><a href="https://www.google.com/"> Link to external webiste </a></h3>
<br>
</body>
</html>
14. Design a html page to show the use of i frame
Lab14.html
<html>
<head>
</head>

<h1>I frame</h1>
<iframe src="frame1.html" title="Frame1"></iframe>
<iframe src="frame2.html" title="Frame2"></iframe>
</body>
</html>
frame1.html
<html>
<head>
</head>
<body bgcolor="yellow">
<h1 align="center">Frame page 1 </h1>

<p> This is just some page </p>
</body>
</html>
frame2.html
<html>
<head>
</head>
<body bgcolor="magenta">
<h1 align="center">Frame page 2 </h1>

<p> This is just some page </p>
</body>
</html>
15. Design a webpage using internal style sheet for setting styles to heading,
body and table
<html>
<head>
<style>
body{
background-color:black;
color:white;
}
h1{
text-decoration:underline;
border:2px red solid;
padding:30px;
}
table{
background-color:yellow;
color:green;
}
</style>
</head>


<h2>Computer Science Department</h2>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>

HTML Programs

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Programs

Uploaded by

Copyright:

Available Formats

Html Programs

<h1>Peekay CICS Arts & Science College</h1>

<!--6- Create a webpage for student registration form(include address,

<h1>Peekay CICS Arts & Science College</h1>

<a href ="courses.html" >courses offered(Next)</a> <br>

<a href ="details.html" >Fee and duration(Next)</a>

<h1>Courses offered </h1>

<a href ="details.html" >Fee and duration(Next)</a>

<h1>Courses offered </h1>

<h3> Bcom. Finance </h3>

<h3> BBA </h3>

<a href ="lab7.html" >home(Previous)</a> <br>

<a href ="courses.html" >Courses(Next)</a>

<h1>Peekay CICS Arts & Science College</h1>

<!-- 9. Show the following table in a webpage

<h1>Peekay CICS Arts & Science College </h1>

<h1>Hot Drinks and Cool drinks</h1>

<h2> <mark><u>Hot</u></mark> </h2>

<h2><mark> <u>Cool</u> </mark></h2>

<h1 align="center">BCA syllabus</h1>

<h1 >Links in html </h1>

<h1 align="center">Frame page 1 </h1>

<h1 align="center">Frame page 2 </h1>

<h1>Peekay CICS Arts & Science College</h1>

You might also like