St. Helens State School

Web page writing tutorial.

 By J Caldwell

If you are viewing this file from inside Explorer start by going to File, Save as, then click on the Desktop button along the top of the window that has appeared. Then give the page you are saving a name "testpage" and click Save. You have just saved this web page and its contents to your desk top as "testpage.htm" and it's files to a folder called "testpage_files". Now you can go into Star Office 5.2 and go to open then the windows desktop -to open this page saved as "testpage.htm". So you can test out the lesson below.

What is a web page?

A web page is simply a page of document saved as a HTML file.
HTML means hyper text mark-up language - but who cares?

With simple web page editors like Star Office 5.2 or Nano you do not need to learn a new language to write an effective web page. I have chosen Star Office 5.2 for my school to use because it is very simple to use and yet very clever and powerful, interfaces well with MS word, is well supported with help sites on the internet and... oh that's right it is -TOTALLY FREE.

State Ed. provides MS Front Page for schools to use. Front Page is very good but daunting, difficult to get started on and is not the most popular even with the Expert who prefer Dreamweaver 4 or Nano 5...

Web pages contain:


Hyperlinks, also simply referred to as "links," are perhaps the biggest reason for the phenomenal success and exponential growth of the World Wide Web in recent years. A hyperlink is a page element (usually a word, button, or image) that "points to" another Web page.

* To make a Hyperlink just highlight the an picture or text (that you want users to be able to click on to get some where) with your left mouse button then click on "Insert" and "Hyperlink". When the Hyperlink menu comes up choose the location you want the link to go to. Then click "Apply" and "close". Note you need to have the destination page written and saved before you can make a link there.

The text in the selected area where you wish to create a bookmark is indicated by default. You may use the default text or enter a unique name for the bookmark.

Multi-Media Objects

Your web page can contain pictures, sounds, animations, forms, search engines... Any pictures or sounds need to be saved separately to the page and need to be in a specific location. You can place objects within your page by going to the insert menu, but before you place the object into your document remember to save it into your Web Folder
(e.g. y1_2).


There is no Tab function in HTML

This is just like a table in Word...

so you need to use a table to space items or to set out across your page.

To insert a table go to "Insert", "Table". A table is not saved separately and is part of your web page file...

File names for all web items must have no spaces, capitals or symbols.

So Basically writing a web page is no different to writing a Microsoft Word page that has embedded links and a specific location for where the page is saved and where the media pictures and objects used on the page are saved...

To make a simple but effective web page to operate within our school site there are several keys steps:

1-Make a folder on your desktop labeled "My Web Page" inside of which you will keep a your " y1_2 " folder containing your web page/s. ( I will help you with this if you need it)
2- This page can be used as a template. Just go to save as, to save this page as "classpagey1_2". Save it inside your " y1_2 " folder you made in step 1.
-then delete the information to keep the home buttom, logos and basic page layout table. 
3-Any pictures you want to ins
ert into your web page need to be saved in this desktop " y1_2 " folder along with your Web Pages.
4-You can now work on your class page or start your new web page inside a web editor like Start Office 5.2

*To open your class page open Star Office and go: file, open, click the "go up one level" button,
double click the windows directory, double click on the desktop folder, then double click on the "My Web Page" folder then on the "y1_2" folder, finally double click on "classpagey1_2.htm" (don't worry next time the page will be listed under recent files)
*To create a new web page click on: file, new, HTML Document...

-You should now see your shiny page ready for developing or updating and apart from a couple of considerations you can setup your web page just as you would set out a document inside MS Word. In fact Star Office is so clever that you can work out your document in Word and just copy and paste it into Star Office which does a better job of saving documents as HTML (Web language) than Word. Below I have transferred a complicated document I made in Word to prove this... click this "Book Mark" to see...

Also remember:
-There is no Tab function so you need to use a table to space items or to set out across your page. This is just like a table in Word...
-In Web page editing Enter means start a new line and miss a line so you need to press Shift and Enter to just start a new line without missing a line...
-do not use any spaces, symbols or capitals in file names

Below I have placed some example items for you to play around with in Star Office and it would be a good idea to move on to starting your class page if you have time... Try starting a new page and linking (with a Hyperlink) your "y1_2" and your second page. Save your second page in the same folder as your other page.

This is a test link.






This is just another test caption.



This is to show you how a table is used to set out a page...

Wow an inserted picture!

Notice how the size of your picture can be changes by clicking on the picture once then grabbing the corner markers.

I have attached a Hyper link here to an FTP program tutorial site on the Net.


An FTP Program is what you use to load your web page files from your computers hard drive to a hard drive out there on the World Wide Web - others can view the information.


Have a look at the tutrials and if you want to have a go I will give you the setting to transfer your pages onto the schools web site... If not once the web pages have been written by you and your class they can be saved to disk and transferred by Kay or myself.