Guidance for creating and editing website pages

Lesson 4 - Understanding the structure of a web page

You will need to have downloaded and installed the freeware programme from Lesson 1 - Basic Principles:

You can get it from: http://bluegriffon.org

The basic (without licence and technical support) version is completely free.

It is a HTML 5.0 capable (current website code) WYSIWYG (What You See Is What You Get) editor.

When you start the programme you should see this:

Go to the top left-hand corner and click on 'Open':

Copy and paste this address:

http://birnbeckregenerationtrust.org.uk/newwebpage.html

Click 'OK'.

This is an almost blank test or template page which exists on the BRT website server.

(N.B. You cannot alter, damage or otherwise affect the original server file in any way - you have simply created a local editable copy. If you mess it up - simply reload and start again.)

You can also view the page directly, you can click on it here:

http://birnbeckregenerationtrust.org.uk/newwebpage/html

You will now see this - the page, now called up from the server, is loaded into the BlueGriffon WYSIWYG editor:

(N.B. ANY BRT website page which currently exists on the website can be called up this way, just by pasting in the correct URL (Universal Resource Locator) - its normal internet web address.)

In Lesson 1 - Basic Principles we only looked at using the WYSIWYG (What You See Is What You Get) part of the editor.

By clicking on the central lower 'Source' button (highlighted in blue) we can now see the HTML source code for the page:

There is also is a 'Dual View' mode available from the lower left button (also now highlighted in blue):

The central screen divider can be moved left and right to reveal more or less of the two visible modes:

One thing you cannot do with HTLM code is to write it into a page like this one and then expect to be able to see the code itself - it won't do this for fairly obvious reasons - it simply turns itself back into the content that you actually want to see on the page at the end of the process!!

Something like this: