Homepage | (Static sitemap) | ? Help | Red double-arrow iconLinks | Contact us

JavaScript Menu, DHTML Menu Powered By Milonic

 

Web design, HTML and CSS

Headings on this page :

1. Used on this site

2. General

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.  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, 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, the 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

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 :

Nowadays there are good menus available which don't need JavaScript - they ingeniously use Cascading Style Sheets (CSS).

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').  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 a few lengthy pages (to make navigation easier) - such as :

So far, we've done 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 :

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
 

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

There are two types of links on a website :

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.
Our earliest method was just a coloured chevron of two 'greater-than' text characters thus: >>

Now and again we devised a "better" symbol.  However, whenever we changed it, we had to alter each-and-every link on the site (several hundred in total).  So we were looking for the holy grail - some versatile way in which you could change the symbol in only one place (the master copy) - and it would change it across the whole site.

We came up with this method :

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

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

This is easy to remember, short and quick to insert.  It's 23 characters, but needs only 13 keystrokes (or a macro).

In the external CSS style sheet we've redefined the standard HTML var element
(var stands for 'variable' - it's only used for styling program code).
We've told it to use a background image (no repeat) of two red arrows thus:  

The method works nicely :

This solves the problem with CSS that you can't normally change content across a site - you can only change styling, 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.

There are a 10 or so obscure HTML tags like var which are rarely used - and can be dedicated to a one-off use like this.

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

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

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 250 each).  With long tables like these, this type of utility is genuinely useful.  It adds an interactive database-type facility - albeit rudimentary.

To make it 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 a: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 a <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 a:hover facility of the <a> link tag.
    This enlarges the image just by hovering your mouse over it.
    'a:hover' is an unusual (but lovely) dynamic facility built into CSS (akin to JavaScript).
  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 :
    - via your browser's View menu settings
    - by turning the scroll wheel on your mouse whilst holding down the Ctrl key or similar
    - some browsers' free addons allow you to enlarge just the image (eg Firefox's 'Image Zoom')

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

We've added method 2 (a:hover) to several 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 method, the surrounding text etc re-aligns temporarily when the image enlarges.`

Images - float:right

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
    • if it's a .GIF with a transparent background

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")

CSS - The order of the four box sides

The sides have to be in the following order :

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

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

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 and CSS - Syntax of comments

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

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

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 the text-transform statement.

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

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 don't stop search engines and Ctrl-F/F3 finding the text in any items.

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 :

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.

For more on all these 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 :

Most web design programs do this 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 :

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 :

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

Laptop computer keyboard

Software - web design programs

Currently, well-known programs include :

Programs which have been discontinued include :

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.

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, the same text is less attractive (and less readable) in Firefox and Opera - compared with MS Internet Explorer.  It's more spidery and jagged - eg with italics.  This is frustrating, because Firefox, Opera etc are more 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

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

Note:  There are no red double-arrow symbols next to the external links below.

Related pages on the CharityBags website :
Help (with using the website)
Help - What's my screen resolution?
Web design
Acknowledgements: the software section at the bottom
About images

AbilityNet
www.abilitynet.org.uk

National charity helping disabled people use computers and the Internet.
Includes information on RSI, ergonomics, eyesight issues, good website design.
Much of the website is relevant to all users.

Computer mouse (James Gardiner/SCRAN)Adobe  [eg Acrobat PDF reader software - free]
www.adobe.com

Microsoft  [eg MS Word for Windows document viewer software - free]  
www.microsoft.com

Nominet UK`
www.nominet.org.uk

Official registry for .uk web addresses (=domain names)

Tom's Hardware
www.tomshardware.com

W3C
www.w3.org

Official website of the World Wide Web Consortium - a not-for-profit organisation.
Establishes the standards for web design - HTML, XML, Cascading Style Sheets (CSS) etc]

W3Schools
www.w3schools.com

Free information on web design and the Internet.  Includes excellent interactive tutorials.

Web Design Group (WDG)
http://htmlhelp.com

On HTML- and CSS-related topics.  Includes web authoring reference. High quality, respected.

 

Arrow to top of pageTop | Home iconHomepage | Popup sitemap | ? Help | Email iconContact us |

Bare links A-Z |  List of organisations and resources (sortable) |

A-Z List of collectors |


Sponsored by Namesco Ltd

PicoSearch

Milonic company logo JavaScript DHTML Menu Powered by Milonic