Web Design and Authoring: Session one
What is HTML?
HTML (HyperText Markup Language) is a language designed for writing web pages. HTML describes the document's structure using labels called tags. Plain text (the content of your page) is marked up with HTML tags. When viewed in a web browser, the content is displayed according to the HTML tags used.
The theory behind this is that documents have common structural elements (for example: headings, sub-headings, paragraphs, lists, tables) which can be identified by labels (the HTML tags).
Semantic markup
Used correctly, structural HTML is also semantic (it conveys meaning): a main heading has a different meaning from a sub-heading, for example. To achieve semantic markup you simply need to use the appropriate HTML tags to label your text. For example, you shouldn't use a heading tag just for visual emphasis, to make a piece of text look bigger. No, a heading should be used to help to communicate the content underneath it. The semantic meaning of HTML is especially useful to users of screen-reading software as it helps them to navigate your page and find the content they need.
HTML tags
The elements of a document are labelled using HTML tags. It is the tags which describe the document's structure; anything that is not a tag is part of the document itself. HTML tags tend to look like this:
<tagname> text </tagname>.
Most HTML tags have an opening and a closing tag, though not all (see also Versions of (X)HTML below). The beginning tag "turns on" an element, such as a heading, and the ending tag turns it off. The text contained within the opening and closing tags is rendered (displayed) by the browser accordingly. Closing tags repeat the tag name, preceded by a slash (/).
Structure and Style
HTML enables us to define and label the structural elements of our documents. HTML does not say anthing specific about how these elements will look when rendered (displayed) by the browser. Each type of browser has its own default ways of rendering HTML (which varies slightly between them), but, for example, all levels of heading will be displayed in bold text, on a line on their own, with space above and below them. <h1> will be displayed larger than <h2>, <h2> larger than <h3>, and so on.
Web designers, of course, want to have far more control over the way their pages look. This is given to us by CSS (Cascading Style Sheets). CSS is a presentational language which enables us to control page layout, typography, colour, borders, margins and much more. We use CSS in combination with HTML to create pages which are meaningful and accessible to non-sighted users and visually attractive and easy to use for sighted viewers (they are also easy for search engine robots to navigate and index too!).
CSS is written slightly differently from HTML, and we shall learn the basics of writing and using CSS on the course, starting at session three.
Because structure and presentation are separate it is easy for us to change the look of a page without affecting its structure. We can link one stylesheet (called an external, or global, stylesheet) to any number of web pages; then, when we make a change in the stylesheet (for example, to change the website's background colour from blue to green), the entire site reflects the change immediately.
Earlier versions of HTML weren't so helpful to users or developers: see Jeremy Keith's article 'A Brief History of Markup' at http://www.alistapart.com/articles/a-brief-history-of-markup/ for, as it promises, a brief history of markup, leading to the forthcoming HTML5.
Versions of (X)HTML
The version of HTML we shall use on the course is HTML 4.01 Transitional.
HTML 4.01 and XHTML 1.0 are the standard versions of markup used to write web pages today.
We shall use HTML 4.01 Transitional as it is slightly more forgiving of errors than HTML 4.01 Strict and XHTML 1.0 and therefore less frustrating when starting out. We shall learn to write HTML in such a way that it will be very easy to convert to XHTML should you need to.
As we progress, we shall also introduce some elements of the new HTML standard, HTML5, which is currently in development and partially implemented by most modern browsers.