The Lesson 3 source code is the Lesson 2 source code with source code added for the Ordered List Tag. This added code appears immediately after the Lesson 2 source code.
The first line of added code is a heading line (h2 heading) containing the text "Ordered List Tag" (scroll this code into view in the above frame; scroll through the lesson 2 source code to get to this code). This code causes the text "Ordered List Tag" to appear on the web page in the heading size of "2".
The next line of added code is a paragraph containing the text "List of Cities". (scroll this code into view in the above frame). This code cause the text "List of Cities" to appear on the web page in paragraph form.
The next 7 lines of added code are the ordered list (scroll all 7 lines of code into view in the above frame). The first line of code is the opening tag for the ordered list (ol). The next 5 lines of code are for the 5 items in the list (the code for each item begins with the opening list item (li) tag, followed by the item (text or other type of web page component), followed by the closing list item (/li) tag. The next and last line of code is the closing ordered list, "/ol", tag.
As a matter of style, all 7 lines of code could be typed as one line of code, with or without spaces between the tags or city names, and this would not change the appearance of the list on the web page. Formatting the source code for a list so that the source code also appears as a list (as in the source code for this lesson) provides visual clues for the logical types and locations of tags.
The remaining code is comprised of the closing body tag and the closing html tag.
Lesson Comments;
The ordered list tag causes each item in the list to be numbered when the list is displayed on the web page.
The opening ordered list tag can contain an attribute to control how the list is itemized. The attribute that controls the itemizing of an ordered list is the "type" attribute. An attribute usually (not always) specifies a value. When an attribute has a value, the attribute is followed by an equal sign which is followed by a set of quotation marks with the attribute value typed within the quotation marks. (most tags can utilize attributes and other attributes are presented in subsequent lessons).
An example of the contents of an opening ordered list tag containing the "type" attribute and attribute value of "1" is as follows;
ol type="1"
In this code, the attribute vaue of "1", causes the itemizing of the list to be in arabic numbers (1, 2, 3, etc..). This is the default attribute value (when the type attribute is not utilized in an opening ordered list tag, the itemizing of the list will be in arabic numbers).
Alternative attribute values for other itemizings of an ordered list are as follows:
The attribute value, "a", displays the list in lowercase letters (a, b, c, etc..).
The following content of an opening ordered list tag would cause the list to be itemized in this manner;
ol type="a"
The attribute value, "A", displays the list in uppercase letters (A, B, C, etc..).
The following content of an opening ordered list tag would cause the list to be itemized in this manner;
ol type="A"
The attribute value, "i", displays the list in lowercase Roman numerals (i, ii, iii, etc..).
The following content of an opening ordered list tag would cause the list to be itemized in this manner;
ol type="i"
The attribute value, "I", displays the list in uppercase Roman numerals (I, II, III, etc..).
The following content of an opening ordered list tag would cause the list to be itemized in this manner;
ol type="I"
An ordered list tag causes an indentation on the web page. A list that is nested within a list (nested within an li tag pair of an outer list) causes a second indentation. The use of different type attribute values for different nestings of lists can be utilized to create outlines that have a professional appearance.
An ordered list can contain any number of items. Each item in the list must be within a pair of line item tags. (the opening item tag, "li" and the closing item tag, "/li").
In the above Lesson 3 ordered list, displaying each city in paragraph form (placing an opening paragraph tag immediately before each city and a closing paragraph tag immediately after each city) would create a blank line between the cities. In each instance, this procedure would create a nesting of a paragraph tag pair within the list item tag pair.
A list item in an ordered list may contain any or all of the following; one or more paragraphs, one or more new lines (break tags), one or more headings, and/or one or more nested lists.
End of Lesson 3.