Links for webs at Ricci Street's Gizmos, Inc. Toolkit: PC Workshop

Links are what make a web a web. Adding linking to the Internet in 1990-1991 as a new protocol was an brilliant idea by Tim Berners-Lee. He wrote the HTTP protocol as well as HTML, hypertext markup language, and thus invented the Web. Markup languages like HTML had been around for thirty years. Berners-Lee added the hypertext idea, which had also been around for thirty years. The genius of the World Wide Web then is a combination of hypertext and the Internet. Looking back, it seems so obvious, doesn't it?

1) an anchor, which could be either a whole computer file or a specific place within a file

The key here is anywhere. We can discuss elsewhere the problems that brings for the music distribution industry, corporate lawyers and secret-keepers, and control freaks in general.

What's important here is that you realize that hypertext is both brand new and very very familiar. It's new because we've been taught since grade school to think linearly. Our fundamental unit of communication, ink on paper, has been organized linearly at least since the first scroll, back when the writing surface was made of mashed-up reeds (papyrus) and then stretched animal skins (parchment).

Perhaps the biggest struggle of any schooling is to get children to begin to think linearly and logically. Prior to that, we think associationally and emotionally. We don't stop thinking that way, of course, but we get paid with grades and then money for also thinking linearly. That's why we call it work. It's very hard to do and we don't do it naturally or, most of us, happily.

A web's organizing principle is not linear. It is associational -- that's what a link is. It's as fundamental to the Web as it is to us. What happens in a web is very similar to what happens in our brains, where we speak of two ideas "clicking". That's what we do in a web. We follow the web maker's associations or links, all the while mapping them in our own neural webs, the ones in our skulls.

The Web is so new that there aren't many accepted or well-developed theories based on our experiences of the last ten and especially five years. Ted Nelson's seminal ideas about hypertext since the 1960's are fascinating but speculative. We are only now getting the data to start to test theories. Until we build a much larger body of research, theorizing about such a rapidly changing environment as the Internet is futile.

We have a generation of children coming up who have never know life without the Web. Our institutions have barely begun the transformations that await them. If the hundred years after Gutenberg's first book are any guide, most Americans alive today are going to have to die before their children and grandchildren can begin the large-scale social changes such as those that followed the printing press.

The a tag

Note | In the code below, file, directory, and anchor names are all one word, all lower case, that is, no spaces, no caps.

The a tag goes on either side of the text or image that will be "hot". The a stands for anchor. It can have either or both of two attributes.

If you will be linking from that anchor, you need to specify the href, or hypertext reference. Where on the Web or web do you want to link to?

If you will be linking to that anchor, to that exact spot on the page, you need to give the anchor a name. In that case, with no href, there's nothing to click on, so it would be an empty tag:

The user will see nothing on the surface of the page, but that anchor point will be the top left corner of the screen after the user click on the link to it, which can take two forms:

elsewhere on the same page, for example, under the heading "this page" near the top of almost every Ricci Street page:

<a href="http://RicciStreet.net/index.html#foo">jump to foo on the Ricci Street home page</a>

Notes

the URL http://RicciStreet.net does not need a www. Most web servers are configured not to require it, but you'll never go wrong using it.

Types of links

An href can have only one of two types of values for: absolute and relative. A page can have any number of both types.

Absolute links

Absolute links, aka complete URLs, are like footnotes in the print world. They go to offsite pages where you found the information and where the reader can learn more. They have the complete path, the whole unique address. The quotation marks after the href attribute will enclose the whole URL, from http:// to the extension at the end of the file name. For example:

An href from one page to another page not in that domain must always be an absolute link.

Relative links

On some pages, all the links go to the same domain. It is then possible, but not common (and thus not explained here), to specify the "base URL" in the head.

It is much more common to want to make a link within a web. This is called a relative link, aka partial URL, which we're already seen above for a link within a page: <a href="#foo">. You might find a complementary discussion about site structure useful.

Relative links have the partial path, only enough of the path for the browser to find it. Think of a family where the generations represent levels of directories and subdirectories.

Siblings. The page you're linking to is in the same subdirectory as the page you're linking from. Put the file name only. The rest of the absolute path is added, that is, made relative to the address of the page you're linking from.

<a href="page.htm">

Children. The page you're linking to is in a subdirectory one level down from the directory of the page you're linking from. Continue the path.

<a href="/subdirectory/page.htm">

<a href="/subdirectory/nextsubdirectory/page.htm">

Parents. The page you're linking to is in a subdirectory one level up from the directory of the page you're linking from. Make a link like this:

<a href="../page.htm">

Tip | The notation ../ has no spaces and is pronounced "dot dot slash" or "period period slash".

Cousins. We're starting to stretch the analogy here, but I'm talking about a complex site like Ricci Street where you want to link from deep in one directory structure directly across to deep within another directory structure.

For example, view the source code of this page and look at the HTML for the top navigation bar. You'll see href="../../../../riccigreen/search/index.html", which means "in this domain, go four directories up the hierarchy to find the subdirectory riccigreen and its subdirectory search and display the index.html file within it."

Tip | If you made your links in FrontPage's Normal view, these relative links should work as long as the structure on your laptop mirrors the structure on the server. Learn more.

Email links

This is called a mailto link. Instead of the http:// put mailto: and then the full email address. It is not case sensitive.

Clicking on my name would bring up Microsoft Outlook or whatever email client you have set in your browser's Internet options.

Tip | If you're online via AOL but using a standalone browser (highly recommended), you're going to have to copy and paste email addresses into the AOL software.

Links to other objects

You can link to any computer file with a web address. If the browser can display the file, it will. If there's an appropriate plug-in or viewing software on the user's machine, then the plug-in should start up automatically as soon as the file is downloaded. For everything else, you have a download manager either built-in or separately downloaded from a company such as Real. These links can be absolute (whole URL, as are all the examples below) or relative.

will display this image file (.gif file) in the browser starting in the top left corner against a white background. Try it: Gizmos, Inc., logo

will download this video and start it playing in the media player associated with .mpg files. Learn more about file associations.

will download the Excel file named hw1.xls and start up Excel. The spreadsheet will display either in the browser or in a stand-alone instance of Excel if you don't have the latest Microsoft browser.

Appearance of links

By default, unclicked links are purple and underlined, as on Yahoo. Recently clicked links, that is, those links still in the browser's cache, are a little lighter purple but still underlined. If you've clicked but the new page hasn't come in yet, Microsoft's browser puts a faintly dotted line around the text or image enclosed in the a tag.

Most ecommerce sites use something other than the defaults. I've never seen data on WWW links overall, and would be happy to include it here if you run across it and would be so kind as to send me the URL.

Formats

Styles

You can specify the font family, size, and color attributes of text links, just as you can any text. In addition, you can specify one set of attributes for unvisited links and another for visited links. Learn more about styles.

Rollovers, aka mouseovers

Using a bit of JavaScript, you can have a link change appearance when the cursor hovers over it. If it's a text link that changes color or font, the JavaScript changes the a tag's attributes. If it's more complicated, it's usually one image replacing another for the duration of the cursor's hovering.

This is such a common and simple effect that I made a page just to show you how to make mouseovers.

Image as anchor

If you want the image with the filename "logowares.gif" to be hot, wrap the link tag pair around the image tag. The examples below show relative links, but the same syntax applies to absolute links (the whole URL).

Clicking on it will take you to the target location "top" <a name="top"></a> elsewhere on the same page, in this case, the top (duh!) of this page:

Image maps

For some large images, separate sections are linked to different pages. This is very common on e-commerce home pages such as www.carnival.com. View the source code and puzzle it out.

Issues and problems

Taken as a coherent whole, a web's links replace the page numbers and staple in a printed, linear report. This is also called the navigation system. It's almost always a one size fits all and causes more problems of disorientation and cognitive overload than any other single factor.

Help your visitors navigate around your site - either with menu lists, random links, etc.

Should links have a consistent look and feel and sort of disappear? Or should they all look different and draw attention to themselves?

To what extent should they be predictable, that is, to what extent should they create an expectation of where they link to and then do so?

Some e-commerce webs have all onsite links (either relative or absolute) and no offsite links, the better to keep you on the site and allay the lawyers' fears.

Other webs, such as Ricci Street, essentially a customer service web, have more offsite links than onsite, the better to set you off exploring on your own. We won't mention some of the legal opinions I've received.

Links buried in code can't be printed with the browser's print function. You'd have to view the source code and print that text file. Links written out as text are printer-friendly.

Is it legal / ethical to link to any site you want to? Some lawyers say permission to link should be made explicitly in writing and then only for a short period of time and only after taking out liability insurance.

Is it legal / ethical to link to a page within a site, aka deep linking? Or should you link only to domain names ("home pages")? For example, href="http://RicciStreet.net/riccigreen/search/index.html" is a deep link.

Find out who is linking to you: Google's Advanced Search

Learn more

Linking to other Web sites has been part of the natural order of things on the Web ever since the Web began. Even so, it wasn't until about two years ago, when the search engines started factoring external links into their rankings, that people with Web sites started getting serious about link building.

Broken hyperlinks (links) are a serious problem on the Web. There are a number of reasons for their proliferation: A large number of Web sites are being closed down. Web sites are not being properly maintained.

Hyperlinks are what make the web different from other media. ... You can link to whom you want ..., and any attempt to prevent it in law is bogus.

The practice of "deep linking" -- when one web site links to a page deep within another site -- has been a great source of controversy in the Internet community. Although at least one case failed to find this practice illegal, it remains an unclear area of Internet law.

Deep linking has an official seal of approval now that U.S. District Judge Harry Hupp has ruled that websites can legally provide links to any pages on all other sites.

What's the most effective way to strengthen the Web? Strengthen hyperlinking. Create dynamic nodes.

Several of the major search engines make a link search easy to do. For example, at GO.com, if I wanted to find which sites link to the ClickZ Forum, I would type into the search box: +link:clickzforum.com -site:clickzforum.com. This asks GO.com to find all pages linking to clickzforum.com, except pages within the ClickZ Forum domain itself.

Some online news sites have begun charging others to link to their articles. But legal experts say no U.S. law or court decision allows a website to successfully demand payment.

The Web is primitive: links are static (point to one hard-coded location, whether it is the right one for your audience or not) and singular (unable to point to multiple destinations). To make links dynamic and multiple, learn more about the OpenURL Framework and products like SFX and CrossRef.





Showroom information design	Playroom interactivity design	Research Lab usability design
Workbench web design applications	Kiln digital development process	Toolkit digital technology guide


search \| sitemap \| help
Ricci Green \| Digital Wares \| Gizmos, Inc. CyberSea Inn \| Port 80

modified: November 28, 2001 by Douglas Anderson http://RicciStreet.net/gizmos/toolkit/webmaking/links.htm

Links

The PC Workshop