Adding an image to a page is quite simple
with the <IMG> tag. The <IMG> tag has
attributes that say where to load the image from and how to
display the image. The format is...
<img src="filename" width="" height="" align=""
border="" alt ="">
- src
- This is the URL where the image is located.
Generally, something like http://www.someaddress.com/myimage.gif if it's on
the internet. It can also come from your computer which would look something
like file://c:/myimages/myimage.jpg. Just know that if it comes from your computer,
only you can see it on your page.
You must first upload the image to your community site or ISP or some
other space you have on the internet. The URL will come from one of those spaces. - width
- Width of the image in pixels.
- height
- Height of the image in pixels.
- align
- Alignment of image in containing area. Values
are 'left, middle, right, justify, char'
- border
- Says what, if any, box border is
displayed around the image.
- alt
- Specifies alternate text that will
appear in place of your image for text-only browsers.
SRC is the only required attribute. Images are
normally either JPEG (Joint Photographic Experts Group) or GIF
(Graphic Interchange Format) having extensions .jpg and .gif
respectively. Images could cause web
pages to take a long time to load if they are very
large so take care to cut down on the size
of images and/or the quantity of large images, to keep people coming to your website. Remember that not everyone
has high speed network lines, many people still use dial-up modems over telephone lines.
One way to save some time during image loading is to use the width
and height attributes so that the size is reserved for your image and the server doesn't
have to figure it out. Just also be sure to give the exact width and height
or the server will have to spend time stretching or condensing your image.
Always use the ALT attribute just so that those with text-only browsers, or
who turn off image loading for faster page processing, can use your pages. Finally,
some browsers will default to displaying image borders so it's good practice
to use BORDER="0" if you don't want a border.
Now for an example...
<p>My Image</p>
<img src="leaves.jpg" width="150"
height="150" alt="Leaves!" border="10">
My Image
In this example I used all of the attributes, but remember that only SRC is required.
Notice the border around the image. The default image border color is black.
Also, the image is on the next line after My Image because of the ending paragraph tag.
Leave your mouse on the image and the word "Leaves!" will show up. This is because of the ALT attribute.
Suppose you want the background of your web
page to be an image instead of a color? You can specify that on the
<BODY> tag by either the BACKGROUND attribute or
the "background-image" style property.
Most community sites (such as Blackplanet) only allow you to change the body content so don't try this on your community site page. Use the <STYLE> tag instead.
Remember that you
could also specify the background-image for just about any
element with the background-image style property.
Now for another exercise.
Create a web page that looks like the following...
A web page with imagesThis is a web page that showcases my knowledge of html style and images.
Check out the following image!
This page was
created by <put your name here> |
You can save this image for use by right-clicking on the image and selection "Save Picture As...". Remember where you put it
because you will have to tell the server where to get it from in the
SRC attribute. You can also use your own image. If you don't have
one, images can be created by scanning them in, using an image
creation tool like PhotoShop, getting them from a digital camera, or
downloading them from the Web. When downloading make sure you
observe copyrights.
Try the extra exercise of making the image the background of your web
page. Be aware that the text colors may not show up very well so experiment with different
colors.
Next >> |
