1.
Begin with a frame of tags that produces a table like this.

(table)
(tr)
(td) (/td)
(td) (/td)
(td) (/td)
(/tr)
(tr)
(td) (/td)
(td) (/td)
(td) (/td)
(/tr)
(/table)

The example produces a frame of 2 rows, each beginning and ending with a tr (table row) tag, and 3 columns, each beginning and ending with a td (table data) tag. Keep in mind that the ending tags always begin with a slash.

2.
In order not to confuse the Gardenweb’s computer software I had to change
bracket "less then" against left parenthesis "(" and
bracket "larger then" against right parenthesis ")"
for this example. Before using it for own experiments you have to change that reverse.

3.
Place the tags for the thumbnails or simple images between the pairs of td tags.

4.
Use the preview to check if everything is working well.

There are some other useful tags to design your text..
(font color="red")red(/font) text
red text
(font color="green")green(/font) text
green text
(font color="blue")blue(/font) text
blue text
(b)bold(/b) text
bold text
(i)italic(/i) text, used for Botanical Names like (i)Euphorbia(/i)
italic text, used for Botanical Names like Euphorbia

Frank
www.euphorbia.de

Can you tell me why I have the large space between my text and the pics? There was only one space when I typed it out.

Denise in Omaha

Of course you don't actually need all those table tags top make your thumbnails come up in a row, they should do it automatically if the page is wide enough and provided you didn't put anything in between the thumbnail image tags that would break the line. From a purist standpoint, tables should be avoided except for displaying tabular data since it forces a layout which may be inappropriate for some viewers.

Voila, no table (note: these thumbnails are just downsized versions of the real pics 'cos I'm too lazy to upload real thumbnails for this post!):

P.S. Its also worth noting that the latest GardenWeb page layout is completely within a table, hence some of the alignment issues, just one of many things that have been completely butchered recently and would be very annoying if I wasn't using an advanced browser that de-butchers them for me ;)

The way I used to use tags for thumbnails and images is as follows.

(a href="http://url_for_image1.jpg")(img src="http://url_for_thumbnail1.jpg")(/a)
(a href="http://url_for_image2.jpg")(img src="http://url_for_thumbnail2.jpg")(/a)
(a href="http://url_for_image3.jpg")(img src="http://url_for_thumbnail3.jpg")(/a)

They then appear one below the other and never side by side.
What exactly are you doing different? An easier way than creating a table would be much appreciated.

Frank
www.euphorbia.de

I'll try to show what I mean with your example, but I think it will make the screen ugly!
(a href="http://url_for_image1.jpg")(img src="http://url_for_thumbnail1.jpg")(/a)(a href="http://url_for_image2.jpg")(img src="http://url_for_thumbnail2.jpg")(/a)(a href="http://url_for_image3.jpg")(img src="http://url_for_thumbnail3.jpg")(/a)

Glad you started this thread, Frank!
~Rosemarie

In order not to confuse the Gardenweb’s computer software I had to change
bracket "less then" against left parenthesis "(" and
bracket "larger then" against right parenthesis ")"
for this example. Before using it for own experiments you have to change that reverse.

You can use the extended character set to depict the tag enclosures as follows:

&lt; = <
&gt; = >

Thus ..... <table>

Brackets are too confusing. BTW, these depictions are functions of HTML rather than the Board software which is based on HTML 4.0.

As S&B points out, the Table element is not necessary for horizontal image layout -- it is Browser dependent in any case.

James

Perhaps if I printed it and studied what you've written for say, an epoch, I might get it, but what I am reading doesn't yet 'click here' in my head.'

I hesitate to ask you to put it another way, just so that Ican understand what you're writing - you've all gone to a lot of work as it is.

Is there a way of seeing the code behind the pictures?

Perhaps if I see that, combined with what Frank, SnB and James have written, the code will become understandable to me.

I think I know that one - if you have a slow connection, and the picture is large, it will take a long time to load. Using thumbnails prevents that.

Here is the HTML code behind the above picture:

<img src="http://jp29.org/dihors14.JPG">

..... the HTML element tag that designates image retrieval and display (img src) and the URL (Uniform Resource Location) address for the image (domain name on my server = jp29.org)

James

Thank you, but I should have been more specific; how do I see the code for the laterally -arranged pictures above?

Or, perhaps better, do yuou know of a website that would learn me such information as to how to post pictures in such a manner as Denise and Frank did?

Thanks much!

The following illustrates the horizontal layout of three clickable image thumbnails. As you can see, you do not have to use the HTML table element to effect this. I have repeated just one image to simplify this demonstration. You can cut and paste the HTML code that produced this image layout (below) and substitute your own URLs/images.

<a href="http://jp29.org/disubv01.JPG"><img src="http://jp29.org/head01.JPG"></a> <a href="http://jp29.org/disubv01.JPG"><img src="http://jp29.org/head01.JPG"></a> <a href="http://jp29.org/disubv01.JPG"><img src="http://jp29.org/head01.JPG"></a>

Glossary of terms used in above code:

HTML -- Hyper Text Markup Language
A -- Anchor tag/element
HREF -- Hyper Text Reference
IMG -- image/photo
SRC -- image source
HTTP -- Hyper Text Transfer Protocol

and .....

URL -- Uniform Resource Location: the internet address at which the requested image can be found.

Please visit my Home page where you will find clickable links to basic online HTML references/resources.

James

My pic site is offering the "tags" (right word??) for thumbnails. Otherwise, I would have never gotten it! Does your pic site do so? The first time I did it, I used the "tag" that makes a full-sized picture. So I ended up with 3 big pics side-by-side. Then I realized my pic site had "thumbnail tags." Tried that and, voila!... worked like a charm!

Denise in Omaha

James

Alessandro

just a comment: this is surely appreciable, but noone on earth still writes html code that way .....

No, that is not so, Allesandro, in fact most Web authors who are dedicated to producing interoperable pages -- those that will render in all user agents -- use text editors to hand code HTML Markup. Automatic code generators ("canned" Web page software) frequently employ non-standard propriety HTML Markup that may render correctly in the more popular graphical Browsers, but not in other rendering agents.

Although these software packages are getting better at generating interoperable pages, most still fall short, not even providing alternate text for images (as we are not doing here) thus violating the requirements of accessibility for people with disabilities.

While the majority of Rendering Agents used on the Internet are Graphical Browsers that display text and images (such as MSIE, FireFox, Opera, et al), Textual Browsers that only display text and Screen Readers that read pages from left to right -- top to bottom -- and render the text as synthesized speech are also frequently employed, particularly by People with Disabilities.

The major premise of the principle of Interoperability, as advanced by the W3C, is that Web pages which contain valid HTML markup -- measured against established standards -- will function satisfactorily in all Rendering Agents. Conversely, pages that contain invalid HTML Markup with propriety tags and constructs (tag soup) -- will only function reliably in Rendering Agents designed to accommodate those tags and constructs.

To get an idea of just how many Graphical Browsers alone (therefor excluding Text Browsers and Screen Readers) are currently used on the WWW visit .....

XHTML media type test - results

..... standards complying Markup is essential to insure correct rendering in all of them, i.e. Interoperability.

The most frequently used method of checking HTML Markup for standards compliance/Web page Interoperability is to use a reliable Validator such as .....

W3C Markup Validation Service

..... most extant Web pages, composed using non-standard automatically generated Markup, will fail Validation (not interoperable). Test this GW page -- or your own -- just out of curiosity. Pages that pass Validation are interoperable (will render correctly in ALL devices) and garner accolades for the author!

James