Post by Skyrocket on Mar 30, 2006 14:31:30 GMT -5
If you are very new to HTML or web design, it is a good idea to read the Understanding HTML section first as this will help you understand this section more easily. The section also goes into detail about adding images using HTML. It is a lot easier to use a webpage editor like NVU, as you can simply put the cursor where you want the image to go and click the Add Image button. However, to really understand how images work on a webpage, read on….
Images on a webpage are not actually on the webpage! No, that is not designed to confuse you, nor is it an attempt to sound like a grand master riddle. A webpage is simply a bunch of code that is read by your browser and the instructions in the code tell the browser what to display. If you look at the code, I can guarantee that you won’t find one single image. Nor will you find any buttons, flash animations, movies, sounds, etc. In fact, the only thing You will find that you can actually see on the webpage, is the text.
Before I go on to explain how to get the images to appear on the webpage, I’ll just quickly explain how you should prepare your images and make them available in your webspace, ready for your webpage.
Once you have your image you should make sure that it is sized correctly and saved in the correct format for the web. Web browsers can only display .jpg, .gif and .png image types, so ensure that the images you are using are saved as one of these. As far as sizing is concerned, think about the space you have on your webpage and use a graphics editor to re-size the image as necessary to make sure it fits. If you are using standard sized images such as banners, then you probably don’t have to make any adjustments.
If you don’t have a graphics editor then you can download one free at www.gimp.org
The key to fast and efficient web design is good organisation. The reason I’m telling you this here is that it will make your life a lot easier if you save all your webpage images into one folder called “images” or something like that. Another tip on organisation is to keep your files and folders on your computer in the same way you have your webspace set up. So for instance, you now have your index.html page and your images folder, so this is how you should set up your webspace. This makes perfect sense as you are going to have two copies of your webpage, one on your computer (local copy) and one on your webspace (remote copy). If you don’t have the files and folders set up in the same way on both then it could give you unexpected results when you upload your finished site to the webspace.
OK, now that you have your images formatted and saved correctly you could upload them onto your webspace now, or you could wait until you have a finished site and upload the whole lot at the same time. It is up to you, however I’ll now quickly cover how to upload your images and then I’ll move on to talk about putting them on your webpage.
Folders in web language are called Directories. So the first thing you need to do is create an “images” directory on your webspace, in the same place as your index.html file. Obviously, if you have called the folder that holds all your images on your computer something different to “images” then you need to name the new directory with whatever you have called your “images” folder. Like I said, you need to mirror what you have on your computer.
Once you have done this you can simply upload all the images you are going to use on your webpage into this “images” directory. I have not gone into detail about exactly how to upload your images or create a new directory, as there are many different hosting companies used and they all have different methods. However they should all be similar in that you should have some kind of webspace control panel or menu with a File Manager. In the File Manager you should find ways to Add Directory or Add Files. If you need more specific help on this then either contact the hosting company or ask around in the forum.
So how do the images appear on a webpage? The code simply tells the browser where the image lives in your webspace and the browser finds it and displays it. The code for this looks like:
<img src="images/iahbe_logo.gif" />
Broken down, this simply means:
<img – The main tag identifier, meaning image
src=" – the compulsory attribute meaning source, which tells the browser where the image lives in your webspace.
images/ - this is the directory(folder) that you would have set up in the same place as your index.html page (homepage)
iahbe_logo.gif" – the actual image
/> - this is how to close off the tag. You don’t necessarily need the / however it is good practise to put it in.
Other attributes that you should add are the height and width of the image, as well as the alt attribute. To add height and width you simply put height="xxx" and width="xxx", replacing the xxx’s with the number of pixels. The alt attribute means alternative text. This displays text if the image doesn’t load properly or if the webpage is being viewed by a visitor that is using an audio browser, it will read out what you have put in the alt attribute. So for instance you have an SFI banner, you might put alt="Strong Future International". This text will also display when someone hovers over the image with their mouse cursor.
So, now our image tag might look like this:
<img src="images/iahbe_logo.gif" height="250" width="400" alt="International Association of Home Business Entrepreneurs" />
That is the basics of adding images and the bare minimum in my opinion. You could actually miss out the height and width attributes, however it takes the browser longer to display the webpage as it has to work out this information for itself.
If you are using images as a hyperlink then a blue border will appear around your image by default, to indicate that it is a link. However, these days it is accepted that a lot of images are links, and with the hand cursor people are more aware of when they can click on an image, so it is not necessary anymore and sometimes can spoil the look of your site. So to get rid of this border you need to put another attribute into your <img> tag. This is the border attribute, simply put in border="0".
One last attribute to talk to you about is the align attribute. Now this isn’t where the image is aligned on the page, this is where the image will sit in relation to the text that is around it. For instance, if you have an image next to a paragraph of text and you put in align="bottom", the first line of the paragraph will start at the bottom corner of the image and then continue under the image. If you put align="right" then the image will go to the right of the text and the text will start in line with the top of the image, work it is way down the left side of the image and wrap around the bottom.
As you can see, it is difficult to explain how the align attribute will display things on the page. It is a lot easier to put an image at the beginning of a paragraph of text and try out the different options to see the effect each one has. The options for the align attribute are:
Left
Right
Top
Bottom
Middle
Absolute Bottom
Absolute Middle
TextTop
Baseline
OK, I think that is about it for images. There are other more advanced tips on optimizing images for the web, however you shouldn’t really need it as a majority of the images you use will be web ready banners from the opportunities you are promoting. If you think that a header graphic you have created or an image you are using is causing a slow loading speed on your site then ask at the forum for advice.
Images on a webpage are not actually on the webpage! No, that is not designed to confuse you, nor is it an attempt to sound like a grand master riddle. A webpage is simply a bunch of code that is read by your browser and the instructions in the code tell the browser what to display. If you look at the code, I can guarantee that you won’t find one single image. Nor will you find any buttons, flash animations, movies, sounds, etc. In fact, the only thing You will find that you can actually see on the webpage, is the text.
Before I go on to explain how to get the images to appear on the webpage, I’ll just quickly explain how you should prepare your images and make them available in your webspace, ready for your webpage.
Once you have your image you should make sure that it is sized correctly and saved in the correct format for the web. Web browsers can only display .jpg, .gif and .png image types, so ensure that the images you are using are saved as one of these. As far as sizing is concerned, think about the space you have on your webpage and use a graphics editor to re-size the image as necessary to make sure it fits. If you are using standard sized images such as banners, then you probably don’t have to make any adjustments.
If you don’t have a graphics editor then you can download one free at www.gimp.org
The key to fast and efficient web design is good organisation. The reason I’m telling you this here is that it will make your life a lot easier if you save all your webpage images into one folder called “images” or something like that. Another tip on organisation is to keep your files and folders on your computer in the same way you have your webspace set up. So for instance, you now have your index.html page and your images folder, so this is how you should set up your webspace. This makes perfect sense as you are going to have two copies of your webpage, one on your computer (local copy) and one on your webspace (remote copy). If you don’t have the files and folders set up in the same way on both then it could give you unexpected results when you upload your finished site to the webspace.
OK, now that you have your images formatted and saved correctly you could upload them onto your webspace now, or you could wait until you have a finished site and upload the whole lot at the same time. It is up to you, however I’ll now quickly cover how to upload your images and then I’ll move on to talk about putting them on your webpage.
Folders in web language are called Directories. So the first thing you need to do is create an “images” directory on your webspace, in the same place as your index.html file. Obviously, if you have called the folder that holds all your images on your computer something different to “images” then you need to name the new directory with whatever you have called your “images” folder. Like I said, you need to mirror what you have on your computer.
Once you have done this you can simply upload all the images you are going to use on your webpage into this “images” directory. I have not gone into detail about exactly how to upload your images or create a new directory, as there are many different hosting companies used and they all have different methods. However they should all be similar in that you should have some kind of webspace control panel or menu with a File Manager. In the File Manager you should find ways to Add Directory or Add Files. If you need more specific help on this then either contact the hosting company or ask around in the forum.
So how do the images appear on a webpage? The code simply tells the browser where the image lives in your webspace and the browser finds it and displays it. The code for this looks like:
<img src="images/iahbe_logo.gif" />
Broken down, this simply means:
<img – The main tag identifier, meaning image
src=" – the compulsory attribute meaning source, which tells the browser where the image lives in your webspace.
images/ - this is the directory(folder) that you would have set up in the same place as your index.html page (homepage)
iahbe_logo.gif" – the actual image
/> - this is how to close off the tag. You don’t necessarily need the / however it is good practise to put it in.
Other attributes that you should add are the height and width of the image, as well as the alt attribute. To add height and width you simply put height="xxx" and width="xxx", replacing the xxx’s with the number of pixels. The alt attribute means alternative text. This displays text if the image doesn’t load properly or if the webpage is being viewed by a visitor that is using an audio browser, it will read out what you have put in the alt attribute. So for instance you have an SFI banner, you might put alt="Strong Future International". This text will also display when someone hovers over the image with their mouse cursor.
So, now our image tag might look like this:
<img src="images/iahbe_logo.gif" height="250" width="400" alt="International Association of Home Business Entrepreneurs" />
That is the basics of adding images and the bare minimum in my opinion. You could actually miss out the height and width attributes, however it takes the browser longer to display the webpage as it has to work out this information for itself.
If you are using images as a hyperlink then a blue border will appear around your image by default, to indicate that it is a link. However, these days it is accepted that a lot of images are links, and with the hand cursor people are more aware of when they can click on an image, so it is not necessary anymore and sometimes can spoil the look of your site. So to get rid of this border you need to put another attribute into your <img> tag. This is the border attribute, simply put in border="0".
One last attribute to talk to you about is the align attribute. Now this isn’t where the image is aligned on the page, this is where the image will sit in relation to the text that is around it. For instance, if you have an image next to a paragraph of text and you put in align="bottom", the first line of the paragraph will start at the bottom corner of the image and then continue under the image. If you put align="right" then the image will go to the right of the text and the text will start in line with the top of the image, work it is way down the left side of the image and wrap around the bottom.
As you can see, it is difficult to explain how the align attribute will display things on the page. It is a lot easier to put an image at the beginning of a paragraph of text and try out the different options to see the effect each one has. The options for the align attribute are:
Left
Right
Top
Bottom
Middle
Absolute Bottom
Absolute Middle
TextTop
Baseline
OK, I think that is about it for images. There are other more advanced tips on optimizing images for the web, however you shouldn’t really need it as a majority of the images you use will be web ready banners from the opportunities you are promoting. If you think that a header graphic you have created or an image you are using is causing a slow loading speed on your site then ask at the forum for advice.