Introduction

Web technologies is a general term referring to the many languages and multimedia packages that are used in conjunction with one another, to produce dynamic web sites such as this one. Each separate technology is fairly limited on it's own, and tends to require the dual use of at least one other such technology. Therefore we can conclude that all of the components that make up a site are interdependent on one another.

This guide is intended to briefly introduce the beginner to each of these separate technologies, without attempting to teach anyone how to program. If you intend to study web design further, check our links section for many useful tutorial sites.

HTML: The Foundation of any Web Site.

HTML (Hyper Text Mark-up Language) is the glue that holds together every web site. Like building a house, you always build a strong foundation first. For any site, HTML is that foundation. HTML is an open source language (i.e. not owned by anyone), which is easy to learn, and requires no fancy (or expensive!) packages to start using it. All you need is something to type with, such as Windows Notepad, and a lot of time and patience.

HTML works on a 'tag' system, where each tag effects the content placed within that tag, e.g.

<TAG>What the tag effects</TAG>.

Although relatively limited by itself, it is the flexibility of HTML that allows web sites to grow in complexity. Like the foundation of your house, HTML is robust enough to support many kinds of languages integrated within your HTML pages.

DHTML

DHTML (Dynamic HTML) is just as the name suggests, it adds dynamic, moving or changing content to your plain old HTML pages. Think of it as a more advanced version of HTML, although DTHML is in fact not a programming language in itself. DHTML is a broad term used to describe a group of applications, the main ones are described below:

JavaScript: JavaScript is a 'scripting' language. A bit like a script in a feature film, it is used to decide 'what happens next'. This may be a sequence of screen events, where one event is initiated by the end of another, or it could be a programmed response to a user interacting with the page in some way, e.g. moving their mouse over a link. JavaScript is a complex and powerful language, and may be placed directly inside a HTML page, or in a separate JavaScript file.

CSS and CSS-P: CSS (Cascading Style Sheets) is a relatively new language, designed to expand upon the limited style properties of HTML. Easy to learn and implement, CSS is an excellent way to control the style of your site, such as text styles like size, colour and font.

CSS may also be placed inside the HTML page or in separate files. The real advantage of having all of the style properties for your entire site in one single CSS file is that you may edit that single file to effect changes on the whole site, rather than having to go through each HTML file one at a time. For this reason, it is perhaps the most useful web technology and certainly one of my favourites.

CSS-P (CSS-Positioning) is a sub-set of CSS, and is concerned mainly with the layout of your HTML pages. It allows the web designer to place any element (text, graphic etc.) exactly on the screen where they want it, to the pixel.

DOM: DOM (Document Object Model) allows the designer to access any element in a HTML page, such as an image, layer or table. Each element may be assigned a unique 'id' name to identify it by, e.g.

<TAG ID="My Tag">Content of My Tag</TAG>

When combined with CSS and JavaScript, the DOM may be used to make changes to only "My Tag" and no other element, such as increasing text size or the position of "My Tag" on the screen. JavaScript my also be used to animated such changes to any identified element, such as gradually increasing the size of the text on screen.

Each different browser has it's own DOM, and this is often used to determine which browser the visitor is using. A particular action may be carried out if the person is using NS6, for example, and ignored if the person is using IE5.

Flash

Unlike all of the above technologies, Flash is not an open source technology. Flash is owned by Macromedia, and they produce the application required to produce Flash content for your web site. Furthermore, a web browser on it's own will not display Flash content, a 'plug-in' must be downloaded (for free) and installed by the visitor to your site before they can view it properly. These plug-ins (mini-applications) must also be updated to ensure that they can display the most up-to-date Flash content on the Net.

While I have discussed the drawbacks of Flash, there are many positives. Flash is currently one of the only true multimedia packages for the Net, providing support for animation, video, sound and truly impressive interactive web site experiences. The one real pity about Flash is that it may never become a standard technology, which is a real shame. That is not to say that it's future is not bright, with many web users having the plug-in installed, and with most web designers quoting Flash as the application of choice.

The Backend: CGI and Perl

If you will forgive me for continuing with the house analogy; if HTML forms the foundation of the house, with the various flavours of DHTML and Flash forming the structure of the house above ground (the bits you see), then CGI (Common Gateway Interface) would form the functional workings parts of the house that you can not see such as the plumbing, electrical wiring and heating.

So CGI is concerned with the working parts of your web site, which may include hit counters, form processors or web statistics tools. There are many different languages that may be termed 'CGI', the most popular of which is Perl. Perl is the language of choice for adding function to your site. HTML, DHTML and Flash are fine for controlling the look and presentation of your site, but Perl is needed to run the mechanics of it behind the scenes.

We can differentiate between the presentation (the bit the visitor sees) and the functional (the bit they don't see) parts of a site using the terms 'front-end' and 'back-end' respectively. Therefore, Perl is often referred to as a back-end technology. It operates on the server that hosts your site, rather the within the browser window of a visitor to your site.

The Future: SVG and XML.

The nature of web technology is constantly changing to meet the demands of web users and web designers alike. It is hard to predict with any real accuracy what will become the norm in future developments, and what will fade to obscurity. The decisions for future developments lay largely with the World Wide Web Consortium, found at www.w3.org. The W3C sets down guidelines for browser developers such as Netscape and Microsoft to follow in a continuing bid to increase cross-browser support for future technologies.

As well as being responsible for HTML and CSS, the W3C are also developing a potential rival to Flash, SVG (Scalable Vector Graphics). SVG is currently in its infancy, but when completed it will offer web designers an alternative to Flash while possessing many of its versatile qualities. Furthermore like HTML and CSS, SVG will be an open source standard with nobody owning exclusive rights to produce the packages used to generate SVG content. Currently no browser supports it, and a plug-in from Adobe is needed to run sites using SVG. With the W3C behind it however this situation is expected to change, and SVG is sure to become more commonplace in the future.

XML (Extensible Mark-up Language) has been around a little longer than SVG. It is more difficult to define, however, and its use is still in its early stages. If HTML is a 'mark-up' language, XML is a language that allows you to create your own 'mark-up' languages. In basic terms, this allows you to design your own tags to replace the limited amount that HTML has to offer. In theory this would mean an infinite amount of user mark-up languages, but this would create obvious practical problems for the compatibility of such variety. Currently even the latest browsers offer limited support for XML, and its use is often confined to interacting with databases in combination with Perl.

Conclusion

As a person hoping to gain a basic understanding of web technologies, this article contains all you need to know. As a person wishing to become a web designer, this is just the tip of the iceberg! Web design is a complex area that merits further study on your behalf, a good place to continue your study is the various articles on this site, and to check the links section for many more.

If you intend to launch your business onto the Net and intend to use the services of a web design firm, they are likely to be impressed by you knowing the difference between CSS and XML!

---

Updated 2020 : note that the above post is out-of-date, given this post was originally published in 2001, but is left here for archival purposes.