Embed Size (px)
DESCRIPTION
Citation preview
<HTML> Lists
Have you ever
created a
top 10 list?
<HTML
> Lists
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Or wanted to
itemize
something?
<HTML>
Lists
• Apples
• Oranges
• Bananas
This is done
with 3 types of
HTML list tags
<HTML>
Lists
• Unordered List
• Ordered List
• Definition List
Lets first look at Unordered List
<HTML>
Lists
• Apples
• Oranges
• Bananas
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
Lets first look at Unordered List
<HTML>
Lists
• Apples
• Oranges
• Bananas
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
Unordered list are created using the <ul> tag
Lets first look at Unordered List
<HTML>
Lists
• Apples
• Oranges
• Bananas
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
Then each item uses the <li> tag to separate them
Q: Bullets are nice, but what if I
want numbers?
<HTML>
Lists
1.Yellow Ball 2.Blue Ball 3.Red Ball 4.Purple Ball
A: This is done with
Ordered List and the <ol> tag.
Lets look at Ordered List
<HTML>
Lists
1.Yellow Ball 2.Blue Ball 3.Red Ball 4.Purple Ball
<ol>
<li>Yellow Ball</li>
<li>Blue Ball</li>
<li>Red Ball</li>
<li>Purple Ball</li>
</ol>
The parent tag is now <ol>
but the <li> tags stay.
study
the devotion of time and attention to acquiring
knowledge
design
a plan or drawing produced to show the look
and functionality
work
a person’s regular occupation, profession, or
trade
<HTML
> Lists
Next...Definition Lists
First, a different parent tags
<HTML>
Lists
<dl>
<dt>study</dt>
<dd>the devotion of time and attention to acquiring knowledge </dd>
<dt>design</dt>
<dd>a plan or drawing produced to show the look and functionality</dd>
<dt>work</dt>
<dd>a person’s regular occupation, profession, or trade</dd>
</dl>
definition list <dl>
Second, there are now 2 tags
<HTML>
Lists
<dl>
<dt>study</dt>
<dd>the devotion of time and attention to acquiring knowledge </dd>
<dt>design</dt>
<dd>a plan or drawing produced to show the look and functionality</dd>
<dt>work</dt>
<dd>a person’s regular occupation, profession, or trade</dd>
</dl>
definition description <dd>
definition term <dt>
Give it a try
LeanIT.am has a complete online reference
and example section that will give you more
detailed information and also working samples.
Click to View the HTML List Reference
<HTML
> Lists
![Lists (& Sequences) · Representing Lists Wrong Correct 9/19/16 Lists & Sequences 7 x = [5, 7, 4,-2] x id1 id1 0 1 2 3 5 7 4-2 x 5, 6, 7, -2 Box is “too small” to hold the list](https://img.pdfslide.us/doc/110x75/5fd7ee82b4b1d72fd4791c1d/lists-sequences-representing-lists-wrong-correct-91916-lists-sequences.jpg)
