upload an image howto with Angelfire as an example not withstanding that all uploading processes are basically the same process with slight variations

T his process may vary slightly with all the different editors, but the steps are basically the same no matter who your host is.

W e have chosen Angelfire for this tutorial since our host is Angelfire.

T his is actually a very easy process to do. Below, we will show you step by step on how to upload images and also to add the image and or image link to your page.

T he first thing you need to do is save the image to your hard drive on your computer. To do this, right click on the image and "Save as". Name the image and then save it to where it will be easy to locate. We suggest the "desktop" for easy access.

O nce saved, open your Angelfire account. When you have logged in, your web shell will be in front of you. Click inside the box or high light the words that says "/images". Then above that you will click on the button that says "Open Directory". Once the page transitions (opens), you will be in your "/images" Directory.

F or this tutorial, we chose the "/images" directory not because you must upload your images to that directory. You can upload your images, files etc. to any directory of your choice.

O nce there scroll down until you see the button that says "Browse". Click on it and a window will open with all your drives, C, D, E, floppy, desktop, etc. Locate the image you "Saved As" and click on it. The image name will now be shown in the little box under your files. Now click "Open". Once you do the box will close and to the left of the browse button you will see the file/image you want to upload. Now click "upload". It may take a few seconds to a few minutes to upload your image depending on your connection speed and size of the file/image you are uploading. Once uploaded you will see it in your image file and it will tell you "All Files Uploaded Sucessfully". Remember the name of the file (image) you uploaded.

N ow, right under the button that says "View File", there will be a little button with the word "Up" on it. It is located just to the left of "Sort by: Name | Size | Date Modified". click that little button and when the page transitions, you will now be back to your "Top" directory.

N ow high light the words of the file you want to open or click inside the box just to the left of the "index.html" or which ever file you want to post the image on. Once the box is checked, scroll up and click on "Edit". This will now open your page where you can paste the code and replace the "Path To Your Uploaded Image" to your path.

Below is a basic image tag that will appear on your page.

In the above image tag you will notice that the tag is inclosed with < > ( greater than and less than characters ). These little characters are what makes everything in HTML work but not be seen on your page. You will also notice the "positioning tags or attributes (  <center> </center> ) are also inclosed with the < >. You will also notice the tag begins with img src. These letters ( img src ) are telling you and the computer it is the beginning of an image to be displayed on your page.
The "Path To Your Uploaded Image" is the complete address of your uploaded image in the Directory where you wanted it and uploaded it from your hard drive.
For example;
If your main website address ( Root Directory ) is, https://www.angelfire.com/ny5/mypage which by the way in your web shell is index.html. You uploaded the image you have named "myhome" which is 200 pixels wide and 200 pixels high in jpg format into your /images Directory.
The "Path" would look like this:

https://www.angelfire.com/ny5/mypage/images/myhome.jpg

S o in a nutshell, the above "Path" is the address of your uploaded image.

N ow, to make your uploaded image appear on your page, you would write the code as you see below into the HTML box (Big box) once you open the file you want it to appear in.

I f you notice, we did not place any positioning tags around the image tag. We did this for a reason. If you would just write the code as is and not have the positioning tags, the image would not be an entity or stand alone. It would just follow anything that is near it and not be positioned where you may want it. You may end up with the image on the same line as some text or something to that effect.

T he first positioning tag is the   paragraph tag. You will notice it is placed or opened  in front of the image. It will also be closed  at the end of the tag. This tells the computer that you want the image to stand alone with nothing on either side of it.

T o differentiate between the opening paragraph tag and the closing paragraph tag is done by the backslash character /. Every opening attribute ( without the backslash ) must be closed with the backslash / character.

N ow for the final positioning attribute of location. You can position the image in the <center> of the page or to either side as in <left> or <right>. This is done the exact same way as the paragraph   tags. Remember that for each opening tag you must also close it with the / character.

S o the complete image tag with all the attributes included would be written as below.

T he last thing we shall cover is to add a hyperlink that stands alone and also a hyperlink added to an image. Adding a hyperlink to your image will tell your image after you click on it to go to the page that you have designated.

A hyperlink with Text is written as seen in the example below:

I f you notice the a href at the start of the hyperlink, it tells you and the computer to read it as a link. The only other attribute we have added is the target="_blank". This tells the link once it is clicked to open in a new browser window opposed to opening in the same window. This attribute you can either use or just delete if you don't want it to open in a new window.

W ith adding a hyperlink to an image, first, you would remove the Text and add the hyperlink to the image. So the plain hyperlink with no Text would look like the below:

T he below is what the complete image and link tag would look like with a hyperlink attached to it. All you need to do is change the image Path your yours and add the URL address ( Path ) of the page you want to link to. The other attributes such as position, height, width, and alt will also be changed to reflect your image.

T he last two attributes we have not explained are the alt tag and the border=0 tags. The alt tag is if the person viewing your site has images turned off in their browser or the image does not load for some reason. Instead of seeing the little X, they will see a description of the image and or image/link. Also if used to your advantage, the alt tag can boost your ratings with search engines. The border=0 attribute is used in image links but is good practice to add it even in a plain image tag. What this does by giving it the value of 0 is to remove the box around your image when used as a link. By either not using it or giving it a value other than 0 you will have the box around your image.

T he only other thing you need to be concerned with is the size ( in K ) of your images you upload. The larger the size, the longer it will take to open on your page. Don't think that because you may have a T1 or DSL connection and the page loads very quickly, that everyone visiting your site will have the same connection speed. Be considerate of your visitors and treat them as if you also have a 28k or 56k dial up connection. This is where image optimization comes into play. A 900k slow loading image can be optimized to be a 50k image without you losing anything in the process. Below we have included some links that will explain to you Optimization and also more attributes that can be used on image tags.
[ Optimize Your Image ]
[ Before And After You Optimize ]
[ More Image Attributes And Positioning ]

Uploading An Image To Your Editor