Links for web sites

Links is the backbone of the technology behind World Wide Web, which most people erroneously believe is the same as the Internet. If you look carefully, you can see that before the web adress it says http or https. The first one, http, is the original version and is short for Hypertext Transfer Protocol, https is when you are working with a secure connection and short for Hypertext Transfer Protocol Secure.

The hypertext being referred to is the links, and that was what was new and different about World Wide Web, compared to the earlier protocols for navigating the web. Instead of writing command lines to go to a site or get a document, you could just click the hyperlink, i.e. what we take for granted as a link today, and you would be transferred to the next page or site/directory.

Besides being an easy way of getting from one page to another, links also serve another purpose. When search engines like Google or Bing are indexing the pages on a web site, they do it by following the links on the page, unless you ask them not to. In practice this means that if there is no link to a page, the search engines can't index the page. A page with no inbound links is called an 'orphan'.

The tage being used for links is <A>. For this we use the attribute HREF to point to the page where the link is supposed to take you. A link going to the web site HTML Shark will look like this:


The A tag and the associated HREF is what the search engines are looking for and following. If you are linking to a page on another site, it is important to remember http:// (or https:// if applicable), otherwise the link acts as if the address is on the same site.

When written as shown above, you can't see or click on the link, as there is nothing to make it visible. The visible part is between <A> og </A>. The classic version is some explanatory text, e.g.


On the page it looks like this:


This is links with blue text and underline, as we know them from the net.

Obviously it doesn't have to be text, or only text. You can easily put in images. Images are the IMG tag, and if we use our laughing smile, used on other pages on the site, the code looks like this:


and the result looks like this:


In principle there is no limitation as to what you can use as a link, but you should give what you are using some consideration, in regards to the user interface.

If you are opening a page on the same site, as you would normally do with a navigation pane or e.g. the cookies and privacy statement at the bottom of the page, you normally won't use http:// but just write the file name. A link to the page with the file name Page2.htm in the same directory will look like this:


The link does not have to be to another HTML page. You can just as well link to other file types, e.g. if you want the link to open the pdf document named Document1.pdf in the directory named Documentes:


With this way of creating links, you can't change the size and looks of the window. If you want to do this, you have to use the attribute named ONCLICK, which is described further down on the page.

Links in general, the ones that the search engines can follow, can only be done this way. This, however, is not the same as not being able to create something that works like a link, that opens another page when clicked. The ONCLICK attribute can be programmed to open a new page. The method has some advantages and disadvantages compared to the A tag, which is why it may be a preferable solution in some cases. How to work with ONCLICK is shown further down.

Links are made to be a luminescent blue with underline by default. It doesn't have to be this way. Especially with navigation panes you are often interested in having ordinary typography, but also with certain background colors, it is preferable with another link color, due to the readability of the text.

By default a link opens the new page in the same window as you are currently using. However, it is often an advantage to open the page in a new window or a new tab. In general, you can't decide whether the user opens the page in a new window or new tab. This is controlled by the browser's set-up, not the web site. This is not the same as being unable to control it just a little. If you define the size of the page as something other than full screen, the browser will automatically open the target in a new window.

The classic solution to new window/new tab is TARGET="_blank". It has been claimed that in HTML 5 this solution will be removed, but currently it works just fine in HTML 5, and there are some rumors that the solution will be kept. The possible values for TARGET are:

Value	Effect
_blank	Opens the link in a new window or tab
_self	Opens the link in the same window or tab. This is the default value for TARGET.
_parent	Opens the link in the window or tab that created the page. Only relevant if the page was created using _blank, and only a variabel being used with frames.
_top	Opens the link in the same window or tab. If the link is embedded in a frame, the page isn't opened in the current frame, as with _self, but in the entire window/tab.
framename	Opens the link in the frame with the specified name. Only relevant if you design web sites using frames.

If we want the link to the HTML Shark from before to open in a new window or tab, the code is then:


As seen, there is a lot of options referring to frames. It is a technology that was hot in the late 1990s, but isn't used anymore. See the page about frames and iframes, when I get around to writing that.

Instead of TARGET="_blank" you can use another solution called ONCLICK="target='newtab'". It is said that the two methods give the same result, but this is not the case. Starting with the syntax, our link from before now looks like this:


The difference between the to solutions is that TARGET opens a new window/tab, no matter if there is a window/tab already opened using the link or not. If you click on the link 10 times, you get 10 windows/tabs. If you have 10 different links using TARGET on a page, they each open their own window/tab, no matter what links you clicked before. ONCLICK opens the window/tab as a child object, and all pages will be opened here. This means that no matter how many pages you have links to on a page, they will only open in one window/tab. If the window/tab is open, when you click on a new link on the page, the content in the child object will be replaced with the page being linked to.

Instead of using HREF, you can use the attribute ONCLICK along with the JavaScript command window.open. To make a link with the same properties as the one before with TARGET="_blank", the code looks like this:


On the page it looks like this:


Notice that when the mouse is over the link, it does not light up, and the small hand, normally apprearing, isn't there. That's because it isn't a real link in the HTML sense.

If you want the hand to appear, you need the attribute ONMOUSEOVER. To do this particular trick, the attribute has to be ONMOUSEOVER="this.style.cursor='pointer'".

If you want it to light up, e.g. in red, you can either specify a class in your style sheet and specify the color with :hover (see styling of links above), or you can specify ONMOUSEOVER using this.style.color='Red'. If you use ONMOUSEOVER you just have to remember to reset the color to normal text color, in this case black, otherwise the link will keep the red color when you are no longer pointing at the link. Then the code looks like this:


On the page it looks like this:


The art of changing pointeres can be seen on the page about pointers (to be translated).

Default for window.open is to open pages in a new window/tab like using TARGET="_blank". Obviously you can make the link open in the same window/tab, equivalent to TARGET="_self". Then the code looks like this:


In the same manner, you can have the page opening in a descendant window, so you only generate one new window/tab. Then the code is

The attribute ONCLICK offers some options for controlling the looks of the new window you open. Here you should be aware, that if you specify the looks of the new window/tab, youl will always get a new window, regardless of whether your browser set-up is 'open in new tab' or not. This means that if you want to ensure that it is always a new window being opened, not a new tab, you just have to specify parts of the look in your window.open. On the other hand, if you specify that is should be the same window, by using '_self', all instructions on styling are ignored.

Styling of new window using ONCLICK

The options for styling of the new window is as follows:

Value	Effect
width	The width of the window in pixels. You do not specify that the unit is pixels.
height	The height of the window in pixels. You do not specify that the unit is pixels..
left	Distance from left side of the screen to the window, in pixels. You do not specify that the unit is pixels.
top	Distance from the top of the screen to the window, in pixels. You do not specify that the unit is pixels.
titlebar	Do you want a title bar on the window? Here you only have the options yes and no.
menubar	Do you want a menu bar on the window? Here you only have the options yes and no.
toolbar	Do you want a tool bar on the window? Here you only have the options yes and no.
location	Do you want a location bar on the window? Here you only have the options yes and no.
scrollbars	Do you want scroll bars on the window? Here you only have the options yes and no.
status	Do you want a status bar on the window? Here you only have the options yes and no.
resizable	Do you want the window to be resizable? Here you only have the options yes and no.

If we are going to show our page from before, in a small window, 350x300 pixels, with no menu bar, no tool bar, no scroll bars, and allowed to change the size of the window, you can do one of two things:

1. Specify a name of the window. If there is no window with that name already, one will be created. If there is a window with the specified name, content will change, but the looks of the window will stay the same.
2. Specify an _blank in your windows.open. This works like using TARGET="_blank".

The code for the solution looks like this:




On the page, the result looks like this:



After this, the link can be styled with pointer and color as describe above.