HTML Lab Works

Date : May 2 ,2023

Q1. Make following table.
Marks Division of Grade -9
SN Subject Name Marks Allotment
Theory Practical
1 English 75 25
2 Nepali 75 25
3 Science 75 25
4 C. Maths 75 25
5 Social 75 25
6 O. Maths 75 25
7 Computer 50 50

<table border="1" width="100%"> <caption>Marks Division of Grade -9</caption> <tbody><tr> <th rowspan="2">SN</th> <th rowspan="2">Subject Name</th> <th colspan="2">Marks Allotment</th> </tr> <tr> <th>Theory</th> <th>Practical</th> </tr> <tr> <td>1</td> <td>English</td> <td>75</td> <td>25</td> </tr> <tr> <td>2</td> <td>Nepali</td> <td>75</td> <td>25</td> </tr> <tr> <td>3</td> <td>Science</td> <td>75</td> <td>25</td> </tr> <tr> <td>4</td> <td>C. Maths</td> <td>75</td> <td>25</td> </tr> <tr> <td>5</td> <td>Social</td> <td>75</td> <td>25</td> </tr> <tr> <td>6</td> <td>O. Maths</td> <td>75</td> <td>25</td> </tr> <tr> <td>7</td> <td>Computer</td> <td>50</td> <td>50</td> </tr> </tbody></table>
  1. Make a HTML document to display the given paragraph:
    2. Computer Network
    A computer network, often simply referred to as a network, is collection of hardware components and computers interconnected by communication channels that allow sharing of resources and information. Where at least once process in one device is able to send/receive data to/from at least one process residing in a remote device, then the two devices are said to be in a network.

    <html>
    <head>
      <title> Q.N.1 </title>
    </head>
    <body>
    <div style="border: 1px solid green; padding: 10px; text-align:justify;"> <center> <b><u>
    Computer Network
    </u></b> </center>
    <p>
    A <B>computer network</B>, often simply referred to as a network, is collection of hardware components and computers interconnected by <U>communication</U> channels that allow sharing of resources and information. Where at least once process in one device is able to <B>send/receive</B> data to/from at least one process residing in a remote device, then the two devices are said to be in a network. </p>
    </div> </body>
    </html>
  2. Make a HTML document which shows following contents:
    1. (a+b)2 = a2+ 2ab + b2
    2. (a-b)2 = a2-2ab + b2
    3. (a+b)3= a3-3a2b + 3ab2+ b3
    4. (a-b)3= a3-3a2 b + 3ab2 -b3
    5. (a+b)4=a4+4a3b+6a2b2+4ab3+b4
    6. 2H2+O2→2H2O
    7. CH4+O2→CO2+2H2O
    8. Zn+H2SO4→ZnSO4+H2↑
    9. H2SO2 + 2NaOH→Na2SO4 +2H 2O
    10. 2N2 + 5O2→2Na2O5
    <html> <head>   <title> Q.N.2 </title> </head> <body> <ol type="i">  <li> (a+b)<sup>2</sup> = a<sup>2</sup>+ 2ab + b<sup>2</sup></li>  <li> (a-b)<sup>2</sup> = a<sup>2</sup>-2ab + b<sup>2</sup></li>   <li> (a+b)<sup>3</sup>= a<sup>3</sup>-3a<sup>2</sup>b + 3ab<sup>2</sup>+ b<sup>3</sup></li> <li> (a-b)<sup>3</sup>= a<sup>3</sup>-3a<sup>2</sup> b + 3ab<sup>2</sup> -b<sup>3</sup></li> <li>(a+b)<sup>4</sup>=a<sup>4</sup>+4a<sup>3</sup>b+6a<sup>2</sup>b<sup>2</sup>+4ab<sup>3</sup>+b<sup>4</sup></li> <li> 2H<sub>2</sub>+O<sub>2</sub>&rarr;2H<sub>2</sub>O</li> <li>CH<sub>4</sub>+O<sub>2</sub>&rarr;CO<sub>2</sub>+2H<sub>2</sub>O</li> <li>Zn+H<sub>2</sub>SO<sub>4</sub>&rarr;ZnSO<sub>4</sub>+H<sub>2</sub>&uarr;</li> <li> H<sub>2</sub>SO<sub>2</sub> + 2NaOH&rarr;Na<sub>2</sub>SO<sub>4</sub> +2H <sub>2</sub>O</li> <li>2N<sub>2</sub> + 5O<sub>2</sub>&rarr;2Na<sub>2</sub>O<sub>5</sub></li> </ol> </body> </html>
  3. Make a HTML document to display all levels of heading tag, where header text is Computer Science.
    4. <html>
    <head>
      <title> Q.N.3 </title>
    </head>
    <body>
    <h1> Computer Science </h1>
    <h2> Computer Science </h2>
    <h3> Computer Science </h3>
    <h4> Computer Science </h4>
    <h5> Computer Science </h5>
    <h6> Computer Science </h6>
    </body>
    </html>
  4. Scroll text (PLK computer SIR) in alternate behavior with red color background.
    5. <html>
    <head>
      <title> Q.N.4 </title>
    </head>
    <body text="white">
    <MARQUEE behavior="alternate" bgcolor="red">
    PLK computer SIR
    </MARQUEE>
    </body>
    </html>
  5. Make HTML page to display following using list:
    SAARC Countries
    1. Nepal
    2. Bhutan
    3. India
    4. Pakistan
    5. Bangladesh
    6. Sri Lanka
    7. Maldives
    8. Afghanistan
    6. <html>
    <head>
      <title> Q.N.5 </title>
    </head>
    <body>
    <B> SAARC Countries </B>
    <OL TYPE=1>
    <LI> Nepal</LI>
    <LI> Bhutan </LI>
    <LI> India </LI>
    <LI> Pakistan </LI>
    <LI> Bangladesh </LI>
    <LI> Sri Lanka </LI>
    <LI> Maldives </LI>
    <LI> Afganistan </LI>
    </OL>
    </body>
    </html>
  6. Make HTML page to display following:
    7. Looping in QBASIC
    • FOR-NEXT
    • WHILE-WEND
    • DO-WHILE LOOP
    <html>
    <head>
    <title> Q.N.6</title>
    </head>
    <body>
    <B> Looping in QBASIC </B>
    <UL TYPE=Circle>
    <LI> FOR-NEXT</LI>
    <LI> WHILE-WEND </LI>
    <LI> DO-WHILE LOOP </LI>
    </UL>
    </body>
    </html>
  7. Make following table:
    8. Table head-1 Table Head-2
    data-1 data-2
    data-3 data-4
    <html>
    <head>
    <title> Q.N.7</title>
    </head>
    <body>
    <table border="1" width="100%">
    <tr>
    <th> Table head-1</th>
    <th> Table head-2</th>
    </tr>

    <tr>
    <td> data-1</td>
    <td> data-2</td>
    </tr>

    <tr>
    <td> data-3</td>
    <td> data-4</td>
    </tr>

    </table>
    </body>
    </html>
  8. Make following table:
    9. Merged Header
    data-1 data-2
    data-3 data-4
    <html> <head> <title> Q.N.8</title> </head> <body> <table border="1" width="100%"> <tr> <th colspan=2> Merged Header</th> </tr> <tr> <td> data-1</td> <td> data-2</td> </tr> <tr> <td> data-3</td> <td> data-4</td> </tr> </table> </body> </html>
  9. Make a fancy table on seven wonders of world as given below.
    10. Seven Wonders of the World
    SN Name Country
    1 Great Wall of China China
    2 Pyramid Mexico
    3 Perta Jordan
    4 Machu Picchu Peru
    5 Christ the Redeemer Brazil
    6 Colosseum Rome
    7 Taj Mahal India
    <style> #tbl { border-collapse:collapse; width:100%; border:1px solid #90EE90; } #tbl td, #tbl th { border: 1px solid #90EE90; padding: 8px; } #tbl tr:nth-child(even) { background-color:#f2f2f2; } #tbl tr:hover { background-color:#29B6F6; color:white; } #tbl th { background-color:#04AA6D; color:white; } </style> <table id='tbl'> <caption>Seven Wonders of the World</caption> <tr> <th>SN</th> <th>Name</th> <th>Country</th> </tr> <tr> <td>1</td> <td>Great Wall of China</td> <td>China</td> </tr> <tr> <td>2</td> <td>Pyramid</td> <td>Mexico</td> </tr> <tr> <td>3</td> <td>Perta </td> <td>Jordan </td> </tr> <tr> <td>4</td> <td>Machu Picchu</td> <td>Peru</td> </tr> <tr> <td>5</td> <td>Christ the Redeemer</td> <td>Brazil</td> </tr> <tr> <td>6</td> <td>Colosseum</td> <td>Rome</td> </tr> <tr> <td>7</td> <td>Taj Mahal</td> <td>India</td> </tr> </table>
  10. Create a web page using HTML and insert any two pictures of world heritage sites of Nepal with their brief description in a paragraph.
    11. <html>
    <head>
    <title> Q.N.9</title>
    </head>
    <body>
    <center><h1> World Heritage Sites of Nepal</h1></center>
    <h1> Pashupatinath Temple</h1>
    <img src="https://drive.google.com/uc?export=view&id=1vNl74XBjmxJ0bC7bJW-tRLP7qttlLL7K">

    <p align="justify">
    The Pashupatinath Temple is a famous and sacred Hindu temple 
    complex that is located on the banks of the Bagmati River, approximately 
    5 km north-east of Kathmandu in the eastern part of Kathmandu Valley, 
    the capital of Nepal. The temple serves as the seat of Pashupatinath. 
    This temple complex was inscribed on the UNESCO World Heritage Sites's list in 1979.
    </p>

    <hr size=4 color=Blue>
    <h1> Chitwan National Park</h1>
    <img src="https://drive.google.com/uc?export=view&id=1mYV5XJb-TVdJthLnBR9-NCy7uD57EC4b">
    <p align="justify">
    Chitwan National Park is the first national park in Nepal. It was established in 1973 and granted the status of a World Heritage Site in 1984. It covers an area of 952.63 km2 (367.81 sq mi) and is located in the subtropical Inner Terai lowlands of south-central Nepal in the districts of Nawalpur, Parsa, Chitwan and Makwanpur. In altitude it ranges from about 100 m (330 ft) in the river valleys to 815 m (2,674 ft) in the Churia Hills.
    In the north and west of the protected area the Narayani-Rapti river system forms a natural boundary to human settlements. Adjacent to the east of Chitwan National Park is Parsa National Park, contiguous in the south is the Indian Tiger Reserve Valmiki National Park. The coherent protected area of 2,075 km2 (801 sq mi) represents the Tiger Conservation Unit (TCU) Chitwan-Parsa-Valmiki, which covers a 3,549 km2 (1,370 sq mi) huge block of alluvial grasslands and subtropical moist deciduous forests.
    </p>

    </body>
    </html>
  11. Make HTML document describing your computer teacher with an image.
    12. <html>
    <head>
    <title> Q.N.10</title>
    </head>
    <body>
    <center><h1> Our Computer Teacher</h1></center>
    <h1> Er. Purushottam Lal Karn</h1>
    <img src="https://drive.google.com/uc?export=view&id=1pOa099tcHcHhKtyqB-gNvNfr1ke-qj_h" align="right" border='1'>

    <p>
    Describe your computer teacher in your own words
    </p>

    </body>
    </html>
  12. Create a Record Entry Form as given below:
    13. Record Entry Form Image:

    Student Name:

    Class:

    Address:

    Telephone Number:

    Gender: Male Female

    Hobby: Singing Dancing Painting

    <html>
    <head>
    <title> Record Entry Form</title>
    </head>
    <body>

    <form>
    <fieldset>
    <legend> Record Entry Form</legend>
    Image:<input type="file" name="photo"> <br><br>
    Student Name:<input type="text" name="s_name"> <br><br>
    Class: <select>
    <option> IX- Coryana</option>
    <option> IX- Gallica</option>
    <option> IX- Filipes</option>
    <option> IX- Hugonis</option>
    <option> IX- Odorata</option>
    </select><br><br>
    Address:<input type="text" name="address"> <br><br>
    Telephone Number:<input type="text" name="tel_number"> <br><br>
    Gender: <input type="radio" name="gender" > Male
    <input type="radio" name="gender"> Female <br><br>
    Hobby:  <input type="checkbox" name="c1"> Singing
    <input type="checkbox" name="c2"> Dancing
    <input type="checkbox" name="c3"> Painting <br><br>
    <input type="submit" value="SUBMIT">
    <input type="reset" value="RESET">
    </fieldset>
    </form>

    </body>
    </html>
  13. Make a HTML page called "index.html" and give the links to QN. 1 to QN. 12.

    14. Write your Full Name
    Class Section
    1st Term Project Work -
    Under guidance of Er. Purushottam Lal Karn

    Name of Students ©

    Goto top
    <html> <head>   <title> Q.N.12 </title> </head> <body> <style> .projectwork h3{ background-color:#ae50f2; color:#ffffff; border-style:solid; border-radius:10px; text-align:center; } .projectwork button{ background-color:#008494; color:white; border:none; border-radius:10px; padding: 15px 32px; margin: 5px; font-size:16px; font-family:candara; width:auto; } .projectwork a{ color:white; text-decoration:underline; } td{ text-align:center; }; </style> <div class="projectwork"> <h3> Write your Full Name <br /> Class Section <br /> 1st Term Project Work - <span id="a1"></span> <br /> Under guidance of Er. Purushottam Lal Karn </h3> <table width='100%'> <tbody><tr> <td><button> <a href="https://plkcomputersir.blogspot.com/p/computer-9.html">Computer - IX </a></button></td> <td><button> Question No-1</button> </td></tr> <tr> <td><button> Question No-2</button> </td> <td><button> Question No-3</button> </td> </tr><tr> <td><button> Question No-4</button> </td><td><button> Question No-5</button> </td></tr> <tr> <td><button> Question No-6</button> </td><td><button> Question No-7</button> </td> </tr> <tr> <td><button> Question No-8</button></td> <td><button> Question No-9</button> </td> </tr><tr> <td><button> Question No-10</button></td> <td><button> Question No-11</button></td></tr> </tbody> </table> <h3> Name of Students &#169; <span id="a2"></span></h3> <span style="background-color: #fe4c78; color: blue; float: right;"><span style="font-weight: 700;"><a href="#top">Goto top</a> </span></span> </div> <script> var m = new Date(); var dateplk2 = m.getFullYear(); document.getElementById("a1").innerText = dateplk2; </script> <script> var n = new Date(); var dateplk1 = n.getFullYear(); document.getElementById("a2").innerText = dateplk1; </script> </body> </html>