O Level Web Designing & Publishing Practical Solutions (M2-R5)

Complete set of 30 Practical Exam Solutions with Live Output, Practice Timers, and Progress Tracking!

📚 Practical Completion Progress 0 / 30 Practiced (0%)
📑 Practical Index (Q1 - Q30)
HTML FormEasyWeightage: 10 Marks

Q1. Contact Form with Auto Focus on Name

Problem Statement: Make a Contact form with Name, Mobile No, Email ID, Comments, and Submit button with focus on the Name field at cursor load.
⏱ Practice Timer (Recommended: 8 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; padding: 15px; }
    .form-group { margin-bottom: 12px; }
    label { display: block; font-weight: bold; margin-bottom: 4px; }
    input, textarea { width: 100%; padding: 8px; box-sizing: border-box; }
    button { background: #ff6600; color: #fff; border: none; padding: 8px 16px; cursor: pointer; border-radius: 4px; }
  </style>
</head>
<body>
  <h3>Contact Form</h3>
  <form>
    <div class="form-group">
      <label>Name:</label>
      <input type="text" id="name" autofocus placeholder="Enter Name">
    </div>
    <div class="form-group">
      <label>Mobile No:</label>
      <input type="tel" placeholder="Enter Mobile No">
    </div>
    <div class="form-group">
      <label>Email ID:</label>
      <input type="email" placeholder="Enter Email">
    </div>
    <div class="form-group">
      <label>Comments:</label>
      <textarea rows="3" placeholder="Enter Comments"></textarea>
    </div>
    <button type="submit">Submit</button>
  </form>
</body>
</html>
💡 How this code works➕
The autofocus attribute automatically focuses the cursor on the Name input field when the page loads.
Live Output Window
HTML FormEasyWeightage: 10 Marks

Q2. Contact Form with Input Validation

Problem Statement: Create a Contact form with Name, Mobile No, Email ID, Comments, and Submit button, using required validation.
⏱ Practice Timer (Recommended: 8 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; padding: 15px; }
    .form-group { margin-bottom: 12px; }
    label { display: block; font-weight: bold; margin-bottom: 4px; }
    input, textarea { width: 100%; padding: 8px; box-sizing: border-box; }
    button { background: #ff6600; color: #fff; border: none; padding: 8px 16px; cursor: pointer; border-radius: 4px; }
  </style>
</head>
<body>
  <h3>Contact Form with Validation</h3>
  <form>
    <div class="form-group">
      <label>Name:</label>
      <input type="text" autofocus required placeholder="Enter Name">
    </div>
    <div class="form-group">
      <label>Mobile No:</label>
      <input type="tel" required pattern="[0-9]{10}" placeholder="10 digit mobile number">
    </div>
    <div class="form-group">
      <label>Email ID:</label>
      <input type="email" required placeholder="Enter Email">
    </div>
    <div class="form-group">
      <label>Comments:</label>
      <textarea rows="3" placeholder="Enter Comments"></textarea>
    </div>
    <button type="submit">Submit</button>
  </form>
</body>
</html>
💡 How this code works➕
Uses HTML5 built-in validation like required and regex pattern pattern="[0-9]{10}".
Live Output Window
CSS Hover EffectEasyWeightage: 10 Marks

Q3. CSS Circle with Hover Color Change

Problem Statement: Design a circle with Specifications: Width 200px, Height 200px, Background Red, Border 2px Double Line and Black. Change background to Yellow on hover.
⏱ Practice Timer (Recommended: 8 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    .circle {
      width: 200px;
      height: 200px;
      background-color: red;
      border: 2px double black;
      border-radius: 50%;
      transition: background-color 0.3s ease;
    }
    .circle:hover {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h3>Hover Circle Demo</h3>
  <div class="circle"></div>
</body>
</html>
💡 How this code works➕
Setting border-radius: 50% converts a square div into a circle, while :hover toggles color on mouse hover.
Live Output Window
HTML HyperlinkEasyWeightage: 5 Marks

Q4. HTML Hyperlink to External Website

Problem Statement: Add a hyperlink in which clicking it redirects to www.google.com.
⏱ Practice Timer (Recommended: 3 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<body>
  <h3>Hyperlink Example</h3>
  <p>Click the link below to go to Google:</p>
  <a href="https://www.google.com" target="_blank">Visit Google</a>
</body>
</html>
💡 How this code works➕
The href attribute defines the target URL, and target="_blank" opens the link in a new tab.
Live Output Window
JavaScript MathMediumWeightage: 15 Marks

Q5. JavaScript Arithmetic Calculation Program

Problem Statement: Write a JavaScript program for basic arithmetic calculations (addition, subtraction, multiplication, division).
⏱ Practice Timer (Recommended: 10 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; padding: 15px; }
    input { width: 100px; padding: 5px; margin-right: 10px; }
    button { padding: 6px 12px; margin-right: 5px; cursor: pointer; }
    #result { margin-top: 15px; font-weight: bold; font-size: 16px; color: #ff6600; }
  </style>
</head>
<body>
  <h3>Arithmetic Calculator</h3>
  <input type="number" id="num1" placeholder="Num 1">
  <input type="number" id="num2" placeholder="Num 2"><br><br>
  
  <button onclick="calc('+')">Add</button>
  <button onclick="calc('-')">Subtract</button>
  <button onclick="calc('*')">Multiply</button>
  <button onclick="calc('/')">Divide</button>

  <div id="result"></div>

  <script>
    function calc(op) {
      let n1 = parseFloat(document.getElementById('num1').value);
      let n2 = parseFloat(document.getElementById('num2').value);
      let res = 0;
      if (isNaN(n1) || isNaN(n2)) {
        document.getElementById('result').innerText = "Please enter valid numbers!";
        return;
      }
      if (op === '+') res = n1 + n2;
      else if (op === '-') res = n1 - n2;
      else if (op === '*') res = n1 * n2;
      else if (op === '/') res = n2 !== 0 ? (n1 / n2) : "Cannot divide by 0";
      
      document.getElementById('result').innerText = "Result: " + res;
    }
  </script>
</body>
</html>
💡 How this code works➕
Reads values from inputs, parses them to floats, performs the operator math, and updates the output DOM text.
Live Output Window
HTML Image LinkEasyWeightage: 5 Marks

Q6. HTML Clickable Image Demonstration

Problem Statement: Create an HTML page to demonstrate a Clickable image.
⏱ Practice Timer (Recommended: 5 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<body>
  <h3>Clickable Image Example</h3>
  <p>Click the image below to visit GyanXP:</p>
  <a href="https://www.gyanxp.com" target="_blank">
    <img src="https://via.placeholder.com/200x100?text=Click+Me" alt="Clickable Banner" style="border:2px solid #ff6600; border-radius:8px;">
  </a>
</body>
</html>
💡 How this code works➕
Nesting an <img> tag inside an <a> anchor tag turns the image into a clickable link.
Live Output Window
HTML TableEasyWeightage: 10 Marks

Q7. HTML Table (5 Rows x 4 Columns)

Problem Statement: Write an HTML program to display a table with 5 rows and 4 columns. Provide appropriate headings.
⏱ Practice Timer (Recommended: 8 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    table { width: 100%; border-collapse: collapse; text-align: left; }
    th, td { border: 1px solid #ddd; padding: 8px; }
    th { background-color: #ff6600; color: white; }
    tr:nth-child(even) { background-color: #f2f2f2; }
  </style>
</head>
<body>
  <h3>Student Academic Report Table</h3>
  <table>
    <tr>
      <th>Roll No</th>
      <th>Student Name</th>
      <th>Course</th>
      <th>Marks</th>
    </tr>
    <tr><td>101</td><td>Rahul Sharma</td><td>O Level</td><td>85%</td></tr>
    <tr><td>102</td><td>Priya Verma</td><td>A Level</td><td>90%</td></tr>
    <tr><td>103</td><td>Amit Patel</td><td>O Level</td><td>78%</td></tr>
    <tr><td>104</td><td>Neha Singh</td><td>CCC</td><td>92%</td></tr>
  </table>
</body>
</html>
💡 How this code works➕
Uses <table>, <tr>, <th>, and <td> tags to construct 1 header row + 4 data rows (5 rows total across 4 columns).
Live Output Window
JavaScript LoopsMediumWeightage: 15 Marks

Q8. JavaScript Squares and Cubes Table (0-10)

Problem Statement: Calculate the squares and cubes of numbers from 0 to 10 and display output in an HTML table.
⏱ Practice Timer (Recommended: 10 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    table { width: 300px; border-collapse: collapse; text-align: center; }
    th, td { border: 1px solid #333; padding: 6px; }
    th { background-color: #ff6600; color: #fff; }
  </style>
</head>
<body>
  <h3>Squares and Cubes (0 to 10)</h3>
  <div id="table-container"></div>

  <script>
    let html = "<table><tr><th>Number</th><th>Square</th><th>Cube</th></tr>";
    for (let i = 0; i <= 10; i++) {
      html += `<tr><td>${i}</td><td>${i * i}</td><td>${i * i * i}</td></tr>`;
    }
    html += "</table>";
    document.getElementById('table-container').innerHTML = html;
  </script>
</body>
</html>
💡 How this code works➕
A JS for loop iterates from 0 to 10, computing i*i and i*i*i and dynamically constructing the table markup.
Live Output Window
HTML Table FormattingEasyWeightage: 10 Marks

Q9. Styled Table with Double Border & Cellpadding

Problem Statement: Create a table with double border, cellpadding 5, cellspacing 5, dynamic background color, and appropriate size.
⏱ Practice Timer (Recommended: 8 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      width: 80%;
      height: 150px;
      border: 4px double #ff6600;
      border-spacing: 5px; /* Cell spacing equivalent */
      background-color: #fff8f0;
      margin: auto;
    }
    td, th {
      border: 1px solid #333;
      padding: 5px; /* Cell padding equivalent */
      text-align: center;
    }
    th { background-color: #ffe0cc; }
  </style>
</head>
<body>
  <h3 style="text-align:center;">Custom Styled Table</h3>
  <table>
    <tr>
      <th>Item Code</th>
      <th>Item Name</th>
      <th>Price</th>
    </tr>
    <tr>
      <td>P001</td>
      <td>Web Designing Book</td>
      <td>₹350</td>
    </tr>
    <tr>
      <td>P002</td>
      <td>Python Module Kit</td>
      <td>₹450</td>
    </tr>
  </table>
</body>
</html>
💡 How this code works➕
Uses CSS properties border: 4px double #ff6600, border-spacing: 5px, and padding: 5px to achieve exact legacy formatting cleanly.
Live Output Window
HTML ListsMediumWeightage: 15 Marks

Q10. HTML Ordered, Unordered & Definition Lists for Indian States

Problem Statement: List 4 states using Ordered, Unordered, and Definition lists with custom text colors and attributes.
⏱ Practice Timer (Recommended: 10 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    body { background-color: #f0f4f8; font-family: Arial; padding: 15px; }
    ol { color: red; }
    ul { color: blue; }
    dl { color: green; }
  </style>
</head>
<body>
  <h3>Indian States List Demonstration</h3>

  <h4>1. Ordered List (Numbered A, B, C...)</h4>
  <ol type="A" start="1">
    <li>Uttar Pradesh</li>
    <li>Maharashtra</li>
    <li>Rajasthan</li>
    <li>Madhya Pradesh</li>
  </ol>

  <h4>2. Unordered List (Square Bullets)</h4>
  <ul type="square">
    <li>Uttar Pradesh</li>
    <li>Maharashtra</li>
    <li>Rajasthan</li>
    <li>Madhya Pradesh</li>
  </ul>

  <h4>3. Definition List</h4>
  <dl>
    <dt><b>Uttar Pradesh</b></dt>
    <dd>Capital: Lucknow</dd>
    <dt><b>Maharashtra</b></dt>
    <dd>Capital: Mumbai</dd>
  </dl>
</body>
</html>
💡 How this code works➕
Demonstrates <ol> with type="A", <ul> with type="square", and <dl> definition pairs, each styled in distinct colors.
Live Output Window
HTML Form ValidationMediumWeightage: 15 Marks

Q11. Swimming Membership Form with Age Validation

Problem Statement: Design "Swimming Membership Form" with Name, Address (Textarea), Contact Number, Age (Validation 10-18), and Duration radio buttons.
⏱ Practice Timer (Recommended: 12 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; padding: 15px; }
    .form-container { width: 350px; margin: auto; border: 1px solid #ccc; padding: 15px; border-radius: 8px; }
    h2 { text-align: center; color: #ff6600; }
    .row { margin-bottom: 10px; }
    label { font-weight: bold; display: block; }
    input[type="text"], input[type="number"], textarea { width: 100%; padding: 6px; box-sizing: border-box; }
    .radio-group { display: flex; gap: 10px; margin-top: 5px; }
    button { width: 100%; background: #ff6600; color: white; border: none; padding: 8px; cursor: pointer; }
  </style>
</head>
<body>
  <div class="form-container">
    <h2>Swimming Membership Form</h2>
    <form>
      <div class="row"><label>Name:</label><input type="text" required></div>
      <div class="row"><label>Address:</label><textarea rows="2" required></textarea></div>
      <div class="row"><label>Contact Number:</label><input type="text" required></div>
      <div class="row"><label>Age (10-18):</label><input type="number" min="10" max="18" required></div>
      <div class="row">
        <label>Membership Duration:</label>
        <div class="radio-group">
          <label><input type="radio" name="dur" value="1" required> 1 Month</label>
          <label><input type="radio" name="dur" value="2"> 2 Months</label>
          <label><input type="radio" name="dur" value="3"> 3 Months</label>
        </div>
      </div>
      <button type="submit">Join Membership</button>
    </form>
  </div>
</body>
</html>
💡 How this code works➕
Uses min="10" max="18" on numeric inputs for constraint validation and radio buttons grouped by name="dur".
Live Output Window
HTML FormattingEasyWeightage: 5 Marks

Q12. Centered Heading and 3-Line Paragraph with Background

Problem Statement: Use H1 tag for centered title introduction, create a paragraph spanning 3 lines, and set a custom background color.
⏱ Practice Timer (Recommended: 5 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    body { background-color: #e3f2fd; font-family: Arial, sans-serif; padding: 20px; }
    h1 { text-align: center; color: #0d47a1; }
    p { font-size: 16px; line-height: 1.8; color: #333; text-align: justify; }
  </style>
</head>
<body>
  <h1>Introduction to Web Designing</h1>
  <p>
    Web Designing is an exciting field that combines creativity and technical skills to build websites.<br>
    It involves learning HTML for structure, CSS for styling, and JavaScript for interactive features.<br>
    Mastering these core technologies empowers students to create modern responsive web applications.
  </p>
</body>
</html>
💡 How this code works➕
Uses text-align: center on H1 and line break tags <br> to separate the paragraph into 3 distinct lines.
Live Output Window
HTML TableEasyWeightage: 10 Marks

Q13. Student Data Table with 3 Entries

Problem Statement: Create an HTML table with columns: Sr No, Name, Class, Year of Passing, Percentage. Populate with 3 entries.
⏱ Practice Timer (Recommended: 8 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    table { width: 100%; border-collapse: collapse; }
    th, td { border: 1px solid #000; padding: 8px; text-align: center; }
    th { background-color: #ff6600; color: #fff; }
  </style>
</head>
<body>
  <h3>Student Academic Records</h3>
  <table>
    <tr>
      <th>Sr No</th>
      <th>Name</th>
      <th>Class</th>
      <th>Year of Passing</th>
      <th>Percentage</th>
    </tr>
    <tr><td>1</td><td>Aman Gupta</td><td>O Level</td><td>2024</td><td>82%</td></tr>
    <tr><td>2</td><td>Suman Singh</td><td>A Level</td><td>2025</td><td>88%</td></tr>
    <tr><td>3</td><td>Rohan Mehta</td><td>CCC</td><td>2024</td><td>76%</td></tr>
  </table>
</body>
</html>
💡 How this code works➕
Structured HTML table layout using 5 column headers and 3 standard data rows.
Live Output Window
HTML Form DropdownEasyWeightage: 10 Marks

Q14. Library Management Form with Dropdown

Problem Statement: Create a Library Management form with Name, Father's Name, Email ID, Year dropdown (1st, 2nd, 3rd Year), and Submit button.
⏱ Practice Timer (Recommended: 8 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; padding: 15px; }
    .form-card { width: 320px; border: 1px solid #ddd; padding: 15px; border-radius: 6px; }
    .field { margin-bottom: 10px; }
    label { display: block; font-weight: bold; }
    input, select { width: 100%; padding: 6px; margin-top: 4px; box-sizing: border-box; }
    button { background: #ff6600; color: #fff; border: none; padding: 8px 15px; cursor: pointer; width: 100%; margin-top: 10px; }
  </style>
</head>
<body>
  <div class="form-card">
    <h3 style="text-align:center; margin-top:0;">Library Management</h3>
    <form>
      <div class="field"><label>Name:</label><input type="text" required></div>
      <div class="field"><label>Father's Name:</label><input type="text" required></div>
      <div class="field"><label>Email ID:</label><input type="email" required></div>
      <div class="field">
        <label>Academic Year:</label>
        <select>
          <option>1st Year</option>
          <option>2nd Year</option>
          <option>3rd Year</option>
        </select>
      </div>
      <button type="submit">Submit Request</button>
    </form>
  </div>
</body>
</html>
💡 How this code works➕
Utilizes <select> and <option> elements to create a clean drop-down menu selection for academic years.
Live Output Window
HTML Frames / Iframe LayoutMediumWeightage: 15 Marks

Q15. Interactive Two-Pane Layout for National Leaders

Problem Statement: Create a two-frame/pane webpage where clicking a leader's link in the left pane displays details in the right target frame.
⏱ Practice Timer (Recommended: 12 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    body { display: flex; height: 280px; margin: 0; font-family: Arial; }
    .left-pane { width: 40%; background: #f4f4f4; padding: 10px; border-right: 2px solid #ccc; }
    .right-pane { width: 60%; padding: 10px; }
    a { display: block; margin-bottom: 8px; color: #ff6600; text-decoration: none; font-weight: bold; }
  </style>
</head>
<body>
  <div class="left-pane">
    <h4>National Leaders</h4>
    <a href="javascript:void(0)" onclick="showLeader('Mahatma Gandhi', 'Father of the Nation, leader of Indian Independence Movement through non-violence.')">Mahatma Gandhi</a>
    <a href="javascript:void(0)" onclick="showLeader('Netaji Subhash Chandra Bose', 'Founder of Azad Hind Fauj (INA), key figure in armed struggle for independence.')">Subhash Chandra Bose</a>
  </div>

  <div class="right-pane" id="details-pane">
    <h4>Leader Details</h4>
    <p>Click a leader name on the left to view details.</p>
  </div>

  <script>
    function showLeader(name, desc) {
      document.getElementById('details-pane').innerHTML = `<h3 style="color:#ff6600;">${name}</h3><p>${desc}</p>`;
    }
  </script>
</body>
</html>
💡 How this code works➕
Simulates dual frame behavior using modern Flexbox split view and JS event target updates.
Live Output Window
HTML FormattingEasyWeightage: 5 Marks

Q16. Simple Bio-Data Webpage Display

Problem Statement: Write HTML code to display Bio-data showing Name, Father's Name, Date of Birth, and Age.
⏱ Practice Timer (Recommended: 5 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    .biodata-box { width: 300px; border: 2px solid #ff6600; padding: 15px; border-radius: 8px; font-family: Arial; }
    h2 { text-align: center; color: #ff6600; border-bottom: 1px solid #ddd; padding-bottom: 5px; }
    p { font-size: 14px; margin: 8px 0; }
  </style>
</head>
<body>
  <div class="biodata-box">
    <h2>BIO-DATA</h2>
    <p><b>Name:</b> Rajesh Kumar</p>
    <p><b>Father's Name:</b> Shri Suresh Kumar</p>
    <p><b>Date of Birth:</b> 15/08/2002</p>
    <p><b>Age:</b> 22 Years</p>
  </div>
</body>
</html>
💡 How this code works➕
Uses simple semantic HTML tags like <h2>, <p>, and <b> for organized data presentation.
Live Output Window
HTML ListsEasyWeightage: 10 Marks

Q17. Combination of OL, UL, and DL Lists

Problem Statement: Create an HTML document with (a) Top 3 Books (OL), (b) Hobbies (UL), and (c) Common HTML Tags (DL).
⏱ Practice Timer (Recommended: 8 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<body style="font-family: Arial; padding: 15px;">
  <h3>(a) Favourite Books (Ordered List)</h3>
  <ol>
    <li>Wings of Fire</li>
    <li>The Alchemist</li>
    <li>Atomic Habits</li>
  </ol>

  <h3>(b) Hobbies (Unordered List)</h3>
  <ul>
    <li>Web Coding</li>
    <li>Reading Tech Blogs</li>
    <li>Playing Chess</li>
  </ul>

  <h3>(c) HTML Tags Glossary (Definition List)</h3>
  <dl>
    <dt><b>&lt;h1&gt;</b></dt>
    <dd>Defines the most important top-level heading.</dd>
    <dt><b>&lt;p&gt;</b></dt>
    <dd>Defines a paragraph block of text.</dd>
  </dl>
</body>
</html>
💡 How this code works➕
Demonstrates all three list structures in HTML: <ol>, <ul>, and <dl>.
Live Output Window
HTML Table MergeMediumWeightage: 15 Marks

Q18. Employee Table with ROWSPAN & COLSPAN

Problem Statement: Create an employee table using ROWSPAN to merge repeated departments and COLSPAN for aligned table headers.
⏱ Practice Timer (Recommended: 10 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    table { width: 100%; border-collapse: collapse; text-align: center; }
    th, td { border: 1px solid #333; padding: 8px; }
    th { background-color: #ff6600; color: white; }
  </style>
</head>
<body>
  <h3>Employee Department Matrix</h3>
  <table>
    <tr>
      <th colspan="3">GyanXP Employee Directory</th>
    </tr>
    <tr>
      <th>Department</th>
      <th>Emp ID</th>
      <th>Emp Name</th>
    </tr>
    <tr>
      <td rowspan="2"><b>IT Dept</b></td>
      <td>E101</td>
      <td>Aarav Sharma</td>
    </tr>
    <tr>
      <td>E102</td>
      <td>Kavya Verma</td>
    </tr>
    <tr>
      <td><b>HR Dept</b></td>
      <td>E103</td>
      <td>Rohan Das</td>
    </tr>
  </table>
</body>
</html>
💡 How this code works➕
Uses colspan="3" to span the main title across columns and rowspan="2" to merge IT department cells.
Live Output Window
HTML FormattingEasyWeightage: 5 Marks

Q19. Welcome Page with Text Formatting (Bold, Italic, Underline)

Problem Statement: Create welcome.html with a large title "Welcome to My Webpage", two self-description paragraphs, and bold, italic, and underline tags.
⏱ Practice Timer (Recommended: 5 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<body style="font-family: Arial; padding: 15px;">
  <h1 style="color:#ff6600;">Welcome to My Webpage</h1>
  
  <p>
    Hello! I am a student preparing for the <b>NIELIT O Level Course</b>. 
    I enjoy <i>developing clean interactive web user interfaces</i>.
  </p>
  
  <p>
    My goal is to achieve <u>top marks in Web Designing & Publishing (M2-R5)</u> by practicing daily live coding practicals.
  </p>
</body>
</html>
💡 How this code works➕
Demonstrates inline semantic text formatting tags: <b> for bold, <i> for italic, and <u> for underline.
Live Output Window
CSS AnimationsEasyWeightage: 10 Marks

Q20. Styled Word "Welcome" with Color Change on Hover

Problem Statement: Display "Welcome" with center alignment, large font size, bold, underline, and color change on mouse hover.
⏱ Practice Timer (Recommended: 5 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    .welcome-text {
      text-align: center;
      font-size: 48px;
      font-weight: bold;
      text-decoration: underline;
      color: #1f2421;
      transition: color 0.3s ease;
      cursor: pointer;
      margin-top: 50px;
    }
    .welcome-text:hover {
      color: #ff6600;
    }
  </style>
</head>
<body>
  <div class="welcome-text">Welcome</div>
</body>
</html>
💡 How this code works➕
Combines CSS text property rules with the :hover pseudo-class to smooth-transition text color.
Live Output Window
HTML Table LayoutMediumWeightage: 15 Marks

Q21. Webpage Layout using Table for College Infrastructure

Problem Statement: Use HTML tables to provide layout structure describing your college infrastructure.
⏱ Practice Timer (Recommended: 10 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    .layout-table { width: 100%; border-collapse: collapse; font-family: Arial; }
    .header-cell { background: #ff6600; color: white; padding: 15px; text-align: center; }
    .nav-cell { width: 25%; background: #f8f9fa; padding: 10px; vertical-align: top; border-right: 1px solid #ccc; }
    .content-cell { padding: 15px; vertical-align: top; }
    .footer-cell { background: #1f2421; color: white; text-align: center; padding: 8px; font-size: 12px; }
  </style>
</head>
<body>
  <table class="layout-table" border="1">
    <tr><td colspan="2" class="header-cell"><h2 style="margin:0;">Government Polytechnic Infrastructure</h2></td></tr>
    <tr>
      <td class="nav-cell">
        <b>Facilities</b><br><br>
        • Computer Labs<br>
        • Central Library<br>
        • Sports Complex<br>
        • Auditorium
      </td>
      <td class="content-cell">
        <h3>State-of-the-Art Computer Labs</h3>
        <p>Our campus features high-speed internet-enabled modern labs with over 200 high-performance workstations for IT students.</p>
      </td>
    </tr>
    <tr><td colspan="2" class="footer-cell">© 2026 College Campus Portal</td></tr>
  </table>
</body>
</html>
💡 How this code works➕
Demonstrates classic table-based structural web layout using headers, sidebar columns, main content, and footers.
Live Output Window
HTML Grid LayoutMediumWeightage: 15 Marks

Q22. Student Profile Grid Layout (2 Rows x 3 Columns)

Problem Statement: Webpage layout: Top Row spanning 3 cols (Header: Student Profile in Bold with Orange BG). Second Row (3 Cols): Personal Details, Academic Table, Hobbies.
⏱ Practice Timer (Recommended: 12 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    table { width: 100%; border-collapse: collapse; font-family: Arial; }
    td, th { border: 1px solid #333; padding: 10px; vertical-align: top; }
    .header { background-color: orange; color: white; text-align: center; font-weight: bold; font-size: 20px; }
    .sub-table { width: 100%; border-collapse: collapse; }
    .sub-table td { border: 1px solid #ccc; padding: 4px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <td colspan="3" class="header">Header: Student Profile</td>
    </tr>
    <tr>
      <td width="33%">
        <h4 style="margin-top:0;">Personal Details</h4>
        <p><b>Name:</b> Vikram Malhotra</p>
        <p><b>Age:</b> 20</p>
        <p><b>Address:</b> Lucknow, UP</p>
      </td>
      <td width="33%">
        <h4 style="margin-top:0;">Academic Information</h4>
        <table class="sub-table">
          <tr><th>Subject</th><th>Grade</th></tr>
          <tr><td>M2-R5</td><td>S Grade</td></tr>
          <tr><td>M1-R5</td><td>A Grade</td></tr>
        </table>
      </td>
      <td width="33%">
        <h4 style="margin-top:0;">Hobbies</h4>
        <ul style="padding-left:18px;">
          <li>Web Coding</li>
          <li>Playing Chess</li>
          <li>Blogging</li>
        </ul>
      </td>
    </tr>
  </table>
</body>
</html>
💡 How this code works➕
Full fills 2-row multi-column grid specs with colspan="3" top header span and nested table formatting.
Live Output Window
HTML Form ValidationMediumWeightage: 15 Marks

Q23. Swimming Membership Form with Title Alignment

Problem Statement: Design swimming membership form with name, address textarea, contact, age (10-18), properly aligned with title "Swimming Membership Form".
⏱ Practice Timer (Recommended: 10 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    .form-wrapper { width: 340px; margin: 10px auto; border: 2px solid #ff6600; padding: 15px; border-radius: 8px; font-family: Arial; }
    .form-title { text-align: center; color: #ff6600; text-transform: uppercase; font-size: 18px; margin-bottom: 15px; }
    .input-group { margin-bottom: 10px; }
    label { font-size: 13px; font-weight: bold; display: block; margin-bottom: 3px; }
    input[type="text"], input[type="number"], textarea { width: 100%; padding: 6px; box-sizing: border-box; }
    button { background: #ff6600; color: #fff; border: none; padding: 8px; width: 100%; cursor: pointer; }
  </style>
</head>
<body>
  <div class="form-wrapper">
    <div class="form-title">Swimming Membership Form</div>
    <form>
      <div class="input-group"><label>Member Name:</label><input type="text" required></div>
      <div class="input-group"><label>Address:</label><textarea rows="2" required></textarea></div>
      <div class="input-group"><label>Contact Number:</label><input type="text" required></div>
      <div class="input-group"><label>Age (10 - 18):</label><input type="number" min="10" max="18" required></div>
      <button type="submit">Submit Application</button>
    </form>
  </div>
</body>
</html>
💡 How this code works➕
Validates range 10 to 18 automatically on submission using HTML5 constraints.
Live Output Window
JavaScript Conditional LogicMediumWeightage: 15 Marks

Q24. JavaScript Simple Interest Calculator (>1 Lakh Conditional Rate)

Problem Statement: Calculate simple interest: If Principal > ₹1,000,000, interest rate is 15%; otherwise, rate is 10%.
⏱ Practice Timer (Recommended: 10 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; padding: 15px; }
    .input-box { margin-bottom: 8px; }
    button { background: #ff6600; color: #fff; border: none; padding: 6px 12px; cursor: pointer; }
    #out { margin-top: 10px; font-weight: bold; color: #ff6600; }
  </style>
</head>
<body>
  <h3>Simple Interest Calculator</h3>
  <div class="input-box">Principal (₹): <input type="number" id="p"></div>
  <div class="input-box">Time (Years): <input type="number" id="t"></div>
  <button onclick="calcInterest()">Calculate Interest</button>

  <div id="out"></div>

  <script>
    function calcInterest() {
      let p = parseFloat(document.getElementById('p').value);
      let t = parseFloat(document.getElementById('t').value);
      if(isNaN(p) || isNaN(t)) return;

      let r = (p > 100000) ? 15 : 10;
      let si = (p * r * t) / 100;

      document.getElementById('out').innerHTML = `Rate Applied: ${r}% <br>Simple Interest: ₹${si.toFixed(2)}`;
    }
  </script>
</body>
</html>
💡 How this code works➕
Uses conditional ternary operator (p > 100000) ? 15 : 10 to dynamically assign interest rate.
Live Output Window
JavaScript ApplicationMediumWeightage: 15 Marks

Q25. Student Marks Calculation, Result & Grade Calculator

Problem Statement: Create student form to calculate total marks, average, pass/fail result, and grade using JavaScript.
⏱ Practice Timer (Recommended: 12 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; padding: 15px; }
    .input-row { margin-bottom: 6px; }
    button { background: #ff6600; color: #fff; border: none; padding: 6px 12px; cursor: pointer; }
    #report { margin-top: 12px; line-height: 1.6; }
  </style>
</head>
<body>
  <h3>Student Grade Report Calculator</h3>
  <div class="input-row">Subject 1: <input type="number" id="m1"></div>
  <div class="input-row">Subject 2: <input type="number" id="m2"></div>
  <div class="input-row">Subject 3: <input type="number" id="m3"></div>
  <button onclick="calcResult()">Calculate Grade</button>

  <div id="report"></div>

  <script>
    function calcResult() {
      let m1 = parseFloat(document.getElementById('m1').value) || 0;
      let m2 = parseFloat(document.getElementById('m2').value) || 0;
      let m3 = parseFloat(document.getElementById('m3').value) || 0;

      let total = m1 + m2 + m3;
      let avg = total / 3;
      let result = (m1 >= 33 && m2 >= 33 && m3 >= 33) ? "PASS" : "FAIL";
      let grade = "F";

      if (result === "PASS") {
        if (avg >= 85) grade = "S";
        else if (avg >= 75) grade = "A";
        else if (avg >= 65) grade = "B";
        else if (avg >= 55) grade = "C";
        else grade = "D";
      }

      document.getElementById('report').innerHTML = `
        <b>Total Marks:</b> ${total}/300 <br>
        <b>Average:</b> ${avg.toFixed(2)}% <br>
        <b>Result:</b> <span style="color:${result==='PASS'?'green':'red'};">${result}</span> <br>
        <b>Grade:</b> ${grade}
      `;
    }
  </script>
</body>
</html>
💡 How this code works➕
Sums three subject marks, calculates average percentage, and evaluates standard grading logic.
Live Output Window
CSS StylingMediumWeightage: 15 Marks

Q26. "About My College" Page with Scrolling Text

Problem Statement: Title "about my college", large college name header followed by small address, background image styling, stylized courses list, and scrolling marquee.
⏱ Practice Timer (Recommended: 10 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <title>about my college</title>
  <style>
    body {
      background-color: #f0f4f8;
      font-family: Arial, sans-serif;
      padding: 15px;
    }
    .college-header { text-align: center; }
    .college-name { font-size: 28px; font-weight: bold; color: #ff6600; margin: 0; }
    .address { font-size: 12px; color: #666; margin-top: 4px; }
    .c1 { color: #d9534f; font-family: 'Georgia', serif; }
    .c2 { color: #0275d8; font-family: 'Courier New', monospace; }
    .c3 { color: #5cb85c; font-family: 'Verdana', sans-serif; }
  </style>
</head>
<body>
  <div class="college-header">
    <div class="college-name">NATIONAL INSTITUTE OF TECHNOLOGY</div>
    <div class="address">123 Knowledge Park, City Campus, Pin - 226001</div>
  </div>

  <hr>
  <marquee bgcolor="#ff6600" style="color:#fff; padding:5px; font-weight:bold;">Admissions Open for 2026 Academic Session! Apply Online Today.</marquee>

  <h3>Offered Courses:</h3>
  <ul>
    <li class="c1">NIELIT O Level (Web Designing & Publishing)</li>
    <li class="c2">Diploma in Computer Science</li>
    <li class="c3">Bachelor of Computer Applications (BCA)</li>
  </ul>
</body>
</html>
💡 How this code works➕
Implements <marquee> for scrolling text along with distinct font typography rules for each listed course.
Live Output Window
JavaScript AlgorithmsMediumWeightage: 15 Marks

Q27. JavaScript Even, Odd and Prime Numbers (0 to 100)

Problem Statement: Write a JavaScript program to evaluate and categorize Even, Odd, and Prime numbers from 0 to 100.
⏱ Practice Timer (Recommended: 12 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; padding: 15px; }
    .box { background: #f8f9fa; border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 6px; word-break: break-word; }
    h4 { margin: 0 0 5px 0; color: #ff6600; }
  </style>
</head>
<body>
  <h3>Numbers Classifier (0 - 100)</h3>
  
  <div class="box"><h4>Even Numbers:</h4><div id="evens"></div></div>
  <div class="box"><h4>Odd Numbers:</h4><div id="odds"></div></div>
  <div class="box"><h4>Prime Numbers:</h4><div id="primes"></div></div>

  <script>
    let evens = [], odds = [], primes = [];

    function isPrime(num) {
      if (num < 2) return false;
      for (let i = 2; i <= Math.sqrt(num); i++) {
        if (num % i === 0) return false;
      }
      return true;
    }

    for (let i = 0; i <= 100; i++) {
      if (i % 2 === 0) evens.push(i);
      else odds.push(i);
      
      if (isPrime(i)) primes.push(i);
    }

    document.getElementById('evens').innerText = evens.join(', ');
    document.getElementById('odds').innerText = odds.join(', ');
    document.getElementById('primes').innerText = primes.join(', ');
  </script>
</body>
</html>
💡 How this code works➕
Loops through numbers 0-100, checking modulus i % 2 for parity and trial division up to Math.sqrt(num) for prime check.
Live Output Window
HTML FramesMediumWeightage: 10 Marks

Q28. Target Attribute in HTML Frame/Iframe Navigation

Problem Statement: Demonstrate the target attribute in frames/iframes to update content dynamically.
⏱ Practice Timer (Recommended: 8 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    .frame-wrapper { display: flex; gap: 15px; font-family: Arial; }
    .nav-box { width: 30%; background: #f0f0f0; padding: 10px; border-radius: 6px; }
    .display-box { width: 70%; border: 2px solid #ff6600; padding: 10px; border-radius: 6px; }
    a { display: block; margin-bottom: 8px; color: #ff6600; font-weight: bold; }
  </style>
</head>
<body>
  <h3>Target Attribute Demonstration</h3>
  <div class="frame-wrapper">
    <div class="nav-box">
      <a href="https://www.wikipedia.org" target="myTargetFrame">Load Wikipedia</a>
      <a href="https://www.bing.com" target="myTargetFrame">Load Bing Search</a>
    </div>
    <div class="display-box">
      <iframe name="myTargetFrame" style="width:100%; height:200px; border:none;" srcdoc="<h4 style='color:#666;'>Click a link on the left to target this frame.</h4>"></iframe>
    </div>
  </div>
</body>
</html>
💡 How this code works➕
Setting target="myTargetFrame" on links directs navigation output straight inside the named iframe.
Live Output Window
HTML Image AlignmentEasyWeightage: 10 Marks

Q29. Image Alignment Layout (Left, Center, Right)

Problem Statement: Create an HTML file displaying three images positioned at LEFT, RIGHT, and CENTER across the browser line.
⏱ Practice Timer (Recommended: 8 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    .image-container { display: flex; justify-content: space-between; align-items: center; padding: 10px; }
    .img-box { text-align: center; font-family: Arial; font-size: 12px; font-weight: bold; }
    img { border: 2px solid #333; border-radius: 6px; }
  </style>
</head>
<body>
  <h3 style="text-align:center;">Image Alignment (Left, Center, Right)</h3>
  <div class="image-container">
    <div class="img-box">
      <img src="https://via.placeholder.com/100/ff6600/ffffff?text=Left" alt="Left">
      <div>LEFT</div>
    </div>
    <div class="img-box">
      <img src="https://via.placeholder.com/100/007bff/ffffff?text=Center" alt="Center">
      <div>CENTER</div>
    </div>
    <div class="img-box">
      <img src="https://via.placeholder.com/100/28a745/ffffff?text=Right" alt="Right">
      <div>RIGHT</div>
    </div>
  </div>
</body>
</html>
💡 How this code works➕
Uses justify-content: space-between in Flexbox to position three images cleanly at Left, Center, and Right.
Live Output Window
HTML Form ValidationMediumWeightage: 15 Marks

Q30. Complete Student Registration Form with JS Validation

Problem Statement: Create an HTML Student Registration Form with JavaScript validation checking empty fields before submission.
⏱ Practice Timer (Recommended: 12 mins)
00:00
Solution Code:
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; padding: 15px; }
    .reg-form { width: 320px; border: 1px solid #ccc; padding: 15px; border-radius: 8px; margin: auto; }
    .form-group { margin-bottom: 12px; }
    label { display: block; font-weight: bold; margin-bottom: 4px; }
    input[type="text"], input[type="email"] { width: 100%; padding: 8px; box-sizing: border-box; }
    button { background: #ff6600; color: #fff; border: none; padding: 8px 16px; width: 100%; cursor: pointer; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="reg-form">
    <h3 style="text-align:center; color:#ff6600;">Student Registration</h3>
    <form onsubmit="return validateForm()">
      <div class="form-group">
        <label>Full Name:</label>
        <input type="text" id="fullname" placeholder="Enter full name">
      </div>
      <div class="form-group">
        <label>Email Address:</label>
        <input type="email" id="email" placeholder="Enter email address">
      </div>
      <button type="submit">Register Now</button>
    </form>
  </div>

  <script>
    function validateForm() {
      let name = document.getElementById('fullname').value;
      let email = document.getElementById('email').value;
      if (name.trim() === "" || email.trim() === "") {
        alert("Validation Error: Please fill in all required fields!");
        return false;
      }
      alert("Registration Successful!");
      return true;
    }
  </script>
</body>
</html>
💡 How this code works➕
Intercepts standard form submission via onsubmit="return validateForm()", ensuring fields are verified before submission.
Live Output Window

Create Account

Already have account?