To previous Build a website: 1    To end of this webpage    To next Build a website: 3

Home English Contents Miscellaneous

Home > English > Miscellaneous > Build a Website > Build a website 2 - Build links


Build a website 2 - Build links


The previous webpage
Build a webpage
gave some ideas for a first webpage and this second webpage is now to help with generating links and having several webpages and linking them together.

I first want to repeat something from the previous webpage and that is that if we want to open an existing webpage that exists on a computer we simply go to Windows Explorer and double click that file. But when we want to change the content of that file then we first open Notepad and in Notepad we open that file. The file that is then open in Notepad shows or reveals the source code of that webpage and we can change it and do improvements there and then save these and consequently have a revised webpage.

But this is also the best way to create a new webpage. We simply open an existing webpage in Notepad and make a new webpage out of it.

We open an existing webpage in Notepad and make a new webpage out of it and then save this file under a new file name.

Out of experience I would even suggest to have a different sequence and that is to open an existing file and then give it immediately a new file name and also immediately save the file under the new file name and only then do the changes. This way we avoid accidentally making changes and saving them without having given the file a new name and therefore having lost the content or part of the content of the old file.

When we do it this way, creating new webpages out of existing ones, we save creating all the basics of a webpage again. We simply use the existing webpage as something like a template that we revise.

In this second lesson we want to create two further webpages in addition to the one we created in the previous lesson and therefore will then have a website that has three webpages.

And in order to then have a website that makes sense we want to link the three webpages together so that every of the three webpages has links that link it to the other two. And in addition we will also create a link that will link to an external website.

These links we are going to create simply allow the visitor to go to other webpages, to webpages on this website or to webpages on another website, by clicking these links.

What we will do is that we will modify the existing webpage and furnish it with three links, one link to every one of the three webpages of the website, that means also a link to the present page. A link which links a webpage to itself simple causes the browser to go to the beginning of that webpage, but this way we simple do the row of links only one time and then simple have this row of links already on the other webpages and don't have to do any changes to this row of links there. So a link on the first page to the first page might not be too useful there, but it saves us work and we don't have to remember doing any changes on the following pages.

Now the purpose of this second webpage we want to build is to give more information about the owner of the webpage. So this will be the email address and could be additional information like postal and residential or office address and a telephone number.

For this purpose we will remove the email address from the first page and make the first page a pure opening page which basically just contains links to the other pages.

In the last lesson we already changed the email address to such a portrayal that prevents automated email address harvesters to use the email address for spamming. So one can give so much information about oneself on a website as one wishes. It could be a minimum like we showed in the first lesson or it could be so many details as the owner of the website wants to provide.

The third webpage will then contain a collection of links. And this collection of links can then gradually get extended. The first link provided might even be the web address, URL, of the own website and the second link might be a link to my website,

Now for the link to the website we are busy creating the creator needs a web address. Let us assume the creator of the website wants, after the website is created and running, have a fourth webpage which contains a message by Bertha Dudde and let us further more assume that he wants this message to appear in a language that he masters and that will be Russian as an example.

So he could choose to have the following URL, the following web address:

This is then also the web address that would appear first on the list of URLs on page three and after that the web address of my website would appear:

Should the web address already be used by someone else then he could use

When one wants to register a website with a registrar then usually this is the first step required: finding out if a desired web address is still available. So one goes to the website of a registrar and there enters this desired web address and the site will then give the information whether the address is available or not.

A hosting company also mostly offers the function of a registrar and consequently one can deal with the registering of a web address at the same time when the registration for hosting is done.

The disadvantage of this web address is that the character before the 2 (two) looks like a 1 (one) and this could lead to confusion. This is a common problem which also exists with email addresses and passwords and that is the reason why some people recommend not using characters that could cause such confusion when letters and numerals are used together. Such characters are the numeral 1 (one) and the numeral 0 (zero) and then the letter l (like in like) and the letter O (like in Oscar).

So when you have a problem getting a link to work remember this aspect.

So let us start.

The main work we do will be on the first page. Page two and three will then be easy, because we will then just use page one as a template and only do some changes.

We will give the name Home to the first page and the file name index.htm so that the file name is such that most hosting companies might accept it as the opening page.

The second page we will give the name Contact and the file name contact.htm and the third page will get the name Links and the file name links.htm.

So lets us open Notepad and then the file we have created in lesson one and that is MySite03.htm.

So the first thing we do is to save this file under its new name.

So go, in Notepad, to File and then to Save As...

In the Save As... window we change the file name from MySite03.htm to index.htm and click Save.

The first thing we now change is the title of this webpage. It appears in the second line between <title> and </title> and there we replace the old title with the new one: Home. This title is enclosed in the title tags, the first being <title> and the second </title>. This is a basic principle in HTML. The title together with the two title tags appear in the section that is enclosed by the two head tags: <head> and </head> and the head section is again enclosed in <html> and </html> tags which enclose everything, also the second section, the body section, which is enclosed by the two tags <body> and </body> and which contains the main body of a webpage.

The title of the webpage does not seem to appear on the actual webpage but there we have to look at the very top of the browser, there we can see it.

Then we replace the sixth line with Home, it will be the first line of the actual webpage and is now the title of this webpage and the heading and so that it also looks like a heading we enclose it with heading tags and give it the heading size 4. Heading sizes range from 1 to 6, 1 being the biggest. Now line 6 looks like this: <h4> Home</h4>

We also remove <br><br> because having changed the line into a heading; the heading creates its own distances.

Then we delete the second row, the email address. Now this is the second row on the actual webpage. On our file, which shows the source code, it is the seventh line.

And now we type the first link, the link to the webpage's own address:

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

And on the next line the link to the second page:

<a href="contact.htm">Contact</a>

And then, on the next line, the link to the third page:

<a href="links.htm">Links</a>

Now we type the actual heading of this webpage: <h3>Home</h3>. It is bigger than the other heading above it and it creates again its own distances and that means in this case the distance to the row of links above.

And now we have completed all changes and we can save the changes.

We go to File and there click Save.

A shortcut would be Ctrl+S.

Now to type every link on a new line creates a space between the links.

On the actual webpage these three links will appear in one row, just with one space between them. HTML, the "language" we are using here, only recognizes one space, even when we use several spaces. The browser ignores several spaces and a carriage return is shown as a space.

When we want to start a new row we use <br> as we did between the first and the second row or two times <br> to get some more space between them. A better way to create this larger distance between two rows would be the use of the paragraph tags and with them we create a, new, paragraph. They are <p> and </p>. They have the disadvantage that there is always an empty line between two paragraphs. If we don't want that, we can use <br>, but this again has the disadvantage that the beginning of a new passage is less visible and therefore one could use an indentation. There does not seem to be a tag for an indentation in HTML and therefore one can use several empty spaces. For an empty space the HTML tag &nbsp; can be used. It is a "non breaking space" and several of them could create an indentation. For example &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

The main use of this non-breaking-space is when one does not want that an expression is separated at the end of a line, an expression like 1 000 for example. Then one would write 1&nbsp;000.

Now go to Windows Explorer and there to the folder MySite and double click index.htm and your browser will open and display this webpage.

If you go with the curser over one of the three links, the link address will be shown at the bottom of the screen. This is a first check to see if the link is okay. A further check will then, later, be, after the other two pages exist, to click every link to see whether the browser then displays the relevant webpage.

Now sometimes, especially at the beginning, mistakes are made in creating a link and the link does not work.

I will give you an example from my experience. I created a webpage with a word processing program. I used a computer with an English keyboard. I used a word processing program because I wrote in German and there I had keyboard shortcuts for the special German letters, the Umlaute and . I then copied the writing and pasted it on Notepad and the links did not work. After some work I found the reason. The quotation marks from the word processing program did not work; I had to replace them with the quotation marks of Notepad.

So sometimes one has to try alternatives to get a link to work.

Sometimes a link does not work because there is somewhere a space between two characters where there should not be a space and it is not immediately visible to the eye, so you have to go with the cursor through it to find it.

Now, after having saved the first webpage, we create the second and this we simply do by saving this file again but under a new file name - contact.htm -, do this and then change the title and the heading from Home to Contact and then change the line <h3>Home</h3> to <h3>Contact</h3> and after that create a new line by typing <p>, which is the beginning of a paragraph.

Now in this paragraph you can type all your contact details, the first might be your email address, which could be and then other contact details you want to have on your webpage.

To end these contact details add a line reading </p> it indicates the end of this paragraph and this line would then be followed by two last lines being </body> and </head>.

Each contact detail you end with a <br> in order to begin a new line on the webpage, so you add all the contact details you might want to give to the surfer and separate each one by using <br>.

So you could give your postal address, your residential or home address, your telephone number, your fax number, your office hours, like you would do on a letterhead. In Germany people might provide their banking details because there most money transactions which are not cash transactions are done via bank transfer. But do not forget that the information on a letterhead normally goes to people you write to and know, but a website goes potentially to the whole world and there are people who might misuse this information because they are crooks or might be people who might persecute you. Don't forget that Bertha Dudde's messages forecast the times of the end and then there will be the time of tribulation. Live like Jesus did; he often did not tell people where he and his disciples would go next, sometimes he would not even tell his disciples where they were heading. Be ye therefore wise as serpents, and harmless as doves.

And now we do the third webpage, the last one.

After you have finished the contact details on the second webpage press Ctrl+S and then start the third page by saving the file under a new name, links.htm.

Change the title and the heading from Contact to Links and change the main heading from Contact to Links.

And then delete the contact details and replace them with two links. The first one will be your own URL, and that would be
<p><a href=">"</a></p>
and the second
<p><a href=">"</a></p>

Then press Ctrl+S and the website is completed.

On this third webpage the link to your own website appears twice. The first one is the first link in the second row, the row of three links, and the second is the first link in the list of links. The first one is called a relative link or an in-site link or an internal link because it is a link that refers to another webpage of same website. With such a link you do not have to give the full URL (Universal Resource Locator).

The second link could be called an external link or an off-site link and there the full URL is given, the reason being so that it corresponds with the rest of the external links that follow.

There is a third kind of link. It is a link within the same page where you can go to a special place on a page. Such a place can be accessed from the same page but also from other pages, so that you not only go to that page but immediately to that specific location of that page.

An example of this would be a webpage that contains several messages by Bertha Dudde and where you could go directly to one of these messages.

Now go to Windows Explorer and double click index.htm or go to the browser where this webpage is still open and renew the page and check the links by clicking them.

So I think all this is quite a simple way to create a website but now I want to show you an even simpler way and that is to just download all the webpages and use them for your website and only change few things because you have a different web address and a different email address. With this you would have a quite comprehensive website and just keep it like this or expand it, as you like. You now know HTML and can therefore read the source code and change it.

When you are checking links and you are not online then only the relative links will work. And that is one advantage of relative links, that you can check them without being online.

You could also create internal links, that are links referring to other pages of the same website, in such a way, that you give the full URL, but that has the disadvantage that you have to change them when the web address changes. If you just have relative links then you do not have to change these links when you get a new web address. Having to change them could be a lot of work when you have hundreds of webpages and each webpage has several links.

To come back to links that do not work. Sometimes a surfer might find a web address to one of your web pages and wants to go there but gets an error message. There can be many reasons for this. Two could be that the link he found was erroneous or that he made a mistake with the put-in of it. The error message just tells him that something went wrong and you might have lost a potential visitor to your website. In order to prevent this you could create your own error message and do it in such a way that you tell the surfer that he is on your website and give him links to your webpages so that he might remain on your website and still might find what he looks for. One way to do this is to just have the home page, the webpage with the file name index.htm do it or to create another webpage which is basically the same but just has another file name. Have a look at the error page of my website. You will see it when you go to one of my webpages and then change that web address so that it is wrong and click Enter. For example if you change this Webpage from en0204002.htm to en0204002a.htm at the end. But if you then take this additional "a" out again and place it after the double slash, "//", and before the first single slash, "/", then my own error page does not come up, but a normal one.

The company which is the hosting company of your website will most probably have information on their service pages how to set up your own error page or your custom 404 error page as it might be called.

Here still two hints.

When you are in Notepad and you want to open a webpage to work on the source code then you might not see any files in the Open window or only text files. That is because it only shows text files and you are looking for a webpage. So you have to click the box Text Documents (*.txt) and click All Files (*.*) and only then the webpage files will also be displayed.

When you can't get a link to work, check all the details like the quotation mark in front of the file address or the web address and also at the end of it. If you still can't get it to work close all windows, shut down the computer and start it again.


Home English Contents Miscellaneous

To previous Build a website: 1    To beginning of this webpage    To next Build a website: 3