KEMBAR78
HTML Practice | PDF
Scribd
Upload
6 views3 pages

HTML Practice

The document outlines three problems requiring the creation of simple HTML pages: a recipe page, a contact card, and an event invitation. Each problem includes specific requirements such as headings, paragraphs, lists, links, and images. The instructions emphasize replacing placeholder comments with HTML code and saving the files for testing in a browser.

Uploaded by

nakroth080100
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 views3 pages

HTML Practice

The document outlines three problems requiring the creation of simple HTML pages: a recipe page, a contact card, and an event invitation. Each problem includes specific requirements such as headings, paragraphs, lists, links, and images. The instructions emphasize replacing placeholder comments with HTML code and saving the files for testing in a browser.

Uploaded by

nakroth080100
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

Problem 1: Create a Simple Recipe Page

Requirements:

1. Set the page title to "My Favorite Recipe".

2. Add a main heading (h1) with the name of a dish (e.g., "Chocolate Cake").

3. Write a short paragraph (p) describing why you like this dish.

4. Create an unordered list (ul) with at least 4 ingredients.

5. Add a link (a) to an external recipe website (e.g., "https://www.allrecipes.com").

Starting Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>My Favorite Recipe</title>

</head>

<body>

<!-- Add your code here -->

</body>

</html>

Problem 2: Build a Personal Contact Card


Requirements:

1. Set the page title to "My Contact Card".

2. Add a heading (h2) with your name.


3. Include a paragraph (p) with a fake email address (e.g., "me@example.com").

4. Create an ordered list (ol) with 3 social media platforms you use (e.g., Twitter,
Instagram, LinkedIn).

5. Add an image (img) of yourself or a placeholder (use a free image URL like
"https://via.placeholder.com/150").

6. Style the text with at least one bold (b) or italic (i) tag.

Starting Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>My Contact Card</title>

</head>

<body>

<!-- Add your code here -->

</body>

</html>

Problem 3: Design a Mini Event Invitation


Requirements:

1. Set the page title to "Event Invitation".

2. Add a main heading (h1) with the event name (e.g., "Birthday Party").

3. Use a subheading (h3) for the date and time (e.g., "March 15, 2025, at 6 PM").

4. Write a paragraph (p) with event details (e.g., location and what to bring).
5. Create a table with 2 columns and 3 rows to list "Item" and "Quantity" (e.g., Cake, 1;
Drinks, 2; Snacks, 5).

6. Add a link (a) to a map location (e.g., "https://maps.google.com").

Starting Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Event Invitation</title>

</head>

<body>

<!-- Add your code here -->

</body>

</html>

Instructions:

• For each problem, replace the placeholder comments with your HTML code based
on the requirements.

• Save each as a .html file (e.g., recipe.html, contact.html, invitation.html) and test
them in a browser.

• Feel free to experiment with extra tags like <br> for line breaks or <strong> for
emphasis.

You might also like