Web Technology Model Question
Section A
Long Answer Questions
Attempt any Two questions. [2*10=20]
1. Explain the structure of HTML file with example. How is HTML different from CSS? Explain three different ways for inserting CSS code into an HTML file.
HTML (Hyper Text Markup Language) is the standard markup language for creating Web pages. It describes the structure of a Web page.
Structure of HTML document
Every HTML document consists of four basic structure elements:
html, head, title, and body. Each of these is explored in detail below:
1. Html Element
- Start tag:
<html>- First tag in the document which declares you are writing an HTML element. - End tag:
</html>- Last tag in the document.
2. Head Element
- Start tag:
<head>- Second tag, follows the<html>tag, and starts the head section, which describes the document. - End tag:
</head>- Fifth tag, follows the</title>tag and closes the head section.
3. Title Element
- Start tag:
<title>- Third tag, follows the<head>tag, and contains the title you want for the document. This information will be displayed in the title bar at the top of the browser window. - End tag:
</title>- Fourth tag, immediately follows, without any spaces, the title you want for the document and precedes the</head>tag.
4. Body Element
- Start tag:
<body>- Sixth tag, follows the</head>tag to denote starting the content of the document. - End tag:
</body>- Next to last tag in the document, follows the end of the document content and precedes the</html>tag.
E.g.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Difference Between HTML and CSS
1. HTML is the basic markup language which describes the content and structure of the web pages. On the other hand, CSS is the extension to the HTML which modifies the design and display of the web pages.
2. HTML file can contain CSS code while CSS stylesheets can never contain HTML code in it.
3. HTML comprises of tags surrounding content. Whereas CSS comprised of selectors succeeded by a declaration block.
Ways for inserting CSS code into an HTML file
1. Inline CSS
- An inline CSS is used to apply a unique style to a single HTML element.
- An inline CSS uses the style attribute of an HTML element.
- An internal CSS is used to define a style for a single HTML page.
- An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
- An external style sheet is used to define the style for many HTML pages.
- To use an external style sheet, add a link to it in the <head> section of each HTML page.
2. Write HTML Script for creating a form containing text box for username, password field for password, and checkbox for Education fields. Write a JavaScript function for the validation of the form for all of the fields as required. In addition length of username should at least 4, the password should start with digit and end with $.
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="form.css">
<title>Form</title>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<div class="form">
<h2>Enter Details</h2>
<form action=" " onsubmit="return validate()">
User Name: <input id="uname" type="text" name="username" required><br><br>
Password: <input id="upass" type="password" name="password" required><br><br>
Education Field:
<input type="checkbox" name="field[]" value="csit"> BscCSIT
<input type="checkbox" name="field[]" value="bca"> BCA
<input type="checkbox" name="field[]" value="bit"> BIT <br><br>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
// form.css
body{
margin: 0;
padding:0;
background-image: url(form.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.form {
padding: 20% 40%;
}
// validate.js
function validate(){
var username = document.getElementById('uname');
if(username.value.trim().length < 4 ){
username.style.border = "solid 1px red";
alert("Username Should Be at least 4");
return false;
}
const password = document.getElementById('upass');
var regx = /[0-9][a-zA-Z0-9]*[a-zA-Z0-9][$]/;
if(!regx.test(password.value)){
password.style.border = 'solid 1px red';
alert("Password should start with digit and end with $");
return false;
}
var education = document.getElementsByName('field[]');
for(var i=0;i<education.length;i++){
if(education[i].checked){
continue;
}
alert("Please Select Your educational field.")
return false;
}
return true;
}
3. Prepare a form that should contain text box, selection list and radio button. Write PHP script to store data from the form into database using database connection and appropriate query.
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Registration</title>
</head>
<body>
<form method="POST" action="formSubmit.php">
<div>
<label for="name">Please enter your name: </label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="email">Please enter email: </label>
<input type="text" name="email" id="email">
</div>
<div>
<label for="country">Choose your Country: </label>
<select name="country">
<option value="nepal">Nepal</option>
<option value="china">China</option>
<option value="india">India</option>
<option value="usa">USA</option>
</select>
</div>
<div>
<label for="gender">Gender: </label>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</div>
<div>
<input type="submit" name="signup" value="Signup">
</div>
</form>
</body>
</html>
//formSubmit.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "webtech";
$tablename = "users";
if($_SERVER["REQUEST_METHOD"] == "POST"){
$name = $_POST['name'];
$email = $_POST['email'];
$country = $_POST['country'];
$gender = $_POST['gender'];
//connect to database
$conn = mysqli_connect($servername, $username, $password) or die(mysql_error()); //Connect to server
mysqli_select_db($conn, $dbname) or die("Cannot connect to database"); //Connect to database
// Insert the values into database
mysqli_query($conn, "INSERT INTO ".$tablename."(name, email, country, gender) VALUES ('$name', '$email', '$country', '$gender')");
Print '<script>alert("Congrats! Your Submission is Successfully Registered!");</script>';
?>
Section B
Short Answer Questions
Attempt any Eight questions. [8*5=40]
4. Describe client server architecture with its types.
Client server architecture consists of two kinds of computers: clients and servers. Clients are the computers that that do not share any of its resources but requests data and other services from the server computers and server computers provide services to the client computers by responding to client computers requests.
Client/Sever architecture can be of different model based on the number of layers it holds. Some of them are;
1. 2-Tier Architecture
2-tier architecture is used to describe client/server systems where the client requests resources and the server responds directly to the request, using its own resources. This means that the server does not call on another application in order to provide part of the service. It runs the client processes separately from the server processes, usually on a different computer.
2. 3-Tier Architecture
In 3-tier architecture, there is an intermediary level, meaning the architecture is generally split up between:
– A client, i.e. the computer, which requests the resources, equipped with a user interface (usually a web browser) for presentation purposes
– The application server (also called middleware), whose task it is to provide the requested resources, but by calling on another server
– The data server, which provides the application server with the data it requires.
3. N-Tier Architecture (multi-tier)
N-tier architecture (with N more than 3) is really 3 tier architectures in which the middle tier is split up into new tiers. The application tier is broken down into separate parts. These parts are differs from system to system.
5. Write a HTML script to insert audio file in a HTML page? Use the controls and autoplay properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio</title>
</head>
<body>
<audio controls autoplay>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
6. What is CSS selector? Compare id selector with class selector.
A CSS selector is the part of a CSS rule set that actually selects the content we want to style. In CSS, selectors are used to target the HTML elements on our web pages that we want to style.
E.g.
Comparison between id selector and class selector
| id selector | class selector |
| A selector in CSS that styles the element with a specified id. | A selector in CSS that styles the element with a specified class. |
Syntax is: #id{ css declarations; } | Syntax is: .class{ css declarations; } |
| Used to apply styling to one specific element. | Used to apply styling to multiple elements. |
| It is less used. | It is most used on several elements. |
E.g. #main { background: #000; padding: 10px; color: #fff; width: 100px; } <div id="main"> Welcome </div> | E.g. .main { background: #000; padding: 10px; color: #fff; width: 100px; } <div class="main"> Welcome </div> |
7. Write a JavaScript code to create an array of elements {csit, it, bca, bim}. Display the array in body of HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Array Inside Body</title>
</head>
<body>
<div class="array">
</div>
<script>
var array = ["csit","it","bca","bim"];
var dispArea = document.getElementsByClassName('array')[0];
dispArea.innerHTML = array;
</script>
</body>
</html>
8. Write a HTML script containing use of media query for changing the background-color of html page to black if the viewport is 600 pixels wide or more than that otherwise if the viewport is less than 500 pixels, the background-color should be changed to red.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Changing Background</title>
<style>
@media screen and (max-width: 499px){
body{
background-color: red;
}
}
@media screen and (min-width: 600px){
body{
background-color: black;
}
}
</style>
</head>
<body>
<p> Body part of the HTML </p>
</body>
</html>
9. What is XML namespace? How it is used in XML files?
XML Namespace is a mechanism to avoid name conflicts by differentiating elements or attributes within an XML document that may have identical names, but different definitions.
Consider two XML fragment:
//1.xml
<table>
<tr>
<td>Apples</td>
<td>Bananas</td>
</tr>
</table>
//2.xml
<table>
<name>African Coffee Table</name>
<width>80</width>
<length>120</length>
</table>
If these XML fragments were added together, there would be a name conflict. Both contain a <table> element, but the elements have different content and meaning.
XML namespace is used in XML files as:
1) Using a prefix
Name conflicts in XML can easily be avoided using a name prefix.
E.g.
<h:table>
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>
<f:table>
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
In this example, there will be no conflict because the two <table> elements have different names.
2) Using xmlns Attribute
10. Discuss different types of jQuery Selectors with examples.
jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more.
All selectors in jQuery start with the dollar sign and parentheses: $().
The different types of jQuery selectors are:
1. The element Selector
The jQuery element selector selects elements based on the element name.
E.g. When a user clicks on a button, all <p> elements will be hidden:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
2. The #id Selector
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. To find an element with a specific id, write a hash character, followed by the id of the HTML element:
E.g. When a user clicks on a button, the element with id="test" will be hidden:
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
3. The .class Selector
The jQuery .class selector finds elements with a specific class. To find elements with a specific class, write a period character, followed by the name of the class.
E.g. When a user clicks on a button, the elements with class="test" will be hidden:
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
11. Write a PHP script that illustrates handling of cookie.
<!-- Creating and retrieving the cookie -->
<?php
$cookie_name = "user";
$cookie_value = "college_note";
//86400 = 1 day
setcookie($cookie_name , $cookie_value, time()+(86400*30),"/");
if(!isset($_COOKIE[$cookie_name])){
echo "Cookie named ' " . $cookie_name . " ' is not set!";
}else{
echo "Cookie ' " . $cookie_name . " ' is set!<br>";
echo "Value is : " . $_COOKIE[$cookie_name];
}
?>
<!-- Deleting the Cookie -->
<?php
//set the expiration date to one hour ago
setcookie("user","",time()-3600);
?>
<html>
<body>
<?php
echo "Cookie 'user' is deleted.";
?>
</body>
</html>
12. Write HTML script for displaying div with following output. The div should be floating right.
<!DOCTYPE html>
<html lang="en">
<head>
<title>List</title>
</head>
<body>
<div class="list" style="float: right; padding-right: 50px; border: 1px solid;">
<h2>CSIT</h2>
<ol>
<li>PMC</li>
<li>BMC</li>
</ol>
<h2>BCA</h2>
<ul>
<li>TC</li>
<li>PPL</li>
</ul>
</div>
</body>
</html>