Introduction to Web-Authoring
By John Alldred
Basic principles, and starting the
What is a Web site?
A Web site consists of one or more "pages" of information which
may be viewed by the "visitor".
These pages are created by "coding" them in a "language"
called HTML; the letters stand for
HyperText Mark-up Language.
Obviously a knowledge and understanding of HTML is necessary
in order to create the file(s) containing the pages to be
"uploaded" to the Web-server (the computer which is permanently
connected to the 'net, and on which the pages reside); but for
the initial stages of designing a web page, it is only
necessary to understand what facilities/features HTML does and
does not offer (without actually knowing how to use it).
So what is HTML all about?
The first - and possibly most interesting - feature is the
When reading a conventional book, you might come across
wordings such as:
"except where excluded in Clause 3 above", "see also page 97",
"as described in Chapter 5", or "refer to Kaye & Laby,
'Tables of Physical and Chemical Constants', section 4.2". You
would then have to thumb through the book, or - in the last
example - put it down and set off for the library.
In HTML, those items would be highlighted (typically by being
rendered in blue, and
underlined) and you would click on them with the mouse
pointer. The "browser" (the software program enabling you to
view the web pages) would then "link" you to the appropriate
passage or book. You can think of the link either as being a
"fetch", meaning that the browser will turn the pages for you
to get to the right paragraph, or even go and get another book
out of the library, and put it on you desk in front of you
(possibly even opening it at the right page); or else as a
"jump", meaning it takes you to the right paragraph, or even
whisks you off to the library.
In this way, it is possible to follow a whole trail of
"hyper-links", and this is what is usually meant by "surfing
Therefore, in the initial stages of design, it is necessary to
consider the "structure" of the site, and the degree of
cross-referencing that that it is to contain.
The second half of the acronym refers to the Mark-up of the
text: this influences - but does not totally control - the
If you were to design a brochure for example, you would start
with the text which would initially be in draft or manuscript
You would then go through that with a pencil, marking it up
with notes such as:
"this is the main headline: use a level-1 heading", "rubric:
use level-2 heading", "section header: level-3", "this is a
quoted extract", "bulleted list of features", "insert Fig. 2
here", "emphasise this word", "address panel: render
[As an aside, if you were doing a book, or a paper in a
scientific journal, you might also want mark-up such as
"author's name: to be compiled into the volume index"; but this
is beyond the scope of HTML -- you would need to use a
higher-level language such as SGML, of which HTML is a
But not a "page description
The relatively vague mark-up of the examples in the paragraph
above could be interpreted by a final-stage layout-designer or
typesetter drawing on their experience of what would look good
on the finished page.
What HTML does not allow you to do, is to
give explicit typographical instructions such as:
"use 36 point Helvetica Inserat set solid for the headline",
or "set this in Palatino medium italic", or "flow this over two
columns each 8cm wide with a 1cm gutter between them" (indeed,
you can't even control how wide the "printed" page will be).
The point is, that whilst you will obviously check the page
that gets created by viewing it with a browser to see what it
looks like, you have no idea what sort of browser the visitor
to the site will be using, let alone what sort of computer and
screen they'll be running it on -- and your mark-up may
well get interpreted in a quite different way to what you had
So how do I start to design a web
At its simplest: compose the text and select some pictures!
You may later need to revise either or both of those when you
come to look at the facilities available and limitations
Also there's nothing to beat doodling with pencil and paper!
What you may assume:
As just stated above: strictly speaking -- nothing!
However, there are some assumptions that are reasonable to
Assume the page width is about 7 inches or just under (say
The "depth" of the page is actually unlimited: think of it
is a long loo-roll of continuous paper. However, the
maximum height that is visible at any one time is typically
a little under four inches (100mm), ie about 20
lines of body text.
The body text will probably be about 12 point.
Level-1 headings will be a lot larger than this (probably
at least double), with level-2 being a bit smaller, and so
on; but the "headings" may have dropped down to about the
same size as body text by about level-5.
Note that "headings" are always a "paragraph" in their own
right: you can't mix heading-size text and body-text on the
Long paragraphs should be prepared without hard-returns, as
the browser will re-format it to put line breaks in to suit
the visible page width.
You can specify deliberate line-breaks if really needed;
and you can certainly specify paragraph breaks.
You can't have tabs; and you can't have any form of control
over horizontal layout apart from four exceptions:
You can have whole paragraphs or blocks with an
You can have whole paragraphs or blocks
You can have (actually, quite a variety of) "lists",
optionally preceded by bullet-points;
You can have "pre-formatted" fixed-pitch text
(Courier/Corpus typeface) in which multiple spaces
(yeuk!) can be used to create tables.
Apart from the fixed-pitch text just referred to, all the
rest of the text will normally be in a
proportionally-spaced font -- probably something like
Times/Trinity, but there's absolutely no guarantee of that!
It is officially considered "naughty" to specify bold or
italic; but just about everybody does, and gets away
Graphics can be inserted anywhere (well, not literally --
but see later).
Note that a graphics file is quite large in terms of number of
bytes, and a single photograph can easily contain more bytes
than even a long page of HTML text. Visitors will not be amused
if they have to sit twiddling their thumbs for minutes on end
(and running up their 'phone bills) waiting for large graphics
files to download. Simple black-and-white line-drawings will
usually be quite small (in file-size); but full-colour
photographs should be restricted in number and physical size
unless they are absolutely vital. Also, some visitors will opt
to run their browsers in "text-only" mode when graphics are not
fetched at all: so graphics should be used to illustrate a
point already made in the text, not be the sole means of
Therefore, choose your illustrations on the basis of "most
visual impact per square inch".
Can I have pretty colours?
Yes -- but don't let it go to your head!
As regards graphics, a colour file is only about twice as
large as a grey-scale (half-tone) image, and so can be used.
You can specify text colours, but be careful: by convention,
blue is used to highlight
hypertext links, and red is used
to denote "visited links" (links the browser has already
accessed), so it would be confusing to use those same colours
elsewhere [it is possible to re-define the "link" colour to be
(say) green so that you can use blue body text; but this could
still confuse the poor visitor, especially if they are an AOL
customer or otherwise not very bright].
You can also specify a background colour for the whole page;
in this case too you have to be more careful than usual in
specifying foreground colours (black text on a black background
isn't very legible!)
You can even specify an image to be "tiled" over the entire
page like a wallpaper pattern; even more care with foreground
colours is then necessary!
What about a fancy web-counter?
This relies on a special software "mechanism" to count the
accesses, and convert that number into a graphic image which
can then be incorporated into your web page.
Argonet do have such a "device", and instructions for using it
are available from
This is all fascinating -- where
should I start?
I've already told you: compose the text and select some
pictures! Also there's nothing to beat doodling with pencil and
When you actually come to write the HTML code, you will need
an ordinary text editor -- !Edit will do fine, and comes with
all Acorn RiscOS computers; but if you prefer to use !Zap or
!StrongEd, that's fine too.
You will also need a list of the HTML mark-up "tags" and some
instructions on how to use them.
Your humble and obedient scribe has prepared a "HTML tutor"
in two versions, both available from my home page
I also have a slightly shorter version of "tutor" without the
index, but this is not currently on my web-site.
A fully-indexed HTML document, which you should save so you
can read it off-line:
A plain-text file, archived (compressed) as a ".zip" file,
to be downloaded, unzipped, and printed out for reading at
There is also a zipped text-file giving an expanded
explanation of decoding image maps for when you get really
adventurous; this currently has the URL:
but if for any reason it disappears from the site, it can be
requested by email.
The ZFC site also contains some more information to help you:
"Your very first Home Page (or, How to get a Web site up
and running by tea-time)"; for the impatient!
"Preparing Images and Graphics for a Web Page"
"Trouble-shooting Web page HTML when things don‘t
If after consulting the tutor(s), you still have some
specific HTML problems that you need advice on, feel free to
firstname.lastname@example.org (John Alldred), and I'll do my
best to help.
Back to ZFC Home Page . . . .
. . Back to "Guides" page