OrnaVerum
v 5.10.00
6 Oct 2018
updated 16 Nov 2018

OrnaVerum toolbox

An aide mémoire
for constructing and maintaining this website.

Last updated 30 October 2018

Contents

File names

File naming conventions

Blurry line between conventions and rules. Operating systems and browsers change their rules and difficult to keep abreast. But here are some basic things which should keep us safe. (Here, "file" includes webpage, image, PDF, etc.)

"FileName" or "filename" or "file name" or ...

Some systems treat uppercase and lowercase as the same characters; others don't, so naming one file "FileName" and a different file "filename" is asking for trouble. Most web programmers therefore keep all file names in lowercase.

A file name should never include a space. Since file names are nearly always part of a URL, the address terminates when a space character is detected. So for example a URL ending with "family/robin wadell.html" would be interpreted as just "family/robin". Some software automatically replaces the space with a code (%20) to give "family/robin%20wadell.html" and find the required webpage, but other software doesn't do that.

Therefore, no spaces in file names.

"help!.html", "why.is.this.so.bad?.html", "successs@last...html"

Hyphens are usually OK but many other characters have special meanings so it's advisable to use alphanumeric characters only (see Characters below).

"robin-waddell-a.html" --> "robin-waddell-b.html" --> "robin-waddell-c.html" -->

In the good old days, a version letter was invariably appended to a program file name. There was a slight penalty in that a menu calling that program would need changing, and if lots of menus called that program, then a mapping system might have been created to map the latest version to a common file name, But we're no longer in the good old days. Now we are in the internet days, and version letters are a very bad idea.

When robin-waddell.html is uploaded to a website, in time Google and other search engines will pick up and embed in their directories "robin-waddell.html". If we change that to "robin-waddell-a.html", there'd be two entries in the search results, but only one would hit the mark. The "not found" page would give a poor impression to site visitors and also taint the site in the eyes of Google et al.

Therefore, no version letters/numbers on file names. And no obsolete versions on the server either, since they'd be considered by Google as current.

Images

Re-sizing

Images lose their sharpness if they are changed (enlarged or reduced) to anything other than their original size.

That doesn't happen with text, because text characters are vectors en.wikipedia.org/... explains more.)

(Vector images can be enlarged to practically any size and retain 100% sharpness, but none of the images on OrnaVerum are vectors.

Pixels and percentages

Two ways to specify the size of images (spaces, margin width or anything else) on a webpage:

  1. Absolute
    or
  2. Relative
  1. Absolute sizes are specified in pixels.

    You can measure pixels in familiar terms of metric or imperial by holding your ruler on the image below.

    Pixels
    1
    .
    2
    .
    3
    .
    4
    .
    5
    .
    6
    .
    7
    .
    8
    .
    9
    .
    10
    .
    20
    .
    50
    .
    100
    .
    200
    .
  2. Relative sizes are specified as the percentage of the image (or whatever) relative to its container.

    So for example, this Oyez is 20% the width of this column of text.

    Expand or contract the window of this page, and you'll see the proportions are retained. (The pixel chart image above does not re-size.)

Scroll library

Percentage shows width of image relative to width of neighbouring text column.

Instances shows (as of 13 Oct 2018) the number of times the image appears on the website, and the number of webpages using that image. (This page is excluded in the count.)

Scroll #1width = 20%
48 instances
on 9 pages
Scroll #2width = 20%
41 instances
on 13 pages
Scroll #3width = 33%
36 instances
on 22 pages
(Trial size - not yet implemented on live pages)
Scroll #4width = 20%
18 instances
on 7 pages
Scroll #5width = 20%
2 instances
on 1 page
Scroll #6width = 20%
5 instances
on 2 pages

Borders and shading



Normally this...


... not this

We normally add a thin (1-pixel) black border to images that have white or light-coloured edges.

Irrespective of whether a border is added, a shadow ("shading") is normally applied to the bottom and right edges with a graded grey band of 10 pixels. Any colour and any width (number of pixels) can be used.

The shading attributes are coded into the HTML, but it's up to the user's browser whether or not the shading is displayed. Older browsers do not display shading; they might instead display a thick black bottom and right edge, or not.



Normally this...


...not this.

Shading is not normally applied to an image if it has a non-straight bottom edge or a non-straight right-side edge.

Other effects

The image sizes and other attributes mentioned above are controlled by scripts; the main ones being:

  • HTML:

    The main language used for the webpages.

    What's HTML? A script that's run on the user's browser and displays whatever the HTML tells it to display.

    A copy of the HTML file is sent to the user's browser whenever the user requests it, by clicking a link on another webpage, or by typing in the HTML's address on the URL line.

  • PHP:

    PHP is a server-resident script and used for processing data.

    Why is that useful? Well, because the browser cannot process data. As mentioned above, the browser only displays whatever is sent from the server. The browser can format the data, for example font sizes & colours, borders & margins. This makes sense, since the browser is on the user's PC and therefore 'knows' the user's screen size, local settings, OS, etc.

    The server, on the other hand, doesn't know anything about the user's device; not even whether the device is a PC, mobile phone, or tablet. But big-boy server can do clever calculations that the browser cannot do. For example, it can validate keyed-in passwords and check them against a valid password held in a database.

    It can also calculate dates. For example, a sentence including "just over three years ago" was correct when the page was written in 2011(?) but not now. To correct that we need the original date, subtract it from the current date, then change the wording to "just over xxxx years ago" or "about xxxx years ago" or "almost xxxx years ago", as appropriate. (Usually it's simpler to say "some years ago", "since 1994", etc.)

    For me, who finds simple arithmetic using his fingers difficult, programming a calculation to be performed on a Unix computer on the other side of the world tends to be hit and miss.

  • Java:

    Java script is for clever (and therefore potentially dodgy) features, such as background music and the automatic enlarging when the mouse is passed over the 'robin' images on the top page.

    If you consider it to be a sort-of HTML/PHP blend, then you've got the right idea. It's processing (where possible) within the browser.

    Typically this is used for automatically completing a word when the user types in the first few characters. It should be noted that these features work on most browsers, but not all, and will not work if the user has switched Java off – hence the 'dodgy' caveat.

    The mouse-over-the-robin-photo, for example, doesn't work on a mobile phone, tablet, or any other device without a mouse. And this is a reminder of the increasing popularity of tablets and mobile devices. These not only lack a mouse but also have no function keys for instructions such as "Press F11 to enlarge".

    In short, device-specific or software-specific advice and features should be offered sparingly and avoided unless critical.

    An example of trying to teach your grandmother how to suck eggs is on this page. After each section we display an ↑ icon to jump to the top of the page. This is a legacy from 1990s programming, when keyboards had no "Top of page" key. A nanny icon such as this is redundant, makes the page look dated, adds clutter, and most importantly can distract the reader from the content.

    ...or so I wrote several years ago. Now (2018) the ↑ icon is no doubt valued by the increasing number of iPhone users who lack a Top Of Page option (Android phones are better). The web, and devices, change. We have to keep up with trends if we want to increase, or even retain, an audience.

John's skill level is as follows:

HTMLBest. But "Best" does not mean "Good"; rather it's just the least-baddest of the three.
PHPFeeble.
JavaDaren't-touch-it-with-a-bargepole language.

Text

Characters

For displayed text the areas of concern are 'special' characters. These can cause undesirable effects on the webpage because they are also HTML control characters. These include:

ampersand&
comparatives> < =
pound and other currency symbols£
punctuation marks? ! : ; " '
hyphen, endash and emdash- – —

If these are mis-coded then instead of a character, a black square    will be displayed, or a blank space, or a question mark, or something else.

The programmer must also take care with non-English alphabet characters, such as letters modified with an acute, grave, umlaut, etc. If not coded correctly these will (probably) be displayed without the accent; for example e, a, u, c, instead of é, à, ü, ç.

Font sizes

Font sizes used in MS Word can be mimicked in HTML, but it's most inadvisable. Font sizes in MS Word are absolute, and browsers and screens expect font sizes to be relative.

For example, if we (somehow) managed to force a font size to be 14, but that size was too tiny for a mega-sized screen or too huge for a mobile phone screen, or the browser didn't have that font size installed, then the result would be 'orrible.

The answer? We invariably use relative sizes.

The above three sentences are with a font size of 100%. That means, the normal font size for the settings in the browser and PC (or whatever device) you are using to see this page.

  • This is 125% of normal font size, bold, used for sub-headings

    Here are a few lines at normal font size (100%) for contrast.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • This is 150% of normal font size, bold, used for main headings

    Here are a few lines at normal font size (100%) for contrast.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • This is 180% of normal font size, bold, but too big for most cases.

    Anything larger than 150% can be compared to shouting.

  • This is 80% of normal font size, used for whatever we want

    Here are a few lines at normal font size (100%) for contrast.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • This is 65% of normal font size, but too small for most cases.

    Phew! Here are a few lines (at 100%) for contrast.

    Anything smaller than 80% is difficult for some people to read without having to enlarge their screen.

Size is not important......so say the inadequates.

Text within a border can seem a bit larger than it really is. The border causes the optical illusion of a bigger font. (Can confirm by zooming the screen to max and measuring with a ruler)

Lorem ipsum dolor
Lorem ipsum dolor

Font styles

MS Word was developed to create documents for printing on paper.
HTML was developed to display documents on a screen.

A long time ago, somebody decided that Times New Roman was best for printed text, and Arial for screen text. Whether or not we agree with those choices, that's what the defaults often are.

  • Question

    If an original document (Word, PDF, scan, etc.) is in Times New Roman, why does it appear in Arial on the webpage? Is it magic? Is it hard work to convert one to the other? Is it time for tea?

    Answer

    No, No, and Yes.

    It does not matter one iota what the original font style is, because it goes 'fontless' into an HTML file; i.e., each character is stored as a hex code (e.g., a = 61, b = 62, c = 63, etc.) and the browser applies the font style and size when it displays the text.

  • Question

    When copy'n'pasting from an MS Word document, why does that not faithfully reproduce the same style of italicised text or bold text or underlined text or coloured text, or big text, or teeny-weeny text?

    Answer

    Because those are text attributes, and text attributes aren't copy'n'pasted into the HTML file

    The webpage has to be manually compared with the original, line by line, word by word, letter by letter, and for each mismatch, the style must be specified at the appropriate place in the webpage. There's no short cut - it can take hours, and mistakes are inevitable. Occasional typos can be detected in the original and corrected during the comparison. Usually, however, more errors are introduced than fixed.

Alignment

Text on a line can be centred, flushed left, flushed right, or "justified" (i.e. aligned to flush to both left and right margins, for 1st-to-penultimate lines). Justified alignment is typically seen in books and newspaper columns. The effect is achieved by increasing the spacing between words, making the paragraphs look neater than a ragged right-hand edge, or look unsightly if the spacing is two wide. Unlike the other paragraphs on this page, this paragraph is justified.

Line breaks

On a webpage, as with MS Word, when the text fills the available space on a line, a new line is started automatically. Again, as with MS Word, we can force a new line to start anywhere we wish; typically when we want to start a new paragraph.

A line will break at the last space character (" ") before the right-hand margin, and there are cases where we'd want to suppress this. For example, a date that happens to be near the end of a line, we'd want "1 Jan 2000" to appear on the same line, and not "1" at the end of a line and "Jan 2000" at the start of the next line. This can be fixed by specifying the date's two space characters not be used for a line break, but it takes time to find them and sometimes not noticed.

Line breaks in URLs

To increase the chance of a long URL fitting on a line, we adopt the convention of omitting the "http://". Even so, a long URL might be wider than the width allowed for the text, and this can cause display problems, depending on the browser.

As mentioned above, a line will break to a new line at the last space character before the right-hand margin. But what if there is no space character? Then it will break at a special character, such as "?" or "&", depending on the browser.

Chrome and Internet Explorer, for example, look for "?" and FireFox looks for "&". But what if there is no space character AND no special character? Well, in that case, a special HTML command is invoked to break the line at the right-hand margin.

This works fine in Chrome and FireFox, but not in IE.

Solutions include:

See: URL

See: en.wikipedia.org/...

Although the full URL is not displayed, it is coded in the HTML file so the desired webpage is linked to.

Coloured & underlined text

No!

No!

Most people would probably consider orange text on a red background to be somewhere between ugly and illegible.

White text on a black background causes eyestrain for some, and those affected will not return to the website. White text on a black is favoured by pornographic websites (so I'm told) and also websites about black magic, neo-fascism, etc.

Similarly, blinking or scrolling text is not only dated but also an annoying distraction.

For this reason we almost invariably follow the standard convention of stable black text on a white ground. (In any case, the HTML commands for blinking and scrolling text have been deprecated and are no longer supported by most modern browsers.)

Colour tone and tint/shade are subjective. What is considered deeper or brighter to one person may differ from another. So it's always better to specify the colour you want by its code (a 6-character hex value).

en.wikipedia.org/wiki/Web_colors has a good selection of codes, and the chart below shows the most common, from black (code = 000000) to white (code = FFFFFF).

Bear in mind that the colour used for hyperlinks is different for each browser, even on the same device. The hyperlink default colour is invariably blue, but the shade often differs. In addition, users might change the default hyperlink colour. For this reason, underlining of non-linked text should be avoided.

Underlining hyperlinked text is now considered old-fashioned. On 13 March 2014, to mark the 20th anniversary of the World Wide Web, Google redesigned their search results page by removing all underlines from hyperlinks. Other trend-setters such as Wikipedia have also stopped underlining links to give a cleaner-looking page. This makes sites with underlining look old, and some might think the site is no longer being maintained.

Should OrnaVerum follow suit? Probably not.

On OrnaVerum there's a lot of blue text, not underlined and not linked. The reason for this non-linked blue text will not be obvious to site visitors and if underlining was removed from hyperlinks it would be most confusing. Confused site visitors will quickly leave before frustration kicks in.

On some websites no distinguishing marks are needed at all. For example,

Source: en.wikipedia.org/wiki/Hyperlink. Click here for more details*

could be presented as:

Source: en.wikipedia.org/wiki/Hyperlink. Click here for more details*

(If your device has a mouse and if you move it over the URL, "here", and the asterisk, you'll see the mouse pointer changes.)

Whichever method is chosen, it must, of course, be consistent across the entire website.

Colour chart

Apparently 16,777,216 distinct colours are possible on a webpage, although it's not known if anyone has actually counted them. Here are a few with their identifying hex code.

You can find umpteen webpages showing umpteen colour codes, and en.wikipedia.org/wiki/Web_colors is a good starting point.

000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
 
000000 202020 404040 606060 808080 A0A0A0
C0C0C0 E0E0E0 FFFFFF