English-to-any-
language
(verbs + vocabulary)

French Malay uc Romanian Bulgarian Dutch Arabic Polish Turkish

free dual-language
worksheets
(verbs + vocabulary)
Urdu Russian Hungarian Italian German Spanish Cantonese Mandarin
Schools Interchange - links to 400,000 schools worldwide, plus Government websites and education departments Infinite Facts Series - from Police Letters to Prime Ministers - also huge free Keywords for Learning resource with word search puzzles ranging from the human body, invertebrates and football to Pokémon, Shakespeare, Dickens + the Bible the Project HappyChild Directory of organizations helping children - 80+ charities helping kids in many different ways Accelerated Learning - by world silver medallist Michael Tipper - amazing brain, book reviews, great minds, memory training, mnemonics - huge resource, all pages free to print free maths worksheets - addition, subtraction, times tables, division, fractions, percentages; English worksheets for poetry writing, lateral thinking, mc lyrics, crosswords, spelling, writing practice; huge index to free educational resources on line worldwide Reading System - complete free-to-print system 'Bricks and Mortar' for teaching children the basics of reading in English fundraising + resources, free stuff, events calendar, website sponsors, plus free on-line serialization of 'How to run a Successful Car Wash Fundraiser' by Lance Winslow III Aesop's Fables - over 200 now on line here, including 'The Hare and the Tortoise', 'The Grasshopper and the Ants', 'The Slave and the Lion', 'The Serpent and the Eagle' and many other well-loved tales created over 2500 years ago Projects helping children in over 200 countries - huge colour-coded index to countries worldwide and links to the websites of charities working to help children overseas Andy's Guide to Pokémon - huge pokédexes for red, blue, yellow, gold, silver, crystal, ruby, sapphire, emerald, fire red, leaf green, diamond, pearl + platinum, plus lots of help and info sent in by visitors + over 200 Pokémon pictures French - 800+ free-to-print self-test French-English worksheets, verbs + vocabulary, eg food + drink [38 pages], trees, numbers, shops, colours, telling the time, animals, birds, insects, sports, driving, car parts, tools, home, family, etc. Sol's guide to The Magical World of Harry Potter - wands, characters, spells, creatures, locations, items, Hogwarts, Gryffindor, Ravenclaw, Slytherin, Hufflepuff, Diagon Alley, Gringotts, Ministry of Magic plus book reviews and film reviews Syndromes - links to organizations helping children with dyslexia, asthma, eczema and more serious conditions News
home 1 home 2 home 3 home 4 home 5 home 6 home 7 home 8 home 9 home 10 home 11 home 12 home 13 home 14 home 15 home 16

just click here

Build Your Own Website - even without previous Internet experience or training

Project HappyChild - linking children all across the world

Area 10 [archive] - BUILD YOUR OWN WEBSITE

PART SIX

Unlock your creativity .... building websites is a lot more fun than most people realise

Adding Tables and Hyperlinks to other areas of your Website

When I first started page-building, I spent ages learning how to design "buttons" to link one area of the site to another. Forget this! Too time consuming. When you create a button it creates an "image" which then gets saved into your Webimage folder with some arbitrary name like "image 0001" and you spend ages trying to (a) identify which is which, (b) get them to actually load up again on your page.

Using tables (like the one at the foot of this page) is vastly easier, for a number of reasons. Having said that, html tables are not that easy to work with initially. It took me THREE DAYS to create the first of the Directory pages you will find on our site - and 40 hours to build the first "Site Map" [which apparently no-one can read without Internet Explorer 4.0 and 16.7 million colours]. Such is life. There'll be a "shadow" version of the site-map (black on white or something similar) up in the not-too-distant future, and "shadow" versions of the Directory pages also, in due course [shadow pages were up on site Nov/Dec 1998]. Re-creating the original pages from scratch now would probably take infinitely less time than originally, but they are still far-from-straightforward pages to build.

However a lot got learned along the way, and I'm not about to suggest you try anything remotely as complex, at this stage. Whilst I still experience problems periodically in trying to achieve something creative with table structures, I would highly recommend them for general use, particularly for hyperlink options to various areas of your site - primarily because you can "edit - copy" a whole table of hyperlinks, and transfer it en bloc to another page on your site. You'll see this has been done in several areas of our site [usually there will be a similar type of table-of-hyperlinks at the bottom of (eg) all the pages within a particular sub-directory: this is achieved by designing one table and then simply copying it onto all the other pages in that sub-directory. This happens particularly in the most-recently-built areas of the Project HappyChild website.

So - you need to know how to make your first table. But what are you going to put in it? What are you going to "link to"? It's the usual "chicken and the egg" situation. To some degree, whenever you design an area of your website, you will need to "hold the design in your head" so you plan the links in advance, and can put them onto each page you build, until you've built all the pages in that area.

If you look at the table near the foot of this page, it has link options to all 12 parts of this guide. [The table below it links to the Index for this section, and to various other areas of the overall website.] To some degree this is simpler than usual (i.e. I wouldn't usually be referring to Parts 1 to 12) but it's the same principle. You need to identify, initially, where you are going to wish to link to. This is why the very first page taught you to set up a directory structure on your hard drive for all the areas of your website, so you had a chance to pre-plan what it might include.

I'll use the basic areas of this site as an example. Orginally these were planned out as follows:

Area 1: ifs (Infinite Facts Series)
Area 2: dir (Directory)
Area 3: acc (Accelerated Learning)
Area 4: wks (free Worksheets)
Area 5: bkm (Bricks and Mortar)
Area 6: nvs (News and Views)
Area 7: fr (Fundraising & Resources).

To make things complicated (on our site!) each of these areas also had a "home page" which explained the basic ideas behind each section of the site. These home pages lived in the "welcome" folder: you're unlikely to need this type of pages but it was the original basis on which our site was constructed, with the home pages like an "outer hub" around the index page, before the "spokes" leading out to the different areas (1-7) on the wheel. We've now added "Schools Interchange" at the centre of our website (own folder but no additional "home page"), much like "Build your own Website", constructed in a similar way.

Because your main welcome page can't be too long (because it then takes too long to load up when your visitors arrive) - you may wish to think about "home pages" for the different areas of your site, longer term. For now, you will probably find that an "index page" for each area is sufficient to briefly outline what will be within that section of your website.

Being that once you hyperlink your "welcome page" you are actually creating links to other areas of your site, you may wish to go away and build index pages for each area (so you've actually got something to link to). Otherwise, you will be creating the links on your welcome page but will be unable to upload the updated version of this UNTIL you've created and interlinked all those other pages you haven't yet built.

So, I leave it up to you what order you do this in. You will face this question every time you build an area - links first or pages first? - but, rest assured, it does get easier.

For now, I'll show you how to build up a table and set up your hyperlinks. You can copy your table of links onto each page as you build it, if you like. We'll start with your "welcome page" (the index.htm file you created initially) - first of all you need to re-open this page.

When you do, immediately after you agree to "convert from html", and your page opens, the first priority is to select [from the line at the top of your page]: Tools - Hyperlink. You'll get a screen come up about Hyperlink Properties - all you need to do at this stage is click on the tick at the bottom left of this screen, next to the option which says "Activate Hyperlinks". Clicking on the tick will remove it (so you have a small, empty box): the reason for doing this is that leaving your hyperlinks activated is the swiftest way to cause your program to crash.

We experienced this problem a lot when building the first 150 pages or so of our site on an old DX4 100, to the point where the program was crashing about once every 10 minutes (usually necessitating a complete re-boot to get anything working again). Since then we've started using a Pentium II 300 with 64Mb ram and 6.4Gb hard drive - but the program still crashes occasionally, usually (but not always) when I've forgotten to deactivate the hyperlinks. You may not experience this problem at all - but if you start building the volume of hyperlinks we use on our pages, it is useful to develop the habit of always deactivating the hyperlinks immediately you've opened your page. [Note - March 1999 - I've found it also helps to minimise crashes, if you ensure that your browser is in "offline" mode before you open WordPerfect Suite 8. What works best here is to use "offline" and then minimise the browser window, before opening WordPerfect Suite 8 up at all.]

Now - your table of links. It's usual to put this at the foot of your "page". You'll know (if you've printed off any of these notes) that some of them print on to half a dozen pages of A4 - but each document is treated as an individual "page", no matter how many A4s it prints onto. Ideally you have to find some sort of balance between "overlong pages" and "endless new pages". We've found that around 8 x A4 is the maximum length the program will handle comfortably [particularly if there are a lot of hyperlinks]; probably 2 x A4 is more ideal but you'll find that "number of A4s" will vary depending on what information you're trying to fit onto any given html page.

Go to the bottom of the page you've created, and click on Insert [4th from left, at top] and select Table. This will bring you up a screen entitled HTML Table Formet. Let's assume you have (like us) created seven main areas initially, plus your welcome page (whether or not you put this in a welcome folder). So you need a total of eight boxes (if you're going to use the same table for each of your eight pages).

Click on the "up arrow" next to Columns [under Table Size, top right]. This will change number of columns to 4 (default is 3 on our version of WordPerfect Suite 8).

Click on the "down arrow" next to Rows [just underneath]. This will change number of rows to 2 (default is 3 again). This will give you a table 4 columns wide by two rows downwards.

The table width option should be ticked already, and should show Percent - 100. There's a down arrow next to Percent, which means you can specify Pixel width rather than Percentage (somewhere around 600 pixels is a full-page-width-within-margins) - I would recommend you don't mess with this one. Specifying pixel width is all very well but I've found this causes more problems than it solves, primarily because 100% represents a full page width which will make all the table visible no matter how wide the browser window; specifying an exact pixel size (eg 600) means that if you're using a browser of only half-a-page width (as happens sometimes on the Net, eg where you've clicked through on a mail-message-hyperlink) you'll only see one half of the width of the table and the rest of the information will be out-of-sight. If you need to vary the width (eg you're using a single cell [1 row, 1 column] later, as a "button" for whatever reason) you can safely vary the percentage by using the up/down arrows provided.

For now, leave the table width (in percent) as 100. Then, in the middle of your screen, further down, you'll find "Table position on page" with a range of options you can access using the down arrow by the long box. Choose Center (americanised spelling).

Similarly you'll find (below this) "Vertical Alignment of Cell Contents". Again, in the same manner, choose Center. Click on OK (at the bottom) and this will give you a table that looks approximately like the one below.

x x x x
x x x x

I've typed an "x" in each box because otherwise (in WordPerfect Suite 8 at any rate) the table doesn't show up properly on the browser. Cells within a table aren't outlined in the browser unless they have text content of some type. It would be helpful - for now - to type an x in each box (use tab to progress to the next box, shift-held-down plus tab to return if necessary to the previous box). The reasons for you typing the x will become apparent shortly. Incidentally, if the first x you type is in the wrong typeface (this happens sometimes, for no apparent reason), delete the x and change the font (down arrow next to font title box above) before you re-type it and it should stay constant as you tab through your table cells. If you want to change the type size (font size box next to font title, top left), modify this also before typing the first x, so it stays constant through all the table cells. If you discover you want another "row" on your table, simply use tab after typing in your last "x" and this will automatically generate another row across your whole table.

Now - you need to re-enter your table. Place your cursor within one of the boxes, and you will find that "Table" option appears [approximately centrally) along the long grey bar immediately above your screen. Select Table - Format.

This will bring you back to a similar screen to the one you had just now. You are about to vary the borders (you could have done this initially but for some reason the instructions don't carry through when you first create the table; you have to re-access it).

Using the up arrows, vary the numbers given for borders / spacing / margins, from the default 1, to 5 for all of them (i.e. 1 1 1 changed to 5 5 5). Click on OK. This will now have modified your table so it looks like this:

x x x x
x x x x

Now, place your cursor immediately after the last "x" on your table, and drag the mouse to the extreme left and slightly upwards, so that you have "highlighted" the whole table (but only the table). The reason for asking you to place the cursor after the text is that sometimes you may not be able to get "table" to appear as an option at the top of your screen, but placing your cursor within the table at the end of typed text will usually generate it. Highlighting your table may otherwise (for whatever reason) (a) remove the table option at the top of your page (b) sometimes also remove the HTML Tables option on the Perfect Expert bar on your left, which allows you to modify your table in a similar manner to the top-of-screen option. Using cursor-following-text position to begin the highlighting process will usually produce both table-amendment options.

Once your table is highlighted, select the "cell" option at the top of the screen by clicking on it [there are four options, table - row - column - cell along the top, each of which will bring up a different set of options if selected].

You'll see "Align cell contents" horizontal [select Center], and vertical [again select Center]. This will vary where your typed text is going to sit within each individual cells (you've highlighted all of them so you only have to go through this procedure once).

Now choose "cell background colour" by clicking on the "tipping beaker" and selecting the white option by clicking on it. You'll find that this will cause a tick to come up automatically next to Cell Background Colour. Click on OK. [I should point out here that changing the "table background colour" (on the screen where you changed the cell borders) won't actually give you this colour background for the cells themselves (not sure why) - you actually have to specify this factor (even if it's the same for all cells) on the cell-background-color option, and all the cells have to have been highlighted, when you do this.]

x x x x
x x x x

So - you have now created a table. In actual practice this will probably take you about two minutes, once you've grasped the basics - maybe less than that. If you want some of your cells different colours, or the text aligned differently in different cells, it's probably worth highlighting each cell individually to modify it, rather than changing the whole lot en bloc and then having to re-modify individual cells.

If you notice - later - that the borders seem to have disappeared from your browser version of the table, or you find that text seems to be going over the edges of your cells, your individual cell border formatting will probably have disappeared [for what reason I can't guess but I do know that this occurs periodically] - in which case use Table - Format and re-enter the 5 5 5.

Now you should save your page so far [Finish - Publish, as usual]. The next step is to type in the actual titles you want, within individual table cells. The best way I can show you what to do is to type in the titles we use on the Project HappyChild website, so you'll be able to follow how the hyperlink paths for those titles are constructed, shortly.

Welcome Page Infinite Facts Directory Accelerated Learning
Free Worksheets Bricks and Mortar News and Views Fundraising & Resources

Above is the basic table, pre-hyperlinks. Where any text didn't fit on one line within a cell, it dropped down to the next line when it was input: on the browser it may appear to be all-on-one-line, but may print on more than one line within individual cells. However all text should be centred both horizontally and vertically within individual boxes, on the browser / printed versions, even if it does not appear like this on your basic page screen (try this out on your page then check to see what happens on your browser, using the Finish - browser option as before, or the browser icon we identified previously at the top of your screen).

Now we can add the hyperlinks. Highlight the text in the first box (place your cursor in front of the text and drag it to the end of the text in the first box). Then click (top of page) on Tools - Hyperlink, to bring up the Hyperlink Properties box. You will see that "current document" is highlighted in blue, in the top long box. All you have to do is to start typing, to overwrite this.

Some people use "abbreviated hyperlinks" depending on their Directory structure. From the beginning (because I didn't know any different at that stage) I have always used the full web-page-address for all hyperlinks - and find that easier to work with, on an ongoing basis, so this is what I will show you how to do.

The text I would type into the long box for our Welcome Page would be as follows: https://www.happychild.org.uk/index.htm . This page has automatically "hyperlinked" what I have just typed in the page body (as soon as I typed the space following the page address); in the HTML properties box you simply type the page address (including the /index.htm) then either click on OK or use a carriage return, to come back to the page you're working on. No space after the text!

You need to identify the correct page address for your own welcome page. Remember that even if you used a "welcome" folder to house this page on your hard drive, you didn't create one on the internet: this index page became part of the first screen you access on the FTP program, so logically it follows directly from your main site address, which may be something along the lines of http://www.johnbull.force9.co.uk (or whatever). So the page address you would type into the HTML properties box would be http://www.johnbull.force9.co.uk/index.htm (substituting your own site address including your server, for johnbull and force9.co.uk). I hope this is relatively clear.

We don't have a "server component" within our address because Kevin Nash at Invek kindly funded the "happychild" domain name for us for 2 years: however our hyperlinks are constructed on the same type of basis as yours will be, save that our integral site address preceding the /page title is made up slightly differently.

Hyperlinks from the other boxes are constructed in exactly the same way: highlight the individual cell text, select Tools - Hyperlink, and type in (for example) https://www.happychild.org.uk/ifs/index.htm , for Infinite Facts. To see what hyperlinks have been typed in for the table below, "hover" your mouse over any hyperlink and you will see the actual page address being linked to, come up at the bottom left of your screen, on the narrow grey bar above your "Start" option. You may notice that there's an extra sub-directory (tpr) on the Accelerated Learning section - this is because a separate sub-directory was created to house Michael Tipper's articles on memory techniques, to allow for the possibility of more individuals becoming involved in this section of the website, at some stage.

Welcome Page Infinite Facts Directory Accelerated Learning
Free Worksheets Bricks and Mortar News and Views Fundraising & Resources

You can "test out" your own hyperlinks in the same way, by typing them in for each box then going to your browser and hovering your mouse to check what each one says, to check that you input the page address correctly for each one. For now, it will be simplest if you use an /index.htm suffix for each area, and then when you create the first page in each of your folders, call it simply "index" (WordPerfect Suite 8 adds the suffix for you) - only adding the .htm suffix yourself when you are specifying a hyperlink.

When you're "testing out" you should be able to see the text of the hyperlink, but you won't be able to move from one page to another in your browser [you'll get a "no entry" sign in the interim] until (a) you've built your pages (b) you've uploaded them to the Internet and accessed them, after which your computer will probably retain them in its memory for long enough for you to test out your hyperlinks from one page to another simply by using your browser.

When you've built your table (and saved your page [Finish - Publish option]) you can copy it to paste into the other pages as you build them (it will only stay "on the clipboard" whilst you leave the WordPerfect Suite 8 program open).

To copy it, it's important not to just highlight the text. If you do, you'll find it will paste later without the boxes. Go to the top-left cell of the table and move your mouse until the cursor becomes an arrow at the top edge of the box. Click and hold down whilst you drag the mouse to the diagonally-opposite end of the table, to highlight all of it. Let go of the mouse button and take your cursor to the top of the screen; select Edit - Copy, and you will get a screen come up with "Cut or Copy Table" with several options. Select "Selection" and click on OK. This saves a copy of the table to the "clipboard" and you will be able to paste it into other index pages you create for other areas of your site.

Remember that hyperlinks to areas other than your main page need the directory path included in the hyperlink (as with /ifs/ being included for Infinite Facts). It may seem slightly pointless having the page you're on included in the hyperlink table on any given page, but there are two reasons for this. (1) Is that on a long page (such as this one!) it can be used to return you immediately to the top of the page (instead of using Control-held-down plus Home, for example); (2) is that you can use the same table for all the pages, which saves you an infinite amount of work, particularly as your site gets bigger.

The last item we need to cover in this section is "hyperlink colours". You will remember how we changed the background wallpaper? Using the same route (Change Background on left-hand-bar, down-arrow, custom (question mark) you will reach the screen for Text/Background Colors (americanised). You will see options (on the left) for Hypertext colours - Link, Visited Link, and Active Link, each with a "tipping beaker" beside them. Select colours which contrast well with your background and wallpaper (bearing in mind that anything unusual isn't going to appear on a lot of people's browsers), and click on OK.

You'll find (if you've made changes) that your "linked" (underlined) text is now showing up in different colours from what you had originally. Check how this comes up in your browser, and - when you're happy - save your page again.

The last major item we need to cover is Meta-tags, for the Search Engines. You may wish to pend re-uploading your welcome page, together with uploading your new pages, until you have covered this section. Whenever you do add your new pages, remember to upload the contents of their Webimage files, as well.


Part 1 Part 2 Part 3 Part 4 Part 5 Part 6
Part 7 Part 8 Part 9 Part 10 Part 11 Part 12
Part 13 - Mind Manager Part 14 - Traffic Building Guide * new * Index

Schools Interchange - links to governments, education departments, schoolnets and schools across the USA, Canada, Caribbean, Pacific, Australasia, Asia, Europe and the UK, includes Orkneys, Shetlands, Skye etc.
  400,000+
school websites::
U S A  Canada
Europe Asia
Australasia Pacific
Africa  England
 The Index to Bricks and Mortar : Basic Reading Skills
Bricks and
Mortar
(learning
to read)
free to
print
 Bricks and Mortar - how and why this unique system works 
PROJECTS
to help children
Carib Amer
Europe Asia
Aust Pacific
Africa UK
the Potted Learning pages
3000+ worksheets: spelling, crosswords,
lateral thinking, poetry writing, mc lyrics
4000+ free maths worksheets
English * how to do fractions * science
dolphins  *  learn times tables  *  games
focus * accelerated learning * timelines
index to free educational resources
wordsearch puzzles
paintbox  *  change a life  *  carols
Aesop's Fables  *  Twin Towers
 
click here for the main welcome page at Project HappyChild
Sponsors - our thanks to everyone who has helped Project HappyChild to grow, by their support for this website  

~ linking children all across the world ~          
 
 
publicity for this site is always          
much appreciated ~ thank you          
 
10,000+ dual-language worksheets (all free)
(all worksheets test TO and FROM each language)
Polish-English # # # Dutch-English
French-English # # # Spanish-English
Romanian-English # # # Bulgarian-English
Hungarian-English # # # Mandarin-English
German-English # # # Russian-English
Arabic-English # # # Turkish-English
Urdu-English # # # Italian-English
   help needed!  click here
The Index to the Infinite Facts Series
infinite facts
 
countries A-Z
islands A-Z
U S A   states
Sioux tribes
 Andy's Guide to Pokémon
POKÉMON
 
Harry Potter
UFO story
news
newsletter
Sol's guide to Harry Potter
EVENTS
 
DIRECTORY
syndromes links
landmines
Illuminated Bible
Projects helping children across the world

These notes are copyright Project HappyChild 1998/1999/2000. You may print them off and/or photocopy them for your own use, and/or give photocopies to other people, but the notes may not be published in any form (including elsewhere on the Internet) without the prior permission of the Trustees of Project HappyChild.
If you find the notes helpful, your support for one of the charities helping children in the Project HappyChild Directory or in our Worldwide Appeals area would be welcomed.

The index page address for "Build Your Own Website" is https://www.happychild.org.uk/webpages/index.htm
and is located in Area 10 [archive] at Project HappyChild - linking children all across the world

guestbook appeals fundraising Directory USA counties schools latest news events sponsors

your support is always welcomed for the Children's Charities in the Project HappyChild Directory - just click here for details of 80+ organizations

NEWSLETTERS - this website has been on line since 1998 - there have been a lot of Newsletters! The archive is here and the very last Newsletter is here.

your support is always welcomed for the Children's Charities in the Project HappyChild Directory - just click here for details of more than 80 organizations
Your support is always welcomed for the Children's Charities in the Project HappyChild Directory - just click here for details of 80+ organizations.

hosted by
Mythic Beasts
contact visits since
4th March 1998:
copyright broadband by
PlusNet