A short introduction to HTML

This document is part of HTML TagWriter documentation. If you want to use it for didactical or commercial purposes, please contact the author first.

In this document the basics of HTML and the most important parts of a webpage are explained. It is really necessary to know these basics if you want to make a decent site. If something goes wrong with your page, you'll be able to search the cause and fix it, instead of bothering with trial-and-error.

*Basics

HTML stands for "HyperText Markup Language". I just tell you this because it's rather funny if you're webmaster and you don't even know what it means. "HyperText" means that it's possible to jump to other files or parts of the same file by clicking text that has been "linked". The table of contents above this text is an example of hyperLinks.

An HTML document consists of plain text. In fact, an HTML file is nothing else than an ordinary text document. The difference with a boring plain text file is that HTML files also contain commands. These commands can tell your browser to display text in bold, change text size, insert a picture... In the early days of HTML there were only a few commands, so HTML documents were quite boring. Nowadays a whole collection of exotic features can be used, like text in any color, embedded sounds and movies, scripts...

An HTML command is called an 'element'. A typical element consists of three parts: a start tag, content, and an end tag.
An element's start tag is written <element-name>. An element's end tag is the same, but with a slash before the element name: </element-name>.
An example of this is the element B, which stands for "Bold". This is an example of an element which needs an end tag, otherwise all text from the <B> tag on would be bold.
If you write this in your HTML document: 'this is an example of <B>bold</B> text',
you'll see this in your browser: 'this is an example of bold text'.

There are other HTML elements which have no content. For example, the line break element BR has no content, but it tells the browser to start a new line. So the only thing you need to do is insert the <BR> tag at the appropriate place.
'line1<br>line2' looks like this:
line1
line2
Tags mostly don't just consist of an element name. In most cases they have attributes. These attributes can appear in any order, they are separated by spaces and are written like this: attribute=value.
Attributes are always optional, with some exceptions, though. For example, the tag <FONT> on its own doesn't tell a thing. At least one attribute is required here, for example <FONT size=3>.
Mind that an end tag never has attributes, so "</FONT size=3>" does not make any sense and will likely confuse lots of programs.

A word about capital and small letters: luckily, HTML tags are case-insensitive, this means: you can use what you like. If you like to write "<HtMl><tItLe>...", no problem. This program uses the following convention: element names are written in capitals (except for <br>), and attributes (names+contents) are written in small letters. This is to improve readability. Example: <BODY bgcolor="white" link="blue">

Now you know the necessary things about elements and tags. Mind that a lot of people use to confuse tags with elements, and even I do it a lot, so it's not a capital offense. Remember that tags are just the 'representants' of elements.

*HTML Document structure

An HTML document starts with <HTML> and ends with </HTML>. This is important, since these tags tell the browser to implement the file as an HTML document.
Each HTML document consists of a header and a body. The header starts with <HEAD>, and ends with... </HEAD>, right. The HEAD element has no attributes.
The most important element that must be within the HEAD element, is the TITLE element. Each HTML document must contain a title element! This element has a start and end tag, and between these tags the document's title. A simple example of a header is:

<HEAD>

<TITLE>This is an example!</TITLE>

</HEAD>

After the header comes the body: the actual contents of the document. You probably already have guessed the start and end tags: <BODY> and </BODY>. The most common BODY attributes are: bgcolor=c, which sets the document's background color; text=c, link=c and vlink=c, which set the color for text, links and visited links respectively. 'c' can be a color name or a color code. (Don't worry, TagWriter contains all available color names and an automatic color code generator.)
Luckily you don't need to type these attributes for the BODY element, you can set them by choosing them from the "Properties" button in the "Tools & Settings" palette.

Within the BODY element is your text, which you can decorate with a seemingly unlimited number of different tags. It is beyond the intentions of this document to sum them up here, but every webmaster should have a reference with the most common HTML elements. Just search for "HTML reference" in a search engine, and you'll certainly find some useful ones.
Another way of learning about the tags and their attributes, is to insert them in your file and experiment with the contextual pop-up menus to see what attributes can be used and what their effect is.

To get started, I'll discuss the most important tags here. First you need to know something about URLs.

*URLs and Locations

Each web page has its URL (which means "Uniform Resource Locator"), which is the location of the page on the Internet. A URL consists of three parts: the transmission protocol, which can be "http://", "ftp://", ...; the server location and optionally the location of the page on that server. A typical URL looks like this: "http://www.yahoo.com/search.html". In this example, the protocol is "HyperText Transfer Protocol", the server is "www.yahoo.com" (where www stands for "World Wide Web" and ".com" stands for "Commercial"), and the location of the page on the server is just "search.html", so it is in the "root" directory of the server.
The suffix ".com" gives information about the server's status or the country it is in, for example, a Belgian server will have the suffix ".be".

Important: URLs use UNIX directory notations. This means, when a file "index.html" is in a directory "main", the file's location is: "main/index.html". If you are in the file "main/info/inform.html", and want to go to the file "main/index.html", use: "../index.html". So the "../" means: 'go one directory closer to the root directory'. Consequential, "../../" takes you up two directories and so on.
Always use this system instead of typing full URLs, this will avoid lots of work if you should need to transfer your files to another directory or server, and will ease browsing through your site when it resides on a local hard disk! If you use the built-in local link and image inserters of this program, you don't need to worry about these URLs, but remote URLs need to be typed (it's recommended to copy these from your browser's "Location" field when possible!)

*Links

A link is inserted with the A tag, accompanied by the attribute "href=url", where url is the link's destination. A link ends with </A> and you can't use nested links (= links within links).

There are 5 common types of links:

Local links: these refer to a file within the same server. There is no prefix, only the path and file name are given. Example: <A href="../examples/sample1.html">Example 1</A>
'http://' links (remote links): links to another server (see section "URLs")
'mailto:' links: when clicked, these will open a window or application in which you can send a E-mail. You can specify the letter's subject in newer browsers. Example: <A href="mailto:some.address@somedomain.com?subject=Example">Mail me</A>
'ftp://' links: for downloading a file. The server must support anonymous connections for this.
'news:' links: open a newsgroup window or application, in which you can send newsgroup messages.
'#name' (Anchor) links: these point to a named object, which can be in the same file or in another file. This is useful if you want to jump to a specific part of a file. For example: <A href="#contents">...</A> will bring you to the named object "contents" in the same file, and <A href="index.html#contents">...</A> will bring you to the named object "contents" in the file "index.html".

If you use links within a document with "Frames", you need to specify in which frame the link should be opened, by adding the "target" attribute to the tag. If the link is to be opened in the same frame, you can omit this attribute, but otherwise you need to use target="name", with "name" the frame's name, or "_parent", which means: the frame in which the frames are defined, or "_top", which means the window in which the document is shown.

*Images

There are two image formats which are standards for HTML pages: the GIF and JPEG formats. Most people don't know the differences between these two formats, so I'll explain them briefly here.

First something about using images in your documents:
Images are stored in external files, and called in the HTML file by the <IMG> tag. So to insert an image you must use this tag (= click the "Image" button in the "Objects & tags" palette). A necessary attribute of this tag is src=imageSrc, where imageSrc is the location of the image. A good idea is to put all your images in a separate directory, to facilitate bookkeeping a bit!
Other attributes are the width and height, specified by width=n and height=n, with n in pixels. It is not necessary to include this information, but it will speed up rendering of your pages in a browser. And, try to avoid displaying images at a size larger than their original size, leave those techniques to Losedows webmasters.

About image formats:
The GIF (Graphics Interchange Format) format can contain an image with a maximum of 256 colors, and even whole animations. The advantages of GIF are: you can use transparent colors, and images with few colors take very few disk space. The disadvantage: large images with a lot of colors take a lot of disk space (and thus download time) and you cannot use more than 256 colors (exept for some exotic variants of the format).
The JPEG (Joint Photographers Expert Group) format uses a special compression algorithm which can achive spectacular results: you can reduce a photo's disk space to 20% with no noticeable loss of quality. The compression can be chosen, from low quality (small file but introduces distortions) to maximum quality (large file). In most cases medium quality is amply sufficient. The advantages: the image can be in grayscale or millions of colors and takes very little space compared to the image quality. The disadvantages: you cannot use transparency nor animations.
A fundamental difference between GIF & JPEG is that GIF uses a "lossless" compression, which does not alter the image's data, while JPEG's "lossy" compression slightly alters the image's composition, which stays invisible at good quality compression rates.

Both formats can be saved in such a way that the images are gradually displayed when loading, called "Interlaced" format for GIF and "Progressive" for JPEG. (Mind that Progressive JPEG is not supported in older browsers.)

About GIF animations
You probably have seen them already, those annoying animated ads which can take minutes to load before the real contents of a document come throuh. That's a bad application of animated GIFs, but apart from this they can be used to bring some life into your pages.
An animated GIF consists of nothing more than a series of frames which are displayed after each other. Each frame can have its own delay, position and transparent color.
If you want to know more on animated GIFs, check out the page about web graphics in the "informative section" of my site. It includes tips for optimizing animation colors and size!
An excellent (freeWare!) program to make animated GIFs is GifBuilder by Yves Piguet.

*Tables

Tables are one of the trickier things to do in HTML, every webmaster will agree with that. Luckily TagWriter is able to create instant tables from tab- or comma-delimited lists, but if you want to spruice up your table's design, a bit of table-tag knowledge is necessary:

*A table starts with <TABLE> and ends with </TABLE>. The most common attributes you can add to the <TABLE> tag are: border=n, cellspacing=n and cellpadding=n (space between border and cell contents). n is size in pixels.
*A row starts with <TR>. Attributes: align=left, center, right (horizontal alignment) and valign=top, middle, bottom (vertical alignment). It is not necessary to end with </TR>, but because of a bug in certain browsers it is recommended.
*A new cell in a row starts with <TD>. Attributes: see <TR>, and width=n or width=p%, where n is width in pixels and p is width in percentage of the total available space. If you don't specify width, the cell will have the width of the largest object in that column.
Mind that you only need to set the widths for the first row of the table. The other rows will have the same formatting.
The same comment counts for </TD> as for </TR>.
Of course you don't need to type any attributes, just use the contextual pop-up menus to edit them easily!
*A short example of a simple table:

<TABLE border=2 cellspacing=2 cellpadding=3> <TR align=left> <TD width=60 bgcolor="#B0B0FF"><B>Cell 1</B></TD><TD>Cell 2</TD><TD width=50%>Cell 3</TD> </TR> <TR> <TD bgcolor="#B0B0FF">Cell 2/1</TD><TD>Cell 2/2</TD><TD>Cell 2/3</TD> </TR> </TABLE>

Cell 1	Cell 2	Cell 3
Cell 2/1	Cell 2/2	Cell 2/3

*Forms

A form is a part of the webpage which can be filled in by the user, and the results can then be sent to a cgi script on the server which does various things with it, or to your own e-mail address. Cgi (Common Gateway Interface) scripts are often written in Perl. For example, you can use a cgi which takes the contents of a form and adds them to a guestbook, or which processes it to a fixed format and sends it to your e-mail address.
A form starts with "<FORM...>" and must end with "</FORM>". Two necessary attributes for the FORM tag are:
1. method: this can be "post" or "get". "post" is most common, for more information consult a HTML reference.
2. action: this is the URL of the script, or the e-mail address to which the form input should be sent. If you use an e-mail address, the form input will be sent under an encoded form (WWW-form format; WWW-forms can be decoded with TagWriter's text importer).

A form can contain lots of different input objects, written as <INPUT name=... type=...>. The basic types are: text (a simple text field), checkbox, radio and input or reset. The last two are the buttons which need to be clicked to send the form or to reset it to default. Another input object is the "textarea" which can contain multiple lines of text, written as <TEXTAREA name=... cols=x rows=y>Default text</TEXTAREA>.
For all input objects (except submit/reset), the name is important because it will be sent to the script or e-mail address under the form "name=content", where content is the text that the user has filled in, or the state of a checkbox.

*About file names

To avoid problems with server systems, only use the following set of characters in your HTML file names:

The upper- and lowercase characters from Aa to Zz: mind that on UNIX servers, file names are case sensitive!

Digits (0-9)

The following characters: - _ and . (dot)
So: no spaces, no diacritics... If you save a file for use on your hard disk only, you can use what you want, except the characters <, > or " because these can interfere with the HTML.
To avoid problems with the differences between upper- & lowercase names on UNIX servers, turn on "Lowercase filenames" in the program's preferences, and make sure all filenames are converted to lowercase while sending them to the server via ftp.

*Publishing your page

Now you know everything to make a decent web page. So the next thing you need to do is make it accessible on the Net!
First of all, you must find a provider which can offer you a piece of space on a server. Popular providers are Geocities and Tripod, which offer free web space - as contrasted with most other providers, who ask a fee. They are suitable for personal pages or small informational pages, although at the time of this writing, they all offer a decent amount of disk space. But if you have a more serious page that takes a lot of space, you're better off with something more professional, because:

these free servers are often very slow or down

the viewers will get annoying ads, inserted into the page itself or in a separate window/frame, when viewing your site

I suspect these providers, and especially Tripod, that they use their unreadable and unreasonable "Terms of Service" to save on server disk space: when new users sign up, they just throw away the oldest accounts because most likely any possible site violates their ToS...

There are various 'serious' providers (like Register.com) with various offers, but the general rule is: the more space you want, the more you'll have to pay. However, you might also find both free and ad-free providers which even offer cgi scripts and other tools, but you'll have to search very deep in the bowels of the Internet for that... The days of free Internet are over.

When you have your web space, you need to transfer your HTML files to the server, which is done by FTP (File Transfer Protocol). A popular Mac FTP program is Fetch.
The recommended method for working is: make your site on your own hard disk, and when it's ready, send it via FTP to the server. So make sure that the site itself is a copy of the original, which is safely on your hard disk. This will avoid that you lose all your work when the server crashes or gets hacked.

It depends on the server which names your HTML documents should have: in most cases the main page (which is loaded when entering your plain URL) should be called "index.html". The names of the other pages don't matter, unless you are so unlucky to be on a pre-historic DOS or Win 3.1 server (if these have ever existed anyway). But beware: a lot of servers are UNIX or Linux servers, which are case sensitive for file names! So on a UNIX server, "Index.html" is not the same as "index.html"!
Contact your provider for information on the type of server, and how to transfer your files.

If you should want to have your own domain name, like "www.yourName.com", be prepared to empty your wallets (luckily, prices have started to drop since a few years). If you really want to go this far, you may be better off buying yourself an entire server too, which will give you absolute freedom. Keep in mind that Mac servers are very hard to hack, at least when they are provided with the right software!

If you don't feel like "buying" an URL, there are also free "redirect" services, which provide a short URL like "http://go.to/yourName". If someone types that URL, (s)he is automatically connected to your real URL which can be as horribly complicated as you want. Try it with http://go.to/dr.lex! This redirect was provided by V3.com, which also offers free e-mail forwarding. Another forwarding site is NetForward (example: http://cryogen.com/dr.lex), which also offers e-mail forwarding (5 addresses per account). A great advantage of this, is that when your real URL changes, the forward simply has to be adjusted once to keep working. The disadvantage is that during the forward, an ad window may appear, unless you pay a yearly fee, which is, however, much smaller than registering a URL.

*Epilogue

That's it! If you want to know how I learned HTML: it was by opening different HTML pages and looking at the source. And I recommend the same thing to you: you'll learn more by looking at some pages than by reading all these guidelines (although you must take them into account!) When you have some HTML experience, take a look at the "HTML_Tips" file, it contains some handy tricks and guidelines for a good syntax.
After a while I wanted to know more, so I searched "HTML" in Yahoo, and amidst the countless pages I found a link to Carl Bäckströms HTML vocabulary, which was the start of the real webmastering. (Unfortunately he has discontinued this reference since years.) I became bored having to type all the tags in SimpleText, so I made my own HTML editor, which I now put at your disposal. Enjoy it!