Introduction to Web-Authoring

By John Alldred

Basic principles, and starting the layout

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?

HyperText:

The first - and possibly most interesting - feature is the "HyperText" bit.
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 the 'net".
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.

Mark-up:

The second half of the acronym refers to the Mark-up of the text: this influences - but does not totally control - the visual appearance.
If you were to design a brochure for example, you would start with the text which would initially be in draft or manuscript form.
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 accordingly", etc.
[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 sub-set].

But not a "page description language":

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 in mind!

So how do I start to design a web page?

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 imposed.
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 make:
  • Assume the page width is about 7 inches or just under (say 170mm).
  • 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 same line.
  • 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 indented left-margin;
  • You can have whole paragraphs or blocks centre-justified;
  • 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 with it!

    Pictures:

    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 conveying information!
    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 http://www.argonet.co.uk/Support.html#webcount .

    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 paper!

    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 http://www.argonet.co.uk/users/protovale/john.html :

    1. A fully-indexed HTML document, which you should save so you can read it off-line: http://www.argonet.co.uk/users/protovale/tutor.html;
    2. A plain-text file, archived (compressed) as a ".zip" file, to be downloaded, unzipped, and printed out for reading at your leisure: http://www.argonet.co.uk/users/protovale/tutxt.zip .
    I also have a slightly shorter version of "tutor" without the index, but this is not currently on my web-site.
    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: http://www.argonet.co.uk/users/protovale/imgmap.zip ;
    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:

    1. "Your very first Home Page (or, How to get a Web site up and running by tea-time)"; for the impatient!
      http://www.argonet.co.uk/zfc/html1.html
    2. "Preparing Images and Graphics for a Web Page"
      http://www.argonet.co.uk/zfc/grafx.html
    3. "Trouble-shooting Web page HTML when things don‘t work"
      http://www.argonet.co.uk/zfc/hdbug.html

    If after consulting the tutor(s), you still have some specific HTML problems that you need advice on, feel free to email me protovale@argonet.co.uk (John Alldred), and I'll do my best to help.

    Back to ZFC Home Page . . . . . . Back to "Guides" page