NH Web Design Blog

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 browsers and other user agents. 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 (like Internet Explorer or Firefox). 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.

Example: Crimson Designs

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!

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.

Here’s an example:

<a href=”http://www.allaboutclowns.com/”>All about Clowns</a>.

This is what you will see in the web browser: All About Clowns.
Clicking on the above hyperlink will send you to the home page.

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. In our example it is All About Clowns.

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.

This example links to the home page on a website for people who hate clowns:

<a href=”http://www.IHateClowns.com/”>I Hate Clowns</a>.

The home page is the only web page where you don’t have to include its file name.
This is what you see in the web browser: I Hate Clowns.

But to buy an I Hate Clowns chalk line t-shirt on the same website, you must include a folder (ncstore) and file name (clc.html) on the end of the web address.

Buy a <a href=”http://www.ihateclowns.com/ncstore/clc.html”>Chalk Line Clown T-Shirt</a> here. You can buy a t-shirt about a clown who has had a terrible accident.

This is what you see in the web browser:
Buy a Chalk Line Clown T-Shirt here.

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 (clown.html) from a web page (ringmaster.html). These two web pages are at the same level in the website.

We can do this: This a link to <a href=”clown.html”>A page about clowns</a>.

Here’s a tricky example (going down a level into a folder):

Let’s say that we are putting a web page (clown-shoes.html) inside a special folder (costumes) in the website. This web page is now in a subdirectory.

If we want to link to clown-shoes.html from clown.html, we need to include the name of the subdirectory (costumes) followed by a “/” in front of the file name.

Example: <a href=”costumes/clown-shoes.html”>Clown Shoes</a>

Another tricky example (going up a level out of a folder):

If we want to link from “clown-shoes.html” to “clown.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 (../).

Example: <a href=”../clowns.html”>Clowns</a>

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 TOOLS

Here are some helpful WEBSITE LINK TOOLS to help keep your website in tiptop shape.

LINK CHECKER

Link Valet is a WWW Link checker. When you enter the URL of a web page, it will fetch the page, and print a report on it. Be patient. It takes a few minutes to generate the report. When you get the first report, you can click on the “Links” link on the right. You will then get a report where you will see 404 errors. It will give you the name of the problem link. You can then go to your web page and investigate that link.

LINK POPULARITY

Submit Express: How popular is your website? This tool will show you how many other websites are linking to you.

BAD NEIGHBORHOOD LINK ANALYZER

Text Link Checker Tool: This tool will scan the links on your website, and on the pages that your website is linking to, and flag possible problem areas. It will investigate to see if you have any questionable links to another website that is being penalized by the search engines.

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.
• Clowns are supposed to make you laugh, not scare you.

Thanks for stopping by. Hope you had some fun while learning. If you’ve come all the way across the world to get to New Hampshire, please be sure to leave a comment. It would be exciting to find out how far you traveled (even though you arrived here in an instant).