Computing in the real world
SEARCH FOR: IN:
Guest  Level 00    Register Log in

Labs

Web design software

[PC Pro]

The Web was designed to be a simple publishing medium but over the years it's been extended by a range of technologies. Here's a jargon buster:

HTML
Devised by Sir Tim Berners-Lee, HTML (HyperText Markup Language) is the fundamental architecture on which the Web is built. Use your browser's source code view and you'll see how every web page is based on a series of HTML tags -

, and so on - that surround the actual content of the page. It might look intimidating but it's important to recognise that HTML isn't a rigorous programming language but rather a forgiving markup language (the browser software reads each tag to know how to handle the tag's contents). Moreover, it's a very simple markup language based on just a few core tags.

CSS
The HTML tags were designed to describe the content of each web page - headings, lists, addresses and so on - rather than to describe how these elements should be presented. For a long time this was left to the browser application to interpret as it saw fit, but a much more powerful, reliable and efficient solution is to use another markup language designed specifically to handle presentation. That's exactly what CSS (Cascading Style Sheets) is and today's web authors need to be able to handle CSS just as well as HTML.

DHTML
By treating each page element - image, paragraph, division - as an object, the version 4 HTML specification, often referred to as DHTML (Dynamic HTML), enables the use of scripting to bring the page to life within the browser. Roll over a button image, for example, and the image can change while the text in a CSS-positioned layer is updated.

ASP, ASP.NET, CFML, JSP, PHP
DHTML enables an interactive form of dynamic content, but much more significant is the ability to dynamically create the web page itself. This is where the major server-side languages come in: Microsoft's ASP (Active Server Pages) now updated to ASP.NET, Macromedia's CFML (ColdFusion Markup Language) pages, JSP (JavaServer Pages) and PHP (PHP Hypertext Preprocessor).

These all work in a similar way and for the same purpose. Additional tags are embedded within the core HTML framework of the page and these are interpreted by the server and used to interact with external data sources - databases, cookies and so on - to serve up the final HTML/CSS page to the browser. If you've ever wondered how sites like Amazon can provide all those customised pages for each of its visitors, this is the answer.

XHTML, XML
HTML is the basis for the Web as we know it, but it's hitting its limits. To move on, the Web needs a more powerful and more reliable underlying architecture. In particular, it needs to support a wider range of tags and these need to be much more rigorously defined and handled. That's exactly what XML (eXtensible Markup Language) was designed to provide, and XHTML (eXtensible HTML) is a version of HTML that has been rewritten to make it XML-compliant.

Cracking the code
Look at any web page in your browser's source code view and you'll see the actual visible content of the page surrounded by reams of text in angled brackets. These are the HTML tags that your browser interprets when formatting and displaying the page. And because the HTML tags are just straightforward text (rather than binary computer code), it means that all you need to produce a simple web page is a simple text editor, such as Notepad.

To produce more advanced pages, though, you're going to need a bit more help. Most users choose one of the wysiwyg editors but, if you're more technically minded, there's a lot to be said for one of the text-based web-authoring packages, such as AceHTML Pro (£50) from www.visicommedia.com, HotDog Pro ($100) from www.sausage.com and HomeSite 5.5 (£79) from www.macromedia.com

What unites all these packages is that they focus absolutely on the code that makes up your page - so much so that in many ways they seem more like programming applications than design packages. In particular, this means that by default you work in a text-based code view, previewing your page's actual appearance only to check it. Coding capabilities are naturally to thefore including all the basics of colour-coding, syntax checking and automaticformatting.

These days many of the wysiwyg editors offer similar capabilities, but the text-based editors can still provide an edge by providing more tag-centric capabilities, with features, such as automatic tag completion, dedicated tag editors and comprehensive tag-based references, providing examples of usage and detailing specific browsersupport.

The text-based editors can also come into their own when working with the Web's other markup languages. CSS, for example, controls your pages' presentation, but to really master it you again need to get to grips with the code itself and the less-than-reliable browser support for it. The tag-centric approach makes even more sense when working with data-driven languages, such as JSP and CFML. That's why Macromedia bundles HomeSite+, a tailored version of HomeSite 5.5, with Dreamweaver MX 2004 specifically for those users who like to be able to switch to a more programmatic environment when developing web applications.

If you want to become a web author, you're almost certainly better off with one of the wysiwyg editors. But if you're determined to become a code-focused web master then it's worth checking out the text-based editors.