Tutorials
Images In HTML
The "src" Code
The src code is what chooses the image. With
"src" you can either use an image from your local host or
another site a.k.a. hot-linking. If you wanted to use an
image from your local host you would use the following code:
<src="images/yourimage">
Note: variables are marked in red.
If you wanted to "hot-link" or use an image from another
site or host you would use this code:
<src="http://sitenamehere.sitextensionhere/locationofimage/
imagename.imagetype>
Please note once again that variables are marked in
red.
Some people may say that these two codes, although marked
separately here, are in actuality the same code. That may be
but personally I find it easier to look at them separately.
Linking with Images
One of the common uses of images is as
hyperlinks. Hyperlinks are things that when you click them
they take you to another spot either on the same site or a
different site altogether. Now, I could do a whole tutorial
on hyperlinks but for now let's just worry about hyperlinks
in the form of images. First, pick your image and type in
the basic image code:
<src="imagelocation/imagename.imagextension>
Note: As always variables are in red.
Next, here is the code for hyperlinks:
<a href="http://sitename.siteextension/">***</a>
Now, if you aren't an idiot then you noticed the *** in
between the opening tag and the closing tag. This is not
HTML code! I put those there to make it easier. The next
thing we want to do it replace the *** with the previous
image code so we get:
<a href="http://sitename.sitextension/"><src="imagelocation/
imagename.imagextension></a>
This will give us an image that when clicked will bring
us to the site/page specified.
Borders
No, not the high-quality bookstore...we're
talking about borders around images. Perhaps the simplest
element in all of HTML is setting borders in images. First
things first let's get our image tag ready:
<img src="locationofimage/imagename.imageextension">
Note: As throughout all the tutorials variables are
marked in red.
The border element fits right into the <img> tag. The next thing we want to do is choose if we want our
border on/off.
On:
<img src="locationofimage/imagename.imageextension" border="1">
Off: <img src="locationofimage/imagename.imageextension" border="0">
Defining Height and Width
Defining height and width can greatly
enhance your images. At the same time, it can greatly
distort them. A good trick to remember is to use a multiple
of the original images measurements. Example:
The original image below of the suave Tom
Tucker is 75 pixels by 75 pixels:
Now, say we wanted this image to be twice as
big as it is. We would set the height/width like so:
<img src="locationofimage/imagename.imageextension"
height="150" width="150">
Which would give us this:
Just like the "border" element, the height/width elements
fit right into the <img> tag. Now look what happens if I do
not choose a multiple of the original dimensions:
Absolute crap, you've shattered Tom Tucker's good looks and
your reputation as a web designer!
The Little Rascal Known as
"alt"
"alt" while never necessary is at the same
time almost always necessary. Let me explain: "alt" is used
for two things. They are that if the image fails the words
you specified in "alt" will show up in its place and when
one of your users scrolls over the image with the "alt"
element the words specified will show up. An example:
Now when you scroll over that image it says Who the hell do
you think you are?
Pretty nifty, huh? I did this by using this code: (Variables
in red)
<img src="imagelocation/imagename.imageextension"
alt="yourtexthere">
Just like previously discussed elements the "alt" code
fits right into the <img> tag. |
