Chapter 1

Web Technology I

TU BIT past exam questions

Past questions and answers

71 questions set from this chapter, 1 of them more than once. Most repeated first.

Asked 2 times
2080.2 · 5 marks
2082 · 5 marks

Differentiate Web 1.0 from Web 2.0.

Answer

Basis	Web 1.0	Web 2.0
Nature	Static, read-only web	Dynamic, read-write, interactive web
Content creation	Created by webmasters; users only consume	Users create and share content (blogs, wikis, videos)
Interaction	One-way	Two-way, social, collaborative
Technologies	Plain HTML, basic CSS, tables	AJAX, JavaScript frameworks, XML/JSON, RSS, APIs
Examples	Early company websites, Encyclopaedia Britannica online	Facebook, YouTube, Wikipedia, Twitter
Pages	Mostly static pages	Dynamic, personalised pages and web apps
Data	Stored by site owners	User-generated data, tagging, sharing
Era	About 1991-2004	From about 2004 onward

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2079 · 10 marks

Explain the meaning of "hypertext" and "markup" in HTML. Create a page titled "Myfirstpage" with a meta tag (name "author", content "Gunnu"). In the body, add a div with id DV_1 containing an ordered list: Orange, Apple2, Banana3, Kiwi. Kiwi links to www.kiwi.com. Add the comment "This is kiwi" after Kiwi. Show an alert "Helloworldx" in the body's onload event.

Answer

Hypertext is text that contains links (hyperlinks) to other text or documents, so a reader can jump from one page or resource to another by clicking. It is what makes the Web a connected "web" of documents.

Markup means annotating plain text with tags that describe its structure and meaning (heading, paragraph, list, link). HTML (HyperText Markup Language) uses tags such as <h1>, <p> and <a>; the browser reads the tags and renders the content accordingly.

Page:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="author" content="Gunnu">
  <title>Myfirstpage</title>
</head>
<body onload="alert('Helloworldx')">
  <div id="DV_1">
    <ol>
      <li>Orange</li>
      <li>Apple2</li>
      <li>Banana3</li>
      <li><a href="http://www.kiwi.com">Kiwi</a> <!-- This is kiwi --></li>
    </ol>
  </div>
</body>
</html>

The onload attribute on <body> runs the alert when the page finishes loading. The comment is placed immediately after the Kiwi item's link and is not displayed.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2079 · 10 marks

What is CSS? How is it inserted into an HTML page? Illustrate with examples.

Answer

CSS (Cascading Style Sheets) is a style language used to control the presentation of an HTML document: colours, fonts, spacing, layout and positioning. It separates content (HTML) from presentation, so one stylesheet can style many pages. A rule has the form selector { property: value; }.

Three ways to insert CSS:

(a) Inline CSS uses the style attribute on a single element. It affects only that element.

<p style="color:blue; font-size:18px;">Inline styled text</p>

(b) Internal (embedded) CSS is written inside a <style> element in the <head>. It applies to the whole page.

<head>
  <style>
    h1 { color: green; text-align: center; }
    p  { font-family: Arial; }
  </style>
</head>

(c) External CSS is kept in a separate .css file and linked with <link> in the <head>. It can be shared by many pages and is the best choice for large sites.

<link rel="stylesheet" href="style.css">

style.css:

body { background-color: #f0f0f0; }
h1   { color: red; }

Priority (cascade): inline styles override internal and external styles, and internal and external styles are applied in the order they appear (later rule wins when specificity is equal).

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2079 · 10 marks

What does "extensible" mean in XML? State the XML naming rules. Create an XML file with an empty element, an element with content, an element with child elements, and an element with an attribute. Then write the equivalent DTD.

Answer

Extensible means that XML does not have a fixed set of tags. Users define their own tags to describe their own data, and new elements can be added later without breaking existing applications that process the document.

XML naming rules:

Names can contain letters, digits, hyphens, underscores and periods.
Names must start with a letter or underscore, never a digit or punctuation.
Names cannot start with the letters xml (in any case).
Names cannot contain spaces.
Names are case sensitive (<Name> and <name> differ).
Names should not contain colon : (reserved for namespaces).

XML file:

<?xml version="1.0" encoding="UTF-8"?>
<library>
  <note/>                                  <!-- empty element -->
  <title>Web Technology</title>            <!-- element with content -->
  <book>                                   <!-- element with child elements -->
    <name>XML Basics</name>
    <author>Ram</author>
  </book>
  <student id="101">Sita</student>         <!-- element with attribute -->
</library>

Equivalent DTD:

<!DOCTYPE library [
  <!ELEMENT library (note, title, book, student)>
  <!ELEMENT note EMPTY>
  <!ELEMENT title (#PCDATA)>
  <!ELEMENT book (name, author)>
  <!ELEMENT name (#PCDATA)>
  <!ELEMENT author (#PCDATA)>
  <!ELEMENT student (#PCDATA)>
  <!ATTLIST student id CDATA #REQUIRED>
]>

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2079 · 5 marks

Use an example to show how XML namespaces prevent name conflicts.

Answer

An XML namespace gives element names a unique identity by associating them with a URI, declared with xmlns:prefix="URI". When two XML vocabularies are mixed and both use the same element name, the prefix tells the parser which one is meant.

Conflict without namespaces: an HTML table <table> of data and a furniture <table> would both be called table.

Solution with namespaces:

<root xmlns:h="http://www.w3.org/TR/html4/"
      xmlns:f="https://www.example.com/furniture">

  <h:table>
    <h:tr>
      <h:td>Apples</h:td>
      <h:td>Bananas</h:td>
    </h:tr>
  </h:table>

  <f:table>
    <f:name>African Coffee Table</f:name>
    <f:width>80</f:width>
    <f:length>120</f:length>
  </f:table>
</root>

Here h:table and f:table are different elements because their prefixes map to different URIs. The URI is only an identifier; it need not point to a real page. A default namespace can also be set with xmlns="URI" to avoid prefixes on every element.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2079 · 5 marks

Create an XML file with Username and Password elements. Write its XSD, restricting Password to 4-8 characters.

Answer

XML file (user.xml):

<?xml version="1.0" encoding="UTF-8"?>
<User xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="user.xsd">
  <Username>ram123</Username>
  <Password>secret12</Password>
</User>

XSD (user.xsd):

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

  <xs:element name="User">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="Username" type="xs:string"/>
        <xs:element name="Password">
          <xs:simpleType>
            <xs:restriction base="xs:string">
              <xs:minLength value="4"/>
              <xs:maxLength value="8"/>
            </xs:restriction>
          </xs:simpleType>
        </xs:element>
      </xs:sequence>
    </xs:complexType>
  </xs:element>

</xs:schema>

minLength and maxLength restrict Password to between 4 and 8 characters (secret12 has 8, so it is valid; abc would be rejected).

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2079 · 5 marks

Write CSS illustrating the Normal Box Layout and the Basic Box Layout.

Answer

Normal box layout (normal flow): elements are placed according to their default display type. Block elements (div, p) start on a new line and stretch to the full width; inline elements (span, a) sit side by side within a line.

Basic box layout (box model): every element is a rectangular box made of content, padding, border and margin.

<!DOCTYPE html>
<html>
<head>
<style>
  /* Normal flow: block boxes stack vertically, inline boxes flow in a line */
  .block  { display: block;  background: #cde; }
  .inline { display: inline; background: #fdc; }

  /* Basic box: content + padding + border + margin */
  .box {
    width: 200px;
    height: 80px;
    padding: 15px;
    border: 5px solid navy;
    margin: 20px;
    background: lightyellow;
  }
</style>
</head>
<body>
  <div class="block">Block 1 (own line)</div>
  <div class="block">Block 2 (own line)</div>
  <span class="inline">Inline A</span>
  <span class="inline">Inline B</span>

  <div class="box">Content area of the box</div>
</body>
</html>

Total width of .box = 200 + 2(15) + 2(5) + 2(20) = 280 px (content + padding + border + margin).

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2079 · 5 marks

Write an external CSS file and link it to an HTML page with various elements. State your assumptions about the elements and their styles.

Answer

Assumptions: the page contains a heading (h1), paragraphs (p), an unordered list, a link, and a div with class box. Headings are centred blue, paragraphs use Arial 16px, links have no underline, and the box has a border and padding.

style.css:

body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
}
h1 {
  color: blue;
  text-align: center;
}
p {
  font-size: 16px;
  line-height: 1.5;
}
ul li {
  list-style-type: square;
  color: darkgreen;
}
a {
  text-decoration: none;
  color: crimson;
}
a:hover {
  text-decoration: underline;
}
.box {
  border: 2px solid #333;
  padding: 10px;
  margin: 15px;
  background-color: #fff;
}

index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>External CSS</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Welcome</h1>
  <p>This page is styled by an external CSS file.</p>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
  </ul>
  <div class="box">A styled box.</div>
  <a href="https://www.example.com">Visit site</a>
</body>
</html>

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2079 · 5 marks

How are JavaScript variables defined and declared? Write a function that includes a variable holding the number 5 and one holding the character '5', then prints both.

Answer

Defining and declaring variables: a JavaScript variable is a named container for a value. It is declared with var, let or const, and may be assigned a value at the same time (initialised).

var x = 5; function-scoped, can be redeclared.
let y = 10; block-scoped, can be reassigned.
const z = 15; block-scoped, cannot be reassigned.

JavaScript is dynamically typed, so the same variable can later hold a different type. A variable declared without a value holds undefined.

Program:

<script>
function show() {
  let num = 5;      // number
  let ch = '5';     // character (string of length 1)
  console.log(num);
  console.log(ch);
  document.write("Number: " + num + "<br>");
  document.write("Character: " + ch);
  console.log(typeof num, typeof ch);  // number string
}
show();
</script>

Both print as 5, but num has type number and ch has type string, so num + 1 gives 6 while ch + 1 gives "51".

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2079 · 5 marks

What is form validation? Write a JavaScript function that validates an email field, requires a password of at least 6 characters, and requires at least one of three hobby checkboxes to be checked.

Answer

Form validation is the process of checking the data entered in a form before it is submitted, to make sure it is complete, correctly formatted and acceptable. Client-side validation with JavaScript gives instant feedback and reduces server load.

<form name="f" onsubmit="return validate()">
  Email: <input type="text" name="email"><br>
  Password: <input type="password" name="pwd"><br>
  Hobbies:
  <input type="checkbox" name="hobby" value="Reading"> Reading
  <input type="checkbox" name="hobby" value="Music"> Music
  <input type="checkbox" name="hobby" value="Sports"> Sports<br>
  <input type="submit" value="Submit">
</form>

<script>
function validate() {
  var email = document.f.email.value;
  var pwd = document.f.pwd.value;
  var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!re.test(email)) {
    alert("Enter a valid email address");
    return false;
  }
  if (pwd.length < 6) {
    alert("Password must be at least 6 characters");
    return false;
  }
  var boxes = document.getElementsByName("hobby");
  var checked = 0;
  for (var i = 0; i < boxes.length; i++) {
    if (boxes[i].checked) checked++;
  }
  if (checked < 1) {
    alert("Select at least one hobby");
    return false;
  }
  return true;
}
</script>

The function returns false to stop submission when any check fails.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2079 · 5 marks

What is the canvas element? Write HTML that creates a canvas with id cv1 and draws a circle inside it.

Answer

The canvas element (<canvas>) is an HTML5 element that provides a rectangular drawing area on a web page. It is only a container; shapes, text, images and animations are drawn on it with JavaScript using the 2D context (getContext("2d")).

<!DOCTYPE html>
<html>
<body>
  <canvas id="cv1" width="200" height="200" style="border:1px solid #000;"></canvas>

  <script>
    var c = document.getElementById("cv1");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(100, 100, 60, 0, 2 * Math.PI);  // centre (100,100), radius 60
    ctx.fillStyle = "orange";
    ctx.fill();
    ctx.stroke();
  </script>
</body>
</html>

arc(x, y, r, startAngle, endAngle) draws a circle when the angles span 0 to $2\pi$ radians.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2079 · 5 marks

What is client-server architecture? Describe its different types.

Answer

Client-server architecture is a distributed model in which work is divided between clients, which request services (for example a web browser), and servers, which provide them (for example a web server or database server). Clients and servers communicate over a network, typically using request-response protocols such as HTTP. The server is centralised and shared by many clients.

Types:

1-tier (single tier): presentation, logic and data are all on one machine, for example a standalone desktop application with a local file.
2-tier: the client holds the user interface and business logic and talks directly to the database server. It is simple and fast but hard to scale and maintain.
3-tier: a presentation tier (browser/UI), an application tier (web/application server with business logic) and a data tier (database server). It is scalable, secure and easy to maintain; most web applications use it.
n-tier (multi-tier): extends 3-tier by splitting the application layer further (for example separate web server, application server, caching and services layers) for better load balancing and flexibility.

Advantages: centralised data and security, easier maintenance, scalability. Disadvantages: the server is a single point of failure and can be overloaded.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2079 · 5 marks

What is a table in HTML? Create a page with a DIV named "divtb" containing a table matching the layout in the given figure. The table border must be dotted.

Answer

A table in HTML displays data in rows and columns. It is built with <table>, rows <tr>, header cells <th> and data cells <td>. Cells can span several rows or columns with rowspan and colspan.

The figure is not available, so a typical layout (a header row, data rows, and one cell spanning two columns) is assumed:

<!DOCTYPE html>
<html>
<head>
<style>
  #divtb table, #divtb th, #divtb td {
    border: 2px dotted black;
    border-collapse: collapse;
    padding: 6px;
  }
</style>
</head>
<body>
  <div id="divtb">
    <table>
      <tr>
        <th>Name</th>
        <th>Subject</th>
        <th>Marks</th>
      </tr>
      <tr>
        <td>Ram</td>
        <td>Web Tech</td>
        <td>78</td>
      </tr>
      <tr>
        <td>Sita</td>
        <td>AI</td>
        <td>82</td>
      </tr>
      <tr>
        <td colspan="2">Total students</td>
        <td>2</td>
      </tr>
    </table>
  </div>
</body>
</html>

The border: ... dotted declaration makes every table border dotted; adjust colspan/rowspan to match the figure's merged cells.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080 · 10 marks

Define the HTML head and body tags, then write HTML that produces the output shown in the given figure, with the page title "BIT Web Tech".

Answer

<head> contains metadata about the document that is not displayed on the page itself: the <title>, <meta> tags, <link> to stylesheets, <style> and <script>.

<body> contains all the visible content of the page: headings, paragraphs, images, links, lists, tables and forms.

The figure is not available, so a typical output (heading, paragraph, list and link) is assumed:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>BIT Web Tech</title>
</head>
<body>
  <h1>Bachelor in Information Technology</h1>
  <p>This is a <b>paragraph</b> about <i>Web Technology</i>.</p>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  <a href="https://www.tu.edu.np">Tribhuvan University</a>
</body>
</html>

The text inside <title> ("BIT Web Tech") appears in the browser tab, while the body elements appear in the page.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080 · 10 marks

Explain how inline, internal, and external CSS are used, with examples. Include at least one class selector and one id selector.

Answer

Inline CSS is written in the style attribute of one element and affects only that element.

<p style="color:red; font-size:20px;">Inline styled paragraph</p>

Internal CSS is placed in a <style> element in the <head> and affects that page only. It can use class (.name) and id (#name) selectors.

<head>
<style>
  .note { color: blue; font-style: italic; }   /* class selector */
  #title { color: green; text-align: center; } /* id selector */
</style>
</head>
<body>
  <h1 id="title">Heading</h1>
  <p class="note">First note</p>
  <p class="note">Second note</p>
</body>

External CSS is stored in a separate .css file and linked in the <head>, so many pages share one stylesheet.

style.css:

.note  { color: blue; }
#title { color: green; }

<link rel="stylesheet" href="style.css">

Comparison: inline has the highest priority but is hard to maintain; internal suits a single page; external is best for whole websites because one change updates every linked page. A class can be used on many elements, an id only once per page.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080 · 10 marks

Create a signup form with username, password, email, country, gender, and hobbies fields. Apply validation rules, then write JavaScript to validate the form.

Answer

Validation rules applied:

Username: required, at least 4 characters, letters/digits only.
Password: required, at least 6 characters.
Email: required, valid format.
Country: must be selected.
Gender: one option must be chosen.
Hobbies: at least one checkbox must be ticked.

<!DOCTYPE html>
<html>
<head><title>Signup</title></head>
<body>
<form name="signup" onsubmit="return validateForm()">
  Username: <input type="text" name="username"><br><br>
  Password: <input type="password" name="password"><br><br>
  Email: <input type="text" name="email"><br><br>
  Country:
  <select name="country">
    <option value="">--Select--</option>
    <option value="Nepal">Nepal</option>
    <option value="India">India</option>
    <option value="Other">Other</option>
  </select><br><br>
  Gender:
  <input type="radio" name="gender" value="Male"> Male
  <input type="radio" name="gender" value="Female"> Female
  <input type="radio" name="gender" value="Other"> Other<br><br>
  Hobbies:
  <input type="checkbox" name="hobby" value="Reading"> Reading
  <input type="checkbox" name="hobby" value="Music"> Music
  <input type="checkbox" name="hobby" value="Sports"> Sports<br><br>
  <input type="submit" value="Sign up">
</form>

<script>
function validateForm() {
  var f = document.forms["signup"];
  var user = f.username.value.trim();
  var pass = f.password.value;
  var email = f.email.value.trim();

  if (!/^[A-Za-z0-9]{4,}$/.test(user)) {
    alert("Username must be at least 4 letters or digits");
    return false;
  }
  if (pass.length < 6) {
    alert("Password must be at least 6 characters");
    return false;
  }
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    alert("Enter a valid email");
    return false;
  }
  if (f.country.value === "") {
    alert("Select a country");
    return false;
  }
  var gender = false;
  for (var i = 0; i < f.gender.length; i++) {
    if (f.gender[i].checked) gender = true;
  }
  if (!gender) {
    alert("Select a gender");
    return false;
  }
  var hobbies = document.querySelectorAll('input[name="hobby"]:checked');
  if (hobbies.length === 0) {
    alert("Select at least one hobby");
    return false;
  }
  return true;
}
</script>
</body>
</html>

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080 · 5 marks

Describe HTTP request and response.

Answer

HTTP (HyperText Transfer Protocol) works on a request-response model: the client (browser) sends a request and the server sends back a response.

HTTP request has three parts:

Request line: method, resource path and version, e.g. GET /index.html HTTP/1.1. Common methods are GET, POST, PUT, DELETE and HEAD.
Headers: extra information such as Host, User-Agent, Accept, Cookie.
Body (optional): data sent with POST or PUT, e.g. form fields.

HTTP response has three parts:

Status line: version, status code and message, e.g. HTTP/1.1 200 OK. Codes: 2xx success, 3xx redirection, 4xx client error (404 Not Found), 5xx server error (500).
Headers: Content-Type, Content-Length, Set-Cookie, Server.
Body: the requested content, e.g. the HTML page.

Example: the browser sends GET /index.html; the server replies 200 OK with the HTML in the body. HTTP is stateless, so each request is independent unless cookies or sessions are used.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080 · 5 marks

What is the XMLHttpRequest object? Write an AJAX script that uses it.

Answer

The XMLHttpRequest (XHR) object is a built-in browser object that lets JavaScript exchange data with a server in the background, without reloading the page. It is the basis of AJAX (Asynchronous JavaScript and XML). It can send GET or POST requests and receive text, XML or JSON.

Main members: open(method, url, async), send(), onreadystatechange, readyState (0-4; 4 means done), status (200 means OK) and responseText.

<!DOCTYPE html>
<html>
<body>
  <div id="demo">Original text</div>
  <button type="button" onclick="loadData()">Load</button>

  <script>
  function loadData() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById("demo").innerHTML = xhr.responseText;
      }
    };
    xhr.open("GET", "data.txt", true);
    xhr.send();
  }
  </script>
</body>
</html>

When the button is clicked, data.txt is fetched asynchronously and only the demo div is updated.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080 · 5 marks

What are HTML form events? Write HTML that prints text on the onchange and onfocus events.

Answer

Form events are events triggered by user interaction with form controls, for which JavaScript handlers can be attached. Common ones: onfocus (a field receives focus), onblur (it loses focus), onchange (value changed and focus left), oninput, onselect, onsubmit and onreset.

<!DOCTYPE html>
<html>
<body>
  <form>
    Name: <input type="text" id="name" onfocus="showFocus()"><br><br>
    City:
    <select id="city" onchange="showChange()">
      <option>Kathmandu</option>
      <option>Pokhara</option>
      <option>Lalitpur</option>
    </select>
  </form>
  <p id="msg"></p>

  <script>
  function showFocus() {
    document.getElementById("msg").innerHTML = "The name field is focused";
  }
  function showChange() {
    var v = document.getElementById("city").value;
    document.getElementById("msg").innerHTML = "You changed the city to " + v;
  }
  </script>
</body>
</html>

Clicking in the name box prints the focus message; choosing another city prints the change message.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080 · 5 marks

Write internal CSS that demonstrates static, relative, and fixed positioning.

Answer

The CSS position property controls how an element is placed.

static (default): follows the normal flow; top/left have no effect.
relative: positioned relative to its normal position; the original space is kept.
fixed: positioned relative to the viewport and stays in place when scrolling.

<!DOCTYPE html>
<html>
<head>
<style>
  .box { width: 200px; height: 60px; border: 1px solid black; margin: 10px; }

  .static   { position: static;   background: lightblue;  }
  .relative { position: relative; background: lightgreen;
              top: 20px; left: 40px; }
  .fixed    { position: fixed;    background: lightpink;
              bottom: 10px; right: 10px; }
</style>
</head>
<body>
  <div class="box static">Static: normal flow</div>
  <div class="box relative">Relative: shifted 20px down, 40px right</div>
  <div class="box fixed">Fixed: stays at bottom-right when scrolling</div>
  <div style="height:1000px;">Scroll to see fixed box stay in place.</div>
</body>
</html>

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080 · 5 marks

Use the figure tag to display a photo from a given path, with alt text "BIT" and caption "This is the BIT Campus".

Answer

The <figure> element holds self-contained content such as an image, and <figcaption> gives it a caption.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Figure</title>
</head>
<body>
  <figure>
    <img src="images/bit.jpg" alt="BIT" width="400">
    <figcaption>This is the BIT Campus</figcaption>
  </figure>
</body>
</html>

Replace images/bit.jpg with the given path. The alt text "BIT" is shown if the image cannot load and is used by screen readers.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080 · 5 marks

What is XQuery? For the XML shown in the given figure, write a query that returns movie titles with budget greater than 500, and give the result.

Answer

XQuery is a query and functional programming language for XML, similar in role to SQL for databases. It uses XPath to locate nodes and FLWOR expressions (for, let, where, order by, return) to select, filter, sort and restructure XML data.

The figure is not available, so a typical movie file is assumed:

<movies>
  <movie>
    <title>Avatar</title>
    <budget>700</budget>
  </movie>
  <movie>
    <title>Titanic</title>
    <budget>400</budget>
  </movie>
  <movie>
    <title>Avengers</title>
    <budget>900</budget>
  </movie>
</movies>

Query:

for $m in doc("movies.xml")/movies/movie
where $m/budget > 500
return $m/title

Result:

<title>Avatar</title>
<title>Avengers</title>

Only movies whose budget exceeds 500 (Avatar 700, Avengers 900) are returned; Titanic (400) is filtered out by the where clause.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080 · 5 marks

What is XML used for, and why is it called extensible? Give an example.

Answer

Uses of XML (eXtensible Markup Language):

Storing and transporting data in a plain-text, platform-independent format.
Exchanging data between different systems and applications (web services, SOAP, RSS feeds).
Configuration files (for example Android manifests, Maven pom.xml).
Separating data from presentation, so the same data can be shown in different formats using XSLT.
Basis of many other languages such as XHTML, SVG and MathML.

Why extensible: XML does not have predefined tags. Authors define their own tags and structure to suit their data, and new elements can be added later without breaking existing programs that read the document.

Example:

<?xml version="1.0" encoding="UTF-8"?>
<student>
  <name>Sita</name>
  <roll>12</roll>
  <course>BIT</course>
</student>

Here student, name, roll and course are tags invented by the author; to add an email, simply add <email> inside student.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080 · 5 marks

How does a DTD differ from an XSD?

Answer

Both DTD (Document Type Definition) and XSD (XML Schema Definition) define the legal structure of an XML document, but they differ as follows.

Basis	DTD	XSD
Syntax	Special non-XML syntax	Written in XML itself
Data types	Very few (mostly `#PCDATA`, `CDATA`)	Rich types: string, integer, date, boolean, etc., plus custom types
Namespaces	Not supported	Supported
Occurrence control	Limited (`?`, `*`, `+`)	Precise with `minOccurs` and `maxOccurs`
Extensibility	Cannot be extended or reused easily	Extensible; types can be derived and reused
Restrictions	No value restrictions	Facets such as length, pattern, range
Parsing	Cannot be parsed by an XML parser	Parsed and processed like any XML document
Complexity	Simple, compact	More verbose, more powerful

Hence XSD is preferred for modern applications that need strict data validation.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080 · 5 marks

How is exception handling done in JavaScript? Write a program that handles division by zero.

Answer

Exception handling in JavaScript uses try, catch, finally and throw.

try contains code that may cause an error.
catch (e) runs if an error occurs, receiving the error object.
finally runs always, whether or not an error occurred.
throw creates a custom error.

JavaScript does not raise an error for division by zero (it returns Infinity), so the program throws one explicitly.

<script>
function divide(a, b) {
  try {
    if (b === 0) {
      throw new Error("Division by zero is not allowed");
    }
    var result = a / b;
    console.log("Result = " + result);
  } catch (e) {
    console.log("Error: " + e.message);
  } finally {
    console.log("Division attempted");
  }
}

divide(10, 2);   // Result = 5
divide(10, 0);   // Error: Division by zero is not allowed
</script>

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080.2 · 10 marks

Define client-side validation and explain why form validation is needed. Write a JavaScript program validating a form with a text field, password field, radio buttons, checkbox, and dropdown, each as required. Add password validation constraints.

Answer

Client-side validation is the checking of user input in the browser, using JavaScript or HTML5 attributes, before the data is sent to the server.

Why form validation is needed:

Ensures required fields are filled and data is in the correct format.
Gives immediate feedback to users and improves usability.
Reduces unnecessary server requests and load.
Prevents bad or malicious input from reaching the server (server-side validation is still needed for security).

Program (all fields required; password at least 8 characters with an uppercase letter, a lowercase letter and a digit):

<!DOCTYPE html>
<html>
<body>
<form name="reg" onsubmit="return validate()">
  Name: <input type="text" name="fname"><br><br>
  Password: <input type="password" name="pwd"><br><br>
  Gender:
  <input type="radio" name="gender" value="M"> Male
  <input type="radio" name="gender" value="F"> Female<br><br>
  <input type="checkbox" name="agree"> I agree to the terms<br><br>
  Course:
  <select name="course">
    <option value="">--Select--</option>
    <option>BIT</option>
    <option>BCA</option>
  </select><br><br>
  <input type="submit" value="Submit">
</form>

<script>
function validate() {
  var f = document.reg;

  if (f.fname.value.trim() === "") {
    alert("Name is required"); return false;
  }

  var p = f.pwd.value;
  if (p === "") {
    alert("Password is required"); return false;
  }
  if (p.length < 8) {
    alert("Password must be at least 8 characters"); return false;
  }
  if (!/[A-Z]/.test(p) || !/[a-z]/.test(p) || !/[0-9]/.test(p)) {
    alert("Password needs an uppercase letter, a lowercase letter and a digit");
    return false;
  }

  if (!f.gender[0].checked && !f.gender[1].checked) {
    alert("Select a gender"); return false;
  }
  if (!f.agree.checked) {
    alert("You must accept the terms"); return false;
  }
  if (f.course.value === "") {
    alert("Select a course"); return false;
  }
  return true;
}
</script>
</body>
</html>

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080.2 · 10 marks

Explain the CSS box model, defining its areas and edges. Write CSS demonstrating the box model.

Answer

The CSS box model describes every HTML element as a rectangular box made of four layers, from the inside out:

Content area: the text, image or other content, sized by width and height.
Padding area: transparent space between the content and the border (padding).
Border area: the line surrounding the padding and content (border).
Margin area: transparent space outside the border that separates the element from neighbours (margin).

Edges: content edge (inner edge of padding), padding edge (inside the border), border edge (outer edge of the border) and margin edge (outer boundary of the margin).

With the default box-sizing: content-box, the total width is

$\text{width} + 2\cdot\text{padding} + 2\cdot\text{border} + 2\cdot\text{margin}$

<!DOCTYPE html>
<html>
<head>
<style>
  div.demo {
    width: 300px;
    padding: 20px;
    border: 10px solid green;
    margin: 25px;
    background-color: lightyellow;
  }
  div.border-box {
    box-sizing: border-box;   /* width includes padding and border */
    width: 300px;
    padding: 20px;
    border: 10px solid blue;
  }
</style>
</head>
<body>
  <div class="demo">content-box: total width = 300+40+20+50 = 410px</div>
  <div class="demo border-box">border-box: content+padding+border = 300px</div>
</body>
</html>

For .demo, the width occupied is $300 + 2(20) + 2(10) + 2(25) = 410$ px. With border-box, padding and border are included in the 300 px.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080.2 · 10 marks

Explain the use of XML. For the XML shown in the given figure, write an XSD for validation (Name and Address as strings, Number as integer, Accessible as boolean, child elements in the given order) and an XSLT transforming it to HTML.

Answer

Uses of XML: storing and transporting data in a platform-independent plain-text format; exchanging data between systems (web services, feeds); configuration files; separating data from presentation; and serving as the base for languages such as XHTML and SVG.

The figure is not available, so an XML document with root Contact is assumed, with child elements in the order Name, Address, Number, Accessible:

<?xml version="1.0" encoding="UTF-8"?>
<Contact>
  <Name>Ram Sharma</Name>
  <Address>Kathmandu</Address>
  <Number>9841000000</Number>
  <Accessible>true</Accessible>
</Contact>

XSD:

<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="Contact">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="Name" type="xs:string"/>
        <xs:element name="Address" type="xs:string"/>
        <xs:element name="Number" type="xs:integer"/>
        <xs:element name="Accessible" type="xs:boolean"/>
      </xs:sequence>
    </xs:complexType>
  </xs:element>
</xs:schema>

xs:sequence forces the children to appear in the given order.

XSLT (transform to HTML):

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"/>
  <xsl:template match="/">
    <html>
      <body>
        <h2>Contact Details</h2>
        <table border="1">
          <tr><th>Name</th><th>Address</th><th>Number</th><th>Accessible</th></tr>
          <tr>
            <td><xsl:value-of select="Contact/Name"/></td>
            <td><xsl:value-of select="Contact/Address"/></td>
            <td><xsl:value-of select="Contact/Number"/></td>
            <td><xsl:value-of select="Contact/Accessible"/></td>
          </tr>
        </table>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

The XML file links the stylesheet with <?xml-stylesheet type="text/xsl" href="contact.xsl"?> placed after the XML declaration.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080.2 · 5 marks

Create an HTML page with a meta tag: title "This Meta BIT", description "Hello BIT", keywords "BIT", "IOST", "TU", UTF-8 encoding. Put "Hello BIT" in an H1 and "Web Tech" in an H2 in the body.

Answer

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="title" content="This Meta BIT">
  <meta name="description" content="Hello BIT">
  <meta name="keywords" content="BIT, IOST, TU">
  <title>This Meta BIT</title>
</head>
<body>
  <h1>Hello BIT</h1>
  <h2>Web Tech</h2>
</body>
</html>

<meta charset="UTF-8"> sets the character encoding. The meta tags provide metadata for search engines and browsers and are not displayed; only the H1 and H2 appear on the page.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080.2 · 5 marks

Write HTML demonstrating the main and article tags.

Answer

<main> holds the dominant content of the page body (only one visible <main> per page). <article> marks a self-contained piece of content that makes sense on its own, such as a news story or blog post.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Main and Article</title>
</head>
<body>
  <header><h1>My News Site</h1></header>

  <main>
    <article>
      <h2>Web Technology Exam</h2>
      <p>The Web Technology exam will be held next week.</p>
    </article>

    <article>
      <h2>New Lab Opened</h2>
      <p>The BIT department opened a new computer lab.</p>
    </article>
  </main>

  <footer><p>&copy; 2025</p></footer>
</body>
</html>

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080.2 · 5 marks

Write HTML to display, inside a div in the body: (a) the ampersand sign (&); (b) three equations/expressions, including 3x²+2x₁y<4 and 45 < > 30.

Answer

Special characters are written as HTML entities: & for &, < for <, > for >, <sup> for superscripts and <sub> for subscripts.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Entities</title>
</head>
<body>
  <div>
    <p>(a) Ampersand sign: &amp;</p>
    <p>(b) Expressions:</p>
    <p>1. 3x<sup>2</sup> + 2x<sub>1</sub>y &lt; 4</p>
    <p>2. 45 &lt; &gt; 30</p>
    <p>3. a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
  </div>
</body>
</html>

The browser shows: &, then $3x^2+2x_1y<4$ , 45 < > 30 and $a^2+b^2=c^2$ . Writing < directly would be read as the start of a tag, so < is required.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080.2 · 5 marks

How does a class selector differ from an ID selector in CSS? Support with examples.

Answer

Basis	Class selector	ID selector
Symbol	Starts with a dot `.`	Starts with a hash `#`
Attribute	`class="name"`	`id="name"`
Reuse	Can be used on many elements	Must be unique, used on only one element per page
Multiple	An element can have several classes	An element has only one id
Specificity	Lower	Higher (overrides class)
Other use	Group styling	Also targeted by JavaScript and anchor links

Example:

<style>
  .highlight { color: red; font-weight: bold; }   /* class */
  #main-title { color: blue; text-align: center; } /* id */
</style>

<h1 id="main-title">Page Title</h1>
<p class="highlight">First highlighted paragraph</p>
<p class="highlight">Second highlighted paragraph</p>

The class highlight styles both paragraphs, while main-title styles only the single heading.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080.2 · 5 marks

Create a JavaScript object Student with Name "Ram", Age 20, DOB 2003/02/03, then display its attributes.

Answer

<!DOCTYPE html>
<html>
<body>
  <p id="out"></p>

  <script>
    var Student = {
      Name: "Ram",
      Age: 20,
      DOB: "2003/02/03"
    };

    document.getElementById("out").innerHTML =
      "Name: " + Student.Name + "<br>" +
      "Age: " + Student.Age + "<br>" +
      "DOB: " + Student.DOB;

    console.log(Student);
  </script>
</body>
</html>

Output:

Name: Ram
Age: 20
DOB: 2003/02/03

The object is created with an object literal of name-value pairs. Properties are read with dot notation (Student.Name) or bracket notation (Student["Age"]).

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080.2 · 5 marks

Write a JavaScript program that takes the user's name via prompt and shows it in an alert.

Answer

<!DOCTYPE html>
<html>
<body>
  <script>
    var name = prompt("Enter your name:");
    alert("Hello, " + name + "!");
  </script>
</body>
</html>

prompt() shows a dialog with a text box and returns the entered string (or null if cancelled). alert() then displays it in a message box.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080.2 · 5 marks

Discuss the use of XQuery and XPath in XML.

Answer

XPath (XML Path Language) is a language for selecting nodes from an XML document by navigating its tree using path expressions.

/bookstore/book selects all book children of the root bookstore.
//title selects all title elements anywhere.
book[price>30] filters by condition; @id selects an attribute.
It also provides functions such as count(), text(), position().
Uses: locating data, and as a core part of XSLT and XQuery.

XQuery is a more powerful query language for XML, built on XPath. It can select, filter, join, sort and construct new XML using FLWOR expressions.

for $b in doc("books.xml")/bookstore/book
where $b/price > 30
order by $b/title
return $b/title

Uses: extracting data from XML databases and documents, generating reports, combining data from multiple XML sources, and transforming results into new XML or HTML.

Relation: XPath finds nodes (it is a navigation language); XQuery uses XPath to find nodes and adds iteration, conditions and result construction, similar to SQL for XML.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2080.2 · 5 marks

What is an XML tree? Differentiate static and dynamic websites.

Answer

XML tree: an XML document is represented as a tree structure with a single root element at the top. Each element is a node; nested elements are its children, elements sharing a parent are siblings, and text and attributes are leaf nodes. The tree is the basis for XPath, DOM parsing and XSLT.

<library>
  <book>
    <title>XML</title>
    <author>Ram</author>
  </book>
  <book>
    <title>HTML</title>
    <author>Sita</author>
  </book>
</library>

Here library is the root, each book is a child of library, and title and author are children of book.

Static vs dynamic websites:

Basis	Static website	Dynamic website
Content	Fixed; same for every visitor	Generated at request time; can differ per user
Technology	HTML, CSS, client-side JS	Server-side languages (PHP, Node.js, ASP.NET) with a database
Updating	Edit the files manually	Content managed through a database or CMS
Speed	Faster, less server work	Slower, more server processing
Interactivity	Limited	High (login, forms, shopping carts)
Cost and maintenance	Cheaper, simpler	More costly and complex
Example	Personal portfolio, brochure site	Facebook, e-commerce site

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2081 · 6+4 marks

Describe HTML events. Write HTML script to demonstrate Onkeypress and Onclick events.

Answer

HTML events are actions or occurrences that happen to HTML elements, such as the user clicking a button, pressing a key, loading a page or changing a field. JavaScript can respond to them by attaching handlers through event attributes (onclick, onkeypress, onload, onmouseover, onchange, onsubmit, ...). This makes web pages interactive.

Categories: mouse events (onclick, ondblclick, onmouseover), keyboard events (onkeypress, onkeydown, onkeyup), form events (onfocus, onblur, onchange, onsubmit), and window/document events (onload, onresize).

Demonstration of onkeypress and onclick:

<!DOCTYPE html>
<html>
<body>
  <h3>Onkeypress</h3>
  <input type="text" onkeypress="keyMsg()" placeholder="Type here">
  <p id="k"></p>

  <h3>Onclick</h3>
  <button onclick="clickMsg()">Click me</button>
  <p id="c"></p>

  <script>
    function keyMsg() {
      document.getElementById("k").innerHTML = "A key was pressed";
    }
    function clickMsg() {
      document.getElementById("c").innerHTML = "Button was clicked";
    }
  </script>
</body>
</html>

Typing in the text box fires onkeypress and the button fires onclick; each handler writes a message into a paragraph.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2081 · 5+5 marks

Explain the XML syntax rules. Create a XML file that contains a root element named "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.

Answer

XML syntax rules:

Every XML document must have exactly one root element.
Every start tag must have a matching end tag (or be self-closing, <x/>).
Tags are case sensitive.
Elements must be properly nested (no overlapping).
Attribute values must be quoted.
Special characters must use entities (<, >, &, ", ').
Names must follow naming rules (start with a letter or underscore, no spaces).
The XML declaration, if present, must be first in the document.
Comments use .

XML file (office.xml):

<?xml version="1.0" encoding="UTF-8"?>
<Office xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="office.xsd">
  <Employee>
    <Skills>Java</Skills>
    <Skills>XML</Skills>
  </Employee>
  <Employee>
    <Skills>PHP</Skills>
  </Employee>
  <Employee>
    <Skills>HTML</Skills>
    <Skills>CSS</Skills>
    <Skills>JavaScript</Skills>
  </Employee>
  <Employee>
    <Skills>Python</Skills>
  </Employee>
</Office>

XSD (office.xsd):

<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="Office">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="Employee" minOccurs="4" maxOccurs="4">
          <xs:complexType>
            <xs:sequence>
              <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>

minOccurs="4" maxOccurs="4" forces exactly four Employee elements, and minOccurs="1" maxOccurs="3" on Skills means each employee has at least one and at most three skills.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2081 · 6+4 marks

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.

Answer

Popup boxes in JavaScript are dialog windows used to show messages or collect input from the user. There are three kinds.

(a) Alert box shows a message with an OK button; the user must acknowledge it. Used for warnings and notices.

alert("Form submitted successfully!");

(b) Confirm box shows a message with OK and Cancel. It returns true for OK and false for Cancel. Used to confirm actions such as deletion.

if (confirm("Delete this record?")) {
  alert("Deleted");
} else {
  alert("Cancelled");
}

(c) Prompt box shows a message and a text field. It returns the entered string, or null if cancelled. Used to get simple input.

var city = prompt("Enter your city:", "Kathmandu");

Program to concatenate two strings:

<!DOCTYPE html>
<html>
<body>
  <script>
    var s1 = prompt("Enter the first string:");
    var s2 = prompt("Enter the second string:");
    var result = s1 + s2;
    alert("Concatenated string: " + result);
    document.write("Concatenated string: " + result);
  </script>
</body>
</html>

For inputs "Web" and "Tech", the output is WebTech.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2081 · 5 marks

Describe about the client server architecture.

Answer

Client-server architecture is a computing model in which tasks are split between service requesters (clients) and service providers (servers) that communicate over a network.

Client: the front-end program, such as a web browser or mobile app. It sends requests, for example an HTTP request for a page, and presents the response to the user.

Server: a powerful, always-running machine or program that listens for requests, processes them (running application logic, querying a database) and returns responses. Examples are web, database, file and mail servers.

Working: the client sends a request, the server processes it and sends a response, and the client displays the result. One server serves many clients at the same time.

Types (tiers):

1-tier: everything on one machine.
2-tier: client directly connects to a database server.
3-tier: presentation tier, application (logic) tier and data tier, separately deployed.
n-tier: further division into multiple layers.

Advantages: centralised data management and security, easy maintenance and updates, scalability, resource sharing.

Disadvantages: the server is a single point of failure, heavy load can cause congestion, and servers cost more to set up and maintain.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2081 · 5 marks

Write HTML script to generate following output. (figure)

Answer

The figure is not reproduced here, so this script builds a typical page of that kind: a heading, a paragraph with formatting, a list, a table and a link.

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Welcome to Education Nepal</h1>
  <p>This is a <b>bold</b>, <i>italic</i> and <u>underlined</u> text.</p>

  <h2>Subjects</h2>
  <ul>
    <li>Web Technology</li>
    <li>Artificial Intelligence</li>
  </ul>

  <table border="1">
    <tr><th>Roll</th><th>Name</th><th>Marks</th></tr>
    <tr><td>1</td><td>Ram</td><td>78</td></tr>
    <tr><td>2</td><td>Sita</td><td>85</td></tr>
  </table>

  <a href="https://www.tu.edu.np">Visit TU</a>
</body>
</html>

The h1/h2 tags make headings, p a paragraph, ul/li a bulleted list, table/tr/th/td a table with rows and cells, and a href a hyperlink.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2081 · 5 marks

Write HTML and equivalent CSS for some HTML elements to demonstrate relative and float positioning.

Answer

Relative positioning moves an element from its normal position using top, left, etc., while its original space is still reserved. Float takes an element to the left or right of its container so that following content wraps around it.

<!DOCTYPE html>
<html>
<head>
<style>
  .box { width: 150px; height: 80px; color: white; text-align: center; }
  #rel { position: relative; top: 20px; left: 40px; background: blue; }
  #fl  { float: right; background: green; margin: 10px; }
  #txt { background: #eee; }
  .clear { clear: both; }
</style>
</head>
<body>
  <div class="box" id="rel">Relative box</div>
  <div class="box" id="fl">Floated right</div>
  <p id="txt">This paragraph wraps around the floated box because the box is taken out of the normal flow to the right side.</p>
  <div class="clear"></div>
</body>
</html>

The blue box is shifted 20px down and 40px right from where it would normally appear. The green box floats to the right and the paragraph flows beside it. clear: both stops further content from wrapping.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2081 · 5 marks

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.

Answer

HTML

<link rel="stylesheet" href="style.css">
...
<div id="d1">First div</div>
<div>Second div</div>
<div>Third div</div>
<p>Paragraph one</p>
<p>Paragraph two</p>

External CSS (style.css)

div:first-of-type {
  border: 1px solid red;
}
div:nth-of-type(2),
div:nth-of-type(3) {
  font-family: Arial, sans-serif;
  color: blue;
}
p {
  background-color: yellow;
  display: block;
}

The first div gets a 1px red border. The second and third div elements get Arial font and blue text. Both p elements get a yellow background and display: block. The CSS is saved in a separate .css file and linked with <link>.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2081 · 2+3 marks

What is AJAX? Write a program to demonstrate the AJAX effect of your choice.

Answer

AJAX (Asynchronous JavaScript and XML) is a technique for exchanging data with a server in the background and updating part of a web page without reloading the whole page. It uses the XMLHttpRequest object (or fetch) and the DOM. This makes pages faster and more interactive.

Program

<!DOCTYPE html>
<html>
<body>
  <div id="demo"><h3>Content will change here</h3></div>
  <button onclick="loadData()">Load Data</button>

  <script>
    function loadData() {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          document.getElementById("demo").innerHTML = xhr.responseText;
        }
      };
      xhr.open("GET", "data.txt", true);
      xhr.send();
    }
  </script>
</body>
</html>

When the button is clicked, a request for data.txt is sent asynchronously. When the response arrives (readyState 4 and status 200), only the div is updated; the page is not reloaded.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2081 · 3+2 marks

What are the usages of Main and Aside tags? Write HTML script using these tags.

Answer

<main> holds the dominant, unique content of the page body (not repeated sidebars, headers or footers). There should be only one visible <main> per page. It helps accessibility and search engines to find the primary content.

<aside> holds content that is indirectly related to the surrounding content, such as a sidebar, related links, advertisements or a pull quote.

<!DOCTYPE html>
<html>
<head><title>Main and Aside</title></head>
<body>
  <header><h1>My Blog</h1></header>

  <main>
    <article>
      <h2>Learning HTML5</h2>
      <p>HTML5 introduced semantic tags such as main, aside and section.</p>
    </article>
  </main>

  <aside>
    <h3>Related Links</h3>
    <ul>
      <li><a href="#">CSS Basics</a></li>
      <li><a href="#">JavaScript Basics</a></li>
    </ul>
  </aside>

  <footer>&copy; 2081</footer>
</body>
</html>

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2081 · 5 marks

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.

Answer

<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function validate() {
  var name = document.getElementById("name").value.trim();
  var pass = document.getElementById("pass").value;
  var email = document.getElementById("email").value;
  var phone = document.getElementById("phone").value;

  // required
  if (name === "") { alert("Name is required"); return false; }

  // length
  if (pass.length < 6 || pass.length > 12) {
    alert("Password must be 6 to 12 characters"); return false;
  }

  // pattern: email
  var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailPattern.test(email)) { alert("Invalid email address"); return false; }

  // pattern: 10 digit phone starting with 98 or 97
  var phonePattern = /^(98|97)\d{8}$/;
  if (!phonePattern.test(phone)) { alert("Phone must be 10 digits starting with 97 or 98"); return false; }

  alert("Form submitted successfully");
  return true;
}
</script>
</head>
<body>
<form onsubmit="return validate()">
  Name: <input type="text" id="name"><br><br>
  Password: <input type="password" id="pass"><br><br>
  Email: <input type="text" id="email"><br><br>
  Phone: <input type="text" id="phone"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

The function checks that the name is not empty (required), that the password length is within limits (length), and that email and phone match regular expressions (pattern). Returning false stops form submission.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2081 · 5 marks

Create a XML document with some elements and write equivalent XSLT to render XML content in HTML.

Answer

XML (students.xml)

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="students.xsl"?>
<students>
  <student>
    <name>Ram Sharma</name>
    <course>BIT</course>
    <marks>78</marks>
  </student>
  <student>
    <name>Sita Thapa</name>
    <course>BIT</course>
    <marks>85</marks>
  </student>
</students>

XSLT (students.xsl)

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <html>
      <body>
        <h2>Student List</h2>
        <table border="1">
          <tr bgcolor="#cccccc">
            <th>Name</th><th>Course</th><th>Marks</th>
          </tr>
          <xsl:for-each select="students/student">
            <tr>
              <td><xsl:value-of select="name"/></td>
              <td><xsl:value-of select="course"/></td>
              <td><xsl:value-of select="marks"/></td>
            </tr>
          </xsl:for-each>
        </table>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

The template matches the root, loops over each student with xsl:for-each, and uses xsl:value-of to output each element as a table cell, so the browser shows the XML as an HTML table.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2081 · 1+4 marks

What is a web page? How static web sites are different from dynamic web sites.

Answer

A web page is a document, usually written in HTML, that is stored on a web server and displayed in a browser. It can contain text, images, links, audio, video and scripts.

Static web site	Dynamic web site
Pages have fixed content written in HTML/CSS	Content is generated at request time using server-side or client-side programs
Same content shown to every visitor	Content can differ by user, time or database data
No database needed	Usually uses a database (MySQL, etc.)
Changing content requires editing the files	Content is updated through forms or an admin panel
Fast and cheap to host, simple to build	Slower and costlier; needs PHP, ASP.NET, Node.js, etc.
Example: a personal profile page	Example: an online shop, Facebook

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2082 · 2+8 marks

What is the use of HTML in web technology? Write HTML script to create a page. The page should contain header and footer tags with some contents. There should be a div with id="BIT_Div". The div should have an image with a hyperlink to www.tu.edu.np. The div should have a paragraph tag with class="class1". The title of the page should be "BIT Exam November". Also display the text BIT, BCA and BSC CSIT using ordered list of type roman.

Answer

Use of HTML: HTML (HyperText Markup Language) is the standard markup language of the web. It defines the structure and content of web pages (headings, paragraphs, links, images, lists, tables, forms) using tags, and browsers render these tags into the page the user sees. CSS and JavaScript add style and behaviour on top of it.

<!DOCTYPE html>
<html>
<head>
  <title>BIT Exam November</title>
  <style>
    .class1 { color: darkblue; }
  </style>
</head>
<body>
  <header>
    <h1>Welcome to BIT</h1>
  </header>

  <div id="BIT_Div">
    <a href="http://www.tu.edu.np">
      <img src="tu.png" alt="TU Logo" width="120">
    </a>
    <p class="class1">This paragraph is inside the BIT_Div division.</p>
  </div>

  <ol type="i">
    <li>BIT</li>
    <li>BCA</li>
    <li>BSC CSIT</li>
  </ol>

  <footer>
    <p>&copy; Tribhuvan University</p>
  </footer>
</body>
</html>

<ol type="i"> produces lower-case roman numbering (i, ii, iii); use type="I" for capital roman numerals.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2082 · 3+7 marks

How can you perform form validation using JavaScript? Create a form with at least five form elements including radio button, check box and select. Write JavaScript for validating the form. Use your own assumption for the validation rules.

Answer

Form validation with JavaScript: The script reads the values of form fields through the DOM (document.getElementById, document.forms), checks them against rules (empty, length, regular expression, selected or checked state) in an event handler such as onsubmit, shows an error message when a rule fails, and returns false to stop submission.

<!DOCTYPE html>
<html>
<head>
<title>Registration</title>
<script>
function validateForm() {
  var f = document.forms["reg"];
  var name = f["name"].value.trim();
  var email = f["email"].value;
  var gender = f["gender"].value;
  var hobbies = f.querySelectorAll("input[name='hobby']:checked").length;
  var country = f["country"].value;

  if (name.length < 3) { alert("Name must be at least 3 characters"); return false; }
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { alert("Enter a valid email"); return false; }
  if (gender === "") { alert("Select a gender"); return false; }
  if (hobbies === 0) { alert("Select at least one hobby"); return false; }
  if (country === "") { alert("Select a country"); return false; }
  alert("Form is valid");
  return true;
}
</script>
</head>
<body>
<form name="reg" onsubmit="return validateForm()">
  Name: <input type="text" name="name"><br><br>
  Email: <input type="text" name="email"><br><br>
  Gender:
  <input type="radio" name="gender" value="M"> Male
  <input type="radio" name="gender" value="F"> Female<br><br>
  Hobbies:
  <input type="checkbox" name="hobby" value="read"> Reading
  <input type="checkbox" name="hobby" value="sport"> Sports
  <input type="checkbox" name="hobby" value="music"> Music<br><br>
  Country:
  <select name="country">
    <option value="">--Select--</option>
    <option value="np">Nepal</option>
    <option value="in">India</option>
  </select><br><br>
  <input type="submit" value="Register">
</form>
</body>
</html>

Assumed rules: name at least 3 characters, valid email pattern, one gender selected, at least one hobby checked, and a country chosen.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2082 · 3+7 marks

How can you make web page designs responsive? Create a HTML page with some elements and texts. Write external CSS for styling the page. Set the font color, font style, background etc. Your CSS should also include the positioning of some elements and set it to float. Also define CSS using class and id selectors.

Answer

Responsive design makes a page adapt to any screen size. It is done by: (1) adding <meta name="viewport" content="width=device-width, initial-scale=1">; (2) using relative units (%, em, rem, vw) and flexible images (max-width: 100%); (3) using flexbox/grid layouts; (4) using CSS media queries to change the layout at breakpoints.

HTML (index.html)

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Styled Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="title">My Page</h1>
  <div class="menu">Menu</div>
  <div class="content">
    <p class="intro">Welcome to my page.</p>
    <p>Some more text goes here.</p>
  </div>
</body>
</html>

External CSS (style.css)

body {
  background-color: #f4f4f4;
  color: #333;
  font-family: Verdana, sans-serif;
  font-style: normal;
}
#title {
  color: crimson;
  font-style: italic;
  text-align: center;
}
.menu {
  float: left;
  width: 25%;
  background: #ddd;
  padding: 10px;
}
.content {
  float: right;
  width: 70%;
  background: white;
  padding: 10px;
}
.intro {
  color: green;
  font-weight: bold;
}
@media (max-width: 600px) {
  .menu, .content { float: none; width: 100%; }
}

#title uses an id selector, .menu, .content and .intro use class selectors, and the two blocks are floated side by side. On narrow screens the media query removes the float and stacks them.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2082 · 5 marks

Write HTML script to create a page that contains a table with two rows and three columns. The table should have a caption "Sample BIT". Also show the use of rowspan and colspan properties.

Answer

<!DOCTYPE html>
<html>
<head><title>Table</title></head>
<body>
  <table border="1" cellpadding="8">
    <caption>Sample BIT</caption>
    <tr>
      <th rowspan="2">Semester</th>
      <th colspan="2">Subjects</th>
    </tr>
    <tr>
      <td>Web Technology</td>
      <td>Artificial Intelligence</td>
    </tr>
  </table>
</body>
</html>

The table has a caption "Sample BIT". It has two rows and three column positions. In the first row, the "Semester" cell uses rowspan="2" to extend down through both rows, and the "Subjects" cell uses colspan="2" to extend across two columns. The second row therefore needs only two cells.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2082 · 5 marks

How slicing is done to convert image design into HTML?

Answer

Slicing is the process of cutting a finished graphic design (PSD/PNG mock-up made in Photoshop, Figma, etc.) into smaller images and assets that can be placed in an HTML/CSS page.

Steps:

Study the design and decide the page structure: header, logo, navigation, banner, content blocks, sidebar, footer.
Identify what must be an image (logo, banner, icons, photos, textured backgrounds) and what can be done with HTML/CSS (plain text, solid or gradient backgrounds, borders, buttons).
Slice using the slice tool or guides: cut each required region and export it, optimised, as JPG (photos), PNG (transparency) or GIF/SVG (icons). Give meaningful file names.
Create the HTML skeleton with div, header, nav, section, footer matching the layout.
Place images: use <img> for content images and CSS background-image for decorative ones; repeat small background slices with background-repeat.
Style with CSS (positioning, float/flexbox, margins, fonts, colours) so the page matches the design pixel by pixel.
Test in different browsers and screen sizes and optimise image sizes for fast loading.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2082 · 5 marks

How can you define variables in JavaScript? Write a program for demonstrating variable definition and declaration.

Answer

In JavaScript variables are defined with the keywords var, let and const.

var: function-scoped, can be redeclared and updated.
let: block-scoped, can be updated but not redeclared in the same scope.
const: block-scoped, must be initialised and cannot be reassigned.

A declaration creates the variable (let a;), and a definition/initialisation assigns a value (a = 10;). JavaScript is dynamically typed, so the type is taken from the value.

<script>
  var name = "Ram";        // declaration with initialisation
  let age;                 // declaration only (value is undefined)
  age = 21;                // assignment later
  const PI = 3.14159;      // constant

  var x = 5, y = 10;       // multiple variables
  let isStudent = true;    // boolean

  document.write("Name: " + name + "<br>");
  document.write("Age: " + age + "<br>");
  document.write("PI: " + PI + "<br>");
  document.write("Sum: " + (x + y) + "<br>");
  document.write("Type of age: " + typeof age);
</script>

Output:

Name: Ram
Age: 21
PI: 3.14159
Sum: 15
Type of age: number

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2082 · 2+3 marks

Create a XML file with simple and complex type elements. Also write equivalent XSD for the XML file.

Answer

XML file (student.xml)

<?xml version="1.0" encoding="UTF-8"?>
<student xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="student.xsd">
  <name>Ram Sharma</name>
  <age>21</age>
  <address>
    <city>Kathmandu</city>
    <district>Kathmandu</district>
  </address>
</student>

name and age are simple type elements (text only); address is a complex type element since it contains child elements.

XSD file (student.xsd)

<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="student">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="name" type="xs:string"/>
        <xs:element name="age" type="xs:integer"/>
        <xs:element name="address">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="city" type="xs:string"/>
              <xs:element name="district" type="xs:string"/>
            </xs:sequence>
          </xs:complexType>
        </xs:element>
      </xs:sequence>
    </xs:complexType>
  </xs:element>
</xs:schema>

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2082 · 2+3 marks

What is the use of XSLT in XML? Write XSLT for some XML document.

Answer

Use of XSLT: XSLT (Extensible Stylesheet Language Transformations) is used to transform an XML document into another format such as HTML, plain text or another XML. It separates data (XML) from presentation, using templates matched with XPath expressions, so the same XML can be displayed in different ways.

XML (books.xml)

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="books.xsl"?>
<library>
  <book><title>Web Technology</title><price>500</price></book>
  <book><title>AI Basics</title><price>650</price></book>
</library>

XSLT (books.xsl)

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <html><body>
      <h2>Books</h2>
      <ul>
        <xsl:for-each select="library/book">
          <li><xsl:value-of select="title"/> - Rs <xsl:value-of select="price"/></li>
        </xsl:for-each>
      </ul>
    </body></html>
  </xsl:template>
</xsl:stylesheet>

The browser shows a list of the books with their prices.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2082 · 5 marks

Write a program to demonstrate jQuery.

Answer

jQuery is a fast, lightweight JavaScript library that simplifies DOM selection, event handling, effects and AJAX with the syntax $(selector).action().

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(document).ready(function () {
      $("#hideBtn").click(function () {
        $("p").hide();
      });
      $("#showBtn").click(function () {
        $("p").show();
      });
      $("#colorBtn").click(function () {
        $("p").css("color", "red").slideUp(500).slideDown(500);
      });
      $("#addBtn").click(function () {
        $("#box").append("<p>New paragraph added</p>");
      });
    });
  </script>
</head>
<body>
  <p>This is a paragraph.</p>
  <div id="box"></div>
  <button id="hideBtn">Hide</button>
  <button id="showBtn">Show</button>
  <button id="colorBtn">Color + Slide</button>
  <button id="addBtn">Add</button>
</body>
</html>

The code runs after the document is ready. Each button click is handled with jQuery to hide or show paragraphs, change CSS with animation, or append new HTML content.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2082 · 5 marks

Explain HTTP request and response objects.

Answer

HTTP is a request-response protocol between a client (browser) and a web server.

HTTP request object: sent by the client. It contains:

Request line: method (GET, POST, PUT, DELETE, HEAD), URL/path and HTTP version, e.g. GET /index.html HTTP/1.1.
Headers: metadata such as Host, User-Agent, Accept, Cookie, Content-Type.
Body (optional): data sent to the server, mainly with POST/PUT (form data, JSON).

HTTP response object: sent back by the server. It contains:

Status line: version, status code and message, e.g. HTTP/1.1 200 OK. Codes: 1xx informational, 2xx success, 3xx redirection, 4xx client error (404 Not Found), 5xx server error (500).
Headers: Content-Type, Content-Length, Set-Cookie, Server, Date.
Body: the requested resource (HTML, image, JSON).

In server-side languages these are exposed as objects (for example request/response in Node.js, $_GET/$_POST and header() in PHP, Request/Response in ASP.NET) to read client input and build the reply.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2082 · 5 marks

Explain the keyboard events used in HTML.

Answer

Keyboard events fire when the user interacts with the keyboard.

Event	Description
`onkeydown`	Fires when a key is pressed down; repeats while the key is held. Works for all keys including Shift, Ctrl and arrows.
`onkeypress`	Fires when a key that produces a character is pressed (deprecated, but still used in teaching).
`onkeyup`	Fires when the key is released.

The event object gives event.key (the key value), event.code (the physical key), event.keyCode (older numeric code) and modifiers such as event.ctrlKey and event.shiftKey.

<input type="text" id="t" onkeydown="down(event)" onkeyup="up()">
<p id="out"></p>
<script>
  function down(e) {
    document.getElementById("out").innerHTML = "Key pressed: " + e.key;
  }
  function up() {
    document.getElementById("out").innerHTML += " (released)";
  }
</script>

Typing in the box displays the key pressed and then a note when it is released.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2083 · 2+8 marks

Write the difference between HTML and HTML5. Write an HTML page titled "TU BIT Exam" with a 3x3 table demonstrating rowspan, an audio element, a video element with controls, a new-tab link to www.tu.edu.np, and a div (id="main_div") holding a paragraph with class "note".

Answer

Difference between HTML and HTML5

HTML (4.01)	HTML5
Complex doctype	Simple `<!DOCTYPE html>`
Audio/video need plugins such as Flash	Native `<audio>` and `<video>` tags
No semantic tags (uses `div`)	Semantic tags: `header`, `nav`, `section`, `article`, `footer`, `main`, `aside`
No canvas or SVG support	`<canvas>` and inline SVG
Limited form input types	New input types (email, date, number, range) and attributes (placeholder, required)
No local storage (cookies only)	`localStorage`, `sessionStorage`, geolocation, web workers

HTML page

<!DOCTYPE html>
<html>
<head>
  <title>TU BIT Exam</title>
</head>
<body>
  <table border="1">
    <tr>
      <td rowspan="2">A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>D</td>
      <td>E</td>
    </tr>
    <tr>
      <td>F</td>
      <td>G</td>
      <td>H</td>
    </tr>
  </table>

  <audio controls>
    <source src="song.mp3" type="audio/mpeg">
    Your browser does not support audio.
  </audio>

  <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support video.
  </video>

  <p><a href="http://www.tu.edu.np" target="_blank">Visit TU</a></p>

  <div id="main_div">
    <p class="note">This is a note.</p>
  </div>
</body>
</html>

The table has 3 rows and 3 columns; the cell "A" spans two rows through rowspan="2", so the second row contains only two cells. target="_blank" opens the link in a new tab.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2083 · 3+7 marks

Explain normal flow box layout in CSS and the display property with common values. Create an HTML page with a heading, image, list, and paragraph, styled by external CSS (font, text color, background, border, list style) using id and class selectors.

Answer

Normal flow box layout: In CSS every element generates a rectangular box (content, padding, border, margin). In normal flow, elements are laid out in the order they appear in the HTML. Block-level boxes (div, p, h1) start on a new line and stack vertically, taking the full available width. Inline boxes (span, a, img) sit side by side in a line and only take the width of their content. Positioning, float or flex take elements out of this default flow.

The display property sets the box type:

block: starts on a new line, full width, width/height can be set.
inline: stays in the line, width/height ignored.
inline-block: stays in the line but accepts width/height.
none: element is removed and takes no space (visibility:hidden keeps the space).
flex / grid: flexible and grid layouts.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Styled</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="heading">My Favourite Places</h1>
  <img src="pokhara.jpg" alt="Pokhara" width="250">
  <ul class="places">
    <li>Pokhara</li>
    <li>Lumbini</li>
    <li>Chitwan</li>
  </ul>
  <p class="text">Nepal has many beautiful places to visit.</p>
</body>
</html>

style.css

body { background-color: #f0f8ff; font-family: Arial, sans-serif; }
#heading { color: navy; text-align: center; border-bottom: 2px solid navy; }
img { border: 3px solid gray; }
.places { list-style-type: square; color: darkgreen; }
.text {
  color: #333;
  background-color: #ffffe0;
  border: 1px dashed orange;
  padding: 10px;
}

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2083 · 3+7 marks

What is AJAX and how does it work? Write a JavaScript program using a constructor to create objects, store them in an array, show them in an HTML table, and handle errors with try...catch.

Answer

AJAX (Asynchronous JavaScript and XML) lets a web page exchange data with a server in the background without reloading the page.

How it works:

An event (click, load) occurs on the page.
JavaScript creates an XMLHttpRequest (or uses fetch) and sends a request to the server.
The server processes it and returns data (text, JSON, XML).
A callback function receives the response and updates the DOM, so only part of the page changes.

Program

<!DOCTYPE html>
<html>
<head><title>Students</title></head>
<body>
  <table border="1" id="tbl">
    <thead><tr><th>Name</th><th>Age</th><th>Course</th></tr></thead>
    <tbody></tbody>
  </table>

  <script>
    function Student(name, age, course) {   // constructor
      this.name = name;
      this.age = age;
      this.course = course;
    }

    var students = [];                      // array of objects
    try {
      students.push(new Student("Ram", 21, "BIT"));
      students.push(new Student("Sita", 20, "BCA"));
      students.push(new Student("Hari", 22, "BSc CSIT"));
      students.push(new Student("Gita", -5));   // invalid object

      var body = document.querySelector("#tbl tbody");
      students.forEach(function (s) {
        if (s.age < 0 || s.course === undefined) {
          throw new Error("Invalid student data for " + s.name);
        }
        var row = body.insertRow();
        row.insertCell().textContent = s.name;
        row.insertCell().textContent = s.age;
        row.insertCell().textContent = s.course;
      });
    } catch (e) {
      alert("Error: " + e.message);
    } finally {
      console.log("Processing finished");
    }
  </script>
</body>
</html>

The first three students are shown in the table; the invalid fourth object throws an error, which catch handles by showing an alert instead of breaking the page.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2083 · 2+3 marks

Define a web server. Explain single-tier, two-tier, and multi-tier client-server architectures.

Answer

Web server: A web server is software (and the computer running it) that stores web resources and serves them to clients over HTTP/HTTPS in response to requests. It can also run server-side programs and talk to databases. Examples: Apache, Nginx, IIS.

Client-server architectures

Single-tier: Presentation, application logic and data are all in one program on one machine (for example a standalone desktop application). It is simple but is not scalable and has no sharing of data.
Two-tier: The client (user interface and often business logic) talks directly to a database server (for example a desktop app connected to a DBMS). It is easy to build but the client is heavy, security is weaker and scaling to many users is hard.
Multi-tier (n-tier, usually three-tier): Separate tiers for presentation (browser), application/business logic (web/application server) and data (database server). Each tier can be developed, scaled and secured independently, so it is flexible, secure and scalable. Most web applications use this model.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2083 · 2+3 marks

Explain HTML frames. Write an HTML script that divides a page into three frames.

Answer

HTML frames divide the browser window into multiple independent sections, each of which loads a separate HTML document. The <frameset> tag defines the layout using rows or cols, and <frame> defines each section. <frameset> is obsolete in HTML5, where <iframe> is used to embed a page inside another page.

Three frames

<!DOCTYPE html>
<html>
<head><title>Frames</title></head>
<frameset rows="20%,80%">
  <frame src="header.html" name="top">
  <frameset cols="25%,75%">
    <frame src="menu.html" name="left">
    <frame src="content.html" name="main">
  </frameset>
</frameset>
</html>

The window is split into a top frame (header) taking 20% of the height; the remaining 80% is divided into a left menu frame (25% width) and a main content frame (75% width). Links in menu.html can use target="main" to open pages in the main frame.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2083 · 5 marks

Explain form element events and keyboard events in HTML with examples.

Answer

Form element events occur when the user interacts with form controls:

Event	Occurs when
`onfocus`	an element receives focus
`onblur`	an element loses focus
`onchange`	value of input/select/checkbox is changed and committed
`oninput`	value changes as the user types
`onselect`	text is selected in a field
`onsubmit`	the form is submitted
`onreset`	the form is reset

Keyboard events: onkeydown (key pressed), onkeypress (character key pressed), onkeyup (key released).

Example

<form onsubmit="return confirm('Submit the form?')" onreset="alert('Form cleared')">
  Name: <input type="text" id="n"
         onfocus="this.style.background='yellow'"
         onblur="this.style.background='white'"
         onkeyup="document.getElementById('show').innerHTML = this.value">
  <br>
  City:
  <select onchange="alert('You chose ' + this.value)">
    <option>Kathmandu</option>
    <option>Pokhara</option>
  </select>
  <br>
  <input type="submit">
  <input type="reset">
</form>
<p id="show"></p>

Clicking in the name box turns it yellow (onfocus), leaving it restores white (onblur), typing mirrors the text in the paragraph (onkeyup), and selecting a city triggers onchange.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2083 · 2+3 marks

Explain CSS media queries and how they support responsive design, with an example.

Answer

Media queries are a CSS feature (@media) that applies styles only when certain conditions about the device are true, such as screen width, height, orientation or resolution.

Support for responsive design: the same HTML page can change its layout (columns to single column, font sizes, hidden menus) depending on the device, so it looks good on mobile, tablet and desktop without separate sites. Breakpoints are chosen where the layout starts to break.

Example

.col { float: left; width: 33.33%; padding: 10px; box-sizing: border-box; }

@media (max-width: 768px) {
  .col { width: 50%; }
}
@media (max-width: 480px) {
  .col { width: 100%; float: none; }
  body { font-size: 14px; }
}

On wide screens three columns appear side by side, on tablets (up to 768px) two, and on phones (up to 480px) they stack in one column. It should be used with <meta name="viewport" content="width=device-width, initial-scale=1">.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2083 · 2+3 marks

Differentiate padding from margin. Write CSS to style a table's border, background, and text alignment.

Answer

Padding	Margin
Space between the content and its border (inside the border)	Space outside the border, between this element and others
Takes the element's background colour	Always transparent
Increases the size of the visible box	Pushes neighbouring elements away

CSS for a table

table {
  border: 2px solid #333;
  border-collapse: collapse;
  background-color: #f9f9f9;
  width: 60%;
}
th, td {
  border: 1px solid #666;
  padding: 8px;
  text-align: center;
}
th {
  background-color: #4caf50;
  color: white;
}
td:first-child {
  text-align: left;
}
tr:nth-child(even) {
  background-color: #e8e8e8;
}

The table gets an outer border, a background, collapsed cell borders and centred text; headers are green and the first column is left-aligned.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2083 · 2+3 marks

Explain JavaScript flow control and looping statements. Write a program to display all primes from 1 to 50.

Answer

Flow control (conditional) statements decide which code runs: if, if...else, else if ladder, switch, and the ternary operator cond ? a : b.

Looping statements repeat code: for, while, do...while, for...in (object properties) and for...of (iterable values). break exits a loop and continue skips to the next iteration.

Program: primes from 1 to 50

<script>
  var result = [];
  for (var n = 2; n <= 50; n++) {
    var isPrime = true;
    for (var i = 2; i * i <= n; i++) {
      if (n % i === 0) {
        isPrime = false;
        break;
      }
    }
    if (isPrime) result.push(n);
  }
  document.write("Primes: " + result.join(", "));
</script>

Output: 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2083 · 2+3 marks

Explain JavaScript built-in objects. Write a program using String and Date to display the current date as DD-MM-YYYY.

Answer

Built-in objects are objects provided by the language itself and available without definition:

Object, Array (push, pop, slice, sort, map)
String (length, charAt, indexOf, substring, toUpperCase, split, padStart)
Number and Math (round, floor, random, max, sqrt, PI)
Date (getDate, getMonth, getFullYear, getTime)
Boolean, RegExp, JSON, Function, Error

Program: current date as DD-MM-YYYY

<script>
  var d = new Date();
  var day = String(d.getDate()).padStart(2, "0");
  var month = String(d.getMonth() + 1).padStart(2, "0");  // months are 0-11
  var year = d.getFullYear();
  document.write("Today: " + day + "-" + month + "-" + year);
</script>

For example, on 5 March 2026 it prints 05-03-2026. String() converts the numbers to strings and padStart(2, "0") adds the leading zero.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2083 · 2+3 marks

Explain XML namespaces and why they are needed, with an example.

Answer

XML namespace: A namespace is a collection of element and attribute names identified by a unique URI. It is declared with the xmlns attribute, optionally with a prefix: xmlns:prefix="URI". The URI is only an identifier and need not point to a real page.

Why needed: XML lets authors invent their own tag names, so two documents may use the same name for different meanings (for example <table> for HTML table and <table> for furniture). When such documents are combined, a name conflict occurs. Namespaces remove ambiguity and allow vocabularies to be mixed safely.

Example

<root xmlns:h="http://www.w3.org/TR/html4/"
      xmlns:f="https://www.example.com/furniture">
  <h:table>
    <h:tr><h:td>Apples</h:td></h:tr>
  </h:table>
  <f:table>
    <f:name>African Coffee Table</f:name>
    <f:width>80</f:width>
  </f:table>
</root>

The prefixes h: and f: tell the processor which table is which.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

2083 · 2+3 marks

Differentiate DTD from XSD. Write an XSD with simple type elements and attributes for a given XML document.

Answer

DTD	XSD
Not written in XML syntax	Written in XML itself
Few data types (mainly text, `#PCDATA`)	Rich data types (string, integer, date, boolean, custom)
No namespace support	Supports namespaces
Limited control over occurrence	Precise control with `minOccurs` and `maxOccurs`
Cannot be extended or parsed with XML tools	Extensible, can be processed by XML tools

XML

<book isbn="12345">
  <title>Web Technology</title>
  <price>500</price>
</book>

XSD

<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="book">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="title" type="xs:string"/>
        <xs:element name="price" type="xs:decimal"/>
      </xs:sequence>
      <xs:attribute name="isbn" type="xs:string" use="required"/>
    </xs:complexType>
  </xs:element>
</xs:schema>

title and price are simple type elements and isbn is a required attribute.

Answer checked by Claude Sonnet · Oct 21, 2026

Test yourself · 2 MCQs

Loading…

Questions from TU BIT 2079 Fourth Semester Web Technology I (TU IOST semester board exam, 2079 (BS), via StudyNp), TU BIT 2080 Fourth Semester Web Technology I (TU IOST semester board exam, 2080 (BS), via StudyNp), TU BIT 2080.2 Fourth Semester Web Technology I (TU IOST semester board exam, 2080.2 (BS), via StudyNp), TU BIT 2081 Fourth Semester Web Technology I (TU IOST semester board exam, 2081 (BS), via StudyNp), TU BIT 2082 Fourth Semester Web Technology I (TU IOST semester board exam, 2082 (BS), via StudyNp), TU BIT 2083 Fourth Semester Web Technology I (TU IOST semester board exam, 2083 (BS), via StudyNp), TU BIT 2079 Fourth Semester Artificial Intelligence (TU IOST semester board exam, 2079 (BS), via StudyNp), TU BIT 2080 Fourth Semester Artificial Intelligence (TU IOST semester board exam, 2080 (BS), via StudyNp), TU BIT 2080.2 Fourth Semester Artificial Intelligence (TU IOST semester board exam, 2080.2 (BS), via StudyNp), TU BIT 2082 Fourth Semester Artificial Intelligence (TU IOST semester board exam, 2082 (BS), via StudyNp), TU BIT 2083 Fourth Semester Artificial Intelligence (TU IOST semester board exam, 2083 (BS), via StudyNp), TU BIT 2079 Fourth Semester Systems Analysis and Design (TU IOST semester board exam, 2079 (BS), via StudyNp), TU BIT 2080 Fourth Semester Systems Analysis and Design (TU IOST semester board exam, 2080 (BS), via StudyNp), TU BIT 2080.2 Fourth Semester Systems Analysis and Design (TU IOST semester board exam, 2080.2 (BS), via StudyNp), TU BIT 2081 Fourth Semester Systems Analysis and Design (TU IOST semester board exam, 2081 (BS), via StudyNp), TU BIT 2082 Fourth Semester Systems Analysis and Design (TU IOST semester board exam, 2082 (BS), via StudyNp), TU BIT 2083 Fourth Semester Systems Analysis and Design (TU IOST semester board exam, 2083 (BS), via StudyNp), TU BIT 2079 Fourth Semester Network and Data Communications (TU IOST semester board exam, 2079 (BS), via StudyNp), TU BIT 2080 Fourth Semester Network and Data Communications (TU IOST semester board exam, 2080 (BS), via StudyNp), TU BIT 2080.2 Fourth Semester Network and Data Communications (TU IOST semester board exam, 2080.2 (BS), via StudyNp), TU BIT 2081 Fourth Semester Network and Data Communications (TU IOST semester board exam, 2081 (BS), via StudyNp), TU BIT 2082 Fourth Semester Network and Data Communications (TU IOST semester board exam, 2082 (BS), via StudyNp), TU BIT 2083 Fourth Semester Network and Data Communications (TU IOST semester board exam, 2083 (BS), via StudyNp), TU BIT 2079 Fourth Semester Operations Research (TU IOST semester board exam, 2079 (BS), via StudyNp), TU BIT 2080 Fourth Semester Operations Research (TU IOST semester board exam, 2080 (BS), via StudyNp), TU BIT 2080.2 Fourth Semester Operations Research (TU IOST semester board exam, 2080.2 (BS), via StudyNp), TU BIT 2081 Fourth Semester Operations Research (TU IOST semester board exam, 2081 (BS), via StudyNp), TU BIT 2082 Fourth Semester Operations Research (TU IOST semester board exam, 2082 (BS), via StudyNp) and TU BIT 2083 Fourth Semester Operations Research (TU IOST semester board exam, 2083 (BS), via StudyNp). Answers are written for this site; check them against your class notes.

Past questions and answers

1.Differentiate Web 1.0 from Web 2.0.

3.What is CSS? How is it inserted into an HTML page? Illustrate with examples.

4.What does "extensible" mean in XML? State the XML naming rules. Create an XML file with an empty element, an element with content, an element with child elements, and an element with an attribute. Then write the equivalent DTD.

5.Use an example to show how XML namespaces prevent name conflicts.

6.Create an XML file with Username and Password elements. Write its XSD, restricting Password to 4-8 characters.

7.Write CSS illustrating the Normal Box Layout and the Basic Box Layout.

8.Write an external CSS file and link it to an HTML page with various elements. State your assumptions about the elements and their styles.

9.How are JavaScript variables defined and declared? Write a function that includes a variable holding the number 5 and one holding the character '5', then prints both.

10.What is form validation? Write a JavaScript function that validates an email field, requires a password of at least 6 characters, and requires at least one of three hobby checkboxes to be checked.

11.What is the canvas element? Write HTML that creates a canvas with id cv1 and draws a circle inside it.

12.What is client-server architecture? Describe its different types.

13.What is a table in HTML? Create a page with a DIV named "divtb" containing a table matching the layout in the given figure. The table border must be dotted.

14.Define the HTML head and body tags, then write HTML that produces the output shown in the given figure, with the page title "BIT Web Tech".

15.Explain how inline, internal, and external CSS are used, with examples. Include at least one class selector and one id selector.

16.Create a signup form with username, password, email, country, gender, and hobbies fields. Apply validation rules, then write JavaScript to validate the form.

17.Describe HTTP request and response.

18.What is the XMLHttpRequest object? Write an AJAX script that uses it.

19.What are HTML form events? Write HTML that prints text on the onchange and onfocus events.

20.Write internal CSS that demonstrates static, relative, and fixed positioning.

21.Use the figure tag to display a photo from a given path, with alt text "BIT" and caption "This is the BIT Campus".

22.What is XQuery? For the XML shown in the given figure, write a query that returns movie titles with budget greater than 500, and give the result.

23.What is XML used for, and why is it called extensible? Give an example.

24.How does a DTD differ from an XSD?

25.How is exception handling done in JavaScript? Write a program that handles division by zero.

26.Define client-side validation and explain why form validation is needed. Write a JavaScript program validating a form with a text field, password field, radio buttons, checkbox, and dropdown, each as required. Add password validation constraints.

27.Explain the CSS box model, defining its areas and edges. Write CSS demonstrating the box model.

28.Explain the use of XML. For the XML shown in the given figure, write an XSD for validation (Name and Address as strings, Number as integer, Accessible as boolean, child elements in the given order) and an XSLT transforming it to HTML.

29.Create an HTML page with a meta tag: title "This Meta BIT", description "Hello BIT", keywords "BIT", "IOST", "TU", UTF-8 encoding. Put "Hello BIT" in an H1 and "Web Tech" in an H2 in the body.

30.Write HTML demonstrating the main and article tags.

31.Write HTML to display, inside a div in the body: (a) the ampersand sign (&); (b) three equations/expressions, including 3x²+2x₁y<4 and 45 < > 30.

32.How does a class selector differ from an ID selector in CSS? Support with examples.

33.Create a JavaScript object Student with Name "Ram", Age 20, DOB 2003/02/03, then display its attributes.

34.Write a JavaScript program that takes the user's name via prompt and shows it in an alert.

35.Discuss the use of XQuery and XPath in XML.

36.What is an XML tree? Differentiate static and dynamic websites.

37.Describe HTML events. Write HTML script to demonstrate Onkeypress and Onclick events.

39.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.

40.Describe about the client server architecture.

41.Write HTML script to generate following output. (figure)

42.Write HTML and equivalent CSS for some HTML elements to demonstrate relative and float positioning.

44.What is AJAX? Write a program to demonstrate the AJAX effect of your choice.

45.What are the usages of Main and Aside tags? Write HTML script using these tags.

46.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.

47.Create a XML document with some elements and write equivalent XSLT to render XML content in HTML.

48.What is a web page? How static web sites are different from dynamic web sites.

50.How can you perform form validation using JavaScript? Create a form with at least five form elements including radio button, check box and select. Write JavaScript for validating the form. Use your own assumption for the validation rules.

52.Write HTML script to create a page that contains a table with two rows and three columns. The table should have a caption "Sample BIT". Also show the use of rowspan and colspan properties.

53.How slicing is done to convert image design into HTML?

54.How can you define variables in JavaScript? Write a program for demonstrating variable definition and declaration.

55.Create a XML file with simple and complex type elements. Also write equivalent XSD for the XML file.

56.What is the use of XSLT in XML? Write XSLT for some XML document.

57.Write a program to demonstrate jQuery.

58.Explain HTTP request and response objects.

59.Explain the keyboard events used in HTML.

60.Write the difference between HTML and HTML5. Write an HTML page titled "TU BIT Exam" with a 3x3 table demonstrating rowspan, an audio element, a video element with controls, a new-tab link to www.tu.edu.np, and a div (id="main_div") holding a paragraph with class "note".

61.Explain normal flow box layout in CSS and the display property with common values. Create an HTML page with a heading, image, list, and paragraph, styled by external CSS (font, text color, background, border, list style) using id and class selectors.

62.What is AJAX and how does it work? Write a JavaScript program using a constructor to create objects, store them in an array, show them in an HTML table, and handle errors with try...catch.

63.Define a web server. Explain single-tier, two-tier, and multi-tier client-server architectures.

64.Explain HTML frames. Write an HTML script that divides a page into three frames.

65.Explain form element events and keyboard events in HTML with examples.

66.Explain CSS media queries and how they support responsive design, with an example.

67.Differentiate padding from margin. Write CSS to style a table's border, background, and text alignment.

68.Explain JavaScript flow control and looping statements. Write a program to display all primes from 1 to 50.

69.Explain JavaScript built-in objects. Write a program using String and Date to display the current date as DD-MM-YYYY.

70.Explain XML namespaces and why they are needed, with an example.

71.Differentiate DTD from XSD. Write an XSD with simple type elements and attributes for a given XML document.

Differentiate Web 1.0 from Web 2.0.

What is CSS? How is it inserted into an HTML page? Illustrate with examples.

What does "extensible" mean in XML? State the XML naming rules. Create an XML file with an empty element, an element with content, an element with child elements, and an element with an attribute. Then write the equivalent DTD.

Use an example to show how XML namespaces prevent name conflicts.

Create an XML file with Username and Password elements. Write its XSD, restricting Password to 4-8 characters.

Write CSS illustrating the Normal Box Layout and the Basic Box Layout.

Write an external CSS file and link it to an HTML page with various elements. State your assumptions about the elements and their styles.

How are JavaScript variables defined and declared? Write a function that includes a variable holding the number 5 and one holding the character '5', then prints both.

What is form validation? Write a JavaScript function that validates an email field, requires a password of at least 6 characters, and requires at least one of three hobby checkboxes to be checked.

What is the canvas element? Write HTML that creates a canvas with id cv1 and draws a circle inside it.

What is client-server architecture? Describe its different types.

What is a table in HTML? Create a page with a DIV named "divtb" containing a table matching the layout in the given figure. The table border must be dotted.

Define the HTML head and body tags, then write HTML that produces the output shown in the given figure, with the page title "BIT Web Tech".

Explain how inline, internal, and external CSS are used, with examples. Include at least one class selector and one id selector.

Create a signup form with username, password, email, country, gender, and hobbies fields. Apply validation rules, then write JavaScript to validate the form.

Describe HTTP request and response.

What is the XMLHttpRequest object? Write an AJAX script that uses it.

What are HTML form events? Write HTML that prints text on the onchange and onfocus events.

Write internal CSS that demonstrates static, relative, and fixed positioning.

Use the figure tag to display a photo from a given path, with alt text "BIT" and caption "This is the BIT Campus".

What is XQuery? For the XML shown in the given figure, write a query that returns movie titles with budget greater than 500, and give the result.

What is XML used for, and why is it called extensible? Give an example.

How does a DTD differ from an XSD?

How is exception handling done in JavaScript? Write a program that handles division by zero.

Define client-side validation and explain why form validation is needed. Write a JavaScript program validating a form with a text field, password field, radio buttons, checkbox, and dropdown, each as required. Add password validation constraints.

Explain the CSS box model, defining its areas and edges. Write CSS demonstrating the box model.

Explain the use of XML. For the XML shown in the given figure, write an XSD for validation (Name and Address as strings, Number as integer, Accessible as boolean, child elements in the given order) and an XSLT transforming it to HTML.

Create an HTML page with a meta tag: title "This Meta BIT", description "Hello BIT", keywords "BIT", "IOST", "TU", UTF-8 encoding. Put "Hello BIT" in an H1 and "Web Tech" in an H2 in the body.

Write HTML demonstrating the main and article tags.

Write HTML to display, inside a div in the body: (a) the ampersand sign (&); (b) three equations/expressions, including 3x²+2x₁y<4 and 45 < > 30.

How does a class selector differ from an ID selector in CSS? Support with examples.

Create a JavaScript object Student with Name "Ram", Age 20, DOB 2003/02/03, then display its attributes.

Write a JavaScript program that takes the user's name via prompt and shows it in an alert.

Discuss the use of XQuery and XPath in XML.

What is an XML tree? Differentiate static and dynamic websites.

Describe HTML events. Write HTML script to demonstrate Onkeypress and Onclick events.

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.

Describe about the client server architecture.

Write HTML script to generate following output. (figure)

Write HTML and equivalent CSS for some HTML elements to demonstrate relative and float positioning.

What is AJAX? Write a program to demonstrate the AJAX effect of your choice.

What are the usages of Main and Aside tags? Write HTML script using these tags.

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.

Create a XML document with some elements and write equivalent XSLT to render XML content in HTML.

What is a web page? How static web sites are different from dynamic web sites.

How can you perform form validation using JavaScript? Create a form with at least five form elements including radio button, check box and select. Write JavaScript for validating the form. Use your own assumption for the validation rules.

Write HTML script to create a page that contains a table with two rows and three columns. The table should have a caption "Sample BIT". Also show the use of rowspan and colspan properties.

How slicing is done to convert image design into HTML?

How can you define variables in JavaScript? Write a program for demonstrating variable definition and declaration.

Create a XML file with simple and complex type elements. Also write equivalent XSD for the XML file.

What is the use of XSLT in XML? Write XSLT for some XML document.

Write a program to demonstrate jQuery.

Explain HTTP request and response objects.

Explain the keyboard events used in HTML.

Write the difference between HTML and HTML5. Write an HTML page titled "TU BIT Exam" with a 3x3 table demonstrating rowspan, an audio element, a video element with controls, a new-tab link to www.tu.edu.np, and a div (id="main_div") holding a paragraph with class "note".

Explain normal flow box layout in CSS and the display property with common values. Create an HTML page with a heading, image, list, and paragraph, styled by external CSS (font, text color, background, border, list style) using id and class selectors.

What is AJAX and how does it work? Write a JavaScript program using a constructor to create objects, store them in an array, show them in an HTML table, and handle errors with try...catch.

Define a web server. Explain single-tier, two-tier, and multi-tier client-server architectures.

Explain HTML frames. Write an HTML script that divides a page into three frames.

Explain form element events and keyboard events in HTML with examples.

Explain CSS media queries and how they support responsive design, with an example.

Differentiate padding from margin. Write CSS to style a table's border, background, and text alignment.

Explain JavaScript flow control and looping statements. Write a program to display all primes from 1 to 50.

Explain JavaScript built-in objects. Write a program using String and Date to display the current date as DD-MM-YYYY.

Explain XML namespaces and why they are needed, with an example.

Differentiate DTD from XSD. Write an XSD with simple type elements and attributes for a given XML document.