What makes the Internet into the “world wide web”? Or more accurately, what makes it a “web”? It is links. See, if there is a web page floating out there on a server with no links pointing to it, it might as well be completely off the Internet. Nobody can get to it! It is links which link one web page to another and it is links which form the continuous flow that is the Internet experience.
Obviously, a link is essentially an element on a web page that, when clicked, takes the user to another page. When that link is a text, it is usually signified by being an underlined and your mouse cursor will turn into a little hand. You clicked on a link to get into this very lesson.
OK, now let us jump right into how to create a link.
[hidepost=1]
How To Make a Link
OK, here is a basic link:
Now, here is the HTML for that link:
You can see that the basis of a link is the <a> tag. The attributes used on the <a> tag is what controls the way that link behaves:
- href. This is the web address to the page you want the visitor to go to when they click on your link. This link can point to any remote web page or a page on your own website.
- target. Target is the location where you want the link to open. For example, do you want the link to open in the same window or in a new window? The options are:
- “_blank”. A target of “_blank” will open the link in a new browser window. This is useful if you want the person to not leave your own site when they click on an external link.
- “_parent”. Used in the case of a frameset to open the link in the frame which opened the current frame. More on frames later in this course.
- “_self”. Used to open the link in the same window. This target is not really necessary because leaving the target out completely achieves the same effect.
- “_top”. If using frames, this would load your link in the topmost frame.
- title. This is a suggested title for your link. It is usually used to describe the link in some way. Some web browsers will display the contents of the title attribute if you hover your mouse cursor over the link. Most web browsers will ignore it, however it is very useful for search engines.
- name. A way to link to an anchor on the same page (see section below on linking to specific places on a page).
I will now demonstrate use of some of these attributes. Here is a link which would open PCMech.com in a new browser window:
Notice we have used the target attribute and used a value of “_blank”. You will also notice we’ve used the href attribute to determine where the link points. The href is the single most important component of any link. Now, here is a link with a title attribute:
You will see here that I have given this link a title. In certain web browsers, the visitor will be able to see this title if they hover their cursor over the link.
Linking To Specific Places On a Page
Links can point to other pages but it can also point to the same page – just a different place on that page. For example, perhaps you want to put a link at the bottom of your page which, when clicked, takes the user back to the top of your page. Here’s how:
Wherever you want the visitor to click TO, you need to put an anchor. The anchor simply uses the the <a> tag with the name attribute. To implement the above example, we would need to put an anchor at the top of the document:
That’s it. Jut place this anchor in your HTML near the top of your document. Realize that nothing will show up in the web browser. Your visitors will not SEE the anchor, but it will be there.
Now, down at the bottom of your page, we’ll create a link to the top of the document using the following HTML:
OK, you will see it is just a normal link, however we are using the pound sign (#) and the exact text of the name attribute you used to create your anchor. When that link is clicked, it will simply skip the user up the page to that anchor. An example of that concept is used right here on PCMech EDU. Click the link at the bottom of this page that says “Back to Top” and it will skip you up to the top of this lesson. When you hover over that link, you will see that it is linking to an anchor called “edu_top”.
You can call your anchors anything you want and place them anywhere you want. You could create an anchor called “blahblah” anywhere on your page and then link to “#blahblah” from anywhere else. Note that you can also link to an anchor on a remote page. For example, let’s say that I had an anchor on www.pcmech.com called “videos”. You could create a link directly to that by using the following HTML:
Creating a Link to an Email Address
You can also create a link which, when clicked, opens up a person’s email program to send an email. This is done using the “mailto:” prefix in your link. I will demonstrate by creating a link to my own email address:
This will produce the following:
and when you click that link, your email program will open up with a new email pre-addressed to me.
[/hidepost]
Like what you read?
If so, please join over 28,000 people who receive our exclusive weekly newsletter and computer tips, and get FREE COPIES of 5 eBooks we created, as our gift to you for subscribing. Just enter your name and email below:
