Web page technologies by Toby Stack, Alistair Banks & Matt Ottewill

Introduction

There are many established and up and coming techmologies/languages for building web pages. Since the establishment of HTML new tools for building more complex and powerful pages seem to emerge every year. This page gives an overview of some of the most popular.

These languages can be roughly divided into 2 types ...

1 Languages typically used by web site designers. These languages are likely to be used by designers who are more concerned with the aesthetic design and appearance of a web site.

2 Languages used by back-end server side programmers. These languages are used to create enhanced interaction and web page functionality. A programmer will write code that allows information to be passed back and forth between an web surfer and a hosting server via a web page interface. Typical examples are database driven sites and large ecommerce web sites such as www.amazon.com

It is common for a designer to create the look and feel of a site and then hand the results over to a programmer to add advanced functionality.

Languages typically used by web site designers Languages used by back-end server side programmers

HTML

XHTML

DHTML

CSS

JavaScript

Flash (ActionScript)

Shockwave (Lingo)

SGML XML and (X)HTML

Java

CGI

PHP / MySQL

ASP

JSP

.NET

Ajax

etc

A short history of web languages

It is extremely useful to have a rough idea of how and why the the principal web site building languages came about. It's a story about the battle between innovation and commercial interests so, fasten your seat belts, here we go!

HTML

In the early 1990s, a scientist named Tim Berners-Lee working at the nuclear physics research centre at CERN in Europe came up with a new way of accessing test based documents stored on any computer connected to the internet. His idea was that any computer connected to the internet would be able to find any document and view it. His idea was based around a protocol for viewing (sending and receiving) documents (HTTP), and a new document format HTML.

The HTML standard includes ...

A simple text based document format (.html)

A system of "tags" which allow the creator of an HTML page to perform basic formatting such as headings and line rules etc

The ability to include clickable hyperlinks to any other HTML document.

The compelling feature of this idea was UNIVERSALITY. I put that in capitals to stress how important this basic idea is. Tim wanted ANY computer running ANY operating system to be able to access and display documents the same way.

More on HTML

Browsers wars

To view HTML documents it is useful to have a program in which to view them. This program is called a browser and the most popular browser in 1994 was Netscape Navigator, used by over 95% of web users. Unfortnately, Netscape decided that they would add extra non-standard features into their browser, such as the ability to view images and coloured text, and encouraged web designers to employ these proprietary "tags" to improve the look of their pages. This meant that pages built with these new tags could only be viewed using Netscape Navigator.

Microsoft saw what Netscape were up to and frightened that they might lose control of the web, launched Internet Explorer with its own set of unique tags. The battle between them has damaged the concept of universality.

www.w3.org

Tim saw that his vision of the web was under threat and so he created the World Wide Web Consortium and asked all the important computer companies to join it. The idea was and is to define standards and ensure universality. Every company would contribute to and support the official HTML specifications and ensure their browsers and technologies worked with them. Its worth saying here that although this has been largely successful there are still some technical inconsistencies (bugs) between browsers that lead to incorrect display of some HTML tags and CSS rules and have delayed the introduction of new ideas. Web designers need to be aware of these.

HTML version 4 & css

Next, W3 updated HTML and introduced CSS to allow the separation of content from its styling. The principal advantage of this is that a single CSS document can contain instructions (or rules, or styles) to format the appearance of multiple HTML documents in a web site. Some old HTML tags were marked for removal from the specification, the idea being that CSS would take their place. Such tags are referred to as deprecated. CSS reached version 2 in 1998 and version 2.1 in 2006.

XML & XHTML

It soon became apparent that W3 was not the best forum for establishing new ideas and technologies, it was too slow. The solution was the invention of Extensible Markup Language (XML). Put simply, XML is a language for creating other languages and therefore allows web designers to create their own tags, which a browser can then reproduce and display. This means that non-standard tags can be viewed in a standard way.

The problem was that the internet was already full of HTML documents and a switch to XML need to accommodate this. The answer was to re-create HTML in XML! This new version of HTML is called XHTML. XHTML can work just like HTML and has all the extra power of XML and all browsers read and understand it. XHTML is slightly stricter than HTML and we have reproduced the basic rules you must adhere to elsewhere on this page.

W3 promotes and recommends the use of XHTML and CSS to create web sites and so do we! At the moment the web design world is eagerly anticipating the support of CCS3 by the pre-eminent browsers. But it will probably take a while, IE still has significant CSS2 bugs!

Choosing the right web technologies

Click here to read an article that discusses ways in which you can make your web sites as compatible as possible between users, browsers and platforms.

1. Languages used by designers

HTML (Hyper Text Mark-Up Language)

Most web sites are built using a computer language know as HTML which uses a system of tags to control page elements and links. This is the oldest, most established and simplest method. Click here for more on HTML.

XHTML (Extensible Hyper Text Mark-Up Language)

HTML is not absolutely strict in its syntax. A designer can often get away with writing sloppy code. When XML was introduced HTML was re-written in it. This new version of HTML is called XHTML. Because XHTML contains all of HTML in it designers could continue to create web sites without learning XML. But XML demands that they are more careful in how they write their code.

The rules of XHTML are only slightly different to HTML. The main ones are ...

All tags must be lowercase (eg <p>, not <P>)

All tags must have an end tag (eg <p>Here's some text</p>) including empty tags (eg line break ...<b></br>)

Attributes of a tag must always be quoted (eg <a href="index.html" target="_blank">Go to home </a>

A page that is XHTML compliant must have the following code at the top to enable a browser to recognise and display it correctly ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

If you make a new XHTML doc in Dreamweaver it will create this code for you. It will also add this important tag into the head tag ...

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Let it. This will help resolve XML conflicts (don't ask!)

unadorned.org has this definition ... "XHTML is a reformulation of HTML so that it conforms to the rules of XML. This means that XHTML is very similar to HTML, except for slight differences in the markup, but it is now an application of XML".

DHTML (Dynamic Hyper Text Mark-Up Language)

DHTML is the name given to the collection of web building tools that includes ...

HTML (or more commonly XHTML)
JavaScript
CSS (cascading Style Sheets)
Layers

These technologies allow more complex "interactive" web pages to be created.

JavaScript

JavaScript is a Java-like programming language developed by Netscape. Despite their similar names they are entirely different languages. JavaScript may be written into Web pages, along with HTML, as un-compiled code to produce basic interactivity such as changing graphic rollovers or to check the contents of a form. Source code in the browser compiles and runs the JavaScript.

CSS (CASCADING STYLE SHEETS)

CSS is described in depth here

Flash

Although not strictly a web page building language, Flash can be used to create pages and many designers use it. Others consider it a toy. For more on Flash click here.

Shockwave (Director)

Shockwave is not strictly a web page building language either, but it is an immensely powerful internet application development platform for designers. For more on Director click here.

2. Languages used by "back-end" server side programmers

SGML XML and (X)HTML

SGML (Standard Generalised Markup Language) was originally created as
a means to make documents that were easy for a computer to process.

SGML (Standard Generalized Markup Language)

SGML was a major influence on the development of HTML (HyperText
Markup Language) and HTML can be considered an extension of SGML
although HTML has quite a few differences so cannot be considered a
part of SGML.

www.arl.org has this definition of SGML ... "Standard Generalized Markup Language. SGML is both a language and an ISO standard for describing information embedded within a document. HyperText Markup Language (HTML) is based on the SGML standard".

XML (Extensible Mark-Up Language)

XML (eXtensible Markup Language) is also a descendant of SGML, XML
was developed to make SGML easier to read by machines and in doing so
means it is a stricter language and has also has taken over from SGML
replacing it almost entirely.

www.rustybrick.com has this definition ... "Short for Extensible Markup Language, a specification developed by the W3C. XML is a pared-down version of SGML, designed especially for Web documents. It allows designers to create their own customized tags, enabling the definition, transmission, validation, and interpretation of data between applications and between organizations".

XHTML

Just as HTML is an extension of SGML, XHTML is an extension of XML
meaning all XHTML is also XML. As XHTML is also XML XHTML is also a
strict language, this means computers can more accurately process
XHTML as there is less room for ambiguous statements.

JAVA

Java is described here

CGI (Common gateway interface)

CGI (Common Gateway Interface) scripts are pieces of code (small programs) which "live" on web servers and transfer information between web sites and applications (typically databases) usually in order to retrieve, process and act on information typed into a web site by a surfer (such as a credit card order).

CGI scripts are usually commissioned by web developers and written by programmers. Be aware that even if you develop scripts, finding a server willing to host them and your site may be problematic.

New scripting features in authoring platforms such as Flash 4 are offering cost effective alternatives to the expense of developing bespoke CGI scripts.

www.eseehosting.com has this definition ... "The common gateway interface (CGI) is a standard way for a Web server to pass a Web user's request to an application program and to receive data back to forward to the user. When the user fills out a form on a Web page and sends it to the server, it usually needs to be processed by an application program. The Web server typically passes the form information to a small application program that processes the data. This method or convention for passing data back and forth between the server and the application is called the common gateway interface (CGI)".

Dynamic content

XHTML and CSS provide the fundamental tools for making websites, however the resulting webpage is rather like a poster or leaflet, although the end user can read the webpage there is no way for them to interact with the webpage.

For a large number of sites this does not pose a problem, if the site is a tutorial site such as this one there is only a one way flow of information, from the site to the user. However many sites now aim to provide extra services and tailor their site to their users needs, to
do this they need to be able to process data and gather information from the user and generate user specific pages. One way to provide this functionality is to used software that runs in the browser via the use of plug-ins such as Flash and Java but this means all users of your site will have to have these plug-ins installed, which is not an ideal situation, fortunately with the use of scripting dynamic content can be generated that is accessible with any modern web browser.

There are two main schools of scripting, client side scripting and server side scripting. Client side script is script that runs on the users computer using the browser, server side script runs on the web server the page is hosted on. Here is a list of a few of the main
scripting languages

Client side is best for processing user actions giving instantaneous feedback, it is also good for checking data that will be sent to web server to speed up error checking. However it is limited as it cannot directly interact with the server. Server side processing runs on the web server and is most commonly used to interface with databases and provide dynamically generated web pages. Although extremely powerful the interface is limited as it relies on you sending data to the server (usually via a form) and then the server creating the web page to send to you.

Client side

Javascript

Javascript is the most commonly use client side script and the one you are most likely to use.

VBscript

VBscript is a scripting language developed by Microsoft it is not wildly used as only IE fully supports it (both Firefox and Safari do not support VBscript).

Server side

PHP

PHP is a very popular scripting language, it is open source and free to use, many sites (including Wikipedia) use PHP in combination with MySQL an open source database management system. PHP will run on both
linux and Windows based web servers

ASP

Active Server Pages (ASP) is a server side scripting language developed by Microsoft, it is widly used but will only run on widows based web servers.

JSP

JavaServer Pages is a similar type of technology but based on Java, it is not wildly used but may be useful if you are using other Java technology.

Which technology should I use?

Choosing the right technology when creating web pages requires in-depth knowledge of techniques and computers. Below are some basic guidelines to help you choose and you can also click here to read an article which discusses how to make compatible and accessible web sites.

 

Technology Colours File size Plug-in required Indexable by a search-robot Ease of change/ update Disadvantages Other advanatgaes
Mark-up languages (HTML / DHTML / XHTML)

16-bit (1000s of colours) but 216 web safe may be best for old systems

Small and fast

No

Yes

Easy.

Clients can update pages.

Can't embed fonts.

Easiest to learn?

CSS

16-bit (1000s of colours) but 216 web safe may be best for old systems

Small and fast

No

n/a

Easy

Can't embed fonts.

minor differences in rendering between browsers.

A single CSS doc can style a whole site.

Individual CSS docs can be created for differing devices (TVs, computers, PDA's, phones etc).

Images
(graphic intensive pages can be sliced into tables of images)

Graphics card dependent but most current computers can handle at least 16-bit (1000s of colours)

JPEGs are generally medium to large.

GIFs are generally small to medium.

No

No

Relatively easy

Larger files size.

Text/fonts can be "embedded"

Flash

Graphics card dependent but most current computers can handle at least 16-bit (1000s of colours)

Dependent on size of presentation and embedded media (audio, images, video etc)

Yes, and must be correct version

No, when text is embedded. Yes, when text is linked.

Can be time consuming & difficult.

Clients can't update pages.

Whole file must download to view.

End-user must have relevant version plug-in.

More suitable for broadband.

Unless media is linked, even minor changes require complete file re-upload

Fonts can be "embedded".

Shockwave
(Director)

Graphics card dependent but most current computers can handle at least 16-bit (1000s of colours)

Dependent on size of presentation and embedded media (audio, images, video etc)

Yes, and must be correct version

No, when text is embedded. Yes, when text is linked.

Can be time consuming & difficult.

Clients can't update pages.

Whole file must download to view.

End-user must have relevant version plug-in.

More suitable for broadband.

Unless media is linked, even minor changes require complete file re-upload

Fonts can be "embedded".

PHP / MySQL / ASP

n/a

Small but speed of page rendering is dependent on the server

Not generally required, just the right browser version

Yes

Yes if you know how

Some compatibility issues between platforms.

Requires programming skills.

Allows web pages to be created from information contained in databases according to end-user profiles and needs.

Easy to update and maintain.

Can often be updated my non web designer administration staff.

Related downloads

None at present

Music by our artists

Free MP3 tracks

Download page

Related ads