For those of you who're getting into HTML now, I thought you might appreciate a quick reference to the main things you'll want to know how to do. Also see the Resources section for links to other HTML tutorials and information on the web.

A webpage is the perfect format for this tutorial too, since you can see the effect of the HTML without having to switch from one application to another.

Topics

Topics are in order of probable interest to the new HTML user.

• Links - Text
• Links - Images
• Horizontal Rules (lines)
• Formatting Text
• Colours
• New Paragraphs/New Lines
• The whole HTML document - the HEAD section
• The whole HTML document - the BODY section
• Tables
• HTML Table-code to copy and paste
• Anchors
• Visual HTML editors

It's probably wise to read this tutorial in order. Only skip ahead if you already know all the earlier material.

 

Links - Text

These are the first thing you'll want to know about: how to make hyperlinks. Here's an example link, to this website:

Visit my site NOW!

Let's take a look at the HTML for that link:

<A HREF="http://www.mattgemmell.com/">Visit my site NOW!</A>

You already know that HTML 'tags' go before and after whatever you want to affect, so to make some text bold you put <B> before it and </B> after it. The same is true for links. The linking tag is <A>. The HREF part is just telling the browser that the link is a clickable destination, and the code for this will always be the same. Next comes the actual URL you want to link to, inside quote-marks. This does not have to be an absolute URL, meaning that it doesn't have to begin with http:// etc. If the page is in the same directory as the one you're linking from, then the filename is sufficient. E.g. if you want to link to a page whose filename is "contact.html" in the same directory as the page you're linking from, then you only need this code:

<A HREF="contact.html">Click here to contact me</A>

After the URL, we close the quote-marks and close the A HREF tag with the usual > symbol, then we have the actual text which we want to be clickable. You can see this easily from the example above. After the clickable text, you must always include the </A> tag. Why? Because if you don't, everything after the text will also be linked to whatever URL you specified! You can understand why this would be the case: you've never "switched off" the link. HTML works by "switching on" a tag then "switching it off" after whatever you want it to affect.

 

Links - Images

Now this is the fun part! Linking images instead of text is very simple - you just put an image into the HTML instead of the text, with the same <A HREF= ... > as before. So, how do we put an image into a web-page? Like so:

<IMG SRC="ButtonBlue.gif">

The above HTML will just insert an image onto the page, but not link it. Remember our code from above, for linking to my site with the text "Visit my site NOW!" :

<A HREF="http://www.mattgemmell.com">Visit my site NOW!</A>

To instead link the image to my site, we just replace the linked text with the code for the image:

<A HREF="http://www.mattgemmell.com/"><IMG SRC="ButtonBlue.gif"></A>

That's all there is to it: easy! There are also other parameters you can add to the <IMG SRC=....> tag to customise the image. For example, you can add a coloured border to the image, of any thickness you require. This is done as follows:

<IMG SRC="ButtonBlue.gif" BORDER="3">

This would give the image a border which is 3 pixels thick. The colour of the border will be the colour of the text on your page, or if your image is linked, it will be the colour of the other links on your page. The code for a linked image with a border is just:

<A HREF="http://www.mattgemmell.com/"><IMG SRC="ButtonBlue.gif" BORDER="3"></A>

There are additional parameters of course, but this will do for now, to get you started. Pretty easy, isn't it?

 

Horizontal rules

You know about these too. Here's one:

---

And here's another one, of the other type:

---

The HTML for these is incredibly simple:

For the first type (the 3D lines): <HR>

For the second type (the solid lines): <HR NOSHADE>

That's it! However, you might also want to have lines that are less than the full width of the page, like so:

---

---

---

We have done two things here: adjusted the WIDTH of the lines, and also adjusted the ALIGNMENT of them. You do this like so:

For the first line of the three above: <HR WIDTH="50%" ALIGN="left">

For the second line: <HR NOSHADE WIDTH="80">

For the third line: <HR WIDTH="40%" ALIGN="right">

Note that you can specify widths as percentages or as absolute values. The percentages are percentages of the width of the page, and the absolute values are numbers of pixels wide. The ALIGN parameter is self-explanatory.

Lastly, you can also adjust the height of a line of either type, like this one:

---

The HTML parameter for this is SIZE and is measured again in pixels. So, the code for the above line is:

<HR SIZE="17">

And that's all there is to know about lines!

 

Formatting text

I won't spend long on this, as it's a very simple topic. I'll just give you examples with corresponding HTML code:

Normal text   Normal text

Bold text   <B>Bold text</B>

Italic text   <I>Italic text</I>

Teletype text   <TT>Teletype text</TT>

Different sizes of text   <FONT SIZE="5">Different sizes </FONT><FONT SIZE="2">of text </FONT>

Right-aligned text   <DIV ALIGN="right">Right-aligned text</DIV>

Different colours of text   Different <FONT COLOR="darkviolet">colours</FONT> of <FONT COLOR="red">text</FONT>

(Note: For more information on colours, go to the Colours section below.)

Flashing text   <BLINK>Flashing text</BLINK>

 

Colours

Colours on the web are known to be one of the problems facing web-designers. People use different computers, different operating systems, and have their monitors set to different numbers of colours, so how can you be sure that each visitor will always see the colours you specify?

The answer is that there are a set of so-called "web-safe" colours; colours which will display correctly no matter which browser or type of computer a websurfer is using. For the sake of keeping things simple, there are 216 web-safe colours, no more.

There are two ways to specify colours, as you may have noticed. These are hexadecimal and by name. I'll explain each method separately.

Hexadecimal

This is a counting system, much like our own natural 'base-10' or 'decimal' counting system. In our usual method of counting, there are only ten different digits (0,1,2,3,4,5,6,7,8,9) to use, hence the name 'base-10'. In hexadecimal, there are 16 different digits: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

The only thing you need to know is that colours in hexadecimal are represented by three two-digit hexadecimal numbers, representing the red, green and blue 'components' of the colour.

Suppose you want to set the default text colour of your document (see The whole HTML document - the BODY section for more on this) to a shade of purple. If you want to use the hexadecimal method, you need to know the hexadecimal ('hex') numbers for the red, green and blue components of that colour. These three two-digit numbers are combined to give the full value, like so:

<BODY TEXT="#800080">

I've added some colouring here to show that the first two digits are the red component, the next two are the green component and the last two are the blue component. The result of this actual code would be text in this colour. Note that you must put the # character before the digits, to show that this is hexadecimal and not By Name.

Okay, this all sounds incredibly complicated. It's not; you'll get used to it quickly. If you still want an easier method, but with its own drawbacks, see the By Name section below.

By Name

This is much easier; you simply type the name of the colour you want, like this (using the above example again) :

<BODY TEXT="purple">

This will once again produce text in this colour, but without the hassle of hexadecimal. There's only one problem with this method, and it's the same problem as the hexadecimal method: how do you know which colour corresponds to which name? Common colours like purple and red and blue and so on are easy, but what exactly are you supposed to call the shade of yellow that's close to orange but not quite as dark?

The answer is that you use a reference chart. There are only 216 web-safe colours, and so there are 216 proper names for these colours which you can use instead of hexadecimal values. You can find reference charts in many places on the web, or in your web-authoring software. Adobe GoLive has a particularly excellent colour-picker (and was used to create this entire website too).

 

New paragraphs/new lines

This is also simple. To take a new paragraph, you end the last paragraph and begin a new one with the paragraph tags: <P> and </P>. Example:

This is the first paragraph.   <P>This is the first paragraph.</P>

This is the second paragraph.   <P>This is the second paragraph.</P>

You'll note that in HTML, new paragraphs leave a space of about one line after the last paragraph. When you don't want to have this space, but you do definitely want to take a new line, you just insert the line-break tag: <BR>. Example:

This is the first line.
This is the second line.

This is the first line.<BR>This is the second line.

 

The whole HTML document

Okay, this is about the general structure of an HTML document. There are two things to remember:

1. The document must begin with <HTML> and end with </HTML>
2. The document is divided into the HEAD section and the BODY section.

The HEAD section

The HEAD section (which begins with <HEAD> and ends with </HEAD>) contains the invisible information about a page. There are really two main things which the average <HEAD> tag contains, two important things anyway: the TITLE of the page (which appears in the title-bar of your web-browser's window when you go to a page), and also something called the META tags. I'll deal with each of these separately:

The TITLE of this page is "HTML Tutorials" - you should see that in the title-bar of your browser (Navigator will put "Netscape:" before the title). The HTML is simple, but you must remember to put it in the HEAD section, not the BODY.

<TITLE>HTML Tutorials</TITLE>

The structure of an HTML page would thus always be like this:

<HTML>

<HEAD>

<TITLE>Title goes here</TITLE>

</HEAD>

<BODY BGCOLOR="white" TEXT="black" LINK="blue" ALINK="red" VLINK="red">

Cool stuff in here, with links and probably another of those irritating visitor-counters somewhere.

More cool stuff, and far too many images.

</BODY>

</HTML>

Now we come to the other content of the HEAD section, the META tags. META tags serve two purposes: they give information about your document, and they also (believe it or not) enable the search-engines to categorise it. There are several META tags, and I'll show them all below first, then explain them. Note: All the tags start with META and have a different parameter in them, but you must have a separate tag for each. You can't have, for example AUTHOR and KEYWORDS inside one META tag. See below to see what I mean.

<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=iso-8859-1">

<META NAME="KEYWORDS" CONTENT="HTML, tips, Matt, Gemmell, Matt Gemmell, tutorial, code, tips">

<META NAME="AUTHOR" CONTENT="Matt Gemmell - contact at mattgemmell dot com">

<META NAME="DESCRIPTION" CONTENT="This page gives a short tutorial on the main features of HTML.">

Okay, now to explain them one at a time:

<META HTTP-EQUIV=...> You don't need to know about this. Just copy it exactly into all your HTML files, and that's fine. You can also leave it out if you like; don't even spend a moment thinking about this one.

<META NAME="KEYWORDS" CONTENT=...> This tag enables the search-engines to categorise your page, based on keywords which you supply. It's up to you to be honest about it. You can have any number of keywords, and you can repeat a keyword as much as you like in order to improve your ranking in search-engine results, but be aware that some search-engines now penalise your page's ranking if you use the same keyword more than seven times (InfoSeek does this).

<META NAME="AUTHOR" CONTENT=...> This, obviously, gives the name and any other information you like about the author of the page. Like all META tags, it is completely optional.

<META NAME="DESCRIPTION" CONTENT=...> This gives a description of your page, and is usually displayed in search-engines results as the 'Summary' of your page, so word it well, preferably using some of the keywords from above, but in proper descriptive sentences. Again, optional.

Important note: META tags do not 'close' - meaning, there is no such tag as </META> - do not use it!

Another important note: As I said previously, you must have a new META tag for each type of CONTENT; AUTHOR, DESCRIPTION etc. You cannot have more than one type of CONTENT in one META tag - do not do this!

 

The BODY section

The BODY section (which begins with <BODY> and ends with </BODY>) contains the actual visible elements of the page, such as text and images and so on. You can also customise the page by adding parameters to the <BODY> tag - we've talked about this before, mentioning ALINKS and VLINKS and so on. Here's an example of a <BODY> tag with added parameters:

<BODY BGCOLOR="white" TEXT="black" LINK="blue" ALINK="red" VLINK="red">

I'll explain each added parameter separately:

Note: For more information on colours, go to the Colours section above.

BGCOLOR="colour" - This tag simply gives the background colour of the webpage.

TEXT="colour" - This tag sets the default colour of all normal (unlinked) text on your page, and borders of unlinked images.

LINK="colour" - This tag sets the default colour of linked text, and the borders of linked images.

ALINK="colour" - This is short for 'Active LINK': this is the colour which a link momentarily changes to as you click on it.

VLINK="colour" - This is short for 'Visited LINK': this is the colour of links which have already been visited by your browser.

There is one possible other parameter: the background image parameter. As you know, you can have a tiled image as the background to your page. This is done by adding the parameter BACKGROUND="filename" , like so:

<BODY BGCOLOR="white" TEXT="black" LINK="blue" ALINK="red" VLINK="red" BACKGROUND="bat.gif">

Note: The background image will be tiled, not centred or scaled to fit the browser window. Therefore, make sure to choose a background image which will tile seamlessly, not leaving obvious 'joins' between each 'tile'. Also, it is unnecessary to specify a background colour (BGCOLOR="colour") if you are using a background image, but it's perfectly okay to do so. Your background colour will be displayed whilst the background image loads, then will be replaced by the background image.

 

Tables

 

HTML Table-code to copy and paste

 

Anchors