Presentation is loading. Please wait.

Presentation is loading. Please wait.

Basic Webpage Design Formatting output using Unordered List and Ordered List tag.

Similar presentations


Presentation on theme: "Basic Webpage Design Formatting output using Unordered List and Ordered List tag."— Presentation transcript:

1 Basic Webpage Design Formatting output using Unordered List and Ordered List tag

2 Objectives To learn how to use list tags in html. To identify the diffirent attributes of list tag. To differentiate the use of from tag. To visualize the output of some examples given

3 LIST TAGS With HTML you can display images in a document.

4 LIST TAGS Unordered Lists Unordered list is a list of items. The list of items are marked with bullets (typically small black circles). An unordered list starts with the tag. Each list item starts with the tag. Coffee Milk Here is how it looks in a browser: Coffee Milk Inside a list item you can put paragraphs, line breaks, images, links, other.

5 LIST TAGS Ordered Lists An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the tag. Each list item starts with the tag. Here is how it looks in a browser: 1. Coffee 2. Milk Inside a list item you can put paragraphs, line breaks, images, links, other. Coffee Milk

6 HTML - LIST TAGS (examples) EXAMPLE 01. An unordered list

7 HTML - LIST TAGS (examples) EXAMPLE 01. An unordered list An unordered list An Unordered List: Coffee Tea Milk

8 HTML - LIST TAGS (examples) EXAMPLE 02. An ordered list

9 HTML - LIST TAGS (examples) An ordered list An Ordered List: Coffee Tea Milk EXAMPLE 02. An ordered list

10 HTML - LIST TAGS (examples) EXAMPLE 03. Different types of ordered lists

11 HTML - LIST TAGS (examples) Different types of ordered lists Numbered list: Apples Bananas Lemons Oranges Letters list: Apples Bananas Lemons Oranges EXAMPLE 03. Different types of ordered lists Lowercase letters list: Apples Bananas Lemons Oranges Lists alalix Page 9 of 16 MEDIONE Roman numbers list: Apples Bananas Lemons Oranges Lowercase Roman numbers list: Apples Bananas Lemons Oranges

12 HTML - LIST TAGS (examples) EXAMPLE 04. Different types of unordered lists

13 HTML - LIST TAGS (examples) Different types of unordered lists Disc bullets list: Apples Bananas Lemons Oranges EXAMPLE 04. Different types of unordered lists Circle bullets list: Apples Bananas Lemons Oranges Square bullets list: Apples Bananas Lemons Oranges

14 HTML - LIST TAGS (examples) EXAMPLE 06. Nested list 2

15 HTML - LIST TAGS (examples) Nested List2 A nested List: Coffee Tea EXAMPLE 05. Nested list Black tea Green tea China Africa Milk

16 HTML - LIST TAGS (examples) EXAMPLE 07. Definition List

17 HTML - LIST TAGS (examples) Definition List A Definition List: Coffee Black hot drink Milk White cold drink EXAMPLE 07. Definition List

18 Summary Lists commonly are found in documents, including web pages. You can itemize your content in html using list tag. An unordered list starts with the tag An ordered list starts with the tag


Download ppt "Basic Webpage Design Formatting output using Unordered List and Ordered List tag."

Similar presentations


Ads by Google