REPORT ON PROJECT 1mis5010, (This Web-Site).
This report is an accompaniment to
the practical project of producing a mythical student based web site. It will concentrate on the how and why the
site was produced, rather than being a tutorial on HTML or JavaScript. (Links
found within the site, do however, allow access to a number of basic
tutorials).
SOME
HISTORY.
The history of the 'World Wide Web'
(WWW) is well documented, right from the original work of Tim Berners-Lee, who
was looking for a way to pass formatted documents between machines that were
running different operating systems. He first wrote a rather heavy going
language called SGML (Standard Generalised Mark-up Language). The complexity of
SGML prompted an easier version called HTML (Hypertext Mark-up Language) to be
developed, who's main function was to define and create a specific form of
documentation-a web page. HTML allowed documents to be passed between a
'server' and the 'client' on differing systems, that although the computer may
be small, slow or inefficient (many people are still using 486s for web work)
could still display the essential part of the document, (Even if the picture
content was lost).
HTML however is not a static
language, or an end in itself. Active programmability of HTML led to
'JavaScript', and object modelling led to 'Dynamic HTML'. All these have been
added to the core mark-up language. For
pure large documental processing between platforms HTML has now advanced to
what is optimistically called 'XML' (Extensible Mark-up Language) Landgrave (2000) says "That XML will
soon become the business language on the 'Net', especially were large amounts
of documentation have to be passed electronically". The future of HTML
seems set to expand even further, and will probably be the mainstay of the WWW
for some years to come.
BUILDING
A WEB SITE.
Any man and his dog can construct a simple
'flat' website using an automatic 'web-editor' and have it 'hosted' by one of
the big free servers. But the life story of any mans wife; kids and dog etc.
will remain forever un-accessed by all but those person's friends, who will be
coerced to look at it once in their lives.
Most people wanting to produce a web site know, that they must add value
to it that will make people want to access it for something they themselves
want. Even the hobby of
'Train-Spotting' has value added points (?), if the site links to other rare
railway sites etc. Nowadays if you add
colour, things that move about, some form of interaction and if possible sound
and video to a base of knowledge, then your site is assured of many 'hits'. Even today, many commercial sites still
consist of 'flat' pages of script as dull as ditch water.
WEB SITE
PRIORITIES. (Index.html).
The first
page of this web site is its most important page, and it has a twofold
function. Firstly, it was important to call the first page 'Index.html'. The
reason for this importance is that most 'servers' (search engines) look for it
by name as the first page, containing all the essential information. (Some
servers will also look for 'default.html' or 'welcome.html' if 'index.html' is
missing). Secondly it contains all the information as regards to the web sites
layout and behaviour. This 'Index.html' uses the <frame> tag in such a
way as the navigation section of the web site ('control-page.html') is always
visible, and is always in the same place (left) irrespective of what other
pages you have called for. This method allows the user to page forwards and
backwards at will. The 'index.html' also calls up the first of the real pages,
usually called the home page. (In this case called 'home-page.html')
PUFFING-UP
YOUR VALUE.
If you have added value items that you think other people
might want to see, then the use of the <Meta> tag, inserted into the
'Index.html' page can advertise these.
The section between the <Meta>…</Meta> allows a search
engine having found your 'Index.html' page to be aware of what the added value
of your site is. In this case the
search engine would find keywords such as, 'Victorian', 'Essay', 'Computer',
'Lampeter' and 'HTML' etc. Therefore
anybody asking the search engine for sites matching any of these keywords,
would have your web site displayed (alongside 1000s of others). Other parts of
the <Meta> tag will print a short sentence alongside your displayed site.
Overall then, paying attention to the first page of any web site sets the style
and determines whether you get any 'hits' from the information you provide to
the server. The coding for all this action although sparse, is the most
important beginning to any web site.
CONTROL
PAGE.
Now that 'index.html', having got
the 'control-page.html' and the 'home-page.html' loaded, we will look at
'control-page.html' first. This is the
'anchor' page that always stays in view allowing you to page forwards or
backwards at will. On this page we meet
the first application of JavaScript.
Niederst (1999), best defines JavaScript, when she says, "JavaScript
is a client-side scripting language that adds interactivity and conditional
behaviour to web pages". There are
now hundreds of JavaScript sites. (See references). Looking at the 'home-page.html'
we find two pieces of JavaScript. Firstly, we have the scrolling text bar at
the bottom of every page. This is rather an unreliable piece of code (to date),
that still needs working on to make it more stable/reliable. The second piece
is the "Update" date. This simply reads to-days date every time you
"refresh" the page. This is a gimmick that is supposed to re-assure
the user that you are updating the pages on a regular basis. (But simply
putting up the page alone, pressing "refresh" will automatically
change the date). All these pieces of
JavaScript have no real added value, but are nowadays expected to 'Jazz' up a
site.
On the same page we have a 'mouse roll-over' function,
whereby moving the mouse over the page highlights anything that has <a
ref> in it. This is useful for highlighting links to other pages. It uses what is called 'Cascading Style
Sheets' (CSS). Style Sheets add a little more design control, separated from
the generalised HTML. It lies within its own tags
<style>…….</style> The code for this 'mouse-over' is quite simple.
(<Style><a: hover {details of font colour etc here}></style>)
The biggest advantage of CSS is that you only have to enter it once on a page
for it to be active all over that page.
HOME
PAGE. (Home-page.html)
The "Home-Page" is pure
'In your face'. The target audience are
'students' whose short attention span demands colour and sparkle to keep them
looking. The 'Wizard.gif' is used to
reinforce the mature student image. The 'bait' for the lazy student is the
offer of free essays, for the more serious, the computer sections promise some
free downloads. So overall we have looked at the first complete display. To be
successful we should offer at least something for most of its targeted
audience.
INFORMATICS.
(Informatics.html)
The next significant page is,
'informatics.html' which introduces 'Dynamic HTML' (DHTML). Niederst (1999) says 'DHTML is like HTML on
steroids'. Here it is used to produce a newer version of the old JavaScript
'Banner', that is doing the rounds on all the JavaScript sites. It is a solid
and reliable piece of script credited to Ken Hanson of www.dynamicdrive.com. (This is probably
the best JavaScript and HTML site anywhere on the net). The banner runs between
<script>…..</script> tags having used the <form> to set up
the window. The <script> element contains client-side scripts that are
executed by the individual browser, and therefore may differ between, say
'Netscape' and 'Explorer' browsers. (Dependent on browsers CSS positional
protocols). The other thing of note on
this page is the introduction of links to other web-sites. The introduction of
'activated icons' to link to other sites is quite novel, rather than the normal
'blued-underlined' text link so often used. The insertion of the highlighting
'style sheet' between the <head>……</head> allows the background to
the icon to be highlighted as well.
This double effect, is again a gimmick to attract the attention
deficient viewer?
VICTORIANA
1, 2, & 3.
Moving on to the 'Victoriana.html'
page, we again introduce something different. This is in fact a triple page
(victoriana.html, victoriana2.html and victoriana3.html, linked as a
single. The ultimate page (victoriana3html)
is similar in construction and use to the informatics page. It is the opening page 'victoriana.html'
that is the 'active page'. When called,
the opening page 'Victoriana.html' appears on the screen as a comedy page.
After 20 seconds, this page disappears and the proper Victorian site page
appears ('victoriana2.html). This piece
of JavaScript is a combination of two functions. Firstly we have the random
selection of background page colours selected and displayed. This would normally
cycle perpetually, but by linking it to a simple 'Time Counter' which counts
backwards from 20 seconds to zero, calls the penultimate page
'{parent.location="victoriana-2.html"}' which resets the whole
structure. This type of JavaScript is often used (with a shortened time-out) to
display a selection of Gifs in a banner advert. The JavaScript is very robust and can be altered extensively to
create effects that demand scene or page changes.
E-MAIL.
This site was created to demonstrate
the use of the 'FORM' tag. This tag is one of the most important tags, as it
allows users to submit information back to the server. Answering
questionnaires, requests for further data and even direct comments etc. can be
accommodated using the 'FORM' tag. On this page I have included a fair
selection of them. The collection of all the inserted data is controlled by the
<form action="mailto:[email protected]"
method=post> line, which will send the data to my e-mail (or anywhere else
directed to). It is a superb tag with lots of uses.
CONCLUSION.
In conclusion, this project has been
the best of the year. It demanded a lot of self-motivation and study to
produce. The web site has attempted to include examples of nearly every
possible command tag. In some places there is an overkill of content, but as a
project subject, it was felt that there was a need to demonstrate a basic
working knowledge of the whole range of HTML, JavaScript and DHTML. Surveying numerous web sites has shown me,
that about 80% are 'puffed-up' with Gifs, JavaScript banners and non-value
added components. Therefore this web
page of mine is in character and simply reflects this fact. I have not
commented on the page 'about-me.html' as this simply reinforces the sometimes
patheticity of our lives.
REFERENCES.
Lemay,L.
(1998) Web Publishing with HTML 4. (Sams Publishing, Indiana,)
Niederst,
J. (1999) Web Design in a Nutshell. (O'Reilly Press, Cambridge.)
BIBLIOGRAPHY.
Herz, J.
Surfing on the Internet. (Abacus Press, London. 1995)
Handley,
M. The World Wide Web. (UCL Press, London. 1995)
Lemay,L. Web Publishing with HTML 4. (Sams
Publishing, Indiana,1998)
Maxwell,C.
Internet Yellow Pages. (Nava Press, New York. 1994)
Mandell,M.
Cyberspace. (Fair Publishing, Michigan. 1999)
Miller,R.
Internet Direct. (M.I.S. Press, New York. 1998)
Niederst,J. Web Design in a Nutshell.(O'Reilly Press,
Cambridge.1999)
WORLD
WIDE WEB SITES
(The
Informatics page has a list of the best 6 sites as 'Links').
www.demon.co.uk/davidg (A good Java Applet
site).
www.dynamicdrive.com (By far the biggest
DHTML site)
www.geocities.com/siliconValley/park/3091/objects.htm
(Just superb !)
www.geocities.com/siliconValley/network/4759
(Good HTML tuition site)
www.htmlgoodies.com (Has massive tuition
site)
www.javascriptsource.com (Loads of super
JavaScripts).
www.java.sun.com (Sun Systems commercial
site)
www.netmag.co.uk (UK magazine site, with
lots of scripts)
www.rummelplatz.uni-mannheim.de
(Superb German HTML site)
www.techrepublic.com (Good generalised site with lots of HTML
news)
www.xml.com (The best site for learning HTML
versus XML.)
Note:- A list of web-related sites is
attached at the end of this report. Not all these sites have been checked, and
some may have become defunct.