10 Questions × 2 Marks = 20 Marks | Answer ALL
6 Questions × 5 Marks = 30 Marks | Answer ANY FOUR (200–250 words)
4 Questions × 10 Marks = 40 Marks | Answer ANY THREE (400–500 words)
HTML is the standard markup language for creating web pages. "Hyper Text" refers to text with hyperlinks, and "Markup Language" means it uses tags to annotate content structure. HTML is not a programming language — it defines the structure and layout of web content.
The color property sets the text color. There is no text-color or
font-color property in CSS. Example: p { color: #333; } or
p { color: red; }
The anchor tag <a> creates hyperlinks using the href attribute.
Example: <a href="https://example.com">Click here</a>. The
<link> tag is for linking stylesheets, not creating clickable links.
The <link> tag with rel="stylesheet" and href attributes
links an external CSS file. It must be placed in the <head> section. This is the
standard method for applying external styles.
document.write() writes HTML content directly into the document during page loading.
While useful for learning, it's rarely used in production because calling it after the page has
loaded overwrites the entire page content.
CSS stands for Cascading Style Sheets. "Cascading" refers to the priority mechanism that determines which styles apply when multiple rules target the same element (specificity, importance, source order).
<ul> creates an unordered (bulleted) list. <ol> creates an
ordered (numbered) list. <dl> creates a description list. List items are wrapped
in <li> tags.
The <title> tag is placed inside <head>. It defines the
document title shown in the browser tab and is important for SEO and bookmarks.
=== checks both value AND type (strict equality). == checks only value
after type coercion (loose equality). Example: 5 == "5" is true, but
5 === "5" is false because types differ (number vs string).
margin controls the space outside an element's border, creating distance between
elements. padding controls space inside the border. gap is for
flexbox/grid spacing. spacing is not a CSS property.
📝 Each answer below is written to the 200–250 word exam requirement
HTML elements are classified into two main display categories: block-level elements and inline elements. Understanding the difference is fundamental to controlling page layout and structure.
Block-level Elements: These elements always start on a new line and stretch to fill
the full width of their parent container. They create a "block" of content that takes up the entire
horizontal space available. Other content is pushed to the next line. Block elements can contain
both inline elements and other block elements. Common examples include: <div>
(generic container), <p> (paragraph), <h1> to
<h6> (headings), <ul> and <ol> (lists),
<table>, <form>, <header>,
<footer>, and <section>. Block elements accept width, height,
margin, and padding properties in all directions.
Inline Elements: These elements do not start on a new line — they flow within the
surrounding text content. They only take up as much width as their content requires. Inline elements
can only contain text and other inline elements, not block-level elements. Common examples include:
<span> (generic inline container), <a> (hyperlink),
<strong> (bold text), <em> (italic text),
<img> (image), <input>, and <label>. Inline
elements accept horizontal margin and padding but not vertical margin and height.
Key Difference: Block elements create their own line; inline elements flow within
text. The CSS display property can change this behavior:
display: inline-block combines both — elements flow inline but accept block-level
dimensions.
The CSS Box Model is a fundamental concept that defines how every HTML element is rendered on a web page. According to this model, every element is treated as a rectangular box consisting of four layers from inside to outside: content, padding, border, and margin.
1. Content: The innermost area where the actual content (text, images, child
elements) is displayed. The size of this area is controlled by the width and
height properties. For example: width: 300px; height: 200px; sets the
content area to 300 pixels wide and 200 pixels tall.
2. Padding: The transparent space between the content and the border. Padding adds
breathing room inside the element, making content appear less cramped. It can be set uniformly
(padding: 20px;) or individually
(padding-top: 10px; padding-right: 15px;). Padding is inside the border and shares the
element's background color.
3. Border: The line surrounding the padding and content. Borders can have specific
width, style, and color: border: 2px solid #333;. Border styles include solid, dashed,
dotted, double, and none.
4. Margin: The transparent space outside the border that separates the element from
other elements. Margins create spacing between elements: margin: 20px; adds 20 pixels
of space around the element. Adjacent vertical margins collapse — the larger margin wins.
Total Element Width Calculation: By default (content-box model), the total width
equals: width + padding-left + padding-right + border-left + border-right + margin-left +
margin-right. Using box-sizing: border-box; makes width include padding and border,
which is the preferred modern approach as it simplifies layout calculations.
JavaScript is a dynamically typed language, meaning variables can hold values of any data type without explicit type declaration. JavaScript has seven primitive data types and one non-primitive type, each serving specific purposes in programming.
Primitive Data Types:
1. Number: Represents both integers and floating-point numbers. Example:
let age = 25; let price = 99.99; JavaScript also has special numeric values:
Infinity, -Infinity, and NaN (Not a Number).
2. String: Represents text enclosed in single quotes, double quotes, or backticks.
Example: let name = "John"; let greeting = `Hello ${name}`; Backticks enable template
literals with embedded expressions.
3. Boolean: Represents a logical value — either true or
false. Example: let isActive = true; let isLoggedIn = false; Commonly used
in conditions and comparisons.
4. Undefined: A variable that has been declared but not assigned a value has the
value undefined. Example: let x; console.log(x); // undefined
5. Null: Represents an intentional absence of any value. Example:
let user = null; Unlike undefined (which means "not yet assigned"), null explicitly
means "empty" or "nothing."
6. Symbol: Represents a unique identifier. Created using Symbol(). Used
mainly as unique property keys in objects.
7. BigInt: Represents integers of arbitrary precision. Created by appending
n: let big = 123456789012345678901234567890n;
Non-Primitive (Reference) Type:
Object: A collection of key-value pairs. Arrays and functions are also objects in
JavaScript. Example: let person = { name: "Alice", age: 30 }; The typeof
operator can be used to check a value's data type.
CSS selectors are patterns used to select and target specific HTML elements for styling. Different types of selectors provide varying levels of specificity and flexibility, allowing developers to apply styles precisely to the elements they want.
1. Element (Type) Selector: Targets all instances of a specific HTML element.
Example: p { color: blue; } — this styles ALL paragraph elements on the page. It has
the lowest specificity among basic selectors.
2. Class Selector: Targets elements with a specific class attribute, prefixed with a
dot. Example: .highlight { background: yellow; } matches
<p class="highlight">. Multiple elements can share the same class, and an element
can have multiple classes.
3. ID Selector: Targets a single unique element with a specific ID, prefixed with a
hash. Example: #header { font-size: 24px; } matches
<div id="header">. IDs must be unique within a document and have higher
specificity than classes.
4. Universal Selector: The asterisk * selects all elements. Example:
* { margin: 0; padding: 0; } — commonly used for CSS reset to remove default browser
styles.
5. Attribute Selector: Targets elements based on their attributes. Example:
input[type="text"] { border: 1px solid gray; } — this styles only text input fields.
6. Descendant Selector: Targets elements nested inside other elements. Example:
div p { color: green; } — selects all paragraphs inside any div element.
7. Pseudo-class Selector: Targets elements in a specific state. Example:
a:hover { color: red; } — styles links when the mouse hovers over them. Other
pseudo-classes include :first-child, :nth-child(), and
:focus.
The Document Object Model (DOM) is a programming interface provided by the browser that represents an HTML document as a hierarchical tree structure. Each HTML element, attribute, and text node becomes an object (node) in this tree. The DOM allows programming languages, primarily JavaScript, to dynamically access, modify, add, and delete HTML elements and their content after the page has loaded.
DOM Structure: When a browser loads an HTML page, it creates a DOM tree. The
document object sits at the top, followed by the <html> element, which branches
into <head> and <body>. Each element inside body becomes a
child node, and nested elements become grandchild nodes. Text within elements becomes text nodes.
JavaScript DOM Access Methods:
document.getElementById("id") — selects one element by its ID.
document.getElementsByClassName("class") — returns a collection of elements with the
specified class. document.querySelector(".class") — returns the first matching element
using CSS selector syntax. document.querySelectorAll("p") — returns all matching
elements.
DOM Manipulation Examples:
// Change text content
document.getElementById("title").textContent = "New Title";
// Change styles
document.querySelector(".box").style.backgroundColor = "blue";
// Create and add new elements
let newPara = document.createElement("p");
newPara.textContent = "Hello World!";
document.body.appendChild(newPara);
// Remove an element
let element = document.getElementById("old");
element.remove();
The DOM enables dynamic, interactive web pages — forms that validate in real-time, content that updates without page reloads, and responsive user interfaces.
When submitting HTML forms, data can be sent to the server using two HTTP methods: GET and POST. Each method has distinct characteristics, advantages, and use cases that determine when it should be used.
GET Method: The GET method appends form data to the URL as query string parameters,
visible in the address bar. The data format is: action.php?name=John&age=25. GET
requests have a URL length limit (approximately 2048 characters), which restricts the amount of data
that can be sent. Since data is visible in the URL, GET should never be used for sensitive
information like passwords or credit card numbers. GET requests are cached by browsers and can be
bookmarked, making them ideal for search queries and shareable URLs.
POST Method: The POST method sends form data in the HTTP request body, not visible in the URL. There is no practical limit on the amount of data that can be sent. POST requests are more secure than GET because the data is not exposed in the URL, browser history, or server logs. However, POST requests cannot be bookmarked or cached. POST is essential for submitting forms that include sensitive data, large amounts of data, or file uploads.
<!-- GET method -->
<form action="search.php" method="GET">
<input type="text" name="query">
<button type="submit">Search</button>
</form>
<!-- POST method -->
<form action="register.php" method="POST">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit">Register</button>
</form>
Key Differences: Use GET for data retrieval (searching, filtering, pagination). Use POST for data submission (registration, login, file upload). GET is idempotent (same request produces same result); POST can modify server state.
📝 Each answer below is written to the 400–500 word exam requirement
An HTML registration form is a critical component of web applications, allowing users to submit information to a server for account creation, event registration, or data collection. HTML provides numerous form elements that enable the collection of various types of user input. Below is a detailed example of a registration form with explanations of each element used.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration Form</title>
</head>
<body>
<h1>User Registration</h1>
<form action="register.php" method="POST">
<label for="name">Full Name:</label>
<input type="text" id="name" name="fullname" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="password" required>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<label for="course">Course:</label>
<select id="course" name="course">
<option value="bca">BCA</option>
<option value="bsc">BSc</option>
<option value="mca">MCA</option>
</select>
<label>Hobbies:</label>
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="sports"> Sports
<label for="bio">About You:</label>
<textarea id="bio" name="bio" rows="4"></textarea>
<button type="submit">Register</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
Explanation of Form Elements:
<form>: The container element that wraps all form controls. The
action attribute specifies the URL where form data is sent on submission. The
method attribute specifies the HTTP method — POST is used here because registration
involves sensitive data like passwords.
<label>: Associates descriptive text with a form control using the
for attribute, which matches the control's id. Labels improve
accessibility for screen readers and allow users to click the label to focus the associated input.
<input type="text">: Creates a single-line text field for plain text input
like names. The required attribute prevents form submission if the field is empty.
<input type="email">: Creates a text field with built-in email validation. The browser checks for a valid email format (containing @ and domain) before allowing submission.
<input type="password">: Creates a text field that masks the entered characters as dots or asterisks, hiding sensitive information from onlookers.
<input type="date">: Provides a date picker widget that allows users to select a date from a calendar interface, ensuring consistent date format.
<input type="radio">: Creates radio buttons for selecting one option from a
group. All radio buttons with the same name attribute belong to the same group — only
one can be selected at a time.
<select> and <option>: Creates a dropdown menu allowing users to select
one option from a predefined list. Each <option> element defines one choice, with
a display text and a submitted value.
<input type="checkbox">: Creates checkboxes for selecting multiple options independently. Unlike radio buttons, multiple checkboxes with the same name can be selected simultaneously.
<textarea>: Creates a multi-line text input area for longer text entries like
comments, addresses, or biographical information. The rows attribute sets the visible
height.
<button type="submit">: Creates a button that submits the form data to the server. <button type="reset"> clears all form fields to their default values.
CSS Flexbox (Flexible Box Layout) is a powerful one-dimensional layout model designed to arrange items within a container efficiently, even when their sizes are unknown or dynamic. Flexbox distributes space along a single axis (horizontal or vertical), making it ideal for navigation bars, card layouts, centering content, and creating responsive designs that adapt to different screen sizes.
Enabling Flexbox: To activate flexbox, set display: flex; on the parent
container. This makes all direct children of the container become "flex items" that are
automatically arranged in a row by default.
.container {
display: flex;
}
Flex Container Properties (Parent):
1. flex-direction: Defines the main axis along which items are placed. Values:
row (left to right, default), row-reverse (right to left),
column (top to bottom), column-reverse (bottom to top). This is the most
fundamental property as it determines the primary direction of the layout.
2. justify-content: Controls alignment along the main axis. Values:
flex-start (items packed to start), flex-end (packed to end),
center (centered), space-between (equal space between items),
space-around (equal space around each item), space-evenly (equal space
between and at edges).
3. align-items: Controls alignment along the cross axis (perpendicular to main
axis). Values: stretch (default, items stretch to fill container),
flex-start, flex-end, center, baseline (aligned
by text baseline).
4. flex-wrap: Controls whether items wrap to the next line when the container runs
out of space. Values: nowrap (default, single line), wrap (items wrap to
next line), wrap-reverse (items wrap to previous line).
5. gap: Sets the spacing between flex items without using margins. Example:
gap: 20px; adds 20 pixels between each item.
Flex Item Properties (Children):
1. flex-grow: Determines how much a flex item should grow relative to other items
when extra space is available. Example: flex-grow: 1; means the item takes up equal
share of remaining space. flex-grow: 2; takes twice as much space as items with
flex-grow: 1;.
2. flex-shrink: Determines how much an item should shrink relative to other items
when the container is too small. Default is 1. Setting flex-shrink: 0; prevents an item
from shrinking.
3. flex-basis: Sets the initial size of a flex item before remaining space is
distributed. Similar to width but respects the flex axis. Example: flex-basis: 200px;.
4. align-self: Overrides the container's align-items for a specific
item. Allows individual items to have different cross-axis alignment.
5. order: Controls the visual order of flex items without changing the HTML source order. Default is 0. Items with lower order values appear first.
Practical Example — Navigation Bar:
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background: #333;
}
.nav-links {
display: flex;
gap: 20px;
list-style: none;
}
Flexbox is one of the most important CSS layout tools in modern web development. It simplifies complex alignment tasks that previously required floats, positioning, and table-based layouts, and it works seamlessly with responsive design principles.
JavaScript functions, events, and event handling form the core of interactive web development. Functions encapsulate reusable blocks of code, events represent user interactions or browser actions, and event handling connects the two — executing specific functions in response to specific events.
JavaScript Functions:
A function is a reusable block of code designed to perform a specific task. Functions are defined once and can be called (invoked) multiple times. JavaScript supports several ways to define functions:
1. Function Declaration:
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("Alice")); // "Hello, Alice!"
2. Function Expression:
const add = function(a, b) {
return a + b;
};
console.log(add(3, 5)); // 8
3. Arrow Function (ES6):
const multiply = (a, b) => a * b; console.log(multiply(4, 6)); // 24
Functions can accept parameters (inputs), perform operations, and return values. Functions that don't
explicitly return a value return undefined.
JavaScript Events:
Events are actions or occurrences that happen in the browser, triggered by user interaction or the browser itself. Common events include:
Mouse Events: click (element is clicked), dblclick
(double-clicked), mouseover (mouse enters element), mouseout (mouse leaves
element).
Keyboard Events: keydown (key is pressed), keyup (key is
released), keypress (character key is pressed).
Form Events: submit (form is submitted), change (input
value changes), focus (element gains focus), blur (element loses focus).
Window Events: load (page finishes loading), resize
(window is resized), scroll (page is scrolled).
Event Handling:
Event handling is the mechanism of associating a function (event handler) with a specific event on a specific element. There are three methods:
1. Inline HTML Event Handler:
<button onclick="alert('Clicked!')">Click Me</button>
2. DOM Property Event Handler:
document.getElementById("btn").onclick = function() {
alert("Button clicked!");
};
3. addEventListener() Method (Recommended):
document.getElementById("btn").addEventListener("click", function() {
document.getElementById("output").textContent = "You clicked!";
});
The addEventListener() method is the recommended approach because it allows multiple
handlers for the same event, supports event options (capture, once, passive), and separates HTML
structure from JavaScript behavior. Event handling is the foundation of all interactive web features
— form validation, dynamic content updates, animations, and user interface responsiveness.
An HTML document follows a strict hierarchical structure that defines how content is organized and interpreted by browsers. Every HTML document consists of specific structural elements, and modern HTML5 introduces semantic elements that provide meaning and context to the content, improving accessibility, SEO, and code readability.
Basic HTML Document Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
<!DOCTYPE html>: This declaration tells the browser that the document is an HTML5 document. It must be the very first line and is not an HTML tag — it is a processing instruction that ensures the browser renders the page in standards mode rather than quirks mode.
<html>: The root element that contains all other HTML elements. The
lang attribute specifies the language of the document, which helps screen readers and
search engines understand the content.
<head>: Contains metadata about the document — information that is not
displayed on the page but is essential for the browser and search engines. It includes the character
encoding (<meta charset="UTF-8">), viewport settings for responsive design, the
page title, stylesheet links, and meta descriptions for SEO.
<body>: Contains all the visible content of the web page — text, images, videos, forms, and interactive elements.
Semantic HTML Elements:
HTML5 introduced semantic elements that clearly describe their purpose and the type of content they
contain. Unlike generic <div> and <span> elements, semantic
elements convey meaning to browsers, developers, and assistive technologies.
<header>: Represents the introductory content of a page or section, typically containing the logo, navigation menu, and page heading. A page can have multiple headers (one for the page, one for each section).
<nav>: Defines a section containing navigation links. It should be used for major navigation blocks — site menus, table of contents, or breadcrumbs.
<main>: Represents the primary content of the document that is unique to the
page. There should be only one <main> element per page, and it should not include
repeated content like sidebars or navigation.
<section>: Defines a thematic grouping of content, typically with a heading. Sections represent distinct parts of a document like chapters, features, or content groups.
<article>: Represents self-contained, independently distributable content — blog posts, news articles, forum posts, or product cards. An article should make sense on its own, even outside the context of the page.
<aside>: Contains content tangentially related to the surrounding content — sidebars, pull quotes, advertisements, or supplementary information.
<footer>: Defines the footer of a page or section, typically containing copyright information, contact details, related links, or social media icons.
Benefits of Semantic HTML: Using semantic elements improves accessibility for screen readers and assistive technologies, enhances SEO by helping search engines understand page structure, makes code more readable and maintainable for developers, and enables consistent styling through meaningful element names. Modern web development best practices strongly encourage using semantic elements over generic divs wherever possible.