HTML:Start

First thoughts

The key to understanding HTML is in understanding that you not creating web pages. You are almost creating a database.

With HTML you initially define the content of the page, not how the page looks. You define the paragraphs, the headings, the labels, the images, and so on - the content of the page, but you do not refer to the presentation of this content.

Imagine it like this. If you wanted to create a database of all the customers for an organisation, you would be interested in defining customer names, their addresses, their orders, their contact details, and so on. Later, you decide you want to produce a nice looking customer list, with all the customer names down the left hand side in bold, their addresses as a bullet point list, the primary contact in a red box.

What you should hopefully realise is that with computers involved, there is no need to create the customer list again in a prettier format. You only need to provide instructions on how the information should look when it's printed. That's the relationship between HTML and CSS. HTML is the database-side of things, defining the information you want to present. CSS are the instructions that control how to present the information you have defined.

Now, here's the tricky bit.

As web users, when we look at a page, we don't separate the content from the presentation in our minds. We see the whole thing together. When we write HTML and CSS, we tend to dip in and out of each language, not see them in isolation. For example, for the first few exercises, I'll be discussing layouts, content and presentation interchangeably, because that's what you're most likely to be familiar with.

OK - let's get started.

The Tools

In order to learn HTML and CSS from scratch, the best possible tools to use are the simple text editors

• Notepad/PSPad on Windows OS's
• gEdit, Kate or similar on Linux

If you are using this wiki for a module that Matthew Green leads, you WILL NOT BE PERMITTED to develop your HTML/CSS in anything other than a simple text editor. The use of tools such as Dreamweaver, Frontpage, Expression, NVU, BLUFISH, and similar are strictly forbidden. There is a very good reason for this. Most IDEs such as the list above complete code for you - that's their primary purpose, to reduce development time by completing parts of the development for you. When you're an experienced developer, this is great, and saves time and effort. When you're a novice, this is very bad, as you don't learn the aspects that the IDE does for you, so your knowledge has big gaps.

I strongly encourage the use of Linux for web development - if you take PHP modules that Matthew Green leads, PHP will only work with Linux here at the university - the earlier you become familiar with the environment, the more you can concentrate on development and less on getting to grips with a new OS.

If you're new to Linux, it's worth reading through the chapters of Linux Desktop Basics before you start using the OS.

New for 2007

We now have virtualised Linux available to all the computers in MI - by virtualising the operating system, you are able to run Linux as an application within Windows - prior to this, you needed to reboot the machine and boot into Linux - now you just have to find the Linux Virtual Machine application in the start menu.

Take a look at how to get started with the Ubuntu Virtual Machine

If you're interested in getting Linux installed on your home computer, take a look at Should I Install Linux? for a discussion on how to use Linux at home

I really, really don't want to use Linux

For CP1122, Linux is not a requirement - for any of the PHP modules it is. If you're looking at this guide for CP1122, and/or don't want to use the recommended tools, you can use notepad in windows or PSPad to write your code, and just save it to My Documents or the Desktop, then open it in Internet Explorer or Firefox.

Exercise 1 - The first experiment

Let's take a look at a typical webpage - YOU DON'T HAVE TO CREATE THIS YET, JUST UNDERSTAND WHAT YOU'RE READING - you'll have the chance to start building in chapter 3:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <HTML>
   <HEAD>
      <TITLE>My first HTML document</TITLE>
   </HEAD>
   <BODY>
      <P>Hello world!</P>
   </BODY>
 </HTML>

Exercise 1 - Breakdown

Line 1 - <!DOCTYPE...

Probably the most important line in this example is the one that starts <!DOCTYPE...

When this page is downloaded into a browser or any other client application, this line tells the application what language the document is written in and also what DTD to use to decode and display the contents.

What is a DTD?

A DTD is a Document Type Definition - it contains all the rules and valid uses of each element within your HTML.

Line 2 - <HTML>

Following the DTD, every HTML page begins with <HTML>. This is called the 'HTML element start tag'. Put simply, this defines the beginning of the web page. It states that everything following this tag, until it's end-tag (</HTML>) is the webpage.

Line 3 - <HEAD>

The <HEAD> start-tag defines the heading section of the web page. The heading section IS NOT SHOWN ON THE PAGE. This is tricky to comes to terms with at first. The heading of a web page in HTML is not the top of the visible screen, the way the heading of a document normally would be. The heading of a web page is a place to typically change settings affecting the way the web page is displayed. This is the place where scripting languages like JavaScript would exist in a web page, as users would not want to see the JavaScript code, they would only want to see the output of what JavaScript can accomplish. The thing to remember, is that content in this section is not shown on a web page (sort of!)

Line 4 - <TITLE>...

The <TITLE> of a web page is not shown in the page. The title is shown in the address bar at the top of the browser window. It is the name that is used when book-marking a page, in the history, on the start/task bar if you have one on your computer. It is not shown anywhere in the body of the web page.

Line 5 - </HEAD>

</HEAD> defines the end of the HEAD section of a web page. The thing to notice is the / symbol before the word HEAD. Every / symbol followed by an element name is the end of that instance of that element.

Line 6 - <BODY>

<BODY> defines the beginning of the main visible part of the webpage. Everything that follows (with some minor exceptions) from this point until the end of the body section (</BODY>) is designed to be visible content of the webpage, like menus, and colour, and images, and so on.

Line 7 - <P>...

This is the only visible element of the web page. The <P> defines the beginning of an instance of a paragraph element. The text that follows (Hello World!) is the content of that paragraph. The </P> defines the end of the paragraph (note the /). Pay careful attention to the fact that we have not defined a font, or a size, or a colour, or any other visible attributes of the paragraph. We have merely defined the fact that we want a paragraph, and we have defined it's content.

Line 8 - </BODY>

</BODY> defines the end of the main visible body of the webpage.

Line 9 - </HTML>

</HTML> defines the end of the webpage.

Thinking in boxes

If you look again at the structure of this webpage, you'll realise that we define a series of elements that exist inside other elements. This "element within element" concept is called "nesting." In order to write correct HTML, that will work as we expect it to, it is critical that we get the nesting aspect of the page right. The best way to describe this is to think about a series of boxes within boxes.

Box number 1 is our paragraph - we put a label on it (P) and inside we put some text (Hello World!) then we close the box.

Box number 2 is our body part of our webpage - we put a label on it (BODY) in it we put all the items we want to be visible on our web page, in the right order (in this case just the (P) box)

Box number 3 is our title - we put a label on it (TITLE) and put the title of the page (My First HTML Document) inside the box.

Box number 4 is our heading section - we put a label on it (HEAD) and put all the non-visible items we want into it in the right order (in this case, just the (TITLE))

Box number 5 is our web page as a whole - we put a label on it (HTML) and also stamp it with the language it was written in (DOCTYPE...)

Boxes within boxes...

Ready to Move on?

When you're absolutely confident you understand this section of the wiki, you can carry on to section HTML:Basics - do not continue to HTML:Basics if you are unsure about any of this content - you should seek assistance from your tutor if anything is unclear.