(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!
Text or URL goes here
Text or URL goes here
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> :
Text or URL goes here
Text or URL goes here
Text or URL goes here
Example using <CENTER> </CENTER> :
Text or URL goes here
Text or URL goes here
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:
Text or URL goes here
Text or URL goes here
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>
Tutorial designed and created by Otter
Copyright © 1997-2005 Otter Sites for Virtual University. All Rights Reserved.