Lanie's Heating-Oil Purchasing Group - a web-page (hand-coded) demonstrator

Updated November ’15


How the Purchasing Scheme Works

Ordering Schedule

Order Form

Contact Lanie

Historical Oil Prices


Lanie, you could use this page as the basis of a your site (but a rather 'utilitarian' one I'm afraid - best suited to presenting traditional, text-based information).  You can download this page from the web, if you want, by hovering your cursor anywhere over it (except on an image), then, using right-click "Save Page as… " to your PC (although the precise operation of this functionality may be browser-dependent).

Once you've downloaded it, you can change any of this text to make your site.  To edit it, you can use a dedicated HTML (Hyper-Text Markup Language - the language of the web) editor - 'KompoZer' is a trivial, free one available from: "" (then run "kompozer.exe" which will initially extract compressed files - actually, it's already loaded onto one of Walbury C.G.'s desk-top computers).  You may also find MicroSoft (MS) Word or OpenOffice/LibreOffice Writer usable (remember to "Save" your edited file in HTML-format)… or, as you're IT-literate, any simple text editor may do.  MS 'Notepad' for instance is fine for editing HTML.

KompoZer, designed as a WYSIWYG HTML editor, allows you to simply toggle between viewing/editing your web-page (select "Normal"), examining (or directly editing) the HTML code 'behind' it (select "Source") and also "Preview"ing it.  However, with 'Notepad' (or 'Notepad++') you'll regularly need to save your HTML edits and then check how the updated page displays by viewing it with your web-browser ("File", "Open File").  Also, being relatively dumb, 'Notepad', unlike 'KompoZer', can't check your HTML code's syntax.

How I've structured this page

I've set the background of the whole of this page to be pale green and the text to be dark grey (rather than absolute black) - but detail like that can be set to whatever you want.  Font selection, size, colour, spacing, margins and background colour are usually defined in a 'style'-heading - so that 'site-content' is kept separate from the way it's presented (its 'style').  I usually decide on a 'style' for a site just once and then apply it to all pages of the site (for 'site-consistency') using a, what's called, 'css'-file ('Style Sheet' - for this site, it's "lanie.css" [but not coded using HTML;  'Notepad'  is still fine for editing it though] - take a look at it if you want - it's at:

When your site is put on the web, you'll also need to make the 'css' file available (often uploaded to the same web-folder as the rest of your site).

I've allowed the width of this right-hand column of the page to vary so that it fills the visitor's window size - but you can fix it if you prefer - about 820 pixels-wide for the whole page is fairly normal.

I've designed this page so that, after the header/banner (comprising a two-cell table with the 'droplet' image in the first cell and 9-words of text in the second cell), it consists of a two-column table - the left-hand column holds a navigation panel which has links to other pages; the right-hand column holds the pages' main content (i.e. this text).  I've removed the table's borders (by using border="0").

Naturally, you can insert bullet points, tables, or images too (like the droplet image in the heading) into your web page(s).

To create bullet points, you may be able to use your HTML editor's facilities - or else simply "cut and paste" the bulleted text, further down this page, into your page.  Then edit the text to your requirements.

An example of a text-table

Below, nested within this right-hand column, is a fixed-width (550-pixel), 2-column table:


Lanie, you could use this 'tile'-format for presenting several brief topics (notices, say) in a single 'block'.

Column Width

It's sometimes easier for a site visitor to read short runs of text (like this) rather than to scan along a full-width line and then find the continuation on the line below.

Table structure

This whole, 5-cell block comprises 4 rows: cells 1 and 2 (both in the first row - even though cell 1 is marginally deeper); then cell 4 and cell 3 which each need their own row in order to allow them to individually size themselves vertically and therefore allow cells 1 and 2 to automatically size individually too.  Then, in the 4th row, cell 5 is merged across the two columns.
This cell shows the appearance of increased spacing between the text and the cell border (achieved by locally increasing its "padding" to 15 pixels using an in-line "style" definition).

I've also given this third cell a radiused border.
This final cell is the only one that I've set to have centre-aligned text.  I've turned-off the cell-border lines, and, to highlight each cell individually, I've given each cell a different background colour (in its 'in-line' "style" command).  As an example, for this cell, I've set background:rgb(255, 255, 204) which equates to maximum red & green and 80% blue.


An example of the inclusion of a centre-aligned graphic:

This page is constructed relatively simply compared to a lot of web-sites.  It's format is best suited to shortish amounts of content, say, less than 80 lines of text.

You may notice that the scroll bar (running vertically down the right-hand edge of the browser window) scrolls everything on the page i.e.:
  • the banner (heading the page)
  • the left-hand column (navigation panel) of the page
  • the right-hand column (content)
as one, single, grouped entity.  We can, should we wish, change this behaviour (- but KompoZer is not sophisticated enough) so that the position of any of these sections is independent of the others, eg. the banner and/or navigation panel could remain fixed in the browser window as a site-visitor scrolls through the main content.

Once you're happy with your first stab at a 'Home' page, you'll need to store it on the root-directory of your site's web-space - or, if you don't have any web-space of your own, e-mail your pages to me.


Your page footer (not within the two column table above) goes here - if you want one.