Web Design and Authoring: Session one

Basic Web Page Structure

HTML documents (web pages) are written in plain text and contain two things:

the text of the document itself
HTML tags

Every HTML document you write must have the following basic tag structure:

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

<head>

</head>

<body>

</body>
</html>

It is important to remember that any formatting you do by hand in an HTML document, for example, extra spaces, tabs, returns etc, are all ignored. The only thing which formats an HTML document is an HTML tag.

Note: the DOCTYPE tag and the meta tag need to be included, as shown in this and subsequent examples, to ensure that our pages validate and are rendered correctly by the browser. We'll learn more about validation and why these tags are necessary towards the end of the course. For now, you can either copy and past this portion of the page code into your own documents or, if you are writing your page structure by hand, they can be omitted and pasted in at a later date.

Why we hand-code our HTML documents in Notepad

During the course we shall hand-code our HTML in a simple text editor, Notepad (for PC. Mac users see note below). The focus of this course is on learning and using HTML, as opposed to learning a software package. Using Notepad ensures that you get used to the different tags as you type them repetitively and understand how they work together to make a web page.

There are WYSIWYG (What You See Is What You Get) programmes, such as Adobe's Dreamweaver, which allow you to create web pages without necessarily having to see any HTML. The difficulty arises when the programme doesn't produce the results you expect, and, if you don't understand HTML, you won't know what's gone wrong, or be able to put it right. Many web developers use Dreamweaver, but still do much of their coding by hand. Whatever level you aim to progress to, you always need to know your HTML code.

Also, using Notepad means that there is no requirement to invest in expensive software at this stage.

Mac users: The installed text editor on Mac doesn't work for writing HTML. Please download a freeware HTML text editor for Mac, such as TextWranger
www.barebones.com/products/textwrangler/index.html