Shargad’s Webpage Workshop

Site Map

Your Current Location is in Yellow

Home

HTML FAQ

Frequently Asked Questions

I really enjoy solving a mystery, and that’s one of the reasons I enjoy responding to questions on a help forum. The down side is that there are a handful of questions asked over and over. I realize that many newbies have no clue that typing in all UPPER CASE is considered shouting or that when they are seeking help they should read the faq first, and should peruse the previously asked questions on a message board to see if there is one similar to theirs. On occasion I have pointed this out, and that makes some people angry. What I don’t understand is this: I did a little bit of reading before I got online, and the two things that cropped up several times were just these points. Don’t YELL, and do read the faq.

That said, I offer this short list of frequently asked questions about basic HTML.

How do I put music on my page?

You can put background music or music on demand using a digital recording (.wav, .au), a midi file or RealAudio.

Background music using .wav or midi: Most browsers recognize the EMBED tag, but some of the older MSIE/AOL browsers read only the bgsound tag. To accommodate as many browsers as possible, use a combination:

<embed src="filename.mid" autostart=true hidden=true> <noembed><bgsound src="filename.mid"></noembed>

To loop the sound (a truly obnoxious practice) add 'loop=true' to the embed tag and 'loop=1' to the bgsound tag (1 indicates “true”, not the number of times the music loops). Incidentally, embed, noembed and bgsound are HTML extensions; that is they are not included in the official HTML specs. The official tag sequence for embedding sound is OBJECT (and its attributes), which can be used to embed sound, video or still graphics, but which does not seem to be widely supported by current browsers.

Browsers that read the embed tag will also understand noembed and will therefore execute the embed tag and ignore everything contained between the noembed tag pair. Browsers that do not recognize embed will ignore both the embed and noembed tags and will execute the bgsound.

Music on demand is done with the Anchor tag, just like any link. The Anchor can be in the normal text or can be done in a “combo box”, which is a dropdown list accompanied by the GO button. If you want to use the combo box, you will need to get the JavaScript script from Website Abstraction or a similar source. Here’s the code for linking your music:

<A HREF="mytoon.mid">My Tune</A>

My picture (or background) won’t show up.

Most problems of this sort result from one of the following:

Improper code, including misspelled attributes or values, misspelled file names in the img tag, incorrect CaSe, missing quote mark, missing bracket etc. or path is incorrect. Or the code is in the wrong place. Background image must be either in the style declaration or inside the opening BODY tag, e.g., <BODY background="borderbg.jpg" etc.>, and the opening BODY tag must come immediately after the closing /HEAD tag. Any BODY element, e.g., music code, placed before the BODY tag will usually cause the BODY tag and all its attributes, including background, to be ignored in MSIE 4.x. Some of the highly touted but nonetheless crappy EZPageBuilders miscode pages in this way, resulting in disappearing backgrounds. This happens when the unsuspecting neophyte tries to add background music to his page. The AllegedlyAmazingEZBuilder puts the code in the HEAD of the document rather than in the BODY where it belongs, resulting in the disappearing background when viewed with MSIE 4.x browsers.
Image is not uploaded to the web directory.
Image is not in true jpg or gif format (AOLers — watch out for .art masquerading as gif or jpg).
Image file was corrupted during upload (rare).

Okay, so how do I convert .art image files?

Most graphics editors cannot read .art files, and therefore can’t convert them. Here’s a trick you can use: The .art file will be read by MSIE but not by Netscape. Open your graphics editor and MSIE. Open the web page (or the graphics file if it’s on your local drive) using MSIE. Right click on graphic, choose Copy. Activate your graphics editor and click paste or import (depends on your editor). The graphic will automatically be converted to .bmp or another format your graphics editor can read. Then just convert the graphic to gif or jpg. Another technique: If your graphics editor has a screen capture function, you can use that to capture the graphic, then make the conversion.

How do I make thumbnails?

A thumbnail is a resized (small) version of a graphic. It is usually reduced in pixel size and the file size is further reduced by reducing the color depth (gif) or using compression (jpg). Any good graphics editor will resize in the ways just mentioned. The thumbnails are usually coupled with an Anchor tag as a clickable link. Word of caution: do not use width and height attributes in the IMG tag to resize your graphics. This will not reduce the file size, and therefore will not reduce the load time, and the quality usually suffers.

How do I make the background of a graphic invisible?

This is called a transparent gif. Start with a gif format graphic (not animated). Open it with your graphics editor. If the graphic doesn’t already have a solid color background, you will need to make the background a solid color. Next, choose a color that is not used in the “visible” part of the picture. Use the color flood tool to make the background that color. By the way, you will often see bright purple or green backgrounds on a transparent gif because that is a color most likely not to be used in the foreground image. Once you have your solid background, specify that color as background on the editor's palette. If you can’t figure it out, look it up in the help menu of your graphics editor. Finally, choose “Save As”, select GIF and check off transparent. Or choose Transparent GIF. Editors differ, but all should have a dropdown menu or check box to indicate you want a transparent gif. Again, if you can’t figure it out, consult the program’s help menu.

What is a graphics editor and where do I get one?

A graphics editor is just that — a program used to create or edit graphics. Use a graphics editor to resize, crop, mirror, flip, buttonize, add text, change the color properties, convert format, or in any way manipulate the graphic. If you need a graphics editor, try one or more of the following. All three can be downloaded free as a demo or shareware.

MGI PhotoSuite (good utility editor)
PaintShop Pro (best for buttons, seamless backgrounds, hand-made graphics)
GIF Construction Set (easy animation, banners)

How do I make a link to jump to another spot on the page?

1. Mark the spots you want to jump to with this code:

<A NAME="song1"> Song 1</A> Lyrics, lyrics, lyrics, Lyrics, lyrics, lyrics, Lyrics, lyrics, lyrics.

<A NAME="song2"> Song 2</A> Words, words, words, words, Words, words, words, words, Words, words, words, words,

ETC.

2. Link to those spots:

<A HREF="#song1"> Go to Song 1</A> <A HREF="#song2"> Go to Song 2</A>

ETC.

That’s all there is to it.

How do I change the font color, size, face?

The FONT tag is being deprecated, so the World Wide Web Consortium (the folks that determine the official HTML specs) encourages everyone to stop using the font tag. I touch on the reasons for this in “To Style or Not”, but if you want the real scoop, have a look at the W3C website. That said, here is how to use the font tag as well as how to use style to determine font appearance.

Color size and face (family) are all attributes of the FONT tag. You can place one or more of the following attributes in the tag.

color="#RRGGBB" — where RRGGBB is the hex code for color (see “What That?” page). You can also use color names for the more common colors.
face="font name" — but be aware that the visitor will see that font only if he has that font with that name on his computer, so you should include a secondary (common) font, e.g., face="arial,helvetica". For page titles or other short text, you can make a graphic using your chosen font, as I did on the Introduction page,
size="+1" or size=3 — the relative size (+1 +2 etc) is generally the preferred method, but you can state a size from 1 to 7 if you prefer. To get larger sizes, you must use style.

The preferred method for setting font attributes is the use of a style declaration, but the style can also be used inline. As with the FONT tag, you may place more than one property in the declaration.

BODY,TD (or whatever elements you are defining) { font-family:arial,helvetica; font-size:16pt; color:red } — This sets the font characteristics for the BODY, but these characteristics may not carry over into tables, so you should add TD, as I have here. For more information, try the “To Style or Not” page. Inline looks like this example: <H1 style="font-family:lucida,arial; color:blue">text</H1>

How do I get my text not to ride on the border?

This refers to the background image that has a border running down the left side of the page. Frequently, naive newbies are advised to simply put <UL> tags at the start of the text to make all the text move over. NO NO NO NO NO NO NO NO NO NO NO NO!

Not only is this bad form and an abuse of the Unordered List tag, but you will run into trouble using this bastard technique. Use the <UL> tag only for making lists.

So how do you get the text to clear the border? There are two acceptable ways. Neither is difficult. In the following examples, I’ve assumed a border plus padding of 150 pixels; simply adjust the border width — TD or margin-left — (and dot.gif image width) to accommodate your border.

Use a table:
<TABLE width="100%"> <TR> <TD width=150> <IMG SRC="dot.gif" width=150 height=1 border=0 ALT=""> </TD> <TD valign=top> Put all your page content here
</TD> </TR> </TABLE>
I personally don’t much care for this method unless I also want a list of links or something like that on the border. In that case, you must use the table. Other cautions: do not specify a width for the right cell; that will cause problems as the resolution of the visitors’ screens will vary. The dot.gif may not be necessary, but it does give some stability to the left cell, made necessary by the inability of some browsers to understand the width attribute in tables.
Use style to set the margin. In the HEAD of the document put this:
<STYLE type="text/css">  </STYLE> The drawback with this method is that the older browsers don’t do stylsheets. I get around this by putting the background in the style declaration along with all the other formatting information. If a visitor has an old browser, he will see a white page with all my text and structural formatting. Pretty primitive, but very serviceable. Notice that I specify margin-right as well as margin-left. This is a “new” addition I’ve suggested because I discovered that MSIE 5.0 renders margin-left (with no margin-right defined) as covering both left and right margin.

If you have a question that is not answered here, please leave a detailed message on the forum (do not use html tags please) and include your URL if the question is about a specific problem on the page. If you have suggestions for other faqs to include on this page, please post that also. As I come across other frequently asked questions, I’ll post the question and answer here.

Copyright © 1999 Carlton Higginbotham, Meade Street Productions.
No part of this site, including graphics and text, may be reproduced without written permission. Please post questions and comments on the Forum

Last updated