How to create your first web page: Part 2

[TOP]

Outline for Part 2:

• Creating your page
• Getting some tools
• Make a new blank web page
• Elements in a blank HTML document
• Document head
• Old-style body attributes
• Anchors
• Colors
• Testing, testing
• Titling
• Lists
• Tables
• Wizards
• Hyperlinks and anchors
• Images
• File Names are Important on the web
• Image file types
• End of the page
• Converting Word Processor text to HTML
• Acceptable graphic file formats for conversion
• Summary – Writing a simple web page in practice

[TOP]

Creating your page

Because a web page just consists of text, and instructions in the text – you can type it all in pretty easily using any text processor. In Windows, you can use Notepad, for example – or anything else really. Why not use a word processor? These, after all, are good at text entry.

Well, you could use a word processor. All of the current word processor versions that I know of will save text as HTML. What they (usually) save is a nightmarish mess, on the whole, but it works – that is, it will produce a web page that looks like the one you created, as long as the right browser version is used to view it. But it's horrible HTML that is very hard to edit outside the word processor. There is, however, a way (several ways, in fact) to use any word processor to produce your text and still get fairly clean HTML (that is, understandable by you and everyone else!).

I recommend that you start out simply, so that you get to understand what you are doing. There is, however, no need to bang your head against the wall – you can use an HTML editor to create your pages.

Now here we enter into a few difficult issues. I don't know what platform  [NOTE 1] ) you are reading this on or how you are reading it, so I have to make some assumptions - which may be wrong in your case. If so, I apologize. I'm going to assume that you are:

1. Using an IBM compatible PC with Windows 97 or above [NOTE 2] 

2. Not using text reading software to access this material, rather than visual access

3. You are using, or have available at any rate, a copy of Internet Explorer 4 or above (Microsoft)

If any of my assumptions are wrong, you will have to adapt what I say accordingly; however, many people do fit these assumptions! If, however, you're a Mac or Linux user – or any other personal computer platform – then see this  [NOTE 3] .

[TOP]

Getting some tools

Now, I am not in the business of selling you anything here, or doing other than suggesting useful ways to proceed. But my honest opinion is that while you can write HTML using a simple text editor – especially if you have no other option – it's a painful process, and an editor designed for HTML is a much better bet.

That means I have to choose one, out of the many available. Clearly, I don't know how much you've got available to spend – if anything, at this stage. I don't intend, then, to try and make you buy an expensive product when you may not want to keep using it; neither am I stating that anything I suggest is the very best way to proceed – there may be better products that I don't yet know of.

The editor I've chosen to suggest as a starting point for you is, as far as I know, free of (currency-based!) payment or other obligations or catches (like: sneaky grabbing of your email address to sell on) but it's neither entirely free nor public domain. Go to:

http://www.arachnoid.com/arachnophilia

and download a copy of Arachnophilia. This is an HTML editor that does a good job of helping you without getting in the way – make sure you at least read the author's notes on how he'd prefer you to make payment  [NOTE 4] ; even if you decide to disagree, that's OK. I've used it here, with the author's permission, as the example editor.

You may find after using it for a while you'd rather use something else, or as well. That's fine. I use at least four different editors on any project, because they are all good at different things, and none good at everything – one of those I've continued to use for years now is Arachnophilia! Look at the links section for some other suggestions. If you don't want to use Arachnophilia, or have and prefer another editor, you can still follow through most of what follows.

So: install Arachnophilia (see the Arachnophilia web site for install help if you need it), and when you're ready we'll continue…

Right. So you've done that. Arachnophilia, you'll find, has the usual Help section, which gives you a quick introduction to some of the same topics as this article does. I'd recommend you to read it as well, but later: it covers the ground from a slightly different angle, which in conjunction with this will help you to grasp the topics. So first, let's make a web page.

[TOP]

Make a new blank web page

In Arachnophilia, create a new HTML document. Do this as follows:

1. click on the 'File' menu item
   

2. click on 'New File'
   

3. click on 'HTML File'.

It will offer you a set of default choices for colors and so on, just click on 'OK'. You will find yourself in a new blank document, with a lot of information filled in already – most of which are tags I have not described to you!

[TOP]

Elements in a blank HTML document

Now, look at the blank document. In case you don't have access to Arachnophilia at the moment, I've put a copy of it here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>(Type a title for your page here)</title>
<meta name="GENERATOR"content="Arachnophilia 4.0">
<meta name="FORMATTER"content="Arachnophilia 4.0">
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
</body>
</html>

Assuming that you have just loaded arachnophilia and it is set to its default settings, you'll notice that HTML code is highlighted in color. This is called "syntax highlighting" and is very useful for quickly seeing what is what. You'll see that it starts with a line beginning '<!DOCTYPE…' which is rather similar to the 'comment' type of tag. This line specifies the version of HTML to be used (there are various versions). Then you will see a line starting '<html>'. This specifies that this is indeed an HTML document, to be interpreted as such by the browser software, up until the matching closing tag, </html>.

[TOP]

Document head

Next, there is the statement '<head>'. This tag is also matched later by a closing tag '</head>', and the lines between them are not shown to the user by the browser, but are used for many control purposes. If you look at the source of pages from the 'net, you'll find that there are many other possible tags you can use in the head section. How do you look at the source? In most browsers, there will be a menu option somewhere for 'view source' – have a look in the help file.

The next line Arachnophilia has put here starts '<title>' (with matching closing tag) and this is the page title, which will be shown by the browser as the page description. For example the title of this document you are reading is set by something like this:

<title>How to create your first web page: Part 2</title>

and that's about what you'll see up there in the title bar of your browser.

There are various lines in the <head> section that start with <meta... and these are meta-statements, typically used by search-engines – this is the cutesy name for the computer software that searches the internet, page by page, and builds indexes – such as that available at Alta Vista. The <meta> tag is singular, there's no closing tag. Finally, the ending tag </head> appears.

[TOP]

Old-style body attributes

After that, the body of the document starts with the <body> tag, of course – but note that in the default new document created, some attributes appear between the opening and closing bracket of the body statement, after the word 'body'. These specify:

1. bgcolor

   – the background colors of the body text. Here the specification (#ffffff) means 'white body background'
   

2. text

   – the color of the actual body text. Here the specification (#000000) means 'black body text'
   

3. link

   – the color of a link that refers to other pages. Here the specification (#0000ff) means 'blue text'
   

4. vlink

   – the color of a 'visited' link that refers to other pages that you have visited. Here the specification (#800080) means 'purple text'
   

5. alink

   – the color of an 'anchor' link that acts as an anchor. Here the specification (#ff0000) means 'red text'.

These attributes are an example of the old pre-style sheet methods of controlling the characteristics of HTML documents. We'll leave them in, though, so you can see how it all works; in any case, it's a good idea to leave them specified for compatibility with older browsers.

[TOP]

Anchors

What is an anchor? An anchor 'anchors' something in the text. You may be familiar with the concept from a word processor. If not, then an anchor defines a fixed position in the text – either as the destination for a link, or as the location of the link in the text. The anchor is needed because there is no other fixed position in HTML text – its position on the page may change at any time, as the browser window is resized or the text size changed. The anchor positions are recorded by the browser software as it loads a page, and can then be jumped to or away from. An anchor tag is shown as <a> with a closing </a>. An anchor tag is also used to locate an image in an HTML document.

[TOP]

Colors

Why are all the colors specified in this way? Well, it's a legacy of computer-ese. The numbers consist of three groups of two digits, for example #ff0000 is read as ff, 00, 00 in what is known as the hexadecimal numbering system – one that counts to 16, not just to 10. Each two-digit group specifies one of 256 possible values for the amount of red, green and blue respectively. This isn't really the place to go into it – just accept it for now.

Now, most of these elements are normally needed every time that you make a new HTML page. An HTML-oriented editor, like Arachnophilia, generated them all for you automatically. It does this by using templates, which are stored in its template sub-directory (or folder). This usually will be (for the default install on Win 98 and so on):

C:\Program Files\Arachnophilia\templates

And you can make your own or modify those already there – later, please!

[TOP]

Testing, testing

What we will do now is a bit of experimentation. You can set up Arachnophilia to show you your web page by using any of several different browsers. There is also an 'internal' browser function, which makes use of Microsoft Internet Explorer (version 4 or above) to paint its pages. However, the internal browser function won't be happy if you are reading this page in the same copy of Internet Explorer, and then start Arachnophilia afterwards. What you need to do is:

1. close all browsers (and Arachnophilia, if it's open)

2. start Arachnophilia

3. select the browser: 'Preview-Select & launch browser-Internal browser'

4. open your browser again to this page.

Everything will then work just fine [NOTE 5] . Next, create a new page in Arachnophilia just as we did before. Now, view the new page in the browser from Arachnophilia. To do this, either:

• press the 'Preview' button that looks like an 'artist's palette with a camera on top'

• or use the menu item 'Preview – Launch selected browser'.

(If you have any problems, make sure you selected 'Internal browser' and please see Arachnophilia's documentation – but everything should work!)

What you will see is – nothing! Because the browser does not show any of the elements so far on the page – as I've already said. What it will show is any text in the document body, in between the body tags. So, change back to the HTML window. There will be two large buttons at the top of the screen if you have followed along so far. To change to the HTML window:

• click on the large button called 'untitled.html'

and then move the cursor on the screen to between the two <body> tags (if it's not already there).

Now, type something – whatever you like, 'Here is some test text' would do – and then refresh the browser view. To do this, just as before:

• click on the 'Preview' button

• or select the 'Preview' menu item.

You should now see whatever you typed on the browser preview screen. If you don't see anything, check that you have typed after <body> and before </body> and that you did refresh the view by hitting the preview button, not by just changing back to the browser window.

[TOP]

Titling

For a start let's give the page a title. Change back to the HTML view, as described before. Next:

• click in the top between <title> and </title> and change the text as you wish – try 'My Test Page'.

Refresh the browser view, just as before, and you will see at the top of the browser window whatever you typed in as the page title. So now:

1. change back to the HTML window

2. insert a heading before the text – whatever you like, 'Test Heading' would do

3. hit the 'Enter' key on the keyboard to make sure that the heading is on a line by itself.

Select the heading in the usual way so it is highlighted.

1. On the Arachnophilia menu button bar press the button called 'Fonts' (this is also available as a menu item)

2. a new button bar will appear

3. click the button marked 'H2'.

and you'll see the tags <h2> and </h2> will appear at each end of the selected text.

• Refresh the browser by hitting the 'Preview' button.

You will see a heading in the h2 size, and underneath, your original text in body text size. Now, for the next step(s):

1. deselect the 'Font' button again on the button bar

2. select 'Struct' (for Structure) instead

3. select the body text you typed earlier

4. click the new button marked 'BLOCK' that has appeared

5. refresh the browser.

You'll see that the text is now in block quote form. Go back to the HTML window, and this time press the 'Undo' button. If this is enabled (as it is by default) then the last action – placing the text within block quotes – will be undone for you.

Now we are using Arachnophilia here, but I emphasize that all this will work in much the same way with any HTML editor. They all offer much the same facilities for insertion of these standard HTML elements. So if you need to, or want to, use some other editor, try the same functions there – you'll get the same results. You could type all this into a standard text editor (like Notepad) and save it as an .html file, and view it in a browser, and it'd still all work the same.

[TOP]

Lists

Let's try some other bits out. Go back to the HTML window. We'll type some HTML in directly for a change. Type the following in the document body, just as I have laid it out here:

<ul>
<li>first item
<li>second item
<li>third item
</ul>

Now, press the preview button. You have a bulleted list. Now, go back to the HTML window and change the <ul> to <ol> twice (I've marked the changes by emphasising them below). The HTML should now look like this:

<ol>
<li>first item
<li>second item
<li>third item
</ol>

Refresh the browser preview, and you've got an auto numbered list.

[TOP]

Tables

Let's do a table. Type the following in within the body of the document:

<table>
<tr><td>table item 1</td></tr>
<tr><td>table item 2</td></tr>
</table>

Refresh the view, and you will see a table of two cells. Can't see the cells? Let's add a border. Change the HTML like this (changes emphasised):

<table border="2">
<tr><td>table item 1</td></tr>
<tr><td>table item 2</td></tr>
</table>

Refresh it, and you'll have a border round the cells. Let's add more than one item to each row. Change the HTML to this (changes emphasised):

<table border="2">
<tr>
<td>table item 1</td>
<td>table item 2</td>
</tr>
<tr>
<td>table item 3</td>
<td>table item 4</td>
</tr>
</table>

Now, for each row (tr) we have defined more than one item (td). Refresh the browser, and admire the results. You'd like it wider? Change the HTML like this (changes again emphasised):

<table width="80%" border="2">
<tr>
<td>table item 1</td>
<td>table item 2</td>
</tr>
<tr>
<td>table item 3</td>
<td>table item 4</td>
</tr>
</table>

We've now told the browser to make the table 80% of the width of the window. Refresh the browser view and have a look. I hope you are getting the idea of all this – it is really quite easy.

[TOP]

Wizards

Although we have been doing this 'by hand' Arachnophilia in common with nearly all the HTML editors I have ever seen provides some form of 'wizard' to do much of this. For example there is a table wizard, and a list wizard, to help you with bigger and more complex tables. But you can always test out how it all works by making a simple version by typing in basic HTML and seeing what does what, and which attributes have which effects. By testing in that way, you will find that you develop a better understanding of what you are doing, and why. Then you can use the wizards and understand why – when they don't achieve what you intended!

[TOP]

Hyperlinks and anchors

We'll just look at a few more essential features of HTML before we finish this section of the introduction. For example, HTML refers to 'hyper text…'. Let's put a hyperlink in our text. The easy way to do this is to click the 'Links' button on the button bar:

1. a new button bar appears

2. move to the last line of your document, but before the </body> ending tag

3. click the button marked 'DocRef'.

This adds a document reference anchor to your text. You can see it there, with the cursor placed ready for you to type. Type the following text: Test Anchor

What you should end up with is this:

<a name="link">Test Anchor</a>

The <a> is the anchor. The attribute here, inside the brackets after the '<a…' is 'name'. This defines the link's name, so that it can be referred to by name elsewhere in the document. We can leave it as 'link' for now. Note the quotation marks – these are needed.

Now, go to the first line of your HTML document – but after the <body> tag. Click the button marked 'DocLnk' (for 'link within this document'). Type the following text from where the cursor flashes:

Go to Test Anchor        

You should end up with this:

<a href="#link">Go to Test Anchor</a>

This time, we have the attribute 'href' meaning hypertext reference. The name 'link' set as a default by Arachnophilia is preceded by the hash (or pound) character, #. This indicates that the link is within the same document. Now, refresh your browser view, and you should see this as the first line of your text:

Go to Test Anchor

Click on it. What? Nothing happened? This will be the case if the destination – the line with 'Test Anchor' in it – is already visible on the screen. In that case, grab the bottom corner of your browser window and make it shrink so you can only see half the text. Now, try again, and this time on clicking in the underlined link, you should see the page jump to the destination anchor. Using the 'back' button on your browser will take you back to the originating anchor. See how anchors work, now?

Now change the name 'link' in each case to a new name – 'mytestlink' would do for now. Make sure you don't lose the hash sign or the quotes! You can if you like check out Arachnophilia's search and replace function to do this:

1. double-click on the name 'link' – the whole word will be selected
   

2. click on the menu item 'Edit' then 'Replace'
   

3. the replace dialog will appear with 'link' already entered in the 'Search For' field for you
   

4. type 'mytestlink'

   into the 'Replace With' box
   

5. click on 'Find Next' and then 'Replace' until you've finished.

Test that it still works. OK? You will usually need to do this, since Arachnophilia will call all the links you insert 'link', which doesn't work for more than the first one! To link to another document instead of the same one only slight changes need to be made, but since there are several new issues involved, we'll look at that another time, in the next article which is on how to set up a whole web site.

[TOP]

Images

What about adding an image? Well, I don't know what images you have got, in what format or where, so to simplify the issue I have provided you with a sample [NOTE 6] , which is (some say) a reasonable likeness of the author...



Simply right-click on this in your browser and select 'Save picture'. Name it as 'cynic.gif' and save it anywhere you like – but note where you put it!

Now, let's insert this image in your document.

1. Go to the HTML window, right down at the bottom, after the '<a name…' part but before the </body> tag

2. deselect the 'Links' button on the button bar and select 'Graphics'

3. click on 'NewImg' on the button bar that appears.

Aha! Something different has happened. Arachnophilia is asking you if you want to save your file.

* Don't do anything yet! *

Read the next two paragraphs before continuing!

[TOP]

File Names are Important on the web

I earnestly recommend you to make a new folder (sub-directory) in which to store your file. Call it something like 'webpages', and I'd recommend (for simplicity) that you put it in the root of drive C. If you don't know how to do this (instructions are for Windows):

1. select ' Drive C' in the pull-down list in the 'Save as' dialogue

2. then click the 'New folder' button (the picture of a folder with a 'star' at one end)

3. rename the new folder that appears as 'webpages', then click on the small folder icon next to the name to set the name change

4. click on the 'Open' button.

! This is important. On your local machine everything will work OK pretty much whatever you do. But most of the Internet servers are Unix-based and Unix does care whether a filename is in upper or lower case [NOTE 7] . For simplicity, keep everything in lower case. Moreover, I'd recommend that you avoid the use of spaces or punctuation in file names. So instead of calling your first HTML file something like:

My First HTML File.html

which will work just fine on a Windows 98 or NT- based machine, call it:

myfirsthtmlfile.html or to be brief,

firstfile.html

which will work everywhere. This is essential if you want things to work reliably, so start good habits now! So, to continue:

• change the name of the file as I have recommended

• then click on the 'Save' button.

Having saved your file, Arachnophilia now wants to know if it should copy your image files ('components', it calls them – they could be other things apart from images) to the same folder (sub-directory) as your HTML document. I recommend you to say 'Yes', until you know enough about what you are doing to know why you might want to say 'No'!

The next thing it will do is offer you a file selection box. Navigate to wherever you stored the cynic.gif file you saved a moment or two ago, and select it. Arachnophilia will insert a line in your HTML document like this:

<img src="cynic.gif" width="169" height="176" alt="">

which has several attributes included. Inside the <img> tag we have, first:

• 'src' – which means 'source', the location of the image file.

This specifies where the image is to be found. Note that, because you (I hope) allowed Arachnophilia to copy the image to the same directory as the HTML file, the image source has no directory path information in front of it.

The great advantage of this is that the document and image can be directly copied to any other computer folder/directory anywhere, and the source information will still be correct. If you get to the stage where you have hundreds of images involved, this may not be the best way to work. With a few, it'll simplify life for you.

The next two attributes are:

• 'width' – which specifies the image's width

• 'height' – which specifies the image's height

which has also been put inside the <img> tag. The reason this is done is so that the browser can leave a space of the correct size for the image when it draws the page, so that the elements don't jump around as the images load.

The final attribute is:

• 'alt'

This specifies an optional brief text description to show to the user if the browser can't access the image.

This also brings up an important philosophical point! The alt-text as it is known, should describe the image. This is for people accessing the page with the image loading turned off (for speed) or who are using a text-only browser (still common) with a helper-program to view images if they want. It also is helpful to blind Internet users, who browse using a reading browser. So let's put some text in the alt-text tag. Type whatever you like in between the two quotes – I put in:

alt="Allegedly an author look-alike"

Now, refresh the browser and let your mouse pointer hover over the picture. You will see – if you are using MS IE 4 or above, or Netscape 4 or above – the alt text that you typed appears as a 'hint'.

[TOP]

Image file types

You will note that the file type of this picture was a 'gif' file (Graphic Interchange Format, usually said with a soft 'g' as 'chif'). This is the most commonly used type on the Internet, and one that all graphic browsers support, but it is an archaic and limited format that only supports 256 colors as a maximum. To counterbalance this, it is capable of storing small animations. These are known as 'animated gifs'. An image saved as a gif can also be set to have a transparent color, so that it blends in with the background.

Another common type is a 'jpeg' (or jpg) file; these can store 'true' color 24-bit images, but are usually much larger in file size than a gif, and cannot support transparency: they are commonly used for photographs.

My preferred graphic file type is the PNG type – 'Portable Network Graphics' which has some of the advantages of gif and jpeg without many of the disadvantages, but not all browsers can display them. Any other type of image will NOT normally be visible in a browser – so don't use them. Again, this isn't the place for more details: check the links section for extended information.

[TOP]

End of the page

Right. That's enough on the basic process of writing a page. I could continue for a month without exhausting the topic (my fingers would be another issue), and there are endless reams of information available on the Internet to tell you how to continue. Try the help in Arachnophilia, for a start, or look at the links section at the end of this article.  We'll now look at how to use your word processor to make HTML documents.

[TOP]

Converting Word Processor text to HTML

Many people are very familiar with some word processor. Often they know Microsoft Word, which currently dominates the market, but there are other worthy programs around. Word can produce HTML documents, or save existing documents as HTML. You might like to try this sometime. It produces a nightmarish mess – at least, for humans to read, and uses lots of XML – which is a successor to HTML, and I'm not going into it here! But on the other hand, word processors nowadays are pretty good at helping you organize large documents – like this one, for example. HTML editors, of any sort that I've tried, just aren't in it as competitors for the tasks of entering, editing, spell-checking and grammar-checking (and styling!) text.

Arachnophilia provides a way to make use of most word processors, and indeed some other programs too. Let me introduce you to RTF. RTF stands for rich-text format, and it's rather like a presentation-oriented version of a mark-up language. It has some large advantages, to my mind:

1. It doesn't support any sort of macros or programming. This means it can't easily carry a virus of the macro type. Many recent fusses have been caused by these types of virus (often Trojans, really) so if you need to give a document to someone, why not give them an RTF version? You can ask them to do the same for you, and save yourself much worry (not all worry, of course!)

2. It is a universal save language, not word processor specific. You can save as RTF from many word processors currently available, and some older ones. You can set it to be your default format on many word processors

3. RTF maintains almost all document features, except active ones – which aren't needed in most documents

4. Most relevant here, Arachnophilia can open RTF documents and translate them to HTML for you.
   

This is a very neat idea and a clever trick. You'd think most HTML editors would do something similar – but they don't. The process is not quite perfect. The translated document will look pretty much like the original, unless it's somewhat unusual, but Arachnophilia does not always produce absolutely concise HTML [NOTE 8] . This may not bother you at all, and if it does bother you, it's a heck of a lot quicker – in most cases – to let Arachnophilia do the translation and then tidy it up a little, than do it all any other way. I practice what I preach – that's how this document was put together.

In case you should ask, "Hang on – why should I need to do all this? Word saves my document just as I want it" then here's a couple of good reasons: First, file size. The original version of this document you are reading ends up the following sizes when saved in different ways:

This, remember, is for exactly the same information content – it's just the superfluous overhead that's reduced  [NOTE 9] . One old joke about the Internet is that 'www' stands for 'world wide wait'. Keep file sizes down and everybody waits less for the information.

Next, try this. Resize this window (assuming you are reading in a browser, of course!). Next, resize the text. Don't know how? Check the help in the browser.

Notice how the text resizes and adjusts as you adjust the window. Text saved by Word's HTML feature won't adjust, which I find very irritating!

Anyway, assuming I've convinced you it's worthwhile, the next exercise for you is – to try the RTF to HTML conversion process. Either open an existing Word document (substitute your word processor here) and save it as RTF format, or write a new one. Then, open it with Arachnophilia.

If your word processor does not support saving documents as RTF format, all is not lost, as there are various other ways you can get the text into Arachnophilia. I'd recommend that you check Arachnophilia's Help on this before you start, as there are various ways to do this and it explains them all.

[TOP]

Acceptable graphic file formats for conversion

If you have graphics embedded within your document, you'll find another minor 'gotya' – there can be problems with images disappearing from converted documents, unless they are in *.gif or *.jpeg format. One easy way I have found to get round this when I'm pushed for time (always!) is to use the 'save as html' option in Word, and save the document. Then go and have a look where it saved it all – it will have converted any images, embedded spreadsheets, graphs or whatever in the document to *.gif files of the right file size for web use. Useful! – but I throw away the rest of the conversion after I've copied the images and use the Arachnophilia RTF converted version! The images then have to be replaced in the document using the <img> tags from the button bar.

The next thing we'll go into is how to style your pages – but first, let's have another summary.

[TOP]

Summary – Writing a simple web page in practice

• HTML documents just consist of text and instructions. They can be created in any text editor…

• but it's easier to use something designed to edit HTML.

• A document has a <head> section with various optional control and instruction meta-statements.

• The <title> section in the <head> sets the title that is shown by the browser.

• There are various standard structural elements available for use in the document <body>, including ordered (numbered) lists <ol>, bulleted lists <ul> and tables <table>.

• Links within the document are set by using the anchor tags <a>.

• Attributes can be added to modify the effects tags have – they are only placed in the opening tag.

• Images for web documents should be of only a few types – GIF, JPEG and maybe PNG – if you want most people to be able to see them.

• File names are important – to make your life simple use lowercase names, standard name extensions and avoid spaces or punctuation in the names.

• The suggested HTML editor can convert your word processor text to HTML retaining the document structure.

Footnotes

 [Note 1] type of computer, I mean: sorry, it's geek-speak; you'll find it everywhere, so you might as well know what "platform" means

 [Note 2] Windows 95 is also fine, but you may have to update a file or two. Check on the Arachnophilia website

 [Note 3] Notes for other platforms: for Mac users, Arachnophilia may run under SoftWindows (the Win 95 emulator, not the Win 3 version). Neither the author nor I can see any reason why it shouldn't run but I haven't tried it. Since straightforward HTML editors for the Mac are short on the ground (as compared with complex stuff like Macromedia) this may be useful if it works (though I've heard of one called BBEdit).
Arachnophilia does not run in native Linux or BSD, but it should work using the 32-bit Windows environment subsystems, several of which were becoming available as I wrote this. The better ones weren't free, sadly, and I haven't tried it. There are however endless varieties of tools for writing HTML on Linux machines, so you just may be able to get by!
For Atari, Commodore or Acorn - or any others - I don't know of any comparable editors. Check on SIMTEL or similar Archives.

 [Note 4] He'd like all us whinging people in the West to stop complaining for even just a single day! You think this is cheap? Well, pay up then!

 [Note 5] This does assume (as I said) that you have a copy of Microsoft Internet Explorer version 4 (or above - 5+ is definitely preferred, or at least 4.01) on your computer. This product allows other programs to use it for display. Other browsers (currently) don't. For this reason, you may want to install a copy even if you prefer to use another browser as your main tool, though it is rather huge. If not, you'll have to specify and select an external browser in Arachnophilia. This will work OK - see the Help.

 [Note 6] Or rather Microsoft has. The image is from Microsoft Office 9 clipart.

 [Note 7] Unix? Often SUN or BSD or Free BSD, or Linux, which is much the same as Unix.

 [Note 8] I don't mean that there are errors - but there tend to be a lot of formatting instructions. I prefer (when feasible) to remove these and use Style Sheets to control formatting. Moreover, the HTML produced is always more concise than that produced by Word, for example.

 [Note 9] Superfluous as far as a web page is concerned, I mean. It's not superfluous for Word - it enables the document to be exported to HTML and re-opened in the same form - "round-tripping", it's called. It must have taken someone an awful lot of work to get Word to do this...