This web page created by Kathleen M. Weber on February 4th, 1998.
Using Lists in HTML
Lists are a useful way of presenting information in a easily readable format. Lists are often used to create an "outline" effect or on web pages to present a list of "Hot Links". There are several TYPES of lists which can be be used on web pages; we will discuss the two most common in this lesson, unordered and ordered lists.
The unordered list is made of the opening and closing tags <UL></UL>. (A list heading <LH></LH>, can be placed after the <UL> at the beginning of the list if desired.) The items to be listed will be placed between the <UL></UL>tags. by using <LI> (with no closing tag needed) to indicate each "list item" There is an automatic line break between list items. To create an additional line space you can use the <P> tag in front of each list item.
The HTML for the unordered list above would be written like this:
<UL><LH>Ghatten's favorite things:</LH>
<LI>Cats
<LI>The Web
<LI>Cajun Food
</UL>
For variety, you can change the TYPE of bullet used to set off the list items in an unordered list by adding TYPE to the LI as below:
<LI TYPE="ROUND">
These are examples of the bullet TYPES available for unordered lists:
The DISC style bullet is the usual default for unordered lists. Additionally, not all browsers distinguish the bullet types, so it is generally suggested if you decide to change the TYPE that the change not be used to signify any important difference among the listed items.
Ordered Lists:
Ghatten's Favorite TV Shows
Not quite as common but also very useful are lists that are numbered rather than simply bulleted. This type of list is called and ORDERED list. The opening and closing tags for an ordered list are <OL></OL>. <LI> is used to indicate each item on the list here as well, except the default is Arabic numeral 1, 2, 3, and so on. It is possible to alter the default to show Roman numerals, and upper and lowercase letters as well.
This is how you would write the list as above:
<OL>
Ghatten's Favorite TV Shows
<LI>Babylon 5
<LI>JAG
<LI>Star Trek: Deep Space Nine
</OL>
Lists can be NESTED for versatility. This is especially good if you are creating an outline. Nesting a list involves placing one list inside another. In the example below a few points are bulleted about each of Ghatten's favorite TV shows by nesting UNORDERED LISTS within the ORDERED LIST.
EXAMPLE:This is the HTML for the list
Ghatten's Favorite TV Shows and Why She Likes Them.
<OL>
<LI>Babylon 5
<UL>
<LI> Amazing storyline</LI>
<LI> Incredible characters</LI>
<LI> Bruce Boxleitner</L>
</UL>
<LI>JAG
<UL>
<LI> David James Elliott</LI>
<LI> Lots of action</LI>
<LI> Strong female character as co-star</LI>
</UL>
<LI>Star Trek: Deep Space Nine
<UL>
<LI> I'm a Trekker from way back</LI>
<LI> Lots of action</LI>
<LI>Interesting storyline.</L>
<LI> Avery Brooks</LI>
</UL>
</OL>
This is how the list would look on a web page:
My Favorite TV Shows
Note: Did you notice that the <LI> tag was used both with an without a closing </LI> ? This is because the closing half of this tag is optional. For consistency purposes, it is advisable to use BOTH halves of the tag.
Hyperlinks: Moving Around on the Web
Hyperlinks give you great flexibility in your page design. You can use these to jump from your page to another page somewhere else on the WWW, to jump to another page you have created and even from place to place in a single web page. Below is a simplified explanation of URL's and "How-to" create the most basic types of links. Please research on your own for more details. A short list of basic resources is below.The information you use to create a link is called an URL (pronounced "earl") for "uniform resource locator". It is probably easiest to think of an URL as a "web address". URLs are divided up into several parts. The first part is the "protocol"; the protocol tells the browser the method in which the information to be accessed is stored. For this class, your URLs will usually begin with the protocol HTTP, for hypertext transfer protocol. The HTTP portion is followed by a colon, :, and two forward slashes, //. The next part of the URL is the server name and the domain. This is the part that tells the browser what server to access for the information. These take on various formats such as (but not limited to!) "www.geocities.com", "horizons.org" or "rutgers.edu". The final part of the address is the path to the exact document or image you want to have the browser open up to view. This may simply be a single file name like "index.html" or it may be a more detailed path. The exact path for your files should be available through your server's administrator.
Be sure you type the URL exactly as it appears. URLs may be case sensitive in some instances, so it is best to copy an URL EXACTLY with upper and lowercase letters as they appear. (Copying the URL from your browser's location window and pasting it into your document can save time and prevent mistakes.) If you do make a mistake, you will probably get an error message, for example: "404 Error" or "File Not Found". It is always a good idea to check your URLs to be sure they work.
This tag is called an anchor tag. It directs the browser to look at the location you typed for the given HTML document. The text typed between the opening and closing anchors will create the underlined "link" to the document or image. When "clicked" by using the mouse button, will activate the link and take the visitor to the web page indicated by the information in the link.
Links to Other Pages of Your Own:
The easiest link to make is a link to a second page of your own. Anchor tags can be used to direct the browser to other web pages or images that you have stored on your server. You will still need to know your URL. If your server allows you to store all of your webpages in a single directory, and most do, it will be very easy. You would simply make a link to the page by using the name of the HTML file as the URL..
EXAMPLE:If you wanted to place a link on your first page to your second page and the name of the second page was "page2.html" you would set the link up like this:
<A HREF="page2.html">My Second Page</A>
If you have a question about the path for your files and how the URL should look, it's best to check with your server. They should be able to tell you how the path to your files or images should read in general and from there you should be able to determine the specifics.
Links to Other Webpages:
Creating links to other pages also fairly easy The basic tag for creating a link is:
<A HREF="http://www.theserver.the domain/thepagename.html">Type clickable text here</A>
You can get the information to place in a link to a different page by copying and pasting the information from your browser's location window.
Linking Within A Document:
Many web pages present a large amount of content in one long document. This document is a good example. Note that some of the links at the top of the page in the table carry you to points further down on the document. At the end of each section a special link-- here is what it looks like!:
Back to the Lesson 2 Main Index
This link is provided to take you back to the top in case you do not want to read the next section but would rather select another item from the menu. When you are making a long document with lots of content it is a good idea to do this and to provide navigational links to points within the document to make it easier to maneuver around the web page for viewers. The type of ANCHOR tag which accomplishes this effect has two parts.
First you create a link on the page which can be clicked to allow your user to "jump"
Place HTML which looks similar to this <A HREF="#Cats">Cats</A>
where you want to have a navigational aid or a "jump to" called "Cats" will create a link within your document to the place you have NAMED "Cats". Note the use of the "#" before the keyword in the link.
The second part of this type of link requires an anchor tag created with "NAME" instead of "HREF" (<A NAME=>) .
For the example given here it would read:
<A NAME="Cats"> Cats are great yadda yadda yadda......</A>
Now if someone uses the link for Cats they will be brought down to the portion of your document dealing with cats.
A handy "jump to" to use on your web pages, even if it is the ONLY one, is to <A NAME="top"> at the top of your page, with the <A HREF="#top">Back to the Top</A> placed at the bottom. This will allow people to jump back up to the top of the page, rather than having to scroll all the way back.
"MAILTO" Links
<A HREF="MAILTO:yourname@your.provider">Email Me</A>
Replacing "yourname" with the portion of your email address before the "@" sign and replacing "your.provider" with the portion of your email address after the "@" sign creates an email link. For example the email link for this class would be: <A HREF="MAILTO:htmlclass@vu.org">htmlclass@vu.org</A> Email links should open up a box in which the user can type an email message. It's a good idea place an email link on your page for feedback and other comments. You should know that not all browsers can use a "MAILTO" link. The ability depends on the way the browser is set up to work with the email program. Persons using Netscape with Netscape mail will usually have no trouble. Persons using other email programs may not be able to use this feature. It's a good idea to provide your email address in addition by using that as the clickable portion of the link.
A Few Resources Regarding URLs and Links:
A Beginner's Guide to URLS
Gives not just HTTP, but other URL types as well.
Another URL Explanation
Describes the commonly used domain names.
A description on how links are written
Scroll down to find the area. This page could benefit from some "jump to" links!!
End of Study Tips for 01/26/98.
This web page created by Kathleen M. Weber on February 4th, 1998.
