Sunday, January 25, 2026

Third Semester_Web Technology_Quesiton Answer

 Describe the <img> and <a> tag with example.(2079 BICTE 5Marks)

The <img> tag is used in HTML to insert and display images on a web page. It is an empty tag and does not have a closing tag. The image source is specified using the src attribute, while the alt attribute provides alternate text if the image cannot be displayed. Attributes like width and height are used to control the size of the image on the web page.
Example: <img src="image.jpg" alt="Sample Image" width="200" height="150">

The <a> tag, also called the anchor tag, is used in HTML to create hyperlinks. It allows users to navigate from one web page to another or to different resources. The destination address of the link is defined using the href attribute, and the clickable text is written between the opening and closing <a> tag.
Example: <a href="https://www.google.com">Visit Google</a>

How is HTML differs form CSS? Explain the ways for inserting CSS code into HTML file.(2079 BICTE 5Marks)

HTML and CSS are used together to create web pages but they have different purposes. HTML (HyperText Markup Language) is used to create the structure and content of a web page such as headings, paragraphs, images, links, tables, etc. CSS (Cascading Style Sheets) is used to control the presentation and appearance of the web page such as colors, fonts, layout, spacing, and alignment. HTML defines what content appears on the page, while CSS defines how that content looks. HTML uses tags, whereas CSS uses selectors and style rules.

There are three ways to insert CSS code into an HTML file.

Inline CSS is written directly inside an HTML element using the style attribute. It affects only that single element.
Example: <p style="color:red;">Hello</p>

Internal CSS is written inside the <style> tag within the <head> section of the HTML file. It affects the entire page.
Example: <style> p { color: blue; } </style>

External CSS is written in a separate .css file and linked to the HTML file using the <link> tag. It is best for large websites.
Example: <link rel="stylesheet" href="style.css">

What is media query? Explain how to create a responsive web page with example.(2079)

A media query is a CSS technique used to apply different styles to a web page based on the device screen size, resolution, or orientation. It helps in making web pages responsive so that they adjust properly on mobile phones, tablets, and desktops. Media queries are written using the @media rule in CSS.

A responsive web page is created by using flexible layouts, relative units, and media queries so that the content adapts to different screen sizes.

Example:

HTML:
<div class="box">Responsive Page</div>

CSS:
.box { width: 100%; background-color: lightblue; padding: 20px; font-size: 20px; }

@media screen and (max-width: 600px) { .box { background-color: lightgreen; font-size: 14px; } }

In this example, the media query changes the style of the web page when the screen width is 600px or less, making the page suitable for mobile devices.

Create a HTML form for student information to enter marks in five subjects and write  a javascript code to find total, average, result and grade.(2079)

<!DOCTYPE html>
<html>
<head>
<title>Student Result</title>
</head>
<body>

<form>
Student Name:
<input type="text" id="name"><br><br>

Subject 1:
<input type="number" id="m1"><br><br>
Subject 2:
<input type="number" id="m2"><br><br>
Subject 3:
<input type="number" id="m3"><br><br>
Subject 4:
<input type="number" id="m4"><br><br>
Subject 5:
<input type="number" id="m5"><br><br>

<input type="button" value="Calculate" onclick="result()">
</form>

<p id="output"></p>

<script>
function result() {
  var m1 = parseInt(document.getElementById("m1").value);
  var m2 = parseInt(document.getElementById("m2").value);
  var m3 = parseInt(document.getElementById("m3").value);
  var m4 = parseInt(document.getElementById("m4").value);
  var m5 = parseInt(document.getElementById("m5").value);

  var total = m1 + m2 + m3 + m4 + m5;
  var avg = total / 5;
  var grade, res;

  if (avg >= 80) grade = "A";
  else if (avg >= 60) grade = "B";
  else if (avg >= 40) grade = "C";
  else grade = "F";

  if (avg >= 40) res = "Pass";
  else res = "Fail";

  document.getElementById("output").innerHTML =
  "Total = " + total + "<br>Average = " + avg +
  "<br>Result = " + res + "<br>Grade = " + grade;
}
</script>

</body>
</html>

or Shortest 


<html>
<body>

<form>
<input id="m1"><input id="m2"><input id="m3"><input id="m4"><input id="m5">
<input type="button" value="Result" onclick="r()">
</form>

<p id="o"></p>

<script>
function r(){
let t=0;
for(i=1;i<=5;i++) t+=+document.getElementById("m"+i).value;
let a=t/5,g=a>=80?"A":a>=60?"B":a>=40?"C":"F";
document.getElementById("o").innerHTML=
"Total="+t+" Avg="+a+" Result="+(a>=40?"Pass":"Fail")+" Grade="+g;
}
</script>

</body>
</html>

1) Using name (document.f.field)

<script> function c(){ t=0; for(i=1;i<=5;i++) t+=+f["m"+i].value; a=t/5; g=a>=80?"A":a>=60?"B":a>=40?"C":"F"; alert("Total="+t+" Avg="+a+" Result="+(a>=40?"Pass":"Fail")+" Grade="+g); } </script> <form name="f"> <input name="m1"><input name="m2"><input name="m3"> <input name="m4"><input name="m5"> <button type="button" onclick="c()">OK</button> </form>

2) Using id (getElementById)

<script> function c(){ t=0; for(i=1;i<=5;i++) t+=+document.getElementById("m"+i).value; a=t/5; g=a>=80?"A":a>=60?"B":a>=40?"C":"F"; alert("Total="+t+" Avg="+a+" Result="+(a>=40?"Pass":"Fail")+" Grade="+g); } </script> <form> <input id="m1"><input id="m2"><input id="m3"> <input id="m4"><input id="m5"> <button type="button" onclick="c()">OK</button> </form>

What are the advantages and disadvantages of sung CSV file format? Explain how to Display data from a CSV file using PHP.(2079)

Advantages of CSV file format:

  1. Simple and easy to read.

  2. Supported by most applications like Excel, Notepad, databases.

  3. Lightweight and takes less storage.

  4. Easy to import/export data between programs.

Disadvantages of CSV file format:

  1. Cannot store complex data like images or formulas.

  2. No support for data types; all data is treated as text.

  3. No built-in validation or structure.

  4. Large files can be slow to process.

Displaying data from a CSV file using PHP:
PHP provides functions like fopen(), fgetcsv(), and fclose() to read CSV files. Example:

<?php $f=fopen("data.csv","r"); echo "<table border=1>"; while($r=fgetcsv($f)){ echo "<tr>"; foreach($r as $c) echo "<td>$c</td>"; echo "</tr>"; } echo "</table>"; fclose($f); ?>

Define array. Explain about the types of Arrays in PHP with examples.(2079)

An array in PHP is a variable that can store multiple values under a single name. Each value in an array is called an element, and it can be accessed using an index or a key.

Types of Arrays in PHP:

  1. Indexed Array:
    An array with numeric indexes starting from 0.

Example:

$fruits = array("Apple", "Banana", "Mango"); echo $fruits[1]; // Output: Banana
  1. Associative Array:
    An array where each key is a custom string.

Example:

$student = array("name"=>"Suman", "age"=>20, "grade"=>"A"); echo $student["name"]; // Output: Suman
  1. Multidimensional Array:
    An array containing one or more arrays.

Example:

$marks = array( "Suman"=>array(80, 75, 90), "Rita"=>array(85, 80, 95) ); echo $marks["Rita"][2]; // Output: 95

Differentiate mysql_fetch_row() and mysql_fetch_array() function.(2079)

mysql_fetch_row() vs mysql_fetch_array()

Feature

mysql_fetch_row()

mysql_fetch_array()

Returns

Returns a numeric array (indexed by numbers)

Returns an array that can be numeric, associative, or both

Access

Values are accessed using numeric indexes

Values can be accessed using column names or numeric indexes

Memory

Uses less memory

Uses more memory because it stores both numeric and associative keys

Example

$row = mysql_fetch_row($result); echo $row[0];

$row = mysql_fetch_array($result); echo $row['column_name'];

Summary:

  • Use mysql_fetch_row() for simple numeric access and better memory efficiency.

  • Use mysql_fetch_array() when you need flexibility to access data by column name or index.

How PHP and MYSQL are related? Explain how to execute mysql "insert and select" query and fetch results stu_roll, stu_name, stu_address from database table "students" using PHP.(2079)

Relation between PHP and MySQL:
PHP is a server-side scripting language used to create dynamic web pages, while MySQL is a database management system used to store and manage data. PHP can connect to MySQL, execute queries, and fetch or manipulate data. Together, they allow developers to build data-driven websites.

Executing MySQL Queries in PHP:

  1. Insert Query Example:

<?php $conn = mysqli_connect("localhost","username","password","database"); if(!$conn) { die("Connection failed: " . mysqli_connect_error()); } $sql = "INSERT INTO students (stu_roll, stu_name, stu_address) VALUES (1, 'Suman', 'Kathmandu')"; mysqli_query($conn, $sql); mysqli_close($conn); ?>
  1. Select Query and Fetch Results Example:

<?php $conn = mysqli_connect("localhost","username","password","database"); if(!$conn) { die("Connection failed: " . mysqli_connect_error()); } $sql = "SELECT stu_roll, stu_name, stu_address FROM students"; $result = mysqli_query($conn, $sql); while($row = mysqli_fetch_assoc($result)){ echo $row['stu_roll'] . " " . $row['stu_name'] . " " . $row['stu_address'] . "<br>"; } mysqli_close($conn); ?>

Explanation:

  • mysqli_connect() – Connects PHP to MySQL.

  • mysqli_query() – Executes SQL queries.

  • mysqli_fetch_assoc() – Fetches each row as an associative array.

  • mysqli_close() – Closes the database connection.

What do ou mean by responsive CSS? What are its advantages?(2078)

Responsive CSS:
Responsive CSS is a technique used to make a web page adjust automatically according to the screen size, resolution, and device type (desktop, tablet, or mobile). It ensures that the web page looks good and functions properly on all devices. Media queries in CSS are commonly used to achieve responsiveness.

Advantages of Responsive CSS:

  1. Provides a better user experience on all devices.

  2. Reduces the need for multiple versions of the same website.

  3. Improves SEO ranking because Google prefers mobile-friendly sites.

  4. Saves time and cost in development and maintenance.

  5. Makes websites flexible and adaptable to future devices.

What is session in PHP? How is it different from cookies?(2078)

Session in PHP:
A session in PHP is a way to store information (variables) on the server for a particular user. It allows data to be used across multiple pages during a user’s visit. Sessions are temporary and usually expire when the user closes the browser.

Difference between Session and Cookie:

Feature

Session

Cookie

Storage

Stored on server

Stored on client’s browser

Security

More secure

Less secure, can be modified by user

Size Limit

Can store larger data

Limited to about 4 KB

Expiry

Ends when browser is closed (or set manually)

Can have a specific expiry time

Access

Accessible only on the server

Accessible on client and server


Write short notes on AMP, server side scripting language and static website.(2078)

AMP (Accelerated Mobile Pages):
AMP is a web technology that allows web pages to load faster on mobile devices by using a simplified HTML and optimized CSS. It improves user experience and SEO on mobile platforms.

Server-Side Scripting Language:
A server-side scripting language is executed on the web server before the page is sent to the user’s browser. Examples include PHP, ASP, and Python. It is used to generate dynamic content, handle forms, and interact with databases.

Static Website:
A static website consists of fixed web pages written in HTML and CSS. The content does not change dynamically. It is simple, fast, and easy to host, but cannot interact with databases or provide personalized content.

What do you mean by event handler in javascript? Write script to show it.

An event handler is a function or code that responds to user actions on a web page, such as clicking a button, moving the mouse, typing, or loading a page. Event handlers allow web pages to be interactive.

Example Script:

<!DOCTYPE html> <html> <body> <button onclick="showMessage()">Click Me</button> <script> function showMessage() { alert("Hello! You clicked the button."); } </script> </body> </html>

Explanation:

  • The onclick attribute is an event handler for the button.

  • When the user clicks the button, the function showMessage() is executed.

  • The function shows a popup alert.

What do you mean by event handler in javascript? Write script to show it.

Event Handler in JavaScript:
An event handler is a function or code that responds to user actions on a web page, such as clicking a button, moving the mouse, typing, or loading a page. Event handlers allow web pages to be interactive.

Example Script:

<!DOCTYPE html> <html> <body> <button onclick="showMessage()">Click Me</button> <script> function showMessage() { alert("Hello! You clicked the button."); } </script> </body> </html>

Explanation:

  • The onclick attribute is an event handler for the button.

  • When the user clicks the button, the function showMessage() is executed.

  • The function shows a popup alert.

Write about scope of variable in PHP. How can you pass value by reference in function ? Give example.(2078)

Scope of Variable in PHP:
The scope of a variable in PHP defines where the variable can be accessed in the program.

  1. Local Scope: Variables declared inside a function can only be used within that function.

  2. Global Scope: Variables declared outside any function can be used anywhere in the script if declared global inside a function.

  3. Static Scope: Variables declared as static inside a function retain their value between function calls.

Passing Value by Reference in Function:
In PHP, you can pass a variable by reference so that the function modifies the original variable instead of a copy. Use & before the parameter.


Example:

<?php function addFive(&$num){ $num += 5; } $value = 10; addFive($value); echo $value; // Output: 15 ?>

Explanation:

  • $num is passed by reference using &.

  • The original $value is modified inside the function.

Differentiate between GET and POST.(2078)


Feature

GET

POST

Data Transmission

Sent via URL

Sent via HTTP request body

Security

Less secure, visible in URL

More secure, not visible in URL

Data Limit

Limited (URL length restriction)

No significant limit

Use

Used for retrieving data

Used for sending or submitting data

Bookmarking

Can be bookmarked

Cannot be bookmarked

Speed

Faster

Slightly slower due to larger data handling


Write about any three database function of PHP with syntax.(2078)

Three Database Functions of PHP:

  1. mysqli_connect() – Used to connect PHP with MySQL database.
    Syntax:

mysqli_connect("hostname","username","password","database");
  1. mysqli_query() – Used to execute SQL queries on the database.
    Syntax:

mysqli_query($connection, "SQL query");
  1. mysqli_fetch_assoc() – Used to fetch a result row as an associative array.
    Syntax:

$row = mysqli_fetch_assoc($result);

Explanation:

  • mysqli_connect() establishes the connection.

  • mysqli_query() runs queries like SELECT, INSERT, UPDATE.

  • mysqli_fetch_assoc() retrieves query results row by row in an associative array format.

Write HTML Code for
ABC
DE
F
 
<table border="1" width="500px" style="border-collapse: collapse;">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
    <td rowspan="2" colspan="2">E</td>
  </tr>
  <tr>
    <td>F</td>
  </tr>
</table>

What do you mean by CSS layout? Explain different types of CSS layouts with examples.

CSS Layout:
CSS layout refers to the way HTML elements are positioned and arranged on a web page using CSS. It controls the structure, alignment, and spacing of elements to create visually organized pages.

Types of CSS Layouts:

  1. Normal Flow / Static Layout:

  • Default layout where elements appear one after another in the order they are written in HTML.
    Example:

<div>Header</div> <div>Content</div> <div>Footer</div>
  1. Float Layout:

  • Uses the float property to position elements left or right. Commonly used for multi-column layouts.
    Example:

<div style="float:left; width:200px;">Sidebar</div> <div style="margin-left:210px;">Main Content</div>
  1. Flexbox Layout:

  • Uses display: flex; to align and distribute elements in a row or column.
    Example:

<div style="display:flex;"> <div>Box1</div> <div>Box2</div> <div>Box3</div> </div>
  1. Grid Layout:

  • Uses display: grid; to create a 2D layout with rows and columns.
    Example:

<div style="display:grid; grid-template-columns: 1fr 2fr;"> <div>Sidebar</div> <div>Main Content</div> </div>

Define HTML lists? Explain different types of lists with examples.

HTML Lists:
HTML lists are used to display a collection of items in an organized way. Lists make content easier to read and understand.

Types of HTML Lists:

  1. Ordered List (<ol>):

  • Displays items in a numbered order.

  • Each item is placed inside a <li> tag.

Example:

<ol> <li>Math</li> <li>Science</li> <li>English</li> </ol>
  1. Unordered List (<ul>):

  • Displays items with bullets.

  • Each item is placed inside a <li> tag.

Example:

<ul> <li>Apple</li> <li>Banana</li> <li>Mango</li> </ul>
  1. Definition List (<dl>):

  • Displays items as terms and definitions.

  • <dt> defines a term, <dd> defines its description.

Example:

<dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> </dl>

Define Cascading Style sheet. What are the advantages of using CSS in web developement?

CSS is a style sheet language used to control the presentation and layout of HTML elements on a web page. It allows web developers to define colors, fonts, spacing, positioning, and overall design separately from the HTML content.

Advantages of Using CSS in Web Development:

  1. Separation of Content and Design: HTML handles content, CSS handles styling.
  2. Consistency: Same styles can be applied across multiple web pages.
  3. Efficiency: Reduces code repetition and saves time.
  4. Faster Page Loading: CSS files are cached by browsers.
  5. Better Control: Provides precise control over layout and design.
  6. Responsive Design: Helps create web pages that work on different devices.

SIMPLE LOGIN REGISTER

✅ 1. Login / Register System (HTML + PHP + SQL)

SQL (table)

CREATE TABLE users( id INT AUTO_INCREMENT PRIMARY KEY, u VARCHAR(50), p VARCHAR(50) );

Register (register.html)

<form method="post" action="reg.php"> <input name="u"><input name="p" type="password"> <button>Register</button> </form>
<?php // reg.php $c=mysqli_connect("localhost","root","","test"); mysqli_query($c,"INSERT INTO users(u,p) VALUES('$_POST[u]','$_POST[p]')"); echo "Registered"; ?>

Login (login.html)

<form method="post" action="log.php"> <input name="u"><input name="p" type="password"> <button>Login</button> </form>
<?php // log.php $c=mysqli_connect("localhost","root","","test"); $r=mysqli_query($c,"SELECT * FROM users WHERE u='$_POST[u]' AND p='$_POST[p]'"); echo mysqli_num_rows($r)?"Login OK":"Fail"; ?>

✅ 2. Form to Accept Student Marks (HTML)

<form method="post"> <input name="m1"><input name="m2"><input name="m3"> <button>Calculate</button> </form>

✅ 3. Calculate Sum & Display (PHP)

<?php if($_POST){ $sum=$_POST['m1']+$_POST['m2']+$_POST['m3']; echo "Sum = ".$sum; } ?>


Create web form to collect user detail(name, address, phone, image, gender, academic qualification ,username and password) and store those detail in database.

<?php
$c = mysqli_connect("localhost","root","","testdb"); if(isset($_POST['s'])){
$n=$_POST['n'];
$a=$_POST['a'];
$p=$_POST['p'];
$g=$_POST['g'];
$e=$_POST['e'];
$u=$_POST['u'];
$pw=$_POST['pw']; $i=$_FILES['i']['name'];
move_uploaded_file($_FILES['i']['tmp_name'],"upload/".$i); mysqli_query($c,"INSERT INTO users VALUES('','$n','$a','$p','$i','$g','$e','$u','$pw')"); echo "Saved";
}
?> <form method="post" enctype="multipart/form-data">
<input name="n" placeholder="Name"><br>
<input name="a" placeholder="Address"><br>
<input name="p" placeholder="Phone"><br>
<input type="file" name="i"><br>
<input name="g" placeholder="Gender"><br>
<input name="e" placeholder="Education"><br>
<input name="u" placeholder="Username"><br>
<input type="password" name="pw" placeholder="Password"><br>
<input type="submit" name="s" value="Save">
</form> /* SQL
CREATE DATABASE testdb;
USE testdb;
CREATE TABLE users(
id INT AUTO_INCREMENT PRIMARY KEY,
n VARCHAR(50),a VARCHAR(100),p VARCHAR(20),i VARCHAR(100),
g VARCHAR(5),e VARCHAR(50),u VARCHAR(50),pw VARCHAR(50));

*/

PASS BY VALUE VS PASS BY REFERENCE

Point

Pass by Value

Pass by Reference

Definition

Copy पठाइन्छ

Address पठाइन्छ

Symbol

& हुँदैन

& प्रयोग हुन्छ

Example Code

php function test($x){ $x = $x + 5; } $a = 10; test($a); echo $a; // 10

php function test(&$x){ $x = $x + 5; } $a = 10; test($a); echo $a; // 15

Output

10

15

Original Value

Change हुँदैन

Change हुन्छ

mysql_fetch_row() vs mysql_fetch_assoc() vs mysql_fetch_array()

Function

Return Type

Access Method

Example Code

Output

mysql_fetch_row()

Indexed Array

$row[0], $row[1]

php $row = mysql_fetch_row($res); echo $row[0];

Numeric index मात्र

mysql_fetch_assoc()

Associative Array

$row['name']

php $row = mysql_fetch_assoc($res); echo $row['name'];

Column name बाट access

mysql_fetch_array()

Both (Numeric + Assoc)

$row[0] & $row['name']

php $row = mysql_fetch_array($res); echo $row[0]; echo $row['name'];

दुवै तरिकाले