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> <h2 style="font-size:25pt;"> <u><b> CAREER COLLEGE – AT A GLANCE </u></b> <h3 align="left"> <font face="Consolas"> <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> <h2 style="font-size:25pt;"> <u><b>The paradigm embraced by Career College envisages: </u></b> </center> <p>&nbsp</p> <h3 align="left"> <font face="Consolas"> <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> <tr><td><img src="c.jpg" width="300" height="200" /></td><td><img src="b.jpg" width="300" height="200" /></td><td><img src="c.jpg" width="300" height="200" /> </tr> <tr><td><img src="c.jpg" width="300" height="200" /></td><td><img src="b.jpg" 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>

http://www.bubhopal.nic.in/


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

OUTPUT:

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> <body vlink="0000FF"> <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> <body bgcolor="CCFFFF"> <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> <body bgcolor="CCFFFF"> <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> <body vlink="0000FF"> <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> <td>Yes</td><td>yes</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> <td>Yes</td><td>yes</td> </tr> </body> </html>

of 32

OUTPUT:

Hyperlinks:

ComputerScience.html

<html> <head> <title> Table with Hyperlinks </title> </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> <title> Table with Hyperlinks </title> </head> <body> <table border="1" width="600"> <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 align="center"> PG </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 align="center"> PG </td> <td align="center"> M. Sc. Chemistry </td> </tr> </body> </html>

OUTPUT:

Commerce.html

<html> <head> <title> commerce </title> </head>

of 32

<body> <table border="2" width="600"> <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"/> <frameset cols="300,*"> <frame src="maths.html"/> <frameset cols="400,*"> <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> <p style="font-size:30pt;color:green"> Maths.html </p>

Frame -4

chemistry.html

<html> <head> <title>chemistry</title> </head> <body> <center> <p style="font-size:45pt;color:green"> Chemistry.html </p> </body> </html>

Frame -5

computer.html

<html> <head>

of 32

<title>computer</title> </head> <body> <p style="font-size:30pt;color:green"> 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> <frameset cols="500,*"> <frame src="new1.html" name="f1" scrolling="no"/> <frameset cols="1000,*"> <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

OUTPUT:

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

Education

Transcript of HTML practicals