Putting Graphics on a Web Page

1. Putting Graphics on a Web Page

2. Graphics Basics • Two 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.

3. Graphics Basics • The 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.

4. Graphics Basics • You 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.

5. Graphics Basics • There 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 places • Graphical banners and logos • Snazzy-looking buttons or icons to link between pages • Background textures or wallpaper to go behind pages

6. Placing an Image on a Web Page • To 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” />

7. Placing an Image on a Web Page • If 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.

8. Labeling an Image • The 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.

9. Labeling an Image • Graphics 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.

10. Images That Are Links • You 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.

11. Horizontal Image Alignment • You 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.

12. 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.

13. Vertical Image Alignment • Sometimes, 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.

14. Vertical Image Alignment • You 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” />.

15. Vertical Image Alignment • You 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” />.

16. HTML Tag and Attributes Covered

17. Workshop • How 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.

18. Workshop • Write 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.