To previous Build a website: 2    To end of this webpage    To next Build a website: 4

Home English Contents Miscellaneous

Home > English > Miscellaneous > Build a Website > Build a website 3 - Build more links

 

Build a website 3 - Build more links

 

The first lesson
Build a webpage
shows how to build a simple webpage.

The second lesson
Build links
shows how to have several webpages and how to link them together.

Now this third lesson has a look at links in more detail.

When you click a link you leave that webpage and go to the webpage that this link indicates. And that means you have left that original webpage and when you now read the new webpage and there click further links then you would have to press the back button several times to get back to the original webpage. Now if the builder of a webpage does not want this to happen, does not want that the guest has to do all these steps, but wants the original webpage to remain open, he can formulate the link in such a way, that the original webpage is not replaced by the new one.

If for instance I create a list of external links, which I want to provide for the readers of my website and which lead to webpages I like and recommend, but I also do not really want that these readers really leave my webpage, then I would create this special form of link, or if I have a webpage and on this webpage I refer to previous webpages that also dealt with this specific subject so that the reader can have a look at them if he wants but I do not really want him to leave the present webpage, or do not want that this webpage is no longer represented on the browser, then I would add this command to the link command.

This command is

target="_blank"

and is added after the link address. There should be a space between the link address and this command.

So if you for instance would like to provide such a link on your website which leads to my webpage "Build more links" then the link would look like this in the code:

<a href="http://duddeglobal.com/en02/en0204/en0204003.htm" target="_blank">Build more links</a>

You can see examples of this by going to
Links,
a webpage that contains a list of links.

When this webpage is open you can go to the source code of this webpage by, in Internet Explorer, clicking Page and then View Source.

Now let us have a look at another kind of link and that is a link that not only goes to a certain webpage but also goes immediately to a specific location on that webpage.

On this website the example would be the webpage where all the Bertha Dudde messages are listed which are available on this website.

If you are on that webpage
Bertha Dudde Messages
and click the number of a message then not only the webpage with the book in which this message is contained opens but the browser goes immediately to that specific message.

Let us say you want to go to message B.D. NR. 4860, which is part of Book 55, then you click 4860 and then not only book 55 opens but it opens exactly at that place where message 4860 starts.

This command is

#codeword

and is added after the end of the link address and becomes part of the link address and should therefore not be separated from the link address by a space.

The example link looks like this:
<a href="en55.htm#4860">4860</a>

So the code word here is 4860 and therefore #4860 is added to the name of the webpage en55.htm. Notice that this addition is placed after the end of the name of the webpage and before the quotation mark.

In order that this link works an appropriate mark or name has to be added to the target webpage:

<a name="codeword">...</a>

Go to the webpage en55.htm
Book 55
and reveal the codes and there go to chapter 4860 and you will see the following:

<a name="4860"><b>4860</b></a>

The expression "4860" contains this code word or mark or name; the expression <b>4860</b> is that what is actually shown by the browser and can be anything and does not have to be the code word. In this case the code word was chosen and it was also decided to make it bold so that it works as something like a heading. The <b> and </b> enclose 4860 and make it appear bold on the browser and would look like this: 4860.

If the 4860 would be enclosed by <i> and </i> then 4860 would appear in italics and would look like this on the browser: 4860. And the code would look like this: <i>4860</i>

The code word could also be enclosed by both and would then look like this <b><i>4860</i></b> and the browser would display 4860 - bold and italic.

So making 4860 bold is actually unnecessary as can be seen just below – the next example.

So the link command is the same as a basic link except the link is to a code word rather than to an URL.

So let us repeat the link command from the example:
<a href="en55.htm#4860">4860</a>

Notice that there is a # sign, the hash key, in front of the code word.

There should not be any spaces in the code word and in front of it and in front of the # sign.

The code word can be just about anything.

The text in the link the browser is to display can also be just about anything. It does not have to be the code word. It can also be nothing.

The point where the page jumps follows the same general format, except the word href is replaced with the word name.

Also notice that there is no # sign in the name command.

Where the page jump target <a name=" - - - "> is placed is the section of the webpage that appears at the top of the browser window after the page jump occurs. This might not happen when the jump target is close to the end of a page and the window is big.

You can use the same code word (as a jump target) on other webpages, but not several times on the same webpage.

When you go from one webpage to the jump target of another webpage then you can sometimes actually notice that the browser first goes to the top of that page and then to the target.

Contrary to a link the observer cannot see anything there where the jump target is. Even if one would click such a jump target – which will not happen, because one does see it – nothing would happen. The only function of such a jump target is that one can jump to it from a link. So in the document itself no symbol appears which designates the jump target as such.

The giving of the code word must exactly agree with the jump target and the jump source. Therefore pay attention to capitalization and the use of small letters.

To make it easier for the user to navigate you should if possible also offer a link close to the jump target with which he can return to the original starting point or for instance to the top of that page.

A link to a specific part of a webpage is often placed at the top of a page so that the reader, after he has opened the page, can immediately go to that place, but in addition such links have the purpose of a list of contents.

And that is what has been done on webpage en55.htm.

Go to the source code of webpage en55.htm
Book 55
and you find there:

<a href="#4860">4860</a>

It is at the top of that page, together with all the other message numbers. On the browser they all serve as jump possibilities and also as list of contents. They all are shown as links, underlined and the colour differs from the colour of the normal text.

Now this link is simpler than the previous link referring to the same place on that webpage and that is because it is a link on the same page where that chapter or the target of the link is located. And in such a situation one can leave out the address of the webpage. That saves work for the creator of that webpage, but it also saves space and bytes and it saves loading time because the browser does not have to go first to the beginning of that page.

So with other words we could have made the link more complicated, like this:

<a href="en55.htm#4860">4860</a>

And not only that, we could also make it even longer and provide the entire path, like this:

<a href="http://duddeglobal.com/en/en55.htm#4860">4860</a>

And that would just create the disadvantages already mentioned, but it is way one could do it.

So here we have included the entire path. So the browser would probably have to do a lot more work.

Now when the name command is faulty or is not there at all because we forgot to place it or we click the link on the source webpage before we have placed the name command on the target webpage, then the clicking of the link just causes the browser to go to that target webpage and because it cannot go to the specific location intended, it just goes to the top of that webpage.

Now let us leave these jumps to a specific location on a webpage and turn to a normal link and the simplest is a link from one webpage to another webpage that is in the same directory, in the same folder.

So we connect two webpages which are in the same folder.

As an example we take this lesson and the previous lesson. This lesson has the file name en0204003.htm and the previous one the file name en0204002.htm.

Go to the end of the previous lesson and there you will see, in view source, the following:

Go to the next webpage of Build a Website:
<a href="en0204003.htm">Build more links</a>

So this is how a link looks like to a webpage which is in the same folder.

So when the file name, en0204003.htm, is given without a folder name, then the browser looks automatically in that folder in which also the source file, en0204002.htm, is located.

Now let’s assume we want to go to a file that is not in the same folder, but in a folder that is one level above the folder in which the source file is located.

In such a situation we would use

../

and that are two dots and one slash.

And this ../ precedes the file name.

The example is to go from this webpage, en0204003.htm, to that webpage that is the list of contents of Miscellaneous, en02.htm.

Now en02.htm is in the folder en02 and the folder en02 is the folder on the next higher level than the folder in which en0204003.htm is.

The link would then look like this:

<a href="../en02.htm">Miscellaneous – Contents</a>

And on the browser it would like this:

Miscellaneous – Contents

Go with the cursor to the area of this link and you will see the path displayed at the bottom of the screen. This is a good way to check a link, because when you click a link and it does not work then you know that there is something wrong with the link but you do not know what is wrong. But when you look at the displayed path at the bottom of the screen you can easily see when there is something that does not make sense.

Read what is displayed at the bottom of the browser before you click this link. At the end of the path you see the file name - en02.htm - and that is the same what the link has at the end, but before that the folder that holds that webpage is shown at the bottom of the browser and this is not the same what is shown in the link. The link has there just the symbol ../. It is a relative link in which this symbol is used. So this symbol ../ is therefore not replacing the folder en02 but just tells the browser to go up one level. So the symbol ../ tells the browser to go one step up in the folder hierarchy in its search for the target webpage and the browser replaces the rest of the path.

Now click the link and see what happens.

So we have gone to a file that is in a folder that is one level above the folder from which we started.

Now let us go to a file that is in a folder that is two levels higher.

And that is our file index.htm.

Here the link would look like this:

<a href="../../index.htm">Home</a>

So the symbol ../ is used twice here and tells the browser to go up two levels.

The browser shows the following:
Home

Now let us go to a file that is in a folder that is only one level higher than the folder that contains the source file, but not in that folder that leads to the file we are jumping from but is in an another folder on that level. Then the link would look like this:

<a href="../../en/enc.htm">Contents</a>

So the folder en is a folder that is on the same level as the folder en02, which contains folder en0204, which holds the source webpage of the link.

Here we also have to have two ../ signs because the browser has to go up two levels, to find the folder both, the source and the target folder, have in common, and to go down from there to the folder that contains the target file. And we have to place the name of the folder which holds the target file, en, in front of the name of the target file.

The browser shows:

Contents

Now we will go to a target webpage that is in a folder that is on the same level as the folder of the webpage we are jumping from, but is just in another folder on that level. Here we first have to go back to the folder above which contains both these folders and from there to the folder of the target webpage. This link would look like this:

<a href="../en0201/en0201001.htm">Links</a>

So the folder en0201, which holds webpage en0201001.htm, the target webpage, is on the same level as folder en0204, which holds webpage en0204003.htm, the webpage where the link is, this webpage "Build more links". So the browser has to go up one level and then go down to the folder holding the target file.

Here what the browser shows:

Links

Now to demonstrate that a relative link can contain higher folders than are actually necessary we want to do this here and go, instead of one level higher, two levels higher. Then the link would look like this:

<a href="../../en02/en0201/en0201001.htm">Links</a>

The folder en02 holds the folder en0201 and also the folder en0204.

Because we have gone two levels higher, we now have to add to the path the folder that is below that level, otherwise there would be one step missing in the path down.

This was not necessary in the first alternative because there we did not leave this folder we now had to add, the folder en02.

So here are the two alternatives:

        <a href="../en0201/en0201001.htm">Links</a>

<a href="../../en02/en0201/en0201001.htm">Links</a>

Already a first check, the cursor check, will show that the same paths are displayed despite the fact that the codes are different.

So here are the two links as seen in the browser and you can do the cursor check:
Links
Links

So when we use a relative link to go from a webpage of a website to another webpage on the same website then we go up to the highest folder these two webpages have in common. And from there we guide the browser down to the target webpage. We can however also go to an even higher folder but then we have to include in the path the folder that we have overleaped.

And when the target webpage is in the same folder in which the source page is in, then we just give the file name of that webpage.

Servers search a webpages’ home directory by default. It means you only have to use the webpage’s name and not the full URL. If you only call for a webpage through its name, and not the entire URL, the server looks for the webpage inside the same home that houses the webpage that called for it. So when I am staying within the folder I need only call for the webpage name. The folder is a closed home for all webpages in it.

If I would use the full URL the browser would have to go through all these steps and directories and folders and that takes time. Such an internal link might run slower. If you use the full address, a full search process begins when your user clicks a link. First the server is located, next the directory is located, and then the page is located. If you use only the name, the search is already at its destination. The server simply searches itself.

Now when the target webpage is in a folder on a lower level than the folder in which the source webpage is in, then we first have to provide the name of that folder followed by a slash.

Let us have an example:

The source webpage is en02.htm in the folder en02 and the target webpage is en0204.htm in the folder en0204, and the folder en0204 is also in folder en02. Here the link is like this:

<a href="en0204/en0204.htm">4. Build a website: Contents</a>

Go to webpage en02.htm and there see that link and check it:
Contents

We have to be able to tell the difference between absolute links and relative links. Both are possible and have advantages and disadvantages. Using an absolute link the entire path up to the desired file is given and using a relative link no path is given when the target file is in the same folder where the source file is; if it is in another folder then only that part of the path which deviates from the path of the source file.

What now would be wrong would be to give the path which the file has got on the computer on which the file was created or on which it is saved. Therefore with links to webpages one should never use an absolute path like the following one:

C:\My Files\Home\Contacts.htm

The path to your directory on your computer differs from the path to your directory on the server. Exactly as it is up to you to determine – and possibly to change - the directory for your website, so it is up to the company that hosts your website to determine the directory for your website – and to possibly change it.

Exactly as you can rearrange the location of your website on your computer, therefore to transfer it to another directory or to transfer or copy it to another computer, or to a portable medium, so the hosting company can do it.

And there is another thing: In contrast to the Windows file system no backslash (\) is used. Instead a normal slash is to be used.

The webpages, as they are organized on your computer, are therefore uploaded to the server of the hosting company in the same form of organization. The higher directories on your computer remain unconsidered in the process and the same applies to the higher directories on the server.

This also means that all webpages on your computer are independent of the web address. You therefore can create all of them before you decide what web address to use. And this also means that you can change the web address. And when you change the web address you also do not need to change the links and that is why links should be relative links. It is however advisable to know the web address of a website when creating the webpages because one might mention the web address there and would then have to change it if the web address changes.

When you now use external links, therefore references to webpages of other websites, then you need the web address of this website though. In this case you of course cannot use relative links but have to give the complete path.

The link on your webpage to this my webpage would look like this:

<a href="http://www.duddeglobal.com/en02/en0204/en0204003.htm">Build more links</a>

The browser would show this:

Build more links

If you would click this link the browser would load this webpage - when you are on-line. If you are off-line an error message would appear.

If you would do the first link check, move the cursor over the link without clicking it, then you would see only that part of the link code that is between the quotation marks - the URL.

What is between the quotation marks ("") is the web address the browser is to jump to and that is, with an external link, the entire path and also with an internal link it can be the entire path but should be only a relative path.

The text of the link is between the > sign, the greater than sign, and the < sign, the less than sign, the angle brackets, and that you can choose as you like.

So this text of the link could also be the entire path of the link or also the relative path.

Especially in a list of links it is helpful to have the entire URL given as text of the link, instead of some description, because it immediately gives the reader what he might want and saves him some work.

To simply repeat the whole path in the text of the link actually gives the reader better and more exact and more honest information than just a description of the webpage. Crooks for instance may give you a link that gives the name of your bank in the text part, but in that part that gives the real path they have the path to the webpage of the crook and the information that you think goes to the bank reaches the wrong people.

The real webpage address can be seen by the surfer when he places the cursor over the area of the link, then the real address appears at the bottom of the screen. He also could see it when he has a look at the code of the webpage.

The above mentioned example to my webpage could look like this:

<a href="http://www.duddeglobal.com/en02/en0204/en0204003.htm">http://www.duddeglobal.com/en02/en0204/en0204003.htm</a>

And in the browser it would like this:

http://www.duddeglobal.com/en02/en0204/en0204003.htm

So the text of a link is shown underlined in the browser. This therefore immediately shows the surfer that it is a link, and in addition this text also has a colour that differs from the normal colour of text and this colour may change after the link has been clicked. The browser does this automatically, exactly the same way as it automatically creates the scroll bars when the content of the webpage is bigger than the opened window.

It is recommended not to use underlined text, therefore not to use the command <u></u> - it might confuse the surfer because he might think such underlined text is a link.

The first and the last letter in the link, the "a", means anchor, and shows the start and the end of the link, at the start without the slash and at the end with a slash before it, and both are enclosed with angle brackets, only at the start an extension is placed before the angle bracket is closed, the extension being the address of the anchor.

Now this arrangement with angle brackets is the normal command structure of HTML. Most commands are like this. There are some different commands, like <br>, which do not have an end command.

The most often used is probably the command to create a paragraph of text. A paragraph starts with <p> and ends with </p>. So when a link is enclosed in the paragraph commands then it forms a paragraph of its own.

The a stands for Anchor. It begins and ends the attachment to another webpage.

The href in a link stands for hypertext reference. That is a way to say, "This is where the link is going to go.”

Then follows an equal sign and then the address enclosed in quotation marks. And all that is enclosed in angle brackets.

What then follows is up to the person creating the link and that is what will appear on the webpage for the viewer to click. Here some text should be written that describes the link. Or, as already mentioned, the URL of the webpage can be given.

And then follows </a> and it ends the link.

Now when typing a link it might be useful to have Notepad on the left side of the screen and the browser on the right hand side. When the link is typed in Notepad one can then press Ctrl+S to save it and then activate the browser by clicking into it and then press F5 to refresh it and then do the cursor check and then the real check by clicking the link. Then one gets back to Notepad by clicking it and there carries on either continuing or correcting the link. If I by mistake press F5 in Notepad I get time and date there.

The source code can also be seen when you right click into the browser window and then click something like View Source or just Source. I have stopped using this to edit webpages because with new editions of browsers this system seems to change.

One advantage of using relative links is that you can check such links by clicking them, successfully, when you are off-line.

There is a website that checks links:
http://validator.w3.org/checklink

And there is a website that checks HTML:
http://validator.w3.org

Now a link can be quite long and it could be longer, and often is quite longer, than a line and is therefore written on two lines or even more lines. So HTML code can go on two or more lines, but the address should run together. So if there is a line break in there, the browser may add a space. That puts a space in the address and that creates a web address of a webpage that does not exist. So there is a difference in line breaks. One is created by the text program Notepad and one is created by the writer having entered a line break by pressing Return (Enter), which creates a space in HTML. So when you type an address do not use Enter. Let Notepad do the line break. And when you use an address in a link that does not work find out if such a forced line break exists and take it out.

So in this lesson we provided some additional information to the building of links but also included some basic HTML, especially for normal text. Normal text should be text that is aligned to the left and that means the text should not be centred nor should it be aligned to the right nor should it be justified. To align text to the left you do not have to do anything, it happens automatically. To align text centred or to the right or be justified you have to make the appropriate arrangements. So to just have the text aligned to the left saves again work. The text should be free to suit the size of the screen so that it can also easily be read on small screens. This becomes more and more important with the use of small hand held devices. Creators of webpages with complicated layouts now have to offer alternative webpages for these kinds of users. If a webpage is simply right from the start then it can be read on every kind of screen. So have a plain and simple layout but have a text that is inspired and brings light and enlightenment to the reader. Do not try to stimulate the physical senses but stimulate the spirit within man. Satisfying the natural senses of a man does not help him; it just drags him down more. Satisfy the needs of his soul.

 

Home English Contents Miscellaneous

To previous Build a website: 2    To beginning of this webpage    To next Build a website: 4