Great!
Here's the complete **HTML Lab Manual** with 10 basic-to-intermediate level
programs. Each includes:
* Title
* Objective
* HTML code
* Expected Output (explained as text)
---
## 🧾 **HTML Lab Manual (With Code and Expected Output)**
---
### 🔹 **Program 1: Basic HTML Page**
**Objective**: Create a simple HTML webpage.
```html
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
```
**Expected Output**: A webpage with the heading "Hello World!"
---
### 🔹 **Program 2: Formatting Text**
**Objective**: Use formatting tags.
```html
<!DOCTYPE html>
<html>
<body>
<b>Bold Text</b><br>
<i>Italic Text</i><br>
<u>Underlined Text</u>
</body>
</html>
```
**Expected Output**: Displays bold, italic, and underlined text.
---
### 🔹 **Program 3: HTML List**
**Objective**: Create ordered and unordered lists.
```html
<!DOCTYPE html>
<html>
<body>
<h2>Fruits</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<h2>Steps</h2>
<ol>
<li>Cut</li>
<li>Cook</li>
</ol>
</body>
</html>
```
**Expected Output**: Displays an unordered list of fruits and an ordered list of
steps.
---
### 🔹 **Program 4: Table Creation**
**Objective**: Create a basic table.
```html
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alice</td><td>20</td></tr>
<tr><td>Bob</td><td>22</td></tr>
</table>
</body>
</html>
```
**Expected Output**: A table with 2 rows of name and age.
---
### 🔹 **Program 5: Image Tag**
**Objective**: Insert an image.
```html
<!DOCTYPE html>
<html>
<body>
<img src="https://via.placeholder.com/100" alt="Sample Image">
</body>
</html>
```
**Expected Output**: Displays a placeholder image of 100x100 pixels.
---
### 🔹 **Program 6: Link Creation**
**Objective**: Create hyperlinks.
```html
<!DOCTYPE html>
<html>
<body>
<a href="https://www.google.com" target="_blank">Visit Google</a>
</body>
</html>
```
**Expected Output**: A clickable link that opens Google in a new tab.
---
### 🔹 **Program 7: Form Elements**
**Objective**: Create a simple form.
```html
<!DOCTYPE html>
<html>
<body>
<form>
Name: <input type="text" name="name"><br>
Age: <input type="number" name="age"><br>
<input type="submit">
</form>
</body>
</html>
```
**Expected Output**: A form with name and age fields and a submit button.
---
### 🔹 **Program 8: CSS Inline Styling**
**Objective**: Style elements using inline CSS.
```html
<!DOCTYPE html>
<html>
<body>
<p style="color:blue; font-size:20px;">Styled Text</p>
</body>
</html>
```
**Expected Output**: A blue-colored large paragraph text.
---
### 🔹 **Program 9: Audio Tag**
**Objective**: Embed an audio player.
```html
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="sample.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</body>
</html>
```
**Expected Output**: Displays an audio player (file must be present).
---
### 🔹 **Program 10: Video Tag**
**Objective**: Embed a video player.
```html
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
```
**Expected Output**: Displays a video player (file must be present).
---
