Design  | SFC  |  NOS  |  Code |  Diary  | WWW |  Essay |  Cisco | [Home]

 

 

[Bill's Home Page]
[ Old page]

Essays

 

 

 


Anyone who says that HTML is dead, and that no-one really needs to teach it any more, is missing the point. HTML is as dead as C++ is. Why is it that programming languages, such as Java, Visual Basic and C++ are still so dominant, even with all the powerful graphics development tools? It's because that they give the developer the opportunity to refine the code, and make sure that everything is achieved as efficiently as possible. It also gives the programmer the opportunity to generate their own code, for their own software libraries. This makes the code reuseable, and this can often differentiate one product from another.

With HTML we now use graphical design packages, such as Dreamweave and FrontPage to design the main code, but when it comes to actually refining the code, it still requires some editing of the HTML code. The greatest use of HTML code is really in reuse. This has been a hot topic in software engineering for a few years, and is now becoming a key part of WWW development. With reuse WWW pages are designed with component parts, which can be shared with other sites. Any change of the referenced component will update all the refered pages.

So let's look at a practical example. I've explained in previous pages how JavaScript can be used to create referenced menus, so in this essay I will look at how WWW page components can be referenced from a single source.

A key to good WWW page design is consistancy across pages. Unfortunately my site is now growing too large to be able to properly manage the changes in layout between pages. Thus I need to develop schemes which make it easier for me to change content, and layout, at a single place, and it should be reflected across a number of referenced pages. A good example is the banner on the home page. This will appear in a number of pages, and if I want to make a small change, I've got to cut-and-paste the HTML code from one page to the next. Thus is very time consuming.

The method I have used to over come this is to generate the HTML code, and then paste this into a JavaScript file, and then refer to it in any page which uses it. For example the home page banner is generated (from Dreamweaver or FrontPage) with:

 

document.write("<div align='right'><a href='index.html'><img src='pics_home_top.gif' width='202' height='63' align='right' border='0'></a>");

document.write("<a href='site_map.html'><img src='test5.gif' width='60' height='64' border='0' alt='Site map' align='left'></a>");

document.write("<a href='http://www.billbuchanan.co.uk'><img src='test1.gif' width='60' height='64' border='0' alt='Access my domain' align='left'></a>");

document.write("<a href='http://www.soc.napier.ac.uk'><img src='test3.gif' width='60' height='64' border='0' alt='School of Computing' align='left'></a>");

document.write("<a href='http://www.napier.ac.uk'><img src='test4.gif' width='60' height='64' align='left' border='0' alt='Napier WWW server'></a>");

document.write("<embed width='100' height='50' src='shock/top_home.swf' bgcolor='#FFFFCC' align='right'>'");

This code can be put into the JS file (in this case top_main.js), and referenced as follows:

<script language="javascript" src="top_main.js"></script>

This gives the following:

It is actually easier to properly design pages, when you actually edit the code in isolation. So the next time that your lecturer tells you that you don't have to write HTML code, don't believe him/her! It also makes it easier to make fine changes to pages.

Oh, and, as if to re-enforce the point, I just had a change a single reference in a JavaScript file, in order to integrate this page with the menu on the essay pages. Simple!

If you're interested, this is how is fits into the main page:

HTML has shown how powerful interpreted languages can be when integrated with media elements. It's not very flexiable though, and has had to live with lots of new bits of code, such as JavaScript and VBScript, trying to muscle in on its patch. But HTML is really just holding-the-fort for the new kind of the WWW: XML. With this new tags can be created whenever they are required. A simple example that I created to test how Flash integrated with XML is as follows:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE questions SYSTEM">
<questions>
 <quest id="000001">
  <title>This is the first question</title>
  <q1>Answer a1</q1>
  <q2>Answer a2</q2>
  <q3>Answer a3</q3>
  <q4>Answer a4</q4> 
  <q5>Answer a5</q5>
  <correct>q1</correct>
  <level>1</level>
 </quest>
 <quest id="000002">
  <title>This is the second question</title>
  <q1>Answer b1</q1>
  <q2>Answer b2</q2>
  <q3>Answer b3</q3>
  <q4>Answer b4</q4>
  <q5>Answer b5</q5>
  <correct>q1</correct>
  <level>2</level>
  </quest>
 <quest id="000003">
  <title>This is the third question</title>
  <q1>Answer c1</q1>
  <q2>Answer c2</q2>
  <q3>Answer c3</q3>
  <q4>Answer c4</q4>
  <q5>Answer c5</q5>
  <correct>q1</correct>
  <level>3</level>
 </quest>
 <quest id="000004">
  <title>This is the forth question</title>
  <q1>Answer d1</q1>
  <q2>Answer d2</q2>
  <q3>Answer d3</q3>
  <q4>Answer d4</q4>
  <q5>Answer d5</q5>
  <correct>q1</correct>
  <level>4</level>
 </quest>
 <quest id="000005">
  <title>This is the fifth question</title>
  <q1>Answer e1</q1>
  <q2>Answer e2</q2>
  <q3>Answer e3</q3>
  <q4>Answer e4</q4>
  <q5>Answer e5</q5>
  <correct>q1</correct>
  <level>5</level>
 </quest>
</questions>

You can see that the format is similar to HTML, but all the tags are user defined. If you're interested, here the XML file, and the Flash integration (but you'll need the Flash 5 player for this, as Flash 4 doesn't support XML). Over the next few years we will see a great increase in the amount of package which will support XML, and many modelling languages will move towards this standard.

billatnapier)