HTML

HTML (Hypertext Markup Language) is the basic scripting used for web pages. It is often referred to as programming but this is incorrect as it cannot react to user input. It is in fact very easy and I like to describe it as word processing with typed commands.

The Basic Format

In this tutorial I will use XHTML as it is defined by the world wide web consortium (w3c). This means that all the code must be lowercase and extra / are need in special places that I shall point out. The basic format that you must use with HTML can be quite offputting but it isn't really very hard, it just needs to be learnt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Title (appears at the top of web browser)</title>
</head>
<body>
The pages content goes here.
</body>
</html>

The entire document should be enclosed in html tags which are opened by typing <html> and closed with </html> tags are always closed with a /.
The head section contains the parts of the web page the are not seen in the browser window. In fact the title is the only part which can be directly seen at all. There are many things which can go inside the head section but we don't need to worry about them now.
The body is where the main content of the website goes and is what we shall be focussing on in these tutorials.

The DOCTYPE declaration at the top just tells the browser what type of code you are using. You should copy and paste it to the top of every document.
Save this into a html file. To save a html file if you are using notepad choose save as from the file menu then set the 'save as type' to all files. Make the name index.html.

Basic Formatting

To make a simple webpage you will want some basic formatting to make it readable. Try them in the index.html file that you have

<h1>Your Title</h1> These are title tags which create big headers. There are also h2, h3 ,h4 and h5 tags which get progressively smaller.

<p>Your paragraph</p>These are paragraph tags which will split your page up into paragraphs. By now you have probably noticed that you have opening and closing tags for each html element. They start with just a plain tag with the command in and the end with the same except for the '/' at the beginning. This applies to the tags listed below.

Bold - b
Underlined - u
Italics - i
Horizontal rule - hr

A special tag is the <br/> tag which does not have a closing tag. It creates a new line and as new lines don't need the end it ends within itself. Because I am using XHTML compliant code as a basis for this tutorial I have includd the finishing '/' before the '>'. Normal html does not need this as it has a much looser syntax (its not as strict, the syntax defines how the code should be coded).
Lists are slightly more compliicated than the tags we have been looking at before because there are two parts. One part surrounds the entire list and the other surrounds each individual element.

<ul> - Start the list
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul> - End the list

This creates a simple bullet pointed list like the one just above. If you wish to create a numbered list then you must use the <ol type="type">. This is more complicated than the tags we have looked at until now because you have the extra property. The values that you put in type change the type of numbering.

type="1" - Arabic numerals - 1, 2, 3 etc.
type="a" - Lower Case alphabetic - a, b, c etc.
type="A" - Upper Case alphabetic - A, B, C etc.
type="i" - Lower Case Roman Numerals - i, ii, iii etc.
type="I" - Upper Case Roman Numerals - I, II, III etc.

This leads on to our next part which is dealing with tags with extra properties. We will start off with the picture which, like the br tag, is a single tag on its own. The tag is the <img> which as you can see is not much use as we have not said what the picture is called. To tell the computer what the picture is called we use the src (source abbreiviated) attribute. The src attribute assumes that the picture is in the same directory as the html document so it is best if you move the picture into the same folder. If you wanted to put all the images in an image folder then you would have to put "images/imagename.jpg". I put all the pictures to do with a tutorial in a folder of their own mainly because I tend to name them scr1.jpg, scr2.jpg etc. but partly so that my main folder does not become overly cluttered.

The img tag has three other attributes of note. The height and width are measured in pixels (like your screen resolution 1024x864 etc.). The final attribute is the alt text which is the text which appears when you hover your mouse over a picture. This text is very important for search engines and blind users. The w3c standards require you to include an alt tag for every image.

Now we have learnt most of the ways to format a html document we shall look at linking them. First you should create another html document with an appropriate name e.g. about.html. Put a bit of content into the second page so that you can tell the difference between the two. Make sure they are both in the same folder.

A link uses the <a> tag. Again you can see that it is not much use without any attributes. This time the attribute to use is href="about.html" (stands for Hypertext REFerence). The text that is going to be the link goes between the starting a tag and the finishing one. Finishing tags never have any attributes, they simply have the /tag name. The same rules apply to pictures and other web pages about their names.
If you want to link to a webpage outside of your website include the http:// before the websites address. If you want to create an email link you should put href="mailto:jim@quantumstate.co.uk".