Making links

This page’s goals

By the end of this page, you should:

• Be able to use the <a> tag to make links.

• Know the difference between absolute, relative, and root relative links.

• Be able to make a link open in a new browser tab or window.

• Be able to create a table of contents for a long page.

How links are used

Links tie Web pages together. A link appears on a source page. Click it, and the browser shows the destination or target page.

Links are used in two main ways on Web pages. First, they can form navigation bars, also called nav bars. A navigation bar is a group of links that appear together in a block. Here’s a navigation bar:

Figure 1. Navigation bar

CSS makes each link look like a tab, but each one is just a regular link. Notice that the “lesson” link looks different from the others. This tells you that the page showing the navigation bar is in the Lessons section of the site.

Navigation bars can be just simple text as well. Here’s part of a navigation bar from Gmail:

Figure 2. Horizontal navigation bar – just text

So, the first way that links are used on Web pages is to make navigation bars.

The second way is just as part of the main content of a page. For example, here is a link to CoreDog’s articles list. It’s just a normal part of this paragraph.

Most links on a page are in navigation bars, or part of the content. But links are also used in tables of contents, site maps, and other things. We’ll look at tables of contents and site maps in this lesson.

Example: Dog nutrition

Let’s look at a scenario we’ll use to talk about links. Suppose you start a business around dog nutrition. You create a site at http://dognutrition.bz (available at the time of writing). The site has:

• Tutorials on dog nutrition, like a page on nutrition for puppies and another on nutrition for older dogs.

• Articles on more specific topics, like diet supplements for active large dogs.

• A blog, where you write about new products, and whatever else interests you.

• A catalog of products your customers can order.

You create the following directory structure:

Figure 3. Directories

Here’s what goes in each directory:

Figure 4. What is stored in each directory.

Now, let’s see how to make links.

The <a> tag

Use the <a> tag to create links. Here’s an example:

<a href="/articles/">Articles</a>

It renders like this:

Articles

The tag has two parts to it:

• The content the user sees.
• The URL to go to when the user clicks on the content.

The content of the tag – Articles – is what the user sees. It’s between the <a> and the </a>. The href attribute gives the destination – /articles/. This is where the browser goes when the user clicks.

Some links have a complete URL, like http://coredogs.com/lesson/web-page-structure. But most don’t. They have shortened links, like web-page-structure. How does this work?

Absolute, relative, and root relative links

URLs can be absolute, relative, or root relative.

Absolute URLs

An absolute URL is complete, including a domain name. For example:

<a href="http://dognutrition.bz/basics/puppies.html">Articles</a>

Absolute URLs are used most when referring to someone else’s Web site, not your own. For example:

<a href="http://download.openoffice.org/index.html">Download OpenOffice</a>

On the page Static Web pages, we talked about a server’s default file. When a browser give a server just a path, like http://site.com/products/, the server knows what directory to look in – products – but not what file to send. So it looks in products for a file with a default name, usually index.html. If it finds the file, it sends that.

So, when a URL includes the default file name, you can omit it. For example, the OpenOffice link could be:

<a href="http://download.openoffice.org/">Download OpenOffice</a>

When the last character of the URL is /, you can leave it out. This is the same as the previous:

<a href="http://download.openoffice.org">Download OpenOffice</a>

Relative URLs

These URLs are missing stuff at the beginning, and don’t begin with a /. For example:

<a href="puppies.html">Puppies</a>

This refers to a page in the same directory as the page containing the link. So if the link above was in the page http://dognutrition.bz/basics/index.html, then the browser would look for http://dognutrition.bz/basics/puppies.html.

However, if the link:

<a href="puppies.html">Puppies</a>

was in the page http://dognutrition.bz/products/food/index.html, the browser would look for http://dognutrition.bz/products/food/puppies.html.

The page you link to does not have to be in the same directory as the page containing the link, as long as you specify the path from the page with the link, to the target page.

Here’s the directory structure for dognutrition.bz we saw earlier, with some files added:

Figure 5. dognutrition.bz directories

Let’s say we’ve updated the puppy nutrition article. Its URL is http://dognutrition.bz/basics/puppies.html (please find it in Figure 5). We want to put a note on the home page, telling users that the article has been updated, with a link to the updated page:

Figure 6. Link to a file in a subdirectory

We might add this to the home page at http://dognutrition.bz/index.html:

<p>We've updated our page on <a href="basics/puppies.html">puppy nutrition basics</a>. Check it out!</p>

The browser looks for a directory called basics in the current directory, then looks for a file called puppies.html inside that.

Actually, the browser does the same thing it does for image URLs:

• Take the URL of the referring page (http://dognutrition.bz/index.html).

• Drop off the file name (that’s index.html, leaving http://dognutrition.bz/).

• Append the URL from the <a> tag (that’s basics/puppies.html, giving http://dognutrition.bz/basics/puppies.html).

You can make links to pages at higher levels in the directory tree. For example, you might have a link to the home page in an old blog entry.

Figure 7. Link to a file in a parent directory

The code might be:

<p><a href="../../index.html">Home</a></p>

../ means “go up a level.” So the URL is “go up a level (from /blog/archives/ to /blog/), then go up a level (from /blog/ to /), then find index.html.”

You can also navigate from one subdirectory to another. For example, in the page on the basics of puppy nutrition (http://dognutrition.bz/basics/puppies.html) there might be a link to a page in the supplements directory of the products section:

Figure 8. Link to a file in another subdirectory

The code might be:

<p>We recommend <a href="../products/supplements/vita-mite.html">Vita Mite</a></p>

The code is in http://dognutrition.bz/basics/puppies.html. It says, “from the current directory (/basics/), go up a level, then go into the products/ subdirectory, then go into the supplements/ subdirectory, then find the file vita-mite.html.”

When a relative link navigates between subdirectories, it goes up the tree until it find a common parent, then goes down. In this example, the source is http://dognutrition.bz/basics/puppies.html. The destination is http://dognutrition.bz/products/supplements/vita-mite.html. Their common parent is http://dognutrition.bz/; it’s the part of their URLs they have in common.

Here’s another example. Suppose you have a link in the page http://dognutrition.bz/products/food/food1.html to the page http://dognutrition.bz/products/treats/treat1.html (please find both of them in Figure 8). They both have the common parent http://dognutrition.bz/products/, since both pages are under the products/ part of the Web site’s directory tree. So there’s no need for the link to navigate all the way back to the home page. The code might look like this:

<p>And here's a <a href="../treats/treat1.html">tasty treat</a>!</p>

This link is in http://dognutrition.bz/products/food/food1.html. It says “go up a level (from http://dognutrition.bz/products/food/ to http://dognutrition.bz/products/), then go down into treats/, and find the file treats1.html.” This link has the usually pattern: go up to the common parent (products/), and then go down.

So, you can make a link from any HTML page on your site to any other page. Specify the path with ../ and subdirectory names.

Root relative URLs

You’ve seen absolute URLs and relative URLs. There’s a third category. It’s the root relative URL.

This is an absolute link to a page on your site, but with the domain name missing. Root relative URLs start with /, which means “go to the root of the site and then follow the path to a file.”

Here’s some code:

<p>Read our <a href="/basics/puppies.html">updated puppy nutrition page</a>.</p>

No matter where this link is on your site, it will always point to the same file.

Root relative links have two main uses. First, they’re good for linking from a page deep in your site to a page in another section of the site. You can leave out a lot of ../../../.

Second, they’re particularly useful in creating Web page templates. We’ll talk about those later in the book.

Which type of link should you use?

Suppose you’re just getting started with your dog nutrition business at dognutrition.bz. You’ve launched a beta (version for user testing) of the site, but haven’t done any promotion. The day after your site goes up, dognutrition.com becomes available. W00f! You snap it up, and decide to change everything to the new domain.

What if you had used absolute URLs in your links? Like this:

<p>And here's a <a href="http://dognutrition.bz/products/treats/treat1.html">tasty treat</a>!</p>

You would have to find every dognutrition.bz in every link and change it to dognutrition.com. It would be easy to miss one, leaving users with broken links, and maybe costing you business.

Now suppose you want to change the name of the products directory to dog-nutrition-products. Why would you do this? Because your pages might then rank higher in Google. That makes your products easier for people to find and buy, which means more money to support your coffee and chocolate habits.

Again, you have to change the link above. This time, to:

<p>And here's a <a href="http://dognutrition.bz/dog-nutrition-products/treats/treat1.html">tasty treat</a>!</p>

Ack! What an unw00fy thing.

OK, let’s rewind. What if you had used a relative link to start with? Like this:

<p>And here's a <a href="../treats/treat1.html">tasty treat</a>!</p>

You change to dognutrition.com, so you change the link to… Wait, you don’t have to change the link at all! It still works! The link doesn’t have dognutrition.bz in it, so there’s nothing to change. W00f!

What about changing the directory name to dog-nutrition-products? Again, the link is fine the way it is. There’s nothing to change. W00f times 2!

Most of you links should be relative. This makes your site easier to manage. And easy is good!

Use absolute links to refer to pages outside your domain. You don’t have much choice. For example:

<p>You should use <a href="http://www.mozilla.com/firefox/">Firefox</a>, because of its w00fy Weber add-ons. Also try <a href="http://www.apple.com/safari/">Safari</a>, <a href="http://www.opera.com/">Opera</a>, and <a href="http://www.google.com/chrome/">Chrome</a>.</p>

Within-page links

Sometimes you want to create a link to a spot within a page. For example, the puppies.html page in the dog nutrition site might have a section for small breed puppies, like chihuahuas, and another for large breed puppies, like Great Danes.

...
<body>
...
<h2>Small breed puppies</h2>
...
<h2>Large breed puppies</h2>
...
</body>
...

Figure 9. Puppies page

Suppose you were writing a blog entry, and wanted to add a link to the large breed section of puppies.html. First, you would add an id to the destination in puppies.html:

<h1 id="large_breed">Large breed puppies</h1>

In your blog page, add this link:

<p>You can read more about <a href="/basics/puppies.html#large_breed">more about large breed puppies</a>.</p>

The href attribute has a #, followed by the id of the destination in puppies.html.

You can link to sections of the same page. For example, you might put this in puppies.html:

<p>Read more about large breeds <a href="#large_breeds">later on this page</a>.</p>

When there’s nothing in front of the #, your browser will look in the current page, that is, the one it’s showing.

Example: Table of contents

You can use internal links to make a table of contents for a long page. Here’s an example. You can try it.

<h1>Puppy Nutrition</h1>
<p>Contents:</p>
<ul>
  <li><a href="#small_breed_puppies">Small breed puppies</a></li>
  <li><a href="#large_breed_puppies">Large breed puppies</a></li>
</ul>
<p>Lorem ... libero.</p>
<h2 id="small_breed_puppies">Small breed puppies</h2>
<p>Lorem ... libero.</p>
<h2 id="large_breed_puppies">Large breed puppies</h2>
<p>Lorem ... libero.</p>

Figure 8. Table of contents

You’ll notice that the page contains a lot of strange text. This is filler text that won’t distract from the page’s structure. Lorem ipsum text has been the printing industry’s standard dummy text since the 16th century, and Webers have adopted the tradition. You can read more about it, if you want to.

Extra attributes

The <a> tag has other attributes. If you want to open a linked page in a new window, use this:

<a href="www.google.com/" target="_blank">Google</a>

_blank stands for a blank window.

The title attribute pops up a message when the mouse hovers over the link. For example:

<a href="www.google.com/" target="_blank" title="Google search in a new window.">Google</a>

You could also do:

<a href="http://www.google.com/search?q=dog+nutrition" target="_blank" title="Search for 'dog nutrition' in Google. Opens a new window.">Google "dog nutrition"</a>

The ?q=… tells Google to actually run a search. Try it:

Google “dog nutrition”

The URL contains search parameters, as if the user had typed them manually.

Links on images

So far, all of the links have shown text. But you can add links to images as well, like this:

<a href="/index.html"><img src="/library/home.png" alt="Home"></a>

The browser will jump when the user clicks on the image.

If you want to suppress the border on images with links, you can use border: none; in your CSS. Check the page on Styling boundaries for more on CSS and images.

Summary

On this page, you learned:

• How to use the <a> tag.

• The difference between absolute, relative, and root relative links.

• How to make a link open in a new browser tab or window.

• How to create a table of contents for a long page.

What now?

This lesson is about making links between pages. Put links together with the things you learned in earlier lessons – text, interaction, and images – and you have all you need for a basic Web site.

You’ve seen how to make basic links, but they don’t look great. Let’s fix that.

Styling links

Where are we?

We’ve seen how you make links with the <a> tag. Let’s improve their look.

This page’s goals

By the end of this page, you should:

• Know what the <a> tag’s pseudo-classes are.

• Be able to use the pseudo-classes to create link effects.

Review: Basic text styling

You already know how to do basic text styling. For example, you might have style rules like this:

body {
  font-family: Verdana, Helvetica, sans-serif;

}

h1 {
  font-size: 24px;
  color: #660000;
  font-weight: bold;

}

Figure 1. Styling a heading

This looks like:

Figure 2. Rendered heading

The first rule changes the font family of everything inside the <body> – and that’s everything on the page. The second rule changes all <h1> tags to 24 pixels high, dark red, and bold.

Here’s a class and an id:

...
.warning {
  border: 1px red solid;
  padding: 5px;
  color: red;
  font-weight: bold;
}
#truth {
  color: #006600;
  font-size: 20px;
  font-style: italic;
}
...
<p>This is a normal paragraph.</p>
<p class="warning">This is a warning.</p>
<p id="truth">Dogs are great!</p>
...

Figure 3. class and id

It looks like:

Figure 4. Rendered class and id

The rule in lines 2 to 7 creates a class that can be applied to several tags. Line 15 shows how to use it in HTML, with the class attribute.

Lines 8 to 12 create a rule for a specific element on the page, the one with the id of truth. Line 16 shows how an element is given an id. Only one element on the page can have that id.

You can see this in action.

Styling link text

The same rules apply to links. You can change the typeface, weight, color, and so on. For example:

...
a {
  color: #600000;
  font-weight: bold;
}
...
<p>Please see my <a href="/projects/index.html">projects</a> page.</p>
...

Figure 5. Simple link styling

It will look like:

Figure 6. Rendered link

A warning, though. Keep the links looking like links. You could do this:

a {
  color: #600000;
  font-weight: bold;
  text-decoration: none; /* Evil! */
}

Figure 7. Evil link styling

Line 4 removes the underlining. It would look like this:

Figure 8. Link, link, where is the link?

People are used to seeing underlines. That’s how they know something is a link. You can get away with changing the font color from the default blue to something that better suits your site’s color scheme. But if you change the link color, users might not know a link when they see one.

The exception to this is in a navigation bar. The visual context tells users to expect links, even if they aren’t underlined.

Pseudo-classes

Move the mouse cursor over the this link (no need to click):

Learn about making links.

Notice how the text changes when the mouse cursor goes over it.

This is done with pseudo-classes. Pseudo-classes select elements based on some aspect of them. Here’s how the link you just saw was done:

<style type="text/css">
  a.sample1:hover {
    font-weight: bold;
    color: orange;}
</style>

<blockquote>
Learn about <a class="sample1" href="lesson/making-html-links">making links</a>.</blockquote>

Figure 9. Pseudo-class

The pseudo-class is the :hover in line 2. When the mouse is on a link with the class sample1, the text is made bold.

If I’d wanted to change all of the links on the page, I could have done this:

a:hover {font-weight: bold;}

Figure 10. Pseudo-class affecting all links

But I didn’t want to change all of the links.

The link pseudo-classes

Browsers use four pseudo-classes for links.

Figure 11. Pseudo-classes for links

What is the difference between link and visited? The difference is whether the user has visited the target of the link recently. Suppose page begin.html has a link to target.html, like this:

<a href="target.html">See the target</a>

When showing this link, the browser will apply the :link pseudo-class when the user has not visited the target of the link recently. The default styling is usually blue text:

Figure 12. Default styling for :link

However, the browser will apply the :visited pseudo-class when the user has visited the target of the link recently. The default styling is usually purple text:

Figure 13. Default styling for :visited

:hover is the most used. The other pseudo-classes are used less frequently.

Hover is for more than links

The hover pseudo class applies not just to links, but to other things as well. Here’s an example:

...
p {
  margin: 10px;
  padding: 10px;
  background-color: #7534AA;
  color: white;
}
p:hover {
  background-color: #B484DA;
}
...
<p>W00f!</p>
...

Figure 14. Hovering over a <p>

The <p> will look like this normally:

Figure 15. Hoverless

The <p> will change to this on hovering.

Figure 16. Hovery

Notice that when the mouse is over the <p>, the browser applies both the p { } and p:hover { } rules. The background color in the p:hover { } rule replaces the background color in the p { } rule.

You can try it yourself.

Summary

On this page, you learned what the <a> tag’s pseudo-classes are, and how to use them to create link effects. The :hover tag is the most frequently used. Don’t remove underlining from links.

What now?

Let’s see how you can use styled links to create cool navigation bars.

Vertical navigation bars

Where are we?

This lesson is about linking pages together. You know how to make basic links, and style them. Let’s put this together to create a vertical navigation bar.

Once you’ve finished this lesson about links, you’ll have all you need for a basic Web site.

This page’s goals

By the end of this page, you should be able to:

• Create vertical nav bars with text.

• Position vertical nav bars.

• Create vertical nav bars with images.

• Create image nav bars with hover effects.

Vertical nav bars with text

A navigation bar (nav bar) is a set of links shown together as a visual block. Each link is sometimes called a button.

The simplest nav bars are just text links. Here’s an example:

<p>
  <a href="dummy.html" title="Back to the home page">Home</a>
</p>
<p>
  <a href="dummy.html" title="The basics of dog nutrition">The basics</a>
</p>
<p>
  <a href="dummy.html" title="Articles on dog nutrition">Articles</a>
</p>
<p>
  <a href="dummy.html" title="Products we recommend">Products</a>
</p>
<p>
  <a href="dummy.html" title="Our bloggy nutrition updates">Blog</a>
</p>

Figure 1. Nav bar with paragraphs

You can try the page. (The links only go to a dummy page, as you can see from the code.)

It doesn’t look good. There’s too much space between the links, for starters.

We could style the paragraphs, or use <br> instead of <p></p>. But there’s a better way.

Unordered lists are convenient for vertical nav bars. Here’s the same menu as a list.

<ul>
  <li>
    <a href="dummy.html" title="Back to the home page">Home</a>
  </li>
  <li>
    <a href="dummy.html" title="The basics of dog nutrition">The basics</a>
  </li>
  <li>
    <a href="dummy.html" title="Articles on dog nutrition">Articles</a>
  </li>
  <li>
    <a href="dummy.html" title="Products we recommend">Products</a>
  </li>
  <li>
    <a href="dummy.html" title="Our bloggy nutrition updates">Blog</a>
  </li>
</ul>

Figure 2. Nav bar as a list

You can try the page. It will look like this:

Figure 3. Rendered unstyled list

Suppose we wanted the menu to look like this:

Figure 4. Rendered styled list

We would need to apply styles to the entire menu (like the border), as well as to the individual menu elements (like removing the underline). The

<ul>
<li></li>
</ul>

structure suits this. We can style the entire menu by styling the <ul>. We can style the individual links by styling the <li>s. There are other ways to do things, but many Webers find unordered lists convenient for vertical menus.

Let’s put Figures 3 and 4 side-by-side, and identify the differences between them:

Figure 5. Differences

The page background color is yellow. The menu has a dotted blue line around it, a blue background, and gaps between the menu and the top and left. The links have some font styling, no dot, and gaps between them and the menu borders.

Here’s some CSS that will do the job:

body {
  font-family: Verdana,  Helvetica, sans-serif;
  font-size: 14px;
  background: #FFFFEE;
}
.vertical_menu {
  border: 1px dotted blue;
  background-color: #EEFFFF;
  margin: 5px;
  padding: 5px;
}
.vertical_menu li {
  list-style: none;
  margin: 5px;
}
.vertical_menu li a {
  text-decoration: none;
  color: black;
}
.vertical_menu li a:hover {
  text-decoration: underline;
}

Figure 6. Nav bar CSS

Let’s go over it.

Lines 1 to 5 set the font face and size, and background color for the entire page. Unless overridden, everything on the page will look like this.

Lines 6 to 10 style the menu block. They add the border and background color. Lines 9 and 10 add spacing around the menu, and between the menu’s border and its contents.

Lines 12 to 14 style the <li>s. Note the selector: .vertical_menu li. This applies to <li> elements inside elements with the class vertical_menu. The rule don’t apply to other <li> elements on the page. list-style: none; removes the dot that usually appears to the left of list elements.

The rule in lines 16 to 19 applies to <a>s that are inside <li>s that are inside elements with the class vertical_menu. It removes the underlining, and sets the text color to black, rather than the default link color (usually blue).

The rule in lines 20 to 22 says what happens when the mouse hovers over a link in a menu. It gets underlined.

You can try the result. Much of w00f!

Positioning vertical nav bars

Vertical nav bars usually appear at the left or right of Web pages. They also are just wide enough to show their links.

Suppose we want this:

Figure 7. Menu on the left

The menu is to the left of the content, and is narrow. Easy! Just make a few changes to Figure 6.

.vertical_menu {
  float: left;
  width: 90px;
...
}
...
<h1>Dog Land</h1>
<ul class="vertical_menu">
...
</ul>
<p>Lorem ipsum dolor sit... 

Figure 8. Floaty float

You can try it.

Line 2 is the key. It changes the positioning of the element.

You give HTML to a browser, and it renders it. Normally, the browser makes content flow down the page from top to bottom, in the order it appears in the HTML. So if you have:

<p id="para1">I am evil!</p>
<p id="para2">I like donuts!</p>

The user will see para1 on the screen, and below that, para2, like this:

Figure 9. Evil donuts

This is called static positioning, and is the browser default. The order of each element on the page matches its order in the HTML.

If I remove the float line from Figure 8, this is what I get:

Figure 10. Floatless

You can try it. You’ll see the usual static flow.

float – and other positioning rules – let you change that. float takes an element out of flow, draws it, and then resumes drawing the other elements around it. float: left; moves an element to the left of the browser window. float: right; moves an element to the right.

Put the earlier figures one under the other, and you can easily see the difference:

Figure 11. The menus

In the normal flow, the menu appears between the header (Dog Land) and the main content (Lorem ipsum). When the menu is floated, it gets “pinned” to the edge of the window. The element below the menu moves up, and wraps around it.

Time for a w00f.

W00f!

Lots o’ content

But there’s a problem. Suppose I add lots of content to the page in Figure 8. It would look like this:

Figure 12. Lots of content

The content wraps around the nav bar. Sometimes this is what you want. But you might want this:

Figure 13. Content does not wrap

In Figure 13, the nav bar takes its own column on the page.

How to do this? The easiest way is to wrap the main content in its own <div>, and give the <div> a margin.

.vertical_menu {
  float: left;
  width: 90px;
...
}
...
#main_content {
  margin-left: 120px;
}
...
<h1>Dog Land</h1>
<ul class="vertical_menu">
...
</ul>
<div id="main_content">
  <p>Lorem ipsum dolor sit... 
  ...
</div>

Figure 14. Floaty float nav bar in its own column

This pushes the content to the left, relative to its container. The <div>’s container is the <body>. So each element in the <div> (e.g., each <p> in the <div>) has the same left indent, regardless of whether there is nav bar stuff to the left of it or not. You can try it.

Vertical nav bars with images

Sometimes you want to use images instead of text. Let’s make a menu like this:

Figure 15. Vertical nav bar with images

Once you understand how to make a text nav bar, making one with images is fairly easy.

First, you need to get the images for the buttons. Then you can put them into a menu.

Where to get button images?

You can make them your yourself, or you can have a program generate them for you. Let’s use the latter option.

ButtonGenerator.Com is a useful site. You select an image, enter some text, and it will create some nice buttons. That’s what I did to make the images in Figure 15.

The HTML

As a reminder, here’s a link from a text nav bar:

<a href="dummy.html" title="Back to the home page">Home</a>

Replace the text with an image:

<a href="dummy.html" title="Back to the home page"><img src="button-images/home.png" alt="Back to the home page"></a>

Don’t forget the alt, for visually impaired users with screen reading software. Also, Google uses the alt attribute when it lists your image in its search engine. Google’s search software can’t figure out the meaning of picture from their contents. Not even Google’s computers are that smart. Yet. So instead, Google’s software uses the alt text to decide what the image is showing.

Images that are in links have a border by default:

Figure 16. Button with a border

Use border:none; in your CSS to suppress the border.

Here’s the code so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Vertical nav bar</title>
    <style type="text/css">
      body {
        font-family: Verdana,  Helvetica, sans-serif;
        font-size: 14px;
        background-color: #FDF4DE; 
      }
      .vertical_menu {
        float: left;
        width: 145px;
        background-color: #F7DB94;
        padding: 5px;
        margin: 5px;
      }
      .vertical_menu li {
        list-style: none;
        margin: 5px;
      }
      .vertical_menu li a img {
        border: none;
      }
    </style>
  </head>
  <body>
    <ul class="vertical_menu">
      <li>
        <a href="dummy.html" title="Back to the home page">
          <img src="button-images/home.png" alt="Back to the home page">
        </a>
      </li>
      <li>
        <a href="dummy.html" title="The basics of dog nutrition">
          <img src="button-images/basics.png" alt="The basics of dog nutrition">
        </a>
      </li>
      <li>
        <a href="dummy.html" title="Articles on dog nutrition">
          <img src="button-images/articles.png" alt="Articles on dog nutrition">
        </a>
      </li>
      <li>
        <a href="dummy.html" title="Products we recommend">
          <img src="button-images/products.png" alt="Products we recommend">
        </a>
      </li>
      <li>
        <a href="dummy.html" title="Our bloggy nutrition updates">
          <img src="button-images/blog.png" alt="Our bloggy nutrition updates">
        </a>
      </li>
    </ul>
  </body>
</html>

Figure 17. HTML for vertical nav bar with images

As you can see from lines 32, 37, 42, and so on, I put all the button images in their own directory, called button-images. Each image is a PNG file, named after the text on the button. So article.png has the text “Article.” Neither browser nor server care what I call the file. But it’s easier to keep things straight if I name them consistently.

You can try out the vertical nav bar with images.

Adding hover effects

The last thing we’ll do is add a hover effect, so that when the user puts the mouse over a button, the image changes.

Here’s what we want to achieve. Move your mouse over the image below, and off again.

Figure 18. Hover effect

Notice how an arrow appears when the mouse moves over the button.

More buttons

We need two versions of the button image:

• Without the arrow – the normal button state.

• With the arrow – shown when the mouse hovers on the button.

I had already made the first one:

I called it home.png, as you can see on line 32 in Figure 17.

I went back to ButtonGenerator.Com to make the second image. ButtonGenerator lets you add an icon to a button. I chose the arrow. Here’s what I created:

I called this one home-over.png.

I made an X-over.png image for every button: basics-over.png, etc. I put them in the same directory as the other button images.

How to get the X-over.png images to show? There are many ways to do it. Let’s see one way using jQuery.

jQuery over and out

Here’s what I want to do for the Home button:

• When the mouse goes over the image, show home-over.png.

home-over.png

• When the mouse leaves the image, show home.png.

home.png

We need to attach code to the Home button. So let’s start by giving the button an id so we can refer to it:

<a href="dummy.html" title="Back to the home page">
  <img id="home_button" src="button-images/home.png" alt="Back to the home page">
</a>

Figure 19. Adding an id

I added an id of home_button.

Now I can add an event to the img. Remember that an event is something that happens to an element. For example, click() happens when the user clicks on an element with the mouse.

jQuery has a hover() event that’s just right for the job. hover() actually captures two events. Here’s how it’s used:

$(target element).hover(
  function(){
    Code to run when the mouse goes over the target element.
  },
  function(){
    Code to run when the mouse leaves the target element.
  }
);

Figure 20. hover() event

Line 1 tells jQuery which element is having the event attached to it. The code in the first function (lines 2 to 4) runs when the mouse goes over the element. You can put as many lines of code as you want. The code in the second function (lines 5 to 7) runs when the mouse leaves the element. Again, you can put as many lines of code as you want.

I named the button home_button. So the code should do this:

For home_button:
  Over: Make home_button show home-over.png.
  Leave: Make home_button show home.png.

Figure 21. hover() event pseudocode

What now? Well, I know the name of the image that should have the event. So let me change Figure 20 to:

$("#home_button").hover(
  function(){
    Make home_button show home-over.png.
  },
  function(){
    Make home_button show home.png.
  }
);

Figure 22. Improved hover() event

Remember that $("#home_button") refers to the element with the id of home_button. Don’t forget the #.

But how can I make home_button show home-over.png? Let’s look at the HTML again – it’ll give us a clue. The HTML is:

<a href="dummy.html" title="Back to the home page">
  <img id="home_button" src="button-images/home.png" alt="Back to the home page">
</a>

Figure 19 (again). Adding an id

Line 2 shows how you tell an <img> what image to show: you set the src attribute to the path to the image file. If I changed the src attribute, <img> will show a different image.

I can change any attribute of any element with the attr() function. I tell it what attribute I want to change, and what the new value is, and jQuery will change the attribute.

For example, this:

$("#thing").attr("class", "evil");

would set the class attribute of the element thing to evil. This is a useful technique for changing the look of something on the fly.

This:

$("#tomato").attr("title", "This is a fruit");

would change the title attribute of the element tomato.

Since src is just another attribute, we could do this:

$("#home_button").attr("src", "home-over.png");

Actually, this won’t quite work, because I put the image in a subdirectory. The code should be:

$("#home_button").attr("src", "button-images/home-over.png");

This is what I end up with:

$('#home_button').hover(
  function(){
    //Run on mouse over.
    $('#home_button').attr('src', 'button-images/home-over.png');
  },
  function(){
    //Run on mouse out.
    $('#home_button').attr('src', 'button-images/home.png');
  }
);

Figure 23. hover() event code

Events are usually assigned in the page’s ready() event. That is, after the page is loaded (i.e., ready), that’s when the hover() code should be bound to home_button. So the script section of the page will be:

<script type="text/javascript">
  $(document).ready(function() {
    $('#home_button').hover(
      function(){
        //Run on mouse over.
        $('#home_button').attr('src', 'button-images/home-over.png');
      },
      function(){
        //Run on mouse out.
        $('#home_button').attr('src', 'button-images/home.png');
      }
    );
  });
</script>

Figure 24. hover() event – even better!

What about the rest of the buttons? Create the with-arrow images, and change the code.

$('#home_button').hover(
  function(){
    //Run on mouse over.
    $('#home_button').attr('src', 'button-images/home-over.png');
  },
  function(){
    //Run on mouse out.
    $('#home_button').attr('src', 'button-images/home.png');
  }
);
$('#basics_button').hover(
  function(){
    //Run on mouse over.
    $('#basics_button').attr('src', 'button-images/basics-over.png');
  },
  function(){
    //Run on mouse out.
    $('#basics_button').attr('src', 'button-images/basics.png');
  }
);
...
<li>
  <a href="dummy.html" title="Back to the home page">
    <img id="home_button" src="button-images/home.png" alt="Back to the home page">
  </a>
</li>
<li>
  <a href="dummy.html" title="The basics of dog nutrition">
    <img id="basics_button" src="button-images/basics.png" alt="The basics of dog nutrition">
  </a>
</li>

Figure 25. More hover() code

You can try the final vertical nav bar with images.

W00f!

Summary

On this page, you learned how to:

• Create vertical nav bars with text.

• Position vertical nav bars.

• Create vertical nav bars with images.

• Create image nav bars with hover effects.

What now?

Now let’s look at horizontal nav bars. With all the work we did on the vertical nav bars, the horizontal ones will be easy.

Horizontal navigation bars

Where are we?

This lesson is about linking pages together. You know how to make basic links and style them. You just learned how to create a vertical navigation bar.

This page’s goals

This page is about horizontal navigation bars. By the end of this page, you should be able to:

• Create horizontal nav bars with text.

• Position horizontal nav bars.

• Create horizontal nav bars with images and hover effects.

Horizontal nav bars with text

Let’s create a navigation bar that looks like this:

Figure 1. Horizontal nav bar with text

It’s like the vertical one we made on the last page. Remember, it looked like this:

Figure 2. Vertical nav bar with text

To turn the vertical menu into a horizontal one, we only need to add one CSS property. Really! Here’s the code for the horizontal menu.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Nav bar</title>
    <style type="text/css">
      body {
        font-family: Verdana,  Helvetica, sans-serif;
        font-size: 14px;
        background: #FFFFEE;
      }
      .horizontal_menu {
        border: 1px dotted blue;
        background-color: #EEFFFF;
        padding: 5px;
        margin: 5px;
      }
      .horizontal_menu li {
        display: inline;
        list-style: none;
        margin: 5px;
      }
      .horizontal_menu li a {
        text-decoration: none;
        color: black;
      }
      .horizontal_menu li a:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <ul class="horizontal_menu">
      <li>
        <a href="dummy.html" title="Back to the home page">Home</a>
      </li>
      <li>
        <a href="dummy.html" title="The basics of dog nutrition">The basics</a>
      </li>
      <li>
        <a href="dummy.html" title="Articles on dog nutrition">Articles</a>
      </li>
      <li>
        <a href="dummy.html" title="Products we recommend">Products</a>
      </li>
      <li>
        <a href="dummy.html" title="Our bloggy nutrition updates">Blog</a>
      </li>
    </ul>
  </body>
</html>

Figure 3. HTML and CSS for horizontal nav bar with text

You can try the horizontal text nav bar. It’s quite w00fy.

Line 19 is new. (OK, I also changed the class vertical_menu to horizontal_menu, but that’s not really new.)

Earlier, in the page Simple font tags, I explained the difference between block tags and inline tags. Here’s some HTML:

<p>I <em>really</em> love dogs.</p>

It renders likes this (though smaller and without the lines):

Figure 4. Inline and block

The <p> tag is a block tag. It creates a square block on the screen, with white space on all sides.

The <em> tag is an inline tag. It’s turned on inside a block tag, and keeps running until it gets turned off.

An inline tag might not create a rectangular area. This code:

<p>I <em>really really really really really really </em> love dogs.</p>

It might look like this, in a browser that’s zoomed in and put in a small window:

Figure 5. Inline not always a rectangle

You can’t draw a rectangle around the italicized text without including other stuff. But for a block tag, you can draw a simple rectangle that bounds the block content.

The bottom line: block tags create a rectangular area for themselves. Inline tags don’t. They’ll keep things on the same line, if they can.

<li> is normally a block tag. That is, the browser puts it in a rectangle of its own. Take this code:

...
li {
  border: 1px red dotted;
}
...
<ul>
  <li>
    The first thing.
  </li>
  <li>
    The second thing.
  </li>
</ul>
....

Figure 6. <li> as block tag

It renders as:

Figure 7. <li> as block tag – rendered

But if I add one line, making the style:

li {
  border: 1px red dotted;
  display: inline;
}

Figure 8. Display inline

This is what I get:

Figure 9. <li> as inline tag – rendered

Each <li> sits in line with the others.

That’s how we get a horizontal text nav bar.

Positioning horizontal nav bars

You usually put horizontal nav bars at the top or bottom of a page. They don’t need any special positioning. Just include them in the HTML, and they naturally fall into place.

Suppose we wanted this:

Figure 10. Horizontal nav bar

Here’s some code:

...
<body>
  <h1>Dog Land</h1>
  <ul class="horizontal_menu">
    <li>
      <a href="dummy.html" title="Back to the home page">Home</a>
    </li>
...
</ul>
<p>Lorem ipsum dolor sit amet, consectetur 
...

Figure 11. Code for horizontal nav bar

There’s the heading (line 3), then the menu (lines 4 to 9), then the page content. This creates the display in Figure 10. No need to use the CSS float property, as we did with the vertical nav bars. You can try a page with a horizontal text nav bar.

Image nav bars with rollover effects

On the previous page, we created a vertical nav bar with an image rollover effect. You can try the vertical nav bar to remind yourself how it acted.

A few changes to the CSS convert it into a horizontal nav bar. Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Horizontal nav bar</title>
    <style type="text/css">
      body {
        font-family: Verdana,  Helvetica, sans-serif;
        font-size: 14px;
        background-color: #FDF4DE; 
      }
      .horizontal_menu {
        background-color: #F7DB94;
        padding: 5px;
        margin: 5px;
      }
      .horizontal_menu li {
        display: inline;
        list-style: none;
        margin: 5px;
      }
      .horizontal_menu li a img {
        border: none;
      }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#home_button').hover(
          function(){
            //Run on mouse over.
            $('#home_button').attr('src', 'button-images/home-over.png');
          },
          function(){
            //Run on mouse out.
            $('#home_button').attr('src', 'button-images/home.png');
          }
        );
        $('#basics_button').hover(
          function(){
            //Run on mouse over.
            $('#basics_button').attr('src', 'button-images/basics-over.png');
          },
          function(){
            //Run on mouse out.
            $('#basics_button').attr('src', 'button-images/basics.png');
          }
        );
        $('#articles_button').hover(
          function(){
            //Run on mouse over.
            $('#articles_button').attr('src', 'button-images/articles-over.png');
          },
          function(){
            //Run on mouse out.
            $('#articles_button').attr('src', 'button-images/articles.png');
          }
        );
        $('#products_button').hover(
          function(){
            //Run on mouse over.
            $('#products_button').attr('src', 'button-images/products-over.png');
          },
          function(){
            //Run on mouse out.
            $('#products_button').attr('src', 'button-images/products.png');
          }
        );
        $('#blog_button').hover(
          function(){
            //Run on mouse over.
            $('#blog_button').attr('src', 'button-images/blog-over.png');
          },
          function(){
            //Run on mouse out.
            $('#blog_button').attr('src', 'button-images/blog.png');
          }
        );
      });
    </script>
  </head>
  <body>
    <ul class="horizontal_menu">
      <li>
        <a href="dummy.html" title="Back to the home page">
          <img id="home_button" src="button-images/home.png" alt="Back to the home page">
        </a>
      </li>
      <li>
        <a href="dummy.html" title="The basics of dog nutrition">
          <img id="basics_button" src="button-images/basics.png" alt="The basics of dog nutrition">
        </a>
      </li>
      <li>
        <a href="dummy.html" title="Articles on dog nutrition">
          <img id="articles_button" src="button-images/articles.png" alt="Articles on dog nutrition">
        </a>
      </li>
      <li>
        <a href="dummy.html" title="Products we recommend">
          <img id="products_button" src="button-images/products.png" alt="Products we recommend">
        </a>
      </li>
      <li>
        <a href="dummy.html" title="Our bloggy nutrition updates">
          <img id="blog_button" src="button-images/blog.png" alt="Our bloggy nutrition updates">
        </a>
      </li>
    </ul>
  </body>
</html>

Figure 12. Horizontal nav bar with image rollover

I added line 18, to make the <li>s line up horizontally.

The vertical menu had this rule, applied to the <ul>:

...
.vertical_menu {
  float: left;
  width: 145px;
  background-color: #F7DB94;
  padding: 5px;
  margin: 5px;
}
...
<ul class="vertical_menu">
...

Figure 13. Vertical code reminder

Lines 3 and 4 are gone from the horizontal version. I just let the content flow naturally. There was no need to float anything.

W00f!

The Sneaky Underline of @DOOM@

Check out this page. It has this problem:

Figure 14. Extra underline

Hey! Where did the little line come from?

Let’s look at the code:

<ul class="horizontal_menu">
  <li>
    <a href="dummy.html">
      <img src="amd_xp.png" alt="AMD">
    </a>
  </li>
  ...
</ul>

Figure 15. Code that makes the extra line

The problem is in lines 3 to 5. This would eliminate the extra line:

<ul class="horizontal_menu">
  <li>
    <a href="dummy.html"><img src="amd_xp.png" alt="AMD"></a>
  </li>
  ...
</ul>

Figure 16. The extra line – gone!

It’s the white space between <a> and </a> that causes the problem. This is one time that white space in HTML code matters.

Having the look of the page depend on formatting of the code…, well, it’s a Bad Thing. We can use CSS to make the problem go away:

.horizontal_menu li a {
  text-decoration: none;
} 
...
<ul class="horizontal_menu">
  <li>
    <a href="dummy.html">
      <img src="amd_xp.png" alt="AMD">
    </a>
  </li>
  ...
</ul>

Figure 17. Using CSS to kill the extra line

The CSS rule removes the underline that <a> normally has.

Check it out. Here’s what it looks like:

Figure 18. No problem

Summary

On this page, you learned how to:

• Create horizontal nav bars with text.
• Position horizontal nav bars.
• Create horizontal nav bars with images and hover effects.

What now?

Put your skills to work on your own site.

eMe: Make a nav bar

Where are we?

You know how to make nav bars. Make one for your eMe.

eMe nav bar

Make a nav bar that will jump to different parts of your eMe. You’ve made these things so far:

• Text pages
• A quiz
• A slideshow
• A table

You could make a nav bar with links to each of these pages.

What now?

You’ve learned a lot in this lesson! Make links, style them, and make fancy nav bars. Add this to the stuff you learned in the previous lesson – text, interaction, and images – and you know enough to make a complete Web site.

Let’s add one more thing that’s common on real Web sites: a site map.

Site maps

Where are we?

This lesson is about linking pages together. You know how to make basic links and style them. You know how to make w00fy navigation bars.

This page’s goals

This page is about site maps. By the end of this page, you should:

• Know what a site map is for.

• Be able to create a site map from nested lists.

What is a site map is for?

A site map is a Web page that summarizes an entire Web site, or a big chunk of a Web site. Here’s an example, zoomed out so you can see most of it.

Figure 1. Traditional site map

There’s a link for each main section of the site. Links to pages in that section are indented under it.

Some maps are horizontal, like this:

Figure 2. Mozilla site map

There’s not as much room for text with these maps, but they take up less screen space. Some maps like this are added to the bottom of every page. You can see more examples on the Web Designer Wall.

Site maps have three goals:

• They let users get a quick overview of a site’s contents.

• They let experienced users quickly jump to pages deep in the site.

• They help search engines find all of the content on the site.

Let’s see how to make a traditional, vertical site map.

Site maps as nested lists

An easy way to make a site map is with nested lists. Suppose we wanted to make a site map like this for the dog nutrition site.

Figure 3. Simple site map

Here’s the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Site Map</title>
    <style type="text/css">
      body {
        font-family: Verdana, Helvetica, sans-serif;
        font-size: 14px;
        background-color: #FFFFCC;
      }
      #site_map li {
        list-style: none;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Site Map</h1>
    <ul id="site_map">
      <li>
        <a href="dummy.html" title="The basics of dog nutrition">The basics</a>
      </li>
      <ul>
        <li>
          <a href="dummy.html" title="Help your puppy grow">Puppy nutrition</a>
        </li>
        <li>
          <a href="dummy.html" title="Keep your older dog healthy">Nutrition for older dogs</a>
        </li>
        <li>
          <a href="dummy.html" title="Food can help with chronic illness">Nutrition when your dog is ill</a>
        </li>
      </ul>
      <li>
          <a href="dummy.html" title="Articles on dog nutrition">Articles</a>
      </li>
      <li>
          <a href="dummy.html" title="Our bloggy nutrition updates">Blogs</a>
      </li>
      <ul>
        <li>
          <a href="dummy.html" title="What's on our minds right now">Latest entry</a>
        </li>
        <li>
          <a href="dummy.html" title="Advice from the past">Archive</a>
        </li>
      </ul>
      <li>
        <a href="dummy.html" title="Products we recommend">Products</a>
      </li>
      <ul>
        <li>
          <a href="dummy.html" title="The foundation of good nutrition">Food</a>
        </li>
        <li>
          <a href="dummy.html" title="Healthy rewards">Treats</a>
        </li>
        <li>
          <a href="dummy.html" title="For everyday vitality,and special needs">Supplements</a>
        </li>
        <li>
          <a href="dummy.html" title="Containers, recipes, gifts, ...">Other</a>
        </li>
      </ul>
    </ul>
  </body>
</html>

Figure 4. Code for a simple site map

There are nested lists, that is, there are lists inside lists. This works because browsers indent <ul>s relative to their containers.

To understand this, have a look at this code snippet:

...
ul {
  border: 1px red dashed;
}
...
<p>Some content</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <ul>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  <li>Item 5</li>
</ul>
<p>Some content</p>
...

Figure 5. Indenting and containership

This creates:

Figure 6. Rendered page

You can try the page.

The style rule on lines 2 to 4 draws a border around the <ul>s, so they stand out.

The first <ul> on line 7 is contained inside the <body>. Another way to say it is that the <ul> is a direct child of, or direct descendant of, the <body>. So the browser indents its <li>s relative to the <body>.

The second <ul> on line 10 is contained in the first <ul>. So its <li>s are indented relative to the first <ul>.

This container effect makes it easy to create progressive indents. Just put one list inside another.

CC

A question.

Kieran

Go ahead.

CC

I noticed that the source code in Figure 5 is indented. It sort of matches the indenting that the user sees, in Figure 6. Can you indent stuff on a Web page by indenting the HTML?

Kieran

No, you can’t. Let me explain.

The way the HTML source code is indented in Figure 5 does not affect what the browser draws on the screen. Here’s the same code, with the indenting messed up.

<p>Some content</p>   <ul><li>
Item 1</li>
<li>
Item 
2</li>
<ul>  <li>Item 3
</li><li>Item 4
</li>
        </ul>
   <li>Item 
5</li>
  </ul><p>Some content</p>

Figure 7. Source code indenting messed up

The browser shows exactly the same thing as it did before. You can try it yourself.

So the indenting the user sees, that is, this…

Figure 6 (again). Rendered page

...depends on containership and styles. It is not affected by the way the way the source code is indented.

Why was I careful to indent the code in Figure 5? To make it easier to follow. If you had to change the code (for example, to add more items), which would you rather work on? The code in Figure 5, or the code in Figure 7?

Good Webers pay attention to source code indenting. It makes site maintenance (that is, changing the content) easier and more accurate.

One final note about this site map:

Figure 3 (again). Simple site map

Here’s a snippet from the source code:

...
#site_map li {
  list-style: none;
  margin: 10px;
}
...
<body>
  <h1>Site Map</h1>
  <ul id="site_map">
...

Figure 4 (again). Code for a simple site map (snippet)

list-style: none; removes the dots from the list items. margin: 10px; adds some space around the items, to separate them a bit. Just makes things look a little better.

Summary

On this page, you learned how to create site maps as nested lists of links.

What now?

We’re done with this lesson! Apart from the exercises. They start on the next page. Do them. You can’t claim you can make links, nav bars, or site maps until you do the exercises.

You know enough to build complete Web sites. Simple, yes, but you could make something that a small business or nonprofit could use as its first site. W00f for you!

Exercises: Web pages with links

You should do the two recommended exercises. Do the optional exercises if you want more practice.

Exercises in the Explore section are more challenging. You may need to use HTML and CSS that isn’t covered in CoreDogs. Get ready to Google!

Recommended

Optional

Explore

These challenging exercises may use HTML not covered in CoreDogs. Get ready to Google!