Scribd
Upload
7 views7 pages

Webdesign Mode1 and Mod 2 Till Box Notes

The document contains a series of theory-based and program-based questions related to HTML and CSS, covering topics such as HTML structure, CSS styling, and responsive design. It includes explanations of key HTML elements like `<head>`, `<div>`, and `<progress>`, as well as CSS concepts like the Box Model and `z-index`. Additionally, it provides practical tasks for creating web pages and forms using HTML and CSS.

Uploaded by

gabrielsellus
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views7 pages

Webdesign Mode1 and Mod 2 Till Box Notes

The document contains a series of theory-based and program-based questions related to HTML and CSS, covering topics such as HTML structure, CSS styling, and responsive design. It includes explanations of key HTML elements like `<head>`, `<div>`, and `<progress>`, as well as CSS concepts like the Box Model and `z-index`. Additionally, it provides practical tasks for creating web pages and forms using HTML and CSS.

Uploaded by

gabrielsellus
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Certainly!

Here are both program-based and theory-based questions based on the provided syllabus for both HTML
and CSS. These questions cover various topics such as basic HTML tags, CSS styling, and page layout.

### HTML Questions:

**Theory-Based Questions:**

1. Explain the purpose of the `<head>` section in an HTML document. What elements can be included in this section?

2. Differentiate between `<div>` and `<span>` tags in HTML. Provide examples of situations where each would be
appropriate.

3. What is the significance of the `<figure>` and `<figcaption>` tags in HTML? How are they used together?

4. Describe the role of the `<time>` element in HTML and provide an example of its usage.

5. Explain the purpose of the `<progress>` element in HTML. How can it be utilized to display task progress?

**Program-Based Questions:**

1. Create an HTML page with a navigation bar (`<nav>`) containing at least three links. Apply CSS styles to enhance the
visual appearance of the navigation.

2. Implement a form using HTML with fields for name, email, and a submit button. Apply CSS styles for better
presentation.

3. Develop an HTML structure for a blog post with a title, content, author information, and a publication date. Use
appropriate tags to structure the content.

4. Create an HTML page that uses the `<audio>` element to embed an audio file. Include controls for play, pause, and
volume adjustment.

5. Develop an HTML form with a dropdown list (`<select>`), allowing users to choose their favorite color. Use CSS to
style the form for a better user experience.

### CSS Questions:


**Theory-Based Questions:**

1. Explain the concept of the CSS Box Model. What are the components of the box model, and how do they influence
the layout?

2. Describe the difference between external and internal style sheets in CSS. When would you choose one over the
other?

3. What is the purpose of the `z-index` property in CSS? Provide an example scenario where it might be useful.

4. Explain the significance of pseudo-classes in CSS. Provide examples of pseudo-classes and their usage.

5. What are media queries in CSS, and how do they contribute to responsive web design?

**Program-Based Questions:**

1. Create an external CSS file and link it to an HTML document. Apply styles to customize the appearance of headings
(`<h1>`, `<h2>`, etc.).

2. Design a webpage layout with a header, navigation bar, main content area, and a footer. Use CSS to style each
section appropriately.

3. Implement a CSS class that, when applied, changes the background color of a paragraph (`<p>`). Apply this class to
specific paragraphs in an HTML document.

4. Create a CSS animation that makes an element gradually change its color over a specified duration.

5. Develop a responsive webpage using media queries. Ensure that the layout adjusts based on different screen sizes.

These questions cover various aspects of HTML and CSS, providing a mix of theoretical understanding and practical
application. Feel free to modify them based on your specific needs or curriculum.

Certainly! Below are the answers for the theory-based and program-based questions:

### HTML Questions:


**Theory-Based Questions:**

1. **Explanation of `<head>` Section:**

The `<head>` section in an HTML document contains metadata about the document, such as the title, character set,
linked stylesheets, and scripts. It does not contain visible content for the webpage.

2. **Difference between `<div>` and `<span>` Tags:**

- `<div>` is a block-level element used to group other HTML elements and create a block or section. It is commonly
used for layout purposes.

- `<span>` is an inline element used to apply styles or scripting to a specific section of text.

3. **Purpose of `<figure>` and `<figcaption>`:**

- `<figure>` is used to group and represent any content, such as an image or diagram, with an optional caption.

- `<figcaption>` is used to provide a caption or legend for the content inside the `<figure>` element.

4. **Role of `<time>` Element:**

- `<time>` is used to represent dates and times in a machine-readable format. It can be used to display the
publication date of an article.

5. **Purpose of `<progress>` Element:**

- `<progress>` is used to represent the completion progress of a task. It includes attributes like `value` and `max` to
define the progress range.

**Program-Based Questions:**

1. **HTML Page with Navigation Bar:**

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Navigation Bar Example</title>

<link rel="stylesheet" href="styles.css">


</head>

<body>

<nav>

<ul>

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

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</body>

</html>

```

2. **HTML Form with CSS Styling:**

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Example</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<form>

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<button type="submit">Submit</button>

</form>

</body>

</html>
```

3. **HTML Structure for Blog Post:**

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Blog Post Example</title>

</head>

<body>

<article>

<h1>Blog Post Title</h1>

<p>Content of the blog post...</p>

<footer>

<p>Author: John Doe</p>

<p>Published on: 2/9/2024</p>

</footer>

</article>

</body>

</html>

```

4. **HTML Page with `<audio>` Element:**

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Audio Example</title>

</head>
<body>

<audio controls>

<source src="audio.mp3" type="audio/mp3">

Your browser does not support the audio tag.

</audio>

</body>

</html>

```

5. **HTML Form with Dropdown List and CSS Styling:**

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form with Dropdown Example</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<form>

<label for="color">Choose your favorite color:</label>

<select id="color" name="color">

<option value="red">Red</option>

<option value="blue">Blue</option>

<option value="green">Green</option>

</select>

<button type="submit">Submit</button>

</form>

</body>

</html>

```
### CSS Questions:

**Theory-Based Questions:**

1. **CSS Box Model:**

- The CSS Box Model is a layout model that consists of content, padding, border, and margin. It defines the space an
element occupies on a webpage.

2. **External vs. Internal Style Sheets:**

- External style sheets are separate files linked to HTML documents, promoting modularity and consistency.

- Internal style sheets are defined within the `<style>` tag in the HTML document, affecting only that specific
document.

3. **`z-index` Property:**

- The `z-index` property in CSS controls the stacking order of positioned elements

You might also like