This page: Topics 3, 4, 7, 8.
APPLYING HYPERTEXT
Interactive Color Chart 12/6/97!
(If you're viewing a hard copy, you may find this article on the
internet at URL: http://www.primeshop.com/html/jumpidx.htm )
You're invited to visit the Primeline Website at http://www.primeshop.com/ Come see us!
~ APPLYING HYPERTEXT ~
Hypertext can link to:
A place in your current page,
Another page or place in that page,
Another WWW website - anywhere!
...and may be comprised of text, images, or both.
Hypertext links are enclosed within the tagset <A HREF="location"></A>.
The "A" is an anchor and the HREF="abc" is the location attribute, e.g.,
another location in your pages or on the WWW.
Between the anchor open/close tags, place any text or image which is to be "hyper"...that is, which
when clicked will cause the browser to jump to the linked location. Text between the tags will automatically
be underlined and appear in the chosen hyperlink color (see <BODY...> tag), and an image within
the hypertext tag will have a rectangular border (unless you specify "BORDER=0" within the image
tag) Hypertext and image borders will change colors after use.
To define a location name within a web page, use the form:
<A NAME="name"></A>...just like that, with no space or text between the tag
and its closing. Place the tag just above any line in your html to which you'd like to jump. "Name",
of course, can be any name you choose, but not repeated within the same page. You may use the same name again
on a different page, and may have unlimited different names on a page.
WITHIN A PAGE
- Assign a name (we'll use "name1", "name2", etc.) at the spot in the document to which
you want users to jump when they click the link.
- At the point where you want the link to appear, precede the link text with the <A HREF="...
"> tag, and follow it with the </A> tag. Precede the location name with a # sign, and
enclose in quotations (see example following.)
Your html might look like this:
Take a look at our <A HREF="#name1"><B>
OFFER</B></A>.
...which would look like this on the page:
Take a look at our OFFER.
(In our html for this example, we used "#" as the place name, and it took you to the top of the page!)
Placing the period outside the closing tag stops both color change and the underline, making for a neater
appearance.
TO ANOTHER PAGE ON YOUR WEBSITE
The format is exactly the same, except that you precede the place name, i.e., "#name1" with the name
of the new page. For example, the hypertext tag:
<A HREF="newpage.htm#name2">Newpage-Name2.htm</A>
would jump to location "name2" on the web page with the filename "newpage.htm"
You may link to the top of another page without using a place name, i.e.,
<A HREF="newpage.htm">Newpage</A>
The # sign and location name are dropped.
Note: It is inadvisable (but not wrong) to use complete URL's for links within your own website. Here's
why - when your visitor's browser encounters a complete URL, it automatically goes back to the server and
instructs the server to go out on the internet and find that URL, then go there, and get the info. Since the
visitor is already at your server and website, the activity of searching the web results in wasted time.
TO ANOTHER LOCATION ON THE WWW
Again the same format, but use the new location's full URL (Uniform Resource Locator, or "internet
address.") You may specify a home page or any other page within a website, and a specific location if
its author has named one. For instance, the URL "http://www.primeshop.com/html/jumpidx.htm" will
take you directly to the beginning of this article from any other place on the internet, and it would be
linked as in the following:
See <A HREF="http://www.primeshop.com/html/jumpidx.htm"><B>Primeline's html
article</B></A> for newcomers!
...which would look like this on the page:
See Primeline's html article for newcomers!
TIP:
Misplacement of the anchor close tag can cause unwanted effects. Let's look again at the example just above.
If the closing "<A>" tag falls to the next line in your word processor, it will save that way.
Looks like this:
See <A HREF="http://www.primeshop.com/html/jumpidx.htm"><B>Primeline's
html article</B>
</A> for newcomers!
See how the close tag has fallen to the second line with nothing to its left? Bad business, as it will come out
like this in the browser:
See Primeline's html article
for newcomers!
Look very closely, and you will see a tiny little black line extending to the right of the underline. It's
"hot", too, and looks terrible beside an image. It's the result of the closing tag being orphaned to the
next line, and is actually browser-induced white space that is linked along with all that's supposed to
be.
RULE:
The closing tag bracket must actually touch the preceding bracket or text, like this:
"....blah...><A>"
The "fix" is quite simple. If your processor or editor forces the closing tag to fall to the next
line as an orphan, just intervene manually and force the break to occur earlier, at any natural space in the
HTML - like this, for instance:
See <A HREF="http://www.primeshop.com/html/jumpidx.htm"><B>Primeline's
html
article</B></A> for newcomers!
We have forced the new line to occur at a natural break between words (or other elements, such as images)
and the close tag now "touches" the preceding entry.
[ home ]
COLOR
All colors are a combination of the basic three - Red, Green, Blue (RGB) - and are always specified in RGB order.
Each of the three may be represented in any of 256 intensities, ranging from 0 (nothing) to 255 (brightest),
yielding a maximum potential for 16,777,216 specific shades (requiring top-end graphics cards and monitors.)
Color support is dependent upon users' system hardware, both in terms of basic configuration and graphics card.
The ability of the least expensive monitors and graphics cards to reproduce 256 colors is nearly ubiquitious in
the industry, so that virtually all systems are capable of reproducing at least 256 colors. Many systems are
small or old, and it's wise to program with no more than 256 colors. (The human eye can rarely distinguish more
than 256, anyway.) Users with high-end systems supporting up to 16 million colors will see all the detail of any
graphics. Those with limited systems will see your work in pleasing contrasts if you plan well.
All possibly reproducible colors are some combination of the primary colors red, green, and blue, which are
always specified in that order by two characters for each color. There are 16 possible values
for each character, ranging from 0 to 9, then from A to F (hexadecimal notation: A=10, B=11, --thru F=15.)
Thus, the full range of values for a single character will start at zero, proceed through 9, and then from
A to F. In everyday decimal notation, this yields the standard intensity range of 0-255 (two characters/color)
for each of the three primary colors.
For the techies:
In computer-efficient hexadecimal notation, the maximum value FF equals 255 (240+15). Graphics programs with
decimal-value reporting of color intensity values will report each of the three primary colors for a given hue
in intensity values ranging from 0 (minimum) to 255 (maximum) - a total range of 256, counting 0 as a value.
If we consider 256 values for each of the three colors, the total number of possible combinations is
16,777,216...the "magic" 16 million colors reproducible by high-end systems.
|
Hexadecimal is base16, that is,
the rightmost digit equals 160 (value = 1), (the character, e.g., "F" tells
"how many of these")
the second-from-right equals 161 (value = 16),
third-from-right equals 162 (value = 256), and so on.
The color value FF, for example, stands for:
the rightmost: F=15, therefore we have a value of 15x1, or 15
the 2nd-to-right: F=15, therefore we have a value of 15x16, or 240
The total equals 15 + 240, or 255.
In other words, the F stands for the number 15 (Remember 1-9 and then A-F)
The rightmost F means that we have 15x160, or 15x1
The 2nd-to-right F means we have 15x161, or 15x16
The total then for FF is (15 x 1) plus (15 x 16), or 15 + 240, or 255. |
Specifying Colors
Systems which cannot reproduce the full spectrum of possible colors will resort to dithering in an attempt
to create the next best match based on mathematics. However, the numbers for color hues don't change in exactly
the same way that the computer calculates, and "best-match" results are sometimes pretty strange-looking.
Because of this, it's wise to stick to the 216 "all-systems-safe" colors discussed below.
The least value for a color would be 00 (two characters) and the greatest would be FF. Black, which is no color
at all, shows all three colors at minimum, or 00-00-00. White, which is all colors at maximum intensity, is
FF-FF-FF. Full specification for brightest red alone would be FF-00-00, brightest green as 00-FF-00, and
brightest blue as 00-00-FF. (The hyphens are not used in standard specifications, but are shown
here for clarity.)
Numbers and letters may be mixed for a specific color, i.e., F1-22-EA. The proper non-hyphenated expression of
this color would be F122EA. Learn to segregate the six characters in a browser color spec into pairs for the
three basic colors.
The absolute basic group of 216 colors recognized by most systems may be defined by a series of matched
pairs, as discussed below. Use these for text and background color choices. (If you specify an oddball color
that the user's system can't reproduce, it will make its own "best-numerical-match" choice, sometimes
with disastrous results. See color chart link below.)
You may specify colors for background and text in your html. Your browser will feature a standard, or default,
set of four colors for text - one each for plain text (black), hyperlinks (blue), visited links (purple), and
active links (red.) You may change these attributes if desired in the opening <BODY.....> tag
(if not specified, the defaults will be used automatically.)
The six color specification characters for background or font color must be preceded by the number symbol
or hash mark (#) and be enclosed in quotation marks.
This page does not use the default dirty gray background...a look at the Document_Source will reveal that
we've specified the background attribute as white with the tag <......BGCOLOR="#FFFFFF".....>
within the overall <BODY...> tag. Note that the color value must be preceded by the # sign and
enclosed in quotes, with no spaces in the attribute element.
|
Here's an example of a <BODY> tag with all the goodies for
BackGround color; BackGround image; and colors for
Link, Visited link, and Active link:
<BODY BGCOLOR="#9900FF" TEXT="#00FFFF"
LINK="#00CC00" VLINK="#CCCCCC"
ALINK="#FF0000"
BACKGROUND="blulace4.gif"> |
You may do the same with text using the FONT tag and "COLOR=" attribute to change it, perhaps, to
RED, or bold GREEN, or oversized bold, italic
BLUE. Be sure to view the Source to see arrangement and
cancellation of tags. This example uses the tagset <FONT COLOR="#0000FF">
(text) </FONT>
Colors in Tables
Both the new Netscape and MSIE browsers will newly support a "BGCOLOR=xx" attribute for table
and cell backgrounds. Use the attribute in the table opening tag to color the entire table background, e.g.,
<TABLE BGCOLOR="#990000">, and within individual <TD> tags to color single data cell
backgrounds, e.g., <TD BGCOLOR="#000000">, like this:
| THIS DATA CELL BACKGROUND IS
COLOR "#CCCCCC" |
BGCOLOR=
"#CC0000" |
BGCOLOR=
"#00CC00" |
BGCOLOR=
"#0000CC" |
BGCOLOR=
"#000000" |
BGCOLOR=
"#CC33CC" |
BGCOLOR=
"#FF00FF" |
216 Browser-Safe Colors
Not all possible matched-pair color specs will reproduce in a 256-color system, and MACs do strange things
with 40 of the ones that work with PCs. To learn the exact "all-browser-safe" values for colors, see
our color reference chart. The chart is interactive, and will display samples
for chosen background and text colors.
(Limitation to the 216 is not required, though many web publishers view them as sacrosanct in ensuring
that their presentations appear with colors exactly as designed. In any case, it is always wise to use them for
text on solid-color backgrounds.)
For the decimal range 0 to 255, hexadecimal equivalents go from 00 to FF. The "Magic 216" are
represented as paired sets of hexadecimal values for each color, each pair of which is divisible by three.
The resultant six possible "OK" values for each color are 00, 33, 66, 99, CC, & FF.
| Equivalents: |
| Hex: |
00 |
33 |
66 |
99 |
CC |
FF |
| Decimal: |
0 |
51 |
102 |
153 |
204 |
255 |
Standard hexadecimal notation for browser colors specifies a value for each color or color combination, even if
one of the three is zero, e.g., FF00FF. Thus, brightest Red is FF0000, brightest Green is 00FF00, and brightest
Blue is 0000FF.
The 216 colors represent every possible RGB combination of 00, 33, 66, 99, CC, &FF, for example, 000000,
00FFFF, CC3366, etc. That is, 6 possible red values times 6 possible green values times 6 possible blue values
equals 216 available RGB combinations.
Other possible combinations from the 16 million, such as "12FC84", are perfectly legitimate, but will
be reproduced faithfully only in systems with high-end graphics cards. Other systems will attempt to achieve the
closest "standard" color using a mathematical process called dithering, which may or may not
actually come close to the intended color.
To check the appearance of your work in the most common user machine, just change your graphics display to
800x600 and 256 colors.
[ home ]
COUNTERS
Counters are especially useful for gaining usage statistics for your pages...we have one on every page. They
tend to be overused. There are two reasons to display a counter, one good, the other not so hot:
- Your visitors can gain information useful to them from the counter.
- Your head's so swelled you want everyone to know how many visits were made to your site.
'Nuff said.
There are numerous commercial and free sites on the internet who will provide counter service for you. In our
view, they have only three disadvantages: 1) they may not be online forever; 2) there may be a slight lag in
your page download as the counter link travels back and forth on the 'net; 3) if the server's busy, they may
not download at all. For the most part, they're useful, usable, and provide nice instructions...surf around a
bit beginning with links at The Web Designer.
MUQUIT's COUNTER
This widely-used cgi counter is server-based, and must be installed by the ISP. Once on the server, the
user may employ feature codes to affect appearance on the page. (Primeline's are all hidden on our web pages,
but are visibly repeated on an unlinked web page so we can find and evaluate page "hits.")
All you need is to know the features codes (below) and name each counter in its application tag. You must
install a counter (via html tag) on each page you wish to track, with a unique counter name for each page
(since everyone is using the same routine, we suggest you use a part of your own or company name to ensure
uniqueness.) A counter may be installed at any point in your page.
Here's a typical counter installation tag at the end of one of our pages:
<P>
<img src="/cgi-bin/Count.cgi?dd=A&ft=0&sh=F&df=data2.dat">
NOTE:
This is cgi scripting, a form of code which interacts directly with the server. It cannot be
implemented without the assistance and intervention of the Service Provider.
The <img src="/cgi-bin/Count.cgi?... portion calls the server's counter routine, data2
is the name we assigned to the counter, and .dat is the required file extension name. The remainder of
the characters are used to control counter color, numeral size & font, border, hidden/visible, etc. There are
no spaces in the tag line, and all of the option specifications are joined by the "&" character
(ampersand.)
Here are option descriptions and values:
Your ISP may use Muquit's Counter. On the internet, go to Muquit's Table of Counter Options to view available display adjustments. (http://www.fccc.edu/users/muquit/Count.html#opti)
[ home ]
JAVA SCRIPT
We are not going to get into the powerful but complicated javascripting language, but there's one simple
addition that we think adds a nice touch.
Ever notice how the bottom header bar of your browser usually shows the linked URL when your mouse passes over a
link? That bottom header can show a readable message, if you'd like! Here's how:
Within an <A HREF=...> statement, just add:
onmouseover="window.status=´(message)´;
return true"
| To help make sure you're aware of spaces and punctuation, in words
it's: |
|
onmouseover=
quotationmark window period status=
apostrophe your message apostrophe semicolon space
return space true quotationmark |
|
As is always the case, be sure that this element is separated by
a space from other elements within the <A HREF=...> tag. |
For example, let's look at the link html:
<A HREF="http://www.primeshop.com">See
the javascript discussion!</A>
which is a hyperlink to Primeshop, and will show the URL in the bottom header window.
Now, let's add the message, "An easy javascript enhancement!" to the window by adding the javascript
code:
|
<A HREF="http://www.primeshop.com"
onmouseover="window.status=´An easy javascript
enhancement!´ ; return true"> |
Finally, let's erase the message when the mouse leaves the link by adding the onmouseout tag:
|
<A HREF="http://www.primeshop.com"
onmouseover="window.status=´An easy javascript
enhancement!´ ; return true" onmouseout="window.status=´´ ; return
true"> |
Here's the real thing (with a link to this subject). Pass over them with your mouse pointer, and watch
the bottom window message change (c'mon, now...get a late-version browser so you can see it!)
Without javascript: See the javascript discussion!
With javascript:
See the javascript discussion!
Pay close attention to the exact use of single and double quotes, and spaces. Note that if your message is to
include quotations or apostrophes you'll need to use the HTML3 ASCII symbol codes.
There are some problems with Internet Explorer's interpretation of HTML3-coded characters..
FURTHER EXPLANATION:
In the example above, see that both the quotation marks and apostrophes are used within the javascript
command. The quotation marks open and close the command, while the apostrophes segregate the intended message.
If you were to place an apostrophe or quotation mark within the body of your message, the browser would erroneously
interpret that as a part of the Javascript command. For example, if you wanted your message to include quotation
marks as in the expression Here is the "Stargazer" page., then
you'd enter the included quotation marks with the ASCII symbol code " - not with a typed-in
quotation mark.
For any browser, be aware of the semicolons as the last figure in the HTML3 codes - they are not punctuation,
they're part of the code!
7/8/98 Another lesson learned the hard way:
The newer browsers, e.g., Netscape Communicator 4.04, will not tolerate even an ASCII symbol value for the
single quotation mark - it will be interpreted as part of the javascript command. In such a case, substitute a
lookalike. For instance, instead of the single quote (', or ' ), substitute using the #146
symbol, which yields the apostrophe ( ’ ) instead of a single quote.
[ home ]
ADDING MIDI MUSIC
The availability of music is a nice addition to any web page, and is quite easy to accomplish. Before we
discuss details, we'll look at some of the possibilities and traps.
FORMATS and RESPONSE
The MIDI (extension .mid) and WAVE (extension .wav) formats are supported by all major browsers. MIDI
is far more preferable, as its compression offers the longest play time with smallest filesize. Wave files are
typically 100 times as large as MIDI files for the same playback time. Our remarks are confined to addition of
MIDI sequences. (A MIDI file is manually edited, or sequenced, and the music files are referred to as
sequences.)
Netscape and MSIE support MIDI references via both hyperlinks and via the html <EMBED></EMBED>
tagset.
Only MSIE will respond to the <BGSOUND> tag. Therefore, we prefer either the hyperlink or
<EMBED> method.
The <EMBED></EMBED> tagset will force a MIDI sequence to download automatically to the user's cache.
It can be modified with attributes to play automatically, to loop, and to appear graphically on the page.
Only one <EMBED> tag can be used per page. If you wish to offer multiple selections, other sequences must
be presented as hyperlinks.
PLEASE BE AWARE that there is no such thing as a "required" MIDI plugin! Some companies, notably
Crescendo, are attempting to mislead users into believing that they must have their product in order for
embedded MIDI files to work. This information is totally false and misleading, and is an egregious example of
crass commercialism, in our estimation. Crescendo provides a scripted html tagset to embed the sequence
so that only the Crescendo plugin can play it back. We recommend use of the standard <EMBED> tagset
as later described, so that all visitors are able to access your music without need for specific or
additional plugins.
If you use animated graphics on your page, be aware that downloading a linked file after the page is downloaded
will cause animations to stop. (They will restart if the visitor leaves and returns to the page or if the page is
reloaded.)
There are thousands of MIDI files available. Many are free for the taking, but it's always wise to acquire
permission before posting. There is considerable legal confusion and upset regarding copyright infringement - use
due caution if your files are in any way connected with a profit-oriented page. Copyrights expire after 75 years.
However, even for very old music, the specific performance may be copyrighted. Investigate thoroughly.
Keep in mind that your visitors' sound cards may vary from highly sophisticated to nearly primitive.
Many advanced MIDI sequences have been written specifically for replay on a sophisticated wavetable system,
and will sound awful through an FM synthesis card. For general usage, check that the desired sequence
is indeed playable via an FM synthesis card (such as the SB16.)
PLAYBACK CONSIDERATIONS
There are a large number of plugins "out there", and they all respond differently to the
<EMBED> tag. It can be nearly impossible to configure your html so that it will perform suitably for all
browsers.
Not all visitors will share your choice of featured music style. Choose carefully to avoid offense, or offer
your visitor a choice of several, and/or offer the opportunity to listen only by choice. Some vistors already
have music of their choice playing, and an automatic download can raise havoc with their computer system. To
avoid any potential conflicts at our website, we offer music by choice only (hyperlinks) - if the visitor would
like to listen, a single mouse click will downoad the linked sequence.
If you wish, you are welcome to link to the Primeline Audio
Page as an information resource for your visitors regarding setup, downloading, saving, and playback.
Please do not link directly to any of the listed MIDI sequences!
HTML FORMATS
On The Server
Your MIDI sequences will be accessed in exactly the same way as are graphics files. They must either
reside on the server in the same directory with the page html file, or a proper access path must be specified
in the source (SRC="") attribute.
Hyperlinked Sequences
MIDI filenames adopt the form: "song.mid" By simply invoking the filename within an <A HREF>
tagset, the file will be downloaded with a mouse click. Example html:
Here is <A HREF="mysong.mid">My Song</A>, another old favorite.
Embedded Sequences
The simplest form of the standard <EMBED> tagset simply calls for the sequence. Example html:
<EMBED SRC="mysong.mid"></EMBED>
The EMBED tag will automatically call whatever graphic is associated with the user's playback device or plugin.
There are several optional attributes:
- AUTOSTART="TRUE" will start the sequence automatically if
the user has a plugin configured for automatic play.
- LOOP="infinite" or LOOP="n" (where "n" = a
number) will control the number of repeats.
- HEIGHT and WIDTH specification will control the size of the graphic for the playback
device, and may be set to zero if you wish to "hide" the display. We prefer to omit this
attribute so that whatever graphic is native to the user's application will appear unaltered.
- VOLUME will adjust initial playback volume as a percentage. The accepted 'net
standard is 50%. The 80% suggested in some scripts will blast your visitors out of their
chairs and possibly cause them to leave your site.
Here's an example of an embedded MIDI with all the trimmings:
<EMBED SRC="mysong.mid" AUTOSTART="TRUE" LOOP=5 HEIGHT=50 WIDTH=80
VOLUME="50"></EMBED>
(Note proper application of quotation marks.)
MIDI sequences, whether hyperlinked or embedded, may presented in all of the standard html forms including
standalone, linkage in imagemaps, and placement within table cells or lists.
NOTE: Although the <FORM> method may be used to post, it is not recommended, as it
forces implementation of the Windows Media Player, and will not allow operation of your visitor's preferred player.
YOUR ISP's SERVER
Your service provider's server must be configured to deliver the two {MIME} types related
to MIDI files - both MIME Type: audio/midi and MIME Type: audio/x-midi. It's a simple setup, but
your provider must add it to his server, or no music will download. (One is required for embedded files, the
other for linked files.)
The reason for this is that browsers are programmed to recognize different types of downloaded information
only if the server "tells" them what it is. Recognition of text and graphics is virtually
universal to all servers and browsers. Special types, such as MIDI format files, must be added to the server's
information bank. After proper {MIME} Type configuration, the server will send a signal to the browser
that "This file is in MIDI format" any time it's requested to send a file with the .mid file
extension. The visitor's browser will then call the appropriate music plugin or helper application from the
visitor's hard drive.
A COMMON MISCONCEPTION
Many new page designers are under the mistaken belief that MIDI pages "contain" and download music
players. This is absolutely never the case. Your ISP's server will only send the file information and
appropriate {MIME} Type. The visitor's computer must have its own sound card and speakers, an appropriate
plugin or helper application must exist on the visitor's hard drive, and the visitor's browser must be configured
to call that plugin or helper app upon receipt of a MIDI {MIME} file.
[ home ]
