HTML - 101 An introductory course for beginners. Lesson # 5.

Melonbones Auction HTML - 101
An introductory course for beginners.
Lesson # 5

Adding Pictures and Graphics

Optimizing your pictures:

Before adding a picture or graphic to your web page or auction listing, you will need to optimize it. This means to change the actual size and color pallet associated with it. The only way to do this properly is with graphic design software. If you just use the handles in a program to shrink the picture, the file size remains the same and can take a minute or two to load.

I was asked to work on a site once that had scanned an 8"X10" color photo and then shrunk it to 2" wide using the handles. I timed it - the page took 3 minutes to load because it's file size was 1.6MB. After using Ulead's program PhotoImpact, I got the file size down to 6K - it then loaded in under 2 seconds.
Here's the link to Ulead to see PhotoImpact:
Ulead

Several thousand FREE Animations, web graphics and clipart items.
Animation Factory

Compare file size download times with this "Estimator":
File speed estimator

Web pages can only display graphics that have been saved as either a .jpg (joint photographic group) or as a .gif (graphic interchange format). The page background graphic can be a .bmp (bit map protocol). Again, you will need to use your graphic design software program to save it as one of these formats.

Here are free JPG or GIF crunchers you can try:
Graphic Crunchers

Once your picture is optimized, you must upload it to the web for storage. You cannot just type in the path to it on your hard drive, or it will not work.

Here is a free online graphic editor you can try:
MediaBuilder GIFWorks

Free Web Site Hosts:

Now you need a place to store your picture at a web host site. There are many free sites available, including these:

Start a FREE website at MySiteInc and they will pay you
$20 for each referral. They provide instructions so simple,
even Homer Simpson could set up his own web site!
MysiteInc

Free Hosting:

Uploading To Your Website

You will find that some of the above mentioned free web sites will come with an ability to upload pages and/or pictures right from your hard drive. The ones that do not can be uploaded to using FTP (File Transfer Protocol) software. I personally prefer CuteFTP, and you can get a 30-day trial copy here:
http://www.cuteftp.com/download/cuteftp.shtml

Adding your picture to a web page:

Armed with the URL of your newly uploaded picture, you will make it display on your page using the Image Source tag.
Your new URL should look something like this:
http://www.yourhostname.com/yourfolder/yourpicture.gif

The Image Source tag is one of the few tags that does not use a closing tag.

Always be careful to use a space between IMG and SRC, don't forget the ">" diamond operator on the end, and let the line wrap naturally - NEVER use the enter key to force it to wrap to the next line or you will "break" it and it will not work.

As with all other components of a web page or auction item description, you can center your picture using the center tags.

Making your picture link to another page:

You can even make a picture or graphic into a "live link" by nesting the Reference Tags and pointing it to another URL.

Don't forget to close the reference tag by using the </A>, or the rest of your page will try to be a live link.

It's always a good idea to add "alternate text" to every picture so if the picture does not display, your visitor will see text in its place to tell them what was supposed to be there. You add an alt text after the extension of the picture name (the .jpg or .gif), but before the closing diamond operator.

Again, there is a space between the file name extension and the term "ALT" - if you leave out the space, it won't work.

Adding a background picture:

Let's say you have a picture named yourimage.gif that is the image file you want as your background. Be sure that this picture goes in the same directory (or folder) as your page file when you upload your page.

Now, just insert this short piece of code into your page's HTML right after the <BODY> tag. Change the "yourimage.gif" to match the name of the picture you want to use.

<bodybackground="yourimage.gif" bgproperties=fixed>

If you have a folder named "images" where you keep all your pictures, your code would look like this:

<bodybackground="images/yourimage.gif" bgproperties=fixed>

To make your page more "portable", that is, to make it work if you upload your web page to a different host site, use the full URL to where you know the picture is stored:

<bodybackground="http://www.yourhost.com/yourfolder/images/yourimage.gif" bgproperties=fixed>

Want to learn some more?
Next page

Table of Contents

This free course is being provided by Melonbones
Online Auction. Please tell a friend about us.

www.melonbones.com