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

(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

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.

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 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 :
  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. "Introduction to Web-Authoring" (a non-technical overview):
    Basic principles, and starting the layout;
    http://www.argonet.co.uk/zfc/html.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

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