UNIT 2: QUESTIONS (MID TERM & END TERM)

1. Explain the various text formatting tags in HTML with suitable examples. Discuss the semantic
differences between tags like <b> vs <strong>, and <i>vs <em>. How do these tags impact accessibility
and SEO?

2. Write a detailed note on hyperlinks in HTML. Explain internal vs external links, email links, and
navigation menus using tags. How can pseudoclasses like :hover, :visited, and :active enhance user
experience?

3. Design a complex HTML table that includes a caption, merged cells (rowspan, colspan), and styling
using CSS. Discuss the use of semantic tags like , , and in large datasets.

4. Explain the three types of lists in HTML – ordered, unordered, and description lists – with examples.
How can CSS be used to customize list styles (e.g., custom bullets, numbering styles)?

5. Create a comprehensive HTML form for a user registration system. The form should include text
inputs, radio buttons, checkboxes, a dropdown menu, and a submit button. Explain validation
techniques using HTML5 attributes and basic JavaScript.

6. Explain the use of the element in HTML5. Write a JavaScript program that draws basic shapes (line,
circle, rectangle) and includes color fill and stroke. Discuss real-world applications of the canvas API

7.Create a CSS design for a container that includes a gradient background, a decorative border with
rounded corners, and a drop shadow. Write the full CSS code and explain each property used.

8.Write a JavaScript function that accepts an array of student marks and returns the average, highest,
and lowest mark. Explain how arrays and functions can work together in solving real-world problems.

9.Create a simple login form using HTML. Write JavaScript code to validate that the username and
password fields are not empty on button click. Use event handling to trigger validation and DOM
manipulation to display appropriate error messages.

10.What is the DOM? How can JavaScript manipulate the DOM? Write a script that changes the
background color of a webpage when a user clicks a button.
1. Text Formatting Tags in HTML

HTML provides tags to format text visually and semantically.

Tag Purpose Example

<b> Bold (visual only) <b>Bold</b>

<strong> Bold (with meaning) <strong>Important</strong>

<i> Italic (visual only) <i>Italic</i>

<em> Italic (emphasis, semantic) <em>Emphasized</em>

✅ Semantic tags like <strong> and <em> improve accessibility (screen readers) and SEO by conveying
meaning.

2. Hyperlinks in HTML

Used to connect pages, emails, sections:

html

<a href="https://example.com">External Link</a>

<a href="#about">Internal Link</a>

<a href="mailto:[email protected]">Email Us</a>

Navigation Menu:

html

<ul>

<li><a href="#home">Home</a></li>

</ul>

Pseudo-classes:

Css

a:hover { color: red; }

a:active { color: green; }

➡️Improve user experience via visual feedback.

3. HTML Table with Styling

html

<table>

<caption>Results</caption>

<thead>

<tr><th rowspan="2">Name</th><th colspan="2">Marks</th></tr>

<tr><th>Math</th><th>Science</th></tr>

</thead>

<tbody>

<tr><td>Alice</td><td>85</td><td>90</td></tr>

</tbody>

</table>

CSS Styling:

css

table, th, td {

border: 1px solid black;

border-collapse: collapse;

✅ Semantic tags like <thead>, <tbody> help in large datasets and screen readers.

4. HTML Lists
  Ordered list:

html

<ol><li>First</li></ol>

 Unordered list:

html

<ul><li>Item</li></ul>

 Description list:

html

<dl><dt>HTML</dt><dd>Markup Language</dd></dl>

CSS Customization:

css

ul { list-style-type: square; }

ol { list-style-type: upper-roman; }

5. HTML Form (User Registration)

html

<form>

<input type="text" required>

<input type="email" required>

<input type="radio" name="gender"> Male

<input type="checkbox"> HTML

<select><option>India</option></select>

<input type="submit">

</form>
Validation:

 HTML5: required, type="email", minlength

 JS Example:

javascript

if (!username) alert("Username required");

6. <canvas> in HTML5

html

<canvas id="myCanvas" width="200" height="100"></canvas>

<script>

let ctx = document.getElementById("myCanvas").getContext("2d");

ctx.fillStyle = "blue";

ctx.fillRect(10, 10, 100, 50);

</script>

✅ Used in games, graphics, charts, etc.

7. CSS Gradient Container

Css

.container {

background: linear-gradient(to right, #f06, #4a90e2);

border: 3px solid #fff;

border-radius: 15px;

box-shadow: 5px 5px 10px gray;

 linear-gradient: Color blend

 border-radius: Rounded corners

 box-shadow: Adds depth

8. JS Function for Marks

javascript

function analyze(marks) {

let avg = marks.reduce((a, b) => a + b, 0) / marks.length;

return { avg, max: Math.max(...marks), min: Math.min(...marks) };

✅ Arrays + functions = useful for reports, grading, stats.

9. Login Form with Validation

html

<form id="login">

<input id="user">

<input id="pass" type="password">

<button>Login</button>

</form>

<script>

document.getElementById("login").onsubmit = function(e) {

if (!user.value || !pass.value) {

alert("Fill all fields");

</script>

10. DOM Manipulation with JS

DOM = Document Object Model (tree of HTML elements)

<button onclick="document.body.style.backgroundColor='yellow'">Click Me</button>

✅ Used to change content, style, and structure dynamically.