XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered...
-
Upload
rebecca-carson -
Category
Documents
-
view
239 -
download
0
Transcript of XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered...
![Page 1: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/1.jpg)
XHTML
Lists
![Page 2: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/2.jpg)
Lists
There are three types of lists available in XHTMLUnordered or bulleted listsOrdered or numbered listsDefinition or directory lists
![Page 3: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/3.jpg)
Lists
Unordered <ul> </ul> Ordered <ol> </ol> Definition <dl> </dl>
![Page 4: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/4.jpg)
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.
![Page 5: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/5.jpg)
Unordered Lists
Used to list any series of items that have no particular order.
![Page 6: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/6.jpg)
Unordered Lists
<p>Things to do today:</p><ul><li>Pick up dry cleaning</li><li>Grocery shopping</li><li>Pay bills</li>
</ul>
![Page 7: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/7.jpg)
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.
![Page 8: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/8.jpg)
Unordered Lists
Things to do today:• Pick up dry cleaning• Grocery shopping• Pay bills
![Page 9: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/9.jpg)
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.
![Page 10: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/10.jpg)
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>
![Page 11: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/11.jpg)
Ordered Lists
1. Logon to the computer2. Open your journal3. Write your Glossary word4. Wait for instructions
![Page 12: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/12.jpg)
Definition Lists
Particularly suited to glossaries, but works well with any list that pairs a word or phrase with a longer description.
![Page 13: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/13.jpg)
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
![Page 14: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/14.jpg)
Definition Lists
<dl><dt>A</dt>
<dd>apples</dd><dd>artists</dd>
<dt>B</dt><dd>bugs</dd><dd>balloons</dd>
</dl>
![Page 15: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/15.jpg)
Definition Lists
Aapplesartists
Bbugsballoons
![Page 16: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/16.jpg)
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>
![Page 17: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/17.jpg)
Nesting Lists
1. item a2. item b3. item c
• item one• item two
![Page 18: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/18.jpg)
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
![Page 19: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/19.jpg)
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>
![Page 20: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/20.jpg)
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>
![Page 21: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/21.jpg)
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>
![Page 22: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/22.jpg)
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.
![Page 23: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/23.jpg)
Comments – Why? A comment will be ignored by the
browser. You can use them to keep track of
revisions.
![Page 24: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/24.jpg)
Comments – How? Comments start with <!-- Comments end with --> Example
<!-- Last modification on 10/3/01 -->
![Page 25: XHTML Lists. There are three types of lists available in XHTML Unordered or bulleted lists Ordered or numbered lists Definition or directory lists.](https://reader035.fdocuments.net/reader035/viewer/2022062305/5697bfb81a28abf838c9f183/html5/thumbnails/25.jpg)
Assignment Exercise 6: Creating lists Independent Practice: List
Assignment