RJ Wattenhofer

Tech writing, 3D model building and game design.

May 27, 2017

How to Format Links/Hyperlinks

working with in-text links, anchors and images

written by

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:

Black divider bar
 
<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).

Black divider bar

Your basic HTML text link for a subdirectory file:

Black divider bar
 
<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.

Black divider bar

Open text link in new tab/window:

Black divider bar

<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.

Black divider bar

Open text link in mini-popup window:

Black divider bar

<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.

Black divider bar

Creating in-page anchor text:

Black divider bar

<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.

Black divider bar

Creating external anchor text:

Black divider bar

<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.

Black divider bar

Link no follow code:

Black divider bar

<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.

Black divider bar

Creating an image link:

Black divider bar

<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: an example of a green link icon

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.

Black divider bar

Customizing your link text:

Black divider bar

<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

raymond wattenhofer ad rust custom workshop items ad World First Release, Only This drone quadcopter with both FPV&amp;
 Auto-follow functions, can be controlled by Phone or Remote Control Sony Creative Software Inc. the power level ad airport madness game airport madness game 02 please dont touch anything game please dont touch anything game 02 pre-civilization marble age game pre-civilization marble age game 02 nendoroid link action figure nendoroid link action figure 02
  • xing social button
  • linkedin social button
  • buffer social button
  • reddit social button
  • stumbleupon social button
  • facebook social button
  • google plus button
  • twitter social button
  • renren social button Renren
  • vkontakte social button Share in VK