HTML TagWriter 2.3
By Alexander Thomas
dr.lex@cryogen.com
web-site: http://urc1.cc.kuleuven.ac.be/~m9608615
TagWriter-site: http://urc1.cc.kuleuven.ac.be/~m9608615/tagwriter/
A short introduction to HTML
This document is part of HTML TagWriter 2.3 documentation. If you want to use it for didactical or commercial purposes, please contact the author first.
*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". An example of hyperLinks is the list of contents above this text.
A HTML document consists of plain text. In fact, a 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, javaScript...
A 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>" does not make too much sense.
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
A HTML document starts with <HTML> and ends with </HTML>. This is important, since these tags tell the browser to implement the file as a 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, the stack 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. I can recommend "HTML Vocabulary", by Carl Bäckström (Nisseb Softwares). You can find it at http://www.calles.pp.se/nisseb. It's only US$ 5, so no reason not to register it!
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 (I'm not sure, but I think it means "Universal 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 eventually 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 DOS 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 "index.html", use: "../index.html", which means actually the same as "main/index.html", at least when you're in a directory within the "main" directory. So the ".." means: 'go one directory closer to the root directory'. Consequential, "../../" takes you up two directories.
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:dr.lex@cryogen.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 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 normal quality is amply sufficient. The advantages: the image can be in grayscale or millions of colors and takes very few space compared to the image quality. The disadvantages: you cannot use transparent parts nor animations.
A fundamental difference between GIF & JPEG is that GIF uses a compression which does not alter the image's data, while JPEG 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 this page, including 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 the stack 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>.
*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 |
*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 accents... If you save a file for use on your hard disk only, you can use what you want.
To avoid problems with the differences between upper- & lowercase names on UNIX servers, turn on "Lowercase filenames" in the stacks'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 even offer free web space - as contrasted with most other providers, who ask a fee. These two are suitable for personal pages or small informational pages, although Tripod recently has upgraded to 11 MB per user, which is already a very decent piece of webspace. But if you have a more serious page that takes a lot of space, you're better off with something more than offered by Geocities (which is slow too). There are various providers with various offers, but the general rule is: the more space you want, the more you'll have to pay.
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.
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 an antique DOS or Win 3.1 server. But beware: a lot of servers are UNIX 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 (common prices: $99 per month). 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://bitsmart.com/yourName". If someone types that URL, he/she is automatically connected to your real URL which can be as horribly complicated as you want. Try it with http://cryogen.com/dr.lex! This redirect was provided by NetForward, which also offers free e-mail forwarding. Another advantage of this is that when your real URL changes, the forward simply has to be adjusted once to keep working.
*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!)
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. 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!
To main help file