Introduction

This chapter gives you some essential information about this guide, explains about some of the software you need and ends with some definitions of essential terminology.

About WebThings

WebThings 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. That is why I renamed it into WebThings in 2005.

The guide takes an approach of presenting information in little bits and always together with examples. That way you can learn fast and apply your new knowledge immediately.

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 e-mail.

I, Jan Weijers, 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.

Every page of WebThings contains the parts:

1. links to the sections of this chapter, if this chapter has more than one section
2. links to the other chapters of WebThings
3. a link to the language selection tool, click the flag here to switch languages
4. a link to the feedback form, use it to send me comments, questions and suggestions
5. links to the W3C validators for HTML and CSS, to check if these pages are in order
6. a link back to the top of the page from every section
7. the copyright notice

What do you need?

First of all, you are going to need software to make HTML files. If you use a Macintosh I strongly recommend BBEdit. It is made by Barebones Software. If you do not want to spend money (yet) I suggest you try Taco HTML Edit. My favourite for Windows is Hotdog. You can buy it from Sausage Software. Of course there are many more HTML editors for all operating systems from a variety of manufacturers. And in principle you can use any text-editor to make HTML files. Just be sure to save your file as plain text and never as an RTF or Word file. Choose whichever one you like and can afford.

Secondly, you are going to need at least one web browser. Most computers have web browsers installed, for example Internet Explorer (Mac and Windows) and Safari (Mac). I recommend you test your pages in more than one web-browser. Preferably you should also test them on more than one system, for example Mac and Windows. That way you can ensure your pages are accessible for anyone. For an overview of web browsers, check out the software page.

In principle you can start experimenting with HTML now. If you have a text-editor and a web browser you have the minimum you need. Make a page in the text editor and open it in the web browser.

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 Transmit 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. On the software page of this guide you can find links to many more HTML editors and other software.

More requirements

If you want to start experimenting with CGI scripts in Perl, it is very useful to download a version of Perl that will work on your computer. See the links on the software page. If you have Mac OS X or Linux, Perl is probably already installed on your computer.

You may also want to get PHP, the most commonly used scripting language. Again, you find all the necessary links on the software page.

If you want to turn your computer into a complete web server you can install Apache. Mac OS X and Linux computer usually have Apache installed already. In all other cases the links are on the software page.

If you do not have your own web server, 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.

About HTML

HTML stands for Hypertext Mark-up Language. What that really means 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.01 (strict). Consult the World Wide Web Consortium for more information on these standards.

Elements and attributes

Any basic HTML element looks like this:

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

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

An attribute is like an addition to an element 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 4 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. In XHTML elements are case sensitive and have to be in lower case.

Some definitions

Below you find a few dozen definitions of commonly used terms. Do not learn them by heart but refer back to this page whenever you need these definitions.

Attribute an extension to an element.

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.

Deprecated elements and atrributes that are no longer part of HTML. Browsers should continue to support them, so users can continue to read pages that have not been updated to the latest HTML standard.

Element The official name for a building block of HTML, for example A, STYLE and IMG are elements. Sometimes also called tags.

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 was the most widely supported graphics format but is now mostly replaced by JPEG.

HTML stands for Hypertext Mark-up Language. It is the language that is used to publish documents on the World Wide Web. The novelty of HTML is that it 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.

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

JPEG stands for Joint Pictures Expert Group and is the most commonly used format for images and the web and also in digital cameras.

LAMP Linux-Apache-MySQL-PHP. The most commonly used combination of server software. A Linux computer running Apache, MySQL and PHP. If you have a Linux computer, all this software is probably already installed on it.

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.

MAMP Macintosh-Apache-MySQL-PHP. A commonly used server. A Macintosh computer running Apache, MySQL and PHP. Macs come with Apache installed by default but you will need to add MySQL and PHP yourself.

MySQL commonly used database software. It can interface with PHP to create interactive web-pages.

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.

PHP Hypertext Pre-processor, the most commonly used scripting language. You can use it to make your pages interactive and to do things like getting data from a database.

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 disk-space on a big server. In fact, you don't have to know anything about HTTP or servers to be able to make publications.

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 unofficial name for an element.

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".

User agent official name for a browser.

WAMP Windows-Apache-MySQL-PHP. A Windows computer running Apache, MySQL and PHP.