IMAGE 'BULLETS' AND LISTS

(USING ICONS)

PLEASE NOTE:  Yahoo! seemed to have trouble holding the code for character entities on this page -- you may copy any HTML code, but be aware that all tags with brackets < > have an extra space either before or after the bracket. If you copy and paste code from this page, you must remove those spaces for the HTML code to work properly,

There are a number of ways to create lists using "images" (icons) instead of "bullets" or "numbers". These lists can be used as links to other web pages.

Below are some examples and the HTML code that was used. You may copy the code to use on your web site and experiment with it.

USE OF "DEFINITION LIST":

EXAMPLE :   Both the image and the text are clickable links!

FLASHING LIGHT Text or URL goes here
FLASHING LIGHT Text or URL goes here
FLASHING LIGHT Text or URL goes here

HTML code used for above "example":

< DL >
< DD > < A HREF="page2list.html"> < IMG SRC="point6.gif" WIDTH="13" HEIGHT="13" BORDER="0"ALT="FLASHING LIGHT" > < /A > < A HREF="page2list.html">Text or URL goes here
< DD > < IMG SRC="point6.gif" WIDTH="13" HEIGHT="13" BORDER="0"ALT="FLASHING LIGHT" > < /A > < A HREF="page2list.html">Text or URL goes here < /A >
< DD > < A HREF="page2list.html" > < IMG SRC="point6.gif" WIDTH="13" HEIGHT="13" BORDER="0"ALT="FLASHING LIGHT" > < /A > < A HREF="page2list.html">Text or URL goes here < /A >
< /DL >

If you want to "indent" the list further or "center" it, add either the
< BLOCKQUOTE > < /BLOCKQUOTE > tags or the < CENTER > < /CENTER > tags before and after the < DL > < /DL > tags.

Example using < BLOCKQUOTE > < /BLOCKQUOTE > :

FLASHING LIGHT Text or URL goes here
FLASHING LIGHT Text or URL goes here
FLASHING LIGHT Text or URL goes here

Example using < CENTER > < /CENTER > :

FLASHING LIGHT Text or URL goes here
FLASHING LIGHT Text or URL goes here
FLASHING LIGHT Text or URL goes here



USE OF "MANUALLY FORMATTED < UL > < /UL > LIST":

Use the standard "Unordered List" tags:   < UL > < /UL > ---- BUT, "replace" the < LI > tags with < BR > so the bullets won't show.

HTML code used for above "example":

< UL >
< BR > < A HREF="page2list.html" > < IMG SRC="point6.gif" WIDTH="13" HEIGHT="13" BORDER="0"ALT="FLASHING LIGHT" > < /A > < A HREF="page2list.html" > Text or URL goes here < /A >
< BR > < A HREF="page2list.html" > < IMG SRC="point6.gif" WIDTH="13" HEIGHT="13" BORDER="0"ALT="FLASHING LIGHT" > < /A > < A HREF="page2list.html" > Text or URL goes here < /A >
< BR > < A HREF="page2list.html" > < IMG SRC="point6.gif" WIDTH="13" HEIGHT="13" BORDER="0"ALT="FLASHING LIGHT" > < /A > < A HREF="page2list.html" > Text or URL goes here < /A >
< /UL >

If you want to "indent" the list further or "center" it, add either the
< BLOCKQUOTE > < /BLOCKQUOTE > tags or the
< CENTER > < /CENTER > tags before and after the < UL > < /UL > tags as illustrated above.



ALIGNING AT LEFT MARGIN:

To have your list aligned at the far left side of the page, don't use "list tags". Just form a new paragraph using the opening and closing < P > < /P >, insert your information in between them and use < BR > to form separate lines:

FLASHING LIGHT Text or URL goes here
FLASHING LIGHT Text or URL goes here
FLASHING LIGHT Text or URL goes here

HTML code used for above "example":

< P >
< BR > < A HREF="page2list.html" > < IMG SRC="point6.gif" WIDTH="13" HEIGHT="13" BORDER="0"ALT="FLASHING LIGHT" > < /A > < A HREF="page2list.html" > Text or URL goes here < /A >
< BR > < A HREF="page2list.html" > < IMG SRC="point6.gif" WIDTH="13" HEIGHT="13" BORDER="0"ALT="FLASHING LIGHT" > < /A > < A HREF="page2list.html" > Text or URL goes here < /A >
< BR > < A HREF="page2list.html" > < IMG SRC="point6.gif" WIDTH="13" HEIGHT="13" BORDER="0"ALT="FLASHING LIGHT" > < /A& gt; < A HREF="page2list.html" > Text or URL goes here < /A >
< /P >




RETURN TO OTTER PLACE FAQS PAGE   HTML STUDENT RESOURCE PAGE






Designed and maintained by Otter Sites Web Design
Copyright is claimed by Otter Sites Web Design to the entire body of this collection, as an entity, and to the HTML code which presents it as a collection. Otter Sites has received expressed permission for use of public domain and other privately owned works on this web site.

The content of this site, in part or in full, may not be reproduced, published, transmitted, uploaded, modified or distributed in any manner without Otter Sites prior written permission. Otter Sites Web Design is not responsible for material presented on third party linked sites.

Copyright © 1997-2002 Otter Sites.  All Rights Reserved.








Otter Sites does not endorse any banner ads placed on this site by a third party.