Best Practices Web Design

This is the main menu for Web Design: Lessons. Hover over the button below, and the menu for the Lessons pages will appear.

Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.

If you missed the earlier lessons, you should start at the beginning.

Adding Links

We’re going to do two things here: make LINKS to other Web sites, and give some credit to the two sites that have helped us make this page. We’re also going to make another list.

Type this exactly. Put it underneath your musical list.

<h2>These two sites helped me make my Web page.</h2>
   <ul>
      <li></li>
      <li></li>
   </ul>

That’s our list. Save your file.

Refresh your browser with your file open. Tell me what’s different. Doesn’t look right, does it?

We haven’t added our links yet.

In your first <li> item, add this exactly. It goes between the <li> and the </li>.

<a href="">W3C Schools</a>

Save your file. refresh your browser with your file open, and see what’s different.

Adding the Site Address

You have a functional link now. See what color it is, and see the underline? But guess what? It doesn’t work. You haven’t told your browser where to go when you click on it. Click on it and see for yourself.

Let’s fix it. Type this (you can cut and paste the site address):

<a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">W3C Schools</a>

Now it will work, because you’ve inserted the URL in between the empty quotation marks. Save your file.

Let’s fix the second one. In between the second <li> </li>, add this:

<a href="http://www.december.com/html/spec/color.html">December Color Chart</a>

What does the a and href attributes stand for?

Good question. a stands for anchor, which is a fancy way for saying "link." The a attribute "anchors" the rest of the link into the Web page. href stands for Hypertext REFerence. It "references" the other page in the link. As for the quotation marks, they are essential to making the entire thing work.

You’ve noticed by now that browsers routinely style links in specific ways:

• regular, unvisited links are blue and usually underlined;
• "hovering" your mouse over the link (this is called the link’s hover state) turns the cursor into a hand, and shows the link’s URL in the browser’s “status bar,” at the bottom of the screen;
• clicking on a link (the link’s active state) turns it red; and
• an already-visited link (the link’s visited state) becomes purple.

You may find this style boring. Most designers do. Later on, we will learn to style our links in more interesting ways.

More about links.

Adding Titles to Our Links

We’re going to add titles to all of the links in your Web page.

old: <a href="http://www.example.com">Example</a>
new: <a href="http://www.example.com" title="Example">Example</a>

This helps vision-impaired visitors to your site who use screen readers.

More about accessibility, or helping physically disabled people use your site.

Adding Internal Links

Now we’re going to create internal links within your page. These are links that let you jump from one part of your page to another part.

For the very last item in your body, you will add this:

<p><a href="#top">Top of Page</a></p>

Try it. Doesn’t do much, does it?

That’s because you haven’t added a DESTINATION ID. You have to tell the link where, exactly, it needs to take you when you click. Add this to the first <h1> element at the beginning of your body:

<h1 id="top">My First Web Page</h1>

Now try it.

Absolute and Relative Links

This isn’t as confusing as it seems. You’ve already created absolute links (some people call them "hard" links) to two other pages. Those have the full URL of the Web site, including the http:// portion.

Relative links connect the pages on your site, and only your site. (Relative links on other people’s sites only connect the pages on their sites.)

Let’s say you have three pages on your site: your home page, your about page, and your contact me page. (We’re going to do this soon enough, so don’t do this yet. This is just for illustration.)

We can create a “navigation list” of those three pages and link to them using “relative links.” The big difference is that you don’t need to include all that “absolute” URL information.

Here’s our navigation list (the links are fake and do not work):

And here’s what it looks like in HTML code. (Remember, don’t add this!)

<h2>Navigating My Site</h2>
   <ul>
      <li><a href="#nolink" title="Home">Home</a></li>
      <li><a href="#nolink" title="About">About</a></li>
	  <li><a href="#nolink" title="Links">Links</a></li>
      <li><a href="#nolink" title="Contact Me">Contact Me</a></li>
   </ul>

Soon you will begin designing multiple pages. When you do, this technique will let you link between those pages quickly and easily. Even better, when (not if, but when) you change the structure of your pages later on, or move them to another URL or domain, you won’t have to go back into your pages and change a blue million absolute links. Trust me, you don’t want to have to do that.

Other Kinds of Links

You’re not limited to linking to Web pages. You can link your e-mail address, or link to images and files.

Linking to Your E-Mail Address

You can allow people to send you e-mails simply by creating a link using your e-mail address. The following code:

<p><a href="mailto:me@example.com">Send me mail!</a></p>

creates the following code:

Send me mail!

(Notice you’re enclosing this in paragraph tags.)

Put this just above your Top of Page link in your HTML page. You probably have a real e-mail address, but I’d suggest not using it in this lesson just yet.

Depending on the mail client and the user’s browser, this link may either open up their e-mail program with a new message already ready for their text (complete with your e-mail address), or may open up a new browser window with their Webmail (such as Yahoo! Mail or Google Mail) client.

Warning: Using this technique to put your e-mail on the Web almost guarantees you a storm of "spam" e-mails. Spammers will "harvest" your e-mail address within minutes of your posting the link, and soon your inbox will be flooded with unsavory spam of all kinds. (That’s why I used the “example.com” fake e-mail address above. The example.com site is reserved for testing and other methods; no one there will get spam because there’s no e-mail address to receive it.) There are better ways to have users contact you than by using this method.

Linking to Images

More about images.

Linking to pictures is very similar to linking to a Web page. Instead of linking to a HTML file, you’ll link to a JPG, GIF, PNG, TIFF, or whatever image file. Like so:

<p><a href="http://www.example.com/fluffybunny.jpg" title="fluffy bunny picture">A picture of a fluffy bunny.</a></p>

gives us this:

A picture of a fluffy bunny.

If that link were real, clicking on it would open up that cute widdle bunny picture in your browser. You can also link to pictures on your own server, using relative links as described above.

Let’s try it.

Warning: Most people do NOT allow you to link to their pictures. When you do, every time you bring that image up – and everyone else visiting your site brings it up — it costs them bandwidth. Really costs – they have to pay extra when lots of people download material from their site. And linking to someone’s picture is downloading material from that site. Only link directly to someone’s images or other materials with their express permission. (Sites like YouTube allow such linking, so you’re good to go on those sites.)

I’m going to give up a little bandwidth for the cause, and let you link to a picture of my tabby cat, Fussy. He deserves the exposure anyway.

Here’s the link:

http://www.iraqtimeline.com/graphics/fussy.jpg

and here’s the code for the picture on the main site:

http://www.iraqtimeline.com/graphics/fussy.jpg

To write the link, you just insert the code into a link anchor, just as we’ve done up top:

<p><a href="http://www.iraqtimeline.com/graphics/fussy.jpg" title="Fussy the cat">Click for a picture of the world’s fussiest cat!<a></p>

You can cut and paste this into your site. Now you have a link that will, when clicked, open up that picture.

Want to display the picture itself? That’s not too difficult. Instead of adding text for the link, you use the img src tag to link to the picture. In essence, you’re using the picture to link to the picture!

Using this code (and not forgetting to enclose it in paragraph tags):

<p><a href="http://www.iraqtimeline.com/graphics/fussy.jpg" title="Fussy the cat"><img src="http://www.iraqtimeline.com/graphics/fussy.jpg" title="Fussy the cat" alt="Fussy the cat"></a></p>

gives you the final result:

He’s such a handsome fella … (that’s Biscuit lying on the doormat, she’s an elegant lady herself). Clicking on his picture takes you to the picture on my site.

Note: A lot of people use what are called thumbnail images for these kinds of links: basically very small versions of the linked images. Clicking on the small image loads the much larger image into the browser. This practice can keep a design from being overloaded by huge graphics, as well as save bandwidth and download time for the user.

Linking to Files

Linking to Files

You can also link to files, such as MP3s or Word documents. Usually, a browser is smart enough to have your computer open those files in their proper programs (browsers open pictures in their own windows, but they will open an MP3 file in your computer’s music player, for example). If you want your users to download a Word document, it’s easy to do:

<p><a href="http://www.example.com/document.doc">A Word document for you to read</a></p>

gives us this (fake link):

A Word document for you to read

Note: This is not the same thing as embedding a file directly into a page. We won’t learn that here. YouTube, for example, makes it very simple to embed files by merely copying and pasting a string of code.

Check your work: take a look at an example page to see if you’ve gotten it right so far. Use your browser’s View Source (or Source, or maybe View Page Source), found in your right-click menu, to see the source code in the example, and make sure it matches up with yours. Why the example code is not exactly like the code you’re generating.

On to the next page!