Correspondences of common elements

When you insert
a control, or choose a paragraph or character style to include on
your page, PowerBuilder adds HTML syntax to Source view that enables Web
browsers to render the object or style selected.

Headings and paragraphs

You can add headings and paragraphs to your page from a dialog
box that you open from Page view or Source view with the Format>Paragraphs
menu command. The paragraph styles in the Format Paragraph dialog
box for headings and paragraphs include:

Table 3-5: Format menu
items for paraghaphs and headings

Paragraph style in Page view	HTML tag in Source view	Description
Normal	<P></P>	A standard paragraph
Formatted	<PRE></PRE>	A paragraph that preserves extra white space and is usually displayed in a monospaced font
Address	<ADDRESS> </ADDRESS>	Usually displayed in italic
Heading 1 to Heading 6	<H1></H1> to <H6></H6>	Headings of various levels

Other styles in the Format Paragraph dialog box can be used
to format lists. For information about formatting lists, see “Lists”.

To create a heading in Page view:

1. Type the heading text and leave the insertion
   point in the heading paragraph.

2. Select Format>Paragraph from the menu
   bar.

3. In the Paragraph Style list box, select one of
   the heading styles (Heading 1 through Heading 6).

To create a heading in Source view:

1. In the Body section, select the heading
   text.

   or

   Put the insertion point where you want the heading to
   appear.

2. Select Format>Paragraph from the menu
   bar.

3. In the Paragraph list box, select one of the heading
   styles (Heading 1 through Heading 6).

4. After you click OK, the Header Properties dialog
   box appears. Add text if new, change the properties if you want,
   and click OK.

To format text with a paragraph style in Page
view:

1. Type at least some of the paragraph text
   and leave the insertion point in the paragraph.

2. Select Format>Paragraph from the menu
   bar.

3. In the Paragraph Style list box, select one of
   the paragraph styles.

To format text with a paragraph style in Source
view:

1. Select all the text of the paragraph.

   or

   Put the insertion point in the Body section where you
   want the paragraph to appear.

2. Select Format>Paragraph from the menu
   bar.

3. In the Paragraph Style list box, select one of
   the paragraph styles.

4. After you click OK, the Paragraph Properties dialog
   box appears.

   Change the properties if you want to and click OK.

5. If you didn’t select the paragraph text
   in step 1, type the text now between the paragraph’s start
   and end tags.

Lists

There are several list
types available in the Format>Paragraph dialog box. The basic
types are numbered and bulleted. In most browsers, Menu and Directory List
styles also appear as bulleted lists.

Table 3-6: Format menu
items for lists

Paragraph style in Page view	HTML tag in Source view	Description
Numbered List	<OL><LI> </LI></OL>	An ordered list
Bulleted List	<UL><LI> </LI></UL>	An unordered list
Directory List	<DIR><LI> </LI></DIR>	A directory list
Menu List	<MENU><LI> </LI></MENU>	A menu list
Definition Term	<DL><DT> </DL>	The definition term in a definition list
Definition	<DD>	The definition value in a definition list

If you do not see the formatting you specify, you must make
sure that list item tags (<LI>) precede each item
in a regular (ordered or unordered) list. For a definition list,
you must make sure that the correct definition tags (<DT> or <DD>)
precede all the terms and definitions in the list. You must verify
the positioning of the tags in Source view.

The two-part definition lists are more complicated. Procedures
for using them are described separately.

Ordered and unordered lists in Page view

To create a new list:

1. With the insertion point in an empty paragraph,
   choose Format>Paragraph from the menu bar and select the
   type of list you want.

   The editor inserts a number or a bullet.

2. Type the item text and press enter.

   The editor inserts another numbered or bulleted paragraph.

3. Continue typing items and pressing enter.

   If you press enter with the insertion point at the end of
   any list item, the editor inserts another item.

4. When you have finished, end the list by pressing
   enter in an empty list item.

   The editor removes the last empty bullet or number and changes
   the paragraph style to Normal.

To change paragraphs into list items:

1. Highlight a group of paragraphs.

2. Select Format>Paragraph from the menu
   bar and choose the type of list you want.

Definition lists in Page view

Each item in a definition list has two parts: the term or
phrase being defined, and the definition.

To create a definition list:

1. Type the first term.

2. With the cursor in the term paragraph, select
   Format>Paragraph from the menu bar and select the Definition
   Term paragraph style.

3. Back in the editor, press enter and
   type the term’s definition.

4. In the editor, press enter and
   repeat the steps to create terms and definitions.

   or

   Press enter twice to end the list.

Typing definitions and formatting paragraphs in separate
procedures Each time you press enter, you create another
element of the same type. If you’re in a Definition Term,
pressing enter creates another term. Instead
of formatting each paragraph right after you type it, you can apply
formatting as needed to selected paragraphs.

Lists in Source view

For regular lists The Format Paragraph dialog box inserts the list container in
your document. You must insert LI elements for each list item.

For definition lists The Format Paragraph dialog box inserts DL, DT, and DD elements
when you choose the Definition Term and Definition styles. You may
have to type one or more of these elements directly in the source
code.

To insert the list container:

1. If the list items are already in the document,
   select all the items.

   or

   Put the insertion point in the body where the list should
   be.

2. Choose Format>Paragraph and select a
   list style.

   When you click OK, the properties dialog box for the list
   appears. The list style name shown matches the element, not the
   styles of the first dialog box. (For example, Numbered List is now
   called Ordered List for the OL element.)

3. Set properties if you want to and click OK.

4. For regular lists, add <LI> tags
   before the list items.

   For definition lists, make sure <DT> and <DD> tags
   are included before the appropriate definition list items.

Character formatting

You can apply character formatting
to selected text, or you can choose settings so that the formatting
applies to the next text you type.

To change font characteristics:

1. Select Format>Character from the
   menu bar and specify settings in the Font dialog box.

   Applying simple formatting The Format Character dialog box always inserts the FONT element,
   even if you want only to turn on bold or italic. Use keystrokes
   or toolbars to apply simple formatting.

Inserting special symbols

Insert Symbol can be used in Source or Page view.

To insert special symbols or accented characters:

1. Set the insertion point in Source view
   or Page view.

2. Select Insert>Symbol from the menu bar.

3. In the Insert Symbol dialog box, select a symbol.

   The named entity or numeric value of the symbol displays in
   the Equivalent Escape Sequence box.

4. Click OK.

Links and anchors

When you type a URL that uses an HTTP protocol directly in
Page view, the editor automatically turns it into a hyperlink. If
you want to display different text for the hyperlink, you should
use the following procedure.

To create a hyperlink:

1. Select
   the text that you want to display for the link or set the insertion
   point where you want to add the link.

2. Choose Format>Hyperlink from the menu
   bar.

   The Hyperlink Properties dialog box displays.

3. If you did not select text in step 1, type the
   text you want to display for the hyperlink in the Text of the Hyperlink
   text box.

   You cannot type text if you selected text in step 1. Instead,
   the Text of the Hyperlink text box is grayed, and it displays the
   text that you selected.

4. Enter the URL for the link in the Destination
   text box.

   or

   Click the browse button to open the Choose URL dialog
   box.

   When you click OK, the selected text becomes a hyperlink and
   is underlined. In Source view, you can enter the link ID and text
   between the A tags.

To create an anchor that can be a target of a
hyperlink:

1. Select text or set the insertion point
   where the anchor should be.

2. Choose Format>Hyperlink from the menu
   bar.

3. Click the Advanced tab and type the attribute
   name in the left column and the value (name) of the anchor on the
   right. Include quotes around the value.

To link to an anchor within your document:

1. Select the text that will be the link.

2. Choose Format>Hyperlink from the menu.

3. In the Link text box, type a pound sign (#)
   followed by the anchor name.

To transform a URL into a hyperlink:

1. Enter
   the URL in your document followed by a space. The URL does not need
   to be complete — just enough for the editor to recognize
   it as a URL. The text will be turned into an underlined active link
   target.

2. Edit the underlined text if you want to.

Spaces in link text If you select the link text and begin typing, you replace
the selected text as usual. When you type a space, the editor takes
you out of the link so that you can type normal text. To create
link text that includes spaces, you can:

• Type
  the text with no spaces and insert the spaces afterward.
• Type the text with spaces, then cut the text that
  is no longer part of the link but should be, and paste it at the
  end of the link.
• Select all but the first or last character of the
  displayed URL, type the link text, then delete the non-selected
  characters from the URL when you have finished.

Correcting link problems When you paste a relative link into Page view, the extra text about:
might
sometimes appear in the HREF. If this happens, use Source view to
remove the extra text.

More complex formatting

Forms

The Insert
menu has items for several types of form fields. The menu items insert
the HTML elements displayed in the following table:

Table 3-7: HTML elements
added to Web page by Insert menu items

Menu item	HTML element
Single Line Text	Input TYPE=TEXT
Text Box	Textarea
Text (for 4GL pages only)	Object
Check Box	Input TYPE=CHECKBOX
Radio Button	Input TYPE=RADIO
List Box	Select
Push Button	Input TYPE=BUTTON, SUBMIT, or RESET
Image Button	Input TYPE=IMAGE
DataWindow	Object

If you insert any of these items into a non-4GL page, FORM
tags are also inserted automatically–as long as the insertion
point is not already inside a FORM element. In Page view, you can
add the FORM element yourself by selecting all the fields you want
to include in a form, then dragging the FORM element from the Language
tab of the System Tree to the selection.

Do not add FORM tags to a 4GL-enabled Web page When you work with a 4GL page, the page itself is a form,
and therefore all forms are submitted as a single form. Existing
FORM tags must be manually removed from a 4GL page.

To insert form fields:

1. Select Insert>Form Field from
   the menu bar and select a type of form field from the cascading
   menu.

2. Add text to the form by typing before and after
   the inserted fields.

   If you are working in Page view, check Source view to make
   sure text and fields are nested correctly inside the FORM element.

Tables

Adding new tables

You can use the Table wizard
to add a table to your Web page.

To insert a table:

1. Select Table>Table Wizard from
   the menu bar.

2. Use the Table wizard to specify the number of
   rows and columns and to specify formatting for the table, individual
   rows, and individual cells.

3. Type the content of cells in the Create Table
   dialog box or directly in the document.

Reorganizing existing tables

You can manipulate rows, columns, or cells in an existing
table from the Table menu or from a pop-up menu when you right-click
on the table items you want to modify. Table actions are available
only in Page view.

Table 3-8: Actions for
manipulating table rows, columns, or cells

Action	What it does
Insert Row	Inserts a new row above the current one.The new row will contain the same number of cells as the current row, with the same COLSPAN attributes, cell attributes, and styles.
Insert Column	Inserts a new column to the left of the current one.The new column will contain the same number of cells as the current column. The individual cell attributes are copied cell for cell from the current column to the new one.
Insert Cell	Inserts a single cell to the left of the current one.If your selection includes more than one cell, the current cell is defined as the one that’s leftmost and topmost in the selection. When the new cell is inserted, individual cell attributes are copied from the current cell to the new one.
Delete Row	Deletes the selected rows.If your selection includes more than one row, all rows containing any portion of the selection will be deleted. It is not necessary to select the entire contents of a row.
Delete Column	Deletes the selected columns.If your selection includes more than one column, it must be within a single row. All columns containing any portion of the selection will be deleted. It is not necessary to select the entire contents of a column.
Delete Cell	Deletes the selected cells.If your selection includes more than one cell, all cells containing any portion of the selection will be deleted. It is not necessary to select the entire contents of a cell.
Merge Cells	Merges two or more cells into a single cell.All cells containing any portion of your selection will be merged. It is not necessary to select the entire contents of a cell. When cells are merged, their contents are concatenated in the remaining cell. The merged cells assume the attributes of the cell that was leftmost and topmost in the selection.
Split Cell	Splits one cell into two.The selected cell is split horizontally–an empty cell is added to its right.

To manipulate rows, columns, or cells in an existing
table:

1. In Page view, highlight text in the rows,
   columns, or cells you want to manipulate.

2. Select Table from the menu bar.

   or

   Right-click the highlighted text and select Table from
   the pop-up menu.

3. Select the menu item for the action you want from
   the Table menu.

   The overall table width is not altered when you perform any
   of the table actions. Instead, the cell widths are adjusted. When
   you are working in Page view, table cells may appear equal in size.
   By selecting the table and using the mouse, you can expand or shrink
   the width of the columns.

Other formatting

To use absolute positioning for elements on a page, see “Absolute positioning”. To add images,
components, and other non-text content, see Chapter 5, “Working with Images, Other Media
and Components”.

---