Scribd
Upload
23 views22 pages

Shrey RWPD Ala 2 1731229622

Uploaded by

Sahil Vasaya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
23 views22 pages

Shrey RWPD Ala 2 1731229622

Uploaded by

Sahil Vasaya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 22

Name: MANGUKIYA SHREY

Enrollment no:20231105060206
Subject: RWPD
Introduction to Lists

Heading: Introduction to Lists in HTML

Content:
1.Definition of Lists in HTML:
•Lists are HTML elements that allow you to group a set of related items in a
•well-defined
•and structured manner.
•They are used to present data in a clear, organized format.
2.Importance of Lists in Web Development:
•Lists enhance readability by breaking content into manageable chunks.
•They are essential for creating navigation menus, organizing content, and struc
•information hierarchically.
3.Overview of Ordered and Unordered Lists:
•Ordered Lists (ol : Items are numbered, reflecting a specific sequence or order
)

•Unordered Lists (ul : Items are bulleted, where order does not matter.
)
TYPES OF LISTS

There are three kinds of lists:


• Ordered List (Numbered List)
• Unordered List (Bulleted List)
1. Definition of Ordered List
• An Ordered List (OL) in HTML is a list where
the items are presented in a specific
sequence, typically numbered. Ordered lists
are used when the order of items is
important, such as in instructions, rankings,
or step-by-step guides.
Importance of Lists in Web
Development

• Lists are fundamental elements in web development due to their


ability to structure content in an organized, readable, and accessible
manner. They play a critical role in enhancing user experience,
improving content readability, and enabling better organization of
information. Let's delve into the significance of lists in web
development:
Key Points:

•Ordered Lists are useful when order matters.

•They can be customized using attributes like type to change the marker style (e.g., numbers, letters, Roman numerals).
•They are simple to implement but powerful in conveying structured information.
Example:

• <ol>
• <li>Step 1: Preheat the oven.</li>
• <li>Step 2: Mix the ingredients.</li>
• <li>Step 3: Bake the mixture.</li>
• </ol>
Output:
Lists -- Ordered Lists

Ordered (Numbered)
<OL>
Lists:
<LI> Item One 1. Item One
<LI> Item Two 2. Item Two
<LI> Item Three 3. Item Three
<LI> Item Four 4. Item Four
</OL>

type="i/I/a/A/1"
Ordered List Attributes: (default)

i = i. Item One I = I. Item One a = a. Item One A = A. Item One 1 = 1.Item One
ii. Item Two II. Item Two b. Item Two B. Item Two 2. Item Two
iii. Item Three III. Item Three c. Item Three C. Item Three 3. Item Three
iv. Item Four IV. Item Four d. Item Four D. Item Four 4. Item Four

start="xx"
Lists -- Unordered Lists

Unordered lists:
<UL>
<LI>Item One • Item One
<LI>Item Two • Item Two
<LI>Item Three
<LI>Item Four • Item Three
</UL> • Item Four

Unordered List Attributes:


type="disc/circle/square"
• Disc (default)  Circle  Square
Ordered List (Numbered List)

• Ordered list also called as Numbered list, is used to present a


numbered list of item in the order of importance or the
item(paragraph) is marked with a number.
• An ordered list must begin with the <OL> followed by an <LI>list item
tag.
Example: An HTML document
orderedList.html shows the use of
Ordered List
<HTML>
<HEAD>
<TITLE>
An Ordered List
</TITLE>
</HEAD>
<BODY>
<ol>
<li>Coffee>
<li>Milk
<li>Tea
<li>sugar
</ol>
</OL>
</BODY>
</HTML>
Output

1. Coffee
2. Milk
3. Tea
4. sugar
Attributes of <OL> tag

• COMPACT: render a list in compact form.


• TYPE : allows marking list items with different types. By default the
list Item markers are set to numbers 1,2,3… so on.Other values of
TYPE attribute are:
• Attribute Description
• Type = A Capital letter eg. A, B, C………
• Type = a Small letter eg. a, b, c,………
• Type = I Uppercase Roman Numbers eg. I, II, III……
• Type = i Lowercase Roman Numbers eg. i, ii, iii……
• Type = 1 eg. 1, 2, 3……
Attributes of <OL> tag

• The start attribute: The attribute is used to override default list


numbering when a list is divide into multiple parts. E.g:
<HTML>
<HEAD>
<TITLE>
An Ordered List
</TITLE>
</HEAD>
<BODY>
Impact printers
<ol>
<li>DOT MATRIX
EXAMPLE OF START ATTRIBUTE

<li>CHAIN PRINTER
<li>DRUM PRINTER
</ol>
<P>NON-IMPACT PRINTER</P>
<OL START=4>
<li>LASER PRINTER
<li>ELECTROSTATIC PRINTER
</OL>
</BODY>
</HTML>
OUTPUT

Impact printers
1.DOT MATRIX
2.CHAIN PRINTER
3.DRUM PRINTER
NON-IMPACT PRINTER
4.LASER PRINTER
5.ELECTROSTATIC PRINTER
Nested Order List
• One ordered list might contain one or more ordered list that Is called as Nested Order lists.
• Example: An HTML document nested.html shows the use of Nested Order Lists with
attributes:
<HTML>
<HEAD>
<TITLE> Use of Nested Ordered Lists</TITLE>
</HEAD>
<BODY>
<OL TYPE = A START =3>
<LI> Fruits
<OL TYPE = I>
<LI> Apple
<LI> MANGO
<LI> Orange
</OL>
Example: An HTML document nested.html shows
the use of Nested Order Lists with attributes

• <LI> VEGETABLES
• <OL TYPE = I>
• <LI> Brinjal
• <LI> Cabbage
• <LI> Tomato
• </OL>
• </OL>
• </BODY>
• </HTML>
Unordered List <UL>

• Unordered List also called as bulleted list, used to present list of


items marked with bullets. An unordered list starts with in <UL>
followed by <LI> (List Item) tag. Use of <UL> is very similar to <OL>
(ordered list).
Use of Unordered List and Various
Attributes
<HTML>
<HEAD><TITLE> Use of Unordered List </TITLE>
</HEAD>
<BODY>
<UL>
<LI> FRUITS
<UL>
<LI> Apple
<LI> Mango
<LI> Orange
</UL>
<LI> VEGETABLE
<UL>
<LI> Brinjal
<LI> Cabbage
<LI> Tomato
</UL>
</UL>
</BODY>
</HTML>
OUTPUT:

You might also like