How to create your own web site - Part 3

For this part, we are going to look at a few refinements to that and start thinking about links to other pages. One of the issues that constantly haunt any web designer is that of load times. People surfing in and out of various web sites won't sit around for long periods of time waiting for pictures or other files to download. So try not to put to many pictures on one page.

If you put together a picture gallery or an album, a good idea is to spread the pictures over several pages. that way a visitor can browse through in easy chunks. By writing a small amount of descriptive text with each picture it also gives the visitor something to read while pictures and pages load.

But how do you jump from page to page. Well once again we use one of those "tags" that we spoke of last time, but before we can do that we need to have a page or an address to go to. Lets start by creating a second page for our home page site. Once logged into Angelfire you will note a text entry box under the file list. In there type the name you wish to use for another page.... Lets say its called "nextpage". You must end the file name with ".html". Once done click on the create/edit button. You will now be back where you started when you setup your first index page. Follow the same procedures as you did then and save the file.

You will now notice the second file in your file list. You can edit either file at anytime by highlighting that file and clicking on the edit button.. but avoid using the Advanced editor at this stage, unless you feel competent to use html without any help. So lets now link the two pages together. Open up and edit the main index page... One way to link the page is to use one of the link options provided by the Angelfire editor. Set it up for 1 link provide some descriptive text and enter the address of your other page in the box. Unless you can be sure of the directory you are in, its worth entering the full pathname, which on my site would be:-

Many web designers use all sorts of icons to add sparkle to a page, some are even animated. Angelfire has a link to just one of many libraries of icons. Look for and click on a link that says "images". That will whisk you away to a library of icons, buttons and pictures (including animated ones.) Note the address and pathname and try adding them to your page. Again just experiment and play... experimentation and self learning is the very best way to learn.

Still on the picture issue I want to introduce you to a couple of extra bits.. the first is on picture size. Just as you can format your body text, you can also format your pictures or images as they are more correctly called. One of the more useful ones is to control the size of the picture on the screen. this can be done by defining the number of pixels or the percentage width / height of the screen to be filled by the picture. I like the percentage one.. say for example I have a large picture that dominates the screen when it loads. I might want to scale it down so that it fills say just 30% of the window. If I wanted that then I would use width="30%" and I would need to add that within the "img" tag after the path name like this..

<img src="pathname" width="30%">

Alternatively I could define the height with height="nn%".

Another useful addition is to display a note on what image is loading. You may have noticed that a box where an image is loading may show some descriptive text. This is done using ALT="description" and it is added exactly the same as the width or height component.

So let's re-cap. I want to load an image which is a picture of me and restrict its width to 50%... the tag I would use might be.. <img scr="image_path" width="50%" alt="This is me."> where image_path is the path to the image file, and "this is me" would be displayed as descriptive text with the image. Some of this may seem to be getting rather complicated, but its one of those things that gets easier with practice. Once again remember that path names are case sensitive.