In this section we will actually put some code together and insert a couple of graphics to produce a simple web page.

Throughout this section we will use local addresses (the location of files on your drive where you are storing them) rather than remote addresses. Otherwise you would have to load everything onto a server to preview it, which is a bit time consuming not to mention overkill!

I am assuming that you have filled out the head section already to your satisfaction - if not do it now! I'll wait...... OK? So off we'll go.

The very first thing to include is your banner logo. Ideally this is a simple gif file of about 400 to 600 pixel width and around 50 to 60 pixels in height (this all keeps the weight (size in kb) of file relatively small and so, fast loading).The command code to write is done automatically for you. Click on insert image and use the following instructions on the selected image file: <center><img src="address of your banner file/banner name.gif"alt="Something 'catchy' that describes your site" />

Save the page and click on local viewer to see the effect. If all looks well put a couple of line or paragraph breaks next (either "<br><br><br>" or "<p></p><p></p>" to give a bit of space before the text content.

The first thing to write in the body section of the page is your page Title which will, hopefully, bear some resemblance to the title you put in the head section (it does, doesn't it?). At this stage don't worry about setting fonts, colours or text sizes as we will build a css (cascading style sheet) later to control all of that.

The settings we will use will put the heading in large bold text in the middle of the page.
Start by using the <center>command and then <h2>. Now type your heading , then close the opening tags in the reverse order to the way you opened thb (e.g. </h2></center>) then save and view the page again. If everything looks fine put a couple of line breaks in and start your main page text by typing <p> for the first paragraph. Use <br> to break lines and </p> to end a paragraph. Use the 'html index' page for underlining, italicising and other text instructions.

When you have finished the first part of your text it might be nice to include a picture (image) to give the eyes a break. We will use exactly the same method to that of the banner logo except that we'll put the image on the left of the page.

Choose an image file, maybe a picture you'd like to show off, place the cursor where you want the top left hand corner to be and click on the insert image icon. In the image dialogue stipulate align="middle" or just click on "open" and then "ok" or "insert" (or whatever your editor uses) and then just type "middle" within the empty quotation marks after the piece of text that says align= in the image tag line.
Now how about some text alongside the picture to say what it is? If you remember the "graphics and text" section (you did read it didn't you?), you will know that after "img" but before "src= etc, etc." can also have an "align" option. In this case we don't need to do anything as the image will anchor.to the left of the page and your text to the centre of the picture (use "top" or "bottom" if you wish, but middle looks a touch better in my opinion). Now start with a space (hit the space bar on your keyboard) then type in a brief piece of text. Try and keep the text short as any overlap of page width will continue below the picture. If the text is just a bit too long then start the line with the tagged instruction "small" (and end the text with tagged "/small") and view again.
Don't forget to write something in "alt" so that if the picture doesn't show or visitors have their graphics turned off they know what they're missing!

You should get something like this:

Now why not finish with some more text, play around with a couple more images and generally have a bit of "html" R & R.

The next page will show you how to put those all important links in, how to use a table (like the one at the bottom of this page between the lines) and how to construct the basic menu, or contents, page.

Links, Tables and Menus