Lists in HTML

This lecture notes is based on Prof Doreen De Leon's lectures.

Reading

Sebesta Section 2.7

Unordered Lists

The <ul> tag
- Indicates unordered list of items.
- Each item designated by <li> preceding it.
- Items are bulletted.
- Attributes:
  - id-- used to label the list for reference.
- We can change the bullet style using styles .
Example:
<h3>Hobbies</h3> <ul> <li>Chess</li> <li>Hiking</li> <li>Making Web Pages</li> </ul> creates the following:

Hobbies
- Chess
- Hiking
- Making Web Pages

Ordered Lists

The <ol> tag
- Items numbered, not bulletted.
- Attributes:
  - start-- lets you start numbering at whatever value you give.
- We can change the numbering style using styles
- Example:
  <p>Important things to remember:</p> <ol> <li>Make sure to include the DOCTYPE line in your HTML code. </li> <li>Always put the <code><html></code> tag immediately after the DOCTYPE line.</li> <li>Make sure to have both a <code><head></code> and a <code><body></code> tag </li> <li>Include an end tag for each tag.</li> </ol> creates the following:
  
  Important things to remember:
  1. Make sure to include the DOCTYPE line in your HTML code.
  2. Always put the <html> tag immediately after the DOCTYPE line.
  3. Make sure to have both a <head> and a <body> tag.
  4. Include an end tag for each tag.

The <li> Tag

Can set the type of bullet or numbering for an individual item.
Changing numbering style does not affect the order.
Ordered and unordered lists can be nested
- Unordered: bullets change automatically.
- Ordered: use styles to do nesting, e.g., like outlines.
- Can nest ordered and unordered lists within each other.

Definition Lists

The <dl> tag
- <dt> tag denotes the term
- <dd> denotes the definition
Example:
<h3>HTML Definitions</h3> <dl> <dt>the <code><a></code> tag</dt> <dd>used to anchor or refer to other documents or another place in the same document</dd> <dt>the <code>href</code> attribute</dt> <dd>specifies the URL of the target of the link</dd> </dl> creates the following:

HTML Definitions

the <a> tag

used to anchor or refer to other documents or another place in the same document

the href attribute

specifies the URL of the target of the link

Example

(By Prof Ron Clark)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Lists</title>
</head>

<body>
<p>Here are Sklansky's top ten Texas Hold'Em starting hands:</p>

<ol>
<li>AA</li>
<li>KK</li>

<li>QQ</li>
<li>JJ</li>
<li>AKs</li>
<li>TT</li>
<li>AQs</li>
<li>AJs</li>
<li>KQs</li>
<li>AK</li>
</ol>

<p>Here are some popular poker forms:</p>

<ul>
<li>Limit Texas Hold'em</li>
<li>Seven Card Stud</li>
<li>No-Limit Texas Hold'em</li>
<li>Pot Limit Omaha Hi-Lo</li>
</ul>

<p>Some poker vocabulary:</p>

<dl>
<dt>Ajax</dt><dd>A-J in the hole</dd>
<dt>Big Slick</dt><dd>A-K in the hole</dd>
<dt>Fifth Street</dt><dd>The fifth communtity card in Texas Hold'em</dd>
</dl>

</body>
</html>

Here are Sklansky's top ten Texas Hold'Em starting hands:

Here are some popular poker forms:

Limit Texas Hold'em
Seven Card Stud
No-Limit Texas Hold'em
Pot Limit Omaha Hi-Lo

Some poker vocabulary:

Ajax: A-J in the hole
Big Slick: A-K in the hole
Fifth Street: The fifth communtity card in Texas Hold'em