Now we know the text is very important, but it can only take
you so far. I'm sure that up until now, if anyone has seen your pages they're
asking "Where are the pictures?".
Yeah, I know our visitor is dying to see the latest picture of us and the
family on our website, so this tutorial
is about adding images to our pages or in our website.
Putting our images on a web page is simple. It's probably
even simpler than it was for you to get the certain image onto your computer.
The <IMG>, or Image tag is used when we want an image on our web page. When we use
<IMG>, we don’t need to close
it with a </IMG>. To tell the
browser where to load this image from, we use the SRC, or source, attribute. It
looks a lot like this:
<IMG SRC="ourimage.gif">
Note we can make a link
with the <A> tag, like SRC=”ourimage.gif" if the image
was in the directory above the current one, or SRC="image/ourimage.gif" it is us if our images in the
directory
Because some browsers don’t load images, and some people
turn them off, we need a way to show them what this image is.
The solution? The
ALT attribute! ALT is an optional (but highly recommended) attribute. When a
browser doesn’t load an image, or when they are turned off, the text in ALT will be shown instead. In our <IMG> tag it's used a little like
this:
<IMG SRC="ourimage.gif" ALT="This is our picture
you can check us ">
You need more control over your image's positioning? Try
using the ALIGN attribute on it.
The ALIGN
attribute can be used to put an image in the left, right, middle, top, or bottom of our page. There is more choices than you're used
to? Let me explain.
If we add ALIGN="top"
to our <IMG> tag,
the browser will align the top of our image to the top of
the current line. ALIGN="bottom"
aligns the image to the bottom of the current line, and ALIGN="middle" aligns our image to the middle of the
current line.
Aligning our image to the left or right aligns it to the
left margin, or right margin of the page.
Do you Got it? Ok, here's a little quiz in our mind. What
will the following code do?
<IMG SRC="ourimage.jpg"
ALT="Our image!" ALIGN="left">
If you said it adds
the image ourimage.jpg to the current
page with alternate text "Our image" and left aligns it, So are you
following my tutorial?
Is this correct? Well I’m continue that you can understand
All right! The image looks great but...Hey! What's this
border doing around my picture?
Oh yeah! We forgot about the BORDER attribute!
The BORDER attribute
takes a number as an argument. This number will be the width of the border
around your image. Quick, how do we get rid of the border with the BORDER
attribute? Easy, we just set
<IMG
SRC="myimg.gif" BORDER="0">
Now we've got an image on the page. But wait: why does the
browser wait to load the image before displaying the rest of the page? Well,
the browser doesn’t automatically know how big your image is. You can give it
this information (and make your pages load faster!) with the WIDTH and HEIGHT
attributes.
We give to the WIDTH and HEIGHT attributes the width and height of
our image in pixels. So it looks like this:
<IMG SRC="ourimage.gif"
ALT="Our Images" HEIGHT=120 WIDTH=200>
Another benefit of
specifying the WIDTH and HEIGHT in the <IMG>
tag is that you can make sure that the proper space is left for your image,
even if the viewer has images turned off.
Is the space around
your image a little cramped? Try adding the HSPACE and VSPACE attributes to your
<IMG> tag. These attributes add horizontal and vertical
spacing around your image.
Want an image for the background of your page? Try adding
the BACKGROUND attribute to the
<BODY> tag. It's used a little like the SRC attribute to the <IMG> tag. Here's some example:
<BODY BACKGROUND="ourbackground.gif">
This would take ourbackground.gif and tile it in the
background of our page. Be warned though, use the wrong background image and
your viewers may be straining to see your text!
Let start again in another part of tutorial
Next to Html Creating Image Maps
Return to:
If you like to see our Flash template Design/Template Page
goes here:
See all: Our
Template
No comments:
Post a Comment