Last time we looked at HTML Anchors.  In this lesson we will discuss Images. Pictures create a mood, a feeling on a website — their proper use can be very powerful. How do I put an image on my website page? First, let’s talk about the HTML code need to place an image on a website page.  Here it is:

 "IMG" is the image tag.  It’s a stand-alone tag, meaning it doesn’t require and ending tag, like some other tags. 

There is a special keyword that is also necessary – ‘SRC’.  This defines the source or the location of the image on the webserver. For the sake of our example, I’m going to put all of my images in a folder/directory on my webserver called "images".  

So here is how my directory structure on my webserver looks: /public_html/images Most linux webserver hosts have the /public_html base — all you need to do then is create an images directory underneath it. If you don’t know how to create the directory, then you can ask your hosting company to do it for you.  I use a product called Core FTP LE – an FTP program to create mine.  You can also use the File Manager Tool that’s part of your hosting package.  Mine is called CPanel and it’s very common.

Anyway, if you eyes are popping out because you are confused, just have your hosting company create the directory for you.

The image file that I want to use is: So, now I have to transfer the image from my local machine to my webserver.  This can be done in one of two ways:

• Use an FTP program like Core FTP LE
• Use the CPanel File Manager

I use both from time to time, but I tend to favor Core FTP LE.  Really, any FTP software will do.  You can find dozens of free FTP programs on http://download.com/ (including Core FTP LE). Transfer the file to the /public_html/images directory and note the images name.  In my case, my images is called "tags_sm.gif".  So when the file is uploaded to my images directory, the full path reference to the file needed for the ‘SRC’ keyword is: images/tags_sm.gif Notice that I left off the "public_html" part.    So the entire tag then looks like this: So, anywhere you place this code on your website page, the image will appear. Now, there are all kinds of positioning options you can use to place the image exactly where you want it — and they are really beyond the scope of this posting.  I just mention it to you so you know that they exist.  If you would like me to write a piece about that, then let me know, otherwise, there is tons of information on the net. In summary:

• Use the IMG tag to place images on your webpage/blog
• In order to access the image you want to use, you have to transfer it to your webserver
• You can use any FTP program or the File Manger on your Hosts CPanel to transfer the image
• Create an "images" subdirectory under the "/public_html" directory.  You create it using your CPanel File Manager, with your FTP software, or by simply asking your hosting company to do it for you
• Upload the image to your "/public_html/images" directory
• In the ‘SRC’ of your IMG tag, refer to your image – src="images/graphic_name.gif" mce_src="images/graphic_name.gif"

Well, that’s it for this particular series, unless I think of something else to add.