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
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:
RESULT: Your popup window
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>
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