`<html>`

The <html> block form expands into an inert <content type_="html"> form containing an HTML string. (Available as of version 11.09)

Description

The <html> form expands its contents under the ordinary block code rules, but with the option of further marking the { and } scalar context delimiters for a scalar expression so that HTML contents of the form that contain these delimiters as literal text need not be specially marked up.

In addition, attributes in the <html> tag define variables within <html> that are properly escaped for HTML (i.e., occurrences of < , >, ", and & within the string values of the attributes are replaced with the appropriate HTML entities <, >, ", and &, respectively).

Syntax

<html s_="[SHIFT_MARKER]"
      si_="[SHIFT_IN_MARKER]"
      so_="[SHIFT_OUT_MARKER]"
      e_="[PREFIX_STRING]">
  [HTML_CONTENTS]
</html>

Attributes

s_

Specifies a "shift" marker which must precede { and follow } for those to be considered scalar context delimiters.

For example, s_="~~" would require ~~{ and }~~ as delimiters for a scalar expression.

Separate "shift in" and "shift out" markers may be specified via the si_ and so_ attributes, respectively.

si_

Specifies a "shift in" marker which must precede { for it to be considered a scalar context delimiter.

For example, si_="[[" so_="]]" would require scalar expressions to be delimited with [[{ and }]].

so_

Specifies a "shift out" marker which must follow } for it to be considered a scalar context delimiter.

For example, si_="*" so_="!" would require scalar expressions to be delimited with *{ and }!.

e_

Specifies a string that must precede both { and } for those to be considered scalar context delimiters.

For example, e_="." would require .{ and .} as delimiters for a scalar expression.

Example

The following example demonstrates how the <html> form can be used to display HTML text that contains { and } as well as a scalar expression. Specifying the shift markers by setting s_="~", only those { characters preceded by ~ and those } characters followed by ~ will be considered scalar context delimiters. All other instances of { and } will be rendered as literal text. In addition, the attribute y in the <html> tag is set to the string <BR>, which is properly escaped for HTML (e.g., <BR>) upon block expansion so that the text is rendered properly as the string value.

<dynamic x="<BR>">
  <widget class_="text">
    <html y="<BR>" s_="~">
      <![CDATA[ <B>{Here is a <TT>~{@y}~</TT>: ~{@x}~}</B> ]]>
    </html>
  </widget>
</dynamic>

The following code:

<html y="<BR>" s_="~">
  <![CDATA[ <B>{Here is a <TT>~{@y}~</TT>: ~{@x}~}</B> ]]>
</html>

is expanded to:

<content type_="html">
  <![CDATA[ <B>{Here is a <TT>&lt;BR&gt;</TT>: <BR>}</B> ]]>
</content>

Example: Using `<code>` and `<html>` within the `text` widget

The following example demonstrates how the <html> block form can be included within a text widget to display HTML text. It also uses the <code> block form to specify CSS to style the HTML. In addition, the value of the dynamic variable yourname, which is entered using the field widget, is referenced within the HTML text.

<dynamic yourname="">
  <layout arrange_="v">
    <widget class_="field" label_="Enter your name:" 
     value_="@yourname"/>
    <widget class_="text" visible_="{@yourname<>''}">
      <code language_="css"><![CDATA[ 
            h3 {
                font-size:24px;
                color:#F26F21;
            }

            p {
                font-family: verdana;
                font-size: 20px;
            }

            a {
                color:#C8102E;
            }
        ]]>
      </code>
      <html>
        <div>
          <h3>Hello, {@yourname}!
          </h3>
          <br/>
          <p>1010data offers the only fully-scalable, self-services 
            insights platform for data management, analysis and 
            application building.
          </p>
          <br/>
          <a target="_blank" href="http://www.1010data.com">
            Click here to learn more
          </a>
        </div>
      </html>
    </widget>
  </layout>
</dynamic>

<html>