BIT251 · TU past paper

Web Technology I 2081 question paper

The complete TU 2081 exam paper for Web Technology I (BIT251), all 12 questions with solved model answers written to the mark scheme.

Past Papers2081 2080.2 2080 2079

Tap a question to open its answer.

110 marksHTML events and event handlersHideAnswer
Describe HTML events.Write HTML script to demonstrate Onkeypress and Onclick events.[6+4]
(a) Description of HTML Events HTML events are actions or occurrences that happen in the browser or on an HTML element, which can be detected and responded to using JavaScript. When an event occurs, a JavaScript function (called an event...

210 marksXML elements and attributesAnswer

Explain the XML syntax rules.Create a XML file that contains a root element named and “Office”. Inside this root element create four "Employee" elements. Each "Employee" element must contain a "Skills" element and it can contain up to Three "Skills" elements. Now create an XML file for this scenario and write XSD showing the use of minOccurrence and maxOccurrence indicators.[5+5]

XML Syntax Rules and XSD with minOccurs/maxOccurs

(a) XML Syntax Rules

XML (eXtensible Markup Language) follows strict syntax rules. The key rules are:

1. Every XML Document Must Have a Root Element

All elements must be contained within a single root element.

<root> ... </root>

2. All Elements Must Have a Closing Tag

Unlike HTML, every opened tag must be properly closed.

<name>John</name>   <!-- correct -->
<name>John          <!-- incorrect -->

3. XML Tags are Case-Sensitive

<Employee> and <employee> are treated as different tags.

<Employee>John</Employee>   <!-- correct -->
<Employee>John</employee>   <!-- incorrect -->

4. Elements Must be Properly Nested

Tags must be opened and closed in the correct order (no overlapping).

<b><i>text</i></b>   <!-- correct -->
<b><i>text</b></i>   <!-- incorrect -->

5. XML Attribute Values Must be Quoted

All attribute values must be enclosed in single or double quotes.

<Employee id="101">   <!-- correct -->
<Employee id=101>     <!-- incorrect -->

6. XML Declaration (Optional but Recommended)

The XML declaration should appear at the top of the document.

<?xml version="1.0" encoding="UTF-8"?>

7. Special Characters Must Use Entity References

Reserved characters must be escaped:

Character	Entity Reference
`<`	`<`
`>`	`>`
`&`	`&`
`"`	`"`
`'`	`'`

8. Comments Syntax

<!-- This is a comment -->

9. White Space is Preserved

Unlike HTML, XML preserves white space within element content.

10. XML Names Cannot Start with a Number or Special Character

Tag names must begin with a letter or underscore.

(b) XML File for the Scenario

XML File (office.xml)

<?xml version="1.0" encoding="UTF-8"?>
<Office>

    <Employee id="E001">
        <Name>Alice Johnson</Name>
        <Department>Development</Department>
        <Skills>Java Programming</Skills>
        <Skills>Database Management</Skills>
        <Skills>Web Development</Skills>
    </Employee>

    <Employee id="E002">
        <Name>Bob Smith</Name>
        <Department>Design</Department>
        <Skills>UI Design</Skills>
        <Skills>Photoshop</Skills>
    </Employee>

    <Employee id="E003">
        <Name>Carol White</Name>
        <Department>Testing</Department>
        <Skills>Manual Testing</Skills>
        <Skills>Automation Testing</Skills>
        <Skills>Performance Testing</Skills>
    </Employee>

    <Employee id="E004">
        <Name>David Brown</Name>
        <Department>Management</Department>
        <Skills>Project Management</Skills>
    </Employee>

</Office>

Note:

Employee E001 has 3 Skills (maximum)

Employee E002 has 2 Skills

Employee E003 has 3 Skills (maximum)

Employee E004 has 1 Skill (minimum)

XSD File (office.xsd) - Showing minOccurs and maxOccurs

<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

    <!-- Definition of the root element "Office" -->
    <xs:element name="Office">
        <xs:complexType>
            <xs:sequence>

                <!-- Employee element must appear exactly 4 times -->
                <xs:element name="Employee" minOccurs="4" maxOccurs="4">
                    <xs:complexType>

                        <!-- Attribute for Employee ID -->
                        <xs:attribute name="id" type="xs:string" use="required"/>

                        <xs:sequence>

                            <!-- Name element must appear exactly once -->
                            <xs:element name="Name"
                                        type="xs:string"
                                        minOccurs="1"
                                        maxOccurs="1"/>

                            <!-- Department element must appear exactly once -->
                            <xs:element name="Department"
                                        type="xs:string"
                                        minOccurs="1"
                                        maxOccurs="1"/>

                            <!-- Skills element must appear at least 1 time
                                 and at most 3 times -->
                            <xs:element name="Skills"
                                        type="xs:string"
                                        minOccurs="1"
                                        maxOccurs="3"/>

                        </xs:sequence>
                    </xs:complexType>
                </xs:element>

            </xs:sequence>
        </xs:complexType>
    </xs:element>

</xs:schema>

Explanation of minOccurs and maxOccurs

Indicator	Meaning	Used In XSD Above
`minOccurs`	Minimum number of times an element must appear	`Skills` must appear at least 1 time
`maxOccurs`	Maximum number of times an element can appear	`Skills` can appear at most 3 times
`minOccurs="0"`	Element is optional	Not used here
`maxOccurs="unbounded"`	Element can repeat unlimited times	Not used here

Key Points:

minOccurs="1" and `maxO

310 marksPopup boxes alert confirm promptHideAnswer
Describe the uses of Popup Boxes in JavaScript with suitable examples.Write a JavaScript program that will take two strings as input and display concatenation of them as output.[6+4]
--- (a) Popup Boxes in JavaScript JavaScript provides three types of built-in popup (dialog) boxes to interact with the user. These are browser-level dialog boxes used for displaying messages, taking input, or confirming actions. --- - U...
45 marksClient server architecture typesHideAnswer
Describe about the client server architecture. [5]
Client-server architecture is a distributed computing model in which tasks or workloads are partitioned between service providers (servers) and service requesters (clients). The client and server communicate over a network using a reques...
55 marksHTML head and body tagsHideAnswer
Write HTML script to generate following output. [5]
Since no specific output image is provided, I will create a commonly asked HTML table output in TU BSc CSIT exams: a formatted table with merged cells (colspan/rowspan), which is the standard 5-mark HTML question pattern. --- A table lik...
65 marksCSS positioning static relative absolute fHideAnswer
Write HTML and equivalent CSS for some HTML elements to demonstrate relative and float positioning. [5]
In relative positioning, an element is positioned relative to its own normal position in the document flow. The element still occupies its original space, but it is visually shifted using top, bottom, left, or right properties. In float ...

75 marksInline internal and external CSS methodsAnswer

Consider an HTML file that contains three <div> elements and two <p> elements. The first <div> should have border color red with border size 1px. The next two <div> elements should have font-family Arial and text color blue. Both of the <p> elements should have background color yellow and their display property set to block type. Now write the equivalent external CSS for this case. [5]

External CSS for the Given HTML Structure

HTML File (`index.html`)

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div id="first-div">This is the first div</div>

    <div class="styled-div">This is the second div</div>
    <div class="styled-div">This is the third div</div>

    <p>This is the first paragraph</p>
    <p>This is the second paragraph</p>

</body>
</html>

External CSS File (`styles.css`)

/* Style for the first <div> - red border with 1px size */
#first-div {
    border-color: red;
    border-style: solid;
    border-width: 1px;
}

/* Style for the next two <div> elements - Arial font and blue text */
.styled-div {
    font-family: Arial;
    color: blue;
}

/* Style for both <p> elements - yellow background and block display */
p {
    background-color: yellow;
    display: block;
}

Explanation of Key Concepts

Selector Used	Target Element	Properties Applied
`#first-div` (ID selector)	First `<div>`	`border-color`, `border-style`, `border-width`
`.styled-div` (Class selector)	2nd and 3rd `<div>`	`font-family`, `color`
`p` (Element selector)	Both `<p>` elements	`background-color`, `display`

Why External CSS?

The CSS rules are written in a separate .css file (styles.css).
It is linked to the HTML file using the <link> tag inside the <head> section.
This is called External CSS and is preferred for maintaining separation of structure and style.

Note: border-style: solid is required alongside border-color and border-width for the border to be visible in browsers.

85 marksAJAX concept and implementationAnswer

What is AJAX? Write a program to demonstrate the AJAX effect of your choice. [2+3]

AJAX: Definition and Demonstration

What is AJAX? [2 marks]

AJAX stands for Asynchronous JavaScript and XML. It is a web development technique that allows a web page to communicate with a server and update parts of the page without reloading the entire page.

Key characteristics of AJAX:

Asynchronous: The browser does not wait for the server response; other operations continue normally.
Uses the built-in XMLHttpRequest object (or modern fetch API) to send and receive data from a server in the background.
Data can be exchanged in formats like XML, JSON, plain text, or HTML.
Provides a faster, smoother user experience by updating only the required portion of the webpage.

AJAX Program: Fetch and Display a Message on Button Click [3 marks]

File Structure

project/
  index.html
  data.txt        (server-side file to fetch)

`data.txt`

Hello! This message was loaded using AJAX without page reload.

`index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 50px;
        }
        #result {
            margin-top: 20px;
            padding: 15px;
            background-color: #e0f7fa;
            border: 1px solid #00acc1;
            display: none;
            width: 400px;
        }
        button {
            padding: 10px 20px;
            background-color: #00acc1;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #007c91;
        }
    </style>
</head>
<body>

    <h2>AJAX Demonstration</h2>
    <p>Click the button to load content without refreshing the page.</p>

    <button onclick="loadContent()">Load Message</button>

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

    <script>
        function loadContent() {
            // Step 1: Create XMLHttpRequest object
            var xhr = new XMLHttpRequest();

            // Step 2: Define what happens when response is received
            xhr.onreadystatechange = function() {
                // readyState 4 = request finished
                // status 200 = OK (success)
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var resultDiv = document.getElementById("result");
                    resultDiv.style.display = "block";
                    resultDiv.innerHTML = "<strong>Server Response:</strong> " 
                                         + xhr.responseText;
                }
            };

            // Step 3: Open a GET request to the server file
            xhr.open("GET", "data.txt", true); // true = asynchronous

            // Step 4: Send the request
            xhr.send();
        }
    </script>

</body>
</html>

How It Works (Step-by-Step)

Step	Description
1	User clicks the "Load Message" button
2	JavaScript creates an `XMLHttpRequest` object
3	A GET request is sent asynchronously to `data.txt` on the server
4	When the server responds (`readyState == 4`, `status == 200`), the response text is displayed inside the `<div id="result">`
5	The page is NOT reloaded -- only the `<div>` content is updated

Output

When the button is clicked, the following appears on the page without any page refresh:

Server Response:
Hello! This message was loaded using AJAX without page reload.

Note: This program must be run on a web server (e.g., Apache, XAMPP, or VS Code Live Server) because AJAX requests cannot access local files directly due to browser security restrictions.

95 marksMain and article tagsAnswer

What are the usages of Main and Aside tags? Write HTML script using these tags. [3+2]

Main and Aside Tags in HTML

Usages of `<main>` Tag

The <main> tag is used to specify the main content of a document. It represents the dominant content of the <body> of a document.

Key points:

There should be only one <main> element in a document
The content inside <main> should be unique to the document
It helps screen readers and search engines identify the primary content
It excludes content that is repeated across pages like navigation bars, headers, footers, and sidebars

Usages of `<aside>` Tag

The <aside> tag is used to define content that is placed aside from the main content. It represents content that is indirectly related to the surrounding content.

Key points:

Used for sidebars, pull quotes, advertisements, or related links
The content inside <aside> is tangentially related to the main content
It is often displayed as a sidebar in a webpage
Helps in semantic structuring of the webpage

HTML Script Using `<main>` and `<aside>` Tags

<!DOCTYPE html>
<html>
  <head>
    <title>Main and Aside Example</title>
    <style>
      main {
        width: 70%;
        float: left;
        background-color: #f0f0f0;
        padding: 10px;
      }
      aside {
        width: 25%;
        float: right;
        background-color: #d0e4f7;
        padding: 10px;
      }
    </style>
  </head>
  <body>

    <header>
      <h1>My Website</h1>
    </header>

    <main>
      <h2>Welcome to the Main Content</h2>
      <p>
        This is the primary content of the webpage.
        It contains the most important information
        that the user is looking for.
      </p>
      <p>
        HTML5 semantic tags help organize content
        in a meaningful and accessible way.
      </p>
    </main>

    <aside>
      <h3>Related Links</h3>
      <ul>
        <li><a href="#">HTML Tutorial</a></li>
        <li><a href="#">CSS Tutorial</a></li>
        <li><a href="#">JavaScript Guide</a></li>
      </ul>
      <h3>Advertisement</h3>
      <p>Buy our new book on Web Development!</p>
    </aside>

    <footer style="clear:both;">
      <p>Copyright 2024. All rights reserved.</p>
    </footer>

  </body>
</html>

Output Structure

Section	Tag Used	Purpose
Primary content area	`<main>`	Holds the main article/content
Sidebar area	`<aside>`	Holds related links and ads

105 marksForm validation concept and purposeHideAnswer
Create a web form and write JavaScript to show form validation. The validation should be done for required, length and some pattern in the HTML form elements. [5]
--- Field Type of validation Rule enforced --------- Full name Required Must not be empty Username Required + length At least the minimum number of characters Email Required + pattern Text, an @, a domain, a dot and a suffix of two or mo...
115 marksXSLT transformation to HTMLHideAnswer
Create a XML document with some elements and write equivalent XSLT to render XML content in HTML. [5]
--- --- ID Name Faculty Marks --------------------------------- 1 Ram Sharma CSIT 85 2 Sita Thapa BCA 90 3 Hari Poudel BIT 78 --- Element / Attribute Purpose ------ <?xml-stylesheet? Links the XML file to the XSLT stylesheet <xsl:stylesh...

125 marksStatic websites versus dynamic websitesAnswer

What is a web page? How static web sites are different from dynamic web sites. [1+4]

Web Page, Static vs Dynamic Websites

What is a Web Page? [1 Mark]

A web page is a document written in HTML (HyperText Markup Language) that can be displayed in a web browser. It may contain text, images, videos, hyperlinks, and other multimedia elements. Web pages are accessed over the internet using a URL (Uniform Resource Locator) and are hosted on web servers.

Static vs Dynamic Websites [4 Marks]

Static Website

A static website is one where web pages are pre-built and stored on the server as fixed HTML files. Every user who visits the page receives the same content, regardless of who they are or when they visit. The content does not change unless the developer manually edits the HTML file.

Characteristics:

Built using only HTML, CSS, and sometimes JavaScript (client-side)
No interaction with a database
Fast to load and easy to host
Suitable for simple, informational websites (e.g., a personal portfolio)

Dynamic Website

A dynamic website is one where web pages are generated on the fly by the server in response to a user's request. The content can change based on user input, time, location, or data stored in a database.