What is HTML?
What exactly is HTML? It is not a programming language, but a rather a markup language for formatting and displaying Web documents and pages. It is the most commonly used markup language for Web pages today.
The more we understand both the principles and applied usage of the HyperText Markup Language (HTML) and to an extent, other markup languages such as XHTML that find their roots in HTML, the more we can use it to deliver flexible and rich functionality to our Domino Web applications. In this section, we review the fundamentals that, when mastered, give you the base tools to expand your Domino Web applications beyond previously conceived limitations.
HTML is simple text markup (Content type: text/html). It consists of a combination of various objects that Web browser clients commonly interpret based on a defined standard. These various objects consist of elements, data types, and character and entity references. As Domino Web Developers, we leverage these objects to render the display, facilitate the maintenance, and extend the functionality of our Domino Web applications.
Basic HTML Web page structure
In this section, we review the basic element and standard attribute construct of HTML for Web pages. The following example shows Web page markup.
<!DOCTYPE HTML PUBLIC "- "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
The first line in the previous example defines the DOCTYPE for this particular Web page or document. The DOCTYPE declaration is translated by the Web browser client and defines the standard specification that the document uses.
The <html> tag simply defines this Web page as an HTML document.
The <head> tag is used primarily to define back-end information for the document, and is not displayed to the Web Browser client screen at run time. This is an example of a container element, which is used to store other functional and document information such as (but not limited to) <meta>, <script>, <style>, and <link> tags and elements.
The <body> tag is the container element used to display the visual contents of the HTML document. This element may not only contain visual elements such as (but not limited to) <p>, <div>, <span>, and <object> tags and elements, but can additionally contain <script> and <style> tags and elements.
The <p> tag is a visual container element that is typically used to display text paragraphs and other such content.
Simple XHTML Web page example
In this section, we review the basic element and standard attribute construct of XHTML for Web pages. We immediately recognize the format, as XHTML is simply a more structured and flexible extension of standard HTML. The following example shows simple XHTML Web page markup.
<!DOCTYPE html PUBLIC "- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http: xml:lang="en" lang="en">
<head>
<title>Simple XHTML Webpage Example</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
In this example, we include the XHTML required attributes to the basic DOCTYPE and <html> tags as well as included a <title> tag, which is used define the title of the document. In most Web browser clients, the contents of the <title> tag is displayed as the Window Title of the given Web browser client instance.
While there are other tags and elements, understanding how these basic tags and elements both interact with each other and render in the Web Browser client eventually gives us the ability to completely control the visual look and dynamic function of our Domino Web applications.
Elements and attributes
In this section, we review the basic tag schema for elements and their various attributes. The following example shows the standard tag and attribute schema.
<tagname attribute1="attributevalue1" attribute2="attributevalue2">_</tagname>_
An end or closing tag, which is highlighted in the above example, can be optional based on the given tag element. For example, while the <script> tag requires a end/closing tag, the <body> tag does not require an end/closing tag. Certain markup tags explicitly require that you do not use an end/closing tag, such as the <link> element.
See the Index of the HTML Elements
from the W3C for a complete list of elements and the HTML /XHTML Reference from W3C Schools for more detailed information.
Basic markup
In this section, we review some of the more common tags used in an HTML page.
Common tags
You will consistently use the tags that are highlighted in the following table and therefore must be familiar with them.
| HTML tag |
Comments |
| <meta /> |
Meta tag used in html header. Meta data is used to describe the Web page.
<meta name="Keywords" content="description" /> |
| <a></a> |
Anchor tag, used to redirect user to a different Web page.
<a href="url of web page" >link text displayed on page</a> |
| <div></div> |
Division tag, used to define a block of HTML and apply specific CSS or style attributes to it.
<div id="id of division">text displayed on page</div> |
| <span></span> |
Span tag, used to define a block of HTML and apply specific CSS or style attributes to it. Used for inline content.
<span id="id of span">text displayed on page</span> |
| <img /> |
Image tag, used to include an image or image map on Web page.
<img src="image file name" alt="alternate text that describes image" width="width" height="height"/> |
Formatting text
As you work with HTML, format text by using a CSS stylesheet. You can find information about CSS markup in the Styles and CSS Primer in this guide. Some tags can be used in conjunction with CSS for flexibility in overriding the CSS in the marking of specific text or can be used without CSS. The following table shows a subset of formatting tags that can be useful.
| HTML tag |
Comments |
| <strong></strong> |
Strong tag. Used to make text bold.
<strong>text</strong> |
| <big></big> |
Big tag. Used to make size of text bigger.
<big>text</big> |
| <small></small> |
Small tag. Used to make size of text smaller.
<small>text</small> |
| <p></p> |
Paragraph tag. Used to delineate and define a paragraph.
<p>text</p> |
| <br /> |
Line break tag. Used to define a new line.
<br /> |
Creating tables
The use of tables in formatting and displaying content data is invaluable on any Web site. To create a table, use the tags listed in the following table.
| HTML tag |
Comments |
| <table></table> |
Table tag. Delineates the start and end of the table. |
| <th></th> |
Table header tag. Defines the row that serves as the the table header row. |
| <tr></tr> |
Table row tag. Defines any row that serves as a table data row. |
| <td></td> |
Table data tag. Defines a column and the data that goes in it. |
As an example, if we were to code a two row and two column table, it might look something like the following example.
<table>
<th> <td>header for column 1</td>
<td>header for column 2</td>
</th> <tr> <td>data for column 1</td>
<td>data for column 2</td>
</tr> </table>
Here is another example, with the more recent table tags.
<table>
<thead>
<tr>
<td>header for column 1</td>
<td>header for column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>data for column 1</td>
<td>data for column 2</td>
</tr>
</tbody>
</table>
Functional markup
In this section, we provide a simple overview of HTML tags and elements that, when rendered in a Web browser client, have built-in functionality. In the HTML Form Element section, included as part of the form tag, we see an example of HTML functional markup: the <input>-based Submit button.
The following table shows several examples of functional markup.
| Functional markup example |
Result when rendered in Web browser client |
| <input type="submit" value="Submit" /> |
A simple button, with a label of Submit, that processes the user data input gathered by the HTML Form element against the HTML Form Element's processing agent that contains this button. |
| <input type="reset" value="Clear" /> |
A simple button, with a label of Clear, that blanks all field elements in the HTML Form element that contains this button. |
| <input type="file" name="%%File1" /> |
Renders a File Upload Control element object that allows the user to browse and select a single file on the local system for processing. |
The HTML Form Element
The HTML Form Element is a functional element, created from the combination of the <form> tag with other elements such as (but not limited to) the <input>, <textarea>, and <select> tags. The purpose of the HTML Form Element is to gather user input and submit that information to a data processing engine via methods defined in the attributes of the given Form element. The following example shows a simple HTML Form Element.
<!DOCTYPE HTML PUBLIC "- "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML Form Element Example</title>
</head>
<body>
<form action="_processing agent_" method="_form processing method_">
<input type="text" name="test" value="" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
In the previous example, the information that is entered in the test <input> element by the user is submitted to the HTML Form Element's processing agent - defined in the <form>'s action attribute - after the user clicks the Submit <input> tag, which is rendered in the Web browser client as a button.
The HTML Form Element's method attribute, which has the value of "GET" or "POST", is the means to which the data from the HTML Form Element is submitted to the <form>'s processing agent, which again is defined in action attribute. The method attribute is often defined based on the requirements of the particular HTML Form Element, or the capabilities of its processing agent.
Understanding the basics of the HTML Form Element is absolutely vital to the Domino Web Appplication Developer. Mastery of the HTML Form Element allows you to extend the creation and maintenance capabilities of data in your Domino Applications, providing your target user audience with extended functionality that otherwise was not thought possible with Domino Web applications.
Working with HTML in Domino
Domino Designer facilitates adding HTML to your Domino Database. Working with HTML in Domino can be easy provided that you understand the basic rules for how to incorporate HTML into your database and understand how Domino renders HTML in a Web browser.
Additional topics
This is a community wiki. Be sure you are logged in to edit, comment, and add pages. Not a member yet? It's free and simple. Click Login in the upper right corner and Register.