|
Images, what's a webpage
without them?! Images can be picky when they are being displayed
on the internet threw a web browser. For instance they need to be
set in RGB mode and not print graphics mode (CMYK). As a quick and
general rule about graphics on web sites simply remember that you
should only ever use two file formats .gif
and .jpg For more information
and tips on images on the internet goto the Jazzd
Personal Web Space Tips page. This page will explain
the differences and pros and cons on using a .gif
over a .jpg
Also if you are not interested
in creating your own images for your site, you can easily go to
the Web
Space Resources page and find links to sites that have
all kinds of images and buttons for you to create your own site
with. At that page you can also download image editing programs
to create and/or edit your own images.
Don't
forget that you can download the source
files
(html, and graphic files) that were used to create this site. |
There are a few ways
to display images, with the most basic way to simply use the <img>
tag. Other ways to display images is to make them backgrounds in
a table, a table cell or the background of the whole page. (learn
how to do that at the tables
page
(view the source of
this page for more indepth source code commentary on images and
image tags)
<img src="URL" height="" width="" alt="">
Now let's break down
this image tag and describe what each attribute does. The first
attribute in an image tag is almost always src="URL"
src means source and it tells the browser where to find the
image that you want to display. URL is replaced with a relative
file path or an absolute file path, with the location of the file.
- absolute
URL paths, are src or href that provide
the full URL (http://www.dejazzd.com/images/file.gif), absolute
paths make it possible to display images or link to files outside
of your own site and web server.
- relative
URL paths, are src or href that describe
the location of a file that is in relation to the current file
that you are in. It is a form of shorthand almost. It's also known
as slash dot syntax. Where contents of folders is seperated by
slashes ( / ) and to move back and
out of folders you use two dots ( ..
). Here's an example: src="../images/header.gif"
this source means that there is a folder named images
on the same level as the current folder
(so you have to go back a folder), it also states that there is
a file named header.gif in this images
folder.
width="#"
attribute tells the browser how wide the image is, using this attribute
is helpful to speeding up the display of the image. height="#"
works the same as width and tells the browser how tall the image
is. These two attributes do not need to be the exact dimensions
of your image, but for your information, HTML does not do a good
job of resizing images, it's best to put in the correct dimensions
and resize the image in a graphics program.
align places the
image in alignment with another object. align values can be
left, right, top, middle, bottom, baseline, text top, absolute
bottom, absolute middle, and absolute top
alt is the alternate
text that you provide for the image for browsers that did not display
the image correctly or for people with disabilites that maybe using
a program to speak the whole page to them.
border is mainly
used for image links, default for a linked image is set to 1 so
to not have an outline of your link color around the image you need
to make border="0"
The way you make an image
a link is by placing the <img>
tag inside the <a href>
tag's opening and closing tag. Like this:
<a href="URL"><img
src="URL" width="125" height="60"
alt="Alternate Text" border="0"></a>
You may
also add text or anything else you want inbetween the <a
href> opening and closing tags. Anything that appears
in between the link tags will be clickable and a link.
See
how easy it is to make your own
photo gallery with captions and
links to larger photos
|
