Scribd
Upload
18 views22 pages

HTML Programs

Uploaded by

Anupama Nair
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
18 views22 pages

HTML Programs

Uploaded by

Anupama Nair
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/ 22

1.

Design a web page to Show your College and its departments details using basic
text formatting tags (at least 4)

<html>
<head>
<title>
SKC CS </title></head>
<body bgcolor="Black">
<font color="White">
<B> <I> <U> <center>
<h2> <font color="Red" face="TIMES NEW ROMAN"> PK DAS LIBERAL COLLEGE
OF ARTS AND SCIENCE
</font></h2></center></U></I></B> <br> <B> <U> <center>
<h2>
<font color="Yellow"> Computer science Department
</font> </h2></center></U></B> <br>
<h3> <B> <U> COURSES OFFERED:-
</U></B></h3><br>
<ol type="1">
<B>BCA </B><br>
<B> BSc CS </B></br>
<P align="Center"> PKDLCAS
Offers green and pleasent campus to compete in the ever updating tech world.
We offering BCA and Bsc Cs course here of 3yrs duration each.
<h1> <B><center> Welcome to PKDLCAS </center> </B></h1>
</font>
</body>
</html>
Output
2. Design a web page to show image as link (include two different links)
3. <!DOCTYPE html>
4. <html>
5. <head><title>image as link</title></head>
6. <body>
7. <u><center><h3>PROGRAMMING LANGUAGE</h3></center></u>
8. Click the first image to know about C++
9. <br>
10. Click the secong image to know about Java
11. <br>
12. <a href="www.c++.com"><img src="C:\Users\user\Downloads\c++.jpg"
alt="C++"></a><br>
13. <a href="www.java.com"><img src="C:\Users\user\Downloads\java.jpg"
alt="Java"></a><br>
14.
15. </body>
16. </html>
Output

3. Create a webpage to show photo album (minimum 4 photos)

<!doctype html>
<html>
<head>
<title>Photos</title>
</head>
<body>
<center><h2><u>Flowers</u></h2></center>
<br>
Jasmine<img src="C:\Users\user\Downloads\jasmine.jpg">
<br>
Lotus<img src="C:\Users\user\Downloads\lotus.jpg">
<br>
Sunflower<img src="C:\Users\user\Downloads\sunflower.jpg">
<br>
Rose<img src="C:\Users\user\Downloads\rose.jpg">
</body>
</html>
OUTPUT

4. Divide a webpage into 3 parts using frames and include a background image, table
and hyper link in the parts

Frame.html

<!doctype html>
<html>
<title>frame</title>
<frameset cols="*,*,*">
<frame src="brackground.html">
<frame src="table.html">
<frame src="link.html">
</frameset>
</head>
</html>

background.html

<!DOCTYPE html>
<html>
<head>
<title>Background</title>
</head>
<body background="C:\Users\user\Downloads\background.jpg">

</body>
</html>
table.html

<!doctype html>
<html>
<head><title>table</title></head>
<body>
<table>
<caption>Courses Offered</caption>
<tr>
<th>No.</th>
<th>Course</th>
</tr>
<tr>
<td>
1
</td>
<td> BSc Computer Science</td>
</tr>
<tr>
<td> 2</td>
<td>BCA</td>
</tr>
<tr>
<td> 3</td>
<td> BBA</td>

</tr>
<tr>
<td> 4</td>
<td> BCom</td>
</tr>
<tr>
<td> 5</td>
<td> BA English Language and Literature</td>
</tr>
</table>

</body>
<html>

link.html

<!doctype html>
<html>
<head><title>link</title></head>
<body>
<h3>P K Das Liberal College of Arts and Science</h3>
<br>
<a href="http:\\www.pkdasliberalcollegeofartsandscience.com">Details</a>
</a>
</body>
<html>

Output
5. Design a web page to show the product details of a computer, printer and scanner
with images

<!doctype html>

<html>
<head><title>
Product details
</title></head>
<body>
<h2><u><center>Devices</center></u></h2>
<div>
<b><u>COMPUTER</u></b>
<br>
<img src="C:\Users\user\Downloads\computer.jpg">
<br>Computer is a high speed electric data processing machine. It accepts data
as input,process the data and generate the output.
</div>
<div>
<b><u>PRINTER</u></b>
<br><img src="C:\Users\user\Downloads\printer1.jpg">
<br>Printer is an external output device that takes data from the computer and
generates the output in the form of graphics/text on paper.
</div>
<div>
<b><u>SCANNER</u></b><br>
<img src="C:\Users\user\Downloads\scanner.jpg">
<br>Scanner optically scan images,text,handwriting or an object and converts it
into digital form.
</div>
</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 information</title>
</head>
<body>
<h1 align="center"><u>Students Information</u></h1>
<center>
<form>
<br>Enter your first name:
<input type="text" name="first name"><br><br>
<br>Enter your middle name:
<input type="text" name="middle name"><br><br>
<br>Enter your last name:
<input type="text" name="last name"><br><br>
city:
<input type="text" name="city" maxlength="25"><br><br>
Address:
<textarea rows="3" cols="10" name="address" maxlength="50"></textarea><br><br>
Gender:
<input type="radio" name="sex" value="male">male
<input type="radio" name="sex" value="female">female <br><br>
Qualification:
<select>
<option value=" "> </option>
<option value="SSLC">SSLC</option>
<option value="PLUS TWO">PLUS TWO</option>
<option value="UG">UG</option>
<option value="PG">PG</option>
</select>
<br>
<br>
<input type="submit" name="submit" value="submit"/>
</form>
</body>
</html>
7. Create 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)

hyperlink1.html

<!doctype html>
<html>
<head>
<title>hyperlink1</title>
</head>
<body>
<h2><center>P K DAS LIBERAL COLLEGE OF ARTS AND
SCIENCE</center></h2><br>
<h4>Courses Offered by College</h4>
<h4>UG Courses</h4>
<ul>
<li>Bsc Computer Science</li>
<li> BA English Language and Literature</li>
<li>BBA</li>
<li>BCA</li>
<li>BCom</li>

</ul>
<p align="right">
<a href="hyperlink2.html">Next Page

</a>
</p>
</body>
</html>
hyperlink2.html

<!DOCTYPE html>
<html>
<head><title>BCom Courses</title></head>
<body>
<h2>Bcom Courses</h2>
<ul>
<li>Bcom Computer Application</li>
<li>Bcom Finance</li>
<li>Bcom Co-operation</li>
</ul>

<p align="right">
<a href="hyperlink1.html">Previoys Page</a>
<a href="hyperlink3.html">Next Page</a>

</p>

</body>
</html>
hyperlink3.html

<!DOCTYPE html>
<html>
<head><title>fee and duration</title></head>
<body>
<h3>Fee and duration</h3>
<br>
<h3>UG Courses</h3><br>
<ul>
<li>Bsc Computer Science-duration-3 years</li>
<li>BCA-duration-3 years</li>
<li>BA English Language and Literature-duration-3 years</li>
<li>BBA-duration-3 years</li>
<li>Bcom-duration-3 years</li>
</ul>
<br>
<p align="right">
<a href="hyperlink2.html">Previous Page</a>&nbsp;
<a href="hyperlink1.html">Home Page</a>
</p>
</body>
</html>
Output
8. Create a webpage to show university infrastructure using table tag

<html>
<head><title>CALICUT UNIVERSITY</title></head> <body>
<font face="times new roman" color="red">
<u><h1><center>CALICUT UNIVERSITY
</font><br></U>
<font face="times new roman" color="BLUE" size= 4>(Re-accredited by NAAC with 'A'
Grade)</center></h1>
</font>
<b><i>

<table border="1" align="center" bordercolor=red>


<tr>
<th colspan="3">
<i>
<p>The University of Calicut is the largest University in Kerala. Established in the year
1968,

it is the second university to be set up in Kerala. <br>


The University was created through a Government plan bifurcating Kerala University. As
per the plan, the four post-graduate departments of the University of Kerala operating in
Calicut
were annexed to the new University along with fifty four constituent colleges spread
across seven northern districts.
With ‘Nirmaya Karmana Sree’ as it motto, the University has been able to surmount all
challenges and emerge as
the largest residential cum affiliating University in Kerala. With 30 post graduate
departments and 426 colleges
it has become a beacon of hope and enlightenment for hundreds of thousands of young
men
and women in North Kerala.
<br>
<br>
<i>
</th>
</b></i>
<tr>
<th colspan="2">COURSES</th>
<th>ELIGIBILITY</th>
</tr>
<tr>
<th colspan="2">UG</th>
<th>+2 pass</th>
</tr>
<tr>
<td>Bsc Computer science</td>
<td>3 yrs</td>
</tr>
<TR>
<td>BA</td>
<td>3 yrs</td>
</tr>
<tr>
<td>BCA</td>
<td>3 yrs</td>

</tr>
<tr>
<th colspan="2">PG</th>
<th>UG PASS</th>
</tr>
<tr>
<td>MSC CS</td>

<td>2 yrs</td>
</tr>
<tr>
<td>MA</td>
<td>2 yrs</td>
</tr>
<tr>
<td>MCA</td>
<td>2 yrs</td>
</tr>
<tr>
<th colspan="3">

<br>
<br>
The University campus, located at Tenhipalam, 24 km south of Calicut is the main hub
of academic activities.
Situated here besides the 28 postgraduate teaching and research departments are: the
Vice-Chancellor’s Office,
the Administration Block, Pareeksha Bhavan, School of Distance Education, Academic
Staff College,
Educational and Multimedia Research Centre, Computer Centre, and the University
Library. The departments on the campus include Arabic, Botany, Biotechnology, Centre
for Women Studies, Chemistry,
Commerce & Management Studies, Computer Science, Education, English, Hindi,
History, West Asian Studies,
Mass Communication & Journalism, Life Science, Library and Information Science, Life
Long Learning & Extension,
Malayalam and Kerala Studies, Mathematics etc

</th>
</tr>
</table>

</body>
</html>
9. Show the following table in a webpage

Train time Source Destination Time


Arrival Departure

<!doctype html>
<html>
<head><title>table</title></head>
<body>
<table border="3">
<tr align="center">
<th rowspan="2">Train Name</th>
<th rowspan="2">Source</th>
<th rowspan="2">Destination</th>
<th colspan="2">Time</th>
</tr>
<tr>
<th>Arraival</th>
<th>Departure</th>
</tr>
<tr><td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>

</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Output
10. Display drinks menu (Hot Drinks and Cool drinks) in restaurant using
definition list.
<!DOCTYPE html>
<html>
<head><title>definition list</title></head>
<body>
<h2><u><center>DRINKS</center></u></h2>
<dl>
<dt>Hot Drinks</dt>
<dd>The popular hot drinks available in the Restaurant are:-
<li>Coffee-Rs.10.00</li>
<li>Tea-Rs.10.00</li>
<li>Cappuccino-Rs.80.00</li>
</dd>
<dt>Cool Drinks</dt>
<dd>The main Cool Drinks are:-
<li>Coca-Cola-Rs.35.00</li>
<li>Pepsi-Rs.35.00</li>
<li>Sprite-Rs.35.00</li>
<li>Mountain Dew-Rs.50.00</li>
</dd>
</dl>
</body>
</html>
Output
11. Display web page to show tri color flag using div tag (use primary colors)

<!DOCTYPE html><html>
<head>
<title>tri color flag</title>
</head>
<body>
<h3><u>TRI COLOR FLAG</u></h3>
<div style="background-color:orange;padding: 20px;"></div>
<div style="background-color:white;padding: 20px;"></div>
<div style="background-color:green;padding: 20px;"></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>
<TITLE> COMPUTER SCIENCE SYLLABUS 2017 BATCH
</TITLE> </HEAD>
<BODY>

<H1><CENTER><U>COMPUTER SCIENCE SYLLABUS 2017 BATCH</u></H1>


<H1> SEMESTER-I</h1>
<UL>
<LI> Common English Course I
<LI> Common English Course II
<LI> Additional Language Course I
<LI> Computer Fundamentals & HTML
<LI>Mathematical Foundation of Computer Applications
<LI>Discrete Mathematics
</UL>
<H1>SEMESTER-II</h1>
<UL TYPE = "SQUARE">
<LI> Common English Course III
<LI> Common English Course IV
<LI> Additional Language II
<LI> Problem Solving using C
<LI > Programming Laboratory I: Lab Exam of 1st& 2nd Sem.
HTML & Programming in C

<LI> Financial & Management Accounting


<LI> Operations Research
</UL>

<H1> SEMESTER-III</h1>
<OL>
<LI> General Course I-Basic Numerical Skills
<LI> General Course IIGeneral Informatics
<LI> Data Structures Using
C
<LI> Computer Oriented
Numerical &Statistical Methods
<LI> Theory Of Computation
</OL>
<H1>SEMESTER-IV</h1>
<OL TYPE = "A">
<LI> General Course IIIEntrepreneurship Development
<LI> General Course IVBasics of Audio and
Video
<LI> Database Management System and RDBMS
<LI> E-Commerce
<LI> Computer Graphics
</OL>
<H1>SEMESTER-V</h1>

<UL TYPE = "CIRCLE">


<LI> Java Programming
<LI> Computer Organization And Architecture
<LI> Web Programming Using PHP
<LI>Principles of Software Engineering
<LI > Open Course(Other Streams)
<LI> Project Work
</UL>

<H1>SEMESTER-VI</h1>

<OL TYPE = "i">


<LI> Android programming
<LI> Operating Systems
<LI> Computer Networks
<LI> Programming laboratory III- Java
and Web Programming
<LI> Programming Laboratory IV: Lab Exam of Android &
Linux shell Programming
<LI> Project and Viva Voce
<LI>Elective
</OL>
</BODY>
</HTML>
13.Create web page to show page link, file link, and external link
<!DOCTYPE html>
<html>
<head><title>link</title></head>
<body>
<center><h2>Hyper Text Markup Language</h2></center>
<p>HTML is known as the language of internet. It tells the browser how to display
content in a webpage. It is not case sensitrive</p>
<a href="details.html">............learn more</a>
<br>
<p>Tags in HTML are classified into two. Container tags and Empty tags</p>
<p>To get the example of empty tag,click the link given below</p>
<a href="example1.html">&lt;BR&gt;</a><br>
<a href="example2.html">&lt;IMG&gt;</a><br>
<a href="example3.html">Other empty tags</a><br>
<p>To get examples of container tag, click the links given below</p>
<a href="container1.html">&lt;head&gt;</a><br>
<a href="container2.html">&lt;body&gt;</a><br>
<a href="container3.html">Other container tags</a><br>

</body>
</html>
Output
14.Design a html page to show the use of i frame
<!DOCTYPE html>
<html>
<head><title>iframes</title></head>
<body>
<u><center>PK DAS LIBERAL COLLEGE OF ARTS AND SCIENCE</center></u>
<p>PKDLCAS Lakkidi,affiliated to the University of Calicut is one of the arts and
science college under the management of Nehru Group of Institutions</p>
<iframe name="frame" src="courses.html" width="700" height="300"></iframe>
</body>
</html>
Courses.html

<!DOCTYPE html>
<html>
<head><title>iframe</title></head>
<body>
<center><h3><u>PKDLCAS</u></h3></center>
<h4>Courses Offered</h4>
<ul>
<li>BA English</li>
<li>Bcom</li>
<li>BBA</li>
<li>BCA</li>
<li>Bsc CS</li>

</ul>
</body></html>
15.Design a webpage using internal style sheet for setting styles to heading, body and
Table
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: yellow;
font-family: system;
}
h2{
text-align: center;
color: blue;
}
table td,th{
border-collapse: collapse;
border: 2px solid green;
width: 34%;
font-family: arial;
color: green;
font-size: 25px;

</style>
</head>
<body>
<center><h2>COURSES OFFERED</h2></center>
<table>
<tr>
<th> Core Subject</th>
<th> Complementary Subject</th>

</tr>
<tr>
<td> Computer Science</td>
<td> Mathematics and Electronics</td>/
</tr>
<tr>
<td> English</td>
<td> Journalism </td>
</tr>
</table>
</body>
</html>

Output

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy