HTML and CSS Reference
In-Depth Information
Using an Image in an HTML Web Page.
Example 12.1 is an HTML file linked to
an image. In this example, we review the way inline images are created in a document.
EXAMPLE
12.1
<html>
<head><title>HTML Images</title></head>
<body bgcolor="lightblue">
1
<img src="baby.jpg" alt="baby" border=2 align="left"
2
hspace="10" width="220" height="250" />
3 <pre>
Father calls me William,
sister calls me Will,
Mother calls me Willie,
but the fellers call me Bill!
Mighty glad I ain't a girl--
ruther be a boy,
Without them sashes, curls, an' things
that's worn by Fauntleroy!
Love to chawnk green apples
an' go swimmin' in the lake--
Hate to take the castor-ile
they give for belly-ache!
Most all the time, the whole year round,
there ain't no flies on me,
But jest 'fore Christmas
I'm as good as I kin be!
</pre>
</body>
</html>
__________________________
Eugene Field,
Jest 'Fore Christmas
,in
Childcraft
, Vol. 2, (Chicago:
Field Enterprises, Inc., 1949).
EXPLANATION
1
The image
src
attribute defines where the image is located. This image,
baby.jpg
,
is located where the HTML file called
image.html
is found, normally under the
document root of your browser. If the image can't be loaded, the
alt
attribute spec-
ifies text that will appear in its place. The image will be aligned at the left side of
the page and will have a thin black border around it. There will be 10 pixels of
space on both the left and right sides of the image. This keeps the text from jam-
ming up too close to the picture.
2
The
width
and
height
attributes of the
img
tag allow you to specify the size of your
image in pixels. If you right-click on an image (Windows), a popup window will
appear where you can select Properties to obtain info about your image.
3
This is a
<pre>
tag that is followed by all the text that appears at the right side of
the image. See Figure 12.1.
