HTML practicals

of 32
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:

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>

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

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.

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>

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>

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>

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>

of 32
OUTPUT:
Hyperlink
Home About College

of 32
Online Result Exam Timetable
Mission Departments
Courses Facilities
Photo Gallery Contacts

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>

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:

of 32
5. Write a set of frames to show the following data.
Fruits
Animals
Birds
Select any of the item shown on the
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>

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>

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

of 32
Fruits.html Animals.html
Birds.html

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>

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>

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>

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>

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

of 32
</td>
</td>
<td align="center">
M. Sc. Chemistry
</td>
</tr>
</body>
</html>
OUTPUT:
Commerce.html
<html>
<head>
<title> commerce </title>
</head>

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>

of 32
</td>
<tr>
<td>
M. Com. Accounts
</tr>
</td>
<tr>
<td>
M. Com. Management
</tr>
</td>
</body>
</html>
OUTPUT:

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

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>

of 32
<title>computer</title>
</head>
<body>
Computer.html
</p>
</body>
</html>
OUTPUT:

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>

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>

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:

HTML practicals

More Related Content

What's hot

Viewers also liked

Similar to HTML practicals

Recently uploaded

HTML practicals