BASIC TEXT FORMATTING!
| BASIC TEXT FORMATTING! | |
 HOME RESOURCES LESSONS DIRECTORY ARTICLES FORUMS |
 Sponsor Links Free Image Hosting Your source for free image hosting - upload your images! Poker Strategies and Tips Poker, online poker, poker terms, poker accessories, poker tips and tricks. Photoshop Tutorials Over 3,000 tutorials for Photoshop, Flash and 3DS Max! 6,000 Free Fonts Download over 6,000 Free Fonts for Mac and PC @ FontVillage.com Buy Website Visitors 1,000 Targeted U.S. Visitors for $3.50 - 30 day guaranteed. Reading Tarot Cards Videochat with certified tarot readers & psychics - unlimited tarot cards readings! Affiliate Software Start an affiliate program and design to maximize affiliates' productivity PPC Search Engine Low cost advertising for your website! Technical Service Provider Your number one source for computer repairs and network solutions | | LESSON 1-03-03: Creating Ordered & Unordered Lists Web Design Lessons > Lesson 1-03-03: Creating Ordered & Unordered Lists
In this section of our free online web design course, we're going to learn how to form a list of items by using HTML. There are two types of lists you can create - the ordered list and the unordered list. HTML Ordered ListsAn ordered list is a list that consist of list items that are marked with an order of numbers or letters (i.e. 1, 2, 3, etc. or a, b, c, etc.). Let's assume we wish to create a list of books to purchase. To make an ordered list of books to purchase, we'll need to use the <ol> (ordered list) and the <li> (list item) tags. The <ol> and </ol> tags determine the starting and ending points of the ordered list. The <li> and </li> tags determine the starting and ending points of each list item. Our example HTML code is below:
The output of this HTML code is as follows:
As you see in the output, our list items have been consecutively labelled 1, 2 and 3. This has created an "ordered list" of items. You can change the label type of an ordered list by using the "type" attribute of the <ol> tag. If you wish your list to use capital letters as labels, you simply add the expression [type="A"] (without the brackets) to the <ol> tag. Online Web Design Course will not let you get away without an example, of course:
We'll have an ordered list that is labelled with capital letters as an output:
You can also use the "a" value along with the "type" attribute to have lowercase letters, and the "I" or "i" values to have Roman numerals as labels. Sidenote: It's a good idea to note that you can place line breaks, paragraphs, links, images, other lists, etc. inside a list item. HTML Unordered ListsYour free online web design course continues without losing pace as we get to know the unordered list, which is a list of items that do not have a particular order among each other. The list items are generally labelled with a small black circle. The source HTML code is almost the same as an ordered list, except we use the <ul> (unordered list) tag instead of the <ol> (ordered list) tag. Here's an example HTML code:
Thus we get a list of websites to add to your favorites:
That's all there is to unordered tags. Now let's learn how to "nest" lists. Nesting Lists"Nesting" means embedding the same type of tags inside each other. For example, if you put a list inside a list item of another list, you'll create a "nested list". Let's try to nest an ordered list into an unordered list:
I've boldened the "nested" ordered list for you. The above HTML code gives the below output in a web browser:
You can also nest unordered lists into ordered lists, ordered lists into ordered lists, or unordered lists into unordered lists. You can nest as many lists as deep as you like (i.e. nest an unordered list into an ordered list, which is in turn nested inside an unordered list, which is in turn nested into an ordered list, etc.) Sidenote #1: Check out my web design resources page to download a superb eBook! Sidenote #2: If you enjoyed this lesson, please link to it :) Now that we have learned all about creating lists, we can head on to the next lesson of our free website design course to learn how to change the size, color and typeface of your text.
Nearby Lessons: • Lesson 1.02 Fundamental HTML Tags• Lesson 1.03 Basic Text Formatting  • Lesson 1.03.01 Boldening, italicising & underlining text• Lesson 1.03.02 Adding line breaks, paragraphs & headings• Lesson 1.03.03 Creating ordered / unordered lists• Lesson 1.03.04 Changing text size, text color & font face• Lesson 1.04 Web Colors Unleashed • Lesson 1.05 HTML Tables Back To Top  Home | Resources | Articles | Lessons | Directory | Forums Copyright© 2004 Onur Özcan. All Rights Reserved. | |