


|
 Q: What is HTML?
A: HTML
is an acronym for HyperText Markup Language and it is a subset of the non-proprietary
Standard Generalised Markup Language (SGML) Document Type Definition (DTD). HTML is the
standard language of the WWW and Web browsers take a document written in HTML and
interpret this language and present the document. The HTML document itself is simply a
text document which includes not only the text for a Web page but also information
controlling the way this is displayed -- the tags.
HTML has evolved over recent years as a standard language.
There are a number of levels of HTML and the current level is HTML 3.2. In addition there
are Netscape and Internet Explorer extensions to HTML which are not part of the standard
language and are generally only supported by these particular browsers.
Q:
Can I use graphics and HTML source that I find on the Internet?
A:
Not necessarily! Just because it is extremely easy to copy graphics, HTML source and
scripts from the Internet doesn't make it legal to do so. Copyright applies to material
you find on the Internet just the same as in any other publishing media. However, because
of the way material is published on the Internet, many authors realise that something that
is good will be copied, so they're more inclined to allow copying. Most will require that
you acknowledge them as the source and undertake not to alter the images or script without
permission. In addition, there are many sites dedicated to making, particularly, graphic
images freely available to Internet users. The best approach to take if you find something
you like is to ask if you can copy it. If the worst comes to worst, then given that
copyright exists on the form and not the concept, you can always copy the idea and rework
it your own way, as long as you don't copy the actual graphic, source or script itself.
|
|
Q:
Do I have to learn HTML? A: No, you don't have
to learn HTML to create a Web page or two. Any reasonable Web authoring package, and this
includes most current word processors, will allow you to create a straightforward Web
page. However it certainly helps to understand the basics if things go wrong and your page
doesn't work as you'd like it to, or if you want an effect that your Web creation software
can't provide for you.
It also helps to understand what tags and attributes are part
of HTML and which are, say proprietary Netscape or Internet Explorer extensions. These
latter won't necessarily work in other browsers so you'll want to be aware of this before
you use them thinking everybody can view their effect.
The more work you do on the Web, the more valuable you'll
find an understanding of HTML will be to you.
|
Commonly used HTML tags and key attributes
|
Q:
Why do I need to speed up my page? A: Quite simply, you
need to speed up your Web page because most of us can't be bothered waiting around for it
to load. It takes too long, we get bored and go somewhere else. The best thing you can
offer your viewer is a lean and mean Web page that loads quickly.
If you do have large files; sounds or graphics, by all means
include them on your site, but warn your viewers how big they are and give them the choice
of downloading them or not. In the case of graphics, you can do this by using a thumbnail
graphic with a link to a larger graphic, for sound, offer a link to the sound -- don't
load it automatically.
Also, use the height and width attributes in your graphic
tags so that the browser knows how large the graphics are and leaves room for them. This
way the text will appear quickly and your user will have something to look at while the
graphics are downloading.
|
Q: Can
I use a graphic not in a *.GIF or a *.JPG format? A:
There are two main graphic formats used on the Web; .*GIF (pronounced jif) and *.JPG
(pronounced jaypeg). An additional format *.PNG (pronounced ping) is being introduced but
is not yet so widely accepted as the other two.
You can use graphics in other formats but your user will need
a plug-in to view it. There are a number of plug-ins available on the Web which you and
your users can download to view files in such formats as *.AVI and *.PDF. However, most
people won't be too pleased if they spend time downloading a plug-in to view something
they could have viewed in a *.GIF or *.JPG format. So, unless you really have to use a
format that requires a plug-in to view it, don't!
Essentially, if you have an image in any format, you can use
it on the Web if you can convert it to one of these formats. The easiest utility to use is
the shareware package Paint Shop Pro, which can read graphics from a number of different
formats and allows you to save them as either *.GIF or *.JPG. If you have photographic
material, *.JPG is the best option to use; if you have line drawings or simple graphics
using few colours, then *.GIF is the better format.
Feel free to experiment with different ways of saving files
to see what is the best for a particular graphic. You'll be surprised how a change in
format alone can drastically reduce file size, without much difference in quality. These
are the results of saving a photo and a line drawing in the two typical Web graphic
formats, you can see that while *.JPG is ideal for photographic material, it simply
doesn't suit line drawings and vice versa:
|
Original
size & format |
Saved
as JPG
(50%/50% quality/compression) |
Saved
as GIF |
Photo (papers)
|
44.4 Kb JPG |
20 Kb JPG |
93 KB GIF |
Line drawing
(coffee cup) |
3 Kb WMF |
18 Kb JPG |
6 Kb GIF (256 colours)
5 Kb GIF(16 colours) |
|

Choosing the right format for each of these
graphics means you can reduce the file size significantly; the photo should be saved as a
*.JPG and the line drawing as a *.GIF.
|
Q: What
can I do to reduce the size of a graphic? A: Even a small
graphic can be quite big in terms of download time on the Internet. You should try to keep
your graphics as small as possible and this means keeping the file size to a minimum.
To reduce a graphic's size, start by cropping them closely.
Make sure that any space around a graphic is removed, particularly if you're saving it as
a *.GIF file and this area will be transparent anyway. If you want space between the
graphic and your text, create this with the VSPACE and HSPACE attributes not excess pixels
in your image file.
Use graphic strips. You can create a vertical graphic strip
for your page only one pixel high which gives you a very small file but a neat effect. You
should also consider that a black and white image can often work as well as a colour image
provided you make up for the absence of colour in the image some other way on the page.
Quick navigation bars. If you're creating a navigation bar,
take a look at the Microsoft pages to see a neat way of doing this. You'll find each
navigation strip is a series of graphics not simply one big one. So, when you move from
page to page, only the graphic representing the selection you have made needs to alter to
show which is selected. As the others should already be in your browser's cache, the
navigation areas will load much faster than if an entire bar had to be loaded each time.
|

Using a graphic only one pixel deep you can get
a neat background effect with a very small download time.
|
Q: What
is a domain name and do I need one? A: If there weren't
domain names, an Internet address would simply be a series of four numbers (each separated
by a period and each less than 256) and you would find identifying and remembering them
would be a nightmare. Quite simply, domain names are a friendly front end to the Net's
navigation system. When you type a URL containing a domain name such as
http://www.microsoft.com.au, this is passed to the Domain Name Service which locates the
IP address that matches the domain name. From there you are moved to the computer that
this address represents.
If your ISP offers you a homepage service, you'll generally
find that the URL for your homepage is something like:
http://www.supernet.com.au/users/~janeb/. This is acceptable for personal use and it's
certainly the cheapest way of having an Internet presence. However, if you are a company
or business, you may prefer to shorten this by having your own domain name such as
Microsoft's (www.microsoft.com) and PC User's (www.pcuser.com.au). These names are easier
to remember and they're more professional than 'hanging' off someone else's domain name.
You don't have to own your own server to have a domain name
but if you don't, someone will have to provide you with a virtual server. They will
generally also apply for the domain name for you. Although you can apply yourself by
filling out a form at http://www.aunic.net/. You'll also need to register and delegate
your name which is how the link is made between the IP and your domain name. If your ISP
provides you with an Internet address that they supply and manage, then they'll do this
for you. If you have your own server you can do this directly yourself. Our advice is to
shop around, though, as the prices can vary significantly.
When you have your own domain name, you can move from one
server to another more easily as your domain name will stay the same -- only your IP
address will change. Put simply, you won't have to tell everyone who accesses or is linked
to your site that you have moved.
You'll find more information on Domain names on this month's
CD-ROM Web section.
|
Q: How
can I check my HTML source is correct? A: There are a number
of online validators that will take your HTML source and validate it. They check each tag
and make sure that it complies with the HTML standards. Generally, you'll need to have the
page already loaded on the Internet and the validator will check one page at a time. In a
future HTML column we'll have a step-by-step look at using a validator to check your
source. In the meantime check out these sites:
- WebTechs HTML Validation Service: http://cq-pan.cqu.edu.au/validate/
- And this, kinder gentler validator which incorporates WebLint:
http://ugweb.cs.ualberta.ca/~gerald/validate/
|
Q: Why
don't the colours I use look the same on other people's monitors? A:
Unless you use colours from the 'browser safe' palette, you can't be sure that the colours
you see on your screen will appear the same way on other people's monitors. On-screen
which, say, is only displaying 256 colours, colours not from the browser safe palette will
be dithered, ie, made up of dots of a combination of colours which best approximate the
colour which cannot be displayed.
If you're creating backgrounds and simple line-drawn
graphics, buttons etc, then you would do well to only use those colours from the browser
safe palette. You will recognise these from their RGB (red/green/blue) codes which will
each be some combination of hex: 00, 33, 66, 99 CC, FF or decimal: 00, 51, 102, 153, 204,
255.
You'll find a great explanation of the 216 colour palette at http://www.onr.com/user/lights/netcol.html
|
Q: My
site looks flat, how can I give it a makeover? A:
Your first step for a makeover is to go out and have a look at other sites and work out
what you like and don't like. Gather together lots of possible ideas and try to understand
why some things work and why others don't. The more you understand about Web design
issues, the more you can make proper choices when planning your site.
Like any design project, start by drawing a grid on paper and
work out what will go where on your pages. With a grid you can plan the items on your page
that will be repeated on each page (such as navigation bars and buttons) and where the
variable information will go. If it doesn't look good on your grid then it won't look good
on the screen. The work you do with pen and paper away from the computer will repay itself
tenfold when you come to write your HTML source. When you have your page layout, pick a
typical page and mock it up so you can see what it actually looks like. Don't do anything
more until you've got this page looking and working properly with your final selection of
colours and fonts and correct placement of logos and navigation areas etc. When this is
done, the page will become a template for the rest of the pages on your site.
|
Q: How
often should I update my site? A: You should update your site as
often as you have promised people that you will. For some people, once a month will be
sufficient for some organisations, daily update is required. You should remove any
"this site is always under construction" references as most people assume that
the Web is an area where "hard hats must be worn" at all times and everyone's
site is only hours, days or weeks from being updated or completely madeover. It's a good
idea to add a "new" graphic to any new areas so regular visitors can see quickly
what might have been added since they last visited. But make sure the "new"
signs are down when the information is no longer fresh.
When you do update, check all your links to make sure they
are current, before and after you update. You'll be surprised how many tiny errors can
slip in when you update a site, so check everything is working correctly.
Every site should have a major makeover every 12 to 18 months
to keep abreast of changes in what's hot and what's not on the Web. When tables and frames
came in, many people madeover their sites using these new features, and now with Java and
Javascript support becoming more universal, you can expect to see makeovers that take
advantage of these too. And for the future? Well, style sheets may be all the rage.
|
Q: How
can I help users find their way around my site? A:
It is important that users know what is available on your site and how to get around it. A
sensible approach is a navigation area at the top, bottom or left side of the page
allowing the user a choice of areas or pages on your site. If your site is complex, then
dual navigation areas such as on the Microsoft site allow you to select major areas from
the top bar and subareas from the left one. Whatever you choose, you should always offer
text alternatives to any graphic navigation system so that users who cannot view graphics
or who have turned off graphics can still move around your site.
In addition, depending on the depth of content on your site,
you could include menus, tables of contents, site maps and search engines to help your
users find their way around more easily.
|

Check out the Microsoft Site - the button strip
across the top and down the side of the screen are designed for quick loading
|
Q: I've
heard I can do fancy things with the META tag. What are they? A:
META comes from the Greek word for "about" and it's an optional element that
provides a place to put meta-information that is not defined by other HTML elements.
The <META> tag should appear in the header of your HTML
source and it can be useful in a number of ways. One use is in providing a description of
the page such as:
<META name="description" content="The Home
Page of Helen Bradley, freelance journalist (PC User Magazine), author and consultant from
Sale, Australia">
Including this in your header will mean that popular search
engines, such as AltaVista, will pick this up and use this as a description of your site
when they display search results. Without this, they'll simply use the first words of your
site which could be anything, including portions of scripts etc.
If you use the keywords attribute, you can provide keywords
for the search engine so that anyone searching for these words will locate your site. For
example:
<META name="keywords" content="journalist,
PC User, computer journalist">
will mean that the site is picked up by a more general
search.
There is a good description of how AltaVista uses the META
tag on its help page at http://www.altavista.digital.com/
<META> can also be used for fancy "client
pull" Netscape animation tricks such as automatically loading a new page after the
first page is loaded. For example:
<META HTTP-Equiv = "Refresh" content = "20;
URL = page2.htm">
placed in the header of a Web page will load the document
page2.htm, 20 seconds after the current page starts to load. You can use this to good
effect if you have a fancy front page to your site and wish to move your users into your
site quickly and automatically a few seconds after it has loaded. You should add a
hyperlink to page2.htm in case a user has a browser that does not support this tag and be
sure to allow plenty of time for the first page to load or your user will be moved on
before the page is fully loaded.
|

Using the META tag you can control what popular
search engines like AltaVista show in their search results and add keywords for locating
your site.
|
Q: What
fonts can I use on my pages? A: Until recently, Web pages were
displayed using the browsers default fonts. These were typically Times New Roman for
proportional text and Arial or Courier for fixed width text (usually created using the
<TT> ...</TT> tags) but that was about all. Most browsers have pushed these
boundaries back and now allow the user to specify which proportional and fixed width fonts
are to be used by the browser with simple Option settings. Microsoft has made additional
fonts available including Impact, Comic Sans, Verdana, Georgia and Trebuchet. You can
download these even if you aren't using Internet Explorer from Microsoft's site at http://www.microsoft.com/truetype/
You can specify a font face in your source using the <FONT
FACE> ...</FONT> tag. This allows you to specify a range of fonts that the
browser can choose from. For example, <FONT FACE = "Comic Sans",
"Arial", "Times New Roman"> ...</FONT> instructs the browser
to use Comic Sans as the first choice; if this isn't available then Arial and if that
isn't available then Times New Roman. If none of the listed fonts are available, then the
browser's default font will be used.
Make sure you type your font names exactly as they are shown
and be aware that the fonts available on the Macintosh are not always available on the PC
and vice versa. For example, the font Arial is not generally available on the Macintosh
and you should specify Helvetica as an alternative for Arial as a sans serif font for
Macintosh users.
|
Q: I
need a good HTML book -- what should I get? A: What book you use
depends on where you are in your HTML learning. If you're a beginner, then one of the
simpler 10 minute guides is a good start. You can then add to your library by sourcing
information online as you need it. There are a number of great tutorials on the Web, so if
you're looking for information on Frames, for example, use AltaVista or Yahoo to find the
available Web tutorials. Increasingly, the Web should be one of your first ports of call
for HTML information.
Helen Bradley's personal favourites are:
- Teach Yourself HTML Publishing on the World Wide Web by
MacBride, Hodder & Stroughton.
- Creating Killer Web Sites, The Art of Third-Generation Site
Design, by David Siegel, Hayden Books.
- Web Concept & Design, A Comprehensive Guide for Creating
Effective Web Sites, by Crystal Waters, New Riders.
- HTML Web Magic by Ibanez & Zee, Hayden Books.
- Whiz Bang Web Site F/X by Tom Lockwood, Que.
- HTML Help by The Web Design Group, http://www.htmlhelp.com/
- Dmitry Kirsanov's Top Ten Web Design Tips, http://www.design.ru/ttt/
- Absolute resource -- From Webbie to Webmeister:
http://www2.southwind.net/~miked/resource.html etc
- We thank Robert Eldridge for his advice and assistance on this
column.
by John Hilvert & Helen Bradley
|

|
 |