All of the text fields below (e.g. ) contain HTML. Use you mouse or keyboard to copy and paste the HTML into a "plain text editor" (e.g. notepad, textpad).
Save the file to your desktop as an HTML file, (e.g. file_name.html). Once they are saved, you can double click on them or use your keyboard to open them. They will automatically open in your default Web browser. When the files are open in your Web browser, you will be able to see how the HTML works in your browser.
Various Web browser types will display the HTML differently.
************************************************************************************************************
Lesson 4:
Using a List in an HTML Document:
Lists are often used in print and digital media to organize a set of related points. The Web is no exception, lists are used and supported by HTML. There are three types of list in HTML 4.0, unordered, ordered and definition lists. Lets start looking at their markup representation.
Unordered List:
is the tag set for an unordered list. You may also add the TYPE attribute to the unordered list tag or any of the other list tags. TYPE is an attribute that describes the type of bullet to use for the list items .
Within the tags, a Web author would need to add for list header. The list header will display the topic of the list. Next a Web author would need to add for each list item that would be displayed. There is no need to use a closing tag for the list tag. The complete source code would look something like this:
Copy the above source code to your text editor and save it as lesson4a.html
Open the file in you browser to see the results!
Ordered Lists:
is the tag set for an ordered list. An ordered list uses numbers instead of bullets. The symbol will automatically increment each time a new list item is added to the source code. Like with the previous list , you can use the TYPE attribute to describe what type of bullet/number symbol to use. Counter is an option of the TYPE attribute and START lets the display know what characters to use to begin the increment. Your choices are 1 (default is 1), A, a, I and i. The rest of the source code is the same as the unordered list above. The complete source code looks something like this:
Copy the above source code to your text editor and save it as lesson4b.html
Open the file in you browser to see the results!
Definition Lists:
is the tag set for a definition list. Definition lists usually display terms and their definitions. The COMPACT attribute is an option that requests the browser to reduce inter-item spacing. The items of a definition list don't begin with the LI (list item) tag. They begin with the DT tag (term) which introduces the term. Next comes (definition) which introduces the definition. The rest of the source code is the same as the above examples. The complete source code looks like this:
Copy the above source code to your text editor and save it as lesson4c.html
Open the file in you browser to see the results!
Nesting Lists:
Lists may also be nested. In order to nest a list, you must include a complete list, with the opening tag, list items, and closing tag, inside of another list. This creates indented lists of items. By default, most browsers will use different bullets for the nested list. Here's a basic example that can be expanded upon using the aformentioned list examples as a guide.
Copy the above source code to your text editor and save it as lesson4d.html
Open the file in you browser to see the results!
List Enhancements:
You can control the bullets used for list items. You can use the TYPE attribute with and tags. You can have a TYPE of (disc, circle or square) for . You can have a TYPE of A for ascending capital letters, a for ascending lower case letters, I for ascending capital roman numerals, and i for ascending lower case letters for a . The TYPE attribute can be added to the list element to change the bullet of individual list items (as long as the bullet you use is one of the allowable types for that particular type of list). Here is an example:
Copy the above source code to your text editor and save it as lesson4e.html
Open the file in you browser to see the results!