|
|
This is only a preview of the May 1996 issue of Silicon Chip. You can view 24 of the 96 pages in the full issue, including the advertisments. For full access, purchase the issue for $10.00 or subscribe for access to the latest issues. Articles in this series:
Items relevant to "High Voltage Insulation Tester":
Articles in this series:
Articles in this series:
Items relevant to "KnightRider Bi-directional LED Chaser":
|
COMPUTER BITS
BYhttp://www.pcug.org.au/~gcohen
GEOFF COHEN
HTML for beginners – creating
your own World Wide Web page
While there are literally millions and millions
of people browsing the Internet, comparatively few have their own home page on the World
Wide Web (WWW). Here’s a brief rundown on
creating a home page from scratch.
Although I didn’t realise it when
I started using the Internet last year,
Internet Service Providers (ISPs) allow
you to have your own Home Page. I
was pleased that my ISP (PC Users
Group, ACT), allows free home pages
for non-commercial use, although they
do charge for commercial home pages.
Another ISP I contacted (TPG) said
that their charge was around $30.00
per month, depending on the usage
of the page.
The Hyper Text Markup Language
(HTML) is the language used on the
World Wide Web. When you use
an Internet access program such as
Netscape or Mosiac to view a web
document, you are looking at a HTML
document that someone spent some
time creating. Hopefully, by the end
of this article, you will be able to
spend some time creating your own
home page.
HTML features
HTML allows very attractive home
pages to be created, provided that you
are prepared to invest some time and
effort. Some of its features are:
• Documents can be formatted with
different font styles and sizes.
• Hyperlinks can be established to
other web pages and programs.
• Graphical images can be included
in web pages.
• The newer extensions (eg, Java) offer
frames, 3D features and on-screen animation. I would recommend that you
download Netscape 2 (it’s available for
both Windows 3.x and Windows 95)
to check out these features, although
they are quite complex and I won’t
even attempt to cover them in this
HTML primer.
Web editors and HTML
The preview feature of Hot Dog Pro lets you run Netscape off-line. This lets you
view both the Hot Dog Pro source code (left) and also the document as displayed
by Netscape (right).
74 Silicon Chip
The HyperText Markup Language,
as it’s name suggests, uses markup
codes to create all those nifty pages
you have browsed on the net. While
you can use any text editor to make
you own Home Page, the markup codes
can make HTML editing a real chore,
especially if you are a HTML novice,
I found that using a web page editor
made life a whole lot easier.
The editor I have used the most is
Hot Dog Pro, an Australian product.
Evaluation copies are available at:
http://www.sausage.com.
When Hot Dog pro is loaded, you
can choose to run the tutorial (real
programmers don’t need tutorials, of
course). Having done this, you can
You don’t have to learn HTML codes. Just click on the appropriate buttons and
Hot Dog Pro will generate the HTML source codes for you.
Above: once your Web
page has been created,
it needs to be placed
in the publishing
directory of your
Local System. This is
done by running an ftp
(file transfer protocol)
program.
Fig.1: Basic HTML Document
<HTML>
<HEAD>
<TITLE> type_Document_Title_here </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
actually start the process and create
a HTML document, using either the
“File/New” or the Button bar. Hot
Dog Pro will then produce this basic
HTML document, which will usually
be saved in the default HTML name
of Welcome.htm. This document is
shown as Fig.1.
As you can see, HTML codes are
included inside angle brack
ets and
(nearly) all HTML codes have two
parts:
(1) a start such as <HEAD>, some text,
pointers, etc; and
(2) a matching closing command (eg,
</HEAD>), with a “/” ahead of the
first code.
These markup codes don’t care
about case but are normally written in
upper case to make them more obvious
in the document.
Another important point is that
HTML ignores blank lines, spaces and
tabs, etc. A web browser will simply
reformat the screen, depending on the
size of it’s window. I use blank lines
to separate the various codes, to make
the source text easier to read.
In essence, our simple HTML document is composed of four parts. The
first code <HTML> and the matching
last code </HTML> tell the browser
that this is a HTML document.
The next code pairs <HEAD and
</HEAD> are for the heading of the
HTML document. Between these are
<TITLE> and </TITLE>, with the
title’s text in the middle. The title
should, fairly obviously, identify the
contents of the document.
The <BODY> and </BODY> codes
are what we are really waiting for. This
is where we put all the HTML stuff a
browser sees.
Now the beauty of using an HTML
editor such as Hot Dog Pro is that you
don’t really have to learn all the codes.
Instead, the Button bar and Menus do
all the hard stuff for you. I just selected
“H1” from the Button Bar and typed
in “Large text at the top of the page”
to put some large text at the top of
the page. I then marked that text and
clicked on the Centre button.
Using Hot Dog Pro, it’s also simple
to add hypertext links, images or any
other HTML feature you need. I just
clicked on the “External” button to
add a link to a news & mail reader
called “Agent”.
The code Hot Dog Pro generated
is not too hard to understand, especially if you use the Preview feature.
May 1996 75
This lets you run Netscape off line,
so you can generate your Web pages
without wasting time on line. I have
configured my Windows display to
1024 x 768 and this allows me to view
both the Hot Dog Pro source code and
also the document as displayed by
Netscape (or whatever browser you
use) – see photo.
The code listed in Fig.2 only took
about five minutes to generate and
could be very easily expanded to a
usable Home Page.
When you have finished any changes, it is a good idea to check your
document for any HTML syntax errors.
In Hot Dog Pro, go to the menu and
select “Tools/Check HTML Syntax”
and it will check for errors. If it finds
any, it stops and indicates exactly
what the error is. I found my most
common error was forgetting to close
a <COMMAND> with it’s matching </
COMMAND>.
Publishing your Web page
Left: this is how the author’s Home Page looks with if the Web Browser has
“Auto Load Images” turned off.
Fig.2: A Basic Home Page
<HTML>
<HEAD>
<TITLE>Geoff Cohen’s simple HTML test</TITLE>
</HEAD>
<BODY>
<H1><CENTER>Large Text at he top of the Page</CENTER></H1>
<BR><BR><BR>
A simple List
<UL>
<LI>Item 1 on our list</LI>
<LI>Item 2 on our list</LI>
<UL>
<LI>Nested Item on our list</LI>
</UL>
<LI>Item 2 on our list</LI>
</UL>
A hyperText link<BR>
<A HREF=”http://webpress.net/forte/agent/”>Agent the best News & Mail reader</A>
</BODY>
</HTML>
76 Silicon Chip
Once the page is what you want,
as viewed locally on your browser,
you need to press the “Publish”
button. This transfers the finished
HTML document to the directory
you selected for the finished product. Incidentally, Hot Dog Pro can be
configured to automatically translate
any PC backslash (“\”) characters to
the Unix “/” character.
Now it’s time to run your normal Internet software and get on line. When
you are connected, run your ftp (file
transfer protocol) program and select
the publishing directory for the Local
System (mine is E:\HTML\ HTDOGPRO\WWW).
The Remote System side will depend on your Internet supplier. They
will have given you the correct address
and a password when you asked for
your own Home Page. This is normally
different from the http address that
your browser will use.
As an example, my http address
is http://www.pcug.org.au/~gcohen,
while the ftp address is ftp.pcug.org
.au/home/pcug/gcohen/WWW. Make
sure you get the full details from your
supplier.
Once the ftp program is connected,
it’s simply a matter of clicking on the
Local System file (in my case Welcome.
htm) and clicking on the transfer (->)
key. The HTML is then transferred
(it only takes a few seconds) to your
web server.
To test that all is well, run your
browser, and type in your home page
address. You should then see your
home page. Note that the view will
depend on whether the browser has
Auto Load Images selected or not.
Speed up your browsing
One point I should mention is
that, to speed up browsing, I don’t
normally have “Auto Load Images”
as the default on Netscape. Instead, I
just click on the “Images” button if I
want to see a particular image. If I am
browsing through pages where I want
to view all the images, I manually
select “Auto Load Images” but I don’t
click on “Save Options”. Thus, when
I load Netscape the next time, I still
have my preferred options (ie, “Auto
Load Images” will be off).
That’s about it really. When you
change the page, just repeat the above
steps: (1) edit and view locally on the
browser; (2) publish; (3) get on line
and ftp to the web server; and (4)
test with your browser. If you have
problems which you or your supplier
can’t solve, you can always send me
an email and I will try to help fix the
problem.
Short cuts
One of the easiest ways of getting
experience in HTML pages is to examine the HTML source for someone
else’s page. With Netscape, you can
either save the page (Control S) or just
have a quick look at the HTML source
(View/Document Source).
Another thing I should mention
is that if you are going to spend any
appreciable time writing HTML code,
there is a handy little book called the
“10 Minute Guide To HTML”, by Tim
Evans. It’s not one of those enormous,
expensive, bloated computer manuals
bit is very easy to read and understand.
It gives a good grounding in HTML,
with a listing of examples and HTML
codes.
I also found the Hot Dog Pro Help
menu was great. It had a full description of HTML 2 codes, with examples.
An alternative to Hot Dog Pro is a
program called WebEdit, which I have
also tried. I should also mention that
Netscape has just released Navigator
Gold 2.0 for creating Java scripts and
I will check it out in the near future.
Finally, for those who want to check
out my home page, it is located at
http://www.pcug.org.au/~gcohen SC
Selecting “Auto Load Images” on the Web Browser lets you view any graphics
that may be present but can significantly slow download times.
Fig.3: Example HTML Codes
Headlines & Text Style
Headings
<H1> . . . </H1>Largest heading font.
<H2> . . . </H2>
<H3> . . . </H3>
<H4> . . . </H4>
<H5> . . . </H5>
<H6> . . . </H6>Smallest heading font
<STRONG> . . . </STRONG> Make text bold
<EM> . . . </EM> Usually shows as Italics.
<P> . . . </P> paragraph begin/end markers
<BR> Start a new line at the given point. Note: there is NO matching </BR>
Links
<A HREF=”the_Link”>Text</A>
Lists
<UL> . . . </UL>
<OL> . . . </OL>
<LI> . . . </LI>
HyperText or URL link
Unordered List (with bullets)
Ordered List (with numbers)
The list items
Images
<IMG SRC=”Image_filename”>
May 1996 77
|
