Site hosted by Angelfire.com: Build your free website today!


BasicFont ColorsSizeStyles + EffectsMarqueeBackground ColorImagesBackground ImageSound




Many people want to learn how to put HTML in their e-mail. Since most of the questions are identical, I'm going to try to answer many of these questions on this page. If you have a question that isn't answered here, I will try to add it, if you let me know what it is. For further HTML information in general, use the HTML Resources Page.

Important Note: WebTV is optimized to display HTML in e-mail, but many computer e-mail programs can't show your HTML in action. Some computer users will have to click an attachment to see and hear what you've written, and some may not be able to see it at all (AOL, for example); the message may also appear completely blank, and often the HTML codes will appear as plain text. For technical background on the problem, click here. For some helpful information regarding sending HTML and pics to AOL subscribers, read this.

It's been reported that clicking Reply or Forward while viewing an HTML message on a computer and scrolling down sometimes will make the message visible.

The latest versions e-mail programs included with Netscape Communicator and MS Internet Explorer have the ability to display HTML e-mail, if they're configured properly. Not every computer user wants to see HTML e-mail, however–if a person you're writing to wants to take the time and trouble to learn how to enable this function, they should be able to see most of the effects you create in your messages using HTML.

I'd suggest you write to any unsuspecting computer user with your HTML signature removed before sending them an HTML message for the first time (particularly if they receive your message as an attachment, they may be less than happy–attachments can contain viruses, they won't want to click it).

Basic

You should place all of your HTML codes in your e-mail signature. For an explanation of why and how, click here.

To have HTML work in e-mail, the very first thing you type must be the HTML tag <html>. Anything you type before this tag will render the message as regular text, and the code won't be interpreted.

Signatures are a great means of personalizing your e-mail, and the best place for placing a graphic or sound file you want to send out with every e-mail message.

Important: Be aware that images and sounds in e-mail and newsgroup posts increase the time it takes for the message to load and be readable. Some people would rather skip a message that takes more than 10 seconds to come up than wait for it.

Font Colors

Change the color of the font with the HTML tag <font color=colorname>, where you would replace colorname with a Netscape colorname, or an RGB hex number, to determine the color of the text following this tag. Resources for colors are located on the Colors Resources Page.

These are the Netscape named colors available for WebTV (type the color name in lowercase and as a single word with no spaces, for instance, Dark Olive Green is typed in the code tag as darkolivegreen).

With the Summer upgrade of '98, it is now possible to change the font color of the header and body text of e-mail and newsgroup posts with a code in the signature. Use the code <body text=colorname> (using one of the Netscape colornames, or an RGB hex code).

Font Size

Change the size of the font with the HTML tag <font size=?>, where you would replace the "?" with a number 1 through 7. This is what the sizes look like:

Size 1
Size 2
Size 3
Size 4
Size 5
Size 6
Size 7

Using a number larger than 7 will make the size 7.

Note: Font size in the body of the message can't be specified with codes in the mail signature. If you want to change the size of the body text, you'll have to write the body text as HTML, separately from the signature. Just make sure <html> is the very first thing in the message body text.

Font Styles and Effects

There are several font styles you can use, to make the text italic, strikethrough, bold, blackface (double-bold; this is a WebTV-only attribute), and underlined. The codes are <i>, <s>, <b>, <blackface>, and <u>. When you want to stop using the style, type the same code, but with a / before the text in the code, for instance </i>. Some examples:

Italics Strikethrough Bold Blackface Underline

There are several font effects attributes available using WebTV. They are shadow, emboss, and relief. These effects attributes are entered within the <font> tag, for example <font effect="shadow">. Examples:

Shadow Emboss Relief

Note: Font styles and effects in the body of the message can't be specified with codes in the mail signature. If you want to change the style or effect of the body text, you'll have to write the body text as HTML, separately from the signature. Just make sure <html> is the very first thing in the message body text.

Marquee

You will notice the marquees in these examples move very slowly. That's because I put more than one on one page. Try to keep yourself to one marquee, and they run much more quickly.

Note: <marquee> doesn't work with Netscape, so computer users who use Navigator/Communicator as their browser won't see the scroll.

To make text scroll across the screen, use the <marquee> tag. The basic effect is created by typing in:

<marquee>This is a marquee!</marquee>

which makes this happen:

This is a marquee!

You can change the font color and size using the font color and size tags, explained above, just make sure you change these attributes before the opening <marquee> tag!

You can change the background color of the marquee text by adding the attribute bgcolor=colorname just before the closing bracket in the opening <marquee> tag (leaving a blank space after the word "marquee" in the tag). Here's the same marquee with a blue background:

This is a marquee!

You can also make the marquee smaller, and center it, by using the attribute width=?%:, this is a marquee at 33%, centered:

This is a marquee!

You can change the behavior of the marquee, specifying direction= (right or left), and behavior= (slide, alternate). Remember, all of these attributes are typed in just before the closing bracket on the opening marquee tag, separated by a single space. Some examples:

direction="right"
This is a marquee!
behavior="slide"
This is a marquee!
behavior="slide" direction="right"
This is a marquee!
behavior="alternate"
This is a marquee!

Background Color in E-mail

It is possible to use a different color for the background of an e-mail message, replacing the dark gray default color, and you can change the color of text your write your message in as well, using codes in your e-mail signature. You can specify any of the colors you saw on the font color demo page above. These command can be anywhere in your signature, after the <html> tag. The syntax for this code is:

<body bgcolor="colorname" text="colorname">

where you substitute the name (or the RGB hex code) of the color you want as a background and text.

Images in E-mail

Don't Steal! Read This...

To link an image into an e-mail message, you use the HTML code

<img src="http://URL/IMAGE.GIF">

where URL is the location of the image file on the Internet, and IMAGE.GIF is the name of the image itself (images can be GIFs or JPEGs). Image file names can be case-sensitive, so make sure you use capital letters in your link if the original had capitals. This JPEG image:

is linked here with this code line:

<img src="http://www.geocities.com/ResearchTriangle/8795/33.jpg">

The image is located at www.geocities.com, in the subdirectory "/ResearchTriangle/8795", and the name of the JPEG is "33.jpg". You must know the entire location URL, and the exact name of the image file, or the link won't work. To get the correct URL, you may need to use an HTML validator. To find out about validators, click here.

For more detailed information about using images, changing their size and aligning them with text, in e-mail or on webpages, click here.

If you have a particular image you want to use in every message you send, put it into your e-mail signature so you don't have to write the code every time.

Background Image in E-Mail

Don't Steal! Read this...

Following the instructions for images above, it is possible to "tile" an image as a wallpaper background for your e-mail, covering the message from top to bottom, behind the text. In many cases, you'll also want to change the text color, to make it easier to read against your chosen background; here are the codes you need to use in your signature:

<body background="http://URL/bkgrnd.gif" text="colorname">

URL would be the location of the GIF or JPG you are using for background, and bkgrnd.gif would be the name of the actual image file.

If you're changing the text color to dark one, you may want to also add bgcolor=colorname within the <body> tag, using a light color for contrast with your typed text.

Sounds in E-Mail

Don't steal! Read this...

After the Summer '97 Upgrade, I changed my recommendation from using <bgsound> to using <embed>. <embed> seems to be more flexible.

You can now use any type of file in background sound that you can hear with the WebTV browser: MIDI, WAV, AU, AIFF, SWA, MPEG Audio, SND, etc. Don't use Real Audio for background music at all, because it's always bandwidth theft!

The general form for <embed> is:

<embed src="http://URL">

This will make a clickable speaker icon appear. To make the sound play automatically when the e-mail is opened, add the autostart=true attribute:

<embed src="http://URL" autostart="true">

You can loop any sound file you want, either endlessly by using the loop=true attribute, or a certain number of times using loop=#, replacing # with the number of times you want to loop.

Getting the URL of music that you found with a clickable link on a page is now extremely easy. Click the sound link on the page, then hit GoTo, and click Show Last. What you see there in the text window of the GoTo box is the URL you need to make the sound work in e-mail.

There is another sound related WebTV-only HTML tag, a design element that looks like a stereo equalizer display...but which now (as of Nov '99) works only in a webpage, not mail: the audioscope...

Note: Unfortunately, I no longer have the time available to provide HTML help one-on-one. For further information on HTML in mail and for webpages, visit Draac.com, alt.discuss.webtv.html (WebTV-only newsgroup), and my HTML Resources page.