Chapter 3 - Image tags
| 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">
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, Corel Draw, etc. Once stored on
your hard drive or floppy drive, your images can then be referenced in your
HTML.
| What is hard referencing? |
Hard referencing can be used so that your
images will be displayed on your site no matter what webserver your HTML page is
on. Here is an example of "hard referencing."
<img src="http://www.khimaira.com/kbase/images/logo.gif">
This would display this image as long as
it is located at this URL.
| What is soft referencing? |
Soft referencing uses the directory
structure on the server and not a URL. Soft referencing is shown below.
<img src="logo.gif">
This image would only be shown if the
HTML page was in the same directory as the image htmltutor.gif. If it is
not, the image will appear broken. You can also reference the image if it
is in directories below and directories above the directory where the HTML page
is located. Here are examples of each.
If the HTML page is in /www/htdocs,
and the image file is in /www/htdocs/images, use this type of referencing.
<img src="images/image.gif">
If the HTML page is in /www/htdocs/html,
and the image file is in /www/htdocs, us this type of referencing.
<img src="../image.gif">
(The ../ indicates to the browser that it will find the image file in the
directory above.
| 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.
<img src="logo.gif"
height="85" width="471">
.....would be larger than...
<img src="logo.gif"
height="36" width="200">
Here is a brief
explanation and examples of the beginning HTML tags you will need to know to
create a simple HTML page.
| Opening HTML Tag |
Explanation of Tag |
| <img src="image.gif"> |
This is an example of soft
referencing. This will show the image file within the same
directory as the HTML page. |
| <img src="http://www.khimaira.com/kbase/images/logo.gif"> |
This is an example of hard
referencing. This image will show up no matter where the HTML file
is. |
|
