HTML Reference

Index

Welcome to Poised Solutions' HTML reference site. This site is both an introduction to HTML and a quick lookup for character sets and various tags in HTML. HTML Version 4 is primarily covered, as this is the dominant standard of HTML in browsers for the WWW today (2008).

I won't be covering CSS or JavaScript beyond passing comments, and instead concentrate on the nuts and bolts of web pages, that is HTML. I will however be showing a technique of applying HTML, that works well in conjunction with CSS and JavaScript, and keeps the markup fairly clean.

Overview of HTML

HTML is an acronym for Hypertext Markup Language, and is a product of SGML (Standard Generalized Markup Language), by product I mean SGML is a language that is used to define markup languages - a meta language if you will.

HTML was invented by Tim Berner's-Lee a UK computer scientist, as a basic document language to work on and largely power his bigger creation namely the World Wide Web (WWW). Tim created this markup language whilst working at CERN (European Centre for Nuclear [Particle Physics] Research).

If you are new to HTML you may have been a little miffed that I waited until the second section to explain the acronym of HTML, but if you place your mouse over the word 'HTML' in any of the above text you should see the acronym explained in a title pop up box. I will stop doing it now, as I tend to only title an acronym the first time I use it on a page; otherwise the markup can start to look a little jumbled. But, I highlight the use of the acronym tag, as one of the many features of HTML that make it a great document markup language.

Document Markup

All documents tend to be marked up in some way, except perhaps the humble text document. Markup allows us to give emphasis (em tag) to words, and groups sentences together in paragraphs (p tag). There is always a beginning and an end to a tag, and most of the time there is content contained between an opening and closing tag. Not all document markup is based on an open format though, the beauty of HTML is that the HTML specification has been laid open for all to see and comment upon. An open specification is particularly important to allow digital documents to be preserved through time. This is why the text document is perhaps the most preservable format due to the acceptance of ASCII, but text alone does not allow for the more semantic qualities that HTML allows. HTML allows us to display a document in a variety of styles, based on the markup of the content alone.

HTML uses quite simple a markup structure; all tags begin with < and end with > the name of the tag tends to be an abbreviation (abbr) of what the tag represents.

<: Open angle bracket
>: Close angle bracket

Semantic Web

The semantic web is perhaps a slightly romantised ideal for the World Wide Web, but its acceptance is gaining ground. Not only can we markup the content to give it structure from a style and layout perspective, we can also label elements to belong to a groups (or class) and give them unique identification (id).

These tag attributes help us to interface, with both CSS and JavaScript, but beyond that they enable more simple and concise meaning to be given to an element, that computer systems can use when trying to deduce context. Information is often expressed as data + context, a computer system handles data very fast, but without a simple context or framework of reference it is just a series or letters or, even more basically numbers. Whilst we are not there yet when it comes to id and class for a standard way of defining conciseness, if tags themselves are used consistently and with appropriate text quite a lot of meaning can still be derived.

It should always be remembered though, that most websites are created for a human audience, and whilst we now have to cater for search engines, ultimately a web page works well if a human can read it. Aesthetics and good design still tend to win, in the debate between good semantics and aesthetics if there is a point of competing diametric opposition. Most of the time, both aesthetics and semantic structure play well with each other, in fact they tend to compliment each other.

Editors and WYSWIG

I am a purist, I code by hand in an editor (VIM), but I work with a number of languages and often on remote servers, so I need an editor that works anywhere, is fully programmable, and allows me to edit text at speed.

Textpad and Ultraedit are good text editors on the window platform. Unix platforms such as Linux and BSD offer quite a range of different solutions, some may have been ported to windows.

Quanta Plus: KDE based editor comes with a good selection of documents on the holy trinity of clientside web development (HTML, CSS & JavaScript).
bluefish: Web centric and lite weight.
VIM: Excellent all round editor, has syntax highlighting got HTML and comes in both ncurses and gtk versions.
GNU Emacs: This editor does evrything, an operating system within an editor some have described it.
GNU nano: Ultra light weight console editor.
NVU: A WYSWIG text editor, started by Linspire Inc. Fairly well featured editor.

Templating Engines

The real trick in producing a site is to use a templating system. Templating allows a site to be reuse modular components, and this reuse not only improves development life cycle times, it allows simple modification across the site, and give a site a feeling of continuity.

I tend to use a variety of templating engines and systems, on the whole they are very much alike. I tend to prefer the lower level less abstracted templating systems. Templating is actually quite a simple concept for computer systems, and it need not be elaborate. Ultimately you want the ability to include certain structures, and place variables at certain points.

I don't always use a templating system, it does depend on the size of the site, and the site's propensity for change.

Mason: Perl-based web development delivery engine.
Perl Template Toolkit: Fast, flexible and highly extensible template processing system.
Mako: Python template library - compiles into Python modules for maximum performance.
Cheetah: Code generation tool, and templating engine.
pear HTML_Template_IT: PHP based templating system.
PHPlib: Basic PHP based templating engine and library.
Apache Server Side Includes (SSI)
: Templating system built into the Apache Webserver

There are many more templating engines, so the above is certainly not an exhaustive list. Finding a templating engine you are comfortable with, or rolling your own (this is why there is so many), is worth the effort if you are looking to build a site of a certain minimum size.

Site Sections and Pages

Index: Site overview and introduction to the HTML
Structure: Page outlines, the major sections of an HTML docmuent.
Boxes: The box model of HTML (it's all rectangles!).
Alignment: Element to other elements and how they relate in position to each other,
Headers: Document types listed and explained.
Charset: Entity characters in HTML, how to get the symbols beyond the basic 32 - 128 ANSI ASCII (UTF-7) characters of text (a-zA-Z0-9 $#! etc.).
Attributes: Shared between tags - micro site detaling the various common attributes.
Tags: List of markup tags, that are used in most of the major browsers, along with their specifc and useful attributes.
Tips: Solutions to quirks that pop up between browsers.

Add a Comment - CyberVisor - Concept Visor

Bookmark and then activate Concept Visor to comment on this page, or any other page on the web. The Concept Visor also allows you to view comments made on the page.

Concept Visor

Links

If you have found this site useful please consider linking to it @ http://html.poisedsolutions.com/

Social BookMarks

Site Designed & Developed by Poised Solutions

If you wish to discuss hiring Poised Solutions for an information technology (IT project please get in contact
or visit the main PoisedSolutions IT Consultancy Website.
Poised Solutions is based in the Thames Valley area of the UK.