Transcript Lists, Links and Anchors

Lists,
Links and Anchors
Masters Project CS 490
Kevin Murphy
Lists

Unordered or bulleted lists

Ordered or numbered lists

Definition lists

Nested lists
Kevin Murphy
Unordered or
Bulleted Lists
Each list begins with the <UL> tag
 Each list ends with the </UL> tag
 Each list item has a <LI> tag
 Each item is indented and bulleted

- 3 bullet types—disc, circle, square
- Disc is default bullet
- Change: <LI TYPE=square>
Kevin Murphy
Ordered or
Numbered Lists
<OL>, </OL>
 <LI>
 <OL TYPE=A>

- TYPES=A, a, I, i, 1
Kevin Murphy
Examples
<UL>
<LI>Mailing Lists
<LI>Newsgroups
</UL>
<OL>
<LI>The first step is...
<LI>The second step is...
</OL>
Kevin Murphy
Definition or
Glossary Lists
<DL>
<DT>URL
<DD>Uniform Resource Locator
<DT>ISP
<DD>Internet Service Provider
</DL>
Kevin Murphy
Nested Lists
<UL>
<LI>Fresh Seafood
<UL>
<LI>Crab
<UL>
<LI>Alaskan King
<LI>Washington Red
</UL>
<LI>Halibut
</UL>
<LI>Vegetarian Dishes
</UL>
Kevin Murphy
Links
Links are a distinguishing feature of the
World Wide Web. You can use them to
move from page to page, call up a
graphic, sound file, or even a movie,
and download files.
Samples:
<A HREF=“page.html”>Label text</A>
<A HREF=“http://www.neiu.edu/path/page.htm”>Label</A>
<A HREF=“#anchor name”>Label</A>
Kevin Murphy
Anchors
Clicking on a link generally takes the user to
the top of the linked page.
Anchors are needed to jump to a specific
section of a Web page.
<A NAME=“anchor name”>(Description)</A>
Kevin Murphy
Links & Anchors

Link—Provides text or an object that the user
can click and the user’s display automatically
“jumps” to the pre-programmed location.
- <A HREF=“#crab”>Crab</A>
(HREF stands for Hypertext Reference)

Anchor—Location the user’s display jumps to
when the Link item is clicked.
- <A NAME=“crab”>(A heading, etc.)Crab</A>
Kevin Murphy
Creating Links
Hints

Rather than typing a complicated URL, go
to that Web page in your browser, copy the
URL in the location box, return to your code,
paste the URL directly into the HTML
document.

It is usually best to write the text for a page
first. Then, highlight appropriate words from
the text to use as links.
Kevin Murphy
Another Suggestion

Use descriptive text, rather than Click
Here, in your links to give the user info on
which to judge interest in pursuing the
link.
- Click here to see good design. (Bad example)
- The Tri-City Florists Web site received the
1999 Great Design Award from WebMaster
Magazine.
- The WebMaster’s International Web site has
a tutorial on Web design basics.
Kevin Murphy
Problems?
If a Link doesn’t work, . . .

Make sure the name of the file in the HREF
tag matches the name of the file on the disk.

Make sure upper and lowercase match since
links are case sensitive

Make sure both of the files are in the same
directory.

Check that the link is closed with an </A> tag.

Make sure that “ “ surround the filename.
Kevin Murphy
Next . . .

Watch a demonstration of creating
lists and links in an HTML document.

Try it—Enhance a Web page by
adding the proper HTML codes
yourself.
Kevin Murphy