skip to content

Latest News

Google Analytics Upgrade to GA4

Next year (2023) Google will be retiring the 'Universal Analytics' version of Google Analytics. To upgrade to the new...

.AU direct domains are launching soon

auDA have recently announced that they are launching .AU Direct domain name registration. In the initial period holders...

Introducing the new CDHS website

Press release from the Canberra & District Historical Society Dear Members After a remarkable 18 years of service our...

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)