HTML

Hypertext Markup Language (HTML) is a set of markup symbols or codes inserted in a file intended for display on a World Wide Web browser page. HTML tells browsers how to format or present the information they display. HTML markup symbols or codes are commonly referred to as tags, and usually are present in pairs that form a beginning tag and an ending tag.

Domino supplies an integrated Web server that renders Domino databases or HTML files to the Web. Domino databases are translated into HTML before they are rendered to the Web, and if the request is for an HTML file, Domino passes it directly, using the HTTP protocol.

Designers can include HTML on forms, subforms, form elements, pages, and views in many ways, including these:

  • Code or paste HTML directly into the design element and set as pass-thru HTML.

  • Select Domino elements, such as fields or tables, and use the new Convert to HTML function.

  • Import an existing HTML file that is translated from HTML automatically.

Rendering HTML in Applications

Including HTML in an application is simple. Table 16.2 lists methods for coding, pasting, and importing HTML into a form, subform, or page.

Table 16.2. Rendering HTML
MethodDescription
Enter HTML directlyHTML can be entered directly into your application by following these steps:

  1. Open the design element (form, page, or subform).

  2. Enter the HTML code.

  3. Highlight the HTML code.

  4. Under the Text menu, Select Pass-Thru HTML or enclose the HTML code in square brackets [<br>].

Paste HTMLHTML can be pasted into your application by following these steps:

  1. Highlight and copy the content from the source you want to copy. This can be from an existing Domino form or HTML file, or you can choose View, Source on a Web page.

  2. Open the Design element into which you want to paste the HTML code.

  3. Select Edit, Paste, or Ctrl+V.

  4. Highlight the HTML code.

  5. Under the Text menu, select Pass-Thru HTML.

Import HTMLHTML can be imported into your application by following these steps:

  1. Open the design element (form, page, or subform).

  2. From the menu choose File, Import.

  3. Select the HTML file you want to import and click OK.

  4. Domino translates the HTML into design elements onto your form, subform, or page.


Using HTML for Notes and Web Access

HTML code can be used with both Web and Notes clients. Designers need to set up HTML code differently for each client to render properly.

HTML code renders as plain text if not set correctly. For Web clients, HTML needs to be set as pass-thru; otherwise it is translated as static text. You can set HTML as pass-thru from the text menu or by using square brackets.

Rendering to Notes has the same problem; HTML is rendered as static text unless designated as pass-thru. To designate HTML as pass-thru, open the Info tab of the Form or Page properties; in the Options section, check Render pass through HTML in Notes. Designers may not want to render the HTML code on the Web; in this case, they can choose to hide the paragraph.

Rendering HTML to Notes does not work if designers use the square brackets to pass-thru the HTML code.


Using the HTML Editor

HTML editor is a new function with Domino 6. Designers can now convert their design elements into HTML and view them through the HTML editor. The HTML editor acts just like the Programmer's Pane with color-coding and auto-complete, as shown in Figure 16.3.

Figure 16.3. HTML Editor.

[View full size image]

To convert your elements into HTML for viewing in the Editor, follow these steps:

1.
Select the elements you want to convert.

2.
Choose Edit, Convert to HTML from the menu.

Not every Notes element has an equivalent in HTML. The translation to HTML is an approximation and may not be exact. If something did not convert correctly, use Edit, Undo Delete to recover, not Edit, Convert to Notes.


3.
Place your cursor anywhere in the HTML source code and from the View menu, choose HTML pane. This starts the HTML Editor. The screen splits with a Work pane on top and a Programmer's Pane on the bottom.

4.
Using the bottom pane, edit the HTML source code and click the Refresh button to see the changes.

5.
Press the Esc key to exit from the HTML Editor. You can convert back to Notes by choosing Edit, Convert to Notes Format but may get unexpected results (see the previous Note).

Creating HTML Fields on Pages Using Computed Text

You can prevent users from creating documents by giving them Reader access in the database ACL. You can allow users to create documents by giving them Author access with Create document privileges in the ACL. For security reasons, designers may want to allow only Reader access to the database, but still allow Web users to submit data.

An easy way to accomplish this task is to use pass-thru HTML on a page to create fields that allow users to submit data with only Reader access assigned in the ACL. Designers know that Domino fields can't be created on a page. HTML input fields, however, can be used.

Understanding an HTML Page and Its Format

The HTML page has two main parts—the Head and the Body. The Head is defined with a <head> tag and the Body is defined with a <body> tag. Some of the information contained in the Head area includes

  • The scripting language that is being used, such as JavaScript. The scripting language is identified by a <script> tag.

  • The browser's window title, defined with a <title> tag. Programming the Domino Window Title event will translate to an HTML <title> tag.

The body tag has many attributes to which most Domino elements translate directly. The body area of an HTML page contains information about elements such as text, graphics, or links, and these elements' format tags, which will display on the Web.

A sample of HTML code shows some of these tags:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>HTML Test of Browser Window Title</title>
<script language="JavaScript" type="text/javascript">
<!—

Additional code goes here:

// —>
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF">
<form method="post" action="/dlb/Home.nsf/htmltest?Open Form &amp;Seq=1" name="_htmltest">
<input type="hidden" name="__Click" value="0"><br>
<input name="myname" value="">
<br><br>
<input type="file" name="%%File.85256c4800698246. be7b1f42a521085785256d9e001fb58c.$Body.0
.118"><br>
<br>
<input type="button" value="submit" onclick="return _doClick('85256C4800698246
.be7b1f42a521085785256d9e001fb58c/$Body/0.156', this, null)">
<br>
</form>
</body>
</html>

Using HTML in Views

Designers can store HTML in view columns to change default column and row settings. To store HTML in view columns, check the Treat view contents as HTML option on the Advanced tab of the View Properties and add the code to the Programmer's Pane. The following example adds HTML code to display a graphic:

@If(Status="Past Due";"[<img src=/overdue.gif border=0>]";"")

Domino views do not always render to the Web in the expected format, for example, with the expected spacing between columns. By adding HTML to the view, you can add spacing between columns. The HTML code must be added to two places in the column—the Title text field in the Column properties dialog box and the Column Value in the Programmer's Pane, as shown in Figure 16.4.

Figure 16.4. HTML code in View column.

[View full size image]

Notice that the HTML code in the Programmer's Pane for the Column Value is enclosed in quotes and the HTML code in the Column Title is not enclosed in quotes. In addition, the Treat View Contents As HTML option still needs to be selected in the Advanced tab of the View properties box.

Using HTML in Tables

Tables can be created with pass-thru HTML, or enhanced if you add pass-thru HTML within an existing Domino table (such as when creating a nested table). In addition, as shown in Figure 16.5, HTML can be added to the Table Properties on the Table Programming (<@>) tab.

Figure 16.5. Table Properties <@> tab.


Increasing the thickness of a table border has no affect when the table is rendered on the Web. Table borders are translated to the Web simply as “on” or “off.” Table border color doesn't translate to the Web, either. If these border attributes are required, you can add attributes of the <table> tag (Table HTML Tags section) or <td> tag (Cell HTML Tags section) to the Other field on the <@> tab of the Table Properties. Table 16.3 lists some of the attributes of the <table> or <td> tag.

Table 16.3. <table> and <td> Tag Attributes
AttributeDescription
borderChanges the size of the table border. Add this to the Table tag.
bordercolorChanges the color of the table border. Add this to the Table tag.
cellspacingChanges spacing between cells in pixels. Add this to the Table tag.
cellpaddingChanges the spacing, in pixels, between the cell contents and its border. Add this to the Table tag.
colspanMerges cells across multiple columns. Add this to the Cell tag.
rowspanMerges cells across multiple rows. Add this to the Cell tag.
heightChanges the height of all cells in the table or row, depending on whether added to the Table or Cell tag.
widthChanges the width of all cells in the table or column, depending on whether added to the Table or Cell tag.

Working with HTML Attributes on Fields

Domino Designer enables you to add HTML attributes to fields in two places: on the Field Extra HTML (<html>) tab of the Field Properties dialog box or to the Field Objects HTML Attributes event. To add HTML to the <html> tab, follow these steps:

1.
Open the Field properties and click on the <html> tab. (The <html> tag is discussed in detail in Chapter 14.)

2.
Enter your HTML code in the HTML Tags: Other field. Do not enclose HTML code in quotes.

3.
Save and close the form.

To add HTML to the Field Objects HTML Attributes event:

1.
Click on the field.

2.
Select the Field's HTML Attribute event.

3.
In the Programmers Pane write your HTML code enclosed in quotes.

4.
Save and close the form.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.225.98.111