HTML Post #2: Lists & Links
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.
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:
- Step 1.
- 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>
- Step I.
- Step II.
Here are the different ordered list style types:
|upper-roman||Uppercase Roman Numerals|
|lower-roman||Lowercase Roman Numerals|
|upper-greek||Uppercase Greek Letters|
|lower-greek||Lowercase Greek Letters|
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:
Here’s that unordered list in HTML:
<ul> <li>none</li> <li>circle</li> <li>disc</li> <li>square</li> </ul>
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:
Which would like like:
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>
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>
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!