1 / 25

XHTML

XHTML. Lists. Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists. Lists. Unordered <ul> </ul> Ordered <ol> </ol> Definition <dl> </dl>. Creating Lists.

uma-ashley
Download Presentation

XHTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. XHTML Lists

  2. Lists • There are three types of lists available in XHTML • Unordered or bulleted lists • Ordered or numbered lists • Definition or directory lists

  3. Lists • Unordered <ul> </ul> • Ordered <ol> </ol> • Definition <dl> </dl>

  4. Creating Lists • Unordered and Ordered Lists use two tags • <ul> or <ol> to begin the list • <li> to begin each list item Note: Remember there must be a closing tag for each opening tag.

  5. Unordered Lists • Used to list any series of items that have no particular order.

  6. Unordered Lists <p>Things to do today:</p> <ul> <li>Pick up dry cleaning</li> <li>Grocery shopping</li> <li>Pay bills</li> </ul>

  7. Unordered Lists <p>Things to do today:</p> <ul> <li>Pick up dry cleaning</li> <li>Grocery shopping</li> <li>Pay bills</li> </ul> Notice the title of the list goes before the <ul> tag and is enclosed in the paragraph block element.

  8. Unordered Lists Things to do today: • Pick up dry cleaning • Grocery shopping • Pay bills

  9. Ordered Lists • Perfect for explaining step-by-step instructions for how to complete a particular task or for creating an outline of a larger document.

  10. Ordered Lists <ol> <li>Logon to the computer</li> <li>Open your journal</li> <li>Write your Glossary word</li> <li>Wait for instructions</li> </ol>

  11. Ordered Lists 1. Logon to the computer 2. Open your journal 3. Write your Glossary word 4. Wait for instructions

  12. Definition Lists • Particularly suited to glossaries, but works well with any list that pairs a word or phrase with a longer description.

  13. Definition Lists • Consist of a term, followed by an indented definition. • Use three tags: • <dl> </dl> - begin the list • <dt> </dt> - definition term • <dd> </dd> - definition

  14. Definition Lists <dl> <dt>A</dt> <dd>apples</dd> <dd>artists</dd> <dt>B</dt> <dd>bugs</dd> <dd>balloons</dd> </dl>

  15. Definition Lists A apples artists B bugs balloons

  16. Nesting Lists • You can nest lists within lists. <ol> <li>item a</li> <li>item b</li> <li>item c <ul> <li>item one</li> <li>item two</li> </ul> </li> </ol>

  17. Nesting Lists 1. item a 2. item b 3. item c • item one • item two

  18. list-style-type • By default, unordered lists use a disc for each item and ordered lists use numbers. • You can change the appearance of either by including the list-style-type property in a style attribute

  19. Style attribute - unordered <ul> <li>Item one </li> <li> Item two </li> </ul> <ul style="list-style-type: circle"> <li>Item one </li> <li> Item two </li> </ul> <ul style="list-style-type: square"> <li>Item one </li> <li> Item two </li> </ul>

  20. Style attribute - ordered <ol> <li>Item one </li> <li> Item two </li> </ol> <ol style="list-style-type: upper-alpha"> <li>Item one </li> <li> Item two </li> </ol> <ol style="list-style-type: lower-alpha"> <li>Item one </li> <li> Item two </li> </ol>

  21. Style attribute - ordered <ol style="list-style-type: upper-roman"> <li>Item one </li> <li> Item two </li> </ol> <ol style="list-style-type: lower-roman"> <li>Item one </li> <li> Item two </li> </ol>

  22. Comments – Why? • To remind you (or future editors) what you were trying to achieve with your HTML tags. • Great way to add reminders to your text.

  23. Comments – Why? • A comment will be ignored by the browser. • You can use them to keep track of revisions.

  24. Comments – How? • Comments start with <!-- • Comments end with --> • Example <!-- Last modification on 10/3/01 -->

  25. Assignment • Exercise 6: Creating lists • Independent Practice: List Assignment

More Related