Your very first Home Page

or

How to get a Web site up and running by tea-time

By John Alldred

This is intended for those who are either very impatient, or else just want something simple to try before delving deeper.

Creating the "local" Web site directory

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:

<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->

<HTML>
<HEAD>
<TITLE>My Incredibly Brilliant Home Page</TITLE>
</HEAD>
<BODY>
<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>

<HR>

To shower compliments on my creative genius,
<A HREF="mailto:userid@argonet.co.uk">email me</A> at
<EM> userid@argonet.co.uk</EM>.

</BODY>
</HTML>

<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->

Saving the HTML source

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 icon.

(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).

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 userid@argonet.co.uk.

Explanation of the example HTML-code

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 symbols).
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 window.

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.

Headings

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 "<Hn>whatever</Hn>" 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:

Formatting/Layout

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> tag.

HyperLinks

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 "HyperLink".
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:userid@argonet.co.uk" which corresponds to the information following "<A HREF="".
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 text.

Is it ready to upload yet?

Good grief, NO!!! Not yet!

The TITLE

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

Email Address

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

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 "index/html").
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 "Uploads" directory.

Uploading via FTP

(which stands for File Transfer Protocol, in case you were wondering)

You have now finished with WebKit2, WebPack, MyWebSite and index/html, so you don't need any of their filer windows open any longer.
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 "ftp.argonet.co.uk".
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 to parent".
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.

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.

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 http://www.argonet.co.uk/users/userid where "userid" is that part of your email address in front of the "@".

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.

HTML Tutors

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 :

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;
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:

"Introduction to Web-Authoring" (a non-technical overview):
Basic principles, and starting the layout;
http://www.argonet.co.uk/zfc/html.html
"Preparing Images and Graphics for a Web Page"
http://www.argonet.co.uk/zfc/grafx.html
"Trouble-shooting Web page HTML when things don‘t work"
http://www.argonet.co.uk/zfc/hdbug.html

Help

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

JohnA, ZFC:B, 20Jy96

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