Andrew Maner in Week 2

Week 2 - Lists and Links


Lists

There are many occasions when we need to use lists. HTML provides us with three different types:

  • Ordered lists are lists where each item in the list is numbered. For example, the list might be a set of steps for a recipe that must be performed in order, or a legal contract where each point needs to be identified by a section number
  • Unordered lists are lists that begin with a bullet point (rather than characters that indicate order). The list you are looking at now is an example of an unordered list.
  • Definition lists are made up of a set of terms along with the definitions for each of those terms.

ORDERED LISTS

The ordered list is created with the ol element (ol stands for ordered list).

Each item in the list is placed between an opening li tag and a closing li tag (li stands for list item). Browsers indent lists by default.


UNORDERED LISTS

The unordered is created with the ul element (ul stands for unordered list).

Each item in the list is placed between an opening li tag and a closing li tag. Browsers indent lists by default.


DEFINITION LISTS

The definition list is created with the dl element and usually consists of a series of terms and their definitions. Inside the dl element you will usually see pairs of dt and dd elements.

The dt element is used to contain the term being defined (dt = definition term), while the dd element is used to contain the definition.

Sometimes you might see a list where there are two terms used for the same definition or two different definitions for the same term.


NESTED LISTS

You can put a second list inside an li element to create a sublist or nested list.

Browsers display nested lists indented further than the parent list. In nested unordered lists, the browser will usually change the style of the bullet point as well.


EXAMPLE SITE

This example will have a main heading followed by an inroductory paragraph. An unordered list is used to outline the ingredients and an ordered list is used to describe the steps.


SUMMARY

  • There are three types of HTML lists: ordered, unordered, and definition.
  • Ordered lists use numbers.
  • Unordered lists use bullets.
  • Definition lists are used to define terminology.
  • Lists can be nested within one another.

Links

Links are the defining feature of the web because they allow you to move from one page to another - enabling the very idea of browsing or surfing.

You will commonly come across the following types of links:

  • Links from one website to another
  • Links from one page to another on the same website
  • Links from one part of a web page to another part of the same page
  • Links that open in a new browser window
  • Links that start up your email program and address a new email to someone

Links are created using the a element. Users can click on anything between the opening a tag and the closing a tag. You specify whichpage you want to link to using the href attribute.

The following will display and link to IMDB.

The text between the opening and closing a tags is known as link text. Where possible, your link text should explain where visitors will be taken if they click on it (rather than just saying "click here").

Many people navigate websites by scanning the text for links. Clear link text can help visitors find what they want. This will give them a more positive impression of your site and may encourage them to visit it longer. (It also helps people using screen reader software.)

To write good link text, you can think of words people might use when searching for the page to which you are linking. (For example, rather than writing "places to stay," you could use something more specific like "hotels in New York.")


LINKING TO OTHER SITES

Links are created using the a element which has an attribute called href. The value of the href attribute is the page you want people to go to when they click on your link.

Users can click on anything that appears between the opening and closing a tags and will be taken to the page specified in the href attribute.

When you link to a different site, the value of the href attribute will be the full web address for the site, which is known as an absolute URL. Browsers show links in blue with an underline by default. (This can be changed in CSS, which we will discuss later in the term.)

URL stands for Uniform Resource Locator. Every web page has its own URL. This is the web address that you would type into a browser if you wanted to visit that page. An absolute URL starts with the domain name for that site, and can be followed by the path to a specific page. If no page is specified, the site will display the homepage.

LINKING TO OTHER PAGES ON THE SAME SITE

When you are linking to other pages within the same site, you do not need to specify the domain name in the URL. You can use a shorthand known as a relative URL.

If all the pages of the site are in the same folder, then the value of the href attribute is just the name of the file. If, however, you have different pages of a site in different folders, then can use a slightly more complex syntax to indicate where the page is in relation to the current page. We'll see more about this later.


DIRECTORY STRUCTURE

What follows is a discussion that uses my current directory structure for the GWDA133 site (GWDA133). First up is an image of the parent directory containing the index.html file (the home page for our class).

All sub-directories of GWDA133_site_archive are said to be children of that directory. Next up is an image of the week2 directory (the one in which this particular file sits).

The GWDA133_site_archive is the parent of this directory, and you can see that the img directory is this directory's child. The post.html file in this picture is the very file you are viewing right now (well, after it has been uploaded to the server). To illustrate why this matters, the next images illustrate what I need to do if I want to link to post.html (in this directory), cat.png (in the img directory), and index.html (in the parent directory).

So what? If I want to link to a file in the same directory, the href attribute needs only the name of that file. If I want to link to a file in a child directory, I have to preface the file name with the directory name and a slash separator. If I want to link to a file in the parent directory, I need to preface the name with two dots and a slash separator. (This continues. If I need to go into the grandparent directory, I need two pairs of dots and slashes.)


EMAIL LINKS

To create a link that starts up the user's email program and addresses an email to a specified email address, you use the a element. This time, though, the value of the href attribute begins with mailto: and is followed by the email address you want to address.


OPENING LINKS IN A NEW WINDOW

If you want a link to open in a new window, you can use the target attribute on the opening a tag. The value of this should be _blank.

One of the most common reasons a page author might want a link to be opened in a new window is if it points to another website. In such cases, they hope the user will return to the window containing their site after finishing looking at the other one.

Generally, you should avoid opening links in a new window, but if you do, it is considered good practice to inform users that the link will open in a new window before they click on it.


LINKING TO A SPECIFIC PART OF THE SAME PAGE

At the top of a long page you might want to add a list of contents that links to the corresponding sections lower down. Or, you might want to add a link from part way down the page back to the top of it to save users from having to scroll back to the top.

Before you can link to a specific part of a page, you need to identify the points in the page that the link will go to. You do this using the id attribute (which can be used on any HTML element). You can see that the h1 and h2 elements in the example below have been given id attributes that identify those sections of the page.

The value of the id attribute should start with a letter or an underscore (not a number or any other character) and, on a single page, no two id attributes should have the same value.

To link to an element that uses an id attribute you use the a tag again, but the value of the href attribute starts with the # symbol, followed by the value of the id attribute to which you want to link. In the example below, <a href="#top"> links to the h1 element at the top of the page whose id attribute has a value of top.


LINKING TO A SPECIFIC PART OF ANOTHER PAGE

If you want to link to a specific part of a different page (whether on your own site or a different website) you can use a similar technique. As long as the page to which you are linking has id attributes that identify specific parts of the page, you can simply add the same syntax to the end of the link for that page.

Therefore, the href attribute will contain the address for the page (either an absolute or relative URL), followed by the # symbol, followed by the value of the id attribute that is used on the element to which you are linking.

For example, to link to the bottom of the homepage of the website that accompanies this textbook, you would write: <a href="http://www.htmlandcssbook.com/#bottom">


EXAMPLE SITE

This example is of a web page about film. The h1 element is used with an id attribute at the top of the page so that a link can be added to take readers from the bottom of the page to the top. There is an email link to allow readers to contact the author of the web page. There are also a number of links to qualified URLs. These link to various film festivals. Below this list is a link to a relative URL which is an "about" page that lives in the same directory.


WEEK 2 HOMEWORK

Build an html page that matches the following image. Make sure your first four links are to four (imaginary) files that reside in the same directory as your hw file. (Name them home.html, about.html, contact.html, and blog.html.) In addition, give the first h1 an id, and use that id in the final "top of page" link, just as we did in the previous example.

For the external links, use Google to find the home pages for Retro Futurist, Kylesa, 4AD, Bon Iver, Virgin EMI, Soundgarden, RCA Records, and Sia. Use the legitimate links in your site.

Turn in your completed page via the week 2 dropbox.