Session 1:

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

1. Basics


HTML is not a programming language.  HTML is a "mark up" 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.



4.  The Parts of an HTML document


5. The Declaration: Defining your document

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. 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
Please try it!



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