HTML -- What is Supported, and What Is Not

Since the goal is to create a feature-rich graphical interface for embedded devices, and not to browse random web content, Amulet only supports a limited set of standard HTML tags. In general, most presentation tags are supported since they describe how the marked up content is to be visually presented -- presentation tags describe visual appearance. Logical or content tags are NOT typically supported since they aren't meant to describe how the content looks -- logical tags describe WHAT the content is, not HOW it looks.

So, What's Supported

For a complete list of tags and attributes that are supported, see the Matrix of Supported Tags and Attributes. This matrix lists all of the tags and attributes that are supported along with a detailed description of the syntax, behaviors, and useful application tips. If it is not listed in this matrix, it is not supported.

The following list itemizes the general HTML features that are currently supported:

And, What's NOT Supported

The HTMLCompiler DOES NOT support the following:


Matrix of Supported <Tags> and Their Associated Attributes

<!-->

<A>

<APPLET>

<AREA>

<B>

<BIG>

<BODY>

<BR>

<CENTER>

<DEL>

<DIV>

<EMBED>

<EM>

<FONT>

<Hn>

<HEAD>

<HR>

<HTML>

<I>

<IMG>

<INS>

<MAP>

<META>

<P>

<PARAM>

<S>

<SMALL>

<SPACER>

<SPAN>

<STRIKE>

<STRONG>

<STYLE>

<TABLE>

<TD>

<TITLE>

<TR>

<U>

 

 

 

 

 

TAG DESCRIPTION

For inserting comments that are ignored by browsers and Amulet's HTMLCompiler. Everything between the <!-- and --> is ignored.

<A>

Creates a touch sensitive hypertext link. Clicking/touching anything that appears between the <A> and </A> tags will trigger the appropriate hypertext action.
HREF -- Defines the function(s) to be called when the link is triggered. See Appendix B for available functions.
  INVISIBLE INVISIBLE="True|False", specifies if the Anchor is to start out hittable or not. If the attribute is not present, then by default the Anchor  is hittable. If the Anchor starts out invisible, the only way to make it visible again is via the IWC method "reappear()".      
ONTIME If the ONVAR attribute is not used, then this value automatically triggers the hypertext link after a specified time. Use ONTIME="1st number,2nd number", where 1st number specifies the frequency that the HREF function(s) is called (specified in seconds, with a single floating-point number). The range is 0.00 - 655.35. 0.00 means update never. The 2nd number specifies the delay time from when the page is loaded until the initial HREF function(s) is called (specified in seconds, with a single floating-point number). The range is 0.01 - 655.35. If the 2nd number is not specified, then the delay time defaults to the 1st number (frequency) value. If the 2nd number is specified and the 1st number is 0.00, then the function(s) is called after the delay time specified by the second number and does not update again. If the ONVAR attribute is used, then this value specifies the frequency in which the ONVAR function is called.
ONVAR

The value returned by this function call is used to trigger the function(s) in HREF. Use ONVAR="function", where function is called at the frequency specified in ONTIME. See Appendix B for available functions.

 

TRIGGER

This attribute specifies the value that triggers the HREF function(s). When the value returned from the ONVAR function is equal to the TRIGGER value, the HREF function(s) is called. The trigger value can be a byte, word, InternalRAM byte variable or InternalRAM word variable.

 

TRIGGER.GT

This attribute specifies the value that triggers the HREF function(s). When the value returned from the ONVAR function is greater than the TRIGGER.GT value, the HREF function(s) is called. The trigger value can be a byte, word, InternalRAM byte variable or InternalRAM word variable.

 

 

 

 

TRIGGER.LT

This attribute specifies the value that triggers the HREF function(s). When the value returned from the ONVAR function is less than the TRIGGER.LT value, the HREF function(s) is called.  The trigger value can be a byte, word, InternalRAM byte variable or InternalRAM word variable.

 

 

 

 

TRIGGER.NEQ

This attribute specifies the value that triggers the HREF function(s). When the value returned from the ONVAR function is not equal to the TRIGGER.NEQ value, the HREF function(s) is called. The trigger value can be a byte, word, InternalRAM byte variable or InternalRAM word variable.

 

 

 

 

VALUE

Specifies the intrinsic value of this object. Use VALUE="number" Range is 0 - 65535 (0x00 - 0xFFFF) or InternalRAM byte or word variable.

 

NAME

Specifies the internal name of this object. Used for Inter-Widget Communication only.


<APPLET> Inserts an Amulet Widget. Amulet Widgets are a group of UI objects common to embedded systems that are not supported by standard HTML. Click for more info on widgets. Although Amulet Widgets are inserted into HTML pages using the Java applet tag, Amulet widgets ARE NOT written in Java.
ALIGN ALIGN="TOP | MIDDLE | BOTTOM" -- Specifies the method for vertically aligning the widget to the surrounding text/objects on the same line. Options are TOP, MIDDLE, or BOTTOM, with the default being BOTTOM.
CODE Specifies which type of widget to be inserted.
HEIGHT Specifies the widget height in pixels -- This is a required Attribute and the HTMLCompiler will generate an error if it is missing.
WIDTH Specifies the widget width in pixels -- This is a required Attribute and the HTMLCompiler will generate an error if it is missing.

<AREA> Defines a touch sensitive hypertext region (hot spot) within the bounds of an image. Clicking/touching the region defined by this tag will trigger the appropriate hypertext action. This tag is only allowed between <MAP>...</MAP> and used for implementing a client-side image map.
COORDS Gives the hot spot coordinates, relative to the upper left corner of the image and specified by the <MAP NAME="..."> tag. Syntax is: COORDS="x1,y1,x2,y2", where (x1,y1) represent the upper left corner of the hot spot and (x2,y2) represent the lower right corner, relative to the upper left corner of the image. A value of (0,0) represents the image origin (the pixel at the upper left corner of the image). All numbers x1,y1,x2,y2 are integers, with x increasing towards the right and y increasing towards the bottom.
HREF Defines the action when the link is triggered.  See Appendix B for available functions.

 

ONTIME If the ONVAR attribute not used, then this value automatically triggers the hypertext link after a specified time. Use ONTIME="1st number,2nd number", where 1st number specifies the frequency that the HREF function(s) is called (specified in seconds, with a single floating-point number). The range is 0.00 - 655.35. 0.00 means update never. The 2nd number specifies the delay time from when the page is loaded until the initial HREF function(s) is called (specified in seconds, with a single floating-point number). The range is 0.01 - 655.35. If the 2nd number is not specified, then the delay time defaults to the 1st number (frequency) value. If the 2nd number is specified and the 1st number is 0.00, then the function(s) is called after the delay time specified by the second number and does not update again. If the ONVAR attribute is used, then this value specifies the frequency in which the ONVAR function is called.

 

ONVAR

The value returned by this function call is used to trigger the function(s) in HREF. Use ONVAR="function", where function is called at the frequency specified in ONTIME. See Appendix B for available functions.

 

SHAPE The current version of the HTMLCompiler supports only one shape: rectangle (SHAPE="rect"). Although most Internet browsers allow other shapes, the HTMLCompiler generates an ERROR if SHAPE="circle", or SHAPE="poly" is used.

 

TRIGGER

This attribute specifies the value that triggers the URL function(s). When the value returned from the ONVAR function is equal to the TRIGGER value, the URL function(s) is called. The trigger value can be a byte, word, InternalRAM byte variable or InternalRAM word variable.

 

TRIGGER.GT

This attribute specifies the value that triggers the HREF function(s). When the value returned from the ONVAR function is greater than the TRIGGER.GT value, the HREF function(s) is called. The trigger value can be a byte, word, InternalRAM byte variable or InternalRAM word variable.

 

 

 

 

TRIGGER.LT

This attribute specifies the value that triggers the HREF function(s). When the value returned from the ONVAR function is less than the TRIGGER.LT value, the HREF function(s) is called. The trigger value can be a byte, word, InternalRAM byte variable or InternalRAM word variable.

 

 

 

 

TRIGGER.NEQ

This attribute specifies the value that triggers the HREF function(s). When the value returned from the ONVAR function is not equal to the TRIGGER.NEQ value, the HREF function(s) is called. The trigger value can be a byte, word, InternalRAM byte variable or InternalRAM word variable.

 

 

 

 

VALUE

Specifies the intrinsic value of this object. Use VALUE="number" Range is 0 - 65535 (0x00 - 0xFFFF) or InternalRAM byte or word variable.

NAME

Specifies the internal name of this object. Used for Inter-Widget Communication only.


<B> Marks text for displaying in boldface. Same visual effect as the logical <STRONG> tag.

<BIG> Makes text one size bigger than the surrounding text. Similar to <FONT SIZE="+1">, except that nested <BIG> tags have a cumulative effect. So, <BIG><BIG> ... </BIG></BIG> would yield text two sizes larger than the surrounding text.

<BODY> <BODY> ... </BODY> must enclose the main section of a page.

<BR> Used to insert a line break -- equivalent to the combination of a carriage return(0x0D) and a linefeed(0x0A) in DOS.

<CENTER> For horizontally centering text, images, and widgets.

<DEL> Logical equivalent to <STRIKE>. Strikes out text by displaying it with a line through it.

<DIV> Used to specify visual attributes for a whole block of content which is located between the <DIV> and </DIV> tags. When the STYLE attribute is used, the block of content becomes a "floating cell" which can be located anywhere on the page, allowing for absolute positioning.
ALIGN For aligning all the text and objects of the given block to the LEFT, CENTER, or RIGHT (default is LEFT). ALIGN="LEFT | CENTER | RIGHT"

 

ID Used as a unique identifier of this block of content. Used primarily with embedded CSS. This ID name is specified between the < STYLE>...</STYLE> tags located in the head section to assign style attributes to this "floating cell".
STYLE Note the syntax is a little different since the style attribute uses CSS syntax. The style value is comprised of an attribute name, either font-family or font-size, and the attributes value, which follows the name. The attribute name and the attribute value are separated by a : (colon). The attribute value should be followed by a ; (semi-colon). Attributes can be combined with a space separating the two. As an example, to create a floating cell which is absolutely positioned 10 pixels from the top, 20 pixels to the right, a height of 30 and a width of 50, use the following:
<DIV STYLE="position:absolute; top:10px; left:20px; height:30px; width:50px;"> ... </DIV>

position:absolute;

Specifies the positioning of this "floating cell" will be absolute. This is a required attribute.

top:nnpx;

Specifies the absolute positioning of the "floating cell" from the top of the page, in pixels.

left:nnpx;

Specifies the absolute positioning of the "floating cell" from the left of the page, in pixels.

height:nnpx;

Specifies the height of the "floating cell", in pixels.

width:nnpx;

Specifies the width of the "floating cell", in pixels.

border-style:type;

Specifies the border line type. Solid indicates a solid black line. Gray indicates a gray line.

border-width:npx;

Specifies the width n, of the border line, in pixels.

background-image:url('image');

Specifies the background image to be displayed within the "floating cell", where "image" is the name of the image file. Only files with a .gif or .jpg extension are allowed by the HTMLCompiler. Currently, background images are not tiled or clipped if their dimensions are not the same as the cell they reside in. Remember to include the relative path to the file if it resides in a directory different from the current page. NOTE: The HTMLCompiler assumes that all filenames are relative the directory of the current page.

<EMBED> For including a text file into an HTML file. All text within the included file will be treated as if it were part of the HTML file and located within the HTML file at the same location as the EMBED tag. Can be used anywhere within the HTML file. It is especially useful for replacing a number of META Refresh tags that exist in multiple HTML files.
URL URL="filename", where "filename" is the name of the text file to include at that specific location within the HTML page.      

<EM> Logical equivalent to <I>. Marks text for displaying in italics.

<FONT> For changing the size and the font of individual letters and words.
  SIZE Specifies the font size in one of two ways: Absolute, or Relative. To set a font to a specific size, regardless of the size of the surrounding text, use the Absolute method. To increase, or decrease the font size relative to the surrounding text, use the Relative method. If no size specified, default is 3.
Absolute: SIZE="n", where "n" specifies the absolute font size between 1 and 7 (7 is the largest). Any enclosed text will be displayed at 8, 10, 12, 14, 18, 24, or 36 points for n=1, 2, 3, 4, 5, 6 or 7 respectively. The value of 3 represents a browsers default font size -- 12 point.
NOTE: The default Amulet Sans Serif typeface only has five point sizes, 1-5. Therefore values of 6 and 7 are not supported if using the Amulet Sans Serif font.
Relative: SIZE="+n", where a plus or minus sign before n indicates a size relative to the current font size. <FONT SIZE="+1"> is similar to <BIG>, and <FONT SIZE="-1"> is similar to <SMALL>. However, nested <BIG> or <SMALL> tags have a cumulative effect, while nested relative <FONT> tags do NOT. So, <FONT SIZE="+1"><FONT SIZE="+1"> ... </FONT></FONT> would NOT yield text that is two sizes larger than the surrounding text.

 

FACE

Specifies which font face (also called a "typestyle") to use for the text between the <FONT> ...</FONT> tags. The corresponding .amf file must be included in the Amulet/Configuration/Fonts folder. See AmuletFontConverter for more information regarding the creation of .amf files. If no FACE specified, default is Amulet Sans Serif.

 

 

 

 

COLOR

Specifies the font color, either white or black. If no COLOR specified, default is black. COLOR="WHITE|BLACK"

 

 

 


<Hn> <H1> through <H6> can be used to set the size and alignment of text used to display Headings. The smaller the number, the larger the text used. The convention followed by all major browsers is: <Hn> behaves exactly like the <P> paragraph tag except that the enclosed text is displayed in boldface at 8, 10, 12, 14, 18 and 24 points for n=6, 5, 4, 3, 2 and 1 respectively.
NOTE: <H1> is not supported by the Amulet Sans Serif typeface since it does not have a 24-point sized font.
ALIGN For aligning the heading text to the LEFT, CENTER, or RIGHT (default is LEFT). ALIGN="LEFT | CENTER | RIGHT"

<HEAD> Necessary for creating the HEAD section of a page where the document global <META> tags are specified.

<HR> Used to draw a horizontal line with a specified thickness, length, and alignment. The horizontal line does not share a line with any text or objects, it resides on a line by itself.
ALIGN For aligning the horizontal line to the LEFT, CENTER, or RIGHT (default is LEFT). ALIGN="LEFT | CENTER | RIGHT"
NOSHADE Draws the line with a solid color -- Black in most browsers AND on Amulet's EasyGUI LCD. By omitting this attribute, the line will be drawn as 50% gray on Amulet's LCD -- Internet Browsers draw the line with some 3-D effect.
SIZE SIZE="n" sets the thickness of the line to n pixels. Default is 2 pixels.
WIDTH WIDTH="n" sets the length/width to n pixels. Optionally, n may be specified as percentage of the window/table cell width: WIDTH="n%". The default value is 100%.

<HTML> Tells a browser that this is an HTML document

<I> Marks text for displaying in italics. Same visual effect as the logical <EM> tag.

<IMG> For inserting both static and animated bitmap images.
HEIGHT HEIGHT="pixels", specifies the image height in pixels. This attribute is REQUIRED by the HTMLCompiler -- an error will be generated if it is missing.
NOTE: The HTMLCompiler will not scale the image if the actual image dimensions differ from those specified with the HEIGHT and WIDTH attributes.
TIP: You may stretch a 1x1 GIF image by specifying different WIDTH and HEIGHT attributes to effectively nudge the surrounding elements a few pixels down, or to the right. The HTMLCompiler recognizes this as a <SPACER> and does not store the image in the FLASH ROM file, however it is taken into consideration during the layout of the elements on the screen.
SRC SRC="filename", where "filename" is the name of the image file. Only files with a .gif or .jpg extension are allowed by the HTMLCompiler. Remember to include the relative path to the file if it resides in a directory different from the current page. NOTE: The HTMLCompiler assumes that all filenames are relative the directory of the current page.
USEMAP USEMAP="name" identifies the image as a client-side image map and specifies the "name" of the <MAP> that defines the clickable regions and actions.
WIDTH WIDTH="pixels", specifies the image width in pixels. This attribute is REQUIRED by the HTMLCompiler -- an error will be generated if it is missing.
NOTE: The HTMLCompiler will not scale the image if the actual image dimensions differ from those specified with the HEIGHT and WIDTH attributes.
TIP: You may stretch a 1x1 GIF image by specifying different WIDTH and HEIGHT attributes to effectively nudge the surrounding elements a few pixels down, or to the right. The HTMLCompiler recognizes this as a <SPACER> and does not store the image in the FLASH ROM file, however it is taken into consideration during the layout of the elements on the screen.

 

NAME

NAME="name", specifies the internal name of the Image/Animated Image object. Used for Inter-Widget Communication only.

 

 

 

 

INVISIBLE

INVISIBLE="True|False", specifies if the Animated Image is to start out invisible or not. If the attribute is not present, then by default the Animated Image is visible.  If the Animated Image starts out invisible, the only way to make it visible again is via the IWC method "reappear()". This attribute is only applicable for Animated Images, not static Images.

 

 

 

 

INITIALCONDITION

INITIALCONDITION="Play|Pause", specifies the initial condition of the Animated Image when the page is loaded; Play specifies the Animated Image starts out animated, Pause specifies the Animated Image starts out paused. This attribute is only applicable for Animated Images, not static Images.

 

 

 


<INS> Logical equivalent to <U>. Displays text with a solid underline.

<MAP> Used to mark and name a collection of <AREA> tags so that they can be referenced via the USEMAP attribute of the <IMG> tag -- for implementing a client side image map.
NAME NAME="name" assigns a unique name to the image map so that it may be linked to an image with <IMG USEMAP="name">. NOTE: The name is case sensitive, so the name "ImageMap1" is not the same as "imagemap1".

<META> This tag appears only in the head of the document (between <HEAD>...</HEAD>) to describe the contents of the HTML document. Most of the META constructs, though, are intended for use by Internet search engines, and therefore are not applicable to the creation of embedded GUI's. There is only one standard META construct that is supported -- the document REFRESH construct. In addition, Amulet has also defined a new META construct for the purpose of specifying non-visible attributes that are necessary for the HTMLCompiler.
HTTP-EQUIV <META HTTP-EQUIV="REFRESH" CONTENT="see Objects document"> -- This meta tag forces the browser to trigger a hypertext link after a specified number of seconds. Amulet has extended this meta tag so its functionality is the same as the <A> tag. CONTENT fields are described in Objects document:
NAME

<META NAME="Amulet" CONTENT="see options below"> -- This Amulet specific META tag specifies (1) If communicating specifically with a Parallax BASIC Stamp, (2) The baudrate for communication to a serially-connected device, (2) Whether to wait for the new page to be completely rendered to the frame buffer before drawing to the LCD, (3) The type of screen transition (Gray or NoClear), (4) Whether to include an internalRAM initialization file, (5) Whether to null terminate all serial messages, (6) Whether to have the Amulet respond with an ACK or nothing at all when sent a master command, (7) The communication timeout period, (8) If the current page is a touch-screen calibration page, and (9) If there is a 2ms interbyte delay in all outgoing serial messages. Note that all attributes can be placed within one META, but they must be separated by semi-colons.

Example:
<META NAME="Amulet" CONTENT="Baud.Project=19200;SlaveAckRsp.Project">

BasicStamp.Project
BasicStamp.Page
BasicStamp.NotThisPage

Configures the Amulet to delay a minimum of 2ms between every byte that is transmitted AND to attach a null (0x00) character at the end of every transmission.

Baud.Project=
Baud.Page=

The baudrate is specified in bits-per-second with one of the following integer values: 9600, 19200, 57600, or 115200. Default is 115200.

BufferFull.Project
BufferFull.Page
BufferFull.NotThisPage

BufferFull specifies that the screen goes blank until the next screen is completely rendered to an offscreen buffer. If BufferFull not specified, the new screen is rendered to the actively displayed buffer. BufferFull is best for slide shows that are created with the REFRESH META tag above. Most user-triggered transitions look best using the default page transition.

GrayLCD.Project
GrayLCD.Page
GrayLCD.NotThisPage

GrayLCD specifies upon loading the new page, instead of clearing the previous page, it is grayed out.  Can be used if a "pop-up" warning message is desired.
NoClearLCD.Project
NoClearLCD.Page
NoClearLCD.NotThisPage
NoClearLCD specifies upon loading the new page, instead of clearing the previous page, leave the images from the previous page. Can be used to to moderately speed up page transitions if the new page has a full screen background image, which will clear the previous page due to the drawing of the background image.
noInternalRAM If included, the large file internalRAM.bin is not included with a saved project nor is it programmed into the Amulet module. The Amulet module will use the currently stored values within the serial data flash for the internalRAM variables.
NullTerminate.Project
NullTerminate.Page
NullTerminate.NotThisPage

Configures the Amulet to attach a null (0x00) character at the end of every transmission, not just strings.

SlaveAckRsp.Project
SlaveAckRsp.Page
SlaveAckRsp.NotThisPage

Configures the Amulet to respond with an ACK (0xF0) when sent a "Set" or "Draw" command.

SlaveNoRsp.Project
SlaveNoRsp.Page
SlaveNoRsp.NotThisPage

Configures the Amulet to send no response when sent a "Set" or "Draw" master command.

TimeOut.Project=
TimeOut.Page=
The amount of time, in seconds, the Amulet waits for a response after sending a message. If there is no response in that time, the Amulet times out and sends the next message in line. Valid range is 0.02-2.55 seconds, in .01 increments. Default is 0.2 (200ms)
touch Usually this attribute is omitted. However it must be included on the first touch screen calibration page which contains the first touch target. It must NOT be included on any other page.
UARTDelay.Project
UARTDelay.Page
UARTDelay.NotThisPage

Configures the Amulet to delay a minimum of 2ms between every byte that is transmitted.

 

NAME <META NAME="initCommands" SRC="filename"> -- This Amulet specific META tag specifies the include file used to initialize the command opcodes the Amulet OS uses for its Amulet Serial Protocol. Should only be specified in the main html page. Only one initialization per project is allowed. The file specified by filename must be located in the same directory as the main html page to be compiled. See documentation for initializing the command opcodes.

 

 

 

 

NAME <META NAME="initInternalRAM" SRC="filename"> -- This Amulet specific META tag specifies the include file used to initialize the Internal RAM variables. Should only be specified in the main html page. Only one initialization per project is allowed. The file specified by filename must be located in the same directory as the main html page to be compiled. See documentation for initializing the InternalRAM variables.

 

 

 

 

NAME

<META NAME="Macro" SRC="filename"> -- This Amulet specific META tag specifies the include file used to initialize macro definitions used by the Amulet preprocessor. Multiple Macro definition files per project are allowed. Remember to include the relative path to the file if it resides in a directory different from the current page. See documentation for initializing the macro definitions.

 

 

 


<P> Marks individual paragraphs. Paragraphs are separated by two line breaks and can each have unique alignment properties.
ALIGN For aligning all the text and objects of the given paragraph to the LEFT, CENTER, or RIGHT (default is LEFT). ALIGN="LEFT | CENTER | RIGHT"

<PARAM> Used to provide arguments to an Amulet Widget. Only allowed between <APPLET>...</APPLET>
NAME NAME=text is used to specify the parameter name, which is defined by the widget.  Each widget has its own set of parameter names. NOTE: All widget parameter names are case sensitive.
VALUE VALUE="number|text" assigns a value to the parameter identified with the NAME attribute. Depending on the parameter, the value can be numeric or textual. See Widgets.htm for more information.

<S> (Identical to <STRIKE>, and same visual effect as the logical <DEL> tag) -- Strikes out text by displaying it with a line through it.

<SMALL> Makes text one size smaller than the surrounding text. Similar to <FONT SIZE="-1">, except that nested <SMALL> tags have a cumulative effect. So, <SMALL><SMALL> ... </SMALL></SMALL> would yield text that is two sizes smaller than the surrounding text.

<SPACER> (Also known as "pixel-shimming".) Inserts a horizontal or vertical space, specified in units of pixels. This tag is rarely supported by visual authoring tools or internet browsers, but it is very useful for (1) creating custom line spacing between paragraphs (2) creating custom indents, or (3) nudging content down, or to the right by a specific number of pixels.
SIZE SIZE="n", where n is the amount of space, in pixels.
TYPE TYPE="vertical | horizontal". A vertical spacer creates an automatic line-break with the line height specified in the SIZE attribute, and the line width=100% of the window or table cell. A horizontal spacer will have the width specified in the SIZE attribute, but it will assume the height of the current line.

<SPAN> For changing the size and the font face of individual letters and words using CSS. Note the syntax is a little different since the style attribute uses CSS syntax. The style value is comprised of an attribute name, font-family and/or font-size, and the attributes value, which follows the name. The attribute name and the attribute value are separated by a : (colon). The attribute value should be followed by a ; (semi-colon). Attributes can be combined with a space separating the two.
STYLE

STYLE="font-family:font;"

Specifies the font face of the text between the <SPAN> and </SPAN> tags. The corresponding .amf file must be included in the Amulet/Configuration/Fonts folder. See AmuletFontConverter for more information regarding the creation of .amf files. If no font-family specified, default is Amulet Sans Serif.

STYLE="font-size:nnpt;"

Specifies the font size, nn, of the text between the <SPAN> and </SPAN> tags. nn is the absolute point size of the font, ranging from 8pt to 99pt. The corresponding .amf file must be included in the Amulet/Configuration/Fonts folder. See AmuletFontConverter for more information regarding the creation of .amf files. If no font-size specified, default is 12pt.

<STRIKE> (Identical to <S>, and same visual effect as the logical <DEL> tag ) -- Strikes out text by displaying it with a line through it.

<STRONG> Logical equivalent to <B>. Marks text for displaying in boldface.

<STYLE> This tag appears only in the head of the document (between <HEAD>...</HEAD>) to define the embedded styles within the document. Amulet only uses CSS to create "floating cells" to be used for absolute positioning, so the HTMLCompiler only supports the use of ID selectors, not element or class type selectors.

Each entry within the list of ID styles is comprised of:
ID name preceeded by a #,
{ to mark the beginning of this ID's style properties,
define as many style properties as desired for this ID, separating each property with a semicolon
} to mark the end of this ID's style properties.

Repeat the above steps for each ID for which you wish to define properties. See the CSS documentation for all applicable properties.

Example:
<STYLE>
#FloatingBox1 {position:absolute; top:0px; left:0px; width:100px; height:100px;}
</STYLE>


<TABLE> Creates a table for precise positioning of text, images, and widgets. Every page must be contained within at least one table cell. Currently, the HTMLCompiler determines the pixel dimensions of the LCD from the WIDTH and HEIGHT attributes of the outermost table in the HTML document. For this reason, all table dimensions MUST be specified -- an error will be generated if WIDTH or HEIGHT is missing! In addition, the dimensions must be specified in pixels -- percent is NOT allowed and will also generate an error. No borders, or background colors/patterns are drawn, the cell borders are transparent and only used as an aid in layout.
BACKGROUND BACKGROUND="filename", where "filename" is the name of the image file. Only files with a .gif or .jpg extension are allowed by the HTMLCompiler. Currently, background images are not tiled or clipped if their dimensions are not the same as the table they reside in. Remember to include the relative path to the file if it resides in a directory different from the current page. NOTE: The HTMLCompiler assumes that all filenames are relative the directory of the current page.

 

HEIGHT HEIGHT="pixels" specifies the number of pixels occupied by the table in the vertical direction (top-to-bottom).

 

 

 

WIDTH WIDTH="pixels" specifies the number of pixels occupied by the table in the horizontal direction (left-to-right).

<TD> Creates a display CELL for positioning text, images, and Widgets. Each cell may span several columns and rows. In addition, horizontal and vertical alignment specs will apply only to the contents of the cell. The Amulet HTMLCompiler REQUIRES that all row and column width dimensions be specified -- this is done in the <TD> tag. The row and column height dimensions are optional.
ALIGN ALIGN="LEFT|CENTER|RIGHT" -- Specifies the horizontal text alignment in the cell. The default is LEFT.

 

BACKGROUND BACKGROUND="filename", where "filename" is the name of the image file. Only files with a .gif or .jpg extension are allowed by the HTMLCompiler. Currently, background images are not tiled or clipped if their dimensions are not the same as the cell they reside in. Remember to include the relative path to the file if it resides in a directory different from the current page. NOTE: The HTMLCompiler assumes that all filenames are relative the directory of the current page.
COLSPAN COLSPAN="n", where n is the number of table columns occupied by the cell. The second row of the 3x3 table below only has two <TD> cells. The first <TD> spans only one column, while the second <TD>, shown in silver, spans the remaining two columns.
     
 

COLSPAN=2

     
HEIGHT HEIGHT="pixels" specifies the number of pixels occupied by the cell in the vertical direction (top to bottom). Optionally, may be specified in percent of the total table height -- HEIGHT="n%".
NOWRAP Indicates that the content of the current cell should not be wrapped. The HTMLCompiler will truncate any line that exceeds the cell width. Internet browsers usually extend the table to fit the text on a single line.
ROWSPAN ROWSPAN="n", where n is the number of table rows occupied by the cell. The 3x3 table below illustrates the concept of both ROWSPAN and COLSPAN. The cell shown in silver spans two columns and two rows.
     
 

COLSPAN=2, ROWSPAN = 2

 
VALIGN VALIGN="TOP|MIDDLE|BOTTOM" -- Specifies the vertical text alignment in the cell. The default is MIDDLE. The following example illustrates the three VALIGN methods:
Text aligned to the TOP of the cell. Text aligned to the MIDDLE of the cell. Text aligned to the BOTTOM of the cell
WIDTH WIDTH="pixels" specifies the number of pixels occupied by the cell in the horizontal direction (left to right). Optionally, may be specified in percent of the total table width -- WIDTH="n%".

<TITLE> Gives the page a title. Not used by Amulet, but tolerated. Windowed Internet browsers use the text marked by this tag to set the window title string.

<TR> Creates a new table row to hold <TD> cells.

<U> Displays text with a solid underline (Same visual effect as the logical <INS> tag).



Amulet HTMLCompiler,
Copyright © 2000-2004 by
Amulet Technologies, LLC


Back to Welcome - Contact Amulet - Amulet Home