Linking

Please post questions in
The Upper Room's
"Parish Web Development" forum

Web Weaving Kit for parishes of the Archdiocese of Denver

One of the great advantages of the Internet is there are thousands -- no millions! -- of people building sites your parishioners would appreciate. You may be surprised by how many Catholic sites are out there and by the wide range of content they contain.

This page of Catholic links will immediately add value to your page, because your parishioners will begin to see you as a portal to other Catholic sites. Download it, edit it, make it your own. In the short term, you may simply choose to put your parish name or logo on top of this page and provide a link to it from your main menu. As you discover interesting new sites on the Internet, however, you can add and subtract links to provide the type of page you believe best serves your parishioners.

Please post recommendations for other sites in the "Parish Web Development" forum in The Upper Room. If you're looking for some guidelines in how to choose appropriate sites to which you may link, you may want to check out these new recommendations from the United States Catholic Bishops.

Hyperlinking is one of the advantages that sets the Internet apart from other forms of communication. You have the ability to send your users to resources that you couldn't possibly accumulate on your own site. All you have to know is the URL -- the address -- of the place on the worldwide web you wish to send them.

Consider the URL a bread-crumb trail leading to the destination of the file you wish to pop up in your user's browser. For example, if you typed this web address in your browser window, it would take you to a column Archbishop Chaput wrote regarding capital punishment:

http://www.archden.org/archbishop/docs/death_penalty.htm

Here's how it works. The http:// is the hypertext transfer protocol. It simply tells the browser that you're seeking this file on the worldwide web. It's standard, and nothing to spend hours awake at night pondering. The second part, www.archden.org, is the domain name -- the name of the site in which the file resides.

It might be easiest to think about the remainder of the trail working from the right to left. A file called death_penalty.htm is in a folder called "docs" which is in a folder called "archbishop" within a site called "www.archden.org". So following the bread-crumb trail, the browser eventually pops up the death_penalty.htm file.

When you make a link from your site to anywhere else in the worldwide web, you're inserting a link tag followed by the bread-crumb trail that takes users to the file you wish them to see. It's really as easy as that.

Still, there are reasons to make hyperlinks, which we'll cover below.

1. Links within your web site.
2. Links to other web sites.
3. Links within your page.
4. Links from images.
5. E-mail links.

Links within your site

It's a good idea to have a consistent navigation bar in your web site so your users always know how to get to the places they want to be. When you link from one page in your site to another, you're making what's known as a "relative" link.

That means the user doesn't have to retreat back into that worldwide web to find the file they seek. You can keep them right there within your domain by making a relative link. Consider your web pages within the same apartment building. If a guest wants to visit Cousin HomePage on Floor 2, there's no reason to send that person outside before visiting Cousin MassSchedule one floor down.

A link tag looks like this:

Your HTML editor will help you make a relative link. In most cases, you highlight the text from which you're linking, and then select the destination file. Your HTML editor writes the bread-crumb trail for you.

For example, a link back to the home page of this site would look like this:

<a href="../index.htm>Highlighted text</a>

The words Highlighted text would appear as an underlined hyperlink in your browser. Clicking on them would send the user down the bread-crumb trail you left for them. The path says, go up one level in the web site (that's what the ../ represents), and then display a file called index.htm. The </a> tag tells the browser that nothing beyond it is part of the highlighted text.

Just to prove the point, you can test in yourself.View source at the top of your browser and you can find the code that makes the below link.

Highlighted text

Now let's look at links to other sites.

Links to other sites

To link to a site outside your domain, you use what's known as an "absolute" link. Actually, an absolute link will get you to any page within your site as well. But again, why send someone outside -- into that crowded worldwide web -- when you can get the job done with a relative link.

But we digress. In order to lay down the bread-crumb trail to a page in another site, you first have to have the address to the site. After that, it's a snap.

An absolute link looks like a relative link, but you need the http://. For example, the following link would take you to The Eternal Word Television Network's home page.

Again, your HTML Editor will have some means of helping you make this happen. Dreamweaver uses a "Property Inspector." You just highlight the text you want to link from, and then put the absolute address in a link window in the Property Inspector. The interface looks like this:

As in most every HTML editor, you provide the address of the site to which you want to send the user, and Dreamweaver writes the tag and bread crumb trail.

Now, on to links within your page.

Links within your page

Here's a quite different type of link. This type of linking is done with "anchor" tags.

You may have noticed that on these tutorial pages, you'll find numbered menus. Clicking on an item will transport you to a different place on the page.

This can be of great use to you when you're trying to find user-friendly means of displaying lengthy pieces of information. For example, if you wish to post your weekly bulletin online, it would be cumbersome for users to have to scroll down through the entire document to find a snippet on the upcoming Pancake Breakfast.

Instead, you might want a menu of items on the top. Clicking on one that says, "Upcoming events" might transport the user to a subsection that includes information on the Pancake Breakfast.

Here's a more tangible example. Want to go back to the top of the page. Click here!

Phew. Missed you. Maybe we should have made a return link, too!

Anyway, that incredible feat was accomplished with an anchor link. Again, your HTML editor will have its own way of creating an anchor link. In any case, however, you need two things:

A target -- or anchor -- to which you will link.
A place from which you will link.

One the first point:

An anchor tag looks like this:

<a name="anchorname">

The anchor tag is inserted at the place, the target, to which you want the link to go.

On the second point:

An anchor link looks like this:

<a href=#anchorname>Hyperlink text</a>

Again, your HTML editor can help you make the link. In essence, the anchor link is just a very short bread-crumb trail, which begins with the character "#". The name of the anchor can be any word or number you choose -- just don't use two words.

In the Newsletter section of this tutorial, anchor links are used to allow the recipients of the newsletter to see an outline of the content at the top of the window. You can surely find many of your own uses for this type of link.

You can even place an anchor on another page, and then link to that spot in the other page. That's done by placing the #anchorname immediately after the file name at the end of your bread-crumb trail. Employing this technique will earn you Employee of the Month, or your money back.

Links from images

You can also make a hyperlink from an image. This works a little differently, but you'll hardly notice it if you're using an HTML editor.

In most cases, you just click on the image, then use some link interface to navigate to the destination page. It's just like making links from text, except you click on the image instead of highlighting the text.

The other difference is that the link is placed within the image tag. You may not know what that is, so for your enjoyment:

Clicking on the angel at the right will send you to the Welcome page. Try it if you like, but you're just wasting time.

The tags that makes the link work looks like this:

The <a href="../index.htm"> and </a> portions of the above code should look familiar. They're the link tags and the bread-crumb trail.

What's new is the <img src> stuff. We talk about this in the next section on images, so we'll dangle that carrot for now. But briefly, it's the tag and path that brings the image onto the page. The link tags just surround it. So whatever's between the link tags -- text or image -- becomes the hyperlink.

E-Mail Links

That image link was a little different. An e-mail link is totally different.

The good news is that the e-mail link is easier than any other link, and it's very convenient for your web user.

In case you don't know what an e-mail link is, here's the quick explanation. You click on a name or a "Contact Us" invitation or whatever, and an e-mail window pops onto the screen with the destination e-mail address in the address window. If you wished to e-mail Greg Kail for instance you'd just click here: Greg Kail

Pretty nifty, huh?

Here's how it's done. The e-mail link looks like other links, except you use the mailto: protocol. In other words, the e-mail link above would look like this:

Get it? gkail@archden.org is the e-mail address for Greg Kail. The words "Greg Kail" are between the link tags, so they show up as a hyperlink.

And you guessed it! Your HTML editor probably has some quick way to write the tag for you. You highlight the text, click something that says "Make an e-mail link" or whatever, and it does it for you.

Ready to move on? Let's talk about images.


©Gregory L. Kail/Archdiocese of Denver, 2001 303.715.3123