4.13.11 Example of coding an HTML part

(1) When using an external CSS in HTML parts

An example of entering source codes in the HTML source string text box in the Attribute Settings window (when creating an external CSS file) is shown below.

• Example of how to enter an HTML source string

  <table class="sample">
    <caption class="sample">Order control table</caption>
    <thead>
      <tr>
        <th class="sample">Order number</th>
        <th class="sample">Date of order</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sample">00001-20101010-00001</td>
        <td class="sample">2010/10/10</td>
      </tr>
      <tr>
        <td class="sample">00001-20101010-00002</td>
        <td class="sample">2010/10/10</td>
      </tr>
    </tbody>
    <tfoot />
  </table>

• Example of creating an external CSS file

  table.sample {
      border:1px solid #777777;
      border-collapse:collapse;
      border-spacing:0;
      background-color:#ffffff;
  }
  caption.sample {
      font-size:14px; font-weight:bold;
  }
  th.sample {
      border-right:1px solid #777777;
      border-bottom:1px solid #777777;
      background-color:#e3e5e7;
      padding:0.3em 1em;
      text-align:center;
  }
  td.sample {
      border-right:1px solid #777777;
      border-bottom:1px solid #777777;
      padding:0.3em 1em;
  }

• Example of the display of HTML content

  

To Page Top

(2) When using parameters in HTML parts (when embedding parameters by using the {{param}} format)

An example of how to type an HTML source string into the HTML source string text box in the Attribute Settings window and an example of how a parameter name is converted to a parameter value (an example applicable when a parameter name is embedded into an HTML source string by using the {{param}} format) are provided below.

• Example of parameter names defined in Parameter list

  Parameter name	Parameter value
  caption	table information 1
  title	title 1
  detail1	description 1

• Example of how to enter an HTML source string

<table border="1">
  <caption>{{caption}}</caption>
  <tr>
    <td>title</td>
    <td>{{title}}</td>
  </tr>
  <tr>
    <td>description 1</td>
    <td>{{ detail1 }}</td>
  </tr>
  <tr>
    <td>description 2</td>
    <td>{{ detail2 }}</td>
  </tr>
</table>

• Example of converting the HTML source string

<table border="1">
  <caption>table information 1</caption>
  <tr>
    <td>title</td>
    <td>title 1</td>
  </tr>
  <tr>
    <td>description 1</td>
    <td>description 1</td>
  </tr>
  <tr>
    <td>description 2</td>
    <td></td>
  </tr>
</table>

To Page Top

(3) When using parameters in HTML parts (when embedding parameters by using the {{{param}}} format)

An example of how to type an HTML source string into the HTML source string text box in the Attribute Settings window and an example of how a parameter name is converted to a parameter value (an example applicable when a parameter name is embedded into an HTML source string by using the {{{param}}} format) are provided below.

In this example, the parameter value is a path to a file. Thus, the parameter name is embedded by using the {{{param}}} format so that the HTML special characters (& < > " ' / ` =) inside the parameter value are not escaped.

• Example of parameter names defined in Parameter list

  Parameter name	Parameter value
  img_url	/ucnpuserstaticfiles/img1.png

• Example of how to enter an HTML source string

<img src="{{{img_url}}}" style="{{{img_style}}}" />

• Example of converting the HTML source string

<img src="/ucnpuserstaticfiles/img1.png" style="" />

To Page Top