Copyright Michael Karbo, Denmark, Europe.

  • Next chapter.
  • Previous chapter.

    Chapter 17. Checking the links

    Now you have placed three links in top of the HTML document animals.htm. Now let us see how they work.

    1.   Open the page in the browser. You can see from the cursor that the three texts are links. The cursor changes to a hand as you move it across one of the three underlined texts.

    2.   Notice also the bullet list. Try to point to the bottom link:

    3.   Then look in the bottom of the browser window, where the status bar shows which link you are pointing at. Here you can see the file name animals.htm that concludes with the text #leopard, which is the bookmark:

    4.   So you can read the link in the browser. Now try to click on it.

    5.   Now the browser ”thumbs” down the page and finds that line where the particular bookmark is:


    6.   Notice also the address as it appears in the browser window address field. That is the same, including the bookmark:

    7.   Click on the browser button Back to return to the top of the page again:


    8.   Try also the two other links.

    Complete the page

    Now you have a home page that contains pictures of the three animals. We need to expand that to cover five animals.

    When you expand a home page with a new text section, it is often the fastest to copy a text block that includes a similar section. Then it is not a big problem to edit the copy. Let us try that:

    1.   For every animal section we need among other things ahorizontal line and an IMG code. Select the bottom block in the document, that with the leopard. Start the selection at  the bookmark code and select these lines:

    2.   Make a copy with Control+c. Move the cursor to the bottom of the page, before the end code </BODY>.

    3.   Press Enter, and insert the copy with Control+v.

    4.   Press Enter Enter and insert the copy again with Control+v

    5.   That repeats the last text block, so you see it a total of three times. The last two paragraphs are the copies.

    6.   The last two paragraphs need to be edited. In the first we need to correct the following selected text:

    7.   The bookmark needs to be changed to hippo. The heading will be changed to A hippo. The file name will be changed to hippo.jpg, and the ALT code changed to A noble animal.

    8.   In the second paragraph you similarly chance the bookmark to austrich. Change the heading to to An austrich. Change the file name to austrich.jpg, and change the ALT code to This bird does not hide.

    9.   On top of the page add two bullets for the list of contents. Copy the bottom line twice and correct the link and text so they match the last two paragraphs on the page. Change this:

    10. Save the document, and test it in the browser. Now everything should work:

    Figure 42. The animal page is now complete.

    A tip about the austrich

    Try to click on the link An austrich. Does the picture show in the very top of the browser window? If that is not the case it is because the page ”too short” so to speak relative to the height of the screen image; but you only see that in the largest screen resolutions. You can correct that easily like this:

    1.   Enter a number of BR codes under the IMG code like here:


    2.   Save the document, and test it in the browser. Now the page has a suitable length, so a click on the ostrich link leads you to the correct place. The picture appears in top of the window, since the is ”space” under it.

    A summary page

    Now you have made some pages that dear with animals: animals.htm, fishisgood.htm and zebra.htm. Why do we not combine them in a common summary (we could almost call it a site)? We will do that:

    1.   We start as usual  by creating the page. Open the template2.htm document

    2.   Save the document in the animals folder under the name index_animals.htm:

    3.   Enter both the page title and heading as:
    All my animals …

    4.   Save the document again. Now we might as well reuse the summary you see in Figure 42. Look at the right side of NoteTab. Do you see the file list? If not press F6, and it will appear. You see that NoteTab currently has more than one file open:

    5.   You can switch between the different open documents by pressing Control+Tab. Try that – and more than once.

    6.   Now you need to activate the document animals.htm. Select those lines that contain the index:

    7.   Make a copy with Control+c.

    8.   Now shift (Control+Tab) to the other document, index_animals.htm, and insert the copy the same place (after the heading H1). Save the document, and test it in the browser. The five links do not work, right?

    Nothing happens when you click on a link in the new document. Of course that is because the five pictures are not in the document; they are in a different document.

    Adjusting the links

    In the original animal page (animals.htm) you worked with what we call internal links. Those are links from one position to another – in the same document. External links lead from one document to another, and that is what we need now.

    1.   Place the cursor just before #horse in the first line of the bullet list.

    2.   Add the text: animals.htm, as shown here:


    3.   Now the link leads to a bookmark in the animals.htm document; can you see that?

    4.   Your cursor is right after the file name animals.htm (at least it should be). Now you can quickly and easily copy this text into the next four lines: Hold both Control- and Shift-keys down and press three times ArrowLeft. That selects the file name.

    5.   Make a copy with Control+c. Press ArrowDown to get to the next line. Place the cursor in the right position, if it is not there already. Press Control+v to insert the copy. Press ArrowDown again and insert the copy once more in the right place. Repeat in the next three lines.

    Add two more links

    Now you are going to add links to the two other HTML documents fishisgood.htm and zebra.htm.

    1.   Start by copying one of the five lines from the bullet list, and insert the copy twice, so the list will have a total of seven bullets.

    2.   Adjust the link in bullet number six, so it refers to zebra.htm:


    3.   Notice that there is no other bookmark in the link. The link goes directly to the page – not to a particular bookmark, for there is no such.

    4.   Save the page and test the last link in the browser. That does not work! That is because the zebra.htm page is not in the same folder as animals.htm.

    5.   You must add the path ../site1/ in the reference as shown here:

    That specifies that zebra.htm shall be retrieved from a folder called site1, and that the folder is found by moving one step up (../) in the folder hierarchy.

    6.   Adjust the last link by yourself, so it refers to fishisgood.htm, which is also in the site1 folder.

    7.   Save the document.

    In alphabetical order

    Finally you have to edit the texts in the summary, so they appear as in Figure 43.

    You also need to change the sequence so it becomes alphabetical. You can do that in this way

    1.   You work with one line at a time.

    2.   Select (the whole) line, which starts with
    LI  code. Remove it from this place with the shortcut Control+x.

    3.   Insert the page in the right position with the shortcut Control+v.

    4.   When you are done, the summary should be 100% like in Figure 43. Then save the document, and check that all links still work correctly!

    5.   Close all open documents.

    You saw in the last exercise, that a document like index_animals.htm can consist exclusively of the text links. Here there are seven links altogether; five of which goes to one specific HTML document that uses bookmarks for navigation. The two other links go to two other HTML documents.

    Figure 43. The seven animal names are arranged in alphabetical order, and the document is now a tool for navigation relative to three other home pages.

    Keyboard technique

    I have covered this before and I will now reinforce that: It is very important that you know and use the keyboard options when you need to select text. This whole book deals with home pages produced in a text-based environment. And when we work with pure text, the mouse is a very slow tool to use. For most the keyboard will be much faster.

    An especially important operation is to select text. We do that all the time; copy lines, code fragments, file names, whole sections etc. The copies are inserted and adjusted. And it can be done very fast with the keyboard. Be especially aware of the Shift and Control keys that are used together with the six navigation keys which are the four arrow keys ArrowLeft, ArrowRight, ArrowUp and ArrowDown together with Home and End.

    When you hold the Shift key down and simultaneously use the navigation keys, you select text. The Control key can ”amplify” the use of the navigation keys so they select larger blocks per key stroke. See the examples in the table below:




    Moves the cursor one word to the left/


    Selects the word to the left/right of  the cursors position.


    Selects from the cursors position to th end of the line.

    Shift+ArrowUp, ArrowUp, ArrowUp

    Selects three lines above.

    Figure 44. Examples of the very important keyboard operations.

    I will very much recommend that you concentrate 100% on perfecting the use of just those 8 keys that I just described. There is nothing new in that; they work in the described ways in all Windows programs. But when we work a lot with text like here, they are indispensable!

  • Next chapter.
  • Previous chapter.

  • HTML Tutorial Overview.

  • Get the files for this tutorial (opens in a new window)