The Matrix: Area52's tutorial center, HTML Basics, placing images

ADDING A PICTURE

Here's where we'll see how to use any of the graphics you find here.

To grab an image from a web page of free graphics, right-click your mouse on the graphic you want and then choose "Save image as".

This puts the image onto your hard disk. Next you will need to upload it to your own directory. This may be a File Manager page if you are using a server such as GeoCities, 50megs.com or Tripod, or may be a public_html file if your server is Spaceports, Xoom, or any other server that does not include a File Manager .

Upload the image to your site directory by using in upload feature if your server has File Manager, or by FTPing the image into your public_html file. All images must either be in the File Manager or the public_html file to work.

Now you must add the image to your web page.

If you have a File Manager scroll through your list of your files until you find the page you want the image on and use the edit feature of your File Manager to place the code on your page. If you have a public_html file, you will wnat to open Notepad or your HTML editor, then open the page you want to edit.

You will now be looking at your web page in raw code form. Decide where you want the image to appear in the BODY of the web page, below the tag which reads: <BODY BGCOLOR="FFFFFF">

You'll be adding a line like this: <IMG SRC="bcake.gif" WIDTH=72 HEIGHT=85 BORDER=0 ALT="Cake">

See the word "bcake.gif" in the above code? That's where you type in the full name of the image, being careful to match the letter case exactly. For example,if you were to type in Bcake.gif or bcake.GIF it won't show up. The lettering must match exactly, just like in an URL.

Once you've done what you set out to do, be sure to save your page. If you are in File Manager, you can immediately check the way your page looks by clicking on it in File Manager. If you have public_html, you will need to upload your new page to your site to check what it looks like. If you have an HTML editor, you can use the browser function to check the look of your page. See HTML Basics for more information on HTML Editors.