Web Technology Practice Set: Detailed HTML Answers with Code
1. What are the core Internet protocols used in web communication?
Core Protocols:
HTTP/HTTPS: Transfers web content between browser and server.
FTP: Transfers files over the network.
TCP/IP: Ensures data delivery across the internet.
DNS: Converts domain names into IP addresses.
SMTP/IMAP/POP: Handle sending and receiving emails.
2. Explain the purpose and structure of HTML5.
Purpose:
HTML5 provides a semantic structure to web documents, supports multimedia (audio, video), and introduces APIs like geolocation, offline
storage, and canvas.
Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Structure</title>
</head>
<body>
<header><h1>Welcome</h1></header>
<nav>Navigation Bar</nav>
<main>
<section>Main content</section>
<aside>Sidebar</aside>
</main>
<footer>© 2025</footer>
</body>
</html>
3. List the key elements of an HTML5 document.
<!DOCTYPE html>: Defines the document type.
<html>: Root element.
<head>: Metadata, links, title.
<body>: Visible content.
Semantic tags: <header>, <nav>, <main>, <section>, <article>, <footer>
4. Which form elements are supported in HTML5?
New input types: email, url, tel, number, range, date, time, search, color
Other elements: <datalist>, <output>, <progress>, <meter>
<form>
<input type="email" placeholder="Email">
<input type="number" placeholder="Age">
<input type="range" min="0" max="100">
<input type="color">
</form>
5. Describe the components of a basic HTML5 document.
1.
Doctype: <!DOCTYPE html>
2.
Head: Includes metadata, scripts, styles
3.
Body: Contains visible content
4.
Semantic structure: header, main, section, etc.
6. How does a web server function in the client-server model?
Client (browser) sends an HTTP request.
Server receives request, processes it, and sends back a response.
Example:
GET /[Link] HTTP/1.1
Host: [Link]
7. Define XHTML and explain its syntax rules.
XHTML (Extensible HTML) is a stricter version of HTML that follows XML syntax rules.
Syntax Rules:
Tags must be properly nested.
All tags must be closed.
Attributes must be quoted.
Tag names must be lowercase.
Example:
<img src="[Link]" alt="desc" />
8. Compare the syntax of HTML5 and XHTML.
Feature HTML5 XHTML
Tag Closing Optional Mandatory
Case Sensitivity Not sensitive Case-sensitive
Doctype Simple Complex
Nesting Rules Lenient Strict
9. What are the different types of CSS, and how are they used?
1.
Inline CSS: Directly within HTML tags
<p style="color: red;">Text</p>
2.
Internal CSS: Inside <style> tag in the head
<style>
p { color: blue; }
</style>
3.
External CSS: Separate file linked with <link>
<link rel="stylesheet" href="[Link]">
10. Explain the structure of XML, DTD, and namespaces.
XML: Markup language for data storage and transport.
<book>
<title>Web Tech</title>
</book>
DTD (Document Type Definition): Defines structure.
<!DOCTYPE book [
<!ELEMENT book (title)>
<!ELEMENT title (#PCDATA)>
]>
Namespaces: Avoid name conflicts.
<book xmlns:h="[Link]
<h:title>HTML Book</h:title>
</book>
11. Compare static and dynamic websites.
Static Website Dynamic Website
Fixed content Content changes per request
No server-side scripting Uses scripts (PHP, [Link])
Fast loading Personalized content
12. How would you convert a static website into a dynamic one?
Integrate server-side language (e.g., PHP)
Connect to a database (e.g., MySQL)
Replace hard-coded content with dynamic templates
Example: Use PHP to fetch user data:
<?php echo "Welcome, " . $username; ?>
13. Design a responsive webpage using Bootstrap’s grid system.
<!DOCTYPE html>
<html>
<head>
<link href="[Link] rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">Left Column</div>
<div class="col-md-6">Right Column</div>
</div>
</div>
</body>
</html>
14. Build a static website for a restaurant using HTML5 and XHTML.
<!DOCTYPE html>
<html xmlns="[Link]
<head>
<title>My Restaurant</title>
</head>
<body>
<header><h1>Restaurant Name</h1></header>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</nav>
<main>
<section>
<h2>Our Menu</h2>
<p>Pizza, Pasta, Salad</p>
</section>
</main>
<footer>Contact us: 123-456</footer>
</body>
</html>
15. Develop a user registration form with HTML5 form elements.
<form>
<label for="name">Name:</label>
<input type="text" id="name" required><br>
<label for="email">Email:</label>
<input type="email" id="email" required><br>
<label for="password">Password:</label>
<input type="password" id="password" required><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob"><br>
<label for="gender">Gender:</label>
<select id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
<input type="submit" value="Register">
</form>
(HTML answers retained above)
CSS Section
16. Create a personal portfolio site using HTML5, CSS3, and Bootstrap.
Create sections: About, Projects, Skills, Contact
Use Bootstrap grid for layout
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
<link href="[Link] rel="stylesheet">
<style>
body { font-family: Arial; }
.section { padding: 40px 0; }
</style>
</head>
<body>
<header class="text-center p-4 bg-dark text-white">
<h1>John Doe</h1>
<p>Web Developer</p>
</header>
<section class="section bg-light">
<div class="container">
<h2>About Me</h2>
<p>I create responsive websites.</p>
</div>
</section>
</body>
</html>
17. Analyse a case study of an online blog built with HTML5, CSS3, and Bootstrap.
Layout: Header, blog posts section, sidebar, footer
Uses Bootstrap components: Cards, Containers, Grids
CSS3 used for styling (shadows, borders, transitions)
18. How do CSS3 animations enhance web interactivity?
Make UI dynamic, smooth, and engaging
Used for loaders, transitions, slides
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.box { animation: fadeIn 2s ease-in-out; }
19. What is the CSS box model, and what properties does it include?
Includes: content, padding, border, margin
.box {
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}
20. How does the Bootstrap grid system support responsive design?
12-column layout
Responsive breakpoints: col-sm-, col-md-, etc.
<div class="row">
<div class="col-sm-6 col-md-4">Box 1</div>
<div class="col-sm-6 col-md-8">Box 2</div>
</div>
21. How do CSS3 selector strings and box models improve styling?
Complex selectors target specific elements: div > p, ul li:first-child
Box model provides layout control and spacing
22. What are the differences between CSS's id and class selectors?
Feature id class
Uniqueness Unique per page Reusable
Syntax #idName .className
Use Specific elements Styling multiple items
23. How do CSS3 3D transformations and animations improve user experience?
Provide realistic interactions like flipping cards
.card {
transform: rotateY(180deg);
transition: transform 0.6s;
}
24. Compare the use of Canvas and SVG for graphics in HTML5.
Feature Canvas SVG
Type Raster graphics Vector graphics
Scalability Pixel-based, not scalable Infinitely scalable
Use Case Games, visualizations Charts, icons, UI elements
25. How does the Bootstrap framework simplify responsive web design?
Pre-built classes for layout, components
Mobile-first grid system
Cross-browser compatibility
26. What are the advantages and limitations of using Bootstrap?
Advantages:
Faster development
Consistent styling
Responsive design
Limitations:
Heavy code
Generic appearance
27. How do CSS properties influence webpage layout and appearance?
Properties like margin, padding, display, flex, and grid control structure and design
.container {
display: flex;
justify-content: space-between;
}
28. What is the role of namespaces in XML?
Prevent naming conflicts in XML documents
<book xmlns:h="[Link]
<h:title>HTML Guide</h:title>
</book>
29. How do XML Schema, DOM, XSL, and XSLT transform XML data?
Schema: Validates data structure
DOM: Tree-like structure to access/manipulate XML
XSL/XSLT: Transform XML to HTML or other formats
30. What challenges arise when combining DTD and namespaces in XML?
DTD does not support XML namespaces directly, causing conflicts during validation
31. Create an XML document with DTD and namespaces.
<!DOCTYPE note [
<!ELEMENT note (to, from)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
]>
<note xmlns="[Link]
<to>Alice</to>
<from>Bob</from>
</note>
32. How would you convert XML data into another format using XSLT?
<?xml-stylesheet type="text/xsl" href="[Link]"?>
<catalog>
<book>
<title>XML Basics</title>
</book>
</catalog>
33. Assess the impact of HTML5 media elements on user experience.
<audio> and <video> allow native media playback
Enhance UX without plugins
34. Evaluate the effectiveness of XML Schema and XSLT for data handling.
Schema ensures valid XML data
XSLT presents XML in readable formats like HTML, PDF
35. Justify the use of JavaScript operators in data manipulation.
Perform calculations (+, -, *)
Compare values (==, ===)
Assign values (=)
36. Critique the use of CSS3 3D transformations in web design.
Pros: Enhance interactivity
Cons: May reduce accessibility, GPU-heavy
37. Defend the importance of JavaScript data types in development.
Control variable behavior
Prevent errors
Aid in validation and logic
38. How have web technologies evolved over time?
Static pages Dynamic scripting AJAX SPAs Progressive Web Apps
39. Calculate the total width of a CSS box model given specific dimensions.
Box width = content + padding + border + margin
Example:
content: 200px
padding: 10px
border: 5px
margin: 15px
Total width = 200 + 102 + 52 + 15*2 = 260px
40. Determine the number of columns in Bootstrap’s grid system.
12 columns in one row by default
41. Style a webpage using CSS3 selectors and box models.
<style>
.card:hover {
background-color: lightblue;
padding: 20px;
border: 1px solid #000;
}
</style>
<div class="card">Hover me</div>
(HTML and CSS sections retained above)
JavaScript Section
42. Write a JavaScript program to manipulate real-world data.
Example: Calculate total price from a list of products.
const products = [
{ name: "Phone", price: 799 },
{ name: "Laptop", price: 1200 },
{ name: "Headphones", price: 150 }
];
const total = [Link]((sum, item) => sum + [Link], 0);
[Link]("Total: $" + total);
43. What are JavaScript’s data types, and how are they used?
Primitive: String, Number, Boolean, null, undefined, BigInt, Symbol
Reference: Object, Array, Function
Example:
let name = "Alice"; // String
let age = 25; // Number
let hobbies = ["reading", "coding"]; // Array
44. How do JavaScript operators manipulate data?
Arithmetic: +, -, *, /, %
Assignment: =, +=, -=
Comparison: ==, ===, !=, <, >
Logical: &&, ||, !
Example:
let x = 10;
x += 5; // 15
45. Explain JavaScript’s try-catch error handling with an example.
try {
let result = unknownVar + 5;
} catch (error) {
[Link]("An error occurred:", [Link]);
}
Prevents program from crashing due to unexpected errors.
46. How would you write a function to calculate the remainder using the modulus
operator?
function getRemainder(a, b) {
return a % b;
}
[Link](getRemainder(10, 3)); // 1
47. Predict the output of a JavaScript code snippet combining strings and numbers.
[Link]("5" + 3); // "53"
[Link](5 + "3"); // "53"
[Link]("5" - 3); // 2
+ causes string concatenation; - converts to number.
48. How do JavaScript event handlers work? Provide examples.
They listen for and respond to user actions.
<button onclick="showMessage()">Click Me</button>
<script>
function showMessage() {
alert("Button clicked!");
}
</script>
49. Create a simple calculator using JavaScript operators.
<input id="a" type="number">
<input id="b" type="number">
<select id="op">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<button onclick="calculate()">Calculate</button>
<p id="result"></p>
<script>
function calculate() {
const a = parseFloat([Link]("a").value);
const b = parseFloat([Link]("b").value);
const op = [Link]("op").value;
let res;
switch(op) {
case '+': res = a + b; break;
case '-': res = a - b; break;
case '*': res = a * b; break;
case '/': res = a / b; break;
}
[Link]("result").textContent = `Result: ${res}`;
}
</script>
50. How do JavaScript data types affect web application functionality?
Proper type usage prevents runtime errors.
Influences logic control and memory management.
Enables accurate user input validation and calculations.
Example:
let age = "30";
if (typeof age === "string") {
age = Number(age); // Convert to number
}
Now the full HTML, CSS, and JavaScript sections are complete. Ready to export the full document as a PDF?