Board paper

Web Programming I 2023 Board Question Paper

ITM 202 · Web Programming I

examination paper loaded.
Programme
BIM
Academic year
Semester 3
Exam year
2023 AD
Sitting
regular
Full marks
60
Duration
180 minutes

Tribhuvan University

Faculty of Management

Office of the Dean

2023 AD / Regular Examination

Course: ITM 202 · Web Programming I

Level: Bachelor of Information Management (BIM) · Semester 3

Full Marks: 60

Time: 3 hrs.

Time: 3 Hrs. | Full Marks: 60 | Pass Marks: 30

Subjective Questions

  1. Differentiate between web 1.0 and web 3.0.

    [2]
    View model solution

    Web 1.0 vs. Web 3.0

    Feature Web 1.0 (The Read-Only Web) Web 3.0 (The Semantic / Decentralized Web)
    User Role Passive consumers reading static HTML pages. Co-owners and participants interacting with decentralized networks.
    Architecture Centralized web servers serving flat files. Decentralized, peer-to-peer (P2P), blockchain, edge computing.
    Data Semantics Unstructured text for human reading only. Machine-readable RDF/OWL ontologies, AI reasoning, linked data.
    Identity & Trust Email/passwords stored on centralized servers. Cryptographic public-key wallets and decentralized identifiers (DIDs).

  2. What is the task oftag?

    [2]
    View model solution

    Task of the <a> (Anchor) Tag in HTML

    The <a> (Anchor) tag creates hyperlinks that enable users to navigate between web pages, access downloadable documents, or jump to specific bookmark anchors on the current page:

    <!-- External Link with accessible target -->
<a href="https://tu.edu.np" target="_blank" rel="noopener noreferrer">TU Official Portal</a>

<!-- In-page Jump Anchor -->
<a href="#syllabus-section">Jump to Syllabus</a>

  3. How do you insert external CSS?

    [2]
    View model solution

    How to Insert External CSS in HTML

    External CSS is linked within the <head> section of an HTML document using the <link> tag:

    <head>
  <link rel="stylesheet" type="text/css" href="css/main-style.css">
</head>
    • rel="stylesheet": Defines the relationship between the HTML document and the linked resource.
    • href: Specifies the relative or absolute path to the .css file.

  4. What is JSON?

    [2]
    View model solution

    What is JSON?

    JSON (JavaScript Object Notation) is a lightweight, text-based, human-readable data interchange format based on JavaScript object syntax.

    Key Features:

    • Language Independent: Parsable natively by virtually all modern programming languages (PHP, Python, Java, C++, JS).
    • Structure: Consists of key-value pairs ({"key": value}) and ordered lists/arrays ([value1, value2]).
    • Standard for Web APIs: The universal standard format for transmitting data in RESTful APIs and AJAX transactions.

  5. Define namespace.

    [2]
    View model solution

    Definition of Namespace in XML

    An XML Namespace is a mechanism used to resolve naming conflicts between XML elements or attributes that share identical names but originate from different vocabularies or schemas.

    Namespaces are declared using the xmlns attribute with a unique Uniform Resource Identifier (URI):

    <root xmlns:student="https://tu.edu.np/student" xmlns:course="https://tu.edu.np/course">
  <student:title>Student Record</student:title>
  <course:title>Web Programming I</course:title>
</root>

  6. List any two advantages of static website.

    [2]
    View model solution

    Two Advantages of a Static Website

    1. Exceptional Speed & Performance: Web servers deliver pre-rendered HTML, CSS, and asset files directly to browsers without requiring database queries or server-side scripting runtime overhead.
    2. Superior Security: Without backend database connections, user input processing, or dynamic server runtimes, attack vectors like SQL injection and server-side code execution are virtually non-existent.

  7. What is meta tag?

    [2]
    View model solution

    What is a Meta Tag in HTML?

    A Meta Tag (<meta>) resides inside the <head> section of an HTML document to provide machine-readable metadata about the page (character encoding, viewport configuration, author, page description, and search engine directives):

    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="TU BITM Question Paper Archive and Academic Solutions">

  8. What is class selectors?

    [2]
    View model solution

    What is a Class Selector in CSS?

    A Class Selector selects HTML elements based on their class attribute value. It is prefixed with a period (.):

    .highlight-text {
    color: #e11d48;
    font-weight: 600;
}

    Unlike unique IDs, class names can be reused across multiple HTML elements across the page.

  9. Define cookies.

    [2]
    View model solution

    Definition of Cookies

    A Cookie (HTTP Cookie) is a small text file (up to 4 KB) sent by a web server and stored locally on the client’s web browser. The browser automatically attaches stored cookies to subsequent HTTP requests to the same origin domain.

    Primary Uses:

    • User session authentication and login state.
    • Personalization preferences (dark mode, language).
    • Tracking and analytics.

  10. How does XML affect the semantic of web?

    [2]
    View model solution

    How XML Affects the Semantics of the Web

    Unlike HTML (which focuses primarily on presentation and display formatting), XML (Extensible Markup Language) allows developers to define custom, domain-specific tags that describe the inherent meaning (semantics) of the data:

    • Example: <book><title>Web Tech</title><author>Gaonkar</author></book> tells machines exactly what the data represents.
    • Forms the foundational serialization layer for the Semantic Web, RSS feeds, and web service protocols (SOAP).

  11. Explain the client / server architecture in web.

    [5]
    View model solution

    Client / Server Architecture in Web Systems

    The web operates on a distributed Client/Server Architecture:

    [ Client Browser ]                              [ Web Server ]
  (Chrome / Edge)                               (Nginx / Apache)
        |                                              |
        | ----- (1) HTTP GET /index.html ------------> |
        |                                              | -> Resolves File
        | <---- (2) HTTP 200 OK + HTML Payload ------- |
        |                                              |
        | ----- (3) AJAX POST /api/submit -----------> |
        |                                              | -> Calls Application Logic
        |                                              |    & Database (MySQL)
        | <---- (4) JSON Response Data --------------- |

    Key Roles:

    1. Client (Front-End): Runs locally on the user’s device. Manages user presentation, captures inputs, initiates HTTP requests, and executes client-side scripts (JavaScript).
    2. Server (Back-End): Centralized host listening on network ports (80/443). Receives requests, enforces authentication, executes business logic, queries database storage, and returns structured HTTP responses.

  12. Create the following table in HTML.
    [5]
    View model solution

    Creating a Structured HTML Table

    <!DOCTYPE html>
<html>
<head>
  <style>
    table { width: 70%; border-collapse: collapse; margin: 15px auto; }
    th, td { border: 1px solid #444; padding: 10px; text-align: center; }
    th { background-color: #3b82f6; color: white; }
    tr:nth-child(even) { background-color: #f3f4f6; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Subject Code</th>
        <th>Subject Title</th>
        <th>Credit Hours</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ITM 201</td>
        <td>Microprocessor and Computer Architecture</td>
        <td>3</td>
      </tr>
      <tr>
        <td>ITM 202</td>
        <td>Web Programming I</td>
        <td>3</td>
      </tr>
      <tr>
        <td>ITM 252</td>
        <td>Data Structure and Algorithms</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

  13. When do you prefer internal CSS? Explain with an example.

    [5]
    View model solution

    When to Prefer Internal CSS (with Example)

    Internal CSS is preferred in situations such as:

    1. Single-Page Applications / Standalone Landing Pages: When styling is strictly unique to one specific HTML page and will not be reused elsewhere.
    2. HTML Email Templates: Email clients often strip external stylesheets; internal <style> blocks provide reliable layout rendering.
    3. Rapid Prototyping: Streamlines development before extracting styles into shared stylesheets.

    Example:

    <!DOCTYPE html>
<html>
<head>
  <style>
    .promo-banner {
      background: linear-gradient(135deg, #4f46e5, #06b6d4);
      color: #ffffff;
      padding: 30px;
      text-align: center;
      border-radius: 12px;
    }
  </style>
</head>
<body>
  <div class="promo-banner">
    <h1>Admissions Open for BITM 2026</h1>
    <p>Tribhuvan University Faculty of Management</p>
  </div>
</body>
</html>

  14. Describe the advantages of form validation in client side.

    [5]
    View model solution

    Advantages of Client-Side Form Validation

    1. Instant User Feedback (Zero Latency): Users are notified immediately if passwords do not match or email format is incorrect, without waiting for network latency.
    2. Significant Reduction in Server Workload: Traps invalid, empty, or corrupted payloads before they consume web server threads or database query resources.
    3. Conservation of Network Bandwidth: Eliminates unnecessary HTTP request-response cycles, crucial for users on mobile cellular connections in Nepal.
    4. Interactive UI Guidance: Dynamically highlights invalid fields with red borders or helper tooltips in real time.

  15. How do you define X path and X Query? Illustrate with an example.

    [5]
    View model solution

    XPath and XQuery with Examples

    1. XPath (XML Path Language):

    XPath is an expression language used to navigate through elements and attributes in an XML document tree.

    • Example XML:
      <library>
  <book category="IT"><title>Web Tech</title><price>450</price></book>
  <book category="MGT"><title>Principles of Management</title><price>380</price></book>
</library>
    • XPath Expression: /library/book[price > 400]/title selects the titles of all books priced over 400.

    2. XQuery (XML Query):

    XQuery is a full-featured functional query language designed for querying collections of XML data (analogous to SQL for databases), using the FLWOR expression (For, Let, Where, Order by, Return):

    for $b in doc("library.xml")/library/book
where $b/price > 400
order by $b/title
return $b/title

  16. Describe the different HTML tags for text formatting.

    [5]
    View model solution

    HTML Tags for Text Formatting

    HTML provides both physical and semantic formatting tags:

    1. <b> / <strong>: Bold text (<strong> indicates semantic importance).
    2. <i> / <em>: Italic text (<em> indicates stressed verbal emphasis).
    3. <u> / <ins>: Underlined text (<ins> denotes inserted text).
    4. <s> / <del>: Strikethrough text (<del> represents deleted text).
    5. <small>: Displays smaller text (legal disclaimers, copyright).
    6. <code>: Formats inline programming code using a monospace font.

  17. Describe any five HTML5 sectioning elements.

    [5]
    View model solution

    Five HTML5 Sectioning Elements

    HTML5 introduced structural semantic elements that replace generic <div> tags, improving accessibility and SEO:

    1. <header>: Represents introductory content, branding logos, or navigational aids for a page or section.
    2. <nav>: Declares a block containing primary navigation links.
    3. <main>: Contains the dominant, central content unique to the document (only one visible <main> per page).
    4. <article>: Encloses a self-contained, independently distributable composition (e.g., blog post, news update, exam notice).
    5. <section>: Defines a thematic grouping of content, typically accompanied by its own heading (<h2>-<h6>).
    6. <footer>: Contains footer metadata, copyright notices, and author contact details.

  18. Write a JavaScript program to take two integers and find their sum if both are even otherwise find their differences.

    [5]
    View model solution

    JavaScript Program: Conditional Sum or Difference

    function processTwoIntegers(a, b) {
    // Check if both integers are even numbers
    const isBothEven = (a % 2 === 0) && (b % 2 === 0);

    if (isBothEven) {
        const sum = a + b;
        console.log(`Both ${a} and ${b} are even. Sum = ${sum}`);
        return sum;
    } else {
        const difference = Math.abs(a - b);
        console.log(`At least one number is odd. Difference = ${difference}`);
        return difference;
    }
}

// Test cases:
processTwoIntegers(8, 14); // Both even => Sum: 22
processTwoIntegers(9, 4);  // One odd   => Difference: 5
processTwoIntegers(7, 11); // Both odd  => Difference: 4

  19. How do you create borders, margins and padding in CSS?

    [5]
    View model solution

    Borders, Margins, and Padding in CSS

    These three properties form the core layers of the CSS Box Model:

    .card {
    /* 1. Padding: Space inside the element between content and border */
    padding: 16px 20px;

    /* 2. Border: Line wrapping around the padding and content */
    border: 2px solid #3b82f6;
    border-radius: 8px;

    /* 3. Margin: Transparent clearing space outside the border */
    margin: 24px auto;
}

    Key Differences:

    • Padding: Increases the clickable/colored area of the element; inherits background color.
    • Border: Visible outline surrounding the padding area.
    • Margin: Separates the element from neighboring elements; remains transparent.

  20. Discuss the different types of data types in JavaScript.

    [5]
    View model solution

    Data Types in JavaScript

    JavaScript is dynamically typed and categorizes data into Primitive Types and Object Types:

    1. Primitive Data Types (Immutable, passed by value):

    1. Number: Double-precision 64-bit float (e.g., 42, 3.14).
    2. BigInt: Arbitrary-precision integers (9007199254740991n).
    3. String: Sequence of characters ("Tribhuvan University").
    4. Boolean: Logical true or false.
    5. Undefined: Variable declared but not assigned a value.
    6. Null: Intentional representation of no object value.
    7. Symbol: Unique and immutable identifier token.

    2. Non-Primitive (Reference / Object Types):

    • Object: Key-value collections ({ name: "BITM", year: 2026 }).
    • Array: Ordered lists ([10, 20, 30]).
    • Function: First-class callable objects (function() {}).

  21. Create the following form in HTML and write JavaScript code to validate phone, email, password and confirm password, and user id (number only).

    User ID
    Phone
    Email
    Password
    Confirm Password
    [10]
    View model solution

    HTML Form with JavaScript Validation

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>User Registration</title>
  <style>
    body { font-family: sans-serif; display: flex; justify-content: center; padding: 20px; }
    .form-container { width: 400px; border: 1px solid #ccc; padding: 24px; border-radius: 8px; }
    .field-group { margin-bottom: 14px; }
    label { display: block; margin-bottom: 4px; font-weight: bold; }
    input { width: 100%; padding: 8px; box-sizing: border-box; }
    .error-msg { color: #dc2626; font-size: 13px; margin-top: 4px; display: none; }
    button { width: 100%; padding: 10px; background: #2563eb; color: white; border: none; font-size: 16px; border-radius: 4px; cursor: pointer; }
  </style>
</head>
<body>
  <div class="form-container">
    <h2>User Account Form</h2>
    <form id="regForm" onsubmit="return validateForm(event)">
      <div class="field-group">
        <label for="userId">User ID (Numbers only):</label>
        <input type="text" id="userId" name="userId">
        <span id="userIdErr" class="error-msg">User ID must contain digits only.</span>
      </div>
      <div class="field-group">
        <label for="phone">Phone (10 digits):</label>
        <input type="text" id="phone" name="phone">
        <span id="phoneErr" class="error-msg">Phone must be a valid 10-digit number.</span>
      </div>
      <div class="field-group">
        <label for="email">Email Address:</label>
        <input type="email" id="email" name="email">
        <span id="emailErr" class="error-msg">Please enter a valid email address.</span>
      </div>
      <div class="field-group">
        <label for="password">Password (Min 8 chars):</label>
        <input type="password" id="password" name="password">
        <span id="passwordErr" class="error-msg">Password must be at least 8 characters.</span>
      </div>
      <div class="field-group">
        <label for="confirmPassword">Confirm Password:</label>
        <input type="password" id="confirmPassword" name="confirmPassword">
        <span id="confirmErr" class="error-msg">Passwords do not match.</span>
      </div>
      <button type="submit">Submit Registration</button>
    </form>
  </div>

  <script>
    function validateForm(e) {
      let isValid = true;
      const showError = (id, condition) => {
        const el = document.getElementById(id);
        el.style.display = condition ? "block" : "none";
        if (condition) isValid = false;
      };

      const userId = document.getElementById("userId").value.trim();
      showError("userIdErr", !/^\d+$/.test(userId));

      const phone = document.getElementById("phone").value.trim();
      showError("phoneErr", !/^\d{10}$/.test(phone));

      const email = document.getElementById("email").value.trim();
      showError("emailErr", !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email));

      const password = document.getElementById("password").value;
      showError("passwordErr", password.length < 8);

      const confirmPass = document.getElementById("confirmPassword").value;
      showError("confirmErr", confirmPass !== password || confirmPass === "");

      if (!isValid) {
        e.preventDefault();
        return false;
      }
      alert("Form submitted successfully!");
      return true;
    }
  </script>
</body>
</html>

  22. How do you define request and response message? What are the purposes of JQuery, React and Angular JS? Explain.

    [10]
    View model solution

    HTTP Messages and Web Frameworks (jQuery, React, Angular)

    1. HTTP Request and Response Messages

    Web communication strictly follows the HTTP message protocol:

    • HTTP Request Message: Sent from client browser to server.
      • Request Line: Method (GET, POST), URI (/index.html), HTTP Version (HTTP/1.1).
      • Headers: Host, User-Agent, Accept, Authorization, Content-Type.
      • Empty Line (\r\n)
      • Message Body (optional): JSON payload or form data.
    • HTTP Response Message: Returned by server to client.
      • Status Line: HTTP Version, Status Code (200 OK, 404 Not Found, 500 Server Error).
      • Headers: Content-Type, Content-Length, Set-Cookie, Date.
      • Message Body: The requested HTML, CSS, JavaScript, image, or JSON data.

    2. Purpose of jQuery, React, and Angular:

    1. jQuery:

      • Purpose: A lightweight, “write less, do more” JavaScript DOM-manipulation utility library.
      • Strengths: Normalized cross-browser DOM differences, streamlined AJAX ($.ajax()), and simplified event handling during the Web 2.0 era.

    2. React (Meta / Open Source):

      • Purpose: A declarative, component-based front-end JavaScript library for building high-performance Single Page Application (SPA) user interfaces.
      • Strengths: Utilizes a Virtual DOM for diffing and efficient batched updates; unidirectional data flow; immense ecosystem (Next.js).

    3. Angular (Google):

      • Purpose: A full-fledged, opinionated TypeScript-based enterprise MVC/MVVM application framework.
      • Strengths: Built-in two-way data binding, dependency injection, routing, HTTP client, and RxJS reactive streams out of the box.