Ordered and unordered lists in HTML

1
Ordered and unordered lists in HTML
2
Types of Lists 

• We are going to work on lists. we can create
  lists directly in HTML without assigning numbers.
• There are two kinds of lists, and they are
  fairly simple.
• ltolgt is an ordered list
• ltulgt is an unordered list
• ltligt is used for each list item

3
Unordered Lists

• An unordered list has what is commonly called
  "bullets". We can add a bulleted list by adding
  an unordered list. The unordered list is
  contained within the Unordered list tags,  ltulgt
  lt/ulgt tags. Each item in the list will be
  contained within the list item tags, ltligt lt/ligt

4
Example

• Reasons I like Html
• ltulgt
• ltligt I can make my pages as I want themlt/ligt
• ltligt Once I learn html, the other languages come
  easilylt/ligt
• ltligt Even if I use an html editor, I can now
  adjust aspects of the pagelt/ligt
• ltligt I can look at other peoples html code to
  learn how to do neat thingslt/ligt
• lt/ulgt

5
Example

• The unordered list will look like this
• Reasons I like Html
• I can make my pages as I want them
• Once I learn html, the other languages come
  easily
• Even if I use an html editor, I can now adjust
  aspects of the page
• I can look at other peoples html code to learn
  how to do neat things

6
Ordered Lists

• An ordered list has what is commonly called
  "numbered list". We can add a numbered list by
  adding an ordered list. The ordered list is
  contained within the Ordered list tags,  ltolgt
  lt/olgt tags. Each item in the list will be
  contained within the list item tags, ltligt lt/ligt

7
Example

• Things I have learned
• ltolgt
• ltligt Html base codelt/ligt
• ltligtHow to align textlt/ligt
• ltligtFont attributeslt/ligt
• ltligtInserting imageslt/ligt
• ltligtImage attributeslt/ligt
• ltligt Creating linkslt/ligt
• ltligt Sound attributeslt/ligt
• ltligtMaking listslt/ligt
• lt/olgt

8
And here is the result

• Things I have learned
• Html base code
• How to align text
• Font attributes
• Inserting images
• Image attributes
• Creating links
• Sound attributes
• Making lists

9
Activity

• Try to write in Notepad or in CreaText (click to
  download it if you do not have it) for MAC to
  write a piece of HTML code where you create an
  ordered list (where the order does matter) or an
  unordered list (where the order doesnt matter)