HTML and CSS Reference
In-Depth Information
First, if you're linking directly to images on another site, you're stealing bandwidth from
that site. Every time someone requests your page, they'll also be issuing a request to the
site where the image is posted and downloading the image from there. If you get a lot of
traffic, you can cause problems for the remote site.
The second reason is actually a problem regardless of how you use images from other
sites. If you don't have permission to use an image on your site, you're violating the
rights of the image's creator. Copyright law protects creative work from use without per-
mission, and it's granted to every creative work automatically.
The best course of action is to create your own images or look for images that are explic-
itly offered for free use by their creators. Even if images are made available for your use,
you should download them and store them with your web pages rather than linking to
them directly. Doing so prevents you from abusing the bandwidth of the person provid-
ing the images.
9
In this lesson you learned to place images on your web pages. Those images are nor-
mally in GIF, JPEG, or PNG format and should be small enough that they can be down-
loaded quickly over a slow link. You also learned that the HTML tag
<img>
enables you
to put an image on a web page either inline with text or on a line by itself. The
<img>
tag
has three primary attributes supported in standard HTML:
The location and filename of the image to include
src
How to position the image vertically with its surrounding
text.
align
can have one of three values:
top
,
middle
,or
bottom
(deprecated from HTML5 in favor of style sheets).
align
A text string to substitute for the image in text-only browsers
alt
You can include images inside a link tag (
<a>
) to treat them as links.
In addition to the standard attributes, several other attributes to the
<img>
tag provide
greater control over images and layout on web pages. You learned how to use these
HTML 3.2 attributes in this lesson, but they have been removed from HTML5 in favor of
style sheets. They include the following:
Places the image against the appropriate margin,
align=“right”
, allowing all the following text to flow into
the space alongside the image.
align=“left”
An extension to
<br>
that enables you to stop wrapping text
alongside an image.
clear
can have three values:
left
,
right
, and
all
.
clear
