HTML Practical File

1.
Display your family information with background and other

formatting.
SOURCE CODE:
<html>
<head>
<title> Family information </title>
</head>
<body bgcolor="lightgreen" text="blue">
<h1>
<pre>
My name is Abhishek Sharma
my Family information is -
Father Name - Shri R.K. Sharma

Mother Name - ShrimatiAnjulata Sharma
Brother Name - Ashish Sharma
Sister Name - Richa Sharma
</pre>
</h1>
</body>
</html>
OUTPUT:
Page 1 of 32
2. Design a web page to display your college with hyperlink.
First of all I create the frame than I insert the hyperlink at the second frame-2
SOURCE CODE:
Frame
<html>
<head>
<title> Career College Bhopal</title>
</head>
<frameset rows="75,*" >

<frame src="logo.html" name="f1" scrolling="no"/>
<frameset cols="200,*">
<frame src="aa.html" name="f2" scrolling="no"/>
<frameset cols="100 ,*">

<frame src="as.html" name="f3"/>
</frameset>
</html>
Frame-1
<html>
<head>
<title>F1</title>
</head>
<body>
<table width="100%" border="0" >
<tr>
<td>
<img src="CAREER.png" width="65" height="60" alt="CAREER" />
<br/>
</td>
<td align="center">
<b style="font-size:42pt;color:000000">
<i><font face="Georgia"> CAREER COLLEGE BHOPAL </i></font>
</b>
</td>
</tr>
</body>
</html>
Page 2 of 32
Frame-2
<html>
<head>
<title> Contents </title>
</head>
<body vlink="0000FF">
<h3>
<ul>
<li><a href="as.html" target="f3">Home</a></li></br>
<li><a href="about.html" target="f3">About College</a></li></br>
<li><a href="mission.html" target="f3">Mission</a></li></br>
<li><a href="Departments.html" target="f3">Departments</a></li></br>
<li><a href="Courses.html" target="f3">Courses</a></li></br>
<li><a href="facilities.html" target="f3">Facilities</a></li></br>
<li><a href="http://www.bubhopal.nic.in/" target="f3"> Online Result </a></li><br/>
<li><a href="http://www.bubhopal.nic.in/" target="f3"> Exam Timetable </a></li><br/>
<li><a href="photo.html" target="f3"> Photo Gallery </a></li><br/>
<li><a href="Contactus.html" target="f3">Contactus</a></li></br>
</h3>
</ul>
</body>
</html>
Frame-3
<html>
<head>
<title>HOME</title>
</head>
<body>
<center>
<table width="100%" border"0">
<tr>
<td align="center">
<imgsrc="a.jpg" alt="a" width="700" height="250" />
</td>
</tr>
<tr>
<td align="center">
<h2 style="font-size:30pt;">
<u><b>Welcome to Career College </u></b>
</h2>
</center>
<h5><p>
<font face="Consolas">
Career College is accredited at 'A' level by National Assessment and Accreditation
Council (NAAC), Bangalore. We are having nine huge multistoried buildings on a
sprawling 4 acre lush green campus.Along with huge computerized Library
Page 3 of 32
admeasuring 9,000 Sq. Ft. comprising of more than 25,000 text books, Reference
books, Journals and Encyclopedia with reading capacity of more than 100 students
at a time. In addition, secluded chambers for Research scholars are available. The
only College having facilities of Personality Assessment & Development Centre
(PADC), Computerized Attendance Monitoring System (CAMS) and Mock Exams.
Students Satisfaction Research Unit (SSRU) constantly undertakes surveys and
feedback of the students so as to improve the performance.we provide numerous
career oriented courses to choose from Computers, Commerce, Management,
Paramedical, Physiotherapy, Biotechnology, Microbiology, Education, Biochemistry,
Chemistry, Botany, Physical Education, Law, Library Science etc.
</font>
</p>
</h5>
</td>
</tr>
</body>
</html>
About College
<html>
<head>
<title>About College</title>
</head>
<body>
<center>
<p>&nbsp</p>
<u><b> CAREER COLLEGE – AT A GLANCE </u></b>
<h3 align="left">
<pre>
• Career Oriented Courses in Commerce, Management, Biotechnology,
Microbiology, Biochemistry, Botany, Chemistry, Physiotherapy, Education,
Paramedical Science, Computer Science and Library & Info. Science.
• Accredited at ‘A’ level by (NAAC) National Assessment and Accreditation

Council, Bangalore. (An Autonomous Institution of the University Grants
Commission.
• Certified as ISO 9001:2008.
• Affiliated to Barkatullah University, Bhopal.
• Approved by National Council for Teacher Education, New Delhi.
• Recognised by The Indian Association of Physiotherapists.
• Approved by M.P. Paramedical Council, Bhopal.
Page 4 of 32
• Programme Study Centre – IGNOU.
• 40 Glorious Years Academic Excellence..

</pre>
</font>
</h3>
</body>
</html>
Mission
<html>
<head>
<title>mission</title>
</head>
<body>
<p>&nbsp</p>
<p>&nbsp</p>
<p>&nbsp</p>
<center>
<u><b>The paradigm embraced by Career College envisages: </u></b>
</center>
<p>&nbsp</p>
<h3 align="left">
<pre>
• A firm commitment to academic excellence in career achievements of the
students
ensuring a head start on the track to success, through pragmatic approaches.
• Greater opportunities to the students to augment their potential for the

development of prudence, skill, stewardship, moral values and culture through
its multifaceted curricular and co curricular activities.
• Inculcation of strong attitude in the students for the development of diverse

attributes of personality spectrum to face global challenges of 21st century
and be the proud citizens of India.
</pre>
</font>
</h3>
</body>
</html>
Departments
<html>
<head>
<title>department</title>
Page 5 of 32
</head>
<body>
<center>
<table border="1" width="800" cellpadding="20" cellspacing="2">
<p>&nbsp</p>
<tr>
<td align="center"><b>Commerce</b></td>
<td align="center"><b>Management </b></td>
</tr>
<tr>
<td align="center"><b>Computer Science</b></td>
<td align="center"><b>Microbiology</b>
</td>
</tr>
<tr>
<td align="center"><b>Biotechnology</b></td><td align="center"><b>Chemistry</b>
</td>
</tr>
<tr>
<td align="center"><b>Botany </b></td>
<td align="center"><b>Zoology</b>
</td>
</tr>
<tr>
<td align="center"><b>Biochemistry</b></td>
<td align="center"><b>Physiotherapy</b></td>
</tr>
<tr>
<td align="center"><b>Paramedical Science</b></td>
<td align="center"><b>Education </b>
</td>
</tr>
<tr>
<td align="center"><b>Library & Information Science</b></td><td
align="center"><b>Linguistic Department</b>
</td>
</tr>
</body>
</html>
Courses
<html>
<body>
Page 6 of 32
<title>courses</title>
</head>
<body>
<center>
<imgsrc="ph.png" width="700" hight="500" alt="abhi">
</body>
</html>
Facilities
<html>
<head>
<title> facilities </title>
</head>
<body>
<center>
<table border="1">
<p>&nbsp</p>
<p>&nbsp</p>
<p>&nbsp</p>
<tr><td><imgsrc="c.jpg" width="300" height="200" /></td><td><img src="b.jpg"
width="300" height="200" /></td>
</tr>
<tr>
<td align="center"><b>Central Library</b></td><td align="center"><b>Computer
Lab</b>
</td>
</tr>
<tr>
<td align="center"><b>Class Rooms</b></td>
<td align="center"><b>Laboratories</b>
</td>
</tr>
<tr>
<td align="center"><b>Sports</b></td><td align="center"><b>Hostel</b>
</td>
</tr>
<tr>
<td align="center"><b>Internet Facility</b></td>
<td align="center"><b>Auditorium</b>
</td>
</tr>
</body>
</html>
Page 7 of 32
Online Result
Exam Timetable
Photo Gallery
<html>
<head>
<title> Photo Gallery </title>
</head>
<body>
<center>
<table border="1">
<tr><td><img src="c.jpg" width="300" height="200" /></td><td><img src="b.jpg"

width="300" height="200" /></td><td><img src="e.jpg" width="300" height="200" />
</tr>
<tr><td><img src="ck.png" width="300" height="200" /></td><td><imgsrc="b.jpg"
width="300" height="200" /></td><td><imgsrc="c.jpg" width="300" height="200" />
</tr>

width="300" height="200" /></td><td><img src="c.jpg" width="300" height="200" />
</tr>

width="300" height="200" /></td><td><img src="c.jpg" width="300" height="200" />
</tr>
<tr><td><img src="e.jpg" width="300" height="200" /></td><td><img src="b.jpg"
width="300" height="200" /></td><td><img src="e.jpg" width="300" height="200" />
</tr>
</body>
</html>
Contacts
<html>
<head>
<title>contactus</title>
</head>
<body>
<center>
<table border="0">
<tr><td align="center"><img src="cus.jpg" width="598" height="524"/>
</tr>
</body>
</html>
Page 8 of 32
OUTPUT:
Hyperlink
Home About College
Page 9 of 32
Mission Departments
Courses Facilities
Online Result Exam Timetable
Photo Gallery Contacts
Page 10 of 32
3. Write an HTML documents to print the following.
1. Animal s
 Cow
 Cat
 Lion
2. Colours
 Red
 Green
 Blue
SOURCE CODE:
<html>
<head>
<title> print the following </title>
</head>
<body>
<ol type="1">
<li>Animals</li>
</ol>
<ul>
<li>Cow</li>
<li>Cat</li>
<li>Lion</li>
</ul>
<ol type="1" start="2">

<li>Colors</li>
</ol>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
</body>
</html>
Page 11 of 32
OUTPUT:
Page 12 of 32
4. Create a table with the following data.
Community Male Female

OBC 35 40
SC/ST 23 12
GEN 12 10
SOURCE CODE:
<html>
<head>
<title> Table </title>
</head>
<body>
<table width="500" border="2">
<th> Community
<th> Male
<th> Female
</th>
<tr>
<td>OBC</td><td>35</td><td>40</td>
</tr>
<tr>
<td>SC/ST</td><td>23</td><td>12</td>
</tr>
<tr>
<td>GEN</td><td>12</td><td>10</td>
</tr>
</body>
</html>
OUTPUT:
Page 13 of 32
5. Write a set of frames to show the following data.
Fruits
Animals Select any of the item shown on the
Birds left
SOURCE CODE:
Frame
<html>
<head>
<title> Frames </title>
</head>
<frameset cols="20%,*">
<frame src="mk.html" name="f1" marginwidth="20" marginheight="190"/>
<frameset rows="100%,*">
<frame src="g.html" name="f2"/>
</body>
</html>
Frame-1
<html>
<head>
<title> Contents </title>
</head>
<h1><ul>
<li><a href="fruit.html" target="f2">Fruits</a></li></br>
<li><a href="animal.html" target="f2">Animals</a></li></br>
<li><a href="bird.html" target="f2">Birds</a></li></br>

</h1>
</ul>
</body>
</html>
Page 14 of 32
Frame-2
Fruits.html
<html>
<head>
<title> Fruits </title>
</head>
<body bgcolor="CCFFFF">
<center>
<table border="1">
<p>
&nbsp
</p>
<p>
&nbsp
</p>SSSSSSSSSSSSSSSS
<tr><td><imgsrc="apple.jpg" width="500" height="400" /></td>
</tr>
<tr>
<td align="center" bgcolor="ffffff"><b>Apple</b>
</td>
</body>
</html>
Animals.html
<html>
<head>
<title> animal</title>
</head>
<center>
<table border="1">
<p>
&nbsp
</p>
<p>
&nbsp
</p>
<tr><td><imgsrc="Koala.jpg" width="500" height="400" /></td>
</tr>
<tr>
<td align="center" bgcolor="ffffff"><b>Koala</b>
</td>
</body>
</html>
Page 15 of 32
Birds.html
<html>
<head>
<title> bird </title>
</head>
<center>
<table border="1">
<p>
&nbsp
</p>
<p>
&nbsp
</p>
<td><img src="Penguins.jpg" width="500" height="400" /></td>
</tr>
<tr>
<td align="center" bgcolor="ffffff"><b>
Penguins</b>
<td>
</body>
</html>
\
OUTPUT:
Frame-1
Page 16 of 32
Fruits.html Animals.html
Birds.html
Page 17 of 32
6. Design the web page to display the following table with hyperlinks the
department name for every information inside the table.
S. No. Dept. Name Courses

UG PG
1 Computer Science Yes Yes
2 Maths Yes Yes
3 Chemistry NO Yes
4 Commerce Yes Yes
SOURCE CODE:
<html>
<head>
<title> Table with Hyperlinks </title>
</head>
<table border="1" width="600" >
<tr>
<td rowspan="2">S.No.</td>
<td rowspan="2">Department Names</td>
<td colspan="2" align="center"> Courses </td>
</tr>
<tr>
<td align="center">UG</td>
<td align="center">PG</td>
</tr>
<tr>
<td>1</td><td><a href="CS.html">Computer Science</a></td>
<td>Yes</td><td>yes</td>
</tr>
<tr>
<td>2</td><td><a href="Maths.html">Maths</a></td>
</tr>
<tr>
<td>3</td><td><a href="Chemistry.html">Chemistry</a></td>
<td>No</td><td>Yes</td>
</tr>
<tr>
<td>4</td><td><a href="Commerce.html">Commerce</a></td>
</tr>
</body>
</html>
Page 18 of 32
OUTPUT:
Hyperlinks:
ComputerScience.html
<html>
<head>
</head>
<body>
<table border="1" width="600">
<tr>
<td colspan="4" align="center">
Computer Science
</td>
</tr>
Page 19 of 32
<tr>
<td align="center"> UG
</td>
<td align="center"> PG
</td>
</tr>
<tr>
<td>
B. C. A. (3 Yr. After 10+2)</td><td rowspan="5" align="center">M. Sc. Computer
Science
</td>
</tr>
<tr>
<td>
B. Sc. Computer Science
</td>
</tr>
<tr>
<td>
B. Sc. Information Technology
</td>
</tr>
<tr>
<td>
B. Sc. Maths (PCM)
</td>
</tr>
<tr>
<td>
B. Sc. Electronics
</td>
</tr>
</body>
</html>
Page 20 of 32
OUTPUT:
Maths.html
<html>
<head>
</head>
<body>
<tr>
<td align="center" rowspan="2">
Maths
</td>
<td align="center"> UG
</td>
<td align="center">
B. Sc. Maths (PCM)
</td>
</tr>
Page 21 of 32
</td>
<td align="center">
M. Sc. Maths
</td>
</tr>
</body>
</html>
OUTPUT:
Chemistry.html
<html>
<head>
<title> chemistry </title>
</head>
<body cellspacing="5">
<table border="1" width="600" >
<tr>
<td align="center" \>
Chemistry
Page 22 of 32
</td>
</td>
<td align="center">
M. Sc. Chemistry
</td>
</tr>
</body>
</html>
OUTPUT:
Commerce.html
<html>
<head>
<title> commerce </title>
</head>
Page 23 of 32
<body>
<td rowspan="12" align="center"> Commerce
</td>
<td rowspan="8" align="center"> UG
</td>
<tr>
<td>
B. Com. Plain
</td>
</tr>
<tr>
<td>
B. Com. Tourism & Travel Mgmt.
</td>
</tr>
<tr>
<td>
B. Com. Office Mgmt. & Sec. Practice
</td>
</tr>
<tr>
<td>
B. Com. Insurance Management
</td>
</tr>
<tr>
<td>
B. Com. Tax Procedure & Practice
</td>
</tr>
<tr>
<td>
B. Com. Advertising, Sales Pro. & S. M.
</td>
</tr>
<tr>
<td>
B. Com. Computer Application
</td>
</tr>
<tr>
<td>
</tr>
</td>
<tr>
<td rowspan="3" align="center">PG
</tr>
Page 24 of 32
</td>
<tr>
<td>
M. Com. Accounts
</tr>
</td>
<tr>
<td>
M. Com. Management
</tr>
</td>
</body>
</html>
OUTPUT:
Page 25 of 32
7. Write the frameset tags and frame tags for the following frameset.
Physics.html Welcome.html Maths.html

Chemistry.html Computer.html .
SOURCE CODE:
Frame
<html>
<head>
<title>frame tags</title>
</head>
<frameset rows="100,*">
<frame src="physics.html"/>
<frameset rows="200,*">
<frame src="welcome.html"/>
<frame src="maths.html"/>
<frame src="chemistry.html"/>
<frameset cols="300%,*">
<frame src="computer.html"/>
</frameset>
</body>
</html>
Frame -1
physics.html
<html>
<head>
<title>physics</title>
</head>
<body>
<p style="font-size:40pt;color:green">
Physics.html
</p>
</body>
</html>
Frame -2
welcome.html
Page 26 of 32
<html>
<head>
<title>welcome</title>
</head>
<body>
<p style="font-size:80pt;color:green;">
Welcome.html
</p>
</body>
</html>
Frame -3
maths.html
<html>
<html>
<head>
<title>maths</title>
</head>
<body>
Maths.html
</p>
Frame -4
chemistry.html
<html>
<head>
<title>chemistry</title>
</head>
<body>
<center>
Chemistry.html
</p>
</body>
</html>
Frame -5
computer.html
<html>
<head>
Page 27 of 32
<title>computer</title>
</head>
<body>
Computer.html
</p>
</body>
</html>
OUTPUT:
Page 28 of 32
8. Develop an HTML document for a web page of your favourite
teacher. Design page with an attractive background colour, text
colour & background image.
SOURCE CODE:
Frame
<html>
<head>
<title> Frames </title>
</head>
<frame src="new1.html" name="f1" scrolling="no"/>
<frame src="new.html" name="f2"/>
</html>
Frame -1
<html>
<head>
<title> frame-1 </title>
</head>
<style type="text/css">
h1{font-size:22pt;font-name:arial;color:red;}
h2{font-size:14pt;font-name:cobole;color:blue;}
body{background:ff0000;}
</style>
<body bgcolor="F0F060">
<h1 align="center">
<img src="TE.png" width="450" height="200" alt="abhi">
</h1>
<h1>
Shri S.K AACHARYA
</h1>
<h2>
was My Favorite Teacher he is a good teacher who is very popular in our school. He
commands respect from most of the students with the exception of a few wicked and
idle boys. He is widely acclaimed as a good teacher since he does not inflict severe
punishment even on the dull boys. His method of teaching is systematic and
convincing that makes some sense even for dull and idle students. Though he
teaches us English and Mathematics, he has knowledge in almost all subjects. He
never hankers after cheap popularity nor does he ever preach one practice which he
himself cannot practice. His open mindedness and staunch opposition to any act of
injustice are the features to be admired by teachers and students as well. His
popularity is never lowered in the estimation of the public also.
</h2>
</body>
Page 29 of 32
</html>
Frame -2
<html>
<head>
<title> frame-2 </title>
</head>
<style type="text/css">
h1{font-size:15pt;font-name:arial;color:blue;}
h2{font-size:30pt;font-name:cobole;}
body{background:ff0000;}
</style>
<body bgcolor="F0F060">
<h1>
His dealings are excellent. His knowledge in English and mathematics is vast since
he is well-read and has a vast knowledge. He has parental care and affection for all
of us and he sees that we are proper in our behaviour and are progressing in our
studies.
We enjoy his teachings and he makes his classes very interesting by citing examples
from day to day happenings and from books outside our courses. He stimulates us to
make our activities greater. He is always loving and affectionate and never a tyrant
or a hard hearted one.
As regards his extracurricular activities he is ahead of others in our school. He is a
fluent speaker and a good story writer. We are full of praise for his worthiness. The
skill in teaching has made him a lovable teacher for us in the school.
</h1>
<h1 align="center">
<img src="teacher.jpg" width="400" height="250" alt="abhi">
</h1>
</body>
</html>
Page 30 of 32
OUTPUT:
Page 31 of 32
9. HTML image Examples.
SOURCE CODE:
<html>
<head>
<title> image Examples </title>
</head>
<body bgcolor="FF0066">
<center>
<p>
&nbsp
</p>
<p>
&nbsp
</p>
<p>
&nbsp
</p>
<img src="abhi.jpg" width="700" hight="500" alt="abhi">
</body>
</html>
OUTPUT:
Page 32 of 32

HTML Practical File

Uploaded by

Copyright:

Available Formats

HTML Practical File

Uploaded by

Document Information

Original Description:

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 Practical File

Uploaded by

Copyright:

Available Formats

1.

Display your family information with background and other

Father Name - Shri R.K. Sharma

<frameset rows="75,*" >

<frameset cols="100 ,*">

• Accredited at ‘A’ level by (NAAC) National Assessment and Accreditation

• Certified as ISO 9001:2008.

• Affiliated to Barkatullah University, Bhopal.

• Approved by National Council for Teacher Education, New Delhi.

• Recognised by The Indian Association of Physiotherapists.

• Approved by M.P. Paramedical Council, Bhopal.

• 40 Glorious Years Academic Excellence..

• Greater opportunities to the students to augment their potential for the

• Inculcation of strong attitude in the students for the development of diverse

<tr><td><img src="c.jpg" width="300" height="200" /></td><td><img src="b.jpg"

<tr><td><img src="c.jpg" width="300" height="200" /></td><td><img src="b.jpg"

<tr><td><img src="c.jpg" width="300" height="200" /></td><td><img src="b.jpg"

Home About College

Online Result Exam Timetable

Photo Gallery Contacts

<ol type="1" start="2">

Community Male Female

<li><a href="fruit.html" target="f2">Fruits</a></li></br>

<li><a href="animal.html" target="f2">Animals</a></li></br>

<li><a href="bird.html" target="f2">Birds</a></li></br>

S. No. Dept. Name Courses

Physics.html Welcome.html Maths.html

You might also like