Session 2025 – 26  |  DCA109
← Return to Learning Hub

HTML Practical File Practical Based on DCA106 · Government College Lawan

Subject: DCA109 – Practical based on DCA106
Duration: 3 Hours
Total Marks: 50
Website: sidsharmaji.in

📋 Scheme of Examination

Programme 1 15
Programme 2 15
Viva 10
Practical Copy + Internal Record 10
Total 50

📌 Index of Practicals

Q.1 DCA Table Q.2 Unordered List Q.3 Ordered List Q.4 Hyperlink + Marquee Q.5 Frames Q.6 Blue BG Page Q.7 Admission Table Q.8 Car Price Table Q.9 Student Records Q.10 Embed Flash Q.11 Marks + Image Q.12 Rahul's Marks Q.13 Simple Form Q.14 Image BG Page Q.15 Login Form Q.16 Registration Form Q.17 Checkboxes Form Q.18 Chemical Eqns Q.19 Nested Lists Q.20 Cricket Players
Q.01

Write an HTML program to create the following table (Class, Subject1, Subject2, Subject3 – DCA I, II, III)

HTML Code
<!DOCTYPE html>
<html>
<head>
  <title>Q1 – DCA Table</title>
</head>
<body>
  <table border="1" cellpadding="8" cellspacing="0">
    <tr>
      <th>Class</th>
      <th>Subject1</th>
      <th>Subject2</th>
      <th>Subject3</th>
    </tr>
    <tr>
      <td>DCA I</td><td>Visual Basic</td><td>PC Software</td><td>Electronics</td>
    </tr>
    <tr>
      <td>DCA II</td><td>C++</td><td>DBMS</td><td>English</td>
    </tr>
    <tr>
      <td>DCA III</td><td>Java</td><td>Multimedia</td><td>CSA</td>
    </tr>
  </table>
</body>
</html>
Output
Q.02

Write an HTML program to create an Unordered List (C, C++, Fortran, COBOL)

HTML Code
<!DOCTYPE html>
<html>
<head><title>Q2 – Unordered List</title></head>
<body>
  <h3>Programming Languages</h3>
  <ul type="disc">
    <li>C</li>
    <li>C++</li>
    <li>Fortran</li>
    <li>COBOL</li>
  </ul>
</body></html>
Output
Q.03

Write an HTML program to create an Ordered List (Java, Visual Basic, BASIC, COBOL)

HTML Code
<!DOCTYPE html>
<html>
<head><title>Q3 – Ordered List</title></head>
<body>
  <h3>Programming Languages</h3>
  <ol type="1">
    <li>Java</li>
    <li>Visual Basic</li>
    <li>BASIC</li>
    <li>COBOL</li>
  </ol>
</body></html>
Output
Q.04

Write an HTML program to demonstrate hyperlinking between two web pages, create a marquee and insert an image

HTML Code – Page 1 (index.html)
<!DOCTYPE html>
<html>
<head><title>Q4 – Page 1</title></head>
<body bgcolor="lightyellow">
  <h2>Welcome to Page 1</h2>
  <!-- Marquee -->
  <marquee behavior="scroll" direction="left" bgcolor="yellow">
    Welcome to DCA HTML Practical!
  </marquee>
  <!-- Image -->
  <img src="logo.jpg" alt="College Logo" width="100" height="100">
  <br><br>
  <!-- Hyperlink to page 2 -->
  <a href="page2.html">Go to Page 2</a>
</body></html>

<!-- page2.html -->
<!DOCTYPE html>
<html>
<head><title>Q4 – Page 2</title></head>
<body bgcolor="lightgreen">
  <h2>This is Page 2</h2>
  <a href="index.html">Back to Page 1</a>
</body></html>
Output Preview
Q.05

Write an HTML program to create frames with 3 columns (Width = 30%, 30%, 40%)

HTML Code
<!DOCTYPE html>
<html>
<head><title>Q5 – Frames</title></head>
<frameset cols="30%,30%,40%">
  <frame src="frame1.html" name="left">
  <frame src="frame2.html" name="middle">
  <frame src="frame3.html" name="right">
  <noframes>
    <p>Your browser does not support frames.</p>
  </noframes>
</frameset>
</html>

<!-- frame1.html -->
<body bgcolor="lightblue"><h3>Frame 1 (30%)</h3></body>

<!-- frame2.html -->
<body bgcolor="lightyellow"><h3>Frame 2 (30%)</h3></body>

<!-- frame3.html -->
<body bgcolor="lightgreen"><h3>Frame 3 (40%)</h3></body>
Output Preview
Q.06

Write an HTML program to create a web page with a blue background and styled "New Delhi" text

HTML Code
<!DOCTYPE html>
<html>
<head><title>Q6 – New Delhi</title></head>
<body bgcolor="blue" text="white">
  <h1 align="center">
    <i><font face="Times New Roman" size="6">New Delhi</font></i>
  </h1>
  <p align="justify">
    <i>New Delhi, the capital and the third largest city of India
    is a fusion of the ancient and the modern. The refrains of
    the Muslim dynasties with its architectural delights, give
    the majestic ambience of the bygone era.</i>
  </p>
</body></html>
Output
Q.07

Write an HTML program to create the Admission table (Course, OC, BC, MBC, SC/ST, Total)

HTML Code
<!DOCTYPE html>
<html>
<head><title>Q7 – Admission Table</title></head>
<body>
  <h3 align="center">Admission</h3>
  <table border="1" cellpadding="8" align="center">
    <tr>
      <th>Course</th><th>OC</th><th>BC</th><th>MBC</th><th>SC/ST</th><th>TOTAL</th>
    </tr>
    <tr>
      <td>Computer Science</td><td>9</td><td>18</td><td>5</td><td>5</td><td>37</td>
    </tr>
    <tr>
      <td>Commerce</td><td>14</td><td>25</td><td>6</td><td>5</td><td>50</td>
    </tr>
    <tr>
      <td colspan="5"><b>Grand Total</b></td><td>87</td>
    </tr>
  </table>
</body></html>
Output
Q.08

Write an HTML program to create the Car Price List table (Maruti, Tata, Ford with colspan)

HTML Code
<!DOCTYPE html>
<html>
<head><title>Q8 – Car Price List</title></head>
<body>
  <h3 align="center">Car Price List</h3>
  <table border="1" cellpadding="8" align="center">
    <!-- Header Row 1: Company names -->
    <tr>
      <th colspan="2">Maruti</th>
      <th colspan="2">Tata</th>
      <th colspan="2">Ford</th>
    </tr>
    <!-- Header Row 2: Model/Price -->
    <tr>
      <th>Model</th><th>Price</th>
      <th>Model</th><th>Price</th>
      <th>Model</th><th>Price</th>
    </tr>
    <tr>
      <td>Maruti 800</td><td>2 Lac</td>
      <td>Sumo</td><td>2 Lac</td>
      <td>Ikon</td><td>5 Lac</td>
    </tr>
    <tr>
      <td>Omni</td><td>3 Lac</td>
      <td>Scorpio</td><td>3 Lac</td>
      <td>Gen</td><td>2 Lac</td>
    </tr>
  </table>
</body></html>
Output
Q.09

Write an HTML program to create Students Records table (rowspan used for Name)

HTML Code
<!DOCTYPE html>
<html>
<head><title>Q9 – Students Records</title></head>
<body>
  <h3 align="center">Students Records</h3>
  <table border="1" cellpadding="8" align="center">
    <tr>
      <th>Name</th><th>Subject</th><th>Marks</th>
    </tr>
    <tr>
      <td rowspan="2">Arun</td>
      <td>Java</td><td>70</td>
    </tr>
    <tr>
      <td>C</td><td>80</td>
    </tr>
    <tr>
      <td rowspan="2">Ashish</td>
      <td>Java</td><td>75</td>
    </tr>
    <tr>
      <td>C</td><td>69</td>
    </tr>
  </table>
</body></html>
Output
Q.10

Create an HTML document and embed a Flash movie (SWF) in it

HTML Code
<!DOCTYPE html>
<html>
<head><title>Q10 – Embed Flash Movie</title></head>
<body>
  <h3>Embedded Flash Movie</h3>
  <!-- Method 1: Using object tag -->
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
          width="400" height="300">
    <param name="movie" value="movie.swf">
    <param name="play"  value="true">
    <!-- Fallback: embed tag -->
    <embed src="movie.swf"
           width="400" height="300"
           type="application/x-shockwave-flash"
           play="true">
  </object>
</body></html>
Output Note
Q.11

Write HTML to display Subject Marks table (Max, Min, Obtain) and insert an image

HTML Code
<!DOCTYPE html>
<html>
<head><title>Q11 – Marks Table with Image</title></head>
<body>
  <img src="college.jpg" alt="College" width="150" align="right">
  <h3>Subject Marks</h3>
  <table border="1" cellpadding="8">
    <tr><th>Subject</th><th>Max</th><th>Min</th><th>Obtain</th></tr>
    <tr><td>Java</td><td>100</td><td>33</td><td>75</td></tr>
    <tr><td>Multimedia</td><td>100</td><td>33</td><td>70</td></tr>
    <tr><td>Operating System</td><td>100</td><td>33</td><td>68</td></tr>
    <tr><td>C++</td><td>100</td><td>33</td><td>73</td></tr>
  </table>
</body></html>
Output
Q.12

Write HTML to display Rahul's marks table (Name + Roll No with rowspan)

HTML Code
<!DOCTYPE html>
<html>
<head><title>Q12 – Rahul Marks</title></head>
<body>
  <table border="1" cellpadding="8">
    <tr>
      <th>Name</th>
      <td colspan="3">Rahul</td>
    </tr>
    <tr>
      <th>Roll No.</th>
      <td colspan="3">101</td>
    </tr>
    <tr>
      <th>Subject</th><th>Max</th><th>Min</th><th>Obtain</th>
    </tr>
    <tr><td>Java</td><td>100</td><td>33</td><td>75</td></tr>
    <tr><td>Multimedia</td><td>100</td><td>33</td><td>70</td></tr>
  </table>
</body></html>
Output
Q.13

Write an HTML program to create a form with Name, Roll No, Age, DOB fields

HTML Code
<!DOCTYPE html>
<html>
<head><title>Q13 – Student Form</title></head>
<body>
  <h3>Student Information Form</h3>
  <form action="#" method="post">
    Enter Name :
    <input type="text" name="name" size="30"><br><br>

    Enter Roll No :
    <input type="text" name="rollno" size="30"><br><br>

    Enter Age :
    <input type="text" name="age" size="30"><br><br>

    Enter DOB :
    <input type="text" name="dob" size="30"><br><br>

    <input type="submit" value="Submit">
    <input type="reset"  value="Reset">
  </form>
</body></html>
Output
Q.14

Write an HTML program to create a web page with an image as background and "New Delhi" text

HTML Code
<!DOCTYPE html>
<html>
<head><title>Q14 – Background Image</title></head>
<body background="bg.jpg" text="white">
  <h1 align="center">
    <u><b>New Delhi</b></u>
  </h1>
  <p align="justify">
    <i>New Delhi, the capital and the third largest city of India
    is a fusion of the ancient and the modern. The refrains of
    the Muslim dynasties with its architectural delights, give
    the majestic ambience of the bygone era.</i>
  </p>
  <p align="justify">
    <i>On the other side New Delhi, the imperial city built by
    British, reflect the fast paced present. The most fascinating
    of all is the character of Delhi which varies from the 13th
    present century mausoleum of the Lodi kings to ultra modern
    glass skyscrapers.</i>
  </p>
</body></html>
Output
Q.15

Create an HTML Login Form (USERNAME, PASSWORD with password field)

HTML Code
<!DOCTYPE html>
<html>
<head><title>Q15 – Login Form</title></head>
<body>
  <h3>Login Form</h3>
  <form action="#" method="post">
    USERNAME :
    <input type="text" name="username" size="25"><br><br>

    PASSWORD :
    <input type="password" name="password" size="25">
    <br><br>
    <small>When user types characters in a password field,
    the browser displays asterisks or bullets instead of
    characters.</small>
    <br><br>
    <input type="submit" value="Submit Query">
  </form>
</body></html>
Output
Q.16

Create an HTML form with Firstname, Lastname, Gender (Radio), Subjects (Select dropdown)

HTML Code
<!DOCTYPE html>
<html>
<head><title>Q16 – Registration Form</title></head>
<body>
  <h3>Registration Form</h3>
  <form action="#" method="post">
    FIRSTNAME : <input type="text" name="fname"><br><br>
    LASTNAME  : <input type="text" name="lname"><br><br>

    GENDER:<br>
    Male   <input type="radio" name="gender" value="male">
    Female <input type="radio" name="gender" value="female">
    <br><br>

    SUBJECTS :
    <select name="subject" size="4">
      <option>Multimedia</option>
      <option>Java</option>
      <option>Operating System</option>
      <option>DSA</option>
    </select>
    <br><br>
    <input type="submit" value="Submit Query">
  </form>
</body></html>
Output
Q.17

Create an HTML form with Name, Roll No, Subjects (Checkboxes), Class (Select dropdown)

HTML Code
<!DOCTYPE html>
<html>
<head><title>Q17 – Student Form with Checkboxes</title></head>
<body>
  <h3>Student Form</h3>
  <form action="#" method="post">
    Enter your name  : <input type="text" name="name"><br><br>
    Enter your rollno: <input type="text" name="roll"><br><br>

    Subjects:<br>
    <input type="checkbox" name="sub" value="java"> Java<br>
    <input type="checkbox" name="sub" value="c"> C<br>
    <input type="checkbox" name="sub" value="vb"> Visual Basic<br>
    <input type="checkbox" name="sub" value="cpp"> C++<br><br>

    Class :
    <select name="class" size="4">
      <option>BCA I</option>
      <option>BCA</option>
      <option>BCA II</option>
      <option>BCA III</option>
    </select>
    <br><br>
    <input type="submit" value="Submit Query">
  </form>
</body></html>
Output
Q.18

Write HTML coding for chemical equations using superscript and subscript tags

HTML Code
<!DOCTYPE html>
<html>
<head><title>Q18 – Chemical Equations</title></head>
<body>
  <h3>Chemical Equations</h3>
  <p>
    C<sub>2</sub>H<sub>5</sub>OH + PCL<sub>5</sub>
    = C<sub>2</sub>H<sub>5</sub>CL + POCL<sub>3</sub>
    + HCL
  </p>
  <p>
    4H<sub>3</sub>PO<sub>3</sub>
    = 3H<sub>3</sub>PO<sub>4</sub>
    + PH<sub>3</sub>
  </p>
  <p>
    PCL<sub>3</sub> + CL<sub>2</sub>
    = PCL<sub>5</sub>
  </p>
</body></html>
Output
Q.19

Write HTML to display nested lists – Actors (circle) and Actress (square) sub-lists

HTML Code
<!DOCTYPE html>
<html>
<head><title>Q19 – Nested Lists</title></head>
<body>
  <ul type="disc">
    <li>Actors
      <ul type="circle">
        <li>Bruce Willis</li>
        <li>Gerard Butler</li>
        <li>Vin Diesel</li>
        <li>Bradd Pitt</li>
      </ul>
    </li>
    <li>Actress
      <ul type="square">
        <li>Julia Roberts</li>
        <li>Angelina Jolie</li>
        <li>Kate Winslet</li>
        <li>Cameron Diaz</li>
      </ul>
    </li>
  </ul>
</body></html>
Output
Q.20

Write HTML to display nested Cricket Players list (Ordered: Batsman, Bowler, Spinner)

HTML Code
<!DOCTYPE html>
<html>
<head><title>Q20 – Cricket Players List</title></head>
<body>
  <ol type="1">
    <li>Cricket Players
      <ol type="A">
        <li>Batsman
          <ol type="i">
            <li>Sachin Tendulkar</li>
            <li>Rahul Dravid</li>
            <li>Virendra Sehwag</li>
          </ol>
        </li>
        <li>Bowler
          <ol type="a">
            <li>Kumble</li>
            <li>Zaheer Khan</li>
            <li>Balaji</li>
          </ol>
        </li>
        <li>Spinner
          <ol type="1">
            <li>Harbhajan</li>
            <li>Kumble</li>
            <li>Kartik</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</body></html>
Output