Common HTML Elements
HTML tags are the special characters that instruct text to become stylized differently than other text within the same text. The following table describes the most common HTML elements that you can use within Ignition.
|<html>...</html>||Initiates an html formatting. In most cases closing the html with </html> is optional.|
|<b>...</b>||Bold||Applies a bold style to the contents of these elements.|
|<br>||Break||Applies a line break at this specific location.|
|<li>...</li>||List Item||Used to represent a list item. Should be contained in an order list (<ol>) or unordered list (<ul>).|
Places the text into an ordered list. Text inside list items are ordered by number.
|<ul>...</ul>||Unordered List||Places the text into an unordered list. Text inside list items are ordered by bullets.|
|<u>...</u>||Underline||Underlines the text contained within the elements.|
|<center>||Center||Centers the contents of the text. Used directly after the HTML tag (that is, <html><center>...)|
|<font color="red">...</font>||Font||Colors the contents red. Works with standard color names, hex numbers, or RGB numbers.|
Applying HTML to Components
In Ignition, you can add HTML to the text property of any component such as, a label, button, or table.
Adding HTML into a Label
Suppose you want to make a label appear like this: This is a bold word
- Create a label on your window.
- Select the label's text property and enter the following text:
<html><b>This is a <b>bold</b> word
Adding HTML into a Button
Suppose you want to make a button appear with the following words: Stop the Process.
The word "Process" starts on a new line. Also, the words must be centered on the button.
- Create a button on your window.
- Select the buttons text property and enter the following text:
<html><center>Stop the <br><font color="red">Process</font>
Adding HTML into a Component's Mouseover Text Property
The mouse over text property creates a popup when the user places their mouse over the component for an extended period of time. The mouse over text is an excellent way of giving the user additional information. The mouse over text property also handles HTML formatting.
Suppose you want a list of instructions to appear in the mouse over text of a component as the following:
To create this type of mouse over text, do the following:
- Create or choose a component on your window.
- Select the components mouse over text property and select the property's text editor icon (
) to edit the text.
Enter the following text:
Note that this technique allows you to format the text across multiple lines. Line breaks do not occur unless they are explicitly declared with the <br> element or the component wraps the contents because of the lack of space for its contents.
Adding HTML into a table
The contents of a table will render HTML formatting. The HTML formatting has to be part of the specific cell. If you want to have HTML formatting affect all rows of the data then it will be necessary to concatenate the HTML markup into the source of the data that is populating the table.
Suppose that you wanted to edit a cell of a table in order to render its contents with HTML formatting. Simply access the table's underlying data and enter the HTML formatting into the cell that you would like to format. The same techniques used for HTML formatting throughout Ignition apply to the cells of a table as well.