skip to content

Latest News

Google Chrome Now Labels HTTP Sites as 'Not Secure’

As of today the latest version of Google Chrome will display "Not Secure" in the title bar for websites not using HTTPS....

GDPR Statement

The General Data Protection Regulation (GDPR) regulation came into force on 24 May 2016 and will apply from 25 May 2018....

New Password Policy

A lot of you will be familiar with a password policy that involves: * a minimum number of characters; * at least one lowercase...

News RSS Feed

more news

(everything above this point is defined in the 'header' of the site template)

Top level heading - Heading 1

The purpose of this page is to demonstrate the concept of 'templates' and 'style sheets' for websites. For each website we create first a header and footer that together form an HTML template that defines the basic layout and navigation. The template will then include one or more style sheets that define how each element is to be formatted - font, size, colour, alignment, etc.

So the appearence of a particular page then depends on:

The site template determines the layout of the page, while the style sheet determines how each element (headings, links, tables, ...) is rendered (formatted in your browser) in terms of size, format, colour, and sometimes even position. Because each browser uses slightly different rules for rendering HTML and CSS the result can vary between browsers.

Second level heading - Heading 2

At it's simplest, an HTML page consists of headings followed by paragraphs of text, images, lists and tables. The largest/most important heading is the 'H1' (Heading 1) followed by 'H2' and so on. Usually we don't go beyond 'H4' which is typically equal in size to regular text, but bolded.

CSS can affect the font, size, colour, alignment, borders and backgrounds, set the text to upper- or lower-case and (in newer browsers) apply transparency, text-shadows and other special effects. Applying these styles through a style sheet means that the HTML pages can be cleaner and more compact (hence faster to load and display).

Third level heading - Heading 3

As mentioned above, the style-sheet also determines how a link appears in terms of colour, underlining (yes/no), hover effect, etc. Links can have a different colour if they've been visited, or when you point at them.

Fourth level heading - Heading 4

Tables can also be formatted with different colours, font weights and border effects. The following table has a header followed by two rows of content. The text contained in the table has been styled using various simple HTML tags:

Styles can be applied to any HTML tag:
Bold, Italic, Underlined text Strong and Emphasised text
Big and Small text Bold and Italic text

Using a template makes it much simpler to update you content - either using an HTML editor and FTP or working through a content management system (CMS).

Visit the Chirp or Australia G'day Portfolio pages to see more examples of template-driven websites.

(everything below this point is defined in the 'footer' of the site template)