Lists, Links and Anchors

1
Lists, Links and Anchors

• Masters Project CS 490

2
Lists

• Unordered or bulleted lists
• Ordered or numbered lists
• Definition lists
• Nested lists

3
Unordered orBulleted Lists

• Each list begins with the ltULgt tag
• Each list ends with the lt/ULgt tag
• Each list item has a ltLIgt tag
• Each item is indented and bulleted
• 3 bullet typesdisc, circle, square
• Disc is default bullet
• Change ltLI TYPEsquaregt

4
Ordered orNumbered Lists

• ltOLgt, lt/OLgt
• ltLIgt
• ltOL TYPEAgt
• TYPESA, a, I, i, 1

5
Examples

• ltULgt
• ltLIgtMailing Lists
• ltLIgtNewsgroups
• lt/ULgt
• ltOLgt
• ltLIgtThe first step is...
• ltLIgtThe second step is...
• lt/OLgt

6
Definition orGlossary Lists

• ltDLgt
• ltDTgtURL
• ltDDgtUniform Resource Locator
• ltDTgtISP
• ltDDgtInternet Service Provider
• lt/DLgt

7
Nested Lists

• ltULgt
• ltLIgtFresh Seafood
• ltULgt
• ltLIgtCrab
• ltULgt
• ltLIgtAlaskan King
• ltLIgtWashington Red
• lt/ULgt
• ltLIgtHalibut
• lt/ULgt
• ltLIgtVegetarian Dishes
• lt/ULgt

8
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
• ltA HREFpage.htmlgtLabel textlt/Agt
• ltA HREFhttp//www.neiu.edu/path/page.htmgtLabellt
  /Agt
• ltA HREFanchor namegtLabellt/Agt

9
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.
• ltA NAMEanchor namegt(Description)lt/Agt

10
Links Anchors

• LinkProvides text or an object that the user can
  click and the users display automatically
  jumps to the pre-programmed location.
  
• ltA HREFcrabgtCrablt/Agt
• (HREF stands for Hypertext Reference)
• AnchorLocation the users display jumps to when
  the Link item is clicked.
• ltA NAMEcrabgt(A heading, etc.)Crablt/Agt

11
Creating LinksHints

• 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.

12
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 WebMasters International Web site has a
  tutorial on Web design basics.

13
Problems?If a Link doesnt 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 lt/Agt tag.
• Make sure that surround the filename.

14
Next . . .

• Watch a demonstration of creating lists and links
  in an HTML document.
• Try itEnhance a Web page by adding the proper
  HTML codes yourself.