Scribd
Upload
34 views3 pages

HTML Basics Lab Manual

The document is a lab manual for learning HTML basics through five structured labs. Each lab focuses on different aspects of HTML, including document structure, lists and links, images and tables, forms, and culminates in a final project to create a personal portfolio. Tasks are provided for each lab to reinforce learning and practical application.

Uploaded by

Berihun Tsegaye
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
34 views3 pages

HTML Basics Lab Manual

The document is a lab manual for learning HTML basics through five structured labs. Each lab focuses on different aspects of HTML, including document structure, lists and links, images and tables, forms, and culminates in a final project to create a personal portfolio. Tasks are provided for each lab to reinforce learning and practical application.

Uploaded by

Berihun Tsegaye
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/ 3

HTML Basics - Lab Manual

Lab 1: Basic HTML Structure

Objective: Learn the structure of an HTML document.

Steps:

1. Open a text editor (e.g., Notepad++, VS Code).

2. Write and save the following as index.html:

<!DOCTYPE html>

<html>

<head>

<title>Lab 1</title>

</head>

<body>

<h1>Welcome to HTML</h1>

<p>This is a basic webpage.</p>

</body>

</html>

3. Open the file in a browser.

Task: Add a <h2> subheading and a new paragraph.

---

Lab 2: Lists and Links

Objective: Practice creating lists and hyperlinks.

Steps:
1. Create an unordered list of your favorite foods.

2. Create an ordered list of steps to cook a meal.

3. Add a link to your favorite recipe website.

Task: Combine lists and links in a single page.

---

Lab 3: Images and Tables

Objective: Learn to use images and tables.

Steps:

1. Add an image to your webpage with appropriate alt text.

2. Create a table to display student names and scores.

Task: Enhance the table by adding a border and a caption.

---

Lab 4: Forms

Objective: Build a form to collect user input.

Steps:

1. Create a form with:

- Name field

- Email field

- Message textarea

- Submit button

2. Style the form with inline CSS.


Task: Add validation for the email field.

---

Lab 5: Final Project

Objective: Build a personal portfolio.

Requirements:

1. Home Page: Include a title, welcome message, and an image.

2. About Page: Use paragraphs and lists to describe yourself.

3. Contact Page: Include a form with text inputs and a submit button.

Submission: Zip the files and share the folder.

You might also like