Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML practicals

Hey friends,
This is the Basic HTML programs very Good for the html beginners i share with you .for more query contact my e-mail address

  • Be the first to comment

HTML practicals

  1. 1. Page 1 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:
  2. 2. Page 2 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>
  3. 3. Page 3 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="" target="f3"> Online Result </a></li><br/> <li><a href="" 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
  4. 4. Page 4 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.
  5. 5. Page 5 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>
  6. 6. Page 6 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>
  7. 7. Page 7 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>
  8. 8. Page 8 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>
  9. 9. Page 9 of 32 OUTPUT: Hyperlink Home About College
  10. 10. Page 10 of 32 Online Result Exam Timetable Mission Departments Courses Facilities Photo Gallery Contacts
  11. 11. Page 11 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>
  12. 12. Page 12 of 32 OUTPUT:
  13. 13. Page 13 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:
  14. 14. Page 14 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>
  15. 15. Page 15 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>
  16. 16. Page 16 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
  17. 17. Page 17 of 32 Fruits.html Animals.html Birds.html
  18. 18. Page 18 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>
  19. 19. Page 19 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>
  20. 20. Page 20 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>
  21. 21. Page 21 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>
  22. 22. Page 22 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
  23. 23. Page 23 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>
  24. 24. Page 24 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>
  25. 25. Page 25 of 32 </td> <tr> <td> M. Com. Accounts </tr> </td> <tr> <td> M. Com. Management </tr> </td> </body> </html> OUTPUT:
  26. 26. Page 26 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
  27. 27. Page 27 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>
  28. 28. Page 28 of 32 <title>computer</title> </head> <body> <p style="font-size:30pt;color:green"> Computer.html </p> </body> </html> OUTPUT:
  29. 29. Page 29 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>
  30. 30. Page 30 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>
  31. 31. Page 31 of 32 OUTPUT:
  32. 32. Page 32 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:

    Be the first to comment

    Login to see the comments

  • ShrawanKansi

    Oct. 1, 2020
  • SarthakNawaria

    Oct. 24, 2020
  • BhawnaThawani

    Nov. 28, 2020
  • MayanJindal

    Dec. 11, 2020
  • AdityaSaini83

    Dec. 17, 2020
  • NilakshiGupta5

    Dec. 30, 2020
  • AadiJain18

    Jan. 9, 2021
  • SantoshSingh706

    Jan. 12, 2021
  • UshaGoswami1

    Jan. 29, 2021
  • KartikeyPandey38

    Jan. 29, 2021
  • DeepakChaudhary45

    Feb. 11, 2021
  • NarendarKumar25

    Mar. 2, 2021
  • TanmaySiwach

    Mar. 6, 2021
  • AnandYadav236

    Mar. 7, 2021
  • VinodKumar3760

    Mar. 23, 2021
  • TrishanMishra

    Apr. 24, 2021
  • ErGauravYadav

    May. 15, 2021
  • AbinayaElangovan12

    Jun. 16, 2021
  • ShrilalipiSwain

    Jul. 13, 2021
  • RohitYadav908

    Jul. 27, 2021

Hey friends, This is the Basic HTML programs very Good for the html beginners i share with you .for more query contact my e-mail address


Total views


On Slideshare


From embeds


Number of embeds