HTML Tutorial
How do I get images on my webpage?
Images ( .gif or .jpg) are displayed on WebPages through HTML with image source
tags. When setting up, or referencing the images files the correct URL or path
to the location of the image file is needed. For instance, there are several
ways to do this. Those are discussed below under "What is hard/soft
referencing?" Here is an example of an image tag.
<img src="image.gif" width="" height="" alt="" border="">
Attributes:
src="" is the path where the image is stored on your computer or server.
width="" is the width of the image
height="" is the height of the image
alt="" is the text displayed when the image is moused over. You will want to add
this tag for two reasons. One: if the user does not have their images turned on
when they are browsing the internet, it will explain the image to the user. Two:
most search engines look for alt tags when they are ranking web pages.
border="" is used when the image is a hyperlink, you can choose to add a border
to the image and the size of the border - to add a border put the number of the
size you want the border in the quotes. Usually, if the image is a hyperlink,
you will not want to add a border - to remove a border just put 0 in the quotes.
Where do I get images?
There are several ways to get images files. One is to get the images from the
internet. Images are available at many locations through the internet. If you go
to search engines and search on images, you will find sites that have images
available to download. Another way to get images is to get an image generator
such as Microsoft Photo Editor, Adobe PhotoShop, CorelDraw, etc. Once stored on
your hard drive or floppy drive, your images can then be referenced in your
HTML.
How do I resize an image?
There are tags inside the image tag that will allow you to size an image the way
you wish. You can expand an image or shrink your image size with the "width" and
"height" tags. This is very similar to the width and height of the Horizontal
line tag in Chapter 2. Here is an example of expanding and shrinking an image.
Original Size:
<img src="/images/image.gif" width="179" height="39" alt="Image">
Resized:
<img src="/images/image.gif" width="92" height="20" alt="image">
