Scribd
Upload
2 views

HTML_Lesson 02_Lists

The document provides an overview of HTML lists, including the types of lists (unordered and ordered) and their respective tags (<ul>, <ol>, <li>). It includes practical activities for learners to apply their knowledge by creating lists in HTML. Additionally, it emphasizes the importance of metacognitive strategies for reflecting on learning and improving coding skills.

Uploaded by

Rayan Rizwan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

HTML_Lesson 02_Lists

The document provides an overview of HTML lists, including the types of lists (unordered and ordered) and their respective tags (<ul>, <ol>, <li>). It includes practical activities for learners to apply their knowledge by creating lists in HTML. Additionally, it emphasizes the importance of metacognitive strategies for reflecting on learning and improving coding skills.

Uploaded by

Rayan Rizwan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

HTML-Lists

HTML_Lists

LEARNING OBJECTIVE
• To know what is List in HTML & List Tags .
• To differentiate the types of lists.
• To use and analyze the List Tags in webpage.
HTML_Lists

Starter:
Can you name any tag that you’ve used before?"

How confident do you feel about writing HTML code so far?


HTML_Lists

HTML Lists:
HTML lists allow web developers to group a set of related
items in lists.
Types of List in HTML:

Unordered HTML List


An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.

Ordered HTML List


An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
The list items will be marked with numbers by default:
HTML_Lists
<html>
<title>Learning HTML</title>
MUST TASK
<body>
<h1>HTML Lesson 02</h1>

<P style="font-size:30px">Hey Cuties! Add your text here!</br> you can use the font size:
style="font-size:30px" </p>

<p style="font-size:30px"> we have learnt so far:</p>

<ul style="font-size:30px"> Think-Aloud Strategy:


<li>HTML Introduction</li>
<li>Heading and Paragraph</li> As you write code, verbalize your thought
<li>Attributes of Heading and Paragraph</li> process:
<li>Lists</li>
</ul>
"First, I’m using <ul> because I want a bullet-
point list. I need to remember to close the list
</body> with </ul> after adding all items. Each item is
</html>
wrapped in <li> tags..."

HTML_Lists
Activity:
Group 1 Group 2 Group 3
In the below code list down your In the below code list down your In the below code list down your
most favorite places to visit in most favorite places to visit in most favorite places to visit in
UAE using Unordered List. UAE using Ordered List. UAE using Unordered List with
<html> <html> type=”Square”.
<title>Learning HTML</title> <title>Learning HTML</title> <html>
<body> <body> <title>Learning HTML</title>
<body>
<h1>HTML Lesson 02</h1> <h1>HTML Lesson 02</h1>
<P style="font-size:30px">Hey <P style="font-size:30px">Hey <h1>HTML Lesson 02</h1>
Cuties! Add your text here!</br> you Cuties! Add your text here!</br> you <P style="font-size:30px">Hey
can use the font size: style="font- can use the font size: style="font- Cuties! Add your text here!</br> you
size:30px" </p> size:30px" </p> can use the font size: style="font-
<p style="font-size:30px"> we have <p style="font-size:30px"> we have size:30px" </p>
learnt so far:</p> learnt so far:</p> <p style="font-size:30px"> we have
learnt so far:</p>
</body> </body>
</html> </html> </body>
Extended Task </html>

Research, how to change the type of ordered and ordered list.


Change the type of the of your respective group.
HTML_Lists

Plenary:
HTML_Lists

PLENARY:

1) Tag for unordered List is__________.

2) There are _____________ types of List in HTML.

3) List can be added in any part of the webpage. (T/F)


HTML_Lists

SUCCESS CRITERIA

• I can create ordered and unordered lists using HTML tags


(<ol>, <ul>, <li>).
• I know how to reflect on my learning and identify areas of
strength and improvement in writing HTML code.
• I use metacognitive strategies like thinking aloud and self-
reflection to monitor and improve my coding process.

You might also like