Tags Define Help Index
Tags Define Overview
The Properties Panel in Sothink HTML Editor helps users enter values of HTML tags easily into the code. When a tag is selected, attributes and events related to the tag will be shown on the panel. Users should only type text, browse to files, click checkboxes or select colors from the color palette on the panel. The corresponding HTML or Javacript codes will be automatically added into the document. Users can remove, rename or add attributes and events of a tag. Click the  icon on top of the Properties Panel to open the Tags Define dialog box.
The Tag List on the left of the dialog includes all the HTML tags. You can add, remove or rename any of them. The Properties List in the middle of the dialog includes all the attributes and Javascript events of the selected tag that will be shown on the Properties Panel. You can arrange the attributes and events in different groups, add, remove or rename attributes and events. The Setting List on the right of the dialog consists of two parts: Attribute Type and Enumerated Value. When you select an attribute in the Properties List, you should define its type(Text, File, Enumerate, Check and Color). For the Enumerate type, values should be entered in the Enumerated Values field.
Add, Remove and Rename Tags
Users can add, remove or rename tags listed in the HTML Tags List.
Add Tags:
Steps:
- Click open the dialog and press the Add button beside the Tags List.
- In the Input dialog box that appears, enter the name of a valid HTML tag
- Click OK and the new tag will be added into the list.
Edit Attributes and Events of Tags
The Properties List includes attributes and Javascript events of a tag selected in Tags list. These attributes and events will be shown on the Properties Panel when the corresponding HTML tag is clicked. Users can configure the Properties List to make it work in their own way.
Add Attributes and Events to Groups
You can add valid attributes and Javascript events to groups. If you want to move an attribute or event from one group to another group, you should delete it from the old group and then add it to the new one.
Set Attributes and Events Styles
An attribute style is the editing style of an attribute or event on the Properties Panel. These styles include File, Enumerate, Text, Color and Check.
File: A Browse button will be put beside the value field with which you can browse to and select a file e.g. "Background", "Href" , "Image".
Text: you can input text as the value of the attribute or event e.g. "Style", "Class", "Width"
Color: you can select a color in the color palette as the value of the attribute or event e.g. "Link", "Bgcolor", "Vlink"
Check: the option is a checkbox e.g. "Bgproperties"
Enumerate: you can define a list of values as selection items for an attribute or event e.g. "Align".
Steps:
-
Select an attribute or event in the Properties List
-
Select a style from the Attributes Setting drop-down list
-
If Enumerate is chosen, enumerated values should be typed into the field below.
E.g. the enumerated values of "Align" should be: Right, Center and Left. 
Example
Figure 1 shows the <BODY> attributes displayed on the Properties Panel. You can add or remove the attributes by using the Tag Define dialog as shown in Figure 2. The editing style of each attribute can be defined by using the Settings command. Figure 3 lists all the <BODY> attributes and their respective editing styles.
Figure 1
|
Figure 2
|
Attribute |
Setting Type |
Vlink |
Color |
Topmargin |
Text |
Text |
Color |
Style |
Text |
Link |
Color |
Leftmargin |
Text |
ID |
Text |
Class |
Text |
Bgproperties |
Check |
Bgcolor |
Color |
Background |
File |
Alink |
Color |
Figure 3 |
|
