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

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

The full BSc CSIT (TU) Web Technology (BSc CSIT, CSC318) 2082 (Regular (annual)) 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) 2082 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) 2082 paper?

The BSc CSIT (TU) Web Technology (BSc CSIT, CSC318) 2082 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

1Long answer10 marks

Define CSS. What is the use of CSS shadow effects? Write an HTML script with proper CSS as per the following description. Display a text content "CSIT Exam" in a div with id div1. The text should have a horizontal shadow of 3px and a vertical shadow of 2px. The shadow color should be green. Also set the horizontal and vertical shadow of the div to 10px respectively with the shadow color of div to blue.

Answer 1

What is CSS?

CSS (Cascading Style Sheets) is a style-sheet language used to describe the presentation of an HTML document — colors, fonts, spacing, layout, and visual effects. It separates content (HTML) from styling, making pages easier to maintain and reuse. CSS can be applied as inline, internal (<style>), or external (.css file) styles, and rules cascade by specificity and source order.

Use of CSS Shadow Effects

CSS shadow effects add depth and visual emphasis to elements. There are two main properties:

text-shadow — adds a shadow to text. Syntax: text-shadow: h-offset v-offset blur color;
box-shadow — adds a shadow to an element's box (the div). Syntax: box-shadow: h-offset v-offset blur spread color;

They are used to make headings stand out, create a 3-D / raised look, highlight cards and buttons, and improve readability over backgrounds — all without using images.

HTML Script with the Required CSS

The text "CSIT Exam" needs a text-shadow of horizontal 3px, vertical 2px, color green. The div1 box needs a box-shadow of horizontal 10px, vertical 10px, color blue.

<!DOCTYPE html>
<html>
<head>
  <title>CSS Shadow Effects</title>
  <style>
    #div1 {
      width: 200px;
      padding: 20px;
      /* horizontal 3px, vertical 2px shadow on the TEXT, green */
      text-shadow: 3px 2px green;
      /* horizontal 10px, vertical 10px shadow on the DIV box, blue */
      box-shadow: 10px 10px blue;
    }
  </style>
</head>
<body>
  <div id="div1">CSIT Exam</div>
</body>
</html>

Here text-shadow: 3px 2px green; gives the words "CSIT Exam" a green shadow offset 3px right and 2px down, while box-shadow: 10px 10px blue; gives the div1 box a blue shadow offset 10px right and 10px down.

Answer 2

jQuery Selectors

jQuery selectors are used to find (select) HTML elements so they can be manipulated. They follow CSS selector syntax and are written inside the $() function: $(selector). Common selectors:

Selector	Selects
`$("*")`	All elements
`$("p")`	All `<p>` elements (element/tag)
`$(".note")`	Elements with class `note`
`$("#main")`	Element with id `main`
`$("ul li")`	All `<li>` inside `<ul>` (descendant)
`$("input[type='text']")`	Inputs by attribute
`$("p:first")`	First `<p>` (filter)

$("#btn").click(function() {
  $("p").css("color", "red");   // selects all <p> and styles them
});

jQuery Callback

Many jQuery effects (like hide(), fadeOut(), slideUp()) are asynchronous — they take time to run. A callback is a function passed as an argument that executes only after the effect has finished, preventing errors caused by acting on an element that is still animating.

// Without callback the alert may fire before hiding completes
$("#box").hide("slow", function() {
  alert("The box is now hidden!");   // runs AFTER hide finishes
});

jQuery Chaining

Chaining lets you run multiple jQuery methods on the same element in a single statement, one after another. Each method returns the jQuery object, so the next method can be called on it. This is shorter, faster (the element is selected only once), and cleaner.

// Without chaining
$("#box").css("color", "red");
$("#box").slideUp(2000);
$("#box").slideDown(2000);

// With chaining
$("#box").css("color", "red")
         .slideUp(2000)
         .slideDown(2000);

Here the same #box element is colored red, then slides up, then slides down — all in one chained statement.

Answer 3

Use of XML

XML (eXtensible Markup Language) is a text-based, platform-independent language for storing and transporting data in a self-descriptive, hierarchical format. Its main uses are:

Data exchange between different applications and platforms (e.g. web services, SOAP).
Configuration files for software.
Separating data from presentation (data in XML, styling via XSLT/CSS).
Data storage in a structured, human- and machine-readable form.
Acting as the base for formats like RSS, SVG, and XHTML.

Unlike HTML it has no predefined tags — the author defines their own — and every document must be well-formed (one root, properly nested, all tags closed).

XML File

The following describes a student (complex element) containing other elements and text, with an attribute (id), and elements of string, integer, and date types.

<?xml version="1.0" encoding="UTF-8"?>
<student id="101">
  <name>Ram Sharma</name>        <!-- string -->
  <age>21</age>                  <!-- integer -->
  <admissionDate>2082-03-15</admissionDate>  <!-- date -->
  <address>
    <city>Kathmandu</city>
    <country>Nepal</country>
  </address>
</student>

Here student is a complex type (it contains child elements), address is also complex, id is an attribute, name holds a string, age an integer, and admissionDate a date.

Equivalent 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="admissionDate" type="xs:date"/>
        <xs:element name="address">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="city" type="xs:string"/>
              <xs:element name="country" type="xs:string"/>
            </xs:sequence>
          </xs:complexType>
        </xs:element>
      </xs:sequence>
      <xs:attribute name="id" type="xs:integer" use="required"/>
    </xs:complexType>
  </xs:element>

</xs:schema>

The XSD declares student as a complexType with a sequence of child elements, types xs:string, xs:integer, and xs:date for the respective values, a nested complexType for address, and a required id attribute.

Answer 4

Web Clients

A web client is software that requests and displays resources from a web server over HTTP/HTTPS. The most common web client is the web browser, which sends requests, receives HTML/CSS/JS or data, and renders the page for the user.

Examples: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari. Other clients include command-line tools like curl and wget, and mobile apps that consume APIs.

Web Servers

A web server is software (running on a computer) that stores web resources, listens for client requests, processes them (possibly running server-side code or querying a database), and returns an HTTP response. It hosts websites and serves pages to many clients.

Examples: Apache HTTP Server, Nginx, Microsoft IIS, LiteSpeed.

Client–Server Interaction

  Web Client (Browser)  --- HTTP request --->  Web Server
        (Chrome)        <--- HTTP response ---  (Apache/Nginx)

The client requests, the server responds. Together they implement the request–response model of the web; HTTP is stateless, so cookies/sessions are used to remember state.

Answer 5

HTML `<audio>` Tag

The HTML5 <audio> element embeds sound in a web page. Useful attributes:

autoplay — start playing automatically as soon as it can.
preload — hint to the browser how much to load: none, metadata, or auto.
loop — replay the audio continuously when it ends.
controls — show the play/pause/volume UI.

HTML Script

Here autoplay is set so it plays on load, preload="auto" tells the browser to download the whole file in advance, and loop makes it repeat.

<!DOCTYPE html>
<html>
<head><title>Audio Tag Demo</title></head>
<body>
  <h3>Background Music</h3>
  <audio autoplay preload="auto" loop controls>
    <source src="song.mp3" type="audio/mpeg">
    <source src="song.ogg" type="audio/ogg">
    Your browser does not support the audio element.
  </audio>
</body>
</html>

autoplay → audio begins automatically.
preload="auto" → browser preloads the entire audio file.
loop → audio repeats endlessly after it finishes.
Multiple <source> tags provide fallback formats; the text inside is shown if <audio> is unsupported.

Answer 6

onkeydown and onkeypress Events

onkeydown — fires when any key is pressed down (including non-character keys like Shift, arrows, function keys). It fires before the character is processed.
onkeypress — fires when a key that produces a character value is pressed (letters, digits, symbols). It does not fire for keys like Shift, Ctrl, or arrows. (Note: onkeypress is deprecated in modern HTML but still asked in exams.)

HTML Script

<!DOCTYPE html>
<html>
<head>
  <title>Keyboard Events Demo</title>
  <script>
    function keyDownHandler() {
      document.getElementById("msg1").innerHTML =
        "onkeydown event fired: a key was pressed down.";
    }
    function keyPressHandler() {
      document.getElementById("msg2").innerHTML =
        "onkeypress event fired: a character key was pressed.";
    }
  </script>
</head>
<body>
  <h3>Type something in the box:</h3>
  <input type="text"
         onkeydown="keyDownHandler()"
         onkeypress="keyPressHandler()">
  <p id="msg1"></p>
  <p id="msg2"></p>
</body>
</html>

When the user types in the input box, onkeydown runs keyDownHandler() for every key, and onkeypress runs keyPressHandler() only for character keys, displaying messages in the paragraphs.

Answer 7

Prompt and Alert Boxes

prompt() displays a dialog asking the user to type a value and returns the entered text (or null if cancelled).
alert() displays a message in a pop-up dialog with an OK button.

This program reads input with prompt() and shows it back with alert().

HTML Script with JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>Prompt to Alert</title>
  <script>
    function showInput() {
      // take input from prompt box
      var userInput = prompt("Please enter your name:", "");
      if (userInput !== null && userInput !== "") {
        // display the input using alert box
        alert("You entered: " + userInput);
      } else {
        alert("No input provided.");
      }
    }
  </script>
</head>
<body onload="showInput()">
  <h3>Prompt and Alert Demo</h3>
  <button onclick="showInput()">Enter Again</button>
</body>
</html>

When the page loads (or the button is clicked), prompt() collects the user's input, which is then displayed back through alert().

Answer 8

CSS Positioning

relative — element is positioned relative to its normal position; offsets (top, left) shift it without removing it from the flow.
float — element is taken out of normal flow and pushed to the left/right, letting other content wrap around it (float is a property, set with float: left/right).
absolute — element is removed from normal flow and positioned relative to its nearest positioned ancestor (or the page if none), using top, left, etc.

HTML Page with Internal CSS

<!DOCTYPE html>
<html>
<head>
  <title>CSS Positioning Demo</title>
  <style>
    #p1 {
      position: relative;
      left: 30px;          /* shifted 30px from its normal position */
      background: #ffd;
    }
    #p2 {
      float: left;         /* floated to the left */
      width: 150px;
      background: #dff;
    }
    #p3 {
      position: absolute;
      top: 200px;
      left: 50px;          /* placed at a fixed point on the page */
      background: #fdd;
    }
  </style>
</head>
<body>
  <p id="p1">This is paragraph p1 (relative position).</p>
  <p id="p2">This is paragraph p2 (floated left).</p>
  <p id="p3">This is paragraph p3 (absolute position).</p>
</body>
</html>

p1 is relative → shifted from its normal spot but space reserved.
p2 is floated left → other content wraps around it.
p3 is absolute → positioned at top 200px, left 50px regardless of other elements.

Answer 9

Use of Alert Box

The alert box (alert()) is a built-in JavaScript dialog that displays a message in a pop-up window with an OK button. Its uses are to:

Show information, warnings, or error messages to the user.
Display results or debug values during development.
Force the user to acknowledge a message before continuing (it is modal — it blocks the page until OK is clicked).

alert("Welcome to CSIT!");

RegExp Object

A RegExp (regular expression) object describes a pattern used to search, match, and replace text. The program below uses RegExp to validate whether an input string is a valid email pattern and to find matches.

<!DOCTYPE html>
<html>
<head><title>RegExp Demo</title>
<script>
  function testRegExp() {
    var str = "My email is ram@example.com";

    // pattern object
    var pattern = new RegExp("[a-z0-9._]+@[a-z]+\\.[a-z]+", "i");

    // test() returns true/false
    if (pattern.test(str)) {
      alert("An email pattern was found!");
    }

    // match() returns the matched text
    var found = str.match(pattern);
    alert("Matched: " + found[0]);   // ram@example.com
  }
</script>
</head>
<body onload="testRegExp()">
  <h3>RegExp Object Demo</h3>
</body>
</html>

Here new RegExp(pattern, "i") builds a case-insensitive pattern, test() checks whether it matches, and match() returns the matched substring — both results shown via alert().

Answer 10

Inheritance in PHP

Inheritance is an OOP feature in which a child (derived) class acquires the properties and methods of a parent (base) class using the extends keyword. It promotes code reuse and lets the child add or override behavior. The child can call parent members and override them; parent:: accesses the parent's version.

PHP Program

<?php
// Parent (base) class
class Animal {
    public $name;

    public function __construct($name) {
        $this->name = $name;
    }

    public function eat() {
        echo $this->name . " is eating.<br>";
    }

    public function sound() {
        echo "Some generic animal sound.<br>";
    }
}

// Child (derived) class inherits Animal
class Dog extends Animal {
    // override the parent method
    public function sound() {
        echo $this->name . " says: Woof!<br>";
    }
}

$d = new Dog("Tommy");
$d->eat();    // inherited from Animal -> Tommy is eating.
$d->sound();  // overridden in Dog       -> Tommy says: Woof!
?>

Output:

Tommy is eating.
Tommy says: Woof!

The Dog class extends Animal, so it reuses the $name property and eat() method, while overriding sound() with its own implementation — demonstrating inheritance.

Answer 11

Inserting Multiple Records in PHP

To insert several rows in one go, PHP (with MySQLi) can execute a single INSERT statement that lists multiple value sets, or loop over an array of records. Below is a clean approach using a single multi-row INSERT.

Assume the table:

CREATE TABLE students (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  marks INT
);

PHP Program

<?php
// 1. connect
$conn = new mysqli("localhost", "root", "", "school");
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// 2. single INSERT with multiple value rows
$sql = "INSERT INTO students (name, marks) VALUES
          ('Alice', 85),
          ('Bob', 78),
          ('Charlie', 92)";

if ($conn->query($sql) === TRUE) {
    echo $conn->affected_rows . " records inserted successfully.";
} else {
    echo "Error: " . $conn->error;
}

$conn->close();
?>

Alternative — looping over an array (with a prepared statement, safer):

$students = [["Alice", 85], ["Bob", 78], ["Charlie", 92]];
$stmt = $conn->prepare("INSERT INTO students (name, marks) VALUES (?, ?)");
foreach ($students as $s) {
    $stmt->bind_param("si", $s[0], $s[1]);
    $stmt->execute();
}
$stmt->close();

The first method inserts all three rows in one query; the second loops through an array, binding parameters and executing for each record. affected_rows confirms how many rows were inserted.

Answer 12

PHP Form and Form Validation

Form validation checks that user input is correct and complete before it is processed. Server-side validation in PHP reads $_POST, trims/sanitizes the data, and reports errors for any field that fails the rules.

Assumptions used for validation:

Name is required and must contain only letters and spaces.
Email is required and must be a valid email address.
Age is required and must be a number.

PHP Program

<?php
$nameErr = $emailErr = $ageErr = "";
$name = $email = $age = "";

if ($_SERVER["REQUEST_METHOD"] === "POST") {
    // Name validation
    if (empty($_POST["name"])) {
        $nameErr = "Name is required";
    } elseif (!preg_match("/^[a-zA-Z ]+$/", $_POST["name"])) {
        $nameErr = "Only letters and spaces allowed";
    } else {
        $name = htmlspecialchars(trim($_POST["name"]));
    }

    // Email validation
    if (empty($_POST["email"])) {
        $emailErr = "Email is required";
    } elseif (!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)) {
        $emailErr = "Invalid email format";
    } else {
        $email = htmlspecialchars(trim($_POST["email"]));
    }

    // Age validation
    if (empty($_POST["age"])) {
        $ageErr = "Age is required";
    } elseif (!is_numeric($_POST["age"])) {
        $ageErr = "Age must be a number";
    } else {
        $age = (int)$_POST["age"];
    }

    if (!$nameErr && !$emailErr && !$ageErr) {
        echo "Form submitted successfully! Welcome, $name.";
    }
}
?>
<form method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
  Name:  <input type="text" name="name">  <span><?php echo $nameErr; ?></span><br>
  Email: <input type="text" name="email"> <span><?php echo $emailErr; ?></span><br>
  Age:   <input type="text" name="age">   <span><?php echo $ageErr; ?></span><br>
  <input type="submit" value="Submit">
</form>

The form posts to itself; each field is checked for being non-empty and matching its rule (preg_match for name, FILTER_VALIDATE_EMAIL for email, is_numeric for age). Error messages are shown beside each field, and only when all pass is the form accepted.

Level	BSc CSIT (TU)
Stream	Science
Subject	Web Technology (BSc CSIT, CSC318)
Year	2082 BS
Exam session	Regular (annual)
Full marks	60
Time allowed	180 minutes
Questions	12, all with step-by-step solutions

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

Section A: Long Answer Questions

What is CSS?

Use of CSS Shadow Effects

HTML Script with the Required CSS

jQuery Selectors

jQuery Callback

jQuery Chaining

Use of XML

XML File

Equivalent XSD

Section B: Short Answer Questions

Web Clients

Web Servers

Client–Server Interaction

HTML `<audio>` Tag

HTML Script

onkeydown and onkeypress Events

HTML Script

Prompt and Alert Boxes

HTML Script with JavaScript

CSS Positioning

HTML Page with Internal CSS

Use of Alert Box

RegExp Object

Inheritance in PHP

PHP Program

Inserting Multiple Records in PHP

PHP Program

PHP Form and Form Validation

PHP Program

Frequently asked questions

Section A: Long Answer Questions

What is CSS?

Use of CSS Shadow Effects

HTML Script with the Required CSS

jQuery Selectors

jQuery Callback

jQuery Chaining

Use of XML

XML File

Equivalent XSD

Section B: Short Answer Questions

Web Clients

Web Servers

Client–Server Interaction

HTML <audio> Tag

HTML Script

onkeydown and onkeypress Events

HTML Script

Prompt and Alert Boxes

HTML Script with JavaScript

CSS Positioning

HTML Page with Internal CSS

Use of Alert Box

RegExp Object

Inheritance in PHP

PHP Program

Inserting Multiple Records in PHP

PHP Program

PHP Form and Form Validation

PHP Program

Frequently asked questions

HTML `<audio>` Tag