Class 9 Chapter 3 Long Question Answers

1. Explain the difference between Static and Dynamic websites with examples.

Answer:

Static Websites:

Contain fixed content coded in HTML/CSS that does not change unless manually updated.
Simple to create and host, no server-side processing required.
Examples: Portfolio sites, informational pages like company details.

Dynamic Websites:

Content is generated dynamically based on user interaction or server data.
Use server-side languages like PHP, Python, or JavaScript frameworks.
Examples: Social media platforms, e-commerce sites like Amazon.

In summary, static sites show the same content to all users, whereas dynamic sites can show personalized or updated content.

2. Describe the steps to create a simple webpage that includes text, images, and a link.

Answer:

Create an HTML file with <html> and <body> tags.
Add text inside paragraph tags <p> or headings like <h1>.
Insert images using <img> tag with src attribute specifying the image file.
Add hyperlinks using <a> tag with the href attribute to specify the link URL.
Save and open the file in a web browser to view the webpage.

Example Code:

<!DOCTYPE html>
<html>
  <head>
    <title>My Simple Webpage</title>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text on my webpage.</p>
    <img src="image.jpg" alt="Sample Image" width="300">
    <p>Visit <a href="https://www.example.com">Example Website</a> for more info.</p>
  </body>
</html>

3. What is the role of HTML forms? Describe a simple form with two fields and a submit button.

Answer:

HTML forms collect user input and send it to a server or script for processing.

A simple form includes input fields such as text boxes, radio buttons, checkboxes, and a submit button.

Example Code:

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br><br>

  <input type="submit" value="Submit">
</form>

This form takes a user’s name and email and submits the data.

4. Explain the concept of Cascading Style Sheets (CSS) and how it enhances webpage design.

Answer:

CSS is a style sheet language used to describe the presentation of HTML elements on a webpage.

Separates content (HTML) from design (CSS) for cleaner code.
Controls layout, colors, fonts, spacing, and responsiveness.
Makes websites visually appealing and consistent across pages.

For example, using CSS you can make all headings blue, set background images, or create responsive grids.

5. Write the steps and code to embed a YouTube video on a webpage.

Answer:

Go to the desired YouTube video page.
Click on “Share” and select “Embed.”
Copy the provided iframe code.
Paste the iframe code inside your HTML file where you want the video to appear.

Example Code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
gyroscope; picture-in-picture" allowfullscreen></iframe>

6. Describe how JavaScript can be used to validate a form before submission.

Answer:

JavaScript can check form inputs for correctness before the form is sent to the server, preventing errors.

It verifies fields are not empty.
Checks if the email format is valid.
Ensures passwords meet criteria.

Example JavaScript snippet:

<script>
function validateForm() {
  const email = document.getElementById('email').value;
  if (!email.includes('@')) {
    alert('Please enter a valid email address.');
    return false;
  }
  return true;
}
</script>

<form onsubmit="return validateForm()">
  <input type="email" id="email" name="email" required>
  <input type="submit" value="Submit">
</form>

7. What is the use of the <div> tag and how is it styled using CSS?

Answer:

The <div> tag is a block-level container used to group HTML elements for styling or scripting.

It has no default visual effect but is commonly styled using CSS for layout and design.

Example:

<style>
.container {
  width: 80%;
  margin: auto;
  background-color: #f0f0f0;
  padding: 20px;
}
</style>

<div class="container">
  <p>This is inside a styled div.</p>
</div>

8. Explain how to add a navigation bar to a webpage using HTML and CSS.

Answer:

A navigation bar helps users move between different sections/pages.

Steps:

Use an unordered list (<ul>) for menu items.
Style the list items (<li>) with CSS for horizontal layout.
Add links inside list items using <a> tags.

Example Code:

<style>
nav ul {
  list-style-type: none;
  background-color: #333;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
nav ul li {
  float: left;
}
nav ul li a {
  display: block;
  color: white;
  padding: 14px 20px;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: #111;
}
</style>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

9. Write steps and code to add a table displaying students’ names and their marks.

Answer:

Create a table with the <table> tag.
Use <tr> for rows, <th> for header cells, and <td> for data cells.
Fill rows with student names and marks.

Example Code:

<table border="1" cellpadding="10">
  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>90</td>
  </tr>
</table>

10. What is the difference between the <id> and <class> attributes in HTML?

Answer:

id: Unique identifier for a single element on the page. Only one element can have a given id.
class: Used to group multiple elements together. Many elements can share the same class.

Both are used for styling and scripting, but id is unique and class is reusable.

NBF StudyHub