| Image formats
There
are several hundred different formats that images can come in, fortunately
images for web pages tend to be in one of three different types. Perhaps the
most common are .gif images (pronounced jiff). Developed by
Compuserve, gif images offer small file sizes, up to 256 colours and can be
animated if required. Recently the format was sold to another company and the
"free" status of this format has come into question. In response to this, many
people have decided to use a similar format - .png images. Png images
offer slightly smaller file sizes than gifs but cannot be animated.
The
other widely used image format is the JPEG standard. JPEGs offer highly
compressed images at full colour, making them more suitable for things like
photographs where the 256 colours of a gif would spoil the image. We won't go
into image formats in any more depth as this is out of the scope of this guide,
but in general the rule when creating images is to make the file size as small
as possible while not causing the image to be unviewable.
Background images
background=""
The
background="" command, which is part of the <body> tag, allows us to
specify an image we want to use as the background for the page instead of
a single colour. After the command and within the quotes you need to
specify the path to the image file and the name of the image file. This
image is then tiled across the background of the webpage. This means that
the browser will take one image and tile it to create a larger background
image.
bgproperties="fixed"
The
bgproperties="fixed" command can be used to prevent the background from
scrolling. This only works with Internet Explorer.
Note:
When using background images, remember to test how long it takes to
download the page from the Internet. If an image is so large that it takes
30 seconds for your homepage to load, nobody will bother looking at your
site! |
Inserting images
<img>
The
<IMG> tag tells the browser that we want to display an image. To
tell the browser what image to display you must add in an additional
command to the <IMG> tag.
src=""
The src="" (source) command tells the
browser the path to the file and the name of the file. The path to the
file and the file name MUST be held within the quotes.
width="" & height=""
The width and height
commands tell the browser how large the image is. The browser will then
display the image at that exact size. These command are not necessary for
displaying images and should only be used if you know the correct
proportions for your image. They can be used to set the image to a size
other than its actual size but this will result in a loss of
quality.
border=""
You can have a
border around your image set to a specific number of pixels. The default
is 1 pixel but 0 is often prefferable.
alt=""
The alt="" attribute allows you to
specify alternate text to be displayed while the image is loading and for
people who are using text-only browsers. With faster Internet connections
these days this is not as important as it used to be, but should still be
used. Internet Explorer also uses this attribute as the tool-tip text,
that is, the text that appears when the mouse pointer is held over the
image.
<img src="fnn_linkbanner.gif"
border="0" alt="FNN Banner">
This is the full tag for
displaying an image. It tells the browser to display the image
fnn_linkbanner.gif within the browser. |
| Create a page |
The screen shot below is of the page we want to
create, and beneath that is the HTML code required to do so. Copy this
into Notepad, making any alterations you wish and try it out for yourself.
To view your page save the file somewhere on your desktop as "index.htm"
and then view it on your browser by double clicking on your newly created
html file.
|
| The HTML |
<html>
<head>
<title>My Home
Page</title>
</head>
<body
background="background.gif" bgproperties="fixed">
<p
align="center"><font size="5"
color="#3333FF"><b><u>My
Website</u></b></font></p>
<hr>
<p><font
color="#000000" face="Arial, Helvetica, sans-serif"
size="3">Hello,</p>
<p>Welcome to my website. I hope you
like it.</p>
<p>Below is a lovely
banner.</font></p>
<img src="fnn_linkbanner.gif"
border="0" alt="FNN Banner">
<p align="right"><font
color="#000000" face="Arial, Helvetica, sans-serif"
size="7"><i>Rob</i></font></p>
</body>
</html> |
You are here: Home-USEFUL INFO-Webmaster-HTML-Working with images
Previous Topic: Use of Colour Next Topic: Hyperlinks
|
PRODUCTS · 
USEFUL INFO · 
Webmaster · 
