NEW Joomla! is an online content management system for your web site.  Put simply, it allows you (and any number of other authors) to submit articles which appear either on the first web page or in other categories on other pages.  It's a little like an online newspaper or news-service of your very own.  It can also be used as a Blog.  And it's free.

It is a highly customisable system, but in my first days on the learning curve the word Joomla! (don't ask - I don't know) seems to appear an awful lot on my site.

As an author you can edit text in the usual way - making text bold, italic or underlined; left or right-justified; in any font or colour.  You can also upload images to insert into the text without using an external FTP program or bothering the IT staff.  The appropriate permissions are set so that you can do your job without messing up anyone else's contributions (especially the owner of the site).

You too can request to be an author on my fledgling Joomla! site by merely registering your login name and choosing your own password.  This won't allow you to edit or submit articles, but I can then elevate you to author.

To install Joomla!, you can either go to the Joomla! website and download it, and follow the directions (unzip, upload to your own website directory, etc.) or use the scripting facilities on your hosting website.  I found that in my case I just logged onto the hosting cPanel (control panel) and selected a MySQL database for Joomla! to use and then installed Joomla! from the hosting site itself.  No downloading and copying 22 MB of data around the place.

Then finally you get to shape your new Joomla!-based site over time...

If you upload the same set of HTML pages whenever updating your web-site, consider using the DOS ftp command provided free with Windows.

Making a batch file with the upload requests will speed the process from several minutes clicking in a Windows FTP program selecting files, changing directories and clicking again, down to a matter of a few seconds.  Read the details in this short tutorial.

Here is the monthly report produced by the Web Design Special Interest Group of the Sydney PC User Group.  We usually discuss aspects either of web-design itself or NetObjects Fusion and then finally update the page with our meeting report.

The SIG meets every third Saturday of the month on the first floor of the Sydney Mechanics' School of Arts building, 280 Pitt Street, Sydney, from 2pm to 4pm.

The HTML code ­ (for soft hyphen) allows long character strings to appear intact where the browser window width permits, but breaks with a visible hyphen otherwise.  Several soft hyphens may be included in the one line to allow graceful folding of long strings.

Microsoft Internet Explorer (versions 6 and 7 for Windows 2000 and XP), Opera 10 and Safari 3.1 (525.13) do handle soft hyphens correctly, but Firefox 3.5.3 does not.  Some Linux browsers fare even worse, actually showing these otherwise hidden hyphens (very ugly).  Check your current browser on this simple test page.

A knowledge of HTML and Cascading Style Sheet syntax may still be necessary to get the most out of web-pages.  For example, to display the symbols for plus or minus (±), multiplication (×) and the centred dot (·), use the character strings ±, × and · respectively.  And don't forget the semicolons.

To use these codes in the text, select Text ¦ Insert HTML in NetObjects Fusion (or use the shortcut Ctrl/T) and enter the corresponding strings.

These give Latin, Greek, accented letters, mathematical symbols and fancy punctuation marks.  There are also other special symbols like those for spades, clubs, hearts and diamonds (♠ ♣ ♥ and ♦).

It is fascinating to spend time browsing through the list of about 260 symbols in either unsorted or sorted order.  These descriptions were produced from the original document on the web-site of the makers of the HTML rules themselves, the World Wide Web Consortium (W3C).

The latest description to be added was for the Euro currency symbol (€) which looks rather nice enlarged:   € ...

Even though there are many symbols and special characters with named codes, some are not displayed correctly by all browsers.  In this case, there may be hexadecimal codes defined by the World Wide Web Consortium (W3C) which will display properly.

Take the male and female symbols, for example, which are named in the standard as º (male) and ª (female).  They should produce the visible symbols º and ª in your browser.  Unfortunately, you may not see the correct graphics displayed.  Many browsers, however, do display the symbols ♂ (male) and ♀ (female) correctly.  This surprising fact is because they were specified as the hex codes ♂ (male) and ♀ (female) - surely more complicated than using º and ª in the first place?

To see the many very strange symbols available, take a look at Manfred Kleist's excellent page, Ausgewählte UniCode-Tabellen (Selected UniCode Tables).  The small amount of text is in German, but the codes are given in tables with the first 3 hex-characters on the left, and the 4th along the top.  Just remember to put &#x in front and ; after each code.

Be daring and display some musical notes: ♪ ♫, try single, double or triple integration: ∫ ∬ or ∭... or compose Русский Яэьік - Russkiy Yazyk (Russian Language, or Cyrillic) text for your web-site.

Some fine-tuning can also be accomplished with a little knowledge of CSS.  For example, to make paragraphs appear left and right justified like those on this page, it takes only a small piece of code in the <head> … </head> section (or as part of the .css definition file):

<style type="text/css">
p { text-align: justify }
</style>

It is also simple to change the paragraph style to use Arial Font and text size of 90% (of the size="+0" characters).  To accomplish this for all defined paragraphs (note that NetObjects Fusion also uses <p>...</p> to define data within table rows), we can use the following:

<style type="text/css">
p { text-align: justify; font-family: Arial; font-size: 90% }
</style>

To allow variation in paragraph styles, we can use classes.  These modify the style for individual instances.  For example, to have a slightly larger font for paragraph headings, we could use the following definition of the "lge" (or large) class:

<style type="text/css">
p.lge { text-align: justify; font-family: Arial; font-size: 110%; font-weight: normal }
</style>

and then whenever we want this style, we would use <p class="lge">...</p> instead.

To add that touch of colour to this class, we can define that too:

<style type="text/css">
p.lge { text-align: justify; font-family: Arial; font-size: 110%; font-weight: normal; color: #c60 }
</style>

Notice in this example that we used "color: #c60" where we would normally expect a 6-hex-digit number such as #00ff00.  Browsers interpret a style colour using a 3-hex-digit number as if each of the digits were repeated.  So #c60 is the same as #cc6600 or this colour.

Warning: The above does not work outside of style definitions.  For example <body bgcolor="#c60" text="#00f"> is wrong, and needs the full definition: <body bgcolor="#cc6600" text="#0000ff"> instead.

By the way, this arbitrary colour combination turns out to be almost the worst possible choice:  Can you read this? .

Previously these pages were validated to HTML 4.01 standard, but are now at XHTML 1.0 level.  The reason for aiming for this higher standard is to use some of the new features.  They include the ability to give a background to the HTML outside of a border enclosing the BODY colour or texture.  All of the current browsers (including IE 6 and 7, Firefox 3.5.3 and Opera 10) honour these specifications in the CSS code.  To see that these pages do conform, use the W3C XHTML logo at the bottom of the page.

Changes include the DOCTYPE statement at the head of each HTML 4.01 page which was:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<hr noshade size="1">

<hr noshade="noshade" size="1" />

For more information, see the official XHTML 1.0 specifications.

To check your web page online, go to the World Wide Web Consortium (W3C) Validator page and use the URI (Uniform Resource Identifier or web address) method, upload a file or directly enter copy/pasted input.

To do the same thing in Opera 10, right click on your test page and select Validate (shortcut Ctrl+Alt+V).  Opera sends the data from its cache so you can view and validate pages from a local disk even before uploading.

If the W3C site is down or unavailable, try the free program CSE HTML Validator Lite v9.02 instead.  It is a 6.2 MB download (cselite.exe) and features excellent explanations for errors and suggestions for code correction.

The program features spell checking, changing uppercase <TAGS> to lowercase (including the parameters within the tags), and also quoting attribute values.  For example, it will change

         <Table Width=100% Class=main>
    into <table width="100%" class="main">.

It will detect missing end tags and suggest standard HTML usage (such as width="100" instead of width="100px" for example).

This current page was validated, giving the nice comment:

Congratulations! Even the standard and professional editions would not have found any additional errors or warnings (not considering any possible JavaScript or PHP messages).

However, on an unmodified NetObjects Fusion-generated page, the W3C Validator marked as an error the code: topmargin="0" when it was present in the <body> tag.

This parameter is considered an industry "standard option", honoured by most browsers, intended to allow white space margins around web-pages.  When set to "0", going to the top of page will then actually go to the top (if the <a name="Top"></a> is the first thing after the <body> tag, of course).

As a work-around, the topmargin parameter has now been deleted and the CSS code: body { margin-top: 0em; } used instead.  This has the added advantage of allowing left, right and bottom margins with the margin-left, margin-right and margin-bottom parameters.  This used to be done using an all-encompassing table using width="80%" or similar - complicating the overall syntax of the web-page.