Right this moment, you are on the World Wide Web. You are using a web browser to see this web page and probably clicked on a HYPERLINK (website link) to get here. You may have come from just down the street or all the way across the world. That is what is so great about the World Wide Web. We can visit faraway places in an instant with the click of a mouse.
This web page is written in HTML. It also has a web address (URL). If you come back again, it should be in the same place.
HTML TAGS are used to create HTML documents like this so that you can view them in web browsers such as Google Chrome or Firefox. Without formatted text, the page would look rather dull and boring. Luckily, the tags that make up HTML are hidden when you see web pages in a browser. Instead, you see a clean page that is easy to read.
HYPERLINKS
This tutorial is mostly about hyperlinks. They are the clickable links that take you from one web page to another, to a different section of the same web page, or allow you to download a document like a PDF. They are an integral part of the World Wide Web.
Look at any web page. You will probably find at least one hyperlink. When you hover your mouse cursor over a hyperlink, the appearance of your mouse cursor will likely change into a hand symbol. That is a telltale sign that you are on a hyperlink. A hyperlink may include a single word or a group of words that is often underlined and BLUE in color.
Hyperlinks can be styled to remove the underline from the link or change the color by using CSS (cascading style sheets). Hyperlinks don’t have to be BLUE!
Example: Crimson Designs
HTML Tags were used to create the example link shown here.
These are the tags that were used to create it:
(You wouldn’t normally see these tags on a web page when you are looking at it in a web browser.)
The HTML TAG used to create hyperlinks is the anchor tag (<a> </a>). But those tags do nothing by themselves. You need to add information about where you want the link to go.
A stands for Anchor.
It begins the link to another page.
HREF stands for Hypertext Reference.
HREF indicates that a URL is being linked to.
The WEB ADDRESS (URL) is the part surrounded by quotation marks. Also notice that the address has an equal sign in front of it.
The ANCHOR TEXT is between the <a> and </a>.
It is where you write the text you want to appear on the web page.
IMAGE LINKS
A hyperlink can be an image instead of text. This is simply done by surrounding an image tag with the anchor tags (<a> </a>) in the same way you would surround text.
RELATIVE AND ABSOLUTE LINKS
There are two ways you can refer to the document you want to link to in the WEB ADDRESS (URL). You can use Absolute or Relative Links to help the browsers understand where you want the link to go to.
ABSOLUTE LINKS
What is an absolute link? A hyperlink that uses an absolute address contains an entire URL. An absolute link defines a specific location of that web page on the Internet. To link to a page that is on another WEBSITE, you have to use an absolute link. It includes (1) the protocol: http (2) the host name and (3) the exact path to the file.
RELATIVE LINKS
What are relative links? Relative links simply show the path from the current file to the linked file. With a relative link, the browser already knows where the current document is located. If you link to another document in the same directory, you do not need to write out the full URL. Only the file name is necessary. Relative links, and their paths, can be tricky, though, when web pages are at different levels in a website. (Sometimes related web pages are grouped together and placed into special folders while others are not.)
First, an easy example:
Let’s define a RELATIVE LINK to a web page (cats.html) from a web page (dogs.html). These two web pages are at the same level in the website.
Here’s a tricky example (going down a level into a folder):
Let’s say that we are putting a web page (puppy-toys.html) inside a special folder (puppies) in the website. This web page is now in a subdirectory.
If we want to link to puppy-toys.html from dogs.html, we need to include the name of the subdirectory (puppies) followed by a “/” in front of the file name.
Another tricky example (going up a level out of a folder):
If we want to link from “puppy-toys.html” to “dogs.html” which is in a parent folder/directory, we need to put “../” in front of it. Each time you want to move up a level in the folder hierarchy, you must type two periods and a forward slash (../).
INBOUND AND OUTBOUND LINKS
INBOUND LINKS
An INBOUND (incoming) link is a link from another website to your website.
The number of INBOUND links you have is one indication of the popularity of your website. Each website that links to yours is basically casting a vote in favor of your website. Reputable inbound links help increase your page rank, traffic and credibility. The best way to get inbound links is simply to create web pages which other webmasters will want to link to.
OUTBOUND LINKS
OUTBOUND (outgoing) links are links you create on your website to go to another website.
You do not have to ask for permission to link to another website. You can link to whatever website you want to.
OUTBOUND links may help drive traffic to your site. If you link to other websites, especially blogs, the other website owners may reciprocate by linking back to your site. Search engines may also start perceiving your site as having some authority in your niche (if your links are relevant). But if your site has many random links, search engines may start perceiving your site as a link farm and will penalize you for it.
BROKEN LINKS
Search engines and visitors find pages through links.
Because the web is constantly changing and websites are being moved and removed, it is inevitable that over time your site will contain broken OUTBOUND LINKS. Don’t assume that a website you link to will always be there on the Internet. It is important that you periodically check your site for broken links.
The 404 or Not Found error message is an HTTP standard response code indicating that the web browser could not find the web page that you were looking for. This is the message you will receive when you try to reach a web page from a broken link.
WEBSITE LINK TOOL
ONLINE BROKEN LINK CHECKER
This free online Checker / Validator not just tells you which of your hyperlinks are dead but it will also show to your where to find them.
A Quick Review on Hyperlinks
- Hyperlinks are clickable.
- Hyperlinks can be absolute or relative.
- Hyperlinks may be inbound or outbound.
- Hyperlinks can be made with text or images.
- Puppies are cute.
Thanks for stopping by. You likely clicked on a link to get to this New Hampshire website. Hope you had some fun while learning about hyperlinks.
Return to Top