|
Graphics
|
Using Images
Image files are not part of an html document, but linked to the html
document. The browser is responsible for combining the html file with
the graphic files identified in the document for display. They can
be stored anywhere, although generally in the same directory as the
document file with which they are associated. |
| Tags and Attributes: |
Description: |
| <body> . . . </body>
|
All of the following tags can
be used between <body> and </body>. |
| Images |
 |
The image tag
will allow you to embed graphics into your HTML page. If you look
at the example on the left you will see a basic example of the image
tag. This example loads an image called "example.gif" from the images
directory. |
There are four major attributes
that every image tag should contain.
The width, height, and alt attributes are all
technically optional, however due to how much they improve the accessibility
of your page and speed at which your page loads, consider them mandatory
items. |
<img src="boe.gif" border=0>
<img src="boe.gif" >
<img src="boe.gif" border=10>
|
In addition to simply displaying images inline,
you can also use them as clickable links. The syntax for the anchor
is the same as you learned in chapter SOMETHING. Instead of putting
text in between the <a href="some.html">...</a> tags you
can put an image. This will now be a clickable link.
If you use images as links, you will want to use an additional
attribute to the image tag called border. The border is the
colored line around the image and can range from 0 on up. If you
omit the border attribute it will default to a border of
1. There are times where you may want to have a border around the
image, but most of the time web developers set the border attribute
to 0. Take a look at the examples to the left.
|
| In addition to the attributes already mentioned,
few additional items that will further allow you to manipulate the
layout of your images. |
<img src="images/example.gif"
vspace="5"
hspace="5"
align="top" align="middle"
align="bottom"
align="right"
align="left"
align="texttop"
align="baseline"
align="absmiddle"
align="absbottom">
|
The additional attributes are
as follows:
vspace - you can set the amount of vertical space in pixels.
This can be helpful when you need to add some vertical "white space"
to an image.
hspace - you can set the amount of horizontal space in pixels.
This can be helpful when you need to add some horizontal "white space"
to an image.
vspace and hspace are generally used in situations where
you have text that wraps around and image.
align - this will allow you to align your images top, middle,
bottom, right, left, texttop, baseline, absmiddle, and absbottom.
-
top - will align the image with the tallest item in an adjacent
line of text.
-
middle - will align the middle of the image with the baseline
of the adjacent text.
-
bottom - will align the bottom of the image with the baseline
of the adjacent text.
-
right - will align the image to the right and will allow
text to flow around the left side of the image.
-
left - will align the image to the left and will allow text
to flow around the right side of the image.
-
texttop - will align itself with the tallest item in an adjacent
line of text. This usually has the same effect as align="top".
-
baseline - will align the bottom of the image with the baseline
of the adjacent text.
-
absmiddle - will align the middle of the image with the middle
of an adjacent line of text.
- absbottom - will align the bottom of an image with the
bottom of the adjacent text.
|
Example
<html>
<head>
<title>This is the Title</title>
</head>
<body bgcolor=#fffff0>
<center>
<img src="boe.jpg">
<p>
<img src="boe.jpg" align=left> </p>
</center>
</body>
</html>
Practice
Now you can practice what you've learned.
Please type or Copy and Paste the example into the box below and click
the "View HTML" button.
|
