Lists



Lists Unordered Lists Ordered Lists Definition Lists While simple in concept, lists can be very powerful in execution. There are three types of lists: unordered lists, ordered lists, and definition lists. The first two are very similar in structure, while definition lists have a unique setup. Once again students are required in this lesson to practice and save each step outlined. At the end of this lesson, students should have an html document containing; ordered lists, unordered lists, nested lists and definition lists. It will be useful to include personal details of education, jobs and interests in the worked examples to build up students CV's for inclusion on their web pages. You will be required to send the resulting html source code in the training report sheet below. Unordered Lists The term "unordered list" may be a bit unfamiliar to you, but you may have heard of the "bullet point list." That's exactly what an unordered list is -- a list of items, each one preceded by a "bullet point" (a distinctive character; typically, a small black circle). The list begins and ends with the tags <UL> and </UL> respectively. Each item in the list is marked using the <LI> tag, which stands for "List Item." <LI> has a corresponding </LI>, but this closing tag is not required to end the list item (although you could use one if you really wanted to). You can use as many list items as you like, up to your browser's built-in maximum, if any. Here's the markup for a simple list: <UL> <LI>Monday <LI>Tuesday <LI>Wednesday <LI>Thursday <LI>Friday </UL> If you loaded an HTML page containing the markup above, you would see the days of the week, each one preceded by a "bullet." To wit: Monday Tuesday Wednesday Thursday Friday Exercise: Use the above framework to list your educational history. eg, <UL> <LI>Aldridge Comprehensive School <LI>Sutton Coldfield College <LI>Birmingham College </UL> View this document in your web browser. Almost anything can be put into a list item -- line breaks, entire paragraphs, images, links, or even other lists. For example: <UL> <LI>Monday <LI>Tuesday <LI>Wednesday <UL> <LI>6am - 9am <LI>9am - 12n <LI>12n - 3pm <LI>3pm - 6pm </UL> <LI>Thursday <LI>Friday </UL> In the above case, under "Wednesday" in the 'outer list,' you would find another unordered list (the three-hour blocks of time), which is referred to as a nested list. Here's how it looks: Monday Tuesday Wednesday 6am - 9am 9am - 12n 12n - 3pm 3pm - 6pm Thursday Friday Exercise: This would be useful to include achievements at different educational periods, for eg, the O levels or GCSE's achieved at school. <UL> <LI>Aldridge Comprehensive school <UL> <LI>English Literature <LI>English Language <LI>Mathematics </UL> <LI>Sutton Coldfield College <UL> <LI>Psychology Alevel </UL> Use this as a framework to illustrate your education as you would want it in your CV. In theory, you could probably nest lists indefinitely, but too many nested lists can look untidy and confusing. Ordered Lists On the face of it, ordered lists look a lot like unordered lists, and a lot of the same rules apply to both constructs. The only difference in HTML is that instead of using <UL> and </UL>, an ordered list is contained within the tags <OL> and </OL>. Ordered lists are based on list items, just as unordered lists are. However, when an ordered list is displayed in a Web browser, it uses an automatically generated sequence of item markers. In other words, the items are numbered. The markup for a simple ordered list, based on the first example in this chapter: <OL> <LI>Monday <LI>Tuesday <LI>Wednesday <LI>Thursday <LI>Friday </OL> The above markup will look similar to the previously discussed simple unordered list, with the important difference that each day of the week is numbered instead of preceded by a "bullet." In other words, it looks like this: Monday Tuesday Wednesday Thursday Friday Ordered lists are as nestable as unordered lists, and you can nest unordered lists in ordered lists, as well as the other way around. This can get pretty complicated, but sometimes it's what you need. Exercise: The ordered listing is probably not that relevant to your CV, but have a practice anyway using the above example. Definition Lists As you might expect, definition lists begin and end with the tags <DL> and </DL>. However, unlike the unordered and ordered lists, definition lists are not based on list items. They are instead based on term-definition pairs. Here's the markup for a basic definition list: <DL> <DT>Do <DD>a deer, a female deer <DT>Re <DD>a drop of golden sun <DT>Mi <DD>a name I call myself <DT>Fa <DD>a long, long way to run <DT>Sol <DD>a needle pulling thread <DT>La <DD>a note to follow so <DT>Ti <DD>a drink with jam and bread </DL> A good way to think of it is that <DT> stands for "Definition-list Term" and <DD> stands for "Definition-list Definition." When the above list is displayed, it arranges the elements such that each term is associated with the corresponding definition. The exact arrangement of elements may vary from browser to browser. Here's how the above markup comes out: Do a deer, a female deer Re a drop of golden sun Mi a name I call myself Fa a long, long way to run Sol a needle pulling thread La a note to follow so Ti a drink with jam and bread Similar to ordered and unordered lists, definition lists can be arbitrarily long. Almost any structure can be placed in a <DD> tag, but putting large-scale structures (such as paragraphs, headings, and other lists) in the <DT> tag is not legal, according to the HTML Specification 2.0. You can leave out one part of a DT-DD pair, but this is not recommended. Definition lists are perfect for creating glossaries. Exercise: To practise using definition lists, students should repeat the first exercise using the definition list to add dates to their educational details In the next lesson, we'll see out how to spice up text even more by using style tags. training report sheet Use the information already covered to answer the following questions:- Email address Name 1 Individual items in an ordered list are marked using: <UL> <OL> <item> <1> <LI> 2 Unordered list items use a different tag than ordered lists. True False 3 Definition lists are based on: glossaries term-definition pairs a lot of work playdough 4 Lists cannot be nested within each other. true false 5 Place the source HTML code from this session into this box.