BSc CSIT (TU) Science Web Technology (BSc CSIT, CSC318) Question Paper 2077 Nepal

Q: Where can I find the BSc CSIT (TU) Web Technology (BSc CSIT, CSC318) question paper 2077?

The full BSc CSIT (TU) Web Technology (BSc CSIT, CSC318) 2077 (regular) question paper is available free on Kekkei. You can read every question online and attempt the paper under timed exam conditions.

Q: Does the Web Technology (BSc CSIT, CSC318) 2077 paper come with solutions?

Yes. Every question on this Web Technology (BSc CSIT, CSC318) past paper includes a step-by-step solution, plus instant AI feedback when you attempt it on Kekkei.

Q: How many marks is the BSc CSIT (TU) Web Technology (BSc CSIT, CSC318) 2077 paper?

The BSc CSIT (TU) Web Technology (BSc CSIT, CSC318) 2077 paper carries 60 full marks and is meant to be completed in 180 minutes, across 12 questions.

Q: Is practising this Web Technology (BSc CSIT, CSC318) past paper free?

Yes — reading and attempting this Web Technology (BSc CSIT, CSC318) past paper on Kekkei is completely free.

Question

1long10 marks

Explain client-side form validation using JavaScript. Write an HTML form with JavaScript to validate a username, password and a checkbox before submission.

javascriptform-validation

Answer 1

Client-Side Form Validation using JavaScript

Client-side validation is the process of checking user input in the browser (using JavaScript) before the form data is sent to the server. It gives the user instant feedback, reduces unnecessary server round-trips, and lessens server load. (Note: client-side validation can be bypassed, so the server must always re-validate.)

Common things validated: required fields, length, format (email, password strength), matching fields, and whether a checkbox is ticked.

How it works: A validate() function is bound to the form's onsubmit event. If the data is invalid, the function shows an error message and returns false, which cancels submission.

HTML Form with JavaScript Validation

<!DOCTYPE html>
<html>
<head>
  <title>Registration</title>
  <script>
    function validateForm() {
      var user = document.forms["regForm"]["username"].value;
      var pass = document.forms["regForm"]["password"].value;
      var agree = document.forms["regForm"]["terms"].checked;

      // 1. Username: required, at least 4 characters
      if (user.trim() === "") {
        alert("Username is required");
        return false;
      }
      if (user.length < 4) {
        alert("Username must be at least 4 characters");
        return false;
      }

      // 2. Password: required, at least 6 characters
      if (pass === "") {
        alert("Password is required");
        return false;
      }
      if (pass.length < 6) {
        alert("Password must be at least 6 characters");
        return false;
      }

      // 3. Checkbox must be ticked
      if (!agree) {
        alert("You must accept the terms and conditions");
        return false;
      }

      return true; // all valid -> allow submit
    }
  </script>
</head>
<body>
  <form name="regForm" action="register.php" method="post"
        onsubmit="return validateForm()">
    Username: <input type="text" name="username"><br>
    Password: <input type="password" name="password"><br>
    <input type="checkbox" name="terms"> I accept the terms<br>
    <input type="submit" value="Register">
  </form>
</body>
</html>

Explanation: When Register is clicked, validateForm() runs. It checks that the username is non-empty and ≥4 chars, the password is ≥6 chars, and the checkbox (terms) is checked. Any failure shows an alert and returns false so the form is not submitted; only when all checks pass does it return true and the data is posted to register.php.

Answer 2

Structure of an HTML5 Document

An HTML5 document has a fixed skeleton:

<!DOCTYPE html>            <!-- declares HTML5 -->
<html lang="en">
<head>
  <meta charset="UTF-8">  <!-- character encoding -->
  <title>Page Title</title>
  <!-- CSS, meta tags go here -->
</head>
<body>
  <header>...</header>
  <nav>...</nav>
  <main>...</main>
  <footer>...</footer>
</body>
</html>

<!DOCTYPE html> — tells the browser to use HTML5 standards mode.
<html> — root element.
<head> — metadata: title, charset, links to CSS/scripts (not displayed).
<body> — visible page content. HTML5 adds semantic tags like <header>, <nav>, <section>, <article>, <main>, <footer>.

Ways of Applying CSS

1. Inline CSS — using the style attribute on a single element. Highest specificity but not reusable.

<p style="color:red; font-size:18px;">Hello</p>

2. Internal (embedded) CSS — inside a <style> block in the <head>. Applies to one page.

<head>
  <style>
    p { color: blue; }
  </style>
</head>

3. External CSS — rules in a separate .css file linked with <link>. Best for multi-page sites (reusable, cacheable, separates content from presentation).

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

/* styles.css */
p { color: green; }

CSS Box Model

Every element is rendered as a rectangular box made of four layers (from inside out):

Layer	Meaning
Content	The actual text/image, sized by `width`/`height`.
Padding	Transparent space between content and border.
Border	A line surrounding the padding.
Margin	Transparent space outside the border, separating the box from neighbours.

Described as nested rectangles: the innermost is content, then padding, then border, then margin around the outside.

div {
  width: 200px;     /* content */
  padding: 10px;    /* inside the border */
  border: 2px solid black;
  margin: 15px;     /* outside the border */
}

Total width (default content-box) = width + left/right padding + left/right border + left/right margin. With box-sizing: border-box, padding and border are included inside the declared width.

Answer 3

HTTP Protocol

HTTP (HyperText Transfer Protocol) is the application-layer protocol used by the World Wide Web for communication between a client (browser) and a server. It is:

Request/response based — the client sends a request, the server returns a response.
Stateless — each request is independent; the server keeps no memory of previous requests (state is managed using cookies/sessions).
Text-based and typically runs over TCP port 80 (HTTPS uses TLS over port 443).

Structure of an HTTP Request

GET /index.html HTTP/1.1          <- Request line: METHOD URI VERSION
Host: www.example.com             <- Headers
User-Agent: Mozilla/5.0
Accept: text/html
                                  <- blank line
<optional request body>           <- Body (for POST/PUT)

Request line — method, requested resource (URI), HTTP version.
Headers — key:value metadata (Host, User-Agent, Content-Type, etc.).
Blank line — separates headers from body.
Body — data sent to the server (used by POST/PUT).

Structure of an HTTP Response

HTTP/1.1 200 OK                   <- Status line: VERSION CODE PHRASE
Content-Type: text/html           <- Headers
Content-Length: 138
                                  <- blank line
<html>...</html>                  <- Body (the resource)

Status line — HTTP version, status code, reason phrase.
Headers — metadata about the response.
Blank line.
Body — the requested content (HTML, JSON, image, etc.).

Common HTTP Methods

Method	Purpose
GET	Retrieve a resource (data in URL, no body).
POST	Submit data to the server (data in body).
PUT	Create/replace a resource.
DELETE	Remove a resource.
HEAD	Like GET but returns headers only.

Common Status Codes

Code	Meaning
200 OK	Request succeeded.
301 Moved Permanently	Resource moved.
302 Found	Temporary redirect.
400 Bad Request	Malformed request.
401 Unauthorized	Authentication required.
403 Forbidden	Access denied.
404 Not Found	Resource does not exist.
500 Internal Server Error	Server-side failure.

Status codes are grouped by their first digit: 1xx informational, 2xx success, 3xx redirection, 4xx client error, 5xx server error.

Answer 4

Document Object Model (DOM)

The DOM is a programming interface (API) that represents an HTML/XML document as a tree of objects (nodes). Each element, attribute, and piece of text becomes a node, with the document object as the root. The DOM lets scripts read and dynamically change the content, structure, and style of a page.

Manipulating the DOM with JavaScript

JavaScript accesses the tree through the global document object and can:

Select elements: getElementById(), getElementsByClassName(), querySelector(), querySelectorAll().
Change content/attributes: element.innerHTML, textContent, setAttribute(), element.value.
Change style: element.style.color = "red", classList.add()/remove().
Create / add / remove nodes: createElement(), appendChild(), removeChild().
Handle events: addEventListener("click", fn).

Example:

<p id="demo">Old text</p>
<button onclick="change()">Click</button>
<script>
  function change() {
    var p = document.getElementById("demo");
    p.innerHTML = "New text";   // change content
    p.style.color = "blue";      // change style
  }
</script>

Clicking the button selects the <p> and updates its text and colour without reloading the page.

Answer 5

XSLT

XSLT (eXtensible Stylesheet Language Transformations) is a language used to transform an XML document into another format — such as HTML, plain text, or another XML structure. It is part of XSL and uses XPath to select parts of the source XML, applying template rules that match nodes and define the output.

The transformation is performed by an XSLT processor, which reads the source XML and the XSLT stylesheet and produces the result tree.

Example

Source XML (books.xml):

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="books.xsl"?>
<library>
  <book><title>Web Tech</title><price>500</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>Book List</h2>
      <table border="1">
        <tr><th>Title</th><th>Price</th></tr>
        <xsl:for-each select="library/book">
          <tr>
            <td><xsl:value-of select="title"/></td>
            <td><xsl:value-of select="price"/></td>
          </tr>
        </xsl:for-each>
      </table>
    </body></html>
  </xsl:template>
</xsl:stylesheet>

Result: The processor matches the root template, loops over each <book> with xsl:for-each, and outputs an HTML table showing Web Tech / 500. Thus XSLT converts data-only XML into a presentable HTML page.

Answer 6

Arrays in PHP

A PHP array is an ordered map that stores multiple values in a single variable, each accessed by a key. Arrays are created with array() or []. PHP supports three types:

1. Indexed Array

Keys are automatic numeric indexes starting at 0.

$fruits = array("Apple", "Banana", "Mango");
echo $fruits[1];   // Banana

2. Associative Array

Keys are user-defined strings mapped to values.

$age = array("Ram" => 20, "Sita" => 22);
echo $age["Sita"];  // 22

3. Multidimensional Array

An array whose elements are themselves arrays (array of arrays).

$students = array(
  array("Ram", 20),
  array("Sita", 22)
);
echo $students[1][0];  // Sita

Difference

Type	Key	Use
Indexed	Numeric (0,1,2…)	Simple ordered lists
Associative	String/custom	Key–value pairs (like records)
Multidimensional	Nested arrays	Tables / matrices / grouped data

Arrays can be traversed using foreach, for, or array functions like count(), sort(), array_push().

Answer 7

User-Defined Functions in PHP

A user-defined function is a named, reusable block of code written by the programmer. It is declared with the function keyword, may take parameters, and may return a value. It avoids code repetition and improves modularity.

function greet($name) {
  return "Hello, $name";
}
echo greet("Ram");   // Hello, Ram

Passing Arguments by Value

By default PHP passes arguments by value — a copy is sent, so changes inside the function do not affect the original variable.

function addTen($n) {
  $n = $n + 10;
}
$x = 5;
addTen($x);
echo $x;   // 5  (original unchanged)

Passing Arguments by Reference

Prefixing the parameter with & passes the variable by reference — the function works on the original variable, so changes persist.

function addTen(&$n) {
  $n = $n + 10;
}
$x = 5;
addTen($x);
echo $x;   // 15 (original modified)

Summary: By value protects the caller's data (works on a copy); by reference (&) lets the function directly modify the caller's variable.

Answer 8

Structure of a URL

A URL (Uniform Resource Locator) is the address used to locate a resource on the web. Its general form is:

scheme://host:port/path?query#fragment

Example: https://www.example.com:443/products/index.php?id=10#top

Part	Example	Meaning
Scheme/Protocol	`https`	Protocol used (http, https, ftp).
Host/Domain	`www.example.com`	The server's domain name.
Port	`443`	Port on the server (optional; default 80/443).
Path	`/products/index.php`	Location of the resource on the server.
Query string	`?id=10`	Parameters sent to the server.
Fragment	`#top`	Anchor to a section within the page.

Role of DNS

DNS (Domain Name System) is the "phonebook of the Internet." Computers communicate using numeric IP addresses, but humans use domain names. DNS resolves (translates) a domain name into its IP address.

Resolution steps:

Browser checks its cache; if not found, it asks the DNS resolver (usually the ISP).
The resolver queries the root server, which points to the TLD server (e.g. .com).
The TLD server points to the authoritative name server for the domain.
The authoritative server returns the IP address (e.g. 93.184.216.34).
The browser uses that IP to open a TCP/HTTP connection to the web server.

Thus DNS lets users type www.example.com instead of remembering its IP address.

Answer 9

GET vs POST

Both GET and POST are HTTP methods used to submit HTML form data to the server (<form method="get"> or method="post">), but they differ as follows:

Feature	GET	POST
Data location	Appended to the URL as a query string (`?name=ram&id=5`)	Sent in the HTTP request body
Visibility	Visible in address bar / history	Not shown in URL
Data size	Limited (URL length limit ~2KB)	Practically unlimited
Security	Less secure (data exposed, logged)	More secure (not in URL); still needs HTTPS
Caching/Bookmark	Can be cached and bookmarked	Not cached or bookmarked
Idempotent	Yes – meant for retrieving data	No – meant for changing data
Typical use	Search, filters, navigation	Login, registration, file upload, inserting records

Summary: Use GET for safe, repeatable data retrieval where parameters can be visible; use POST for sending large or sensitive data that changes server state.

Answer 10

AJAX

AJAX (Asynchronous JavaScript And XML) is a web technique that allows a web page to exchange data with the server in the background and update parts of the page without reloading the whole page. Despite the name, modern AJAX often uses JSON instead of XML.

It combines: HTML/CSS (presentation), the DOM (dynamic update), JavaScript, and the XMLHttpRequest object (or the modern fetch() API) for communication.

How AJAX Enables Asynchronous Communication

An event (e.g. button click, key press) triggers a JavaScript function.
The script creates an XMLHttpRequest object and sends a request to the server asynchronously — the browser does not freeze; the user can keep interacting.
The server processes the request and sends back data (JSON/XML/text).
A callback runs when the response arrives, and JavaScript uses the DOM to update only the relevant part of the page.

Example:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    document.getElementById("result").innerHTML = xhr.responseText;
  }
};
xhr.open("GET", "data.php", true);  // true = asynchronous
xhr.send();

Benefits: faster, smoother user experience; less bandwidth (only data sent, not full page); used in live search, auto-complete, and dynamic feeds.

Answer 11

Role of a Web Server

A web server is software (and the hardware it runs on) that stores website files and responds to HTTP requests from clients (browsers). Examples: Apache, Nginx, IIS.

Its main roles are:

Listen for incoming HTTP/HTTPS requests on a port (80/443).
Locate the requested resource (HTML page, image, file).
For dynamic content, pass the request to an interpreter (PHP, etc.) or application server, get the generated output.
Send the resource back as an HTTP response with appropriate status codes and headers.
Handle security, logging, authentication, and concurrent connections.

Static vs Dynamic Web Pages

Feature	Static Web Page	Dynamic Web Page
Content	Fixed; same for every user	Generated on the fly; can differ per user/request
Technology	Plain HTML, CSS	Server-side scripts (PHP, ASP, JSP) + database
Processing	Server simply returns the file	Server runs code/queries DB to build the page
Update	Edit HTML file manually	Content updates automatically from data
Speed	Faster to serve	Slower (extra processing)
Example	A company "About" page	A user's Facebook feed, search results

Summary: A static page is delivered exactly as stored, while a dynamic page is built at request time by server-side programs, often using a database.

Answer 12

JSON

JSON (JavaScript Object Notation) is a lightweight, text-based data-interchange format used to store and transmit data between a server and a client. It is language-independent and easy for both humans and machines to read/write. Data is represented as key–value pairs and arrays.

{
  "name": "Ram",
  "age": 20,
  "subjects": ["Web", "DBMS"]
}

JSON vs XML

Feature	JSON	XML
Syntax	Key–value pairs with `{ }` and `[ ]`	Nested tags `<tag>...</tag>`
Verbosity	Compact, less text	Verbose (opening + closing tags)
Data types	Supports string, number, boolean, array, object	Everything is text
Parsing	Easy — `JSON.parse()` in JS	Needs a DOM/XML parser
Arrays	Native array support	No native arrays
Attributes / namespaces	Not supported	Supported
Readability	Simpler, cleaner	More descriptive but heavier
Typical use	REST APIs, AJAX, config	Documents, SOAP, mixed content

Summary: JSON is lighter and faster to parse, making it preferred for modern web APIs, while XML is more verbose but offers richer document features such as attributes, namespaces, and schema validation.

BSc CSIT (TU) Science Web Technology (BSc CSIT, CSC318) Question Paper 2077 Nepal

Section A: Long Answer Questions

Client-Side Form Validation using JavaScript

HTML Form with JavaScript Validation

Structure of an HTML5 Document

Ways of Applying CSS

CSS Box Model

HTTP Protocol

Structure of an HTTP Request

Structure of an HTTP Response

Common HTTP Methods

Common Status Codes

Section B: Short Answer Questions

Document Object Model (DOM)

Manipulating the DOM with JavaScript

XSLT

Example

Arrays in PHP

1. Indexed Array

2. Associative Array

3. Multidimensional Array

Difference

User-Defined Functions in PHP

Passing Arguments by Value

Passing Arguments by Reference

Structure of a URL

Role of DNS

GET vs POST

AJAX

How AJAX Enables Asynchronous Communication

Role of a Web Server

Static vs Dynamic Web Pages

JSON

JSON vs XML

Frequently asked questions