Guide to Hyper-Text Markup Language - HTML

In association with the Australian Open Access User Group

Note: In this document I have had to replace the angled brackets <> with curly brackets {} to prevent your web browser from executing the HTML command (there is a HTML command which can overcome this problem but I don't have the time to play with it!).

HTML is used for creating and linking pages on the Internet. In particular, it is useful for the Windows-like interface of the Internet called the World Wide Web (WWW) (also known as the World Wide Wait!). Software such as Netscape Navigator, Microsoft Internet Explorer or Quarterdeck Mosaic read the HTML files and present a (nearly) common appearance of each page under Windows.

Despite their fancy appearance, HTML pages can be easily developed using a word processor in "text" or ASCII mode. In fact, the first versions of HTML only used the text based features of Unix - the operating system of the Internet. The HTML "language" has grown to include graphics, frames and other features. Some fancy software is now available which makes this task easier but it is advisable that you first learn the basics through the use of a word processor. A typical HTML page consists of the following:
{HTML} [identifies the following as HTML "code"]
{TITLE} [start of title section]
The title [which displays at the top of the screen but not on the page - also used by many Search engines to describe the page]
{/TITLE} [end of title section]
{BODY} [start of section which is displayed in the active window]
{H1} Heading for page {/H1} [heading - in large font]
text
{/BODY} [end of body section]
{/HTML} [end of HTML page]

Note that HTML commands are always contained in angled brackets < > and that nearly all commands must have a closing command, which is the command preceded by /.

A summary of important commands is set out below.

Purpose	On command	Off command
Title for page (displayed in top pane only)	{TITLE}	{/TITLE}
Page contents (displayed in active window)	{BODY}	{/BODY}
Heading (Useful sizes 1, 2, 3 and 4)	{H1}	{/H1}
Indent (actually "unordered list" but see notes about IE)	{UL}	{/UL}
List item (e.g. bullet at start of line)	{LI}	{/LI}
New paragraph	{P}	-
New line (sometimes needed to properly format a page)	{BR}	-
Label (name) a line (to be able to jump to it with a link)	{A NAME="[label]"}	-
Link to a labelled line	{A HREF="#[label]"} description	{/A} (ends description)
Link to another WWW page (anywhere in the world)	{A HREF="[page address]"} description	{/A} (ends description)
Insert a horizontal line (rule)	{HR}	-
Insert a picture	{IMG SRC="[picture.jpg]"}	-
Link to an email address	{A HREF="mailto:[address]"} description	{/A} ends description
Bold text	{B}	{/B}
Italics	{I}	{/I}

Another useful command is {font}. This came be used to set the font and colour. For example {font color=fuchsia} should make these words a bright purple colour. {/font} ends the command. Watch the use of US spelling in HTML (CENTER, not CENTRE, COLOR not COLOUR etc).

Netscape has a handy feature under the menu selection VIEW / DOCUMENT SOURCE. It displays the web page with all the HTML commands highlighted. Try it now and you will see how messy it is to create a table in HTML (then click on the bar in the top left corner to escape back to here).

Netscape and others have created "extensions" to standard HTML to provide extra features, such as coloured text and blinking text. Pictures can be in GIF or JPG (JPEG) format. JPEG is particularly efficient a coloured picture I was using took up about 1.2 Mb in TIF or BMP format but only 71K in JPEG format. There are good shareware products such as Graphic Workshop for converting between picture formats.

Image "maps" can also be created to enable "links" to be embedded in pictures - when you move the mouse over a certain pre-defined portion of a picture a link is displayed at the foot of the screen. If you click the mouse at this time the "link" will be opened. Site map is an example of this feature - use VIEW / DOCUMENT SOURCE to see the HTML involved. Mapedit is a simple shareware program to achieve this feature - it creates the complex HTML for you when you use the mouse to define rectangular areas on your picture.

More information about HTML

I have found the book "Creating Cool Web Pages with HTML" by Dave Taylor (2nd Edition, IDG Books, 1995) a useful reference documents for HTML, including various "extensions". There are numerous similar books available on this subject. There are also many Web sites dedicated to HTML standards and software.

• Richard Litchfield's Web Tour gives several HTML reference sites.
• Yahoo has a growing list of HTML guides.
• HTML Overview by Russ Jones
• NCSA A Beginner's Guide to HTML.

Setting up your own Web Page

Hopefully the above examples show how easy it is to create your own HTML pages. How do you then make them available on the Internet? You need to store your HTML files and images on a computer which is permanently linked to the Internet- i.e an Internet Service Provider. How do you do this?

• You can pay someone to do it for you!
• Do it yourself! See the following tips.

Once you have an Internet account with a Service Provider you will probably find some "new user" information pages which set out the procedures and conditions for user web pages. Usually this involves the Service Provider setting up a password-protected directory for you on their Internet computer (which is probably running Unix but you don't need to know this).

Then you will need to obtain some file transfer software (FTP - File Transfer Protocol) which will run on your PC and enable you to upload files to the Service Provider computer. I have found CuteF TP very good for this purpose. You then dial up your service provider using the usual "winsock" software that comes with your "Internet connection kit" (if you are lucky) and start the FTP software. CuteFTP works like Laplink, with your PC directories and files in the left hand window and the Service Provider directory and files in the right hand window. Just double click on one of your files in the left window and it is sent to the Service Provider computer. The "main" page of your web site should be named INDEX.HTML (use Ctrl N under CuteFTP to change the DOS filename INDEX.HTM to INDEX.HTML or you can leave it as INDEX.HTM provided your links use the same name). Now you are ready to "announce" you web site - but that is another story.

Note about Internet Explorer

Internet Explorer seems to have an "unusual" implementation of HTML and the results are not always as expected. For example, every web browser (well Netscape and Mosaic) since the days of Unix has treated the {UL} (unordered list) command as an indent and {/UL} as unindent. Unfortunately IE does not, which is why, if you are using IE at the moment, all the text is crammed against the left margin of the page. Another trap is that the {LI} command (list item) is not automatically treated as a new line - you must add the {BR} (newline) command to force a new line at the start of a list (but not between list items!). 
 

Prepared by Michael Paine (email) (home page)
5 May 98