HTML

Chapter 8 Putting Images on a Web

Page

Developing a Web Site 1

Objective

 You will learn to

 put graphics on your pages with HTML.

Developing a Web Site 2

Placing Image(s) on a Web Page

 You can use the image files in the GIF or

JPEG format (the filenames will end in
.gif or .jpg).
 Put them on your hard drive in whichever
folder you use for creating Web
pages(same directory folder as the
HTML text file).

Developing a Web Site 3

Placing Image on a Web Page -
continued
 Tag: <IMG>
 Attributes: src(source or location of the
image file), alt(alternate short text
message), align(left-aligns the image to
the left and causes text to wrap around
the right side of it; right-aligns the image
to the right and causes text to wrap
around the left side of it;

Developing a Web Site 4

Placing Image on a Web Page -
continued
 top-line up the top of an image with the top
of the tallest image or letter on the same
line; bottom-line up the bottom of an image
with the bottom of the text; middle-line up
the middle of an image with the middle of
the text), width(width of the image in pixel or
percentage), height(height of the image in
pixel or percentage), border(enlarges the
rectangular border around the images in
pixel)

Developing a Web Site 5

Placing Image on a Web Page -
continued
 hspace(add extra space (in pixel) on the left
and right sides of any image), vspace(add
extra space (in pixel) on the top and bottom
sides of any image)

Developing a Web Site 6

Examples of Putting Image on the
Web Page
 <img src="pic1.jpg">
 <img
src=http://us.i1.yimg.com/us.yimg.com/i/
mntl/aut/05q3/img_volvo.jpg>
 <img src="Photo/pic2.gif">

Developing a Web Site 7

Example of Labeling the Image

 <img src="pic1.jpg" alt="beautiful face">

Developing a Web Site 8

Image Alignment with DIV Tag
 You can align the images to the center,
right margin or left margin using <DIV>
tag with align attribute.
 Examples:
 <div align="center"><img
src="pic1.jpg"></div>
 <div align="left"><img src="pic1.jpg"></div>
 <div align="center"><img
src="pic1.jpg"></div>

Developing a Web Site 9

Examples of Image Alignment with
Align Attribute
 <img src="pic1.jpg" align=“left">
 <img src="pic1.jpg" align="right">
 <img src="pic1.jpg“><img src="pic1.jpg"
align=“top">
 <img src="pic1.jpg“><img src="pic1.jpg"
align=“bottom">
 <img src="pic1.jpg“><img src="pic1.jpg"
align=“middle">
Developing a Web Site 10
Examples of Image Alignment with
Align Attribute-continued
 Hello<img src="pic1.jpg"
align=“top">Hello
 Hello<img src="pic1.jpg"
align=“bottom">Hello
 Hello<img src="pic1.jpg"
align=“middle">Hello

Developing a Web Site 11

Clickable Image

 You can make any image into a clickable

link to another page(external or internal),
intra-page and e-mail links by using <A
HREF> tag. 
 Examples:
 <a href="http://www.honda.com"><img
src="pic1.jpg"></a>
 <a href=“index.html"><img
src="pic1.jpg"></a>
Developing a Web Site 12
Clickable Image-continued
 <a href=“subjects/dwe.html"><img
src="pic1.jpg"></a>
 <a href=“#top"><img src="pic1.jpg"></a>

 <a
href="mailto:sktan@kdupg.edu.my"><img
src="pic1.jpg"></a>

Developing a Web Site 13

Examples of Specifying the Width
and Height of Image
 <img src="pic1.jpg" width="200"
height="50">
 <img src="pic1.jpg" width=“35%"
height=“70%">

Developing a Web Site 14

Example of Including the border
Attribute
 <img src="pic1.jpg" border="15">
 <img src="pic1.jpg" border="15“
style="border-color: #FF0000">

Developing a Web Site 15

Examples of Adding Extra Spaces
for the Image
 <img src="pic1.jpg" hspace="15">
 <img src="pic1.jpg" vspace="20">

Developing a Web Site 16

Skip to the Bottom of Image

 You can skip down past the bottom of

the image at any time with the <BR> tag.
 Attribute: clear(left, right, all)
 Examples:
 <img src="pic1.jpg“ align="left">text……<br
clear=“left”>
 <img src="pic1.jpg“ align=“right">text……
<br clear=“right”>

Developing a Web Site 17

Skip to the Bottom of Image-
continued
 <img src="pic1.jpg"align="left"><img
src="pic1.jpg"align="right"><br
clear="all">text…

Developing a Web Site 18

Summary
 You have learned to use the <IMG> tag to
place graphics images on your Web pages.
You learned to include a short text message to
appear in place of the image as it loads. You
also learned to control the horizontal and
vertical alignment of each image, how to make
text wrap around the left or right side of an
image, how to specify image width and height,
and how to add space and set border for the
image. Finally, you learned how to make
images into "buttons" that link to other pages
using the <A> tag.

Developing a Web Site 19