Homepage | (Static sitemap) | ? Help |   Links | Contact us

 
 

Web design, HTML and CSS

Headings on this page :

1. Used on this site

  • Server Side Includes (SSIs)
  • Drop-down menus (DDMs) - JavaScript and CSS
  • Fixed (ie always visible) drop-down menus and tables of contents (ToCs/headings) (eg using CSS, position:fixed, JavaScript's onclick; and browser add-ons)  NEW
  • CSS - Fun with <hr> horizontal rules (lines)
  • CSS - Alternatives to using <hr> horizontal rules :
    - Using border-top to get dividing lines
  • <a> tag - Using an easily-altered symbol to indicate external links Updated
    • CSS attribute selectors eg:   a[target="_blank"] { ... }
  • JavaScript utilities for HTML tables - eg striping, filtering and sorting
  • Enlargeable images (eg using a:hover)
  • Images - float:right
  • Images - borders

2. General

  • Cascading Style Sheets (CSS)
  • CSS - Multiple class statements (eg class="xxx yyy")
  • CSS - The correct order of the four box sides (=top, right, bottom, left)
  • CSS - border shorthand property
  • CSS - <hr> =horizontal rule - gotchas
  • CSS - The <a> tag (hypertext links) - the correct order of selectors
  • CSS - names - use US-English spelling (eg gray)
  • CSS - class and ID names are case-sensitive; and case sensitivity generally
  • How to keep words together (=on the same line)
  • HTML and CSS - Syntax of comments
  • CSS - text-transform (changes the displayed case)
  • CSS - hiding elements by display:none or visibility:hidden
  • CSS - The :before and :after pair of pseudo-elements  NEW
  • Background colour of web pages
  • Web pages - body fonts - serif or non-serif? - and Verdana
  • Special characters - such as < > &
  • Web addresses
  • Regular Expressions (=regex =regexp) - for searching and/or replacing
  • Text in images on websites - it's not indexed
  • Software - web design programs  NEW
  • Software - webdes - Microsoft FrontPage and FPE (swan song)
  • Software - TopStyle (a program for Cascading Style Sheets - CSS)
  • Software - Abyss Web Server
  • Software - Xenu Link Sleuth (free link checker)
  • Software - Depeche View (searches files in RAM memory)
  • Browsers - text rendering (smooth vs jagged)
  • Browsers - refreshing - using the F5 and Ctrl-F5 keys
  • The .mht (.mhtml) web page format

Help (Computing/IT/web) : Related pages and Useful links [t]`

Introduction

Laptop computer

Below, we're adding some thoughts, hints, tips and gotchas - based on issues we've encountered.

We don't pretend to be 'world experts' in web design (webdes).  We do it in our spare time (unpaid).  We've focused on the 'core' things - like HTML, CSS, SSIs.
We've nervously started dipping our toes in the water with things like PHP and JavaScript.

Alas, we know next-to-nothing about whole areas of the subject - such as PERL, CGI, ASP, Java, Ruby, Flash, e-commerce.  We're keen to learn - but there's only so many hours in a day.

If you do web design professionally (full-time), we take our hats off to you.
You'll fall off your chair laughing at some of the amateurish things we've done on the website (but we have the best of intentions).

Note - List of headings (=Table of Contents for the page =ToC)

We've added a list of headings as usual - at the top of this page.
However (as an experiment) we've also added a copy of this list of headings to the right-hand side of the page.  This right-hand panel stays fixed to the screen, always visible wherever you are on the page.  Because it's an unusually long list, we've made it scrollable.`

On this page, this right-hand list of headings is done using an HTML iframe (position:fixed;).  We've used an SSI for the contents of the headings - so it can be used twice.  There's no JavaScript involved.

Related pages

  • See the Help page - on using the website - eg the drop-down menus, searching, browsing and related IT matters
  • See the Software page - there's an annotated list (a table) of around 90 software programs which we've found useful (eg utilities).  Most of them are free.  There are web links to the producers of the programs.
  • See the What's new page - search for the items marked '#webdes'
  • See the About images page
  • See the Style on the website page (on written English and presentation)

1. Used on this site

 

SSIs

Server Side Includes (SSIs)

If you're not familiar with SSIs, we suggest you try them out.  We use them all over the site.  They're a very useful way of embedding standard bits of web page into several web pages.  Examples: headers and footers.

SSIs are generic and free.  They work with all browsers - because they insert (ie 'include') the text into each page on the host's server computer before your browser downloads it (which is why they're called 'Server Side').

Normally, pages with SSIs have an .shtml extension (rather than .htm or .html).  This is because the host server computer won't scan a web page to check for SSIs unless it has an .shtml extension.  The initial "s" stands for server side include.

Below is an example of the code you embed in a web page to include an SSI :
   <!--#include file="ssi_footer.shtml" -->

You place this "#include" statement where you want it to appear in the "receiving" page.  You'll notice it's based on a bog-standard HTML comment statement, as follows  :
   <!-- xxxxx -->

"Included" files (such as the "footer" one above) use ordinary HTML and CSS.  However, because they're embedded in an existing page (usually in the <body>), you have to exclude any code that's already in the "receiving" page.  So, for instance, normally you wouldn't place an <html> tag or <head> information in an "included" SSI file.

You can give any name or extension to the "included" file.

You can nest SSIs - in other words have an SSI within an SSI (so long as the "receiving" page has an .shtml extension).

FrontPage 2000 allows SSIs but doesn't show them in WYSIWYG mode, alas.
However, Dreamweaver (eg v8) does show SSIs in Design (WYSIWYG) mode - phew.

PHP has equivalents of SSIs and it's more sophisticated.  Pages using PHP have a .php extension.  Like SSIs, PHP is generic and free.


Drop-down menus (DDMs)

DDMs

We use menus supplied by Milonic - a British company.  They're free for non-commercial websites.  They use JavaScript (JS).  The features are more sophisticated than with most other menu products.  However, Milonic have never produced a front-end program/interface to allow you to design the menus easily (eg WYSIWYG).  So you have to hard-code them in a text editor - which is tedious and time-consuming.  See the Help page for more information on the drop-down menus used on our site.

Unfortunately the text and links in JavaScript menus aren't picked up by search engines.  Also, 5-10% of people don't have JavaScript enabled - so the menus don't appear.  JavaScript menus are sometimes described as "DHTML" (Dynamic HTML).

Other suppliers of JavaScript menus include :

  • Likno (Greek) =AllWebMenus Pro
  • Sothink (SourceTek, Chinese) =Sothink DHTML Menu
  • Xara (British/German) =Xara Menu Maker
    This is a good product, but it hasn't been updated since around 2004 (it's still on version 1.1).
  • Xtreeme (Swiss) - eg DHTML Menu Studio

Nowadays there are good menus available which don't need JavaScript - they ingeniously use Cascading Style Sheets (CSS).  Typically, they rely on the ":hover" feature of CSS to expand and collapse the menu items.


Fixed (ie always visible) drop-down menus and tables of contents (ToCs / headings) *

Usually, with (a) the site menus described above, and (b) any table of contents (ToC) for a page, they're located at the top of the page - and their position is "static".  So, when you scroll down, the menu and/or table of contents disappear.  Of course, you can return to the top easily (eg by pressing the Home key).  This works fine for going to the site menu (in order to go to another page).  However, it's a pain for navigating within the page (using a table of contents) - especially if it's a long page.  We can see three solutions to this.

The 1st solution: HTML frames

Headings =Table of Contents (ToC)
frame
contents frame

In the early days of the Net (1990s) people got round this by using frames - they put their table of contents (with links) in a fixed frame panel.  Frames are an ingenious feature of HTML, which allows you to split the screen into two or more rectangular panels.  You can 'fix' any of the panels - so they don't move away (disappear) when you scroll up and down.  However, these days, frames are often frowned upon ('deprecated' to use the jargon).  Search engines have problems linking to them and indexing them.  Also, they can be difficult to print from.

Many other types of program use a similar-looking arrangement (of a ToC in the left-hand panel, and contents in the right-hand panel) - for example MS Word's outline facility, Acrobat, Windows Help, Windows Explorer.  It's so intuitive and ergonomic.  Simultaneously, you can see the contents and the table of contents.  There are a few hardcopy publications (eg books) which have a fold-out table of contents to give you this facility.

The 2nd solution: CSS

Nowadays, to some extent you can imitate frames by using CSS - especially by using the "position:fixed" command.  This "glues" a piece of web page to your screen.  You can define the exact position (X-Y coordinates) in pixels - with reference to two of the four sides - top or bottom, left or right.  Example: "top:20px; right:100px;"

We've been experimenting with this on some lengthy pages (to make navigation easier) - such as :

With the first few pages, we did it by adding a small strip containing a drop-down table-of-contents menu for the page, as follows :

  1. There's a small, coloured, 'position:fixed' strip at the top of the screen on these pages.
  2. Then we've added a CSS drop-down menu to the strip - and adjusted its contents to match the headings on the page.  It seems to work OK.
  3. Finally, we've added a crude facility to hide the strip temporarily - eg so it won't appear on any printouts.  So far we've done this hiding with JavaScript's onclick and ondblclick - using them to swap (toggle) the CSS class used in a tag.
    (Alas, we know next-to-nothing about JavaScript, by the way.)

Perhaps one of these days someone will point us in the direction of a ready-made utility that will do all this - perhaps a snippet of CSS or JavaScript code.

The 3rd solution: browser add-ons

Of the five main browsers, we know of two which have add-ons that do this sort of thing (Opera and Firefox).  These add-ons are more sophisticated and reliable than our amateur method.

However, the snag with these add-ons is that the user has to :

  • be using that browser, and
  • have the add-on installed, and
  • have it enabled.

But we can't dictate to people what browser (or add-ons) they should be using.  So, our menu strip gets round this problem - because it works with all browsers (because it's embedded in the web page).

Opera browser icon

The Opera browser's free add-on is a lovely extension, called "Table of Contents", designed by Dodo87    Wherever you are on a web page, you get a realtime-generated, unobtrusive (translucent), clickable list of all the headings on the web page, in the form of a drop-down menu - descending from the top right of the screen - when you hover over it.  It's especially useful with longer web pages.  We wish the author of this Opera add-on (Dodo) would develop versions for other browsers - and make a version that could be embedded in web pages.

Our home-made fixed menu strip described above is based on this Opera design.

Firefox icon

The Firefox browser's free add-on is also good.  It's called ' HeadingsMap'; it's by Rumoroso    It's similar to Opera's table-of-contents add-on described above.  However, it uses a permanently visible panel (on the left-hand side) - a 'sidebar'.  So it's more traditional-looking, resembling a frame.  If you're pushed for screen width (eg 800x600), you can straddle Firefox across two monitors, with just the HeadingsMap on the left-hand monitor.  By the way, the add-on has various options (by right-click) - eg it lets you collapse and expand parts of the headings.  The add-on's sidebar has a sub-heading called "Document structure".

You can also see a list of the headings on a web page via the Developer Tools in most browsers (built-in utilities or add-ons).


CSS - Fun with <hr> horizontal rules (lines)

We're experimenting with using 'border' to get dotted or dashed lines with hr tags.
It makes a half-hearted attempt at complying.  We better stick with our day jobs.

Our idea was to make the height zero (so the rule is invisible), then use border-top and/or border-bottom - which allows you to use a solid line - or dots or dashes.

Also, we found you can use CSS3's border-radius to round the ends.
This was more successful.

Example 1 - <hr> with thin dotted line
- see the lines between these web design sections on this page.

Example 2 - <hr> with thick solid line, rounded ends - see line below
(if you're using Internet Explorer, you need v9+ to see the rounded ends) :



CSS - Alternatives to using <hr> horizontal rules :
- Using border-top to get dividing lines

We've used this quite a bit on the website.
It's more flexible than an hr tag (given that hr only gives a solid line officially).
'Border-top' with tags like <h> or <p> allows you to make the line dotted or dashed.

Do it by inserting a border-top style in (say) an h or p or ul tag,
or doing it as a class (eg call it: .bt-line).
You can put the class in each tag, or in a <div> around a sequence of sections when you
want to have a line above each section.
Garnish with padding-top and/or margin-top as needed
(so you get the right height of white space above and below the line).

Example - (a) the code :
<h5 style="border-top:1px dotted #739718; padding-top:8px;">[text...]</h5>

Example - (b) the code in action (giving the green line above the 'Happiness' heading below) :

Happiness, contentment and inner fulfillment

Border-top also has the advantage that it prints out with browsers.
By contrast, it seems that <hr> horizontal rules don't print out by default.


<a> tag - Using an easily-altered symbol to indicate external links   

Note - Please forgive us if you think our efforts below are a sledgehammer to crack a nut.  Bear in mind that part of our reason for doing it was to learn more about HTML and CSS - and we enjoyed experimenting.

There are two types of links on a website :

  • Internal - they go to pages within the website
  • External - they go to other websites

Typically, external links are configured so they open in a new browser window (this is done by using target="_blank" in the <a> tag).  Out of courtesy to users, many sites indicate this somehow - by using (say) a symbol - immediately after the underlined link text.

Over the years we've tried out different ideas to achieve this.

Method 1 - text characters

Our earliest method was just a red-coloured chevron (arrow) of two 'greater-than' text characters thus:    >>         Example:  www.gov.uk >>

Initially, with each occurrence, we just typed the two 'greater-than' characters, then made them red and bold.

Later, we used a CSS style to give the color and bold.  Obviously this made it more flexible - we could now instantly change their appearance across the site by making one change in the external style sheet.  However, we were stuck with the >> symbol.

Method 2 - an image

Later on, we used a GIF image of two red arrows, thus:  Arrows     Example:  www.gov.ukArrows

We named the image: "extlink.gif".

Pros:
1.  It looks nicer than the >> symbol.
2.  You can change the image easily - by changing the image called 'extlink.gif'.
This allows you to change the shape of the symbol, its size, colour etc.

Cons:
1.  Inserting the image is more time-consuming than method 1.
2.  You're stuck with the filename and file type.
3.  On the face of it, you can't use CSS to style it (unless you add a class="xxx" to each occurrence of the image).
4.  You're stuck with using an image to indicate each external link
5.  You can't change the position of the indicator (it's immediately after the link)

Alternatives

We kept looking out for a "better" way of indicating an external link.  Inspired by the principles of CSS, we were looking for :

  • a more versatile way in which you could make a change in only one place (the master copy) - and this would change it across the whole site
  • a quicker-to-type (shorter) piece of code used to indicate each external link

Options :

  • We considered doing it by adding a class to each <a> tag
    eg by:  <a class="extlink" href="... >
  • We ruled out using a server-side include (SSI) - it would work, but we felt it was overkill.
  • We knew nothing about PHP.
  • We knew nothing about XML or XHTML.
  • We ruled out CSS's :before and :after pseudo-elements (with reluctance) - because (at the time) many browsers ignored them.
  • We were doing it way before HTML5 and CSS3 appeared.
  • We could do it by an automatic find-and-replace across the entire site. 
    But we're always reluctant to trust this method.

Eventually we came up with the eccentric method below (which we've used successfully for several years) . . .

Method 3 - using a bit of <var> code (to give the image)

We place the following peculiar bit of code immediately after the end of each </a> closing tag :

<var>&nbsp;&nbsp;</var>

You can see it's a pair of <var> tags with two non-breaking spaces (NBSPs) in between.  (It doesn't work if you use ordinary spaces.)  It's easy to remember - and it's short and quick to insert.  It's 23 characters, but needs only 13 keystrokes (or a single macro). You don't need to add a class="xxx" statement to it - or an image.

'var' stands for 'variable'.  The tag is intended to be used for styling variables in program code listings on a web page.

Our choice of the <var> tag was arbitrary - see the list below of several other little-used tags which we could have chosen instead - eg <tt> or <kbd> or <code>

By default, our bit of <var> code above just displays as two spaces.
However, in our external CSS style sheet we've redefined the standard HTML var element.
We've told it to use a background image (no repeat) of two red arrows thus:    

This method works nicely - allowing you to change the image easily :

  • Our <var> code (see above) embedded in each page is neutral/generic.
    It doesn't have to be altered.
  • To alter any aspect of the image, you can do it by changing it in one place - the external CSS style sheet.  You can change the image (the actual image - and its name and file type), padding, margins etc.
  • By using display:none; you can even turn it off (hide it).

This solves the problem with CSS that you can't normally change content across a site - you can only change style (size, colour, layout etc) of existing text characters, images and the like.  However, by using an image (as a background), we found you could get round this limitation.  Ironically, we've never yet changed the image that we first used.

In the web design programs we use, initially we found a slight problem with our bit of <var> code - the arrows image (background image) doesn't show up in design mode.  However, we got round this by using CSS's text-decoration:line-through; on the <var> to give a reassuring short red line in design mode (where the arrows image would appear in your browser) thus:      

The next issue was how to ensure that this red line doesn't appear in the page when you browse it.  So we added a text-decoration:none; item to <var> via the page header SSI.  This eliminates the red line when you browse the page.  You just see the image of the two red arrows thus:   

By the way, if you don't eliminate the red line, it looks like this:    
OK, it's not that bad - but we wanted to get it right.

Method 4 - using the :before or :after pseudo-elements

These two innovative pseudo-elements are another way of changing content with CSS. 
Further down this page we've added a section on our experiments with this pair of pseudo-elements - eg to insert a date in several places.

So, to get our arrows image (indicating an external link) you use (say) :after with (say) <var></var>.  You insert <var></var> wherever you want the arrows image.
You select them in the external style sheet by:   var:after {...}
Then, when you browse the site, you see the arrows image immediately after each empty <var></var> tag pair.

Instead of using a dedicated tag (like <var> or <tt>) you can do it by a class in an empty inline element such as <span> or <b> - eg <span class="extlink"></span>
This takes a bit more typing - but it doesn't 'use up' an HTML element.
You select them by:   span.extlink:after {...}

Later we discovered "CSS attribute selectors" (see below).  By using these with the :before and :after pseudo-elements, we found that you can avoid the need to add any tags at all (var, span, b or whatever).

Method 5 - using CSS attribute selectors - eg by a[target="_blank"]

Recently we remembered that we only added our bit of <var> code when there was a target="_blank" in the <a> tag.  We pondered this and thought :

"Wouldn't it be nice if CSS allowed you to select only those <a> tags that had a target="..." or target="_blank" attribute in them (in the same way as you can select only those tags that have a particular class or ID in them)."

Then you could put code in your style sheet to style these <a> tags to indicate they were external links - eg using our arrows image.  Then we wouldn't need our bit of <var> code.

We searched Google - and crawled under the table with embarrassment when we discovered that this facility is already in CSS (CSS2).  We found the following article (by Chris Coyier) : http://css-tricks.com/attribute-selectors/  

It's a nice tutorial - with a list of "CSS attribute selectors" (going from the simplest to the most complex).  We've modified it below to give appropriate examples :

  1. a                    Example:  a { background-color: yellow; }
  2. a[target]        Example:  a[target] { background-color: yellow; }
  3. a[target="_blank"]
  4. a[target~="_blank"]
  5. a[target|="_blank"]
  6. a[target*="_blank"]   =CSS3
  7. a[target^="_blank"]   =CSS3
  8. a[target$="_blank"]   =CSS3
  9. a[target="_blank"][href*=".org"]
  10. [target]

See Chris Coyier's article for further explanation - eg using the five characters:  ~ | * ^ $
Our examples above refer to the <a> tag - but the same logic applies to any tag (eg <h1> <p> <hr>) and any attribute (eg href=  name=  width=  alt=  title=  class=  id=).

We've been experimenting with these "attribute selectors" and found they work well with almost all popular browsers nowadays.
(The main failures are with old versions of Internet Explorer - all versions before IE8.)

We've successfully used attribute selectors to indicate external links :

  • using the :after pseudo-element, and
  • without using :after

We've now applied this "attribute selector" method (with :after) to a number of pages on the site to produce the arrows image immediately after external links - for example on this 'Web design' page.

We did this by adding the following to the style sheet :

  •  a[target="_blank"]:after {content:url (...extlink.gif); ...}

Our bits of <var> code after each </a> tag are still present on each page - but we've disabled them by adding var {display:none;} to the style sheet.

We've simplified it so that we can make a page switch from using the default of <var> to 'attribute selectors' - just by placing a class in the <body> tag of the page (class="extlink-symbol-by-after").

At the moment, when you look at an external link on the site, you can tell which method is producing the arrows image as follows :

  • Where the arrows image is produced by the <var> method, the underlining doesn't continue under the arrows image.  Example:  www.gov.uk  
  • Where the arrows image is produced by the attribute selector (with :after) method, the underlining continues under the arrows image.  Example:  www.gov.uk  

Appendix - other possible tags (similar to <var>)

There are a dozen or so 'obscure' HTML tags like var which we never use - and perhaps could be dedicated to a one-off use like the one described above.  Below is our list (so far unfinished) of some possible tags (use them at your peril) :

  • <code>Defines a piece of computer code</code>*
  • <var>Represents a variable in a mathematical expression or a programming context</var>*
  • <kbd>Defines keyboard input</kbd>*
  • <samp>Defines sample output from a computer program</samp>*
  • <tt>Teletype</tt>  tt stands for Teletype
     
  • <dfn>Defines a definition term</dfn>
  • <pre>
    Preformatted text
    </pre>*
  • <pre>
    xxxxxxxxxx
    </pre> - with block (the default) overridden by display:inline; *
  • <small>Smaller text</small>
      
  • <abbr>Abbreviation</abbr>*
  • <acronym>Acronym eg TLC</acronym>*
  • <address> (contact information)
  • <bdo> (text direction ='bidirectional override')
  • <cite> (title of a work - eg a book)
  • <del> (deleted text) ?
  • <ins> (inserted text) ?
  • <sub> (subscripted text) ?
  • <sup> (superscripted text) ?
      
  • <dl><dt><dd>Definitions list</dd></dt></dl> ?

Beware - We haven't finished the list above yet.  Treat it with caution.`
With some of the tags above we've included demos - these are marked with an asterisk *.

There are various issues with the tags (elements) listed above :

  • Some may be used more often than we're aware of - eg <del> and <ins> ?
  • Some of the tags' defaults are block (eg <pre>), some are inline (eg <tt>)
    - we're after inline elements
  • One or two may not have a closing tag ?
  • Some may be deprecated (frowned upon) nowadays
  • Some may not work with certain browsers - eg <acronym>
  • The list of tags is finite - compared with (say) user-defined CSS classes and IDs

Using <tt></tt> and ':after' to display a blue bullet image

As an experiment, we've begun using the <tt> (=Teletype) element (with styling via :after in the external style sheet) to add a blue bullet image :

  • at the start of some lines (without needing to use a <ul> list) and
  • in the middle of some lines:  * like this line
    - see examples on the homepage

* Wherever we want the bullet, we just add:  <tt></tt>
* So far it seems to work OK.
* This paragraph is an example of it in use.
If and when you want to change all the bullets, you just alter the definitions of tt and tt:after in the style sheet file.


JavaScript utilities for HTML tables - eg striping, filtering and sorting

We've tried several ready-made script utilities for tables :

  • Some are more difficult to understand (eg requiring serious knowledge of JavaScript).
  • Some are more sophisticated than others.
  • Some are more fiddly to insert into a website.

Most are free.  Alas, the best one we found is paid-for software.  It's called TableTools   by Mingyi Liu.  A nice, cut-down version of it is available as a free add-on for Firefox.

So far, we've used only one table script on the site - it's called 'HTML Table Filter'.  It's produced by Max Guglielmi (French).  It's free.  We've added it to several tables.  There's a certain 'wow' factor to it - for people like us who are mainly used to static HTML.

The utility allows you to type a search request into form boxes at the top of a table.  The script then temporarily 'collapses' the table dynamically (=filtering) - so it only displays the rows which match your search request (the search subset).  Examples :

These tables have many rows (100 to 300 each).  With long tables like these, this type of utility is genuinely useful.  It adds an interactive database-type facility - albeit rudimentary.

We've upgraded to version 2.4 of Table Filter.  This allows searching using Regular Expressions (regex) - a nice facility.

To make the filtering more effective, we've been editing the data in each table to allow more reliable selection (filtering) - by adding indexing terms, and beginning to use a simple standardised/controlled vocabulary cum thesaurus.

For example, in a static table, you can get away with synonyms - such as "Eire" for one entry and "Irish Republic" for another.  However, once you add a table filter, it pays to choose only one term for a concept and stick to it.  Then the user can search for just one term (rather than having to remember to search for 'Eire OR Irish Republic').

The two scripts above also allow the user to sort a table (by any column).

For an interesting discussion about the pros and cons of zebra-striping of table rows see:
www.edwardtufte.com/bboard  


Enlargeable images (eg using :hover)

There's a skill to choosing the right size for an image on a web page (the height x width dimensions).  However, often you need two sizes - (a) the default and (b) a larger size to allow you to see more detail now-and-again.  You can do this in various ways, such as  :

  1. Using an <a> link tag to show the image file itself (enlarged).
    It's simple to add to a web page and it's reliable.  But it requires the user to :
    (a) click on the image (causing a new browser window to open)
    (b) click to enlarge the result, and then
    (c) close the window afterwards.
    Example:
    <p><a href="leaflet.jpg" target="_blank"><img src="leaflet.jpg"></a></p>
  2. Using the :hover facility of HTML.
    This enlarges the image just by hovering your mouse over it.
    ':hover' is an unusual (but lovely) dynamic facility built into CSS (akin to JavaScript).
    Its original use was merely for hypertext links (using the <a> tag).  However, it's surprisingly versatile and it can be used in other, innovative ways (eg even to create drop-down menus without JavaScript).  We've used ":hover" in two (simple) ways for enlarging images :
    • using a:hover and an <a> link tag around the image, or
    • using img:hover - this seems to be easier and simpler than a:hover
  3. Using JavaScript - typically this too enlarges the image just by hovering your mouse over it.
  4. By inviting the user to increase the magnification of the page - eg to 200%.
    Ways of doing this include :
    • changing your browser's View menu settings
    • turning the scroll wheel on your mouse whilst holding down the Ctrl key or similar
    • using free browser add-ons which allow you to enlarge just the image (eg Firefox's 'Image Zoom' add-on)

We've used all these methods on the website - except number 3 (JavaScript).

We've added method 2 (:hover) to various images (using our own rudimentary coding).  It seems to work OK in most browsers.  It has the advantage that it only uses HTML and CSS - there's no JavaScript.  For example we've used it on some images of collection leaflets.

Alas, with our original :hover method, the surrounding text etc re-aligns temporarily when the image enlarges.  However, we've since found a simple way of avoiding this problem - by making a container - using float, width and height, overflow:visible and position:relative.`


Images - float:right

Laptop computer w431

We're fond of putting images on the right-hand side.
Like many people, we do this using CSS's float:right.
To achieve this, we created a class called .floatr - which includes a float:right statement.
Then we added a few things to the class - eg margins and styles for text captions.

Rightly or wrongly, we just put a class="floatr" statement in a <p> tag containing the image - and it works.`


Images - borders

There are more important things in life.  However, like many people, we agonise over whether to have borders around images.  In the end we hit on a compromise.  We realised there are three situations :

  1. some images definitely do need a border
  2. some images definitely don't need a border
  3. with the remaining images, it's arbitrary and down to taste

Our solution was to create a class for each of the two extremes (ie 1. and 2. above) :

  1. .imgborder is used when errr... an image does need a border - eg because it's pale.
  2. .imgnoborder is used when an image would look very odd if it had a border added - for instance :
    • if the image already has a border in its picture, or
    • if it's a .GIF or .PNG with a transparent background - eg: Plus icon

We add the class to the class statement in the <p> tag.
Example :  <p class="floatr imgborder"><img src=...

Then we went through all the images adding one of these two classes if appropriate.

This then allows us to apply a border (or not) to potentially all images on the site via the external style sheet, knowing that those images with .imgborder or .imgnoborder classes won't be affected.`


2. General

Cascading Style Sheets (CSS)

CSS

If you're designing a website but only using HTML, you're missing out.  CSS is extremely powerful and elegant.

Firstly, it gives you extra facilities (not available in HTML) - for example it allows you to have different designs for the four sides of an object (top, right, bottom and left).

Secondly, it allows you to apply styles to many objects in one go - on one page, on several pages or even on all pages of your website.  This makes it much easier and quicker to change the design of a site.

Versions:  From 2000 to 2010, CSS was on version 2 (=CSS2).  However, around 2010, version 3 was introduced (=CSS3).  This adds many new features - eg rounded corners (=border-radius) and the text-shadow and box-shadow properties.  However, some recent/current browsers don't yet support CSS3.  For example, Internet Explorer 8 doesn't recognise rounded corners.

Coinciding with the introduction of CSS3 is the launch of HTML5.
This adds a number of new tags - eg header, footer, section.

See :


CSS - Multiple class statements (eg class="xxx yyy")

  • With <> tags, generally, people know the rule (limitation) that you can't have more than one class="xxx" statement (and/or one style="zzz" statement) in a tag.
  • The style statement limitation is OK - because most people know you can put two or more items in it, separated by semi-colons.
  • However, very few books tell you that you can get round this limitation with class statements too.  You can put two or more class names in a single class="xxx" statement - so long as you put a space between each - eg:  <p class="wider-box taller-box">
    We discovered this facility only recently.  Until we discovered it, we had to use all sorts of bodges to get round it.

CSS - The order of the four box sides

The sides have to be in the following (clockwise) order :

  • top, right, bottom, left
    - think of it as equivalent to a clock face with midnight, 3am, 6am, then 9am
  • eg: padding: 20px 10px 20px 10px;

CSS - border shorthand property

Don't forget the rule that the three items have to be in the following order :

  • size, style, color - eg:  img {border: 1px solid gray;}

CSS - <hr> =horizontal rule - gotchas

  • You need to include background-color as well as color (=foreground colour)
  • You need to set border:0px

So the full list is :
* border
* color
* background-color
* width
* height
* text-align


CSS - The <a> tag (hypertext links) - order of selectors

Remember that the selectors must be in the following order: "LVHA" :
a:link  a:visited  a:hover  a:active


CSS - names - use US-English spelling (eg gray)

Remember to use US spelling (things won't work if you use British spelling).
Examples (US spelling):  gray, color, center, capitalize, license, dialog


CSS - class and ID names are case-sensitive; and case sensitivity generally

Beware - with most browsers, CSS class (and ID) names are case-sensitive (unlike almost all other HTML and CSS).  Example: .box versus .Box

Similarly, beware of case sensitivity with file extensions on websites.  For instance some image programs will add extensions in upper case - eg ".JPG".  However, if your web page <img> tag refers to it in lower case (as ".jpg"), you'll find that, once you've uploaded it, the image isn't recognised (at least with Linux hosting).

Also, with XHTML, pages are supposed to use only lower case for all HTML element and attribute names (because XML is case-sensitive).


How to keep words together (=on the same line)

  • HTML:  Use a non-breaking space character between them:  &nbsp;
    (Ctrl-Shift-Space gives this character in some programs - eg Dreamweaver)
    • Example: John&nbsp;Smith
      (a non-breaking space fails after a hyphen though)
    • A non-breaking space can be used to get two or more spaces in sequence
      (bearing in mind that web pages ignore all conventional spaces except the first one).
    • Also it's useful instead of a standard space in otherwise-empty lines
      or table cells (some browsers ignore standard spaces).
  • HTML:  Use "nobr" (= 'no-break') tags around the words: <nobr>...</nobr>
    • Officially this is frowned on ('deprecated') but it works fine.
    • It's useful when there are many spaces in a sequence of words
      or when there are any hyphens.
    • You're not supposed to put certain tags within nobr's - eg <b> bold.
  • CSS:  Use white-space:nowrap;

HTML and CSS - Syntax of comments

Remember to use the correct type of comment - depending on whether you're in HTML or CSS :

  • HTML:  <!--  comment text...  -->
  • CSS:      /*  comment text...  */

Also, you're not supposed to nest comments (ie comments-within-comments).


CSS - text-transform (changes the displayed case)

Occasionally "text-transform" can be useful (eg with ditherers like us).  It can be used to display text UPPERCASE, lowercase or Capitalized.

For example, if you can't decide whether to have your <h2> headings UPPERCASE or lowercase, type them in sentence lowercase eg "Nirvana".  Then, if you decide later to make them all UPPERCASE, just add h2 {text-transform:uppercase;}  This makes them all appear UPPERCASE at-a-stroke, without having to edit the text in each heading.  If you ever decide to change them back to lowercase, just delete (or disable) the text-transform statement.


CSS - hiding elements by display:none or visibility:hidden

'display:none' is useful on occasions.  For example, if you want to experiment with using <hr> horizontal rules on a page, do it as follows.  Add all the hr tags, then you can hide them at any stage thus:  hr {display:none;}

Note: Don't confuse with visibility:hidden
This also hides elements, but they take up the same space as before (a bit like redacting confidential items in a document by using Tippex whiteout).

Beware - both these methods of hiding may not stop search engines and Ctrl-F/F3 finding the text in any items.


CSS - The :before and :after pair of pseudo-elements *

The :before and :after pair offer an unusual, powerful facility.  They're part of CSS2.

We've experimented with them briefly - to produce the copyright date (year) on a few pages.  This allows us to update the year on several pages at once by making only one change - in the site's master CSS style sheet file.  Demonstration :

website ©  CharityBags

In the demonstration above, the 4 digits of the year are inserted by your browser.
To achieve this, we added two bits of code, thus :

1.  The following entry in the CSS file :

  •  .current-year:after { content: '' }
     
    The line above instructs your browser to insert '' after every object that has the .current-year class.

2.  The following piece of HTML in each web page where we wanted the year :

  •  <p>...website &copy; <span class="current-year"></span> CharityBags...</p>
     
    In the line above, the "current-year" class in the empty <span...></span> tag-pair causes the year to appear immediately after it (so the year is sandwiched between the copyright symbol and "CharityBags").  We used <span>, but presumably other tags would work fine - eg <b></b>.

As its name implies, CSS is normally about style - in other words appearance (colour, size, position, font, borders etc).  However, the :before/:after pair allow you to use CSS to alter the content.  They seem to offer you an equivalent of a Server Side Include (SSI) - at least for a short bit of text of one line or less.  It's like a variable you use in (say) a spreadsheet.

Also see our section above on using a background-image (of arrows) in a <var>   </var> pair of tags.  This also allows you to change content with CSS.

Another example :

Add the following to a CSS <style> section:   h1:before {content:'Report 1 - ';}
Result:   You get the text 'Report 1 - ' inserted before every h1 heading element.
So a line saying  <h1>Introduction</h1>  will display as  'Report 1 - Introduction'

As well as text, you can use :before or :after to insert an image - eg :

  •  h1:before { content: url(smiley.gif) ; }

You can mix-and-match an image and text - eg :

  •  p:before {content: url(bullet.gif) ' ' ; }
    This gives an image followed by text (between the single quotes - a space in this case).

However, we've been cautious about using :before/:after because of several snags :

  1. They don't work with Internet Explorer before v8.
  2. When they don't work, you lose content (text etc) - not just cosmetic appearance.
  3. They don't show up in Dreamweaver v8's code or design modes.
  4. You can't grab the inserted text via copy-and-paste in Firefox (v23) or Chrome (v28).
    - it's weird - try it on the "website © CharityBags" text demo above.
    However, it does copy OK in Internet Explorer v8 and Opera v12.16.
    See our table on this below.

Bearing in mind snag '2' above, for now we're tending to avoid using the pair for text.  We're restricting their use to 'cosmetics' - style, images etc.

Also see our section above on using another pseudo-element - :hover (to enlarge images).

See Learning to use the :before and :after Pseudo-Elements in CSS  
- article by Louis Lazaris (Toronto)

 
A postscript - CSS ':after' text in browsers

Below is the result of an experiment we did :

  • All the five browsers showed the ':after' text - phew.
  • Only two browsers allowed you to copy the text.
  • Only one (Opera) picked it up by 'Find'.
  • We were surprised by IE8 - we expected it to allow Find, given that it allowed copying.
  • The 'Highlighting' column below refers to the highlighting of text when you drag your mouse over it.
  • We'd like to see all the browsers getting a 'YES' in the categories below.
Browser Ctrl-C copying Ctrl-F Find Highlighting
Internet Explorer 8 YES No YES
Firefox 23 No No No
Google Chrome 28 No No No
Opera 12.16 YES YES YES
Apple Safari 5.1.7 No No YES

Background colour of web pages

The HTML default is white (#FFFFFF) - like this sentence. 

However, most users find this too bright and dazzling after a while.
So it's best to "soften" it - by using :

  • off-white (eg pale grey such as #F8F8F8, or cream) or
  • a pale/pastel colour`

Web pages - body fonts - serif or non-serif?

Examples :

This is serif text.  THIS IS SERIF.  This is serif.

This is non-serif text.  THIS IS NON-SERIF.  This is non-serif.

With print (paper hardcopy), most evidence indicates that serif (eg Times New Roman) is more readable than non-serif.  So, initially we stuck with serif for the website.  Serif is the default for HTML.

However, we guess that around 98% of sites now use non-serif for body text.  It's seen as "modern".

So, eventually (with reluctance) we gave in to fashion and switched to non-serif on the site.

Later we discovered some reassuring research showing that, with screen fonts, non-serif is more readable than serif.

Although non-serif is the norm for body text on websites, most commentators say that serif is good for headings.

Some sites provide a printer-friendly version of web pages.  This version often uses serif.

Choice of non-serif font - Verdana?

There are several non-serif fonts in common use on websites.  With web design, normally you specify your preferred font, followed by a list of alternatives - as a pecking order.  When someone browses your website, their browser program (eg Firefox) attempts to display the first font you specified.  If it's not available, it works its way through your list of fonts (from left to right) until it finds one that it can display.  When last seen, we were specifying the following:

  • Verdana, Arial, Helvetica, 'MS Sans Serif', sans-serif

Our first choice here (Microsoft's Verdana) is a controversial font - larger and wider than most.  It was a while before we noticed that our tables were displaying in Arial.  We assume this is due to the odd feature of HTML by which text in tables has to be defined separately from normal body text (ie in <p> tags etc).  Example (Verdana versus Arial) :

  • 0123456789 This line is body text.  This line is body text.  hopefully Verdana
  • 0123456789 This line is body text.  This line is body text.  hopefully Arial

For more on these font issues, see :


Special characters - such as < > &

Don't forget that certain characters are not supposed to be included 'raw' in the code of a web page.  Examples:  < > & £ "  

Instead you need to use special character sequences to represent them.  Thankfully they're easy to remember - they're obvious abbreviations.  They begin with an ampersand "&" and end with a semi-colon ";".  Examples :

  • the Less-Than (=LT) character "<" is represented by &lt;
  • the Non-Breaking Space (=NBSP) character is represented by &nbsp;

Most web design programs do this conversion for you in WYSIWYG mode.
It's mainly a problem when you're editing raw code (eg in code mode or in an ASCII text editor).


Web addresses

Strictly speaking, links to websites (eg in an <a> link tag) need to have a terminating slash eg :

<a href="http://www.microsoft.com/"> ...

However, you don't put a slash if it ends with a webpage filename and extension - eg ".../index.htm"


Regular Expressions (=regex =regexp) - for searching and/or replacing

These allow you to do much more sophisticated searching (and/or replacing).
Regex uses pattern matching - it's based on modified (enhanced) versions of the ubiquitous "?" and "*" wildcards.

Alas, many programs don't include regex.  Also, the regex syntax (language) takes a while to get used to - and there are several different varieties of regex (eg PCRE).

Unfortunately, regex tends to be associated only with programming and/or Unix.  But it's equally useful for ordinary "end users" (including us).  Dreamweaver includes regex.

For more on regex, see :

  • Wikipedia's page on regex  
  • regex books by Eric Meyer
  • software by JG Soft - eg EditPad Lite (free), EditPadPro, RegexBuddy, RegexMagic, PowerGREP
  • Mythicsoft: Agent Ransack (free) and FileLocator Pro (British)
  • voidtools 'Everything'   - an indispensable, free hard-disk indexing/search program (Australian)
  • Mike Funduc's website and software (some free)
  • Ultrapico: Expresso - a free regex program
  • Using regex in Microsoft Office (Word) 97, 2000 and 2002  
    MS Word has a modified version of regex hidden in its Find / Find-and-replace facility.  It's powerful but quirky.

UK population table
Table (image)

Text in images on websites - it's not indexed

Remember that any text in images on websites is just a "photograph" - so it isn't indexed by search engines.  Examples :

  • our screengrab (image) of Wikipedia's UK population table on the Statistics page
    - and see copy here >>
  • various images we've used of clothing collection leaflets/flyers.
    In several cases, we've manually typed the text and put a copy next to the image.  For examples, see the page: A selection of clothing collectors (A-Z)

However, sometimes it can be to your advantage that text in images isn't searchable.  Examples :

  • to display an email address which you don't want spammers to harvest
  • We came across one person's website where he said he had unwittingly made a libelous statement.  He was told to put an apology on his website.  So he got his revenge by cunningly doing it as an image - so it wouldn't be indexed by Google etc.

Laptop computer keyboard


Software - web design programs

Currently, well-known programs include :

  • Adobe Dreamweaver (previously by Macromedia Inc) =DW
    This is the 'Rolls-Royce', industry-standard program (cost: around £300)
  • Microsoft Expression Web
    - a new program; it competes head-on with Dreamweaver
  • Serif WebPlus (British) - it has a DTP feel to it
  • Namo Web Editor
  • NetObjects Fusion
  • Mr Site (British) - it includes a free web address (=domain name) and hosting
  • HTML Kit (free, non-WYSIWYG)
  • Nvu (free, open-source software, WYSIWYG, based on Mozilla Composer)
  • Kompozer (free, open-source software, WYSIWYG)
    - closely related to Nvu

Programs which have been discontinued include :

  • Microsoft FrontPage and FrontPage Express (see below)
  • Adobe Page Mill
  • Adobe GoLive
  • HotMetal Pro
  • Mozilla Composer

Some word processing and DTP programs include a web design facility - eg Microsoft Word, Open Office, Serif PagePlus.

ASCII text editors can be used to produce web pages - but it's painful because there's no WYSIWYG facility.  For example, try inserting a table manually (with fiddly tr's, td's etc).  Text editors include Microsoft Notepad and EditPad Lite/Pro.  Mercifully, some text editors have aids for web design.


Software - webdes programs - Microsoft FrontPage and FPE (swan song)

Colour hexagon used by FrontPage 2000
The attractive colour-selection hexagon
used by FrontPage 2000

All being well, we've now permanently moved away from FrontPage as our main web editor.  We look back on the package with mixed feelings.

FrontPage Express (FPE)

We started with FrontPage Express (FPE) (dated about 1998) - which was free with Microsoft Internet Explorer around version IE5, with Windows 98SE.  FPE was a sweet program and it was very powerful at the time - for freeware.

Bundling - Oddly, FPE was never given away as a standalone program - it was always part of the Internet Explorer browser bundle (which also included Outlook Express).  We found one reputable, non-profit educational website (South African) which has/had a special modified version of FPE - which was standalone.

Lite and Pro versions - In part, FPE was meant to seduce you into buying its "pro" version - called FrontPage.  This had an identical design, but was more sophisticated.
(Note:  Microsoft did the same thing with MS Works versus MS Word - if you look at the menus in the word processing module of MS Works, you'll see it is/was an exact replica of those in Word - but with certain items missing.)

FrontPage (FP)

In due course, we upgraded from FPE to the full (paid-for) version - namely FrontPage 2000 (FP2000).  We used this program for several years for the website.  We were fond of the program (warts and all).  FP2000 was upgraded to FP2002 and then to FP2003.  Then (alas) Microsoft discontinued it.  So there are fewer and fewer people using it nowadays.  FrontPage was marketed as part of the Microsoft Office suite.  Around 2005, Microsoft launched "Expression Web" as the successor to FrontPage.

"FrontPage Server Extensions" (FPSEs) - By and large, these are an annoying peculiarity of FrontPage.  They're non-standard (=proprietary, not generic) - and they're rather frowned upon.  Most of them require the company hosting your website to buy expensive Extension software off Microsoft.  So, some hosting companies charge you a lot more if your website uses the Extensions.  With our website, when using FrontPage we were careful not to use these Extensions.

Microsoft made it difficult for you to find out which features on the menus were (a) generic HTML, rather than (b) proprietary MS Extensions.  We found out that some of the Extensions (bots) didn't affect hosting (thankfully) - but it was an uphill struggle to ascertain this.

To allow its Server Extensions to function, FrontPage has an eccentric habit:  Whenever you create a new web page, FrontPage also creates another file with the same name.  These 'shadow' files are stored in sub-folders called "_vti_cnf".  They're small/token files which store configuration information.  The "vti" part stands for Vermeer Technologies Incorporated - the company which created FrontPage.  VTI was taken over by Microsoft (around 1998).

Unfortunately, FrontPage 2000 was unable to show server side includes (SSIs).  You can tolerate this with headers and footers, but it's a critical handicap elsewhere in a page.  By contrast, programs like Dreamweaver show the SSIs embedded in design mode, almost indistinguishable from the page's 'real' text - it's marvellous.

HotMetal Pro - In the early days, we dabbled with this web design program.  Alas, it was discontinued (around 2001).


Software - TopStyle (a program for Cascading Style Sheets - CSS) *

This is a well-established, elegant program (it's on version 4 at 2012).  It's the best and most well-known CSS program.

  • It was started by Nick Bradbury (Bradsoft).
  • Later, it was owned by NewsGator Technologies Inc.
  • Since Dec 2008, it's been owned and developed by Stefan van As.

Until recently, it was available in two versions - TopStyle Lite (free) and TopStyle Pro (paid-for).  TopStyle Lite is no longer produced (the last version of this was about v3.51).

TopStyle Pro used to be a time-limited trial - which you could make permanent by purchase. The trial of the current version (v4) has no time limits.  Instead, it's a function-limited trial (eg a maximum of two style definitions) - until you pay for the full version.

There's a Wikipedia page on TopStyle  


Software - Abyss Web Server

This server software is excellent (and free).  It allows you to test out your website on your own PC, without having to upload it to your host (by FTP).  It includes support for Server Side Includes (SSIs).  There's a posher, paid-for version available.

To use the program, you type "http://127.0.0.1" into your browser's web address bar.  Then the browser views 'local' files - ie those stored on your computer.


Software - Xenu Link Sleuth (link checker)

This is an excellent free program for checking/analysing links on a website.


Software - Depeche View (searches files in RAM memory)

It's produced by Vincent Stahl.  There's a free (Lite) version.  It's an unusual and extraordinary program.  It allows you to load into RAM memory, all the files in a folder branch - and then search them instantaneously (in sophisticated ways).  The file contents are visible and colour-coded - and you can toggle the filter view (to collapse and expand the display).  Searching is incremental (realtime) as-you-type.  You can load thousands of files at a time.  We find it very useful for searching all the website's files when checking the site (or changing something).


Browsers - text rendering

Alas, we've found the same text (Verdana) is thinner (and less readable) in Firefox and Opera - compared with MS Internet Explorer and Chrome.  It's less dark, more spidery and jagged - eg with italics.  This is frustrating, because Firefox is so versatile - with loads of add-ons, extensions and the like.  It seems you can't have your cake and eat it.


Browsers - refreshing - using F5 and Ctrl-F5 keys

When people visit a web page again, browsers often present them with an out-of-date cached page (stored on their hard drive in the "Temporary Internet Files" branch) - rather than the latest "live" copy available on the Net.  This is unhelpful.

Solutions:  You can force the browser to download a copy off the Net live (once you're viewing it), by pressing the F5 function key ("refresh").
Even this fails sometimes.  Normally you can solve this by pressing Ctrl-F5.

The favicon.ico icon file (shown on browser tabs) is notorious.  Some temperamental browsers won't show the latest version for several days - however many times you press Ctrl-F5.

Web designers can get round this problem by placing the following meta code in the <head> of each page :
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">

This forces the browser to ignore the cache.  Also, it doesn't rely on the user having to press the refresh key.  However, it has some disadvantages - eg unnecessary refreshes, which slow down browsing.


The .mht (.mhtml) web page format

  • This is a nice portable, all-in-one-container, file-format from Microsoft - you can save web pages in this format with Internet Explorer.
  • However, beware - there's a bug.  If you have a hash "#" in the pathname to one of these files on your hard drive, you get this error message: "The address is not valid"- and you can't view the file.  Weird.
  • By the way, one or two free unzipping programs allow you to unpack (split) .mhtml files into their component files (= .htm, graphics, .js etc) - for example "Universal Extractor" - see http://legroom.net/  

Help (Computing/IT/web) :
Related pages and Useful links