Links are defined in HTML using the a element. Before I show you how to use it, here are some general tips on hyperlinks. Make sure you think about good link texts. A plain back is usually no help to anyone. (If a visitor comes from an external page, they usually don't know what is meant by back ). Try to choose descriptive link texts.
Hyperlinks always follow the same principle in HTML.
<a href="videos.html">Current videos</a>
The attribute href is assigned to the a element. This href in turn expects the link target as a value. In the previous example, the file videos.html was referenced. This is located in the same directory as the HTML file in which the hyperlink was defined.
When defining the hyperlinks, the rules that were also presented in connection with the integration of graphics also apply.
Incidentally, you can not only define project-internal links. Hyperlinks can also be set to external files and domains.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
The text between the opening <a> and closing </a> is ultimately the link text. By default, this text is underlined by the browsers.
Specifying the target window
If you click on a hyperlink, the link target is opened in the current browser window. This is normally perfectly fine. However, it may well be that you have set a link to an external domain, for example. If a visitor clicks on this link, the link target should be opened in a new browser window or tab. The advantage of this variant is that your website remains open in the background.
However, you should not open every hyperlink on your site in an external window, as visitors will quickly become annoyed.
The target attribute of the a element can be used to determine the target window in which the respective link target is to be opened. HTML initially offers three standard values for target.
- _blank - The link target is displayed in a new browser window.
- _self - Opens the link target in the current browser window.
- _parent - Here you can break out of the frame. (Please note that frames are not supported in HTML5. In any case, this technology should no longer be used, as there are better alternatives today. If you want to take a closer look at frames, you will find them on the page http://de.wikipedia.org/wiki/Frame_(HTML), for example).
- _top - This is also used in connection with frames. You can use it to open the link target outside the frameset.
Here is an example of how to use the target attribute:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.com</a>
In this case, the link target http://www.psd-tutorials.de would be opened in a new window/tab. The same effect would also be achieved if you used a fantasy name such as halligalli instead of the reserved name _blank. However, if you are using target, I would actually recommend using one of the reserved names.
Determine the reference base
You can define a so-called reference base in the head area of the HTML file. Such a link base ensures that all link targets are displayed in a specific browser window. Of course, this is also primarily interesting in connection with frames.
However, the whole thing is also practical if, for example, you want to display all links in a new browser window using _blank. Imagine a list of links. If their link targets should always open a new window, it would look like this:
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>
You would therefore have to assign a target attribute to each a definition.
As you can see, this is not particularly efficient. Incidentally, it will be even less efficient if you decide in a few months' time not to open the link targets in a new window after all. Then you would have to adjust the target attributes of all links. This can be prevented using the target window base. This is defined via the base element within head. The base element is assigned the target attribute with the desired value. Here is an example of how this could look:
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <base target="_blank"> </head> <body> <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a> </body> </html>
This saves you a lot of typing.
Define anchors
You have already seen how you can set hyperlinks to other files. However, you can also define so-called anchors within an HTML file. You can then set references to these anchors. This is practical for extensive pages, for example. You can define a table of contents at the beginning of the document so that visitors can jump to the relevant parts without having to scroll through the browser window.
Anchors are created via the a element. However, anchor definitions are not assigned a href attribute, but a name attribute.
<a name="page start">Content</a> <a name="chapter1">Content chapter 1</a> <p>A lot of text follows here.</p> <a name="chapter2">Content chapter 2</a> <p>A lot of text follows here.</p>
You can freely assign the anchor names. However, I recommend that you keep them as short as possible, use only lowercase letters and avoid special characters.
To refer to an anchor, define a normal hyperlink, as shown at the beginning of this tutorial.
<a href="#start of page">To the top of the page</a>
The anchor name is assigned to the href attribute as the value. However, it is important that the anchor name is preceded by a hash sign.
You can also set references to anchors across files. In the following example, I assume that there is a news .htm file in the same directory as the actual HTML file. Within news.htm, the anchor page start has been defined. To refer to this, a hash sign is noted after the name of the target file(news.htm). This is followed by the anchor name.
<a href="news.htm#start of page">To the top of the page</a>
This is how easy it is to set references to anchors in any file.
