Web Programming I 2022 Board Question Paper

What Does “Link” Mean in Web Technologies?

A Link (Hyperlink) is a clickable reference or navigation pathway that connects one web resource to another—either linking to another section of the same web page, a completely different web page on the same domain, an external website on the Internet, or a downloadable file.

In HTML, links are created using the anchor element <a> with the href (Hypertext Reference) attribute:

<a href="https://fomeed.edu.np" target="_blank" rel="noopener">TU Faculty of Management</a>

Why We Need a Scripting Language in Web Development

HTML provides structural hierarchy and CSS supplies visual styling, but both are declarative and static. A scripting language (such as JavaScript) is indispensable because:

1. Interactivity and Dynamism: Enables real-time responses to user events (mouse clicks, keystrokes, scrolling, modal dialogs).
2. Client-Side Validation: Validates form inputs before transmission to the server, providing instant feedback without network latency.
3. Asynchronous Communication (AJAX): Updates parts of a webpage dynamically without requiring a full page refresh.
4. DOM Manipulation: Creates, alters, or removes HTML elements and CSS styles on the fly.

Scaling an Object by Decreasing Its Size by 50% in CSS

To decrease an element’s size by 50% of its original dimension, apply the CSS transform property with the scale() function set to 0.5:

.thumbnail {
    transform: scale(0.5);
    transform-origin: center center; /* Scales down towards center */
    transition: transform 0.3s ease;
}

This scales both width and height to 50% of the computed layout dimensions.

Paired Tags in HTML

A Paired Tag (Container Tag) consists of both an opening tag (<tag>) and a closing tag (</tag>) enclosing content between them.

Two Examples:

1. Paragraph Tag: <p>This is a paragraph of academic text.</p>
2. Heading Tag: <h1>Tribhuvan University Examination</h1>

CSS Property for Empty Table Cells

The CSS property that specifies whether or not to display borders and background on empty cells in a table is empty-cells:

table {
    border-collapse: separate; /* empty-cells only works when separate */
    empty-cells: show; /* or 'hide' */
}

• show (default): Displays borders and backgrounds around empty cells.
• hide: Hides borders and background colors for cells that contain no visible content.

What getElementsByClassName() Does in JavaScript

The document.getElementsByClassName('class_name') method searches the DOM tree and returns a live HTMLCollection (an array-like object) containing all descendant elements that possess the specified class name:

// Select all elements with class 'card'
const cards = document.getElementsByClassName('card');

console.log(cards.length); // Total elements found
cards[0].style.backgroundColor = '#f0f0f0'; // Modify first card

It updates automatically whenever matching elements are added or removed from the DOM.

Why We Need Forms in HTML

An HTML Form (<form>) is the fundamental interface component that allows users to enter, interact with, and submit data from the client browser to a web server:

1. User Input Collection: Captures text, passwords, email addresses, dates, and file uploads.
2. Interactive Controls: Provides standardized UI controls (text inputs, checkboxes, radio buttons, dropdowns, buttons).
3. Data Transmission: Packages inputs using standard HTTP methods (GET or POST) to trigger backend server-side actions (authentication, searching, database registration).

Definition of Outlines in CSS

An Outline in CSS is a line drawn outside the element’s border edge, typically used to highlight active or keyboard-focused elements for accessibility.

button:focus {
    outline: 2px solid #6366f1;
    outline-offset: 3px;
}

Difference from Border:

• Outlines do not take up space in the document layout (they do not affect element width/height or cause reflow).
• Outlines are drawn around the entire element and cannot have independent top/bottom/left/right widths.

Defining an Array in JavaScript

An array in JavaScript is an ordered collection of values. It is most commonly defined using array literal syntax [] or the Array constructor:

// 1. Array Literal (Standard & Recommended)
const subjects = ["ITM 201", "ITM 202", "ITM 252", "ITM 251"];

// 2. Array Constructor
const scores = new Array(85, 90, 78, 92);

Output Analysis: document.write(5 + "5");

Output:

$$\mathbf{55}$$

Explanation:

In JavaScript, the plus operator (+) serves as both numeric addition and string concatenation. When one operand is a number (5) and the other operand is a string ("5"), JavaScript performs implicit type coercion, converting the number 5 into the string "5", resulting in string concatenation:

$$"5" + "5" = \mathbf{"55"}$$

JavaScript 2D Array and Rendering in HTML Table

An array of arrays representing 5 students rendered dynamically into an HTML table:

<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td { border: 1px solid black; border-collapse: collapse; padding: 8px; }
    th { background: #f2f2f2; }
  </style>
</head>
<body>
  <h2>BITM Student Roster</h2>
  <div id="table-container"></div>

  <script>
    // 2D Array: [Roll, Name, Program, GPA]
    const students = [
      [101, "Suman Shrestha", "BITM", 3.85],
      [102, "Alisha Karki",    "BITM", 3.92],
      [103, "Bibek Poudel",    "BITM", 3.65],
      [104, "Pooja Gurung",    "BITM", 3.78],
      [105, "Rohan Adhikari",  "BITM", 3.50]
    ];

    let html = "<table><thead><tr><th>Roll</th><th>Name</th><th>Program</th><th>GPA</th></tr></thead><tbody>";

    for (let i = 0; i < students.length; i++) {
      html += "<tr>";
      for (let j = 0; j < students[i].length; j++) {
        html += `<td>${students[i][j]}</td>`;
      }
      html += "</tr>";
    }
    html += "</tbody></table>";

    document.getElementById("table-container").innerHTML = html;
  </script>
</body>
</html>

JavaScript Program to Check Multiple of 5

function checkMultipleOfFive(number) {
    if (typeof number !== "number" || isNaN(number)) {
        console.log("Please provide a valid numeric value.");
        return;
    }

    // A number is a multiple of 5 if dividing by 5 yields remainder 0
    if (number % 5 === 0) {
        console.log(`${number} is a multiple of 5.`);
    } else {
        console.log(`${number} is NOT a multiple of 5 (Remainder = ${Math.abs(number % 5)}).`);
    }
}

// Test Calls:
checkMultipleOfFive(25);  // Output: 25 is a multiple of 5.
checkMultipleOfFive(18);  // Output: 18 is NOT a multiple of 5.
checkMultipleOfFive(0);   // Output: 0 is a multiple of 5.
checkMultipleOfFive(-15); // Output: -15 is a multiple of 5.

Five Basic HTML Text Formatting Tags

1. <strong> (Semantic Importance / Bold): Renders text with strong psychological emphasis and boldness.

   <p><strong>Warning:</strong> Ensure all exams are submitted on time.</p>
   

2. <em> (Emphasis / Italic): Indicates stressed emphasis, rendered in italics.

   <p>You <em>must</em> bring your TU admit card.</p>
   

3. <mark> (Highlighted Text): Highlights text with a yellow background.

   <p>The <mark>deadline is 5:00 PM</mark> today.</p>
   

4. <sup> (Superscript): Renders text half a character above the baseline (for powers or footnotes).

   <p>Einstein's equation is E = mc<sup>2</sup>.</p>
   

5. <sub> (Subscript): Renders text half a character below the baseline (for chemical formulas).

   <p>Chemical formula of water is H<sub>2</sub>O.</p>
   

HTML and CSS Table with Merged Cells (rowspan / colspan)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Faculty Timetable</title>
  <style>
    table {
      border-collapse: collapse;
      width: 80%;
      margin: 20px auto;
      font-family: Arial, sans-serif;
    }
    th, td {
      border: 1px solid #333;
      padding: 10px 14px;
      text-align: center;
    }
    th {
      background-color: #2c3e50;
      color: white;
    }
    .highlight {
      background-color: #ecf0f1;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th rowspan="2">Day</th>
        <th colspan="2">Morning Session</th>
        <th colspan="2">Afternoon Session</th>
      </tr>
      <tr>
        <th>07:00 - 08:30</th>
        <th>08:30 - 10:00</th>
        <th>11:00 - 12:30</th>
        <th>12:30 - 02:00</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="highlight">Sunday</td>
        <td>ITM 201</td>
        <td>ITM 202</td>
        <td colspan="2">ITM 252 Lab (Block A)</td>
      </tr>
      <tr>
        <td class="highlight">Monday</td>
        <td colspan="2">ITM 251 Web Programming Lab</td>
        <td>ACC 201</td>
        <td>ECO 204</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Linking Audio, Video, and Image in HTML5

HTML5 provides native semantic multimedia elements without requiring third-party plugins:

<!-- 1. Embedding an Image -->
<figure>
  <img src="campus.jpg" alt="Tribhuvan University Kirtipur Campus" width="600" height="400" loading="lazy">
  <figcaption>Figure 1: TU Central Campus, Kirtipur</figcaption>
</figure>

<!-- 2. Embedding Audio with Controls -->
<audio controls preload="metadata">
  <source src="lecture_intro.mp3" type="audio/mpeg">
  <source src="lecture_intro.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

<!-- 3. Embedding Video with Poster and Fallbacks -->
<video width="640" height="360" controls poster="video_poster.jpg">
  <source src="web_lecture.mp4" type="video/mp4">
  <source src="web_lecture.webm" type="video/webm">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  Your browser does not support the HTML5 video tag.
</video>

Why Client-Side Validation is Required

Client-side validation occurs in the user’s browser before the form payload is transmitted to the server.

Essential Advantages:

1. Immediate User Feedback: Errors (e.g., missing required fields, mismatched passwords) are flagged immediately without waiting for a server round-trip.
2. Reduced Server Load & Bandwidth Savings: Rejects malformed requests at the client edge, conserving server compute cycles and database connections.
3. Improved User Experience (UX): Preserves field values seamlessly and highlights invalid inputs with visual styling.

Example:

function validateRegistration(form) {
    const email = form.email.value.trim();
    const password = form.password.value;

    if (!email.includes("@") || !email.includes(".")) {
        alert("Please enter a valid email address.");
        return false;
    }
    if (password.length < 8) {
        alert("Password must contain at least 8 characters.");
        return false;
    }
    return true;
}

(Note: Client-side validation must always be paired with server-side validation for security).

Types of CSS: Inline, Internal, and External

Cascading Style Sheets (CSS) can be integrated into HTML documents via three mechanisms:

1. Inline CSS:

Applied directly to an individual HTML element using the style attribute.

<h1 style="color: #1a365d; font-size: 28px; text-align: center;">Welcome to BITM</h1>

• Pros: High specificity; useful for quick testing.
• Cons: Violates separation of concerns; repetitive and difficult to maintain.

2. Internal (Embedded) CSS:

Placed inside a <style> block within the <head> section of the HTML document.

<head>
  <style>
    body { font-family: 'Segoe UI', sans-serif; background-color: #f8fafc; }
    .alert-box { padding: 15px; border-radius: 6px; background-color: #e0f2fe; }
  </style>
</head>

• Pros: Styles the entire single page without external network requests.
• Cons: Cannot be reused across multiple HTML pages.

3. External CSS:

Written in a separate .css file and linked in the <head> section via the <link> tag.

<head>
  <link rel="stylesheet" href="assets/css/styles.css">
</head>

• Pros: Industry Standard. Complete separation of content and presentation; browser caches the file across pages, significantly speeding up website performance.