Putting a Graphic on Your Page

The first thing you will need to do is get the graphic uploaded to your server. If you created the graphic yourself, then it's already on your hard drive and you merely upload the image file the same way you upload all your files with your server. If you don't already have the graphic on your hard drive, then you'll need to download the file. To download an image from an internet page to a PC, right-click with your mouse pointer over the image of your choice, then choose "Save Image As..." and save to your hard drive. If you are using a MAC, click-HOLD when you are over the image of your choice, then save to your hard drive. If you are a webtv user, there is a free upload utility service at Star Boulevard Transload Service. Please - do not directly link to any page for any images you use unless you have express permission from the webmaster or owner of the page

Do not forget about copyright laws. It is strictly against the law to use any image without permission of the copyright holder. Enchantress.net has statements throughout the web site to inform visitors which graphics sections are available *free* for use, which means you will not be in violation of the copyright by using the graphics in sections outlined as "free" unless you offer one or more of the images to others, whether for free or for fee. The graphics in enchantress.net may not be offered to others by any person or individual without express written permission of TWC Graphics Design.

The graphics you use will depend not only on your own personal tastes, but also on the message you are trying to convey on the page that uses the graphics. An important note to remember: HTML loads quickly; graphics do not. The more graphics you place on your page, the longer it will take for the page to load. The key to a successful webpage is a combination of aesthetically pleasing, fast loading graphics and the content of the page itself. If your content is of high quality but your loading time is very long, you very well may lose many potential visitors that get tired of waiting for the graphics to load. Having said all that, let's see how to put graphics onto the page!

The image you are using MUST end with either .jpg .png or .gif - those are the only three file extensions that "work" with all the browsers, and you MUST remember, when publishing, to upload the HTML document and the image file. Now, for the purpose of illustration, let's assume we are going to put in an image with the filename image.jpg. The particular image is 100 pixels wide by 200 pixels high. It is a picture of your pride and joy. The HTML for that image would look like this:

<IMG SRC="image.jpg" HEIGHT=200 WIDTH=100 ALT="My Pride and Joy" BORDER=0>

It doesn't matter if you put the "height" before the "width" or vice versa - as long as they are there. Why? Because giving the image dimensions up front will allow the text on your page to load immediately, and the graphics afterward. If you don't use the dimensions, the page will still load, but the viewer will be sitting there facing NOTHING until everything loads, and you can count on losing a lot of visitors that way! Whatever you type inside the quotation marks after the ALT tag is what will show up on the page before the image loads and later, if the mouse is run over the image. For this particular image, the tag "BORDER=0" is not really necessary; however, if you link this image to another page, the "BORDER=0" statement is the one that will keep the icky blue box from surrounding your linked image.

If you simply use the above HTML for your image, the image will show up on the page where you've typed the HTML, but it will be to the far left. If you want the image centered on the page, just precede the above with <CENTER> and close the statement with </CENTER> (and likewise with RIGHT for right justified images). To keep your HTML "clean", you would place the closing command immediately after the IMG SRC statement and before the new paragraph tag. This is called "nesting" - you close all HTML tags in the reverse order in which they were opened.