===========================================================================
Today on The World Vol. 4 #172 Friday, July 3, 1998
===========================================================================
This chapter will wrap up the HTML tutorial (at least for now), and then
I'll start learning/teaching something else (procmail). So far I've
found two things that should be corrected in previous chapters.
One error of fact in an earlier installment:
In Chapter 8, regarding entities, I said that "&tm;" would make a
trademark symbol (TM) in some browsers. This is incorrect. The
entity's name is "™". (Why? I don't know, but it's "™".)
Some browsers do not know ™, although most seem to -- if you want
to be compatible with everything, of course, you could do TM
for a plain old superscripted "TM". ("™" doesn't work in any of
the versions of Netscape Navigator I have, just Internet Explorer.)
I'll make this correction the archived version.
Remember that you can find the other chapters on
http://world.std.com/help/web/tutorial
for now.
(kibo)
---------------------------------------------------------------------------
HTML TUTORIAL -- CHAPTER 16 -- ET CETERA
This chapter has random bits of advice and tricks that came to mind
while working on previous chapters. Some of these tips involve
browser-specific tag options that will not be visible to all visitors
to your site. Other tips are general advice on working with the Web.
Enjoy.
16.1 Tips for browsing & testing
Bad connections
Quite frequently, no matter where you're coming from or going to,
the particular Internet connection involved may just not connect right.
For instance, if you're loading a page with twenty images on it,
one of them may just not load. (Or the page itself may be the
thing that just happens to get the bad connection.) If this happens,
use the "Stop" button in the browser to halt everything, then click
"Load Images" to make all the unloaded or incompletely loaded images
try to load, or click "Reload" (aka "Refresh") to make the whole
page and all its graphics try to load a second time. (The names of
these commands or buttons in your browser may vary, of course.)
Caching
Your Web browser most likely stores a cache of its own. A cache
is any place that stores recently-used data (in this case, the
Web pages and images you've most recently seen) so that it can
be accessed again quickly. (The Web browser's cache is one of
several kinds of caches your computer uses.) There will be settings
in your browser controlling the amount of space the cache is allowed
to use on your hard disk (usually one to ten megabytes or so) as
well as how often Web pages are checked for changes when you
re-visit them. For instance, if the setting is on "Check pages
for changes once per day" and you re-visit a page you were at
ten minutes ago, the browser will probably show you the copy that
is stored in the cache (from ten minutes ago) rather than retrieving
the page from the Web again.
If you are designing pages and testing them, they are probably
changing frequently, and your browser may not be showing you
the changes you recently made. If this happens, you could get
around this by --
a.) Try the "Reload" ("Refresh") button.
b.) Set the cache to "Check documents for changes every time".
c.) Disabling the browser's cache, if that is an option. Note
that this will slow down browsing.
Memory leaks & flaky browsers
All the popular Web browsers, in my opinion, are somewhat unstable.
They're nice programs, but they're not 100% reliable -- i.e. you
wouldn't want to use one to control nuclear warheads. They tend
to crash if you use them long enough. (This is usually due to
"memory leaks", which means that they gradually use up memory a
few bytes at a time, and after a few hours they run out of memory
and crash.) If your browser is acting weird and you've been using
it for a few hours, try quitting the browser and restarting it to
clear all the cobwebs out. Restarting your browser every few
hours may help reduce the risk of random crashes.
(Sure, this sounds superstitious, but you can actually watch the
memory leaking away in some browsers if you have debugging tools.
Even leaving a browser showing the same page for a few hours can
crash it if the page contains something which periodically updates.)
16.2 Swiping images
Occasionally someone will tell me they were at a Web page and
somehow the page's creator had magically prevented them from saving
any of the images. I say that's hooey. If you can see it, you
can save it, if you know how. (After all, if it's on your
screen, it's already been downloaded into your computer and
stored somewhere!)
In the popular Mac and Windows browsers, point at an image an
hold the button down (for Macs) or click the right-hand mouse button
(for Windows) and you should get a pop-up menu containing a
choice along the lines of "Save this image". If the item you
pointed at was linked to something (for instance, a thumbnail
linked to a larger image) you may also have "Save this link"
(also called "Download link to disk".)
And, bear in mind that you can always use the "View Source" command
to find out the URLs of every graphic on the page. Keep in mind
that most of them will be relative URLs, that is, only the tail
end of a URL: If the page is "http://www.fred.com/site/index.html"
and the source says the graphic you want is "me.gif", then you
could type in "http://www.fred.com/site/me.gif" to reference that
particular image. (Why is this useful? Because background images
are the ones you can't just click on to save -- to swipe someone's
background image you need to view the source and figure out the URL.)
This is why you see so many graphics that get copied from site to
site -- it's trivial to copy any graphic on the Web. (This also
means that there's no way you can prevent your images from being
copied, other than rubberstamping your name across the middle
of each image.)
Remember that in our modern world everything is (usually) protected
by copyright whether it says so or not (and take all advice on
copyright/trademark/patent issues with a very large grain of salt
unless it comes from someone whose business card says "Lawyer
specializing in intellectual property laws."
16.3 Cutting down on peeking
Although you can't keep people from saving any of your images,
or from reading your source code, there are steps you can take
to keep prying eyes from poking around your site looking for
things they shouldn't otherwise see. The easiest security
precaution to take is to put a file named index.html in every
directory (folder) on your site. For instance, if all your
pictures are in a "pictures" directory, anyone typing in the
URL of that directory ("http://www.yourname.com/pictures") would
see a list of all the files in the directory, even ones that
none of your pages are linked to. But if there's an index.html,
the Web server will send that page instead of the list of files.
(There are more sophisticated ways to achieve the same effect,
but this one's the easiest to implement -- just make a standard
file which says "No browsing in my directory!" and drop it into
any directory that doesn't have an index.html.)
16.4 Organize your site
Don't be afraid to make lots of directories. They don't cost
you anything (at least not on any Internet service provider I've
ever heard of.) It makes it much easier to maintain your site
(under the assumption that eventually it might grow to hundreds
of files) if things are grouped together logically. For instance,
I always start by making a directory named "images". That way,
not only are they all in one place and not mixed in with the
.html's, if you have registered your own domain name ("www.yourname.com")
the URL of any of your images will be "/images/picture.gif" no
matter what page is referring to it. ("/images" means "go to
the 'root' of the site and then the directory "images".)
If you have a bunch of pictures or other files that are only
referenced by one of your pages, then maybe you should make
a directory for that page and its images to keep things organized.
Or, if you really like directories, every page on your site can
be in a different directory (the pages would all be in files
named index.html). That way, if instead of "hobbies.html" you
have "hobbies/index.html", then you can give people a slightly
shorter URL, "http://www.yourname.com/hobbies". (Remember, if
someone goes to a URL that ends with the name of a directory, they
will see the index.html file in that directory.) This is also
nice because if you later decide to break up the "hobbies" page into
a cluster of pages, you already have a good place to put the new
stuff without reorganizing the rest of your site.
16.5 Remember, there is no C: or D: drive on the Web!
I've said this before, and I'm going to say it again. At least once
a week. If you are building Web pages with a "visual" editor (such
as Adobe PageMill, Microsoft FrontPage, Claris Home Page, etc.) and
you are making links by "dropping" files into it, it is very important
that you read over the HTML it generates, and/or test your site
from someone else's computer. This is because it is very easy to
put in a link to a page or image at "C:\..." or whatever the name
of your hard drive is (Mac users will see "Hard Drive:...", DOS or
Windows users will see "C:\..." or "D:\...") and these URLs may work
just fine for you -- after all, your computer can see its own C: drive --
but they will not work correctly for anyone else on the Web. (It doesn't
matter if your C: drive is accessible over the Internet, it will
*NOT* be reachable at the address "C:\..." from other people's computers.)
16.6 Mac users: Don't upload in MacBinary
I'm starting to sound like a broken record, but those of you
using Macs, remember: .html files (and other text) should be
uploaded (via FTP) in "TEXT" (aka "ASCII") mode; .gif, .jpg,
and other data files that are not text and need to be viewable
by people who are not using Macs *MUST* be uploaded in "BINARY"
(aka "RAW DATA", "DATA FORK ONLY") mode. *DO*NOT*USE* "MACBINARY"
mode for anything other that Mac-specific files (i.e. use MacBinary
if you're uploading a shareware program you wrote; use regular
Binary for pictures.)
16.7 Lowsrc: Giving people previews of large images
Ever have the feeling that people start scrolling to the bottom of
your page before waiting for the banner at the top to load? For
these impatient situations, most Web browsers support a LOWSRC
option for , as in:
What happens is that the browser will first load the image from the
LOWSRC URL, and then it will be displayed while the real image (SRC)
loads. Usually the LOWSRC is used to load a GIF with very few
colors (such as black and white one) with the intent being to make
it a very quick image to load, while the SRC image, the good-looking
one, might take several seconds longer to load in full color.
Browsers that don't know about the LOWSRC option will just ignore
it, meaning your SRC image will load normally, so this is a harmless
option if you want to give people quick previews of slow-loading images.
(I suggest making the LOWSRC image the same size as the SRC image
in terms of its physical dimensions. And don't forget, in many
browsers pages look better while loading if you specify WIDTH
and HEIGHT attributes for all your tags!)
16.8 Browser-specific rule styles
In Chapter 1, I said that the options for a tag (horizontal rule,
aka "a line across the page") included SIZE="x" to set the thickness
and WIDTH="x%" to set the length. Netscape Navigator also supports
a NOSHADE option:
This creates a rule which is solid black (or whatever other color the
page's text is in) rather than the default transparent/shaded rule.
Internet Explorer can also make solid-color rules, but it lets you
specify what color you want:
That example makes a solid red rule. You could combine these options:
That'll give you a text-colored solid rule in Netscape, and a red solid
rule in Internet Explorer. Like LOWSRC, because these options are
optional parameters for tags, browsers that don't know about these
will simply ignore them and see a regular tag.
16.9 Replacement for
If you're working with pages that were created a few years ago,
before forms were added to the HTML standard, you may see a tag
named . was the precursor of : It made
a prompt followed by a blank that could be used to enter text,
commonly used for simple search engines. However, some browsers
these days do not support correctly. (
as a replacement for the tag:
is more likely to work with very old browsers, but
What happens is that the browser will first load the image from the
LOWSRC URL, and then it will be displayed while the real image (SRC)
loads. Usually the LOWSRC is used to load a GIF with very few
colors (such as black and white one) with the intent being to make
it a very quick image to load, while the SRC image, the good-looking
one, might take several seconds longer to load in full color.
Browsers that don't know about the LOWSRC option will just ignore
it, meaning your SRC image will load normally, so this is a harmless
option if you want to give people quick previews of slow-loading images.
(I suggest making the LOWSRC image the same size as the SRC image
in terms of its physical dimensions. And don't forget, in many
browsers pages look better while loading if you specify WIDTH
and HEIGHT attributes for all your