home    Getting started: An overview

The history of "The Internet" has been fairly well documented and is, lets face it, as dull as a Kenny G sax solo.
So let’s move on a little, and investigate the tools and techniques available to the average Jo(sephin)e that can improve your Web "presence" (a good word this, ambiguous yet enticing. Bullshit, in short!).

THE LANGUAGES OF THE WORLD WIDE WEB

HTML is the mark up language for Web authoring and design. It’s very simple, and it's easily assessable.
Basically it consists of "tags" - words contained within chevron brackets - that tell the browser how to render the content following, or between, the tags. As an example, in order to produce bold text, the tag <b> is inserted before the text. The tag </b> is used to inform the browser that the sequence of bold text has come to an end.

This line of text, for example, would be written in HTML in the following way:

<font face="verdana,arial">This line of text, <I>for example</I>, would be written in <b>HTML </b> in the following way: </font><br>

The first tag tells the browser which font to use, in this case verdana or, if that is not available to the browser, arial. The sentence begins with standard text until the phrase "for example", which is in italics and therefore tagged <I>. Closing the italics tag </I> forces the browser to cease rendering in italicised text and to continue with standard text, still in the same font. The term HTML is in bold, and is therefore surrounded by the <b> and </b> tags, as mentioned above. At the end of the line, the <font> tag is closed, as with all end statements by utilising the "/" symbol, producing the closing tag </font>. This will force any text that may follow the above line to be displayed in whichever font the viewer has selected as default in their browser settings. Finally, the tag <br> is used to invoke a line-break.

It is not difficult to produce an impressive Web page using only Hyper Text Mark-up Language (HTML). The best thing about HTML is that the code can be instantly viewed and copied, therefore making it quick and easy to produce great effects. The worst thing about it is that it is only capable of producing static pages. For more dynamic effects, it is necessary to use either additional programming or mark-up languages or third-party plug-ins.

CGI is a little more complex than HTML. It allows information to be processed by the server and fed back to the viewer, thereby bringing interactivity to the web. It is used for forms, hit counters, databases, and instant feedback as well as making animation possible, all this before Java. The code used is considerably more complex than HTML and is written in a variation of programming languages including Visual Basic and Perl - although Perl is by far the most popular method of creating Common Gateway Interface scripts. In addition to the coding that generally runs from or through a HTML page, it is necessary to configure the Web server and the CGI scripts themselves - not always possible with service providers, particularly free ones.

VRML has attempted to bring Virtual Reality to the Net, and given countless Cyber-hippies hard-ons in the process. VR is still too virtual, and the net is still too slow. So far I have found VRML a cumbersome tool, except where used abstractly. However, many clients - fresh from flicking through .Net magazine, or following ten minutes at Cyberia café - still want a fully functioning, singing and dancing, representation of their place of revenue. I have found it safest to avoid mentioning VRML. The good thing about VRML is that 3D Studio Max can export WRL files, with full VRML functionality, courtesy of a plug-in module.
I await the day when VRML lives up to the hype in anticipation.

Java. Well what can I say? A real bastard in terms of usability but the best thing since sliced Pentium III if you believe what you read. If you can learn this then you won’t need to bother with any poxy external apps, it does just about everything. The major drawback is the speed (or lack of) with which Java is executed across the Web. Until this is sorted out, it is advisable to find alternative means, such as third party development software, to achieve the desired effects. Check out the Java Developers kit for beginners, or take a look at Macromedia Director 7, which can export Java applets, or delve into one of the visual development packages to reduce ear-bleeding.

JavaScript is much more user friendly than Java, and is, in fact, nothing like Java proper - so do not get the two confused. In fact JavaScript was originally to be called LiveScript, but Netscape changed the name as Java became the hype-phrase of the time. JavaScript is written within the HTML page, and is a supplement to HTML. It is recognisable within HTML code by the start tag <script language="JavaScript"> and the end tag </script>. JavaScript produces convincing results without the need for painful programming, although it is certainly less accessible than HTML. In an attempt at WWW domination, Microsoft have introduced their own brand of JavaScript, titled Jscript. This is crap, and will only work in Internet explorer. Unfortunately, as part of his master plan, Bill Gates neglected to make IE fully JavaScript compatible until release 4.07. More later on browser (in)compatibility. Most of the simpler dynamic effects on Web pages are created using JavaScript; the most popular of these being "rollover" buttons, wherein moving the cursor over a graphic induces that graphic to be replaced by another. It should be noted, however, that a JavaScript that works in one browser may not work in another.

Style Sheets assist the designer in controlling the presentation of a Web page, controlling font types, indentations, layering, and placement of background images. This will be a very powerful tool once all browsers fully recognise its functions. The <style> tag within a Web page tells the browser that the information placed between it and the end </style> tag dictates the presentation of the HTML page. Cascading style sheets are a method of controlling the look of a series of pages from one file. The CSS file is referenced by the HTML document with the following code:

<LINK REL=stylesheet HREF="name.css">
<STYLE TYPE="text/css">
</STYLE>

<LINK> tells the browser which file to reference, whilst the <style> tag is customised to force the browser to accept an external input. The main advantage of CSS is that an entire site can be controlled from one file, particularly useful with larger sites, and therefore simply altering the CSS file can change the layout of that whole site.

DHTML is essentially a Microsoft invention, and utilises JavaScript and style sheets to provide both Dynamic (the D of DHTML) elements to the Web page and more control over the look of your Web page. As yet, only fully recognised by Internet explorer 4 and above, with limited functionality in Netscape 4 and above.

EXTERNAL APPLICATIONS

An old favourite is the GIF construction set. This is the quickest, and by far the easiest, way of bringing animation to your web site without the expense of a professional graphics application. You simply rack your GIF stills in order, and the program gives you an animated graphic.

Macromedia Shockwave is a plug-in supported format for Web enabled Director presentations. It has all the functionality of Director movies, with the additional usage of WWW specific properties such as hyperlinking. Beware of file size for this one.

Macromedia Flash is a relatively new plug-in development that allows you to embed vector animations within an HTML page. The major advantages, of course, are in file size and output resolution. A nifty new development and a big favorite of mine.

Realaudio encoder is a great way of bringing sound to your site.
The compression agent creates minute files in comparison to alternative sound formats, and is executed by a widely available browser plug-in. Realvideo, from the same developers, provides similarly accessible video (surprise!). Neither format is perfect, but they are noticeably better than anything else, and can provide true live feedback.

All material within a Web page that requires a plug-in to operate is evoked by the <embed> or <object> tags, although <object> only functions in the latest browsers.

Mapedit creates clickable image-maps for your Web site, a nice way to create a graphical navigation interface.

If you want to use forms, but find the HTML involved confusing, then Webforms is for you. Forms generally exist to provide feedback from the browser, for competitions, mailing lists, comments etc. This program creates HTML based forms, which will be mailed to a specified address for further use.

HTML AUTHORING PACKAGES

There are now many Web authoring programs available, some good some not so good. Personally I find most of them restrictive and, having experimented with one or two, I’ve just about consigned all of them to the bin. Now, there are two generic types of HTML editor - the WYSIWYG (What You See Is What You Get) and the development package. The WYSIWYG is a desktop-publishing style package that removes the designer from the HTML proper, whilst the development packages usually enhance the HTML authoring environment. I prefer the latter, as many WYSIWYG's wreak havoc on your code with little warning. Notepad, or a similar text program, is all you really need to master Web authoring. Remember, you can always view source from a cool site - copy, and paste into notepad. No problem.

FINAL THOUGHTS

The strong point of the World Wide Web is also its major stumbling point: platform and browser compatibility. Ideally, the Web would be accessible to anyone with a computer, whether on a UNIX, Apple Macintosh, Windows or other platform. This is almost acheivable, but some plug-ins and file types are still relevant to particular operating systems. The major problem is browser compatibility. In the early nineties, when the Web was in its infancy, there were two browsers: Netscape and Mosaic. Netscape was by far the most powerful browser in every way. However, in order to consign it's rival to the dustbin of history, Netscape introduced its own tags dubbed Netscape extensions. The WWW Consortium, who exist to standardise HTML amongst other things, has since standardised many of these - although thankfully not the heinous BLINK tag. This, of course, meant that you needed Navigator to view the most up-to-date pages. More recently, Microsoft have entered the market and have introduce not only their own tags, but their own Web languages (DHTML, Jscript) which are not compatible with other browsers OR supported by the W3 consortium. This has made it increasingly harder for Web designers to produce uniform, cross-compatible, Web sites, and often means that we are reduced to neglecting the latest techniques in order to serve a global market. This issue should always be addressed when designing Web pages. In order to make a widely accessible site, it is necessary to create HTML content that is supported by both Internet Explorer and Netscape Navigator, and then to consider that many people are still using out of date browsers as well as other less popular browsers. So, as well as being acceptable to the latest version of both major programs it is advisable to create content that is functional with at least the previous release of both programs. The best way of achieving this is to code with IE3, or the AOL browser, in mind, without doubt the worst of the current crop of browsers.

 

John Lyons BA(Hons). egovision design and SouthBank University, London.
   
egovision


Articles and essays
As part of our on-going commitment to education and intellectual rigour, egovision are proud to make available a collection of written articles loosely related to the Web and the Internet in general.
Some of these essays will be the product of our own well worn keyboards, others are pieces made available to us, or submitted by those of you who share our interests.

If you have an article you feel would suit this resource, or even have an idea for an article please provide details via our response form and we will contact you as soon as possible.