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 are the SIG Reports 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.

See how to validate your HTML (↓) with an excellent free program, CSE HTML Validator Lite v10.02 .  Use it when the W3C server is unavailable.  It can do spell checking, change all those ugly uppercase <TAGS> (and parameters within the tags) to lowercase, and also quote the attribute values - for example:

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

The HTML code &shy; (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.70 andSafari 3.1 (525.13) do handle soft hyphens correctly, but Firefox 3.6.3 does not.  Some Linux browsers fare even worse, actually showing these as visible hyphens (very ugly).  Check your current browser on this simple test page now.

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 &plusmn;, &times; and &middot; respectively.  And don't forget the semicolons.

To use these codes in the text, select Text ¦ Insert HTML in NetObjects Fusion (with shortcut Cntrl/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 &ordm; (male) and &ordf; (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 &#x2642; (male) and &#x2640; (female) - surely more complicated than using &ordm; and &ordf; 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 "hd" (or large) class:

<style type="text/css">
p.hd { 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="hd">...</p> instead.

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

<style type="text/css">
p.hd { 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? .

When your page is ready to be published, submit it to the W3C Validator.  To do the same thing in Opera, right click on the page and select Validate.

If the W3C site is down or unavailable, try the excellent free program, CSE HTML Validator Lite v10.02 instead.  It is a 6.2MB download (cselite.exe) and features excellent explanations for errors and suggestions for correction.  It will show where missing end tags should go and suggest standard usage (such as width="100" instead of width="100px").  And finally, it will spell check too.

It was used to validate this page, but unfortunately gave the message:

The lite edition missed 1 error and 1 warning that the standard or professional edition would have found.

How did it know?  It must have the full program tucked away under the bonnet.  And what was the 1 error, I wonder?  Answers on a Postcard...

©2012 Bob Bäckström