THE EMBED TAG

The <EMBED> tag is the most common way of adding sound to a Web page. Its advantage over the <BGSOUND> tag is that it is supported by both browsers, and more consistently across the PC and Mac platforms. The <EMBED> tag introduces many features that aren't supported by <BGSOUND>. Furthermore, while the <BGSOUND> tag only supports background sounds, the <EMBED> tag also features an interactive interface (including various buttons to play, stop, and handle the sound). Your browser cannot play sound files.

The HTML code that generates a control panel is very simple:

<EMBED SRC="xfiles.mid" VOLUME="50" HEIGHT="60" WIDTH="144">

Try reading this page on both browsers. You'll be surprised to see that the design of the control panel is totally different. For example, Navigator's control panel includes a volume control while Explorer's has a position control. Also, Navigator 4.0.5 uses a different control panel than 4.0.4. Explorer features an optional digital display, invoked by right-clicking the control panel. Navigator does not have a digital display.

JavaScript support is also different between the two browsers. Navigator and Explorer support different sets of the <EMBED>'s attributes. Here are the attributes supported by both browsers:

Attribute	Description
`SRC="URL"`	Specifies the URL of the sound file. Sound files can be in any recognizable format (For example: `"midi, wav, au"`)
`WIDTH="n"`	Specifies the width of the control panel. The optimal width to use is 144 pixels. Navigator chops the control panel if a smaller value is used (or if the attribute is omitted altogether), and adds a blank area to its right side, if a larger number is specified. Explorer also yields a reasonable panel with this value.
`HEIGHT="n"`	Specifies the height of the control panel. The optimal width to use is 60 pixels. Navigator chops the control panel if a smaller value is used (or if the attribute is omitted altogether), and adds a blank area on its top, if a larger number is specified. Explorer also yields a reasonable panel with this value.
`ALIGN="alignoption"`	Specifies how the alignment of the control panel should be, much like the alignment of images (`<IMG>` tag). Possible options are: `TOP`, `BOTTOM`, `CENTER`, `BASELINE`, `LEFT`, `RIGHT`, `TEXTTOP`, `MIDDLE`, `ABSMIDDLE`, or `ABSBOTTOM`.
`NAME="name"`	Specifies the name of the object. Can be used to access the object from JavaScript via `document.name`
`HIDDEN="true"`\|`"false"`	Specifies if the embedded object is visible (`HIDDEN="false"`) or hidden (`HIDDEN="true"`). The default is `HIDDEN="false"`.

The following attributes are not supported by both browsers:

Attribute	Description
`VOLUME="n"`	Specifies the sound volume. Can range from 0 to 100, 50 is the default. Navigator's control panel reflects this setting when the element is loaded. Supported only by Netscape Navigator. The Windows 95's default is 50 (midpoint), while that on the Mac is 75.
`LOOP="true"`\|`"false"`\|`"n"`	Specifies if the sound should be played continuously (`LOOP="true"`), for a specified number of times (`n`), or should not be repeated (`LOOP="false"`). Supported only by Navigator; You will get continuous sound on Explorer. For same effect on Explorer, use `playcount` (see below).
`PLAYCOUNT="n"`	Specifies the number of times to play the sound. Supported only by Explorer.
`PLUGINSPAGE="URL"`	Specifies the location of the plug-in software needed to run the sound file. This attribute is needed only if the plug-in software is not one of the common ones that are already installed on the computer. Supported only by Navigator.
`PLUGINURL="URL"`	Specifies the location of the software needed to install the specified plug-in (JAR Installation Manager). This attribute is needed only if the plug-in software is not one of the common ones that are already installed on the computer. Supported only by Navigator.
`HREF="URL"`	Converts the control panel into a hyperlink. Works like `<A HREF="URL">` and only with Explorer.
`TARGET="URL"`	Converts the control panel into a hyperlink. Works like `<A TARGET="URL">` and only with Explorer.
`AUTOSTART="true"`\|`"false"`	Indicates if the sound track should start automatically upon loading. A `"true"` value means it should, a `"false"` value means it should not. The Explorer's default is `"false"` while Navigator's one is `"true"`. The default on the Mac is `"false"` for both browsers.
`STARTTIME="mm:ss"`	Indicates the spot on the track where to begin playing. Notice that the playing will start immediately, at the specified spot. The spot is specified in minutes from the beginning of the track. The track begins to play immediately when you download it (`AUTOSTART="true"`), or when you hit the play button (`AUTOSTART="false"`). Time is denoted in minutes and seconds. If you specify a time longer than the soundtrack length, the browser will give you an error. Supported only by Navigator.
`ENDTIME="mm:ss"`	Indicates the spot on the sound track where to stop playing. The spot is specified in minutes from the beginning of the track. The track begins to play immediately when you download it (`AUTOSTART="true"`), or when you hit the play button (`AUTOSTART="false"`). Time is denoted in minutes and seconds. If you specify a time longer than the soundtrack length, the browser will give you an error. Supported only by Navigator.

Let's demonstrate the last two attributes, STARTTIME and ENDTIME. The following code plays 20 seconds of the Aladdin soundtrack, starting at the 10th second (please reload the page):


<HTML>
<HEAD>
<TITLE> testing  </TITLE>
</HEAD>
<BODY>
<EMBED SRC="aladdin.mid" HIDDEN="true" AUTOSTART="true"
  STARTTIME="00:10" ENDTIME="00:30">
</BODY>
</HTML>

Your browser cannot play sound files.

Thanks to Geoff Davies for letting us use his midi files

HTML Tags Currently In Use

This page presents a list of HTML tags that are currently in use. Some receive more use than others, while some are specific to the NETSCAPE or MICROSOFT (Spyglass Enhanced Mosaic) browsers. This list is by no means definitive. For a listing of proposed new HTML 3.0 tags you are directed to the HTML 3.0 DTD. (Expect changes to this proposal). For the accepted codes in HTML 2.0 you are directed to the HTML 2.0 DTD. Full details about HTML 2.0 and 3.0 (and just about anything else to do with World Wide Web authoring and security) are available from the World Wide Web Consortium. Please note, that while these tags are currently in use, some are part of the HTML 3.0 specification or proprietary specifications therefore the syntax may change in the future. NETSCAPE's documentation on frames is excellent, therefore I have not included frames in this list, but I direct you to NETSCAPE's site for more information. Comments or corrections to this list should be directed to gweir@idirect.com

Main Structure

<HTML>...</HTML>              Beginning and end of every document
<HEAD>...</HEAD>              Beginning and end of heading information
<BODY                         Beginning of document body
    BGCOLOR="#RRGGBB"         NETSCAPE background colour attribute (Red, Green, Blue)
    BACKGROUND="file.jpg"     Backgound image (.jpg or .gif)
    TEXT="#RRGGBB"            Text colour (MICROSOFT can use colour name)
    LINK="#RRGGBB"            Link colour (MICROSOFT can use colour name)
    VLINK="#RRGGBB"           Visited link colour (MICROSOFT can use colour name)
    ALINK="#RRGGBB">          Active link colour (MICROSOFT can use colour name)
</BODY>                       End of document body
<BGSOUND                      MICROSOFT background sound
    SRC="url"                 MICROSOFT sound source
    LOOP="number">            MICROSOFT loop number times (can be INFINITE)
<!-- comments -->             Non displayed comments
<COMMENT>...</COMMENT>        Non displayed comments
<ADDRESS>...</ADDRESS>        Address information (little used)

Modifiers within the HEAD section

<TITLE>...</TITLE>            Start and end of TITLE section
<BASE HREF="url">             Set BASE URL of document (use with care - non-portable)
<LINK REV=MADE HREF="url">    Identify page author
<META                         NETSCAPE Client pull
    HTTP-EQUIV="REFRESH"      NETSCAPE Reload page
    CONTENT="number"          NETSCAPE reload after number seconds.
    URL="fullurl">            NETSCAPE url of page to load ("CONTENT=5;URL=http://place.com")

Paragraph Styles

<H1>...</H1>                  Encloses level 1 heading (Big) (Can use ALIGN=CENTER)
<H2>...</H2>                  Encloses level 2 heading (Can use ALIGN=CENTER)
<H3>...</H3>                  Encloses level 3 heading (Can use ALIGN=CENTER)
<H4>...</H4>                  Encloses level 4 heading (Can use ALIGN=CENTER)
<H5>...</H5>                  Encloses level 5 heading (Can use ALIGN=CENTER)
<H6>...</H6>                  Encloses level 6 heading (Small)  (Can use ALIGN=CENTER)
<P>                           Start a new paragraph (NETSCAPE can use ALIGN=CENTER,LEFT,RIGHT)
<BR                           Line break (new line)
    CLEAR=LEFT                NETSCAPE Clear left margin of images
    CLEAR=RIGHT               NETSCAPE Clear right margin of images
    CLEAR=ALL>                NETSCAPE Clear both margins of images
<HR	                      Horizontal Rule
    SIZE="pixels"             NETSCAPE Specify width of rule
    WIDTH="pixels||percentage"NETSCAPE Width of rule in pixels or percentage of display
    ALIGN=LEFT                NETSCAPE Align rule to left
    ALIGN=RIGHT               NETSCAPE Align rule to right
    ALIGN=CENTER              NETSCAPE Align rule to center
    NOSHADE>                  NETSCAPE Turn off shading of rule
<BLOCKQUOTE>...</BLOCKQUOTE>  Indents a a block quote section
<PLAINTEXT>...</PLAINTEXT>    Plain text & do not process tags between start and end
<PRE>...</PRE>                Preformatted text (Typewriter font)
<LISTING>...</LISTING>        Preformatted code listing
<NOBR>...</NOBR>              NETSCAPE No breaks permitted between tags
<WBR>                         NETSCAPE Allow word break in NOBR section

Lists

<OL                           Ordered lists 
    TYPE=A                    NETSCAPE Specify large letters
    TYPE=a                    NETSCAPE Specify small letters
    TYPE=I                    NETSCAPE Specify large roman numerals
    TYPE=i                    NETSCAPE Specify small roman numerals
    TYPE=1>...</OL>           NETSCAPE Specify numbers (default)
<UL                           Unordered lists
    TYPE=square               NETSCAPE Square bullet
    TYPE=disc                 NETSCAPE Solid  disc bullet (default 1st level)
    TYPE=circle...</UL>       NETSCAPE Circle bullet
<MENU>...</MENU>              Encloses a menu listing (display same as UL)
<DIR>...</DIR>                Encloses a directory listing (display same as UL)
<LI>                          Identify a list item (can use OL/UL modifiers with NETSCAPE)
<DL>...</DL>                  Encloses a definition list
<DT>                          Definition list term (1st level indent)
<DD>                          Definition list definition (2nd level indent)

Display Styles

<STRONG>...</STRONG>          Strong text
<STRIKE>...</STRIKE>          Strikethrough text
<EM>...</EM>                  Emphasized text
<CITE>...</CITE>              A citation
<CODE>...</CODE>              Computer code
<SAMP>...</SAMP>              Sample output
<DFN>...</DFN>                Definition
<VAR>...</VAR>                Variable
<KBD>...</KBD>                Keyboard entry
<XMP>...</XMP>                Example (use with care)
<I>...</I>                    Italic text
<B>...</B>                    Bold text
<U>...</U>                    Underlined text
<S>...</S>                    Strikethrough text
<TT>...</TT>                  Italic text
<FONT                         NETSCAPE font style
    SIZE="value">             NETSCAPE Change font size (1 small-7 big can use +/-)
    COLOR="#rrggbb"           NETSCAPE font colour (MICROSOFT can use colour names)
    FACE="name,name,etc"      MICROSOFT specify font (ie Ariel,Times Roman)
...</FONT>                    NETSCAPE end font style 
<BASEFONT SIZE="value">       NETSCAPE Set base font size
<CENTER>...</CENTER>          NETSCAPE Center items between tags
<BIG>...</BIG>                NETSCAPE use bigger font
<SMALL>...</SMALL>            NETSCAPE use smaller font
<SUB>...</SUB>                NETSCAPE use subscript
<SUP>...</SUP>                NETSCAPE use superscript
<MARQUEE                      MICROSOFT scrolling text marquee
    ALIGN=TOP                 MICROSOFT align text with top of marquee
    ALIGN=MIDDLE              MICROSOFT align text with middle of marquee
    ALIGN=BOTTOM              MICROSOFT align text with bottom of marquee
    BEHAVIOR=SCROLL           MICROSOFT text scroll on and off marquee
    BEHAVIOR=SLIDE            MICROSOFT text scroll in and stays
    BEHAVOIR=ALTERNATE        MICROSOFT text moves back and forth
    BGCOLOR="#rrggbb"         MICROSOFT background colour of marquee (can use colour name)
    DIRECTION=RIGHT           MICROSOFT scroll from right
    DIRECTION=LEFT            MICROSOFT scroll from left
    HEIGHT="number||percent"  MICROSOFT height of marquee
    HSPACE="number"           MICROSOFT horizontal space between marquee and surrounding text
    VSPACE="number"           MICROSOFT vertical space between marquee and surrounding text
    LOOP="number||INFINITE"   MICROSOFT loop marquee number times
    SCROLLAMOUNT="number"     MICROSOFT speed of marquee
    SCROLLDELEY="number"      MICROSOFT delay in milliseconds
    WIDTH="number||percentage"MICROSOFT width of marquee
    ...</MARQUEE>             MICROSOFT end marquee

Links and Images

<A HREF="url">...</A>              Enclose a link
<A NAME="name">...</A>             Enclose an anchor point
<A NAME="name" HREF="url">...</A>  Both of the above
<IMG SRC="url"                     An inline image source
    ALIGN=MIDDLE                   Align text with middle of image
    ALIGN=TOP                      Align text with top of image
    ALIGN=BOTTOM                   Align text with bottom of image
    ALIGN=LEFT                     NETSCAPE Align image to left of page (text will wrap)
    ALIGN=RIGHT                    NETSCAPE Align image to right of page (text will wrap)
    ALIGN=TEXTTOP                  NETSCAPE Align with tallest text
    ALIGN=BASELINE                 NETSCAPE Align with bottom of image
    ALIGN=ABSBOTTOM                NETSCAPE Align bottom of image with current line
    ALIGN=ABSMIDDLE                NETSCAPE Align text with absolute middle of image
    WIDTH="pixels"                 NETSCAPE width of image                         
    HEIGHT="pixels"                NETSCAPE height of image
    BORDER="value"                 NETSCAPE border size (can be 0)
    VSPACE="pixels"                NETSCAPE vertical spacing
    HSPACE="pixels"                NETSCAPE horizontal spacing
    ALT="text">                    Text description of image
    CONTROLS                       MICROSOFT show control panel for .avi files
    DYNSRC="url"                   MICROSOFT show dynamic source (.avi)
    LOOP="number"                  MICROSOFT loop video clip number times (Can be INFINITE)
    START="FILEOPEN||MOUSEOVER"    MICROSOFT Start video when loaded or when mouse over image
    USEMAP="mapname"               MICROSOFT Client side imagemap
    ISMAP>                         Image is a server side imagemap
<MAP NAME="mapname">               MICROSOFT Start client side image map locations
<AREA                              MICROSOFT define client side imagemap
    COORDS="x1,y1,x2,y2,..."       MICROSOFT coordinates for map
    HREF="url"                     MICROSOFT destination of hot spot
    NOHREF                         MICROSOFT ignore clicks on this spot
    SHAPE="shape"                  MICROSOFT shape of spot (CIRC/POLY/RECT)

Tables

<TABLE                             Start table (required)
    BORDER="pixels"                NETSCAPE border size (can be 0)
    CELLSPACING="pixels"           NETSCAPE Space between cells
    CELLPADDING="pixels"           NETSCAPE Space between border and contents of cell
    WIDTH="pixels||percentage"     NETSCAPE width of table
    HEIGHT="pixels||percentage"    NETSCAPE height of table
    ALIGN=LEFT                     MICROSOFT align table left (default)
    ALIGN=RIGHT                    MICROSOFT align table right
    BGCOLOR="#rrggbb||colour name" MICROSOFT specify table background colour
    BORDERCOLOR="#rrggbb||name"    MICROSOFT specify table border colour
    BORDERCOLORLIGHT="#rrggbb||name"MICROSOFT specify 3D border light highlight colour
    BORDERCOLORDARK="#rrggbb||name"MICROSOFT specify 3D border dark highlight colour
    VALIGN=TOP                     MICROSOFT align table text to top (center is default)
    VALIGN=BOTTOM                  MICROSOFT align table text to bottom
    ...</TABLE>                    End table (required)
<TR                                Table row specifier
    ALIGN=LEFT                     Align row contents left
    ALIGN=CENTER                   Align row contents center
    ALIGN=RIGHT                    Align row contents right
    VALIGN=TOP                     Vertical align top
    VALIGN=MIDDLE                  Vertical align middle
    VALIGN=BOTTOM                  Vertical align bottom
    VALIGN=BASELINE                Vertical align with baseline
    ...</TR>                       End row
<TD                                Table data specifier
    ALIGN=LEFT                     Align cell contents left
    ALIGN=CENTER                   Align cell contents center
    ALIGN=RIGHT                    Align cell contents right
    VALIGN=TOP                     Vertical align top
    VALIGN=MIDDLE                  Vertical align middle
    VALIGN=BOTTOM                  Vertical align bottom
    VALIGN=BASELINE                Vertical align with baseline
    NOWRAP                         Cell contents will not wrap
    COLSPAN="columns"              Cell will span columns
    ROWSPAN="rows"                 Cell will span rows
    BGCOLOR="#rrggbb||colour name" MICROSOFT specify cell background colour
    BORDERCOLOR="#rrggbb||name"    MICROSOFT specify cell border colour
    BORDERCOLORLIGHT="#rrggbb||name"MICROSOFT specify 3D border light highlight colour
    BORDERCOLORDARK="#rrggbb||name"MICROSOFT specify 3D border dark highlight colour
    ...</TD>                       End cell
<TH                                Table header specifier (bold default align=center)
    ALIGN=LEFT                     Align cell contents left
    ALIGN=CENTER                   Align cell contents center
    ALIGN=RIGHT                    Align cell contents right
    VALIGN=TOP                     Vertical align top
    VALIGN=MIDDLE                  Vertical align middle
    VALIGN=BOTTOM                  Vertical align bottom
    VALIGN=BASELINE                Vertical align with baseline
    NOWRAP                         Cell contents will not wrap
    COLSPAN="columns"              Cell will span columns
    ROWSPAN="rows"                 Cell will span rows
    ...</TH>                       End cell
<CAPTION                           Caption (inside TABLE but not TR,TD or TH)
    ALIGN=TOP                      NETSCAPE Align caption above table (default)
    ALIGN=BOTTOM                   NETSCAPE Align caption below table
    ALIGN=LEFT                     MICROSOFT Align left
    ALIGN=RIGHT                    MICROSOFT Align right
    ALIGN=CENTER                   MICROSOFT Align center
    VALIGN=TOP                     MICROSOFT Align caption above table
    VALIGN=BOTTOM                  MICROSOFT Align caption below table

Forms

<ISINDEX                           Document does keyword searches
    PROMPT="sometext"              NETSCAPE changes prompt
    ACTION="url">                  search script
<FORM                              Start a fill out form
    ACTION="url"                   use url script
    METHOD=POST||GET>              specify POST or GET method
    ...</FORM>                     End form
<INPUT                             Start input field
    TYPE="TEXT"                    one line text box
    TYPE="PASSWORD"                one line password box (echos *'s)
    TYPE="RADIO"                   radio buttons
    TYPE="CHECKBOX"                checkboxes
    TYPE="HIDDEN"                  field will not display
    TYPE="IMAGE"                   image that acts like a submit button
    TYPE="SUBMIT"                  submit button (send form)
    TYPE="RESET"                   reset button (clear form)
    NAME="name"                    variable name for field
    VALUE="value"                  value of field
    SIZE="size"                    makes field size characters wide
    MAXLENGTH="size"               accept no more than sizecharacters
    CHECKED>                       turn on checkbox or radio button
<TEXTAREA                          Big text field (box)
    ROWS="size"                    size rows high
    COLS="size"                    size columns wide
    ...</TEXTAREA>                 End textarea
<SELECT                            Popup menu or scrolling list
    SIZE="size"                    make scrolling list size high
    MULTIPLE>                      allow multiple selections
    <OPTION                        Entry for menu or list
        VALUE="value"              value of entry
        SELECTED>                  set as default selection
    ...</SELECT>                   End popup menu or scrolling list