January 22 2008
How To Create HTML Links
Tagged Under : HTML, links, target tags, title tags, Website Design
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
Today is Tipsy Tuesday (aka Tuesday Tips Day). I have to stop and remember that not everyone is experienced in HTML, and not everyone knows how to create links to other websites. So today we’re going to look at creating text links, as I’ve seen how-to requests on several lists lately.
Step 1 - Here’s a basic text link:
The above HTML code can be broken down as follows:
- A stands for Anchor, which begins every link.
- HREF is short for Hypertext Reference, which is what tells your browser what to open.
- http://www.wahm-cafe.com is the full internet url address. Note that the url begins with an = and is enclosed in ” “. Without these key ingredients, your link will not work.
- Click Here To Visit Wahm Cafe can be any text that relates to the link. In this case, I’m telling you to click there to be taken the the index (home) page of Wahm Cafe.
- Closes the link.
The finished HTML text link would appear like:
Now, without clicking on the link, hover your pointer on the colored words. You’ll see the website address of the link you created come up along the bottom of the browser window, down where it usually reads “Done” (usually the bottom left corner of your browser window).
Step 2 - Adding ‘TITLE’ Text to your link:
Start off with your basic text link:
Now after the URL, we’re going to add in the following:
Putting it all together, your HTML link will look like this:
And here’s what your new text link with the TITLE tag will look like:
Try the same thing that we did before, by hovering your mouse pointer over the colored text. You should still see the full website url appear in your browser, but the text that you used for your TITLE should also popup in a little box.
The only thing left that you may want to add to your text link, is to tell the browser where to open the URL. For example, you can have it open on the same page or in a new tab. Here’s how:
After your TITLE tag, you can add a TARGET tag:
TARGET=”_blank”
This target will cause the link to always be loaded in a new blank window. This window is not named.
TARGET=”_self”
This target causes the link to always load in the same window the anchor was clicked in. This is useful for overriding a globally assigned BASE target.
TARGET=”_parent”
This target makes the link load in the immediate FRAMESET parent of this document. This defaults to acting like “_self” if the document has no parent.
TARGET=”_top”
This target makes the link load in the full body of the window. This defaults to acting like “_self” if the document is already at the top. It is useful for breaking out of an arbitrarily deep FRAME nesting.
The most popular of the above TARGET attributes is _blank which causes the link to open a new window or tab.
Here’s how we add in the TARGET tag:
**Note, it’s important to mention at this point that there is a great debate on whether or not you should have links opening in a new tab. As a Firefox user, I make use of my right click option to have links open in a new tab on a regular basis. Many people feel that it’s rather ’spammy’ to set all your links to open in a new window, and I tend to agree with them. It drives me rather nuts if I end up with 10 zillion windows open without my permission. This is especially true for internal links, or links that open a new page within the same website. For external links, or links that open new websites I will often use the _blank target attribute. If you`re interested in reading more about this debate, then I encourage you to take a look at Darren`s Pro Blogger discussion (and yes.. that link does open in a new window LOL).
| 2.5 |
Dianne
