IMAGE 'BULLETS' AND LISTS

(USING ICONS)

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. While the examples here all go to one page, you will make a different link to another web page for each item in the list.

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</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>
<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> <A HREF="page2list.html">Text or URL goes here</A>
</P>




RETURN TO OTTER PLACE FAQS PAGE   HTML STUDENT RESOURCE PAGE






Tutorial designed and created by Otter

Copyright © 1997-2005 Otter Sites for Virtual University. All Rights Reserved.