BIT251 · TU past paper

Web Technology I 2079 question paper

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

Past Papers2081 2080.2 2080 2079

Tap a question to open its answer.

110 marksHypertext and markup conceptsAnswer

What is the meaning of hypertext and markup in HTML. Create a HTML page having title "Myfirstpage" and a Meta tag with name author having content "Gunnu". The page should have a body part having a div with id DV_1 which should contain an ordered list of fruit items namely Orange, Apple2, Banana3 and Kiwi. The item kiwi should also have link to www.kiwi.com. Insert a comment "This is kiwi" after the item Kiwi. Also display an alert message "Helloworldx" in onload() event of the body.[10]

HTML: Hypertext, Markup, and Complete Page Creation

Part 1: Meaning of Hypertext and Markup in HTML

Hypertext

Hypertext refers to text that contains links (hyperlinks) to other documents or resources. Unlike plain linear text, hypertext allows users to navigate non-linearly by clicking on links that connect one page or resource to another. The "hyper" prefix means "beyond" or "above" ordinary text, indicating that the text goes beyond simple reading and enables interconnected navigation across the web.

Example: Clicking a link on one webpage that takes you to another webpage is the concept of hypertext in action.

Markup

Markup refers to the use of tags and annotations embedded within the content to define the structure, formatting, and meaning of the text. In HTML, markup is done using angle-bracket tags such as <p>, <h1>, <div>, etc. These tags "mark up" the plain content to tell the browser how to display or interpret it.

Example: <b>Hello</b> marks the word "Hello" to be displayed in bold.

Together: HTML = HyperText Markup Language

HTML combines both concepts: it uses markup tags to structure content, and supports hypertext links to connect documents across the internet.

Part 2: Complete HTML Page

<!DOCTYPE html>
<html>

  <head>
    <title>Myfirstpage</title>
    <meta name="author" content="Gunnu">
  </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>
        </li>
        <!-- This is kiwi -->
      </ol>

    </div>

  </body>

</html>

Explanation of Each Part

Element	Purpose
`<!DOCTYPE html>`	Declares the document as HTML5
`<title>Myfirstpage</title>`	Sets the browser tab/title to "Myfirstpage"
`<meta name="author" content="Gunnu">`	Meta tag specifying the author as "Gunnu"
`<body onload="alert('Helloworldx')">`	Fires a JavaScript alert with "Helloworldx" when the page loads
`<div id="DV_1">`	A division/container with id attribute set to DV_1
`<ol>`	Creates an ordered list (numbered list) of fruit items
`<li>Orange</li>`, `<li>Apple2</li>`, `<li>Banana3</li>`	Individual list items for the first three fruits
`<a href="http://www.kiwi.com">Kiwi</a>`	Kiwi list item with a hyperlink pointing to www.kiwi.com
`<!-- This is kiwi -->`	An HTML comment inserted after the Kiwi item (not visible in browser)

Expected Output in Browser

When the page loads:

An alert box appears with the message: Helloworldx

After dismissing the alert, the page displays a numbered list:

1. Orange
2. Apple2
3. Banana3
4. Kiwi   <-- clickable link to www.kiwi.com

210 marksInline internal and external CSS methodsAnswer

What is CSS? How CSS is inserted in a HTML page? Illustrate with examples.[10]

CSS: Definition and Insertion Methods

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation and visual appearance of HTML documents. It controls how HTML elements are displayed on screen, including layout, colors, fonts, spacing, and other visual properties.

Key Features of CSS:

Separates content (HTML) from presentation (styling)
Allows consistent styling across multiple web pages
Reduces code repetition
Improves page load time and maintainability
Supports responsive design for different screen sizes

Basic CSS Syntax:

selector {
    property: value;
    property: value;
}

Example:

h1 {
    color: blue;
    font-size: 24px;
}

How CSS is Inserted in an HTML Page

There are three ways to insert CSS into an HTML page:

1. Inline CSS

CSS is applied directly to a single HTML element using the style attribute.

Syntax:

<tagname style="property: value; property: value;">

Example:

<!DOCTYPE html>
<html>
<body>
    <h1 style="color: red; font-size: 30px;">Hello World</h1>
    <p style="color: blue; text-align: center;">This is a paragraph.</p>
</body>
</html>

Advantages:

Quick and easy for single element styling
Highest specificity (overrides other styles)

Disadvantages:

Not reusable; must be repeated for each element
Mixes content with presentation
Hard to maintain for large projects

2. Internal (Embedded) CSS

CSS is written inside the <style> tag within the <head> section of the HTML document.

Syntax:

<head>
    <style>
        selector {
            property: value;
        }
    </style>
</head>

Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: lightyellow;
        }
        h1 {
            color: green;
            text-align: center;
        }
        p {
            font-size: 16px;
            color: gray;
        }
    </style>
</head>
<body>
    <h1>Welcome to CSS</h1>
    <p>This page uses internal CSS styling.</p>
</body>
</html>

Advantages:

Styles apply to the entire page
No need for a separate file
Useful for single-page websites

Disadvantages:

Styles cannot be shared across multiple pages
Increases HTML file size

3. External CSS

CSS is written in a separate .css file and linked to the HTML document using the <link> tag inside the <head> section.

HTML File (index.html):

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Welcome to External CSS</h1>
    <p>This page is styled using an external CSS file.</p>
    <a href="#">Click Here</a>
</body>
</html>

CSS File (styles.css):

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: navy;
    text-align: center;
}

p {
    font-size: 18px;
    color: #333333;
    line-height: 1.6;
}

a {
    color: orange;
    text-decoration: none;
}

Advantages:

One CSS file can style multiple HTML pages
Clean separation of content and design
Easy to maintain and update
Reduces code duplication
Browser caches the CSS file for faster loading

Disadvantages:

Requires an extra HTTP request to load the file
Page may appear unstyled briefly if CSS loads slowly

Comparison Table

Feature	Inline CSS	Internal CSS	External CSS
Location	Inside HTML tag	Inside `<head>`	Separate `.css` file
Scope	Single element	Single page	Multiple pages
Reusability	No	No	Yes
Maintenance	Difficult	Moderate	Easy
Best Use	Quick fixes	Single page	Large projects

Cascading Order (Priority)

When multiple styles conflict, CSS follows this priority order:

Inline CSS  >  Internal CSS  >  External CSS  >  Browser Default
(Highest)                                         (Lowest)

Summary

CSS is a powerful tool for styling web pages. The three insertion methods -- inline, internal, and external -- each serve different purposes. For professional and large-scale web development, external CSS is the most preferred method as it promotes reusability, clean code structure, and easier maintenance.

310 marksXML extensibility conceptHideAnswer
What is the meaning of extensible in XML? Mention the XML naming rules. Create an XML file containing an empty element with content, element with element, and element with attribute. Now write equivalent DTD.[10]
--- Extensible in XML means that users can define their own tags (elements) according to their needs. Unlike HTML, which has a fixed set of predefined tags, XML allows you to create custom markup languages tailored to any domain or appli...
45 marksXML namespaces and name conflict resolutioHideAnswer
Justify with an example that how XML namespace provides a method to avoid name conflict. [5]
An XML Namespace is a mechanism that provides a way to avoid element name conflicts in XML documents by associating element and attribute names with a unique URI (Uniform Resource Identifier). It is declared using the reserved attribute ...
55 marksXSD schema definition and validationHideAnswer
Create a XMl file containing elements Username, Password. Write its XSD and set the restriction of the password must be minimum 4 characters and maximum 8 characters [5]
--- --- Component Purpose ------ xs:schema Root element of every XSD file xs:complexType Used because <login contains child elements xs:sequence Child elements must appear in order xs:simpleType Defines a custom simple type for Password ...
65 marksNormal box layout and basic box layoutHideAnswer
Write a CSS script to illustrate the concept of Normal Box Layout and Basic Box Layout. [5]
In CSS, the Box Model treats every HTML element as a rectangular box. Each box consists of: - Content - the actual content (text, image, etc.) - Padding - space between content and border - Border - surrounds the padding - Margin - space...
75 marksInline internal and external CSS methodsHideAnswer
Write an external CSS and link it to a HTML page containing HTML elements. Use your own assumptions for HTML elements and their CSS. [5]
External CSS is a separate .css file that contains all the styling rules. It is linked to an HTML page using the <link tag inside the <head section. Syntax to link external CSS: --- We create a simple student profile webpage with a headi...
85 marksJavaScript variable declaration and definiHideAnswer
How variables in JavaScript are defined and declared? Write a JavaScript function that will include the variable having values number 5 and character '5' and print the variables. [5]
JavaScript provides three keywords to declare variables: Keyword Scope Re-declarable Re-assignable Notes ----------------------------------------------------- var Function/Global Yes Yes Old way, hoisted let Block No Yes Modern, preferre...
95 marksForm validation concept and purposeHideAnswer
What is form validation? Write a JavaScript function to validate an email field, password having length at least 6 and a collection of checkbox of 3 hobbies having at least one of them to be checked. [5]
Form validation is the process of checking whether the data entered by a user in an HTML form is correct, complete, and in the expected format before submitting it to the server. It ensures data integrity and provides immediate feedback ...

105 marksCanvas element and drawingAnswer

What is canvas element? Write a HTML script to create a canvas field having id cv1 and draw a circle inside the canvas. [5]

Canvas Element in HTML

What is Canvas Element?

The <canvas> element is an HTML5 element used to draw graphics on a web page using JavaScript. It acts as a drawing container (a rectangular area/field) on which graphics, shapes, images, animations, and other visual content can be rendered dynamically through scripting (usually JavaScript).

Key Points:

It is defined using the <canvas> tag.
By default, it has no border and no content.
The actual drawing is done using JavaScript with the Canvas API.
Common attributes: id, width, height.

Syntax:

<canvas id="myCanvas" width="value" height="value"></canvas>

HTML Script: Canvas with id="cv1" and a Circle

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Circle Example</title>
</head>
<body>

    <h2>Drawing a Circle on Canvas</h2>

    <!-- Canvas field with id cv1 -->
    <canvas id="cv1" width="400" height="300"
            style="border: 2px solid black;">
        Your browser does not support the canvas element.
    </canvas>

    <script>
        // Step 1: Get the canvas element by its id
        var canvas = document.getElementById("cv1");

        // Step 2: Get the 2D drawing context
        var ctx = canvas.getContext("2d");

        // Step 3: Begin drawing the circle
        ctx.beginPath();

        // Step 4: arc(x, y, radius, startAngle, endAngle)
        // x=200, y=150 is the center; radius=80
        // 0 to 2*Math.PI draws a full circle
        ctx.arc(200, 150, 80, 0, 2 * Math.PI);

        // Step 5: Set fill color and fill the circle
        ctx.fillStyle = "skyblue";
        ctx.fill();

        // Step 6: Set stroke (border) color and draw the border
        ctx.strokeStyle = "navy";
        ctx.lineWidth = 3;
        ctx.stroke();
    </script>

</body>
</html>

Explanation of Key Steps

Step	Code	Purpose
1	`getElementById("cv1")`	Selects the canvas element
2	`getContext("2d")`	Gets the 2D rendering context
3	`beginPath()`	Starts a new drawing path
4	`arc(x, y, r, 0, 2*Math.PI)`	Defines a full circle
5	`fill()`	Fills the circle with color
6	`stroke()`	Draws the circle border

Note: arc(x, y, radius, startAngle, endAngle) - angles are in radians. A full circle = 2 * Math.PI radians (360°).

115 marksClient server architecture typesHideAnswer
What do you mean by client server architecture? Describe different types of client server architectures. [5]
Client-server architecture is a distributed computing model in which tasks or workloads are divided between service providers (servers) and service requesters (clients). The client sends a request to the server over a network, the server...

125 marksHTML table structure and attributesAnswer

What is table in HTML? Create a HTML page containing a DIV with name "divtb". The divtb should contain a table as below[Note the border should be dotted ] [5]

HTML Table - Model Answer

What is a Table in HTML?

An HTML table is a structured way to display data in rows and columns format. Tables are created using the <table> tag along with several related tags:

Tag	Description
`<table>`	Defines the table
`<tr>`	Defines a table row
`<th>`	Defines a table header cell (bold & centered by default)
`<td>`	Defines a table data cell
`<caption>`	Defines a table caption/title

Tables are used to organize and present data in a grid-like structure on a webpage.

HTML Page with DIV "divtb" containing a Dotted Border Table

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Table Example</title>
    <style>
      #divtb {
        width: 50%;
        margin: 20px auto;
      }

      #divtb table {
        width: 100%;
        border-collapse: collapse;
      }

      #divtb table, 
      #divtb th, 
      #divtb td {
        border: 2px dotted black;
        padding: 8px;
        text-align: center;
      }

      #divtb th {
        background-color: #cccccc;
      }
    </style>
  </head>
  <body>

    <div id="divtb">
      <table>
        <caption><strong>Student Table</strong></caption>
        <tr>
          <th>S.N.</th>
          <th>Name</th>
          <th>Age</th>
          <th>Address</th>
        </tr>
        <tr>
          <td>1</td>
          <td>Ram</td>
          <td>20</td>
          <td>Kathmandu</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Sita</td>
          <td>22</td>
          <td>Pokhara</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Hari</td>
          <td>21</td>
          <td>Chitwan</td>
        </tr>
      </table>
    </div>

  </body>
</html>

Key Points to Note

id="divtb" is used to identify the <div> element
border: 2px dotted black applies the dotted border to the table, <th>, and <td> elements
border-collapse: collapse ensures borders between cells are merged into a single border
<th> tags are used for header row (S.N., Name, Age, Address)
<td> tags are used for data rows

Keep going

Important questions + predictions

Full syllabus Flashcards and practice

Other papers

2081 paper 2080.2 paper 2080 paper