written by RJ Wattenhofer

The terms "Link" and "Hyperlink" are used almost synonymously in today's online culture. Links encompass the entire spectrum of file & document linking (including navigation), whereas hyperlinks are thought of as in-text links that "speed" you to a related file topic. For the purposes of this article (directed at beginning front-end designers), we'll refer to everything as a link.

Your basic HTML text link:

 
<a href="http://rjwattenhofer.com/">My domain</a>

RESULT: My domain

This link example will open a new page in the current browser window. (NOTE: I am utilizing my own links in the active link examples to keep you on this page. When you use the tutorial text for your own file, replace "yourdomain" with the correct file path).

Your basic HTML text link for a subdirectory file:

 
<a href="http://rjwattenhofer.com/reference/page.html">My domain subdirectory page</a>

RESULT: My domain subdirectory page

This will open a new page in the current browser window according to the file path you embedded. Copy and paste the path you desire from its brower address bar (URL bar, location bar) and place it in the code. The text you choose (in this case "My domain subdirectory page") should reflect the nature of the link topic. You should avoid the term "click here", as this defines nothing and is bad SEO practice.

Open text link in new tab/window:

<a href="http://rjwattenhofer.com/reference/page.html" target="_blank">My domain</a>

RESULT: My domain

• _blank: linked file opens in new tab or window
• _parent: linked file opens in the parent frame
• _top: linked file opens in the full body of the window
• _self: (default) linked file opens in the same frame as it was clicked

This will open a new page in a new browser window or browser tab. The target attribute can be modified to fit your needs, as seen above.

Open text link in mini-popup window:

<script type="text/javascript">// <![CDATA[
var popupWindow = null;
function positionedPopup(url,winName,w,h,t,l,scroll){
settings =
'height='+h+',width='+w+',top='+t+',left='+l+',scrollbars='+scroll+',resizable'
popupWindow = window.open(url,winName,settings)
}
// ]]>
</script>

<a href="http://rjwattenhofer.com/technical/hyperlinks/" onclick="positionedPopup(this.href,
'myWindow','400','400','100','50','yes');return false">Your popup window</a>

RESULT: Your popup window

This will open up a mini-popup window, overlapping the current browser window. The code is split into two parts: The Javascript (top part) and the HTML markup, which includes the target link. Place both parts anywhere on your website page. You can modify the code to resize the window and reposition it.

The first number (400) refers to the window width, the second number (400) refers to the height, the third number (100) is the distance in pixels that the window is positioned from the top of the browser and the fourth number (50) is the space on the left.

Creating in-page anchor text:

<h1 id="top">Your Page Header</h1>
<p><a href="#top">Back to top</a></p>

RESULT: Back to top

When the link is clicked, the page will scroll back to the very top. You can place anchors anywhere in a document and direct the navigation to any point on your file. The "id" tag code is placed at the location on the page where you want the anchor to stop.

Creating external anchor text:

<h1 id="radishes">All About Radishes</h1>
<a href="http://rjwattenhofer.com/reference/page.html#radishes">radishes are swell</a>

RESULT: radishes are swell

The result example link does not bring you to a radish page (I don't actually have one) but it demonstrates how you can use the code above to redirect a user to the middle of a file. The header ID goes on the second target page and the link (radishes are swell) goes on your primary page.

Link no follow code:

<a href="https://phonysocialnetwork.com" target="_blank" rel="nofollow"> Phony Social Network</a>

The "nofollow" code directs search engine robots who crawl your site that this particular link is not relevant to your site content and should not be followed. In the above example, the link opens up Phony Social Network in a new window, leaving your current browser window open so users don't lose your page. Do not use nofollow when exchanging backlinks with other websites or when linking to websites related to your site's content.

Creating an image link:

<a href="http://rjwattenhofer.com"><img src="http://rjwattenhofer.com/reference/green-link-icon-example.png"
alt="an example of a green link icon" /></a>

RESULT:

The green link image is now hot. Clicking it will open up a new window. You can see we placed the image path in the middle of the link code in order to make the image link work. The alt tag is for search engine robots so that they can identify the image subject matter for indexing purposes. The image has been uploaded to our imaginary web server account's image folder (img in the above path) and then the file path leading to the image is used in our code. You can also hot-link to images hosted on websites other than your own.

Customizing your link text:

<a style="font-size: 1.5em; color: #0000ff;" href="http://rjwattenhofer.com"><strong>This link is
big, blue and bold</strong></a>

RESULT: This link is big, blue and bold

The font size 1em equals 16px, so we have made our link font size 24px, or 50% large than normal text. The color (009900) is a hexadecimal color code. The value makes our text link bold-faced. There are many other variables that can be applied when customizing your links.

~ RJ Wattenhofer