Embedding An Image
<img src="parts/tea.jpg" />
<img /> This part is the actual tag.
src="parts/tea.jpg" using the src attribute, you need to specify the location of the image. The image I'm using, tea.jpg, is located in a folder called parts, so I typed parts/tea.jpg. If the image was located on another one of your websites, you might type the src as http://username.host.com/tea.jpg.
Most web browsers can display inline images that are in .xpm (X Bitmap), .jpg, .gif, or .png format. Each image takes time to process and slows down the initial display of your document. For resonable load time, I would recommend that the file size of your images not exceed 40K. The most common file types are .gif and .jpg. I have never used the .xpm format, and although .png is higher quality, it is still pretty new to the web and not compatible with all browsers from what I understand. It can also have a pretty slow load time. The above code will place an image on a web page like this:
Had the above image been located in the same directory as my .html document that I was linking it in, I would only have typed <img src="tea.jpg" />, but I added the "parts/" to it because that's how you tell the browser that the image will be located in a folder called parts, and the "parts" folder is located in the same folder that has the .html document linking it.
Labeling An Image
<img src="parts/tea.jpg" alt="This woman is drinking tea." />
alt="..." With the alt attribute, you can give your image a message that will show up when you hover over it.
The above code will make a message show up when you hover over this image:
It's a good idea to always use the alt attribute, because if the image does not display, the alt message will display in it's place. Some people turn images off when they surf the net, so this will allow them to at least know what the image is about.
Width and Height
<img src="parts/tea.jpg" width="146" height="254" />
You can use the width and height attributes to help the content of your webpage load faster. It's not a required attribute though.
You can also use it to actually change the size of your image, but this will make your image look awful. Plus it doesn't work in all browsers.
width="146" height="254" |
width="292" height="508" |
It's usually a good idea to always include the width and height attributes, because when an image does not display, the empty box will still take up the same amount of space. That way if your layout depends on the space the image occupies to be.. well.... occupied, then you will at least have the same amount of white space for people who cannot view images, or have images turned off.
Aligning Images and Text
<img src="parts/tea.jpg" align="left" />
You can set the align attribute to left, right, top, bottom, middle, absmiddle, or absbottom.
Controlling The Space Around An Image
<img src="parts/049t.jpg" hspace="5" vspace="5" />
When you have multiple images next to each other, like thumbnails, you may notice that the edges don't touch each other.
Well, using the hspace (horizontal space) and vspace (vertical space) attributes, you can control the white space around your images.
Example:
The hspace and vspace is set to 30 in the above example.
<img
src="parts/049t.jpg" /><img
src="parts/049t.jpg" /><img
src="parts/049t.jpg" /><img
src="parts/049t.jpg" /><img
src="parts/049t.jpg" /><img
src="parts/049t.jpg" />
But, what if you want absolutely no space what so ever around the images? If thats the case, you would have to type the different image tags with no carriage returns next to the >< brackets.
Which will make this:
If you want them to still touch above and below, you will have to do the same thing, and insert your br tag where it goes.
Example (note the <br> tag in the middle):
<img src="parts/049t.jpg" /><img src="parts/049t.jpg" /><br><img src="parts/049t.jpg" /><img src="parts/049t.jpg" />
Which will make this:
Main?