Categories


Using HTML Lists - Part 2

We’ve covered ordered and unordered lists, different standard markers, i.,e, ‘bullets’, and given you some helpful tips in Part 1 of Using HTML Lists.  Now we’re going to cover using custom markers and  creating definition lists.  

Custom Markers

If you want your own unique markers you can easily use your own image.   You should know that in order for the image to be visible, the image must  be uploaded to the Internet, either to your own domain, to your blog or to one of the free picture hosting sites.

To use custom markers you will need to do two things.

  1. Include a line of code in the ‘style sheet’. (Read about style sheets)
  2. Change the
      code in the portion of the  HTML document

The code to be included in the style sheet portion of the document will look like:

Once you have the the code in the style sheet – located in the tag – you need to use a different bit of code in the of your unordered list.   This code will look like:

  • First list line
  • Second list line

For our example of an unordered list, we’ll used a pink diamond as our custom marker – named ‘loz.gif’.  The table below shows you the code for the style sheet, the code for the body and what the results would look like.

You can use custom markers for the whole list or for only special lines of the list. You can also remove custom markers by using this code in the style sheet: list-style-image:none.

Some helpful hints to consider when creating your own custom markers:

  • By default, markers are approximately 15 x 15 pixels in size
  • If your marker image is larger than the ‘default size’, some browsers will overlap them
  • In the code, there should be no spaces between url and the opening ( )
  • You should use absolute URLs for the marker location (Read about absolute URLs)

Definition Lists

In (X)HTML, definition lists have a special tag. This type of list is suited for use with a glossary, however, it works well with any application that combines a word or phrase with a longer description.

For example, to create a definition list you would use the following code:

Word

Definition

where. . .

defines the beginning of the list

opens the the word/phrase(1) to be defined

closes the word/phrase(1) to be defined

opens the definition of word/phrase(1) to be defined

closes the definition of word/phrase(1) to be defined

defines the end of the definition list

You can have more than one

line in your definition list or more than one
line to accommodate multiple words or definitions. Another thought is that you can control the formatting of your definition terms to help them stand out. For example, you may want the word bold with the definition in italics.

Conclusion

Using lists is an easy way to present information, how-to instructions or give  directions. You can even nest lists to create a unique presentation or outline format. To learn more about the advanced features available using HTML lists get the Elizabeth Castro HTML for the World Wide Web Quickstart Guide from Amazon by visiting this link:   Get My HTML Quickstart Guide Now

Check back next week when we’ll cover how to indent lists and how to start a list with a number other than 1 in  Using HTML List – Part 3


Comments are closed.