How do they do that with HTML?
Taken from Netscape Web Site
<BODY BACKGROUND="filename"> is
all you need.. It's nice to also add an ending
</BODY> at the end of the file, as
well.
<BODY BGCOLOR="#RRGGBB"> allows
you to set the color of the background to something
specific.
<BODY TEXT="#RRGGBB"> sets the
color of all normal text within the document.
<BODY LINK="#RRGGBB" VLINK="#RRGGBB"
ALINK="#RRGGBB"> sets the color of all other text
in the document. LINK is just a regular, never before visited
link, VLINK is a previously viewed link, and ALINK is an active
link ("The color when you click on it"). Any or all of these
three options can be omitted, of course.
RR, GG, and BB are two-digit hex numbers (00-FF) representing the amount of red, green, and blue in a particular color. Since it would be too difficult to have a good defined list of color names, hex numbers are used as well, so you get to invent your own colors. "#FFFFFF" represents white and "#000000" is black.
Can't get background colors working?
If you can't get the background color working, make sure you're
following "The Background Rule." This rule states that your
page must have the following format or backgrounds may not
work:
<HTML>
<HEAD>
<TITLE>My Title</TITLE>
Any other heading information goes here
</HEAD>
<BODY (and background/bgcolor info if you wish)>
The document body goes here...
</BODY>
</HTML>
As long as all of those tags are in the right place, you'll be fine.
While transparent GIFs look great when used properly, they can be difficult to create and are limited to 256 colors. A good alternative is a plain color background. This page, for example, uses a simple white background (easy to read) and has graphics with white backgrounds (easy to make).
Interlaced GIFs are graphics which improve in quality as they are loaded, rather than loading from top to bottom. Check out Discovery Online's web page. They use interlaced GIFs for most of their larger graphics.
When making a GIF file transparent, you select a background color. That background color is then given a special "background color" tag within the file, and when Netscape sees it, it makes all occurances of that color transparent. Unfortunately, you can only have one transparent color in a transparent GIF. Shadows and fading are nearly impossible, so you should only use an image that has a hard edge to it.
<FONT> tag is very powerful.
With it, you can change the size or color of the font at any
time. <FONT SIZE=(+ or - size)> will
increase or decrease the size of the current font. For this
page, I use all caps for headers, but increase the size of the
first letter of every word by 2:
<H3><FONT SIZE=+2>M</FONT>AKE
<FONT SIZE=+2>T</FONT>HE
<FONT SIZE=+2>M</FONT>OST
<FONT SIZE=+2>O</FONT>F
<FONT SIZE=+2>F</FONT>ONTS</H3>
Personally, I think an all caps/big first letters style
makes any titles look great. Experiment with the
<FONT> tag and see what happens. Take
a look at Compass
Records for another good example.
The <TT> tag changes the font to
Courier (if you haven't altered your browser settings
otherwise). C|Net Online
often uses <TT> with
<H1> to give it a nice typewriter
look.
The <TT> tag will work with almost
every web browser. If you want to try something that is much
cooler, but specific to Netscape 3.0b5+ and Microsoft Internet
Explorer 2.0+, try the <FONT FACE>
tag. With the FACE attribute, you can specify a list of desired
fonts for viewing text. For example:
<FONT FACE="Arial,
Geneva">This
will be displayed in Arial or
Geneva</FONT>
If Arial isn't available on your system, Geneva will be used instead! I think this one of the best new features of Netscape and Internet Explorer.
Note: Remember that your
audience is using a variety of computer systems. A combination
like "Arial, Geneva" for the <FONT
FACE> tag is good since Arial is generally
available on PCs, while Geneva is a Macintosh font.
Want to change the color of certain words? The
<FONT> tag has an option for
COLOR. The colors work the same as colors
on the <BODY> tag. Here are some
examples:
<FONT
COLOR="#FF0000">Red</FONT>Green
<FONT
COLOR="#00FF00"></FONT>Blue
<FONT
COLOR="#0000FF"></FONT>
You can also give a color name! Things like this work fine:
<FONT
COLOR="Yellow">Yellow</FONT>Purple
<FONT
COLOR="Purple"></FONT>
Netscape is starting to incorporate the more obscure features defined in the GIF89a specification.
Check with your system administrator about the availability of a local counter for your page. If you're lucky, there's a counter program set up for you to use, and your sysadmin can tell you how to set your page up for it.
Method 2: STEAL IT!
You can make a new counter for yourself using someone elses counter program. This way, you don't have to install a program on your system, just bum someone elses!
If I could give you a list of counters to steal, I would.. but in order to give all counters an equal chance at being stolen, you'll have to find your own. It's easy, though:
1. Find a web page with a counter
2. Do a View->Source
3. Find out the URL for the counter, and see where the
unique identifier is (it should be somewhere after a "?" or a
"/", and it might contain some part of the persons/pages
name)
4. Replace the unique identifier with your name/last
name/whatever and stick it at the bottom of your web page.
5. Cross your fingers, load up your page, and have a
look!
Although stealing a counter is easier than setting one up yourself, a stolen counter might not work tomorrow.
Method 3: Install a counter program.
Installing a counter program is probably the best solution if your access provider doesn't have one already. You'll need the ability to install a CGI script on your server, or use a server-side include, depending on which counter program you want to use. Below is a list of some of the counter programs out there.
Here are some counter programs out there that you can install on your system:
That's it! These three pieces of software are the best kept secrets of professional web designers. With these tools, you'll be making graphics like the pros in no time. If you've got Photoshop and Kai's Power Tools, I highly recommend The Pixel Foundry as a good starting point.
I often get e-mail from people saying "...but Adobe Photoshop costs 5 gazillion dollars...isn't there anything else I can use?" Well, some folks swear by Paint Shop Pro, a $69 shareware graphics editor. Though it's not on the same level as Photoshop, Paint Shop Pro does offer an impressive set of features considering its price.
<MULTICOL> tags
around the text you want to put in multiple columns. You must pick
the number of columns you want using the COLS attribute, and can
optionally choose the spacing between columns (in pixels) using
the GUTTER attribute. For example, the following would yield
two-column text with a 5 pixel gutter:
<MULTICOL COLS=2 GUTTER=5>
The COLS attribute is required,
while the GUTTER defaults to 10 pixels. Also,
the exact width of columns can not by specified, and
there's no way to say "End the current column here." Why not? The
COLS tag is designed so that the columns are
aligned properly no matter how wide your web browser is. If you
need something more flexible, use an invisible
(BORDER=0) table instead of columns.
In case you're wondering, I used JavaScript for the dynamic menu at left.
There are some advantages and disadvantages to using JavaScript for dynamic menus. First, the menu will work on any web browser. If you use a web browser that doesn't support JavaScript, the menu will still show up and work without any special effects. Second, it's faster than most other methods. The main disadvantage is that it's not supported by Microsoft Internet Explorer 3.0. Again, the menu still shows up, but it can't be dynamic.
The process of making a JavaScript dynamic menu is fairly simple. You create the "on" and "off" graphics for each item in your menu, making sure both graphics are always the same dimensions. Then, all you need is the actual JavaScript code for the menu. If you know C or C++ and you're feeling a little adventurous, you can write it yourself. Rather than reinventing the wheel, though, I recommend taking a look at Dynamic Images and Menus, a JavaScript "Tip Of the Week" at webreference.com. This page provides you with the code and instructions you need. Just plug in the names of your graphic files, and you're set!
Method 2: Java Dynamic Menu
The Java dynamic menu is one alternative. It will work with Internet Explorer 3.0, and you provide a standard imagemap for browsers without Java support. A Java dynamic menu typically works a lot like an imagemap: it uses one "on" image, one "off" image, and a list of clickable areas within the image. This way, if you have a menu with 30 items, you don't need 60 graphics files. The only disadvantage of the Java dynamic menu is that it's always a lot slower than the JavaScript equivalent. At the end of this section, I've provided links to a few different Java dynamic menu classes.
Method 3: FutureSplash
FutureSplash is a Netscape plugin/ActiveX control that has been catching on recently. It's built into Internet Explorer 3.0, and is used extensively on The Microsoft Network's web page. It allows for more than a basic dynamic menu--you can create animated menus and graphics with it. FutureSplash is a creation of FutureWave Software, can be downloaded from their web page. In order to create dynamic menus using FutureSplash, you will also need the FutureSplash Animator. There's a 30 day trial version of the Animator available for download; unfortunately, this method of dynamic menus will end up costing you money. If you try or buy the FutureSplash Animator, please let me know what you think of it!
As promised, here are some Java-based dynamic menu applets:
A client pull allows the server to tell the browser to load a certain document in a certain number of seconds. For example:
<HTML><META HTTP-EQUIV="Refresh"
CONTENT=1>
<HEAD><TITLE>Client Pull Example</TITLE>
<BODY>
<H1>Client Pull Example</H1>
This document will reload itself once every second.
</BODY></HTML>
The line <META HTTP-EQUIV="Refresh"
CONTENT=1> tells the browser to request the page
again in 1 second. Some sites use this type of client pull to
refresh a document such as stock quotes or a video camera
pointed at a city street.
Client pulls can also load a different document in a predefined number of seconds. For example:
<HTML><META HTTP-EQUIV="Refresh"
CONTENT="5;
URL=http://www.nashville.net/~carl/index.html">
<HEAD><TITLE>Now Loading...</TITLE>
<BODY>
This example will send you to Carl's home page in 5
seconds.
</BODY></HTML>
Changing CONTENT=1 to
CONTENT="5; URL=<my URL>" makes it go
somewhere else once the time has elapsed.
Method 2: Server Push
A server push is more difficult since it envolves keeping a constant connection open between the client and the server, and having the server "push" data to the client to display, such as an animation, as a series of .gif files.
Server push is a bit too complicated to briefly describe here, so I'll refer you to the many links listed below. I personally recommend Netscape's An Exploration of Dynamic Documents.
Dynamic Docmuent explanations:
Dynamic Document examples:
<HTML>
<META HTTP-EQUIV="Refresh" CONTENT="3;
URL=nindex.html">
<HEAD>
<TITLE>Detecting your browser...</TITLE>
</HEAD>
<BODY>
<H2>We're detecting your browser now...</H2>
If you're using Netscape or Microsoft Internet Explorer, the
enhanced version of this page will
automatically load. If not,
<A HREF="tindex.html">
CLICK HERE</A>
When people without Netscape or IE come in, they'll click on "CLICK HERE" and get the regular version of your page. When people with Netscape/IE get to this page, they are automatically advanced to the Netscape/IE enhanced version.
<EMBED> tag
The <EMBED> tag is a powerful
feature of Netcsape Navigator 3.0. It allows for easy, built-in
playing of WAV, AIFF, AU, and MIDI audio files as well as
QuickTime movies, AVI files (under Windows 95 and NT), and VRML
files. EMBED has a lot of options,
but here are some of the ones you'll most likely be using:
<EMBED SRC="filename" width=144
height=74> will put a small sound player on the
web page. It has play, stop, and pause buttons as well as a
volume control. The width and height can be changed, but if you
make it smaller than 144x74, it will start to cut off some of
the controls.
The above <EMBED> command is the
most basic one. If we take it one step further, we can get
<EMBED> to
automatically play the
sound, and not show up on the page at all: <EMBED
SRC="filename" hidden=true autostart=true> will
play the sound file once and not show up on the page.
The EMBED command works on both Netscape
Navigator 3.0 and above as well as Microsoft Internet Explorer
3.0 and above.
Method 2: Client Pull
You can also add a background sound using a simple client pull. Check this out:
<META HTTP-EQUIV="Refresh" CONTENT="1;
URL=mysound.wav">
1 second after the page itself has loaded, the sound will load and play. It doesn't have to be a WAV file..just remember that the sound you pick will be played back on a variety of computers, so it should be in a sound format that can be played back on most computers. Although this "background sound" method isn't used much (in fact, I've only seen it in use once before), it has definite potential.
A side note on client pull: This is probably the trick I get the most e-mail about. A lot of people can't seem to get it working! In nine out of ten cases, though, the problem is on the client side. Make sure you have a working sound player set up as a helper application, and make sure your web browser supports client pulls. This trick does work.
<EMBED> tag.<EMBED> for QuickTime
movies and VRML files, in case you're interested in doing
that.Set-Cookie: NAME=VALUE; expires=DATE; path=PATH;
domain=DOMAIN; secure
So, for the shopping basket, Netscape might send:
Set-Cookie: basket=128 426 234; expires=Wednesday,
09-Nov-99 23:12:40 GMT; path=/cgi-bin/basket_view;
domain=merchant.netscape.com; secure
The variable "basket" is then set in your browser to equal "128 426 234," a list of item numbers you've requested; Whenever you go back to the basket viewer URL "http://merchant.netscape.com/cgi-bin/basket_view" before the expiration date, your browser sends this:
Cookie: basket=128 426 234
This lets the store know what items you're interested in so it can recreate your shopping basket.
HTTP Cookies are very powerful, but they require the use of CGI scripts or JavaScript. If you've got the guts to try it, take a look at the "Preliminary Specification" on Persistent Client-State HTTP Cookies. There's a lot more information on HTTP cookies there. Good luck, and let me know of any cool applications you've made with HTTP cookies!
A side note on frames: Even
though I don't have much here about frames, I do have the answer
to the most commonly asked frames question: How do you get frames
to go away when linking to the outside world? Here's the answer:
<BASE TARGET="_top">. It's that easy.
Just put that tag near the top of your document. Want a more
detailed explanation? Read
Targeting Windows!
|
© 1995-97 Carl
Tashian {carl@tashian.com} |