The Computer Guy

Lists

There are two basic types of lists in HTML: ordered and unordered. Unordered lists are bullet lists. Ordered lists are numbered. Each item in the list is housed in between opening and closing “li” tags.

Ordered Lists

A simple numbered list is surrounded by opening and closing “ol” tags. Here is a quick example:

<ol>
<li>Step 1.</li>
<li>Step 2.</li>
</ol>

This looks like:

1. Step 1.
2. Step 2.

You can use a different marker, just as lowercase letters, uppercase letters, and roman numerals.  This is done by styling the list. Here’s how to do roman numerals:

<ol style="list-style-type: upper-roman">
<li>Step I.</li>
<li>Step II.</li>
</ol>

1. Step I.
2. Step II.

Here are the different ordered list style types:

upper-letter	Uppercase Letters
lower-letter	Lowercase Letters
upper-roman	Uppercase Roman Numerals
lower-roman	Lowercase Roman Numerals
upper-greek	Uppercase Greek Letters
lower-greek	Lowercase Greek Letters
decimal	Regular Numbers
decimal-leading-zero	Leading Zero

Unordered Lists

These are almost identical to ordered lists. Instead of “ol”, you use “ul”. The default list style type is a bullet. Here are the unordered types:

• none
• circle
• disc
• square

Here’s that unordered list in HTML:

<ul>
<li>none</li>
<li>circle</li>
<li>disc</li>
<li>square</li>
</ul>

Links

A link is super easy to do.  It’s an “a” tag.  The tag has an “href” attribute that contains the url, just like the “style” attribute contained the styling information. Here’s a quick example:

<a href="http://example.com/">Example.com</a>

Which would like like:

Example.com

You can also tell the browser to open the link in a new window/tab by using the “target” attribute:

<a href="http://example.com/" target="_blank">Example.com in a new window/tab</a>

Example.com in a new window/tab

You can even style the “a” tag to set the color and  remove the underline:

<a href="http://example.com/some_web_page.html" style="color: black; text-decoration: none">Example.com</a>

Example.com

Yes, you can set the color of any text with that style attribute. Also note that multiple styles are separated by a semicolon, and it does not matter the order of the styling when put in the “style” attribute, so long as there’s nothing conflicting.

Well, that’s pretty much it for lists & links. The next post is all about images, so check back!

Tags: howto, html, tutorial

This entry was posted on Tuesday, November 17th, 2009 at 6:30 am by James and is filed under Programming, Web. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.