Images
This
section will show how to add images to your pages.
If you
want to learn how to make images work as links, you should
go to the links-section.
If
you want to learn about browser-safe colors for images,
you should go to the HexColor-section.
Top
of page
Web-Images
(GIF and JPG):
Computers
can store images in many different ways.
Some
storagemethods are focused on compressing the size of
the image as musch as possible.
These
are the image-formats that are interesting to web-publishing,
since a major problem with images on websites is that
images are way more expensive (in transfer-time) than
text.
To
reduce downloadtimes as much as possible two of the best
image-compressing-formats are used on the web:
| GIF |
JPG |
| 256 colors. |
Unlimitted colors. |
| Can handle transparent areas |
Can't handle transparent areas |
| The format is not good at compressing
photographs |
Excellent for compressing photographs
and complex images |
| In general it is excellent for
banners, buttons and cliparts. |
In general it is not good for
banners, buttons and cliparts |
This means that banners, buttons,
dividers, cliparts and other simple images usually works
best as GIF's.
Photographs and other complex images usually works best
as JPG's.
If
you want to use an image in another format than JPG or
GIF you need to load the image into a graphic program
and then save it as either JPG or GIF.
Click
here to learn more about
the limited amount of colors on webpages - in particular,
the limited numbers of colors that looks the same on all
browsers.
Top
of page
INSERTING
AN IMAGE ON A WEBPAGE:
The tag used to insert an
image is called img.
Below
you see an image called "rainbow.gif".
Underneath is the HTML-code used to insert the image on
this webpage:
| <img
src="http://www.netkontoret.dk/rainbow.gif"> |
Top
of page
RESIZING
IMAGES:
It is possible to change
the size of an image using the Width-
and Height-attributes.
In general
it is not adviseable to reduce imagesize using these settings,
since the image that needs to be transfered over the internet
is the original image, no matter what reduction might
be added to it when inserted on the page.
This
means, that if you have an image that is bigger in size
than you want it to be on your page, you should reduce
the imagesize in a graphics program, rather than reduce
the size on the webpage using the width
and height-attributes.
On the contrary, sometimes, it
can be wise to enlarge images using this technique.
Below
is exactly the same image as shown above.. only with different
settings for width and height. (Note: Original
dimensions are 60x60)
| <img
src="http://www.netkontoret.dk/rainbow.gif"
width="120" height="120"> |
Top
of page
BORDER
AND ALTERNATIVE TEXT TO IMAGE:
You can add a border or
an alternative text to the image using the tags shown
in the example below:
Note:
Netscape-browsers only show border if the image is used
as a link.
| <img
src="http://www.netkontoret.dk/rainbow.gif"
alt="this is a text that goes with the image"
border="5"> |
Top
of page
SPACE
AROUND THE IMAGE:
If you want to add space over
and under the image you can use the Vspace-attribute.
In
a similar way you can add space to the left and right
of the image using the Hspace-attribute.
Below
is an example using these attributes:
| <img
src="http://www.netkontoret.dk/rainbow.gif"
Hspace="30" Vspace="10"> |
Top
of page
ALIGNMENT
OF IMAGES:
It is possible to align
the image according to the text around it, using the
following alignments:
