HTML
Tutorial - Chapter 4: Images
Inserting images into your
website is a real breeze after you've successfully learned
how to insert links. Consider the "Link" tag to
be the "Image" tag's sister. Here's what you need...
First, the image tag looks like
this: <img> and
second, because images stand on their own and don't need
to be applied to anything (like text), there's no closing
tag. <img> tags,
like <font> and <a> tags,
don't do anything on their own. You need to tell the browser what image
you're inserting.
Here's the code you'll need
to insert our logo into a page:
<img
src="http://founderweb.com/logo.gif">
And that's all, that piece
of code would output our logo into the page you put it in.
Give it a try with the form below.
As with all properties, src is
followed by an equal sign and quotes. The image you're sourcing
can either be of the relative or absolute variety. Just like
hyperlinks! Review all the information about absolute and
relative links from the previous chapter if you're confused
about what I mean.
After src,
there are a few other properties you can give your image.
For example, you could specify the size of the image for
faster loading. Our logo is 300 pixels wide and 72 pixels
high. So we could declare this by using the two properties width and height.
Look below...
<img width="300" height="72" src="http://founderweb.com/logo.gif">
Again, you can have as many
properties within a tag as you'd like. Only remember to keep
track of all of them! The output from the code above looks
exactly like the output if we didn't specify anything. But,
our browser, since it doesn't have to process the image's
height and width, will process the image faster.
We can also resize images to
weird and wacky proportions if we want. Like if we had typed
the following:
<img width="300" height="72" src="http://founderweb.com/logo.gif">
The output would look like this...
When you resize images like
this, the result is often very warped in appearance. That's
why we don't really recommend doing it unless you keep the
proportions the same. Also, resizing an image so it's smaller
doesn't help with load times at all. The browser still loads
the entire image and then resizes.
One useful image property is
the ability to add a border to our images. This is quite
easy to do using the border property.
<img
width="300" height="72" border="1" src="http://founderweb.com/logo.gif">
A border with a value of one
looks like the following...
It can really help
in a lot of situations. Just don't go overboard with the
size of the border. A thin border is all you'll really need
most of the time.
If you want to
link images to other pages (very handy if you have "Next
Page" graphics), simply follow the format below.
<a href="http://www.founderweb.com">
<img src="http://www.founderweb.com/logo.gif">
</a>
Notice, we're simply creating
a link then inserting the image before the link tag closes.
Rather that linking text, this code is linking an image.
Here's the output.
Notice though that, by default,
the image has a rather heavy border. It's a strange problem
that often needs correcting. The easiest way to fix is this
is simply giving the image a border of zero.
<a href="http://www.founderweb.com">
<img src="http://www.founderweb.com/logo.gif" border="0">
</a>
Voila! Problem solved. The order
with which you declare properties doesn't matter. Notice
how I declared border after
the src?
I could have, just as easily, declared it before. No difference.
Now...play time! Have some fun
inserting image tags and linking them. You can use our logo
for practice (the code is right above). Just remember, on
your own website, never link to images on
someone else's server. This is a practice called "leaching." It's
very easy to detect and can get you in trouble. Plus, it's
extremely rude 'net etiquette.
You have a pretty
good toolbox now for formatting text, adding hyperlinks,
and inserting images. In the next chapter you'll learn how
to modify your website's canvas (first covered in Chapter
1).
Previous
Chapter | Next Chapter |