Your very first Home Page
How to get a Web site up and running
By John Alldred
This is intended for those who are either very impatient,
or else just want something simple to try before delving
Creating the "local" Web site
First, create a directory on your hard disc to contain your Web
site; the name you give the directory is immaterial, so
"MyWebSite" will do!
Creating an example Home Page
Next, start up !Edit (or !Zap or !StrongEd if you prefer), and
type in the text below between the lines of +++++ symbols (you
don't have to type in the +++++ lines, though it doesn't matter
if you do);
never mind what it all means or does, I'll explain that later:
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<TITLE>My Incredibly Brilliant Home Page</TITLE>
<H1>My Brilliant Home Page!</H1> <H2>Created entirely by me</H2>
<H6>(Well actually, I did crib just a teeny-weeny bit of it)</H6>
To shower compliments on my creative genius,
<A HREF="mailto:firstname.lastname@example.org">email me</A> at
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
Saving the HTML source
(Actually, you could have set the file type before you started,
by clicking MENU on the icon-bar Edit icon, moving up to
"Create =>", across to the submenu, down to the blank line
at the bottom, and typing in "HTML" (or "&FAF" ) [Return];
next time around you'll probably want to try it that way).
Save that text into your "MyWebSite" directory; you MUST
give it the filename: "index/html" EXACTLY (except
for the quote marks).
Click MENU on that text file, move the pointer down and
across "File 'index/html' =>" , down to "Set type =>"
and across to "Text" ;
delete the word "Text" and type in "HTML" (or "&FAF" ),
and press [Return].
The icon will change from the icon for a TextFile to a HTML
Viewing your Home Page
Leave the !Edit window containing your page open, but shrink
the window down so there's plenty of unused screen.
Now (assuming you already have !Voyager loaded; load it if you
haven't; but don't connect on-line), double-click on your
"index/html" file icon.
After a short delay while !WebVoyage (the browser portion of
!Voyager) loads, the browser window will open and you will see
what it looks like.
And it doesn't look anything like what
you've just typed!
My Brilliant Home Page!
Created entirely by me
(Well actually, I did crib just a teeny-weeny bit of it)
To shower compliments on my creative genius, email me at
Explanation of the example
Mark-Up and TAGs
So now to go through explaining it all (compare the HTML-text
with the browser-rendered version):
Note that the "Mark-Up" is all done by "tags" which are
keywords enclosed in angle brackets (less-than and more-than
With one exception (<HR>), tags always occur in
"start" and "end" pairs, for example <HTML> and
</HTML> as the first and last respectively.
The HEAD of the document
None of the stuff between <HEAD> and
</HEAD> appears anywhere inside the browser window;
but the text between <TITLE> and
</TITLE> appears on the title-bar of the browser
The BODY of the document
Nearly all of the text occurring between <BODY>
and </BODY> does appear somewhere inside the
window; but the layout is quite different.
The tag <H1> means "Level-One (largest)
Heading", and so the text between <H1> and
</H1> is in nice big characters.
The tag <H2> means "Level-Two Heading", and so
is just a little smaller.
You will see that a
sequence always gets a line to itself; so despite the fact that
the HTML source has both the main heading and the sub-heading
typed on the same line, they actually appear over two lines.
The tag <H6> (you should be way ahead of me by
now) is the smallest.
The tag <HR> means "Horizontal Rule", and does
just that; it neither has nor needs an </HR> end tag.
The bit below the rule contains several examples of note:
Although the HTML-source is spread over three lines, the actual
page shows everything all on one line!
The browser takes not a blind bit of notice of newlines in the
source (nor multiple spaces for that matter), but formats
everything as it sees fit. However, you can force a newline
with a <BR> tag ("BReak"), or a new paragraph
with prededing blank line by inserting a <P>
The text "email me" which occurs between the <A
HREF.....> and </A> tags appears in blue
and underlined (unless you've mucked about with your
"Preferences => Web browser..." options); this is a
If you move the mouse pointer over it, the pointer changes to a
pointing finger. If you look at the top panel of the browser
window, the top line has been saying something like
"local://somewhere_on_hard_disc/MyWebSite/index.html", and now
the line beneath says "mailto:email@example.com" which
corresponds to the information following "<A
The tag <A> is an "Anchor", which repesents
either end of a HyperLink.
In this instance it marks a point on a web page FROM which you
can link TO somewhere else (in this case, your mailbox); but
the <A> tag can also be used to mark a point on
a web page TO which you can link FROM somewhere else.
The attribute "HREF" stands for "Hyperlink REFerence".
Highlights and Emphasis
The <EM> tag stands for EMphasised, and will
typically cause the text to be shown in italics.
The tag <STRONG> can be used for stronger
emphasis, and will typically produce bold
Is it ready to upload yet?
Good grief, NO!!! Not yet!
This is what will appear on the title-bar of the browser window
of anybody who "visits" your site, and it is also likely to be
picked up by any of the "Search Engines" which prowl the
InterNet catalogueing sites they find (you did intend to be
world-famous, didn't you?); so this should be reasonably
sensible and informative, something like "The Tommy Atkins Home
Page", or possibly like "Amateur Software Unlimited Home Page"
if that's how you want to present yourself to the world.
The "Main Heading" in the example shows room for improvement
(as does the whole thing really; but this is just for fun!)
You will want to include your email address on your Web-site
home page (and possibly call yourself "the WebMaster"!); so you
should replace BOTH occurrences of "userid" in the
example HTML code with your actual user ID (the bit which comes
before the "@" in your email address), thus having your correct
email address appearing on-screen AND following the
"mailto:" part of the Hyperlink Reference.
Editing and Proofing
As you make changes to your HTML source (index/html), save the
file, and click on the "RELOAD" button on the browser control
panel (the green going-round-in-circles icon) to see what
effect the changes make.
That's good enough: I want it up
Ok, ok, I might have guessed you were going to be impatient!
Packing for Upload
Find the "WebKit2" directory of Voyager utilities, look
inside it for the application "!WebPack", and double-click
on that to start it.
Find somewhere to temporarily keep the upload data you're
about to create (creating a directory called "Uploads"
would not be amiss), and open the filer window (directory
viewer) of it.
Now drag the directory "MyWebSite" (or whatever you've
called it) on to the WebPack icon-bar icon. Note that it is
the directory you must use here, not just the file
WebPack will first open a window showing the nature of the
entry you will get in the Argo Web-site "Yellow Pages".
The default title of the site as shown will be one made up
from your "real name" and e-mail address; you can edit that
into something more suitable or appropriate if you wish.
You can also choose which combinations of sections you want
to be catalogued under (personal, business, or education).
Then click on "Create".
WebPack will then display a fairly conventional "Save as"
dialogue box, showing a data file with a name made up of
the letters "arg" followed by two more letters and two
digits (which you may or may not recognise as being your
user-id). Do not alter the name it shows!
Drag that data file from the "Save as" box into your
Uploading via FTP
(which stands for File Transfer Protocol, in case you were
You have now finished with WebKit2, WebPack, MyWebSite and
index/html, so you don't need any of their filer windows open
You do need to have the "Uploads" filer window open and the
data file ("argdz99" or whatever) visible.
Turn your modem on and click on the "CONNECT" icon at the
left-hand end of the Voyager control panel. Note: use the
select button, not the adjust button; you want a "full"
log-on, not just a "QuickFetch".
Once you've got successfully logged on ("Connected to the
Internet"), the right-hand Voyager FTP button will light up
in colour (the one showing an invisible juggler cascading a
selection of file icons from one directory to another):
click on it.
This will open a small window for entering the URL of the
FTP-site. click on the menu icon to the right of the entry
window to get the list of pre-programmed sites, move down
and select "Argonet", and the window will fill in with
Now click on the "Connect" button.
The first FTP window will be replaced by a second one,
which initially shows messages such as "negotiating user"
whilst trying to connect.
When it succeeds, you will get something that looks like a
filer window containing directory icons (the window may be
too small initially to show more than one).
It is indeed a "directory viewer": but of (part of) the
hard disk at Argonet.
Enlarge the window or scroll it until you find a directory
called "Incoming", and double-click on it to open it (just
as you would a normal directory).
After a brief pause (and modem activity), you will get
another filer window (again, of Argonet's disk, not yours),
which only contains one item, a directory icon called "Up
Now drag your upload data file ("argdz99" or whatever) into
that (remote) filer window.
Another temporary window will appear with a bar-graph
showing the progress of upload (it won't take very long for
the trivially-short data in this example!).
After uploading is complete, the "Incoming" filer window
will be re-drawn, but it won't show your data file in it!
Don't worry, this is normal: you have in effect got "write
access" to that directory, but not "read access", so you
can't see any of the files in it, not even your own!
That completes the upload.
If you log on again about ten minutes later, you will usually
receive an automatically-generated email from support@argonet,
telling you that your Web site has successfully uploaded and is
now available to access. Your web page has the URL
"userid" is that part of your email address in front
of the "@".
Either click on Voyager's "DISCONNECT" icon to log off; or,
if there is something else you want to do online, or the
news fetcher is still downloading news items, just click on
the "close" icon of the FTP window, and carry on with
whatever it is you wanted to do.
Now I want to create a much more
complex site of pages
In which case it's time to do some HTML homework, I'm afraid!
You will need a fuller 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:
"Introduction to Web-Authoring" (a non-technical overview):
Basic principles, and starting the layout;
"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 email me at
firstname.lastname@example.org (John Alldred), and I'll do my best
JohnA, ZFC:B, 20Jy96
Back to ZFC Home Page . . . .
. . Back to "Guides" page