HTML is all about something called Hyper Linking. Actually, that’s what the first two letters of HTML pretty much stand for … Hyper Text Markup Language but what does it actually mean? Well, oddly enough us geeks are not all that tricky to understand, give us a beer mug shaped like Yoda’s head and let us string together a few acronyms and we’re happy.

Hypertext is text on a page that contains a Hyper Link. 

A Hyper Link is a piece of text or graphic which links to another document. When a user clicks the Hypertext, they follow the Hyper Link to the new document. Not brain surgery but I completely understand how most people would never need to know that.

Using Hyper Links in Adobe Dreamweaver is, for the most part dead simple. To insert a hyperlink into your Dreamweaver document, simply ensure you are in Design mode and select the text you want to make a hyperlink. Next, using the Property toolbar, type the website address you’d like to link to.

How to make a hypertext link in Dreamweaver

There are actually several things you can do with a hyperlink, called protocols. Most people only ever know about the http:// protocol (the Hyper Text Transfer Protocol) but there’s also a ton of other protocols people could use including the https://, ftp://, mailto://, gopher:// and of course the nntp:// protocol. If you have no idea what these are, congratulations … you’ll almost never need to care in your life unless you’re a hard code web developer.

Once you’ve added an http:// link using Dreamweaver you can also force the clicked link to open in a new web browser simply by adding the phrase _blank to the Target field of your property bar. There are a couple of other neat tricks with anchor tags people should be aware of, but to accomplish them we’re going to have to switch to Code view in order to see the following code:

[source lang="html"]<a href="http://www.thisismyurl.com">This is my Hypertext.</a>[/source]
In addition to the href value (where the click will go), you can also add:

• accesskey to make the link a keyboard shortcut
• class to assign a CSS class
• dir (rtl or ltr) to make the text run right to left or left to right
• id to make the anchor text have a proper name
• lang to assign a language value
• style to format the tag
• tabindex to index the tab order for the link
• title to assign a title tag
• rel for the link relationship.

Of these I would recommend most links on a website have an href value to show where people should go, an ID if it’s a critical link, a rel for defining relationship values and the title for SEO value. Typically then, a link should look like:

[source lang="html"]<a rel="nofollow" title="My Great Website" id="mainlink" href="http://www.thisismyurl.com">This is my Hypertext.</a>[/source]

Absolute Paths vs. Relative Paths

One of the great debates in web publishing is the choice between using absolute paths vs. relative paths. An absolute path is one which is mapped completely to the final destination (http://www.thisismyurl.com/tutorials/placing-page-content-in-adobe-dreamweaver/) vs. one that is linked relative to the document you’re currently reading (../placing-page-content-in-adobe-dreamweaver/) the main advantage of an absolutely path is that it’s locked, while the main advantage of a relative path? That’s it’s relative … in the end, it doesn’t matter so long as the link works.