Web Design - Introduction to HTML: Formatting Text

Sections:   Introduction  |  Section 1  |  Section 2  |  Section 3  |  Section 4   |  Section 5

Section Two:  Part A  |  Part B  |  Part C  |  Part D  |  Part E  |  Part F  |  Part G

Ordered and Unordered Lists As a web designer it is important to understand the way visitors view your web page. First, think about how you view a web page. Do you read every word listed on the page or do you scan the page for useful information? Studies show that web page viewers view web pages differently than they would a book, a newspaper, or a magazine in that they scan the viewable screen for information. As they scan, they look for visual clues that will point them to important information. Web designers use lists, ordered lists and unordered lists, to provide users with said visual clues. Stop and Think? Imagine you recently purchased a video game. You have been playing the game for a couple of days now and you have come to a point you cannot pass – the achievement is too hard. To help you move past this point in the game you complete an Internet search for guidance. You find two search results that seem promising. You visit each site and find that the information is presented differently: Search Result #1: The information on the web page is presented in prose/paragraph format with over a full page of text to scroll through. The information does provide you with knowledge of how to defeat the monster, earn the achievement, and move on with the game. Search Result #2: The information on the web page is presented in bullet format. The bullets are ordered, specifying the steps needed to defeat the monster, earn the achievement, and move on with the game. If both pages provide the same helpful information which would you use to defeat the monster, earn the achievement, and move on to the next stage of the game – the web page with the page-long prose (text) or the web page with the lists? Most people, when placed in the scenario above, would choose the page with the lists as they are easy to read and discerning important information is quick and easy. In HTML you have two types of lists at your disposal: ordered lists and unordered lists. Ordered Lists and Unordered Lists Ordered lists are lists where the items listed are presented sequentially (1, 2, 3, 4, …). Instructions and directions are often listed using ordered lists. Unordered lists are lists where the items listed are presented in no specific order of importance. All the items are equally important. Viewer options/choices are often listed in unordered lists. The HTML tags for ordered lists and unordered lists are similar. The tags used to create an ordered list are <ol></ol>, where ‘ol’ stands for ordered list. The tags used to create an unordered list are <ul></ul>, where ‘ul’ stands for unordered list. Using the above tags, you can create a list. In truth, adding the above tags to your HTML page simply says that you are going to create one type of list or the other. Nothing is displayed on your web page until you add items to your list/lists. Both ordered lists and unordered lists have something in common – they both include list items. A list item in an ordered list may be a step in a set of instructions whereas a list item in an unordered list may be a choice or a selection option. To add a list item to your ordered list or unordered list, you must include the <li></li> tags – which stand for ‘list item’. The <li></li> tags go around the text that you want to be the list item. The <li></li> tags are placed between the <ol></ol> tags or between the <ul></ul> tags. Let’s See it in Action… In the image above you see an ordered list that provides instructions for opening Notepad and an unordered list that lists, in no particular order, cool vintage muscle cars. Next

© 2008 KCDL. All rights reserved.