HTML Tutorial

Contents

0 Preface

 Alright, you asked for an HTML tutorial and you`ve got one. A few things to bear in mind though. First, as the HTML standards documents are fairly hairy this guide does not teach you strict `standard-exact` HTML. This doesn`t matter though because no-one writes like that, all browsers can work quite happily with everything taught in this guide. This guide will also only teach HTML, not javascript, cgi-scripts, etc as those can and do fill many books on their own. When viewing the source of the HTML version of this guide remember that < and > are special HTML tags so to tell the browser to ignore them and display them on the screen they need to be written as &lt; and &gt;. Also, excuse any typos.

1 Basic structure of a page

 A basic (and empty) HTML page contains only 2 tags: 
<html>
</html>
This gives a blank page with no title. Any text you want on the page goes between the <html> tags. The slash (/) before the second html tells the browser to swicth off that tag; in this case end the page.
HTML does not care about the layout of the source code so these two segments will appear the same to the browser: 
first sentance.  Second sentance.

first sentance.
Second sentance.
As a result of this you need to use the <br> tag to make the browser take a new line. Also, the <p> tag takes a new paragraph. Finally, the <hr> tag gives a line across the page to help segment sections. Time for another example, 
<html>
Hello everyone<p>
What time is it?<br>
What day is it?
<hr>
<html>
gives a page containing only,

Hello everyone

What time is it?
What day is it?

Before we go much further I better introduce a more useful structure to an HTML page. Although the form given above will work it isn`t taking advantage of any of the powerful top- level tags available. First the outline then the explanation. 

<html>

<head>
<title>Title of this page</title>
</head>

<body>
The text of the actual page.

</body>
</html>
The html tags are already known. The <head> tag marks the header of the page. The section is intended to hold such information as the page title ( shown above, with the title between the title tags), meta information for highly none-standard information, javascript code, etc. The head tags does not have to be included if you only give the title but it is better to include it to help segmet the code and make it easier to read the source in the future. The body tag marks the start of the page proper, what the user will see in his window. Extra options can be added to this tag to produce useful effects and this will be discussed later.LINK! In fact, most of the tags in this guide can be expanded to produce more effects. There are usually a core of common options plus extras to the specififc command. One thing to remember is that HTML tags that are nested must be closed in the order they are opened. For example, say we had two tags <a> and <b>, 
<a><b></b></a>
Valid
<a><b></a></b>
NOT valid

2 Basic text size commands

 HTML has two different commands that effect the typeface the user sees when they view the page. They are the <font> and <h1> to <h7> tags. The h tags are intended to produce headings, hence the use of h, and as a result they automatically take a new line when you swicth off the tag. The <font> tag allows much tighter control of the text and needs to be supplied options. The base options are really size and color (<- - note american spelling). First I`ll give h tag examples then dicuss <font> in more detail.

<h1>

<h2>

<h3>

<h4>

<h5>
<h6>
<h7>

3 The <font> tag

The <font> tag is amuch more versitile tag intended for general use. The smallest version of this tag only specifies the si\e of the font to use:
<font size="7"> text </font>

Note: The sizes used in font work in the reverse of the ones used in the <h> tag, so 1 is the largest and 7 is the smallest. The more general version of this allows you to change the colour of the text displayed:
<font size="7" color="#0000ff">
(The size option does not have to be included as well)
The colours in HTML are specified as hexadecimal RGB values from 0 to FF (0 to 256). There are also preset colours built into the HTML specification, eg, 
<font color=red>
would produce red text. The best way to find these is trial and error, but remember that the code must be all one word to miss spaces out, or try replacing them with and underscore, hyphen, etc.

4 Other text modes

There are a few more basic text modes and styles you can apply to text. They can also be combined, as with most tags.
StyleTagExample
Bold<b> </b>Test text
Itallics<i> </i>Test text
Underline<u> </u>Test text
Emphasis<em> </em>Test text
Strong<strong> </strong> Test text
Typewrite font<tt> </tt>Test text
Pre-formatted text<pre> </pre>
Test 
text
Strike<s> </s>Test text
Blink<blink> </blink>Test text
The thing to note with the pre-formatted tag is that the broswer shows the test exactly as it appears in the file, so this is good if you have very strange layouts to do and you don`t mind it appearing in that font. It also enables you to write tables if you want people who`s browsers don`t support the <table> tag (see later) to be able to read it easily.

5 Images

 Writing text is all very well but the thing that really makes the WWW a great tool is it`s ability to display images in the page. This is done with the <img> tag. For example, if you wanted to show the picture "test.gif" in your page the most basic code would be: 
<img src="test.gif">

Note: There is no end tag for images, all the info is in the first one.
There are a few more options that are generally good to include:
alt="text"
This tag specifies the text to display if the user has the images swiitched off.
width="number"
heght="number"
These two tags allow you to change the size of an image using the scaling image built into the browser, which is useful if you have the same image many time at different sizes. It is also good form to include it with every image, set at the default size of the image. This is because it will speed up the layout of the page if the browser knows the size of the image before it is loaded.
border="number"
This is the size of the border around the image. This is useful when using the image as a button to link somewhere else. This will be explained in the links section.
There are also things called imagemaps which are images that take you to different links depending on what part of the image you click on. These are best created with a program written for that purpose.

6 Links

 There`s no point in having great pages and not being able to navigate between them. This is what links are for. They can be split into two different kinds: internal and external links. Internal links are links between different places on the same page. The code for the link is: 
<a href="#location">Click here to go to the location</a>
.
[other parts of the page]
.
<a name="location">anchor</a>
The last line is called the anchor and it is placed where you want the link to goto. You can put something between the start and end of the tag if you want to link exactly to it. The first line is the one that actually takes you there. The text between the tag is what you see in the browser highlighted and clickable. The # tells the browser that this link is an internal one.

The other type of link is the external link, to another page somewhere: 

<a href="http://www.scotek.demon.co.uk">Click here</a>
Here, the desired address is put in the href part. If the page is in the same directory as this one you can just supply the filename, instead of the whole path, eg: 
<a href="page2.html">Continue?</a>
Images can also be used imstead of text to be the clickable object, eg: 
<a href="page.html"><img src="click.gif" border=0></a>
The use of the border option here means that the image is not highlighted but remove it to make it highlighted, which is the normal mode.

7 Lists

 A lot of the time you will want to display a list on your web page and because of the nature of HTML (ie, you don't know what font the end-user is using or their window size) it is difficult to display neat tables 'by hand'. HTML provides a range of tags for various types of list.
Ordered lists
These are lists that give each entry a number. The list starts with <ol> and each entry is started by <li>. An example, code on the left and the example of it on the right. 
<ol>
<li>Number 1
<li>Item 2
<li>Three...
</ol>
  1. Number 1
  2. Item 2
  3. Three...
Unordered lists
These are basically the same as ordered lists except that each entry is not numbered, just marked; 
<ul>
<li>Just a symbol
<li>Style codes can<br>be used as normal
<ul>
<li>And all lists can be nested as well
</ul>
<li>And it all lines up well.
</ul>
  • Just a symbol
  • Style codes can
    be used as normal
      And all lists can be nested as well
  • And it all lines up well.
Definition lists
These are useful for indenting area of text; in-fact the list section uses a definition list so look at the source for an example. <dl> starts the list, <dt> gives each section a title, and <dd> starts the body of each section.

8 Tables

 Tables are probably the ultimate in plain-page HTML layout control; with smart use of tables you can achieve almost any layout you could want. Of course, tables have their original use as well - laying data out in tables. If you want to progress in HTML a good grasp of tables is vital.
Tables work as follows: first you start the table with the <table> tag. This has many options that will be explained later(in-fact, all table tags do). Then you start a new row of the table with <tr>. Each item of data, or cell, is then started with <td>. Then end the row with </tr> and start another row. When done close the table with </table>. An example, 
<table>
<tr><td>Star<td>Radius (times Sun radius)</tr>
<tr><td>Betelgeuse<td>~320R (variable)</tr>
<tr><td>Aldebran<td>22R</tr>
<tr><td>Arcturus<td>12R</tr>
<tr><td>Antares<td>320R</tr>
<tr><td>Mira<td>210R</tr>
</table>
gives,
StarRadius (times Sun radius)
Betelgeuse320R (variable)
Aldebran22R
Arcturus12R
Antares320
Mira210
There are a huge number of options that can be used with these tags and some are described below. The tags in square brackets after the option name indicate what tag they can be used with.
width="number" [table,tr,td]
This determines the widthof the element and can be expressed in pixels or percent.
align="value" [table]
Unsure of this one as it is somewhat browser dependant. Think it is how text flows round the outside of the table.
Values: left, right, more?
valign="value" [table, tr, td]
This specifies how the text is vertically aligned within each cell.
Values: top, center, bottom
border="number" [table]
Gives the width in pixels of the border around the table. 0 gives no border.
cellspacing="number" [table]
The space in pixels between cells.
cellpadding="number" [table]
The space in pixels that the text is placed inside the cell limits.
bgcolor="color" [table,tr,td]
The background colour of the element. RGB value or preset colour.
colspan="number" [td]
rowspan="number" [td]
The number of rows/columns that this cell goes across. Useful for headings, etc.
The best thing you can do with table is experiment and with nested tables you can get any layout imaginable.

9 Frames

 Frames introduce a whole next level of complexity to HTML. Frames are used in the pages you see which are split up into many different documents (such as the two frames in The Underhive main menu. This is only a quick overview of frames as it's a large topic.
The root page that the user enters the URL for does not contain any of the page contents. Instead it contains tags that tell the browser how big each of the frames are and what pages to load into them. The actual page contents are held in these HTML pages and that is what is displayed. For an example see the the above page: index.html is the root page and it loads menu.html and main.html into the frames.

10 Forms

 Forms are another complex area of HTML. These allow the user to enter information and send it back to where the page comes from. The informationis collectedin various types of gadget and sent to a program specified inside the HTML. This program, whichis a cgi-script, then react to the output; maybe redirecting you to another site, dynamically creating a new page for you, indicates your purchase of an item, etc.
To use these you need to be able to use cgi-scripts and as this is not allowed on a lot of servers I won't go into this yet (ok, real reason is that I don't think many people will use it but if you want it email me. Same with the frames.)
An example of forms is my player advert forms at http://www.scotek.demon.co.uk/adform.html.

11 Good Style Tips

 Some words of wisdom learnt in my 3+ years of writing HTML:

Disclaimer

 I accept no liability or blame for damage, incompatability, project failures, or anything else bad (or even good) caused by using this guide. It is intended only as what I would tell a beginner to help them start with HTML. As indicated at the top this is how I do it, not necessarily the right way to do it. Your milage may vary.

ŠPaul Dempster, 1999.
If you wish to post this elsewhere please ask before you do. I'll probably let you but I would like to know. I won't bite your head off.