HTML Made Easy

C:\Users\Sowmia Narayanan\Desktop\baba.
tex Wednesday, February 15, 2017 8:55 PM

Click here to Skip to main content
Sign up for our free weekly Web Developer Newsletter.
12,739,379 members (38,469 online)
Sign in
Home
Click here to Skip to main content
home
articles
Chapters and Sections>
loading
Search
Latest Articles
Latest Tips/Tricks
Top Articles
Beginner Articles
Technical Blogs
Posting/Update Guidelines
Article Help Forum
Article Competition
-1-
C:\Users\Sowmia Narayanan\Desktop\baba.tex Wednesday, February 15, 2017 8:55 PM
Submit an article or tip
Post your Blog
quick answers
Ask a Question about this article
Ask a Question
View Unanswered Questions
View All Questions...
Linux questions
C# questions
ASP.NET questions
fabric questions
C++ questions
discussions
All Message Boards...
Application Lifecycle>
Running a Business
Sales / Marketing
Collaboration / Beta Testing
Work Issues
Design and Architecture
-2-
ASP.NET
JavaScript
C / C++ / MFC>
ATL / WTL / STL
Managed C++/CLI
C#
Free Tools
Objective-C and Swift
Database
Hardware & Devices>
System Admin
Hosting and Servers
Java
.NET Framework
Android
iOS
Mobile
SharePoint
Silverlight / WPF
Visual Basic
Web Development
Site Bugs / Suggestions
-3-
Spam and Abuse Watch
features
Competitions
News
The Insider Newsletter
The Daily Build Newsletter
Newsletter archive
Surveys
Product Showcase
Research Library
CodeProject Stuff
community
Who's Who
Most Valuable Professionals
The Lounge
The Insider News
The Weird & The Wonderful
The Soapbox
Press Releases
Non-English Language >
General Indian Topics
General Chinese Topics
-4-
help
What is 'CodeProject'?
General FAQ
Ask a Question
Bugs and Suggestions
Article Help Forum
Site Map
Advertise with us
About our Advertising
Employment Opportunities
About Us
Articles Web Development HTML / CSS HTML
Article
Browse Code
Stats
Revisions
Alternatives
-5-
Comments (41)
Add your own

alternative version
Tagged as
HTML
Dev
Stats
352.4K views
128 bookmarked
Posted 16 Jan 2003
HTML Made Simple
Mike Ware, 17 Dec 2003
4.66 (77 votes)
Rate this:
vote 1vote 2vote 3vote 4vote 5
Introduces a beginning webmaster to the basics but essentials of many HTML topics.
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
-6-
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
-7-
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:
-8-
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:
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>
-9-
<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.
-10-
<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
<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
-11-
<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>
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:
Hide Copy Code

<font face="arial" size=4pt color=#000080>
4PT font size rendered in Arial Type</font>
-12-
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>
The above HTML code would produce the results in the following box:
1 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
-13-
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>
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>
-14-
The above code would produce the results shown in the following box:
1.List Item 1
2.List Item 2
3.List Item 3
4.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
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>
</dl>
</body>
</html>
Word 1
This corresponds to the meaning of word 1.
Word 2
Word 3
Word 4
-15-
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 4</dd>
</dl>
</body>
</html>
Sample image List item 1
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.
The target="_blank" attribute will allow the link to open the document in a new browser window
-16-
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 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.
-17-
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:
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
<td></td>
Defines a table data cell within the table row. Note: a data cell must be placed inside a table
row. Attributes:
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
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>
-18-
<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
-19-
width=250 border=0 bgcolor=#C0C0C0><tr><td>
width=100% border=0 bgcolor=#FFFFFF><tr><td>
width=100% border=0 bgcolor=#114E86><tr><td>
width=100% border=0 bgcolor=#FFFFFF><tr><td>
width=100% border=0 bgcolor=#114E86><tr><td>
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>
Table Example 4: (complex web page using a navigational left pane vertical bar)

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


<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>
<font size=2pt face="arial">
<b>--></b> <a href="/">Nav Link 2</a></td></tr>
<font size=2pt face="arial">
<b>--></b> <a href="/">Nav Link 4</a></td></tr>
</table>
</td>

-20-

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

</tr>
</table>
</td></tr>
</table>
</center>
  
--> 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
-21-
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
HTML forms. 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
-22-
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.
-23-
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
-24-
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">
href="http://warebiz.tripod.com/html.htm">
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:
<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">
Sample image
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.
-25-
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
-26-
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.

-----------------------------------------------------------------
<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>
<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.
-27-
-----------------------------------------------------------------
<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>
<h2 align="center">Web Page Logo / Title</h2>
</body>
</html>
-----------------------------------------------------------------
<html>
<head><title>Right Lower Pane (frame2.htm)</title>
</head>
<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>
<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>
-----------------------------------------------------------------
-28-
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!
License
This article has no explicit license attached to it but may contain usage terms in the article
text or the download files themselves. If in doubt please contact the author via the discussion
board below.
A list of licenses authors might use can be found here
Share
email
twitter
About the Author
Mike Ware
-29-
United States United States
I am currently a junior computer science/computer security double major at Fairmont State

University.
You may also be interested in...
Recursion made simple
Generate and add keyword variations using AdWords API
NHibernate Made Simple
Window Tabs (WndTabs) Add-In for DevStudio
SAPrefs - Netscape-like Preferences Dialog
WTL for MFC Programmers, Part IX - GDI Classes, Common Dialogs, and Utility Classes
Comments and Discussions
You must Sign In to use this message board.
Search Comments
.
SpacingRelaxedCompactTight LayoutNormalOpen TopicsOpen AllThread View Per page102550
First Prev Next
-30-
General good one Pin member Member 11574067 1-Apr-15 11:24
General My vote of 5 Pin member fredatcodeproject 5-Jul-12 3:18
Question how to edit more then 10000 html pages. Pin member Member 3113225 17-Aug-09 2:25
General Update needed on <frameset></frameset> [modified] Pin member Eugene Toh 27-Mar-08 4:14
General Re: Update needed on Pin member RichardGrimmer 2-Jun-08 3:03
General Re: Update needed on Pin member Eugene Toh 2-Jun-08 3:11
General Re: Update needed on [modified] Pin member Eugene Toh 2-Jun-08 6:07
General Great job Pin member Mrs. Burmeister 3-Mar-08 9:47
General z-index with frames Pin member MRezania 6-May-04 5:28
General Good Pin member SledgeHammer 13-May-03 21:52
General This is not a complete HTML Guide Pin member Job52 6-Mar-03 5:33
General HTML compendium in one page Pin member Gabriel 2 4-Mar-03 11:16
General The HTML is not what you wish it be... Pin member Petr Prikryl 3-Mar-03 21:15
-31-
General Re: The HTML is not what you wish it be... Pin member Petr Prikryl 3-Mar-03 21:20
General Re: The HTML is not what you wish it be... Pin member Anthony_Yio 4-Mar-03 16:07
General Re: The HTML is not what you wish it be... Pin member Anthony_Yio 4-Mar-03 16:10
General Re: How can I retrieve the Html source code ? Pin member Aly05 6-Nov-05 12:05
General Re: The HTML is not what you wish it be... Pin member pblais 3-Sep-08 4:03
Question What about CSS? Pin member kalme 19-Feb-03 0:49
Answer Re: What about CSS? Pin member Mike Ware 19-Feb-03 9:19
General Re: What about CSS? Pin suss Anonymous 4-Mar-03 11:23
General erroneous Pin member MessyTheFace 21-Jan-03 17:19
General Re: erroneous Pin member tommy skaue 21-Jan-03 21:52
General Re: erroneous Pin member MessyTheFace 22-Jan-03 1:50
General Re: erroneous Pin member MessyTheFace 22-Jan-03 2:40
General Re: erroneous Pin member jhwurmbach 22-Jan-03 3:05
General Re: erroneous Pin admin Chris Maunder 17-Feb-03 9:42
General Re: erroneous Pin member tommy skaue 17-Feb-03 21:30
General Re: erroneous Pin member pfaff 28-Jan-03 12:35
General Re: erroneous Pin member Jrgen Sigvardsson 15-Feb-03 8:27
General Nicely Done! Pin member Roger Wright 18-Jan-03 5:48
Last Visit: 31-Dec-99 19:00 Last Update: 15-Feb-17 0:07 Refresh 1
-32-
General General News News Suggestion Suggestion Question Question Bug Bug Answer
Answer Joke Joke Praise Praise Rant Rant Admin Admin
Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right

to switch pages.
ASP.NET Dec 2002
Go to top
Permalink | Advertise | Privacy | Terms of Use | Mobile

Web01 | 2.8.170209.1 | Last Updated 18 Dec 2003
Select Language
Article Copyright 2003 by Mike Ware

Everything else Copyright CodeProject, 1999-2017
Layout: fixed | fluid
-33-

Гораздо больше, чем просто документы.

HTML Made Easy

Загружено:

Сведения о документе

Описание:

Дата загрузки

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Описание:

Авторское право:

Доступные форматы

HTML Made Easy

Загружено:

Описание:

Авторское право:

Доступные форматы

Похожие издания

C:\Users\Sowmia Narayanan\Desktop\baba.

tex Wednesday, February 15, 2017 8:55 PM

Sign up for our free weekly Web Developer Newsletter.

12,739,379 members (38,469 online)

Click here to Skip to main content

Chapters and Sections>

Article Help Forum

Submit an article or tip

Post your Blog

Ask a Question about this article

View Unanswered Questions

View All Questions...

All Message Boards...

Collaboration / Beta Testing

Design and Architecture

ATL / WTL / STL

Objective-C and Swift

Hardware & Devices>

Hosting and Servers

Site Bugs / Suggestions

The Insider Newsletter

The Daily Build Newsletter

Most Valuable Professionals

The Insider News

The Weird & The Wonderful

Non-English Language >

General Indian Topics

General Chinese Topics

Bugs and Suggestions

Article Help Forum

About our Advertising

Articles Web Development HTML / CSS HTML

Add your own

Posted 16 Jan 2003

HTML Made Simple

Mike Ware, 17 Dec 2003

4.66 (77 votes)

Getting Started with HTML - First Things First

Ground Zero - Where Do I Begin?

Hide Copy Code

Non-Standard JavaScript Supported Attributes

Hide Copy Code

Examples of Hexadecimal Colors

Hide Copy Code

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

Hide Copy Code

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

HTML Tags - It's All About Tags

Hide Copy Code

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

Character Formatting - How to Spice Up Text

The following is a listing of popular physical type styles:

For an example, consider the following HTML code segment:

Hide Copy Code

Using bold characteristic tag.

Using italic characteristic tag.

Using underline characteristic tag.

Using fixed width font characteristic tag.