HTML Made Simple

Getting Started with HTML - First Things First

So you want to learn HTML? Let me guess. You have been surfing the net for a couple of months now, and you can't stop thinking about how these genius webmasters design web sites and keep them going on the net. Well, in all actuality, designing a website is not a five-year project. With a little creativity and desire, you could have a personal site running on your computer within ten minutes of reading the first couple of sections in this tutorial. Don't get me wrong, with the new programming languages constantly arising, the sites you see on the net by major companies require knowledge of a much more complex programming language or combination of languages. However, you don't need knowledge of complex web programming languages to tailor a website to meet your needs and look professional while doing it. HTML provides the basic tools for designing a simple, professional website, and it can easily be self taught.

HTML (HyperText Markup Language) is a web programming language designed to create web documents or web pages. Based upon SGML (Standard Generalized Markup Language), HTML's basic concept involves the use of "tags". These "tags", "mark up" or alert the browser that the document contains hypertext so it can be interpreted and rendered as a web page document. All HTML documents consist of a mix and match of HTML "tags" and "regular" text. Tags only aid in describing the document content or text, and thus leave the actual appearance and layout decisions for a web browser to handle when the web page is rendered or opened.

HTML documents are plain-text files that can be created using any basic or high-level text editor, such as Notepad, TextPad, or Microsoft Word or any other HTML authoring program. When you create an HTML document, you must save it with a .html or .htm extension. By default, most text editors save documents with a .txt extension, which is not capable of being displayed by a web browser. The .html or .htm extension allows the document to be rendered and displayed by a browser.

Unfortunately for web designers, web documents are browser dependent; sometimes, different browsers display content differently. A document may look crisp and clean in Internet Explorer, but it may have a slightly different look in Netscape, or vice versa. Web page designers should make every attempt to create portable HTML documents that can be opened by many different web browsers while showing little or no visual differences. Reliable HTML web pages are created by following all syntax rules and understanding which tags are supported by all web browsers.

So, what does a person need to create a web page? A simple text editor, and a web browser. It's that simple. In most cases, a web page, or web site which is a collection of related web pages, should be designed locally on a computer first, and then once completed, the web documents and files may be uploaded for publishing on the World Wide Web. This makes web site or web page creation, extremely easier than trying to edit existing documents on the WWW. Before reading further and learning actual HTML code, you should become familiar with the following short listing of terms:

• HTML - short for HyperText Markup Language; basic programming language of the World Wide Web based upon SGML (Standard Generalized Markup Language).
• Web browser - application capable of interpreting and rendering HTML code and other web programming languages.
• URL - [Uniform Resource Locator] - the address to any web site or web page document that is part of the World Wide Web.
• Hyperlink, link - text, image or object in a web page document that "links" or "points" to another document on the World Wide Web.
• Element - a fundamental component of structure in a web document; web pages are ultimately divided into many individual elements.
• Tag - used to denote various elements in a document; it signals a command or instruction for a web browser and specifically describes the type of content.
• Attribute - additional information included inside the start tag of an element; issues a command to a web browser telling what kind of operation is required.
• Web document - actual web page text file with an extension of .html or .htm that is capable of being displayed by a browser.

You now have a brief background of HTML and are ready to dig deep into the core of the language. The next section will show you how to create your first web page document. Read on for more about where you should begin...

Ground Zero - Where Do I Begin?

Every HTML document should contain the basic document structure tags, which include <html></html>, <head></head> and <body></body>. The heading contains the title, which is displayed in the title bar of a browser, and the body contains the elements that are made up of text, images, paragraphs, tables, lists and any other legal HTML element. Not every browser supports all HTML tags; however, if the tag is not supported, the browser simply ignores it and doesn't take it into account when interpreting the document. HTML is also not case sensitive, which means <bODy> is the same as <BODY> or <body>, but it is highly recommended to use a consistent tag writing style. The standard writing convention is for all tags to be written in lowercase. The following depicts the document structure elements that every web document should contain:

<html>
<head><title></title>
</head>
<body>

</body>
</html>

Open a simple text editor program such as Notepad on a Windows machine, copy and paste the above code into the editor, save the file with a .html or .htm extension, and open the file using a web browser. Congratulations, you have now created your very first web page.

Upon opening of the above HTML code example in a web browser, a blank white or gray screen should appear in the content area of the browser. Why? Well, no elements have yet been provided in the document other than the basic document structure tags. By default, web browsers display text in black, hyperlinks in blue, and the background in white or gray, with top and bottom margins set at 15 (pixels) and right and left margins set at 10 (pixels). To override these default values, simply alter the values of the corresponding <body> standard tag attributes. The following attributes can be manipulated in the <body> tag of a document.

Standard Attributes

• background="imageURL" --> document background "tiled" image
• bgcolor="#hexColor" --> document background color
• text="#hexColor" --> document text color
• link="#hexColor" --> document link color
• vlink="#hexColor" --> document visited link color
• alink="#hexColor" --> document active link color

Non-Standard Attributes

• bgproperties="fixed" --> non-tiled background image
• topmargin="#" --> pixel size of top margin of web document
• bottommargin="#" --> pixel size of bottom margin of web document
• leftmargin="#" --> pixel size of left margin of web document
• rightmargin="#" --> pixel size of right margin of web document

Non-Standard JavaScript Supported Attributes

• onload
• onunload
• onfocus
• onblur
• onerror
• onmove
• onresize
• ondragdrop

Example: For a black background, orange text, white hyperlinks, and all margins set at 0, alter the <body> attributes to the following:

<body bgcolor="#000000" text="#FF2400" 
 link="#FFFFFF" topmargin=0 bottommargin=0 leftmargin=0 rightmargin=0>

Important note: The six digit, number and letter hexColor combinations, represent the amount of RGB (red, green, blue) color as hexadecimal values from 00 to FF. 000000 is black and FFFFFF is white. Finding a specific color using random number and letter combinations can be unintuitive. A free online resource to track the combinations that make specific colors is available here. Most high level paint programs such as Paint Shop Pro 5 have the capability of calculating the hexadecimal values of thousands of colors. Not only does a good paint program come in handy when finding hexadecimal values, but it is also a great tool for creating custom images for web pages.

The following displays some of the more basic colors and their corresponding hexadecimal values:

Examples of Hexadecimal Colors

Black	-	#000000
Gray	-	#C0C0C0
Light Gray	-	#E8E8E8
White	-	#FFFFFF
Light Blue	-	#87CEFF
Blue	-	#0000FF
Dark Blue	-	#00008B
Light Red	-	#FF6A6A
Red	-	#FF0000
Dark Red	-	#8B0000
Light Green	-	#90EE90
Green	-	#00FF00
Dark Green	-	#008B00
Light Yellow	-	#FFFFE0
Yellow	-	#FF0000
Gold	-	#FFD700
Light Orange	-	#FFA500
Orange	-	#FF8C00
Dark Orange	-	#FF2400
Light Magenta	-	#EE82EE
Magenta	-	#FF00FF
Dark Magenta	-	#8B008B

When manipulating <body> attributes, if an attribute is not specified, the default value for the browser will be used. You can also provide a background image that will be displayed in the background of your document instead of a solid color, by using the background="imageURL" attribute. imageURL is the URL web address of the image to be included as the background. For example, if an image named stone.gif is saved on a computer in the same directory as other HTML files or uploaded on a web server, a person could use the following code:

<body background="stone.gif">

This will "tile" the image of stone.gif across the background of a web page, provided the image is in the current web directory. Since the image is displayed in a "tiled" format, the creation of repetitive background images are commonly used to minimize web page loading and downloading time.

To create a web page document, follow these 6 simple steps:

1. Open a text editor such as Notepad on a Windows based machine.
2. Copy and paste the following code depicting the document structure tags:

           <html>
           <head><title></title>
           </head>
           <body>
   
           </body>
           </html>

3. Alter the <body> attributes to create a custom visual appearance for the web page.
4. Add all other necessary HTML elements to provide content. (see later sections)
5. Save the text file with a .html or .htm extension in the same directory as all other related web page files.
6. Open the HTML file in a web browser.

For a web page example, follow the above steps and insert the following HTML code in place of the document structure tags. Note: See later sections for tags not covered in this section:

        <html>
        <head><title>My First Web Page - HTML is simple!</title>
        </head>
        <body bgcolor="#FFFFFF" text="#FF0000">

        <h2>Hello, world. HTML is easy!</h2>

        </body>
        </html>

By now, you should have already created your first web page document. I told you it wasn't difficult. The next section introduces you to several "tags" you need to know to give your web page a professional, clean look. Read on for more about tags...

HTML Tags - It's All About Tags

Since HTML stems from the basic concept of using tags, the more a designer becomes familiar with various tags, the better that designer will be able to create customized web pages. HTML tags are made up of a left angle bracket ( < ), a tag name and a right angle bracket ( > ). Tags normally have a start and end tag but some tags only need a beginning tag to function. The end tag is identical to the start tag with a backslash ( / ) preceding the text between the angle brackets. The general form of a tag is as follows:

<tagName> </tagName>

where tagName is the name of the tag element. Some elements may include additional instructions in the start tag, called attributes. Attributes give additional information about the element to the web browser.

The following is a brief overview of the basic document structure HTML tags:

• <html> </html>

  This element simply notifies the web browser that the document contains HTML-coded information (hypertext). This is also indicated by the .html or .htm extension. All other elements will be placed within the beginning and ending <html> tags.

• <head> </head>

  This element identifies the beginning of the HTML document commonly called the heading region. It contains the title tag and may perhaps contain other scripting language code such as Java, JavaScript, CSS, etc., to be "included" along with the HTML elements.

• <title> </title>

  This element specifies the text to be displayed in the title bar of the web browser. Note that the title is not displayed within the content area of the browser. Web page titles should be very descriptive and meaningful because it is used if a visitor bookmarks the document as a favorite web link.

• <body> </body>

  This element contains the content elements of the document that is to be displayed in the content area of a web browser.

• <!-- -->

  This is the comment tag which is used for documentation purposes. Documentation refers to statements in the HTML source code that do not affect the code itself, and generally used for describing the purpose of particular code segments. Placing comments in HTML source code is vital when working with complex code containing many different elements. It also helps the web designer and other code viewers understand what certain code segments are accomplishing. It is a good web programming practice to use adequate source code comments, and it is a good habit to get into if pursuing other programming languages.

Document structure tags define the global regions of a web page but do nothing to describe web page content. The following are some useful document formatting tags and text tags designed to "describe" web page content:

• <center> </center>

  Even though the center tag is very basic and extremely easy to understand, it can be very useful in a document. Everything placed between the start and end <center> tags will be centered on the screen or centered in its current cell space. The center tag is expected to become obsolete because other tag attributes can now accomplish the same principle.

• <br>

  Using the break tag causes a line to break with no extra space. It is the same as pressing enter in a word processing document; it simply breaks the line and begins a new one.

• Text Headings (block-level) <h1> </h1> through <h6> </h6>

  HTML has six levels of text form heading, from 1 to 6, with 1 being the most prominent (biggest) level. Consider the following:

  • <h1>H1 Heading Size</h1> --> text displayed at size 1 level
  • <h2>H2 Heading Size</h2> --> text displayed at size 2 level
  • <h3>H3 Heading Size</h3> --> text displayed at size 3 level
  • <h4>H4 Heading Size</h4> --> text displayed at size 4 level
  • <h5>H5 Heading Size</h5> --> text displayed at size 5 level
  • <h6>H6 Heading Size</h6> --> text displayed at size 6 level
• <pre> </pre>

  This is the preformatted text tag. Unlike word processing documents, word wrapping is performed by default (unless otherwise instructed by use of block level tags) in an HTML document, and multiple spaces in HTML source code are reduced to one single space when displayed by a browser. The preformatted text tag makes spaces and line breaks appear in the same location as it does in the HTML source file document. The <pre> tag can also be used with the width="#" attribute to specify how many characters are to be displayed on each line.

• <hr>

  This tag produces a horizontal rule that extends across the content area in a web browser. It is useful for separating and organizing information. An alternative and better idea would be to create an image that matches the web page colors, designed to serve the same purpose. You can use two attributes with the horizontal rule tag. The size attribute specifies the line thickness in pixels. The width attribute specifies the line width in percentage of the screen or the line width in pixel values. For example, to produce a horizontal division rule 450 pixels long and 5 pixels thick, use <hr width=1 size=450>.

• <p> </p>

  The paragraph tag allows content to be displayed in a paragraph block-level format. A line break will be placed before and after the content specified after the start <p> tag and before the closing </p> tag.

Some text cannot be explicitly placed as "regular" text in a web page document source code because the text has meaning to the syntax of HTML, there is no keyboard character value for the text, etc. Certain character values are not able to be displayed because they have reserved meaning in HTML. For example, a less than operator and greater than operator have pre-defined "tag" meanings and are therefore not able to be displayed by solely placing ( < ) or ( > ) in HTML source code. However, certain HTML code specifiers make it possible to display these reserved characters. The following are a few useful specifiers:

• & gt; would display >
• & lt; would display <
• & copy would display ©
• & nbsp; would insert a single space

It is important to note that the space inserted between the ambersand sign and specifier is only provided in this article for display purposes. There should be no space in actual web document source code.

The next section will provide you with more ideas on how to format characters and text in your HTML documents. Read on for more about character formatting...

Character Formatting - How to Spice Up Text

The style of document content text in web pages, plays a huge role in the overall design of web sites. HTML provides many tags for formatting text and specifying text characteristics. Physical type styles are designed to describe text characteristics, and block-level text tags are used for formatting purposes.

The following is a listing of popular physical type styles:

• <b></b> ---> Specifies Bold Text
• <i></i> ---> Specifies Italic Text
• <u></u> ---> Specifies Underlined Text
• <tt></tt> ---> Specifies Fixed Width Font
• <sub></sub> ---> Specifies Subscript Format
• <sup></sup> ---> Specifies Superscript Format

For an example, consider the following HTML code segment:

<b>Using bold characteristic tag.</b><br>
<i>Using italic characteristic tag.</i><br>
<u>Using underline characteristic tag.</u><br>
<tt>Using fixed width font characteristic tag.</tt><br>
Using <sub>subscript</sub> format.<br>
Using <sup>superscript</sup> format.<br>

The above HTML code would produce the results in the following box, in a web browser:

Using bold characteristic tag. Using italic characteristic tag. Using underline characteristic tag. Using fixed width font characteristic tag. Using subscript format. Using superscript format.

The following is a listing of popular block-level text tags:

• <div> </div> --> content division tag allowing for align="left | center | right" attribute
• <p> </p> --> paragraph tag
• <h(1-6)> </h(1-6)> ---> text heading tags

For an example, consider the following HTML code segment:

<h3>Welcome!</h3>
<p>Beginning of document content.</p>
<div align="center">Ending of document content.</div>

The above HTML code would produce the results in the following box, in a web browser:

Welcome! Beginning of document content. Ending of document content.

Explicitly changing font text types can also be accomplished through the capabilities of the <font> tag. In most web browsers, the default font type for an HTML document is Times New Roman. The <font> tag can be used with its face="", size="" and color="#" attributes, to change the font type of characters to be displayed by a web browser. face must equal the name of the font to be used, such as font="arial". size must equal the size of the characters in points (pt), such as size=2pt, or relative values. color must equal to the hexadecimal color value of the characters, such as color=#000000 (black hexadecimal value). For an example, consider the following:

<font face="arial" size=4pt color=#000080>
  4PT font size rendered in Arial Type</font>

The above HTML code would produce the results in the following box, in a web document:

4PT font size rendered in Arial Type

The following HTML code segment illustrates the size of possible point values when using the font tag:

<font size=1pt face="arial" color=#FF2400>1 point arial type text</font>
<font size=2pt face="arial" color=#FF2400>2 point arial type text</font>
<font size=3pt face="arial" color=#FF2400>3 point arial type text</font>
<font size=4pt face="arial" color=#FF2400>4 point arial type text</font>
<font size=5pt face="arial" color=#FF2400>5 point arial type text</font>
<font size=6pt face="arial" color=#FF2400>6 point arial type text</font>
<font size=7pt face="arial" color=#FF2400>7 point arial type text</font>

The above HTML code would produce the results in the following box:

1 point arial type text 2 point arial type text 3 point arial type text 4 point arial type text 5 point arial type text 6 point arial type text 7 point arial type text

Important note: In order for a specified font to override the default font displayed by a web browser, the visitor to a web page must have the specified font to be used installed on his/her computer. For example, if choosing to use the font type ocra as the font type for text on a web page, then visitors to the page must have the ocra font installed on their computer; otherwise, they will see the default font type used by the browser.

It is also possible and very common to combine physical type styles with block-level tags. Care must be taken to ensure that all HTML syntax rules are followed.

When designing web pages, web authors constantly experiment in order to find a perfect look for a web site. Character formatting and text characteristics are very important in giving a web site that "perfect" visual look, but most of these tags have been left in the dark due to the popularity of a much more powerful coding scheme: CSS (cascading style sheets).

HTML Lists - Looking Sharp and Organized

There may be times when web designers need to organize document information or images in a neat, list format. HTML supports the following three block-level list types: unnumbered (ul), numbered (ol), and definition lists (dl).

Unnumbered or unordered lists are usually displayed with bullets, which depict each new line of information to be displayed in the list structure. Unordered lists should be used when needing to display related group of data not necessarily in a particular order. The following are the steps required to create an unnumbered list:

1. Start with the opening unnumbered list tag <ul>.
2. Enter the list item tag <li> followed by the item to be listed.
3. Continue to list items using the list item tag.
4. End the unnumbered list by using the closing tag </ul>.

Note: The type="" attribute can be used in the opening <ul> tag to specify a square, circle or disc shaped bullet. If no bullet is specified, the default solid disk shape is used. Also note that the closing </li> tag is optional when entering list <li> items.

The following code illustrates an example of an unnumbered list:

Example 1: Unnumbered/Unordered list

<html>
<head><title>Unordered List Example</title></head>
<body>

<ul>
<li>List Item 1
<li>List Item 2
<li>List Item 3
<li>List Item 4
</ul>

</body>
</html>

The above HTML code would produce the results in the following box, in a web browser:

List Item 1 List Item 2 List Item 3 List Item 4

Numbered lists are coded identical to an unnumbered list except for the opening and closing tag, which are: <ol> </ol>. Numbered lists should be used when needing to display data in steps or numerical sequential order.

Note: The type="" attribute can be used in the opening <ol> tag to specify different types of numbering styles. If no value is specified, the default Arabic numbering style is used. Also note that the closing </li> tag is optional when entering list <li> items. The following is a listing of the possible numbering styles to specify while using the type="" attribute:

    VALUE           MEANING
    1               Arabic (1, 2, 3, ...) [default]
    A               Alphabetic uppercase
    a               Alphabetic lowercase
    I               Roman numeral uppercase
    i               Roman numeral lowercase

The following code illustrates an example of a numbered list:

Example 2: Numbered/Ordered list

<html>
<head><title>Numbered List Example</title></head>
<body>

<ol type="A">
<li>List Item 1
<li>List Item 2
<li>List Item 3
<li>List Item 4
</ol>

</body>
</html>

The above code would produce the results shown in the following box:

List Item 1 List Item 2 List Item 3 List Item 4

Definition lists can be used for two purposes. If needing to list terms and definitions, designers can use alternating definition tags <dt> and definition data tags <dd>. Note that using closing tags when using the <dt> and <dd> tags is optional. Designers can also use a definition list when using a custom bullet, to represent each new list content line. If using a custom bullet, only <dd> opening and closing tags should be used to list the bullet images and items of choice. To begin and end a definition list, use the <dl></dl> start and closing tags.

The following examples illustrate the two types of definition lists:

Example 3: Definition list - terms and definitions

<html>
<head><title>Definition List Example</title></head>
<body>

<dl>
<dt><b>Word 1</b></dt><dd>This corresponds to 
  the meaning of word 1.</dd><br><br>
<dt><b>Word 2</b></dt><dd>This corresponds to 
  the meaning of word 2.</dd><br><br>
<dt><b>Word 3</b></dt><dd>This corresponds to 
  the meaning of word 3.</dd><br><br>
<dt><b>Word 4</b></dt><dd>This corresponds to 
  the meaning of word 4.</dd><br><br>
</dl>

</body>
</html>

The above HTML code would produce the results in the following box, in a web browser:

Word 1 This corresponds to the meaning of word 1. Word 2 This corresponds to the meaning of word 2. Word 3 This corresponds to the meaning of word 3. Word 4 This corresponds to the meaning of word 4.

Example 4: Definition list - custom bullet list

<html>
<head><title>Definition List Example</title></head>
<body>

<dl>
<dd><img src="imgarrow.gif"> List item 1</dd><br>
<dd><img src="imgarrow.gif"> List item 2</dd><br>
<dd><img src="imgarrow.gif"> List item 3</dd><br>
<dd><img src="imgarrow.gif"> List item 4</dd>
</dl>
</body>
</html>

The above HTML code would produce the results in the following box, in a web browser:

List item 1 List item 2 List item 3 List item 4

In conclusion, lists allow for document content to be displayed in a neat, easy to read manner, and also add overall document structure.

Hyperlinks - Getting Out and Around

A hyperlink is text, an image or any other object in an HTML document that can be clicked, in order to gain access to an external web site, an internal web page, an external web page or an internal section within an HTML document. An external link provides access to another web site that is not part of the current web site, such as going to Google from PHeaven. An internal link provides access to another web page which is part of the original web site, such as going to the next article in this guide from this web page. An external web page link provides access to a web page that is part of another web site. An internal section link points to a region within a web page document.

Hyperlinks are easily noticed in a web page document because, by default, they are underlined and painted blue (unless otherwise specified), and a mouse pointer will change to a hand with the index finger pointing to the link, indicating that the web user may click on the text, image or object. Also, by default, image hyperlinks are given a distinct border color (unless otherwise specified). HTML provides ways to manipulate the color of links, visited links and active links by using the following attributes of the <body> document structure tag:

• link="#hexColor" --> link color
• vlink="#hexColor" --> visited link color
• alink="#hexColor" --> active link color (upon click)

#hexColor must be a valid hexadecimal value representing the color to be used for each attribute, as usual. The border surrounding an image hyperlink can be manipulated by using the border="0" attribute of the image tag such as:

<img src="imageURL" alt="this image" border="0">

The link anchor tag has the following form: <a href="URL"> </a>.

The URL, which is the full file path of the destination, is to be placed between the quotes. The target="_blank" attribute will allow the link to open the document in a new browser window so the visitor will not leave the current web page. For example, consider:

<a href="URL" target="_blank">

The following illustrates how to link to a web site:

<a href="http://www.programmersheaven.com" 
    target="_blank">Programmer's Heaven</a>

The following illustrates how to link to a web page that is part of a web site:

<a href="http://warebiz.tripod.com/cpp.htm">
  [warebiz] :: C++ Ripped Apart</a>

The following illustrates how to produce internal web document links:

• <a href="#linkName"> </a> --> use for the target link within the web document
• <a name="linkName"> </a> --> use for the anchor within the web document (the destination from clicking the #linkName)

The following illustrates how to create a linkable image with no border color:

<a href="linkURL"><img src="imageURL" border="0"></a>

In summary, the anchor tag <a> allows for user friendly web page navigation and provides quick access to web user interests.

With hyperlinks covered, we can now move on to the wonderful world of tables. In my opinion, tables are the most important aspect of the HTML language. You can design an entire web page with the whole blueprint grid of the page being one large table. Tables allow you to place images, objects and text in the exact position that you specify. Read on for more about tables...

HTML Tables - Far From Picnic Tables

In the everyday world, a table is commonly used to present tabular information such as schedules, statistics, etc. In the world of HTML, a table is also used for these purposes but it is more commonly used for organizing the content of complex web pages. Many web designers prefer to create on overall web site layout through the use of a single table. A table lets web designers make use of rows and columns so they can specify precisely where text, images and objects are to be placed on their documents. This is what makes the <table> element one of the most powerful and versatile out of all HTML tags. The following information gives an overview of the table elements and attributes when using the <table> tag:

Table Elements and Corresponding Attributes

<table></table> --> Tag used to define a table.

Table Attributes

• align="left | center | right" - specifies the horizontal alignment of the table.
• border="#" - specifies the thickness of the table border in pixels represented by #. 0 = no border; 1 = default; the higher the number, the thicker the border.
• cellpadding="#" - specifies the thickness of the area inside the contents of a cell in pixels represented by #; the higher the number, the thicker the area.
• cellspacing="#" - specifies the thickness of the area outside the contents of a cell in pixels represented by #; the higher the number, the thicker the area.
• width="#" - specifies the width of the table in pixels represented by #. Use pixel values such as width="500", or use percentage values such as width="100%". Percentages are based on the screen resolution of the computer's display.
• bgcolor="#hexValue" - specifies the color of the background of the table; you must use hexadecimal HTML color values as usual.
• background="imageURL" - specifies an image to be used as the background of the table; image must be present in current directory as usual, unless full path of the image is provided.

The following tags must be placed within the <table> tag in order for them to be associated with the table.

• <caption></caption>

  Defines a title to be used for the table, positioned above the table by default. Use the attribute align="bottom" to place the caption below the table.

• <tr></tr>

  Defines a table row within the table. Attributes:

  • align="" - [left, center, right] - specifies the horizontal alignment of the contents of a cell.
  • valign="" - [top, middle, bottom] - specifies the vertical alignment of the contents of a cell.
  • bgcolor="#hexValue" - specifies the color of the background of the cell; must use hexadecimal HTML color values as usual.
  • background="imageURL" - specifies an image to be used as the background of the cell.
• <th></th>

  Defines a table header cell. By default, the text is centered and is of bold type. Attributes:

  • align="" - [left, center, right] - specifies the horizontal alignment of the contents of a cell.
  • valign="" - [top, middle, bottom] - specifies the vertical alignment of the contents of a cell.
  • colspan="#" - specifies the number of columns a cell will expand, represented by #.
  • rowspan="#" - specifies the number of rows a cell will expand, represented by #.
  • nowrap - eliminates word wrapping in a cell.
  • width="#" - specifies the width of the cell (pixel or percentage values), represented by #.
  • height="#" - specifies the height of the cell (pixel or percentage values), represented by #.
  • bgcolor="#hexValue" - specifies the color of the background of the cell; you must use hexadecimal HTML color values as usual.
  • background="imageURL" - specifies an image to be used as the background of the cell.
• <td></td>

  Defines a table data cell within the table row. Note: a data cell must be placed inside a table row. Attributes:

  • align="" - [left, center, right] - specifies the horizontal alignment of the contents of a cell.
  • valign="" - [top, middle, bottom] - specifies the vertical alignment of the contents of a cell.
  • colspan="#" - specifies the number of columns a cell will expand, represented by #.
  • rowspan="#" - specifies the number of rows a cell will expand, represented by #.
  • nowrap - eliminates word wrapping in a cell.
  • width="#" - specifies the width of the cell (pixel or percentage values), represented by #.
  • height="#" - specifies the height of the cell (pixel or percentage values), represented by #.
  • bgcolor="#hexValue" - specifies the color of the background of the cell; you must use hexadecimal HTML color values as usual.
  • background="imageURL" - specifies an image to be used as the background of the cell.

The following are examples illustrating how tables can be used to provide structure to web documents. Tabular structure, complex web page structure, border tricks, and complex web page structure with a navigational menu is emphasized.

Table Example 1: (simple table display for tabular information)

<html>
<head><title></title></head>
<body>

<table border=1 width=300>
<caption><font size=2pt face="arial">Example Table</caption>
<tr>
<th bgcolor=#000000><font size=2pt 
  face="arial" color=#FFFFFF>Heading</font></th>
<th bgcolor=#000000><font size=2pt 
  face="arial" color=#FFFFFF>Heading</font></th>
</tr>
<tr>
<td align="left"><font size=2pt face="arial">Text A</font></td>
<td align="right"><font size=2pt face="arial">Text B</font></td>
</tr>
<tr>
<td align="center"><font size=2pt face="arial">Text C</font></td>
<td align="center"><font size=2pt face="arial">Text D</font></td>
</tr>
<tr>
<td align="left"><font size=2pt face="arial">Text E</font></td>
<td align="right"><font size=2pt face="arial">Text F</font></td>
</tr>
<tr>
<td align="center" colspan="2">
  <font size=2pt face="arial">Text G</font></td>
</tr>
</table>

</body>
</html>

The above HTML code would produce the following results in a web browser:

Example Table

Heading