DIGI 220 - Links & Lists

VIU Media Studies Department - Robin Davies

Lecture Overview

  • Anchors
    • Anchor parts
    • Bookmarks
    • Other types of links
  • URL Review
  • Lists

Anchors

  • Anchors are created with the <a> element
  • Anchors have two required parts:
    Destination
    what happens when the viewer clicks on the link
    Label
    what the viewer clicks on
  • Anchors are commonly called links or hyperlinks (a vital part of hypertext!)

The Two Uses of Anchors

Anchors are used for two things:

  • To create links to another resource using the href attribute
  • To create a bookmark inside a document using the id attribute on the element to which you're linking
  • Let's look at some examples...

A Simple Link

  • Here is a simple link example to another website:
    • <a href="http://www.disney.com"> Mickey </a>
  • Note the two parts that are shown here:
    Destination
    http://www.disney.com
    Label
    Mickey

Notes for Links

  • Try to keep your labels short and descriptive (avoid "click here")
  • Never make an entire sentence a link, just the part that relates to the link
  • You can use CSS to format <a> elements so they look considerably better than the browser default
  • An <a> element may contain many other kinds of elements, except another <a> element
  • Traditionally an <a> element was not supposed to contain any block level elements, though this is OK with HTML5

Targets

  • The target attribute lets you control the browser, specifying where a destination will be displayed/loaded
  • You can use target to create a new window
  • The normal form of this attribute is:
    • target="windowname"
  • Or, use this for a new window
    • target="_blank"
  • What are some pros and cons for using the target attribute in this way?

Bookmarks

  • A bookmark (not a link) lets you navigate to a specific location within an HTML document
  • Use the id attribute on an element which begins the desired section of your page
    • <h2 id="dogs"> Dogs </h2>
  • To link to your bookmark, simply add the following to the <a> element functioning as your link:
    • <a href="#dogs"> Dogs </a>
  • Bookmarks can be used like this when building image galleries, as we'll see when we use CSS for layout

Other Kinds of Links

  • As well as linking to webpages, you can also link other media, including:
    • files, ftp sites, email addresses, RSS feeds
  • To link to a file, use the following structure:
    • <a href="http://robin.com/greattune.mp3"> ... </a>
  • If browser doesn't know how to handle the file, it will simply download it (more on this next week)
  • Let the user know details about downloadable content
    from the Louvre website, showing floorplans with file type and size

Using Images for Labels

  • You can use images for labels if you wish
  • All you have to do is insert an img element where the label goes
    • <a href="http://robin.com"> <img src="me.jpg" alt="tall, dark, and handsome" /> </a>
  • Don't forget the alt attribute!
  • Eventually you may want to use CSS to adjust the way borders on images are used in this context

title attribute for links

  • You can use the title attribute to tell the user a little more about where a link will take them
  • This is particularly useful if you're using an image as a link
  • Most browsers will display the title as a tooltip

<a title="Follow us on Twitter" href="http://twitter.com/BetheMediaRadio"><img src="logo_twit_small.png" alt="a lowercase T, grey on a white background" /></a>

a lowercase T, white on a black background

Review: URLs

  • Let's review URLs and URL structure
  • We'll look again at relative versus absolute addresses
  • As a general rule:
    • use relative URLs for links within your website
    • use absolute URLs for links to other websites

Absolute URL Structure

Absolute URLs typically consist of three pieces...

  • The naming scheme of access mechanism (protocol)
  • The name of the machine hosting the resource (server)
  • The name of the resource itself, given as a path
  • "http://robin.learnnewmedia.ca/220/05linkslists/"
  • This is all the information needed to find a unique page on the web

Relative URL Structure

  • Relative URLs only contain information to show how to find the resource starting from the current resource
  • A relative URL doesn't contain any scheme information, and generally refers to resource on the same machine as the current document
  • May contain relative path components (e.g. ".." to go up one level or "/" to drop into a folder)
  • "../images/cool_logo.png"
  • May contain bookmarks (as seen earlier!)
  • "../labs/lab03/#steps"

Relative URL Notes

So, let's say we want to navigate from an index file to the main css file for the site:


<a href="../../css/goodlooking.css"> ...

  • ".." means go up one level, to the parent folder, and "/" means go inside a folder

Links: One Last Thing...

You may have noticed that you should never, in a live website, have a URL that looks like this:

file:///Users/robin/220/class4/bookmarks.html

Why not?

Ordered & Unordered Lists

  • Lists unite a group of items semantically
  • In HTML, we can create two straightforward types of lists:
    • ordered
    • unordered
  • Lists are built by first creating the list itself, using the <ol> or <ul> element
  • Individual list items are created inside the list element using the <li> element

List Example

<ol>
 <li>bread</li>
 <li>milk</li>
 <li>cheese</li>
</ol> 
  1. bread
  2. milk
  3. cheese

Unordered lists work exactly the same, but they use the <ul> tag

List Details

  • Unless otherwise specified (via CSS), ordered lists use Arabic numerals
  • Unordered lists use solid round bullets by default
  • Note: Text must be inside an li element to be within an ol or ul
  • Note: The ol and ul elements should never have any children which are not li elements
  • Note: Inserting a line break (<br />) in a list item breaks the text but maintains the indent

Definition Lists

  • Along with ordered and unordered lists, HTML provides a tag for creating definition lists
  • This type of list is especially useful for glossaries, or any list which pairs words (or images, etc.) with descriptions
  • Definition lists are very useful when you want to order and style pairs of items, perhaps images and captions

Definition List Example

<dl>
 <dt>HTML</dt>
 <dd>A markup language...</dd>
 <dt>CSS</dt>
 <dd>A presentation language... </dd>
</dl>
HTML
A markup language...
CSS
A presentation language...

As with ordered and unordered lists, the browser may add default CSS to the presentation of definition lists.

Nested Lists

Lists may be nested (even mixing and matching various list types) as long as all the list elements are opened and closed properly.