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 aweb page document. All HTMLdocuments 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 anHTML 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 .htmlor .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 actualHTML 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 HTMLtags; 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:

Hide   Copy Code

<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:

Hide   Copy Code

<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. imageURLis 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:

Hide   Copy 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:
   Hide   Copy Code

           <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:

Hide   Copy Code

        <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:

Hide   Copy Code

<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 HTMLdocument, 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 HTMLdocuments. 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:

Hide   Copy Code

<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:

Hide   Copy Code

<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 assize=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:

Hide   Copy Code

<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:

Hide   Copy Code

<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

Hide   Copy Code

<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:

Hide   Copy Code

    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

Hide   Copy Code

<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 adefinition 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

Hide   Copy Code

<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

Hide   Copy Code

<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:

Hide   Copy Code

<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. Thetarget="_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:

Hide   Copy Code

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

The following illustrates how to link to a web site:

Hide   Copy Code

<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:

Hide   Copy Code

<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:

Hide   Copy Code

<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 allHTML 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 aswidth="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 attributealign="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)

Hide   Shrink    Copy Code

<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	Heading
Text A	Text B
Text C	Text D
Text E	Text F
Text G

Table Example 2: (complex web page for entire web page layout)

Hide   Copy Code

<table cellpadding=5 cellsapcing=0 border=0 width=100%>
<tr>
<td width=25% bgcolor=#114E86 align="left" valign="middle">
<font size=2pt face="arial" color=#FFFFFF>
  This text corresponds to the left content panel of the 
  overall layout of the web page document.</font>
</td>
<td width=50% bgcolor=#FFFFFF align="center" height=300 valign="top">
<font size=2pt face="arial">This text corresponds to 
  the center content panel of the overall layout 
  of the web page document.</font>
</td>
<td width=25% bgcolor=#E8E8E8 align="right" valign="bottom">
<font size=2pt face="arial" color=#114E86>This text corresponds to the right 
  content panel of the overall layout of the web page document.</font>
</td>
</tr>
</table>

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

This text corresponds to the left content panel of the overall layout of the web page document.

This text corresponds to the center content panel of the overall layout of the web page document.

This text corresponds to the right content panel of the overall layout of the web page document.

Table Example 3: (border tricks)

Hide   Copy Code

<table cellpadding=1 cellspacing=0 
 width=250 border=0 bgcolor=#C0C0C0><tr><td>
<table cellpadding=2 cellspacing=0 
 width=100% border=0 bgcolor=#FFFFFF><tr><td>
<table cellpadding=1 cellspacing=0 
 width=100% border=0 bgcolor=#114E86><tr><td>
<table cellpadding=2 cellspacing=0 
 width=100% border=0 bgcolor=#FFFFFF><tr><td>
<table cellpadding=1 cellspacing=0 
 width=100% border=0 bgcolor=#114E86><tr><td>
<table cellpadding=2 cellspacing=0 
 width=100% border=0 bgcolor=#C0C0C0><tr><td height=100>
 
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>

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

Table Example 4: (complex web page using a navigational left pane vertical bar)

Hide   Shrink    Copy Code

<center>
<table cellpadding=1 cellspacing=0 
  border=0 bgcolor=#000000 width=85%><tr><td>
<table cellpadding=0 cellspacing=0 border=0 width=100%>

<tr>

<!-- begin left pane of content area -->
<td width=15% align="center" valign="top" bgcolor=#C0C0C0 height=350>
<br><br> 
<table cellpadding=0 cellspacing=0 border=0 width=100%>
<tr><td align="center">
  <font size=2pt face="arial"><b>--></b> 
  <a href="/">Nav Link 1</a></td></tr>
<tr><td align="center">
  <font size=2pt face="arial">
  <b>--></b> <a href="/">Nav Link 2</a></td></tr>
<tr><td align="center">
  <font size=2pt face="arial"><b>--></b>
  <a href="/">Nav Link 3</a></td></tr>
<tr><td align="center">
  <font size=2pt face="arial">
  <b>--></b> <a href="/">Nav Link 4</a></td></tr>
<tr><td align="center">
  <font size=2pt face="arial"><b>--></b>
  <a href="/">Nav Link 5</a></td></tr>
</table>
</td>
<!-- end left pane of content area -->

<!-- begin right pane of content area -->
<td width=85% align="center" valign="top" bgcolor=#FFFFFF>
<br><font size=2pt face="arial" color=#0000FF>
  <h3><b>Welcome, to my web page!</b></h3></font>
</td>
<!-- end right pane of content area -->

</tr>
</table>
</td></tr>
</table>
</center>

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

<!-- begin left pane of content area --> <!-- end left pane of content area --><!-- begin right pane of content area --> <!-- end right pane of content area --> --> Nav Link 1 --> Nav Link 2 --> Nav Link 3 --> Nav Link 4 --> Nav Link 5 Welcome, to my web page!

In summary, tables are associated with developing structural table formats within a web document. Because tables can be created using pixel dimensions or percentage values, they can play a crucial role in organizing web document content and creating complex web page layouts. The table tag is one of the most convenient and used HTML elements because of its powerful and flexible capabilities.

The next section will show you how to add images to your site. Text is informative and almost always necessary, but images add life and personality to websites. Read on for more about displaying images...

DISPLAYING IMAGES - ADDING LIFE TO YOUR PAGES

Including Images

If a web page needs a visual appeal, an important step in the design should be the creation of many custom images and visuals. Most visitors prefer looking at informative pictures and images rather than reading text, and visitors are also almost always drawn to looking at images before text. Web designers should add relevant images to their web pages to create visual life and substance towards the overall layout of the web site.

Most web browsers can display images in GIF and JPEG format, but with new browser capabilities constantly arising, more file formats are capable of being displayed. To include an image in a web page document, use the image search <img src=""> tag, which specifies the name and type of image to be displayed and perhaps the full path of the image.

Note: If you do not specify the full path, the image must be in the current web directory.

The image search tag has the following form:

Hide   Copy Code

<img src="image.type">

where the name and type of image is placed between the quotes, or perhaps the full path of the image. For example, if an image named logo of type GIF is in the current web directory, the following image search specification would be sufficient:

Hide   Copy Code

<img src="logo.gif">

The image search tag comes equipped with width="" and height="" attributes to specify the width and height of the image in pixels. Specifying width and height attributes for an image allows for faster loading times. It simply lets the browser allocate space on the web page for the image. For an example, if the previous logo image had dimensions of 200 by 100, the following image search specification would be sufficient:

Hide   Copy Code

<img src="logo.gif" width="200" height="100">

Because some browsers cannot display certain image formats and some visitors choose to turn off image loading, web designers should also use the alt="" attribute to inform the visitor of which type of graphic would have been displayed. The text is displayed instead of the image only if the browser refuses to load the image. The alt="" attribute will also provide a balloon tip containing the information you specify between the quotes, when a mouse is hovering over the displayed image. For example, consider the following image search specification with a newly added alt attribute to our previous logo image:

Hide   Copy Code

<img src="logo.gif" width="200" height="100" alt="Web Page Logo">

Once you master adding one single image to a web page, the same routine is applied for each new image to be added. When displaying multiple images, it is recommended to place the images in a table structure using the <table> tag so the images will appear exactly where they are specified to appear.

I know you have encountered a form at one time or another while searching the Internet. You have probably filled out many online forms, submitted them and never thought twice about how they actually worked. Well, the next section provides some basic but important facts concerning HTMLforms. Read on for more about forms...

HTML FORMS - FORMING WHAT?

An HTML web document form allows the visitor to input information and possibly send that information to a server on the Internet for form processing. Form elements such as text boxes, radio buttons, checkboxes and text fields provide a graphical interface, so visitors can specify data very easily. Creating the HTML code to devise a web page is not difficult, but creating the scripting code that receives and processes the form data can be unintuitive. Constructing a HTML form for a web page is a two-part process. The first part being the actual creation of a form in an HTML document, which is covered in this article. The second part is the creation of a CGI (common gateway interface) program that will receive the form data and implement the action specified within the program located on a web server. The creation of a CGI program requires knowledge of a high-level programming language such as Perl, C, C++, ASP, PHP, etc.

A form is generated in HTML using the <form> element. All other form <form> elements such as<input>, <select> and <textarea> must be placed within the opening and closing <form> tags. The <form> element has the following standard attributes:

Hide   Copy Code

    action="", method="", enctype=""

• action="" --> specifies the URL of the CGI program located on a web server which will process all active form data elements.
• method="" --> specifies the way in which the form data will be transferred to the HTTP server. Method options are get and post, with get being the default method type.
• enctype="" --> specifies the way in which the form data will be encoded before it is transferred to the HTTP server.

The syntax for creating an HTML form consists of 3 distinct elements between the <form> tag. The best way to learn the types of form elements is to see first-hand examples with source code. Here is an outline of the <form> elements:

1. input: This element is the basis for various button types and text types. <input> attributes are as follows:Attributes:
   • type="text | button | checkbox | file | hidden | image | password | radio | reset | submit" (default = text) --> Specifies the data entry field property to use as input.
   • name="" --> Gives the input type a name for CGI processing purposes. Required for all form types except submit, reset and button.
   • value="" --> Either gives a form field an initial value or gives a label to a button. Required for radio and checkbox form types.
   • align="top | middle | bottom | left | right" (default = bottom) --> Provides an alignment for an image form type.
   • checked --> Specifies the initial state of a radio or checkbox form type to be selected.
   • maxlength="#" --> Specifies the maximum length of form textfield characters.
   • size="#" --> Specifies the visual number of textfield characters in a textfield.
   • src="imageURL" --> Specifies the URL of the image for an input image type.
   The type="" attribute is used to specify which input form type to use. Study the examples that follow to see which attributes may be used for each type. Some possible input types are as follows:
   • text --> specifies single line text window
   • radio --> specifies a group of buttons in which only one may be selected
   • checkbox --> specifies a box which may be checked or unchecked; multiple boxes are allowed to be checked or unchecked
   • reset --> specifies a button to clear all form values
   • submit --> specifies a button to send the form data to the CGI program on a web server
   The following HTML code segment is needed to produce a text box:
   Hide   Copy Code

   <form>
   Example Text Box: <input type="text" size=25 name="examplebox">
   </form>

   The following HTML code segment is needed to produce a set of radio buttons:
   Hide   Copy Code

   <form>
   <input type="radio" name="size" value="small">Small
   <input type="radio" name="size" value="medium">Medium
   <input type="radio" name="size" value="large">Large
   </form>

   The following HTML code segment is needed to produce a set of checkboxes:
   Hide   Copy Code

   <form>
   <input type="checkbox" name="topping" value="pepperoni">Pepperoni
   <input type="checkbox" name="topping" value="sausage">Sausage
   <input type="checkbox" name="topping" value="mushrooms">Mushrooms
   <input type="checkbox" name="topping" value="black olives">Black Olives
   </form>

   The following HTML code segment is needed to produce a reset and submit button:
   Hide   Copy Code

   <form>
   <input type="reset" value="Reset">
   <input type="submit" value="Submit">
   </form>

2. select: This element creates a pull-down menu. The <option> element is included inside the<select> element in order to define menu choices. The selected attribute in the <option>element specifies the default menu option to be selected.Attributes:
   • name="" --> Gives the <select> element a name for CGI processing purposes. (required)
   • size="#" --> Specifies the number of visible rows.
   • multiple --> Specifies whether multiple <select> entries may be selected simultaneously.
   The <option> element is used to specify the menu options of a <select> form type.
   Attributes:
   • value="" --> Specifies the value to be associated with the <select> form type name if the menu option is selected.
   • selected --> Specifies that the menu option is selected or shown by default.
   The following HTML code segment is needed to produce a pull-down menu:
   Hide   Copy Code

   <form>
   What is your favorite meal?
   <select name="type of food">
   <option selected value="pizza">Pizza
   <option value="hamburgers/fries">Hamburgers and Fries
   <option value="tacos">Deluxe Tacos
   <option value="lasagna">Hot Lasagna
   <option value="chicken">Bar-b-Que Chicken
   <option value="burritos">Bean Burritos
   <option value="ribsteak">Prime Rib Steak
   </select> </form>

3. textarea: This element specifies a multi-line text area. The columns and rows attributes in the<textarea> specify the default dimensions of the field.Attributes:
   • name="" --> Gives the <textarea> element a name for CGI processing purposes.
   • rows="#" --> Specifies the number of visible <textarea> row dimensions.
   • cols="#" --> Specifies the number of visible <textarea> column dimensions.
   The following HTML code segment is needed to produce a multi-line text field:
   Hide   Copy Code

   <form>
   Enter comments:
   <textarea name="words" cols="45" rows="8">
   Start...
   </textarea>
   </form>

On a final note, when the "submit" button is clicked, the form data is sent to a CGI program (specified in the action attribute of the <form> taq) which should be running on a web server. The CGI program receives the form data and processes the data. If the CGI program is not created, the HTML form basically serves only a visual appeal with no interaction or processing capabilities.. It will only look like an online form on a web page until a CGI program is implemented to process the active form data.

With HTML forms covered in a brief fashion, we can now cover how image maps provide efficient navigational methods in an HTML document. Read on for more about image mapping and editing...

IMAGE MAPPING AND EDITING - IMPORTANCE OF BEING UNIQUE

Image Maps / Tricks

One of the most important aspects of web page and web site creation is devising a unique layout design that catches visitors' attention. A web site or web page should have an appropriate title, a logo based on the title, a few matching colors (for links, background colors, border colors, image colors, etc.), additional logos and images depicting document content, and finally an overall layout of some type that organizes and displays the document's content in a unique way, to set it apart from other web sites already in existence.

To be a successful image creator, a web designer must become familiar with a high-level paint program such as Paint Shop Pro 5. A web site layout is definitely the most important aspect of being unique, and a paint program plays a huge role in creating unique images. The layout of a web page should also make it very easy for visitors to understand how to navigate through the site, and it should provide easy navigational methods. Many web designers prefer a column on the left side of the web page to be designated as a navigational menu, and others prefer navigational menus extended horizontally across the top of the page. Whatever scenario designers choose, they should ensure, visitors will fully understand where the navigational menu is located and how to use it. It may take many attempts to design and create the perfect layout for a web page, but in the end, it is well worth the effort.

When creating and designing images for a web page, keep in mind the HTML aspect of image mapping. Image maps create linkable sections or "hotspots", in an image defined in HTML, by coordinates of the image. A web page could contain only one image, but the image could have ten "hot" spots on the image, used for linking to other web documents. Web document URLs are associated with the "hot spots". Image mapping is very useful for navigational menus, table of contents and toolbars.

From the HTML code point of view, image maps consist of three parts:

Firstly, some place in the HTML source of the body of the document, an image map must be declared using the <map> </map> element. This element has one attribute, name="", which is used to associate a name for the image map. Secondly, the <area> element, is placed inside the <map> </map> element and it can take the following attributes: shape="", coords="", href="",nohref="" and alt="". The shape="" and coords="" attributes define a region on the image. If no shape is specified, the default shape used is rectangle. Finally, the image search <img src="">element goes in the document wherever the "mapped" image will appear. The usemap="#" attribute must be included to specify the name of the image map to use.

Possible Shape Attributes:

• shape="rect" coords="left-x, top-y, right-x, bottom-y"
• shape="circle" coords="center-x, center-y, radius"
• shape="poly" coords="x1,y1, x2,y2, x3,y3, ..."

Note: x and y are measured in pixels from the left/top of the image.

Image Map Example:

Hide   Copy Code

<html>
<head><title></title></head>
<body>
<map name="areas">
<area shape="rect" coords="7,5,71,21" 
  href="http://warebiz.tripod.com/cpp.htm">
<area shape="rect" coords="80,5,143,21" 
  href="http://warebiz.tripod.com/html.htm">
<area shape="rect" coords="154,5,219,22" 
  href="http://warebiz.tripod.com/qbasic.htm">
</map>
<img src="http://www.codeproject.com/useritems/htmlguide/imgmapping.jpg" 
     width="225" height="26" alt="Sample image" usemap="#areas">
</body>
</html>

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

In conclusion, image maps can provide very efficient methods for providing navigational menus and toolbars as well as simply provide useful ways for users to find destinations to their interests. We will explore frames in the next section. Frames allow web designers to divide a web document into a specified number of "sections" or "frames", with each frame representing a web document. Read on for more...

FRAMES - STRUCTURING STATIC DOCUMENT LAYOUT

Frames allow a web page to be viewed as a window divided into a specific number of subwindows. In a web page, each frame will represent an HTML document. This allows for a web page to be divided into a specified amount of rectangular regions, with each region representing a different HTML document. Frames are commonly used when particular web content, such as a web page logo and navigational menu, needs to be displayed in multiple web pages. This allows for one frame region (such as the frame with the web page logo and navigational menu) to be static while other frame regions are being loaded with different web documents.

In a normal HTML document, the "body" section immediately follows the "head" section. When using frames, the "body" section will be moved to a "noframes" section where only browsers that do not support frames seek for information about the page. This calls for the normal "body" section of a frames web page to be replaced with a "frameset" section which defines the frame layout of the web document.

To define a web page using frames, web authors must use the opening and closing <frameset> </frameset> tags, which can also contain nested "framesets" and "frames" referencing the actual URLs of the web documents to be rendered in the frame cells. The <frameset> tag has the following attributes:

• row="#" --> specifies horizontal frame divisions represented by #; can be pixel values, percentage values, or * asterisk entry denoting whatever space is left.
• col="#" --> specifies vertical frame divisions represented by #; can be pixel values, percentage values, or * asterisk entry denoting whatever space is left.
• frameborder="#" --> specifies whether frame cells will have borders; 1 (default) representing show borders; 0 is often used with border="0" and framespacing="0"
• border="#" --> specifies the thickness of the border between cells; default value is 5.
• framespacing="#" --> specifies the thickness of the border between cells; default value is 5.

To specify the web documents to be rendered in each frame division, use the <frame> element, which must be placed inside the <frameset> </frameset> tags. The <frame> element has the following attributes:

• src="URL" --> specifies the URL of the web document to be placed inside the current frame cell.
• name="" --> declares a name for the current frame cell so <a>, <base>, <area> and <form>can use their target="" attribute to render documents in the cell.
• frameborder="#" --> specifies whether frame cells will have borders; 1 (default) representing show borders; 0 no borders; also overrides <frameset> info.
• marginwidth="#" --> specifies left and right margins of the cell represented by #
• marginheight="#" --> specifies top and bottom margins of the cell represented by #
• scrolling="" --> specifies whether scroll bars will be displayed if needed; yes represents use scroll bars, no represents no scroll bars.
• noresize --> disables visitor ability to resize frame regions

The <noframes> element is used to provide information to browsers which do not support frames. A browser that supports frames will ignore the text inside <noframes>, but a browser that does not support frames will ignore the <noframes> tags and display the internal text. Text inside the<noframes> </noframes> tags should be used to supply the visitor with an alert that the web page is constructed with frames and also a link to a web page that is not constructed using frames.

Frame cells can also be given a name for hypertext referencing techniques. This allows for hyperlinks to place certain web documents into certain frame cells. This is a common technique when using frame documents. This is accomplished by giving names to frame cells through the use of the name=""attribute of the <frame> tag. Then, the hyperlink can issue an operation using the target=""attribute of the <a> tag, specifying the name of the frame cell to use as the target value. If no target value is specified, the web document will be displayed in the current frame cell. Elements that are capable of using the target="" attribute are <a>, <base>, <area> and <form>.

Frames also come equipped will four pre-defined frame names used when specifying target attributes for hyperlinks. The predefined frame names are as follows:

• _blank --> causes the linked web document to be displayed in a new unnamed browser window
• _top --> causes the linked web document to be displayed in a full window space of the current browser window
• _parent --> causes the linked web document to be displayed in the frame cell occupied by the<frameset> parent of the current web document
• _self --> causes the linked web document to be displayed in the current frame cell

Study the following frame web document examples to see how all frame elements combine to complete the structure layout of a frames web document.

The following is an example of how frames can be used to design a simple links navigation as a left pane region of the web page, with the leftover space of the document designated as the current web page's information.

Hide   Shrink    Copy Code

-----------------------------------------------------------------
<html>
<head><title>Simple Web Page Using  2 Frames (Main Page)</title>
</head>

<frameset cols="20%, *">
   <frame src="frame1.htm" name="contents" noresize>
   <frame src="frame2.htm" name="pageinfo" noresize>

   <noframes>
       <body>
               This web page is constructed using frames.
               Your web browser does not support frames.
               Seek, nonframes version.
       </body>
   </noframes>
</frameset>

</html>
-----------------------------------------------------------------
<html>
<head><title>Left Pane (frame1.htm)</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#FF0000">

<h3>Page Contents</h3>

<br>
<h5>
    Link 1<br><br>
    Link 2<br><br>
    Link 3<br><br>
    Link 4<br><br>
</h5>

</body>
</html>
-----------------------------------------------------------------
<html>
<head><title>Right Pane (frame2.htm)</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#FF0000">

<h3 align="center">Information Page</h3>

<br>
<h5>Welcome. Here you can find....</h5>

</body>
</html>
-----------------------------------------------------------------

Click on the following link to see the above code in rendered form: Frames Example 1.

The following is an example of how frames can be used to display a website logo and title in the top region of the layout, with a left pane region containing navigational links, and a right pane lower region used as the current web document information.

Hide   Shrink    Copy Code

-----------------------------------------------------------------
<html>
<head><title>Simple Web Page Using 3 Frames (main page)</title>
</head>

<frameset rows="10%, *" >
   <frame src="frame22.htm" name="head" noresize>

   <frameset cols="20%, *" >
      <frame src="frame1.htm" name="contents" noresize>
      <frame src="frame2.htm" name="pageinfo" noresize>
   </frameset>

   <noframes>
       <body>
               This web page is constructed using frames.
               Your web browser does not support frames.
               Seek, nonframes version.
       </body>
   </noframes>
</frameset>

</html>
-----------------------------------------------------------------
<html>
<head><title>Top Frame (frame22.htm)</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#FF0000">

<h2 align="center">Web Page Logo / Title</h2>

</body>
</html>
-----------------------------------------------------------------
<html>
<head><title>Right Lower Pane (frame2.htm)</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#FF0000">

<h3 align="center">Information Page</h3>

<br>
<h5>Welcome. Here you can find....</h5>

</body>
</html>
-----------------------------------------------------------------
<html>
<head><title>Left Lower Pane (frame1.htm)</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#FF0000">

<h3>Page Contents</h3>

<br>
<h5>
    Link 1<br><br>
    Link 2<br><br>
    Link 3<br><br>
    Link 4<br><br>
</h5>

</body>
</html>
-----------------------------------------------------------------

Click on the following link to see the above code in rendered form: Frames Example 2.

Frames are useful because they can make particular regions in a web document remain "static" while other regions render new web documents. This allows web designers to save time by not writing repetitive HTML code for multiple documents; they can simply "include" the code HTML as a "static" frame. On the other hand, there are serious drawbacks that have led many designers to avoid using frames. Firstly, without diligent updating, a website constructed using frames can lead visitors to "mystery" destinations, such as clicking on a link and being sent to a wrong web page. Book marking can become tricky because the address of the website will only show the top-level web document, normally the frames specification page. This causes many visitors to bookmark web pages that they did not intend to bookmark. Also, older browser versions may not be able to support frame documents. Whatever the case may be, any website created using frames can also be created without frames, and the non-frames version will generally be more stable and efficient.

You have reached the end of the HTML Made Simple tutorial. If you have any questions about anything in the tutorial, or have a question about particular HTML code used in the tutorial, please contact me about it and I will get back with you as soon as possible. Happy coding and be sure to check back for updates!