HTML - Background and fonts

Topic: HTML

Background and Sounds

Internet Explorer (IE) adds a number of extensions to the <BODY> tag, generally to affect the appearance of the background itself. IE also adds support for background sounds (sounds that are played by the browser as the page loads).

The BGPROPERTIES attribute can be used in conjunction with BACKGROUND specified by HTML 3.0. In IE-compatible browsers, this forces the background to work like a "watermark," which Microsoft defines as a background graphic that doesn't scroll. The only value for BGPROPERTIES is "fixed." The following is an example:

<BODY BACKGROUND="PATTERN.GIF" BGPROPERTIES="fixed">

As always, <BODY> is a container tag, so you'll need a </BODY> tag at then end of your HTML markup for this page.

The <BODY> tag can accept two other attributes in IE-compatible browsers: LEFTMARGIN and TOPMARGIN. Each of these accepts a value in pixels, specifying the amount of white space between the left and top sides of the browser window (respectively) and your text or graphics. For example:

<BODY LEFTMARGIN="30" TOPMARGIN="30">

The <bgsound> Tag

Use the <bgsound> tag to play a soundtrack in the background. This tag is for Internet Explorer documents only. All other browsers ignore the tag. It downloads and plays an audio file when the host HTML document is first downloaded by the user and displayed in their browser. The background sound file also will replay whenever the user refreshes the browser display.

<bgsound> (Internet Explorer)

Function:
Plays a soundtrack in the document background

Attributes:
LOOP
SRC
End tag:
None
Contains:
Nothing
Used in:
body_content

The src attribute

The src attribute is required for the <bgsound> tag. Its value references the URL for the related sound file. For example, when the Internet Explorer user first downloads an HTML document containing the tag:

<bgsound src="audio/welcome.wav">

they will hear the welcome.wav audio file--perhaps an inviting message--play once through their computer's sound system.
Currently, Internet Explorer can handle three different sound format files: wav, the native format for PCs; au, the native format for most UNIX workstations; and MIDI, a universal music-encoding scheme.

Common multimedia formats and respective filename extensions
Format	Type	Extension	Platform of Origin
GIF	Image	gif	Any
JPEG	Image	jpg, jpeg, jpe	Any
XBM	Image	xbm	UNIX
TIFF	Image	tif, tiff	Any
PICT	Image	pic, pict	Any
Rasterfile	Image	ras	Sun
MPEG	Movie	mpg, mpeg	Any
AVI	Movie	avi	Microsoft
QuickTime	Movie	qt, mov	Apple
AU	Audio	au, snd	Sun
WAV	Audio	wav	Microsoft
AIFF	Audio	aif, aiff	Apple
MIDI	Audio	midi, mid	Any
PostScript	Document	ps, eps, ai	Any
Acrobat	Document	pdf	Any

The loop attribute

Like Internet inline movies, the loop attribute for the browser's <bgsound> tag lets you replay a background soundtrack for a certain number of times (or over and over again forever), at least until the user moves on to another page or quits the browser.
The value of the loop attribute is the integer number of times to replay the audio file, or infinite, which makes the soundtrack repeat endlessly.
For example:

<bgsound src="audio/tadum.wav" loop=10>

repeats the ta-dum soundtrack ten times, whereas:

<bgsound src="audio/noise.wav" loop=infinite>

continuously plays the noise soundtrack.

The <marquee> Tag

The <marquee> tag defines the text that scrolls across the Internet Explorer user's display.

<marquee> (Internet Explorer)

Function:

Create a scrolling text marquee
Attributes:

ALIGN
BEHAVIOR
BGCOLOR
CLASS
DIRECTION
HEIGHTH
SPACE
LOOP
STYLE
SCROLLAMOUNT
SCROLLDELAY
VSPACE
WIDTH

End tag:

</marquee>; never omitted
Contains:

plain_text
Used in:

body_content

The <marquee> tag is for Internet Explorer only, and it is an extension to the HTML 3.2 standard. The text between the <marquee> tag and its required </marquee> end tag scrolls horizontally across the display. The various tag attributes control the size of the display area, its appearance, its alignment with the surrounding text, and the scrolling speed.

The <marquee> tag and attributes are ignored by other browsers, but its contents are not. They are displayed as static text, sans any alignment or special treatments afforded by the <marquee> tag attributes.

Font Color and Typeface

IE adds two attributes to Netscape's tag: COLOR and FACE. Actually, you may remember that you were able to change the overall text color in Netscape. In IE, you can change the color for a single word (or even individual letters, if you've got a lot of time on your hands).

Syntax

<FONT 
  COLOR="color" 
  FACE="fontlist"
  POINT-SIZE="pointSize"
  SIZE="number"
  WEIGHT="boldness"
>
...
</FONT>

COLOR="color"
defines the desired text color. Navigator 2.0

FACE="fontlist"

specifies a comma-separated list of font faces. Navigator 3.0
Navigator uses the first font in the list if it is available, otherwise it uses the second font in the list if it is available, and so on. If none of the specified fonts are available, no font face change occurs. Each entry in the font list can be a specific font name, for example "helvetica", or it can be a generic font name. The generic font names are serif, sans-serif, cursive, monospace, and fantasy.
If you want to guarantee that a specific font is available to everybody who views your document, you can attach a downloadable font to your document, as discussed in Part 3. Downloadable Fonts in Dynamic HTML in Netscape Communicator.

POINT-SIZE="pointSize" indicates the point size of the font. The size should be specified as a positive integer. This attribute lets you set exact point sizes, whereas the SIZE attribute lets you set the font size relative to the default size. Navigator 4.0

SIZE="number"

defines the relative size of the font, in a range from 1 to 7, with a default size of 3. A value of 1 results in the smallest font, and a value of 7 results in the largest font. You can also specify the size using a plus or minus sign in front of the number to change the size with respect to the base font size.

WEIGHT="boldness"

indicates the weight, or "boldness" of the font. This attribute allows you to specify degrees of boldness. The value is from 100 to 900 inclusive (in steps of 100), where 100 indicates the least bold value, and 900 indicates the boldest value. Navigator 4.0.

To change the color of a font in the middle of your document's text, use the container with the COLOR attribute, like this:

new color text

The COLOR attribute can accept either three two-digit hex numbers to describe a color, or a color name itself. For example, both of the following result in red text:

This is red text
This is also red text

The FACE attribute can be used to change the actual typeface used in the IE browser window. Because different systems can offer different fonts, this attribute allows you to offer a list of font names. Each name will be tried in succession until a matching font name is found. The FACE attribute takes the following format:

Look at the following example:

Your browser will attempt to use the font Arial, and then fall back to Helvetica and Times Roman until it finds a font match on the user's computer system. If none of the fonts are found, a default font is used.