:
Last updated 19th June 2007. Related HTML survey and testing pages.
Results.
UK.
Australia.
University.
USA.
Documents such as business letters have a standard structure such as:
Electronic documents have a similar structure, but are more versatile, less private and can contain many more elements than a sheet of paper; Quicktime movies, sounds and scripts, databases and email addresses. As well as the extra dimensions, there is a lot of formatting information in HTML, the Hyper Text Markup Language used to format webpages. HTML enables the browser to display the information in close proximation to what the author intended. The webpage formatting tags are not seen by a casual reader.
External scrips like javascript use the The Document Object Model (DOM) to access HTML web pages which have two main sections. HTML tags could be capitals or lower case. In newer versions of markup languages, like XHTML, tags must be all written in lower case letters
<head>
<⁄head>
<body>
<⁄body>
The head contains information about the page. The <body> contains the information which is seen onscreen. The <head> is not seen onscreen, it describes the character encoding of the page, the HTML version, the document relationships, the title of the page. Search for untitled doc in any search engine. It should define links to any external files, like stylesheets, databases or any external files the page uses. It should also contain author information, who wrote the page and when and could link to related documents like accessibility statements, providing alternatve pathways into the website's structure PARENTS and CHILDREN of the current webpage.
If you use relative directories instead of full http: pathnames, make sure you specify the <base href="http://www.hereticpress.com/Dogstar/Publishing/WriteWWW.html"⁄>
Another vital detail to specify for any site is a copyright © notice and access information.
The <head> section is enclosed in the HTML tags starting with <head> and ending with <⁄head>
The <body> section begins with <body> and ends with <⁄body> The <body> can contain hierarchies of other elements in the Document Object Model (DOM) like headings and paragraphs, lists and tables, as well as many embedded objects like Shockwave movie files or other scripting languages like Java.
The use of heading tags allows easier indexing of the HTML document into levels of importance, documents should be organised with the most important sections clearly defined by heading tags, starting with level one at the top of the page. The HTML for the headings can be set in the CSS Stylesheets for font colours and styles, even printing page breaks. In linked stylesheets page breaks are forced before h2 level headings.
To see some of the hidden HTML code find a browser menu like:
View Page Source
A web page can include a lot of hidden information that is not seen onscreen, unless you view the page source, the hidden information such as:
<body> content can contain:| A | B | Total | ||
|---|---|---|---|---|
| 2 | + | 2 | = | 4 |
| 3 | + | 3 | = | 6 |
| 5 | + | 5 | = | 10 |
This site uses seven different style sheets that users can switch between.
In HTML the browser needs formatting information for every element on the web page. To make unformatted text bold it is surrounded with HTML tags. These tags can then be controlled by settings in the stylesheet. In your browser find a menu item that says show page source code. Cascading Style Sheets CSS allow a global control over page layout.
Elements of a document such as pictures, headings, sub-heads, paragraphs and list items can be controlled by definitions in a CSS. For example, a CSS might tell a browser to display the item class of ListItems as serif bold type 16pt dark with a one em left margin.
-common page elements logo,links, Mod date, contacts
-page navigation elements
-links to related sites for further information
Font control is an important issue to try and specify default
serif(feet at the bottom of each letter ties text together visually)
or
sans-serif (no serifs) typefaces for display of major text elements.
See the Javascript style sheets below for examples. Generally,
sans-serif are better for larger font headings and onscreen text and serif typeface is better for large slabs of printed text.
You should specify a common font like Arial or Times New Roman, but if the user does not have that font on their system it will default gracefully
if you also specify a default font for <body> text and headings, serif or sans-serif font.
If you specify a bold, italic or all caps font in some typefaces, you may end up with a distorted version of that font.
Set the typeface to large and change the style to Italic. You can see many fonts just slant the normal font and distort the text.
Some fonts have a more complete set of characters for each style of that font. Arial or Times New Roman are usually safe on most systems. You can also embed fonts with the document or turn them into a .gif graphic to display them as you want on any system. See the online Shockwave fonts tutorial.
You can also set the line height (like leading) of a font so that the longer the line of text the greater the distance between lines.
To generalise, the spacing between lines of text should be around 120% of the font size, but this is only a guide, fonts differ, so test them on different
operating systems and different clients.
Class:Head-The quick Brown fox.
Class:subHead-defgvwxyz
CopyrightVSm-defgvwxyz
Copyright-defgvwxyz
Class:copyrightLogo-defgvwxyz
CopyrightLogoFirstLetter-defgvwxyz
Header-defgvwxyz
HLogo-defgvwxyz
HeavyP-defgvwxyz
Lanf-defgvwxyz
ListItems-defgvwxyz
ListItems-defgvwxyz
MIListsItems-defgvwxyz
OrListsItems-defgvwxyz
OrListsItemsNoLink-defgvwxyz
SmallListsItems-defgvwxyz
StPatrick-defgvwxyz
MelbUni-defgvwxyz
Lang
solid-green
Smallcaps
Sarcasm
Hanrah
ParaMiddle
HeavyP
If you have Javascript enabled and a browser that supports Cascading Stylesheets, all Heretic Press pages can be reformatted in seven different ways with serif or sans-serif fonts, larger or smaller text and different backgrounds in each stylesheet.
The page layout will change with each stylesheet selected and the screen will flicker through the stylesheets. Ctrl+9 will return you to this position
These stylesheets are a few of the characters from Patrick Hanrahan's novels NUNC and TUNC.
In the second style 2, The Author's Choice, the CSS Stylesheet property before: puts the character's name before their dialogue line.
| Male | Male | Female | Female | Language |
|---|---|---|---|---|
| Narrator A | Zoltan | Penelope | Narrator C | Russian |
| Narrator B | Misc. male | Penelope | Sonia | French |
| Shannon | Male | Odile | Woman 2 | Italian |
| Bob | Edwin | Wally | Woman 3 | Latin |
| Vaughan | Man1 | Eva | Woman 1 | Spanish |
| Konrad | Man2 | Woman 1 | Woman 2 | Romanian |
Language and Author Fontstyles
If the text below all appears in one colour, your web browser does not support the language tags.
English Shakespeare
English American Mark Twain
English Cockney John Lennon
French Rimbaud (1854 - 1891)
Greek Euripides (480 - 406 B.C.)
Italian Dante Alighieri
Latin Socrates (469 - 399 B.C.)
Romanian Eminescu (1850 - 1889)
Russian Fyodor (Mikhaylovich) Dostoevsky (1821-1881)
Spanish Miguel de Cervantes (Don Quijote)
Book Titles Ships names
No font tags should appear in the HTML document, only classes of text whose display is controlled by the external style sheets. This way, in a few minutes you can change the font, colour, style any layout element used in every paragraph of a thousand web pages. If you embed the font style in the document you cannot globally make such style sheet changes.
Cascading Style Sheets allow a more global control of page elements by defining a style and applying that style to every item you want displayed in that style.
The world wide web is a very versatile printing press, able to deliver instantly any information, in many different formats, to present the same information to suit the reader. The inventor of the modern printing press, Gutenburg, who made beautiful hardcopy books, had no easy options to make different styles, as book pages were printed from moveable metal plates made up of individual letters, it was a laborious job to set the metal typeface letters into pages.
It may look great to you on your IE browser, but what will it look like in Opera, Mozilla or a screen text reader? How will it sound if read to a partially sighted or blind user? You can rely on the communication medium, if you use valid HTML with accessibility issues in mind. Design must degrade gracefully when for example a browser has no picture display, javascript turned off, or does not support stylesheets. There are many rules and standards for the correct HTML sytax, you can see a guide at the Official W3C site which also has a validation service. The official W3C validator is:
If you write validated webpages using CSS, you can register with a small but growing list of websites who comply with standards, sites which validate their HTML and cascading style sheet content. A great list of validated websites You can also search for websites who comply with standards and also have accessible web design. Search for validated and accessible web publishers.
Heretic Press homepage.
hereticpress.com
W3C test Heretic Press
Verified File Name: Heretic Press
Date and Time: 3/21/2006 01:11:00 PM
Result: PASSED validation, No HTML errors
Cynthia Says® - Web Accessibility Report
Verified File Name: Heretic Press
Date and Time: 23rd April 2006 03:30 PM
PASSED Accessibility Verification priority 1, 2 and 3.
Validation Error Score www.hereticpress.com No Errors
Page Accessibility features www.hereticpress.com 24
Heretic Press web publishing standards and accessibility.
Contact Heretic Press for an accessibility review of your website. Audits will help you identify current accessibility problems and provide guidance for compliance with international standards and best practice.
Heretic Press Accessibility Statement
Heretic Guide to writing HTML
Contact Heretic Press
This variable list of accessibility features was compiled to evaluate government websites in Australian, the UK and USA.Results.
Allows webmasters to access the Lynx text only simulator
Lynx?
Page Valet accessibility testing tool
Page Valet
Web Page Backward Compatibility older browsers
Web Page Backward Compatibility
US legal requirements for accessibility
US Section 508
US S 508 Webmasters Tutorials
Section 508 Compilance
Access Advisory Committee Report
EITAAC Final Report
UK Building in universal accessibility + checklist
UK government websites
Irish National Disability Authority IT Accessibility
Irish Accesssbility Guidelines
Federal agencies to make Web sites -- accessible to users.
iCan ONLINE - Guide to Section 508
Official W3C accessibility guidelines
Accessibility guidelines
Web Accessibility Guidelines 2.0 23 November 2005
Official WAI guidelines on accessibility
Cynthis says accesibility testing
Cynthia says accessibility guidelines
UsableNet accessibility usability testing
Usablenet report
Australian Federal and State Accessibility law
Australian Standards Overview
Whole of Victorian Government Website Standards: Overview
Victorian Standards Overview
Victorian Government IT Policy and Programs
Content Guidelines
Web development Server side usability
Usability and Templates
Australian Government Information Management Office
Aust Govt Info Management Office
Discrimination and disability Act 2002
Disability Discrimination Act
Australian W3C Office newsletter
Australian W3C Office
Multimedia Victoria Government Accessibility Statements
Multimedia Victoria
A screen reader which accesses the DOM. JAWS
Jaws Email list. Scripts for JAWS
Jaws can be scripted with a language similar to Visual Basic to interact with other Windows™ software. An introduction to scripting from the American Foundation for the Blind.
Jaws also enables braille displays. Support for braille displays by different browsers.
Same-page links don't work correctly with JAWS about 25% of the time.
Browsealoud A free download for clients to control voices, word pronunciations and speech highlighting for Windows narrator Part of the Microsoft Windows XP operating system. I could not get Browsealoud to change voices. It has a continuous reading option but it stops at links. There is also a subscription cost to the webmaster to offer this service.
For $79.95 US it can also make audio files. Please Read provides 20 different character voice options. For Internet Explorer. Not reviewed.
For the Macintosh operating systems Mac OSX v10.4 Tiger, there is VoiceOver VoiceOver will speak descriptions of items under the mouse, but is also designed to work using only the keyboard. Voice Over has 20 unique voices that you can assign to different types of information. Voice Over works reasonable well with the Safari browser, but unfortunately Voice Over just stops reading at links and classes. It should continue reading! It would not read the XHTML "title" values of any objects which would provide more information on link elements. It also ignores table summaries and headers. It does not recognise the aural style sheets properties for voice control.
Unlike JAWS for Windows which can use VBScript to access the Operating System and other applications, Voice Over seems unable to access external documents. Applescript might be able to be used to get Voice Over to access external Mac OS files? Documentation is sparce. Reviews
Linux is a free open source operating system that many developers like to use because they can access all the code and add their own, but it is a more difficult operating system for a single user to configure and maintain than Windows™ or Mac™. Essentially all you need is hardware and some operating system know-how to get a completely free system that allows much more than the current generation of screen readers. It supports aural stylesheets, allows changes in voice characteristic and inflections and includes auditory icons.
Emacspeak Available free of cost, is software for the Linux operating system that seems more advanced than windows or Mac screen readers.
W3C WAI
University of Toronto Adaptive Technology Centre
Javascript voice technology Fire Vox for Firefox browser. it includes voice keyboard shortcuts Fire Vox for the Firefox browser. Fire Vox is an open source, freely available talking browser extension for the Firefox web browser. It also supports different operating systems. Downloads. Tutorial
You could hire some voice actors and record your websites contents as sound files which can be podcasted. An easier alternative is to convert webpages to Audio files.
| W3C Tools | Access | Webmaster | Design | Search |
|---|---|---|---|---|
| W3C Validator | W3C Content | Domain IP check | CSS guide | Ask |
| W3C link check | Screen readers | Latin entities | Design tips | Dogpile |
| W3C stylesheet | webxact | Site control | IBM guide | Yahoo |
| W3C Characters | Web design | User Agents | Bad design | Altavista |
| W3C Homepage | Dr Watsons | SEO | Ten mistakes | AllTheWeb |
| W3C HTML guide | colour Blindness | Tools | Usable Web | |
| Juicy Studio | Older users | Zen Style |
Web pages also need to be more independent than pages in a conventional book. This means that the headers and footers of Web pages must contain more information than printed pages.
Belgian news.
If you are selling "widgets", when someone searches for widgets, you want your webpage selling "widgets" to show up first in search engine results. Search Engine Optimisation (SEO) is writing webpages to sell "widgets"
The obsession of commercial interests in writing HTML pages to sell "widgets" can corrupt the English language and search engine results. The major search engine with a majority share of the market is GOOGLE.
Google sells advertising affiliate programs to websites who are paid when users follow Google advertising links.
To achieve high page ranks, you need to, use repititious language and repeat keywords in headings and link text throughout the HTML webpage. In Google's page ranking system, points are allocated in a voting system, how many sites link to your site?
In the interest of selling more "widgets" a market sprang up of selling and buying links to your site to achieve a high Google page ranking, very quickly, with no regard to the quality of the HTML page content.
Google has search algorithms designed to try and stop link buying to achieve page rank, so pages with many links are penalised. Google favour; short pages with less than a few dozen external links to other sites, keywords repeated everywhere and lots of websites linking to your page.
Many other search engines are less involved in commercial advertising schemes, Yahoo and even MSN do not penalise page rank when a page has many links.
Heretic Press writes pages for all search engines, not just Google, the Google webbot takes our images whenever it can and uses in them in unauthorised versions of our webpages. See the google cached page of any hereticpress page, you can frustrate their unauthorised replication of your artwork.
Write for yourself, for you user's entertainment, amusement or education. For real search results we recommend using Yahoo or MSN.