Understanding the Basics of HTML
HTML is a fairly simple structured language used to display documents to a Web browser. Tim Berners-Lee developed it at CERN, the European Laboratory for Particle Physics in Geneva. HTML grew out of SGML, or the Standard Generalized Markup Language, a standard for describing markup languages. SGML began as GML, or the Generalized Markup Language. It was an attempt by IBM in the 1960s to create a standard to port documents across systems. It is generalized because it does not define an exact standard to present or format documents. Instead, it defines document types and different kinds of markup languages that define these document types. The term markup is inherited from the publishing industry and describes the typesetting instructions for formatting a document. GML became SGML in 1986 when it became a standard by the International Standards Organization. The current version of HTML is 4.0, as defined by the World Wide Web Consortium (W3C).
The HTML language is based on tags, which are similar to commands in other languages. Tags define the way elements should be formatted on the screen. Tags consist of a left angle bracket ( < ), a tag name , and a right angle bracket ( > ). HTML is not case sensitive, so the tag
is no different from
.
Two kinds of tags exist: container and standalone. A container tag can contain text or other tags and has a beginning and an ending tag. Container tags are paired (such as
and
) to start and end the tag instruction. The end tag looks exactly like the start tag, except that a slash ( / ) precedes the text within the brackets. For example, the following line of code centers text:
This is centered text!
Standalone tags are self-contained. For example,
creates a horizontal line:
Tags define and present elements. An element is a fundamental component of the structure of a text document. Some examples of elements are heads, tables, paragraphs, and lists. See the section titled "The HTML Document and Document Tags" for additional details.
NOTE
Many excellent books and a number of resources on the Web are devoted to HTML. The latest HTML 4 specifications can be found at www.w3.org/TR/REC-html40.
Whenever you launch a Web browser and point it to a World Wide Web site, you are looking at a document presented with HTML. HTML documents themselves are just plain-text files that you can create using any text editor. Most browsers have a menu choice that lets you view the source of a Web document. If you take a look, you can see the raw HTML source. Even though the language itself is fairly simple, it can be a daunting task to create a Web site or even a single HTML document from scratch. Consequently, plenty of editors are available that can create HTML documents. Domino Designer is not exactly like other editors for HTML, but coupled with the Domino server it can essentially become an HTML editor.
The HTML Document and Document Tags
Several tags are always present in HTML documents that essentially define the document. The first tag is always
, and because it is a container tag, the last tag is always . The , , and tags usually follow the tag. A basic structure for an HTML document might be the following:
document title... Other tags... Document content
It is easy to see this structure by viewing the HTML source of a Web document. The database for this chapter, Chapt20.nsf, contains a form titled Simple HTML. It consists of some text at the top and a single field (see Figure 20.1).
Figure 20.1. The window title in this simple form appears in the
tag.
To view the source, first preview the form or a document created with the form in a Web browser. Use the following steps:
- Open Chapt20.nsf in Domino Designer.
- Open the Simple HTML form design.
- Click the Domino Preview icon in the upper right. Or, from the menu, choose Design, Preview in Web Browser, Notes Browser. When the form opens, it is in the Notes browser.
- From the menu, choose View, Show, HTML Source.
- The source displays in its own window (see Listing 20.1).
The nice thing about using Notes to display the source is that it color-codes the HTML in the same way that LotusScript, JavaScript, and the Formula language are color-coded in the Programmer's pane. Although Listing 20.1 is not in color , it shows the basic elements of an HTML document.
Listing 20.1 HTML Source for the Simple HTML Document
Simple HTML Document
NAME="_SimpleHTML"> Simple HTML
You should quickly notice that Domino has generated all this nice HTML code without any intervention on your part, from a form that took all of a minute or so to create. Typically, you won't have to interact at all with any of these tags; they are generated automatically by Domino for you. Table 20.1 lists commonly used document-level tags.
Table 20.1. Document-Level Tags
My Frameset Example
Once the first code page is successfully processed, the frameset page is called, as shown in Listing 20.5. This frameset code uses JavaScript to maximize the browser's window size, place a welcome note on the status bar, and launch the Web application.
Listing 20.5 The Frameset HTML Code
My Web App v3.0100%"-> src=[1] noresize scrolling="on" >
[1] The src=computed value's formula code for this iteration is ""/" + @ReplaceSubstring(@Subset(@DbName;-1);"\";"/") + "/Welcome?OpenForm&BaseTarget=_new""
The previous example code goes one step further after maximizing the window by calling a final launch page that is actually a Domino form where the user logs in. As you can see, Domino provides the canvas and tools to create your own not-out-of-the-box applicationyou are limited only by your imagination and time, of course. No matter how you approach your application design, Domino is flexible enough to get it done either by using its defaults, wizards or by allowing you to create your own.
Cascading Style Sheets
New to Domino 6, Cascading Style Sheets (.CSS files) are treated as a shared resource and provides a category listing for them under Shared Resources on the IDE, as shown in Figure 20.4. They can be easily added to and removed from the database in any text file format. However, .CSS is the standard file extension naming convention developed by the W3C. Style sheets can also be added directly inline on a page, form, or subform; they also can be embedded into the
| Tag | Type | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Container | Indicates that the document is HTML. | |||||||||
| Container | Follows the | tag and can contain other tags, such as | , | , | ,
The outer frameset splits the screen in two, with 20% in the top row. The top row is then split into two frames: the LogoFrame and the BannerFrame. Similarly, the bottom row is split into two frames: the NavFrame and the ContentFrame. The tag is used to both name the frames and add content. In this case, the content is four pages in the same Domino database. The syntax of standalone tag is the following:
The SRC attribute in this example is a Domino URL (discussed in the section titled "Adding Power with Domino URLs") that points to a page in the database. The NAME attribute is easily understood , containing names for the frames such as LogoFrame, ContentFrame, and so forth. A FRAMEBORDER set to turns off the border for the frame. MARGINWIDTH and MARGINHEIGHT are the number of pixels for the margin inside the frame borders. NORESIZE prevents the user from dragging the border of the frame to a new position, and SCROLLING controls the ability of the user to scroll the content within the frame. Figure 20.3 shows the frameset created by Listing 20.3. Figure 20.3. This frameset, from Listing 20.3, splits the window into four frames. Table 20.4 also lists several reserved names for frames. These reserved names can be used with the |
tag in the form | or with the Domino URL argument &BaseTarget . In Listing 20.3, the NavFrame points to the ContentFrame with the Domino URL argument &BaseTarget=ContentFrame . The effect of this is to direct any links in the NavFrame to open in the Content Frame. A typical use for this is to embed a view in the page displayed in the NavFrame. The documents would then open in the ContentFrame. You can achieve the same effect by placing the HTML | into the Navigation page.
This section hopefully provides you with some insight into how framesets are constructed in their native HTML. You might find this information useful as you construct your own framesets, or you might find it helpful in enhancing framesets that you create. More Than Four or Manual Intervention Sometimes you might need to create a frameset that contains more than four frames (the Domino maximum setting in the Frameset Wizard), or you need manual control over the frameset code itself. Access to the Frameset Domino code properties is limited in the InfoBox, and you might need to extend the capability of the frameset using HTML or other script. This can be accomplished by creating a page for your frameset and coding the frameset yourself. The code in Listing 20.4 shows the initial frameset code in a page that calls the subsequent frameset page to launch a Web application. This page actually checks to make sure that the application is being accessed by a specific browser. If the browser is not the type or version needed to run the application, an error page is displayed to the user indicating what's wrong. If the correct browser and version are being used, the frameset welcome page is called. Listing 20.4 Using a Page, You Can Add the Frameset Code to the Page Manually; This Is the Initial Launch Page of the Web Application
|
event of any page, form, or subform. The term cascading is used because Web browsers follow a set of rules in an ordered sequence to determine a document's presentation. For further information on style sheets, consider reviewing Chapter 7, "Using Shared Resources in Domino Applications," where style sheets are covered in detail.
Figure 20.4. Style sheets are now a shared resource in Domino 6. |