Scribd
Upload
5 views

Creating Lists in HTML

The document provides instructions on how to create ordered and unordered lists in HTML. It includes examples of an unordered list featuring favorite foods and an ordered list detailing steps to make a sandwich. Additionally, it presents a full HTML code example that combines both types of lists with headings.

Uploaded by

Nitika Dandona Chatterji
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

Creating Lists in HTML

The document provides instructions on how to create ordered and unordered lists in HTML. It includes examples of an unordered list featuring favorite foods and an ordered list detailing steps to make a sandwich. Additionally, it presents a full HTML code example that combines both types of lists with headings.

Uploaded by

Nitika Dandona Chatterji
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Creating Lists in HTML

Objective:

 Understand how to use ordered (<ol>) and unordered (<ul>) lists in HTML.

Instructions and Solutions:

1. Create an Unordered List:

Instructions:
Create an unordered list with at least 3 items. The items can be anything you like (e.g., your favorite
animals, foods, hobbies, etc.). Use the <ul> tag for the unordered list and <li> tags for the list items.

Solution:

<ul>
<li>Pizza</li>
<li>Ice Cream</li>
<li>Sandwiches</li>
</ul>

2. Create an Ordered List:

Instructions:
Create an ordered list that shows 3 steps for something simple, like how to make a sandwich. Use the <ol>
tag for the ordered list and <li> tags for each step.

Solution:

<ol>
<li>Take two slices of bread</li>
<li>Spread peanut butter and jelly</li>
<li>Put the slices together and cut the sandwich</li>
</ol>

3. Combine an Ordered and Unordered List:

Instructions:
Combine both types of lists. Create a webpage that has a heading and then lists your 3 favorite foods using
an unordered list, followed by 3 steps to make one of those foods using an ordered list.

Solution:

<h2>My Favorite Foods and How to Make Them</h2>

<h3>Favorite Foods:</h3>
<ul>
<li>Pizza</li>
<li>Ice Cream</li>
<li>Sandwiches</li>
</ul>
<h3>How to Make a Sandwich:</h3>
<ol>
<li>Take two slices of bread</li>
<li>Spread peanut butter and jelly</li>
<li>Put the slices together and cut the sandwich</li>
</ol>

Full Example Solution:

Here's the full HTML code that combines everything:

<!DOCTYPE html>
<html>
<head>
<title>My Favorite Foods and Sandwich Recipe</title>
</head>
<body>
<h1>Welcome to My Food List</h1>

<h2>My Favorite Foods and How to Make Them</h2>

<h3>Favorite Foods:</h3>
<ul>
<li>Pizza</li>
<li>Ice Cream</li>
<li>Sandwiches</li>
</ul>

<h3>How to Make a Sandwich:</h3>


<ol>
<li>Take two slices of bread</li>
<li>Spread peanut butter and jelly</li>
<li>Put the slices together and cut the sandwich</li>
</ol>
</body>
</html>

You might also like