Jan's Guide to HTML

Introduction

Contents: About This Guide - What do I need? - About HTML - Tags And Attributes - Some Definitions

Chapters

Table of Contents
Introduction
Basic HTML
Text
Images
Lists
Anchors
Tables
Frames
Forms
Javascript
SSI
CGI & Perl
Style Sheets
Special characters
Colour examples
HTML resources
Recent Updates
Index

About This Guide

This guide is started out as a guide to HTML years ago. Now it has grown to include some Javascript, Server Side Includes, CGI, Perl, information on Style Sheets and other things that are not strictly speaking HTML.

The guide takes an approach presenting information in little bits and together with examples.

Your feedback is greatly appreciated. If you have any comments and suggestions or if you think you have discovered any mistakes, please contact me by [email protected].

I (Jan Weijers, that is) retain copyright to this guide. You are not allowed to reproduce or transmit this publication in any way, whether on the world wide web or otherwise.

Finally, the obligatory disclaimer: I have done my best to provide accurate information but cannot give any guarantees as to that accuracy and certainly cannot be held liable for any damage or loss that results from using the information in these pages.

What do I need?

First of all, you are going to need software to make HTML files. Choose whichever one you like.

Secondly, you are going to need at least one web browser. If you don't have one already you can download either Netscape Navigator or Microsoft Internet Explorer for free. These are the two best known browsers and they exist for most computer platforms. If you use Macintosh you could also choose iCab. This browser is made by a German company, it is smaller and faster than the two big guys but does not yet support Javascript or style sheets. For windows users there is an alternative called Opera. Since none of these browsers exactly follows all standards, I would recommend you get more than one and try out the pages you make in different browsers.

Thirdly, you are going to need FTP software. FTP stands for File Transfer Protocol and in most cases you will need FTP software to send your work from your own computer to your web server. My favourite FTP software for Macintosh is Anarchie and for Windows it's WS_FTP. Again, there are many FTP packages from many manufacturers so use whatever you like best.

That's it, if you get an HTML editor, a web browser and an FTP package you have all the software you need to get going. As you see you can get all of these things for free if you shop around a bit.

Finally, you will need some space somewhere on a web server to host your pages. If you are a student you might be able to get some space on the server of your faculty. Most internet access providers include some free web space with the dial-up accounts. Finally, there are companies such as geocities that offer free web pages (although they force you to include their advertising). If you want to have your own domain like I do, you will need to make a deal with a specialised company that hosts web sites. Prices start at $9.95 a month.

If you have the software and a place to host your pages you are ready to go.

About HTML

HTML stands for HyperText Markup Language. What that really mean is that it is a set of codes and instructions to publish pages on the world wide web. HTML used to include tags and attributes for formatting text, but in recent versions this is done more and more through Style Sheets.

HTML is really simple to learn. It is possible to start with very simple documents, and make them more fancy as you learn more about HTML, Style Sheets, Javascript and Java.

This guide can be one starting point to learn about HTML and other things related to web authoring, there are many others available on the web. In the resources chapter you find links to some of those.

All source code in the various examples is written on a light grey background in Courier New or another fixed width font, like this:

<B>Bold Text</B>

The resulting output is usually immediately behind the example, in a grey box and Times New Roman or another Serif font, like this:

Bold Text

These pages are not a complete guide to all elements and attributes in the book. However, should be more than enough to get you started. Generally, the guide is updated to HTML 4.0, the latest standard. The pages themselves are in HTML 4.0 (transitional). Consult the World Wide Web Consortium for more information on these standards.

Tags And Attributes

Any basic HTML tag looks like this:

<TAG> the text that is to be formatted </TAG>

There is always a tag to signal the start of a link or style. The same tag with a "/" is used to end the link or style. An example of regular tags are <P> and , which surround a regular paragraph of text.

An attribute is like an addition to a tag that gives it extra meaning or chooses one of several options. For example:

<P CLASS=warning>

The CLASS attribute defines that this paragraph is of the type warning. The style sheet related to this page will provide information on lay-out for a paragraph of type warning.

Note that HTML as such is not case sensitive. That means that <BR> will have the same result as <br>. I have a habit of using uppercase in tags, but there is no reason why you should do the same. Depending on the server you use, filenames may be case sensitive. That means that index.html and Index.html could be considered two different files. I have a habit of using filenames entirely in lowercase, to avoid problems with this.

Some Definitions

Attribute an extension to a tag (see below).

Browser is the client software for the World Wide Web. Netscape and Microsoft Internet Explorer are two very famous ones, but there are many others. Those people who want to look at your pages will need a browser to download and view them. A browser is also called a User Agent or UA.

CGI Common Gateway Interface, scripts that interact with your pages and your web server.

CSS Cascading Style Sheets, see style sheets below.

FTP File Transfer Protocol. This is a protocol to send files over the internet. Usually you will use FTP software to upload your HTML files, scripts and graphics to the server.

GIF Graphics Interchange Format; a graphics format owned by, if I am not mistaken, Compuserve. It is the most widely supported graphics format.

HTML stands for Hypertext Markup Language. It is the language that is used to publish documents on the World Wide Web. Two things are very special about HTML. First of all, the definitions of text are very limited. HTML can define something as body text or a headline, but not how body text or headers are actually displayed. The second special thing is that HTML allows the creation of so-called links. The user can jump to an other document or part of a document by clicking on a link you have created. Lay-out is defined in so-called Style Sheets.

HTTP HyperText Transfer Protocol. The protocol used to send HTML files from the server (see below) to the browser running on your computer.

JPEG another graphics format.

Link a link allows a user to jump from one document to another or even to another service. A link in a document on the web can provide links to other documents on the same server or on the other side of the planet, but also to e-mail addresses or ftp servers. A link usually appears as underlined text but can also appear as a graphic,

Chapters

Table of Contents
Introduction
Basic HTML
Text
Images
Lists
Anchors
Tables
Frames
Forms
Javascript
SSI
CGI & Perl
Style Sheets
Special characters
Colour examples
HTML resources
Recent Updates
Index

Page is the word usually used for an HTML document. A page can be much shorter or longer than a real physical page but it is stilled call it a page.

Perl Practical Extraction and Report Language, a programming language useful for developing CGI scripts for web servers.

Server is a computer that makes your HTML documents available on the Internet through the Hypertext Transfer Protocol (HTTP). Most people will not have their own server, but use some diskspace on a big server. In fact, you don't have to know anything about HTTP or servers to be able to make publications. Most servers run under UNIX or Macintosh OS where filenames can be of any length (myfirstdocument.html). Additionally, UNIX has case-sensitive filenames. That means that INDEX.HTML is not the same as index.html (which it is on Macintosh). This is important to know if you start creating links.

Site the word often used for web site or server, basically a collection of pages.

Style Sheets are files that contain lay-out information such as font faces and colours, alignment, white space around images, etc. One style sheet can be used by more than one HTML document.

Tag is the smallest piece of HTML Code. An example of a tag is <HR> which draws a horizontal line on the screen. An attribute is something that is added to a tag and that adds functionality. For example, with <HR SIZE=10> you can draw a wider horizontal line.

URL is short for Uniform Resource Locator. It is a way of writing down any address on the Internet so that it is always clear which protocol needs to be used and where the document is. An example is http://www.weijers.net/index.shtml. It basically says "use the hypertext transfer protocol (http) to connect to the machine www.weijers.net and get the document index.shtml".


Please send comments and suggestions to me by [email protected].
I will also try to answer any questions you may have.

©1995-2002 Jan C.H. Weijers. All rights reserved.

I'd be pleased if you would visit my home page.

HTML 4 (transitional)