Bare Bones Guide To HTML

Welcome to HTML, the programming language that makes web pages look the way they do when you view them in your web browser. This guide is not designed to teach HTML. It is for the user that already has an introductory understanding of how HTML works and needs a reference to HTML tags and what they do to expand their skills.

If you are using a hard copy version of this guide, the pages may not break in convenient places. An HTML document is one long file and prints out as such. It is not possible to control where the page breaks before printing. This may mean that an instruction at the end of a page like "see the image below" will refer to an image at the top of the next page.

If you are viewing this live online on your computer, this will not be an issue.

Bare Bones Index
Click on a link below to jump to that section of the guide.

1. The Default Set of Document Tags
All html files must have the following basic set of tags entered BEFORE you start adding text and images to your web pages.

<HTML>

<HEAD>

<TITLE>Text placed here will be displayed at the top of the browser window, not on your page</TITLE>

</HEAD>

<BODY>

(All your text and images, will go here, between the two body tags)

</BODY>

</HTML>
Up To Top

2. How to Change Text, Link and Page Background Colors
It is possible to add additional elements named "attributes" to the opening <body> tag. These attributes, will add an additional instruction to the objects placed between the two tags. For example, it is possible to specify the background color of a page, the color of links and the color of all the text on the page by adding the following "attributes" to the <body> tag.

bgcolor defines the background color of a page
text defines the color of all the text on a page
link defines the color of a "normal link," one that you have not clicked on yet
alink defines the color an active link the color a link changes to the instant it is clicked on
vlink defines the color of a visited link AFTER it has been clicked on

The code that follows the attribute name defines the exact color
In the example above where five attributes have been added to the opening <BODY> tag, background color is defined as bgcolor="#000000" The six character code of six zeros 000000 is the color black.
The text="#ffffff" attribute uses the six character code ffffff, this defines the color white.
You get these six character hexadecimal codes from color charts or other web publishing tools available free on the Internet. Some books also have hex code color charts.

In the example above, the page background will be black, text white, link red, visited link yellow and active link blue.

Add these attributes to the body tag on a test page, type a little text, create a few links and then view the page with your web browser. If you are online, click on one of the links you created to go to the linked website. Then, use the "Back" button on your browser to return to your test page, you will see that the visited link is now yellow, not the previous color, red.

There are also sixteen predefined color names you may use in place of the Hexadecimal codes. These color names are:

silver
gray
maroon
green
navy
purple
olive
teal

white
black
red
lime
blue
magenta
yellow
cyan

The following line of code shows how you can use these. This is a bit easier but, limits you to 16 colors out of thousands. Note that the # sign is not used.

<body bgcolor="black" text="white" link="red" vlink="blue" alink="yellow">

3. How To Put a Background Image on Your Page
It is possible to specify a background image for the whole page instead of a color. In the example below, the background image file is named clouds.gif and is inside the images folder which is inside the root website folder.
Note that the attribute is named "background", NOT bgcolor.

You may also add all the other attributes to a body tag that specifies a background image as seen in the second line of code above.
In all of the above examples, the six character hex code is surrounded with quotation marks and a number sign as in the following example; text="#ffffff". The quotation marks " " and the number sign # are critical, if one is missing, the color or image will NOT display.

Up To Top

4. Heading Tags

Text placed between the header tags will be large or small depending on the number following the H inside the tag.
The header tags also will be bold and have a double space inserted above and below them, this is the default style.
Header tags are normally used for a short title line.
As you can see in the following example, the number 1 defines a large text size and number 6 a very small text size.
There is no direct relationship between Header Tag size word processor font size.

<h1>Seattle</h1>

<h2>Seattle</h2>

<h3>Seattle</h3>

<h4>Seattle<h/4>

<h5>Seattle</h5>

<h6>Seattle</h6>

Up To Top

5. Font Tag Basics

Font tags define the size and color of the text that is contained between the two font tags.
Text placed between the font tags will be large or small depending on the number following the equals sign in the expression font size=X inside the tag, where X =a number from 1 to 7.
As you can see in the following example, the number 1 defines the smallest text size and number 7 the largest size. If you use the number 10, it will be no bigger than the number 7 size. Don't use numbers larger than 7.
There is no relationship between HTML font size and word processor font size.
The text is NOT displayed as bold and no double spaces above and below are inserted as happens with the Header tags.

The Font Tags

<font size="1">Boston</font>

<font size="2">Boston</font>

<font size="3">Boston</font>

<font size="4">Boston</font>

<font size="5">Boston</font>

<font size="6">Boston</font>

<font size="7">Boston</font>
Up To Top

6. Changing the color of text inside the font tags

It is possible to change the color of any text placed between the two font tags by adding the color="XXX" attribute to the font tag where XXX = a hexadecimal code.
You may change the color of one word, a phrase, paragraph or one letter of a word if desired. You could make every letter in a word a different color.
You may also specify a whole page text color in the body tag as explained above. You may then specify the color of specific text on the page as a different color than the whole page color by specifying a font color in the font tag.

<font size="4" color="#299c39">Boston</font> (the hex code "299c39" will make "Boston" green)

You may also use any of the sixteen predefined color names in place of the Hexadecimal codes. These color names are: silver, gray, maroon, green, navy, purple, olive, teal, white, black, red, lime, blue, magenta, yellow and cyan

The following line of code shows how you can use these where the predefined font attribute "red" will make "Boston" red.

<font size="4" color="red">Boston</font>

7. Changing the font type by specifying a font "face" or style
Please note, the font you specify, must be installed on the viewers computer. To be safe, stick to the fonts indicated below, these are the fonts that come from the factory with both Windows 95 and Macintosh operating systems.

You may specify more than one font if you wish. This is done to create a better chance of one of the specified fonts being on the users machine. See example 8 below and note the commas that separate the font styles. The browser will try to display arial, the first font first. If it can't find arial on the users computer it will try the next one, in this case helvetica.

<font size=4 face="arial">Boston</font>
<font size=4 face="comic sans">Boston</font>
<font size=4 face="georgia">Boston</font>
<font size=4 face="verdana">Boston</font>
<font size=4 face="helvetica">Boston</font>
<font size=4 face="times">Boston</font>
<font size=4 face="times new roman">Boston</font>
<font size=4 face="arial, helvetica, sans serif">Boston</font>

8. Combining font size, color and style at the same time

<font size="4" face="arial" color="#ff0000">Boston</font>

Up To Top

9. Text Styles
Place any text between these tags and the text will display in the browser with the specified style.

<b>Bold</b> - Makes the text bold

<i>italic</i> - Makes the text Italic

<u>Underline</u> - Places an underline (use this carefully, remember hypertext links are also underlined. An underline of this type could confuse your visitor. They might see the underline, think it is a link and try to click on it.

<strike>~~Strike through~~</strike> - Creates a strike through line, often used in legal documents.

10<sup>2</sup> will look like this - 10² - Creates a super script.

H<sub>2</sub>0 will look like this - H₂0 - Creates a subscript.

10. The Paragraph and Line Break Tags

Paragraphs are indicated by creating a double space between each paragraph, business letter style. To create a double space, place the text that will be in any paragraph in the paragraph tag container.

<P> Text Goes Here </P>

The line break tag that creates a single space. You can use as many of these as you wish in sequence to create vertical space. The line break tag looks like this.

<BR>

Several line break tags in used sequence to create 5 single spaces will look like this.

<BR>
<BR>
<BR>
<BR>
<Br>

Up To Top

11. The Preformatted Tag Set
It is possible to type text formatted with spaces created in your text editor with the space bar. Then, enter the <pre> tag above the formatted text and the </pre> tag after the text as shown below.

These are common fruits and their prices available in the informal, open air, farmers markets on the Hawaiian Island of Kauai.

<pre>

Mangos xxxxxxx Papaya xxxxxxx Lychee xxxxxxx Coconuts

2/$1.00 xxxxxxx 4/$1.00 xxxxxxx 20/$2.00 xxxxx 1/$1.00

</pre>

The "<pre>" formatted text above will look like the table below when viewed with a web browser.

Mangos      Papaya         Lychee      Coconuts


2/$1.00     4/$1.00        20/$2.00     1/$1.00

Up To Top

12. The Blockquote Tags

<blockquote>The text between the blockquote tags will be indented to the right in relation to the left margin and the text above it. It gives emphasis to text and is an aesthetically pleasing formatting technique.</blockquote>

13. Left Justification, Right Justification & Centering of Text

The center tags will center text or images that are placed between the two center tags.

<center>Two giraffes dining at sunset</center>

This will place the text in the center of the page as shown below.

Two giraffes dining at sunset

There are three additional ways to control text placement.

1. <p align="center"> </p> When text, images or other page objects are placed between this tag set, the text or other object will be centered.

<p align="center">Welcome to Honolulu</p> looks like this:

Welcome to Honolulu

2. <p align="right"> </p> When text, images or other page objects are placed between this tag set, the text or other object will be aligned to the right margin.

<p align="right">Welcome to Honolulu</p> looks like this:

Welcome to Honolulu

3. <p align="left"> </p> When text, images or other page objects are placed between this tag set, the text or other object will be aligned to the left margin.

<p align="left">Welcome to Honolulu</p> looks like this:

Welcome to Honolulu

How to use the paragraph alignment tag to align images

You can use the same set of alignment attributes to align images on a page. In the example below, the image is aligned to the center.

<p align="center"><img src="images/giraffes.GIF"></p>

In the example below, the image is aligned to the right.

<p align="right"><img src="images/giraffes.GIF"> </p>

Up To Top

13a. Centering Images using legacy HTML code

<center><img src="images/giraffes.GIF"></center> This will center the image in the page as shown below.

14 Lists
There are four kinds of lists. The two most common are Ordered Lists (numbered) and Unordered Lists (bulleted). The code is in the left box and the result is 1n the right box in the examples below.

Note that each item in either list is preceded by the <li> or list item tag and closes with the closing list item tag </li>.

14a. OrderedList (numbered)

This is the code This is what it will look like when
displayed in your browser

Directions For Assembly

<ol>

<li>Open the futon sofa box</li>

<li>locate all the parts necessary for assembly</li>

<li>find the directions</li>

<li>follow the directions to assemble the futon sofa</li>

</ol>

Directions For Assembly

Open the futon sofa box
locate all the parts necessary for assembly
find the directions
follow the directions to assemble the futon sofa

14b. Unordered List (bulleted)

This is the code This is what it will look like when
displayed in your browser

Directions For Assembly

<ul>

<li>Open the futon sofa box</li>

<li>locate all the parts necessary for assembly</li>

<li>find the directions</li>

<li>follow the directions to assemble the futon sofa</li>

</ul>
Directions For Assembly

Open the futon sofa box
locate all the parts necessary for assembly
find the directions
follow the directions to assemble the futon sofa

Up To Top

15. About Hyper Links
The code for a hyperlink transforms a word or phrase (text), into an interactive, clickable link. When the visitor clicks on this underlined link, they will be transported to another web page.

The tags are named Anchor Tags.
The anchor tag looks like this: <a href="XXX">ZZZ</a>
This is the beginning Anchor tag: <a href="XXX">
This is the closing Anchor tag: </a>
XXX=the URL (absolute or relative)
ZZZ = the text or image to be clicked on.

For example: <a href="XXX">ZZZ</a>

Where XXX = http://www.yahoo.com and ZZZ = Yahoo

The correct hyperlink code will be: <a href="http://www.yahoo.com">Yahoo</a>

Please note every detail, especially the quotation marks. If one thing is missing, the link will not work. If you discover that a link is dead, go back to your code and analyze it closely.

15a. Absolute Hyper Links
An "Absolute Link" links out to a URL (Internet address) somewhere out on the Internet. It will always have the HTTP:// prefix.

<a href="http://www.yahoo.com">Yahoo</a>

<a href="http://www.amazon.com">Amazon.com, worlds largest bookstore</a>

<a href="http://www.nationalgeographic.com">National Geographic Online</a>

15b. Relative Hyper Links
A "Relative Link" links to another file that is part of your website. Normally, this is another file in your web folder. This is how you make a link from one of your pages to another in the SAME folder. The web folder is the folder where you keep all the html pages and images that will be part of your website.

Relative links are also used to create navigation links at the bottom of your pages that allow users to get from one page to the next as well as other key pages in your website.
Note that the code is similar to the code for Absolute links, with one exception. the name of the referenced file has no HTTP:// prefix. The referenced file is a "local" file, it lives in your folder.

<a href="Honolulu.html">Things To Do In Honolulu</a>

<a href="baseball.html">Major League Statistics</a>

<a href="volcano_photos.html">Recent Hawaiian Eruptions</a>

16. The Email Hyperlink
It's possible to create a hyperlink that when clicked on by the viewer will automatically open an email screen in the browser, allowing the viewer to type and send an email message to the email address specified in the link.

In order to do this, the viewer must configure their browser's email preferences with their email settings for their account at their Internet service provider. Often, in a training lab setting, the browser will not be configurable and you will not be able to experience the effect of your work. If this is the case, you will have to trust that it will work, or try it out on your own computer after configuring it with your email settings. The code that will create the link is shown below.

<a href="mailto:jdoe@yahoo.com">email me!</a>

Don't forget the colon after mailto:

In the example above, "jdoe@yahoo.com" is a fictitious email address, replace jdoe@yahoo.com with your email address.

Up To Top

17. Images as Hyperlinks
The code shown below will make any image a link to an absolute or relative destination file. You can make an image a clickable link to a site out on the Internet or to one of your local pages in your root folder. Note that the image has a thin blue border around it. This is a visual clue that the image is a link.

You may not like the blue border. You can remove it by adding the border=0 attribute to the image tag as shown below.

Up To Top

18. Working With Images

Web Image Basics

All images must be in either .JPG or .GIF format
If they are in another format, you will need to convert them with a graphics program or utility.
The .JPG or .GIF file extension must be at the end the image name as in "sun.jpg" or "moon.gif"
Until faster Internet access is available to residential connections, it is a good rule of thumb to not put more than two or three images on a web page.
It is best to size images to a 250 pixel width or less.
Put all your images inside an "images" folder inside your web folder.

How to display larger images

If you want to display larger images, use the "thumbnail image" strategy.
Open your original large image with your graphics program
Save a copy of the original, work with the copy, never work on the original.
Make a 100 pixel width thumbnail image of the original, place this on an HTML document.
Make a second page, place the large image on this page
Make the thumbnail on the first page an image link to the second page (the one that has the larger picture on it).
This will make for a fast page load on the "thumbnail page."
It will allow your user to decide if they want to click on the thumbnail and view the larger image
This is how many online galleries are set up. An opening page may have 2 - 10 thumbnail images
Each one clicks through to another page that is part of your overall web site.

How to save any image from the Internet, it's easy!

Windows

First make a folder to download the images to. Place it on your desktop or any other location on your hard drive. You can name it "image downloads" or something like that.
Place the mouse cursor on the image.
Right click, a context menu will pop up.
From the context menu select "Save Picture As"
Navigate to your "image downloads" folder.
Rename the image if necessary. Sometimes the names they have from the Internet are very cryptic. If you do not rename them, you will never remember what they are.
Click on "Save"
Practice this procedure using this image

Macintosh

First make a folder to download the images to. Place it on your desktop or any other location on your hard drive. You can name it "image downloads" or something like that.
Place the mouse cursor on the image.
Press down on the clicker and continue to hold it down, a context menu will pop up.
From the context menu select "Download Image To Disc"
Navigate to your "image downloads" folder.
Rename the image if necessary. Sometimes the names they have from the Internet are very cryptic. If you do not rename them, you will never remember what they are.
Click on "Save"
Practice this procedure using this image

19. The Image Tag Code
This is a complete image tag - <img src="images/giraffes.gif">
The image code is made up of two parts

The image tag <img src="XXX"> (Note this is a single tag, there is no closing image tag.)
The path to the image - images/giraffes.gif
Where XXX = the path to the image from the web page inside your "root" web folder. In this case the image "giraffes.gif " is located inside a folder named "images" indicated by "images/"
Note the forward slash between images and giraffes.gif

Remember, the image is inside the "images" folder, that is why the word images precedes the image file name. The front slash / tells the browser to look inside the images folder for giraffes.gif.

20. How to Align Images With Adjacent Text

The single most important thing to remember about a web page image is that it is treated just like another word on the page.

In the examples below, look for the image tags and the alignment (align=xxx) attributes, where xxx will be one of five attributes that control how adjacent text is laid out relative to the image. These five alignment attributes are top, middle, bottom, left, right.

Two Giraffes At Sunset <img src="images/giraffes.gif ">
will look like the image below. This is the default alignment scheme if no alignment attributes are included inside the image tag.

Two Giraffes At Sunset

Or, it may look like this if the code is written like as follows:
<img src="images/giraffes.gif"> Two Giraffes At Sunset

Two Giraffes At Sunset

Two Giraffes At Sunset <img src="images/giraffes.gif" align="middle"> will look like the image below.

Two Giraffes At Sunset

Two Giraffes At Sunset <img src="images/giraffes.gif" align="top"> will look like the image below.

Two Giraffes At Sunset

Two Giraffes At Sunset <img src="images/giraffes.gif" align="bottom"> will look like the image below.

Two Giraffes At Sunset

21. Text Wrapping

Lets look at what happens when a large amount of text is aligned using the align="top" attribute. As you can see in the next image, the results are less than pleasing. When the text reaches the right margin of the page it returns under the image.

These photos are very special. It is difficult to get close to Giraffes. They are very sensitive to sound and can hear a human coming at great distances. We were fortunate to capture this photo. We were downwind from them and had been lying in wait for six hours in a well disguised blind. Our camera was mounted near the watering hole and operated remotely.

There is a solution, you can use the align="left" and align="right" attributes to wrap text down the left or right side of an image. The next section describes how to do this.

22. How To Wrap Text Around an Image

In the images below, the align="left" and align="right" attributes are used. These two attributes will make the text wrap around the images, a visually pleasing effect.

The "left" and "right" alignment attributes refer to where the image will be placed relative to the text. In the first example below, the image has the align="left" attribute. This puts the image to the left of the text.

These photos are very special. It is difficult to get close to Giraffes. They are very sensitive to sound and can hear a human coming at great distances. We were fortunate to capture this photo. We were downwind from them and had been lying in wait for six hours in a well disguised blind. Our camera was mounted near the watering hole and operated remotely.
<img src="images/giraffes.gif" align="left"> will look like the image below.

These photos are very special. It is difficult to get close to Giraffes. They are very sensitive to sound and can hear a human coming at great distances. We were fortunate to capture this photo. We were downwind from them and had been lying in wait for six hours in a well disguised blind. Our camera was mounted near the watering hole and operated remotely.

These photos are very special. It is difficult to get close to Giraffes. They are very sensitive to sound and can hear a human coming at great distances. We were fortunate to capture this photo. We were downwind from them and had been lying in wait for six hours in a well disguised blind. Our camera was mounted near the watering hole and operated remotely.
<img src="images/giraffes.gif" align="right"> will look like the image below.

These photos are very special. It is difficult to get close to Giraffes. They are very sensitive to sound and can hear a human coming at great distances. We were fortunate to capture this photo. We were downwind from them and had been lying in wait for six hours in a well disguised blind. Our camera was mounted near the watering hole and operated remotely.

23. How to Create Horizontal Space Around an Image

In the next two images, the hspace="xx" attribute has been added to the image tag. It controls the space in pixels between the edge of the image and the adjacent text. For reference, 72 pixels=1 inch.

These photos are very special. It is difficult to get close to Giraffes. They are very sensitive to sound and can hear a human coming at great distances. We were fortunate to capture this photo. We were downwind from them and had been lying in wait for six hours in a well disguised blind. Our camera was mounted near the watering hole and operated remotely.
<img src="images/giraffes.gif" align="left" hspace="10"> will look like the image below.

These photos are very special. It is difficult to get close to Giraffes. They are very sensitive to sound and can hear a human coming at great distances. We were fortunate to capture this photo. We were downwind from them and had been lying in wait for six hours in a well disguised blind. Our camera was mounted near the watering hole and operated remotely.

These photos are very special. It is difficult to get close to Giraffes. They are very sensitive to sound and can hear a human coming at great distances. We were fortunate to capture this photo. We were downwind from them and had been lying in wait for six hours in a well disguised blind. Our camera was mounted near the watering hole and operated remotely.
<img src="images/giraffes.gif" align="right" hspace="10"> will look like the image below.

These photos are very special. It is difficult to get close to Giraffes. They are very sensitive to sound and can hear a human coming at great distances. We were fortunate to capture this photo. We were downwind from them and had been lying in wait for six hours in a well disguised blind. Our camera was mounted near the watering hole and operated remotely.

24. How to Create Vertical Space Around an Image

If your text is long enough to wrap around the bottom of the image, you can add the vspace="n" attribute where n=5 or any other number you choose. Again, the number specifies the space in pixels between the bottom of the image and the top of the text that wraps under the image.

<img src="images/giraffes.gif" align="left" hspace="10" vspace="5"> will look like the image below.

These photos are very special. It is difficult to get close to Giraffes. They are very sensitive to sound and can hear a human coming at great distances. We were fortunate to capture this photo. We were downwind from them and had been lying in wait for six hours in a well disguised blind. Our camera was mounted near the watering hole and operated remotely.

These images were taken in December 1997 during one of the worst droughts ever experienced in the Kalahari. Most animals were desperate in their search for food and water. Hundreds of thousands of animals have died over the last two years and the human populations that depend on these animals for food have suffered greatly. The situation is dire, we can only appeal to the gods for relief. In times like this, you become acutely aware of how fragile our planet is and the relative insignificance of all of human technology in the face of nature's whims.

25. HTML Tables

HTML Tables will give you much more control over where and how images and graphics are displayed on your pages. The following examples are an introduction to tables. Tables are quite complicated and will take considerable time to learn well. The code that follows is designed to get you started.

What are tables? Tables are simply a grid of squares or rectangles. Each individual square or rectangle is called a table cell. You can put objects like text, images and hyperlinks inside these cells and format them as you would in any other location on your page. Each cell is like a miniature page. What ever you do inside a cell will have NO effect on anything in an adjacent cell

So, what is so special about tables?

Tables allow you to separate different elements on your page from one another, like images and text. They allow you to better organize your information and make more efficient use of page space.

When you learn tables well, you will master the secrets of complicated page layouts. Tables were not originally designed to layout pages. However, the limitations of html have caused creative html designers to adapt tables as a page layout tool

26. How To Code HTML Tables

Example 1

Here is the code for a one row two column table, it has two cells and is 400 pixels wide.

<table border=1 cellspacing=2 cellpadding=2 width=400>

<tr>

<td>Panama</td>
<td>Mexico</td>

</tr>

</table>

The code above looks like this when displayed by a web browser.

Panama

Mexico

In tables HTML code above the following tags represent the following things.

<table border=1 cellspacing=2 cellpadding=2 width=400> this is the beginning table tag

<tr> this tag defines a single table row

<td> this tag defines a single cell in a table row, it is called the opening "table data" tag.

</td>This is the closing table data tag

</tr>This is the closing table row tag.

</table> this is the closing table tag

Example 2

Here is the code for a two row two column table, it has four cells and is 500 pixels wide.

<table border=1 cellspacing=2 cellpadding=2 width=500>

<tr>

<td>Panama</td>
<td>Mexico</td>

</tr>

<tr>

<td>Costa Rica</td>
<td>El Salvador</td>

</tr>

</table>

The code above looks like this when displayed by a web browser.

Panama	Mexico
Costa Rica	El Salvador

Example 3

Here is the code for a two row three column table, it has four cells and is 350 pixels wide.

<table border=1 cellspacing=2 cellpadding=2 width=350>

<tr>

<td>Panama</td>
<td>Mexico</td>
<td>Los Angeles</td>

</tr>

<tr>

<td>Costa Rica</td>
<td>El Salvador</td>
<td>Cuba</td>

</tr>

</table>

The code above looks like this when displayed by a web browser.

Panama	Mexico	Los Angeles
Costa Rica	El Salvador	Cuba

27. How To Manipulate The Table Border and The Space Around Objects In a Table Cell

Now lets take the table in example 3 and change the parameters border, cellspacing and cellpadding that are part of the opening table tag.

<table border=8 cellspacing=5 cellpadding=10 width=350>

<tr>

<td>Panama</td>
<td>Mexico</td>
<td>Los Angeles</td>

</tr>

<tr>

<td>Costa Rica</td>
<td>El Salvador</td>
<td>Cuba</td>

</tr>

</table>

The code above looks like this when displayed by a web browser.

Panama	Mexico	Los Angeles
Costa Rica	El Salvador	Cuba

The parameters in the beginning table tag and what they do.

1. border - this parameter controls the width of the outside border in pixels

2. cellspacing - this parameter controls the width of the interior grid lines in pixels

3. cellpadding - this parameter controls the distance in pixels between the outside edges of the object inside the cell and the inside edges of the cell itself.

Example 4

Invisible Tables

HOT TIP: If you set the value of the border to ZERO, the border and all the lines disappear leaving the objects inside the cell exactly where you placed them. This is called invisible tables and is a very handy way to get things where you want them on your page.

It is best to format with the lines showing, then after you have the table and it's objects placed as you wish, change the border value to zero as in the example below.

<table border=0 cellspacing=5 cellpadding=10 width=350>

<tr>

<td>Panama</td>
<td>Mexico</td>
<td>Los Angeles</td>

</tr>

<tr>

<td>Costa Rica</td>
<td>El Salvador</td>
<td>Cuba</td>

</tr>

</table>

The code above looks like this when displayed by a web browser.

Panama Mexico Los Angeles

Costa Rica El Salvador Cuba

Example 5

You can put almost anything in a table!

National Geographic Online

News Links

Classic American Cities

New York
Miami
Chicago
Denver
Los Angeles
San Francisco
Kansas City

There are many places to vacation in the United States. Hawaii is one of the best, especially if you are from the northern part of the country.

Kauai serves up the best beaches. Hawaii, the Big Island, is home to Kiluea, the worlds most active volcano.

As you can see, tables are very flexible. Experiment with them. Remember, nothing ventured, nothing gained. If you don't try, you will never know.

One more thing, we learn best from our mistakes. Errors are not a bad thing, they help us learn.

The tags in this guide are supported by old and new versions of Netscape and Internet Explorer. Please keep in mind that here are hundreds of additional specialized tags. Please refer to your HTML references for additional tags and associated functionality.

HTML References
There are hundreds of HTML tags. HTML is a simple programming language. With a little study and practical application, it can be a lot of fun. If you plan to learn more HTML, the best book on the market is "HTML For The World Wide Web" by Elizabeth Castro, Peachpit Press. There are many editions of this book on the market. Be sure to get the latest edition.

HTML For The World Wide Web is a truly visual guide with clear examples. Anyone can learn HTML with this marvelous little book. It covers all versions of HTML up through the current HTML specification, HTML 4.0.

Up To Top

Revised 11/11/03