greenspun.com : LUSENET : HTML test forum : One Thread

Okay folks, now that you've got your pictures uploaded to the net, how to insert them in your forum posting?

Let me caveat this by saying THESE INSTRUCTIONS WILL ONLY WORK FOR COMPUTERS USING THE MICROSOFT WINDOWS OPERATING SYSTEM. If you have a mac, I can't help you, but you probably wouldn't need it anyway. :-) I'll also warn you all up front that this can get complicated, but I'll try to lay off the nerdspeak as much as possible.

First, you must find the address where your picture resides on the net. This is easy to do. Go to the site that has your picture, left click on the picture itself, and in the menu that pops up, pick 'properties'. That will bring up a box that has information about the picture. For example, when I go to the homepage for Countryside Magazine Homepage and left-click on the picture of this month's issue, A box comes up that looks like this:

You can see that in the middle of the box is the address, or URL of the picture. You can do this with virtually every picture on the internet. All you need to do is hilight the address and copy it, by either pressing "CTRL + C" or by right-clicking again and choosing "copy" from the popup menu.

Once you have the address, now comes the fun part. to insert a picture into your post, you need to understand a very little bit about HTML coding.

First, HTML code is simply a way to give instructions to a browser on FORMATTING. That is, how to display the CONTENT on the page. To enable the browser to understand that you are talking about formatting, we put HTML commands inside brackets, like this < >

Anything inside brackets like that, the computer treats as formatting. For example, to make a word appear bold on the screen, you'd include a "bold tag" in HTML. It's very simple.

<b>write this in bold </b>

would show up in your post as:

write this in bold

Pretty simple, huh? Now, notice that, in the case of bold tags, we need to include an open tag and a close tag to tell it where to start bolding and stop. A close tag is simply a repeat of the open tag with a "/" in it. For instance, a link in HTML is called an anchor. the tag to instruct the browser to make a link starts like this <a> and ends like this </a>

However, with a link, you must "qualify" the tag by telling it WHERE to link to. You do that by adding the address of the place you want to link to. So, if I want to add a link to the Countryside magazine website, but don't want to show it raw, like this:


which is ugly and inconvenient for folks to cut and paste into their browsers. Instead I can use an anchor tag and show it like this:

Click here to visit Countryside Magazine's website

This is obviously easier for those who read my post, since they can simply click my link and go directly to the page. Here's how the anchor tag works for the link above. I actually type the following into my post:

<a href="http:www.countrysidemag.com">Click here to visit Countryside Magazine's website</a>

and it appears as a clickable link. Study the HTML code snippet above. Not really that difficult, is it?

Now, for images. The HTML tag for displaying an image is <img>.

inside the tag, you must qualify your command by telling the browser where to find the image that you want to insert. Remember when you copied the address a few minutes ago? Now you insert it like this:

<img src="http://countrysidemag.com/issues/1_02_1.jpg">

When the post comes up, people will see this:

Notice that you don't need a 'closing' tag, since it just displays the image and that's it.

So, are you ready to post a picture?

Something IMPORTANT to remember: Pictures eat up bandwidth. So, the smaller, the better. The LARGEST pictrure that should show up on the forum should be about 320x240 pixels. If you need to post a larger pic than that, what you can do is post a small version, and link it to a larger version, by combining two of the tags that you just learned above. Like this:

<a href="http://countrysidemag.com/current.htm"> <img src=http://countrysidemag.com/images/cur_but.gif"> </a>

The code above shows up in a post like this:

See how the two tags are "nested", that is, one inside the other? Pretty cool, huh?

Now remember, if you have a HUGE picture, it needs to be scaled down before you post it, or you risk needing one of these:

I hope that this tutorial helps, and isn't too confusing. BEFORE YOU TRY POSTING PICTURES ON THE COUNTRYSIDE FORUM, TRY POSTING YOUR MESSAGE TO The HTML test Forum It's a great place to experiment and get your feet wet.

-- ch (ch@ch.com), December 15, 2001

Moderation questions? read the FAQ