[go: up one dir, main page]
Scribd
Upload
6 views4 pages

Web Development Solutions

The document provides solutions to common web development questions, including how to create an HTML table with a hover effect using CSS, and explains the differences between absolute, fixed, and relative positioning in CSS with examples. It also defines the Document Object Model (DOM) as a tree structure representing HTML documents, providing an example of its structure and usage in JavaScript. Each section includes code snippets to illustrate the concepts discussed.

Uploaded by

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

Web Development Solutions

The document provides solutions to common web development questions, including how to create an HTML table with a hover effect using CSS, and explains the differences between absolute, fixed, and relative positioning in CSS with examples. It also defines the Document Object Model (DOM) as a tree structure representing HTML documents, providing an example of its structure and usage in JavaScript. Each section includes code snippets to illustrate the concepts discussed.

Uploaded by

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

Solutions for Web Development Questions

Q1. How can you create an HTML table with rows and columns, and apply a hover effect to

change the background color of each row when the mouse pointer moves over it? (5 Marks):

To create an HTML table and apply a hover effect:

HTML Code:

```html

<table border="1">

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>Row 1, Col 1</td>

<td>Row 1, Col 2</td>

</tr>

<tr>

<td>Row 2, Col 1</td>

<td>Row 2, Col 2</td>

</tr>

</table>

```

CSS for hover effect:

```css

table tr:hover {

background-color: #f2f2f2;
}

```

The CSS `:hover` selector changes the row background when the mouse is over it.

Q2. What are the differences between absolute, fixed, and relative positioning in CSS, and

when would you use each one? (10 Marks):

Differences between positioning types:

1. **Absolute**: Positioned relative to the nearest positioned ancestor (or the viewport if none).

Example:

```css

.absolute {

position: absolute;

top: 20px;

left: 30px;

```

2. **Fixed**: Positioned relative to the viewport, does not move when scrolling.

Example:

```css

.fixed {

position: fixed;

bottom: 10px;

right: 10px;

```
3. **Relative**: Positioned relative to its normal position.

Example:

```css

.relative {

position: relative;

top: 10px;

left: 5px;

```

Use Cases:

- **Absolute**: For dropdown menus or modals.

- **Fixed**: For sticky headers/footers.

- **Relative**: For slight adjustments without disrupting layout.

Q3. What is the DOM in web development, and how does it represent the structure of an

HTML document? (5 Marks):

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It

represents the document as a tree structure, where each node corresponds to a part of the

document.

Example:

For the HTML:

```html

<html>

<body>
<p id="text">Hello World</p>

</body>

</html>

```

The DOM structure would look like:

- Document

- html

- body

- p (id="text")

JavaScript Example:

```javascript

const text = document.getElementById("text");

console.log(text.innerHTML); // Outputs: Hello World

```

You might also like