A. What is HTML, and Making a Start...
1. Basics

HTML is a "mark up" language. HTML is not a programming language.  The idea of "mark-up" languages comes from publishing and it has a long history.  Mark-up languages provide a totally text-based way of communicating formatting information across networks and to different machines

Mark-up languages place information about the the fomatting inside "tags". This is to distinguish it from the "content".  Fomatting can be to do with layout, or the appearance of fonts.

We write in our marked-up text file:
<center><i>Excuse Me</i>, <b>Why</b> are we <u>here</u>?<center>
And when run through a program that can interpret the mark-up, for instance, a web browser, it will look something like this:

Excuse Me, Why are we here?

HTML has become a standard for the web because:

2. The client/server model

3. What is XHTML, and whats wrong with WYSIWYG tools?

HTML is governed by "standards" that are defined by the w3c consortim (http://www.w3c.org/).

Standards are very important as they allow different technologies and content to interconnect.  "Open Standards" that are published, and which different manufacturers and products can therefore conform to, is what has allowed the internet to grow.

XHTML is a tighter, more constrained standard than HTML. It conforms to the standard for XML, ie. it is a subset of XML,and all valid XHTML documents are valid XML documents. XHTML means that code can be portable across smaller, lighter or more specialised browsers. It can also ensure that your pages are displayed the way you want them. XHTML can be better integrated with dynamic web applications.

WYSIWYG tools are infamous for producing non-standard, "fat" code. It is usually difficult to integrate with "backend" programs.

4. The Parts of an HTML document

5. The Declaration:

You can get away without it, but the first thing your document will need to do is to tell the browser something about itself: how the text is encoded and what kind of rules it conforms to. This is the DOCTYPE definition.  Put in a DOCTYPE to tell the browser  that you page is conforming to standards.

Choose your DOCTYPE according to what you can, and what you want to do. See Castro, p.38.

Example DOCTYPE for Transitional HTML 4.01

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
<html>


</html>

Example DOCTYPE for XHTML

<?xml version="1.0" encoding UTF="UTF-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">



</html>

Note the XML processing instruction with character encoding, and namespace declaration.

6. The Head: Character Encoding and title.

This tells the browser how the characters have been encoded in your text file. This needs to be the same as the character encoding with which you saved your document.  You should use UTF-8; this scheme can encompass any language, but can also understand the ASCII code.  UTF-16 will take over eventually.  (see Castro p334 with web references).  In XHTML you can include the encoding in the XML processing instruction, although there is a bug in IE6 for windows that means that Windows will not understand the DOCTYPE if you do it this way.  An alternative is to use the meta tag instead.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="content-type"
content="text/html; charset=utf-8" />

<title>Your Title Here: It will appear in the "History" list of the browser and may be used by search engines</title>

</head>

<body>

</body>

</html>

You can validate your HTML using:

http://validator.w3.org/file-upload.html
which will check that your document conforms to the DOCTYPE and character encoding you have chosen

7. Body: All the Rest!
Further Reading
http://www.alistapart.com/articles/doctype/
http://www.w3.org/QA/Tips/Doctype
http://www.w3.org/QA/2002/04/Web-Quality

Next: Setting Up Your Development Environment