BIT251 · Exam intelligence

Web Technology I important questions

From 5 past TU papers: which questions keep coming back, how much they carry, and what is most likely to show up next. Every question links to a model answer.

Most likely Most repeated

Most likely in the next examStatistical

Ranked by how often a topic is asked, its marks weight, and whether it is due after skipping the 2081 paper. No guarantees; study the whole syllabus.

1asked 5xavg 8 marks · Inline internal and external CSS methods

Answer

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

External CSS for the Given HTML Structure

HTML File (`index.html`)

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

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

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

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

</body>
</html>

External CSS File (`styles.css`)

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

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

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

Explanation of Key Concepts

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

Why External CSS?

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

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

2asked 5xavg 8 marks · Form validation concept and purpose

Answer

Create a web form and write JavaScript to show form validation. The validation should be done for required, length and some pattern in the HTML form elements. [5]

--- Field Type of validation Rule enforced --------- Full name Required Must not be empty Username Required + length At least the minimum number of characters Email Required + pattern Text, an @, a domain, a dot and a suffix of two or mo...

3asked 3xavg 7 marks · due (skipped 2081) · XSD schema definition and validation

Answer

What is the use of XML?, Given following XML, write XSD for validating the XML and also write XSLT to transform the XML into HTML file. The Name, and Address are string type, Number is integer and the Accessible is Boolean type. The child elements should appear in the order as below.[10]

XML, XSD, and XSLT - Model Answer

Part 1: Uses of XML (2 marks)

XML (eXtensible Markup Language) is a markup language designed to store and transport data in a structured, human-readable, and machine-readable format.

Key Uses of XML:

Use	Description
Data Storage	Stores structured data independently of software and hardware
Data Exchange	Transfers data between different systems and platforms
Web Services	Used in SOAP-based web services for communication
Configuration Files	Many applications use XML for configuration (e.g., web.xml, pom.xml)
Document Representation	Represents documents with complex structure (e.g., XHTML, SVG)
Database Integration	Acts as a medium to exchange data between databases
RSS Feeds	Used to syndicate web content

Part 2: Given XML

Based on the question description, the assumed XML is:

<?xml version="1.0" encoding="UTF-8"?>
<Contacts>
    <Contact>
        <Name>Ram Sharma</Name>
        <Address>Kathmandu</Address>
        <Number>9841000001</Number>
        <Accessible>true</Accessible>
    </Contact>
    <Contact>
        <Name>Sita Thapa</Name>
        <Address>Pokhara</Address>
        <Number>9856000002</Number>
        <Accessible>false</Accessible>
    </Contact>
</Contacts>

Part 3: XSD (XML Schema Definition) for Validating the XML (4 marks)

An XSD defines the structure, data types, and constraints that an XML document must follow.

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

    <!-- Root Element -->
    <xs:element name="Contacts">
        <xs:complexType>
            <xs:sequence>
                <!-- Contact element can appear one or more times -->
                <xs:element name="Contact" maxOccurs="unbounded">
                    <xs:complexType>
                        <!-- Child elements must appear in this exact order -->
                        <xs:sequence>

                            <!-- Name: string type -->
                            <xs:element name="Name" type="xs:string"/>

                            <!-- Address: string type -->
                            <xs:element name="Address" type="xs:string"/>

                            <!-- Number: integer type -->
                            <xs:element name="Number" type="xs:integer"/>

                            <!-- Accessible: boolean type -->
                            <xs:element name="Accessible" type="xs:boolean"/>

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

</xs:schema>

Key Points:

xs:sequence enforces the order of child elements (Name → Address → Number → Accessible)
xs:string validates text data
xs:integer validates whole numbers
xs:boolean validates true or false values
maxOccurs="unbounded" allows multiple <Contact> entries

Part 4: XSLT to Transform XML into HTML (4 marks)

XSLT (eXtensible Stylesheet Language Transformations) is used to transform XML documents into other formats such as HTML, plain text, or another XML.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <!-- Match the root of the document -->
    <xsl:template match="/">
        <html>
            <head>
                <title>Contact List</title>
                <style>
                    table { border-collapse: collapse; width: 60%; }
                    th, td { border: 1px solid black; padding: 8px; text-align: left; }
                    th { background-color: #4CAF50; color: white; }
                    tr:nth-child(even) { background-color: #f2f2f2; }
                </style>
            </head>
            <body>
                <h2>Contact Information</h2>
                <table>
                    <tr>
                        <th>Name</th>
                        <th>Address</th>
                        <th>Number</th>
                        <th>Accessible</th>
                    </tr>

                    <!-- Loop through each Contact element -->
                    <xsl:for-each select="Contacts/Contact">
                        <tr>
                            <td>
                                <xsl:value-of select="Name"/>
                            </td>
                            <td>
                                <xsl:value-of select="Address"/>
                            </td>
                            <td>
                                <xsl:value-of select="Number"/>
                            </td>
                            <td>
                                <xsl:value-of select="Accessible"/>
                            </td>
                        </tr>
                    </xsl:for-each>

                </table>
            </body>
        </html>
    </xsl:template>

</xsl:stylesheet>

Resulting HTML Output

When the XSLT is applied to the XML, the browser renders:

Name	Address	Number	Accessible
Ram Sharma	Kathmandu	9841000001	true
Sita Thapa	Pokhara	9856000002	false

Summary

Component	Purpose
XML	Stores structured contact data
XSD	Validates data types and element order
XSLT	Transforms XML into a readable HTML table

4asked 2xavg 8 marks · due (skipped 2081) · HTML table structure and attributes

Answer

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

5asked 2xavg 5 marks · due (skipped 2081) · XML definition and purpose

Answer

What is the use of XML? Why is it called extensible, justify with example. [5]

XML: Uses and Extensibility

What is XML?

XML (eXtensible Markup Language) is a markup language designed to store, transport, and describe data in a structured, human-readable, and machine-readable format. It is a W3C recommended standard.

Uses of XML

Use	Description
Data Storage	Stores structured data in plain text files (e.g., configuration files)
Data Exchange	Transfers data between different systems and platforms (e.g., web services, APIs)
Web Development	Used in technologies like XHTML, RSS, SOAP, and AJAX
Database Communication	Acts as a medium to exchange data between databases
Document Representation	Represents documents with complex structure (e.g., Microsoft Office `.docx`)
Configuration Files	Many applications use XML for configuration (e.g., `web.xml` in Java)

Why is XML Called "Extensible"?

XML is called extensible because:

Unlike HTML, which has a fixed, predefined set of tags, XML allows users to define their own custom tags according to their specific needs.

There is no fixed vocabulary in XML. You can create any tag name that is meaningful to your application. This ability to extend and define new markup makes it "extensible."

Justification with Example

HTML (NOT extensible - fixed tags only):

<p>John</p>
<b>Engineer</b>

You cannot create <student> or <rollno> in HTML.

XML (Extensible - user-defined tags):

Suppose a school wants to store student data. They can define their own tags:

<?xml version="1.0" encoding="UTF-8"?>
<school>
    <student>
        <rollno>101</rollno>
        <name>Ram Sharma</name>
        <faculty>BSc CSIT</faculty>
        <semester>5</semester>
    </student>
    <student>
        <rollno>102</rollno>
        <name>Sita Thapa</name>
        <faculty>BSc CSIT</faculty>
        <semester>5</semester>
    </student>
</school>

Now suppose a hospital needs to store patient data. They define completely different tags:

<?xml version="1.0" encoding="UTF-8"?>
<hospital>
    <patient>
        <patientid>P001</patientid>
        <name>Hari Bahadur</name>
        <disease>Fever</disease>
        <doctor>Dr. Laxmi</doctor>
    </patient>
</hospital>

Key Observations:

Tags like <rollno>, <faculty>, <patient>, <disease> are not predefined anywhere.
The user created them based on their own requirements.
Both examples are valid XML despite having completely different tag sets.

Summary

XML is called extensible because it does not restrict users to a fixed set of tags. Users can invent, define, and use their own tags to describe any kind of data, making XML flexible and adaptable to any domain or application.

Most repeated questions

Topics asked at least twice, most-asked first.

asked 5xavg 8 marks · 2081, 2080, 2079, 0

Answer

External CSS for the Given HTML Structure

HTML File (`index.html`)

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

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

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

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

</body>
</html>

External CSS File (`styles.css`)

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

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

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

Explanation of Key Concepts

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

Why External CSS?

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

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

asked 5xavg 8 marks · 2081, 2080.2, 2080, 2079, 0

Answer

Create a web form and write JavaScript to show form validation. The validation should be done for required, length and some pattern in the HTML form elements. [5]

asked 3xavg 7 marks · 2080.2, 2079, 0

Answer

XML, XSD, and XSLT - Model Answer

Part 1: Uses of XML (2 marks)

XML (eXtensible Markup Language) is a markup language designed to store and transport data in a structured, human-readable, and machine-readable format.

Key Uses of XML:

Use	Description
Data Storage	Stores structured data independently of software and hardware
Data Exchange	Transfers data between different systems and platforms
Web Services	Used in SOAP-based web services for communication
Configuration Files	Many applications use XML for configuration (e.g., web.xml, pom.xml)
Document Representation	Represents documents with complex structure (e.g., XHTML, SVG)
Database Integration	Acts as a medium to exchange data between databases
RSS Feeds	Used to syndicate web content

Part 2: Given XML

Based on the question description, the assumed XML is:

<?xml version="1.0" encoding="UTF-8"?>
<Contacts>
    <Contact>
        <Name>Ram Sharma</Name>
        <Address>Kathmandu</Address>
        <Number>9841000001</Number>
        <Accessible>true</Accessible>
    </Contact>
    <Contact>
        <Name>Sita Thapa</Name>
        <Address>Pokhara</Address>
        <Number>9856000002</Number>
        <Accessible>false</Accessible>
    </Contact>
</Contacts>

Part 3: XSD (XML Schema Definition) for Validating the XML (4 marks)

An XSD defines the structure, data types, and constraints that an XML document must follow.

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

    <!-- Root Element -->
    <xs:element name="Contacts">
        <xs:complexType>
            <xs:sequence>
                <!-- Contact element can appear one or more times -->
                <xs:element name="Contact" maxOccurs="unbounded">
                    <xs:complexType>
                        <!-- Child elements must appear in this exact order -->
                        <xs:sequence>

                            <!-- Name: string type -->
                            <xs:element name="Name" type="xs:string"/>

                            <!-- Address: string type -->
                            <xs:element name="Address" type="xs:string"/>

                            <!-- Number: integer type -->
                            <xs:element name="Number" type="xs:integer"/>

                            <!-- Accessible: boolean type -->
                            <xs:element name="Accessible" type="xs:boolean"/>

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

</xs:schema>

Key Points:

xs:sequence enforces the order of child elements (Name → Address → Number → Accessible)
xs:string validates text data
xs:integer validates whole numbers
xs:boolean validates true or false values
maxOccurs="unbounded" allows multiple <Contact> entries

Part 4: XSLT to Transform XML into HTML (4 marks)

XSLT (eXtensible Stylesheet Language Transformations) is used to transform XML documents into other formats such as HTML, plain text, or another XML.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <!-- Match the root of the document -->
    <xsl:template match="/">
        <html>
            <head>
                <title>Contact List</title>
                <style>
                    table { border-collapse: collapse; width: 60%; }
                    th, td { border: 1px solid black; padding: 8px; text-align: left; }
                    th { background-color: #4CAF50; color: white; }
                    tr:nth-child(even) { background-color: #f2f2f2; }
                </style>
            </head>
            <body>
                <h2>Contact Information</h2>
                <table>
                    <tr>
                        <th>Name</th>
                        <th>Address</th>
                        <th>Number</th>
                        <th>Accessible</th>
                    </tr>

                    <!-- Loop through each Contact element -->
                    <xsl:for-each select="Contacts/Contact">
                        <tr>
                            <td>
                                <xsl:value-of select="Name"/>
                            </td>
                            <td>
                                <xsl:value-of select="Address"/>
                            </td>
                            <td>
                                <xsl:value-of select="Number"/>
                            </td>
                            <td>
                                <xsl:value-of select="Accessible"/>
                            </td>
                        </tr>
                    </xsl:for-each>

                </table>
            </body>
        </html>
    </xsl:template>

</xsl:stylesheet>

Resulting HTML Output

When the XSLT is applied to the XML, the browser renders:

Name	Address	Number	Accessible
Ram Sharma	Kathmandu	9841000001	true
Sita Thapa	Pokhara	9856000002	false

Summary

Component	Purpose
XML	Stores structured contact data
XSD	Validates data types and element order
XSLT	Transforms XML into a readable HTML table

asked 3xavg 5 marks · 2081, 2079, 0

Answer

Describe about the client server architecture. [5]

Client-server architecture is a distributed computing model in which tasks or workloads are partitioned between service providers (servers) and service requesters (clients). The client and server communicate over a network using a reques...

asked 3xavg 5 marks · 2081, 2080, 0

Answer

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

In relative positioning, an element is positioned relative to its own normal position in the document flow. The element still occupies its original space, but it is visually shifted using top, bottom, left, or right properties. In float ...

asked 2xavg 8 marks · 2079, 0

Answer

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

asked 2xavg 5 marks · 2080, 0

Answer

What is the use of XML? Why is it called extensible, justify with example. [5]

XML: Uses and Extensibility

What is XML?

Uses of XML

Use	Description
Data Storage	Stores structured data in plain text files (e.g., configuration files)
Data Exchange	Transfers data between different systems and platforms (e.g., web services, APIs)
Web Development	Used in technologies like XHTML, RSS, SOAP, and AJAX
Database Communication	Acts as a medium to exchange data between databases
Document Representation	Represents documents with complex structure (e.g., Microsoft Office `.docx`)
Configuration Files	Many applications use XML for configuration (e.g., `web.xml` in Java)

Why is XML Called "Extensible"?

XML is called extensible because:

Unlike HTML, which has a fixed, predefined set of tags, XML allows users to define their own custom tags according to their specific needs.

There is no fixed vocabulary in XML. You can create any tag name that is meaningful to your application. This ability to extend and define new markup makes it "extensible."

Justification with Example

HTML (NOT extensible - fixed tags only):

<p>John</p>
<b>Engineer</b>

You cannot create <student> or <rollno> in HTML.

XML (Extensible - user-defined tags):

Suppose a school wants to store student data. They can define their own tags:

<?xml version="1.0" encoding="UTF-8"?>
<school>
    <student>
        <rollno>101</rollno>
        <name>Ram Sharma</name>
        <faculty>BSc CSIT</faculty>
        <semester>5</semester>
    </student>
    <student>
        <rollno>102</rollno>
        <name>Sita Thapa</name>
        <faculty>BSc CSIT</faculty>
        <semester>5</semester>
    </student>
</school>

Now suppose a hospital needs to store patient data. They define completely different tags:

<?xml version="1.0" encoding="UTF-8"?>
<hospital>
    <patient>
        <patientid>P001</patientid>
        <name>Hari Bahadur</name>
        <disease>Fever</disease>
        <doctor>Dr. Laxmi</doctor>
    </patient>
</hospital>

Key Observations:

Tags like <rollno>, <faculty>, <patient>, <disease> are not predefined anywhere.
The user created them based on their own requirements.
Both examples are valid XML despite having completely different tag sets.

Summary

XML is called extensible because it does not restrict users to a fixed set of tags. Users can invent, define, and use their own tags to describe any kind of data, making XML flexible and adaptable to any domain or application.

asked 2xavg 5 marks · 2080.2, 0

Answer

How class selector is different from id selector while defining the CSS for HTML? Support your answer with example. [5]

Feature Class Selector ID Selector --------- Syntax symbol . (dot) (hash) HTML attribute class="..." id="..." Reusability Can be applied to multiple elements Must be unique per page (only one element) Specificity Lower specificity Higher...

asked 2xavg 8 marks · 2081, 2080

Answer

Write HTML script to generate following output. [5]

Since no specific output image is provided, I will create a commonly asked HTML table output in TU BSc CSIT exams: a formatted table with merged cells (colspan/rowspan), which is the standard 5-mark HTML question pattern. --- A table lik...

asked 2xavg 5 marks · 2081, 2080.2

Answer

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

Main and Aside Tags in HTML

Usages of `<main>` Tag

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

Key points:

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

Usages of `<aside>` Tag

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

Key points:

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

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

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

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

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

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

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

  </body>
</html>

Output Structure

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

asked 2xavg 5 marks · 2081, 2080.2

Answer

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

Web Page, Static vs Dynamic Websites

What is a Web Page? [1 Mark]

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

Static vs Dynamic Websites [4 Marks]

Static Website

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

Characteristics:

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

Dynamic Website

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

Characteristics:

Built using server-side technologies such as PHP, ASP.NET, Node.js, Python (Django/Flask), etc.
Interacts with a database (e.g., MySQL, MongoDB) to fetch or store data
Content is personalized and changes for different users or conditions
Suitable for complex applications (e.g., e-commerce sites, social media, online banking)

Comparison Table

Feature	Static Website	Dynamic Website
Content	Fixed, same for all users	Changes based on user/request
Technology	HTML, CSS	HTML + Server-side scripting (PHP, etc.)
Database	Not required	Required
Speed	Faster	Relatively slower
Maintenance	Difficult (manual editing)	Easier (content managed via CMS/DB)
Cost	Low	Higher
Example	Personal portfolio, brochure site	Facebook, Amazon, Gmail

In summary, static websites deliver the same pre-stored content to every visitor, while dynamic websites generate content dynamically based on user interaction and database queries, making them more flexible and interactive.

Shortcuts

Study BIT251 Past questions Full syllabus Your progress

Keep studying

Study BIT251

Answers, flashcards and MCQs

Past papers

Solved papers by year

NoteTok feed

Quick video explainers

Study every one of these with model answers, flashcards, and MCQs.

Open BIT251 study modes

Web Technology I important questions

Most likely in the next examStatistical

External CSS for the Given HTML Structure

HTML File (index.html)

External CSS File (styles.css)

Explanation of Key Concepts

Why External CSS?

XML, XSD, and XSLT - Model Answer

Part 1: Uses of XML (2 marks)

Part 2: Given XML

Part 3: XSD (XML Schema Definition) for Validating the XML (4 marks)

Part 4: XSLT to Transform XML into HTML (4 marks)

Resulting HTML Output

Summary

HTML Table - Model Answer

What is a Table in HTML?

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

Key Points to Note

XML: Uses and Extensibility

What is XML?

Uses of XML

Why is XML Called "Extensible"?

Justification with Example

HTML (NOT extensible - fixed tags only):

XML (Extensible - user-defined tags):

Key Observations:

Summary

Most repeated questions

External CSS for the Given HTML Structure

HTML File (index.html)

External CSS File (styles.css)

Explanation of Key Concepts

Why External CSS?

XML, XSD, and XSLT - Model Answer

Part 1: Uses of XML (2 marks)

Part 2: Given XML

Part 3: XSD (XML Schema Definition) for Validating the XML (4 marks)

Part 4: XSLT to Transform XML into HTML (4 marks)

Resulting HTML Output

Summary

HTML Table - Model Answer

What is a Table in HTML?

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

Key Points to Note

XML: Uses and Extensibility

What is XML?

Uses of XML

Why is XML Called "Extensible"?

Justification with Example

HTML (NOT extensible - fixed tags only):

XML (Extensible - user-defined tags):

Key Observations:

Summary

Main and Aside Tags in HTML

Usages of <main> Tag

Usages of <aside> Tag

HTML Script Using <main> and <aside> Tags

Output Structure

Web Page, Static vs Dynamic Websites

What is a Web Page? [1 Mark]

Static vs Dynamic Websites [4 Marks]

Static Website

Dynamic Website

Comparison Table

HTML File (`index.html`)

External CSS File (`styles.css`)

HTML File (`index.html`)

External CSS File (`styles.css`)

Usages of `<main>` Tag

Usages of `<aside>` Tag

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