All You Ever Wanted To Know About Images!
There are lots of things you can do with images on your page. First, how to put in an image:
Adding an Image
To add an image, use this code:
<IMG SRC="image.gif">
Lets take a look at this tag.
The IMG stands for "image", obviously, and lets whatever browser is viewing the page know that there is an image here.
The SRC tag stands for "source". Now that the browser knows there's an image, it has to know what image it is. For example, say your image is called "animars.gif". Your code would look like this:
<IMG SRC="animars.gif">
Using An Image As A Link
I'm assuming that you know how to make a text link. If you don't, go to the HTML resources page.
Now that you know how to add an image, and how to make a text link, making an image into a link is pretty easy. Just use the <a> tags, and put the image between them, like this:
<a href="smogmain.html"><img src="animars.gif"></a>
Which would look like this:
Go ahead, click the image.
But what about that annoying border around the image that shows it's being used as a link? Want to get rid of it?
Making Image-Links Without Borders
If you want to get rid of the border around an image that's used as a link, all you have to do is put a border=0 in the <img> tag, like this:
<a href="smogmain.html"><img src="animars.gif" border=0></a>
Which looks like this:
See? No border, but if you click on the image, it'll still take you to the SMOG main page.
The ALT tag
You know how when you're at a page and the images haven't loaded yet, you see an annoying where the blank image is that says [image]? But sometimes you see a description of the picture, like "A small, animated picture of Sailor Mars". Here's how you do it:
<img src="images/animars.gif" ALT="A small, animated picture of Sailor Mars">
For people who have decided to put the option of not seeing pictures on their browser, this is also very helpful.
Text aligning:
Say you have an image and them some text, like this:
<img src="animars.gif" alt="Sailor Mars"> This is a picture of Sailor Mars with her ofuda. Sailor Mars can throw these pieces of paper at enimies. Blah blah blah blah blah blah blah
It will look like this:
This is a picture of Sailor Mars with her ofuda. Sailor Mars can throw these pieces of paper at enimies. Blah blah blah blah blah blah blah
Now that's all very nice, but what if you want the text to align to the image? In the IMG tag, you can add an ALIGN attribute. By specifying either align=left or align=right, you specify where you want the image. PLEASE NOTE: "right" and "left" refer to where the IMAGE is, NOT the text. For example:
<img src="animars.gif" ALIGN="left"> This is a picture of Sailor Mars with her ofuda. Sailor Mars can throw these pieces of paper at enimies. Blah blah blah blah blah blah blah
Now it will look like this:
This is a picture of Sailor Mars with her ofuda. Sailor Mars can throw these pieces of paper at enimies. Blah blah blah blah blah blah blah
Resizing Your Images
Every image has a certain size that is used, which is measured in pixels (little dots of color that make up the image). You can change the size of the image as it appears on your webpage by using HEIGHT and WIDTH tags. PLEASE NOTE: Resizing your image will not make it load quicker!
When you use images, they automatically appear the size of the actual image. But say I want to make my Mars image bigger, and make it into a square, just for fun. There are two tags, HEIGHT and WIDTH that I can specify the exact number of pixels I want the image to take up. Say I want my image to be 100 by 100 pixels. I would use the following code:
<img src="animars.gif" HEIGHT=100 WIDTH=100>
It will look like this:
Weird, huh? You can also specify an image to be the demensions it already is. Why do that? So that when someone is looking at your page that has a lot of images in the layout, say, the text won't keep rearranging itself when images load because even when they haven't loaded yet they will already have a certain ammount of space reserved for them.
For notes on how to use images wisely in your webpage, check out my Webpage Suggestions.
Back to the HTML Tips Page
Back to the Webpage Tips and Suggestions Page
Back to SMOG
|
