Inserting images in HTML
First of all, you should only use .jpg or .gif to display images. .png only has limited support at this time, so just use .jpg or .gif. If you have an image in another format, convert it to a .jpg or .gif first.
Images can be displayed in two ways: inline or external. An inline image is displayed when the page is accessed. It is displayed directly within the webpage.
An external image is not displayed within the webpage itself. The browser must have a file viewer, which is a separate program that the browser launches when it finds an external image file. You will not use external files often.
The syntax for creating an inline image is:
<img src=”image name” width=”width” height=”height” alt=”describing text” border=”value“>
So basically, it is just a *link* to an image. The image is uploaded and stored on the web server or local machine, we then add the HTML code to tell the browser to include the image.
You should ALWAYS include the alt tag..for selfish reasons (it is great for search engines) and for people who have vision problems and therefore use screen readers to get the content of a page.
You can add space vertically (over and under) your images using the vspace attribute. You can use add space horizontally using the hspace attribute. The only thing that stinks about using hspace and vspace is that it add space on both - up and down, left and right. You can’t add space to only the right side or only the top. In order to do that, you would have to use a 1×1 transparent image, commonly referred to as a spacer. You would define the width of the spacer image for as much spacing as you need:
<img src=”spacer.gif” width=”2″ height=”1″><img src=”happy.jpg” width=”100″ height=”100″ alt=”Happy People”>
You can find a spacer.gif image simply by doing a search on google.
One goofy thing, you can’t align an image to the center using the align attribute inside of the <img> tag.
However, you can put it inside of another tag that is aligned center.
<p align=”center”><img src=”happy.jpg” width=”100″ height=”100″ alt=”Happy People”></p>
Filed under: HTML
