The Lesson 4 source code is the Lesson 3 source code with source code added for the unordered List Tag. This added code appears immediately after the Lesson 3 source code.
The first line of added code is a heading line (h2 heading) containing the text "Unordered List Tag" (scroll this code into view in the above frame; scroll through the lesson 3 source code to get to this code). This code causes the text "Unordered List Tag" to appear on the web page in the heading size of "2".
The next line of added code is the paragraph tag containing the text "List of professional football teams". Scroll this code into view in the above frame. This code cause the text "List of professional football teams" to appear on the web page in paragraph form.
The next 7 lines of added code are the unordered list (scroll all 7 lines of code into view in the above frame). The first line of code is the opening tag for the unordered list (ul). 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 unordered list, "/ul", 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 team names, and this would not change the appearance of the list on the web page.
The remaining code is comprised of the closing body tag and the closing html tag.
Lesson Comments;The unordered list tag causes a bullet (or other symbol utilized by your browser) to be inserted at the left margin for each item in the list.
The opening unordered list tag can also utilize the "type" attribure to control how the list is itemized.
The "type" attribute value alternatives for the opening unordered list tag are as follows:
The attribute value, "disc", displays a disc (bullet) before each item in the list.
The following content of an opening unordered list tag would cause the list to be itemized in this manner;
ul type="disc"
This is the default attribute value (when the type attribute is not utilized in an opening unordered list tag, each item in the unordered list will be preceded by a disc).
The attribute value, "square", displays a square before each item in the list.
The following content of an opening unordered list tag would cause the list to be itemized in this manner;
ul type="square"
The attribute value, "circle", displays a circle before each item in the list.
The following content of an opening unordered list tag would cause the list to be itemized in this manner;
ul type="circle"
An unordered 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. In the utilization of list tags to create outlines, an unordered list can be nested in any line item of an ordered list or vice versa. Two or more lists, ordered and/or unordered, can be nested in one line item of an outer list.
An unordered 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 4 unordered 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 unordered 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 4.