Putting Graphics on a Web Page

Graphics BasicsTwo forces are always at odds when you post

graphics and multimedia on the Internet. Your eyes and ears want everything to be as detailed and accurate as possible, but your clock and wallet want files to be as small as possible. Intricate, colorful graphics mean big file sizes, which can take a long time to transfer even over a fast connection.

Graphics BasicsThe resolution of an image is the number of

individual dots, or pixels (the individual dots that make up a digital image), that make up an image. Large, high-resolution images generally take longer to transfer and display than small, low-resolution images.

Graphics BasicsYou might be surprised to find that resolution

isn’t the most significant factor determining an image file’s storage size (and transfer time). This is because images used on Web pages are always stored and transferred in compressed form. Image compression is the mathematical manipulation that images are put through to squeeze out repetitive patterns.

Graphics BasicsThere as many uses for Web page graphics as

there are Web pages, but four types of graphics are by far the most common:Photos of people, products, or placesGraphical banners and logosSnazzy-looking buttons or icons to link between

pagesBackground textures or wallpaper to go behind

pages

Placing an Image on a Web PageTo put an image on a Web page, first move

the image file into the same directory folder as the HTML text file. Insert the following HTML tag at the point in the text where you want the image to appear. Use the name of your image file instead of sample.jpg:<img src=“sample.jpg” />

Placing an Image on a Web PageIf you guessed that img stands for image,

you’re right; src stands for source, which is a reference to the location of the image file.

You may also use relative addresses such as photos/sample.jpg or ../smiley.jpg.

Labeling an ImageThe alt stands for alternate text because this

message will appear in place of the image in older Web browsers that don’t display graphics, or for those users who choose to turn off automatic image downloading in their Web browser preferences.

Labeling an ImageGraphics files sometimes take a while to

transfer over the Internet, most Web browsers show the text on a page first with the alt messages in place of the graphics.

Even after the graphics replace the alt messages, the alt message appears in a little box whenever the mouse pointer passes over an image.

Images That Are LinksYou can make any image into a clickable

link to another page with the same <a href> tag used to make text links.

Normally, Web browsers draw a colored rectangle around the edge of each image link. Like text links, the rectangle usually appears blue to people who haven’t visited the link recently, and purple to people who have. Since you seldom, if ever, want this unsightly line around your beautiful buttons, you should always include border=“0” in any <img /> tag within a link.

Horizontal Image AlignmentYou can use <div align=“center”>, <div

align=“right”> and <div align=“left”>.You can also make text wrap around

images, you do this by including an align attribute within the <img /> tag itself.

<img align=“left” /> aligns the image to the left and causes text to wrap around the right side of it. As you’d expect,<img align=“right” /> aligns the image to the right and causes text to wrap around the left side of it.

Horizontal Image Alignment<img align=“left” /> aligns the image to the

left and causes text to wrap around the right side of it.

As you’d expect,<img align=“right” /> aligns the image to the right and causes text to wrap around the left side of it.

You can’t use <img align=“center”/> because text won’t wrap around a centered image.

Vertical Image AlignmentSometimes, you may want to insert a

small image right in the middle of a line of text; or you might like to put a single line of text next to an image as a caption. In either case, it would be handy to have some control over how the text and images line up vertically. Should the bottom of the image line up with the bottom of the letters, or should the text and images all be arranged so their middles line up.

Vertical Image AlignmentYou can choose between these and several

other options:To line the up the top of an image with the top

of the tallest image or letter on the same line, use <img align=“top” />.

To line up the bottom of an image with the bottom of the text, use <img align=“bottom” />.

To line up the middle of an image with the baseline of the text, use <img align=“middle” />.

Vertical Image AlignmentYou can choose between these and several

other options:To line up the bottom of an image with the

bottom of the lowest image or letter on the same line, use <img align=“absbottom” />.

To line up the middle of an image with the overall vertical center of everything on the line, use <img align=“absmiddle” />.

HTML Tag and Attributes CoveredTag Attribute Function

<img /> Places an image file within the page

src=“...” The address or filename of the image.

alt=“…” A text message that can be displayed in place of the image.

align=“… Determines the alignment of the given image. If left or right, the image is aligned to the left or right column, and all following text flows beside that image. All other values, such as top, middle, bottom, absmiddle, or absbottom, determine the vertical alignment of this image with other items in the same line.

WorkshopHow would you insert an image file named

elephant.jpg at the very top of a Web page?How would you make the word Elephant

appear whenever the actual elephant.jpg image couldn’t be displayed by a Web browser?

Write the HTML to make the elephant.jpg image appear on the right side of the page, with a big headline reading “Elephants of the World Unite!” on the left side of the page next to it.

WorkshopWrite the HTML to make a tiny image of a

mouse (named mouse.jpg) appear between the words “cats and dogs”, and the words “lions and tigers”.

Suppose you have a large picture of a standing elephant named elephant.jpg. Now make a small image named fly.jpg appear to the left of the elephant’s head and mouse,jpg appear next to elephant’s right foot.