We’ve looked at creating basic links previously. We are going to review that information, and work on additional information for creating links within Dreamweaver.
A Basic Link
A hyperlink, more commonly called a link, is a tag that is used to send a user to another page or resource when they click on the link.
Technically it is an anchor tag, that is created with an and a closing . Now the anchor tag does have a couple of uses. We are going to look at the one which will point us to another web resource.
We will need to add a attribute to our anchor tag. This is the href attribute. This stands hyperlink reference. Normally, it will be another webpage, however, it could be an image, data file, or anything else. In most browsers, if the browser cannot open it natively, it will download the file so it can be opened by the associated program. This attribute will look something like what you see below:
href="example.html"
You can also specify a target frame to open in. This is done using the target attribute. _blank is the most common value for a target, as it opens the link into a new window. Like the href, it will have a value enclosed within quotes.
This means a full link might look something like:
Click Here
You have the anchor tag (a), the href attribute which points to the file. The Click Here is a section called link text. Link text is what the user physically sees, under normal circumstances.
Internal vs External Links
Internal
Internal links point to a different section on the same web page. We see these in a couple of places, like the trendy long scrolling pages and FAQ pages, so you can click on a question, and it takes you to the answer.
Internal links require two things. A place to point to, and the link itself. There are two ways to create an internal place to point to.
First, you can use an anchor tag. However, instead of giving it an href attribute, you use the name attribute, and don’t give it link text.
However, named anchors have been deprecated in HTML5.While it won’t be valid HTML5 code, it will most likely work for a while in browsers, as they don’t want to break something on the webpages if they can avoid it.
Instead they favor the second option. Here, you can point to a tag that has an id attribute associated with it. In the example below this would be the faq4. All modern browsers support this, and it makes you code a little smaller. I recommend putting the id on a header element (h2, h3, etc.) or if you have a wrapping div around a content section, like you see here.
....
Note: Because an id and name can be used on the same page, you will want to make sure your names and ids are unique, not only among themselves, but also with each other.
Then, you will need to link to that location. Regardless of how you create your internal linking location, the link method is the same.
In the href attribute, you will place a hash mark (#) then the name or id of the element you wish to move to on the page.
How long till my order is shipped?
External
External links are external you the page you are on. This may be a different page/resource on the same website, or it might be a different website all together. This is what you’ve seen in previous examples like the one below:
Our Frequently Asked Questions
Additionally, you can combine the hash mark into an external link, to jump to a specific part of the external page.
Shipping Details
Relative vs Absolute Links
Relative
A relative link means that you tell the web browser where the file you are link to is, based upon where you are currently located. Files in the same folder for example, do not need a pre-fix, or you could use a (./). The single dot specifies the same folder you are in.
About Us About Us
If you want to go up one level, you use two periods then a forward slash (../). You can repeat this for multiple folders.
Go Home Visit higher up the folder chain
If you are going into a sub folder you simple list the folder name, then a slash, then the file name (subfolder/file.html). You can incorporate as many sub folders as you need to.
Shipping Rates Shipping Rates
Absolute
Absolute references tell you how to get to a resource by specifying the complete location of the resource. If you are on the same machine, you an start with a forward slash (/). You must include all folders to get to that location.
Web Publishing I - online
External links to different websites need to specify the website address, in addition to the page they are linking to.
Web Publishing 1 - online
A good way to think about relative vs. absolute links is that it is like giving directions so I person knows how to get to the store. With relative links, it is based upon if someone walks up to you on the street. You tell them “go down this street two blocks, then turn left.” With absolute links, it is like telling them on the phone where you don’t know where they are. “Starting at the airport, take exit 3 South, then turn onto highway 57…”.
In each case, there is a best time to use relative and absolute. You just need to make sure that you use the right one at the right time.
Image Based Links
Creating a image based link is very similar to a text based link. The difference is instead of link text, you will place a image tag where the link text would go.
It is very important to remember your alt attribute as there will be no text to display if the user doesn’t get your image for some reason.
However, one issue with this is that, much like the blue underline, you will find that there is, by default, a blue border around the image.
There are two way that you can do this. First you may see the use the deprecated border attribute on the image tag. However, the more proper way will be to use CSS. With a chained selector statement you can set a necessary level of specificity that should handle most of the cases you will run into.
/* CSS method - no HTML changes necessary */
a img {
border: none;
}
E-Mail Links
You can create a link via an anchor, however, instead of linking it to a web resource, you can point it to an email. You can do this my modifying the href attribute. By pre-pending mailto to an email address, you can make the installed email client open an email message to the specified email address. This can be seen below:
Email someone
However, most of the time, this isn’t a good idea. There are several reasons for this being a bad idea.
- It puts your email address out there so spammers can find it (you will get more spam).
- It requires the end user to have an email client installed. So lab computers, public access terminals, and such are less likely to have these installed. Likewise, people who use web based email, will not have this work for them.
Instead it is better to use a web based form to handle input from the user.
Working with Navigation was originally found on Access 2 Learn
